@font-face {
    font-family: 'Poppins supple';
    src: url('../fonts/Poppins-BoldItalic.woff2') format('woff2'),
        url('../fonts/Poppins-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins supple';
    src: url('../fonts/Poppins-ExtraBoldItalic.woff2') format('woff2'),
        url('../fonts/Poppins-ExtraBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins supple';
    src: url('../fonts/Poppins-ExtraLight.woff2') format('woff2'),
        url('../fonts/Poppins-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins supple';
    src: url('../fonts/Poppins-ExtraLightItalic.woff2') format('woff2'),
        url('../fonts/Poppins-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins supple';
    src: url('../fonts/Poppins-Italic.woff2') format('woff2'),
        url('../fonts/Poppins-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins supple';
    src: url('../fonts/Poppins-ExtraBold.woff2') format('woff2'),
        url('../fonts/Poppins-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins supple';
    src: url('../fonts/Poppins-Bold.woff2') format('woff2'),
        url('../fonts/Poppins-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins supple';
    src: url('../fonts/Poppins-BlackItalic.woff2') format('woff2'),
        url('../fonts/Poppins-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins supple';
    src: url('../fonts/Poppins-Black.woff2') format('woff2'),
        url('../fonts/Poppins-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins supple';
    src: url('../fonts/Poppins-SemiBold.woff2') format('woff2'),
        url('../fonts/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins supple';
    src: url('../fonts/Poppins-Light.woff2') format('woff2'),
        url('../fonts/Poppins-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins supple';
    src: url('../fonts/Poppins-LightItalic.woff2') format('woff2'),
        url('../fonts/Poppins-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins supple';
    src: url('../fonts/Poppins-Medium.woff2') format('woff2'),
        url('../fonts/Poppins-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins supple';
    src: url('../fonts/Poppins-MediumItalic.woff2') format('woff2'),
        url('../fonts/Poppins-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins supple';
    src: url('../fonts/Poppins-Regular.woff2') format('woff2'),
        url('../fonts/Poppins-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins supple';
    src: url('../fonts/Poppins-Thin.woff2') format('woff2'),
        url('../fonts/Poppins-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins supple';
    src: url('../fonts/Poppins-SemiBoldItalic.woff2') format('woff2'),
        url('../fonts/Poppins-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins supple';
    src: url('../fonts/Poppins-ThinItalic.woff2') format('woff2'),
        url('../fonts/Poppins-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'KH Interference';
    src: url('../fonts/KHInterference-Regular.woff2') format('woff2'),
         url('../fonts/KHInterference-Regular.woff') format('woff'),
         url('../fonts/KHInterference-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KH Interference';
    src: url('../fonts/KHInterference-Bold.woff2') format('woff2'),
         url('../fonts/KHInterference-Bold.woff') format('woff'),
         url('../fonts/KHInterference-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KH Interference';
    src: url('../fonts/KHInterference-Light.woff2') format('woff2'),
         url('../fonts/KHInterference-Light.woff') format('woff'),
         url('../fonts/KHInterference-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

body {
  font-family: 'KH Interference', 'Poppins supple', 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.botonesInferioresSupplecert {
    box-shadow: -1px 2px rgba(189, 58, 143);
    color: black;
    border-radius: 1vh;
    background-color: #DDA2C8;
}

.botonesInferioresSupplecert:hover {
    filter: brightness(85%);
    background-color: #DDA2C8 !important;
    color: black !important;
}

.botonesInferioresSupplecert:active {
    filter: brightness(70%);
    background-color: #DDA2C8 !important;
    color: black !important;
}

.botonesInferioresAgrosupp {
    box-shadow: -1px 2px rgba(83, 185, 51, 0.8);
    color: black;
    border-radius: 1vh;
    background-color: #B2E38B;
}

.botonesInferioresAgrosupp:hover {
    filter: brightness(85%);
    background-color: #B2E38B !important;
    color: black !important;
}

.botonesInferioresAgrosupp:active {
    filter: brightness(70%);
    background-color: #B2E38B !important;
    color: black !important;
}

.botonesInferioresEventsupp {
    box-shadow: -1px 2px rgba(208, 37, 39, 0.8);
    color: black;
    border-radius: 1vh;
    background-color: #E67B7D;
}

.botonesInferioresEventsupp:hover {
    filter: brightness(85%);
    background-color: #E67B7D !important;
    color: black !important;
}

.botonesInferioresEventsupp:active {
    filter: brightness(70%);
    background-color: #E67B7D !important;
    color: black !important;
}

.botonesInferioresSupplefact {
    box-shadow: -1px 2px rgba(171, 59, 243, 0.8);
    color: black;
    border-radius: 1vh;
    background-color: #C89EFF;
}

.botonesInferioresSupplefact:hover {
    filter: brightness(85%);
    background-color: #C89EFF !important;
    color: black !important;
}

.botonesInferioresSupplefact:active {
    filter: brightness(70%);
    background-color: #C89EFF !important;
    color: black !important;
}

.enlacesNavBar:hover {
    cursor: pointer;
}

#contenedorLogoNavBar:hover {
    cursor: pointer;
}

.btn-primary {
    border-color: transparent !important;
}

.titulo-h1 {
    font-size: clamp(1.25rem, 4vw, 2.5rem);
}

.titulo-h2 {
    font-size: clamp(1rem, 3.5vw, 2.25rem);
}

.contInfSupplecert {
    background-color: rgba(255, 255, 255, 0.123);
}

.contInfSupplefact {
    background-color: rgba(255, 255, 255, 0.089);
}

.contInfAgrosupp {
    background-color: rgba(255, 255, 255, 0.123);
}

.contInfEventsupp {
    background-color: rgba(255, 255, 255, 0.089);
}

input::placeholder {
  font-size: 13px;
}

input::-moz-placeholder {
  font-size: 13px;
}

input:-ms-input-placeholder {
  font-size: 13px;
}

input::-ms-input-placeholder {
  font-size: 13px;
}

textarea::placeholder {
  font-size: 13px;
}

textarea::-moz-placeholder {
  font-size: 13px;
}

textarea:-ms-input-placeholder {
  font-size: 13px;
}

input::-ms-input-placeholder {
  font-size: 13px;
}

label {
    color: black;
}

.form-floating {
    position: relative !important;
}

@media (max-width: 991.98px) {
    #menuNavbar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #000;
        z-index: 1;
        padding: 1rem 1rem;
    }

    .navbar-collapse.collapse.show {
        display: block !important;
    }
}

@media (max-width: 375.99px) {
    .logoSupple {
        height: 16vw;
        max-height: 26vw;
        min-height: 15vw;
    }
    .titulo-h1 { 
        font-size: 5vw; 
    }
    .titulo-h2 { 
        font-size: 4vw; 
    }
    .titulo-h3 { 
        font-size: 3vw; 
    }
    .titulo-h4 { 
        font-size: 2.5vw; 
    }
    .texto { 
        font-size: 2.25vw; 
    }
    .logoNavBar {
        height: 7vw;
        max-height: 8vw;
        min-height: 6vw;
    }
    .logosSupple {
        height: 9vw;
        max-height: 10vw;
        min-height: 8vw;
    }
    #vistaSuppleSeleccionado {
        height: calc(100vh - 34vw);
        min-height: fit-content;
    }
    #contenedorSupple {
        height: calc(100vh - 40vw);
    }
    .contenedorIcono {
        height: calc(100vw - 75vw);
    }
    .contenedorTexto,
    .contenedorImg {
        width: 100% !important;
    }
    .formulario { 
        font-size: 2.75vw; 
    }
    .btnFormContacto {
        border-radius: 3vh !important;
        height: 4vh;
        width: 12vh;
        font-size: 3vw !important;
    }
}

@media (min-width: 376px) and (max-width: 499.99px) {
    .logoSupple {
        height: 16vw;
        max-height: 26vw;
        min-height: 15vw;
    }
    .titulo-h1 { 
        font-size: 6vw; 
    }
    .titulo-h2 { 
        font-size: 5vw; 
    }
    .titulo-h3 { 
        font-size: 3vw; 
    }
    .titulo-h4 { 
        font-size: 2.75vw; 
    }
    .texto { 
        font-size: 2.5vw; 
    }
    .logoNavBar {
        height: 8vw;
        max-height: 9vw;
        min-height: 7vw;
    }
    .logosSupple {
        height: 10vw;
        max-height: 11vw;
        min-height: 9vw;
    }
    #vistaSuppleSeleccionado {
        height: calc(100vh - 35vw);
    }
    #contenedorSupple {
        height: calc(100vh - 40vw);
    }
    .contenedorIcono {
        height: calc(100vw - 75vw);
    }
    .contenedorTexto,
    .contenedorImg {
        width: 100% !important;
    }
    .formulario { 
        font-size: 3vw; 
    }
    .btnFormContacto {
        border-radius: 3vh !important;
        height: 4vh;
        width: 13vh;
        font-size: 3vw !important;
    }
}

@media (min-width: 500px) and (max-width: 645.99px) {
    .logoSupple {
        height: 16vw;
        max-height: 26vw;
        min-height: 15vw;
    }
    .titulo-h1 { 
        font-size: 5vw; 
    }
    .titulo-h2 { 
        font-size: 4vw; 
    }
    .titulo-h3 { 
        font-size: 3vw; 
    }
    .texto { 
        font-size: 2vw; 
    }
    .logoNavBar {
        height: 8vw;
        max-height: 9vw;
        min-height: 7vw;
    }
    .logosSupple {
        height: 10vw;
        max-height: 11vw;
        min-height: 9vw;
    }
    #vistaSuppleSeleccionado {
        height: calc(100vh - 30vw);
    }
    #contenedorSupple {
        height: calc(100vh - 31vw);
    }
    .contenedorIcono {
        height: calc(100vw - 80vw);
    }
    .contenedorTexto,
    .contenedorImg {
        width: 100% !important;
    }
    .formulario { 
        font-size: 2vw; 
    }
    .btnFormContacto {
        border-radius: 3vh !important;
        height: 5vh;
        width: 12vh;
        font-size: 2vw !important;
    }
}

@media (min-width: 646px) and (max-width: 819.99px) {
    .logoSupple {
        height: 16vw;
        max-height: 26vw;
        min-height: 15vw;
    }
    .titulo-h1 { 
        font-size: 5vw; 
    }
    .titulo-h2 { 
        font-size: 4vw; 
    }
    .titulo-h3 { 
        font-size: 3vw; 
    }
    .texto { 
        font-size: 2vw; 
    }
    .logoNavBar {
        height: 8vw;
        max-height: 9vw;
        min-height: 7vw;
    }
    .logosSupple {
        height: 10vw;
        max-height: 11vw;
        min-height: 9vw;
    }
    #vistaSuppleSeleccionado {
        height: calc(100vh - 33vw);
    }
    #contenedorSupple {
        height: calc(100vh - 37vw);
    }
    .contenedorIcono {
        height: calc(100vw - 75vw);
    }
    .contenedorTexto,
    .contenedorImg {
        width: 100% !important;
    }
    .btnFormContacto {
        border-radius: 3vh !important;
        height: 5vh;
        width: 15vh;
        font-size: 3vw !important;
    }
}

@media (min-width: 700px) and (max-width: 819.99px) {
    .logoSupple {
        height: 15vw;
        max-height: 25vw;
        min-height: 12vw;
    }
    .titulo-h1 { 
        font-size: 5vw; 
    }
    .titulo-h2 { 
        font-size: 4vw; 
    }
    .titulo-h3 { 
        font-size: 3vw; 
    }
    .texto { 
        font-size: 2vw; 
    }
    .logoNavBar {
        height: 8vw;
        max-height: 9vw;
        min-height: 7vw;
    }
    .logosSupple {
        height: 10vw;
        max-height: 11vw;
        min-height: 9vw;
    }
    #vistaSuppleSeleccionado {
        height: calc(100vh - 26.5vw);
    }
    #contenedorSupple {
        height: calc(100vh - 25.5vw);
    }
    .contenedorIcono {
        height: calc(100vw - 85vw);
    }
    .contenedorTexto,
    .contenedorImg {
        width: 100% !important;
    }
    .btnFormContacto {
        border-radius: 3vh !important;
        height: 5vh;
        width: 15vh;
        font-size: 2.5vw !important;
    }
}

@media (min-width: 820px) and (max-width: 991px) {
    .logoSupple {
        height: 15vw;
        max-height: 25vw;
        min-height: 12vw;
    }
    .titulo-h1 { 
        font-size: 5vw; 
    }
    .titulo-h2 { 
        font-size: 4vw; 
    }
    .titulo-h3 { 
        font-size: 3vw; 
    }
    .texto { 
        font-size: 2.25vw; 
    }
    .logoNavBar {
        height: 8vw;
        max-height: 9vw;
        min-height: 7vw;
    }
    .logosSupple {
        height: 10vw;
        max-height: 11vw;
        min-height: 9vw;
    }
    #vistaSuppleSeleccionado {
        height: calc(100vh - 24.5vw);
    }
    #contenedorSupple {
        height: calc(100vh - 21.5vw);
    }
    .contenedorIcono {
        height: calc(100vw - 80vw);
    }
    .contenedorTexto,
    .contenedorImg {
        width: 100% !important;
    }
    .btnFormContacto {
        border-radius: 3vh !important;
        height: 5vh;
        width: 15vh;
        font-size: 2.5vw !important;
    }
}

@media (min-width: 992px) and (max-width: 1366.99px) {
    .logoSupple {
        height: 9vw;
        max-height: 10vw;
        min-height: 8vw;
    }
    .titulo-h1 { 
        font-size: 3vw; 
    }
    .titulo-h2 { 
        font-size: 2vw; 
    }
    .titulo-h3 { 
        font-size: 1.75vw;
    }
    .texto { 
        font-size: 1vw; 
    }
    .logoNavBar,
    .logosSupple {
        height: 5vw;
        max-height: 6vw;
        min-height: 4vw;
    }
    #vistaSuppleSeleccionado {
        height: calc(100vh - 16.10vw);
    }
    #contenedorSupple {
        height: calc(100vh - 16vw);
        min-height: fit-content;
    }
    .contenedorIcono {
        height: calc(100vw - 90vw);
    }
    .contenedorTexto,
    .contenedorImg {
        width: 50% !important;
    }
}

@media (min-width: 1367px) {
    .logoSupple {
        height: 10vw;
        max-height: 10vw;
        min-height: 10vw;
    }
    .titulo-h1 { 
        font-size: 3vw; 
    }
    .titulo-h2 { 
        font-size: 2vw; 
    }
    .titulo-h3 { 
        font-size: 1.75vw; 
    }
    .texto { 
        font-size: 1vw; 
    }
    .logoNavBar,
    .logosSupple {
        height: 4vw;
        max-height: 5vw;
        min-height: 3vw;
    }
    #vistaSuppleSeleccionado {
        height: calc(100vh - 11.75vw);
        min-height: fit-content;
    }
    #contenedorSupple {
        height: calc(100vh - 10.75vw);
        min-height: fit-content;
    }
    .contenedorIcono {
        height: calc(100vw - 90vw);
    }
    .contenedorTexto {
        width: 40% !important;
    }
    .contenedorImg {
        width: 60% !important;
    }
}