@font-face {
font-family: 'Champagne & Limousines';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines'), url('Champagne & Limousines.woff') format('woff');
}



@font-face {
font-family: 'Champagne & Limousines Bold';
font-style: normal;
font-weight: normal;
src: local('Champagne & Limousines Bold'), url('Champagne & Limousines Bold.woff') format('woff');
}











html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	position: relative;
}
* {position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
	clear: both;
}
a {
	color: inherit;
    transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
}


a img {
	border: none;
}
body, html {
	width: 100%;
	height: 100%;
}
body {
   color: #333333;
   font-size: 17px;
   margin-bottom: 120px;
   line-height: normal;
   font-family: 'Raleway', sans-serif;
   background: #03363c;

}
p {
	margin-bottom: 18px;
	display: block;    line-height: normal;
}


h2 {
    font-size: 16px;
    margin-bottom: 30px;
}



.insplash h1, .introh1 {
    font-size: 42px;margin-bottom: 18px;
font-family:'Champagne & Limousines Bold';
}

.littleh1 {
    font-size: 30px;    display: block;
font-family:'Champagne & Limousines';font-weight:normal;

}






.normalh3 {
     margin-bottom: 18px;
    display: block;
    line-height: normal;
    font-size: 17px;
    font-weight: normal;
}








.titre {
    margin: 0px 0 40px 0;
    font-size: 26px;
    display: block;

    width: auto;
	text-align:left;
    font-weight: 400;
    color: #182b42;
    text-transform: uppercase;
    
}





.titre.blanc {
color:#ffffff;
}

.titre.blanc.trait:after {
    width: 50%;
}




.menu strong, .titre strong, #footer h4 , .detail h4 strong{ font-weight:900;
}


.peudoh4 {
    font-weight: 900;
    margin-bottom: 0;
	
}


.trait {    padding-bottom: 30px;
}

.trait:before {
    display: block;
    position: absolute;
    bottom: 0;
    content: "";
    width: 60px;
    height: 4px;
    background-color: #5dcebe;
}
.trait:after {
    display: block;
    position: absolute;
    bottom: 4px;
    content: "";
    width: 100%;
    height: 1px;
    background-color: #5dcebe;
}
/**********************HAMBURGER MENU SLIDE***********/

.hamburger {
    font-size: 30px;
    display: none;
    position: fixed;
    z-index: 9999999;
    opacity: 1;
    width: 70px;
    padding: 31px;
    padding: 20px 20px;
    cursor: pointer;
    transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    vertical-align: middle;
    left: 0;
    top: 8px;
    /* background: #fff; */
    border: 0 none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.hamburger:focus {
   outline:none;
  box-shadow: none;
}





.hamburger::-moz-focus-inner {
 padding: 0;
 border: 0 none;
}
.hamburger:focus {
	outline: 0;
}
.hamburger:before, .hamburger:after {
	content: "";
}
.hamburger:before, .hamburger .icon, .hamburger:after {
	display: block;
	width: 100%;
	height: 4px;
	margin: 0 0 5px;
	transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	border-radius: .05em;
	background: #4de7d2;
}
.hamburger.dark:before, .hamburger.dark .icon, .hamburger.dark:after {
	background: #ff5851;
}
.hamburger:hover .icon {
	transform: translate(2px, 0px);
}
.hamburger:hover:before {
	transform: translate(-2px, 0px);
}
.hamburger:hover:after {
	transform: translate(-2px, 0px);
}
.hamburger.active .icon {
	transform: translate(-7px, 8px) rotate(135deg) scaleX(-0.34);
}
.hamburger.active:before {
	transform: translate(5px, 5px) rotate(135deg) scaleX(0.6);
}
.hamburger.active:after {
	transform: translateY(-8px) rotate(-135deg);
}


.parallax {
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
   background-attachment:scroll
}

/***HEADER *****************/

.content {
    /* background: red; */
    margin-top: 103px;
}





header {
    margin: 0px auto 0px auto;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
    height: 103px;
    background: #03363c;
    transition: top 0.4s ease-in-out;
}

.welcome {
height: 500px;
    padding: 0;
    background-image: url(images/nuages.jpg);
}

.insplash {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding: 8px 30px;
    color:#24615f;
    top: 50%;
    background-color: rgba(34,22,15,0);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.insplash a{ text-decoration:none}

.bloc {
    width: 100%;
    max-width: 1330px;
    padding: 0px 60px;
    margin: 0 auto;
    display: block;
}


 .content .bloc{
    padding: 40px 60px;
}



.infos {
    color: white;
    display: inline-block;
    padding: 39px 60px 60px 60px;
    position: absolute;
    text-align: right;
    z-index: 10;
    right: 0;
    background: #103a3c;
    background: -moz-linear-gradient(45deg, #2f736e 0%,#50f1db 100%);
    background: -webkit-linear-gradient(45deg, #2f736e 0%,#50f1db 100%);
    background: linear-gradient(45deg, #2f736e 0%,#50f1db 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f736e', endColorstr='#50f1db',GradientType=1 );
}


.infos .bouton {
    /* position: relative; */
    margin-top: auto;
    right: 20px;
    bottom: -30px;
}


.nav-up {
    top: -310px;
}


#access {
    display: inline-block;
    margin: 0px 0 0px 0px;

}

#access li, #access a {
    display: inline-block;
}



a.bouton, .bouton {
       position: absolute;
    right: -50px;
    /* right: 94%; */
    white-space: nowrap;
    background: #03363c;
    padding: 24px 40px;
    font-weight: 900;
    z-index: 999999999;
    font-size: 16px;
    margin-top: -40px;    box-shadow: 0px 0px #03363c;
    color: #fff;
    /* color: inherit; */
    text-decoration: none;
    transition: all .2s ease;
    -moz-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
}

a.bouton:hover {
	 color: #03363c; background: #ffffff;    box-shadow: 4px 4px #03363c;
}





#access a {
    color: #fff;
    display: block;
    z-index: 1;
    vertical-align: middle;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 14px;
    padding: 40px 20px;
    /* margin-right: 40px; */
    position: relative;
    text-decoration: none;
}
#access a.first {
    padding: 40px 20px 40px 0px;
}
#access a:hover, #access a.active {
color:#4de5d0
}


.acces {
    background: transparent url(images/flnextbleu.svg) right center no-repeat;
    padding-right: 60px;    font-weight: 700;
    text-decoration: none;    transition: all .2s ease;
    -moz-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
}

.acces:hover {
    padding-right: 75px;
}
/*****CONTENT**************/

 .line.entete{
    padding: 140px 60px;
	color:#fff;
	
	background:#03363c url(images/arbre.jpg) right top no-repeat;
}










.entete .txt1 {
	width: 80%;
    line-height: normal;
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 80px;
    display: block;
    line-height: normal;
}

.entete .txt2 {
    width: 60%;
    margin-bottom: 66px;
    display: block;
    line-height: normal;
    font-weight: normal;
    font-size: 17px;
}


.next { cursor:pointer;	    display: inline-block;
	    padding: 20px;
	    -webkit-animation: bounce 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate;
	    -moz-animation: bounce 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate;
	    animation: bounce 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate;
}

@keyframes bounce {
 0% {
 bottom: 0px;
}
 20% {
 bottom: 28px;
}
 100% {
 bottom: 50px;
}
}

.qui {
    background-image: url(images/severine-daoudal.jpg);
    /* background-size: 70%; */
    background-position-x: left!important;
    background-size: 80%!important;
    height: 640px;
    background-repeat: no-repeat;
    z-index: 5;
    /* width: 80%; */
}
#basequi {
    top: -180px;
}

.quiright {

width: 50%;

display: inline-block;

/* position: absolute; */

background: #fff;

padding: 50px 80px 60px 80px;

top: -100px;

display: inline-block;

/* height: 560px; */

float: right;
}


.quiright .bouton {
    /* position: relative; */
    margin-top: auto;
    left: auto;
    bottom: -30px;
    right: auto;
}


.pourquoi {
		background:#c1f3f9 url(images/circle.png) left bottom no-repeat;
		padding: 240px 0 250px 0;
		margin-top: -120px;
		color: #03363c;
}

 .txth2, .txt1{
    font-size: 16px;
    margin-bottom: 30px;
    font-weight: bold;}


.pourquoi .txth2, .pourquoi .txt1{
width:80%;}



ul.col {
       list-style-type: none;

 
    display: inline-block;
    vertical-align: top;

}


.col li {
    list-style-type: none;
    margin-left: 1em;
    list-style-position: outside;
    padding: 0px 0 5px 0px;
    text-indent: -11px;
}
.moitie {   width: 40%;}

.col li:before {
content: '- ';
}

.line.services {
        text-align: right;
        /* background: #c2f3fa; */
        margin-top: 0;
        /* margin-top: -80px; */
}

.vide, .plein {display: inline-block;/* height:20px; */background-color: white;}


.service {

    display: inline-block;
    max-width: 33.33%;
    float: left;
    margin-top: -110px;    margin-bottom: 100px;
    /*  */
}

.line.services .bloc {
    padding: 0px 0px;
    max-width: 100%;
    display: block;
    background: #ffffff;
    /* overflow: hidden; */
    height: 600px;
}

.service a {
    display: inline-block;
    vertical-align: top;
    line-height: 0;text-decoration: none;
}
.services img {
    max-width: 100%;
    height: auto;
}

.services .before {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
	opacity:0;
   transition: .5s all;

}





.services img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: all .4s ease;
}




.service a:hover {
 text-decoration: underline;
}
.service a:hover img {
    filter: contrast(1.4);
}






/*
.service a:hover .before {
opacity:.4;
}
*/


.titreservices {
    width: 100%;
    max-width: 1330px;
    padding: 0px 60px;
    margin: 0 auto;
    display: block;
    margin-top: -180px;
    margin-bottom: 140px;
}
.detail {
    text-align: left;
    padding: 40px 40px 20px 0;
    max-width: 100%;
}


.detail a { text-decoration:none}

.detail h4 {
	text-transform:uppercase;     line-height: normal;
	    margin-bottom: 28px; color:#182b42
}

.detail .flnext {

    position: relative;
    display: inline-block;
    padding: 20px 10px 10px 0px;
}



/*****FOOTER**************/
.wrappfooter {
    display: block;
    padding: 100px 0 0px 0px;
   margin-bottom: 60px; 
    background: #103a3c;
    background: -moz-linear-gradient(45deg, #103a3c 0%, #53baac 100%);
    background: -webkit-linear-gradient(45deg, #103a3c 0%,#53baac 100%);
    background: linear-gradient(45deg, #103a3c 0%,#53baac 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#103a3c', endColorstr='#53baac',GradientType=1 );
}


.wrappfooter:after {
    display: inline-block;
    position: absolute;
    bottom: 0;
    content: "";
    width: 100%;
    max-width: 100%;
    /* max-width: 1350px; */
    height: 62px;
    z-index: 0;
    background: #03363c;
}




#footer {
    max-width: 1200px;
    margin: 0 auto 0px auto;
    padding: 0px 60px;
    overflow: auto;
    z-index: 1;
}
.footerright {
    width: 50%;
    display: inline-block;
    /* position: absolute; */
    background: #fff;
    padding: 50px 80px 20px 80px;
    display: inline-block;
    /* height: 560px; */
    float: right;
}

#footer .footerleft {
    width: 50%;
    padding: 0px 0 0px 0px;
    vertical-align: top;
    display: inline-block;
    float: left;
}

.bottomfooterleft {
    bottom: 30px;
    left: 60px;
    color: #3f8f86;
    position: absolute;
    float: left;
    bottom: 0;
    width: 42%;
    font-size: 13px;
    padding: 0px 0 20px 0px;
    vertical-align: top;
    display: inline-block;
}

.bottomfooterleft a{
	text-decoration:none
	
}

.bottomfooterleft a:hover{
    color: #fff;
}

.infooterleft img {
    max-width: 200px; height:auto;
    width: 100%;
    margin: 30px 0 0 110px;
}
.social { 
    /*text-align: right;
    float: right;*/
}
.social a {text-decoration: none;
    margin: 0 0 0 0px;}





a.icofacebook svg {
    fill: #03363c;
    width: 60px;
    height: 60px;    transition: all .2s ease;
    -moz-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
}
.social a:hover svg{fill: #459f94;}



.effect {
    transition: all 1s cubic-bezier(0, 0, 0, 1);
}

.blocright {
    width: 50%;
    display: inline-block;
    position: absolute;
    background: #fff;
    padding: 50px 80px 60px 80px;
    top: -100px;
    display: inline-block;
        right: 0;
}

/*
.page .line.entete {
	background-position:right 10%;    padding: 60px 60px;
}
*/

.page .entete .txt1 {
    margin-bottom: 20px;
}


.page .line.entete .txt2 {
    margin-bottom: 46px;
}


.bloc.autre {
    color: white;
}

.autre {
      margin-top: 70px;
    margin-bottom: 50px;
}


.autre a {
    text-decoration: none;text-transform: uppercase;
    display: block;
    margin-top: 6px;    transition: all .4s ease;
    -moz-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
}

.autre a:hover {
    color:#5dcebe
}

.titreautre {
    font-size: 18px;
    margin-bottom: 22px;
    font-weight: bold;
    display: inline-block;
}

.autre .titre.blanc.trait:after {
    width: 140%;
}

.autre .trait:after {
    width: 140%;
}



@media only screen and (max-width: 1070px) {
	
	.qui {
	background-size: cover!important;
}

ul.col {
    width: 48%;
}

.hamburger {
    display: inline-block;
}

.bloc.enete.show {
    padding: 0;
}
.infos
{
    /* display: block; */
    /* position: relative; */
}
header {
    position: relative;
    height: 80px;
}

.content {
    margin-top: 0;
	}


#access {
    background: #03363c;
    display: inline-block;
    margin: 0px 0 0px 0px;
    width: 100%;
    position: fixed;
    padding: 80px;
    /* z-index: -1; */
    top: -400px;
    transition: all .4s ease;
    -moz-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
}
ul#access.move {
    top: 0;
}
#access li, #access a {
    display: inline-block;
    margin: 0px 0 0px 0px;
    background: #03363c;
    width: 100%;font-size: 16px;
}

#access a, #access a.first {
    padding: 10px 10px;
}
.footerright {

    padding: 50px 70px 20px 50px;
}

.line.entete {
    background: #03363c url(images/arbre.jpg) right 80px no-repeat;
}



#footer {
overflow:hidden	
}





}


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

.welcome {
    height: 440px;
}
.line.entete {
   /* padding: 50px 20px 60px 20px;*/
    padding: 10px 20px 10px 20px;
	
}
	
	.line.entete.prix {
   padding: 70px 20px 70px 20px;
	
}
	
	

.entete .txt1,
.entete .txt2 {
    width: 90%;

}

.quiright {
    width: 60%;
    padding: 50px 60px 60px 60px;
}

.pourquoi {
    padding: 140px 0 250px 0;
}




.wrappfooter {
    padding: 60px 0 0px 0px;
}


.footerright ,
#footer .footerleft {
    width: 100%;
    float: none;
}

.infooterleft {
    text-align: center;
    margin: 0 0 100px 0;
}

a.logofooter {
    display: block;
    margin-top: 50px;
}

.footerright {

    padding: 50px 70px 20px 50px;
}

.bottomfooterleft {
    float: none;
    width: 100%;
    text-align: center;
    left: auto;
    position: relative;    bottom: 0px;
}
.infooterleft img {
    margin: 0 auto;
}

.titre.blanc.trait:after {
    width: 100%;
}

/*
.page .infos {display:none;
}


.page .line.entete {
    padding: 0 60px 60px 60px;
}*/
}


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

.welcome {
    height: 590px;
}

	
	.welcome.nomobile  {
        height: 140px;
        background-image: none;
}

	
	.welcome.nomobile .insplash {
   display:none;
}

	
	
	

.infos {
    padding: 20px 20px 50px 30px;
}


.parallax{
	background-attachment:scroll

}






.insplash img {
    max-width: 230px;
}


.content .bloc {
    padding: 0px 20px;
}

.entete .txt1 {
    width: 100%;
    font-size: 19px;    margin-bottom: 40px;
	
}

.entete .txt2 {
    margin-bottom: 0px;
}
.next {display:none;}

#basequi {
    top: 80px;
}

.quiright {
    width: 100%;
    padding: 40px 40px 60px 40px;
       top: 380px;
}
.pourquoi {
    padding: 60px 0 250px 0;  margin-top: 220px;
}
 .txth2, .pourquoi .txt1 {
    width: 100%;
}
ul.col {
    width: 100%;
}

.titreservices {
    padding: 0px 40px;
}
.titre {
    font-size: 23px;
}

.wrappfooter {
    padding: 40px 0 40px 0px;
}


.infooterleft {
    margin: 0 0 40px 0;
}









#footer {

    padding: 0px 40px;
}

.footerright {
    padding: 40px 40px 20px 40px;
}

	/*
.social {
    float: none;
    margin: 20px auto;
    text-align: left;
}
*/

.social a {
    text-decoration: none;
    margin: 0 0 0 0px;
    display: block;
}



.wrappfooter {
    margin-bottom: 0;
}
.wrappfooter:after {
content:none;	
}


.entete .txt1, .entete .txt2 {
    width: 100%;
}

#pourquoi .bloc {
    padding: 0 40px;
}

.footerright .bouton {
        position: relative;
        margin: 20px 0 20px 0;
        right: auto;
        display: block;
}



.vide, .plein {
    display: inline-block;
    width: 100%!important;
}

.service {
    display: block;
    max-width: 100%;
    padding: 20px 40px;
	}


.titreservices {
    margin-top: -200px;
    margin-bottom: 100px;
}

.detail {
    padding: 10px 20px 20px 0;
    max-width: 100%;
}
.detail .flnext {    float: right;
    padding: 0px 0px 10px 0px;
}
#access {
    z-index: 20;    padding: 80px 46px;
}
a.bouton, .bouton {
    padding: 19px 30px;
    font-size: 15px; text-align:center
}
.infooterleft img {
    max-width: 200px;
}



.insplash h1 {
    font-size: 36px;
}

.insplash h2 {
    font-size: 26px;
}

}



@media only screen and (max-width: 330px) {
.titre {
    font-size: 20px;
}

.insplash h1 {
    font-size: 32px;
}

.insplash h2 {
    font-size: 22px;
}

.insplash img {
    max-width: 200px;
}

.detail h4 {
    margin-bottom: 12px;


}

.footerright .bouton {
    padding: 15px 0px;
    text-align: center;
    font-size: 15px;
    right: auto;
}





}