@font-face {
  font-family: "montserrat-light";
  src: url("fonts/Montserrat-Light.otf");
}
@font-face {
  font-family: "montserrat-regular";
  src: url("fonts/Montserrat-Regular.otf");
}

@font-face {
  font-family: "montserrat-bold";
  src: url("fonts/Montserrat-Bold.otf");
}

@font-face {
  font-family: "montserrat-italic";
  src: url("fonts/Montserrat-MediumItalic.otf");
}

body {
  position: relative;
}

/* SLIDER */
.slider-container {
  position: relative;
  width: 100%;
  z-index: 1;
}

.slide {
  margin: auto;
  position: absolute;
  left: 6px;
  width:100%;
  height: 570px;
  opacity: 0;
  z-index: 1;
  background-repeat: no-repeat;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
}

.showing {
    opacity: 1;
    z-index: 2;
}

.slide:nth-of-type(1) {
background-image:url("../img/slider/thewitcher.png");
}
.slide:nth-of-type(2) {
background-image:url("../img/slider/stranger.png");
}
.slide:nth-of-type(3) {
    background-image:url("../img/slider/overwatch.png");
}
.slide:nth-of-type(4) {
    background-image:url("../img/slider/ghostbuster.png");
}
/*end slider*/

/*media player style*/
button.fullscreen .fullscreenimg{
  width: 20px;
  margin-bottom: 50%;
}

button.fullscreen{
  cursor: pointer;
  text-align: center;
  padding: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  outline: none;
}

button.fullscreen:hover .fullscreenimg {
   box-shadow:300px 0 0 0 #FDC00C inset;
}

button.play-pause-btn{
  cursor: pointer;
  text-align: center;
  padding: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  outline: none;
}

button.play-pause-btn:hover .playbouton {
   box-shadow:300px 0 0 0 #FDC00C inset;
   -moz-border-radius-topleft: 10px;
   -moz-border-radius-topright: 10px;
   -moz-border-radius-bottomright: 10px;
   -moz-border-radius-bottomleft: 10px;
   -webkit-border-radius: 10px 10px 10px 10px;
   border-radius: 10px 10px 10px 10px;

}

.playbouton{
  width: 20px;
  margin-bottom: 50%
}

button.stop{
  cursor: pointer;
  text-align: center;
  padding: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  outline: none;
}
button.stop:hover .stopbouton {
   box-shadow:300px 0 0 0 #FDC00C inset;
   -moz-border-radius-topleft: 10px;
   -moz-border-radius-topright: 10px;
   -moz-border-radius-bottomright: 10px;
   -moz-border-radius-bottomleft: 10px;
   -webkit-border-radius: 10px 10px 10px 10px;
   border-radius: 10px 10px 10px 10px;
}
.stopbouton{
  width: 20px;
  margin-bottom: 50%
}
button.mutebtn{
  cursor: pointer;
  text-align: center;
  padding: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  outline: none;
}

button.mutebtn:hover .muteimg {
   box-shadow:300px 0 0 0 #FDC00C inset;
   -moz-border-radius-topleft: 10px;
   -moz-border-radius-topright: 10px;
   -moz-border-radius-bottomright: 10px;
   -moz-border-radius-bottomleft: 10px;
   -webkit-border-radius: 10px 10px 10px 10px;
   border-radius: 10px 10px 10px 10px;
}

.muteimg{
  width: 20px;
  margin-bottom: 50%;
}

.controlPanel {
  display: flex;
  align-items: center;
  margin: auto;
  width: 710px;
  height: 30px;
  z-index: 2147483647;
}

.play-pause-btn{
  height: 30px;
  outline: none;
  background-image: url(../img/playbtn.png);
  border: none;
  border-radius:1px;
  box-shadow: 0 9px #95a5a6;
}
.curtimetexte{
  color: #fff;
  font-family: montserrat-regular;
  font-size: 11px;
}

.durtimetexte {
  color: #fff;
  font-family: montserrat-regular;
  font-size: 11px;
}

.Playercontainer {
  display: none;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  height: 100%;
}

.video {
  height: 400px;
}

.volumeBar {
  width: 80px;
}

.overlaycontrol {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.progressBar:not(value) {
  /* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
}

/* Styling the determinate progress element */

.progressBar[value] {
  cursor: pointer;
	/* Get rid of the default appearance */
	appearance: none;

	/* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
	border: none;

	/* Add dimensions */
	width: 100%; height: 6px;

	/* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
	  background-color: whiteSmoke;
	  border-radius: 1px;
	  box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;

	/* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
	color: #FDC00C;

	position: relative;
  margin-left: 1%;
  margin-right: 1%;
}

/*
Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element.
-webkit-progress-bar -> To style the progress element container
-webkit-progress-value -> To style the progress element value.
*/

.progressBar[value]::-webkit-progress-bar {
  background-color: whiteSmoke;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .5) inset;
}

.progressBar[value]::-webkit-progress-value {
  background-color: #FDC00C;
  border-radius: 2px;
  background-size: 35px 20px, 100% 100%, 100% 100%;
}

input[type=range] {
    margin: auto;
    outline: none;
    padding: 0;
    margin-left: 1%;
    margin-right: 1%;
    width: 20%;
    height: 6px;
    background-color: #FDC00C;
    background-size: 50% 100%;
    background-repeat: no-repeat;
    border-radius: 10px;
    cursor: pointer;
    -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
    box-shadow: none;
    border: none;
    background: transparent;
    -webkit-appearance: none;
}

input[type=range]::-moz-range-track {
    box-shadow: none;
    border: none;
    background: transparent;
}

input[type=range]::-moz-focus-outer {
    border: 0;
}

input[type=range]::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    border: 0;
    background: #fff;
    border-radius: 100%;
    box-shadow: 0 0 1px 0px rgba(0,0,0,0.1);
    -webkit-appearance: none;
}

input[type=range]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 0;
    background: #fff;
    border-radius: 100%;
    box-shadow: 0 0 1px 0px rgba(0,0,0,0.1);
}
/*END media player style*/

/*nav bar*/
.header-container {
  width: 100%;
  background: #1a1a1a;
  height: 80px;
}

.nav-container {
  width: 85%;
  display: flex;
  margin: auto;
}

.logo-container {
  width: 15%;
  padding-top: 5px;
}

.nav-list {
  display: flex;
  width: 55%;
}

.logo-nav {
  width: 115%;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: #000;
}

.nav-list {
  padding: 35px 0 0 20px;
  width:65%;
}

.nav-list-items {
  text-transform: uppercase;
  font-family: montserrat-light;
  font-size: 13px;
  padding: 0 14px;
}

.nav-list-link {
  color: #cccccc;
}

.nav-list-link:hover {
  color: #FDC00C;
}

.icon-user-container {
  width: 100%;
  padding: 21px 0 17px 0;
  text-align: right;
}

.icon-user {
  width: 75%;
}

.search-bar-container {
  width: 20%;
  padding-top: 25px;
}

.search-bar {
  border-radius: 20px;
  height: 30px;
  width: 200px;
  color: #cccccc;
  border: 1px solid #FDC00C;
  font-size: 12px;
  font-family: montserrat-regular;
  padding-left: 10px;
  background: #444;
}

/*dropdownmenu*/
.dropdown-menu-container {
  width : 5%;
}

.dropdown-content {
  display: none; /*don't show it on default*/
  position: absolute; /*dropdown needs to be below the text*/
  z-index: 1000;
  margin-left: -92px;
  width: 200px;
}
.dropdown-menu-container:hover .dropdown-content {
  display: inline-block;
}
.dropdown-content .link {
  display: block; /*not inline because we want to skip lines*/
  border-top: 1px solid #444;
}
/*css du dépliant*/
.link, .icon-user-container {
  text-decoration: none;
  color:#afafaf;
  font-size:13px;
  text-transform:uppercase;
  font-family: montserrat-regular;
  background:  #1a1a1a;
  outline: none;
  transition: background 0.3s;
 }

.link {
  padding: 15px;
}

.link:hover {
  background: #fdc00c;
  color:black;
}
.link:active, .icon-user-container:active {
background: #ff9900;
text-align:left;

}
/* end dropdown menu */
/*end nav bar*/

/*Main part*/
.body {
  background: #000;
}

.body-container {
  width: 85%;
  margin: auto;
}

.miniatures-container {
  text-align: center;
}

.main-img-container {
  width: 100%;
  height: 430px;
  overflow: hidden;
  margin: 2% auto;
  position: relative;
}

.movies-presentation {
  height: 750px;
}

/*modal*/
.modal {
  display: none;
}

.modal-container {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: 100%;
}

.modal-close-button {
  position: absolute;
  z-index: 100;
  width: 35px;
  height: 35px;
  right: 5px;
  top: 5px;
}

.video-close-button {
  position: absolute;
  z-index: 100;
  width: 35px;
  height: 35px;
  right: 175px;
  top: 5px;
}

.close-button-modal, .close-button-video {
  width: 100%;
}

.modal-header {
  display: flex;
  justify-content: center;
  margin: 20px 0 10px 0;
}

.text-modal-header {
  font-family: montserrat-regular;
  text-transform: uppercase;
  font-size: 14px;
  padding: 0 20px;
}

.text-modal-header:hover {
  font-family: montserrat-regular;
  text-transform: uppercase;
  font-size: 14px;
  padding: 0 20px;
  color: #FDC00C;
}

.global-note {
  color: #FDC00C;
}

.reviews-modal-container {
  display: none;
}

.img-modal-container {
  width: 55%;
}

.img-modal {
  height: 100%;
}

.txt-modal-container {
  width: 45%;
  color: #cccccc;
  text-align: left;
  padding: 0 20px;
  background: #1a1a1a;
}

.title {
  font-family: montserrat-bold;
  text-transform: uppercase;
  font-size: 14px;
  padding: 10px 0;
}

.year {
  font-family: montserrat-regular;
  text-transform: uppercase;
  font-size: 14px;
  padding: 10px;
}

.title-year, .rated-movie, .rate-info {
  display: flex;
}

.rated-movie {
  flex-wrap: wrap;
}

.stars-review {
  display: flex;
  padding: 5px 0;
  font-family: montserrat-regular;
  font-size: 13px;
}

.stars {
  width: 50px;
}

.aka {
  width: 110px;
}

.main-reviews-container {
  width: 100%;
}

.last-review-container {
  display: flex;
  padding: 10px 0;
  font-family: montserrat-regular;
  border-bottom: 1px solid #444;
  line-height: 18px;
}

.name {
  font-size: 13px;
  font-family: montserrat-bold;
}

.member-rate {
  color: #FDC00C;
}

.post {
  font-size: 13px;
}

.location, .age {
  font-size: 12px;
}

.post-date {
  font-size: 12px;
  padding-left: 10px;
  font-family: montserrat-italic;
}

.profile-container {
  width: 30%;
}

.post-container {
  width: 70%;
}

.last-reviews-title {
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding: 10px;
  margin: 20px 0 0 0;
  font-family: montserrat-regular;
  text-transform: uppercase;
  font-size: 12px;
}

.voteNumber {
  padding-left: 20px;
  color: grey;
  font-size: 12px;
}

.duration {
  font-family: arial;
  font-size: 14px;
  padding: 5px 0;
}

.date {
  font-family: arial;
  font-size: 14px;
  padding: 5px 0 20px 0;
}

.description {
  font-family: arial;
  font-size: 14px;
  line-height: 18px;
}

.video-src-container {
  margin: 30px auto;
}

.video-src {
  background: #444;
  padding: 5px 10px;
  font-family: montserrat-regular;
  text-transform: uppercase;
  font-size: 14px;
  text-align: center;
  color: #cccccc;
}

.video-src:hover {
  color: #FDC00C;
}

/*end modal*/

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

.miniature-container {
  width: 20%;
  overflow: hidden;
}

.miniature {
  width: 100%;
  transition: transform 0.5s ease-in-out;
}

.miniature-container:hover .miniature{
  transform: scale(1.15);
  opacity: 0.9;
}

.tags-container {
  display: flex;
}

.category-tag-list {
  justify-content: space-between;
  width: 800px;
  margin-top: 58px;
  margin-bottom: 40px;
  display: none;
}

.tag-item {
  font-family: montserrat-regular;
  text-transform: uppercase;
  font-size: 14px;
  color: #cccccc;
  background: #444;
  padding: 10px 10px;
  border-radius: 10px;
}

.tag-item:hover {
  color: #FDC00C;
}

.tag-movies {
  width: 100px;
  background: #FDC00C;
  padding: 10px 10px;
  font-family: montserrat-regular;
  text-transform: uppercase;
  font-size: 14px;
  text-align: center;
  margin: 58px 0 40px 0;
}

.tag-categories {
  width: 120px;
  background: #FDC00C;
  padding: 10px 10px;
  font-family: montserrat-regular;
  text-transform: uppercase;
  font-size: 14px;
  text-align: center;
}
/*end main part*/

/*Footer*/
.footer-container {
  margin-top: 20px;
  background: #1a1a1a;
  width: 100%;
  padding-bottom: 10px;
}

.row-container {
  display: flex;
  width: 85%;
  margin: auto;
  padding: 20px 0;
}

.footer-left-container {
  width: 40%;
}

.footer-middle-container {
  width: 30%;
}

.footer-right-container {
  width: 30%;
}

.footer-logo-container {
  width: 70%;
  margin-left: -20px;
  padding-top: 15px
}

.footer-logo {
  width: 100%;
}

.footer-icons-container {
  display: flex;
}

.icon-container {
  width: 12%;
  padding-right: 5px;
}

.footer-icon {
  width: 90%;
  text-align: center;
  transition: transform 0.5s ease-in-out;
}

.footer-icon:hover {
  transform: scale(1.15);
  opacity: 0.9;
}

.newsletter-container {
  padding-top: 15px;
}

.newsletter-text {
  font-family: montserrat-regular;
  text-align: left;
  color: #cccccc;
  font-size: 13px;
  padding-top: 5px;
}

.newsletter-button {
  height: 25px;
  font-family: montserrat-regular;
}

.newsletter-subscribe {
  font-family: montserrat-regular;
}

.newsletter-input {
  font-family: montserrat-regular;
  margin: 10px 0;
  width: 180px;
}

.footer-nav-title {
  font-family: montserrat-regular;
  text-transform: uppercase;
  color: #cccccc;
  font-size: 14px;
  padding: 30px 0 20px 0;
}

.footer-nav-item {
  text-align: left;
}

.footer-link {
  color: #cccccc;
  font-family: montserrat-regular;
  line-height: 25px;
  font-size: 13px;
}

.footer-link:hover {
  color: #FDC00C;;
}


.credit {
  font-family: montserrat-regular;
  color: #cccccc;
  font-size: 12px;
  padding-left : 30px;
}
/*end footer*/