body {
top: -8px !important;
left: -8px !important;
width: 100%;
height: auto;
overflow-x: hidden;
overflow-y: auto;
background-color: white;
}

body {
background-image: url('');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

a, a:active, a:focus {
cursor: pointer;
  outline: 0;
  border: none;
  -moz-outline-style: none;
  text-decoration: none;
  color: black;
}

div {
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.principal {
display: flex;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: auto;
border-radius: 0%;
opacity: ;
z-index: 1;
display: flex;
flex-direction: column;
}

@media only screen and (max-height: 576px)
                   and (orientation: landscape){
                     .principal {
                       height: auto;
                     }
                   }

@media only screen and (orientation: portrait){
                     .principal {
                       height: auto;
                     }
                   }

.subprincipalextreme {
flex-direction: column;
position: relative;
width: 100%;
height: 500px;
z-index: 2;
}

.subprincipal {
flex-direction: column;
position: relative;
width: 100%;
height: 700px;
z-index: 2;
}

.pictlogo {
position: relative;
top: 53%;
left: 50%;
transform: translate(-50%,-50%);
width: 225px;
height: 225px;
background-image: url('../img/_9123489_logo.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
opacity: 0.85;
z-index: 9;
}

@media only screen and (max-height: 576px)
                   and (orientation: landscape) {
                     .pictlogo {
                       top: 37%;
                       left: 50%;
                       transform: translate(-50%,-50%);
                     }
                   }

@media only screen and (orientation: portrait) {
                  .pictlogo {
                    top: 46%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                  }
}

.pictyou {
position: relative;
top: 42%;
left: 50%;
transform: translate(-50%,-50%);
width: 225px;
height: 225px;
border-radius: 350px;
background-image: url('../img/_9123490_mod.jpg');
background-position: 30% 5%;
background-size: cover;
background-repeat: no-repeat;
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
background-color: ;
opacity: 0.85;
z-index: 9;
}

@media only screen and (max-height: 576px)
                   and (orientation: landscape) {
                     .pictyou {
                       top: 54%;
                       left: 50%;
                       transform: translate(-50%,-50%);
                       width: 200px;
                       height: 200px;
                     }
                   }

@media only screen and (orientation: portrait) {
                   .pictyou {
                     top: 46%;
                     left: 50%;
                     transform: translate(-50%,-50%);
                     width: 245px;
                     height: 245px;
                   }
                 }


.feight {
  position: absolute;
  top: 39px;
  left:61px;
  width: 37px;
  height: 37px;
  background: white;
  border-radius: 30px;
  z-index: 9;
  opacity: 0;
}

.effct {
  animation: innout .3s ease-in forwards;
}

@keyframes innout {
  0%   {opacity:0;}
  20% {opacity:.4;}
  100% {opacity:0;}
}

@media only screen and (max-height: 576px)
                   and (orientation: landscape) {
                     .feight {
                       top: 29px;
                       left:49px;
                     }
                   }

@media only screen and (orientation: portrait) {
                   .feight {
                     top: 44px;
                     left:71px;
                   }
                 }

.text-wrapper {
position: relative;
top: 38%;
left: 50%;
transform: translate(-50%,-50%);
width: 90%;
height: 90%;
}

@media only screen and (max-height: 576px)
                   and (orientation: landscape) {
                     .text-wrapper {
                       border: 1px solid lightgrey;
                       border-radius: 10px;
                     }
}

@media only screen and (orientation: portrait) {
                     .text-wrapper {
                       border: 1px solid lightgrey;
                       border-radius: 10px;
                     }
}

.textintro {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 92%;
font-family: Gill Sans, sans-serif;
font-size: 30px;
font-weight: 500;
vertical-align: middle;
text-align: center;
text-justify: inter-word;
line-height: 175%;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
background-color: white;
color: grey;
opacity: 0.85;
z-index: 8;
overflow-x: hidden;
overflow-y: auto;
}

@media only screen and (max-height: 576px)
                   and (orientation: landscape) {
                     .textintro {
                       width: 92%;
                       font-size: 30px;
                     }
}

@media only screen and (orientation: portrait) {
                     .textintro {
                       width: 96%;
                       font-size: 30px;
                     }
}

.ftr {
position: -webkit-sticky;
position: sticky;
top: 97%;
left: 0%;
width: 100%;
height: 3%;
font-family: Gill Sans, sans-serif;
font-size: 1vw;
font-weight: 500;
vertical-align: middle;
text-align: center;
text-justify: inter-word;
line-height: 175%;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
background: white;
color: grey;
z-index: 9;
}

@media only screen and (orientation: portrait) {
  .ftr {
    font-size: 11px;
  }
}

#translate_element {
  position: relative;
  top: 105%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 80px;
  background: lightgrey;
  z-index: 9;
}

@media only screen and (max-height: 576px)
                   and (orientation: landscape) {
                     #translate_element {
                       top: 116%;
                     }
}

@media only screen and (orientation: portrait) {
                      #translate_element {
                        top: 113.5%;
                     }
}

.hidden, .butthidden {
  display: none;
}

.active {
  display: block;
  opacity: 0;
  animation: inn .3s ease-in .1s forwards;
}

@keyframes inn {
  0%   {opacity:0;}
  100% {opacity:1;}
}

.inactive {
  opacity: 0;
  animation: outt .3s ease-out forwards;
}

@keyframes outt {
  0%   {opacity:1;}
  100% {opacity:0;display:none;}
}

.button {
  position: absolute;
  top:5px;
  left:19px;
  font-family: Helvetica, sans-serif;
  font-weight: 500;
  color: grey;
  cursor: pointer;
}

@media only screen and (max-height: 576px)
                   and (orientation: landscape) {
                     .button {
                       top:0px;
                       left:21px;
                     }
}

@media only screen and (orientation: portrait) {
                      .button {
                        top:0px;
                        left:21px;
                     }
}