@charset "iso-8859-1";
/* CSS Document */

/* ==================================================================================================================== FONTS === */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
@import url(http://fonts.googleapis.com/css?family=Courgette);
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);
@import "fonts/font-awesome.css";

/* ==================================================================================================================== TRANSITIONS === */
a,
button,
input:focus,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus,
.button,
ul.features li a img,
ul.features li a h2{
	-webkit-transition:all 0.4s ease-in-out;
	-moz-transition:all 0.4s ease-in-out;
	-ms-transition:all 0.4s ease-in-out;
	-o-transition:all 0.4s ease-in-out;
	transition:all 0.4s ease-in-out;}
	
@-webkit-viewport{ width:device-width;}
@-moz-viewport{ width:device-width;}
@-ms-viewport{ width:device-width;}
@-o-viewport{ width:device-width;}
@viewport{ width:device-width;}
	
	
/* ==================================================================================================================== COLORS === */

	

/* ==================================================================================================================== HEADER/TOPBAR === */
header{
	position:relative; z-index:1000;}
	
.logo{
	width:100px;
	margin-left:5px;
	margin-top:0.5rem;}
	
header h2{
	font-size:1.23rem; font-weight:300; color:rgba(255,255,255,1);}
	
header h2.pos{
	position:absolute; bottom:0.75rem; left:0; right:0; text-align:center; margin:0 0 0 18rem;}

header h2 a{
	color:#fffe7d;}

header h2 a:hover{
	color:silver;}
	
@media only screen and (min-width: 64.065em){
	.top-bar{
		height:6rem;
		padding-top:0rem;
		position:relative;}
		
	.logo{
		width:240px;
		margin-top:0.5rem;}	
}


/* ==================================================================================================================== CONTENT AREA === */
.contentarea{
	background:rgba(255,255,255,1); margin-top:-0.5rem; padding-top:1rem; padding-bottom:1rem;}
	
/* headings & paragraphs */
h1{
	font-family:'Roboto Slab', serif; margin:0; padding:0; color:#af3937; text-align:left; font-weight:400; font-size:2rem;}
	
p.written{
	font-family:'Courgette', cursive; color:#db2b28; font-size:1.34rem;}
	
h3{
	text-align:center; color:rgba(0,0,0,0.15);}
	
h3::before{
	content:"";
	float:left;
	width:45%;
	margin:25px 8px auto 0;
	background:rgba(0,0,0,0.15);
	height:6px;}
	
h3::after{
	content:"";
	float:right;
	width:45%;
	margin:25px 0 auto 8px;
	background:rgba(0,0,0,0.15);
	height:6px;}
	
h4{
	font-family:'Roboto Slab', serif; margin:auto auto 0.7rem; color:#af3937; text-align:left; font-weight:400; font-size:1.33rem;}
	
/* lists, redkeyhole */
ul.redkeyhole{
	margin:0; padding:0; list-style:none;}
	
.redkeyhole li{
	list-style:none; background:url(../images/redkeyhole.png) 0 6px no-repeat; padding-left:13px; margin:0 auto 12px;}
	
/* widths, divides, spacing */
.large-8-width{
	width:66.66667%;}
	
.line6px{
	width:auto; height:6px; background:rgba(0,0,0,0.15); margin:0.33rem auto;}
	
.pb{
	width:100%;}
	
	
/* ==================================================================================================================== BLOCKS === */
ul.features{
	margin-top:1rem;}

ul.features li a img{
	width:100%;}
	
ul.features li a:hover img{
	opacity:0.7;}
	
ul.features li a h2{
	background:#b2b2b2; color:rgba(255,255,255,1); text-align:center; text-transform:uppercase; font-size:1.5rem; padding:0.33rem 0; margin:0; border-radius:0 0 1.23rem 1.23rem;}
	
ul.features li a:hover h2{
	color:#f2df64; background:#af3937;}
	
	
/* ==================================================================================================================== FOOTER === */
footer{
	padding:2rem 0 0; text-align:center; color:rgba(255,255,255,1); background:rgba(0,0,0,1);}
	
footer h2{
	font-size:2rem; margin:0 auto;}
	
footer ul.footnav{
	border-bottom:2px solid rgba(255,255,255,0.08);}
	
footer ul.footnav,
footer ul.other{
	margin:0 auto 1rem; padding:0 0 1rem; list-style:none;}
	
footer ul.footnav li,
footer ul.other li{
	display:inline-block; margin:0 5px; font-size:1.1rem;}
	
footer ul.footnav li{
	text-transform:uppercase;}
	
footer ul.other li.pipe{
	margin:0;}
	
footer a, footer a.visited{
	color:rgba(255,255,255,1); text-decoration:none;}
	
footer a:hover, footer a.active{
	color:#fffe7d;}


/* ==================================================================================================================== MQ === */	
/* +++++++++++++++++++++++++++++++++++++++++++++++ Small Screens +++++++++++++++++++++++ */
@media only screen {
    /*body{
		background:DarkCyan;}*/
			
} /* Define mobile styles */

@media only screen and (max-width: 40em) {
    /*body{
		background:YellowGreen;}*/
		
	/* header */
	header h2.pos{
		background:#af3937; position:relative; top:0; left:0; right:0; text-align:center; margin-left:0; padding:0.65rem 0.33rem; font-size:1rem; font-weight:400;}
		
	/* CONTENT AREA */
	.contentarea .large-8-width{
		width:100%;}
		
	/* FEATURE BLOCKS */
	ul.features li a h2{
		font-size:1.2rem;}
			
} /* max-width 640px, mobile-only styles, use when QAing mobile issues */

@media only screen and (max-width: 40em) and (orientation: portrait) {
    /*body{
		background:DarkSlateBlue;}*/
		
	/* CONTENT AREA */
	h1{
		font-size:1.7rem;}
		
	p.written{
		font-size:1.15rem;}
		
	h3::before,
	h3::after{
		width:39%;}
		
	/* FOOTER */
	footer h2{
		font-size:1.7rem;}
		
	footer ul.footnav li,
	footer ul.other li{
		display:block; margin:5px auto;}
	
	footer ul.other li.pipe{
		display:none;}
				
} /* orientation: portrait | max-width 640px, mobile-only styles, use when QAing mobile issues */

@media only screen and (max-width: 40em) and (orientation: landscape) {
    /*body{
		background:ForestGreen;}*/
		
	/* CONTENT AREA */
	h3::before,
	h3::after{
		width:44%;}
		
	/* FOOTER */	
	footer ul.other li.pipe:nth-child(4){
		display:none;}
				
} /* orientation: landscape | max-width 640px, mobile-only styles, use when QAing mobile issues */

/* +++++++++++++++++++++++++++++++++++++++++++++++ Medium Screens +++++++++++++++++++++++ */
@media only screen and (min-width: 40.063em) {
    /*body{
		background:RosyBrown;}*/
		
} /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
	/*body{
		background:Pink;}*/ /* my screen size 2 (FF) */
		
	/* header */
	header h2.pos{
		background:#af3937; position:relative; top:0; left:0; right:0; text-align:center; margin-left:0; padding:0.33rem;}
		
	/* CONTENT AREA */
	.contentarea .large-8-width{
		width:100%;}
		
	h1{
		font-size:1.7rem;}
		
	p.written{
		font-size:1.15rem;}
				
} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

/* +++++++++++++++++++++++++++++++++++++++++++++++ Large Screens +++++++++++++++++++++++ */
@media only screen and (min-width: 64.063em) {
    /*body{
		background:Azure;}*/
		
} /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) {
    /*body{
		background:LightGrey;}*/ /* my screen size 2 (IE) */
		
	/* CONTENT AREA */
	.contentarea .large-8-width{
		width:85%;}
		
	p.written{
		font-size:1.2rem;}
			
} /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

/* +++++++++++++++++++++++++++++++++++++++++++++++ XLarge Screens +++++++++++++++++++++++ */
@media only screen and (min-width: 90.063em) {
    /*body{
		background:LavenderBlush;}*/
			
} /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) {
    /*body{
		background:SlateGrey;}*/ /* my screen size 1 */
		
	/* CONTENT AREA */
	p,
	ul.redkeyhole li{
		font-size:1.1rem;}
		
} /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */


/* +++++++++++++++++++++++++++++++++++++++++++++++ XXLarge Screens +++++++++++++++++++++++ */
@media only screen and (min-width: 120.063em) {
    /*body{
		background:IndianRed;}*/
		
} /* min-width 1921px, xxlarge screens */


/* +++++++++++++++++++++++++++++++++++++++++++++++ Laptops & Smaller Resolutions +++++++++++++++++++++++ */
/* Non-Retina Screens */
@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
	/*body{
		background:DarkTurquoise;}*/ /* my screen size 2 (GC) */
		
	/* CONTENT AREA */
	.contentarea .large-8-width{
		width:85%;}
		
	p.written{
		font-size:1.2rem;}
}

/* Retina Screens */
@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {
	/*body{
		background:MidnightBlue;}*/ /* my screen size 2 (GC) */
		
	/* CONTENT AREA */
	.contentarea .large-8-width{
		width:85%;}
		
	p.written{
		font-size:1.2rem;}
}


/* +++++++++++++++++++++++++++++++++++++++++++++++ TABLETS +++++++++++++++++++++++ */
/* Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
	/*body{
		background:Thistle;}*/
		
	/* CONTENT AREA */
	h1{
		font-size:1.4rem;}
		
	p.written{
		font-size:1.2rem;}
		
	h3::before,
	h3::after{
		width:44%;}
		
	/* FEATURE BLOCKS */
	ul.features li a h2{
		font-size:1.25rem;}
}

/* Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
	/*body{
		background:LawnGreen;}	*/	
}


/* +++++++++++++++++++++++++++++++++++++++++++++++ FIREFOX +++++++++++++++++++++++ */
@-moz-document url-prefix() {

}