div{
	box-sizing:border-box;
}

html {
    overflow-y: scroll; 
}

/*
NOTES

silver

green
blue
cyan


border radius 4

*/



@font-face {
	font-family:Proxima_Nova;
	src: url(../fonts/Proxima_Nova_Alt_Light.otf);
}

@font-face {
	font-family:neuropolx;
	src: url(../fonts/neuropol_x_rg.ttf);
}

@font-face {
	font-family:IronickNF;
	src: url(../fonts/IronickNF.ttf);
}


div#Resume.styleAlpha{
	/*max-width:1000px;*/
	background-color:transparent;
	margin-right:auto;
	margin-left:auto;
	border: 1px solid transparent;
	border-radius:2px;
	overflow:visible;
	box-sizing:border-box;
	font-family:"Proxima_Nova";
	min-width:440px;
	background-image: url(../images/handmade-paper-pattern_mod1.jpg);
	box-shadow: rgba(240,255,240,1) 4px 4px 12px, rgba(240,255,240,1) 0px 0px 12px, rgba(240,255,240,1) 0px 4px 12px, rgba(240,255,240,1) 4px 0px 12px;
}

.styleAlpha .structure_color{
	background-color: rgba(64, 64, 0, 0.2);
	border-color: rgba(64, 64, 0, 0.2);
}

.styleAlpha .text_color_1{
	/*color:black;*/
	color:rgb(28,56,0);
}

.styleAlpha div.bar{
	width:100%;
	height:.25em;
	margin:0px 0px;
	border:4px solid;
	border-color:rgba(0, 0, 0, 0);
	background-color:rgba(0, 0, 0, 0.5);
	border-radius: 4px;
	display:none;
}

.styleAlpha .centered_flex_box{
 	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
 	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
 	display: -ms-flexbox;      /* TWEENER - IE 10 */
 	display: -webkit-flex;     /* NEW - Chrome */
 	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
 	margin:4px 16px;
}
.styleAlpha .flex_item{
	-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
	-moz-box-flex: 1;         /* OLD - Firefox 19- */
	width: 20%;               /* For old syntax, otherwise collapses. */
	-webkit-flex: 1;          /* Chrome */
	-ms-flex: 1;              /* IE 10 */
  	flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  	margin:4px 8px;
}

.styleAlpha .rolebox{
	text-align:center;
	font-weight:bold;
	font-family:"Marcellus SC";
	font-size:18px;
}

.styleAlpha .green_border{
	border: 2px solid #285600;
    border-radius: 4px;
    box-shadow: 1px 1px 2px #142800;
}

.styleAlpha div.head{

	font-size:64px;
	letter-spacing: 8px;
	text-align:center;
	font-weight:bold;
	font-family:"Marcellus SC";
	margin:8px 16px;
	padding:4px;
	overflow:hidden;
}


.styleAlpha div.professional_summary{
	margin: 8px 16px;
	font-family:"Proxima_Nova";
	/*text-shadow: 1px 1px white;*/
	font-size: 18px;
	font-weight:bold;
	padding:10px 20px;
	padding-top:20px;
	padding-bottom:20px;
	text-align:left;
	/*border: 4px solid #285600;
    border-radius: 8px;
    box-shadow: 1px 1px 2px #142800;*/
	/*text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;*/
}

.styleAlpha div.larger_left{
	width:62%;
	box-sizing:border-box;
	float:left;
	padding:0px 8px 0px 16px;
}

.styleAlpha div.smaller_right{
	width:38%;
	box-sizing:border-box;
	float:right;
	padding: 0px 16px 0px 8px;
}


.styleAlpha div.detail_section{

	/*padding-left:10px;
	padding-right:10px;*/
	
	margin:8px 0px -8px 0px;
}

@media screen and (max-width: 900px) {
    .styleAlpha div.detail_section {
        clear:both;
        float:none;
        width:100%;
        padding: 0px 8px;
        margin:0px 0px 0px 0px;
    }
    .styleAlpha div.larger_left{
    	margin-top:16px;
	}

	.styleAlpha div.smaller_right{
		margin-bottom:0px;
	}
}





/*
▒█▀▀▀ █░█ █▀▀█ █▀▀█ █▀▀▄ █▀▀▄ █▀▀█ █▀▀▄ █░░ █▀▀ 
▒█▀▀▀ ▄▀▄ █░░█ █▄▄█ █░░█ █░░█ █▄▄█ █▀▀▄ █░░ █▀▀ 
▒█▄▄▄ ▀░▀ █▀▀▀ ▀░░▀ ▀░░▀ ▀▀▀░ ▀░░▀ ▀▀▀░ ▀▀▀ ▀▀▀ 

▒█▀▀▀█ █▀▀ █▀▀ ▀▀█▀▀ ░▀░ █▀▀█ █▀▀▄ 
░▀▀▀▄▄ █▀▀ █░░ ░░█░░ ▀█▀ █░░█ █░░█ 
▒█▄▄▄█ ▀▀▀ ▀▀▀ ░░▀░░ ▀▀▀ ▀▀▀▀ ▀░░▀ 
*/

.expandable_section{
	/*border:solid 4px black;*/	
	border:solid 2px #285600;
	padding:8px 8px 24px 8px;
	width:100%;
	margin-bottom:16px;
	box-sizing:border-box;
	border-radius:4px;
	box-shadow:1px 1px 2px #142800;
	/*overflow:auto;*/
	
}

.transparent_background_section_color{

}

.transparent_background_section{
	background-color:rgba(64,64,0,0.2);
	/*background-color:rgba(256,256,128,0.8);*/
	/*background-image: url(../images/handmade-paper-pattern_mod3_transparent.jpg);*/
	/*overflow:hidden;*/
	/*background-image: url(../images/handmade-paper-pattern_mod1.jpg);*/
	/*display:flex;*/
}


/*.transparent_background_section:before { */
/*}*/


/*
█░░ █▀▀ ▀█░█▀ █▀▀ █▀▀█ 
█░░ █▀▀ ░█▄█░ █▀▀ █▄▄▀ 
▀▀▀ ▀▀▀ ░░▀░░ ▀▀▀ ▀░▀▀ 
*/

	.section_wheel{
		width:20px;
		height:20px;
		border-radius:25px;
		background-color:silver;
		float:left;
		border:2px solid black;
		box-sizing:border-box;
		text-align:center;
		overflow:visible;
		margin-top:24px;
		animation-duration: 4s;
		cursor:pointer; /*fallback*/
		cursor:grab;
		

		box-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
	}

	.section_wheel.green{
		background: #9dd53a; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #9dd53a 0%, #a1d54f 39%, #80c217 52%, #549b09 66%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#9dd53a), color-stop(39%,#a1d54f), color-stop(52%,#80c217), color-stop(66%,#549b09)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 39%,#80c217 52%,#549b09 66%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 39%,#80c217 52%,#549b09 66%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 39%,#80c217 52%,#549b09 66%); /* IE10+ */
background: linear-gradient(135deg,  #9dd53a 0%,#a1d54f 39%,#80c217 52%,#549b09 66%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#549b09',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	}

.section_wheel .grab_blanket{
	position:absolute;
	width:40px;
	height:80px;
	margin-top:-30px;
	margin-left:-10px;
	border:none;
	background-color:transparent;
}

.section_wheel_invisible_rotator{
	margin-top:0px;
	width:16px;
	height:16px;
	overflow:visible;
	text-align:center;
	animation-duration: 2s;
	border:2px solid transparent;
	box-sizing:border-box;
}	
	.wheel_handle{
		width:12px;
		height:12px;
		margin-left:auto;
		margin-right:auto;
		background-color:silver;
		border-radius:7px;
		border:solid black 2px;
		margin-top:-30px;

		/*box-shadow: 0 0 1px #080, 0 0 2px #000;*/
	}

	.wheel_handle.green{
		background: #9dd53a; /* Old browsers */
		background: -moz-linear-gradient(-45deg,  #9dd53a 0%, #a1d54f 39%, #80c217 52%, #549b09 66%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#9dd53a), color-stop(39%,#a1d54f), color-stop(52%,#80c217), color-stop(66%,#549b09)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 39%,#80c217 52%,#549b09 66%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 39%,#80c217 52%,#549b09 66%); /* Opera 11.10+ */
		background: -ms-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 39%,#80c217 52%,#549b09 66%); /* IE10+ */
		background: linear-gradient(135deg,  #9dd53a 0%,#a1d54f 39%,#80c217 52%,#549b09 66%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#549b09',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	}
	.section_wheel .red, .section_wheel.red{
		background-color:rgba(0,100,0,0.4);
	}

	.section_wheel:hover .red, .section_wheel.red:hover{
		background-color:rgba(0,100,0,0.7);
	}

	.wheel_spike{
		margin-left:auto;
		margin-right:auto;
		background-color:black;
		height:18px;
		width:4px;
		margin-top:-2px;
	}

@keyframes push_and_snap_back_from_open {
  0% {
    transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
  }
  15% {
  	transform: rotate(164deg);
    -moz-transform: rotate(164deg);
    -webkit-transform: rotate(164deg);
  }
  20% {
  	transform: rotate(184deg);
    -moz-transform: rotate(184deg);
    -webkit-transform: rotate(184deg);
  }
  25% {
  	transform: rotate(178deg);
    -moz-transform: rotate(178deg);
    -webkit-transform: rotate(178deg);
  }
  30% {
  	transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
  }
 
}

@keyframes push_and_snap_back {
  0% {
    transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  15% {
  	transform: rotate(22deg);
    -moz-transform: rotate(22deg);
    -webkit-transform: rotate(22deg);
  }
  20% {
  	transform: rotate(-14deg);
    -moz-transform: rotate(-14deg);
    -webkit-transform: rotate(-14deg);
  }
  25% {
  	transform: rotate(7deg);
    -moz-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
  }
  30% {
  	transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
 
}

@keyframes wobble_in {
    0% {
    	transform: translate(0px,0px);
    }
    15% {
    	transform: translate(-18px,0px);
    }
    25% {
    	transform: translate(4px,0px);
    }
    30% {
	  	transform: translate(-3px,0px);
	}
	35% {
	  	transform: translate(1px,0px);
	}
	40% {
	  	transform: translate(0px,0px);
	}
}

@keyframes wobble_out {
    0% {
    	transform: translate(0px,0px);
    }
    15% {
    	transform: translate(18px,0px);
    }
    25% {
    	transform: translate(-4px,0px);
    }
    30% {
	  	transform: translate(3px,0px);
	}
	35% {
	  	transform: translate(-1px,0px);
	}
	40% {
	  	transform: translate(0px,0px);
	}

}

@keyframes spread_and_return {
 	0% {
    	margin-bottom: 1px;
  	}
  	15% {
    	margin-bottom: 4px;
  	}
  	30% {
    	margin-bottom: 1px;
  	}
}

@keyframes condense_and_return {
 	0% {
    	margin-bottom: 1px;
  	}
  	15% {
    	margin-bottom: -4px;
  	}
  	30% {
    	margin-bottom: 1px;
  	}
}
/*HOVER ON LEVER TRIGGERS*/

	.expandable_section.open .section_wheel:hover:not(.prevent_animation) .section_wheel_invisible_rotator{
		animation-name:push_and_snap_back_from_open;
	}

	.expandable_section.closed .section_wheel:hover:not(.prevent_animation) .section_wheel_invisible_rotator{
		animation-name:push_and_snap_back;
	}

	.expandable_section.closed .section_wheel:hover:not(.prevent_animation) ~ .section_title{
		/*animation-name:wobble_in;*/
	}
	.expandable_section.open .section_wheel:hover:not(.prevent_animation) ~ .section_title{
		/*animation-name:wobble_out;*/
	}

	.expandable_section.closed .section_wheel:hover:not(.prevent_animation) ~ .entry .entry_title {
		animation-name:spread_and_return;
	}

	.expandable_section.open .section_wheel:hover:not(.prevent_animation) ~ .entry .entry_title {
		animation-name:condense_and_return;
	}



	.expandable_section .section_title{
		font-weight:bold;
		font-size:32px;
		color:black;
		overflow:visible;
		background-color: transparent;
	    animation-duration: 2s; 
	    float:right;
	    display:inline-block;
	    margin-left:20px;
	    margin-right:20px;
	    padding:5px 10px;
	    opacity:0.4;
	    transition: text-shadow 2s;
	    font-family:"Marcellus SC";
		/*color:rgb(42,42,42);*/
		/*color:rgb(42,84,00);*/

		/*color:rgb(28,56,0);*/
		color:#1C3800;
		text-shadow: 1px 1px black;

	    /*text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135, 10px 10px 7px rgba(0,0,0,0.6);*/
	    /*text-shadow: 10px 10px 7px rgba(0,0,0,0.6);*/
	}

	.expandable_section.open .section_title{
		/*text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135, 10px 10px 7px rgba(0,0,0,0.4);*/

		/*lighter*/
		/*text-shadow: 0px 1px 0px #999, 0px 2px 0px #777, 0px 3px 0px #888, 0px 4px 0px #999, 0px 5px 0px #aaa, 0px 6px 0px #bbb, 0px 7px 0px #ccc, 0px 8px 7px #ddd, 10px 10px 7px rgba(0,0,0,0.4);*/

		/*Darker Opaque Fade*/
		/*text-shadow: 0px 1px 0px rgba(0,0,0,0.7), 0px 2px 0px rgba(20,20,20,0.7), 0px 3px 0px rgba(40,40,40,0.7), 0px 4px 0px rgba(60,60,60,0.7), 0px 5px 0px rgba(80,80,80,0.7), 0px 6px 0px rgba(100,100,100,0.7), 0px 7px 0px rgba(120,120,120,0.7), 0px 8px 0px rgba(140,140,140,0.7), 10px 10px 7px rgba(0,0,0,0.7);*/


		/*text-shadow: 0px 1px 0px rgba(0,0,0,0.4), 0px 2px 0px rgba(30,30,30,0.4), 0px 3px 0px rgba(60,60,60,0.4), 0px 4px 0px rgba(90,90,90,0.4), 0px 5px 0px rgba(120,120,120,0.4), 0px 6px 0px rgba(150,150,150,0.4), 0px 7px 0px rgba(180,180,180,0.4), 0px 8px 0px rgba(210,210,210,0.4), 10px 10px 7px rgba(32,32,32,0.4);*/
		/*10px 10px 7px rgba(214,214,214,0.9)*/
		/*text-shadow: 1px 1px rgba(255, 255, 255, 0.8);*/
	} 












/*
█▀▀ █▀▀▄ ▀▀█▀▀ █▀▀█ █░░█ 
█▀▀ █░░█ ░░█░░ █▄▄▀ █▄▄█ 
▀▀▀ ▀░░▀ ░░▀░░ ▀░▀▀ ▄▄▄█ 
*/




.expandable_section .entry{
	display:block;
	float:none;
	clear:both;

}

.entry .entry_title {
	font-size:20px;
	color:white;
	margin-left:40px;
	margin-right:40px;
	padding:4px 8px 4px 24px;
	clear:both;
	background-color:rgba(0,0,0,0.5);
	animation-duration:2s;
	margin-bottom:1px;
	border-bottom:solid 1px black;
	position:relative;
	overflow:hidden;
	border-top-right-radius: 2px;
	border-top-left-radius: 2px; 

	/*box-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777;*/
}

.entry .entry_title:hover {
	background-color:rgba(0,0,0,0.7);
	cursor:pointer;
}

.entry .entry_title .location{
	font-size:14px;
	padding-left:8px;
}

.entry .entry_title .entry_title_position{
	font-style:none;
}

.entry .entry_title .entry_title_organization{
	font-style:italic;
}


/*
▒█▀▀▀ █▀▀▄ ▀▀█▀▀ █▀▀█ █░░█ 　 ▒█▀▀█ █▀▀█ █▀▀▄ ▀▀█▀▀ █▀▀ █▀▀▄ ▀▀█▀▀ 
▒█▀▀▀ █░░█ ░░█░░ █▄▄▀ █▄▄█ 　 ▒█░░░ █░░█ █░░█ ░░█░░ █▀▀ █░░█ ░░█░░ 
▒█▄▄▄ ▀░░▀ ░░▀░░ ▀░▀▀ ▄▄▄█ 　 ▒█▄▄█ ▀▀▀▀ ▀░░▀ ░░▀░░ ▀▀▀ ▀░░▀ ░░▀░░ 
*/

.expandable_section.closed .entry .entry_content{
	display:none;
}

.expandable_section.open .entry .entry_content{
	display:block;
}

.entry .entry_content{
	margin-left:40px;
	margin-right:40px;
	border-left:1px solid black;
	border-right:1px solid black;
	border-top:none;
	border-bottom:none;
	background-color:rgba(255,255,255,0.2);
	overflow:auto;
	padding:4px 10px 4px 24px;
}

.entry .entry_content ul:not(.no_offset){

	margin: 4px 0px 4px -40px;
	display:inline-block;
}

ul.no_offset{
	margin:4px 4px 4px -24px;
}

/*.entry .entry_content p{
	line-height: 2.0;
	margin:0px 0px -4px;
}*/

.entry .entry_content img:not(.social_icon){
	width:100px;
	display:inline;
	vertical-align:text-top;
	float:left;
	margin:5px 5px 5px 2px;
	border:1px solid black;
}

.entry .entry_content .img-box img{
	width:100px;
	display:inline;
	vertical-align:text-top;
	float:left;
	clear:left;
	margin:5px 5px 5px 2px;

}

.entry .entry_content .dates{
	font-weight:bold;
	font-size:20px;
	text-align:center;
}

.entry .entry_content .portfolio_link{
	font-weight:bold;
	font-size:20px;
	text-align:center;
	
	/*float:left;*/
	/*display:inline-block;*/
	/*margin-left:40px;*/
}
.entry .entry_content .portfolio_link a{
	background-color:silver;
	padding: 4px 8px;
	border:1px solid black;
	color:darkpurple;
	text-decoration:none;
	display:inline;
	line-height:34px;
}
.entry .entry_content .portfolio_link a:hover{
	background-color:white;
	padding: 4px 8px;
	border:1px solid black;
}

.entry .entry_content .location{
	font-size:14px;
	text-align:center;
	float:right;
	padding:0px;
	margin:0px;
}



img.portfolio_image:hover{
	cursor:pointer;
}




span.skill_attribute{
	margin: 0px 4px 4px;
	padding: 2px 4px;
	border:1px solid gray;
	border-radius: 2px;
/*	background-color:rgba(142,184,142,1);*/
	background-color:rgba(0,100,0,0.4);
	display:inline-block;
	color:white;
}

div.skill_attribute_box{
	/*border:1px solid black;*/
	margin-left:110px;
	text-align:center;
}


/*
▒█▀▀▀█ █░█ ░▀░ █░░ █░░ 　 ▒█▀▀▀ ░▀░ █░░ █░░ 
░▀▀▀▄▄ █▀▄ ▀█▀ █░░ █░░ 　 ▒█▀▀▀ ▀█▀ █░░ █░░ 
▒█▄▄▄█ ▀░▀ ▀▀▀ ▀▀▀ ▀▀▀ 　 ▒█░░░ ▀▀▀ ▀▀▀ ▀▀▀ 
*/

.entry_title span.title{
	position:relative;
	z-index:10;
}

/*obsolete for skills as im just using the top container*/
.entry_title .scale{ 
	width:100%;
	/*border:solid 1px black;*/
	display:block;
	position:absolute;
	top:0;
	right:0;
	left:0;
	bottom:0;
	z-index:1;
	/*padding:-4px -8px -4px -24px;*/
}
.entry_title .fill{
	background-color:rgba(0,100,0,0.4);
	height:64px;
	display:block;
	position:absolute;
	top:0;
	right:0;
	left:0;
	bottom:0;
	z-index:1;
}


/*.entry_content .scale{
	width:100%;
	border:solid 1px black;
}
.entry_content .fill{
	background-color:blue;
	height:10px;
}*/




img.social_icon{
	height:30px;
	/*float:right;*/
	vertical-align: middle;
	margin:5px;
	padding:0px;
	border:none;
}