body,
html {
	background-color: black;
	overflow-x: hidden;
}
span a:hover{color:#e6007e;}

/******** FONT-FACE *********/

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

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

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

h1{font-family: Yorktown;}


a.contact{    
    position: absolute;
    width: 45%;
    height: 100%;
    top: 0;
    right: 0;
    cursor: pointer;
}

a.events{    
    position: absolute;
    width: 45%;
    height: 100%;
    top: 0;
    right: 0;
    cursor: pointer;
}

a.about{    
    position: absolute;
    width: 45%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
}

a.flavours{    
    position: absolute;
    width: 45%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
}

.trademark { font-size: 22px; font-family: Arial, Helvetica, sans-serif; line-height: 52px; vertical-align: top; }


section#1 .content_center { position: relative; }
.medals { position: absolute; bottom: 205px; right: 89px; }
@media screen and (max-width: 1600px) {
.medals { bottom: 21%; right: 5%; max-width: 25%; height: auto; }
}


h3.judge { color: #333; text-transform: none; font-weight: 700; font-size: 1.6em; font-family: UglyQua; padding-top: 30px; }
p.judge { font-size: 1.5em; }



h2.teq_heading { position: relative; font-family: Tequila !important; display: inline-block; margin-top: 10px; }
h2.teq_heading:after { position: absolute; top: -13px; right: -91px; width: 84px; height: 95px; display: block;
content: ''; background: url(http://www.marvolios.com/jul18/img/medals.png?a=2) -95px 0 no-repeat; background-size: 275px 93px; }

h2.whis_heading { position: relative; display: inline-block; margin-top: 10px; }
h2.whis_heading:after { position: absolute; top: -14px; right: -105px; width: 100px; height: 105px; display: block; content: ''; background: url(http://www.marvolios.com/jul18/img/medals.png?a=2) -212px 0 no-repeat; background-size: 310px 105px; }

h2.whinger_heading { position: relative; display: inline-block; margin-top: 0; }
h2.whinger_heading:after { position: absolute; top: 0; right: -110px; width: 100px; height: 105px; display: block; content: ''; background: url(http://www.marvolios.com/jul18/img/medals.png?a=2) 0 0 no-repeat; background-size: 310px 105px; }


@media screen and (max-width: 750px) {
p.plant { display: block; clear: both; }
.lbLeft img { width: 60% !important; float: none !important; margin: auto !important; }
.lbLeft .plant img, .lbLeft .whinger_heading img { width: auto !important; float: auto !important; margin: auto !important; }
}

@media screen and (max-width: 550px) {
h2.teq_heading, h2.whis_heading, h2.whinger_heading { padding-bottom: 110px; }
h2.teq_heading:after, h2.whis_heading:after, h2.whinger_heading:after { top: 70px; right: 0; left: 0; margin: auto; }
h2.whinger_heading:after { top: 80px; }
}

@media screen and (max-width: 410px) {
.featherlight .text { width: 100% !important; margin: 0 auto; }
}


/* ROTATION STUFF */

.introBg {
    background-image:url(../img/AgeRestriction_bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
    text-align: center;
}

#notice {
	
    background-image:url(../img/lb_bg_1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
	box-sizing: boder-box;
	width: 100%;
	height: 100%;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 998;
	text-align: center;
}

/* AGE VERIFICATION PAGE */

.ageHolder {
	background: black;
	text-align: center;
	height: auto;
	width: 100%;
}

.ageInside {
	
    font-family: UglyQua;
    font-size: 25px;
	color: #000;
	text-align: center;
	position: absolute;
	top: 65%;
	margin-top: -50px;
    width: 100%;
    height: 100%;
}

/* END */

#noticeContent {
	
    font-family: UglyQua;
    font-size: 25px;
	position: fixed;
	left: 50%;
	top: 50%;
	margin-top: 0px;
	margin-left: 0px;
	transform: translate(-50%, -50%);
	color: #000;
	z-index: 999;
	text-align: center;
}


.nostrum_page {
	text-align: center;
	/* Full height */
	height: 100%;
	width: 100%;
	/* Center and scale the image nicely */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: 0px;
}

.widthBlock {
	max-width: 300px;
}

/************** BOTTLE *************************/

.bottleHolder {
    display: inline-block;

	position: fixed;
	width: 20%;
    max-width: 1600px;
	left: 50%;
	top: 50%;
	margin-top: 0px;
	margin-left: 0px;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.bottle {

	max-width: 320px!important;
    pointer-events: none;
	-webkit-animation: bottle 6s ease-in-out infinite;
	-moz-animation: bottle 6s ease-in-out infinite;
	-o-animation: bottle 6s ease-in-out infinite;
	animation: bottle 6s ease-in-out infinite;
	animation: bottle 6s ease-in-out infinite;
}

/*******LOGO ABOVE THE BOTTLE********/

.logo {
   
	max-width: 320px!important;
    pointer-events: none;
}


/*BOTTLE EFFECT*/

@-webkit-keyframes bottle {
	0%,
	100% {
		-webkit-transform: translateY(0) rotate(-6deg);
	}
	50% {
		-webkit-transform: translateY(-20px) rotate(8deg);
	}
}

@-moz-keyframes bottle {
	0%,
	100% {
		-moz-transform: translateY(0) rotate(-6deg);
	}
	50% {
		-moz-transform: translateY(-20px) rotate(8deg);
	}
}

@-o-keyframes bottle {
	0%,
	100% {
		-o-transform: translateY(0) rotate(-6deg);
	}
	50% {
		-o-transform: translateY(-20px) rotate(8deg);
	}
}

@keyframes bottle {
	0%,
	100% {
		transform: translateY(0) rotate(-6deg);
	}
	50% {
		transform: translateY(-20px) rotate(8deg);
	}
}

.wooden_panel {
	position: relative;
	z-index: 2;
	overflow-y: visible;
	overflow-x: visible;
	width: 100%;
	background-image: url("../img/panel.png");
	background-repeat: no-repeat;
	background-position: top;
	height: 36px;
	margin-top: -10px;
}

#wooden_panel {
	display-: none;
}



section {
	overflow-x: hidden
}


/* PRIOR TO USING IMAGES IN THE DIV AS <img

.nostrum_page1 {
    background-image: url(../img/1.jpg); 
}

.nostrum_page2 {
    background-image: url(../img/2.jpg); 
}

.nostrum_page3 {
    background-image: url(../img/3.jpg); 
}

.nostrum_page4 {
    background-image: url(../img/4.jpg); 
}

*/

/* CONTAINER TO FIX RESIZZING ISSUES FOR ANIMATED OBJECTS */

.content_center {
	text-align: center;
	position: relative;
	top: 50%;
	color: white;

    
    max-width: 1600px;
	left: 50%;
	margin-top: 0px;
	margin-left: 0px;
	transform: translate(-50%);
}





/*********HERE ARE ALL BACKGROUND ANIMATIONS ************/


.overImageContent {}


/* ROLLOVER IMAGE HANDLERS */

.foo img:last-child {
	display: none
}

.foo:hover img:first-child {
	display: none
}

.foo:hover img:last-child {
	display: inline-block
}




/* menu hamburger fix - OVERRIDDING HACK*/

.navbar-header {
	float: none;
}

.navbar-left,
.navbar-right {
	float: none !important;
}

.navbar-toggle {
	display: block;
}

.navbar-collapse {
	border-top: 1px solid transparent;
	/*box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);*/
}

.navbar-fixed-top {
	top: 0;
	border-width: 0 0 1px;
}

.navbar-collapse.collapse {
	display: none!important;
}

.navbar-nav {
	float: none!important;
	margin-top: 7.5px;
}

.navbar-nav>li {
	float: none;
}

.navbar-nav>li>a {
	padding-top: 10px;
	padding-bottom: 10px;
}

.collapse.in {
	display: block !important;
}

.container {
	text-align: center;
	width: 100%;
}

.centerLock {
	margin-left: 50%;
	margin-right: 50%;
	transform: translate(50%);
}



/**** ACTIVE PAGE CSS****/

.navbar-header .navbar-nav li a:active,
.navbar-header .navbar-nav li a:focus {
	color: #fff
}

.navbar-header .navbar-nav li.active a,
.navbar-header .navbar-nav li.active a:active,
.navbar-header .navbar-nav li.active a:focus,
.navbar-header .navbar-nav li.active a:hover {
	color: #fff;
	background: #7FBBFF
}


/* NEWSLETTER SIGN UP */

#newsletter-container {
	padding: 5px;
}

#newsletter-container h3 {
	font-size: 12px;
	line-height: 30px;
	/*color: #444b4c;*/
	text-transform: uppercase;
	margin: 0;
	float: right;
	margin-right: 10px;
}

h3 {
	font: 12px Arial, sans-serif;
	margin: 0px 0 0px;
	color: #e3e3e3;
	text-transform: uppercase;
}

#newsletter-container form {
	float: right;
}

#newsletter-container input[type=text] {
	height: 30px;
	width: 147px;
	vertical-align: top;
	margin-right: 5px;
	border: 0px solid #FFFFFF;
	background: #333;
	line-height: 10px;
	padding: 5px 10px 5px 20px;
	color: #727b7c;
	border-radius: 3px;
}

input,
select,
textarea {
	outline: 0;
}

#newsletter-container .btn {
	padding: 9px 15px;
	font-size: 12px;
	line-height: 10px;
}

.btn-custom-3 {
	color: #fff;
	background-color: #333;
	margin-right: 5px;
}

.btn-custom-3:hover {
	color: #fff;
	background-color: #222;
	    margin-left: 15px;
}
a.mail{
    
    color:#333; 
    text-decoration:none;
      cursor: pointer;
    
}

a.mail:hover{color:#d86c02;}

a.callToClick{
    font-family: UglyQua;
    color:#333; 
    text-decoration:none;
        font-size: 29px;
    cursor: pointer;
    
}

.selection {
	background-color: #000000;
	color: #fff;
}




.atFrontSect1 {
	pointer-events: none;
	
	max-width: 1600px!important;
	position: absolute;
    background-size: contain;
}

.atFrontSect2 {
	pointer-events: none;
	transform: translate(-50%);
	max-width: 1600px!important;
	position: absolute;
    background-size: contain;
}

.atFrontSect3 {
	pointer-events: none;
	transform: translate(-50%);
	max-width: 1600px!important;
	position: absolute;
}

.atFrontSect4 {
	pointer-events: none;
	transform: translate(-50%);
	max-width: 1600px!important;
	position: absolute;
}

.atFrontSect5 {
	pointer-events: none;
	transform: translate(-50%);
	max-width: 1600px!important;
	position: absolute;
}


@keyframes left {
	25% {
		transform: translateX(-5px);
		animation-timing-function: ease-in;
	}
	50% {
		transform: translateX(-20px);
	}
}

@keyframes right {
	50% {
		transform: translateX(10px);
	}
	75% {
		transform: translateX(45px);
		animation-timing-function: ease-in;
	}
	100% {
		transform: translateX(80px);
	}
}


/*************ARROW GO TO TOP ******************/

.goToTop{
    position: absolute;
    left: 32%;
    top: 6%;
    width: 3.5%;
    height: 13.5%;
    z-index: 99;
}
#arrow{
    position: absolute;
    
    -webkit-animation: Floatingy 3s infinite ease-in-out;
}

@-webkit-keyframes Floatingy {
    from {
        -webkit-transform:translateY(0px);
    }
    65% {
        -webkit-transform:translateY(15px);
    }
    to {
        -webkit-transform: translateY(-0px);
    }
}

/********************************/


/*    ANIMATIONS     */

@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
	40% {
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }
	60% {
    -webkit-transform: translateX(-15px);
    transform: translateX(-15px);
  }
}

@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
    transform: translateX(0);
  }
	40% {
    transform: translateX(-30px);
  }
	60% {
    transform: translateX(-15px);
  }
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
	40% {
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }
	60% {
    -ms-transform: translateX(-15px);
    transform: translateX(-15px);
  }
}



/****** ANIMATION BOUNCE 2********/


@-webkit-keyframes bounce2 {
	0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
	40% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
	60% {
    -webkit-transform: translateX(15px);
    transform: translateX(15px);
  }
}

@-moz-keyframes bounce2 {
	0%, 20%, 50%, 80%, 100% {
    transform: translateX(0);
  }
	40% {
    transform: translateX(30px);
  }
	60% {
    transform: translateX(15px);
  }
}

@keyframes bounce2 {
	0%, 20%, 50%, 80%, 100% {
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
	40% {
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
	60% {
    -ms-transform: translateX(-15px);
    transform: translateX(15px);
  }
}

/****** ANIMATION BOUNCE 3********/


@-webkit-keyframes bounce3 {
	0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
	40% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
	60% {
    -webkit-transform: translateX(15px);
    transform: translateX(15px);
  }
}

@-moz-keyframes bounce3 {
	0%, 20%, 50%, 80%, 100% {
    transform: translateX(0);
  }
	40% {
    transform: translateX(30px);
  }
	60% {
    transform: translateX(15px);
  }
}

@keyframes bounce3 {
	0%, 20%, 50%, 80%, 100% {
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
	40% {
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
	60% {
    -ms-transform: translateX(-15px);
    transform: translateX(15px);
  }
}

/****** ANIMATION BOUNCE 4********/


@-webkit-keyframes bounce4 {
	0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
	40% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
	60% {
    -webkit-transform: translateX(15px);
    transform: translateX(15px);
  }
}

@-moz-keyframes bounce4 {
	0%, 20%, 50%, 80%, 100% {
    transform: translateX(0);
  }
	40% {
    transform: translateX(30px);
  }
	60% {
    transform: translateX(15px);
  }
}

@keyframes bounce4 {
	0%, 20%, 50%, 80%, 100% {
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
	40% {
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }
	60% {
    -ms-transform: translateX(-15px);
    transform: translateX(15px);
  }
}

/* WIDTH FIX */

.widthFixNostrum {
    max-width: 1600px;
    
}

/******** DIVs HANDS***********/
.arrow {
       position: absolute;
    margin-top: -20px;
    width: 6%;
    height: 8%;
    background: url(../img/hand1.png) no-repeat;
    background-size: contain;
    left: 70%;
    top: 40%
}

.arrow2 {
 position: absolute;
    margin-top: -20px;
    width: 6%;
    height: 8%;
    background: url(../img/hand3.png) no-repeat;
    background-size: contain;
    left: 40%;
    top: 55%;  

}
.arrow3 {
 position: absolute;
    margin-top: -20px;
    width: 6%;
    height: 8%;
    background: url(../img/hand2.png) no-repeat;
    background-size: contain;
  left: 34%;
    top: 39%;  
}

.arrow4 {
 position: absolute;
    margin-top: -20px;
    width: 6%;
    height: 8%;
    background: url(../img/hand1.png) no-repeat;
    background-size: contain;
    left: 68%;
    top: 65%;  
}

.bounce {
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

.bounce2 {
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

.bounce3 {
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}
.bounce4 {
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

/************** FLOATING NEWSLETTER *****************************/

.NewsLetter{
	position: fixed;
    top: 8px;
	width: 20%;
	z-index: 10;
	
}

.SignUp{
      position: fixed;
    width: 14%;
    margin: auto;
    left: 3%;
    margin-top: 3%;
    font-size: 2em;
}