:root {
    --blue: #0000FF;
    --darkblue: #010E3D;
    --mediumblue: #0F256C;
    --buttonblue: #0D52A0;
    --grey: #9B9898;
    --lightgrey: #EFF0F1;
    --off-white: #F9F4F5;
  }

@font-face { font-family: 'akhandsoft-bold'; src: url('fonts/AkhandSoft-Bold.otf'); font-weight:bold;}
@font-face { font-family: 'notosans'; src: url('fonts/NotoSans-Regular.ttf'); font-weight:normal; }
@font-face { font-family: 'notosans-medium'; src: url('fonts/NotoSans-Medium.ttf'); font-weight:500; }
@font-face { font-family: 'notosans-bold'; src: url('fonts/NotoSans-Bold.ttf'); font-weight:bold; }
@font-face { font-family: 'notosanscond-light'; src: url('fonts/NotoSans-CondensedLight.ttf'); font-weight:lighter; }

* {
    margin: 0;
    padding: 0;
}
html{
    scroll-behavior: smooth;
}
body{
    font-family: notosans;
    font-size: 16px;
}
#loader {
    border: 12px solid #f3f3f3;
    border-radius: 50%;
    border-top: 12px solid var(--grey);
    width: 70px;
    height: 70px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.show-ca{
    display: none;
}
.show-us{
    display: none;
}
body[country='ca'] .show-ca{
    display: block;
}
body[country='us'] .show-us{
    display: block;
}
body[country='ca'] .hide-ca{
    display: none !important;
}
body[country='us'] .hide-us{
    display: none !important;
}

header{
    position: relative;
}

#banner {
    display: none;
    width:100%;
}

.banner-disclaimer{
    position: absolute;
    bottom: 20px;
    left: 130px;
    max-width: 335px;
    font-family: notosans;
    font-size: 10px;
    color: #fff;
    font-weight: 400;
}
.banner-disclaimer::before {
    content: '*';
    color: #fff;
    font-weight: 700;
    position: absolute;
    left: -10px;
    top: 1px;
}

.banner-logo{
    position: absolute;
    right: 120px;
    top: 40px;
    width: 265px;
    display: none;
}
.essilor-logo{
    position: absolute;
    right: 120px;
    bottom: 0px;
    width: 73px;
    height: 160px;
    display: none;
}
.varilux-logo{
    position: absolute;
    left: 120px;
    top: 59px;
    width: 286px;
}
.gradient-background{
    background: radial-gradient(50% 50% at 50% 50%, var(--mediumblue) 0%, var(--darkblue) 100%);
}
.gradient-background2{
    background: radial-gradient(274.45% 50% at 50% 50%, var(--mediumblue) 0%, var(--darkblue) 100%);
}
.hero-container {
    position:relative;
}
.hero-container::after{
    content: ' ';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.hero-box{
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
}

#title-section {
    padding: 40px 15px 40px 15px;
    margin: 0;
    background-color: #fff;
}

.buttons{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
}

.see-button{
    display: flex;
    width: 340px;
    height: 48px;
    padding: 0 28px;
    box-sizing: border-box;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    flex-shrink: 0;
    border-radius: 24px;
    background: var(--buttonblue);
    color: #fff;
    border: 0px;
    position: relative;
    transition: background 0.3s ease;
}
.see-button:hover{
    background: var(--mediumblue);
}

.see-button::after{
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url(images/chevron-down.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: 78px;
    top: 20px;
}

.language-selector{
    width: 100%;
    box-sizing: border-box;
    right: 0;
    top: 0;
    background-color: #222E53;
    font-family: notosans;
    font-size: 12px;
    padding: 0px 15px;
    color: #fff;
    text-align: right;
    padding-right: 97px;
    height: 40px;
    line-height: 40px;
    position: relative;
    z-index: 1;
}
.language-selector > a{
    text-decoration: none;
    color: #F9F4F580;
}

.language-selector .language-active{
    color: #F9F4F5;
}

.title1 {
    font-size: 25px;
    font-family: 'notosans-bold';
    width: 100%;
    text-align: center;
    line-height: 1em;
    color: var(--darkblue);
}

.title1 span {
    padding:0 10px; 
}

.title2 {
    margin-top: 18px;
    color: var(--darkblue);
    font-size: 16px;
    font-family: notosans;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    max-width: 1198px;
    margin-left: auto;
    margin-right: auto;
}

@media (orientation: portrait) {
    #rotate-instruction {
        --display: flex !important;
    }
}
#banner, #title-section, footer  {
    display:block !important;
}
.banner-logo, .essilor-logo{
    display: block;
}
#banner-long{
    display: none;
}

@media  (min-width: 769px) {
    #bigscreen-toolbar {
        display: grid !important;
    }
    .title1 {
        font-size: 28px;
    }
    .title2 {
        font-size: 16px;
    }
    #compare-slider{
        overflow: hidden;
    }
}

#reqfull-btn, #exitfull-btn {
    width: 40px;
}
#fullscreen-btnwrapper {
    margin-top:14px;
}


video {
    height:100%;
    border-radius: 3px 3px;
    border: 0px;
    object-fit: cover;
}
canvas{
    height:100%;
    border-radius: 2px 2px;
}
.lined-div {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #000;
    line-height: 0.1em;
    margin: 10px 0 20px;
 }

 h2 span {
     background:#fff;
     padding:0 10px;
 }
.center {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
#compare-slider {
    position: relative;
   /* padding-bottom: 75%;*/
    /*background-image: url(images/loft-en-ca.jpg);*/
    background-repeat: no-repeat;
    background-position: left top;
    margin: auto;
    /*4:3 aspect ratio: */
   width: 100vw;
    height: 75vw;
    max-height: 100vh;
  /*  max-height: -webkit-fill-available;*/
    max-width: 133.33vh;
}

body[lang='fr'] #compare-slider {
    /*background-image: url(images/loft-fr-ca.jpg);*/
}


#compared {
    position: absolute;
    right: 0;
    top:0;
    width:50%;
    z-index:2;
    /*background-image: url(images/loft-progressive-en-ca.jpg);*/
    background-repeat: no-repeat;
    background-position: right top;
    height:100%;
    border-left:3.2px solid #FFF;
    box-sizing: border-box;
}

body[lang='fr'] #compared{
    /*background-image: url(images/loft-progressive-fr-ca.jpg);*/
}


#lens-simulator{
    padding: 50px 0;
}
#lens-simulator .content {
    max-width: 1248px;
    margin: 0 auto;
    text-align: center;
}
#lens-simulator-text{
    font-family: notosans-bold;
    font-size: 26px;
    color: #fff;
    margin-top: 20px;
}

#product-gallery .content {
    max-width: 1198px;
    margin: 0px auto;
    padding: 80px 0;
}
body[country='ca'] #product-gallery  {
    background: #EFF0F1;
}
#product-gallery-title{
    font-family: 'notosans-bold';
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 45px;
    margin-bottom: 40px;
}
#gallery-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 21px;
}
#gallery-items img{
    border-radius: 12px;
}
.gallery-hero{
    margin-bottom: 30px;
}
.gallery-logo{
    margin-bottom: 10px;
    padding: 0 20px;
}
.gallery-text{
    font-family: 'notosans-bold';
    font-size: 18px;
    line-height: 26px;
    padding: 0 20px;
    margin-bottom: 30px;
}
.gallery-button{
    padding: 0 20px;
}
.gallery-button a{
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border-radius: 21px;
    background: var(--buttonblue);
    color: #fff;
    font-size: 14px;
    width: 100%;
    height: 42px;
    font-family: notosans-bold;
    transition: background 0.3s ease;
}
.gallery-button a:hover{
    background: var(--mediumblue);
}

#disclaimers .content{
    max-width: 1198px;
    margin: 20px auto 30px auto;
    display: flex;
    justify-content: flex-start;
    gap: 16px;
    align-items: center;
    font-size: 16px;
}
#disclaimer{
    margin-top: 24px;
}
#disclaimers .content#disclaimer-study{
    padding-top: 6px;
    margin: 0 auto 50px auto;
}

ul.mention{
    list-style-type: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.smallscreen-div {
    z-index:1;
    height: 3.5em;
    border-radius: 0px;
    position: absolute;
    top: 0;
    color: #010E3D;
    font-family:notosans-bold;
    font-size: 10px;
    text-align: center;
    background-color: #FFF;
    height: 50px;
    text-transform: uppercase;
    width: 50vw;
    padding: 5px 0;
    border: 1px solid #EFF0F1;
}
.smallscreen-div > div {
    top: 50%;
    transform: translateY(-50%);
    position: relative;
}

.product-selection {
    position: absolute;
    bottom: 0;
    white-space: nowrap;
    padding: .625rem 1.25rem;
    background:rgba(255,255,255,.8);
    color: black;
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 99, 161, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 99, 161, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 99, 161, 0);
	}
}
@keyframes pulse-small {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 99, 161, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 6px rgba(0, 99, 161, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 99, 161, 0);
	}
}
@keyframes pulse-white {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}

#sliderhandle {
    position: absolute;
    width:50px;
    z-index: 10;
    height: 50px;
    left: -26px;
    top: 50%;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    background: #FFF;
    -webkit-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0);
    outline: 0;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 25px;

    box-shadow: 0 0 0 0 rgba(0, 99, 161, 1);
	transform: scale(1);
	/*animation: pulse 2s infinite;*/
}
#sliderhandle::before {
    content: "";
    display: block;
    position: absolute;
    width: 59px;
    height: 59px;
    border: 1px solid transparent;
    border-radius: 30px;
    background: 0 0;
    top: -6px;
    left: -21px;
}
#sliderhandle::after {
    content: "";
    display: block;
    position: absolute;
    width: 24px;
    height: 24px;
    border-style: solid;
    border-width: 3px 0;
    border-color: #fff;
    left: 13px;
    top: 10px;
    background: url(images/slider-arrows.svg) no-repeat center center;
}

#button-box {
    position:absolute;
    right:10px;
    bottom:29px;
    width: 64px;
    z-index:10;
    display: none; /*flex*/
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
#alt-controls{
    position: absolute;
    right: 0px;
    top: 0px;
}

#switch-box {
    position:absolute;
    right:10px;
    top:95px;
    z-index:10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    justify-content: flex-start;
    background: radial-gradient(50% 50% at 50% 50%, #0F256C 0%, #010E3D 100%);
    width: 75px;
    height: 97px;
    border-radius: 8px;
    padding: 5px;
    box-sizing: border-box;
    color: #fff;
    font-family: notosans;
    font-size: 14px;

}
#button-box button {
    cursor: pointer;
    outline: none;
    background-repeat:no-repeat;
    background-position: center;
    border:none;
}
.overlay-box {
    position:absolute;
    left:0px;
    bottom:0px;
    padding-bottom: 20px;
    box-sizing: border-box;
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index:4;
    pointer-events: none;
}
.overlay-box div{
    display: flex;
    padding: 15px 45px 15px 15px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 5px;
    position: relative;
    box-sizing: border-box;
    opacity: 0.9;
    background: #010E3D;
    width: 540px;
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    font-family: notosans;
    pointer-events: all;
}
.overlay-box .light-box{
    background: #fff;
    color: #010E3D;
}
body[country='ca']{
    .overlay-box div{
        width: 590px;
    }
}
.overlay-box > div:after {
    content: url(images/close-icon.svg);
    position: absolute;
    display: inline-block;
    top: 12px;
    right: 12px;
    cursor: pointer;
}
.overlay-box > .light-box:after {
    content: url(images/close-icon-blue.svg);
}

.overlay-box ul {
    margin-left: 24px;
}
.overlay-box ul  > li{
    margin-bottom: 8px;
}
.overlay-box ul > li:last-child {
    margin-bottom: 0;
}
.overlay-box > div {
    display:  none;;
}
.overlay-box p{
    margin-bottom: 6px;
}
.overlay-box sup{
    font-size: 0.8em;
    line-height: 0.8em;
}
.overlay-box button{
    position: absolute;
    right: 16px;
    top: 12px;
    width: 14px;
    height: 14px;
    background: transparent;
    border:0;
}
#pause-btn  {
    margin-bottom:25px;
}
#play-btn  {
    margin-bottom:20px;
}

/*@media (orientation: portrait) {
    #button-box {
        bottom:7px;
    }
    #pause-btn {
        width: 20px;
    }
    #play-btn {
        width:35px;
    }
    .scene-btn {
        width:60px;
    }
}*/


#compared-div {
    position:relative;
    height: 100%;
    overflow:hidden;
}

#slider-vide {
    height: 100%;;
}

#zone-activate {
    display: inline-block;
}

.right-view {
    position:absolute;
    right:0;
    height:100%;
    object-position: right;
}
video.right-view{
    z-index: 1;
    left: 0;
    width: 100%;
}
.left-view.progressive{
    z-index: 2;
}

.left-view {
    position:absolute;
    left:0;
    height:100%;
    width:100%;
    object-position: left;
}

#rotate-instruction {
    display: none;
    padding:12px 0;
    background-color: #17212E;
    opacity: .8;
    border-radius: 12px;
    margin: 15px auto 25px;
    width: 87%;
    justify-content: center;
    align-items: center;
}

#rotate-instruction img {
    margin-left: 35px;
    width: 30px;
    animation: 2s ease 0s infinite normal none running rotateframes;
}

#instruction-box{
    display: none;
}
@media (orientation: portrait) and (max-width: 480px) {
    #instruction-box{
        display: flex;
    }
}

@media only screen and (max-width: 320px) {
    #rotate-instruction img {
        margin-left: 0;
    }
    #rotate-instruction  {
        flex-direction: column;
    }
}

@keyframes rotateframes {
    0% {
        transform: rotate(0deg);
    }
    49% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(90deg);
    }
}

#rotate-instruction div {
    vertical-align: middle;
    display: inline-block;
    color: white;
    font-family: notosans;
    font-size: 14px;
    text-align: center;
    padding: 0 30px;
}
#distorted{
    filter:blur(0px);
  }
  #blur-left{
    bottom:0;
    left:0;
    z-index:2;
    top: 38px;
}
.blur-x{
    filter:blur(3px);
    -webkit-mask:url(images/masks/blur_x.svg) center / cover no-repeat;
    mask:url(images/masks/blur_x.svg) center / 100%;
}
.blur-xr{
    filter:blur(3px);
    -webkit-mask:url(images/masks/blur_xr.svg) center / cover no-repeat;
    mask:url(images/masks/blur_xr.svg) center / 100%;
}
.blur-physio{
    filter:blur(3px);
    -webkit-mask:url(images/masks/blur_physio.svg) center / cover no-repeat;
    mask:url(images/masks/blur_physio.svg) center / 100%;
}
.blur-physioex{
    filter:blur(3px);
    -webkit-mask:url(images/masks/blur_physioex.svg) center / cover no-repeat;
    mask:url(images/masks/blur_physioex.svg) center / 100%;
}
.blur-comfort{
    filter:blur(3px);
    -webkit-mask:url(images/masks/blur_comfort.svg) center / cover no-repeat;
    mask:url(images/masks/blur_comfort.svg) center / 100%;
}
#blur-right{
    bottom:0;
    right:0;
    filter:blur(3px);
    -webkit-mask:url(images/masks/blur_basic.svg) center / cover no-repeat;
    mask:url(images/masks/blur_basic.svg) center / 100%;
    /*bottom: -38px;*/
}

footer {
    display:none;
    background-color: #010E3D;
    font-family: notosans;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    color:#EBEBEB;
    padding:30px;
    text-align: center;
}
footer p{
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
}
footer p:not(:last-of-type) {
    margin-bottom: 10px;

}
footer a {
    text-decoration: none;
    font-family: notosans;
    color:#ebebeb;
}

.smallscreen-toolbar {
    position: absolute;
    width: 100%;
    display: none;
}

#bigscreen-toolbar {
    position: absolute;
    z-index:4;
    top: -1px;
    width: 100%;
    /*height: 55px;*/
    background-color: #FFF;
    text-transform: uppercase;
    font-family: notosans-bold;
    color:#3C4650;
    display: none;
    grid-template-columns: 40% 1fr 40%;
    grid-template-rows: 1fr;
    box-sizing: border-box;
    padding: 0;
}
#bigscreen-toolbar > div{
    text-align: center;
    padding-top: 12px;
    padding-bottom: 8px;
}
#bigscreen-toolbar > div:not(:last-of-type) {
    border-right:1px solid #EFF0F1;
}
#bigscreen-toolbar > div:first-of-type {
    height: 55px;
}
#bigscreen-toolbar > div:nth-of-type(2) {
    color: #010E3D;
    padding-top:7px;
    font-size: 14px;
}
#bigscreen-toolbar > div:last-of-type {
    padding-top: 12px;
    font-size: 16px;
    text-transform: none;
    font-family: notosans;
    display: flex;
    justify-content: center;
    align-items: center;
}
#bigscreen-toolbar::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 3px 3px 0 0;
    border: 1px solid var(--lightgrey); 
    border-bottom: 0;
    box-sizing: border-box;
    pointer-events: none;
}

.disclaimer {
    font-size: 12px;
    font-family: notosans;
    -webkit-font-smoothing: antialiased;
    color:white;
    background-color: rgba(0,0,0,.3);
    position:absolute;
    bottom:10px;
    left:3px;
    z-index: 4;
    max-width: 80%;
}
.disclaimer-block{
    display: none;
}
.disclaimer-block > div{
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.disclaimer-star{
    display: inline-block;
    width: 20px;
    text-align: right;
    flex: 0 0 20px;
    padding-top: 3px;
}
.toggle-header{
    margin-bottom: 4px;
    text-transform: none;
    font-weight: 400;
    font-family: 'notosans';
}

.pz-toggle button{
    border: 1px solid #9B9898;
    background-color: white;
    outline: none;
    min-width: 70px;
    height: 32px;
    line-height: 32px;
    padding: 0;
    opacity: .8;
    cursor: pointer;
    font-size: 12px;
    text-transform: none;
    border-radius: 16px;
    position: relative;
    transition: all .3s ease;
}
.pz-toggle button #button-label{
    position: absolute;
    top: 0;
    transition: all .3s ease;
    transition-delay: 0.2s;
}
.pz-toggle button.active #button-label{
    left: 36px;
}
.pz-toggle button.inactive #button-label{
    left: 10px;
}
.pz-toggle button.active{
    border: 1px solid var(--darkblue);
    background: var(--darkblue);
    opacity: 1;
    color: #fff;
}
.pz-toggle button.active .progressive-off{
    display: none;
}
.pz-toggle button.active .progressive-on{
    display: inline;
}
.pz-toggle button.inactive .progressive-on{
    display: none;
}
.pz-toggle button.inactive .progressive-off{
    display: inline;
}
.pz-toggle button.inactive{
    background-color: #B6B6B6;
    color: #fff;

}
.pz-toggle button.inactive #progressive-on{
    display: none;
}

.pz-toggle button #button-toggle{
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background-color: #fff;
    margin: 3px 4px;
    position: absolute;
    left: 0;
    top: 0;
    transition: all .3s ease;
}
.pz-toggle button.active #button-toggle{
    left: 0;
}
.pz-toggle button.inactive #button-toggle{
    left: 36px;
}

/****************************************************** DropDown ****************************************************/
.products-list {
    display: none;
}


.products-list li {
    background-color: #FFF;
    cursor: pointer;
    list-style: none;
    position: relative;
    text-align: left;
    min-height: 38px;
}
.products-list li:hover {
    background-color: #EFF0F1;
}
.products-list li img.hover{
    display:none;
}
.products-list li:hover img.nohover{
    display:none;
}
.products-list li:hover img.hover{
    display:inline-block;
}

.products-btn {
    position: relative;
  cursor: pointer;
  list-style: none;
  background: none;
  border:none;
  width: 100%;
  margin-top: 5px;
  height: 30px;
  text-align: left;
  padding-left: 20px;
}
.products-btn > .select-icon {
    border-radius: 20px;
    position: absolute;
    height: 40px;
    width: 40px;
    right: 5px;
    top: 1px;
    box-shadow: 0 0 0 0 rgba(0, 99, 161, 1);
	transform: scale(1);
	animation: pulse-small 2s infinite;
    pointer-events: none;
}
.products-btn > img {
    pointer-events: none;
}
.products-btn[opened='1'] > .select-icon {
    animation: none !important;
}
.products-btn > .select-icon > div{
    background-image: url(images/dropdown_arrow_white.svg);
    background-size: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    transition: transform linear .3s;
}

.products-btn[opened='1'] > .select-icon > div{
    transform: rotate(180deg);
}

.products-btn img {
    vertical-align: middle;
  }
.smallscreen-div .products-btn::after {
    right: 10px;
    top:-4px;
}
.smallscreen-div .products-btn img {
height:38px;
max-width: 10em;
}


.products-list li.tick-selected {
    background-color: #EFF0F1;
}
.tick-selected:after {
    content: url(images/checkmark.svg);
    position: absolute;
    width: 21px;
    right:20px;
}

#bigscreen-toolbar .tick-selected:before {
    left:33px;
}

#bigscreen-toolbar .products-list{
    width: 307px;
    margin: auto;
}

#bigscreen-toolbar .products-list li{
    padding:20px 25px 11px 25px;
    height: 55px;
    box-sizing: border-box;
    border-bottom: 1px solid #EFF0F1;
}
#bigscreen-toolbar .products-list li:last-child{
    padding-bottom: 20px;
    height: 64px;
}
.products-list li img{
    vertical-align: middle;
}
#bigscreen-toolbar .products-btn {
    width: 310px;
    height:100%;
}

.smallscreen-div li img {
    margin-left: 32px;
}

#bigscreen-toolbar .products-btn img.product-logo {
    width:200px;
}

#bigscreen-toolbar .products-btn > .select-icon {
    width:40px;
    height: 40px;
    top:6px;
    margin-left: 10px;
    animation: pulse 2s infinite;
}

#alt-controls .progressive-toggle{
    display: none;
}

/*********************************************************************************************************************/

@media (max-width: 1280px) {
    #product-gallery .content{
        padding: 80px 24px;
    }
    #disclaimers .content{
        padding: 0 24px;
        font-size: 14px;
    }
    .essilor-logo{
        width: 5vw;
        height: 10.6vw;
    }
}

@media (max-width: 1024px) {
    .essilor-logo{
        min-width: 44px;
        width: 73px;
        height: 160px;
    }
}

.mobile-view{
    display: none;
}

#product-disclaimer > .content{
    max-width: 1198px;
    margin: 0 auto;
    padding: 40px 24px;
    font-size: 16px;
    line-height: 24px;
    color: #010E3D;
    font-family: notosans;
    display: none;
}


@media (max-width: 767px) {
    .desktop-view{
        display: none;
    }
    .mobile-view{
        display: block;
    }
    .gallery-item{
        width: 240px;
        min-width: 240px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    #blur-left{
        top: 1.5vw;
    }
    #blur-right{
        bottom: -2.5vw;
        height: calc(100% + 2.5vw);
    }
    #gallery-items{
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
        overflow-x: auto;
        padding-bottom: 10px;
        max-width: 540px;
        margin-left: auto;
        margin-right: auto;
        padding-right: 24px;
    }
    .gallery-logo img{
        width: 200px;
    }
    .smallscreen-toolbar .products-list{
        position: fixed !important;
        width: 90vw;
        left: 5vw;
        border-radius: 10px 10px 0 0;
        top: auto !important;
        transform: none !important;
        bottom: -400px;
        height: auto;
        background: #fff;
        padding: 8px 0 16px 0;
        box-sizing: border-box;
        border: 1px solid #F0f0f0;
        transition: bottom 0.3s ease-in-out;
    }
    .smallscreen-toolbar .products-list-background{
        opacity: 0;
        pointer-events: none;;
        position: fixed;
        transform: none;
        content: '';
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        transition: opacity 0.3s ease-in-out;
        background: rgba(0, 0, 0, 0.25);
    }
    .item-list{
        padding-left: 20px;
        padding-right: 20px;
    }
    .smallscreen-toolbar .products-list p{
        text-align: left;
        text-transform: none;
        font-size: 16px;
        padding-left: 20px;
        font-family: notosans;
        height: 48px;
        line-height: 48px;
    }
    .smallscreen-toolbar .products-list li{
        border-radius: 5px;
        height: 45px;
        padding-top: 8px;

    }
    .smallscreen-toolbar .tick-selected:after{
        content: url(images/check-small.svg);
        margin-top: 4px;
    }
    .close-popup{
        height: 16px;
        text-align: right;
        padding: 0 20px;
    }
    .close-popup img{
        width: 14px;
        height: 14px;
        cursor: pointer;
    }
    .overlay-box{
        padding-bottom: 6px;
    }
    .gallery-logo{
        padding: 0 10px;
    }
    .gallery-text{
        font-size: 18px;
        line-height: 26px;
        padding: 0 10px;
        flex: 1;
        min-height: 82px;
        color: #010E3D;
        margin-bottom: 16px;
    }
    .gallery-button{
        padding: 0 2px;
    }
    .smallscreen-toolbar {
        z-index: 5;
        display: block;
        top: -50px;
    }
    #compare-slider {
        margin-top: 50px;
    }
    #button-box {
        bottom:7px !important;
    }
    #pause-btn {
        width: 20px;
        margin-bottom: 17px !important;
    }
    #play-btn {
        width:35px;
        margin-bottom: 16px !important;
    }
    .scene-btn {
        width:60px;
    }
    .language-selector{
        z-index: 3;
        padding: 0px 25px 0px 8px; 
    }
    #lens-simulator .content{
        text-align: left;
        padding-left: 20px;
        padding-right: 20px;
    }
    #lens-simulator .content > div{
        max-width: 335px;
    }
    #lens-simulator .content img{
        width: 188px;
    }
    #product-gallery{
        background: #EFF0F1;
    }
    #product-gallery .content{
        padding: 40px 0 40px 24px;
    }
    #product-disclaimer > .content{
        display: block;
        font-size: 12px;
        line-height: 16px;
        color: #010E3D;
        padding: 40px 20px;
    }
    #product-disclaimer > .content .disclaimer-block{
        max-width: 310px;
    }
    .disclaimer {
        font-size: 8px;
    }
    .essilor-logo{
        right: 24px;
        max-width: 66px;
        height: 144px;
    }
    .banner-logo{
        right: 25px;
        max-width: 204px;
        width: 40%;
    }
    .varilux-logo{  
        left: 25px;
        top: 35px;
        width: 126px;
    }
    .banner-disclaimer{
        left: 30px;
        bottom: 20px;
    }
    .products-btn{
        height: 50px;
        padding-right: 40px;
        margin-top: 0;
    }
    #sliderhandle{
        top: 42%;
    }
    .products-btn > .select-icon {
        top: 6px;
        right: 12px;
    }
    #disclaimers .content{
        padding: 0 24px;
        font-size: 14px;
    }
    #lens-simulator-text{
        font-size: 24px;
        line-height: 32px;
    }
    #standard2{
        max-width: 140px;
        margin: 0 auto;
        text-transform: none;
        font-size: 16px;
        line-height: 18px;
        font-family: notosans;
    }
    #lens-simulator{
        padding: 40px 0;
    }
    .overlay-box > div{
        max-width: 96%;
        font-size: 12px;
        line-height: 16px;
        padding: 12px 36px 12px 16px;
    }
    #product-gallery-title{
        font-size: 28px;
        line-height: 40px;
        color: #010E3D;
    }
    .tick-selected:after{
        right: 5px;
    }
}
@media (max-width: 767px), (orientation: landscape) and (max-height: 480px)  {
    #compare-slider {
        margin-top: 50px;
        margin-bottom: 100px;
    }
    #alt-controls{
        position:absolute;
        top: auto;
        bottom: -92px;
        width: 100vw;
        height: 92px;
        border-bottom: 1px solid #EFF0F1;
    }
    #alt-controls .progressive-toggle{
        display: block;
        position: absolute;
        left: 24px;
        top: 18px;
    }
    #switch-box{
        top: 8px;
        width: 152px;
        height: 75px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    #switch-box input{
        order: 1;
    }
    #switch-box > div{
        padding-left: 7px;
    }
    #switch-box > div::after{
        content: url('images/chevron-left-blue.svg');
        position: absolute;
        top: 31px;
        padding-left: 5px;
    }
}
@media (max-width: 480px){
    .banner-logo{
        top: 26px;
        right: 25px;
    }
    .buttons{
        display: none;
    }
    .banner-disclaimer{
        display: none;
    }
    .tick-selected:before{
       left: 2vw;
    }
    .smallscreen-div li img{
        max-width: 35vw;
        margin-left: 7vw;
    }
}

@media (max-height: 480px){
    #bigscreen-toolbar{
        display: none !important;
    }
    .smallscreen-toolbar{
        display: block;
    }
}

@media (max-width: 380px) {
    .overlay-box > div{
        font-size: 11px;
        line-height: 14px;
    }
}

body[fullscreen='1'] header, body[fullscreen='1'] footer{
    display: none !important;
}
body[fullscreen='1'] #title-section{
    display: none !important;
}

/* iOS-style scrollbar styling */
#gallery-items::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: transparent;
}

#gallery-items::-webkit-scrollbar-thumb {
    background: rgba(180,180,180,0.5);
    border-radius: 3px;
}

#gallery-items::-webkit-scrollbar-track {
    background: transparent;
}

@media (pointer: coarse) {
    ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }
    ::-webkit-scrollbar-thumb {
        background: rgba(180,180,180,0.3);
    }
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(180,180,180,0.5) transparent;
}

@media (orientation: landscape) and (max-height: 480px){
    /* Portrait and landscape */
    #banner{
        display: none !important;
    }
    #banner-long{
        display: block !important;
        object-fit: cover;
        width: 100vw;
        height: 280px;
    }
    .banner-logo{
        right: 20px !important;
        top: 30px !important;
        width: 186px;
    }
    .varilux-logo{
        left: 20px;
        top: 40px;
        width: 170px;
    }
    .essilor-logo{
        right: 20px;
    }
    .banner-disclaimer{
        left: 30px;
        bottom: 20px;
        width: 150px;
    }
    .buttons{
        display: none;
    }
    #bigscreen-toolbar{
        display: flex !important;
    }
    #bigscreen-toolbar > div{
        width: 50vw;
    }
    .progressive-toggle {
        display: none;
    }
    .smallscreen-toolbar {
        display: none !important;
    }
    .gallery-item{
        width: 302px;
    }
    #gallery-items .gallery-hero img{
        width: 100%;
    }
    .gallery-text{
        max-width: 200px;
    }
    .gallery-button a{
        width: 220px;
    }
    #disclaimers .content, #product-gallery-title{
        padding-left: 20px;
        padding-right: 20px;
    }
}