/*---------- RESPONSIVE DESKTOP -----------*/
:root {
    --font: "Gaming";
    --font-var: "Round";
    --text-shadow-big: 0 0 2px #FFF, 
                    0 0 7px #4aff1869, 
                    0 0 50px #2bc700be;
    --text-shadow-little: 0 0 5px #FFF, 
                    0 0 10px #FFF, 
                    0 0 15px #FFF, 
                    0 0 20px #49ff18, 
                    0 0 30px #49FF18, 
                    0 0 40px #49FF18, 
                    0 0 55px #49FF18, 
                    0 0 75px #49ff18;
    --dark-green: #020800;
    --darker-green: #000000;
    --black: #050505;
    --green: #6FF927;
    --green-opacity: #71f9276c;
    --white-text: rgba(255, 255, 255, 0.814);
    --section-mb: 150px;
    --section-width: 1350px;
    --section-title-mb: 65px;
}

/*----------Responsive Desktop 1 (Mi pantalla) -----------*/
@media only screen
and (max-device-width: 1920px) {
    .content-container {
        width: 100%;
    }
}

/*----------Responsive Desktop 2 -----------*/
@media only screen
and (max-device-width: 1536px) {
    .content-section {
        width: 90%;
    }
    .card.large p {
        font-size: 15px;
    }
}

/*----------Responsive Desktop 3 -----------*/
@media only screen
and (max-device-width: 1440px) {
    section.el-evento {
        width: 85%;
    }
    .card.large p {
        width: 70%; 
    }
    .card .background {
        background-position-y: -150px;
    }
    section.jurado {
        width: 85%;
    }
    section.invitados {
        width: 85%;
    }
    section.galeria {
        width: 85%;
    }
    .nav-evento {
        width: 85%;
    }
    .continue-title h1 {
        padding: 0 200px;
    }
}

/*----------Responsive Desktop 4 -----------*/
@media only screen
and (max-device-width: 1366px) {
    .card.large p {
        width: 85%;
    }
    .logo h1 {
        font-size: 35px;
    }
    .number, .label {
        font-size: 30px;
    }
    .disfraz-container {
        width: 85%;
    }
    #gallery {
        display: flex;
        justify-content: center;
    }
    .votes-available {
        top: auto;
        bottom: 20px;
    }
}

/*----------Responsive Desktop 5 -----------*/
@media only screen
and (max-device-width: 1280px) {
    .photo-container {
        width: 220px;
    }
    .continue-title h1 {
        padding: 0 175px;
    }
}



/*---------- RESPONSIVE TABLET -----------*/

/*----------Responsive Tablet (iPad Air horizontal) -----------*/
@media only screen 
  and (max-device-width: 1180px) {
    .continue-title h1 {
        padding: 0 120px;
    }
    .photo-container {
        width: 200px;
    }
    .disfraz-container {
        width: 90%;
        grid-template-columns: repeat(4, 1fr);
    }
    .jurado-item.big.left {
        left: 0;
    }
    .jurado-item.big.right {
        right: 0;
    }
    .jurado-item .info {
        display: block;
        bottom: 5%;
        top: auto;
    }
    .unit {
        width: 55px;
    }
    .time {
        gap: 0;
    }
    section.votacion {
        width: 90%;
    }
}

/*----------Responsive Tablet (iPad Air vertical) -----------*/
@media only screen 
  and (max-device-width: 820px) {
    .continue-title h1 {
        padding: 0;
        font-size: 100px;
    }
    .logo h1 {
        letter-spacing: 0.5px;
        font-size: 55px;
    }
    .time {
        gap: 10px;
        justify-content: center;
    }
    .unit {
        width: auto;
    }
    .number, .label {
        font-size: 40px;
    }
    .items-left {
        justify-content: flex-start;
        gap: 50px;
    }
    .items-right {
        justify-content: flex-end;
        gap: 50px;
    }
    .nav-evento a {
        font-size: 14px;
    }
    .card .background {
        background-position-y: 0;
    }
    .section-title.jurado {
        margin-bottom: 0;
    }
    .jurados {
            display: flex;
            justify-content: space-between;
            position: relative;
            height: 500px;
            align-items: flex-end;
            gap: 0;
    }
    .jurado-item {
            position: relative;
            height: 350px;
            width: auto;
            transition: transform 0.3s ease;
    }
    .jurado-item.big.left {
        left: 0;
        bottom: 10%;
    }
    .jurado-item.big.right {
        right: 0;
        bottom: 10%;
    }
    .jurado-item.bigger {
        height: 400px;
        transform: translateX(-50%);
        bottom: 0;
        top: auto;
    }
    .jurado-item.big {
        height: 350px;
    }
    .jurados::after {
        display: none;
    }
    .jurado-item .info {
        display: block; 
        position: absolute;
        bottom: -1%; 
        top: auto;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        color: var(--green);
        font-family: "Round";
        font-size: 35px;
		width: 100%;
        background: linear-gradient(to top, #050505, rgba(0, 0, 0, 0) 100%);
    }
    section.jurado {
        margin-bottom: 150px;
    }
    .teasers-section {
        height: auto;
    }
    .photo-container {
        width: 125px;
        height: 225px;
    }
    .section-title.votacion {
        text-align: center;
    }
    .disfraz img {
        height: 340px;
    }
    section.sponsors {
        width: 90%;
    }
    .sponsors-logos.ppales {
        display: grid;
        gap: 0px;
        padding-bottom: 50px;
        margin-bottom: 50px;
        justify-items: center;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        justify-items: center; 
        align-items: center;  
        border-bottom: 1px solid rgba(245, 245, 245, 0.11);
    }
    .sponsors-logos.ppales img {
        height: auto;
        width: 60%;
        object-fit: contain;
        padding: 0;
        border-right: none;
    }
    .sponsors-logos.secundarios {
        gap: 20px;
    }
    .sponsors-logos.secundarios img {
        height: 50px;
        border-right: none;
    }
    .disfraz-container {
        width: 90%;
        grid-template-columns: repeat(3, 1fr);
    }
}

/*----------Responsive Tablet (iPad Mini vertical) -----------*/
@media only screen 
  and (max-device-width: 768px) {
    .continue-title h1 {
        padding: 0;
        font-size: 90px;
    }
    .logo h1 {
        font-size: 45px;
    }
    .number, .label {
        font-size: 30px;
    }
}



/*---------- RESPONSIVE MOBILE -----------*/

/*----------Responsive Mobile 1 (iPhone 12 Pro, iPhone 14 Pro Max, iPhone XR) -----------*/
@media only screen
and (max-device-width: 500px) {
    body {
        overflow: hidden;
        width: 100%;
    }
    section.votacion {
        width: 100%;
    }
    .section-title.votacion h1 {
        text-align: center;
        font-size: 65px;
    }
    .disfraz-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
    }
    .disfraz::after {
        border-radius: 0;
    }
    .disfraz::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 20%;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
        border-radius: 0;
        pointer-events: none;
    }
    .disfraz-img.podium-image img {
        height: 100%;
        border-radius: 0;
    }
    .vote-content {
        bottom: 10px;
    }
    .vote-buttons {
        display: none;
    }
    .vote-text {
        text-align: center;
        font-size: 15px;
    }
    .vote-text.podium-text {
        background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
                    radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
        background-clip: text;
        -webkit-background-clip: text; 
        color: transparent;
        font-weight: 900;
        font-size: 18px;
    }
    .container-nav-evento {
        display: none;
    }
    .logo-container-mobile {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .grid-background {
        position: absolute;
    }
    .time {
        font-family: "Round";
        border: 1px solid var(--green);
        border-radius: 30px;
        padding-top: 8px;
        padding-bottom: 5px;
        margin-bottom: 25px;
    }
    .logo-mobile {
        z-index: 10;
        width: 80%;
        text-align: center;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }
    .logo-mobile h1 {
        font-size: 120px;
    }
    .number, .label {
        font-size: 25px;
    }
    .logo {
        position: relative;
        display: flex;
        flex-direction: column-reverse;
        padding: 0;
        overflow: visible;
    }
    .logo h1 {
        font-size: 60px;
    }
    .logo-container {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }
    .container-logo {
        position: relative;
        height: 90vh;
    }
    #blob { 
        opacity: .9;
        height: 100px; 
    }
    section.jurado {
        width: 90%;
        margin-bottom: 100px;
    }
    section.invitados {
        width: 90%;
    }
    section.galeria {
        width: 90%;
    }
    .nav-evento {
        width: 90%;
    }
    .masonry {
        column-count: 2;
        column-gap: 2px;
    }
    .masonry-item {
        margin-bottom: 2px;
        border-radius: 0;
    }
    .masonry-item img {
        border-radius: 0;
    }
    .content-section {
        grid-template-columns: 1fr; 
        grid-template-rows: auto auto;
        width: 100%;
    }
    .card.large p {
        font-size: 15px;
        width: 90%;
    }
    .teasers-section {
        grid-template-columns: 1fr;
        grid-gap: 10px;
        height: auto;
    }
    .section-title.el-evento {
        height: auto;
    }
    .dot {
        display: none;
    }
    h1 {
        font-size: 80px;
    }
    .section-subtitle {
        margin-top: 0;
		text-align: center;
    }
    .photo-container {
        flex: 1 1 calc(50% - 10px);
    }
    .photo-gallery {
        gap: 20px 20px;
        justify-content: space-between;
    }
    .jurados {
        flex-direction: column;
        gap: 50px;
        height: auto;
        align-items: center;
    }
    .jurados::after {
        display: none;
    }
    .jurado-item {
        margin-bottom: 50px;
		height: auto;
    }
    .jurado-item.big {
        position: relative;
		height: auto;
    }
    .jurado-item.big.left {
        left: 0;
    }
    .jurado-item.bigger {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
		height: auto;
        mask: none;
    }
    .jurado-item.big.right {
        position: relative;
        right: 0;
    }
    .jurado-item img {
        mask: linear-gradient(black 80%, transparent);
		height: 500px;
    }
	.jurado-item img.blurred-low {
		mask: none;
	}
    .section-title.jurado {
        margin-bottom: 50px;
    }
    .continue-title h1 {
        font-size: 43px;
        padding: 0 25px;
    }
	.continue-title h2 {
		font-size: 22px;
		text-shadow: 0 0 2px #FFF, 0 0 7px #4aff1869, 0 0 50px #2bc700a8;
	}
    .grid-item.teasers-grid-item {
        height: 400px;
    }
    .scroll-to-top {
        right: 15px;
        bottom: 15px;
    }
    .unit {
        width: 50px;
    }
	.continue-options {
		flex-direction: row;
		gap: 50px;
	}
    .jurado-item .info {
        display: block; 
        position: absolute;
        bottom: 1%; 
        top: auto;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        color: var(--green);
        font-family: "Round";
        font-size: 40px;
		background: linear-gradient(to top, #050505, rgba(0, 0, 0, 0) 100%);
		width: 100%;
    }
    .active-filter:hover {
        background-color: var(--green);
    }
    .votes-available {
        bottom: 0px;
        right: auto;
        width: 100%; 
        left: 50%;
        transform: translateX(-50%);
        top: auto;
        flex-direction: row;
        clip-path: none;
        border-radius: 0;
        padding: 8px 0;
        justify-content: center;
        gap: 5px;
        background-color: var(--green);
    }
    .votes-available p {
        text-align: center;
        font-size: 13px;
        flex-direction: column;
        justify-content: center;
        margin: 0;
        padding-right: 8px;
        padding-bottom: 0;
        border-right: 1px solid rgba(0, 0, 0, 0.205);
    }
    .votes-available p.votes-available-title {
        width: 30%;
    }
    .votes-available p.votes-available-text {
        border-bottom: none;
        flex: 1;
    }
    .votes-available p span {
        font-size: 15px;
        margin-top: 7px;
    }
    .tutorial-content h2 {
        font-size: 45px;
    }
    .tutorial-content p span {
        font-size: 30px;
    }
    #alert-box {
        width: 80%;
    }
	#blob hide {
		display: none;
	}
    .section-title.el-evento h1 {
        text-align: center;
    }
    .top-votes-container {
        gap: 0;
    }
    .tutorial-content {
        width: 90%;
    }
    .disfraz-container {
        width: 100%;
    }
    .disfraz img {
        height: 100%;
        border-radius: 0;
    }
    .section-title.votacion {
        width: 100%;
    }
    section.sponsors {
        width: 90%;
    }
    .sponsors-logos.ppales {
        display: grid;
        gap: 0px;
        padding-bottom: 50px;
        margin-bottom: 50px;
        justify-items: center;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        justify-items: center; 
        align-items: center;  
        border-bottom: 1px solid rgba(245, 245, 245, 0.11);
    }
    .sponsors-logos.ppales img {
        height: auto;
        width: 70%;
        object-fit: contain;
        padding: 0;
        border-right: none;
    }
    .sponsors-logos.secundarios {
        gap: 20px;
    }
    .sponsors-logos.secundarios img {
        height: 35px;
        border-right: none;
    }
    #vote-button {
        font-size: 17px;
    }
    .tutorial-content p {
        font-size: 14px;
    }
    .live-text {
        font-size: 10px;
    }
}

/*----------Responsive Mobile 2 (iPhone SE) -----------*/
@media only screen
and (max-device-width: 375px) {
    .continue-title h1 {
        font-size: 43px;
        padding: 0 20px;
    }
}

/*----------Responsive Mobile 3 (Samsung Galaxy S8+) -----------*/
@media only screen
and (max-device-width: 360px) {
    .continue-title h1 {
        padding: 0 10px;
    }
}


/*HERO*/
@media (min-width: 1537px) {
    .small-screen {
        display: none;
    }
}

@media (max-width: 1536px) {
    .big-screen {
        display: none;
    }
}

/*---------- MOBILESHOW / HIDE -----------*/
@media only screen  
  and (max-device-width: 500px) {
	.mobileHide {
		display: none;
	}
}

@media only screen  
  and (min-device-width: 500px) {
	.mobileShow {
		display: none;
	}
}