/* ReCSSet  */

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

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

body { 
	background-color:#8F6FA4;
	background-image: radial-gradient(rgba(0,0,0,.15) 7%, transparent 8%),
radial-gradient(rgba(0,0,0,.15) 7%, transparent 8%);
	background-size:20px 20px;
	background-position: 0 0, 10px 10px;
	font:14px/1.58em 'Lora', Georgia, serif; 
	font-weight:300;
	color:#5d6061; 
	padding:3em;
} 
body.about { 
	background-color:#a7c1dd; 
}

h1, h2, h3, h4, h5, h6 { color:#758AA2; font-family: 'Poppins', 'Josefin Sans', Arial, sans-serif; font-weight: 600; }
h2 {font-size:1.4em; line-height:1.4em; margin: .85em 0 .1em; }
h3 {font-size:1.1em; padding-top:.1em; margin:2.05em 0 0; }

ul { list-style:none; }

a, a:active, a:visited { color: #cf2861; -moz-transition: color .2s ease-in-out; -webkit-transition: color .2s ease-in-out; transition: color .2s ease-in-out; transition: border .2s ease-in-out; text-decoration:none; font-weight:700; border-bottom:1px solid #ddd; }
a:hover, a:active { outline: none; }
a:hover { color: #95272e; border-color:#95272e; padding-bottom:1px; }

h1 { text-indent: -200000px; }
.about h1 { background:url('../images/logo.png') top center no-repeat; height:150px; width:300px; margin:0em auto 5em; }
.about h1 a { display: block; height:100%; border:0; padding:0;}

#tub {
	padding:50px 0 0;
	width:300px;
	margin:0 auto;
}

#cone, #sundae { 
	display:none;
 }


#container {
	/*max-width:1200px;*/
	margin:0;
}
#main { 
	background:#fff;
	padding:3em;
	box-shadow:0 0 5px rgba(0,0,0,.1);
	margin:0 0 4.74em;
	overflow:hidden;
}

.hero {
	font-size:1.5em;
	line-height:1.58em;
	/*background:url('../images/divider.gif') bottom left repeat-x;*/
	border-bottom:3px solid #ebebeb;
	padding-bottom:2.5em;
}
.hero img {
	float:left;
	margin:0 35px;
	width:155px;
	border-radius:100px;
	box-sizing: padding-box;
}

.portfolio-item h3 {
	margin: 0 auto;
}
.portfolio-item h2 {
	margin:0 auto;
	line-height:120%;
	text-align: center;
}
.portfolio-item h2 + h3 {
	margin: 0 auto;
	font-size:1em;
	font-family: 'Lora', Georgia, serif;
	color: #5d6061;
	font-weight:400;
	text-align: center;
}
.portfolio-item h2 + h3 + p {
	margin: 0 auto 3em;
	max-width:100%;
	text-align: center;
	font-style: italic;
	color:#8d9091;
} 
.portfolio-item p {
	margin:0 auto 1.58em;
}
.portfolio-item ul {
	margin:0 auto 1.58em;
	/*max-width:70%;*/
}
.portfolio-item img {
	max-width: 100%;
	margin: 0 auto 2.5em;
	text-align: center;
}
.portfolio-item .case-study {
	text-align:justify;
	clear:both;
}
.portfolio-item li {
	list-style: square;
}

.contact {
	margin-top:2.5em;
}
.contact ul {
	text-align: center;
	margin:0 0 1.58em;
}
.contact li {
	display: inline;
}
.twitter-feed {
	display:none;
}

.side-projects, .portfolio { 
	overflow:hidden; 
}
.portfolio {
	margin-bottom: -3em;
}
.side-projects li {  
	list-style: none;
	margin-bottom:1.58em;
}
.portfolio li {
	list-style: none;
	margin-bottom:1.5em;
	position: relative;
}
.side-projects li a, .portfolio li a {
	display:block;
	font-family:'Poppins', Arial, sans-serif;
	font-weight: 500;
	color:#5d6061;
	border:0; 
	padding:0;
}
.side-projects li img, .portfolio li img {
	width:100%;
}
.side-projects li strong {
	display:block;
	font-size:1.2em;
	font-family:'Poppins', Arial, sans-serif;
	color:#cf2861;
}
.side-projects li a:hover strong {
	color:#95272e;
	border:0; 
	padding:0;
}

.portfolio li a img {
	display: block;
	width:100%;
}
.portfolio li a span {
	opacity: 0;
	background:rgba(255,255,255,.8);
	text-align: center;
	font-size:1em;
	position: absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	padding-top:9em;
	font-family:'Poppins', Arial, sans-serif;
	transition:all .2s linear 0s;
	color:#758AA2;
}
.portfolio li a span:after {
	content: '';
	display: block;
	border:3px solid;
	position: absolute;
	left:15px;
	right:15px;
	top:15px;
	bottom:15px;
}
.portfolio li a:hover span { 
	opacity: 1;
}

@media screen and (min-width:600px) { 
	body {
		background-color:#a39573;
		font-size:18px;
	}
	
	#cone {
		padding:50px 0 0;
		display:block;
		width:294px;
		margin:0 auto;
	}
	
	#tub, #sundae { 
		display:none;
	 }
	 
	 .portfolio-item .case-study {
		margin: 0 10%;
	}
	.portfolio-item h3 {
		max-width:70%;
	}
	.portfolio-item h2 + h3 + p {
		max-width:70%;
	}

}

@media screen and (min-width:1150px) {
	body {
		font-size:18px;
	}
	.side-projects, .about-site {
		width:76.2222222%;
		float:right;
	}
	.contact {
		width:20%;
		float:left;
	}
	.twitter-feed {
		display:block;
	}
	.portfolio-item p, .portfolio-item ul {
		max-width:70%;
	}
	 .side-projects li, .portfolio li  {  
		width:32%;
		margin-right:2%;
		float:left;
	}
	.side-projects li:last-child, .portfolio li:nth-child(3n) {
		margin:0;
	}
}

@media screen and (min-width:1450px) { 
	body {
		background-color:#768aa1;
	}
	.portfolio-item h2 {
		margin: 0 1em 1em 10%;
		float:left;
		width:25%;
	}
	.portfolio-item h2 + h3 {
		margin: 0 10% 0 0;
		max-width: 100%;
	}
	.portfolio-item h2 + h3 + p {
		margin: 0 10% 3em 0;
		max-width: 100%;
	}
	.portfolio-item h2, .portfolio-item h2 + h3, .portfolio-item h2 + h3 + p {
		text-align: left;
	}
	#sundae {
		padding:50px 0;
		display:block;
		width:332px;
		margin:0 auto;
	}
	
	#tub, #cone { 
		display:none;
	}
}