/*
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 : 30/05/2018, 14:18:32
    Author     : Lucio
*/

@font-face {
     font-family: bitsumishi;
     src: url(BITSUMIS.TTF);
     
     font-family: aldo;
     src: url(Aldo_PC.ttf);
     
     font-family: arimo;
     src: url(Arimo-Regular.ttf);
}
body{
   
    font-family: arial;
    font-size: 12px;
    margin: 0;
    
}
hr{
    border-style: inset;
    border-width: 2px;
    border-color: #18155b;
}

.imagem_topo .img{
    width: 100%;
    
}

.before_header{
    background-color: #e8ecf1;
    min-height: 20px;
}

.before_header .dados{
    padding: 5px;
    font-size: 12px;
}

.img_header{
  float: left;
  padding-top: 30px;
  margin-left: 5%;
  color: #fbba1e;
  font-size: 14px;
  text-decoration: none;
}

.img_header_bt{
  float: left;
  padding-top: 30px;
  margin-left: 3%;
  color: #fbba1e;
  font-size: 14px;
  text-decoration: none;
}

.menu{
    font-size: 12px;
    padding-top: 20px;
}

.recursos{
    background-color: #5a5a5a;
    min-height: 400px;
    
    
}

.recurso_titulo{
    font-size: 22px;
    font-weight: 200;
    color:white;
    padding-top: 20px;
}

.produtos{
    background-color: white;
    margin-top: 20px;
    padding-top: 20px;
    height: 300px;
}

.texto_produto{
    font-size: 13px;
    font-weight: 200;
    color: white;
}

.texto_produto .h4{
    color:white;
}

.compra{
    padding-top: 30px;
}

.forma{
    padding: 50px;
}
.info_centro{
    text-align: center;
     width: 25%;
     float: left;
}
.img_center{
  float: left;
  padding-top: 10px;
  margin-left: 5px;
  color:#F9690E;
  
}

.texto{
    float: left;
    padding-top: 30px;
    padding-left: 5px;
    text-decoration: none;
  
   
}
.rodape{
padding-top: 20px;   
background-color: #6c7a89;
width: 100%;
color: white;
padding-bottom: 20px;   

}

.cabecalho a{
    font-size: 18px;
}

.rodape_leftside{
    padding-left: 30px;
}

.titulo_empresa{
    color: #18155b;
}

.texto-empresa{
    font-size: 18px;
    color:#18155b;
    background-color: yellow;
}


.texto_rodape{
    font-size: 16px;
    margin-left: 20px;
    color:white;
    
}

.texto_rodape a{
    color:white;
}

.social{
    padding-top: 30px;
}

.alertas_compra{
    padding-left: 80px;
}

.rodape_leftside{
    margin-top: 10px;
    width: 50%;
    height: 200px;
    float: left;
    border: #ffcc66 Solid 5px; 
    background-color: #FFF;  
    font-size: 16px;
    
}

.rodape_rigthside{
    width: 50%;
    height: 200px;
    float: right;
}

.rodape_centerside{
    width: 50%;
    height: 200px;
    float: right;
}


.endereco{
    background-color: black;
    text-align: center;
    height: 40px;
    padding-top: 8px;
    color:white;
}

.topo2 {
    color: red;
    height: 100px;
    text-align: center;  
    width: 100%;
    
 }

 .topo3{
    color: #fbba1e;
    height: 80px;
    text-align: center;  
    width: 100%;
    font-size: 16px;
}

.logo{
    float: left;
    margin-top: 15px;
    margin-left: 40px;
    margin-bottom: 15px;
   
}

.logo img{
   width: 150px;
}

.logo_rodape{
    float: left;
    margin-top: 15px;
    margin-left: 20px;
    margin-bottom: 15px;
   
}

.logo_rodape img{
    margin-bottom: 5px;
    width: 100px;
}
.logo img{
    margin-bottom: 5px;
   
}

.slideshow{
    width: 100%;
    height: 400px;
    background-image: url("assets/images/b7.jpg");
    background-color: black;
    overflow: hidden;
    margin-bottom: 0px;
    
}

.slideshowarea{
    height: 400px;
    background-color: #DDD;
    transition: all 1s;
}

.slide{
    height: 400px;
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    
}

.slideinfo{
    height: 50px;
    background-image: url('..images/slideshow_bg.png');
    background-size: auto 70px;
    margin-top: 165px;
}

.slideinfo_titulo{
    font-size: 20px;
    color:#FFF;
    padding-top: 15px;
    padding-left: 20px;
}

.slideinfo_subtitulo{
    font-size: 13px;
    color:#FFF;
    padding-left: 20px;
}

.slidebolinhas{
    margin-top: 5px;
    position: absolute;
    width: 100%;
    height: 20px;
    
}

.bolinha{
    width: 20px;
    height: 20px;
    float: right;
    margin-right: 5px;
    cursor:pointer;
    border-radius: 10px;
    background-color: #F9690E;
}


.contatos{
   /** width: 250px;
    height: 800px;
    float: right;
    margin-top: 10px;**/
    text-align: left;
    margin-left: 30%;
    margin-right: 30%;
   
}

.separa{
    
    height: 30px;
    background-color: #fbba1e;
}

.containerint{
    width: 100%;
    margin: auto;
      /**height: 1300px;
       max-width: 1140px;
  position: absolute;**/
   
    
}


.widget{
    background-color: #FFF;
    border:1px solid #CCC;
    margin-bottom: 10px;
    font-size: 16px;
}

.widget_titulo{
    text-align: center;
    height: 30px;
    background-color:  #C8F7C5;
    border-bottom: 1px solid #CCC;
    line-height: 30px;
    padding-left: 5px;
    font-size: 20px;
    color:#22313F;
    font-family: aldo;
}

.widget_conteudo{
    font-family: arimo;
    text-align: center;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    font-family: arimo;
}

.galeria{
    width: 100%;
    height: 465px;
    position: relative;
    overflow: hidden;
}

.foto{
    position: absolute;
    opacity: 0;
    animation-name: animacao;
    animation-duration: 25s;
    animation-iteration-count: infinite;
}

.foto:nth-child(1){
    
}
.foto:nth-child(2){
    animation-delay: 5s;
}.foto:nth-child(3){
    animation-delay: 10s;
}.foto:nth-child(4){
    animation-delay: 15s;
}.foto:nth-child(5){
    animation-delay: 20s;
}
@keyframes animacao{
    25%{
        opacity:1;
        transform:scale(1.1,1.1);
    }
    
    50%{
        opacity:0;
        
    }
}

.frm_compra{
    padding: 50px;
}

@media only screen and (min-width:960px) and (max-width:1180px){
    body{
        padding-left: 40px;
    }
    
    
    .topo2
    .containerint{
        max-width: 960px;
    }
    
    .logo img{
    width: 150px;
   }
   
.topo3{
    color: #fbba1e;
    height: 80px;
    text-align: center;  
    width: 100%;
    font-size: 14px;
}

.img_center{
  float: left;
  padding-top: 10px;
  margin-left: 5px;
  color:#F9690E;
}

.img_header{
  float: left;
  padding-top: 30px;
  margin-left: 3%;
  color: #fbba1e;
  font-size: 14px;
  text-decoration: none;
}

.img_header_bt{
  float: left;
  padding-top: 30px;
  margin-left: 3%;
  color: #fbba1e;
  font-size: 14px;
  text-decoration: none;
}
.galeria{
    
    height: 401px;
}


    
}
@media only screen and (min-width:768px) and (max-width:960px) {
    .topo2
    .topo3
    .containerint{
        max-width: 768px;
    }
    

 
.logo img{
    width: 100px;
}

.topo3{
    color: #fbba1e;
    height: 80px;
    text-align: center;  
    width: 100%;
    font-size: 16px;
}

.img_center{
  float: left;
  padding-top: 10px;
  margin-left: 5px;
  color:#F9690E;
}    

.img_center img{
    padding-top: 10px;
    width: 50px;
}

.texto{
    float: none;
    padding-top: 25px;
    padding-left: 10px;
    text-decoration: none;
   
}
.galeria{
    
    height: 326px;
}
}
@media only screen and (min-width:640px) and (max-width:768px) {
    .topo2
    .topo3
    .containerint{
        max-width: 640px;
    }
    
    

.logo_rodape{
    float: none;
    margin-top: 15px;
    margin-left: 20px;
    margin-bottom: 15px;
   
}

.topo3{
    color: #fbba1e;
    text-align: left;  
    width: 100%;
    font-size: 14px;
    clear: both;
}

.img_center{
  float: left;
  padding-top: 10px;
  padding-left: 10px;
  margin-left: 20px;
  color:#F9690E;
}

.img_center img{
    width: 40px;
}

.texto{
    float: none;
    padding-top: 20px;
    padding-left: 10px;
    text-decoration: none;
    
}
.galeria{
  
    height: 217px;

}
}
@media only screen and (min-width:480px) and (max-width:640px) {
    .topo2
    .topo3
    .containerint{
        max-width: 480px;
    }
 
    .rodape{
        height: 100%;
    }    
    .endereco{
    display: none;
   }    
    .logo_rodape{
        display: none;
    }

.contatos{
    margin-left: 10%;
    margin-right: 10%;
}

.topo3{
    color: #fbba1e;
    text-align: left;  
    width: 100%;
    font-size: 14px;
    clear: both;
}

.img_center{
  float: left;
  padding-top: 10px;
  padding-left: 10px;
  margin-left: 20px;
  color:#F9690E;
}

.img_center img{
    width: 50px;
}

.texto{
    float: left;
    padding-top: 15px;
    padding-left: 0px;
    text-decoration: none;
   
}
.galeria{
    width: 100%;
    height: 168px;
}
}

@media only screen and (min-width:320px) and (max-width:480px) {
    .topo2
    .topo3
    .containerint{
        max-width: 480px;
    }
 
    .rodape{
        height: 100%;
    }    
    .endereco{
    display: none;
   }    
    .logo_rodape{
        display: none;
    }

.contatos{
    margin-left: 10%;
    margin-right: 10%;
}

.topo3{
    color: #fbba1e;
    text-align: left;  
    width: 100%;
    font-size: 14px;
    clear: both;
}

.img_center{
  float: left;
  padding-top: 10px;
  padding-left: 10px;
  margin-left: 20px;
  color:#F9690E;
}

.img_center img{
    width: 50px;
}

.texto{
    float: left;
    padding-top: 15px;
    padding-left: 10px;
    text-decoration: none;
}
.galeria{
   
    height: 108px;
}
}

@media only screen and (max-width:320px) {
    .topo2
    .topo3
    .containerint{
        max-width: 320px;
    }
 
    .rodape{
        height: 100%;
    }    
    .endereco{
    display: none;
   }    
    .logo_rodape{
        display: none;
    }

.contatos{
    margin-left: 10%;
    margin-right: 10%;
}

.topo3{
    color: #fbba1e;
    text-align: left;  
    width: 100%;
    font-size: 12px;
    clear: both;
}

.img_center{
  float: none;
  padding-top: 10px;
  padding-left: 10px;
  margin-left: 10px;
  color:#F9690E;
}

.img_center img{
    width: 20px;
}

.texto{
    float: none;
    padding-top: 15px;
    padding-left: 10px;
    text-decoration: none;
}
.galeria{
   height: 108px;
}
}
}