/* 
main css for kimberlybelanger.com
last updated: October 2016
copyright © 2016 Kimberly Belanger
*/

/* ----------------------
TABLE OF CONTENTS:

--- GLOBAL STYLES ---
---- PAGE LAYOUT -----
1 - HEADER
2 - MAIN CONTENT
2.1 - PORTFOLIO
2.2 - RESUME
2.3 - ABOUT
2.4 - CONTACT
2.5 - PROJECT
3 - FOOTER
--- RESPONSIVENESS ---
---------------------- */

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

/* embed custom fonts
-----------------------------*/
@font-face {
	font-family: 'Questrial';
	src: url('../_fonts/Questrial/Questrial.eot');
	src: local(':)'), url('../_fonts/Questrial/Questrial.woff') format('woff'), url('../_fonts/Questrial/Questrial.ttf') format('truetype'), url('../_fonts/Questrial/Questrial.svg') format('svg');
	font-weight:normal;
	font-style:normal;
}


/* reset styles
-----------------------------*/
* {box-sizing:border-box;}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

address, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }

body { background-color: #f4f4f4; font: normal 100% Geneva, Verdana, sans-serif;}
::selection { background: #D97F77;  color:#fff; }
::-moz-selection { background: #D97F77; color:#fff; }

p, li { color: #555; font-size: 0.875rem; font-family: Geneva, Verdana, sans-serif; }
a { color: #4a4a4a; text-decoration: none; outline: none; border-bottom:1px dashed transparent;}
a:hover { color: #d97f77; outline: none; border-bottom: 1px dashed #D97F77; }

/* headings 
-----------------------------*/
h1 { }
h2 { font-family: Questrial, Arial, sans-serif; text-transform: uppercase; }
#resume h2,
#about h2 {letter-spacing: 2px; font-size: 2.25em; margin-bottom: 5%; text-align:center;}
.project_thumb h2 { font-size: 0.875em; /* 14px */ letter-spacing: 1px; }
.project_header h2 {display:inline; color:#D97F77; font-size:2.5rem; }
h3 { font-family: Questrial, Arial, sans-serif; font-size: 1.375em; /* 22px */ margin-bottom: 30px;}
#project h3 {color:#555; font-size:1.75em;}


/* global classes 
-----------------------------*/
.clear { clear: both; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.wrapper { width: 100%; margin: 0 auto;}
.ui-loader { display: none; }

.onstate { color: #d97f77; border-bottom: 1px dashed #d97f77; }
.email a { color: #d97f77; }
.script { font-family: Century Schoolbook, serif; font-size: 2rem;}


/***----------------------------------- PAGE LAYOUT -----------------------------------***/
/***----------------- 1 - HEADER -----------------***/
.header_main { background-color:#fff; position:relative; margin:0 auto 50px; width:100%; border-bottom:2px solid #ddd; padding:40px 0;}
/* .logo { background: url('../_images/kb2013_logo_2x.jpg') center 0 no-repeat; display: block; width: 250px; height: 85px; margin: 0 auto 20px; background-size: 100%; } */
.logo { display: block; text-align:center; font:85px "Yesteryear", cursive; text-shadow: 5px 5px 5px rgba(0,0,0,0.25); }
.logo:hover a {border-bottom:none;}
.nav_main ul li { text-transform: uppercase; font: 0.875em Questrial, Arial, sans-serif; list-style: none; letter-spacing: 2px; text-align: center;  float: left; }

/***----------------- 2 - MAIN CONTENT -----------------***/
.content_main { margin-bottom: 80px; padding: 0 30px; }


/**-------  2.1 - PORTFOLIO -------**/
/**-------  2.1 - PORTFOLIO -------**/
.portfolio_wrapper {width:260px; margin:0 auto; display:flex; flex-wrap:wrap;}
.project_thumb { position: relative; width:260px; margin-bottom: 25px; background-color:#fff; padding:10px 10px 20px 10px; transition:all .25s ease;}
.project_thumb a { display: block; border-bottom:none; overflow:hidden; margin-bottom: 15px; }
.project_thumb img {  width:100%; display:block; }
.project_thumb:hover { box-shadow:2px 2px 15px rgba(0,0,0,0.3); cursor:pointer:}
/* .project_thumb span { position: absolute; top: 0; left: 0; opacity: .99; transition: opacity .5s;}
.project_thumb span:hover { opacity: 0.1; transition: opacity .5s; } */
.project_thumb h2 {border-top:1px solid #ddd; padding:15px 5px 0 5px;}
.project_thumb p { margin-top: 10px; padding:0 5px; line-height: 130%; font-size: 0.8125em; /* 13px */  min-height:52px; color:#989898;}


/**------- 2.2 - RESUME -------**/
.equal_height {display:flex; flex-flow:row wrap; justify-content:center; }
.resume_box { border-radius: 5px; background-color: #fff; border:1px solid #ccc; padding: 40px; margin-bottom: 30px; width:100%;}
#education .resume_box:last-of-type {width:100%; margin-right:0;}
.resume_box ul {margin-left:20px;}
.resume_box ul li {margin-bottom:10px;}

.date {font-size:.75em; font-weight:bold; }
#experience .date {margin-bottom:20px;}
.title {color:#d97f77; font-weight:bold;}
.city {color:#989898;}

.resume_logo {text-indent:-9999px; max-width:200px; height:40px;}
.ancestry_logo {background:url('../_images/logos/ancestry-logo-bw.svg') 0 center no-repeat; background-size:contain; }
.anki_logo {background:url('../_images/logos/anki-logo-bw.png') 0 center no-repeat; background-size:contain; max-width:100px;}
.wizard_logo {background:url('../_images/logos/wizard-logo-bw.png') 0 center no-repeat; background-size:contain;}
.usc_logo {background:url('../_images/logos/usc-logo-bw.png') 0 center no-repeat; background-size:contain;}
.sears_logo {background:url('../_images/logos/sears-logo.png') 0 center no-repeat; background-size:contain;}


/**------- 2.3 - ABOUT -------**/
.aboutme { text-align: center; width: 80%; color: #4d4d4f; margin: 0 auto; text-transform: none; font-size: 0.925rem; margin-bottom:50px;}

.skills_box { width: 94%; margin: 0 auto; border-radius: 5px; background-color: #fff; padding: 30px 2.7777% 34px 2.7777%; /* 30px 10px 34px 10px */  border:1px solid #ccc;}
.skills_box ul { }
.skills_box ul:first-of-type{ margin-bottom: 38px; }
.skills_box ul li { list-style: none; background-color: rgba(217,127,119,0.25); padding: 10px 12px 8px 12px; float: left; border-radius: 5px; margin: 0 5px 8px 0; color: #363636; font-size: 0.75rem; text-transform:uppercase;}


/**------- 2.4 - CONTACT -------**/
#contact { text-align: center; text-transform: uppercase; margin-top: 48px; }

#contact .email { letter-spacing: 1px; font-size: 1.125em; /*18px*/ margin-bottom: 30px;}
#contact .phone { font-size: 2.375em; /*38px*/ margin-bottom: 22px; }
.phone .spacing { letter-spacing: -3px; }
#contact .location { font-size: 1.125em; /*18px*/ margin-bottom: 36px; }

.social-btns > :nth-child(1n) {margin-right:20px;}
.social-btns > a:hover {border:none;}
.linkedin { margin: 0 auto; display: block; background: url('../_images/kb2013_sprite.svg') 0 100% no-repeat; width: 30px; height: 30px; background-size: 100%; }
.linkedin:hover { background-position: 0 73.5%; cursor: pointer; }

.codepen-button > svg {width:120px; border: 1px solid #ccc; padding:5px 10px;}


/**------- 2.5 - PROJECT -------**/
#project { text-align: center; text-transform: uppercase; }

/* .project_header {text-align:center; margin-bottom:30px; padding:0 30px;} */
.description { margin: 0 auto; text-transform: none; color:#989898;}
a.launch_btn { margin: 0 auto; color: #fff; display: inline-block; background-color:rgba(217,127,119,0.75); padding:10px 15px; border-radius:5px; transition:all .25s ease;
}
a.launch_btn:hover {background-color:rgba(217,127,119,1); }
.project_img { margin:0 auto; margin-bottom:75px;}

.project_img img {width:100%; display:block;}

.project_arrow { cursor:pointer;  color:#D97F77; font-size:18px;}
.project_arrow:before {content:''; background:url('../_images/kb2013_arrow.svg') no-repeat; width:25px; height:25px; display:inline-block; transition: all .25s ease;}
.prev {float:left; }
.prev:before {float:left; background-position:left center; margin:2px 5px 0 0; transform:rotate(180deg);}
.next {float:right; }
.next:before {float:right; background-position:right center; margin:1px 0 0 5px;}
.prev:hover, .next:hover { opacity:1; border-bottom:none;}
.prev:hover:before {margin:2px 15px 0 -10px;}
.next:hover:before {margin:1px -10px 0 15px;}


/***----------------- 3 - FOOTER -----------------***/
.footer_main { width:100%; margin: 0 auto; margin-top:100px; padding: 20px 0; /* 30px */ background-color:#fff; border-top:1px solid #ddd;}
.footer_main p { font-size: 0.75em; /* 12px */ float:left; margin-right:20px;}

.footer_main .copyright { float:right; margin-right:0;}
.linkedin_btn a:hover {border-bottom:none;}
.footer_main.fixed {position:fixed; bottom:0; left:0;}

/***----------------------------------- RESPONSIVENESS -----------------------------------***/
@media only screen and (max-width : 600px) {
	.nav_main ul li { width: 50%;  }
	.nav_main ul li:nth-child(-n+2) { margin-bottom: 20px; }
	.project_img { width: 90%; }
}

@media only screen and (min-width : 600px) and (max-width:767px) {
	.nav_main ul li { width: 25%;}

	.portfolio_wrapper {width:540px;}
	.project_thumb { float: left; margin-right:20px;}
	.project_thumb:nth-of-type(even) { margin-right:0; }
	.project_img { width: 520px; }
}

/**------- 767 or less (mobile) -------**/
@media only screen and (max-width : 767px) {
	.description { width: 85%; }
}

/**------- 797 or less (mobile - vertical tablet) -------**/
@media only screen and (max-width : 979px) {
	.description { font-size: 0.875em; /*14px*/ margin-bottom: 35px; }
	a.launch_btn { margin-bottom: 34px; }
}

/**------- 768 or more (vertical tablet - desktop) -------**/
@media only screen and (min-width : 768px) {
	.wrapper { width: 768px; }
	.content_main {padding:0 2.3437% 18px;}

	.header_main {height:150px;}
	.nav_main {padding-top:30px;}
	.nav_main ul { margin: 0 auto; } 
	.nav_main ul li { width: 15%; margin-right: 3.2552%; /* 25px */ float: right; text-align:right; }
	.nav_main ul li:nth-child(-n+2) { float: left; text-align:left;}
	.nav_main ul li:nth-child(3) { margin-right: 0; }
	
	.logo {position:absolute; left: 50%; top: 12px; margin-left:-125px;}
	
	.project_thumb { float: left; margin-right:20px;}
	.project_thumb:nth-of-type(3n) { margin-right: 0; }

	.resume_box {width:49%;}
	.resume_box:nth-child(odd) {margin-right:2%;}

	.aboutme {font-size:1.025rem;}
	.skills_box ul li {font-size:0.875rem;}
}

/**------- 768 through 979 (vertical tablet) -------**/
@media only screen and (min-width : 768px) and (max-width : 979px) {	
	.nav_main ul li { font-size: 0.75em; /* 12px */ }

	.portfolio_wrapper {width:740px;}
	.project_thumb {width:230px;}
	.description { font-size: 0.75em; /*12px*/ width: 70.9635%; }
	.project_img { width: 732px; }
}

/**------- 980 or more (horizontal tablet & desktop) -------**/
@media only screen and (min-width : 980px) {
	.wrapper { width: 980px; }

	.nav_main ul li { font-size: 0.9375em; /* 15px */ width:17%; }

	.portfolio_wrapper {width:980px; padding:0 30px;}
	.project_thumb { float: left; margin-right:25px;}
	.project_thumb {width:290px;}

	.description { font-size: 0.875em; /*14px*/ margin-bottom: 50px; width: 100%; text-align:left; background-color:#fff; padding:20px; color:#333; border:1px solid #ccc;}
	.description:first-of-type { width: 85%; text-align:center; margin-bottom: 35px; background-color:transparent; padding: inherit; border:none;}
	a.launch_btn { margin-bottom: 38px;}
	.project_img { width: 935px; }
}