@import url("fonts.css");
/*MINIMAL RESET*/
html,body,div,span,button,h1,h2,h3,h4,p,a,ul,li,form,footer {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
cursor: none; 
font:inherit;
vertical-align:baseline;
}

* {cursor: none!important;
  margin: 0; 
  padding: 0; }
button:focus{
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}
input, textarea, select, button {
font-family: 'Arial';
}
ol,ul {
list-style:none;
}

::selection {
background:transparent;
/* WebKit/Blink Browsers */
}

/* hide scrollbar but allow scrolling */
body {
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll; 
}

body::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}

 .mailform ::selection{
  background-color: black;
}
 .yellowed .mailform ::selection{
  color: yellow;
}
 .greened .mailform ::selection{
  color:rgb(63,255,51)
}
 .purpled .mailform ::selection, .blued .mailform ::selection{
color:rgb(140,0,234);
background-color: white;}
.purpled #response,.blued #response{
  color: white!important;
}
#fourth .container-bottom{
  margin-top:3vh;
}



::-moz-selection {
background:transparent;
/* Gecko Browsers */
}
#pic1{
  position: absolute;
  z-index:9999999999;
text-align: left;
}
#pic1{
top: 20vh;
    left: 25vw;
}

#pic1 img{
    max-width: 67%;
    min-width: 200px;
}

#pic1 p, #pic1 p a{
 font-size:2vh;
}


#pic1b{
  position: absolute;
  z-index:19999999999;
text-align: left;
}
#pic1b{
top: 35vh;
    left: 55vw;
}

#pic1b img{
    max-width: 55%;
    min-width: 200px;
}

#pic1b p{
 font-size:2vh;
}




.holder{
    position: absolute;
    width: 50vw;
    left: 50%;
    top: 50%;
    height: 50vh;
    transform: translate(-50%,-50%);
}
#pic2{
  display:none;
    position: absolute;
  z-index:9999999999;
text-align: center;
}

#pic2 img{
    max-width: 80%;
    min-width: 120px;

}



/*TYPOGRAPHY*/
/*@font-face {
font-family:GraphikRegular;
src:url(fonts/Graphik-Regular.otf) format(opentype);
font-weight:400;
font-style:normal;
}

@font-face {
font-family:GraphikMedium;
src:url(fonts/Graphik-Medium.otf) format(opentype);
font-style:normal;
}

@font-face {
font-family:GraphikSemibold;
src:url(fonts/Graphik-Semibold.otf) format(opentype);
font-weight:400;
font-style:normal;
}*/

/*GENERAL LAYOUT STYLES*/


body {
height:100vh;
margin:0;
font-family:'GOJogging Slow', Helvetica;
line-height:1;
overflow:hidden;
     cursor: none;
background-color:#FFF;
}

body,html {
position:fixed;
overflow-y:hidden;
overflow-x:hidden;
height:100%;
width:100%;
cursor: none;
margin:0;
padding:0;
/*cursor: url(img/arrow-pointer.png), auto;
*/
/*    -webkit-font-smoothing: antialiased !important;
     text-shadow: 1px 1px 1px rgba(0,0,0,0.004);*/
}

img {
max-width:100%;
}

h1 {
text-align:center;
font-size:6vh;
}

p,a,ul,li,ul li,h2 {
color:#000;
font-size:2.8vh;
line-height:150%;
letter-spacing: 0.02em;
}
.sub-container{
  padding-top:6vh;
}
.emoji{
    font-size: 8.5vh;
    line-height: 0%;
    padding-left: 17vw;
    padding-top: 2vw;
}
input[type="submit"]{
  background: none;
    font-size: 4.5vw;
    border: none;
    margin-top: 3.5vh;
}
.purpled input[type="submit"],.blued input[type="submit"]{
  color: white;
}
input[type="submit"]:focus{
  outline:0!important;
}
.purpled input[type="text"],.blued input[type="text"]{
        border-bottom:2px solid white;
        color:white!important;
}
input[type="text"]{
  background: transparent;
  outline: 0;
 font-size: 4.5vw;
   text-align:center;
padding-bottom: 2vw;
    border:none;
    border-bottom:2px solid black;
    width: 100%;
}



.yellowed input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px rgb(255,255,0) inset !important;
}
.purpled input:-webkit-autofill,.blued input:-webkit-autofill {
      -webkit-text-fill-color: white!important;

    -webkit-box-shadow: 0 0 0 1000px rgb(140,0,234) inset !important;
}
.greened input:-webkit-autofill {

    -webkit-box-shadow: 0 0 0 1000px rgb(63,255,51) inset !important;
}
#response{
  margin-top: 3.5vh;
  font-size: 4.5vw;
}
/*#third p,#third a,#third ul,#third li,#third ul li,#third h2, #fourth p,#fourth a,#fourth ul,#fourth li,#fourth ul li,#fourth h2 {
color:#FFF;
}*/
#third object, #third svg{
      width: 30vh;
}
a{
    text-decoration: none;
}
h2 {
margin-bottom:3vh;
}
.fake{
    float:none;
}
#main {
height:100vh;
display:block;
cursor:none;
}
#main:hover, body:hover,html:hover{
  cursor:none;
}
.subr{
    text-decoration: underline;
}
.lateral-r {
display:block;
    height: 72%;
    width: 10%;
left:0;
position:absolute;
z-index:999!important;
overflow: hidden!important;

}

.lateral-l {
display:block;
height:100%;
width:10%;
float:right;
right:0;
top: 15%;
position:absolute;
overflow: hidden!important;
z-index:999!important;
}
.lateral-under{
display:block;
height:80%;
width:20%;
float:right;
right:0;
top: 0%;
position:absolute;
overflow: hidden!important;
z-index:99!important;
}
.lateral-b {
    display: block;
    height: 22%;
    width: 84%;
    float: left;
    /* top: 0; */
    bottom: 0;
    left: 0;
    overflow: hidden!important;
    position: fixed;
    z-index: 9999!important;
}
.lateral-b:hover, .lateral-l:hover,.lateral-r:hover{
/*cursor: pointer;*/
}
section {
position:absolute;
width:100%;
height:100%;
/*overflow-y:hidden;
*/     cursor: none;

overflow-x:hidden;
-webkit-backface-visibility: hidden!important;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
}
.notransition {

}
/*section{
    cursor:pointer;
}*/
section svg {
pointer-events:none;
opacity: 1;
}
.scrollable {
overflow:auto!important;
-webkit-overflow-scrolling: touch;
}

.scrollable .wrapper {
-webkit-transform:translate3d(0,0%,0)!important;
transform:translate3d(0,0%,0)!important;
}

section::-webkit-scrollbar {
width:0!important;
}

section {
-ms-overflow-style:none;
}

fieldset{
  border:none!important;
}
.mailform{
  display: none;
  position: fixed;
  width: 50vw;
  height: 40vh;
  text-align: center;
  top: calc(50% - 20vh);
  left: calc(50% - 25vw);
  z-index: 9999999999;

}
.table-dis{
  display: table!important;
}
#addressForm{
      vertical-align: middle;
    display: table-cell;
}
.path { transition:all 1s linear;}
.path-animation {
     stroke-dasharray: 2000;
     stroke-dashoffset: 2000;
     stroke-width:4px;
     -webkit-animation: dash 1.5s linear 1;
     -moz-animation: dash 1.5s linear 1;
     -o-animation: dash 1.5s linear 1;
     animation: dash 1.5s linear 1;
}
.show-arr{
  transition:1s all ease-in-out;
  opacity: 1;
  fill:#FFFFFF;
  transform:rotate(0deg) translate(0);
}

.show{
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 10;
    stroke-miterlimit: 10;
    opacity: 1;

}

.spiral{
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation-fill-mode: forwards;
}
.short_spiral{
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation-fill-mode: forwards;
}
.second_spiral{
      -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation-fill-mode: forwards;
}
.not_dat_short_spiral{
      -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation-fill-mode: forwards;
}
.second_spiral_animation{
      -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation-fill-mode: forwards;
   -webkit-animation: blopSecond 1s linear;
   -moz-animation: blopSecond 1s linear;
   -o-animation: blopSecond 1s linear;
   animation: blopSecond 1s linear;
     animation-iteration-count: 1;
     stroke-width:4px;
}
.short_spiral_animation{
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation-fill-mode: forwards;
   -webkit-animation: blopFirst 1s linear;
   -moz-animation: blopFirst 1s linear;
   -o-animation: blopFirst 1s linear;
   animation: blopFirst 1s linear;
     animation-iteration-count: 1;
}
.spiral-animation{

   -webkit-animation: blop 1s linear;
   -moz-animation: blop 1s linear;
   -o-animation: blop 1s linear;
   animation: blop 1s linear;
     animation-iteration-count: 1;
         -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation-fill-mode: forwards;
}

.not_dat_short_spiral_animation{
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
    animation-fill-mode: forwards;
   -webkit-animation: blopLast 1s linear;
   -moz-animation: blopLast 1s linear;
   -o-animation: blopLast 1s linear;
   animation: blopLast 1s linear;
     animation-iteration-count: 1;
}

/*.first_thick{
    animation-delay: 0s, 0s;
      -moz-animation-delay: 0s, 0s;
      -webkit-animation-delay: 0s, 0s;
      -o-animation-delay: 0s, 0s;
}*/

[alt~="first_thick"] {
    stroke-dasharray: 147.7753601;
    stroke-dashoffset: 147.7753601;
    animation-duration: 0.25s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

[alt~="second_thick"] {
    stroke-dasharray: 820.22088623046884;
    stroke-dashoffset: 820.52088623046884;
    animation-duration: .5s;
    -webkit-animation-delay: .25s;
    animation-delay: .25s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

[alt~="third_thick"] {
    stroke-dasharray: 819.90460205078123;
    stroke-dashoffset: 819.90460205078123;
    animation-duration: .5s;
    -webkit-animation-delay: 0.75s;
    animation-delay: 0.75s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

[alt~="fourth_thick"] {
    stroke-dasharray: 820.5085449218754;
    stroke-dashoffset: 820.5085449218754;
    animation-duration: .5s;
    -webkit-animation-delay: 1.25s;
    animation-delay: 1.25s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

[alt~="fifth_thick"] {
    stroke-dasharray: 218.459945678710945;
    stroke-dashoffset:218.459945678710945;
    animation-duration: .25s;
    -webkit-animation-delay: 1.75s;
    animation-delay: 1.75s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}








/*.second_thick{
    animation-delay: 0s, 2s;
      -moz-animation-delay: 0s, 2s;
      -webkit-animation-delay: 0s, 2s;
      -o-animation-delay: 0s, 2s;
}*/
@-webkit-keyframes dash{
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 1000;
  }
}
@-moz-keyframes dash{
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 1000;
  }
}
@-o-keyframes dash{
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 1000;
  }
}
@keyframes dash {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 1000;
  }
}




@-webkit-keyframes blop {
  from {
    stroke-dashoffset: 820.5085449218754;
  }
  to {
    stroke-dashoffset: 1640.01709;
  }

}@-moz-@keyframes blop {

    from {
    stroke-dashoffset: 820.5085449218754;
  }
  to {
    stroke-dashoffset: 1640.01709;
  }
}@-o-@keyframes blop {

  from {
    stroke-dashoffset: 820.5085449218754;
  }
  to {
    stroke-dashoffset: 1640.01709;
  }
}@keyframes blop {

   from {
    stroke-dashoffset: 820.5085449218754;
  }
  to {
    stroke-dashoffset: 1640.01709;
  }

}

@-webkit-keyframes blopSecond {
  from {
    stroke-dashoffset: 820.22088623046884;
  }
  to {
    stroke-dashoffset: 1640.44177246093768;
  }

}@-moz-@keyframes blopSecond {

    from {
    stroke-dashoffset:820.22088623046884;
  }
  to {
    stroke-dashoffset: 1640.44177246093768;
  }
}@-o-@keyframes blopSecond {

  from {
    stroke-dashoffset: 820.22088623046884;
  }
  to {
    stroke-dashoffset: 1640.44177246093768;
  }
}@keyframes blopSecond {

   from {
    stroke-dashoffset:820.22088623046884;
  }
  to {
    stroke-dashoffset: 1640.44177246093768;
  }

}



@-webkit-keyframes blopFirst {
  from {
    stroke-dashoffset: 147.7753601;
  }
  to {
    stroke-dashoffset: 295.5507202;
  }

}@-moz-@keyframes blopFirst {

    from {
    stroke-dashoffset: 147.7753601;
  }
  to {
    stroke-dashoffset: 295.5507202;
  }
}@-o-@keyframes blopFirst {

  from {
    stroke-dashoffset: 147.7753601;
  }
  to {
    stroke-dashoffset: 295.5507202;
  }
}
@keyframes blopFirst {

   from {
    stroke-dashoffset: 147.7753601;
  }
  to {
    stroke-dashoffset: 295.5507202;
  }

}




@-webkit-keyframes blopLast {
  from {
    stroke-dashoffset: 218.459945678710945;
  }
  to {
    stroke-dashoffset: 436.91989135742189;
  }

}@-moz-@keyframes blopLast {

    from {
    stroke-dashoffset: 218.459945678710945;
  }
  to {
    stroke-dashoffset: 436.91989135742189;
  }
}@-o-@keyframes blopLast {

  from {
    stroke-dashoffset: 218.459945678710945;
  }
  to {
    stroke-dashoffset: 436.91989135742189;
  }
}@keyframes blopLast {

   from {
    stroke-dashoffset: 218.459945678710945;
  }
  to {
    stroke-dashoffset: 436.91989135742189;
  }

}




/*@-webkit-keyframes another-animation {

0% {transform: rotateX(0)  translateY(0);stroke-dashoffset:2820; stroke-dasharray: 2820;opacity: 1;}
  50% { transform:rotateX(22deg)  translateY(0);stroke-dashoffset: 0; stroke-dasharray: 2820;opacity: 1;}
  100% { transform:rotateX(0)  translateY(0);stroke-dashoffset: 0; stroke-dasharray: 2820;opacity: 1;}

}@-moz-@keyframes another-animation {

0% {transform: rotateX(0)  translateY(0);stroke-dashoffset:2820; stroke-dasharray: 2820;opacity: 1;}
  50% { transform:rotateX(22deg)  translateY(0);stroke-dashoffset: 0; stroke-dasharray: 2820;opacity: 1;}
  100% { transform:rotateX(0)  translateY(0);stroke-dashoffset: 0; stroke-dasharray: 2820;opacity: 1;}

}@-o-@keyframes another-animation {

0% {transform: rotateX(0)  translateY(0);stroke-dashoffset:2820; stroke-dasharray: 2820;opacity: 1;}
  50% { transform:rotateX(22deg)  translateY(0);stroke-dashoffset: 0; stroke-dasharray: 2820;opacity: 1;}
  100% { transform:rotateX(0)  translateY(0);stroke-dashoffset: 0; stroke-dasharray: 2820;opacity: 1;}

}@keyframes another-animation {

0% {transform: rotateX(0)  translateY(0);stroke-dashoffset:2820; stroke-dasharray: 2820;opacity: 1;}
  50% { transform:rotateX(22deg)  translateY(0);stroke-dashoffset: 0; stroke-dasharray: 2820;opacity: 1;}
  100% { transform:rotateX(0)  translateY(0);stroke-dashoffset: 0; stroke-dasharray: 2820;opacity: 1;}

}*/

.close_button {
float:right;
z-index:999999999999;
position:absolute;
top:0;
left:0;
width:100%;
height:8vh;
}

.close_button img {
display:none;
position:absolute;
top:2vh;
right:2vh;
z-index:99999999;
}

.invert {
filter:invert(100%)!important;
}

.close_button.invert {
filter:none!important;
}


.wrapper {
    opacity: 1;
}

.container {
max-width:100vh;
}

.img-container {
display:block;
text-align:center;
margin:6vh auto;
}

#first .img-container {
text-align:center;
margin-top: 0;
}
#third .img-container{
    margin:3vh 0 auto;
}
#second .img-container {
text-align:left;
margin:3vh 0 0 0;
}

#second .page_image {position: absolute;right: 0;width: 350px;top: 100px;display:none;}
#first .page_image {position: absolute;right: 0;width: 350px;bottom: 50px;display:none;}
#third .page_image {position: absolute;right: 0;width: 350px;bottom: 100px;display:none;}


object , svg{
width:50vh;
pointer-events:none;
}


.img-container img {
max-width:50vh;
}

#head {
position:absolute;
top:3vh;
z-index:99999999;
width:100vw;
pointer-events:none;
}

#foot {
position:absolute;
bottom:3vh;
z-index:9999;
width:100vw;
left:calc(50vw-50vw);
pointer-events:none;
}

#foot h1 {
pointer-events:none;
}

#first,#second,#third,#fourth{overflow:hidden;}

.inactive {
pointer-events:none!important;
overflow:hidden!important;
overflow-y:hidden!important;
z-index: 9;
transform: translate(0,0);
}

.left {
/*
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);*/
-webkit-animation:orbitNavy 50s ease-in-out infinite;
/* Chrome, Safari 5 */
-moz-animation:orbitNavy 50s ease-in-out infinite;
/* Firefox 5-15 */
-o-animation:orbitNavy 50s ease-in-out infinite;
/* Opera 12+ */
animation:orbitNavy 50s ease-in-out infinite;
/* Chrome, Firefox 16+, IE 10+, Safari 5 */
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate, reverse, normal;
    animation-timing-function: ease-in-out;
    animation-direction: alternate, reverse, normal;
    z-index:9;
}

.bottom {
/*    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);*/
-webkit-animation:orbitAqua 52s ease-in-out infinite;
/* Chrome, Safari 5 */
-moz-animation:orbitAqua 52s ease-in-out infinite;
/* Firefox 5-15 */
-o-animation:orbitAqua 52s ease-in-out infinite;
/* Opera 12+ */
animation:orbitAqua 52s ease-in-out infinite;
/* Chrome, Firefox 16+, IE 10+, Safari 5 */
/*    animation-direction: alternate;
*/
/*animation-delay: 1s;*/
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate, reverse, normal;
        animation-timing-function: ease-in-out;
    animation-direction: alternate, reverse, normal;
        z-index:99;

}

.right {
/*    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);*/
-webkit-animation:orbitRed 54s ease-in-out infinite;
/* Chrome, Safari 5 */
-moz-animation:orbitRed 54s ease-in-out infinite;
/* Firefox 5-15 */
-o-animation:orbitRed 54s ease-in-out infinite;
/* Opera 12+ */
animation:orbitRed 54s ease-in-out infinite;
/* Chrome, Firefox 16+, IE 10+, Safari 5 */
/*        animation-delay: 0.5s;
*/
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate, reverse, normal;
        animation-timing-function: ease-in-out;
    animation-direction: alternate, reverse, normal;
        z-index:9;
}
.right2 {
/*    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);*/
-webkit-animation:orbitRed-d 56s ease-in-out infinite;
/* Chrome, Safari 5 */
-moz-animation:orbitRed-d 56s ease-in-out infinite;
/* Firefox 5-15 */
-o-animation:orbitRed-d 56s ease-in-out infinite;
/* Opera 12+ */
animation:orbitRed-d 56s ease-in-out infinite;
/* Chrome, Firefox 16+, IE 10+, Safari 5 */
/*        animation-delay: 0.5s;
*/
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate, reverse, normal;
        animation-timing-function: ease-in-out;
    animation-direction: alternate, reverse, normal;
        z-index:9;
}

#first {
position:absolute;
right:20vw;
/*top:85vh;
*/
top:125vh;
background-color:#FFFFFF;
background-image: linear-gradient(to right, #f2ead5 , #f3e6d7,#f6d8ea);
z-index:999;
}
.title_id_first{
    position: absolute;
top: 19px;
right: 79px;
color: #FFF;
font-weight: bold;
}
#second {
right:120vw;/*
right:90vw;
*/
top:-30vh;
position:absolute;
background-color:#FFFFFF;
background-image: linear-gradient(to right, #f2e9d3 , #efff67);
z-index:9;
}
.title_id_second{
    transform: rotate(-90deg);
    display: inline-block;
    position: absolute;
    top: 43%;
    right: -2.2rem;
    /*top: 338px;
    right: -20px;*/
    color: #FFF;
}
#third {
/*right:-90vw;
*/
right: -120vw;
top:20vh;
position:absolute;
background-color:#FFFFFF;
background-image: linear-gradient(to right, #3c909b , #fcfdfe);
z-index:99;
}
.title_id_third{
position: absolute;
top: 12px;
left: 28px;
color: #FFF;
font-weight: bold;
}
#fourth{
right:-120vw;
top:-20%;
position:absolute;
background-color:#FFFFFF;
/*background-image: linear-gradient(to right, #f09b9a , #ef4960);*/
background-image: linear-gradient(90deg, #f09b9a 0%, #ef4960 30%, #FFF 30%);
z-index:9;
background-color:blue;
}
.title_id_fourth{
position: absolute;
top: 29%;
left: 0;
/*top: 235;
left: -12px;*/
color: #FFF;
font-weight: bold;
transform: rotate(-90deg);
}
.active .title_id_fourth{left:-1.2rem;}
.no-translate {
transform:translate(0px,0px)!important;
}

.vio {
}

.green {
}

.yel {
}

.lil-move-b{
transition: top .5s ease-in-out;
top:75vh!important;
}
.lil-move-r{
transition: right .5s ease-in-out;
right:80vw!important;
}
.lil-move-l{
transition: right .5s ease-in-out;
right:-80vw!important;
}
.centered {
      transition: top 1s ease-in-out, right 1s ease-in-out, bottom 1s ease-in-out, left 1s ease-in-out, transform 1s ease-in-out;

top:0!important;
bottom:0!important;
right:0!important;
z-index: 999999999!important;
}
.centered-left{
      transition: top 1s ease-in-out, right 1s ease-in-out, bottom 1s ease-in-out, left 1s ease-in-out, transform 1s ease-in-out;

top:0!important;
left:0!important;
z-index: 999999!important;
}


.design{
transform:translate(-180vh,0);
}
.lateral{
transform:translate(0vh,-180vh);

}
.vida{
transform:translate(0,0vh);

}
.finish{
transform:translate(0vh,0vh);
}
.draggable {
z-index:1;
}

.draggin {
/*cursor:move; cursor:-webkit-grab; cursor:-moz-grab; cursor:grab;
*/z-index:99999!important;

}
.on-drag #head{
top:0vh;
padding:1.5vh;
}
.on-drag #head h1{
    font-size: 3.2vh;
}
/*.purpled #head h1,.blued #head h1{
color:white;
}*/
/*.purpled #head,.blued #head,.yellowed #head,.greened #head{z-index: 9!important}
*//*.purpled #head{
    background:violet;
}
.yellowed #head{
    background:yellow;
}
.greened #head{
    background:#6ebe44;
}*/
.column {
position:relative;
}

.column p,.column ul {
padding:3vh 0 0;
}
.column ul{
    list-style:revert;
}

.column p:first-of-type {
padding:0;
}

/*#third .container-bottom, #fourth .container-bottom  {
border-color:#FFF;
}*/

.column-bottom p {
padding:2vh;
}




p,a,ul,li,ul li,h2 {
font-size:2.0vh;
font-weight: normal;
}

.container {
max-width:60vw;
}

#first .img-container {
text-align:left;
}

.close_button img {
display:none;
pointer-events:none;
position:absolute;
top:2vh;
right:3vh;
z-index:99999999;
}

.column-left {
float:left;
width:55vh;
margin:6vh;
}

#second .column-left{
    width: 51vh;
}
#first .column-left {
float:left;
width:51vh;
margin:6vh;
}

.column-right {
float:left;
width:53vh;
margin:6vh;
}
#first .column-right{
    margin-bottom: 0;
}

.container-bottom {
padding:3vh;
/*border:.3vh solid #000;*/
margin:0 6vh 6vh;
float:left;
width:auto;
max-width:110vh;
clear:left;
}

#second.centered .container-bottom {
text-align:left;
float:left;
display: flex;
width:auto
}

@media(min-width:768px){
    #second.centered .container-bottom {width:100%;}   
}

#second.centered .container-bottom div{flex-basis:50%;}

#third .column-left {
margin:6vh 6vh 3vh;
width: 53vh;
}
#third .column-right{
    width: 53vh;
}

@media (max-width: 992px){
body{background-image:none!important;}
#fourth .wrapper {
  padding-left: 30px;
}
  .emoji {
    font-size: 5vh;
    line-height: 160%;
    padding-left: 24vw;
}
section{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.close_button.inactive{
  display: none;

}
#fourth .column-bottom{
  margin-top:3vh;
}

.lil-move-b{
transition: top .5s ease-in-out;
top:70vh!important;
}
.lil-move-r{
transition: right .5s ease-in-out;
right:70vw!important;
}
.lil-move-l{
transition: right .5s ease-in-out;
right:-70vw!important;
}
.centered{
      transition: top 1s ease-in-out, right 1s ease-in-out, bottom 1s ease-in-out, left 1s ease-in-out, transform 1s ease-in-out;

top:0!important;
bottom:0!important;
right:0!important;
z-index: 999999999!important;
}

#cursor{
  display: none;
  max-width: 5vw!important; 
}
#grabber{
  max-width: 5vw!important;
}
.fake{
    float:right;
}
.mailform{

    width: auto;
    height: 30vh;
    padding: 10vh;

    top: calc(50% - 20vh);
     left: auto; 
    z-index: 9999999999;
}
.lateral-l{
      height: 81%;
      width: 30%;
}
.lateral-r {
display:block;
    height: 72%;
    width:30%;
left:0;
position:absolute;
z-index:999999;
overflow: hidden!important;

}
.lateral-under{

width:45%;

}
input[type="submit"],input[type="text"]{
  font-size: 7vw;
}
.wrapper{
padding-top: 3vh;
opacity: 0;
}
.no-translate .wrapper{
    opacity: 1;
}
#second {
right:125vw;
}

#third {
right:-125vw;
top:20vh;
z-index:99;
}

#first {
top:120vh;
}

.centered .wrapper{
opacity: 1!important;
}
/*.centered{
  overflow: scroll!important;
}*/
.column-left ,.column-right{
display: inline-block;
float:left;
width:auto;
margin:3vh;
}

#second .column-left{
    width: auto;
}
.column-bottom {
float:none;
width:auto;
margin:0;
}
#first .column-left,
#first .column-right{
display: inline-block;
float:none;
width:auto;
margin:3vh;
}

#first .column-right{
    margin: 0 3vh 3vh;
    width: 100%;
}
#first .img-container{
    margin: 3vh;
}
#third .column-left, #third .column-right{
    margin: 3vh 3vh 0 3vh;
    width: auto;
}
.container {
max-width:none;
}

.container-bottom {
margin:3vh;
}
#third .container-bottom{
    /*border:0.4vh solid white;*/
}
.img-container {
margin:0 auto;
text-align:left;
}

object , svg{
margin:6vh 0 3vh;
width:100%;
}
.on-drag #head{
    width: 70vw;
    left:calc(50vw - 35vw);
}

}
.buttonBorder{text-transform: uppercase;border:.3vh solid #000;padding:5px 10px;margin:0 10px;}
@media (max-width: 500px){
.title_id_fourth {
  left: -30px;
}
p,a,li,span,ul li,h2{
    font-size: 6vw;
    line-height:120%;
}
/*.container-bottom{
    border:0.8vw solid black;
}*/
.on-drag #head h1{
    font-size: 6vw;
}
}


@media (max-height: 468px){
.fake{
    float:left;
}
p,a,ul,li,ul li,h2 {
color:#000;
font-size:2.8vh;
line-height:120%;
}
.column-left , .column-right,#first .column-right,#first .column-left,#third .column-left, #third .column-right{
width: 50vh;
float: left;
}
#second {
right:125vw;
}
#third {
right:-125vw;
top:20vh;
z-index:99;
}
#first {
top:120vh;
}

}


/**/
svg g{transition:all 1s  ease-in-out;}
.translate{
  transform: translateZ(0);
    transition: top 1s ease-in-out, right 1s ease-in-out, bottom 1s ease-in-out, left 1s ease-in-out, transform 1s ease-in-out;
/*      transition-timing-function: cubic-bezier(.33,.56,.77,.56);
*/

}
#head.visual,#head.visual h1{
    z-index: 999999999999!important;
}
.touchevents #dragger, .touchevents #cursor{
display: none!important;
opacity: 0!important;
}
/*@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) {

.container{
    max-width: none;
}
.column-right, .column-left,#third .column-right, #third .column-left,#first .column-left,#first .column-right{
    width: auto;
}
#first {
right:20vw;
}

#second {
right:120vw;
}

#third {
right:-120vw;
}
}
*/
/*ANIMATION NAVY*/

    @-webkit-keyframes orbitNavy {
    0% { -webkit-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    25%   { -webkit-transform: rotate(-420deg) translate(1.5vh,-1.5vh) rotate(420deg); }    
    50% {-webkit-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    75% { -webkit-transform: rotate(420deg) translate(1.5vh,-1.5vh) rotate(-420deg); }
    100%   { -webkit-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
}

    @-moz-keyframes orbitNavy {
    0% { -moz-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    25%   { -moz-transform: rotate(-420deg) translate(1.5vh,-1.5vh) rotate(420deg); }    
    50% {-moz-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    75% { -moz-transform: rotate(-420deg) translate(1.5vh,-1.5vh) rotate(-420deg); }
    100%   { -moz-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
}

    @-o-keyframes orbitNavy {
    0% { -o-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    25%   { -o-transform: rotate(-420deg) translate(1.5vh,-1.5vh) rotate(420deg); }    
    50% { -o-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    75% { -o-transform: rotate(420deg) translate(1.5vh,-1.5vh) rotate(-420deg); }
    100%   { -o-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
}

    @keyframes orbitNavy {
    0% { transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    25%   { transform: rotate(-420deg) translate(1.5vh,-1.5vh) rotate(420deg); }    
    50% { transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    75% { transform: rotate(420deg) translate(1.5vh,-1.5vh) rotate(-420deg); }
    100%   { transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
}
/*ANIMATION RED*/

    @-webkit-keyframes orbitRed {
    0% { -webkit-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    25%   { -webkit-transform: rotate(-420deg) translate(1.5vh,-1.5vh) rotate(420deg); }    
    50% {-webkit-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    75% { -webkit-transform: rotate(420deg) translate(1.5vh,-1.5vh) rotate(-420deg); }
    100%   { -webkit-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
}

    @-moz-keyframes orbitRed {
    0% { -moz-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    25%   { -moz-transform: rotate(-420deg) translate(1.5vh,-1.5vh) rotate(420deg); }    
    50% {-moz-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    75% { -moz-transform: rotate(420deg) translate(1.5vh,-1.5vh) rotate(-420deg); }
    100%   { -moz-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
}

    @-o-keyframes orbitRed {
    0% { -o-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    25%   { -o-transform: rotate(-420deg) translate(1.5vh,-1.5vh) rotate(420deg); }    
    50% { -o-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    75% { -o-transform: rotate(420deg) translate(1.5vh,-1.5vh) rotate(-420deg); }
    100%   { -o-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
}

    @keyframes orbitRed {
    0% { transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    25%   { transform: rotate(-420deg) translate(1.5vh,-1.5vh) rotate(420deg); }    
    50% { transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    75% { transform: rotate(420deg) translate(1.5vh,-1.5vh) rotate(-420deg); }
    100%   { transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
}

/*ANIMATION RED-d*/

    @-webkit-keyframes orbitRed-d {
    0% { -webkit-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    25%   { -webkit-transform: rotate(-420deg) translate(1.5vh,-1.5vh) rotate(420deg); }    
    50% {-webkit-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    75% { -webkit-transform: rotate(420deg) translate(1.5vh,-1.5vh) rotate(-420deg); }
    100%   { -webkit-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
}

    @-moz-keyframes orbitRed-d {
    0% { -moz-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    25%   { -moz-transform: rotate(-420deg) translate(1.5vh,-1.5vh) rotate(420deg); }    
    50% {-moz-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    75% { -moz-transform: rotate(420deg) translate(1.5vh,-1.5vh) rotate(-420deg); }
    100%   { -moz-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
}

    @-o-keyframes orbitRed-d {
    0% { -o-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    25%   { -o-transform: rotate(-420deg) translate(1.5vh,-1.5vh) rotate(420deg); }    
    50% { -o-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    75% { -o-transform: rotate(420deg) translate(1.5vh,-1.5vh) rotate(-420deg); }
    100%   { -o-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
}

    @keyframes orbitRed-d {
    0% { transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    25%   { transform: rotate(-420deg) translate(1.5vh,-1.5vh) rotate(420deg); }    
    50% { transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    75% { transform: rotate(420deg) translate(1.5vh,-1.5vh) rotate(-420deg); }
    100%   { transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
}



/*ANIMATION AQUA*/

    @-webkit-keyframes orbitAqua {
    0% { -webkit-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    25%   { -webkit-transform: rotate(-420deg) translate(1.5vh,-1.5vh) rotate(420deg); }    
    50% {-webkit-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    75% { -webkit-transform: rotate(420deg) translate(1.5vh,-1.5vh) rotate(-420deg); }
    100%   { -webkit-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
}

    @-moz-keyframes orbitAqua {
    0% { -moz-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    25%   { -moz-transform: rotate(-420deg) translate(1.5vh,-1.5vh) rotate(420deg); }    
    50% {-moz-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    75% { -moz-transform: rotate(420deg) translate(1.5vh,-1.5vh) rotate(-420deg); }
    100%   { -moz-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
}

    @-o-keyframes orbitAqua {
    0% { -o-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    25%   { -o-transform: rotate(-420deg) translate(1.5vh,-1.5vh) rotate(420deg); }    
    50% { -o-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    75% { -o-transform: rotate(420deg) translate(1.5vh,-1.5vh) rotate(-420deg); }
    100%   { -o-transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
}

    @keyframes orbitAqua {
    0% { transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    25%   { transform: rotate(420deg) translate(1.5vh,-1.5vh) rotate(-420deg); }    
    50% { transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
    75% { transform: rotate(-420deg) translate(1.5vh,-1.5vh) rotate(420deg); }
    100%   { transform: rotate(0deg) translate(1.5vh,-1.5vh) rotate(0deg); }
}

.column {
  display: none;
}
.centered .column {
  display: block;
}