/* RESETE */

/** * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/) * Richard Clark (http://richclarkdesign.com) * http://cssreset.com */html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {    margin:0;    padding:0;    border:0;    outline:0;    font-size:100%;    vertical-align:baseline;    background:transparent;}body {    line-height:1;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {    display:block;}nav ul {    list-style:none;}blockquote, q {    quotes:none;}blockquote:before, blockquote:after,q:before, q:after {    content:'';    content:none;}a {    margin:0;    padding:0;    font-size:100%;    vertical-align:baseline;    background:transparent;}/* change colours to suit your needs */ins {    background-color:#ff9;    color:#000;    text-decoration:none;}/* change colours to suit your needs */mark {    background-color:#ff9;    color:#000;    font-style:italic;    font-weight:bold;}del {    text-decoration: line-through;}abbr[title], dfn[title] {    border-bottom:1px dotted;    cursor:help;}table {    border-collapse:collapse;    border-spacing:0;}/* change border colour to suit your needs */hr {    display:block;    height:1px;    border:0;    border-top:1px solid #cccccc;    margin:1em 0;    padding:0;}input, select {    vertical-align:middle;}




body,td,th {
	font-family: Tahoma, Geneva, sans-serif;
	font-size:1em;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color:#FFF;
	height:100%;
	background-image:url(img/fondo.jpg);
	background-repeat:repeat-y;
	background-size:100%;
}


a:link {
	color: #111;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #111;
}
a:active {
	text-decoration: none;
	color: #111;
}
a:hover {
	text-decoration: none;
	color: #E59A03;
}


.padre{ width:100%;display:table;
	height:100%;}

.columnaIz{
	width:30%;
	float:left}
.columnaIzLogo{
	float:right;
	margin-top:40px;
	margin-right:10px;
	}
.columnaDer{
	width:68%;
	margin-left:3px;
	float:left;
	background-image:url(img/teclado.jpg);
	background-position:top left;
	background-repeat:no-repeat;
	display:table;
	height:100%;
	}
.columnaDerBotonera{
	width:20%;
	float:left;
	min-width:110px;
	}
.columnaDerBotonera ul{ list-style:none;margin-top:90px; font-size:150%;}
.columnaDerBotonera li{ width:90%; margin-left:20px; color:#333; clear:both; transition:all 1s}
.columnaDerBotonera li:hover{ margin-left:10px; color:#FFF; transition:all 0.5s}


.contenido{
	width:70%;
	float:right;
	color:#FFF;
	padding:5%;
	display:table;
	height:100%;
	}
	
.contenido h2{
	width:96%;
	background-color:#d18d09;
	padding:2%;
	border-radius:10px;
	margin-bottom:5px;
	margin-top:10px;}
	
.contenidoTitulo{
	font-size:2EM; margin-bottom:10PX}	
	
.contenido input{
	width:100%; height:2em}

.contenido textarea{
	width:100%; height:5em}

.pie{
	position:fixed;
	bottom:-100px;
	background-color:#111;
	height:120px;
	width:100%;
	transition:all 1s}
	
	
.pie:hover{
		bottom:0px;
		transition:all 1s;
	}
	
.pieTitulo{
	background-color:#111;
	margin-top:-20px;
	width:120px;
	text-align:center;
	color:#999;
	margin-left:20%;
	border-radius:15px;
	padding:8px;
	}
.pieGris{
	background-color:#333;
	height:100px;
	margin-top:20px;
	
	}



.pieSocial{ float:left; margin-left:20%;
	}
.pieSocialIcono{ width:67px; height:63px; overflow:hidden; float:left;}
.pieSocialIconoOff{ margin-top:0; transition:all 1s;}
.pieSocialIconoOn{margin-top:0px; transition:all 1s;}

.pieSocialIcono:hover .pieSocialIconoOff{margin-top:-63px; transition:all 0.5s;}
.pieSocialIcono:hover .pieSocialIconoOn{margin-top:0; transition:all 0.5s;}
	
.pieSocialMail{ width:100%; text-align:center; clear:both; padding:2px; border-top:1px #222 solid;}




/*  Responsive  */
@media screen and (max-width:51em) {
	
	
body{ background-image:none}
	
	.columnaIz{
	width:100%;
	float:none}
.columnaIzLogo{
	float:none;
	margin-top:0px;
	margin-right:0px;
	margin:auto;
	max-width:280px;
	}
.columnaDer{
	width:100%;
	margin-left:0px;
	float:none;
	background-color:#E59A03;
	border-top:solid 2px #111;
	}
.columnaDerBotonera{
	width:100%;
	float:none;
	margin:0 auto;
	}

.columnaDerBotonera ul{ list-style:none;margin-top:10px; font-size:150%;}
.columnaDerBotonera li{ width:90%; margin:auto; margin-left:3%; margin-right:3%; margin-top:2px; margin-bottom:2px; padding:2%; color:#fff; clear:both; transition:all 1s; background-color:#111; border-radius:15px; text-align:center;}
.columnaDerBotonera li:hover{ margin-left:3%; color:#E59A03; transition:all 0.5s; padding-top:4%; padding-bottom:4%;}
	

.contenido{
	width:90%;
	float:none;
	color:#FFF;
	padding:5%;
	font-size:80%;
	}
	
.contenidoTitulo{
	font-size:2EM; margin-bottom:5PX}	
	
.contenido img{ width:100%; height:auto;}
	

.pie{
	position:relative;
	bottom:0px;
	background-color:#333;
	height:100px;
	width:100%;
	border-top:#111 20px solid}

.pieTitulo{ margin-left:inherit; margin:auto; }
	
.pieSocial{ float:none; margin:auto; display:table; width:auto;
	}

.pieSocialIcono{ width:67px; height:63px; overflow:hidden; float:left;}
	
.pieSocialMail{ width:100%; text-align:center; clear:both; padding:2px; border-top:1px #222 solid;}


}