/*GERAL*/
:root{
	--black: rgba(5,5,5,1);
	--bright-gray: rgba(160,160,160,1);
	--bright-red: rgba(220,0,0,1);
	--dark-gray: rgba(80,80,80,1);
	--dark-red: rgba(80,0,0,1);
	--red: rgba(160,0,0,1);
	--white: rgba(245,245,245,1);
}
html{word-break: break-all;}
body{
	background: var(--red) url(images/cutlery.jpg) center/cover no-repeat fixed;
	/*background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;*/
	color: var(--black);
	font-family: "Times New Roman", Times, serif;
	font-size: 16pt;
	margin: 0px;
}
/*Textos*/
h3{
	font-size: 6vw;
	margin: 0px;
}
h4{
	background-color: var(--white);
	margin: 0px;
	text-transform: uppercase;
}

/*TÍTULO*/
#section-title{
	text-align: center;
	width: 100%;
}
#section-title h1{
	color: var(--white);
	font-family: fantasy;
	font-size: 8vw;
	margin: 0px;
	padding-top: 10%;
	text-shadow: -0.5vw 0.5vw var(--black);
}
#section-title h2{
	background-color: var(--bright-red);
	color: var(--white);
	font-size: 4vw;
	text-shadow: -0.5vw 0.5vw var(--dark-red);
}

/*COMO TRABALHAMOS*/
#section-howwework{
	background-color: var(--white);
	padding-top: 92px;
	vertical-align: middle;
}
#section-howwework article{
	padding: 20px;
	text-align: justify;
}
#section-howwework h3{
	color: var(--bright-red);
	text-align: center;
	text-shadow: -0.2vw 0.2vw var(--dark-red);
}

/*PRODUTOS*/
#section-products{
	background-color: var(--black);
	padding-top: 92px;
	text-align: center;
}
#article-products{width: 100%;}
.product{background-color: var(--bright-red);}
/*Textos*/
#section-products h3{
	color: var(--white);
	text-shadow: -0.2vw 0.2vw var(--bright-gray);
}
#section-products h4{
	margin: 0px;
	padding: 20px;
}
#section-products p{
	color: var(--white);
	text-align: justify;
}
/*Imagens*/
.product img{
	height: 200px;
	width: 100%;
}

/*CAIXA DE ALERTA*/
#alert-box{
	background-color: rgba(5,5,5,0.5);
	height: 100vh;
	position: fixed;
	width: 100vw;
	z-index: 1;
}
#alert-product{
	background-color: white;
	border-radius: 5px;
	overflow-x: hidden;
	overflow-y: scroll;
}
/*Caixa Botão de Fechar*/
#alert-close{
	background-color: var(--dark-red);
	color: var(--white);
	overflow: hidden;
	width: 100%;
}
#alert-close span{
	cursor: pointer;
	padding: 20px;
}
#alert-close span:hover{color: var(--bright-red);}
/*Textos*/
#alert-title{
	font-size: 3rem;
	text-align: center;
}
#alert-body{
	background-color: var(--bright-red);
	color: var(--white);
	margin: 0px;
	text-align: justify;
}
/*Imagens*/
#alert-image{
	margin: 0px;
	width: 100%;
}

/*LOCATION*/
#div-location{	background: var(--black) url(images/restaurant-above.jpg) center/cover no-repeat;}

/*CONTATO*/
#section-contact{
	background-color: var(--white);
	padding-top: 92px;
	text-align: center;
}
#section-contact h3{
	text-shadow: -0.2vw 0.2vw var(--gray);
}
/*Entradas*/
.div-input{
	border: 2px solid var(--bright-gray);
	cursor: text;
	margin: 25px 20% 25px 20%;
	padding: 20px 20px 20px 40px;
	text-align: left;
	width: auto;
}
input[type=text], input[type=email], textarea{
	background-color: var(--white);
	border: 0px;
	font-size: 2rem;
	resize: none;
	width: 100%;
}
textarea{height: 200px;}
label{
	color: var(--dark-gray);
	font-size: 2rem;
	font-weight: 900;
}
/*Botões*/
.div-input:nth-child(5){
	border: 0px;
	height: 75px;
	padding: 0px;
}
button{
	border-width: 10px;
	cursor: pointer;
	font-size: 2rem;
	height: 100%;
	text-align: center;
	width: 100%;
	word-break: keep-all;
	/*Cores*/
	background-color: var(--white);
	border-top-color: var(--white);
	border-right-color: var(--bright-gray);
	border-bottom-color: var(--black);
	border-left-color: var(--white);
	color: var(--black);
	transition: 0.35s;
}
button:hover{
	/*Cores*/
	background-color: var(--black);
	border-top-color: var(--black);
	border-right-color: var(--black);
	border-bottom-color: var(--black);
	border-left-color: var(--black);
	color: var(--white);
	transition: 0.35s;
}

/*FOOTER*/
footer{
	background-color: var(--black);
	color: var(--white);
	text-align: center;
}

/*Fix and remove this code*/

@media only screen and (orientation: landscape){
	/*GERAL*/
	/*Divisões principais*/
	section, footer, #div-location{min-height: 100vh;}

	/*NAVEGAÇÃO*/
	#navbar-phone, #div-hamburguer{display: none;}
	#navbar-pc{display: none;}
	/*PC*/
	#navbar-pc{
		background-color: var(--black);
		font-size: 2rem;
		margin: 0px;
		opacity: 0.1;
		position: fixed;
		transition: 0.5s;
		width: 100%;
	}
	#navbar-pc:hover{
		opacity: 1;
		transition: 0.5s;
	}
	#navbar-pc ul{
		margin: 0px;
		padding: 0px;
	}
	#navbar-pc ul li{
		display: inline-block;
		font-size: 2vw;
		list-style: none;
		padding: 20px;
	}
	#navbar-pc a{
		color: var(--white);
		text-decoration: none;
	}
	/*Hover*/
	#navbar-pc a:hover{
		color: var(--white);
		transition: 0.05s;
	}
	#navbar-pc ul li:hover{
		background-color: var(--red);
		transition: 0.05s;
	}
	/*Active*/
	#navbar-pc a:active{
		color: var(--red);
		transition: 0.05s;
	}
	#navbar-pc ul li:active{
		background-color: var(--white);
		transition: 0.05s;
	}

	/*PRODUTOS*/	
	#article-products .product{
		float: left;
		height: 100%;
		width: 30%;
	}
	.product:nth-child(1), .product:nth-child(3){margin: 0px 2.5% 0px 2.5%;}

	/*CAIXA DE ALERTA*/
	#alert-product{
		border-top: 10px solid var(--bright-red);
		border-bottom: 10px solid var(--bright-red);
		height: 80vh;
		margin: 10vh auto 0px auto;
		width: 60vw;
	}
	/*Caixa Botão de Fechar*/
	#alert-close{
		height: auto;
		position: static;
	}

	/*CONTATO*/
	/*Botões*/
	.div-input:nth-child(5){width: 25%;}
}

@media only screen and (orientation: portrait){
	/*GERAL*/
	/*Divisões principais*/
	#section-title{padding: 100px 0px 100px 0px;}

	/*NAVEGAÇÃO*/
	#div-hamburguer, #navbar-phone{display: block;}
	#navbar-pc{display: none;}
	/*CELULAR*/
	#div-hamburguer{
		background-color: var(--dark-red);
		color: var(--white);
		padding: 20px;
		position: fixed;
		transition: 0.5s;
		width: 100%;
	}
	/*Botão do "Hamburguer" Menu*/
	#div-hamburguer span:nth-child(1){
		cursor: pointer;
		margin: 0px 20px 0px 0px;
	}
	#navbar-phone{
		background-color: var(--dark-red);
		height: 100%;
		left: 0;
		overflow-x: hidden;
		position: fixed;
		top: 0;
		transition: 0.5s;
		width: 0;
		word-break: keep-all;
	}
	/*Botão X*/
	#navbar-phone span{
		color: var(--white);
		cursor: pointer;
		padding: 20px;
		text-align: center;
		vertical-align: middle;
	}
	/*Links*/
	#navbar-phone ul{padding: 0px;}
	#navbar-phone li a{
		color: var(--white);
		text-decoration: none;
	}
	#navbar-phone li{
		color: var(--white);
		border-bottom: 6px solid var(--red);
		margin: 20px 0px 20px 20px;
		list-style: none;
		width: 80%;
	}
	/*Ativo*/
	#navbar-phone span:active, #navbar-phone li:active{color: var(--red);}

	/*PRODUTOS*/	
	#article-products .product{
		height: 100%;
	}
	.product:nth-child(1), .product:nth-child(2), .product:nth-child(3){margin: 60px 5% 60px 5%;}

	/*CAIXA DE ALERTA*/
	#alert-product{
		height: 100vh;
		width: 100vw;
	}
	/*Caixa Botão de Fechar*/
	#alert-close{
		height: 0px;
		position: fixed;
		transition: 0.5s;
	}

	/*CONTATO*/
	/*Botões*/
	.div-input:nth-child(5){width: auto;}
}