/*

Theme Name: WebSist
Theme URI: http://www.websist.com.br
Author: Bruno Honório
Author URI: http://www.websist.com.br
Description: Tema criado para a empresa WebSist
Version: 1.0

*/

*{
    margin: 0px;
    padding: 0px;
}


html {
    scroll-behavior: smooth;
  }
   
  :target {
    scroll-margin-top: .8em;
  }

body{
    padding-top: 80px; /* Altura do menu */
}

#cabecalho{
    width: 100%;
    height: 80px;
    background: #0F365D !important;
    position: -webkit-sticky; /* Necessário para funcionar no Safari */
    position: sticky;
    top: 0;
    position: fixed;
    z-index: 9;
}

#logo{
    width: 50%;
    margin-top: 15px;
    margin-left: 35px;
    float: left;
}

#logo h1{
    color: #fff;
    font-family: candara;
}


#logo_rodape h1{
    font-size: 45px;
    color: #fff;
    font-family: candara;
    margin-top: 40px;
}

#menu{
    padding-top: 25px;
}

article{
    /* height: 1000px; */
}

#menu ul li{
    width: 10%;
    height: 60px;
    text-align: center;
    color: #fff;
    float: left;
    list-style: none;
    font-family: 'Comfortaa', Helvetica, Arial;
    font-size: 18px;

}

#menu ul li:hover{
    background: #0dbbbb;
    padding-top: 10px;
    cursor: pointer;
    transition: 0.5s;
}


.cor_menu{
    background: #0dbbbb;
    padding-top: 10px;
    cursor: pointer;
    transition: 0.5s;
}



#banner{
    height: 400px;
    width: 100%;
    /* padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 10%;
    padding-right: 10%; */
}


#banner img{
    
    float: left;

}

#banner h2{
    font-family: 'Comfortaa', Helvetica, Arial;
    font-size: 40px;
    margin-top: 120;
    padding-left: 410px;
    animation-duration: 3s;
    animation-name: slidein;

}


@keyframes slidein {
    from {
      margin-left: 100%;
      width: 300%;
    }
  
    to {
      padding-left: 410px;
      width: 100%;
    }
  }



#produtos{
    height: 1060px;
    background: #564a9e;
    color: #fff;
    font-family: 'Comfortaa', Helvetica, Arial;

}

#produtos h2{
    padding-top: 40px;
    padding-left: 40px;
    padding-right: 40px;
    /* padding-bottom: 10px; */
}

#produtos ul li{
    width: 30%;
    height: 850px;
    border-radius: 1%;
    background: #564a9e;
    margin-left: 2%;
    padding-top: 45px;
    float: left;
    list-style: none;
    font-family: 'Comfortaa', Helvetica, Arial;
    font-size: 14px;
    color: #fff;
    padding-left: 30px;
    padding-right: 30px;


    display: inline-block;

    transition: all .25s ease-in-out;
    position: relative;
    z-index: 0;
}


#produtos ul li:hover {
    background-color: #fff;
    color: #000;
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(0,0,0,.5);
    position: relative;
    z-index: 2;
    cursor: pointer;
}


#produtos ul li #margem{
    padding-left: 4%;
}


#produtos ul li p{
    margin-top: 20px;
    text-align: justify;

}

.produto{
    text-align: center;
}


.produto img{
    border-radius: 110px;
}


/* Transição de elemento na tela */
.init-hidden{
    opacity: 0;
    transition: opacity 1s linear;
}


.init-hidden-off{
    opacity: 1;
}




#empresa{
    height: 800px;
    margin: 50px;
    margin-top: 100px;
    /* animation-duration: 3s;
    animation-name: slidein; */
}

#descricao_empresa{
    width: 55%;
    float: left;
    font-size: 14px;
}

#imagens_empresa{
    width: 30%;
    margin-left: 50px;
    float: left;
}

#imagens_empresa img{
    margin-top: 10px;
}

#empresa p{
    text-align: justify;
    margin-left: 10px;
}


#contato{
    width: 100%;
    height: 700px;
    margin-top: 68px;
    padding: 30px;
    background: #0dbbbb;
    font-family: 'Comfortaa', Helvetica, Arial;
    color: #fff;
}

#home_menu{
    width: 100%;
    height: 81px;
}


input{
    border-top-color: #0dbbbb;
    color: #0dbbbb;
    background: #0dbbbb;
    background-color: #0dbbbb;
    outline: none; 
  }

select{
    color: #fff;
    background: #0dbbbb;
    background-color: #0dbbbb;
    border-radius: 0%;
    border-right-color: #0dbbbb;
    border-left-color: #0dbbbb;
    border-top-color: #0dbbbb;
}



.form-control{
    border-radius: 0%;
    border-right-color: #0dbbbb;
    border-left-color: #0dbbbb;
    border-top-color: #0dbbbb;
    background-color: #0dbbbb;
    background: #0dbbbb;
    color: #fff;
}

.form-control:hover{
    color: #fff;
    background: #0dbbbb;
    background-color: #0dbbbb;
}


.form-control:active{
    color: #fff;
    background: #0dbbbb;
    background-color: #0dbbbb;
}


.form-control:target{
    color: #fff;
    background: #0dbbbb;
    background-color: #0dbbbb;
}


.form-control:focus {
    box-shadow: 0 0 0 0;
    outline: 0;
    border-top: #0dbbbb;
    border-left: #0dbbbb;
    border-right: #0dbbbb;
    border-bottom: #564a9e 1px solid;
} 


.form-select{
    border-radius: 0%;
    border-right-color: #0dbbbb;
    border-left-color: #0dbbbb;
    border-top-color: #0dbbbb;
    background-color: #0dbbbb;
    background: #0dbbbb;
    color: #fff;
}

.form-select:focus {
    box-shadow: 0 0 0 0;
    outline: 0;
    border-top: #0dbbbb;
    border-left: #0dbbbb;
    border-right: #0dbbbb;
    border-bottom: #564a9e 1px solid;
} 

.btn{
    background: #0F3648;
    border-radius: 0%;
}

.btn:hover{
    background: #0F365D;
}



#rodape{
    width: 100%;
    height: 300px;
    margin-top: 150px;
    padding-left: 10%;
    background: #0f3648 !important;
    font-family: 'Comfortaa', Helvetica, Arial;
}


#logo_rodape{
    border-left-width: 0px;
}

.rodape{
    height: 200px;
    width: 30%;
    margin-top: 50px;
    padding-top: 20px;
    padding-left: 20px;
    float: left;
    color: #fff;
    border-left-width: 1px;
    border-left-style: dashed;
    border-color: #fff;
}

#endereco{
    
}