@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)
} 

a {
	cursor: pointer;
}

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: rgba(0,0,0,1.00);
	border-bottom: thick solid red;
	position:relative;
	top: 0;
	z-index: 10;
	padding: 20px 0px 0px;
	
}

#bar {
	margin: 0 5%;
	line-height: 60px;
	display: relative;
}

#logo {

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


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

#tagline {
	text-align: center;
	font-size: 1.4em;
	color: #FFFFFF;
}

header {
	max-height: 700px;
	overflow:hidden;
}

header hr {
	margin-bottom: 0px;
}

/*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/webdesigner.jpg");
	background-size:cover;
	background-position: center;
}

.webnav a {
	text-align: center;
	display: block;
	width: 100%;
	color: #6CD1FF;
	font-size: 1.1em;
	line-height: 70px;
	margin: 0;
	padding: 0 10px;
}

.webnav a:hover {
	background-color: #575757;
	text-decoration: none;
}

/*dropdown copied from w3schools*/
.dropbtn {	
	display: block;
	margin: 0 auto;
	line-height: 10px;
  background-color: #000000;
  color: white;
  padding: 16px;
  font-size: 1.2rem;
	font-weight: lighter;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #575757;
}

.dropdown {
  position: relative;
  display: none;
/*	margin: 0 auto;*/
}

.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;
	display: inline;
}

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

.button {
	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;

}

.button:hover, .button: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%;

}


.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);
	transition-duration: .4s;
}

aside:hover {
	transform: scale(1.1);
}

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

/*FORM*/

#form {
	display: block;
}

.formcontent{
	position: relative;
	width: 100%;
	max-width: 700px;
	height: 80%;
	background-color: #EDEDED;
	margin: 80px auto;
	overflow: auto;
	border: solid #FF0000;
/*	border-radius: 15px;*/
	padding: 25px;
}

.close {
	display: none;
}

#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%;
}

/*Portfolio*/

#portfolio {
	margin: 75px 0;
}

#portfolio h1 {
	margin: 0 10%;
	font-size: 2em;
	padding-bottom: 40px;
	font-weight: lighter;
}

#portfolio p {
	margin: 0 10%;
	padding-bottom: 40px;
}


#gallery{
	display: flex;
	flex-wrap:wrap;
	justify-content:space-around;
	max-width: 1200px;
	margin: 0 auto;
}

figure {
	width: 30%;
	min-width: 200px;
	max-width: 300px;
	margin: 40px 10px;
	position: relative;
	transition-duration: .4s;
}

figure:hover {
	transform: scale(1.1);
	opacity: .8;
	cursor: pointer;
}

figure img{
	width: 100%;
	border: medium solid;
	box-shadow: 2px 2px 10px 0 rgba(0,0,0,.4);
}

figcaption {
	position: absolute;
	top: 40%;
	width: 100%;
	padding: 5% 0;
	text-align: center;
	font-size: 2em;
	font-weight: bold;
	font-variant: small-caps;
	background: rgba(255,255,255,0.50);
	color: #000000;
}


#cssNotice{
	display: block;
	width: 100%;
	position: fixed;
	bottom: -1;
	background-color:#FF492F;
	border: solid medium #B2B2B2;
	padding: 5px 50px;
	font-size: 130%;
	transition-duration: .8s;
}

#cssNotice h4{
	font-size: 5vmin;
	
}

#cssNotice a{
	color: #FFFFFF;
	display: block;
	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;
	}
	
	#bar {
		
	}
	
	#logo {
	background-image: url("../images/MA_Web_logo_two.png");
	background-size:cover;
	display: block;
	float: left;
	height: 150px;
	width: 250px;	
	transition-duration: 0.4s;
}
	
	#titlewrapper {
		line-height: 60px;
/*		display: table-cell;*/
		position: absolute;
		right: 10%;
		padding: 0px;
		height: 150px;
/*		vertical-align: middle;*/
	}
	
	.webnav{
		clear:both;
	}
	
	#bar h1 {
		display: inline-block;
		font-size: 1.9em;
	}
	#bar hr {display: none;}
	#tagline {display: block;}
	
	
	.dropdown{ 
		display: none;
	}
	
	.dropdown-content{
		display: none;
		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;
	}

	
	#about {
		text-align: left;
	}
	
	#one {
	background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)) , url("../images/web1.jpg") center center;
	background-size: cover;
/*	background-position:bottom;	*/
	
	font-weight: 400;
	}

	#two {
	background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)) , url("../images/web2.jpg") center center;
	background-size: cover;
	background-position:bottom;
		
	font-weight: 400;
	}
	
	#three {
	background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)) , url("../images/web3.jpg") center center;
	background-size: cover;
	background-position:bottom;	
	
	font-weight: 400;
	}
	
	
	.banner {
		height: 550px;
	}
}



@media screen and (min-width:740px){
	
	#bar {
		display:flex;
		justify-content:space-around;
		
	}
	
	#titlewrapper {
/*		display: inline-block;*/
		position: relative;
		right: auto;
	}
	
	.webnav {
	width: auto;
/*	margin: 0 auto;*/
		line-height: 150px;
/*		padding: 0 30px;*/
		box-sizing: border-box;
	}
	
	section{
		display: inline-block;
		width: 100%;
		padding: 0;
		margin: -4px 0;
/*		border-bottom: thick solid red;*/
	}
	
	#about {
		padding: 5%;
		padding-top: 15px;
	}
	
	#one{
		background: url("../images/web1.jpg");
		background-size:cover;
		background-position: -350px;
		
	}
	
	#two{
		background: url("../images/web2.jpg") center;
		background-size: cover;
		
	}
	
	#three{
		background: url("../images/web3.jpg") right;
		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:1060px){

	#titlewrapper{
		line-height: 150px;
	}
	
	#tagline {
		display: inline-block;
		padding-left: 50px;
	}
	
	.webnav {
		line-height:normal;
	}
	
	.webnav a {
		display: inline-block;
	}
	
	header {
		height: 100vh;
	}
	
	
	.anchor {
	position: absolute;
	top: -95px;
}
	
	#about{
	max-width: 900px;
		margin: 0 auto;
		display:block;
}
	
	#portfolio h1 {
		font-size: 2.8em;
	}
	
}

@media screen and (min-width:1200px){
	#three {
		background-size:auto;
		background-position: left;

	}
}