@charset "utf-8";

/*FONT-------------------------------------------------------*/

@font-face {
  font-family: "Helvetica-Regular";
  src: url("../media/font/HelveticaNowDisplay-Regular.ttf");
}

@font-face {
  font-family: "Helvetica-Medium";
  src: url("../media/font/HelveticaNowDisplay-Medium.ttf");
}

@font-face {
  font-family: "Helvetica-Bold";
  src: url("../media/font/HelveticaNowDisplay-Bold.ttf");
}

@font-face {
  font-family: "Helvetica-Medium";
  src: url("../media/font/HelveticaNowDisplay-Medium.ttf");
}

/*FONT-------------------------------------------------------*/

/*RESETER-------------------------------------------------------*/

*{
    box-sizing: border-box;
}

p{
    margin: 0;
    padding: 0;
    color: white;
}

.page {
    height: 100vh;
    height: calc(100vh - 100px );
}


html, body, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6{
    display: inline-block;
    color: white;
}

h2, h3, h4, p, a{
    font-family: 'Helvetica-Medium';
}

h2{
    font-size: 2em;
}

html{
    height: 100%;
}

body {
    height: 100%;
    width: 100%;
    background-color:  transparent;
}

a{
    text-decoration: none;
}


a:hover{
    text-decoration: none;
    color: black;
}

.ctnr-home{
    margin-bottom: 50px;
}

.ctnr-home-projets{
    margin-bottom: 50px;
    margin-top: 90px;
}

/*RESETER-------------------------------------------------------*/

/*SCROLL BAR----------------------------------------------------*/

::-webkit-scrollbar {                                   
    width: 8px;
    height: 5px;
    background:#161616;
}

::-moz-scrollbar {                                   
    width: 8px;
    height: 5px;
    background:#161616;
}

::-ms-scrollbar {                                   
    width: 8px;
    height: 5px;
    background:#161616;
}

::-o-scrollbar {                                   
    width: 8px;
    height: 5px;
    background:#161616;
}

::-webkit-scrollbar-thumb{
    width: 8px;
    height: 5px;
    background:#ff1261;
}

::-moz-scrollbar-thumb{
    width: 8px;
    height: 5px;
    background:#ff1261;
}

::-ms-scrollbar-thumb{
    width: 8px;
    height: 5px;
    background:#ff1261;
}

::-o-scrollbar-thumb{
    width: 8px;
    height: 5px;
    background:#ff1261;
}

/*SCROLL BAR----------------------------------------------------*/

/*TITLE ARTICLE-------------------------------------------------*/

h2{
    color:white;
    margin-bottom: 15px;
    letter-spacing: .02em;
}

.orange{
    color:#ffdc2e;
}

/*TITLE ARTICLE-------------------------------------------------*/

/*HIDDEN MENU---------------------------------------------------*/

.hidden-menu{
    display: flex;
    position: fixed;
    z-index: 2;
    width: 100%;
    height:100vh;
    background-color: black;

    transform: translateX(-115%);
    -webkit-transform: translateX(-115%);
    -moz-transform: translateX(-115%);
    -ms-transform: translateX(-115%);
    -o-transform: translateX(-115%);

    transition: all .8s cubic-bezier(0.75,-0.02, 0.32, 0.95);
    -webkit-transition: all .8s cubic-bezier(0.75,-0.02, 0.32, 0.95);
    -moz-transition: all .8s cubic-bezier(0.75,-0.02, 0.32, 0.95);
    -ms-transition: all .8s cubic-bezier(0.75,-0.02, 0.32, 0.95);
    -o-transition: all .8s cubic-bezier(0.75,-0.02, 0.32, 0.95);
}

.hidden-menu-opened{
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
}

.hidden-nav-mobile{
    width: auto;
    height: auto;
    margin: auto;
}

.hidden-nav-li{
    display: block;
}

#hidden-nav-ul{
    position:absolute;
    margin:0;
    padding:0;
    left: 12%;
    top: 29%;
}

.link-hidden-menu{
    font-family: 'Helvetica-bold';
    color: #000000;
    text-decoration: none;
    font-size: 3em;
    letter-spacing: .015em;
}

li.hidden-nav-li {
    margin-top: 1.em;
}

li.hidden-nav-li{
    transition: all .4s ease;
}

li.hidden-nav-li:hover {
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);  
}

.hidden-menu.hidden-menu-opened {
    position: fixed;
    background-color:#ffdc2e;
}

a.link-hidden-menu{
    position:relative;
}

/*HIDDEN MENU---------------------------------------------------*/

/*LOAD---------------------------------------------------*/

.load{
    display: flex;
    position: fixed;
    z-index: 1000;
    width: 100%;
    height:100vh;
    background-color: black;
    transition: 1s cubic-bezier(0.42, 0, 0, 0.99);

    transform:translateX(0%);
    -webkit-transform:translateX(0%);
    -ms-transform:translateX(0%);
    -moz-transform:translateX(0%);
    -o-transform:translateX(0%);
    
}

.load-logo {
    height: auto;
    width: 30%;
    position: absolute;
    top: 50%;
    left: 50%;

    transform:translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
    
}

.load-out{
    transition: 1s;

    transform:translateX(100%);
    -webkit-transform:translateX(100%);
    -ms-transform:translateX(100%);
    -moz-transform:translateX(100%);
    -o-transform:translateX(100%);
}

.load-in{
    transform:translateX(-100%);
    -webkit-transform:translateX(-100%);
    -ms-transform:translateX(-100%);
    -moz-transform:translateX(-100%);
    -o-transform:translateX(-100%);
}

/*LOAD---------------------------------------------------*/

/*HEADER--------------------------------------------------------*/

.site{
    background-color: black;
}

.gradiant {
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 16%;
    background-color: yellow;
    background: linear-gradient(-90deg, rgba(0, 0, .9), rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
    background: -webkit-linear-gradient(-90deg, rgba(0, 0, .9), rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
    background: -o-linear-gradient(-90deg, rgba(0, 0, .9), rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
    background: -moz-linear-gradient(-90deg, rgba(0, 0, .9), rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}

.header{
    padding-top: 30px;
    padding-bottom: 150px;
    width: 100%;
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
}

.bg-header-active{
    background: transparent;
}

.nav-header {
    width: 100%;
    top: 0;
}

.logo-container {
    padding-left: 2%;
}

.row-nav{
    width: 100%;
    display: table;
}

.logo-container, .burger-area{
    display: table-cell;
    vertical-align: middle;
}

.burger-area{
    text-align: right;
}

.logo-pseudo{
    width: 50px;
    fill: #ffdc2e;
    stroke: #ffdc2e;
    transition: .5s;
}

.logo-pseudo-active{
    fill: black;
}

.burger-container{
    padding: 5px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}

.string{
    width: 1.5em;
    height: .15em;
    margin-bottom: 0.35em;
    background-color:#ffdc2e;
    transition: all .4s;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
}

.st-first-active{
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    background-color: black;
}

.st-md-active{
    opacity: 0;
}

.st-last-active{
    transform: translateY(-16px) rotate(-45deg);
    -webkit-transform: translateY(-16px) rotate(-45deg);
    -moz-transform: translateY(-16px) rotate(-45deg);
    -ms-transform: translateY(-16px) rotate(-45deg);
    -o-transform: translateY(-16px) rotate(-45deg);
    background-color: black;
}

a.top-link.back-top {
    color: #ffdc2e;
    transition: .2s ease;
}

a.top-link.back-top:hover {
    color: #ff1261;
}

/*HEADER--------------------------------------------------------*/

/*LEFT FIXED BAR------------------------------------------------*/

.left-side-bar{
    position: fixed;
    display: flex;
    height: 100vh;
    padding: 0 15px;
    z-index: 1;
}

.top-link{
    margin: auto;
    text-orientation: sideways;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    text-decoration: none;
    color: black;
    font-size: .75em;
    display: none;
}

/*LEFT FIXED BAR------------------------------------------------*/

/*FOOTER--------------------------------------------------------*/

.footer{
    width: 100%;
    padding-top: 75px;
    position: relative;
    position: fixed;
    bottom: 0;
    z-index: 100;
}

.gradiant-footer {
    bottom: 0;
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 10%;
    background: linear-gradient(-90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55), rgba(0, 0, .9));
    background: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55), rgba(0, 0, .9));
    background: -o-linear-gradient(-90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55), rgba(0, 0, .9));
    background: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55), rgba(0, 0, .9));
}


.bg-footer-active{
    background: transparent;  
}

p.text-copyright {
    display: none;
    font-size: .6em;
    transform:translateY(120%);
    -webkit-transform:translateY(120%);
    -ms-transform:translateY(120%);
    -moz-transform:translateY(120%);
    -o-transform:translateY(120%);
    color: #ffdc2e;
}

.col-md-6.social {
    text-align: right;
}

.social-logo {
    width: 14px;
    vertical-align: middle;
    display: inline-block;
    fill:#ffdc2e;
    transition: .2s ease;
}

.social-logo-active {
    fill: black;
}

.social-logo:hover{
    fill:#ff1261;
}

.social ul{
    list-style: none;
    transform:translateY(15%);
    -webkit-transform: translateY(15%);
    -ms-transform:translateY(15%);
    -moz-transform:translateY(15%);
    -o-transform:translateY(15%);
}

.social li{
    display: inline-block;
    margin: auto 2px;
}

.social ul li a{
    vertical-align: middle;
}

.social li:last-child{
    margin: auto 7px;
}

li.li-nav{
    display: none;
}

/*FOOTER--------------------------------------------------------*/

/****************************************************************
HOME
*****************************************************************/

/*LANDING PAGE--------------------------------------------------*/

.container-video {
    position: absolute;
    height: 100vh;
    width: 100%;
}

#background-video{
    width: 100%;
    min-height: 100%;
    position: fixed;
    overflow: hidden;
    opacity: .35;
}

.landing-page{
    height: 100vh;
    margin: auto;
}

.hero-banner{
    text-align:  center;
    position: relative;
    top: 50%;
    font-family: 'Helvetica-Medium';
    color: black;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

h1#test1 {
    font-family: 'Helvetica-Bold';
}

h1#test2 {
    font-family: 'Helvetica-Bold';
}

/*LANDING PAGE--------------------------------------------------*/

/*ABOUT XALE----------------------------------------------------*/

.about-xale{
    position: relative;
}

.logo-about{
    display: flex;
}

.logo-about img{
    height: 20vh;
    margin: auto;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
}

.logo-about img:hover{
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
}

.text-about-xale{
    margin-top: 35px;
    text-align:  justify;
    font-size: .7em;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
}

.text-about-xale:hover{
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
}

img.logo-transparent-xale {
    margin-top: 35px;
    margin-bottom: 10px;
}

/*SKILLS--------------------------------------------------------*/

.row.skill-line2 {
    margin-top: 15px;
}

h3.title-theme {
    margin-top: 15px;
    font-size: 1.3em;
    letter-spacing: 0.02em;
}

.title-theme-container {
    margin-bottom: 11px;
}

.skill-solo-container {
    width: 100%;
    height: 43px;
    margin-bottom: 5px;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
}

.skill-solo-container:hover{
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -o-transform: translateY(-3px);
}

.skill-solo-container:last-child{
    margin-bottom: 0;
}

.title-skill-solo {
    font-size: .75em;
}

.barre-complete {
    position: relative;
    height: 2px;
    background-color:white;
    margin-top: 9px;
}

.barre-incomplete {
    position: absolute;
    width: 75%;
    height: 2px;
    background-color:#ffdc2e;
}

div#barre1-1 {
    width: 50%;
}

div#barre1-2 {
    width: 50%;
}

div#barre1-3 {
    width: 75%;
}

div#barre1-4 {
    width: 65%;
}

div#barre2-1 {
    width: 75%;
}

div#barre2-2 {
    width: 65%;
}

div#barre2-3 {
    width: 65%;
}

div#barre2-4 {
    width: 75%;
}

div#barre3-1 {
    width: 90%;
}

div#barre3-2 {
    width: 90%;
}

div#barre3-3 {
    width: 90%;
}

div#barre3-4 {
    width: 75%;
}

div#barre4-1 {
    width: 85%;
}

div#barre4-2 {
    width: 75%;
}

div#barre4-3 {
    width: 60%;
}

div#barre4-4 {
    width: 60%;
}

/*SKILLS--------------------------------------------------------*/

/*SERVICES------------------------------------------------------*/

.row.services-line2 {
    margin-top: 15px;
}

.services-ultimecontainer {
    height: 100%;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
}

.services-ultimecontainer:hover{
    transform: translateY(-3px);
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -o-transform: translateY(-3px);
}

.services-title {
    margin-bottom: 10px;
}

h3.services-title-text {
    font-size: 1em;
}

.services-text {
    text-align:  justify;
    width: 100%;
    height: 85%;
    font-size: .75em;
    margin-bottom: 20px;
}

.services-logo {
    width: 35px;
    float: right;
}

/*SERVICES------------------------------------------------------*/

/*MES DERNIERS PROJETS------------------------------------------*/

section.ctnr-home.ctnr-latest-projects.container {
    padding-bottom: 35px;
    margin-bottom: 0;
    height: auto;
}

.ctnr-latest-projects h3{
    font-size: .65em;
    margin-bottom: 15px;
}

.img-projet-ctnr{
    margin: auto;
    height: 25vh;
    cursor: pointer;
    width: 65%;
}

.project-review{
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
}

.project-review:hover{
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
}

.container-under-title-project {
    text-align:  right;
}

p.text-page-projet {
    text-align: center;
    text-decoration:  none;
    color: black;
    font-size: 0.75em;
    cursor: pointer;
}

.col-md-12.link-page-projet {
    margin-top: 10px;
}

.row.last-projects {
    margin-bottom: 20px;
}
/*MES DERNIERS PROJETS------------------------------------------*/

/****************************************************************
HOME
*****************************************************************/


/****************************************************************
PORTFOLIO AND PICTURES
*****************************************************************/

/*PROJETS ------------------------------------------------------*/

section.ctnr-project.projets.container {
    padding-top: 100px;
}

.row.introduction {
    font-size: 1.5em;
}

.container-text-introduction.text-introduction-projet{
    width: 100%;
}

.couv-project{
    margin-bottom: 30px;
}


div#couv-project-oshara {
    width:100%;
    height: 30vh;
    background-color:red;
    background-position:center;
    background-size:cover;
    background-image:url(../media/projets/oshara/oshara-couv.jpg);
}

.couv-project{
    width:100%;
    height:100%;
}


.container-text-introduction {
    margin-bottom: 15px;
    text-align:  justify;
    width: 100%;
    font-size: .65em;
}

.links-page-projet{
    color: black;
}

h3.ctnr-latest-projects {
    font-size: .75em;
    margin-bottom: 15px;


}

span.label-project {
    color: black;
    background-color: #ffdc2e;
    font-family: 'Helvetica-Bold';
    padding: 5px;
    margin-right: 6px;
}

span.label-project:hover {
    color: white;
    background-color: #ff1261;
}


div#horizon.miniature-container {
    background-position:center;
    background-size:cover;
    background-image: url(../media/projets/horizon/horizon-couv.jpg);
}


div#jvfr.miniature-container {
    background-position:center;
    background-size:cover;
    background-image:url(../media/projets/jvfr/couv-jvfr.jpg);
}


div#stage.miniature-container {
    background-position:center;
    background-size:cover;
    background-image:url(../media/projets/oshara/oshara-couv.jpg);
}

div#jemesouviens.miniature-container {
    background-position:center;
    background-size:cover;
    background-image:url(../media/projets/jemesouviens/jemesouviens-couv.jpg);
}

div#esd.miniature-container {
    background-position:center;
    background-size:cover;
    background-image:url(../media/projets/esd/esd-couv.jpg);
}

div#amazon.miniature-container {
    background-position:center;
    background-size:cover;
    background-image:url(../media/projets/amazon/amazon-couv.jpg);
}

div#lyon.miniature-container {
    background-position:center;
    background-size:cover;
    background-image:url(../media/projets/lyon/lyon-couv.jpg);
}

div#mybrian.miniature-container {
    background-position:center;
    background-size:cover;
    background-image:url(../media/projets/mybrian/mybrian-couv.jpg);
}

/*PROJETS -----------------------------------------------------*/

/*VIDEO -------------------------------------------------------*/

section#video-container {
    margin-bottom:0;
}

h3.under-title-project {
    font-size: .65em;
    margin-bottom: 13px;
}

.miniature-container {
    height: 37vh;
    width: 100%;
    background-color: white;
    margin-bottom: 50px;
    cursor: pointer;
}

div#mybrian {
    margin-bottom: 10px;
}

/* .miniature-container-stage {
    height: 37vh;
    width: 100%;
    background-color: white;
    margin-bottom: 50px;
    cursor: pointer;
    background-position:center;
    background-size:cover;
    background-image:url(../media/projets/oshara/oshara-couv.jpg);
} */

.links-video{
    color: black;
}

.video-col{
     transition: all .7s ease;
    -webkit-transition: all .7s ease;
    -ms-transition: all .7s ease;
    -moz-transition: all .7s ease;
    -o-transition: all .7s ease;
}

.video-col:hover{
    transform:translateY(-5px);
    -webkit-transform:translateY(-5px);
    -ms-transform:translateY(-5px);
    -moz-transform:translateY(-5px);
    -o-transform:translateY(-5px);
}


div#pxorigins.miniature-container {
    background-image: url(../media/miniature-video/pxorigins.jpg);
    background-size: cover;
    background-position: center;
}

div#gameofchess.miniature-container {
    background-image: url(../media/miniature-video/gameofchess.jpg);
    background-size: cover;
    background-position: center;
}

div#redbull.miniature-container {
    background-image: url(../media/miniature-video/mood.jpg);
    background-size: cover;
    background-position: center;
}

div#hotel.miniature-container {
    background-image: url(../media/miniature-video/fourviere.jpg);
    background-size: cover;
    background-position: center;
}

div#gutai.miniature-container {
    background-image: url(../media/miniature-video/gutai.jpg);
    background-size: cover;
    background-position: center;
}


div#orpi.miniature-container {
    background-image: url(../media/miniature-video/orpi.jpg);
    background-size: cover;
    background-position: center;
}

div#mixcity.miniature-container {
    background-image: url(../media/miniature-video/mixcity.jpg);
    background-size: cover;
    background-position: center;
}

div#fracture.miniature-container {
    background-image: url(../media/miniature-video/fracture.jpg);
    background-size: cover;
    background-position: center;
}

div#metro.miniature-container {
    background-image: url(../media/miniature-video/metro.jpg);
    background-size: cover;
    background-position: center;
}

/*VIDEO -------------------------------------------------------*/


/****************************************************************
PORTFOLIO AND PICTURES
*****************************************************************/


/****************************************************************
CONTACT
*****************************************************************/

/*COORDONNEE----------------------------------------------------*/

section.ctnr-home.coordonnee.container {
    margin-bottom: 0;
    padding-bottom: 60px;
    height: 100%;
    padding-top: 22%;
}

.col-md-6.info-contact-left {
    margin-bottom: 30px;
}

.col-md-6.info-contact-right {
    height: 250px;
}

h2.title-article-contact {
    color: #d64617;
    font-size: .9em;
    text-transform:  uppercase;
}

img.icone-info {
    width: auto;
    height: 4vh;
    margin-top: 25px;
    margin-bottom: 20px;
}

p.text-contact {
    font-size: .9em;
}

a.mail-info-contact {
    text-decoration: none;
    color: white;
    font-size: 1.3em;
    transition:.2s;
}

a.mail-info-contact:hover {
    color: #ff1261;
}

p.adress-info-contact {
    font-size: 1.3em;
}

p.text-info-contact {
    font-size: 1.3em;
    margin-bottom: 15px;
}

a.text-info-contact {
    font-size: .7em;
    margin-bottom: 15px;
    color: white;
}

.block-contact{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    display: inline-flex;
    vertical-align: top;
}

.col-md-4.info-contact-left {
    text-align:  center;
}

h2.title-contact-info {
    font-family: 'Helvetica-Bold';
    font-size: 3em;
    margin-top: 20px;
}




/*COORDONNEE----------------------------------------------------*/

/****************************************************************
CONTACT
*****************************************************************/

/****************************************************************
PROJET
*****************************************************************/

/*<!-- HORIZON ****************************************** -->*/

div#row-project-page {
    margin-bottom: 10%;
}

div#horizon-visu5 {
    margin-bottom: 30px;
}


div#couv-project-horizon.couv-project{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/horizon/horizon-couv.jpg);
   height: 50.55vh;
}


div#horizon-visu1.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/horizon/visu1.jpg);
   height: 28vh;
}

div#horizon-visu2.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/horizon/visu2.jpg);
   height: 28vh;
}

div#horizon-visu3.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/horizon/visu3.jpg);
   height: 28vh;
}

div#horizon-visu4.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/horizon/visu4.jpg);
   height: 28vh;
}

div#horizon-visu5.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/horizon/visu5.jpg);
   height: 28vh;
}

/*<!-- JVFR ****************************************** -->*/

div#row-project-page {
    margin-bottom: 10%;
}

div#jvfr-visu6 {
    margin-bottom: 30px;
}


div#couv-project-jvfr.couv-project{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/jvfr/couv-jvfr.jpg);
   height: 53.4vh;
}


div#jvfr-visu1.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/jvfr/visu1.jpg);
   height: 125vh;
}

div#jvfr-visu2.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/jvfr/visu2.jpg);
   height: 125vh;
}

div#jvfr-visu3.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/jvfr/visu3.jpg);
   height: 156vh;
}

div#jvfr-visu4.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/jvfr/visu4.jpg);
   height: 167vh;
}

div#jvfr-visu5.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/jvfr/visu5.jpg);
   height: 41vh;
}

div#jvfr-visu6.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/jvfr/visu6.jpg);
   height: 36vh;
}

/*<!-- OSHARA ****************************************** -->*/

div#row-project-page {
    margin-bottom: 10%;
}

div#oshara-visu8 {
    margin-bottom: 30px;
}


div#oshara-visu1.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/oshara/visu1.jpg);
   height: 51vh;
}

div#oshara-visu2.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/oshara/visu2.jpg);
   height: 51vh;
}

div#oshara-visu3.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/oshara/visu3.jpg);
   height: 51vh;
}

div#oshara-visu4.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/oshara/visu4.jpg);
   height: 51vh;
}

div#oshara-visu5.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/oshara/visu5.jpg);
   height: 41vh;
}

div#oshara-visu6.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/oshara/visu6.jpg);
   height: 36vh;
}

div#oshara-visu7.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/oshara/visu7.jpg);
   height: 38vh;
}

div#oshara-visu8.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/oshara/visu8.jpg);
   height: 72vh;
}

/*<!-- JE ME SOUVIENS ****************************************** -->*/

a.extrait {
    color: white;
    transition:.2s;
}

a.extrait:hover{
    color: #ff1261; 
}

div#couv-project-jemesouviens.couv-project{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/jemesouviens/jemesouviens-couv.jpg);
   height: 39vh;
}

div#jemesouviens-visu1.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/jemesouviens/visu1.jpg);
   height: 30vh;
}

div#jemesouviens-visu2.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/jemesouviens/visu2.jpg);
   height: 30vh;
}

div#jemesouviens-visu3.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/jemesouviens/visu3.jpg);
   height: 30vh;
}

div#jemesouviens-visu4.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/jemesouviens/visu4.jpg);
   height: 30vh;
}

div#jemesouviens-visu5.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/jemesouviens/visu5.jpg);
   height: 30vh;
}

div#jemesouviens-visu6.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/jemesouviens/visu6.jpg);
   height: 37vh;
}

div#jemesouviens-visu7.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/jemesouviens/visu7.jpg);
   height: 34vh;
}

div#jemesouviens-visu8.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/jemesouviens/visu8.jpg);
   height: 34vh;
}

div#jemesouviens-visu9.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/jemesouviens/visu9.jpg);
   height: 34vh;
}

div#jemesouviens-visu10.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/jemesouviens/visu10.jpg);
   height: 34vh;
}


/*<!-- ESD ****************************************** -->*/

div#couv-project-esd.couv-project{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/esd/esd-couv.jpg);
   height: 43vh;
}

div#esd-visu1.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/esd/visu1.jpg);
   height: 97vh;
}

div#esd-visu2.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/esd/visu2.jpg);
   height: 97vh;
}

div#esd-visu3.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/esd/visu3.jpg);
   height: 97vh;
}

div#esd-visu4.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/esd/visu4.jpg);
   height: 97vh;
}

div#esd-visu5.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/esd/visu5.jpg);
   height: 97vh;
}

div#esd-visu6.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/esd/visu6.jpg);
   height: 97vh;
}

/*<!-- AMAZON ****************************************** -->*/

div#couv-project-amazon.couv-project{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/amazon/amazon-couv.jpg);
   height: 38vh;
}

div#amazon-visu1.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/amazon/visu1.jpg);
   height: 142vh;
}

div#amazon-visu2.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/amazon/visu2.jpg);
   height: 151vh;
}

div#amazon-visu3.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/amazon/visu3.jpg);
   height: 151vh;
}

/*<!-- LYON ****************************************** -->*/

div#couv-project-lyon.couv-project{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/lyon/lyon-couv.jpg);
   height: 38vh;
}

div#lyon-visu1.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/lyon/visu1.jpg);
   height: 110vh;
}

div#lyon-visu2.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/lyon/visu2.jpg);
   height: 95vh;
}

/*<!-- MYBRIAN ****************************************** -->*/

div#couv-project-mybrian.couv-project{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/mybrian/mybrian-couv.jpg);
   height: 38vh;
}

div#mybrian-visu1.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/mybrian/visu1.jpg);
   height: 124vh;
}

div#mybrian-visu2.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/mybrian/visu2.jpg);
   height: 64vh;
}

div#mybrian-visu3.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/mybrian/visu3.jpg);
   height: 28vh;
}

div#mybrian-visu4.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/mybrian/visu4.jpg);
   height: 42vh;
}



/****************************************************************
PROJET
*****************************************************************/

/****************************************************************
ALTERNANCE // PROJET PRO
*****************************************************************/


section.ctnr-home-alternance.container {
    padding-top: 100px;
}

a.link-video-alternance {
    color: white;
    text-decoration:none;
    font-weight:500;
    transition:.2s ease;
}

a.link-video-alternance:hover {
    color: #ff1261;
}


div#photo1.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/gfi/photo1.jpg);
   height: 34vh;
}

div#photo2.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/gfi/photo2.jpg);
   height: 34vh;
}

div#photo3.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/gfi/photo3.jpg);
   height: 34vh;
}

div#photo4.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/gfi/photo4.jpg);
   height: 34vh;
}

div#photo5.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/gfi/photo5.jpg);
   height: 34vh;
}

div#photo6.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/gfi/photo6.jpg);
   height: 34vh;
}


div#ux1.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/gfi/ux1.jpg);
   height: 91vh;
}

div#ux2.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/gfi/ux2.jpg);
   height: 91vh;
}

div#ux3.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/gfi/ux3.jpg);
   height: 29vh;
}

div#ux4.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/gfi/ux4.jpg);
   height: 29vh;
}


div#dg1.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/gfi/dg1.jpg);
   height: 72vh;
}

div#dg2.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/gfi/dg2.jpg);
   height: 72vh;
}

div#dg3.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/gfi/dg3.jpg);
   height: 72vh;
}


div#ia1.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/gfi/ia1.jpg);
   height: 28vh;
}

div#ia2.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projets/gfi/ia2.jpg);
   height: 28vh;
}




div#planche1.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projetpro//planche1.jpg);
   height: 28vh;
}

div#planche2.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projetpro//planche2.jpg);
   height: 28vh;
}

div#planche3.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projetpro//planche3.jpg);
   height: 28vh;
}

div#planche4.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projetpro//planche4.jpg);
   height: 28vh;
}

div#planche5.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projetpro//planche5.jpg);
   height: 28vh;
}

div#planche6.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projetpro//planche6.jpg);
   height: 28vh;
}

div#planche7.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projetpro//planche7.jpg);
   height: 28vh;
}

div#planche8.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projetpro//planche8.jpg);
   height: 28vh;
}

div#planche9.miniature-container{
   background-position:center;
   background-size:cover;
   background-image:url(../media/projetpro//planche9.jpg);
   height: 28vh;
}


/****************************************************************
ALTERNANCE // PROJET PRO
*****************************************************************/