/*-- General --*/
*{
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	font-family: 'lektonregular';
}
::selection {
	background: #FFF; /* Safari */
	color: #1a0830;
}
::-moz-selection {
	background: #FFF; /* Firefox */
	color: #1a0830;
}
body{background: #5d262b; color: #fbf5c3;}
.night{background: #1a0830;}
/*FONTS*/
@font-face {
    font-family: 'amatic_scregular';
    src: url('../fonts/amaticsc-regular-webfont.eot');
    src: url('../fonts/amaticsc-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/amaticsc-regular-webfont.woff') format('woff'),
         url('../fonts/amaticsc-regular-webfont.ttf') format('truetype'),
         url('../fonts/amaticsc-regular-webfont.svg#amatic_scregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'grupporegular';
    src: url('../fonts/gruppo-regular-webfont.eot');
    src: url('../fonts/gruppo-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gruppo-regular-webfont.woff') format('woff'),
         url('../fonts/gruppo-regular-webfont.ttf') format('truetype'),
         url('../fonts/gruppo-regular-webfont.svg#grupporegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'lektonregular';
    src: url('../fonts/lekton-regular-webfont.eot');
    src: url('../fonts/lekton-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lekton-regular-webfont.woff') format('woff'),
         url('../fonts/lekton-regular-webfont.ttf') format('truetype'),
         url('../fonts/lekton-regular-webfont.svg#lektonregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*PROFILE*/
.profile{text-align: center; border-bottom: 1px dotted #de3926; padding: 30px 0;}
.profile .profilePict{
	width: 240px;
	height: 240px;
	background: url(../imgs/profilePic03.png) 0 0 no-repeat;
	margin: 0 auto;
	background-size: 240px;
}
header h1{font-size: 2em; padding:0 20px 0 20px; border-bottom: 1px dotted #48ab99; width: 410px; margin: 0 auto; text-shadow: 2px 2px 0px rgba(122, 55, 46, 1);}
header h2{
	font-size: 1em;
	margin-top: 15px;
	text-shadow: 2px 2px 0px rgba(122, 55, 46, 1);
}
header h2 span{
	display: inline-block;
	background: url(../imgs/thunder03.png) right center no-repeat;
	padding-right: 25px;
	margin: 0 8px 0 0;
}
header h2 span:last-child{margin-right: 0;}

/*CONTACT*/
.contact{
	border-bottom: 1px dotted #de3926;
	overflow: hidden;
	padding: 20px 0;
	background: url(../imgs/map03.png) center 66px no-repeat;
}
.contact h3{
	font-size: 4em;
	text-align: center;
	text-shadow: 2px 2px 0px rgba(122, 55, 46, 1);
}
.contact h3 span{
	font-family: 'grupporegular';
	color: #de3926;
	font-size: 1em;
}
.terminales{
	width: 193px;
	margin: 0 auto;
	margin-top: 30px;
	overflow: hidden;
	background: url(../imgs/arrows02.png) center 11px no-repeat;
}
.terminal{float: left;}
.terminal span{display: block; text-align: center; width: 80px;}
.terminal:nth-child(1){margin-right: 30px;}
.terminal span:nth-child(1){
	font-size: 1.8em;
	line-height: 1em;
	color: #fbf5c3;
	text-shadow: 2px 2px 0px rgba(122, 55, 46, 1);
	background: #48ab99;
	padding:6px 0 1px 0;
	/*height: 45px;*/
}
.terminal span:nth-child(2){
	margin: 10px 0 0 0;
	font-size: 0.7em;
}
.terminales .date{
	font-size: 0.9em;
	text-align: center;
	float: left;
	clear: both;
	width: 188px;
	height: 61px;
	border-top: 1px dotted #000;
	background: url(../imgs/bgSince03.gif) 0 0 no-repeat;
	margin: 10px 0 0 0;
	padding: 4px 0 0 0;
	color: #fbf5c3;
	text-shadow: 1px 1px 0px rgba(122, 55, 46, 1);
}
.speech{
	margin:0 auto;
	font-size: 1em;
	margin-top: 15px;
	width: 580px;
	text-align: justify;
}

/*INFORMACION DE CONTACTO*/
.info p{
	text-align: center;
	font-size: 0.8em;
	line-height: 1.6em;
	clear: both;
	margin-top: 10px;
	overflow: hidden;
	margin-bottom: 5px;
}
.info p span{
	display: block;
	text-align: center;
}
.info p span a{
	font-size: 1.8em;
	text-decoration: none;
	color: #fbf5c3;
	display: block;
	padding: 10px 5px 8px 5px;
	margin: 0 auto;
	text-shadow: 2px 2px 0px rgba(122, 55, 46, 1);
}
.info p span span{display: inline-block;}
.info p:nth-child(1) span a{width: 220px;}
.info p:nth-child(2) span a{width: 380px;}
.info p:nth-child(3) span a{width: 460px;}
.info p span a:hover{
	background: #48ab99;
	color: #fbf5c3;
	text-shadow: 2px 2px 0px rgba(122, 55, 46, 1);
}
/*WORK*/
.work{
	color: #ffe2ae;
	padding: 20px 0;
	border-bottom: 1px dotted #de3926;
}
.work h3{
	font-size: 4em;
	text-align: center;
	text-shadow: 2px 2px 0px rgba(122, 55, 46, 1);
}

.contenedor{overflow: hidden; width: 600px; margin: 0 auto; margin-top: 20px;}
.contenedor .section{
	float: left;
	width: 50%;
	text-align: center;
}
.section h4{font-size: 1.1em;}
.section a{
	display: block;
	height: 200px;
	width: 160px;
	margin: 0 auto;
	font-size: 0.8em;
	padding-top: 165px;
	color: #5d262b;
	text-decoration: none;
}
.behance{background: url(../imgs/iconBehance03.png) center 10px no-repeat;}
.cv{background: url(../imgs/iconPdf03.png) center 10px no-repeat;}
.section a:hover{color: #fbf5c3;}

/*SKILLS*/
.skills{
	padding: 20px 0;
	text-align: left;
}
.skills h3{
	font-size: 4em;
	text-align: center;
	text-shadow: 2px 2px 0px rgba(122, 55, 46, 1);
}
.skills h4{
	font-size: 1.5em;
	text-shadow: 2px 2px 0px rgba(122, 55, 46, 1);
}
.skills .percentage{width: 800px; margin: 0 auto;}
.skills .tech{
	float: left;
	width: 390px;
}
.skills .personal{
	float: right;
	width: 390px;
}
.skills ul{
	padding: 20px 0 40px 0;
	margin: 0 auto;
}
.skills ul li{
	overflow: hidden;
	margin: 0 0 8px 0;
}
.skills ul li:last-child{margin: 0;}
.skills ul li p{
	width: 135px;
	font-size: 0.9em;
	border-bottom: 1px solid #de3926;
	float: left;
}
.skills ul li div{
	border: 1px solid #de3926;
	background: #7a372e;
	height: 25px;
	width: 245px;
	float: left;
	padding: 2px;
}
.skills ul li span{
	display: block;
	background: #48ab99;
	height: 100%;
	color: #572933;
	/*color: #7a372e;*/
	padding-right: 5px;
	font-size: 0.8em;
	text-align: right;
	width: 0;
	overflow: hidden;
}	

/*-------------*/
/*--- NIGHT ---*/
/*-------------*/

.night .profile{color: #ff9707; border-bottom: 1px dotted #ff9707;}
.night .profile .profilePict{
	background: url(../imgs/profilePic02.png) 0 0 no-repeat;
	background-size: 240px;
}
.night header h1{border-bottom: 1px dotted #ff9707; text-shadow: 0px 0px 0px rgba(122, 55, 46, 0);}
.night header h2{text-shadow: 0px 0px 0px rgba(122, 55, 46, 0);}
.night header h2 span{background: url(../imgs/thunder02.png) right center no-repeat;}

.night .contact{
	border-bottom: 1px dotted #04fdc5;
	color: #04fdc5;
	background: url(../imgs/map02.png) center 66px no-repeat;
}
.night .contact h3{
	text-shadow: 0px 0px 0px rgba(122, 55, 46, 0);
}
.night .contact h3 span{
	color: #2f1d8a;
}
.night .terminales{
	background: url(../imgs/arrows02.png) center 11px no-repeat;
}
.night .terminal span:nth-child(1){
	color: #FFF;
	text-shadow: 2px 2px 0px rgba(0, 182, 141, 1);
	background: #04fdc5;
}
.night .terminales .date{
	border-top: 1px dotted #000;
	background: url(../imgs/bgSince02.gif) 0 0 no-repeat;
	color: #FFF;
	text-shadow: 2px 1px 0px rgba(0, 182, 141, 1);
}
.night .info p span a{
	color: #04fdc5;
	text-shadow: 0px 0px 0px rgba(0, 182, 141, 0);
}
.night .info p span a:hover{
	background: #04fdc5;
	color: #fff;
	text-shadow: 1px 1px 0px rgba(0, 182, 141, 1);
}

.night .work{
	color: #ffe2ae;
	border-bottom: 1px dotted #ffe2ae;
}
.night .work h3{
	text-shadow: 0px 0px 0px rgba(122, 55, 46, 0);
}
.night .section a{
	color: #1a0830;
}
.night .behance{background: url(../imgs/iconBehance02.png) center 10px no-repeat;}
.night .cv{background: url(../imgs/iconPdf02.png) center 10px no-repeat;}
.night .section a:hover{color: #ffe2ae;}

.night .skills{
	color: #a8ff00;
}
.night .skills h3,
.night .skills h4{
	text-shadow: 0px 0px 0px rgba(122, 55, 46, 0);
}
.night .skills ul li p{
	border-bottom: 1px solid #a8ff00;
}
.night .skills ul li div{
	border: 1px solid #a8ff00;
	background: none;
}
.night .skills ul li span{
	background: #a8ff00;
	color: #572933;
}

/* MEDIA QUERY 840 */
@media (max-width: 840px){
	/*CONTACT*/
	.speech{
		margin:0 auto;
		font-size: 1em;
		margin-top: 15px;
		width: 90%;
		text-align: justify;
	}
	.info p span{font-size: 1.2em;}
	.info p span a{
		font-size: 2.2em;
		text-decoration: none;
		color: #fbf5c3;
		display: block;
		padding: 10px 5px 8px 5px;
		margin: 0 auto;
		text-shadow: 2px 2px 0px rgba(122, 55, 46, 1);
	}
	.info p span span{display: inline-block;}
	.info p:nth-child(1) span a{width: 90%;}
	.info p:nth-child(2) span a{width: 90%;}
	.info p:nth-child(3) span a{width: 90%;}
	/*SKILLS*/
	.skills .percentage{width: 90%; margin: 0 auto;}
	.skills .tech{
		float: none;
		width: 90%;
		margin: 0 auto;
	}
	.skills .personal{
		float: none;
		width: 90%;
		margin: 0 auto;
	}
	.skills ul li p{
		width: 25%;
		font-size: 0.9em;
		border-bottom: 1px solid #de3926;
		float: left;
	}
	.skills ul li div{
		border: 1px solid #de3926;
		background: #7a372e;
		height: 25px;
		width: 75%;
		float: left;
		padding: 2px;
	}

	.tech ul li:nth-child(1) span{width: 95%;} /* html */
	.tech ul li:nth-child(2) span{width: 90%;} /* css */
	.tech ul li:nth-child(3) span{width: 50%;} /* jquery */
	.tech ul li:nth-child(4) span{width: 95%;} /* ps */
	.tech ul li:nth-child(5) span{width: 85%;} /* ai */

	.personal ul li:nth-child(1) span{width: 85%;} /* leader */
	.personal ul li:nth-child(2) span{width: 90%;} /* creative */
	.personal ul li:nth-child(3) span{width: 40%;} /* fun */
	.personal ul li:nth-child(4) span{width: 90%;} /* divertido */
	.personal ul li:nth-child(5) span{width: 98%;} /* music */
}

/*MEDIA QUERY 640*/
@media (max-width: 640px){
	header h1{
		font-size: 1.8em;
		padding:0;
		width: 90%;
	}	
	/*CONTACT*/
	.contact, .night .contact{background: none;}
	.contact h3{
		font-size: 2.2em;
	}
	.contact h3 span{
		font-size: 1.2em;
	}
	.terminales{
		margin-top: 10px;
	}
	.speech{
		margin:0 auto;
		margin-top: 5px;
		font-size: 1em;
		width: 90%;
		line-height: 17px;
		text-align: left;
	}
	.info p span{font-size: 1em;}
	.info p span a{
		font-size: 2em;
		text-decoration: none;
		color: #fbf5c3;
		display: block;
		padding: 10px 5px 8px 5px;
		margin: 0 auto;
		text-shadow: 2px 2px 0px rgba(122, 55, 46, 1);
	}
	.info p:nth-child(2) span a{font-size: 1.5em;}
	.info p:nth-child(3) span a{font-size: 1.2em;}

	/*WORK*/
	.work h3{font-size: 2.2em;}
	.contenedor{width: 90%; margin: 0 auto; margin-top: 10px;}
	.contenedor .section{
		float: none;
		width: 100%;
		text-align: center;
	}
	.section a{
		display: block;
		height: 150px;
	}
	.behance{background: url(../imgs/iconBehance03.png) center 5px no-repeat;}
	.cv{background: url(../imgs/iconPdf03.png) center 5px no-repeat;}

	/*SKILLS*/
	.skills h3{font-size: 2.2em;}
	.skills ul{
		padding: 0px 0 20px 0;
		margin: 0 auto;
	}
	.skills ul li p{
		width: 100%;
		font-size: 0.9em;
		border-bottom: none;
		float: none;
	}
	.skills ul li div{
		height: 25px;
		width: 100%;
		float: left;
		padding: 2px;
	}
}