.pageNumberContainer {
    /*filter: brightness(70%);*/
    color: white;
    font-family: 'vcr';
    position: relative;
    font-size: 2vh;
    border: 0.4vh solid #ffffff38;
    outline: 0.25vh solid #afafaf;
    line-height: 2vh;
    border-radius: 1vh;
    padding: 0.5vh;
    /* background: black; */
    text-shadow: 0.2vh 0.2vh black;
    width: 30vh;
    display: flex;
    /*bottom: 30vh;*/
    align-items: center;
    justify-content: center;
}
.moreDetails {
    cursor: pointer;
    text-decoration: underline;
    font-family: google;
    font-size: 0.9vh;
    color: blue;
}

.moreDetails:hover {
    cursor: pointer;
    text-decoration: underline;
    font-family: google;
    font-size: 0.9vh;
    color: yellow;
}

.desplegable{
    min-width: 50%;
    display: flex;
    position: absolute;
    flex-direction: column;
    top: 0;
    font-family: 'vcr';
    font-size: 2vh;
    color: white;
}

.desplegableBack{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2vh;
    background: black;
    padding: 15.8vh 4.8vh 2.5vh 5vh;
    box-shadow: 0.1vh 0.1vh #b5b5b5, -0.1vh 0.1vh #b5b5b5;
    border-radius: 1VH 1vh 1vh 0vh;
}

.desplegableLine{
    display: flex;
}

.desplegableLine p{
    margin: 0;
}

.desplegableButtonUp{
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1vh;
    left: 5vh;
    background: black;
    padding: 1vh 1vh 1vh 1vh;
    border-radius: 0vh 0vh 1vh 1vh;
    box-shadow: 0.1vh 0.1vh #b5b5b5, -0.1vh 0.1vh #b5b5b5;
    width: fit-content;
}

.desplegableButtonDown{
    cursor: pointer;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1vh;
    left: 5vh;
    background: black;
    padding: 1vh 1vh 1vh 1vh;
    border-radius: 0vh 0vh 1vh 1vh;
    box-shadow: 0.1vh 0.1vh #b5b5b5, -0.1vh 0.1vh #b5b5b5;
    width: fit-content;
}

#desplegableButtonUp .bi{
    width: 2vh;
    height: 2vh;
}

#desplegableButtonDown .bi{
    width: 2vh;
    height: 2vh;
}

.img1{
    width: 3vh;
    height: 100%;
    margin: -0.5vh 1.2vh 0vh 1.2vh;
}

.img2{
    width: 4vh;
    height: 100%;
    margin: -1vh 1.2vh 0vh 1.2vh;
}

.img3{
    width: 5vh;
    height: 100%;
    margin: -1vh 1.2vh 0vh 1.2vh;
}

.text1{
    color: yellow;
}

.text2{
    color: #00FF00;
}

@keyframes goUp {
    0% {
        top: 0;
    }
	100% {
		top: -19.7vh;
	}
}

@keyframes goDown {
    0% {
        top: -19.7vh;
    }
	100% {
		top: 0;
	}
}

.proofText{
    position: absolute;
    font-family: 'vcr';
    font-size: 2.5vh;
    color: white;
    bottom: 22vh;
    background: black;
    animation: blinkSelect 0.75s infinite;
    padding: 0vh 0vh 0vh 0.5vh;
}

/*<div class="proofText">Press ENTER or CLICK AGAIN to view more details!</div>*/

.parentLoader{
    background-color: black;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    text-align: justify;
    opacity: 100%;
    top: 0;
}

.loaderContainer {
	width: 10vh;
	height: 10vh;
	border-radius: 100%;
    background-image: url(../media/images/Logo_v2.png);
    background-size: cover;
	/*background: linear-gradient(165deg, rgba(255,255,255,1) 0%, rgb(220, 220, 220) 40%, rgb(170, 170, 170) 98%, rgb(10, 10, 10) 100%);
	*/position: relative;
}
.loader {
	
}

.loader:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	border-radius: 100%;
	border-bottom: 0 solid #ffffff05;
	
	box-shadow: 
		0 -0.5vh 1vh 1vh #ffffff40 inset,
		0 -0.25vh 0.75vh 0.5vh #ffffff50 inset,
		0 -0.1vh 0.25vh #ffffff80 inset,
		0 -0.15vh 0.1vh #ffffffBB inset,
		0 0.1vh 0vh #ffffff,
		0 0.1vh 0.15vh #ffffff,
		0 0.25vh 0.25vh #ffffff90,
		0 0.5vh 0.75vh #ffffff60,
		0 0.5vh 1vh 1vh #ffffff40;
	filter: blur(0.15vh);
	animation: 2s rotate linear infinite;
}

@keyframes rotate {
	100% {
		transform: rotate(360deg)
	}
}

@keyframes disapear {
    0% {
        opacity: 100%;
    }
    60% {
        opacity: 100%;
    }
	100% {
		opacity: 0%;
	}
}

@keyframes disapear2 {
    0% {
        opacity: 100%;
    }
    75% {
        opacity: 100%;
    }
	100% {
		opacity: 0%;
	}
}

/*****************************************************************/

.remove-Interaction {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0%;
}

.button-R img {
    width: 5vh;
}

.button-R {
    background: transparent;
    cursor: pointer;
    border: none;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.activeR img {
    content: url(../media/images/arrowKey02.png);
}

.button-L img {
    width: 5vh;
}

.button-L {
    background: transparent;
    cursor: pointer;
    border: none;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.activeL img {
    content: url(../media/images/arrowKey04.png);
}

.contenedorFlechasMobile {
    display: none;
}

.contenedorFlechasMobile-mobile {
    display: flex;
    flex-direction: row;
    /*gap: 2vh;*/
    width: 100%;
    justify-content: space-between;
}

#contact-view .bandTitle {
    top: 12vh;
    position: absolute;
}

#contact-view .bandTitle-mobile {
    top: 15vh;
    position: absolute;
}

.descriptionContainer {
    justify-content: center;
    align-items: start;
    flex-direction: column;
    display: flex;
}

.descriptionContainer-mobile {
    width: 100%;
    align-items: start;
    flex-direction: column;
    display: flex;
}

.descriptionContainer-mobileRight {
    width: 100%;
    align-items: end;
    flex-direction: column;
    display: flex;
}

#contact-view .textContainer {
    display: flex;
    flex-direction: column;
    gap: 3vh;
    line-height: 2vh;
    font-size: calc(3px + 0.390625vw);
}

.btnProof .bi {
    position: relative;
    width: 2vh;
    height: 2vh;
}

.btnProof-mobile .bi {
    position: relative;
    width: 4vh;
    height: 4vh;
}

.text-proof {
    margin: 0;
    text-decoration: underline;
    color: rgb(205, 205, 205);
}

.btnProof {
    padding: 0;
    width: 4vh;
    height: 4vh;
    background-color: rgb(0, 0, 0);
    color: white;
    border: 0.1vh solid white;
    border-radius: 0.5vh;
    transition: all .4s;
}

.btnProof-mobile {
    padding: 0;
    width: 6vh;
    height: 6vh;
    background-color: rgb(0, 0, 0);
    color: white;
    border: 0.1vh solid white;
    border-radius: 0.5vh;
    transition: all .4s;
}

.contactContainer {
    cursor: pointer;
    display: flex;
    align-items: center;
    /*margin: 1.5vh 0vh 1.5vh 0vh;*/
    font-family: google;
    font-size: 1.2vh;
    color: white;
    gap: 2vh;
}

.contactContainer:hover .text-proof{
    color: yellow;
}

.contactContainer:hover .btnProof{
    transform: translateY(-0.75vh);
    box-shadow: 0 0.75vh 0.1vh -0.25vh #f85959,
        0 1.5vh 0.1vh -0.5vh #39a2db,
        0 1.75vh 2vh -0.75vh #39a2db;
}

.contactContainer-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*margin: 2vh 0vh 2vh 0vh;*/
    font-family: google;
    font-size: 1.2vh;
    text-align: center;
    color: white;
    gap: 2vh;
}

.contactContainer-mobile:hover .text-proof {
    color: yellow;
}

.contactContainer-mobile:hover .btnProof-mobile {
    transform: translateY(-0.75vh);
    box-shadow: 0 0.75vh 0.1vh -0.25vh #f85959,
        0 1.5vh 0.1vh -0.5vh #39a2db,
        0 1.75vh 2vh -0.75vh #39a2db;
}


/*
.btnProof:hover {
    transform: translateY(-0.75vh);
    box-shadow: 0 0.75vh 0.1vh -0.25vh #f85959,
        0 1.5vh 0.1vh -0.5vh #39a2db,
        0 1.75vh 2vh -0.75vh #39a2db;
}*/
/*
.btnProof:active {
    transition: all 0.2s;
    transform: translateY(-0.25vh);
    box-shadow: 0 0.75vh 0.1vh -0.25vh #f85959,
        0 1.5vh 0.1vh -0.5vh #39a2db,
        0 1.75vh 2vh -0.75vh #39a2db;
}*/

.generalHeader {
    position: fixed;
    top: 0;
    width: 100%;
    height: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.headerParent {
    background-color: black;
    width: 100%;
    padding: 0.2vh 0 0.7vh 0;
    box-shadow: 0px 0.1vh #b5b5b5;
    min-height: 7vh;
    max-height: 7vh;
}

.headerParent-mobile {
    background-color: black;
    width: 100%;
    padding: 0 0 0.7vh 0;
    box-shadow: 0px 0.1vh #b5b5b5;
    min-height: 9.3vh;
    max-height: 9.3vh;
}

.header-content {
    max-width: 55%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.headerField {
    text-align: center;
    position: relative;
    display: block;
}

.headerField-mobile {
    text-align: center;
    position: relative;
    display: none;
}

.redText {
    color: red;
    font-size: 2.3vh;/*2*/
    margin: 0;
}

.redText-mobile {
    color: red;
    font-size: 3vh;
    margin: 0;
}

.white-text {
    color: white;
    font-size: 2vh;/*1.7*/
    line-height: 2.6vh;/*2.3*/
    margin: 0;
}

.white-text-mobile {
    color: white;
    font-size: 2.5vh;
    line-height: 3.1vh;
    margin: 0;
}

.headerImage {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
}

.imgHeaderImage {
    position: absolute;
    left: 0;
    top: -50%;
    width: 100%;
    height: auto;
}

.imgHeaderImage-mobile {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
}

.headerImageMask {
    position: relative;
    left: 0;
    top: -50%;
    background-image: radial-gradient(transparent 0%, black 50%);
    width: 100%;
    height: 100%;
}

.headerImageMask-mobile {
    position: relative;
    left: 0;
    top: 1vh;
    background-image: radial-gradient(transparent 0%, black 72%);
    aspect-ratio: calc(16/9);
    width: 100%;
    height: auto;
}

.restImageMask {
    position: absolute;
    top: 50%;
    background-color: black;
    width: 100%;
    height: 100%;
}

.restImageMask-mobile {
    position: absolute;
    background-color: black;
    width: 100%;
    height: 100%;
}

.topRectangle {
    display: flex;
    position: relative;
    top: -0.15vh;
    background: black;
    border-radius: 0px 0px 4vh 4vh;
    box-shadow: 0.2vh 0.2vh #b5b5b5, -0.2vh 0.2vh #b5b5b5;
    text-align: center;
    padding: 1.5vh 4vh 1.5vh 4vh;
    width: fit-content;
}

.topRectangle-mobile {
    display: flex;
    position: relative;
    top: -0.15vh;
    background: black;
    border-radius: 0px 0px 3vh 3vh;
    box-shadow: 0.2vh 0.2vh #b5b5b5, -0.2vh 0.2vh #b5b5b5;
    text-align: center;
    padding: 1.5vh 4vh 1.5vh 4vh;
    width: fit-content;
}

.selectText {
    width: fit-content;
    margin: 0 auto;
    color: rgb(255, 255, 255);
    font-size: 3vh;
    line-height: 3vh;
    font-family: google;
    opacity: 100%;
    animation: blinkSelect 0.75s infinite;
}

.selectText-mobile {
    width: fit-content;
    margin: 0 auto;
    color: rgb(255, 255, 255);
    font-size: 1.8vh;
    line-height: 1.8vh;
    font-family: google;
    opacity: 100%;
    animation: blinkSelect 0.75s infinite;
}

@keyframes blinkSelect {
    0% {
        opacity: 100%;
    }

    30% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }
}

body.projectsView {
    background: black;
    margin: 0;
    padding: 0;
    font-family: 'vcr', sans-serif;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

body.projectsView-mobile {
    background: black;
    margin: 0;
    padding: 0;
    font-family: 'vcr', sans-serif;
    height: 100vh;
    overflow: hidden;
    display: flex;
    /*justify-content: center;*/
    align-items: center;
    position: relative;
    flex-direction: column;
    /*gap: 6vh;*/
}

body.indexView {
    height: 100vh;
    height: 100dvh;
    display: flex;
    overflow: visible;
}

/* Estilo para el contenedor principal */
.projectsContainer {
    display: flex;
    align-items: center;
    position: relative;
    flex-direction: row;
}

/* Estilo para la cuadrícula */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    position: relative;
}

/* Estilo para el margen rojo en todos los botones de imagen */
.gridItem {
    filter: brightness(70%);
    border: 0.4vh solid #ffffff66;
    outline: 0.25vh solid white;
    border-radius: 1vh;
    width: 9.5vh;
    height: 9.5vh;
    margin: 0.4vh;
    text-align: center;
    cursor: pointer;
}

.gridItem-mobile {
    filter: brightness(70%);
    border: 0.4vh solid #ffffff66;
    outline: 0.25vh solid white;
    border-radius: 1vh;
    width: 8vh;
    height: 8vh;
    margin: 1vh;
    text-align: center;
    cursor: pointer;
}

.gridItem.seleccionado {
    filter: brightness(100%);
    border: 0.4vh solid white;
    animation: blinkBorder 0.2s infinite;
}

.gridItem-mobile.seleccionado {
    filter: brightness(100%);
    border: 0.4vh solid white;
    animation: blinkBorder 0.2s infinite;
}

.gridItem:hover {
    filter: brightness(100%);
}

.gridItem-mobile:hover {
    filter: brightness(100%);
}

/* Estilo para el contenedor del video */

.videoContainer {
    display: grid;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
}

.videoContainer-mobile {
    display: grid;
    background-color: black;
    width: 90%;
    height: auto;
    border-radius: 0.4vh;
    border: 0.4vh solid #ffffff66;
    outline: 0.25vh solid white;
    /*border: 0.4vh solid rgb(161, 0, 0);
    box-shadow: rgba(161, 0, 0, 0.4) -0vh 0.4vh, rgba(161, 0, 0, 0.3) -0vh 0.8vh, rgba(161, 0, 0, 0.2) -0vh 1.2vh, rgba(161, 0, 0, 0.1) -0vh 1.6vh, rgba(161, 0, 0, 0.05) -0vh 2vh;
    */
}

.videoMask {
    background-image: radial-gradient(circle, transparent 20%, black 80%);
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    display: block;
    /*top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
}

.videoMask-mobile {
    display: none;
}

.gradientOverlay {
    background-image: radial-gradient(circle, transparent 60%, black 80%);
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    display: block;
    /*top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
}

.gradientOverlay-mobile {
    display: none;
}

/* Estilo para el video de YouTube embebido */
.videoFrame {
    grid-area: 1/1;
    border-radius: 0.1vh;
    width: 100%;
    height: 100%;
    aspect-ratio: calc(16/9);
}

.static {
    display: unset;
    grid-area: 1/1;
    border-radius: 0.1vh;
    width: 100%;
    height: 100%;
    aspect-ratio: calc(16/9);
}


/*
@keyframes slideInR {
    0% {
        left: 200%;
    }

    100% {
        left: 50%;
    }
}

@keyframes slideOutR {
    0% {
        left: 200%;
    }

    100% {
        left: 200%;
    }
}
*/

/*
@keyframes slideInL {
    0% {
        left: -100%;
    }

    100% {
        left: 50%;
    }
}

@keyframes slideOutL {
    0% {
        left: -100%;
    }

    100% {
        left: -100%;
    }
}
*/

/* Estilo para el fondo azul */
.bottomRectangle {
    display: inline-flex;
    position: relative;
    bottom: -0.2vh;
    width: 55%;
    background: black;
    opacity: 100%;
    justify-content: center;
    text-align: center;
    align-items: center;
    box-shadow: 0.2vh -0.2vh #b5b5b5, -0.2vh -0.2vh #b5b5b5;
    border-radius: 6vh 6vh 0 0;
}

.bottomRectangle-mobile {
    display: none;
}

/* Estilo para el texto en la esquina inferior izquierda */
.bottomText {
    color: #DDDF5E;
    text-shadow: 0.4vh 0.4vh red, 0.8vh 0.8vh blue;
    font-size: 4.5vh;
    line-height: 5.5vh;
    font-family: 'google', sans-serif;
    margin: 2.5vh 1vh 2.5vh 1vh;
}

.bottomText-mobile {
    color: #DDDF5E;
    text-shadow: 0.2vh 0.2vh red, 0.4vh 0.4vh blue;
    font-size: 2vh;
    line-height: 2vh;
    font-family: 'google', sans-serif;
    margin: 1.2vh 1vh 1vh 1vh;
    margin: 0;
}

/*_________________________________________________________________________________________________________________________*/
/*Variables*/
:root {
    --font-size-base: "2vh";
}

/*font families*/
@font-face {
    font-family: bootstrap-icons;
    src: url(../fonts/bootstrap-icons.woff);
}

@font-face {
    font-family: gamer;
    src: url(../fonts/Gamer.ttf);
}

@font-face {
    font-family: ka1;
    src: url(../fonts/ka1.ttf);
}

@font-face {
    font-family: vcr;
    src: url(../fonts/VCR_OSD_MONO.ttf);
}

@font-face {
    font-family: alphbeta;
    src: url(../fonts/alphbeta.ttf);
}

@font-face {
    font-family: google;
    src: url(../fonts/PressStart2P-Regular.ttf);
}

html {
    min-height: 100%;
    position: relative;
}

body {
    background-color: black;
    text-align: center;
    overflow-y: hidden;
    overflow-x: hidden;
    font-family: vcr;
}

.lowContent h3 {
    font-size: 2.2vh;
    color: #777;
    text-transform: uppercase;
    margin: 0;
}

.lowContent-mobile h3 {
    font-size: 1.5vh;
    line-height: 1.5vh;
    color: #777;
    text-transform: uppercase;
    margin: 0;
}

.lowContent {
    box-shadow: 0px -0.1vh #b5b5b5;
    width: 100%;
    background: black;
    padding: 0.7vh;
}

.lowContent-mobile {
    box-shadow: 0px -0.1vh #b5b5b5;
    width: 100%;
    background: black;
    padding: 0.7vh;
    min-height: 2.9vh;
    max-height: 2.9vh;
}

#esp,
#eng,
#menu {
    cursor: pointer;
    padding: 0 0.2vh 0 0.2vh;
}

#esp:hover,
#esp.active,
#eng:hover,
#eng.active {
    background-color: white !important;
    color: black;
}

#dropdownMobile.dropdown-menu.show{
    background-color: rgb(0, 0, 0);
    box-shadow: -0.1vh 0vh lightgray;
    border: none;
    border-radius: 0;
    font-size: 2.5vh;
    --bs-dropdown-min-width: 15vh;
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 2vh;

    height: 200vh;/*90.8vh;*/
    /*height: 90.8dvh;*/
    width: 50vw;
    position: fixed !important;
    margin: 0 auto !important;
    right: -50vw !important;
    top: 9.3vh !important;
    display: flex;
    flex-direction: column;
    transform: none !important;
    align-items: end;
}

#dropdownMobile .ddelement{
    padding-right: 10vW;
    width: 100%;
    text-align: end;
}

#dropdownMobile .dropdown-item {
    color: white;
    --bs-dropdown-link-active-bg: #868686;
    padding: 0.2vh 1vh;
}

#dropdownMobile .dropdown-item:hover {
    color: black;
    background-color: white;
    padding: 0.2vh 1vh;
}

#dropdownPC.dropdown-menu.show{
    background-color: rgb(22, 22, 22);
    /*background-image: linear-gradient(black 70%, rgb(22, 22, 22) 20%);*/
    box-shadow: 0vh 0.1vh lightgray, 0vh -0.1vh lightgray;
    border: none;
    border-radius: 0;
    font-size: 1.7vh;/*1.4*/
    --bs-dropdown-min-width: 15vh;
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 2vh;

    width: 98vw;
    position: fixed !important;
    margin: 0 auto !important;
    left: 1vw !important;
    top: 7vh !important;/*6.3*/
    display: flex;
    transform: none !important;
    align-items: center;
    justify-content: center;
}

#dropdownPC .ddelement{

}

#dropdownPC .dropdown-item {
    color: white;
    --bs-dropdown-link-active-bg: #868686;
    padding: 0.2vh 1vh;
}

#dropdownPC .dropdown-item:hover {
    color: black;
    background-color: white;
    padding: 0.2vh 1vh;
}

.btn {
    color: white;
    background-color: black;
    border-radius: 0;
    border: 0;
    /*line-height: 1.7vh;*/
    padding: 0 0.3vh;
    margin: 0 auto;
    width: fit-content;
    display: block;
}

.menuButton{
    font-size: 1.7vh;
    line-height: 2.2vh;
}

.menuButton-mobile{
    font-size: 2.5vh;
    line-height: 3vh;
}

.btn:hover {
    color: black;
    background-color: white;
    border-radius: 0;
    border: 0;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    color: black;
    background-color: white;
    border-radius: 0;
    border: 0;
}

.dropdown-toggle::after {
    content: none;
}

/**
Vista del index
*/

.info-header {
    margin: 10px auto;
}

.info-header div p:nth-of-type(1) {
    font-family: vcr;
    font-size: 25px;
    color: red;
    line-height: 30px;
}

.info-header div p:nth-of-type(2) {
    font-family: vcr;
    font-size: 22px;
    color: white;
    line-height: 30px;
}

#indexView .main-content {
    height: 100%;
    display: flex;
    position: absolute;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.topContent {
    width: 100%;
    color: #5ed900;
}

.topContent-mobile {
    width: 100%;
    color: #5ed900;
    margin-top: 10vh;
}

.topContent .title img {
    width: 35vh;
    margin-bottom: 3vh;
}

.topContent-mobile .title img {
    width: 30vh;
    margin-bottom: 3vh;
}

.topContent>h2 {
    margin-bottom: 0;
    color: white;
    font-size: 2.5vh;
}

.topContent-mobile>h2 {
    margin-bottom: 0;
    color: white;
    font-size: 2.2vh;
}

.topContent>h2 span {
    color: red;
    text-transform: uppercase;
}

.topContent-mobile>h2 span {
    color: red;
    text-transform: uppercase;
}


#indexView main #coin {
    margin-top: 10vh;
}

#indexView .mid-content>a {
    display: flex;
    margin: 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    gap: 3vh;
    width: fit-content;
    position: relative;
    animation-name: bounce;
    animation-duration: 1.5s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2vh);
    }

    100% {
        transform: translateY(0);
    }
}

#indexView .mid-content>a:hover {
    cursor: pointer;
}

#indexView .mid-content>a>h2 {
    font-size: 4.5vh;
    color: #DDDF5E;
    text-transform: uppercase;
    text-shadow: 0.2vh 0.2vh red, 0.4vh 0.4vh blue;
    margin: 0;
}

#indexView .mid-content>a>img {
    width: 5vh;
}

#indexView #menuIndex {
    margin-top: 7vh;
}

#indexView #menuIndex div {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 1vh;
    font-size: 2.5vh;
    height: 7vh;
}

#indexView #menuIndex div a {
    color: white;
    text-decoration: none;
    width: 50vh;
    position: relative;
}

/*#indexView #menuIndex div a:hover,*/
#indexView #menuIndex div a.focus {
    cursor: pointer;
    animation-name: blinkText1;
    animation-duration: 0.2s;
    animation-iteration-count: infinite;
}

#indexView #menuIndex div a .spanLeft {
    display: none;
    position: absolute;
    left: 25%;
}

#indexView #menuIndex div a .spanRight {
    display: none;
    position: absolute;
    right: 25%;
}

#indexView #menuIndex div a.focus span {
    display: initial;
}

footer {
    color: #777;
    text-align: center;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

/**
Vista de los proyectos
*/

.contenedorPC {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 1vh;
}

.contenedorMobile {
    display: none;
}

#projectsView {
    height: 100vh;
    height: 100dvh;
    margin: 0;
    overflow: visible;
}

#projectsView footer {
    position: fixed;
    width: 100%;
    bottom: 0;
}

#projectsView .flechas {
    width: fit-content;
    height: fit-content;
    cursor: pointer;
    position: relative;
}

#projectsView .flechaDcha {
    /*margin-left: 1.5vh;*/
    right: 0;
    margin-right: 1.5vh;
    position: absolute;
}

#projectsView .flechaDcha img {
    width: 1.5vh;
}

#projectsView .flechaDcha-mobile {
    margin-left: 2vh;
}

#projectsView .flechaDcha-mobile img {
    width: 3vh;
}

.flechaDchaActive img {
    content: url(../media/images/newArrow6.png);
}

#projectsView .flechaIzda {
    /*margin-right: 1.5vh;*/
    left: 0;
    margin-left: 1.5vh;
    position: absolute;
}

#projectsView .flechaIzda img {
    width: 1.5vh;
}

#projectsView .flechaIzda-mobile {
    margin-right: 2vh;
}

#projectsView .flechaIzda-mobile img {
    width: 3vh;
}

.flechaIzdaActive img {
    content: url(../media/images/newArrow8.png);
}

/**
Vista de aboutme
*/

#aboutme-view {
    color: white;
    overflow-y: visible;
    overflow-x: visible;
    font-size: var(--font-size-base);
    margin: 0;
    margin-bottom: 10vh;
}

#aboutme-view footer {
    position: fixed;/*absolute;*/
    width: 100%;
    bottom: 0;
}

#aboutme-view .bandTitle {
    margin-bottom: 0;
    position: relative;
}

#project-view .bandTitle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vh;
    width: 100%;
}


#aboutme-view .title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

#aboutme-view main {
    display: flex;
    justify-content: center;
    align-items: center;
}

#aboutme-view .sliderYTextos {
    width: 60%;
    margin: 12vh 1vh 1vh 1vh;
    display: flex;
    flex-direction: column;
    row-gap: 5vh;
}

#aboutme-view .sliderYTextos-mobile {
    width: 85%;
    margin: 15vh 0vh 0vh 0vh;
    display: flex;
    flex-direction: column;
    row-gap: 5vh;
}

.imageContainer {
    width: 19.5vh;
    height: 19.5vh;
    border: 0.5vh solid black;
    outline: 0.2vh solid white;
    border-radius: 0.5vh;
    float: left;
    margin: 0 4vh 2vh 0;
}

.imageContainer-mobile {
    width: 19.5vh;
    height: fit-content;
    border: 0.5vh solid black;
    outline: 0.2vh solid white;
    border-radius: 0.5vh;
    margin: 0 0vh 3vh 0;
}

#projectsView .imageContainer-mobile {
    width: 10vh;
    height: 10vh;
    border: 0.2vh solid #939393;
    box-shadow: -0.3vh 0.3vh #b9b9b9;
    outline: none;
    border-radius: 0.5vh;
    margin: 0 2vh 1vh 0;
    float: left;
}

#projectsView .imageContainer-mobileRight {
    width: 10vh;
    height: 10vh;
    border: 0.2vh solid #939393;
    box-shadow: 0.3vh 0.3vh #b9b9b9;
    outline: none;
    border-radius: 0.5vh;
    margin: 0vh 0vh 1vh 2vh;
    float: right;
}

.textContainer {
    line-height: 2vh;
    font-size: calc(3px + 0.390625vw);
}

.textContainer-mobile {
    line-height: 2vh;
    font-size: calc(3px + 0.390625vw);
}

/**
Vista contact
*/
#contact-view {
    height: 100vh;
    height: 100dvh;
    color: white;
    overflow-y: visible;
    overflow-x: visible;
    font-size: var(--font-size-base);
    margin: 0;
    /*margin-bottom: 10vh;*/
}

#contact-view footer {
    position: fixed;/*absolute;*/
    width: 100%;
    bottom: 0;
}

#contact-view .title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

#contact-view main {
    height: 100%;
    display: flex;
    position: absolute;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#contact-view .sliderYTextos {
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 5vh;
    align-items: center;
    justify-content: center;
}

#contact-view .sliderYTextos-mobile {
    width: 85%;
    margin: 13vh 0vh 0vh 0vh;
    display: flex;
    flex-direction: column;
    row-gap: 8vh;
    align-items: center;
    justify-content: center;
}

#contact-view .whiteText {
    font-family: google;
    text-align: justify;
    /*font-size: 1vh;*/
    color: rgb(175, 175, 175);
}

/**
Vista de un proyecto
*/
#project-view {
    color: white;
    overflow-y: visible;
    overflow-x: visible;
    font-size: var(--font-size-base);
    margin-bottom: 10vh;
}

#project-view .title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

#project-view main {
    display: flex;
    justify-content: center;
    align-items: center;
}

#project-view .sliderYTextos {
    width: 60%;
    margin: 12vh 1vh 1vh 1vh;
    display: flex;
    flex-direction: column;
    row-gap: 5vh;
}

#project-view .sliderYTextos-mobile {
    width: 85%;
    margin: 15vh 1vh 1vh 1vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 5vh;
}

#projectsView .sliderYTextos {
    /*width: 60%;
    margin: 12vh 1vh 1vh 1vh;*/
    display: none;
   /* flex-direction: column;
    row-gap: 5vh;*/
}

#projectsView .sliderYTextos-mobile {
    width: 85%;
    margin: 18vh 1vh 1vh 1vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 5vh;
    padding-bottom: 9vh;
}


.titleProject {
    width: 100%;
    font-size: 7vh;
    line-height: 7vh;
    text-align: center;
    text-transform: uppercase;
    color: white;
    text-shadow: -0.3vh 0.3vh rgb(224, 224, 224);
    font-weight: bold;
    background-color: transparent;
    animation: blinkText1 0.2s infinite;
    margin: 0;
}

.titleProject-mobile {
    width: 100%;
    font-size: 4vh;
    line-height: 4vh;
    text-align: center;
    text-transform: uppercase;
    color: white;
    text-shadow: -0.2vh 0.2vh rgb(224, 224, 224);
    font-weight: bold;
    background-color: transparent;
    animation: blinkText1 0.2s infinite;
    margin: 0;
}

@keyframes blinkText1 {
    0% {
        color: yellow;
    }

    33% {
        color: deeppink;
    }

    66% {
        color: deepskyblue;
    }

    100% {
        color: yellow;
    }
}

@keyframes blinkBorder {
    0% {
        border-color: yellow;
    }

    33% {
        border-color: deeppink;
    }

    66% {
        border-color: deepskyblue;
    }

    100% {
        border-color: yellow;
    }
}

/*
@keyframes blinkText2 {
    0% {
        color: yellow;
    }

    33% {
        color: deeppink;
    }

    66% {
        color: deepskyblue;
    }

    100% {
        color: red;
    }
}

@keyframes rainbow-colors {
    0% {
        color: yellow;
    }

    25% {
        color: deeppink;
    }

    50% {
        color: deepskyblue;
    }

    75% {
        color: red;
    }

    100% {
        color: yellow;
    }
}
*/
.carouselContainer {
    width: 60%;
    margin: 0 auto;
    margin-bottom: 7vh;
}

.carouselContainer-mobile {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 3vh;
}

#project-view .aParticipant {
    text-decoration: underline;
    font-family: google;
    color: red;
    text-align: justify;
}

#project-view .aParticipant:hover {
    text-decoration: underline;
    font-family: google;
    text-align: justify;
    color: yellow;
}

#aboutme-view .aParticipant {
    text-decoration: underline;
    font-family: google;
    color: #00FF00;
    text-align: justify;
}

#aboutme-view .aParticipant:hover {
    text-decoration: underline;
    font-family: google;
    text-align: justify;
    color: yellow;
}

/*
#project-view .aParticipant:visited {
    text-decoration: underline;
    font-family: google;
    text-align: justify;
    color: red;
}*/


/*
FOLDER RECTANGLES FOR TEXT
*/
.folderTop {
    background-color: red;
    border: 0.4vh solid rgb(161, 0, 0);
    /* border-bottom: 0; */
    border-radius: 0.4vh 0.4vh 0 0;
    height: 4vh;
    position: relative;
    top: -0.7vh;
    /* left: 0; */
    display: flex;
    align-items: center;
    box-shadow: rgba(161, 0, 0, 0.4) -0.4vh 0.4vh, rgba(161, 0, 0, 0.3) -0.8vh 0.8vh, rgba(161, 0, 0, 0.2) -1.2vh 1.2vh, rgba(161, 0, 0, 0.1) -1.6vh 1.6vh, rgba(161, 0, 0, 0.05) -2vh 2vh;
}

.folderTopRight {
    background-color: red;
    border: 0.4vh solid rgb(161, 0, 0);
    /* border-bottom: 0; */
    border-radius: 0.4vh 0.4vh 0 0;
    height: 4vh;
    position: relative;
    top: -0.7vh;
    /* left: 0; */
    display: flex;
    align-items: center;
    box-shadow: rgba(161, 0, 0, 0.4) 0.4vh 0.4vh, rgba(161, 0, 0, 0.3) 0.8vh 0.8vh, rgba(161, 0, 0, 0.2) 1.2vh 1.2vh, rgba(161, 0, 0, 0.1) 1.6vh 1.6vh, rgba(161, 0, 0, 0.05) 2vh 2vh;
}

.folderMain {
    height: auto;
    width: 100%;
    background-color: black;
    border: 0.4vh solid rgb(161, 0, 0);
    border-radius: 0vh 0vh 0.4vh 0.4vh;
    box-sizing: border-box;
    position: relative;
    box-shadow: rgba(161, 0, 0, 0.4) -0.4vh 0.4vh, rgba(161, 0, 0, 0.3) -0.8vh 0.8vh, rgba(161, 0, 0, 0.2) -1.2vh 1.2vh, rgba(161, 0, 0, 0.1) -1.6vh 1.6vh, rgba(161, 0, 0, 0.05) -2vh 2vh;
}

.folderMainRight {
    height: auto;
    width: 100%;
    background-color: black;
    border: 0.4vh solid rgb(161, 0, 0);
    border-radius: 0vh 0vh 0.4vh 0.4vh;
    box-sizing: border-box;
    position: relative;
    box-shadow: rgba(161, 0, 0, 0.4) 0.4vh 0.4vh, rgba(161, 0, 0, 0.3) 0.8vh 0.8vh, rgba(161, 0, 0, 0.2) 1.2vh 1.2vh, rgba(161, 0, 0, 0.1) 1.6vh 1.6vh, rgba(161, 0, 0, 0.05) 2vh 2vh;
}

#contact-view .folderMain {
    width: fit-content;
}

#contact-view .folderMain-mobile {
    height: auto;
    width: 100%;
    background-color: black;
    border: 0.4vh solid rgb(161, 0, 0);
    border-radius: 0vh 0vh 0.4vh 0.4vh;
    box-sizing: border-box;
    position: relative;
    box-shadow: rgba(161, 0, 0, 0.4) -0.4vh 0.4vh, rgba(161, 0, 0, 0.3) -0.8vh 0.8vh, rgba(161, 0, 0, 0.2) -1.2vh 1.2vh, rgba(161, 0, 0, 0.1) -1.6vh 1.6vh, rgba(161, 0, 0, 0.05) -2vh 2vh;
}

.folderPage1 {
    background-color: black;
    margin: 0.6vh;
    width: 100%;
    /*height: 100%;*/
    border: 0.2vh solid white;
    box-sizing: border-box;
    position: relative;
}

.folderPage1Right {
    background-color: black;
    margin: 0.6vh 0vh 0.6vh -0.6vh;
    width: 100%;
    /*height: 100%;*/
    border: 0.2vh solid white;
    box-sizing: border-box;
    position: relative;
}

.folderPage2 {
    background-color: black;
    margin: 0.6vh;
    width: 100%;
    /*height: 100%;*/
    border: 0.2vh solid white;
    box-sizing: border-box;
    position: relative;
    padding: 0;
}

.folderPage2Right {
    background-color: black;
    margin: 0.6vh 0vh 0.6vh -0.6vh;
    width: 100%;
    /*height: 100%;*/
    border: 0.2vh solid white;
    box-sizing: border-box;
    position: relative;
    padding: 0;
}

.folderPage3 {
    padding: 4vh;
    text-align: justify;
}

.folderPage3-mobile{
    padding: 4vh 2vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#projectsView .folderPage3-mobile{
    padding: 3vh 2vh;
    text-align: justify;
    display: block;
}

#project-view .folderPage3-mobile {
    padding: 4vh 2vh;
    text-align: left;
}

.folderTitle {
    font-family: google;
    margin-left: 1.4vh;
    margin-right: 1.4vh;
    text-align: justify;
    font-size: 1.4vh;
    font-weight: bold;
    color: black;
}

.sectionName {
    font-family: google;
    color: white;
    margin-left: 3vh;
    margin-right: 3vh;
    font-size: 1.7vh;
    font-weight: bold;
}

.sectionName-mobile {
    font-family: google;
    color: white;
    font-size: 1.4vh;
    font-weight: bold;
}

.subsectionName {
    font-family: google;
    color: red;
    text-align: justify;
}

.greenText {
    color: #00FF00;
    font-weight: bold;
    text-align: justify;
}

.whiteText {
    font-family: google;
    text-align: justify;
    font-size: 1vh;
    color: rgb(175, 175, 175);
}

.whiteText-mobile {
    font-family: google;
    text-align: justify;
    font-size: 0.9vh;
    color: rgb(175, 175, 175);
}

/*
Carousel
*/

.carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.video-large-outer {
    border: 0.4vh solid red;
    border-radius: 0.4vh;
    padding: 0.6vh;
    position: relative;
    width: 100%;
    /*min-width: 500px;*/
    box-shadow: rgba(161, 0, 0, 0.4) -0.4vh 0.4vh, rgba(161, 0, 0, 0.3) -0.8vh 0.8vh, rgba(161, 0, 0, 0.2) -1.2vh 1.2vh, rgba(161, 0, 0, 0.1) -1.6vh 1.6vh, rgba(161, 0, 0, 0.05) -2vh 2vh;
}

.video-large-container {
    height: auto;
    position: relative;
    border: 0.2vh solid white;
    border-radius: 0.4vh;
    width: 100%;
    overflow: hidden;
}

.video-large {
    position: relative;
    overflow: hidden;
    height: 0;
    padding-bottom: 56.25%;
}

.video-large iframe {
    /*width: 100%;
    height: 20vw;*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
}

.imgSlider {
    width: 100%;
}

.thumbnails-container-outer {
    border: 0.4vh solid red;
    border-radius: 0.4vh;
    padding: 0.6vh;
    width: 100%;
    /*min-width: 500px;*/
    box-shadow: rgba(161, 0, 0, 0.4) -0.4vh 0.4vh, rgba(161, 0, 0, 0.3) -0.8vh 0.8vh, rgba(161, 0, 0, 0.2) -1.2vh 1.2vh, rgba(161, 0, 0, 0.1) -1.6vh 1.6vh, rgba(161, 0, 0, 0.05) -2vh 2vh;
}

.thumbnails-container-inner {
    border: 0.2vh solid white;
    border-radius: 0.4vh;
    padding: 0.6vh;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: center;
    display: flex;
    scroll-behavior: smooth;

    /* Hide scrollbar*/
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/*Hide scrollbar for Chrome, Safari and Opera*/
.thumbnails-container-inner::-webkit-scrollbar {
    display: none;
}

#carouselContainer .bi {
    position: absolute;
    pointer-events: none;
    color: rgba(255, 255, 255, 0.644);
    width: 2.5vh;
    height: fit-content;
}

.iconThumbnail {
    width: calc(16vh/1.2);
    /* Ancho fijo para el marco de la miniatura */
    height: calc(9vh/1.2);
    /* Altura fija para el marco de la miniatura */
    flex: 0 0 auto;
    margin-right: 0.7vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Elimina el margen derecho en la última miniatura */
.iconThumbnail:last-child {
    margin-right: 0;
}

/* Cambia el ancho y alto de .thumbnail en lugar de la miniatura dentro del marco */
.thumbnail {
    border: 0.2vh solid transparent;
    border-radius: 0.4vh;
    filter: brightness(50%);
    width: auto;
    max-width: 100%;
    height: auto;
    cursor: pointer;
    transition: filter 0.3s;
}

.thumbnail:hover {
    filter: brightness(100%);
}

.thumbnail.selected {
    filter: brightness(100%);
    animation: blinkBorder 0.2s infinite;
    pointer-events: none;
}

.videoControls {
    display: unset;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
}
/*
.videoControls-mobile{
    display: none;
}*/

.prevButton,
.nextButton {
    height: 100%;
    background-color: transparent;
    color: white;
    border: none;
    font-size: 4.5vh;
    padding-left: 1.5vh;
    padding-right: 1.5vh;
    pointer-events: none;
    position: absolute;
    transition: transform 0.3s;
}

.prevButton span, .nextButton span{
    cursor: pointer;
    pointer-events: auto;
}

.prevButton-mobile span, .nextButton-mobile span{
    cursor: pointer;
    pointer-events: auto;
}

.prevButton {
    left: -5vh;
    background: linear-gradient(270deg, rgba(11, 11, 11, 0) 0%, rgba(11, 11, 11, 0.4) 100%);
}

.nextButton {
    right: -5vh;
    background: linear-gradient(90deg, rgba(11, 11, 11, 0) 0%, rgba(11, 11, 11, 0.4) 100%);
}

.video-large-outer:hover .videoControls {
    opacity: 1;
}

.video-large-outer:hover .prevButton {
    transform: translateX(5vh);
}

.video-large-outer:hover .nextButton {
    transform: translateX(-5vh);
}

#project-view footer {
    position: fixed;
    width: 100%;
    margin-top: 7vh;
}

/**
Responsive design
*/
/*
@media screen and (max-width: 576px) {

}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 992px) {
    body {
        overflow-y: visible;
    }

    #projectsView .flechas {
        display: none;
    }
}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1400px) {
    #indexView .top-content .title img {
        width: 30%;
    }
    #aboutme-view .top-content .title img {
        width: 30%;
    }
}

@media screen and (min-width: 2000px) {
    /*Hacer que el hueco entre las opciones del menú sea más pequeño*/
/*
    
}*/