/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 1 mars 2019, 10:51:55
    Author     : Utilisateur
*/
/*******************************************************************************
********************************************************************************
*** GENERAL
********************************************************************************
*******************************************************************************/
body.front a{
    text-decoration: none !important;
}
/*******************************************************************************
********************************************************************************
*** BANDEAU
********************************************************************************
*******************************************************************************/
body.front .header__logo {
    float: none;
}
body.front .header__logo-image {
    vertical-align: super;
}

body.front #bandeau{
    /*    background: url(../img/accueil/bgHeader.jpg)no-repeat;
        background-size:cover;
        background-position:top;*/
    position: relative;
    height: 850px;
    /*height: 800px;*/
}
body.front #bandeau .video-container{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body.front #bandeau .video-container video {
    /*la video prendra au moins 100%*/
    min-width: 100%;
    min-height: 100%;
    /*Le réglage automatique de la largeur et de la hauteur 
    empêche le navigateur d’étirer ou d’écraser la vidéo*/
    width: auto;
    height: auto;
    /*pour centrer la video*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
body.front #conteneurAccroche{
    font-size:48px;
    color: #fff;
    text-transform: uppercase;
    position: absolute;
    left: 40px;
    top: 90px;
}
body.front #conteneurAccroche #titreAccroche{
    padding-left: 35px;
    display: inline-block;
    margin: 0;
    line-height: 50px;
    color: #fff;
}
body.front #conteneurAccroche #sstitreAccroche{
    font-size: 133px;
    display: block;
    line-height: 145px;
    margin: 0;
    color: #fff;
}
body.front #bandeau a.scrollTo {
    position:absolute;
    bottom:40px; 
    left: 50%;
    margin-left: -16px;
}

body.front #bandeau a.scrollTo {
    -webkit-animation-duration: 7s; 
    animation-duration: 7s;

    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 

    animation-iteration-count:infinite; 
    -webkit-animation-iteration-count:infinite; 

    -webkit-animation-name: bounce; 
    animation-name: bounce; 
}
@-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-15px);} 
    60% {-webkit-transform: translateY(-5px);} 
} 
@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-15px);} 
    60% {transform: translateY(-5px);} 
} 
body.front #bandeau .boutonBandeau{
    bottom: 130px;
}
body.front #bandeau a.scrollTo img{
    /*    background-color: rgba(255, 255, 255, 0.6);
        border-radius: 50%;
        padding: 7px;*/
    border: solid #fff 2px;
    border-radius: 50%;
    padding: 4px 4px;
}
/*******************************************************************************
********************************************************************************
*** PRESENTATION
********************************************************************************
*******************************************************************************/
body.front #presentationAccueil{
    padding: 120px 40px;
    text-align: center;
}
body.front #presentationAccueil p{
    margin-bottom: 50px;
    font-size: 30px;
    color: #adb445;
}
body.front #presentationAccueil p > a{
    font-size: 40px;
    background-color: #adb445;
    padding: 5px 40px;
    color: #fff;
}
/*******************************************************************************
********************************************************************************
*** PORTAIL MENU
********************************************************************************
*******************************************************************************/
body.front #conteneurBlocMenu{
    background: url(../img/accueil/bgBlocRandonnees.jpg);
    background-size:cover;
    padding: 85px 100px;
}
body.front .conteneurLabelBlocMenu{
    bottom: 0;
    padding: 35px 25px;
}
body.front .titreBlocMenu{
    margin-bottom: 185px;
}
body.front .conteneurLabelBlocMenu a{
    color: #fff;
}
body.front .boutonBlocMenu{
    margin: 0 50px;
}
body.front #conteneurBlocMenu > div.col-xs-12.col-md-4 {
    padding: 0 15px;
}
/*******************************************************************************
********************************************************************************
*** MAP
********************************************************************************
*******************************************************************************/
body.front #conteneurMap{
    margin: 60px 0;
}
/*******************************************************************************
********************************************************************************
*** RESPONSIVE
********************************************************************************
*******************************************************************************/
/*@media (min-width: 1200px) { body { background-color:pink!important; } }
@media (max-width: 1199px) { body { background-color:green!important; } }
@media (max-width: 991px) { body { background-color:blue!important; } }
@media (max-width: 767px) { body { background-color:red!important; } }
@media (max-width: 481px) { body { background-color:grey!important; } }*/

@media (max-width: 1199px) {
    body.front .conteneurLabelBlocMenu {
        padding: 35px 5px;
    }
    body.front #conteneurBlocMenu {
        padding: 80px 40px;
    }
}

@media (max-width: 991px) { 
    body.front #conteneurAccroche {
        font-size: 40px;
    }
    body.front #conteneurAccroche #sstitreAccroche {
        font-size: 110px;
        line-height: 100px;
    }
    body.front .header__logo-image {
        width: 190px;
    }
    body.front .titreBlocMenu {
        font-size: 45px;
    }
}
@media (max-width: 767px) { 
    body.front #conteneurAccroche {
        font-size: 25px;
    }
    body.front #conteneurAccroche #titreAccroche {
        padding-left: 18px;
    }
    body.front .header__logo-image {
        width: 160px;
    }
    body.front #conteneurAccroche {
        left: 20px;
    }
    body.front #conteneurAccroche #sstitreAccroche {
        font-size: 70px;
        line-height: 55px;
    }
    body.front #bandeau {
        background-position: 70%;
    }
    body.front #presentationAccueil p > a {
        padding: 5px 10px;
        font-size: 30px;
    }
}

@media (max-width: 481px) {
    body.front #conteneurAccroche {
        font-size: 15px;
    } 
    body.front .header__logo-image {
        width: 115px;
    }
    body.front #conteneurAccroche #sstitreAccroche {
        font-size: 45px;
        line-height: 25px;
    }
    body.front #conteneurAccroche #titreAccroche {
        padding-left: 12px;
    }
    body.front #conteneurBlocMenu {
        padding: 60px 20px;
    }
    body.front .titreBlocMenu {
        font-size: 30px;
    }
    body.front #presentationAccueil {
        padding: 100px 15px;
    }
    body.front #presentationAccueil p > a {
        font-size: 20px;
    }
}