/*   
Theme Name: Gabarit 1
Theme URI: 
Description: Gabarit 1
Author: Votre nom
Author URI:
Version: 1
*/





/***** LIENS AVEC LES DIFFÉRENTS FICHIERS CSS *****/

/* hexagon */
@import "hexagons.css";
/* css Typographie */
@import "css_typographie.css";
/* css Menu */
@import "css_menu_nav.css";
/* css grille */
@import "gridlex.css";
/* css Normalize pour normaliser la lecture des éléments de base par l’ensemble des navigateurs */
@import "normalize.css";
@import "w3.css";




/***** STYLES RESET *****/

ul {
    margin: 0px;
}

/* Lorsque le menu est visible, le contenu en arrière-plan ne se déroulera pas */
body.overflow-hidden {
    overflow: hidden;
}
a:-webkit-any-link, a:-moz-any-link {
    text-decoration: none;
}


/***** DIAPO *****/

/*Time for the CSS*/
* {margin: 0; padding: 0;}
body {background: #ccc;}

.slider{
	width: 640px; /*Same as width of the large image*/
	position: relative;
	/*Instead of height we will use padding*/
	padding-top: 320px; /*That helps bring the labels down*/
	
	margin: 100px auto;
	
	/*Lets add a shadow*/
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}


/*Last thing remaining is to add transitions*/
.slider>img{
	position: absolute;
	left: 0; top: 0;
	transition: all 0.5s;
}

.slider input[name='slide_switch'] {
	display: none;
}

.slider label {
	/*Lets add some spacing for the thumbnails*/
	margin: 18px 0 0 18px;
	border: 3px solid #999;
	
	float: left;
	cursor: pointer;
	transition: all 0.5s;
	
	/*Default style = low opacity*/
	opacity: 0.6;
}

.slider label img{
	display: block;
}

/*Time to add the click effects*/
.slider input[name='slide_switch']:checked+label {
	border-color: #666;
	opacity: 1;
}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.slider input[name='slide_switch'] ~ img {
	opacity: 0;
	transform: scale(1.1);
}
/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.slider input[name='slide_switch']:checked+label+img {
	opacity: 1;
	transform: scale(1);
}
/*Clicking on any thumbnail now should activate the image related to it*/

/*We are done :)*/


/***** ÉLÉMENTS DE STRUCTURE *****/


/***** STYLES GLOBAUX *****/



body {
    background-color: #211a37;
    margin: 0;
    padding: 0;
}

/* conteneur principale */
#wrapper {
    margin: 0;
    padding: 0;
    position: relative;
    overflow-x: hidden;
}

/* conteneur image en-tête */
header {
    width: 100%;
}

/* vidéo */
#media {
    width: 100%;
    max-width: 1920px;
    height: auto;
    margin-right: auto;
    margin-left: auto;
}


/* Bande fixe comportant le logo et le menu en haut de page */
#bandeLogo {
    position: fixed;
    top: 0;
    left: 0;
    height: 40px;
    width: 50px;
    z-index: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Conteneur du logo */
#logo {
    display: block;
    position: fixed;
    z-index: 50;
    height: 110px;
    width: 65px;
    top: 10px;
    right: 10px;
}

#entetefinissants {
    margin-top: 10%;
    margin-bottom: 5%;
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    width: 90%;
    text-align: center;
}

#video {
    margin-top: 50px;
    background-color: #1e1932;
    width: 100%;
    position: relative;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    overflow-y: hidden;
}

#osezslider_hype_container{
    margin-top: 10%;
    margin-bottom: 5%;
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    width: 100%;
    text-align: center;
}




/***** Pied de page *****/
footer {
    position: relative;
    width: 100%;
    left: 0;
    margin-top: 50px;
}

#contentFooter {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

#contenantMap {
    position: relative;
}

#footerInsert {
    width: 100%;
    margin-top: -50px;
    padding-top: 75px;
    background-color: #e60a5f;
}

#osezoser {
    margin-bottom: 0;
    padding-bottom: 0;
}


#legal {
    position: relative;
    text-align: center;
    width: 100%;
    height: 14px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
}

#map {
    position: absolute;
    width: 95%;
    z-index: 1;
}

#adresse {
    width: 100%;
    padding-top: 0px;
    background-color: #211a37;
    padding-bottom: 50px;
}

#icon-fab {
    margin-top: 10px;
    padding-top: 0px;
    padding-bottom: 10px;
}

#icon-fab li {
    width: 50%;
    text-align: center;
    display: block;
    margin: auto;
    position: relative;
    height: 1.5em;
}


/* ==========================================================================
PAGES TEMPORAIRES
========================================================================== */

#gif {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    
}

bodyTEMP {
    color: #ffffff;
    position: relative;
    display: block;
    margin-left:auto;
    margin-right: auto;
    margin-top: 80px;
    padding: 30px;
    font-family: 'Montserrat', 'sans-serif';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

sup {
    font-size: 0.6em;
}

#textetemp {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-bottom: 200px;
}

#donateurs {
    width: 30%;
    position: relative;
    margin: 10px auto 30px auto;
}

#credits {
        width: 50%;
    position: relative;
    margin: 10px auto 30px auto;
}



#mediavideo {
    margin-top: 0px;
    margin-bottom: -10px;
    padding-bottom: 0px;
    z-index: 5000;
}

#remerciements {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 20px;
}

.logoscommanditaires {
    width: 100%;
}



/* ==========================================================================
TÉLÉPHONE CELLULAIRE - ÉCRAN - PLUS PETIT QUE 750 PX - iPhone 6
========================================================================== */

@media screen and (max-width: 800px) {
    #wrapper {
        overflow-x: hidden;
    }
    
    .divVide {
        display: none;
    }

    /* Conteneur du logo */
    #logo {
        display: none;
    }

    #map {
        position: relative;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    #entetefinissants {
        margin-top: 20%;
        margin-bottom: 10%;
    }
    #donateurs {
    width: 80%;
    position: relative;
    margin: 10px auto 30px auto;
}
}

/* ==========================================================================
Fermeture Media Querie - TÉLÉPHONE CELLULAIRE
========================================================================== */
.w3-display-container {
    
}

.w3-content {
    padding-bottom: 20px;
}