/* ==========================================================================
    Store Content
========================================================================== */

/*=== map  ===*/

#content .map{
	float: left;
	margin-top: 20px;
	margin-bottom: 54px;
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -mos-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

#content .map .pic{
	position: relative;
}
#content .map .pic > .text{
	position: absolute;
    left: 0;
    bottom: 32px;
}
#content .map .pic > .country > span{
	font-family:"Oswald";
	font-size: 16px;
	color: #00a1e1;
    letter-spacing: 0.8px;
}
#content .map .pic > .country > .eu{
	position: absolute;
	top: 100px;
    left: 9px;
}
#content .map .pic > .country > .asia{
	position: absolute;
    top: 255px;
    left: 345px;
}
#content .map .pic > .country > .na{
	position: absolute;
    top: 245px;
    right: 95px;
}
#content .map .pic > .city{
    position: absolute;
}
#content .map .pic > .city > .showBtn{
	position: relative;
	height: 7px;
    line-height: 7px;
    display: block;
    cursor: pointer;
}
#content .map .pic > .city > .showBtn > img{
    width: 7px;
    line-height: 7px;
    vertical-align: text-top;
}
#content .map .pic > .city > .showBtn > .map-tag{
	position: absolute;
    top: -162px;
    left: -67px;
    opacity: 0;
    display: none;
}

/*#content .map .pic > .city > .showBtn.active > .map-tag{
	display: block;
}*/



#content .map .pic > .city > .showBtn > .map-tag > img{
	opacity: 0.85;
}
#content .map .pic > .city > .showBtn > .map-tag .text{
	text-align: center;
    position: absolute;
    width: 141px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -mos-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin-top: -16px;
    line-height: 18px;
    color: #FFF;
}

/*EUROPE*/
#content .map .pic > .eu-de{
    top: 179px;
    left: 75px;
}

/*ASIA*/
#content .map .pic > .asia-in{
    top: 317px;
    left: 300px;
}

#content .map .pic > .asia-cn1{
    top: 271px;
    left: 406px;
    z-index: 20;
}
#content .map .pic > .asia-cn2{
    top: 265px;
    left: 416px;
    z-index: 20;
}
#content .map .pic > .asia-cn3{
    top: 285px;
    left: 407px;
}
#content .map .pic > .asia-cn4{
    top: 281px;
    left: 417px;
}
#content .map .pic > .asia-cn5{
    top: 277px;
    left: 426px;
}

#content .map .pic > .asia-jp1{
    top: 242px;
    left: 491px;
}
#content .map .pic > .asia-jp2{
    top: 237px;
    left: 501px;
}
#content .map .pic > .asia-jp3{
    top: 227px;
    left: 505px;
}

/*NORTH AMERICA*/
#content .map .pic > .na-usa{
    top: 220px;
    right: 276px;
}

/*=== body  ===*/

#content .body{
	margin-bottom: 74px;
}
#store .company-location > .left > .info .panel > .panel-heading > a:after{
    font-family: "icomoon";
    float: right;
    font-size: 24px;
}
#store .company-location > .left > .info .panel > .panel-heading > a[aria-expanded="true"]:after{
    content: "\e069";
}
#store .company-location > .left > .info .panel > .panel-heading > a[aria-expanded="false"]:after{
    content: "\e07f";
}


@media screen and (max-width: 1407px){
    #content > .head,
    #content > .body{
        padding-left: 15px;
        padding-right: 15px;
    }
}
@media screen and (max-width: 1199px){
    #content #map{
        position: relative;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -mos-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    #map .pic > img {
        width: 768px;
    }
    #content .map .pic > .country > span{
        font-size: 14px;
    }
    #content .map .pic > .country > .eu {
        top: 60px;
        left: 0px;
    }
    #content .map .pic > .country > .asia {
        top: 155px;
        left: 215px;
    }
    #content .map .pic > .country > .na {
        top: 160px;
        right: 25px;
    }
    #content .map .pic > .eu-de {
        top: 117px;
        left: 48px;
    }  
    #content .map .pic > .asia-in {
        top: 205px;
        left: 195px;
    }
    #content .map .pic > .asia-cn1 {
        top: 176px;
        left: 260px;
    }
    #content .map .pic > .asia-cn2 {
        top: 173px;
        left: 269px;
    }
    #content .map .pic > .asia-cn3 {
        top: 186px;
        left: 260px;
    }
    #content .map .pic > .asia-cn4 {
        top: 183px;
        left: 270px;
    }
    #content .map .pic > .asia-cn5 {
        top: 178px;
        left: 279px;
    }
    #content .map .pic > .asia-jp1 {
        top: 159px;
        left: 317px;
    }
    #content .map .pic > .asia-jp2 {
        top: 155px;
        left: 325px;
    }
    #content .map .pic > .asia-jp3 {
        top: 149px;
        left: 330px;
    }
    #content .map .pic > .na-usa {
        top: 138px;
        right: 163px;
    }
    #content .map .pic > .city.eu-de > .showBtn > .map-tag{
        top: -162px;
        left: -46px;
        opacity: 0;
        -webkit-transform: rotate(13deg);
        -mos-transform: rotate(13deg);
        -ms-transform: rotate(13deg);
        -o-transform: rotate(13deg);
        transform: rotate(13deg);
    }
    #content .map .pic > .city.eu-de > .showBtn > .map-tag .text {
        text-align: center;
        position: absolute;
        width: 131px;
        top: 50%;
        left: 50%;
        margin-top: -27px;
        margin-left: 5px;
        line-height: 18px;
        color: #FFF;
        -webkit-transform: rotate(-13deg) translate(-50%, -50%);
        -mos-transform: rotate(-13deg) translate(-50%, -50%);
        -ms-transform: rotate(-13deg) translate(-50%, -50%);
        -o-transform: rotate(-13deg) translate(-50%, -50%);
        transform: rotate(-13deg) translate(-50%, -50%);
    }


}

@media screen and (max-width: 991px){
    #content .body,
    #store .company-location,
    .max-sm-size .in .table-responsive,
    .max-sm-size .in .table-responsive .panel{
        margin-bottom: 0px;
    }
    #content #map{
        display: none;
    }
    #content .table-responsive > .panel-group,
    #content .table-responsive > .panel-default{
        display: block;
        width: 100%;
        float: left;
        position: relative;
    }
    /*.company-location > .left > .info table td:first-child{
        padding: 0 15px;
    }*/
    .company-location > .left > .info table td:last-child{
        padding-left: 15px;
        padding-right: 15px;
    }

}

@media screen and (max-width: 767px){
    
    .company-location > .left > .info table td:last-child span{
        font-size: 12px;
    }
    #store .company-location > .left > .info .panel > .panel-heading > a:after {
        font-size: 19px;
    }
}