/*
************************************************************
Styles:     flix//theme
Project:    interaktiv manufaktur - 320px Responsive CSS
Autor:      Michael Eipel
Copyright:  (c) 2015 interaktiv manufaktur
Website:    www.interaktiv-manufaktur.de
************************************************************
*/

@media only screen and (min-width: 0px) and (max-width: 1000px) {

   .mobile {
      display:block;
   }

   .nomobile,
   .nav-site,
   .nav-meta,
   #sticky_navigation_wrapper,
   .aside-canvas,
   .katalog-info {
      display:none;
   }

   h1,
   h1 a {
      font-size:26px;
   }

   #page {
      width:100%;
      box-shadow:none;
   }

   .main-canvas {
      width:94%;
      padding:15px 3% 0 3%;
   }

   .content-canvas,
   .content-canvas.wide {
      width:100%;
      padding:0 0 30px 0;
   }

   .info-canvas {
      padding:0;
      width:100%;
   }

   .pagetype-standard .info-canvas {
      margin-top:0;
   }


   /* *************************************************
   *** Head
   ************************************************* */
   #head {
      background:none;
      /*background-color:#fe9900;*/
      height: 70px;
   }

   .logo-wrapper {
      width: 200px;
   }

   #brandingLogo {
      display:none;
      width: 200px;
      height: 47px;
      background-size: 200px 47px;
   }

   #brandingTitle {
       display:none;
      float:left;
      margin: 4px 0 0 3%;
      margin-top: 10px !important;
   }

   #brandingTitle .black {
      font-size: 20px;
      line-height: 22px;
   }

   #brandingTitle .gray {
      font-size: 14px;
      line-height: 20px;
      color: #fff;
   }


   /* ******************************************
    ** Navigation
    ****************************************** */
   /* ********** nav mobile menue *********** */
   .navbutton {
      float:right;
      width:40px;
      text-align:center;
      padding:14px 0 0 0;
      cursor:pointer;
      color:#4F4940;
      margin-right:3%;
   }

   .navbutton .ic_menue {
      display:block;
      height:20px;
      width:100%;
      background:url(/_images/ic_mobile_menue.png) center top no-repeat;
      background-size:40px 84px;
   }

   .navbutton .text {
      margin-top:3px;
      display:block;
      font-size:14px;
   }

   .navbutton:hover span,
   .navbutton.active span {
      color:#ffffff;
      /*background-position: center bottom;*/
   }



   /* ********** nav1-mobile ********** */
   .nav1-mobile {
      float:left;
      width:100%;
      display:none;
      font-size:22px;
      background:#fe9900;
      list-style-type:none;
      margin:0;
   }

   .nav1-mobile-item {
      float:left;
      width:100%;
   }

   .nav1-mobile-item:first-child {
      display:none;
   }

   .nav1-mobile-link {
      float:left;
      min-height:21px;
      width:94%;
      color:#4F4940;
      padding:12px 3% 12px 3%;
      display:block;
      border-radius:0;
      text-align: left;
      text-decoration:none;
      font-size:22px;
   }

   .nav1-mobile-item.opened {
      background:#ffffff;
   }

   .nav1-mobile-item.active .nav1-mobile-link {
      color:#ffffff;
   }

   .nav1-mobile-item.opened .nav1-mobile-link,
   .nav1-mobile-item.active.opened .nav1-mobile-link {
      color:#fe9900;
   }

   .nav1-mobile-item.active .subnav-nav-trigger span {
      background-position:right -44px;
   }

   .nav1-mobile-link.active {
      color:#fe9900;
   }

   .nav1-mobile-link.subnav,
   .nav1-mobile-link.subnav2 {
      float:left;
      width:47%;
      padding:12px 0 12px 3%;
   }

   .subnav-nav-trigger {
      float:left;
      padding: 12px 3% 12px 0;
      width: 47%;
      cursor:pointer;
   }

   .subnav-nav-trigger span {
      float:left;
      height:21px;
      width: 100%;
      background:url(../_images/ic_subnav-trigger_1.png) right 5px no-repeat;
      background-size:22px 107px;
   }

   .subnav-nav-trigger.opened span,
   .subnav-nav-trigger.active.opened span {
      background-position:right -92px;
   }


   .nav2-mobile {
      width:100%;
      display:none;
      margin-left:0;
      background-color:#ffffff;
   }

   .nav2-mobile-item {
      width:100%;
      display:block;
   }

   .nav2-mobile-link {
      width:94%;
      padding:12px 3% 12px 3%;
      border-left:0;
      color:#4F4940;
      display:inline-block;
      text-decoration:none;
      font-size:18px;
   }

   .nav2-mobile-item.active .nav2-mobile-link {
      color: #fe9900;
   }

   .nav2-mobile-item.opened {
      background-color:#FFE3BB;
   }

   .nav2-mobile-item.opened .nav2-mobile-link {
      color:#4F4940;
   }

   .nav1-mobile .nav2-mobile .subnav-nav-trigger span {
      float:left;
      height:21px;
      width: 100%;
      background:url(../_images/ic_subnav-trigger_2.png) right 5px no-repeat;
      background-size:22px 107px;
   }

   .nav2-mobile-link.subnav {
      float:left;
      min-height:21px;
      width:47%;
      padding:12px 0 12px 3%;
   }

   .nav2-mobile .subnav-nav-trigger.active span {
      background-position:right -44px;
   }

   .nav2-mobile .subnav-nav-trigger.opened span,
   .nav2-mobile .subnav-nav-trigger.active.opened span {
      background-position:right -92px;
   }


   .nav3-mobile {
      display:none;
      width:100%;
      position:relative;
      background-color:#FFF7EA;
   }

   .nav3-mobile-item {
      width:100%;
      display:block;
   }

   .nav3-mobile-link{
      width:94%;
      padding:12px 3% 12px 3%;
      border-left:0;
      color:#4F4940;
      display:inline-block;
      text-decoration:none;
   }

   .nav3-mobile-link.active {
      color: #fe9900;
   }

   .nav2-mobile-item:hover .nav3 {
      display:none;
   }


   /* ********** Search-Mobile ********* */
   .searchbutton {
      float:right;
      width:40px;
      display:block;
      margin:14px 10px 12px 0;
      cursor:pointer;
   }

   .searchbutton .icon {
      display:block;
      width:100%;
      height:20px;
      background:url(/_images/ic_nav-search.png) center top no-repeat;
      background-size:21px 100px;
   }

   .searchbutton .text {
      color:#67471c;
      text-align:center;
      margin-top:3px;
      display:block;
      font-size:14px;
   }

   .searchbutton.active .icon,
   .searchbutton.active .text {
      color:#ffffff;
      /*background-position:bottom;*/
   }

   #mobile-search {
      display:none;
      width:94%;
      padding:10px 3%;
      /*border-top: 3px solid #EF7F01;*/
      background-color: #fe9900;
   }

   #mobile-search input.searchform-word {
      width:87%;
      height: 22px;
      padding:4px 34px 4px 4px;
      border:1px solid #ffffff;
      color:#90979e;
      font-family:Arial, sans-serif;
      font-size:16px;
      background:url(/_images/ic_search.png) 98% 3px no-repeat #ffffff;
      background-size:24px 118px;
   }

   #mobile-search input.searchform-word:focus {
      border:1px solid #576471;
      color:#576471;
      background-position:98% -91px;
   }


   /* *************************************************
  *** Footer
  ************************************************* */
   #footer {
       height:300px;
      width:94%;
      padding:20px 3% 100px 3%;
      margin:0;
      background-color: #ff9700;
   }

   #footer .left {
      width:100%;
      float:none;
   }

   #footer .right {
      float:none;
      width:100%;
      margin-top:15px;
   }

   #footer-socialmedia {
      margin:0;
   }

   .nav-footer {
      padding-right:0px;
      margin-top:14px;
   }



   /* *************************************************
      *** Pageelements info
      ************************************************* */
   /* ********** twitter-widget ********* */
   #twitter-widget-0 {
      width:100% !important;
   }


   /* ********** pageElement-image-info ********* */
   .pageElement-image-info .infobox-content {
      padding:10px 0;
   }



   /* *************************************************
   *** Pageelements main
   ************************************************* */

   /* ********** news-teaser ********* */
   .news-index-box.mainteaser {
      margin:0;
   }

   .news-index-box.mainteaser .teaser-image {
      width:100%;
      height:auto;
      max-width:570px;
      display:block;
      margin-bottom:5px;
   }

   .news-index-content {
      width:100%;
   }


   /* ********** events-detail ********* */
   .events-detail .mainimage,
   .news-detail .mainimage,
   .pageElement-image img,
   .events-detail .mainimage img {
      width:100%;
      height:auto;
      max-width:580px;
   }



   /* ********** events-detail ********* */
   .vor-ort-main .tabnav-item {
      float:none;
      margin:0 0 3px 0;
   }

   .vor-ort-main #places-map {
      height:250px;
   }

   .vor-ort-main .ort,
   .vor-ort-main .news,
   .vor-ort-main .link {
      width:100%;
      padding:0;
   }



   /* ********** googlemaps-main ********* */
   #googlemaps-main-mapcontainer {
      height:250px;
   }





   /* List
   **************************************************************** */
   .list-text,
   .content-canvas.wide .list-text {
      display:block;
   }

   .content-canvas .list-image-wrapper,
   .content-canvas.wide .list-image-wrapper {
      display:block;
      float:none;
      margin-bottom:5px;
   }


   /* **********  pageElement-overview-pages ********* */
   .overview-item .text-container.width-image,
   .overview-item .text-container.no-image {
      width:100%;
   }



   /* ********** pageElement-gallery-main  ********* */
   .content-canvas.wide .list-text {
      width:100%;
   }




   /* ********** news-detail ********* */
   .news-detail .image-container .info-image-box.relation {
      display:none;
   }



   /* ********** vor-ort-main ********* */
   .vor-ort-main .vor-ort-list-elem {

   }



   /* ********** contact form ********** */
   .contactform {
      margin-bottom:50px;
   }

   .form-row label {
      width:100%;
      margin:0;
   }

   .form-row label[for="-1"],
   .form-row label[for="-2"] {
      width:50px;
   }

   .form-row label[for="mitglied"] {
      width:135px;
   }

   .form-row input[type="text"],
   .form-row input[type="password"] {
      width:92%;
   }

   .form-row select {
      width:97%;
   }

   label[for="optin_agb"] {
      width:100%;
   }

   .form-row input[type="checkbox"] {
      float:left;
   }

   .plz-ort-input-wrapper {
      width:100%;
   }

   .plz-input {
      width:25%;
      margin-right:2%;
   }

   .ort-input {
      width:73%;
   }

   .plz-input .textbox {
      width:77% !important;
   }

   .ort-input .textbox {
      width:85% !important;
   }

   .defaultform textarea,
   .form-row textarea {
      width:92%;
      max-width:none;
   }

   .button-submit {
      margin-left:0;
   }

   .pageElement-contactform {
      width:100%;
   }

   .ds-inhalt {
      width:100%;
   }

   .ds-inhalt span {
      width:90%;
   }

   .nomobile {
      display:none !important;
   }


   /* ***** Buchungsformular ***** */
   #formBuchung .box-buchung {
      width:92%;
   }

   #formBuchung .info {
      margin-left:0;
      width:100%;
   }

   #formBuchung span.label {
      display:block;
   }

   #formBuchung .preise.small {
      display:block;
      width:100%;
      margin-top:3px;
   }

   #formBuchung .stern-info {
      margin-left:0;
   }

   .angebotbutton.mobile {
      display:block;
   }


   #optout {
      width:100%;
      height:310px;
   }



   .header-bogen{
      display: none;
   }

   #brandingLogo-mobile{
      display: inline-block;
   }
}