@font-face{
    font-family: "sora";
    src: url('fonts/Sora-VariableFont_wght.ttf');
  }
@font-face{
    font-family: "montserrat";
    src: url('fonts/Montserrat-VariableFont_wght.ttf');
  }

*{
    margin: 0;
    padding: 0;
  } 

  a{
    text-decoration: none;
    color: #fff;
  }
   
  header{width: 100%;}
  
  section{width: 100%; overflow-x: hidden;}

    .title{text-align: justify;}
    section h1{
      font-family: montserrat;
      color: #491d04ec;
      font-weight: 500;
      width: 100%;
    } 
    section h1 span{font-weight: 700; color:#491D04}  
  
    .container{display: flex;}
  
    .produtos{
      display: flex;
      width: 50%;
      align-items: center;
    }
  
    ul{
      text-align: center;
      font-family: sora;
      list-style: none;
      user-select: none;
      color: #717171;
      font-weight: 300;
    }
  
    .dropdown-left{display: none;}
    .produtos li:hover .dropdown-left{display: block;}
      .sub-dropdown-left{display: none;}
      .dropdown-left li:hover .sub-dropdown-left{display: block;}
      
    .dropdown-right{display: none;}
    .produtos li:hover .dropdown-right{display: block;}
      .sub-dropdown-right{display: none;}
      .dropdown-right li:hover .sub-dropdown-right{display: block;}
     
      h4{
        font-family: sora;
        font-weight: 400;
        color: #717171;
      }
      h3{
        font-family: sora;
        font-weight: 700;
        color: #235AA6;
      }
        h3 span{
          color: #717171;
          font-weight: 400;
        }

      footer{
        background-color: #235AA6;
        width: 100%;
      }
    
      .info{
        font-family: montserrat;
        font-weight: 600;
        color:#fff;
        margin: auto 0;
      }
    
      h2{
        font-family: montserrat;
        font-weight: 600;
        color:#fff;
        text-align: center;
      }

      .informacoes{
        display: flex;
        justify-content: space-around;
        margin: auto;
        text-align: center;
        width: 90%;
      }
    
      .redes-sociais{
        display: flex;
        justify-content: space-around;
        margin: auto;
        align-items: center;
        width: 90%;
      }
    
      .redes-sociais img:hover{
        transform: scale(1.15);
        transition: .5s;
      }

      h6{
        font-family: sora;
        font-weight: 400;
        color:#8f8e8e;
        text-align: center;
      }
      h6 a {color: #235AA6; font-weight: 600;}

      p{
        color: #ffffffc0;
        text-align: center;
        font-family: montserrat;
      }

      

@media screen and (max-width: 767px) and (orientation: portrait){
  .camisa{display: none;}
  .caneca{display: none;}


  header{
    display: flex;
    width: 100%;
    justify-content: start;
  }

  header .logotipo{
    width: auto;
    height: 4.5vh;
    padding: 3vh 0vh 0 3vh;
    align-self: flex-start;
  }

  .container{display: flex; overflow-x: hidden;}

  .caneca-celular{
      width: 50%;
      align-self: flex-start;
      margin: -8vh 0 0 22vh;
      display: flex;
      position: absolute;  
      overflow-x: hidden;    
    }
    .caneca-celular img{
      height: 28vh;
      margin: 0 0 0 -9vh;
    }


  .title{
    margin-left:3vh; 
    align-self: flex-start;
    width: 70%;
  }    
    section h1{
      font-size: 1.3vh;
      margin-top: 22vh;
      align-self: flex-start;
    }    
    section h1 span{font-size: 1.95vh;}

    #celular{
      text-align: center;
      font-size: 1.7vh;
      margin: 8vh 0 6vh 0;
      display: block;
    }
      
    .produtos{
      flex-direction: column;
      width: 100%;
      align-items: flex-start;
    }


    ul{
      display: flex;
      font-size: 1.3vh;   
      width: 130%;     

    }
    .lista-produtos{
      margin-bottom: 41vh;
      overflow-x: hidden;
      justify-content: space-around;
      width: 95%;
      line-height: normal;
    }
      .lista-produtos li{margin-right: 1.3vh; }


      .lista-produtos li:hover{
        background-color: #235AA6;
        color: #fff;
        padding: 1vh;
        border-radius: 5vh;
        transition: .3s;  
        font-weight: 400;
      }

    .dropdown-left{
      margin: 1.5vh 0 0 0;    
      overflow-x: scroll;
      height: 40vh;
      position: absolute;
      left: 0;
      right: 0;
      width: 100%;     
    }
    
    .dropdown-left li{
      width: 100%;
      font-size: 1.2vh;
    }    
      .dropdown-left li:hover{
        background-color: #2b69be;
        color: #fff;
        padding:.9vh;
        border-radius: 5vh;
        transition: .3s;                  
      } 
        .sub-dropdown-left li:hover{
          padding: 0;
          border-radius: 0;
          transition: 0;
          background-color: transparent
        }

      .sub-dropdown-left{
        margin:2.5vh 0 0 0%; 
        position:absolute;
        width: 80%;
        left: 0%;
       
      }     
    
    .dropdown-right{
      margin: 1.5vh 0 0 0;    
      overflow-x: scroll;
      height: 41vh;
      position: absolute;
      left: 0;
      width: 100%;
      z-index: 1;       
    }
    .dropdown-right li{
      width: 100%;
      font-size: 1.2vh;
    }    
      .dropdown-right li:hover{
        background-color: #2b69be;
        color: #fff;
        padding:.9vh;
        border-radius: 5vh;
        transition: .3s;   
      } 
        .sub-dropdown-right li:hover{
          padding: 0;
          border-radius: 0;
          transition: 0;
          background-color: transparent
        }

      .sub-dropdown-right{
        margin:2.5vh 0 0 0%; 
        position:absolute;
        width: 80%;
        left: 0%;
        z-index: 10;
      } 

      h6{
        font-size: 1.2vh;
        margin: 3vh 0 0 12.5%;
        text-align: center;
        width: 100%;
      }
      .cell{font-size: 1.3vh; margin-top: 4vh;}


      .produto{width: 100%; margin-right: 6vh;}
    
      .produto img{
        height: 17vh;
        margin-left: -3%;
      }
      h4{font-size: 1.3vh;}
      h3{font-size: 1.7vh;}
    
      footer{background-color: #235AA6 ;}
      h4{color:#717171}
      h3{color: #235AA6}

    .informacoes{
      width: 90%;
      margin: auto;
      height: 40vh;
    }
      #caminhao img{height: 9vh;}
      #caminhao figcaption{margin:0;}
    
      .info img{height: 5.7vh;}
      figcaption{margin-top: 2.3vh;}
      .info{font-size: 1.3vh;}

      h2{font-size: 2.5vh;}

      .redes-sociais{height: 37vh; }
      .redes-sociais img{
        height: 6vh;   
        width: auto;  
      }

      p{font-size: .9vh;}
      
}

@media screen and (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
  .camisa{display: none;}
  .caneca{display: none;}


  header{
    display: flex;
    width: 100%;
    justify-content: start;
  }

  header .logotipo{
    width: auto;
    height: 4.5vh;
    padding: 3vh 0vh 0 3vh;
    align-self: flex-start;
  }

  .container{display: flex; overflow-x: hidden; width: 100%;}

  .caneca-celular{
      width: 45%;
      align-self: flex-start;
      margin: -8vh 0 0 37.5vh;
      display: flex;
      position: absolute;  
      overflow-x: hidden;

    }
    .caneca-celular img{
      height: 32vh;
      margin: 0 0 0 -9vh;
    }


    .title{
      margin-left:3vh; 
      align-self: flex-start;
      width: 60%;
    }    
      section h1{
        font-size: 1.3vh;
        margin-top: 22vh;
        align-self: flex-start;
      }    
      section h1 span{font-size: 2vh;}

    #celular{
      text-align: center;
      font-size: 1.9vh;
      margin: 8vh 0 6vh 0;
      display: block;
    }
      
    .produtos{
      flex-direction: column;
      width: 100%;
      align-items: flex-start;
    }


    ul{
      display: flex;
      font-size: 1.3vh;   
      width: 100%;     
    }
    .lista-produtos{
      margin-bottom: 37vh;
      justify-content: space-around;
      width: 100%;
      line-height: normal;
    }

      

      .lista-produtos li:hover{
        background-color: #235AA6;
        color: #fff;
        padding: 1vh;
        border-radius: 5vh;
        transition: .3s;  
        font-weight: 400;
      }

    .dropdown-left{
      margin: 1.5vh 0 0 0;    
      overflow-x: visible;
      height: 35vh;
      position: absolute;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 1;     
    }
    .dropdown-left li{
      width: 100%;
      font-size: 1.2vh;
    }    
      .dropdown-left li:hover{
        background-color: #2b69be;
        color: #fff;
        padding:.9vh;
        border-radius: 5vh;
        transition: .3s;                  
      } 
        .sub-dropdown-left li:hover{
          padding: 0;
          border-radius: 0;
          transition: 0;
          background-color: transparent
        }

      .sub-dropdown-left{
        margin:3vh 0 0 0; 

        position:absolute;
        width: 100%;
        left: 0;
        z-index: 10;
      }     
    
    .dropdown-right{
      margin: 1.5vh 0 0vh 0;    
      overflow-x: visible;
      height: 35vh;
      position: absolute;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 1;           
    }
    .dropdown-right li{
      width: 100%;
      font-size: 1.2vh;
    }    
      .dropdown-right li:hover{
        background-color: #2b69be;
        color: #fff;
        padding:.9vh;
        border-radius: 5vh;
        transition: .3s;    
      } 
        .sub-dropdown-right li:hover{
          background-color: transparent;
          padding: 0;
          border-radius: 0;
          transition: 0;
        }
      .sub-dropdown-right{
        margin:3vh 0 0 0; 
        position:absolute;
        width: 100%;
        left: 0%;
        z-index: 10;
      }      
      
      
    h6{
      font-size: 1.2vh;
      text-align: center;
    }
    .cell{font-size: 1.3vh; margin-top: 4vh;}
    h6 a {color: #235AA6; font-weight: 600;}


      .produto img{
        height: 15vh;
        margin-left: -4%;
      }
      h4{font-size: 1.3vh; color: #717171;}
      h3{font-size: 1.7vh;}

      footer{background-color: #235AA6 ;}
      h3{color: #235AA6}
    

    .informacoes{
      width: 90%;
      margin: auto;
      height: 40vh;
    }
      #caminhao img{height: 8.5vh;}
      #caminhao figcaption{margin:0;}
    
      .info img{height: 5.5vh;}
      figcaption{margin-top: 2.3vh;}
      .info{font-size: 1.5vh;}

      h2{font-size: 2.2vh;}

      .redes-sociais{height: 36vh; }
      .redes-sociais img{
        height: 6vh;   
        width: auto;  
      }
                
}

@media screen and (max-width: 991px) and (orientation: landscape) {
  .camisa{display: none;}
  .caneca{display: none;}

  header{
    display: flex;
    width: 100%;
    justify-content: start;
  }

  header .logotipo{
    width: auto;
    height: 10vh;
    padding: 5vh 0vh 0 5vh;
    align-self: flex-start;
  }

  .container{display: flex; overflow-x: hidden;}

  .caneca-celular{
      width: 45%;
      align-self: flex-start;
      margin: -8vh 0 0 130vh;
      display: flex;
      position: absolute;  
      overflow-x: hidden;

    }
    .caneca-celular img{
      height: 65vh;
      margin: 0 0 0 -12vh;
    }


    .title{
      margin-left:3vh; 
      align-self: flex-start;
      width: 55%;
    }    
      section h1{
        font-size: 3vh;
        margin-top: 22vh;
        align-self: flex-start;
      }    
      section h1 span{font-size: 4vh;}

    #celular{
      text-align: center;
      font-size: 3.5vh;
      margin:15vh 0 10vh 0;
      display: block;
    }
      
    .produtos{
      flex-direction: column;
      width: 100%;
      align-items: flex-start;
    }


    ul{
      display: flex;
      font-size:3vh;   
      width: 100%;     
    }
    .lista-produtos{
      margin-bottom: 75vh;
      justify-content: space-around;
      width: 95%;
      line-height: normal;
    }
      .lista-produtos li{margin-right:0 vh; }


      .lista-produtos li:hover{
        background-color: #235AA6;
        color: #fff;
        padding: 2vh;
        border-radius: 5vh;
        transition: .3s;  
        font-weight: 400;
      }

    .dropdown-left{
      margin: 3vh 0 0 0;    
      overflow: hidden;
      height: 75vh;
      position: absolute;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 1;     
    }
    .dropdown-left li{
      width: 100%;
      font-size: 2.3vh;
    }    
      .dropdown-left li:hover{
        background-color: #2b69be;
        color: #fff;
        padding:.9vh;
        border-radius: 5vh;
        transition: .3s;                  
      } 
        .sub-dropdown-left li:hover{
          padding: 0;
          border-radius: 0;
          transition: 0;
          background-color: transparent
        }

      .sub-dropdown-left{
        margin:5vh 0 0 0; 
        position:absolute;
        width: 100%;
        left: 0%;
        z-index: 10;
      }     
    
    .dropdown-right{
      margin: 3vh 0 0 0;    
      overflow: hidden;
      height: 60vh;
      position: absolute;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 1;             
    }
    .dropdown-right li{
      width: 100%;
      font-size:2.3vh;
    }    
      .dropdown-right li:hover{
        background-color: #2b69be;
        color: #fff;
        padding:.9vh;
        border-radius: 5vh;
        transition: .3s;    
      } 
        .sub-dropdown-right li:hover{
          background-color: transparent;
          padding: 0;
          border-radius: 0;
          transition: 0;
        }
      .sub-dropdown-right{
        margin:5vh 0 0 0; 
        position:absolute;
        width: 100%;
        left: 0%;
        z-index: 10;

      }       

      h6{
        font-size: 2.4vh;
        margin: 7vh 0;
      }
      .cell{font-size: 2.6vh; margin-top: 8vh;}
      h6 a {color: #235AA6; font-weight: 600;}

      .produto img{
        height: 36vh;
        margin-left: -4%;
      }

      h4{font-size: 2.8vh; color: #717171;}
      h3{font-size: 3vh;}
    
      footer{background-color: #235AA6;}
      h3{color:#235AA6}

    .informacoes{
      width: 90%;
      margin: auto;
      height: 65vh;
    }
      #caminhao img{height: 18vh;}
      #caminhao figcaption{margin:0;}
    
      .info img{height: 11.5vh;}
      figcaption{margin-top: 2.3vh;}
      .info{font-size: 2.8vh;}

      h2{font-size: 5vh;}

      .redes-sociais{height: 65vh; justify-content: space-around;}
      .redes-sociais img{
        height: 11.5vh;   
        width: auto;  
      }

      p{font-size: 3vh}
                
}

@media screen and (min-width: 992px) and (max-width: 1200px) and (orientation: landscape)  {
  #celular{display: none;}
  .caneca-celular{display: none;}

section{overflow: visible;}

header{
  display: flex;
  width: 50%;
  justify-content: center;
}
  header .logotipo {
    width: 39vh;
    height: auto;
    position: absolute;
    padding-top: 8vh;
  }
     
  .title{
    margin:22vh 0 8vh 0; 
    align-self: center;
    width: 80%;
  }   
    section h1{font-size: 2.1vh; }    
    section h1 span{font-size: 3.3vh;}

    .caneca img{height: 56vh;}
    .caneca{
      align-self: right;
      width: 50%;
      display: flex;
      margin-top: 9vh;
    }

    .camisa img{
      height: 80vh;
      margin: 0 auto;
    }
    .camisa{
      width: 50%;
      display: flex;
      align-self: flex-start;
    }

        
  .produtos{
    flex-direction: column;
    margin: 8vh 0 0 5vh; 
    align-self: normal;
  }          

    ul{font-size: 2.25vh;}
    .lista-produtos{
      width:95%;
      line-height: 2.5vh;   
      position: relative;
      display: flex;    
      justify-content: space-between;
      margin-top: 1%;
    }
    #align-prod{
      margin: auto 8%;
      align-self: flex-end;
      width:90%;
      justify-content: space-between;
    }          

      .produtos li:hover{
          color: #235AA6;
          font-weight: 600;
          transition: .3s;
          cursor: pointer;   
          display: block;        
          background-color: transparent;
        }
    
        .dropdown-left{  
          position: absolute;          
          z-index: 2;
          margin: 0 0 0 -3vh;
          padding: 1vh 2.5vh;
          border: 1px solid #F6F6F6;
          background: #FAFAFA;
          box-shadow: 0px 5px 25px 0px rgba(31, 30, 30, 0.17);
        }
        .dropdown-left li{
          line-height: normal;
          padding: 2vh 0; 
          font-size: 2.25vh;
          width: 28vh;
        }    
      
        .sub-dropdown-left{
          position: absolute;   
          z-index: 1;               
          background-color: #FAFAFA;
          padding: 3vh 2.5vh;
          box-shadow: 20px 0px 25px 0px rgba(0, 0, 0, 0.17);
          margin: -5.9vh 0 0 28vh;
        } 
        .sub-dropdown-left ul{ display: flex;}
          
      .dropdown-right{
        position: absolute;          
        z-index: 2;
        margin: 0 0 0 -4vh;
        padding: 1vh 2.5vh;
        border: 1px solid #F6F6F6;
        background: #FAFAFA;
        box-shadow: 0px 5px 25px 0px rgba(31, 30, 30, 0.17);
    }
      .dropdown-right li{
        line-height: normal;
        padding: 2vh 0; 
        font-size: 2.25vh;
        width: 28vh;
      }    
      
        .sub-dropdown-right{
          position: absolute;   
          z-index: 1;               
          background-color: #FAFAFA;
          padding: 3vh 2.5vh;
          box-shadow: -20px 0px 25px 0px rgba(0, 0, 0, 0.17);         
          margin: -5.9vh 0 0 -32vh;  
        }        
        .sub-dropdown-right ul{display: flex;}
        
       .dois-produtos .sub-dropdown-right{margin: -5.9vh 0 0 -60vh;}
       .dropdown-right:last-child{ margin: 0 0 0 -12vh;}




    .produto{width: 30vh;}
    .produto img{
      height: 23vh;
      margin-bottom: 1.5vh;
      margin-left: -2%;
    }

    h4{
      font-size: 2vh; 
      width: 90%;
    }
    h3{
      font-size: 2.3vh;
      margin-top: 1vh;
    }

    h6{
      font-size: 1.8vh;
      margin: 2vh 0;
      width: 30vh;
    }
    .cell{display: none;}


    .informacoes{height: 48vh; width: 65%;}
    #caminhao img{height: 14vh;}
    #caminhao figcaption{margin:0;}
  
    .info img{height: 10vh;}
    figcaption{margin-top: 2.75vh;}
    .info{font-size: 2.1vh; margin-top: 15%;}

    h2{font-size: 4vh;}

    .redes-sociais{height: 42.5vh; width: 50%;}
    .redes-sociais img{height: 10vh;}

    .copyright-info{margin-top: -3vh;}
    p{font-size: 2vh;}
}

@media screen and (min-width: 1201px) and (orientation: landscape)  {
  #celular{display: none;}
  .caneca-celular{display: none;}

section{overflow: visible;}

header{
  display: flex;
  width: 50%;
  justify-content: center;
}
  header .logotipo {
    width: 39vh;
    height: auto;
    position: absolute;
    padding: 9vh;
  }

  .title{
    margin:22vh 0 8vh 0; 
    align-self: center;
    width: 80%;

  }   
    section h1{font-size: 2.2vh; }    
    section h1 span{font-size: 3.2vh;}

  .caneca img{height: 63vh;}
  .caneca{
    align-self: right;
    width: 50%;
    display: flex;
    margin-top: 6.5vh;
  }

  .camisa img{
    height: 80vh;
    margin: 0 auto;
  }
  .camisa{
    width: 50%;
    display: flex;
    align-self: flex-start;
  }
        


  .produtos{
      flex-direction: column;
      margin-top: 8vh; 
    }          

    ul{font-size: 2.25vh;}
    .lista-produtos{
      width:95%;
      line-height: 2.5vh;   
      position: relative;
      display: flex;    
      justify-content: space-around;
    }
    #align-prod{
      margin: auto 10%;
      width: 85%;
      align-self: flex-end;
      justify-content: space-between;
    }          

      .produtos li:hover{
          color: #235AA6;
          font-weight: 600;
          transition: .3s;
          cursor: pointer;   
          display: block;        
          background-color: transparent;
        }

        .dropdown-left{  
          position: absolute;          
          z-index: 2;
          margin: 0 0 0 -3vh;
          padding: 1vh 2.5vh;
          border: 1px solid #F6F6F6;
          background: #FAFAFA;
          box-shadow: 0px 5px 25px 0px rgba(31, 30, 30, 0.17);
        }
        .dropdown-left li{
          line-height: normal;
          padding: 2vh 0; 
          font-size: 2.25vh;
          width: 28vh;
        }    
      
        .sub-dropdown-left{
          position: absolute;   
          z-index: 1;               
          background-color: #FAFAFA;
          padding: 3vh 2.5vh;
          box-shadow: 20px 0px 25px 0px rgba(0, 0, 0, 0.17);         
          margin: -5.9vh 0 0 28vh;
        } 
        .sub-dropdown-left ul{ display: flex;}
          
      .dropdown-right{
        position: absolute;          
        z-index: 2;
        margin: 0 0 0 -4vh;
        padding: 1vh 2.5vh;
        border: 1px solid #F6F6F6;
        background: #FAFAFA;
        box-shadow: 0px 5px 25px 0px rgba(31, 30, 30, 0.17);
    }
      .dropdown-right li{
        line-height: normal;
        padding: 2vh 0; 
        font-size: 2.25vh;
        width: 28vh;
      }    
      
        .sub-dropdown-right{
          position: absolute;   
          z-index: 1;               
          background-color: #FAFAFA;
          padding: 3vh 2.5vh;
          box-shadow: -20px 0px 25px 0px rgba(0, 0, 0, 0.17);         
          margin: -5.9vh 0 0 -32vh;  
        }  
        .sub-dropdown-right ul{display: flex;}       

        .dois-produtos .sub-dropdown-right{margin: -5.9vh 0 0 -60vh;}
        .dropdown-right:last-child{ margin: 0 0 0 -12vh;}

    
    .produto{width: 30vh;}
    .produto img{
      height: 23vh;
      margin-bottom: 1.5vh;
      margin-left: -2%;
    }
    h4{
      font-size: 2vh; 
      width: 90%;
    }
    h3{
      font-size: 2.2vh;
      margin-top: 1vh;
    }

    h6{
      font-size: 1.8vh;
      margin: 2vh 0;
      width: 30vh;
    }
    .cell{display: none;}
    
  
    .informacoes{height: 48vh; width: 65%;}
      #caminhao img{height: 14vh;}
      #caminhao figcaption{margin:0;}
    
      .info img{height: 10vh;}
      figcaption{margin-top: 2.75vh;}
      .info{font-size: 2.1vh; margin-top: 15%;}

      h2{font-size: 4vh;}

      .redes-sociais{height: 42.5vh; width: 50%;}
      .redes-sociais img{height: 10vh;}

      .copyright-info{margin-top: -3vh;}
      p{font-size: 2vh;}
}