/* Common section */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: Montserrat;
    font-size: 17px;
    width: 100%;
    padding: 0;
}

div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
code,
img,
b,
u,
i,
center,
table,
tr,
th,
td,
video {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Header section */
header {
    display: flex;
    position: fixed;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    z-index: 999;
    padding: 0;

    img {
        display: block;
        height: 7cap; /* Размер иконки равен высоте заглавной буквы */
        aspect-ratio: 1.2;
    }
    a:hover{
        background-color: grey;
    }
}

.hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    order: 1;
}



@media screen and (max-width: 768px) and (orientation: portrait) {
    .hamburger {
        display: block;
        z-index: 1001;
    }

    nav {
        padding: 20px;
        display: block;
        position: fixed;
        top: 8vh;
        right: -100%;
        flex-direction: column;
        width: 60%;
        height: 100vh;
        transition: right 0.3s;
        z-index: 1000;
        background-color: rgba(248, 248, 248, 0.8);
    }

    nav.active {
        right: 0;
    }
}

nav {
    display: flex;
    gap: 20px;
}

a {
    text-decoration: none;
    color: #333;
}

.al {
    width: 50%;
    align-content: flex-start;
    background-color: #f8f8f8;
}
.ar {
    display: flex;
    padding: 20px;
    position: relative;
    width: 50%;
    justify-content: end;
    background-color: #f8f8f8;
}

.container {
    min-height: 48px;
    align-items: center;
    justify-content: center;
}

.t-title{
    font-weight: 600;
}

/* Main section */
main {
    flex: 1;
    align-items: center;
    justify-content: center;
    padding-top: 4ch;

    img {
        max-height: 20vh;
        border-radius: 5px;
        filter: drop-shadow(0.16rem 0.25rem 0.3rem rgba(0, 0, 0, 0.5));
    }
}
.mfirst {
    display: flex;
    min-height: 89vh;
    background-image: url("/img/header_bg.jpg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    h1,
    p {
        color: #ffffff;
        text-shadow: #4d4d4d 1px 0 6px;
        filter: drop-shadow(0.16rem 0.25rem 0.3rem #000000);
    }
    h1 {
        font-size: 5rem;
        text-align: center;
    }
    p {
        font-size: 2.5rem;
        text-align: center;
    }
}

@media screen and (max-width: 1300px){

    .mfirst {
        overflow: hidden;
        h1 {
            font-size: 4rem;
            text-align: center;
        }
        p {
            font-size: 1.2rem;
            text-align: center;
        }
    }


}

.mf-list {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 0.2ch;
    font-size: 3.3vh;
    text-align: center;
    text-shadow: #000000 1px 1px 6px;
    filter: drop-shadow(0.16rem 0.25rem 0.1rem #000000);
}
.mfl-unit {
    flex: 1;
    margin: 0.9ch;

    .t-descr {
        font-size: 1.1vh;
        text-align: center;
    }
    video {
        max-height: 22vh;
    }
    iframe {
        height: 22vh;
    }
}

.t-divider {
    background-color: #cca300;
    height: 1px;
    opacity: 0.8;
    margin: 0 4.1vw;
}

.m-divider {
    background-color: #cca300;
    height: 1px;
    opacity: 0.8;
    margin: 1vh 1.6vh 0 1.6vh;
}

.cc {
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-direction: row;
    padding: 2ch 5ch 0 5ch;
    hyphens: auto;

    h2 {
        text-align: center;
    }
    p {
        max-width: 60ch;
    }
}
.pp {
    padding: 1ch 5ch;
}

.blog{ width: 80%; flex-direction: row; display: flex;
    img{padding: 1em 3em 2em 0;}

    p {
        max-width: 100%;
        hyphens: auto;
    }
}


.mui-button {
    background: linear-gradient(160deg, blue, pink);
    color: #fff;
    text-shadow: #000000 1px 1px 1px;
    padding: 1.2ch;
    border-radius: 0.5ch;
    filter: drop-shadow(0.16rem 0.25rem 0.3rem #959595);
    cursor: pointer;
}

.mui-button:hover{
    background: linear-gradient(160deg, #0000c4, #fe6580);
}

@media all and (max-width: 768px) and (orientation: portrait) {
    .mfirst {
        min-height: 40vh;
    }
    .cc {
        flex-direction: column;
    }
    .pp {
        padding: 1ch 2ch;
    }
    .mf-list {
        font-size: 2vh;
    }
    .t-divider {
        margin: 0 1.2vh;
    }
}

/* Iphone detected */
@media all and (max-width: 391px) and (orientation: portrait) {
    .pp {
        padding: 1ch 0;
    }

    .mf-list {
        font-size: 1.6vh;
    }
    .mfl-unit {
        flex: 1;
        margin: 0.9ch;

        .t-descr {
            font-size: 0.9vh;
            text-align: center;
        }
        video {
            max-height: 22vh;
        }
        iframe {
            height: 22vh;
        }
    }

    .mf-list {
        flex-direction: column;
    }
}

h1,
h2 {
    color: #393939;
    padding: 0.5ch;
}

p {
    padding: 0.5ch;
    color: #3a3a3a;
}
b {
    color: #404040;
}

/* Footer */
footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

.small_video {
    position: fixed;
    z-index: 999;
    left: 4ch;
    bottom: 1vh;
    background-color: rgba(154, 229, 252, 0.81);
    border-radius: 0.5ch;
    height: 20vh;
    width: 11vh;
    filter: drop-shadow(0.16rem 0.25rem 0.3rem rgba(0, 0, 0, 0.5));

    video {
        height: 20vh;
        overflow: hidden;
        border-radius: 0.5ch;
        /*background: #fff;*/
    }
}

.js-cookie-consent{
    position: fixed;
    overflow: auto;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(105, 105, 105, 0.4);

}

.modal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #fff;
    /*color: #000;*/
    border-radius: .5ch;
}

js-cookie-consent-agree{
    display: flex;
    justify-content: center;
    text-align: center;
    color: white;

}


/*  FORM */

.field {
    clear:both;
    text-align:right;
    label {float:left;}
}

.text-danger{
    font-size: 12px;
    color: red;
}

.hr-shelf {
    box-shadow: 0 20px 20px -20px #333;
    width: 95%;
}

.hr2 {
    margin: 30px 0;
    height: 4px;
    background: #0000c4;
    position: relative;
    overflow: hidden;
    border: none;
}
.hr2:after {
    content: "";
    height: 4px;
    background: linear-gradient(90deg,#0000c4, #fe6580, #0000c4);
    position: absolute;
    width: 30%;
    top: 1px;
    animation: anim-hr 5s linear infinite;
}
@keyframes anim-hr {
    0% {
        left: -30%;
    }
    100% {
        left: 100%;
    }
}