/* START - MAIN LAYOUT SPLIT SCREEN */
.leftside, .rightside {
  height:50vh;
  width:100%;
}

@media screen and (min-width:768px) {
  .leftside, .rightside {
    height:100vh;
  }

}
/* 

.leftside {
  background-color: blueviolet;
} */
/* .animated {
  -webkit-animation-duration: 16s;animation-duration: 16s;
  -webkit-animation-fill-mode: both;animation-fill-mode: both;
}
  @-webkit-keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
  }
  @keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
  }

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
} */

.animated {
  -webkit-animation-duration: 0.5s;animation-duration: 0.5s;
  -webkit-animation-delay: 11s; animation-delay: 11s;
  
  -webkit-animation-fill-mode: both;animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;
}
  @-webkit-keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
  }
  @keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
  }

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}



.overlayRight {
  z-index: 4000;
  position: absolute;
  height:100%;
  width:50%;
  right:0px;
  background-size:55%;
  background-position: center;
  background-repeat: no-repeat;
  background-image:url(../../images/2002-2020.gif); */
}

@media screen and (max-width:768px){
  .overlayRight {
    height:50%;
    width:100%;
    bottom:0%;
    background-size:40%;
  }
}

@media screen and (max-height:500px){
  .overlayRight {
    background-size:25% !important;
  }
}
/* @media screen and (max-width:730px){
  .overlayRight {
    height:50%;
    width:100%;
    background-size:50%;
    background-position: center;
    background-repeat: no-repeat;
    background-image:url(../../images/2002-2020.gif);


  }
} */



/*  MAIN LAYOUT SPLIT SCREEN */




/* START SIZING OF DATE TOP AND BOTTOM  */
.overLiners {
  z-index:3020;
  position: absolute;
  left: 50%;
  margin-top: 60px;
  margin-left:-40px;
  text-align: center;
  color:white;
}
.overLiners.bottomLine{
  bottom:60px;
  margin-top:0px;
  color:white
}
@media screen and (max-width:736px){
  
  .overLiners {
    font-size: 0.7em;
  }
  .overLiners.bottomLine{
    font-size: 0.7em;
  }
}
@media screen and (max-width:736px){
  
  .overLiners {
    font-size: 0.5em;
    margin-top:30px;
    
  }
  .overLiners.bottomLine{
    font-size: 0.5em;
    bottom:20px;
  }
}

/* END SIZING OF DATE TOP AND BOTTOM  */


/*  START  - ICONS AND ICON CONTAINERS  */
@media screen and (min-width:1400px) {

    .iconContainer {
      z-index:4050;
      position:absolute;
      text-align:center;
      width:20%;
      padding-right:70px;
      right:0px; 
    }
    .iconSpacing {
      padding-top:60px;

    }
    
}
@media screen and (min-width:1200px) and (max-width:1400px){

    .iconContainer {
      z-index:4050;
      position:absolute;
      text-align:center;
      width:25%;
      padding-right:70px;
      right:0px; 
    }
    .iconSpacing {
      padding-top:60px;
    }
    
}

.iconAuto-smaller {
      height:20px !important;
      width:20px !important;
}
.iconAuto { 
      width:22px;
      height:22px;
}

@media only screen and (min-width : 1024px) and (max-width : 1200px) {
      .iconContainer {
        z-index:4050;
        position:absolute;
        text-align:center;
        display:block;
        width:15%;
        height:50%;
     

        right:0px;
        /* right:0px; */ 
        padding-top:30px;
      }
      .iconSpacing {
        width:100%;
      
      }
      
      .overlayRight {
        height:100%;
        width:50%;
        right:0px;
        background-size:65%;
        background-position: center;
        background-repeat: no-repeat;
      }
}

/* IPADS */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
      .iconContainer {
        z-index:4050;
        position:absolute;
        text-align:center;
        display:block;
        width:15%;
        height:50%;
     

        right:0px;
        /* right:0px; */ 
        padding-top:30px;
      }
      .iconSpacing {
        width:100%;
      
      }
      
      .overlayRight {
        height:100%;
        width:50%;
        right:0px;
        background-size:65%;
        background-position: center;
        background-repeat: no-repeat;
      }
}

@media only screen and (min-device-width : 600px) and (max-device-width:768px) {
      .iconContainer {
        z-index:4050;
        position:absolute;
        text-align:center;
        display:block;
        width:15%;
        height:50%;
     

        right:0px;
        /* right:0px; */ 
        padding-top:30px;
      }
      .iconSpacing {
        width:100%;
      
      }
      
  

}


/* Smartphones (landscape) ----------- */
@media only screen and (min-device-width : 321px) and (max-device-width:600px) {
    .iconContainer {
      z-index:4050;
      position:absolute;
      text-align:center;
      display:block;
      width:30%;
      height:50%;
    /*   padding-right:0px; */
      bottom:20px;
      right:0px;
      /* right:0px; */ 
      padding-top:60px;
    }
     .iconSpacing {
      padding-top:10%;
      padding-bottom:10%;
      
    }
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-device-width : 320px) {
    .iconContainer {
      z-index:4050;
      position:absolute;
      text-align:center;
      display:block;

      padding-top:40px;      
      bottom:0px;
      width:20%;
      height:50%;
      right:15px;

    }
    .iconSpacing {
      padding-top:20%;
      padding-bottom:20%;
    }

}




/* START - LOGO AND LOGO CONTAINERS */
.logoContainer {
  z-index:3060;
  width:50%;
  height:100%;
  position:absolute;
  background-image: url(../../images/P9_logotipo_semfundo_BW_02.png);
 /*  background-image: url(../../images/P9_Intro_Landing_Page.gif); */
  background-size: 70%;
  background-position: center;
  background-repeat:no-repeat;
}

@media screen and (max-width:736px)  {
  .logoContainer {
    width: 100%;
    height:50%;
    top:0%;
    background-position:center;
    background-size:50%;
   
  }
}
@media screen and (max-width:536px) {
  .logoContainer {
    top:0%;
    width: 100%;
    height:50%;
    background-size:70%;
  }
}
@media screen and (max-height:640){
  .logoContainer {
    background-size:50% !important;
  }


}