*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body, input, textarea, select, option, button{
    font-size: 16px;
    line-height: 1.7em;
    font-family: 'Open Sans', sans-serif;
    color: darkslategrey;
}
body{
}
article a{
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: red;
}
article a i{
    margin-right: 8px;
}
article p{
    margin: 20px 0px 20px 0px;
}
/*article p:last-child{*/
/*    margin: 0px 0px 20px 0px;*/
/*}*/
article ul{
    margin-top: 15px;
    margin-bottom: 15px;
}
article ol li{
    margin: 0px;
}
article ol{
    position: relative;
    display: grid;
    grid-template-columns: 32% 32% 32%;
    grid-gap: 0px 2%;
}
article ol li{
    list-style: none;
}
article ul li{
    margin-left: 40px;
}
article h1{
    margin: 0px auto 20px auto;
    color: #085996;
    line-height: 1.5em;
    font-size: 26px;
    font-weight: bold;
    text-align: left;
}
article h2{
    padding-bottom: 10px;
    margin: 24px auto;
    color: #fff;
    line-height: 1.5em;
    font-size: 22px;
    font-weight: bold;
    border-bottom: 1px solid #929292;
}
article .img100{
    position: relative;
    display: block;
    width: 90%;
    margin: auto;
    padding: 10px;
    border: 1px solid #aa0000;
}
article .img33right{
    position: relative;
    display: inline-block;
    float: right;
    width: 33%;
    margin: 10px;
    border-radius: 20px;
    /*box-shadow: 0px 0px 2px black;*/
    /*border-radius: 20px;*/
    border-bottom: 2px solid #8b400d;
}
article .img33left{
    position: relative;
    display: inline-block;
    float: left;
    width: 33%;
    margin: 10px;
    border-radius: 20px;
    /*box-shadow: 0px 0px 2px black;*/
    /*border-radius: 20px;*/
    border-bottom: 2px solid #8b400d;
}
article blockquote{
    position: relative;
    display: block;
    width: 90%;
    margin: auto;
    padding-left: 10px;
    border-left: 4px solid lightgray;
    font-style: italic;
    font-family: "Times New Roman", Times, serif;
}
header{
    position: relative;
    display: block;
    /*height: 90px;*/
    padding: 0px 0px;
    background-color: #fff;
    border-bottom: 1px solid grey;
    z-index: 2;
}
header .content{
    position: relative;
    display: block;
    max-width: 1340px;
    margin: auto;
    padding: 20px;
}
header .content #h1home{
    position: relative;
    display: block;
    /*width: 20%;*/
    max-width: 140px;
    min-width: 140px;
}
header .content #h1home img{
    position: relative;
    display: block;
    width: 100%;
}
/**************************/
/****************** MENU */
/**************************/
#menuNormal{
    position: absolute;
    display: block;
    width: 80%;
    top: 40px;
    right: 20px;
}
.ulpoz{
    position: relative;
    text-align: right;
}
.lipoz{
    position: relative;
    display: inline-block;
    margin: 0px 0px;
    list-style: none;
    font-size: 16px;
    text-align: center;
    color: white;
    cursor: pointer;
    transition: .4s;
}
.lipoz a{
    display: block;
    text-decoration: none;
    padding: 5px 7px;
    color: #000;
    font-family: "Rajdhani", sans-serif;
    font-weight: bold;
    font-size: 20px;
    /*border-top: 3px solid white;*/
    transition: .4s;
}
.lipoz a:hover{
    color: red;
    /*border-top: 3px solid #d3d3d3;*/
}
.ulpion{
    position: absolute;
    top: 42px;
    left: -60px;
    display: none;
    width: 320px;
    /*padding: 5px;*/
    margin: 0px;
    transform: translateX(0%);
    background-color: #aba6a3;
    /*border-radius: 15px;*/
    overflow: hidden;
}
.lipion {
    width: 100%;
    list-style: none;
    text-align: left;
}
.lipion a{
    display: grid;
    grid-template-columns: 25px auto;
    text-decoration: none;
    padding: 8px 15px;
    font-size: 14px;
    font-weight: normal;
    background-color: #fff;
    color: #000;
    border-bottom: 1px solid grey;
}
.lipion a:hover{
    color: red;
    background-color: #fff;
}
.lipion a i{
    color: red;
}
#btn-menu{
    position: absolute;
    display: none;
    top: 30px;
    right: 30px;
    font-size: 30px;
    cursor: pointer;
    color: #000;
}
#menuMobile {
    position: relative;
    display: none;
    top: 0px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    color: #fff;
    background-color: #276700;
    z-index: 10000;
}
/*#menuMobile #showMenuMobile{*/
/*    text-align: center;*/
/*    cursor: pointer;*/
/*}*/
#menuMobile .menu{
    display: block;
    padding: 15px 10px 15px 10px;
    text-align: left;
    background-color: #111318;
}
#menuMobile .menu .cat{
    margin: 15px 0px;
}
#menuMobile .menu a{
    position: relative;
    display: block;
    /*padding: 0px 0px 0px 15px;*/
    color: #fff;
    text-decoration: none;
    margin: 0px 0px 12px 0px;
}
#menuMobile .menu a:hover{
    color: #dda522;
}
#menuMobile .menu i{
    color: red;
    margin-right: 7px;
}
#menuMobile .menu .cat p{
    margin-bottom: 12px;
    cursor: pointer;
}
#menuMobile .menu .cat div a{
    padding-left: 10px;
}
#menuMobile .menu .cat p:hover{
    color: #dda522;
}
#menuMobile .menu .cat div{
    display: none;
    padding: 3px 0px;
    /*background-image: linear-gradient(#f6f4f2, #d4d2d0);*/
    background-color: #14171c;
    border-left: 1px solid red;
}
#banner{
    position: relative;
    display: block;
    height: calc(100vh - 118px);
    background-size: cover;
    background-position: center center;
}
#banner .bg-gradient{
    position: absolute;
    top: 0px; left: 0px;
    width: 100%; height: 100%;
    background: linear-gradient(270deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 100) 100%);
}
#banner .content{
    position: relative;
    display: block;
    width: 35%;
    top: 50%; left: 20%;
    padding: 20px 20px;
    transform: translate(-20%, -50%);
}
#banner .content h1,
#siteHead .content h1{
    position: relative;
    display: block;
    padding: 0px;
    color: white;
    font-size: 4em;
    font-family: "Rajdhani", sans-serif;
    text-align: left;
    line-height: 1.3em;
    border-bottom: none;
}
#banner .content p{
    position: relative;
    display: block;
    color: lightgray;
    text-align: left;
    font-size: 1em;
    line-height: 1.7em;
}
#banner .content .aa,
#showSite .aa{
    position: relative;
    display: inline-block;
    width: max-content;
    margin: 20px 20px 0px auto;
    padding: 10px 25px;
    font-size: 1em;
    font-weight: bold;
    /*border-radius: 10px;*/
}
#banner .content .aa i,
#showSite .aa i{
    margin-right: 15px;
}
#banner .content .a1,
#showSite .a1{
    color: white;
    background-color: red;
}
#banner .content .a2,
#showSite .a2{
    color: white;
    background-color: #17191f;
    border: 1px solid #7a7a7a;
}
#services,
#blogList,
#welcome,
#morePower{
    position: relative;
    display: block;
    padding: 80px 20px;
    background-color: #111318;
}
#blog{
    position: relative;
    display: block;
    padding: 60px 20px;
    background-color: #111318;
}
#services h2,
#blogList h2,
#welcome h2,
#morePower h2{
    position: relative;
    display: block;
    margin: 0px;
    padding: 0px;
    text-align: center;
    color: white;
    font-size: 3em;
    font-family: "Rajdhani", sans-serif;
    text-transform: uppercase;
    border: none;
}
#services .category{
    position: relative;
    display: grid;
    margin: 80px auto;
    grid-template-columns: 48% 48%;
    grid-gap: 20px 4%;
    max-width: 1300px;
}
#services .category:last-child{
    margin: 80px auto 0px auto;
}
#services .category:nth-child(odd) div:nth-child(1){
    order: 1;
}
#services .category .imgBox,
#welcome .content .imgBox{
    position: relative;
    display: block;
    margin: auto;
    padding: 10px;
    width: 90%;
    border: 1px solid #aa0000;
}
#services .category .imgBox img,
#welcome .content .imgBox img{
    position: relative;
    display: block;
    width: 100%;
}
#services .category .imgBox .icon,
#siteHead .content .icon{
    position: absolute;
    /*padding: 15px;*/
    width: 64px; height: 64px;
    bottom: 0px; right: 0px;
    background-color: red;
    color: white;
    text-align: center;
    font-size: 2em;
}
#services .category .imgBox .icon i{
    position: absolute;
    top: 14px; left: 12px;
}
#services .category .extTxt{
    position: relative;
    display: block;
    color: red;
}
#services .category h3{
    position: relative;
    display: block;
    margin: 15px 0px;
    font-size: 2em;
    line-height: 1.3em;
    color: white;
    font-family: "Rajdhani", sans-serif;
    text-transform: uppercase;
}
#services .category p{
    color: lightgray;
}
#services .category ul{
    margin: 0px;
}
#services .category ul li{
    margin: 10px 0px 0px 20px;
}
#services .category ul li i{
    color: red;
}
#services .category ul li a{
    position: relative;
    display: block;
}
#services .category ul li a:hover span:first-child{
    color: red;
}
#services .category ul li a span{
    display: block;
}
#services .category ul li a span:first-child{
    font-weight: bold;
    color: white;
    transition: .4s;
}
#services .category ul li a span:last-child{
    color: lightgray;
    font-size: .9em;
}
#blogList .content,
#blog .content{
    position: relative;
    display: grid;
    grid-template-columns: 32% 32% 32%;
    grid-gap: 20px 2%;
    max-width: 1300px;
    margin: 80px auto 0px auto;
}
#blog .content{
    margin: 0px auto 0px auto;
}
#blogList .content a,
#blog .content a{
    position: relative;
    display: block;
    text-decoration: none;
    font-size: 1em;
    background-color: #1a1d23;
    border: 1px solid #aa0000;
}
#blogList .content a .boxImg,
#blog .content a .boxImg{
    position: relative;
    display: block;
    overflow: hidden;
}
#blogList .content a img,
#blog .content a img{
    position: relative;
    display: block;
    width: 100%;
    transition: .4s;
}
#blogList .content a:hover img,
#blog .content a:hover img{
    transform: scale(1.1, 1.1);
}
#blogList .content .box,
#blog .content .box{
    padding: 15px;
}
#blogList .content a .date,
#blog .content a .date{
    color: lightgray;
    font-size: .8em;
}
#blogList .content a h3,
#blog .content a h3{
    color: white;
    text-align: left;
    font-size: 1.2em;
    font-family: "Rajdhani", sans-serif;
    transition: .4s;
}
#blogList .content a:hover h3,
#blog .content a:hover h3{
    color: red;
}
#blogList .content a p,
#blog .content a p{
    margin: 15px 0px;
    color: lightgray;
}
#blogList .content a span,
#blog .content a span{
    color: red;
}
#blogList .content a span i,
#blog .content a span i{
    margin-left: 8px;
}
#welcome{
    background-color: #14171c;
}
#welcome .content{
    position: relative;
    display: grid;
    grid-template-columns: 48% 48%;
    grid-gap: 20px 4%;
    max-width: 1300px;
    margin: auto;
}
#welcome .content article{
    color: lightgray;
}
#welcome .content article .about{
    color: red;
}
#welcome .content article h2{
    text-align: left;
}
#welcome .content article .whyUs{
    position: relative;
    display: grid;
    grid-template-columns: 48% 48%;
    grid-gap: 15px 4%;
}
#welcome .content article .whyUs i{
    color: red;
}
#welcome .content article .whyUs p{
    color: white;
    margin: 0px;
}
#morePower article{
    position: relative;
    display: block;
    margin: auto;
    max-width: 1300px;
    padding: 30px 20px;
    background-color: red;
    color: white;
    text-align: center;
}
#morePower article a{
    position: relative;
    display: inline-block;
    margin: 15px;
    padding: 15px;
    color: white;
    font-weight: bold;
    border: 1px solid #f97272;
    transition: .4s;
}
#morePower article a:hover{
    background-color: #ce0000;
}
#siteHead{
    position: relative;
    display: block;
    padding: 100px 20px;
    background-position: center;
    background-size: cover;
}
#siteHead .bg-gradient{
    position: absolute;
    top: 0px; left: 0px;
    width: 100%; height: 100%;
    background-color: rgba(17, 19, 24, 0.8)
}
#siteHead .content{
    position: relative;
    display: block;
    margin: auto;
    max-width: 1300px;
}
#siteHead .content h1{
    margin-top: 20px;
    color: white;
}
#siteHead .content .icon{
    position: relative;
    padding: 10px;
}
#siteHead .content .microLink{
    position: relative;
    display: grid;
    grid-template-columns: 60px auto;
    color: white;
    font-size: .8em;
}
#siteHead .content a{
    position: relative;
    display: inline-block;
    margin: 0px 10px;
    color: red;
    text-decoration: none;
    text-transform: lowercase;
}
#showSite,
#showBlog,
#contact{
    position: relative;
    display: block;
    padding: 40px 20px;
    background-color: #111318;
    color: lightgray;
}
#showSite .content{
    position: relative;
    display: grid;
    grid-template-columns: 58% 38%;
    grid-gap: 20px 4%;
    max-width: 1300px;
    margin: auto;
}
#showSite aside .otherServices{
    position: relative;
    display: block;
    padding: 20px;
    margin: 20px 0px;
    background-color: #1a1d23;
    border: 1px solid #454545
}
#showSite aside .otherServices ul{
    position: relative;
    display: block;
    margin: 20px 0px 0px 0px;
}
#showSite aside .otherServices ul li{
    margin: 20px 0px 0px 25px;
}
#showSite aside .otherServices ul li i{
    color: red;
}
#showSite aside .otherServices ul li a{
    color: white;
    text-decoration: none;
}
#showSite aside .otherServices h3{
    position: relative;
    display: block;
    font-size: 1em;
    color: white;
}
#showBlog .content{
    position: relative;
    display: block;
    max-width: 750px;
    margin: auto;
}
#showBlog .content .dateBlog{
    position: relative;
    display: block;
    padding-bottom: 10px;
    color: lightgray;
    font-size: .8em;
    border-bottom: 1px solid white;
}
#showBlog .content .dateBlog i{
    margin-right: 10px;
    color: red;
}
#contact .content{
    position: relative;
    display: grid;
    grid-template-columns: 38% 68%;
    grid-gap: 20px 4%;
    max-width: 1300px;
    margin: auto;
}
#contact .content .details{
    position: relative;
    display: grid;
    grid-template-columns: 48% 48%;
    grid-gap: 20px 4%;
    margin: 0px 0px 40px 0px;
}
#contact .content a{
    position: relative;
    display: block;
    margin: 8px 0px;
    color: lightgray;
}
#contact .content a:hover{
    color: white;
}
#contact .content a i{
    color: #ff0000;
}
footer{
    position: relative;
    display: block;
    padding: 80px 20px 0px 20px;
    min-height: 120px;
    background-color: #14171c;
}
footer .content{
    position: relative;
    display: grid;
    grid-template-columns: 32% 32% 32%;
    grid-gap: 20px 2%;
    max-width: 1600px;
    margin: auto;;
    font-size: 16px;
    color: lightgray;
    line-height: 2em;
}
footer .content h2{
    position: relative;
    display: block;
    color: #fff;
    font-family: "Poppins", serif;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}
footer .content p{
    margin: 10px 0px;
    color: #ece9e9;
}
footer .content a{
    color: #ece9e9;
    text-decoration: none;
    transition: .4s;
}
footer .content a i{
    margin-right: 7px;
    color: red;
}
footer .content a:hover{
    color: lightgray;
}
footer .line{
    position: relative;
    display: block;
    max-width: 1700px;
    height: 1px;
    margin: 20px auto 20px auto;
    background-image: linear-gradient(to right, #141619, #fff, #141619);
}
footer .author{
    position: relative;
    display: block;
    max-width: 1000px;
    margin: 0px auto;
    padding: 0px 0px 20px 0px;
    text-align: center;
}
footer .author a{
    color: lightgray;
    text-decoration: none;
    font-size: 14px;
    transition: .4s;
}
footer .author a:hover {
    color: red;
}
/**********************************/
/***  -------- TABLETY -------- ***/
/**********************************/
@media (max-width: 800px){
    #menuNormal {
        display: none;
    }

    header #btn-menu {
        display: inline-block;
    }

    #banner .content {
        width: 95%;
        top: 50%;
        left: 50%;
        padding: 20px 20px;
        transform: translate(-50%, -50%);
    }
    #banner .content h1,
    #siteHead .content h1
    {
        font-size: 2em;
    }
    #blogList .content,
    #blog .content{
        grid-template-columns: 48% 48%;
        grid-gap: 20px 4%;
    }
    #welcome .content article .whyUs,
    #showSite .content,
    #contact .content,
    footer .content{
        grid-template-columns: 100%;
    }
    #services .category,
    #blogList .content{
       margin: 40px auto;
    }
    #services,
    #blogList,
    #welcome,
    #morePower{
        padding: 40px 20px;
    }
    #services h2,
    #blogList h2,
    #welcome h2,
    #morePower h2{
        font-size: 2em;
    }
    footer{
        padding: 40px 20px 0px 20px;
    }
}
/**********************************/
/***  -------- KOMORKI -------- ***/
/**********************************/
@media (max-width: 479px){
    header .content #h1home{
        position: relative;
        display: block;
        width: 30%;
        max-width: initial;
        min-width: initial;
    }
    #services .category,
    #blogList .content,
    #welcome .content,
    #blog .content,
    #contact .content .details{
        grid-template-columns: 100%;
    }
    #services .category:nth-child(odd) div:nth-child(1){
        order: initial;
    }
    #welcome .content article .whyUs{
        grid-template-columns: 100%;
    }
}