@font-face { font-family: 'Roboto'; src: url('../fonts/Roboto-Regular-webfont.eot'); src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular-webfont.woff') format('woff'), url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg'); font-weight: normal; font-style: normal; }  *{border: none;box-sizing: border-box;list-style: none;margin: 0;moz-box-sizing: border-box;outline: none;padding: 0;text-decoration: none;webkit-box-sizing: border-box;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;-moz-tap-highlight-color: rgba(0,0,0,0);-moz-tap-highlight-color: transparent;-o-tap-highlight-color: rgba(0,0,0,0);-o-tap-highlight-color: transparent;-ms-tap-highlight-color: rgba(0,0,0,0);-ms-tap-highlight-color: transparent;tap-highlight-color: rgba(0,0,0,0);tap-highlight-color: transparent;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display: block;} html{font-family: 'Roboto', sans-serif;ms-text-size-adjust: 100%;webkit-text-size-adjust: 100%;} body,html{background: -moz-radial-gradient(rgba(255,255,255,1) 0%, rgba(232,234,236,1) 22%);}body{background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(232,234,236,1) 22%); background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(232,234,236,1) 22%); background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(232,234,236,1) 22%); background: rgb(255,255,255); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(22%,rgba(232,234,236,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(232,234,236,1) 22%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e8eaec',GradientType=1 ); margin: 0; } body,html{height: 100%;min-height: 100%;} a,a:visited{color: #fff;} h1{font-size: 2em;margin-top: 1.5em;text-align: center;} h2{border-bottom: 1px solid #000;color: #7D6707;font-size: 1.4em;font-weight: lighter;margin: 0 auto;margin-top: 0.3em;padding-bottom: 1em;text-align: center;width: 76%;} h3{font-size: 2em;margin-top: 1.5em;text-align: center;} h4{border-bottom: 1px solid #000;color: #7D6707;font-size: 1.4em;font-weight: lighter;margin: 0 auto;margin-top: 0.3em;padding-bottom: 1em;text-align: center;width: 76%;} ul{list-style-type: none;margin: 0;padding: 0;} .animated{animation-duration: 1.5s;animation-fill-mode: both;webkit-animation-duration: 1.5s;webkit-animation-fill-mode: both;} .animatedRapido{animation-duration: 1s;animation-fill-mode: both;webkit-animation-duration: 1s;webkit-animation-fill-mode: both;} @-webkit-keyframes fadeIn{0%{opacity: 0;}100%{opacity: 1;}} @-moz-keyframes fadeIn{0%{opacity: 0;}100%{opacity: 1;}} @-o-keyframes fadeIn{0%{opacity: 0;}100%{opacity: 1;}} @-ms-keyframes fadeIn{0%{opacity: 0;}100%{opacity: 1;}} @keyframes fadeIn{0%{opacity: 0;}100%{opacity: 1;}}  .fadeIn{animation-name: fadeIn;-webkit-animation-name: fadeIn;}  @-webkit-keyframes activaEstirar{ 0%{transform: scale3d(1, 1, 1);-webkit-transform: scale3d(1, 1, 1);} 30%{transform: scale3d(1.25, 0.75, 1);-webkit-transform: scale3d(1.25, 0.75, 1);} 40%{transform: scale3d(0.75, 1.25, 1);-webkit-transform: scale3d(0.75, 1.25, 1);} 50%{transform: scale3d(1.15, 0.85, 1);-webkit-transform: scale3d(1.15, 0.85, 1);} 65%{transform: scale3d(.95, 1.05, 1);-webkit-transform: scale3d(.95, 1.05, 1);} 75%{transform: scale3d(1.05, .95, 1);-webkit-transform: scale3d(1.05, .95, 1);} 100%{transform: scale3d(1, 1, 1);-webkit-transform: scale3d(1, 1, 1);} }  @-moz-keyframes activaEstirar{ 0%{transform: scale3d(1, 1, 1);-moz-transform: scale3d(1, 1, 1);} 30%{transform: scale3d(1.25, 0.75, 1);-moz-transform: scale3d(1.25, 0.75, 1);} 40%{transform: scale3d(0.75, 1.25, 1);-moz-transform: scale3d(0.75, 1.25, 1);} 50%{transform: scale3d(1.15, 0.85, 1);-moz-transform: scale3d(1.15, 0.85, 1);} 65%{transform: scale3d(.95, 1.05, 1);-moz-transform: scale3d(.95, 1.05, 1);} 75%{transform: scale3d(1.05, .95, 1);-moz-transform: scale3d(1.05, .95, 1);} 100%{transform: scale3d(1, 1, 1);-moz-transform: scale3d(1, 1, 1);} }  @-o-keyframes activaEstirar{ 0%{transform: scale3d(1, 1, 1);-o-transform: scale3d(1, 1, 1);} 30%{transform: scale3d(1.25, 0.75, 1);-o-transform: scale3d(1.25, 0.75, 1);} 40%{transform: scale3d(0.75, 1.25, 1);-o-transform: scale3d(0.75, 1.25, 1);} 50%{transform: scale3d(1.15, 0.85, 1);-o-transform: scale3d(1.15, 0.85, 1);} 65%{transform: scale3d(.95, 1.05, 1);-o-transform: scale3d(.95, 1.05, 1);} 75%{transform: scale3d(1.05, .95, 1);-o-transform: scale3d(1.05, .95, 1);} 100%{transform: scale3d(1, 1, 1);-o-transform: scale3d(1, 1, 1);} }  @-ms-keyframes activaEstirar{ 0%{transform: scale3d(1, 1, 1);-ms-transform: scale3d(1, 1, 1);} 30%{transform: scale3d(1.25, 0.75, 1);-ms-transform: scale3d(1.25, 0.75, 1);} 40%{transform: scale3d(0.75, 1.25, 1);-ms-transform: scale3d(0.75, 1.25, 1);} 50%{transform: scale3d(1.15, 0.85, 1);-ms-transform: scale3d(1.15, 0.85, 1);} 65%{transform: scale3d(.95, 1.05, 1);-ms-transform: scale3d(.95, 1.05, 1);} 75%{transform: scale3d(1.05, .95, 1);-ms-transform: scale3d(1.05, .95, 1);} 100%{transform: scale3d(1, 1, 1);-ms-transform: scale3d(1, 1, 1);} }  @keyframes activaEstirar{ 0%{transform: scale3d(1, 1, 1);-webkit-transform: scale3d(1, 1, 1);-moz-transform: scale3d(1, 1, 1);-o-transform: scale3d(1, 1, 1);-ms-transform: scale3d(1, 1, 1);} 30%{transform: scale3d(1.25, 0.75, 1);-webkit-transform: scale3d(1.25, 0.75, 1);-moz-transform: scale3d(1.25, 0.75, 1);-o-transform: scale3d(1.25, 0.75, 1);-ms-transform: scale3d(1.25, 0.75, 1);} 40%{transform: scale3d(0.75, 1.25, 1);-webkit-transform: scale3d(0.75, 1.25, 1);-moz-transform: scale3d(0.75, 1.25, 1);-o-transform: scale3d(0.75, 1.25, 1);-ms-transform: scale3d(0.75, 1.25, 1);} 50%{transform: scale3d(1.15, 0.85, 1);-webkit-transform: scale3d(1.15, 0.85, 1);-moz-transform: scale3d(1.15, 0.85, 1);-o-transform: scale3d(1.15, 0.85, 1);-ms-transform: scale3d(1.15, 0.85, 1);} 65%{transform: scale3d(.95, 1.05, 1);-webkit-transform: scale3d(.95, 1.05, 1);-moz-transform: scale3d(.95, 1.05, 1);-o-transform: scale3d(.95, 1.05, 1);-ms-transform: scale3d(.95, 1.05, 1);} 75%{transform: scale3d(1.05, .95, 1);-webkit-transform: scale3d(1.05, .95, 1);-moz-transform: scale3d(1.05, .95, 1);-o-transform: scale3d(1.05, .95, 1);-ms-transform: scale3d(1.05, .95, 1);} 100%{transform: scale3d(1, 1, 1);-webkit-transform: scale3d(1, 1, 1);-moz-transform: scale3d(1, 1, 1);-o-transform: scale3d(1, 1, 1);-ms-transform: scale3d(1, 1, 1);} }   @keyframes blink{ 0%{opacity: 1;} 50%{opacity: 0;} 100%{opacity: 1;} } @-webkit-keyframes blink{ 0%{opacity: 1;} 50%{opacity: 0;} 100%{opacity: 1;} } @-moz-keyframes blink{ 0%{opacity: 1;} 50%{opacity: 0;} 100%{opacity: 1;} } @-ms-keyframes blink{ 0%{opacity: 1;} 50%{opacity: 0;} 100%{opacity: 1;} } @-o-keyframes blink{ 0%{opacity: 1;} 50%{opacity: 0;} 100%{opacity: 1;} } .activaEstirar{animation-name: activaEstirar;webkit-animation-name: activaEstirar;} .activaZoom{ -webkit-transition: -webkit-transform 200ms ease; -moz-transition: -moz-transform 200ms ease; -o-transition: -o-transform 200ms ease; -ms-transition: -ms-transform 200ms ease; transition:transform 200ms ease; } .activaZoom:hover{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); }  .triangulo{ border-left: 600px outset transparent; border-right: 600px outset transparent; border-top: 40px solid #E8EAEC; height: 0; margin: 0 auto; position: relative; text-align: center; width: 0; } .triangulo.amarillo{border-top: 40px solid #fdd00f;} .triangulo.oscuro{border-top: 40px solid #181a1c;} .oculto{display: none;opacity: 0;} .visible{display: block;} .bordeArriba{border-top: 1px solid #000;} .text-muted{opacity: .8;} .centrar{display: table-cell;vertical-align: middle;} .typed-cursor{ animation: blink 0.7s infinite; font-weight: 100; moz-animation: blink 0.7s infinite; ms-animation: blink 0.7s infinite; o-animation: blink 0.7s infinite; opacity: 1; webkit-animation: blink 0.7s infinite; }  #contenedorTransponedor{display:block;} .completa{ bottom: 0; color: #000; display: table; min-height: 100%; text-align: center; width: 100%; } .categoriaOscura{ background: -moz-radial-gradient(center, ellipse cover, rgba(54,59,63,1) 0%, rgba(24,26,28,1) 70%); background: -ms-radial-gradient(center, ellipse cover, rgba(54,59,63,1) 0%,rgba(24,26,28,1) 70%); background: -o-radial-gradient(center, ellipse cover, rgba(54,59,63,1) 0%,rgba(24,26,28,1) 70%); background: radial-gradient(ellipse at center, rgba(54,59,63,1) 0%,rgba(24,26,28,1) 70%); background: rgb(54,59,63); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(54,59,63,1)), color-stop(70%,rgba(24,26,28,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(54,59,63,1) 0%,rgba(24,26,28,1) 70%); bottom: 0; color: #fff; display: table; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#363b3f', endColorstr='#181a1c',GradientType=1 ); min-height: 100%; text-align: center; width: 100%; } .categoriaPie{ background: -moz-radial-gradient(center, ellipse cover, rgba(54,59,63,1) 0%, rgba(24,26,28,1) 70%); background: -ms-radial-gradient(center, ellipse cover, rgba(54,59,63,1) 0%,rgba(24,26,28,1) 70%); background: -o-radial-gradient(center, ellipse cover, rgba(54,59,63,1) 0%,rgba(24,26,28,1) 70%); background: radial-gradient(ellipse at center, rgba(54,59,63,1) 0%,rgba(24,26,28,1) 70%); background: rgb(54,59,63); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(54,59,63,1)), color-stop(70%,rgba(24,26,28,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(54,59,63,1) 0%,rgba(24,26,28,1) 70%); bottom: 0; color: #fff; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#363b3f', endColorstr='#181a1c',GradientType=1 ); text-align: center; width: 100%; } .categoriaOscura h4{ border-color: #fff; color: #fdd00f; } #oscuro{background-color: #000;} .principal{ background: url(../img/fondo.jpg) no-repeat center center; background-size: cover; display: table; height: 100%; margin-top: 3em; moz-background-size: cover; o-background-size: cover; webkit-background-size: cover; } .principal h1{margin-top: 1em;} .textoInicio{ color: #fff; font-size: 1.3em; line-height: 2.8em; margin: 9em 0 0 2em; max-width: 50%; } .bienvenida{ color: #FED738; font-size: 1.3em; font-weight: bold; text-shadow: #000 0.06em 0.06em 0.06em; } #typed{background-color: rgba(50,50,50,0.7);max-width: 200px;} nav#topnav{ background-color: #181A1C; height: 3.2em; padding: 0.6em; position: fixed; top: 0; width: 100%; z-index: 9; } nav#topnav ul li{display: inline-block;} nav#topnav ul li a{ border: 2px solid #181A1C; color: #FFF; display: block; margin: 0 0.1em; padding: 0.2em 0.25em 0.1em 0.25em; } nav#topnav a:hover{border: 2px solid #FDD00F;} #topnav>.contenedorMenu{margin: 0 auto;width: 78%;} #logo{float: left;margin-top: 0.4em;} #logo img{width: 140px;} #main_nav{float: rigth;margin: 0 auto;text-align: right;} #main_nav>li>a{ border-color: #181A1C; -webkit-transition: border 800ms ease; -moz-transition: border 800ms ease; -o-transition: border 800ms ease; -ms-transition: border 800ms ease; transition: border 800ms ease; } #main_nav>li>a.actual{border: 2px solid #FDD00F;}  #botonMovil{ display:none; position:absolute; right:5%; top:-0.5em; cursor:pointer; z-index:99; -webkit-transition:-webkit-transform 300ms; -moz-transition:-moz-transform 300ms; -o-transition:-o-transform 300ms; -ms-transition:-ms-transform 300ms; transition:transform 300ms; }  #botonMovil #lineA2{display:none;} #botonMovil #lineC2{display:none;}   #botonMovil.activar{ -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); }  #botonMovil.activar #lineA{display:none;} #botonMovil.activar #lineA2{display:block;} #botonMovil.activar #lineC{display:none;} #botonMovil.activar #lineC2{display:block;}  #menuMovil{ display:none; position:fixed; top:0; left:0; height:100%; min-height:100%; width: 100%; z-index:5; -webkit-transform:translateX(2000px); -moz-transform:translateX(2000px); -ms-transform:translateX(2000px); transform:translateX(2000px); -webkit-transition:-webkit-transform 300ms; -moz-transition:-moz-transform 300ms; -o-transition:-o-transform 300ms; -ms-transition:-ms-transform 300ms; transition:transform 300ms; }  #menuMovil.activar{ -webkit-transform:translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); }  #menuMovil>ul{ float:right; background-color:#181A1C; color:#5b3564; width: 190px; min-height:100%; height:100%; padding: 15px 25px; box-shadow:inset -5px -10px 10px 0 rgba(0,0,0,.3); }  #menuMovil>ul>li:first-child{margin-top:2em;}  #menuMovil a{ display: block; color: #fff; padding: 15px 0; border-bottom: 1px solid rgba( 255, 255, 255, 0.05 ); }  #menuMovil a:hover{text-decoration:underline;}     #contenedorServicios{ display: table; margin: 4em auto; text-align: center; width: 80%; } .cajaServicios{float: left;width: 33%;} .imagenServicios{ background-color: #ffe682; border: 2px solid #fecc05; border-radius: 6em; height: 10em; margin: 0 auto; width: 10em; } .imagenServicios img{margin-top: 1.8em;width: 6em;} .cajaServicios h2{border: none;margin-top: 1em;padding-bottom: 0.2em;} .cajaServicios p{margin: 0 auto;width: 60%;} #contenedorPortafolio h3{font-size: 1.3em;} #portfolio{ background: -moz-radial-gradient(center, ellipse cover, rgba(252,232,153,1) 0%, rgba(253,208,15,1) 75%); background: -ms-radial-gradient(center, ellipse cover, rgba(252,232,153,1) 0%,rgba(253,208,15,1) 75%); background: -o-radial-gradient(center, ellipse cover, rgba(252,232,153,1) 0%,rgba(253,208,15,1) 75%); background: radial-gradient(ellipse at center, rgba(252,232,153,1) 0%,rgba(253,208,15,1) 75%); background: rgb(252,232,153); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(252,232,153,1)), color-stop(75%,rgba(253,208,15,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(252,232,153,1) 0%,rgba(253,208,15,1) 75%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fce899', endColorstr='#fdd00f',GradientType=1 ); padding-bottom: 2em; }  .controls{margin: 1.6em auto 0 auto;padding: 2%;text-align: left;width: 80%;} .controls>button{margin:0.3em 0.2em;} label{font-weight: 300;margin: 0 .4em 0 0;} button{ background: #FDDB4C; border: 1px solid #000; border-radius: 4px; color: #000; cursor: pointer; display: inline-block; margin-left:0.2em; font-size: 1.1em; line-height:1.1em; font-weight: 300; padding: .4em .8em; -webkit-transition: background 500ms ease; -moz-transition: background 500ms ease; -o-transition: background 500ms ease; -ms-transition: background 500ms ease; transition: background 500ms ease; } button:hover{background: #181a1c;color: #fff;} button.active{ background: linear-gradient(to bottom, #45484d, #000000); background: -moz-linear-gradient(top, #45484d, #000000); background: -ms-linear-gradient(top, #45484d, #000000); background: -o-linear-gradient(top, #45484d, #000000); background: -webkit-gradient(linear, left top, left bottom, from(#45484d), to(#000000)); background: -webkit-linear-gradient(top, #45484d, #000000); color: #fff; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#45484d, endColorstr=#000000); }  button:focus{outline: 0 none;} button + label{margin-left: 1em;} #contenedorProyecto{ background: #181a1c; border-radius: 0 2em 0 0; color: #fff; display: table; margin: 0 auto; width: 75%;  -webkit-box-shadow:0 3px 6px rgba(0,0,0,0.4); -moz-box-shadow:0 3px 6px rgba(0,0,0,0.4); -o-box-shadow:0 3px 6px rgba(0,0,0,0.4); -ms-box-shadow:0 3px 6px rgba(0,0,0,0.4); box-shadow:0 3px 6px rgba(0,0,0,0.4); }  .imagenProyecto{ width:36%; float:left; padding:1% 0 1% 1%; -webkit-transition:opacity 200ms; -moz-transition:opacity 200ms; -o-transition:opacity 200ms; -ms-transition:opacity 200ms; transition:opacity 200ms; }   .imagenProyecto:hover{ opacity:0.8; }  .descripcionProyecto{ display: table-cell; float: right; margin: 2% 2% 2% 0; text-align: left; width: 60%; }  .descripcionProyecto a:hover{color:#EFE1A8;} .descripcionProyecto span{ color: #FDD00F; display: inline-block; text-align: left; width: 7em; } .resumenProyecto{margin-top: 1em;text-align: justify;width: 95%;} p.cerrarProyecto{ display: inline-block; font-size: 1.4em; margin: 0 0.5em 0.8em 0; width: 100%; } p.cerrarProyecto a{ border-bottom: 4px dashed #fff; color: #FDD00F; padding: 0.2em; } .cerrarProyecto span{ cursor: pointer; float: right; padding: 0.2em; width: 1em; }  .container{ font-size: 0.1px; margin: 0 auto; padding: 1%; text-align: justify; webkit-backface-visibility: hidden; width: 80%; }  .container .mix{display: none;margin-bottom: 2%;text-align: left;}      #contenedorPortafolio>.cajaFolio{ float:left; position:relative; width:21%; margin:2%; padding:1%; background:rgba(255,255,255,0.3); overflow: hidden; padding-bottom:1em; -webkit-box-shadow:0 3px 6px rgba(0,0,0,0.4); -moz-box-shadow:0 3px 6px rgba(0,0,0,0.4); -o-box-shadow:0 3px 6px rgba(0,0,0,0.4); -ms-box-shadow:0 3px 6px rgba(0,0,0,0.4); box-shadow:0 3px 6px rgba(0,0,0,0.4); cursor:pointer; }  #contenedorPortafolio>.cajaFolio>a>.textoFolio{ background:rgba(255,255,255,0.8); width:100%;height:100%; position:absolute; left:0; top:0; -webkit-transform:translate3d(0,150%,0); -moz-transform:translate3d(0,150%,0); -o-transform:translate3d(0,150%,0); -ms-transform:translate3d(0,150%,0); transform:translate3d(0,150%,0);  -webkit-transition:-webkit-transform 250ms ease-out; -moz-transition:-moz-transform 250ms ease-out; -o-transition:-o-transform 250ms ease-out; -ms-transition:-ms-transform 250ms ease-out; transition:transform 250ms ease-out;}   #contenedorPortafolio>.cajaFolio:hover>a>.textoFolio{ -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } #contenedorPortafolio>.cajaFolio:hover>a>.portadaFolio>img{ opacity:0.8; -webkit-filter: blur(4px); -moz-filter: blur(4px); -o-filter: blur(4px); -ms-filter: blur(4px); filter: blur(4px); }  #contenedorPortafolio>.cajaFolio>a>div{overflow: hidden;margin-bottom:4%;}  #contenedorPortafolio>.cajaFolio img{width:100%;}      #principalSobreMi{margin: 4em auto;text-align: justify;width: 76%;} #fotoSobreMi{ background: url(../img/fotosobremi.jpg) no-repeat center center; background-size: cover; border-radius: 0 0 0 1.2em; float: left; height: 500px; margin: 0 2em 2em 0; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; width: 40%; } #textosSobreMi p{margin: 2em 0 2em 0;} #conocimientos{display: inline-block;margin: 2em auto;width: 76%;} #conocimientos h3{color: #fdd00f;font-size: 1.4em;margin: 2em 0;} #conocimientos h4{border: none;color: #fff;font-size: 1.2em;font-weight: bold;margin: 0 auto;} #conocimientosIzquierda{float: left;width: 48.5%;} #conocimientosDerecha{float: right;width: 48.5%;} .listaConocimientos h4{font-weight: normal;} .listaConocimientos li{ background-color: rgba(255,255,255,0.2); border-radius: 0.2em; color: #181a1c; font-weight:bold; font-size: 0.95em; list-style: none; margin: 0.5em 0 0.5em 0; padding: 2px; text-align: left; } .barraConocimiento{ background: linear-gradient(left,#FFFBEA,#FDD00F); background: -moz-linear-gradient(left,#FFFBEA,#FDD00F); background: -ms-linear-gradient(left,#FFFBEA,#FDD00F); background: -o-linear-gradient(left,#FFFBEA,#FDD00F); background: -webkit-gradient(left,#FFFBEA,#FDD00F); background: -webkit-linear-gradient(left,#FFFBEA,#FDD00F); border-radius: 0.2em; ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#FFFBEA', endColorstr='#FDD00F')"; width: 0; -webkit-transition:width 1800ms ease-out; -moz-transition:width 1800ms ease-out; -o-transition:width 1800ms ease-out; -ms-transition:width 1800ms ease-out; transition:width 1800ms ease-out; -webkit-transition-delay:150ms; -moz-transition-delay:150ms; -o-transition-delay:150ms; -ms-transition-delay:150ms; transition-delay:150ms;}  .barraConocimiento span{margin-left: 2em;}  #barra1.animar{width:90%;} #barra2.animar{width:85%;} #barra3.animar{width:75%;} #barra4.animar{width:86%;} #barra5.animar{width:75%;} #barra6.animar{width:85%;} #barra7.animar{width:85%;} #barra8.animar{width:90%;} #barra9.animar{width:86%;} #barra10.animar{width:80%;} #barra11.animar{width:76%;} #barra12.animar{width:80%;} #barra13.animar{width:70%;}  #barra14.animar{width:82%;} #barra15.animar{width:68%;} #barra16.animar{width:62%;} #barra17.animar{width:60%;} #barra18.animar{width:86%;} #barra19.animar{width:70%;} #barra20.animar{width:60%;} #barra21.animar{width:75%;} #barra22.animar{width:65%;} #barra23.animar{width:70%;} #barra24.animar{width:82%;} #barra25.animar{width:76%;} #barra26.animar{width:100%;}    .textoBarra{width: 15em;} #contacto p{color: #000;margin: 2em 0 0 0.6em;padding-bottom: 0.5em;text-align: left;} #contacto div p{color: #ff4040;text-align: center;} #contacto h3{margin-bottom: 0;} #captchaCentrar{display: block;margin: 1em auto 0 auto;width: 320px;} #c_form{margin: 0 auto;width: 76%;} #contacto>#c_form>#formularioContacto>#c_information>#avisoEnviado{margin-left: 0;} .textField{ background: #c0c0c0; border-radius: 0.7em; font-weight: bold; overflow: hidden; padding: 0.2em; width: 100%; } .textField span{color: #FF4040;margin-left: 0.2em;} .celdaFormulario{margin: 0 0 1.5em;width: 100%;} .celdaFormulario:after{clear: both;content: "";display: block;} input, textarea{ background: #fff; border-radius: 0.7em; box-shadow: inset 0 0px 3px rgba(0,0,0,0.75); box-sizing: border-box; color: #444; display: block; margin: 0; moz-box-shadow: inset 0 0px 3px rgba(0,0,0,0.75); moz-box-sizing: border-box; padding: 0.75em 1.5em; resize: none; -webkit-box-shadow: inset 0 0px 3px rgba(0,0,0,0.75); -webkit-box-sizing: border-box; -moz-box-shadow: inset 0 0px 3px rgba(0,0,0,0.75); -moz-box-sizing: border-box; -o-box-shadow: inset 0 0px 3px rgba(0,0,0,0.75); -o-box-sizing: border-box; -ms-box-shadow: inset 0 0px 3px rgba(0,0,0,0.75); -ms-box-sizing: border-box; width: 100%; } textarea{height: 10em;overflow: auto;} #botonEnviar,.botonEnviar{ background: linear-gradient(top,#EFEFEF,#939393); background: -moz-linear-gradient(top,#EFEFEF,#939393); background: -ms-linear-gradient(top,#EFEFEF,#939393); background: -o-linear-gradient(top,#EFEFEF,#939393); background: -webkit-gradient(top,#EFEFEF,#939393); background: -webkit-linear-gradient(top,#EFEFEF,#939393); border-radius: 0.5em; color: #000; font-size: 1.2em; margin-top: 1.5em; ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#EFEFEF', endColorstr='#939393')"; padding: 0.4em; width: 100%; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -o-transition: all 500ms ease; -ms-transition: all 500ms ease; transition: all 500ms ease; } #botonEnviar:hover,.botonEnviar:hover{ background: linear-gradient(top,#727272,#181a1c); background: -moz-linear-gradient(top,#727272,#181a1c); background: -ms-linear-gradient(top,#727272,#181a1c); background: -o-linear-gradient(top,#727272,#181a1c); background: -webkit-gradient(top,#727272,#181a1c); background: -webkit-linear-gradient(top,#727272,#181a1c); color: #fff; cursor: pointer; ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#727272', endColorstr='#181a1c')"; text-shadow: 0 0.02em 0.02em #000; } .animacionRedes{margin: 0 auto;padding: 2em 0;width: 76%;} .animacionRedes h3{font-size: 1.2em;} #encuentranosSociales{margin-top: 1em;text-align: center;} #encuentranosSociales a{display: inline-block;} #encuentranosSociales .margenIzquierda{margin-left: 2em;} #encuentranosSociales div{height: 48px;width: 48px;} #botonFacebook{background: url("../img/redesSociales.png") no-repeat scroll 0px -48px;} #botonTwitter{background: url("../img/redesSociales.png") no-repeat scroll -48px -48px;} #botonGoogle{background: url("../img/redesSociales.png") no-repeat scroll -96px -48px;} #botonLinkedIn{background: url("../img/redesSociales.png") no-repeat scroll -144px -48px;} #botonFacebook:hover{background: url("../img/redesSociales.png") no-repeat scroll 0px 0px;} #botonTwitter:hover{background: url("../img/redesSociales.png") no-repeat scroll -48px 0px;} #botonGoogle:hover{background: url("../img/redesSociales.png") no-repeat scroll -96px 0px;} #botonLinkedIn:hover{background: url("../img/redesSociales.png") no-repeat scroll -144px 0px;} .efectoRedSocial{ -webkit-transition: background 250ms ease; -moz-transition: background 250ms ease; -o-transition: background 250ms ease; -ms-transition: background 250ms ease; transition: background 250ms ease; } #faceLike{padding-bottom: 2em;}  footer{padding: 1em 0;} footer a,footer a:visited{color: #fdd00f;}   #volverPrincipal{margin:2em 0 0 10%;} #volverPrincipal a,#volverPrincipal a:visited,#avisoLegal a,#avisoLegal a:visited{color:#000;} #volverPrincipal>#seccionActual:hover{color:#000;cursor:default;} #volverPrincipal a:hover,#avisoLegal a:hover{color:#fdd00f;} #avisoLegal a{font-style:italic;} #avisoLegal{width:80%;padding:4%;background-color:#fff;margin:2em auto;display:block;text-align:justify;} #avisoLegal h3{margin:0 0 0.8em 0; font-weight:normal;} #avisoLegal h4{margin-bottom:1em;padding-bottom:0.4em;} #avisoLegal p{margin:1em 0 2em 0;} #avisoLegal ol,#avisoLegal ul{margin:-1.2em 0 2em 2em;} #avisoLegal ol>li{list-style-type:decimal;padding:0.2em 0;} #avisoLegal ul>li{list-style-type:circle;padding:0.2em 0;} #abajoAvisoLegal{text-align:center;margin-top:2em;}  #politicaCookies{ position: fixed; bottom: 0px; left: 0px; width: 100%; z-index: 999999; display: block; background-color: #fff; border-top:2px solid #000;  } #politicaCookies>div{ margin: 0 auto; position: relative; top: 0px; width: 90%; padding-top:0.5em; } #politicaCookies p{ font-size:0.9em; line-height:1.5em; text-align:justify; } #politicaCookies a{ color:#000; text-decoration: underline; border:2px solid #000; background-color:#fdd00f; padding:0 0.2em; }  #politicaCookies a:hover{font-weight:bold;} .soloMovil{display: none;}

@media(max-width:1400px){.soloMovil{display: block;}	.imagenProyecto{width:44%;}	.descripcionProyecto{width:52%;}#contenedorPortafolio>.cajaFolio{width:29%;} #contenedorPortafolio>.cajaFolio>a>div{margin-bottom:3%;}}  
@media(max-width:800px){ h1{font-size: 1.6em;} h2{font-size: 1.2em;font-weight: bold;} nav#topnav{height: 2.8em;} #topnav > .contenedorMenu{width: 90%;} #logo img{width: 120px;} nav#topnav ul li a{font-size: 0.8em; padding-bottom:0.2em;} .textoInicio{font-size: 0.8em;margin: 6em 0 0 2em;} .principal{margin-top: 2em;} .imagenServicios{height: 8em;width: 8em;} .imagenServicios img{width: 4em;} .cajaServicios p{width: 90%;} #contenedorProyecto{width: 86%;}  #contenedorPortafolio>.cajaFolio{width:46%;}  .container .mix,.container .gap{width: 48%;} .oculto{opacity: 1;} .imagenProyecto{ padding:0; border-radius: 0 1.4em 0 0; float: none; margin: 2em; width: 90%; } .descripcionProyecto{ display: block; float: none; font-size: 1em; margin: 0.5em auto 2em auto; width: 90%; } .controls,.container{width: 90%;} .controls{text-align:center;} #principalSobreMi{width: 86%;} #conocimientos{width: 86%;} #c_form{width: 86%;} .noMovil{display: none;} .animacionRedes{margin: 0 auto;padding: 2em 0;width: 86%;} }
@media(max-width:600px){ #main_nav{display: none;} #botonMovil{display:block;} #menuMovil{display: block;} nav li{display: inline-block;margin: 0px;padding: 0;width: 100%;} .principal{margin-top: 0;} h2{width: 86%;} .textoInicio{font-size: 0.8em;max-width: 80%;} #contenedorServicios{margin-bottom: 0;} .cajaServicios{margin-bottom: 4em;width: 100%;} .imagenServicios{height: 8em;width: 8em;} .imagenServicios img{width: 4em;} .cajaServicios p{width: 90%;} #contenedorProyecto{width: 86%;}  .container .mix,.container .gap{margin: 4% 0;width: 100%;} .oculto{opacity: 1;} .imagenProyecto{float: none;margin: 4% 4% 0 4%;width: 91%;} .descripcionProyecto{ font-size: 0.8em; margin: 1em auto 2em auto; }  .controls,.container{width: 90%;} #principalSobreMi{width: 86%;} #conocimientos{width: 86%;} #conocimientosIzquierda,#conocimientosDerecha{margin-bottom: 2em;width: 100%;} #c_form{width: 86%;} #contenedorRedes{width: 100%;} #encuentranosSociales>.margenIzquierda{margin-left: 1em;} }
@media(max-width:600px) and (orientation : portrait){ .principal{background: url(../img/fondomovil.jpg) no-repeat center center;} .textoInicio{margin: 16em auto 0 auto;} } @media(max-width:480px){.textoInicio{font-size: 0.7em;}}