@charset "UTF-8";
/* CSS Document */

body {
	background-image:url("img/brokenGlass_side.jpg");
	background-size: contain;
	margin: 0;
	background-position: left center;
	background-color: #010101;
	background-repeat: no-repeat;
}

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

@keyframes dropIn {
   0%   {margin-top: -50px; opacity: 0;}
  100% {margin-top: 0px; opacity: 1;}
}

@keyframes slideIn {
   0%   {margin-left: -50px; opacity: 0;}
  100% {margin-top: 0px; opacity: 1;}
}

/* The element to apply the animation to */

.headSpace {
	width: 100%;
	margin: 0, auto;
	text-align: center;	
	padding-top: 5vh;
	
}

.fholeR {
	width: 20%;
	text-align: left;
	float: left;
	animation-name: fadeIn;
  animation-duration: 4s;
}

.fholeL {
	width: 20%;
	text-align: right;
	float: left;
animation-name: fadeIn;
  animation-duration: 2s;
}

.fholeR img, .fholeL img {
	height: 25vw;
	object-fit: cover;
}

.headerTextContainer {
	width: 60%;
	text-align: center;
	float: left;
		
	animation-name: dropIn;
  animation-duration: 3s;
}

h1, h2 {text-align: center;}

h1 .shead {
font-family: "Dosis", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
	font-size: .75em;
	text-transform: uppercase;
	color: #9ecc3b;
	letter-spacing: .5em;
	padding-bottom: 5px;
}

h1 .mhead {
	font-family: "Rosarivo", serif;
  font-weight: 400;
  font-style: normal;
	font-size: 1.25em;
	color: #fff;
}

h2 .green {
	font-family: "Dosis", sans-serif;
	font-size: 1em;
	color: #fff;

	 font-weight: 400;
	padding-top: 0;
	padding-bottom: 5px;
	border-top: dotted #9ecc3b;
	border-bottom: dotted #9ecc3b;
	background-color: black;
	clear: both;
	animation-name: slideIn;
	animation-duration: 2s;
}

.mediaWrapper {
	background-image: url("img/soundwave.png");
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	padding-left: 10vw;
	padding-right: 10vw;
	
}

.mediaBox video {
	width: 80vw;
	aspect-ratio: 16 / 9;
	border: 4px solid #9ecc3b;
	box-sizing: border-box;
	border-radius: 20px;
	background-color: #000;
}

p {
	font-family: "Dosis", sans-serif;
  font-weight: 600;
  font-style: normal;
	font-size: .9em;
	color: #9ecc3b;
	text-align: center;
	text-transform: uppercase;
	padding-top: 15px;
	clear: both;
	animation-name: fadeIn;
	animation-duration: 2s;
}

p a{
	color: #fff;
	text-decoration: none;
	border-bottom: 1px dotted #fff;
}

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

body {
	background-image:url("img/brokenGlass_dark.jpg");
	background-size: contain;
	margin: 0;
	background-position: left center;
	background-color: #010101;
	background-repeat: no-repeat;
	display: flex; 
  	flex-direction: column; 
  	min-height: 100vh;
}



footer {
	background-color: #9ecc3b;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	margin-top: auto;
	text-align: center;
}

footer p {
	color: #000;
	text-transform: none;
	font-size: 1.25em;
}

@media only screen and (min-width: 800px)
{
	h1 .shead {
	font-size: .9em;
}
	
.headSpace {
	padding-top: 8vh;
	width: 100%;
}
	
	.headerTextContainer {
	width: 40%;
	text-align: center;
	float: left
}

h1 .mhead {

	font-size: 1.5em;
	}

h2 .green {
			font-size: 1.25em;
	}	
	
	.fholeL, .fholeR {
		width: 30%;
	} 	
	
.fholeR img, .fholeL img {
	object-fit: cover;
	max-height: 200px;
}	
	
	p {
		font-size: 1.25em;
	}
	
footer p {
	color: #000;
	text-transform: none;
	font-size: 1.5em;
	
	}
}

@media only screen and (min-width: 1200px)
{
	h1 .shead {
	font-size: 1em;
}
	
.headSpace {
	padding-top: 10vh;
	width: 100%;
}
	
	.headerTextContainer {
	width: 40%;
	text-align: center;
	float: left
}

h1 .mhead {

	font-size: 2em;
	}

h2 .green {
			font-size: 2em;
	}	
	
	.fholeL, .fholeR {
		width: 30%;
	} 	
	
.fholeR img, .fholeL img {
	object-fit: cover;
	max-height: 200px;
}	
	
	p {
		font-size: 2em;
	}
	
	footer p {
	color: #000;
	text-transform: none;
	font-size: 2em;
	
	}
}