@charset "utf-8";
/* Layout */
.col-1 {
	border-right:1px dotted #A7A9AC;
	float:left;
	margin:0 3% -30px 1%;
	padding:0 3% 0 0;
	width:63%
}
article:first-child {
	border-bottom:1px dotted #A7A9AC;
	margin-bottom:20px;
	padding-bottom:15px;
}
.col-2 {
	float:left;
	width:30%
}
@media (max-width:549px) {
	.col-1 {
		float:none;
		border-right:none;
		margin:0;
		padding:0;
		width:100%
	}
	.col-2 {
		float:none;
		width:100%
	}
}
/* Thumbnails */
.heading, .circle {
	border-radius: 50%;
	float:left;
	padding:5px;
	width: 107px;
	height: 107px; 
}
.circle {
	margin-left:8px;
}
.heading .dashed {
	border-radius: 50%;
	border:1px dashed #fff;
	color:#fff;
	font-weight:bold;
	font-style:italic;
	line-height:1.3;
	font-size:1.15em;
	padding-top:15px;
	width: 97px;
	height: 97px;
	text-align:center;
}
.print, .digital {
	background:#0379BC;
}
.event, .traditional {
	background:#2CA8D3;
}
.event .dashed {
	line-height:1.2;
	font-size:1.1em;
	padding-top:13px;
}
.photoshop, .medical {
	background:#1E7EAF;
}
.photoshop .dashed {
	padding-top:30px;	
}
.logo-design {
	background:#39B9D6;
}
.logo-design .dashed {
	padding-top:25px;	
}
/* Thumbnail Position */
.bottom, .bottom2, .bottom3 {
	position:relative;
	top:-5px;
	left:50px;
}
.top2, .top3, .top4 {
	position:relative;
	top:-10px;
}
.bottom2 {
	top:-15px;
}
.top3 {
	top:-20px;
}
.bottom3 {
	top:-25px;
}
.top4 {
	top:-30px;
}
@media (min-width: 1200px) {
	.heading, .circle {
		padding:1.12%;
		width: 124px;
		height: 124px; 
	}
	.heading .dashed  {
		line-height:1.4;
		font-size:1.2em;
		padding-top:19px;
		width: 109px;
		height: 109px;
	}
	.event .dashed {
		line-height:1.3;
		font-size:1.2em;
		padding-top:15px;
	}
	.photoshop .dashed {
		padding-top:35px;	
	}
	.logo-design .dashed {
		font-size:1.3em;
		padding-top:26px;	
	}
}
@media (max-width: 1050px) {
	article:first-child {
		margin-bottom:13px;
		padding-bottom:8px;
	}
}
@media (min-width: 900px) and (max-width: 1050px) {
	.heading, .circle {
		padding:5px;
		width: 96px;
		height: 96px; 
	}
	.heading .dashed {
		line-height:1.4;
		font-size:1em;
		padding-top:14px;
		width: 86px;
		height: 86px;
	}
	.event .dashed {
		line-height:1.15;
		font-size:1.05em;
		padding-top:12px;
	}
	.photoshop .dashed {
		font-size:1.1em;
		padding-top:25px;	
	}
	.logo-design .dashed {
		line-height:1.2;
		font-size:1.2em;
		padding-top:22px;	
	}
	.bottom, .bottom2, .bottom3 {
		top:-5px;
		left:45px;
	}
	.top2 {
		top:-10px;
	}
	.bottom2 {
		top:-15px;
	}
	.top3 {
		top:-20px;
	}
	.bottom3 {
		top:-25px;
	}
	.top4 {
		top:-30px;
	}
}
@media (min-width: 768px) and (max-width: 899px) {
	.heading, .circle {
		padding:3px;
		width: 81px;
		height: 81px; 
	}
	.heading .dashed {
		font-style: normal;
		line-height:1.4;
		font-size:0.875em;
		padding-top:10px;
		width: 75px;
		height: 75px;
	}
	.event .dashed {
		line-height:1.10;
		font-size:0.95em;
		padding-top:10px;
	}
	.photoshop .dashed {
		font-size:0.95em;
		padding-top:23px;	
	}
	.logo-design .dashed {
		line-height:1.2;
		font-size:1em;
		padding-top:18px;	
	}
	.bottom, .bottom2, .bottom3 {
		top:0;
		left:35px;
	}
	.top2, .bottom2, .top3, .bottom3, .top4 {
		top:0;
	}
}
@media (max-width: 767px) {
	.block {
		display:inline;
	}
	.circle {
		margin-left:18px;
		width: 80px;
		height: 80px; 
	}
	.circle:first-child, .no-margin {
		margin-left:0;
	}	
	.heading {
		background:none;
		border-top:1px dotted #A7A9AC;
		border-radius:0;
		display:block;
		line-height:0;
		margin:10px 0 0 0;
		padding:3px;
		width: 100%;
		height: auto; 
	}
	.heading .dashed, .event .dashed, .photoshop .dashed, .logo-design .dashed {
		color:#41B8EA;
		display:inline-block;
		font-style: italic;
		line-height:1;
		font-size:1.3em;
		padding:0 5px;
		position:relative;
		top:-13px;
		width:100%;
		text-align:center;
		height: auto;
	}
	.bottom, .bottom2, .bottom3, .top2, .top3, .top4  {
		top:0;
		left:0;
	}
	.bottom, .bottom2, .bottom3 {
		margin-top:10px;
		margin-bottom:10px;
	}
	.thumbnail-group {
		display:block;
		margin:0 auto 15px;
		width:375px;
	}
	.white {
		background:#fff;
	}
	h2 {
		font-size:1.2em;
	}
	article {
		border-bottom:none;
		padding-top:15px;
	}
	article:first-child {
		border-bottom:1px dotted #A7A9AC;
		margin-top:0;
		padding-top:0;
	}
	article:last-child {
		padding:0;
	}
}
@media (min-width:550px) and (max-width: 650px) {
	.circle {
		margin-left:12px;
		width: 65px;
		height:65px; 
	}
	.circle:first-child, .no-margin {
		margin-left:0;
	}	
	.thumbnail-group {
		width:300px;
	}
	.years {
		font-size:0.84em;
		padding-left:4px;
	}
	.skills-table td {
		min-width: 60%;
	}
}
@media (min-width:550px) and (max-width: 700px) {
	.six-fifty {
		display:none;
	}
}
@media (max-width: 549px) {
	.thumbnail-group {
		width:372px;
	}
	.circle {
		margin-left:15px;
		width: 80px;
		height:80px; 
	}
	.circle:first-child, .no-margin {
		margin-left:0;
	}	
	article:first-child {
		border-top:1px dotted #A7A9AC;
		border-bottom:none;
		margin-top:40px;
		padding-top:10px;
		padding-bottom:0;
	}
	article:last-child {
		border-top:1px dotted #A7A9AC;
		padding-top:10px;
	}
}
@media (max-width: 410px) {
	.circle {
		margin-left:10px;
		width: 65px;
		height:65px; 
	}
	.circle:first-child, .no-margin {
		margin-left:0;
	}	
	.thumbnail-group {
		width:294px;
	}
}
@media (max-width: 319px) {
	.circle {
		width: 50px;
		height:50px; 
	}
	.thumbnail-group {
		width:234px;
	}
}
.circle.print-thumbnail, .digital-thumbnail {
	border:1px solid #0379BC;
}
.circle.event-thumbnail, .traditional-thumbnail {
	border:1px solid #2CA8D3;
}
.circle.photoshop-thumbnail, .medical-thumbnail {
	border:1px solid #1E7EAF;
}
.circle.logo-design-thumbnail {
	border:1px solid #39B9D6;
}
.print-thumbnail:hover, 
.event-thumbnail:hover, 
.photoshop-thumbnail:hover, 
.logo-design-thumbnail:hover,
.digital-thumbnail:hover, 
.traditional-thumbnail:hover,
.medical-thumbnail:hover {
	background-color:#DEF3FC;
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
.print-thumbnail:focus,
.event-thumbnail:focus,
.photoshop-thumbnail:focus,
.logo-design-thumbnail:focus,
.digital-thumbnail:focus,
.traditional-thumbnail:focus,
.medical-thumbnail:focus {
	background-color:#39B9D6;
	border:1px dotted #1D58A8;
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
	outline:none;
}
.print-thumbnail:active, 
.event-thumbnail:active,
.photoshop-thumbnail:active,
.logo-design-thumbnail:active,
.digital-thumbnail:active, 
.traditional-thumbnail:active,
.medical-thumbnail:active {
	background-color:#B9BABA;
	border:1px solid #000;
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
.ad1-communication {
	background:url(../graphic-thumb/ad1-communication.png) no-repeat center center;
	background-size:90%;
}
.ad2-rewards {
	background:url(../graphic-thumb/ad2-rewards.png) no-repeat center center;
	background-size:90%;
}
.ad3-mobile {
	background:url(../graphic-thumb/ad3-mobile.png) no-repeat center center;
	background-size:90%;
}
.ad4-wood {
	background:url(../graphic-thumb/ad4-wood.png) no-repeat center center;
	background-size:90%;
}
.ad5-barrier {
	background:url(../graphic-thumb/ad5-barrier.png) no-repeat center center;
	background-size:90%;
}
.ad6-licensing {
	background:url(../graphic-thumb/ad6-licensing.png) no-repeat center center;
	background-size:90%;
}
.ad7-slenderwall {
	background:url(../graphic-thumb/ad7-slenderwall.png) no-repeat center center;
	background-size:90%;
}
.ad8-fast {
	background:url(../graphic-thumb/ad8-fast.png) no-repeat center center;
	background-size:90%;
}
.marketing1-buildings-catalog {
	background:url(../graphic-thumb/marketing1-buildings-catalog.png) no-repeat center center;
	background-size:90%;
}
.marketing2-farm-products {
	background:url(../graphic-thumb/marketing2-farm-products.png) no-repeat center center;
	background-size:90%;
}
.marketing3-annual-report {
	background:url(../graphic-thumb/marketing3-annual-report.png) no-repeat center center;
	background-size:90%;
}
.marketing4-barrier-brochure {
	background:url(../graphic-thumb/marketing4-barrier-brochure.png) no-repeat center center;
	background-size:90%;
}
.marketing5-timeline {
	background:url(../graphic-thumb/marketing5-timeline.png) no-repeat center center;
	background-size:90%;
}
.marketing6-buildings-flyer {
	background:url(../graphic-thumb/marketing6-buildings-flyer.png) no-repeat center center;
	background-size:90%;
}
.marketing7-invitation {
	background:url(../graphic-thumb/marketing7-invitation.png) no-repeat center center;
	background-size:90%;
}
.marketing8-program {
	background:url(../graphic-thumb/marketing8-program.png) no-repeat center center;
	background-size:90%;
}
.photo1-castle {
	background:url(../graphic-thumb/photo1-castle.png) no-repeat center center;
	background-size:90%;
}
.photo2-fredericksburg {
	background:url(../graphic-thumb/photo2-fredericksburg.png) no-repeat center center;
	background-size:90%;
}
.photo3-interior {
	background:url(../graphic-thumb/photo3-interior.png) no-repeat center center;
	background-size:90%;
}
.photo4-roof {
	background:url(../graphic-thumb/photo4-roof.png) no-repeat center center;
	background-size:90%;
}
.photo5-water-plants {
	background:url(../graphic-thumb/photo5-water-plants.png) no-repeat center center;
	background-size:90%;
}
.photo6-building {
	background:url(../graphic-thumb/photo6-building.png) no-repeat center center;
	background-size:90%;
}
.photo7-portfolio {
	background:url(../graphic-thumb/photo7-portfolio.png) no-repeat center center;
	background-size:90%;
}
.photo8-restroom {
	background:url(../graphic-thumb/photo8-restroom.png) no-repeat center center;
	background-size:90%;
}
.logo1-rocket {
	background:url(../graphic-thumb/logo1-rocket.png) no-repeat center center;
	background-size:90%;
}
.logo2-melanie-rays {
	background:url(../graphic-thumb/logo2-melanie-rays.png) no-repeat center center;
	background-size:90%;
}
.logo3-fifty-year {
	background:url(../graphic-thumb/logo3-fifty-year.png) no-repeat center center;
	background-size:90%;
}
.logo4-kaizen {
	background:url(../graphic-thumb/logo4-kaizen.png) no-repeat center center;
	background-size:90%;
}
/* Graphic Design Mandala */
article:last-child {
	position:relative;
	z-index:1000;
}
.graphic-design {
	position:absolute;
	bottom:-100px;
	right:15px;
	width:23%;
}
@media (max-width:900px) {
	.graphic-design {
		bottom:-90px;
		width:26%;
	}
}
@media (max-width:767px) {
	.graphic-design {
		display:none;
	}
}
@media (max-width:549px) {
	.graphic-design {
		bottom:-75px;
		display:block;
		width:43%;
	}
}
@media (max-width:480px) {
	.graphic-design {
		display:none;
	}
}
/* Skills Table */
@media (max-width: 1100px) {
	.tablet-hide {
		display:none;
	}
	.skills-table th {
		width:100px;
	}
}
@media (max-width: 800px) {
	.years {
		font-size:0.95em;
	}
	.skills-table th {
		width:90px;
	}
}
@media (max-width: 700px) {
	.years {
		font-size:0.875em;
	}
	.skills-table th {
		width:70px;
	}
	.five {
		width:58%;
	}
	.four-five {
		width:52%;
	}
}
@media (max-width: 600px) {
	.skills-table td {
		min-width:63%;
	}

}
@media (max-width: 549px) {
	.years {
		font-size:1em;
	}
	.skills-table th {
		width:110px;
	}
	.five {
		width:50%;
	}
	.four-five {
		width:45%;
	}
}