* {
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Open Sans', sans-serif;
    background: #1f1f21;
}
a { text-decoration: none; }
li {list-style: none;}

.chapter_header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 40px 20px 0;
}

.chapter_header h1{
    display: inline-block;
    border-bottom: 3px solid chocolate;
    padding-bottom: 8px;
    /*margin-left: 10%;*/
    color: #CCCCCC;
}

.chapter_header h2{
    display: inline-block;
    border-bottom: 1px solid goldenrod;
    padding-bottom: 6px;
    /*margin-left: 10%;*/
    color: #CCCCCC;
}

/*------------ Font Awesome -------------*/
.fa-grey {
    color: #CCCCCC;
}
.fa-orange {
    color: chocolate;
}

/*-------------------HEADER------------------------*/

.block-header{
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 20px;
    color: aliceblue;
    align-items: center;
    height: 28px;
}

.header-brand {
    color: aliceblue;
    font-size: 24px;
    /*margin-top: 8px;*/
    margin-left: 20px;
    font-family: 'Pattaya', sans-serif;
}

.header-items{
    display: grid;
    grid-auto-flow: column;
    grid-gap: 40px;
    list-style: none;
    padding-block-start: 0;
}

.header-items li a{
    color: aliceblue;
}

.header-items li:hover{
    border-bottom: 2px solid chocolate;
    margin-bottom: -2px;
}

/*-----------------LOGO picture-----------------*/

.piclogo-header{grid-area: picheader}
.piclogo-empty{grid-area: picempty}
.piclogo-description{grid-area: picdescr}

.block-piclogo {
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-rows: auto;
    grid-template-areas:
     'picheader picheader'
     'picempty picdescr'
     'picempty picdescr'
     'picempty picdescr';
    width:100%;
    height: 440px;
    background-image: url('../img/logo.jpg');
    background-repeat: no-repeat;
    background-position: center;
}

.piclogo-header p{
    font-size: 80px;
    font-weight: bold;
    -webkit-text-stroke: 3px #122b40;
    font-family: "Arial Black";
    color: aliceblue;
    text-align: center;
}

.piclogo-description{
    background-color: rgba(0,0,0,.4);
    border-radius: 6px;
    text-align: left;
    padding: 20px 20px;
    margin: 10px;

}

.piclogo-description p{
    padding: 6px 6px;
}

.logo-description-text {
    padding: 16px;
    font-size: 20px;
    font-weight: bold;
    color: aliceblue;
}

/*-----------------SERVICES-----------------*/

.block-services{
    display: grid;
    grid-template-columns: 25% 70%;
    grid-template-rows: auto;
    column-gap: 40px;
    row-gap: 40px;
    padding: 40px 0;
}

.srv-col-1 {
    display: grid;
    justify-items: center;
    align-items: center;
}

.srv-col-1 img{
    width: 66%;
}
.srv-col-2 {
    padding: 0 40px;
}

.srv-col-2 h1{
    padding: 0 160px;
}

.service-list-icon{
    font-size: 260px;
    color: #3F3F3F;
}

.our-services-list {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto;
    column-gap: 40px;
    padding: 20px 40px;
}

.srv-col-2 h1{
    display: inline-block;
    border-bottom: 3px solid chocolate;
    padding-bottom: 8px;
    margin-left: 10%;
    color: #CCCCCC;
}

.srv-col-2 p{
    margin: 30px 0 10px 0;
    color: darkgray;
}

.our-services-list .list-text {
    font-size: 16px;
    padding-left: 16px;
}


/*--------------CONTACTS------------------*/
/*https://maps-generator.com/ru*/
.contacts-wrapper{
    padding: 20px 40px;
}

.contacts-wrapper p{
    padding-top: 24px;
    color: #CCCCCC;
}

.contact_text {
    display: inline-block;
    vertical-align: 6px;
    padding-left: 30px;
}
#contact-viber {
    font-size: 26px;
    vertical-align: 4px;
}

.contacts_map_wrapper {
    margin: 16px 16px 16px 16px;
    /*padding: 10px 10px 10px 10px;*/
    border: 1px solid dimgray;
    border-radius: 10px;
}
.contacts_map {
    padding: 30px 30px;
}



/*--------------EXAMPLES CATEGORIES (FLIP CARD)-------------*/

/* https://www.w3schools.com/howto/howto_css_flip_card.asp */
.our_examples_list {
    margin: 20px 60px 20px 60px;
}
.cards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to
demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 460px;
    height: 300px;
    border: 2px solid dimgray;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    border-radius: 12px;
    margin: 16px 16px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
/*.flip-card:hover .flip-card-inner {*/
/*    transform: rotateY(180deg);*/
/*}*/
/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    border-radius: 12px;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-image: url('../img/examples/00_coming_soon.png');
    background-color: #bbb;
    color: black;
    background-repeat: no-repeat;
    background-position: center;
}
#card-examples-1 {
    background-image: url('../photos/categories/01.jpg');
}
#card-examples-2 {
    background-image: url('../photos/categories/02.jpg');
}
#card-examples-3 {
    background-image: url('../photos/categories/03.jpg');
}
#card-examples-4 {
    background-image: url('../photos/categories/04.jpg');
}
#card-examples-5 {
    background-image: url('../photos/categories/05.jpg');
}
#card-examples-6 {
    background-image: url('../photos/categories/06.jpg');
}
#card-examples-7 {
    background-image: url('../photos/categories/07.jpg');
}
#card-examples-8 {
    background-image: url('../photos/categories/08.jpg');
}
.flip-card-front .card_title {
    background-color: rgba(0, 0, 0, .7);
    border-radius: 6px;
    font-size: 36px;
    position: absolute;
    margin-left: 55%;
    margin-right: 1%;
    margin-top: 48%;
    text-align: left;
}

.card_title.short-text{
    background-color: rgba(0, 0, 0, .7);
    margin-left: 72%;
    margin-right: 1%;
}

.flip-card-front .card_title p {
    padding: 12px 16px;
    font-size: 20px;
    font-weight: normal;
    color: aliceblue;
}
/* Style the back side */
/*.flip-card-back {*/
/*    background-image: linear-gradient(to left, #49535C, #1f1f21);*/
/*    color: white;*/
/*    border-radius: 6px;*/
/*    transform: rotateY(180deg);*/
/*}*/
/*.flip-card-back .back_content {*/
/*    padding: 46px 16px;*/
/*}*/
/*.flip-card-back .back_content .content_descr {*/
/*    padding-top: 20px;*/
/*}*/
/*.flip-card-back .back_content .content_descr hr {*/
/*    border-top: 1px solid #122b40;*/
/*    margin-top: 15px;*/
/*    width: 160px;*/
/*}*/
/*.back_content h1 {*/
/*    margin-bottom: 12px;*/
/*}*/
/*.back_content_link_wrapper {*/
/*    margin-top: 22px;*/
/*}*/
/*.back_content_link_wrapper .back_content_link_btn {*/
/*    background: #83919E none repeat scroll 0 0;*/
/*    border: 1px solid white;*/
/*    border-radius: 4px;*/
/*    color: white;*/
/*    outline: medium none;*/
/*    padding: 12px;*/
/*    text-decoration: none;*/
/*}*/
/*.back_content_link_wrapper .back_content_link_btn:hover {*/
/*    Background-color: #F3F3F3;*/
/*    Color: #1f1f21;*/
/*    font-weight: bold;*/
/*}*/
/*.fa-goto-arrow{*/
/*    padding-right: 12px;*/
/*    vertical-align: -4px;*/
/*}*/







/*=================== MOBILE ========================= */

@media (max-width: 1600px) {
    .block-piclogo {
        grid-template-areas:
                'picheader  picheader'
                'picdescr picdescr'
                'picdescr picdescr'
                'picdescr picdescr';
    }
    .piclogo-header p{
        font-size: 60px;
        -webkit-text-stroke: 1px #122b40;
    }
    .piclogo-description{
        margin:10px
    }
    /*.block-services {*/
    /*    grid-template-columns: 5% 95%;*/
    /*}*/
    /*.service-list-icon{*/
    /*    font-size: 80px;*/
    /*    color: #3F3F3F;*/
    /*    padding-left: 20px;*/
    /*}*/
    .block-services {
        grid-template-columns: 100%;
    }
    .block-services .srv-col-1{
        display: none;
    }

    .flip-card {
        background-color: transparent;
        width: 760px;
        height: 500px;
        border: 2px solid dimgray;
        perspective: 1000px; /* Remove this if you don't want the 3D effect */
        border-radius: 12px;
        margin: 16px 16px;
    }

    #card-examples-1 {
        background-image: url('../photos/categories/01_mobile.jpg');
    }
    #card-examples-2 {
        background-image: url('../photos/categories/02_mobile.jpg');
    }
    #card-examples-3 {
        background-image: url('../photos/categories/03_mobile.jpg');
    }
    #card-examples-4 {
        background-image: url('../photos/categories/04_mobile.jpg');
    }
    #card-examples-5 {
        background-image: url('../photos/categories/05_mobile.jpg');
    }
    #card-examples-6 {
        background-image: url('../photos/categories/06_mobile.jpg');
    }
    #card-examples-7 {
        background-image: url('../photos/categories/07_mobile.jpg');
    }
    #card-examples-8 {
        background-image: url('../photos/categories/08_mobile.jpg');
    }
}

@media (max-width: 786px) {
    .block-header{
        grid-template-columns: 1fr;
        justify-items: center;
        height: 36px;
    }
    .block-piclogo {
        grid-template-areas:
                'picheader picheader'
                'picdescr picdescr'
                'picdescr picdescr'
                'picdescr picdescr';
    }
    .piclogo-header p{
        font-size: 60px;
    }
    .piclogo-description p{
        /*padding-left: 20%;*/
    }
    .block-services {
        grid-template-columns: 100%;
    }
    .block-services .srv-col-1{
        display: none;
    }

    .flip-card {
        background-color: transparent;
        width: 760px;
        height: 500px;
        border: 2px solid dimgray;
        perspective: 1000px; /* Remove this if you don't want the 3D effect */
        border-radius: 12px;
        margin: 16px 16px;
    }

    #card-examples-1 {
        background-image: url('../photos/categories/01_mobile.jpg');
    }
    #card-examples-2 {
        background-image: url('../photos/categories/02_mobile.jpg');
    }
    #card-examples-3 {
        background-image: url('../photos/categories/03_mobile.jpg');
    }
    #card-examples-4 {
        background-image: url('../photos/categories/04_mobile.jpg');
    }
    #card-examples-5 {
        background-image: url('../photos/categories/05_mobile.jpg');
    }
    #card-examples-6 {
        background-image: url('../photos/categories/06_mobile.jpg');
    }
    #card-examples-7 {
        background-image: url('../photos/categories/07_mobile.jpg');
    }
    #card-examples-8 {
        background-image: url('../photos/categories/08_mobile.jpg');
    }
}


/* ------------------ POP-UP PICTURES----------------*/

/*
jQuery popup plugin
https://dimsemenov.com/plugins/magnific-popup/
https://dimsemenov.com/plugins/magnific-popup/documentation.html
*/
.example-card {
    padding: 12px 12px;
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    width: 440px;
    height: 420px;
    margin: 16px 16px 16px 16px;
}

.example-row-thumbnails {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /*gap: 2rem;*/
}

.example-row-thumbnails a {
    padding-right: 6px;
}

.example-row-thumbnails img {
    object-fit: cover;
    width: 75px;
    height: 75px;
}

.example-main-pic {
    padding: 0 14px;
}

.example-main-pic img {
    object-fit: cover;
    width: 400px;
    height: 280px;
    border-radius: 6px;
}

.example-card .example-description p {
    padding: 6px 4px;
    font-size: 14px;
    display: table;
    margin: 0 auto;
    color: #BDBDBD;
    /*font-family: 'Open Sans', sans-serif;*/
    font-family: 'Tahoma';
}

.examples_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}




/*-------------------FOOTER --------------------- */
footer {
    width: 100%;
    height: auto;
    background: #1f1f21;
    padding: 20px 0 20px 0;
}
.footer_wrapper {
    display: flex;
    justify-content: center;
    color: #bbbbbb;
}
.footer_wrapper p {
    font-size: 12px;
}
.obs{
    padding-top: 13px;
    font-family: 'Consolas' ;
}

/* ================ END ====================  */