@media only screen and (max-width: 1200px) {

  aside.notification > .notification_inner{
    width: 100%;
    text-align: center;
  }

  header > .header__inner{
    width: 100%;
  }

    header > .header__inner > nav{
      width: calc(100% - 20px);
    }

    header > .header__inner > nav > ul > li:not(:last-child){
      display: none;
    }

    header > .header__inner > nav > ul > li:last-child{
      display: block;
      position: absolute;
      top: 10px;
      right: 0;
    }

      header > .header__inner > nav > ul.expanded > li:last-child{
        top: -65px;
      }

    header > .header__inner > nav > ul > li:nth-last-child(2){
      display: block;
      position: absolute;
      top: 10px;
      right: 55px;
    }

      header > .header__inner > nav > ul.expanded > li:nth-last-child(2){
        top: -65px;
      }

    header > .header__inner > nav > ul > li:last-child a.mobile_burger{
      font-size: 20pt;
      padding-left: 15px;
      padding-right: 15px;
    }

    header > .header__inner > nav > ul.expanded{
      display: block;
      background-color: #fff;
      position: relative;
      top: 10px;
      padding: 5px 20px;
      border-radius: 10px;
      -moz-box-shadow: 0 3px 10px 0px rgba(0,0,0,0.2);
      -webkit-box-shadow: 0 3px 10px 0px rgba(0,0,0,0.2);
      box-shadow: 0 3px 10px 0px rgba(0,0,0,0.2);
    }

      header > .header__inner > nav > ul.expanded > li{
        display: block;
      }

        header > .header__inner > nav > ul li:not(:last-child) > a:not(.btn){
          color: #000;
        }

  header > .header__inner > nav > ul li > a.forecast span.statusText span.statusWind{
    display: none;
  }

  main > div.hero{
    animation: animatedBackground 60s linear infinite alternate;
    padding: 150px 0;
  }

    main > div.hero > .hero__inner{
      width: calc(100% - 40px);
      padding-left: 20px;
      padding-right: 20px;
    }

      main > div.hero > div.hero__inner h2{
        font-size: 15pt;
      }

      main > div.hero > div.hero__inner h1{
        font-size: 50pt;
      }

      main > div.hero > div.hero__inner a.btn{
        font-size: 10pt;
      }

        main > div.hero > div.hero__inner a.btn::after {
          top: 12px;
        }

      main > div.hero > div.hero__inner > .inner_sailplan > .ticker .ticker-list .ticker-item span.logo {
        display: none;
      }

      main > div.hero > div.hero__inner > .inner_sailplan > .ticker .ticker-list .ticker-item span.timestamp {
        font-size: 9pt;
      }

        main > div.hero > div.hero__inner > .inner_sailplan > .ticker .ticker-list .ticker-item span.timestamp > i{
          display: none;
        }

      main > div.hero > div.hero__inner > .inner_sailplan > .ticker .ticker-list .ticker-item span.destinations {
        font-size: 11pt;
      }

      main > div.hero > div.hero__inner > .inner_sailplan > .ticker .ticker-list .ticker-item span.status {
        width: 6px;
        border-radius: 3px;
      }

  main > .main__inner{
    width: 100%;
    padding: 0;
  }

    main > .main__inner .inner__row {
        display: block;
    }

    main > .main__inner .inner__row:not(:last-child){
      margin-bottom: 50px;
    }

      main > .main__inner .inner__row > .inner__col {
        width: calc(100% - 60px);
        float: none;
      }

        main > .main__inner .inner__row > .inner__col.content_image > img {
          border-radius: 20px 40px;
        }

  footer > .footer__inner{
    width: calc(100% - 50px);
    margin: 0 auto;
  }

/* SCHEDULE */

  .schedules__container > .container_card > .card_header{
    display: block;
  }
    .schedules__container > .container_card > .card_header > .header_vessel{
      width: 100%;
    }
    .schedules__container > .container_card > .card_header > .header_preferences{
      width: 100%;
      text-align: left;
      padding: 20px 0 0 0;
    }
      .schedules__container > .container_card > .card_header > .header_preferences > span.preference_status{
        position: absolute;
        right: 4px;
        top: 6px;
        font-size: 10pt;
      }
  .schedules__container > .container_card > .card_body{
    display: block;
  }
    .schedules__container > .container_card > .card_body > .body_departure{
      width: 100%;
      text-align: center;
    }
    .schedules__container > .container_card > .card_body > .body_distance{
      width: 100%;
      margin: 10px 0 20px 0;
      text-align: center;
    }
    .schedules__container > .container_card > .card_body > .body_arrival{
      width: 100%;
      text-align: center;
    }

  .d-none-m {
    display: none!important;
  }

  .d-block-m {
    display: block!important;
  }

}