.contentpage{width: calc(100% - 100px);left:100px;position: relative;}
 .caption_banner{
    z-index: 999;
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0px;
    left: 0px;
}

/*.caption_banner:after{content:"";width:50%;height:100vh;left:0px;top:0px;background: rgba(105, 167, 20, 0.8);position: absolute;}
.caption_banner:before{content:"";width:50%;height:100vh;right:0px;top:0px;background: rgba(2, 45, 98, 0.50);position: absolute;}
*/



.biglogo{
    position: absolute;
    height: 100vh;
    right: 0px;
    width: 100%;
    z-index: 1111;
    display: flex;
    align-items: center;
    justify-content: center;
}
.biglogo a{
    display: block;
    padding: 30px;
}
.biglogo img{max-width:100%;}
.blocklogo{display:block;}

.boxpresentation{background: rgba(1,42,93,1);
background: -moz-linear-gradient(top, rgba(1,42,93,1) 0%, rgba(8,63,132,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(1,42,93,1)), color-stop(100%, rgba(8,63,132,1)));
background: -webkit-linear-gradient(top, rgba(1,42,93,1) 0%, rgba(8,63,132,1) 100%);
background: -o-linear-gradient(top, rgba(1,42,93,1) 0%, rgba(8,63,132,1) 100%);
background: -ms-linear-gradient(top, rgba(1,42,93,1) 0%, rgba(8,63,132,1) 100%);
background: linear-gradient(to bottom, rgba(1,42,93,1) 0%, rgba(8,63,132,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#012a5d', endColorstr='#083f84', GradientType=0 );padding:40px;overflow: hidden;color: #fff;display:flex;max-height: 565px;padding-right: 0px;}
.innerlettre{left:0px;top:0px;}
.titlepage{
    font-size: 50px;
    position:relative;
    margin: 20px 0px;
    padding: 0 20px;
    display: inline-block;
    font-family: ubuntu;
    font-weight: 700;
}

.boxrealisation .titlepage:after{content:"";height: 1px;width: 100%;background: #69a714;width: 135%;display: block;position: absolute;bottom: 22px;left: -134%;}
.boxrealisation .titlepage:before{content:"";background: #69a714;width: 15px;height: 15px;display: block;border-radius: 50%;position: absolute;left: 0;bottom: 20px;}

.boxpresentation  .titlepage {display:block !important;}
.boxcontact .titlepage {display:block !important;}
.boxpresentation .btn_link{margin-top:35px;}
.boxpresentation .titlepage:after{content:"";height: 1px;width: 100%;background: #fff;width: 80%;display: block;position: absolute;bottom: 22px;right: 0px;}
.boxpresentation .titlepage span:before{content:"";background: #fff;width: 0px;height: 15px;display: block;border-radius: 50%;position: absolute;right: -10px;bottom: 20px;}

.boxpresentation .titlepage span{
    background: #022d62;
    padding-right: 20px;
    position: relative;
    z-index: 11;
}


.light{color: #fff;}
.center{text-align:center;}
.right {
    text-align: right;
    display: block;
    width: 100%;
}
.val{color:#fff;font-size:17px;line-height:23px;margin-right: 50px;text-align: justify;margin-top: 30px;margin-bottom: 30px;}
.btn_link {
    background: #fff;
    display: table;
    padding: 15px 35px;
    color: #022d62;
    font-size: 15px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.3s ease all;border:1px solid transparent;
}
.btn_link:hover{color:#fff;background:#022d62;border:1px solid #fff;text-decoration:none;}
.innerbox{padding: 20px 0px;}
.boxrealisation{padding: 80px 0px 0pX;background:url(../images/realisation.jpg) no-repeat;background-size: cover;background-position: 0px 28%;text-align: center;}

.boxrealisation .titlepage{margin-bottom:80px;}

.blocrealisation{display:flex;flex-wrap:wrap;}
.item{padding:0px;overflow: hidden;/* flex: 1; */}
.vert{background: rgba(101,160,19,1);
background: -moz-linear-gradient(top, rgba(101,160,19,1) 0%, rgba(130,196,38,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(101,160,19,1)), color-stop(100%, rgba(130,196,38,1)));
background: -webkit-linear-gradient(top, rgba(101,160,19,1) 0%, rgba(130,196,38,1) 100%);
background: -o-linear-gradient(top, rgba(101,160,19,1) 0%, rgba(130,196,38,1) 100%);
background: -ms-linear-gradient(top, rgba(101,160,19,1) 0%, rgba(130,196,38,1) 100%);
background: linear-gradient(to bottom, rgba(101,160,19,1) 0%, rgba(130,196,38,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#65a013', endColorstr='#82c426', GradientType=0 );transition: 0.3s ease all;}
.vert:hover{background:#022d62}
.bleu{background: rgba(1,42,93,1);
background: -moz-linear-gradient(top, rgba(1,42,93,1) 0%, rgba(8,63,132,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(1,42,93,1)), color-stop(100%, rgba(8,63,132,1)));
background: -webkit-linear-gradient(top, rgba(1,42,93,1) 0%, rgba(8,63,132,1) 100%);
background: -o-linear-gradient(top, rgba(1,42,93,1) 0%, rgba(8,63,132,1) 100%);
background: -ms-linear-gradient(top, rgba(1,42,93,1) 0%, rgba(8,63,132,1) 100%);
background: linear-gradient(to bottom, rgba(1,42,93,1) 0%, rgba(8,63,132,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#012a5d', endColorstr='#083f84', GradientType=0 );color:#fff;transition: 0.3s ease all;}
.bleu:hover{background:#69a714;}
.centerbtn{margin:0 auto;padding: 15px 40px;}
.text{
    display: flex;
    align-items: center;
    padding:20px;
    font-size:40px;
    color:#fff;
    font-weight: lighter;
}
.text a {color:#fff;text-decoration:none;}
.boxcaption{
    position: absolute;
    width: 100%;
    background: rgba(0, 0, 0, 0.40);
    height: 100%;
    left: 0px;
    z-index: 11;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    overflow:hidden;
}

.boxcaption>div{
    text-align: center;
    margin: 0px 40px;
    width: auto;
}
.item img{
    height: -webkit-calc(100% + 50px);
    height: 100%;
    opacity: 0.7;
    -webkit-transition: all 0.35s, -webkit-transform 0.35s;
    transition: all 0.35s, transform 0.35s;
    width: 100%;
    }

.titlecaption {position:relative;color:#69a714;text-transform:uppercase;display:block;font-size: 30px;-webkit-transition-delay: 0.25s;transition-delay: 0.25s;-webkit-transition: all 0.3s cubic-bezier(0.86,0,0.07,1);-moz-transition: all 0.5s cubic-bezier(0.86,0,0.07,1);-o-transition: all 0.5s cubic-bezier(0.86,0,0.07,1);transition: all 0.3s cubic-bezier(0.86,0,0.07,1);}

.titlecaption a{color:#69a714;text-decoration:none;}

.boxcaption p{position:relative;color:#fff;font-weight:400;color:#fff;-webkit-transition-delay: 1s;transition-delay: 1s;-webkit-transition: all 0.3s cubic-bezier(0.86,0,0.07,1);-moz-transition: all 0.5s cubic-bezier(0.86,0,0.07,1);-o-transition: all 0.5s cubic-bezier(0.86,0,0.07,1);transition: all 0.3s cubic-bezier(0.86,0,0.07,1);}


.item:hover p{opacity:0}
.item:hover .boxcaption{background: rgba(0, 0, 0, 0.10);}
.item:hover img{
    -webkit-transform: translate3d(0,0,0);
    transform: scale(1.1);
    opacity: 1;
    }
	
.text span:after{content: "\f178";font: normal normal normal 14px/1 FontAwesome;font-size: 1em;margin-left: 15px;}	
	
.boxcontact{background: rgba(101,160,19,1);
background: -moz-linear-gradient(top, rgba(101,160,19,1) 0%, rgba(130,196,38,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(101,160,19,1)), color-stop(100%, rgba(130,196,38,1)));
background: -webkit-linear-gradient(top, rgba(101,160,19,1) 0%, rgba(130,196,38,1) 100%);
background: -o-linear-gradient(top, rgba(101,160,19,1) 0%, rgba(130,196,38,1) 100%);
background: -ms-linear-gradient(top, rgba(101,160,19,1) 0%, rgba(130,196,38,1) 100%);
background: linear-gradient(to bottom, rgba(101,160,19,1) 0%, rgba(130,196,38,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#65a013', endColorstr='#82c426', GradientType=0 );padding: 20px 40px;overflow: hidden;color: #fff;display:flex;max-height: 565px;}

.boxcontact .val{font-weight:lighter;display: flex;}
.boxcontact .val strong{display:inline-block;margin-right:25px;width:60px;}
.boxcontact .titlepage:after{content:"";height: 1px;width: 90%;background: #fff;display: block;position: absolute;bottom: 22px;right: 0px;}
.boxcontact .titlepage span:before{content:"";background: #fff;width: 15px;height: 15px;display: block;border-radius: 50%;position: absolute;right: -11px;bottom: 20px;}
.boxcontact .titlepage span{
    background: #69a714;
    padding-right: 20px;
    position: relative;
    z-index: 11;
}


.boxpartenaire{background:#f5f5f5;height:220px;}
.footer{background:#e5e5e5;padding:40px 15px;}



@supports (-webkit-background-clip: text) {
.lettre {
 
margin: 0 0 0 4px;
 
font-size: 35vw;
 
-webkit-background-clip: text;
 
background-clip:text;
 
color: transparent;
 
-webkit-background-clip: text;
 
-webkit-text-fill-color: transparent;
 
font-family:"ClarendonLTStd-Bold";
 
background-image: url('../images/p.jpg');
 
background-blend-mode: overlay;
 
background-size: 100%;
 
position: relative;
 
letter-spacing: 4px;
 
background-position:100% 50%;
 
transform-style: preserve-3d;
 
animation: lettre 5s infinite alternate ease-in-out -7.5s;
 
animation-fill-mode: forwards;
 
transform: translateY(-23%);
 
transition:0.75s ease all;
  &:before {
 
content: "Gravity \a Falls";
 
letter-spacing: 4px;
 
white-space: pre;
 
position: absolute;
 
top: 0;
 
left: 0;
 
z-index: -1;
  }
  &:after {
 
content: "Gravity \a Falls";
 
letter-spacing: 4px;
 
white-space: pre;
 
position: absolute;
 
top: 0;
 
left: 5px;
 
z-index: -2;
  }
 
font-family: 'Alfa Slab One', cursive;
 
font-family: ubuntu;
}
}

@supports not (-webkit-background-clip: text) {
.lettre {
      font-size: 500px;  filter: url('http://allart.biz/up/photos/album/S-T-U/Ivan%20Ivanovich%20Shishkin/shishkin_ivan_3_pine_forest_in_viatka_province.jpg'); /* applique le filtre */
    }

}


.lettre:hover{background-position:100% 100%;}

@keyframes lettre {
  100% { transform: translateY(-18%) ; }
}
@-webkit-keyframes  lettre {
  100% { transform: translateY(-18%); }
}


@media (max-width: 1400px)
{

.boxcontact{max-height: 450px;padding: 20px 40px;}
}


@media (max-width: 1360px)
{

.boxpresentation .titlepage:after{}
 .boxpresentation .titlepage:before{right:39%;} 
}



@media (max-width: 992px)
{
.boxcontact .titlepage:after{display:none;}
.boxpresentation .titlepage:after{width:40%;display:none;}
 .boxpresentation .titlepage:before{right: -10%;} 
 .boxpresentation .titlepage {
    display: inline-block;
    font-size:45px;
}
.titlepage{font-size: 35px;margin: 10px 0px;}
.titlecaption:after {

    height: 30px;}

.text{font-size:25px;}


}

@media (max-width: 767px)
{
.btn_link{margin:0 auto;}
  
  .val{margin-right:0px;}
.titlepage{font-size:30px !important;text-align: center;}
.titlepage span:before{display:none !important;}
.innerbox{padding: 15px 0px;}

  .boxpresentation{padding:15px ;}
  .boxcontact{padding:15px;}
.blocrealisation {
   
flex-direction: row-reverse;
   
flex-direction: column-reverse;
}

.item {
   
    max-height: 450px;
}
.contentpage {
    width: 100%;
    left: 0px;
    top: 100px;
}
.caption_banner:before{display:none;}
.caption_banner:after{width:100%;height: 100%;}
.biglogo{display:none;}
.caption_banner{height:400px;}
}



.partenaire{
    background: #f5f5f5;
}