/* for MOBILE devices */
@media screen and (max-width: 520px) {  }

/* Responsive Images Rule */
img, embed, object, video {
	max-width: 100%;
}

/*
	LAYOUT BASICS
*/
.outerwrap {
	width: 100%;
	clear: both;
}

.innerwrap {
	width: 94%;
	max-width: 68.75em;  /* 1100px / 16px = 68.75 */ 
	margin: 0 auto;
}

@media screen and (max-width: 520px) { 
    .innerwrap {
        width: 85%;
    }
}

/* 
	TYPOGRAPHY BASICS 
*/
h1, h2, h3, h4, h5, p, li, a {
	font-family: 'Arvo', Verdana, Arial, serif;
}

h2 {
	font-size: 2em;
	margin: 2em 0 .35em 0;
	font-weight: 700;
}

h3 {
	font-weight: 700;
	font-size: 1.2em;
	text-transform: uppercase;
	margin-bottom: .3em;
}

h3.reversed {
	color: white;
	background-color: #053b79;
	padding: .2em;
}

h3 span {
	font-weight: 700;
}

h4 {
	font-weight: 700;
}

h5 {
	font-size: .8em;
	text-transform: uppercase;
	letter-spacing: .1em;
}

p {
	margin-bottom: 1em;
	line-height: 1.6em;
}

a, a:visited, a:active, a:hover {
	color: #053b79;
	text-decoration: none;
	border-bottom: 1px dotted #053b79;
}

a:hover {
	background-color: rgba(5, 59, 121, 0.12);
	border-bottom-style: solid;
}

/*
	HEADER AREA
*/
header {
	background-color: #053b79;
	border-bottom: 2px solid white;
}

header div {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 1.2em 0 0 0;
}

header h1 {
	color: white;
	font-size: 5em;
	border: 3px solid rgba(255, 255, 255, .7);
	border-radius: .8em;
	padding: .2em;
	margin-bottom: 1.2rem;
	transition: 4s all ease-out;
}

header h1:hover {
	transform: rotate(720deg);
}

/*
	NAVIGATION AREA
*/
header nav {
	align-self: flex-end;
	margin-bottom: 1.2rem;
}

header nav ul#mobile {
	display: none;
}

header nav ul#primary {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
}

header nav ul li a {
	text-transform: uppercase;
	font-size: 1.1em;
	text-decoration: none;
	display: block;
	background-color: rgba(0, 0, 0, .2);
	color: white;
	padding: .75em 1em;
	transition: .3s all ease;
	letter-spacing: .06em;
}

header nav ul li a:hover {
	color: white;
	background-color: rgba(255, 255, 255, 0.4);
	transform: translateY(-.3em);
	box-shadow: 0 3px 3px rgba(0,0,0, .6);
}

/*
	HERO AREA

	For responsive Hero image area height, simply change the height property at one (or more)
	different break points, reducing it as needed.

*/
div.hero {
	height: 25em;

	background: rgba(5, 59, 121, 0.54) url('../art/hero_image.jpg') center center no-repeat;
	background-size: cover;

	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: flex-end;

	transition: .3s all ease-out;
}

@media screen and (max-width: 520px) { 
    div.hero {
        height: 12em;
    }
}

div.hero .innerwrap {
	text-align: right;
	padding-bottom: 2.8em;
}

div.hero .innerwrap h2 {
	font-size: 3em;
	padding-left: 45%;
}

@media screen and (max-width: 520px) { 
    div.hero .innerwrap h2 {
        margin: 0;
        text-align: center;
        padding-left: 0;
    }
}

/*
	ARTICLE AREA
	"Form Follows Function"
*/
article.twocolumns {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

@media screen and (max-width: 520px) {
    article.twocolumns {
        flex-direction: column;
        flex-wrap: wrap;
        text-align: center;
    }   
}

article.twocolumns img {
	border-radius: .75em;
}



article.right {
	flex-direction: row-reverse;
}

article.twocolumns div {
	padding: 3em 1em; 
}

@media screen and (max-width: 520px) {
    article.twocolumns div {
        padding: 1.5em 0;        
    }  
    article.twocolumns p {
        text-align: left;
        font-size: 1.2em;
    }
    article.twocolumns h3 {
        padding-bottom: 1em;
        font-size: 1.5em;
    }
    article.twocolumns h4 {
        padding-bottom: 1em;
        font-size: 1.2em;
    }
}

article.twocolumns > div {   /* Selects the FIRST <div> after the <article> element */
	flex: 1 0 24em;
	align-self: flex-start;
}

article.twocolumns div + div {   /* Selects the SECOND <div> after the <article> element */
	flex: 1 1 auto;
}

/*
	THREE-COLUMN AREA
	"Three Steps to Semantic Code"
*/
.designtrio {
	background-color: #d8e5f3;
	padding: 4em 0;
}

.designtrio div h2 {
	margin-top: 0;
	margin-bottom: 1em;
	text-align: center;
	font-weight: 700;
}

.designtrio div h3 {
	color: #053b79;
}

.designtrio div h3 span {
	color: black;
}

section.threecolumns {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}

@media screen and (max-width: 520px) {
    section.threecolumns {
        flex-direction: column-reverse;
        text-align: center;
    }
    div.designtrio h2{
        line-height: 1.2em;
    }
}

section.threecolumns div {
	flex: 0 0 31%;
	padding: 0 1.5em; 
}

section.threecolumns div img {
	opacity: .75;
	border-radius: 50%;
	width: 75%;
	margin: 0 auto 1em auto; 
}

@media screen and (max-width: 520px) {
    section.threecolumns div {
        padding-bottom: 1.5em;
    }
}

/*
	FIVE-COLUMN AREA
	"The Patron Saints of Web Design"
*/
section.fivecolumns {
	display: flex;
	flex-wrap: wrap;
}

section.fivecolumns div {
	flex: 0 0 20%;	
	text-align: center;
	padding: 2em 0;
}
@media screen and (max-width: 520px) {
    section.fivecolumns div {
        flex: 0 0 30%;
    }
    h2 {
        text-align: center;
    }
}

section.fivecolumns div img {
	width: 70%;
}

/*
	FOOTER AREA
*/
footer {
	background-color: rgba(5, 59, 121, 0.15);
	padding: 2.5em 0 22em 0;
	margin-top: 3em;
}

footer div p a {
	color: black;
}