@charset "utf-8";
/* CSS Document */

/* FIRST SCENE ANIMATIONS */

@-webkit-keyframes bounce-in-fwd {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: scale(0.84);
            transform: scale(0.84);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  89% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-fwd {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: scale(0.84);
            transform: scale(0.84);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  89% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@-webkit-keyframes line{
    to {
        stroke-dashoffset: 0
  }
}
@keyframes line{
    to {
        stroke-dashoffset: 0
    }
  }
@-webkit-keyframes line2{
    to {
    stroke-dashoffset: 0;
  }
}
@keyframes line2{
    to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes colours{
0% {
    opacity: 0;
    -webkit-transform: scale3d(.3,.3,.3);
    transform: scale3d(.3,.3,.3);
}
20% {
    -webkit-transform: scale3d(1.1,1.1,1.1);
    transform: scale3d(1.1,1.1,1.1);
}
40% {
    -webkit-transform: scale3d(.9,.9,.9);
    transform: scale3d(.9,.9,.9);
}
60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03,1.03,1.03);
    transform: scale3d(1.03,1.03,1.03);
}
80% {
    -webkit-transform: scale3d(.97,.97,.97);
    transform: scale3d(.97,.97,.97);
}
100% {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}
}
@keyframes colours{
0% {
    opacity: 0;
    -webkit-transform: scale3d(.3,.3,.3);
    transform: scale3d(.3,.3,.3);
}
20% {
    -webkit-transform: scale3d(1.1,1.1,1.1);
    transform: scale3d(1.1,1.1,1.1);
}
40% {
    -webkit-transform: scale3d(.9,.9,.9);
    transform: scale3d(.9,.9,.9);
}
60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03,1.03,1.03);
    transform: scale3d(1.03,1.03,1.03);
}
80% {
    -webkit-transform: scale3d(.97,.97,.97);
    transform: scale3d(.97,.97,.97);
}
100% {
    opacity: 1;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes summer{

0% {
    opacity: 0;
    -webkit-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
    transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
    -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
    animation-timing-function: cubic-bezier(.55,.055,.675,.19);
}
60% {
    opacity: 1;
    -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
    transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
    -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
    animation-timing-function: cubic-bezier(.175,.885,.32,1);
}
}
@keyframes summer{

0% {
    opacity: 0;
    -webkit-transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
    transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
    -webkit-animation-timing-function: cubic-bezier(.55,.055,.675,.19);
    animation-timing-function: cubic-bezier(.55,.055,.675,.19);
}
60% {
    opacity: 1;
    -webkit-transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
    transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
    -webkit-animation-timing-function: cubic-bezier(.175,.885,.32,1);
    animation-timing-function: cubic-bezier(.175,.885,.32,1);
}
}
@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

/* LAST SCENE ANIMATIONS */

@-webkit-keyframes slide-out-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(250px);
            transform: translateX(250px);
    opacity: 0;
  }
}
@keyframes slide-out-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(250px);
            transform: translateX(250px);
    opacity: 0;
  }
}

@-webkit-keyframes cloud-428 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
}
@keyframes cloud-428 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
}
@-webkit-keyframes cloud-414 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-96.7px);
            transform: translateX(-96.7px);
  }
}
@keyframes cloud-414 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-96.7px);
            transform: translateX(-96.7px);
  }
}
@-webkit-keyframes cloud-393 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-91.8px);
            transform: translateX(-91.8px);
  }
}
@keyframes cloud-393 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-91.8px);
            transform: translateX(-91.8px);
  }
}
@-webkit-keyframes cloud-384 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-89.7px);
            transform: translateX(-89.7px);
  }
}
@keyframes cloud-384 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-89.7px);
            transform: translateX(-89.7px);
  }
}
@-webkit-keyframes cloud-375 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-87.6px);
            transform: translateX(-87.6px);
  }
}
@keyframes cloud-375 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-87.6px);
            transform: translateX(-87.6px);
  }
}
@-webkit-keyframes cloud-360 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-84.1px);
            transform: translateX(-84.1px);
  }
}
@keyframes cloud-360 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-84.1px);
            transform: translateX(-84.1px);
  }
}
@-webkit-keyframes cloud-320 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-74.75px);
            transform: translateX(-74.75px);
  }
}
@keyframes cloud-320 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-74.75px);
            transform: translateX(-74.75px);
  }
}

/* Div layer for the entire container. */

#dc_container {
	position: fixed;
	width: 100%;
	height: 100%;
	margin: auto;
    font-size:0;
	top:0;
	left:0;
	z-index: 999999999999; 
}
#dc_content {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	z-index: 100;
}
#info {
	position:absolute;
	display:block;
	bottom:0.75%;
	z-index: 999;
	left:1.25%;
	width:20px;
	height:20px; touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-callout:none
}
#info img {
	position:inherit;
	width:100%
}


/* Invisible button for background clickthrough. */

#dc_background_exit{
	position: absolute;
	width: 25px;
	height: 25px;
	top: 10px;
	left: 10px;
	z-index: 998;
	cursor: pointer;
	opacity: 0;
}

#dc_bgImage{
	position: absolute;
	bottom: 0px;
	left: 0px;
}

#dc_expand_logo{
	position: absolute;
	left: 5px;
	top: 5px;
}

#dc_btnClose{
	display:block;
	position: absolute;
	width: 25px;
	height: auto;
	top: 1.5%;
	left: 3%;
	z-index: 999;	
	cursor: pointer; touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; touch-callout:none
}

#dc_content img, #dc_content svg{width:100%; height:auto}


/* SCENE 1 */

.scene1_wrap{display:flex; flex-direction:column; align-items:center; position:absolute; width:100%; height:100%; background-image:url("img/slide-428.jpg"); background-size:100% auto; background-repeat:no-repeat; background-position:center; z-index:20}
.mcd_logo{position:absolute; z-index:50; width:63.22px; height:auto; right:21.76px; top:21.68px}
.mcd_logo object{width:100%}
.six_colors{width:285.73px; height:auto; margin-top:16.154vh; z-index:10; filter:drop-shadow(1px 2px 3px rgba(0,0,0,.25))}
.six_colors object{width:100%}
.six_colors svg{overflow:visible}

#six {-webkit-animation: bounce-in-fwd 1s both; animation: bounce-in-fwd 1s both; transform-box:fill-box; transform-origin:50% 50%}
#line_left{-webkit-animation: line .6s both .9s; animation: line .6s both .9s; transform: scalex(-1) rotate(-22deg); transform-box:fill-box; transform-origin:50% 50%; stroke-dashoffset: 150; stroke-dasharray: 150}
#line_right{-webkit-animation: line2 .6s both .9s; animation: line2 .6s both .9s;  transform-box:fill-box; transform-origin:50% 50%; stroke-dashoffset: 150; stroke-dasharray: 150}

#colours{-webkit-animation: colours .75s both 1s; animation: colours .75s both 1s; transform-box:fill-box; transform-origin:50% 50%}
#of_this{-webkit-animation: fade-in .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both 1.5s; animation: fade-in .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both 1.5s ; transform-box:fill-box; transform-origin:50% 50%}
#summer{-webkit-animation: summer .75s both 1.75s; animation: summer .75s both 1.75s; transform-box:fill-box; transform-origin:50% 50%}

.hand{width:101px; height:auto; margin-top:auto; margin-bottom:27.95px; z-index:10; -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 2.5s;
	        animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 2.5s; transform-box:fill-box; transform-origin:50% 50%; filter:drop-shadow(1px 2px 3px rgba(0,0,0,.125))}
.hand svg{overflow:visible}
.swipe{width:253.77px; height:auto; margin-bottom:115.1px;  -webkit-animation: fade-in .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both 3s; animation: fade-in .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both 3s; transform-box:fill-box; transform-origin:50% 50%}

/* GLASSES */

.glasses_wrap{position:absolute; display:flex;  flex-direction:column; width:100%; height:700%; top:100%; z-index:30}


.glasses_wrap_appear{top:0%; transition:.5s; transition-timing-function:ease-in-out}
.glass2{top:-100%; transition:.5s; transition-timing-function:ease-in-out}
.glass3{top:-200%; transition:.5s; transition-timing-function:ease-in-out}
.glass4{top:-300%; transition:.5s; transition-timing-function:ease-in-out}
.glass5{top:-400%; transition:.5s; transition-timing-function:ease-in-out}
.glass6{top:-500%; transition:.5s; transition-timing-function:ease-in-out}
.glass_final_appear{top:-600%; transition:.5s; transition-timing-function:ease-in-out}


.glass1_wrap{display:flex; align-items:flex-end; justify-content:center; width:100%; height:100%; background-image:url("img/slide1-428.jpg"); background-size:100% auto; background-repeat:no-repeat; background-position:center}
.glass2_wrap{display:flex; align-items:flex-end; justify-content:center; width:100%; height:100%; background-image:url("img/slide2-428.jpg"); background-size:100% auto; background-repeat:no-repeat; background-position:center}
.glass3_wrap{display:flex; align-items:flex-end; justify-content:center; width:100%; height:100%; background-image:url("img/slide3-428.jpg"); background-size:100% auto; background-repeat:no-repeat; background-position:center}
.glass4_wrap{display:flex; align-items:flex-end; justify-content:center; width:100%; height:100%; background-image:url("img/slide4-428.jpg"); background-size:100% auto; background-repeat:no-repeat; background-position:center}
.glass5_wrap{display:flex; align-items:flex-end; justify-content:center; width:100%; height:100%; background-image:url("img/slide5-428.jpg"); background-size:100% auto; background-repeat:no-repeat; background-position:center}
.glass6_wrap{display:flex; align-items:flex-end; justify-content:center; width:100%; height:100%; background-image:url("img/slide6-428.jpg"); background-size:100% auto; background-repeat:no-repeat; background-position:center}


.glass1_img{width:266px; height:auto}
.glass2_img{width:261.5px; height:auto}
.glass3_img{width:263.5px; height:auto}
.glass4_img{width:262px; height:auto}
.glass5_img{width:262px; height:auto}
.glass6_img{width:262px; height:auto}


.glass_selector_wrap{position:fixed; display:inline-flex; align-items:flex-end; z-index:40; opacity:0; pointer-events:none; transition:.5s; height:100vh; left:21.6px; bottom:61.75px}
.glass_selector_enable{opacity:1; pointer-events:auto; transition:1s}
.glass_selector{width:37.28px; height:auto; filter:drop-shadow(-1px 2px 3px rgba(0,0,0,.25))}
.circle-fill{fill:#da1f26}

/* GLASS FINAL */

.glass_final{position:relative; display:flex; flex-direction:column; justify-content:space-between; align-items:center; width:100%; height:100%; background-image:url("img/slidefinal-428.jpg"); background-size:100% auto; background-repeat:no-repeat; background-position:center}

.exit_link{position:absolute; z-index:100; width:100%; height:100%; pointer-events:none}   
.exit_link_enable{pointer-events:unset}

.coca_cola_wrap{width:210.2px; margin-bottom:3%; z-index:40; display:none}


.six_colors_final{width:268.7px; margin-top:73.74px; z-index:40; display:none}
.six_colors_final object{width:100%}
.six_colors_final svg{overflow:visible}


#six-colors-final-six_final {-webkit-animation: bounce-in-fwd 1s both; animation: bounce-in-fwd 1s both; transform-box:fill-box; transform-origin:50% 50%}
#six-colors-final-line_left_final{-webkit-animation: line .6s both .9s; animation: line .6s both .9s;  transform-box:fill-box; transform: scalex(-1) rotate(-22deg); transform-origin:50% 50%; stroke-dashoffset: 150; stroke-dasharray: 150}
#six-colors-final-line_right_final{-webkit-animation: line2 .6s both .9s; animation: line2 .6s both .9s;  transform-box:fill-box; transform-origin:50% 50%; stroke-dashoffset: 150; stroke-dasharray: 150}
#six-colors-final-colours_final{-webkit-animation: colours .75s both 1s; animation: colours .75s both 1s; transform-box:fill-box; transform-origin:50% 50%}
#six-colors-final-of_this_final{-webkit-animation: fade-in .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both 1.5s; animation: fade-in .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both 1.5s ; transform-box:fill-box; transform-origin:50% 50%}
#six-colors-final-summer_final{-webkit-animation: summer .75s both 1.75s; animation: summer .75s both 1.75s; transform-box:fill-box; transform-origin:50% 50%}

.clouds_start{position:absolute; width:656.5px; top:9.1vh; left:0; z-index:10; -webkit-animation: cloud-428 20s linear both; animation: cloud-428 20s linear both}
.clouds{position:absolute; width:656.5px; top:14px;  left:0; z-index:30}

.slide-out-right{-webkit-animation: slide-out-right 0.4s cubic-bezier(0.550, 0.085, 0.680, 0.530) both .6s; animation: slide-out-right 0.4s cubic-bezier(0.550, 0.085, 0.680, 0.530) both .6s}

.cloud-ani {-webkit-animation: cloud-428 20s linear both; animation: cloud-428 20s linear both}

.appear{display:unset}





/* Big Phone (tall screen) */
@media screen and (max-device-width:414px) and (-webkit-min-device-pixel-ratio:1.5) {
    
    
/* SCENE 1 */

.scene1_wrap{background-image:url("img/slide-414-tall.jpg"); background-size:100% 100%}    
.mcd_logo{width:61.15px; right:21.05px; top:2.842%}
        
.six_colors{width:276.38px; margin-top:14.154vh}

.hand{width:97.7px; margin-bottom:3.627vh}

.swipe{width:245.46px; margin-bottom:13.125vh}    
    
 /* GLASSES */   
  
.glass1_wrap{background-image:url("img/slide1-414-tall.jpg"); background-size:100% 100%}
.glass2_wrap{background-image:url("img/slide2-414-tall.jpg"); background-size:100% 100%}
.glass3_wrap{background-image:url("img/slide3-414-tall.jpg"); background-size:100% 100%}
.glass4_wrap{background-image:url("img/slide4-414-tall.jpg"); background-size:100% 100%}
.glass5_wrap{background-image:url("img/slide5-414-tall.jpg"); background-size:100% 100%}
.glass6_wrap{background-image:url("img/slide6-414-tall.jpg"); background-size:100% 100%}

   
.glass_selector_wrap{left:20.9px; bottom:10.818vh}
    
/* GLASS FINAL */
    
.glass_final{background-image:url("img/slidefinal-414-tall.jpg"); background-size:100% 100%}    
 
    
.coca_cola_wrap{width:203.3px; margin-bottom:7.5%}
.six_colors_final{width:259.9px;  margin-top:12.511vh}   
 
    
.clouds_start{width:635px; top:7.1vh; -webkit-animation: cloud-414 20s linear both; animation: cloud-414 20s linear both}    
.clouds{width:635px; top:4.372vh}

.cloud-ani {-webkit-animation: cloud-414 20s linear both; animation: cloud-414 20s linear both}
   
}

/* Big Phone (normal screen) */
@media  screen and (max-device-width:414px) and (max-height:725px) and (-webkit-min-device-pixel-ratio:1.5) {
    
/* SCENE 1 */  
   
.scene1_wrap{background-image:url("img/slide-414-normal.jpg"); background-size:100% auto}    
        
.six_colors{margin-top:13.352vh}

.hand{margin-bottom:3.334vh}

.swipe{margin-bottom:12.406vh}       
    
 /* GLASSES */   
  
.glass1_wrap{background-image:url("img/slide1-414-normal.jpg"); background-size:100% auto}
.glass2_wrap{background-image:url("img/slide2-414-normal.jpg"); background-size:100% auto}
.glass3_wrap{background-image:url("img/slide3-414-normal.jpg"); background-size:100% auto}
.glass4_wrap{background-image:url("img/slide4-414-normal.jpg"); background-size:100% auto}
.glass5_wrap{background-image:url("img/slide5-414-normal.jpg"); background-size:100% auto}
.glass6_wrap{background-image:url("img/slide6-414-normal.jpg"); background-size:100% auto}    
    
.glass1_img{width:257.3px}
.glass2_img{width:252.9px}
.glass3_img{width:254.9px}
.glass4_img{width:253.4px}
.glass5_img{width:253.4px}
.glass6_img{width:253.4px}      
    
    
.glass_selector_wrap{bottom:7.067vh}   
.glass_selector{width:36px}
    
/* GLASS FINAL */    
 
.glass_final{background-image:url("img/slidefinal-414-normal.jpg"); background-size:100% auto}        
 
.coca_cola_wrap{margin-bottom:3.5%}
.six_colors_final{margin-top:9.083vh}       
 
.clouds_start{top:6vh}    
.clouds{top:1.6vh}    
 

@media not all and (min-resolution:.001dpcm) { 
    @media {
		.coca_cola_wrap{margin-bottom:3%}
        }
    }
       
    
}

/* Big Phone (short screen) */
@media  screen and (max-device-width:414px) and (max-height:622px) and (-webkit-min-device-pixel-ratio:1.5) {
 
/* SCENE 1 */  	
	
.scene1_wrap{background-image:url("img/slide-414-short.jpg");}    
    
.mcd_logo{width:55.4px; right:19px; top:2.842%}   
	
.six_colors{width:250.23px; margin-top:15.563vh}   	
	
.hand{width:88.43px; margin-bottom:2.86vh}
	
.swipe{width:222.24px; margin-bottom:9.321vh}	
	
	
/* GLASSES */   
  
.glass1_wrap{background-image:url("img/slide1-414-short.jpg")}
.glass2_wrap{background-image:url("img/slide2-414-short.jpg")}
.glass3_wrap{background-image:url("img/slide3-414-short.jpg")}
.glass4_wrap{background-image:url("img/slide4-414-short.jpg")}
.glass5_wrap{background-image:url("img/slide5-414-short.jpg")}
.glass6_wrap{background-image:url("img/slide6-414-short.jpg")}        
 
.glass1_img{width:225.75px}
.glass2_img{width:221.9px}
.glass3_img{width:223.6px}
.glass4_img{width:222.4px}
.glass5_img{width:222.4px}
.glass6_img{width:222.4px}     	
	
.glass_selector_wrap{left:18.88px; bottom:6.062vh}   
.glass_selector{width:32.58px}	
	
/* GLASS FINAL */      
    
.glass_final{background-image:url("img/slidefinal-414-short.jpg")}     
 
.coca_cola_wrap{width:184px; margin-bottom:1.5%}
	
.six_colors_final{width:235.25px; margin-top:7.955vh} 	

.clouds_start{width:635px; top:6.2vh}    
.clouds{width:635px; top:-1.25vh}    	
	

@media not all and (min-resolution:.001dpcm) { 
    @media {
		.coca_cola_wrap{margin-bottom:3.75%}
        .clouds_start{top:6.7vh}
        }
    }    	
	
	
	
}


/* Medium++ Phone (tall screen) */
@media  screen and (max-device-width:393px) and (-webkit-min-device-pixel-ratio:1.5) {
    
    
/* SCENE 1 */    
    
.scene1_wrap{background-image:url("img/slide-393-tall.jpg"); background-size:100% auto}   
    
.mcd_logo{width:58.03px; right:19.97px; top:2.842%}
        
.six_colors{width:262.28px; margin-top:14.154vh}

.hand{width:92.7px; margin-bottom:3.627vh}

.swipe{width:232.94px; margin-bottom:13.125vh}      
    
/* GLASSES */
    
.glass1_wrap{background-image:url("img/slide1-393-tall.jpg"); background-size:100% auto}
.glass2_wrap{background-image:url("img/slide2-393-tall.jpg"); background-size:100% auto}
.glass3_wrap{background-image:url("img/slide3-393-tall.jpg"); background-size:100% auto}
.glass4_wrap{background-image:url("img/slide4-393-tall.jpg"); background-size:100% auto}
.glass5_wrap{background-image:url("img/slide5-393-tall.jpg"); background-size:100% auto}
.glass6_wrap{background-image:url("img/slide6-393-tall.jpg"); background-size:100% auto}


.glass1_img{width:252.4px}
.glass2_img{width:248.1px}
.glass3_img{width:250px}
.glass4_img{width:248.6px}
.glass5_img{width:248.6px}
.glass6_img{width:248.6px}    
    
.glass_selector_wrap{left:19.8px; bottom:10.818vh}   
.glass_selector{width:34.16px}   
    
    
/* GLASS FINAL */      
    
.glass_final{background-image:url("img/slidefinal-393-tall.jpg"); background-size:100% auto}        
 
.coca_cola_wrap{width:192.9px; margin-bottom:6.5%}
.six_colors_final{width:246.6px; margin-top:11.622vh}       
    
.clouds_start{width:602.6px; top:7.2vh; -webkit-animation: cloud-393 20s linear both; animation: cloud-393 20s linear both}    
.clouds{width:602.6px; top:4.061vh}    
.cloud-ani {-webkit-animation: cloud-393 20s linear both; animation: cloud-393 20s linear both}

@media not all and (min-resolution:.001dpcm) { 
    @media {
		.coca_cola_wrap{margin-bottom:3%}
        }
    }
       
    
  
    
    
}

/* Medium++ Phone (normal screen) */
@media  screen and (max-device-width:393px) and (max-height:680px) and (-webkit-min-device-pixel-ratio:1.5) {
	
/* SCENE 1 */    
    
.scene1_wrap{background-image:url("img/slide-393-normal.jpg"); background-size:100% auto}    
    
.mcd_logo{width:53px; right:18.23px; top:2.842%}
        
.six_colors{width:239.55px; margin-top:14.154vh}

.hand{width:84.66px; margin-bottom:3.312vh}

.swipe{width:212.75px; margin-bottom:11.987vh}  
	
	
/* GLASSES */
    
.glass1_wrap{background-image:url("img/slide1-393-normal.jpg"); background-size:100% auto}
.glass2_wrap{background-image:url("img/slide2-393-normal.jpg"); background-size:100% auto}
.glass3_wrap{background-image:url("img/slide3-393-normal.jpg"); background-size:100% auto}
.glass4_wrap{background-image:url("img/slide4-393-normal.jpg"); background-size:100% auto}
.glass5_wrap{background-image:url("img/slide5-393-normal.jpg"); background-size:100% auto}
.glass6_wrap{background-image:url("img/slide6-393-normal.jpg"); background-size:100% auto}	

.glass1_img{width:230.5px}
.glass2_img{width:226.6px}
.glass3_img{width:228.3px}
.glass4_img{width:227px}
.glass5_img{width:227px}
.glass6_img{width:227px}  	
	
.glass_selector_wrap{left:18.1px; bottom:9.88vh}   
.glass_selector{width:31.2px} 	
	
/* GLASS FINAL */      
    
.glass_final{background-image:url("img/slidefinal-393-normal.jpg"); background-size:100% auto}        	
	

.coca_cola_wrap{width:176.2px; margin-bottom:4%}
.six_colors_final{width:225.2px; margin-top:10.614vh}       
 
.clouds_start{width:602.6px; top:6.6vh}    
.clouds{width:602.6px; top:3.053vh}    

@media not all and (min-resolution:.001dpcm) { 
    @media {
		.coca_cola_wrap{margin-bottom:3%}
        .clouds_start{top:6.9vh}
        }
    }	
	
	
}

/* Medium++ Phone (short screen) */
@media  screen and (max-device-width:393px) and (max-height:660px) and (-webkit-min-device-pixel-ratio:1.5) {
	
/* SCENE 1 */    

.scene1_wrap{background-image:url("img/slide-393-short.jpg"); background-size:100% auto}      
    
.mcd_logo{width:52.5px; right:18px; top:2.842%}
        
.six_colors{width:237.38px; margin-top:14.283vh}

.hand{width:83.9px; margin-bottom:3.282vh}

.swipe{width:210.82px; margin-bottom:11.878vh}  	
	
/* GLASSES */
    
.glass1_wrap{background-image:url("img/slide1-393-short.jpg"); background-size:100% auto}
.glass2_wrap{background-image:url("img/slide2-393-short.jpg"); background-size:100% auto}
.glass3_wrap{background-image:url("img/slide3-393-short.jpg"); background-size:100% auto}
.glass4_wrap{background-image:url("img/slide4-393-short.jpg"); background-size:100% auto}
.glass5_wrap{background-image:url("img/slide5-393-short.jpg"); background-size:100% auto}
.glass6_wrap{background-image:url("img/slide6-393-short.jpg"); background-size:100% auto}		
	
.glass1_img{width:228.4px}
.glass2_img{width:224.5px}
.glass3_img{width:226.2px}
.glass4_img{width:224.9px}
.glass5_img{width:224.9px}
.glass6_img{width:224.9px}  		

.glass_selector_wrap{left:18.1px; bottom:9.79vh}   
.glass_selector{width:31.2px}	
	
/* GLASS FINAL */      
    
.glass_final{background-image:url("img/slidefinal-393-short.jpg"); background-size:100% auto}  	
	
	
.coca_cola_wrap{width:176.2px; margin-bottom:2.25%}
.six_colors_final{width:225.2px;  margin-top:10.614vh}       
    
.clouds_start{width:602.6px; top:6.2vh}    
.clouds{width:602.6px; top:2.2vh}    
	
}





/* Medium+ Phone */
@media  screen and (max-device-width:384px) and (-webkit-min-device-pixel-ratio:1.5) {
    
    
/* SCENE 1 */    
    
.scene1_wrap{background-image:url("img/slide-384.jpg"); background-size:100% auto}      
    
.mcd_logo{width:56.7px; right:19.51px; top:2.842%}
        
.six_colors{width:256.24px; margin-top:14.154vh}

.hand{width:90.56px; margin-bottom:3.627vh}

.swipe{width:227.58px; margin-bottom:13.125vh}      
    
/* GLASSES */
    
.glass1_wrap{background-image:url("img/slide1-384.jpg"); background-size:100% auto}
.glass2_wrap{background-image:url("img/slide2-384.jpg"); background-size:100% auto}
.glass3_wrap{background-image:url("img/slide3-384.jpg"); background-size:100% auto}
.glass4_wrap{background-image:url("img/slide4-384.jpg"); background-size:100% auto}
.glass5_wrap{background-image:url("img/slide5-384.jpg"); background-size:100% auto}
.glass6_wrap{background-image:url("img/slide6-384.jpg"); background-size:100% auto}    
    
.glass1_img{width:246.6px}
.glass2_img{width:242.4px}
.glass3_img{width:244.25px}
.glass4_img{width:242.9px}
.glass5_img{width:242.9px}
.glass6_img{width:242.9px}     
    
.glass_selector_wrap{left:19.34px; bottom:10.818vh}   
.glass_selector{width:33.37px}       
 
/* GLASS FINAL */    

.glass_final{background-image:url("img/slidefinal-384.jpg"); background-size:100% auto}        
  
.coca_cola_wrap{width:188.5px; margin-bottom:7.5%}
.six_colors_final{width:240.9px; margin-top:12.511vh}      
    
.clouds_start{width:588.74px; top:7.4vh; -webkit-animation: cloud-384 20s linear both; animation: cloud-384 20s linear both}    
.clouds{width:588.74px; top:4.372vh}      
.cloud-ani {-webkit-animation: cloud-384 20s linear both; animation: cloud-384 20s linear both}    
      
}





/* Medium Phone (tall screen) */
@media  screen and (max-device-width:375px) and (-webkit-min-device-pixel-ratio:1.5) {
    
    
/* SCENE 1 */      
    
.scene1_wrap{background-image:url("img/slide-375-tall.jpg"); background-size:100% auto}      
    
.mcd_logo{width:55.4px; right:19px; top:2.842%}    
    
.six_colors{width:250.23px; margin-top:13.352vh}    
    
.hand{width:88.43px; margin-bottom:3.334vh}   
    
.swipe{width:222.24px; margin-bottom:10.865vh}   
    
/* GLASSES */
    
.glass1_wrap{background-image:url("img/slide1-375-tall.jpg"); background-size:100% auto}
.glass2_wrap{background-image:url("img/slide2-375-tall.jpg"); background-size:100% auto}
.glass3_wrap{background-image:url("img/slide3-375-tall.jpg"); background-size:100% auto}
.glass4_wrap{background-image:url("img/slide4-375-tall.jpg"); background-size:100% auto}
.glass5_wrap{background-image:url("img/slide5-375-tall.jpg"); background-size:100% auto}
.glass6_wrap{background-image:url("img/slide6-375-tall.jpg"); background-size:100% auto}      
    
.glass1_img{width:225.75px}
.glass2_img{width:221.9px}
.glass3_img{width:223.6px}
.glass4_img{width:222.4px}
.glass5_img{width:222.4px}
.glass6_img{width:222.4px}     
    
.glass_selector_wrap{left:18.88px; bottom:7.067vh}   
.glass_selector{width:32.58px}     
    
/* GLASS FINAL */    

.glass_final{background-image:url("img/slidefinal-375-tall.jpg"); background-size:100% auto}        
  
.coca_cola_wrap{width:184px; margin-bottom:3%}
.six_colors_final{width:235.25px; margin-top:7.955vh}      
    
.clouds_start{width:574.94px; top:6.4vh; -webkit-animation: cloud-375 20s linear both; animation: cloud-375 20s linear both}    
.clouds{width:574.94px; top:1vh}      
.cloud-ani {-webkit-animation: cloud-375 20s linear both; animation: cloud-375 20s linear both}       
    
@media not all and (min-resolution:.001dpcm) { 
    @media {
		.coca_cola_wrap{margin-bottom:1.5%}
        }
    }    
    
}

/* Medium Phone (short screen) */
@media  screen and (max-device-width:375px) and (max-height:628px) and (-webkit-min-device-pixel-ratio:1.5) {
	
	
/* SCENE 1 */      
    
.scene1_wrap{background-image:url("img/slide-375-short.jpg"); background-size:100% auto}      
    
.mcd_logo{width:48.7px; right:16.7px; top:2.842%}    
    
.six_colors{width:220px; margin-top:15.186vh}    
    
.hand{width:77.74px; margin-bottom:2.931vh}   
    
.swipe{width:195.38px; margin-bottom:9.552vh}   	
	
	
	
/* GLASSES */
    
.glass1_wrap{background-image:url("img/slide1-375-short.jpg"); background-size:100% auto}
.glass2_wrap{background-image:url("img/slide2-375-short.jpg"); background-size:100% auto}
.glass3_wrap{background-image:url("img/slide3-375-short.jpg"); background-size:100% auto}
.glass4_wrap{background-image:url("img/slide4-375-short.jpg"); background-size:100% auto}
.glass5_wrap{background-image:url("img/slide5-375-short.jpg"); background-size:100% auto}
.glass6_wrap{background-image:url("img/slide6-375-short.jpg"); background-size:100% auto}   	
	
.glass1_img{width:198.5px}
.glass2_img{width:195.1px}
.glass3_img{width:196.6px}
.glass4_img{width:195.5px}
.glass5_img{width:195.5px}
.glass6_img{width:195.5px}     
    
.glass_selector_wrap{left:16.6px; bottom:6.213vh}   
.glass_selector{width:28.64px}     	
	
	
/* GLASS FINAL */    

.glass_final{background-image:url("img/slidefinal-375-short.jpg"); background-size:100% auto}  	
	
	
.coca_cola_wrap{width:161.8px; margin-bottom:4%}
.six_colors_final{width:206.82px; margin-top:6.993vh}      
    
.clouds_start{width:574.94px; top:6.4vh}    
.clouds{width:574.94px; top:-2vh}      
    
@media not all and (min-resolution:.001dpcm) { 
    @media {
		.coca_cola_wrap{margin-bottom:3%}
        }
    }    
   	
}



/* Small Phone */
@media screen and (max-device-width:360px) and (-webkit-min-device-pixel-ratio:1.5) {
    
    
/* SCENE 1 */      
    
.scene1_wrap{background-image:url("img/slide-360-tall.jpg"); background-size:100% auto}      
    
.mcd_logo{width:53.2px; right:18.24px; top:2.842%}    
    
.six_colors{width:240.22px; margin-top:14.154vh}    
    
.hand{width:84.9px; margin-bottom:3.627vh}   
    
.swipe{width:213.35px; margin-bottom:13.125vh}         
    
/* GLASSES */
    
.glass1_wrap{background-image:url("img/slide1-360-tall.jpg"); background-size:100% auto}
.glass2_wrap{background-image:url("img/slide2-360-tall.jpg"); background-size:100% auto}
.glass3_wrap{background-image:url("img/slide3-360-tall.jpg"); background-size:100% auto}
.glass4_wrap{background-image:url("img/slide4-360-tall.jpg"); background-size:100% auto}
.glass5_wrap{background-image:url("img/slide5-360-tall.jpg"); background-size:100% auto}
.glass6_wrap{background-image:url("img/slide6-360-tall.jpg"); background-size:100% auto}      
    
.glass1_img{width:231px}
.glass2_img{width:227.1px} 
.glass3_img{width:228.86px} 
.glass4_img{width:227.5px} 
.glass5_img{width:227.5px} 
.glass6_img{width:227.5px}     
    
.glass_selector_wrap{left:18.12px; bottom:10.818vh}   
.glass_selector{width:31.27px}    
    
/* GLASS FINAL */    

.glass_final{background-image:url("img/slidefinal-360-tall.jpg"); background-size:100% auto}        
  
.coca_cola_wrap{width:176.6px; margin-bottom:6.5%}
.six_colors_final{width:225.84px; margin-top:11.622vh}      
    
.clouds_start{width:551.94px; top:7.2vh; -webkit-animation: cloud-360 20s linear both; animation: cloud-360 20s linear both}    
.clouds{width:551.94px; top:4.061vh}      
.cloud-ani {-webkit-animation: cloud-360 20s linear both; animation: cloud-360 20s linear both}       
    
@media not all and (min-resolution:.001dpcm) { 
    @media {
		.coca_cola_wrap{margin-bottom:3%}
        }
    }       
    
}

/* Small Phone (normal screen) */
@media screen and (max-device-width:360px) and (max-height:620px) and (-webkit-min-device-pixel-ratio:1.5) {
	
	
	
/* SCENE 1 */      
   
.scene1_wrap{background-image:url("img/slide-360-normal.jpg"); background-size:100% auto}  
    
.mcd_logo{width:53.2px; right:18.24px; top:2.842%}    
    
.six_colors{width:240.22px; margin-top:15.495vh}    
    
.hand{width:84.9px; margin-bottom:3.313vh}   
    
.swipe{width:213.35px; margin-bottom:11.988vh}   	
	
	
	
/* GLASSES */
    
.glass1_wrap{background-image:url("img/slide1-360-normal.jpg"); background-size:100% auto}
.glass2_wrap{background-image:url("img/slide2-360-normal.jpg"); background-size:100% auto}
.glass3_wrap{background-image:url("img/slide3-360-normal.jpg"); background-size:100% auto}
.glass4_wrap{background-image:url("img/slide4-360-normal.jpg"); background-size:100% auto}
.glass5_wrap{background-image:url("img/slide5-360-normal.jpg"); background-size:100% auto}
.glass6_wrap{background-image:url("img/slide6-360-normal.jpg"); background-size:100% auto}    	
	
	

.glass1_img{width:219px}
.glass2_img{width:215.3px} 
.glass3_img{width:216.9px} 
.glass4_img{width:215.6px} 
.glass5_img{width:215.6px} 
.glass6_img{width:215.6px}  	
	
.glass_selector_wrap{left:17.17px; bottom:10.25vh}   
.glass_selector{width:29.64px;}    
	

/* GLASS FINAL */    

.glass_final{background-image:url("img/slidefinal-360-normal.jpg"); background-size:100% auto}        
  
.coca_cola_wrap{width:176.6px; margin-bottom:2%}
.six_colors_final{width:225.84px; margin-top:9vh}      
    
.clouds_start{width:551.94px; top:8vh}    
.clouds{width:551.94px; top:1.439vh}      
     
    
@media not all and (min-resolution:.001dpcm) { 
    @media {
		.coca_cola_wrap{margin-bottom:3%}
        }
    }       
    
}
	
	
	
	
/* Small Phone (short screen) */
@media screen and (max-device-width:360px) and (max-height:600px) and (-webkit-min-device-pixel-ratio:1.5) {
	
	
	
/* SCENE 1 */      
    
.scene1_wrap{background-image:url("img/slide-360-short.jpg"); background-size:100% auto}   
    
.six_colors{width:240.22px; margin-top:15.495vh; margin-top:15.857vh}    
    
.hand{width:84.9px; margin-bottom:3.313vh; margin-bottom:3.237vh}   
    
.swipe{width:213.35px; margin-bottom:11.988vh; margin-bottom:11.713vh}   	
	
	
/* GLASSES */
    
.glass1_wrap{background-image:url("img/slide1-360-short.jpg"); background-size:100% auto}
.glass2_wrap{background-image:url("img/slide2-360-short.jpg"); background-size:100% auto}
.glass3_wrap{background-image:url("img/slide3-360-short.jpg"); background-size:100% auto}
.glass4_wrap{background-image:url("img/slide4-360-short.jpg"); background-size:100% auto}
.glass5_wrap{background-image:url("img/slide5-360-short.jpg"); background-size:100% auto}
.glass6_wrap{background-image:url("img/slide6-360-short.jpg"); background-size:100% auto}  	
	
	
	
.glass1_img{width:214px}
.glass2_img{width:210.4px} 
.glass3_img{width:211.9px} 
.glass4_img{width:210.7px} 
.glass5_img{width:210.7px} 
.glass6_img{width:210.7px}  	
	
	
.glass_selector_wrap{left:16.77px; bottom:10.01vh}   
.glass_selector{width:28.96px}    	
	
/* GLASS FINAL */    

.glass_final{background-image:url("img/slidefinal-360-short.jpg"); background-size:100% auto}   	

	
.coca_cola_wrap{width:176.6px; margin-bottom:1%}
.six_colors_final{width:225.84px; margin-top:9.21vh}      
    
.clouds_start{width:551.94px; top:7.6vh}   
.clouds{width:551.94px; top:1.649vh}      
	
	
}


/* Very Small Phone */
@media screen and (max-device-width:320px) and (-webkit-min-device-pixel-ratio:1.5) {
    
/* SCENE 1 */      
    
.scene1_wrap{background-image:url("img/slide-320.jpg"); background-size:100% auto}      
    
.mcd_logo{width:47.28px; right:16.21px; top:2.842%}    
    
.six_colors{width:213.52px; margin-top:16.154vh}    
    
.hand{width:75.46px; margin-bottom:3.334vh}   
    
.swipe{width:189.64px; margin-bottom:12.406vh}  

/* GLASSES */

.glass1_wrap{background-image:url("img/slide1-320.jpg"); background-size:100% auto}
.glass2_wrap{background-image:url("img/slide2-320.jpg"); background-size:100% auto}
.glass3_wrap{background-image:url("img/slide3-320.jpg"); background-size:100% auto}
.glass4_wrap{background-image:url("img/slide4-320.jpg"); background-size:100% auto}
.glass5_wrap{background-image:url("img/slide5-320.jpg"); background-size:100% auto}
.glass6_wrap{background-image:url("img/slide6-320.jpg"); background-size:100% auto}  

.glass1_img{width:205.3px}
.glass2_img{width:201.8px} 
.glass3_img{width:203.4px} 
.glass4_img{width:202.2px} 
.glass5_img{width:202.2px} 
.glass6_img{width:202.2px}  

.glass_selector_wrap{left:16.1px; bottom:10.818vh}   
.glass_selector{width:27.8px}  
	
/* GLASS FINAL */    

.glass_final{background-image:url("img/slidefinal-320.jpg"); background-size:100% auto}    
	
.coca_cola_wrap{width:157px; margin-bottom:1.5%}
.six_colors_final{width:200.74px; margin-top:9.083vh}      
    
.clouds_start{width:490.61px; top:7.6vh; -webkit-animation: cloud-320 20s linear both; animation: cloud-320 20s linear both}    
.clouds{width:490.61px; top:1.6vh}      
.cloud-ani {-webkit-animation: cloud-320 20s linear both; animation: cloud-320 20s linear both}       
    	
	

}

/* Very Small Phone (short screen) */
@media screen and (max-device-width:320px) and (max-height:460px) and (-webkit-min-device-pixel-ratio:1.5) {
    
/* SCENE 1 */      
    
.scene1_wrap{background-image:url("img/slide-320.jpg"); background-size:100% auto}      
    
.mcd_logo{width:42.55px; right:14.58px; top:2.842%}    
    
.six_colors{width:192.17px; margin-top:15vh}    
    
.hand{width:67.92px; margin-bottom:3.264vh}   
    
.swipe{width:170.67px; margin-bottom:6vh}         
    
/* GLASSES */
    
.glass1_wrap{background-image:url("img/slide1-320.jpg"); background-size:100% auto}
.glass2_wrap{background-image:url("img/slide2-320.jpg"); background-size:100% auto}
.glass3_wrap{background-image:url("img/slide3-320.jpg"); background-size:100% auto}
.glass4_wrap{background-image:url("img/slide4-320.jpg"); background-size:100% auto}
.glass5_wrap{background-image:url("img/slide5-320.jpg"); background-size:100% auto}
.glass6_wrap{background-image:url("img/slide6-320.jpg"); background-size:100% auto}      
    
.glass1_img{width:164.3px}
.glass2_img{width:161.4px} 
.glass3_img{width:162.7px} 
.glass4_img{width:161.7px} 
.glass5_img{width:161.7px} 
.glass6_img{width:161.7px}     
    
.glass_selector_wrap{left:14.5px; bottom:7.067vh}    
.glass_selector{width:22.23px}    
    
/* GLASS FINAL */    

.glass_final{background-image:url("img/slidefinal-320.jpg"); background-size:100% auto}        
  
.coca_cola_wrap{width:141.28px; margin-bottom:1.5%}
.six_colors_final{width:180.67px; margin-top:5.5vh}      
    
.clouds_start{width:490.61px; top:6.4vh}    
.clouds{width:490.61px; top:-4.75vh}      
    
@media not all and (min-resolution:.001dpcm) { 
    @media {
		.coca_cola_wrap{margin-bottom:1.25%}
        }
    }       
     
}