/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

   html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
    overflow-x: hidden;
  }
  
  /*
   * Remove text-shadow in selection highlight:
   * https://twitter.com/miketaylr/status/12228805301
   *
   * Vendor-prefixed and regular ::selection selectors cannot be combined:
   * https://stackoverflow.com/a/16982510/7133471
   *
   * Customize the background color to match your design.
   */
  
  ::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
  }
  
  ::selection {
    background: #b3d4fc;
    text-shadow: none;
  }
  
  /*
   * A better looking default horizontal rule
   */
  
  hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
  }
  
  /*
   * Remove the gap between audio, canvas, iframes,
   * images, videos and the bottom of their containers:
   * https://github.com/h5bp/html5-boilerplate/issues/440
   */
  
  audio,
  canvas,
  iframe,
  img,
  svg,
  video {
    vertical-align: middle;
  }
  
  /*
   * Remove default fieldset styles.
   */
  
  fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }
  
  /*
   * Allow only vertical resizing of textareas.
   */
  
  textarea {
    resize: vertical;
  }
  
  /* ==========================================================================
     Author's custom styles
     ========================================================================== */
  
    body {
     overflow-x: hidden;
     font-family: 'Poppins', sans-serif;
    }
  
    body * {
      box-sizing: border-box;
    }
  
    a {
      text-decoration: none;
    }
  
    li {
      list-style: none;
    }
  
    p {
      padding: 0;
      margin: 0;
    }
  
    ul {
      padding: 0;
      margin: 0;
    }
  
  
    @media all and (min-width:122em){
      body{
        font-size: 1vmax;
      }
    }
  
    #main-header { 
        background-color: #1E1E50;
    }
    
    #main-header .inwrap { 
        width: 90%;
        max-width: 80em;
        margin: 0 auto;
        padding: 1em 0;
        display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
    }
    
    #main-header .inwrap .logo { 
        width: 6em;
    }
    
    #main-header .inwrap ul { 
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    }
    
    #main-header .inwrap ul li { 
        font-family: 'IBM Plex Sans Hebrew', sans-serif;
    }
    
    #main-header .inwrap ul li .descarga { 
        color: #303056;
        background-color: #2A9ED3;
        padding: 0.7em 2em;
        border-radius: 0.7em;
        display: none;
    }

    @media screen and (min-width: 35em) {
        #main-header .inwrap ul li .descarga{
            display: inline-block;
            font-size: 1em
        }
    }

    #main-header .inwrap ul li a {
        color: #FFF;
    }

    #main-header .inwrap ul li a.politica{
        padding: 0;
        margin-left: 2em;
        /* width: 10.4em; */
        display: inline-block;

        font-size: 0.9em;
    }

    #main-header .inwrap ul li a.politica img {
        max-width: 6em;
        width: 100%;
    }

    #main-header .inwrap .social {
        display: none;
    }

    @media screen and (min-width: 64em){
        #main-header .inwrap ul li a.politica{
            padding: 0 2em;
            margin-left: 0;
            width: auto;
            font-size: 1em;
        }

        #main-header .inwrap .social {
            display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        }
    }

    #main-header .inwrap .social li img {
        width: 1em;
    }

    #main-header .inwrap .social li a {
        padding: 0 1em
    }
    
    main { 
    
    }
    
    main .bg { 
        background-image: url('./img/bg-lines-low.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 100%;
        background-color: #66A6DA;
    }
    
    #hero { 
        padding: 4em 0 0;
    }
    
    #hero .box { 
        background-color: #1E1F50;
        width: 90%;
        max-width: 80em;
        margin: 0 auto;
        padding: 8em 7em 7em;
        font-size: 1.1vw;
    }

    @media screen and (min-width: 35em){
        #hero .box {
            padding: 5em 7em 3em;
        }
    }

    @media screen and (min-width: 64em){
        #hero .box {
            padding: 8em 4em 3em;
            font-size: 0.8em;
            max-width: 72em;
        }
    }

    @media screen and (min-width: 80em){
        #hero .box {
            padding: 8em 5em 4em;
            font-size: 1em;
            max-width: 80em;
        }
    }
    
    #hero .box .content { 
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
            -webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
    }
    
    
    #hero .box .content > img { 
        width: 100%;
        max-width: 53em;
        opacity: 0;
        transform: translate(0, 20%);
    }
    
    #hero .box .content .slogan { 
        width: 100%;
        margin-top: 5em;
    }

    @media screen and (min-width: 35em){
        #hero .box .content {
            -webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
-webkit-box-direction: normal;

    -ms-flex-direction: row;

        flex-direction: row;
        }

        #hero .box .content > img { 
            height: 13em;
            width: auto;
        }

        #hero .box .content .slogan { 
            width: 24em;
            margin-top: 0;
        }
    }
    
    #hero .box .content .slogan img { 
        display: inline-block;
        height: 5.5em;
        margin-bottom: 1.6em;
        opacity: 0;
        transform: translate(20%, 0);
    }

    @media screen and (min-width: 35em) {
        #hero .box .content .slogan img {
            height: 2em;
            margin-right: 2em;
        }
    }

    #hero .box .content .slogan img:last-child {
        margin-bottom: 0;
    }
    
    #hero .box .logos { 
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
            margin-top: 9em;
            font-size: 2vw;
    }

    @media screen and (min-width: 35em) {
        #hero .box .logos {
            margin-top: 5em;
            font-size: 1em;
        }
    }
    
    #hero .box .logos img { 
        width: 10em;
        opacity: 0;
        transform: translate(0, 20%);
    }
    
    #objetivos { 
        position: relative;
    }
    
    #objetivos .inwrap { 
        width: 90%;
        max-width: 80em;
        margin: 0 auto;
        padding: 3em 0 12em;
    }
    
    #objetivos .inwrap h2 { 
        color: #FFF;
        background-color: #66A6DA;
        padding: 1em 2em;
        margin: 0;
        font-size: 1.1em;
        opacity: 0;
        transform: translate(20%, 0);
    }
    
    #objetivos .inwrap .swiper { 
        padding-bottom: 2em;
        opacity: 0;
        transform: translate(0, 20%);
    }

    @media screen and (min-width: 35em){
        #objetivos .inwrap {
            padding: 3em 0 16em;
        }
        #objetivos .inwrap h2 {
            font-size: 1.2em;
        }
        #objetivos .inwrap .swiper { 
            font-size: 1vw;
        }
    }

    @media screen and (min-width: 64em) {
        #objetivos .inwrap h2 {
            font-size: 1.6em;
        }
        #objetivos .inwrap {
            padding: 3em 0 22em;
        }
    }

    @media screen and (min-width: 92.5em){
        #objetivos .inwrap .swiper { 
            font-size: 1em;
        }
    }
    
    #objetivos .inwrap .swiper .swiper-wrapper { 
    
    }
    
    #objetivos .inwrap .swiper .swiper-wrapper .swiper-slide { 
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
            -webkit-box-orient: vertical;

-webkit-box-direction: normal;

    -ms-flex-direction: column;

        flex-direction: column;
    }

    @media screen and (min-width: 35em) {
        #objetivos .inwrap .swiper .swiper-wrapper .swiper-slide { 
            -webkit-box-orient: horizontal;

-webkit-box-direction: normal;

    -ms-flex-direction: row;

        flex-direction: row;
        }
    }

    #objetivos .inwrap .swiper .swiper-wrapper .swiper-slide.purple{
        background-color: #9988C0;
    }

    #objetivos .inwrap .swiper .swiper-wrapper .swiper-slide.blue{
        background-color: #27AAE1;
    }

    #objetivos .inwrap .swiper .swiper-wrapper .swiper-slide.gold{
        background-color: #FED59A;
    }
    
    
    #objetivos .inwrap .swiper .swiper-wrapper .swiper-slide .image { 
        width: 100%;
        padding: 1em 1em 0;
    }
    #objetivos .inwrap .swiper .swiper-wrapper .swiper-slide .image img{ 
        width: 100%;
    }
    
    #objetivos .inwrap .swiper .swiper-wrapper .swiper-slide .info { 
        width: 100%;
        padding: 0.5em 2em;
        display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
    }
    
    #objetivos .inwrap .swiper .swiper-wrapper .swiper-slide .info .header { 
        width: 100%;
        display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
-webkit-box-pack: end;
    -ms-flex-pack: end;
        justify-content: flex-end;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
        padding: 0em 0em 1em;
        border-bottom: 0.05em solid #1E1F50;
    }

    @media screen and (min-width: 35em) {
        #objetivos .inwrap .swiper .swiper-wrapper .swiper-slide .image { 
            width: 60%;
            padding: 1em;
        }

        #objetivos .inwrap .swiper .swiper-wrapper .swiper-slide .info { 
            width: 40%;
            padding: 0 2em 0 0.5em;
        }

        #objetivos .inwrap .swiper .swiper-wrapper .swiper-slide .info .header { 
            width: 100%;
            padding: 2em 0em 1em;
        }
    }

    #objetivos .inwrap .swiper .swiper-wrapper .swiper-slide .info .header img {
        width: 2em;
    }
    
    #objetivos .inwrap .swiper .swiper-wrapper .swiper-slide .info .text { 
        font-family: 'Titillium Web', sans-serif;
        font-weight: 700;
        color: #1E1F50;
        font-size: 1.2em;
        padding-top: 0.5em;
        padding-bottom: 1em;
    }

    @media screen and (min-width: 29em) {
        #objetivos .inwrap .swiper .swiper-wrapper .swiper-slide .info .text{
            font-size: 1.4em;
        }
    }

    @media screen and (min-width: 35em) {
        #objetivos .inwrap .swiper .swiper-wrapper .swiper-slide .info .header img{
            width: 4em;
        }
        #objetivos .inwrap .swiper .swiper-wrapper .swiper-slide .info .text{
            font-size: 2em;
        }
    }

    @media screen and (min-width: 35em) {
        #objetivos .inwrap .swiper .swiper-wrapper .swiper-slide .info .text{
            font-size: 3.5em;
        }
    }

    
    #objetivos .inwrap .swiper .swiper-wrapper .swiper-slide .info .footer { 
        padding: 1em 0.5em 1em;
        width: 100%;
        border-top: 0.05em solid #1E1F50;
        
    }

    @media screen and (min-width: 35em) {
        #objetivos .inwrap .swiper .swiper-wrapper .swiper-slide .info .footer {
            border-bottom: 0.13em solid #1E1F50;
            margin-bottom: 1.2em;
        }
    }
    
    #objetivos .inwrap .swiper .swiper-wrapper .swiper-slide .info .footer img { 
        max-width: 20em;
        width: 100%;
    }
    
    #objetivos .inwrap .swiper-pagination { 
        width: 100%;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: 0em;
        z-index: 100;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
            position: relative;
      }

      /* @media screen and (min-width: 92.5em){
        #objetivos .inwrap .swiper-pagination { 
            bottom: 5em;
        }
    } */
    
      #objetivos .inwrap .swiper-pagination .swiper-pagination-bullet{
        border-radius: 0;
        width: 32%;
        height: 0.5em;
        background-color: rgba(255, 255, 255, 0.8);
      }

      #objetivos .swiper-button-prev {
        top: 40%;
        left: 1%;
        color: #FFF
      }

      #objetivos .swiper-button-next {
        top: 40%;
        right: 1%;
        color: #FFF
      }

      @media screen and (min-width: 98em){
        #objetivos .swiper-button-prev {
            top: 40%;
            left: 5%;
            color: #FFF
          }
    
          #objetivos .swiper-button-next {
            top: 40%;
            right: 5%;
            color: #FFF
          }
    }
    
    #descarga { 
        position: relative;
    }

    #descarga .images {
        font-size: 2vw;
        opacity: 0.3;
    }

    @media screen and (min-width: 35em) {
        #descarga .images {
            font-size: 1.3vw;
            opacity: 0.7;
        }
    }

    @media screen and (min-width: 80em) {
        #descarga .images {
            font-size: 1em;
            opacity: 1;
        }
    }

    #descarga .images img{
        opacity: 0;
        transform: translate(0, 20%);
    }
    
    #descarga .cubes { 
        position:absolute;
        top: 2em;
        left: 0;
        width: 23em;
    }
    
    #descarga .maps { 
        position:absolute;
        top: 2em;
        right: 0;
        width: 23em;
    }
    
    #descarga .mind { 
        position:absolute;
        bottom: 0;
        left: 12%;
        width: 13em;
    }
    
    #descarga .cuatro { 
        position:absolute;
        bottom: 0;
        right: 6%;
        width: 21em;
    }
    
    #descarga .inwrap { 
        text-align: center;
        width: 90%;
        max-width: 40em;
        margin: 0 auto;
        padding: 3em 0;
        position: relative;
    }
    
    #descarga .inwrap .image { 
        max-width: 22em;
        margin-top: -12em;
        width: 100%;
        opacity: 0;
        transform: translate(0, 20%);
    }

    @media screen and (min-width: 35em) {
        #descarga .inwrap .image { 
            max-width: 24em;
            margin-top: -16em;
        }
    }

    @media screen and (min-width: 64em) {
        #descarga .inwrap .image { 
            max-width: 36em;
            margin-top: -19em;
        }
    }
    
    #descarga .inwrap h2 { 
        font-family: ibm plex sans,sans-serif;
        color: #1E1F50;
        font-size: 2.5em;
        line-height: 1.2em;
        margin-bottom: 0;
        margin-top: 0.3em;
        opacity: 0;
        transform: translate(0, 20%);
    }

    @media screen and (min-width: 29em) {
        #descarga .inwrap h2 { 
            font-size: 3.3em;
        }
    }

    @media screen and (min-width: 35em) {
        #descarga .inwrap h2 { 
            font-size: 4.3em;
        }
    }
    
    #descarga .inwrap .submit-form { 
        color: #fff;
        background-image: url('../img/btn-descarga.png');
        font-family: poppins,sans-serif;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 50% 50%;
        height: 5em;
        cursor: pointer;
        border: none;
        margin: 2em 0;
        background-color: transparent;
        opacity: 1;
        display: inline-block;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
            opacity: 0;
        transform: translate(0, 20%);
    }

    #descarga .inwrap .submit-form:hover {
        opacity: .9;
    }
    
    #main-footer {
        background-color: #fff
    }
    
    #main-footer .inwrap {
        width: 90%;
        max-width: 70em;
        margin: 0 auto;
        padding: 6em 0 2em;
    }
    
    #main-footer .inwrap .logos {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;

-webkit-box-direction: normal;

    -ms-flex-direction: column;

        flex-direction: column;
    }

    @media all and (min-width: 48em) {
        #main-footer .inwrap .logos {
            font-size: 0.8em;
            -webkit-box-orient: horizontal;

-webkit-box-direction: normal;

    -ms-flex-direction: row;

        flex-direction: row;
        }
    }

    @media all and (min-width: 64em) {
        #main-footer .inwrap .logos {
            font-size: 1em;
        }
    }
    
    #main-footer .inwrap .logos img:nth-child(1) {
        width:10em
    }

    #main-footer .inwrap .logos img:nth-child(2) {
        width: 9em
    }

    #main-footer .inwrap .logos img:nth-child(3) {
        width:12em
    }

    #main-footer .inwrap .logos img:nth-child(4) {
        width: 10em
    }

    #main-footer .inwrap .logos img:nth-child(5) {
        width: 8em
    }

    #main-footer .inwrap .logos img {
        margin-bottom: 2em;
    }

    @media all and (min-width: 48em) {
        #main-footer .inwrap .logos img {
            margin-bottom: 0;
        }
    }
    
    #main-footer .inwrap .social {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 3em 0;
        max-width: 38em;
        margin: 0 auto;
    }
    
    #main-footer .inwrap .social li {
    }
    
    #main-footer .inwrap .social li a {
        padding: 1em
    }
    
    @media all and (min-width: 35em) {
        #main-footer .inwrap .social li a {
            padding:2em
        }
    }
    
    #main-footer .inwrap .social li a .fa {
        font-size: 2em;
        color: grey
    }
    
    #main-footer .inwrap .copyright {
        text-align: center
    }
    
    #main-footer .inwrap .copyright p {
        font-weight: 400;
        font-size: .9em;
        color: #303056;
        margin-bottom: .3em
    }
  /* ==========================================================================
     Helper classes
     ========================================================================== */
  
  /*
   * Hide visually and from screen readers
   */
  
  .hidden,
  [hidden] {
    display: none !important;
  }
  
  /*
   * Hide only visually, but have it available for screen readers:
   * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
   *
   * 1. For long content, line feeds are not interpreted as spaces and small width
   *    causes content to wrap 1 word per line:
   *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
   */
  
  .sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    /* 1 */
  }
  
  /*
   * Extends the .sr-only class to allow the element
   * to be focusable when navigated to via the keyboard:
   * https://www.drupal.org/node/897638
   */
  
  .sr-only.focusable:active,
  .sr-only.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    white-space: inherit;
    width: auto;
  }
  
  /*
   * Hide visually and from screen readers, but maintain layout
   */
  
  .invisible {
    visibility: hidden;
  }
  
  /*
   * Clearfix: contain floats
   *
   * For modern browsers
   * 1. The space content is one way to avoid an Opera bug when the
   *    `contenteditable` attribute is included anywhere else in the document.
   *    Otherwise it causes space to appear at the top and bottom of elements
   *    that receive the `clearfix` class.
   * 2. The use of `table` rather than `block` is only necessary if using
   *    `:before` to contain the top-margins of child elements.
   */
  
  .clearfix::before,
  .clearfix::after {
    content: " ";
    display: table;
  }
  
  .clearfix::after {
    clear: both;
  }
  
  /* ==========================================================================
     EXAMPLE Media Queries for Responsive Design.
     These examples override the primary ('mobile first') styles.
     Modify as content requires.
     ========================================================================== */
  
  @media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
  }
  
  @media print,
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-resolution: 1.25dppx),
    (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
  }
  
  /* ==========================================================================
     Print styles.
     Inlined to avoid the additional HTTP request:
     https://www.phpied.com/delay-loading-your-print-css/
     ========================================================================== */
  
  @media print {
    *,
    *::before,
    *::after {
      background: #fff !important;
      color: #000 !important;
      /* Black prints faster */
      box-shadow: none !important;
      text-shadow: none !important;
    }
  
    a,
    a:visited {
      text-decoration: underline;
    }
  
    a[href]::after {
      content: " (" attr(href) ")";
    }
  
    abbr[title]::after {
      content: " (" attr(title) ")";
    }
  
    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
      content: "";
    }
  
    pre {
      white-space: pre-wrap !important;
    }
  
    pre,
    blockquote {
      border: 1px solid #999;
      page-break-inside: avoid;
    }
  
    /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
    thead {
      display: table-header-group;
    }
  
    tr,
    img {
      page-break-inside: avoid;
    }
  
    p,
    h2,
    h3 {
      orphans: 3;
      widows: 3;
    }
  
    h2,
    h3 {
      page-break-after: avoid;
    }
  }