html {
    scroll-behavior: smooth;
}

@font-face {
    font-family: JoselinSansRegular;
    src: url("../fonts/JosefinSans-Regular.ttf");
}

@font-face {
    font-family: JoselinSansSemibold;
    src: url("../fonts/JosefinSans-SemiBold.ttf");
}

@font-face {
    font-family: JoselinSansBold;
    src: url("../fonts/JosefinSans-Bold.ttf");
}

@font-face {
    font-family: TenorSansRegular;
    src: url("../fonts/TenorSans-Regular.ttf");
}

@font-face {
    font-family: RolewaySemiBold;
    src: url("../fonts/Raleway-SemiBold.ttf");
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000000;
    font-family: JoselinSansRegular, sans-serif;
    font-size: 1rem;
}

.pre-header {
    padding: 1.13rem;
    background-color: #461111;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}


.pre-header-tel {
    display: flex;
    align-items: center;
    margin: 0 4em;
}

.pre-header-tel a {
    font-size: 1rem;
    color: #fff;
    /* margin-right: 5em; */
    margin-left: 0.625rem;
    text-decoration: none;
}

.container {
    margin: 0 auto;
    max-width: 1200px;
}

.header {
    padding: 1.38rem 1.88rem 1.67rem 1.88rem;
    height: 7.14vh;
    background: #000000;
}

.header-artists {
    max-height: 7.14vh;
    background: #000000;
    padding: 1rem 1rem 2rem;
}

.menu {
    display: flex;
    justify-content: space-around;
}

.menu-list {
    display: flex;
    justify-content: space-between;
    list-style: none;
    width: 23em;
}

.menu-item a {
    color: #F7EEDD;
    font-size: 1.13rem;
    cursor: pointer;
    text-decoration: none;
}

.menu-item a:hover {
    color: #C79456;
    font-size: 1.15rem;
}

.menu-item-link {
    z-index: 111;
}

.menu-item-link-logo {
    margin: 0 6.25rem;
    z-index: 1;
}

.menu-item .active {
    color: #C79456;
}

.menu-mobile-header {
    display: none;
}

.burger {
    display: none;
}

.close {
    display: none;
}

.introduction {
    background-color: rgba(0, 0, 0, 0.7);
    background-image: url("../images/border-header.png"),
    url("../images/border-bottom.png");
    background-position: center top,
    center bottom;
    background-repeat: no-repeat;
    height: 90vh;
    position: relative;
    background-size: contain, contain;
}

#background-video {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1111;
}

.intro-container {
    margin: 0 auto;
    max-width: 46em;
    height: 100%;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.63rem;
}

.intro-title {
    font-family: RolewaySemiBold, sans-serif;
    font-size: 3.125rem;
    text-align: center;
    color: #fff;
    margin-bottom: 6.375rem;
    margin-top: 3.875rem;
}

.intro-span {
    font-family: JoselinSansSemibold, sans-serif;
    font-size: 1.375rem;
    text-align: center;
    color: #fff;
    margin-bottom: 2.563rem;
}

.intro-span-img {
    font-family: JoselinSansSemibold, sans-serif;
    font-size: 1rem;
    text-align: center;
    color: #F7EEDD;
    margin: 2.563rem 0 4rem;
}

.intro-span-two {
    font-family: RolewaySemiBold, sans-serif;
    font-size: 2.5rem;
    text-align: center;
    color: #e58005;
    animation: typing 4s steps(30) 1s infinite;
    white-space: nowrap;
    overflow: hidden;
    /*margin-bottom: 1.313rem;*/
}


@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

.services {
    display: flex;
    justify-content: space-between;
    background-color: #000000;
    color: #F7EEDD;
    padding: 0.938rem 1.75rem 0.313rem 1.75rem;
    cursor: pointer;
}

.service {
    text-align: center;
    width: 22%;
    text-decoration: none;
}

.service h2 {
    font-family: RolewaySemiBold, sans-serif;
    font-size: 1.125rem;
    color: #c79456;
    margin-bottom: 0.625rem;
}

.service span {
    font-size: 1rem;
    color: #f7eedd;
    line-height: 1;
}

.studio {
    background-color: #461111;
    padding: 6.25rem 1.563rem 4.875rem 1.563rem;
    background-image: url(../images/border-header.png), url(../images/border.png);
    background-position: center -0.35em, center bottom;
    background-repeat: no-repeat;
    background-size: contain;
    text-align: center;
}

.studio h3 {
    font-family: JoselinSansSemibold, sans-serif;
    font-size: 1.625rem;
    color: #f7eedd;
    margin-top: 2.688rem;
}

.studio h2 {
    font-family: JoselinSansSemibold, sans-serif;
    font-size: 2.25rem;
    color: #d89551;
    margin-top: 2.625rem;
    margin-bottom: 2.625rem;
}

.studio p {
    margin-bottom: 2.4em;
    font-size: 1.25rem;
    color: #fff;
}

.slick-dotted.slick-slider {
    max-width: 56.25em;
    max-height: 26.9em;
    display: block;
    margin: 0 auto;
}

.single-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16/7;
}

.modal-mobile {
    display: none;
    width: 100%;
    margin: 0 auto 3rem;
    background-color: #0a0a0a;
}

.modal-mobile-artists,
.modal-mobile-artist-ivi {
    display: none;
    width: 75%;
    margin: 0 auto 3rem;
    background-color: #0a0a0a;
}

.modal-mobile img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16/7;
    margin-bottom: 1rem;
}

.modal-mobile-artists img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 3/4;
    cursor: auto;
    margin-bottom: 1.9rem;
}

.modal-mobile-artist-ivi img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1/1;
    cursor: auto;
    margin-bottom: 0.9rem;
}

.studio-description {
    width: 70%;
    margin: 3em auto 1.13em;
}

.studio-container {
    width: 90%;
    margin: 0 auto;
}

.studio-description > p {
    line-height: 2;
    font-size: 1.25rem;
    color: #fff;
}

.studio-description span {
    font-family: JoselinSansBold, sans-serif;
    color: #F7EEDD;
}

.studio-btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.studio-button {
    display: inline-flex;
    align-items: center;
    color: #F7EEDD;
    text-decoration: none;
    margin-right: 2.688rem;
    transition: transform 0.3s ease;
}

.studio-button:hover {
    transform: scale(1.1)
}

.studio-btn-span {
    margin-right: 1.563rem;
    font-family: JoselinSansSemibold, sans-serif;
    font-size: 1.375rem;
    line-height: 1;
    color: #f7eedd;
}

.artists {
    text-align: center;
    padding: 1.625rem;
}

.artists h2 {
    font-family: JoselinSansSemibold, sans-serif;
    margin-top: 1.563rem;
    margin-bottom: 4.875rem;
    font-size: 3rem;
    color: #f7eedd;
}

.artists-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin-bottom: 9.9em;
    gap: 3.375rem;
    padding: 0 1.625rem;
}

.artists-container-first {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 34%;
    flex-shrink: 0;
    min-width: 18.75rem;
}



.artist-container-img {
    max-width: 100%;
    height: auto;
    margin-bottom: 1.6em;
    object-fit: cover;
}

.artist-info {
    display: flex;
    justify-content: center;
    align-items: center;
}

.artist-info-description {
    text-align: start;
    margin-left: 0.625rem;
    flex-grow: 1;
}

.artist-info-description h3 {
    font-family: JoselinSansSemibold, sans-serif;
    font-size: 1.375rem;
    color: #f7eedd;
    white-space: nowrap;
}

.artist-info-description p {
    font-size: 1rem;
    color: #fff;
    margin-top: 1.23em;
    line-height: 122%;
}

.artist-info-logo {
    margin-left: 10px;
}

.artist-info-logo img, .artist-info-logo-ivi img {
    max-width: 80px;
    height: auto;
}

.artist-container-second {
    background-image: url("../images/bg-tatoo.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#wrapper, #wrapper-two {
    width: 60%;
    max-height: 40rem;
    flex-shrink: 0;
    min-width: 25rem;
}

.artist-container-second-text {
    font-family: JoselinSansSemibold, sans-serif;
    font-size: 3rem;
    line-height: 83%;
    text-align: center;
    color: #fff;
    /*padding: 18rem 3rem;*/
    margin: 15.75rem auto;
}

.artist-container-second-description {
    font-size: 2.5rem;
    line-height: 125%;
    text-align: center;
    color: #fff;
    margin: 6.813rem auto 7rem;

}

.studio-btn-hover {
    margin-bottom: 4.3rem;
}

.block-a, .block-b {
    transition: all 0.3s ease-in-out;
}

.block-b {
    display: none;
}

.artist-container-second-description-span {
    color: #d89551;
}

.studio-button {
    display: flex;
    justify-content: center;
    align-items: center;
}

.studio-button-link {
    font-family: JoselinSansSemibold, sans-serif;
    font-size: 2.125rem;
    color: #f7eedd;
    margin-right: 1.25rem;
    text-decoration: none;
}

.artist-one {
    margin-bottom: 11.875rem;
}

.artist-two {
    margin-top: 11.875rem;
}

.wrapper-artist-info {
    margin-top: 1.6em;
}

.artist-info-logo-ivi {
    margin-right: 1em;
}

.artists-text {
    font-size: 1.875rem;
    text-align: center;
    color: #fff;
    max-width: 38.438rem;
    margin: 0 auto 11rem;
    line-height: 130%;
}

.artist-container-second-description-ivi {
    font-size: 2.5rem;
    line-height: 125%;
    text-align: center;
    color: #fff;
    margin: 2rem auto 5.5rem;
}

/* Horizontal rule styling */
.artist-one + svg {
    display: block;
    margin: 5rem auto;
    max-width: 800px;
    width: 90%;
    height: 2px;
}

.contact-block-one + svg {
    display: flex;
    margin: 3rem auto;
    max-width: 600px;
    width: 90%;
    height: 2px;
}

.artists-footer {
    font-family: JoselinSansSemibold, sans-serif;
    font-size: 2.5rem;
    text-align: center;
    color: #d89551;
    max-width: 23.5em;
    margin: 0 auto 1.6em;
    line-height: 130%;
}

.contact {
    background-color: #461111;
}

.contact-container {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.contact-logo {
    position: absolute;
    left: 3.125rem;
    top: -3.438rem;
}

.contact-block-one {
    text-align: center;
}

.contact-title {
    font-size: 3.75rem;
    color: #fff;
    margin-top: 3.875rem;
    margin-bottom: 2.5rem;
}

.contact-block-two {
    display: flex;
    justify-content: space-around;
    margin-top: 2.5rem;
    margin-bottom: 3.813rem;
    position: relative;
}

.contact-form {
    display: flex;
    flex-direction: column;
    width: 50%;
}

label {
    font-size: 1.1rem;
    color: #f7eedd;
    margin-bottom: 0.625rem
}

input {
    padding: 0.625rem 0.625rem 0.938rem;
    border: none;
    margin-bottom: 3.375rem;
    outline: none;
    font-size: 1.25rem;
}

textarea {
    padding: 0.625rem;
    border: none;
    margin-bottom: 2em;
    height: 6.45em;
    outline: none;
    font-size: 1.375rem;
}

input::placeholder, textarea::placeholder {
    font-size: 1rem;
    color: #555252;
    line-height: 1
}

.checkbox-check {
    display: flex;
    align-items: baseline;
    color: #F7EEDD;
    gap: 1rem;
    font-size: 0.9rem;
    margin-bottom: 3.195rem;
    margin-top: 1rem;


}

.checkbox-container input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  /* accent-color: #fbeada; color del check */
  cursor: pointer;
}

#check:checked {
    /* background-color: #fff; */
    color: #202020;
}

.contact-button {
    font-family: inherit;
    font-size: 1.5rem;
    color: #000;
    padding: 1.25rem 3.5rem 0.938rem;
    margin: 0 auto;
    background-color: #F7EEDD;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}

.contact-button:hover {
    background-color: #f7e8cc;
    font-size: 1.563rem;
}

.contact-button:focus {
    box-shadow: 0 1px 4px 5px rgba(247, 238, 221, 0.4);
}

.contact-data {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contact-data-container {
    display: flex;
    margin-bottom: 2.5rem;
    align-items: center;
}

.contact-data-description {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.625rem;
    margin-left: 1rem;
}

.footer-data-container-index * img {
    max-width: 1.5rem;
    margin-right: 1rem;
}

.contact-data-description-link {
    margin-bottom: 0.625rem;
    font-size: 1.25rem;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.contact-data-description-second {
    font-size: 1.25rem;
    color: #fff;
    margin-left: 0.625rem;
}

.contact-data-description-first {
    margin-bottom: 0.625rem;
    font-size: 1.25rem;
    color: #fff;
    text-decoration: none;
}

.contact-data-description-first-span {
    margin-left: 0.875rem;
}

.contact-data-description-container {
    display: flex;
    justify-content: space-between;
}

.contact-phone {
    margin-right: 3.25rem;
}

.contact-data-description-first span {
    font-size: 1.125rem;
}

.contact-data-description-second span {
    font-size: 1.125rem;
}

.contact-data-legal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 82%;
    margin: 0 auto;
}

.contact-data-legal a, .footer-legal a {
    font-size: 0.8rem;
    color: #fff;
    text-decoration: none;
}

.footer {
    background-color: #461111;
    position: relative;
    padding: 1.5rem 1.25rem;
}

.footer-logo {
    position: absolute;
    left: 3.125rem;
    top: -3.438rem;
}

.footer-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 85%;
    margin-left: auto;
}

.footer-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 3rem;
    margin-bottom: 1.5rem;
    margin-top: 0.75rem;
}

.contact-data-svg {
    margin-right: 1rem;
}

.footer-legal {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-legal svg {
    margin: 0 0.938rem;
}

.footer-description-first {
    font-size: 1rem;
    color: #fff;
    text-decoration: none;
}

.footer-description-link {
    font-size: 1rem;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.footer-description-first span {
    font-size: 1rem;
}

.footer-description-second span {
    font-size: 1rem;
}

.footer-description-second {
    font-size: 1rem;
    color: #fff;
    margin-left: 0.625rem;
}

.footer-data-container {
    display: flex;
    margin-bottom: 2.5rem;
    align-items: center;
}

.footer-container-first {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-container-index {
    display: none;
}

.footer-data-index {
    display: flex;
}

#myBtn {
    display: none;
    position: fixed;
    bottom: 1.25rem;
    right: 1.875rem;
    z-index: 99;
    border: none;
    outline: none;
    background-color: transparent;
    cursor: pointer;
}

#myBtn img {
    width: 2.188rem;
}

#myBtn img:hover {
    width: 2.375rem;
}

.cookie-banner {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #ffffff;
    color: rgb(122, 122, 122);
    padding: 2.5rem 1.875rem;
    z-index: 9999;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.7);
    animation: slideUp 0.5s ease-out;
    display: none;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0%);
    }
}

.error-message {
  color: red;
  font-size: 0.9em;
  display: block;
  margin-bottom: 0.625rem;
  display: none;
}

.modal {
    display: none;
    background: #fff;
    padding: 2.25rem;
    border-radius: 8px;
    font-weight: bold;
    color: rgb(96 96 96);
    font-size: 1.1rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 111;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -120%);
}

.modal p {
    margin: 2.25rem auto;
    text-align: center;
}

.modal-text button:hover {
  background: #461111;
}

.order-success-btn {
    font-size: 19px;
    border-radius: 5px;
    padding: 5px 20px;
    margin-top: 30px;
    color: rgb(249, 250, 251);
    background-image: linear-gradient(0deg, #461111 0%, rgba(172, 42, 42, 0.8) 100%);
    border: none;
    cursor: pointer;
    display: block;
    margin: 0 auto;
}

.cookie-close {
    position: absolute;
    top: -0.25rem;
    right: 0.625rem;
    font-size: 2.5rem;
    color: rgb(122, 122, 122);
    cursor: pointer;
    font-weight: bold;
    transition: color 0.3s ease;
}

.cookie-close:hover {
    color: #1f1f1f;
    font-size: 2.813rem;
}

.cookie-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.cookie-content p {
    font-size: 0.875rem;
    line-height: 1.5;
    padding-right: 2.5rem;
}

.cookie-buttons {
    display: flex;
    justify-content: center;
    gap: 0.938rem;
}

#decline-cookies {
    background-color: transparent;
    border: 1px solid #f39c12;
    color: #f39c12;
    padding: 0.5rem 1.563rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cookie-buttons button {
    border: transparent;
    background-color: #f39c12;
    color: #0a0a0a;
    padding: 0.5rem 1.755rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cookie-buttons button:hover, #decline-cookies:hover {
    background-color: rgba(243, 156, 18, 0.67);
    color: #0a0a0a;
}

.loader {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10;
    display: none;
}

.lds-spinner,
.lds-spinner div,
.lds-spinner div:after {
    box-sizing: border-box;
}

.lds-spinner {
    color: currentColor;
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-spinner div {
    transform-origin: 40px 40px;
    animation: lds-spinner 1.2s linear infinite;
}

.lds-spinner div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3.2px;
    left: 36.8px;
    width: 6.4px;
    height: 17.6px;
    border-radius: 20%;
    background: antiquewhite;
}

.lds-spinner div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
}

.lds-spinner div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
}

.lds-spinner div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
}

.lds-spinner div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
}

.lds-spinner div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
}

.lds-spinner div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
}

.lds-spinner div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
}

.lds-spinner div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
}

.lds-spinner div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
}

.lds-spinner div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
}

.lds-spinner div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
}

.lds-spinner div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
}

@keyframes lds-spinner {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.mySlides {
    display: none;
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .6
    }
    to {
        opacity: 1
    }
}

.dot {
    height: 1rem;
    width: 1rem;
    background-color: #313131;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    cursor: pointer;
    margin: 0 0.65rem;
}

.dot.active {
    background-color: rgba(248, 239, 239, 0.9);
    transform: scale(1.1);
    transition: all 0.3s ease;
}

.another {
    margin-top: 3rem;
}

.copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    color: #fff;
    font-size: 0.8rem;
}

.developer {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 2rem auto 3rem;
}

.developer a {
    cursor: pointer;
    color: #f7e8cc;
    text-decoration: none;
    font-size: 1.25rem;
    text-align: center;
}

.developer a:hover {
    font-size: 1.2rem;
}

.logoMarina {
    cursor: pointer;
    width: 3.125rem;
}

.logoMarina:hover {
    width: 4rem;
}

.center {
    display: flex;
    justify-content: space-between;
    align-items: center;
}