@charset "UTF-8";
html { 
  	background: url(images/background.jpg) no-repeat center center fixed; 
  	-webkit-background-size: cover;
 	-moz-background-size: cover;
 	-o-background-size: cover;
  	background-size: cover;
	width: 100%;
}

body {
	width: 100%;
	padding-top: 25%;
	margin: 0;
}

#container {
	width: 100vw;
	float: left;
}

div #logo {
	width: 30%;
	float: left;
}

div #logo img {
	width: 100%;
	float: left;
}

div #video-container {
	width: 40%;
	float: left;
}

div #video {
	position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

div #video iframe {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

div #title {
	width: 30%;
	float: left;
}

div #title img {
	width: 100%;
	float: left;
}

#social-container {
	width: 100vw;
	float: left;
}

div #social {
	margin: 2% auto;
	width: 15%;
	height: 3%;
}

img.social-button {
  	width: 20%;
  	height: auto;
	margin: 0 1%;
}

div #shows {
	margin: 2% auto;
	width: 15%;
	height: 3%;
}

img#shows-button {
	content: url("images/shows.png");
	width: 100%;
  	height: auto;
	margin: 0 1%;
}

img#shows-button:hover {
	content: url("images/shows_hover.png");
}

img#instagram {
	content: url("images/instagram.png");
}

img#instagram:hover {
	content: url("images/instagram-hover.png");
}

img#facebook {
	content: url("images/facebook.png");
}

img#facebook:hover {
	content: url("images/facebook-hover.png");
}

img#youtube {
	content: url("images/youtube.png");
}

img#youtube:hover {
	content: url("images/youtube-hover.png");
}

img#tiktok {
	content: url("images/tiktok.png");
}

img#tiktok:hover {
	content: url("images/tiktok-hover.png");
}

@media only screen and (max-width: 600px) {
	
body {
	width: 100%;
	padding-top: 10%;
	margin: 0;
}
	
#container {
	width: 100vw;
	float: left;
	margin: 0 auto;
}
	
div #logo {
	width: 65%;
	float: none;
	margin: auto;
}
	
div #logo img {
	width: 100%;
	float: none;
}

div #video-container {
	width: 100%;
	float: left;
}

div #title {
	width: 65%;
	float: none;
	margin: auto;
}
	
div #title img {
	width: 100%;
	float: none;
	margin-top: 2%;
}
	
#social-container {
	width: 100vw;
	float: left;
}

div #social {
	margin: 2% auto;
	width: 40%;
	height: 3%;
}

img.social-button {
  	width: 21%;
  	height: auto;
	margin: 0 1%;
}

div #shows {
	margin: 2% auto;
	width: 40%;
	height: 3%;
}
	
}