/*
Theme Name: Generic
Theme URI: https://generic.tools/
Author: Bryan Hadaway
Author URI: https://calmestghost.com/
Description: A fully responsive, SEO-ready, schema-ready, social-media-ready, accessibility-ready, translation-ready, and jQuery-ready starter theme for designers and developers, which comes with its own built-in, lightweight CSS grid (https://generic.tools/grid/). This generic/starter/clean/simple/bare/blank/minimalist/example/cheatsheet/white-label/HTML5/CSS3/base/foundation/framework/skeleton/boilerplate/whatever theme was created specifically as a tool to assist you with building client sites virtually from scratch or building your own themes. It's updated to reflect new standards and trends in web design to provide a solid foundation for features that every website is expected to support nowadays, but please post bug reports, suggestions for improvement, or support requests on GitHub (https://github.com/bhadaway/generic-theme/issues) if you're getting jammed up. The biggest point of discussion would be the semi-minification of Generic's code. This simplicity, like the omission of comments in the code is intentional. If you prefer formatting, you're welcome to format the code any way you like. If I was able to help you out, consider making a donation (https://calmestghost.com/donate). Thank you and enjoy!
Tags: accessibility-ready, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready, blog, e-commerce, portfolio
Version: 1.9
Requires at least: 5.2
Tested up to: 5.9
Requires PHP: 7.0
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: generic

Generic WordPress Theme © 2015-2022 GenericTools
Generic is distributed under the terms of the GNU GPL
*/



*{
    box-sizing: border-box;
    font-family: Raleway;
    font-weight: 400
}
html, body, h1, h2, h3, h4, h5, strong, b, p, li{
    margin: 0;
    padding: 0;
}

body{background: #f8f8f8}
img{max-width: 100%; max-height: 100%}
h1, h2, h3, h4, h5{font-weight: 600}
p{font-size: 14px; line-height: 20px}
a{display: block; text-decoration: none; color: #000}

form{margin: 0}
input, textarea{outline: none}
button, input[type="submit"]{border: 0; cursor: pointer; background: transparent; padding: 0; outline: 0}

.title-page{font-size: 60px; line-height: 60px; font-weight: 600}
.desc-page{font-size: 16px; margin-top: 25px}

.btn{padding: 16px 0; width: 180px; text-align: center; color: #fff; font-size: 16px; line-height: 16px; font-weight: 500; border-radius: 18px; background: #000; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25)}
.container{width: 1170px; margin: 0 auto}
.mobile-block-on{display: none}

@media(max-width: 1170px){
    .title-page{font-size: 26px; line-height: 26px}
    .desc-page{margin-top: 10px; font-size: 14px}
    
    .container{width: 100%; padding: 0 15px}
    .mobile-block-on{display: block}
}

/* ========== ------- MAIN PAGE ------- ========== */
#main + footer{
    margin-top: 0
}

#main .main{
    width: 100%;
    height: 840px
}
#main .main video{
    object-fit: cover
}

/* About */
#main .about{
    padding: 110px 0;
    background: url(/wp-content/themes/generic/img/other/main-about_background.webp);
    background-position: center !important;
    background-size: cover !important;    
}
#main .about .container{
    display: flex;
    justify-content: space-between
}

#main .about .container .block{
    position: relative;
    width: calc(33.3333333% - 20px)
}
#main .about .container .block h2{
    font-size: 34px;
    line-height: 34px;
    text-transform: uppercase;
    margin-bottom: 15px
}
#main .about .container .block .btn{
    margin-top: 25px
}

#main .about .container a.block{
    cursor: pointer
}

#main .about .container .block .image{
    width: 100%;
    height: auto;
    border-radius: 12px
}
#main .about .container .block .play{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto
}

/* Reviews */
#main .reviews{
    background: url(/wp-content/themes/generic/img/other/reviews-background.webp);
    background-position: center !important;
    background-size: cover !important;
    padding: 100px 0 160px
}

#main .reviews .container h2{
    font-size: 60px;
    line-height: 60px;
    font-weight: 600;
    margin-bottom: 35px
}

#main .reviews .container .splide{
    height: fit-content
}
#main .reviews .container .splide .splide__arrows{
    display: none
}

#main .reviews .container .splide .splide__pagination{
    bottom: -50px;
    padding: 0
}
#main .reviews .container .splide .splide__pagination button{
    border: 2px solid #32d5dc;
    background: transparent;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    opacity: .5
}
#main .reviews .container .splide .splide__pagination button.is-active{
    background: #32d5dc;
    opacity: 1;
    transform: none
}

#main .reviews .container .splide .splide__slide{
    width: calc(33.3333% - 20px) !important;
    margin-right: 30px;
    padding-bottom: 5px
}
#main .reviews .container .splide .splide__slide a{
    cursor: pointer
}
#main .reviews .container .splide .splide__slide .image{
    width: 100%;
    height: 245px;
    background-size: cover !important;
    background-position: center !important;
    position: relative
}
#main .reviews .container .splide .splide__slide .image > img{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto
}

#main .reviews .container .splide .splide__slide .info{
    margin: -55px auto 0;
    padding: 20px;
    width: calc(100% - 60px);
    background: #f6f6f6;
    border-radius: 8px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 1
}
#main .reviews .container .splide .splide__slide .info .text{
    font-family: OS;
    position: relative;
    text-indent: 20px;
}
#main .reviews .container .splide .splide__slide .info .text:before{
    content: '“';
    position: absolute;
    top: 1px;
    left: 0;
    font-size: 30px;
    color: #32d5dc;
    font-family: Trebuchet MS;
    text-indent: 0;  
}
#main .reviews .container .splide .splide__slide .info .text:after{
    content: '”';
    position: absolute;
    bottom: 1px;
    right: 0;
    font-size: 30px;
    color: #32d5dc;
    font-family: Trebuchet MS;
    text-indent: 0;  
}
#main .reviews .container .splide .splide__slide .info .name{
    color: #32d5dc;
    font-family: OS;
    font-style: italic;
    font-weight: 600;
    line-height: 18px;
    margin-top: 14px
}

/* Blog */
#main .blog{
    padding: 100px 0;
    background: url(/wp-content/themes/generic/img/other/main-blog_background.webp);
    background-position: center !important;
    background-size: cover !important;
}
#main .blog h2{
    font-size: 60px;
    line-height: 60px;
}

#main .blog .container > .btn{
    display: block;
    background: transparent;
    border: 1px solid #000;
    margin: 50px auto 0;
    color: #000;
    font-weight: 600
}

@media(max-width: 1170px){
    #main .main{
        height: 230px
    }
    
    /* About */
    #main .about{
        padding: 10px 0 50px;
        background: url(/wp-content/themes/generic/img/other/main-about_background-mobile.webp)
    }
    #main .about .container{
        flex-wrap: wrap
    }
    #main .about .container .block{
        width: 100%;
        margin-top: 40px
    }
    #main .about .container .block h2{
        margin-bottom: 10px;
        font-size: 20px;
        line-height: 20px;
    }
    #main .about .container .block .btn{
        width: 100%;
        margin-top: 15px;
    }
    
    #main .about .container a.block{
        display: none
    }
    
    /* Donate */
    #main .donate-block{
        margin-top: 50px
    }
    
    /* Reviews */
    #main .reviews{
        background: url(/wp-content/themes/generic/img/other/reviews-background_mobile.webp);
        padding: 50px 0 85px
    }
    #main .reviews .container{
        padding: 0
    }
    #main .reviews .container h2{
        font-size: 26px;
        line-height: 26px;
        padding: 0 15px;
        margin-bottom: 30px
    }
    
    #main .reviews .container .splide .splide__slide{
        width: 100% !important;
        margin-right: 0;
    }
    #main .reviews .container .splide .splide__slide .image{
        height: 270px
    }
    
    #main .reviews .container .splide .splide__pagination{
        bottom: -30px
    }
    
    /* Blog */
    #main .blog{
        padding: 50px 0 50px;
        background: url(/wp-content/themes/generic/img/other/main-blog_background-mobile.webp)
    }
    #main .blog h2{
        font-size: 26px;
        line-height: 26px
    }
    
    #main .blog .blog-block article:nth-of-type(2),
    #main .blog .blog-block article:nth-of-type(3){
        display: none
    }
    
    #main .blog .container > .btn{
        margin-top: 25px
    }
}

/* ========== ------- EVENTS PAGE ------- ========== */
#events .events-block{
    margin: 20px auto 0
}

/* ========== ------- BLOG PAGE ------- ========== */
#blog .blog-block{
    margin-top: 10px
}

/* ========== ------- SINGLE PAGE ------- ========== */
#single h1{
    font-size: 40px;
    line-height: 42px;
    margin-top: 80px
}

#single .image{
    width: 100%;
    height: 585px;
    background-position: center !important;
    background-size: cover !important;
}
#single .image video{
    object-fit: cover
}
#single .links{
    margin: 20px 0 45px
}

#single p{
    margin-top: 20px;
    font-family: OS
}
#single blockquote{
    margin-left: 8px;
    padding-left: 10px;
    border-left: 3px solid #32d5dc
}

#single h2, #single h3{
    font-size: 26px;
    line-height: 28px;
    margin: 40px 0 -5px
}

@media(max-width: 1170px){
    #single h1{
        margin-top: 25px;
        font-size: 18px;
        line-height: 24px
    }
    
    #single .image{
        height: 250px
    }
    #single .links{
        margin: 10px 0 20px
    }
    
    #single p{
        margin-top: 15px
    }
    #single blockquote{
        margin-left: 6px;
    }
    
    #single h2, #single h3{
        font-size: 16px;
        line-height: 20px;
        margin: 30px 0 -5px
    }
}

/* ========== ------- CONTACTS PAGE ------- ========== */
#contacts .content{
    display: flex;
    margin-top: 40px
}

#contacts .content .wpcf7{
    width: calc(100% - 470px);
    background: #fff;
    padding: 50px 100px 55px 30px;
    position: relative
}
#contacts .content .wpcf7 .wpcf7-spinner{
    position: absolute;
    top: 15px;
    right: 15px;
    margin: 0
}
#contacts .content .wpcf7 .wpcf7-response-output{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 4px 15px;
    text-align: center;
    font-size: 14px;
    line-height: 16px
}

#contacts .content .wpcf7 form{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}
#contacts .content .wpcf7 form label{
    margin-bottom: 20px;
    width: calc(50% - 16px);
    position: relative;
    height: fit-content
}
#contacts .content .wpcf7 form label img{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto 0
}
#contacts .content .wpcf7 form input, 
#contacts .content .wpcf7 form textarea{
    padding: 16px 20px;
    font-size: 16px;
    line-height: 16px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 18px;
    width: 100%
}
#contacts .content .wpcf7 form textarea{
    height: 130px
}
#contacts .content .wpcf7 form .btn{
    margin: 40px auto 0 0;
    padding: 16px;
    width: 180px;
    font-size: 16px;
    line-height: 16px;
    border-radius: 18px;
    background: #000;
}

#contacts .content .info{
    width: 470px;
    background: #eef3f8;
    padding: 0 45px;
    display: flex;
    flex-direction: column;
    justify-content: center
}
#contacts .content .info hr{
    margin: 30px 0;
    background: rgba(0, 0, 0, .20);
    height: 1px;
    border: 0
}

#contacts .content .info .item{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center
}
#contacts .content .info .item .icon{
    width: 45px;
    height: 45px;
    background: #000;
    border-radius: 6px;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center
}
#contacts .content .info .item .name{
    width: calc(100% - 45px);
    padding-left: 15px;
    font-size: 24px;
    line-height: 24px;
    font-weight: 600
}
#contacts .content .info .item .desc{
    width: 100%;
    font-size: 18px;
    line-height: 18px;
    margin-top: 10px
}
#contacts .content .info .item .desc:nth-of-type(2){
    margin-top: 20px
}

#contacts iframe{
    margin-top: 100px;
    border: 0;
    width: 100%;
    height: 425px
}

@media(max-width: 1170px){
    #contacts + footer{
        margin-top: 0
    }
    #contacts .content{
        margin-top: 30px;
        flex-direction: column
    }
    
    #contacts .content .wpcf7{
        width: 100%;
        padding: 40px 15px
    }
    #contacts .content .wpcf7 .wpcf7-spinner{
        top: inherit;
        right: inherit;
        bottom: 53px;
        left: 30px
    }
    
    #contacts .content .wpcf7 form label{
        width: 100%;
        margin-bottom: 15px
    }
    #contacts .content .wpcf7 form .btn{
        margin-top: 30px;
        width: 100%
    }
    #contacts .content .info{
        width: 100%;
        padding: 50px 15px;
        margin-top: 50px
    }
    
    #contacts iframe{
        height: 580px;
        margin-top: 50px;
        width: calc(100% + 30px);
        margin-left: -15px;
    }
}

/* ========== ------- DONATE PAGE ------- ========== */
#donate .donate-block{
    margin-top: 40px
}

#donate + footer{
    margin-top: 0
}

@media(max-width: 1170px){
    #donate .donate-block{
        margin-top: 30px
    }
}

/* ========== ------- RESOURCES PAGE ------- ========== */
#resources .all-block{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}
#resources .all-block .block{
    display: flex;
    align-items: center;
    width: calc(50% - 30px);
    margin-top: 30px
}

#resources .all-block .block .image{
    width: 170px;
    height: 140px;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: #fff;
    box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, 0.1);
}

#resources .all-block .block .content{
    width: calc(100% - 170px);
    padding-left: 30px;
}
#resources .all-block .block .content h2{
    font-size: 32px;
    line-height: 32px;
    text-transform: uppercase;
    letter-spacing: 1.32px;
    margin-bottom: 12px;
}
#resources .all-block .block .content a{
    font-size: 16px;
    line-height: 16px;
    margin-top: 4px;
    color: #0026ef;
    text-decoration: underline
}

@media(max-width: 1170px){
    #resources .all-block{
        justify-content: center;
        margin-top: -10px
    }
    #resources .all-block .block{
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 40px;
    }
    
    #resources .all-block .block .content{
        width: 100%;
        padding-left: 0;
        text-align: center;
        margin-top: 20px
    }
    #resources .all-block .block .content h2{
        font-size: 20px;
        line-height: 20px;
        letter-spacing: 0.8px;
        margin-bottom: 10px;
    }
}

/* ========== ------- HEADER ------- ========== */
header{
    width: 100%;
    padding: 10px 0;
    background: url(/wp-content/themes/generic/img/other/header-background.webp);
    background-position: center;
    background-repeat: no-repeat
}
header .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative
}

header .container nav{
    display: flex;
    align-items: center
}
header .container nav a{
    margin: 0 20px;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 14px
}

header .container nav a.active{
    position: relative;
    font-weight: 600;
    color: #32d5dc
}
header .container nav a.active:before{
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 30px;
    height: 1px;
    background: #32d5dc
}

header .container nav .search{
    margin: 0 20px 0 50px
}

header .container nav .apply{
    font-size: 16px;
    color: #32d5dc;
    font-weight: 700;
    position: relative;
    text-transform: none;
    cursor: pointer;
    margin: 0 20px
}
header .container nav .apply:before{
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #32d5dc
}

header .container nav .btn{
    width: 170px;
    padding: 13px 0;
    margin: 0 0 0 20px;
    display: flex;
    justify-content: center;
    background: #32d5dc;
    text-transform: none;
    box-shadow: none
}
header .container nav .btn img{
    margin-right: 10px
}

@media(max-width: 1170px){
    header{
        background: url(/wp-content/themes/generic/img/other/header-background_mobile.webp);
        background-size: cover
    }
    header .container nav{
        display: none
    }
    header .container > a img{
        height: 50px;
        width: 50px
    }
    
    header form{
        position: relative;
        width: 65%
    }
    header form button{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 10px;
        margin: auto 0;
        width: 18px;
        opacity: .4;
    }
    header form input{
        width: 100%;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 6px;
        padding: 12px 10px 12px 38px;
        border: 0;
        font-size: 12px;
        line-height: 12px
    }
}

/* ========== ------- FOOTER ------- ========== */
footer{
    width: 100%;
    margin-top: 110px
}
footer .container{
    display: flex;
    justify-content: space-between
}

/* Top */
footer .top{
    padding: 60px 0 65px;
    background: #1d1d1d
}
footer .top .container .column{
    width: 275px
}
footer .top .container .column p, footer .top .container .column a{
    color: #fff
}

footer .top .container .column:nth-of-type(1) p.desc{
    margin: 25px 0 30px;
}
footer .top .container .column:nth-of-type(2) > a{
    margin-bottom: 14px;
    font-size: 16px;
    line-height: 16px;
}
footer .top .container .column:nth-of-type(3) p.desc{
    font-size: 16px;
    line-height: 28px;
    font-weight: 500;
    margin-top: -5px
}

footer .top .container .column .btn{
    background: #32d5dc;
    margin-top: 25px
}
footer .top .container .column .untitle{
    font-size: 18px;
    line-height: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase
}

footer .top .container > .phone{
    display: none !important
}
footer .top .container .phone{
    display: flex;
    align-items: center
}
footer .top .container .phone div{
    padding-left: 10px
}
footer .top .container .phone div span{
    font-size: 16px;
    line-height: 16px;
    font-family: OS;
    margin-bottom: 3px;
    display: block;
}
footer .top .container .phone div p{
    font-size: 22px;
    line-height: 22px;
    color: #1fac13;
    font-weight: 600;
    letter-spacing: 1.1px;
    font-family: OS
}

/* Bot */
footer .bot{
    padding: 25px 0;
    background: #2a2a48
}
footer .bot .container p{
    font-family: OS
}
footer .bot .container p, footer .bot .container a{
    font-size: 16px;
    line-height: 15px;
    color: #fff
}

@media(max-width: 1170px){
    footer{
        margin-top: 50px
    }
    footer .container{
        flex-wrap: wrap
    }
    
    footer .top .container > .phone{
        display: flex !important;
        justify-content: center;
        color: #fff;
        margin-top: 40px;
        width: 100%;
    }
    footer .top .container .column > .phone{
        display: none
    }
    
    footer .top .container .column .untitle{
        font-size: 16px;
        line-height: 16px;
        margin-top: 15px;
        margin-bottom: 16px;
    }
    footer .top .container .column .btn{
        padding: 19px 0;
        width: 100%;
        margin-top: 30px
    }
    
    footer .top .container .column .logo{
        width: 100%;
        text-align: center
    }
    
    footer .top{
        padding: 50px 0
    }
    footer .top .container .column{
        width: 100%;
        text-align: center
    }
    footer .top .container .column:nth-of-type(1) p.desc{
        margin: 8px 0 10px;
        padding: 0 15%
    }
    footer .top .container .column:nth-of-type(2) > a{
        margin-bottom: 10px
    }
    
    footer .bot{
        padding: 15px 0
    }
    footer .bot .container p, footer .bot .container a{
        font-size: 14px;
        line-height: 14px
    }
}

/* ========== ------- FONTS ------- ========== */
@font-face {
    font-family: Raleway;
    src: url(/wp-content/themes/generic/assets/font-family/Raleway.ttf);
}
@font-face {
    font-family: OS;
    src: url(/wp-content/themes/generic/assets/font-family/OpenSans.ttf);
}

/* ========== ------- BINDS ------- ========== */
/* Breadcrumbs */
.breadcrumbs{display: flex; flex-wrap: wrap; margin: 50px auto 60px}
.breadcrumbs a{position: relative; margin-right: 17px; color: #9f9f9f}
.breadcrumbs a:before{content: '/'; position: absolute; top: 0; right: -13px}
.breadcrumbs a, .breadcrumbs p{font-size: 15px; line-height: 15px}

@media(max-width: 1170px){
    .breadcrumbs{margin: 30px auto}
}

/* Pagination */
.pagination{display: flex; align-items: center; justify-content: center; margin-top: 60px}
.pagination .prev, .pagination .next{margin: 0 30px}
.pagination .page-numbers{font-family: OS; font-size: 14px; line-height: 16px; font-weight: 500; margin: 0 15px}
.pagination .page-numbers.current{width: 35px; height: 35px; border-radius: 50%; background: #6f52c6; display: flex; justify-content: center; align-items: center; color: #fff; margin: 0; box-shadow: 0px 10px 24px rgba(0, 0, 0, 0.08)}

@media(max-width: 1170px){
    .pagination{margin-top: 40px}
}

/* Links */
.links{display: flex; align-items: center}

.links a{font-size: 12px; line-height: 14px; letter-spacing: 0.6px; font-weight: 500; display: flex; align-items: center; text-decoration: underline}
.links a:nth-of-type(1){text-decoration: none}

.links a img{margin-right: 7px; max-height: 14px}
.links span{font-size: 12px; line-height: 14px; letter-spacing: 0.6px; font-weight: 500; display: block; margin: 0 15px}

/* Donate block */
.donate-block{background-size: cover !important; background-position: center !important; padding: 75px 0}
.donate-block form{width: 500px; padding: 75px 45px; border-radius: 42px; background: #fff; box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.25)}

.donate-block form h2{font-size: 34px; line-height: 34px; margin-bottom: 40px}
.donate-block form h3{font-size: 20px; line-height: 20px; font-family: OS}

.donate-block form .time{display: flex; align-items: center; margin: 20px 0 35px}
.donate-block form .time label{display: flex; align-items: center; margin-right: 45px; font-size: 16px; line-height: 20px; font-family: OS; font-weight: 500; cursor: pointer}
.donate-block form .time label input{margin: 0 10px 0 0; width: 22px; height: 22px}

.donate-block form .price{margin-top: 20px; width: 100%; position: relative}
.donate-block form .price input{font-size: 18px; line-height: 18px; border: 1px solid #000; border-radius: 42px; padding: 14px 14px 14px 61px; width: 100%; font-weight: 500}
.donate-block form .price span{position: absolute; top: 0; left: 0; width: 51px; height: 51px; background: #000; border-radius: 50%; color: #fff; text-align: center; font-size: 24px; line-height: 51px; font-family: OS; font-weight: 600}

.donate-block form .amount{display: flex; margin-top: 20px}
.donate-block form .amount input{display: none}
.donate-block form .amount input:checked + label{background: transparent; color: #000}
.donate-block form .amount label{width: 62px; padding: 12px 0; background: #000; border-radius: 4px; font-size: 18px; line-height: 14px; font-family: OS; color: #fff; font-weight: 700; margin-right: 18px; border: 1px solid #000; cursor: pointer; text-align: center; transition: all .15s ease}
.donate-block form .amount label:nth-last-of-type(1){margin-right: 0}

.donate-block form .btn{margin-top: 50px}
.donate-block form .btn_other{display: block; padding: 12px 0; width: 225px; text-align: center; border-radius: 4px; color: #fff; background: #000; font-family: OS; font-size: 18px; line-height: 14px; font-weight: 400; margin-top: 20px}

@media(max-width: 1170px){
    .donate-block{padding: 0 0 290px; position: relative}
    .donate-block:before{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 250px; background-position: bottom !important; background-size: cover !important}
    
    .donate-block form{padding: 35px 20px 45px; width: 100%}
    .donate-block form h2{font-size: 20px; line-height: 20px; margin-bottom: 18px}
    .donate-block form h3{font-size: 14px; line-height: 14px}
    
    .donate-block form .time{margin: 10px 0 20px}
    .donate-block form .time label{font-size: 14px; line-height: 18px}
    .donate-block form .time label input{width: 18px; height: 18px; margin: 0 7px 0 0}
    
    .donate-block form .price span{width: 40px; height: 40px; line-height: 40px}
    .donate-block form .price input{font-size: 14px; line-height: 18px; padding: 10px 12px 10px 50px}
    
    .donate-block form .amount label{width: 50px; padding: 9px 0; font-size: 14px; line-height: 14px; margin-right: 10px}
    
    .donate-block form .btn{margin: 40px auto 0; background: #32d5dc; display: block}
    .donate-block form .btn_other{font-weight: 600; padding: 0 0 3px; width: fit-content; margin: 30px auto 0; border-bottom: 1px solid #000; color: #000; background: transparent; border-radius: 0}
}

/* Blog block */
.blog-block{display: flex; flex-wrap: wrap}

.blog-block article{width: calc(33.3333333% - 20px); margin-top: 30px; margin-right: 30px; background: #fbfbfb; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 12px}
.blog-block article:nth-of-type(3n){margin-right: 0}

.blog-block article .image{height: 250px; background-size: cover !important; background-position: center !important; border-radius: 12px 12px 0 0; position: relative}
.blog-block article .image > img{position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto}

.blog-block article .info{padding: 25px 16px 40px}
.blog-block article .info .title{font-family: OS; font-size: 18px; line-height: 24px; font-weight: 600; margin: 18px 0 12px}
.blog-block article .info .desc{line-height: 18px}
.blog-block article .info .btn{margin: 35px auto 0}

@media(max-width: 1170px){
    .blog-block article{width: 100%; margin-right: 0; margin-top: 25px}
}

/* Events block */
.events-block{display: flex; justify-content: space-between; margin: 80px auto 120px}

.events-block .images{width: 530px; margin-top: 20px}
.events-block .images div{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center}
.events-block .images div img{border-radius: 40px}
.events-block .images div img:nth-of-type(1), .events-block .images div img:nth-of-type(2){width: calc(50% - 18px)}
.events-block .images div img:nth-of-type(3){width: 100%; margin-top: 36px}

.events-block .events{width: 530px}
.events-block .events .item{width: 100%; border: 2px solid #32d5dc; border-radius: 50px; padding: 28px 35px 28px 90px; position: relative; margin-top: 20px}
.events-block .events .item h2{font-size: 24px; line-height: 32px; font-weight: 700; padding-right: 15%}
.events-block .events .item .btn{margin: 25px auto 0; letter-spacing: 1.6px; cursor: pointer; display: block}

.events-block .events .item .info{display: flex; align-items: center; margin-top: 12px}
.events-block .events .item .info .desc{display: flex; align-items: center; font-size: 14px; line-height: 14px; color: rgba(0, 0, 0, .6); font-family: OS}
.events-block .events .item .info .desc:nth-of-type(1){margin-right: 15px}
.events-block .events .item .info .desc img{margin-right: 7px; height: 18px}

.events-block .events .item .time{width: 110px; height: 100px; background: #32d5dc; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; text-align: center; color: #fff; font-family: OS; font-size: 42px; line-height: 42px; font-weight: 700; font-family: OS; position: absolute; top: 0; bottom: 0; left: -40px; margin: auto 0}
.events-block .events .item .time span{display: block; font-size: 14px; line-height: 14px; font-weight: 600; font-family: OS; color: #fff; margin-top: 3px}

@media(max-width: 1170px){
    .events-block{margin: 30px auto 50px}
    .events-block .images{display: none}
    
    .events-block .events{width: 100%; padding: 0 15px; margin-top: -10px}
    .events-block .events .item{padding: 40px 25px 35px; margin-top: 50px}
    .events-block .events .item h2{font-size: 16px; line-height: 18px; text-align: center; margin-bottom: -3px; padding: 0 12%}
    .events-block .events .item .btn{margin: 20px auto 0}
    
    .events-block .events .item .time{width: 70px; height: 60px; font-size: 21px; line-height: 21px; top: -30px; left: 0; right: 0; margin: 0 auto}
    .events-block .events .item .time span{font-size: 12px; line-height: 12px; margin-top: 0}
    
    .events-block .events .item .info{flex-direction: column; align-items: flex-start}
    .events-block .events .item .info .desc{margin: 8px 0 0; width: 100%}
    .events-block .events .item .info .desc img{width: 18px}
}

/* Popup search */
#popup-search{border-radius: 12px; width: 600px}
#popup-search input[type="text"]{padding: 8px 12px; border: 1px solid #32d5dc; border-radius: 6px 0 0 6px; font-size: 14px; line-height: 18px; width: calc(100% - 100px); float: left; font-weight: 500; font-family: OS}
#popup-search input[type="submit"]{padding: 9px 0; font-size: 16px; line-height: 18px; width: 100px; background: #32d5dc; color: #fff; cursor: pointer; float: left; border: 0}

/* Popup event */
#popup-event, #popup-apply{width: 500px; border-radius: 12px; padding: 24px}
#popup-event input[type="text"], #popup-apply input[type="text"], #popup-event input[type="tel"], #popup-apply input[type="tel"], #popup-event input[type="email"], #popup-apply input[type="email"], #popup-event textarea, #popup-apply textarea{width: 100%; border: 1px solid #32d5dc; padding: 10px 14px; font-size: 16px; line-height: 18px; margin-bottom: 18px; font-family: OS; border-radius: 4px}
#popup-event textarea, #popup-apply textarea{height: 130px}
#popup-event input[type="submit"], #popup-apply input[type="submit"]{width: 135px; background: #32d5dc; padding: 6px 0; font-size: 18px; line-height: 24px; text-align: center; color: #fff; font-weight: 500}

#popup-event .wpcf7-spinner, #popup-apply .wpcf7-spinner{position: absolute; right: 24px; bottom: 30px; margin: 0}
#popup-event .wpcf7-response-output, #popup-apply .wpcf7-response-output{position: absolute; top: calc(100% + 25px); left: 0; width: 100%; padding: 5px 10px; text-align: center; font-size: 14px; line-height: 16px; background: #fff; margin: 0; border-radius: 6px; font-family: OS; font-weight: 500}

@media(max-width: 1100px){
    #popup-event, #popup-apply{width: calc(100% - 30px)}
}

/* ========== ------- MENU - HAMBURGER ------- ========== */
header .container .hamb-menu #menu__toggle{
    opacity: 0;
    position: absolute
}
header .container .hamb-menu #menu__toggle:checked ~ .menu__box{
    visibility: visible;
    left: 0;
}
header .container .hamb-menu #menu__toggle:checked ~ .menu__btn > span{
    transform: rotate(45deg);
}
header .container .hamb-menu #menu__toggle:checked ~ .menu__btn > span::before{
    top: 0;
    transform: rotate(0);
}
header .container .hamb-menu #menu__toggle:checked ~ .menu__btn > span::after{
    top: 0;
    transform: rotate(90deg);
}

header .hamb-menu{
    width: 25px
}
header .hamb-menu .menu__btn{
    display: flex;
    align-items: center;
    position: absolute;
    z-index: 6;
    width: 25px;
    height: 25px;
    cursor: pointer;
    top: 0;
    bottom: 0;
    right: 15px;
    margin: auto 0
}
header .hamb-menu .menu__btn span::before{
    content: '';
    top: -8px;
}
header .hamb-menu .menu__btn span::after{
    content: '';
    top: 8px;
}
header .hamb-menu .menu__btn span, header .hamb-menu .menu__btn span::before, header .hamb-menu .menu__btn span::after{
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #32d5dc;
    transition-duration: .25s;
}

header .hamb-menu .menu__box{
    display: block;
    position: fixed;
    visibility: hidden;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    z-index: 5;
    margin: 0;
    background: #fff;
    transition-duration: .25s;
    overflow: auto;
    padding: 70px 20px 0 40px;
}
header .hamb-menu .menu__box a{
    font-size: 22px;
    line-height: 22px;
    margin-bottom: 20px;
    font-weight: 500
}
header .hamb-menu .menu__box a.active{
    position: relative;
    color: #32d5dc
}
header .hamb-menu .menu__box a.active:before{
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    height: 1px;
    width: 45px;
    background: #32d5dc
}

header .hamb-menu .menu__box a.apply{
    font-weight: 700;
    color: #32d5dc;
    margin-top: 55px;
    position: relative;
    width: fit-content
}
header .hamb-menu .menu__box a.apply:before{
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 1px;
    width: 100%;
    background: #32d5dc
}

header .hamb-menu .menu__box a.btn{
    margin: 30px 0 0;
    background: #32d5dc;
    padding: 13px 0;
    font-size: 14px;
    line-height: 14px;
    display: flex;
    justify-content: center
}
header .hamb-menu .menu__box a.btn img{
    margin-right: 5px
}