@charset "utf-8";
/* 
*/
img,
object,
embed,
video {
  max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
  width: 100%;
}
/*
	Inspiration from "Responsive Web Design" by Ethan Marcotte and Golden Grid System by Joni Korpi

*/

.fluid {
  clear: both;
  margin-left: 0;
  width: 100%;
  float: left;
  display: block;
}
.fluidList {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}
/* Layout: 320px and below +++IPhone 4,5/Nokia Lumia+++ */

.gridContenido {
  width: 100%;
  margin-left: 0%;
  margin-right: 0%;
  clear: none;
  float: none;
  margin: auto;
}
header {
  position: relative;
  width: 100%;
  padding-left: 0%;
  padding-right: 0%;
  margin: auto;
  clear: none;
  float: none;
  background-color: rgba(0, 53, 117, 0.9);
  border-bottom: 10px solid #60a23e;
  background-image: url(../images/movil-top2.png);
  background-position: left;
  background-repeat: no-repeat;
  background-size: contain;
}
article {
  width: 95.5%;
  max-width: 320px;
  padding-left: 0%;
  padding-right: 0%;
  padding-top: 2.5%;
  padding-bottom: 2.5%;
  margin: auto;
  float: none;
  clear: none;
}
aside {
  width: 100%;
  height: auto;
  clear: right;
  float: right;
  margin-bottom: 2%;
  margin-top: 4%;
  padding-left: 0%;
  display: none;
  box-sizing: border-box;
}
section {
  width: 100%;
  padding-left: 0%;
  padding-right: 0%;
}
footer {
  width: 100%;
  padding-top: 0%;
  padding-bottom: 0%;
  background-color: #013372;
  bottom: 0;
  background-image: none;
}
/*bannerstar*/

#banner {
  position: absolute;
  width: 100%;
  max-width: 320px;
  margin: auto;
  clear: none;
  float: none;
  box-sizing: border-box;
}
#gridbody2 {
  width: 100%;
  height: auto;
  margin-bottom: 2%;
  margin-top: 4%;
  float: left;
  clear: left;
}
/*banner end*/
#gridbody {
  width: 95.5%;
  height: auto;
  max-width: 320px;
  margin: auto;
  margin-bottom: 0%;
  margin-top: 0%;
  float: none;
  clear: none;
}
#gridbody3 {
  width: 95.5%;
  height: auto;
  max-width: 320px;
  margin: auto;
  margin-bottom: 4%;
  margin-top: 4%;
  float: none;
  clear: none;
}
.gridContenido1 {
  width: 100%;
  max-width: 320px;
  margin: auto;
  z-index: 100;
  position: relative;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  margin-bottom: 0%;
  background: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.99);
}
.gridContenido2 {
  width: 100%;
  padding-left: 0%;
  padding-right: 0%;
  background-color: #eee;
  padding-top: 22%;
}
.gridContenido3 {
  position: absolute;
  width: 100%;
  padding-top: 0.5%;
  padding-bottom: 0.5%;
  background-color: rgba(43, 55, 134, 0.95);
  bottom: 0;
  z-index: 1001;
}
#logo {
  width: 30%;
  padding-top: 0%;
  padding-left: 0%;
  padding-right: 0%;
  padding-bottom: 0%;
  clear: none;
}
.bglogo {
  background-image: none;
}
#promo {
  width: 60%;
  clear: right;
  display: block;
  float: right;
  margin-top: 6%;
  margin-bottom: 0%;
}
#login {
  width: 70%;
  font-size: 0.65em;
  color: #fff;
  clear: none;
  display: block;
  margin-top: 1.5%;
  margin-bottom: 1.5%;
}
#menutop {
  width: 90%;
  font-size: 0.75em;
  color: #fff;
  clear: right;
  float: right;
  text-align: right;
  display: block;
  margin-top: 1%;
  margin-bottom: 0%;
}
#main-menu {
  width: 100%;
  padding-left: 0%;
  padding-right: 0%;
  padding-top: 0%;
  padding-bottom: 0%;
  margin: auto;
  float: none;
  clear: none;
}
nav {
  width: 100%;
}

#bgpie-main {
  width: 95.5%;
  max-width: 320px;
  margin: auto;
  clear: none;
  float: none;
  padding-bottom: 0.5%;
  padding-top: 0.5%;
  box-sizing: border-box;
}
#colum1x2 {
  width: 95%;
  margin-left: 0%;
  padding-bottom: 0%;
  padding-top: 0%;
  padding-left: 0%;
  padding-right: 0%;
  margin-bottom: 0%;
  clear: left;
  display: block;
}
#colum2x2 {
  width: 95%;
  margin-left: 0%;
  padding-bottom: 0%;
  padding-top: 0%;
  padding-left: 0%;
  padding-right: 0%;
  margin-bottom: 0%;
  margin-top: 0%;
  clear: left;
  display: block;
}
#t1 {
  width: 48%;
  padding-bottom: 1.5%;
  margin-bottom: 0%;
  padding-left: 0%;
  margin-top: 9%;
  font-size: 0.8125em;
  color: #052d6e;
  text-align: center;
}
#t2 {
  width: 48%;
  margin-left: 4%;
  padding-bottom: 0%;
  margin-bottom: 0%;
  clear: right;
}
#t3 {
  width: 48%;
  margin-left: 0%;
  padding-bottom: 0%;
  margin-bottom: 0%;
  clear: left;
}
#t4 {
  width: 48%;
  margin-left: 4%;
  padding-bottom: 0%;
  margin-bottom: 0%;
  clear: right;
}
.txton {
  width: 60%;
  text-align: center;
  clear: none;
  margin: auto;
  color: #fff;
  font-size: 0.85em;
}
.txtofoto {
  width: 95.7%;
  margin-top: -20%;
  padding-left: 4%;
  padding-top: 1%;
  padding-bottom: 1%;
  position: relative;
  background-color: #000;
  z-index: 10;
  color: #fff;
  opacity: 0.8;
  font-size: 11px;
  text-align: left;
}
.flex-2 {
  width: 98%;
  margin: 0.5%;
  box-sizing: border-box;
  color: #000;
  font-size: 0.95em;
}
.flex-3 {
  width: 90%;
  margin: auto;
  box-sizing: border-box;
  color: #000;
  text-align: center;
  font-size: 0.75em;
}
.flex-4 {
  width: 98%;
  text-align: center;
  margin: 5px;
  box-sizing: border-box;
}
.flex-5 {
  width: 42%;
  margin: 2.6%;
  font-size: 0.75em;
  color: #ccc;
  box-sizing: border-box;
}
.flex-6 {
  width: 40%;
  margin: 2.6%;
  font-size: 0.875em;
  color: #000;
  text-align: center;
  box-sizing: border-box;
}
#colum1x2index {
  width: 100%;
  margin-left: 0%;
  padding-top: 1.5%;
  padding-bottom: 0%;
  margin-bottom: 1.5%;
}
#colum2x2index {
  width: 100%;
  margin-left: 0%;
  padding-bottom: 0%;
  padding-top: 1.5%;
  padding-right: 0%;
  margin-bottom: 1.5%;
  clear: left;
}
#homebook {
  position: absolute;
  width: 25%;
  max-width: 300px;
  background-color: rgba(255, 255, 255, 0.75);
  padding: 1%;
  padding-bottom: 0;
  top: 140%;
  box-sizing: border-box;
  z-index: 1002;
  display: none;
}

#bd1 {
  width: 100%;
  font-size: 0.875em;
  padding-bottom: 12%;
  padding-top: 2%;
  padding-left: 3%;
  padding-right: 3%;
  clear: left;
  float: left;
  background-color: rgba(255, 255, 255, 1);
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  box-sizing: border-box;
}
#bd2 {
  width: 95.5%;
  max-width: 1140px;
  text-align: center;
  margin: auto;
  margin-bottom: 0%;
  margin-top: 3%;
  float: none;
  clear: none;
}
.bgpie {
  width: 95.5%;
  max-width: 1140px;
  padding-left: 0%;
  padding-right: 0%;
  padding-top: 0.5%;
  padding-bottom: 0.5%;
  margin: auto;
  clear: none;
}
#p1 {
  width: 95%;
  display: block;
  margin-bottom: 1%;
  margin-top: 1%;
  border-bottom: 0px solid rgba(69, 75, 86, 0.95);
  text-align: left;
  float: left;
  color: #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#p2 {
  width: 95%;
  margin-left: 0%;
  margin-right: 0%;
  clear: left;
  display: block;
  margin-bottom: 1%;
  margin-top: 1%;
  color: #ccc;
  text-align: left;
  border-bottom: 0px solid rgba(69, 75, 86, 0.95);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#p3 {
  width: 95%;
  padding-left: 0%;
  clear: left;
  display: block;
  margin-bottom: 1%;
  margin-top: 1%;
  color: #ccc;
  border-bottom: 0px solid rgba(69, 75, 86, 0.95);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#p4 {
  width: 95%;
  padding-left: 0%;
  clear: left;
  display: block;
  margin-bottom: 1%;
  margin-top: 1%;
  color: #ccc;
  border-bottom: 0px solid rgba(69, 75, 86, 0.95);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#bgcopy {
  width: 95.5%;
  max-width: 320px;
  padding-left: 0%;
  padding-right: 0%;
  padding-top: 3%;
  padding-bottom: 3%;
  border-top: solid 2px #2f4d79;
  margin: auto;
  clear: none;
  float: none;
  color: #ccc;

  font-size: 0.725em;
  text-align: center;
}
.ir-arriba {
  width: auto;
  text-align: center;
  display: none;
  font-size: 2.5em;
  color: #ccc;
  cursor: pointer;
  position: fixed;
  bottom: 10%;
  right: 3%;
  z-index: 101;
  transition: all 0.6s ease-in-out;
  box-sizing: border-box;
}
.ir-arriba:hover {
  opacity: 0.85;
}
#social {
  width: 90%;
  padding-top: 75%;
  margin: auto;
  text-align: center;
  float: none;
  clear: none;
  letter-spacing: 0.3em;
  display: block;
  box-sizing: border-box;
}
#textoindex {
  width: 90%;
  padding-top: 10%;
  margin: auto;
  float: none;
  clear: none;
  text-align: center;
  display: block;
  text-transform: uppercase;
  font-weight: bold;
  font-style: normal;
  font-size: 0.575em;
  text-shadow: 0 -1px 1px #000;
}

.zeroMargin_mobile {
  margin-left: 0;
}
.hide_mobile {
  display: none;
}

/* Layout: 375px to min of 321px +++NokiaN9/BlackBerry Z300/GNexus/Samsung note 2,3/Galaxy 2,3+++ */

@media only screen and (min-width: 321px) {
  .gridContenido {
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    clear: none;
    float: none;
    margin: auto;
  }
  header {
    z-index: 1001;
    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
    margin: auto;
    clear: none;
    float: none;
    background-color: rgba(0, 53, 117, 0.9);
    border-bottom: 10px solid #60a23e;
    background-image: url(../images/movil-top.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
  }
  article {
    width: 95.5%;
    max-width: 325px;
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 3%;
    padding-bottom: 3%;
    margin: auto;
    float: none;
    clear: none;
  }
  aside {
    width: 100%;
    height: auto;
    clear: right;
    float: right;
    margin-bottom: 2%;
    margin-top: 4%;
    padding-left: 0%;
    display: none;
    box-sizing: border-box;
  }
  section {
    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
  }
  footer {
    width: 100%;
    padding-top: 0%;
    padding-bottom: 0%;
    background-color: #013372;
    bottom: 0;
    background-image: url(../images/pie.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
  }
  /*bannerstar*/

  #banner {
    position: absolute;
    width: 100%;
    max-width: 375px;
    margin: auto;
    clear: none;
    float: none;
    box-sizing: border-box;
  }
  #gridbody2 {
    width: 100%;
    height: auto;
    margin-bottom: 2%;
    margin-top: 4%;
    float: left;
    clear: left;
  }
  /*banner end*/
  #gridbody {
    width: 95.5%;
    height: auto;
    max-width: 375px;
  }
  #gridbody3 {
    width: 95.5%;
    height: auto;
    max-width: 375px;
  }
  .gridContenido1 {
    width: 100%;
    max-width: 450px;
    margin: auto;
    z-index: 100;
    position: relative;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    margin-bottom: 2%;
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.99);
  }
  .gridContenido2 {
    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
    background-color: #eee;
    padding-top: 22%;
  }
  .gridContenido3 {
    position: absolute;
    width: 100%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    background-color: rgba(43, 55, 134, 0.95);
    bottom: 0;
    z-index: 1001;
  }
  #logo {
    width: 30%;
    padding-top: 0%;
    padding-left: 0%;
    padding-right: 0%;
    padding-bottom: 0%;
    clear: none;
  }
  .bglogo {
    background-image: none;
  }
  #promo {
    width: 60%;
    clear: right;
    display: block;
    float: right;
    margin-top: 9%;
    margin-bottom: 0%;
  }
  #login {
    width: 70%;
    font-size: 0.65em;
    color: #fff;
    clear: none;
    display: block;
    margin-top: 1.5%;
    margin-bottom: 1.5%;
  }
  #menutop {
    width: 100%;
    font-size: 0.75em;
    color: #fff;
    clear: right;
    float: right;
    text-align: right;
    display: block;
    margin-top: 1%;
    margin-bottom: 0%;
  }
  #main-menu {
    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 0%;
    padding-bottom: 0%;
    margin: auto;
    float: none;
    clear: none;
  }
  nav {
    width: 100%;
  }

  #bgpie-main {
    width: 95.5%;
    max-width: 375px;
    margin: auto;
    clear: none;
    float: none;
    padding-bottom: 0.5%;
    padding-top: 0.5%;
    box-sizing: border-box;
  }
  #colum1x2 {
    width: 95%;
    margin-left: 0%;
    padding-bottom: 0%;
    padding-top: 0%;
    padding-left: 0%;
    padding-right: 0%;
    margin-bottom: 0%;
    clear: left;
    display: block;
  }
  #colum2x2 {
    width: 95%;
    margin-left: 0%;
    padding-bottom: 0%;
    padding-top: 0%;
    padding-left: 0%;
    padding-right: 0%;
    margin-bottom: 0%;
    margin-top: 0%;
    clear: left;
    display: block;
  }
  #colum1x2title {
    width: 48.7%;
    margin-left: 0%;
    background-color: #eee;
    clear: left;
  }
  #colum2x2title {
    width: 48.7%;
    margin-left: 2.6%;
    margin-top: 0%;
    background-color: #eee;
    clear: right;
  }
  #t1 {
    width: 48%;
    padding-bottom: 1.5%;
    margin-bottom: 0%;
    padding-left: 0%;
    margin-top: 9%;
    font-size: 0.8125em;
    color: #052d6e;
    text-align: center;
  }
  #t2 {
    width: 48%;
    margin-left: 4%;
    padding-bottom: 0%;
    margin-bottom: 0%;
    clear: right;
  }
  #t3 {
    width: 48%;
    margin-left: 0%;
    padding-bottom: 0%;
    margin-bottom: 0%;
    clear: left;
  }
  #t4 {
    width: 48%;
    margin-left: 4%;
    padding-bottom: 0%;
    margin-bottom: 0%;
    clear: right;
  }
  .txton {
    width: 60%;
    text-align: center;
    clear: none;
    margin: auto;
    color: #fff;
    font-size: 0.85em;
  }
  .txtofoto {
    width: 95.7%;
    margin-top: -20%;
    padding-left: 4%;
    padding-top: 1%;
    padding-bottom: 1%;
    position: relative;
    background-color: #000;
    z-index: 10;
    color: #fff;
    opacity: 0.8;
    font-size: 11px;
    text-align: left;
  }
  .flex-2 {
    width: 98%;
    margin: 0.5%;
    box-sizing: border-box;
    color: #000;
    font-size: 0.95em;
  }
  .flex-3 {
    width: 90%;
    margin: auto;
    box-sizing: border-box;
    color: #000;
    text-align: center;
    font-size: 0.85em;
  }
  .flex-4 {
    width: 47%;
    text-align: center;
    margin: 4px;
    box-sizing: border-box;
  }
  .flex-5 {
    width: 42%;
    margin: 2.6%;
    font-size: 0.8em;
    color: #ccc;
    box-sizing: border-box;
  }
  .flex-6 {
    width: 40%;
    margin: 2.6%;
    font-size: 1em;
    color: #000;
    text-align: center;
    box-sizing: border-box;
  }
  #colum1x2index {
    width: 100%;
    margin-left: 0%;
    padding-top: 1.5%;
    padding-bottom: 0%;
    margin-bottom: 1.5%;
  }
  #colum2x2index {
    width: 100%;
    margin-left: 0%;
    padding-bottom: 0%;
    padding-top: 1.5%;
    padding-right: 0%;
    margin-bottom: 1.5%;
    clear: left;
  }
  #homebook {
    position: absolute;
    width: 25%;
    max-width: 300px;
    background-color: rgba(255, 255, 255, 0.75);
    padding: 1%;
    padding-bottom: 0;
    top: 140%;
    box-sizing: border-box;
    z-index: 1002;
    display: none;
  }

  #bd1 {
    width: 100%;
    font-size: 0.875em;
    padding-bottom: 10%;
    padding-top: 2%;
    padding-left: 3%;
    padding-right: 3%;
    clear: left;
    float: left;
    background-color: rgba(255, 255, 255, 1);
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    box-sizing: border-box;
  }
  #bd2 {
    width: 95.5%;
    max-width: 1140px;
    text-align: center;
    margin: auto;
    margin-bottom: 0%;
    margin-top: 3%;
    float: none;
    clear: none;
  }
  .bgpie {
    width: 95.5%;
    max-width: 325px;
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    margin: auto;
    clear: none;
  }
  #p1 {
    width: 95%;
    display: block;
    margin-bottom: 1%;
    margin-top: 1%;
    border-bottom: 0px solid rgba(69, 75, 86, 0.95);
    text-align: left;
    float: left;
    color: #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #p2 {
    width: 95%;
    margin-left: 0%;
    margin-right: 0%;
    clear: left;
    display: block;
    margin-bottom: 1%;
    margin-top: 1%;
    color: #ccc;
    text-align: left;
    border-bottom: 0px solid rgba(69, 75, 86, 0.95);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #p3 {
    width: 95%;
    padding-left: 0%;
    clear: left;
    display: block;
    margin-bottom: 1%;
    margin-top: 1%;
    color: #ccc;
    border-bottom: 0px solid rgba(69, 75, 86, 0.95);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #p4 {
    width: 95%;
    padding-left: 0%;
    clear: left;
    display: block;
    margin-bottom: 1%;
    margin-top: 1%;
    color: #ccc;
    border-bottom: 0px solid rgba(69, 75, 86, 0.95);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #bgcopy {
    width: 95.5%;
    max-width: 325px;
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 2%;
    padding-bottom: 2%;
    border-top: solid 2px #2f4d79;
    margin: auto;
    clear: none;
    float: none;
    color: #ccc;

    font-size: 0.75em;
    text-align: center;
  }
  .ir-arriba {
    width: auto;
    text-align: center;
    display: none;
    font-size: 2.5em;
    color: #ccc;
    cursor: pointer;
    position: fixed;
    bottom: 10%;
    right: 3%;
    z-index: 101;
    transition: all 0.6s ease-in-out;
    box-sizing: border-box;
  }
  .ir-arriba:hover {
    opacity: 0.85;
  }
  #social {
    width: 80%;
    padding-top: 90%;
    margin: auto;
    text-align: center;
    float: none;
    clear: none;
    letter-spacing: 0.5em;
    display: block;
    box-sizing: border-box;
  }
  #textoindex {
    width: 90%;
    padding-top: 12%;
    margin: auto;
    float: none;
    clear: none;
    text-align: center;
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    font-style: normal;
    font-size: 0.65em;
    text-shadow: 0 -1px 1px #000;
  }

  .hide_iphone {
    display: none;
  }
  .zeroMargin_iphone {
    margin-left: 0;
  }
}

/* Layout: 480px to min of 376px +++iPhone 4 landscape+++ */

@media only screen and (min-width: 376px) {
  .gridContenido {
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    clear: none;
    float: none;
    margin: auto;
  }
  header {
    margin: auto;
    clear: none;
    float: none;
    background-color: rgba(0, 53, 117, 0.9);
    border-bottom: 10px solid #60a23e;
    background-image: url(../images/bg-logo.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
  }
  article {
    width: 95.5%;
    max-width: 430px;
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 3%;
    padding-bottom: 3%;
    margin: auto;
    float: none;
    clear: none;
  }
  aside {
    width: 100%;
    height: auto;
    clear: right;
    float: right;
    margin-bottom: 2%;
    margin-top: 4%;
    padding-left: 0%;
    display: none;
    box-sizing: border-box;
  }
  section {
    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
  }
  footer {
    width: 100%;
    padding-top: 0%;
    padding-bottom: 0%;
    background-color: #013372;
    bottom: 0;
    background-image: url(../images/pie.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
  }
  /*bannerstar*/

  #banner {
    position: absolute;
    width: 100%;
    max-width: 480px;
    margin: auto;
    clear: none;
    float: none;
    box-sizing: border-box;
  }
  #gridbody2 {
    width: 100%;
    height: auto;
    margin-bottom: 2%;
    margin-top: 4%;
    float: left;
    clear: left;
  }
  /*banner end*/
  #gridbody {
    width: 95.5%;
    height: auto;
    max-width: 480px;
  }
  #gridbody3 {
    width: 95.5%;
    height: auto;
    max-width: 480px;
  }
  .gridContenido1 {
    width: 100%;
    max-width: 450px;
    margin: auto;
    z-index: 100;
    position: relative;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    margin-bottom: 2%;
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.99);
  }
  .gridContenido2 {
    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
    background-color: #eee;
    padding-top: 12%;
  }
  .gridContenido3 {
    position: absolute;
    width: 100%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    background-color: rgba(43, 55, 134, 0.95);
    bottom: 0;
    z-index: 1001;
  }
  #logo {
    width: 25%;
    padding-top: 2%;
    padding-left: 0%;
    padding-right: 0%;
    padding-bottom: 0%;
    clear: none;
  }
  .bglogo {
    background-image: url(../images/bg-logo2.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
  }
  #promo {
    width: 70%;
    clear: right;
    display: block;
    float: right;
    margin-top: 0%;
    margin-bottom: 0%;
  }
  #login {
    width: 70%;
    font-size: 0.65em;
    color: #fff;
    clear: none;
    display: block;
    margin-top: 1.5%;
    margin-bottom: 1.5%;
  }
  #menutop {
    width: 75%;
    font-size: 0.85em;
    color: #fff;
    clear: right;
    float: right;
    text-align: right;
    display: block;
    margin-top: 1%;
    margin-bottom: 2%;
  }
  #main-menu {
    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 0%;
    padding-bottom: 0%;
    margin: auto;
    float: none;
    clear: none;
  }
  nav {
    width: 100%;
  }

  #bgpie-main {
    width: 95.5%;
    max-width: 480px;
    margin: auto;
    clear: none;
    float: none;
    padding-bottom: 0.5%;
    padding-top: 0.5%;
    box-sizing: border-box;
  }
  #colum1x2 {
    width: 95%;
    margin-left: 0%;
    padding-bottom: 0%;
    padding-top: 0%;
    padding-left: 0%;
    padding-right: 0%;
    margin-bottom: 0%;
    clear: left;
    display: block;
  }
  #colum2x2 {
    width: 95%;
    margin-left: 0%;
    padding-bottom: 0%;
    padding-top: 0%;
    padding-left: 0%;
    padding-right: 0%;
    margin-bottom: 0%;
    margin-top: 0%;
    clear: left;
    display: block;
  }
  #colum1x2title {
    width: 48.7%;
    margin-left: 0%;
    background-color: #eee;
    clear: left;
  }
  #colum2x2title {
    width: 48.7%;
    margin-left: 2.6%;
    margin-top: 0%;
    background-color: #eee;
    clear: right;
  }
  #t1 {
    width: 22.875%;
    padding-bottom: 1.5%;
    margin-bottom: 0%;
    padding-left: 0%;
    margin-top: 4%;
    font-size: 0.7em;
    color: #052d6e;
    text-align: center;
  }
  #t2 {
    width: 23.875%;
    margin-left: 2.5%;
    padding-bottom: 0%;
    margin-bottom: 0%;
    clear: right;
  }
  #t3 {
    width: 23.875%;
    margin-left: 0.5%;
    padding-bottom: 0%;
    margin-bottom: 0%;
    clear: right;
  }
  #t4 {
    width: 23.875%;
    margin-left: 0.5%;
    padding-bottom: 0%;
    margin-bottom: 0%;
    clear: right;
  }
  .txton {
    width: 42%;
    text-align: center;
    clear: none;
    margin: auto;
    color: #fff;
    font-size: 0.85em;
  }
  .txtofoto {
    width: 95.7%;
    margin-top: -20%;
    padding-left: 4%;
    padding-top: 1%;
    padding-bottom: 1%;
    position: relative;
    background-color: #000;
    z-index: 10;
    color: #fff;
    opacity: 0.8;
    font-size: 11px;
    text-align: left;
  }
  .flex-2 {
    width: 98%;
    margin: 0.5%;
    box-sizing: border-box;
    color: #000;
    font-size: 0.95em;
  }
  .flex-3 {
    width: 85%;
    margin: auto;
    box-sizing: border-box;
    color: #000;
    text-align: center;
    font-size: 0.85em;
  }
  .flex-4 {
    width: 48%;
    text-align: center;
    margin: 4px;
    box-sizing: border-box;
  }
  .flex-5 {
    width: 40%;
    margin: 2.6%;
    font-size: 1em;
    color: #ccc;
    box-sizing: border-box;
  }
  .flex-6 {
    width: 40%;
    margin: 2.6%;
    font-size: 1em;
    color: #000;
    text-align: center;
    box-sizing: border-box;
  }
  #colum1x2index {
    width: 100%;
    margin-left: 0%;
    padding-top: 1.5%;
    padding-bottom: 0%;
    margin-bottom: 1.5%;
  }
  #colum2x2index {
    width: 100%;
    margin-left: 0%;
    padding-bottom: 0%;
    padding-top: 1.5%;
    padding-right: 0%;
    margin-bottom: 1.5%;
    clear: left;
  }
  #homebook {
    position: absolute;
    width: 25%;
    max-width: 300px;
    background-color: rgba(255, 255, 255, 0.75);
    padding: 1%;
    padding-bottom: 0;
    top: 140%;
    box-sizing: border-box;
    z-index: 1002;
    display: none;
  }

  #bd1 {
    width: 100%;
    font-size: 0.875em;
    padding-bottom: 4%;
    padding-top: 2%;
    padding-left: 3%;
    padding-right: 3%;
    clear: left;
    float: left;
    background-color: rgba(255, 255, 255, 1);
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    box-sizing: border-box;
  }
  #bd2 {
    width: 95.5%;
    max-width: 1140px;
    text-align: center;
    margin: auto;
    margin-bottom: 0%;
    margin-top: 3%;
    float: none;
    clear: none;
  }
  .bgpie {
    width: 95.5%;
    max-width: 430px;
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    margin: auto;
    clear: none;
  }
  #p1 {
    width: 46%;
    display: block;
    margin-bottom: 1%;
    margin-top: 1%;
    border-bottom: 0px solid rgba(51, 51, 51, 0.95);
    text-align: left;
    float: left;
    color: #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #p2 {
    width: 46%;
    margin-left: 8%;
    margin-right: 0%;
    clear: right;
    display: block;
    margin-bottom: 1%;
    margin-top: 1%;
    color: #ccc;
    text-align: left;
    border-bottom: 0px solid rgba(69, 75, 86, 0.95);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #p3 {
    width: 46%;
    padding-left: 0%;
    clear: left;
    display: block;
    margin-bottom: 1%;
    margin-top: 1%;
    color: #ccc;
    border-bottom: 0px solid rgba(69, 75, 86, 0.95);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #p4 {
    width: 46%;
    margin-left: 8%;
    margin-right: 0%;
    clear: right;
    display: block;
    margin-bottom: 1%;
    margin-top: 1%;
    color: #ccc;
    text-align: left;
    border-bottom: 0px solid rgba(69, 75, 86, 0.95);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #bgcopy {
    width: 95.5%;
    max-width: 430px;
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 2%;
    padding-bottom: 2%;
    border-top: solid 2px #2f4d79;
    margin: auto;
    clear: none;
    float: none;
    color: #ccc;

    font-size: 0.75em;
    text-align: center;
  }
  .ir-arriba {
    width: auto;
    text-align: center;
    display: none;
    font-size: 2.5em;
    color: #ccc;
    cursor: pointer;
    position: fixed;
    bottom: 8%;
    right: 3%;
    z-index: 101;
    transition: all 0.6s ease-in-out;
    box-sizing: border-box;
  }
  .ir-arriba:hover {
    opacity: 0.85;
  }
  #social {
    width: 80%;
    padding-top: 90%;
    margin: auto;
    text-align: center;
    float: none;
    clear: none;
    letter-spacing: 1em;
    display: block;
    box-sizing: border-box;
  }
  #textoindex {
    width: 80%;
    padding-top: 18%;
    margin: auto;
    float: none;
    clear: none;
    text-align: center;
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    font-style: normal;
    font-size: 0.75em;
    text-shadow: 0 -1px 1px #000;
  }

  .hide_iphone {
    display: none;
  }
  .zeroMargin_iphone {
    margin-left: 0;
  }
}

/* Layout: 640px to min of 481px +++NokiaN9/LG optmius/BlackBerry z300/gNexus 5/Samsung note 2,3/Galaxy 2,3+++ */

@media only screen and (min-width: 481px) {
  .gridContenido {
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    clear: none;
    float: none;
    margin: auto;
  }
  header {
    margin: auto;
    clear: none;
    float: none;
    background-color: rgba(0, 53, 117, 0.9);
    border-bottom: 10px solid #60a23e;
    background-image: url(../images/bg-logo.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
  }
  article {
    width: 95.5%;
    max-width: 600px;
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 2%;
    padding-bottom: 2%;
    margin: auto;
    float: none;
    clear: none;
  }
  aside {
    width: 24%;
    height: auto;
    clear: right;
    float: right;
    margin-bottom: 2%;
    margin-top: 4%;
    padding-left: 1.5%;
    display: none;
    box-sizing: border-box;
  }
  section {
    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
  }
  footer {
    width: 100%;
    padding-top: 0%;
    padding-bottom: 0%;
    background-color: #013372;
    bottom: 0;
    background-image: url(../images/pie.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
  }
  /*bannerstar*/

  #banner {
    position: absolute;
    width: 100%;
    max-width: 640px;
    margin: auto;
    clear: none;
    float: none;
    box-sizing: border-box;
  }
  #gridbody2 {
    width: 100%;
    height: auto;
    margin-bottom: 2%;
    margin-top: 4%;
    float: left;
    clear: left;
  }
  /*banner end*/
  #gridbody {
    width: 95.5%;
    height: auto;
    max-width: 640px;
  }

  #gridbody3 {
    width: 95.5%;
    height: auto;
    max-width: 640px;
    margin-bottom: 3%;
    margin-top: 3%;
  }

  .gridContenido1 {
    width: 100%;
    max-width: 610px;
    margin: auto;
    z-index: 100;
    position: relative;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    margin-bottom: 0%;
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.99);
  }
  .gridContenido2 {
    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
    background-color: #eee;
    padding-top: 10%;
  }
  .gridContenido3 {
    position: absolute;
    width: 100%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    background-color: rgba(43, 55, 134, 0.95);
    bottom: 0;
    z-index: 1001;
  }
  #logo {
    width: 25%;
    padding-top: 2%;
    padding-left: 0%;
    padding-right: 0%;
    padding-bottom: 0%;
    clear: none;
  }
  .bglogo {
    background-image: url(../images/bg-logo2.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
  }
  #promo {
    width: 70%;
    clear: right;
    display: block;
    float: right;
    margin-top: 0%;
    margin-bottom: 0%;
  }
  #login {
    width: 60%;
    font-size: 0.85em;
    color: #fff;
    clear: none;
    display: block;
    margin-top: 1%;
    margin-bottom: 1%;
  }
  #menutop {
    width: 75%;
    font-size: 0.85em;
    color: #fff;
    clear: right;
    float: right;
    text-align: right;
    display: block;
    margin-top: 1%;
    margin-bottom: 2%;
  }
  #main-menu {
    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 0%;
    padding-bottom: 0%;
    margin: auto;
    float: none;
    clear: none;
  }
  nav {
    width: 100%;
  }

  #bgpie-main {
    width: 95.5%;
    max-width: 640px;
    margin: auto;
    clear: none;
    float: none;
    padding-bottom: 0.5%;
    padding-top: 0.5%;
    box-sizing: border-box;
  }
  #colum1x2 {
    width: 60%;
    margin-left: 0%;
    padding-bottom: 0%;
    padding-top: 0%;
    padding-left: 0%;
    padding-right: 2%;
    margin-bottom: 0%;
    clear: left;
    display: block;
  }
  #colum2x2 {
    width: 38%;
    margin-left: 0%;
    padding-bottom: 0%;
    padding-top: 0%;
    padding-left: 0%;
    padding-right: 0%;
    margin-bottom: 0%;
    margin-top: 0%;
    clear: right;
    display: block;
  }
  #t1 {
    width: 23.875%;
    padding-bottom: 1.5%;
    margin-bottom: 0%;
    padding-left: 3%;
    margin-top: 4%;
    font-size: 0.75em;
    color: #052d6e;
    text-align: center;
  }
  #t2 {
    width: 22.375%;
    margin-left: 4%;
    padding-bottom: 0%;
    margin-bottom: 0%;
    clear: right;
  }
  #t3 {
    width: 22.375%;
    margin-left: 1%;
    padding-bottom: 0%;
    margin-bottom: 0%;
    clear: right;
  }
  #t4 {
    width: 22.375%;
    margin-left: 1%;
    padding-bottom: 0%;
    margin-bottom: 0%;
    clear: right;
  }
  .txton {
    width: 40%;
    text-align: center;
    clear: none;
    margin: auto;
    color: #fff;
    font-size: 0.85em;
  }
  .txtofoto {
    width: 95.7%;
    margin-top: -18%;
    padding-left: 4%;
    padding-top: 1%;
    padding-bottom: 1%;
    position: relative;
    background-color: #000;
    z-index: 10;
    color: #fff;
    opacity: 0.8;
    font-size: 11px;
    text-align: left;
  }
  .flex-2 {
    width: 48%;
    margin: 0.5%;
    box-sizing: border-box;
    color: #000;
    font-size: 0.95em;
  }
  .flex-3 {
    width: 46%;
    margin: 2%;
    box-sizing: border-box;
    color: #000;
    text-align: center;
    font-size: 0.85em;
  }
  .flex-4 {
    width: 23%;
    text-align: center;
    margin: 4px;
    box-sizing: border-box;
  }
  .flex-5 {
    width: 30%;
    margin: 1.3%;
    font-size: 1em;
    color: #ccc;
    box-sizing: border-box;
  }
  .flex-6 {
    width: 30%;
    margin: 1.3%;
    font-size: 1em;
    color: #000;
    text-align: center;
    box-sizing: border-box;
  }
  #colum1x2index {
    width: 100%;
    margin-left: 0%;
    padding-top: 1.5%;
    padding-bottom: 0%;
    margin-bottom: 1.5%;
  }
  #colum2x2index {
    width: 100%;
    margin-left: 0%;
    padding-bottom: 0%;
    padding-top: 1.5%;
    padding-right: 0%;
    margin-bottom: 1.5%;
    clear: left;
  }
  #homebook {
    position: absolute;
    width: 25%;
    max-width: 300px;
    background-color: rgba(255, 255, 255, 0.75);
    padding: 1%;
    padding-bottom: 0;
    top: 140%;
    box-sizing: border-box;
    z-index: 1002;
    display: none;
  }

  #bd1 {
    width: 100%;
    font-size: 0.875em;
    padding-bottom: 4%;
    padding-top: 2%;
    padding-left: 2%;
    padding-right: 2%;
    clear: left;
    float: left;
    background-color: rgba(255, 255, 255, 1);
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    box-sizing: border-box;
  }
  #bd2 {
    width: 95.5%;
    max-width: 1140px;
    text-align: center;
    margin: auto;
    margin-bottom: 0%;
    margin-top: 3%;
    float: none;
    clear: none;
  }
  .bgpie {
    width: 95.5%;
    max-width: 600px;
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    margin: auto;
    clear: none;
  }
  #p1 {
    width: 46%;
    display: block;
    margin-bottom: 1%;
    margin-top: 1%;
    border-bottom: 0px solid rgba(51, 51, 51, 0.95);
    text-align: left;
    float: left;
    color: #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #p2 {
    width: 46%;
    margin-left: 8%;
    margin-right: 0%;
    clear: right;
    display: block;
    margin-bottom: 1%;
    margin-top: 1%;
    color: #ccc;
    text-align: left;
    border-bottom: 0px solid rgba(69, 75, 86, 0.95);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #p3 {
    width: 46%;
    padding-left: 0%;
    clear: left;
    display: block;
    margin-bottom: 1%;
    margin-top: 1%;
    color: #ccc;
    border-bottom: 0px solid rgba(69, 75, 86, 0.95);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #p4 {
    width: 46%;
    margin-left: 8%;
    margin-right: 0%;
    clear: right;
    display: block;
    margin-bottom: 1%;
    margin-top: 1%;
    color: #ccc;
    text-align: left;
    border-bottom: 0px solid rgba(69, 75, 86, 0.95);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #bgcopy {
    width: 95.5%;
    max-width: 600px;
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 2%;
    padding-bottom: 2%;
    border-top: solid 2px #2f4d79;
    margin: auto;
    clear: none;
    float: none;
    color: #ccc;

    font-size: 0.75em;
    text-align: center;
  }
  .ir-arriba {
    width: auto;
    text-align: center;
    display: none;
    font-size: 2.5em;
    color: #ccc;
    cursor: pointer;
    position: fixed;
    bottom: 8%;
    right: 3%;
    z-index: 101;
    transition: all 0.6s ease-in-out;
    box-sizing: border-box;
  }
  .ir-arriba:hover {
    opacity: 0.85;
  }
  #social {
    width: 80%;
    padding-top: 70%;
    margin: auto;
    text-align: center;
    float: none;
    clear: none;
    letter-spacing: 1em;
    display: block;
    box-sizing: border-box;
  }
  #textoindex {
    width: 80%;
    padding-top: 18%;
    margin: auto;
    float: none;
    clear: none;
    text-align: center;
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    font-style: normal;
    font-size: 0.85em;
    text-shadow: 0 -1px 1px #000;
  }

  .hide_android {
    display: none;
  }
  .zeroMargin_android {
    margin-left: 0;
  }
}

/* Layout: 768px to min of 641px +++Ipad+++ */

@media only screen and (min-width: 641px) {
  .gridContenido {
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    clear: none;
    float: none;
    margin: auto;
  }
  header {
    margin: auto;
    clear: none;
    float: none;
    background-color: rgba(0, 53, 117, 0.9);
    border-bottom: 10px solid #60a23e;
    background-image: url(../images/bg-logo.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
  }
  article {
    width: 95.5%;
    max-width: 768px;
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    margin: auto;
    float: none;
    clear: none;
  }
  aside {
    width: 30%;
    height: auto;
    clear: right;
    float: right;
    margin-bottom: 2%;
    margin-top: 4%;
    padding-left: 1.5%;
    display: block;
    box-sizing: border-box;
  }
  section {
    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
  }
  footer {
    width: 100%;
    padding-top: 0%;
    padding-bottom: 0%;
    background-color: #013372;
    bottom: 0;
    background-image: url(../images/pie.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
  }
  /*bannerstar*/

  #banner {
    position: absolute;
    width: 100%;
    max-width: 768px;
    margin: auto;
    clear: none;
    float: none;
    box-sizing: border-box;
  }
  #gridbody2 {
    width: 70%;
    height: auto;
    margin-bottom: 2%;
    margin-top: 4%;
    float: left;
    clear: left;
  }
  /*banner end*/
  #gridbody {
    width: 95.5%;
    height: auto;
    max-width: 768px;
  }
  #gridbody3 {
    width: 95.5%;
    height: auto;
    max-width: 768px;
  }
  .gridContenido1 {
    width: 100%;
    max-width: 768px;
    margin: auto;
    z-index: 100;
    position: relative;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    margin-bottom: 0%;
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.99);
  }
  .gridContenido2 {
    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
    background-color: #eee;
    padding-top: 8%;
  }
  .gridContenido3 {
    position: absolute;
    width: 100%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    background-color: rgba(43, 55, 134, 0.95);
    bottom: 0;
    z-index: 1001;
  }
  #logo {
    width: 20%;
    padding-top: 0%;
    padding-left: 0%;
    padding-right: 0%;
    padding-bottom: 1%;
    clear: none;
  }
  .bglogo {
    background-image: url(../images/bg-logo2.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
  }
  #promo {
    width: 80%;
    clear: right;
    display: block;
    float: right;
    margin-top: 1%;
    margin-bottom: 0%;
  }
  #login {
    width: 50%;
    font-size: 0.8125em;
    color: #fff;
    clear: none;
    display: block;
    margin-top: 1.5%;
    margin-bottom: 1.5%;
  }
  #menutop {
    width: 80%;
    font-size: 1em;
    color: #fff;
    clear: right;
    float: right;
    text-align: right;
    display: block;
    margin-top: 0.5%;
    margin-bottom: 0%;
  }
  #main-menu {
    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 0%;
    padding-bottom: 0%;
    margin: auto;
    float: none;
    clear: none;
  }
  nav {
    width: 100%;
  }

  #bgpie-main {
    width: 95.5%;
    max-width: 768px;
    margin: auto;
    clear: none;
    float: none;
    padding-bottom: 0.5%;
    padding-top: 0.5%;
    box-sizing: border-box;
  }
  #colum1x2 {
    width: 65%;
    margin-left: 0%;
    padding-bottom: 0%;
    padding-top: 0%;
    padding-left: 0%;
    padding-right: 2%;
    margin-bottom: 0%;
    clear: left;
    display: block;
  }
  #colum2x2 {
    width: 33%;
    margin-left: 0%;
    padding-bottom: 0%;
    padding-top: 0%;
    padding-left: 0%;
    padding-right: 0%;
    margin-bottom: 0%;
    margin-top: 0%;
    clear: right;
    display: block;
  }
  #t1 {
    width: 23.875%;
    padding-bottom: 1.5%;
    margin-bottom: 0%;
    padding-left: 3%;
    margin-top: 4%;
    font-size: 0.75em;
    color: #052d6e;
    text-align: center;
  }
  #t2 {
    width: 22.375%;
    margin-left: 4%;
    padding-bottom: 0%;
    margin-bottom: 0%;
    clear: right;
  }
  #t3 {
    width: 22.375%;
    margin-left: 1%;
    padding-bottom: 0%;
    margin-bottom: 0%;
    clear: right;
  }
  #t4 {
    width: 22.375%;
    margin-left: 1%;
    padding-bottom: 0%;
    margin-bottom: 0%;
    clear: right;
  }
  .txton {
    width: 40%;
    text-align: center;
    clear: none;
    margin: auto;
    color: #fff;
    font-size: 0.85em;
  }
  .txtofoto {
    width: 95.7%;
    margin-top: -15%;
    padding-left: 4%;
    padding-top: 1%;
    padding-bottom: 1%;
    position: relative;
    background-color: #000;
    z-index: 10;
    color: #fff;
    opacity: 0.8;
    font-size: 11px;
    text-align: left;
  }
  .flex-2 {
    width: 48%;
    margin: 0.5%;
    box-sizing: border-box;
    color: #000;
    font-size: 0.95em;
  }
  .flex-3 {
    width: 32%;
    margin: 0.5%;
    box-sizing: border-box;
    color: #000;
    text-align: center;
    font-size: 0.85em;
  }
  .flex-4 {
    width: 23%;
    text-align: center;
    margin: 1%;
    box-sizing: border-box;
  }
  .flex-5 {
    width: 22%;
    margin: 1.3%;
    font-size: 1em;
    color: #ccc;
    box-sizing: border-box;
  }
  .flex-6 {
    width: 30%;
    margin: 1.3%;
    font-size: 1em;
    color: #000;
    text-align: center;
    box-sizing: border-box;
  }
  #colum1x2index {
    width: 45%;
    margin-left: 0%;
    padding-top: 5%;
    padding-bottom: 0%;
    margin-bottom: 1.5%;
  }
  #colum2x2index {
    width: 53%;
    margin-left: 2%;
    padding-bottom: 0%;
    padding-top: 5%;
    padding-right: 0%;
    margin-bottom: 1.5%;
    clear: right;
  }
  #homebook {
    position: absolute;
    width: 35%;
    max-width: 300px;
    background-color: rgba(255, 255, 255, 0.75);
    padding: 1%;
    padding-bottom: 0;
    top: 140%;
    box-sizing: border-box;
    z-index: 1002;
    display: none;
  }

  #bd1 {
    width: 100%;
    font-size: 0.875em;
    padding-bottom: 1.6%;
    padding-top: 1.6%;
    padding-left: 1.6%;
    padding-right: 1.6%;
    clear: left;
    float: left;
    background-color: rgba(255, 255, 255, 1);
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px;
    box-sizing: border-box;
  }
  #bd2 {
    width: 95.5%;
    max-width: 1140px;
    text-align: center;
    margin: auto;
    margin-bottom: 0%;
    margin-top: 3%;
    float: none;
    clear: none;
  }
  .bgpie {
    width: 95.5%;
    max-width: 768px;
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    margin: auto;
    clear: none;
  }
  #p1 {
    width: 19%;
    display: block;
    margin-bottom: 1%;
    margin-top: 1%;
    border-bottom: 0px solid rgba(69, 75, 86, 0.95);
    text-align: left;
    float: left;
    color: #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #p2 {
    width: 25%;
    margin-left: 2%;
    margin-right: 0%;
    clear: right;
    display: block;
    margin-bottom: 1%;
    margin-top: 1%;
    color: #ccc;
    text-align: left;
    border-bottom: 0px solid rgba(69, 75, 86, 0.95);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #p3 {
    width: 25%;
    margin-left: 2%;
    margin-right: 0%;
    padding-left: 0%;
    clear: right;
    display: block;
    margin-bottom: 1%;
    margin-top: 1%;
    color: #ccc;
    border-bottom: 0px solid rgba(69, 75, 86, 0.95);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #p4 {
    width: 25%;
    margin-left: 2%;
    margin-right: 0%;
    padding-left: 0%;
    clear: right;
    display: block;
    margin-bottom: 1%;
    margin-top: 1%;
    color: #ccc;
    border-bottom: 0px solid rgba(69, 75, 86, 0.95);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  #bgcopy {
    width: 95.5%;
    max-width: 768px;
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    border-top: solid 2px #2f4d79;
    margin: auto;
    clear: none;
    float: none;
    color: #ccc;

    font-size: 0.75em;
    text-align: center;
  }
  .ir-arriba {
    width: auto;
    text-align: center;
    display: none;
    font-size: 3em;
    color: #ccc;
    cursor: pointer;
    position: fixed;
    bottom: 8%;
    right: 3%;
    z-index: 101;
    transition: all 0.6s ease-in-out;
    box-sizing: border-box;
  }
  .ir-arriba:hover {
    opacity: 0.85;
  }
  #social {
    width: 80%;
    padding-top: 62%;
    margin: auto;
    text-align: center;
    float: none;
    clear: none;
    letter-spacing: 1em;
    display: block;
    box-sizing: border-box;
  }
  #textoindex {
    width: 80%;
    padding-top: 10%;
    margin: auto;
    float: none;
    clear: none;
    text-align: center;
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    font-style: normal;
    font-size: 0.875em;
    text-shadow: 0 -1px 1px #000;
  }

  .hide_tablet {
    display: none;
  }
  .zeroMargin_tablet {
    margin-left: 0;
  }
}

/* Layout: 1140px to min of 769px +++Compu Escritorio+++ */

@media only screen and (min-width: 769px) {
  .gridContenido {
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    clear: none;
    float: none;
    margin: auto;
  }
  header {
    margin: auto;
    clear: none;
    float: none;
    background-color: rgba(0, 53, 117, 0.9);
    border-bottom: 10px solid #60a23e;
    background-image: url(../images/bg-logo.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
  }
  article {
    width: 95.5%;
    max-width: 1140px;
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    margin: auto;
    float: none;
    clear: none;
  }
  aside {
    width: 24%;
    height: auto;
    clear: right;
    float: right;
    margin-bottom: 2%;
    margin-top: 4%;
    padding-left: 1.5%;
    display: block;
    box-sizing: border-box;
  }
  section {
    width: 95.5%;
    height: auto;
    max-width: 1140px;
    margin: auto;
  }
  footer {
    width: 100%;
    padding-top: 0%;
    padding-bottom: 0%;
    background-color: #013372;
    bottom: 0;
    background-image: url(../images/pie.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
  }
  /*bannerstar*/

  #banner {
    position: absolute;
    width: 100%;
    max-width: 930px;
    margin: auto;
    clear: none;
    float: none;
    box-sizing: border-box;
  }
  #gridbody2 {
    width: 76%;
    height: auto;
    margin-bottom: 2%;
    margin-top: 4%;
    float: left;
    clear: left;
  }
  /*banner end*/
  #gridbody {
    width: 95.5%;
    height: auto;
    max-width: 1140px;
  }
  #gridbody3 {
    width: 95.5%;
    height: auto;
    max-width: 1140px;
  }
  .gridContenido1 {
    width: 95.5%;
    max-width: 1140px;
    margin: auto;
    z-index: 100;
    position: relative;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    margin-bottom: 1%;
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.99);
  }
  .gridContenido2 {
    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
    background-color: #eee;
    padding-top: 7%;
  }
  .gridContenido3 {
    position: absolute;
    width: 100%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    background-color: rgba(43, 55, 134, 0.95);
    bottom: 0;
    z-index: 1001;
  }

  #logo {
    width: 20%;
    padding-top: 1%;
    padding-left: 0%;
    padding-right: 0%;
    padding-bottom: 0%;
    clear: left;
  }
  .bglogo {
    background-image: url(../images/bg-logo2.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
  }
  #promo {
    width: 75%;
    clear: right;
    display: block;
    float: right;
    margin-top: 4%;
    margin-bottom: 0%;
  }
  #login {
    width: 50%;
    font-size: 0.85em;
    color: #fff;
    clear: none;
    display: block;
    margin-top: 1%;
    margin-bottom: 1%;
  }
  #menutop {
    width: 50%;
    font-size: 1em;
    color: #fff;
    clear: right;
    float: right;
    text-align: right;
    display: block;
    margin-top: 1%;
    margin-bottom: 1%;
  }
  #main-menu {
    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 0%;
    padding-bottom: 0%;
    margin: auto;
    float: none;
    clear: none;
  }
  nav {
    width: 100%;
  }

  #bgpie-main {
    width: 95.5%;
    max-width: 1140px;
    margin: auto;
    clear: none;
    float: none;
    padding-bottom: 0.5%;
    padding-top: 0.5%;
    box-sizing: border-box;
  }
  #colum1x2 {
    width: 66%;
    margin-left: 0%;
    padding-bottom: 0%;
    padding-top: 0%;
    padding-left: 0%;
    padding-right: 2%;
    margin-bottom: 0%;
    clear: left;
    display: block;
  }
  #colum2x2 {
    width: 32%;
    margin-left: 0%;
    padding-bottom: 0%;
    padding-top: 0%;
    padding-left: 0%;
    padding-right: 0%;
    margin-bottom: 0%;
    margin-top: 0%;
    clear: right;
    display: block;
  }
  #t1 {
    width: 23.875%;
    padding-bottom: 1.5%;
    margin-bottom: 0%;
    padding-left: 3%;
    margin-top: 4%;
    font-size: 0.75em;
    color: #052d6e;
    text-align: center;
  }
  #t2 {
    width: 22.375%;
    margin-left: 4%;
    padding-bottom: 0%;
    margin-bottom: 0%;
    clear: right;
  }
  #t3 {
    width: 22.375%;
    margin-left: 1%;
    padding-bottom: 0%;
    margin-bottom: 0%;
    clear: right;
  }
  #t4 {
    width: 22.375%;
    margin-left: 1%;
    padding-bottom: 0%;
    margin-bottom: 0%;
    clear: right;
  }
  .txton {
    width: 45%;
    text-align: center;
    clear: none;
    margin: auto;
    color: #fff;
    font-size: 0.95em;
  }
  .txtofoto {
    width: 94.7%;
    margin-top: -12%;
    padding-left: 4%;
    padding-top: 1%;
    padding-bottom: 1%;
    position: relative;
    background-color: #000;
    z-index: 10;
    color: #fff;
    opacity: 0.8;
    font-size: 15px;
    text-align: left;
  }
  .flex-2 {
    width: 48%;
    margin: 0.5%;
    box-sizing: border-box;
    color: #000;
    font-size: 0.95em;
  }
  .flex-3 {
    width: 32%;
    margin: 0.5%;
    box-sizing: border-box;
    color: #000;
    text-align: center;
    font-size: 0.95em;
  }
  .flex-4 {
    width: 23%;
    text-align: center;
    margin: 1%;
    box-sizing: border-box;
  }
  .flex-5 {
    width: 17.4%;
    margin: 1.3%;
    font-size: 1.125em;
    color: #ccc;
    box-sizing: border-box;
  }
  .flex-6 {
    width: 14.06%;
    margin: 1.3%;
    font-size: 1.125em;
    color: #000;
    text-align: center;
    box-sizing: border-box;
  }
  #colum1x2index {
    width: 38%;
    margin-left: 0%;
    padding-top: 1.5%;
    padding-bottom: 0%;
    margin-bottom: 1.5%;
  }
  #colum2x2index {
    width: 60%;
    margin-left: 2%;
    padding-bottom: 0%;
    padding-top: 1.5%;
    padding-right: 0%;
    margin-bottom: 1.5%;
    clear: right;
  }
  #homebook {
    position: absolute;
    width: 25%;
    max-width: 300px;
    background-color: rgba(255, 255, 255, 0.75);
    padding: 1%;
    padding-bottom: 0;
    top: 125%;
    box-sizing: border-box;
    z-index: 1002;
    display: block;
  }

  #bd1 {
    width: 100%;
    font-size: 0.9125em;
    padding-bottom: 1%;
    padding-top: 3.5%;
    padding-left: 2%;
    padding-right: 2%;
    clear: left;
    float: left;
    background-color: rgba(255, 255, 255, 1);
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    box-sizing: border-box;
  }
  #bd2 {
    width: 95.5%;
    max-width: 1140px;
    text-align: center;
    margin: auto;
    margin-bottom: 0%;
    margin-top: 3%;
    float: none;
    clear: none;
  }
  .bgpie {
    width: 95.5%;
    max-width: 1140px;
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    margin: auto;
    clear: none;
  }
  #p1 {
    width: 25%;
    display: block;
    margin-bottom: 1%;
    margin-top: 1%;
    border-bottom: 0px solid rgba(69, 75, 86, 0.95);
    text-align: left;
    float: left;
    color: #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #p2 {
    width: 23%;
    margin-left: 2%;
    margin-right: 0%;
    clear: right;
    display: block;
    margin-bottom: 1%;
    margin-top: 1%;
    color: #ccc;
    text-align: left;
    border-bottom: 0px solid rgba(69, 75, 86, 0.95);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #p3 {
    width: 23%;
    margin-left: 2%;
    margin-right: 0%;
    padding-left: 0%;
    clear: right;
    display: block;
    margin-bottom: 1%;
    margin-top: 1%;
    color: #ccc;
    border-bottom: 0px solid rgba(69, 75, 86, 0.95);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #p4 {
    width: 23%;
    margin-left: 2%;
    margin-right: 0%;
    padding-left: 0%;
    clear: right;
    display: block;
    margin-bottom: 1%;
    margin-top: 1%;
    color: #ccc;
    border-bottom: 0px solid rgba(69, 75, 86, 0.95);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #bgcopy {
    width: 95.5%;
    max-width: 1140px;
    padding-left: 0%;
    padding-right: 0%;
    padding-top: 1%;
    padding-bottom: 1%;
    border-top: solid 2px #2f4d79;
    margin: auto;
    clear: none;
    float: none;
    color: #ccc;

    font-size: 0.85em;
    text-align: center;
  }
  .ir-arriba {
    width: auto;
    text-align: center;
    display: none;
    font-size: 3em;
    color: #ccc;
    cursor: pointer;
    position: fixed;
    bottom: 10%;
    right: 3%;
    z-index: 101;
    transition: all 0.6s ease-in-out;
    box-sizing: border-box;
  }
  .ir-arriba:hover {
    opacity: 0.85;
  }
  #social {
    width: 80%;
    padding-top: 10%;
    margin: auto;
    text-align: center;
    float: none;
    clear: none;
    letter-spacing: 1em;
    display: block;
    box-sizing: border-box;
  }
  #textoindex {
    width: 80%;
    padding-top: 18%;
    margin: auto;
    float: none;
    clear: none;
    text-align: center;
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    font-style: normal;
    font-size: 0.875em;
    text-shadow: 0 -1px 1px #000;
  }

  .zeroMargin_desktop {
    margin-left: 0;
  }
  .hide_desktop {
    display: none;
  }
}