html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
body {font-family: 'Open Sans Condensed', sans-serif;text-transform:uppercase;}

.intro1 {background-image: url(img/hmel.png); background-size:cover; position:absolute;width:100%;height:100%;z-index:1; background-color:#FFE800;}
.logo {position:absolute; left:24%;top:10%; width:50.5%;z-index:2;}
.intro1text {position:absolute; left:22.5%;top:60%;font-size:6vh;z-index:3;font-weight:lighter;color:#111111;}
.inputintro {background:#008D4D; width:25%;height:13%;position:absolute;left:32.5%;top:68%;border:none;color:white;font-size:4vh;padding-left:2%;text-transform:uppercase;font-family: 'Open Sans Condensed', sans-serif;}
::-webkit-input-placeholder {color:white;width:80%;}
::-moz-placeholder          {color:white;text-transform:uppercase;width:80%;}/* Firefox 19+ */
:-moz-placeholder           {color:white;text-transform:uppercase;width:80%;}/* Firefox 18- */
:-ms-input-placeholder      {color:white;text-transform:uppercase;width:80%;}
.inputintro2 {background:#008D4D; width:15%;height:13%;position:absolute;left:46.5%;top:68%;border:none;color:white;font-size:4vh;padding-left:2%;text-transform:uppercase;font-family: 'Open Sans Condensed', sans-serif;}
::-webkit-input-placeholder {color:white;width:80%;}
::-moz-placeholder          {color:white;text-transform:uppercase;width:80%;}/* Firefox 19+ */
:-moz-placeholder           {color:white;text-transform:uppercase;width:80%;}/* Firefox 18- */
:-ms-input-placeholder      {color:white;text-transform:uppercase;width:80%;}
.inputintro3 {background:#008D4D; width:20%;height:13%;position:absolute;left:57.7%;top:68%;border:none;color:white;font-size:4vh;padding-left:2%;text-transform:uppercase;font-family: 'Open Sans Condensed', sans-serif;}
::-webkit-input-placeholder {color:white;width:80%;}
::-moz-placeholder          {color:white;text-transform:uppercase;width:80%;}/* Firefox 19+ */
:-moz-placeholder           {color:white;text-transform:uppercase;width:80%;}/* Firefox 18- */
:-ms-input-placeholder      {color:white;text-transform:uppercase;width:80%;}
.box {width:8%;height:13.4%;background:#008D4D;position:absolute; left:23%;top:68%;}
.boximg {width:50%;padding:22%;margin-top:2%}
.button {width:5%;height:10%;position:absolute;background:#FDE800;left:74%;top:69.7%;font-size:4vh;font-weight:bold;text-align:center;padding-top:1.5%;padding-bottom:1.5%;cursor:pointer;color:#363636;border:none;}
.button:hover {background:#FFD900;}
.underbut {font-size:2.4vh;position:absolute;left:32.5%;top:83%;}
.info {left:45%;top:42%;font-size:3.5vh;color:#111111;position:absolute;}
.arrow {width:2.5%; position:absolute; left:77.5%;top:78%;}

.intro2 {background-image: url(img/back2.png); background-size:cover; position:absolute;width:100%;height:100%;z-index:1; background-color:black;top:100%;left:0%;}
.infoitr2 {background:black;position:absolute;top:0%;height:10%; width:100%;
-webkit-box-shadow: 0px 0px 25px #222;
    -moz-box-shadow: 0px 0px 25px #222;
    box-shadow: 0px 0px 25px #222;
	color:white;cursor:pointer;z-index:101;}
	.infoitr2tx {font-size:4vh;margin-left:5%; margin-top:1.3%; position:absolute;z-index:102;}
	.buy {background:#FFDF00;width:15%; height:55%;border-radius:2px;position:absolute; left:80%; margin-top:0.6%; text-align:center; color:#242424; padding-top:1%; font-size:3.5vh;cursor:pointer;z-index:102;}
	.buy:hover {background:#FFD900;}
	
	.beer {width:18.5%;margin-top:8%; margin-left:5%; float:left; }

	.label {width:13.67%; position:absolute;left:7.2%;margin-top:18%;z-index:6; opacity:0.8;}
		.labe2 {width:13.67%; position:absolute;left:31%;margin-top:18%;z-index:6; opacity:0.8;}
			.labe3 {width:13.67%; position:absolute;left:54.5%;margin-top:18%;z-index:6; opacity:0.8;}
				.labe4 {width:13.67%; position:absolute;left:78.2%;margin-top:18%;z-index:6; opacity:0.8;}
				
	.name {width:20%; background:#008D4D; border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;position:absolute;margin-top:38%;left:4%;z-index:15;height:150%;color:white;font-size:4.5vh; text-align:center; padding-top:2%;}
	.name2 {width:20%; background:#008D4D; border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;position:absolute;margin-top:38%;left:28%;z-index:15;height:150%;color:white;font-size:4.5vh; text-align:center; padding-top:2%;}
	.name3 {width:20%; background:#008D4D; border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;position:absolute;margin-top:38%;left:51.5%;z-index:15;height:150%;color:white;font-size:4.5vh; text-align:center; padding-top:2%;}
	.name4 {width:20%; background:#008D4D; border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;position:absolute;margin-top:38%;left:75%;z-index:15;height:150%;color:white;font-size:4.5vh; text-align:center; padding-top:2%;}
	.name,.name2,.name3,.name4 {font-weight:bold;font-size:4vh ; margin-top:35% ;}
	.cost {width:18%; height:90%; position:absolute; left:5.2%; margin-top:41.5%; background:#FDE800;z-index:16;color:#494949; font-size:6vh;padding-top:1.2%;
	text-align:center; font-weight:bold;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;cursor:pointer;
	}
    .cost2 {width:18%; height:90%; position:absolute; left:29%; margin-top:41.5%; background:#FDE800;z-index:16;color:#494949; font-size:6vh;padding-top:1.2%;
	text-align:center; font-weight:bold;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;cursor:pointer;
	}
	.cost3 {width:18%; height:90%; position:absolute; left:52.6%; margin-top:41.5%; background:#FDE800;z-index:16;color:#494949; font-size:6vh;padding-top:1.2%;
	text-align:center; font-weight:bold;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;cursor:pointer;
	}
	.cost4 {width:18%; height:90%; position:absolute; left:76%; margin-top:41.5%; background:#FDE800;z-index:16;color:#494949; font-size:6vh;padding-top:1.2%;
	text-align:center; font-weight:bold;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;cursor:pointer;
	}
	.cost:hover ,.cost2:hover ,.cost3:hover ,.cost4:hover {background:#FFC200;}
	
	
.intro3 {width:100%;height:100%;top:200%;background:#008D4D;position:absolute;display:block ;}
.infoitr3 {background:black;position:absolute;top:0%;height:10%;width:100%;
-webkit-box-shadow: 0px 0px 25px #222;
    -moz-box-shadow: 0px 0px 25px #222;
    box-shadow: 0px 0px 25px #222;
	color:white;}
	.text1 {font-size:7vh;font-weight:bold; margin-left:5%;margin-top:10%;color:white;line-height:0.6 ;}
	.text1a {font-size:7vh;font-weight:bold; margin-left:5%;margin-top:4%;color:white;line-height:0.6 ;}
    .text2 {font-size:4.5vh;font-weight:normal;margin-top:-1%;line-height:0.6 ;}
	.box2 {background:#FFDF00;width:30%;height:10%;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;position:absolute; left:62%;top:80%;color:#51513E;font-size:5vh;padding-top:2%;
	text-align:center;font-weight:bold;cursor:pointer;display:block;}
	.box2:hover {background:#FFE649;}

	
	.intro4 {width:100%;height:100%;top:300%;background:white;position:absolute;display:block ;}
	.infoitr4 {background:#FFE800;position:absolute;top:0%;height:12%; width:100%;color:#111111;}
	.infoitr4tx {font-size:4.5vh;margin-left:5%; margin-top:1.8%; position:absolute;}
	
.devergency1 {width:11%;height:auto;padding:1.5%;background:#FFDF00;font-size:2.5vh;margin-top:10%;position:absolute;text-transform:uppercase;margin-left:5%;font-weight:bold;color:#383838;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}
.devergency1a {width:11%;height:auto;padding:1.5%;background:#F4C300;font-size:3vh;position:absolute;color:#383838;text-transform:uppercase;margin-top:14%;margin-left:5%;font-weight:bold;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}

.devergency2 {width:11%;height:auto;padding:1.5%;background:#FFDF00;font-size:2.5vh;margin-top:10%;position:absolute;text-transform:uppercase;margin-left:20%;font-weight:bold;color:#383838;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}
.devergency2a {width:11%;height:auto;padding:1.5%;background:#F4C300;font-size:3vh;position:absolute;color:#383838;text-transform:uppercase;margin-top:14%;margin-left:20%;font-weight:bold;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}

.devergency3 {width:11%;height:auto;padding:1.5%;background:#FFDF00;font-size:2.5vh;margin-top:10%;position:absolute;text-transform:uppercase;margin-left:35%;font-weight:bold;color:#383838;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}
.devergency3a {width:11%;height:auto;padding:1.5%;background:#F4C300;font-size:3vh;position:absolute;color:#383838;text-transform:uppercase;margin-top:14%;margin-left:35%;font-weight:bold;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}

.devergency4 {width:11%;height:auto;padding:1.5%;background:#FFDF00;font-size:2.5vh;margin-top:10%;position:absolute;text-transform:uppercase;margin-left:50%;font-weight:bold;color:#383838;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}
.devergency4a {width:11%;height:auto;padding:1.5%;background:#F4C300;font-size:3vh;position:absolute;color:#383838;text-transform:uppercase;margin-top:14%;margin-left:50%;font-weight:bold;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}

.devergency5 {width:11%;height:auto;padding:1.5%;background:#FFDF00;font-size:2.5vh;margin-top:10%;position:absolute;text-transform:uppercase;margin-left:65%;font-weight:bold;color:#383838;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}
.devergency5a {width:11%;height:auto;padding:1.5%;background:#F4C300;font-size:3vh;position:absolute;color:#383838;text-transform:uppercase;margin-top:14%;margin-left:65%;font-weight:bold;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}

.devergency6 {width:11%;height:auto;padding:1.5%;background:#FFDF00;font-size:2.5vh;margin-top:10%;position:absolute;text-transform:uppercase;margin-left:80%;font-weight:bold;color:#383838;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}
.devergency6a {width:11%;height:auto;padding:1.5%;background:#F4C300;font-size:3vh;position:absolute;color:#383838;text-transform:uppercase;margin-top:14%;margin-left:80%;font-weight:bold;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;}
.google {width:80%;left:10%;position:absolute; top:70%;}
.googleinfo {font-size:5vh;text-transform:uppercase;position:absolute;top:88%;left:15%;}

.intro5 {width:100%;height:100%;top:400%;background:#1f1f1f;position:absolute;}
.copy {font-size:4vh;color:white;position:absolute;left:5%;top:88%;}
.copy2 {font-size:3vh;color:white;position:absolute;right:5%;top:89%;}
.txt1 {width:auto;font-size:3vh;float:left;}

a.ass:link {
  color: #FFCD00; 
  
  text-decoration:none;
}
a.ass:visited {
  color: #FFCD00;
  text-decoration:none;
}
a.ass:hover {
  color: #FFD42B; 
  
  text-decoration:none;
}
a.ass:active {
  color: #FFCD00; 
  
  text-decoration:none;
}

a.go_to:link {
  color: #303030; 
  
  text-decoration:none;
}
a.go_to:visited {
  color: #303030;
  text-decoration:none;
}
a.go_to:hover {
  color: #1E1E1E; 
  
  text-decoration:none;
}
a.go_to:active {
  color: #303030; 
  
  text-decoration:none;
}
a.buy2:link {
  color: #303030; 
  
  text-decoration:none;
}
a.buy2:visited {
  color: #303030;
  text-decoration:none;
}
a.buy2:hover {
  color: #1E1E1E; 
  
  text-decoration:none;
}
a.buy2:active {
  color: #303030; 
  
  text-decoration:none;
}
a.footer:link {
  color: white; 
  
  text-decoration:none;
}
a.footer:visited {
  color: white;
  text-decoration:none;
}
a.footer:hover {
  color:#FFD42B; 
  
  text-decoration:none;
}
a.footer:active {
  color: white; 
  
  text-decoration:none;
}
.burger {font-size:4vh;position:absolute;top:4.5%;left:10%;cursor:pointer;}
.menu {position:absolute;top:5%;width:auto;left:22%;z-index:100;font-size:4vh;color:black;}
.menu1 {font-size:4vh;}
.menum {display:none;}
.gpic {width:3%;margin-top:0.5%;}
.overlay {
    background-color:black; /* Цвет фона */
    opacity: 0.5; /* Изначально непрозрачный */
    position: fixed; /* Фиксированное позиционирование */
    right: 0;    /* Справа 0 */
    top: 0;    /* Сверху 0 */
    left: 0;    /* Слева 0 */
    bottom: 0;    /* Снизу 0 */
    visibility: hidden; /* Изначально невидимый */
z-index:2200;

    /* transition старт */
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;
    -o-transition:All 1s ease;
}
.overlay:target {
    visibility: visible; /* Делает видимым */
    opacity: 1;    /* Фон становится полностью прозрачным */
}
.popup {
    background-color: #FFE800; /* Фон */
    padding: 5%; /* Внутренние отступы */
    position: fixed;    /* Фиксированное расположение */
    visibility: hidden;    /* Изначально - спрятан */
    z-index: 10;    /* z-index */
    color:black; /* Цвет */
    font: bold 12pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Толщина, размер и семейство шрифта */
    z-index:10201;
    width:50%;
}

.popup a {
    color:black; /* Цвет */
    font: bold 12pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Толщина, размер и семейство шрифта */\
z-index:2202;
.text-decoration:none;
}
.overlay:target+.popup {
    top: 30%; /* Расположение */
    left: 20%; /* Расположение */
    opacity: 1; /* Убирает прозрачность */
    visibility: visible; /* Делает видимым */
z-index:2203;
}

.inputbuy {background:white; width:100%;border:none;color:#11111;font-size:4vh;padding-left:2%;text-transform:uppercase;font-family: 'Open Sans Condensed', sans-serif;}
::-webkit-input-placeholder {color:#11111;width:80%;}
::-moz-placeholder          {color:#11111;text-transform:uppercase;width:98%;}/* Firefox 19+ */
:-moz-placeholder           {color:#11111;text-transform:uppercase;width:98%;}/* Firefox 18- */
:-ms-input-placeholder      {color:#11111;text-transform:uppercase;width:98%;}

@media screen and (max-width: 480px) {
.logo {width:90%;left:5%;top:25%;}
.info {width:auto;margin-top:50%;left:8%;top:0%;font-size:2.8vh;}
.menum {display:block;margin-top:-1%;}
.menu1 {display:none;}
.intro1text {left:8%;top:55%;font-size:2.5vh;}
.box {width:20%;height:10%;left:8%;top:60%;}
.inputintro {width:20%;height:9.7%;position:absolute;left:30%;top:60%;font-size:2vh;}
.inputintro2 {width:20%;height:9.7%;position:absolute;left:50%;top:60%;font-size:2vh;}
.inputintro3 {width:20%;height:9.7%;position:absolute;left:70%;top:60%;font-size:2vh;}
.button {display:none;}
.arrow {display:none;}
.underbut {top:72%;left:8%;font-size:2vh;font-weight:bold;width:85%;text-align:center;color:#383838;}
.infoitr2 {height:6%;}
.beer {margin-top:20%;width:30%;margin-left:13%;}
.buy {left:76%;width:16%;font-size:3vh;top:2%;padding:1.5%;text-align:left;}
.name,.name2,.name3,.name4 {display:none;}
.cost,.cost2,.cost3,.cost4 {font-size:2vh;margin-top:90%;}
.label {width:25%; position:absolute;left:15%;margin-top:28%;z-index:6; opacity:0.8;}
		.labe2 {width:25%; position:absolute;left:58%;margin-top:28%;z-index:6; opacity:0.8;}
			.labe3 {width:25%; position:absolute;left:58.5%;margin-top:110%;z-index:6; opacity:0.8;}
				.labe4 {width:25%; position:absolute;left:15%;margin-top:110%;z-index:6; opacity:0.8;}
.cost {left:16%; margin-top:75.5%;width:25%;padding-top:5%;
	}
    .cost2 {left:59%; margin-top:75.5%; padding-top:5%;width:25%;
	}
	.cost3 {position:absolute; left:16%; margin-top:158%;width:25%;padding-top:5%;}
	.cost4 {position:absolute; left:59%; margin-top:158%;width:25%;padding-top:5%;}

.infoitr3 {height:6%;}
.text1,.text1a {font-size:4vh;padding:2%;line-height:1.2;font-weight:normal;margin-top:10%;}
.text2 {margin-top:5%;font-size:3vh;}
.box2 {width:50%;font-size:3vh;left:40%;margin-top:5%;padding-top:5%;height:6%;}
.box2under{width:50%;font-size:3vh;left:40%;margin-top:7%;height:7.5%;display:none;}
.devergency1 {font-size:1.8vh;margin-top:30%;font-weight:normal;}
.devergency1a {font-size:2vh;margin-top:39%;}
.devergency2 {font-size:1.8vh;margin-top:30%;font-weight:normal;}
.devergency2a {font-size:2vh;margin-top:39%;}
.devergency3 {font-size:1.8vh;margin-top:30%;font-weight:normal;}
.devergency3a {font-size:2vh;margin-top:39%;}
.devergency4 {font-size:1.8vh;margin-top:30%;font-weight:normal;}
.devergency4a {font-size:2vh;margin-top:39%;}
.devergency5 {font-size:1.8vh;margin-top:30%;font-weight:normal;}
.devergency5a {font-size:2vh;margin-top:39%;}
.devergency6 {font-size:1.8vh;margin-top:30%;font-weight:normal;}
.devergency6a {font-size:2vh;margin-top:39%;}
.google {width:100%;height:20%;top:40%;left:0%;}
.googleinfo {font-size:4vh;top:54%;left:5%;width:auto;text-align:center;width:90%;}
.copy {font-size:3vh;}
.copy2 {font-size:3vh;top:95%;right:20%;}
.infoitr4 {height:7%;}
.gpic {width:10%;position:absolute;left:45%;top:100%;}

}

@media screen and (max-width: 320px) {
.beer {width:25%;margin-left:16%;}
.cost {left:16%; margin-top:65.5%;width:25%;padding-top:5%;}
.cost2 {left:59%; margin-top:65.5%; padding-top:5%;width:25%;}
.cost3 {position:absolute; left:16%; margin-top:132%;width:25%;padding-top:5%;}
.cost4 {position:absolute; left:59%; margin-top:132%;width:25%;padding-top:5%;}	
.label {width:23%; position:absolute;left:17%;margin-top:28%;z-index:6; opacity:0.8;}
.labe2 {width:23%; position:absolute;left:58%;margin-top:28%;z-index:6; opacity:0.8;}
.labe3 {width:23%; position:absolute;left:57.5%;margin-top:98%;z-index:6; opacity:0.8;}
.labe4 {width:23%; position:absolute;left:17%;margin-top:98%;z-index:6; opacity:0.8;}
.info {width:auto;margin-top:50%;left:9%;top:0%;font-size:2.85vh;}
.intro1text {font-size:2.5vh;}

}