/* 'The Nile Waters' designed and developed by David Bihanic and Thibault Jaillon -- ©2014 -- built with D3.js */


#container_history {
	position:absolute;
	width:100%;
	height:100%;
	overflow: hidden;	
}

#vis_bg {
	position:absolute;
	width:100%;
	height:100%;
	background-size:cover;
	background-position: center center;
  	background-repeat: no-repeat;
	background-image:url('../img/nile_history/nile.jpg');
}

#vis_div_super_global_history {
	position:absolute;
	width:100%;
	height:100%;	
}

#bg_left {
	position:absolute;
	height:100%;
	width:20%;
	opacity:0.6;	
	background-color: transparent;
	background-repeat: repeat-y;
	background-size:100%;		
	background-image:url('../img/nile_history/fondu.png');
}

#bg_right {
	position:absolute;
	height:100%;
	width:20%;
	right:0px;
	opacity:0.7;	
	background-color: transparent;
	background-repeat: repeat-y;
	background-size:100%;		
	background-image:url('../img/nile_history/fondu.png');
	-webkit-transform:scaleX(-1);
    -moz-transform:scaleX(-1);
    -ms-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
}

.circle {    
	position: absolute;
	height: 150px;
	width: 150px;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius:50%;    
	/*border:1px solid white;*/
}

#date_content {
	position:absolute;
	width:100%;
	height:100%;	
	color: #f05b58;	
	display: none;
}

#circle_content {
	width:100%;
	height:100%;
	background-color: white;
}

#date_title {
	top:17%;
	position:absolute;
	margin-left:20%;
	margin-right:20%;
	width:60%;
	line-height:5vmin;	
	text-align:center;
	font-family: "niveaugroteskbold";
	font-size:5vmin;
}

#date_text {	
	position:absolute;
	margin-left:10%;
	margin-right:10%;
	width:80%;
	text-align:center;
	top:38%;
	font-family: "niveaugrotesklight";
	font-size:2.5vmin;
}

#map {
	right:10px;
	position: absolute;
	height:75%;	
	max-width:212px;
	max-height:800px;
	min-height:360px;	
	margin-top:70px;	
}

#map img{
	position:absolute;
	width:100%;
	height:100%;
}

#map_dot {
	position:absolute;
	height:11px;
	width:11px;
	background-color: white;
	-webkit-animation: pulsate 2s ease-out;	    
    -moz-animation: pulsate 2s ease-out;
    animation: pulsate 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
  	animation-iteration-count: infinite;
    opacity: 0.0
}
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(3, 3); opacity: 0.0;}
}

@-moz-keyframes pulsate {
	0% {-moz-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-moz-transform: scale(3, 3); opacity: 0.0;}
}


/* Structure */

#tool {
	position: absolute;	
	line-height: 2rem;
	text-align: left;
	min-height:420px;
	height: 100%;
	width: 76px;
	margin-top:100px;
}

#past {
	position:absolute;
	margin-left: 32px;
	margin-top: -30px;
	font-size: 1.2rem;
	color: white;
	font-family: "niveaugrotesklight";		
}

#present {		
	position:absolute;
	top:71%;
	margin-left: 32px;	
	font-size: 1.2rem;
	color: white;
	font-family: "niveaugrotesklight";		
}

#cursor_container {
	position:absolute;
	margin-left:20px;
	margin-top:5%;	
	width:60px;	
	height: 70%;	
}

#cursor_zone {
	width:100%;
	height:100%;
	background:transparent;
}

#cursor {
	position: absolute;
	margin-left:25px;	
	height:11px;
	width:11px;
	margin-top:-5.5px;
	border-radius: 50%;
	top:31.372%;
	background-color: white;
}

#date {	
	position:absolute;	
	margin-top:-10px;
	margin-left:20px;
	font-size: 1.0rem;
	color: white;
	font-family: "niveaugrotesklight";	
	height: 50px;
	width: 100px;
}

#timeline {	
	position:absolute;
	margin-top:5%;
	margin-left:50px;	
	line-height: 3.1rem;
	font-size: 1.2rem;
	color: white;
	font-family: "niveaugrotesklight";
	width: 1px;
	height: 70%;
	background-color: white;
}

#tiks {	
	position:absolute;	
	margin-top:5%;
	height:100%;
}

.tik {
	position: absolute;
	margin-left:-3px;
	width: 7px;
	height: 1px;
	background-color: white;
}






/*
##########################################################################
##########################################################################
For 1200px or less
##########################################################################
##########################################################################
*/

@media screen and (max-width: 1950px) {

/* Structure */



}

/*
##########################################################################
##########################################################################
For 1685px or less
##########################################################################
##########################################################################
*/

@media screen and (max-width: 1685px) {

/* Structure */



}

/*
##########################################################################
##########################################################################
For 1280px or less 
##########################################################################
##########################################################################
*/

@media screen and (max-width: 1280px) {

/* Structure */


}


/*
##########################################################################
##########################################################################
For 1024px or less
##########################################################################
##########################################################################
*/

@media screen and (max-width: 1024px) {

/* Structure */



}


/*
##########################################################################
##########################################################################
For 700px or less
##########################################################################
##########################################################################
*/

@media screen and (max-width: 800px) {

/* Structure */



}

/*
##########################################################################
##########################################################################
For 700px or less
##########################################################################
##########################################################################
*/

@media screen and (max-width: 700px) {

/* Structure */


}


/*
##########################################################################
##########################################################################
For 480px or less
##########################################################################
##########################################################################
*/

@media screen and (max-height: 520px) {

#map {
	margin-top:5px;	
}

#tool {
	margin-top:35px;
}

}

@media screen and (max-width: 600px) {

#map{
	display:none;
}

#date_content{
	margin-left:10%;
}

/* Structure */


}