body { font-family: Arial; font-size: 14px; }


/** HEADER **/

#logo {
    display: inline-block;
    left: 50%;
	margin: 10px 0 -25px -365px;
	position:relative;
	z-index:1000;
}

#logo img {
    width: 160px;
    height: auto;
}

#esm-onglet { position: absolute; top: 0; left: 50%; margin-left: -172px; width: 345px; z-index: 999999; }
	#esm-onglet a { display: block; height: 40px; background: transparent url('images/onglet-normal.png') no-repeat top left; text-align: center; color: #fff; font-size: 12px; line-height: 25px; text-decoration: none; letter-spacing: 1px; }
	#esm-onglet a:hover { background-image: url('images/onglet-over.png'); }

#vague {
    width: 1161px;
    height: 77px;
    position: absolute;
    margin-top: -17px;
    left: 50%;
    margin-left: -576px;
    background: transparent url(images/slider_vague.png) no-repeat top left;
    z-index: 10;
}




/** SLIDER **/

#slider {
    height: 300px;
    background: rgba(0,0,0,0.1);
}

    #slider .masque {
        position: absolute;
        width: 1140px;
        height: auto;
        z-index: 9;
    }

    #slider .images {
        height: inherit;
        overflow: hidden;
    }

        #slider {
            position: relative;
            margin: 0 auto;
            width: 1140px;
            height: 300px;
            overflow: hidden;
        }

        @media (min-width:481px) {
            
            #slider .images .image {
                position: absolute;
                top: -332px;
                width: 100%;
                opacity: 0;
                -webkit-backface-visibility: hidden;
                -webkit-animation: slideFade 37s linear infinite 0s;
                -moz-animation: slideFade 37s linear infinite 0s;
                -o-animation: slideFade 37s linear infinite 0s;
                -ms-animation: slideFade 37s linear infinite 0s;
                animation: slideFade 37s linear infinite 0s;
            }

            #slider .images .image:nth-child(1) {
                background: transparent url(images/slider/slider_md_1.jpg) no-repeat top left;
                height: 716px;
                top: -110px;
            }
            
            #slider .images .image:nth-child(2) {
                background: transparent url(images/slider/slider_md_2.jpg) no-repeat top left;
                height: 1140px;
                top: -480px;
                animation-delay: 9s;
            }
            
            #slider .images .image:nth-child(3) {
                background: transparent url(images/slider/slider_md_3.jpg) no-repeat top left;
                height: 1107px;
                top: -100px;
                animation-delay: 18s;
            }

            #slider .images .image:nth-child(4) {
                background: transparent url(images/slider/slider_md_4.jpg) no-repeat center center;
                height: 800px;
                top: -251px;
                animation-delay: 27s;
            }
            
            #slider .images .image:nth-child(5) {
                background: transparent url(images/slider/slider_md_5.jpg) no-repeat center center;
                height: 800px;
                top: -251px;
                animation-delay: 36s;
            }

            .sm-only { display: none; }

        }

        
        @media (max-width:480px) {

            #slider {
                height: 200px !important;
            }

            #slider .images .image {
                position: absolute;
                top: -332px;
                width: 100%;
                opacity: 0;
                -webkit-backface-visibility: hidden;
                -webkit-animation: slideFade 37s linear infinite 0s;
                -moz-animation: slideFade 37s linear infinite 0s;
                -o-animation: slideFade 37s linear infinite 0s;
                -ms-animation: slideFade 37s linear infinite 0s;
                animation: slideFade 37s linear infinite 0s;
            }

            #slider .images .image:nth-child(1) {
                background: url(images/slider/slider_sd_1.jpg) no-repeat center center;
                height: 600px;
                top: -88px;
            }
            
            #slider .images .image:nth-child(2) {
                background: transparent url(images/slider/slider_sd_2.jpg) no-repeat center center;
                height: 1140px;
                top: -605px;
                animation-delay: 9s;
            }
            
            #slider .images .image:nth-child(3) {
                background: transparent url(images/slider/slider_sd_3.jpg) no-repeat center center;
                height: 800px;
                top: -251px;
                animation-delay: 18s;
            }
            
            #slider .images .image:nth-child(4) {
                background: transparent url(images/slider/slider_sd_4.jpg) no-repeat center center;
                height: 800px;
                top: -251px;
                animation-delay: 27s;
            }
            
            #slider .images .image:nth-child(5) {
                background: transparent url(images/slider/slider_sd_5.jpg) no-repeat center center;
                height: 800px;
                top: -251px;
                animation-delay: 36s;
            }

            .md-only { display: none; }

        }


        @-webkit-keyframes slideFade { 
            0% { opacity: 0; -webkit-animation-timing-function: ease-in; -webkit-transform: scale(1); }
            3.7% { opacity: 1; -webkit-animation-timing-function: ease-out; }
            33.3% { opacity: 1 }
            37% { opacity: 0 }
            100% { opacity: 0;  transform: scale(1.5); }
        }
        @-moz-keyframes slideFade { 
            0% { opacity: 0; -moz-animation-timing-function: ease-in; -moz-transform: scale(1); }
            3.7% { opacity: 1; -moz-animation-timing-function: ease-out; }
            33.3% { opacity: 1 }
            37% { opacity: 0 }
            100% { opacity: 0;  transform: scale(1.5); }
        }
        @-o-keyframes slideFade { 
            0% { opacity: 0; -o-animation-timing-function: ease-in; -o-transform: scale(1); }
            3.7% { opacity: 1; -o-animation-timing-function: ease-out; }
            33.3% { opacity: 1 }
            37% { opacity: 0 }
            100% { opacity: 0;  transform: scale(1.5); }
        }
        @-ms-keyframes slideFade { 
            0% { opacity: 0; -ms-animation-timing-function: ease-in; -ms-transform: scale(1); }
            3.7% { opacity: 1; -ms-animation-timing-function: ease-out; }
            33.3% { opacity: 1 }
            37% { opacity: 0 }
            100% { opacity: 0;  transform: scale(1.5); }
        }
        
        @keyframes slideFade {
            0% { opacity: 0; animation-timing-function: ease-in; transform: scale(1); }
            3.7% { opacity: 1; animation-timing-function: ease-out; }
            33.3% { opacity: 1 }
            37% { opacity: 0 }
            100% { opacity: 0;  transform: scale(1.5); }
        }



.page_titre_slider {
    position: relative;
    top: 10px;
    font-weight: bold;
    color: #384c84;
    letter-spacing: 2px;
    font-size: 0.8em;
}

/** LIEN FACEBOOK **/

.btn_facebook {
    display: inline-block;
    background: #314c81;
    border-radius: 3px;
    color: #ffffff;
    padding: 10px 30px;
    margin: 4px 0;
    text-align: center;
    width: 80%;
    letter-spacing: 2px;
}
    .btn_facebook:hover, .btn_facebook:visited {
        color: #ffffff;
        text-shadow: 0 0 3px rgba(255,255,255,0.4);
        text-decoration: none;
        background: #253963;
    }

    .page_facebook .icone {
        position: absolute;
        display: block;
        width: 39px;
        height: 39px;
        background: #ffffff;
        
        transform: rotate(10deg);
        margin-left: 59%;
        margin-top: -35px;
        border-radius: 3px;
    }

        .page_facebook .icone i {
            position: relative;
            top: 0;
            left: 1px;
            font-size: 40px;
            color: #4267b2;
        }

/** MAIN COLS **/

#cols .image {
    text-align: center;
}

    #cols .image .image_cadre {
        display: inline-block;
        width: 200px;
        height: 200px;
        overflow: hidden;
        border-radius: 50%;
        box-shadow: -2px 2px 4px 1px rgba(0,0,0,0.4);
        border-left: 1px #fff solid;
        border-bottom: 1px #fff solid;
}

        #cols .image .image_cadre img {
            position: relative;
            height: 200px;
            width: auto;
        }

	.img-circle2 { left:0 !important }
	
	#cols h4 {
		text-align: center;
	}
	ul {
		margin-block-start: 0em !important;
		margin-block-end: 0em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		padding-inline-start: 15px;
	}

	#cols .inner {
        box-sizing: border-box;
		background-color:#EEF;
		padding: 10px 20px;
        border-radius: 600px 600px 12px 12px;
        border-bottom: 3px rgba(0,0,0,0.1) solid;
        min-height: 830px;
    }



/** PLAN **/

#plan {
    text-align: center;
    margin: 40px 0;
}
#plan img {
    max-width: 1140px;
    width: 100%;
    height: auto;
    border-radius: 10px;
    filter: grayscale(0.4);
    -ms-filter: grayscale(0.4);
    -webkit-filter: grayscale(0.4);
}

/** FOOTER **/
footer {
    margin-top: 20px;
    background: #2a7d96;
    text-align: center;
    color: #dce8ff;
}
    footer p {
        padding: 20px 0 10px 0;
    }

    footer a, footer a:visited, footer a:hover {
        color: #dce8ff;
    }


/*== RESPONSIVE ==*/

/* Tablette */
@media (max-width:1200px) {

    #logo {
        position: static;
        left: 0;
	    margin: 0;
        width: 100%;
        
    }
    
    #vague {
        display: none;
    }

    #slider .masque {
        display: none;
    }

    #slider {
        width: 100%;
        height: 300px;
    }

    .slider_container {
        padding: 0;
        background: #f00;
    }

    #cols .inner {
        border-radius: 12px;
        margin-bottom: 20px;
        min-height: auto;
    }

}

@media (max-width:480px) {

    #esm-onglet { position: relative; }

    #logo {
        text-align: center;
        margin-bottom: 20px;
    }

        #logo img {
            width: 40%;
        }
        
        /*#slider .images .image:nth-child(1) {
            height: auto;
        }


        #slider .images .image:nth-child(2) {
           display: none;
            background: transparent url(images/slider/slider_2.jpg) no-repeat top left;
            height: auto;
            top: -347px;
            animation-delay: 9s;
        }
        
        #slider .images .image:nth-child(3) {
           display: none;
            background: transparent url(images/slider/slider_3.jpg) no-repeat top left;
            height: 1107px;
            top: -726px;
            animation-delay: 18s;
        }*/
}


/*@media screen and (max-width: 640px) { 
    
    header {
        padding: 10px 0;
    }

    #logo img {
        width: 70%;
        height: auto;
    }

    #lien_facebook {
        top: 150px;
        margin-left: 0;
        left: 0; 
        width: 100%;
        text-align: center;
    }

    #lien_facebook .facebook {
        display: inline-block;
        padding: 10px;
        border-radius: 5px;
        
        background: #4267b2;
        color: #fff;
    }

    #lien_facebook .facebook span {
        font-size: 24px;
        font-weight: bold;
    }

    #lien_facebook .facebook i {
        transform: none;
        color: #fff;
        margin-left: 10px;
        text-shadow: none;
    }

}*/