body { font-family: 'Muli', sans-serif; background: white; background: #CBDAFF; margin: 0; padding: 0; }

#firma_dec { text-decoration: none; color: #363231; position: relative; left: -50%; top: -26px; }
h1 { font-size: 20px; }
h1:after { display: block; content: ''; border-bottom: solid 3px #2BA8F5; transform: scaleX(0); transition: transform 250ms ease-in-out; }
h1:hover:after { transform: scaleX(1); }
h1.fromRight:after{ transform-origin: 100% 50%; }
h1.fromLeft:after{ transform-origin:  0% 50%; }

.header { border-bottom: 2px solid white; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); display: flex; display: -ms-flexbox; position: absolute; margin: auto; top: 0; left: 0; right: 0; height: 60px; background: white; z-index: 10; }
#firma { display: flex; position: absolute; left: 50%; padding-top: 15px; padding-bottom: 15px; margin-top: 18px; z-index: 10; }

#shop_icon { position: absolute; margin: 0; right: 20px; padding-top: 16px; display: inline-block; z-index: 10; }
#shop_icon:hover { transform: scale(1.2); }

#menuToggle { display: block; position: relative; top: 22px; left: 20px; z-index: 100; -webkit-user-select: none; user-select: none; }
#menuToggle input { display: block; width: 20px; height: 16px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; z-index: 2; -webkit-touch-callout: none; }
#menuToggle span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: #363231; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; }
#menuToggle span:first-child { transform-origin: 0% 0%; }
#menuToggle span:nth-last-child(2) { transform-origin: 0% 100%; }
#menuToggle input:checked ~ span { opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #232323; }
#menuToggle input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); }
#menuToggle input:checked ~ span:nth-last-child(2) { opacity: 1; transform: rotate(-45deg) translate(0, -1px); }
#menu { position: absolute; width: 200px; margin: -100px 0 0 -50px; padding: 40px; padding-top: 115px; border-bottom: 1px solid black; border-right: 1px solid black; background: #F5F5F5; list-style-type: none; -webkit-font-smoothing: antialiased; transform-origin: 0% 0%; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); }
#menu li { padding: 6px 0; font-size: 16px; }
#menu a { text-decoration: none; color: black; }
#menu a:hover { color: #2BA8F5; }
#menuToggle input:checked ~ ul { transform: scale(1.0, 1.0); opacity: 1; }

.mid_text { margin-top: 12vh; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 310px; display: block; font-size: 30px; color: white; border: 2px solid white; text-align: center; padding-top: 15px; padding-bottom: 15px; background: rgb(105, 105, 105); background: rgba(105, 105, 105, 0.6); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }
#mid_text_low { margin-top: 10px; padding-top: 15px; font-size: 20px; border-top: 2px solid white; }
.mid_button { margin-top: 240px; position: absolute; text-align: center; justify-content: center; width: 100%; display: none; }
.mid_button a { font-size: 12px; text-decoration: none; color: white; }

#angebote { border-radius: 3px; background: #EC3B3B; width: 110px; padding-top: 15px; padding-bottom: 15px; margin-right: 30px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }
#angebote:hover { background: #FD1A1A; transform: scale(1.1); }
#webshop { border-radius: 3px; background: #3B85EC; width: 110px; padding-top: 15px; padding-bottom: 15px; margin-left: 30px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }
#webshop:hover { background: #2BA8F5; transform: scale(1.1); }
.bottom_info { color: #363231; position: absolute; background: white; border-top: 2px solid white; box-shadow: 0 -15px 25px -5px rgba(0,0,0,0.2); text-align: center; bottom: 0px; left: 0; right: 0; }

figure { display: inline-block; text-align: center; margin-top: 30px; }
figure img { margin-left: 5px; margin-right: 5px; }
figure figcaption { font-size: 18px; }
figure a { text-decoration: none; color: #363231; }
figure a figcaption:hover { color: #2BA8F5; }

.layout { margin: auto; flex-direction: column; display: flex; display: -ms-flexbox; -ms-flex-direction: column; margin-top: 60px; width: 100%; height: auto; background: white; color: #363231; }
.layout h2 { text-align: center; font-size: 24px; color: #505050; }
.service_footer { width: 100%; border-bottom: 1px solid #E8E8E8; padding-bottom: 13px; text-align: left; }
.service_footer p { margin-left: 10px; margin-right: 15px; }
.service_title h2 { margin-left: 10px; text-align: left; font-size: 22px; color: #363231; }
.service_content { text-align: left; margin-left: 10px; margin-top: -30px; margin-right: 15px; }

.kontakt_info h2 { text-align: left; margin-left: 10px; }
.kontakt_info p { text-align: left; margin-left: 10px; text-decoration: none; color: #505050; }
.kontakt_info a { text-decoration: none; color: #505050; }
.kontakt_info a:hover { color: #2BA8F5; }
.kontakt_bild { display: flex; display: -ms-flexbox; justify-content: center; margin-top: 15px; }
.maps { display: flex; display: -ms-flexbox; justify-content: center; margin-top: 25px; margin-bottom: 10px; }

.ueber_uns_container { border-bottom: 1px solid #E8E8E8; }
.ueber_uns_text { margin-left: 10px; margin-right: 10px; padding-bottom: 15px; font-size: 15px; }
.unser_team { width: 100%; margin-bottom: 10px; align-content: center; text-align: center; }
.unser_team img { width: 142px; height: 192px; border: 1px dotted black; margin-bottom: -15px; margin-top: 10px; }
.unser_team li { list-style-type: none; }
.unser_team h2 { font-size: 21px; text-align: center; margin-left: 10px; }
.unser_team_pos { margin-left: 10px; margin-bottom: -15px; margin-top: -10px; }
.unser_team_email { margin-left: 10px; }
.unser_team_email a { text-decoration: none; color: #363231; }
.unser_team_email a:hover { color: #2BA8F5; }
.unser_team_beschreibung { font-size: 14px; margin-bottom: 15px; margin-top: -7px; }
.unser_team_text { text-align: center; }

.project_head h3 { font-size: 18px; margin-left: 5px; margin-bottom: 3px; margin-top: 0; }
.project_head ul { list-style: none; list-style-position: outside; padding: 0; margin: 0; margin-bottom: 15px; }
.project_head li { padding-left: 15px; font-size: 14px; }
.project_head li:before { content: ">"; padding-right: 8px; color: grey; }
.project_gallery { text-align: center; }

.partner h3 a { color: #363231; text-decoration: none; margin-left: 10px; }
.partner p { margin-top: -15px; margin-left: 10px; margin-right: 10px; }
.partner img { margin-bottom: 10px; margin-left: 10px; }
.partner .weitere_partner .partner_microsoft,
.partner .weitere_partner .partner_intel,
.partner .weitere_partner .partner_starface {
    margin-left: 60px;
    margin-top: 10px;
    margin-bottom: 10px;
}

#form p { font-size: 12px; margin-left: 5px; margin-right: 5px; }
#pheader b { font-size: 16px; color: #2BA8F5; margin-left: 10px; }
#pcontent p { margin-left: 10px; margin-right: 10px; font-size: 14px; margin-bottom: 20px; margin-top: 7px; }

.impressum img { display: none; }
.impressum p b { color: #2BA8F5; }
.impressum p { margin-left: 10px; margin-right: 10px; }

.angebote_oeffnen { margin: auto; margin-top: 7px; text-align: center; font-size: 18px; margin-bottom: 5px; background: #EC3B3B; border-radius: 3px; padding: 2px 2px 2px 2px; width: 200px; }
.angebote_oeffnen a { text-decoration: none; color: white; }
.angebote_oeffnen:hover { background: #FD1A1A; transform: scale(1.1); }
.sonderangebote_oeffnen { margin: auto; margin-top: 7px; text-align: center; font-size: 18px; margin-bottom: 5px; background: #EC3B3B; border-radius: 3px; padding: 2px 2px 2px 2px; width: 250px; }
.sonderangebote_oeffnen a { text-decoration: none; color: white; }
.sonderangebote_oeffnen:hover { background: #FD1A1A; transform: scale(1.1); }
.angebote_content { margin-left: 10px; margin-right: 10px; margin-top: -10px; }

@media only screen and (max-width: 359px) {
    figure img { width: 70px; height: 70px; }
    figure { display: inline-block; text-align: center; margin-top: 15px; }
    figure img { margin-left: 3px; margin-right: 3px; }
    figure figcaption { font-size: 14px; }
    figure a { text-decoration: none; color: #363231; }
}

@media only screen and (min-width: 481px) and (max-width: 1020px) and (orientation:landscape) {
    .bottom_info { bottom: -45%; }
    .mid_text { margin-top: 25vh; }
}

@media only screen and (orientation:landscape) {
    .event_slider { position: absolute; content:url("../img/slider/asus_mobile_new.png"); display: none; width: 100%; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); z-index: -100; height: 100%; }
}

.event_slider { content:url("../img/slider/asus_mobile_new.png"); margin-top: 15px; display: none; position: static; width: 100%; z-index: -10; }

/* Beginn der "Tablet" anpassung */
@media only screen and (min-width: 961px) {
    h1 { font-size: 40px; }
    h2 { font-size: 28px; margin-top: 35px; }
    .header { height: 80px; }
    #firma { margin-top: 0px; }
    #shop_icon { margin-top: 10px; }
    #menuToggle { margin-top: 10px; }
    .mid_text { margin-top: 160px; width: 600px; }
    #mid_text_low { margin-top: 10px; padding-top: 15px; font-size: 26px; border-top: 2px solid white; }
    .mid_button {
        margin-top: 400px;
    }
    #angebote {
        width: 220px;
        font-size: 20px;
    }
    #webshop {
        width: 220px;
        font-size: 20px;
    }
    figure {
        text-align: center;
        margin-top: 30px;
    }
    figure img {
        margin-left: 25px;
        margin-right: 25px;
        width: 128px;
        height: 128px;
    }
    figure figcaption {
        font-size: 22px;
    }
    .kontakt_bild img {
        position: absolute;
        width: 475px;
        height: 300px;
        top: 125px;
        right: 45px;
    }
    .maps iframe {
        width: 90%;
    }
    .footer {
        position: absolute;
        bottom: 0;
    }
}



@media only screen and (min-width: 1025px) {
    #firma {
        position: absolute;
        padding-left: 50px;
        padding-top: 12px;
        padding-bottom: 15px;
    }

    #menuToggle:active span {
        display: none;
        position: none; 
        

    }
    #menu a {
        position: absolute;
        right: 120px;
        padding-top: 28px;
        font-size: 18px;


    }
    #menu li {
        color: #363231;
        text-decoration: none;
        margin-left: 20px;
    }
    #menu a:hover {
        color: #2BA8F5;
        
    }
    ul {
        display: inline-flex;
        position: absolute;
    }
}


@media only screen and (min-height: 700px) and (orientation:portrait) {
    figure img {
        width: 100px; 
        height: 100px;
    }
    .mid_text {
        margin-top: 110px;
    }
    #mid_text_low {
        margin-top: 15px;
        padding-top: 30px;
    }
    .mid_button {
        margin-top: 300px;
    }
}

/* der footer wird angepasst damit dieser auf einem Smartphone
 * passend aussieht ^^
 */
.footer {
    border-top: 1px solid #808080;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    background: #E0E0E0;
    position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 10px;
    text-align: center;
}
.footer p {
    margin-bottom: -4px;
    margin-top: -2px;
    font-size: 14px;
    padding-bottom: 10px;
}
#footer_links {
    display: none;
}
.footer a {
    font-size: 14px;
    color: black;
    text-decoration: none;
}
.footer a:hover {
    color: #2BA8F5;
}

/* Hier beginnt der Newsletter */

.newsletter {
    margin: auto;
    text-align: center;
    justify-content: center;
    height: 100%;
}
.newsletter input {
    height: 25px;
    margin-top: 10px;
}
.newsletter input[type=submit] {
    display: block;
    margin-bottom: 20px;
}
.newsletter input[type=text] {
    width: 145px;
    border: 1px solid darkgray;
    padding-left: 6px;
}
.newsletter input[type=email] {
    width: 300px;
    border: 1px solid darkgray;
    padding-left: 6px;
}
.newsletter input[type=text]:focus {
    color: #2BA8F5;
}
.newsletter input[type=email]:focus {
    color: #2BA8F5;
}

.infoicon img {
    position: fixed;
    top: 190px;
    left: 167px;

}