@charset 'UTF-8';


@media screen and (max-width: 766px){

header{

    background-color: #04a8ba;
    padding-bottom: 20px;
    padding-top: 15px;
    position: relative;
    height: 80px;
}


header > .logo > img{

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


}     



main > .menu > nav{

    display: flex;
    flex-flow: row wrap;
    margin-top: -90px;




}

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: 90%;
   
    margin: 0 auto;

    
    
}

footer .line-1 {
    font-family: 'roboto';
    text-align: center;
    color: #01cfe6;
    font-size: 1.5rem;
    margin: 0px auto;
    
}

footer .line-2{
    padding: 20px 0px;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    align-items: center;
    
    

}

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: 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: 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;
    display: inline;
    color: white;
    background: #202020;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    transition: .2s;
    
}

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

    color: #01cfe6;
}

.line-3{
    margin-left: 40px;
}
.line-3 > p{
    font-family: 'roboto';
    text-align: center;
    font-size: 0.9em;
}



}


@media (min-width: 767px) and (max-width: 1022px) {

    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%);
    
       
   }   

   main > .menu > nav{

    display: flex;
    flex-flow: row wrap;
    padding-top: 2px;

    width: 700px;
    
    
    

}


    main > div.menu> nav > a{
    
    padding: 10px;
    box-shadow: 1px 1px 3px #04a8ba;
    margin: 10px;
    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;
    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;
  }


    main > footer{
    margin-top: 600px;
}
    
}

@media screen and (min-width:1023px) {
    
    main > .menu > nav{

        display: flex;
        flex-flow: row wrap;
   
    
}

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

}

    .interface{
        max-width: 85%;
        
        margin: 0 auto;
       
    }

    footer .line-1 {

        text-align: center;
        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);
    }
     footer .line-2  > .box-line > img{

       
        max-width: 200px;
        margin-bottom: 10px;
    }

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

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

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

    
}