/*COLOR*/ $color1: #46b5e8; $color2: #fafbfc; $color3: #c2c2c2; $color4: #eeeff0; $color5: #d8d8d8; $color6: #f1f1f1; $color7: #4d4d4d; $color8: #ffffff; .curso { .seccion-cabecera-1 { background: #46b5e8 url(../img/home/fondo-portada-seo.png); background-size: contain; background-position: left center; background-repeat: no-repeat; padding-top: 15rem; border-top-right-radius: 1.3rem; border-top-left-radius: 1.3rem; .cajon-linea-1 { padding-right: 0rem; .linea-1 { border-top: 0.5rem solid #fff; } } } .seccion-menu-1 { .seccion-botones-tema-1 { display: -webkit-box; overflow: hidden; .cajon-boton-1 { user-select: none; cursor: pointer; border-top: 4px solid $color6; float: left; display: inline; &:hover { border-top: 4px solid $color1; background-color: $color8; transition: all 0.3s; .contenido-1 { color: $color1; } } } .seleccionado { border-top: 4px solid $color1; background-color: $color8; .contenido-1 { color: $color1; } } } .linea-progreso-1 { border-top: 0.5rem solid #46b5e8; margin: 0; padding: 0; } .vl { border-left: 6px solid $color3; height: 3.5rem; } .boton-antSig-1 { user-select: none; cursor: pointer; &:hover { background-color: $color8; transition: all 0.3s; } } .boton-antSig-2, .boton-volver-1 { user-select: none; cursor: pointer; border-radius: 0.5rem; border: 1px solid $color1; background-color: $color8; .parrafo-1 { margin-left: 1rem; margin-right: 1rem; } .fa-caret-right { position: relative; animation-name: movimientoSig; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: ease-out; } .fa-caret-left { position: relative; animation-name: movimientoAnt; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: ease-out; } &:hover { background-color: $color1; transition: all 0.3s; .parrafo-1 { color: $color8; } .fa-caret-left, .fa-caret-right, .fa-home { color: $color8; } } } .dNone { display: none; opacity: 0; } .desactivado { pointer-events: none; opacity: 0; } } } @media screen and (min-width: 801px) { .curso { .seccion-menu-1 { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; .seccion-botones-tema-1 { // display: flex; // flex-direction: row; // justify-content: flex-start; // align-items: stretch; } } } } @media screen and (min-width: 426px) and (max-width: 800px) { .curso { .seccion-menu-1 { } } } @media screen and (min-width: 425px) and (max-width: 800px) { .curso { .seccion-cabecera-1 { background: #46b5e8 url(../img/home/fondo-portada-seo.png); background-size: contain; background-position: -17rem center; background-repeat: no-repeat; padding-top: 15rem; border-top-right-radius: 1.3rem; border-top-left-radius: 1.3rem; .cajon-linea-1 { padding-right: 0rem; .linea-1 { border-top: 0.5rem solid #fff; color: $color7; } } } .seccion-menu-1 { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; .seccion-botones-tema-1 { } } } } @media screen and (min-width: 320px) and (max-width: 425px) { .curso { .seccion-cabecera-1 { background: #46b5e8 url(../img/home/fondo-portada-seo-2.png); background-size: cover; background-position: center -20rem; background-repeat: no-repeat; padding-top: 30rem; border-top-right-radius: 1.3rem; border-top-left-radius: 1.3rem; .cajon-linea-1 { padding-right: 15px; .linea-1 { border-top: 0.5rem solid #fff; } } } .seccion-menu-1 { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; .seccion-botones-tema-1 { } } } } // ANIMACIONES @keyframes movimientoSig { 0% {left: 0px;} 25% {left: 5px;} 50% {left: 0px;} 75% {left: 5px;} 100% {left: 0px;} } @keyframes movimientoAnt { 0% {left: 0px;} 25% {left: -5px;} 50% {left: 0px;} 75% {left: -5px;} 100% {left: 0px;} }