@import url(https://fonts.googleapis.com/css?family=Nothing+You+Could+Do);
@import url(https://fonts.googleapis.com/css?family=Montserrat);

.wrap-content, .og-grid {
	list-style: none;
	padding: 20px 0;
	margin: 0 auto;
	text-align: center;
	width: 70%;
	max-width:885px;
}

select{
	padding:6px 10px;
	border-radius:20px;
}

.og-grid li {
	display: inline-block;
	margin: 10px 5px 0 5px;
	vertical-align: top;
	height: 240px;
}

body.petition-senateur .og-grid li{
	height: 280px;
}
/*
.og-grid li a span{
	-webkit-filter: grayscale(100%);
	  -moz-filter: grayscale(100%);
	  -ms-filter: grayscale(100%);
	  -o-filter: grayscale(100%);
	  filter: grayscale(100%);
	  filter: gray; 
}

.og-grid li{
	-webkit-filter: grayscale(100%);
}*/

.og-grid li.senateur{
	height: 290px ;	
}
/*
.og-grid li.favorable,
.og-grid li.defavorable,
.og-grid li.avec-reserve{
	  -webkit-filter: grayscale(0%);
}

.og-grid li.favorable span,
.og-grid li.defavorable span,
.og-grid li.avec-reserve span{
	  -moz-filter: grayscale(0%) !important;
	  -ms-filter: grayscale(0%) !important;
	  -o-filter: grayscale(0%) !important;
	  filter: none !important;
}

.og-grid li.non-repondu:hover span{ 
	  -moz-filter: grayscale(50%);
	  -ms-filter: grayscale(50%);
	  -o-filter: grayscale(50%);
	  filter: grayscale(50);
}

.og-grid li.non-repondu:hover{
	  -webkit-filter: grayscale(50%) !important;
}

*/
.og-grid li > a,
.og-grid li > a img {
	border: none;
	outline: none;
	display: block;
	position: relative;
}

.og-grid li.og-expanded > a::after {
	top: auto;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-bottom-color: #ddd;
	border-width: 15px;
	left: 50%;
	margin: -20px 0 0 -15px;
}

.og-expander {
	position: absolute;
	top: auto;
	left: 0;
	width: 100%;
	margin-top: 10px;
	text-align: left;
	height: 0;
	overflow: hidden;
	background: #ddd url(../images/paper_fibers-new.png) repeat fixed;
}

.og-expander-inner {
	padding: 50px 30px;
	height: 100%;
}

.og-close {
	position: absolute;
	width: 40px;
	height: 40px;
	top: 20px;
	right: 20px;
	cursor: pointer;
}

.og-close::before,
.og-close::after {
	content: '';
	position: absolute;
	width: 100%;
	top: 50%;
	height: 1px;
	background: #888;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}

.og-close::after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.og-close:hover::before,
.og-close:hover::after {
	background: #333;
}

.og-fullimg,
.og-details {
	width: 70%;
	float: none;
	margin:0 auto;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.og-details {
	padding: 0 40px 0 20px;
}

.og-fullimg {
	text-align: center;
}

.og-fullimg img {
	display: inline-block;
	max-height: 100%;
	max-width: 100%;
}

.og-details h3 {
	font-weight: 300;
	font-size: 52px;
	padding: 40px 0 10px;
	margin-bottom: 10px;
}

.og-details p p{
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	color: #999;
}

.og-details a {
	font-weight: 700;
	font-size: 16px;
	color: #333;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 10px 20px;
	border: 3px solid #333;
	display: inline-block;
	margin: 30px 0 0;
	outline: none;
}

.og-details a::before {
	content: '\2192';
	display: inline-block;
	margin-right: 10px;
}

.og-details a:hover {
	border-color: #999;
	color: #999;
}

.og-loading {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ddd;
	box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	-webkit-animation: loader 0.5s infinite ease-in-out both;
	-moz-animation: loader 0.5s infinite ease-in-out both;
	animation: loader 0.5s infinite ease-in-out both;
}

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D";
}

blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

blockquote p {
  display: inline;
}

textarea{
	margin:15px;
	width:calc( 100% - 50px);
	height:200px;
	padding:20px;
	font-family: 'Lato', Calibri, Arial, sans-serif;
}

#submit{
	padding:5px 15px;
	font-size:25px;
}

.type_reponse{
	font-size:17px;
}

input, textarea, select, a { outline: none; }

p.error{
	padding:5px 10px;
	font-size:15px;
	color:#8B0000;
	border:solid 4px #8B0000;
}

p.success{
	padding:5px 10px;
	font-size:15px;
	color:#006400;
	border:solid 4px #006400;
}

.og-grid, .item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;

  -webkit-transition-property: -webkit-filter;
     -moz-transition-property: -moz-filter;
      -ms-transition-property: -ms-filter;
       -o-transition-property: -o-filter;
          transition-property: filter;
}

.nom_depute{
	padding-top:7px;
	width:150px;
	min-height:40px;
}

.statut_reponse{
	background:rgba(255, 255, 255, 0.9);
	padding:5px 8px;
	width:100%;
	font-weight:normal;
	display:block;
	position:absolute;
	bottom:40px;
	font-family: 'Montserrat', sans-serif;
}

.statut_reponse.favorable{
	color:#2DC800;
}

.statut_reponse.avec-reserve{
	color:#FF9900;
}

.statut_reponse.defavorable{
	color:#F70000;
}

.introduction{
	line-height:1.4;
	font-size:16px;
	width:80%;
	display:block;
	margin:0 auto;
	font-weight:normal;
	text-align:left;
	margin-bottom:30px;
}

.introduction *{
	font-weight:100;
}

.introduction a{
	text-decoration:underline;
} 

.introduction a:hover{
	text-decoration:underline;	
}

.introduction strong{
	font-weight:bold;
}

@-webkit-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@-moz-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@media screen and (max-width: 830px) {
	.og-grid, .wrap-content {
		width: 100%;
	}
}

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

	.og-expander h3 { font-size: 32px; }
	.og-expander p { font-size: 13px; }
	.og-expander a { font-size: 12px; }

}

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

	.og-fullimg { display: none; }
	.og-details { float: none; width: 100%; }
	
}