@font-face {
    font-family: 'Circe100';
    src: url("../fonts/Circe-ExtraLight.ttf");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Circe300';
    src: url("../fonts/Circe-Light.ttf");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Circe500';
    src: url("../fonts/Circe-Regular.ttf");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Circe700';
    src: url("../fonts/Circe-Bold.ttf");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Circe900';
    src: url("../fonts/Circe-ExtraBold.ttf");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}
* {
    padding: 0;
    margin: 0;
}
body {
    font-family: 'Circe500', sans-serif;
    font-weight: 500;
    display: block;
    position: relative;
    overflow-x: hidden;
    color: #225c74;
}
.container .row {
    position: relative;
}
.mobile-only {
    display: none;
}
.desctop-only {
    display: block;
}
.body-scroll {
    overflow: hidden;
}
.float-right {
    float: right;
}
.align-center {
    text-align: center;
}
.align-right {
    text-align: right;
}
::selection {
    background: #2ab35a;
    color: #fff;
}
::-moz-selection {
    background: #2ab35a;
    color: #fff;
}
/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 15px;
}
::-webkit-scrollbar-track {
    border-radius: 0px;
}
::-webkit-scrollbar-thumb {
    background-color: #2ab35a;
}
ul li {
    list-style-position: inside;
}
a, .btn, input, button, textarea {
    outline: none;
    display: inline-block;
    transition: .2s ease-in-out;
    text-decoration: none;
    font-family: 'Circe500', sans-serif;
    font-weight: 500;
}
.btn:hover, input:hover, button:hover {
    transition: .2s ease-in-out;
    text-decoration: none;
}
a {
    color: #225c74;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
button {
    border: none;
}
button:hover {
    cursor: pointer;
}
.btn {
    position: relative;
    font-size: 16px;
    line-height: 16px;
    font-family: 'Circe500', sans-serif;
    font-weight: 500;
    padding: 30px 40px;
    border-radius: 40px;
    overflow: hidden;
    z-index: 100;
    text-align: center;
}
.btn-red {
    background: linear-gradient(to right, #f85f64, #fe9292, #f85f64);
    box-shadow: 0px 3px 1px #fe9292;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.btn-red:hover {
    background: linear-gradient(to right, #f85f64, #f85f64, #f85f64);
    box-shadow: 0px 3px 1px transparent;
    color: #FFFFFF;
    text-transform: uppercase;
}
.btn-big img {
    position: absolute;
    left: 2px;
    top: 9px;
}
.btn-big {
    padding-left: 100px;
}
.btn-big:after {
    content: '';
    display: block;
    position: absolute;
    width: 50px;
    height: 200px;
    background: #fff;
    top: -50px;
    transform: rotate(30deg);
    opacity: 0.3;
    left: -80px;
    animation: animate-btn-fon 3s ease-in-out infinite;
}
@keyframes animate-btn-fon {
    0% {
        left: -70px;
    }
    30% {
        left: 400px;
    }
    100% {
        left: 400px;
    }
}
.btn-white {
    border: 2px solid #2ab35a;
    color: #225c74;
    padding: 10px 20px;
    border-radius: 20px;
    text-transform: uppercase;
    font-family: 'Circe700', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 12px;
}
.btn-white:hover {
    text-decoration: none;
    background: #2ab35a;
    color: #FFFFFF;
}
.btn-green {
    border: 2px solid #2ab35a;
    background: #2ab35a;
    color: #FFFFFF;
    padding: 10px 20px;
    border-radius: 20px;
    text-transform: uppercase;
    font-family: 'Circe700', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 12px;
}
.btn-green:hover {
    text-decoration: none;
    background: #FFFFFF;
    color: #2ab35a;
}
h1 {
    font-size: 48px;
    line-height: 52px;
    color: #225c74;
    font-family: 'Circe700';
    font-weight: 700;
}
h2 {
}
h3 {
    font-size: 36px;
    line-height: 36px;
    color: #225c74;
    font-family: 'Circe700';
    font-weight: 700;
}
h3 span {
    color: #2ab35a;
}
h4 {
    font-size: 16px;
    line-height: 20px;
    font-family: 'Circe500';
    font-weight: 500;
}
h4 span {
    font-size: 16px;
    line-height: 20px;
    font-family: 'Circe900';
    font-weight: 900;
}
h5 {
    font-size: 12px;
    line-height: 12px;
    color: #95abb5;
    position: relative;
    font-family: 'Circe300', sans-serif;
    font-weight: 300;
}
h6 {
    font-size: 12px;
    line-height: 12px;
    color: #2ab35a;
    position: relative;
    font-family: 'Circe500', sans-serif;
    font-weight: 500;
}
p {
    font-family: 'Circe300', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 20px;
    color: #95abb5;
}
p span {
    font-family: 'Circe700', sans-serif;
    font-weight: 700;
    color: #225c74;
}
form input {
    position: relative;
    width: 100%;
    display: block;
    font-size: 18px;
    line-height: 18px;
    padding: 10px 20px;
    background: #FFFFFF;
    border: 2px solid #e7e7e7;
    border-radius: 30px;
}
/**/
header {
    padding-top: 20px;
    padding-bottom: 70px;
    background-image: url('../images/background.png');
    min-height: 800px;
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 100px;
}
#top-head {
    margin-bottom: 20px;
}
#top-head a {
    font-size: 12px;
    line-height: 12px;
    color: #225c74;
    margin-right: 15px;
}
#banner {
    padding-top: 70px;
}
.texture-orange {
    position: absolute;
    right: 0px;
    top: 0px;
    animation: texture-orange 3s infinite linear;
}
@keyframes texture-orange {
    0% {
        top: 0px;
    }
    50% {
        top: 20px;
    }
    100% {
        top: 0px;
    }
}
.block-logo a {
    display: block;
}
.block-logo a img {
    width: auto;
}
.block-btn-catalog {
    text-align: center;
    margin-top: 15px;
}
.block-btn-catalog a {
    color: #225c74;
    font-size: 18px;
    line-height: 18px;
}
.block-btn-catalog a img {
    float: left;
    margin-right: 10px;
    margin-top: 3px;
}
.block-search {
    position: relative;
}
.block-search h5 {
    padding-left: 20px;
}
.block-search form {
    position: relative;
    margin-bottom: 5px;
}
.block-search form input {
    position: relative;
    width: 100%;
    display: block;
    font-size: 14px;
    line-height: 14px;
    padding: 10px 40px;
    background: #FFFFFF;
    border: 2px solid #FFFFFF;
    border-radius: 30px;
}
.block-search form button {
    position: absolute;
    top: 14px;
    background: transparent;
    left: 20px;
}
.block-phone {
    text-align: right;
}
.block-phone a {
    color: #225c74;
    font-size: 24px;
    line-height: 24px;
    font-family: 'Circe700';
    font-weight: 700;
    margin-top: 5px;
    position: relative;
    display: inline-block;
}
.block-phone a img {
    float: left;
    margin-right: 5px;
}
.block-phone h5 {
    display: inline-block;
}
.block-phone h5:after {
    content: '';
    display: block;
    position: absolute;
    left: -11px;
    top: 2px;
    width: 6px;
    height: 6px;
    background: #00ba00;
    border-radius: 10px;
    animation: animate-open 1s ease-in-out infinite;
}
@keyframes animate-open {
    0% {
        box-shadow: 0px 0px 15px #00ba00;
    }
    30% {
        box-shadow: 0px 0px 10px transparent;
    }
    100% {
        box-shadow: 0px 0px 10px transparent;
    }
}
#banner h4 {
    color: #95abb5;
    margin-bottom: 20px;
}
#banner h1 {
    margin-bottom: 20px;
}
#banner h1 span {
    color: #2ab35a;
}
#banner h2 {
    margin-bottom: 40px;
    font-size: 18px;
    line-height: 18px;
    font-family: 'Circe300';
    font-weight: 300;
    text-transform: uppercase;
    color: #95abb5;
}
#banner .btn {
    margin-bottom: 50px;
}
#top-head .align-right a {
    margin-right: 0;
    margin-left: 15px;
}
.banner-attr {
    margin-bottom: 30px;
}
.banner-attr img {
    margin-bottom: 15px;
}
.texture-green-01 {
    position: absolute;
    left: -160px;
    top: 0px;
    animation: texture-green-01 2s ease-in-out infinite;
}
@keyframes texture-green-01 {
    0% {
        top: 0px;
        transform: rotate(0deg);
    }
    50% {
        top: -10px;
        transform: rotate(5deg);
    }
    100% {
        top: 0px;
        transform: rotate(0deg);
    }
}
.texture-green-02 {
    position: absolute;
    right: -150px;
    top: -30px;
    animation: texture-green-02 2s ease-in-out infinite;
}
@keyframes texture-green-02 {
    0% {
        top: -30px;
        transform: rotate(0deg);
    }
    50% {
        top: -10px;
        transform: rotate(5deg);
    }
    100% {
        top: -30px;
        transform: rotate(0deg);
    }
}
.texture-green-03 {
    position: absolute;
    left: 45%;
    top: 300px;
    animation: texture-green-03 3s ease-in-out infinite;
}
@keyframes texture-green-03 {
    0% {
        top: 300px;
        transform: rotate(0deg);
    }
    50% {
        top: 290px;
        transform: rotate(-10deg);
    }
    100% {
        top: 300px;
        transform: rotate(0deg);
    }
}
.block-head {
    margin-bottom: 50px;
}
/**/
#catalog {
    margin-bottom: 120px;
}
.catalog-item {
    background: #e5f8f0;
    border-radius: 20px;
    min-height: 115px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    display: block;
}
.catalog-item:hover {
    background: #2ab35a;
    box-shadow: 0px 0px 30px #2ab35a;
}
.catalog-item-big {
    min-height: 260px;
}
.catalog-item img {
    position: absolute;
    right: -20px;
    bottom: -40px;
    transition: .2s linear;
}
.catalog-item:hover img {
    bottom: -30px;
}
.catalog-item.catalog-item-big img {
    position: absolute;
    right: 0px;
    top: -10px;
    transition: .2s linear;
}
.catalog-item.catalog-item-big:hover img {
    top: 0px;
}
.catalog-item h4 {
    position: absolute;
    bottom: 25px;
    left: 25px;
    color: #225c74;
    font-size: 18px;
    line-height: 22px;
    font-family: 'Circe700', sans-serif;
    font-weight: 700;
}
.catalog-item:hover h4 {
    color: #FFFFFF;
}
/**/
#product {
    margin-bottom: 120px;
}
.product-item {
    position: relative;
    margin-bottom: 30px;
    text-align: center;
}
.product-item h3 a {
    font-size: 20px;
    line-height: 22px;
    color: #225c74;
    font-family: 'Circe700', sans-serif;
    font-weight: 700;
}
.product-item h4 {
}
.product-item h5 {
}
.product-item .product-item-img {
    display: block;
    position: relative;
    height: 180px;
    margin-bottom: 10px;
}
.product-item .product-item-img:hover {
    cursor: pointer;
}
.product-item .product-item-img span {
    display: block;
    height: 180px;
    width: 100%;
    position: relative;
    background-size: 110%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 20;
    border-radius: 20px;
    transition: 0.2s ease-in-out;
}
.product-item .product-item-img:after {
    content: '';
    position: absolute;
    z-index: 10;
    width: 180px;
    height: 180px;
    background: #f4f4f4;
    border-radius: 50%;
    left: 15%;
    top: 0px;
    transition: 0.2s ease-in-out;
}
.product-item:hover .product-item-img:after {
    background: transparent;
}
.product-item:hover .product-item-img span {
    background-size: 120%;
}
/**/
#help {
    padding-top: 60px;
    padding-bottom: 60px;
    margin-bottom: 120px;
    background-image: url('../images/background-help.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
#help .block-phone {
    text-align: left;
}
#help .block-phone h5:after {
    display: none;
}
#help .block-phone a {
    display: block;
}
.block-soc {
    margin-top: 20px;
    color: #225c74;
}
.block-soc img {
    float: left;
    margin-right: 10px;
    margin-bottom: 15px;
    transition: 0.2s ease-in-out;
}
#help h3 {
    margin-bottom: 30px;
}
.texture-help {
    position: absolute;
    right: 0px;
    top: -60%;
    animation: texture-help 15s linear infinite;
}
@keyframes texture-help {
    0% {
        top: -60%;
    }
    50% {
        top: -150%;
    }
    100% {
        top: -60%;
    }
}
/**/
#work {
    margin-bottom: 60px;
    background-image: url('../images/texture-green-all.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
#work .block-head {
    text-align: center;
}
#work p {
    position: relative;
    font-size: 16px;
    line-height: 20px;
    margin-top: 70px;
}
#work p:first-child, #work p:last-child {
    margin-left: 40px;
}
#work p:after {
    content: '';
    position: absolute;
    left: -85px;
    top: -20px;
    width: 68px;
    height: 68px;
    background-image: url('../images/icon-check.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 20;
}
.texture-red-lines {
    position: absolute;
    left: -40px;
    top: -30px;
    z-index: 10;
}
/**/
#clients {
    margin-bottom: 100px;
}
.client-item {
    margin-bottom: 30px;
    border: 2px solid #e9f3ec;
    border-radius: 10px;
    text-align: center;
    padding: 20px 30px;
}
.client-item img {
    width: 100%;
}
/**/
#partners {
    background: #e5f8f0;
    border-radius: 20px;
    padding-top: 60px;
    padding-bottom: 60px;
    padding: 70px;
    margin-bottom: 120px;
    background-image: url('../images/texture-partners.png');
    background-position: right top;
    background-repeat: no-repeat;
}
#partners h5 {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    line-height: 16px;
}
#partners h3 {
    margin-bottom: 50px;
}
#partners .block-phone {
    text-align: left;
    margin-top: 30px;
}
#partners .block-phone h5:after {
    display: none;
}
#partners .block-soc {
    padding-top: 15px;
}
#partners .block-soc img {
    margin-top: 8px;
}
footer {
    padding-top: 60px;
    padding-bottom: 60px;
    background: #f6f6f6;
}
footer h4 {
    margin-top: 25px;
    margin-bottom: 5px;
}
footer a {
    font-size: 26px;
    line-height: 26px;
    font-family: 'Circe700';
    font-weight: 700;
}
footer a span {
    font-size: 14px;
    font-family: 'Circe500';
    font-weight: 500;
}
footer p {
    margin-bottom: 10px;
}
footer .dev {
    margin-top: 30px;
}
.popup-modal-style {
    width: 500px;
    background: #FFFFFF;
    padding: 80px;
    position: relative;
    margin: auto;
    border-radius: 15px;
    text-align: center;
    border-bottom: 15px solid #f85f64;
}
.popup-modal-style form input {
    margin-bottom: 15px;
}
.popup-modal-style p {
    margin-bottom: 30px;
}
.popup-modal-style .btn {
    padding: 25px;
}
/*Разработка & дизайн: weba.by*/
.weba-dev {
    font-family: Roboto, sans-serif;
    float: right;
    position: relative;
    margin-top: 0px;
}
.weba-dev > span {
    font-size: 10px;
}
.weba-dev a {
    font-family: Roboto, sans-serif;
    text-decoration: none;
    display: block;
    line-height: 33px;
    color: #000000;
}
.weba-dev a:hover {
    color: #313131;
}
.weba-logo {
    font-family: Roboto, sans-serif;
    font-size: 48px;
    font-weight: bold;
    line-height: 48px;
    color: #313131;
}
.weba-logo span {
    font-family: Roboto, sans-serif;
    color: #ffea00;
    font-weight: bold;
}
.weba-href {
    text-align: right;
}
.webapico {
    position: absolute;
    right: -12px;
    top: -21px;
    width: 50px;
    height: 52px;
    animation: webapico-anime 2s linear infinite;
    transform-origin: 47% 100%;
}
@keyframes webapico-anime {
    0% {
        background-image: url("../images/weba/webapico.png");
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }
    15% {
        background-image: url("../images/weba/webapico.png");
        transform: rotate(-60deg);
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }
    20% {
        background-image: url("../images/weba/webapico.png");
        transform: rotate(-45deg);
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }
    25% {
        background-image: url("../images/weba/webapico.png");
        transform: rotate(-60deg);
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }
    30% {
        background-image: url("../images/weba/webapico.png");
        transform: rotate(-45deg);
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }
    50% {
        background-image: url("../images/weba/webapico.png");
        transform: rotate(0deg);
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }
    70% {
        background-image: url("../images/weba/webapico.png");
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }
    73% {
        background-image: url("../images/weba/webapico2.png");
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }
    76% {
        background-image: url("../images/weba/webapico.png");
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }
    81% {
        background-image: url("../images/weba/webapico2.png");
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }
    83% {
        background-image: url("../images/weba/webapico.png");
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }
    100% {
        background-image: url("../images/weba/webapico.png");
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
    }
}
footer .block-soc {
    margin-top: 0;
}
.footer-nav {
    position: relative;
}
.footer-nav a {
    font-size: 18px;
    line-height: 18px;
    margin-right: 20px;
    margin-bottom: 15px;
}
hr {
    position: relative;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid #d3d3d3;
    display: block;
    margin-bottom: 30px;
    margin-top: 30px;
}
.block-soc a:hover img {
    transform: scale(0.9);
}
header.page-content {
    background: none;
    margin-bottom: 30px;
    padding-bottom: 0;
    min-height: auto;
}
.breadcrumb {
    position: relative;
    margin-bottom: 30px;
}
.breadcrumb a {
    text-decoration: none;
}
.breadcrumb a, .breadcrumb a span, .breadcrumb span {
    font-size: 12px;
    line-height: 12px;
    color: #225c74;
}
.breadcrumb span {
    color: #9b9b9b;
}
.breadcrumb a span {
    transition: 0.2s ease-in-out;
    text-decoration: underline;
}
.breadcrumb a:hover span {
    text-decoration: none;
}
.page-content .block-search form input {
    border: 1px solid #e1e1e1;
}
/**/
.content {
    margin-bottom: 100px;
}
.content h1 {
    margin-bottom: 30px;
}
.content p {
    font-size: 16px;
    line-height: 20px;
    color: #000000;
    margin-bottom: 10px;
}
.product-page .product-item-img {
    display: block;
    height: 300px;
    width: 100%;
    position: relative;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 20;
    border-radius: 20px;
    transition: 0.2s ease-in-out;
}
.content .btn.btn-red{
    margin-top: 20px;
}
img.aligncenter {
    display: table;
    margin: 15px auto;
    height: auto;
}
img.alignleft {
    float: left;
    margin-bottom: 15px;
    margin-top: 15px;
    margin-right: 20px;
}
img.alignright {
    float: right;
    margin-bottom: 15px;
    margin-top: 15px;
    margin-left: 20px;
}
.pagination {
    margin-bottom: 50px;
    margin-top: 30px;
}
.pagination a, .pagination span {
    border: 1px solid #2ab35a;
    color: #2ab35a;
    font-size: 16px;
    font-weight: 300;
    padding: 7px 12px;
    border-radius: 0px;
    margin-right: 5px;
    margin-bottom: 10px;
    display: inline-block;
}
.pagination span, .pagination a:hover {
    border: 1px solid #2ab35a;
    color: #fff;
    background: #2ab35a;
    text-decoration: none;
}
#search-result h3{
    margin-bottom: 10px;
}