﻿/* @font-face kit by Fonts2u (http://www.fonts2u.com) */ 
@font-face {
	font-family:"Engel Light ltd";
	src:url("EngelLight_ltd.eot?") format("eot"),
		url("EngelLight_ltd.woff") format("woff"),
		url("EngelLight_ltd.ttf") format("truetype"),
		url("EngelLight_ltd.svg#Engel-Lightltd") format("svg");
		font-weight:normal;
		font-style:normal;
}

body { background-color: #000; margin:0px; padding:0px; font-family: "Engel Light ltd", Helvetica, Arial, Verdana; font-weight: lighter; color:#ffffff; font-size: 15px; }
a { text-decoration: none; color: #ffffff;}
a:hover { color: #ffffff }
#mobilelogo {
  position: absolute; top: 0; left:0; height: 35px; width: 130px; z-index:2000; cursor:pointer; display:none
}
.scrollb::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #000;
}

.scrollb::-webkit-scrollbar
{
  width: 3px;
  background-color: #F5F5F5;
}

.scrollb::-webkit-scrollbar-thumb
{
  background-color: #fff;
}
#main {
	position : absolute;
	width : 600px;
	height : 600px;
	left : 50%;
	top : 50%;
	margin-left : -300px;
	margin-top : -300px;
	/*z-index: 2;*/
}

#container {
	position:absolute;
	top:0px;
	left:0px;
	height:580px;
	width:600px;
	background: url(../images/sullivan_bg.png) no-repeat;
	display: none;
}

#frame_container {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: url(../images/sullivan_bg.png) no-repeat;
	box-sizing: content-box;
	display: none;
	overflow: hidden;
	background-color: rgba(0,0,0,1);
	z-index: 1000;
	background-position: 50%;
}
#show360{
	position: absolute;
	top: 18px;
	right: 5px;
	background: url(../images/sullivan_360_grad_symbol.png) no-repeat;
	background-position: center;
	height: 100px;
	width: 100px;
	cursor: pointer;
	background-size: 100px;
	transition: all 300ms linear;
	-webkit-transition: all 150ms linear;
	z-index: 1;
}
@media screen and (max-width: 60em) {
	#show360{
		top: 42px;
		left: 2px;
	}
}


#show360:hover{
	background-size: 120px;
}
#close360 {
	position: absolute;
	top: 15px;
	right: 15px;
	height: 60px;
	width: 60px;
	background: url(../images/closebtn.png);
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	z-index: 100;
}

#containerlogo {
  display: none;
}

#friends_content {
  top: 270px;
  font-size: 13px;
  text-transform: uppercase;
  height: 250px;
  overflow: auto;
}

#datenschutz_content {
  top: 270px;
  font-size: 13px;
  text-transform: uppercase;
  height: 250px;
  overflow: auto;
}

#taflogo { width: 200px; margin-bottom: 30px;}

#drinks_content {
  font-size:13px;
}

.sullivan_signet_bg {
  background: url(../images/sullivan_signet_bg.png) no-repeat !important;
}

#container.eventbg { background: url(../images/sullivan_bg_blank.png) no-repeat; }

#menu {
	position: absolute;
	bottom: 0px;
	left:0px;
	height: 24px;
	width: 600px;
	background: #000;
}

.content {
	position: absolute;
	top: 410px;
	left:100px;
	width: 400px;
	height: 130px;
	text-align: center;
	line-height: 20px;
	letter-spacing: 2px;
	font-weight: lighter;
	color: #ffffff;
	display: none;
	font-size: 15px;
}
.event_content {
	position: absolute;
	top: 10px;
	left:10px;
	width: 400px;
	height: 130px;
	text-align: center;
	line-height: 20px;
	letter-spacing: 2px;
	font-weight: lighter;
	color: #ffffff;
	display: none;
	font-size: 15px;
}

#menu ul {
	list-style-type: none;
	height: 20px;
	width: 600px;
	margin: 0px;
}

#menu ul li {
	float: left;
	font-size: 14px;
	color: #ffffff;
	margin: 7px 21px 0 21px;
	cursor: pointer;
	letter-spacing: 1px;
}

#impressum { 
  cursor: pointer;
  font-size: 5px;
}
#datenschutz { 
  cursor: pointer;
  font-size: 5px;
}

h4 {
  font-weight: normal;
  color: #A78435;
}

h4 {
  font-weight: normal;
  color: #A78435;
}

#datenschutz_content h4, #impressum_content h4 {
  font-size:15px;
  margin-top:10px;
}

#datenschutz_content p, #impressum_content p {
  margin-top:5px;
}

.active { color: #333 }

.opac {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=75);
	/* Older than Firefox 0.9 */
	-moz-opacity:0.75;
	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.75;
	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity: 0.75;
}

table {
	width:400px;
	color: #ffffff;
	font-size: 15px;
	text-align: center;
}

#closebtn {
	position: absolute;
	top: 15px;
	right:15px;
	height:20px;
	width:20px;
	background: url(../images/closebtn.png);
	cursor: pointer;
	z-index: 5;
}
#fbdiv { /*position: absolute; bottom: 10px; right:10px; */ margin-top: 25px; height: 30px; width:170px; padding:5px; text-align: right; width:400px}
#drinksdownload { margin-top:30px; font-size: 11px; line-height: 12px }
#impressum { position: absolute; bottom:-16px; right:77px; width:100px; height:11px; text-align: right; font-family:Helvetica, Arial; font-size:8px; color:#e5e5e5; letter-spacing: 1px }
#datenschutz { position: absolute; bottom:-16px; right:2px; width:100px; height:11px; text-align: right; font-family:Helvetica, Arial; font-size:8px; color:#e5e5e5; letter-spacing: 1px }
#datenschutz_content p {
  width:100%;
}
.event_mask {
	position:absolute;
	top:0px;
	left:10px;
	background: url(../images/event_mask.png) no-repeat;
	width:579px;
	height:502px;
	z-index:4;
}
.event_pic {
	position:absolute;
	top:45px;
	left:32px;
	width:516px;
	height: 387px;
	z-index:3;
}
.event_title { position:absolute; top:465px; left:65px; height:20px; width:455px; text-align:left }
.event_title h2 { font-size:22px; font-weight:normal; padding:0; margin:0; text-align: left }
.event_description { position:absolute; top:492px; left:65px; height:72px; letter-spacing: 0px; width:455px; font-size:12px; text-align:left}
.event_price { position:absolute; top:540px; left:65px; height:18px; letter-spacing: 0px; width:455px; font-size:12px; text-align:right }

.evtitle:hover, .delev:hover { cursor: pointer }
#eventform input { font-family: "Engel Light ltd", Helvetica, Arial, Verdana; font-weight: lighter; color:#ffffff }
#event_title { font-size:24px; text-transform:uppercase; letter-spacing:1px }
#event_description { font-size:12px; padding-top:5px }
#event_price { font-size:12px }
.placeholder { color: #A6851F; }
::-webkit-input-placeholder { /* WebKit browsers */
	text-transform: uppercase;
    color: #A6851F;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	text-transform: uppercase;
    color: #A6851F;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
	text-transform: uppercase;
    color: #A6851F;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
	text-transform: uppercase;
    color: #A6851F;
}
input, textarea { margin:0px; padding:0px; font-family: "Engel Light ltd", Helvetica, Arial, Verdana; font-weight: lighter; border:none; color:#fff }

.slicknav_menu {
	display:none;
	position: relative;
	z-index: 50;
	background-color: #000;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=80);
	/* Older than Firefox 0.9 */
	-moz-opacity:0.8;
	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.8;
	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	height: 40px;
	padding: 0;
  opacity: 0.8;
}
.activeslick { background-color: #fff; opacity: 1;}
.slicknav_btn {
	background: none;
	margin: 0;
	margin-top: 2px;
	height:38px;
}
.slicknav_nav {

	color: #fff;
	margin-top:20px;
  z-index: 1000;
}
.slicknav_txtnode {
	border-bottom: thin solid #333;
	text-align: center;
	font-size: 1.6rem;
	display: table-cell;
	vertical-align: middle;
		background: #000;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=80);
	/* Older than Firefox 0.9 */
	-moz-opacity:0.9;
	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.9;
	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity: 0.9;
	cursor:pointer;
}

.slicknav_nav .slicknav_txtnode {
	margin-left: 0;
}

.activenode {
	opacity: 1;
}

.slicknav_txtnode:hover {
	opacity: 0.6;
}

.slicknav_menu .slicknav_icon-bar { box-shadow: 0 2px 0 #000; border-radius:0; }

@media screen and (max-width: 60em) {
	body {
		font-size: 1.1rem; 
    line-height: 1.7rem;
	}
    #mobilelogo { display: block; }
	.js #sullivanmenu, #menuopac, .hidem, #menu, #impressum, #datenschutz {
		display:none;
	}
  
  #likeframe { display:none;}
  #fbdiv {
    position: absolute;
    bottom: 5px;
    right: 5px;
    height: 40px;
    width: 170px;
    padding: 5px;
    text-align: right;
  }
  #fbimg {
    height:30px;
    margin-right:6px;
    border:none;
    padding-top:5px
  }
  #adress {
    position: absolute;
    bottom: 10px;
    left: 20px;
    right: 65px;
    text-transform: uppercase;
    text-align: left;
    color: #fff;
    font-size: 1rem !important;
  }
  .adrdiv { text-decoration: none; color:#fff !important;}
  .adrdiv a { text-decoration: none; color:#fff !important;}

	#menunavi {
		position:fixed !important; 
		top:0; 
		left:0; 
		height: 40px; 
		margin:0; 
		padding:0; 
		width:200px; 
		z-index: 51;
	}
	#logo { top: 5px; left: 5px;}
	#sullivanlogo {
		height: 30px;

	}
	
	.slicknav_menu {
		position: fixed;
		top:0px;
		left:0px;
		height:40px;
		width:100%;
		display:block;
		font-size: 20px;
    background: url(../images/sullivan_logo_schrift.png) #000 no-repeat;
    background-size: auto 13px;
    background-position: 10px center;
		border-bottom: thin solid #999;
	}
	.textleft, .textright, .texmiddle {
		width: 100%;
		margin:0;
    padding: 0 30px;
    box-sizing:border-box;
    background: #fff;
	}
  .impressumtextright, .datenschutztextright { text-align: left; padding-top: 30px; padding-bottom: 30px; }
  #main {
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    margin-left: 0;
    margin-top:0;
  }
	#container {
		width:100%;
    min-height: 100%;
		height:auto;
		left : 0;
		top : 0;
		margin:0;
		opacity: 1;
		box-sizing:border-box;
    margin-left: 0;
    margin-top: 0;
    text-align: center;
    padding-top: 60px;
    background: #000 !important;
    opacity: 0.8;
	}
  #containerlogo {
    display: block;
  }
  #fbdiv {
    position: static;
    text-align: center;
    width: auto;
  }
  #fbdiv a img {
    height: 30px !important;
  }
    #drinks_content {
    font-size: 1.2rem;
    line-height: 1.4rem;
  }
  .content {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
    font-size: 1.2rem;
    line-height: 1.6rem;
    padding: 0;
    width:100% !important;
    height: auto !important;
    box-sizing:border-box;
  }

  #friends_content {
    top: auto;
    left: auto;
    font-size: 1.1rem;
    text-transform: uppercase;
    text-align: center;
    padding: 10px;
  }

  table { width: 100%; font-size: 1rem; line-height: 1.2rem}
	.bgpic{
		width:100% !important;
		-webkit-background-size: cover !important;
  	-moz-background-size: cover !important;
  	-o-background-size: cover !important;
  	background-size: cover !important;
  	margin: 0;
  	box-sizing:border-box;
  	float: none !important;
	}

	#menutext {
		letter-spacing: 1px;
		font-size: 1.1rem;
    line-height: 1.5rem;
    padding: 30px;
    box-sizing:border-box;
	}
  #contacttext {
    padding: 30px;
    box-sizing:border-box;
  }
  #contacttext table { font-size: 1.1rem }
  #contacttext table tr { height: 20px }
  
  .contacttable { width:100%; font-size: 1.1rem}
  .contacttable tr td { width:50% !important;}
  .contacttable tr td:last-child { text-align:right !important;}

	#menudesc, #reservationdesc, #aboutdesc, #impressumdesc, #datenschutzdesc {
		position:static; width:100%; text-align:right; margin:0; padding:15px 20px; box-sizing:border-box;
	}
	.clh1 {
		font-size: 1.2rem;
		letter-spacing: 2px;
		font-weight: lighter;
		margin:0;
		margin-bottom: 15px;
	}
	.menutitle {
		font-weight: bold;
		font-size: 1.1rem;
	}

  #prevslide, #nextslide {
    position: absolute;
  height: 80px;
  width: 40px;
  top: 50%;
  margin-top: -41px;
  opacity: 0.6;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  #drinksdownload {
    font-size: 1rem;
    line-height: 1rem;
  }

	#closebtn {
  position: absolute;
  top: 55px;
  right:15px;
  }

  .sullivan_signet_bg {
  background: url(../images/sullivan_signet_bg.png) no-repeat !important;
}

}