/*
 * Breakpointes for Media Queries for Standard Devices
 * a Part of Piipe
 *
 * The breakpoints are based on non-mobile-first method
 *
 * Overview
 * *
 * * Desktop (max 1200 px)
 * * Medium Devices, Desktops (max 992 px)
 * * Small Devices, tablets (max 768 px)
 * * Extra Small Devices, Phones (max 480 px)
 * * Custom, Wearables (max 320px)
 *
*/

/* defaults for non-mobile devices BEGIN */

  .navigationbar-small,
  .collapse .form-search,
  .collapse .form-search .icon,
  .magazine-name-small {
    display: none;
  }

/* defaults for non-mobile devices END */


@media (max-width : 1200px) {
  /* Carousel BEGIN */

  /* Carousel END */

  /* Navigation BEGIN */

  /* Navigation END */

  /* Font-Adjustments BEGIN */
    h2 {
      font-size: 40px;
    }
  /* Font-Adjustments END */
}

/* Medium Devices, Desktops */
/* here are general mobile adjustments */
@media (max-width : 992px) {
  /* Carousel BEGIN */

    .carousel-control {
      display: none;
    }

  /* Carousel END */

  /* Navigation BEGIN */

      /* make the elements invisible for all mobile views */
      .collapse .form-search,
      .categories > li > sub,
      .navigationbar-full,
      .logobar,
      .navigationbar-element.magazine-name  {
        display: none;
      }

      .navbar-button:focus {
	        outline: none;
      }

      /* make the elements visible for all mobile views */
      .navigationbar-small,
      .navbar-user-small,
      .navbar-toggle,
      .navbar-toggle-right,
      .navbar-toggle-left {
        display: block;
      }

      .navbar-collapse {
          margin-left: -9px;
          margin-right: -9px;
          width: auto;
      }

      .navigationbar {
        background-color: black;
      }
      .navigationbar-small {
        border: 0;
      }

      .navigationbar .magazine-name-small {
        display: block;
        padding: 6px 0;
        border: 0;
      }

      .navigationbar .magazine-name-small > div {
        float: none;
        text-align: center;
        /*display: flex;*/
        width: 100%;
        white-space: nowrap;
      }
      .navigationbar .magazine-name-small > div > span {
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
      }
      .navigationbar .magazine-name-small > div > span > a {
        font-size: 14px;
        font-weight: 600;
        line-height: 12px;
        text-transform: uppercase;
        color: #fff;
      }

      .navbar-collapse.in, .navbar-collapse.collapsing {
        min-height: 100vh;
        /* for full screen apperience */
      }
      /*change the button on open collapse */
      ul.navbar-right .leaf a {
        color: #c0c0c0;
      }
      ul.categories, ul.navbar-right {
        clear: both;
        float: none;
      }
      .navigationbar-small ul.categories li:hover {
        background-color: #fff;
        color: #4e9ec6;
      }
      .dropdown .category {
        float: none;
      }
      #mainmenu {
        border: 0;
      }

      .navbar-toggle {
        height: 12px;
        padding-left: 9px;
        padding-top: 2px;
        margin: 0;
      }
      .navbar-toggle-left {
        padding: 0;
      }
      .responsive-padding {
        padding: 9px 9px;
      }
      .navbar-fixed-top {
        margin: 0;
        max-height: 12px;
      }
      .navbar-collapse.collapsing ul.navbar-right a, .navbar-collapse.in ul.navbar-right a {
        margin-top: 12px;
        padding-left: 18px;
      }
      /* Dropdown for sub-categories */
      ul.categories-list-wrapper-mobile {
        float: none;
        clear: both;
        /*padding-top: 12px;
    		padding-bottom: 12px;*/
        background-color: #ccc;
        font-size: 14px;
        line-height: 18px;
        text-transform: uppercase;
        font-weight: 600;
      }
      .navigationbar-small ul.categories .dropdown li {
        padding: 0;
        margin: 0;
        padding-top: 12px;
        padding-bottom: 12px;
      }
      .navigationbar-small ul.categories .dropdown li:hover {
        background-color: #fff;
        /* dirty..*/
        margin-left: -56px;
        padding-left: 56px;
      }

  /* Navigation END */

  /* Font-Adjustments BEGIN */

  /* Font-Adjustments END */

  	.page-content {
  		padding: 0 45px;
  	}
}

/* Small Devices, Tablets */
@media (max-width : 768px) {
  /* Carousel BEGIN */

    .carousel-inner > .item > div img {
      position: absolute;
      top: 0;
      left: 0;
      /*margin-left: -334px;
      margin: auto;
      height: 100vh;
      width: auto;*/
    }
    .carousel-inner > .item {
      min-height: 100%;
      width: auto;
    }

    .region.region-carousel {
      margin-right: -6px;
    }

    .carousel-inner > .item > div img {
      position: absolute;
      top: 0;
      left: 0;
    }

    .carousel-caption {
      position: relative;
      height: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: auto;
      margin: 0 auto;
      width: 75%;
      padding: 24px 24px;
      background: rgba(255, 255, 255, .8);
      color: #ffffff;
      text-align: center;
      z-index: 10;
    }
    .carousel-caption .node-title, .carousel-caption .node-title a {
      font-size: 24px;
      line-height: 32px;
      text-transform: uppercase;
      font-weight: 900;
    }

    .carousel-caption .node-origin {
      font-size: 10px;
      line-height: 24px;
    }

  /* Carousel END */

  /* Navigation BEGIN */

  /* Navigation END */

  /* Font-Adjustments BEGIN */
    h2 {
      font-size: 32px;
    }

    .carusel-caption .node-title a {
      font-size: 24px;
    }

    #subscribe-taxonomy-term-button > span {
      font-size: 12px;
      line-height: 24px;
    }

    .taxonomy-caption > h1 {
      font-size: 24px;
      top: -45%;
      top: calc(-50% - 64px/2);
      top: -webkit-calc(-50% - 64px/2);
      top: -moz-calc(-50% - 64px/2);
      line-height: 32px;
      text-transform: uppercase;
      font-weight: 900;
    }

    .node-title {
      font-size: 24px;
    }
    p, .help-block, ul > li {
      font-size: 12px;
    }

  /* Font-Adjustments END */

  /* Gallery BEGIN */


  /* Gallery END */

  	.page-content {
  		padding: 0 25px;
  	}
}

/* Extra Small Devices, Phones */
@media (max-width : 480px) {
  /* Carousel BEGIN */

  /* Carousel END */

  /* Navigation BEGIN */

  /* Navigation END */

  /* Font-Adjustments BEGIN */
    h2 {
      font-size: 24px;
    }

  /* Font-Adjustments END */

  .page-content {
  	padding: 0 20px;
  }
}