@charset "UTF-8";
/* CSS Document */

body {
	font-family: 'Ubuntu', sans-serif;
	font-size: 1em;
	color: #FFFFFF;
	padding:0;
	margin:0;
}
a {
	color:#ffc502;
	text-decoration: none;
	-webkit-transition: color .7s; /* For Safari 3.1 to 6.0 */
    transition: color .7s;
}
a:hover, a.active {
	text-decoration: none;
	color: #fff;
}
.clearfix {
	clear:both;
}
strong{
	font-weight:500;
}
.main {
	position:relative;
	width:100%;
}
header{
	height:70px;
	width:100%;
	position:fixed;
	top: 0;
	z-index:9;
	background: linear-gradient(to right, rgba(87, 10, 75, 1) 0%, rgba(255, 0, 106, 1) 100%);
	box-shadow: 0 1px 15px #b21968;
}
.name {
	margin:11px 10px 0 20px;
	float:left;
	font-size:2.7em;
	font-weight: 500;
}
.name a{color:#fff;}
.name a:hover{color:#ffc502;}
.nav {
	margin:27px 0 0 1.5em;
	float:right;
	font-size:1.2em;
}
.nav a{
	display: inline-block;
	margin:0 15px;
	-webkit-transition: all .7s; /* For Safari 3.1 to 6.0 */
    transition: all .7s;
	position:relative;
}
.contactlink, .biolink{
	display: inline-block;
	-webkit-transition: all .7s; /* For Safari 3.1 to 6.0 */
    transition: all .7s;
	height:45px;
	margin:0 15px;
	overflow:visible;
	color:#ffc502;
}
.contactlink:hover, .biolink:hover, .close:hover{
	color:#fff;
	cursor:pointer;
}

.contactbox, .biobox{
	visibility: hidden;
	opacity:0;
	z-index:8;
	background-color:rgba(179, 25, 105, 0.9);
	width:70%;
	position:fixed;
	top:70px;
	left:0;
	text-align:center;
	margin:0;
	padding:1% 15% 0;
	line-height:130%;
	font-size:1.3em;
	text-shadow: 2px 2px 5px #000;
	font-weight: 300;
	-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
    transition: opacity 1s;
}
.biobox p{
	text-align:left;
	margin: 5px 0 20px;
}
.biobox img{
	border: 3px solid #661659;
}
.contactbox.appear, .biobox.appear{
	visibility: visible;
	opacity:1;
	top:70px;
	height:100%;
}

.skill{
	width:14%;
	margin:0 1%;
	float:left;
}
.chart{
	width:30px;
	height:100px;
	background:transparent;
	border:2px solid #560a4a;
	margin:0 auto 5px;
	position:relative;
}
.amount{
	width:30px;
	position:absolute;
	bottom:0;
	left:0;
	background: #ffc502;
}

.contactbox a{
	background:url(images/socialmedia.png) 1px 0 no-repeat;
	height:58px;
	width:58px;
	margin:5px 5px 0;
	display:inline-block;
	float:none;
}
.contactbox a.tw{
	background-position:-71px 0;
}
.contactbox a.yt{
	background-position:0 -120px;
}
.contactbox a.tm{
	background-position:-140px -62px;
}
.contactbox a.in{
	background-position:-140px 0;
}
.contactlink .contactbox a:hover{
	opacity:70;
	filter: alpha(opacity=70);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

.contactbox .nolink a{
	background:none;
	width:auto;
	height:auto;
}
.close{
	font-weight: 500;
	color:#ffc502;
	-webkit-transition: all .7s; /* For Safari 3.1 to 6.0 */
    transition: all .7s;
}
.close:hover{
	color:#fff;
}
.content {
	width:100%;
	margin-top:70px;
	background: #777;
	display: flex;
	flex-wrap: wrap;
}

h2{
	font-weight: 300;
	text-align: center;
	font-size: 2em;
	display:none;
}
h2 span{
	font-weight: 500;
}

.sample {
	width:33.3%;
	height:auto;
	margin:0 0 25px;
	position:relative;
	overflow:hidden;
	border-top: 3px solid #b21968;
}

.sample a{
	display: block;
	margin: 0;
	height:100%;
	text-transform:none;
}

.sample a img{
	height:100%;
	width:100%;
	-webkit-transition: all .7s; /* For Safari 3.1 to 6.0 */
    transition: all .7s;
}
/*.sample a:hover img{
	width:125%;
	height:125%;
	margin:-12.5% 0 0 -25%;
}*/
.descrip{
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	background-color:rgba(87, 10, 75, 0.8);
	position:absolute;
	top:0;
	left:0;	
	width: 80%;
	height:75%;
	padding:33% 10% 0;
	text-align:center;
	font-size:1.1em;
	font-weight: 300;
	line-height:110%;
	-webkit-transition: opacity .7s; /* For Safari 3.1 to 6.0 */
    transition: opacity .7s;
	color:#fff !important;
}
a:hover .descrip {
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.heading {
	text-transform:uppercase;
	font-size:1.2em;
	line-height:120%;
	display:block;
	font-weight: 500;
	color:#ffc502;
}
.footer {
	position:relative;
	width:778px;
	margin:0 auto;
	padding-bottom:10px;
	font-size:12px;
	word-spacing:5px;
	color: #A22D35;
	text-align:right;
}

.graphics {
	margin-left:23px; 
	margin-top:10px
}

.skyscraper {
	margin-right:15px;
}
.square{
	margin-right:5px;
	margin-bottom:10px;
}

.eblast{
	float:left;
	margin-right:30px
}

.clearScreen{
	clear:both;
}

.summary{
	background:#777;
	text-align: center;
	padding: 30px 0 20px;
	font-size: 1.3em;
	width: 100%;
}

.summary h1{
	margin:0 0 3px;
	font-weight: 500;
}
.summary p{
	margin:0;
	font-weight: 300;
	padding:0 1.5%;
}

@media all and (max-width: 920px){
	.nav{margin:38px 0 0 1em;font-size:1.1em}
	.nav a {margin: 0 15px 0 0;}
	.heading {font-size:1.2em}
	.descrip{font-size:.9em;}
}

@media screen and (max-width: 736px) {
	.sample { width:50%; }
	.biobox img { display:none; }
	header {
		height: 120px;
		text-align:center;
	}
	.name, .nav { float:none; }
	.nav{margin:20px 0 0 0;}
	.content { top: 110px; }
	.content h1 { font-size: 1.4em; }
	.biolink { display:none; }
	.contactbox.appear { top:120px; }
	.summary{ margin-top: 155px; }
}

@media only screen and (max-device-width : 568px) { 
	.contactbox, .biobox{
		width:90%;
		padding:1% 5% 0;
		overflow:scroll;
	}
}

/* Lightbox */