/*GENERAL STUFF*/
*
{
	margin:						0;
	padding:					0;
	color:						#FFFFFF;
}	
root{font-size:					16px;}
/*Style headings*/	
h1{	font-family:				'Galindo', cursive; 	font-size:	4.5em}
h2{	font-family:				'Skranji', cursive; 	font-size:	3em}
h3{	font-family:				'Unica One', cursive; 	font-size:	3em}
h4{	font-family:				'Unica One', cursive; 	font-size:	1.875em}

/*other sizes
project description: 1.313em
team:	1.5em
about:  1.125em
item:	1em
language type: 1.5em
inner title:	1.25em
mail:	3.75em
*/
/*Make sure everything is treated as a block*/
header, section, footer, aside, nav, article, hgroup
{
	display:					block;
}	
body
{		
	width:						100%;
    overflow-x:                 hidden;
	
	font-family: 				'Ubuntu', sans-serif;
	font-size:					1em;
	background:					#284448;
	position:					relative;
}	

/*MENU*/
#home
{
	height:						4.875em;
}
.MENU		
{		
	position:					fixed;
	width:						100%;
	height:						4.875em;
	background-color:			#1D1E29;
	z-index:					2;
}	
.MENU .lines
{
    position:absolute;
	top:						0.4375em;
	width:						100%;
	height:						4em;
	outline:					2px solid #4C665D;
}
.menuBtn
{
    display:none;
    font-family:				'Unica One', cursive;
    font-size:	                3em;
    font-weight:700;
	color:						#1D1E29;
	padding-bottom:				0.1em;
	padding-top:					0.1em;
	margin:					    0.1em auto;
	padding-left:				0.333em;
	padding-right:				0.333em;
    background:#FFFFFF;
    border:0;
	border-radius:				1.25em;
	text-align:					center; 
	position:					relative;
}
.menuBtn:focus {outline:0;}
.MENU div
{
	text-align:					center; 
	position:					relative;
	top:						50%;
}
.MENU div a img		
{	
	width:						4em;
	margin-top:					-50%;
	transform: 					translateY(1em);
    -webkit-filter:             grayscale(100%) brightness(300%);
    filter:                     greyscale(100%) brightness(300%);
    transition:                 filter 0.3s, -webkit-filter 0.3s, -moz-filter 0.3s;
}
.MENU div a .menTxt
{
    display:none;
}
.MENU div a:hover img		
{	
    -moz-filter:                grayscale(0%) brightness(100%);
    -webkit-filter:             grayscale(0%) brightness(100%);
    filter:                     greyscale(0%) brightness(100%);
}
.MENU div a div		
{		
	margin-top:-50%;
	display:					inline-block;
	list-style:					none;
	text-align:					center;
	text-decoration:			none;
	background-color:			#FFFFFF;
	border-radius:				1.25em;
	transition:					background-color 0.3s;
}
.MENU div a:hover div		
{	
	background-color:			#D64f49;
}
.MENU div a div h3
{
	color:						#1D1E29;
	margin-bottom:				0.1em;
	margin-top:					0.1em;
	margin-left:				0.333em;
	margin-right:				0.333em;
	transition:					color 0.3s;
}
.MENU div a:hover div h3
{
	color:						#FFFFFF;
}

/*HOME*/
div.parallax
{
	display:					block;
	height:						19.869em;
	font-size:					2em;
	position:					relative;
	overflow:					hidden;
	text-align:					center;
}
#title 
{
	position:					absolute;
    width:100%;
    text-align:center;
	z-index:					1;
}	
#title hgroup
{
	position:					relative;
	top:						2.35em;
}
#title hgroup h1, hgroup h2
{
	text-align:					center;
	text-shadow:				rgba(47, 17, 16, 1) -0.16em 0.13em 0.2em;
}
#title hgroup h2
{
	transform:					scaleX(1.18);
}

/*SEPARATOR*/
.SEPARATOR
{
	height:						4.875em;
	background-color:			#1D1E29;
	width:						100%;
}
.SEPARATOR div
{
	position:					relative;
	top:						0.4375em;
	width:						100%;
	height:						4em;
	outline:					2px solid #4C665D;
}
.SEPARATOR div h3
{
	text-align:					center;
	line-height: 				1.333em;
	text-shadow:				rgba(0, 0, 0, 1) -0.16em 0.13em 0.2em;
}

/*Content section width*/
body div section
{
	position:					relative;
	margin:						auto;
	width:						100%;
    height:                     auto;
	max-width:					82em;
    overflow:                   hidden;
}



/*PORTFOLIO*/
#portfolio section
{
    min-height:                 40em;
    height:                     85vh;
    max-height:                 55em;
}
a .pBorder	
{	
	position:					relative;
	float:						left;
	margin:						0.5%;
	width:						24%;
	height:						99%;
	border-radius:				1.875em;
    background:                 #4C665D;	
	z-index:					0;	
}
a div article
{
    position:                   relative;
    width:                      96%;
    height:                     99%;
	margin:						0.5% 2%;
    top:                        0.25%;
	border-radius:				1.75em;
	background-position:		center;
	background-size:			cover;
    background-repeat:          repeat;
	overflow:					hidden;
	z-index:					1;
}
#otherProjects a .pBorder
{
	float:						left;
	width:						32.333333%;
	height:						12em;
}
#otherProjects a .pBorder article
{
    width:                      97%;
    height:                     94%;
	margin:						1.5% 1.5%;
    top:                        0%;
}
a article div.hov
{
	display:					block;
    position: 					absolute;
    top: 						0;
    left: 						0;
    width: 						100%;
    height: 					100%;
	background-position:		center;
	background-size:			cover;
    background-repeat:          repeat;
	opacity:					0;
	z-index:					0;
	transition:					opacity 0.5s;
}
a:hover article div.hov
{
	opacity:					1;
}	
a .description	
{	
	z-index:					1;
    position: 					absolute;
	font-weight:				500;
    height: 					100%;
	width:						100%;
}	
a .description h4
{
	width:						100%;
	transform:					translateY(-100%);
	transition:					transform 0.5s;
	text-align:					center;
	border-radius:				0.5em;
	background:					#D64f49; 
}	
a:hover .description h4
{
	transform:					translateY(0);
}
a .description div
{
	position:					absolute;
	z-index:					-1;
	font-size:					1.313em;
	transform:					translateY(-200%);
	transition:					transform 0.5s;
	border-radius:				0.5em;
	background:					rgba(29,30,41,0.7); 
	margin-bottom:				4%;
}	
a:hover .description div
{
	transform:					translateY(0);
}	
a .description .team
{
	float:						right;
	position:					absolute;
	transform:					translateY(200%);
	transition:					transform 0.5s;
	text-align:					center;
	bottom:						0;
	right:						0;
	border-radius:				0.5em;
	background:					#1D1E29; 
	font-size:					1.5em;
    width:                      100%;
}	
a:hover .description .team
{
	transform:					translateY(0%);
}


/*RESUME*/	
aside	
{	
	position:					relative;
	font-size:					0.8em;
	height:						auto;
	min-height:					16em;
	width:						98%;
	padding:					1%;
	margin-top:					0.5em;
	margin-bottom:				0.5em;
	background:					#4C665D;
	border-radius:				1.875em;
}	
aside div
{
    float:                      left;
	height:						16em;
    width:                      25%;
}
aside div img
{
	padding-top:				0%;
	padding-left:				0%;
    display: 					block;
	margin:						auto;
	width: 					    auto;
	height:						100%;
    border-radius:              1.5em;
}
aside #summary
{
    width:50%;
}
aside #summary p
{
	float:						left;
	margin-left: 				0px;
    padding:                    0% 3%;
    font-size:                  1.25em;
    line-height:                130%;
		
	text-align:					justify;
		
	-webkit-column-count: 		2;
	-moz-column-count: 			2;
	column-count: 				2;
}
aside div a #pdfBg
{
    border-radius:              1.5em;
    margin:                     0 auto;
    width:                      60%;
    height:                     100%;
    background-size:            cover;
    position:relative;
}
aside div a #pdfBg h4
{
    z-index:1;
    position:relative;
    width:                      100%;
    text-decoration:            none;
	text-align:					center;
	border-radius:				0.5em;
	background:					#1D1E29; 
    transition:                 background-color 0.3s;
    transform:                  translateY(0%);
    text-decoration:            none;
}
aside div a #pdfBg:hover h4
{
    background-color:           #D64f49;
}
#pdfContainer
{
    width:auto;height:auto;
}

.resV
{
    position:relative;
    width: 25%;
    height:37.2em;
    float:left;
    margin-bottom:0.375em;
}
#experience, #education
{
    width: calc(100% - 0.375em);
    height:21.812em;
    float:none;
    margin:0 0.188em 0.375em 0.188em;
}
#graphProg, #gameDev
{
    width: calc(100% - 0.375em);
    margin:0 0.188em;
    margin-top:0.188em;
    height:15.012em;
    float:none;
}
#languages
{
    width: calc(100% - 0.188em);
    height:100%;
}
#engApiSof
{
    width: calc(100% - 0.188em);
    height:100%;
    margin-left:0.188em;
}
.resBox
{
    background:#4C665D;
	border-radius:				1.875em;
}
.resBox h4
{
    width:100%;
    text-align:center;
	border-radius:				1.875em;
    background:#1D1E29;
}
.resBox hr
{
    position:                   absolute;
    margin-top:                 1.5em;
    margin-left:                5%;
    width:                      90%;
}
.resBox h5 
{
	font-family: 				'Ubuntu', sans-serif;
    text-align:                 center;
    font-size:                  1.5em;
    font-weight:                bold;
    margin:                     0.35em;
    position:                   relative;
}
.resBox h5 span
{
    background:                 #4C665D;
    padding:                    0 0.5em;
}
#graphProg p, #gameDev p
{
    font-size:                  1.125em;
    margin:                     0.8em 1.5em;
    text-align:                 justify;
    text-align-last:            center;
    line-height:                130%;
}
#languages .language
{
    width:auto;
    font-size:                  1.125em;
    margin:                     0.25em 1.5em;
    margin-right:4em;
    text-align:                 left;
    float:left;
}
#languages .xp
{
    font-size:                  1.125em;
    margin:                     0.25em 1.5em;
    text-align:                 right;
    float:right;
}
.resBox ul
{
    padding-left:               2.5em;
    font-size:                  1.125em;
}
.resBox ul li
{
    padding-bottom:             0.3em;
}
.imgT
{
    width:                      100%;
    table-layout:               fixed;
}
.imgT .noIcon
{
    width:                      initial;
    font-size:                  1.5em;
    font-weight:                700;
    text-align:                 center;
    color:                      #4C665D;
    background:                 #FFFFFF;
    border-radius:              0.5em;
    margin-bottom:              0.5em;
    padding:                    0.075em 0.5em;
}
#human
{
    margin-top:                 0.35em;
}
.imgT td
{
    position:                   relative;
    text-align:                 center;
}
.imgT td .tip
{
    text-align:                 center;
    position:                   absolute;
    opacity:                    0;
    padding:                    0.25em;
    display:                    block;
    z-index:                    100;
    background:                 #D64f49;
    left:                       0px;
    margin:                     0.05em auto;
    top:                        0;
    transform:                  translateY(-50%);
    border-radius:              0.5em;
    transition:                 opacity 0.5s, transform 0.5s;
    box-shadow:                 #1D1E29 -0.3em 0.2em 0.7em;
}
.imgT td:hover .tip
{
    opacity:                    1;
    transform:                  translateY(-100%);
}
.imgT img
{
    height:                     3.5em;
}
.imgT p
{
    text-align:                 center;
}
#engApiSof .imgT
{
    margin:                     1em 0;
}
#human
{
    margin:0.7em 0;
}

/*CONTACT*/
#looking, #mail, #links
{
	position:					relative;
	font-size:					0.8em;
	height:						auto;
	width:						98%;
	padding:					1%;
	margin-top:					0.5em;
	margin-bottom:				0.5em;
	background:					#4C665D;
	border-radius:				1.875em;
	text-align:					center;
}
#mail
{
	background:					#FFFFFF;
	transition:					background 0.3s;
}
#mailA
{
    text-decoration:none;
}
#mail:hover
{
	background:					#D64f49;
}
#mail p
{
	color:						#4C665D;
	font-size:					3.75em;
	font-family:				'Skranji', cursive;
	font-weight:				bold;
	text-decoration:			none;
	transition:					color 0.3s;
}
#mail:hover p
{
	color:						#FFFFFF;
	text-decoration:			none;
}
#links a div
{
	display:					inline-block;
}
#links img:first-of-type
{
    position:                   absolute;
    transition:                 opacity 0.3s;
    opacity:                    1;
    z-index:                    0;
}
#links a:hover img:first-of-type 
{
    opacity:                    0;
}
#links img
{
	width:						4.5em;
	height:						4.5em;
	margin-left:				0.5em;
	margin-right:				0.5em;
}
#links img:nth-of-type(2)
{
    z-index:                    1;
    opacity:                    0;
    transition:                 opacity 0.3s;
}
#links a:hover img:nth-of-type(2)
{
    opacity:                    1;
}