/* 
    
    change lang order V
    footer not sticky and in list when lower then 420px V
    remove card on mobile V
    Check if you can adjust iframe height in advance
    Check HTML Language V
     */


    /* FONTS */

    @font-face {
        font-family: "DINPRO";
        src: url("../fonts/DINPro.otf");
      }
  
      @font-face {
        font-family: "DINPRO";
        src: url("../fonts/DINPro-Medium.otf");
        font-weight: 500;
      }
  
      @font-face {
        font-family: "DINPRO";
        src: url("../fonts/DINPro-Bold.otf");
        font-weight: bold;
      }
  
      /* GENERAL */
  
      body {
        margin: 0px;
        background-image: url('../img/background-img@2x.png');
        background-repeat: no-repeat;
        background-position: -500px 50px;
        background-size: 1050px 850px;
        min-height: 100vh;
        position: relative;
      }
  
      iframe {
        width: 683px;
      height: 380px;
      overflow-y: hidden;
      border: 0;
      -ms-transform: scale(0.46);
      -moz-transform: scale(0.46);
      -o-transform: scale(0.46);
      -webkit-transform: scale(0.46);
      transform: scale(.46);
      -ms-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      -o-transform-origin: 0 0;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      }

      nav {
        width: 100%;
        text-align: center;
      }
  
      a {
        text-decoration: none;
        color: #172b4d;
        margin-bottom: 6px;
        font-size: .75rem;
      }
  
      p {
        line-height: 1.4;
        color: #172b4d;
        padding: 0;
  
        margin: 0;
        margin-bottom: 55px;
        font-family: DINPRO;
        font-size: 18px;
      }
  
      /* HEADER */
  
      .header {
        
        line-height: 1.4;
        font-size: 1rem;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 10px 10px 0 10px;
        color: #fff;
        overflow: hidden;
        height: 183px;
        margin-bottom: 10px;
        background-image: url('../img/header.png');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        padding: 0 34px;
      }
  
      .title-desktop {
        margin-top: 12px;
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
      }
  
      h1 {
        text-transform: uppercase;
        color: #172B4D;
        font-size: 25px;
        font-family: "DINPRO";
        font-weight: bold;
      }
  
      .topbar {
        display: flex;
        background-color: #172B4D;
        justify-content: space-between;
        flex-direction: column;
     }
  
      .logo {
        position: absolute;
        left: 34px;
        top: 20px;
        padding: 0;
        z-index: 2;
      }
  
      .logo img {
        width: 82px;
      }
  
      /* LANG SWITCH */
  
      .lang-switch-container {
        font-size: 1rem;
        color: #172b4d;
        display: flex;
        justify-content: flex-end;
        height: 50px;
        line-height: 29px;
      }
  
      .lang-switch {
        display: flex;
        font-family: DINPRO;
        font-size: 14px;
      }
  
      .lang-switch a {
        line-height: 29px;
        list-style-type: none;
        text-decoration: none;
        color: #fff;
      }
  
      .lang-switch a.active {
        font-weight: bold;
      }
  
      .lang-switch li {
        border-right: solid 1px #fff;
        display: flex;
        align-items: center;
      }
  
      .lang-switch li:last-child{
        border: none;
      }
  
      .lang-switch li span {
        margin: 0;
      }
  
      .lang-switch li a {
        padding: 16px;
      }
  
      .main {
        padding: 40px 34px;
      }
  
      .logo a {
        padding: 0;
        margin: 0;
      }
  
      /* COLUMNS */
  
      .row {
        display: flex;
        justify-content: space-between;
      }
  
      .col-6 {
        width: 100%;
      }
  
      /* CARDS */
  
      .card-container {
        display: flex;
        justify-content: flex-end;
      }
  
      .card {
        background: #F2F5F8;
        padding: 16px;
        border-radius: 15px;
        max-width: 350px;
        box-sizing: border-box;
        -webkit-box-shadow: 0px 3px 9px 2px rgba(0,0,0,0.5); 
        box-shadow: 0px 3px 9px 2px rgba(0,0,0,0.2);
      }
      
      .card-body {
        background: #fff;
        height: 380px;

      }

      .card-body img {
        display: block;
        margin: 0 auto;
      }

      .card iframe {
        display: block;
        background: #fff;
      }
  
      .cards-img {
        display: flex;
        justify-content: center;
      }
  
      /* NAVIGATION FOOTER */
  
      .navigation-footer {
        display: flex;
        justify-content: center;
        background-color: #172B4D;
        position: absolute;
        bottom: 0;
      }
  
      .navigation {
        list-style-type: none;
        display: flex;
        text-transform: uppercase;
        margin: 0;
        color: #FFF;
      }
  
      body {
        position: relative;
      }
  
      .navigation li a {
        color: #FFF;
        font-size: 16px;
        padding: 16px;
        display: block;
        margin: 0;
        font-family: DINPRO;
        font-weight: 500;
      }
  
      .title-mobile {
        display: none;
      }
  
      .col-6 {
          
        margin-bottom: 48px;
      }
  
      /* MEDIA QUERIES */
  
      @media (max-width: 768px) {
  
        body {
          background-position: 0px 50px;
        }
  
        .main {
          padding-top: 0;
        }
  
        .title-desktop {
          display: none;
        }
  
        .title-mobile {
          display: block;
          position: relative;
        }
  
        .title-mobile::before {
          content: '';
          width: 100px;
          height: 3px;
          background: #2D92D4;
          position: absolute;
          bottom: -5px;
        }
  
        .row {
          display: block;
          margin-bottom: 300px;
        }
  
        .card-container {
          justify-content: center;
          margin-bottom: 48px;
        }
  
        .card {
          max-width: 100%;
          padding: 0;
          -webkit-box-shadow: 0px 3px 9px 2px rgba(0,0,0,0); 
          box-shadow: 0px 3px 9px 2px rgba(0,0,0,0);
          background: rgba(0,0,0,0);
        }
  
        .col-6:last-child {
          display: none;
        }
        
        .navigation {
          padding: 0;
        }
  
        .navigation li a {
          font-weight: 500;
          font-size: 10px;
          padding: 16px 8px;
        }
  
      }
  
      @media (max-width: 400px) {
      
        .navigation {
          flex-direction: column;
        }
  
      }