:root {
    --black-color: #000;
    --white-color: #fff;
    --dark-gray-color: #252525;
    --darker-gray-color: #111111;
    --gray-color: #747474;
    --light-gray-color: #c0c0c0;
    --lighter-gray-color: #e9e9e9;
    --ultra-light-gray-color: #fbfbfb;


    /* --web-full-work-area: 90%; */
    --web-full-work-area: 100%;
    --web-work-area: 1200px;
    --web-form-area: 800px;
    --mobile-work-area: 100%;
}

body {
    background: var(--black-color);
    color: var(--ultra-light-gray-color);
}

a, a:link, a:visited, a:hover, a:active {
    text-decoration: none;
    color: inherit;
}

select {
    width: 93%;
    color: var(--lighter-gray-color);
}

select option {
    background: inherit;
    color: var(--gray-color);
}

input[type=text], input[type="password"], input[type="date"], 
input[type="email"], input[type="number"], input[type="tel"], 
input[type="datetime-local"], input[type="time"], select, textarea {
    color: var(--lighter-gray-color);
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
}

.modal-content {
    width: 100%;
    text-align: center;
    height: 100%;
    margin: 50px 0px 0px 0px;
}

.menu {
    width: 100%;
    height: 100px;
    box-shadow: 1px 1px 3px var(--lighter-gray-color);
    position: fixed;
    /* background: var(--white-color); */
    top: 0px;
    background: var(--black-color);
}

.icons-menu {
    display: grid;
    grid-template-columns: 500px auto;
    /* grid-template-columns: 1fr; */
    margin: auto auto;
    /* width: 100%; */
    width: 85%;
    padding: 5px 0px 0px 0px;
}

.logo-smfp {
    background-repeat: no-repeat;
    background-size: contain;
    /* background-position: center left; */
    background-position: center center;
    height: 90px;
    cursor: pointer;
    background-image: url("../images/logo_em_white.png");
}

.menu-icon {
    /* color: var(--lighter-gray-color); */
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    padding: 20px 0px 0px 0px;
}

.menu-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.menu-elem {
    width: 100px;
    margin: 0px 10px;
    text-align: end;
    cursor: pointer;
}

.main-container {
    margin: 120px auto 0px auto;
    width: var(--web-full-work-area);
}


.body-title {
    text-align: center;
    padding: 20px 0px;
    font-size: 40px;
    font-weight: 400;
}

.body-subtitle {
    text-align: center;
    padding: 0px 0px 30px 0px;
    font-size: 25px;
    font-weight: 200;
}

.slide-container {
    /* width: 100%; */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 700px;
    background-image: url("../images/Kukulkan_ppa.jpg");
    display: grid;
    grid-template-rows: 40% 60%;
    color: var(--white-color);
    text-shadow: 2px 2px 3px var(--darker-gray-color);
    transition: 0.8s;
}

.slide-title {
    display: flex;
    align-items: flex-end;
    padding: 0px 40px 40px 40px;
    font-size: 70px;
    font-weight: 800;
}

.slide-caption {
    display: flex;
    padding: 0px 40px 0px 40px;
    align-items: flex-start;
    font-size: 18px;
    font-weight: 200;
}

.contest-timer {
    margin: 50px 0px 50px 0px;
}

.contest-timer-title {
    font-size: 25px;
    text-align: center;
    font-weight: 300;
    margin: 0px 0px 20px 0px;
}

.contest-timer-subtitle {
    font-size: 16px;
    text-align: center;
    font-weight: 300;
}

.c-timer {
    margin: 0px auto 30px auto;
    font-size: 25px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 300px;
    text-align: center;
}

.c-timer-text {
    font-weight: 300;
    font-size: 12px;
}

.contest-advice {
    text-align: center;
    padding: 90px 0px;
}

.c-advice-title {
    font-size: 30px;
}

.c-advice-caption {
    font-size: 40px;
    font-weight: 200;
}

.c-advice-date {
    font-size: 18px;
    font-weight: 200;
}

.contest-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px 0px 0px 0px;
}

.button{
    background: var(--white-color);
    border: solid 1px var(--light-gray-color);
    padding: 15px 25px;
    border-radius: 5px;
    margin: 0px 10px;
    width: 120px;
    color: var(--black-color);
    cursor: pointer;
    font-size: 14px; 
    display: inline-block;
    text-align: center;
}

.button:hover {
    background-color: var(--gray-color);
    color: var(--white-color);
}

.category-container {
    width: 100%;
    margin: 0px 0px 0px 0px;
    background: var(--darker-gray-color);
    padding: 40px 0px;
}

.category-container-title {
    text-align: center;
    font-size: 30px;
    padding: 0px 0px 30px 0px;
}

.category-text-title {
    font-size: 22px;
    padding: 10px 0px 5px 30px;
    border-top: solid 1px var(--light-gray-color);
    display: grid;
    grid-template-columns: 80% 20%;
}

.category-text-caption {
    font-size: 16px;
    padding: 20px 15px 0px 15px;
    font-weight: 200;
    display: none;   
}

.category-text-caption.show {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 0px 0px 30px 0px;
}

.cat-caption-text {
    text-align: justify;
    padding: 0px 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 300;
}

.cat-caption-img {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cat-caption-img img {
    max-width: 400px;
    max-height: 400px;
}

.cat-icon {
    cursor: pointer;
}

.about-us-container {
    margin: 50px 0px 0px 0px;
    background: var(--light-gray-color);
    color: var(--darker-gray-color);
    padding: 40px 0px;
    display: grid;
    grid-template-columns: 40% 60%;
}

.about-us-title {
    text-align: center;
    font-size: 30px;
    margin: 0px 0px 20px 0px;
    grid-column: 1 / span 2;
}

.about-us-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-us-image img {
    max-width: 400px;
}

.about-us-text {
    padding: 0px 90px;
    text-align: justify;
    font-size: 22px;
    font-weight: 300;
    display: flex;
    align-items: center;
}


.footer-container {
    margin: 0px auto;
    width: var(--web-full-work-area);
}

.footer-body {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 20px 0px;
    background: var(--darker-gray-color);
    color: var(--ultra-light-gray-color);
}

.footer-section {
    text-align: justify;
}

.footer-social-grid {
    display: flex;
    margin: 0px 0px 20px 0px;
    align-items: center;
    /* justify-content: center; */
    padding: 0px 50px;
}

.footer-social {
    font-size: 30px;
    padding: 0px 10px;
}

.footer-copyright {
    padding: 0px 50px;
}

.footer-copy {
    font-size: 14px;
    font-weight: 200;
    margin: 7px 0px;
}

.footer-develop {
    font-size: 11px;
    padding: 20px 50px;
    font-weight: 200;
    text-align: center;
    grid-column: 1 / span 2;
}

.footer-info-grid {
    display: flex;
    flex-direction: column;
}

.footer-info {
    padding: 5px 0px;
    font-size: 16px;
    font-weight: 200;
}

.footer-info img {
    width: 170px;
    margin: 20px 0px 0px 0px;
}

.footer-modal {
    cursor: pointer;
}

.terms-container {
    font-weight: 200;    
}

.sf-modal-content.terms-full-text {
    margin: 100px 0px 300px 0px;
    height: auto;
}

.terms-text-container, .categories-container, .faqs-container, .aboutus-container {
    color: var(--ultra-light-gray-color);
    width: 80%;
    margin: 0px auto;
    text-align: left;
    font-weight: 200;
}

.terms-main-title {
    text-align: center;
    font-size: 35px;
    font-weight: 800;
}

.terms-buttons, .categories-buttons, .faqs-buttons, .aboutus-buttons {
    display: flex;
    align-content: center;
    justify-content: center;
}

#btn-close-terms, #btn-close-categories, #btn-close-faqs, #btn-close-aboutus {
    color: var(--black-color);
    margin: 30px 0px;
}


/* .category-data {

} */

.category-title, .faqs-title, .aboutus-title {
    font-size: 25px;
    font-weight: 800;
    padding: 20px 0px 10px 0px;
}

.category-text, .faqs-text, .aboutus-text {
    font-size: 18px;
    font-weight: 200;
    text-align: justify;
}


.partners-container {
    background: var(--dark-gray-color);
    display: grid;
    grid-template-columns: 50% 50%;
    margin: 0px 0px 0px 0px;
}

.partner-card {
    padding: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.partner-card img {
    max-height: 120px;
    margin: 40px 0px 40px 0px;
}

.partner-card img.smfp-footer-img {
    max-height: 70px;
}

.wpc-form-container {
    width: var(--web-form-area);
    margin: 0px auto 0px auto;
}

.form-title {
    text-align: center;
    font-size: 35px;
    padding: 10px 0px;
}

.form-row {
    margin: 3px 0px;
}

.form-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0px 40px 0px;
}

.more-images-text {
    text-align: center;
    font-size: 25px;
    padding: 10px 0px 10px 0px;
}

.form-buttons.pay-buttons {
    padding: 30px 0px 0px 0px;
}

#paypal-button-container {
    width: 220px;
}

#btn-mpago {
    width: auto;
}

.form-buttons.mpago-container {
    width: 260px;
    margin: 0px auto;
}

.link-container {
    font-weight: 200;
    margin: 10px 0px 30px 0px;
}

.link-register {
    font-weight: 600;
    cursor: pointer;
}

/* .user-container {

} */

.user-title {
    text-align: center;
    font-size: 35px;
    margin: 30px 0px;
}

.contest-container {
    margin: 30px 0px;
    
}

.contest-title {
    margin: 0px 0px;
    font-size: 25px;
    text-align: center;
}

.entries-container {
    /* display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; */
    display: flex;
    justify-content: center;
    margin: 30px auto;
}

.entry-card {
    width: 90%;
    margin: 10px auto;
    border: solid 1px var(--gray-color);
    max-width: 300px;
    padding: 20px 0px;
}

.entry-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 85%;
}

.entry-image img {
    max-width: 80%;
    max-height: 80%;
}

.entry-caption {
    text-align: justify;
    padding: 10px 15px;
    font-size: 13px;
    font-weight: 200;
}

.entry-message {
    text-align: center;
}

.contest-file-title {
    font-size: 20px;
    font-weight: 200;
}

.contest-rules {
    text-align: justify;
    font-size: 14px;
    font-weight: 200;
    width: 500px;
    margin: 0px auto;
}

.terms-label {
    font-weight: 800;
    cursor: pointer;
}

.terms-container {
    font-weight: 200;
}

.contest-files-container {
    display: grid;
    grid-template-columns: 50% 50%;
    
    padding: 30px 0px;
}

.contest-files-container.show {
    border: solid 1px var(--lighter-gray-color);
    border-radius: 5px;
}


.file-data {
    margin: 5px 0px;
}

.file-data select {
    width: 95%;
}

.file-data.span-2 {
    grid-column: 1 / span 2;
    text-align: justify;
    padding: 0px 0px 20px 20px;
    font-weight: 600;
}

.file-button {
    text-align: right;
    padding: 10px 0px 10px 0px;
    margin: 0px auto;
}

.file-button input[type="file"] {
    display: none;
}

#btn-upload_1, #btn-upload_2, #btn-upload_3, #btn-upload_4 {
    width: auto;
}

.file-content_1, .file-content_2, .file-content_3, .file-content_4 {
    padding: 0px 0px 0px 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 200;
}

.preview-container img {
    max-width: 80%;
    max-height: 220px;
}

.file-border {
    width: 95%;
    border-bottom: solid 1px var(--light-gray-color);
    margin: 0px auto 30px auto;
    grid-column: 1 / span 2;
    padding: 10px 0px;
}

.contact-float-btn {
    position: fixed;
    bottom: 200px;
    right: 20px;
    background-color: var(--ultra-light-gray-color);
    color: white;
    border: none;
    border-radius: 25px;
    width: auto;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
    padding: 15px 10px;
    color: var(--black-color);
    font-weight: 400;
    text-align: center;
}

.contact-float-btn .wa-link {
    font-size: 40px;
    font-weight: 800;
}

/* GLOBALES */
.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.justify {
    text-align: justify;
}

.normal {
    font-weight: 200;
}

.bold {
    font-weight: 400;
}

.bolder {
    font-weight: 800;
}

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


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

    .menu {
        height: 85px;
    }

    .icons-menu {
        grid-template-columns: 220px auto;
        width: var(--mobile-work-area);
    }

    .logo-smfp {
        height: 70px;
    }

    .menu-elem {
        margin: 0px 5px;
        width: 100%;
        font-size: 16px;
        text-align: center;
    }

    .main-container {
        width: var(--mobile-work-area);
        margin: 120px auto 0px auto;
    }

    .body-title {
        font-size: 30px;
        padding: 0px;
    }

    .body-subtitle {
        font-size: 18px;
        font-weight: 300;
        padding: 0px 0px 10px 0px;
    }

    .partner-card img {
        max-width: 90%;
    }

    .slide-container {
        height: 550px;
        grid-template-rows: 25% 75%;
    }

    .slide-title {
        font-size: 25px;
        padding: 0px 10px 10px 10px;
        justify-content: center;
    }

    .slide-caption {
        font-size: 12px;
        padding: 0px 10px 0px 10px;
    }

    .contest-timer-title {
        font-size: 18px;
    }

    .about-us-container {
        grid-template-columns: 100%;
    }

    .about-us-title {
        grid-column: 1 / span 1;
    }

    .about-us-image {
        margin: 0px 0px 40px 0px;
    }

    .about-us-image img {
        max-width: 80%;
    }

    .about-us-text {
        font-size: 18px;
    }

    .category-container {
        margin: 0px 0px;
        padding: 40px 0px;        
    }

    .category-container-title {
        font-size: 25px;
    }

    .category-text-caption.show {
        grid-template-columns: 100%;
    }

    .cat-caption-text{
        font-size: 18px;
        padding: 20px 30px 30px 30px;
    }

    .cat-caption-img img {
        max-width: 300px;
        max-height: 300px;
    }

    .footer-container {
        width: var(--mobile-work-area);
    }

    .footer-body {
        grid-template-columns: 1fr;
    }

    .footer-social-grid {
        justify-content: center;
    }

    .footer-info-grid {
        padding: 30px 50px 0px 50px;
    }

    .footer-info {
        padding: 0px;
    }

    .footer-develop {
        grid-column: 1 / span 1;
    }

    .wpc-form-container {
        width: var(--mobile-work-area);
    }

    .form-title {
        font-size: 25px;
    }

    .form-row {
        text-align: center;
    }

    .contest-file-title {
        font-size: 18px;
    }


    .entries-container {
        flex-direction: column;
    }

    .contest-files-container {
        /* grid-template-columns: 100%; */
        display: flex;
        flex-direction: column;
        width: 90%;
        margin: 0px auto;
    }

    .file-data.span-2 {
        /* grid-column: 1 / span 1; */
        text-align: center;
    }

    .file-button {
        text-align: center;
    }

    .contest-rules {
        width: 90%;
        padding: 0px 10px;
    }

    .entry-image {
        padding: 20px 0px 0px 0px;
    }

    .entry-caption {
        font-size: 12px;
    }

    .entry-message {
        padding: 0px 30px;
        font-size: 14px;
    }


}