/* 'Rivers in the World' designed and developed by David Bihanic and Thibault Jaillon -- ©2014 -- built with D3.js */

#container {
    margin-bottom:50px;   
}

/* Classes */

.rivers_box {
	display:inline-block;
	width:500px;
	height: auto;
	margin-top:20px;
	margin-right:35px;
}

.river_label {
	font-family: "niveaugrotesklight";
	color:white;
	text-align: left;
	font-size:1rem;
	margin-top:14px;
	width: 100%;
}

/* Structure */

#sch_legend_1 {
	height: 150px;
	width: 150px;
}

#sch_1_1 {
	position: absolute;
	height: 148px;
	width: 70px;
	border:1px solid white;
}

#sch_1_2 {
	position: absolute;
	height: 15px;
	margin-top: 133px;
	margin-left: 77px;
	width: 70px;
	border:1px solid white;
}

#sch_legend_2 {
	height: 150px;
	width: 150px;
}

#sch_2_1 {
	position: absolute;
	height: 70px;
	width: 148px;
	border:1px solid white;
}

#sch_2_2 {
	position: absolute;
	margin-top:77px;
	height: 70px;
	width: 15px;
	border:1px solid white;
}

#legend_waves {
	height: 45px;
	width: 191px;
}

#legend_wave_1 {
	position: absolute;
	width:45px;
	height: 60px;
	margin-left: 30px;
	margin-top: -8px;
	background-color: white;
	opacity: 0.5;
	transform: skewY(-45deg) skewX(45deg);
	-webkit-transform: skewY(-45deg) skewX(45deg);
	-moz-transform: skewY(-45deg) skewX(45deg);
}

#legend_wave_2 {
	position: absolute;
	width:45px;
	height: 44px;
	margin-left: 88px;
	background-color: white;
	opacity: 0.4;
	transform: skewY(-45deg) skewX(45deg);
	-webkit-transform: skewY(-45deg) skewX(45deg);
	-moz-transform: skewY(-45deg) skewX(45deg);
}

#legend_wave_3 {
	position: absolute;
	width:45px;
	height: 7px;
	margin-top: 19px;
	margin-left: 131px;
	background-color: white;
	opacity: 0.3;
	transform: skewY(-45deg) skewX(45deg);
	-webkit-transform: skewY(-45deg) skewX(45deg);
	-moz-transform: skewY(-45deg) skewX(45deg);
}

#legend_wave_4 {
	position: absolute;
	width:45px;
	height: 2px;
	margin-top: 19px;
	margin-left: 170px;
	background-color: white;
	opacity: 0.2;
	transform: skewY(-45deg) skewX(45deg);
	-webkit-transform: skewY(-45deg) skewX(45deg);
	-moz-transform: skewY(-45deg) skewX(45deg);
}

/* Rivers */

#river {
        overflow: hidden;
        position: relative;
	margin-top:40px;
	
}


/* Effects */

.svg{
        position: absolute;
        top: 0px;
        left: 0px;
}

.waves {
        width: 100%;    
        position: absolute;
        top: 0px;
        left: 0px;        
}

.wave{
        position: absolute;        	        

        top: 0px;
        left: 0px;
        width: 100%;

        opacity: 0.1;

        transform: skewY(0deg) skewX(-45deg);
        -webkit-transform: skewY(0deg) skewX(-45deg);
        -moz-transform: skewY(0deg) skewX(-45deg);        
}


/* #### BREAKPOINTS #### */


/*
##########################################################################
##########################################################################
For 1950px or less
##########################################################################
##########################################################################
*/

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

/* Structure */


}

/*
##########################################################################
##########################################################################
For 1830px or less
##########################################################################
##########################################################################
*/

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


}

/*
##########################################################################
##########################################################################
For 1600px or less
##########################################################################
##########################################################################
*/

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


}

/*
##########################################################################
##########################################################################
For 1340px or less
##########################################################################
##########################################################################
*/

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


}

/*
##########################################################################
##########################################################################
For 1170px or less
##########################################################################
##########################################################################
*/

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

}

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

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


}

/*
##########################################################################
##########################################################################
For 850px or less
##########################################################################
##########################################################################
*/

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

    #container {
        width:auto;
    }
    
    .columns {
        -webkit-columns: 2;
        -moz-columns: 2;
        columns: 2;
    }


}

/*
##########################################################################
##########################################################################
For 768px or less
##########################################################################
##########################################################################
*/

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

/* Structure */


}

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

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

.rivers_box {
	width:500px;
	margin-top:15px;
}

/* Structure */

#vis_div_title {
	margin-bottom: 80px; 
}

#river {
	height: 209px;
}

/* Effects */

#wave {
	margin-top:36px;
	width:203px;
	height: 133px;
}

}

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

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

.rivers_box {
	display:block;
	width:300px;
}

/* Structure */

#vis_div_super_global {
	position : relative;
	height:100%;
	width: 100%;
}

#vis_div_legend {
	width: 300px;
}

#river {
	height: 150px;
}

#icon {
	display: none;
}

/* Effects */

#wave {
	margin-top:10px;
	width:152px;
	height: 133px;
}

}



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

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

.columns {
        -webkit-columns: 1;
        -moz-columns: 1;
        columns: 1;
    }


}

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

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

.columns {
        -webkit-columns: 1;
        -moz-columns: 1;
        columns: 1;
    }


}