/*@import url(//db.onlinewebfonts.com/c/9da901e196707780c334810297496da1?family=TetriaLTW01-Regular);*/
/*@font-face {*/
/*    font-family: "TetriaLTW01-Regular";*/
/*    src: url("//db.onlinewebfonts.com/t/9da901e196707780c334810297496da1.eot");*/
/*    src: url("//db.onlinewebfonts.com/t/9da901e196707780c334810297496da1.eot?#iefix") format("embedded-opentype"), */
/*    url("//db.onlinewebfonts.com/t/9da901e196707780c334810297496da1.woff2") format("woff2"), */
/*    url("//db.onlinewebfonts.com/t/9da901e196707780c334810297496da1.woff") format("woff"), */
/*    url("//db.onlinewebfonts.com/t/9da901e196707780c334810297496da1.ttf") format("truetype"), */
/*    url("//db.onlinewebfonts.com/t/9da901e196707780c334810297496da1.svg#TetriaLTW01-Regular") format("svg"); */
/*}*/
@font-face {
    font-family: 'LinotypeTetriaRegular';
    src: url('lt_54531-webfont.eot');
    src: url('lt_54531-webfont.eot?#iefix') format('embedded-opentype'),
         url('lt_54531-webfont.woff') format('woff'),
         url('lt_54531-webfont.ttf') format('truetype'),
         url('lt_54531-webfont.svg#LinotypeTetriaRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
*{
    font-family: "LinotypeTetriaRegular";
    margin:0;
   overflow:hidden;
}
.mob_cinza{display:none;}
.mob_fichaamarela{display:none;}
.mob_brancoslogan{display:none;}
.mob_fichacinza{display:none;}
section{width: 100%;height:100vh;display: flex;}

.brancoSide{
    overflow:hidden;
  width: 50%;
  background:white;
  height: 100vh;
}

.logo{
  height: 193px;
  /* padding: 3rem; */
  animation: 1s ease-in 0s 1 logoOpacity;
}

.logo img{    
  padding: 3rem;
  width: 12%;
}
.FichaAmarela img{width: 100%;}

.FichaAmarela{
  width: 90%;
  animation: 2s ease-out 0s 1 slideInFromLeft;

  margin-top: 26%;
}
.SiteNovoHeader{
  margin-top: 5%;
  font-weight: 400;
  font-size: 3em;
  padding-left: 8rem;
  color: #8e8e91;
  line-height: 0.9;
  /* animation: 2s ease-out 0s 1 slideInFromLeft; */
}
.SiteNovoHeader h2 {font-size: 1.6em;
  font-weight: 400;}
/* Fim lado Esquerdo */

.AmareloSide{width:50%;background:#fdb827;height: 100vh; overflow:hidden;}

.HeadingInno{
  padding-top: 22%;
  font-weight: 400;
  font-size: 1.5em;
  padding-left: 6rem;
  color: white;
  line-height: 0.9;
  /* animation: 2s ease-out 0s 1 slideInFromRight; */
}

.HeadingInno h2{  font-weight: 400;}

.FichaCinza{
  width: 90%;
  animation: 2s ease-out 0s 1 slideInFromRight;
  
  margin-top: 14%;
  padding-left: 6rem;
}

.FichaCinza img {width: 100%;}

.socialHeader{
  margin-top: 5%;
  font-weight: 300;
  font-size: 1.5em;
  padding-left: 9rem;
  color: white;
  line-height: 0.9;
}

.socialBox{
  position: absolute;
    right: 4em;
    bottom: 2em;
  padding: 2em;
}

.iconSocial{
  width:30px;
  padding-left:1em;
  padding-top: 5%;
  
}

.iconSocial:hover{
  transform: scale(0.8);
  transition: linear 0.7s;
}

.iconMobile{
  width: 20px;
  
}

  @media screen and (min-width: 1280px) and (max-height: 1080px){
    .FichaAmarela{margin-top: 22.8%;}
  }

  @media screen and (min-width: 1024px) and (height: 850px){
    .FichaCinza{margin-top: 28%;}
    .logo img{    width: 20%;}
    .SiteNovoHeader h2{font-size:1em;}
    
  }

  @media screen and (min-width: 1280px) and (max-height: 900px){
    .FichaCinza{width:auto;margin-top: 16%;}

    .FichaAmarela {
      width: 90%;
      animation: 2s ease-out 0s 1 slideInFromLeft;
      margin-top: 16%;
    }
    .SiteNovoHeader {
      /* margin-top: 5%; */
      font-weight: 400;
      font-size: 2.3em;
      padding-left: 8rem;
      color: #8e8e91;
      line-height: 0.9;
    }
    .HeadingInno {
      height: 82px;
      padding-top: 7rem;
      font-weight: 400;
      font-size: 2em;
      padding-left: 6rem;
      color: white;
      line-height: 0.9;
    }
      
    .SiteNovoHeader h2{    font-size: 1.6em;
      font-weight: 400;}
      
  }


  @media screen and(min-width: 1025px) and (max-width: 1280px) {
  
    /* CSS */
    .SiteNovoHeader{font-size:2.4em;padding-left: 6rem;}
    .SiteNovoHeader h2{    font-weight: 500;}
    .HeadingInno {padding-left:5rem;}
    .FichaCinza{padding-left:5rem;
    margin-top:  19.7%;
}
    .FichaCinza img {width: 100%;}
    
  }
  
  @media screen and(min-width: 768px) and (max-width: 1024px) {
  
    /* CSS */
   .logo{padding:3rem;}
   .FichaAmarela{margin-top:30%;}
   .SiteNovoHeader {font-size:3em;padding-left:5rem;}
   .HeadingInno{    margin-top: 6%;
    font-weight: 400;
    font-size: 1.4em;
    padding-left: 4rem;
    color: white;
    line-height: 0.9;
    /* animation: 2s ease-out 0s 1 slideInFromRight; */
  }
    .FichaCinza{    margin-top: 23.5%;
      width: 90%;
      padding-left: 4rem;
      /* animation: 2s ease-out 0s 1 slideInFromRight; */
    }
  }
  
  /* ################################ Mobile ###############################  */
  @media(min-width: 320px) and (max-width: 480px) {
  
    /* CSS */
   section {display: block;}
  .brancoSide{display:none !important;}
  .AmareloSide{display:none !important;}
  .ContentorTopmob{display: flex;width: 100%;    height: 45vh;}
  .ContentorTopmob2{width:100%;display: flex;    height: 55vh;}
  .mob_cinza{
      display: block;
      width:50%;
      height: 45vh;
      background:#d1d3d4;
    }

    .mob_fichaamarela{
      display: flex;
      width:50%;
      height: 45vh;
      background:white;
    }

    .mob_brancoslogan{
      display: block;
      width:50%;
      height: 55vh;
      background:white;
    }

    .mob_fichacinza{
      display: flex;
      width:50%;
      height: 55vh;
      background:#fdb827;
     
    }

    .ficha1{object-fit: contain;padding-bottom: 25%;animation: 2s ease-out 0s 1 slideInTop;width:100%;}
    .ficha2{object-fit: contain;padding-top: 25%; animation: 2s ease-out 0s 1 slideInBottom;width:100%;}

    .Mob_abelha{padding: 1rem;
      width: auto;
      height: 10%;
  }

  .socialSlogan{ 
          padding-top: 20%;
    /*padding-top: 25%;*/
    width: 100%;
    /* align-self: center; */
    padding-left:2em;

  }

  .socialSlogan h2{
      /* padding-top: 15%;; */
	text-align: left; 
      color: #8e8e91;
      font-weight: 500;
      line-height: 1;}

  .novosite{
        color: white;
        height: 82%;
        /*padding-top: 12em;*/
        padding-left: 1.6em;
        font-size: 1.1em;
        height: 82%;
        padding-top: 10em;
        /*padding-left: 1em;*/
        font-size: 1.1em;
  }

  .novosite h2{
    font-weight: 500;
    font-size: 1.5em;}
          
  .corAmarela{
    font-size: 0.7em;
     padding-left: 2.9em; 
  
    /*padding-top: 9em;*/
        padding-top: 8em;

    color:#fdb827;}
    
    .corAmarela h2{    font-size: 1em;}

  }

  @keyframes logoOpacity {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @-webkit-keyframes slideInFromRight {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(0);
      }
    }
  
    @-moz-keyframes slideInFromRight {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(0);
      }
    }
    
    @-o-keyframes slideInFromRight {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(0);
      }
    }
    
    @keyframes slideInFromRight {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(0);
      }
    }
    
  /* Slide Left */
  @-webkit-keyframes slideInFromLeft {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(0);
      }
    }
  
    @-moz-keyframes slideInFromLeft {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(0);
      }
    }
    
    @-o-keyframes slideInFromLeft {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(0);
      }
    }
    
    @keyframes slideInFromLeft {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(0);
      }
    }
  
    .socialbar{
        margin-top:2%;
        padding-left: 8rem;
        display:flex;
        justify-content:flex-end;
        /* animation: 2s ease-out 0s 1 slideInBottom; */
      }
  

  @keyframes slideInBottom {
      0% {
        transform: translateY(800%);
        opacity: 0; 
      }
     
      100% {
        transform: translateX(0);
        opacity: 1; 
      }
    }

    @keyframes slideInTop {
      0% {
        transform: translateY(-800%);
        opacity: 0; 
      }
     
      100% {
        transform: translateX(0);
        opacity: 1; 
      }
    }