/*
CIS 212 PROJECT ONE - JESUS MARTELL 2016
*/

* {
	box-sizing: border-box;
}

html {
font-family: "Helvetica", sans-serif;
}

body {
margin: 0px;
padding: 0px;
border:0px;

}

a {
	margin:0;
	padding:0;
}

ul {
list-style-type: none;
}

table {
width:310px;
}

.center {
	margin: 0 auto;

}

.heading {
width:100%;
background-color: black;
color:white;
padding:0px;
margin:0px;
text-align:center;
}

.flexbox {
display: -webkit -flex;
display: flex;
width:;
max-width: 960px;
height: ;
background-color:;
justify-content:center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 auto;
padding: 0 10px 0 10px;
}

.flexitem {
background-color:;
width: 310px;
height: 370px;
margin: 3px;
padding: 0px;
text-align: left;
}

header {
	max-width: 960px;
	height:450px;
	background: ;     
    text-align: center;
    background: url('images/header.jpg');
    margin: 0 auto;
    padding:0;
}

.top {
	max-width: 960px;
	background: ;     
    text-align: center;
    background:;
    margin: 0 auto;
    padding:0px;

}

nav {
	background: black;
}

nav a:link {
	color:white;
	display: inline-block;
	padding:10px;
	margin:0px;
	border:0px;
	background: black;
	text-decoration: none;
}

nav a:visited {
	color:#cccccc;
}

nav a:hover {
	background: #222222;
	position:relative;
	top:3px;
	font-weight:bold;
}

.imagebox {
	width:310px;
	height:220px;
	background-color:#333;
	
}

img.fit{
	width:100%;
	height:100%;
}

article {
	max-width:375px;
	margin:0;
	padding:0;
}

figure {
	max-width: 375px;
	margin:0;
	padding:0 0 0 0;
}

figcaption {
	margin:10px 0 0 0;
}
form {
   margin:0;
   padding:0;
   border:0px solid black;
   background: ;

}
/*so long to this cold, cold part of the world
  so long to this lonelyish part of the world*/
fieldset {
   margin:0 0 10px 0;
}
fieldset.submitbutton {
	border:0px;
	margin: 0 0 15px 0;
}

legend {
   margin: 0 0 0.5em -.5em;
   font-size: 1.1em;
   font-weight: bold;
}
.submitbutton {
   margin-bottom: 0px;
}
/*field styles */
input {
   border: 1px solid #777;
   margin:0 0 0 30px;
   padding:.1em;
   font-size: 1em;
}
button {
	margin:0 0 20px 0; 
}

#nameinput, #emailinput, #addressinput {
   width:14em;
}
#phoneinput {
   width:7.5em;
}
#notes {
   display:block;
}

label {
   font-size: 1em;
}
.contactinfo label {
   margin: 0 0 15px 0;
   display:block;
   }

.overlay{
	display:none;
    opacity:0.8;
    background-color:#000;
    background: -webkit-linear-gradient(rgba(0,0,0,1) 50%,rgba(0,0,0,0));
    background: -o-linear-gradient(rgba(0,0,0,1) 50%,rgba(0,0,0,0));
    background: -moz-linear-gradient(rgba(0,0,0,1) 50%,rgba(0,0,0,0));
    background: linear-gradient(rgba(0,0,0,1) 50%,rgba(0,0,0,0));
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:10;
}
#messagebutton {
	margin:;
	position:absolute;
	bottom:20px;
	left:25%;
	display:block;
}
div.messagebox {
	display:none;
	padding:30px;
	border:5px solid #aaa;
    opacity:;
    text-align:center;
    background-color:#ccc;
    position:fixed;
    width:200px;
    height:200px;
    top: 25%;

  	/*transform: translateY(-50%);*/
   	left: 50%;
  	transform: translateX(-50%);
    z-index:11;
    margin: 0 auto;
    }

@media screen and (min-width: 700px) and (max-width: 799px){
	.flexbox {
		justify-content:left;

	}
	article {
		font-size:0.8em;
		line-height:1.6em;
		max-width:300px;
	}
	figure {
		font-size:0.8em;
		line-height:1.6em;
		max-width:300px;
		padding:20px 0 0 15px;
	}
}
@media screen and (min-width: 800px){
	figure {
		font-size:1em;
		line-height:;
		max-width:;
		padding:20px 0 0 15px;
	}
}
@media screen and (min-width: 960px){
	.flexbox {
		justify-content:left;
		padding:0;
		margin:0 auto;

	}
	article {
		max-width: 550px;
		margin:0 0 0 0;
		padding:0;
	}

	figure {
		font-size:;
		line-height:;
		max-width:;
		padding:20px 0 0 70px;
	}
}