/* 1.0 */
body{
	font: 15px/1 Arial, Helvetica, sans-serif;
	padding: 0 0 100px 0;
	margin: 0;
	background-color:black;
}

/* unvisited link */
a:link {
    color:white;
	text-decoration:none;
}

/* visited link */
a:visited {
    color:white;
}

/* mouse over link */
a:hover {
    color: white;
}

/* selected link */
a:active {
    color: white;
}

ul {
	margin: 0;
	padding: 20px 20px 20px 40px;
}

li {
	padding: 5px 0 5px 10px;
}

/* Global */
.container{
	width:100%;
	margin:auto;
	overflow:hidden;
	position:relative;
}

#highlightholder {
	margin:0;
	padding: 20px 0 10px 0;
	display:flex;
    display:-webkit-flex; /* Safari */
	flex-wrap: wrap;
	background: rgba(56, 64, 125, 1);
}

#highlightholder2 {
	margin:0;
	padding: 20px 0 10px 0;
	display:flex;
    display:-webkit-flex; /* Safari */
	flex-wrap: wrap;
	background: rgba(48, 48, 95, 1);
}

.highlightcontainer {
	flex-grow: 1;
	flex-basis: 50%;
	color:#bdcfff;
}

.tournamentcontainer {
	flex-grow: 1;
	flex-basis: 20%;
	text-align:center;
	padding: 5px 5px 5px 5px;
	background: rgba(16, 17, 23, 1);	
}

#tournamentcontainer2 {
	flex-grow: 1;
	flex-basis: 100%;
	text-align:center;
	padding: 5px 5px 5px 5px;
	background: rgba(6, 7, 13, 1);	
}

.tournamentcontainer img{
	max-width:100px;
}

#tournamentcontainer3 img{
	max-width:200px;
}

.highlightvideocontainer{
	float:left;
	padding: 10px 10px 10px 0;
	width:100%;
}

.highlightheader {
	color:#bdcfff;

	float:left;
	width:100%;
}

.highlightheader h3{
	padding: 0 0 0 20px;
}

.highlightdetailspanel {
	float:left;
	width:100%;
	background: rgba(29, 32, 54, 1);
	color:#bdcfff;
	display:flex;
    display:-webkit-flex; /* Safari */
	flex-wrap: wrap;
}

.highlightdetailspanel p{
	margin:0;
	width:100%;
	padding: 20px 50px 20px 40px;
	background: rgba(16, 17, 23, 1);	
}

.highlightdetailspanel h5{
	margin:0;
	padding: 0;
}

#highlightheader2, #highlightvideocontainer2 {
	background: rgba(48, 48, 95, 1);
}

#highlight1detailspanel2 {
		background: rgba(48, 48, 95, 0.2);
}

table{
		color:white;
		vertical-align:center;
}

th{
	text-align:right;
	padding: 10px 10px 0 0;
}

td{
	text-alight:left;
	padding: 10px 0 0 0;
}

td.nopadding{
	padding: 0 0 0 0;
}

td.bottom{
	padding: 10px 0 10px 0;
}

th.bottom{
	padding: 0 20px 0 20px;
}

/* Header */
header{
	position:fixed;
	/*background:#11cff7;*/
	background-image:url('../img/header.jpg');
	background-size:100% 70px;
	color:white;
	height:70px;
	font-size:32px;
	top:0px;
	z-index:1;
	width:100%;
	border-bottom:#000 1px solid;
}

header .container{
	height:70px;
}

header #name{
	float:left;
	padding: 20px 20px 18px 20px;
	line-height:1;
	color:#0398c9;
}

header #name h1{
	margin:0;
	font-size:28px;
}

header #namesmall{
	display:none;
	float:left;
	padding: 10px 0 0 0;
	color:#0398c9;
}

header #namesmall h1{
	margin:0;
	font-size:20px;
}

header #title{
	float:left;
	font-size:22px;
	line-height:1;
	color:#a97ecb;
}

header #title p{
	margin:0;
	padding: 22px 20px 20px 20px;
	transform: translateY(5%); 
}

header #site{
	display:block;
	float:left;
	font-size:18px;
	color:#7ecba8;
}

header #site p{
	margin:0;
	padding: 26px 0 0 10px;
	transform: translateY(5%);
}

header #titlesmall{
	float:left;
	font-size:22px;
	line-height:1;
	color:#a97ecb;	
	display:none;
}

header #titlesmall p{
	margin:0;
	padding: 22px 20px 20px 20px;
	transform: translateY(5%); 
}

header #titlesmall2{
	display:block;
	float:left;
	font-size:18px;
	color:#7ecba8;
}

header #titlesmall2 p{
	margin:0;
	padding: 26px 0 0 10px;
	transform: translateY(5%); 
}

header #contactbutton{
	display:block;
	float:right;
	width:300px;
	height:70px;
	text-align:right;
	padding: 20px 20px 0 0;
	color:#7effd9;
	background: rgba(0, 0, 0, 0);
	background-image:url('../img/transparent.png');
	background-repeat:no-repeat;
	background-size:100%;
}

header #contactbuttonsmall{
	display:none;
	float:left;
	height:70px;
	padding: 0;
	color:#7effd9;
	background: rgba(0, 0, 0, 0);
	background-image:url('../img/transparent.png');
	background-repeat:no-repeat;
	background-size:100%;
}

header #contactbutton h1{
	margin:0;
	font-size:28px;
}

header #contactbutton:hover{
	color:#FFFFFF;
}

header .highlight, header .current a{
	color:#e8491d;
	font-weight:bold;
}

video{
	display:block;
	border:0;
	margin:0;
}

.highlight1{
	color:#a97ecb;
}

.menubutton {
	float:left;
	width:100px;
	height:55px;
	overflow:hidden;
}

.menubuttontrans{
	width:100px;
	height:55px;
}

.menubutton:hover .dropdown {
	display:block;
	float:left;
}

/* Dropdown Button */
.dropbtn {
    background-color: #000000;
	background: rgba(0, 0, 0, 0);
    color: white;
	padding: 0 0 0 25px;
    font-size: 16px;
    border: none;
	background-image:url('../img/menu_root_off.png');
	background-repeat:no-repeat;
	background-size:55px;
	background-position: center;
	text-align:center;
	min-height:70px;
}
.dropbtn:hover {
	background-image:url('../img/menu_root_on.png');
}

/* dropdown container */
.dropdown {
    position: relative;
    display: inline-block;
	float:left;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    float:left;
	display: none;
    position: absolute;
    background-color: #000000;
	background: rgba(0, 0, 0, 0.85);
    box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.75);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    text-decoration: none;

}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

#root {
	width: 55px;
	padding: 0 0 0 20px;
	background: rgba(0, 0, 0, 0);
	background-image:url('../img/menu_root_off.png');
	background-repeat:no-repeat;
	background-size:55px;
}

#root:hover {
	background-image:url('../img/menu_root_on.png');	
}

#h1z1 {
	clear:left;
	background: rgba(0, 0, 0, 0);
	background-image:url('../img/menu_h1z1_off.jpg');
	background-repeat:no-repeat;
	background-size:100%;
	margin: 0;
}

#h1z1:hover {
	background-image:url('../img/menu_h1z1_on.jpg');
}

#h1z1history {
	clear:left;
	width:100px;
	background: rgba(0, 0, 0, 0);
	background-image:url('../img/menu_h1z1_off.jpg');
	background-repeat:no-repeat;
	background-size:100%;
	margin: 0;
}

#h1z1history:hover {
	background-image:url('../img/menu_h1z1_on.jpg');
}

#justsurvive {
	background: rgba(0, 0, 0, 0);
	background-image:url('../img/menu_justsurvive_off.jpg');
	background-repeat:no-repeat;
	background-size:100%;
}

#justsurvive:hover {
	background-image:url('../img/menu_justsurvive_on.jpg');
}

#justsurvivehistory {
	width:100px;
	background: rgba(0, 0, 0, 0);
	background-image:url('../img/menu_justsurvive_off.jpg');
	background-repeat:no-repeat;
	background-size:100%;
	margin: 0;
}

#justsurvivehistory:hover {
	background-image:url('../img/menu_justsurvive_on.jpg');
}

#eqnext {
	background: rgba(0, 0, 0, 0);
	background-image:url('../img/menu_eqnext_off.jpg');
	background-repeat:no-repeat;
	background-size:100%;
}

#eqnext:hover {
	background-image:url('../img/menu_eqnext_on.jpg');
}

#eqnexthistory {
	width:100px;
	background: rgba(0, 0, 0, 0);
	background-image:url('../img/menu_eqnext_off.jpg');
	background-repeat:no-repeat;
	background-size:100%;
	margin: 0;
}

#eqnexthistory:hover {
	background-image:url('../img/menu_eqnext_on.jpg');
}

#landmark {
	background: rgba(0, 0, 0, 0);
	background-image:url('../img/menu_landmark_off.jpg');
	background-repeat:no-repeat;
	background-size:100%;
}

#landmark:hover {
	background-image:url('../img/menu_landmark_on.jpg');
}

#landmarkhistory {
	width:100px;
	background: rgba(0, 0, 0, 0);
	background-image:url('../img/menu_landmark_off.jpg');
	background-repeat:no-repeat;
	background-size:100%;
	margin: 0;
}

#landmarkhistory:hover {
	background-image:url('../img/menu_landmark_on.jpg');
}

#yaiba {
	background: rgba(0, 0, 0, 0);
	background-image:url('../img/menu_yaiba_off.jpg');
	background-repeat:no-repeat;
	background-size:100%;
}

#yaiba:hover {
	background-image:url('../img/menu_yaiba_on.jpg');
}

#yaibahistory {
	width:100px;
	background: rgba(0, 0, 0, 0);
	background-image:url('../img/menu_yaiba_off.jpg');
	background-repeat:no-repeat;
	background-size:100%;
	margin: 0;
}

#yaibahistory:hover {
	background-image:url('../img/menu_yaiba_on.jpg');
}

#lp3 {
	background: rgba(0, 0, 0, 0);
	background-image:url('../img/menu_lp3_off.jpg');
	background-repeat:no-repeat;
	background-size:100%;
}

#lp3:hover {
	background-image:url('../img/menu_lp3_on.jpg');
}

#lp3history {
	width:100px;
	background: rgba(0, 0, 0, 0);
	background-image:url('../img/menu_lp3_off.jpg');
	background-repeat:no-repeat;
	background-size:100%;
	margin: 0;
}

#lp3history:hover {
	background-image:url('../img/menu_lp3_on.jpg');
}

#pilotx {
	background: rgba(0, 0, 0, 0);
	background-image:url('../img/menu_pilotx_off.jpg');
	background-repeat:no-repeat;
	background-size:100%;
}

#pilotx:hover {
	background-image:url('../img/menu_pilotx_on.jpg');
}

#pilotxhistory {
	width:100px;
	background: rgba(0, 0, 0, 0);
	background-image:url('../img/menu_pilotx_off.jpg');
	background-repeat:no-repeat;
	background-size:100%;
	margin: 0;
}

#pilotxhistory:hover {
	background-image:url('../img/menu_pilotx_on.jpg');
}

#projectrunway {
	background: rgba(0, 0, 0, 0);
	background-image:url('../img/menu_projectrunway_off.jpg');
	background-repeat:no-repeat;
	background-size:100%;
}

#projectrunway:hover {
	background-image:url('../img/menu_projectrunway_on.jpg');
}

#projectrunwayhistory {
	width:100px;
	background: rgba(0, 0, 0, 0);
	background-image:url('../img/menu_projectrunway_off.jpg');
	background-repeat:no-repeat;
	background-size:100%;
	margin: 0;
}

#projectrunwayhistory:hover {
	background-image:url('../img/menu_projectrunway_on.jpg');
}

#contact{
	background-image:url('../img/contact_background.jpg');
	background-repeat:repeat;
	margin: 70px 0 0 0;
	padding: 0 0 20px 0;
	color:white;
} 

.contactpanel {
	width:90%;
	height:100px;
	margin:20px auto auto auto;
	background-image:url('../img/BlackGradient.png');
	background-repeat:repeat-y;
	background-size:100%;
	text-align:left;
}

.contactpaneldetails {
	display:flex;
    display:-webkit-flex; /* Safari */
	flex-wrap: wrap;
	margin:auto;
	width:380px;
}

#contactpaneldetails2 {
	width:340px;
}

#contactpaneldetails3 {
	width:200px;
}

.contactimageholder {
	flex-basis:25%;
	margin: 15px 0 15px 0;
	text-align:center;
}

.contactimageholder h3{
	margin: 30px 0 0 0;
}

.contactname {
	float:left;
	padding: 24px 0 0 20px;
	flex-basis:55%;
}

.contactpanel:link{
	background: rgba(126, 255, 217, 1);
}

.contactpanel:hover{
	background-color:#000000;
}

.contactpanel:active{
	background-color:#6616ac;	
}

.contactpanel:visited{
	background: rgba(0, 0, 0, 0);
}

#contactpanel2 {
	background: rgba(0, 0, 0, 0);
}

.contactspacer {
	float:left;
	width:100%;
	padding: 20px 0 20px 0;
}

.videocontainer{
	position:relative;
	margin: 70px 0 0 0;
	/*max-width:1366px;*/
}

.videocontainer video{
	position:relative;
	padding:0;
}



.showcaseheader{
	display:block;
	position:absolute;
	top:100px;
	left:150px;
	width:350px;
	text-align:center;
	background: rgba(0, 0, 0, 0.75);
}

#showcaseheadersmall{
	display:none;
	position:relative;
	top:0;
	left:0;
	width:100%;
	text-align:center;
	background: rgba(0, 0, 0, 0.75);
}

.showcaseheader a{
	color:#ec86f8;
}

#showcase .container{
	margin:0;
	padding:0;
}

#showcase h4{
	margin:10px 10px 0 0;
	font-size:16px;
}

#showcase h5{
	margin:0;
	font-size:16px;	
}

#showcase h6{
	margin:2px 0 5px 0;
	font-size:12px;
	font-weight:bold;
	color:#78499d;
}

#showcase p{
	margin:0;
	padding: 20px 10% 10px 10%;
	font-size:16px;
	color:#78499d;
}

.showcaseposition{
    display: -webkit-flex; /* Safari */
    display: flex;
	float:left;
	width:100%;
	background: rgba(0, 0, 0, 0.7);
}

.showcasepositionsection{
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 40%;
	text-align:right;
	color:#ffffff;
}

.showcasepositionsection img{
	width:50px;
}

.showcasepositionsection:nth-of-type(2){
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 60%;
	text-align:left;
	color:#a97ecb;	
}

.moreinfo{
	float:left;
	width:100%;
	text-align:center;
	color:#d2aaf1;
	background: rgba(20, 0, 50, 0.7);
	margin:0;
	padding: 0;
	-webkit-animation-name: attention; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: attention;
    animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction:alternate;
}

.moreinfo:hover{
	background: rgba(20, 0, 50, 0.25);
	color:#7effd9;
}

.showcaseposition table tr{
	padding: 10px 0 0 0;
	text-align: left;
}

.showcaselogo {
	display:inline-block;
	margin:20px 20px 20px 20px;
	max-height:100px;
}

.prevshowcase{
	color:#d2aaf1;
	float:left;
	width:50%;
	text-align:center;
	background: rgba(20, 0, 50, 0.7);
}

.nextshowcase{
	color:#d2aaf1;
	float:right;
	width:50%;
	text-align:center;
	background: rgba(20, 0, 50, 0.7);
}

.nextshowcaselarge{
	float:left;
	width:100%;
	text-align:center;
	color:#d2aaf1;
	background: rgba(20, 0, 50, 0.7);
	padding: 10px 0 10px 0;
}

.prevshowcase:hover, .nextshowcase:hover, .nextshowcaselarge:hover{
	color:#7effd9;
	background: rgba(20, 0, 50, 0.25);
}

#showcasescrollto{
	position:absolute;
	bottom:0;
	width:100%;
}

.showcasedescription{
	float:left;
	width:100%;
	color:#a97ecb;
	background-color:#0b0114;
	text-align:center;
	font-size:20pt;
	padding: 0 0 10px 0;
}

.showcasedescription h3{
	margin:0;
	padding: 20px 5% 10px 5%;
}

#tothetop h1{
	position:fixed;
	height:40px;
	width:100%;
	margin:0;
	padding: 10px 0 0 0;
	bottom:0px;
	z-index:2;
	background-image:url('../img/divider.jpg');
	background-color:#0b0114;
	background-repeat:no-repeat;
	color:#7effd9;
	font-size:32px;
	text-align:center;
}

#software {
	width:100%;
	color:#bdcfff;
}

#tools {
	width:100%;
	display:flex;
    display:-webkit-flex; /* Safari */
	flex-wrap: wrap;
}

.toolboxheader {
	flex-grow: 1;
	flex-basis: 50%;
	background: rgba(20, 0, 50, 0.8);
	text-align:center;
}

#toolboxheader2 {
	background: rgba(20, 0, 50, 0.6);
}

.toolboxheader h1 {
	padding: 10px 0 0 0;
	color:#a97ecb;
}

.toolboxholder {
	display:flex;
    display:-webkit-flex; /* Safari */
	flex-wrap: wrap;
	width:100%;
	float:left;
	padding: 0 0 20px 0;
}

.toolbox {
	display:flex;
    display:-webkit-flex; /* Safari */
	flex-wrap: wrap;
	margin: 0 0 20px 20px;
	flex-basis: 46%;
}

#toolboxsolo{
	flex-basis: 100%;
	margin: 0 auto 20px auto;
}

.toolboxtool{
	margin: 0 auto 0 auto;
	width:300px;
}

.toolboximage {
	float:left;
	padding: 0 10px 0 0;
}

.toolimage {
	width:40px;
}

.experienceimage {
	width:40px;
}

.toolboxname {
	float:left;
	height:100%;
	padding: 0 0 0 0;
	position: relative;
	font-size:14px;
	text-align:left;
}

.toolboxname h3{
	font-weight:bold;
	padding:0 0 5px 0;
	margin:0;
}

.toolboxname p{
	font-size:14px;
	font-weight:normal;
	padding:0 0 0 0;
	margin:0;
}

#highlights {
	background-color:#0b0114;
	text-align:left;
	color:gray;
}

#responsibilities {
	width:100%;
	color:#bdcfff;

}

#responsibilities h1{
	color:#a97ecb;
}

#responsibilityheader {
	padding: 20px 0 20px 0;
	background: rgba(20, 0, 50, 1);
}

#digitalresumeheader {
	padding: 20px 0 20px 0;
	background: rgba(50, 0, 80, 1);
}

#digitalresumeheader h1{
	color:#a97ecb;
	text-align:center;
}

#responsibilityheader h1{
	color:#a97ecb;
	text-align:center;
}

#responsibilitycontainer {
	background:black;
	display:flex;
    display:-webkit-flex; /* Safari */
	flex-wrap: wrap;
}

#highlightsheader {
	padding: 20px 0 20px 0;
	color:#a97ecb;
	background: rgba(20, 0, 50, 1);
}

#highlightsheader h1{
	text-align:center;
}

.responsibilitycolumn {
	/*width:24.25%;
	*/
	background: rgba(10, 10, 10, 1);
	float:left;
	text-align:center;
	padding: 10px 0 20px 0;
	flex-grow: 1;
	flex-basis: 25%;
}

.responsibilitycolumn h5{
	color:#0398c9;
}

#responsibilitycolumn1 {
	background: rgba(20, 0, 50, 0.8);
}

#responsibilitycolumn2 {
	background: rgba(20, 0, 50, 0.6);
}

#responsibilitycolumn3 {
	background: rgba(20, 0, 50, 0.4);
}

#responsibilitycolumn4 {
	background: rgba(20, 0, 50, 0.8);
}

.responsibilitydivider {
	width:1%;
	background: rgba(40, 40, 40, 1);
	float:left;
}

#historycontainer {
	color:#a97ecb;
	display:flex;
    display:-webkit-flex; /* Safari */
	flex-wrap: wrap;
}

.history1 {
	float:left;
	background: rgba(20, 0, 50, 0.6);	
	flex-grow: 0;
	flex-basis: 35%;
	text-align:right;
}

.history2 {
	float:left;
	flex-grow: 0;
	flex-basis: 1%;
}

.history3 {
	float:left;
	background: rgba(20, 0, 50, 0.7);	
	flex-grow: 0;
	flex-basis: 64%;
	display:flex;
    display:-webkit-flex; /* Safari */
	flex-wrap: wrap;
	overflow:hidden;
	padding:0;
	margin:0;
}

.history1 h1 {
	margin: 40px 20px 0 0;	
}

.history1starter h1{
	margin: 20px 20px 0 0;
}

.timelineentry h1 {
	margin:20px 0 0 0;
	color:#0398c9;
}

.timelineentry p {
	margin:3px 0 3px 0;	
}

.timelineentry h3 {
	margin:5px 0 5px 0;	
}

.timelineentry { /*daybreak entry*/
	background: rgba(52, 33, 76, 1);	
	padding: 0 0 10px 20px;
	flex-basis: 100%;
}

#spark { /* .timelineentry */
	background: rgba(48, 48, 95, 1);	
	max-height:250px;
	padding: 0 0 10px 20px;
}

#tornado { /* .timelineentry */
	background: rgba(41, 19, 71, 1);	
	max-height:250px;
	padding: 0 0 10px 20px;	
}

#nktimer { /* .timer */
	background: rgba(48, 48, 95, 1);	
	height:20px;
}

#daybreaktimer { /* .timer */
	background: rgba(52, 33, 76, 1);	
	height:260px;
}

#sparktimer { /* .timer */
	background: rgba(48, 48, 95, 1);	
	height:160px;
}

#tornadotimer { /* .timer */
	background: rgba(41, 19, 71, 1);	
	height:100%;
}

.timelinepositions {
	display:flex;
    display:-webkit-flex; /* Safari */
	flex-wrap: wrap;	
}

.timelineposentry {
	flex-grow: 1;
	flex-basis: 100%;
}

.timelineposentry2 {
	color:#865aa9;
	flex-grow: 1;
	flex-basis: 100%;
}

.timelineposentry2 h3{
	margin:0 0 10px 0;
}

.timelineprojects img{
	width:100px;
	padding: 10px 5px 10px 5px;
}

#education {
	color:#a97ecb;
	width:100%;
	text-align:center;
	background: rgba(41, 19, 71, 1);
	padding: 20px 0 20px 0;
}

#education h2 {
	margin: 10px 0 0 0;
}

#education h3 {
	margin: 10px 0 0 0;
}

#education h4 {
	margin: 0 0 0 0;
}

.contactimage {
	width:90px;
	align:left;
}

#contactimagesolo {
	width:200px;
}

footer {
	background-color:#000;
	padding: 20px 0 20px 0;
	color:#0398c9;
}

footer h3{
	margin:0;
	text-align:center;
}
footer p{
	margin:0;
	font-size:10pt;
	text-align:center;
	padding: 10px 0 0 0;
}

@-webkit-keyframes attention {
	0%   {background-color:rgba(239, 0, 241, 0.25);}
    33%  {background-color:rgba(186, 243, 133, 0.25);}
    66%  {background-color:rgba(242, 0, 239, 0.25);}
    100% {background-color:rgba(175, 216, 31, 0.25);}
}

/* Standard syntax */
@keyframes attention {
	0%   {background-color:rgba(239, 0, 241, 0.25);}
    33%  {background-color:rgba(186, 243, 133, 0.25);}
    66%  {background-color:rgba(242, 0, 239, 0.25);}
    100% {background-color:rgba(175, 216, 31, 0.25);}
}

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
 
  	.showcaseheader {
		width:300px;
		top:50px;
		left:50px;
	}
	
	header #contactbutton{
		width:150px;
	}
	
	.toolboxtool{
		width:220px;
	}
	
	.toolboxname h3{
		
	}
	
	.toolboxname p{
		font-size:12px;
	} 
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1024px) and (max-width: 1280px) {
  
  	.showcaseheader {
		width:300px;
		top:50px;
		left:50px;
	}
	
	header #contactbutton{
		width:150px;
	}
	
	.toolboxtool{
		width:220px;
	}
	
	.toolboxname h3{
		
	}
	
	.toolboxname p{
		font-size:12px;
	}

}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1023px) {
  
 	header #name{
		display:none;
	}
	
	header #namesmall{
		display:block;
	}
	
	header #namesmall h1{
		margin:0;
		font-size:20px;
	}
	
	 header #title{
		display:none;
	}
	
	header #site{
		display:none;
	}
	
	header #titlesmall{
		display:block;
		float:left;
		clear:left;
		font-size:14px;
		color:#a97ecb;
	}
	
	header #titlesmall p{
		margin:0;
		padding: 0 20px 0 2px;
		transform: translateY(5%); 
	}
	
	header #titlesmall2{
		display:block;
		float:left;
		clear:left;
		font-size:10px;
		color:#7ecba8;
	}
	
	header #titlesmall2 p{
		margin:0;
		padding: 5px 0 0 2px;
		transform: translateY(5%); 
	}

	header #contactbutton{
		display:block;
		width:150px;
	}
	
	header #contactbuttonsmall{
		display:block;
	}
	
	.showcaseheader {
		width:250px;
		top:25px;
		left:25px;
	}
	
	.showcaseheader a{
		font-size:12px;
	}
	
	#showcase h4{
		font-size:12px;
		margin: 10px 10px 0 10px;
	}
	
	#showcase h5{
		font-size:12px;
		margin: 0 0 0 10px;
	}
	
	#showcase h6{
		font-size:10px;
		margin: 0 0 0 10px;
	}
	
	.toolboxholder {
		padding: 0 0 30px 0;
	}	
	
	.toolbox{
		flex-basis: 100%;
		margin: 0 0 20px 0;
	}
	
	.toolboxtool{
		width:220px;
	}
	
	.toolimage{
		width:30px;
		padding:0 0 0 10px;
	}
	
	.toolboxname{
		padding: 0 0 0 5px;
	}
	
	.toolboxname h3{
		font-size:11px;
	}
	
	.toolboxname p{
		font-size:10px;
	}
	
	.highlightcontainer {
		flex-basis:100%;
	}
	
	.responsibilitycolumn{
		flex-basis:33%;
	}
	
	#h1z1history{
		width:100px;
		height:65px;
		margin: 0;
	}
	
	#justsurvivehistory{
		width:100px;
		height:65px;		
		margin: 0;
	}
	
	#eqnexthistory{
		width:100px;
		height:65px;
		margin: 0;
	}
	
	#landmarkhistory{
		width:100px;
		height:65px;
		margin: 0;
	}
	
	#yaibahistory{
		width:100px;
		height:65px;
		margin: 0;
	}
	
	#lp3history{
		width:100px;
		height:65px;
		margin: 0;
	}	
	
	#pilotxhistory{
		width:100px;
		height:65px;
		margin: 0;
	}
	
	#projectrunwayhistory{
		width:100px;
		height:65px;
		margin: 0;
	}
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  
  
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  
	header{
		background-size:cover;
	}

	header #name{
		display:none;
	}
	
	header #namesmall{
		display:block;
	}
	
	header #namesmall h1{
		margin:0;
		font-size:20px;
	}
	
	header #title{
		display:none;
	}
	
	header #site{
		display:none;
	}
	
	header #titlesmall{
		display:block;
		float:left;
		clear:left;
		font-size:14px;
		color:#a97ecb;
	}
	
	header #titlesmall p{
		margin:0;
		padding: 0 20px 0 2px;
		transform: translateY(5%); 
	}
	
	header #titlesmall2{
		display:block;
		float:left;
		clear:left;
		font-size:10px;
		color:#7ecba8;
	}
	
	header #titlesmall2 p{
		margin:0;
		padding: 5px 0 0 2px;
		transform: translateY(5%); 
	}

	header #contactbutton{
		display:block;
		width:150px;
	}
	
	header #contactbuttonsmall{
		display:block;
	}
	
	.showcaseheader {
		display:none;
	}
	
	#showcaseheadersmall{
		display:block;
		position:relative;
	}
	
	.toolboxheader {
		flex-basis: 100%;
	}
	
	.toolboxholder {
		padding: 0 0 30px 0;
	}	
	
	.toolbox{
		flex-basis: 50%;
		margin: 0 0 20px 0;
	}
	
	.toolboxtool{
		width:190px;
	}
	
	.toolimage{
		width:30px;
		padding:0 0 0 10px;
	}
	
	.toolboxname{
		padding: 0 0 0 5px;
	}
	
	.toolboxname h3{
		font-size:11px;
	}
	
	.toolboxname p{
		font-size:10px;
	}
	
	.responsibilitycolumn{
		flex-basis:50%;
	}
	
	.responsibilitycolumn h1{
		font-size:15px;
	}
	
	.responsibilitycolumn p{
		margin: 5px 0 0 0;
		font-size:10px;
	}
	
	.highlightcontainer {
		flex-basis:100%;
	}
	
	#h1z1history{
		width:75px;
		height:50px;
		margin: 0;
	}
	
	#justsurvivehistory{
		width:75px;
		height:50px;		
		margin: 0;
	}
	
	#eqnexthistory{
		width:75px;
		height:50px;
		margin: 0;
	}
	
	#landmarkhistory{
		width:75px;
		height:50px;
		margin: 0;
	}
	
	#yaibahistory{
		width:75px;
		height:50px;
		margin: 0;
	}
	
	#lp3history{
		width:75px;
		height:50px;
		margin: 0;
	}	
	
	#pilotxhistory{
		width:75px;
		height:50px;
		margin: 0;
	}
	
	#projectrunwayhistory{
		width:75px;
		height:50px;
		margin: 0;
	}
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 0px) and (max-width: 480px) {

	header{
		background-size:cover;
	}

	header #name{
		display:none;
	}
	
	header #namesmall{
		display:block;
	}
	
	header #namesmall h1{
		margin:0;
		font-size:20px;
	}
	
	 header #title{
		display:none;
	}
	
	header #site{
		display:none;
	}
	
	header #titlesmall{
		display:block;
		float:left;
		clear:left;
		font-size:14px;
		color:#a97ecb;
	}
	
	header #titlesmall p{
		margin:0;
		padding: 0 20px 0 2px;
		transform: translateY(5%); 
	}
	
	header #titlesmall2{
		display:block;
		float:left;
		clear:left;
		font-size:10px;
		color:#7ecba8;
	}
	
	header #titlesmall2 p{
		margin:0;
		padding: 5px 0 0 2px;
		transform: translateY(5%); 
	}

	header #contactbutton{
		display:none;
		width:65px;
	}
	
	header #contactbutton h1{
		font-size:10pt;
	}
	
	header #contactbuttonsmall{
		display:block;
		width:190px;
	}
	
	header #titlesmall{
		font-size:10pt;
	}
	
	.showcaseheader {
		display:none;
	}
	
	#showcaseheadersmall{
		display:block;
		position:relative;
	}
	
	.toolboxheader {
		flex-basis: 100%;
	}
	
	.toolboxholder {
		padding: 0 0 30px 0;
	}	
	
	.toolbox{
		flex-basis: 50%;
		margin: 0 auto 20px auto;
	}
	
	.toolboxtool{
		width:190px;
	}
	
	.toolimage{
		width:30px;
		padding:0 0 0 10px;
	}
	
	.toolboxname{
		padding: 0 0 0 5px;
	}
	
	.toolboxname h3{
		font-size:11px;
	}
	
	.toolboxname p{
		font-size:10px;
	}
	
	.responsibilitycolumn{
		flex-basis:50%;
	}
	
	.responsibilitycolumn h1{
		font-size:15px;
	}
	
	.responsibilitycolumn p{
		margin: 5px 0 0 0;
		font-size:10px;
	}

	.timelineentry h1, h3{
		font-size: 12px;
	}
	
	.timelineentry p{
		font-size: 10px;
	}
	
	#h1z1history{
		width:50px;
		height:30px;
		margin: 0;
	}
	
	#justsurvivehistory{
		width:50px;
		height:30px;		
		margin: 0;
	}
	
	#eqnexthistory{
		width:50px;
		height:30px;
		margin: 0;
	}
	
	#landmarkhistory{
		width:50px;
		height:30px;
		margin: 0;
	}
	
	#yaibahistory{
		width:50px;
		height:30px;
		margin: 0;
	}
	
	#lp3history{
		width:50px;
		height:30px;
		margin: 0;
	}	
	
	#pilotxhistory{
		width:50px;
		height:30px;
		margin: 0;
	}
	
	#projectrunwayhistory{
		width:50px;
		height:30px;
		margin: 0;
	}
	
	.highlightcontainer{
		flex-basis:100%;
	}
	
	.contactpanel{
		height:60px;
	}
	
	.contactimage{
		width:50px;
		align:left;
	}
	
	.contactimageholder{
		flex-basis:20%;
		margin:10px 0 0 0;
	}
	
	#contactimageholdersolo{
		margin:10px auto 0 0;
	}
	
	#contactimagesolo{
		width:150px;
	}
	
	.contactname{
		padding:14px 0 0 10px;
		flex-basis:60%;
	}
	
	.contactname h3{
		font-size:10px;
	}
	
	.contactpaneldetails{
		width:212px;
	}
	
	#contactpaneldetails2{
		width:212px;
		margin:auto;
	}
	
	#digitalresumeheader h1{
		font-size:24px;
	}
}

/* 
  ##Large Vertical dropdown
*/
@media (min-height: 530px) and (min-width:150px) {
	/*defautl behavior, no change*/
}

/* 
  ##Small Vertical dropdown
*/
@media (min-height:440px ) and (max-height: 529px) {
	.dropdown-content {
		width:75px;
	}
	
	.menubutton{
		width:75px;
		height:45px;
	}
	
	.menubuttontrans{
		width:75px;
		height:40px;
	}
}

/* 
  ##Very Small Vertical dropdown
*/
@media (min-height:0px ) and (max-height: 439px) {
	.dropdown-content {
		width:65px;
	}
	
	.menubutton{
		width:65px;
		height:35px;
	}
	
	.menubuttontrans{
		width:65px;
		height:40px;
	}
}

/* 
  ##Very Small Two-Column dropdown
*/
@media (min-height:0px ) and (max-height: 355px) and (min-width:130px) {
	.dropdown-content {
		width:130px;
	}
	
	.menubutton{
		width:65px;
		height:35px;
	}
	
	.menubuttontrans{
		width:65px;
		height:40px;
	}
}

/* 
  ##Very Small Three-Column dropdown
*/
@media (min-height:146px ) and (max-height: 355px) and (min-width:195px) {
	.dropdown-content {
		width:195px;
	}
	
	.menubutton{
		width:65px;
		height:35px;
	}
	
	.menubuttontrans{
		width:65px;
		height:40px;
	}
}

/* 
  ##Very Small Four-Column dropdown
*/
@media (min-height:0px ) and (max-height: 182px) and (min-width:260px) {
	.dropdown-content {
		width:260px;
	}
}

/* 
  ##Very Small Eight-Column dropdown
*/
@media (min-height:0px ) and (max-height: 182px) and (min-width:520px) {
	.dropdown-content {
		width:520px;
	}
}