@import url('style/reset.css');
/* General Demo Style */
@font-face{
	font-family: Sophisticated;
	src:url(Abel%20regular.ttf);
}
@font-face{
	font-family: Urban;
	src:url(Dekiru.ttf);
}
body{
	/*background-image:url(../pics/bg-3.png);
    background-position: center;
    background-attachment: fixed;*/
	background: -moz-linear-gradient(5deg,  #010203 0%, #1d2951 25%, #391285 50%, #1d2951 75%, #010203 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(5deg, #010203 0%,#1d2951 25%,#391285 50%,#1d2951 75%, #010203 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(5deg, #010203 0%,#1d2951 25%,#391285 50%,#1d2951 75%, #010203 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b1b1b', endColorstr='#1b1b1b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-attachment: fixed;
	color: #f5f5f5;
	font-family: 'Sophisticated', Trebuchet MS, sans-serif;
	font-size: 13px;
}
.background{
	position: fixed;
	top: -460px;
	left: -40px;
	z-index:-3;
}
.foreground{
	position: fixed;
	top: -585px;
	left: -165px;
	z-index:-2;
}
.fore-foreground{
	position: fixed;
	top: -710px;
	left: -290px;
	z-index:-1;
}
a{
	color: #f5f5f5;
	text-decoration: none;
}
.clr{
	clear: both;
}
.navigation{
	position:fixed;
    width: 25%;
	/*margin-right: 5%;*/
	text-align: center;
	align: left;
    /*margin-top: 20%;*/
}
h1{
	margin:0px;
	padding:20px;
	font-size:42px;
	color: #f5f5f5;
	text-align: center;
	font-family: Urban, sans-serif;
	/*font-weight:400;*/
}
h1 span{
	font-size:22px;
	color: rgba(245,245,245,0.80);
	padding-top:10px;
}
h2{
	font-size: 36px;
}
h3{
	font-size: 30px;
}
p{
	font-size: 18px;
}
/* Header Style */
/*.header{
	font-family:'Arial Narrow', Arial, sans-serif;
	line-height: 24px;
	font-size: 11px;
	background: #000;
	opacity: 0.9;
	text-transform: uppercase;
	z-index: 9999;
	position: relative;
	-moz-box-shadow: 1px 0px 2px #000;
	-webkit-box-shadow: 1px 0px 2px #000;
	box-shadow: 1px 0px 2px #000;
}
.header a{
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #ddd;
	display: block;
	float: left;
}
.header a:hover{
	color: #fff;
}
.header span.right{
	float: right;
}
.header span.right a{
	float: none;
	display: inline;
}*/

.footer{
	background-color: #f5f5f5;
	color: #1B1B1B;
	margin-top: 0px;
	margin-bottom: 0px;
	/*height: 100%;
	position: fixed;
	bottom: 0;
	left: 0;*/
}
h5{
	width: inherit;	
	font-size: 20px;
	margin: 0;
}
.home{
	height: 100px;
}
.bmenu{
    padding: 0px;
    /*margin: 0 0 10px 0;*/
    position: relative;
}
.bmenu li{
    font-size: 35px;
    display: block;
}
.bmenu li a{
	display: block;
	text-transform: uppercase;
	text-shadow: 0px 0px 2px #1b1b1b;
	color: #1b1b1b;
	padding: 5px 20px;
	margin: 0;
	background: rgba(245,245,245,0.75);
	letter-spacing: 0;
	text-decoration: none;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
.bmenu a.current{
	background: rgba(27,27,27,0.75);
	color: rgba(255,105,97,0.75);
}
.bmenu:hover li a{
	text-shadow: 0px 0px 10px #1B1B1B;
	color: transparent;
	opacity: 0.2;
}
.bmenu:hover li a.current{
	text-shadow: 0px 0px 10px #FF6961;
	color: transparent;
	opacity: 0.2;
}
.bmenu li a:hover{
	opacity: 1;
	text-shadow: 0px 0px 1px #1B1B1B;
}
.bmenu li a.current:hover{
	opacity: 1;
	text-shadow: 0px 0px 1px #FF6961;
}
.bmenu li a:active{
	color: #FF6961;
	text-shadow: 0px 0px 2px #FF6961;
	transition: none;
}
.subject {
	/*clear: left;*/
	/*align: right;*/
	background-color: rgba(27,27,27,0.85);
	width: 72.5%;
	margin-left: 27.5%;
	margin-right: 2.5%;
	padding-bottom: 50px;
	/*border: 5px dashed white;*/
	text-align: center;
	left: 0;
}
.sub-title{
	text-align: left;
}
.slider-link{
	color: #ace5ee;
}
.slider-link:hover{
	background-color: #ace5ee;
	color: #1b1b1b;
}
.slider-link:active{
	background-color: #f5f5f5;
}
.graphpics-link, .logopics-link, .webpics-link, .culturepics-link{
	width: 250px;
	height: 250px;
	display: inline-block;
	border-radius: 100%;
}
.graph-over, .logo-over, .culture-over, .web-over{
	width: 100%;
	height: 100%;
	z-index: 5;
	opacity: .75;
	border-radius: 100%;
}
.graph-over{
	background-color: palegreen;
}
.logo-over{
	background-color: powderblue;
}
.culture-over{
	background-color: lavender;
}
.web-over{
	background-color: lightsalmon;
}
.graph-over:hover, .logo-over:hover, .culture-over:hover, .web-over:hover{
	opacity: 0;
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	-ms-transition: all 0.4s linear;
	transition: all 0.4s linear;
}
.graph-over:active, .logo-over:active, .culture-over:active, .web-over:active{
	opacity: .75;
	background-color: black;
	-webkit-transition: all 0s linear;
	-moz-transition: all 0s linear;
	-o-transition: all 0s linear;
	-ms-transition: all 0s linear;
	transition: all 0s linear;
}
.social-link{
	width: 72px;
	height: 72px;
	display: inline-block;
	opacity: 0.75;
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	-ms-transition: all 0.4s linear;
	transition: all 0.4s linear;
}
.social-link:hover{
	opacity: 1;
}
#chi{
	background: url(../pics/blueprint_planet.png) -350px -300px no-repeat;
}
#mil{
	background: url(../pics/glaser_planet.png) -350px -400px no-repeat;
}
#din{
	background: url(../pics/dining_planet.png) -200px -500px no-repeat;
}
#avm{
	background: url(../pics/vision_planet.png) -200px -500px no-repeat;
}
#wun{
	background: url(../pics/health_planet.png) -350px -600px no-repeat;
}
#ssm{
	background: url(../pics/suburban_planet.png) -200px -450px no-repeat;
}
#blu{
	background: url(../pics/bluedge_chekpoint.png) -50px -125px no-repeat;
}
#piz{
	background: url(../pics/pizzeria_planet.png) -550px -250px no-repeat;
}
#jai{
	background: url(../pics/jaimee_planet.png) -400px -225px no-repeat;
}
#kea{
	background: url(../pics/keaton_planet.png) -450px -450px no-repeat;
}
#fb{
	background: url(../pics/Facebook.png) 0 0 no-repeat;
}
#li{
	background: url(../pics/Linkedin.png) 0 0 no-repeat;
}
#tw{
	background: url(../pics/Twitter.png) 0 0 no-repeat;
}
#wp{
	background: url(../pics/Wordpress.png) 0 0 no-repeat;
}
.bio, .rep{
	width: 75%;
	margin: 0 auto;
	padding: 50px 0;
}
.work_link{
	color: #FF6961;
}
.work_link:hover{
	color: #ace5ee;
}
.work_link:active{
	color: #f5f5f5;
}
.person, .profession{
	width: 100%;
	max-width: 1300px;
	height: auto;
}
.cv{
	padding: 5px 20px;
	border:thick solid #ace5ee;
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	-ms-transition: all 0.4s linear;
	transition: all 0.4s linear;
}
.cv span{
	font-size: 18px;
}
.cv:hover{
	background-color: #ace5ee;
	color: #1b1b1b;
}
.cv:active{
	background-color: #FF6961;
	transition: none;
	border:thick solid #FF6961;
}
.contact{
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	-ms-transition: all 0.4s linear;
	transition: all 0.4s linear;
}
.contact{
	color: #ace5ee;
}
.contact:hover{
	background-color: #ace5ee;
	color: #1b1b1b;
}
.contact:active{
	background-color: #FF6961;
	transition: none;
}
.map{
	padding: 50px 0;
}
/*sliderb_container{
	text-align: center;
}*/
@media(min-width: 641px){
	#footer{
		display: none;
	}
	#header{
		display: none;
	}
	.mobile_nav{
		display: none;
	}
}
@media(max-width: 640px){
	.bmenu{
		display: none;
	}
	.subject{
		width: 75%;
		margin: 0 12.5%;
	}
	.mobile_nav{
		z-index: 1000;
		height: 100%;
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(27,27,27,0.9);
	}
	a.close_menu{
		width: 50px;
		height: 50px;
		background: url(../pics/close_menu.png);
		background-size: cover;
		float: right;
		margin-right: 5%;
		margin-top: 25px;
		-webkit-box-shadow: 2px -2px 0 white;
		-moz-box-shadow: 2px -2px 0 white;
		-ms-box-shadow: 2px -2px 0 white;
		-o-box-shadow: 2px -2px 0 white;
		box-shadow: 2px -2px 0 white;
	}
	a.close_menu:hover{
		-webkit-box-shadow: 0px 0px 1px white;
		-moz-box-shadow: 0px 0px 1px white;
		-ms-box-shadow: 0px 0px 1px white;
		-o-box-shadow: 0px 0px 1px white;
		box-shadow: 0px 0px 1px white;
	}
	a.close_menu:active{
		-webkit-box-shadow: 1px -1px 0 white inset;
		-moz-box-shadow: 1px -1px 0 white inset;
		-ms-box-shadow: 1px -1px 0 white inset;
		-o-box-shadow: 1px -1px 0 white inset;
		box-shadow: 1px -1px 0 white inset;
	}
	.amenu{
		margin-top: 25%;
		clear: both;
		padding: 0;
	}
	.amenu li{
    		font-size: 50px;
		text-align: center;
		display: block;
	}
	.amenu li a{
		display: block;
		text-transform: uppercase;
		text-shadow: 0px 0px 2px #ace5ee;
		color: #b9f2ff;
		margin: 0;
		letter-spacing: 0;
		text-decoration: none;
		-webkit-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		-o-transition: all 0.2s linear;
		-ms-transition: all 0.2s linear;
		transition: all 0.2s linear;
	}
	.amenu:hover li a{
		text-shadow: 0px 0px 10px #ace5ee;
		color: transparent;
		background: rgba(27,27,27,0.2);
	}
	.amenu li a:hover{
		background: rgba(172,229,238,1.0);
		color: #1b1b1b;
		text-shadow: 0px 0px 1px #000;
	}
	.amenu li a:active{
		background: rgba(245,245,245,1.0);
		color: #1b1b1b;
		transition: none;
	}
	#footer{
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 50px;
		background-color: rgba(0,0,0,0.90);
	}
	#header{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		height: 100px;
		background-color: rgba(0,0,0,0.9);
	}	
	#footer h5{
		margin-top: 5px;
		margin-left: 5px;
	}
	li.footer{
		display: none;
	}
	.subject{
		margin-top: 125px;
	}
	a.home{
		width: 75px;
		height: 75px;
		float: left;
		margin-left: 5%;
		margin-top: 12.5px;
		background: url(../pics/j_m_logo.png);
		background-size: cover;
	}
	a.res_menu{
		width: 50px;
		height: 50px;
		background: url(../pics/nav_menu.png);
		background-size: cover;
		float: right;
		margin-right: 5%;
		margin-top: 25px;
		-webkit-box-shadow: 2px -2px 0 white;
		-moz-box-shadow: 2px -2px 0 white;
		-ms-box-shadow: 2px -2px 0 white;
		-o-box-shadow: 2px -2px 0 white;
		box-shadow: 2px -2px 0 white;
	}
	a.res_menu:hover{
		-webkit-box-shadow: 0px 0px 1px white;
		-moz-box-shadow: 0px 0px 1px white;
		-ms-box-shadow: 0px 0px 1px white;
		-o-box-shadow: 0px 0px 1px white;
		box-shadow: 0px 0px 1px white;
	}
	a.res_menu:active{
		-webkit-box-shadow: 1px -1px 0 white inset;
		-moz-box-shadow: 1px -1px 0 white inset;
		-ms-box-shadow: 1px -1px 0 white inset;
		-o-box-shadow: 1px -1px 0 white inset;
		box-shadow: 1px -1px 0 white inset;
	}
}
@media(max-width: 360px){
	.graphpics-link, .logopics-link, .webpics-link{
		width: 200px;
		height: 200px;
	}
	h1{
		font-size: 30px;
	}
}