﻿#MainContent {
	position:relative;
}

.SlideOut.SliderOpen .row{
	display: flex;
}

.col-lg-12 {
	position: inherit;
}

.MapContainer{
	position: relative;
}

.WorldMapWrapper {
	position: relative;
	width: 100%;
}

    .WorldMapWrapper .WorldMap {
		width: 100%;
    }
    
    	.WorldMapWrapper .WorldMap svg {
    		display: block;
    		margin: 0 auto;
    	}
    	


    #Africa:hover,
    #AsiaPacific:hover,
    #China:hover,
    #Europe:hover,
    #NorthAmerica:hover,
    #SouthAmerica:hover,
    #Australia:hover,
	#Japan:hover,
	#AsiaPacific:hover ~ #Japan,
	#AsiaPacific:hover ~ #Australia,
	#CentralEurope:hover,
	#Poland:hover,
	#Europe:hover ~ #CentralEurope,
	#Europe:hover ~ #Poland {
        cursor: pointer;
        fill: #ff6a00
    }
    
path {
    stroke: white;
}

.overlay,
.africaoverlay {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: -115%;
    background: rgba(255,255,255,0.5);
}

.SlideOut {
    background: #302e2f;
    height: 570px;
    width: 0px;
    position: absolute;
    left: 0;
    bottom: -93%;
    z-index: 99;
    overflow: hidden;
    padding: 45px 0;
    display: block;
}

	.SlideOut .close {
		position: absolute;
		right: -3px;
		cursor: pointer;
		width: 54px;
		height: 54px;
		border-radius: 4px;
		background: url(/media/f4cpcogz/close.svg) no-repeat;
   }
    
    

	.SlideOut .SlideOutContent {
		height: 290px;
	}
	
	.SlideOut .SlideOutImage {
		width: 70%;
		margin-top: 45px;
	}
	
		.SlideOut .SlideOutContent .Top {
		    padding: 20px 30px;
		    margin-bottom: 30px;
		}
	
			.SlideOut .SlideOutContent .Top h2 {
				color: #fff !important;
				font-size: 42px !important;
				margin-bottom: 10px !important;
			    /* line-height: 46px!important; */
				line-height: 0.95;
  				letter-spacing: 1px;
			}
			
			.SlideOut .SlideOutContent .Top h6 {
				color: #fff !important;
			}

		.SlideOut .SlideOutContent .Bottom {
		    padding: 25px 30px;
		    height: 120px;
		}
			.SlideOut .SlideOutContent .Bottom .ContactsDetails .Items .Icon {
				height: 40px;
				width: 40px;
				margin-right: -5px;
			}
			.SlideOut .SlideOutContent .Bottom .ContactsDetails .Items .Icon,
            .SlideOut .SlideOutContent .Bottom .ContactsDetails .Items .Details {
                display: inline-block;
                vertical-align: top;
            }
		
			

			.SlideOut .SlideOutContent .Bottom .ContactsDetails .Tel .Icon {
				background: #d42e12 url(/media/gdjpsae2/phone.svg) no-repeat center center;
				background-size: 15px;
			}

			.SlideOut .SlideOutContent .Bottom .ContactsDetails .Email .Icon {
				background: #d42e12 url(/media/0rwdtcnh/email.svg) no-repeat center center;
				background-size: 15px;
			}
			.SlideOut .SlideOutContent .Bottom .ContactsDetails .Address .Icon {
				background: #d42e12 url(/media/cewf1buq/pin.svg) no-repeat center center;
				background-size: 15px;
			}
			.SlideOut .SlideOutContent .Bottom .ContactsDetails .Fax .Icon {
				background: #d42e12 url(/media/pafbcbq3/fax.svg) no-repeat center center;
				background-size: 15px;
			}
			.SlideOut .SlideOutContent .Bottom .ContactsDetails .Items .Details .Item .Title {
				font-weight: bold;
				margin-top: -4px;
			}

			.SlideOut .SlideOutContent .Bottom .ContactsDetails .Items .Details .Item {
                padding: 0 0 15px 15px;
            }

			.SlideOut .SlideOutContent .Bottom .ContactsDetails .Value,
			.SlideOut .SlideOutContent .Bottom .ContactsDetails .Title,
			.SlideOut .SlideOutContent .Bottom .ContactsDetails p,
			.SlideOut .SlideOutContent .Bottom .ContactsDetails a{
				color: #fff;
			}

			.SlideOut .SlideOutContent .Bottom .ContactsDetails .Items .Details .Item .Line {
				height: 2px;
				width: 50px;
				background: #d42e12;
				margin-top: 6px;
			}

			
			.SlideOut .SlideOutContent .Bottom a {
				color: #fff !important;
			}
			
			.SlideOut .SlideOutContent .Bottom a:hover {
				color: #d42e12 !important;
			}
			

/* Africa */

.AfricaPopup {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(255,255,255,0.8);
}

    .AfricaPopup #AfricaMap {
        height: 650px;
        width: 1200px;
        display: block;
        margin: 0 auto;
    }
	.AfricaPopup #AfricaMap svg {
		margin: 0 auto;
		display: block;
	}


    #SouthAfrica:hover,
    #Botswana:hover,
    #Zimbabwe:hover,
    #DRC:hover,
    #Rwanda:hover,
    #Ethiopia:hover,
	#Gauteng:hover,
	#Mpumalanga:hover,
	#Limpopo:hover,
	#EasternCape:hover,
	#WesternCape:hover,
	#NorthWest:hover
	{
        cursor: pointer;
        /* fill:  #d42e12; */
    }
	circle:hover, text:hover{
		cursor: pointer;

	}

.africaclose {
    position: absolute;
    right: 20px;
    top: 20px;
    height: 40px;
    width: 40px;
    border: 2px solid #ccc;
    border-radius: 4px;
}

    .africaclose :before, .africaclose :after {
		position: absolute;
	    left: 17px;
	    top: 4px;
	    content: ' ';
	    height: 28px;
	    width: 2px;
	    background-color: #c8c8c8;
    }
    
    .africaclose :before {
        transform: rotate(45deg);
    }

    .africaclose :after {
        transform: rotate(-45deg);
    }

	.africaclose:hover {
		cursor: pointer;
	}    
    
    .africaclose:hover :before, .africaclose:hover :after {
    	background-color:#ff6a00;
    }

	.SaClose {
		position: absolute;
		right: 230px;
		z-index: 1;
		cursor: pointer;
		width: 54px;
		height: 54px;
		border-radius: 4px;
		background: url(/Media/AfricaMap/Map/Africa/WhiteClose.svg) no-repeat;
	}
		.SaClose:hover{
			background: url(/media/f4cpcogz/close.svg) no-repeat;
		}

/* Countries red Dots */

circle#SaDot {
    cy: 630;
    cx: 303;
}
circle#SaDot1 {
    cy: 640;
    cx: 310;
}
circle#SaDot2 {
    cy: 631;
    cx: 367;
}
circle#SaDot3 {
    cy: 579;
    cx: 377.25;
}
circle#SaDot4 {
    cy: 575;
    cx: 384;
}
circle#SaDot5 {
    cy: 571;
    cx: 390.35;
}
circle#SaDot6 {
    cy: 571;
    cx: 376;
}
circle#SaDot7 {
    cy: 568;
    cx: 382.5;
}
circle#SaDot8 {
    cy: 563;
    cx: 381;
}
circle#SaDot9 {
    cy: 563;
    cx: 386;
}
circle#SaDot10 {
    cy: 560;
    cx: 383;
}
circle#SaDot11 {
    cy: 558;
    cx: 387;
}
circle#SaDot12 {
    cy: 559;
    cx: 371;
}
circle#SaDot13 {
    cy: 550;
    cx: 375;
}
circle#SaDot14 {
    cy: 542;
    cx: 379;
}
circle#SaDot27 {
    cx: 375;
    cy: 99;
}
circle#EthDot {
    cx: 463;
    cy: 248;
}
circle#ZimDot {
    cy: 486;
    cx: 400;
}
circle#ZimDot1 {
    cy: 507;
    cx: 387;
}
circle#ZimDot2 {
    cy: 518;
    cx: 400;
}
circle#DrcDot {
    cy: 382;
    cx: 260;
}
circle#BotsDot {
    cy: 546;
    cx: 361;
}
circle#BotsDot1 {
    cy: 536;
    cx: 356;
}
circle#BotsDot2 {
    cy: 516;
    cx: 366;
}
circle#RwDot {
	cy: 353;
	cx: 400;
}
circle#SaDot29 {
    cx: 86;
    cy: 470;
}
circle#SaDot15 {
	cx: 110;
	cy: 496;
}
circle#SaDot16 {
    cx: 354;
    cy: 457;
}
circle#SaDot17 {
    cx: 385;
    cy: 140;
}
circle#SaDot18 {
    cx: 438;
    cy: 140;
}
circle#SaDot19 {
    cx: 430;
    cy: 150;
}

circle#SaDot26 {
    cx: 415;
    cy: 52;
}
circle#SaDot30 {
    cy: 153;
    cx: 424;
}
circle#SaDot31 {
    cx: 434;
    cy: 155;
}
circle#SaDot28 {
    cx: 413;
    cy: 166;
}
circle#SaDot20 {
    cx: 430;
    cy: 165;
}
circle#SaDot21 {
    cx: 424;
    cy: 161;
}
circle#SaDot22 {
    cx: 430;
    cy: 174;
}
circle#SaDot23 {
    cx: 422;
    cy: 169;
}
circle#SaDot24 {
    cx: 510;
    cy: 120;
}
circle#SaDot25 {
    cx: 520;
    cy: 160;
}

text#GpText{
	transform: translate(315px, 7px);
}
text#ECText{
	transform: translate(260px, 220px);
}
text#MPText{
	transform: translate(400px, -54px);
}
text#LPText{
	transform: translate(361px, -127px);
}
text#NWText{
	transform: translate(236px, -33px);
}
text#WCText{
	transform: translate(50px, 275px);
}

text#RwText tspan,
text#EthText tspan,
text#ZimText tspan,
text#DrcText tspan,
text#SaText tspan,
text#BotsText tspan,
text#GpText tspan,
text#ECText tspan,
text#MPText tspan,
text#LPText tspan,
text#NWText tspan,
text#WCText tspan{
	/* font-family:'Lato-Bold'; */
	font-size:12px;
	font-weight:800;
	line-height: 14px;
	letter-spacing:0.2px;
}
 


.DropdownContainer {
	margin-top: 30px;
	width: 80%;
	margin: 0 auto 30px;
	display: flex;
	justify-content: center;
}

.WorldDropdownWrapper {
	display: block;
}

.AfricaDropdownWrapper {
	display: none;
}

.WorldDropdownWrapper, .AfricaDropdownWrapper, .ProvinceDropdownWrapper {
	margin-bottom: 20px;
}


	
	.WorldDropdownWrapper .WorldDropdown,
	.AfricaDropdownWrapper .AfricaDropdown,
	.ProvinceDropdownWrapper .SouthAfricaDropdown {
	    height: 50px;
	    width: 100%;
	    line-height:24px;
	    max-width: 440px;
	    border: solid 1px #878787 !important;
		outline: none !important;
	    text-indent: 15px;
	    display: block;
		-webkit-appearance: none;
    	-moz-appearance: none;
    	appearance: none;
		background-color: #fff;
		color: #111111;
		background-image: url(/Media/AfricaMap/Map/Africa/dropdown.svg);
		background-position: right 20px center;
		background-repeat: no-repeat;
	}
	.WorldDropdownWrapper .WorldDropdown,
	.AfricaDropdownWrapper .AfricaDropdown{
		max-width: 475px;
	}
	
	.ProvinceDropdownWrapper .SouthAfricaDropdown{
		width: 60%;
		border: none !important;
		background-color: #d42e12 !important;
		background-image: url(/media/mfqfcgkf/dropdown-white.svg);
		color: #fff
	}

	.WorldDropdownWrapper .WorldDropdown option,
	.AfricaDropdownWrapper .AfricaDropdown option,
	.ProvinceDropdownWrapper .SouthAfricaDropdown option {
		background-color: #fff;
		color: #111111;
	}
		.WorldDropdownWrapper .WorldDropdown:hover,
		.AfricaDropdownWrapper .AfricaDropdown:hover,
		.WorldDropdownWrapper .WorldDropdown option:hover,
		.AfricaDropdownWrapper .AfricaDropdown option:hover,
		.ProvinceDropdownWrapper .SouthAfricaDropdown:hover,
		.ProvinceDropdownWrapper .SouthAfricaDropdown option:hover{
			cursor: pointer;
		}
	
		
		

@media (max-width: 1750px) {
	.SlideOut {
		bottom: -105%;
	}
	.SlideOut .SlideOutContent .Bottom .ContactsDetails .Items .Details{
		width: 89%;
	}
}

@media (max-width: 1450px){
	.SlideOut .SlideOutContent .Bottom .ContactsDetails .Items .Details {
    width: 75%;
}
}
@media ( max-width: 1400px ) {

	.WorldMapWrapper .WorldMap {
	    max-width: 1110px;
	}

	    .WorldMapWrapper .WorldMap svg {
    		transform: scale(0.9);
    		transform-origin: top left;
   		    height: auto;
			left: 60px;
    	}
    
    #AfricaMap {
    	max-width: 1110px;
    }
    
	    #AfricaMap svg {
	    	transform: scale(0.9);
	    	transform-origin: top left;
    	    height: 600px;
	    }
	.SaClose {
		right: 130px;
	}
	.DropdownContainer {
		width: 100%;
	}

}


@media ( max-width: 1200px ) {

	.WorldMapWrapper .WorldMap {
	    max-width: 930px;
        height: 500px;
	}

	    .WorldMapWrapper .WorldMap svg {
    		transform: scale(0.77);
    		transform-origin: top left;
   		    height: auto;
    	}
    	
    #AfricaMap {
    	max-width: 1110px;
    }
    
	    #AfricaMap svg {
	    	transform: scale(0.8);
	    	transform-origin: top left;
   		    height: 600px;
	    }

		.SaClose {
			right: 80px;
		}

}

@media (max-width: 1100px){
	.overlay, .africaoverlay {
		bottom: -78%;
	}
}

@media ( max-width: 1030px ) {
	
	.WorldMapWrapper {
		display: none;
	}
	
	.WorldDropdownWrapper {
		display: block;
	}
	
	.SlideOut {
		position: relative;
		display: none;
		width: 100% !important;
		bottom: 0px;
	    height: 100%;
	    padding: 10px 0;
	}
	
	.SlideOut .SlideOutContent {
		height: 100%
	}
	
	.SlideOut .SlideOutContent .Top,
	.SlideOut .SlideOutContent .Bottom {
		border: 0px none;
		padding: 0px;
		height: 100%;
		width: 95%;
	}
	
		.SlideOut .SlideOutContent .Bottom .contactcomponent {
			padding-bottom: 20px;
		}
	
	.SlideOut .ImageContainer {
		height: 100%;
	}
	
	.SlideOut .SlideOutImage {
	    margin: 10px auto;
		display: block;
		width: 100%;
	    height: 100%;
	}
	
	.WorldDropdownWrapper .WorldDropdown, .AfricaDropdownWrapper .AfricaDropdown {
		width: 100%;
		margin: 0 auto;
	}
	
		.SlideOut .close {
			display: none;
		}

		.ProvinceDropdownWrapper .SouthAfricaDropdown{
			margin: 20px auto;
		}

	.SouthAfricaSlideOut .col-12{
		height: 100%;
	}
	
}

@media (max-width: 991px){
	.Map .container {
		width: 100%;
	}
	.container.Map {
		padding-left: 0;
		padding-right: 0;
		width: 100%;
	}

	.DropdownContainer{
		width: 100%;
	}
	.SlideOut .SlideOutImage {
		width: auto;
	}
}

@media ( max-width: 768px ) {

	.WorldDropdownWrapper {
		display: block;
	}

	.SlideOut {
		position: relative;
		display: none;
		width: 100% !important;
		bottom: 0px;
		padding: 0 10px;
	    height: 100%;
	}
	
	.SlideOut .SlideOutContent .Top,
	.SlideOut .SlideOutContent .Bottom {
		border: 0px none;
		padding: 0px;
		height: 100% !important;
	}
	
		.SlideOut .SlideOutContent .Bottom .contactcomponent {
			padding-bottom: 20px;
		}
	
		.SlideOut .ImageContainer {
			height: 100%;
		}
		
		.SlideOut .SlideOutImage {
			margin-top: 10px;
			margin-bottom: 20px;
			height: auto;
			width: auto;
		}
	
	.WorldDropdownWrapper .WorldDropdown, .AfricaDropdownWrapper .AfricaDropdown {
		width: 100%;
	}
	
}

@media ( max-width: 575px ) {

	/* .SlideOut .SlideOutImage {
		margin-top: 0;
	} */
	.WorldDropdownWrapper .WorldDropdown, .AfricaDropdownWrapper .AfricaDropdown {
		max-width:100%;
	}
	.Items.Address {
		display: flex;
	}
	

}

@media ( max-width: 500px ) {
	.ContactsDetails .col-lg-6{
		padding: 0;
	}
	.ProvinceDropdownWrapper .SouthAfricaDropdown{
		width: 90%;
	}

}

@media ( max-width: 430px ) {
	.SlideOut .SlideOutImage {
		height: 100%;
		width: 100%;
	}

	.ContactsDetails .col-lg-6{
		padding: 0;
	}

}
