@charset "utf-8";
/* CSS Document */
.body{overflow-x:hidden;}
.map-distributor{background:rgb(0, 36, 59);height: 100vh;width: 100%;overflow:hidden;}
.perspect{
	position: relative;
    perspective: 1500px;
    perspective-origin: top center;
	transition: 0.3s all linear;
	}
.main-img{
	    width: 100%;
	transform-style: preserve-3d;
    transform: rotate3d(100, 0, 0, 50deg) translate3d(-35px, 170px, 150px);
	}
	.india-section{
		width: 3%;
    position: absolute;
    left: 785px;
    top: 300px;
    transform-style: preserve-3d;
    transform: translate3d(15px, 35px, -150px);transition:0.5s all linear;filter: drop-shadow(1px 5px 5px black);cursor:pointer;animation:updown 1s normal forwards infinite;z-index:2;
		}
.location-indicate{width:100%;}
	@keyframes updown{0%{transform:translate3d(15px, -20px, -150px);drop-shadow(0px 5px 5px black);} 50%{transform:translate3d(15px, -30px, -150px);drop-shadow(0px 10px 10px black);} 100%{transform:translate3d(15px, -20px, -150px);drop-shadow(0px 5px 5px black);}}

.india-section ul{color: #000;
    font-size: 15px;
    background: #fff;
    width: 300px;
    padding: 10px;
    margin-bottom: 15px;
    text-align: center;
    margin-left: -10px;
    border-radius: 5px;
    position: relative;
    display:none;
    transition: 0.2s all linear;position: absolute;
    top: -95px;}
.india-section ul:before{content:'';position: absolute;
    bottom: -8px;
    left: 15px;
    width: 15px;
    height: 15px;
    background: #fff;
    transform: rotate(45deg);}
/*.india-section ul p{color: #000;
    font-size: 18px;
    font-weight: bold;
    background: #fff;
    width: 100px;
    padding: 5px;
    margin-bottom: 15px;
    text-align: center;
    margin-left: -10px;
    border-radius: 5px;position:relative;opacity:0;transition:0.2s all linear;}
.india-section ul p:before{content:'';position: absolute;
    bottom: -8px;
    left: 15px;
    width: 15px;
    height: 15px;
    background: #fff;
    transform: rotate(45deg);}*/
	.america-section{
		width: 3%;
    position: absolute;
    left: 0;
    top: 230px;
    transform-style: preserve-3d;
	text-align:center;
    transform: translate3d(15px, 35px, -150px);transition:0.5s all linear;filter: drop-shadow(1px 5px 5px black);cursor:pointer;animation:updown 1s normal forwards infinite;z-index:3;
		}
.america-section ul{color: #000;
    font-size: 15px;
    background: #fff;
    width: 300px;
    padding: 10px;
    margin-bottom: 15px;
    text-align: center;
    margin-left: -10px;
    border-radius: 5px;
    position: relative;
    display:none;
    transition: 0.2s all linear;position: absolute;
    top: -150px;}
.america-section ul:before{content:'';position: absolute;
    bottom: -8px;
    left: 15px;
    width: 15px;
    height: 15px;
    background: #fff;
    transform: rotate(45deg);}
	.russia-section{
		width: 3%;
    position: absolute;
    left: 800px;
    top: 165px;
    transform-style: preserve-3d;
	text-align:center;
    transform: translate3d(15px, 35px, -150px);transition:0.5s all linear;filter: drop-shadow(1px 5px 5px black);cursor:pointer;animation:updown 1s normal forwards infinite;z-index:3;
		}
		.thailand-section{
		width: 3%;
    position: absolute;
    right: 185px;
    bottom: 180px;
    transform-style: preserve-3d;
	text-align:center;
    transform: translate3d(15px, 35px, -150px);transition:0.5s all linear;filter: drop-shadow(1px 5px 5px black);cursor:pointer;animation:updown 1s normal forwards infinite;z-index:3;
		}
.russia-section ul{color: #000;
    font-size: 15px;
    background: #fff;
    width: 300px;
    padding: 10px;
    margin-bottom: 15px;
    text-align: center;
    margin-left: -10px;
    border-radius: 5px;
    position: relative;
    display:none;
    transition: 0.2s all linear;position: absolute;
    top: 45px;}
.russia-section ul:before{content:'';position: absolute;
    top: -8px;
    left: 15px;
    width: 15px;
    height: 15px;
    background: #fff;
    transform: rotate(45deg);}
	.uk-section{
		width: 3%;
    position: absolute;
    left: 485px;
    top: 187px;
    transform-style: preserve-3d;
    transform: translate3d(15px, 35px, -150px);transition:0.5s all linear;filter: drop-shadow(1px 5px 5px black);cursor:pointer;animation:updown 1s normal forwards infinite;z-index:2;
		}
.uk-section ul{color: #000;
    font-size: 15px;
    background: #fff;
    width: 300px;
    padding: 10px;
    margin-bottom: 15px;
    text-align: center;
    margin-left: -10px;
    border-radius: 5px;
    position: relative;
    display:none;
    transition: 0.2s all linear;position: absolute;
    top: -100px;}
.uk-section ul:before{content:'';position: absolute;
    bottom: -8px;
    left: 15px;
    width: 15px;
    height: 15px;
    background: #fff;
    transform: rotate(45deg);}
	
.pak-section{
		width: 3%;
    position: absolute;
    right: 412px;
    bottom: 220px;
    transform-style: preserve-3d;
    transform: translate3d(15px, 35px, -150px);transition:0.5s all linear;filter: drop-shadow(1px 5px 5px black);cursor:pointer;animation:updown 1s normal forwards infinite;z-index:2;
		}
		.germany-section{
		width: 3%;
    position: absolute;
    left: 450px;
    top: 190px;
    transform-style: preserve-3d;
    transform: translate3d(15px, 35px, -150px);transition:0.5s all linear;filter: drop-shadow(1px 5px 5px black);cursor:pointer;animation:updown 1s normal forwards infinite;z-index:2;
		}
		.korea-section{
		width: 3%;
    position: absolute;
     right: 135px;
    bottom: 120px;
    transform-style: preserve-3d;
    transform: translate3d(15px, 35px, -150px);transition:0.5s all linear;filter: drop-shadow(1px 5px 5px black);cursor:pointer;animation:updown 1s normal forwards infinite;z-index:2;
		}
		.indonesia-section{
		width: 3%;
    position: absolute;
    right: 610px;
    bottom: 290px;
    transform-style: preserve-3d;
    transform: translate3d(15px, 35px, -150px);transition:0.5s all linear;filter: drop-shadow(1px 5px 5px black);cursor:pointer;animation:updown 1s normal forwards infinite;z-index:2;
		}
		.egypt-section{
		width: 3%;
    position: absolute;
    left: 580px;
    bottom: 200px;
    transform-style: preserve-3d;
    transform: translate3d(15px, 35px, -150px);transition:0.5s all linear;filter: drop-shadow(1px 5px 5px black);cursor:pointer;animation:updown 1s normal forwards infinite;z-index:2;text-align:center;
		}
		.iran-section{
		width: 3%;
    position: absolute;
	right: 445px;
    bottom: 245px;
    transform-style: preserve-3d;
	text-align:center;
    transform: translate3d(15px, 35px, -150px);transition:0.5s all linear;filter: drop-shadow(1px 5px 5px black);cursor:pointer;animation:updown 1s normal forwards infinite;z-index:2;
		}
		.israel-section{
		width: 3%;
    position: absolute;
    left: 545px;
    bottom: 220px;
    transform-style: preserve-3d;
	text-align:center;
    transform: translate3d(15px, 35px, -150px);transition:0.5s all linear;filter: drop-shadow(1px 5px 5px black);cursor:pointer;animation:updown 1s normal forwards infinite;z-index:2;
		}
		.mexico-section{
		width: 3%;
    position: absolute;
    left: -30px;
    bottom: 200px;
    transform-style: preserve-3d;
	text-align:center;
    transform: translate3d(15px, 35px, -150px);transition:0.5s all linear;filter: drop-shadow(1px 5px 5px black);cursor:pointer;animation:updown 1s normal forwards infinite;z-index:2;
		}
		.turkey-section{
		width: 3%;
    position: absolute;
    right: 525px;
    bottom: 280px;
    transform-style: preserve-3d;
	text-align:center;
    transform: translate3d(15px, 35px, -150px);transition:0.5s all linear;filter: drop-shadow(1px 5px 5px black);cursor:pointer;animation:updown 1s normal forwards infinite;z-index:2;
		}
	
	.ukraine-section{
		width: 3%;
    position: absolute;
    right: 690px;
    bottom: 285px;
    transform-style: preserve-3d;
	text-align:center;
    transform: translate3d(15px, 35px, -150px);transition:0.5s all linear;filter: drop-shadow(1px 5px 5px black);cursor:pointer;animation:updown 1s normal forwards infinite;z-index:2;
		}
	.cote-section{
		width: 3%;
    position: absolute;
    right: 720px;
    bottom: 160px;
    transform-style: preserve-3d;
	text-align:center;
    transform: translate3d(15px, 35px, -150px);transition:0.5s all linear;filter: drop-shadow(1px 5px 5px black);cursor:pointer;animation:updown 1s normal forwards infinite;z-index:2;
		}
		.ijs-section{
		width: 3%;
    position: absolute;
    right: 500px;
    bottom: 235px;
    transform-style: preserve-3d;
	text-align:center;
    transform: translate3d(15px, 35px, -150px);transition:0.5s all linear;filter: drop-shadow(1px 5px 5px black);cursor:pointer;animation:updown 1s normal forwards infinite;z-index:2;
		}
		.beapc-section{
		width: 3%;
    position: absolute;
    left: 55px;
    bottom: 75px;
    transform-style: preserve-3d;
	text-align:center;
    transform: translate3d(15px, 35px, -150px);transition:0.5s all linear;filter: drop-shadow(1px 5px 5px black);cursor:pointer;animation:updown 1s normal forwards infinite;z-index:2;
		}
		.phi-section{
		width: 3%;
    position: absolute;
    right: 95px;
    bottom: 175px;
    transform-style: preserve-3d;
	text-align:center;
    transform: translate3d(15px, 35px, -150px);transition:0.5s all linear;filter: drop-shadow(1px 5px 5px black);cursor:pointer;animation:updown 1s normal forwards infinite;z-index:2;
		}
.pak-section ul,.germany-section ul,.indonesia-section ul,.korea-section ul,.egypt-section ul,.iran-section ul,.israel-section ul,.mexico-section ul,.turkey-section ul,.thailand-section ul,.ukraine-section ul,.cote-section ul,.ijs-section ul,.beapc-section ul,.phi-section ul{color: #000;
    font-size: 15px;
    background: #fff;
    width: 300px;
    padding: 10px;
    margin-bottom: 15px;
    text-align: center;
    margin-left: -10px;
    border-radius: 5px;
    position: relative;
    display:none;
    transition: 0.2s all linear;position: absolute;
    top: -100px;}
.pak-section ul:before,.germany-section ul:before,.indonesia-section ul:before,.korea-section ul:before,.egypt-section ul:before,.iran-section ul:before,.israel-section ul:before,.mexico-section ul:before,.turkey-section ul:before,.thailand-section ul:before,.ukraine-section ul:before,.cote-section ul:before,.ijs-section ul:before,.beapc-section ul:before,.phi-section ul:before{content:'';position: absolute;
    bottom: -8px;
    left: 15px;
    width: 15px;
    height: 15px;
    background: #fff;
    transform: rotate(45deg);}

.china-section{
		width: 3%;
    position: absolute;
    right: 210px;
    top: 275px;
    transform-style: preserve-3d;
    transform: translate3d(15px, 35px, -150px);transition:0.5s all linear;filter: drop-shadow(1px 5px 5px black);cursor:pointer;animation:updown 1s normal forwards infinite;z-index:2;
		}
.china-section ul{color: #000;
    font-size: 15px;
    background: #fff;
    width: 300px;
    padding: 10px;
    margin-bottom: 15px;
    text-align: center;
    margin-left: -10px;
    border-radius: 5px;
    position: relative;
    display:none;
    transition: 0.2s all linear;position: absolute;
    top: -100px;}
.china-section ul:before{content:'';position: absolute;
    bottom: -8px;
    left: 15px;
    width: 15px;
    height: 15px;
    background: #fff;
    transform: rotate(45deg);}

.slide-distributor{
	background: #fff;
    position: absolute;
    right: -45%;
    width: 45%;
    height: 100vh;
    z-index: 1;
    padding: 40px;
    border: 0;
    transform: translate3d(0px, 0, 300px);
    box-sizing: border-box;
    box-shadow: 0 0 5px #000;
	transition:0.3s all linear;
	}
.border-content{
	padding: 20px;
    border: 5px solid rgb(253, 220, 105);
    height: 100%;
	}
.countryname{margin-bottom: 20px;text-decoration: underline;font-weight:bold;color:#000;}
.content-close{float: right;
background:transparent;
    color: #000;
    border: 0;}
.content-close i{font-size:25px;}

.china-section:hover{z-index:3};
.uk-section:hover{z-index:3}
.india-section:hover{z-index:4}
.america-section:hover{z-index:3}
.russia-section:hover{z-index:3}
.pak-section:hover{z-index:3}
.germany-section:hover {z-index:3}
.korea-section:hover{z-index:3}
.indonesia-section:hover {z-index:3}
.egypt-section:hover {z-index:3}
.iran-section:hover{z-index:3}
.israel-section:hover{z-index:3}
.mexico-section:hover{z-index:3}
.turkey-section:hover{z-index:3}
.thailand-section:hover{z-index:3}
.ukraine-section:hover{z-index:3}
.cote-section:hover{z-index:3}
.ijs-section:hover{z-index:3}
.beapc-section:hover{z-index:3}
.phi-section:hover{z-index:3}

.uk-section:hover ul{display:block;}
.india-section:hover ul{display:block;}
.america-section:hover ul{display:block;}
.china-section:hover ul{display:block;}
.russia-section:hover ul{display:block;}
.pak-section:hover ul{display:block;}
.germany-section:hover ul{display:block;}
.korea-section:hover ul{display:block;}
.indonesia-section:hover ul{display:block;}
.egypt-section:hover ul{display:block;}
.iran-section:hover ul{display:block;}
.israel-section:hover ul{display:block;}
.mexico-section:hover ul{display:block;}
.turkey-section:hover ul{display:block;}
.thailand-section:hover ul{display:block;}
.ukraine-section:hover ul{display:block;}
.cote-section:hover ul{display:block;}
.ijs-section:hover ul{display:block;}
.beapc-section:hover ul{display:block;}
.phi-section:hover ul{display:block;}

.china-section ul p,.uk-section ul p,.india-section ul p,.america-section ul p,.russia-section ul p,.pak-section ul p,.germany-section ul p,.korea-section ul p,.indonesia-section ul p,.egypt-section ul p,.iran-section ul p,.israel-section ul p,.mexico-section ul p,.turkey-section ul p, .thailand-section ul p,.ukraine-section ul p,.cote-section ul p,.ijs-section ul p, .beapc-section ul p,.phi-section ul p{font-weight: bold;
    font-size: 18px;
    margin-bottom: 0;
    text-align: left;
    text-transform: uppercase;}
.china-section ul li,.uk-section ul li,.india-section ul li,.america-section ul li,.russia-section ul li,.pak-section ul li,.germany-section ul li,.korea-section ul li,.indonesia-section ul li,.egypt-section ul li,.iran-section ul li,.israel-section ul li,.mexico-section ul li,.turkey-section ul li,.thailand-section ul li,.ukraine-section ul li,.cote-section ul li,.ijs-section ul li, .beapc-section ul li,.phi-section ul li{text-align: left;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    padding-top: 5px;}
.china-section ul li i{color:red;}

.svg{ width: 100%;
    height: -webkit-fill-available;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;}
.svg path{stroke: yellow;
    stroke-width: 3px;
    stroke-dasharray: 10px;}
.slide-distributor .company-name p{display:none;}
.slide-distributor .company-name li{list-style:none;padding-bottom:8px;}
.index-section{
	position: absolute;
    bottom: -310px;
    right: 200px;
    width: 300px;
    height: 65%;
    background: #fff;
    padding: 5px;
	border-radius:5px;
}
.index-section h4{text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #000;
    background: #000;
    color: #fff;}
.index-section .symbol{width:20px;height:20px;margin:15px;}
.index-section .green{background:green;}
.index-section .red{background:red;}
.index-section .index-name{margin:12px;text-align:left;}
.pad-0{padding:0;}
.mobile-view{display:none;}
.location-indicatee{width:75%;}
.d-table{width:100%;}
.d-table thead{background:#000;}
	.d-table thead tr th{font-size:15px;text-transform:capitalize;color:#fff;padding:10px !important;padding-left:10px !important;}
	.d-table tbody tr td{font-size:15px;border-bottom: 1px solid #ccc;text-transform:capitalize;padding:10px !important;padding-left:10px !important;font-weight:bold;}
	.d-table tbody tr td:first-child{border-right:1px solid #ccc;}
	.mar-t-b-30{margin-top:30px;margin-bottom:30px;}
.border-content p{font-family:sans-serif;line-height:25px;}
.db-name{margin-top: 20px;
    margin-bottom: 15px;
    font-family: roboto condensed;
    font-size: 18px;}

@media(max-width:1023px){
	.desktop-view{display:none;}
	.mobile-view{display:block;}
	.distibutor-list{padding: 15px;}
	.table{width: 100% !important;
    margin-bottom: 15px;
    margin-top: 15px;}
	.table thead{background:#000;}
	.table thead tr th{font-size:13px;padding:10px !important;text-transform:capitalize;color:#fff;}
	.table tbody tr td{font-size:13px;padding:8px !important; border-bottom: 1px solid #ccc;text-transform:capitalize;color: #000;font-weight: bold;text-align: left;}
	.table tbody tr td:first-child{border-right:1px solid #ccc;}
}
@media(min-width:1600px){
	.map-distributor{height:100vh;}
	.slide-distributor{height:100vh;}
}