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

@font-face {
  font-family: 'poppins thin';
/*  font-style: normal;
  font-weight: 400;*/
  src: url('../fonts/Poppins-Thin.ttf');
}
@font-face {
  font-family: 'poppins regular';
/*  font-style: normal;
  font-weight: 400;*/
  src: url('../fonts/Poppins-Regular.ttf');
}
@font-face {
  font-family: 'poppins medium';
/*  font-style: normal;
  font-weight: 400;*/
  src: url('../fonts/Poppins-Medium.ttf');
}
@font-face {
  font-family: 'poppins semibold';
/*  font-style: normal;
  font-weight: 400;*/
  src: url('../fonts/Poppins-SemiBold.ttf');
}
@font-face {
  font-family: 'poppins bold';
/*  font-style: normal;
  font-weight: 400;*/
  src: url('../fonts/Poppins-Bold.ttf');
}
@font-face {
  font-family: 'poppins black';
/*  font-style: normal;
  font-weight: 400;*/
  src: url('../fonts/Poppins-Black.ttf');
}

/**{
box-sizing: border-box;
}*/

body{
    margin:0;
    padding:0;
    background-color: #050404;
    font-family: 'Poppins', sans-serif;
    min-width: 322px;
}

.container{
    padding: 0px 30px;
    position: relative;
    max-width: 1280px;
    margin:0 auto;
}

#header{
    background-image: url("../images/header-bg.jpg");
    background-size: cover;
    /*background-color:darkslategrey;*/
    box-shadow: 0px -27px 35px 4px rgba(0,0,0,0.75) inset;
    -webkit-box-shadow: 0px -27px 35px 4px rgba(0,0,0,0.75) inset;
    -moz-box-shadow: 0px -27px 35px 4px rgba(0,0,0,0.75) inset;
/*    padding: 0 30px;*/
}

#header .container {
    position: static;
    max-width: none;
}

#header .logo{
    /*max-width:500px;*/
    width:40vw;
    padding-top:40px;
    position:relative;
    z-index: 100;
}

#header-alert{
    color: white;
    position: absolute;
    top: 0;
    right: 0;
    width: 325px;    
    background-image: url(../images/header-alert.png);
    background-repeat: repeat;
    color: #fff;
    padding: 22px 55px 22px 0px;
    font-family: 'poppins medium';
    text-align: right;
    font-size: 18px;
    line-height: 1.5;
    display: inline-block;
}
#header-alert::before {
    content: "";
    display: block;
    position: absolute;
    background-image: url("../images/header-alert-left.png");
    background-repeat: no-repeat;
    background-size: contain;
    left: -87px;
    bottom: 0;
    width: 87px;
    height: 120px;
}
#header-alert a{
    text-decoration: none;
    color: white;
    font-family: 'poppins bold';
}
#header-alert a:hover{
    color: #050404;
}
#header-alert p{
    margin:0;
    line-height: 1.3;
}

#menu{
    font-family: 'poppins medium';
    font-size:18px;
    line-height: 60px;
    margin: 0.5em 0 0;
}

#menu ul{
    list-style-type:none;
	padding: 0;
	margin:0;
}
#menu ul li{
    display: inline;
    vertical-align: middle;
}
#menu ul li a{
    color: #FFFFFF;
    text-decoration:none;
    padding:18px 12px;
    text-transform: uppercase;
    text-shadow: 0 0 15px rgba(255,255,255,.2), 0 0 10px rgba(255,255,255,.2);
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition:  color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
}
#menu ul li a:hover{
    color: #f3bb67;
}

#menu ul li.show-sub-menu:hover .sub-menu{
    opacity: 1;
    z-index: 1;
}

ul.sub-menu{
	font-family: 'Poppins', sans-serif;
	font-size:14px;
	position: absolute;
	left:0;
	background-color:#260506;
    /* background-color:#69161e; */
    /* background-color: rgba(10,7,7,0.85); */
    /*width: 98vw;*/
    width:55%;
    opacity: 0;
    z-index: -1;
/*	padding-left:75px;*/
	box-sizing: border-box;
    clip-path: polygon(0 0, 100% 0%, 95% 100%, 0% 100%);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition:  all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

ul.sub-menu{
    line-height: 50px;
}

.drop-down-arrow::after{
    content: '';
    border: 4px solid transparent;
    border-top: 4px solid white;
    margin-left: 2px;
    margin-bottom: 25px;
    display: inline-block;
    vertical-align: bottom;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition:  all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.drop-down-arrow:hover::after{
    content: '';
    border: 4px solid transparent;
    border-top: 4px solid #f3bb67;
    margin-left: 2px;
    margin-bottom: 25px;
    display: inline-block;
    vertical-align: bottom;
}

.drop-down-arrow.sub-menu-active{
    color: #f3bb67 !important;
}

.drop-down-arrow-mobile::after{
    content: '';
    border: 4px solid transparent;
    border-top: 4px solid white;
    margin-left: 7px;
    margin-bottom: 5px;
    display: inline-block;
    vertical-align: bottom;
}

#synosis-and-trailer{
	color:white;
	display: flex;
}

.synopsis{
	width:40%;
	/*background-color:darkslategray;*/
	background-image: url("../images/images/texture-bg.jpg");
	background-size: cover;
	/*background-position: center;*/
	float:left;
}
.synopsis h1{
	font-family: 'poppins regular';
	margin-top:0;
}

.trailer{
	width:60%;
	/*background-color:darkseagreen;*/
	float:left;
    box-sizing: border-box;
}

.synopsis-content{
	padding:0 30px;
	/*height:200px;*/
	display: flex;
	align-items: center;
	height:35vw;
    background-color: #050404;
}

.synopsis-wrap{
	color:#d5c7b8;
}

.synopsis-wrap img{
	width:225px;
	/* padding:0px 6px 0px 0px; */
}

#participants{
	/*background-color:darkgrey;*/
	/*height: 1700px;*/
    margin-bottom:-55px;
}
#participants-mobile{
    display: none;
    color:#d5c7b8;
	background-image: url("../images/texture-bg-rotated-2.jpg");
	background-size: cover;
	background-position: center;
	top: -55px;
    box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.55) inset;
    -webkit-box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.55) inset;
    -moz-box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.55) inset;
    padding: 100px 55px;
}
#participants-mobile .bio-membre{
    font-size: 16px;
}
.participants-bg{
  background-image: url("../images/participants3-bg.jpg");
	background-size: cover;
	background-position: center;
	height: 700px;
}
.conteneur-membre-mobile{
    margin:0 0 75px 0;
    padding:0 0 25px 0;
    text-align: center;
    border-bottom: 1px solid #898989;
}
.conteneur-membre-mobile:last-child{
    margin:0;
    border-bottom: 0px solid #898989;
}
.photo-membre{
    width:75%;
    margin:0 auto;
}
.photo-membre img{
    width:100%;
    border-radius: 50%;
    box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.55);
    -webkit-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.55);
}

.navigation-participants{
	background-color: rgba(10,7,7,0.85);
	position: relative;
	bottom: 55px;
}
.navigation-participants ul{
    list-style-type:none;
	padding: 0;
	margin:0 auto;
	color: #FFFFFF;
	max-width: 1200px;
	text-align: center;
}
.navigation-participants ul li{
    display: inline-block;
    vertical-align: middle;
	padding:15px 25px;
	text-transform: uppercase;
	font-family: 'poppins semibold';
    position:relative;
}
.navigation-participants ul li a{
    text-decoration:none;
    color: #FFFFFF;
    /* border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent; */
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

.navigation-participants ul li.active a::after{
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #b8212f;
    content: " ";
    position: absolute;
    bottom: 5px;
    left:50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);    
    transform: translateX(-50%);
    z-index: 10;
}

.navigation-participants ul li.active a{
    color:#b8212f;
	/*text-decoration: underline;*/
    /* border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 3px solid;
    border-bottom: 3px solid; */
}
.navigation-participants ul li a:hover{
    color:#f56675;
}
.navigation-participants ul li.active a:hover{
      color:#b8212f;
      /*text-decoration: underline;*/
      /* border-bottom: 3px solid; */
}

.info-participants{
	/* background-color:#e7e2dc; */
	/* background-color:#301719; */
	background-image: url("../images/texture-bg-rotated-2.jpg");
	background-size: cover;
	background-position: center;
	position: relative;
	top:-55px;
    box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.55) inset;
    -webkit-box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.55) inset;
    -moz-box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.55) inset;
	/*height:700px;*/
	overflow: auto;
	color: #d5c7b8;
}

.info-participants .container{
  max-width: 850px;
}

.membre-participant{
	padding: 60px 30px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition:  all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.membre-participant.active{
	display: block;
}
.membre-participant.hide{
	display: none;
}

.contenu-membre{
	display:flex;
    align-items: center;
}

.profil-membre{
	min-width: 25%;
	margin-right: 45px;
}
.profil-membre h1{
	margin:0;
}
.profil-membre ul{
	list-style: none;
	margin:0;
	padding:0;
}
.profil-membre ul li img{
    width: 150px;
    border-radius: 50%;
    margin-top:25px;
    box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.55);
    -webkit-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.55);
}

.bio-membre{
    font-family: 'poppins medium';
    font-size: 19px;
    text-align:  justify;
    /* font-style: italic; */
}

#participants-mobile .bio-membre{
    text-align: center;
}

/* .bio-membre{
	font-style: italic;
	-webkit-columns: 2;
	-moz-columns: 2;
	columns: 2;
	-webkit-column-gap: 40px;
	-moz-column-gap: 40px;
	column-gap: 40px;
} */

#footer{
	/*height:150px;*/
	background-image: url("../images/texture-bg.jpg");
	background-size: cover;
/*	margin-top:-55px;*/
	color:#FFFFFF;
	padding: 35px 0 20px 0;
	/*align-items: center;*/
}
#footer .container{
    display: flex;
   align-items: center;
}

.left-footer{
	width:33.3%;
}
.center-footer{
	width:33.3%;
	text-align: center;
}
.right-footer{
	width:33.3%;
	text-align: right;
}

/* .left-footer h3{
	margin-bottom:10px;
} */
.left-footer img{
	/* width:235px; */
    width: 55%;
	/* padding:0px 4px 0px 0px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition:  all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; */
}

.center-footer p{
	display: flex;
	align-items: center;
	justify-content: center;
}
.center-footer p img{
	margin:0 10px;
    vertical-align:bottom;
}
.copyrights{
    padding-top:14px;
    font-size: 12px;
}

.right-footer ul{
    list-style-type:none;
	padding: 0;
	margin:0;
}
.right-footer ul li{
    margin:0 0 6px;
    font-size: 11px;
}
.right-footer ul li a{
    color: #FFFFFF;
    text-decoration:none;
    /*font-family:"montserrat medium"; */
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition:  all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.right-footer ul li a:hover{
    color: #f3bb67;
}

.logos-footer-mobile{
    display: none;
}

@media screen and (max-width: 455px) {
  .copyrights{
      font-size: 12px;
  }
}
  
/* @media screen and (max-width: 530px) {
    #header-alert{
        font-size: 12px !important;
    }
} */

@media screen and (max-width: 600px) {
  .photo-membre{
      width:75% !important;
  }
}

@media screen and (max-width: 900px) {
    #header .logo{
        width:55vw;
        padding:40px 0 30px 20px;
    }
    #header .container{
        padding:0;
    }
    #header-alert{
        position: static;
        font-size: 14px;
        width: 100%;
        padding: 10px 30px;
        -webkit-clip-path: none;
        clip-path: none;
        text-align: left;
        box-sizing: border-box;
    }  

    .synopsis-content{
        padding: 25px 15px !important;
    }


    #participants{
        display:none;
        margin-bottom: 0;
    }

    #participants-mobile{
        display:block;
    }

    .info-participants{
        top:0;
    }

    .profil-membre{
        min-width: 100%;
        margin-right: 0px;
    }

    .photo-membre{
        width:50%;
        margin-bottom: 15px;
    }

    .bio-membre{
        -webkit-columns: 1;
        -moz-columns: 1;
        columns: 1;
        -webkit-column-gap: 40px;
        -moz-column-gap: 40px;
        column-gap: 40px;
    }

    #footer .container{
        display: grid;
    }

    .left-footer, .center-footer, .right-footer{
        width:100%;
        text-align: center;
    }

    .left-footer{
        order: 3;
    }
    .center-footer{
        order: 1;
    }
    .right-footer{
        order: 2;
    }

    .right-footer ul li {
        margin: 25px 0 !important;
        font-size: 16px;
    }

    .logos-footer-mobile{
        display: block;
    }
    .logos-footer{
        display: none;
    }
 }

@media screen and (max-width: 1350px) {
    #synosis-and-trailer{
        display: grid;
    }
    .synopsis{
        /*display: none;*/
        width: 100%;
        order: 2;
    }
    .trailer{
        width:100%;
        clear: both;
        order: 1;
    }
    .synopsis-wrap{
        font-size:16px;
    }
    /* .synopsis-wrap h1{
        font-size:22px;
    } */
    .synopsis-content{
        /* display: flex;
        align-items: center; */
        /* height:55vh; */
        height: auto;
        padding: 30px;
    }
}