#home-wrapper{
    height: 100vh;
}

#home{
    background: rgb(12,56,149);
    background: linear-gradient(180deg, rgba(12,56,149,1) 0%, rgba(5,65,195,1) 100%);
}

#home-landingtext{
    width: 50%;
    text-align: center;
    margin: 0 auto;
    padding: 4% 0;
}

#home-second-caption{
    margin-top: 3%;
}

#home-landingtext-buttons{
    margin-top: 5%;
}

#home-landingtext-buttons .button{
    margin: 0 3%;
}

#digitales-angebot{
    margin-top: 5%;
    padding: 1%;
    background: rgb(18, 72, 189);
    border: 2px solid rgb(39, 122, 199);
    text-align: center;
}

.dig-cap{
    background: #1d2baa;
    padding: 2%;
    text-align: center;
    margin-bottom: 1%;
}

.dig-link{
    background: #1d2baa;
    display: block;
    padding: 2% 0;
}

.dig-text{
    margin: 3% 0;
    padding: 0 3%;
}

#dig-container{
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.dig-ang{
    display: inline-block;
    width: 35%;
    margin: 2% 4% 3% 4%;
    border: 2px solid rgb(39, 122, 199);
    background: rgb(22, 85, 223);
    text-decoration: none;
}

.dig-wrapper{
    text-decoration: none;
}

#dig-telefon p{
    margin: 2% 0 1% 0;
}
#newsbox{
    border: 1px solid rgb(39, 122, 199);
    border-radius: 5px;
    margin-top: 4%;
    display: block;
    text-decoration: none;
}
#newsbox p{
    margin: 1% 0;
}

#newsbox a{
    margin: 0.5% 0;
    display: block;
}

#corona-info, #corona-beratung{
    display: none;
}

#corona-info{
    width: 80%;
    margin: 0 auto;
    border: 2px solid rgb(211, 48, 48);
    margin-bottom: 3%;
    padding: 1% 0.5%;
    border-radius: 10px;
}

#corona-info-header{
    text-align: center;
    position: relative;
    bottom: 40px;
    background-color: white;
    width: 500px;
    left: 50%;
    transform: translateX(-50%);
    color: rgb(211, 48, 48);
}

#corona-info-facts{
    margin-bottom: 4%;
}

#corona-info-facts i, #corona-info-facts span{
    color: rgb(55, 134, 55);
}

.cfact{
    width: 90%;
    margin: 2% auto;
}

#corona-beratung{
    text-align: center;
}

#corona-beratung p{
    margin: 2% 0;
}

#beratung{
    margin: 2% 0;
    text-align: center;
}

#beratung-covid19{
    width: 85%;
    margin: 0 auto;
    margin-bottom: 2%;
    text-align: center;
}

#beratung-covid19 p{
    margin: 0.7% 0;
}

#beratung-covid19 ul{
    width: 70%;
    margin: 0 auto;
    text-align: left;
    background-color: rgb(236, 232, 232);
    padding: 2% 3%;
    border-radius: 5px;
}

#beratung-textwrapper{
    width: 87%;
    margin: 0 auto;
    text-align: center;
}

#beratung-textwrapper .text-small{
    margin: 1% 0;
}

#beratung-textwrapper .text-underline{
    margin-bottom: 2%;
}

#beratung-angebote{
    margin: 2% 0;
}

.beratung-angebot{
    background-color: rgb(19, 19, 134);
    border: 1px solid rgb(98, 203, 235);
    display: inline-block;
    text-decoration: none;
    margin: 0 2%;
    padding: 2%;
    position: relative;
    border-radius: 3px;
}

.beratung-angebot .text-medium{
    color: whitesmoke;
    z-index: 5;
    position: relative;
}

.beratung-icon{
    color:rgb(40, 40, 182) ;  
    position:absolute;
    left:0;right:0;top:50%;bottom:0;
    transform: translateY(-80%);
    margin:0 auto; 
    z-index: 4;
}

#vortrag-p #neu-vortrag{
    display: flexbox;
    align-items: center;
}

#neu-vortrag{
    background-color: rgb(211, 74, 74);
    color: whitesmoke;
    border-radius: 10px;
    padding: 1% 2%;
}

#products{
    margin: 2% 0;
}

#products-header{
    width: 95%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

#products-list{
    width: 95%;
    margin: 2% auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
}

.product{
    border: 1px solid rgba(48, 47, 47, 0.733);
    border-radius: 5px;
    width: 20%;
    display: inline-block;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-decoration: none;
}

.product img{
    max-width: 350px;
    max-height: 230px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    display: block;
}

.product-text{
    background: rgb(12,56,149);
    background: linear-gradient(180deg, rgba(12,56,149,1) 0%, rgba(5,65,195,1) 100%);
    margin: 0;
    padding: 2% 5%;
    text-align: center;
    height: 100%;
    border-top: 1px solid black;
}

.product-text .text-medium, .prod-name{
    padding: 3% 0;
    margin-bottom: 2%;
}

.product-label-marker{
    position: relative;
    background: rgb(214, 47, 21);
    transform: rotate(-45deg);
    width: 50%;
    text-align: center;
    right: 18%;
    top: 20px;
    padding: 1% 0;
}

.product-label-marker-hidden{
    position: relative;
    background: rgb(214, 47, 21);
    transform: rotate(-45deg);
    width: 50%;
    text-align: center;
    right: 18%;
    top: 20px;
    padding: 1% 0;
    opacity: 0;
}

#socialmedia-wrapper{
    width: 80%;
    border:  1px solid rgb(41, 112, 170);
    margin: 3% auto;
    text-align: center;
    padding-bottom: 1.5%;
    overflow: hidden;
}

#social-textwrapper{
    width: 70%;
    margin: 0 auto;
}

#social-textwrapper .text-small{
    margin: 2% 0;
}

#social-links{
    width: 60%;
    margin: 2% auto 0 auto;
}

#social-links a{
    display: inline-block;
    width: 27%;
    margin: 0 1%;
}

#service{
    margin: 2% 0;
}

.service-starttext{
    width: 60%;
    text-align: center;
    margin: 4% auto;
}

.service-list-service{
    width: 22.6%;
    margin: 0 1%;
    display: inline-block;
    text-align: center;
}

.service-list-service .text-small{
    color: #174168;
    margin-bottom: 3%;
}

#service-buttons{
    margin: 4% auto;
    text-align: center;
}

#service-buttons .button{
    margin: 0 2%;
}

#service-buttons-new{
    text-align: center;
}

#service-buttons-new a{
    margin: 0 2%;
}

#messen{
    background: #115a9e;
    text-align: center;
    padding-bottom: 2%;
}

#messen-p-id{
    padding: 2% 0;
}

#messen-p2-id{
    margin-bottom: 2%;
}

.messe {
    width: 25%;
    display: inline-block;
    margin: 1% 3%;
    background: #174168;
    border: 1px solid rgb(220, 220, 228);
}

.messe-countdown{
    position: absolute;
    margin: 0.3% 0.4%;
    background: rgb(219, 59, 45);
    padding: 0.3%;
    border-radius: 5px;
}

.messe img{
    width: 100%;
    margin: 0;
    padding: 0;
}

.messe-title{
    padding: 2% 0;
}

.messe-infos{
    background: #1068b9;
    padding-bottom: 1%;
}

.messe-infos p{
    padding: 2% 0;
}

#messe-vr{
    width: 30%;
    margin: 2% auto;
    background: #144572;
}

#messe-vr-cap{
    background: #132c42;
    padding: 1% 0;
}

#messe-vr img{
    width: 100%;
}

#messe-vr-txt{
    margin: 2% auto;
    width: 80%; 
}

#messe-vr-button{
    margin: 3% auto;
    display: inline-block;
    background: #102c46;
    padding: 2%;
    border: #1068b9 2px solid;
}

/*RESPONSIVE START*/


/*1441 to 1920*/
@media only screen and (min-width: 1440px) and (max-width: 1700px){
    .product img{
        max-width: 300px;
        max-height: 200px;
    }
}

/*1025 to 1440*/
@media only screen and (min-width: 1024px) and (max-width: 1439px){
    .product{
        width: 24%;
    }

    .product img{
        max-width: 190px;
        max-height: 120px;
        margin-bottom: 3%;
    }

    .product-label-marker{
        right: 16%;
        top: 12px;
    }

    .service-starttext{
        width: 80%;
    }

    .messe {
        width: 40%;
        margin: 3% 3%;
    }

    #messe-vr{
        width: 40%;
    }

    #dig-container{
        display: block;
    }

    .dig-ang{
        display: block;
        width: 60%;
        margin: 4% auto;
    }
}

/*768 to 1024*/
@media only screen and (min-width: 768px) and (max-width: 1023px){
    #home-landingtext{
        width: 70%;
    }

    #products-list{
        flex-wrap: wrap;
    }

    .product{
        width: 40%;
        margin: 3% 0;
    }

    .product img{
        max-width: 190px;
        max-height: 120px;
        margin-bottom: 3%;
    }

    .product-label-marker{
        right: 16%;
        top: 12px;
    }

    .service-starttext{
        width: 80%;
    }

    .service-list-service{
        width: 40%;
        margin: 4% 4.8%;
        display: inline-block;
        text-align: center;
    }

    .service-list-service .text-small{
        text-decoration: underline;
    }

    #social-links a{
        display: inline-block;
        width: 20%;
        margin: 0 5%;
    }

    .messe {
        width: 40%;
        margin: 3% 3%;
    }

    #messe-vr{
        width: 40%;
    }

    #dig-container{
        display: block;
    }

    .dig-ang{
        display: block;
        width: 60%;
        margin: 4% auto;
    }
}

/*425 to 767*/
@media only screen and (min-width: 425px) and (max-width: 767px){
    #home-landingtext{
        width: 80%;
    }

    #products-list{
        flex-wrap: wrap;
    }

    .product{
        width: 48%;
        margin: 3% 0;
    }

    .product img{
        max-width: 150px;
        max-height: 100px;
        margin-bottom: 5%;
    }

    .product-text .text-medium{
        padding: 3% 0;
        margin-bottom: 6%;
    }

    .product-label-marker{
        right: 16%;
        top: 12px;
    }

    .service-starttext{
        width: 90%;
    }

    .service-list-service{
        width: 40%;
        margin: 4% 4.8%;
        display: inline-block;
        text-align: center;
    }

    .service-list-service .text-small{
        text-decoration: underline;
    }

    #socialmedia-wrapper{
        width: 90%;
    }

    #social-textwrapper{
        width: 90%;
        margin: 0 auto;
    }

    #social-links{
        width: 80%;
        margin: 2% auto 0 auto;
    }

    #social-links a{
        display: inline-block;
        width: 20%;
        margin: 0 5%;
    }

    .messe {
        width: 70%;
        margin: 3% 3%;
    }

    #messe-vr{
        width: 70%;
    }

    #dig-container{
        display: block;
    }

    .dig-ang{
        display: block;
        width: 70%;
        margin: 6% auto;
    }
}

/*375 to 424*/
@media only screen and (min-width: 375px) and (max-width: 424px){
    #home-landingtext{
        width: 90%;
    }

    #newsbox{
        border: 1px solid rgb(39, 122, 199);
        border-radius: 5px;
        margin-top: 7%;
    }
    #newsbox p{
        margin: 3% 0;
        color: rgb(207, 148, 38);
    }
    
    #newsbox a{
        margin: 2.5% 0;
        display: block;
    }


    #products{
        margin: 6% 0;
    }
    #products-list{
        flex-wrap: wrap;
    }

    .product{
        width: 80%;
        margin: 3% 0;
    }

    .product img{
        max-width: 150px;
        max-height: 100px;
        margin-bottom: 5%;
    }

    .product-text .text-medium{
        padding: 3% 0;
        margin-bottom: 2%;
    }

    .product-label-marker{
        right: 16%;
        top: 12px;
    }

    .service-starttext{
        width: 95%;
    }

    .service-list-service{
        width: 80%;
        margin: 4% 9.9%;
        display: inline-block;
        text-align: center;
    }

    .service-list-service .text-small{
        text-decoration: underline;
    }

    #socialmedia-wrapper{
        width: 95%;
    }

    #social-textwrapper{
        width: 95%;
        margin: 0 auto;
    }

    #social-links{
        width: 90%;
        margin: 2% auto 0 auto;
    }

    #social-links a{
        display: inline-block;
        width: 20%;
        margin: 0 5%;
    }

    .messe {
        width: 80%;
        margin: 3% 3%;
    }

    .messe-countdown{
        position: absolute;
        margin: 2% 2%;
        background: rgb(219, 59, 45);
        padding: 1% 2%;
        border-radius: 5px;
    }

    #messe-vr{
        width: 80%;
    }

    #dig-container{
        display: block;
    }

    .dig-ang{
        display: block;
        width: 90%;
        margin: 7% auto;
    }
}

/*320 to 374*/
@media only screen and (min-width: 320px) and (max-width: 374px){
    #home-landingtext{
        width: 99%;
        padding: 10% 0;
    }

    #home-second-caption{
        margin-top: 5%;
    }
    
    #home-landingtext-buttons{
        margin-top: 8%;
    }

    #newsbox{
        border: 1px solid rgb(39, 122, 199);
        border-radius: 5px;
        margin-top: 7%;
    }
    #newsbox p{
        margin: 3% 0;
        color: rgb(207, 148, 38);
    }
    
    #newsbox a{
        margin: 2.5% 0;
        display: block;
    }
    #products{
        margin: 10% 0;
    }
    #products-list{
        flex-wrap: wrap;
    }

    .product{
        width: 85%;
        margin: 5% 0;
    }

    .product img{
        max-width: 150px;
        max-height: 100px;
        margin-bottom: 5%;
    }

    .product-text .text-medium{
        padding: 3% 0;
        margin-bottom: 2%;
    }

    .product-label-marker{
        right: 16%;
        top: 12px;
    }

    .service-starttext{
        width: 85%;
    }

    #hide-mobile{
        display: none;
    }

    .service-list-service{
        width: 80%;
        margin: 4% 9.9%;
        display: inline-block;
        text-align: center;
    }

    .service-list-service .text-small{
        text-decoration: underline;
    }

    #service-buttons{
        margin: 7% auto;
        text-align: center;
    }

    #socialmedia-wrapper{
        width: 95%;
        margin: 10% auto;
    }

    #social-textwrapper{
        width: 95%;
        margin: 0 auto;
    }

    #social-links{
        width: 90%;
        margin: 2% auto 0 auto;
    }

    #social-links a{
        display: inline-block;
        width: 20%;
        margin: 0 5%;
    }

    .messe {
        width: 80%;
        margin: 6% 3%;
    }

    .messe-countdown{
        position: absolute;
        margin: 2% 2%;
        background: rgb(219, 59, 45);
        padding: 1% 2%;
        border-radius: 5px;
    }

    #messe-vr{
        width: 80%;
    }

    #dig-container{
        display: block;
    }

    .dig-ang{
        display: block;
        width: 90%;
        margin: 7% auto;
    }
}

/*RESPONSIVE END*/