@CHARSET "ISO-8859-1";
/* Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
a{
	text-decoration:none;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#3f5364;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}

img, object, iframe {
    display: block;
    height: auto;
    max-width: 100% !important;
}
/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
  -webkit-box-sizing: border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
	}
/* Custom CSS
 * --------------------------------------- */
a, a:focus, a:hover, a:visited,body{
	font-family: Arial, helvetica;
            color: #3f5364;
}

.wrap{
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	position: relative;
}
h1{
	font-size: 6em;
}
p{
	font-size: 2em;
}
.section{
	text-align:left;
}
video::-webkit-media-controls {
    display:none !important;
}
	/* Style for our header texts
	* --------------------------------------- */
#fullpageWrapper {
  animation-duration: 1s;
  animation-delay: 1.5s;
  -webkit-animation-duration: 1s;
 -webkit-animation-delay: 1.5s;
  -moz-animation-duration: 1s;
 -moz-animation-delay: 1.5s;
}
/*PREMIERE SECTION*/
	.videoPlayer{
		position: absolute;
		right: 0;
		bottom: 0;
		top:0;
		right:0;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
 		background-color: black; /* in case the video doesn't fit the whole page*/
  		background-image: /* our video */;
  		background-position: center center;
  		background-size: contain;
   		object-fit: cover; /*cover video background */
        opacity: 1 !important;
   		z-index:3;
	}



	/* Layer with position absolute in order to have it over the video
	* --------------------------------------- */

	#section6 .layer, #section0 .layer{
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        transform: translate3d(0px, 0px, 0px);
        padding: 40px 25px;
        width: 100%;
        z-index: 4;
    		/* 
		* Preventing flicker on some browsers 
		* See http://stackoverflow.com/a/36671466/1081396  or issue #183
		*/
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}

	/*solves problem with overflowing video in Mac with Chrome */
	#section0{
		overflow: hidden;
        height: 540px;
	}

#logoCentralIntro {
    margin: 25vh 5%;
    position: absolute;
    text-align: center;
    width: 90%;
}
img.logoALTAVIA {
    display: inline-block;
    height: auto;
    max-width: 180px !important;
}
.first, .second, .third, .fourth {visibility: hidden}
.first.animated, .second.animated, .third.animated, .fourth.animated {visibility: visible}
p.first {
    color: #ffffff;
    font-size: 10px;
    
}
h1 {
    color: #ffffff;
    font-size: 30px;
    font-weight: bold;
    line-height: 40px;
    margin: 9vh 0 12vh;
}
h2 {
    color: #ffffff;
    font-size: 11px;
    line-height: 14px;
    
}
div.wraplinkworkplace {
    max-width: 600px;
}
a.linkworkplace  {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid rgba(255,255,255,0.5);
    color: #ffffff;
    display: block;
    font-size: 17px;
    height: 55px;
    line-height: 55px;
    margin: 5vh auto;
    padding-left: 17px;
    text-align: center;
    width: 255px;
}
a.linkworkplace  span {
    float: left;
}
a.linkworkplace  img {
    float: left;
    height: 27px;
    margin: 14px 0.7vh;
    width: 134px;
}
a.linkworkplace.in {
  animation: playlinkworkplacein .2s steps(4) forwards;
    }
    @keyframes playlinkworkplacein { 0% {
                
    border: 1px solid rgba(255,255,255,0.5);
    }
            100% {
                
    border: 1px solid rgba(255,255,255,1);
    }
         }

a.linkworkplace.out {
  animation: playlinkworkplaceout .2s steps(4) forwards;
    }
    @keyframes playlinkworkplaceout {
            0% {
                
    border: 1px solid rgba(255,255,255,1);
    }
            100% {
                
    border: 1px solid rgba(255,255,255,0.5);
    }
         }
	/* Hiding video controls 
	* See: https://css-tricks.com/custom-controls-in-html5-video-full-screen/
	* --------------------------------------- */
	video::-webkit-media-controls {
	  display:none !important;
        }
        .button {
            display: none;
        }
    .button.animated {
    background: rgba(0, 0, 0, 0) url("../medias/flecheanim.png") repeat scroll left top / 232px auto;
    bottom: 7%;
    display: block;
    height: 58px;
    left: 50%;
    margin-left: -29px;
    opacity: 0.5;
    position: absolute;
    text-indent: -999em;
    width: 58px;
    animation-delay: 1s;
 -webkit-animation-delay: 1s;
 -moz-animation-delay: 1s;
        }
        .second.animated,
        .third.animated {
  animation-delay: .5s;
 -webkit-animation-delay: .5s;
 -moz-animation-delay: .5s;

        }
        .first.animated {
  animation-delay: 0s;
 -webkit-animation-delay: 0s;
 -moz-animation-delay: 0s;

        }
       #section0 .fourth.animated {
  animation-delay: 1.5s;
 -webkit-animation-delay: 1.5s;
 -moz-animation-delay: 1.5s;
 }
       #section0 .fourth.animated.in {
  animation-delay: 0s;
 -webkit-animation-delay: 0s;
 -moz-animation-delay: 0s;
 }

    .button.in {
  animation: playbuttonin .5s steps(4) forwards;
    }
    @keyframes playbuttonin {
            100% {
                opacity: 1;
                background-position: -232px top; }
         }
    .button.out {
  animation: playbuttonout .5s steps(4) forwards;
    }
    @keyframes playbuttonout {
            0% {
                opacity: 1; }
            100% {
                opacity: 0.5; }
         }
         
         
    /*BLOC INTRO SECTION 1*/
    .intro {
        padding: 20px 25px;
        text-align: center;
    }
    .intro p {
        font-size: 12px;
        line-height: 1.8;
    }
    .intro a.tweet span.fleche {
        background: rgba(0, 0, 0, 0) url("../medias/fleche.png") no-repeat scroll left center / 30px auto;
    display: block;
    position: absolute;
    right: 3%;
    top: 1vh;
    width: 16px;
    }
    .intro a.tweet:hover span.fleche {
        background-position: right center;
    }
    
    .intro a.tweet {
    border: 1px solid #9fa9b1;
    color: #3f5364;
    display: block;
        font-size: 17px;
    margin: 15px auto;
    max-width: 255px;
    padding: 1vh 0;
    position: relative;
    width: 80%;
    }
a.tweet.HoverLink.in {
  animation: playtweetHoverin .2s steps(4) forwards;
    }
    @keyframes playtweetHoverin { 0% {
                
    background-color: rgba(0, 0, 0, 0);
    }
            100% {
                
    background-color: rgba(0, 172, 237,1);
    color: #ffffff;
    }
         }

a.tweet.HoverLink.out {
  animation: playtweetHoverout .2s steps(4) forwards;
    }
    @keyframes playtweetHoverout {
           
            100% {
                
    background-color: rgba(0, 0, 0, 0);
    color: #3f5364;
    }
         }
    /*BLOC INTRO SECTION 1*/
    
    /*BLOC REALISATIONS SECTION 2*/
    /* Backgrounds will cover all the section
	* --------------------------------------- */
	.section{
		background-size: cover;
	}
	.slide{
		background-size: cover;
	}
    #section2{
		background-image: url(../medias/bg2.jpg);
	}
    .realisation {
    background-color: rgba(255, 255, 255, .9);
    margin: 30px auto;
    min-height: 170px;
    padding: 10px;
    text-align: right;
    width: 200px;            
    }
    .realisation .border {
    min-height: 150px;
    padding: 50px 35px 35px 0;
    position: relative;
    }
   .realisation .fleche {
        background: rgba(0, 0, 0, 0) url("../medias/flechereal.png") no-repeat scroll left center / 12px auto;
    display: block;
    position: absolute;
    right: 20px;
    top: 70px;
    width: 12px;
    }
    
    .realisation h3 {
        font-size: 13px;
        line-height: 1;
    }
    .realisation h2 {
        color: #3f5364;
        font-size: 16px;
        font-weight: 700;
        margin: 10px 0;
    }
    .realisation p {
        font-size: 11px;
        line-height: 1.2;
	}
    /*BLOC REALISATIONS SECTION 3*/
	#section3{
		background-image: url(../medias/bg3.jpg);
	}
    /*BLOC REALISATIONS SECTION 4*/
	#section4{
		background-image: url(../medias/bg4.jpg);
	}
    .punchLine {
        font-size: 20px;
        padding: 2.75% 0;
        text-align: center;
	}
    .punchLine h3 {
        font-weight: 700;
    }
    #section5 .fp-tableCell {
        float: left;
    }
    /*TEAM LILLE / Section 6*/
    #section6 .videoContainer {height: 80%;    float: left;
    height: 56.25vw;
    max-height: 80vh;
    overflow: hidden;
    position: relative;
    width: 100%;
    }
    #section6 .layer,
    #section6 .videoPlayer {
    height: 56.25vw;
    width: 100%; 
    }
    #section6 .layer {
        max-height: 80%;
        position:  static;
    }
    #section6 .fp-tableCell {
        display: table-cell;
        vertical-align: top; 
    }
    #section6 .videoPlayer {
    /*position: relative;*/
    }
    #section6 #logoCentralOutro {
        float: left;
    height: 20%;
    position: static;
    text-align: center;
    width: 100%;
    }
    #section6 .logoALTAVIA {
    display: inline-block;
    height: auto;
    margin: 5vh auto;
    width: auto;
    }
    #section6 a.linkworkplace  {
        width: 300px;
    }
    /* 1st Media querie 600px*/
@media only screen and (min-width:600px) {
        #logoCentralIntro {
            margin: 30vh 27.5%;
            position: absolute;
            text-align: center;
            width: 45%;
        }
        .standardLayer,#section6 .layer, #section0 .layer{
                    padding: 7vh 3.6%;
                }
        p.first {
            color: #ffffff;
            font-size: 30px;
            
        }
        h1 {
            color: #ffffff;
            font-size: 4.4vw;
            font-weight: bold;
            line-height: 120px;
            /*margin: 60px 0 80px;*/
        }
        h2 {
            color: #ffffff;
            font-size: 25px;
            line-height: 30px;
            
        }
        a.linkworkplace  {
            font-size: 40px;
            height: 95px;
            line-height: 95px;
            margin: 10vh auto;
            padding-left: 45px;
            width: 600px;
        }
        a.linkworkplace  span {
            float: left;
        }
        a.linkworkplace  img {
            float: left;
            height: 51px;
            margin: 23px 1vh;
            width: 255px;
        }
#section6 a.linkworkplace  {
    width: 600px;
}
    /*BLOC INTRO SECTION 1*/
      
        .intro p , .intro a.tweet {
    font-size: 13px;
    margin: 15px auto;
        }
        .intro a.tweet span.fleche {
            background-size: 16px auto;
            width: 8px;
        }
    /*BLOC INTRO SECTION 1*/

        .punchLine {
        font-size: 25px;
    }
     /*BLOC REALISATIONS SECTION 2*/

    .realisation {
    margin: 110px auto 110px 48%;
    min-height: 170px;
    padding: 2%;
    text-align: right;
    width: 40%;            
    }
    .realisation .border {
    border: 0 none;
    padding: 32% 20% 32% 0;
    position: relative;
    }
   .realisation .fleche {
    background-size: cover;
    display: block;
    height: 10%;
    position: absolute;
    right: 9.6%;
    top: 46%;
    width: 6%;
    }
    
    .realisation h3 {
        font-size: 40px;
        font-size: 2.1vw;
    }
    .realisation h2 {
        font-size: 60px;
        font-size: 3.1vw;
        margin: 30px 0;
    }
    .realisation p {
        font-size: 25px;
        font-size: 1.3vw;
    }

} /*Media querie 600px*/
   /*Media querie 768px*/
@media only screen and (min-width:768px) {
      .intro p ,.intro a.tweet {
    font-size: 16px;
        }
        .intro a.tweet span.fleche {
            background-size: 20px auto;
            width: 10px;
        }
        .punchLine {
        font-size: 32px;
    }


}/*Media querie 768px*/
   /*Media querie 1024px*/
@media only screen and (min-width:1024px) {
      .intro p ,.intro a.tweet {
    font-size: 21px;
        }.intro a.tweet {
    margin: 25px auto;
        }
        .intro a.tweet span.fleche {
            background-size: 26px auto;
            width: 13px;
        }
        .punchLine {
        font-size: 43px;
    }


}/*Media querie 768px*/
   /*Media querie 768px*/
@media only screen and (min-width:1280px) {
    
     .intro p ,.intro a.tweet {
    font-size: 27px;
        }.intro a.tweet {
    margin: 30px auto;
        }
        .intro a.tweet span.fleche {
            background-size: 32px auto;
            width: 16px;
        }
        .punchLine {
        font-size: 53px;
    }


}/*Media querie 768px*/
/*Media querie 768px*/
@media only screen and (min-width:1960px) {
    
     .intro p,.intro a.tweet {
    font-size: 40px;
        }
        .intro a.tweet span.fleche {
            background-size: 50px auto;
            width: 25px;
        }
    /*BLOC INTRO SECTION 1*/

        .punchLine {
        font-size: 80px;
    }


}/*Media querie 768px*/

@media only screen and (max-height:480px)  and  (orientation : landscape) {
    h1,
a.linkworkplace  {
    margin: 1vh auto;
	}
}
@media only screen and (max-height:800px)  and  (orientation : landscape) {
    h1,
a.linkworkplace  {
    margin: 7vh auto;
	}
}