/*
Theme Name: conteneur-collector
Author: Gregoire Llorca
Description: Theme pour le projet Conteneur Collector
Version: 1.0.0
Tags: conteneur-collector
*/

/* COLORS
vert background : #46aa46
blanc background : #fff

*/

body{
	font-family: "Open Sans", Arial, sans-serif;
	background:#46aa46;
	font-size: 16px;
    line-height: 1.5em;
    color: #fff;
    font-weight: 400;
	margin:0;
}
#header{
	width:100%;
}
#header_tagline{
    max-width: 900px;
    background: #fff;
    width: 97%;
    margin: 0 auto;
	position:relative;
}
#header_tagline:before {
  content: '';
  position: absolute;
  top: 40px;
  left: 0;
  height: 100%;
  width: 50%;
  background: #fff;
  -webkit-transform: skew(0deg, 10deg);
  -moz-transform: skew(0deg, 10deg);
  -ms-transform: skew(0deg, 10deg);
  -o-transform: skew(0deg, 10deg);
  z-index:-10;
  transform: skew(0deg, 10deg);
}
#header_tagline:after {
  content: '';
  position: absolute;
  top: 40px;
  right: 0;
  height: 100%;
  width: 50%;
  background: #fff;
  -webkit-transform: skew(0deg, -10deg);
  -moz-transform: skew(0deg, -10deg);
  -ms-transform: skew(0deg, -10deg);
  -o-transform: skew(0deg, -10deg);
  transform: skew(0deg, -10deg);
  z-index:-10;
}
#header a img{
	max-width:500px;
	width:100%;
	height:auto;
    margin: 3em auto;
}

#header a{
	color:#fff;
	text-decoration:none;
}

#content {
	max-width: 900px;
	margin:120px auto 0;
}

h1{
	display:none;
}

h2{
	display:table;
	margin:2em auto;
}

.row{
	clear:both;
	max-width: 900px;
}
.row #first img{
	margin:1em;
	width:90%;
	max-width:350px;
	height:auto;
}
.row #tagline{
	margin:0;
	width: 100%;
    height: auto;
}
.row #note{
	font-size:0.9em;
	color: #a5d9a5;
	margin: 0.5em auto;
}

.legal{
	background:#fff;
	padding:3%;
	color:#1d1d1d;
	display:table;
	margin:0 auto;
	width:90%;
}

.gl_form{
	background:#fff;
	padding:3% 3% 50px;
	color:#1d1d1d;
	display:table;
	margin:0 auto;
	width:90%;
}
#confirmation img{
	max-width:80%;
	height:auto;
}
.gl_form  .label_form{
	display:table;
	margin:2em auto 0;
	font-size:1.8em;
	text-transform:uppercase;
}
.gl_form  .label_form > label{
	margin-bottom:0;
}
.gl_form  .label_form > p{
	font-size:0.4em;
	text-transform:none;
	display:table;
	margin:0 auto;
	color:#aaaaaa;
}
.gl_form .titre_quartier{
	font-size: 1.2em;
	padding-left: 50px;
}
.gl_form input{
	display:initial;
	margin:0 5px 2em;	
	padding:0.5em 0.5em;
	border-radius: 30px;
	text-align: center;
	border: 3px solid #46aa46;
}
.gl_form input[type="email"]{
	width:90%;
	height:2em;
    margin: 2em auto;
    display: table;
	max-width:700px; /* EN FONCTION DU PLUG-IN */
	font-size: 1.25em;
}
.gl_form span, .wpcf7 p span{
	color:red;
	margin-left:1px;
}
.gl_form a{
	text-decoration:none;
	color:#46aa46;
}
.gl_form ul{
	margin:0 auto;
	display:table;
    padding: 0;
}
.gl_form li{
	list-style-type:none;
	text-align:center;
	position:relative;
}
.gl_form ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}
.gl_form ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.35em;
  padding: 25px 25px 25px 80px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}
.gl_form ul li:hover label{
	color: #879a77;
}
.gl_form ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
	z-index: 5;
	transition: border .25s linear;
	-webkit-transition: border .25s linear;
}
.gl_form ul li:hover .check {
  border: 5px solid #879a77;
}
.gl_form ul li .check::before {
  display: block;
  position: absolute;
	content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
	left: 5px;
  margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}
.gl_form input[type=radio]:checked ~ .check {
  border: 5px solid #46aa46;
}
.gl_form input[type=radio]:checked ~ .check::before{
  background: #46aa46;
}
.gl_form input[type=radio]:checked ~ label{
  color: #46aa46;
}
.gl_form .checkbox{
	margin-left:5%;
}
.gl_form .checkbox a{
	text-decoration:underline;
	color:#879a77;
}
.gl_form .checkbox label, #verif{
    font-weight: 300;
    font-size: 1.35em;
}
.gl_form .checkbox span{
    font-size: 0.55em;
    color: #aaaaaa;
    font-weight: 500;
    margin-left: 5px;
}

.gl_form .error{
	padding: 5px 9px;
	border: 1px solid red;
	color: red;
	border-radius: 3px;
}
.gl_form .success{
	padding: 5px 9px;
	border: 1px solid green;
	color: green;
	border-radius: 3px;
}
.gl_form .cta {
	margin:1em auto;
	display:table;
	width: 90%;
	font-family: inherit;
	font-weight: bold;
	font-size:1.25em;
	padding:0.5em 0;
	border-radius: 30px;
	cursor: pointer;
	transition: background .3s ease-in-out;
	border: none;
}
.gl_form .moderation > div{
	width:49%;
	display:inline-block;
}
.gl_form .yellow {
	background: #FFBf00;
	color: #332500;
}
.gl_form .yellow:hover {
  background: #ffa000;
  color:#fff;
}
.gl_form .red {
	background: #b3323c;
	color: #fff;
}
.gl_form .red:hover {
  background: #8b2730;
}
.gl_form .green {
	background: #879a77;
	color: #fff;
}
.gl_form .green:hover {
  background: #5c775b;
}

.gl_form ul.closify-shadow-side-bar li a span{
	background-color:rgba(70, 170, 70, 0.7)!important;
}
.gl_form ul.closify-shadow-side-bar li a span:hover{
	background-color:rgba(70, 170, 70, 0.9)!important;
}
.gl_form .upload .inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.gl_form .upload .inputfile + label {
    color: white;
    background-color: #46aa46;
	margin:1em auto;
	display:table;
	width: 90%;
	font-family: inherit;
	font-weight: bold;
	font-size:1.25em;
	padding:0.5em 0;
	border-radius: 30px;
	cursor: pointer;
	transition: background .3s ease-in-out;
	border: none;
	text-align:center;
}
.gl_form .upload .inputfile:focus + label,
.gl_form .upload .inputfile + label:hover {
    background-color: #3b913b;
}
.gl_form .upload .inputfile + label::before{
    font: normal normal normal 1.5em FontAwesome;
    content: "\f093";
    margin-right: 15px;	
}
#loading{
	font-weight:bold;
	color:#332500;
}

#moderation > img{
	display:table;
	margin:1em auto;
	max-width: 500px;
	height:auto;
}

.centered{
	margin:1em auto;
	display:table;
}

.upload > div{
	margin: 1em auto;
}

#footer {
	clear: both;
}

#footer h2{
	margin: 2em auto 0;
    font-size: 1.25em;
    font-weight: 500;
}

.presentation{
	display:table;
	margin:0 auto;
	max-width:900px;
	width:97%;
}
.presentation a{
	display:table;
	margin:0 auto;
}
.presentation a img{
	max-width:300px;
	width: 100%;
	height:auto;
	margin:0 auto;
}

/* FLOATING BAR */
.sumome_share a{
	display:table-cell;
    padding: 0 0.5em;
}
.sumome_share a img{
	display:table-cell;
    border-radius: 0.5em;
	background-color:#ffa000;
}

.service_link{
	display: table;
	margin: 2em auto;
}
.service_link a{
	color: #fff;
}
	

/* STATISTIQUES */
#statistiques h1{
	display:table;
	margin: 1em auto;
	font-weight: 300;
	font-size: 2em;
}
#statistiques #table table{
	background:#fff;
	color: #071207;
}
#statistiques #table table,
#statistiques #table table thead{
	border: 2px solid #b6e2b6;
	border-collapse: collapse;
	border-spacing: 0;
}
#statistiques #table table td{
	border: 1px solid #b6e2b6;
	padding: 5px;
}
	
@media screen and (min-width: 400px) {
	.presentation a{
		display:table-cell;
		width:30%;
	}
	.row > div{
		display:inline-block;
		vertical-align:middle;
		width:59%;
	}
	.row > #first{
		width:40%;
	}
}
@media screen and (min-width: 800px) {
	.gl_form li{
		display: inline-block;
		width: 50%;
		vertical-align: top;
	}
}
@media screen and (min-width: 900px) {
	.legal, .gl_form{
		width:860px;
		padding:20px 20px 50px;
	}
}