/**
*** SIMPLE GRID
*** (C) ZACH COLE 2016
**/
/* @import must be at top of file, otherwise CSS will not work */
/*
@import url("//hello.myfonts.net/count/3465ae");
*/

@font-face {font-family: 'CenturyGothicStd-Bold';src: url('webfonts/3465AE_0_0.eot');src: url('webfonts/3465AE_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3465AE_0_0.woff2') format('woff2'),url('webfonts/3465AE_0_0.woff') format('woff'),url('webfonts/3465AE_0_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'CenturyGothicStd';src: url('webfonts/3465AE_1_0.eot');src: url('webfonts/3465AE_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3465AE_1_0.woff2') format('woff2'),url('webfonts/3465AE_1_0.woff') format('woff'),url('webfonts/3465AE_1_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'DidotLTStd-Italic';src: url('webfonts/3465AE_2_0.eot');src: url('webfonts/3465AE_2_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3465AE_2_0.woff2') format('woff2'),url('webfonts/3465AE_2_0.woff') format('woff'),url('webfonts/3465AE_2_0.ttf') format('truetype');}

@font-face {font-family: 'DidotLTPro-Roman';src: url('webfonts/34E831_0_0.eot');src: url('webfonts/34E831_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/34E831_0_0.woff2') format('woff2'),url('webfonts/34E831_0_0.woff') format('woff'),url('webfonts/34E831_0_0.ttf') format('truetype');}

/* UNIVERSAL */

html,
body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	left: 0;
	top: 0;
	font-size: 100%;
	font-size: 14px;
	background: #f8efe2;
	background: -moz-linear-gradient(left, rgba(248,239,226,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(248,239,226,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(248,239,226,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8efe2', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

#bg{
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 0;
	background-image: url(left_bg.png), url(right_bg.png);
	background-size: auto 100%, auto 100%;
	background-position: left center, right center;
	background-repeat: no-repeat, no-repeat;
	background-attachment: fixed;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/

.preloader-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000000;
	background: #f8efe2;
	background: -moz-linear-gradient(left, rgba(248,239,226,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(248,239,226,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(248,239,226,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8efe2', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

.preloader-overlay > .preloader {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -1.5em;
    margin-left: -1.5em
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 3em;
  height: 3em;
}
.loader {
  margin: 0px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 0.4em solid rgba(149, 55, 6, 0.2);
  border-right: 0.4em solid rgba(149, 55, 6, 0.2);
  border-bottom: 0.4em solid rgba(149, 55, 6, 0.2);
  border-left: 0.4em solid #953706;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* ROOT FONT STYLES */

* {
	font-family: 'CenturyGothicStd', 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
	line-height: 1.5;
	color: #9f6f3d;
}

h4, h5 {
	font-family: 'DidotLTPro-Roman', Didot, 'Didot LT STD', 'Hoefler Text', Garamond, 'Times New Roman', serif;
}

/* TYPOGRAPHY */

h1 {
	font-family: 'CenturyGothicStd-Bold', 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
	font-size: 3.9rem;
	font-weight: normal;
	margin: 0;
	color: #953706;
}

h2 {
	font-family: 'CenturyGothicStd', 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
	font-size: 1.9rem;
	font-weight: 100;
	margin: 0
}

h3 {
	font-family: 'CenturyGothicStd-Bold', 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
	font-size: 1.6rem;
	font-weight: normal;
	margin: 0;
	color: #953706;
}

h4 {
	font-size: 2rem;
	line-height: 3rem;
  font-weight: normal;
}

h5 {
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: normal;
}

h6 {
	font-family: 'CenturyGothicStd-Bold', 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
	font-size: 1rem;
	font-weight: normal;
}

p {
  font-size: 1rem;
  font-weight: 200;
  line-height: 1.5;
  color: #9f6f3d;
}

a, a:visited, a:focus{
	text-decoration: none;
	color: #953706;
}

a:hover{
	text-decoration: none;
	color: #953706;
}

a.savoirPlus{
	-webkit-transition: .3s all;
	-o-transition: .3s all;
	transition: .3s all;
	font-family: 'DidotLTStd-Italic', Didot, 'Didot LT STD', 'Hoefler Text', Garamond, 'Times New Roman', serif;
	color: #568686;
	border: 1px solid #568686;
	padding: 0.4rem 0.8rem 0.25rem;
	display: inline-block;
	margin: 1rem 0;
}

a.savoirPlus:hover{
	background-color: #568686;
	color: #fff;
}

.solutionsTitle{
	line-height: 1.8rem;
}

a.racines{
	font-size: 0.9rem;
	text-decoration: underline;
}

.font-light {
  font-weight: 300;
}

.font-regular {
  font-weight: 400;
}

.font-heavy {
	font-family: 'CenturyGothicStd-Bold', 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
	font-weight: normal;
}

.vert{
	color: #568686;
}

.brun,
.brun *{
	color: #9f6f3d;
}

/* POSITIONING */

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.justify {
  text-align: justify;
}

.centered{
	display: flex;
	justify-content: center;
	align-items: center;
}

header{
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 100;
}

.experiences header{
	position: fixed;
}

section{
	width: 100%;
	z-index: 3;
}

footer{
	position: absolute;
	bottom: 20px;
	right: 20px;
	z-index: 99;
	text-align: right;
}

.experiences footer{
	position: fixed;
}

.mention_legales footer{
	position: relative;
	padding-bottom: 20px;
}

#site_title{
	font-family: 'CenturyGothicStd-Bold', 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
	font-weight: normal;
	position: absolute;
	left: 20px;
	top: 20px;
	font-size: 1.2rem;
}

ul.default {
	list-style: none;
	position: relative;
	padding-left: 0;
	margin-left: 2rem;
}

ul.default li{
	margin: 0.5rem 0;
}

ul.default li:before {
	content: "•";
	position: absolute;
	left: -1rem;
	color: #568686;
}

#menu{
	position: absolute;
	right: 20px;
	top: 20px;
}

.responsiveItem,
.racineImgMobile,
#menu ul li.responsiveItem {
	display: none;
}

#blackballoon{
	text-indent: -9999px;
	display: block;
	background-image: url(blackballoon.png);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	height: 26px;
	width: 26px;	
	left: 0;
	right: 0;
	bottom: 60px;
	margin: auto;
}

a#responsiveMenu {
  display: none;
  width:24px;
  height: 24px;
  cursor: pointer;
  text-decoration: none;
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 133;
}

a#responsiveMenu i {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 2px;
  color:#9c4416;
  font:bold 14px/.4 Helvetica;
  text-transform: uppercase;
  text-indent:-55px;
  background: #9c4416;
  transition:all .2s ease-out;
}

a#responsiveMenu i::before, a#responsiveMenu i::after {
  content:'';
  width: 24px;
  height: 2px;
  background: #9c4416;
  position: absolute;
  left:3px;
  transition:all .2s ease-out;
}

a#responsiveMenu i::before { top: -10px; }
a#responsiveMenu i::after { bottom: -10px; }
a#responsiveMenu:hover i::before { left: 0px; }
a#responsiveMenu:hover i::after { left: 0px; }
a#responsiveMenu.active i { background: rgba(255,255,255,0); }

a#responsiveMenu.active i::before {
  background: #fff;
  top:0;
  left:3px;
  -webkit-transform: rotateZ(45deg);
     -moz-transform: rotateZ(45deg);
      -ms-transform: rotateZ(45deg);
       -o-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}

a#responsiveMenu.active i::after {
  background: #fff;
  bottom:0;
  left:3px;
  -webkit-transform: rotateZ(-45deg);
     -moz-transform: rotateZ(-45deg);
      -ms-transform: rotateZ(-45deg);
       -o-transform: rotateZ(-45deg);
          transform: rotateZ(-45deg);
}


.home #menu:before,
.experiences #menu:before,
.missions #menu:before{
	content: "";
	position: absolute;
	height: 80px;
	width: 10px;
	background-image: url(top_home.png);
	background-size: contain;
	left: -150px;
	top: -20px;
	display: block;
}

.experiences #menu:before{
	background-image: url(top_experiences.png);
	left: -120px;
}

.missions #menu:before{
	background-image: url(top_missions.png);
}

#menu ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.pageTitle{
	font-size: 3rem;
}

.preload_img {
    position:absolute; z-index:-1;
    opacity: 0;
    text-indent: -99999px;
}

.contact .pageTitle{
	font-size: 2.2rem;
}

.contact h2{
	font-size: 1.4rem;
}

#menu ul li{
	display: inline-block;
}

#menu ul li a{
	display: inline-block;
	position: relative;
	padding: 0 0.5em;
	margin: 0 0.5em;
}

#menu ul li a:after{
	-webkit-transition: .3s all;
	-o-transition: .3s all;
	transition: .3s all;
	content: "";
	overflow: hidden;
	position: absolute;
	left: 0;
	bottom: -2px;
	display: inline-block;
	width: 0;
	height: 2px;
	background: #568686;
}

#menu ul li a:hover:after,
#menu ul li a.active:after{
	width: 100%;
}

.number{
	font-family: 'Didot LT STD', 'Hoefler Text', Garamond, 'Times New Roman', serif;
	font-size: 1.3rem;
}

.intro {
	margin-bottom: 3rem;
}

ul.mission_menu{
	list-style: none;
	margin: 0;
	text-align: center;
	margin-bottom: 4rem;
	padding: 0;
}

ul.mission_menu li {
	display: inline-block;
	padding: 2rem 1rem;
	border-bottom: 1px solid #568686;
	position: relative;
}

ul.mission_menu li a{
	-webkit-transition: all 400ms;
	-moz-transition: all 400ms;
	-o-transition: all 400ms;
	transition: all 400ms;
	border-radius: 50%;
	width: 4rem;
	height: 4rem;
	line-height: 4rem;
	color: #b9aa91;
	border: 2px solid #b9aa91;
	font-family: 'Didot LT STD', 'Hoefler Text', Garamond, 'Times New Roman', serif;
	font-size: 2rem;
	display: block;
}

ul.mission_menu li a:hover{
	color: #fff;
}

ul.mission_menu li a.active{
	color: #fff;
}

ul.mission_menu li a.active:after{
	content: "";
	width: 0; 
	height: 0; 
	position: absolute;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid #568686;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

a.btn_01:hover {
	background-color: #bc6f2c;
	border-color: #bc6f2c;
}

a.btn_02:hover {
	background-color: #38717e;
	border-color: #38717e;
}

a.btn_03:hover {
	background-color: #165b26;
	border-color: #165b26;
}

a.btn_04:hover {
	background-color: #5c543d;
	border-color: #5c543d;
}

a.btn_05:hover {
	background-color: #573d5c;
	border-color: #573d5c;
}

a.btn_06:hover {
	background-color: #8c0c2a;
	border-color: #8c0c2a;
}

a.btn_07:hover {
	background-color: #99635b;
	border-color: #99635b;
}

ul.mission_menu li a.active{
	color: #fff;
}

a.btn_01.active{
	background-color: #bc6f2c;
	border-color: #bc6f2c;
}

a.btn_02.active{
	background-color: #38717e;
	border-color: #38717e;
}

a.btn_03.active{
	background-color: #165b26;
	border-color: #165b26;
}

a.btn_04.active{
	background-color: #5c543d;
	border-color: #5c543d;
}

a.btn_05.active{
	background-color: #573d5c;
	border-color: #573d5c;
}

a.btn_06.active{
	background-color: #8c0c2a;
	border-color: #8c0c2a;
}

a.btn_07.active{
	background-color: #99635b;
	border-color: #99635b;
}

.mission_num {
	display: none;
	position: absolute;
}

#all_missions{
	position: relative;
	width: 940px;
	margin: auto;
}

.mission_circle{
	width: 340px;
	height: 340px;
	min-width: 340px;
	min-height: 340px;
	background-size: contain;
	background-repeat: no-repeat;
	text-align: center;
	position: relative;
	margin-right: 40px;
}

.mission_circle.mission_01{
	background-image: url(mission_01.png)
}

.mission_circle.mission_02{
	background-image: url(mission_02.png)
}

.mission_circle.mission_03{
	background-image: url(mission_03.png)
}

.mission_circle.mission_04{
	background-image: url(mission_04.png)
}

.mission_circle.mission_05{
	background-image: url(mission_05.png)
}

.mission_circle.mission_06{
	background-image: url(mission_06.png)
}

.mission_circle.mission_07{
	background-image: url(mission_07.png)
}

.mission_circle p {
	color: #fff;
	font-size: 1.8rem;
	position: relative;
	z-index: 2;
}

.mission_circle img{
	position: absolute;
	z-index: 1;
}

.missions section, 
.mention_legales section{
	padding: 6% 0;
	position: relative;
}

.mention_legales .pageTitle{
	margin-bottom: 6rem;
}

.mention_legales p{
	text-align: justify;
}

.missions p a,
.mention_legales p a{
	color: #568686;
	text-decoration: underline;
}

.contact_bureau{
	width: 65%;
	height: 65%;
	position: relative;
	margin-right: 80px;
}

.contact_content{
	width: 35%;
	height: 35%;
}

#deco_left{
	position: fixed;
	width: 15%;
	height: 100vh;
	left: 0;
	pointer-events: none;
	z-index: 2;
}

#deco_right{
	position: fixed;
	width: 15%;
	height: 100vh;
	right: 0;
	pointer-events: none;
	z-index: 2;
}

.mention_legales #deco_right,
.mention_legales #deco_left{
	width: 22%;
}

.experiences #deco_right{
	width: 7.5%;
}

.experiences #deco_right img{
	height: 80vh;
}

#deco_right img, #deco_left img{
	height: 90vh;
	width: auto;
}

/* ==== Fancybox ==== */
.fancybox_element{
	padding: 3rem 8rem !important;
	display: none;
	background-color: #568686;
	border-radius: 10px;
	overflow: initial !important;
}

.fancybox-container div.fancybox-navigation{
	width: 50%;
	max-width: 900px;
	position: relative;
}

div.fancybox-inner{
	display: flex;
	justify-content: center;
	align-items: center;
}

.fancybox-arrow {
	background-color: #55827f !important;
    -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSI0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgNGwtMS40MSAxLjQxTDE2LjE3IDExSDR2MmgxMi4xN2wtNS41OCA1LjU5TDEyIDIwbDgtOHoiLz48L3N2Zz4=) no-repeat 50% 50%;
    mask: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSI0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgNGwtMS40MSAxLjQxTDE2LjE3IDExSDR2MmgxMi4xN2wtNS41OCA1LjU5TDEyIDIwbDgtOHoiLz48L3N2Zz4=) no-repeat 50% 50%;
	-webkit-mask-size: 50%;
	mask-size: 50%;
}

.fancybox-arrow:after{
    background-image: none !important;
}

.fancybox-slide div.fancybox_element{
	background-color: #faf4ea;
	width: 50%;
	max-width: 900px;
}

.fancybox-container .fancybox-bg,
.fancybox-container.fancybox-is-open .fancybox-bg {
	background-color: #55827f;
	opacity: 0.92;
}

.fancybox-arrow{
	opacity: 1 !important;	
}

.fancybox-arrow[disabled]{
	opacity: 0 !important;
}

.fancybox-arrow:after{
	background-color: transparent !important;
}

.close{
	-webkit-transition: all 400ms;
	-moz-transition: all 400ms;
	-o-transition: all 400ms;
	transition: all 400ms;
	position: absolute;
	cursor: pointer;
	top: 0px;
	right: -40px;
	width: 30px;
	height: 30px;
	overflow: hidden;
	opacity: 1;
}

.close:hover{
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}

.close:before, 
.close:after{
	content: '';
	position: absolute;
	height: 2px;
	width: 100%;
	top: 50%;
	left: 0;
	margin-top: -1px;
	background: #fff;
}

.close:before{
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

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

/* ==== GRID SYSTEM ==== */

.container {
  width: 70%;
  max-width: 1250px;
  margin-left: auto;
  margin-right: auto;
}

.half{
	width: 50%;
	height: 100vh;
	display: inline-block;
	vertical-align: top;
	position: absolute;
	top: 0;
}

.half_left{
	position: fixed;
}

.experiences .half_left{
	background-image: url(experiences.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left 30%;
}

.half_right{
	right: 0;
}

.half_right .container{
	padding-top: 12rem;
	padding-bottom: 5rem;
}

.fader {
	z-index: 1;
    position: fixed;
    width: 50%;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(top, rgba(252,250,245,1) 15%, rgba(252,250,245,0) 22%, rgba(252,250,245,0) 85%, rgba(252,250,245,1) 95%);
    background: -webkit-linear-gradient(top, rgba(252,250,245,1) 15%, rgba(252,250,245,0) 22%, rgba(252,250,245,0) 85%, rgba(252,250,245,1) 95%);
    background: -moz-linear-gradient(top, rgba(252,250,245,1) 15%, rgba(252,250,245,0) 22%, rgba(252,250,245,0) 85%, rgba(252,250,245,1) 95%);
    pointer-events: none;
}

.row {
  position: relative;
  width: 100%;
}

.row [class^="col"] {
  float: left;
  margin: 0.5rem 2%;
  min-height: 0.125rem;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  width: 96%;
}

.col-1-sm {
  width: 4.33%;
}

.col-2-sm {
  width: 12.66%;
}

.col-3-sm {
  width: 21%;
}

.col-4-sm {
  width: 29.33%;
}

.col-5-sm {
  width: 37.66%;
}

.col-6-sm {
  width: 46%;
}

.col-7-sm {
  width: 54.33%;
}

.col-8-sm {
  width: 62.66%;
}

.col-9-sm {
  width: 71%;
}

.col-10-sm {
  width: 79.33%;
}

.col-11-sm {
  width: 87.66%;
}

.col-12-sm {
  width: 96%;
}

.row::after {
	content: "";
	display: table;
	clear: both;
}

.hidden-sm {
  display: none;
}

@media only screen and (max-width: 540px) {  /* 540px */
  .container {
    width: 80%;
  }
}

@media only screen and (min-width: 720px) {  /* 720px */
  .col-1 {
    width: 4.33%;
  }

  .col-2 {
    width: 12.66%;
  }

  .col-3 {
    width: 21%;
  }

  .col-4 {
    width: 29.33%;
  }

  .col-5 {
    width: 37.66%;
  }

  .col-6 {
    width: 46%;
  }

  .col-7 {
    width: 54.33%;
  }

  .col-8 {
    width: 62.66%;
  }

  .col-9 {
    width: 71%;
  }

  .col-10 {
    width: 79.33%;
  }

  .col-11 {
    width: 87.66%;
  }

  .col-12 {
    width: 96%;
  }

  .hidden-sm {
    display: block;
  }
}

@media only screen and (max-width: 960px) { /* 960px */
  .container {
    width: 85%;
    max-width: 60rem;
  }
}


/*
//---------------------------
//----- Media Query
//---------------------------
*/

/* ----------- 27 inch Screens ----------- */
@media screen 
  and (min-width: 1680px) { 
	

}

/* ----------- 27 inch Screens ----------- */
@media screen 
  and (min-width: 2400px) { 
	
}

/* ----------- 24 inch Screens ----------- */
@media screen 
  and (min-width: 1920px) 
  and (max-width: 2400px) { 
}

/* ----------- 15 inch Screens ----------- */
@media screen 
  and (min-width: 1681px) 
  and (max-width: 1920px) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-width: 1281px) 
  and (max-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
	  
}

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-width: 1281px) 
  and (max-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}


/* macbook */
@media screen and (max-width: 1500px) {

	.contact .pageTitle{
		font-size: 1.8rem;
	}
	
	.contact h2{
		font-size: 1.1rem;
	}
	
	.fancybox-slide div.fancybox_element,
	.fancybox-container div.fancybox-navigation{
		width: 70%;
	}
	
	#all_missions{
		width: 100%;
	}
	
	.solutions br.hideBR{
		display: none;
	}
}



/* iPad landscape */
@media screen and (max-width: 1024px) {
	#menu:before{
		content: none !important;
	}
	
	.mission_circle{
		width: 300px;
		height: 300px;
		min-width: 300px;
		min-height: 300px;
	}
}

/* iPad Portrait */
@media screen and (max-width: 768px) {
	a#responsiveMenu,
	.responsiveItem,
	#menu ul li.responsiveItem {
		display: block;
	}
	
	footer{
		display: none;
	}
	
	a#site_title{
		font-size: 1.6rem;
		text-decoration: none !important;
		color: #953706;
	}
	
	#menu {		
		-webkit-transition: .3s all;
		-o-transition: .3s all;
		transition: .3s all;
		text-align: center;
		background-color: #c56d3d;
		background-image: url(menu_bg.png);
		background-size: auto 100%;
		background-position: center;
		background-repeat: no-repeat;
		width: 40%;
		height: 100%;
		top: 0;
		right: -100%;
		z-index: 100;
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.menu-open #menu{
		right: 0;
	}
	
	#menu ul li{
		display: block;
		margin: 5rem auto;
	}
	
	#menu ul li a{
		color: #fff;
		font-size: 1.2rem;
		text-decoration: none !important;
	}
	
	#bg{
		height: 100%;
		width: 100%;
		background-image: url(left_bg.png);
		background-size: auto 100%;
		background-position: left center;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}
	
	.fancybox-slide div.fancybox_element,
	.fancybox-container div.fancybox-navigation{
		width: 80%;
	}
	
	.close{
		top: -40px;
		right: 0px;
	}
	
	.contact_content{
		flex-direction: initial;
		display: block;
	}
	
	.contact_bureau,
	.contact_content{
		width: 100%;
		margin: auto;
	}
	
	.contact_bureau{
		margin-bottom: 4rem;
		display: block;
	}
	
	#henri_travert{
		display: none;
	}
	
	.home .col-4{
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	
	.fader{
		display: none;
	}
	
	.half{
		width: 100%;
		position: initial;
		height: initial;
	}
	
	.experiences header{
		position: absolute;
	}
	
	.experiences .half_left{
		background-position: left 20%;
	}
	
	.half_left{
		height: 40vh;
	}
	
	.half_right .container{
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
	
	.home h1,
	.missions h1{
		padding-top: 10rem;
	}
	
	.home .container {
		padding-bottom: 5rem;
	}
	
	body.centered{
		align-items: initial;
	}
	
	body.racines.centered,
	body.contact.centered {
		align-items: center;
	}
	
	.racines img{
		padding: 8rem 0 6rem;
	}
	
	#deco_right,
	#deco_left {
		display: none;
	}
	
	ul.mission_menu{
		padding-top: 3rem;
	}
	
	#all_missions{
		width: 100%;
	}
	
	.mission_content{
		width: 50vw;
	}
	
	.mission_circle{
		min-width: 240px;
		min-height: 240px;
		width: 30vw;
		height: 30vw;
		margin: 0;
		padding-right: 40px;
	}
	
	ul.mission_menu li a{
		text-decoration: none !important;
	}

	.mention_legales h1{
		padding-top: 6rem;
	}
	
	.mention_legales .col-2{
		display: none;
	}
	
	.mention_legales .col-8{
		width: 100%;
	}
}

/* iPhone 6+ landscape */
@media screen and (max-width: 736px) and (orientation: landscape) {
	html,
	body{
		font-size: 12px;
	}
	
	h1{
		font-size: 2.9rem;
	}
	
	#menu ul li{
		margin: 2rem auto;
	}
	
	#blackballoon{
		bottom: 20px;
	}
	
	.half_left{
		height: 50vh;
	}
	

	
	.solutions br.hideBR{
		display: block;
	}
	
	.experiences .half_left {
		background-image: url(experiences_mobile.jpg);
	}
	
	.racines img{
		padding: 4rem 0 0;
	}
	
	.centered.contact_content{
		display: flex;
	}
	
	.contact_bureau{
		margin-bottom: 0;
	}
	
	.mention_legales .pageTitle{
		padding-top: 2rem;
		margin-bottom: 2rem;
	}
	
	.home h1{
		padding-top: 8rem;
	}
	
	.missions h1{
		padding-top: 2rem;
	}
	
	ul.mission_menu{
		padding-top: 1rem;
	}
	
	.mission_num{
		padding-bottom: 2rem;
	}
	
	.fancybox-slide div.fancybox_element, .fancybox-container div.fancybox-navigation{
		width: 95%;
	}
	
	.fancybox_element{
		padding: 3rem 4rem !important;
	}
}

/* iPhone 6 landscape */
@media screen and (max-width: 667px) and (orientation: landscape) {
	.mission_circle{
		min-width: 200px;
		min-height: 200px;
	}
	
	.mission_circle p{
		font-size: 1.4rem;
	}
}

/* iPhone 5 + 5s Landscape */
@media screen and (max-width: 568px) and (orientation: landscape) {
	
	#menu ul li{
		margin: 1.5rem auto;
	}
	
	ul.mission_menu li{
		padding: 2rem 0.6rem;
	}
	
	.mission_circle {
		padding-right: 20px;
		min-width: 180px;
		min-height: 180px;
	}
}

/* iPhone 4s Landscape */
@media screen and (max-width: 480px) {
	html,
	body{
		font-size: 12px;
	}
	
	.container{
		width: 90%;
	}
	
	.home h1{
		padding-top: 8rem;
		font-size: 2.5rem;
	}
	
	h1{
		font-size: 2.9rem;
	}
	
	.fancybox-navigation{
		display: none !important;
	}
	
	.fancybox-slide div.fancybox_element, .fancybox-container div.fancybox-navigation{
		width: 90%;
	}
	
	.fancybox_element {
		padding: 2rem !important;
	}
	
	.racineImg{
		display: none;
	}
	
	.racineImgMobile{
		display: block;
	}
	
	.racines img{
		padding: 8rem 0 2rem;
	}
	
	#menu{
		width: 60%;
	}
	
	#menu ul li{
		margin: 4rem auto;
	}
	
	.half_left{
		height: 50vh;
	}
	
	.missions h1{
		padding-top: 4rem;
	}
	
	.mission_num{
		overflow: hidden;
	}
	
	ul.mission_menu{
		padding-top: 1rem;
		margin-bottom: 1rem;
	}
	
	ul.mission_menu li{
		padding: 1rem 0.4rem 2rem;
	}
	
	ul.mission_menu li a{
		width: 3rem;
		height: 3rem;
		line-height: 3rem;
		font-size: 1.8rem;
	}
	
	#all_missions .row.centered{
		display: block;
	}
	
	.mission_circle{
		display: block;
		background-image: none !important;
		height: auto;
		min-height: 10px;
		width: 100%;
		padding-right: 0;
	}
	
	.mission_circle p{
		color: #568686;
	}
	
	.missions .mission_content{
		width: 80%;
		left: 0;
		right: 0;
		margin: auto;
	}
	
	.contact_bureau {
		padding-bottom: 2rem;
		margin-bottom: 0;
	}
	
	.centered .contact_content img{
		width: 80% !important;
	}
}

/* iPhone 6+ portrait */
@media screen and (max-width: 414px) {
	
	a#site_title{
		text-align: center;
		width: 100%;
		left: 0;
	}
	
	ul.mission_menu li a{
		width: 2.8rem;
		height: 2.8rem;
		line-height: 2.8rem;
		font-size: 1.6rem;
	}
	
	.missions .container{
		width: 95%;
	}
	
	.missions .mission_content{
		width: 90%;
	}
}

/* iPhone 6 Portrait */
@media screen and (max-width:375px) {

	ul.mission_menu li{
		padding: 1rem 0.2rem 2rem;
	}
	
	ul.mission_menu li a{
		width: 2.6rem;
		height: 2.6rem;
		line-height: 2.6rem;
		font-size: 1.4rem;
	}
}

/* iPhone 4S + 5 + 5s Portrait */
@media screen and (max-width: 320px) {
	
	#menu ul li{
		margin: 3rem auto;
	}
	
	#blackballoon{
		bottom: 30px;
	}

}