/* ------------------------------------------------------------------------------------ */
/* ------------------------------------- STYLES --------------------------------------- */
/* ------------------------------------------------------------------------------------ */

html, body
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    position: relative;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    z-index: 0;
    overflow: hidden;
}

a {
    color: #333;
    text-decoration:none;
    -webkit-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, box-shadow .3s ease, text-shadow .3s ease;
    -moz-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, box-shadow .3s ease, text-shadow .3s ease;
    -ms-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, box-shadow .3s ease, text-shadow .3s ease;
    transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, box-shadow .3s ease, text-shadow .3s ease;
}

a:hover {
    text-decoration:none;
}

#wrapper {
    display: table;
    width: 100%;
    height: 100%;
}

.left_col {
    position: relative;
    height:100%;
    display: table-cell;
    vertical-align: top;
    width: 320px;
    overflow: hidden;
}

.left_col .logo {
    height: 340px;
    background: url('../../../../img/prehome/logo.png') no-repeat center 50px;
}

.left_col ul.nav {
    margin-top: 50px;
}

.left_col ul.nav li {
    display: block;
    padding: 10px 0 10px 45px;
}

.left_col ul.nav li a {
    display: inline-block;
    height: 55px;
    line-height: 55px;
    padding-left: 80px;
    font-size: 18px;
    font-weight: 600;
    color: #8d8d8d;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    transition: none;
}

.left_col ul.nav li a:hover {
    color: #f0b679;
}

body:after { /* PRELOAD */
 display:none;
 content:
    url(../../../../img/prehome/picto_groupe_hover.png)
    url(../../../../img/prehome/picto_enseignes_hover.png)
    url(../../../../img/prehome/picto_espace_candidat_hover.png)
    url(../../../../img/prehome/picto_contact_hover.png);
}



.left_col ul.nav li a.nav_1 {
    background: url('../../../../img/prehome/picto_groupe.png') no-repeat left center;
}

.left_col ul.nav li a.nav_1:hover {
    background: url('../../../../img/prehome/picto_groupe_hover.png') no-repeat left center;
}

.left_col ul.nav li a.nav_2 {
    background: url('../../../../img/prehome/picto_enseignes.png') no-repeat left center;
}

.left_col ul.nav li a.nav_2:hover {
    background: url('../../../../img/prehome/picto_enseignes_hover.png') no-repeat left center;
}

.left_col ul.nav li a.nav_3 {
    background: url('../../../../img/prehome/picto_espace_candidat.png') no-repeat left center;
}

.left_col ul.nav li a.nav_3:hover {
    background: url('../../../../img/prehome/picto_espace_candidat_hover.png') no-repeat left center;
}

.left_col ul.nav li a.nav_4 {
    background: url('../../../../img/prehome/picto_contact.png') no-repeat left center;
}

.left_col ul.nav li a.nav_4:hover {
    background: url('../../../../img/prehome/picto_contact_hover.png') no-repeat left center;
}

.left_col .switch_lng {
    position: absolute;
    bottom: 25px;
    left: 0;
    display: block;
    text-align: center;
    width: 100%;
    color: #8d8d8d;
    font-size: 14px;
}

.left_col .switch_lng img {
    margin-top: -2px;
}

.left_col .copyright {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 11px;
    color: rgba(51,51,51,0.45);
}

.right_col {
    position: relative;
    height:100%;
    display: table-cell;
    vertical-align: top;
    background: #ddd;
    overflow: hidden;
}

.right_col #slider {
    position: relative;
    height: 100%;
}

.bx-viewport, .bx-wrapper{
    position:relative;
    width:100%;
    height:100% !important;
    top:0;
    left:0;
}

.bx-wrapper .bx-viewport{
    border: none !important;
}

#slider_text {
    position: absolute;
    bottom: 30%;
    left: 60px;
    width: 100%;
    z-index: 999;
}

#slider_text h1 {
    font-family: 'Playfair Display';
    font-size: 22px;
    font-weight: 400;
    color: #fff;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

#slider_text h2 {
    font-size: 56px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 70px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

#slider_text a {
    display: block;
    width: 160px;
    height: 50px;
    line-height: 50px;
    margin-top: 30px;
    background: #e68117;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
}

#slider_text a:hover {
    background: #111111;
}

#slider, #slider .slide {
    height: 100% !important;
}

#slider .slide {
    position: relative;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

#slider .slide_1 {
    background-image: url('../../../../img/prehome/slides/chateau_background.jpg');
}

#slider .slide_2 {
    background-image: url('../../../../img/prehome/slides/panapro_background.jpg');
}

#slider .slide_3 {
    background-image: url('../../../../img/prehome/slides/paul_background.jpg');
}

#slider .slide_4 {
    background-image: url('../../../../img/prehome/slides/laduree_background.jpg');
}

#slider .slide_5 {
    background-image: url('../../../../img/prehome/slides/panetude_background.jpg');
}

#slider .slide_6 {
    background-image: url('../../../../img/prehome/slides/ifh_background.jpg');
}

.slider_overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../../../../img/prehome/black_overlay.png');
    background-repeat: repeat-x;
    background-position: bottom center;
    z-index: 999;
}

#bx-pager {
    position: absolute;
    left: 0;
    bottom: 15px;
    display: table;
    width: 100%;
    text-align: center;
    z-index: 9999;
    font-family: none;
    font-size: 0;
}

#bx-pager div {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#bx-pager div a {
    display: inline-block;
    width: 160px;
    height: 105px;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

#bx-pager a:hover, #bx-pager a.active {
    background-color: #fff;
}

#bx-pager .thumb_1 a {
    background-image: url('../../../../img/prehome/slides/chateau_grey.png');
}

#bx-pager .thumb_1 a:hover, #bx-pager .thumb_1 a.active {
    background-image: url('../../../../img/prehome/slides/chateau.png');
}

#bx-pager .thumb_2 a {
    background-image: url('../../../../img/prehome/slides/panapro_grey.png');
}

#bx-pager .thumb_2 a:hover, #bx-pager .thumb_2 a.active {
    background-image: url('../../../../img/prehome/slides/panapro.png');
}

#bx-pager .thumb_3 a {
    background-image: url('../../../../img/prehome/slides/paul_grey.png');
}

#bx-pager .thumb_3 a:hover, #bx-pager .thumb_3 a.active {
    background-image: url('../../../../img/prehome/slides/paul.png');
}

#bx-pager .thumb_4 a {
    background-image: url('../../../../img/prehome/slides/laduree_grey.png');
}

#bx-pager .thumb_4 a:hover, #bx-pager .thumb_4 a.active {
    background-image: url('../../../../img/prehome/slides/laduree.png');
}

#bx-pager .thumb_5 a {
    background-image: url('../../../../img/prehome/slides/panetude_grey.png');
}

#bx-pager .thumb_5 a:hover, #bx-pager .thumb_5 a.active {
    background-image: url('../../../../img/prehome/slides/panetude.png');
}

#bx-pager .thumb_6 a {
    background-image: url('../../../../img/prehome/slides/ifh_grey.png');
}

#bx-pager .thumb_6 a:hover, #bx-pager .thumb_6 a.active {
    background-image: url('../../../../img/prehome/slides/ifh.png');
}


@media screen and (min-width: 1800px) {

    #bx-pager div a {
        width: 200px;
        height: 131px;
    }

}


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

    #bx-pager div a {
        width: 100px;
        height: 66px;
        background-size: 60% !important;
    }

    #slider_text h2 {
        font-size: 36px;
        line-height: 50px;
    }

}

@media screen and (max-height: 750px) {
    .left_col .logo {
        height: 230px;
        background: url('../../../../img/prehome/logo.png') no-repeat center 30px;
    }

    .left_col ul.nav {
        margin-top: 70px;
    }
}