@media screen and (max-width: 1220px) {
	
.popup-box{
	width:60%;}

}

@media screen and (max-width: 1000px) {
	
.popup-box{
	width:70%;}

}

@media screen and (max-width: 870px) {
	
.popup-box{
	width:80%;}

}

@media screen and (max-width: 760px) {
	
.popup-box{
	width:90%;}

.wrap{width:100%;}

nav{display:none;}

.mobiletopmenu{display:block; width:92.5%; padding:10px 4%; background:#2D2D2D;}
.mobiletopmenu a{position:relative; display:block; height:31px; text-align:right;}
.mobiletopmenu a img{display:inline-block; float:right; margin-right:10px;}
.mobiletopmenu a span{display:inline-block; float:right; color:#fff; height:31px; line-height:31px;}

#toplogo{width:170px; height:93px; margin:70px auto 0; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

#mobile-menu{
	display:block;}

/********************************************************************************************************************/

/* SOCIAL MEDIA BOX */

#socialbox{position:relative; top:0; margin-top:0; width:100%; text-align:center;}
#socialbox a{display:inline-block;}
#socialbox .sep{display:none;}

/* ######################################################################################################################################################### */

.auf-menu{
	background:#000; width:96%; padding:10px 2%;}

.bg1{background: url('../img/1-mobile.jpg') no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.bg2{background: url('../img/2-mobile.jpg') no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.bg3{background: url('../img/3-mobile.jpg') no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

.topleftarrow{left:10px; width:15px; height:24px; margin-top:-12px; opacity:1; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.toprightarrow{right:10px; width:15px; height:24px; margin-top:-12px; opacity:1; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

/* ######################################################################################################################################################### */

.motscles{ font-size:1.4em;}

.slogan2, .slogan3{}

#home .more{
	background:none;}

/* ######################################################################################################################################################### */

#blocs h2{height:30px; font-size:2em;}
#blocs .bloc{width:48%; margin:15px 1%;}
#blocs .bloc h3{height:22px; line-height:22px; font-size:1.4em;}
#blocs .bloc .img{width:100%; height:100px; background-size:contain; background-repeat:no-repeat; background-position:center center; margin:10px 0;}
#blocs .bloc span{font-size:0.8em;}
#blocs .sep{display:none;}

/* ######################################################################################################################################################### */

.mobile-daniel-laporte{display:block; position:relative; width:100%; height:auto;}

#wrapPresentation{background:none; padding:30px 15px; width:auto !important;}
#presentation .bienvenue{font-size:4em;}
#presentation h1{width:100%; font-size:1.4em;}
#presentation p{width:100%;}

/* ######################################################################################################################################################### */

#realisations h2{height:30px; font-size:2em;}
#realisations .projet{width:80%; margin:0 auto 20px; float:none;}
#realisations .projet img{width:100%;}
#realisations .projet .gris{padding:10px;}
#realisations .projet .gris h4{font-size:1.2em; margin-bottom:15px;}
#realisations .sep{display:none;}

/* ######################################################################################################################################################### */

#types h2{height:22px; font-size:1.4em;}
#types .typebox{float:none; width:90%; margin:0 auto;}
#types .typebox ul{-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;}

/* ######################################################################################################################################################### */

#footer .box{float:none; width:90%; margin:0 auto 25px;}
#footer .box ul{list-style:none !important; margin-left:0 !important;}
#footer .box ul li{color:inherit;}
#footer .box ul li a{display:block; padding:0 15px; line-height:40px; height:40px; margin-bottom:7px; background:rgba(0,0,0,0.3);}
#footer .toppage{margin-right:20px;}

/* ######################################################################################################################################################### */

#pagehome{min-height:250px; height: 250px;}
#toplogopage{width:170px; height:93px; margin:25px auto 0; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

#pagecontent{padding:30px 0 60px;}
#pagecontent .bigorangetitle{font-size:4em;}
#pagecontent h1{font-size:1.4em;}
.small-titles{font-size:1.2em;}
.white-square{height:125px;}

/* ######################################################################################################################################################### */

.col100{width:92%; margin:10px 4%;}
.col60{width:92%; margin:10px 4%;}
.col50{width:92%; margin:10px 4%;}
.col40{width:92%; margin:10px 4%;}
.col33{width:92%; margin:10px 4%;}

/* ######################################################################################################################################################### */

.sectorlink{margin-top:15px; font-size:1.4em;}

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

}

@media screen and (max-height: 800px) {
	
#toplogo{
	background-size:60%;
	background-position:center top;
	background-repeat:no-repeat;}

}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
	
	
	
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	


/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */
	
}


/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	
	

/********************************************************************************************************************/

/* SOCIAL MEDIA BOX */

#socialbox{position:relative; top:0; margin-top:0; width:100%; text-align:center;}
#socialbox a{display:inline-block;}
#socialbox .sep{display:none;}

/********************************************************************************************************************/

.wrap{width:100%;}
.bg1{background: url('../img/1-mobile.jpg') no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.bg2{background: url('../img/2-mobile.jpg') no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.bg3{background: url('../img/3-mobile.jpg') no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

/* ######################################################################################################################################################### */


.menulink{width:19%; border-left:1% solid #3E3E3E; font-size:1.2em;}
#lihover{width:16.5%;}
.sublink{width:75%; padding-left:24%; border-left:1% solid #3E3E3E; font-size:1.2em;}
.submenulink{font-size:1.2em;}

/* ######################################################################################################################################################### */

#blocs .bloc{width:22.5%;}
#blocs .bloc h3{font-size:1.8em;}
#blocs .bloc .img{width:100%; height:175px; background-size:contain; background-repeat:no-repeat; background-position:center center;}
#blocs .sep{width:3.33333333%;}

/* ######################################################################################################################################################### */

#presentation .bienvenue{margin-left:15px; font-size:4em; line-height:1em;}
#presentation h1{margin-left:15px; width:57%; font-size:1.4em;}
#presentation p{margin-left:15px; width:60%;}
#presentation .more{margin-left:15px;}

/* ######################################################################################################################################################### */

#realisations h2{height:30px; font-size:2em;}
#realisations .projet{width:45%; margin:0 2%}
#realisations .projet img{width:100%;}
#realisations .projet .gris{padding:10px;}
#realisations .projet .gris h4{font-size:1.2em; margin-bottom:15px;}
#realisations .sep{ display:none;}

/* ######################################################################################################################################################### */

#types .typebox{width:31%; margin-left:2%;}

/* ######################################################################################################################################################### */

#footer .box{width:31%; margin-left:2%;}

#footer .toppage{margin-right:15px;}

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

/* ######################################################################################################################################################### */

}

@media screen and (max-width: 660px) {
	
.popup-box{
	width:100%;}

}

@media screen and (max-width: 610px) {
	
.popup-box h2{
	padding:50px 2% 20px;}

}