/* Website definitions */

html, body
{
padding: 0;
margin: 0;
font-size: 100%;
width: 100%;
height: 100%;
background: #FFF;
}

@font-face {font-family: "Pixie-";
  src: url("fonts/Pixie-.eot"); /* IE9*/
  src: url("fonts/Pixie-.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("fonts/Pixie-.woff2") format("woff2"), /* chrome?firefox */
  url("fonts/Pixie-.woff") format("woff"), /* chrome?firefox */
  url("fonts/Pixie-.ttf") format("truetype"), /* chrome?firefox?opera?Safari, Android, iOS 4.2+*/
  url("fonts/Pixie-.svg#Pixie-") format("svg"); /* iOS 4.1- */
}

@font-face {font-family: "Vijaya Bold";
  src: url("fonts/Vijaya Bold.eot"); /* IE9*/
  src: url("fonts/Vijaya Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("fonts/Vijaya Bold.woff2") format("woff2"), /* chrome?firefox */
  url("fonts/Vijaya Bold.woff") format("woff"), /* chrome?firefox */
  url("fonts/Vijaya Bold.ttf") format("truetype"), /* chrome?firefox?opera?Safari, Android, iOS 4.2+*/
  url("fonts/Vijaya Bold.svg#Vijaya") format("svg"); /* iOS 4.1- */
}

@font-face {font-family: "Segoe Print V1";
  src: url("fonts/Segoe Print V1.eot"); /* IE9*/
  src: url("fonts/Segoe Print V1.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("fonts/Segoe Print V1.woff2") format("woff2"), /* chrome?firefox */
  url("fonts/Segoe Print V1.woff") format("woff"), /* chrome?firefox */
  url("fonts/Segoe Print V1.ttf") format("truetype"), /* chrome?firefox?opera?Safari, Android, iOS 4.2+*/
  url("fonts/Segoe Print V1.svg#Segoe Print Bold") format("svg"); /* iOS 4.1- */
}

@font-face {font-family: "Eras Demi ITC V1";
  src: url("fonts/Eras Demi ITC V1.eot"); /* IE9*/
  src: url("fonts/Eras Demi ITC V1.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("fonts/Eras Demi ITC V1.woff2") format("woff2"), /* chrome?firefox */
  url("fonts/Eras Demi ITC V1.woff") format("woff"), /* chrome?firefox */
  url("fonts/Eras Demi ITC V1.ttf") format("truetype"), /* chrome?firefox?opera?Safari, Android, iOS 4.2+*/
  url("fonts/Eras Demi ITC V1.svg#Eras Demi ITC V1") format("svg"); /* iOS 4.1- */
}

@font-face {font-family: "Vijaya";
  src: url("fonts/Vijaya.eot"); /* IE9*/
  src: url("fonts/Vijaya.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("fonts/Vijaya.woff2") format("woff2"), /* chrome?firefox */
  url("fonts/Vijaya.woff") format("woff"), /* chrome?firefox */
  url("fonts/Vijaya.ttf") format("truetype"), /* chrome?firefox?opera?Safari, Android, iOS 4.2+*/
  url("fonts/Vijaya.svg#Vijaya") format("svg"); /* iOS 4.1- */
}

/* INDEX ------------------------------------------------------- */

#container
{
max-width: 1024px;
height: 100%;
margin: 0 auto;
padding-bottom: 0px;
}

#top img, #bottom img
{
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

.presentacion
{
margin: -18% 0 1% 0;
padding: 2% 3% 3% 3%;
font-family: "Vijaya Bold" !important;
font-size: 2.0em;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
text-align: justify;
color: #425E4A;
}

#resp {color: #5E7641;}
#oler {color: #007988;}
#baja {color: #BB7549;}
#prot {color: #234D6E;}
#cuid {color: #564531;}
#rela {color: #4C4C4D;}
#dars {color: #7F333C;}
#cont {color: #88BD68;}

#resp, #oler, #baja, #prot, #cuid, #rela, #dars, #cont {text-decoration:none;}

#resp:hover, #oler:hover, #baja:hover, #prot:hover, #cuid:hover, #rela:hover, #dars:hover, #cont:hover {text-decoration:underline;}

#color-resp {height: auto; background: #5E7641;}
#color-oler {height: auto; background: #007988;}
#color-baja {height: auto; background: #BB7549;}
#color-prot {height: auto; background: #234D6E;}
#color-cuid {height: auto; background: #564531;}
#color-rela {height: auto; background: #4C4C4D;}
#color-dars {height: auto; background: #7F333C;}
#color-cont {height: auto; background: #88BD68;}

.resp {background: #ECF1C4;}
.oler {background: #C1E6ED;}
.baja {background: #F7D6B4;}
.prot {background: #C8E5F7;}
.cuid {background: #FAF5A8;}
.rela {background: #D2D3D5;}
.dars {background: #FAD1DA;}
.cont {background: #D3FFB8;}

/*  SECTIONS  */
.section
{
display: table;
margin: 0 auto;
width: 100%;
}

/*  COLUMN SETUP  */
.col {float: left; position:relative;}
.col:first-child {margin: 0 auto;}

/*  GROUPING  */
.group1:before, .group2:before, .group3:before, .groupform:before, .group1:after, .group2:after, .group3:after, .groupform:after {content:""; display:table;}
.group1:after, .group2:after, .group3:after, .groupform:after {clear:both;}
.group1, .group2, .group3, .groupform { zoom:1; /* For IE 6/7 */}

/*  GRID  */
.span_3_of_3, {width: 100%;}
.span_2_of_3, .span_2_of_2, .spanform_2_of_2 {width: 66.66%;}
.span_1_of_3, .span_1_of_2, .span_1_of_1, .spanform_1_of_2 {width: 33.33%;}

.span_1_of_2, .groupform .spanform_1_of_2 {margin-left: 11.11%;}
.span_1_of_1 {margin-left: 33.33%;}

/*  GO FULL WIDTH BELOW 640 PIXELS */
@media only screen and (max-width: 640px)
{
.col {margin: 0;}
.span_3_of_3, .span_2_of_3, .span_1_of_3, .span_2_of_2, .span_1_of_2, .span_1_of_1 {width: 100%; border-top: solid 1px #000;}
.spanb_3_of_3, .spanb_2_of_3, .spanb_1_of_3, .spanb_2_of_2, .spanb_1_of_2, .spanb_1_of_1 {width: 100%;}
.groupform .spanform_2_of_2, .groupform .spanform_1_of_2 {width: 90%; margin-left: 5%;}
.presentacion {font-size: 1.6em; padding: 2% 5% 3% 5%;}
#bottom p {font-size: 0.7em;}
form #submit {width: 30%; margin-left: 35%;}
#fbmap {margin: 5% auto; width: 90%; text-align: center;}
}

.categoria
{
margin: 0;
padding: 1% 0 0 2%;
text-align: center;
color: #FFF;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight: bold;
font-style: italic;
font-size: 2.2em;
}

.slogan
{
margin: 0;
padding: 0 0 1% 2%;
font-family: "Segoe Print V1" !important;
font-size: 1.2em;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #FFF;
}

.producto
{
margin: 2% 0 0 0;
padding: 0;
font-family: "Eras Demi ITC V1" !important;
font-size: 2em;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}

.subprod
{
margin: 0 0 0 0;
padding: 0;
font-family: "Vijaya" !important;
font-size: 1.8em;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}

.containprod
{
text-align: center;
}

.prodimg
{
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

.texto
{
margin: 0;
padding: 0 6% ;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
font-family: "Vijaya" !important;
font-size: 1.6em;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}

.capacidad
{
margin: 0;
padding: 6% 0;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
text-align: center;
font-weight:bold;
}

/* Contact Form / Copyright --------------------------------- */

form
{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
display: table;
margin: 0 auto;
padding: 5% 0;
width: 100%;
height: auto;
}

.forminput, .formtext
{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
width: 100%;
margin: 4% 0;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 1.3em;
color: #FFF;
border: none;
background: #88BD68;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}

::-webkit-input-placeholder
{
color: #111;
font-style: italic;
text-align: center;
}

:-moz-placeholder
{
color: #111;
font-style: italic;
text-align: center;
}

::-moz-placeholder
{
color: #111;
font-style: italic;
text-align: center;
}

:-ms-input-placeholder
{
color: #111;
font-style: italic;
text-align: center;
}

.forminput:focus, .formtext:focus
{
color: #111;
background: #FFF;
}

.forminput
{
text-align: center;
padding: 4% 0;
}

.formtext
{
padding: 5% 4%;
resize: none;
}

.control
{
text-align: center;
}

#submit
{
clear: left;
display: block;
width: 16%;
margin-left: 42%;
margin-top: 40%;
margin-bottom: 6%;
line-height: 200%;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold;
color: #FFF;
border: none;
background: #88BD68;
outline: none;
cursor: pointer;
}

#submit:hover
{
background: #FFF;
color: #88BD68;
}

#submit:focus
{
background: #111;
color: #88BD68;
}

#result
{
clear: both;
width: 100%;
height: 200%;
vertical-align: middle;
width: auto\9; /* ie8 */
text-align: center;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight: bold;
font-style: italic;
font-size: 1.4em;
}

.rojo, .azul
{
-moz-animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
-o-animation: cssAnimation 0s ease-in 5s forwards;
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}

@keyframes cssAnimation
{
to {
   visibility: hidden;
   }
}

@-webkit-keyframes cssAnimation
{
to {
   visibility: hidden;
   }
}

.azul {color: blue;}
.rojo {color: red;}


/* Footer / Copyright --------------------------------- */

#bottom
{
margin: 0 auto;
padding: 1%;
max-width: 100%;
}

#pie
{
margin: 0 auto 0 auto;
padding: 0;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 1.0em;
text-align: center;
color: #000;
}

/* --------------------------- END --------------------------------- */