@charset 'UTF-8';

@font-face {
   
    font-family: 'ibm';
    src: url(../../fontes/IBMPlexSerif-Regular.ttf);
}

@font-face {
    font-family: 'roboto';
    src: url(../../fontes/Roboto-VariableFont_wdth\,wght.ttf);
}


@media (min-width: 767px) and (max-width: 1023px) {
    
    body{
    background-color:#202020;
    height: 100vh;
}

   header{
    
    background-color: #04a8ba;
    padding-bottom: 20px;
    padding-top: 15px;
    position: relative;
    height: 90px;
}
    
   header > .logo > img{

    height: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
        
       
   }   

   header > span{

    font-size: 1.5em;
    color: white;
    position: absolute;
    top: 65%;
    left: 42%;
    font-family: 'Roboto';
    font-weight: 400;
   }
   
    main{
    background-color:#202020;
    padding-bottom: 20px;
   
}

    main > .menu > nav{

    display: flex;
    flex-flow: row wrap;
    padding-top: 2px;
    
    width: 90vw;
    margin-left: 58px;
    

}


    main > div.menu> nav > a{
    
    padding: 10px;
    box-shadow: 1px 1px 3px #04a8ba;
    font-family: 'roboto';
    margin: 10px;
    color: white;
    font-weight: 400;
    text-decoration: none;
    position: relative;
    align-items: center;
    border-radius: 5px;
    text-align: center;
    flex: 1 0 140px;
    z-index: 0;
    overflow: hidden;
  

}

  main > div.menu> nav > a::after{

    content: '';
    background-color: #01cfe6;
    height: 100%;
    width: 0px;
    border: 5px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: 0.3s ease-in-out;

  }



    main > div.menu > nav > a:hover::after{

    width: 100%;    
    
    
}

  main > div.menu > nav > a:hover{

    color: #003036;
  }


/*CONTAINER EMPREEND*/   
    
    .container{
        
    width: 80vw;
    padding: 20px;
    height: 360px;
    margin-top: 100px;
    margin-left: 102px;
    margin-bottom: 80px;
    padding: 10px;
    position: relative;
    box-shadow: 2px 2px 5px  #0291a4a5;
    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;

}
    
/*DESCRICAO*/

.container > .descricao-produto{
    margin-left: 220px;
    margin-top: -15px;

}

.container > .descricao-produto > h2{
    color:#01cfe6;
    font-family: 'roboto';
    font-size: 2em;
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 10px;

}

.container > .descricao-produto  > p{

    color: white;
    text-align: justify;
    width: 95%;
    height: 100px;

}



.container > .valor-produto > span{
    display: block;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: right;  
    font-size: 2.2em;
    margin-right: 10px;
    margin-top: 135px; 
    color: white;
}

.container > .valor-produto> p{
    display: block;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: right;
      
    font-size: 1.2em;
    margin-right: 10px;
    margin-top: 0px; 
    color: white;
}
    
   
/*BOTAO*/

.container > .btn-comec-empreend > a{
    display:block;
    text-decoration: none;
    color: white;
    margin: auto;
    font-family: 'roboto';
    padding: 10px;
    text-align: center;
    background-color: #04a8ba;
    border-radius: 5px;
    
    position: absolute;
    top:310px ;
    left: 10px;
    width: 200px;
   
    
      
}

.container > .btn-comec-empreend > a::before ,.container > .btn-comec > a::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    
    border-radius: 5px;
    opacity: .7;
}

.container > .btn-comec-empreend > a:hover::before{

    animation: pulsante 1s ease-in-out infinite;
    background-color: #01cfe6;
}


/*CONTAINER MARK*/


   .container-mk{
        
    width: 80vw;
    padding: 20px;
    height: 360px;
    margin-top: 100px;
    margin-left: 102px;
    margin-bottom: 80px;
    padding: 10px;
    position: relative;
    box-shadow: 2px 2px 5px  #0291a4a5;
    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;

}

.container-mk > .img-produto{
    background:  no-repeat center center;
    background-size: contain;
    display: block;
    height: 160px;
    float: left;
    width: 200px;
   
}


/*DESCRICAO*/

.container-mk > .descricao-produto{
    margin-left: 220px;
    margin-top: -15px;

}

.container-mk > .descricao-produto > h2{
    color:#01cfe6;
    font-family: 'roboto';
    font-size: 2em;
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 10px;

}

.container-mk > .descricao-produto  > p{

    color: white;
    text-align: justify;
    width: 95%;
    height: 100px;

}



.container-mk > .valor-produto > span{
    display: block;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: right;  
    font-size: 2.2em;
    margin-right: 10px;
    margin-top: 135px; 
    color: white;
}

.container-mk > .valor-produto> p{
    display: block;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: right;
      
    font-size: 1.2em;
    margin-right: 10px;
    margin-top: 0px; 
    color: white;
}
    
   
/*BOTAO*/

.container-mk > .btn-comec-mark > a{
    display:block;
    text-decoration: none;
    color: white;
    margin: auto;
    font-family: 'roboto';
    padding: 10px;
    text-align: center;
    background-color: #04a8ba;
    border-radius: 5px;
    
    position: absolute;
    top:310px ;
    left: 10px;
    width: 200px;
   
    
      
}

.container-mk > .btn-comec-mark > a::before ,.container-mk > .btn-comec-mark > a::after{

    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    
    border-radius: 5px;
    opacity: .7;
}

.container-mk > .btn-comec-mark > a:hover::before{

    animation: pulsante 1s ease-in-out infinite;
    background-color: #01cfe6;
}




/*CONTAINER TEC*/


   .container-tec{
        
    width: 80vw;
    padding: 20px;
    height: 360px;
    margin-top: 100px;
    margin-left: 102px;
    margin-bottom: 80px;
    padding: 10px;
    position: relative;
    box-shadow: 2px 2px 5px  #0291a4a5;
    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;

}

.container-tec > .img-produto{
    background:  no-repeat center center;
    background-size: contain;
    display: block;
    height: 160px;
    float: left;
    width: 200px;
   
}


/*DESCRICAO*/

.container-tec > .descricao-produto{
    margin-left: 220px;
    margin-top: -15px;

}

.container-tec > .descricao-produto > h2{
    color:#01cfe6;
    font-family: 'roboto';
    font-size: 2em;
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 10px;

}

.container-tec > .descricao-produto  > p{

    color: white;
    text-align: justify;
    width: 95%;
    height: 100px;

}



.container-tec > .valor-produto > span{
    display: block;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: right;  
    font-size: 2.2em;
    margin-right: 10px;
    margin-top: 135px; 
    color: white;
}

.container-tec > .valor-produto> p{
    display: block;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: right;
      
    font-size: 1.2em;
    margin-right: 10px;
    margin-top: 0px; 
    color: white;
}
    
   
/*BOTAO*/

.container-tec > .btn-comec-tec > a{
    display:block;
    text-decoration: none;
    color: white;
    margin: auto;
    font-family: 'roboto';
    padding: 10px;
    text-align: center;
    background-color: #04a8ba;
    border-radius: 5px;
    
    position: absolute;
    top:385px ;
    left: 10px;
    width: 200px;
   
    
      
}

.container-tec > .btn-comec-tec > a::before ,.container-tec > .btn-comec-tec > a::after{

    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    
    border-radius: 5px;
    opacity: .7;
}

.container-tec > .btn-comec-tec > a:hover::before{

    animation: pulsante 1s ease-in-out infinite;
    background-color: #01cfe6;
}




/*CAPA EMPRENDEDORISMO*/


 .container#gastro > .img-produto{
    background: url(../../imagens/empreend/COMBOGASTRONOMIA.webp) no-repeat center center;
    background-size: contain;
    display: block;
    height: 160px;
    float: left;
    width: 200px;
   
}

 .container#hamburg > .img-produto{
    background: url(../../imagens/empreend/curso-de-hamburguer.webp) no-repeat center center;
    background-size: contain;
    display: block;
    height: 160px;
    float: left;
    width: 200px;
   
}


 .container#manicure > .img-produto{
    background: url(../../imagens/empreend/curso-manicure.webp) no-repeat center center;
    background-size: contain;
    display: block;
    height: 160px;
    float: left;
    width: 200px;
   
}


 .container#design1 > .img-produto{
    background: url(../../imagens/empreend/desginer-spbrancelha1.webp) no-repeat center center;
    background-size: contain;
    display: block;
    height: 160px;
    float: left;
    width: 200px;
   
}


.container#design2 > .img-produto{
    background: url(../../imagens/empreend/CpiadeDesignsemnome3.webp) no-repeat center center;
    background-size: contain;
    display: block;
    height: 160px;
    float: left;
    width: 200px;
   
}


.container#automotivo > .img-produto{
    background: url(../../imagens/empreend/mecanica1.jfif) no-repeat center center;
    background-size: cover;
    display: block;
    height: 160px;
    float: left;
    width: 200px;
   
}

.container#gamer > .img-produto{
    background: url(../../imagens/empreend/manutenção-comp1.webp) no-repeat center center;
    background-size: contain;
    display: block;
    height: 160px;
    float: left;
    width: 200px;
   
}



.container#manutencao-pc > .img-produto{
    background: url(../../imagens/empreend/manutenonote02.png) no-repeat center center;
    background-size: cover;
    display: block;
    height: 190px;
    float: left;
    width: 200px;
   
}

.container#manutencao-pc > .descricao-produto > h2{
    color:#01cfe6;
    font-family: 'roboto';
    font-size: 1.6em;
    
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 10px;

}


.container#manutencao-pc > .valor-produto > span#valor-montagem{
    display: block;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: right;  
    font-size: 2.2em;
    margin-top: 140px;
    color: white;
}

.container > .descricao-produto  > p#desc-montpc{

    color: white;
    text-align: justify;
    width: 90%;
    height: 100px;

}


.container#designer-grafico > .img-produto{
    background: url(../../imagens/empreend/PERFILDNP.png) no-repeat center center;
    background-size: cover;
    display: block;
    height: 160px;
    float: left;
    width: 200px;
   
}

.container#ar > .img-produto{
    background: url(../../imagens/empreend/manut_ar_condic1.webp) no-repeat center center;
    background-size: contain;
    display: block;
    height: 160px;
    float: left;
    width: 200px;
   
}

.container#ar > .descricao-produto > h2{
    color:#01cfe6;
    font-family: 'roboto';
    font-size: 1.6em;
    
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 10px;

}

.container > .valor-produto > span#arcond{
    display: block;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: right;  
    font-size: 2.2em;
    margin-right: 10px;
    margin-top: 140px; 
    color: white;
}

.container#injec > .img-produto{
    background: url(../../imagens/empreend/injecao.webp) no-repeat center center;
    background-size: cover;
    display: block;
    height: 190px;
    float: left;
    width: 200px;

}

/* CAPA CURSO DE MARKETING DIGITAL*/

.container-mk#mk1 > .img-produto{
    background: url(../../imagens/marketing/thumbsingle698b20f.webp) no-repeat center center;
    background-size: contain;
    display: block;
    height: 160px;
    float: left;
    width: 200px;
   
}


.container-mk#mk2 > .img-produto{
    background: url(../../imagens/marketing/MarketingDigital2.webp) no-repeat center center;
    background-size: cover;
    display: block;
    height: 160px;
    float: left;
    width: 200px;
   
}





.container-mk#mk3 > .img-produto{
    background: url(../../imagens/marketing/marketing4.webp) no-repeat center center;
    background-size: contain;
    display: block;
    height: 160px;
    float: left;
    width: 200px;
   
}


.container-mk#mk3 > .valor-produto > span{
    display: block;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: right;  
    font-size: 2.2em;
    margin-right: 10px;
    margin-top: 140px; 
    color: white;
}

.container-mk#mk3 > .descricao-produto > h2{
    color:#01cfe6;
    font-family: 'roboto';
    font-size: 1.9em;
    
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 10px;

}


.container-mk#mk4 > .img-produto{
    background: url(../../imagens/marketing/marketing\ -digital-4.webp) no-repeat center center;
    background-size: cover;
    display: block;
    height: 160px;
    float: left;
    width: 200px;
   
}


.container-mk > .valor-produto > span#valor-mk4{
    display: block;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: right;  
    font-size: 2.2em;
    margin-right: 10px;
    margin-top: 140px; 
    color: white;
}
    

.container-mk#mk4 > .descricao-produto > h2{
    color:#01cfe6;
    font-family: 'roboto';
    font-size: 1.7em;
    
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 10px;

}
/* CAPA CURSO TECNOLOGIA*/

.container-tec#py1 {

    height: 440px;
}

.container-tec#py1 > .img-produto{
    background: url(../../imagens/tecnologia/curso-python1.webp) no-repeat center center;
    background-size: cover;
    display: block;
    height: 160px;
    float: left;
    width: 200px;
   
}

.container-tec#py1 > .descricao-produto > h2{
    color:#01cfe6;
    font-family: 'roboto';
    font-size: 1.4em;
    
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 10px;

}


.container-tec > .valor-produto > span#p1{
    display: block;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: right;  
    font-size: 2.2em;
    margin-right: 10px;
    margin-top: 220px; 
    color: white;
}

.container-tec#py2 {

    height: 480px;
}

.container-tec#py2 > .img-produto{
    background: url(../../imagens/tecnologia/curso-python2.webp) no-repeat center center;
    background-size: contain;
    display: block;
    height: 160px;
    float: left;
    width: 200px;
   
}


.container-tec#py2 > .valor-produto > span{
    display: block;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: right;  
    font-size: 2.2em;
    margin-right: 10px;
    margin-top: 250px; 
    color: white;
}

.container-tec#py2 > .btn-comec-tec > a{
    display:block;
    text-decoration: none;
    color: white;
    margin: auto;
    font-family: 'roboto';
    padding: 10px;
    text-align: center;
    background-color: #04a8ba;
    border-radius: 5px;
    
    position: absolute;
    top:425px ;
    left: 10px;
    width: 200px;
   
    
      
}




.container-tec#html1 {

    height: 440px;
}

.container-tec#html1 > .img-produto{
    background: url(../../imagens/tecnologia/htm\ e\ css.png) no-repeat center center;
    background-size: cover;
    display: block;
    height: 190px;
    float: left;
    width: 200px;
   
}

.container-tec#html1 > .descricao-produto > h2{
    color:#01cfe6;
    font-family: 'roboto';
    font-size: 1.8em;
    
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 10px;

}


.container-tec > .valor-produto > span#valor-html1{
    display: block;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: right;  
    font-size: 2.2em;
    margin-right: 10px;
    margin-top: 212px; 
    color: white;
}

.container-tec#html2{

    height: 520px;
}

.container-tec#html2 > .img-produto{
    background: url(../../imagens/tecnologia/html-css2.png) no-repeat center center;
    background-size: cover;
    display: block;
    height: 190px;
    float: left;
    width: 200px;
   
}

.container-tec#html2 > .valor-produto > span{
    display: block;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: right;  
    font-size: 2.2em;
    margin-right: 10px;
    margin-top: 290px; 
    color: white;
}

.container-tec#html2 > .btn-comec-tec > a{
    display:block;
    text-decoration: none;
    color: white;
    margin: auto;
    font-family: 'roboto';
    padding: 10px;
    text-align: center;
    background-color: #04a8ba;
    border-radius: 5px;
    
    position: absolute;
    top:465px ;
    left: 10px;
    width: 200px;
   
    
      
}


.container-tec#java {

    height: 440px;
}

.container-tec#java > .img-produto{
    background: url(../../imagens/tecnologia/curso-java.jpg) no-repeat center center;
    background-size: cover;
    display: block;
    height: 160px;
    float: left;
    width: 200px;
   
}



.container-tec#java > .descricao-produto > h2{
    color:#01cfe6;
    font-family: 'roboto';
    font-size: 1.8em;
    
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 10px;

}



.container-tec > .valor-produto > span#valor-java{
    display: block;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: right;  
    font-size: 2.2em;
    margin-right: 10px;
    margin-top: 212px; 
    color: white;
}

.container-tec#php1 {

    height: 440px;
}

.container-tec#php1 > .img-produto{
    background: url(../../imagens/tecnologia/php2.png) no-repeat center center;
    background-size: cover;
    display: block;
    height: 160px;
    float: left;
    width: 200px;
   
}

.container-tec#php1 > .valor-produto > span{
    display: block;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: right;  
    font-size: 2.2em;
    margin-right: 10px;
    margin-top: 212px; 
    color: white;
}



.container-tec#php2 > .img-produto{
    background: url(../../imagens/tecnologia/php1.png) no-repeat center center;
    background-size: cover;
    display: block;
    height: 160px;
    float: left;
    width: 200px;
   
}

.container-tec#php2 > .descricao-produto  > p{

    color: white;
    text-align: justify;
    width: 95%;
    height: 100px;
    font-size: 17px;

}

.container-tec#php2 > .valor-produto > span{
    display: block;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: right;  
    font-size: 2.2em;
    margin-right: 10px;
    margin-top: 130px; 
    color: white;
}

.container-tec#php2 > .btn-comec-tec > a{
    display:block;
    text-decoration: none;
    color: white;
    margin: auto;
    font-family: 'roboto';
    padding: 10px;
    text-align: center;
    background-color: #04a8ba;
    border-radius: 5px;
    
    position: absolute;
    top:305px ;
    left: 10px;
    width: 200px;
   
    
      
}




@keyframes pulsante {
    100%{
        transform: scale(1.2);
        opacity: 0;
    }   
}




footer{
    margin-top: 600px;
    color: white;
    border-top: 2px solid rgb(0, 83, 110);
    padding-top: 30px;
    padding-bottom: 0px;
    height: 320px;


}

.interface{
    max-width: 85vw;
   
    margin: 0 auto;
    margin-left: 80px;

    
    
}

footer .line-1 {
    font-family: 'roboto';
    width: 85vw;
    text-align: center;
    color: #01cfe6;
    font-size: 1.5rem;
    padding-top: 10px;
    
}

footer .line-2{
    padding: 20px 0px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: start;
    margin-left: 25px;
    
    

}

footer .line-2 > .box-line{

    max-width: calc(100% / 3);
}
  

.line-2 > .box-line > h3{
    font-family: 'ibm';
    color: #04a8ba;
    margin-bottom: 20px;
    font-size: 1.5em;
}

.line-2 > .box-line > .links > a{
    display: block;
    color: white;
    margin-bottom: 20px;
    text-decoration: none;
    font-size: 1em;
    font-family: Arial, Helvetica, sans-serif;
    transition: .2s;
    position: relative;

}


/* LINK SOBRE MIM*/


.line-2 > .box-line > .links > a#sobre-mim{

    width: 95px;
    position: relative;
    transition: .2s;
    
}

.line-2 > .box-line > .links > a#sobre-mim::after{

    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    background-color: #01cfe6;
    width:0px;
    height: 1px;
    transition: 0.2s ease-in-out;
    

}    

.line-2 > .box-line > .links > a#sobre-mim:hover::after{
    width: 95px;
}

.line-2 > .box-line > .links > a#sobre-mim:hover{

    color: #01cfe6;
}



/* LINK AJUDA*/    



.line-2 > .box-line > .links > a#help{

    width: 52px;
    position: relative;
    transition: .2s;
    
}

.line-2 > .box-line > .links > a#help::after{

    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    background-color: #01cfe6;
    width:0px;
    height: 1px;
    transition: 0.2s ease-in-out;
    

}    

.line-2 > .box-line > .links > a#help:hover::after{
    width: 50px;
}

.line-2 > .box-line > .links > a#help:hover{

    color: #01cfe6;
}




/* LINK TERMOS*/

.line-2 > .box-line > .links > a#termos{

    width: 130px;
    position: relative;
    transition: .2s;
    
}

.line-2 > .box-line > .links > a#termos::after{

    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    background-color: #01cfe6;
    width:0px;
    height: 1px;
    transition: 0.2s ease-in-out;
    

}    

.line-2 > .box-line > .links > a#termos:hover::after{
    width: 100%;
}

.line-2 > .box-line > .links > a#termos:hover{

    color: #01cfe6;
}




/* LINK POLITICA*/

.line-2 > .box-line > .links > a#politica{

    width: 198px;
    position: relative;
    transition: .2s;
    
}

.line-2 > .box-line > .links > a#politica::after{

    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    background-color: #01cfe6;
    width:0px;
    height: 1px;
    transition: 0.2s ease-in-out;
    

}    

.line-2 > .box-line > .links > a#politica:hover::after{
    width: 100%;
}

.line-2 > .box-line > .links > a#politica:hover{

    color: #01cfe6;
}

/* LINK EMAIL*/

.line-2 > .box-line > .links > a#email{

    width: 180px;
    position: relative;
    transition: .2s;
    
}

.line-2 > .box-line > .links > a#email::after{

    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    background-color: #01cfe6;
    width:0px;
    height: 1px;
    transition: 0.2s ease-in-out;
    

}    

.line-2 > .box-line > .links > a#email:hover::after{
    width: 100%;
}

.line-2 > .box-line > .links > a#email:hover{

    color: #01cfe6;
}


/*LINK TELEFONE*/

.line-2 > .box-line > .links > a#telefone{

    width: 142px;
    position: relative;
    transition: .2s;
    
}

.line-2 > .box-line > .links > a#telefone::after{

    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    background-color: #01cfe6;
    width:0px;
    height: 1px;
    transition: 0.2s ease-in-out;
    

}    

.line-2 > .box-line > .links > a#telefone:hover::after{
    width: 100%;
}

.line-2 > .box-line > .links > a#telefone:hover{

    color: #01cfe6;
}

.box-line > .btn-redes{

    margin-left: -15px;
}

.box-line > .btn-redes > a > button > i{

    display: inline;
    font-size: 1.7em;
    padding: 5px;
    

    
}

.box-line > .btn-redes > a > button{

    margin: 0px 10px;
    color: white;
    background: #202020;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    transition: .2s;
    
}

.box-line > .btn-redes > a > button:hover{

    color: #01cfe6;
}

.line-3 > p{
    width: 80vw;
    font-family: 'roboto';
    text-align: center;
    font-size: 0.9em;
    
}
}