/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 15/12/2016, 22:06:27
    Author     : Gabriel Luiz
*/

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

@font-face {
    font-family: 'Olivier';
    src: url(olivier.ttf);
}


body{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.meio{
    min-height: 480px;
}

.mobile{
    display: none;
}

.layout{
    width: 80%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    min-height:100%;
    position:relative;
    clear: both;
}

.img_item{
    width: 100%;
}

.banner{
    width: 100%;
    float: left;
}

.topo{
    width: 100%;
    float: left;
    background-image: url("../images/bg_topo.jpg");
    background-size: 100% 100%;
}

.nav_topo{
    width: 100%;
    float: left;
    text-align: center;
}

.divider1{
    width: 100%;
    height: 20px;
    background-image: url("../images/wood.png");
    background-size: 100% 100%;
    float: left;
}

.logotipo{
    width: 25%;
    margin-top: 10px;
}

.logotipo_mobile{
    display: none;
}


/* --------- Empresa ---------*/
#empresa{
    width: 100%;
    padding: 20px 0px 20px 0px;
    background-image: url("../images/bg.jpg");
    background-size: 100% 100%;
    float: left;
}

.divider2{
    width: 100%;
    height: 20px;
    background-image: url("../images/divisa_marrom.png");
    background-size: 100% 100%;
    float: left;
}

.titulo{
    width: 100%;
    font-family: Olivier;
    color: #803a0b;
    text-align: center;
    font-size: 60px;
}

.texto{
    width: 100%;
    font-family: Open Sans;
    color: #803a0b;
    text-align: justify;
    font-size: 14px;
}

.video_home p{
    font-family: Open Sans;
    color: #803a0b;
    font-size: 20px;
}

.video_home iframe{
    width: 100%;
    height: 400px;
}

.divider3{
    width: 100%;
    height: 20px;
    background-image: url("../images/wood.png");
    background-size: 100% 100%;
    float: left;
}


/* --------- Produtos ---------*/
#produtos{
    width: 100%;
    background-image: url("../images/lateral1.jpg");
    float: left;
}

.l_laranja{
    width: 100%;
    padding: 20px 0px 20px 0px;
    background-color: #ec7906;
    float: left;
}

.divider4{
    width: 100%;
    height: 20px;
    background-image: url("../images/divisa_branca.png");
    background-size: 100% 100%;
    float: left;
}

.titulo2{
    width: 100%;
    font-family: Olivier;
    color: #ffffff;
    text-align: center;
    font-size: 60px;
}

/* --------- Vídeos ---------*/
#videos{
    width: 100%;
    background: -webkit-radial-gradient(circle, #6a4433, #674837, #2b1a11); /* For Safari 5.1 to 6.0 */
    background: -o-radial-gradient(circle, #6a4433, #674837, #2b1a11); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(circle, #6a4433, #674837, #2b1a11); /* For Fx 3.6 to 15 */
    background: radial-gradient(circle, #6a4433, #674837, #2b1a11); /* Standard syntax (must be last) */
    float: left;
    padding: 20px 0px 20px 0px;
}

.video{
    margin-bottom: 10px;
    margin-top: 10px;
}

.video p{
    width: 100%;
    height: 45px;
    font-family: Open Sans;
    color: #ffffff;
    font-size: 16px;
    overflow: hidden;
}

.video img{
    width: 100%;
}

/*------- Onde encontrar ----*/
#onde-encontrar{
    width: 100%;
    padding: 20px 0px 20px 0px;
    background-image: url("../images/bg.jpg");
    background-size: 100% 100%;
    float: left;
}

.onde{
    width: 100%;
    background-color: #ec7906;
    opacity: 0.7;
    filter: alpha(opacity=70);
    font-family: Open Sans;
    color: #ffffff;
    font-size: 16px;
    padding: 5px;
    border: 1px solid #ffffff;
    margin-bottom: 5px;
}

/*----- Mapa -----*/

    #svg-map path { fill:#9b6b45 }
    #svg-map text { fill:#fff; font:12px Arial-BoldMT, sans-serif; cursor:pointer }
    #svg-map a{ text-decoration:none }
    #svg-map a:hover { cursor:pointer; text-decoration:none }
    #svg-map a:hover path{ fill:#803a0b !important }
    #svg-map .circle { fill:#795538 }
    #svg-map a:hover .circle { fill:#803a0b !important; cursor:pointer }


/* --------- Contato ---------*/
#contato{
    width: 100%;
    background-image: url("../images/lateral2.jpg");
    float: left;
}

.l_marrom{
    width: 100%;
    padding: 20px 0px 20px 0px;
    background-color: #b07e5d;
    float: left;
}

.form_contato input{
    border: 1px solid #ffffff;
    color: #803a0b;
    font-family: Open Sans;
    font-size: 16px;
    padding: 5px;
    background: transparent;
    width: 48%;
    margin: 10px 1% 0 1%;
    float: left;
}

.form_contato textarea{
    border: 1px solid #ffffff;
    color: #803a0b;
    font-family: Open Sans;
    font-size: 16px;
    padding: 5px;
    background: transparent;
    width: 98%;
    height: 200px;
    margin: 10px 1% 0 1%;
    float: left;
}

.btn_enviar{
    border: none;
    margin: 1%;
    background-color: #803a0b;
    font-family: Open Sans;
    font-size: 16px;
    color: #ffffff;
    padding: 5px 20px 5px 20px;
}

.contato{
    font-family: Open Sans;
    font-size: 20px;
    color: #ffffff;
    font-weight: bolder;
    float: left;
    text-align: center;
}

.contato2{
    font-family: Open Sans;
    font-size: 20px;
    color: #ffffff;
    float: left;
    text-align: center;
}


/* --------- Redes Sociais ---------*/
.redes_sociais{
    width: 100%;
    background-color: #311d14;
    padding: 20px 0px 20px 0px;
    float: left;
}

.redes_sociais a{
    font-family: Open Sans;
    color: #ffffff;
    margin-top: 30px;
    float: left;
}

.redes_sociais a:hover{
    font-weight: bolder;
    color: #b07e5d;
    text-decoration: none;
}

    

    






















/*------------------*/

@media (max-width: 1024px) {
   
.curso_curso .dia_mes2{
    width: 40%;
    float: left;
}

.curso_curso .dia_mes2 .dia2{
    height: 110px;
}

.curso_curso .dia_mes2 .mes2{
    height: 70px;
}

.curso_curso .img_principal{
    width: 60%;
    float: left;
}
    
    
    
}


@media (max-width: 980px) {

    .topo{
        
    }
    
    .logotipo{
        width: 25%;
        margin-top: 0px;
    }
    
    

}










@media (max-width: 800px) {
    
    .logotipo{
        display: none;
    }
    
    .logotipo_mobile{
        width: 25%;
        display: initial;
        float: left;
        padding: 3px 0px 3px 0px;
    }
    
    .nav_topo{
        width: 70%;
        float: left;
        text-align: center;
        padding-top: 20px;
    }
    
    .topo{
        background-image: none;
        background-color: #3d271b;
    }
    
    
    .layout{
    width: 90%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    min-height:100%;
    position:relative;
    }
  
    .titulo, .titulo2{
    font-size: 40px;
    }
    
    .texto{
        font-size: 14px;
    }
    


}


@media (max-width: 650px) {

    .esquerda{
        width: 50%;
    }

    .direita{
        width: 50%;
    }
    
     .curso_curso .dia_mes2 .dia2{
    height: 86px;
    font-size: 50px;
    }

    .curso_curso .dia_mes2 .mes2{
        height: 40px;
        font-size: 30px;
    }


}

@media (max-width: 480px) {

    #eventos .dia_mes{
        width: 40%;
        float: left;
    }

    #eventos .item .dia{
        height: 90px;
        font-size: 50px;
    }

    #eventos .item .mes{
        height: 50px;
        font-size: 35px;
    }

    #eventos .item img{
        width: 59%;
        height: 140px;
        margin-right: 1%;
    }
    
    .curso_curso{
    width: 55%;
    }
    
    .curso_curso .dia_mes2 .dia2{
    height: 90px;
    }
    
    .form_contato input{
    width: 48%;
    margin-right: 2%;
    font-size: 18px;
    margin-top: 15px;
    margin-bottom: 10px;
}

.form_contato textarea{
    width: 98%;
    height: 120px;
    font-size: 18px;
    margin-top: 15px;
}

.form_contato button{
    width: 70%;
    margin-left: 15%;
    font-size: 18px;
    margin-top: 20px;
}
}

@media (max-width: 400px) {

    #eventos .item .dia{
        height: 70px;
        font-size: 40px;
    }

    #eventos .item .mes{
        height: 35px;
        font-size: 25px;
    }

    #eventos .item img{
        width: 59%;
        height: 105px;
        margin-right: 1%;
    }
    
    .texto3{
    width: 99%;
    height: 77px;
    font-size: 18px;
    line-height: 15px;
    overflow: hidden;
    margin-right: 1%;
    }

    .curso_curso{
    width: 100%;
    }
    
    .curso_curso .dia_mes2 .dia2{
    height: 100px;
    font-size: 60px;
    }

    .curso_curso .dia_mes2 .mes2{
        height: 48px;
        font-size: 40px;
    }
    
    .curso_curso .dia_mes2{
    width: 50%;
    float: left;
    }
    
    .curso_curso .img_principal{
    width: 50%;
    float: left;
    }
    
    .endereco{
    font-size: 14px;
}

    
}