html { 

}

body {
	background: url(../src/images/bg_intro.jpg) no-repeat center center #000 fixed ;
	background-size: cover;
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	color: #666;
	overflow-x: hidden;
	overflow-y: auto;
}

button, label{
	cursor: pointer;
}
img:focus, img:active, i, button{
	outline : none;
	box-shadow: none;
	background-color: transparent;
	outline-color: transparent; 
    outline-style: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

@font-face {
	font-family: Euphorigenic;
	src: url(fonts/Euphorigenic/Euphorigenic.ttf);
}

@font-face {
	font-family: KenyanCoffeeRg-Regular;
	src: url(fonts/KenyanCoffeeRg-Regular/KenyanCoffeeRg-Regular.ttf);
}

@font-face {
	font-family: Baskerville;
	src: url(fonts/Baskerville/Baskerville.ttf);
}

@font-face {
	font-family: BebasNeue-Regular;
	src: url(fonts/BebasNeue-Regular/BebasNeue-Regular.ttf);
}

@font-face {
	font-family: Helvetica;
	src: url(fonts/Helvetica.ttf);
}
.content {
	width: 100%;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
	position: relative;
}

.scrollBarSB::-webkit-scrollbar {
	width: 10px;
}
.scrollBarSB::-webkit-scrollbar-track{
	background-color: #45454e;/*Color del carril de fondo donde se desplaza el thumb*/
}
.scrollBarSB::-webkit-scrollbar-thumb {
	background: #696969;
	border-right: 1px solid #45454e;
}   
.scrollBarSB::-webkit-scrollbar-thumb:hover {
	background: #b3b3b3;
}
.scrollBarSB{
	scrollbar-width: thin;
}

/**Intro starts**/
	.intro{
		background: url(../src/images/bg_intro.jpg) no-repeat center center #000 fixed ;
		background-size: cover;
		width: 100%;
		min-height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column; 
	  	position: absolute;
	  	top: 0;
	  	z-index: 11;
	}

	.intro img{
		width: 275px;
		max-width: calc(100% - 20px);
	}

	.intro > div h1, .intro > div h2{
		text-align: center;
		font-family: 'BebasNeue-Regular';
	}

	.intro .snt-sna{
		color: #b9b399;
		margin: 25px auto -10px;
	}

	.intro .qustn{
		color: #b9b399;
		margin-top: 15px;
	}

	.intro .srry{
		color: red;
		margin-bottom: 0;
	}

	.intro button{
		width: 75px;
		padding: 10px;
		margin: 10px 20px;
		border-radius: 15px;
		border: none;
		font-weight: bold;
		font-size: 15px;
		background-color: #b9b399;
	}

	.intro > div > p{
		text-align: center;
		color: #ccc;
		width: 500px;
	}

	.intro .plus18{
		width: 50px;
		height: 50px;
		border-radius: 50%;
		border: 4px solid red;
		background-color: #ccc;
		color: black;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: calc(50% - 25px);
		font-family: 'BebasNeue-Regular';
		font-size: 160%;
		font-weight: bold;
	}
/**Intro ends**/

/**Home starts**/
	.home{
		display: none;
	}
	/**Header starts**/
		.home header{
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			margin: auto;
			transition: all 0.5s linear;
			z-index: 10;
		} 
		.home header > .container{
			display: flex;
			position: relative;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			min-height: 110px;
			border-bottom: 5px solid #b9b399;
		}
		.home header > .container > .bg_home_header{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 1;
			height: 100px;
			border-bottom: 10px solid #febd17;
		}
		.home header > .container > .left,
		.home header > .container > .right{
			width: calc(50% - 110px);
			display: flex;
			z-index: 2;
			justify-content: space-around;
		}
		.home header > .container > .left > i{
			display: none;
			cursor: pointer;
		}
		.home header > .container > div button{
			background-color: transparent;
			border: none;
			color: #c8c3b5;
			font-family: 'BebasNeue-Regular';
			font-size: 18px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.home header > .container > div button > img{
			max-height: 20px;
		}
		.home header > .container > img{
			width: 220px;
			z-index: 2;
			position: absolute;
			top: 10px;
			left: calc(50% - 110px);
			cursor: pointer;
		}
	/**Header ends**/

	/**First section starts**/
		.home > .body > section.first{
			width: 100%; 
			position: relative;
	  		z-index: 0;
			overflow: hidden; 
		} 
		div.banner, div.banner2{
			width: 100%;
			display: flex;
			margin-left: -100%;
		}
		div.banner > .container-cover{
			width: 100%;
			min-width: 100%;
			height: 100vh; 
			min-height: 654px;
			max-height: 660px;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			position: relative;
		}
		div.banner2{
			display: none;
		}
		div.banner > .container-cover > img.bg{
			position: absolute;
			bottom: 0;
			left: auto;
			z-index: 0;
			width: auto;
		}
		div.banner > .container-cover > div.max-w{
			width: 90%;
			max-width: 1000px;
			display: flex;
			justify-content: center;
			align-items: center;
			max-height: 500px;
			position: relative;
			z-index: 1;
			padding-top: 200px;
			box-sizing: border-box;
		}

		div.banner > .container-cover > .bottom{
			position: absolute;
			bottom: -300px;
			background-color: red;
			width: 100%;
			height: 300px;
		}

		/**Banner containers starts**/
			/**First container starts**/
				div.banner > .container-cover1 > div.max-w > .left{
					width: 35%;
					display: flex;
					justify-content: center;
					align-items: center; 
				}
				div.banner > .container-cover1 > div.max-w > .left > img{
					width: 90%;
					max-width: 200px;
					margin-top: -70px;
				}
				div.banner > .container-cover1 > div.max-w > .right{
					width: 65%; 
					display: flex;
					justify-content: center;
					align-items: center; 
				}
				div.banner > .container-cover1 > div.max-w > .right > div.biers{
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					overflow: hidden;
				}
				div.banner > .container-cover1 > div.max-w > .right > div.biers > img.bier{
					margin: 0 -4.4%;
					cursor: pointer;
					transition: all 0.2s linear; 
				}
				#ghost_bier, #madness_bier{
					z-index: 0;
					width: 21%;
				}
				#ghost_bier:hover, #madness_bier:hover{
					z-index: 2;
					width: 23%;
				}
				#lichtenhainer_bier, #ecuadorian_bier{
					z-index: 1;
					width: 22%;
				}
				#lichtenhainer_bier:hover, #ecuadorian_bier:hover{
					z-index: 3;
					width: 23%;
				}
				#gose_bier, #catharina_bier{
					z-index: 2;
					width: 23%;
				}
				#gose_bier:hover, #catharina_bier:hover{
					z-index: 4;
					width: 25%;
				}
				#sourDreams_bier{
					z-index: 3;
					width: 25%;
				}
			/**First container ends**/

			/**Second container starts**/
				div.banner > .container-cover2 > div.max-w > .left{
					width: 30%;
					display: flex;
					justify-content: center;
					align-items: center; 
				}
				div.banner > .container-cover2 > div.max-w > .left > img{
					width: 100%;
					max-width: 300px;
					margin-top: -130px;
				}
				div.banner > .container-cover2 > div.max-w > .center{
					width: 40%;
					display: flex;
					justify-content: center;
					align-items: center; 
				} 
				div.banner > .container-cover2 > div.max-w > .center > img{
					cursor: pointer;
					transition: all 0.2s linear;
					width: 90%;
					max-width: 350px;
				}
				div.banner > .container-cover2 > div.max-w > .right{
					width: 30%;
					display: flex;
					justify-content: center;
					align-items: center; 
				}
				div.banner > .container-cover2 > div.max-w > .right > img{
					width: 90%;
					max-width: 120px;
					margin-top: -80px;
				}
			/**Second container ends**/

			/**Third container starts**/
				div.banner > .container-cover3 > div.max-w > .left{
					width: 35%;
					display: flex;
					justify-content: center;
					align-items: center; 
				}
				div.banner > .container-cover3 > div.max-w > .left > img{
					width: 90%;
					max-width: 180px;
					margin-top: -160px;
					margin-right: -20px;
				}
				div.banner > .container-cover3 > div.max-w > .center{
					width: 35%;
					display: flex;
					justify-content: center;
					align-items: center; 
				} 
				div.banner > .container-cover3 > div.max-w > .center > img{
					cursor: pointer;
					width: 90%;
					max-width: 240px;
					margin-top: -55px;
					margin-right: -20px;
				}
				div.banner > .container-cover3 > div.max-w > .right{
					width: 30%;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
				}
				div.banner > .container-cover3 > div.max-w > .right > img{
					width: 90%;
					max-width: 250px;
					margin-top: -190px;
				} 
			/**Third container ends**/

			/**Fourth container starts**/ 
				div.banner > .container-cover4 > div.max-w > .left{
					width: 35%;
					display: flex;
					justify-content: center;
					align-items: center; 
				}
				div.banner > .container-cover4 > div.max-w > .left > img{
					width: 100%;
					max-width: 190px;
					margin-top: -130px;
				}
				div.banner > .container-cover4 > div.max-w > .center{
					width: 35%;
					display: flex;
					justify-content: center;
					align-items: center; 
				} 
				div.banner > .container-cover4 > div.max-w > .center > img{
					cursor: pointer;
					transition: all 0.2s linear;
					width: 90%;
					max-width: 310px;
					margin-top: -40px;
					margin-right: -40px;
				}
				div.banner > .container-cover4 > div.max-w > .right{
					width: 30%;
					display: flex;
					justify-content: center;
					align-items: center; 
				}
				div.banner > .container-cover4 > div.max-w > .right > img{
					width: 90%;
					max-width: 125px;
					margin-top: -100px;
					margin-left: -30px;
				} 
			/**Fourth container ends**/

			/**Fifth container starts**/
				div.banner > .container-cover5 > div.max-w > .left{
					width: 35%;
					display: flex;
					justify-content: center;
					align-items: center; 
				}
				div.banner > .container-cover5 > div.max-w > .left > img {
				    width: 95%;
				    max-width: 400px;
				    margin-top: -130px;
				}
				div.banner > .container-cover5 > div.max-w > .right{
					width: 65%; 
					display: flex;
					justify-content: center;
					align-items: center; 
				}
				div.banner > .container-cover5 > div.max-w > .right > div.biers{
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					overflow: hidden;
				}
				div.banner > .container-cover5 > div.max-w > .right > div.biers > img.bier{
					margin: 0 -4%;
					cursor: pointer;
					transition: all 0.2s linear; 
				}
				#oatmeal_bier, #altbier_bier{
					z-index: 0;
					width: 20%;
					min-width: 123px;
				}
				#oatmeal_bier:hover, #altbier_bier:hover{
					z-index: 2;
					width: 22%;
					min-width: 135px;
				}
				#ipa_bier, #hefe_bier{
					z-index: 1;
					width: 22%;
					min-width: 135px;
				}
				#ipa_bier:hover, #hefe_bier:hover{
					z-index: 3;
					width: 24%;
					min-width: 148px;
				}
				#belgian_bier{
					z-index: 2;
					width: 24%;
					min-width: 148px;
				}
			/**Fifth container ends**/

			/**Sixtth container starts**/
				div.banner > .container-cover6 > div.max-w > .left{
					width: 35%;
					display: flex;
					justify-content: center;
					align-items: center; 
				}
				div.banner > .container-cover6 > div.max-w > .left > img{
					width: 90%;
					max-width: 270px;
					margin-top: -200px;
					margin-right: -80px;
				}
				div.banner > .container-cover6 > div.max-w > .right{
					width: 65%; 
					display: flex;
					justify-content: center;
					align-items: center; 
				}
				div.banner > .container-cover6 > div.max-w > .right > img.bier{
					width: 100%;
					max-width: 425px;
					cursor: pointer;
					transition: all 0.2s linear; 
					margin-top: -40px;
					margin-left: -80px;
				}
			/**Sixth container ends**/
		/**Banner containers ends**/

		/**Banner arrows starts**/
			.home > .body > section.first > .fas{
				position: absolute;
				top: 50%;
				z-index: 2;
				font-size: 50px;
				color: #696969;
				cursor: pointer;
				padding: 10px;
			}
			.home > .body > section.first > .fas:hover{
				color: #fff;
			}
			.home > .body > section.first > .fa-chevron-left{
				left: 0;
			}
			.home > .body > section.first > .fa-chevron-right{
				right: 0;
			}
		/**Banner arrows ends**/
	/**First section ends**/

	/**Second section starts**/
		.home > .body > section.second{
			width: 100%; 
			position: relative;
	  		z-index: 0;
	  		display: flex;
	  		justify-content: center;
	  		align-items: center;
		}
		.home > .body > section.second > div.container-cover2{
			width: 100%; 
			max-width: 1359px;
	  		display: flex;
	  		justify-content: center;
	  		align-items: center;
		}
		.home > .body > section.second > div.container-cover2 > section{
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 50px auto;
		}
		.home > .body > section.second > div.container-cover2 > section > div.info{
			width: 100%;
			max-width: 500px;
			text-align: center;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			display: flex;
		}
		.home > .body > section.second > div.container-cover2 > section > div.info > h2{
			font-family: 'BebasNeue-Regular';
			color: #b7b098;
		}
		/**Left section starts**/
			.home > .body > section.second > div.container-cover2 > section.first > div.info > h2.cero{
				color: #f8a934;
				margin: -25px auto -15px;
			}
			.home > .body > section.second > div.container-cover2 > section.first > div.info > p{
				width: calc(100% - 60px);
				max-width: 476px;
			}
			.home > .body > section.second > div.container-cover2 > section.first > div.info > p{
				color: #b7b098; 
				font-family: arial;
			}
			.home > .body > section.second > div.container-cover2 > section.first > div.info > p > a{
				color: #b7b098;
				width: 100%;
				display: block;
				text-align: center;
				text-decoration: none;
				font-family: arial;
				margin: -5px auto -15px;
			}
			.home > .body > section.second > div.container-cover2 > section.first > div.info > a{
				color: #b7b098;
				font-family: 'BebasNeue-Regular';
				text-decoration: none;
				font-size: 18px;
			}
		/**Left section ends**/

		/**Right section starts**/
			.home > .body > section.second > div.container-cover2 > section.second > div.info > img{
				width: 90%;
				max-width: 476px;
			}
		/**Right section ends**/
	/**Second section ends**/

	/**Container biers details information starts**/
		body.details{
			background-image: url(../src/images/bier_details/bg.jpg);
		}
		div.container-bier_details{
			padding-top: 180px;
			position: relative;
			overflow: hidden;
		}
		div.container-bier_details > section{
			position: relative;
			z-index: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-bottom: 30px;
		}
		div.container-bier_details > section > .max-w{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			max-width: 1200px;
			box-sizing: border-box;
		}
		/**First section starts**/
			div.container-bier_details > section.first > .max-w{ 
				color: #231F20; 
			}
			div.container-bier_details > section.first > .max-w > .details{
				text-align: center;
				padding: 0 10px;
				box-sizing: border-box;
			}
			div.container-bier_details > section.first > .max-w > .details1{
				width: 29%;
				max-width: 400px;
			}
			div.container-bier_details > section.first > .max-w > .details1 > img{
				width: 100%;
				max-width: 230px;
				margin-bottom: -40px;
			}
			div.container-bier_details > section.first > .max-w > .details2{
				width: 31%;
				text-align: left;
				max-width: 400px;
			}
			div.container-bier_details > section.first > .max-w > div.details2_special{
				text-align: center;
			}
			div.container-bier_details > section.first > .max-w > .details2 > img.logo{
				width: 90%;
			}
			div.container-bier_details > section.first > .max-w > .details2 > img.logo_special{
				max-width: 250px;
			}
			div.container-bier_details > section.first > .max-w > .details2 > img.logo_experimental{
				max-width: 300px;
				margin-bottom: 15px;
			}
			div.container-bier_details > section.first > .max-w > .details2 > img.logo_lichtenhainer,
			div.container-bier_details > section.first > .max-w > .details2 > img.logo_cereza,
			div.container-bier_details > section.first > .max-w > .details2 > img.logo_madness,
			div.container-bier_details > section.first > .max-w > .details2 > img.logo_oatmeal,
			div.container-bier_details > section.first > .max-w > .details2 > img.logo_ipa,
			div.container-bier_details > section.first > .max-w > .details2 > img.logo_altbier,
			div.container-bier_details > section.first > .max-w > .details2 > img.logo_hefe,
			div.container-bier_details > section.first > .max-w > .details2 > img.logo_belgian{
				max-width: 400px;
				margin-bottom: 15px;
			} 
			div.container-bier_details > section.first > .max-w > .details2 > img.logo_ghost{
				max-width: 220px;
			}
			div.container-bier_details > section.first > .max-w > .details2 > img.logo_sour_dreams,
			div.container-bier_details > section.first > .max-w > .details2 > img.logo_ecuadorian,
			div.container-bier_details > section.first > .max-w > .details2 > img.logo_gose{
				max-width: 140px;
			}
			div.container-bier_details > section.first > .max-w > .details2 > img.logo_catharina{
				max-width: 270px;
			}
			div.container-bier_details > section.first > .max-w > .details2 > img.special-subtittle{/*Only special*/
				width: 100%;
				max-width: 350px;	
			}
			div.container-bier_details > section.first > .max-w > .details2 > h2,
			div.container-bier_details > section.first > .max-w > .details2 > h3{/*Subtittle sour*/
				width: 100%;
				text-align: left;
				font-family: 'Baskerville';
				font-size: 150%;
				margin: 0;
				line-height: 24px;
			}

			div.container-bier_details > section.first > .max-w > .details2 > p{
				text-align: justify;
				width: 100%;
				max-width: 350px;
				font-family: 'Euphorigenic'; 
			} 
			div.container-bier_details > section.first > .max-w > .details2 > p.lichtenhainer{
				font-size: 15px;
			}
			/*div.container-bier_details > section.first > .max-w > .details2 > p.oatmeal{
				font-size: 16px;	
			}*/
			div.container-bier_details > section.first > .max-w > .details2 > p.special,
			div.container-bier_details > section.first > .max-w > .details2 > p.ghost,
			div.container-bier_details > section.first > .max-w > .details2 > p.gose,
			div.container-bier_details > section.first > .max-w > .details2 > p.catharina,
			div.container-bier_details > section.first > .max-w > .details2 > p.cereza{
				font-size: 17px;
			}
			div.container-bier_details > section.first > .max-w > .details2 > p.oatmeal,
			div.container-bier_details > section.first > .max-w > .details2 > p.sour_dreams,
			div.container-bier_details > section.first > .max-w > .details2 > p.madness,
			div.container-bier_details > section.first > .max-w > .details2 > p.belgian,
			div.container-bier_details > section.first > .max-w > .details2 > p.altbier,
			div.container-bier_details > section.first > .max-w > .details2 > p.ipa{
				font-size: 18px;	
			}
			div.container-bier_details > section.first > .max-w > .details2 > p.ecuadorian,
			div.container-bier_details > section.first > .max-w > .details2 > p.hefe,
			div.container-bier_details > section.first > .max-w > .details2 > p.experimental{
				font-size: 19px;
			}
			
			div.container-bier_details > section.first > .max-w > .details3,
			div.container-bier_details > section.first > .max-w > .details4{
				width: 20%;
				display: flex;
				flex-direction: column;
				background-color: white;
				margin: 0 10px;
				padding: 0 15px;
				white-space: nowrap;
				height: 400px;
				font-family: KenyanCoffeeRg-Regular;
				max-width: 300px;
			}
			div.container-bier_details > section.first > .max-w > .details > .details_child{
				width: 100%;
				border-bottom: 3px solid #ccc;
				padding: 5px;
				box-sizing: border-box;
				font-size: 13px;
				overflow: hidden;
				text-overflow: ellipsis; 
			}
			div.container-bier_details > section.first > .max-w > .details > .details3_1, 
			div.container-bier_details > section.first > .max-w > .details > .details3_2, 
			div.container-bier_details > section.first > .max-w > .details > .details3_3, 
			div.container-bier_details > section.first > .max-w > .details > .details3_4{
				height: 25%;
				font-size: 18px;
			}
			div.container-bier_details > section.first > .max-w > .details3 > .details3_1 > img{
				width: 100%;
				max-width: 130px;
			}
			div.container-bier_details > section.first > .max-w > .details3 > .details3_2 > img{
				width: 100%;
				max-width: 100px;	
			}
			div.container-bier_details > section.first > .max-w > .details3 > .details3_3 > img{
				width: 100%;
				max-width: 150px;	
			}
			div.container-bier_details > section.first > .max-w > .details3 > .details3_4{
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				font-size: 14px;
				border-bottom: none;
				line-height: 15px;
			}
			div.container-bier_details > section.first > .max-w > .details3 > .details3_4 > img{
				width: 30%;
				min-width: 30%;
			}
			div.container-bier_details > section.first > .max-w > .details3 > .details3_4 > span{
				width: 40%;
				min-width: 40%;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			div.container-bier_details > section.first > .max-w > .details > .details4_1{
				padding: 5px 0;
			}
			div.container-bier_details > section.first > .max-w > .details > .details4_1 p{
				font-size: 18px;
			}
			div.container-bier_details > section.first > .max-w > .details > .details4_1 span{
				font-size: 24px;
			}
			div.container-bier_details > section.first > .max-w > .details > .details4_1, 
			div.container-bier_details > section.first > .max-w > .details > .details4_2, 
			div.container-bier_details > section.first > .max-w > .details > .details4_3{
				height: 33.33%;
			}
			div.container-bier_details > section.first > .max-w > .details > .details4_1 > div{
				width: 100%;
				height: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			div.container-bier_details > section.first > .max-w > .details > .details4_1 > .details4_1_1{
				border-bottom: 3px solid #ccc;
			}
			div.container-bier_details > section.first > .max-w > .details > .details4_1 > div > p{
				margin: 0;
			}
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_3{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > span,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_3 > span{
				font-size: 20px;
			}
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > span{
				margin: -10px auto 10px;
			}
			div.container-bier_details > section.first > .max-w > .details4 > .details4_3 > span{
				margin-bottom: 0px;	
			}
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_3 > .container{
				display: flex;
				align-items: flex-end;
				width: 100%;
				font-size: 16px;
				line-height: 17px;
			}
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container > div{
				width: 33.33%;
			}

			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .cheesecake,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .pizza{
				width: 100%;
				max-width: 38px;
			}
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .bbq,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .tiramisu{
				width: 100%;
				max-width: 43px;
			}
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .cake,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .burguer,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .blue_cheese{
				width: 100%;
				max-width: 45px;
			}
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .brownie,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .jamon,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .crab,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .octopus,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .salchicha,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .grill,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .turkey,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .lasagna,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .chocolate,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .cordero,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .chocolate_cake,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .ostras,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .tacos,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .ceviche,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .chicken,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .gouda,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .salad,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .bife,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .langosta,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .brie_cheese{
				width: 100%;
				max-width: 50px;
			}
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .caviar,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .sushi{
				width: 100%;
				max-width: 55px;
			}
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .salmon,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .ravioli,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .prawns,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .meat_cake,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .fruit_cake,
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .pig{
				width: 100%;
				max-width: 60px;
			}
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .risotto{
				width: 100%;
				max-width: 65px;	
			}
			div.container-bier_details > section.first > .max-w > .details4 > .details4_2 > .container .pasta{
				width: 100%;
				max-width: 90px;
			} 
			div.container-bier_details > section.first > .max-w > .details4 > .details4_3{
				border-bottom: none;
			}
			div.container-bier_details > section.first > .max-w > .details4 > .details4_3 > .container > div{
				width: 50%;
			}
			div.container-bier_details > section.first > .max-w > .details4 > .details4_3 > .container .bottle{
				width: 100%;
				max-width: 20px;
			}
			div.container-bier_details > section.first > .max-w > .details4 > .details4_3 > .container .barril{
				width: 100%;
				max-width: 34px;
			}
		/**First section ends**/

		/**Second section starts**/
			div.container-bier_details > section.second > .max-w{ 
				margin-top: 60px;
				overflow-x: auto;
				overflow-y: hidden;
				justify-content: flex-start;
				min-height: 170px;
			}
			div.container-bier_details > section.second > .max-w > .details{
				text-align: center;
			}
			div.container-bier_details > section.second > .max-w > div.details1{
				width: 12.5%;
				max-width: 150px;
				min-width: 123px;
			} 
			div.container-bier_details > section.second > .max-w > div.details2{
				width: 36.83%;
				max-width: 442px;
				min-width: 363px;
			} 
			div.container-bier_details > section.second > .max-w > div.details3,
			div.container-bier_details > section.second > .max-w > div.details5{
				width: 13.83%;
				max-width: 166px;
				min-width: 136px;
			} 
			div.container-bier_details > section.second > .max-w > div.details4{
				width: 23%;
				max-width: 276px;
				min-width: 226px;	
			}
			div.container-bier_details > section.second > .max-w > .details img{
				max-width: 55px;
				margin-bottom: -15px;
				cursor: pointer;
			}
			div.container-bier_details > section.second > .max-w > .details1 img{
				width: 100%; 
				max-width: 65px;
				margin: -20px auto 0;
			}
			div.container-bier_details > section.second > .max-w > .details2 img{
				width: 12.5%; 
			}
			div.container-bier_details > section.second > .max-w > .details3 img,
			div.container-bier_details > section.second > .max-w > .details5 img{
				width: 33.33%; 
			}
			div.container-bier_details > section.second > .max-w > .details4 img{
				width: 20%; 
			}
			div.container-bier_details > section.second > .max-w > .details h3{
				font-family: 'BebasNeue-Regular';
				color: #928067;
				margin: 0;
				line-height: 92%;
			}
		/**Second section ends**/
	/**Container biers details information ends**/

	/**Container Contact starts**/
		div.container_contact{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			padding: 190px 0 100px;
			font-family: "Helvetica";
			color: #B7B098;
		}
		div.container_contact > .max-w{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 90%;
			max-width: 900px;
			height: 400px;
		}
		div.container_contact > .max-w > section{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		div.container_contact > .max-w > section.first{
			width: 60%;
		}
		div.container_contact > .max-w > section.second{
			width: 40%;
			flex-direction: column;
		}
		div.container_contact > .max-w > section.first > .cup,
		div.container_contact > .max-w > section.first > .info{
			text-align: center;
			width: 50%;
		}
		div.container_contact > .max-w > section.first > .cup > img{
			width: 100%;
			max-width: 185px;
			margin-top: 70px;
		}
		div.container_contact > .max-w > section.first > .info > p > img.icon-phone{
			max-width: 20px;
		}
		div.container_contact > .max-w > section.first > .info > p > img.icon-mail{
			max-width: 40px;
		}
		div.container_contact > .max-w > section.first > .info > img.logo{
			width: 100%;
			max-width: 210px;
			margin-top: 10px;
		}
		div.container_contact > .max-w > section.second > h3{
			font-family: "BebasNeue-Regular";
			text-align: center;
			width: 100%;
			line-height: 20px;
			font-weight: lighter;
			font-size: 20px;
			margin: 0 0 10px;
		}
		div.container_contact > .max-w > section.second > div{
			width: 100%;
			max-width: 280px;
			text-align: center;
		}
		div.container_contact > .max-w > section.second > div > input[type="text"]{
			width: 100%;
			box-sizing: border-box;
			margin: 5px 0;
			padding: 7px 10px;
		}
		div.container_contact > .max-w > section.second > div > div{
			width: 100%;
			display: flex;
			justify-content: space-between;
		}
		div.container_contact > .max-w > section.second > div > div > input[type="number"],
		div.container_contact > .max-w > section.second > div > div > input[type="mail"]{
			width: calc(50% - 5px);
			max-width: 135px;
			box-sizing: border-box;
			margin: 5px 0;
			padding: 7px 10px;
		}
		div.container_contact > .max-w > section.second > div > textarea{
			width: 100%;
			box-sizing: border-box;	
			margin: 5px 0;
			padding: 7px 10px;
			font-family: "Helvetica";
			font-size: 14px;
		}
		div.container_contact > .max-w > section.second > div > label{
			display: block;
			width: 100%;
			text-align: left;
			margin: 5px 0 -5px;
		}
		div.container_contact > .max-w > section.second > div > button{
			width: 75%;
			background-color: #B7B098;
			border: none;
			border-radius: 15px;
			padding: 8px 10px;
			margin: 0;
		}
	/**Container Contact ends**/

	/**Container where_buy starts**/
		body.where_buy{
			background-image: url(../src/images/where_buy/bg.jpg);
		}
		div.container_where_buy{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			padding: 170px 0 100px; 
		}
		div.container_where_buy > .max-w{
			display: flex;
			width: 90%;
			max-width: 1100px;
			flex-wrap: wrap;
		}
		div.container_where_buy section.first{
			width: 100%;
			min-width: 100%;
			font-family: "BebasNeue-Regular";
			text-align: center;
			color: #231F20;
		}
		div.container_where_buy section.second{
			width: calc(40% - 2px);
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-direction: column;
			overflow: auto;
		}
		div.container_where_buy section.second > .container{
			width: calc(100% - 20px);
			height: 110px;
			margin: 10px auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		div.container_where_buy section.second > .container > div.logo{
			width: 110px;
			height: 110px;
			min-width: 110px;
			min-height: 110px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		div.container_where_buy section.second > .container > div.logo > img{
			width: 100%;
		}
		div.container_where_buy section.second > .container > div.info{
			font-family: "Arial";
			color: #231F20;
			width: calc(100% - 120px);
			font-size: 13px;
			line-height: 18px;
			max-height: 110px;
			overflow: auto;
		}
		div.container_where_buy section.second > .container > div.info > span.name{
			font-size: 14px;
		}
		div.container_where_buy section.second > .container > div.info > a{
			text-decoration: none;
			color: black;
			font-style: italic;
		}
		div.container_where_buy section.second > .container > div.info > a > i{
			font-size: 15px;
		}
		div.container_where_buy section.first > h2{
			margin: 0;
			font-weight: lighter;
			font-size: 28px;
			line-height: 24px;
		}
		div.container_where_buy section.first > h3{
			margin: 0;
			font-weight: lighter;
			font-size: 24px;
		}
		div.container_where_buy section.first > img{
			max-width: 50px;
		}
		div.container_where_buy section.third{
			width: 60%;
			position: relative;
		}
		div.container_where_buy section.third > img.complete{
			width: 100%;
		}
		div.container_where_buy section.third > img.province{
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			cursor: pointer;
			z-index: 1;
		}
	/**Container where_buy ends**/

	/**Blog starts**/
		body.blog{
			background-image: url(../src/images/blog/bg.jpg);
			text-align: center;
		}
		section.container_blog > img{
			width: 90%;
			max-width: 470px;
			margin: 180px auto 200px;
		}
	/**Blog ends**/

	/**Footer starts**/
		footer{
			width: 100%;
			height: 130px;
			box-sizing: border-box;
			background-color: black;
			position: relative;
			z-index: 10;
			color: #b7b098; 
		} 
		footer > div.social,
		footer > div.scale{
			width: 25%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 0;
			z-index: 1;
		}
		footer > div.social{
			left: 0;
		}
		footer > div.social a{
			text-decoration: none;
			margin: 0 4px;
		}
		footer > div.social i{
			color: #b7b098;
			font-size: 32px;
			margin: 0 6px;
		}
		footer > div.scale{
			right: 0;
		}
		footer > div.scale > img{
			width: 163px;
		}
		footer > div.info{
			width: 100%;
			height: 100%;
			font-family: 'Baskerville';
			font-size: 17px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #b7b098;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 0;
		}
		footer span.visitsCounter{
			display: none;
		}
		footer > div.info span{
			text-align: center;
			line-height: 19px;
			font-size: 16px;
		}
		footer > div.info a{
			text-decoration: none;
			color: #b7b098;
		}
	/**Footer ends**/

	/**Movil menu starts (Burguer Menu)**/
		section.movil_menu{
			position: fixed;
			z-index: 9;
			width: 100%;
			height: 100vh;
			top: 0;
			left: -100%;
			background-image: url(../src/images/bg_intro.jpg);
			padding-top: 125px;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-direction: column;
			font-family: "BebasNeue-Regular";
			color: #C7C2B5;
			overflow-y: auto;
			overflow-x: hidden;
			transition: all 0.4s linear;
		}
		section.movil_menu > .container{
			width: 90%;
			max-width: 290px;
			position: relative;
			text-align: center;
			padding-bottom: 50px;
			box-sizing: border-box;
		}
		section.movil_menu > .container > img{
			width: 100%;
			max-width: 240px;
		}
		section.movil_menu > .container > h3{
			margin: 0;
			font-size: 25px;
			font-weight: lighter;
			line-height: 21px;
			letter-spacing: 0.3px;
			margin-bottom: 20px;
		}
		section.movil_menu > .container > i{
			position: absolute;
			width: 40px;
			height: 40px;
			top: 12px;
			right: -50px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 29px;
			cursor: pointer;
		}
		section.movil_menu > .container > h2{
			font-weight: lighter;
			margin: 0;
			font-size: 34px;
			line-height: 55px;
			cursor: pointer;
		}
	/**Movil menu ends (Burguer Menu)**/
/**Home ends**/


/**********************************************************************************RESPONSIVE********************/

/**Max WIDTH Responsive Starts**/
	@media only screen and (max-width: 1200px) {
		/**Home starts**/
			/**Header starts**/
			/**Header ends**/ 

			/**Bier details starts**/
				div.container-bier_details > section > .max-w{
					padding: 0 20px;
				}
				div.banner > .container-cover4 > div.container-bier {
    				width: 60%;
    			}
			/**Bier details ends**/
		/**Home ends**/
	}

	@media only screen and (max-width: 1024px) {
		/**Home starts**/
			/**Header starts**/
			/**Header ends**/

			/**First section starts**/
				/**Cover1 starts**/
					div.banner > .container-cover{
						max-height: 660px;
					}
					div.banner > .container-cover1 > div.max-w > .left > img{
					    width: 55%;
					}
				/**Cover1 ends**/

				/**Cover2 starts**/
					div.banner > .container-cover2 > div.max-w > .left img{
    					margin-right: -50px;
    				}
    				div.banner > .container-cover2 > div.max-w > .center > img {
					    min-width: 340px;
					}
				/**Cover2 ends**/

				/**Cover4 starts**/
					div.banner > .container-cover4 > div.max-w > .left > img {
					    max-width: 170px;
					}
					div.banner > .container-cover4 > div.max-w > .center > img {
					    width: 100%;
					}
					div.banner > .container-cover4 > div.max-w > .right > img {
					    max-width: 120px;
					    margin-left: -20px;
					}
				/**Cover4 ends**/

				/**Cover5 starts**/
					div.banner > .container-cover5 > div.max-w > .left > img {
					    margin-right: -45px;
					}
				/**Cover5 ends**/

				/**Cover6 starts**/
					div.banner > .container-cover6 > div.max-w > .left > img {
					    margin-right: -60px;
					}
					div.banner > .container-cover6 > div.max-w > .right > img.bier {
					    margin-left: -30px;
					}
				/**Cover6 ends**/
			/**First section ends**/

			/**Second section starts**/
				.home > .body > section.second{
					max-height: 1200px;
				}
				.home > .body > section.second > div.container-cover2{
					max-height: 1200px;
					flex-wrap: wrap;
				}
				.home > .body > section.second > div.container-cover2 > section{
					width: 100%;
				}
				.home > .body > section.second > div.container-cover2 > section.first{
					margin: 50px auto 25px;
				}
				.home > .body > section.second > div.container-cover2 > section.second{
					margin: 25px auto 50px;
				}
			/**Second section ends**/

			/**Bier details starts**/
				div.container-bier_details > section.first > .max-w{
				    flex-wrap: wrap;
				}
				div.container-bier_details > section.first > .max-w > .details1,
				div.container-bier_details > section.first > .max-w > .details2{
				    width: 50%; 
				}
				div.container-bier_details > section.first > .max-w > .details3, 
				div.container-bier_details > section.first > .max-w > .details4{
					width: calc(50% - 20px);
				    margin: 80px auto 0;
				}
				div.container-bier_details > section.first > .max-w > .details2 > p{
					max-width: 100%;
				}
				div.container-bier_details > section.second > .max-w{
					padding: 0;
					width: 90%;
					max-width: 90%;
					margin-top: 50px;
				}
			/**Bier details ends**/
		/**Home ends**/
	}

	@media only screen and (max-width: 880px) {
		/**Home starts**/
			/**Header starts**/
				.home header > .container{
					min-height: 60px;
				}
				.home header > .container > .bg_home_header{
					height: 50px;
					border-bottom: 10px solid #febd17;
				}
				.home header > .container > img {
				    width: 120px;
				    left: calc(50% - 60px);
				}
				.home header > .container > .left{
					justify-content: flex-start;
					padding-left: 30px;
					margin-top: -10px;
					width: calc(50% - 60px);
				}
				.home header > .container > .right{
					justify-content: flex-end;
					padding-right: 30px;
				    margin-top: -5px;
				    width: calc(50% - 60px);
				    white-space: nowrap;
				    overflow: hidden;
				}
				.home header > .container > .right button > img{
					max-height: 16px;
				}
				.home header > .container > .left > i{
					display: block;
					color: #c8c3b5;
					border: 2px solid #c8c3b5;
					padding: 3px;
					border-radius: 4px;
				}
				.home header > .container > .left > button,
				.home header > .container > .right > button{
				    display: none;
				}
			/**Header ends**/

			/**First section starts**/
				/**Cover1 starts**/
					div.banner > .container-cover{
						min-height: 400px;
						max-height: 500px;
					}
					div.banner > .container-cover > div.max-w {
					    padding-top: 120px;
					}
					div.banner > .container-cover > img.bg{
					    max-width: 1359px;
						height: 100%;
					}
					div.banner > .container-cover1 > div.max-w > .right > div.biers{
						margin-left: -30px;
					}
				/**Cover1 ends**/

				/**Cover2 starts**/
					div.banner > .container-cover2 > div.max-w > .center > img.bier {
					    width: 100%;
					}
					div.banner > .container-cover2 > div.max-w > .center > img {
					    min-width: 260px;
					}
				/**Cover2 ends**/

				/**Cover3 starts**/
					div.banner > .container-cover3 > div.max-w > .left > img {
					    max-width: 160px;
					    margin-top: -100px;
					    margin-right: -60px;
					}
					div.banner > .container-cover3 > div.max-w > .center > img {
					    max-width: 200px;
						margin-top: -50px;
					}
					div.banner > .container-cover3 > div.max-w > .right > img {
					    max-width: 200px;
					    margin-top: -110px;
					}
				/**Cover3 ends**/

				/**Cover4 starts**/
					div.banner > .container-cover4 > div.max-w > .left > img {
					    max-width: 150px;
					    margin-top: -70px;
					}
					div.banner > .container-cover4 > div.max-w > .center > img {
					    max-width: 260px;
					    margin-top: -15px;
					}
					div.banner > .container-cover4 > div.max-w > .right > img {
					    max-width: 100px;
					    margin-top: -50px;
					}
				/**Cover4 ends**/

				/**Cover5 starts**/
					div.banner > .container-cover5 > div.max-w > .left > img {
					    max-width: 400px;
					    margin-top: -70px;
					}
					#oatmeal_bier, #altbier_bier{
						min-width: 101px;
					}
					#oatmeal_bier:hover, #altbier_bier:hover{
						min-width: 110px;
					}
					#ipa_bier, #hefe_bier{
						min-width: 110px;
					}
					#ipa_bier:hover, #hefe_bier:hover{
						min-width: 121px;
					}
					#belgian_bier{
						min-width: 121px;
					}
				/**Cover5 ends**/

				/**Cover6 starts**/
					div.banner > .container-cover6 > div.max-w > .left > img {
					    max-width: 250px;
					    margin-top: -120px;
					}
					div.banner > .container-cover6 > div.max-w > .right > img.bier{
						margin-left: 0;
					    max-width: 340px;
					    margin-top: 0;
					}
				/**Cover6 ends**/
			/**First section ends**/

			/**Bier details starts**/ 
			 	div.container-bier_details {
    				padding-top: 100px;
    			}
			/**Bier details ends**/

			/**Footer starts**/ 
				footer {
				    height: 165px;
				}
				footer > div.social,
				footer > div.scale{
					width: 45%;
					height: 45%;
				}
				footer > div.social{
					justify-content: flex-end;
				}
				footer > div.scale{
					justify-content: flex-start;
				}
				footer > div.info{
					height: 70%;	
				}
			/**Footer ends**/
		/**Home ends**/

		/**Contact starts**/
			div.container_contact{
				padding: 50px 0 100px;
			}
			div.container_contact > .max-w{
				flex-direction: column;
				max-width: 90%;
				height: auto;
			}
			div.container_contact > .max-w > section.first,
			div.container_contact > .max-w > section.second{
				width: 80%;
			}
			div.container_contact > .max-w > section.second > div {
			    max-width: 380px;
			}
			div.container_contact > .max-w > section.second > div > div > input[type="number"], div.container_contact > .max-w > section.second > div > div > input[type="mail"] {
			    max-width: 185px;
			}
		/**Contact ends**/

		/**Where Buy Starts**/
			div.container_where_buy{
				padding: 100px 0 30px;
			}
			div.container_where_buy > .max-w{
				flex-direction: column;
				align-items: center;
			}
			div.container_where_buy section.second{
				width: 100%;
				flex-wrap: wrap;
				flex-direction: row;
			}
			div.container_where_buy section.second > .container{
				width: calc(50% - 10px);
				margin: 10px 0;
			}
			div.container_where_buy section.third{
				width: 80%;
				margin-top: 20px;
			}
		/**Where Buy Ends**/

		/**Blog starts**/
		
		/**Blog ends**/
	}

	@media only screen and (max-width: 750px) {
		/**Home starts**/
			/**First section starts**/
				/**Cover1 starts**/
					div.banner > .container-cover{
						max-height: 450px;
					}
				/**Cover1 ends**/

				/**Cover2 starts**/
					div.banner > .container-cover2 > div.max-w > .right > img {
					    max-width: 90px;
					}
				/**Cover2 ends**/

				/**Cover3 starts**/
					div.banner > .container-cover3 > div.max-w > .left > img {
					    max-width: 140px;
					    margin-top: -80px;
					}
					div.banner > .container-cover3 > div.max-w > .center > img {
					    max-width: 175px;
					    margin-top: -25px;
					}
				/**Cover3 ends**/

				/**Cover4 starts**/
					div.banner > .container-cover4 > div.max-w > .left > img {
					    max-width: 140px;
					}
					div.banner > .container-cover4 > div.max-w > .center > img {
					    margin-right: -10px;
					}
					div.banner > .container-cover4 > div.max-w > .right > img {
						max-width: 85px;
						margin-top: -45px;
					    margin-left: -10px;
					}
				/**Cover4 ends**/

				/**Cover5 starts**/
					div.banner > .container-cover5 > div.max-w > .left > img {
					    margin-right: -35px;
					}
					#oatmeal_bier, #altbier_bier{
						min-width: 90px;
					}
					#oatmeal_bier:hover, #altbier_bier:hover{
						min-width: 98px;
					}
					#ipa_bier, #hefe_bier{
						min-width: 98px;
					}
					#ipa_bier:hover, #hefe_bier:hover{
						min-width: 102px;
					}
					#belgian_bier{
						min-width: 102px;
					}
				/**Cover5 ends**/

				/**Cover6 starts**/
					div.banner > .container-cover6 > div.max-w > .left > img {
					    max-width: 240px;
					}
					div.banner > .container-cover6 > div.max-w > .right > img.bier {
					    max-width: 310px;
					}
				/**Cover6 ends**/
			/**First section ends**/
		/**Home ends**/

		/**Where Buy Starts**/
			div.container_where_buy section.second{
				width: 80%;
				flex-wrap: nowrap;
				flex-direction: column;
			}
			div.container_where_buy section.second > .container{
				width: calc(100% - 10px);
				margin: 10px auto;
			}
			div.container_where_buy section.third{
				width: 100%;
			}
		/**Where Buy Ends**/
	}

	@media only screen and (max-width: 650px) {
		/**Home starts**/
			/**First section starts**/
				/**Cover1 starts**/
					div.banner > .container-cover{
						max-height: 350px;
					}
				/**Cover1 ends**/

				/**Cover2 starts**/
					div.banner > .container-cover2 > div.max-w > .center > img {
					    min-width: 220px;
					}
				/**Cover2 ends**/

				/**Cover3 starts**/
					div.banner > .container-cover3 > div.max-w > .left > img {
					    max-width: 120px;
						margin-top: -90px;
						margin-right: -40px;
					}
					div.banner > .container-cover3 > div.max-w > .center > img {
					    max-width: 155px;
						margin-top: -30px;
					}
					div.banner > .container-cover3 > div.max-w > .right > img {
					    max-width: 130px;
					    margin-top: -90px;
					}
				/**Cover3 ends**/

				/**Cover4 starts**/
					div.banner > .container-cover4 > div.max-w > .left > img {
					    max-width: 110px;
					}
					div.banner > .container-cover4 > div.max-w > .right > img {
						max-width: 75px;
					}
				/**Cover4 ends**/

				/**Cover5 starts**/
					div.banner > .container-cover5 > div.max-w > .left > img {
					    margin-right: -15px;
					}
					#oatmeal_bier, #altbier_bier{
						min-width: 80px;
					}
					#oatmeal_bier:hover, #altbier_bier:hover{
						min-width: 88px;
					}
					#ipa_bier, #hefe_bier{
						min-width: 88px;
					}
					#ipa_bier:hover, #hefe_bier:hover{
						min-width: 92px;
					}
					#belgian_bier{
						min-width: 92px;
					}
				/**Cover5 ends**/

				/**Cover6 starts**/
					div.banner > .container-cover6 > div.max-w > .left > img {
					    max-width: 230px;
					}
					div.banner > .container-cover6 > div.max-w > .right > img.bier {
					    max-width: 270px;
					    margin-top: -10px;
					}
				/**Cover6 ends**/
			/**First section ends**/
		/**Home ends**/
	}

	@media only screen and (max-width: 560px) {
		/**Intro starts**/
		   	.intro img, .intro .srry{
		   		margin-top: -60px;
		   	}
		   	.intro > div > p{
		 		width: 100%;
		 		padding: 0 15px;
		 		box-sizing: border-box;
		   	}
		/**Intro ends**/

		/**Home starts**/
			/**Header starts**/
				.home header > .container > .left {
				    padding-left: 10px;
				}
				.home header > .container > .right {
				    padding-right: 10px;
				}
			/**Header ends**/

			/**First section starts**/
				/**General styles starts**/
					div.banner > .container-cover{
						max-height: 470px;
					}
					div.banner2{
						display: flex;
						align-items: center;
						margin-top: 15px;
					}
					div.banner2 > .container-cover{
						width: 100%;
						min-width: 100%;
						height: 250px;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				/**General styles ends**/

				/**Cover1 starts**/ 
					div.banner > .container-cover1 > div.max-w > .left {
						display: none;
					}
					div.banner > .container-cover1 > div.max-w > .right {
					    width: calc(100% - 50px);
    				}
					div.banner > .container-cover1 > div.max-w > .right > div.biers{
						margin-left: 0;
					}
					div.banner2 > .container-cover1 > img{
						width: 70%;
						max-width: 300px;
						min-width: 280px;
					}
				/**Cover1 ends**/

				/**Cover2 starts**/ 
					div.banner > .container-cover2 > div.max-w > .center {
    					width: 90%;
    				}
    				div.banner > .container-cover2 > div.max-w > .center > img {
					    max-width: 280px;
						min-width: 280px;
						margin: 15px 0 0 -25px;
					}
					div.banner > .container-cover2 > div.max-w > .left,
					div.banner > .container-cover2 > div.max-w > .right {
					    display: none;
					}
					div.banner2 > .container-cover2 > img{
						width: 90%;
						max-width: 350px;
						min-width: 280px;
					}
				/**Cover2 ends**/

				/**Cover3 starts**/
					div.banner > .container-cover3 > div.max-w > .left,
					div.banner > .container-cover3 > div.max-w > .right{
						display: none;
					}
					div.banner > .container-cover3 > div.max-w > .center{
						width: 90%;
					}
					div.banner > .container-cover3 > div.max-w > .center > img {
					    max-width: 185px;
						margin-top: -25px;
					}
					div.banner2 > .container-cover3 > img{
						width: 90%;
						max-width: 350px;
						min-width: 280px;
					}
				/**Cover3 ends**/

				/**Cover4 starts**/
					div.banner > .container-cover4 > div.max-w > .left,
					div.banner > .container-cover4 > div.max-w > .right {
					    display: none;
					}
					div.banner > .container-cover4 > div.max-w > .center {
					    width: 90%;
					}
					div.banner > .container-cover4 > div.max-w > .center > img {
					    max-width: 245px;
					    margin-right: -15px;
					}
					div.banner2 > .container-cover4 > img{
						width: 90%;
						max-width: 310px;
						min-width: 280px;
					}
				/**Cover4 ends**/

				/**Cover5 starts**/
					div.banner > .container-cover5 > div.max-w > .left {
					    display: none;
					}
					div.banner > .container-cover5 > div.max-w > .right {
    					width: 100%;
    				}
    				#oatmeal_bier, #altbier_bier{
						min-width: 89px;
					}
					#oatmeal_bier:hover, #altbier_bier:hover{
						min-width: 98px;
					}
					#ipa_bier, #hefe_bier{
						min-width: 98px;
					}
					#ipa_bier:hover, #hefe_bier:hover{
						min-width: 107px;
					}
					#belgian_bier{
						min-width: 108px;
					}
					div.banner2 > .container-cover5 > img{
						width: 80%;
						max-width: 330px;
						min-width: 280px;
					}
				/**Cover5 ends**/

				/**Cover6 starts**/
					div.banner > .container-cover6 > div.max-w > .left {
						display: none;
					}
					div.banner > .container-cover6 > div.max-w > .right {
    					width: 100%;
    				}
					div.banner > .container-cover6 > div.max-w > .right > img.bier {
					    max-width: 335px;
					    margin-top: -5px;
					    margin-left: -20px;
					}
					div.banner2 > .container-cover6 > img{
						width: 80%;
						max-width: 200px;
						min-width: 200px;
					}
				/**Cover6 ends**/

				/**Cover arrows starts**/
					.home > .body > section.first > .fas {
    					font-size: 25px;
    					top: calc(50% + 15px);
    				}
    			/**Cover arrows ends**/
			/**First section ends**/

			/**Second section starts**/
				.home > .body > section.second > div.container-cover2 > section.first {
				    margin: 0px auto 25px;
				}
				.home > .body > section.second > div.container-cover2 > section.first > div.info > p{
					text-align: justify;
				}
			/**Second section ends**/

			/**Bier details starts**/ 
				div.container-bier_details > section.first > .max-w{
				    flex-direction: column;
				}
				div.container-bier_details > section.first > .max-w > .details1,
				div.container-bier_details > section.first > .max-w > .details2{
				    width: 100%; 
				}
				div.container-bier_details > section.first > .max-w > .details1 > img,
				div.container-bier_details > section.first > .max-w > .details2 > img{
					margin: 5px auto;
				}
				div.container-bier_details > section.first > .max-w > .details3, 
				div.container-bier_details > section.first > .max-w > .details4{
					width: calc(100% - 20px); 
				    margin: 15px auto 0;
				}
				div.container-bier_details > section.first > .max-w > .details3{
					margin-bottom: 40px;
				}
			/**Bier details ends**/

			/**Footer starts**/
				
			/**Footer ends**/
		/**Home ends**/

		/**Contact starts**/
			div.container_contact > .max-w > section.first,
			div.container_contact > .max-w > section.second{
				width: 100%;
			}
		/**Contact ends**/

		/**Where Buy Starts**/
			div.container_where_buy section.second{
				width: 100%;
			}
		/**Where Buy Ends**/

		/**Movil menu starts (Burguer Menu)**/		
			section.movil_menu > .container > h2{
				cursor: pointer;
			}
		/**Movil menu ends (Burguer Menu)**/

		/**Footer starts**/ 
			footer {
			    height: 175px;
			}
			footer > div.info span{
				font-size: 15px;
			}
		/**Footer ends**/ 
	}

	@media only screen and (max-width: 440px) {
		/**Home starts**/
			/**First section starts**/
				/**Cover1 starts**/
					div.banner > .container-cover{
						min-height: 360px;
						max-height: 360px;
					}
					div.banner > .container-cover > div.max-w {
						width: 100%;
					    padding-top: 100px;
					}
					div.banner > .container-cover1 > div.max-w > .right > div.biers {
					    max-width: 330px;
					}
				/**Cover1 ends**/

				/**Cover2 starts**/
					div.banner > .container-cover2 > div.max-w > .center > img {
					    max-width: 200px;
					    min-width: 200px;
					}
				/**Cover 2 ends**/

				/**Cover3 starts**/
					div.banner > .container-cover3 > div.max-w > .center > img {
					    max-width: 135px;
						margin-top: -10px;
						margin-left: 20px;
					} 
				/**Cover3 ends**/

				/**Cover4 starts**/
					div.banner > .container-cover4 > div.max-w > .center > img {
					    max-width: 180px;
					    margin-right: -20px;
					    margin-top: 0px;
					}
					div.banner > .container-cover4 > div.max-w > .right > img {
					    width: 70%;
					    max-width: 80px;
					    margin-left: -20px;
					    margin-right: 0;
					    margin-top: -70px;
					}
				/**Cover4 ends**/

				/**Cover5 starts**/
					#oatmeal_bier, #altbier_bier{
						min-width: 70px;
						max-width: 74px;
					}
					#oatmeal_bier:hover, #altbier_bier:hover{
						min-width: 77px;
					    max-width: 81px;
					}
					#ipa_bier, #hefe_bier{
						min-width: 77px;
					    max-width: 81px;
					}
					#ipa_bier:hover, #hefe_bier:hover{
						min-width: 84px;
						max-width: 89px;
					}
					#belgian_bier{
						min-width: 84px;
						max-width: 89px;
					}

					/**#oatmeal_bier, #altbier_bier {
					    max-width: 74px;
					}
					#oatmeal_bier:hover, #altbier_bier:hover {
					    max-width: 81px;
					}
					#ipa_bier, #hefe_bier {
					    max-width: 81px;
					}
					#ipa_bier:hover, #hefe_bier:hover {
					    max-width: 88px;
					}
					#belgian_bier {
					    max-width: 89px;
					}
				/**Cover5 ends**/

				/**Cover6 starts**/
					div.banner > .container-cover6 > div.max-w > .right > img.bier {
					    max-width: 250px;
					    margin-top: 5px;
					    margin-left: -30px;
					}
				/**Cover6 ends**/
			/**First section ends**/
		/**Home ends**/

		/**Movil menu starts (Burguer Menu)**/
			section.movil_menu > .container > img{
				max-width: 220px;
			}
			section.movil_menu > .container > h3{
				font-size: 22px;
				line-height: 18px;
			}
			section.movil_menu > .container > i{
				right: -30px;
				font-size: 25px;
			}
		/**Movil menu ends (Burguer Menu)**/
	}

	@media only screen and (max-width: 400px) {
		/**Footer starts**/
			footer > div.social, footer > div.scale {
    			width: 47%;
    		}
			footer > div.social i{
				font-size: 30px;
				margin: 0 5px;
			}
			footer > div.scale > img {
			    width: 155px;
			}
		/**Footer ends**/ 	
	}	
/**Max WIDTH Responsive Ends**/

/**Max Height Responsive Starts**/
	@media only screen and (max-height: 600px){
		/**Movil menu starts (Burguer Menu)**/
			section.movil_menu{
				height: 750px;
				padding-top: 110px;
			}
			section.movil_menu > .container > img{
				max-width: 225px;
			}
			section.movil_menu > .container > h3{
				font-size: 23px;
				line-height: 19px;
			}
			section.movil_menu > .container > h2{
				font-size: 30px;
				line-height: 50px;
			}
		/**Movil menu ends (Burguer Menu)**/
	}	
/**Max Height Responsive Ends**/