/* Big tablet to 1200px (witdh smaller than the 1140px row) */
@media only screen and (max-width: 1200px) {
    .hero-box {
        width: 100%;
        padding: 0 2%; /* border to browser */
    }
    
    .row { padding: 0 2%; }
    
    .datenschutz .logo {
        width: 100%;
        height: auto;
    }

}



/* small tablet to big tablet: from 768 to 1124px */
@media only screen and (max-width: 1124px) {
    
    body {
        font-size: 18px;
       
    }
    
    section {
        padding: 60px 0;
        text-align: center;
    }
    
    .lang {
        width: 80%;
        margin-left: 10%;
    }
    
    h3 {
        font-size: 18px;
    }
    
    .grafikdesign .grafikdesign-row {
        background-color: white;
    }
    
    .grafikdesignbox {
        width: 85%;
        height: auto;
        float: left;
    }

    .grafikdesignbox img {
        width: 65%;
        float: left;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .grafikdesign-text-box {
        background-color: grey;

    }
    
    .grafikdesign-innere-text-box {
        padding: 30px; 
        width: 100%;
        margin: 0;
    }


    .lettering {
        padding-bottom: 0px;
    }

    .letteringbox {
        width: 100%;
    }

    .letteringbox img {
        
        width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 10px;
    }

    .grafikdesign .h3-angebot {
        color: #fff;
    }    
    
    .h3-angebot:after {
        display: block;
        height: 2px;
        background-color: 476d41;
        content: " ";
        margin-top: 6px;
        margin-left: auto;
        margin-right: auto;
        width: 150px;
    }

    .preis-box {
        width: 100%;
        margin-left: 0%;
    }
    
    .kontakt-formular { width: 80%; }
    

    .main-nav {
        display: none;
    }
    
    .mobile-nav-menu {
        display: inline-block;
        margin: 10px;
        
    }
    
    .main-nav {
        float: left;
        position: relative;
        left: 50%;
        transform: translateX(-75%);
        text-align: center;
    }

    .main-nav li {
        display: block;
        margin-left: 0px;
    }
    
    .main-nav li a:link,
    .main-nav li a:visited{
        display: block;
        border: 0;
        padding: 10px 0;
        font-size: 100%;
        margin-bottom: 5px;
        
    }

    
}


/* Small phones to small tablets: form 481 to 767 */
@media only screen and (max-width: 767px) {
    
    body {
        font-size: 16px;
       
    }
    
    section {
        /*padding: 30px 0;  */
        text-align: center;  
    }


    
    .row, 
    hero-box {
        padding: 0 4;
    }
    
    .col {
        width: 100%;
        margin: 0 0 4% 0;
    }

    .header-logo {
        margin-bottom: 120px;
    }


    .column{
        width: 100%;
        margin-bottom: 21px;
    }
    
    .main-nav {
        display: none;
    }
    
    .mobile-nav-menu {
        display: inline-block;
        margin: 15px;
        
    }
    
    .main-nav {
        float: left;
        position: relative;
        left: 50%;
        transform: translateX(-75%);
        text-align: center;
    }

    .main-nav li {
        display: block;
        margin-left: 0px;
    }
    
    .main-nav li a:link,
    .main-nav li a:visited{
        display: block;
        border: 0;
        padding: 10px 0;
        font-size: 100%;
        margin-bottom: 5px;
        
    }

    .sticky 
    {
        padding-bottom: 5px;
    }
    
    .sticky .main-nav {
        margin-top: 10px;
        
    }
    
    .sticky .main-nav li a:link,
    .sticky .main-nav li a:visited {
        padding: 10px 0;
    }
    
    .sticky .mobile-nav-menu i{
        color: rgba(241, 177, 57, 1);
        /*color: linear-gradient (90deg,rgba(241, 177, 57, 1) 0%, rgba(209, 45, 133, 1) 50%, rgba(86, 120, 205, 1) 100%);*/
    } 
    
    .sticky .mobile-nav-menu {
        margin-top: 10px;
    }
    
    
    .logo {
        width: 100%;
        height: auto;
        padding-left: 25px;
    }
    
    .lang {
        width: 100%;
        margin: 0%;
    }
    
    .kontakt-formular {
        width: 100%;
    }

    .slideshow {
        height: 230px !important;
    }

}



/* Small phones: from 0 to 480px */
@media only screen and (max-width: 480px) {
    
    section {
        padding-top: 25px;
        text-align: center;
    }
    
    .kontakt-formular {
        width: 100%;
    }

    .info-div {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    .logo {
        padding-left: 18px;
    }
}