/*
************************************************************
Styles:     flix//theme
Project:    flix-Base - Main CSS
Autor:      Yannik Boost
Copyright:  (c) 2015 interaktiv manufaktur
Website:    www.interaktiv-manufaktur.de
************************************************************
*/
@media only screen and (max-width: 760px) {



   /*****************************************************************
   *********** Document
   ******************************************************************/

   /*****************************************************************
   *********** Allgemeine Selectoren
   ******************************************************************/

   /*****************************************************************
   *********** Header
   ******************************************************************/
   .mainheadline{
      font-size: 35px !important;
   }
   
   .logo-img {
    height: auto;
    width: 65%;
}
   /*****************************************************************
   *********** Footer
   ******************************************************************/

  .logo-footer {
    width: 50%;
    margin: auto;
    padding-bottom: 50px;
}
   /*****************************************************************
   *********** Content
   ******************************************************************/

   /*#### gallery-list #####*/


   .teaser-start .right-column {
       float: none;
       height: auto;
       overflow: hidden;
       padding-right: 0px !important;
       width: 100%;
       margin: 0;
   }
   
   .teaser-start .left-column {
       float: none;
       height: auto;
       overflow: hidden;
       padding-right: 0px !important;
       width: 100%;
       margin: 0;
   }

   #detail-container .contentbox {
      display: grid;
      grid-column: 1fr;
   }
   
   .teaser-start img {
      width: auto;
   }

   .teaser-start p {
         width: 85%;
   }   
   
   /*****************************************************************
   *********** Seitenelemente
   ******************************************************************/

   #info-canvas {
      width: 100%;
      margin: 0px 0px;
   }
   #content-canvas {
      width: 100% !important;
      margin-left: 0px !important;
      margin-top: 25px;
   }

   .text-image-main .left-column{
      float: none;
      height: auto;
      overflow: hidden;
      padding-right: 0px !important;
   }

   .text-image-main .right-column {
      overflow: hidden;
      float: none;
      height: auto;
      padding-left: 0px !important;
   }

   .text-image-senkrecht-main{
      flex-direction: column;
   }

   .text-image-senkrecht-main .right-column{
      padding: 0px;
      padding-left: 0px !important;

      margin-top: 20px;
   }
   .text-image-senkrecht-main .left-column{
      padding: 0px ;
      padding-right: 0px !important;
   }
   .text-image-senkrecht-main .right-column.text, .text-image-senkrecht-main .left-column.text{
      width: 100% !important;
   }
   
   .header-text{
      display: none !important;
   }

   /*   #logo img {
         width: 60px;
      }*/

   .menu-button {
      display: inline-block;
      position: absolute;
      top: 20px;
      right: 30px;
   }

   #main-navigation{
      display: none !important;
   }


   #nav2-canvas{
      width: 100%;
      margin-bottom: 10px;
   }

   .image-text-three-columns-main .col {
      width: 100% !important;
      margin: 20px 0px;
   }

   .contactform .textbox, .contactform #nachricht{
      width: 60%;
   }

   .contactform .form-info, .contactform .title{
      margin: 0px;
   }

   #head-image{
      width: 100%;      
   }
   
   #head-image img{
      width: 100%;
      /*height: 165px;*/
      align-content: center;
   }
   

   .overviewpages-main .overview-item{
      flex-direction: column;
      margin-bottom: 0px;
   }
   .overviewpages-main .text-container{
      margin-bottom: 0px;
      display: block;
   }
   .overviewpages-main .image-container{
      padding: 0px;      
      display: block;
   }
     
   .overviewpages-main, .image-container {
         grid-template-columns: 1fr 1fr;
         grid-gap: 16px;
   }

   .text-image-main{
      flex-direction: column;
   }

   .gallery-list-main, .gallery-container {
      grid-template-columns: 1fr 1fr;
      grid-gap: 16px;
   }

   .slick-slide img{
      width: auto;
      height: 165px;
   }

}

@media only screen and (max-width: 650px) {
   .form-row input[type="text"], .form-row input[type="password"], .form-row input[type="email"], .defaultform textarea, .form-row textarea{
      width: 100%;
      box-sizing: border-box;
   }
   .defaultform select{
      max-width: 100%;
   }
   .form-plz-ort-label{
      width: 100%;
   }
   .button-submit{
      margin-left: 0px;
   }
   .plz-ort-input-wrapper{
      width: 100%;
      box-sizing: border-box;
   }
   .plz-input {
      width: 30%;
   }
   .ort-input{
      width: calc(70% - 10px);
   }
   .plz-input .textbox{
      width: 100% !important;
      box-sizing: border-box;
   }
   .ort-input .textbox{
      width: 100% !important;
      box-sizing: border-box;
   }
   .form-row label[for="anrede-1"], .form-row label[for="anrede-2"]{
      width: auto;

   }
   .form-row label[for="anrede-1"]{
      margin-right: 15px;
   }
   .form-row label[for="anrede"]{
      width: auto;
      margin-right: 15px;
   }
   
   .teaser-start img {
      width: auto;
   }

}