* {margin:0; padding:0;}
*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

@font-face {
	font-family: 'Filosofia';
	src: url('../fonts/FilosofiaSmallCaps.woff2') format('woff2'),
	url('../fonts/FilosofiaSmallCaps.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Filosofia OT';
	src: url('../fonts/FilosofiaOTItalic_17630.woff2') format('woff2'),
	url('../fonts/FilosofiaOTItalic_17630.woff') format('woff');
	font-weight: 500;
	font-style: italic;
}
@font-face {
	font-family: 'Filosofia OT';
	src: url('../fonts/FilosofiaOT_17631.woff2') format('woff2'),
	url('../fonts/FilosofiaOT_17631.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}


html {overflow-y: scroll;}
body {color:#000; height:100%; background: #fa6c33;}
body, input, textarea {font-family: 'Filosofia', Helvetica, sans-serif; font-size:12px;}
img {border:0; vertical-align:middle;}
a {color:inherit; text-decoration:none;}
a:hover {text-decoration:none;}
:focus {outline:0;}

html, #wrapper {height:100%;}

body > #wrapper {height:auto; min-height:100%; margin:0; overflow: hidden;}

/* CLEAR FIX*/
.clearfix:after {content: "."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
*html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

.left {float:left;}
.right {float:right;}
.clear {clear:both;}
.show {display: block;}
.hide {display: none;}

h1,h2,h3,h4,h5,h6 {font-weight:300;}

ul, li {list-style:none;} fieldset {border:0;} textarea {resize:none;}
.wrap.error404 {padding: 50px;}

.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9,
.col-lg-10, .col-lg-11, .col-lg-12, .col-lg-13, .col-lg-14, .col-lg-15, .col-lg-16, .col-lg-17,
.col-lg-18, .col-lg-19, .col-lg-20, .col-lg-21, .col-lg-22, .col-lg-23, .col-lg-24, .col-lg-25 {min-height:1px;position:relative;padding-right:20px;float:left;margin:0 0 20px;}
.col-lg-25 {width:100%;}
.col-lg-24 {width:96%;}
.col-lg-23 {width:92%;}
.col-lg-22 {width:88%;}
.col-lg-21 {width:84%;}
.col-lg-20 {width:80%;}
.col-lg-19 {width:76%;}
.col-lg-18 {width:72%;}
.col-lg-17 {width:68%;}
.col-lg-16 {width:64%;}
.col-lg-15 {width:60%;}
.col-lg-14 {width:56%;}
.col-lg-13 {width:52%;}
.col-lg-12 {width:48%;}
.col-lg-11 {width:44%;}
.col-lg-10 {width:40%;}
.col-lg-9 {width:36%;}
.col-lg-8 {width:32%;}
.col-lg-7 {width:28%;}
.col-lg-6 {width:24%;}
.col-lg-5 {width:20%;}
.col-lg-4 {width:16%;}
.col-lg-3 {width:12%;}
.col-lg-2 {width:8%;}
.col-lg-1 {width:4%;}
.col-last {padding:0;}

header {width: 100%; min-height: 1024px; position: relative; background: url(../images/banner.jpg) center top no-repeat; overflow: hidden;}
header .logo {position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #fdc513; height: 161px; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end;}
header h1 {display: flex; color: #fff; font-size: 22px; font-weight: 200; margin: 110px auto 0; letter-spacing: 5px; width: 100%; max-width: 420px; justify-content: space-between;}
header .titulo {position: relative; margin: 175px auto 0; width: 1px;}
header .titulo span {font-size: 40px; color: #fff; letter-spacing: 5px; display:block; position: absolute; top: 0; width: 370px;}
header .titulo span:nth-child(1) {text-align: right; right: 150px;}
header .titulo span:nth-child(2) {text-align: left; left: 150px;}

.indent {width: 100%; max-width: 1150px; margin: 0 auto; border-top: 1px solid #fff;}

.copo { margin-top: 122px; position: relative; min-height: 475px;}
.copo > figure {position: absolute; top: -97px; left: -70px;}
.copo .content {float: right; width: 100%; max-width: 762px;}
.copo .content h2 {font-size: 28px; margin: 40px 0 0; font-weight: normal;}
.copo .content p {font-size: 20px; color: #fff; padding: 0 100px 0 0; font-style: italic; font-family: 'Filosofia OT'; text-align: justify; margin: 0;}
.copo .content .texto {width: 100%; padding: 0 0 20px; border-bottom: 1px solid #fff;}
.copo .content .wrap-itens {width: 100%; display: flex; justify-content: space-between; margin: 25px 0 0;}
.copo .content .wrap-itens .item {display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;}
.copo .content .wrap-itens .item figure {min-height: 91px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; margin: 0 0 20px;}
.copo .content .wrap-itens .item span {color: #ffffff; font-size: 24px;}
.copo .content .wrap-itens .item p {padding: 0; color: #000; font-size: 30px;}

.harmonizacao {text-align: center; display: flex; flex-direction: column; align-items: center;}
.harmonizacao h2 {font-size: 30px; font-weight: normal; margin: 25px 0;}
.harmonizacao p {font-size: 30px; color: #fff; font-style: italic; font-family: 'Filosofia OT';}

.cervejas {width: 100%; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #fff; position: relative; margin: 180px auto 320px; height: 140px;}
.cervejas figure {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.cervejas p {font-family: 'Filosofia OT'; font-size: 30px; color: #fff; margin: 0; font-style: italic;}
.cervejas a {font-size: 42px; color: #fff; display: flex; align-items: center;}
.cervejas a span:before {content: ''; display: block; width: 60px; height: 60px; background: url(../images/seta.png) center top no-repeat; margin: 0 35px 0 0;}

.footer {display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 0 40px; position: relative;}
.footer p {color: #ffffff; font-size: 25px;}
.footer p:nth-child(2) {font-family: 'Filosofia OT'; position: absolute; top: 50px; left: 50%; transform: translateX(-50%);}

@media screen and (max-width: 1024px) {
	.indent {width: calc(100% - 40px);}

	header .titulo span:nth-child(1) { right: 110px;}
	header .titulo span:nth-child(2) {left: 110px;}

	.copo > figure {left: -210px;}
	.copo .content {max-width: 738px;}

	.cervejas {margin: 140px auto 240px;}
	.cervejas a:before {margin: 0 15px 0 0;}
	.cervejas figure {width: 420px;}
	.cervejas figure img {max-width: 100%;}
	.cervejas p {font-size: 27px;}
}

@media screen and (max-width: 700px) {
	header {background: url(../images/banner-m.jpg) center top no-repeat; background-size: cover; height: 100vw; max-height: 554px; min-height: 440px;}
	header .logo {height: 60px; padding: 7px;}
	header .logo img {width: 41px;}
	header h1 {font-size: 14px; width: 290px; margin: 35px auto 0;}

	header .titulo {margin: 100px auto 0;}
	header .titulo span {font-size: 13px; letter-spacing: 2px; }
	header .titulo span:nth-child(1) { right: 10vw;}
	header .titulo span:nth-child(2) {left: 10vw;}

	.copo > figure{left: -80px; top: -70px;}
	.copo .content p {padding: 0;}
	.copo .content .wrap-itens { flex-wrap: wrap; justify-content: center;}
	.copo .content .wrap-itens .item {width: 160px; max-width: 50%; margin: 0 0 40px;}
	.copo .content .wrap-itens .item figure {height: 60px; min-height: 0; margin: 0 0 5px;}
	.copo .content .wrap-itens .item figure img {max-height: 100%;}
	.copo .content .wrap-itens .item span {font-size: 20px;}
	.copo .content .wrap-itens .item p {font-size: 20px;}

	.copo .content .texto:before {content: ''; display:block; float: left; width: 150px; height: 130px;}

	.harmonizacao figure img{max-width: 100%}

	.cervejas {height: 9.38vw; margin: 80px auto 140px;}
	.cervejas figure {width: 37.5vw;}
	.cervejas p {font-size: 10px;}
	.cervejas a {font-size: 14px;}
	.cervejas a span:before{ background-size: contain; width: 5vw; height: 5vw; margin: 0 10px 0 0;}

	.footer{padding: 20px 0; align-items: center;}
	.footer p{font-size: 11px; margin: 0;}
	.footer p:nth-child(2) {}
	.footer img{width: 95px;}
}