/* Telefon */
@media screen and (min-width: 320px) and (max-width: 820px) {
    #logo {
        padding-left: 10%;

        width: 50%;
        float: left;
    }

    .billboard h1 {
        margin-top: 117px;
        margin-bottom: 20px;
    
        font-size: 54px;
    }
    .billboard h3 {
        margin-top: 10px;
        margin-bottom: 222px;
    
        font-size: 28px;
    }

    .container {
        flex-direction: column;

        align-items: center;

        gap: 42px;
        margin: 42px 0px;

        width: 100%;
    }
    .container > #ih-container {
        margin: 0px;
    }
    .container-item {
        margin: 0;
        width: 90%;

        max-width: 362px;
        max-height: 1000px;

        height: auto;

        justify-content: center;
        align-items: center;
    }

    .upper-part-container {
        flex-direction: column;

        justify-content: center;
    }
    .upper-part-container h3 {
        padding-left: 0;
        margin-bottom: 16px;    
        
        width: 100%;
        text-align: center;

        font-size: 24px;
    }
    .upper-part-container #sm {
        padding-right: 0;
        margin-bottom: 20px;

        width: 100%;
        justify-content: center;
    }

    .downer-part-container {
        flex-direction: column;
    }
    .downer-part-container #mail {
        width: 100%;
        margin-bottom: 12px;

        padding: 0;
        justify-content: center;
    }
    .downer-part-container #conditions {
        width: 100%;

        padding: 0;
        justify-content: center;
    }
}

/* Hamburger Menu */
@media screen and (min-width: 320px) and (max-width: 1194px) {
    .menu-button-container {
        display: flex;
    }
    .menu {
        position: fixed;
        
        top: 0;
        left: 0;

        margin-top: 60px;
        padding-right: 0;

        flex-direction: column;
        
        width: 100%;
        
        justify-content: center;
        align-items: center;
    }
    #menu-toggle ~ .menu li {
        height: 0;
       
        margin: 0;
        padding: 0;
       
        border: 0;
       
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    #menu-toggle:checked ~ .menu li {
        border: 1px solid #333;
        
        height: 2.5em;
        
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    #menu-toggle:checked ~ .menu li:not(:last-child) {
        padding: 10px 20px;
    }
    .menu > li {
        display: flex;
        
        justify-content: center;
        
        width: 100%;
        
        color: white;
        background-color: #222;
    }
    .menu a {
        width: 100%;

        margin: 0;
        padding: 10 20;
    }
    .menu > li:not(:last-child) {
        border-bottom: 1px solid #444;
    }
}

/* Tablet */
@media screen and (min-width: 820px) and (max-width: 1240px) {
    #logo {
        padding-left: 14%;

        width: 50%;
        float: left;
    }

    .billboard h1 {
        margin-top: 117px;
        margin-bottom: 20px;
    
        font-size: 100px;
    }
    .billboard h3 {
        margin-top: 10px;
        margin-bottom: 222px;
    
        font-size: 40px;
    }

    .container {
        flex-direction: column;

        align-items: center;

        gap: 42px;
        margin: 42px 0px;
    }
    .container-item {
        margin: 0px 0px;
    }
    .container > #IH {
        margin: 0;
    }
    .container > #top-items {
        flex-direction: row; 
    }

    .upper-part-container {
        flex-direction: row;
    }
    .upper-part-container h3 {
        padding-left: 14%;
        text-align: left;

        margin-bottom: 32px;

        width: 50%;
        float: left;
    }
    .upper-part-container #sm {
        padding-right: 14%;
        justify-content: right;

        margin-bottom: 0;

        width: 50%;
        float: right;
    }

    .downer-part-container {
        flex-direction: row;
    }
    .downer-part-container #mail {
        padding-left: 14%;
        justify-content: left;

        width: 50%;
        float: left;
    }
    .downer-part-container #conditions {
        padding-right: 14%;
        justify-content: right;

        width: 50%;
        float: right;
    }
}

/* Desktop */
@media screen and (min-width: 1440px) {
    #logo {
        padding-left: 14%;

        width: 20%;
        float: left;
    }

    .billboard h1 {
        margin-top: 117px;
        margin-bottom: 20px;
    
        font-size: 100px;
    }
    .billboard h3 {
        margin-top: 10px;
        margin-bottom: 222px;
    
        font-size: 40px;
    }

    .container {
        flex-direction: row;
    }
    .container-item {
        margin: 116px 0px;
    }

    .upper-part-container {
        flex-direction: row;
    }
    .upper-part-container h3 {
        padding-left: 14%;
        text-align: left;

        margin-bottom: 32px;

        width: 50%;
        float: left;
    }
    .upper-part-container #sm {
        padding-right: 14%;
        justify-content: right;

        margin-bottom: 0;

        width: 50%;
        float: right;
    }

    .downer-part-container {
        flex-direction: row;
    }
    .downer-part-container #mail {
        padding-left: 14%;
        justify-content: left;

        width: 50%;
        float: left;
    }
    .downer-part-container #conditions {
        padding-right: 14%;
        justify-content: right;

        width: 50%;
        float: right;
    }
}