@font-face{font-family:brownbold;src:url(/fonts/brown-bold_3-webfont.eot);src:url(/fonts/brown-bold_3-webfont.eot?#iefix) format('embedded-opentype'),url(/fonts/brown-bold_3-webfont.woff2) format('woff2'),url(/fonts/brown-bold_3-webfont.woff) format('woff'),url(/fonts/brown-bold_3-webfont.ttf) format('truetype'),url(/fonts/brown-bold_3-webfont.svg#brownbold) format('svg');font-weight:400;font-style:normal}
@font-face {
    font-family: 'sugo';
    src: url('../fonts/sugo-webfont.eot');
    src: url('../fonts/sugo-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sugo-webfont.woff2') format('woff2'),
         url('../fonts/sugo-webfont.woff') format('woff'),
         url('../fonts/sugo-webfont.ttf') format('truetype'),
         url('../fonts/sugo-webfont.svg#sugoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,800,700);

/* reset */  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, font, 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 { 	margin: 0; 	padding: 0; 	border: 0; 	outline: 0; 	font-size: 100%; 	vertical-align: baseline; 	background: transparent; } body { 	line-height: 1; } ol, ul { 	list-style: none; } blockquote, q { 	quotes: none; } blockquote:before, blockquote:after, q:before, q:after { 	content: ''; 	content: none; }  /* remember to define focus styles! */ :focus { 	outline: 0; }  /* remember to highlight inserts somehow! */ ins { 	text-decoration: none; } del { 	text-decoration: line-through; }  /* tables still need 'cellspacing="0"' in the markup */ table { 	border-collapse: collapse; 	border-spacing: 0; }
/* clearfix  */   .cf:before, .cf:after {     content: " "; /* 1 */     display: table; /* 2 */ }  .cf:after {     clear: both; }  /**  * For IE 6/7 only  * Include this rule to trigger hasLayout and contain floats.  */ .cf {     *zoom: 1; }

body {
	font-family: "brownbold";
	background: #5fffae;
	color: #1E1118;
	overflow-x: hidden;
}

#header {
	position: fixed;
	left: 0; top: 0;
	width: 100%;
	height: 130px;
	background: #5fffae;
	font-size: 1.2em;
	line-height: 1.9;
	z-index: 2;
	transition: all 300ms cubic-bezier(0.64, 0.57, 0.67, 1.53);
}
#header.compact {
	height: 110px;
}
#header #menu {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	font-size: 1.2em;
	-webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
	text-align: center;
}
#header #menu ul li {
	display: inline-block;
	margin: 0 1em;
}
#header #menu ul li a {
	text-decoration: none;
	color: #1E1118;
	text-transform: lowercase;
}
#header #menu ul li.active a {
	border-bottom: 3px solid #1E1118;
}


#content {
	position: relative;
	padding-top: 130px;
	line-height: 1.6;
	z-index: 1;
}



#content #img {
	min-height: calc(60vh - 130px);
	width: 100%;
	background: #fff;
	box-sizing: border-box;
	position: relative;
}
#content #img.home {
	min-height: calc(100vh - 130px);
}
#content #img .logo {
	position: absolute;
	left: 50%;
	top: 50%;
	max-width: 90%;
	max-height: 50%;
	display: block;
	transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%);
}
#content #img a.video {
	position: absolute;
	left: 2em;
	bottom: 2em;
	background: red;
	font-family: "sugo";
	line-height: 0.8;
	color: #fff;
	background: #5FFFAE;
	padding: 15px 15px;
	font-size: 1.2em;
	text-decoration: none;
	color: #000;
	border-radius: 3px;
}
#content #img a.video:hover {
	background: #f00;
	color: #fff;
}
#content #img .logo img {
	display: block;pointer-events: none;
	width: 100%;
}
#content #img .logo a.buy {
	width: 150px; height: 150px;
	background: #000;
	color: #5FFFAE;
	position: absolute;
	right: 21%;
	bottom: 0;
	border-radius: 150px;
	-webkit-transform: translateY(57%) rotate(-4deg);
	transform: translateY(57%) rotate(-4deg);
}
#content #img .logo a.buy span {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	width: 100%;
	text-align: center;
	font-size: 2.5em;
	font-family: "sugo";
	line-height: 0.8;
}
#content #img .logo a.buy span em {
	font-style: normal;
	font-size: 1.5em;
}
#content #img .logo a.buy:hover {
	background: #f00;
	color: #fff;
}
#content #img .scroll {
	width: 60px;
	height: 60px;
	border-radius: 60px;
	position: absolute;
	left: 50%;
	bottom: 50px;
	background: #fff;
	margin-left: -30px;
	background-image: url('../images/non.jpg');
	background-size: 60px 60px;
	transition:  all 300ms  cubic-bezier(0.64, 0.57, 0.67, 1.53);
}
#content #img .scroll.toink {
	margin-bottom: 20px;
}
#content #img #joris-amazing-bouncy-bars {
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background: #0d0d0d;
}
#content #img #joris-amazing-bouncy-bars div.bars {
	float: left;
	width: 25%;
	height: 100%;
	box-sizing: border-box;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	transition: opacity 50ms;
	opacity: 0;
}
#content #img #joris-amazing-bouncy-bars.show div.bars {
	opacity: 1;
}
#content #img #joris-amazing-bouncy-bars.show div.bars:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	background-image: url('../images/overlay.png');
	width: 100%;
	height: 100%;
	opacity: 0.5;
}

#content #img #joris-amazing-bouncy-bars.nondedjoris div.bars.bars1 { 	width: 10%;  }
#content #img #joris-amazing-bouncy-bars.nondedjoris div.bars.bars2 { 	width: 40%;  }
#content #img #joris-amazing-bouncy-bars.nondedjoris div.bars.bars3 { 	width: 30%;  }
#content #img #joris-amazing-bouncy-bars.nondedjoris div.bars.bars4 { 	width: 20%;  }

#content #img #joris-amazing-bouncy-bars div.bars.bars1.v1 {  background-image: url('../images/bars-img-2017/gif001.gif');	}
#content #img #joris-amazing-bouncy-bars div.bars.bars1.v2 {  background-image: url('../images/bars-img-2017/gif002.gif');	}
#content #img #joris-amazing-bouncy-bars div.bars.bars1.v3 {  background-image: url('../images/bars-img-2017/gif004.gif');	}
#content #img #joris-amazing-bouncy-bars div.bars.bars1.v4 {  background-image: url('../images/bars-img-2017/kapel001.jpg');	}

#content #img #joris-amazing-bouncy-bars div.bars.bars2.v1 {  background-image: url('../images/bars-img-2017/gif005.gif');	}
#content #img #joris-amazing-bouncy-bars div.bars.bars2.v2 {  background-image: url('../images/bars-img-2017/gif006.gif');	}
#content #img #joris-amazing-bouncy-bars div.bars.bars2.v3 {  background-image: url('../images/bars-img-2017/gif007.gif');	}
#content #img #joris-amazing-bouncy-bars div.bars.bars2.v4 {  background-image: url('../images/bars-img-2017/kapel002.jpg');	}	

#content #img #joris-amazing-bouncy-bars div.bars.bars3.v1 {  background-image: url('../images/bars-img-2017/gif008.gif');	}
#content #img #joris-amazing-bouncy-bars div.bars.bars3.v2 {  background-image: url('../images/bars-img-2017/gif009.gif');		}
#content #img #joris-amazing-bouncy-bars div.bars.bars3.v3 {  background-image: url('../images/bars-img-2017/gif010.gif');	}
#content #img #joris-amazing-bouncy-bars div.bars.bars3.v4 {  background-image: url('../images/bars-img-2017/kapel003.jpg');	}

#content #img #joris-amazing-bouncy-bars div.bars.bars4.v1 {  background-image: url('../images/bars-img-2017/gif011.gif');	}
#content #img #joris-amazing-bouncy-bars div.bars.bars4.v2 {  background-image: url('../images/bars-img-2017/gif012.gif');	}
#content #img #joris-amazing-bouncy-bars div.bars.bars4.v3 {  background-image: url('../images/bars-img-2017/gif013.gif');	}
#content #img #joris-amazing-bouncy-bars div.bars.bars4.v4 {  background-image: url('../images/bars-img-2017/kapel004.jpg');	}





#content #txt {
	min-height: 30vh;
	padding: 5em 0;
	background: #eee;
	color: #1E1118;
	box-sizing: border-box;	
	font-size: 1.4em;
	line-height: 2;
}
	#content #txt .page_content {
		width: 90%;
		max-width: 766px;
		margin: 0 auto;
	}
	#content #txt .page_content strong {
		color: #666;
		font-weight: normal;
	}
	#content #txt .page_content h2 {
		color: #000;
		font-size: 1.4em;
		margin-top: 1em;
		font-weight: normal;
	}	
	#content #txt .page_content a {
		text-decoration: none;
		color: #666;
	}
	#content #txt h1 {
		font-size: 3em;
		text-align: center;
		line-height: 1;
		padding: 0 2em;
		margin: 0 0; 
		margin-bottom: 1em;
		font-weight: normal;
		text-transform: uppercase;
		font-family: "sugo";
		position: relative;
	}
	#content #txt iframe {
		border: 10px solid #5fffae;
		width: 140%;
		height: 160px;
		margin: 2em -20%;
		margin-top: 1em;
		background: #fff;
	}
	#content .media img {
		display: block;
		width: 20%;
		float: left;
		pointer-events: none;
	}
	


#content #address {
	min-height: 200px;
	width: 100%;
	box-sizing: border-box;
	background: #5fffae;
	line-height: 200px;
	text-align: center;
	color: #1E1118;
	font-size: 1.6em;	
	clear: both;
}
#content #address a {
	color: #1E1118;
	text-decoration: none;
}



#content #powered {
	padding: 60px 0;
	background: #1E1118;
	color: #5fffae;
	text-transform: lowercase;
	font-size: 1.5em;
	text-align: center;
}
#content #powered a {
	display: block;
	color: #5fffae;
	text-decoration: none;
}
#content #powered img {
	display: inline-block;
	margin: 1em 0;
	width: 100px;
}




#content #logos {
	padding: 60px 0; padding-bottom: 0;
	background: #5fffae;
	text-align: center;
}
#content #logos img {
	display: inline-block;
	max-width: 120px;
	padding: 2em 2em;
}


#socialcontent {
	width: 90%;
	max-width: 766px;
	margin: 0 auto;
}
#socialcontent .item {
	width: 50%;
	float: left;
	box-sizing: border-box;
	height: 380px;
	text-align: center;
	padding: 1em;
	overflow: hidden;
	position: relative;
}
#socialcontent .item a {
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	color: #1E1118;
	text-decoration: none;
}
#socialcontent .item .media {
	width: 100px;
	height: 100px;
	border-radius: 100px;
	overflow: hidden;
	margin: 1em auto; margin-top: 1.5em;
}
#socialcontent .item .media img {
	display: block;
	min-width: 100px;
	min-height: 100px;
}
#socialcontent .item:first-child {
	border-right: 30px solid #5fffae;
	border-bottom: 30px solid #5fffae;
}
#socialcontent .item:nth-child(2) {
	border-bottom: 30px solid #5fffae;
}
#socialcontent .item:nth-child(3) {
	border-right: 30px solid #5fffae;
	height: 600px;	
}
#socialcontent .item .content {
	padding: 0 1em;
}






/* disable selection */
#menu, #header
{
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}



/* kiek.js overrides */
#kiek-right, #kiek-left {
    display: none;
}
#kiek {
    background-image: url('../images/loadkiek.gif')!important; 
}
#kiek img {
    max-width:90%!important;
    max-height:90%!important;
    -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0)!important;
    -webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0)!important;
    box-shadow: 0px 0px 0px rgba(0,0,0,0)!important;
}
#kiek-overlay {
    background: #000!important;
    opacity: 1!important;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"!important;
    background-image: url('../images/sparkles.gif')!important; 
}
#kiek-title {
    text-transform: uppercase;
    color: #009FE3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    padding: 0 40px;
    width: 100%;
    box-sizing: border-box;
}
.kiek-close {
    color: #fff!important;
}