/*
************************************************************
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: 1450px) {
   .top-navigation, .search-container{
      right: 25px;
   }
}

@media (max-width: 1400px) and (min-width: 1026px) {
   .references-list-item {
      width: calc((100vw - 150px) / 2) !important;
      height: calc((100vw - 150px) / 2) !important;
      height: min(calc((100vw - 150px) / 2), calc(100vw - 60px)) !important;
   }
}

@media only screen and (max-width: 1300px) {
   #nav2-canvas{
      margin-right: 40px;
   }
   #content-canvas.standard.visibleAsideCanvas {
      width: calc(100% - 540px);
   }
}


@media only screen and (max-width: 1250px) {
   .search-container {
      right: 15px;
   } 
}

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

   /*### Abstände ###*/

   #site_headline{
      padding-bottom: 30px !important;      
   }
   
   h2{
      margin-bottom: 10px !important;
   }
   #detail-container .contentbox, .infobox{
      margin-bottom: 30px;
   }


   #mobile-search-box{
      display: block;
   }

   .back-button{
      display: inline-block;
   }

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

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

   /*****************************************************************
   *********** Header
   ******************************************************************/
   .mainheadline{
      font-size: 35px !important;
   }

   .header-text{
      display: none;
   }
   /*****************************************************************
   *********** Footer
   ******************************************************************/
    .logo-footer {
      width: 50%;
      padding: 10px 0px 35px 0px;
}

.logo-footer img {
   padding: 42px 21px;
}

#footer-bar {
   float: left;
   display: flex;
   padding-top: 25px;
}
   /*****************************************************************
   *********** Content
   ******************************************************************/
.teaser-start .left-column {
    width: 100% !important;
    margin-bottom: 20px;
    padding: 0px;    
}

.teaser-start .right-column {
    width: 100% !important;
    margin-bottom: 20px;
    padding: 0px;    
}

   /*****************************************************************
   *********** Seitenelemente
   ******************************************************************/

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


   .text-image-main .left-column{
      width: 100% !important;
      float: none;
      height: auto;
      overflow: hidden;
      margin-bottom: 20px;
      padding: 0px;
      padding-right: 15px;
   }


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

   .header-text{
      display: none !important;
   }

   #main-navigation,    #meta-navigation{
      display: none !important;
   }
   .top-navigation{
      position: absolute;
      right: 130px;
      top: 5px;
   }

   .lang-selector{
      display: block;
      right: 85px;
   }

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

   .text-main{
      width: 100%;
      margin: 0 0px 0x !important;
   }
   .info-teaser-main{
      width: 100%;
      margin: 25px 0px 0;
   }

   .image-text-three-columns-main{
      width: 100%;
      margin: 25px 0px 0;
   }

   #info-canvas{
      padding-left: 0px;
   }
   
   .overviewpages-main {
       margin-bottom: 30px;
   }

   #nav2-canvas{
      display: none;
   }

   .contactform .defaultform{
      width: 100%;
      padding: 0px;
      padding-top: 50px;
   }

   #footer-canvas{
      flex-direction: column;
   }
   #footer-canvas .column{
      margin-bottom: 25px;
   }
   #footer-canvas .socialmedia-icons{
      display: flex;
      justify-content: start;
   }
   .social-media-link{
      float: none;
   }

   #head-canvas{
      position: relative;
      min-height: 75px;
   }

   #mobile-searchbutton{
      top: 20px;
      padding: 0px;
   }

}

@media only screen and (min-width: 951px) {
   .logo-footer img {
      /* TODO */
   }

   #footer-canvas {
      overflow: initial;
   }
}