.scroll_down_home {font-size:3rem; width:100%; color:white; animation:scrollIndicator 4s forwards; animation-delay: 2s; opacity: 0;}
@keyframes scrollIndicator {
    0% {transform: translateY(0px); opacity: 0;}
    33% {transform: translateY(10px); opacity: 1;}
    66% {transform: translateY(0px); opacity: 0;}
    100% {transform: translateY(0px); opacity: 1;}
}

.spawn-1 {animation:spawnUno 0.4s forwards; opacity: 0; transform: translateY(-10px); animation-delay: 1s;}
@keyframes spawnUno {
    0% {opacity: 0; transform: translateY(-10px);}
    100% {opacity: 1; transform: translateY(0px);}
}

.spawn-2 {animation:spawnDos 0.4s forwards; opacity: 0; transform: translateY(10px); animation-delay: 1.5s;}
@keyframes spawnDos {
    0% {opacity: 0; transform: translateY(10px);}
    100% {opacity: 1; transform: translateY(0px);}
}

body {height: 100vh; flex-direction: column; display: flex;}

/* comentar footer si desactivar smart menu */
/*header, footer {flex-shrink: 0; position: fixed; z-index: 999;}
header {transition: 0.4s ease-in; top: 0;}*/

.inicio {background-color: white; transition: 0.4s; cursor:pointer;}
.inicio strong {transition: 0.4s;}
.inicio:hover {background-color: #800013; color: white;}
.inicio a {padding-left: 0.6rem; padding-right: 0.6rem;}
.inicio a.active {background-color:#7D000C !important;}
.inicio a.active strong {color:white !important;}
.inicio:hover strong {color:white;}
.toggle-lang {display: flex; align-items: center; margin-left: 0.6rem;}
.toggle-lang .toggle-lang__divider {margin-left: 4px; margin-right: 4px;}
.toggle-lang .toggle-lang__lang {color: rgba(255,255,255,0.7); transition: 0.4s; font-size: 1rem;}
.toggle-lang .active {color: rgba(255,255,255,1);}
@media (min-width:1200px) {
    .header2 {background-color:#2B2B2B; position:fixed; z-index:999; right:5px;}

    .megaSubMenu {position:absolute; padding:0rem; /*padding-top:0.75rem;*/ list-style-type:none; display:none; -webkit-box-shadow: 0px 2px 13px 0px rgba(0,0,0,0.26);
        -moz-box-shadow: 0px 2px 13px 0px rgba(0,0,0,0.26);
        box-shadow: 0px 2px 13px 0px rgba(0,0,0,0.26);}
    .megaMenuItem:hover .megaSubMenu {display:block;}
    .megaSubMenuItem {white-space:nowrap;}
    .megaSubMenuItem a {color:white;  display:block; padding:0.5rem 0.75rem; background-color:#800013;}
    .megaSubMenuItem a.active, .megaSubMenuItem a.active:hover {background-color:white; color:#7D000C; font-weight: bold;}


    .triangle-up {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 7px solid #800013;
        margin-left: 1rem;
    }

    .megaMenuItem {position:relative;}

    .megaMenu {
        display: flex;
        padding-left: 0rem;
        list-style-type: none;
        cursor: pointer;
        margin-bottom: 0rem;
        padding: 0.25rem 0rem;
    }
}

@media (max-width:1199px) {
    .header2 {background-color:#2B2B2B; position: absolute; z-index: 99;}

    .megaSubMenu {padding:0rem; /*padding-top:0.75rem;*/ list-style-type:none; }
    .megaSubMenuItem {white-space:nowrap;}
    .megaSubMenuItem a {color:white; display:block; padding:0.5rem 0.75rem;}
    .megaSubMenuItem a.active, .megaSubMenuItem a.active:hover {background-color:white; color:#7D000C; font-weight: bold;}

    .triangle-up {display:none;}

    .megaMenuItem {position:relative;}

    .megaMenu {
        padding-left: 0rem;
        list-style-type: none;
        cursor: pointer;
        margin-bottom: 0rem;
        padding: 1.5rem 0rem;
        
    }
}
header a {color:#800013; transition: 0.4s; font-size: 1.5rem;}
header div:not(.inicio) a:hover {color:white;}
.megaMenuItem:last-child {margin-right:0rem;}        
.megaMenuItem span {color:white;}
.megaSubMenuItem a {font-size: 1rem;}
.megaSubMenuItem a:hover {color:white; background-color:#2B2B2B;}

.rrss {display:flex; align-items:center;}
.rrss a {color:rgba(255,255,255,0.7); transition:0.4s; font-size:1.3rem;}
.rrss a:nth-child(4) {font-size: 1rem; margin-bottom: 0.18rem;}
.rrss a:first-child, .rrss a:nth-child(2), .rrss a:nth-child(3) {margin-right:1.3rem;}
.rrss .fullScreen {margin-left:1.3rem;}
.rrss a:hover {color:white;}
.rrss .fullScreen {cursor:pointer; transition:0.4s;}
.rrss .fullScreen:hover {color:white;}
.rrss .fullScreen  i {border: 1px solid rgba(255, 255, 255, 0.7); padding: 2px 7px; border-radius: 1px; transition: 0.4s;}
.rrss .fullScreen:hover  i {border: 1px solid rgba(255, 255, 255, 1); padding: 2px 7px; border-radius: 1px;}
footer {bottom: 0; transition: 0.4s ease-in;}

main {margin-top: 0rem; /* Aproximadamente el alto de la cabecera fija */}

/*#smartMenu.none {top: -100px;}*/
#smartFooter.none {bottom: -100px;}
.footerEnlaces a:hover {color:white;}
.footerEnlaces a:first-child:hover {cursor:default;}
.footerEnlaces *::selection {color:#333333; background-color: white;}

.boton_7b {background-color: white;}

/* Select */
.my-select, .my-select:focus, .my-select:active {border: none; border-bottom: 1px solid transparent !important; outline: 0; box-shadow:none !important;}
.opciones {display: none;}
.opciones.active {display: flex;}
.opciones div {animation:portfolioSpawn 1s forwards; opacity:0; transform:scale(0.8);}
.opciones.bordes div {-webkit-box-shadow: 0px 10px 29px -4px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 10px 29px -4px rgba(0,0,0,0.1);
    box-shadow: 0px 10px 29px -4px rgba(0,0,0,0.1);}
.opciones.bordes div:focus {box-shadow: inherit !important;;}

select option {background-color: #333333; color: white;}

#herramientas {background-color:rgba(165,165,165,0.2); padding-bottom: 5rem; border-bottom: 10px solid #800013;}

@keyframes portfolioSpawn {
    0% {opacity:0; transform:scale(0.8);}
    100% {opacity:1; transform: scale(1);}
}

.my-select {font-size:3.2em; color:#4C4C4C;}

.homeTitulo, .homeSubtitulo {text-shadow: 0px 3px 20px rgba(0,0,0,23%);}
.homeTitulo {font-size: 10rem;}
.homeSubtitulo {font-size: 2.7rem;}

.webDemo {height: 630px;}

@media (max-width:576px) {
    .homeTitulo {font-size: 3.5rem;}
    .homeSubtitulo {font-size: 2rem;}
    h2 {font-size: 2.3rem;}

    .menu-blur div a span {font-size: 1.3rem !important;}
    .menu-blur h2 {font-size: 1.3rem !important;}
    .menu-blur h2 i {font-size: 1.3rem !important;}

    .webDemo {height: 450px !important;}

    .workImage {background-size:cover; background-position:center center; height:600px !important; width:100%;}
}

@media (max-width:768px) {
    
    .webDemo {height: 530px !important;}

    .slider {width: 100% !important; margin: 0px auto;}

    .animatedBackgroundHome div {
        animation-name: test;
        animation-duration: 10s;
        position: absolute;
        top: 0px;
        left: 0px;
        opacity:0;
        background-size: cover;
        background-position: center center;
    }

    @-webkit-keyframes test {
        0% {opacity: 0;}
        50% {opacity: 1;}
        100% {}
    }
    @keyframes test {
        0% {opacity: 0;}
        50% {opacity: 1;}
        100% {}
    }

    .animatedBackgroundHome div:nth-child(1) { animation-delay:0s; -webkit-animation-delay:0s; background-image: url('../../imagenes/web/slider/masterapp.jpg');}
    .animatedBackgroundHome div:nth-child(2) { animation-delay:5s; -webkit-animation-delay:5s; background-image: url('../../imagenes/web/slider/Motocross_5.jpg');}
    .animatedBackgroundHome div:nth-child(3) { animation-delay:10s; -webkit-animation-delay:10s; background-image: url('../../imagenes/web/slider/ad-do.jpg');}
    .animatedBackgroundHome div:nth-child(4) { animation-delay:15s; -webkit-animation-delay:15s; background-image: url('../../imagenes/web/slider/esoes.jpg');}
    .animatedBackgroundHome div:nth-child(5) { animation-delay:20s; -webkit-animation-delay:20s; background-image: url('../../imagenes/web/slider/fAereo-3.jpg');}
    .animatedBackgroundHome div:nth-child(6) { animation-delay:25s; -webkit-animation-delay:25s; background-image: url('../../imagenes/web/slider/bnp-paribas.jpg');}
    .animatedBackgroundHome div:nth-child(7) { animation-delay:30s; -webkit-animation-delay:30s; background-image: url('../../imagenes/web/slider/dragados.jpg');}
    .animatedBackgroundHome div:nth-child(8) { animation-delay:35s; -webkit-animation-delay:35s; background-image: url('../../imagenes/web/slider/horizzonte.jpg');}
    .animatedBackgroundHome div:nth-child(9) { animation-delay:40s; -webkit-animation-delay:40s; background-image: url('../../imagenes/web/slider/interfaz-movil.jpg');}
    .animatedBackgroundHome div:nth-child(10) { animation-delay:45s; -webkit-animation-delay:45s; background-image: url('../../imagenes/web/slider/misstipsi.jpg');}
    .animatedBackgroundHome div:nth-child(10) { animation-delay:50s; -webkit-animation-delay:50s; background-image: url('../../imagenes/web/slider/web-mockup.jpg');}

}

@media (max-width:991px) {
    .workImage {background-size:cover; background-position:center center; height:400px !important; width:100%;}
    .dragadosInterfaz .workImage.gesDoc {background-position: 85% center !important;}
}

@media (min-width:768px) and (max-width:991px) {
    .dragadosInterfaz .workImage {background-size:cover; background-position:center center; height:400px !important; width:100%;}
}

.menu-blur {/*overflow-y:auto;*/ right:0; top:0; width:100%; background-color:rgba(0,0,0,0.85); backdrop-filter: blur(10px); min-height:100vh; z-index:9; position:absolute; transition:0.4s; transform:translateX(-100%);}
.menu-blur.active {transform:translateX(0%);}
.menu-blur #inicio, .menu-blur #fotografia, .menu-blur #editorial {font-size:inherit; color:inherit;}

.menu-blur div a span {font-size:1.5rem;}
.menu-blur h2 i {font-size:1.5rem;}
#menuPrincipal a h2, #menuPrincipal > div > h2 {font-size: 1.5rem !important;}

.menu_link {color:darkgrey; transition:0.4s;}
.menu_link:hover {color: white; padding-left: 0.5rem;}
.menu_link.active {color: white;}

ul {list-style-type: none !important;}

/* ==== Para los 2 casos: ==== */
.element_dot_line {cursor: default; transition: 0.3s; margin-bottom: 2rem;}
.dot_line {width: 10px; height: 10px; border-radius: 50%; background-color: white; border: 2px solid #800013; transition: 0.3s;}
/*.title_dot_line, .info_dot_line {}*/
.element_dot_line .info_dot_line .info_dot_line_container {
    background-color: white;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border: 1px solid lightgrey;
    background-color: white;
    transition: 0.3s;
}
.element_dot_line .triangulo_dcha {
    border-left-color: lightgrey;
    transform: rotate(180deg);
    position: absolute;
    top: 0.25rem;
    left: 0.5rem;
    z-index: -1;
    transition: 0.3s;
}

/* ==== Hover ==== */
.element_dot_line:hover .dot_line, .element_dot_line.active .dot_line {
    transform: scale(1.2);
    background-color: #800013;
    border: 2px solid #800013;
    transition: 0.3s;
}

.element_dot_line:hover .title_dot_line, .element_dot_line:hover .info_dot_line,  .element_dot_line.active .title_dot_line, .element_dot_line.active .info_dot_line{color: #800013;  transition: 0.3s;}
.element_dot_line:hover .triangulo_dcha, .element_dot_line.active .triangulo_dcha {border-left-color: #800013;  transition: 0.3s;}
.element_dot_line:hover .info_dot_line .info_dot_line_container, .element_dot_line.active .info_dot_line .info_dot_line_container  {border-color: #800013; background-color: #800013;  transition: 0.3s;}
.element_dot_line:hover .info_dot_line span, .element_dot_line.active .info_dot_line span {color: white;  transition: 0.3s;}

/* ==== Para el caso de info a la izq ==== */
.element_dot_line .info_dot_line_container.inverse_direction .triangulo_dcha {transform: rotate(0deg); right: 0.5rem; left: auto;}
.element_dot_line .info_dot_line_container.inverse_direction {margin-left: 0rem !important;}

/* Portfolio */
#myWorks li {font-size: 1rem;}
#myWorks li a:hover {color:#7D000C;}
#myWorks li a.active {background-color:#7D000C; color:white;}

.workExample, .workExample2 {display:block; transition:0.4s; width:100%; cursor:pointer; border:2px solid transparent; margin-bottom:2rem; -webkit-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25); -moz-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25); box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25);}
.workExample2 {height:100%; margin-bottom: 0rem;}
.workExample2 .workImage {height:350px;}
.workExample2:hover {transform: translateY(-10px)}
.workInfo {width:calc(100% - 32px); padding-right:1rem; padding-left:1rem; height:calc(100% - 2rem); background-color:#7D000C; position:absolute; display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center; transition:0.4s; opacity:0;}
.workExample:hover .workInfo {opacity:0.85; transform:scale(0.85);}

@media (min-width:1200px) {
    .workExample2 .workInfo {width: 100%; height: 35px; bottom: 0px;}
    .workExample2:hover .workInfo {opacity:0.85; transform:scale(1);}
    .workExample2:hover {border:2px solid #7D000C;}
}

@media (min-width:992px) {
    #intranetModal .modal-lg {width:730px !important;}
}

.workExample:hover {border:2px solid #7D000C;}
.workInfo span {color:white; text-align:center;}
.workInfo .workName {border-bottom:1px solid white; padding-bottom:0.25rem; text-transform:uppercase;}
.workInfo .workDescription {width:100%; margin-top:0.25rem;}
.workExample2 .workInfo .workDescription {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; margin-top: 0rem;}
.workImage {background-size:cover; background-position:center center; height:200px; width:100%;}
.workImage.gesDoc {background-position: 100% center;}
.workImage.interfaz0 {background-image: url('../../imagenes/frontend/dragados.jpg');}
.workImage.interfaz1 {background-image: url('../../imagenes/diseno-ui/misstipsi/interfaz-comandero.jpg');}
.workImage.interfaz2 {background-image: url('../../imagenes/diseno-ui/interfaz-movil.jpg');}
.workImage.interfaz3 {background-image: url('../../imagenes/diseno-ui/masterapp/interfaz-movil.jpg');}
.workImage.interfaz4 {background-image: url('../../imagenes/diseno-ui/esoes3d/diseño-web-ingenieria-inversa.jpg');}
.workImage.interfaz5 {background-image: url('../../imagenes/diseno-ui/bnp/bnp-paribas.jpg');}
.workImage.interfaz6 {background-image: url('../../imagenes/frontend/maquetacion-web-coral-polifonica-mockup.jpg'); background-position: 75% 50%;}
.workImage.interfaz7 {background-image: url('../../imagenes/frontend/dragados.jpg');}

.workImage.maq1 {background-image: url('../../imagenes/frontend/ad-do.jpg');}
.workImage.maq2 {background-image: url('../../imagenes/web/inmobiliario/web-mockup-desktop.jpg');}
.workImage.maq3 {background-image: url('../../imagenes/frontend/maquetacion-web-promocion-viviendas.jpg');}
.workImage.maq4 {background-image: url('../../imagenes/frontend/ezcurdia-66-mockup.jpg')}
.workImage.maq5 {background-image: url('../../imagenes/web/vivienda/banner-desktop.jpg');}
.workImage.maq6 {background-image: url('../../imagenes/web/barcos/web-mockup-desktop.jpg');}
.workImage.maq7 {background-image: url('../../imagenes/frontend/maquetacion-web-coral-polifonica-mockup.jpg'); background-position: 75% 50%;}
.workImage.maq8 {background-image: url('../../imagenes/frontend/maquetacion-web-informacion-invitados-boda.jpg');}
.workImage.maq9 {background-image: url('../../imagenes/frontend/opera-eventos-mockup.jpg');}
.workImage.maq10 {background-image: url('../../imagenes/frontend/dragados.jpg');}

.workImage.foto1 {background-image: url('../../imagenes/fotografia/fotografia-motocross-madrid-13.jpg'); background-position: top;}
.workImage.foto2 {background-image: url('../../imagenes/fotografia/retrato/plano-medio-mujer-2.jpg'); background-position: 80% 10%;}
.workImage.foto3 {background-image: url('../../imagenes/fotografia/nature/fotografia-animales.jpg');}

/*.workImage.diseno1 {background-image: url('../../imagenes/editorial/universidad-oviedo-tesis-doctoral-quimica.jpg');}*/
.workImage.diseno2 {background-image: url('../../imagenes/editorial/universidad-oviedo-tesis-doctoral-quimica.jpg');}
/*.workImage.diseno3 {background-image: url('../../imagenes/editorial/universidad-oviedo-tesis-doctoral-quimica.jpg');}*/
.entidades {list-style:none;}
.entidades {width: 100%;}
.entidades:not(:last-child) {margin-bottom: 0.75rem;}
.entidades:first-child {margin-top: 1.5rem;}
.entidades img {margin-right: auto; margin-left: auto; display: block;}
@media(min-width:992px) {
    .entidades {
        width: auto;
    }
}

/* Skills */
/*.fichaSkill {
    background-color: white;
    padding: 1.5rem 1.75rem;
    -webkit-box-shadow: 0px 0px 12px -2px rgb(0 0 0 / 30%) !important;
    -moz-box-shadow: 0px 0px 12px -2px rgba(0,0,0,0.3) !important;
    box-shadow: 0px 0px 12px -2px rgb(0 0 0 / 30%) !important;
    border:1px solid lightgrey;
    border-radius:0.5rem;
}*/
.fichaSkill {margin-top:0rem; margin-bottom:1rem;}
.fichaSkill h4 {font-weight:bold; font-size:1.5rem; color:#800013;}
h4.lecturas {font-weight:bold; font-size:1.5rem; color:#4c4c4c;}
.logoSkill {background-size:cover; background-repeat:no-repeat; background-position:center center; height:25px;}
.detailsList {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; width:100%; border-bottom:1px solid lightgrey; padding-bottom:0.25rem; margin-top:0.75rem; margin-bottom:0.5rem;}
.detailsList:last-child {border-bottom:none !important; margin-bottom:0rem !important;}

.skill {display:flex; align-items: center; color:#4c4c4c}
.btnSkill {cursor: pointer;}
.btnSkill:hover .icono circle, .btnSkill:hover .icono path, .btnSkill.active .letras  {transition: 0.4s;}
.btnSkill:hover .icono circle, .btnSkill:hover .icono path {fill:#4c4c4c;}
.btnSkill.active .icono circle, .btnSkill.active .icono path ,
.btnSkill.active .letras  
{fill:#800013 !important;}

.skillSelector {transition:0.4s; border:1px solid transparent; padding:0.5rem 0.75rem; list-style-type:none; cursor:pointer; color:#4c4c4c; font-size: 1rem;}
.skillSelector.active {border:1px solid #7D000C; color:#7D000C;}

.skillTypes {animation: spawnSkillTypes forwards 0.4s;opacity:0; transform:translateX(-150px);}

@keyframes spawnSkillTypes {
    0% {opacity:0; transform:translateX(-150px);}
    100% {opacity:1; transform:translateX(0px);}
}

.progressSkill {
    position: relative;
    width: 100%;
    padding-bottom: 1rem;
}
.progressSkill div {position:absolute; top:0.75rem; left:0px;}
.progressSkill div:first-child { border-bottom:1px solid lightgrey;  width:100%;}
.progressSkill div:nth-child(2) {border-bottom:1px solid #4c4c4c;  width:50%;}
.progressSkill div:nth-child(2) i {position:absolute; right:0px; top:-0.5rem; color:#4c4c4c; font-size:0.8rem;}
#progress {margin-bottom:1.5rem;}
#progress .detailsProgress:not(:first-child) {margin-top:1rem;}
#progressSkill .detailsList {margin-bottom:1rem; padding-bottom:0.75rem;}

.linksList {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; width:100%; border-bottom:1px solid lightgrey; margin-bottom:1rem; padding-bottom:0.75rem; margin-top:0.75rem; color:#4c4c4c;}


/* info adicional */
.infoAdicional {border: 1px solid lightgrey; border-top:none; padding:1rem; display:flex; justify-content:center; align-items:start; flex-wrap:wrap;}
.infoAdicional i {font-size:1.5rem; margin-top:-2rem; color:#4c4c4c;}
.infoAdicional img {width:40px; margin-top:-1.3rem;}
.infoAdicional h4 {font-weight:bold; width:100%; text-align:center; color:#4c4c4c;}
.infoAdicional span {color:#4c4c4c; text-align:center;}
.infoAdicionalLinea {border-bottom:1px solid lightgrey; width:100%;}

#img-info-adicional-3 {margin-bottom:0.5rem;}
#img-info-adicional-4 {width:23px; margin-top:-1.6rem; margin-bottom:0.5rem;}