/*
Theme Name: Guiajando
Author: webmarken lab OÜ
Version: 1.0
Text Domain: guiajando
*/

/* Browser default reset */

/* This is unused */

/* @font-face {
  font-family: "regularicons";
  src: url("fonts/fa-regular-400.ttf") format("truetype");
  font-display: swap;
} */
/* 
 */

@font-face {
  font-family: "solidicons";
  src: url("fonts/FontAwesome5Free-Solid.woff2") format("woff2"),
    url("fonts/FontAwesome5Free-Solid.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/*  */

@font-face {
  font-family: "bold";
  src: url("fonts/Montserrat-Bold.woff2") format("woff2"),
    url("fonts/Montserrat-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/*  */

@font-face {
  font-family: "italic";
  src: url("fonts/Montserrat-Italic.woff2") format("woff2"),
    url("fonts/Montserrat-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

/* This has already been declared below */
/*  	
 */

/*  */

@font-face {
  font-family: "normal";
  src: url("fonts/Montserrat-Regular.woff2") format("woff2"),
    url("fonts/Montserrat-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Have removed this altogether as it was only used once */

/* @font-face {
  font-family: "semibold";
  src: url("fonts/montserrat-semibold-webfont.ttf") format("truetype");
  font-display: swap;
  text-rendering: auto;
} */

/* This has been replaced with the section below it, woff test */

/*  */

@font-face {
  font-family: "roboto-regular";
  src: url("fonts/Roboto-Regular.woff2") format("woff2"),
    url("fonts/Roboto-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/*Styles RESET****************************************/
* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  /* font-style: normal; */
  text-decoration: none;
  /* font-weight: normal; */
  line-height: 1em;
  box-sizing: border-box;
  text-decoration: none;
}

/* //////// Open General sitewide styles ****************************************************/

/* body,
html {} */

/*Decides the default font style for the whole site*/
body {
  font-family: Arial, Helvetica, sans-serif;
}

a {
  color: #e92a5a;
}

a:hover {
  color: #000;
}

p {
  line-height: 1.3em;
  font-size: 1em;
}

.centered {
  text-align: center;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

/*// General titles*/

.bigtitle1 {
  margin: 150px auto 10px auto;
  font-size: 3em;
  text-align: center;
  padding: 20px 0 0 0;
  position: relative;
  width: 90%;
  max-width: 800px;
}

.bigtitle1:before {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translate(-50%, 0);
  content: "";
  width: 50px;
  height: 60px;
  background-image: url(img/iso.png);
  background-size: cover;
}

.bigtitle1 + p {
  font-size: 1.2em;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  max-width: 700px;
  width: 90%;
  margin: 0 auto 50px auto;
}

@media only screen and (max-width: 800px) {
  .bigtitle1 {
    margin: 110px auto 10px auto;
    font-size: 2em;
  }

  .bigtitle1 + p {
    font-size: 1.1em;
    margin: 0 auto 35px auto;
  }
}

/*// Close General titles*/

/* // Buttons General styles*/

.button {
  background-color: #e92a5a;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 5px;
  padding: 10px 15px;
  display: inline-block;
}

.button:hover {
  background-color: #2db2e6;
}

/* // Close Buttons General styles*/

/*   //// HEADER */
header {
  background-color: #131a2b;
  padding: 20px 20px 0 20px;
  position: relative;
  width: 100%;
}

#otherando {
  position: absolute;
  right: 2%;
  margin-top: 1rem;
  border-radius: 5px;
  border: 1px solid #2db2e6;
  background-color: #0693e3;
  color: #fff;
  padding: 5px;
  height: 35px;
  line-height: 35px;
  max-width: 350px;
  z-index: 500;
  top: 20px;
  display: none;
}

#otherando.active {
  display: block;
}

@media screen and (min-width: 1001px) {
  #otherando {
    display: block;
  }
}

.outer {
  position: relative;
  width: 100%;
  top: 3px;
}

.outer li{
  position:relative;
  display:block;
  margin-right:10px;
  padding-left: 5px;
}

.outer li a, .inner li a{
  text-decoration:none;
  color: #fff;
}

.inner{
  position:absolute;
  display:none;
  width:100%;
  padding:5px 5px;
  background-color: #0693e3;
  margin-top:0px;
  left: 0;
  border-radius:0 0 5px 5px;
}

@media screen and (max-width: 1000px) {
  .inner {
    left: 5px;
  }
}

.inner li{
  padding:0;
}

.inner li a{
  font-size: 0.8rem;
}

.inner li:hover a{
  color:black;
}

.outer li:hover .inner,
.inner:hover,
#otherando:hover .inner {
  display: block;
  top: 20px;
  margin: 5px;
}

/*scrolled class added  via jquery in custom.js  to header when page scrolls , mostly to control the header behavior in destop, making it mobile  like when scrolling but with some small diferences*/

header.scrolled {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  padding: 20px;
}

/*Menu trigger, hand made , not icon*/
header #trigger,
header.scrolled #trigger {
  position: absolute;
  display: none;
  top: 20px;
  right: 20px;
  height: 25px;
  width: 30px;
  color: #fff;
  cursor: pointer;
}

/*force trigger to show when page is scrolled*/
header.scrolled #trigger {
  display: block !important;
}

/* bars in the trigger**/
header #trigger .bar {
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-color: #2db2e6;
  margin-bottom: 7px;
  transition: all 0.3s linear;
}

/* convert the bars to make the X in the trigger when header have the added class "active" in custom.js*/
header.active #trigger .bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
  margin-bottom: 0;
  transition: all 0.3s linear;
}

header.active #trigger #uno {
  transform: rotate(45deg) translate(-50%, -50%);
}

header.active #trigger #dos {
  display: none;
}

header.active #trigger #tres {
  transform: rotate(-45deg) translate(-50%, -50%);
}

/*behavior of header and trigger under 1000px , 1st mobile turn point*/
@media only screen and (max-width: 1000px) {
  header,
  header.scrolled {
    padding: 15px;
  }

  header #trigger {
    display: block;
  }
}

/* //// Logo in header*/
header #logo {
  position: relative;
  display: inline-block;
  padding-left: 5px;
}

/*Logo IMG width  decides width of Logo*/
header #logo img {
  max-width: 220px;
}

/*smaller Logo for small screens*/
@media only screen and (max-width: 600px) {
  header #logo {
    padding-left: 0;
  }

  /*Logo IMG decides width of Logo*/
  header #logo img {
    max-width: 180px;
  }
}

/* // Close Logo*/

/* //// Open Search bar in header */

#searchbar {
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 90%;
  max-width: 350px;
  overflow: hidden;
}

#searchbar input,
#searchbar button {
  background-color: transparent;
  border: 1px solid #2db2e6;
  display: block;
  height: 35px;
  line-height: 35px;
  position: relative;
  float: left;
  color: #fff;
  border-radius: 5px;
  overflow: hidden;
}

#searchbar input {
  border-right: 0;
  width: 90%;
  border-radius: 5px 0 0 5px;
  padding: 0 0 0 15px;
}

#searchbar button {
  border-left: 0;
  width: 10%;
  border-radius: 0 5px 5px 0;
}

#searchbar button:before {
  font-family: "solidicons";
  content: "\f002";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #2db2e6;
}

/*Search input for 1st mobile turn point*/
@media only screen and (max-width: 1000px) {
  #searchbar, #otherando {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 10px auto 0 auto;
    width: 90%;
    display: none;
  }
  #otherando {
    right: 0;
  }
}

/* //// Close  Search bar*/

/* //// Header Nav : big main menu */

header nav {
  text-align: center;
  margin: 30px 0 0 0;
  display: block;
}

header nav a {
  color: #f2f2f2;
  display: inline-block;
  margin-right: 15px;
  padding: 10px;
  cursor: pointer;
}

header nav a:hover {
  color: #2db2e6;
}

header nav a.active {
  color: #fff;
  border-radius: 5px 5px 0 0;
  background-color: #2db2e6;
}

header nav a.active:hover {
  color: #000;
}

/*header scrolled DESKTOP nav , almost same style than mobile*****/
header.scrolled nav {
  margin: 10px auto;
  max-width: 350px;
  display: none;
}

header.scrolled nav a {
  color: #fff;
  display: block;
  margin: 0;
  padding: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1em;
  font-family: Arial, Helvetica, sans-serif;
}

header.scrolled nav a.active {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  background-color: transparent;
  border-radius: 0;
}

/* Header Guide buttons bar, outside the header via position absolute*/
header #guidebuttons {
  position: absolute;
  width: 97%;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 10;
  text-align: center;
  padding: 5px;
  background-color: #2db2e6;
  border-radius: 0 0 5px 5px;
}

header #guidebuttons a {
  color: #fff;
  display: inline-block;
  margin: 6px 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8em;
}

#guidebuttons a:hover {
  color: #131a2b;
}

header.scrolled #guidebuttons a:hover {
  color: #fff;
}

/*//// right buttons*/
header #rightbuttons {
  position: absolute;
  top: 35px;
  right: 30px;
  display: inline-block;
  overflow: hidden;
}

header #rightbuttons .button {
  margin-left: 15px;
  font-size: 0.8em;
}

/*  /// Close right buttons */

/*header scrolled right buttons */

header.scrolled #rightbuttons {
  position: relative;
  top: auto;
  right: auto;
  display: none;
  text-align: center;
  max-width: 350px;
  margin: 0 auto;
}

header.scrolled #rightbuttons .button {
  margin: 0 auto 10px auto;
  display: block;
  text-transform: uppercase;
  letter-spacing: 1px;
  max-width: 300px;
}

/* Close Header Guide buttons bar*/

/* 1st mobile turn point to show  menu ,  all mobile header buttons style are here */
@media only screen and (max-width: 1000px) {
  header nav,
  header #guidebuttons {
    margin: 8px 0;
    width: 50%;
    display: none;
    position: relative;
  }

  header nav {
    float: left;
    text-align: left;
  }

  header #guidebuttons {
    float: right;
    top: auto;
    left: auto;
    transform: none;
    text-align: right;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
  }

  header nav a,
  header #guidebuttons a,
  header.scrolled nav a {
    color: #fff;
    display: block;
    margin: 0;
    padding: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.7em;
    font-family: Arial, Helvetica, sans-serif;
  }

  header #guidebuttons a {
    color: #2db2e6;
  }

  header nav a.active {
    border-radius: 0;
    background-color: transparent;
    color: #2db2e6;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
  }

  header #rightbuttons {
    position: relative;
    top: auto;
    right: auto;
    display: none;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    float: none;
  }

  header #rightbuttons .button {
    margin: 0 auto 10px auto;
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
    max-width: 300px;
  }
}

/* //// Close  HEADER */

/* ///////// Close General sitewide styles ****************************************************/

/*open HERO ****************************************************/

#hero {
  position: relative;
  height: 550px;
  /*background-blend-mode: multiply;*/
  background-size: cover;
  background-position: top center;
  /* This was causing issues with blurring on iOS images */
  /* Solution here: https://stackoverflow.com/questions/38083150/background-image-blurry-on-mobile-ios */
  /* background-attachment: fixed; */
  z-index: 1;
}

/*Overlay over the hero Image*/
#hero:before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: "";
  z-index: 1;
  background-color: #0148a9;
  opacity: 0.7;
  width: 100%;
  height: 100%;
}

/*the design under the hero image*/
#hero:after {
  height: 95px;
  width: 100%;
  z-index: 2;
  position: absolute;
  bottom: -48px;
  left: 0;
  background-image: url(img/sep-header.png);
  background-size: 100% auto;
  background-position: center center;
  background-repeat: no-repeat;
  content: "";
}

#hero #breadcrumbs {
  background-color: rgba(6, 48, 117, 0.4);
  color: #f1f1f1;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  padding: 15px 15px 15px 30px;
  font-size: 0.8em;
}

#hero #breadcrumbs a {
  color: #fff;
}

#hero #heroinfo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center !important;
  width: 90%;
  max-width: 800px;
  color: #fff !important;
  z-index: 2;
}

#heroinfo h1,
#heroinfo h2 {
  font-size: 6em;
  margin-bottom: 15px;
  text-shadow: 2px 2px 0 #2db2e6;
}

#heroinfo p {
  font-size: 1.2em;
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.4em;
}

/*
TITULOS DEL HERO
Esto lo puedes cambiar por h3 o un div.hero-titulo
*/
#heroinfo p.hero-titulo {
  font-size: 4em;
  margin-bottom: 15px;
  text-shadow: 2px 2px 0 #2db2e6;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  line-height: 1;
  overflow-wrap: break-word;
}

#heroinfo #herodata {
  margin-top: 60px;
  overflow: hidden;
}

#herodata .block {
  float: left;
  width: 33.32%;
  padding: 0 25px;
}

#herodata .block h5 {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 3em;
  margin-bottom: 10px;
  text-shadow: 2px 2px 0 #2db2e6;
}

#herodata .block p {
}

@media only screen and (max-width: 1025px) {
  #hero {
    height: 450px;
    background-size: 110% auto;
  }

  #heroinfo h1,
  #heroinfo h2 {
    font-size: 4em;
    margin-bottom: 10px;
  }

  /*
TITULOS DEL HERO
Esto lo puedes cambiar por h3 o un div.hero-titulo
*/
  #heroinfo p.hero-titulo {
    font-size: 4em;
    margin-bottom: 10px;
    line-height: 1;
  }

  #heroinfo p {
  }

  #heroinfo #herodata {
    margin-top: 60px;
  }

  #herodata .block h5 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 2.5em;
  }

  #herodata .block p {
    font-size: 0.9em;
  }
}

@media only screen and (max-width: 700px) {
  #hero {
    background-size: auto 100%;
    padding: 50px 0;
  }

  #hero #breadcrumbs {
    display: none;
  }

  #hero #heroinfo {
    position: relative;
    left: auto;
    top: auto;
    transform: translate(0, 0);
    margin: 0 auto;
  }

  #heroinfo h1,
  #heroinfo h2 {
    font-size: 2.2em;
    margin-bottom: 10px;
    text-shadow: 1px 1px 0 #2db2e6;
  }

  #heroinfo p {
    font-size: 1em;
  }

  #heroinfo p.hero-titulo {
    font-size: 2.2em;
    margin-bottom: 10px;
    text-shadow: 1px 1px 0 #2db2e6;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1;
    overflow-wrap: normal;
  }

  #heroinfo #herodata {
    margin-top: 40px;
  }

  #herodata .block {
    float: left;
    width: 33.32%;
    padding: 0 15px;
  }

  #herodata .block h5 {
    font-size: 1.5em;
    margin-bottom: 10px;
    text-shadow: 1px 1px 0 #2db2e6;
  }

  #herodata .block p {
    font-size: 0.7em;
    line-height: 1.2em;
  }
}

/* Close HERO ****************************************************/

/*Open big ideas text of two columns ****************************************************/

.bigideas {
  margin: 80px auto;
  width: 90%;
  max-width: 1000px;
  overflow: hidden;
  position: relative;
}

.bigideas em {
  color: #e92a5a;
}

.bigideas .block {
  float: left;
  width: 50%;
}

.bigideas #left {
  padding-right: 40px;
  text-align: right;
}

/*autor*/
.bigideas h6,
.bigideas-line {
  font-size: 0.8em;
  padding-top: 20px;
  margin-top: 20px;
  position: relative;
}

/*decoration: little pink  line over autor*/
.bigideas h6:before,
.bigideas-line:before {
  content: "";
  position: absolute;
  right: 0;
  top: -10px;
  width: 45px;
  height: 4px;
  background-color: #2db2e6;
  border-radius: 4px;
}

#intro #left p,
#specialinfo #right p {
  font-size: 3.3em;
  font-family: Arial, Helvetica, sans-serif;
  transform: translate(0, -10px);
}

#intro #right p,
#specialinfo #left p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  line-height: 1.4em;
  margin-bottom: 20px;
}

#intro #right p:last-child,
#specialinfo #left p:last-child {
  margin-bottom: 0;
}

/* Special info are blocks very similar to the intro but with mirrored design*/
#specialinfocontainer {
  background-color: #f9f9f9;
  position: relative;
  padding: 30px 0;
  margin-bottom: 60px;
}

#specialinfo {
}

/*Decoration of special boxes*/
#specialinfocontainer:before,
#specialinfocontainer:after {
  position: absolute;
  left: 0;
  width: 100%;
  background-size: cover;
  background-position: center center;
  height: 25px;
  content: "";
}

#specialinfocontainer:before {
  background-image: url(img/special-top.png);
  top: -25px;
}

#specialinfocontainer:after {
  background-image: url(img/special-bottom.png);
  bottom: -25px;
}

#specialinfo h6:before {
  left: 0;
  right: auto;
}

@media only screen and (max-width: 660px) {
  .bigideas {
    margin: 30px auto;
  }

  .bigideas .block {
    float: none;
    width: 100%;
  }

  .bigideas #left {
    padding-right: 0;
    padding-bottom: 30px;
    text-align: left;
  }

  #intro #left p,
  #specialinfo #right p {
    font-size: 2em;
  }

  #intro #right p,
  #specialinfo #left p {
    font-family: Arial, Helvetica, sans-serif;
  }

  .bigideas h6:before,
  .bigideas-line:before {
    content: "";
    position: absolute;
    right: auto;
    left: 0;
  }
}

/*Close Big Ideas ****************************************************/

/*Open General Grid System ****************************************************/

.grid {
  overflow: hidden;
  position: relative;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.grid .item {
  float: left;
  display: block;
  overflow: hidden;
  position: relative;
}

.grid4 .item {
  width: 23.5%;
  margin: 0 2% 2% 0;
}

.grid4 .item:nth-of-type(4n) {
  margin-right: 0;
}

.grid2 .item {
  width: 49%;
  margin: 0 2% 2% 0;
}

.grid2 .item:nth-of-type(2n) {
  margin-right: 0;
}

.grid3 .item {
  width: 32%;
  margin: 0 2% 2% 0;
}

.grid3 .item:nth-of-type(3n) {
  margin-right: 0;
}

/*Add to favorites buttons */

.grid .item .addfav {
  color: #999;
  font-family: Arial, Helvetica, sans-serif;
  text-align: right;
  font-size: 0.9em;
  position: relative;
  padding-right: 25px;
  cursor: pointer;
  z-index: 3;
}

.grid .item .addfav:hover {
  color: #2db2e6;
}

.grid .item .addfav.added {
  color: #e92a5a;
}

.addfav:after {
  font-family: "solidicons";
  content: "\f005";
  position: absolute;
  right: 0;
  top: 40%;
  transform: translate(0, -50%);
}

@media only screen and (max-width: 1000px) {
  .grid4 .item,
  .grid3 .item {
    width: 49%;
  }

  .grid .item:nth-of-type(2n) {
    margin-right: 0;
  }

  .grid4 .item:nth-of-type(4n) {
    margin-right: inherit;
  }

  .grid3 .item:nth-of-type(3) {
    margin-right: 2%;
  }
}

@media only screen and (max-width: 700px) {
  .grid4 .item,
  .grid2 .item,
  .grid3 .item {
    width: 100%;
    margin: 0 0 2% 0 !important;
    border-right: none;
  }
}

/*Close General Grid System  ****************************************************/

/*Abre Icon List ****************************************************/

#iconlist {
}

#iconlist .item {
  padding: 25px;
  text-align: center;
  height: 350px;
  border-right: dotted 1px rgba(51, 51, 51, 0.2);
}

#iconlist .item:nth-of-type(4n) {
  border-right: none;
}

#iconlist .item img {
  height: 120px;
  display: inline-block;
  margin-bottom: 20px;
}

#iconlist .item h3 {
  font-size: 1.3em;
  margin-bottom: 15px;
  color: #000;
}

#iconlist .item p {
  font-size: 0.9em;
  color: #151515;
  font-family: Arial, Helvetica, sans-serif;
  max-width: 300px;
  margin: 0 auto;
}

@media only screen and (max-width: 800px) {
  #iconlist .item:nth-of-type(2n) {
    border-right: none;
  }

  #iconlist .item:nth-of-type(4n) {
    border-right: inherit;
  }

  #iconlist .item img {
    height: 100px;
  }
}

@media only screen and (max-width: 700px) {
  #iconlist .item {
    border-right: none;
    height: 250px;
  }
}

@media only screen and (max-width: 600px) {
  #iconlist .item p {
    font-size: 0.8em;
  }
}

@media only screen and (max-width: 400px) {
  #iconlist .item img {
    height: 90px;
  }

  #iconlist .item {
    padding: 25px;
    text-align: center;
    height: 280px;
    border-right: none;
    border-bottom: dotted 1px rgba(51, 51, 51, 0.15);
  }

  #iconlist .item:last-child {
    border-bottom: none;
  }
}

/* /// Close Icon List ****************************************************/

/*Abre Featured list ****************************************************/

#featured {
}

#featured .item {
  border-radius: 10px;
  background-color: #f9f9f9;
}

/*Height of the picture window*/
#featured .item .upper {
  overflow: hidden;
  position: relative;
  height: 170px;
  z-index: 1;
}

#featured.grid2 .item .upper {
  height: 240px;
  z-index: 1;
}

#featured.grid3 .item .upper {
  height: 210px;
  z-index: 1;
}

#featured .item .upper img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 0.3s linear;
}

#featured .item:hover .upper img {
  width: 150%;
}

#featured .item .upper:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: rgba(6, 45, 102, 0.3);
  z-index: 2;
}

/*date on picture*/
.item .upper .date {
  position: absolute;
  bottom: 10px;
  right: 10px;
  height: 40px;
  width: 40px;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  color: #999;
  background-color: #fff;
  z-index: 2;
}

.item .upper .date p:first-child {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.4em;
  line-height: 0.8em;
}

.item .upper .date p:last-child {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9em;
}

#featured .item .lower {
  position: relative;
  padding: 20px;
  z-index: 2;
}

#featured .item .lower .info {
  overflow: auto;
  height: 150px;
  margin-bottom: 25px;
}

#featured .item .lower .info h3 {
  font-size: 1.1em;
  margin-bottom: 15px;
  text-decoration: underline;
}

.grid3 .item .lower .info h3 {
  font-size: 1.3em;
}

#featured .item .lower .info p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  line-height: 1.25em;
  color: #151515;
}

#featured.grid2 .item .lower .info p {
  font-size: 1.2em;
}

@media only screen and (max-width: 1220px) {
  #featured .item .lower .info h3 {
    font-size: 1em;
  }

  .grid3 .item .lower .info h3 {
    font-size: 1.1em;
  }

  #featured .item .lower .info p {
    font-size: 0.8em;
  }

  #featured.grid2 .item .lower .info p {
    font-size: 1em;
  }
}

@media only screen and (max-width: 1000px) {
  #featured .item .lower .info h3 {
    font-size: 1.3em;
  }

  .grid3 .item .lower .info h3 {
    font-size: 1.3em;
  }

  #featured .item .lower .info p {
    font-size: 1em;
  }

  #featured.grid2 .item .lower .info p {
    font-size: 1em;
  }
}

@media only screen and (max-width: 700px) {
  #featured .item .upper {
    overflow: hidden;
    position: relative;
    height: 240px;
    z-index: 1;
  }

  #featured.grid2 .item .upper {
    height: 240px;
    z-index: 1;
  }

  #featured.grid3 .item .upper {
    height: 240px;
    z-index: 1;
  }

  /* /// AQUI SE MODIFICA EL ALTO DE LAS TARJETAS EN MOVIL!!! ****************************************************/

  #featured .item .lower .info {
    height: 120%;
  }
}

/* /// Close Featured list ****************************************************/

/*Abre Stacked List 
For Blog Posts lists, because it does not consider "add to favorites in the design"
****************************************************/

#stacked {
}

/*The first item is bigger and different than the rest*/
#stacked .item:first-child {
  width: 55%;
  margin-right: 5%;
  height: 400px;
  margin-bottom: 0;
}

#stacked .item:first-child .upper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  border-radius: 10px;
}

#stacked .item:first-child .upper img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 130%;
  z-index: 1;
}

#stacked .item:first-child .upper:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  content: "";
  background-color: rgba(1, 50, 122, 0.4);
}

#stacked .item:first-child .upper .date {
  display: block !important;
  bottom: auto;
  top: 15px;
  right: 15px;
  z-index: 3;
}

#stacked .item:first-child .lower {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px;
  color: #fff !important;
  z-index: 3;
  float: none;
  width: 100%;
}

#stacked .item:first-child .lower h3 {
  font-size: 1.3em;
  margin-bottom: 5px;
}

#stacked .item:first-child .lower a {
  color: #fff;
}

#stacked .item:first-child .lower p {
  font-size: 1em;
}

/*Special css for addfav for these typew of items*/
#stacked .item:first-child .addfav {
  top: 15px;
  left: 15px;
  font-size: 1.3em;
}

/*the rest of the items are smaller*/
#stacked .item {
  width: 40%;
  height: 80px;
  margin-bottom: 24px;
}

#stacked .item .upper {
  position: relative;
  float: left;
  height: 80px;
  margin-right: 5%;
  width: 25%;
  border-radius: 5px;
  overflow: hidden;
}

#stacked .item .upper img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 160%;
}

/*No date in small items*/
#stacked .item .upper .date {
  display: none;
}

#stacked .item .lower {
  width: 70%;
  color: #000 !important;
  float: left;
}

#stacked .item .lower h3 {
  font-size: 0.8em;
  margin-bottom: 5px;
}

#stacked .item .lower p {
  font-size: 0.75em;
}

/*special addfav css for smaller items*/
#stacked .item .addfav.added {
  opacity: 1;
}

#stacked .item .addfav {
  position: absolute;
  top: 5px;
  left: 5px;
  right: auto;
  bottom: auto;
  color: #fff;
  height: 25px;
  opacity: 0.5;
  font-size: 1em;
}

@media only screen and (max-width: 1000px) {
  #stacked .item:first-child .upper img {
    width: 150%;
    z-index: 1;
  }
}

@media only screen and (max-width: 940px) {
  #stacked .item:first-child {
    width: 100%;
    margin: 0 0 20px 0;
  }

  #stacked .item {
    width: 100%;
    height: auto;
    margin-bottom: 24px;
  }

  #stacked .item .lower h3 {
    font-size: 1em;
    margin-bottom: 10px;
  }

  #stacked .item .lower p {
    font-size: 0.85em;
  }
}

@media only screen and (max-width: 700px) {
  #stacked .item:first-child {
    height: 300px;
  }
}

/* /// Close Stacked  Lists for Blog posts****************************************************/

/*Internal pages  styles*************************/

/* //// Content******************/
#content {
  width: 95%;
  max-width: 1200px;
  margin: -120px auto 80px auto;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

#content #left {
  float: left;
  width: 25%;
  padding: 180px 5% 0 0;
}


#content #left .item {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 25px;
  color: #2db2e6;
  text-align: right;
}

#content #right {
  float: left;
  width: 75%;
  background-color: #fff;
  padding: 30px;
  border-radius: 20px;
}

#content #centered {
  width: 75%;
  background-color: #fff;
  padding: 30px;
  border-radius: 20px;
  margin: 0 auto;
}

.basic-page {
  margin-top: 50px !important;
}

#content #breadcrumbs {
  margin: 0 0 20px 0;
  font-family: Arial, Helvetica, sans-serif;
  word-spacing: 0.5em;
}

#content h1 {
  font-size: 2.6em;
  margin: 0 0 30px 0;
  padding: 0 0 30px 0;
  position: relative;
}

#content h1:after {
  position: absolute;
  left: 0;
  bottom: -5px;
  content: "";
  width: 60px;
  height: 6px;
  background-color: #e92a5a;
  border-radius: 4px;
}

#content p,
#content ul,
#content ol {
  font-size: 1.25em;
  margin: 0 0 20px 0;
  line-height: 1.4em;
}

#content p:last-child {
  margin-bottom: 0;
}

#content p.special1 {
  font-size: 1.8em;
}

#content h2,
#content h3,
#content h4,
#content h5 {
  margin: 40px 0 15px 0;
  line-height: 1.2em;
}

#content h2 {
  font-size: 2em;
}

#content h3 {
  font-size: 1.7em;
}

#content h4 {
  font-size: 1.4em;
}

#content h5 {
  font-size: 1.2em;
}

#content ul,
#content ol {
}

#content ul li,
#content ol li {
  margin: 0 0 12px 0;
  list-style-type: disc;
  list-style: inside;
}

#content p.imageholder,
#content .text img {
  border-radius: 10px;
  width: 100%;
  border: dotted 0px #ccc;
}

#content p.imageholder img,
#content .text img {
  width: 100%;
  display: block;
  border-radius: 10px;
}
#content .text img {
  margin: 0 0 20px 0;
}

#content p.imageholder + p,
#content .imagegallery + p,
#content .videowrapper + p,
#content .text figcaption {
  font-size: 0.8em;
  margin: -5px 5px 40px 0;

  font-family: Arial, Helvetica, sans-serif;
  color: lightgray;
  /*	margin: -50px 10px 40px 0; */
}

@media only screen and (max-width: 750px) {
  #content {
    padding: 30px;
    border-radius: 20px;
    background-color: #fff;
  }

  #content #left {
    display: none;
  }

  #content #left .item {
    display: none;
  }
  
  #content #right {
    float: none;
    width: 100%;
    padding: 0;
    background-color: transparent;
  }

  #content #centered {
    width: 100%;
    padding: 0;
  }

  .basic-page {
    margin-top: 0px !important;
  }

  #content #left {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: dashed 1px #ccc;
  }

  #content #left .item {
    display: inline-block;
    margin: 0 15px 15px 0;
    text-align: inherit;
  }

  #content h1 {
    font-size: 2em;
    margin: 0 0 30px 0;
    padding: 0 0 30px 0;
  }

  #content h1:after {
    position: absolute;
    left: 0;
    bottom: -5px;
    content: "";
    width: 60px;
    height: 6px;
    background-color: #e92a5a;
    border-radius: 4px;
  }

  #content p,
  #content ul,
  #content ol {
    font-size: 1em;
    margin: 0 0 20px 0;
  }

  #content p:last-child {
    margin-bottom: 0;
  }

  #content p.special1 {
    font-size: 1.6em;
  }

  #content h2,
  #content h3,
  #content h4,
  #content h5 {
    margin: 30px 0 10px 0;
    line-height: 1.2em;
  }

  #content h2 {
    font-size: 1.7em;
  }

  #content h3 {
    font-size: 1.2em;
  }

  #content h4 {
    font-size: 1em;
  }

  #content h5 {
    font-size: 0.8em;
  }

  #content ul,
  #content ol {
  }

  #content ul li,
  #content ol li {
    margin: 0 0 12px 0;
    list-style-type: disc;
    list-style: inside;
  }

  #content p.imageholder {
    border-radius: 10px;
    border: dotted 1px #ccc;
  }

  #content p.imageholder img {
    width: 100%;
    display: block;
    border-radius: 10px;
  }

  #content p.imageholder + p,
  #content .imagegallery + p,
  #content .videowrapper + p {
    font-size: 0.8em;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 40px 40px 40px;
  }
}

/*Abre imagegallery *********/

.imagegallery {
  margin: 40px 0 20px 0;
  overflow: hidden;
}

.imagegallery #mainimage {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 20px;
}

.imagegallery .item {
  float: left;
  width: 23.5%;
  margin: 0 2% 2% 0;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  padding-bottom: 120px;
}

.imagegallery .item:nth-of-type(4n) {
  margin-right: 0;
}

.imagegallery .item img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 160%;
  transition: all 0.3s ease-in-out;
}

.imagegallery .item:hover img {
  width: 190%;
}

@media only screen and (max-width: 800px) {
  .imagegallery .item {
    width: 49%;
    padding-bottom: 120px;
  }

  .imagegallery .item:nth-of-type(4n) {
    margin-right: inherit;
  }

  .imagegallery .item:nth-of-type(2n) {
    margin-right: inherit;
  }
}

/* /// Close imagegallery *********/

/* /// Open Special boxes and offer **/

/*General for Special Boxes*/

.specialbox {
  padding: 30px;
  border-radius: 10px;
  margin: 60px auto;
  max-width: 700px;
  overflow: hidden;
}

.specialbox .leftpanel {
  float: left;
  width: 25%;
  padding-right: 5%;
}

.specialbox .leftpanel img {
  width: 100%;
  display: block;
}

.specialbox .leftpanel img.offericon {
  margin-bottom: 20px;
  border: none;
}

.specialbox .rightpanel {
  float: left;
  width: 70%;
}

.specialbox .rightpanel h3 {
  margin: 0 0 20px !important;
  line-height: 0.9em;
}

.specialbox .rightpanel p {
  font-size: 1.3em;
}

.specialbox .buttons {
  text-align: right;
  margin-top: 25px;
}

/*Specific  for offers*/
#offer {
  background-color: #f9f9f9;
  border: dotted 2px #e92a5a;
  box-shadow: 10px 10px 0 rgba(45, 178, 230, 0.2);
}

/*specific for special messages*/

#specialmessage {
  background-color: #e92a5a;
}

#specialmessage .leftpanel {
  width: 15%;
}

#specialmessage .rightpanel {
  width: 80%;
}

#specialmessage h3,
#specialmessage p {
  color: #fff;
}

#specialmessage .button {
  background-color: #fff;
  color: #151515;
}

#specialmessage .button:hover {
  background-color: #000;
  color: #fff;
}

/*Specific for Mailing list  subscription  invitation  boxes*/

#mailing {
  background-color: #131a2b;
}

#mailing h3 {
  color: #e92a5a;
}

#mailing p {
  color: #fff;
}

@media only screen and (max-width: 600px) {
  .specialbox {
  }

  .specialbox .leftpanel,
  #specialmessage .leftpanel {
    float: none;
    width: 100%;
    padding-right: 0;
    text-align: center !important;
    margin-bottom: 20px;
  }

  .specialbox .leftpanel img,
  #specialmessage .leftpanel img {
    width: 100%;
    max-width: 120px;
    display: block;
    margin: 0 auto 20px auto;
  }

  .specialbox .rightpanel,
  #specialmessage .rightpanel {
    float: none;
    width: 100%;
    text-align: center !important;
  }

  .specialbox .buttons {
    text-align: center;
  }
}

/*/// Close special bocks and offer *****/

/*Abre Square Videos ****************************************************/

.videoplace {
  height: 400px;
  width: 400px;
  position: relative;
  float: left;
  margin: 0 25px 25px 0;
  overflow: hidden;
}

.videoplace .video {
  width: 100%;
  position: relative;
  z-index: 1;
  display: block;
}

.videoplace h3 {
  color: #e92a5a !important;
  position: absolute;
  z-index: 2;
  top: 0px;
  left: 0px;
  width: 90%;
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
  text-align: right;
}

@media only screen and (max-width: 1000px) {
  .videoplace {
    text-align: center;
    float: none;
    margin: 25px auto 0 auto;
    width: 100%;
  }
}

/* /// Close Square Videos ****************************************************/

/* //// Close Content********************/

/* //// Abre Place datasheet ****************************************************/

#place {
  background-color: #f2f2f2;
  padding: 25px;
  border-radius: 10px;
}

#place #leftpanel,
#place #rightpanel {
  float: left;
}

#place #leftpanel {
  width: 25%;
}

/*Each data block */
#place #leftpanel .data {
  padding: 20px 20px 20px 0;
  border-bottom: dashed 1px rgba(102, 102, 102, 0.3);
  overflow: hidden;
}

#place #leftpanel .data .icon {
  float: left;
  width: 25%;
  text-align: center;
}

#place #leftpanel .data .icon img {
  display: inline-block;
  width: 70%;
  margin-bottom: 10px;
}

#place #leftpanel .data .icon h4 {
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.5em;
  color: #e92a5a;
}

#place #leftpanel .data .info {
  float: left;
  width: 70%;
  padding-left: 5%;
}

#place #leftpanel .data .info h4 {
  font-size: 0.8em;
  margin: 10px 0 5px 0;
}

#place #leftpanel .data .info h4:first-child {
  margin-top: 0;
}

#place #leftpanel .data .info p {
  font-size: 0.7em;
  line-height: 1em;
  margin-bottom: 5px;
}

#place #leftpanel .data .info p:last-child {
  margin-bottom: 0;
}

#place #rightpanel {
  width: 75%;
  position: relative;
}

/*temporal img is for teting design only, this rule is also  controlling the iframe*/
#place #rightpanel img,
#place #rightpanel iframe {
  width: 100%;
  display: block;
  height: 100%;
  /*no se si va a funcionar, probar*/
  position: relative;
  z-index: 1;
  border-radius: 10px;
}

#place #rightpanel #mapicons {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: right;
  z-index: 2;
  width: 100%;
  border-radius: 0 0 10px 10px;
}

#place #rightpanel #mapicons h4 {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  color: #000;
  vertical-align: middle;
}

#place #rightpanel .mapicon {
  text-align: center;
  display: inline-block;
  margin: 0 0 0 25px;
  vertical-align: middle;
}

#place #rightpanel .mapicon img {
  display: inline-block;
  width: 45px;
  margin-bottom: 10px;
}

#place #rightpanel .mapicon h5 {
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.5em;
  color: #e92a5a;
}

@media only screen and (max-width: 1110px) {
  #place {
    padding: 20px;
  }

  #place #leftpanel,
  #place #rightpanel {
    float: none;
  }

  #place #leftpanel {
    width: 100%;
  }

  #place #leftpanel .data {
    padding: 20px;
  }

  #place #leftpanel .data .icon {
    float: left;
    width: 25%;
    text-align: center;
  }

  #place #leftpanel .data .icon h4 {
    font-size: 0.6em;
  }

  #place #leftpanel .data .info h4 {
    font-size: 1em;
    margin: 10px 0 5px 0;
  }

  #place #leftpanel .data .info p {
    font-size: 0.85em;
    line-height: 1em;
    margin-bottom: 10px;
  }

  #place #rightpanel {
    width: 100%;
    position: relative;
  }

  p {
    font-family: Arial, Helvetica, sans-serif;
  }
}

@media only screen and (max-width: 600px) {
  #place #leftpanel .data .icon h4 {
    font-size: 0.5em;
  }

  #place #rightpanel #mapicons {
    text-align: center;
  }

  #place #rightpanel .mapicon {
    margin: 0 10px;
    vertical-align: middle;
  }

  #place #rightpanel #mapicons h4 {
    display: block;
    font-size: 0.8em;
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
  }
}

/* //// Cierra Place Datasheet ****************************************************/

/*Internal pages  styles*************************/

/*Open Videowrapper for embeded  youtube Videos ****************************************************/

.videowrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
  width: 100%;
  margin: 40px 0 20px 0;
  overflow: hidden;
  border-radius: 10px;
}

.videowrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.videowrapper:first-child {
  margin-top: 0;
}

.videowrapper:last-child {
  margin-bottom: 0;
}

/*Close  Videowrapper for embeded  youtube Videos ****************************************************/

/*Abre footer ****************************************************/
#prefooter {
  display: block;
  width: 100%;
  margin-top: 70px;
}

footer {
  overflow: hidden;
  position: relative;
  background-color: #131a2b;
  min-height: 500px;
  color: #f2f2f2;
}

/*Little red line in footer*/
footer:before {
  content: "";
  position: absolute;
  top: 0;
  left: 30px;
  width: 4px;
  height: 150px;
  background-color: #e92a5a;
  border-radius: 0 0 4px 4px;
}

footer .block {
  float: left;
  width: 25%;
  padding: 40px 60px;
  border-right: dotted 1px rgba(153, 153, 153, 0.4);
}

footer .block:last-child {
  border-right: none;
  background-color: #202630;
  height: 100%;
}

footer h3 {
  font-size: 1.5em;
  margin-bottom: 25px;
  color: #e92a5a;
}

footer p {
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 25px;
  font-size: 0.9em;
}

/*
TITULOS DEL FOOTER
Esto lo puedes cambiar por h5, p.titular o como tu quieras
*/
footer p.titular {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.5em;
  margin-bottom: 25px;
  color: #e92a5a;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  overflow-wrap: normal;
  white-space: normal;
}

footer #rrss {
}

footer .block .item {
  display: block;
  margin-bottom: 20px;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
  font-size: 0.9em;
  letter-spacing: 1px;
  padding-left: 25px;
  text-decoration: underline;
}

footer .block .item:hover {
  color: #2db2e6;
}

footer .block .item:last-child {
  margin-bottom: 0;
}

footer .block .item:before {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  font-family: "solidicons";
  content: "\f111";
  font-size: 0.5em;
}

#logofooter {
  margin: 60px auto 30px 0;
  max-width: 200px;
}

/* // Open Subscribe bar bar in footer */

footer #subscribe {
  width: 90%;
  max-width: 350px;
  overflow: hidden;
}

#subscribe input,
#subscribe button {
  background-color: #fff;
  border: none;
  display: block;
  height: 35px;
  line-height: 35px;
  position: relative;
  float: left;
  color: #333;
  border-radius: 5px;
  overflow: hidden;
}

#subscribe input {
  border-right: 0;
  width: 85%;
  border-radius: 5px 0 0 5px;
  padding: 0 0 0 15px;
}

#subscribe button {
  border-left: 0;
  width: 15%;
  border-radius: 0 5px 5px 0;
  background-color: #e92a5a;
}

#subscribe button:before {
  font-family: "solidicons";
  content: "\f0e0";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

/* /// Close subscribe bar in  footer ****************************************************/

#rrss {
  margin-top: 50px;
}

#rrss a {
  display: inline-block;
  width: 30x;
  margin: 0 15px 15px 0;
}

#rrss a img {
  display: block;
  width: 100%;
}

@media only screen and (max-width: 1000px) {
  footer .block {
    float: none;
    width: 90%;
    padding: 40px;
    margin: 0 auto;
    border-right: none;
    border-bottom: dotted 1px rgba(153, 153, 153, 0.4);
  }
}

/* /// Close footer ****************************************************/

/* UPDATE Images - Para corregir las imágenes del homepage.*/

img {
  max-width: 100%;
  width: auto;
  height: auto;
}

/* UPDATE Images - esto resuelve el resizing dinámico que estaba haciendo 
Wordpress después de la actualización.*/
.entry-content img,
.comment-content img,
.widget img {
  max-width: 99.5%; /* Fluid images for posts, comments, and widgets */
}
img[class*="align"],
img[class*="wp-image-"] {
  height: auto; /* Make sure images with WordPress-added height and width >attributes are scaled correctly */
}
img.size-full {
  max-width: 97.5%;
  width: auto; /* Prevent stretching of full-size images with height and >>width attributes in IE8 */
}
/* UPDATE Images - Deja el Close caption vivo. */

.wp-caption {
  max-width: 100%;
}

.schema-faq {
  margin: 2px;
  padding: 2px;
  line-height: 3em;
}
.schema-faq-question {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  line-height: 3em;
}

.schema-faq-answer {
  margin: 10px;
  padding: 2px;
}

li {
  line-height: 1.6;
}


@media (max-width: 768px) {
  #left {
    display: none;
  }
}