@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
	font-family: 'Jost', sans-serif;
	margin: 0;
	padding: 0;
}

.hide {
	display: none;
}

.home {
	width: 100vw;
	height: 100vh;
	background-image: url("/media/images/beer.jpg");
	background-size: cover;
	position: relative;
}

.home .title {
	width: 100%;
    height: 100%;
    text-align: center;
    text-transform: uppercase;
    background-color: rgba(255,255,255,.5);
    cursor: default;
}

.home .title h1 {
	opacity: .75;
	font-weight: 900;
	font-size: 13vw;
	padding-top: 25vh;
}

.home .title h3 {
	opacity: .75;
    font-size: 3vw;
    margin-top: -4vw;
    letter-spacing: 1.6vw;
    font-weight: 300;
    margin-left: 2vw;
}

.home .menu, .card .menu {
	position: absolute;
    width: 65px;
    right: 0;
    margin: 15px 30px;
   	z-index: 1;
}

.home .ico-menu, .card .ico-menu {
	width: 100%;
    opacity: 0.7;
    cursor: pointer;
}

.home .ico-menu:hover, .card .ico-menu {
	opacity: 0.8;
}

.home .list-menu, .card .list-menu {
	background-color: #FFF;
    width: 100vw;
    height: 100vh;
    opacity: 1;
    position: absolute;
    z-index: 1;
}

.home .list-menu ul, .card .list-menu ul {
	display: block;
    text-align: center;
    margin-top: 200px;
    border-top: 1px solid #c3c3c3;
}

.home .list-menu a, .card .list-menu a {
	color: #000;
    text-decoration: 0;
}

.home .list-menu li, .card .list-menu li {
	padding: 20px;
    font-size: 30px;
    border-bottom: 1px solid #c3c3c3;
}

.home .list-menu li:hover, .card .list-menu li:hover {
	background-color: rgb(228 228 228 / 80%);
}

.list-menu .logo {
	width: 150px;
}

.card {
	width: 100%;
    min-height: 100vh;
}

.card .content {
	color: #FFF;
    min-height: 100vh;
    width: 100%;
    background-color: rgba(0,0,0,.75);
    font-size: 1.2em;	
}

.card .content .beer {
	padding: 15vh 10vw;
}

.card .content .beer hr {
	margin: 30px 0;
}

.card .content .beer h1, h2 {
	font-weight: 900;
	text-transform: uppercase;
}

.card .content .beer h1 {
	font-size: 45px;
}

.card .content .beer h2 {
	margin-bottom: 10px;
	font-size: 35px;
}

.card .content .beer ul {
	list-style: none;
}

.card .content .beer ul li {
	margin-top: 10px;
}

.card .content .beer p, .card .content ul {
	font-size: 20px;
}

.beer .info {
	display: flex;
}

.beer .info .info-img {
	flex: 30%;
}

.beer .info .info-img img {
	width: 100%;
	border: 2px solid #FFF;
}

.beer .info .info-txt {
	flex: 70%;
	padding-left: 30px;
}

@media screen and (orientation:portrait) {
	.card .content .beer h1 {
		font-size: 3em;
	}
	.card .content .beer h2 {
		font-size: 2.5em;
	}
	.card .content .beer p, .card .content .beer ul {
		font-size: 2em;
	}
	.beer .info {
		display: block;
	}

	.beer .info .info-img {
		width: 100%;
		text-align: left;
	}

	.beer .info .info-img img {
		border: 2px solid #FFF;
	}

	.beer .info .info-txt {
		width: 100%;
		padding-left: 0;
	}
}