@font-face {
  font-family: antonio;
  src: url(fonts/Antonio-Regular.ttf);
}
@font-face {
  font-family: antonio;
  src: url(fonts/Antonio-Bold.ttf);
  font-weight: bold;
}
html, body {
	padding: 0px;
	margin: 0px;
	color: #fff;
	font-family: antonio;
	background-color: #333;
}
a:link, a:visited, a:hover, a:active { color:#fff; text-decoration: none; }

.floating { 
    animation-name: floating;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
 
@keyframes floating {
    0%   { transform: translate(0, 0px); }
    50%  { transform: translate(0, 10px); }
    100% { transform: translate(0, -0px); }
}

#menu {
	opacity: 0;
	transition: all 300ms;
	padding: 20px !important;
	top: 0;
	left: 0;
	right: 0;
	position: fixed;
}
	#menu.visible {
		opacity:1;
	}
.menu-addon {
	position: absolute;
	top: 10;
}
#menu-logo {
	height: 50px;
	left: 10;
}
#icons {
	right: 10;
	padding: 15px;
	position: fixed;
	z-index: 1000;
	font-size: 1.6em;
}

.parallax {
  /* The image used */
  background: url("images/koper-cruise-ship-slovenia.jpg") rgba(0,0,0,0.4);

  /* Set a specific height */
  height: 500px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  background-blend-mode: multiply;  
  
  text-align: center;
}
.parallax img {
	height: 60%;
	margin-top: 100px;
}
.strip {
	/*background-color: #c3423f;*/
	background-color: #333333;
	text-align: center;
	padding: 40px;
	font-size: 1.3em;
	z-index:666;
}

.strip.uppercase {
	text-transform: uppercase;
}

#map {
	height: 500px;
}

.dotted-border-spaced {
	background-image: linear-gradient(to right, #999 10%, rgba(255, 255, 255, 0) 0%);
	background-position: top;
	background-size: 10px 1px;
	background-repeat: repeat-x;
}

.beer { 
	font-size: 1.2em;
	display: -webkit-box; 
	display: -webkit-flex; 
	display: -ms-flexbox; 
	display: flex; 
	-webkit-box-orient: horizontal; 
	-webkit-box-direction: normal; 
	-webkit-flex-direction: row; 
	-ms-flex-direction: row; 
	flex-direction: row; 
	width: 100%; 
	/*max-height: 500px; */
	max-height: 75%;
	margin: 0; 
	padding: 0; 
	/*background-color: #333; */
	overflow: hidden; 
	text-shadow: 0 1px #000;
	padding-top: 5rem;
}
.beer .label { 
	width: 50%; 
	padding-top: 5rem; 
	margin: 0; 
	display: flex; 
	-webkit-box-ordinal-group: 2; 
	-webkit-order: 1;
	-ms-flex-order: 1;
	order: 1;
	overflow: hidden;
	text-align: center;
	max-height: 500px;
	justify-content: center;
}
.beer .label2 { 
	width: 50%; 
	padding-top: 5rem; 
	margin: 0; 
	display: flex; 
	-webkit-box-ordinal-group: 2; 
	-webkit-order: 1;
	-ms-flex-order: 1;
	order: 1;
	text-align: center;
	justify-content: center;
}
.beer .label2 img { flex: none; }
.beer .label img { flex: none; height: 307px; border: 10px solid; }
.beer .info { 
	width: 50%; 
	vertical-align: top; 
	padding: 0; 
	margin: 0; 
	-webkit-box-ordinal-group: 3;
	-webkit-order: 2;
	-ms-flex-order: 2; 
	order: 2;
	background-repeat: no-repeat; 
	background-position: right bottom; 
	overflow: hidden; 
	}
.beer .info.desktop {margin-top: 3rem;}
/*.beer .info { width: 50%; vertical-align: top; padding: 0; margin: 0; -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; background-repeat: no-repeat; background-position: right bottom; max-height: 680px; overflow: hidden; }*/
.beer .info.mobile { display: none; }
@media screen and (max-width: 960px) { 
	.beer .info.mobile { display: block; -webkit-order: 1; -ms-flex-order: 1; order: 1; text-align: center; } 
	.beer .info.desktop {margin-top: 0;}
}
.beer .info .beer-content { padding: 5rem; }

.places {
	margin: auto;
	width: 480px;
}
.places .place {
	display: flex; margin-top: 10px;
}
.places .place.inactive,
.places .place.inactive a {
	color: #999;
}
.places .place.inactive .name {
	text-decoration: line-through;
}
.places .place i {
	font-size: 2em;
}
.places .place > div {
	padding: 20px;
}

@media screen and (max-width: 960px) { 
	.beer {
		-webkit-box-orient: vertical; 
		-webkit-box-direction: normal; 
		-webkit-flex-direction: column; 
		-ms-flex-direction: column; 
		flex-direction: column; 
		max-height: 1000px;
		padding-top: 2rem;
	}
	.places {
		width: auto;
	}
	.places .place {
		width: 100%;
	}
	.beer .label { 
		width: 100%;
		padding: 0;
	}
	.beer .label img { height: 10em; }
	.beer .label2 { 
		width: 100%;
		padding: 0;
	}
	.beer .label2 img { height: 20em; }
	.beer .info { 
		width: 100%;
	}
	.beer .info .beer-content { padding: 1rem; }
	.beer .info.desktop .beer-content .beer-tagline { display: none; }
	
	.slick-slide {
		height: auto !important;
	}

}

.beer .info .beer-content .beer-name { display: block; height: 2.5rem; margin-bottom: 0.625rem; }
.beer .info .beer-content .beer-name img { max-height: 2.5rem; width: auto; max-width: 100%; }
.beer .info .beer-content .beer-tagline { display: block; font-weight: bold; text-transform: uppercase; margin-bottom: 1.25rem; }
.beer .info .beer-content .beer-tagline .beer-name { display: block; font-size: 2em; }
.beer .info .beer-content .beer-tagline .beer-style { display: block; font-style: italic; text-transform: lowercase; font-weight: 100; }
.beer .info .beer-content .beer-specs { margin-bottom: 1.25rem; }
.beer .info .beer-content .beer-specs .beer-spec-row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; margin-bottom: 0.625rem; }
.beer .info .beer-content .beer-specs .beer-spec-row .beer-spec-type { width: 30%; font-weight: bold; }
@media (max-width: 960px) { .beer .info .beer-content .beer-specs .beer-spec-row .beer-spec-info { width: 60%; } }
.beer .info .beer-content .beer-specs .beer-spec-row .beer-spec-info { width: 70%; font-weight: 100; }
@media (max-width: 960px) { .beer .info .beer-content .beer-specs .beer-spec-row .beer-spec-type { width: 40%; } }

.slick-dotted.slick-slider {
	margin-bottom: 0 !important;
}

.slick-dots {
	bottom: 25px !important;
}

#age-popup {
	z-index: 1000;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: fixed;
	display: none;
	background-color: rgba(0, 0, 0, 0.8);
	font-size: 1.2em;
}
#age-popup-content {
	position: relative;
	top: 33%;
	width: 100%;
	text-align: center;
	margin-top: 30px;
	
}
#age-popup-content a {
	display: inline-block;
	padding: 1em;
	background-color: #c3423f;
}
#no-button {
	margin-left: 1.2em;
}