@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 200;
  font-display: auto;
  src: url('../fonts/source-sans-pro-v13-latin_latin-ext-200.eot');
  src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'),
       url('../fonts/source-sans-pro-v13-latin_latin-ext-200.eot?#iefix') format('embedded-opentype'),
       url('../fonts/source-sans-pro-v13-latin_latin-ext-200.woff2') format('woff2'),
       url('../fonts/source-sans-pro-v13-latin_latin-ext-200.woff') format('woff'),
       url('../fonts/source-sans-pro-v13-latin_latin-ext-200.ttf') format('truetype'),
       url('../fonts/source-sans-pro-v13-latin_latin-ext-200.svg#SourceSansPro') format('svg');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url('../fonts/source-sans-pro-v13-latin_latin-ext-regular.eot');
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
       url('../fonts/source-sans-pro-v13-latin_latin-ext-regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/source-sans-pro-v13-latin_latin-ext-regular.woff2') format('woff2'),
       url('../fonts/source-sans-pro-v13-latin_latin-ext-regular.woff') format('woff'),
       url('../fonts/source-sans-pro-v13-latin_latin-ext-regular.ttf') format('truetype'),
       url('../fonts/source-sans-pro-v13-latin_latin-ext-regular.svg#SourceSansPro') format('svg');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  font-display: auto;
  src: url('../fonts/source-sans-pro-v13-latin_latin-ext-600.eot');
  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'),
       url('../fonts/source-sans-pro-v13-latin_latin-ext-600.eot?#iefix') format('embedded-opentype'),
       url('../fonts/source-sans-pro-v13-latin_latin-ext-600.woff2') format('woff2'),
       url('../fonts/source-sans-pro-v13-latin_latin-ext-600.woff') format('woff'),
       url('../fonts/source-sans-pro-v13-latin_latin-ext-600.ttf') format('truetype'),
       url('../fonts/source-sans-pro-v13-latin_latin-ext-600.svg#SourceSansPro') format('svg');
}

* {margin: 0; padding: 0; border: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
input, textarea, button {-webkit-appearance: none;-moz-appearance: none;appearance: none; border-radius: 0;}
body {font-family: "helvetica-neue-lt-pro", sans-serif; font-style: normal; font-weight: 400; font-size: 1em; color: #fff; background-color: #000; text-align: left;}
a{text-decoration: none; color: #fff;}
								 
.clr {clear: both;}

.logo {display: block; text-align: center;} 
.logo img {width: 100%; max-width: 200px; height: auto; margin-top: 30px;}

h1 {color: #fff; margin: 0 0 10px 0; font-family: "helvetica-neue-lt-pro-cond", sans-serif; font-weight: 900; font-style: normal; font-size: 3em; text-align: center; }
h2 {text-align: center;}

#video {display: block; width: calc(100vw); height: calc(100vh); margin: auto; overflow: hidden; margin-top: 50px;}
#video_in {position: relative; top: 0; left: 0; width: calc(100vw); height: calc(100vh); overflow: hidden;}
#bgvideo {position: absolute; top: 0; left: 0; width: auto; height: 100%; z-index: -1;}
#box {position: relative; z-index: +3;}
#znak {display: block; position: absolute; bottom: 0; left: 0; width: calc(100vw); height: calc(100vh); z-index: +2; background: url("../img/bg_phone.png") bottom right no-repeat; background-size: cover;}
#fade {display: block; position: absolute; top: 0; left: 0; width: calc(100vw); height: calc(100vh); z-index: +1; background: #000;	opacity: 1; animation-name: fadeOutIn; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-duration: 27s;}

#buttony {position: absolute; bottom: 30px; left: 30px; z-index: +4;}
.button {display: block; padding: 10px; margin: 10px; background: #000; -webkit-transition: all 500ms; transition: all 500ms; transition-timing-function: ease-in-out;}
.youtube:hover {background: #FF0000;}
.spotify:hover {background: #1DB954;}
.instagram:hover {background: #C13584;}
.booking:hover {background: #505050;}

@keyframes fadeOutIn {
	0% {
		opacity: 1;
	}
	5% {
		opacity: 1;
	}
	10% {
		opacity: 0;
	}
	90% {
		opacity: 0;
	}
	95% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}


@media screen and (min-width: 1024px) {
	.logo img {width: 100%; max-width: 300px; margin-top: 50px;}
	h1 {font-size: 5em; margin: 50px 0 20px 0;}
	#video {display: block; width: calc(100vw); height: calc(100vh); overflow: hidden; margin-top: 0;}
	#video_in {position: relative; top: 0; left: 0; width: calc(100vw); height: calc(100vh); overflow: hidden;}
	#bgvideo {position: absolute; top: 0; left: 0 ; width: auto; height: 100%; z-index: -1;}
	#znak {display: block; position: absolute; top: 0; left: 0; width: calc(100vw); height: calc(100vh); z-index: +2; background: url("../img/bg.png") top left no-repeat; background-size: cover;}
	
	#buttony {left: unset; right: 40px;}
	.button {display: block; float: left; padding: 10px; margin: 10px; background: #000; -webkit-transition: all 500ms; transition: all 500ms; transition-timing-function: ease-in-out;}
}