.quiz-modal {
    position: fixed;
    width: 100vw;
    /* height: 100vh; */
    height: 100%;
    z-index: 16777272; /* one higher than the divbar plugin */
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
}

.quiz-modal .quiz-modal-inner {
    width: 100vw;
    height: 90vh;
    height: 100%;
    background-color:#f5f4ea;
    overflow:hidden;
    
}

.progress {
	background-color: #fff;
	height: 10px;
	position: absolute; 
	top: 0; right: 0; left: 0;
	z-index: 50;
}
.progress__bar {
	background-color: #E0D3BB;
	height: 10px;
	transition: width 0.5s ease-out;
}

#colourQuiz {
    height: 100%;
    position: relative;
}

#colourQuiz.waiting {
    display: none;
}


.quiz-button {
    display: block;
    text-align: center;
}

    .quiz-button span {
        font-weight: bold;
        display: inline-block;
        height: 40px;
        line-height: 40px;
        padding: 0px 37px 0px 37px;
        border: 1px solid rgb(51,51,51);
        color: rgb(51,51,51);
        cursor: pointer;
        transition: all 0.5s;
    }

        .quiz-button span:hover {
            background: rgb(51,51,51);
            color: #fff;
        }

.quiz-button--black span {
	border: 1px solid rgb(51,51,51);
    background-color: rgb(51,51,51);
	color: #fff;
}
.quiz-button--black span:hover {
	border: 1px solid rgb(20,20,20);
    background-color: rgb(20,20,20);
	color: #fff;
}

.quiz-link {
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

.quiz-layout {
    position: relative;
    height: 100%;
    display: grid;
    /* grid-template-columns: 0.25fr 1.9fr 0.7fr; */
    grid-template-columns: 85px 1.9fr 0.6fr;
    grid-template-rows: 0.4fr 2.2fr 0.2fr;
}

    .quiz-layout .quiz-section-quiz {
        /* height: 100%; */
        position: relative;
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        /* grid-row-end: 3; */
        grid-row-end: 4;
    }

    .quiz-layout .quiz-section-sidebar {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 4;
        border-right: 1px solid #fff;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .quiz-layout .quiz-section-sidebar .m-logo {
        width: 17px;
        height: auto;
        cursor: pointer;
    }

    .quiz-layout .quiz-section-sidebar .m-logo.mobile {
        display: none;
    }

    .quiz-layout .quiz-section-buttons {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 3;
        grid-row-end: 4; 
        position: relative;
    }

    .quiz-layout .quiz-section-instructions {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 4; 
        border-left: 1px solid #fff;
    }

        .quiz-layout .quiz-section-quiz .quiz-slide {
            height: 100%;
            overflow: hidden;
            position: relative;
        }

                .quiz-layout .quiz-section-quiz .quiz-slide .quiz-box-outer {
                    height: 100%;
                    width: 100%;
                    position: absolute;
                }

                    .quiz-layout .quiz-section-quiz .quiz-slide .quiz-box-outer .quiz-box {
                        position: absolute; 
                        height: 100%;
                        width: 100%;
                    }   

                        .quiz-layout .quiz-section-quiz .quiz-slide .quiz-box-outer .quiz-box .quiz-box-inner {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            height: 100%;
                            width: 100%;
                        }




.quiz-layout.hideSidebar {
    grid-template-columns: 85px 1.9fr;
    grid-template-rows: 0.4fr 2.2fr;
}

/* even tho instruction get removed, they flash for a moment before they do, this fix that */
.quiz-layout.hideSidebar .quiz-section-instructions { 
    display: none;
}

.quiz-layout.hidePrevious {
    grid-template-rows: 0.4fr 2.2fr;
}

.quiz-box-item {
    width: auto;
    color: rgb(51,51,51);
    max-width: 80%;
}

.quiz-section-quiz .quiz-box-item.disable {
    opacity: 0.5;
}

.quiz-box-item .question-title {
    /* font-weight: bold;
    font-family:"Din alternate bold",Helvetica,Arial,Lucida,sans-serif; */
    font-size: 20px; 
    line-height: 30px;
    /* display: flex;
    align-items: center; */
    font-weight: bold;
}

    .info-icon {
        font-family:"Din alternate bold",Helvetica,Arial,Lucida,sans-serif;
        display: inline-block;
        width: 25px;
        height: 25px;
        line-height: 25px;
        flex-shrink: 0;
        background: rgb(227,210,184);
        color: rgb(51,51,51);
        border-radius: 50%;
        font-size: 14px;
        text-align: center;
        margin-left: 7px;
        cursor: pointer;
        transition: all 0.5s;
        font-weight: bold;
    }

    .info-icon:hover {
        background: rgb(51,51,51);
        color: rgb(227,210,184);
    }

.quiz-box-item .answers-list {
    /* display: flex;
    flex-wrap: wrap; */
}

.quiz-box-item .answers-list.columns {
    display: flex;
    flex-wrap: wrap;
}

    .quiz-box-item .answers-list.columns .answer {
        flex-basis: 50%;
    }

@media only screen and (min-width: 1024px) {
	.quiz-box-item .answers-list.columns .answer {
        flex-basis: 33.33%;
    }
}

.quiz-box-item .answers-list .answer {
    margin-bottom: 20px;
    margin-top: 20px;
	padding-right: 10px;
}

.quiz-box-item .answers-list .answer:hover {
    cursor: pointer;
}



.quiz-box-item .answers-list .answer .answer-image {
   display: flex;
   align-items: center;
}

.quiz-box-item .answers-list .answer .answer-image img {
    width: 80px;
    border-radius: 50%;
    /* height: auto; */
    height: 80px;
    margin-right: 10px;
    transition: transform 0.5s;
}

.quiz-box-item .answers-list .answer .answer-image .empty-image {
    width: 80px;
    border-radius: 50%;
    height: 80px;
    margin-right: 10px;
    transition: transform 0.5s;
    background: rgb(225,210,186);
}

@media only screen and (min-width: 1360px) {
	.quiz-box-item .answers-list .answer .answer-image img,
	.quiz-box-item .answers-list .answer .answer-image .empty-image {
		width: 100px;
		height: 100px;
		margin-right: 25px;
	}
}

.quiz-box-item .answers-list .answer:hover .answer-image img {
    transform: scale(1.05);
}

.quiz-box-item .answers-list .answer .answer-image .answer-image-text {

}

/* .quiz-box-item .answers-list .answer.active .answer-image .answer-image-text {
    font-weight: bold;
} */

.quiz-box-item .answers-list .answer .answer-text {
    display: flex;
    align-items: center;
}

    .quiz-box-item .answers-list .answer .answer-text span.answer-circle {
        display: block;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        border: 1px solid rgb(51,51,51);
        margin-right: 10px;
        position: relative;
        flex-shrink: 0;
    }

    .quiz-box-item .answers-list .answer .answer-text span.answer-circle span {
        display: block;
        position: absolute;
        top: 2px;
        left: 2px;
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: transparent;
        transition: all 0.2s;
    }

    .quiz-box-item .answers-list .answer:hover .answer-text span.answer-circle span {
        /* background: rgb(51,51,51); */
        background: rgb(227,210,184);
    }

    .quiz-box-item .answers-list .answer.active .answer-text span.answer-circle span {
        background: rgb(51,51,51); 
    }


.quiz-layout .quiz-section-buttons .quiz-pager {
    font-weight: bold;
    flex-basis: 50%;
    cursor: pointer;
}

.quizInput {
    width: 60%;
    margin: 0 auto 30px auto;
}

    .quizInput input[type=email],
    .quizInput input {
        display: block;
        width: 100%;
        height: 40px;
        line-height: 40px;
        background: transparent;
        border: 0;
        text-align: center;
        color: rgb(51,51,51);
        border: 0;
        border-bottom: 1px solid rgb(51,51,51);
        font-size: 15px;
        background-color: transparent;
    }



.quiz-layout .quiz-section-buttons .quiz-pager.prev {
    margin-left: 40px;
    padding-left: 40px;
    background-image: url(prev.svg);
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 37px auto;
    color: rgb(51,51,51);
    font-weight: bold;
    font-size: 15px;
}

.quiz-layout .quiz-section-buttons .quiz-pager.next {

}

.quiz-section-sidebar .sidebar-close {
    position: absolute;
    top: 10px;
    left: 0px;
    width: 100%;
    font-size: 50px;
    margin-top: 30px;
    cursor: pointer;
    text-align: center;
}

.quiz-popup {
    position: absolute;
    top: 0px;
    left: 0px;
    background: #e0d2bb;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-popup .quiz-popup-inner {
    width: 80%;
    text-align: center;
    color: rgb(51,51,51);
}

.quiz-popup .quiz-popup-inner.faded {
    opacity: 0.5;
}

.quiz-popup .quiz-popup-inner .popup-buttons {
    display: flex;
    justify-content: center;

}

.quiz-popup .quiz-popup-inner .popup-buttons .quiz-button:first-child {
    margin-right: 5px;
}

.quiz-popup .quiz-popup-inner .quiz-popup-title {
    font-size: 40px;
    margin-bottom: 40px;
    font-family: 'Bodoni Sans Display Regular',Helvetica,Arial,Lucida,sans-serif;
}

.quiz-popup .quiz-popup-inner .quiz-popup-content {
    margin-bottom: 40px;
}

.skip-link,
.quiz-popup .quiz-popup-inner .quiz-popup-next {
    display: inline-block;
    cursor: pointer;
    padding-right: 41px;
    background-image: url(next.png);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 37px auto;
    color: rgb(51,51,51);
    font-weight: bold;
    font-size: 15px;
}

/** intro slide **/
.quiz-section-quiz .quiz-box-inner.intro {
    background: rgb(153,176,174);
    color: #fff;
    text-align: center;
}

.quiz-section-quiz .quiz-box-inner.intro h2 {
    font-size: 45px;
    color: #fff;
    margin: 0px 0px 40px 0px;
}

.quiz-section-quiz .quiz-box-inner.intro .intro-text {
    width: 60%;
    margin: 0 auto 30px auto;
    color: #fff;
    font-size: 17px;
    line-height: 23px;
}

.quiz-section-quiz .quiz-box-inner.intro .quizInput input::placeholder {
    color: #fff;
}
.quiz-section-quiz .quiz-box-inner.intro .quizInput input {
    color: #fff;
    border-bottom: 1px solid #fff;
}

.intro .quiz-button span {
    border: 1px solid #fff;
    color: #fff;
    
}

.intro .quiz-button span:hover {
    background: #fff;
    color: rgb(51,51,51);
}


/** product slide **/

.quiz-product {

}

.quiz-product .quiz-products-box {
    display: flex;
    justify-content: center;
}

.quiz-product .quiz-products-box  .quiz-product {
    flex-basis: 50%;
}

    .quiz-product .quiz-products-box  .quiz-product img.quiz-product-image {
        width: 40%;
        height: auto;
    }

/** upload slide **/
.quiz-section-quiz .quiz-box-inner.upload .quiz-box-item {
    width: 50vw;
    margin-bottom: 30px;
}

.quiz-section-quiz .quiz-box-inner.upload .upload-message {
    margin-bottom: 30px;
}

.quiz-section-quiz .quiz-box-inner.upload .uploaded-image {
    margin-bottom: 30px;
    text-align: center;
}

.quiz-section-quiz .quiz-box-inner.upload .uploaded-image img {
    display: block;
    width: 20vw;
    margin: 0px auto;
}

.quiz-section-quiz .quiz-box-inner.upload .quiz-button {
    margin-bottom: 10px;
}

/** side instructions **/

.quiz-section-instructions {
    background: rgb(153,176,174);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0px 20px 0px 20px;
}

.quiz-section-instructions-inner {
    width: 100%;
    
}

.instruction-side-item {
    margin-bottom: 20px;
}

.instruction-side-item.empty {
    margin-bottom: 12px;
}

.quiz-section-instructions .quiz-section-instructions-inner .instruction-side-item .side-item-header {
    display: flex;
    align-items: center;
}

.instruction-side-item .side-item-header .instruction-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: white;
    overflow: hidden;
    margin-right: 10px;
}

.instruction-side-item.empty .side-item-header .instruction-icon {
    border: 1px solid #fff;
    background: transparent;
}

    .instruction-side-item .side-item-header .instruction-icon img {
        width: 30px;
        display: block;
        margin: 0 auto;
        height: auto;
    }

    .instruction-side-item.empty .side-item-header .instruction-icon img {
        display: none;
    }

.instruction-side-item .side-item-header .instruction-title {
    font-weight: bold;
}

.instruction-side-item.empty .side-item-header .instruction-title {
    /* color: rgb(191, 189,189); */
    color: #717c7c;
}

.instruction-side-item .side-item-text {
    margin-left: 40px;
    border-top: 1px solid #fff;
    margin-top: 3px;
    padding-top: 10px;
}

.instruction-side-item.empty .side-item-text {
    border-top: 0px;
}

.quiz-section-instructions .quiz-section-instructions-inner .colour-name {
    font-family: 'Bodoni Sans Display Regular',Helvetica,Arial,Lucida,sans-serif;
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 40px;
}

.quiz-box-item.results-slide {
    text-align: center;
}

.quiz-box-item.results-slide h4 {
    font-size: 40px;
}



/** popup transition **/
.popupfade-enter-active, .popupfade-leave-active {
    transition: opacity .5s;
}

.popupfade-enter, .popupfade-leave-to {
    opacity: 0;
}

/** slider transition css **/
.slide-leave-active,
.slide-enter-active {
    transition: transform 1.3s, opacity 0.5s;
}
.slide-enter {
    transform: translate(100%, 0);
    opacity: 0;
}

.slide-enter-to {
    opacity: 1;
}

.slide-leave {
    opacity: 1;
}

.slide-leave-to {
    transform: translate(-100%, 0);
    opacity: 0;
}

.slideback-leave-active,
.slideback-enter-active {
    transition: transform 1.3s, opacity 0.5s;
}
.slideback-enter {
    transform: translate(-100%, 0);
    opacity: 1;
}
.slideback-leave-to {
    transform: translate(100%, 0);
    opacity: 0;
}

/** side panel transition **/

.slideOutPanel-enter-active,
.slideOutPanel-leave-active {
    transition: 0.7s;
    transition-delay: 0.7s;
}

.slideOutPanel-enter-active {
    transform: translate(100%, 0);
    opacity: 0;
}
.slideOutPanel-enter-to {
    transform: translate(0, 0);
    opacity: 1;
}

.slideOutPanel-leave-active {
    transform: translate(0, 0);
    opacity: 1;
}

.slideOutPanel-leave-to {
    transform: translate(100%, 0);
    opacity: 0;
}

/** side TEXT transition **/

.slideDownText-enter-active,
.slideDownText-leave-active {
    transition: 0.5s;
}

.slideDownText-enter-active {
    opacity: 0;
}

.slideDownText-enter-to {
    opacity: 1;
}

.slideDownText-leave-active {
    opacity: 1;
}

.slideDownText-leave-to {
    opacity: 0;
}

/** slide UP transition (for mobile **/


.slideUpPanel-enter-active,
.slideUpPanel-leave-active {
    transition: 0.4s ease-out;
    /* transition-delay: 1.5s; */
}

.slideUpPanel-enter-active {
    transform: translateY(100%);
}
.slideUpPanel-enter-to {
    transform: translateY(0);
}

.slideUpPanel-leave-active {
    transform: translateY(0);
}

.slideUpPanel-leave-to {
    transform: translateY(100%);
}

/** quiz-full-loader **/

.quiz-full-loader {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #f5f4ea;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-full-loader-inner {

}

/** form shake **/
.shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

/** quiz-loader **/

.quiz-loader-wrap {
    height: 30px;
}
.quiz-loader,
.quiz-loader:before,
.quiz-loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.quiz-loader {
  color: #444;
  font-size: 10px;
  margin: 0px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.quiz-loader:before,
.quiz-loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.quiz-loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.quiz-loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

/**** results page ***/

/* .results {
    width: 80%;
    min-height: 50vh;
    margin: 0 auto;
} */

.quiz-white-button {
    display: inline-block;
    background: #fff;
    color: rgb(51,51,51);
    padding: 10px 30px 10px 30px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s all;
}

.quiz-dark-button {
    display: inline-block;
    background: rgb(51,51,51);
    color: #fff;
    padding: 10px 30px 10px 30px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s all;
}

.quiz-white-button:hover {
    background: rgb(51,51,51);
    color: #fff;
}

/* .quiz-dark-button:hover {
    background: #fff;
    color: rgb(51,51,51);
} */

.results-title {
   
    /* text-decoration: underline; */
    margin-bottom: 30px;
    
}

.results-title span {
    text-transform: uppercase;
    display: inline-block;
    border-bottom: 1px solid rgb(51,51,51);
}



.quiz-layout.results .quiz-section-quiz .quiz-slide .quiz-box-outer .quiz-box .quiz-box-inner {
    display: block;
    overflow: auto;
}

.quiz-layout.results .quiz-section-quiz {
    grid-column-start: 1;
}

.quiz-layout.results .quiz-section-quiz .results-section {
    
    min-height: 100vh;
}

.quiz-layout.results .quiz-section-quiz .results-section.top {
    background-image: url(results-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgb(51,51,51);
}

.quiz-layout.results .quiz-section-quiz .results-section.top h2 {
    color: #fff;
    font-size: 45px;
    line-height: 1;
    margin-bottom: 40px;
    margin-top: 50px;
	padding-bottom: 0;
}

.quiz-layout.results .quiz-section-quiz .results-section.top .inner {
    
}

.quiz-layout.results .quiz-section-quiz .results-section.top .results-box {
    background-color: rgb(224,210,187);
    padding: 75px 55px 75px 55px;
    width: 480px;
    margin: 0 auto;
}



.quiz-layout.results .quiz-section-quiz .results-section.top .results-box .results-box-text {
    font-size: 21px;
    line-height: 28px;
    font-weight: bold;
    margin-bottom: 60px;
    margin-bottom: 60px;
}

.quiz-layout.results .quiz-section-quiz .results-section.top .results-box .results-box-product {
    font-family: 'Bodoni Sans Display Regular',Helvetica,Arial,Lucida,sans-serif;
    font-size: 45px;
    margin-bottom: 40px;
}

.quiz-layout.results .quiz-section-quiz .results-section.top .results-box .results-box-buttons {
    display: flex;
}

.quiz-layout.results .quiz-section-quiz .results-section.top .results-box .results-box-buttons .quiz-white-button {
    flex-basis: 49%;
    margin-right: 4px;
}

.quiz-layout.results .quiz-section-quiz .results-section.top .results-box .result-image {
    margin-bottom: 40px;
    width: 185px;
    border-radius: 50%;
}

.quiz-layout.results .quiz-section-quiz .results-section.product {
    padding: 10vh 15vw 10vh 15vw;
}

    .quiz-layout.results .quiz-section-quiz .results-section.product .inner {
        display: flex;
        height: 100%;
    }

        .quiz-layout.results .quiz-section-quiz .results-section.product .inner .left {
            background: #fff;
            width: 50%;
        }

        .quiz-layout.results .quiz-section-quiz .results-section.product .inner .left .product-block {
            padding: 75px 55px 75px 55px;
            color: rgb(51,51,51);
            text-align: center;
        }

        .quiz-layout.results .quiz-section-quiz .results-section.product .inner .left .product-block .product-title {
            font-family: 'Bodoni Sans Display Regular',Helvetica,Arial,Lucida,sans-serif;
            font-size: 30px;
            line-height: 30px;
            margin: 30px 0px 40px 0px;
        }

        .quiz-layout.results .quiz-section-quiz .results-section.product .inner .left .product-block .product-image {
            /* background-image: url(swipe.png);
            background-repeat: no-repeat;
            background-size: 450px auto; */
            position: relative;
            min-height: 100px;
        }

        .quiz-layout.results .quiz-section-quiz .results-section.product .inner .left .product-block .product-image .image {
            position: relative;
            z-index: 1;
        }

        .quiz-layout.results .quiz-section-quiz .results-section.product .inner .left .product-block .product-image .image img {

        }

        .quiz-layout.results .quiz-section-quiz .results-section.product .inner .left .product-block .product-image img.swipe {
            display: block;
            max-width: none;
            width: 450px;
            height: auto;
            position: absolute;
            left: -100px;
            top: 90px;
        }

        .quiz-layout.results .quiz-section-quiz .results-section.product .inner .left .product-block .product-description {
            font-weight: bold;
            font-size: 21px;
            line-height: 30px;
            margin: 40px 0px 40px 0px;
        }

        .quiz-layout.results .quiz-section-quiz .results-section.product .inner .left .product-block .product-price {
            margin: 0px 0px 40px 0px;
        }

        .quiz-layout.results .quiz-section-quiz .results-section.product .inner .left .product-block .product-price .desc {
            display: block;
            font-size: 14px;
            margin: 0px 0px 20px 0px;
        }

        .quiz-layout.results .quiz-section-quiz .results-section.product .inner .left .product-block .product-price .price {
            display: block;
            font-family: 'Bodoni Sans Display Regular',Helvetica,Arial,Lucida,sans-serif;
            font-size: 30px;
            line-height: 30px;
        }

        .quiz-layout.results .quiz-section-quiz .results-section.product .inner .right {
            width: 50%;
            display: flex;
            align-items: center;
            color: rgb(51,51,51);
        }

            .quiz-layout.results .quiz-section-quiz .results-section.product .inner .right .product-info {
                margin-left: auto;
                width: 70%;
            }

            .quiz-layout.results .quiz-section-quiz .results-section.product .inner .right .product-info .product-summary {
                font-weight: bold;
                margin-bottom: 40px;
            }

            .quiz-layout.results .quiz-section-quiz .results-section.product .inner .right .product-info .product-list {

            }

            .quiz-layout.results .quiz-section-quiz .results-section.product .inner .right .product-info .product-list .list-row {
                display: flex;
                align-items: center;
                margin-bottom: 12px;
            }

            .quiz-layout.results .quiz-section-quiz .results-section.product .inner .right .product-info .product-list .list-row img {
                flex-basis: 47px;
                width: 47px;
            }

            .quiz-layout.results .quiz-section-quiz .results-section.product .inner .right .product-info .product-list .list-row .text {
                flex-basis: 80%;
                margin-left: 15px;
            }

.quiz-layout.results .quiz-section-quiz .results-section.instruction {
    height: 100%;
}

    .quiz-layout.results .quiz-section-quiz .results-section.instruction .inner {
        display: flex;
        height: 100%;
    }

        .quiz-layout.results .quiz-section-quiz .results-section.instruction .inner .left {
            /* background-image: url(lady-hair.png); */
            background-repeat: no-repeat;
            background-size: cover;
            width: 50%;
        }

        .quiz-layout.results .quiz-section-quiz .results-section.instruction .inner .right {
            color: rgb(51,51,51);
            width: 50%;
            background-color: rgb(158,175,174);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .quiz-layout.results .quiz-section-quiz .results-section.instruction .inner .instructions-box {
            flex-basis: 70%;
            text-align: center;
        }

        .quiz-layout.results .quiz-section-quiz .results-section.instruction .inner .instructions-box .results-title {
            margin-bottom: 20px;
        }

        .quiz-layout.results .quiz-section-quiz .results-section.instruction .inner .instructions-box .instruction-title {
            font-family: 'Bodoni Sans Display Regular',Helvetica,Arial,Lucida,sans-serif;
            font-size: 30px;
            line-height: 30px;
            margin: 30px 0px 40px 0px;
        }

        .quiz-layout.results .quiz-section-quiz .results-section.instruction .inner .instructions-box .instruction-summary {
            font-weight: bold;
            margin-bottom: 40px;
            font-size: 21px;
            line-height: 30px;
        }

    



/**** instructions page ***/
.instructions-main {
    /* width: 80%;
    min-height: 50vh;
    margin: 0 auto; */
    color: rgb(51,51,51);
}

.instructions-main .intructions-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 200px 0px 100px 0px;
}

.instructions-main .intructions-header .inner {
    width: 50vw;
    text-align: center;
}

.instructions-main .intructions-header h2 {
    color: rgb(51,51,51);
    font-family: 'Bodoni Sans Display Regular',Helvetica,Arial,Lucida,sans-serif;
    font-size: 42px;
    margin-bottom: 40px;
}

.instructions-main .intructions-header .text {
    color: rgb(51,51,51);
    font-size: 20px;
    line-height: 32px;
    font-weight: bold;
    margin-bottom: 40px;
}

.instructions-main .intructions-header .instructions-button {
    font-weight: bold;
    display: inline-block;
    height: 31px;
    line-height: 30px;
    padding: 0px 17px 0px 17px;
    border: 1px solid rgb(51,51,51);
    color: rgb(51,51,51);
    cursor: pointer;
    transition: all 0.5s;
}

section.instruction-section {
    height: 100vh;
    display: flex;
}

section.instruction-section .section-image {
    flex-basis: 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

section.instruction-section .section-content {
    flex-basis: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Select every 3rd list item starting with 1st */
section.instruction-section:nth-of-type(3n - 2) .section-content {
    background-color: rgb(153,176,174);
}

/* Select every 3rd list item starting with 2nd */
section.instruction-section:nth-of-type(3n - 1) .section-content {
    background-color: rgb(227,210,184);
}

/* Select every 3rd list item starting with 3nd */
section.instruction-section:nth-of-type(3n) .section-content {
    background-color: rgb(245,244,233);
}

section.instruction-section .section-content .section-content-inner .section-title {
    font-family: 'Bodoni Sans Display Regular',Helvetica,Arial,Lucida,sans-serif;
    font-size: 42px;
    line-height: 42px;
    margin-bottom: 12vh;
}

section.instruction-section:nth-of-type(3n - 2) .section-content .section-content-inner .section-title {
    color: #fff;
}

section.instruction-section .section-content .section-content-inner {
    text-align: center;
}

section.instruction-section .section-content .section-content-inner .section-item {

}

section.instruction-section .section-content .section-content-inner .section-item .section-circle {
    width: 136px;
    height: 136px;
    margin: 0 auto 1vh auto;
    border-radius: 50%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

section.instruction-section .section-content .section-content-inner .section-item .section-circle span {
    color: rgb(82,82,82);
    font-size: 30px;
    
}

section.instruction-section .section-content .section-content-inner .section-item .section-text {
    font-size: 15px;
    /* margin-bottom: 3vh; */
    margin: 0 auto 3vh auto;
    max-width: 70%;
}

section.instruction-section:nth-of-type(3n - 2) .section-content .section-content-inner .section-item .section-text {
    color: #fff;
}

.instructions-main .intructions-footer {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.instructions-main .intructions-footer .intructions-footer-inner {
    max-width: 70%;
    margin: 0 auto;
    text-align: center;
}


.instructions-main .intructions-footer .footer-title {
    font-family: 'Bodoni Sans Display Regular',Helvetica,Arial,Lucida,sans-serif;
    font-size: 43px;
    line-height: 48px;
    margin-bottom: 5vh;
}

.instructions-main .intructions-footer .footer-email-box {

}

.instructions-main .intructions-footer .footer-email-box.disable {
    opacity: 0.3;
}

.instructions-main .intructions-footer .footer-email-box .title {
    font-size: 20px;
    line-height: 27px;
    margin-bottom: 1vh;
}

.instructions-main .intructions-footer .footer-email-box input::placeholder {
    color: rgb(51,51,51);
}

.prevMobile {
    display: none;
}

/**-------------------- responsive ------**/

/**------height ------***/
@media only screen and (max-height : 740px) and (max-width : 530px) {

    .quiz-layout .quiz-section-quiz .quiz-slide .quiz-box-outer .quiz-box .quiz-box-inner {
        overflow-y: auto;
    }

    .quiz-layout .quiz-section-quiz .quiz-slide .quiz-box-outer .quiz-box .quiz-box-inner {
        align-items: flex-start;
    }

    .quiz-modal .quiz-modal-inner {
        width: 100vw;
        height: 100vh;
    }
}

/**------width ------***/
 @media only screen and (max-width : 1200px) {

    .quiz-layout.results .quiz-section-quiz .results-section.top h2 {
        margin-top: 50px;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.top .results-box {
        margin-bottom: 60px;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.instruction {
        height: 100%;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.product .inner .left .product-block .product-image img.swipe {
        left: auto;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.product .inner .right {
        justify-content: center;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.product .inner .right .product-info {
        margin-left: 0;
        margin-top: 100px;
    }

}

@media only screen and (max-width : 1024px) {
    .quiz-modal .quiz-modal-inner {
        width: 100vw;
        height: 100%;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.product .inner {
        display: block;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.product .inner .left,
    .quiz-layout.results .quiz-section-quiz .results-section.product .inner .right {
        width: auto;
    }

}

@media only screen and (max-width : 830px) {

    .prevMobile {
        display: block;
        margin-right: auto;
        flex-basis: 100%;
    }

    .prevMobile .quiz-pager.prev {
        padding-left: 40px;
        margin-top: 40px;
        margin-bottom: 40px;
        background-image: url(prev.png);
        background-repeat: no-repeat;
        background-position: center left;
        background-size: 37px auto;
        color: rgb(51,51,51);
        font-weight: bold;
        font-size: 14px;
    }

    .quiz-layout.hidePrevious,
    .quiz-layout {
        grid-template-rows: 40px 2.2fr 40px;
    }

    .quiz-layout.hidePrevious .quiz-section-instructions {
        grid-row-start: 3;
        grid-row-end: 3;
    }

    .quiz-layout .quiz-section-buttons {
        display: none;
    }

    .quiz-layout.hidePrevious.hideSidebar .quiz-section-quiz {
        grid-row-end: 4;
    }

    .quiz-layout .quiz-section-instructions {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 3;
        border-left: 0;
    }

    .quiz-layout.hidePrevious .quiz-section-quiz {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-end: 4;
    }
    .quiz-layout .quiz-section-quiz {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 4;
    }
    .quiz-layout .quiz-section-sidebar {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;
        border-right: 0px;
        border-bottom: 1px solid #fff;
    }
    .quiz-layout .quiz-section-sidebar .m-logo {
        display: none;
    }

    .quiz-layout .quiz-section-sidebar .m-logo.mobile {
        display: inline-block;
        height: 17px;
        width: auto;
        margin-top: 5px;
    }

    .quiz-section-sidebar .sidebar-close {
        text-align: right;
        margin: 8px 10px 0px 0px;
        font-size: 20px;
        left: auto;
        width: 27px;
        right: 0px;
        top: 0px;
    }

    .quiz-section-sidebar .sidebar-close svg {
        width: 22px;
        height: auto;
    }

    .quiz-layout .quiz-section-quiz .quiz-slide .quiz-box-outer .quiz-box .quiz-box-inner {
        overflow-y: scroll;
        flex-wrap: wrap;
        padding-top: 35px;
        padding-left: 35px;
        padding-right: 35px;
    }

    .quiz-layout .quiz-section-quiz .quiz-slide .quiz-box-outer .quiz-box .quiz-box-inner.intro {
        align-items: center;
    }

    .quiz-layout .quiz-section-instructions-inner {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .quiz-box-item .answers-list.columns {
        /*display: block;*/
    }
	
	.quiz-box-item .answers-list .answer {
		margin-bottom: 10px;
		margin-top: 10px;
		padding-right: 0px;
	}
	
	.quiz-box-item .answers-list .answer .answer-image {
		display: block;
		text-align: center;
	}
	
	.quiz-box-item .answers-list .answer .answer-image img,
	.quiz-box-item .answers-list .answer .answer-image .empty-image {
		display: block;
		margin: 0 auto 10px;
	}

    .quiz-section-instructions.side .instruction-side-item .side-item-text,
    .quiz-section-instructions.side .instruction-side-item.empty .side-item-header .instruction-title,
    .quiz-section-instructions.side .instruction-side-item .side-item-header .instruction-title {
        display: none;
    }

    .quiz-section-instructions.side .quiz-section-instructions-inner .colour-name {
        font-size: 20px;
        line-height: 20px;
        margin-bottom: 0px;
    }

    .quiz-section-instructions.side .instruction-side-item .side-item-header .instruction-icon {
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }

    .quiz-section-instructions.side .instruction-side-item.empty,
    .quiz-section-instructions.side .instruction-side-item {
        margin-bottom: 0px;
    }

    .quiz-section-instructions.mobile {
        /* display: block; */
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .quiz-section-instructions.mobile .mobile-instructions-close {
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
    }

    .quiz-section-instructions.mobile .quiz-section-instructions-inner {
        height: 100%; /*stops content being hidden when overflow - even with overflow auto on */
    }

    .quiz-section-instructions.mobile .quiz-section-instructions-inner .colour-name {
        margin-top: 50px;
    }

    .quiz-section-instructions.side .quiz-section-instructions-inner .colour-name + div { /* scott: comment your code! wtf is this? -future scott */
        margin-left: auto; 
    }

    .slideOutPanel-enter-active {
        transform: translateY(100%);
        opacity: 0;
    }
    .slideOutPanel-enter-to {
        transform: translateY(0);
        opacity: 1;
    }

    .slideOutPanel-leave-active {
        transform: translateY(0);
        opacity: 1;
    }

    .slideOutPanel-leave-to {
        transform: translateY(100%);
        opacity: 0;
    }

    .quiz-section-quiz .quiz-box-inner.upload .uploaded-image img,
    .quiz-section-quiz .quiz-box-inner.upload .quiz-box-item {
        width: auto;
    }

    section.instruction-section {
        flex-wrap: wrap;
        height: auto;
    }

    section.instruction-section .section-content,
    section.instruction-section .section-image {
        flex-basis: 100%;
    }

    section.instruction-section .section-image {
        height: 50vh;
        background-position: center center;
    }

    section.instruction-section .section-content .section-content-inner .section-title {
        margin-bottom: 50px;
    }

    section.instruction-section .section-content .section-content-inner {
        padding-top: 50px;
        padding-bottom: 10px;
    }
    .instructions-main .intructions-header {
        padding: 50px 0px 70px 0px;
    }

    .instructions-main .intructions-header .inner {
        width: auto;
    }

    .instructions-main .intructions-footer {
        height: auto;
        padding: 50px 0px 50px 0px;
    }

    .instructions-main .intructions-header .instructions-button {
        height: auto;
        margin: 0px 30px 0px 30px;
        line-height: 25px;
        padding: 5px 5px 5px 5px;
        width: 60%;
    }

    .instructions-main .intructions-footer .footer-title {
        font-size: 30px;
        line-height: 30px;
        margin-bottom: 60px;
    }

    .quiz-layout.results .quiz-section-quiz .quiz-slide .quiz-box-outer .quiz-box .quiz-box-inner {
        padding: 0px 0px 0px 0px;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.instruction .inner {
        display: block;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.instruction .inner .left {
        width: auto;
        height: 60vh;
        background-position: center center;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.instruction .inner .right {
        width: auto;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.instruction .inner .instructions-box {
        margin: 70px 0px 70px 0px;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.product .inner .left .product-block .product-image img.swipe {
        width: 63vw;
        left: -15vw;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.top .results-box {
        width: auto;
    }

}

@media only screen and (max-width : 530px) {

    .quiz-layout.results .quiz-section-quiz .results-section.top {
        padding: 20px 20px 20px 20px;
        display: block;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.top h2 {
        font-size: 30px;
        line-height: 35px;
        margin: 10px 0px 20px 0px;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.top .results-box .result-image {
        margin-bottom: 25px;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.top .results-box .results-box-product {
        font-size: 30px;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.top .results-box .results-box-buttons {
        display: block;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.top .results-box .results-box-buttons .quiz-white-button {
        display: block;
        margin: 0px auto 10px auto;
        width: 190px;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.top .results-box {
        padding: 38px 40px 38px 40px;
        margin-bottom: 0px;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.product {
        padding: 20px 20px 20px 20px;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.product .inner .left .product-block {
        padding: 35px 30px 40px 30px;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.product .inner .left .product-block .product-image img.swipe {
        width: 95vw;
        left: -18vw;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.product .inner .left .product-block .product-description {
        font-size: 15px;
        line-height: 20px;
        font-weight: normal;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.product .inner .left .product-block .product-price {
        margin-bottom: 30px;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.product .inner .right .product-info {
        margin-top: 50px;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.product .inner .right .product-info {
        width: 90%;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.product .inner .right .product-info .product-list .list-row .text {
        font-size: 13.5px;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.instruction .inner .instructions-box .instruction-summary {
        font-size: 15px;
        line-height: 22px;
        font-weight: normal;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.top .results-box .results-box-text {
        font-size: 15px;
        line-height: 21px;
        font-weight: normal;
        margin-bottom: 30px;
    }

    .quiz-layout.results .quiz-section-quiz .results-section.top .results-box .result-image {
        width: 37vw;
    }

    .quiz-popup .quiz-popup-inner .quiz-popup-title {
        line-height: 47px;
    }

    .quiz-button span {
        padding: 0px 15px 0px 15px;
        font-size: 13px;
    }

	/*
    .intercom-lightweight-app-launcher {
        display: none;
    }
	*/

    .quiz-box-item {
            max-width: 100%;
    }

    .quiz-section-quiz .quiz-box-inner.intro .intro-text {
        width: 100%;
        font-size: 15px;
        line-height: 21px;
    }

    .quiz-section-quiz .quiz-box-inner.intro h2 {
        font-size: 30px;
    }

    .quizInput {
        width: 100%;
    }

    .quiz-layout .quiz-section-quiz .quiz-slide .quiz-box-outer .quiz-box .quiz-box-inner {
        padding-left: 35px;
        padding-right: 35px;
    }
}