body{
	margin: 0px;
	text-align:center;
	background:#eee;
	overflow-x: hidden;
	padding-bottom: 200px;
	border-top: 8px solid #ccc;
}

.container{
	margin: 0px auto;
	width: 1000px;
	background: #fff;
	box-shadow: 0px 0px 100px rgba(0,0,0,0.15);
}


.topo{
	padding: 50px 0px 50px;
    display: block;
    text-align: center;
}
.topo img{
	max-width: 50%;
}

.main{
	padding: 30px;
	display:  flex;
	flex-direction:  row;
}

.main a {
	background:#fff;
	flex-grow:  1;
	display:  block;
	margin: 0 5px;
}
.main .left{
}
.main > *{
}
.main img {
    width: 100%;
}
.main a img:hover{
	opacity: 0.85;
}
.rodape{
	margin-top: 16px; 
	color:#666; 
	font-family: arial; 
	font-size: 13px;
}


@media (max-width:1023px){
	.container{
		margin: 0px 15px;
		width: inherit;
	}
	
	.main{
		margin: 0px;
		padding: 30px 0px;
		background: #EEE;
	}
	
    .main .left{
	    width: 400px;
    	float: none;
	    display: inline-block;
	    margin-right: 15px;
    }
    .main .right{
    	float: none;
    	width: 400px;
    	display: inline-block;
    }
    .topo{
    	padding: 40px 0px 40px;
    }
    

}


@media (max-width:870px){
	
    .main .left{
	    width: 300px;
    }
    .main .right{
    	width: 300px;
    }
}

@media (max-width:870px){
	
    .main .left{
	    width: 300px;
    }
    .main .right{
    	width: 300px;
    }
}
@media (max-width:670px){
	.main{
		margin: 0;
		background: #f2f2f2;
		padding: 20px 0px;
	}
    .main .left{
	    margin-bottom: 20px;
	    margin-right: 0px;
    }
}



@media (max-width:400px){

    .topo{
    	padding: 20px 0px 20px;
    }
    .topo img {
        max-width: 60%;
    }

    .main a{
    	width: 80% !important;
    }
    .rodape{
    	font-size: 11px;
    }

}