/* 
    Created on : 01/08/2020
    Author     : Jorge A Peña Piña
    Version    : 1.0
*/

html {
    box-sizing: border-box ;
    font-size:       62.5% ;
    margin:              0 ;
    padding:             0 ;
}

*, *:before, *:after {
    box-sizing: inherit ;
    margin:           0 ;
    padding:          0 ;
}

body {
    background:                  #ffffff ;
    color:                       #000000 ;
    font-family:   'Work Sans', sans-serif ;
    font-size:                        2rem ;
    line-height:                       1.5 ;
    margin:                              0 ;
    padding:                             0 ;
}

/* Globales */

img {
    display: flex ;
    width:   100% ;
}

h1 {
    font-size: 3rem ;
}

h2 {
    font-size: 2.75rem ;
}

h3 {
    font-size: 2.5rem ;
}

h4 {
    font-size: 2.25rem ;
}

a {
    font-size:       2rem ;
    text-decoration: none ;
}

p, li {
    font-size: 2rem ;
}

i {
    font-size: 2rem ;
}

.contenedor-100 {
    background: inherit ;
    width:         100% ;
}

.contenedor-95 {
    background: inherit ;
    margin:    0 auto 0 ;
    width:          95% ;
}

.contenedor-90 {
    background: inherit ;
    margin:    0 auto 0 ;
    width:          95% ;
}

.contenedor-80 {
    background: inherit ;
    margin:    0 auto 0 ;
    width:          95% ;
}

.contenedor-70 {
    background: inherit ;
    margin:    0 auto 0 ;
    width:          95% ;
}

.contenedor-60 {
    background: inherit ;
    margin:    0 auto 0 ;
    width:          95% ;
}

.contenedor-50 {
    background: inherit ;
    margin:    0 auto 0 ;
    width:          95% ;
}

.contenedor-40 {
    background: inherit ;
    margin:    0 auto 0 ;
    width:          95% ;
}

.contenedor-35 {
    background: inherit ;
    margin:    0 auto 0 ;
    width:          95% ;
}

.contenedor-30 {
    background: inherit ;
    margin:    0 auto 0 ;
    width:          95% ;
}

.contenedor-20 {
    background: inherit ;
    margin:    0 auto 0 ;
    width:          95% ;
}

.contenedor-10 {
    background: inherit ;
    margin:    0 auto 0 ;
    width:          95% ;
}

.fixed {
    position: fixed ;
    top:          0 ;
    z-index:      2 ;
}

/* Barra */

header .barra {
    align-items:                    center ;
    background-color: rgba(0, 0, 0, 0.9) ;
    display:                          flex ;
    justify-content:         space-between ;
    padding:                          1rem ;
}

header .barra .botonInicio {
    background: transparent ;
}

header .barra .botonMenu {
    background: transparent ;
}

header .barra .botonInicio a,
header .barra .botonMenu i {
    color: #ffffff ;
    cursor:  pointer ;
}

header .barra .menu {
    animation:                                             animacionderecha 1s ;
    background-color:                                                #000000 ;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) ;
    color:                                                           #ffffff ;
    display:                                                              none ;
    position:                                                            fixed ;
    right:                                                                   0 ;
    top:                                                                     0 ;
    overflow:                                                             auto ;
    z-index:                                                                 3 ;
    width:                                                                 70% ;
}

@keyframes animacionderecha {
    from{right: -300px;opacity:0} 
    to{right:0;opacity:1}
}

header .barra .menu .botonCerrar {
    background:     #ffffff ;
    color:          #000000 ;
    display:             flex ;
    justify-content: flex-end ;
    padding:             1rem ;  
}

header .barra .menu .botonCerrar i {
    cursor: pointer ;
    font-size: 2rem ;
}

header .barra .menu .logo {
    background: inherit ;
    display:       none ;
}

header .barra .menu .opcionesMenu {
    background: inherit ;
}

header .barra .menu .opcionesMenu ul {
    background: inherit ;
    list-style:    none ;
}

header .barra .menu .opcionesMenu ul li {
    background:          inherit ;
    padding: 1rem 0rem 1rem 1rem ;
}

header .barra .menu .opcionesMenu ul li a {
    color:   #ffffff ;
    font-size:  1.25rem ;
}

header .barra .menu .opcionesMenu ul li a:hover {
    text-shadow: 0px 0px 15px rgba(255, 255, 255, 1);
}

/* Encabezado */

header .encabezado {
    background: inherit ;
}

header .encabezado .avisos {
    background: inherit ;
}

header .encabezado .avisos p {
    background: inherit ;
    font-size:   1.5rem ;
    padding:       1rem ;
    text-align:  center ;
}

header .encabezado .avisos p a {
    color:  #9b9b9b ;
    font-size: 1.5rem ;
}

.splide__pagination {
    bottom: .1em ;
}

/* Principal principal */

main .principal {
    align-items:      center ;
    background:      inherit ;
    display:            flex ;
    flex-wrap:          wrap ;
    justify-content:  center ;
    margin:           1rem 0 ;
    position:         static ;
}

main .principal .tituloEmpresa {
    background: inherit ;
}

main .principal .tituloEmpresa h1 {
    font-size:         4rem ;
    font-weight:        400 ;
    letter-spacing: -0.5rem ;
    line-height:          1 ;
}

main .principal .tituloEmpresa h1 span {
    display:          block ;
    font-size:       1.5rem ;
    letter-spacing: -0.1rem ;
    margin-left:    0.25rem ;
}

main .principal .aulasVirtuales {
    align-items:      center ;
    background:      inherit ;
    display:            flex ;
    flex-wrap:          wrap ;
    letter-spacing: -0.25rem ;
    line-height:           1 ;
    margin:        1rem 0rem ;
    position:       relative ;
    text-align:       center ;
    width:              100% ;
    height:            40rem ;
}

main .principal .aulasVirtuales::after {
    content:                                               "" ;
    background: url('../images/principal/aulasvirtuales.png') ;
    background-position:                               center ;
    background-repeat:                              no-repeat ;
    background-size:                                    cover ;
    opacity:                                              0.5 ;
    top:                                                    0 ;
    left:                                                   0 ;
    bottom:                                                 0 ;
    right:                                                  0 ;
    position:                                        absolute ;
    z-index:                                               -1 ;
}

main .principal .aulasVirtuales .contenidoAulas {
    width: 100% ;
}

main .principal .aulasVirtuales .contenidoAulas h2 {
    display:  inline-block ; 
    font-weight:       400 ;
    width:            100% ;
}

main .principal .aulasVirtuales .contenidoAulas p {
    display:  inline-block ; 
    font-weight:       400 ;
    padding:        1rem 0 ;
    width:            100% ;
}

main .principal .aulasVirtuales .contenidoAulas .botonAulas {
    background: #d9302f ;
    border-radius:   1rem ;
    margin:          1rem ;
    padding:    1rem 2rem ;
    display: inline-block ;
}

main .principal .aulasVirtuales .contenidoAulas .botonAulas a {
    color:#ffffff ;
}

main .principal .sitiosWeb {
    align-items:      center ;
    background:      inherit ;
    display:            flex ;
    flex-wrap:          wrap ;
    letter-spacing: -0.25rem ;
    line-height:           1 ;
    margin:        1rem 0rem ;
    position:       relative ;
    text-align:       center ;
    width:              100% ;
    height:            40rem ;
}

main .principal .sitiosWeb::after {
    content:                                          "" ;
    background: url('../images/principal/sitiosweb.png') ;
    background-position:                          center ;
    background-repeat:                         no-repeat ;
    background-size:                               cover ;
    opacity:                                         0.5 ;
    top:                                               0 ;
    left:                                              0 ;
    bottom:                                            0 ;
    right:                                             0 ;
    position:                                   absolute ;
    z-index:                                          -1 ;
}

main .principal .sitiosWeb .contenidoSitios {
    width: 100% ;
}

main .principal .sitiosWeb .contenidoSitios h2 {
    display:  inline-block ; 
    font-weight:       400 ;
    width:            100% ;
}

main .principal .sitiosWeb .contenidoSitios p {
    display:  inline-block ; 
    font-weight:       400 ;
    padding:        1rem 0 ;
    width:            100% ;
}

main .principal .sitiosWeb .contenidoSitios .botonSitios {
    background: #92e600 ;
    border-radius:   1rem ;
    margin:          1rem ;
    padding:    1rem 2rem ;
    display: inline-block ;
}

main .principal .sitiosWeb .contenidoSitios .botonSitios a {
    color:#ffffff ;
}

main .principal .publicidad {
    align-items:      center ;
    background:      inherit ;
    display:            flex ;
    flex-wrap:          wrap ;
    letter-spacing: -0.25rem ;
    line-height:           1 ;
    margin:        1rem 0rem ;
    position:       relative ;
    text-align:       center ;
    width:              100% ;
    height:            40rem ;
}

main .principal .publicidad::after {
    content:                                           "" ;
    background: url('../images/principal/publicidad.png') ;
    background-position:                           center ;
    background-repeat:                          no-repeat ;
    background-size:                                cover ;
    opacity:                                          0.5 ;
    top:                                                0 ;
    left:                                               0 ;
    bottom:                                             0 ;
    right:                                              0 ;
    position:                                    absolute ;
    z-index:                                           -1 ;
}

main .principal .publicidad .contenidoPublicidad {
    width: 100% ;
}

main .principal .publicidad .contenidoPublicidad h2 {
    display:  inline-block ; 
    font-weight:       400 ;
    width:            100% ;
}

main .principal .publicidad .contenidoPublicidad p {
    display:  inline-block ; 
    font-weight:       400 ;
    padding:        1rem 0 ;
    width:            100% ;
}

main .principal .publicidad .contenidoPublicidad .botonPublicidad {
    background: #6a9df0 ;
    border-radius:   1rem ;
    margin:          1rem ;
    padding:    1rem 2rem ;
    display: inline-block ;
}

main .principal .publicidad .contenidoPublicidad .botonPublicidad a {
    color:#ffffff ;
}

main .principal .cursos {
    align-items:      center ;
    background:      inherit ;
    display:            flex ;
    flex-wrap:          wrap ;
    letter-spacing: -0.25rem ;
    line-height:           1 ;
    margin:        1rem 0rem ;
    position:       relative ;
    text-align:       center ;
    width:              100% ;
    height:            40rem ;
}

main .principal .cursos::after {
    content:                                       "" ;
    background: url('../images/principal/cursos.png') ;
    background-position:                       center ;
    background-repeat:                      no-repeat ;
    background-size:                            cover ;
    opacity:                                      0.5 ;
    top:                                            0 ;
    left:                                           0 ;
    bottom:                                         0 ;
    right:                                          0 ;
    position:                                absolute ;
    z-index:                                       -1 ;
}

main .principal .cursos .contenidoCursos {
    width: 100% ;
}

main .principal .cursos .contenidoCursos h2 {
    display:  inline-block ; 
    font-weight:       400 ;
    width:            100% ;
}

main .principal .cursos .contenidoCursos p {
    display:  inline-block ; 
    font-weight:       400 ;
    padding:        1rem 0 ;
    width:            100% ;
}

main .principal .cursos .contenidoCursos .botonCursos {
    background: #d3c100 ;
    border-radius:   1rem ;
    margin:          1rem ;
    padding:    1rem 2rem ;
    display: inline-block ;
}

main .principal .cursos .contenidoCursos .botonCursos a {
    color:#ffffff ;
}

main .principal .consultorias {
    align-items:      center ;
    background:      inherit ;
    display:            flex ;
    flex-wrap:          wrap ;
    letter-spacing: -0.25rem ;
    line-height:           1 ;
    margin:        1rem 0rem ;
    position:       relative ;
    text-align:       center ;
    width:              100% ;
    height:            40rem ;
}

main .principal .consultorias::after {
    content:                                             "" ;
    background: url('../images/principal/consultorias.png') ;
    background-position:                             center ;
    background-repeat:                            no-repeat ;
    background-size:                                  cover ;
    opacity:                                            0.5 ;
    top:                                                  0 ;
    left:                                                 0 ;
    bottom:                                               0 ;
    right:                                                0 ;
    position:                                      absolute ;
    z-index:                                             -1 ;
}

main .principal .consultorias .contenidoConsultorias {
    width: 100% ;
}

main .principal .consultorias .contenidoConsultorias h2 {
    display:  inline-block ; 
    font-weight:       400 ;
    width:            100% ;
}

main .principal .consultorias .contenidoConsultorias p {
    display:  inline-block ; 
    font-weight:       400 ;
    padding:        1rem 0 ;
    width:            100% ;
}

main .principal .consultorias .contenidoConsultorias .botonConsultorias {
    background: #d55825 ;
    border-radius:   1rem ;
    margin:          1rem ;
    padding:    1rem 2rem ;
    display: inline-block ;
}

main .principal .consultorias .contenidoConsultorias .botonConsultorias a {
    color:#ffffff ;
}

main .principal .software {
    align-items:      center ;
    background:      inherit ;
    display:            flex ;
    flex-wrap:          wrap ;
    letter-spacing: -0.25rem ;
    line-height:           1 ;
    margin:        1rem 0rem ;
    position:       relative ;
    text-align:       center ;
    width:              100% ;
    height:            40rem ;
}

main .principal .software::after {
    content:                                         "" ;
    background: url('../images/principal/software.png') ;
    background-position:                         center ;
    background-repeat:                        no-repeat ;
    background-size:                              cover ;
    opacity:                                        0.5 ;
    top:                                              0 ;
    left:                                             0 ;
    bottom:                                           0 ;
    right:                                            0 ;
    position:                                  absolute ;
    z-index:                                         -1 ;
}

main .principal .software .contenidoSoftware {
    width: 100% ;
}

main .principal .software .contenidoSoftware h2 {
    display:  inline-block ; 
    font-weight:       400 ;
    width:            100% ;
}

main .principal .software .contenidoSoftware p {
    display:  inline-block ; 
    font-weight:       400 ;
    padding:        1rem 0 ;
    width:            100% ;
}

main .principal .software .contenidoSoftware .botonSoftware {
    background: #d229a9 ;
    border-radius:   1rem ;
    margin:          1rem ;
    padding:    1rem 2rem ;
    display: inline-block ;
}

main .principal .software .contenidoSoftware .botonSoftware a {
    color:#ffffff ;
}

main .principal .seguridad {
    align-items:      center ;
    background:      inherit ;
    display:            flex ;
    flex-wrap:          wrap ;
    letter-spacing: -0.25rem ;
    line-height:           1 ;
    margin:        1rem 0rem ;
    position:       relative ;
    text-align:       center ;
    width:              100% ;
    height:            40rem ;
}

main .principal .seguridad::after {
    content:                                          "" ;
    background: url('../images/principal/seguridad.png') ;
    background-position:                          center ;
    background-repeat:                         no-repeat ;
    background-size:                               cover ;
    opacity:                                         0.5 ;
    top:                                               0 ;
    left:                                              0 ;
    bottom:                                            0 ;
    right:                                             0 ;
    position:                                   absolute ;
    z-index:                                          -1 ;
}

main .principal .seguridad .contenidoSeguridad {
    width: 100% ;
}

main .principal .seguridad .contenidoSeguridad h2 {
    display:  inline-block ; 
    font-weight:       400 ;
    width:            100% ;
}

main .principal .seguridad .contenidoSeguridad p {
    display:  inline-block ; 
    font-weight:       400 ;
    padding:        1rem 0 ;
    width:            100% ;
}

main .principal .seguridad .contenidoSeguridad .botonSeguridad {
    background: #8915e8 ;
    border-radius:   1rem ;
    margin:          1rem ;
    padding:    1rem 2rem ;
    display: inline-block ;
}

main .principal .seguridad .contenidoSeguridad .botonSeguridad a {
    color:#ffffff ;
}

main .principal .hardware {
    align-items:      center ;
    background:      inherit ;
    display:            flex ;
    flex-wrap:          wrap ;
    letter-spacing: -0.25rem ;
    line-height:           1 ;
    margin:        1rem 0rem ;
    position:       relative ;
    text-align:       center ;
    width:              100% ;
    height:            40rem ;
}

main .principal .hardware::after {
    content:                                         "" ;
    background: url('../images/principal/hardware.png') ;
    background-position:                         center ;
    background-repeat:                        no-repeat ;
    background-size:                              cover ;
    opacity:                                        0.5 ;
    top:                                              0 ;
    left:                                             0 ;
    bottom:                                           0 ;
    right:                                            0 ;
    position:                                  absolute ;
    z-index:                                         -1 ;
}

main .principal .hardware .contenidoHardware {
    width: 100% ;
}

main .principal .hardware .contenidoHardware h2 {
    display:  inline-block ; 
    font-weight:       400 ;
    width:            100% ;
}

main .principal .hardware .contenidoHardware p {
    display:  inline-block ; 
    font-weight:       400 ;
    padding:        1rem 0 ;
    width:            100% ;
}

main .principal .hardware .contenidoHardware .botonHardware {
    background: #6fe29b ;
    border-radius:   1rem ;
    margin:          1rem ;
    padding:    1rem 2rem ;
    display: inline-block ;
}

main .principal .hardware .contenidoHardware .botonHardware a {
    color:#ffffff ;
}

footer .barraFooter {
    background:   #000000 ;
    display:           flex ;
    flex-wrap:         wrap ;
    justify-content: center ;
}

footer .barraFooter .contenidoPie {
    background:            inherit ;
    display:                  flex ;
    flex-wrap:                wrap ;
    flex-basis:               100% ;
    justify-content: space-between ;
}

footer .barraFooter .contenidoPie .bloquePie {
    background:           inherit ;
    flex-basis: calc(100% - 1rem) ;
    padding:                 1rem ;
}

footer .barraFooter .contenidoPie .bloquePie h4 {
    color:   #ffffff ;
    font-size: 1.25rem ;
}

footer .barraFooter .contenidoPie .bloquePie a {
    color:   #ffffff ;
    display:     block ;
    font-size:    1rem ;
    padding: 0.25rem 0 ;
}

footer .barraFooter .contenidoPie .bloquePie a:hover {
    font-weight: bolder ;
}

footer .barraFooter .copyRight {
    background: inherit ;
    flex-basis:    100% ;
    padding:       1rem ;
}

footer .barraFooter .copyRight p {
    color:   #ffffff ;
    font-size:    1rem ;
    text-align: center ;
}

/* Nosotros */

main .nosotros {
    background: inherit ;
}

main .nosotros .barra-nosotros {
    align-items:                    center ;
    background:                    inherit ;
    border-bottom: 0.25rem solid #000000 ;
    display:                       initial ;
    padding:                          0rem ;
}

main .nosotros .barra-nosotros h2 {
    font-size:  2.5rem ;
    font-weight:   400 ;
    text-align: center ;
}

main .nosotros .barra-nosotros .opcionesNosotros {
    background:           inherit ;
    padding:          1rem 1rem 0 ;
}

main .nosotros .barra-nosotros .opcionesNosotros a {
    color:  #000000 ;
    display:    block ;
    text-align: right ;
}

main .nosotros .barra-nosotros .opcionesNosotros a:hover {
    color: #5c5c5c ;
}

main .nosotros .frase {
    background: inherit ;
    padding:  4rem 2rem ;
    width:         100% ;
}

main .nosotros .frase p {
    font-size:    2rem ;
    text-align: center ;
}

main .nosotros .frase p span {
    display:       block ;
    font-size:    1.5rem ;
    font-weight:     600 ;
    margin:    0.25rem 0 ;
    text-align:    right ;
}









/* Testing */

/*
h1 {
    font-size: 3rem ;
}

p, i {
    font-size: 2rem ;
}

.padre {
    background: aqua ;
}

.uno {
    background: burlywood ;
}

.dos {
    background: coral ;
}

.tres {
    background: darkblue ;
} 
*/