@font-face {
    font-family: Spartan;
    src: url(../../fonts/SpartanMB-Regular.otf);
  }
  
  @font-face {
    font-family: Spartan;
    src: url(../../fonts/SpartanMB-Thin.otf);
    font-weight: 100;
  }
  @font-face {
    font-family: Spartan;
    src: url(../../fonts/SpartanMB-Light.otf);
    font-weight: 200;
  }
  @font-face {
    font-family: Spartan;
    src: url(../../fonts/SpartanMB-Bold.otf);
    font-weight: bold;
  }
  html,
  body,
  body div,
  span,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  abbr,
  address,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  samp,
  small,
  strong,
  sub,
  sup,
  var,
  b,
  i,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section,
  time,
  mark,
  audio,
  video,
  details,
  summary {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  html{
    font-family: 'Spartan', sans-serif !important;
  }
  body{
    background-color: #ffffff;
    color: #051c2c;
  }
  body *:focus{
    border:0;
  }
  a,button,textarea,input{
    font-family: 'Spartan', sans-serif;
    text-decoration:none;
    color: #051c2c;
  }
  a:hover,a:hover i,button:hover i, #menu-on:hover span{
    color: #2180c0 !important;
  }
  img {
    border: 0;
    width: 100%;
  }
  button,input[type="button"],input[type="submit"]  {
    cursor: pointer;
  }
  li{
    list-style-type: none;
  }
  
  .titulos{
    font-family: 'Zilla Slab', serif;/*opcional cambiar*/
    font-weight: 600;
    color:#051c2c;
    overflow: hidden;
  }
  .bold{
    font-weight: bold;  
  }
  .small-caps{
    font-variant: small-caps;
    font-weight: bold;
  }
  .font-normal{
    font-weight: normal;  
  }
  .italic{
    font-style: italic;
  }
  button:focus,input:focus,textarea:focus{
    outline: none;
    outline-width: 0 !important;
  }
  .container-total{
    position: relative;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .container{
    position: relative;
    width: 100%;
    max-width: 1310px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .w-100{
    width: 100%;
  }
  .h-100{
    height: 100%;
  }
  .fixed{
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .absolute {
    position: absolute;
  }
  .color-white{
    color:#ffffff;/*colores cambiar*/
  }
  .color-dark{
    color:#051c2c;
  }
  .color-light{
    color:#2180c0;
  }
  .txt-center {
    text-align: center ;
  }
  .txt-justify {
    text-align: justify;
  }
  .block{
    display: block;
  }
  .inline-block{
    display:inline-block;
  }
  .flex{
    display: -ms-flexbox;
    display: flex;
  }
  .flex-column{
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .center-vertical-flex{
    align-items: center;
  }
  .hidden {
    display: none ;
  }
  .list-inline{
    display: inline-block;
  }
  .p-5{
    padding: 5px;
  }
  .p-10{
    padding: 10px;
  }
  .p-15{
    padding: 15px;
  }
  .p-20{
    padding: 20px;
  }
  .p-30{
    padding: 30px;
  }
  .p-40{
    padding: 40px;
  }
  .p-50{
    padding: 50px;
  }
  .pt-5{
    padding-top: 5px;
  }
  .pt-10{
    padding-top: 10px;
  }
  .pt-15{
    padding-top: 15px;
  }
  .pt-20{
    padding-top: 20px;
  }
  .pt-50{
    padding-top: 50px;
  }
  .pr-5{
    padding-right: 5px;
  }
  .pr-10{
    padding-right: 10px;
  }
  .pr-15{
    padding-right: 15px;
  }
  .pr-20{
    padding-right: 20px;
  }
  .pb-5{
    padding-bottom: 5px;
  }
  .pb-10{
    padding-bottom: 10px;
  }
  .pb-15{
    padding-bottom: 15px;
  }
  .pb-20{
    padding-bottom: 20px;
  }
  .pb-50{
    padding-bottom: 50px;
  }
  .pl-5{
    padding-left: 5px;
  }
  .pl-10{
    padding-left: 10px;
  }
  .pl-15{
    padding-left: 15px;
  }
  .pl-20{
    padding-left: 20px;
  }
  .mt-10{
    margin-top: 10px;
  }
  .mt-20{
    margin-top: 20px;
  }
  .mt-30{
    margin-top: 30px;
  }
  .mt-50{
    margin-top: 50px;
  }
  .mb-10{
    margin-bottom: 10px;
  }
  .mb-20{
    margin-bottom: 20px;
  }
  .mb-30{
    margin-bottom: 30px;
  }
  .mb-50{
    margin-bottom: 50px;
  }
  .m-auto{
    margin: 0 auto;
  }
  .column-auto{
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  .column-100{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .column-83{
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .column-80{
    -ms-flex: 0 0 80%;
    flex: 0 0 80%;
    max-width: 80%;
  }
  .column-75{
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .column-66{
    -ms-flex: 0 0 66.666666%;
    flex: 0 0 66.666666%;
    max-width: 66.666666%;
  }
  .column-60{
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    max-width: 60%;
  }
  .column-50{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .column-40{
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%;
  }
  .column-33{
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .column-25{
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .column-20{
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .column-16{
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .column-100,.column-83,.column-80,.column-75,.column-66,.column-60,.column-50,.column-40,.column-33,.column-25,.column-20,.column-16,
  .column-100-s,.column-83-s,.column-80-s,.column-75-s,.column-66-s,.column-60-s,.column-50-s,.column-40-s,.column-33-s,.column-25-s,.column-20-s,.column-16-s,
  .column-100-m,.column-83-m,.column-80-m,.column-75-m,.column-66-m,.column-60-m,.column-50-m,.column-40-m,.column-33-m,.column-25-m,.column-20-m,.column-16-m,
  .column-100-l,.column-83-l,.column-80-l,.column-75-l,.column-66-l,.column-60-l,.column-50-l,.column-40-l,.column-33-l,.column-25-l,.column-20-l,.column-16-l,
  .column-100-xl,.column-83xl,.column-80-xl,.column-75-xl,.column-66-xl,.column-60-xl,.column-50-xl,.column-40-xl,.column-33-xl,.column-25-xl,.column-20-xl,.column-16-xl{
    position: relative;
    width: 100%;
    min-height: 1px;
    box-sizing: border-box;
  }

/********************************************header*********************************/
header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background-color: #051c2c;
  -webkit-transition:  .6s ease;
  -moz-transition:  .6s ease;
  -ms-transition:  .6s ease;
  -o-transition:  .6s ease;
  transition:  .6s ease;
}
header img{
  display: inline-block;
  margin-top: 15px;
}
#cuatrecasas{
  margin-left: 20px;
  width: 170px;
  margin-bottom: 9px ;
}
#ra_peque{
  margin-left: 10px;
  width: 40px;
	
}
.menu_on {
  position: absolute;
  top: 30px;
  right: 20px;
  min-height: 30px;
  max-width: 50px;
  z-index: 9999;
  cursor: pointer;
  width: 100%;
}
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
  background-color: #ffffff;
  position: absolute;
  right: 0;
  width: 40px;
  height: 4px;
  border-radius: 5px;
  content: '';
  transition-timing-function: ease;
  transition-duration: .2s;
  transition-property: transform,opacity;
}
.hamburger-inner:before {
  top: 10px;
}
.hamburger-inner:after {
  top: 20px;
}
header.active .menu_on .hamburger-inner {
  transform: translate3d(0,10px,0) rotate(45deg);
}
header.active .menu_on .hamburger-inner:after {
  transform: translate3d(0,-20px,0) rotate(-90deg);
}
header.active .menu_on .hamburger-inner:before {
  opacity: 0;
  transform: translate3d(0,-20px,0) rotate(90deg);
  
}
nav{
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  height: 100vh;
  background: #051c2c;
  -webkit-transition:  .6s ease;
  -moz-transition:  .6s ease;
  -ms-transition:  .6s ease;
  -o-transition:  .6s ease;
  transition:  .6s ease;
  color: #ffffff;
  text-transform: uppercase;
}
header.active nav{
  right: 0;
}
nav a{
  text-transform: uppercase;
  display: block;
  color: #ffffff;
}
nav li{
  padding-bottom: 5px;
}
nav ul li ul li a{
  text-transform: initial;
}
#ediciones{
  cursor: pointer;
}
#ediciones:hover{
  color: #2180c0;
}
#ediciones ul{
  opacity: 0;
  -webkit-transition:  .6s ease;
  -moz-transition:  .6s ease;
  -ms-transition:  .6s ease;
  -o-transition:  .6s ease;
  transition:  .6s ease;
}
#ediciones.active ul{
  opacity: 1;
}
/******************************************principal********************************/
.principal{
    height: 70vh;
}
.contenedor-principal{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #051c2c;
    color: #ffffff;
    /*background-image: url(../images/river.jpg);
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;*/
}
.contenedor-principal h1{
  font-weight: 300;
    font-size: 2.5em;
}
.contenedor-principal p.upper{
  font-size: 1.2em;
  font-weight: 200;
  text-transform: uppercase;
}
.contenedor-principal p.low{
  color: #a5c84b;
}
.contenedor-principal .registrar{
  position: relative;
  top: 20px;
  background-color: #2180c0;
  padding: 5px 10px;
  color: white;
  transition: .5s;
}
.list-ediciones{
  position: absolute;
  right: 0;
  bottom: 10px;
}
.list-ediciones a{
  color: #ffffff;
  font-size: 0.8em;
  font-weight: bold;
  margin-right: 10px;
}
p.fecha{
  position: absolute;
    bottom: 10px;
    left: 5px;
}

/********************************************presentacion**************************/
section h2{
    font-size: 2em;
    font-weight: 200;
}
.contenedor-presentacion p{

    margin-top: 20px;
    font-size: 0.9em;
    line-height: 25px;
}
.linea::before {
    content: "";
    width: 40px;
    height: 4px;
    background-color: #a5c84b;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}
/********************************************ponentes*******************************/

.ponentes{
    background-color: #f0f0f5;
    padding: 50px 20px;
}
.ponentes .linea::before,.alta .linea::before,.agenda .linea::before {
    margin: 10px auto;
}
.list-ponentes article{
  padding: 10px 5px;
}  

.caja-ponente{
    position: relative;
    background-color: #fff;
    max-width: 300px;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 20px 30px rgb(0 0 0 / 10%);
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -ms-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease;
}
.caja-ponente .caja-img{
    position: relative;
    display: block;
    text-align: center;
    padding: 0;
    overflow: hidden;
    min-height: 280px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    -webkit-transition:  .6s ease;
    -moz-transition:  .6s ease;
    -ms-transition:  .6s ease;
    -o-transition:  .6s ease;
    transition:  .6s ease;
}
.caja-ponente .caja-img .caja-trans{
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: -110%;
  z-index: 1;
  background-color: rgba(33, 128, 192,.8);
  -webkit-transition:  .6s ease;
  -moz-transition:  .6s ease;
  -ms-transition:  .6s ease;
  -o-transition:  .6s ease;
  transition:  .6s ease;
}
.caja-ponente .caja-img .caja-trans span{
  cursor: pointer;
  color: #ffffff;
  font-size: 1.5em;
}
.caja-ponente .caja-text{
    position: relative;
    padding: 20px 20px;
    padding-right: 10px;
    background-color: #051c2c;
    width: 100%;
    height: 160px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.caja-ponente:hover .caja-img{
  transform: scale(1.05);
}
.caja-ponente:hover .caja-img .caja-trans{
  bottom: 0;
}
.caja-ponente h3{
    font-size: 1.8em;
}
.caja-ponente span{
    font-size: 0.8em;
}
/*******************************************agenda********************************/
.agenda{
  overflow: hidden;
}
.element-agenda{
  top: 0;
  left: 0;
  min-height: 200px;
  margin-bottom: 0px;
  
}

.text-left{
	text-align: left;
}

.agenda-text{
	font-size: 1.5rem;
}
.caja-agenda{
  position: absolute;
  border-radius: 3px;
  padding: 10px 10px;
  width: 70%;
  color: #ffffff;
  height: 85%;
  text-align: center;
  -webkit-transition: 1.5s ease;
  -moz-transition: 1.5s ease;
  -ms-transition: 1.5s ease;
  -o-transition: 1.5s ease;
  transition: 1.5s ease;
  box-sizing: border-box;
  overflow:auto;
}
#agenda_1 .caja-agenda,#agenda_3 .caja-agenda,#agenda_5 .caja-agenda, #agenda_7 .caja-agenda, #agenda_9 .caja-agenda{
  left: -200%;
  background-color: #051c2c;
}
#agenda_2 .caja-agenda,#agenda_4 .caja-agenda, #agenda_6 .caja-agenda, #agenda_8 .caja-agenda{
  right: -200%;
  background-color: #2180c0;
}

/******************************************form***********************************/
.ponentes,.alta{
  background-color: #f0f0f5;
  padding: 30px 20px;
}
form label{
  display: block;
  font-weight: bold;
}
form p{
  width: 70%;
  margin: 0 auto;
  padding-top: 15px;
}
form input[type=text]{
  border-radius: 3px;
  border:2px solid #cccccc;
  display: block;
  width: 100%;
  height: 30px;
    font-size: 18px;
}
input:focus {
    outline: none !important;
    border-color: #2180c0 !important;
}
.boton{
  font-family: 'Spartan', sans-serif;
    font-size: 1.2em;
    background-color: transparent;
    border: 2px solid #051c2c;
    border-radius: 3px;
    padding: 2px 30px;
    cursor: pointer;
    transition: .5s;
}
.boton:hover{
  border: 2px solid #2180c0;
  color: #2180c0;
}

#loader{
  display:none;
}
.resultado{
  width:100%;
  text-align:center;
  font-size:16px;
}
.resultado .exito{
  padding: 0.5rem;
  color: rgb(33, 128, 192) !important;
  display:none;
}
.resultado .fallo{
  color: #fff !important;
  background-color:red;
  padding:5px 20px;
  display:none;
}
.formu_error{
  color:red;
  font-size:16px;
}
#privacidad-error{
  float:left !important;
  width:100% !important;
}
.g-recaptcha>div{
  margin: 20px auto;
}
#hiddenRecaptcha-error{
  text-align: center;
}
/********************************************scroll*************************************/
  
  /* Works on Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: #2180c0 #051c2c;
  }
  
  /* Works on Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 8px;
    height: 8px; 
  }
  
  *::-webkit-scrollbar-track {
    background: #051c2c;
  }
  
  *::-webkit-scrollbar-thumb {
    background-color: #2180c0;
    border-radius: 20px;
    border: 2px solid #051c2c;
  }
  
  /*********************************************pie*****************************************/
  .pie{
      position: relative;
      background-color: #051c2c;
      color:#ffffff;
      padding: 80px 5px 20px 5px;
      z-index: 99;
  }
  .pie ul{
      padding-left: 0;
  }
  .pie a{
    color: #ffffff;
  }
  .pie a:hover,.modal button:hover{
      color:#2180c0;
  }
  .list-web{
      position:relative;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      box-sizing: border-box;
  }
  .caja-web{
      text-align: center;
  }
  .caja-web h2{
    margin:20px auto;
  }
  .caja-web h2 a{
      font-weight: bold;
      font-size: 0.9em;
  }
  .caja-web p,.caja-web ul li a{
      font-size: 0.7em;  
  }
  .caja-web p{
      width: 70%;
      margin: 0 auto;
  }
  .logo-pie img{
      margin-top: 50px;
      width: 200px;
  }
  .info-pie,.redes-social-pie{
      position: relative;
      text-align: center;
  }
  .redes-social-pie span, .redes-social-pie ul,.redes-social-pie ul li{
      display: inline-block;
  }
  .redes-social-pie span{
      font-size: 0.8em;
  }
  .ancla_home {
    z-index: 999;
    position: fixed;
    bottom: 20px;
    right: 20px;
    border-radius: 3px;
  }
  /**********************************************modal*****************************************/
  .modal {
    background-color: rgba(255,255,255,.8);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 99999;
  }
  .modal-contenido {
    width: 300px;
    margin: 0 auto;
    min-height: 400px;
    position: relative;
    max-width: 940px;
    background-color: #051c2c;
    border-radius: 3px;
    padding: 10px;
  }
  
  .modal-body{
    position: relative;
    padding: 10px;
    height: 70%;
  }
  .modal h4{
    font-size: 1.5em;
  }
  .modal-body p{
    margin-top: 10px;
    font-size: 0.9em;
  }
  #b_close{
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    background-color: transparent;
    border: 0;
  }
  
  /************************************************medias*****************************************/
  @media (min-width: 576px) {
    .column-100-s{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .column-83-s{
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .column-80-s{
    -ms-flex: 0 0 80%;
    flex: 0 0 80%;
    max-width: 80%;
  }
  .column-75-s{
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .column-66-s{
    -ms-flex: 0 0 66.666666%;
    flex: 0 0 66.666666%;
    max-width: 66.666666%;
  }
  .column-60-s{
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    max-width: 60%;
  }
  .column-50-s{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .column-40-s{
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%;
  }
  .column-33-s{
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .column-25-s{
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .column-20-s{
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .column-16-s{
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .block-s{
    display: block;
  }
  .inline-block-s{
    display: inline-block;
  }
  .flex-s{
    display: -ms-flexbox;
    display: flex;
  }
  .flex-column-s{
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .hidden-s{
    display: none;
  }
  }
  @media (max-width: 768px) and (orientation: landscape) {
    .contenedor-principal p{
      font-size: 0.8em;
    }
  .contenedor-principal h1{
        font-size: 2em;
    }
  .contenedor-principal p.upper{
    font-size: 0.8em;
 
    }
    .principal{
      height: 100vh;
    }
  }
  @media (min-width: 768px) {
    .contenedor-principal p{
      font-size: 1em;
    }
  .contenedor-principal h1{
        font-size: 3em;
    }
  .contenedor-principal p.upper{
    font-size: 1.5em;
 
    }
  .element-agenda {
      min-height: 400px;
      width: 80%;
  }
  #cuatrecasas {
    width: 200px;
  }
  #ra_grande{
    width: 350px;
  }
  h1{
    font-size: 2em;
  }
  nav{
    width: 20%;
  }
  .modal-contenido{
    width: 450px;
  }
  .column-100-m{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .column-83-m{
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .column-80-m{
    -ms-flex: 0 0 80%;
    flex: 0 0 80%;
    max-width: 80%;
  }
  .column-75-m{
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .column-66-m{
    -ms-flex: 0 0 66.666666%;
    flex: 0 0 66.666666%;
    max-width: 66.666666%;
  }
  .column-60-m{
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    max-width: 60%;
  }
  .column-50-m{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .column-40-m{
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%;
  }
  .column-33-m{
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .column-25-m{
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .column-20-m{
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .column-16-m{
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .block-m{
    display: block;
  }
  .inline-block-m{
    display: inline-block;
  }
  .flex-m{
    display: -ms-flexbox;
    display: flex;
  }
  .flex-column-m{
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .hidden-m{
    display: none;
  }
  }
  
  @media (min-width: 992px) {
    #cuatrecasas {
      width: 300px;
    }
    #ra_grande{
      width: 450px;
    }
  .column-100-l{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .column-83-l{
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .column-80-l{
    -ms-flex: 0 0 80%;
    flex: 0 0 80%;
    max-width: 80%;
  }
  .column-75-l{
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .column-66-l{
    -ms-flex: 0 0 66.666666%;
    flex: 0 0 66.666666%;
    max-width: 66.666666%;
  }
  .column-60-l{
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    max-width: 60%;
  }
  .column-50-l{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .column-40-l{
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%;
  }
  .column-33-l{
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .column-25-l{
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .column-20-l{
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .column-16-l{
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .block-l{
    display: block;
  }
  .inline-block-l{
    display: inline-block;
  }
  .flex-l{
    display: -ms-flexbox;
    display: flex;
  }
  .flex-column-l{
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .hidden-l{
    display: none;
  }
  }
  @media (min-width: 1200px) {
    .contenedor-principal p{
      font-size: 1em;
    }
  .contenedor-principal h1{
        font-size: 3.5em;
    }
  .contenedor-principal p.upper{
    font-size: 1.8em;
 
    }
  
  .column-100-xl{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .column-83-xl{
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .column-80-xl{
    -ms-flex: 0 0 80%;
    flex: 0 0 80%;
    max-width: 80%;
  }
  .column-75-xl{
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .column-66-xl{
    -ms-flex: 0 0 66.666666%;
    flex: 0 0 66.666666%;
    max-width: 66.666666%;
  }
  .column-60-xl{
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    max-width: 60%;
  }
  .column-50-xl{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .column-40-xl{
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%;
  }
  .column-33-xl{
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .column-25-xl{
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .column-20-xl{
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
  }
  .column-16-xl{
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  } 
  .block-xl{
    display: block;
  }
  .inline-block-xl{
    display: inline-block;
  }
  .flex-xl{
    display: -ms-flexbox;
    display: flex;
  }
  .flex-column-xl{
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .hidden-xl{
    display: none;
  }
  }