.delay-face { animation-delay: 0.5s; }
.delay-bottle { animation-delay: 3s; }
.delay-bio1 { animation-delay: 1s; }
.delay-bio2 { animation-delay: 2s; }
.delay-bio3 { animation-delay: 3s; }

.delay-01 {animation-delay: 0.2s;}
.delay-02 {animation-delay: 0.4s;}
.delay-03 {animation-delay: 0.6s;}
.delay-04 {animation-delay: 0.8s;}
.delay-05 {animation-delay: 1s;}
.delay-06 {animation-delay: 1.2s;}
.delay-07 {animation-delay: 1.4s;}
.delay-08 {animation-delay: 1.6s;}
.delay-09 {animation-delay: 1.8s;}
.delay-10 {animation-delay: 2s;}
.delay-11 {animation-delay: 2.2s;}
.delay-12 {animation-delay: 2.4s;}
.delay-13 {animation-delay: 2.6s;}
.delay-electro {animation-delay: 4s;}



.red{ border: 1px solid red;}
.green{ border: 1px solid green;}
.blue{ border: 1px solid blue;}
.black{ border: 1px solid black;}
.orange{ border: 1px solid orange;}

body	{
	background: #fff;
	font-family: 'Caveat', cursive;
}

h1	{
	font-weight: bold;
	font-size: 31px;
	padding-bottom: 20px;
}


p	{
	color: #000;
	font-size: 27px;
	line-height: 35px;
}

.logo	{
	/* border: 1px solid orange; */
}

.logo img	{
	width: auto;
	height: 110px;
}


.container	{
	/* border: 1px solid red; */
}

header	{
	overflow: hidden;
	padding: 20px 0;
	/* border: 1px solid green; */
}

.menu-burger {
	background: url('../images/menu.jpg') no-repeat top center;
	width: 40px; 
	height: 30px;
	position: absolute;
	right: 40px;
	top: 40px;
	display: block;
	cursor: pointer;
	z-index: 51;
	/* border: 1px solid pink; */
}

.menu-burger:hover {
	background: url('../images/menu_hover.jpg') no-repeat top center;
}

.navigation	{
	position: absolute;
	background: white;
	z-index: -1;
	width: 100%;
	height: 100%;
	overflow: hidden;
	transition: 0.3s;
	opacity: 0;
	display: table;
	/* visibility: hidden; */
}

.navigation ul{
	padding: 0;
	list-style: none;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}

.navigation ul li {
	padding: 20px 0;
}

.navigation ul li a{
	font-size: 45px;
	color: #000;
	text-decoration: none;
}

.navigation ul li a:visited{
	color: #000;
	
}

.navigation ul li a:hover{
	color: #333;
}



.frames {
	/* margin-top: 50px; */
	height: 700px;
	overflow: hidden;
	
}

.frames img	{
	position: absolute;
	/* width: 100%; */
}

.electro	{
	left: 50%;
	transform: translateX(-50%);
	margin-top: 175px;
}
.bottle2	{
	left: 50%;
	margin-top: 25px;
	margin-left: -200px;
}
.angry	{
	left: 50%;
	margin-top: 25px;
	margin-left: -10px;
}
.sshh	{
	left: 50%;
	margin-top: 50px;
	margin-left: 180px;
}
.shout	{
	left: 50%;
	margin-top: 233px;
	margin-left: 172px;
}
.shower	{
	left: 50%;
	margin-top: 292px;
	margin-left: 357px;
}
.banana	{
	left: 50%;
	margin-top: 94px;
	margin-left: -381px;
}
.hairy	{
	left: 50%;
	margin-top: 320px;
	margin-left: -341px;
}
.sad	{
	left: 50%;
	margin-top: 320px;
	margin-left: -495px;
}
.fish	{
	left: 50%;
	margin-top: 519px;
	margin-left: -398px;
}
.pen	{
	left: 50%;
	margin-top: 550px;
	margin-left: -160px;
}
.moustache	{
	left: 50%;
	margin-top: 550px;
	margin-left: -18px;
}
.tensed	{
	left: 50%;
	margin-top: 460px;
	margin-left: 172px;
}








.menu a{
	font-size: 14px;
	color: #808080;
}

.menu .active a{
	color: #000;
}

.menu .active a:visited	{
	color: none;
}


section	{
	text-align: center;
	margin: 0 auto;
}

.biography h2{
	font-weight: bold;
	font-size: 50px;
}

.biography .eye {
	background: url('../images/eye.gif') no-repeat center;
	width: 21px;
	height: 23px;
	position: absolute;
	
}

.biography .pos-left	{
	left: 12px;
	margin-top: 20px;
	-webkit-animation: rotation-left 2s infinite linear;
}

.biography .pos-right	{
	/* margin-right: -37px; */
	margin-top: 20px;
	right: -34px;
	-webkit-animation: rotation-right 2s infinite linear;
}

@-webkit-keyframes rotation-left {
	from {
			-webkit-transform: rotate(0deg);
	}
	to {
			-webkit-transform: rotate(359deg);
	}
}

@-webkit-keyframes rotation-right {
	from {
			-webkit-transform: rotate(359deg);
	}
	to {
			-webkit-transform: rotate(0deg);
	}
}

.biography p {
	font-size: 24px;
	line-height: 30px;
}


.biography	ul li{
	font-size: 24px;
	line-height: 30px;
}

.biography ul.rightbull {
	direction: rtl;
	margin-right: -20px;
}

.biography img {
	padding: 20px 0;
}


.bar	{
	/* background: url('../images/img_bar_wide.jpg') no-repeat center; */
	background: url('../images/bar-line.jpg') repeat-y center;
	position: absolute;
	width: 46px;
	height: 100%;
	left: 50%;
}

.bar-top	{
	background: url('../images/bar-top.jpg') no-repeat top;
	position: absolute;
	width: 46px;
	height: 100%;
	left: 50%;
	z-index: 5;
}

.bar-bottom	{
	background: url('../images/bar-bottom.jpg') no-repeat bottom;
	position: absolute;
	width: 46px;
	height: 100%;
	left: 50%;
	z-index: 5;
}



.face	{
	position: absolute;
	right: -120px;
	top: -90px;
}

.filter 	{
	margin: 0 auto;
}


.filter ul.menu {
    padding: 50px 0;
	font-weight: bold;
	margin: 0 auto;
	text-align: center;
	background: url('../images/tab-divider.jpg') no-repeat center 92px;
	/* border: 1px solid red; */
}


.filter ul.menu li {
    display: inline-block;
    position: relative;
	/* background: url('../images/tab-off.jpg') no-repeat center top; */
	/* border: 1px solid red; */
}

.filter ul.menu li {
	font-size: 28px;
	color: #b8b8b8;
	cursor: pointer;
}

.filter ul.menu li.active {
	color: #000;
	/* text-decoration: underline; */
	top: 5px;
	background: url('../images/tab-on.jpg') no-repeat center -3px;
	z-index: 40;
	position: relative;
}

.filter ul.menu li {
    /* padding: 0 60px; */
	width: 230px;
}


.filter ul.menu li span:first-child {
    padding-left: 0;
}



.grid	{
	padding: 0;
	margin: 0 auto;
	/* margin-bottom: 300px; */
	/* border: 1px solid #e0e0e0; */
}

.grid-item {
	max-width: 315px;
	float: left;
	margin-bottom: 20px;
	transition: all .2s ease-in-out;
	
	/* padding-right: 50px; */
	/* padding-bottom: 20px; */
	/* z-index: 1; */
	/* border: 1px solid green; */
}

.grid-item:hover{
	-webkit-transform: rotate(4deg) scale(1.05);
          transform: rotate(4deg) scale(1.05);
}


.grid .grid-item .image img:first-child{
	/* border: 1px solid blue;  */
}

.gutter-sizer	{
	/* width: 17%; */
	/* border: 5px green solid; */
}


.last img	{
	padding-right: 0;
}





.grid-item .details	{
	opacity: 0;
	display: block;
	-webkit-transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
	transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
	/* cursor: pointer; */
}

.grid-item .details:hover	{
	/* opacity: 1; */
}

.grid-item .title	{
	text-transform: uppercase;
	color: #000;
	font-weight: bold;
	position: absolute;
	top: 50%;
	margin-top: -25px;
	left: 0;
	transform: translate(0, -50%);
	width: 340px;
	text-align: center;
	z-index: 3;
	/* border: 1px solid yellow; */
}

.grid-item .category	{
	color: #808080;
	position: absolute;
	top: 50%;
	margin-top: 0px;
	left: 0;
	transform: translate(0, -50%);
	width: 340px;
	text-align: center;
	z-index: 3;
	/* border: 2px solid blue; */
}

.grid-item .overlay	{
	position: absolute;
	/* width: 100%; */
	/* height: 100%; */
	width: 315px;
	height: 365px;
	z-index: 2;
	background: #fff;
	opacity: .9;
}

.grid-item .overlay-poster	{
	position: absolute;
	width: 345px;
	height: 523px;
	z-index: 2;
	background: #fff;
	opacity: .9;
}

.grid-item .image	{
	/* z-index: 1; */
}


.mag	{
	width: 30px;
	height: 32px;
	background: url('../images/mag.jpg') no-repeat center;
	margin-right: 2000px;
}


.bottle	{
	/* position: relative; */
	right: 0;
	bottom: 0;
	z-index: 10;
	/* right: 35px; */
	/* bottom: 20px; */
}



.services img	{
	padding-bottom: 70px;
}


.news	{
	padding: 40px 0;
	border-bottom: solid 2px black;
}

.news:last-child	{
	border: none;
}



.news-info .date {
	font-size: 23px;
	padding-bottom: 50px;
}

.news-info h2	{
	font-weight: bold;
	font-size: 27px;
}

.news-info p { 
	font-size: 23px;
}

.news-info a:link { color: #333; }
.news-info a:visited { color: #333; text-decoration: none; border-bottom: none; }
.news-info a:hover { color: #000; border-bottom: 3px solid black; text-decoration: none; }



.news-inner h2	{
	font-weight: bold;
	font-size: 27px;
	padding-bottom: 20px;
}



.news-inner .date	{
	font-size: 23px;
	padding-bottom: 20px;
}

.news-inner p { 
	font-size: 27px;
}

.news-inner a:link { color: #333; }
.news-inner a:visited { color: #333; text-decoration: none; border-bottom: none; }
.news-inner a:hover { color: #000; border-bottom: 3px solid black; text-decoration: none; }



footer	{
	color: #000;
	font-size: 27px;
	text-align: center;
	margin-top: 50px;
	margin-bottom: 20px;	
	line-height: 25px;
	/* display: flex; */
	/* position: absolute; */
	/* left: 50%; */
	/* bottom: 0; */
}

footer small a:link {
	font-size: 16px;
	text-decoration: none;
	color: #222;
}


footer small a:visited {
	text-decoration: none;
	color: #222;
}

footer small a:hover {
	color: #999;
}

.vdown	{
	align-self: flex-end;
}

.port-info a:link { color: #333; }
.port-info a:visited { color: #333; text-decoration: none; border-bottom: none; }
.port-info a:hover { color: #000; border-bottom: 3px solid black; text-decoration: none; }



.contact a:link {
	color: #000;
	text-decoration: underline;
}

.contact a:hover {
	color: #000;
	text-decoration: none;
}

.contact a:visited {
	color: #000;
}

form {
	
}

form input[type=text] {
	border: none;
	border-bottom: solid black 1px;
	width: 75%;
	font-size: 23px;
	/* margin-left: 40px; */
}

form textarea	{
	border: solid black 1px;
	width: 100%;
	font-size: 23px;
}


.instagram	{
	width: 51px;
	height: 55px;
	background: url('../images/insta.jpg') no-repeat bottom center;
	text-indent: -9999px;
	display: block;
}

.instagram:hover	{
	background: url('../images/insta_hover.jpg') no-repeat top center;
}


@media (max-width: 1199px)	{
	
	.bar	{
		/* background: url('../images/img_bar.jpg') no-repeat top center; */
	}

	.gutter-sizer	{
		/* width: 153px; */
	}

	.grid-item img {
		/* height: 100px; */
	}
	
	.filter ul.menu {
		background: url('../images/tab-divider.jpg') no-repeat center 94px;
	}
	
	.filter ul.menu li {
		/* padding: 0 60px; */
		width: 200px;
		height: 44px;
		font-size: 22px;
	}
	
	.filter ul.menu li.active {
		color: #000;
		/* text-decoration: underline; */
		/* top: -5px; */
		background: none;
		z-index: 100;
		position: relative;
		background: url('../images/tab2-on.jpg') no-repeat center -2px;
	}

	/*
	.grid-item .title	{
		width: calc(100% - 20px);
		width: -moz-calc(100% - 20px);
		width: -webkit-calc(100% - 20px);
		width: -o-calc(100% - 20px);
	}
	.grid-item .category	{
		width: calc(100% - 20px);
		width: -moz-calc(100% - 20px);
		width: -webkit-calc(100% - 20px);
		width: -o-calc(100% - 20px);
	}
	.grid-item .overlay		{
		width: calc(100% - 20px);
		width: -moz-calc(100% - 20px);
		width: -webkit-calc(100% - 20px);
		width: -o-calc(100% - 20px);
		
		height: calc(100% - 20px);
		height: -moz-calc(100% - 20px);
		height: -webkit-calc(100% - 20px);
		height: -o-calc(100% - 20px);
	}
	.grid-item .overlay-poster	{
		width: calc(100% - 20px);
		width: -moz-calc(100% - 20px);
		width: -webkit-calc(100% - 20px);
		width: -o-calc(100% - 20px);
		
		height: calc(100% - 20px);
		height: -moz-calc(100% - 20px);
		height: -webkit-calc(100% - 20px);
		height: -o-calc(100% - 20px);
	}
	*/
}



@media (max-width: 991px)	{
	.gutter-sizer	{
		/* width: 187px; */
	}
	
	.filter ul.menu li span {
		/* padding: 0 40px; */
	}
	
	.filter ul.menu {
		background: none;
		/* background: url('../images/tab-divider.jpg') no-repeat center 94px; */
	}
	
	.filter ul.menu li {
		/* padding: 0 60px; */
		width: 100%;
		/* height: 50px; */
		font-size: 22px;
		border-bottom: 2px solid black;
		/* border-bottom: none; */
		background: #eee;
	}
	
	.filter ul.menu li.active {
		color: #000;
		/* text-decoration: underline; */
		top: 0;
		background: none;
		z-index: 100;
		position: relative;
		/* border-bottom: 2px solid black; */
		/* background: url('../images/tab2-on.jpg') no-repeat center -2px; */
	}

	/*
	.grid-item .details	{
		opacity: 1;
	}
	.grid-item .title	{
		width: 320px;
	}
	.grid-item .category	{
		width: 320px;
		color: #555;
	}
	.grid-item .overlay	{
		width: 320px;
		height: 240px;
		opacity: .5;
	}
	.grid-item .overlay-poster	{
		width: 320px;
		height: 485px;
		opacity: .7;
	}
	*/
}


@media (max-width: 767px)	{
	.gutter-sizer	{
		/* width: 200px; */
	}
	
	.filter ul.menu li span {
		padding: 0 20px;
	}
	
	.face	{
		position: absolute;
		right: -80px;
		top: -90px;
		z-index: -1;
	}
	
	.port-pic	{
		text-align: center;
	}
	
	/*
	.grid-item {
		width: 100%;
	}
	.grid-item img	{
		width: 100%;
		padding-right: 0px;
		padding-bottom: 20px;
	}
	.grid-item .title	{
		width: 100%;
	}
	.grid-item .category	{
		width: 100%;
	}
	*/
	.grid-item .overlay	{
		width: 100%;
		/* Standard */
		height: calc(100% - 20px);
		/* Firefox */
		height: -moz-calc(100% - 20px);
		/* WebKit */
		height: -webkit-calc(100% - 20px);
		/* Opera */
		height: -o-calc(100% - 20px);
	}
	.grid-item .overlay-poster	{
		width: 100%;
		/* Standard */
		height: calc(100% - 20px);
		/* Firefox */
		height: -moz-calc(100% - 20px);
		/* WebKit */
		height: -webkit-calc(100% - 20px);
		/* Opera */
		height: -o-calc(100% - 20px);
		z-index: 2;
		background: #fff;
	}
	.port-info	{
		margin-top: 50px;
	}
	
	.news-info	{
		margin-top: 50px;
	}
	
	.biography ul.rightbull {
		direction: ltr;
		margin-right: 0;
	}
	.biography h2 {
		text-align: center;
	}
}


@media (max-width: 425px)	{
	.menu-burger {
		right: 10px;
	}
	.logo img {
		height: 90px;
		margin-bottom: 20px;
	}
	.biography h2 {
		font-size: 35px;
	}
	.biography	ul {
		padding: 0;
		margin: 0;
	}
	.biography	ul li {
		font-size: 22px;
	}
	.navigation ul li {
		padding: 10px 0;
	}

	.navigation ul li a{
		font-size: 40px;
	}
	.grid-item img {
		width: 100%;
	}
	.gutter-sizer	{
		/* width: 100%; */
	}
	.logo{
		width: 100%;
		text-align: center;
	}
	.navbar{
		width: 100%;
	}
	header .navbar ul.menu	{
		margin: 0 auto;
		padding: 40px 0;
	}
	header .navbar ul.menu li	{
		border: 1px solid #ccc;
		padding: 0 20px;
		margin: 0 10px;
	}
	header{
		padding: 40px 0 0 0;
	}
	h1{
		padding: 0 0 20px 0;
	}
	.face	{
		display: none;
	}
	.port-pic img	{
		width: 100%;
	}
	.news-pic img	{
		width: 100%;
	}
	.bottle{
		display: none;
	}
	form input[type=text] {
		width: 100%;
		font-size: 23px;
	}
	.button-submit	{
		margin: 0 auto;
	}
	
}

@media (max-width: 338px)	{
	header .navbar ul.menu li	{
		padding: 0;
		margin: 0;
	}
	
}






/* Preloader */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  /* change if the mask should have another color then white */
  z-index: 99;
  /* makes sure it stays on top */
}

#status {
	width: 200px;
	height: 200px;
	position: absolute;
	left: 50%;
	/* centers the loading animation horizontally one the screen */
	top: 50%;
	/* centers the loading animation vertically one the screen */
	background-image: url(../images/status.gif);
	/* path to your loading animation */
	background-repeat: no-repeat;
	background-position: center;
	margin: -100px 0 0 -100px;
	/* is width and height divided by two */
}