/*  
Theme Name: Raven Gildea
Description: Raven's 2015 responsive portfolio. 
Version: 1.0
Author: Raven Gildea
Author URI: http://ravengildea.com/
*/

/*
COLOR CODES:

#758899;	med blue gray 

#4E5B66;	darker blue gray

#33404C;	dark gray

#1E262D;	nearly black

#AFCCE5;	pale blue

#26D8F6;	bright turquoise

*/

/*
MODULAR SCALE

http://www.modularscale.com/?16,22&px&1.618&web&text

*/


/* RESETS */
body, body * {
	margin: 0; 
	padding: 0; 
	box-sizing: border-box;	/* declared width = rendered width */
}
a img {
	border: none;
}

a {
	text-decoration: none;
}

/* RESPONSIVE */

/* will not validate --------- */
html { 
	-webkit-text-size-adjust: none; 	/* don't resize body copy on iPhone */
}

@-ms-viewport,		/* IE10 */
@viewport	{		/* future browsers */
    width: extend-to-zoom;
    zoom: 1.0;
}
/* --------- end will not validate */

/* SCALABLE IMAGES */
img, 
embed, 
object, 
video, 
iframe, 
.wp-caption { 	
	max-width: 100%;		
	width: auto;
	height: auto;
}

/* GLOBAL TEXT STYLES   ------------------------------------------------ */

html {
	font-size: 16px;
}

body {
	font-family: 'Quicksand', Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 140%;
	line-height: 1.6;
	color: #33404C;	/*dark gray*/
	font-kerning: normal;
}


strong, dt { 
	font-family: 'Quicksand', Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-weight: 700;
}

h1 {
	font-size: 2.5em;
	font-family: 'Playfair Display', Georgia, "Times New Roman", serif;		
}

h2 {
	font-size: 2.125em;	
	line-height: 1.2;
	margin-bottom: .25em;
}

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

a:link, 
a:visited {
	color: #888;
	}
		
a:hover, 
a:focus {
	color: #758899;	/*med blue gray*/
	}
		
p, ol, ul, dl {
	margin: 0 0 .75em 0;	
}

ul, dd {
	margin-left: 1.25em;	
}

ol {
	margin-left: 1.75em;	
}

li, dd {
	margin-bottom: 0.3125em;
	line-height: 1.4;	
}

blockquote {
	font-family: Georgia, Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 1.375em;
	line-height: 1.382;
}

.attrib {
	
}

/* LAYOUT   ------------------------------------------------ */

.wrapper {
	width: 96%;			/* match #nav-main ul */
	max-width: 1050px;
	max-width: 65.625rem;
	margin: 0 auto 1.875rem; 		/* 30 / 16 */
}

.container {				
	clear: both;
	overflow: hidden;	
}


/*	COLUMNS IN CONTAINERS */

.six-12 {
	width: 510px;
	width:	48.5714285714%;
	float: left;
	margin-right: 2.8571428571%;
}

.four-8 {
	width: 330px;
	width: 47.8260869565%;
	float: left;
	margin-right: 4.3478260870%;
}

/* 	MISC STYLES */
	
.last {
	margin-right: 0;
}

.center {
	margin: auto;	
}

.left {	
	float: left;
}
	
.right { 	
	float: right;
}

.clear {
	clear:both;
}

.border {
	border: 1px solid #CCC;	
}

/* Back to top link accessibility */

.up {
	position: relative; /* set positioning context for nested hidden text */
}

.hidden {		/* hide from view, but not from screen readers */
    position: absolute; 
    left: 999em;	/* disappears off the right edge of the screen. (negative value sends it left instead.) */
}

.up .hidden { /* in case hidden link text ever displays, it looks good */
	font-size: .3em;
    margin-top: 4.5em;
}
		

/* HEADER   ------------------------------------------------ */

#header {
	overflow: hidden; 
	display: none;  
}

#tagline {
	font-style: italic;
	font-size: 1.1875em;	/* 19px */
	color: #444;
	float: left;
	width: 50%;
}

/* SECTIONS  ------------------------------------------------ */

#hello {
	background-color: #33404C;	/* dark gray */	
	padding: 2em 20px;
	padding: 2em 1.25rem;
	color: #AFCCE5;	/* pale blue */
	text-align: center;
}

#hello h2 {
	color: #FFF;	
	margin-bottom: .6em;
}

h2 span {
	padding-left: 2em;
	letter-spacing: 3px;	
}

#hello h2 b {
	font-family: 'Playfair Display', Georgia, "Times New Roman", serif;	
	font-weight: 900;
	font-size: 3em;
	line-height: .3;
	margin: 1em 0;	
	color: #26D8F6;	/* bright turquoise */	
}


#hello h3 {
	font-size: 1.5em;	
}

#hello span {
	white-space: nowrap; 	
}

#hello p em,
#cherry p em,
#contact p em {
	font-family: Georgia, "Times New Roman", serif;	
	font-style: italic;
	font-size: 1.618em;
	color: #FFF;
	
	line-height: 1.2;
	display: block;
	margin-top: .5em;	
}

#cherry {
	background-image: url(images/cherry-blossoms-60-cropped.jpg);
	clear: both;
	background-size: 100%;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center top;
		background-color: rgba(117, 136, 153, .25);
		background-blend-mode: color;
  	
	height: auto;
	padding: 3em 1.25rem;
	padding: 7% 1.25rem 7%;
 }
 
 #cherry div {
	padding: 2em 1.618em 1.375em; 
	background-color: rgba(250, 250, 250, .8);
		background-color: rgba(117, 136, 153, .6);
		color: #FFF;
	border-radius: 25px;
	margin-bottom:	0;
	font-weight: 400; 
	text-align: center;
 }
	
	
#about {
	background-color: rgba(174, 204, 228, .2);		/* very very pale blue */	
	background-color: #FFF;	
	padding: 2em 20px;
	padding: 2em 1.25rem .2em;
}

#about .wrapper {
	max-width: 690px;	
}

#about h1 {
	font-size: 3.6em;
}


/* PORTFOLIO ----------------------------------- */

#portfolio .up,
#print up {
	padding-bottom: 40px;	
}

#portfolio h2 {
	font-family: 'Playfair Display', Georgia, "Times New Roman", serif;
	font-size: 2.5em;
	font-weight: 700;
	padding: 1em 0 .75em;
	text-align: center;	
}

#portfolio .wrapper {
	margin-bottom: 5em;	
}



#print {
	background-color: #BBB;
}

#print .six-12 img {
	display: block;
	margin: auto;
}

/* CONTACT ----------------------------------- */

#contact {
	background-color: #33404C;	/* dark gray */	
	padding: 2em 20px;
	padding: 2em 1.25rem;
	color: #AFCCE5;	/* pale blue */
	
	text-align: center;
}

#contact .wrapper {
	max-width: 510px;	
}


#contact h2 {
	font-size: 2.5em;
	font-family: 'Playfair Display', Georgia, "Times New Roman", serif;	
	font-weight: 700;
	color: #FFF;	
	text-align: center;	
}

#contact h2+p {
	text-align: center;	
}


/* THANKS and NO THANKS PAGES ----------------------------------- */

#contact .thanks h2+p {
	text-align: left;	
}

#contact .thanks h2+p:first-of-type,
#contact div.thanks > p:first-of-type {
	border-top: 1px solid #758899;	/* med blue gray */ 	
	padding-top: 1em;
}





/* NAV STYLES */


/* MAIN NAV */

#nav-main {
	overflow: hidden;
	font-weight: 400;
	background-color: #1E262D;	/* nearly black */
}

#nav-main ul {
	text-align: center;
	margin: 0;			/* reset global ul margins */
}

#nav-main li {
	float: left;
	width: 17%;
	list-style-type: none;
	margin: 0;			/* reset global li margins */
}

#nav-main li.wide {
	width: 23%;
}

#nav-main a {
	color: #AFCCE5;
	display: block;
	text-decoration: none;
	border-right: 1px solid #AFCCE5; 	
	padding: .2em 0.9375em;
	font-size: 0.85em;
}

#nav-main a:hover, 
#nav-main a:focus, 
#nav-main a.current_page {
	color: #FFF;		
}

#nav-main li.last a {
	border-right: none;
	padding-right: 0;
}


/* 	TOGGLE MOBILE NAV */

#nav-mobile {
	display: none;			/* not visible on wider screens */
	font-size: .85em;
	overflow: hidden;
	font-weight: 400;
	background-color: #1E262D;	/* nearly black */
}

#nav-mobile a {
	color: #AFCCE5;
	text-decoration: none;
}
#nav-toggle a:hover,
#nav-toggle a:focus {
	color: #FFF;		
}

#nav-mobile ul {
	display: none;			/* nav list is closed on page load */
	list-style-type: none;
	margin: 40px 0 0 0;
	padding: 0;
	border-bottom: 1px solid #AFCCE5;	
}

#nav-mobile li {
	margin: 0;
}

#nav-toggle a {
	display: block;
	padding: 6px 10px;
	padding: 0.375em 0.85rem; 	
	font-size: 1.1em;
	border-top: 1px solid #AFCCE5;	
}

#toggle-icon {
	display: block;
	width: 240px;
	padding: 0 0.850rem 0 0;
	float: right;
	text-align: right;
	font-size: 1.25em;
}

/* GO TO TOP STYLES */

.up {
	float: right;
	width: 50px;
	text-align: right;
	padding-right: 2em;
	margin-bottom: 0;
	font-size: 2.5em;
	color: #758899;	/* med blue gray */ 
	line-height: 0;
}

#about .up {
	margin-top: -90px;	
}

#portfolio .up {
	margin-top: -56px;	
}

.up a:link,
.up a:visited {
	color: #758899;	/* med blue gray */ 
}

.up a:hover,
.up a:focus {
	color: #4E5B66;	/* darker blue gray */
}



/* FORM STYLES */

form#contactForm {
	padding: 1.25em;
	border: 1px solid #758899;	/* med blue gray */ 
	text-align: left;
	padding: 1.25em 1.25em .5em;
	margin-top: 1em;	
}

label {
	font-size: .9em;	
	display: block;
}

textarea, input, select {
	margin-bottom: .5em;
}
	
textarea,
input[type="text"],
input[type="email"] {	
	width: 100%;
	font-size: 1em;
	padding: 4px;
	font-family: 'Quicksand', Helvetica, Arial, sans-serif;
}

.submit {
	font-size: 1em;
}

.turing {			/* honeypot field on secure-contact-form.php */
	display: none;	
}

.error {
	font-weight:bold; 
	margin: 5px 0;
	color: #FFF;
}





/*  ---------------  MEDIA QUERIES  ---------------  */		

		
@media (max-width: 850px) {

	
#portfolio .wrapper {
    margin-bottom: 0;
}	
	
.six-12,
.six-12.last,
.six-12.right {
	width: 95%;
	float: none;	
	margin: 0 auto 4em;
}


	
}


@media (max-width: 730px) {
	

#nav-main li{
	width: 14%;
}

#nav-main li.wide {
	width: 27%;
}


.up {
	clear: both;
    width: 100%;
    padding-right: 1.7rem;
}

#about .up {
	margin: -.385em 0 .385em;
}

}
	
@media (max-width: 630px) {
	
#nav-main {	
	display: none;
}

#nav-mobile {
	display: block;
}

#social {
	float:none;
	margin: 0;
}

#header h1 {
	float: none;
	margin: 20px 0;
}

}
	
@media (max-width: 470px) {
	
body {
	font-size: 130%;	
	line-height: 1.5;
}
	
#hello h2 {
	font-size: 1.75em;	
}

#hello h2 span {
	font-size: .95em;	
	padding-left: 2.3em;
}

#hello span {
    white-space: normal;
}

.four-8 {
    width: 70%;
    float: none;
    margin: auto;
}

.four-8.right {
    width: 90%;
    float: none;
    margin: auto;
}

.four-8 h2 {
	text-align: center;	
}
	
}

@media (max-width: 400px) {
form#contactForm {
	border: 0;
	padding: 0;	
}

.six-12, .six-12.last, .six-12.right {
	margin-bottom: 3em;		
}

}

	
@media (max-width: 385px) {
	
#hello h2 {
	font-size: 1.25em;	
}

#hello h2 span {
	padding-left: 2.3em;
	letter-spacing: 2px;
	line-height: 1.5;
}

.four-8 {
    width: 80%;
}

.four-8.right {
    width: 100%;
}

form#contactForm {
	border: 0;
	padding: 0;	
}


}


	
@media (max-width: 300px) {

.four-8 {
    width: 100%;
}

}

	
@media (max-width: 275px) {
	
#hello h2 {
	font-size: 1em;	
}

#hello h2 span {
	padding-left: 2.25em;
	letter-spacing: 1.5px;
}

#portfolio h2,
#contact h2 {
	font-size: 2em;	
}

}


@media (max-width: 225px) {
	
#hello h2 {
	font-size: 1em;	
}

#hello h2 span {
	display: block;
	font-size: 1.1em;
	letter-spacing: normal;
	padding-left: 0;
}

	
}