*{ 
margin:0; 
padding:0;
background-color:black;
}
h1{
	text-align:center;
	color:white;
	font-family: Verdana, Helvetica, sans-serif;
	margin-top:5px;
}
#tudo{
	width:100%;
	height:100vh;
}

.galeria {
	position:relative;
	width:35%;
	height:70%;
	margin-left:5%;
	margin-top:4%;
}

.mySlides {
	height:20%;
	padding:2px;
	border: solid 3px;
	color: white;
	margin:3px;
}
.mySlides img{
	position:relative;
}
#foto {
	min-height:75%;
	height:auto;
	width:35%;
	position:relative;
	margin-top:4%;
	float:right;
	margin-right:15%;
	align-items: center;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	z-index:1;
}

#foto img {
border:solid 6px white;
position: absolute;
max-width:100%;
height:100%;
text-align:right;
z-index: 1;
}
p {

text-align:center;
position:absolute;
display: block;
width:100%;
bottom:0;
color:white;
height:5%;
background:rgba(0,0,0,0.5);
z-index: 2;
font-weight:bolder;
}


#prev,#next{
	display:none;
	background-color:#dce0dd;
	-webkit-border-top-left-radius:0px;
	-moz-border-radius-topleft:0px;
	border-top-left-radius:0px;
	-webkit-border-top-right-radius:0px;
	-moz-border-radius-topright:0px;
	border-top-right-radius:0px;
	-webkit-border-bottom-right-radius:0px;
	-moz-border-radius-bottomright:0px;
	border-bottom-right-radius:0px;
	-webkit-border-bottom-left-radius:0px;
	-moz-border-radius-bottomleft:0px;
	border-bottom-left-radius:0px;
	text-indent:0;
	border:1px solid #ebebeb;
	color:#383838;
	font-family:arial;
	font-size:12px;
	font-weight:bold;
	font-style:normal;
	height:10%;
	line-height:39px;
	width:10%;
	text-decoration:none;
	text-align:center;
	opacity:0.5;
	
}#prev,#next:active {
	background-color:#858a83;
	opacity:1;
	border:none;
}

/* <<<<<<<--------- Layout Telas entre 550 e 1050 pixels ---------->>>>>>>>*/
@media only screen and (min-width: 800px) and (max-width:1050px){
	#foto{
		margin-right:5%;
		width:50%;
	}
	#foto img{
		height:100%;
		max-width:100%;
	}
}

@media only screen and (min-width: 700px) and (max-width:800px){
	#foto{
		height:40%;
		width:50%;
		margin-right:5%;
	}		
	#foto img{
		height:100%;
		max-width:100%;
	}
	.galeria img{
		height:15%;
	}
}	
@media only screen and (min-width: 550px) and (max-width:700px){
	#foto{
		height:20%;
		width:65%;
		margin-right:5%;
		
	}
	#foto img{
		height:100%;
		max-width:100%;
	}
	.galeria{
		width:30%;
		margin-left:2%;
	}
	.galeria img{
		height:10%;
	}
}

/* <<<<<<<--------- Layout Celular ---------->>>>>>>>*/

@media only screen and (max-device-width:550px), (max-width:550px) {
    .galeria{
        width:100%;
		height:80%;
		text-align:center;
		margin-left:auto;
		margin-right:auto;
	}
	.galeria img{
		width:auto;
		height:100%;
		margin:0 auto;
		position:relative;
		z-index:1;
		margin-left:auto;
		margin-right:auto;
	}
	
	#foto{
		display:none;
	}
p{
text-align:center;
position:absolute;
display: block;
width:100%;
bottom:0;
font-size:30px;
color:white;
height:5%;
background:rgba(0,0,0,0.5);
z-index: 2;
font-weight:bolder;
}
	#prev{
	left:0;
	margin-left:2%;
	opacity:0.5;
	background-color:#dce0dd;
}
#prev:active{
	opacity:1;
	background-color:#858a83;
}
#next{
	right:0;
	margin-right:2%;
}

	#prev,#next{
		display:inline-block;
		z-index:2;		
		position:absolute;
		top:50%;
	}
	
}