/*
Theme Name: Meb Web
Description: Theme custom pour le site Meb Web
Author: Meb Web
Author URI: https://mebweb.ca
Version: 1.0

*/

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

/*HTML5 BOILERPLATE MINIFIED*/

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

*{box-sizing:border-box;}article{display:block}aside{display:block}details{display:block}figcaption{display:block}figure{display:block;margin:0}footer{display:block}header{display:block}hgroup{display:block}nav{display:block}section{display:block}audio{display:inline;zoom:1}canvas{display:inline;zoom:1}video{display:inline;zoom:1}audio:not([controls]){display:none}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-family:sans-serif;color:#222}button{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;line-height:normal;cursor:pointer;-webkit-appearance:button;overflow:visible;margin:0}input{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;line-height:normal;margin:0}select{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;margin:0}textarea{font-family:sans-serif;color:#222;font-size:100%;overflow:auto;vertical-align:top;resize:vertical;margin:0}body{font-size:1em;line-height:1.4;margin:0}::-moz-selection{background:#333;color:#fff;text-shadow:none}::selection{background:#333;color:#fff;text-shadow:none}a{color:#00e}a:hover{color:#06e;outline:0}a:active{outline:0}abbr[title]{border-bottom:1px dotted}b{font-weight:700}strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}ins{background:#ff9;color:#000;text-decoration:none}mark{background:#ff0;color:#000;font-style:italic;font-weight:700}pre{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}code{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}kbd{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}q{quotes:none}q:before{content:none}q:after{content:none}small{font-size:85%}sub{font-size:75%;line-height:0;position:relative;vertical-align:baseline;bottom:-.25em}sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;top:-.5em}ul{margin:1em 0;padding:0 0 0 40px}ol{margin:1em 0;padding:0 0 0 40px}dd{margin:0 0 0 40px}nav ul{list-style:none;list-style-image:none;margin:0;padding:0}nav ol{list-style:none;list-style-image:none;margin:0;padding:0}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}svg:not(:root){overflow:hidden}form{margin:0}fieldset{border:0;margin:0;padding:0}label{cursor:pointer}legend{border:0;margin-left:-7px;white-space:normal;padding:0}input[type="button"]{cursor:pointer;-webkit-appearance:button;overflow:visible}input[type="reset"]{cursor:pointer;-webkit-appearance:button;overflow:visible}input[type="submit"]{cursor:pointer;-webkit-appearance:button;overflow:visible}button[disabled]{cursor:default}input[disabled]{cursor:default}input[type="checkbox"]{box-sizing:border-box;width:13px;height:13px;padding:0}input[type="radio"]{box-sizing:border-box;width:13px;height:13px;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}button::-moz-focus-inner{border:0;padding:0}input::-moz-focus-inner{border:0;padding:0}input:invalid{background-color:#f0dddd}textarea:invalid{background-color:#f0dddd}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}.chromeframe{background:#ccc;color:#000;margin:.2em 0;padding:.2em 0}

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

/*BODY STYLES*/

/*

Gris		#333333
Turquoise	#00a9b4
Vert		#8bc53f

*/

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

::-webkit-scrollbar{
	width:14px;
}

::-webkit-scrollbar-track{
	background-color:#ccc;
}

::-webkit-scrollbar-thumb{
	background-color:#00a9b4;
	outline:none;
}

a.btn{
	background-color:#2AB190;
	color:#FFF;
	padding:20px;
	border-radius:50px;
	display: inline-block;
	text-align: center;
}
a.btn:hover{
	color:#000 !important;
}

#frm_checkbox_216-0 label{
	font-size:16px;
}

.page-refus-recaptcha h1{
	margin-bottom: 20px !important;
}
.page-refus-recaptcha h2{
	margin-bottom: 60px;
}

html {
    font-size: 100%;
}

body {
	background: #FFF;
	color: #000;
	font: 1.2em 'Quicksand', Arial, Helvetica, sans-serif;
	font-weight:400;
	animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

h1{
	font-size:60px;
	font-weight:400;
	text-transform:uppercase;
}

h2{
	font-size:30px;
	font-weight:400;
	text-transform:uppercase;
}

h2 span{
	font-size:60px;
}

a {
	text-decoration: none;
	transition: all .5s ease;
	color:#00a9b4;
}

a:hover,
a.email:hover,
a.phone:hover{
	color:#8bc53f !important;
}

.container {
	clear: both;
	margin: 0 auto;
	max-width: 1100px;
	position: relative;
	padding:0 20px;
}

img {
	height: auto;
	max-width: 100%;
}

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

blockquote{
	font-style:italic;
	position:relative;
	font-size:16px;
	line-height:25px;
	background:#F1F1F1;
	padding:10px 40px;
	margin:30px 0 0 0;
}

blockquote span{
	color:#CCC;
	font-weight:bold;
	font-size:30px;
	line-height:20px;
}

blockquote span:first-child{
	margin:0 0 0 -17px;
}

p.stars{
	color:#ffc600;
	font-style:normal;
	font-size:20px;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.accessibility {
  backface-visibility: hidden;
  left: -999999999px;
  position: absolute;
}

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

/*HEADER STYLES*/

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

/***Mobile Menu***/

/* .home header{
	background: url(images/header-bg.jpg) no-repeat right center ;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height:100vh;
} */

.home header h1{
	position:absolute;
	top:20%;
	left:8%;
}

.home header h2{
	font-size:4vw;
	font-weight:400;
	text-transform:uppercase;
	position:absolute;
	top:26%;
	left:8%;
}

.home header h2 span:first-of-type{
	color:#00a9b4;
}

.home header h2 span:last-of-type{
	color:#8bc53f;
}

.logo img{
	width:325px;
	height:auto;
	margin:2% 0 0 2%;
}

table.pricing{
	width:50%;
	margin:0 auto;
}

table.pricing tr{
	border-bottom:1px solid #F1F1F1;
}

table.pricing th{
	background-color:#00a2a9;
	color:#FFF;
	font-weight:bold;
	text-transform:uppercase;
}

table.pricing td:first-of-type{
	width:40%;
	text-align:center;
}

table.pricing small{
	font-size:12px;
}


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

/*NAV STYLES*/

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

.logo img{
    width:250px !important;
    display:block;
    margin:2% auto 100px auto !important;
}

.hamburger{
    display:none !important;
	background-color:#00a9b4;
	border-radius:50px;
	-moz-border-radius:50px;
	-webkit-border-radius:50px;
	-ms-border-radius:50px;
	-o-border-radius:50px;
	width:65px;
	height:65px;
	padding:18px 0 0 15px;
	position:fixed;
	right:2%;
	top:2%;
	z-index:9999;
	cursor:pointer;
}

.hamburger.change{
	position:fixed;
}

.hamburger span.menu{
	font-size:13px !important;
	color:#FFF !important;
	position:absolute !important;
	bottom:12px !important;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 1px;
  background-color: #FFF;
  margin: 6px 0;
  transition: 0.4s;
  display:block;
}

.bar1, .bar3{
	width:26px;
	margin-left:10px;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-11px, -2px);
  transform: rotate(-45deg) translate(-11px, -2px);
  width:35px;
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-11px, 1px);
  transform: rotate(45deg) translate(-11px, 1px);
  width:35px;
}

.menu-sidebar{
	background:#000;
	height:100vh;
	width:30%;
	position:fixed;
	top:0;
	right:-30%;
	text-align:right;
	transition: all .5s ease;
	z-index:9998;
}

.menu-sidebar.active{
	right:0%;
}

.menu-sidebar hr{
	background:#FFF;
	height:1px;
	border:0;
	width:40%;
	margin:0 0 5% 53%;
}

.menu-sidebar a.email,
.menu-sidebar a.phone{
	color:#FFF;
	display:block;
	margin-right:7%;
}

.menu-sidebar a.email{
	font-size:25px;
}

.menu-sidebar a.phone{
	font-size:30px;
}

nav{
	margin:30% 7% 0 0;
	padding:0 0 7% 0;
}

nav a{
	color:#FFF;
	font-size:26px;
	text-transform:uppercase;
	line-height:45px;
}

.menu-services-container{
	background:#F1F1F1;
	padding:0 3%;
}

.menu-services-container ul{
	padding:3% 5%;
	list-style:none;
}

.menu-services-container ul li{
	padding:3%;
	border-bottom:1px solid #CCC;
}

.menu-services-container ul li.current_page_item a{
	color:#8bc53f;
}

.menu-services-container ul li:last-of-type{
	border-bottom:0;
}

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

/*HOME STYLES*/

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

#sur-mesure{
	background: url(images/site-web-sur-mesure.jpg) no-repeat left center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height:80vh;
	color:#FFF;
}

#sur-mesure .content{
	width:100%;
	padding:3% 3% 0 62%;
}

#projet-contact{
	background: url(images/pattern.png) #8bc53f;
	color:#FFF;
	padding:5% 0;
	margin:0 0 10px 0;
}

#projet-contact a{
	color:#FFF;
	width:40%;
	padding:1%;
	border:1px solid #FFF;
	text-align:center;
	display:block;
	margin:0 auto;
}

#projet-contact a:hover{
	color:#333 !important;
}

#realisations{
	margin-bottom:10px;
}

#realisations .col{
	background-repeat:no-repeat;
	background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-color:#000;
	width:33.33%;
	margin:0;
	height:40vh;
	position:relative;
	border-top:10px solid #FFF;
	border-left:10px solid #FFF;
	transition: all .5s ease;
	position:relative;
}

.ie10 #realisations .col{
	float:left;
}

#realisations .col:nth-child(3),
#realisations .col:nth-child(6){
	border-right:10px solid #FFF;
}

#realisations .infos{
	opacity:0;
	transition: all .5s ease;
	color:#8bc53f;
	text-align:center;
	z-index:999;
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background:rgba(0,0,0,0.8);
}

#realisations .infos h3{
	font-size:30px;
	font-weight:300;
	text-transform:uppercase;
	margin:0;
	position:absolute;
	bottom:15%;
	left:50%;
	transform:translateX(-50%);
	width:100%;
}

#realisations .infos p{
	margin:0;
	position:absolute;
	bottom:7%;
	left:50%;
	transform:translateX(-50%);
	width:100%;
}

#realisations .col:hover .infos{
	opacity:1;
}


#realisations .voir{
	text-align:center;
	color:#FFF;
	background:#00a9b4;
}

#realisations .voir h2{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	margin:0;
}

#realisations a.rea-link{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:1200;
}

#realisations img.logo{
	max-width:50%;
	max-height:50%;
	margin:10% 0 0 0;
}


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

/*SINGLE STYLES*/

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

.home.page h1{
	color:#000;
}

.single h1,
.page h1{
	text-align:center;
	color:#00a9b4;
	font-weight:400;
	margin:30px 0 60px;
}

.single h2{
	color:#00a9b4;
	font-weight:400;
	margin:30px 0 0 0;
}

.single h2.sub{
	text-align:center;
	color:#00a9b4;
	font-weight:400;
	margin:0;
}

.single a.voir{
	background:#8bc53f;
	color:#FFF;
	text-align:center;
	padding:2%;
	display:block;
	width:100%;
	text-transform:uppercase;
	font-size:20px;
}

.single a.voir:hover{
	background:#00a9b4;
	color:#FFF !important;
}

.single .content ul{
	list-style:none;
	padding:0;
}

.single .content ul li{
	border-bottom:1px solid #F1F1F1;
	padding:10px 0 10px 20px;
}


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

/*PAGE MAINTENANCE STYLES*/

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

.maintenance ul{
	list-style:none;
	padding:0 0 0 0;
}

.maintenance ul li{
	padding:5px 0;
}

.maintenance ul li span{
	border-bottom:1px solid #CCC;
	display:block;
}

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

/*FOOTER STYLES*/

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

footer{
	background:#333;
	color:#FFF;
	text-align:center;
	padding:2% 0;
}

footer a{
	color: #ffffff;
}


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

/*HOME STYLES*/

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


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

/*DEFAULT PAGE STYLES*/

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

.left {
	float: left;
	margin-right: 15px;
}

.right {
	float: right;
	margin-left: 15px;
}

.clear{
	clear:both;
}



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

/*COLUMNS*/

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

.col1, .col2, .col3, .col4, .col5, .col6, .col7,
.col8, .col9, .col10, .col11, .col12 {
     float: left; margin: 0 3% 0 0;
}

.col1.last, .col2.last, .col3.last, .col4.last,
.col5.last, .col6.last, .col7.last, .col8.last,
.col9.last, .col10.last, .col11.last, .col12 {
     margin: 0;
}

.last:after,
.row:after{
	content:'';
	clear:both;
	display:block;
}

.col1 { width: 5.5%; }
.col2 { width: 14%; }
.col3 { width: 22.5%; }
.col4 { width: 31%; }
.col5 { width: 39.5%; }
.col6 { width: 48%; }
.col7 { width: 56.5%; }
.col8 { width: 65%; }
.col9 { width: 73.5%; }
.col10 { width: 82%; }
.col11 { width: 90.5%; }
.col12 { width: 99%; margin: 0; }

.col1 img, .col2 img, .col3 img, .col4 img, .col5 img,
.col6 img, .col7 img, .col8 img, .col9 img, .col10 img,
.col11 img, .col12 img {
     width: 100%; height: auto; display: block;
}



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

/*MQ MAX-WIDTH 1025*/

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

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

/*MQ MAX-WIDTH 850*/

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

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

	h2 span{
		font-size:45px;
	}

	#sur-mesure{
		background: url(images/site-web-sur-mesure.jpg) no-repeat 70% center;
	}

	#sur-mesure .content{
		padding:3% 3% 26% 42%;
	}

}

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

	.menu-sidebar{
		width:60%;
		right:-60%;
	}

	#realisations .col{
		display:block;
		width:100%;
		height:60vh;
		border-right:10px solid #FFF !important;
	}

	.home #realisations .col:first-child{
		display:none;
	}

}


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

	#sur-mesure .content{
		padding:3%;
		height:auto;
	}

	#projet-contact a{
		width:60%;
	}
}

@media only screen and (max-width: 830px) {
	.home header h1{
		font-size:7vw;
	}
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col"] {
        width: 100%;
    }

	#realisations .col{
		display:block;
		width:100%;
		height:40vh;
	}

	#sur-mesure{
		background: url(images/site-web-sur-mesure.jpg) no-repeat 80% center;
		height:auto;
	}

	#sur-mesure .content{
		width:100%;
		padding:3%;
	}

	.menu-sidebar{
		width:100%;
		right:-100%;
	}
}

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

	.logo img{
		width:280px;
	}

	.home header{
		background: url(images/header-bg.jpg) no-repeat 0 center ;
	}

	.home.page h1{
		font-size: 10vw;
		text-align:center;
	}

	.home header h2,
	.home header h2 span{
		font-size: 12vw;
		text-align:center;
	}

	.home header h1{left:0;padding:0 3%;}

	.home header h1,
	.home header h2{
		padding:3%;
	}

	.home header h2{
		top:45%;
	}

	#projet-contact a{
		width:80%;
	}

	#projet-contact h2{
		font-size: 7vw;
	}
}

@media only screen and (max-width: 430px) {
	h1{
		font-size: 12vw;
	}
	header .logo img{
		width: 70%;
	}
	footer img.logo{
		width: 80%;
	}
}

@media only screen and (max-height: 630px) {
	#sur-mesure{
		height:auto;
	}
}