@import url(normalize.css);
@import url(clearfix.css);
@import url(http://fonts.googleapis.com/css?family=Lato:100,400,700);

/* GENERAL */

	a, a:visited, a:focus{
		color: white;
		text-decoration: none;
		outline: none;
	}

	a:focus{
		outline: 1px solid #009900;
	}

	ul{
		list-style: none;
	}

	body{
		background: #272728;
		color: white;
	}

	p{
		font-family: 'Lato', sans-serif;
		font-size: 14pt;
		font-weight: 100;
	}

	.text{
		line-height: 160%;
		margin-top: 2em;
		font-size: 14pt;
	}

	.title{
		font-family: 'Lato', sans-serif;
	}

/* NAV */

	nav{
		background: #131316;
		font-family: 'Lato', sans-serif;
	}

	.nav_whose{
		width: 30%;	
		position: relative;
		top: 60px;
		left: 5%;
	}

	.nav_title{
		margin-top: -30px;
		width: 300px;
	}

	.logo_nav{
		float: left;
		margin-right: 1%;
		margin-top: 15px;
		max-width: 70px;
	}

	.main_nav{
		width: 60%;
		position: relative;
		left: 27%;
	}

	.main_nav_element{
		float: left;
		width: 16%;
		text-align: center;
	}

	.nav_link{
		display: block;
		padding-top: 10%;
		padding-bottom: 10%;
		transition: all 150ms ease-out;
	}

	.nav_link:hover{
		background-color: #009900;
		transition: all 150ms ease-out;
	}

main{
	width: 960px;
	margin: 0 auto;
}

/* INTRO */

	.intro{
		font-size: 20pt;
		line-height: 160%;
		text-align: center;

		width: 800px;
		height: 40vh;
		margin: 0 auto;
		margin-top: 6em;
		background: url("../_images/whoseLogoOpacity.svg") no-repeat center;
	}

	.intro_text{
		font-family: 'Lato', sans-serif;

		font-size: 30pt;
		font-weight: 100;
	}

/* GOUVERNEMENTS */	

	.gouvernements{
		margin-top: 10em;
	}

	.graph_gouv{
		width: 900px;
		height: 600px;
		overflow: hidden;
		position: relative;
	}

	.graphe1{
		width: 900px;
		height: 600px;
		transition: all 200ms ease-out;
	}

	.graphe2{
		width: 900px;
		height: 600px;
		position: absolute;
		top: 0;
		left: 0;
		transition: all 200ms ease-out;
	}

	.graphe3{
		width: 900px;
		height: 600px;
		position: absolute;
		top: 0;
		left: 0;
		transition: all 200ms ease-out;
	}

	.visiblenow{
		display: block;
	}

	.invisiblenow{
		display: none;
	}

	.legendes_gouv{
		position: relative;
		left: 7.3%;
		margin: 0;
		margin-bottom: 80px;
	}

	.legende_gouv{
		width: 100px;
		height: 25px;
		background: #db4437;
		margin: 1%;
		margin-right: 100px;
		padding: 2px;
		float: left;
		text-align: center;
		padding: 0px;
		font-weight: 400;
		outline: none;
		border: none;
	}

	.legende_gouv_facebook{
		background-color: #3C5B99;
	}

	.legende_gouv_twitter{
		background-color: #89c9fa;
	}

	.activenow{
		border: 2px solid #D1D1D1;
	}

	.inactivenow{
		border: none;
	}

	.gouvernements_text{
		width: 800px;
		margin: 0 auto;
		display: block;
	}

	.legendes_gouvernements{
		margin-top: 2em;
	}

	/* MICROSOFT/APPLE*/

		.micapp{
			margin-top: 5em;
		}

		.micapp_text{
			font-weight: 400;
		}
		
		/* GRAPHIQUE */

					.graphique_gouvernements{
						width: 960px;
						height: 97vh;
						overflow: hidden;
					}

					.ct-chart-un{
						position: relative;
						top: 400px;
						right:300px; 
					}

					.ct-chart-deux{
						position: relative;
						left: 300px;
						bottom: 50px;
					}

					.ct-chart-un .ct-label{
						fill: white;
						font-size: 1.3em;
					}

					.ct-chart-deux .ct-label{
						fill: white;
						font-size: 1.3em;
					}

					.ct-chart-deux .ct-series.ct-series-b .ct-slice:not(.ct-donut){
						fill: #009900;
						opacity: .6;
					}
					.ct-chart-deux .ct-series.ct-series-a .ct-slice:not(.ct-donut){
						fill: #d1d1d1;
					}

					.ct-chart-un .ct-series.ct-series-a .ct-slice:not(.ct-donut){
						fill: #d1d1d1;
					}

					.ct-chart-un .ct-series.ct-series-b .ct-slice:not(.ct-donut){
						fill: #009900;
						opacity: .6;
					}

/* GRAPHE GOOGLE */

	#chartContainer2{
      margin: 0 auto;
      width: 960px;
    }
    .dimple-gridline{
      stroke: white;
      opacity: .1;
    }
    .tick{
      fill: #f4f4f3;

    }
    .graphe1 circle{
      opacity: .4;
      fill: #DB4437;
      stroke: #DB4437;
    }

    circle:hover{
      opacity: .7;
      fill: white;
      stroke: white;
    }
    .dimple-series-0.dimple-bubble.dimple-e.dimple-custom-series-bubble.dimple-custom-format-1{
      opacity: 0;
    }
    text.dimple-axis.dimple-title.dimple-custom-axis-titledimple-axis-y{
      fill: #f4f4f3;
      font-size: 18px;
      transform-origin:-6px 6px 0px;
      text-transform: capitalize;
    }

    text.dimple-axis.dimple-title.dimple-custom-axis-titledimple-axis-x{
      fill: #f4f4f3;
      font-size: 18px;
      transform-origin:-6px 6px 0px;
      text-transform: capitalize;
    }
    svg:not(:root), symbol, image, marker, pattern, foreignObject {
      overflow: inherit;
    }

/* GRAPHE FACEBOOK */

	#chartContainer{
      margin: 0 auto;
      width: 960px;
    }
    #chartContainer2{
      position: absolute;
    }
    .dimple-gridline{
      stroke: white;
      opacity: .1;
    }
    .tick{
      fill: #f4f4f3;

    }

    .graphe2 circle{
      opacity: .4;
      fill:#3C5B99;
      stroke:#3C5B99;
    }
     .dimple-series-0.dimple-bubble.dimple-e.dimple-custom-series-bubble.dimple-custom-format-2{
      opacity: 0;
    }
    circle:hover{
      opacity: .7;
      fill: white;
      stroke:white;
    }
    text.dimple-axis.dimple-title.dimple-custom-axis-titledimple-axis-y{
      fill: #f4f4f3;
      font-size: 18px;
      transform-origin:-20px 30px 0px;
      text-transform: capitalize;
    }

    text.dimple-axis.dimple-title.dimple-custom-axis-titledimple-axis-x{
      fill: #f4f4f3;
      font-size: 18px;
      transform-origin:-20px 30px 0px;
      text-transform: capitalize;
    }
    svg:not(:root), symbol, image, marker, pattern, foreignObject {
      overflow: inherit;
    }
    text.dimple-tooltip {
     fill: #272728 ;
     font-size: 12px !important;
    }

    rect.dimple-tooltip {
    fill: #D1D1D1 !important;
    stroke:#D1D1D1 !important;
    height: 40px ;
    stroke-width:8px !important;
	}

	.dimple-series-1.dimple-bubble.dimple-e.dimple-custom-series-bubble.dimple-custom-format-1{
		visibility: hidden;
	}

/* GRAPHE TWITTER */

	#chartContainer3{
      margin: 0 auto;
      width: 960px;
    }
    .dimple-gridline{
      stroke: white;
      opacity: .1;
    }
    .tick{
      fill: #f4f4f3;

    }
    .graphe3 circle{
      opacity: .4;
      fill: #89C9FA;
      stroke: #89C9FA;
    }
    circle:hover{
      opacity: .7;
      fill: white;
      stroke: white;
    }
    text.dimple-axis.dimple-title.dimple-custom-axis-titledimple-axis-y{
      fill: #f4f4f3;
      font-size: 18px;
      transform-origin:-20px 6px 0px !important; 
      text-transform: capitalize;
    }

    text.dimple-axis.dimple-title.dimple-custom-axis-titledimple-axis-x{
      fill: #f4f4f3;
      font-size: 18px;
      transform-origin:-6px 6px 0px;
      text-transform: capitalize;
    }
 svg:not(:root), symbol, image, marker, pattern, foreignObject {
      overflow: inherit;
    }

/* PUBS */

	.pubs{
		margin-top: 6em;
	}

	/* Lines Color */

		/* GOOGLE */	

			.ct-chart .ct-series.ct-series-c .ct-line{
				stroke : #db4437;
				stroke-width: 3px;
			}

			.ct-chart .ct-series.ct-series-c .ct-point{
				stroke : #db4437;
			}

		/* FACEBOOK */
			.ct-chart .ct-series.ct-series-a .ct-line{
				stroke : #3C5B99;
				stroke-width: 3px;
			}

			.ct-chart .ct-series.ct-series-a .ct-point{
				stroke : #3C5B99;
			}

		/* TWITTER */

			.ct-chart .ct-series.ct-series-b .ct-line{
				stroke : #89c9fa;
				stroke-width: 3px;
			}

			.ct-chart .ct-series.ct-series-b .ct-point{
				stroke : #89c9fa;
			}	

	/* LEGENDE */

		.legendes{
			position: relative;
			left: 7.3%;
			margin: 0;
			margin-bottom: 80px;
		}

		.legende{
			width: 100px;
			height: 20px;
			background: #db4437;
			margin: 1%;
			margin-right: 100px;
			float: left;
			text-align: center;
			padding: 2px;
			font-weight: 400;
		}

		.legende_facebook{
			background-color: #3C5B99;
		}

		.legende_twitter{
			background-color: #89c9fa;
		}

	.pubs_text{
		clear: both;
	}


/* ENTREPRISES */

	.entreprises{
		margin-top: 6em;
	}

	.entreprise_img{
		display: block;
    	margin-left: auto;
    	margin-right: auto
	}

/* NSA & Piratage */

	.confidentiel{
		margin-top: 6em;
	}

	.graphiqueinterrogation{
		width: 100%;
		height: 500px;
		background-color: #009900;
	}

/* CONCLUSION */
	
	.conclusion{
		margin-top: 6em;
		margin-bottom: 6em;
	}

	.conclusion_liens{
		border-bottom: 1px solid #009900;
		transition: all 150ms ease-out;
	}

	.conclusion_liens:hover{
		background-color: #009900;
		transition: all 200ms ease-out;
	}

.gouvernements_text, .entreprises_text, .pubs_text, .confidentiel_text, .conclusion_text, .micapp_text{
	width: 800px;
	margin: 0 auto;
	margin-top: 2em;
	font-weight: 100;
}

/* FOOTER */

	footer{
		background: #131316;
		font-family: 'Lato', sans-serif;
		margin-bottom: 0;
		padding-bottom: 5em;
	}

	.footer_nav{
		margin-left: 3%;
	}

	.footer_nav_element{
		float: left;
		width: 6%;
		margin-right: 3%;
		margin-top: 2%;
		position: relative;
	}

	.footer_liens{
		border-bottom: 1px solid #009900;
		display: block;
		padding-left: 3px;
		transition: all 200ms ease-out;
	}

	.footer_nav_element_case{
		width: 8%;
	}

	.footer_liens:hover{
		background-color: #009900;
		transition: all 200ms ease-out;
	}