@charset "UTF-8";
/* CSS Document */


/* iPad */

@media screen 
and (min-width : 568px) 
and (max-width : 768px)
{
.conteneur 						{ width:768px; }
.enveloppe						{ width:100%; }
.nav-collapse ul li a 			{ font-size: 12px; width: 96px; }
#top-bg 						{ height: 308px; }
.fleche							{ margin-top:22px; }
.main							{ width:768px; }
.info-comp						{ width:768px; }
.fleche							{ padding-bottom:30px; }
.col1							{width:45%; }
p.intro							{ font-size:18px;}

#content-services				{ padding:30px 100px;}
.services 						{ width: 570px; margin: 0; margin-bottom: 15px; float:none; }
.services-ajout					{ width:150px; margin-right:10px; }
.services-ajout	 img			{ width:auto; }
.services-ajout h1				{ font-size:15px;}
.services-ajout a				{ width:150px; font-size:12px;}

.apropos-bg						{ background-image:url(../images/apropos-bg-1024.jpg); }
.parallax-overlay 				{ height: 930px; }
.col2							{ display:none; }

.adresse 						{ width: 95%; height: auto; }
.contact-g img 					{ width: 90px; height: 90px; margin: 0.3em 1.2em 0 0; }
.adresse ul 					{ font-size: 14px; }
.social-icons					{ width: 100%; }
}


@media screen 
and (min-width : 769px) 
and (max-width : 1024px)
{

.enveloppe						{ width:95%; }
.social li						{ font-size:19px; padding:0 0 0 16px; }
.nav-collapse ul li a			{ font-size:14px; width:97px; }
.top-bg 						{ width: 768px; height:317px; background-image:url(../images/splashscreen-768.jpg);}
.top-bg img						{ width:60%;}
.main h1 						{ font-size: 36px; padding-top: 40px; margin-top:0; }
#logo-							{ margin-top:7px; }
#logo- img						{max-width:170px; }

#navigation						{ background-color:transparent; position:fixed; }
#navigation ul					{ margin-left:0;}
#navigation ul li a				{ width:100%; font-size:13px; font-weight:400; margin-right:0; border-color:#ccc; background-color: rgba(255,255,255,0.8); border-width:1px;} 
#navigation ul li a:hover		{ font-weight:bold; color:#777; background-color:#e4e4e4;}

.slogan h1						{ font-size: 44px; margin-top: 0; padding-top:150px;}
.slogan a						{ margin-top:10px;}
h1 small 						{ font-family: 'Raleway', sans-serif; font-weight: 200; font-size:28px; }

.fleche 						{margin-top:10px}

.info-comp h1 					{ font-size:25px;}
.info-comp h2 					{ font-size:15px; }
.info-comp h3 					{ font-size: 15px; padding: 0 55px; }

#content-accueil				{ padding:0;}
.dernier-ajout					{ width:150px; margin-right:10px; }
.dernier-ajout	 img			{ width:100% }
.dernier-ajout h1				{ font-size:15px;}
.dernier-ajout a				{ width:150px; font-size:12px;}



#portfolio						{ padding-left:35px;}
#content-references				{ padding:0px; min-height:650px;}
.filters 						{ width:700px;}
.filters .filter				{ width:460px;padding:20px 20px 20px 220px;}
.filters .container a 			{ width:220px;height:147px;}
.demo1							{ width:700px;}

.apropos-bg						{ background-image:url(../images/apropos-bg-1024.jpg); }
.parallax-overlay				{height:785px; }
.col1							{ width:45%; }
.col2							{ display:none; }

#content-contact				{ padding:0px;min-height:895px;} 
.contact-g						{ width:274px;  margin-right:45px; margin-top:20px; margin-left:30px; }
p.intro							{ font-size:17px; }
#contact-d						{ margin-top:20px; float:right; width:none; }
input[type="text"]				{ width:350px; }
textarea						{ width:350px; }
.adresse						{ width:98%; height:auto; }
.adresse ul						{ font-size:14px; }
ul.social-icons 				{ margin-left:12%; }
form li.wide 					{ width: 0px; }
form li							{ float:none; margin:0 4% 3% 0; }
input[type="text"], textarea	{ float:none; }

}


/* iPhone */
@media screen 
and (min-width : 320px) 
and (max-width : 568px) {
header							{ height:100%; max-height:544px; }
.rwd-line						{display:block; }
#scrollUp						{ bottom:60px; }
#head							{ background-color:transparent; }
.enveloppe						{ width:100%; }
.nav-collapse ul li a			{ width:100%; background:rgba(255,255,255,0.90); color:#858585; }
.nav-collapse ul li a:hover		{ background:#f5151b; }
.nav-toggle:before 				{ font-size:40px; }
.nav-toggle.active:before 		{ font-size: 40px; content: "\2261"; color: #b5151f; }
h1 small						{ font-size:26px; }
.slogan h1						{ font-size:45px; padding-top:40%; }
#logo-							{ width:60%; margin-left:20%; z-index:1; }
.social							{ display:none; }
#top-bg							{ background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-attachment:scroll; }
.overlay 						{ width: 100%; height: 100%; background-image: url(../images/pattern.png); background-repeat: repeat; background-color: rgba(44,62,80,0.6); z-index: 2; }
.bg-large						{ width:100%; height: 165px; position: fixed; transition: 0.5s; }
.bg-small						{ width:100%; height: 72px; background: rgba(0,0,0,0.8); position: fixed; padding-left: 14%; transition: 0.5s; -moz-transition: 0.5s;; -webkit-transition: 0.5s; -o-transition: 0.5s; }
.fleche							{ margin-top:20px; }

.info-comp						{ padding:13px 0; }
.info-comp h3					{ padding-left:5%; padding-right:5%; }

#services-anchor				{ margin-top:0; }
#content-services				{ padding:0; margin:0 10px; width:initial; min-height:1660px; }
.main h1						{ padding-top:150px; }
.main h2						{ font-size:20px; margin-bottom:0; }
.services						{ width:inherit; padding:10px 21px; margin:30px 10px 20px; }

.cbp-wrapper					{ margin-left:10px !important; }
.col1							{ float:none; display:block; width:100%; padding-top:25px; }
.col2							{ display:none; }
.parallax-overlay				{ background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-attachment:scroll; }	
.enveloppe-apropos				{ width:88%; }

#content-contact				{ padding:0; padding-left:10px; min-height:1080px; }
.contact-g						{ width:100%; margin-top:50px; }
.intro							{ margin:0 5px; }
p.intro 						{ font-size:18px; margin-bottom:20px; }
.adresse						{ width:90%; padding:9px; margin-bottom:20px; }
.contact-g img 					{ width: 85px; height: 85px; margin: 0.8em 1.1em 0 0; }
.adresse ul						{ font-size:14px; }
.social-icons					{ width:100%; }
#contact-d						{ width:100%; }

}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) 	{ 

header							{ height:auto; }
.conteneur 						{ width:568px; }
.main							{ width:568px; }
.main h1						{ padding-top:50px; }
.large img 						{ width: 80%; margin: 0 12%; }
.small img 						{ width: 33%; margin:0 13%; }
.slogan h1						{ padding-top:30%; }
.fleche							{ margin-top:10px; }
.info-comp						{ width:568px; padding:30px 0; }

#content-services				{ min-height:0; }

.parallax-overlay				{ height:100%; }

.contact-g						{ max-width:100%; }
p.intro 						{ font-size: 18px; text-align: center; padding: 0 16%; }
.adresse 						{ width: 50%; padding: 9px; margin: 5% 23%; }