@charset "utf-8";
@font-face {
    font-family: 'Alpha';
    src: url('images/alpha-web.eot');
    src: url('images/alpha-web.eot?#iefix') format('embedded-opentype'),
         url('images/alpha-web.woff2') format('woff2'),
         url('images/alpha-web.woff') format('woff'),
         url('images/alpha-web.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
html, body{width:100%; height:100%; min-width:360px !important; min-height:480px !important; position:relative;}
body{
	margin:0 0;
	background:url(images/fondo.jpg) no-repeat center center fixed;
	background-size:100% 100%;-moz-background-size: cover;-webkit-background-size: cover;-o-background-size: cover;
	font-family:Calibri, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
}
#wrapper0{width:100%;height:100%;display:table;}
#wrapper1{width:100%;height:100%;display:table-cell;vertical-align:middle;}
#cuero{
	height:500px;
	width:900px;
	margin:0 auto;
	background-color:#252525;
	-moz-border-radius:10px;
	-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);
	border-radius:10px;
	position:relative;
}
#titulo{position:absolute; top:0px; left:5px;}
#titulo h1{font-family:Alpha, Calibri; color:#ffffff; margin:0px 10px; padding:0px; font-size:20pt;}
#portafolio{
	height:440px;
	width:840px;
	position: relative;
	top: 30px; left: 30px;
	-moz-transform:rotate(-1deg);-webkit-transform:rotate(-1deg);-o-transform:rotate(-1deg);transform:rotate(-1deg);
	background-color:#ffffff;
	z-index:10;
	overflow:hidden;
}
#tarjeta{
	position:absolute;
	background:url(images/tarjeta.gif);
	width:240px;height:160px;z-index:5px;top:-10px;right:60px;	
	-moz-border-radius:5px;border-radius:5px;
	-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);
	-moz-transform:rotate(-9deg);-webkit-transform:rotate(-9deg);-o-transform:rotate(-9deg);transform:rotate(-9deg);
	padding:10px;
	color:#555555;
	font-family:"Century Gothic",Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
	font-size:9pt;line-height:14pt;
	transition: transform 1s ease-in-out;-webkit-transition:transform 1s ease-in-out;-moz-transition:transform 1s ease-in-out;-o-transition:transform 1s ease-in-out;
}
#lapicero{width:43px;height:311px;position:absolute;right:-50px;top:20px;background:url(images/lapicero.png);z-index:100;}
#tapa{width:98px;height:152px;position:absolute;right:-5px;top:40px;background:url(images/tapa.png);z-index:100;}
#clips{width:120px;height:120px;position:absolute;left:-125px;top:20px;background:url(images/clips.png);z-index:100;}
#etiqueta{width:161px;height:154px;position:absolute;left:0px;top:20px;background:url(images/etiqueta.png);z-index:100;-webkit-transition:-webkit-transform 1s ease-in-out;-moz-transition:-moz-transform 1s ease-in-out;-o-transition:-o-transform 1s ease-in-out;transition: transform 1s ease-in-out;-webkit-transform-origin: 40% 10%;-moz-transform-origin: 40% 10%;-o-transform-origin: 40% 10%; -ms-transform-origin: 40% 10%;transform-origin: 40 10%;}
#etiqueta:hover{-o-transform:rotate(20deg);-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);transform:rotate(20deg);}
#menuchico{width:100%;display:block;height:32px; color:#222222;text-align:right;font-family:Alpha, Calibri, Cambria; font-size:16pt;}
#menuchico ul{padding:0px;margin:0px 0px; width:auto; padding-right:20px;}
#menuchico ul a li{color:#222222;}
#menuchico li{display:inline-block;list-style:none;height:32px;line-height:32px; padding-left:5px; padding-right:5px; margin:0px; color:#669900; vertical-align:middle; border-bottom:#FFFFFF 2px solid;}
#tarjeta #loguito{width:100%;height:40px;background:url(images/loguitito.png);background-position:right 5px;background-repeat:no-repeat;}
#tarjeta #texto{text-align:right; padding-right:10px;}
#tarjeta #texto a{color:#555555; text-decoration:none;}
#tarjeta #texto a:hover{color:#000000;}
#tarjeta:hover{-moz-transform:rotate(0deg) translate(0px,-60px);-webkit-transform:rotate(0deg) translate(0px,-60px);-o-transform:rotate(0deg) translate(0px,-60px);transform:rotate(0deg) translate(0px,-60px);}
#menu{display:block;width:100%;height:100%;text-align:center;}
#portafolio #logo{position:absolute; background:url(images/logo.png); width:150px; height:46px; bottom:5px; right:5px;}
#logoCP{width:200px;height:200px;display:inline-block;font-size: 600px;margin:18% auto;list-style: none;}
#logoCP a{display:block;width: .2em;height: .2em;position: absolute;color:#222222;text-decoration:none;}
#logoCP li{width: .2em;height: .2em;-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.5);}
#logoCP a li{		
	transition: top 0.5s ease-in-out, left 0.5s ease-in-out;
	-webkit-transition:top 0.5s ease-in-out, left 0.5s ease-in-out;
	-moz-transition:top 0.5s ease-in-out, left 0.5s ease-in-out;
	-o-transition:top 0.5s ease-in-out, left 0.5s ease-in-out;
	position:relative;
}
#logoCP a:nth-child(1) li{background: #669900;-o-transform:rotate(25deg);-webkit-transform:rotate(25deg);-moz-transform:rotate(25deg);transform:rotate(25deg);top:50%;left:-14%;z-index:50;}
#logoCP a:nth-child(2) li{background: #8c76b6;-o-transform:rotate(-10deg);-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);transform:rotate(-10deg);top:0%;left:-45%;z-index:40;}
#logoCP a:nth-child(3) li{background: #ff5e6d;-o-transform:rotate(3deg);-webkit-transform:rotate(3deg);-moz-transform:rotate(3deg);transform:rotate(3deg);top:-50%;left:-5%;z-index:30;}
#logoCP a:nth-child(4) li{background: #00a8c9;-o-transform:rotate(20deg);-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);transform:rotate(20deg);top:-15%;left:50%;z-index:20;}
#logoCP a:nth-child(5) li{background: #ff9100;-o-transform:rotate(-25deg);-webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);transform:rotate(-25deg);top:45%;left:55%;z-index:10;}
#logoCP a:nth-child(1):hover li{top:60%;left:-25%;}
#logoCP a:nth-child(2):hover li{top:-10%;left:-55%;}
#logoCP a:nth-child(3):hover li{top:-60%;left:-10%;}
#logoCP a:nth-child(4):hover li{top:-25%;left:60%;}
#logoCP a:nth-child(5):hover li{top:50%;left:60%;}

#logoCP li div{font-size:22pt;position:absolute; font-family:Alpha, Calibri, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; height:22pt; line-height:22pt;}
#logoCP .lip{bottom:3px;right:10px;}
#logoCP .lis{top:3px;left:10px;}
#logoCP .lia{top:3px;right:10px;}
#logoCP .lie{top:3px;right:10px;}
#logoCP .lic{bottom:3px;right:10px;}

#cuerpo{position: absolute;top: 500px;bottom: 50px;left: 37px;right: 20px;overflow: auto;display: block;}

#mp3{position:absolute; bottom:50px; left:50px; width:173px; height:110px; background:url(images/mp3.png); z-index:100;}
#mp3 #apaga{
	cursor:pointer; width:14px; height:30px; position:absolute; bottom:43px; right:13px; transform:rotate(-20deg); 
	background:url(images/power.png); background-position:center; background-repeat:no-repeat;
	-o-transform:rotate(-20deg);-webkit-transform:rotate(-20deg);-moz-transform:rotate(-20deg);
}
#mp3 #apaga:hover{background:url(images/powerb.png);}
#mp3 #retrocede, #mp3 #avanza{
	cursor:pointer; width:20px; height:11px; position:absolute; transform:rotate(-19deg);background-position:center; background-repeat:no-repeat;
	-o-transform:rotate(-19deg);-webkit-transform:rotate(-19deg);-moz-transform:rotate(-19deg);
}
#mp3 #retrocede{top:30px; right:55px;background:url(images/i.png);}
#mp3 #retrocede:hover{background:url(images/ib.png);}
#mp3 #avanza{top:23px; right:32px;background:url(images/d.png);}
#mp3 #avanza:hover{background:url(images/db.png);}	
#mp3 #volumenmas, #mp3 #volumenmenos{
	cursor:pointer; width:11px; height:15px; position:absolute; transform:rotate(-19deg);background-position:center; background-repeat:no-repeat;
	-o-transform:rotate(-19deg);-webkit-transform:rotate(-19deg);-moz-transform:rotate(-19deg);
}
#mp3 #volumenmas{bottom:27px; left:25px;background:url(images/vm.png);}
#mp3 #volumenmas:hover{background:url(images/vmb.png);}
#mp3 #volumenmenos{bottom:13px; left:29px;background:url(images/ve.png);}
#mp3 #volumenmenos:hover{background:url(images/veb.png);}
#mp3 #pantalla{
	position:absolute; bottom:23px; left:55px;
	height:24px;width:62px;overflow:hidden;
	transform:rotate(-16deg);-o-transform:rotate(-16deg);-webkit-transform:rotate(-16deg);-moz-transform:rotate(-16deg);
}
#mp3 #titulocancion{position:absolute; height:24px !important; line-height:24px; font-weight:700; color:#003399; overflow:hidden;font-family:Calibri;font-size:10pt;transition: visibility 0.4s ease-in-out;-webkit-transition:opacity 1s ease-in-out; -moz-transition:opacity 1s ease-in-out; -ms-transition:opacity 1s ease-in-out; -o-transition:opacity 1s ease-in-out; transition:opacity 1s ease-in-out;}

#menuchico ul a:nth-child(1):hover li{color:#222222;border-bottom:#222222 2px solid;}
#menuchico ul a:nth-child(3):hover li{color:#669900;border-bottom:#669900 2px solid;}
#menuchico ul a:nth-child(5):hover li{color:#8C76B6;border-bottom:#8C76B6 2px solid;}
#menuchico ul a:nth-child(7):hover li{color:#FF5E6D;border-bottom:#FF5E6D 2px solid;}
#menuchico ul a:nth-child(9):hover li{color:#00A8C9;border-bottom:#00A8C9 2px solid;}
#menuchico ul a:nth-child(11):hover li{color:#FF9100;border-bottom:#FF9100 2px solid;}

#cuerpo{color:#555555;font-size:10pt;}
#cuerpo p, #cuerpo ul{margin-bottom:2px;margin-top:2px; margin-left:30px;}
#cuerpo p{margin-bottom:8px;}
#cuerpo h1{font-family:Alpha, Calibri, Cambria; font-size:28pt; margin:0;color:#222222; padding-bottom:1px; border-bottom-width:2px; border-bottom-style:solid; width:200px; margin-bottom:15px;}
#cuerpo h2{font-size:12pt; margin:0;color:#333333;margin-left:10px; margin-bottom:5px;}
#cuerpo h3{font-size:11pt; margin:0;color:#555555;margin-left:20px;margin-top:5px;}
#cuerpo #trabajos {text-align:center;-moz-column-count: 3;-moz-column-gap: 10px;-webkit-column-count: 3;-webkit-column-gap: 10px;column-count: 3;column-gap: 10px; width:95%; margin:0px 0px;}
#cuerpo #trabajos #item{display:inline-block; width:100%; vertical-align:top; background-color:#eeeeee; padding-bottom:10px; margin:10px 0px;}
#cuerpo #trabajos #item .img{width:100%; max-height:220px !important; height:auto; overflow:hidden; margin-top:10px;margin-bottom:5px;}
#cuerpo #trabajos #item .img img:hover{height:100%; width:auto; z-index:1000;}
#cuerpo #trabajos #item figcaption{color:#777777; font-size:8pt; text-align:center;}

#firma{position:absolute; right:25px; bottom:5px; font-size:8pt; color:#eeeeee;}
#firma a{color:#eeeeee; text-decoration:none;}

#contenidoc{margin-top:0px; margin-bottom:50px;}
#contenidoc aside{display:inline-block; vertical-align:top;}
#contenidoc #contacto1{ overflow:auto;}
#contenidoc #contacto2{ width:250px; margin-left:20px;}
#contenidoc h2{font-size:18pt; margin-bottom:20px;}
#contenidoc h3{font-size:14pt; margin-top:20px;}
#contacto2 #nombre{width:250px;height:20px;border:#dddddd 1px solid;background-color:#ffffff;margin-bottom:15px; padding-left:10px;}
#contacto2 #email{width:250px;height:20px;border:#dddddd 1px solid;background-color:#ffffff;;margin-bottom:15px; padding-left:10px;}
#contacto2 #telefono{width:250px;height:20px;border:#dddddd 1px solid;background-color:#ffffff;;margin-bottom:15px; padding-left:10px;}
#contacto2 #asunto{width:250px;height:20px;border:#dddddd 1px solid;background-color:#ffffff;;margin-bottom:15px; padding-left:10px;}
#contacto2 #consulta{width:250px;height:120px;margin-bottom:15px;border:#dddddd 1px solid;background-color:#ffffff;;margin-top:10px; padding-left:10px;}
#contacto2 #envia{border:none;border:#dddddd 1px solid;background-color:#ffffff;color:#555555;width:100px;padding:5px; float:right;}
#contacto2 #mapa{margin:20px auto;}
#contacto2 #capachadiv{height:36px; line-height:36px; color:#8c76b6; font-weight:700;}
#contacto1 a{color:#FE9000; text-decoration:none;}

#cuerpo{
	scrollbar-face-color: rgba(120,120,120,0.5);
	scrollbar-highlight-color: rgba(120,120,120,0.5);
	scrollbar-shadow-color: rgba(200,200,200,0.5);
	scrollbar-3dlight-color:rgba(120,120,120,0.5);
	scrollbar-arrow-color:rgba(120,120,120,0.5);
	scrollbar-drakshadow-color:rgba(120,120,120,0.1);
	scrollbar-width:10px;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	-moz-overflow-style: -ms-autohiding-scrollbar;
	-webkit-overflow-style: -ms-autohiding-scrollbar;
	-ms-scrollbar-width:10px;
}
#cuerpo::scrollbar{	width:10px;}
#cuerpo::-webkit-scrollbar{	width:10px;}
#cuerpo::-webkit-scrollbar-track {-webkit-box-shadow:none;border:#dddddd 1px solid;}
#cuerpo::-webkit-scrollbar-thumb, #cuerpo:hover::-webkit-scrollbar-thumb {background: rgba(120,120,120,0.9);-webkit-box-shadow:none;}
#cuerpo::-webkit-scrollbar-thumb:window-inactive{background: rgba(255,255,255,0.2);border:#ffffff 1px solid;}
#cuerpo::-webkit-scrollbar-track:window-inactive {border:#ffffff 1px solid;}
.aservicios{color:#8C76B6; text-decoration:none; font-weight:bold;}

.hosting td{vertical-align:top; border-bottom:#cceeff 1px solid;}
.hosting tr:nth-child(even) td{background-color: #F1F1EF;}
.hosting tr:nth-child(odd) td{background-color: #ffffff;}
.hosting tr td:first-child{color:#222222; text-align:right}
.hosting tr:first-child td{background-color:#3F95A5; color:#ffffff;}

.spinner:after{content:'cargando...';position:relative;top:-45px;color:#ffffff;font-size:10pt;animation:opa2 5.25s ease-in-out infinite alternate;}
.spinner {font-size: 100px;top:50%;width: 75px;height: 100px;margin: -50px auto;position: relative;display:block;list-style: none;border-radius: 50%;border: .01em solid rgba(150,150,150,0.1);}
.spinner li {width: .2em;height: .2em;position: absolute;}
.spinner li:nth-child(1) {background: #00a8c9;top: 0;left: 50%;margin-left: -.1em;transform-origin: 50% 250%;animation:rota2 1.13s linear infinite;} /* Blue */
.spinner li:nth-child(2) {background: #ff5e6d;top: 50%; right: 0;margin-top: -.1em;transform-origin: -150% 50%;animation:rota2 1.86s linear infinite;} /* Red */
.spinner li:nth-child(3) {background: #8c76b6;bottom: 0;left: 50%;margin-left: -.1em;transform-origin: 50% -150%;animation:rota2 1.45s linear infinite;} /* Yellow */
.spinner li:nth-child(4) {background: #669900;top: 50%; left: 0;margin-top: -.1em;transform-origin: 75% 75%;animation:rota2 1.72s linear infinite;} /* Green */
.spinner li:nth-child(5) {background: #ff9100;top: 50%;left: 0;margin-top: -.1em;transform-origin: 75% -125%;animation:rota2 1.92s linear infinite}
@keyframes rota2 {
    to { transform: rotate(360deg); }
}
@keyframes opa2 {
    12.0% { opacity: 0.80; }
    19.5% { opacity: 0.88; }
    37.2% { opacity: 0.64; }
    40.5% { opacity: 0.52; }
    52.7% { opacity: 0.69; }
    60.2% { opacity: 0.60; }
    66.6% { opacity: 0.52; }
    70.0% { opacity: 0.63; }
    79.9% { opacity: 0.60; }
    84.2% { opacity: 0.75; }
    91.0% { opacity: 0.87; }
}

@keyframes rota {
	to { transform: rotate(360deg); }
}
@keyframes opa {
	12.0% { opacity: 0.80; }
	19.5% { opacity: 0.88; }
	37.2% { opacity: 0.64; }
	40.5% { opacity: 0.52; }
	52.7% { opacity: 0.69; }
	60.2% { opacity: 0.60; }
	66.6% { opacity: 0.52; }
	70.0% { opacity: 0.63; }
	79.9% { opacity: 0.60; }
	84.2% { opacity: 0.75; }
	91.0% { opacity: 1; }
}
@media screen and (max-width: 900px) {
	#cuero{width:100%;}
	#portafolio{width:90%;}
	#logoCP{margin:25% auto;}	
	#lapicero{right:5px;top:52px;}
	#tapa{right:30px; top:-110px;}
	#clips{left:5px;bottom:10px;top:auto;}
}
@media screen and (max-width: 600px) {
	#portafolio{width:87%;}
	#mp3{bottom:10px;}
	#logoCP{margin:30% auto;}
	#firma{font-size:7pt;}
	#menuchico{font-size:14pt;}
	#menuchico li{padding-left:2px; padding-right:2px;}
}
@media screen and (max-width: 480px){		
	#cuero{height:400px;}
	#firma{font-size:6pt;}
	#menuchico{font-size:13pt;}
	#menuchico li{padding-left:0px; padding-right:0px;}
	#cuerpo #trabajos {-moz-column-count: 2;-webkit-column-count: 2;column-count: 2;}
	#portafolio{width:85%; height:340px;}/*transform:none;-moz-transform:none;-webkit-transform:none;-o-transform:none;}*/
}
@media screen and (max-width: 360px) {
	@viewport{width: 480px;}
	@-ms-viewport{width: 480px;}
	@-webkit-viewport{width: 480px;}
	@-o-viewport{width: 480px;}
}
@media screen and (max-height: 520px) {
	@viewport{height: 520px;}
	@-ms-viewport{height: 520px;}
	@-webkit-viewport{height: 520px;}
	@-o-viewport{height: 520px;}
}