/*
Theme Name:     Ryan Kilimnik's Portfolio - Boilerplate Child theme	
Theme URI:      http://portfolio.ryankilimnik.com/
Description:    Child Theme
Author:         Ryan Kilimnik
Author URI:     
Template:       boilerplate
Version:        0.1.0
*/


@import url("../boilerplate/style.css");

* { margin: 0; padding: 0; }
dl, menu, ol, ul { margin: 0; }
menu, ol, ul { padding: 0; list-style-type: none; }
h1, h2, h3 { margin: 0; }
a:hover { text-decoration: none; }
a.skip, a.post-edit-link { display: none; }
p { margin: 0; }

/*-- Environment --*/

body {
	font-family: 'Nunito Sans', sans-serif;
	font-size: 16px;
	line-height: 150%;
	background: #fff;
}

#topBannerWrapper {
	background: #202C5C;

}

#topBanner {
	color: #fff;
	max-width:1280px;
	margin: 0 auto;
	padding: 25px;
	font-weight: 200;
	text-align: center;
}

#topBanner .logo span {
	margin: 0 5px;
}

#topBanner .logo a {
	background: url('http://www.ryankilimnik.com/images/2017/rk-logo-white.svg') no-repeat top center;
	background-size: 50px auto;
	padding-top: 60px;
	display: block;
	font-size: 16px;
	font-family: 'Zilla Slab';
	font-style: italic;
	font-weight: 400;
}

#topBanner .logo a .name {
	display: block;
	font-family: 'Nunito Sans', sans-serif;
	font-size: 45px;
	font-style: normal;
	line-height: 45px;
}

#topBanner a {
	color: #fff;
	text-decoration: none;
}

#topBanner .logo .tag {
	padding: 0 25px;
	height: 40px;
	line-height: 40px;
	background: #fff;
	color: #202C5C;
	font-size: 20px;
	font-family: 'Zilla Slab';
	font-style: italic;
	font-weight: 400;
	position: relative;
}

#topBanner .logo .tag:after,
#topBanner .logo .tag:before {
	width: 0; 
	height: 0; 
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent; 
	border-right:12px solid #202C5C; 
	position: absolute;
	right: 0;
	top: 0;
	content: "";
}

#topBanner .logo .tag:before { 
	border-left:12px solid #202C5C;
	border-right: none;
	left: 0;
}


#mainContainerWrapper {
	text-align: left;	
	max-width:1280px;
	margin: 0 auto;	
	padding: 15px 25px 50px;
}

#mainContainer .breadcrumbs {
	color: #222;
	font-size: 12px;
	margin: 0 0 40px;
}

#mainContainer .breadcrumbs a {
	color: #222;
}

#mainContainer section h1 {
	color: #222;
	font-family: 'Zilla Slab', serif;
	font-weight: 300;
	font-size: 24px;
	margin: 0 0 25px;
}

#mainContainer section {
	position: relative;
}

.single-post #mainContainer section #nav-above span {
}

.single-post #mainContainer section #nav-above a {
	position: absolute;
	right: -25px;
	top: 75px;
	height: 75px;
	width: 20px;
	background: #202C5C;
	line-height: 75px;
	text-align: center;
	text-decoration: none;
	color: #202C5C;
}

.single-post #mainContainer section #nav-above a:hover {
	background: 202C5C;
	color: #202C5C;
}

.single-post #mainContainer section a:before {
	content: '\f053';
	font-family: 'fontawesome';
	color: #fff;
	font-size: 12px;
}

.single-post #mainContainer section #nav-above a[rel='prev'] {
	left: -25px;
	width: 35px;
}

.single-post #mainContainer section #nav-above a[rel='next'] {
	width: 35px;
	right: -35px
}

.single-post #mainContainer section #nav-above a span {
	display: none;
}

.single-post #mainContainer section a[rel='next']:before {
	content: '\f054';
	position: absolute;
	right: 13px;
}

.single-post #mainContainer section a[rel='prev']:before {
	content: '\f053';
	position: absolute;
}

.single-post #mainContainer section p img {
	margin: 0 0 25px;
	max-width: 100%;
}

.single-post #mainContainer section p.desc {
	padding: 25px;
	background: rgba(255,255,255,.9);
	display: inline-block;
	margin: 0 0 15px;
	text-align: left;
	border: 5px solid #202C5C;
}	

.single-post #mainContainer section p.desc a:before {
	display: none;
}

.single-post #mainContainer .entry-content {
	text-align: center;
}

/*-- Home Page --*/

.heroTitle .break {
	display: block;
	font-size: 60%;
	font-style: italic;
}

#mainContainer section h1.heroTitle {
    color: #222;
    font-family: 'Zilla Slab', serif;
    font-weight: 300;
    font-size: 24px;
    border: 1px solid #222;
    border-left: none;
    border-right: none;
    display: inline-block;
    text-align: center;
    padding: 10px 0;
    margin: 0 0 50px;
}

.home .breadcrumbs {
	display: none;
}

.home #mainContainerWrapper {
	padding-top: 50px;
}

.home .introTitle {
	color: #202C5C;
	font-size: 24px;
	font-family: 'Zilla Slab';
	font-weight: 400;
	margin: 0 0 25px;
	text-align: center;
}

.home .intro {
	color: #222;
	font-size: 16px;
	margin: 0 0 15px;
}

.home .intro.small {
	font-size: 12px;
}

.home a { 
	color: #222;
}

.home h3.post-category {
	font-size: 20px;
	font-family: 'Zilla Slab';
	font-weight: 400;
	padding: 10px 0 5px;
}

.home p.post-lists {
	margin: 0 0 5px;	
}

.home a.post-name {
	position: relative;
	padding-left: 15px;
}

.home a.post-name:before {
	content: '\f105';
	font-size: 18px;
	color: #222;
	position: absolute;
	left: 3px;
	top: 1px;
	font-family: 'fontawesome';
}
.home #mainContainer .category {
	display: inline-block; 
	box-sizing: border-box;
	padding: 0 25px;
	width: 25%;
	vertical-align: top;
}

.home #content p.intro:nth-child(3) {
	margin: 0 0 40px;
}

.category h3.post-category a {
	background: url('http://www.ryankilimnik.com/images/icon-visualDesign.svg') no-repeat center top;
	padding-top: 100px;
	background-size: 90px auto;
	display: block;
	text-decoration: none;
	text-align: center;
	margin: 0 0 10px;
}

/*-- Brand Design --*/
.category.block4 h3.post-category a {
	background: url('http://www.ryankilimnik.com/images/icon-branding.svg') no-repeat center top;
	background-size: 90px auto;
}

/*-- UI Design --*/
.category.block3 h3.post-category a {
	background: url('http://www.ryankilimnik.com/images/icon-ui.svg') no-repeat center top;
	background-size: 90px auto;
}

/*-- UX Design --*/
.category.block2 h3.post-category a {
	background: url('http://www.ryankilimnik.com/images/icon-ux.svg') no-repeat center top;
	background-size: 90px auto;
}

/*-- Visual Design --*/
.category.block5 h3.post-category a {
	background: url('http://www.ryankilimnik.com/images/icon-visualDesign.svg') no-repeat center top;
	background-size: 90px auto;
}

.home .category .post-lists {
	text-align: center;
	margin: 0 0 12px;
}

/*-- Category Page --*/
.category .post .entry-meta,
.category .post .entry-summary,
.category footer {
	display: none;
}

.category .post-lists a {
	text-decoration: none;
	line-height: normal;
}

.category .post-lists a:hover {
	text-decoration: underline;
}


.category .post h2 {
	margin: 0 0 10px;
	position: relative;
	padding-left: 15px;
}

.category .post h2 a {
	color: #222;
	font-size: 18px;
	font-weight: 200;
}

.category .post h2:before {
	content: '\f105';
	font-size: 18px;
	color: #202C5C;
	position: absolute;
	left: 3px;
	top: 1px;
	font-family: 'fontawesome';
}

body.category #nav-above,
body.category #nav-below {
	display: none;
}

/*
body.category-4 {
	background: url('http://www.ryankilimnik.com/images/icon-branding-25.svg') no-repeat bottom right;
	background-size: 500px auto;
}
*/

/*-- hiding work samples till I can figure out what's wrong --*/

#work { display: none; }


@media only screen and (max-width: 1275px) {
	
	.single-post #mainContainer section #nav-above a[rel='prev'] {
		left: -25px;
		width: 25px;
	}
	.single-post #mainContainer section a[rel='next']:before {
		content: '\f054';
		position: absolute;
		right: 20px;
	}


}

@media only screen and (max-width: 768px) {

	.home #mainContainer .category {
		width: 50%;
	}
}

@media only screen and (max-width: 375px) {
	#topBanner {
		font-size: 16px;
	}
	
	.single-post #mainContainer section #nav-above a[rel="next"] {
		width: 25px;
		right: -25px;
	}
	
	.single-post #mainContainer section a[rel="next"]:before {
		right: 8px;	
	}
	
	.home #mainContainer .category {
		width: 100%;
	}
}