@charset "utf-8";

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	position: relative;
	z-index: 0;
	font-family: "Abel", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	color: #F0F0F0;
	background: #111111;
	min-height: 100%;
}

img {
	border: 0;
}

a {
	text-decoration: none;
	color: #F0F0F0;
}

a:hover, a.act {
	font-weight: bold;
}

.clr {
	clear: both;
	height: 0px;
	overflow: hidden;
}

h1, h2 {
	font-size: 350%;
	color: #F0F0F0;
	font-weight: normal;
	margin: 0 0 -0.1em -0.06em;
	line-height: 1em;
}

.content h1, .content h2 {
	font-size: 200%;
	color: #101010;
	line-height: 1.1em;
}

/*
p {
	padding-top: 0em;
	padding-bottom: 0em;
	margin-top: 1em;
	margin-bottom: 0.4em;
	line-height: 1.4em;
}

table {
	margin: 0;
	padding: 0;
	border-width: 0;
	border-spacing: 0;
	border-collapse: collapse;
}

table td {
	margin: 0;
	padding: 0;
	border-width: 0;
	border-spacing: 0;
}
*/

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@-webkit-keyframes fadeOutLeft {
	0% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}
}

@keyframes fadeOutLeft {
	0% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}
}

@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3em, 0);
		transform: translate3d(0, -3em, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3em, 0);
		transform: translate3d(0, -3em, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 3em, 0);
		transform: translate3d(0, 3em, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 3em, 0);
		transform: translate3d(0, 3em, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@-webkit-keyframes fadeOutUp {
	0% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3em, 0);
		transform: translate3d(0, -3em, 0);
	}
}

@keyframes fadeOutUp {
	0% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3em, 0);
		transform: translate3d(0, -3em, 0);
	}
}

@-webkit-keyframes fadeOutDown {
	0% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 3em, 0);
		transform: translate3d(0, 3em, 0);
	}
}

@keyframes fadeOutDown {
	0% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 3em, 0);
		transform: translate3d(0, 3em, 0);
	}
}

.header {
	position: fixed;
	top: 40px;
	left: 40px;
	-webkit-transition: top 1s 0.5s ease;
	transition: top 1s 0.5s ease;
}

.header.scope {
	top: 16%;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.logo-wrap, ul.nav {
	height: 76px;
	padding: 23px;
	background: rgba(0,0,0,0.6);
	margin: 0;
	float: left;
	transition: all 0.5s ease;
	margin-right: 0.2em;
}

.home .logo-wrap, .home ul.nav {
	-webkit-animation: fadeInRight 1.2s 1.8s backwards;
	animation: fadeInRight 1.2s 1.8s backwards;
}

.content .logo-wrap, .content ul.nav {
	-webkit-animation: fadeIn 0.9s 0.6s backwards;
	animation: fadeIn 0.9s 0.6s backwards;
}

.logo-wrap.hide, ul.nav.hide {
	-webkit-animation: fadeOutLeft 1s 0.1s forwards;
	animation: fadeOutLeft 1s 0.1s forwards;
}

.logo-wrap {
	width: 200px;
}

.logo-wrap:hover, ul.nav:hover {
	background: rgba(0,0,0,1.0);
}

.header .logo {
	width: 200px;
	height: 84px;
	background: url(img/logo_inv.png) no-repeat;
}

ul.nav {
	list-style: none;
	width: 100px;
	padding-top: 13px;
	padding-bottom: 33px;
	
	padding-top: 10px;
	padding-bottom: 36px;
	font-size: 90%;
}

ul.nav li {
	margin-bottom: 0.15em;

	margin-bottom: 0.11em;
}

.page-inner {
	font-size: 110%;
}

.home .page {
	position: absolute;
	bottom: 20%;
	right: 20%;
	-webkit-animation: fadeIn 1.2s 0.8s backwards;
	animation: fadeIn 1.2s 0.8s backwards;
}

.home .page.hide {
	-webkit-animation: fadeOut 1s 0.1s forwards;
	animation: fadeOut 1s 0.1s forwards;
}

.home .page-inner {
	text-shadow: -1px -1px 1px rgba(0,0,0,0.3), 1px 1px 1px rgba(0,0,0,0.3), 0 0 10px #000;
}

.home .page-inner a {
	background: url(img/btn_play.png) no-repeat left 0px;
	padding-left: 37px;
	font-size: 140%;
	transition: all 0.5s ease;
}

.home .page-inner a:hover {
	font-weight: normal;
	opacity: 0.7;
}

.content .page {
	margin-top: 20%;
	margin-right: 10%;
	margin-bottom: 40px;
	width: 50%;
	margin-left: auto;
	background: rgba(235,235,235,0.8);
	padding: 1.2em 1.5em 1em 1.5em;
	color: #101010;
	max-width: 900px;
	-webkit-transition: margin-top 1s 0.5s ease;
	transition: margin-top 1s 0.5s ease;
	-webkit-animation: fadeInDown 0.9s ease-out 0.6s backwards;
	animation: fadeInDown 0.9s ease-out 0.6s backwards;
}

.content .page.scope {
	margin-top: 30%;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.content .page.hide {
	-webkit-animation: fadeOutUp 1s 0.1s ease-out forwards;
	animation: fadeOutUp 1s 0.1s ease-out forwards;
}

.content .page-inner a {
	color: #202020;
	font-weight: bold;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.content .page-inner a:hover {
	opacity: 0.5;
}

legend {
	display: none;
}

fieldset {
	border: none;
	padding: 0;
	margin: 0;
	margin-top: 1em;
}

label, dt.powermail_all_label {
	width: 7em;
	float: left;
	padding-top: 0.1em;
	clear: left;
	text-align: right;
	padding-right: 0.8em;
}

dt.powermail_all_label {
	padding-top: 0.15em;
	margin-bottom: 0.42em;
}

.powermail_fieldwrap_submit {
	margin-top: 0.2em;
	clear: left;
	float: left;
	margin-left: 7.8em;
}

.powermail_fieldwrap_reset {
	margin-top: 0.2em;
	float: left;
	margin-left: 0.5em;
}

ul.parsley-errors-list, .mandatory {
	color: #AA0000;
}

ul.parsley-errors-list {
	margin: 0;
	padding-left: 0;
	margin-left: 7.8em;
	margin-top: 0.2em;
	margin-bottom: 0.5em;
	list-style: none;
}

.mandatory {
	font-weight: bold;
}

textarea.powermail_textarea, input.powermail_input, input.powermail_submit, dd.powermail_all_value, input.powermail_confirmation_form, input.powermail_confirmation_submit {
	border: 1px solid #888888;
	border: none;
	background: rgba(255, 255, 255, 0.75);
	padding: 0.2em;
	font-family: "Abel", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #101010;
	font-size: 100%;
	width: 16em;
	height: 1.1em;
}

dd.powermail_all_value {
	margin-left: 8em;
	margin-top: 0.3em;
	padding-top: 0.1em;
	padding-bottom: 0.4em;
}

textarea.powermail_textarea {
	height: 6em;
}

input.powermail_confirmation_form, input.powermail_confirmation_submit {
	width: 8em;
	margin-left: 8em;
	height: 1.8em;
	margin-top: 0.3em;
}
 
input.powermail_submit {
	width: 8em;
	height: 1.8em;
}



/* swirlLeft */
.vegas-transition-swirlLeft,
.vegas-transition-swirlLeft2 {
    -webkit-transform: scale(1.5) rotate(7deg);
        -ms-transform: scale(1.5) rotate(7deg);
            transform: scale(1.5) rotate(7deg);
    opacity: 0;
}

.vegas-transition-swirlLeft-in,
.vegas-transition-swirlLeft2-in {
    -webkit-transform: scale(1) rotate(0deg);
        -ms-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg); 
    opacity: 1;
}

.vegas-transition-swirlLeft2-out {
    -webkit-transform: scale(1.5) rotate(-7deg);
        -ms-transform: scale(1.5) rotate(-7deg);
            transform: scale(1.5) rotate(-7deg);
    opacity: 0;
}

/* swirlRight */
.vegas-transition-swirlRight,
.vegas-transition-swirlRight2 {
    -webkit-transform: scale(1.5) rotate(-7deg);
        -ms-transform: scale(1.5) rotate(-7deg);
            transform: scale(1.5) rotate(-7deg);
    opacity: 0;
}

.vegas-transition-swirlRight-in,
.vegas-transition-swirlRight2-in {
    -webkit-transform: scale(1) rotate(0deg);
        -ms-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg);
    opacity: 1;
}

.vegas-transition-swirlRight2-out {
    -webkit-transform: scale(1.5) rotate(7deg);
        -ms-transform: scale(1.5) rotate(7deg);
            transform: scale(1.5) rotate(7deg);
    opacity: 0;
}

/* zoomOut */
.vegas-transition-zoomOut,
.vegas-transition-zoomOut2 {
    -webkit-transform: scale(1.5);
        -ms-transform: scale(1.5);
            transform: scale(1.5);
    opacity: 0;
}

.vegas-transition-zoomOut-in,
.vegas-transition-zoomOut2-in {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
    opacity: 1;
}

.vegas-transition-zoomOut2-out {
    -webkit-transform: scale(0);
        -ms-transform: scale(0);
            transform: scale(0);
    opacity: 0;
}



.toolbar {
	margin: 2em 0 0.5em 0;
}

.tw, .fb, .ln {
	background: url(img/toolbar-icons.png) no-repeat !important;
	display: inline-block;
	height: 32px !important;
	width: 32px !important;
	padding-left: 0 !important;
	text-indent: -9999px;
	margin-right: 0.25em;
}
.fb {
	background-position: 0 0 !important;
}
.tw {
	background-position: 0 -50px !important;
}
.ln {
	background-position: 0 -100px !important;
}

#nix, #sound, #scope, ul.lang {
	position: fixed;
	left: 40px;
	bottom: 40px;
	text-shadow: -1px -1px 1px rgba(0,0,0,0.3), 1px 1px 1px rgba(0,0,0,0.3), 0 0 10px #000;
	-webkit-animation: fadeInRight 1.2s 1.8s backwards;
	animation: fadeInRight 1.2s 1.8s backwards;
	font-size: 90%;
	z-index: 2;
}
#scope {
	left: auto;
	right: 65px;
}
#sound {
	left: auto;
	right: 40px;
}
ul.lang {
	left: auto;
	right: 40px;
	bottom: auto;
	top: 40px;
	list-style: none;
	margin: 0;
}
ul.lang li {
	display: inline;
	margin-left: 0.5em;
}

video {
	transform: none !important;
}

#scopeTop, #scopeBottom {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #000000;
	height: 13%;
	z-index: 1;
	display: none;
}
#scopeBottom {
	top: auto;
	bottom: 0;
}
#scopeTop.show, #scopeBottom.show {
	-webkit-animation: fadeInDown 0.7s ease-out backwards;
	animation: fadeInDown 0.7s ease-out backwards;
}
#scopeBottom.show {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
}
#scopeTop.hide, #scopeBottom.hide {
	-webkit-animation: fadeOutUp 1s 0.5s ease-out forwards;
	animation: fadeOutUp 1s 0.5s ease-out forwards;
}
#scopeBottom.hide {
	-webkit-animation-name: fadeOutDown;
	animation-name: fadeOutDown;
}

.vegas-slide-inner, .vegas-video {
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	height: 100%;
}

.vegas-video {
	min-height: 0%;
	position: absolute;
	top: 0%;
}

#music-frame {
	position: fixed;
	top: 35px;
	right: 40px;
	width: 40%;
	height: 430px;
	border: 0;
	visibility: hidden;
	z-index: 2;
	transition: visibility 0s, opacity 0.5s ease;
	opacity: 0;
}
#music-frame.show {
	opacity: 1;
	visibility: visible;
}


/*** small window / mobile devices ***/

@media screen and (max-width:840px), screen and (max-height:480px) {

	.header {
		top: 0;
		left: 0;
		position: relative;
	}
	.header.scope {
		top: 0;
	}

	.logo-wrap, ul.nav {
		margin-bottom: 1em;
	}

	ul.nav {
		padding-top: 10px;
		padding-bottom: 36px;
		font-size: 110%;
	}

	ul.nav li {
		margin-bottom: 0;
	}

	.home .page {
		position: relative;
		clear: both;
		bottom: auto;
		right: auto;
		margin-left: 1em;
	}

	.content .page {
		clear: both;
		margin: auto;
		width: 80%;
		-webkit-animation: fadeIn 0.9s ease-out 0.6s backwards;
		animation: fadeIn 0.9s ease-out 0.6s backwards;
		margin-bottom: 20px;
	}

	.content .page-inner {
		font-size: 115%;
	}

	h1, h2 {
		font-size: 200%;
	}
	
	.content h1, .content h2 {
		font-size: 125%;
	}

	textarea.powermail_textarea, input.powermail_input, input.powermail_submit, dd.powermail_all_value, input.powermail_confirmation_form, input.powermail_confirmation_submit {
		width: 10em;
	}

	.powermail_fieldwrap_submit,
	ul.parsley-errors-list,
	dd.powermail_all_value, input.powermail_confirmation_form, input.powermail_confirmation_submit {
		margin-left: 0;
	}

	label, dt.powermail_all_label {
		text-align: left;
	}

	#scopeTop, #scopeBottom {
		z-index: -1;
	}

}

/* TODO TABLET
@media screen and (max-width:840px), screen and (max-height:480px) {

	.home .page {
		bottom: 3%;
		right: 7%;
	}

}
*/

@media screen and (min-width:1220px) {

	.content .page.oversize {
		margin-top: 40px;
	}

	.content .page.oversize.scope {
		margin-top: 16%;
		margin-bottom: 16%;
	}

}