/* RESPONSIVE RULES */

@media all and (max-width : 1250px) {
	body { min-width: 0px;}
	#header {position: absolute; height: 180px;}
	#facebook, #pinterest, #instagram, #langue { top: 130px;}
	#header-inner { width: 100%;}
	#contenu-page {width: 100%; }
	#recherche { display: none;}
	#logo { background-color: #fff; border-bottom: 3px solid #e51b24; position: relative; left: 0; top: 0; width: 100%;}
	.logo-gros { width: 304px; height: 100px; margin-left: 0; background:url(../images/logo-petit.png) 35px 15px no-repeat;}
	.logo-petit { width: 304px; height: 100px; margin-left: 0; background:url(../images/logo-petit.png) 35px 15px no-repeat;}
	
	#nav-menu { width: 100%; left: 0;}
	#separ-logo { margin-left: 0;}
	
	#contenu-accueil { width: 100%;}	
	#accueil-mission { width: 100%; height: auto; padding-bottom: 30px;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;}
	#mission-titre { font-size: 33px; padding: 20px 30px; text-align: left;}
	#accueil-mission p {width: auto; margin-left: 0px; padding: 0 30px; text-align: left;}
	#mission-boutons { padding-left: 30px;}
	#triptique { width: 100%; height: auto; background:url(../images/bg-beige.jpg) repeat-y;}
	
	#contenu-page-inner { padding: 20px 30px;}
	#contenu-page {width: 100%;}
	
	
	#footer { width: 100%;}
		
	.cycle-slideshow { top: 100px;}
	
	#photo-top {z-index: -1; height: 678px; overflow: hidden; padding-top: 70px; }
	#photo-top img { width: 100%; min-width: 0;}
	
	.half-gauche, .half-droit { float: none; width: 100%; margin: 0 0 20px 0;}
	
	#pensionnaire-plus { background: none;}
	#pensionnaire-plus .half-gauche, #pensionnaire-plus .half-droit { width: 94% !important; padding: 3%;}
	#pensionnaire-plus .half-gauche { background-color: #333;}
	
	.parrain-element { width: 100%; float: none; margin: 0 0 10px 0;}
	.nouvelle-bg { position: absolute; width: 100% !important; top: 0;
	-webkit-background-size: cover !important;;
  	-moz-background-size: cover !important;;
  	-o-background-size: cover !important;;
  	background-size: cover !important;;}
	
	#select-year-container { position: absolute; top: 0; left: 50%; margin: 380px 0 0 -80px; z-index: 11;}
	
	.don-element {margin-bottom: 15px;}	
	#campagne-thermo {margin-left: 0;}
	#campagne-photo, #campagne-info { margin-bottom: 15px;}
	
	#footer div { float: none; width: 96%; padding: 2%;}
	
	.photo-animal-nouveaucompte #campagne-photo-animal { position: relative; right: 0;}
}

@media all and (max-width : 1030px) {
	#facebook, #pinterest, #instagram, #langue { top: 25px;}
	#contenu-accueil { width: 100%; margin-top: -270px;}
	h1 { top: 200px; font-size: 45px;}
	.contenu-full { padding: 20px 30px;}
	.contribution_amount-section .label { float: none !important; width: 100% !important;}
	
	
}

@media all and (max-width : 940px) {
	#facebook, #pinterest, #instagram, #langue { top: 25px;}
	#nav { display: none;}
}

@media all and (max-width : 870px) {
	.nouvelle { width: 100%; height: 140px; float:left; margin: 0 0 10px 0;}
	.nouvelle .nouvelle-contenu { float: none; width: auto;}
	.nouvelle img { margin-right: 10px;}
	
	.don-element { width: 100%; float: none; margin: 0 0 15px 0;}
	.don-element p { padding: 140px 30px 0 20px; width: auto; text-align: left;}
	.don-element img { width: 100%;}
	
	#campagne-info { width: auto;}
}

@media all and (max-width : 775px) {
	#facebook, #pinterest, #instagram, #langue { top: 25px;}
	.cycle-slideshow img { width: 775px; left: 50% !important; margin-left: -388px;}
	#photo-top img { width: 775px; left: 50% !important; margin-left: -388px; position: relative;}
	#header { background: none;}
	
	h1 { font-size: 40px; letter-spacing: 1px;}
	h2 { line-height: 30px;}
	
	#nav-menu { display: none; width: 100%; position: absolute; left: 0; margin:0; border: 0;}
	#nav-menu > li { display: block; width: 100%; margin: 0;}
	#nav-menu > li > a { display: block; width: 100%; padding: 5px 10px;  background: #19180f; font-size: 16px; border-bottom: 1px solid #56543a; height: auto; width: auto !important; line-height: normal;}
    #nav-menu > li {float: none; border-bottom: 0; margin-bottom: 0;}
	#nav-menu #li-patte a { padding: 5px 10px; width: auto;}
    #nav-menu ul.subs {
        position: relative;
		display: none;
		opacity: 1 !important;
		visibility: visible;
		background: none #666;
		padding: 0;
		margin: 0;
        top: 0;
		width: auto;
    }
	#nav-menu #li-last .subs { left: 0;}
	#nav-menu #ul-large {width: auto;}
	#nav-menu ul li ul { list-style: none; padding: 0 0 10px 0;}
    #nav-menu li:hover ul.subs {display: none; top: 0;}
	#nav-menu ul.subs > li > a { text-align: center; width: 100%;}
	#nav-menu ul.subs > li a {line-height: 30px;}
	
	#nav-menu li #s1:target + ul.subs,
    #nav-menu li #s2:target + ul.subs,
	#nav-menu li #s3:target + ul.subs {display: block;}
.menu-inactif { text-align:center;}
    #nav-menu ul.subs > li {
        display: block;
        width: auto;
    }
	
	#nav-menu ul.subs > li a {text-align: center; padding: 0;}
	#nav-menu .subs:after {content: normal;}
	
	.toggle { display: block; position: relative; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
	#toggle:checked + div #nav-menu { display: block; opacity: 1;}
	.toggle:after {
		content: attr(data-open);
		display: block;
		width: 100%;
		margin: 0;
		padding: 10px 50px;
		background: url(../images/bg-menu-small.png) center center no-repeat #000;
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		color: #FFFFFF;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box; 
	}
	
	.toggle:hover:after{
		background: url(../images/bg-menu-small.png) center center no-repeat #333333;
	}
	
	#toggle:checked + div .toggle:after{
		content: attr(data-close);
	}
	
	.triptique-element { height: auto !important;}
	.triptique-un, .triptique-deux, .triptique-trois { width: 100% !important;}
	.triptique-element .triptique-dessin { width: 100%; margin: 0; background-position: center !important;}
	.triptique-element .triptique-titre { width: 100%; padding: 0 0 15px 0; margin: 0; text-align: center;}
	.triptique-element:hover p { background-image: none !important;}
	
	
	#footer-logo-amos { position: relative; left: 0; margin: 20px 0 0 30px;}
	#footer-copy { text-align: left; padding: 50px 30px; color: #a3a3a3;}
	
	#fond-papier { padding: 20px 30px;}
	.pensionnaires-bloc {padding: 0; margin: 0 15px 15px 0;}
	.pensionnaires-bloc:hover > .pensionnaires-hover-fleche {opacity: 1; top: 240px;}
	
	.parrain-element { height: auto; padding-bottom: 20px;}
	.nouvelle-bg { height: 100%; background: url(../images/bg-svq.jpg) bottom left no-repeat; opacity: 0; z-index: 0;}
	
	#campagne-photo { overflow: hidden; float: none;}
	
	#don-page-personnelle #campagne-photo { float: none; padding-bottom: 50px;}
	
	
}

@media all and (max-width : 480px) {
	#logo { border-bottom: 3px solid #e51b24; position: relative; left: 0; top: 0; width: 100%; padding-top: 40px;}
	#facebook, #pinterest, #instagram, #langue { top: 100px;}
	
	.nouvelle { height: auto; overflow: visible;}
	.nouvelle img { float: none;}
	.nouvelle .nouvelle-contenu { float: none;}
	
	.don-element img { width: 480px;}
	
	#campagne-photo { float: none; width: 100%;}
	#campagne-image { width: auto;}
	#campagne-image img { width: 100% !important;}
	#campagne-image-inner { width: auto;}
	#campagne-photo a { width: auto; margin-top: 15px;}
	
	.thermometer-wrapper { margin-bottom: 30px;}
	
	#crm-container.crm-public .label { width: 100%;}
	#crm-container.crm-public .label label { text-align: left !important;}
	
	.crm-container .crm-section .content { margin-left: 0;}
}