@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 screen and (min-width:1023px) {
    
    body{
    background-color:#202020;
    height: 100vh;
}

   header{
    
    background:  #04a8ba;
    padding-bottom: 20px;
    padding-top: 15px;
    position: relative;
    height: 120px;
}
    
  header > .logo > img{
    
        height: 100px;
        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: 10px;
    max-width: 90vw;
    margin-left: 100px;

}


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

}

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

    content: '';
    background-color: #01cfe6;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0px;
    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: #002540;
  
    
    
}

/*CONTAINER EMPREEND*/
    
    .container{
    margin-left: 52%;
    width: 68vw;
    padding: 15px;
    height: 360px;
    margin-top: 100px;
    margin-bottom: 80px;
    padding: 15px;
    position: relative;
    box-shadow: 2px 2px 5px  #0291a4a5;
    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;
    transform:translateX(-52%) ;

}

/*DESCRICAO*/

.container > .descricao-produto{
margin-left: 210px;
margin-top: -10px;

}

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

}

.container > .descricao-produto  > p{

color: white;
text-align: justify;
width: 95%;
margin-left: 10px;
height: 200px;

}



.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: 20px; 
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;
padding: 10px;
font-family: 'roboto';
font-size: 1.2em;
text-align: center;
background-color:#04a8ba;
border-radius: 5px;

width: 200px;
margin-left: 0px;
z-index: 2;
position: absolute;
top:300px ;

}


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

content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;

border-radius: 5px;
opacity: .7;

}

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

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

/*CONTAINER MK*/

    .container-mk{
    margin-left: 52%;
    width: 68vw;
    padding: 15px;
    height: 360px;
    margin-top: 100px;
    margin-bottom: 80px;
    padding: 15px;
    position: relative;
    box-shadow: 2px 2px 5px  #0291a4a5;
    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;
    transform:translateX(-52%) ;

}

/*DESCRICAO*/

.container-mk > .descricao-produto{
margin-left: 210px;
margin-top: -10px;

}

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

}

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

color: white;
text-align: justify;
width: 95%;
margin-left: 10px;
height: 200px;

}



.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: 20px; 
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;
padding: 10px;
font-family: 'roboto';
font-size: 1.2em;
text-align: center;
background-color:#04a8ba;
border-radius: 5px;

width: 200px;
margin-left: 0px;
z-index: 2;
position: absolute;
top:300px ;

}


.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: -1;

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{
    margin-left: 52%;
    width: 68vw;
    padding: 15px;
    height: 380px;
    margin-top: 100px;
    margin-bottom: 80px;
    padding: 15px;
    position: relative;
    box-shadow: 2px 2px 5px  #0291a4a5;
    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;
    transform:translateX(-52%) ;

}

/*DESCRICAO*/

.container-tec > .descricao-produto{
margin-left: 210px;
margin-top: -10px;

}

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

}

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

color: white;
text-align: justify;
width: 95%;
margin-left: 10px;
height: 200px;

}



.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: -15px; 
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;
padding: 10px;
font-family: 'roboto';
font-size: 1.2em;
text-align: center;
background-color:#04a8ba;
border-radius: 5px;

width: 200px;
margin-left: 0px;
z-index: 2;
position: absolute;
top:320px ;

}


.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: -1;

border-radius: 5px;
opacity: .7;

}


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

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

/* CAPA CURSOS DE EMPREENDEDORISMO*/
    
.container#gastro > .img-produto{
background: url(../../imagens/empreend/COMBOGASTRONOMIA.webp) no-repeat center center;
background-size: contain;
display: block;
height: 180px;
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: 180px;
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: 180px;
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: 180px;
float: left;
width: 200px;

}


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

}


.container#automotivo > .img-produto{
background: url(../../imagens/empreend/mecanica1.jfif) no-repeat center center;
background-size: cover;
display: block;
height: 180px;
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: 180px;
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: 180px;
float: left;
width: 200px;

}

.container#manutencao-pc > .descricao-produto >h2{

    font-size: 1.5em;
}

.container#manutencao-pc > .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:30px;    
color: white;
}


.container#designer-grafico > .img-produto{
background: url(../../imagens/empreend/PERFILDNP.png) no-repeat center center;
background-size: cover;
display: block;
height: 180px;
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: 180px;
float: left;
width: 200px;

}

.container#ar > .descricao-produto > h2{

    font-size: 1.8em;
}

.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: 180px;
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: 180px;
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: 180px;
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:22px; 
color: white;
}


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

}


/* CAPA CURSO TECNOLOGIA*/



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

}

.container-tec#py1 > .descricao-produto >h2{

    font-size: 1.5em;
}

.container-tec#py1 > .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:50px; 
color: white;

}



.container-tec#py2 > .img-produto{
background: url(../../imagens/tecnologia/curso-python2.webp) no-repeat center center;
background-size: contain;
display: block;
height: 180px;
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:40px; 
color: white;
}




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

}

.container-tec#html1  > .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:42px; 
color: white;
}



.container-tec#html2 > .img-produto{
background: url(../../imagens/tecnologia/html-css2.png) no-repeat center center;
background-size: cover;
display: block;
height: 180px;
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:40px; 
color: white;
}



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

}

.container-tec#java > .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:42px; 
color: white;
}




.container-tec#php1 > .img-produto{
background: url(../../imagens/tecnologia/php2.png) no-repeat center center;
background-size: cover;
display: block;
height: 180px;
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:42px; 
color: white;
}



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

}

.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:42px; 
color: white;
}




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



footer{

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;

}

footer .line-1 {

text-align: center;
font-family: 'roboto';
color: #01cfe6;
font-size: 2rem;


}

footer .line-2{
padding: 30px 0px;
display: flex;
justify-content: space-between;
margin-left: 90px;

}

footer .line-2 > .box-line{

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


.line-2 > .box-line > h3{

color: #04a8ba;
margin-bottom: 20px;
font-size: 2em;
font-family: 'ibm';
}

.line-2 > .box-line > .links > a{
display: block;
color: white;
margin-bottom: 20px;
text-decoration: none;
font-size: 1.2em;
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: 200px;
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: 203px;
}

.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 > a > button > i{

display: inline;
font-size: 2.2em;
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{
font-family: 'roboto';
text-align: center;
font-size: 1.2em;
}


}