html, body, div, p{
	margin: 0;
	padding: 0;
	border: 0; font-family: 'Roboto', sans-serif; font-size:18px; 
  }
  
body {background: #f4f4f4}






.opendiv{ width:100%; height:auto; padding: 5px 5px 5px 25px; background-color:transparent; color:#FFFFFF; cursor:pointer; font-size: 24px;}


.bar1, .bar2, .bar3 {
    width: 35px;
    height: 2px;
    background-color: #000;
    margin: 6px 0;
    transition: 0.4s;
}





.hamburguer{ margin-left:30px; margin-top:30px; padding-top:30px; color:#FFFFFF; font-size:36px; cursor:pointer}
/* The side navigation menu */
.sidenav { line-height:20px;
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 10000; /* Stay on top */
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.9); /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px; text-align:center;
    text-decoration: none;
    font-size: 24px;
    color: #818181;
    display: block;
    transition: 0.3s
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1; text-decoration:none;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 15px;
    right: 50px;
    font-size: 36px;
    margin-left: 50px; font-size:36px;
}



@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}








h1 {font-family: 'Roboto', sans-serif; font-size:36px; font-weight:400; color:#3d3c3d; }
h2 {font-family: 'Roboto', sans-serif; font-size:24px; font-weight:400; color:#3d3c3d;} 
h3 {font-family: 'Roboto', sans-serif; font-size:18px; font-weight:200; color:#3d3c3d; } 
h4 {font-family: 'Roboto', sans-serif; font-size:16px; font-weight:200; color:#3d3c3d;}  
h5 {font-family: 'Roboto', sans-serif; font-size:14px; font-weight:200; color:#3d3c3d;} 
p { font-family: 'Roboto', sans-serif; font-size:18px; font-weight:400; color:#3d3c3d;}

a { color: #fff; text-decoration: none}
a:hover { color: #ff0000; text-decoration: none}


@font-face {
     font-family: 'ASENINE';
     src: url(font/ASENINE.ttf);
}
.tin{font-family: ASENINE; font-size: 24px;}



.top{ width: 100%; height: auto; padding: 10px; background-color: #fff; color: #000; text-align: right; }
.top a { color: #000; text-decoration: none}
.top a:hover {color: #ff0000; text-decoration: none}


.peq{ font-size: 10px}


.shad1{
    -webkit-box-shadow: 0 10px 6px -6px #777;
       -moz-box-shadow: 0 10px 6px -6px #777;
            box-shadow: 0 10px 6px -6px #777;
}


.shad2
{
  position: relative;
}
.shad2:before, .shad2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.shad2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}


#wrap{ width: 95%; height: auto; margin: 0 auto;}

#logo{width: 100%; height: 60px; text-align: center}

.centered{text-align: center}
.cinza {color: #3d3c3d}
.blanc{color: #fff}
.priz {font-size: 24px; font-weight: 700; color: #ff0000; }
.prizz {font-size: 24px; font-weight: 700; color: green}

span img { border: solid 4px #3c3d3c; border-radius:70px;  }

.primeira{ width:60px; height:60px; padding:7px; background-color:#D61A0C; color:#FFFFFF; font-size:36px; margin-right:7px; text-align:center}


.ban{ 
    width: 100%;
    height:500px;
    background-image: url(../images/bg.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ban-item{flex: 1;
    text-align: center;
    text-shadow: 2px 2px 2px #3c3d3c;
}

.ban-item h1{font-family: 'Roboto', sans-serif; font-size:50px; font-weight:700; color:#fff; }

.ban2{ 
    width: 100%;
    height:500px;
    background-image: url(../images/bg2.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ban2-item{flex: 1;
    text-align: center;
    text-shadow: 2px 2px 2px #3c3d3c;
}

.ban2-item h1{font-family: 'Roboto', sans-serif; font-size:50px; font-weight:700; color:#fff; }



.historia { 
width: 100%;
 height:auto; 
 padding:30px;
 display:flex;}

.historia-item {

 margin:auto; text-align:center;
}
.historia a { color:#000; text-decoration:none}
.historia a:hover { color:#ff0000; text-decoration:none}

.capa {
    width: 100%;
    height: auto;
    padding: 30px;
    text-align: left;
    display: flex;
    background-color: #54CF8B;
}

.capa-item{
    width: 100%;
    flex: 1;
    
}


.dupla {

 width: 100%;
 height:auto; 
 padding:30px;
 color:#fff;
 display:flex;
    align-items: center;
 background-color: #283E4E;    
 

}

.dupla-um {
 width: 100%;
 height:auto; 
 padding:30px;
 flex:1;
 text-align: right;    

}

.dupla-um a { color:#000; text-decoration:none}
.dupla-um a:hover { color:#ff0000; text-decoration:none}

.dupla-dois {
 width: 100%;
 height:auto; 
 padding:30px;
 flex:1;
 text-align: left;
 color: #fff;

}

.tithead{width: 100%;
height: auto;
padding: 20px;
background-color: tomato;}

.tithead h1{font-size: 60px; font-weight: 700; text-align: center; color: #fff}
.tithead p{font-size: 30px; font-weight: 700; text-align: center; color: #fff}

.tripla{
 width: 100%;
 height:auto;
 background-color: tomato;
 padding:30px;
 display: flex;
 justify-content: space-between;
 

}



.tripla-item{
	padding: 20px;
	box-sizing:border-box;
	margin-bottom:20px;
	flex-basis:30%;
	
}

.tripla-item em{text-decoration: line-through}

.tripla-item:nth-child(1){ background-color: #fff; }
.tripla-item:nth-child(2){ background-color: #fff;}
.tripla-item:nth-child(3){ background-color: #fff;}


.tripla-site{
 width: 100%;
 height:auto; 
 padding:30px;
 display: flex;
 justify-content: space-between;    

 

}

.tripla-site-item{
	padding: 20px;
	box-sizing:border-box;
	margin-bottom:20px;
    
	flex-basis:30%;
    
	
	


}



.tripla-site-item:nth-child(1){ background-color: #D76D77; }
.tripla-site-item:nth-child(2){ background-color: #D76D77;}
.tripla-site-item:nth-child(3){ background-color: #D76D77;}


.tripla-quem{
 width: 100%;
 height:auto; 
 padding:30px;
 display: flex;
  

 

}

.tripla-quem-item{
	padding: 20px;
	box-sizing:border-box;
	margin-bottom:20px;
    
	
    
	
	


}



.tripla-quem-item:nth-child(1){ flex: 1; background-color: transparent; }
.tripla-quem-item:nth-child(2){ flex: 2; background-color: transparent;}
.tripla-quem-item:nth-child(3){ flex: 1; background-color: transparent;}




.quadra{
 width: 100%;
 height:auto; 
 padding:30px;
 display: flex; 

 

}

.quadra-item{
	padding: 20px;
	box-sizing:border-box;
	margin-bottom:20px;
	flex-basis:25%;
   

}

.quadra-item img:hover{
   
   -ms-transform: scale(1.2); /* IE 9 */
   -webkit-transform: scale(1.2); /* Safari */
   transform: scale(1.2); /* Standard syntax */
   transition: all .5s linear;

}



.quadra-item:nth-child(1){ background-color: transparent; border:solid 1px #3A1C71}
.quadra-item:nth-child(2){ background-color: transparent; border:solid 1px #3A1C71}
.quadra-item:nth-child(3){ background-color: transparent; border:solid 1px #3A1C71}
.quadra-item:nth-child(4){ background-color: transparent; border:solid 1px #3A1C71}

.destaque{
 width: 100%;
 height:auto; 
 padding:30px;
 display:flex;

 

}

.destaque-um{
	
	margin-bottom:20px;
	background-color:transparent;
	flex:1;
	

}

.destaque-two{
	
	margin-bottom:20px;
	
	flex:1;
	display:flex;
	flex-direction:column;
	

}
.destaque-two-a{ 
background-color:#3A1C71;
color: #FFF8DC;    
padding-left: 20px; 
padding-right: 20px; 
flex:1;
}
.destaque-two-b{ 
background-color:#FFF8DC;
color: #3A1C71;    
padding-left: 20px; 
padding-right: 20px; 
flex:1;
}
.destaque-two-c{ 
background-color:#3A1C71;
color: #FFF8DC;    
padding-left: 20px; 
padding-right: 20px; 
flex:1;
}
.destaque-two-d{ 
background-color:#FFF8DC;
color: #3A1C71;    
padding-left: 20px; 
padding-right: 20px; 
flex:1;
}

.rotulo{
 width: 100%;
 height:auto; 
 padding:30px;
 display:flex;

 

}

.rotulo-um{
	
	margin-bottom:20px;
	background-color:#fff;
	flex:1;
	

}

.rotulo-two{
	
	margin-bottom:20px;
	background-color:#6633FF;
	flex:1;
	display:flex;
	flex-direction:column;
	

}
.rotulo-two-a{ 
background-color: #33FF66; 
padding-left: 20px; 
padding-right: 20px; 
flex:1;
}
.rotulo-two-b{ 
background-color: #33CC66; 
padding-left: 20px; 
padding-right: 20px; 
flex:2;
}

.imghover{
position:relative;
overflow:hidden;
}

.imghover img{
width:100%;
}

.texthover{
position:absolute;
top:0;
margin-left:-100%;
padding-top: 20px;
width:100%;
height:100%;
background: rgba(30, 30, 30, .8);
color:#FFFFFF;
transition:.5s; border-radius: 7px;
}

.texthover h3 {
margin:0;
padding:0;
position:absolute;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-50%);

}

.texthover a { color:#FFFFFF; text-align:center; text-decoration:none}
.texthover a:hover { color:#ccc; text-align:center; text-decoration:none}

.imghover:hover  .texthover{
margin-left:0;
}

.head{ width:100%; height:auto}


.category_container{width:100%; 
display:block;
margin:0 auto;
overflow:hidden; }

.category_item{ float:left;
width:20%;
background-color:#FFFFFF;
padding:20px 0;
text-align:center;
cursor:pointer;
font-size:15px;
color:#000000}

.category_item:hover{ background-color:#000000;
color:#FFFFFF}

.block_container{
width:100%;
display:block;
margin:0 auto;
box-sizing:border-box;}

.animal_category{box-sizing:border-box;
float:left;
width:20%;
transition: all 0.8s ease-in-out;}

.hide{ transform: scale(0);
padding:0;
width:0;
transition: all 0.8s ease-in-out;}



@media (min-width:900px){

.tripla{
 display:flex;
 justify-content:space-between;
}

}






@media (max-width:768px){


.dupla, .tripla, .quadra, .destaque, .tripla-quem, .tripla-site {
flex-direction:column;

}
    
   





}