/*general CSS for visualisations sub-pages: 01-birth.html, 02-origins.html etc. in templates\visual\docs\sections\  */
/*these are for the main page layout sections*/
body {background-color:#fafafa;}
div.copyright {color: #55828b;
	font-size: 14px;
	text-align: center;
	margin-bottom:3em;
	}
.copyright > a {color: #55828b;}
	
div.info-block {background-color:#fff;}
div.section-body-1 {
	margin-bottom:2em;
}
div.section-body-2 {
	margin-top:2em;
	margin-bottom:2em;
	}
/*these are for the introductory text paragraph*/
div.intro-para {
	font-family:'Roboto-Light', sans-serif;
	font-weight:300;
	line-height:200%;
	font-size:1em;
	color:#2a2a2a; 
	}
/*this is the grey block that holds the instructions for each chart*/

div.chart-instructions {
	font-family:'Roboto', sans-serif;
	font-size:16px;
	background-color:#fff;
	color:#444;
	line-height:1.8;
	text-align:center;
    padding:20px;
    box-shadow: 0 4px 12px  rgba(64,60,67,.16)/*0 1px 3px rgba(0,0,0,0.12), 0 1px 5px rgba(0,0,0,0.24)*/;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
     }

/*These are the Find More info blocks that link to dsae.co.za*/
div.info-block {
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	font-family:'Roboto-Regular', sans-serif;
	font-size:1em;
	padding:1.5em;
	margin-bottom:2em;
	line-height:1.8;
	color:#5c5c5c;
}
a.div-link > h3 {
	color:#55828b;
	line-height:1.3;
	text-align:center;
	}


.fa-external-link {
	margin-left:5px; 
	font-size:20px;
	line-height:0;
}

a.div-link {
	text-decoration:none; 
	color:#444;
	position:relative; 
	top:0; 
	left:0; 
	z-index:1; 
}
.find-more {
	font-family:'Roboto Condensed', sans-serif;
	font-size:19px;
	text-align:center;
	font-weight:bold;
	}
#desktop-chart-instructions {display:inline-block; margin-top:0;}
#mobile-chart-instructions {display:none;margin-top:0;}
@media only screen
and (min-device-height: 600px)
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
#mobile-chart-instructions {display:inline-block;}
#desktop-chart-instructions {display:none;}
}

@media only screen and (min-width:350px) and (max-width:1200px){
#mobile-chart-instructions {display:inline-block;}
#desktop-chart-instructions {display:none;}
div.section-body-2 {grid-template-columns:100%;}
.intro-para{margin-bottom:2em;}
}
@media only screen
and (min-device-height: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
#mobile-chart-instructions {display:inline-block;}
#desktop-chart-instructions {display:none;}

}