* {
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html {
    height: -webkit-fill-available;
}
body {
    -webkit-font-smoothing: antialiased;
    overflow: hidden;/*
    overflow-y: hidden;*/
    font-family: 'Arial';
    height: 100vh;
    min-height: -webkit-fill-available;
    background-color: #cbe1f2;/*fab8ba
    background: -webkit-linear-gradient(#fab8ba,#cbe1f2);
    background: -o-linear-gradient(#fab8ba,#cbe1f2);
    background: -moz-linear-gradient(#fab8ba,#cbe1f2);
    background: linear-gradient(#fab8ba,#cbe1f2);*/
}
#loader {
    position: fixed;
    left: 40%;
    top: 45%;
    z-index: 111;
    width: 125px;
    height: 170px;
    margin: -75px 0 0 -75px;
    background-image: url('../images/hotairballoon.svg');
    background-size:  125px 170px;
    animation: fly 7s infinite;
}
    @keyframes fly{
    0%{ left: 40%; transform: rotate(0deg); }
    15%{ transform: rotate(2deg)}
    35%{ transform: rotate(4deg)}
    55%{ transform: rotate(2deg)}
    75%{ left: 60%; opacity: 1; transform: rotate(3deg)}
    90%{ opacity: 0; left: 60%; transform: rotate(0deg)} 
    100%{ opacity: 0; left: 40%;} 
}
#loading {
	position: absolute;
	width: 170px;
	height: 20px;
    left: 45%;
	top: 60%;
	background-color: rgba(255,255,255,0.2);
}
#loading:before {
	content: "";
	position: absolute;
	background-color: #ffffff;/*#fcd3ec*/
	top: 0px;
	left: 0px;
	height: 20px;
	width: 0px;
	z-index: 0;
	opacity: 1;
	-webkit-transform-origin:  100% 0%;
			transform-origin:  100% 0% ;
	-webkit-animation: loading 6s ease-in-out infinite;/*6s*/
			animation: loading 6s ease-in-out infinite;
}
#loading:after {
	content: "LOADING…";
	color: #1a1a1a;
	font-family:sans-serif;
	font-weight: 200;
	font-size: 16px;
    letter-spacing: 2px;
	position: absolute;
	width: 100%;
	height: 20px;
	line-height: 20px;
	left: 0;
	top: 0;
    padding-left: 2%;
    text-align: center;
}

@-webkit-keyframes loading {
    0%{width: 0px;}
    70%{width: 100%; opacity: 1;}
    90%{opacity: 0; width: 100%;}
    100%{opacity: 0;width: 0px;}
}

@keyframes loading {
    0%{width: 0px;}
    70%{width: 100%; opacity: 1;}
    90%{opacity: 0; width: 100%;}
    100%{opacity: 0;width: 0px;}
}
    
.loading {/*
    background-color: #ffffff;*/
    width: 30%;
    height: auto;
    margin: 0 auto;/*margin: 0 auto; */
    position: relative;
    top: 35%;
}
/* Add animation to "page content" */
.animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 1s;
    animation-name: animatebottom;
    animation-duration: 1s
}

@-webkit-keyframes animatebottom {
    from { bottom:-500px; opacity:0 } 
    to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
    from { bottom:-500px; opacity:0 } 
    to { bottom:0; opacity:1 }
}
#load {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: -webkit-fill-available;
    background-color: #cbe1f2;
    display: none;
    text-align: center;
}
/*
.container {
    height: 100%;
    white-space: nowrap;
    overflow-y: scroll;
    position:absolute;
    top:0;
    left:0;
    margin:0;/*
    padding-top:20px;
    display: inline-block;
}*/
.iROO{
    position: fixed;
    z-index: 10;
    margin-top: 13px;
    margin-left: 13px;
    width: 100px;
}/*
.iROO a {
    background-color: aquamarine;
    width: 100px;
        display: block;
    pointer-events: stroke ;
    z-index: 100;
}*/

.journey {
    position:absolute;
    top:0;
    left:0;
    height: 100vh;
    min-height: -webkit-fill-available;
    margin: 0;
    white-space: nowrap;
    display: flex;
}
.scenes {
    height: 100vh;
    min-height: -webkit-fill-available;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    white-space: normal;
    letter-spacing: 1px;
}
.setoff {
    position: relative;
    width: 30vw;
    height: 100vh;
    min-height: -webkit-fill-available;
    /* edit 100%
    background: #e1e1df;*/
}
.setoff img{
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
.southamericanlogo {/*
    border: dashed 1px currentColor;*/
    z-index: 10;
    width: 60%;
    margin: 0 20%;
    top: 30%;
}
.res {
    position: absolute;
}
.in {
    position: absolute;
}
.movingmouse {
    position: absolute;/*
    color: mediumvioletred;*/
    z-index: 10;
    width: 170px;
    margin: 0 35%;
    bottom: 0%;
    margin-bottom: 12%;
}
.mouse {
    position: relative;
    width: 33px;
    height: 50px;
    right: 0;
    border-radius: 12px;
    border: 2px solid #fff;
}
.mousebutton {
    background-color: #fff;
    position: absolute;
    width: 4px;
    height: 10px;
    border-radius: 2px;
    top: 10px;
    left: 50%;
    margin: 0 0 0 -1px;
    animation: mousescroll 1s infinite alternate;
}
.mousetext {
    margin-top: -15px;
    margin-left: 40px;
    color: #fff;
    font-size: 12px;
    line-height: 1em;
}
.movingmouse > .mousetext:after {
    content: "SCROLL DOWN";}
@keyframes mousescroll {
    to {
    transform: translate(0, 5px) scale(1, 0.8);
    }
}
#swipeleft a {
    display:none;
    padding-bottom: 70px;
}
#swipeleft a span {
    display:none;
    z-index: 15;
    position: absolute;
    bottom: 10%;
    left: 40%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transform: rotate(47deg);
    transform: rotate(47deg);
    -webkit-animation: scrollleft 1.5s infinite;
    animation: scrollleft 1.5s infinite;
    box-sizing: border-box;
}
.sectiontext:after {
    content: "SWIPE LEFT";
    z-index: 15;
    position: absolute;
    bottom: 10%;
    left: 41%;
    padding-top:20px;
    font-size: 12px;
    color: #fff;
}
@-webkit-keyframes scrollleft {
    0% {-webkit-transform: rotate(47deg) translate(0, 0);
        opacity: 0;}
    50% {opacity: 1;}
    100% {-webkit-transform: rotate(47deg) translate(-20px, 20px);
        opacity: 0;}
}
@keyframes scrollleft {
    0% {-webkit-transform: rotate(47deg) translate(0, 0);
        opacity: 0;}
    50% {opacity: 1;}
    100% {-webkit-transform: rotate(47deg) translate(-20px, 20px);
        opacity: 0;}
}
h1 {
    opacity: 0;
}
.leaves {/*
    border: dashed 1px green;*/
    width: 135%;
    z-index: 2;
    top: -2%;
    left: -55%;
    animation: moderatebreeze  2s infinite alternate;
    transform-origin: center top;
}
@keyframes moderatebreeze  {
    0%{ transform: skewX(-.5deg);}
    100%{ transform: skewX(1deg);}
}
.clouds {/*
    border: dashed 1px white;*/
    width: 60%;
    z-index: 1;
    top: 10%;
    left: -1%;    
}
.cloud {/*
    border: dashed 1px snow;*/
    width: 30%;
    z-index: 1;
    top: 5%;
    left: 80%;
}
.sky {/*
    border: dashed 1px skyblue;*/
    z-index: 0;
    width: 110%;
    top: 10%;
    left: -5%;
    animation: lightair 5s infinite alternate;
    animation-delay: 2s;
}
@keyframes lightair {
    0%{ transform: translate3d(0,0,0);}/*
    50%{ transform: translate3d(1px,4px,0);}*/
    100%{ transform: translate3d(50px,0,0);}      
}
.tree {/*
    border: dashed 1px saddlebrown;*/
    position: absolute;
    z-index: 1;
    height: 90%;/*
    background-image: url(tree.png);
    background-size: 602px 1077px;*/
    top: 10%;
    left: -110px;
}
.brid {
    border: dashed 1px cornflowerblue;
    position: absolute;
    z-index: 2;
    width: 110px;
    height: 94px;
    background-image: url(bird.png);
    background-size: 110px 94px;
    top: 270px;
    left: 120px;   
}
.strawhat {
    border: dashed 1px darkgoldenrod;
    position: absolute;
    z-index: 5;
    width: 238px;
    height: 225px;/*
    background-image: url(strawhat.png);
    background-size: 238px 225px;*/
    top: 25%;
    left: 3%;    
}
.flowersea {/*
    border: dashed 1px gold;*/
    z-index: 0;
    width: 110%;
    left: -5%;
    bottom: 3%;
}
.lawn {/*
    border: dashed 1px green;*/
    z-index: 9;
    width: 120%;
    left: -7%;
    bottom: -2%;    
    animation: strongbreeze  4s infinite alternate;
    animation-delay: 1s;
    transform-origin: center bottom;
}
.travel {
    position: relative;
    float: left;
    width: 100vw;
    height: 100vh;
    min-height: -webkit-fill-available;/*
    background-color: #d1d7ed;*/
    background: linear-gradient(90deg, rgba(203, 225, 242, 1), rgba(207, 231, 243, .5)100%);
}
.travel img{
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
.travel > .leaves {/*
    border: dashed 1px green;*/
    width: 55%;
    z-index: 4;
    top: -15%;
    left: 0; 
    animation: strongbreeze  5s infinite alternate;
    transform-origin: center top;
}
@keyframes strongbreeze {
    0%{ transform: skewX(-2deg);}
    100%{ transform: skewX(3deg);}
}
.travel > .introduction {
    background-color: #fff;
    opacity: .8;
    position: absolute;
    z-index: 9;
    width: 375px;
    height: 190px;
    left: 80%;
    bottom: 5%;
    color: #000;
    letter-spacing: .5px;
    text-align: center;
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5em;
    border: solid 1px #000;
}
.introduction > h2{
    opacity: 1;
    padding: 5% 1.5%;
}
.travel .introduction_cta { 
    background-color: #bd2121;
    width: 50%;
    height: 40px;
    margin: 0 auto;
    margin-top: -15px;
    z-index: 9;
}
.introduction a {
    text-decoration: none;
}
h2 a {
    text-decoration: none;
    color: #000;
}
.travelcta {
    z-index: 9;
    color: #fff;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 2.5;
    text-align: center; 
}
.illustration {/*
    border-radius: 10px;*/
    position: absolute;
    z-index: 9;
    width: 300px;
    height: 25px;
    left: 3.9%;
    bottom: 1.5%;
    text-align: center;
    font-family: sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .3px;
}
.illustration a{
    text-decoration: none;
    color: #fff;
}
.building {/*
    border: dashed 1px saddlebrown;*/
    width: 85%;
    z-index: 2;
    left: 25%;
    bottom: 0%;
    padding-bottom: 16.5%;
}
.road {/*
    border:  dashed 1px dimgrey;*/
    width: 85%;
    z-index: 1;
    left: 25%;
    bottom: 0;
}

.roadborder {/*
    border: dashed 1px darkgray;*/
    width: 25%;
    z-index: 1;
    left: 90%;
    bottom: -13%;
}
.crosswalk {/*
    border: dashed 1px lightgray;*/
    width: 27%;
    z-index: 1;
    left: 70.2%;
    bottom: 0;
    padding-bottom: 1%;
}
.signallight {/*
    broder: dashed 2px saddlebrown;*/
    width: 20%;
    z-index: 5;
    left: 70%;
    bottom: 0%;
    padding-bottom: 16%;
}
.guideboardstop {/*
    border: dashed 1px darkred;*/
    width: 8.5%;
    z-index: 7;
    left: 79%;
    bottom: -1%;
}
.guideboardspeed {/*
    border: dashed 1px gray;*/
    width: 8.5%;
    z-index: 7;
    left: 88.5%;
    bottom: -1%;
}
.travel > .roles-other {
    width: 100%;
    z-index: 8;
    left: 0;
    bottom: -3%;
}
.telephonebooth {/*
    border: dashed 1px firebrick;*/
    width: 27.5%;
    z-index: 8;
    left: -.9%;
    bottom:  0%;
}
.trunk {/*
    border: dashed 1px silver;*/
    width: 11%;
    z-index: 9;
    left: 6.1%;
    bottom: 0%;
}
.telephoneboothgirl {/*
    border: dashed 1px pink;*/
    width: 20%;
    z-index: 9;
    left: 14.3%;
    bottom: 0%;
}
.telephoneboothgirllefthair {
    width: 3%;
    z-index: 9;
    left: 22.2%;
    bottom: 0%;
    padding-bottom: 30%;
    animation: lefthairffly  5s infinite;
    animation-delay: 4s;
    transform-origin: center top;
}
.telephoneboothgirlrighthair {
    width: 5%;
    z-index: 9;
    left: 14.9%;
    bottom: 0%;
    padding-bottom: 30%;
    animation: righthairffly  6s infinite;
    animation-delay: 1s;
    transform-origin: center top;
}
@keyframes lefthairffly {
    0%{ transform: rotate(0deg);}
    50%{ transform: rotate(-10deg);}
    100%{ transform: rotate(0deg);}
}
@keyframes righthairffly {
    0%{ transform: rotate(0deg);}
    25%{ transform: rotate(2deg);}
    50%{ transform: rotate(2deg);}
    75%{ transform: rotate(6deg);}
    100%{ transform: rotate(0deg);}
}
/*
.car-outer {
    border: dashed 1.5px yellow;
    width: 75%;
    z-index: 6;
    left: 0%;
    bottom: 55%;
}*/
.car {/*
    border: dashed 1px khaki;*/
    width: 78%;
    z-index: 6;
    left: 0%;
    bottom: 0%;
    padding-bottom: 4.5%;
    animation: launch 1.5s infinite;
}
@keyframes launch {
    0%{ transform: translate3d(1px,3px,0);}
    25%{ transform: translate3d(0,0,0);}    
    50%{ transform: translate3d(1px,4px,0);}
    75%{ transform: translate3d(0,0,0);}   
    100%{ transform: translate3d(1px,3px,0);}      
}
.tires {/*
    border: dashed 1px black;*/
    width: 15.5%;
    z-index: 7;
    left: 60.2%;
    bottom: -4%;
}
.luggage {/*
    border: dashed 1px dodgerblue;*/
    width: 15%;
    z-index: 7;
    left: 29%;
    bottom: 0%;
    padding-bottom: 31.2%;
    animation: launch 1.5s infinite;        
}/*
.scarfgirl-outer {
    border: dashed 1.5px orange;
    width: 20%;
    z-index: 9;
    left: 45%;
    top: 0%;
}*/
.scarfgirl {/*
    border: dashed 1px skyblue;*/
    width: 18%;
    z-index: 8;
    left: 53%;
    bottom: 0%;
    padding-bottom: 13%;/*
    top: 0%;*/
    animation: launch 1.5s infinite;
}
.scarfgirlleg {/*
    border: dashed 1px burlywood;*/
    width: 12%;
    z-index: 9;
    left: 49%;
    bottom: 0%;
    padding-bottom: 4.6%;
    animation: launch 1.5s infinite;/*
    animation: shakefoot 2s ease-in infinite alternate;
    transform-origin: center top;*/
}
@keyframes shakefoot {
    0%{ transform: rotate(0deg) translate3d(1px,3px,0);}
    50%{ transform: rotate(2deg);}
    100%{ transform: rotate(0deg);}    
}
.belmond {
    position: relative;
    float: left;
    width: 100vw;
    height: 100vh;
    min-height: -webkit-fill-available;/*
    background-color: #f4e1e3;
    background: linear-gradient(150deg,#f0f5f6,#1fb9d7,#037aa9); */
    background: linear-gradient(150deg, rgba(240, 245, 246, .5), rgba(31, 185, 215, .5), rgba(3, 122, 169, 1)95%);
} 
.belmond img{
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
.belmond > .leaves {/*
    border: dashed 1px darkgreen;*/
    width: 55%;
    z-index: 4;
    top: -15%;
    left: -37%; 
    animation: moderategale  2s infinite alternate;
    animation-delay: .5s;
    transform-origin: center top;
}
@keyframes moderategale  {
    0%{ transform: skewX(0deg);}
    100%{ transform: skewX(1.5deg);}
}
.belmond > .roles-other {
    width: 100%;
    z-index: 8;
    left: 0;
    bottom: -3%;
}
.belmondfillin {/*
    border: dashed 1px skyblue;*/
    background: linear-gradient(90deg, rgba(203, 225, 242, 1)50%, rgba(203, 225, 242, 0));
    width: 300px;
    height: 100%;
    z-index: 0;
    left: -10%;
    top: 0%;
}
.belmond > .introduction {
    background-color: #fff;
    opacity: .8;
    position: absolute;
    z-index: 9;
    width: 435px;
    height: 190px;
    left: 68%;
    bottom: 5%;
    color: #000;
    letter-spacing: .5px;
    text-align: center;
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5em;
    border: solid 1px #000;
}
.belmond .introduction_cta { 
    background-color: #f2ae39;
    width: 50%;
    height: 40px;
    margin: 0 auto;
    margin-top: -15px;/*
    margin-top: 30px;
    margin: 70px auto;*/
    z-index: 9;
}
.belmondcta {
    z-index: 9;
    color: #fff;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 2.5;
    text-align: center; 
}
.altocumulus {/*
    border: dashed 1px white;*/
    width: 80%;
    z-index: 1;
    left: 10%;
    top: 0%;
    animation: lightbreeze  10s infinite alternate;
}
@keyframes lightbreeze {
    0%{ transform: translate3d(0,0,0);}
    100%{ transform: translate3d(50px,15px,0);}      
}
.aircraft {/*
    border: dashed 1px silver;*/
    width: 20%;
    z-index: 4;
    left: 0%;
    top: 12%;
    animation: flight 6s;
    animation-fill-mode: forwards;
    animation-delay: 5s;
}
@keyframes flight {  
    0% { transform: translate(0px); } 
    99% { transform: translate(505px,-175px); opacity:1;} 
    100% { transform: translate(505px,-175px); opacity:0;} 
}
.contrail {/*
    border: dashed 1px silver;*/
    width: 20%;
    z-index: 3;
    left: 0%;
    top: 2.5%;
    animation: vaportrail 3.5s;
    animation-fill-mode: forwards;
    animation-delay: 7s;
    opacity: 0;
}
@keyframes vaportrail {  
    0% {opacity: 0;}
    75% {opacity: 1;}
    100% {opacity: .1;}
}  
.hotel {/*
    border: dashed 1px coral;*/
    width: 75%;
    z-index: 2;
    left: 15%;
    bottom: 0%;
}
.palm {/*
    border: dashed 1px green;*/
    width: 25%;
    z-index: 1;
    left: 59.5%;
    bottom: 0%;
    padding-bottom: 11.5%;   
    animation: freshgale 3s infinite alternate;
    animation-delay: .5s;
    transform-origin: center bottom;
}
@keyframes freshgale {
    0%{ transform: skewY(0deg);}
    30%{ transform: skewY(1.3deg);}
    65%{ transform: skewY(0deg);}
    100%{ transform: skewY(-1deg);}
}
.palms {/*
    border: dashed 1px green;*/
    width: 23%;
    z-index: 1;
    left: 74%;
    bottom: 0%;
    padding-bottom: 6%;
    animation: freshgales 3.5s infinite alternate;
    animation-delay: 1.5s;
    transform-origin: center bottom;
}
@keyframes freshgales {
    0%{ transform: skewY(0deg);}
    25%{ transform: skewY(1deg);}
    50%{ transform: skewY(0deg);}
    70%{ transform: skewY(-1deg);}
    100%{ transform: skewY(0deg);}
}
.railingtop {/*
    border: dashed 1px deeppink;*/
    width: 95%;
    z-index: 7;
    left: 5%;
    bottom: 0%;
}
.beretgirl {/*
    border: dashed 1px darkred;*/
    width: 17.3%;
    z-index: 6;
    left: 20%;
    bottom: 0%;    
}
.beretgirlhair {
    width: 6.5%;
    z-index: 5;
    left: 27.2%;
    bottom: 0%;
    padding-bottom: 31.3%;
    animation: hairffly  2s infinite alternate;
    animation-delay: 2s;
    transform-origin: center top;    
}
@keyframes hairffly {
    0%{ transform: rotate(0deg) skewX(0deg);}
    100%{ transform: rotate(-2.5deg) skewX(3.5deg)}/*
    0%{ transform: rotate(0deg);}
    25%{ transform: rotate(-2deg); 
    50%{ transform: rotate(-2deg);}
    75%{ transform: rotate(-5deg);}
    100%{ transform: rotate(0deg);}*/
}
.strawhatgirl {/*
    border: dashed 1px darkgoldenrod;*/
    width: 21.9%;
    z-index: 6;
    left: 35.3%;
    bottom: 0%;
}
.strawhatgirlhand {
    width: 5.6%;
    z-index: 7;
    left: 43.9%;
    bottom: 0%;
    padding-bottom: 16.2%;
    animation: wavehand  3s infinite alternate;
    animation-delay: 2s;
    transform-origin: center top;        
}
@keyframes wavehand {
    0%{ transform: rotate(0deg);}
    40%{ transform: rotate(5deg);}
    100%{ transform: rotate(-2deg);}
}
.sandiego {
    position: relative;
    float: left;
    width: 110vmax;
    height: 100%;/*
    background-color: #f9aabd;*/    
}
.sandiego img{
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
.sandiegofillin {/*
    border: dashed 1px skyblue;*/
    background: linear-gradient(90deg, rgba(66, 168, 203, 0), rgba(203, 225, 242, 1)30%);
    width: 300px;
    height: 100vh;
    min-height: -webkit-fill-available;
    z-index: 0;
    left: -10%;
    top: 0%;
}
.sandiego > .introduction {
    background-color: #fff;
    opacity: .8;
    position: absolute;
    z-index: 10;
    width: 375px;
    height: 190px;
    left: 70%;
    bottom: 5%;
    color: #000;
    letter-spacing: .5px;
    text-align: center;
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5em;
    border: solid 1px #000;
}
.sandiego .introduction_cta { 
    background-color: #e47faf;
    width: 50%;
    height: 40px;
    margin: 0 auto;
    margin-top: -15px;
    z-index: 9;
}
.sandiegocta {
    z-index: 10;
    color: #fff;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 2.5;
    text-align: center; 
}
.wallpaper {
    background-color: #00c300;
    border-radius: 50px;/*
    opacity: .8;*/
    position: absolute;
    z-index: 10;
    width: 185px;
    height: 35px;
    left: 0%;
    bottom: 5.2%;
    text-align: center;
    font-family: sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 10px 0;
}
.wallpaper a{
    text-decoration: none;
    color: #fff;
}
.skyrim {/*
    border: dashed 1px skyblue;*/
    width: 97%;
    z-index: 1;
    left: 3%;
    top: 5%;
}
.cloudsmall {/*
    border: dashed 1px white;*/
    width: 9%;
    z-index: 2;
    left: 60%;
    top: 5%;    
    animation: gentlebreeze 8s infinite alternate;
    animation-delay: 2s;
}
.cloudmediumleft {/*
    border: dashed 1px snow;*/
    width: 22%;
    z-index: 2;
    left: -2.5%;
    top: -1.5%;
    animation: gentlebreeze 8s infinite alternate;
    animation-delay: 2s;
}
.cloudmediumright {/*
    border: dashed 1px white;*/
    width: 22%;
    z-index: 2;
    left: 70%;
    top: -3%;
    animation: gentlebreeze 8s infinite alternate;
    animation-delay: 2s;
}
.cloudlarge {/*
    border: dashed 1px white;*/
    width: 27%;
    z-index: 2;
    left: 20%;
    top: 4%;    
    animation: gentlebreeze 8s infinite alternate;
    animation-delay: 2s;
}
@keyframes gentlebreeze {
    0%{ transform: translate3d(0,0,0);}/*
    50%{ transform: translate3d(1px,4px,0);}*/
    100%{ transform: translate3d(-50px,0,0);}      
}
.sandiego > .roles-other {
    width: 100%;
    z-index: 9;
    left: 0%;
    bottom: -3%;
}
.flowerfield {/*
    border: dashed 1px yellow;*/
    width: 124%;
    z-index: 1;
    left: -11.5%;
    bottom: 0%;    
}
.cameragirl {/*
    border: dashed 1px gold;*/
    width: 12%;
    z-index: 6;
    left: 12.5%;
    bottom: 0%;
    padding-bottom: 20.5%;    
}
.cameragirlhair {/*
    border: dashed 1px gold;*/
    width: 5%;
    z-index: 5;
    left: 19%;
    bottom: 0%;    
    padding-bottom: 28%;  
    animation: hairfly  5s infinite;
    animation-delay: 1.8s;
    transform-origin: center top;   
}
.cameragirlbody {/*
    border: dashed 1px gold;*/
    width: 13%;
    z-index: 5;
    left: 12%;
    bottom: 0%;    
}
.cameragirlhand {/*
    border: dashed 1px gold;*/
    width: 9.6%;
    z-index: 6;
    left: 9.2%;
    bottom: 0%;
    padding-bottom: 4.2%;
    animation: wavehat  3s infinite alternate;
    animation-delay: 1s;
    transform-origin: center top;           
}
@keyframes wavehat {
    0%{ transform: rotate(0deg);}
    40%{ transform: rotate(5deg);}
    100%{ transform: rotate(-2deg);}
}
.malehuacaya {/*
    border: dashed 1px burlywood;*/
    width: 13.5%;
    z-index: 3;
    left: 24.2%;
    bottom: 0%;
    padding-bottom: 3.3%;   
}
.coffeetable {/*
    border: dashed 1px beige;*/
    width: 26%;
    z-index: 4;
    left: 20.5%;
    bottom: 0%;
}
.blackteagirl {/*
    border: dashed 1px saddlebrown;*/
    width: 32%;
    z-index: 4;
    left: 21.8%;
    bottom: 0%;
}
.blackteagirllefthair {
    width: 3.4%;
    z-index: 6;
    left: 50.4%;
    bottom: 0%;  
    padding-bottom: 21%;
    animation: hairfly  5s infinite;
    animation-delay: 2s;
    transform-origin: center top;    
}
@keyframes hairfly {
    0%{ transform: rotate(0deg);}
    50%{ transform: rotate(-5deg);}
    100%{ transform: rotate(0deg);}
}
.blackteagirlrighthair {
    width: 3.2%;
    z-index: 6;
    left: 46.4%;
    bottom: 0%;  
    padding-bottom: 20.9%;
    animation: righthairfly  5s infinite;
    animation-delay: 2s;
    transform-origin: center top;   
}
@keyframes righthairfly {
    0%{ transform: rotate(0deg);}
    50%{ transform: rotate(-9deg);}
    100%{ transform: rotate(0deg);}
}
.femalehuacaya {/*
    border: dashed 1px brown;*/
    width: 8.5%;
    z-index: 4;
    left: 54.5%;
    bottom: 0%;
}
.bag {/*
    border: dashed 1px orange;*/
    width: 10.7%;
    z-index: 5;
    left: 44.8%;
    bottom: 0%;
}

.argentina {
    position: relative;
    float: left;
    width: 100vw;
    height: 100vh;
    min-height: -webkit-fill-available;
    background-color: #f3d561;/*
    background-color: #ffe6a9;*/    
}
.argentina img{
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
.argentina > .introduction {
    background-color: #fff;
    opacity: .8;
    position: absolute;
    z-index: 10;
    width: 415px;
    height: 190px;
    left: 77%;
    bottom: 5%;
    color: #000;
    letter-spacing: .5px;
    text-align: center;
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5em;
    border: solid 1px #000;
}
.argentina .introduction_cta { 
    background-color: #3ead2a;
    width: 50%;
    height: 40px;
    margin: 0 auto;
    margin-top: -15px;
    z-index: 9;
}
.argentinacta {
    z-index: 10;
    color: #fff;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 2.5;
    text-align: center; 
}
.argentina > .roles-other {
    width: 100%;
    z-index: 9;
    left: 0%;
    bottom: -3%;
}
.argentinafillin {/*
    border: dashed 1px skyblue;*/
    background: linear-gradient(90deg, rgba(203, 225, 242, 0), rgba(243, 213, 97, 1)40%);
    width: 350px;
    height: 100%;
    z-index: 0;
    left: -10%;
    top: 0%;
}
.whitewashingleft {/*
    border: dashed 1px yellow;*/
    width: 15%;
    z-index: 0;
    left: 0%;
    top: 0%;   
}
.door {/*
    border: dashed 1px white;*/
    width: 39%;
    z-index: 3;
    left: 2%;
    top: -9%;   
}
.cactus {/*
    border: dashed 1px green;*/
    width: 11%;
    z-index: 2;
    left: 3.9%;
    top: -3.5%;
}
.whitewashingmiddle {/*
    border: dashed 1px yellow;*/
    width: 22%;
    z-index: 0;
    left: 41%;
    top: 0%;   
}
.whitewashingright {/*
    border: dashed 1px yellow;*/
    width: 18%;
    z-index: 0;
    left: 80%;
    top: 0%;
    padding-top: 3%;
}
.bougainvillea {/*
    border: dashed 1px darkviolet;*/
    width: 29%;
    z-index: 1;
    left: 75%;
    top: -10%;    
}
.housenumber {/*
    border: dashed 1px black;*/
    width: 4%;
    z-index: 1;
    left: 45%;
    top: 15%;
}
.walllamp {/*
    border: dashed 1px black;*/
    width: 4%;
    z-index: 1;
    left: 51%;
    top: 1%;
}
.flamingo {/*
    border: dashed 1px indianred;*/
    width: 19.5%;
    z-index: 5;
    left: 12.8%;
    bottom: 0%;
    padding-bottom: 0%;
}
.mangogirl {/*
    border: dashed 1px chartreuse;*/
    width: 19%;
    z-index: 5;
    left: 27%;
    bottom: 0%;
    padding-bottom: 22.7%;
    animation: bodydance 1.5s infinite;
    animation-delay: 2s; 
    animation-timing-function: ease-in;
}
@keyframes bodydance {
    0%{ transform: rotate(0deg);}
    25%{ transform: rotate(1deg);}
    75%{ transform: rotate(-1deg);}
    100%{ transform: rotate(0deg);}    
}/*
.mangogirlhand {
    border: dashed 1px chartreuse;
    width: 9%;
    z-index: 5;
    left: 26.5%;
    bottom: 0%;
    padding-bottom: 22.6%;
    animation: bodydance 2s infinite alternate;
    animation-delay: 2s; 
}
@keyframes handdance {
    0%{ transform: rotate(0deg);}
    50%{ transform: rotate(-6deg);}
    100%{ transform: rotate(4deg);}
}*/
.mangogirlleg {/*
    border: dashed 1px chartreuse;*/
    width: 10.9%;
    z-index: 4;
    left: 34%;
    bottom: 0%;
    padding-bottom: 2%;
}
.toucan {/*
    border: dashed 1px chocolate;*/
    width: 11%;
    z-index: 6;
    left: 46%;
    bottom: 0%;
    padding-bottom: 6%;
}
.toucanmouth {/*
    border: dashed 1px chocolate;*/
    width: 3.6%;
    z-index: 5;
    left: 52%;
    bottom: 0%;
    padding-bottom: 31.9%;
    animation: bite 1.3s infinite alternate;
    animation-timing-function: ease-in-out;
    animation-delay: -3s; 
    transform-origin: center top;  
}
@keyframes bite {
    0%{ transform: rotate(0deg);}
    25%{ transform: rotate(1deg);}    
    50%{ transform: rotate(0deg);}
    75%{ transform: rotate(2deg);}  
    100%{ transform: rotate(0deg);}
}
.shaker {/*
    border: dashed 1px purple;*/
    width: 3.5%;
    z-index: 5;
    left: 53%;
    bottom: 0%;
    padding-bottom: 31.4%;
}
.band {/*
    border: dashed 1px beige;*/
    width: 37%;
    z-index: 5;
    left: 59%;
    bottom: 0%;
    padding-bottom: 0%;
}
.brazil {
    position: relative;
    float: left;
    width: 100vw;
    height: 100vh;
    min-height: -webkit-fill-available;
    background-color: #5e8d46;/*
    background-color: #86dcd3;*/    
}
.brazil img{
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
.brazil > .leaves {/*
    border: dashed 1px darkgreen;*/
    width: 55%;
    z-index: 4;
    top: -15%;
    left: -37%; 
} 
.brazil > .roles-other {
    width: 100%;
    z-index: 9;
    left: 0;
    bottom: -3%;
}

.brazil > .introduction {
    background-color: #fff;
    opacity: .8;
    position: absolute;
    z-index: 10;
    width: 415px;
    height: 190px;
    left: 77%;
    bottom: 5%;
    color: #000;
    letter-spacing: .5px;
    text-align: center;
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5em;
    border: solid 1px #000;
}
.brazil .introduction_cta { 
    background-color: #bf7849;
    width: 50%;
    height: 45px;
    margin: 0 auto;
    margin-top: -15px;
    z-index: 9;
}
.brazilcta {
    z-index: 10;
    color: #fff;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 2.5;
    text-align: center; 
}
.brazilfillin {/*
    border: dashed 1px skyblue;*/
    background: linear-gradient(90deg, rgba(243, 213, 97, 1), rgba( 94, 141, 70, 1));
    width: 300px;
    height: 100%;
    z-index: 0;
    left: -8%;
    top: 0%;
}
.jungle {/*
    border: dashed 1px darkgreen;*/
    width: 100%;
    z-index: 0;
    left: 0%;
    top: 0%;
}
.swamp {/*
    border: dashed 1px darkslategray;*/
    width: 100%;
    z-index: 1;
    left: .5%;
    top: 0%;
}
.coconutmedium {/*
    border: dashed 1px green;*/
    width: 30%;
    z-index: 1;
    left: -11.5%;
    top: -20%;    
}
.coconutmediums {/*
    border: dashed 1px darkolivegreen;*/
    width: 30%;
    z-index: 3;
    left: -12%;
    top: 12%;    
}
.coconut {/*
    border: dashed 1px darkgreen;*/
    width: 17%;
    z-index: 1;
    left: 15%;
    top: -6%; 
}
.coconutsmall {/*
    border: dashed 1px darkolivegreen;*/
    width: 30%;
    z-index: 1;
    left: 25%;
    top: -35%;     
}
.coconutmini {/*
    border: dashed 1px darkolivegreen;*/
    width: 30%;
    z-index: 1;
    left: 87%;
    top: -35%; 
}
.coconutmirroring {/*
    border: dashed 1px green;*/
    width: 30%;
    z-index: 1;
    left: 30%;
    top: -26%;   
}
.sun {/*
    border: dashed 1px yellow;*/
    width: 17%;
    z-index: 0;
    left: 57%;
    top: -10.5%; 
}
.macaque {/*
    border: dashed 1px saddlebrown;*/
    width: 25%;
    z-index: 1;
    left: 0%;
    padding-left: .5%;
    top: 7%;    
}
.coconuttree {/*
    border: dashed 1px darkgreen;*/
    width: 17.5%;
    z-index: 0;
    left: 74%;
    top: -3%;  
}
.coconuttrees {/*
    border: dashed 1px green;*/
    width: 18%;
    z-index: 0;
    left: 86%;
    top: 0%;
    padding-top: 3%;
}
.coconuttreelarge {/*
    border: dashed 1px green;*/
    width: 20%;
    z-index: 5;
    left: 89%;
    top: 0%;
    padding-top: 0%;
}
.coconutlarge {/*
    border: dashed 1px saddlebrown;*/
    width: 35%;
    z-index: 1;
    left: -15.5%;
    bottom: 0%;    
}
.grass {/*
    border: dashed 1px green;*/
    width: 23.3%;
    z-index: 6;
    left: 3%;
    bottom: 0%;
    padding-bottom: 2%;
}
.cougar {/*
    border: dashed 1px moccasin;*/
    width: 48%;
    z-index: 5;
    left: 4.5%;
    bottom: 0%;
    padding-bottom: 0%;
}
.mapgirl {/*
    border: dashed 1px snow;*/
    width: 38%;
    z-index: 4;
    left: 22.5%;
    bottom: 0%;
}
.mapgirlhand {
    width: 6.4%;
    z-index: 6;
    left: 26.2%;
    bottom: 0%;
    padding-bottom: 14.2%;
    animation: touch 1s infinite alternate;
    animation-timing-function: ease-in-out;
    animation-delay: 2s; 
    transform-origin: center top;  
}
@keyframes touch {
    0%{ transform: rotate(0deg);}
    100%{ transform: rotate(-6deg);}
}
.parrot {/*
    border: dashed 1px darkturquoise;*/
    width: 8%;
    z-index: 6;
    left: 55%;
    bottom: 0%;
    padding-bottom: 12%;
}
.parrotgirl {/*
    border: dashed 1px black;*/
    width: 11.3%;
    z-index: 5;
    left: 63.5%;
    bottom: 0%;
    padding-bottom: 27.9%;
}
.parrotgirlbody {/*
    border: dashed 1px black;*/
    width: 27.4%;
    z-index: 4;
    left: 53.5%;
    bottom: 0%;
    animation: swing 2s infinite alternate;
    animation-delay: 1s; 
    transform-origin: center top;  
}
.flower {/*
    border: dashed 1px orange;*/
    width: 20%;
    z-index: 6;
    left: 85.5%;
    bottom: 0%;
    padding-bottom: 0%;
    transform:rotate(0deg);
}
.hibiscus{/*
    border: dashed 1px orange;*/
    width: 15%;
    z-index: 5;
    left: 74%;
    bottom: 0%;
    padding-bottom: 0%;
}
@keyframes swing  {
    0%{ transform: rotate(0deg);}
    100%{ transform: rotate(1deg);}
}
.peru {
    position: relative;
    float: left;
    width: 99.3vw;
    height: 100vh;
    min-height: -webkit-fill-available;/*
    background-color: #96c8e1;*/
    background: linear-gradient(#6eaffa,#c1c0f0,#eee3f0,#fec5ad,#fcad61); 
}
.peru img{
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
.peru > .leaves {/*
    border: dashed 1px darkgreen;*/
    width: 55%;
    z-index: 4;
    top: -15%;
    left: -37%; 
} 
.peru > .roles-other {
    width: 100%;
    z-index: 0;
    left: -1.3%;
    bottom: -3%;
}
.peru > .introduction {
    background-color: #fff;
    opacity: .8;
    position: absolute;
    z-index: 9;
    width: 415px;
    height: 190px;
    left: 72%;
    bottom: 5%;
    color: #000;
    letter-spacing: .5px;
    text-align: center;
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5em;
    border: solid 1px #000;
}
.peru .introduction_cta { 
    background-color: #f42e15;
    width: 50%;
    height: 40px;
    margin: 0 auto;
    margin-top: -15px;
    /*
    margin-top: 30px;
    margin: 70px auto;*/
    z-index: 9;
}
.peructa {
    z-index: 9;
    color: #fff;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 2.5;
    text-align: center; 
}
.newarrival {
    background-color: #000;
    position: absolute;
    z-index: 10;
    width: 43px;
    height: 125px;
    left: 97.8%;
    top: 55%;
    text-align: center;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.1em;
    padding: 20px 4px 20px 8px;
}
.newarrivals {
    background-color: #fff;
    opacity: .9;
    position: absolute;
    z-index: 9;
    width: 43px;
    height: 125px;
    left: 97.6%;
    top: 55.4%;
}
.newarrival a{
    text-decoration: none;
    color: #fff;
}
.perufillin {
    border: dashed 1px skyblue;/*
    background: linear-gradient(90deg, rgba( 94, 141, 70, 1)50%, rgba( 94, 141, 70, 0));*/
    width: 300px;
    height: 100%;
    z-index: 0;
    left: -5%;
    top: 0%;
}
.sunsetglow {/*
    border: dashed 1px skyblue;*/
    width: 95%;
    z-index: 0;
    left: 0%;
    top: 2%; 
    animation: freshbreeze 5s infinite alternate;
    animation-delay: 1s;
}
@keyframes freshbreeze {
    0%{ transform: translate3d(0,0,0);}
    100%{ transform: translate3d(50px,0,0);}    
}
.rattanbasket {/*
    border: dashed 1px orange;*/
    width: 34%;
    z-index: 2;
    left: 52.5%;
    top: -1.5%; 
}
.telescopegirl {/*
    border: dashed 1px gray;*/
    width: 26%;
    z-index: 3;
    left: 42.5%;
    top: -1.5%; 
    padding-top: 8.5%;
}
.reddressgirl {/*
    border: dashed 1px red;*/
    width: 16.2%;
    z-index: 3;
    left: 65.5%;
    top: -1.5%; 
    padding-top: 8.3%;
}
.reddressshawl {
    width: 16%;
    z-index: 2;
    left: 71.5%;
    top: -1.5%;     
    padding-top: 14.5%;
    animation: wholegale 1.8s infinite alternate;
    transform-origin: center top;
}
@keyframes wholegale {
    0%{ transform: rotate(0deg)}/*
    50%{ transform: rotate(-1deg) skewX(0deg)}*/
    100%{ transform: rotate(2deg)}
}
.reddressgirlhand {
    width: 8%;
    z-index: 4;
    left: 73.8%;
    top: -1.5%;     
    padding-top: 4.3%;
    animation: hello 1s infinite alternate;
    animation-delay: 1s; 
    transform-origin: center bottom;  
}
@keyframes hello  {
    0%{ transform: rotate(0deg) skewX(0deg);}  
    50%{ transform: rotate(2deg) skewX(-2deg);}
    100%{ transform: rotate(0deg) skewX(0deg);}
}
.hotairballoonI {/*
    border: dashed 1px snow;*/
    width: 18%;
    z-index: 3;
    left: 4.5%;
    top: -17.5%;  
    animation: blast-off 9s infinite alternate;
}
.hotairballoonII {/*
    border: dashed 1px snow;*/
    width: 12%;
    z-index: 2;
    left: 40%;
    top: 37%;   
    animation: blast-off 9s infinite alternate;
}
.hotairballoonIII {/*
    border: dashed 1px snow;*/
    width: 9%;
    z-index: 1;
    left: 84%;
    top: 27%;   
    animation: blast-off 9s infinite alternate;
}
.hotairballoonIV {/*
    border: dashed 1px snow;*/
    width: 10%;
    z-index: 1;
    left: 35%;
    top: 3%;   
}
.hotairballoonV {/*
    border: dashed 1px snow;*/
    width: 7.5%;
    z-index: 1;
    left: 81%;
    top: -3.5%;  
    animation: blast-off 5s infinite alternate;
    animation-delay: 1s;
}
.hotairballoonVI {/*
    border: dashed 1px snow;*/
    width: 8.5%;
    z-index: 2;
    left: 12.5%;
    top: 45.5%;   
    animation: blast-off 9s infinite alternate;
}
.hotairballoonVII {/*
    border: dashed 1px snow;*/
    width: 8.7%;
    z-index: 1;
    left: 34.5%;
    top: 35%;   
    animation: blast-off 5s infinite alternate;
    animation-delay: 1s;
}
.hotairballoonVIII {/*
    border: dashed 1px snow;*/
    width: 7%;
    z-index: 1;
    left: -1%;
    top: 14%;  
    animation: blast-off 5s infinite alternate;
    animation-delay: 1s;
}
.hotairballoonIX {/*
    border: dashed 1px snow;*/
    width: 6%;
    z-index: 1;
    left: 3%;
    top: 46%;   
    animation: blast-off 5s infinite alternate;
    animation-delay: 1s;
}
@keyframes blast-off {
    0%{ transform: translate3d(0,0,0);}
    100%{ transform: translate3d(5px,-50px,0);}    
}
.hotairballoonX {/*
    border: dashed 1px snow;*/
    width: 5%;
    z-index: 1;
    left: 17%;
    top: 40%;   
}
.hotairballoonXI {/*
    border: dashed 1px snow;*/
    width: 4%;
    z-index: 1;
    left: 17%;
    top: 3%;   
}
.hotairballoonXII {/*
    border: dashed 1px snow;*/
    width: 3.7%;
    z-index: 3;
    left: 20%;
    top: 16%;   
}
.hotairballoonXIII {/*
    border: dashed 1px snow;*/
    width: 4.2%;
    z-index: 1;
    left: -1%;
    top: 35%;   
}
.hotairballoonXIV {/*
    border: dashed 1px snow;*/
    width: 2%;
    z-index: 1;
    left: 53%;
    top: 5%;   
}
.hotairballoonXV {/*
    border: dashed 1px snow;*/
    width: 2%;
    z-index: 1;
    left: 50.5%;
    top: 20%;   
}
.hotairballoonXVI {/*
    border: dashed 1px snow;*/
    width: 1.7%;
    z-index: 1;
    left: 30%;
    top: 3%;   
}
.hotairballoonXVII {/*
    border: dashed 1px snow;*/
    width: 1.5%;
    z-index: 1;
    left: 47%;
    top: 10%;   
    animation: blast-off 5s infinite alternate;
    animation-delay: 1s;
}
.canyon {/*
    border: dashed 1px coral;*/
    width: 101.4%;
    z-index: 0;
    left: 0%;
    bottom: 0%;
}
.sunset {/*
    border: dashed 1px yellow;*/
    width: 100%;
    z-index: -1;
    left: 1%;
    bottom: 0%;
    padding-bottom: 13.5%;
}
.nav {
    background: #fab8ba;/*#A199E9;*/
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-flow: column nowrap;
    -webkit-box-pack: center;
    justify-content: center;
    position: fixed;
    z-index: 19;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    -webkit-clip-path: circle(29px at calc(1980px - -20px - 30px) calc(-20px + 30px));
    clip-path: circle(29px at calc(1980px - -20px - 30px) calc(-20px + 30px));
    -webkit-transition: all 0.5s cubic-bezier(0.86 0, 0.07, 1);
    transition: all .5s cubic-bezier(0.86, 0, 0.07, 1);
}

.nav a:hover{/*
    font-size: 22px;*/
}
.nav.active {
   -webkit-clip-path: circle(90% at 800px 50vh);
    clip-path: circle(90% at 800px 50vh);
}
.menu {
    display: block;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    padding: 1.5vh 3vw;
    line-height: 1.4em;
    color: #000;
    text-decoration: none;
    -webkit-transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1);
    transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1);
    opacity: 0;
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
}
.menu:nth-child(1) {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}
.menu:nth-child(2) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
.menu:nth-child(3) {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}
.menu:nth-child(4) {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.menu.active {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.nav_text{
    font-size: 18px;
    font-weight: 500;
}
.follow{
    background-color: #fce3dc;
    width: 100% ;
    /*height: 30%;*/
    position: fixed;
    padding: 3vh 0 1vh;
    bottom: 0;
    text-align: center;
}
.follow a{
    margin: 0 10px;
}
.media{
    background-color: #fff;
    display: inline-block;
    line-break: auto;
    /*border: 1px solid #000;*/
    border-radius: 50%;
    width: 45px;
    height: 45px;
    text-align: center;}
.media svg{
    width: 25px;
    height: 25px;
    margin-top: 10px;
}
.follow p{
    margin-top: 15px;
    text-align: center;
    color: #79758A;
    font-size: 12px;
}
.hamburger {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    position: fixed;
    z-index: 19;
    top: 20px;
    right: 20px;
    background: #FFF;
}
.hamburger_bar {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: 2px;
    width: 45%;
    backgroud-clip: padding-box;
    background: #000;
    -webkit-transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1);
    transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}
.hamburger_bar:nth-child(1) {
    -webkit-transform: translate(-50%, calc(-50% - 8px));
    transform: translate(-50%, calc(-50% - 8px));
}
.hamburger_bar:last-child {
    -webkit-transform: translate(-50%, calc(-50% + 8px));
    transform: translate(-50%, calc(-50% + 8px));
}
.hamburger.active .hamburger_bar {
    background: #000;
}
.hamburger.active .hamburger_bar:nth-child(1) {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}
.hamburger.active .hamburger_bar:nth-child(2) {
    opacity: 0;
}
.hamburger.active .hamburger_bar:nth-child(3) {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
}

@media screen and (min-width: 320px) and (max-width: 730px) {
body {/*
    background-color: #fab8ba;*/
    overflow-x: auto;
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

#loader {
    left: 25%;
    top: 35%;
}
    @keyframes fly{
    0%{ left: 25%; transform: rotate(0deg); }
    15%{ transform: rotate(2deg)}
    35%{ transform: rotate(4deg)}
    55%{ transform: rotate(2deg)}
    75%{ left: 75%; opacity: 1; transform: rotate(3deg)}
    90%{ opacity: 0; left: 75%; transform: rotate(0deg)} 
    100%{ opacity: 0; left: 25%;} 
}
#loading {
	position: absolute;
	width: 170px;
	height: 20px;
    left: 25%;
	top: 55%;
	background-color: rgba(255,255,255,0.2);
}
.loading {
    width: 30%;
} 
.journey {
    position:absolute;
    top:0;
    left:0;
    height: 100vh;
    min-height: -webkit-fill-available;
    margin: 0;
    white-space: nowrap;
    display: flex;
}
.scenes { 
    height: 100vh;
    min-height: -webkit-fill-available;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    white-space: normal;
    letter-spacing: 1px;
}
.setoff {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: -webkit-fill-available;/* edit 100%
    background: #e1e1df;*/
}
.travel,.belmond,.sandiego,.argentina,.brazil,.peru   {
    width:  calc(100vw * 3.5);
    height: 100vh;
    min-height: -webkit-fill-available;/*
    height: 100%; 
    height: calc(var(--%, 1%) * 100);*/
 }
.travel > .introduction {
    font-size: 15.5px;
    bottom: 7%;
    letter-spacing: .2px;
}    
.illustration {
    left: 1.5%;
    bottom: 2%;
}
.belmond > .introduction {
    font-size: 15.5px;
    bottom: 7%;
    letter-spacing: .2px;
    left: 56%;
} 
.sandiego > .introduction {
    font-size: 15.5px;
    bottom: 7%;
    letter-spacing: .2px;
} 
.wallpaper {   
    bottom: 7.2%; 
    left: -1%;
}
.argentina > .introduction {
    font-size: 15.5px;
    bottom: 7%;
    letter-spacing: .2px;
}   
.brazil > .introduction {
    font-size: 15.5px;
    bottom: 7%;
    letter-spacing: .2px;
}  
.peru > .introduction {
    font-size: 15.5px;
    bottom: 7%;
    letter-spacing: .2px;
    left: 60%;
} 
.newarrival {
    left: 96.8%;
    bottom: 5%;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.1em;
    padding: 20px 4px 20px 8px;
}
.newarrivals {
    width: 43px;
    height: 125px;
    left: 96.6%;
    top: 55.4%;
}
.movingmouse {
    display: none;
}
#swipeleft a {
    display: inherit;
}
#swipeleft a span {
    display: inherit;
}
.nav {
    z-index: 17;
    -webkit-clip-path: circle(40% at calc(730px - -20px - 30px) calc(-20px + 30px));
    clip-path: circle(40% at calc(730px - -20px - 30px) calc(-20px + 30px));
    -webkit-transition: all 0.5s cubic-bezier(0.86 0, 0.07, 1);
    transition: all .5s cubic-bezier(0.86, 0, 0.07, 1);
}
.nav.active {
    top: -5%;
   -webkit-clip-path: circle(190% at 800px 10vh);
    clip-path: circle(190% at 800px 50vh);
}
.menu {
    padding: 1.6vh 3vw;
} 
.follow{
    background-color: #fce3dc;
    width: 100% ;
    /*height: 30%;*/
    position: fixed;
    padding: 5vh 0 5vh;
    bottom: 0;
    text-align: center;
}
.follow a{
    margin: 0 10px;
}
}
@media screen and (min-width: 319px) and (max-width: 320px) { 
.newarrival {
    left: 96.2%;
}
.newarrivals {
    left: 96.0%;
}
}