html, body {
	margin:0px;
	padding:0px;
	height:100%;
}




body {
	font-family: 'Audiowide', Arial;
	text-align:center;
	background:yellow url('img/wiresb.jpg') fixed no-repeat;
	background-size:cover;
	font-size:1.3em;
}


#container {
	width:90%;
	padding-top:50px;
	margin:auto;
	margin-bottom:50px;
}


h1 {
	font-size:40px;
	font-size:10vw;
	animation:colorChange 5s;
	animation-iteration-count: infinite;
}

h6 {
	font-size:50px;
	font-size:10vw;
	animation:colorChange2 5s;
	animation-iteration-count: infinite;
	margin-bottom:0px;
}

@keyframes colorChange {
0% {color:red; visibility: opacity:1;}
15% {color:blue;}
30% {color:yellow;}
45% {color:pink;}
60% {color:green;}
75% {color:white;}
80% {color:orange; opacity:1;}
100% {opacity:0;}
}


@keyframes colorChange2 {
0% {color:yellow; visibility: opacity:1;}
15% {color:pink;}
30% {color:lime;}
45% {color:white;}
60% {color:black;}
75% {color:red;}
80% {color:magenta; opacity:1;}
100% {opacity:0;}
}

a.button {
	display:block;
	background:orange;
	color:aqua;
	font-size:2em;
	padding:0.5em;
	border-radius:5px;
	text-decoration:none;
	transition: all 0.35s;
	margin-bottom:0.5em;
}

a.button:hover {
	background:black;
	color:white;
}

a.button.smaller {
	display:inline-block;
}

.announce {
	animation:stuff 5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	background:rgba(0,0,0,0.3);
	border-radius:20px;
}

.trio {
	width:90%;
	max-width:1000px;
	margin:auto;
	animation:dottedborder 5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes stuff {
	0% {color:lime;}
	30% {color:lime;}
	60% {color:magenta;}
	100% {color:magenta;}
}

@keyframes dottedborder {
	0% {border:2vw dotted lime;}
	30% {border:2vw dotted lime;}
	60% {border:2vw dotted magenta;}
	100% {border:2vw dotted magenta;}
}

#gallery {
	padding-top:1em;
	margin-bottom:3em;
}


video {
	width:100%;
	height:auto;
}

.video {
	margin-bottom:1em;
}

.video p {
	margin: 0px auto;
	font-size:0.9em;
	color:lime;
}

.responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0px;
}

.responsive iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index:1;
}

#about {
	padding-top:2em;
	animation:about 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes about {
	0% {color:red;}
	70% {color:rgb(254,192,85);}
	100% {color:rgb(20,1,159);}
}






/* ========================================
MEDIA QUERIES!
======================================== */


@media all and (min-width: 480px) {
	
a.button {
	display:inline-block;	
	margin-right:0.5em;
}
	
	
} /* closes 480px+ */



@media all and (min-width: 768px) {
	
.video {
	display:inline-block;
	width:48%;
	margin-right:1%;
}

.responsive {
	width:400px;
	margin:auto;
	padding-bottom: 36.25%;
}


a.button.smaller {
	font-size:1.7em;
	padding:0.35em;
}


.announce {
	background:none;
}

#about {
	width:600px;
	margin:auto;
}



	
	
} /* closes 768px+ */





@media all and (min-width: 1024px) {
	
.responsive {
	width:700px;
	padding-bottom: 20.25%;
}



	
	
} /* closes 1024px+ */