/*BOF LOADER*/
.loader {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #000;
    z-index: 99999;
    height: 100%;
    width: 100%;
    overflow: hidden !important;
}
.iconloader {
    width: 50px;
    height: 50px;
    left: 50%;
    top: 50%;
    margin: -25px 0px 0px -25px;
    position: absolute;    
}
/*EOF LOADER*/
body{background-color:#000;font-family: 'Raleway',sans-serif;color:#fff;height:100%;}
html{height:100%;}
.container-full {
  margin: 0 auto;
  width: 100%;
  height:100%;
  
}
header#header{height:80px;position: relative;padding:0px 50px;}
header#header #logo{font-weight:700;font-family: 'Montserrat', sans-serif;font-size:25px;float:left;padding-top:0px;position: absolute;left:50px;top:25px;}
header#header #logo span{color:#FFBB03}
header#header nav#nav{font-weight: bold;font-size:16px;width:100%;text-align:center;padding-top:30px;}
header#header nav#nav ul.menu{list-style:none;padding:12px 0 0 0 ;margin:0px;}
header#header nav#nav ul.menu li:first-child{margin-left:0px;}
header#header nav#nav ul.menu li{display:inline-block;margin-left:30px;}
header#header nav#nav  ul.menu a{position: relative;overflow:hidden;display: inline-block;padding-bottom:10px;color:#FFBB03}
header#header nav#nav ul.menu a span{overflow: hidden;position: absolute;top: 0px;right: 0px;left: 0px;height: 100%;color: #FFF;transition: height 0.2s ease-out 0s;}
header#header nav#nav ul.menu a:after{width:100%;background-color:#FFBB03;position: absolute;bottom:0;left:0;content:"";height:2px;transform:translateY(2px)}
header#header nav#nav ul.menu a:hover{text-decoration:none;}
header#header nav#nav ul.menu a:hover span, header#header nav#nav a.current span {height: 0px;}
header#header nav#nav ul.menu a:hover:after,header#header nav#nav a.current:after{transform:translateY(0px);}
section#contenido{height:calc(100% - 160px);width:100%;}
section#contenido .container{overflow: hidden;height:100%;}
section#contenido .row{overflow: hidden;height:100%;}
section#contenido .iwrapper{height:100%;}
.secciones{visibility:hidden;}
#page-loader{position: absolute;top:50%;left:50%;margin-top:-25px;margin-left:-25px;display:none}

#home{height:100%;visibility: visible}
#home .intro{text-align:center;font-size:40px;text-transform: uppercase;}
#home .intro span.nombre{font-weight:700;font-family: 'Montserrat', sans-serif;font-size:65px;color:#FFBB01}
#home .intro span.saludo{font-weight:bold;}
#home .intro span.and{font-style: italic;}
#home .intro span.yosoy{font-weight:bold;font-size:45px;}
#aboutme{height:100%;padding-top:80px;}
#contactme{padding-top:80px;}

#myworks{padding-top:40px;height:100%;}
.pitem{padding:0px!important;}
.pfolioimg{width:100%;}

/*Estilos Base*/
.contenedor-img {
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #fff;
}
.contenedor-img .mascara,.contenedor-img .contenido {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.contenedor-img img {
display: block;
position: relative;

}
.contenedor-img h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.9);
margin: 20px 0 0 0
}
.contenedor-img p {
font-size: 14px;
position: relative;
color: #fff;
padding: 10px 20px 10px;
text-align: center;text-shadow: 2px 2px #555;font-weight:bold;
}
.contenedor-img a.link {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #222;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.contenedor-img a.link:hover {
box-shadow: 0 0 5px #000
}


/*Ejemplo 1*/
.contenedor-img img {
transition: all 0.2s linear;
display:block;
}
.contenedor-img .mascara {
opacity: 0;
background-color: rgba(6,84,126, 0.9);
transition: all 0.3s ease-in-out;
}
.contenedor-img h2 {
transform: translateX(-200px);/*Desplazamos a la izquierda*/
opacity: 0;
transition: all 0.7s ease-in-out;
}
.contenedor-img p {
transform: translateX(200px);/*Desplazamos a la derecha*/
opacity: 0;
transition: all 0.4s linear;
}
.contenedor-img a.link{
opacity: 0;
transition: all 0.4s ease-in-out;
transform: translateY(100px)/*Desplazamos para abajo*/
}
.contenedor-img:hover img {
transform: scale(1.1);/*Damos un ligero zoom a la imagen*/
}
.contenedor-img:hover .mascara {
opacity: 1;
}
.contenedor-img:hover h2,
.contenedor-img:hover p,
.contenedor-img:hover a.link {
opacity: 1;
transform: translateX(0px);/*Regresamos a las posiciones originales*/
}
.contenedor-img:hover p {
transition-delay: 0.1s;
}
.contenedor-img:hover a.link {
transition-delay: 0.2s; /*Aplicamos un pequeño retardo para que se muestre al final*/
transform: translateY(0px);
}
/*.inner-content{overflow:auto!important;height:100%;}*/

footer#footer{height:80px;line-height: 80px;padding:0px 50px;font-size:13px;}
.slimScrollBar{background-color:#FFBB01!important;opacity:1!important;}

/*LOADER*/
.circle {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(255,187,1,0.9);
    opacity: .9;
    border-right: 5px solid rgba(0,0,0,0);
    border-left: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 35px #f9be1d;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    -moz-animation: spinPulse 2s infinite ease-in-out;
    -webkit-animation: spinPulse 2s infinite linear;
}

.circle1 {
    background-color: rgba(0,0,0,0);
    border: 5px solid rgba(255,187,1,0.9);
    opacity: .9;
    border-left: 5px solid rgba(0,0,0,0);
    border-right: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 15px #f9be1d;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    position: relative;
    top: -40px;
    -moz-animation: spinoffPulse 2s infinite linear;
    -webkit-animation: spinoffPulse 2s infinite linear;
}

@-moz-keyframes spinPulse {
    0% {
        -moz-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #f9be1d;
    }

    50% {
        -moz-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -moz-transform: rotate(-320deg);
        opacity: 0;
    };
}

@-moz-keyframes spinoffPulse {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    };
}

@-webkit-keyframes spinPulse {
    0% {
        -webkit-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #f9be1d;
    }

    50% {
        -webkit-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(-320deg);
        opacity: 0;
    };
}

@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    };
}

/*SKILL BAR*/
.skillbar {
	position:relative;
	display:block;
	margin-bottom:15px;
	width:100%;
	background:#eee;
	height:35px;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-webkit-transition:0.4s linear;
	-moz-transition:0.4s linear;
	-ms-transition:0.4s linear;
	-o-transition:0.4s linear;
	transition:0.4s linear;
	-webkit-transition-property:width, background-color;
	-moz-transition-property:width, background-color;
	-ms-transition-property:width, background-color;
	-o-transition-property:width, background-color;
	transition-property:width, background-color;
}

.skillbar-title {
	position:absolute;
	top:0;
	left:0;
    width:110px;
	font-weight:bold;
	font-size:13px;
	color:#ffffff;
	background:#6adcfa;
	-webkit-border-top-left-radius:3px;
	-webkit-border-bottom-left-radius:4px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-bottomleft:3px;
	border-top-left-radius:3px;
	border-bottom-left-radius:3px;
}

.skillbar-title span {
	display:block;
	background:rgba(0, 0, 0, 0.1);
	padding:0 20px;
	height:35px;
	line-height:35px;
	-webkit-border-top-left-radius:3px;
	-webkit-border-bottom-left-radius:3px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-bottomleft:3px;
	border-top-left-radius:3px;
	border-bottom-left-radius:3px;
}

.skillbar-bar {
	height:35px;
	width:0px;
	background:#6adcfa;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}

.skill-bar-percent {
	position:absolute;
	right:10px;
	top:0;
	font-size:11px;
	height:35px;
	line-height:35px;
	color:#ffffff;
	color:rgba(0, 0, 0, 0.4);
}


#contact-form{width:100%;}
#contact-form ul{list-style:none;margin:0px;padding:0px;}
#contact-form ul li{margin:0px 0px 10px 0px;padding:0px;}
#contact-form ul li input.inp,#contact-form ul li textarea{height:45px;background:transparent;color:#fff;border:none;width:100%;padding:7px;border:1px solid #FFBB03}
#contact-form ul li textarea{height:155px;}
#contact-form ul li input.btn{border:1px solid #FFBB03;background-color:#FFBB03;color:#000;transition: 0.3s linear all;font-weight:bold;border-radius:0px;}
#contact-form ul li input.btn:hover{background: transparent;color:#FFBB03;}
#response{color:#FFBB03;}
.scont a{color:#fff;display:block;height:35px; transition: 0.3s linear all;}
.scont a:hover{color:#FFBB03;text-decoration: none;}
.slicknav_menu{display:none;}

@media only screen and (max-width: 1200px){ 
header#header nav#nav ul.menu{padding-top:35px;
}

@media only screen and (max-width: 767px) {
    section#contenido{height:auto!important}
    section#contenido .row{height:auto!important}
    .slicknav_menu{display:block;}
    #contactme{padding-top:40px;}
    #aboutme{padding-top:40px;}
    header#header nav#nav ul li{margin-left:10px;}
    #home .intro{font-size:30px;margin-top:55px!important}
    #home .intro span.nombre{font-size:45px;}
    #home .intro span.yosoy{font-size:35px;}
    header#header{padding:0px 15px;}
    header#header #logo{left:auto;top:auto;text-align:center;margin-top:25px;position: relative;float:none;}
    nav#nav ul.menu{display:none;}
    header#header{height:50px;}
    .slicknav_nav a span{display:none;}
    .slicknav_menu{top:45px;}
    .slimScrollDiv{height:auto!important}
    .inner-content{height:auto!important;}
    footer#footer {padding:0 15px;}
    }

@media only screen and (min-width: 480px) and (max-width: 767px) {
    
    #home .intro{margin-top:35px;}
}