/**
**********POLICES**********
 */
@font-face {
    font-family: 'ralewaybold';
    src: url('/assets/polices/raleway-bold-webfont.woff2') format('woff2'),
    url('/assets/polices/raleway-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ralewaysemibold';
    src: url('/assets/polices/raleway-semibold-webfont.woff2') format('woff2'),
    url('/assets/polices/raleway-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ralewaymedium';
    src: url('/assets/polices/raleway-medium-webfont.woff2') format('woff2'),
    url('/assets/polices/raleway-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ralewayregular';
    src: url('/assets/polices/raleway-regular-webfont.woff2') format('woff2'),
    url('/assets/polices/raleway-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.font-raleway-bold{
    font-family: 'ralewaybold';
}

.font-raleway-semibold{
    font-family: 'ralewaysemibold' !important;
}

/**
**********CSS COMMUN**********
 */
body {
    background-color: white;
    color: white;
    overflow-wrap: break-word;
    padding: 0 !important;
}
/**
modification scrollbar sur firefox et ie
 */
html {
    scrollbar-color: #312B29 transparent;

}
/**
modification scrollbar sur chrome et safari
 */
/**
fond du scroll
 */
::-webkit-scrollbar-track {
    background: transparent;
}
/**
scroll
 */
::-webkit-scrollbar-thumb {
    background: #312B29;
}
footer {
    float: left;
    bottom: 0;
    width: 100%;
}
h1 {
    font-family: 'ralewaybold', sans-serif;
    font-size: calc(40px + 6 * (100vw - 300px) / 1300) !important;
}

.my-h1{
    font-size: calc(30px + 10 * (100vw - 600px) / 1600) !important;
}

h2 {
    font-family: 'ralewaybold', sans-serif;
    font-size: calc(32px + 6 * ((100vw - 300px) / 1300));
}

h3 {
    font-family: 'ralewaybold', sans-serif;
    font-size: calc(28px + 6 * ((100vw - 300px) / 1300));
}
h4 {
    font-family: 'ralewaybold', sans-serif;
    font-size: calc(24px + 6 * ((100vw - 300px) / 1300));
}
h5 {
    font-family: 'ralewaybold', sans-serif;
    font-size: calc(20px + 6 * ((100vw - 300px) / 1300));
}
h6 {
    font-family: 'ralewaybold', sans-serif;
    font-size: calc(16px + 6 * ((100vw - 300px) / 1300));
}
p {
    font-family: 'ralewayregular', sans-serif;
    font-size: calc(18px + 6 * ((100vw - 300px) / 1300));
    line-height: 1.4;
}
.my-p {
    font-family: 'ralewayregular', sans-serif;
    font-size: calc(14px + 6 * ((100vw - 300px) / 1300));
    line-height: 1.4;
}
li {
    font-family: 'ralewayregular', sans-serif;
    font-size: calc(18px + 6 * ((100vw - 300px) / 1300));
    line-height: 1.4;
}
.font-privacy, .font-privacy > li {
    /*font-size: 1rem;*/
    font-family: 'ralewayregular', sans-serif;
    font-size: calc(18px + 6 * ((100vw - 300px) / 1300));
}
.footer-police {
    font-size: calc(14px + 4 * ((100vw - 300px) / (1300))) !important;
}
header {
    /*position: relative;*/
    /*min-height: 100vh;*/
}

#header-film{
    height: 30px;
}

section {
    color: black;
    /*min-height: 100vh;*/
}
#homeBody, html {
    max-width: 100%;
    overflow-x: hidden;
}

#homeBody-no-scroll {
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

.footer-copyright p {
    font-size: calc(12px + 2 * ((100vw - 300px) / (1300))) !important;
    line-height: 1.2 !important;
}
.bg-white {
    color: #000;
}
.bg-black {
    background-color: #000;
    color: #fff;
}
.shortapple {
    font-size: 25px;
    color: white;
}
.shortandroid {
    font-size: 25px;
    color: white;
}
table {
    table-layout: fixed;
}
.borderless td, .borderless th {
    border: none;
}
.shadow-lg {
    min-width: 50%;
}
img {
    max-height: 750px;
    max-width: 100%;
    min-height: 100%;
}
.w-15 {
    width: 15% !important;
}
.w-10 {
    width: 10% !important;
}
.w-80 {
    width: 70% !important;
}
.w-30 {
    width: 30% !important;
}
.w-40 {
    width: 40% !important;
}
textarea {
    max-width: 100%;
    max-height: 100%;
}
.bg-footer {
    background-color: #312B29;
}
.modal-body {
    border-radius: calc(1.25rem - 1px);

}
.logoModal {
    width: 100px;
    height: 80px;
    padding: 8px;
    border-radius: calc(1.25rem - 1px);
    background-image: linear-gradient(#F7A93F, #C8285A);
    text-align: center;
}
.modal-content, .modal-body, .modal-footer, .modal-header {
    border: 0;
}
.close {
    opacity: 1.0;
    color: white;
}
.modal-backdrop.show {
    opacity: 0.8;
}
.link-unstyled, .link-unstyled:hover {
    color: white;
    text-decoration: none;
}
.navbar-press, .navbar-product {
    background-color: #F7A93F;
}

.navbar-film {
    background-color: #170000;
    max-height: 6vh;
    min-height: 6vh;
}

#mainNav {
    transition: top 0.3s;
}
.partner-logo {
    height: 160px;
    min-width: 120px;
    width: 280px;
}
/**
**********PAGE PRODUIT**********
 */
.apple2 img {
    width: 70%;
    min-width: 140px;
}
.playstore2 img {
    width: 70%;
    min-width: 140px;
}
.pltf2 {
    width: 70%;
    min-width: 50px;
    cursor: pointer;
    max-width: 100px;
}

.pltf3 {
    width: 30%;
    min-width: 50px;
}

.pltf5 {
    width: calc(50px + 15 * ((100vw - 300px) / 1300));
    min-width: 50px;
    cursor: pointer;
    max-width: 100px;
}

.div-pltf{
    background-image: url("/assets/img/plateforme.svg");
    background-repeat: no-repeat;
    background-size: calc(41px + 15 * ((100vw - 300px) / 1300));
    background-position-x: 7px;
    background-position-y: 9px;
}

.actors-portrait {
    width: 130px;
    height: 160px;
    overflow: hidden;
}
.img-wrapper {
    width: 130px;
    height: 130px;
    overflow: hidden;
    border-radius: 50%;
}
.portrait-background {
    background: transparent;
    width: 130px;
    height: 160px;
}
.portrait-circle {
    border-radius: 100%;
    height: 120px;
    width: 120px;
    background-repeat: no-repeat;
    background-size: cover;
}

.portrait-background-small {
    background: transparent;
    width: 90px;
    height: 200px;
}

.portrait-background-small-product {
    background: transparent;
    width: 85px;
    height: 180px;
}

.portrait-background-review {
    background: transparent;
    width: calc(75px + 50 * ((100vw - 300px) / 1300));
    height: calc(100px + 60 * ((100vw - 300px) / 1300));
}

.portrait-circle-small {
    border-radius: 100%;
    height: 90px;
    width: 90px;
    background-repeat: no-repeat;
    background-size: cover;
}

.portrait-square-review {
    border-radius: 15%;
    height: calc(60px + 40 * ((100vw - 300px) / 1300));
    width: calc(60px + 40 * ((100vw - 300px) / 1300));
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    box-shadow: 3px 3px 3px 0 rgba(235,94,9,0.65);
}

.full-btn{
    width: 100%;
    height: 100%;
}

.lineDirector{
    height: 65%;
    border-left: 2px solid white;
    margin-top: 4%;
}

.font-actor {
    font-family: 'ralewayregular', sans-serif;
}

.actor-span{
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    text-align: center;
}
.word-breaker {
    word-wrap: anywhere;
}
.img-wrapper > img {
    width: 100%;
    height: 100%;
}
.pltf4 {
    width: 100%;
    min-width: 50px;
    cursor: pointer;
}
.card-img-overlay {
    position: absolute;
    top: 68%;
    background-image: linear-gradient(to top, #300000, #180000 70%, transparent);
    opacity: 1.0;
    border-bottom-left-radius: calc(1.25rem - 1px);
    border-bottom-right-radius: calc(1.25rem - 1px);
}
.card-img-overlay-top {
    position: absolute;
    background-image: linear-gradient(to bottom, #280000 80%, transparent);
    opacity: 1.0;
    border-top-left-radius: calc(1.25rem - 1px);
}
.card-img-overlay-bottom {
    position: absolute;
    top: 80%;
    background-image: linear-gradient(to top, #280000 50%, transparent);
    opacity: 1.0;
    border-bottom-left-radius: calc(1.25rem - 1px);
    width: 100%;
    height: 20%;
}
.pearl-rate {
    color: orangered;
    font-size: calc(10px + 6 * ((100vw - 300px) / 1300));
}
.cardReview {
    border-radius: 0 calc(1.25rem - 1px) calc(1.25rem - 1px) 0;
}
.cardProduct {
    border: none;
    min-width: 300px;
    margin-top: 10px;
}
.cardProduct2 {
    border: none;
    margin-top: 10px;
    min-width: 170px;
}

.cardProduct5 {
    border: none;
    margin-top: 10px;
    border-radius: 0 0 15px 15px;
}

.cardProduct2-WithoutImportant {
    border: none;
    margin-top: 10px;
}

.cardProduct3 {
    border: none;
    margin-top: 10px;
    max-width: 300px;
}

.cardProduct4 {
    border: none;
    min-width: 220px;
    border-radius: 0 0 15px 15px;
}

.cardReview {
    border: none;
    margin-top: 10px;
    min-width: 170px;
}
.review-content {
    /*max-width: 500px;*/
    /*max-height: 750px;*/
}
.card-img-top {
    border-radius: calc(2.25rem - 1px);
}
.card-img-top-review {
    border-bottom-left-radius: calc(1.25rem - 1px);
    border-top-left-radius: calc(1.25rem - 1px);
}
.product-card-img{
    border-radius: calc(4.25rem - 1px);
}
.product-card-img-top{
    border-top-left-radius: calc(4.25rem - 1px);
    border-top-right-radius: calc(4.25rem - 1px);
}
.previous-chevron, .likes, .dots {
    cursor: pointer;
}
.previous-chevron {
    font-size: calc(16px + 6 * ((100vw - 300px) / 1300));
}
.feedbackButton > button {
    color: orangered;
    background-color: white;
    width: 50px;
}
.feedbackButton > p {
    font-size: calc(12px + 6 * ((100vw - 300px) / 1300));
    line-height: 1.0;
}
.cardProduct > .card-img-overlay > h5 {
    font-size: calc(18px + 6 * ((100vw - 300px) / 1300));
}
.cardProduct2 > .card-img-overlay-top > .row > .col-lg-9 > h5 {
    font-size: calc(15px + 9 * ((100vw - 300px) / 1300));
    font-family: 'ralewaybold', sans-serif;
}
.cardProduct2 > .card-img-overlay-top > .row > .col-lg-9 > h6 {
    font-size: calc(8px + 6 * ((100vw - 300px) / 1300));
    font-family: 'ralewayregular', sans-serif;
}
.cardProduct > .card-img-overlay > h6 {
    font-size: calc(13px + 6 * ((100vw - 300px) / 1300));
    font-family: 'ralewayregular', sans-serif;
}
.cardReview > .card-body-review > .review-content > .review-subtitle > h6 {
    font-size: calc(11px + 6 * ((100vw - 300px) / 1300));
    font-family: 'ralewaybold', sans-serif;
}
.pseudo > p {
    font-size: calc(10px + 6 * ((100vw - 300px) / 1300));
    font-family: 'ralewaybold', sans-serif;
}
.content-review > p {
    font-size: calc(12px + 9 * ((100vw - 300px) / 1300));
    font-family: 'ralewaybold', sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-body-review, .review-content {
    height: 100%;
}
.content-review {
    overflow: scroll;
    text-overflow: ellipsis;
    max-height: 35%;
}
.cardProduct2, .cardReview {
}
.overlay-text {
    position: absolute;
    right: -8%;
    margin: 0;
    top: 2%;
    border-radius: calc(1.25rem - 1px);
    color: white;
    background-color: darkviolet;
    font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
    line-height: 1.0;
    z-index: 10;
}
.overlay-text2 {
    position: absolute;
    right: -25%;
    margin: 0;
    top: 5%;
    border-radius: calc(1.25rem - 1px);
    color: white;
    background-color: darkviolet;
    font-size: calc(12px + 6 * ((100vw - 300px) / 1300));
    line-height: 1.0;
}
.feedbackLibelle {
}
.vod-bg {
    background-color: #373330;
    border-radius: 15px;
}
.mention > .btn {
    background-color: #83002A;
    color: white;
    font-weight: bold;
}

.mention-pointer-none > .btn {
    background-color: #83002A;
    color: white;
    font-weight: bold;
    pointer-events: none;
}

.duration > .btn {
    background-color: #C8285A;
    color: white;
    font-weight: bold;
}

.duration-pointer-none > .btn {
    background-color: #C8285A;
    color: white;
    font-weight: bold;
    pointer-events: none;
}

#div_rating > .btn {
    background-color: #ED7127;
    color: white;
    font-weight: bold;
}
.themes > .btn {
    background-color: #8CB4DC;
    color: white;
    font-weight: bold;
}

.themes-grey > .btn {
    background-color: grey;
    color: white;
    font-weight: bold;
    pointer-events: none;
}

.trailer > .btn > img {
    width: 80px;
}

.embed-video {
    width: 100%;
    height: auto;
    min-height: 300px;
}

.embed-video-height {
    width: 100%;
    height: auto;
}

/**
***********PAGE ARTISTE*****************
 */

.cardArtist {
    border: none;
    border-radius: calc(1.25rem - 1px);
    min-width: 300px;
    margin-top: 10px;
    height: max-content;
    background: transparent;
}
.mini-card {
    border: none;
    max-width: 125px;
    max-height: 175px;
    margin-top: 10px;
}
.bg-artist {
    /*background: black;*/
    background: linear-gradient(to top, #000000 90%, transparent);

}
.part30 {
    height: 30vh;
}
.part70 {
    height: auto;
    position: relative;
    bottom: 95px;
    border-bottom-right-radius: calc(1.25rem - 1px);
    border-bottom-left-radius: calc(1.25rem - 1px);
}
.poster-artist {
    object-fit: cover;
    height: 100%;
    width: 100%;
    border-top-right-radius: calc(1.25rem - 1px);
    border-top-left-radius: calc(1.25rem - 1px);
}
.pyear {
    font-family: 'ralewayregular', sans-serif;
    font-size: calc(14px + 4 * ((100vw - 300px) / 1300));
    line-height: 1.4;
}
.pname {
    font-family: 'ralewayregular', sans-serif;
    font-size: calc(15px + 5 * ((100vw - 300px) / 1300));
    line-height: 1.4;
}

/**
**********HOMEPAGE**********
 */
.homepage {
    position: relative;
    min-height: 100vh;
}

.telephone_img{
    position: relative;
    top: 150px;
}

.plf-div{
    background-color: white;
    border-radius: calc(34px + 81 * ((100vw - 300px) / 1300));
}
.content-wrapper {
}
.background-section, .background-section-review, .collection-background-section-review  {
    background-image: linear-gradient(#F7A93F, #C8285A);
    border-radius: 50%/0 0 100px 100px;
    box-shadow: 0 6px 0 white;
    margin-left: -10%;
    margin-right: -10%;
}
.background-section-review {
    height: 30vh;
}
.subtitle {
    font-family: 'ralewayregular', sans-serif;
    font-size: calc(18px + 6 * ((100vw - 300px) / 1300));
    line-height: 1.4;
}
.header-content {
    /*padding-top: 50px;*/
}
.section-1 {

}
.section-2 {
}
.background-2 {
    background-color: #F5F5F5;
}
.apple img {
    width: 70%;
    min-width: 140px;
    height: auto;
}
.apple2 img, .playstore2 img{
    width: calc(120px + 30 * ((100vw - 300px) / 1300));
    min-width: unset;
    height: auto;
    max-width: unset !important;
}
.apple .btn, .apple2 .btn {
    height: 100%;
}
.playstore img {
    width: 70%;
    min-width: 140px;
    height: auto;
}
.playstore .btn, .playstore2 .btn{
    height: 100%;
}
.block1 {
}
.block3 {
    height: 100%;
}
.loupe, .fanion {
    color: orangered;
    font-size: 50px;
}
.wishlist {
    width: 100%;
    margin-bottom: 10%;
}
.news {
    width: 100%;
    margin-bottom: 10%;
}
.keyword {
    width: 100%;
}
.iphone-x-white {
    /*padding-top: 20px;*/
}
.pltf {
    min-height: 108px;
    width: 108px;
}
.device-mockup {
    width: 50%;
}
.device1 {
    width: 60%;
}
.customCard {
    border: none;
}
.customLink {
    color: #000;
    text-decoration: underline;
}
.customLink:hover {
    text-decoration: none;
    color: #000;
}
.navbar-homepage {
    background-image: linear-gradient(#F7A93F, #C8285A);
}
.phone1 {
    width: 55%;
}
.phone2, .phone3 {
    width: 50%;
}

/**
**********PAGE PRESSE**********
 */
.content {
    word-break: break-word;
}
.press {
    background-image: linear-gradient(#F7A93F, #C8285A);
    border-radius: 50%/0 0 100px 100px;
    box-shadow: 0 6px 0 white;
    margin-left: -10%;
    margin-right: -10%;
    min-height: 100vh;
}
.body-press {
    border-radius: 25px;
}
.content-wrapper-press {
}
/**
**********ADMIN**********
 */
.admin-navbar {
    background-color: #F7A93F;
}

.background-login {
    background-image: linear-gradient(#F7A93F, #C8285A);
    box-shadow: 0 6px 0 white;
    height: 100vh;
    color: white;
}
#article-create {
    color: #000;
    background-image: linear-gradient(#F7A93F, #C8285A);
    box-shadow: 0 6px 0 white;
    min-height: 100vh;
}
.body-admin {
    border-radius: 25px;
}
/**
**********FAQ**********
 */
.question {
    font-weight: bold;
    margin-bottom: 1rem;
    margin-top: 2rem;
    font-style: italic;
}
.answer {
    margin-bottom: 0.5rem;
    font-size: calc(16px + 6 * ((100vw - 300px) / 1300));
}
/**
**********CGU***************
 */
.cgusubtitle {
    font-weight: bold;
    text-decoration: underline;
}

/**
**********BOUTONS COMMENCER***************
 */
.start_button{
    background-color: #4E112C;
    border-radius: 50px;
    border: black;
    outline: none;
    height: 88%;
}

.start_button:active{
    transform: scale(90%);
    outline: none;
}

.start_button:hover{
    transform: scale(90%);
    cursor: pointer;
    outline: none;
}
.start_button:focus-within{
    outline: none;
}

.overlayed {
    pointer-events: none;
}

.img_bousolle{
    min-height: 10px;
    width: auto;
    height: 80% !important;
}

.petit-texte{
    font-size: calc(15px + 6 * (100vw - 300px) / 1300) !important;
}

.petit-texte-com{
    font-size: calc(15px + 4 * (100vw - 300px) / 1300) !important;
}

.moyen-texte{
    font-size: calc(16px + 4 * (100vw - 300px) / 1300) !important;
}

.plus-moyen-texte{
    font-size: calc(16px + 6 * (100vw - 300px) / 1300) !important;
}

.start_demo{
    display: grid;
    width: 60%;
    height: 60px !important;
}

.start_demo:hover{
    text-decoration: none;
    color: white;
    background-color: rgba(255,255,255,10%);
}

/**
**********BOUTONS TERMINER***************
 */
.end_button{
    background: none!important;
    border: none;
    padding: 0!important;
    /*input has OS specific font-family*/
    color: #EB5E09;
    text-decoration: underline #EB5E09;
    cursor: pointer;
    opacity: 75%;
}

.end_button:hover{
    color: #EB5E09;
    opacity: 100%;
    cursor: pointer;
}

.end_button_white{
    background: none!important;
    border: none;
    padding: 0!important;
    color: white;
    text-decoration: underline white;
    opacity: 75%;
}

.end_button_white:hover{
    color: white;
    opacity: 100%;
    cursor: pointer;
}

/**
**********HOME PROFIL***************
 */
.home_demo_home{
    background-image: linear-gradient(#F7A93F, #ED6849, #C8285A);
    min-height: 94vh;
}

.background-adPR{
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.slideDown{
    animation: slideDown 1s ease-in-out forwards;
}

.showSlideDown{
    display: block !important;
    animation: slideDown 1s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}


.slideUp {
    animation: slideUp 1s ease-in-out forwards;
}

@keyframes slideUp {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-100%);
    }
}

.div-adBanner{
    display: flex;
}

.span-adPR{
    color: dimgrey;
    cursor: pointer;
    position: relative;
    left: 3%;
}

.padding-commencer{
    padding-right: 15%;
}

.home_demo{
    min-height: 94vh;
}

.img_signs{
    width: 35% !important;
    min-width: 10px;
    min-height: 10px;
}

.img_welcome_aki{
    width: 50% !important;
    min-width: 10px;
    min-height: 10px;
}

.div_container_start_button{
    height: 85px;
}

.tiny-font{
    font-size: calc(15px + 3 * ((100vw - 300px) / 1300));
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider_home {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider_home:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider_home {
    background-color: #2196F3;
}

input:focus + .slider_home {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider_home:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider_home.round {
    border-radius: 34px;
}

.slider_home.round:before {
    border-radius: 50%;
}


/**
**********DEMO PLATEFORMES***************
 */


.plateform_icon{
    cursor: pointer;
    max-width: none !important;
    width:  calc(60px + 40 * (100vw - 600px) / 1600) !important;
}

.choosen{
    filter: inherit;
}

.not_choosen{
    filter: opacity(40%);
}

/**
**********BACK BUTTON***************
 */
.back_button{
    width: 18px;
}

/**
**********NEXT BUTTON***************
 */

.next_button{
    border: 2px solid #EB5E09;
    color: #EB5E09;
    padding: 5px;
    border-radius: 30px;
    text-decoration: none;
    text-align: center;
    align-content: center;
    background-color: transparent;
    height: 48px;
}

.next_button:active{
    background-color: rgba(235, 94, 9,35%);
    text-decoration: none;
    color: #EB5E09;
    height: 48px;
}

.next_button:hover{
    background-color: rgba(235, 94, 9,35%);
    text-decoration: none;
    color: #EB5E09;
    height: 48px;
    cursor: pointer;
}

.next_button_error:hover{
    animation: shake 0.5s ease-in-out 0s;
}

.next_button_error:active{
    animation: shake 0.5s ease-in-out 0s;
}

@keyframes shake {
    0% {
        margin-left: 0;
    }
    20% {
        margin-left: 1rem;
    }
    40% {
        margin-left: -1rem;
    }
    60% {
        margin-left: 1rem;
    }
    80% {
        margin-left: -1rem;
    }
    100% {
        margin-left: 0;
    }
}


/**
**********NEXT BUTTON***************
 */


.white_next_button{
    border: 2px solid white;
    color: white;
    padding: 5px;
    border-radius: 30px;
    text-decoration: none;
    text-align: center;
    align-content: center;
    background-color: transparent;
    height: 60px;
}

.white_next_button:active{
    background-color: rgba(255,255,255,35%);
    text-decoration: none;
    color: white;
    height: 60px;
}

.white_next_button:hover{
    text-decoration: none;
    color: white;
    background-color: rgba(255,255,255,35%);
    height: 60px;
    cursor: pointer;
}

/**
**********ANSWERS BUTTON***************
 */

.answer_button_stop{
    pointer-events: none !important;
}

.answer_button{
    border: 2px solid #EB5E09;
    color: #EB5E09;
    padding: 5px;
    border-radius: 30px;
    text-decoration: none;
    text-align: center;
    align-content: center;
    background-color: white;
    height: 62px;
    white-space: normal;
}

.answer_choosen{
    background-color: rgba(235, 94, 9,35%) !important;
    color: #EB5E09 !important;
}

.answer_choosen:hover{
    background-color: rgba(235, 94, 9,35%) !important;
    color: #EB5E09 !important;
    cursor: pointer;
}

.answer_not_choosen{
    background-color: white !important;
}

.answer_not_choosen:hover{
    background-color: white !important;
    cursor: pointer;
}

/**
**********NOTE FILMS**********
 */

#yesnoButtonNon, #yesnoButtonOui{
    font-weight: bold;
}

.logo_film{
    z-index: 1;
}

.public-btn{
    background-color: rgba(131,0,42,40%) !important;
}

.duree-btn{
    background-color: rgba(200,40,90,40%) !important;
}
.produit-btn{
    background-color: rgba(43,102,100,80%) !important;
}
.vote-btn{
    background-color: rgba(98,46,2,80%) !important;
}

.coupe{
    content: url('/assets/img/coupe.svg');
    width: 22%;
}

.genre-btn{
    background-color: rgba(140,180,220,40%) !important;
}

.bg-gradient-black{
    background: linear-gradient(rgba(23, 0, 0, 0%), rgba(23, 0, 0, 10%),rgba(23, 0, 0, 40%),rgba(23, 0, 0, 70%),rgba(23, 0, 0, 90%), rgba(23, 0, 0, 90%), rgba(23, 0, 0, 90%), rgba(23, 0, 0, 90%), rgba(23, 0, 0, 90%), rgba(23, 0, 0, 90%),rgb(23, 0, 0), rgb(23, 0, 0)) local
}

.bg-gradient-black-review{
    background: linear-gradient(rgba(23, 0, 0, 0%), rgba(23, 0, 0, 10%),rgba(23, 0, 0, 90%),rgba(23, 0, 0, 100%),rgba(23, 0, 0, 90%), rgba(23, 0, 0, 90%), rgba(23, 0, 0, 90%), rgba(23, 0, 0, 90%), rgba(23, 0, 0, 90%), rgba(23, 0, 0, 90%),rgb(23, 0, 0), rgb(23, 0, 0)) local
}

.big-poster{
    width: 200%;
    height: auto;
    object-fit: cover;
}

.question-title{
    max-width: 94vw;
    margin-left: 3vw;
}

#div_ratings{
    display: flex;
    justify-content: space-between;
}

#input_rating{
    float: right;
}
#label_rating {
    display: block !important;
}

.light-dark-background{
    background-color : #170000;
}

.reverse-background-section {
    background-image: linear-gradient(#F7A93F, #C8285A);
    border-radius: 50%/150px 150px 0 0;
    box-shadow: 0 -60px 50px black;
    margin-left: -10%;
    margin-right: -10%;
}

.height-bg{
    /*padding-bottom: 10vh;*/ /*A changer car c'est pas ouf*/
    min-height: 47vh;
}

.close_trailer{
    position: absolute;
    right: 0;
    bottom: 10px;
}

.ul-temptation{
    margin-top: -2%;
}

.li-temptation{
    display: inline-flex !important;
    justify-content: center;
    width: 100%;
}

/* Rating Star Widgets Style */
.rating-stars ul {
    list-style-type:none;
    padding:0;

    -moz-user-select:none;
    -webkit-user-select:none;
}
.rating-stars ul > li.star {
    display:inline-block;
    cursor: pointer;
}

.content_scrollable{
    overflow-y: scroll;
}
.content_scrollable::-webkit-scrollbar {
    display: none;
}

.div_selection{
    position: absolute;
    right: 0;
    border-radius: 25px;
    background-color: #514343;
    padding: 10px;
    margin-right: 10px;
    margin-top: 10px;
    text-align: center;
    vertical-align: middle;
    display: flex;
    font-weight: bold;
    font-size: larger;
    z-index: 1;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
}

.perle_selection{
    width: 40%;
    height: auto;
}


.sliding-poster{
    position: relative;
    animation-duration: 2s;
    animation-name: slidein;
}


/* Hide scrollbar for IE, Edge and Firefox */
.content_scrollable {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

#the_progress_bar{
    background: linear-gradient(to right,transparent, white);
    color: black;
    font-size: large;
    border-radius: 15px;
}

.my-progress-bar{
    background-color: rgba(0,0,0,10%);
    height: 40px !important;
    position: sticky !important;
    bottom: 0;
}

.text-rating{
    background-color: white;
    border-radius: 20px;
    color: #EB5E09 !important;
}

.poster-shadow-top, .poster-shadow-bottom{
    position: absolute;
    width: 100%;
}

.poster-shadow-bottom {
    bottom: 0;
    height: 20%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9),rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.6) ,rgba(0, 0, 0, 0))
}


.poster-shadow-top{
    top: 0;
    height: 10%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9),rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.4) ,rgba(0, 0, 0, 0))
}

.a_voir_sur{
    background-color: #6d071a;
    position: relative;
    top: -8%;
}

.a_voir_sur2{
    background-color: #6d071a;
    position: relative;
    top: -40px;
}

.a_voir_sur_txt {
    text-decoration: none;
}

.a_voir_sur_txt:hover {
    text-decoration: none;
}

/**
**********PRESENTATION RECO**********
 */

.boussole-anime{
    height: 80vh !important;
    margin-top: -150px;
}

.boussole-anime-container{
    max-height: 50vh;
}

/**
**********RECOMMANDATION**********
 */
.align-start-reco{
    margin-right: 4vw;
    padding-right: 27%;
}

.section-reco{
    height: 94vh;
}

.section-reco-mobile{
    height: 100vh;
}


.section-review{
    height: 90vh;
}

.bg-black-light{
    background-color: rgba(0,0,0,30%);
}

.com-background{
    background-color: #2E1202;
    display: flex;
    border-radius: 15px;
}

.com-background-hidden{
    background-color: transparent;
    color: transparent;
    display: flex;
    border-radius: 15px;
}

.com-right{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.com-pseudo-rate{
    display: flex;
    justify-content: space-between;
}

.com-text{
    font-size: 1.2rem;
    text-align: left;
    margin: 0;
}

.short-com{
    /*max-height: calc((15px + 4 * (100vw - 300px) / 1300) * 4.3);*/
    max-height: calc(1.4 * 3 * 1em);
    overflow: hidden;
    position: relative;
}

.entire-see-more{
    display: none;
}

.clickable-see-more{
    color: #EB5E09;
    cursor: pointer;
}

.com-like{
    display: flex;
}

.portrait-background-small-com {
    background: transparent;
    width: 60px;
}

.portrait-circle-small-com {
    border-radius: 100%;
    height: 60px;
    width: 60px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("/assets/img/avatarAnonyme.svg");
}

.rating-stars ul > li.star2  {
    display:inline-block;
}

.rating-stars ul > li.star2 > i.fa {
    content: url('/assets/img/etoiles/etoileVide.svg');
    width: 90%;
}

.rating-stars ul > li.star2.hover > i.fa {
    content : url("/assets/img/etoiles/etoilePleine.svg");
    width: 90%;
}

.rate > i.star2 {
    content: url('/assets/img/etoiles/etoileVide.svg');
    width: calc(10px + 6 * ((100vw - 300px) / 1300));
    display: inline-block;
}

.rate > i.star2 {
    content : url("/assets/img/etoiles/etoilePleine.svg");
    width: calc(10px + 6 * ((100vw - 300px) / 1300));
    display: inline-block;
}

.star-rating {
    display: inline-block;
}

.star-rating img {
    max-height: none;
    max-width: none;
    width: 17px;
    height: 17px;
    object-fit: cover;
}

.partial-star {
    position: relative;
    width: 17px;
    height: 17px;
    display: inline-block;
    vertical-align: middle;
}

.partial-star img {
    position: absolute;
    top: 0;
    left: 0;
    width: 17px;
    height: 17px;
    object-fit: cover;
}

.partial-star img:first-child {
    z-index: 2;
}

.partial-star img:last-child {
    z-index: 1;
}

.film-poster, .film-poster-mobile{
    width: 100% !important;
    object-fit: cover;
    border-radius: 6%;
    left: 0;
    transition: filter 2s ease;
}

.poster-cover{
    object-fit: cover;
}

.film-poster-mobile{
    border-radius: unset;
}

.overview-class{
    line-height: 1.5 !important;
}

.small-button{
    font-size: calc(11px + 6 * ((100vw - 300px) / 1300)) !important;
}

.div_trailer{
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.trailer{
    transition: opacity 0.3s ease;
    opacity: 1;
}

.navbar-reco{
    display: flex;
    z-index: 10;
    justify-content: space-between;
    width: 100%;
}

.div_overview_little{
    margin-top: 50%;
}

.product-div_overview_little{
    margin-top: 50%;
    overflow: hidden;
}

.div_above_overview{
    top: 0;
    width: 100%;
    max-height: 100vh;
}

.div_above_overview_review{
    top: 0;
    width: 100%;
    max-height: 90vh;
}

.main_container_poster{
    position: relative;
    margin: 0 auto;
    width: 80%;
    border-radius: 6%;
    overflow: hidden;
}

.div_back_reco, .div_back_reco_mobile, .div_exit_reco, .div_exit_reco_mobile{
    top: 3%;
    background-color: white;
    border-radius: 15px;
    color: #EB5E09;
    font-weight: bold;
    position: absolute;
    transition: transform 0.3s;
    transform-origin: center;
    will-change: transform;
    z-index: 1000;
}

.div_exit_reco, .div_exit_reco_mobile{
    right: 7%;
    display: flex;
}

.div_back_reco, .div_back_reco_mobile{
    left: 7%;
}

.div_exit_reco_mobile, .div_back_reco_mobile {
    position: absolute;
    top: 4%;
}

.div_txt_exit{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    line-height: 0.95em;
}

.div_pltf_reco, .div_pltf_reco_mobile{
    background-color: white;
    color: #521531;
    position: absolute;
    display: none;
    bottom: 50%;
    left: 30%;
    text-align: center;
    align-items: center;
    width: 40%;
    justify-content: space-evenly;
    border-radius: 150px;
    opacity: 0;
    transition: opacity 1s ease;
}

.div_pltf_reco_mobile{
    z-index: 4;
}

.div_pltf_reco.flex, .div_pltf_reco_mobile.flex{
    display: flex;
    opacity: 1;
}

.div_pltf_reco.hide, .div_pltf_reco_mobile.hide{
    opacity: 0;
}

.reco_a_voir_sur_txt{
    font-weight: bold;
    font-size: 1.1em;
}

.plateform_icon3{
    max-width: none !important;
    width:  calc(50px + 40 * (100vw - 600px) / 1600) !important;
}

.input_nb_selection, .div_nb_selection{
    background-color: #EB5E09;
    color: white;
    border-radius: 50%;
    width: 2em;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -1em;
    right: -1em;
    border: 0;
}

.separator{
    height: calc(25px + 15 * ((100vw - 600px) / 1600));
    background-color: white;
    border: 2px solid #FFFFFF;
    border-radius: 2px;
    margin-top: 15px;
    margin-left: 2px;
    margin-right: 2px;
}

.div_icons_tentation, .div_icons_tentation_mobile{
    position: absolute;
    display: flex;
    width: 100%;
    z-index: 100;
}

.div_icons_tentation{
    bottom: 0;
    justify-content: space-between;
}

.div_icons_tentation_mobile{
    justify-content: space-around;
    padding-bottom: 0 !important;
}

.div_group_tentation{
    display: flex;
    max-width: 50%;
}

.div_icon_txt_tentation{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.txt_selection{
    font-size: 0.85em;
    white-space: nowrap;
}

.text_tentation{
    font-weight: bold;
    text-align: center;
    font-size: calc(10px + 6 * ((100vw - 600px) / 1600)) !important;
}

.img_trailer{
    width: 110px !important;
}

.img_back{
    width: 1.5em !important;
}

.img_exit{
    width: 1.5em !important;
}

.img_tentation, .img_tentation_mobile{
    width: calc(50px + 20 * (100vw - 600px) / 1600) !important;
    min-height: auto;
    transition: transform 0.3s;
}

.div_exit_reco:hover, .div_back_reco:hover, .img_tentation:hover, .div_back_reco_mobile:hover, .div_exit_reco_mobile:hover{
    cursor: pointer;
    transform: scale(1.1);
}

.no-hover {
    transition: opacity 1s;
    opacity: 0.5;
    pointer-events: none;
    cursor: inherit;
}

.no-hover-chosen {
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 1;
    pointer-events: none;
    cursor: inherit;
}

.text-chosen{
    opacity: 1;
}


.no-hover:hover {
    cursor: inherit;
    transform: inherit;
    pointer-events: none;
}

.bullet-font{
    font-size: calc(13px + 4 * ((100vw - 300px) / 1300));
    font-weight: bold;
}

.bottom-div{
    position: absolute;
    bottom: 0;
    height: 25%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9),rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0));
    width: 100%;
}

.bottom-div-product{
    position: absolute;
    bottom: 0;
    height: 20%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9),rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0));
    width: 100%;
}

.container_casting{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 1em;
}

/**
**********SELECTION**********
 */

.close-modal{
    color: rgba(00,00,255,70%);
    text-decoration: underline;
    cursor: pointer;
}

.close-modal:hover{
    color: blue !important;
}

.img-selection{
    border-radius: 15px 15px 0 0;
    min-height: unset !important;
}

.plateform_icon2{
    cursor: pointer;
    margin-top: auto;
    margin-bottom: auto;
}

.tiny-caps{
    font-variant-caps: small-caps ;
}

.title-modal{
    padding-bottom: 35px;
}

.logoModal2 {
    position: relative;
    bottom: 40px;
    width: 100px;
    height: 80px;
    padding: 8px;
    border-radius: calc(1.25rem - 1px);
    background-image: linear-gradient(#F7A93F, #C8285A);
    text-align: center;
}

.modal-title-div{
    display: flex;
    align-items: center;
}

.img-modal{
    max-width: unset;
    width: calc(50px + 25 * ((100vw - 300px) / 1300));
}

.div-upselling{
    border: 5px solid white;
}

.div-selection{
    background-color: white;
    border-radius: 30px;
    border: 2px solid #EB5E09;
    padding: 0;
}

.text-selection, .text-selection:hover{
    color: #EB5E09 !important;
    text-decoration: none !important;
    font-family: 'ralewaysemibold', sans-serif;
}

.content_modal_up{
    margin-top: 0;
}

.plus-modal{
    font-size: calc(50px + 25 * ((100vw - 300px) / 1300)) !important;
    line-height: 0.45;
}

.reverse-background-section-light {
    background-image: linear-gradient(#F7A93F, #C8285A);
    border-radius: 50%/100px 100px 0 0;
    box-shadow: 0 -20px 110px black;
    margin-left: -10%;
    margin-right: -10%;
}

.container_img_selection{
    max-height: 50vh;
    position: relative;
    z-index: 30;
}

.container_img_selection::after{
    content: "";
    position: absolute;
    background-image: linear-gradient(rgba(0,0,0,0%),rgba(0,0,0,40%),rgb(0, 0, 0));
    width: 100%;
    border-radius: 80%/0 0 calc(150px - 40 * ((100vw - 300px) / 2600)) calc(150px - 40 * ((100vw - 300px) / 2600));
    height: 12vh;
    bottom: -30%;
}

.container_poster_selection{
    border-radius: 80%/0 0 140px 140px;
    padding-right: 9%;
    padding-left: 9%;
}

.container_curve{
    position: relative;
    background-color: white;
    z-index: 10;
    min-height: 50vh;
    height: 50vh;
}

.first_part_curve{
    height: 30%;
    background-color: white;
    border-radius: 80%/0 0 120px 120px;
    position: absolute;
    z-index: 9999;
    top: 0;
    width: 100%;
}

.second_part_curve {
    min-height: 50vh;
    background-image: linear-gradient(#F7A93F, #C8285A);
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

.container_selection_background {
    background-image: linear-gradient(#F7A93F, #C8285A);
    min-height: 50vh;
}

.poster-shadow-selection-img{
    box-shadow: 10px 0px 8px #cccccc, -10px 0px 8px #cccccc;
}

.poster-shadow-selection{
    box-shadow: 10px 10px 8px #cccccc, -10px 10px 8px #cccccc;
}

@keyframes tilt-shaking {
    0% { transform: rotate(0deg) scale(1); opacity: 1}
    5% { transform: rotate(-1deg) scale(0.96); opacity: 0.94}
    10% { transform: rotate(-1.5deg) scale(0.92); opacity: 0.88}
    15% { transform: rotate(-2.0deg) scale(0.88); opacity: 0.82}
    20% { transform: rotate(-2.5deg) scale(0.84); opacity: 0.76}
    25% { transform: rotate(-3deg) scale(0.8); opacity: 0.7}
    30% { transform: rotate(-2.5deg) scale(0.84); opacity: 0.76}
    35% { transform: rotate(-2deg) scale(0.88); opacity: 0.82}
    40% { transform: rotate(-1.5deg) scale(0.92); opacity: 0.88}
    45% { transform: rotate(-1deg) scale(0.96); opacity: 0.94}
    50% { transform: rotate(0deg) scale(1); opacity: 1}
    55% { transform: rotate(1deg) scale(0.96); opacity: 0.94}
    60% { transform: rotate(1.5deg) scale(0.92); opacity: 0.88}
    65% { transform: rotate(2deg) scale(0.88); opacity: 0.82}
    70% { transform: rotate(2.5deg) scale(0.84); opacity: 0.76}
    75% { transform: rotate(3deg) scale(0.8); opacity: 0.7}
    80% { transform: rotate(2.5deg) scale(0.84); opacity: 0.76}
    85% { transform: rotate(2deg) scale(0.88); opacity: 0.82}
    90% { transform: rotate(1.5deg) scale(0.92); opacity: 0.88}
    95% { transform: rotate(1deg) scale(0.96); opacity: 0.94}
    100% { transform: rotate(0deg) scale(1); opacity: 1}
}


/**
********** COLLECTION ***************
 */

.collection-background-section-review{
    height: 100vh;
}
.collection-top, .collection-top-mobile{
    background-image: url("/assets/img/fondHeader.svg");
}

.collection-top{
    border-top-left-radius: calc(-1px + 2.25rem);
    border-top-right-radius: calc(-1px + 2.25rem);
}

.collection-titre{
    text-align: center;
    color: white;
}

.div-collection-stats{
    gap: 20px;
}

.collection-img-selection{
    min-height: unset !important;
    border-radius: 15px 15px 15px 15px;
}

.collection-stats{
    background-color: rgba(239, 239, 239, 0.5);
    border-radius: 10px;
    min-width: calc(85px + 20 * ((100vw - 300px) / 1300));
    min-height: calc(33px + 10 * ((100vw - 300px) / 1300));
    display: flex;
    align-items: center;
    justify-content: center;
}

.collection-filtres{
    background-color: white;
    display: flex;
}

.overflow-hidden{
    overflow: hidden;
}

.button-filtres, .button-filtres-inactif{
    min-width: calc(78px + 24 * ((100vw - 300px) / 1300));
    min-height: calc(32px + 8 * ((100vw - 300px) / 1300));
    border-radius: 20px;
    text-decoration: none;
    color: white;
}

.button-filtres{
    background-color: rgba(235, 94, 9, 1);
    border: 2px solid rgba(235, 94, 9, 1);
}

.button-filtres-inactif{
    background-color: rgba(235, 94, 9, 0.4);
    border: unset;
}

.button-filtres-disable{
    cursor: default;
    background-color: rgba(235, 94, 9, 1) !important;
    border: 2px solid rgba(235, 94, 9, 1) !important;
}

@media (pointer:fine){
    .button-filtres:hover{
        background-color: rgba(235, 94, 9, 0.4);
        border: unset;
        cursor: pointer;
    }

    .button-filtres-inactif:hover{
        background-color: rgba(235, 94, 9, 1);
        border: 2px solid rgba(235, 94, 9, 1);
        cursor: pointer;
    }

    .button-filtres-disable:hover{
        cursor: default;
        background-color: rgba(235, 94, 9, 1);
        border: 2px solid rgba(235, 94, 9, 1);
    }
}

.collection-content{
    background-color: white;
    display: flex;
    max-height: 70vh;
    border-bottom-left-radius: calc(-1px + 2.25rem);
    border-bottom-right-radius: calc(-1px + 2.25rem);
}

.collection-div-nom-film{
    top: -5%;
    position: relative;
}

.collection-nom-film{
    color: black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    font-size: calc(12px + 5 * ((100vw - 300px) / 1300)) !important;
}

@media (pointer: coarse) {
    .full-title{
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }
}

.collection_a_voir_sur{
    background-color: #6d071a;
    position: relative;
    top: calc(-15px - 13 * ((100vw - 300px) / 1300));
}


.modal-collection{
    background-image: url("/assets/img/popup/fondPopupDesktop.svg");
    background-repeat: no-repeat;
    background-size: cover;
}


.collection-animation{
    background-color: rgba(49, 47, 45, 0.35);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10000;
    display: none;
    border-radius: calc(-1px + 2.25rem);
}

.collection-qr-code{
    border: 30px solid white;
    border-radius: 15px;
}

.collection-background-adPR{
    position: unset;
    display: none;
}

.collection-poster-selection{
    padding-right: 0;
    padding-left: 0;
    margin-left: 0;
    margin-right: 0;
    overflow-x: hidden;
    max-width: 100%;
}

.collection-taille-all {
    max-width: 80%;
    max-height: 80%;
}

.collection-taille-width {
    max-width: 80%;
}

.collection-popup-li{
    display: flex;
    align-items: baseline;
    gap: 8px;
}


/**
**********MEDIA QUERIES**********
 */

@media screen and (min-height: 1000px) and (max-height: 1200px) {

    #container_infos_film{
        height: 55vh;
    }
}

@media screen and (max-width: 800px) {
    .answer_button{
        border: 2px solid #EB5E09;
        color: #EB5E09;
        padding: 5px;
        border-radius: 30px;
        text-decoration: none;
        text-align: center;
        align-content: center;
        background-color: white;
        height: 70px;
        white-space: normal;
    }
}

@media screen and (max-width: 400px) {
    .answer_button{
        border: 2px solid #EB5E09;
        color: #EB5E09;
        padding: 5px;
        border-radius: 30px;
        text-decoration: none;
        text-align: center;
        align-content: center;
        background-color: white;
        height: 60px;
        white-space: normal;
        font-size: 14px;
    }

    .apple img {
        width: 60%;
        min-width: 140px;
        height: auto;
    }

    .playstore img {
        width: 60%;
        min-width: 140px;
        height: auto;
    }

    .portrait-background-small-com {
        background: transparent;
        width: 40px;
    }

    .portrait-circle-small-com {
        border-radius: 100%;
        height: 40px;
        width: 40px;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url("/assets/img/avatarAnonyme.svg");
    }
}


@media screen and (max-width: 330px) {
    .answer_button {
        border: 2px solid #EB5E09;
        color: #EB5E09;
        padding: 5px;
        border-radius: 30px;
        text-decoration: none;
        text-align: center;
        align-content: center;
        background-color: white;
        height: 65px;
        white-space: normal;
        font-size: 13px;
    }
}


@media screen and (max-width: 300px) {
    .answer_button{
        border: 2px solid #EB5E09;
        color: #EB5E09;
        padding: 5px;
        border-radius: 30px;
        text-decoration: none;
        text-align: center;
        align-content: center;
        background-color: white;
        height: 65px;
        white-space: normal;
        font-size: 13px;
    }
}

@media screen and (min-height: 1200px){

    #container_infos_film{
        height: 48vh;
    }
}

@media screen and (min-height: 700px)  and (max-height: 1000px) {

    #container_infos_film{
        height: 50vh;
    }
}

@media screen and (max-height: 700px) {

    #container_infos_film{
        height: 50vh;
    }
}
@media screen and (min-width: 768px){
    .intro-container {
        /*position: relative;*/
        /*right: 10vw;*/
        /*top: 5vh;*/
    }

    .img_welcome_aki{
        width: 70% !important;
        min-width: 10px;
        min-height: 10px;
    }

    .qr-code{
        width: 60%;
    }

    .qr-code2{
        width: 100%;
    }

    .align-desktop{
        padding-left: 18%;
        padding-right: 18%;
    }

    .device-container1 {
        position: relative;
        bottom: 15%;
    }
    .cardProduct, .cardProduct2, .cardArtist, .cardProduct3 {
        width: 30% !important;
    }
    .cardProduct5{
        width: 50%;
    }

    .cardProduct4{
        width: 100% !important;
        min-width: unset;
    }

    .cardProduct2-WithoutImportant{
        width: 50%;
    }
    .cardReview {
        width: 30% !important;
    }
    .device1 {
        width: 65%;
    }
    .card-img-overlay {
        top: 58%;
    }
    .card-img-overlay-bottom {
        top: 80%;
    }
    .card-img-overlay-top {
        /*bottom: 81.5%;*/
    }
}
@media screen and (min-width: 1499px) {

    .align-desktop{
        padding-left: 25%;
        padding-right: 25%;
    }

    .img_welcome_aki{
        width: 50% !important;
        min-width: 10px;
        min-height: 10px;
    }

    .cardProduct4{
        width: 100% !important;
        min-width: unset;
    }

    .cardProduct, .cardProduct2, .cardArtist, .cardProduct3 {
        width: 40% !important;
    }
    .cardProduct5{
        width: 50%;
    }
    .cardProduct2-WithoutImportant{
        width: 50%;
    }
    .cardReview {
        width: 40% !important;
    }
    .card-img-overlay {
        top: 65%;
    }
    .card-img-overlay-top {
        /*bottom: 90.8%;*/
    }
    .card-img-overlay-bottom {
        top: 80%;
    }

}
@media screen and (min-width: 400px) and (max-width: 768px) {
    .background-section,.background-section-review  {
        border-radius: 50%/0 0 60px 60px;
    }

    .qr-code{
        width: 60%;
    }

    .reverse-background-section {
        border-radius: 50%/60px 60px 0 0;
    }

    .img_welcome_aki{
        width: 75% !important;
        min-width: 10px;
        min-height: 10px;
    }

    .header-content {
        padding-left: 40px;
        padding-right: 40px;
    }

    .device1 {
        width: 50%;
    }

    .cardProduct, .cardArtist {
        width: 25% !important;
    }

    .cardProduct2 {
        width: 25% !important;
        max-height: 255px;
    }

    .cardProduct4 {
        width: 100% !important;
        min-width: unset;
    }

    .cardProduct5 {
        width: 40%;
    }

    .cardProduct2-WithoutImportant {
        width: 40%;
    }

    .cardProduct3 {
        width: 25% !important;
        max-height: 255px;
    }

    .cardReview {
        width: 25% !important;
        max-height: 255px;
    }

    .icone1 {
        width: 80%;
    }

    .card-img-overlay {
        top: 58%;
    }

    .card-img-overlay-bottom {
        top: 80%;
    }

    .card-img-overlay-top {
        /*bottom: 79.5%;*/
    }

    .overlay-text2 {
        right: -6%;
        top: -8%;
    }

    .previous-chevron {
        display: none;
    }
}
@media screen and (max-width: 400px) {
    .background-section,.background-section-review  {
        border-radius: 50%/0 0 50px 50px;
    }

    .qr-code{
        width: 50%;
    }

    .img_welcome_aki{
        width: 80% !important;
        min-width: 10px;
        min-height: 10px;
    }

    .reverse-background-section{
        border-radius: 50%/50px 50px 0 0;
    }
    .header-content {
        padding-left: 40px;
        padding-right: 40px;
    }
    .device1 {
        width: 50%;
    }
    .cardProduct, .cardProduct2, .cardArtist, .cardProduct3 {
        width: 25% !important;
    }
    .cardProduct2-WithoutImportant{
        width: 40%;
        max-height: unset;
    }

    .cardProduct5{
        width: 40%;
    }

    .cardProduct4{
        width: 100% !important;
        min-width: unset;
    }

    .cardReview {
        width: 25% !important;
        max-height: 255px;
    }
    .icone1 {
        width: 80%;
    }
    .card-img-overlay {
        top: 58%;
    }
    .card-img-overlay-bottom {
        top: 80%;
    }
    .overlay-text2 {
        right: 2%;
        top: -10%;
    }
    .previous-chevron {
        display: none;
    }

}


@media screen and (max-width: 1500px){
    .main_container_poster{
        width: 100%;
    }
}

@media screen and (min-width: 1920px){
    .phone1 {
        width: 70%;
    }
    .phone2, .phone3 {
        width: 70%;
    }
    .cardProduct, .cardProduct2, .cardArtist, .cardProduct3 {
        width: 45% !important;
    }
    .cardProduct4{
        width: 100% !important;
        min-width: unset;
    }
    .cardProduct5{
        width: 50%;
    }
    .cardProduct2-WithoutImportant{
        width: 50%;
    }
    .cardReview {
        width: 45% !important;
    }

    .img_welcome_aki{
        width: 40% !important;
        min-width: 10px;
        min-height: 10px;
    }

    .align-desktop{
        padding-left: 25%;
        padding-right: 25%;
    }
}

@media screen and (max-width: 768px){
    .background-section-mobile{
        background-image: linear-gradient(#F7A93F, #C8285A);
        border-radius: 50%/0 0 100px 100px;
        box-shadow: 0 6px 0 white;
        height: 30vh;
        margin: 0 !important;
    }
    .header-content-mobile{
        padding: 0 !important;
    }
    .collection-top {
        border-top-left-radius: unset;
        border-top-right-radius: unset;
    }
    .collection-animation{
        border-radius: unset;
    }
    .collection-taille-all {
        max-width: 100%;
        max-height: 100%;
    }

    .collection-taille-width {
        max-width: 100%;
    }
}