@charset "utf-8";
/* CSS Document */

* {
	padding: 0px;
	margin: 0px;
}

a:link, a:visited {
	text-decoration: none;
	color:#000;
}
a:hover {
	text-decoration: none;
	color: #009;
}
a:active {
	text-decoration: none;
	color:#009;
}

body {
	background-image: url("../images/fundopapel12160x3240.jpg");
	background-repeat: round;
}

.psubtitle {
	padding: 0px 3.5vw;
	font-weight: bold;
	font-size: 4vw;
}

.grid {
	display: grid;
	grid-template-columns: calc(100vw - scrollbarWidth);
	grid-template-rows: 44vw 7vw auto;
/*	minmax(calc(100vh - 50vw), 10000px)*/
/*	calc(100vh - 58vw)*/
	grid-template-areas:
		"header"
		"menus"
		"content";
	height: 150vw;
}

.header {
	grid-area: header;
	background-image: url("../images/RiusCrop2.jpg");
	background-position: center;
	background-size: cover;
	height: 40vw;
	width: calc(100vw - scrollbarWidth);
	position: relative;
	margin: 1vw;
	border-style: outset;
	border-width: 1vw;
	border-color: rgba(100,100,100,0.85);
	border-radius: 2vw;
}

#nome {
	background-color: rgba(255,255,255,0.85);
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 4vw;
	text-align: center;
	width: 58%;
	font-weight: bolder;
	border: 0.5vw solid darkgray;
	border-radius: 3vw;
	padding: 1.5vw;
	margin: 2vw;
}

#pten {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0.2vw 0.4vw;
}
	
#socialmedias {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0.3vw;
}

.imgicon {
	margin: 0.1vw;
	width: 4vw;
	opacity: 0.8;
}

.menus {
	grid-area: menus;
	background-color: rgba(0,0,255,0.00);
	text-align: center;
	font-size: 3vw;
	font-weight: bold;
	width: calc(100vw - scrollbarWidth);
}

.menuButton {
	background-color: rgba(150,150,150,0.25);
	padding: 0.2vw 1vw;
	border-style: outset;
	border-width: 1vw;
	border-color: rgba(100,100,100,0.85);
	border-radius: 2vw;
	display: inline-block;
	width: 14.8%;
}

.content {
	grid-area: content;
	background-color: rgba(255,255,255,0.80);
	clear: both;
	text-align: left;
	font-size: 3.5vw;
	border-style: outset;
	border-width: 1vw;
	border-color: rgba(100,100,100,0.85);
	border-radius: 2vw;
	margin: 0vw 1vw 1vw 1vw;
	padding: 3vw 0vw 3vw 0vw;
	width: calc(100vw - scrollbarWidth);
}

@media screen and (orientation: landscape) {
	body {
		background-image: url("../images/fundopapel12160x3240.jpg");
		background-repeat: round;
	}

	.psubtitle {
		padding: 0px 1.75vw;
		font-size: 2vw;
	}
	
	.grid {
		grid-template-rows: 35vw 5.5vw auto;
	}

	.header {
		height: 33vw;
		margin: 0.5vw;
		border-width: 0.5vw;
		border-radius: 1vw;
	}

	#nome {
		font-size: 3vw;
		width: 50%;
		font-weight: bolder;
		border: 0.25vw solid darkgray;
		border-radius: 1.5vw;
		padding: 0.75vw;
	}

	#pten {
		margin: 0.1vw 0.2vw;
	}
	
	#socialmedias {
		margin: 0.2vw;
	}
	
	.imgicon {
		margin: 0.1vw;
		width: 3vw;
	}

	.menuButton {
		padding: 0.2vw 0vw;
		border-width: 0.5vw;
		border-radius: 1vw;
		width: 18.15%;
	}

	.content {
		font-size: 1.75vw;
		border-width: 0.5vw;
		border-radius: 1vw;
		margin: 0vw 0.5vw 0.5vw 0.5vw;
		padding: 1.5vw 18%;
	}
}