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

*:not(.input){
	margin: 0;
	font-family: 'Inconsolata', monospace;
	font-weight: bold;
}

body{
	background-color: skyblue;
	height:27303px;
}

.david{
	position: fixed;
	width: 250px;
	height: 250px;
	left: 100px;
	bottom:42px;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 10;
}

.clouds{
	background-image: url('../imgs/clouds.svg');
	width: 6000px;
	height: 120%;
	position: fixed;
	z-index:-100;
	display: block;
}

.world{
	height: 100%;
	position: fixed;
	left:0;
	bottom: 0;
}

.world .skipToPortfolio{
	background-image: url('../imgs/skipSign.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 300px;
    height: 300px;
    position: absolute;
    left: 1280px;
    bottom: -350px;
    z-index: -1;
    cursor: pointer;
}

.skipToPortfolio .header{
	width: 200px;
	margin-left: 30px;
	margin-top: 10px;
	text-align: center;
	color: #663333;
}

.world .floor{
	position: absolute;
	width: 4652px;
	height: 100px;
	bottom: 0%;
	left: 0;
	background-image: url('../imgs/floorTile.svg');
	z-index: -1;
}

.world .water{
	position: absolute;
	width: 2500px;
	height: 69px;
	bottom: -10px;
	left: 4652px;
	background-image: url('../imgs/water.svg');
	z-index: -2;
}

.world .bridge {
    position: absolute;
    width: 1952px;
    height: 800px;
    bottom: -297px;
    left: 4652px;
    background-image: url('../imgs/ggb.svg');
    z-index: 20;
    background-size: contain;
    background-repeat: no-repeat;
}

.world .buildings{
	position: absolute;
    width: 1200px;
    height: 330px;
    bottom: 0;
    left: 2200px;
    background-image: url('../imgs/sf.svg');
    z-index: -5;
    background-size: contain;
    background-repeat: no-repeat;
}

.world .olmecFloor {
    position: absolute;
    width: 7138px;
    left: 6604px;
}

.olmecFloor.outside{
	background-image: url('../imgs/olmecTile.svg');
	height: 99px;
	bottom: 0%;
}

/*
.gameJams {
    width: 830px;
    height: 400px;
    position: absolute;
    left: 10347px;
    top: -223px;
    z-index: 21;
}

.gameJams div:not(.header){
	font-size: 30px;
}
*/

.education {
    width: 470px;
    height: 400px;
    position: absolute;
    left: 10347px;
    top: -223px;
    z-index: 21;
}

.education div:not(.header){
	font-size: 30px;
}

.world .mayanFloor {
    position: absolute;
    width: 1000px;
    left: 11067px;
    background-image: url('../imgs/mayanTile.svg');
    height: 99px;
    bottom: -730px;
    z-index: 3;
}

.contact {
    width: 830px;
    height: 400px;
    position: absolute;
    left: 11237px;
    bottom: -300px;
    z-index: 2;
}

.contact .header{
	color: white;
    font-size: 60px;
    text-align: center;
}

.formulario{
	margin-top: 11px;
	font-size: 25px;
}

.formulario form > div{
	height:50px;
}

.label{
	width:250px;
	display: inline-block;
	vertical-align: top;
	color: white;
}

.input{
	display: inline-block;
}

.contact input, .contact textarea{
	height: inherit;
	width: 340px;
	color: white;
	background-color: #cc9933;
	border-color: #cc9933;
	font-size: 20px;
	padding: 5px;
}

.enviar {
    position: absolute;
    right: 90px;
    bottom: 35px;
}

.enviar input{
	color: white;
	width: 100px;
	background-color: #663300;
	border-color: #663300;
}

.fb{
	position: absolute;
    width: 150px;
    height: 150px;
    top: 150px;
    left: 200px;
    background-image: url(../imgs/fbIcon.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.linked{
	position: absolute;
    width: 150px;
    height: 150px;
    top: 150px;
    left: 450px;
    background-image: url(../imgs/linkedIcon.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.world .elevator {
    position: fixed;
    width: 171px;
    height: 92px;
    left: 129px;
    bottom: 7px;
    z-index: 2;
    background-image: url('../imgs/mayanTile.svg');
    background-position: 1px -1px;
    display: none;
}

.mayanWall.one{
	width: 171px;
	height: 1440px;
	left: 11066px;
}

.mayanWall.two{
	width: 849px;
    height: 832px;
    left: 11218px;
}

.world .mayanWall{
	position: absolute;
	background-image: url('../imgs/mayanWallTile.svg');
	bottom: -730px;
	z-index: 0;
}

.world .treasureChamber{
	background-image: url('../imgs/treasureChamber.svg');
	background-size: contain;
	background-repeat: no-repeat;
	width:1000px;
	height: 1000px;
	position: absolute;
	left: 11067px;
	bottom: -903px;
	z-index: 2;
}

.olmecFloor.inside{
	background-image: url('../imgs/olmecTileInside.svg');
    height: 1110px;
    bottom: -1000px;
    z-index: -1;
	display: none;
}

.world .olmecFloor .back{
	z-index: -2;
	width:100%;
	height: 100%;
	position: absolute;
	top:10px;
}

.olmecFloor.outside .back{
	background-color: #666666;	
}

.olmecFloor.inside .back{
	background-color: black;	
}

.world .stairway{
	background-image: url('../imgs/stairwayTest.svg');
	background-size: contain;
	background-repeat: no-repeat;
	height: 5000px;
	width:5000px;
	position: absolute;
	left: 9247px;
	bottom:95px;
	opacity: 0.5;
}

.world .pyramid{
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	left: 9247px;
	bottom: 95px;
	height: 1000px;
	width: 5000px;
}

.pyramid.inside{
	background-image: url('../imgs/pyramidInside.svg');
	display: none;
}

.pyramidTop.inside{
	background-image: url('../imgs/pyramidTopInside.svg');
	display: none;
}

.world .pyramidTop{
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	left: 9247px;
	bottom: 95px;
	height: 1000px;
	width: 5000px;
	z-index: 0;
}

.pyramid.outside{
 	background-image: url('../imgs/pyramid.svg');
 	z-index: 20;
}

.pyramidTop.outside{
 	background-image: url('../imgs/pyramidTop.svg');
}

.plane{
	display: none;
	width: 150px;
	height: 150px;
	top:1000px;
	left: 4000px;
	background-image: url('../imgs/plane.svg');
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
}

.world .profile{
	height: 250px;
	opacity: 1;
	position: absolute;
	bottom: 550px;
	left: 1650px;
	width: 580px;
}

.world .profile .pic{
	background-image: url('../imgs/profile.png');
	background-size: contain;
	background-repeat: no-repeat;
	height: 250px;
	width: 250px;
	margin: 0 auto;
	opacity: 0;
}

.world .profile .greeting{
	height: 50px;
	font-size: 35px;
	margin: 0 auto;
	opacity: 1;
}

.world .profile .abstract{
	height: 250px;
	font-size: 22px;
	margin: 0 auto;
	opacity: 1;
}

.world .programmingSkills {
    left: 2760px;
    bottom: 20%;
    position: fixed;
    bottom: 320px;
    width: 264px;
    position: absolute;
}

.world .programmingSkills > div{
    opacity: 0;
}

.world .programmingSkills div div{
	display: inline-block;
	vertical-align: middle;
}

.world .languages{
	left: 3490px;
	position: absolute;
    bottom: -1150px;
    width: 1150px;
    height: 1920px;
    z-index: -2;
}

.world .languages > div:not(.header):not(#bar):not(#bar2):not(#bar3):not(.flagpole){
	display: inline-block;
	position: absolute;
	bottom:0;
}

.header{
	font-size: 40px;
	font-weight: bold;
}

.header.sf{
	font-size: 40px;
	font-weight: bold;
	left: 5298px;
	bottom: 600px;
	position: absolute;
	width: 1000px;
	z-index: 20;
	opacity: 0;
}

.world .languages div img{
	height: 200px;
    margin-left: 23px;
    margin-top: 50px;
}

.languages .header {
	opacity: 0;
}

#bar{
	width: 300px;
	display: inline-block;
}

#bar div:not(.description){
	background-size: contain;
	background-repeat: no-repeat;
	width: 45px;
	height: 45px;
	position: static;
	margin-top: 2px;
	display: inline-block;
}

#bar2{
	width: 300px;
	display: inline-block;
	margin-left: 45px;
}

#bar2 div:not(.description){
	background-size: contain;
	background-repeat: no-repeat;
	width: 45px;
	height: 45px;
	position: static;
	margin-top: 2px;
	display: inline-block;
}

#bar3{
	width: 300px;
	display: inline-block;
	margin-left: 42px;
}

#bar3 div:not(.description){
	background-size: contain;
	background-repeat: no-repeat;
	width: 45px;
	height: 45px;
	position: static;
	margin-top: 2px;
	display: inline-block;
}

.description{
	position: absolute;
	opacity: 0;
}

#screenshot .description.fg {
    width: 95%;
    height: 29px;
    padding-left: 10px;
    padding-top: 20px;
    position: absolute;
    font-size: 20px;
    z-index: 10;
    color: white;
    left: 0;
    bottom: 0;
    opacity: 1;
    overflow: hidden;
}

#screenshot .description.bg {
    width: 100%;
    height: 32px;
    position: absolute;
    font-size: 15px;
    z-index: 10;
    left: 0;
    bottom: 0;
    opacity: 1;
}

/*Categorias de proyectos*/
.IP{
	background-color: goldenrod;
}

.PORTING {
	background-color: maroon;
}

.QA{
	background-color: darkblue;
}

.WORKFORHIRE {
	background-color: darkorange;
}

.ANDROID {
	background-color: green;
}


.WEB {
	background-color: purple;
}

/*No se usa por el momento*/
/*
.MODELADO3D{
	background-color: purple;
}
*/
/*END OF categorias de proyectos*/

.spanish{

}

.english{
	left: 350px;
}

.french{
	left: 700px;
}

.flagpole{
    background-image: url('../imgs/flagpole.svg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 535px;
    position: absolute;
    z-index: -10;
    top: 10%;
}

.portfolio{
	position: absolute;
	bottom: 99px;
	left: 7252px;
}

.portfolio .chest {
	position: relative;
	z-index: 6;
}

.portfolio .chest img{
	width: 250px;
	height: 250px;
}

#screenshot{
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
	display: none;
	-webkit-transform-origin: 0px 0px;
}

.video {
    display: none;
    opacity: 0;
    width: inherit;
    height: inherit;
}

#screenshot *:not(.closeButton):not(.description):not(.video){
	background-color: rgba(0,0,0,0.5);
	opacity: 1;
	color: white;
	width: inherit;
	height: inherit;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	font-size: 0px;
	-moz-transition: opacity 1s;
	-webkit-transition: opacity 1s;
	-ms-transition: opacity 1s;
	-o-transition: opacity 1s;
}

#screenshot div:not(.closeButton):hover:not(.description):not(.video){
	opacity: 0;
	-moz-transition: opacity 0.5s;
	-webkit-transition: opacity 0.5s;
	-ms-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
}

#screenshot .closeButton{
	background-image: url('../imgs/closeButton.svg');
	background-size: contain;
	background-repeat: no-repeat;
	width: 30px;
	height: 30px;
	position: absolute;
	top: 10px;
	right: 10px;
	display: none;
	z-index: 50;
	cursor: pointer;
}

.clickable{
	cursor: pointer;
}

a{
	cursor: pointer;
}

.world .softwareUsed {
    left: 8552px;
    top: 100px;
    position: absolute;
    width: 2000px;
    height: 2000px;
}

.softwareUsed .header{
	margin-left: -100px;
}

.softwareUsed .graph{
	top: 0px;
	left: 0px;
	position: absolute;
	width: 1000px;
	height: 1000px;
	z-index: 0;
}

.softwareUsed .graphFill{
	opacity: 1;
	fill: blue;
}

.softwareUsed .graphBG{
	position: absolute;
	top: 16%;
	left: 16%;
	width: 0;
	height: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url('../imgs/graph.svg');
}

.softwareUsed .graphFG{
	position: absolute;
	top: 17%;
	left: 17%;
	width: 0;
	height: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url('../imgs/graphFG.svg');
	z-index: 1;
}

.software{
	width: 50px;
	height: 50px;
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
	top:336px;
	left:323px;
	display: none;
	z-index: 1;	
}

.unity{
	background-image: url('../imgs/unity.svg');
}

.photoshop{
	background-image: url('../imgs/ps.svg');
}

/*
.processing{
	background-image: url('../imgs/p.svg');
}
*/

.android {
	background-image: url('../imgs/android.svg');	
}

/*
.premiere{
	background-image: url('../imgs/pr.svg');
}
*/

.construct3{
	background-image: url('../imgs/construct3.svg');
}

.illustrator{
	background-image: url('../imgs/ai.svg');
}
.titleScreen {
    width: 1200px;
    position: absolute;
    bottom: 500px;
    left: 200px;
    text-align: left;
}

.titleScreen .header{
	width: 1500px;
}

.titleScreen .header .name{
	font-size: 100px;
	margin-left: 88px;
	text-align: center;
}

.titleScreen .header .degree{
	font-size: 50px;
	text-align: center;
}

.titleScreen .header .university{
	margin-left: 224px;
	text-align: center;
}

.computerPal{
	width: 250px;
	height: 250px;
	position: absolute;
}

.computerPal.one{
	position: absolute;
	bottom: 22px;
	left: 830px;
}

.computerPal.two{
	position: absolute;
	bottom: 22px;
	left: 7950px;
}

.computerPal.three{
	position: absolute;
	bottom: 22px;
	left: 3200px;
}


.computerPal img{
	position: relative;
}

.body{
	position: relative;
	height: 172px;
	top: 0;
}

.eyes{
	width: 250px;
	height: 250px;
	bottom: -40px;
	position: absolute;
}

.mouth{
	width: 250px;
	height: 250px;
	bottom: -40px;
	position: absolute;
}

.feet{
	bottom: 78px;
	position: absolute;
}

.hand{
	background-image: url('../imgs/computerPalHand.svg');
	background-repeat: no-repeat;
	background-size: contain;
	width: 25px;
	height: 25px;
	position: absolute;
}

.left{
	bottom: 50px;
	left: 0px;
}

.right{
	bottom: 50px;
	left: 230px;
}

.speech{
	background-color: blue;
	width:0;
	position: absolute;
	bottom: 167px;
	right: 129px;
	color: white;
	font-size: 18px;
	padding: 0px;
}

.world .workExp {
    position: absolute;
    width: 800px;
    left: 9468px;
    top: -86px;
    z-index: 21;
}

.workExp a:active{
	color: black;
	text-decoration: none;
}

.workExp:not(.header) {
	font-size: 30px;
}

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

.languageSetting {
	position: fixed;
	right: 10px;
	top: 10px;
	opacity: 0.5;
	padding: 3px;
}

.languageSetting:hover{
	opacity: 1;
	-moz-transition: opacity 0.5s;
	-webkit-transition: opacity 0.5s;
	-ms-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
}

.languageSetting img, .languageSetting a {
	width : 40px;
}

.languageSetting a{
	opacity: 0.5;
}

.languageSetting a:hover {
	opacity: 1;
	-moz-transition: opacity 0.5s;
	-webkit-transition: opacity 0.5s;
	-ms-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
}

.languageSetting * {
	display: inline;
	vertical-align: middle;
	color:white;
}