/* MEDIA QUERIES ==================================================================================================*/



/* =============================================================================================================== */
/* MEDIA QUERY 768px min
/* =============================================================================================================== */

@media (min-width: 768px) {

  .duo-card .stripe-red {
    border-left: 1px solid #c7c7c7;
  }

.layout-aside .centered{
    grid-column: 2 / 4;
  }

}

/* =============================================================================================================== */
/* MEDIA QUERY 1000px max
/* =============================================================================================================== */

@media (max-width: 1000px) {

  body {
    font-size: 90%;
  }
  
  .content-wrapper {
    grid-template-columns: [edge-left] 0.2fr [core-start] 8fr [core-center] 8fr [core-end] 0.2fr [edge-right];
  }  

  .quicknav-content {
    grid-template-columns: 1fr 13.5em 13.5em 1fr;
    justify-items: center;
    grid-gap: 16px;
    padding: 1em 0px 2em 0;
    margin: 0;
  }  

  .quicknav-content h1 {grid-column: 1 / 5;}

  .quicknav-content h2 {
    font-size: 1.8em;
    align-self: center;
    margin: 0;
  }

  .quicknav-content img {
    max-height: 7.8em;
    align-self: center;}

  h2.qn-coach, h2.qn-team, h2.qn-psycho {grid-column: 1; justify-self: right; text-align: right;}

  a.qn-coach, a.qn-team, a.qn-psycho {grid-column: 2; justify-self: right; text-align: right;}

  a.qn-paar, a.qn-super, a.qn-massage {grid-column: 3; justify-self: left; text-align: left;}

  h2.qn-paar, h2.qn-super, h2.qn-massage {grid-column: 4; justify-self: left; text-align: left;}

  a.qn-coach, a.qn-paar, h2.qn-coach, h2.qn-paar {grid-row: 2;}

  a.qn-team, a.qn-super, h2.qn-team, h2.qn-super {grid-row: 3;}

  a.qn-psycho, a.qn-massage, h2.qn-psycho, h2.qn-massage {grid-row: 4;}

  .footer-inner {
    grid-template-columns: [edge-left] 0.2fr [core-start] 8fr [core-center] 8fr [core-end] 0.2fr [edge-right];
  }
/*   footer {  
  grid-template-columns: [far-left] 8fr [center-left] 4em [center] 4em [center-right] 8fr [far-right];
} */

  .top-bar img {
    width: 13em;
    max-width: 45vw;
  }


}









/* =============================================================================================================== */
/* MEDIA QUERY 767px
/* =============================================================================================================== */



@media (max-width: 767px) {  

  header, nav, main, footer, .quicknav-wrapper {
  grid-template-columns: [far-left] 0fr [content-start] 1fr [content-end] 0fr [far-right]; 
  }

  .topnav li {
    margin-bottom: 1em;
  }

  .hamburger-icon-on {
    box-shadow: 3px 3px 5px #000000ab;
    border-radius: 40px;
    background-color: white;
    opacity: 0.8;
    filter: hue-rotate(120deg);
  }


  .header-img {
    margin: 0;
    border-top: 6px solid #c31313;
    border-left: none;
    border-right: none;
  }  


  .ca-teaser {
    grid-template-columns: 1fr;
  }

  /*.layout-2c-off .ca-teaser .ca-img { */
  .ca-teaser .ca-img {
    grid-column: 1;
    grid-row: 1;
    min-width: 42vw;
    width: 15em;
    max-width: 80vw;
    justify-self: center;
    z-index: 5;
  }


  .bracket-bg {
    display: initial;
    grid-column: 1;
    grid-row: 1;
    width: 95%;
    justify-self: center;
    align-self: center;
    z-index: 1;
    opacity: 0.7;
  }


  /*.layout-2c-off .ca-teaser .ca-title { */
  .ca-teaser .ca-title {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
  }

  /*.layout-2c-off .ca-teaser h1, #credo h1 { */
  .ca-teaser h1 {
    /* margin-bottom: 0.2rem; */
    /* margin-top: 1em; */
    align-self: end;
    text-align: left;
  }

  /*.layout-2c-off .ca-teaser .tri-card-text { */
  .ca-teaser .tri-card-text {
    grid-column: 1;
    grid-row: 3;
  }


  #intro .duo-card .left, #intro .duo-card .right {
    display: grid;
    margin: 0;
    grid-column: 1 / -1;
    justify-items: center;
  }

  #intro .duo-card .right {
      margin-top: 2em;
  }

  .duo-card.impress-data .left, .duo-card.contact-data .left {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  .duo-card.impress-data .right, .duo-card.contact-data .right {
    grid-column: 2 / 4;
    grid-row: 3;
  }

  .impress-data .white-card.left, .impress-data .white-card.right, .impress-data .separator, .contact-data .white-card.left, .contact-data .white-card.right {
    grid-row: initial;
  }

  .impress-data .white-card.left, .impress-data .white-card.right, .contact-data .white-card.left, .contact-data .white-card.right {
    grid-column: 1 / 4;
  }

  .impress-data .white-card.right, .contact-data .white-card.right {
    /* grid-row: 3; */
    margin-top: 1em;
  }


  #intro .white-card.left p,  #intro .white-card.right p {
    width: 100%;
    /* padding: 0.5em 0 0.5em 0; */
  }

  .tri-card {
    grid-column: 1 / 4;
    grid-template-columns: 7.8rem 2vw 1fr;
    grid-template-rows: auto;
    margin-left: 1em;
    margin-right: 1em;
    padding-right: 0;
  }
  
  .tri-card img {
    grid-row: 2;
  }

  .column-left {
    grid-column: 2 / 4;
  }

  .column-right {
    grid-column: 2 / 4;
  }
/*
  .column-left.centered-image, .column-right.centered-image {
    justify-self: center;
  }
*/
  .column-left img, .column-right img {
    justify-self: center;
  }

  .column-left h1, .column-left h2, .column-left h3, 
  .column-right h1, .column-right h2, .column-right h3 {
    text-align: center;
  } 
  
  .quicknav-wrapper {    
    background-image: url('/site/assets/files/background patterns/2019/brushed_alu_dark.png');
  }

  .quicknav-content {
    grid-template-columns: 0.5fr 1fr 1fr 0.5fr;
    grid-gap: 1em;
    text-align: center;
    position: relative;
    justify-items: center;
    justify-content: center;
    padding: 1em 0 1em 0;
  }  

  .quicknav-deko-2 {
    right: -26em;
    top: -4.6em;
    width: 55em;
    opacity: 0.3;
  }

  .quicknav-deko-1, .quicknav-deko-3 {
    display: none;
  }

.quicknav-deko-2 img {
  width: 60em;
}

  .quicknav-content h1 {
    grid-column: 1 / 5;
    margin: 0.2em 0 0em 0;
    padding: 0 1em 0 1em;
    text-align: center;
    justify-self: center;
  }

  .quicknav-content h2 {
    font-size: 1.9em; 
    align-self: start; 
    justify-self: center;
    text-align: center;
  }

  .quicknav-content img {
    /* max-height: 28vw */; 
    max-height: initial;
    height: initial;
    max-width: 30vw;
    padding: 0.7em; 
    align-self: center; 
    justify-self: center;}

  .quicknav-content a {
    /* background-image: url("/site/assets/files/background patterns/new/cardboard.png"); */ 
    align-self: center; 
    justify-self: center;
    border-radius: 10px;
    padding: 0.1em;
    box-shadow: 3px 3px 16px 1px rgba(0, 0, 0, 0.3);
  }

/* new february*/
  h2.qn-coach, h2.qn-team, h2.qn-psycho, h2.qn-paar, h2.qn-super, h2.qn-massage {
    padding-bottom: 0.3em;
/*     margin-left: 5px;
margin-right: 5px; */
    font-size: 1.5em;
  }



  a.qn-coach, a.qn-team, a.qn-psycho {grid-column: 2; justify-self: right;}

  h2.qn-coach, h2.qn-team, h2.qn-psycho {grid-column: 1 / 3; width: 97%;/* margin-left: 5px; */}

  a.qn-paar, a.qn-super, a.qn-massage {grid-column: 3; justify-self: left;}

  h2.qn-paar, h2.qn-super, h2.qn-massage {grid-column: 3 / 5; width: 97%;/* margin-right: 5px; */}

  a.qn-coach, a.qn-paar {grid-row: 2;}

  h2.qn-coach, h2.qn-paar {grid-row: 3;}

  a.qn-team, a.qn-super {grid-row: 4;}

  h2.qn-team, h2.qn-super {grid-row: 5;}

  a.qn-psycho, a.qn-massage {grid-row: 6;}

  h2.qn-psycho, h2.qn-massage {grid-row: 7;}

  .column-1 {
      grid-column: core-start / span 2;
      grid-row: 3;
  }
  
  .column-2 {
    grid-column: core-start / span 2;
    grid-row: 4;
    margin: 0;
  }

  .intro-img {
    grid-row: 3 / span 2;
    grid-column: 1 / -1;
    align-self: center;
  }

  #credo .column-2 {
    grid-column: 2 / span 2;
    /* grid-template-rows: 4fr 1fr 1fr;*/  
  }

  .impress table, .contact table {
    width: 95%;
  }

  .impress td {
    font-size: 0.9em; 
  }


  footer .footer-line {
    display: none;
  }

  

}




/**
 * CSS Modal
 * Modal as reusable module
 * http://drublic.github.com/css-modal
 *
 * @author Hans Christian Reinl - @drublic
 * @version 1.0.4
 *
 * Usage:
 *    selector {
 *        @extend %modal;
 *    }
 */
/*
 * Configuration
 */
 
html {
  overflow-y: scroll;
}

.has-overlay {
  overflow: hidden;
}
.has-overlay > body {
  height: 100%;
  overflow-y: scroll;
}

.semantic-content {
  -webkit-transform: translate(0, 100%);
  -moz-transform: translate(0, 100%);
  -o-transform: translate(0, 100%);
  -ms-transform: translate(0, 100%);
  transform: translate(0, 100%);
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  opacity: 0;
  color: #222;
  line-height: 1.3;
  display: none\9;
}
.semantic-content:target {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  opacity: 1;
}
.is-active.semantic-content {
  display: block\9;
}
.semantic-content:target {
  display: block\9;
}
.semantic-content .modal-inner {

  position: relative;
  top: 1%;
  /* left: 30%; */
  z-index: 20;
  margin: 0 auto;
  width: 58%;
  min-width: 42em;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: 2px;
  background: #fff;
  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}
.semantic-content .modal-inner > img,
.semantic-content .modal-inner > video,
.semantic-content .modal-inner > iframe {
  width: 100%;
  height: auto;
  min-height: 300px;
}

.semantic-content .modal-content img.soe-image {
  display: initial;
  width: auto;
  max-width: 100%;
  margin-bottom: 5px;
  margin-left: 1vw;
  min-width: initial;
  max-width: 15em;
  float: right;
  border: 2px solid #e8e8e8;
}

.semantic-content .modal-header {
  display: block;
  background: #a22828;  
  border-bottom: 1px solid #dddddd;
  /* padding: 0 1.2em; */
  text-align: center;
}

/* .semantic-content .modal-header h1 {
  color: white;
  font-size: 1.7em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding: 0.5em 0.3em;
} */

.semantic-content .modal-content h1 {
  color: #ab2c2c;
  font-size: 1.8em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.semantic-content .modal-content h2 {
  color: #636363;
  font-size: 1.2em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.semantic-content .modal-content h3 {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  clear: right;
  color: #616161;
  font-size: 1em;
  font-weight: normal;
  text-transform: uppercase;
}

.semantic-content .modal-content {
  max-height: 400px;
  max-height: 82vh;
  border-bottom: 1px solid #dddddd;
  padding: 15px 5vw;
  overflow-x: hidden;
  overflow-y: auto;
}

.semantic-content .modal-content p {
  font-size: 1em; 
  margin-top: 0.3em;
  margin-bottom: 0.3em;
  padding: 0 2em 0 2em;
}

.semantic-content .modal-content > * {
  max-width: 100%;
}

.semantic-content .modal-content h3:first-of-type {
  color: #222222;
  border-bottom: 1px solid #eee;
  padding-top: 0.7rem;
  padding-bottom: 0.5rem;
}

.semantic-content .modal-content p:first-of-type {
  padding: 0;
}

.semantic-content .modal-footer {
  border-top: 1px solid white;
  padding: 0 0 10px;
  background: #a22828;
  /* border-radius: 2px; */
}
.semantic-content .modal-close {
  display: block;
  text-indent: -100px;
  overflow: hidden;
}
.semantic-content .modal-close:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  /* background-image: url("/site/assets/files/background patterns/redox_02.png"); */
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AAAAAMwA0QDNTiUx4gAAAABJRU5ErkJggg==");
}
.semantic-content .modal-close:after {
  content: '\00d7';
  position: absolute;
  top: 10px;
  /* left: 50%; */
  right: 10px;
  z-index: 20;
  margin-left: 285px;
  background: #fff;
  border-radius: 2px;
  padding: 2px 8px;
  font-size: 1.2em;
  text-decoration: none;
  text-indent: 0;
}

/* ======================================================================================================================== */

/* ======================================================================================================================== */



@media screen and (max-width: 1500px) and (min-width: 768px) {
  .content-wrapper.layout-aside {
    grid-column: content-start / content-end;
    display: grid;
    grid-template-columns: [edge-left] 1.7fr [core-start] 8fr [core-center] 8fr [core-end] 0fr [edge-right];
    grid-gap: 1rem;
    margin-bottom: 2rem;  
  }

  .top-line {
      grid-column: 1 / -2;
      left: 0;
      grid-row: 1;
      top: -4.2rem;
      width: 100%;
  }

  .side-image {
      left: 0.5em;
      grid-column: 1;
      /* width: 4.8rem; */
  }

}

/* ======================================================================================================================== */

/* ======================================================================================================================== */




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

  .contact-image{
    display: none;
  }

  .content-wrapper.layout-aside {    
    grid-template-columns: [edge-left] 1fr [core-start] 4fr [core-center] 4fr [core-end] 0.1fr [edge-right];
  }

  .semantic-content .modal-inner {
    width: auto;
    margin: 0 3%;
    min-width: initial;
  }

  .semantic-content .modal-close {
    left: auto;
    right: 33px;
    margin-left: 0;
  }

  .semantic-content .modal-close:after {
    margin-left: 40%;
  }

  .soe-image.filler-img {
    display: none;
  }

  .side-image{ 
    /* max-width: 11vw;
    margin-left: 1em; */

    max-width: 100%;
    margin-left: 0.5em;
    margin-right: 0.5em;
  }

  .soe-wrapper {
    display: grid;
    grid-template-columns: 4fr;
    grid-template-rows: auto auto auto auto 3rem;
  }

  .soe-wrapper.last-row {
    /* removes spacer row from grid */
    grid-template-rows: auto auto auto auto;
  }

  .left.soe-card, .left.soe-title, .left.soe-description, .left.soe-timing, .left.soe-image, .left.fadeout-white { grid-column: 1; }
  .right.soe-card, .right.soe-title, .right.soe-description, .right.soe-timing, .right.soe-image, .right.fadeout-white { grid-column: 1; }

/*   .left.soe-card { grid-row: 3; }
.right.soe-card { grid-row: 6; } */

  .left.soe-card { grid-row: 1 / span 4; } 
  .right.soe-card { grid-row: 6 / span 4;} 

  .left.soe-image { grid-row: 1 / span 4; } 
  .right.soe-image { grid-row: 6 / span 4;} 

  .left.soe-title { grid-row: 2; }
  .right.soe-title { grid-row: 7; margin-top: 1em; } 

  .left.soe-description {grid-row: 3;}
  .right.soe-description {grid-row: 8;}

  .left.fadeout-white { grid-row: 3; }
  .right.fadeout-white { grid-row: 8; }

  .left.soe-timing {grid-row: 4;}
  .right.soe-timing {grid-row: 9;}




  .event-wrapper {
  display: grid;
  grid-template-columns: 2.9fr 7fr;
  margin: 0 0 1em 0;
  }

  .left.event-title { grid-column: 1 / 3; }
  .left.event-description {grid-column: 1 / -1}
  .right.event-title, .right.event-description, .right.event-fill { grid-column: 1 / 3; }


  .event-title {
  color: white;
  margin: 0;
  text-align: center;
  padding: 0.6rem;
  background-color: #bf2828;
  }

  .event-description {
  margin: 0;
  /* display: flex; */
  background-color: white;
  padding: 0.6rem;
  line-height: 1.3em;
  border-bottom: 1px solid gray;
  }



  .event-fill {
    display: none;
  }

  .left.event-title { grid-row: 1; }
  .right.event-title { grid-row: 4; margin-top: 1em; } 

  .left.event-date { grid-row: 3; }
  .right.event-date { grid-row: 6; }

  .left.event-location { grid-row: 3; } 
  .right.event-location { grid-row: 6;} 

  /* .right.event-fill {grid-row: 4 / span 3; margin-top: 1em;} */

  .left.event-date {grid-column: 1;}
  .right.event-date {grid-column: 1;}

  .left.event-location {grid-column: 2;}
  .right.event-location {grid-column: 2;}

  


    /*  floating modal image to right, allowing text up*/
  .semantic-content .modal-content img.soe-image {
    display: block;
    width: auto;
    max-width: 100%;
    /* margin: 0;
    margin-left: 1vw; */
    min-width: initial;
    max-width: 15em;
    /* float: left; */
    border: 2px solid #e8e8e8;
  }

  /* footer .right-line {grid-row: 2 / 4;} */

}





/* ======================================================================================================================== */

/* ======================================================================================================================== */

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

  #intro.content-wrapper.layout-aside {    
    grid-template-columns: [edge-left] 2fr [core-start] 4fr [core-center] 4fr [core-end] 0.5fr [edge-right];
  }

  .tri-card {
    grid-column: 1 / 5;
  }

  /*  moving modal image to center, pushing text down*/
  .semantic-content .modal-content img.soe-image {
    display: block;
    width: auto;
    max-width: 100%;
    margin: auto;
    margin-bottom: 1em;
    /* border-radius: 0.4em 3em 0 3em; */
    min-width: initial;
    max-width: 15em;
    float: initial;
    border: 2px solid #e8e8e8;
  }

  .semantic-content .modal-content p {
      padding-right: 5px;
  }


}

/* ======================================================================================================================== */

/* ======================================================================================================================== */



@media screen and (max-width: 30em) {
  .semantic-content {
    -webkit-transform: translate(0, 400px);
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s;
    -moz-transition: -moz-transform .25s ease-in-out, opacity 1ms .25s;
    -o-transition: -o-transform .25s ease-in-out, opacity 1ms .25s;
    -ms-transition: -ms-transform .25s ease-in-out, opacity 1ms .25s;
    transition: transform .25s ease-in-out, opacity 1ms .25s;
    display: block;
    height: 100%;
    bottom: auto;
  }
  .semantic-content:target {
    -webkit-transition: -webkit-transform .25s ease-in-out;
    -moz-transition: -moz-transform .25s ease-in-out;
    -o-transition: -o-transform .25s ease-in-out;
    -ms-transition: -ms-transform .25s ease-in-out;
    transition: transform .25s ease-in-out;
  }
  .semantic-content:before {
    background-color: #27aae2;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#27aae2), to(#1c9cd3));
    background-image: -webkit-linear-gradient(top, #27aae2, #1c9cd3);
    background-image: -moz-linear-gradient(top, #27aae2, #1c9cd3);
    background-image: -o-linear-gradient(top, #27aae2, #1c9cd3);
    background-image: linear-gradient(to bottom, #27aae2, #1c9cd3);
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    height: 3em;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  }
  .semantic-content .modal-inner {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 3em;
    height: 100%;
    overflow: scroll;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .semantic-content .modal-content {
    max-height: none;
  }
  .semantic-content .modal-close {
    right: auto;
    text-decoration: none;
  }
  .semantic-content .modal-close:before {
    display: none;
  }
  .semantic-content .modal-close:after {
    content: attr(data-close);
    top: 0.4em;
    left: 1em;
    z-index: 40;
    margin-left: 0;
    font-size: 1em;
    padding: 0.5em 1em;
  }
}
@media screen and (max-height: 46em) and (min-width: 30em) {
  .semantic-content .modal-content {
    max-height: 340px;
    max-height: 77vh;
  }
}
@media screen and (max-height: 36em) and (min-width: 30em) {
  .semantic-content .modal-content {
    max-height: 265px;
    max-height: 65vh;
  }
}

@media screen and (min-width: 30em) {
  .semantic-content {
    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    transition: opacity 0.4s;
  }
}