body{
	background-color: #FBF387; 
	width: 720px;
    margin:0 auto;
}

h1{
	color: #070707;
	/*text-shadow: 2px 2px 4px #000000;*/
}

#menu-container{
		background:#070707;
		width:100%;
		height:62px;
		float:center;
		margin-top:15px;
	   
}
	   
#menu{
	width:720px;
	height:center;
	margin:0 auto 0 auto;
	
}

#menu ul{
	list-style-type:none;
}
#menu ul li{
	float:left;	
	height:62px;
	line-height:62px;
	
}
#menu ul li a{
	text-decoration:none;	
	color:#fff;
	display:block;
	margin-right:65px;
	height:62px;
	line-height:62px;
	padding:0 5px 0 5px;
	

}
#menu ul li a:hover{
	background:#423E3E

}

#rodape-container{
		background:#070707;
		width:100%;
		height:62px;
		float:center;
		margin-top:10px;
	    font-style: normal; 
	    font-weight: 300; 
	    font-size: 12px; 
	    font-family: convergence;
	    color:white;
	   
}

#principal-container{
		
		width:100%;
		height:45px;
		float:center;
		margin-top:10px;
	    font-style: normal; 
	    font-weight: 300; 
	    font-size: 16px; 
	    font-family: convergence;
	   
	 
	
}
#principal2-container{
		
		width:100%;
		height:20px;
		float:center;
		margin-top:1px;
	    font-style: normal; 
	    font-weight: 300; 
	    font-size: 14px; 
	    font-family: convergence;
	   
	 
	
}


.slider {
     display: block;
     height: 293px;
     width: 300px;
     margin: auto;
     margin-top: 20px;
     position: relative;
 }
.slider li {
	list-style: none;
	position: absolute;
	left: 147px;
	top: 8px;
	width: 270px;
	height: 280px;
 }

.slider img {
     margin: auto;
     height: 100%;
     width: 100%;
     vertical-align: top;
 } 

.slider input {
    display: none;
}

.slider label {
	background-color: #000;
	bottom: 9px;
	cursor: pointer;
	display: block;
	height: 10px;
	position: absolute;
	width: 10px;
	z-index: 10;
	left: 78px;
 }

 .slider li:nth-child(1) label {
     left: 10px;
 }
 .slider li:nth-child(2) label {
     left: 40px;
 }

 .slider li:nth-child(3) label {
     left: 70px;
 } 
.slider li:nth-child(4) label {
     left: 100px;
 } 
.slider li:nth-child(5) label {
     left: 130px;
 } 

.slider img {
     opacity: 0;
     visibility: hidden;
 }
 .slider li input:checked ~ img {
     opacity: 1;
     visibility: visible;
     z-index: 10;
 } 
	  
/* Page style
   !!You don't need this for you gallery works!! */
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wtricks-headerbar {
  width: 100%;
  height: 50px;
  background: #FFC402;
  padding-top: 10px;
}
  .wtricks-logo {
    width: 286px;
    height: 77px;
    margin: 0 auto;
    display: block;
    text-indent: -9999px;
    background: url('http://cdn.wtricks.com.br/images-theme/logo.png');
  }

.wrap {
  width: 100%;
  height: 100vh;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

  .page-header, .page-footer {
    width: 100%;
    margin: 20px;
    text-align: center; /* Take careful when you use text-align center
       Bacause this affects postion of gallery navigation! I recomend you use it
       inside a container like this. */
  }
      @media (min-width: 700px) {
        .page-header, .page-footer {
          width: 700px;
          padding: 0;
        }
      }
    .page-header p {
      margin-top: 20px;
      font-size: .8em;
    }
.page-footer p {
  color: #ccc;
}
.page-footer a {
  color: #000;
  text-decoration: none;
}

/* Final page style
   !!Below this line, Gallery's code starts!!*/

/* Slideshow container */
.gallery-container {
  width: 25%;
  position: relative;
  margin: 0 5%;
  background: #333;
  padding: 2px;
}
  @media (min-width: 480px) {
      .gallery-container {
        width: 700px;
        margin: auto;
      }
  }

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  background-color: rgba(0,0,0,0.1);
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  width: 100%;
  text-align: center;
}

.imgslide {
  width: 100%;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
@media (max-width: 768px) {
  .numbertext {
    top: 15px;
  }
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:225px;
		height:300px;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{ 
		display:block;
		width:30px;
		height:77px;
		position:absolute;
		left:-30px;
		top:71px;
		z-index:300;
		}	
	#nextBtn, #slider1next{ 
		left:696px;
		}														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{  
		display:block;
		position:relative;
		width:30px;
		height:77px;
		background:url(../images/btn_prev.gif) no-repeat 0 0;	
		}	
	#nextBtn a, #slider1next a{ 
		background:url(../images/btn_next.gif) no-repeat 0 0;	
		}	
		
	/* numeric controls */	

	ol#controls{
		margin:1em 0;
		padding:0;
		height:28px;	
		}
	ol#controls li{
		margin:0 10px 0 0; 
		padding:0;
		float:left;
		list-style:none;
		height:28px;
		line-height:28px;
		}
	ol#controls li a{
	float:left;
	height:28px;
	line-height:28px;
	border:1px solid #ccc;
	color:#000;
	padding:0 10px;
	text-decoration:none;
	background-color: #CCCCCC;
		}
	ol#controls li.current a{
	color:#000;
	background-color: #999999;
		}
	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
	
/* // Easy Slider */


     .box {
         width: 300px;
         height: 300px;
		 display: flex;
      margin: auto auto auto auto;
		 
     }