/* Body */

body {
	font-family: Museo_SLab_300;
	font-size: 20px;
	color: #999999;
	background: url(../Resources/bg.jpg) repeat;
	/* background-color: #000000; */
	background-position: top-left;
	width: 100%;
	margin: 0%;
	text-align: left;
}

h1 {
	text-align: center;
	text-transform: uppercase;
	font-family: Century Gothic;
	font-weight: bold;
	font-size: 3.7vw;
	color: #C02942;
}	

h2 {
	font-family: Museo_SLab_500;
	font-size: 50px;
	color: #999999;  /*grey */
}
	
h4 {
	font-family: Museo_SLab_500;
	font-size: 1.2vw;
	color: #999999;
	margin-left: 40vw;
	}
	
	
 ul {
 	list-style-type: disc;
	margin-left: 40vw;
	text-align: bottom;
 }
 
 button{
	cursor : pointer;
 }

/* Font declaration */

@font-face {
	font-family: 'Museo_SLab_300';
    src: url('../Resources/Museo_Slab_300.otf');
	}
	
    font-family: 'Museo_SLab_500';
    src: url('../Resources/Museo_Slab_500.otf');
	}

	@font-face {
    font-family: 'Museo_SLab_700';
    src: url('Resources/Museo_Slab_700.otf');
	}

	@font-face {
    font-family: 'Century Gothic, 'Century Gothic'';
    src: url('Resources/CenturyGothic.otf');
}

/*** HEADER ***/
	
#img-telecom{
	display: block;
	width: 20vh;
	margin: 0 auto;
	margin-bottom: 30px;
	margin-top: 20px;
	}
	
/***** Content *****/

#content{
	text-align: center;
}
	
div.bar {
    display: inline-block;
    width: 20px;
    height: 75px;   /* We'll override this later */
    background-color: teal;
}	
	
	
/* Bouton */

.bouton {
	background-color: #ECD078; 
	border: 0px; 
	Font-family: 'Century Gothic'; 
	Font-weight: bold;
	Font-size: 2vw; 
	Color: #FFFFFF; 
	Padding: 10px;   
	Border-radius: 10px;
}

#button2D {
	margin-left:5vw;
	width: 30vw;
	margin-right: 30vw;
}
	
#button3D {
	width: 30vw;
}
	
#buttonReturn {
	position: absolute;
	width: 13vw;
	height: 4vw;
	margin-left: 2vw;
}

.column_button{
	float:left;
	width: 25%;
	text-align:center;
}

.column_button li{
	text-align: left;
	float:left;
	width: 25%;
	text-align:center;
}



.bouton:hover {
	background-color: #C02942; 
	border: 0px; 
	Font-family: 'Century Gothic'; 
	Font-weight: bold;
	Font-size: 2vw; 
	Color: #FFFFFF; 
	Padding: 10px;   
	Border-radius: 10px;
}

li {
	font-size: 18px;
	color: #999999;
}

/* Invisibilité */

a {
	color: #ECD078;
	text-decoration: none;
}

a:hover {
	color: #D95B43;
	cursor: crosshead;	
}

/* Bar Chart */

.bar1 {
    display: inline-block;
    width: 20px;
    height: 75px;  
    background-color: #ECD078;
    margin-right: 2px;
}

.bar2 {
  	display: inline-block;
    width: 20px;
    height: 75px;  
    background-color: #D95B43;
    margin-right: 2px;	
}

.bar3 {
  	display: inline-block;
    width: 20px;
    height: 75px;  
    background-color: #C02942;
    margin-right: 2px;	
}

.bar4 {
  	display: inline-block;
    width: 20px;
    height: 75px;  
    background-color: #542437;
    margin-right: 2px;	
}

.bar5 {
  	display: inline-block;
    width: 20px;
    height: 75px;  
    background-color: #53777A;
    margin-right: 2px;	
}

/* Axis */

.axis path {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: 'Century Gothic';
    font-size: 10px;
}

/* Pie Chart */

.slice {
	font-size: 13px;
	color: #FFFFFF;	
}

.slice path {
	stroke: rgba(255,255,255,0.5);
	stroke-width: 10px;	
}

/* Scatterplot */

.d3-tip {
 line-height: 1;
 font-weight: bold;
 padding: 12px;
 background: #3b3b3b;
 color: #fff;
 border-radius: 2px;
}

.axis path,
.axis line {
		fill: none;
		stroke: #999999;
	shape-rendering: crispEdges;
 }

.axis text {
		font-family: sans-serif;
		font-size: 11px;
	fill: #999999;
 }

/* end */