:root {
    --brightness : 0.3;
}

@font-face {
    font-family: "Bebas Neue";
    src: url('fonts/BebasNeue.otf');
}

/* GRILLE */

body {
    margin: 0;
    font-family: "Raleway", sans-serif;
    font-weight: lighter;
    background: #0a306d;
    color: #ededed;
    font-size: 22px;
    line-height: 1.8;
    cursor: default;
}

.container {
    width: 1200px;
    margin: 0 auto;
}

.hide {
    display: none;
}

.col {
    width: 62%;
}

.col--medium {
    width: 69%;
}

.col--big {
    width: 80%
}

.col--small {
    width: 48%;
}

.col--right {
    float: right;
}

.col--center {
    margin: 0 auto;
}

.clear {
    clear: both;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.shadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* LIENS */

.link {
    text-decoration: none;
    color: #BF2540;
    font-weight: bold;
    cursor: pointer;
}

.link:hover {
    border-bottom: 1px solid #BF2540;
}

.link__groupe {
    color: white;
    position: relative;
}

.link__groupe:before {
    content: "";
    height: 10px;
    width: 10px;
    border: 3px solid #fff;
    border-left: none;
    border-top: none;
    transform: rotate(135deg);
    animation: clickOpacity 1.5s infinite;
    position: absolute;
    top: 12px;
    right: -30px;
}



/* SECTIONS */

.section {
    padding: 200px 0;
}

.header {
    height: 620px;
    background:  url(images/bg-1.png) no-repeat center, url(images/background-header.png) no-repeat top center fixed;
    background-size: 100%;
    padding: 185px 0 0 105px;
}

.context__img {
    position: relative;
    padding: 30px;
    
}

.context__img:before {
    content: "";
    background: url(images/logo-netflix.png) no-repeat;
    background-size: contain;
    position: absolute;
    height: 378px;
    width: 205px;
    top: 70px;
    left: -400px;
}

.context__img:after {
    content: "";
    background: url(images/contexte_avatar.png) no-repeat center;
    background-size: contain;
    position: absolute;
    left: -520px;
    bottom: -220px;
    height: 406px;
    width: 371px;
}

.services {
    background: rgba(8,40,90,0.7);
    padding: 40px 120px 60px;
    box-sizing: border-box;
}

.services__bg {
    position: relative;
    background: url(images/logo.png) no-repeat 3% 2.5% #041226;
    background-size: 15%;
}

.presentation {
    background: url(images/lecteur.png) no-repeat 3% 1.9%;
    background-size: 15%;
}

.presentation__liste {
    display: block;
    list-style: none;
    margin: 86px 0 0 ;
    padding: 0;
}

.presentation__vid {
    width: 1200px;
    margin: 100px 0 120px;
    position: relative;
    cursor: pointer;
}

.presentation__vid--click {
    content: "";
    background: url(images/click.png) no-repeat center;
    background-size: cover;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    transform: translate(-31%, -50%);
    left: 50%;
    animation: clickOpacity 1.5s infinite;
}

@keyframes clickOpacity {
    0% {opacity: 0}
    50% {opacity: 1}
    100% {opacity: 0}
}

.presentation__dailymotion {
    position: relative;
    margin: 226px 0 253px;
}

.presentation__dailymotion:before {
    content: "";
    position: absolute;
    top: -149px;
    left: 0;
    width: 407px;
    height: 76px;
    background: url(images/dailymotion.png) no-repeat center;
    background-size: cover;
}

.presentation__hbo {
    position: relative;
}

.presentation__hbo:before {
    content: "";
    width: 184px;
    height: 90px;
    position: absolute;
    top: -172px;
    left: 0;
    background: url(images/hbo.png) no-repeat center;
    background-size: contain;
}

.presentation__yt {
    position: relative;
    margin-top: 221px;
}

.presentation__yt:before {
    content: "";
    width: 184px;
    height: 90px;
    position: absolute;
    top: -156px;
    left: 0;
    background: url(images/youtube.png) no-repeat center;
    background-size: contain;
}

.presentation__manque {
    margin: 220px auto;
    box-sizing: border-box;
    padding: 43px;
    background: #041226;
    position: relative;
}

.presentation__manque:before {
    content: "";
    background: url(images/presentation-avatar.png) no-repeat center;
    background-size: contain;
    position: absolute;
    width: 117px;
    height: 404px;
    left: -93px;
    bottom: -37px;
}

.presentation__manque:after {
    content: "";
    background: url(images/presentation-demogorgon.png) no-repeat center;
    background-size: contain;
    position: absolute;
    width: 172px;
    height: 533px;
    right: -220px;
    bottom: -128px;
}

.presentation__remarque {
    background: #041226;
    margin-top: 120px;
    padding: 20px 40px 40px;
    box-sizing: border-box;
    position: relative;
}

.presentation__remarque:before {
    content: "";
    background: url(images/remarque-avatar.png) no-repeat center;
    background-size: contain;
    width: 203px;
    height: 422px;
    position: absolute;
    right: -293px;
    top: 41px;
}

.presentation__remarque:after {
    content: "";
    background: url(images/remarque-demogorgon.png) no-repeat center;
    background-size: contain;
    width: 190px;
    height: 507px;
    position: absolute;
    right: -437px;
    top: 3px;
}

.groupe {
    background: #041226;
}

.groupe__liste {
    margin: 0;
    padding: 0;
    height: 300px;
    list-style: none;
}

.groupe__liste--el {
    float: left;
    margin-right: 50px;
    width: 250px;
    height: 250px;
    border: 4px solid #0a306d;
    cursor: pointer;
    background: #010712;
    box-sizing: border-box;
    position: relative;
}

.active {
    border: 4px solid #F38255;
}

.groupe__liste--el.active:after {
    content: "";
    position: absolute;
    bottom: -55px;
    left: 73px;
    border-right : 40px solid transparent;
    border-bottom : 40px solid #010307;
    border-left : 40px solid transparent;
}

.groupe__liste--el:first-child {
    background: url(images/Capu.manu-logo-white.png) no-repeat center;
    background-size: cover;
    margin-left: 25px;
}

.groupe__liste--el:nth-child(2) {
    background: url(images/adeline.png) no-repeat center;
    background-size: cover;
}

.groupe__liste--el:nth-child(3) {
    background: url(images/aline.png) no-repeat center;
    background-size: cover;
}

.groupe__liste--el:nth-child(4) {
    background: url(images/mariam.png) no-repeat center;
    background-size: contain;
    margin-right: 0;
}

.groupe__liste--el:hover {
    border: 4px solid #F38255;
}

.groupe__txt {
    padding: 120px 0;
    background: url(images/bg_manon.png) no-repeat 30% bottom #010307;
    background-size: cover;
    position: relative;
}

.groupe__txt:nth-child(3){
    background: url(images/bg_adeline.png) no-repeat bottom #010307;
    background-size: cover;
}

.groupe__txt:nth-child(4){
    background: url(images/bg_aline.png) no-repeat bottom #010307;
    background-size: cover;
}

.groupe__txt:nth-child(5){
    background: url(images/bg_mariam.png) no-repeat bottom #010307;
    background-size: cover;
}


/* CITATION */

.quote {
    width: 76%;
    position: relative;
    margin: 170px auto;
    font-size: 35px;
}

.quote:before {
    content: "“";
    position: absolute;
    top: 0;
    left: -11px;
}

.quote:after {
    content: "– Adeline, Manon, Mariam, Aline.";
    font-size: 24px;
    position: absolute;
    bottom: -40px;
    right: 14px;
}

/* TITRES */

.title {
    font-size: 45px;
    margin: 20px 0;
    font-family: "Bebas Neue", sans-serif;
    letter-spacing: 2px;
}

.title--small {
    font-size: 31px;
}

.title--header {
    background: url(images/bg-1.png) no-repeat center;
    background-size: cover;
}

/* TEXTES */

.txt {
    margin: 0;
}

.txt__service {
    margin-top: 170px;
}

txt__groupe {
    margin-top: 45px;
}

.bold {
    font-weight: bold;
    color: #F38255;
}


/* PLAYER */

.player__vid {
    filter: url("filters.svg#filter-id");
      -webkit-filter: brightness(var(--brightness));
}

.input {
    position: absolute;
    transform: rotate(-90deg);
    width: 70px;
    top: -60px;
    cursor: pointer;
    
}

.bright {
    left: -19px;
    display: none;
}

.volume {
    left: -20px;
   display: none;
}

.player {
    width: 1200px;
    height: 675px;
    position: relative;
    margin: 0 auto;
}

.player__nav {
    display: inline-block;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 41px;
    left: 59px;
    background: #262626;
    
    /*styles*/
    width: 1084px;
    height: 48px;
    border-radius: 5px;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.8);
}

.player__el {
    list-style: none;
    float: left;
    width: 45px;
    margin: 0;
    padding: 35px 0 13px;
    border-right: 1px solid #151515;
    cursor: pointer;
    position: relative;
    
}

.player__el--play {
    background: url(images/icon-play.png) no-repeat center;
    background-size: 23px;
}

.player__el--play:hover {
    background: url(images/icon-play-hover.png) no-repeat center;
    background-size: 28px;
}

.player__el--pause {
    background: url(images/icon-pause.png) no-repeat center;
    background-size: 23px;
}

.player__el--pause:hover {
    background: url(images/icon-pause%20-%20hover.png) no-repeat center;
    background-size: 28px;
}

.player__el--vol{
    background: url(images/icon-volume.png) no-repeat center;
    background-size: 23px;
}

.player__el--vol:hover{
    background: url(images/icon-volume-hover.png) no-repeat center;
    background-size: 28px;
}

.player__el--bright{
    background: url(images/icon-brightness.png) no-repeat center;
    background-size: 33px;
    position: relative;
}

.player__el--bright:hover{
    background: url(images/icon-brightness-hover.png) no-repeat center;
    background-size: 38px;
}

.player__el--subtitles{
    float: right;
    background: url(images/icon-subtitle.png) no-repeat center;
    background-size: 23px;
    border-left: 1px solid #151515;
}

.player__el--subtitles:hover{
    background: url(images/icon-subtitle-hover.png) no-repeat center;
    background-size: 28px;
}

.subtitles {
    position: absolute;
    bottom: 115px;
    left: 40%;
}

/* APPARENCE INPUT */

input[type=range]{
    -webkit-appearance: none;
    background: #262626;
    padding: 10px 5px;
    border-radius: 2px;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #c4c4c4;
    border: none;
    border-radius: 5px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #B70710;
    margin-top: -5px;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

input[type=range]::-moz-range-progress {
    background: black;
}

input[type=range].progress {
    width: 1084px;
    background: transparent;
}

.progress {
    position: absolute;
    bottom: 90px;
    left: 55px;
    cursor: pointer;
}