/* -------------------------------------------------- */
/*    GLOBAL STUFF                                    */
/* -------------------------------------------------- */

* {
	margin: 0px;
	padding: 0px;
	border: 0px none;
}

:focus { outline: none; }

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
}

body {
	font-family: "Trebuchet MS", sans;
	text-align: left;
	font-size: 62.5%;  /* 1em = 10px , 1.4em = 14px */
	color: #CCC;
	background: #2d2e30;
}

html, body {
	width: 100%;
	height: 100%;
	/* overflow: hidden;*/
}
a {
	text-decoration: none;
	color: #DDD;
}

a:hover {
	text-decoration: underline;
}

article,
nav,
aside {
	display: block;
}



/* -------------------------------------------------- */
/*    POSITIONING                                     */
/* -------------------------------------------------- */

/*
#bgtop {
	position: absolute;
	width: 100%;
	top: 0;
	height: 50%;
	background: #666;
}
#bgmid {
	position: absolute;
	width: 100%;
	top: 50%;
	height: 280px;
	margin-top: -140px;
	background: url(bg.jpg) repeat-x;
}
*/

#all {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#stage {
	width: 200%;
	height: 200%;
	position: relative;
	left: -50%;
	top:-50%;
	overflow: hidden;
}



#border {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1800px;
	height: 1100px;
	margin: -550px 0 0 -900px;
	background: url('mask-large.gif');
	background-position: center;
}

body.nohud #interface,
body.nohud #share {
	display: none;
}

@media (max-height: 820px){ 
	#border { background-image: url('mask.gif'); }
}

@media (max-height: 700px){ 
	#border {
		background-image: url('mask-small.gif');
		background-size: auto 1200px;
	} 
}

@media (min-height: 1060px){ 
	#border { 
	width: 2560px;
	height: 1440px;
	margin: -720px 0 0 -1280px;
	background-image: url('mask-xlarge.gif'); }
}


#hidden {
	position: absolute;
	top: -10000px;
	left: -10000px;
	background: #000;
}


/*  #####  INTERFACE ELEMENTS  #####  */


#logo {	
	position: absolute;
	top: 0.4em;
	left: 0.8em;
	z-index: 10;
}
#logo h1 {
	font-weight: normal;
}
#logo a:hover{
	text-decoration: none;
}
#byswiss {
	position: absolute;
	bottom: 0.4em;
	left: 0.8em;

}

#nav {
	position: absolute;
	top: 50%;
	margin-top: -16em;
	left: 0;
	width: 100%;
}

#nfo {
	position: absolute;
	top: 0.4em;
	text-align: center;
	width: 100%;
	color: #FFF;
	text-shadow: 0 0 1em #000;
}


#desc {
	position: absolute;
	bottom: 0;
	padding: 0.4em 0;
	text-align: center;
	width: 100%;
	color: #FFF;
	text-shadow: 0 0 1em #000;
	display: none;
}

body.mobile #desc {
	background: rgba(0,0,0,0.4);
}

#nfo p,
#desc {
	font-size: 1.4em;
}


#islive {
	position: absolute;
	top: 0.2em;
	right: 0.6em;
}

#newimgs {
	position: absolute;
	left: -1em;
	padding: 1em;
	padding-left: 7em;
	top: 50%;
	height: 3em;
	margin-top: -2.5em;
	background: #e74747;
	color: #FFF;
	display: none;
	width: 6em;
	border-radius: 0.4em;
	cursor: pointer;
	box-shadow: 0 0.4em 0.8em black;
}


@-webkit-keyframes bounceleft {
  0%   { left: 20px; }
  100% { left: 25px; }
}
@-moz-keyframes bounceleft {
  0%   { left: 20px; }
  100% { left: 25px; }
}
@-o-keyframes bounceleft {
  0%   { left: 20px; }
  100% { left: 25px; }
}
@keyframes bounceleft {
  0%   { left: 20px; }
  100% { left: 25px; }
}

#newimgs i {
	font-size: 3.5em;
	float: left;
	position: absolute;
	left: 20px;
	top: 7px;
	-webkit-animation: bounceleft 0.4s infinite ease-out alternate;
	-moz-animation: bounceleft 0.4s infinite ease-out alternate;
	-ms-animation: bounceleft 0.4s infinite ease-out alternate;
	-o-animation: bounceleft 0.4s infinite ease-out alternate;
	animation: bounceleft 0.4s infinite ease-out alternate;
}



/* -------------------------------------------------- */
/*    CONTENT DESIGN                                  */
/* -------------------------------------------------- */



p, h1 {
	font-size: 1.2em;
}

#announce {
	position: absolute;
	top: 50%;
	margin-top: -50px;
	text-align: center;
	width: 100%;
}

#announce p {
	font-size: 2em;
	display: inline-block;
	padding-right: 0.5em;
	padding-top: 10px;
	vertical-align: top;
}
#announce b {
	color: #FFF;
}
#announce .thumb {
	padding-left: 1em;
	display: inline-block;
}

.err {
	color: #F00;
}

.shad {
	text-shadow: 0px 0px 2px #000000;
	filter: dropshadow(color=#000000, offx=0, offy=0);
}


#nfo a {
	background: rgba(0,0,0,0.3);
	padding: 2px 5px;
	border-radius: 4px;
}

/* -------------------------------------------------- */
/*    SLIDES DESIGN                                   */
/* -------------------------------------------------- */

/*
.slide {
	position: absolute;
	width: 350px;
	height: 350px;
	left: 50px;
	top: 50%;
	margin-top:-175px;

	background:  no-repeat center;
	background-size:contain;
}*/

.slide {
	position: absolute;
	width: 100%;
	height: 100%;

	background:  no-repeat center;
	background-size:contain;
}

.slide img {
	/*width: 100%;*/
	/* display: none; */
}


.slide .centerimg {
	width: 100%;
	height: 100%;
}
.centerimg td {
	vertical-align: middle;
	text-align: center;
}
.imgwrap {
	display: inline-block;
	position: relative;
}






/* -------------------------------------------------- */
/*    INTERFACE DESIGN                                */
/* -------------------------------------------------- */

#nav {
	
}
#nav a{
	font-size: 6em;
	padding: 2em 0.5em;
	color: #DDD;

	display: block;
	width: 25%;
	text-shadow: 0 0 0.5em black;
}

#nav a:hover{
	color: #FFF;
	text-decoration: none;
}
#nav .fa-play {
	display: none;
}

#prev {
	float: left;
	text-align: left;
}
#next {
	float: right;
	text-align: right;
}
#nav #pauseplay {
	margin: 0 auto;
	text-align: center;
	font-size: 4em;
	padding: 3.4em 0;
}


#toggleaudio {
	color: #AAA;
	cursor: pointer;
	text-decoration: none;
	display: block;
	font-size: 3em;
	position: absolute;
    left: -10px;
    bottom: 0;
    padding: 20px;
}

#toggleaudio:hover {
	color: #FFF;
}

#toggleaudio.playing .fa-volume-off,
#toggleaudio.paused .fa-volume-up,
#toggleaudio.playing:hover .fa-volume-up,
#toggleaudio.paused:hover .fa-volume-off {
	display: none;
}
#toggleaudio.playing:hover .fa-volume-off,
#toggleaudio.paused:hover .fa-volume-up {
	display: inline-block;
}




body.mobile {
	overflow: hidden;
}

body.mobile #stage{
	left: 0;
	overflow: hidden;
	position: static;
	top: 0;
	width: 100%;
	height: 100%;
}

body.mobile #nav {
	display: none;
}

#stage .bx-wrapper .bx-viewport {
	background: transparent;
	box-shadow: none;
	border: 0px none;
	left: 0;
}

#stage .bx-wrapper img {
	max-width: 100%;
	max-height: 100%;
	position: relative;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform:    translate(-50%,-50%);
	-ms-transform:     translate(-50%,-50%);
	-o-transform:      translate(-50%,-50%);
	transform:         translate(-50%,-50%);
}

#slider, #slider li, .bx-wrapper {
	height: 100%;
}
.bx-viewport {
	height: 100% !important; 
}


#stage .bx-wrapper .bx-controls-direction a {
	z-index: auto;

	-webkit-transition: left 0.4s, right 0.4s;
	-moz-transition: left 0.4s, right 0.4s;
	-o-transition: left 0.4s, right 0.4s;
	transition: left 0.4s, right 0.4s;

}


#stage .bx-wrapper .bx-prev{
	left: -50px;
}
#stage .bx-wrapper .bx-next {
	right: -50px;
}


#stage:hover .bx-wrapper .bx-prev{
	left: 10px;
}


#stage:hover .bx-wrapper .bx-next {
	right: 10px;
}



@-webkit-keyframes zoom {
	0% {
		-webkit-transform: scale(1.1);
	}
	100% {
		-webkit-transform: scale(0.90);
	}
}
@-moz-keyframes zoom {
	0% {
		-moz-transform: scale(1.1);
	}
	100% {
		-moz-transform: scale(0.90);
	}
}
@keyframes zoom {
	0% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(0.9);
	}
}





.isiframe #nfo,
.isiframe #byswiss{
	display: none;
}

/*
,
.isiframe #share

*/