@charset "utf-8";

#banner{
	width:100%;
	min-height:60vh;
	min-height:300px;
	background-position: top !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	display:flex;
	align-items: center;
}

#banner_bottle{
	height:100%;
	width:30%;
	display:flex;
	justify-content: flex-end;
}

#banner_bottle img{
	height:60vh;
}

#banner_text{
	display:flex;
	flex-direction: column;
	width:70%;
	height:85%;
	color:#DFDFDF;
	margin-top:30px;
	padding:25px 0;
}

#banner_text h3{
	font-size: 4vw;
	font-family:bureau-grot, sans-serif;
	font-weight: 700;
	font-style: bold;
	white-space: nowrap;
	margin-left:50px;
	max-width:90%;
	margin-bottom:25px;
}
#text{
	width:80%;
	font-size: 12pt;
	font-family:bureau-grot, sans-serif;
	font-weight: 300;
	font-style: normal;
	margin-left:50px;
	margin-bottom:10px;
}
#banner_text h4{
	font-size: 12pt;
	font-family:bureau-grot, sans-serif;
	font-weight: 400;
	font-style: normal;
	margin-left:50px;
	margin-bottom:30px;
}

#banner_button span{
	flex-grow:1;
}

#banner_text button{
	margin-left:50px;
	margin-bottom:25px;
	display:block;
	font-size:12pt;
	padding:9px 10px;
	background:none;
	font-family:bureau-grot, sans-serif;
	border: 2px solid #DFDFDF;
	text-transform: uppercase;
	cursor:pointer;
	font-weight:200;
	color:#DFDFDF;
	outline: none;
	
	transition:all .2s ease;
	-o-transition:all .2s ease;
	-moz-transition:all .2s ease;
	-webkit-transition:all .2s ease;
}

#banner_text button:hover{
	background:#DFDFDF;
	color:#111;
}

#banner_text button:active{
	background:#444;
	border-color:#444;
	color:#DFDFDF;
}

#circle_container{
	width:90%;
	padding:0 5%;
	height:35%;
	display:flex;
	align-items: center;
	flex-grow: 1;
}
.circle{
	height:150px;
	width:150px;
	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

.circle_border{
	width:82%;
	height:82%;
	max-width: 100px;
	max-height: 100px;
	border-radius: 100px;
	padding:5%;
}

.circle_inside{
	width:100%;
	height:100%;
	max-width:100px;
	max-height: 100px;
	border-radius: 1000px;
	display:flex;
	justify-content: center;
	align-items: center;
}

#banner_text .circle p{
	text-transform: uppercase;
	font-family: bebas-neue, sans-serif;
	font-size:18pt;
	margin:0;
}
#banner_text .circle_inside p:nth-child(1){
	font-family: bebas-neue, sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 18pt;
	color: #DFDFDF;
	margin:0 0 10px 0;
}
#banner_text .circle_inside p:nth-child(2){
	font-family: bebas-neue, sans-serif;
	font-stretch: condensed;
	font-style: normal;
	font-weight: 500;
	font-size: 46pt;
	color: #DFDFDF;
	margin:0;
}

.alc, .bu, .sw{
	font-family: bebas-neue, sans-serif;
	font-stretch: condensed;
	font-style: normal;
	font-weight: 500;
	font-size: 46pt;
	color: #DFDFDF;
}
#button_container{
	display:flex;
	flex-direction: column;
	margin-top:5pt;
	justify-content: center;
	align-items: center;
	overflow-x:hidden;
	font-family:bureau-grot, sans-serif;
	color:#111;
}

.button_line{
	width:80%;
	height:2px;
	margin:5px 10px;
	background-color:#666;
}

#button_container h4{
	margin:10px 0;
	font-size:20pt;
}
#button_container p{
	font-size:12pt;
	color:#0A0A0A;
	text-align: center;
}
#button_container a{
	margin:10px 0;
	font-size:10pt;
	text-decoration: none;
	padding:7px 12px;
	background:none;
	border: 2px solid #111;
	text-transform: uppercase;
	cursor:pointer;
	font-weight:800;
	color:#111;
	
	transition:all .2s ease;
	-o-transition:all .2s ease;
	-moz-transition:all .2s ease;
	-webkit-transition:all .2s ease;
}
#button_container a:hover{
	background:#111;
	color:#AAAAAA;
}

@media all and (max-width:700px), all and (max-height:800px){
	#circle_container{
		display:none;
	}
}
@media all and (orientation:portrait){
	#banner_text h3{
		margin-bottom:15px;
	}
}
@media all and (max-width:700px){
	#banner_text h3{
		white-space: normal;
		font-size:18pt;
	}
}
@media all and (max-width:500px){
	#banner_text p{
		display:none;
	} 
}
@media all and (max-width:400px){
	#banner_text h3,
	#text,
	#banner_text h4,
	#banner_text button{
		margin-left:5%;
	}
	#banner_bottle{
		width:40%;
	}
}
@media all and (max-width:250px){
	#banner{
		display:none;
	}
	#button_container{
		display:none;
	}
}