:root {
     --zer: #38c315;
     --pri: #1d8e00;
     --sec: #78f759;
     --ter: #bbf2ae;
     --blk: #1e1e1e;
     --drk: #b2b2b2;
     --gry: #ecf0f3;
     --wht: #fbfdfe;
     --osw: "Roboto", sans-serif;
     --rub: "Roboto", sans-serif;
}

html,
body {
     width: 100vw;
     height: 100vh;
     padding: 0;
     margin: 0;
     background-color: var(--wth);
     overflow-x: hidden;
     scroll-behavior: smooth;
     position: relative;
}

* {
     margin: 0;
     padding: 0;
     font-optical-sizing: auto;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     scroll-behavior: smooth;
}

a {
     text-decoration: none;
     color: inherit;
}

p {
     font-family: var(--rub);
     font-size: 1vw;
     font-weight: 400;
     line-height: 180%;
     padding-bottom: 2vh;
}

p:last-child {
     padding-bottom: 0;
}

h1 {
     font-family: var(--osw);
     font-size: 50px;
     font-weight: 700;
     text-transform: uppercase;
     color: var(--wht);
     letter-spacing: 2px;
     word-spacing: 6px;
}

h2 {
     font-family: var(--rub);
     font-size: 20px;
     font-weight: 500;
     text-transform: uppercase;
     color: var(--wht);
     letter-spacing: 2px;
     word-spacing: 6px;
}

h3 {
     font-family: var(--osw);
     font-size: 30px;
     font-weight: 800;
     text-transform: uppercase;
     -ms-flex-item-align: center;
     align-self: center;
     text-align: center;
}

h3 > span {
     color: var(--pri);
}

h4 {
     font-family: var(--osw);
     font-size: 18px;
     font-weight: 600;
     -ms-flex-item-align: center;
     align-self: center;
     text-align: center;
     letter-spacing: 1px;
}

h5 {
     font-family: var(--osw);
     font-size: 22px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: var(--pri);
     margin-bottom: 5vh;
}

h6 {
     font-family: var(--osw);
     font-size: 22px;
     font-weight: 700;
     letter-spacing: 1px;
     color: var(--blk);
     margin-bottom: 3vh;
}

.underline {
     width: 6vw;
     height: 2vh;
     background-color: transparent;
     -ms-flex-item-align: center;
     align-self: center;
     text-align: center;
     border-bottom: 4px solid var(--pri);
     margin-bottom: 8vh;
}

.container {
     width: 100%;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     background-color: transparent;
}

#cookies-message {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     width: 64vw;
     position: fixed;
     bottom: 13vh;
     left: 18vw;
     background-color: var(--blk);
     color: #ffffff;
     padding: 50px;
     font-family: var(--rub);
     font-size: 18px;
     font-weight: 400;
     line-height: 1.5;
     text-align: center;
     z-index: 1000;
}

#cookies-message a {
     color: var(--sec);
     cursor: pointer;
}

#cookies-message a:hover {
     color: var(--wht);
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
}

#cookies-message button {
     width: 25vw;
     font-family: var(--osw);
     text-transform: uppercase;
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 1px;
     word-spacing: 3px;
     text-align: center;
     padding: 15px 40px;
     border: none;
     outline: none;
     background-color: var(--pri);
     color: var(--wht);
     cursor: pointer;
}

#cookies-message button:hover {
     background-color: var(--sec);
     color: white;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
}

/* ======================== */

.vignette {
     width: 100vw;
     height: 100vh;
     background: url("graph/guy_green.jpg");
     background-size: auto 100%;
     background-position: right center;
     background-repeat: no-repeat;
     position: relative;
}

.vignette h1 {
     font-size: 2rem;
     text-transform: uppercase;
     position: absolute;
     left: 10vw;
     bottom: 58vh;
     color: #006c08;
}

.vignette h2 {
     font-size: 1.25rem;
     position: absolute;
     left: 10vw;
     bottom: 45vh;
     line-height: 150%;
     color: #626262;
}

/* ======================== */

.logo {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     color: var(--pri);
}

.logo i {
     font-size: 1.75rem;
}

.logo span {
     font-family: "Roboto", sans-serif;
     font-size: 1.5rem;
     font-weight: 800;
     text-transform: uppercase;
     margin-left: 0.1vw;
     color: var(--pri);
}

header {
     width: 100%;
     height: 12vh;
     position: absolute;
     top: 0;
     left: 0;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     padding: 4vh 10vw;
     background-color: transparent;
}

header > .left {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
}

header > .left > svg {
     height: 36px;
     fill: var(--sec);
     margin-right: 12px;
}

header > .left > h6 {
     font-family: var(--osw);
     font-size: 28px;
     font-weight: 600;
     text-transform: uppercase;
     line-height: 100%;
     color: var(--sec);
     margin: 0;
}

header > .right {
     width: 50%;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: end;
     -ms-flex-pack: end;
     justify-content: flex-end;
}

header > .right > button.upper_menu {
     border: none;
     outline: none;
     background-color: transparent;
     padding: 0;
     margin: 0;
     font-family: var(--osw);
     font-size: 20px;
     font-weight: 700;
     letter-spacing: 1px;
     word-spacing: 3px;
     text-transform: uppercase;
     color: var(--blk);
     cursor: pointer;
     margin-left: 4vw;
}

header > .right > button.upper_menu:hover {
     color: var(--sec);
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}

article {
     width: 100vw;
     padding: 4vh 10vw;
     position: relative;
     overflow: hidden;
}

article::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 200%;
     background-color: rgba(10, 10, 10, 0.95);
     z-index: 1;
     pointer-events: none;
}

.rotated_image {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 100%;
     height: 200%;
     -o-object-fit: cover;
     object-fit: cover;
     -webkit-transform: translate(-50%, -50%) rotate(10deg);
     transform: translate(-50%, -50%) rotate(10deg);
     -webkit-transform-origin: center;
     transform-origin: center;
     z-index: 0;
}

article > .container > .box {
     width: 100%;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: start;
     -ms-flex-align: start;
     align-items: flex-start;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     z-index: 2;
}

article > .container > .box > .left {
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
}

article > .container > .box > .left > svg {
     height: 26px;
     fill: var(--pri);
     margin-right: 12px;
     display: inline-block;
     vertical-align: middle;
}

article > .container > .box > .left > h6 {
     font-family: var(--osw);
     font-size: 22px;
     font-weight: 800;
     text-transform: uppercase;
     color: var(--pri);
     margin: 0;
     padding: 0;
     margin: 0;
     line-height: 1;
     display: inline-block;
     vertical-align: middle;
     -webkit-transform: translateY(1px);
     transform: translateY(1px);
}

article > .container > .box ul {
     list-style-type: none;
     padding-left: 0;
     font-family: var(--rub);
     font-size: 16px;
     font-weight: 300;
     letter-spacing: 1px;
     word-spacing: 3px;
     color: var(--wht);
}

article > .container > .box ul li {
     position: relative;
     margin-bottom: 3vh;
}

article > .container > .box ul button {
     font-family: var(--rub);
     font-size: 16px;
     font-weight: 300;
     text-transform: none;
     letter-spacing: 1px;
     word-spacing: 3px;
     color: var(--wht);
     background-color: transparent;
     padding: 0;
     margin: 0;
     border: none;
     outline: none;
     cursor: pointer;
}

article > .container > .box ul button:hover {
     color: var(--ter);
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}

article .middle svg {
     height: 16px;
     fill: var(--pri);
}

footer {
     width: 100vw;
     background-color: #000000;
     padding: 4vh 10vw;
}

footer > .container > .box {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
}

footer > .container > .box > button {
     font-family: var(--osw);
     font-size: 14px;
     font-weight: 500;
     letter-spacing: 1px;
     word-spacing: 3px;
     color: var(--pri);
     background-color: transparent;
     padding: 0;
     margin: 0;
     border: none;
     outline: none;
     cursor: pointer;
}

footer > .container > .box > button:hover {
     color: var(--ter);
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}

footer > .container > .box > span {
     font-family: var(--osw);
     font-size: 14px;
     font-weight: 500;
     letter-spacing: 1px;
     word-spacing: 3px;
     color: var(--wht);
     background-color: transparent;
     padding: 0;
     margin: 0;
}

.totop {
     position: fixed;
     right: 4vw;
     bottom: 12vh;
     background-color: transparent;
     border: none;
     outline: none;
     padding: 0;
     margin: 0;
     font-size: 40px;
     color: var(--pri);
     z-index: 4;
     cursor: pointer;
     opacity: 0;
     -webkit-transform: translateY(20px);
     transform: translateY(20px);
     -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
     transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
     transition: opacity 0.5s ease, transform 0.5s ease;
     transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
     transition: opacity 0.5s ease, transform 0.5s ease, -webkit-transform 0.5s ease;
}

.totop.show {
     opacity: 1;
     -webkit-transform: translateY(0);
     transform: translateY(0);
}

.totop:hover {
     color: var(--ter);
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}

/* ======================== */

.envelope {
     height: auto;
     width: 100vw;
     background-color: var(--gry);
     padding: 5vh 10vw;
}

.content {
     width: 100%;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: start;
     -ms-flex-align: start;
     align-items: flex-start;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
}

.left-panel {
     width: 44vw;
     overflow: auto;
     -ms-overflow-style: none;
     scrollbar-width: none;
     overflow: -moz-scrollbars-none;
     position: relative;
     display: grid;
     grid-template-columns: repeat(5, 8vw [col-start]);
     justify-items: stretch;
     -webkit-column-gap: 1vw;
     column-gap: 1vw;
     padding: 0;
}

button.blog_box {
     background-color: transparent;
     border: none;
     cursor: pointer;
     margin-bottom: 1vw;
}

button.blog_box:hover {
     scale: 1.1;
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}

.blog_picture {
     width: 8vw;
     height: 8vw;
     position: relative;
}

img.blog_image {
     width: 100%;
     height: 100%;
     -o-object-fit: cover;
     object-fit: cover;
}

.blog_podpis {
     position: absolute;
     bottom: 1vh;
     left: 0;
     background-color: black;
     font-size: 14px;
     font-weight: 500;
     color: white;
     text-align: left;
     padding: 1vh;
     opacity: 0.8;
}

.right-panel {
     width: 32vw;
     /*max-height: 100%;*/
     background-color: #ffffff;
     overflow-y: auto;
     -ms-overflow-style: none;
     scrollbar-width: none;
     overflow: -moz-scrollbars-none;
}

.illust_box {
     width: 100%;
     height: 26vh;
     position: relative;
}

.posts-mobile {
     display: none;
}

img.illust_article {
     width: 100%;
     height: 100%;
     -o-object-fit: cover;
     object-fit: cover;
}

.data_blog {
     width: 100%;
     font-family: var(--rub);
     font-size: 15px;
     font-weight: 600;
     text-align: right;
     color: grey;
     padding: 2vh 1vw;
}

.tytul_blog h2 {
     width: 100%;
     font-family: var(--osw);
     font-size: 28px;
     font-weight: 700;
     color: var(--pri);
     padding: 2vh 1vw;
}

.tresc_blog {
     width: 100%;
     padding: 2vh 1vw;
}

.content .left::-webkit-scrollbar,
.content .right::-webkit-scrollbar {
     display: none;
}

.content .left::-webkit-scrollbar,
.content .right::-webkit-scrollbar {
     width: 0 !important;
}

/* ============================================================
   BANER COOKIES
   ============================================================ */

.moj_baner {
     display: none;
     position: fixed;
     bottom: 8vh;
     left: 25vw;
     width: 50vw;
     background: #1a1a1a;
     color: #ffffff;
     padding: 4vh 2vw;
     z-index: 9999999;
     text-align: center;
     border: none;
}

.moj_baner p {
     font-family: "Roboto", sans-serif;
     font-size: 0.85rem;
     line-height: 1.2;
}

.moj_baner a {
     color: var(--normal);
     font-weight: 500;
     text-decoration: none;
}

.moj_baner a:hover {
     color: var(--light);
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
}

.akceptuj_btn,
.odrzuc_btn {
     border: none;
     outline: none;
     color: #ffffff;
     padding: 1vh 0.75vw;
     margin: 0 1vw;
     font-family: "Roboto", sans-serif;
     font-size: 0.65rem;
     font-weight: 600;
     text-transform: uppercase;
     cursor: pointer;
}

.akceptuj_btn {
     background-color: green;
}

.akceptuj_btn:hover {
     background-color: #07bc07;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
}

.odrzuc_btn {
     background-color: darkred;
}

.odrzuc_btn:hover {
     background-color: #c32f2f;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
}




@media (max-width: 1200px) {

     .mob_invis,
     .vignette .right,
     .envelope .left-panel,
     .envelope .right-panel,
     article#contacts .left {
          display: none;
     }

     .posts-mobile {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          width: 100%;
          background-color: transparent;
     }

     .post-casette {
          margin-bottom: 5vh;
          background-color: white;
     }

     header > .left > svg {
          height: 24px;
     }

     header > .left > h6 {
          font-size: 18px;
     }

     header > .middle {
          -ms-flex-pack: distribute;
          justify-content: space-around;
     }

     button.client {
          padding: 10px;
     }

     .vignette {
          background-position: 80% center;
     }

     .vignette h1 {
          font-size: 40px;
          white-space: pre-line;
          word-spacing: 100vw;
          bottom: 40vh;
     }

     .vignette h2 {
          width: 70%;
          bottom: 18vh;
          font-size: 16px;
     }

     .bridge_nav2 {
          width: 100%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
     }

     .bridge_nav2 button.bridge {
          width: 70%;
          padding: 3vh 2vw;
          background-color: var(--pri);
          border: none;
          outline: none;
          font-family: var(--osw);
          font-size: 24px;
          font-weight: 700;
          letter-spacing: 2px;
          color: var(--wht);
          cursor: pointer;
     }

     .bridge_nav2 button.bridge:hover {
          background-color: var(--sec);
          -webkit-transition: 0.3s all;
          transition: 0.3s all;
     }

     section.services {
          padding: 4vh 10vw;
     }

     section.services > .container > .box {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
     }

     section.services > .container > .box > .item {
          width: 100%;
     }

     section.services > .container > .box > .item > img {
          height: 200px;
     }

     section.services > .container > .box > .item > .title > h4 {
          font-size: 24px;
     }

     section.services > .container > .box > .item > .essence > p {
          font-size: 18px;
     }

     section.prices > .container > .box {
          width: 100%;
     }

     footer > .container > .box {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
     }

     footer > .container > .box > button {
          font-size: 20px;
          margin-bottom: 5vh;
     }

     #cookies-message {
          width: 76vw;
          left: 12vw;
          border-radius: 5px;
     }

     #cookies-message button {
          width: 100%;
          padding: 15px 10px;
          border-radius: 5px;
     }

     #cookies-message a:hover {
          color: var(--ter);
          -webkit-transition: 0.3s all;
          transition: 0.3s all;
     }

     .terms {
          padding: 2vh 4vw;
          font-size: 16px;
     }

     .modal_client {
          width: 80vw;
          top: 50vh;
     }

     .plate_modal {
          width: 80vw;
          height: 35vh;
          top: 50vh;
     }

     .plate_modal_plus {
          width: 80vw;
          height: 35vh;
          top: 50vh;
     }

     .vignette_mobile {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          width: 100vw;
          height: 100vh;
          position: relative;
     }

     .modal {
          width: 90vw;
          max-height: 90vh;
          top: 5vh;
          left: 5vw;
     }

     .line_left form {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
     }

     .part_3 {
          width: 100%;
     }

     .line {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          margin-bottom: 0;
     }

     .box input,
     .box select {
          padding: 10px 8px;
     }

     .part_2 {
          width: 100%;
          margin-bottom: 1vh;
     }

     .part_4 {
          width: 100%;
          margin-bottom: 1vh;
     }

     .part_5 {
          width: 100%;
          margin-bottom: 1vh;
     }
}