@charset "UTF-8";

/* =======================================================================================

		Icons & Fonts:

			Custom fonts: https://fonts.google.com/
			Google cdn: https://fonts.googleapis.com/css?family=Bitter|Work+Sans:300

			Icon font library: https://fontawesome.com/icons?d=gallery&m=free
			Fontawesome cdn: https://use.fontawesome.com/releases/v5.4.2/css/all.css
			
		Google Fonts:

			font-family: 'Open Sans', verdana, sans-serif;
			font-family: 'Special Elite', cursive;
			
		Simple Animation:
		
			transition: all 0.3s cubic-bezier(0.49, -0.57, 0.58, 1.8) 0s;			
			transition: all 0.2s ease-in-out;

======================================================================================= */

/* Animation for spinners */
.spinner {
	-moz-animation: spin 2s infinite linear;
	-o-animation: spin 2s infinite linear;
	-webkit-animation: spin 2s infinite linear;
	animation: spin 2s infinite linear;
	display: inline-block;
}

@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100% {-moz-transform: rotate(359deg);-o-transform: rotate(359deg);-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}
@-webkit-keyframes spin {
	0% {-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100% {-moz-transform: rotate(359deg);-o-transform: rotate(359deg);-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}
@-o-keyframes spin {
	0% {-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100% {-moz-transform: rotate(359deg);-o-transform: rotate(359deg);-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}
@-ms-keyframes spin {
	0% {-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100% {-moz-transform: rotate(359deg);-o-transform: rotate(359deg);-webkit-transform: rotate(359deg);transform: rotate(359deg);}}
@keyframes spin {
	0% {-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);}
	100% {-moz-transform: rotate(359deg);-o-transform: rotate(359deg);-webkit-transform: rotate(359deg);transform: rotate(359deg);}
}

/* vertically center align an element 
   parent el requires static height */
.v-center {
  position: relative;
  top: 50%;
  -webkit-transform: perspective(1px) translateY(-50%);
  -ms-transform: perspective(1px) translateY(-50%);
  transform: perspective(1px) translateY(-50%);
}

.flip {
  -ms-transform: rotate(-180deg); 
  -webkit-transform: rotate(-180deg); 
  transform: rotate(-180deg);
  -webkit-transition: 0.2s ease-in-out; 
  transition: 0.2s ease-in-out;
}

html {
	font-size: 16px;
}

body {
	position: relative;
	/* padding-top: 60px; */
	font-family: 'Open Sans', verdana, sans-serif;
	color: #020;
	background: #000 url(../img/milkyway.jpg) 50% 50% no-repeat;
	background-size: cover;
	background-attachment: fixed;
}


/* =======================================================================================
		Page Header
		Notes:
======================================================================================= */

header {
	position: fixed;
	top: -70px; 
	left: 0;
	display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding: 0 20px;
  width: 100vw;
  height: 100px;
  z-index: 99;
  overflow: hidden;
  -webkit-justify-content: space-between;
  -webkit-align-items: center;
  -webkit-flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  
  border-bottom: 1px solid rgba(255,255,255,0.5);
  background: rgba(35,34,64,1); 
}

h1 {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
  overflow: hidden;

  background: transparent url(../img/7sm-logo-text.png) 0 50% no-repeat;
  background-size: 40%;
}

h1 a {
	width: 100%;
	height: 100%;
	border: 0;
}

h1 a:hover {
	border: 0;
}

nav {
	position: relative;
	top: auto; 
	right: auto;	
	z-index: 999;
	display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  -webkit-align-items: center;
  -webkit-flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
	margin: 0;
	padding: 0;
	width: 100%;
	color: #fff;
}

nav a {
	margin-left: 20px;
}

@media (min-width: 640px) {
	header {
		top: -100px;
	}
	
  nav {
		position: fixed;
		top: 30px; 
		right: 20px;
		width: auto;
	}
}


/* =======================================================================================
		Global Typography
		Notes:
======================================================================================= */

h1, h2, h3, h4, h5 {
  font-weight: normal;
}

a {
	display: inline-block;
	padding: 1px 0;
	/* font-style: italic; */
  color: rgba(234,200,223,1);
  text-decoration: none;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease-in-out; 
}

a:hover {
  text-decoration: none;
  border-top: 1px solid rgba(234,200,223,1);
  border-bottom: 1px solid rgba(234,200,223,1);
}

.small { font-size: 0.8rem; }

p {
	margin: 0 0 12px;
	line-height: 1.2em;
}


/* =======================================================================================
		Global Structure / Pages
		Notes:
======================================================================================= */

#page {
	position: relative;
  width: 100%;
  
}

#logo {
	margin-left: 20px;
	width: 420px;
	height: 420px;
	z-index: 9;	
	background: transparent url(../img/7sm-logo.png) 50% 50% no-repeat;
	background-size: contain;
}


article {
	position: relative;
	margin: 0 auto 90px;
	padding: 20px;
	width: 95%;
	max-width: 740px;
	height: auto;
	color: #fff;
	background: rgba(35,34,64,0.9); 
	border: 1px solid rgba(255,255,255,0.5);
	-webkit-box-shadow: 0 0 12px rgba(0,0,0,0.5);
	box-shadow: 0 0 12px rgba(0,0,0,0.5);
}

@media (min-width: 780px) {
	article {
		width: 80%;
  }
}

#hero {
	display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  -webkit-justify-content: center;
  -webkit-align-items: flex-start;
  text-align: center;
  margin: 80px auto 0;
  width: 100vw;
	min-height: 100vh;
	border: none;
	background: transparent;
	-webkit-box-shadow: none;
	box-shadow: none;
}

/* =======================================================================================
		Contact Form
		Notes: 
======================================================================================= */

#message {
	display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  -webkit-align-items: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  -webkit-flex-direction: row;
  flex-direction: row;
	position: relative;
	margin: 0 0 20px;
	padding: 12px;
	color: #fff;
	border: 1px solid #fff;
	background: #383752;
  background: -webkit-linear-gradient(top, #545275 0%, #383752 100%);
  background: -moz-linear-gradient(top, #545275 0%, #383752 100%);
  background: -o-linear-gradient(top, #545275 0%, #383752 100%);
  background: -ms-linear-gradient(top, #545275 0%, #383752 100%);
  background: linear-gradient(top, #545275 0%, #383752 100%);	
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

#message span {
	width: 90%;
}

#message a {
	width: 10%;
	font-size: 28px;
	text-align: right;
	color: rgba(150,128,145,1);
	border: none;
}

#message a:hover {
	margin: 0;
	border: none;
}

#ssm-contact {
	display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  -webkit-align-items: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  -webkit-flex-direction: column;
  flex-direction: column;
}

#ssm-contact section {
	width: 100%;
}

#ssm-contact .text {
	padding: 10px 20px 10px 10px;
}

#ssm-contact form {
	/* padding-top: 50px; */
	width: 100%;
}
    
#ssm-contact fieldset {
	border: 0;
}

#hidden {
	margin: 0;
	padding: 0;
	height: 0;
}

#ssm-contact label {
	display: block;
}

#ssm-contact input, #ssm-contact textarea, #form-submit {
	padding: 10px;
	width: 100%;
	font-size: 1rem;
	border: 0;
	color: rgba(0,116,232,1);
	background: rgba(255,255,255,1); /* rgba(200,168,190,0.7); */
	border-radius: 3px;
}

#form-submit {
	color: rgba(35,34,64,1);
	background: rgba(209,173,66,1);
}

#form-submit:hover {
	background: rgba(209,173,66,0.9); /* rgba(200,168,190,1); */
}

#form-submit:disabled {
	font-size: 1.2em;
	color: rgba(35,34,64,1);
	background: #ccc;
}

#form-submit:disabled i {
	display: block;
}

#form-submit:disabled span, #form-submit i {
	display: none;
}

#ssm-contact h2, #about-info h2 {
	font-family: 'Special Elite', cursive;
  font-size: 1.8rem;
  color: #ececec;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}


.error::-webkit-input-placeholder { color: rgba(252,209,0,1); font-weight: 700; }
.error::-moz-placeholder { color: rgba(252,209,0,1); font-weight: 700; }
.error:-ms-input-placeholder { color: rgba(252,209,0,1); font-weight: 700; }
.error:-moz-placeholder { color: rgba(252,209,0,1); font-weight: 700; }

#email-error, #name-error, #msg-error { color: rgba(252,209,0,1); font-weight: 700; }

#contact-info {
	padding: 32px 20px 0;
}

#contact-info img, #about-info img {
	float: left;
	margin: 0 16px 16px 0;
	width: 50%;
	max-width: 100px;
}

@media (min-width: 820px) {
  /* #ssm-contact {
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  #ssm-contact section {
		width: 50%;
	} */
}


/* =======================================================================================
		Audio Player
		Notes: Adapted from: 
										https://designshack.net/articles/css/custom-html5-audio-element-ui/
======================================================================================= */

.wb {
	display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  -webkit-flex-direction: column;
  justify-content: space-between;
  flex-direction: column;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.c-text {
	margin-bottom: 20px;
	width: 100%;
}

.c-text h2 {
	font-family: 'Special Elite', cursive;
  font-size: 1.8rem;
  color: #ececec;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}

.content2 {
	padding-top: 0;
  width: 100%;
}

.audio-player, .audio-player div, .audio-player h2, .audio-player a, .audio-player span, .audio-player button {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}



div.mejs-clear, div.mejs-layers {
	display: none;
}


div.audio-player {
	display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;

  
  position: relative;
  margin: 0 auto 20px;
  padding: 12px;
  width: 100%;
  height: 100px;  
  border: 1px solid #fff; 
  
  
  /* background: #4c4e5a; /* rgba(115,116,78,0.9); 
  background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
  background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
  background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
  background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
  background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%); */
  
  
  background: #383752;
  background: -webkit-linear-gradient(top, #545275 0%, #383752 100%);
  background: -moz-linear-gradient(top, #545275 0%, #383752 100%);
  background: -o-linear-gradient(top, #545275 0%, #383752 100%);
  background: -ms-linear-gradient(top, #545275 0%, #383752 100%);
  background: linear-gradient(top, #545275 0%, #383752 100%);
  
  
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

/*  */
@media (min-width: 780px) {
	div.audio-player {
		-webkit-justify-content: space-between;
  	justify-content: space-between;
		-webkit-flex-direction: row;
  	flex-direction: row;
  	height: 55px;
  }
}


.mejs-container {
	/*
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100% !important;
	max-width: 450px;
	*/

}

/*  */
@media (max-width: 780px) {
	.mejs-container {
		width: 100% !important;
  }
}

.mejs-time-loaded {
	width: 90% !important;
	max-width: 380px;
}

.audio-player h2 {
	/*
  position: absolute;
  top: 7px;
  left: 10px;
  */
  padding-bottom: 5px;
  width: 100%;
  font-family: 'Special Elite', cursive;
  font-size: 1.5rem;
  color: #ececec;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}

/*  */
@media (min-width: 780px) {
	.audio-player h2 {
		padding-bottom: 0;
		width: 60%;
  }
}


.mejs-controls {
	position: relative;
}

/* play/pause control */
.mejs-controls .mejs-button button {
  cursor: pointer;
  display: block;
  position: absolute;
  text-indent: -9999px;
}

.mejs-controls .mejs-play button, .mejs-controls .mejs-pause button {
  width: 34px;
  height: 34px;
  /* top: 32px;
  left: 7px; */
  background: transparent url('../img/player/playpause.png') 0 0 no-repeat;
}

.mejs-controls .mejs-pause button { background-position: 0 -35px; }
  
/* mute/unmute control */
.mejs-controls .mejs-mute button, .mejs-controls .mejs-unmute button {
  width: 18px;
  height: 19px;
  top: 6px; /* 9px; */
  right: 142px;
  background: transparent url('../img/player/audio.png') 0 0;
}

.mejs-controls .mejs-unmute button { background-position: 0 -19px; }

/* volume scrubber bar */
.mejs-controls div.mejs-horizontal-volume-slider {
  position: absolute;
  top: 10px; /* 13 */
  right: 15px;
  cursor: pointer;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
	width: 120px;
  height: 11px;
  background: #212227; 
  -webkit-box-shadow: inset 0px 1px 0px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.25);
  -moz-box-shadow: inset 0px 1px 0px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.25);
  box-shadow: inset 0px 1px 0px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.25);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
  position: absolute;
  width: 0;
  height: 9px;
  top: 1px;
  left: 1px;

  
  background: rgba(150,128,145,1); /*#90d26a;
  background: -webkit-linear-gradient(top, #90d26a 0%, #83bb63 100%);
  background: -moz-linear-gradient(top, #90d26a 0%, #83bb63 100%);
  background: -o-linear-gradient(top, #90d26a 0%, #83bb63 100%);
  background: -ms-linear-gradient(top, #90d26a 0%, #83bb63 100%);
  background: linear-gradient(top, #90d26a 0%, #83bb63 100%); */
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

/* time scrubber bar */
.mejs-controls div.mejs-time-rail { /* width: 100% !important; max-width: 380px; */ }
 
.mejs-controls .mejs-time-rail span {
  position: absolute;
  display: block;
  /*
  width: 100%;
  max-width: 380px;
  */
  height: 12px;
  top: 10px;
  left: 55px;
  cursor: pointer;
  -webkit-border-radius: 0px 0px 2px 2px;
  -moz-border-radius: 0px 0px 2px 2px;
  border-radius: 0px 0px 2px 2px;
}
 
.mejs-controls .mejs-time-rail .mejs-time-total { 
  background: #565860; 
  /* width: 60% !important; */
  width: 120px !important;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.mejs-controls .mejs-time-rail .mejs-time-loaded {
  top: 0;
  left: 0;
  width: 0;
  background: #7b7d82;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.mejs-controls .mejs-time-rail .mejs-time-current {
  top: 0;
  left: 0;
  width: 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  
  background: #F3C8CF;
  
  /*
  background: #90d26a;
  background: -webkit-linear-gradient(top, #90d26a 0%, #83bb63 100%);
  background: -moz-linear-gradient(top, #90d26a 0%, #83bb63 100%);
  background: -o-linear-gradient(top, #90d26a 0%, #83bb63 100%);
  background: -ms-linear-gradient(top, #90d26a 0%, #83bb63 100%);
  background: linear-gradient(top, #90d26a 0%, #83bb63 100%);
  */
}

/* metallic sliders */
.mejs-controls .mejs-time-rail .mejs-time-handle {
  position: absolute;
  display: block;
  width: 20px;
  height: 22px;
  top: -6px;
  background: url('../img/player/handle-lg.png') no-repeat;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
  position: absolute;
  display: block;
  width: 12px;
  height: 14px;
  top: -1px;
  background: url('../img/player/handle-sm.png') no-repeat;
}

/* time progress tooltip */
.mejs-controls .mejs-time-rail .mejs-time-float {
  position: absolute;
  display: none;
  width: 33px;
  height: 23px;
  top: -26px;
  margin-left: -17px;
  z-index: 9999;
  background: url('../img/player/time-box.png');
}
 
.mejs-controls .mejs-time-rail .mejs-time-float-current {
  width: 33px;
  display: block;
  left: 0;
  top: 4px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  color: #666;
  text-align: center;
  z-index: 9999;
}

@media (min-width: 820px) {
	/* .mejs-controls .mejs-time-rail .mejs-time-total {
		width: 90% !important;
	} */
}


/* =======================================================================================
		Footer
		Notes:
======================================================================================= */

footer {
  padding: 20px;
  font-size: 0.8rem;
  text-align: center;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.5);
  background: rgba(35,34,64,1) url(../img/stars2.png) 50% 50% repeat;
}

footer p:last-child {
  margin: 0;
}




/* =======================================================================================
		Mobile First Media Queries
		Notes: Typically associate MQs with their relative components/styles
======================================================================================= */

/* mobile styles should be the defaults */

/* mobile 2 - up to 379px */
@media (min-width: 380px) {

}

/* tablet - 380px to 599px */
@media (min-width: 600px) {

}

/* desktop  - 600px to 819px */
@media (min-width: 820px) {

}

/* desktop 2 - 820px to 1039px */
@media (min-width: 1040px) {

}


/* =======================================================================================
		Print
		Notes: Overrides Print MQ in _n.css
======================================================================================= */

@media print {
  body {
  	display: none;
  }
}