:root {

}

@font-face {
    font-family: "RobotoB";
    src: url("fonts/roboto/Roboto-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "RobotoL";
    src: url("fonts/roboto/Roboto-Light.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "RobotoM";
    src: url("fonts/roboto/Roboto-Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "RobotoT";
    src: url("fonts/roboto/Roboto-Thin.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

::-webkit-scrollbar {
    width: 3vh;
    height: auto;
}

::-webkit-scrollbar-track {
    border-radius: 0;
}

::-webkit-scrollbar-thumb {
    border-radius: 100px;
    border: 5px solid transparent;
    background-clip: content-box;
    background-color: #d5d5d5;
    transition: 0.25s;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #cccccc;
    transition: 0.25s;
}

* {
    margin: 0;
    padding: 0;
}

html {
    background-color: white;
}

header {
    margin: 14vh 0 14vh 0;

}

header img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 24vh;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
    margin-bottom: 13vh;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    caret-color: transparent;
}

header h1 {
    font-family: RobotoB;
    font-size: 3.3vh;
    text-align: center;
    margin-bottom: 2.1vh;
    user-select: none;
}

.header_h2 {
    font-family: RobotoT;
    font-size: 1.91vh;
    text-align: center;
    margin-bottom: 10vh;
    letter-spacing: 0.32vh;
    user-select: none;
}

.header_h2_mobile {display: none}

.desktop_header_ul {
    display: block;
}

.mobile_fix1 {
    display:none;
}

.desktop_header_ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;

    text-align: center;
    margin: 0 16vh 0 16vh;

}

.desktop_header_ul1 { grid-area: 1 / 1 / 2 / 2; }
.desktop_header_ul2 { grid-area: 1 / 2 / 2 / 3; }
.desktop_header_ul3 { grid-area: 1 / 3 / 2 / 4; }

.ul_h2 {
    font-family: RobotoT;
    font-size: 1.92vh;
    letter-spacing: 0.37vh;
    user-select: none;
}

.desktop_header_ul a {
    text-decoration: none;
    color: #313131;
    transition: 0.25s;
}

.desktop_header_ul a:hover {
    color: #8a8a8a;
}

.mobile_fix1 a {
    text-decoration: none;
    color: #313131;
    transition: 0.25s;
}

.mobile_fix1 a:hover {
    color: #8a8a8a;
}



.image_columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 4vh;
    grid-row-gap: 4vh;
}

.image_columns {
    margin: 0 16vh 0 16vh;
}

.image_columns div img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: 0.2s ease-in;
    transform: scale(1.1);
    aspect-ratio: 4 / 5;
}

.popup > div {
    margin-bottom: 4vh;
    overflow: hidden;
    flex-grow: 1;

}

.image_columns div img:not(:last-child) {
    margin-bottom: 3.15vh;
}

.image_column_1 { grid-area: 1 / 1 / 2 / 2; }
.image_column_2  { grid-area: 1 / 2 / 2 / 3; }
.image_column_3  { grid-area: 1 / 3 / 2 / 4; }

.image_column_mobile {
    display: none;
}







.popup img{
    cursor: pointer;
    width: 80vh;
    height: auto;
}

.show{
    z-index: 999;
    display: none;
}

.show .overlay{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.66);
    position: fixed;
    top: 0;
    left: 0;
}

.show .img-show{
    width: auto;
    height: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
}

.img-show img{
    width: auto;
    height: 100%;
}

.img-show span{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 99;
    cursor: pointer;
}







footer {
    border-top: #727272 0.3vh solid;
    margin: 8vh 16vh 0 16vh;
}

footer p {
    font-family: RobotoL;
    font-size: 2.2vh;
    text-align: center;
    margin: 10vh 0 10vh 0;
    color: #727272;
    user-select: none;
}








.comms {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 4vh;
    grid-row-gap: 0;
}

.comm_1 { grid-area: 1 / 1 / 2 / 2; }
.comm_2 { grid-area: 1 / 2 / 2 / 3; }
.comm_3 { grid-area: 1 / 3 / 2 / 4; }
.comm_4 { grid-area: 2 / 1 / 3 / 2; }
.comm_5 { grid-area: 2 / 2 / 3 / 3; }
.comm_6 { grid-area: 2 / 3 / 3 / 4; }
.comm_7 { grid-area: 3 / 1 / 4 / 2; }
.comm_8 { grid-area: 3 / 2 / 4 / 3; }
.comm_9 { grid-area: 3 / 3 / 4 / 4; }
.comm_10 { grid-area: 4 / 1 / 5 / 2; }
.comm_11 { grid-area: 4 / 2 / 5 / 3; }
.comm_12 { grid-area: 4 / 3 / 5 / 4; }
.comm_13 { grid-area: 5 / 1 / 6 / 2; }
.comm_14 { grid-area: 5 / 2 / 6 / 3; }
.comm_15 { grid-area: 5 / 3 / 6 / 4; }
.comm_16 { grid-area: 6 / 1 / 7 / 2; }
.comm_17 { grid-area: 6 / 2 / 7 / 3; }
.comm_18 { grid-area: 6 / 3 / 7 / 4; }
.comm_19 { grid-area: 7 / 1 / 8 / 2; }
.comm_20 { grid-area: 7 / 2 / 8 / 3; }
.comm_21 { grid-area: 7 / 3 / 8 / 4; }

.comm_all:not(:last-child) {
    margin-bottom: 4vh;
}

.comms {
    margin: 0 16vh 0 16vh;
}

.comms_mobile {
    display: none;
}

.comms div {
    margin-bottom: 2vh;
}

.comms div img {
    width: 100%;
    margin-bottom: 1vh;
    aspect-ratio: 16 / 20;
    cursor: pointer;
    object-fit: cover;
    overflow: hidden;
    transition: 0.2s ease-in;
}

.comms a {
    color: #313131;
    transition: 0.25s;
    font-family: RobotoL;
    font-size: 2vh;
    text-decoration-line: underline;
    text-decoration-color: #8a8a8a;
    text-underline-offset: 0.8vh;
}

.comms a:hover {
    color: #8a8a8a;
    text-decoration-color: #8a8a8a;
    text-underline-offset: 0.3vh;
}

.comms p {
    color: #313131;
    transition: 0.25s;
    font-family: RobotoL;
    font-size: 4vh;
}






.about {
    display: grid;
    grid-template-columns: 0.6fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;

    margin: 0vh 41.8vh 15vh 41.8vh;
}

@media (display-mode: fullscreen) {
    .about {
        margin: 0vh 36.5vh 15vh 36.5vh;
    }
}


.about_txt {
    grid-area: 1 / 1 / 2 / 2;
    position:relative;
}

.contacts {
    position: absolute;
    bottom: 0px;
}

.contacts_mobile {
    display: none;
}

.about_img { grid-area: 1 / 2 / 2 / 3; }



.about_h2 {
    font-family: RobotoB;
    font-size: 2vh;
    margin-bottom: 4vh;
}


.about_txt_h1 {
    color: #313131;
    transition: 0.25s;
    font-family: RobotoL;
    font-size: 1.91vh;
    margin-bottom: 4vh;

    letter-spacing: 0.1vh;
}

.about_txt h1:not(:first-child) {
    margin-top: 4vh;
}


.about_txt_p {
    color: #313131;
    transition: 0.25s;
    font-family: RobotoL;
    font-size: 1.91vh;

    letter-spacing: 0.1vh;
}

.about_img img {
    float: right;
    height: 62vh;


}

.about_image_mobile {
    display: none;
}







.instagram {
    cursor: pointer;
    margin-top: 3.4vh;
    display: grid;
    grid-template-columns: 0.09fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;

    height: 4vh;
}

.instagram .icon {
    grid-area: 1 / 1 / 2 / 2;
    padding-top: 0vh;
}
.instagram .text {
    grid-area: 1 / 2 / 2 / 3;
}



.email {
    display: grid;
    grid-template-columns: 0.09fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;

    height: 4vh;
    margin-top: 0.2vh;
}

.email .icon {
    grid-area: 1 / 1 / 2 / 2;
    padding-top: 0.1vh;
}
.email .text {
    grid-area: 1 / 2 / 2 / 3;
}



.icon_instagram {
    width: 2.5vh;
    margin-right: 1vh;
}

.icon_email {
    width: 2.8vh;
    margin-right: 0;
}



.comms_h2 {
    color: #313131;
    font-family: RobotoT;
    font-size: 2.8vh;
    margin-bottom: 1vh;
    text-align: center;
}

.comms_p {
    color: #313131;
    font-family: RobotoL;
    font-size: 2.5vh;
    text-align: center;
    margin-bottom: 6vh;
}




.delete_br {
    display: inline;
}

.add_br {
    display: none;
}









.image_render {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 0;

    margin: 0 16vh 0 16vh;
}

.image_render_block1 { grid-area: 1 / 1 / 2 / 2; }
.image_render_block2 { grid-area: 2 / 1 / 3 / 2; }
.image_render_block3 { grid-area: 3 / 1 / 4 / 2; }
.image_render_block4 { grid-area: 4 / 1 / 5 / 2; }
.image_render_block5 { grid-area: 5 / 1 / 6 / 2; }
.image_render_block6 { grid-area: 6 / 1 / 7 / 2; }
.image_render_block7 { grid-area: 7 / 1 / 8 / 2; }
.image_render_block8 { grid-area: 8 / 1 / 9 / 2; }
.image_render_block9 { grid-area: 9 / 1 / 10 / 2; }
.image_render_block10 { grid-area: 10 / 1 / 11 / 2; }

.image_render_block_type3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 4vh;
    grid-row-gap: 0;
}

.image_render_block_type3_child1 {
    grid-area: 1 / 1 / 2 / 2;
    overflow: hidden;
}
.image_render_block_type3_child2 {
    grid-area: 1 / 2 / 2 / 3;
    overflow: hidden;
}
.image_render_block_type3_child3 {
    grid-area: 1 / 3 / 2 / 4;
    overflow: hidden;
}

.image_render_block_type3_childs img{
    cursor: pointer;
    object-fit: cover;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: 0.2s ease-in;
    transform: scale(1.1);
    aspect-ratio: 4 / 5;
}




.image_render_block_type2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 4vh;
    grid-row-gap: 0;
}

.image_render_block_type2_child1 {
    grid-area: 1 / 1 / 2 / 2;
    overflow: hidden;
}
.image_render_block_type2_child2 {
    grid-area: 1 / 2 / 2 / 3;
    overflow: hidden;
}

.image_render_block_type2_childs img{
    cursor: pointer;
    object-fit: cover;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: 0.2s ease-in;
    transform: scale(1.1);
    aspect-ratio: 4 / 5;
}





.image_render_block_type1 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 4vh;
    grid-row-gap: 0;
}

.image_render_block_type1_child1 {
    grid-area: 1 / 1 / 2 / 2;
    overflow: hidden;
}

.image_render_block_type1_childs img{
    cursor: pointer;
    object-fit: cover;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: 0.2s ease-in;
    transform: scale(1.1);
    aspect-ratio: 16 / 9;
}







@media (max-width: 1450px) {
    .about {

        margin: 0vh 15vh 15vh 15vh;
    }
}

@media (max-width: 1025px) {
    h1 {
        font-weight:normal;
    }

    h2 {
        font-weight:normal;
    }

    h3 {
        font-weight:normal;
    }

    header {
        margin: 10vh 0 13.5vh 0;
    }

    .image_columns {
        margin: 0 2vh 0 2vh;
    }

    footer {
        border-top: #727272 0.3vh solid;
        margin: 4vh 2vh 0 2vh;
    }

    header h1 {
        font-family: RobotoB;
        font-size: 3.3vh;
        text-align: center;
        margin-bottom: 2.1vh;
    }

    .header_h2 {display: none}

    .header_h2_mobile {
        display: block;
        font-family: RobotoT;
        font-size: 2.05vh;
        text-align: center;
        letter-spacing: 0.32vh;
        margin: 30vh 1vh 10vh 1vh;

    }

    header img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 30vh;
        left: 0;
        right: 0;
        top: 29.5vh;
        text-align: center;
        pointer-events: none;
        margin-bottom: 12vh;
    }

    .desktop_header_ul {
        display:none;
    }

    .mobile_fix1 {
        display: block;
    }

    ul {
        text-align: center;
    }

    .ul_h2 {
        font-family: RobotoT;
        font-size: 2.5vh;
        text-align: center;
        margin-bottom: 2vh;
        display: block;
    }

    .image_columns {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }

    .image_columns {
        margin: 0 2vh 0 2vh;
    }

    .image_column_mobile {
        grid-area: 1 / 1 / 2 / 2;
    }

    .image_column_1 { display: none; }
    .image_column_2 { display: none; }
    .image_column_3 { display: none; }

    .image_column_mobile {
        display: block;
    }

    .image_columns div img:last-child {
        margin-bottom: 6vh;
    }

    .image_columns div img {
        margin-bottom: 1vh;

        object-fit: cover;
        width: 100%;
        height: 125%;
        overflow: hidden;
        transition: 0.2s ease-in;
        transform: scale(1.1);

        aspect-ratio: auto;
    }


    .popup > div {
        margin-bottom: 1vh;
        overflow: hidden;
        flex-grow: 1;

    }





    .popup img{
        cursor: pointer;
        width: 80vh;
        height: auto;
    }

    .show{
        z-index: 999;
        display: none;
    }

    .show .overlay{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.66);
        position: fixed;
        top: 0;
        left: 0;
    }

    .show .img-show{
        width: 100%;
        height: auto;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        overflow: hidden;
    }

    .img-show img{
        width: 100%;
        height: auto;
    }

    .img-show span{
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 99;
        cursor: pointer;
    }










    .comms {
        display: none;
    }

    .comms_mobile {
        display: block;
    }

    .comms_mobile {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: 1fr;
        grid-column-gap: 0;
        grid-row-gap: 0;
        grid-auto-flow: dense;

        margin: 0 3vh 0 3vh;
    }

    .comms_mobile div img {
        width: 100%;
        transition: 0.2s ease-in;
        margin-bottom: 0.6vh;
    }

    .comm_1 { grid-area: 1 / 1 / 2 / 2; }
    .comm_2 { grid-area: 2 / 1 / 3 / 2; }
    .comm_3 { grid-area: 3 / 1 / 4 / 2; }
    .comm_4 { grid-area: 4 / 1 / 5 / 2; }
    .comm_5 { grid-area: 5 / 1 / 6 / 2; }
    .comm_6 { grid-area: 6 / 1 / 7 / 2; }
    .comm_7 { grid-area: 7 / 1 / 8 / 2; }
    .comm_8 { grid-area: 8 / 1 / 9 / 2; }
    .comm_9 { grid-area: 9 / 1 / 10 / 2; }
    .comm_10 { grid-area: 10 / 1 / 11 / 2; }
    .comm_11 { grid-area: 11 / 1 / 12 / 2; }
    .comm_12 { grid-area: 12 / 1 / 13 / 2; }
    .comm_13 { grid-area: 13 / 1 / 14 / 2; }
    .comm_14 { grid-area: 14 / 1 / 15 / 2; }
    .comm_15 { grid-area: 15 / 1 / 16 / 2; }
    .comm_16 { grid-area: 16 / 1 / 17 / 2; }
    .comm_17 { grid-area: 17 / 1 / 18 / 2; }
    .comm_18 { grid-area: 18 / 1 / 19 / 2; }
    .comm_19 { grid-area: 19 / 1 / 20 / 2; }
    .comm_20 { grid-area: 20 / 1 / 21 / 2; }
    .comm_21 { grid-area: 21 / 1 / 22 / 2; }

    .comm_all:not(:last-child) {
        margin-bottom: 4vh;
    }

    .comms_mobile_a {
        color: #313131;
        transition: 0.25s;
        font-family: RobotoL;
        font-size: 1.3vh;
        text-decoration-line: underline;
        text-decoration-color: #8a8a8a;
        text-underline-offset: 0.8vh;
    }

    .comms_mobile:last-child {
        margin-bottom: 7vh;
    }

    .comms_mobile_a:hover {
        color: #8a8a8a;
        text-decoration-color: #8a8a8a;
        text-underline-offset: 0.3vh;
    }






    .contacts{
        display: none;
    }

    .contacts_mobile {
        display: block;
        margin-top: 7vh;
        margin-bottom: 7vh;
    }

    .instagram {
        margin-top: 3.4vh;
    }

    .instagram .icon {
        grid-area: 1 / 1 / 2 / 2;
        padding-top: 0vh;
    }
    .instagram .text {
        grid-area: 1 / 2 / 2 / 3;
    }



    .email:not(:last-child) {
        display: grid;
        margin-top: 2vh;
    }

    .icon_instagram {
        width: 3.05vh;
    }

    .email .icon {
        grid-area: 1 / 1 / 2 / 2;
        padding-top: 0.6vh;
    }
    .email .text {
        grid-area: 1 / 2 / 2 / 3;
    }

    .delete_br {
        display: none;
    }

    .add_br {
        display: inline;
    }




    .about {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows:  1fr;;
        grid-column-gap: 0;
        grid-row-gap: 0;

        margin: 0 2vh 6.5vh 2vh;
    }

    .about_txt { grid-area: 1 / 1 / 2 / 2; }
    .about_img { display: none }

    .about_image_mobile {
        display: block;
    }

    .about_txt h1 {
        color: #313131;
        transition: 0.25s;
        font-family: RobotoM;
        font-size: 2.3vh;
        margin-bottom: 1vh;
    }

    .about_txt h1:not(:first-child) {
        margin-top: 4vh;
    }

    .about_txt p {
        color: #313131;
        transition: 0.25s;
        font-family: RobotoL;
        font-size: 2.2vh;
    }

    .about_image_mobile {
        width: 100%;
        margin: 4vh 0 4vh 0;
    }

    .image_render {
        display: none;
    }

    .icon_email {
        width: 3.45vh;
        margin-right: 0;
    }
}