@-ms-viewport{
  width: device-width;
}

@font-face {
    font-family: 'signata';
    src: url('../fonts/signatabq-light-webfont.eot');
    src: url('../fonts/signatabq-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/signatabq-light-webfont.woff2') format('woff2'),
         url('../fonts/signatabq-light-webfont.woff') format('woff'),
         url('../fonts/signatabq-light-webfont.ttf') format('truetype'),
         url('../fonts/signatabq-light-webfont.svg#signata_bqregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
	font-family: 'signata', san-serif !important;
	margin:0;
}

p {
	font-weight: 300;
}
h1, h2, h3, h4, footer p{
}

#wrapperOuter {
	margin: 0 auto;
	text-align: center;
	max-width: 1600px;
}
#wrapper {
	width: 95%;
	margin: auto;
	text-align: center;
	max-width: 650px;
}
/*pages with nav menu*/

a {
	outline: none;
}
/*override bootstrap*/
a:focus {
	outline: none !important;
}
img {
	border: none;
}
.topImage {
	margin-top: 1em;
}
p, h2 {
	text-align:left;}
p {
	font-size: x-large;
	padding-bottom: 1em;
	line-height: 1.5em;
}
.absolute-center {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
}
.horizontal-center {
	position: absolute;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, 0);
}
.caption {
	text-align:center;
	font-size: 1.2em;
	width: 80%;
	margin: .2em auto;
}
.centered {
	text-align:center;
}
.image {
	max-width: 95%;
	height: auto;
}
footer p, footer a {
	color:gray;
	font-size: .8em;
	margin:0;
}
/*images page footer*/
.footer2 {
	clear:both;
	margin-left:5%;
	padding-left: 15px;
}

/*CONTACT PAGE*/
	.red {
		color:red;
	}
	.pink {
		background-color: pink;
	}
	#myContactForm .input {
		width: 95%;
		max-width: 500px;
		margin:.5em auto;
		text-align: left;
	}
	#myContactForm input, #myContactForm textarea, #myContactForm select, #myContactForm button {
		font-weight:normal;
		font-size: 1.3em;
		width : 100%;
		margin: 0;
		padding: 1em;
		background-color: #E7E7E7;
		border-radius: 4px 4px 4px 4px;
		-webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
		-moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
		box-sizing: border-box;
	}
	#myContactForm label {
		font-weight:normal;
		font-size: 1.3em;
	}
	#myContactForm p {text-align:center;}
	
	
/* i wanted text to be less wide on landscape devices*/
@media screen and (orientation:landscape){
	#wrapper {
		width: 75%;
	}
	/*.bio_img {
		max-width: 75%;
	}*/
}

/*I decided by eye to max out text width at 650px. i figured out the number 684 this way: 95% of 684 is 650. so now text width will not jump when page is shrunk below 684.
@media screen and (min-width:684px){
	#wrapperDiv {
		width: 650px;
	}
}*/
/*
@media screen and (orientation:portrait) and (min-width:684px){
	#wrapperDiv {
		width: 95%;
		max-width: 650px;
	}
	.bio_img {
		max-width: 95%;
	}

}
@media screen and (orientation:portrait) and (max-width:684px){
	#wrapperDiv {
		width: 95%;
	}
}


@media screen and (orientation:landscape) and (max-width:684px){
	#wrapperDiv {
		width: 95%;
	}
}*/
