@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: "Amboqia";
    src: url('fonts/Amboqia.otf') format('truetype');
}

@font-face {
    font-family: "Myriad";
    src: url('fonts/MyriadPro.otf') format('truetype');
}

@font-face {
    font-family: "menu";
    src: url('fonts/Arista.ttf');
}

@font-face {
    font-family: "citation";
    src: url('fonts/Dollie.ttf') format('truetype');
}

html{
}

body {
	font-family: serif;
	margin:auto;
	padding: auto;
  	width: 100%;
	min-width:255px;
  	height: 100%;
  	min-height:400px;
	max-width:1400px;
	background-color:#573412;
  	z-index: 0;
}

#page{
	background-color: #93c9be;
	z-index:0;
    min-width:255px;
    text-align: center;
}

#menuVer{
	display:none;
}

#menuHor{
	position:fixed;
	width:100%;
	max-width:1400px;
	top:0;
	transition: top 0.3s;
	-webkit-transition: top 0.6s;
	z-index:100;
}

.fondMenu{
	position:fixed;
	background-image: url(images/fondMenucontact.png);
	background-size: cover;
	background-position:bottom;
	width:100%;
	max-width: 1400px;
	height:120px;
	display: none;
}

#menuHor .logo{
    display:inline-block;
    margin-top: 5px;
    margin-left:calc( 20vw - 180px );
    width:200px;
    min-width:130px;
    vertical-align:middle;
    -webkit-filter: drop-shadow(0 0 1px white)
                    drop-shadow(0 0 2px white)
                    drop-shadow(0 0 3px white)
                    sepia(60%)
                    saturate(2);
}

#mainmenu{
    width: 50%;
    margin: 0 auto;   
}

#menuHor ul{
    position:absolute;
    top:0;
    right:40px;
}

#menuHor ul li{
    display:inline-block;
    text-align: center;
    font-family: menu;
    font-size: 30px;
    text-shadow: 0px 0px 3px #573412, 0px 0px 5px #573412;
}

#menuHor ul li a{
    display:inline-block;
    color:#ffb200;
    margin:10px;
    padding: .75rem 0;
    text-decoration: none;
}

li a:after {
    content: '';
    display: block;
    margin: auto;
    height: 2px;
    width: 0;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
    box-shadow: 0px 0px 3px #573412, 0px 0px 5px #573412;
}

li a:hover:after {
    width: 100%;
    background: #ffb200;
}

.caption{
    position:relative;
    top:10vh;
    height:60vh;
    margin:auto;
    padding:1px;
    z-index: 5;
}

h1{
    font-family:Amboqia;
    width:90%;
    margin-left:auto;
    margin-right:auto;
    font-size:100px;;
    line-height: 0.8;
    -webkit-transform:skewX(-17deg) scaleY(0.8);
    transform: skewX(-17deg) scaleY(0.8);
    color:#93c9be;
    text-shadow:0px 2px 0 #6d3d0e,
                0px -2px 0 #6d3d0e,
                2px 0px 0 #6d3d0e,
                -2px 0px 0 #6d3d0e,
                2px 2px 0 #6d3d0e,
                -2px -2px 0 #6d3d0e,
                2px -2px 0 #6d3d0e,
                -2px 2px 0 #6d3d0e,
                1px -1px 0 #6d3d0e,
                -1px 1px 0 #6d3d0e,
                2px 0px 0 #6d3d0e, 0px 2px 0 #6d3d0e,
                3px 1px 0 #6d3d0e, 1px 3px 0 #6d3d0e,
                4px 2px 0 #6d3d0e, 2px 4px 0 #6d3d0e,
                5px 3px 0 #6d3d0e, 3px 5px 0 #6d3d0e,
                6px 4px 0 #6d3d0e, 4px 6px 0 #6d3d0e,
                7px 5px 0 #6d3d0e, 5px 7px 0 #6d3d0e,
                8px 6px 0 #6d3d0e, 6px 8px 0 #6d3d0e,
                9px 7px 0 #6d3d0e, 7px 9px 0 #6d3d0e,
                9px 9px 0 #6d3d0e,
                10px 8px 0 #ffb200, 8px 10px 0 #ffb200,
                11px 9px 0 #ffb200, 9px 11px 0 #ffb200,
                12px 10px 0 #ffb200, 10px 12px 0 #ffb200,
                13px 11px 0 #ffb200, 11px 13px 0 #ffb200,
                14px 12px 0 #ffb200, 12px 14px 0 #ffb200,
                15px 13px 0 #ffb200, 13px 15px 0 #ffb200,
                16px 14px 0 #ffb200, 14px 16px 0 #ffb200,
                17px 15px 0 #ffb200, 15px 17px 0 #ffb200,
                17px 16px 0 #ffb200, 16px 17px 0 #ffb200, 17px 17px 0 #ffb200,
                18px 16px 0 #ff8500, 16px 18px 0 #ff8500,
                19px 17px 0 #ff8500, 17px 19px 0 #ff8500,
                20px 18px 0 #ff8500, 18px 20px 0 #ff8500,
                21px 19px 0 #ff8500, 19px 21px 0 #ff8500,
                22px 20px 0 #ff8500, 20px 22px 0 #ff8500,
                23px 21px 0 #ff8500, 21px 23px 0 #ff8500,
                24px 22px 0 #ff8500, 22px 24px 0 #ff8500,
                25px 23px 0 #ff8500, 23px 25px 0 #ff8500,
                26px 24px 0 #ff8500, 24px 26px 0 #ff8500,
                26px 25px 0 #ff8500, 25px 26px 0 #ff8500, 26px 26px 0 #ff8500,
                0px 0px 30px #e0c194;
}

h2{
	display: inline-block;
	font-family:Amboqia;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	font-size:40px;;
	line-height: 1.2;
	margin-top:30px;
	-webkit-transform:skewX(-17deg) scaleY(0.8);
	transform: skewX(-17deg) scaleY(0.8);
	color:#f0d096;
	text-shadow:1px -1px 0 #6d3d0e,
	           -1px 1px 0 #6d3d0e,
	            2px 0px 0 #6d3d0e, 0px 2px 0 #6d3d0e,
	            3px 1px 0 #6d3d0e, 1px 3px 0 #6d3d0e,
	            4px 2px 0 #6d3d0e, 2px 4px 0 #6d3d0e,
	            5px 3px 0 #6d3d0e, 3px 5px 0 #6d3d0e,
	            6px 4px 0 #6d3d0e, 4px 6px 0 #6d3d0e,
	            7px 5px 0 #6d3d0e, 5px 7px 0 #6d3d0e,
	            8px 6px 0 #764829, 6px 8px 0 #764829,
	            8px 8px 0 #764829,
	            0px 0px 10px #764829;
}

.caption p{
    position:absolute;
    color:#764829;
    text-shadow:2px 2px 0 #3a4b4e;
    font-family:Myriad;
    font-size: 40px;
    text-align: left;
    left:10vw;
    bottom:5vh;
}

.captionScroll {
  position: fixed;
  margin:auto;
  bottom:5vh;
  left:0;
  right:0;
  color: #000;
  z-index: 700;
}

.scroll{
	opacity:0.4;
    width:calc(6vmin + 50px);
    text-align: center;
    -webkit-filter: drop-shadow(4px 4px 2px rgba(0,0,0,0.5));
}

.image1 {
    background-repeat: no-repeat;
    background-size: cover;
    height:100vh;
    margin:auto;
    padding: auto;
    text-align:center;
}

#intro{
    text-align: center;
    margin-left: 30px;
    z-index:1;
}

#paragraphe{
	margin: 0px auto 0px auto;
	width: 80%;
	max-width: 800px;
	display:inline-block;
	font-size: 22px;
	text-align: center;
	color:#4f3c2e;
}

#txt{
	min-width:200px;
	display:inline-block;
	vertical-align: middle;
	text-align: justify;
	width: 100%;
}

#coordonnees {
	text-align: center;
	margin:0 20px;
	display: inline-block;
	color:#4f3c2e;
	vertical-align: middle;
}

#coordonnees a{
	color:#4f3c2e;
}

#coordonnees .logocoor{
    width:140px;
    margin-top:20px;
    -webkit-filter: sepia(60%)
                    saturate(1.6); 
}

p strong , p em{
    font-weight: 100;
    font-style: normal;
}

.medal1{
	width:45%;
	float: right;
	max-width:320px;
	position:relative;
	display:inline-block;
	margin:20px 20px 20px 35px;
	vertical-align: middle;
	text-align: center;
	border-radius: 58px / 65px;
	border-top-right-radius: 0;
	box-shadow: -2px 2px 1px 2px #f0d096, -4px 4px 1px 4px #ff8500, -6px 6px 1px 6px #6d3d0e;
	-moz-border-radius: 58px / 65px;
	-moz-border-top-right-radius: 0;
	-moz-box-shadow: -2px 2px 1px 2px #f0d096, -4px 4px 1px 4px #ff8500, -6px 6px 1px 6px #6d3d0e;
	-webkit-border-radius: 58px / 65px;
	-webkit-border-top-right-radius: 0;
	-webkit-box-shadow: -2px 2px 1px 2px #f0d096, -4px 4px 1px 4px #ff8500, -6px 6px 1px 6px #6d3d0e;
}

.medal1 img{
	border-radius: 58px / 65px;
	border-top-right-radius: 0;
	-moz-border-radius: 58px / 65px;
	-moz-border-top-right-radius: 0;
	-webkit-border-radius: 58px / 65px;
	-webkit-border-top-right-radius: 0;
}

.medal2{
	width:50%;
	max-width: 400px;
	position:relative;
	display:inline-block;
	margin:20px;
	vertical-align: middle;
	text-align: center;
	border-radius: 15% / 25%;
	border-top-left-radius: 0;
	box-shadow: 5px 5px 1px 5px #e29c00, 10px 10px 1px 10px #764829;
}

.medal2 img{
	border-radius: 25% / 35%;
	border-top-left-radius: 0;
}

.medal3{
	width:50%;
	max-width: 400px;
	position:relative;
	display:inline-block;
	margin:20px;
	text-align: center;
	vertical-align: middle;
	border-radius: 25% / 35%;
	border-bottom-right-radius: 0;
	box-shadow: -5px -5px 1px 5px #e29c00, -10px -10px 1px 10px #764829;
}

.medal3 img{
	border-radius: 25% / 35%;
	border-bottom-right-radius: 0;
}

.galerie{
	position:relative;
	width:80%;
	max-width: 900px;
	max-height: 200px;
	height:20vw;
	display: inline-block;
	margin-top:30px;
	margin-bottom: calc(70px + 20vw);
}

.minigal1, .minigal2, .minigal3, .minigal4, .minigal5, .minigal6{
	display: inline-block;
	width:31%;
	height:20vw;
	max-height: 200px;
}

.img1, .img2, .img3{
	width:31%;
	height:20vw;
	max-height: 200px;
}

.minigal1 .img1{
	background: url(images/co1.jpg);
	background-size: cover;
	background-color: #764829;
}

.minigal1 .img2{
	background: url(images/co2.jpg);
	background-size: cover;
	background-color: #764829;
}

.minigal1 .img3{
	background: url(images/spb2.jpg);
	background-size: cover;
	background-color: #764829;
}

.minigal2 .img1{
	background: url(images/co3.jpg);
	background-size: cover;
	background-color: #764829;
}

.minigal2 .img2{
	background: url(images/spypale.jpg);
	background-size: cover;
	background-color: #764829;
}

.minigal2 .img3{
	background: url(images/spo.jpg);
	background-size: cover;
	background-color: #764829;
}

.minigal3 .img1{
	background: url(images/spo.jpg);
	background-size: cover;
	background-color: #764829;
}

.minigal3 .img2{
	background: url(images/spb2.jpg);
	background-size: cover;
	background-color: #764829;
}

.minigal3 .img3{
	background: url(images/co4.jpg);
	background-size: cover;
	background-color: #764829;
}

.minigal4 .img1{
	background: url(images/spypale.jpg);
	background-size: cover;
	background-color: #764829;
}

.minigal4 .img2{
	background: url(images/co5.jpg);
	background-size: cover;
	background-color: #764829;
}

.minigal4 .img3{
	background: url(images/co6.jpg);
	background-size: cover;
	background-color: #764829;
}

.minigal5 .img1{
	background: url(images/spb2.jpg);
	background-size: cover;
	background-color: #764829;
}

.minigal5 .img2{
	background: url(images/co7.jpg);
	background-size: cover;
	background-color: #764829;
}

.minigal5 .img3{
	background: url(images/spypale.jpg);
	background-size: cover;
	background-color: #764829;
}

.minigal6 .img1{
	background: url(images/co8.jpg);
	background-size: cover;
	background-color: #764829;
}

.minigal6 .img2{
	background: url(images/spo.jpg);
	background-size: cover;
	background-color: #764829;
}

.minigal6 .img3{
	background: url(images/co9.jpg);
	background-size: cover;
	background-color: #764829;
}

.minigal1 .img1, .minigal1 .img2, .minigal1 .img3, .minigal1 .img4{
	border-radius: 30% / 35%;
	border-top-right-radius: 0;
}

.minigal2 .img1, .minigal2 .img2, .minigal2 .img3, .minigal2 .img4{
	border-radius: 30% / 35%;
	border-top-left-radius: 0;
}

.minigal3 .img1, .minigal3 .img2, .minigal3 .img3, .minigal3 .img4{
	border-radius: 30% / 35%;
	border-bottom-left-radius: 0;
}

.minigal4 .img1, .minigal4 .img2, .minigal4 .img3, .minigal4 .img4{
	border-radius: 30% / 35%;
	border-bottom-left-radius: 0;
}

.minigal5 .img1, .minigal5 .img2, .minigal5 .img3, .minigal5 .img4{
	border-radius: 30% / 35%;
	border-top-right-radius: 0;
}

.minigal6 .img1, .minigal6 .img2, .minigal6 .img3, .minigal6 .img4{
	border-radius: 30% / 35%;
	border-bottom-right-radius: 0;
}

.img1:hover, .img2:hover, .img3:hover, .img3:hover {
	position:absolute;
	animation-play-state: paused;
}

.img1{
	position: absolute;
	animation: apparition1 10s infinite;
}

.img2{
	position: absolute;
	animation: apparition2 10s infinite;;
}

.img3{
	position: absolute;
	animation: apparition3 10s infinite;;
}

.galerie:hover .img1, .galerie:hover .img2, .galerie:hover .img3, .galerie:hover .img4{
	animation-play-state: paused;
}

@keyframes apparition1 {
	0%{opacity:100%;}
	32%{opacity:100%;}
	33%{opacity:0%;}
	100%{opacity:0%;}
}

@keyframes apparition2 {
	0%{opacity:0%;}
	32%{opacity:0%;}
	33%{opacity:100%;}
	65%{opacity:100%;}
	66%{opacity:0%;}
	100%{opacity:0%;}
}

@keyframes apparition3 {
	0%{opacity:0%;}
	65%{opacity:0%;}
	66%{opacity:100%;}
	100%{opacity:100%;}
}

.calendrier{
	margin-bottom: 30px;
}

#cit{
    text-align: center;
    font-family: Myriad;
    color:rgb(221, 193, 157);
    font-size:28px;
    margin:40px calc( 20vw - 40px ) 20px;
}

#citsign{
    text-align: right;
    width:300px;
    font-family: citation;
    color:rgb(221, 193, 157);
    font-size:42px;
    margin-left:auto;
    margin-right:calc( 20vw - 40px );
}

#bandeau{
    max-width:1800px;
    margin:20vh 0;
    text-align:center;
}

#serie{
   display:inline-block;
   margin:auto;
}

.duke, .nico, .girls, .haze, .fun{
	height:20vw;
   max-height:406px;
}

#bas{
    height:auto;
    color:#93c9be;
    background-color:#573412;
    font-size: 22px
}

#bas p{
	margin: 0px;
}

.logobas{
    width:140px;
    margin:10px 0px;
    vertical-align: middle;
    -webkit-filter: sepia(60%)
                    saturate(1.6);
}

.logoFB{
    width:25px;
    margin-left:2px;
    margin-bottom:-2px;
}

.logoG{
    width:25px;
    margin-left:2px;
    margin-bottom:-2px;
    -webkit-filter: invert(90%)
                    sepia(100%)
                    rotate(250deg);
}

#bas .lien{
    margin:20px 0px;
}

.row{
    display:flex;
    flex-wrap: wrap;
    width:100%;
}

.col1{
    display:inline-block;
    margin:20px;
    flex:1;
    margin:0px 0px;
    min-width:200px;
    vertical-align: middle;
    text-align: center;
}

.col2{
    display:inline-block;
    flex:2; 
    margin:0px 0px;
    min-width: 200px;
    font-size: 18px;
    text-align:center;
}

.bloccol{
    display:inline-block;
    margin:0 4vw;
    min-width:160px;
    vertical-align: middle;
    text-align:center;
}

#bas ul{
    padding-bottom:0vh;
    padding-left:0;
}

#bas li{
    font-family: serif;
    font-size:18px;
    list-style: none;
}

#bas li a{
    display:inline-block;
    color:#93c9be;
    text-decoration: none;
    margin:0;
}

#bas li a:after {
    content: '';
    display: block;
    margin: auto;
    height: 1px;
    width: 0;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
}

#bas li a:hover:after {
    width: 100%;
    background: #93c9be;
}

.mentions{
    margin-top:0;
    width:100%;
    margin-left:auto;
    margin-right:auto;
}

.copyright{
    text-align: center;
    font-size:15px;
    width:90%;
    padding-top:10px;
    margin-left:auto;
    margin-right:auto;
}



@media (max-width:1000px){
    #menuHor{
        display:none;
    }
    
    /* Menu burger */
    #menu-burger {position:absolute; top:1em; right:2em; display:inline-block; cursor:pointer; background:#f0d096; padding:8px 6px; border-radius:40px; z-index:120;}
    #menu-burger .bar1, #menu-burger .bar2, #menu-burger .bar3 {width:32px; height:5px; background-color:#573412; margin:6px; transition:0.4s; border-radius: 2px;}
    /*#menu-burger:hover {opacity:.75; transition:0.5s;}*/
    #menu-burger.clicked .bar1 {-webkit-transform:rotate(-45deg) translate(-8px, 8px); transform:rotate(-45deg) translate(-7.5px, 7.5px);}
    #menu-burger.clicked .bar2 {opacity: 0;}
    #menu-burger.clicked .bar3 {-webkit-transform:rotate(45deg) translate(-7px, -7px); transform:rotate(45deg) translate(-7.8px, -7.8px);}
    
    #navmob{
        position:fixed;
        max-width:1800px;
        right:0px;
        top:0;
        transition: top 0.3s;
        -webkit-transition: top 0.6s;
        z-index:100;
    }

    #menuVer {
        font-family: menu;
        font-size: 23px;
        color:#e47814;
        display:block;
        position:fixed;
        top:calc(-430px + 15vw);
        background-image: url(images/fondMenuContact2.png);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position:bottom;
        text-align:center;
        width:100%;
        z-index: 20;
    }
    
    #menuVer .logo{
        display:inline-block;
        float:left;
        width:150px;
        margin: 5px -100px 5px 5px;
        vertical-align:top;
        -webkit-filter: drop-shadow(0 0 1px white)
                        drop-shadow(0 0 2px white)
                        drop-shadow(0 0 3px white)
                        brightness(90%)
                        sepia(50%)
                        saturate(1);
    }
    
	#menuVer ul{
		display:inline-block;
		width:250px;
		padding-left:0;
		margin-left:-50px;
      margin-bottom: 50px;
		-webkit-transform:skewX(45deg) scaleY(1);
		transform: skewX(45deg) scaleY(1);
    }
    
	#menuVer ul li{
		display:block;
		text-align: center;
		font-family: menu;
		font-size: 30px;
		-webkit-transform:skewX(-45deg) scaleY(1);
		transform: skewX(-45deg) scaleY(1);
	}
    
	#menuVer ul li a{
        display:inline-block;
        color:#ffb200;
        margin:0px;
        padding: .75rem 0;
        text-decoration: none;
    }

    li a:after {
        content: '';
        display: block;
        margin: auto;
        height: 3px;
        width: 0;
        background: transparent;
        box-shadow:none;
        transition: width .5s ease, background-color .5s ease;
    }

    li a:hover:after {
        width: 100%;
        background: #ffb200;
    }

    #menuVer.visible {
        animation:.5s slideBottom ease-in forwards ;
        transition-delay:0;
        -webkit-transition-delay:0;
    }
    #menuVer.invisible {
        animation:1s slideTop ease-out forwards;
        transition-delay:0;
        -webkit-transition-delay:0;
    }

    /* Animations pour le menu slide */
    @keyframes slideBottom {
	   from {top:calc(-430px + 15vw);}
	   to {top:0;}
    }
    @-webkit-keyframes slideBottom {
	   from {top:calc(-430px + 15vw);}
	   to {top:0;}
    }
    @keyframes slideTop {
	   from {top:0;}
	   to {top:calc(-430px + 15vw);}
    }
    @-webkit-keyframes slideTop {
	   from {top:0;}
	   to {top:calc(-430px + 15vw);}
    }
}

@media (max-height:600px){
	.caption h1{
		width:70%;
		min-width: 120px;
		margin-left:auto;
		margin-right:auto;
		font-size:calc(30px + 10vmin);
		line-height: 0.8;
		margin-top:25vh;
    }
	
	.caption p{
		font-size: 7vmin;	
	}

	.captionScroll {
		bottom:10vh;
	}
	
	.scroll{
		width:15vh;
	}
}


@media (max-width:700px){
	#menuVer ul{
        display:inline-block;
        width:250px;
        text-align:center;
        padding-left:0;
        margin-top:90px;
    }
    
    .medal1, .medal2, .medal3{
        display: block;
        float:none;
        width:75%;
        margin-left:auto;
        margin-right:auto;
    }
    
    #txt{
		width:100%;  
	}
    
    .caption h1{
            width:90%;
            margin-left:auto;
            margin-right:auto;
            font-size:20vmin;
            line-height: 0.8;
        }
    
    .caption p{
        position:absolute;
        color:antiquewhite;
        text-shadow:2px 2px 0 #3a4b4e;
        font-family:Myriad;
        font-size: 6vmin;
        text-align: left;
        left:10vw;
        bottom:5vh;
    }
    
    .col1{
		padding-top:calc(140px - 20vw);  
    }
    
    .col2{
    	display:inline-block;
    	flex:1; 
    	margin:0px 0px;
    	min-width: 200px;
    	font-size: 18px;
    	text-align:center;
	}

	#bas li{
    	font-family: serif;
    	font-size:calc(10px + 1.2vw);
    	list-style: none;
	}
    
    @media (max-height:600px){
        .caption h1{
            margin-left:auto;
            width:100%;
            margin-right:auto;
            font-size:60px;
            line-height: 0.8;
            position:absolute;
            margin-top:20px;
        }
    }
}

@media (max-width:600px){
	.galerie{
		position:relative;
		width:80%;
		max-width: 900px;
		max-height: 200px;
		height:30vw;
		display: inline-block;
		margin-top:30px;
		margin-bottom: calc(100px + 50vw);
	}

	.minigal1, .minigal2, .minigal3, .minigal4, .minigal5, .minigal6{
		display: inline-block;
		width:48%;
		height:30vw;
		max-height: 200px;
	}

	.img1, .img2, .img3{
		width:48%;
		height:30vw;
		max-height: 200px;
	}
}

@media (max-width:400px){
    .col1{
        padding-top:0px;
    }
    
   #bas li{
    	font-family: serif;
    	font-size:15px;
    	list-style: none;
	}
}