html,
body {
     margin: 0;
     padding: 0;
     border: none;
     background-color: #000000;
     font-family: "Antonio", sans-serif;
     font-size: 24px;
     font-weight: 500;
     color: #ffffff;
}

* {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}

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

.container {
     width: 90vw;
     margin: 0 auto;
     height: 100vh;
}

header {
     width: 90vw;
     margin: 0 auto;
     height: 10vh;
     font-size: 40px;
     font-weight: 700;
     letter-spacing: 2px;
     color: goldenrod;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
     -ms-flex-direction: row;
     flex-direction: row;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     text-align: center;
}

header img {
     height: 50px;
}

header input {
     width: 10vw;
     font-family: "Antonio", sans-serif;
     font-weight: 500;
     font-size: 24px;
     padding: 1vh 0;
     background-color: transparent;
     color: #ffffff;
     border: 0;
     outline: 0;
     border-bottom: 1px solid #ffffff;
}

header button {
     font-family: "Antonio", sans-serif;
     font-weight: 500;
     font-size: 24px;
     padding: 1vh 0;
     background-color: transparent;
     color: #ffffff;
     border: 0;
     outline: 0;
     cursor: pointer;
}

header button i:hover {
     color: limegreen;
     -webkit-transition: all 0.2s ease;
     transition: all 0.2s ease;
}

.screen {
     width: 90vw;
     margin: 0 auto;
     height: 67vh;
     position: relative;
}

.prev {
     position: absolute;
     top: 50%;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     left: 0.5vw;
     color: #ffffff;
     cursor: pointer;
     font-size: 40px;
     font-weight: 700;
     z-index: 20;
}

.next {
     position: absolute;
     top: 50%;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     right: 0.5vw;
     color: #ffffff;
     cursor: pointer;
     font-size: 40px;
     font-weight: 700;
     z-index: 20;
}

.prev:hover,
.next:hover {
     color: dodgerblue;
     -webkit-transition: all 0.2s ease;
     transition: all 0.2s ease;
}

.slide {
     width: 100%;
     height: 67vh;
     text-align: center;
}

.slide img {
     max-width: 100%;
     max-height: 100%;
     min-width: 100%;
     min-height: 100%;
     -o-object-fit: contain;
     object-fit: contain;
}

.subtitle {
     width: 90vw;
     margin: 0 auto;
     height: 8vh;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     letter-spacing: 2px;
     word-spacing: 4px;
}

.over_ribbon,
.ribbon {
     width: 90vw;
     margin: 0 auto;
     height: 15vh;
     overflow-x: auto;
     overflow-y: hidden;
     white-space: nowrap;
     position: relative;
     scroll-behavior: smooth;
     -ms-overflow-style: none;
     scrollbar-width: none;
}

.over_ribbon::-webkit-scrollbar,
.ribbon::-webkit-scrollbar {
     -webkit-appearance: none;
}

.box {
     width: 12vh;
     height: 12vh;
     margin-right: 1vw;
     display: inline-block;
     position: relative;
}

.box img {
     width: 100%;
     height: 100%;
     -o-object-fit: cover;
     object-fit: cover;
     opacity: 0.6;
     cursor: pointer;
}

.box img:hover {
     opacity: 1;
     -webkit-transition: all 0.2s ease;
     transition: all 0.2s ease;
}

.rokk {
     position: absolute;
     right: 0.25vw;
     bottom: 0.5vh;
     font-size: 16px;
}

.content {
     width: 90vw;
     margin: 0 auto;
     padding: 1vh 0;
     display: grid;
     grid-template-columns: repeat(5, 16vw);
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
}

.box_main {
     width: 16vw;
     height: 16vw;
     margin-bottom: 5vh;
     position: relative;
}

.box_main:hover {
     -webkit-transform: scale(1.05);
     transform: scale(1.05);
     -webkit-transition: all 0.2s ease;
     transition: all 0.2s ease;
}

.box_main button {
     width: 100%;
     height: 100%;
     -o-object-fit: cover;
     object-fit: cover;
     padding: 0;
     margin: 0;
     border: 0;
     cursor: pointer;
}

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

.box_main span {
     position: absolute;
     left: 0;
     bottom: 2vh;
     z-index: 100;
     font-weight: 700;
     text-transform: capitalize;
     color: #000000;
     padding: 1vh 0.5vw;
     background: rgba(255, 255, 255, 0.5);
}

footer {
     width: 90vw;
     margin: 0 auto;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     padding: 2vh 0;
     font-size: 20px;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}

footer > a:hover {
     color: limegreen;
     -webkit-transition: all 0.2s ease;
     transition: all 0.2s ease;
}

footer a.tajny {
     cursor: text;
}

.content_text {
     width: 100%;
     font-size: 18px;
     font-weight: 200;
     letter-spacing: 1px;
     word-spacing: 2px;
}

.left {
     position: absolute;
     left: 0.5vw;
     top: 5vh;
     z-index: 20;
     background-color: transparent;
     color: #ffffff;
     border: none;
     cursor: pointer;
     font-size: 24px;
     font-weight: 700;
}

.right {
     position: absolute;
     right: 0.5vw;
     top: 5vh;
     z-index: 20;
     background-color: transparent;
     color: #ffffff;
     border: none;
     cursor: pointer;
     font-size: 24px;
     font-weight: 700;
}

.left:hover,
.right:hover {
     color: dodgerblue;
     -webkit-transition: all 0.2s ease;
     transition: all 0.2s ease;
}

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

.wrapper {
     width: 100%;
     height: 100%;
}

.wrapper > img {
     width: 20vw;
     position: fixed;
     top: 35vh;
     left: 20vw;
}

.wrapper .formulario {
     width: 30vw;
     position: fixed;
     top: 10vh;
     right: 15vw;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}

label {
     width: 30vw;
     margin-top: 1vh;
     font-size: 14px;
     font-weight: 500;
     letter-spacing: 3px;
}

input[type="password"] {
     width: 30vw;
     font-family: "Antonio", sans-serif;
     font-weight: 500;
     font-size: 20px;
     letter-spacing: 1px;
     color: #ffffff;
     background-color: transparent;
     padding: 1vh 0;
     margin-bottom: 3vh;
     border: 0;
     outline: 0;
     border-bottom: 1px solid #ffffff;
}

.final {
     width: 30vw;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}

.final a {
     display: inline-block;
     width: 23%;
     padding: 1vh 0;
     font-size: 15px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     text-align: center;
     background-color: transparent;
     border: 1px solid #ffffff;
     color: #ffffff;
}

.final a:hover {
     background-color: #ffffff;
     color: #000000;
     -webkit-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
}

.final input[type="reset"] {
     width: 23%;
     padding: 1vh 0;
     font-family: "Antonio", sans-serif;
     font-size: 15px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     text-align: center;
     background-color: transparent;
     border: 1px solid #ffffff;
     color: #ffffff;
     cursor: pointer;
}

.final input[type="reset"]:hover {
     background-color: #ffffff;
     color: #000000;
     -webkit-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
}

.final input[type="submit"] {
     width: 50%;
     padding: 1vh 0;
     font-family: "Antonio", sans-serif;
     font-size: 15px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     text-align: center;
     background-color: transparent;
     border: 1px solid #ffffff;
     color: #ffffff;
     cursor: pointer;
}

.final input[type="submit"]:hover {
     background-color: #ffffff;
     color: #000000;
     -webkit-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
}

.formulario input[type="file"] {
     width: 30vw;
     font-family: "Antonio", sans-serif;
     font-weight: 500;
     font-size: 20px;
     letter-spacing: 1px;
     color: #ffffff;
     background-color: transparent;
     padding: 1vh 0;
     margin-bottom: 3vh;
     border: 0;
     outline: 0;
     border-bottom: 1px solid #ffffff;
}

.formulario input[type="file"]::-webkit-file-upload-button,
.formulario input[type="file"]::file-selector-button {
     width: 25%;
     font-family: "Antonio", sans-serif;
     font-size: 15px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 2px;
     text-align: center;
     background-color: transparent;
     padding: 1vh 0;
     border: 1px solid #ffffff;
     color: #ffffff;
     cursor: pointer;
}

.formulario input[type="file"]::-webkit-file-upload-button:hover,
.formulario input[type="file"]::file-selector-button:hover {
     background-color: #ffffff;
     color: #000000;
     -webkit-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
}

.holder {
     position: fixed;
     left: 2vw;
     top: 5vh;
     width: 50vw;
     height: 90vh;
     z-index: 2000;
     background-color: transparent;
     border: 0;
     outline: 0;
}

.holder > img {
     width: 100%;
     height: 100%;
     border: none;
     -o-object-fit: contain;
     object-fit: contain;
}

.formulario input[type="text"],
.formulario input[type="date"] {
     width: 30vw;
     font-family: "Antonio", sans-serif;
     font-weight: 500;
     font-size: 20px;
     letter-spacing: 1px;
     background-color: transparent;
     color: #ffffff;
     padding: 1vh 0;
     margin-bottom: 3vh;
     border: 0;
     outline: 0;
     border-bottom: 1px solid #ffffff;
}

.formulario select {
     width: 30vw;
     font-family: "Antonio", sans-serif;
     font-weight: 500;
     font-size: 20px;
     letter-spacing: 1px;
     background-color: transparent;
     color: #ffffff;
     padding: 1vh 0;
     margin-bottom: 3vh;
     border: 0;
     outline: 0;
     border-bottom: 1px solid #ffffff;
}

.formulario select option {
     border: 0;
     outline: 0;
     background-color: #000000;
     color: #ffffff;
}

/* Styl dla pola Tagify - usuń ramkę i zostaw tylko dolne podkreślenie */
.tagify {
     border: none !important;
     /* usuń ramkę */
     border-bottom: 2px solid white;
     /* dolne podkreślenie */
     border-radius: 0 !important;
     /* brak zaokrągleń */
     padding: 5px 10px;
     font-size: 16px;
     background: transparent;
}

/* Usuń podświetlenie ramką przy focus */
.tagify:focus {
     outline: none;
     border-bottom-color: white;
     /* np. zmiana koloru przy focus */
}

/* Styl tagów w polu */
.tagify__tag {
     background-color: transparent;
     color: white;
     padding: 2px 5px;
     font-size: 14px;
}

/* Styl przycisku usuwania tagu */
.tagify__tag__removeBtn {
     color: #fff;
}

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

.wrapper .decision {
     width: 30vw;
     position: fixed;
     top: 50vh;
     right: 15vw;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}

.decision a {
     display: inline-block;
     width: 48%;
     padding: 1vh 0;
     font-size: 15px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     text-align: center;
     background-color: transparent;
     border: 1px solid #ffffff;
     color: #ffffff;
}

.decision a:hover {
     background-color: #ffffff;
     color: #000000;
     -webkit-transition: all 0.2s ease-in-out;
     transition: all 0.2s ease-in-out;
}

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

.carousel-button {
     position: absolute;
     z-index: 2;
     background: none;
     border: none;
     font-size: 40px;
     top: 50%;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     color: rgba(255, 255, 255, 0.5);
     cursor: pointer;
     background-color: rgba(0, 0, 0, 0.1);
}

.carousel-button:hover,
.carousel-button:focus {
     color: white;
     background-color: rgba(0, 0, 0, 0.2);
}

.carousel-button:focus {
     outline: 1px solid black;
}

.carousel-button.prev {
     left: -4vw;
}

.carousel-button.next {
     right: -4vw;
}

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

.content_key {
     width: 90vw;
     margin: 0 auto;
     padding: 1vh 0;
     display: grid;
     grid-template-columns: repeat(10, 8vw);
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
}

.box_key {
     width: 8vw;
     height: 8vw;
     margin-bottom: 2.5vh;
     position: relative;
}

.box_key:hover {
     -webkit-transform: scale(1.05);
     transform: scale(1.05);
     -webkit-transition: all 0.2s ease;
     transition: all 0.2s ease;
}

.box_key button {
     width: 100%;
     height: 100%;
     -o-object-fit: cover;
     object-fit: cover;
     padding: 0;
     margin: 0;
     border: 0;
     cursor: pointer;
}

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

.content_keywords {
     width: 90vw;
     height: 80vh;
}

.large_image {
     width: 100%;
     height: 60vh;
     margin-bottom: 3vh;
}

.large_image img {
     width: 100%;
     height: 100%;
     border: none;
     -o-object-fit: contain;
     object-fit: contain;
}

.keyword_list {
     width: 100%;
     height: 10vh;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -ms-flex-pack: distribute;
     justify-content: space-around;
     margin-bottom: 3vh;
}

.keyword_list input {
     width: 100%;
     border: none;
     outline: none;
     background-color: transparent;
     font-family: "Antonio", sans-serif;
     font-weight: 700;
     font-size: 28px;
     letter-spacing: 1px;
     word-spacing: 2vw;
     text-align: center;
     color: #ffffff;
}

.keyword_submit {
     width: 100%;
     height: 10vh;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -ms-flex-pack: distribute;
     justify-content: space-around;
}

.keyword_submit button {
     border: none;
     padding: 2vh 3vw;
     background-color: goldenrod;
     font-family: "Antonio", sans-serif;
     font-weight: 700;
     font-size: 16px;
     letter-spacing: 1px;
     text-transform: uppercase;
     color: #000000;
     cursor: pointer;
}

.keyword_submit button:hover {
     background-color: #f8de9c;
     -webkit-transition: all 0.2s ease;
     transition: all 0.2s ease;
}

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

@media only screen and (max-width: 1200px) {
     header {
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
     }

     span.second,
     span.third,
     footer {
          display: none;
     }

     .content {
          display: block;
     }

     .box_main {
          width: 90vw;
          height: 35vh;
          margin-bottom: 2vh;
          font-size: 30px;
     }

     .content_key {
          width: 90vw;
          margin: 0 auto;
          padding: 1vh 0;
          display: grid;
          grid-template-columns: repeat(5, 16vw);
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;
     }

     .box_key {
          width: 16vw;
          height: 16vw;
          margin-bottom: 2.5vh;
          position: relative;
     }
}