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

html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, center, u, b, i{vertical-align: baseline; border: 0; outline: 0; font-weight: normal; font-style: normal; font-size: 100%;}

* {margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
:focus{outline: 0}
ol, ul{list-style: none}
table{border-collapse: collapse; border-spacing: 0;}
blockquote, q{quotes: "" ""}
hr{border: 0; color: #000; background-color: #000; height:0px}
blockquote:before, blockquote:after, q:before, q:after {content: ""}

/*------------------------------ RESET*/


body{
	color:#EEE;
	background: #999;
	/*padding-bottom:128px; bottom = footer height */
}

.centrado {
	padding-bottom:72px;
    position: absolute;
    left: 50%;
    top: 50%;
	width:400px;
	text-align:center;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.centrado h1{
	font-size:2.6rem;
	line-height:48px;
	margin:0;
	padding-top:8px;
	text-transform:uppercase;
    font-family: "DINNeuzeitGroteskStd-BdCond";
	font-weight:normal;
	text-shadow:1px 1px 1px rgba(0,0,0,.5);
}

.centrado h1:hover{
	color:#FFCB04;
	
	transition: all .5s;
	animation-iteration-count: infinite;
  animation-direction: alternate;
}

.centrado p{
	display:block;
	text-transform:uppercase;
	font-size:1.2rem;
	line-height:1.5rem;
	font-family: 'DINPro-Light';
}

/*------------------------------------ FOOTER */
footer {
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
	display:flex;
	justify-content:space-between;
	z-index:1000;
	text-align:center;
}


footer ul {
	display:inline-block;
    list-style-type: none;
    margin:0 auto;
    overflow:hidden;
}

footer ul li {
	text-indent:-9999px;
	display:inline;
}

footer ul li a {
	display:block;
	width:36px;
	height:36px;
	margin:10px 4px;
	padding:0;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
 	border-radius: 100%;	
	background:#666 url('img/sprites.svg') no-repeat;
	background-size:600px 450px;
}

footer ul li a.linkedin {
	background-position:-12px -72px;
}

footer ul li a:hover.linkedin {
	background:#007BB5 url('img/sprites.svg') no-repeat;
	background-size:600px 450px;
	background-position:-12px -72px;
}

footer ul li a.behance {
	background-position:-72px -72px;
}

footer ul li a:hover.behance {
	background:#099 url('img/sprites.svg') no-repeat;
	background-size:600px 450px;
	background-position:-72px -72px;
}

footer ul li a.facebook {
	background-position:-192px -72px;
}

footer ul li a:hover.facebook {
	background:#3b5998 url('img/sprites.svg') no-repeat;
	background-size:600px 450px;
	background-position:-192px -72px;
}

footer ul li a.instagram {
	background-position:-132px -72px;
}

footer ul li a:hover.instagram {
	background:#f09433 url('img/sprites.svg') -132px -72px no-repeat;
	background: url('img/sprites.svg') -132px -72px/600px 450px no-repeat, -moz-linear-gradient(45deg, #f09433 15%, #e6683c 25%, #dc2743 40%, #cc2366 60%, #bc1888 75%); 
background: url('img/sprites.svg') -132px -72px/600px 450px no-repeat, -webkit-linear-gradient(45deg, #f09433 15%, #e6683c 25%, #dc2743 40%, #cc2366 60%, #bc1888 75%); 
background: url('img/sprites.svg') -132px -72px/600px 450px no-repeat, linear-gradient(45deg, #f09433 15%, #e6683c 25%, #dc2743 40%, #cc2366 60%, #bc1888 75%);

}

footer ul li a:hover{
	box-shadow: inset 1px 1px 1px rgba(0,0,0,.5);
	transition:all 0;
}

	
	footer ul li {
		text-indent:-9999px;
	}
	
	footer ul li a {
		display:inline-block;
		width:40px;
		height:40px;
		line-height:72px;
		margin:8px;
		background-size:auto;
	}
	
	footer ul li a.linkedin {
		background-position:-20px -100px;
	}
	
	footer ul li a:hover.linkedin {
		background:#007BB5 url('img/sprites.svg') no-repeat;
		background-position:-20px -100px;
	}
	
	footer ul li a.behance {
		background-position:-100px -100px;
	}
	
	footer ul li a:hover.behance {
		background:#099 url('img/sprites.svg') no-repeat;
		background-position:-100px -100px;
	}
	
	footer ul li a.facebook {
		background-position:-260px -100px;
	}
	
	footer ul li a:hover.facebook {
		background:#3b5998 url('img/sprites.svg') no-repeat;
		background-position:-260px -100px;
	}
	
	footer ul li a.instagram {
		background-position:-180px -100px;
	}
	
	footer ul li a:hover.instagram {
		background:#f09433 url('img/sprites.svg') -180px -100px no-repeat;
	background: url('img/sprites.svg') -180px -100px no-repeat, -moz-linear-gradient(45deg, #f09433 15%, #e6683c 25%, #dc2743 40%, #cc2366 60%, #bc1888 75%); 
	background: url('img/sprites.svg') -180px -100px no-repeat, -webkit-linear-gradient(45deg, #f09433 15%, #e6683c 25%, #dc2743 40%, #cc2366 60%, #bc1888 75%); 
	background: url('img/sprites.svg') -180px -100px no-repeat, linear-gradient(45deg, #f09433 15%, #e6683c 25%, #dc2743 40%, #cc2366 60%, #bc1888 75%);
	}
	
	footer p{
		position:relative;
		width:auto;
		bottom: 0;
		background:none;
		line-height:4.5rem;
		font-size:1rem;
	}
	
	footer a.resume{
		line-height:4rem;
	}
	
	footer a.resume span{
		margin:8px;
		margin-left:16px;
		-moz-border-radius: 100%;
		-webkit-border-radius: 100%;
		border-radius: 100%;
	}


/*------------------------------ FONTS*/
@font-face {
  font-family: "DINPro-Medium";
  src: url("fonts/DINPro-Medium.eot"); /* IE9 Compat Modes */
  src: url("fonts/DINPro-Medium.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/DINPro-Medium.otf") format("opentype"), /* Open Type Font */
    url("fonts/DINPro-Medium.svg") format("svg"), /* Legacy iOS */
    url("fonts/DINPro-Medium.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/DINPro-Medium.woff") format("woff"), /* Modern Browsers */
    url("fonts/DINPro-Medium.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "DINPro-Light";
  src: url("fonts/DINPro-Light.eot"); /* IE9 Compat Modes */
  src: url("fonts/DINPro-Light.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/DINPro-Light.otf") format("opentype"), /* Open Type Font */
    url("fonts/DINPro-Light.svg") format("svg"), /* Legacy iOS */
    url("fonts/DINPro-Light.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/DINPro-Light.woff") format("woff"), /* Modern Browsers */
    url("fonts/DINPro-Light.woff2") format("woff2"); /* Modern Browsers */
}

@font-face {
  font-family: "DINNeuzeitGroteskStd-BdCond";
  src: url("fonts/DIN-Bold-Cond.eot"); /* IE9 Compat Modes */
  src: url("./fonts/DIN-Bold-Cond.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/DIN-Bold-Cond.otf") format("opentype"), /* Open Type Font */
    url("fonts/DIN-Bold-Cond.svg") format("svg"), /* Legacy iOS */
    url("fonts/DIN-Bold-Cond.ttf") format("truetype"), /* Safari, Android, iOS */
    url("fonts/DIN-Bold-Cond.woff") format("woff"), /* Modern Browsers */
    url("fonts/DIN-Bold-Cond.woff2") format("woff2"); /* Modern Browsers */
}