@charset "utf-8";
/* CSS Document */
@import url('reset.css');
body { background:#fdd008 url(../images/background.jpg) repeat-x center top; font-family:Arial, Helvetica, sans-serif; color:#000; font-size:12px;}

/* Fonts */
@font-face {
	font-family: Interstate;
	src: url('../resources/fonts/interstate-bold.ttf');
}

/* Anchors
---------------------------------------------------*/
h1 { font-family:"Arial Black", Gadget, sans-serif; font-weight:bold; letter-spacing:-1px; margin:0 0 5px 0;}
h2 { margin:0 0 7px 0; font-size:17px;}
h3 { margin:0 0 7px 0; font-size:15px;}
p {font-family: "Arial", Sans-Serif; margin:0 0 15px 0; line-height:17px; margin:0 0 15px 0; color:#000;}

a:focus {}
a{}
a:hover {}

/* Wrapper
---------------------------------------------------*/
#wrapper {}
#wrapper-main { width:800px; margin:0 auto; padding:0 0 30px 0;}
#header { padding:30px 0 0 0;}
#slogan { width:340px; height:74px; background:url(../images/slogan.png) no-repeat left top; float:right; margin:0 0 12px 0;}
div#header #logo { width:305px; height:90px; float:left; margin:0 0 0 38px;}
div#header #logo a { width:305px; height:90px; display:block; text-indent:-9999px; background:url(../images/logo.png) no-repeat left top;}
div#header #menu { float:right; margin:0 40px 0 0; position:relative; z-index:200; width: 380px;}
div#header #menu ul {}
div#header #menu ul li { float:left; color:#FFF; font-weight:bold; font-family:"Arial Black", Gadget, sans-serif; font-size:11px; text-transform:uppercase; margin:0 6px 0 0;}
div#header #menu ul li a {color:#FFF; text-decoration:none; display:block; padding:4px; text-align: center; background:#e81b23; height:24px; width:80px; line-height: 11px;
-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px;
border-top-left-radius: 5px; border-top-right-radius: 5px;
}

/* Main
---------------------------------------------------*/
#main { background-color:#FFF; border:solid 1px #000; padding:15px; display:block;}
#banner { height:315px; background:url(../images/bg-banner.jpg) no-repeat left top; position:relative; margin:0 0 15px 0;}
#banner-int { margin:0 0 15px 0;}
div#banner .raton { width:444px; height:366px; background:url(../images/raton.png) no-repeat left top; position:absolute; bottom:0; left:-15px;}
div#banner .sello { width:188px; height:224px; background:url(../images/sello.png) no-repeat left top; right:0; bottom:-120px; position:absolute; z-index:200;}
.dere { float:right; width:430px;  margin:28px 0 0 0;}
.dere p { padding: 0 53px 0 30px; text-align: justify; line-height:13px;}
.dere-dos p {line-height: 13px; margin: 0 0 12px !important; padding: 0 0 0 30px; text-align: justify;}
.dere-dos{ width:370px; float:right; margin: 15px 45px 0 0;}
.dere-dos img { float:right;}

#content { margin:0 0 15px 0; position:relative; padding: 0 50px;}
#content p { text-align:justify;}
#social { width:76px; height:33px; position:absolute; bottom:0; right:0;}
.box { padding:15px; position:relative;}
.gradient { width:565px;
background-image: linear-gradient(left , rgb(231,231,231) 12%, rgb(255,255,255) 80%);
background-image: -o-linear-gradient(left , rgb(231,231,231) 12%, rgb(255,255,255) 80%);
background-image: -moz-linear-gradient(left , rgb(231,231,231) 12%, rgb(255,255,255) 80%);
background-image: -webkit-linear-gradient(left , rgb(231,231,231) 12%, rgb(255,255,255) 80%);
background-image: -ms-linear-gradient(left , rgb(231,231,231) 12%, rgb(255,255,255) 80%);
background-image: -webkit-gradient(
	linear,
	left top,
	right top,
	color-stop(0.12, rgb(231,231,231)),
	color-stop(0.8, rgb(255,255,255))
);
}
.ratita {height: 133px; position: absolute; right: 55px; bottom: 15px; width: 219px;}
.gradient p {padding:0 194px 0 0;}

.item { margin:0 0 50px 0;}
div.item .image { float:left; width:40%; text-align:center; vertical-align:middle; /*margin: 0 25px 0 0;*/}
div.item .description {vertical-align:middle; padding:0;}
div.item .description p {text-align: justify;}

/* Contacto */
form#contactform { width:600px; margin:0 auto;}
form#contactform .left { float:left; width:45%;}
form#contactform .right { float:right; width:45%;}
form#contactform div.row { display:block; margin:0 0 7px 0;}
form#contactform div.row label{ display:block; font-size:12px; color:#000; margin:0 0 2px 0;}
form#contactform div.row input {border:solid 1px #FF0000; padding:2px; width:99%; font-size:12px;}
form#contactform div.row textarea {border:solid 1px #FF0000; padding:2px; width:99.5%; height:130px; font-size:12px;}

.submit { background:#FF0000; font-size:15px; color:#FFF; cursor:pointer; float:right; display:inline-block; border:none; padding:7px; width:auto;
-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;
}
.checks { float:left; width:60%;}
.checks input.check { border:solid 1px #F00;}
.checks span { margin:0 15px 0 0;}

.error p {color:#F00!important; font-weight:bold;}
.success {color:#000;}
span.aste { font-weight:bold; color:#F00;}

/* Footer
---------------------------------------------------*/
#footer { padding:4px 6px; background-color:#000; color:#FFF;}

/* CLEARING
---------------------------------------------------*/
.clearfix:after {content: "."; display:block; height: 0; clear: both; visibility: hidden;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.clear {clear: both;}