/* Website Content */

.container{
    width: 1024px;
    padding: 0 25px;
}

/* ContentSpan */

.map{
	width: 100%;
    height: auto;
	text-align:center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
}

.clickBtn{
	float: none;
    width: auto;
    height: auto;
	margin-top: 0;
	margin-bottom: 10px;
	margin-left: 0;
	margin-right: 0;
	padding: 0;	
	text-align: center;
	font-size: 12px;
	font-style: italic;
}

.easternCape, .freeState, .gauteng, .kzn, .limpopo, .mapumalanga, .northernCape, .northWest, .westernCape{
	float: left;
    width: 100%;
    height: auto;
    padding: 0;
}

legend {
	text-align: left;
    border: 1px solid #ccc;
    background:#ffffff;
    padding: 10px;
}

fieldset 
{
	border: 1px solid #ccc;
    background:#ffffff;
    margin: 0;
    padding: 20px;
}

.pageDivider img{
    width: 100%;
}

.goToTop{
	float: left;
    width: 100%;
    height: auto;
    padding: 0;
	text-align: right;	
}

.goToTop a{
	color: #919191;
    line-height: 25px;
	font-size: 12px;
}

.goToTop a:hover{
	 color: #ff6600;
     text-decoration: underline;
}

fieldset a:hover{
     text-decoration: underline;
}

/* svg styles */

svg{
	width: 550px; 
	height: 466px;
}

path{
	transition: .6s fill; 
	fill: #999;
}

path:hover { 
    fill: #2b33e8; 
}

/* end of svg styles */

/* Step one */
/* targeting all screen sizes wider than 1240px (HD Screen) */

@media (min-width: 1240px){

.container{
    width: 1170px;
}

	
}

/* Step three (tablet) */
/* targeting all screen sizes within 801px and 1070px */

@media (min-width: 801px) and (max-width: 1070px){
	
.container{
    width: 760px;
}


/* svg styles */

svg{
	width: 550px; 
	height: 466px;
}

/* end of svg styles */
	
}

/* Step four */
/* targeting all screen sizes smaller than 800px (Mobiles) */

@media (min-width: 321px) and (max-width: 800px){
	
.container{
    width: 80%;
    margin: 0 auto;
}

table{
	font-size: 12px;
}

.contentDealers{
	float: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;	
}

.saMap{
    float: none;
	width: auto;
	margin: 0;
    padding: 0;	
}

.easternCape, .freeState, .gauteng, .kzn, .limpopo, .mapumalanga, .northernCape, .northWest, .westernCape{
	float: none;
	width: auto;	
	padding: 0;
}

.goToTop{
	float: none;
    width: auto;
	margin-bottom: 0;				
}

fieldset 
{
    padding: 10px;
}

fieldset a{
    padding: 5px;
	font-size: 12px;
}


/* svg styles */

svg{
	width: 210px; 
	height: auto;
}

/* end of svg styles */
	
}


/* targeting all screen sizes smaller than 800px - End */
/* Step four - End */

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
	
.container{
    width: 80%;
    margin: 0 auto;
}

table{
	font-size: 12px;
}

.contentDealers{
	float: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;	
}

.saMap{
    float: none;
	width: auto;
	margin: 0;
    padding: 0;	
}

.easternCape, .freeState, .gauteng, .kzn, .limpopo, .mapumalanga, .northernCape, .northWest, .westernCape{
	float: none;
	width: auto;	
	padding: 0;
}

.goToTop{
	float: none;
    width: auto;
	margin-bottom: 0;				
}

fieldset 
{
    padding: 10px;
}

fieldset a{
    padding: 5px;
	font-size: 12px;
}


/* svg styles */

svg{
	width: 210px; 
	height: auto;
}

/* end of svg styles */

}