/*
************************************************************
Styles:     flix//320px Responsive CSS
************************************************************
*/


@media only screen and (min-width: 0px) and (max-width: 1000px) {
    .logo-text{
        font-size: 16px;
    }
    .logo-text-content{
        padding: 40px 0px;
    }
    .logo{
        height: auto;
        width: 70px;
        padding: 30px;
    }

    #head-menu{
        padding: 0px 25px;
        box-sizing: border-box;
        margin-left: 0px;
    }
    .member-button{
        position: initial;
        margin-left: 25px;
        font-size: 17px;
    }
    .start-intro .image-container  {
        width: 50%;
    }
    .start-intro .text-container{
        width: 50%;
    }
    .member-button{
        display: none;
    }
    
    
    
    
    
    

    #page-canvas{
        width:100%;
        margin: 0;
        padding-top:0;
    }
    /*---------Navigation---------*/
    .nav-meta{
        display:none;
    }
    .nav1{
        display:none;
    }
    #nav2-canvas {
        display:none;
    }
    #menu-mobile-canvas{
        display: block;
        float: right;
        width: 70px;
        height: 65px;
        box-sizing: border-box;
        margin: 20px 20px;
        padding: 15px 0px;
    }
    #menu-mobile-canvas:hover{
        cursor: pointer;
    }
    #mobile-menu{
        display:block;
        background: transparent url('/_images/mobile_menue.png') no-repeat scroll left top / 40px 84px;
        height:20px;
        width:40px;
        margin: 0px 16px;
    }
    #menu-mobile-canvas .text{
        text-align: center;
        color:#7c7b7b;
    }

    .lang-selector-mobile {
        display: block;
    }

    /* *************************************************
       *** Mobile Navigation
       ************************************************* */

    .nav1-mobile {
        position:relative;
        margin:0;
        overflow:hidden;
        width:100%;
        border-radius:0;
        display:none;
        z-index:80;
        border-top:1px solid #c8c8c8;
    }

    .nav1-mobile-item {
        float:left;
        width:100%;
        border-bottom:1px solid #c8c8c8;
    }

    .nav1-mobile-item:last-child {
        border-bottom:0;
    }

    .nav1-mobile-link,
    .nav1-mobile-link:visited,
    .nav2-mobile-link,
    .nav2-mobile-link:visited{
        float:left;
        width:94%;
        padding:15px 3% 15px 3%;
        display:block;
        /*color: #7c7b7b;*/
        font-size:19px;
        text-transform: uppercase;
    }

    .nav1-mobile-link:hover,
    .nav2-mobile-link:hover {
        text-decoration:none;
    }

    .nav1-mobile-link.active {
        background:none;
    }

    .nav1-mobile-link.subnav,
    .nav1-mobile-link.subnav:visited {
        float:left;
        height:20px;
        width:47%;
        padding:15px 0 15px 3%;
    }

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

    .subnav-nav-trigger span {
        float:left;
        height:11px;
        width: 100%;
        margin-top:20px;
        background:url(/_images/subnav-trigger.png)right 0px no-repeat;
        background-size:19px 100px;
    }

    .subnav-nav-trigger:hover span {
        background-position:right -41px;
    }

    .subnav-nav-trigger.opened span {
        background-position:right -90px;
    }

    .nav1-mobile-link.opened,
    .subnav-nav-trigger.opened,
    .nav1-mobile-item:hover .nav1-mobile-link,
    .nav1-mobile-item:hover .subnav-nav-trigger {
        /*      color:#ffffff;*/

    }

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

    .nav1-mobile-item:hover .subnav-nav-trigger.opened span {
        background-position:right -90px;
    }

    .nav2-mobile {
        width:100%;
        display:none;
        border-top:1px solid #c8c8c8;
        margin:0;
    }

    .nav2-mobile-item {
        border:0;
        margin:0;
        padding:0;
    }

    .nav2-mobile-link,
    .nav2-mobile-link:visited {
        padding:10px 3%;
        display:block;
        font-size:16px;
        /*      color: #7c7b7b;*/
    }

    .nav2-mobile-link:active {
        /*      color: #007cc4;*/
    }



    #content-grid {
        padding-top:25px;
    }
    /*---------Head---------*/
    #head-canvas{
        width: 100%;
        min-height: 65px;
        height:auto;
    }
    /*   #logo{
          background-image: url(https://www.interaktiv-manufaktur.de/_images/logo_mobile.png);
          background-size: 50%;
          width:30%;
          padding:5% 10%;
          background-position: center;
          margin-left: 0;
       }*/
    #logo{
        background-image: url(https://www.interaktiv-manufaktur.de/_images/logo_mobile.png);
        background-size: 50px;
        width: 10%;
        height: 65px;
        padding: 0 10.0%;
        background-position: center;
        margin-left:0;
        border-right: 1px solid #C8C8C8;
    }
    #head-right{
        display: none;
    }
    /*--------Slider--------*/
    #slider{
        width:100%;
    }
    .slick-slide img{
        width:100%;
    }
    #slider img{
        width:100%;
        height:auto;
    }
    .slick-dots{
        display: none !important;
    }
    .slick-arrow {
        display: none !important;
    }
    /*--------Main--------*/
    #main-canvas{
        box-sizing: border-box;
        width: 100%;
        margin: auto;
        padding: 20px 20px;
    }
    #main-canvas.detail #content-canvas{
        width:96%;
    }
    #content-canvas{
        width:96%;
        margin:0 2%;
    }
    #detail-container{
        padding:0;
    }
    #headline{
        width:98%;
    }
    #info-canvas{

    }
    .infobox{

    }
    .infobox img{
        max-width: 186px;
        height:auto;
    }
    .contentbox{
        margin-left: 0;
        width:98%;
    }
    .contentbox img{
        /*width:100%;*/
        height:auto;
        max-width: 782px;
    }
    .pageElement-image-main{
        text-align: center;
    }
    .contentbox.googlemaps-main{
        padding-bottom: 3%;
    }
    .contentbox #googlemaps-main-mapcontainer{
        margin: auto;
        float: none;
        width: 98%;
        padding: 1%;
    }

    /* ********** News-List ********** */
    .news-list .image-container,
    .news-list .text-container {
        display:block;
    }

    .news-list .image-container{
        width:270px;
    }
    .news-list .text-container {
        padding: 0px;
    }
    .news-list img{
        margin-bottom: 10px;
    }
    .news-list .item{
        margin-bottom:40px;
    }

    .news-detail-info .infobox-links{
        margin: 5px 5px 0 5px;
        width: 94%;
    }
    .news-detail-info .infobox-downloads{
        margin: 10px 5px 5px 5px !important;
        width: 94%;
    }


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

    .form-row textarea {
        width:95%;
    }

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

    .form-row input[type="text"],
    .form-row input[type="password"],
    .form-row input[type="email"] {
        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%;
    }




    /*--------Info--------*/
    #info-canvas{
        width: 96%;
        margin: 0 2%;
    }
    .infobox{
        margin: 0 0 15px 0;
        width: 98%;
        padding: 0;
    }
    .infobox:last-child{
        margin: 0;
    }

    /*--------Footer--------*/
    #footer-canvas{
        width:96%;
        padding: 0 2%;
        margin: 5px 0;
    }
    #footer-left{
        margin:0 0 2% 0;
        width:98%;
        padding:1%;
    }
    #footer-right{
        margin:0;
        width:98%;
        padding:1%;
    }
    /*--------Footerbar--------*/
    #footer-bar{
        /*width:96%;*/
        /*padding: 0 2%;*/
        /*height:auto;*/
    }
    #footer-bar-left{
        width: 190px;
        float: left;
        margin-left: 2%;
        font-size: 70%;
        line-height: 15px;
        margin-bottom: 1px;
    }
    #footer-bar-right{
        width: 190px;
        float: right;
        margin-right: 2%;
        font-size: 70%;
        line-height: 15px;
        margin-bottom: 1px;
    }
    /*--------Socialmedia--------*/
    #social-media-bar{
        width:96%;
        padding: 0 2%;
        height: 60px;
    }
    #social-media-bar *{
        margin-bottom: 5px;
    }
    #googleplus{
        width: 20px;
        height: 20px;
        background-size:20px;
    }
    #twitter{
        width: 20px;
        height: 20px;
        background-size:20px;
    }
    #facebook{
        width: 20px;
        height: 20px;
        background-size:20px;
    }
    /*--------Footer Mobile--------*/
    #footer-mobile{
        display: block;
        width:100%;
        float:left;
        height:auto;
        position: fixed;
        bottom: 0;
        left: 0;
    }
    #footer-mobile .button{
        float:right;
        width:100px;
        height:40px;
        background-color:#007CC4;
        border-top-left-radius: 10px;
        border-top: 2px solid white;
        border-left: 2px solid white;
    }
    #footer-mobile .button:hover{
        cursor: pointer;
    }
    .button .text{
        width:auto;
        float:right;
        margin: 10px 8px 0px 7px;
        color:white;
    }
    .button .image{
        background-image: url('/_images/ic_contact-trigger.png');
        background-repeat: no-repeat;
        background-size:19px;
        display: block;
        float:left;
        height:19px;
        width:19px;
        margin: 11px 0px 0px 10px;
    }


    .contact-canvas{
        width:100%;
        height:100px;
        float:left;
        background-color:#7C7B7B;
        display:none;
    }
    .tel, .anfahrt, .email{
        width:33.13%;
        float:left;
        display:block;
        height:100px;
        background-color:gray;
        background-repeat: no-repeat;
        background-position: center 21px;
        background-size: 36px 32px;
    }
    .tel, .anfahrt{
        border-right: 1px solid white;
    }
    .tel{
        background-image: url('/_images/ic_phone-contact.png');
    }
    .anfahrt{
        background-image: url('/_images/ic_map-contact.png');
    }
    .email{
        background-image: url('/_images/ic_email-contact.png');
    }
    .contact-box span{
        float:left;
        width:100%;
        color:white;
        text-align:center;
        margin-top: 62px;
    }


}


@media only screen and (max-width: 560px){
    .logo-text-content{
        display: none;
    }
    .logo-area{
        float: left;
    }
    #head-menu{
        display: inline-block;
        padding-top: 30px;
        float: right;
        padding-right: 30px;
        padding-left: 0px;
    }
    .member-button{
        margin: 0px;
        padding: 15px 25px;
    }
    .start-teaser .teaser-box .image{
        height: auto;
    }
    
}


@media only screen and (max-width: 660px){
    .member-main .member-canvas{
        background: none !important;
        height: auto;
    }
    .member-main .member-canvas .member-content{
        position: initial;
        transform: translate(0%);
        width: 100%;
        box-sizing: border-box;
        padding: 0px 25px;
        max-width: 100%;
    }
    .member-main .member-canvas .member-content .headline{
        display: block;
    }  
    #footer-canvas .headline{
        display: block;
        text-align: center;
    }
}