@font-face {
            font-family: 'wilo-font';
            font-style: normal;
            font-weight: 400;
            src: url("/assets/WiloPlusGlobalRegular.ttf") format('ttf');
        }
        @font-face {
            font-family: 'wilo-font';
            font-style: normal;
            font-weight: 600;
            src: url("/assets/WiloPlusGlobalBoldItalic.ttf") format('ttf');
        }
        .mesForIE{
            background: #04b193; color: #fff; padding: 20%;
        }
    

body {
    font-family: 'wilo-font', sans-serif;
}

.form-horizontal {
    padding: 7%;
}
a:hover, a:focus {
    color: inherit;
    text-decoration: underline;
}

.login-content 
{
    min-height: 50vh;
}

a.logo {
    position: relative;
    top: 37px;
    left: 1%;
}

.container {
    width: 72%;
    margin: auto;
    padding: 0;

}

.container-content {
    padding: 30px 14%;

}

.container-box {
    display: grid;
    width: 100%;
    grid-template-areas:
        "pic1 pic2 pic3"
        "pic4 pic5 pic6"; 
}


.container-textbox {
    padding-top: 50px;
    display: grid;
    width: 100%;
    grid-template-areas:
        "text1 text2";
    grid-template-columns: repeat(2, minmax(0, 1fr));
    font-family: 'Roboto Condensed', sans-serif;
}

.benefits {
    padding: 50px 30px;
}

.benefits li {
    list-style: none;
    padding-left: 23px;
    background-image: url(../img/checks.svg);
    background-repeat: no-repeat;
    color: #fff;
    line-height: 1.7;
    background-position: 0px 5px;
}

.viber-page-lists {
    padding: 0;
}
.viber-page-lists ol {
    padding-bottom: 20px;
    padding-left: 0;
}
h3 {
    font-size: 16px;
    font-weight: 600;
}


.wraper {
    width: 330px;
    margin: 5px;
    padding-bottom: 30px;
}

.wraper a {
    color: #222;
    text-decoration: underline;
}

.header {
    min-height: 104px;
    height: auto;
    margin: 0;
    border: 0;
    z-index: 1000;
    background-color: #009c82;
    border-radius: 0;
}

.slogan {
    font-size: 24px;
    text-align: right;
    padding: 30px 3% 30px 20px;
    font-weight: 600;
    width: 358px;
    float: right;
    color: #fff;
}

.box {
    width: auto;

    background-size: 330px 202px;
    height: 202px;
    margin: 30px 30px 0 0;
    background-position: center;
    min-width: 330px;
    background-repeat: no-repeat;
    transition: all .5s ease-in-out;
}

.box:hover {
    background-size: 340.0px 206.2px;
}

.boreder {
    border: solid #CBCBCB 1px;
    height: 213px;
    width: 230px;
    background-size: 230px 213px;
    transition: all .5s ease-in-out;
}

.boreder:hover {
    background-size: 235px auto;
}

.textbox {
    width: auto;
    background: #ddd;
    min-height: 400px;
    margin: 8px;
    padding: 20px 30px;
    font-size: 16px;
}

.textbox li {
    margin: 14px 0;
}



a.box {
    text-decoration: none;
    display: block;
}


h2 {
    color: #404040;
    font-size: 19px;
    position: relative;
    font-weight: 600;
    margin: 10px 5px 10px 0;
}

.container-content h1 {
    padding: 0 11px;
}

.textbox h4 {
    font-size: 17px;
    font-weight: 600;
    color: #333;
    margin-bottom: 22px;
}

.text1 {
    grid-area: text1;
}

.text2 {
    grid-area: text2;
    padding-top: 93px;
}

.box.prod1 {
    background-image: url(../img/prod1.png);
    grid-area: pic1;
}

.box.prod2 {
    background-image: url(../img/prod2.png);
    grid-area: pic2;
}

.box.prod3 {
    background-image: url(../img/prod3.png);
    grid-area: pic3;
}

.box.prod4 {
    background-image: url(../img/prod4.png);
    grid-area: pic4;
}

.box.prod5 {
    background-image: url(../img/prod5.png);
    grid-area: pic5;
}

.box.prod6 {
    background-image: url(../img/prod6.png);
    grid-area: pic6;
}

.box.prod7 {
    background-image: url(../img/prod7.png);
    grid-area: pic7;
}


.box.pic1 {
    background-image: url(../img/img1.png);
    grid-area: pic1;
}


.box.pic2 {
    background-image: url(../img/img2.png);
    grid-area: pic2;
}


.box.pic3 {
    background-image: url(../img/img3.png);
    grid-area: pic3;
}


.box.pic4 {
    background-image: url(../img/img4.png);
    grid-area: pic4;
}

.box.pic5 {
    background-image: url(../img/img5.png);
    grid-area: pic5;
}


.box.pic6 {
    background-image: url(../img/img6.png);
    grid-area: pic6;
}


.box.pic7 {
    background-image: url(../img/img7.png);
    grid-area: pic4;
}



.box.pic8 {
    background-image: url(../img/img8.png);
    grid-area: pic5;

}


.box.pic9 {
    background-image: url(../img/img9.png);
    grid-area: pic6;

}

.footer {
    padding: 2% 10%;
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
    flex-direction: row;  
    background: rgba(54,54,64,.9);
}

.logo-footer {
    height: 112px;
}

.block {
    height: 170px;
}

.block
.title {
    font-size: 20px;
    color: #eaeaea;
    font-weight: 600;
    padding: 5px 0;
}

.links {
    display: flex;
    flex-direction: column;
}

.links a {
    padding: 5px 0;
    color: #b5b7b8;
    font-size: 14px;
}

a>h2 {
    transition-delay: 0.5ms;
}

a:hover>h2 {
    background-color: #33b09a;
}


@media (max-width: 1024px) {

    .container-textbox {
        display: grid;
        grid-template-areas:
            "text1 text2";
    }

    .slogan {
        padding: 30px 3% 40px 20px;
    }

    .container-box {
        display: grid;
        grid-template-areas:
            "pic1 pic2 "
            "pic3 pic4"
            "pic5 pic6";
    }

    .container-content {
        padding: 15px;
    }

    .container {
        width: auto;
        margin: auto;

    }

    @media (max-width: 767px) {
        a.logo {
            left: 4%;
        }

        .footer {
            flex-direction: column;
            
        }
        .slogan {
            padding: 30px 3% 0px 20px;
            position: relative;
            top: -42px;
            font-size: 18px;
        }

        .container {
            width: 100%;
            margin: auto;
        }

        .container-content {
            padding: 15px;
        }

        .container-textbox {
            display: block;
        }

        .container-box {
            grid-template-areas:

                "pic1"

                "pic2"

                "pic3"

                "pic4"

                "pic4"

                "pic6"
                
                "pic7"

                "pic8"

                "pic9";
            ;

        }

        .text2 {
            padding-top: 20px;
        }


        .box {
            width: 99%;
            background-size: contain;
            margin: 8px 0;

        }

        .wraper {
            
            margin: 0 auto;
            padding-bottom: 30px;
        }

    }


}