@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:#533d0b;
  	z-index: 0;
}

#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/fondMenu.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 #5e8375, 0px 0px 5px #5e8375;
}

#menuHor ul li a{
    display:inline-block;
    color:antiquewhite;
    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 #5e8375, 0px 0px 5px #5e8375;
}

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

#page{
    min-width:255px;
    text-align: center;
}

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

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

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

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

.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;
    height:100vh;
    margin:auto;
    padding: auto;
    text-align:center;
}

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

.medal1{
	width:50%;
	float: left;
	max-width:400px;
	position:relative;
	display:inline-block;
	margin:20px;
	vertical-align: middle;
	text-align: center;
	border-radius: 15% / 25%;
	border-top-right-radius: 0;
	box-shadow: -2px 2px 1px 2px #e29c00, -4px 4px 1px 4px #e0b980, -6px 6px 1px 6px #5e8375;
}

.medal1 img{
	border-radius: 15% / 25%;
	border-top-right-radius: 0;
}

#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:1200px;
    margin:10vh 0;
    text-align:center;
   display:inline-block;
}

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

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

#paragraphe{
	margin: 50px auto 20px auto;
	width: 80%;
	max-width: 800px;
	display:inline-block;
	font-size: 22px;
	text-align: center;
	color:rgb(221, 193, 157);
}

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

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

#bas{
    height:auto;
    color:antiquewhite;
    background-color:#5e8375;
}

#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;
    -webkit-filter: invert(10%)
                    sepia(30%);
}

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

#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:antiquewhite;
    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: antiquewhite;
}

.mentions{
    margin-top:0px;
    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:#ddc19d; padding:8px 6px; transition:0.4s; border-radius:40px}
    #menu-burger .bar1, #menu-burger .bar2, #menu-burger .bar3 {width:32px; height:5px; background-color:#1b5269; 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:antiquewhite;
        display:block;
        position:fixed;
        top:calc(-430px + 15vw);
        background-image: url(images/fondMenu2.png);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position:bottom;
        text-align:center;
        width:100%;
        z-index: 5;
    }
    
    #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:antiquewhite;
        margin:0px;
        padding: .75rem 0;
        text-decoration: none;
    }

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

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

    #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:100%;
		min-width: 200px;
		margin-left:auto;
		margin-right:auto;
		font-size:15vmin;
	}
	
	.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{
        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:80px;
            line-height: 0.8;
        }
    
    .caption p{
        position:absolute;
        color:antiquewhite;
        text-shadow:2px 2px 0 #3a4b4e;
        font-family:Myriad;
        font-size: 30px;
        text-align: left;
        left:10vw;
        bottom:-10vh;
    }
    
    .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{
			width:90%;
			margin-left:auto;
			margin-right:auto;
			font-size:40px;
			line-height: 0.8;
			position:absolute;
			margin-top:10px;
		}
        
		.caption p{
			position:absolute;
			color:antiquewhite;
			text-shadow:2px 2px 0 #3a4b4e;
			font-family:Myriad;
			font-size: 20px;
			text-align: left;
			left:10vw;
			bottom:-5vh;
		}
	}
}

@media (max-width:400px){
    .col1{
        padding-top:0px;
    }

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