html, body, div, p{
	margin: 0;
	padding: 0;
	border: 0; font-family: 'Raleway', sans-serif; font-size:20px;
  }
  
body {background: #fff}

        #box1{
            height: 100vh;
            width: 100%;
            background-image: url(../images/Milkzine2020.jpg);
            background-size: cover;
			background-position:center top;
            display: table;
            background-attachment: fixed;
        }
		#box1 img{ margin:30px}
        #box2{
            height: 100vh;
            width: 100%;
            background-image: url(../images/Milkzine2020_1.jpg);
            background-size: cover;
			background-position:center top;
            display: table;
            background-attachment: fixed;
        }
        #box3{
            height: 100vh;
            width: 100%;
            background-image: url(../images/Milkzine2020_2.jpg);
            background-size: cover;
			background-position:center top;
            display: table;
            background-attachment: fixed;
        }
        h1.box{
            font-family: 'Raleway', sans-serif; color:#3d3c3d;
			font-size:50px;
			font-weight:900;
			padding-left:40px;
            text-align: left;
            display: table-cell;
            vertical-align: middle;
        }




.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;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    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.6); /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    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: #fff; text-decoration:none;
    display: block;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, a:visited, .offcanvas a:focus{
    color: #ff0000; 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;
}

.flipe1{ color:#FFFFFF}
.flipe1 a{ color:#000}
.flipe1 a:hover{ color:#FF0000}
.flipe1 a:visited{ color:#FF0000}

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






h1 {font-family: 'Raleway', sans-serif; color:#3d3c3d; font-size:50px; font-weight:900;  }
h2 {font-family: 'Raleway', sans-serif; color:#3d3c3d; font-size:36px; font-weight:600; } 
h3 {font-family: 'Raleway', sans-serif; color:#3d3c3d; font-size:24px; font-weight:400; } 
h4 {font-family: 'Raleway', sans-serif; color:#3d3c3d; font-size:20px; font-weight:400; }  
h5 {font-family: 'Raleway', sans-serif; color:#3d3c3d; font-size:18px; font-weight:400; } 
p { font-family: 'Raleway', sans-serif; color:#3d3c3d; font-size:18px; font-weight:400;}

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




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




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

.centered{text-align: center}
.cinza {color: #3d3c3d}

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

.historia { 
width: 100%;
 height:auto; 
 padding:30px;
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;}

.historia-item {

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

.dupla {

 width: 100%;
 height:auto; 
 padding:30px;
 color:#000;
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 

}

.dupla-um {
 width: 100%;
 height:auto; 
 padding:30px;
 -webkit-box-flex:1;
     -ms-flex:1;
         flex:1;

}

.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;
 -webkit-box-flex:2;
     -ms-flex:2;
         flex:2;

}

.tripla{
 width: 100%;
 height:auto; 
 padding:30px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: justify;
     -ms-flex-pack: justify;
         justify-content: space-between;
 

}

.tripla-item{
	padding: 20px;
	-webkit-box-sizing:border-box;
	        box-sizing:border-box;
	margin-bottom:20px;
	-ms-flex-preferred-size:30%;
	    flex-basis:30%;
	
	


}



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


.quadra{
 width: 100%;
 height:auto; 
 padding:30px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex; 

 

}

.quadra-item{
	padding: 20px;
	-webkit-box-sizing:border-box;
	        box-sizing:border-box;
	margin-bottom:20px;
	-ms-flex-preferred-size:25%;
	    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 */
   -webkit-transition: all .5s linear;
   -o-transition: all .5s linear;
   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:-webkit-box;
 display:-ms-flexbox;
 display:flex;

 

}

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

}

.destaque-two{
	
	margin-bottom:20px;
	
	-webkit-box-flex:1;
	
	    -ms-flex:1;
	
	        flex:1;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	    -ms-flex-direction:column;
	        flex-direction:column;
	

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


.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;
-webkit-transition:.5s;
-o-transition:.5s;
transition:.5s; border-radius: 7px;
}

.texthover h3 {
margin:0;
padding:0;
position:absolute;
top:50%;
left:50%;
-webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-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;
-webkit-box-sizing:border-box;
        box-sizing:border-box;}

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

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







@media (max-width:768px){


.dupla, .tripla, .quadra, .destaque, .tripla-quem, .tripla-site {
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
    -ms-flex-direction:column;
        flex-direction:column;

}
    
#box1 img{ visibility:hidden}   

#box1, #box2{ display:none} 



}