@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Slabo+27px);

*{
	font-family: inherit;
	color:inherit;
	font-size:inherit;
	box-sizing: border-box;
	line-height:inherit;
}

body{
	background-color: #eeeeee;
	color: #222222;
	background: url('../img/tile-brown.png') repeat center center fixed; 
	background-size: 96px;
	background-color: #FFB200;

	line-height: 1.6;
	font-size:100%;
/*	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;*/
	height:100%;
	width: 100%;
}

html{
	height: 100%;
	width: 100%;
}

a{
	text-decoration: none;
	color:#FFB200;
	transition: .15s all linear;
}

a:hover{
	color:#BC8000;
	border-color: #BC8000;
}

body, html{
	font-family: 'Merriweather', serif;
	font-size:16px;
	line-height: 1.6;
}

img{
	max-width: 100%;
}

h1, h2, h3, h4, h5, h6{
    font-weight: 700;
    letter-spacing: -.035em;
}

h1{
    font-size: 2em;
}

h2{
	font-size: 1.35em;
}

h3{
	font-size: 1.2em;
	font-weight: 400;
}

p{
	font-size: .85em;
}

img.logo{
	max-width: 20em;
	margin: 8em 0 8em 0;
}

.fullheight{
	min-height: 100%;
	height:100%;
}

.flex_center{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
}

.flex_column{
	flex-direction: column;
}

.textwrapper{
	max-width:50em;
	width:100%;
	padding:6em;
}

.contact{
	margin-top: 3em;
	color:#888888;
}

.contact a{
	color:#777777;
	border-bottom: 0;
	text-decoration: underline;
}

.contact a:hover{
	color:#333333;
}

.screenshot{
	box-shadow:0px 2px 8px 2px rgba(0,0,0,0.1);
	box-sizing: border-box;
	width:45%;
	margin:10px;
	display: inline-block;
	border-bottom: 2px solid #ffb200;
	transition: .15s all linear;
}

.screenshot:hover{
	color:#BC8000;
	border-color: #BC8000;
}

.half{
	width:50%;
}

.creambg{
	background-color: #F2D28D;
}

.yellowbg{
	background-color: #FFB200;
}

.lightbrownbg{
	background-color: #BC8000
}

.brownbg{
	background-color: #503600;
}

.whitebg{
	background-color:#eeeeee;
	color:#111111;
}

i.fa{
	margin-left: -1.7em;
	margin-right: .4em;
}

.initial{
	height:1.2em;
	vertical-align: middle;
	margin-left: -1.5em;
	margin-right: .2em;
}

@media screen and (max-width: 850px){
	.fullheight{
		height:auto;
	}

	.main_wrapper{
		flex-direction: column;
	}

	.half{
		width: 100%;
	}


}

@media screen and (max-width: 700px){
	.screenshot{
		width:100%;
	}

}

@media screen and (max-width: 500px){
	.textwrapper{
		padding:4em;
	}
}