@charset "UTF-8";

body, h1, p{ 
	padding: 0; 
	margin: 0;
	font-family: Roboto, Helvetica, Arial, Verdana, sans-serif;
	font-weight:normal;
	font-size: 18px;
	color: rgba(94,94,94,1.00)
} 

h1, h2 {
	font-family: 'gotham', Helvetica, Arial, Verdana, sans-serif;
	text-transform: uppercase;
	font-weight: normal;
	font-size: 1.4em;
}

#barcontainer {
	width: 100%;
	background-color: rgb(255,255,255);
	border-bottom: thick solid red;
	display:flex;
	flex-direction:column;

	position:relative;
	top: 0;
	z-index: 10;
	padding: 20px 0px;
	
}

#bar {
	/* margin: 0 5%; */
	line-height: 60px;
  text-align:center;
}

#logo {

	background-image: url("../images/maShadow.png");
	background-repeat: no-repeat;
	background-size:contain;
	background-position: center;
	display: block;
	position: relative;
	height: 250px;
	margin: 0 auto;
	
}

#bar h1 {
	display: none;
	text-align: center;
	padding-top: 20px;
}

#tagline {
	text-align: center;
	font-size: 1.2em;
}

header hr {
	margin-bottom: 20px;
}

/*Override for bootstrap Carousel to make full-width*/
.container {
	width: 100%;
	max-height: 500px;
	overflow: hidden;
	padding:0px;
	
}

.banner { 
	position:relative;
	width: 100%;
	height: 400px;
	background-image: url("../images/eventmic.jpg");
	background-size:cover;
	background-position: center;
}


.dropdown {
  position: relative;
  display: block;
	margin: 0 auto;
	font-size:2em;
} 

.dropdown-content {
  	display: none;
  	position:relative;
  	background-color: #575757;
	width: 100%;
  	overflow: auto;
	text-align: center;
  z-index: 1;
}

.dropdown-content a {
  color: #FFFFFF;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #9C0002;}

.show {display: block;}

/*End w3schols dropdown*/

section {
	padding-left: 8%;
	padding-right: 8%;
	padding-top: 15px;
	padding-bottom: 15px;
	position: relative;
}

section p{
	line-height: 1.7em;
	padding-bottom: 15px;
	font-style: normal;
	
}

section h2{text-align: center;}

#about h2 {
		padding-bottom: 15px;
	}

#about {padding-bottom: 8%;}

.callout {	
	font-style: italic; 
	text-align: center;
	font-size: 1.2em;
	border-left: solid thick;
	border-right: solid thick;
	border-color: #FF0004;
	padding: 2%;
	margin-top: 15px;
}

.column {
	display:none;
}

.icon  {
	text-align: center;
	font-size: 4em;
	margin-bottom: 5%;
	
}

section a{
	color: inherit;
	text-align: center;
	text-decoration: underline;
}

section a:hover, section a:focus {
	color:inherit;
	font-size: 1.2em;
}

a.contact {
	text-decoration: none;
	text-align: center;
	color:#FFFFFF;
	font-weight: 700; 
	font-size: 1.2em;
	padding: 20px 0px;
	display: block;
	margin: 20px auto;
	background-color: #BF1111;
	width: 80%;
	border-radius: .5em;
	border: none;
	cursor: pointer;

}

a.contact:hover, a.contact:focus {
	background-color: #FF0000;
	transition: .2s;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.50) ;
}

.sectionCover {
	
	position:absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: 100%;
    height: 100%;

}

#vidover {
	background-image: url("../images/camera.jpg");
	background-size: cover;
	background-position:bottom;
}

#audover{
	background-image: url("../images/mixer.jpg");
	background-size: cover;
	background-position:bottom;
}

#webover {
	background-image: url("../images/webdesigner.jpg");
	background-size: cover;
	background-position:bottom;
}


.infocol{
	margin: 0 auto;
	max-width:400px;
	
}




.even {
	color: #FFFFFF;
	background-color:#575757;
}
.even p, .even h2{
	color: #FFFFFF;
}

.asidewrapper {
	background-color: #F8F8F8;
	padding: 1px;
	padding-bottom: 50px;
	width: 100%;
	overflow: hidden;
}

aside {
	background-color: #FFFFFF;
	border: thin solid #ABABAB;
	margin: 5%;
	padding: 0px 5% 20px;
	box-shadow: 5px 5px 10px 0px rgba(0,0,0,.2);
}

aside p{
	font-size: .9em;
	line-height: 1.7em;
}

.rightAside { 
	opacity: 0;	
}

.asideRight {
	animation-name: floatInLeft;
  	animation-duration: 1s;
	position: relative;
}

@keyframes floatInLeft {
	0% {left: 100vw;}
	100% {left: 0px;}
}

.leftAside {
	opacity:0;
}

.asideLeft {
	animation-name: floatInRight;
  	animation-duration: 1s;
	position: relative;
}

@keyframes floatInRight {
	0% {right: 100vw;}
	100% {right: 0px;}
}

.lightbox {
/*	display: block;*/
  position: fixed;
  z-index: 10;
/*  padding-top: 100px;*/
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  
  background-color: rgba(0, 0, 0, 0.8);
	transition-duration: 0.4s;

}

#form {
	display: none;
}

.formcontent{
	position: relative;
	width: 100%;
	max-width: 500px;
	height: 80%;
	background-color: #F6E9D8;
	margin: 80px auto;
	opacity: 1;
	overflow: auto;
	border: solid thick #FF9C35;
	border-radius: 15px;
	padding: 0 25px;
}

.close {
	position:relative;
	top: 15px; 
	right: 35px;
	cursor: pointer;
	font-size: 3em;
	color: #FFFFFF;
	opacity: 1;
}

.close:hover {
	opacity: .9;
	color: inherit;
}

#number {
	display: block;
	text-align: center;
	margin: 20px auto;
	width: 80%;
	background-color: #FF0000;
	color: #FFFFFF;
	font-weight: bold;
	padding: 15px 5px;
	border-radius: 10px;
}

input, textarea {
	width: 100%;
}

textarea {
	height: 100px;
}

input[type="radio"]{
	width: auto;
}

label {
	padding-top: 10px;
	margin-bottom: 0px;
}

.fullWidth {
	width:100%;
}

footer {
	background-color: #000000;
	text-align: center;
	padding: 20px;
}

footer p{
	color: #B1B1B1;
	font-size: .75em;
}

@media screen and (min-width:576px){
	
	#barcontainer {
		padding-top: 20px;
		padding-bottom: 0px;
	}
	
	#logo {
	background-image: url("../images/maShadowSans.png");
	background-size:cover;
	display: inline-block;
	float: left;
	height: 150px;
	width: 250px;	
	transition-duration: 0.4s;
}
	#bar {
		margin:20px;
	}
	
	#titlewrapper {
		float: left;
	}
	
	#bar h1 {
		display: inline-block;
		font-size: 1.9em;
	}
	#bar hr {display: none;}
	#tagline {display: block;}
	
	
	.dropdown{ 
		display: none;
	}
	
	.dropdown-content{
		display: block;
		position:relative;
	}
	
	.dropdown-content a {
  		color: #FFFFFF;
  		padding: 12px 16px;
  		text-decoration: none;
  		display: inline-block;
}
	
	section{text-align: center;}
	section ul {
		display: inline-block; 
		text-align: left;
	}
	section a{display:block;}
	
	#about {
		text-align: left;
	}
	
	#audio {
	background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)) , url("../images/mixer.jpg") center center;
	background-size: cover;
/*	background-position:bottom;	*/
	
	font-weight: 400;
	}

	#video {
	background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)) , url("../images/speaker.jpg") center center;
	background-size: cover;
	background-position:bottom;
		
	font-weight: 400;
	}
	
	#web {
	background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)) , url("../images/webdesigner.jpg") center center;
	background-size: cover;
	background-position:bottom;	
	
	font-weight: 400;
	}
	
}

@media screen and (min-width:768px){
	
	
	section{
		display: inline-block;
		width: 100%;
		padding: 0;
		margin: -4px 0;
/*		border-bottom: thick solid red;*/
	}
	
	#about {
		padding: 5%;
		padding-top: 15px;
	}
	
	#audio{
		background: url("../images/mixer.jpg") center center;
		background-size: cover;
		
	}
	
	#video {
		background: url("../images/speaker.jpg");
		background-position: 0% 50%;
		
	}
	
	#vidover{
		background: url("../images/camera2.jpg");
		background-size: cover;
	}
	#web {
		background: url("../images/webdesigner.jpg") center center;
		background-size: cover;
	}
	
	.infocol {
		width: 50%;
		max-width: none;
		padding: 30px 5%;
	}
	.right {
		background-color: #575757;
		float:right;
		
	}
	.left {
		background-color: #FFFFFF;
		float:left;
	}
	
	.asidewrapper{
		display: flex;
/*		margin: 0 auto;*/
	}
	aside{
		width: 40%;
		padding: 0 2% 20px;
	}
}

@media screen and (min-width:1150px){
	
	#barcontainer {
		position:fixed;
		transition-duration: 0.4s;
		flex-direction:row;
	  justify-content:space-between;
		align-items:center;
	}
	
	.container{
		height: 500px;
		margin-top: 180px;
	}
	
	.dropdown-content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		float: right;
		width: 50%;
		line-height: 100px;
		text-align: left;
		background-color: transparent;
		transition-duration: 0.4s;
		
	}
	
	.dropdown-content a {
		color: #5E5E5E;
		font-weight: 500;
		padding: 5%;
	}
	
	.dropdown-content a:hover {
		color:#BF1012;
		text-decoration: underline;
		background-color: transparent;
	}
	
	#bar {
		display: inline-block;
		margin-right: 0;
	}
	
	.anchor {
	position: absolute;
	top: -95px;
}
	
	#about{
	max-width: 900px;
		margin: 0 auto;
		display:block;
}
	
	#video {
		background-position: 200px 50%;
	}
	
	#web{
		background-position: center center;
	}
	
}

@media screen and (min-width:1200px){
	#video {
		background-size:cover;
	}
}