@import url('https://fonts.googleapis.com/css2?family=Fugaz+One&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* 
font-family: 'Fugaz One', cursive;
font-family: 'Roboto', sans-serif;
font-family: 'Poppins', sans-serif;
*/
* {
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

*:focus {
    outline: none !important;
}

:root {
    --black-clr: #000;
    --white-clr: #fff;
    --grey-clr: #0F0F0F;
    --grey-text: #565656;
    --red-clr: #FF2400;
    --wine-clr: #A60022;
    --light-bg: #F4F4F4;
}

h1,
h2,
h3,
h4,
h6 {
    font-family: "EB Garamond", serif;
    color: var(--black-clr);
    font-weight: 500;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h1 a,
h1 span,
h2 a,
h2 span,
h3 a,
h3 span,
h4 a,
h4 span,
h5 a,
h5 span,
h6 a,
h6 span {
    font-size: inherit;
    text-transform: inherit;
    font-weight: inherit;
    color: inherit;
    text-decoration: inherit;
    font-family: inherit;
}

p {
    line-height: 1.5;
}

a {
    color: var(--wine-clr);
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

.closemenu {
    display: none;
}

.content_width {
    width: 95%;
    max-width: 1200px;
}

header#document-header {
    color: var(--white-clr);
    background-color: var(--white-clr);
    padding: 1rem 1.5rem;
    position: absolute;
    z-index: 99;
    top: 10px;
    left: 50%;
    transform: translate(-50%, 0);
    align-items: center;
    justify-content: space-between;
}

header#document-header.afterscroll {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(0, 0);
    width: 100%;
    max-width: 100%;
    padding: .5rem;
    animation: showNav 1s ease;
    animation-fill-mode: forwards;
    -webkit-box-shadow: 0px 0px 44px -21px rgba(189, 189, 189, 1);
    -moz-box-shadow: 0px 0px 44px -21px rgba(189, 189, 189, 1);
    box-shadow: 0px 0px 44px -21px rgba(189, 189, 189, 1);
    background-color: var(--white-clr);
}

@keyframes showNav {
    from {
        transform: translate(0, -100%);
    }

    to {
        transform: translate(0, 0);
    }
}

header#document-header>.cont {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header#document-header a.logo {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    margin-left: 0;
    text-transform: uppercase;
    font-size: 1.2rem;
    color: var(--wine-clr);
    font-family: "EB Garamond", serif;
    font-weight: bold;
}

header#document-header a.logo span {
    text-decoration: inherit;
    font-family: inherit;
    text-transform: inherit;
}

button.mainmenu {
    display: block;
    width: 30px;
    height: 35px;
    position: relative;
    border: none;
    outline: none;
    background: none;
    margin: 0 0 0 1rem;
    z-index: 5;
    user-select: none;
}

button.mainmenu span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    height: 2px;
    border-radius: 4px;
    background: var(--black-clr)
}

button.mainmenu span::before,
button.mainmenu span::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: inherit;
    transition: .2s;
}

button.mainmenu span::before {
    transform: translate(-50%, -510%);
}

button.mainmenu span::after {
    transform: translate(-50%, 400%);
}

header#document-header nav.main-nav {
    margin-right: 0;
}

nav.main-nav ul {
    display: flex;
}

nav.main-nav ul li {
    list-style-type: none;
}

nav.main-nav ul li a {
    display: block;
    color: inherit;
    text-decoration: none;
    padding: .5rem;
    cursor: pointer;
    transition: .35s;
    color: var(--black-clr);
}

nav.main-nav ul li a:hover {
    color: var(--wine-clr);
}

nav.main-nav .overlay {
    display: none;
}

header#document-header ul.secnav {
    display: flex;
    align-items: center;
    margin-right: 0;
    color: inherit;
}

header#document-header ul.secnav li {
    list-style-type: none;
    position: relative;
}

header#document-header ul.secnav li:last-of-type {
    margin-left: 2rem;
}


header#document-header ul.secnav li a {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    position: relative;
    z-index: 2;
}

header#document-header ul.secnav li a.icon.f {
    padding: 1rem !important;
}

header#document-header ul.secnav li a.icon img {
    width: 25px;
}

header#document-header ul.secnav li a.btn {
    height: 90px;
    background-color: var(--red-clr);
}

header#document-header ul.secnav li a.btn::before,
header#document-header ul.secnav li a.btn::after {
    display: none;
}

.front-page {
    position: relative;
}

.front-page::after {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 150px;
    transform: skewY(-2deg);
    background: var(--white-clr);
    z-index: 1;
}

.front-page>* {
    position: relative;
    z-index: 2;
}

.document-footer {
    background-color: #ff0019;
    height: 300px;
    width: 100%;
}

.btn:hover {
    background-color: #d20000e6;
    z-index: 10;
    border-radius: 32px;
    transition-duration: 0.4s;
}

.btn .textbtn {
    padding: 0;
    margin: 0;
    width: 100%;
}

.btn.disabbled {
    cursor: auto !important;
}

.btn.disabbled::after {
    background-color: transparent;
    border: 2px var(--red-clr) solid;
}

.btn .textbtn {
    padding-right: 2rem;
}

.btn .textbtn::before,
.btn .textbtn::after {
    right: 5%;
}

/*First button*/

.btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--white-clr);
    cursor: pointer;
    padding: .75rem 1.25em;
    border: none;
    position: relative;
    border-radius: 32px;
    background: var(--wine-clr);
    margin-left: 0;
    font-size: 1.08rem;
}

/*Second button*/
.btn.transparent {
    color: var(--black-clr);
    background: transparent;
}

/* maintance block */
.header {
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('../images/galerie/background.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    top: 0;
    left: 0;
    min-width: 100%;
}

/*Top page*/

.main-info {
    display: flex;
    flex-direction: row;
    padding-top: 120px;
    justify-content: space-around;
}

.personal-page {
    margin: 0 1rem 0 0;
}

.personal-page img {
    height: 100%;
    display: block;
    max-width: 550px;
    object-fit: cover;
    margin: 0;
    width: 100%;
}

.information-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto 0 0;
}

.information-page>* {
    margin-left: 0;
}

.row-sl {
    display: flex;
    flex-wrap: wrap;
    border-top: solid var(--wine-clr) 5px;
    -webkit-box-shadow: 0px 0px 44px -21px rgba(189, 189, 189, 1);
    -moz-box-shadow: 0px 0px 44px -21px rgba(189, 189, 189, 1);
    box-shadow: 0px 0px 44px -21px rgba(189, 189, 189, 1);
}

/* Create four equal columns */
.column {
    flex: 25%;
    padding: 2rem;
    background-color: var(--white-clr);
}

.column ul {
    padding: 1rem 0 0 .25rem;
}

.column ul li {
    list-style-type: none;
    margin-bottom: .75rem;
    position: relative;
    padding-left: 15px;
}

.column ul li::before {
    content: "";
    position: absolute;
    top: .35rem;
    left: 0;
    width: 6px;
    height: 6px;
    background: var(--wine-clr);
    border-radius: 50%;
}

.column ul li:last-of-type {
    margin-bottom: 0;
}

.column ul li span {
    color: var(--grey-text);
}

.buttons-viewpage {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 1rem;
    gap: 1rem;
}

.row-sl h2 {
    padding-left: 45px;
    position: relative;
    font-weight: 500;
    font-size: 1.85rem;
}

.row-sl h2::before {
    content: "";
    background-image: url("../images/icons/pojisteni-icon.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 35px;
}

.row-sl .one h2::before {
    background-image: url("../images/icons/pojisteni-icon.svg");
    background-size: 30px;
}

.row-sl .two h2::before {
    background-image: url("../images/icons/hypoteky-icon.svg");
    background-size: 38px;
}

.row-sl .three h2::before {
    background-image: url("../images/icons/investice-icon.svg");
    background-size: 30px;
}

.row-sl .four h2::before {
    background-image: url("../images/icons/reality-icon.svg");
    background-size: 38px;
}

/*Nastavení icony před nadpisem*/
.grid-service h3::before {
    content: "";
    width: 25px;
    height: 25px;
    background-size: contain;
    float: left;
    margin-right: 10px;
    background: url(../images/icons/bank.png) no-repeat;
}

.index-info {
    padding: 100px 0 6rem 0;
}

.header-text {
    display: flexbox;
    text-align: center;
    text-wrap: wrap;
    width: 100%;
}

.header-text .info {
    max-width: 500px;
    width: 95%;
}

.header-text .info h2 {
    margin-bottom: 1rem;
}

.header-text .info p {
    line-height: 1.5;
    color: var(--grey-text);
}

.products {
    display: flex;
    min-width: 100%;
    flex-direction: row;
    text-wrap: wrap;
}

.half-screen {
    flex-basis: 100%;
    padding: 3rem;
    min-height: 300px;
    margin: 0;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.half-screen .cont {
    max-width: 75%;
    margin: 0;
}

.half-screen .cont p {
    color: var(--grey-text);
}

.half-screen .cont h3 {
    position: relative;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
}

.half-screen .cont h3::before {
    position: absolute;
    content: "";
    bottom: 0;
    right: 0;
    height: 2px;
    width: 65px;
    background: var(--white-clr);
}

.half-screen.beta .cont h3::before {
    right: unset;
    left: 0;
    background: var(--wine-clr);
}

.products .alfa {
    background: linear-gradient(rgba(175, 62, 62, 0.8), rgba(175, 62, 62, 0.8)), url(../images/galerie/background_computer.jpg);
    background-position: center;
    background-size: cover;
    color: var(--white-clr);
    text-align: end;
    justify-content: flex-end;
}

.products .alfa h3,
.products .alfa p {
    color: var(--white-clr);
}

.products .beta {
    align-content: start;
    -webkit-box-shadow: 0px 0px 44px -21px rgba(189, 189, 189, 1);
    -moz-box-shadow: 0px 0px 44px -21px rgba(189, 189, 189, 1);
    box-shadow: 0px 0px 44px -21px rgba(189, 189, 189, 1);
    justify-content: flex-start;
}

.info-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 2rem;
}

.info-row h2 {
    position: relative;
    padding-bottom: .5rem;
    margin-bottom: 1rem;
    display: inline-flex;
}

.info-row h2::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 75%;
    background: var(--wine-clr);
}

.info-row article {
    position: relative;
    width: 50%;
    padding-bottom: 6rem;
}

.info-row article p {
    color: var(--grey-text);
}

.info-row figure {
    position: relative;
    width: 50%;
}

.info-row figure img {
    width: 100%;
    min-width: 300px;
}

.info-row h2::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 75%;
    background: var(--wine-clr);
}

.maintance_info {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    display: none;
}

.procsnami {}

.procsnami header {
    text-align: center;
    background: var(--wine-clr);
    padding: 1rem;
    color: var(--white-clr);
    position: relative;
}

.procsnami header::before,
.procsnami header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: inherit;
    z-index: 1;
    transform: skewy(-2deg);
}

.procsnami header::before {
    transform: translate(0, -50%) skewy(-2deg);
    height: 150px;
}

.procsnami header h2 {
    color: inherit;
    position: relative;
    z-index: 2;
    transform: translate(0, -30px);
}

.procsnami .cont {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2rem;
    position: relative;
    z-index: 2;
}

.procsnami .cont .block {
    background: var(--white-clr);
    padding: 2rem;
    transition: .25s;
    -webkit-box-shadow: 0px 0px 44px -21px rgba(189, 189, 189, 1);
    -moz-box-shadow: 0px 0px 44px -21px rgba(189, 189, 189, 1);
    box-shadow: 0px 0px 44px -21px rgba(189, 189, 189, 1);
}

.procsnami .cont .block:hover {
    transform: translate(0, -10px);
}

.procsnami .cont .block h3 {
    position: relative;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    display: inline-block;
}

.procsnami .cont .block h3::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--wine-clr);
}

.procsnami .cont .block p {
    width: 100%;
    color: var(--grey-text);
}

.maintance_info * {}

.maintance_info::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--grey-clr);
    opacity: .5;
}

.maintance_info .info_cont {
    background-color: var(--white-clr);
    color: var(--grey-text);
    width: 95%;
    max-width: 500px;
    padding: 2em;
    position: relative;
    z-index: 2;
    -webkit-box-shadow: 0px 0px 44px -21px rgba(189, 189, 189, 1);
    -moz-box-shadow: 0px 0px 44px -21px rgba(189, 189, 189, 1);
    box-shadow: 0px 0px 44px -21px rgba(189, 189, 189, 1);
    text-align: center;
}

.maintance_info .info_cont .mail_fail {}

.maintance_info .info_cont.success {}


.maintance_info .info_cont span.app-title {
    color: var(--black-clr);
    font-size: 2rem;
    font-family: "EB Garamond", serif;
    display: block;
}

.maintance_info .info_cont p {
    margin: 2rem auto;
}

.footer {
    display: flex;
    flex-direction: column;
    background-color: var(--wine-clr);
    min-width: 100%;
    min-height: 300px;
    color: var(--white-clr);
    padding: 0 0 4rem 0;
}

.footer * {
    color: inherit !important;
}

.footer .header-footer {
    padding: 40px 0 20px 0;
}

.navigation {
    padding-bottom: 20px;
}

.navigation ul {
    display: flex;
    gap: 1rem;
}

.navigation ul li {
    list-style-type: none;
}

.navigation ul li a {
    text-decoration: none;
    cursor: pointer;
    padding: .5rem;
}

.navigation nav ul {
    list-style: none;
    text-align: center;
}

.navigation nav ul li {
    display: inline-block;
}

.navigation nav ul li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: var(--white-clr);
    margin: 0 10px;
}

.navigation nav ul li a,
.navigation nav ul li a:after,
.navigation nav ul li a:before {
    transition: all .5s;
}

.navigation nav ul li a:hover {}

.footer .personal-info a {
    text-decoration: none;
    color: var(--white-clr);
}


nav.stroke ul li a,
nav.fill ul li a {
    position: relative;
}

nav.stroke ul li a:after,
nav.fill ul li a:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%;
    content: '.';
    color: transparent;
    background: var(--black-clr);
    height: 1px;
}

nav.stroke ul li a:hover:after {
    width: 100%;
}

nav.fill ul li a {
    transition: all 2s;
}

nav.fill ul li a:after {
    text-align: left;
    content: '.';
    margin: 0;
    opacity: 0;
}

nav.fill ul li a:hover {
    color: #fff;
    z-index: 1;
}

nav.fill ul li a:hover:after {
    z-index: -10;
    animation: fill 1s forwards;
    -webkit-animation: fill 1s forwards;
    -moz-animation: fill 1s forwards;
    opacity: 1;
}

.personal-info a:hover {
    color: #000;
    transition: 0.5s;
}

/* error page 404 */

.error_404 {
    max-width: 750px;
}

.error_404 .content {
padding: 150px 3rem 3rem 3rem;
    text-align: center;
}

.error_404 .content .cont {
    margin: 2rem 0;
}

.error_404 .content p {
    line-height: 1.5;
}

.index-form {
    padding-bottom: 5rem;
}

.index-form .cont {
    text-align: center;

}

.index-form .cont h2,
.formcont h3 {
    position: relative;
    margin: 1rem auto 1.5rem auto;
    padding: 0 0 1rem 0;
}

.index-form .cont h2::after,
.formcont h3::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 80px;
    height: 2px;
    background: var(--wine-clr)
}

.formcont {
    -webkit-box-shadow: 0px 0px 44px -21px rgba(189, 189, 189, 1);
    -moz-box-shadow: 0px 0px 44px -21px rgba(189, 189, 189, 1);
    box-shadow: 0px 0px 44px -21px rgba(189, 189, 189, 1);
    background: var(--white-clr);
    text-align: center;
    padding: 2rem;
    width: 100%;
    max-width: 680px;
}

.formcont .contact {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.formcont .contact .person {
    display: block;
    text-align: left;
}

.formcont .contact .person .name {
    display: block;
    margin-bottom: .35rem;
}

.formcont .contact .person .name::after {
    display: none;
    margin: 0 auto 1rem 0;
    padding: 0;
}

.formcont .contact .person .icon {
    display: block;
    margin-bottom: .35rem;
}

.formcont form {}

.formcont form label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 1.5rem;
    position: relative;
}

.formcont form label:last-of-type {
    margin-bottom: 0;
}

.formcont form label.row span {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1rem 1.5rem;
    display: block;
    color: var(--grey-text);
    pointer-events: none;
    transition: .25s ease;
}

.formcont form label[for="gdpr-project"] span {
    position: relative;
    padding: 0;
    text-align: left;
}

.formcont form label input,
.formcont form label textarea {
    width: 100%;
    border: none;
    box-shadow: none;
    background: var(--light-bg);
    padding: 1rem 1.5rem;
    font-size: 1rem;
}

.formcont form label textarea {
    min-width: 100%;
    min-height: 50px;
}

.formcont form label.row input:focus+span,
.formcont form label.row span.focused {
    transform: translate(0, -25px);
}

.formcont form label input::placeholder,
.formcont form label textarea::placeholder {
    color: transparent;
}

span.icon {
    display: inline-flex;
    padding: .5rem .5rem .5rem 35px;
    background-size: 25px;
    background-position: left 3px center;
    background-repeat: no-repeat;
    color: var(--grey-clr);
}

span.icon.tel {
    background-image: url('../images/icons/phone_icon.png');
}

span.icon.email {
    background-image: url('../images/icons/email_icon.png');
}

/* GDPR */


article.gdpr_article {
    color: var(--grey-text);
    line-height: 1.5;
    width: 80%;
    position: relative;
    z-index: 2;
    padding: 140px 0 80px 0;
    text-align: justify;
    max-width: 780px
}

article.gdpr_article * {
    font-size: 1rem
}

article.gdpr_article h1 {
    font-size: 2.75rem;
    margin-bottom: 2.5rem
}

article.gdpr_article ol,
article.gdpr_article ul {
    padding-left: 20px;
    margin: 1rem 0
}

article.gdpr_article li {
    margin: 1rem 0
}

article.gdpr_article ul li {
    margin: .25rem 0;
    position: relative;
    list-style-type: none
}

article.gdpr_article ul li::before {
    content: "";
    position: absolute;
    top: .7rem;
    left: 0;
    transform: translate(-150%, 0) rotate(100grad);
    border-bottom: 5px var(--green-clr) solid;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent
}

article.gdpr_article .button-cont {
    display: block;
    text-align: center;
    margin: 4rem auto
}


form.assets label input[type=checkbox] {
    position: absolute;
    opacity: 0;
    z-index: -1
}

form.assets label span.check {
    display: inline-block;
    width: 40px;
    height: 15px;
    background: var(--light-bg);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    margin-left: 0;
    margin-right: 1rem
}

form.assets label span.check::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1100%;
    height: 100%;
    background-color: transparent;
    transition: .2s
}

form.assets label span.check::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background: var(--lgrey-clr);
    transition: .2s;
    -webkit-box-shadow: 0 5px 14px 0 rgba(0, 0, 0, .55);
    -moz-box-shadow: 0 5px 14px 0 rgba(0, 0, 0, .55);
    box-shadow: 0 5px 14px 0 rgba(0, 0, 0, .55)
}

form.assets label input:checked+span::before {
    background-color: var(--wine-clr)
}

form.assets label input:checked+span.check::after {
    left: 100%;
    transform: translate(-100%, -50%);
    background: var(--white-clr)
}

form label[for="gdpr-project"] span.text {
    margin-left: 0;
}

form [data-gdprbtn] {
    border: none;
    color: var(--wine-clr);
    background: var(--light-bg);
    border-radius: 50px;
    font-size: 1.25rem;
    padding: 1rem 2rem;
    transform: translate(0, 60px);
}

form [data-gdprbtn].active {
    pointer-events: all;
    background: var(--wine-clr);
    color: var(--white-clr);
    cursor: pointer;
}



@media screen and (max-width: 1060px) {
    .half-screen .cont {
        max-width: 100%;
    }
}

@media screen and (max-width: 960px) {
    .column {
        flex: 50%;
    }
}

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

    h1 {
        font-size: 3.25rem;
    }

    header#document-header {
        padding: 2rem 1rem 0.25rem 1rem;
        background-color: transparent;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 99;
        transform: translate(0, 0);
        max-width: 100vw;
    }

    button.mainmenu {
        display: block;
        width: 35px;
        height: 35px;
        position: relative;
        cursor: pointer;
        border: none;
        outline: none;
        background: none;
        margin-right: 0;
        z-index: 5;
        user-select: none;
    }

    button.mainmenu span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 95%;
        height: 2px;
        border-radius: 4px;
        background: var(--black-clr)
    }

    button.mainmenu span::before,
    button.mainmenu span::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        background: inherit;
        transition: .2s;
    }

    button.mainmenu span::before {
        transform: translate(-50%, -12px);
    }

    button.mainmenu span::after {
        transform: translate(-50%, 9px);
    }

    button.mainmenu.active span {
        background: transparent;
    }

    button.mainmenu.active span::before {
        transform: translate(-50%, -50%) rotate(-45deg);
        background: var(--black-clr);
    }

    button.mainmenu.active span::after {
        transform: translate(-50%, -50%) rotate(-135deg);
        background: var(--black-clr);
    }

    .closemenu {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100vh;
        background: var(--black-clr);
        opacity: 0;
        pointer-events: none;
        z-index: 2;
        transition: .75s;
    }

    .closemenu.active {
        opacity: .6;
        pointer-events: all;
    }

    header#document-header ul.secnav li:last-of-type {
        margin: 0;
    }

    header#document-header nav.main-nav {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 60%;
        padding-top: 10vh;
        background: var(--white-clr);
        border-right: 1px var(--black-clr) solid;
        transform: translate(-100%, 0);
        pointer-events: none;
        transition: .3s;
        overflow: hidden;
        z-index: 3;
    }

    header#document-header nav.main-nav .overlay {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 1;
        border: none;
        opacity: 0;
    }

    header#document-header nav.main-nav.active {
        transform: translate(0, 0);
        opacity: 1;
        pointer-events: all;
    }

    header#document-header nav.main-nav ul {
        display: block;
        overflow-y: scroll;
        height: auto;
        font-size: 1.35rem;
        transform: translate(20px, 0);
        padding: 1rem 2rem 0 0;
        position: relative;
        z-index: 2;
    }

    header#document-header nav.main-nav ul li {
        margin: 0 0 1rem 0;
        padding: 0 0 1rem 0;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    header#document-header nav.main-nav ul li::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 100%;
        background: var(--grey-text);
        opacity: .15;
    }

    header#document-header nav.main-nav ul li a {
        display: block;
        width: 100%;
        margin-left: 0;
        transition: .2s;
    }

    header#document-header nav.main-nav ul li a:hover {
        padding-left: 1rem;
    }

    header#document-header ul.secnav {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-right: 0;
        color: inherit;
        width: 60%;
        position: fixed;
        margin-right: 0;
        left: 0;
        top: 0;
        pointer-events: none;
        transform: translate(-100%, 0);
        transition: .5s;
        background: var(--grey-clr);
        z-index: 4;
        border-right: 1px var(--black-clr) solid;
    }

    header#document-header ul.secnav.active {
        transform: translate(0, 0);
        pointer-events: all;
        padding-left: 20px;
    }

    header#document-header ul.secnav li {
        border-left: none;
        width: 50%;
    }


    header#document-header ul.secnav li:last-of-type {
        border-left: none;
        width: 100%;
    }

    header#document-header ul.secnav li a {
        padding: 1rem;
    }

    header#document-header ul.secnav li a.btn {
        height: auto;
        margin-left: 0;
        width: 100%;
    }

    header#document-header ul.secnav li .icon span {
        position: relative;
        opacity: 1;
        transform: translate(0, 0);
        left: 0;
        background: transparent;
        pointer-events: all;
        padding: 0;
    }

    header#document-header ul.secnav li a:hover span,
    header#document-header ul.secnav li span:hover span {
        transform: translate(0, 0);
    }

    header#document-header ul.secnav li a,
    header#document-header ul.secnav li span {
        background-position: left center !important;
    }

    header#document-header ul.secnav li.fb {
        padding: 1rem !important;
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
    }

    section.header .header {
        margin: 30% auto 15% auto !important;
        width: 100%;
    }

}

@media screen and (max-width: 880px) {
    .procsnami .cont {
        grid-template-columns: repeat(2, 1fr);
    }

    .information-page {
        width: 50%;
    }
}

@media screen and (max-width: 830px) {
    .information-page {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 0);
        color: var(--white-clr);
    }

    .information-page h1 {
        color: inherit;
        text-shadow: 3px 5px 9px rgba(0, 0, 0, 0.5);
    }

    .information-page>p {
        text-shadow: 0px 0px 14px #000000;
    }

    .information-page .btn {
        color: inherit;
        background: var(--wine-clr)
    }
}

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

    .products {
        flex-wrap: wrap;
    }

    .half-screen {
        width: 100%;
        min-height: unset;
        height: auto;
    }

    .half-screen .cont {
        max-width: 70%;
    }

    .info-row {
        flex-wrap: wrap;
    }

    .info-row figure,
    .info-row article {
        width: 100%;
    }

    .info-row figure img {
        width: 100%;
        min-width: unset;
    }
}

@media screen and (max-width: 680px) {
    .navigation ul {
        flex-wrap: wrap;
    }

    .navigation ul li {
        width: 100%;
        text-align: center;
    }
}

@media screen and (max-width: 530px) {
    .information-page {
        top: 45%;
        width: 75%;
    }

    .formcont .contact {
        flex-wrap: wrap;
    }

    .formcont .contact .person {
        width: 100%;
        max-width: 220px;
    }
}

@media screen and (max-width: 490px) {
    .main-info {
        height: 680px;
    }

    .information-page {
        top: 15%;
        width: 75%;
    }

    .personal-page {
        height: auto;
        display: flex;
        align-items: flex-end;
    }

    .personal-page img {
        height: auto;
        object-fit: contain;
        width: 100%;
    }

    .information-page h1 {
        color: var(--black-clr);
        text-shadow: none;
    }

    .information-page>p {
        text-shadow: none;
        color: var(--black-clr);
    }

    .index-info {
        padding: 60px 0 4rem 0;
    }

    .products {
        flex-wrap: wrap;
    }

    .procsnami .cont {
        grid-template-columns: repeat(1, 1fr);
    }

    .column {
        flex: 100%;
    }

    .half-screen .cont {
        max-width: 100%;
    }
}