:root {
    --nes-green: #4D5926;
    --nes-green-light: #6a773e;
}

body {
    min-height: 100vh;
    margin: 0;
    background-color: #E8E4DB;
}

a {
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Nespresso Lucas Med', Arial, sans-serif;
}
h1 { font-size: 40px; }
h2 { font-size: 32px; }
h3 { font-size: 28px; }
h4 { font-size: 24px; }
h5 { font-size: 18px; margin: 20px 0 6px 0;}
h6 { font-size: 16px; }

.uppercase {
    text-transform: uppercase;
}

p, textarea, label {
    font-family: 'Nespresso Lucas Regular', Arial, sans-serif;
}
a, button {
    font-family: 'Nespresso Lucas Med', Arial, sans-serif;
}
b {
    font-family: 'Nespresso Lucas Med', Arial, sans-serif;
}

ul {
   padding: 0; 
}

ul li {
    list-style: none;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
input {
    accent-color: black;
}
input[type="checkbox"]:not(.info-picto), input[type="radio"]{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    display: -webkit-box;
    
    display: -ms-flexbox;
    
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    
    width: 24px;
    height: 24px;
    min-width: 24px;
    
    border: 1px solid black;
    border-radius: 2px;
    cursor: pointer;
}
input[type="checkbox"]:not(.info-picto):after{
    content: url(https://www.nespresso.com/emailing/nespresso_webapp/vector.png);
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 24px;
    
    scale: 0;/*Hidden*/
    -webkit-transition: scale 0.4s ease;
    -o-transition: scale 0.4s ease;
    transition: scale 0.4s ease;
}
input[type="checkbox"]:not(.info-picto):checked {
    background-color: black !important;
}
input[type="checkbox"]:not(.info-picto):checked:after {
    scale: 1;/*Show*/
}
input[type="checkbox"]:checked:not(.info-picto){
    background-color: black;
}
input[type="checkbox"]:hover:not(.info-picto){
    background-color: rgba(0,0,0,0.2);
}
input[type="radio"] {
    border-radius: 100px;
}
input[type="radio"]:hover{
    background-color: rgba(0,0,0,0.2);
}
input[type="radio"]:checked:after {
    content: url(https://www.nespresso.com/emailing/nespresso_webapp/vector.png);
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 27px;
    background-color: black;
    border-radius: 100px;
}
a, button {
    font-size: 20px;
    text-transform: uppercase;
}
.next, .submit, .btn, button {
    color: white;
    background-color: var(--nes-green);
    border-radius: 50px;
    -webkit-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}
.next:hover, .submit:hover, .btn:hover, button:hover {
    background-color: var(--nes-green-light);
}

/*------ HEADER ------*/
header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    
    width: 100vw;
    height: 96px;
    
    display: -webkit-box;
    
    display: -ms-flexbox;
    
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    
    background-color: white;
}

header .logo {
    display: block;/*Show large logo*/
    width: 178px;
}
header .logo-small {
    display: none;/*Hide small logo*/
    width: 48px;
}

header .back {
    position: absolute;
    left: 30px;
    display: none;/*Hide Back button*/
} 

.progression-bar {
    position: absolute;
    left: 0;
    bottom: 0px;
    height: 6px;
    width: 100vw;
    background-color: white;
}
.progression-bar .progress {
    height: 6px;
    width: 0;
    background-color: black;
    -webkit-transition: width 3s ease-out;
    -o-transition: width 3s ease-out;
    transition: width 3s ease-out;
}

@media screen and (max-width:600px) {
    header .back {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;/*Show Back button*/
    }
    header .logo {
        display: none;/*Hide large logo*/
    }
    header .logo-small {
        display: block;/*Show small logo*/
    }
}

/*END HEADER*/

/*------ CONTENT Survey ------*/
body:not(#pg-error):not(#pg-free):not(#pg-start):not(#pg-thankyou):not(#pg-language) .content {
    /*margin: 136px 0 30px 0; /*top 96px + 40px*/
    margin: 0; 
    padding: 136px 16px 30px 16px; /*avoid overlapping with the header - top 96px + 40px*/
}

@media screen and (max-width:375px) {
    body:not(#pg-error):not(#pg-free):not(#pg-start):not(#pg-thankyou):not(#pg-language) .content {
        padding: 156px 16px 30px 16px; /*avoid overlapping with the header - top 96px + 60px*/
    }   
}
@media screen and (max-width:600px) {
    body:not(#pg-error):not(#pg-free):not(#pg-start):not(#pg-thankyou):not(#pg-language) .content {
        padding-bottom: 100px;/* space to not have the next button overlapping the survey when at the bottom of the page */
    }   
}

/*------ REGULAR PAGES ------*/
/*-- CONTENT pg-language & pg-thankyou --*/
body#pg-language .content, body#pg-thankyou .content {
    margin-top: calc(96px + 40px);
    margin-bottom: 40px;
}
/*END CONTENT*/


#pg-thankyou .content h1, #pg-free .content h1, #pg-error .content h1 {
    font-size: 40px;
}
#pg-thankyou .content p, #pg-free .content p, #pg-error .content p {
    font-size: 16px;
}

@media screen and (min-width:600px) and (min-height: 630px){
    #pg-thankyou .content h1, #pg-free .content h1, #pg-error .content h1 {
        font-size: 64px;
    }
    #pg-thankyou .content p, #pg-free .content p, #pg-error .content p {
        font-size: 24px;
    }
}

/*- PAGE - Start -*/
#pg-start {
    display: block;
    
    position: relative; /*for the picture*/
}
.main-image-pg-start {
    display: none;
}
.main-image-pg-start-mobile {
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    max-width: 758px;
    transform: translate(-50%, 0);
}
#pg-start .content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    
    /*min-height: 100vh;*/
    margin: 0 auto;
    padding: 64px 16px;
    /*padding: 64px 16px 120px 16px;*/
}
#pg-start .content h2 {
    margin: 0 0 32px 0;
    text-align: center;
}
#pg-start .content p {
    font-size: 18px;
    
    max-width: 530px;
    margin-bottom: 0;
}
#pg-start .content .btn {
    margin-top: 20px;
    padding-left: 40px;
    padding-right: 40px;
    background-color: #257A57;
}
#pg-start .content .btn:hover {
    background-color: #2f9c6f;
}
#pg-start .content img {
    display: block;
    /*margin: 0 auto;*/
}
#pg-start .content img.logo-small {
    width: 48px;
    margin-bottom: 32px;
}
#pg-start .content .time {
    margin: 20px 0 60px 0;
}
/*#pg-start .content .time:before {
    display: block;
    width: 24px;
    height: 24px;
    margin: 1px auto 8px auto;
}*/
#pg-start .content img.time-icon {
    width: 24px;
    margin-bottom: 5px;
}
#pg-start .content .time .image-time-gray {
    width: 26px;
    margin: 0 auto;
    margin-bottom: 8px
}
#pg-start .content .time .image-time-orange {
    display: none;
}
#pg-start .content .time p {
    font-size: 16px;
    color: #8E8373;
}
.goal-picto {
    display: none;/*Hidden on mobile*/
}
@media screen and (min-width:800px){
    #pg-start {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: right;
            -ms-flex-pack: right;
                justify-content: right;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .main-image-pg-start {
        display: block;
        width: 50%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 50%;
        left: 25%;
        transform: translate(-50%, -50%);
    }
    .main-image-pg-start-mobile {
        display: none;
    }
    #pg-start .content {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        
        width: 50vw;
        min-height: 100vh;
        
        margin-right: 0;
        padding: 70px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        
        background: white;
    }
    #pg-start .content img.logo-small {
        width: 83px;
        
        margin-left: 0;
        margin-right: 0;
    }
    #pg-start .content p {
        text-align: left;
    }
    #pg-start .content .time {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        color: #E76202;
        
        min-height: 54px;
        
        position: relative;
    }
    #pg-start .content .time p {
        color: #E76202;
        
        margin-left: 70px;
    }
    #pg-start .content .time .image-time-gray {
        display: none;
}
    #pg-start .content .time .image-time-orange {
        display: block;
        width: 26px;
        margin: 0 auto;
        padding: 15px;
        background-color: #f7f7f7;
        border-radius: 50px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(0, -50%);
    }
    /*#pg-start .content .time:before {
        padding: 15px;
        background-color: #f7f7f7;
        border-radius: 50px;
          
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(0, -50%);
    }*/
    #pg-start .content .btn {
        margin: 16px 0 0 0;
    }
    .goal-picto {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        gap: 45px;

        margin: 50px 0 60px 0;
    }
    .goal-picto p {
        color: #565656;
    }
    .goal-picto .stars, .goal-picto .gift {
        position: relative;
    }
    .goal-picto .stars img, .goal-picto .gift img {
        width: 52px;
        height: 52px;
    }
}
@media screen and (max-height:830px) {
    .main-image-pg-start-mobile {
        display: none;
    }
}

/*- PAGE - Language -*/
#pg-language {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    
    
    background-size: cover;
    background-position: center;
    
    width: 100vw;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
#pg-language h1 {
    margin-bottom: 40px;
}
#pg-language .content {
    text-align: center;
    
    width: calc(100% - 32px); /*100% - margins */
    max-width: 964px;
    
    padding: 38px 16px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    
    background-color: white;
}
#pg-language .content ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-line-pack: center;
        align-content: center;
    gap: 16px;
    
    margin-bottom: 0;
}
#pg-language .content ul li {
    position: relative;
    
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    
    width: 100%;
    height: 56px;
    
    border: 1px solid black;
    border-radius: 4px;
}
#pg-language .content .btn {
    display: inline-block;
    margin-top: 40px;
    padding-left: 80px;
    padding-right: 80px;
}
#pg-language input {
    position: absolute;
    left: 32px;
    
    margin: 0;
}
#pg-language input[type="radio"]:checked {
   background-color: black; 
}
#pg-language input[type="radio"]:after {
    display: none;/*Hidden*/
    content: url(https://www.nespresso.com/emailing/nespresso_webapp/vector.png);
    width: 16px;
    background-color: black;
}
#pg-language input[type="radio"]:checked:after {
    display: block;
}
#pg-language label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    
    width: 100%;
    height: 100%;
    
    padding: 12px 32px 12px 64px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
@media screen and (max-height:360px) {
    #pg-language .content {
        padding: 20px;
    }
}
@media screen and (min-width:600px){
    #pg-language h1 {
        margin-bottom: 60px;
    }
    #pg-language .content ul {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        gap: 40px;
    }
    #pg-language .content ul li {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        width: 157px;
        padding-left: 0;
    }
    #pg-language .content .btn {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/*- PAGE - Thank you -*/
#pg-thankyou {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

}
#pg-thankyou .content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    
    position: relative;
}
#pg-thankyou .content p {
    max-width: 564px;
    margin: 0 auto;
}
#pg-thankyou .content .btn {
    margin-top: 40px;
}
#pg-thankyou .content img.ico-thankyou {
    width: 52px;
    margin-bottom: 16px;
}
@media screen and (max-height:400px) {
    #pg-thankyou {
        display: block;
    }
}
@media screen and (min-width:400px) and (min-height:630px){
    #pg-thankyou .content img.ico-thankyou {
        width: 80px;
    }
}

/* Thank You background image */
#pg-thankyou {
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
}
@media screen and (max-height: 770px) {
    #pg-thankyou {
        background-image: none !important;
    }
}
@media screen and (min-height:770px) {
        #pg-thankyou .content {
            margin-top: 0;
        }
}
@media screen and (min-width:540px) {
    #pg-thankyou {
    background-position: center 100%;
    background-size: 564px;
    }
}

/*- PAGE - Get it for Free -*/
#pg-free {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
#pg-free .content {
    margin: 0;
    padding: 0 16px;
}
#pg-free .content h1 {
    margin: 0 auto 32px auto;
}
#pg-free .content p {
    max-width: 564px;
    
    margin: 0 auto 16px auto;
}
#pg-free .content p:last-of-type {
    margin: 0 auto 40px auto;
}
#pg-free .content img {
    display: block;
    margin: 0 auto;
}
#pg-free .content img.ico-free {
    width: 80px;
    margin-bottom: 20px;
}
.form-newsletter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    
    max-width: 414px;
    
    position: relative;
    
    margin: 0 auto;
}
.form-newsletter input[type="email"] {
    width: 100%;
    
    padding: 16px;
    margin: 0 0 16px 0;
    
    border: 1px solid black;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
/*Clickable information button*/
.form-newsletter .info-picto[type="checkbox"] {
    content: "";
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    position: absolute;
    right: 15px;
    top: 15px;
    
    width: 20px;
    height: 20px;
    min-width: 20px;
    
    margin: 0;
}
/*Clickable information button activated*/
.form-newsletter .info-picto[type="checkbox"]:checked+label {
    opacity: 100%;
    height: auto;
    padding: 14px;
}
/*Information box appearing when click on information button*/
.form-newsletter .info-box {
    opacity: 0;
    position: inherit;
    
    font-size: 14px;
    color: white;
    
    width: 100%;
    height: 0;

    margin: 0 0 16px 0;
    padding: 0 14px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;

    background-color: #646464;
    border-radius: 4px;
    
    -webkit-transition: opacity 0.3s ease, height 0.3s ease, padding 0.3s ease;
    
    -o-transition: opacity 0.3s ease, height 0.3s ease, padding 0.3s ease;
    
    transition: opacity 0.3s ease, height 0.3s ease, padding 0.3s ease;
}
.form-newsletter .info-box:after {
    content: "";
    position: absolute;
    top: -10px;
    right: 15px;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #646464;
}
.form-newsletter .receive-email {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    
    margin: 0 16px 20px 0;
}
.form-newsletter .receive-email label {
    margin-left: 18px;
    font-size: 14px;
}
#pg-free .image-cup-and-cap {
    display: none;
    position: absolute;
    left: 0;
    bottom: 0;
}
@media screen and (max-width:600px){
    .form-newsletter .receive-email {
        margin: 0 0 20px 0;
    }
    .form-newsletter .receive-email input {
        margin-left: 0;
    }
    .form-newsletter .receive-email label {
        font-size: 14px;
    }
    .form-newsletter .info-box {
        right: 0;
    }
}
@media screen and (max-height:880px) {
    #pg-free {
        display: block;
        margin-top: calc(96px + 30px);
    }
    #pg-free .content {
        padding-bottom: 100px;
    }
}
@media screen and (min-height: 700px) and (min-width: 1150px){
    #pg-free .image-cup-and-cap {
        display: block;
        width: 370px;
        height: auto;
    }
}
@media screen and (min-height: 900px) and (min-width: 1300px){
    #pg-free .image-cup-and-cap {
        width: 470px;
        height: auto;
    }
}

@media screen and (min-width:600px) {
    .form-newsletter .info-box {
        position: absolute;
        top: 50px;
        right: -60px;
        z-index: 2;
        
        width: 240px;

        -webkit-box-shadow: 8px 8px 2px rgba(0,0,0,0.06);

                box-shadow: 8px 8px 2px rgba(0,0,0,0.06);
    }
    .form-newsletter .info-box:after {
        right: 75px;
    }
    .form-newsletter .receive-email label {
        font-size: 18px;
    }
}

/*- PAGE - Error -*/
#pg-error {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    background-size: cover;
    width: 100vw;
    height: calc(100vh - 96px);/* window height - header */
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
#pg-error header .back {
    display: none;
}
#pg-error .content {
    max-width: 800px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 96px 16px 40px 16px;
}
#pg-error .content h1, #pg-error .content p {
    color: white;
}
#pg-error .content a {
    font-size: 24px;
}

@media screen and (max-width:600px){
    #pg-error {
        /*border: 16px solid #E8E4DB;*/
    }
    #pg-error .content a {
        padding-left: 13%;
        padding-right: 13%;
    }
}
@media screen and (max-height:800px){
    #pg-error {
        /*border: 16px solid #E8E4DB;*/
    }
}

/*------ SURVEY ------*/
/*- SURVEY - Headline -*/
.headline {
    max-width: 612px;
    margin: 0 auto;
}
h1 {
    font-size: 32px;
    font-weight: 600;
    color: black;
    text-align: center;
    margin: 0 0 16px 0;
}
/* SURVEY- Additional helper text */
p {
    font-size: 20px;
    color: black;
    text-align: center;
    margin: 0 0 48px 0;
}
/* SURVEY- Green quote */
.quote {
    font-family: 'Nespresso Lucas Med', Arial, sans-serif;
    font-size: 24px;
    font-style: italic;
    text-transform: uppercase;
    color: #8E8373;
    max-width: 400px;
    margin: 0 auto 48px auto;
    padding: 0 30px;
}
.quote:before, .quote:after {
    content: url(https://www.nespresso.com/emailing/nespresso_webapp/quote.svg);
    position: absolute;
    width: 21px;
    height: 16px;
}
.quote:before {
    -webkit-transform: translate(-30px, 0px);
        -ms-transform: translate(-30px, 0px);
            transform: translate(-30px, 0px);
}
.quote:after {
    -webkit-transform: rotate(180deg) translate(-10px, -16px);
        -ms-transform: rotate(180deg) translate(-10px, -16px);
            transform: rotate(180deg) translate(-10px, -16px);
}

/*- SURVEY - Response -*/
.response {
    max-width: 612px;
    margin: 0 auto;
    display: block;
}
.response.large {
    max-width: 1000px;
}

input {
    margin: 0 0 0 16px;
}

label {
    font-size: 20px;
    color: black;
}
.list input {
    position: absolute;
}
.list label {/*clickable on all surface*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
            flex-direction: column;
    
    width: 100%;
    height: 100%;
    
    padding: 12px 16px 12px 52px;
    -webkit-box-sizing: border-box;
        box-sizing: border-box; 
    
    border: 1px solid #000000;
    border-radius: 4px;
}
.list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.rate li {
    width: 64px;
    height: 64px;
    border: 1px solid #000000;
    border-radius: 4px;
}
/*- SURVEY - Specific style -*/
/*list-one-selection*/
.list {
    display: -ms-grid;
    display: grid;
    grid-gap: 16px;
    grid-auto-rows: 1fr;
}
.list.two-columns {/* split a list in two columns */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.list.two-columns.numbers {/* split a list in two columns from top to bottom */
    display: block;
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
}
.list.two-columns.numbers li {
    margin-bottom: 16px;
}
@media screen and (max-width:400px){
    .list.two-columns.numbers {
        -webkit-column-count: 1;
           -moz-column-count: 1;
                column-count: 1;
    }
}
#list-one-selection input[type="radio"]:not(:checked), #list-one-selection input[type="radio"]:not(:checked)+label {
    opacity: 50%;
}

/*list-multiple-selection*/
#list-multiple-selection li {
    
}

/*rate-5 and rate-10*/
.rate {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 12px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
    justify-content: center;
    justify-items: center;
}
.rate li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    overflow: hidden;
}
.rate input {
    display: none;
}
.rate label {
    width: 100%;
    height: 100%;
    
    font-size: 28px;
    line-height: 64px;
    text-align: center;
      
    cursor: pointer;
    position: relative;
    -webkit-transition: color 0.4s ease-out;
    -o-transition: color 0.4s ease-out;
    transition: color 0.4s ease-out;
}
.rate label:hover {
    background-color: rgba(0,0,0,0.2);
}
.rate label:after {
    content:"";
    display: block;
    width: 100%;
    height: 100%;
    
    position: absolute;
    z-index: -1;
    bottom: -100%;
    left: 0;
    
    background-color: rgba(0,0,0,0.1);
    -webkit-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    pointer-event: none;
}
.rate input[type="radio"]:checked+label:after {
    bottom: 0;
    background-color: black;
}
.rate input[type="radio"]:checked+label {
    color: white;
}

/*Scale*/
.rate#scale li {
    position: relative;
    width: 160px;
    height: 125px;
}
.rate#scale i {
    display: block;
    font-size: 48px;
    padding: 16px 0;
}
.rate#scale li label {
    font-size: 16px;
    line-height: initial;
    
    position: absolute;
    top: 0;
    left: 0;
}
@media screen and (max-width:500px) {
    .rate {
        gap: 8px;
    }
    .rate li {
        width: 46px;
        height: 46px;
    }
    .rate label {
        line-height: 46px;
    }
}

@media screen and (max-width:400px)  {
    #rate-10 {
        display: grid;
        grid-template-columns: repeat(5,1fr);
    }
}
@media screen and (max-width:690px) {
    .rate#scale { /*Items row 3 by 2*/
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}
@media screen and (max-width:540px) {
    .rate#scale li {
        width: 140px;
        height: 130px;
    }
}
@media screen and (max-width:520px) {
    .rate#scale li {
        width: 120px;
        height: 110px;
    }
    .rate#scale li i {
        padding: 18px 0 10px 0;
        font-size: 32px;
    }
    .rate#scale li label {
    }
}
@media screen and (max-width:512px) {
    .rate#scale li {
        width: 112px;
        height: 100px;
    }
}
@media screen and (max-width:400px) {
    .rate#scale li {
        width: 100px;
        height: 100px;
    }
    .rate#scale li i {
        padding: 18px 0 10px 0;
        font-size: 20px;
    }
    .rate#scale li label {
        font-size: 14px;
        line-height: 14px;
    }
}
@media screen and (max-width:348px) {
    .rate#scale li {
        width: 78px;
        height: 78px;
    }
    .rate#scale li i {
        padding: 12px 0 6px 0;
        font-size: 14px;
    }
}
@media screen and (max-width:334px) {
    .rate#scale li {
        width: 74px;
        height: 74px;
    }
}
@media screen and (max-width:270px) {
    .rate#scale li {
        width: 68px;
        height: 68px;
    }
    .rate#scale li i {
        padding: 8px 0 4px 0;
        font-size: 14px;
    }
}
@media screen and (max-width:254px) {
    .rate#scale li {
        width: 64px;
        height: 64px;
    }
}
@media screen and (max-width:240px) {
    .rate#scale {
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
    }
}

/*photo-multiple-selection*/
#photo-multiple-selection.response.short , #photo-one-selection.response.short {
    max-width: 660px; /*for 5, 6, 9 items*/
}

#photo-multiple-selection, #photo-one-selection {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 16px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    justify-items: center;
}
#photo-multiple-selection li, #photo-one-selection li {
    border-radius: 8px;
    width: 180px;
    height: 255px;
    position: relative;
    overflow: hidden;
}
#photo-multiple-selection input, #photo-one-selection input {
    display: none;
}
#photo-multiple-selection label, #photo-one-selection label {
    cursor: pointer;
    opacity: 60%;
    -webkit-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}
#photo-multiple-selection label:hover, #photo-one-selection label:hover {
    opacity: 100%;
}
#photo-multiple-selection label span, #photo-one-selection label span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    position: absolute;
    left: 0;
    bottom: 0;
    
    height: 75px;
    width: 100%;
    
    font-size: 16px;
    color: white;
    background-color: black;
    
    padding: 18px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
#photo-multiple-selection label img, #photo-one-selection label img {
    max-width: 100%;
    max-height: 100%;
}
#photo-multiple-selection input[type="checkbox"]:checked+label, #photo-one-selection input[type="radio"]:checked+label {
    opacity: 100%;
}
#photo-multiple-selection input[type="checkbox"]:checked+label:after, #photo-one-selection input[type="radio"]:checked+label:after {
    scale: 1;
    rotate: 0deg;
}
#photo-multiple-selection label:after, #photo-one-selection label:after {
    content: "";
    
    width: 18px;
    height: 18px;
    
    position: absolute;
    right: 12px;
    top: 12px;
    padding: 7px;
    
    background-image: url(https://www.nespresso.com/emailing/nespresso_webapp/vector-big.png);
    background-position: center;
    background-repeat: no-repeat;
    background-color: black;
    border: 2px solid white;
    
    scale: 0;
}
#photo-one-selection label:after {
    rotate: 90deg;
}
#photo-multiple-selection label:after {
    border-radius: 4px;
    -webkit-transition: scale 0.4s ease;
    -o-transition: scale 0.4s ease;
    transition: scale 0.4s ease;
}
#photo-one-selection label:after {
    border-radius: 100px;
    
    -webkit-transition: scale 0.4s ease, rotate 0.4s ease;
    -o-transition: scale 0.4s ease, rotate 0.4s ease;
    transition: scale 0.4s ease, rotate 0.4s ease;
}
@media screen and (min-width:800px) {
    #photo-multiple-selection, #photo-one-selection {
        gap: 32px;
    }
}
@media screen and (max-width:800px) {
    #photo-multiple-selection li, #photo-one-selection li {
        width: 154px;
        height: 229px;
    }
    #photo-multiple-selection label:after, #photo-one-selection label:after {
        width: 14px;
        height: 14px;
        right: 6px;
        top: 6px;
    }
}

/*Range*/
#range {
  -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  width: 100%;
  height: 10px;
  background: white;
  outline: none;
}
#range::-webkit-slider-thumb {
  -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  width: 38px;
  height: 38px;
  background: #AA896A;
  cursor: pointer;
  border: 1px solid white;
  border-radius: 100px;
}
#range::-moz-range-thumb {
  width: 38px;
  height: 38px;
  background: #AA896A;
  cursor: pointer;
  border: 1px solid white;
  border-radius: 100px;
}
/* rating-various-images and rating-various-text  */
.rating-various-images, .rating-various-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 64px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    justify-items: center;
    
    margin-bottom: 64px;
}
.rate-info:before {
    content: "";
    display: block;
    width: 64px;
    height: 2px;
    background-color: black;
    margin: 32px auto;
}
.rate-info p {
    margin-top: 0;
    margin-bottom: 0;
}
.rating-various-images-item, .rating-various-text-item {
    max-width: 380px;
    padding: 16px;
}
.rating-various-images img {
    max-width: 130px;
    margin: 32px auto 24px auto;
}
.rating-various-images .rate-img {
    position: relative;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.rating-various-images .rate-img span {
    font-family: 'Nespresso Lucas Bold', Arial, sans-serif;
    color: white;
    font-size: 50px;
    position: absolute;
    top: 60px;
    left: 50%;
    -webkit-transform: translate(-50%);
        -ms-transform: translate(-50%);
            transform: translate(-50%);
}
.rating-various-text .quote {
    position: relative;
    margin-top: 70px;
    margin-bottom: 50px;
}
.rating-various-text .quote:before {
    -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    left: 50%;
    top: -36px;
}
.rating-various-text .quote:after {
    display: none;
}

.rating-various-images .rate li, .rating-various-text .rate li {
    width: 46px;
    height: 46px;
    line-height: 46px;
}
.rating-various-images .rate li label, .rating-various-text .rate li label {
    line-height: 46px;
}

/* open-response */
#open-response {
    font-size: 16px;
    text-align: center;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;   
}
#open-response .open-response {
    outline: none;
    border: 0;
    width: 100%;
    display: block;

    font-family: 'Nespresso Lucas Med', Arial, sans-serif;
    text-align: left;
    
    padding: 12px;
    
    border: 1px solid black;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
#open-response p {
    font-size: 13px;
    text-align: right;
    margin-top: 5px;
}

/* Dropdown */
.dropdown {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-width: 300px;
    max-width: 612px;
    margin: 0 auto;
}
.dropdown .custom-arrow {
    position: absolute;
    top: O;
    right: 0;
    display: block;
    height: 100%;
    width: 40px;
    background-color: var(--nes-green);
    pointer-events: none;
}
.dropdown .custom-arrow:before, .dropdown .custom-arrow:after {
    content: "";
    --size-arrow: 6px;
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    width: 0;
    height: 0;
}
.dropdown .custom-arrow:before {
    border-left: var(--size-arrow) solid transparent;
    border-right: var(--size-arrow) solid transparent;
    border-bottom: var(--size-arrow) solid white;
    top: 35%;
}
.dropdown .custom-arrow:after {
    border-left: var(--size-arrow) solid transparent;
    border-right: var(--size-arrow) solid transparent;
    border-top: var(--size-arrow) solid white;
    top: 65%;
}
.dropdown select {
    font-size: 20px;
    
    width: 100%;
    height: 40px;
    padding: 5px 10px;
    
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid black;
}
select:focus {
    outline:0;
}

/* NPS Style */
#rate-nps {
    /*max-width: 460px;*/
    width: 100%;
    
    margin: 0 auto;
}

/* NPS Style for desktop */
/* ITEM' STUCTURE: #rate-nps .square-nps .item */
#rate-nps .square-nps {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 12px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
    justify-content: center;
    justify-items: center;
}
#rate-nps .square-nps .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    /*overflow: hidden;*/
    
    width: 64px;
    height: 64px;
    border: 1px solid #000000;
    border-radius: 4px;
}
#rate-nps .square-nps .item input{
    display: none;
}
#rate-nps .square-nps .item label{
    width: 100%;
    height: 100%;
    
    font-size: 28px;
    line-height: 64px;
    text-align: center;
      
    cursor: pointer;
    position: relative;
    /*-webkit-transition: color 0.4s ease-out;
    -o-transition: color 0.4s ease-out;
    transition: color 0.4s ease-out;*/
}
#rate-nps .square-nps .item label:hover:after{
    opacity: 0.6;
}
#rate-nps .square-nps .item label:after {
    content:"";
    display: block;
    width: 100%;
    height: 100%;
    
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    
    opacity: 0.2;
    -webkit-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    pointer-event: none;
}
#rate-nps .square-nps .item input[type="radio"]:checked+label:after {
    opacity: 1;
}
#rate-nps .square-nps .item label:before {
    content:"";
    display: block;
    width: 100%;
    height: 100%;
    
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    border-radius: 6px;
    border: 1px solid black;
    background-color: white;
    
    opacity: 0;
    -webkit-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    pointer-event: none;
}
#rate-nps .square-nps .item input[type="radio"]:checked+label:before {
    opacity: 1;
    width: 120%;
    height: 120%;
}
@media screen and (max-width:400px)  {
    #rate-nps .square-nps {
        display: grid;
        grid-template-columns: repeat(5,1fr);
    }
}
/*SQUARE NPS COLORS*/
#rate-nps .square-nps .item:nth-of-type(1) label:after { background-color: #f93312; }

#rate-nps .square-nps .item:nth-of-type(2) label:after { background-color: #f93312; }

#rate-nps .square-nps .item:nth-of-type(3) label:after { background-color: #f93312; }

#rate-nps .square-nps .item:nth-of-type(4) label:after { background-color: #f93312; }

#rate-nps .square-nps .item:nth-of-type(5) label:after { background-color: #f93312; }

#rate-nps .square-nps .item:nth-of-type(6) label:after { background-color: #f93312; }

#rate-nps .square-nps .item:nth-of-type(7) label:after { background-color: #ffcd0d; }

#rate-nps .square-nps .item:nth-of-type(8) label:after { background-color: #ffcd0d; }

#rate-nps .square-nps .item:nth-of-type(9) label:after { background-color: #6fd57a; }

#rate-nps .square-nps .item:nth-of-type(10) label:after { background-color: #6fd57a; }

/* NPS Style for mobile */
/* ITEM' STUCTURE: #rate-nps .circle-nps .owl-stage-outer .owl-stage .owl-item .item */
#rate-nps .circle-nps {
    position: relative;
    overflow: hidden;
    
    max-width: 120%;
    /*margin-left: -10%;*/
    
    padding-top: 70px;
    cursor: pointer;
}
#rate-nps .circle-nps:before, #rate-nps .circle-nps:after {
    content:"";
    display: block;
    
    position: absolute;
    top: 0;
    z-index: 2;
    
    width: 10%;
    height: 100%;
    
    pointer-events: none;
}
#rate-nps .circle-nps:before {
    left: 0;
    background: rgb(232,228,219);
    background: linear-gradient(-90deg, rgba(232,228,219,0) 0%, rgba(232,228,219,1) 100%);
}
#rate-nps .circle-nps:after {
    right: 0;
    background: rgb(232,228,219);
    background: linear-gradient(90deg, rgba(232,228,219,0) 0%, rgba(232,228,219,1) 100%);
}
#rate-nps .circle-nps .owl-stage-outer {
   overflow: visible;
}
#rate-nps .circle-nps .owl-item .item {
    position: relative;
    
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    
    height: 76px;
    width: 76px;
    
    margin: 0 auto;
    
    background-color: #849767;
    border: 4px solid white;
    border-radius: 100px;
    -webkit-box-sizing: border-box;
        box-sizing: border-box;
}
#rate-nps .circle-nps .owl-item .item label {
    font-family: 'Nespresso Lucas Regular', Arial, sans-serif;
    font-size: 28px;
    color: black;
}
#rate-nps .circle-nps .owl-item .item input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 0px;
    height: 0px;
    
    opacity: 0;
    
    margin: 0;
    
    border: 1px solid black;
    border-radius: 100%;
    
    transition: all 0.4s ease-out;
}
#rate-nps .circle-nps .owl-item .item input:checked {
    width: 100px;
    height: 100px;
    
    opacity: 1;
}
#rate-nps .circle-nps .owl-item .item input:checked:after {
    display: none;
}
#rate-nps .circle-nps .owl-item .item input:checked:hover {
    background-color: transparent;
}

/*NPS opacity and movement*/
#rate-nps .circle-nps .owl-item {
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    
    opacity: 0.1;
    transform: translate(0,0);
}
#rate-nps .circle-nps .owl-item.active {
    opacity: 0.2;
    transform: translate(0,-20px);
}
#rate-nps .circle-nps .owl-item.nps-prev, #rate-nps .circle-nps .owl-item.nps-next {    
    opacity: 0.4;
    transform: translate(0,-45px);
}
#rate-nps .circle-nps .owl-item.center { 
    opacity: 1;
    transform: translate(0,-55px);
}

/*CIRCLE NPS COLORS*/
#rate-nps .circle-nps .owl-item:nth-of-type(1) .item { background-color: #f93312; }

#rate-nps .circle-nps .owl-item:nth-of-type(2) .item { background-color: #f93312; }

#rate-nps .circle-nps .owl-item:nth-of-type(3) .item { background-color: #f93312; }

#rate-nps .circle-nps .owl-item:nth-of-type(4) .item { background-color: #f93312; }

#rate-nps .circle-nps .owl-item:nth-of-type(5) .item { background-color: #f93312; }

#rate-nps .circle-nps .owl-item:nth-of-type(6) .item { background-color: #f93312; }

#rate-nps .circle-nps .owl-item:nth-of-type(7) .item { background-color: #ffcd0d; }

#rate-nps .circle-nps .owl-item:nth-of-type(8) .item { background-color: #ffcd0d; }

#rate-nps .circle-nps .owl-item:nth-of-type(9) .item { background-color: #6fd57a; }

#rate-nps .circle-nps .owl-item:nth-of-type(10) .item { background-color: #6fd57a; }
/*END CONTENT*/

/*------ NAVIGATION ------*/
.navigation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    grid-gap: 40px;
    padding: 30px 10px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
.back {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    grid-gap: 12px;
    font-size: 16px;
    color: var(--nes-green);
}
.back .arrow-back {
    width: 10px;
    
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: -webkit-transform 0.4s ease-out;
    -o-transition: transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    transition: transform 0.4s ease-out, -webkit-transform 0.4s ease-out;
}
.back:hover .arrow-back {
    -webkit-transform: translate(-5px, 0);
        -ms-transform: translate(-5px, 0);
            transform: translate(-5px, 0);    
}
.next, .sumbit {
    color: white;
    
    display: -webkit-box;
    
    display: -ms-flexbox;
    
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 16px 48px;
    grid-gap: 12px;   
}
.next i {
    color: white;
    font-size: 14px;
    margin-top: 4px;
}
.next:not(.disabled):hover i  {
  -webkit-animation-name: arrow-down;
          animation-name: arrow-down;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}
@-webkit-keyframes arrow-down {
  0% {-webkit-transform: translate(0, 0);transform: translate(0, 0);}
  25% {-webkit-transform: translate(0, -5px);transform: translate(0, -5px);}
  75% {-webkit-transform: translate(0, 5px);transform: translate(0, 5px);}
  100% {-webkit-transform: translate(0, 0);transform: translate(0, 0);}
}
@keyframes arrow-down {
  0% {-webkit-transform: translate(0, 0);transform: translate(0, 0);}
  25% {-webkit-transform: translate(0, -5px);transform: translate(0, -5px);}
  75% {-webkit-transform: translate(0, 5px);transform: translate(0, 5px);}
  100% {-webkit-transform: translate(0, 0);transform: translate(0, 0);}
}
.submit, button, .btn {
    font-size: 16px;
    padding: 12px 22px;
    margin: 0 auto;
    border: 0;
    cursor: pointer;
    -webkit-transition: background-color  0.4s ease, -webkit-box-shadow 0.4s ease;
    transition: background-color  0.4s ease, -webkit-box-shadow 0.4s ease;
    -o-transition: box-shadow 0.4s ease, background-color  0.4s ease;
    transition: box-shadow 0.4s ease, background-color  0.4s ease;
    transition: box-shadow 0.4s ease, background-color  0.4s ease, -webkit-box-shadow 0.4s ease;
}
.submit:hover, button:hover, .btn:hover, .next:hover:not(.disabled) {
    background-color: var(--nes-green-light);
    -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.2);
            box-shadow: 1px 2px 2px rgba(0,0,0,0.2);
}

.next.disabled {
    cursor: not-allowed;
    opacity: 25%;
}

@media screen and (max-width:600px) {
    .navigation {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        background: rgb(232,228,219);
        background: -webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(232,228,219,0.8)), to(rgba(232,228,219,0)));
        background: -o-linear-gradient(bottom, rgba(232,228,219,0.8) 50%, rgba(232,228,219,0) 100%);
        background: linear-gradient(0deg, rgba(232,228,219,0.8) 50%, rgba(232,228,219,0) 100%);
    }
    .back {
        display: none;
    }
}
@media screen and (max-width:300px) {
    .next, .sumbit {
        padding: 16px 28px;
    }
}
/*END NAVIGATION*/

/*_____---REVEAL PAGE---_____*/
#reveal-page {
    background-color: white;
}

/*General*/
.logo-small {
    width: 83px;
    margin: 0 auto 46px auto;
}
h2 {
    text-align: center;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 12px;
    font-family: 'Nespresso Lucas Bold', Arial, sans-serif;
}
h3 {
    text-align: center;
    text-transform: uppercase;
    
    font-family: 'Nespresso Lucas Regular', Arial, sans-serif;
    
    margin: 0 0 20px 0;
}
.italic {
    font-style: italic;
}
.btn {
    display: inline-block;
    
    margin-top: 20px;
}
ul {
    margin: 0;
}
li span {
    font-family: 'Nespresso Lucas Bold', Arial, sans-serif;
}

section:not(.background-green), .background-green > div {
    max-width: 1160px;
    
    margin: 0 auto;
    padding-top: 100px;
    padding-left: 16px;
    padding-right: 16px;
    
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
}

@media screen and (max-width: 1200px) {
    section:not(.background-green), .background-green > div {
        padding-top: 50px;
    }
    h2 {
        font-size: 28px;
    }
    h3 {
        font-size: 24px;
    }
}

/*Result*/
.reveal-your-favourite {
    font-size: 28px;
}
section.background-green {
    width: 100%;
    background-color: #849767;
    background-repeat: no-repeat;
    background-size: cover;
    
    color: white;
}
.background-green > div {
    padding-top: 44px;
    padding-bottom: 60px;
}
.background-green p {
    color: white;
}
.reveal-result {
    display: flex;
    flex-direction: row;
}
.reveal-result > div {
    width: 50%;
}
.reveal-result .reveal-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.reveal-result h2 {
    margin: 0;
}
.reveal-lines li {
    font-size: 20px;
    padding: 10px 0;
}
.reveal-lines li:not(:last-of-type) {
    border-bottom: 1px solid white;
}
.reveal-lines li {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}
.reveal-lines li .level {
    text-align: right;
    font-family: 'Nespresso Lucas Regular', Arial, sans-serif;
}
.reveal-lines li .level img {
    width: 15px;
    margin-left: 4px;
}
.reveal-result .cup-picture {
    width: 70%;
}
.story {
    padding: 36px 0;
}
.story p {
    font-size: 16px;
    line-height: 22px;
    text-align: left;
    margin: 0;
}
.intensity-level {
    height: 30px;
    width: 122px !important;
}

@media screen and (max-width: 580px) {
    .logo-small {
        width: 56px;
        margin: 0 auto 20px auto;
    }
    .reveal-result {
        display: block;
    }
    .reveal-result > div {
        width: 100%;
    }
    .reveal-result .cup-picture {
        width: 50%;
        margin-bottom: 16px;
    }
    .reveal-lines li span {
        font-size: 18px;
    }
}
/*Free Sleeve*/
.free-sleeve img.ico-free {
    width: 80px;
    margin: 0 auto 20px auto;
}
.free-sleeve p {
    margin-bottom: 10px;
}
@media screen and (max-width: 580px) {
    .free-sleeve img.ico-free {
        width: 60px;
    } 
}

/*Discover the other*/
section.discover-the-other ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
section.discover-the-other ul li {
    display: flex;
    flex-direction: column;
    align-items: center; 
    
    width: 146px;
    margin-bottom: 36px;
}
section.discover-the-other img {
    width: 136px
}
section.discover-the-other .cup-number {
    font-family: 'Nespresso Lucas Bold', Arial, sans-serif;
    width: 78px;
    height: 63px;
    line-height: 63px;
    font-size: 24px;
    text-align: center;

    background-image: url("img/cup.svg");
    background-size: cover;
    
    margin-bottom: 36px;
}
section.discover-the-other .coffee-name {
    font-family: 'Nespresso Lucas Med', Arial, sans-serif;
    font-size: 20px;
    text-align: center;
    margin-top: 28px;
}
@media screen and (max-width: 580px) {
    section.discover-the-other img {
        width: 60px;
    }
    section.discover-the-other .cup-number {
        width: 40px;
        height: 32px;
        line-height: 32px;
        font-size: 18px;

        margin-bottom: 20px;
    }
    section.discover-the-other ul li {
        width: 100px;
    }
}

/*Rate the survey*/
#open-response {
    width: 100%;
    max-width: 560px;
    margin-top: 12px;

    position: relative;
    overflow: hidden;
}
.placeholder-open-response {
    position: absolute;
    left: 10px;
    top: 10px;
    
    color: #707070;
    pointer-events: none;
}

/*Share your favourite*/
section.share-your-favourite p {
    font-size: 24px;
    margin-bottom: 24px
}
section.share-your-favourite p.hashtag {
    font-size: 22px;
    font-family: 'Nespresso Lucas Med', Arial, sans-serif;
    margin: 24px 0 0 0;
}
section.share-your-favourite img {
    width: 100%;
    max-width: 886px;
}

/*Validity*/
section.validity {
    padding-top: 64px;
}
section.validity p {
    font-size: 16px;
}
/*_____---END REVEAL PAGE---_____*/