/*
$small-range: (0em, 40em);
// $medium-range: (40.063em, 64em);
// $large-range: (64.063em, 90em);
// $xlarge-range: (90.063em, 120em);
// $xxlarge-range: (120.063em, 99999999em);

// $screen: "only screen";

// $landscape: "#{$screen} and (orientation: landscape)";
// $portrait: "#{$screen} and (orientation: portrait)";

// $small-up: $screen;
// $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";

// $medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
// $medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";

// $large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
// $large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";

// $xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
// $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";

// $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
// $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";

*/

td, h1, h2, h3, h4, h5, h6, .cD {
  word-break: break-word;
}

.menu-toggle {
  display: none;
}

/* tablets portrait */
@media only screen and (max-width: 50em) {
  html, body {
    height: 100%;
  }

  .menu-toggle {
    display: block;
  }

  body {
    font-size: 105%;
    /*overflow: scroll;*/
    /*  -webkit-overflow-scrolling: touch;*/
  }

  /* use flexbox to re-order the columns */
  .c-wrap {
    width: 100%;
  }

  /* resize header and logos */
  .h-container {
    height: 86px;
    width: 100%;
  }

  .logo-head {
    display: block;
    width: 64%;
    top: 60px;
  }

  .logo-head img {
    height: auto;
    max-width: 100%;
  }

  .linda-logo {
    padding-top: 10px;
  }

  .linda-logo img {
    width: 100px;
  }

  .three-col {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    width: 100%;
  }

  /* menu sidebar */
  .main-nav {
    background: #fff;
    border-right: 1px solid #bbb;
    box-shadow: 10px 0 10px rgba(0,0,0,0.2);
    margin-left: -999px;
    padding: 40px 0 20px;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transition: margin-left 0.2s ease-in;
    min-width: 240px;
/*     height: 100%; */
/*     overflow: scroll; */
    z-index: 2000;
    transform:translateZ(1px);
/*     -webkit-overflow-scrolling: touch; */
  }
   
  nav.main-nav ul li, .main-menu-sub {display: block;}
  .main-menu-sub {position: static;}
  nav.main-nav ul {padding-left: 25px;}
  nav.main-nav ul.main-menu-sub {padding-left: 10px; padding-right: 0; background: none;}
  nav.main-nav ul li a {padding: 5px 10px !important;}
  

  /* main column */
  .c-1 {
    box-sizing: border-box;
    margin-left: 0;

    padding: 0 0.5em 1em;
    width: 70%;
  }

  /* right sidebar */
  .c-2 {
    background: url('../images/teaserborder.png') repeat-x left bottom;
    float: none;
    overflow: hidden;
    padding-right: 1em;
    width: 30%;
  }

  .css_schalter {
    padding-left: 0;
  }



  .menu-visible .main-nav {
    margin-left: 0;
  }

  .c-1 iframe,
  .c-1 img {
    max-width: 100%;
  }

  .mainmenu {
    margin-top: 2em;
    border-radius: 0;
  }

  .mainmenu>li>a {
    box-sizing: border-box;
    width: 100%;
  }

  .mainmenu>li:first-child>a:first-child,
  .menu1>li:first-child>a:first-child:hover {
    border-radius: 0!important;
  }

  /* social media items have custom classes,
  thus we use important to just get rid of this easily
  ~code smell~*/
  .social_share_privacy_area li {
    float: none;
    display: block !important;
    height: 21px;
    margin: 0 !important;
    padding: 0 !important;
  }

  .f-container {
    box-sizing: border-box;
    padding: 0 1em;
    width: 100%;
  }

  #slider {
    width: 100%;
  }

  /* the template contains styles... and we are not allowed to change the
  template, hence the use of !important again */

  .footerText div {
    float: none !important;
  }

  .footerText ul {
    padding: 0;
    margin: 0;
  }

  .footerText ul li {
    float: none;
    padding: 0;
    margin: 0 0 0.5em;
  }

  .footerText a {
    display: block;
    background: #B4D08E;
    padding: 0.2em 0.3em;
    margin: 0;
    border-radius: 0.3em;
  }


  .menu-toggle, .page1.menu-visible .menu-toggle {
    /* default fallback */
    background: rgb(255, 255, 255) transparent;
    /* nice browsers */
    background: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    height: 1.8rem;
    left: 0.5rem;
    padding: 0 5px;
    position: absolute;
    top: 0.5rem;
    width: 2.7rem;
    z-index: 10000;
    border: none;
  }
/*
  .menu-toggle:before {
    border-top: 4px solid #f49b28;
    content: " ";
    display: block;
    width: 100%;
  }
*/

  .menu-toggle span {
    background: #f49b28;;
    display: block;
    height: 4px;
    margin: 3px 0;
    text-indent: -999px;
    z-index: 10000;
  }

  .teaser-element-rechts {
    margin: 0;
    background: none;
    box-sizing: border-box;
  }

  .teaser-telefon,
  .teaser-kontakt {
    background: none !important;
  }

  .teaser-kontakt .csc-textpic-text > div {
    margin: 0 !important;
  }

  .teaser-apo1-kontakt tr,
  .teaser-apo2-kontakt tr {
    margin-bottom: 0.5em;
    display: block;
  }

  .teaser-apo1-kontakt .td-0,
  .teaser-apo2-kontakt .td-0 {
    font-weight: 700;
  }

  .teaser-apo1-kontakt td,
  .teaser-apo2-kontakt td {
    display: block;
  }

  .teaser-left-container {
    margin: 0;
    padding: 1em 0.9em;
  }

  /* news, team, benefits, etc. */
  .pageteaser-container-image,
  .mitarbeiter-container-image,
  .news-list-item-image,
  .pageteaser-container-text,
  .mitarbeiter-container-text,
  .news-list-item-text {
    float: none;
  }

  .pageteaser-container-item,
  .mitarbeiter-container-item,
  .news-list-item {
    border-top: 1px solid #ccc;
  }

  .pageteaser-container-text,
  .mitarbeiter-container-text,
  .news-list-item-text {
    width: 100%;
  }

  #searchform label {display: none;}
  #searchform {top:115px; }
  
  #searchform input {
    width: 75%;
  }
  #suchbox {width: 170px;}
 /*
 #suchbox-trigger {
    background:#fff url("../images/lupe.png") no-repeat center;
    border: 3px solid #f49b28;
    display: block; 
    cursor: pointer;
    height: 22px;
    margin: 4px 0;
    padding: 7px;
    width: 22px;  
    text-indent: -9999px; 
    margin: 0;
    position: absolute;
    top:112px;
    right: 10px;
  }
*/
  
  /* slider */

  .slider-homepage {
    max-width: 100%;
    width: 100%;
  }
  .teaser-slider-content {
    padding-left: 30%;
    width: 70%;
  }

  /* teaser slider */
  .teaser-sliderelement-outer {
    max-width: 560px;
    width: 100%;
  }

  .homepage-slider-inner {
    max-width: 100% !important;
  }

  /* imprint */
  .page100 .contenttable .td-0,
  .page100 .contenttable .td-1 {
    display: block;
    word-break: break-all;
  }

  .page100 .contenttable .td-1 {
    margin-bottom: 0.5em;
  }

}

/* smartphones */
@media only screen and (max-width: 40em) {

  .beratungsvideos .video-item {
   width: 50%;
 }
    
    .show-mobile{display: block;}
    .show-mobile img {width: 100%; height: auto;}
    
  body {
    background-position: center -2.5em;
  }
  
    /* resize header and logos */
  .h-container {
    height: 300px !important;
    width: 100%;
  }
  .logo-head {
      width: 97px;
      left: 10px;
  }
  .page79 .h-container {
    height: 192px !important;
    }

  .three-col {
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  /* main column */
  .c-0 {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    padding: 0 1em 1em;
    width: 90%;
    clear: both;
    float: none;
  }

  /* right sidebar, gets positioned at the top */
  .c-1 {
    font-size:0.8rem; 
    padding: 0 10px;
    width: 100%;
    clear: both;
    float: none;
    margin-bottom: 20px;
    margin-top: 0 !important;
    }

  .teaser-telefon,
  .teaser-kontakt {
    display: block;
  }

  /* because the image-text content element was used we have to use this really
  shitty workaround to make it succumb to our will */
  .teaser-kontakt .csc-textpic-imagewrap {
    display: none;
  }

  .teaser-kontakt {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
  }

  .teaser-element-rechts {
    padding: 1em;
  }


  /* slider has to be somewhat responsive */
  .homepage-slider {
    height: 135px;
  }

  .homepage-slider-inner a {
    display: block;
    width: 100%;
  }

  .homepage-slider-inner img {
    max-width: 100%;
  }

  /* teaser slider */
  .teaser-sliderelement-outer {
    height: 300px;
    max-width: 100%;
  }

  .teaser-sliderelement-inner {
    background: #EFF0F0;
    height: 300px;
  }

  .teaser-slider-content {
    box-sizing:border-box;
    font-size: 1rem;
    line-height: 1.4;
    padding: 0.5em 1em;
    width: 100%;
  }

  .teaser-slider-overlay-img {
    display: none;
  }

  .teaser-slider-icon {
    bottom: -20px;
    top: auto;
  }

  .teaser-slider-overlay {
    background: none;
  }

  .slider-homepage-nav {
    width: 100%;
    margin-right: 0;
  }


  .single-leistung-inner {
    padding-left: 0;
  }

  /* news */

  .dl-text img,
  .news-single-img {
    float: none;
  }

  /* forms */
  .bz,
  .werte,
  .bzgr,
  .bzk,
  .wk {
    width: 100%;
    word-break: break-word;
  }

  .fmittel {
    display: block;
    width: 100%;
  }

  /* linda benefits */

  #benefits {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  #benefits li {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;

    padding: 0 !important;
    margin: 0 0 1em !important;
  }

  /* games */

  .lindaSpiele h2 a {
    width: 100% !important;
  }
  
  .page1 h1 {
      top:-110px; 
      font-size: 25px;
    }
  .page1 .one-col p a {
    display: table;
    left: 0;
    top: -10px;
    padding: 5px 10px;
    }
  .page1 .menu-toggle{    
    /* default fallback */
    background: rgb(63, 65, 68) transparent;
    /* nice browsers */
    background: rgba(63, 65, 68, 0.8);
    }
    
    .page79 .h-container-outer { 
      background:#ddd;
      background:url(../images/home-bckg-mobile.jpg) center top no-repeat; 
    }

  .footer-hpboxes {width: 90%; padding: 0 10px;}
  footer.f-container-outer {position: static;}
  body.page1 footer.f-container-outer {position: absolute;}
  .hp-teaser {margin: 0 0 20px 0; width: 90%; display: block;}
  .slogan {left: 35px; top:35px; font-size: 18px; margin: 0;}
  .css_schalter {display: none;}
  .kontakt-container {margin-bottom: -5px;}
  .kontakt-container, .oeffnungszeiten-container {padding: 0; }
  .teaser-oeffnungszeiten {background: none;}
  
  .team-container .c-3-0-inner, .team-container .c-3-1-inner, .team-container .c-3-2-inner, .pageteaser-container-item {width: 100%;}
  iframe {width: 100% !important;}
  DIV.csc-textpic .csc-textpic-imagewrap IMG {width: 100%; height: auto;}
  nav.top-nav {right: 10px;}
  .main-menu-sub {background: none;}
  .f-container ul {text-align: left; padding-left: 0;}
  .f-container ul li {display: block; margin: 0;}
/* * {border: 1px solid red;} */
}