/* 
    Created on : 11/04/2023
    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:              #c4c4c4 ;
    color:                   #000000 ;
    font-family: 'Abhaya Libre', serif ;
    font-size:                  1.5rem ;
    line-height:                   1.5 ;
    margin:                          0 ;
    padding:                         0 ;
}

/* Globales */

img {
    display:    flex ;
    margin: 0 auto 0 ;
    width:      100% ;
}

/* .35 por cada titulo */

h1 {
    font-size: 3.25rem ;
}

h2 {
    font-size: 2.9rem ;
}

h3 {
    font-size: 2.55rem ;
}

h4 {
    font-size: 2.2rem ;
}

h5 {
    font-size: 1.85rem ;
}

h6 {
    font-size: 1.5rem ;
}

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

p, li, label, i {
    font-size: 1.5rem ;
}

input {
    border: 0.25rem solid #777777 ;
}

input:focus, input.form-control:focus {
    outline:        none !important ;
    outline-width:     0 !important ;
    border: 0.25rem #000000 solid ;
    box-shadow:                none ;
    -moz-box-shadow:           none ;
    -webkit-box-shadow:        none ;
}

/* Tamaño a dos columnas, 95% y 50% */
.c-100 {
    background: inherit ;
    width:         100% ;
}

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

.c-80 {
    background: inherit ;
    margin:    0 auto 0 ;
    width:          90% ;
}

.c-70 {
    background: inherit ;
    margin:    0 auto 0 ;
    width:          90% ;
}

.c-60 {
    background: inherit ;
    margin:    0 auto 0 ;
    width:          90% ;
}

.c-50 {
    background: inherit ;
    margin:    0 auto 0 ;
    width:          90% ;
}

.c-40 {
    background: inherit ;
    margin:    0 auto 0 ;
    width:          90% ;
}

.c-30 {
    background: inherit ;
    margin:    0 auto 0 ;
    width:          90% ;
}

.c-20 {
    background: inherit ;
    margin:    0 auto 0 ;
    width:          90% ;
}

.c-10 {
    background: inherit ;
    margin:    0 auto 0 ;
    width:          50% ;
}

.c-10-especial {
    background: inherit ;
    margin:    0 auto 0 ;
    width:          10% ;
}

/* Formulario */

.formulario {
    background: inherit ;
}

.formulario form.formGral {
    background: inherit ;
}

.formulario .formGral .campo {
    background:     inherit ;
    display:           flex ;
    flex-wrap:         wrap ;
    justify-content: center ;
    padding:         1rem 0 ;
}

.formulario .formGral .campo label {
    background: inherit ;
    padding:     1rem 0 ;
    text-align:  center ;
}

.formulario .formGral .campo .contenedorInput {
    align-items:             center ;
    background:             inherit ;
    border: 0.25rem solid #ccdddd ;
    border-radius:          0.75rem ;
    display:                   flex ;
    flex-wrap:                 wrap ;
    padding:                   1rem ;
}

.formulario .formGral .campo .contenedorInput input {
    background:          inherit ;
    border: 0rem solid #ccdddd ; 
    color:             #67686e ;
    font-size:            1.5rem ;
}

.formulario .formGral .campo .contenedorInput i {
    background: inherit ;
    color:    #67686e ;
    font-size:   1.5rem ;
    text-align:   right ;
}

.formulario .formGral .campo .boton {
    background-color:                  #437eff ;
    color:                             #ffffff ;
    border:                                 none ;
    display:                               block ;
    padding:                           1rem 3rem ;
    text-transform:                    uppercase ;
    text-align:                           center ;
    transition: background-color .5s ease-in-out ;
}

.formulario .formGral .campo .boton:hover {
    cursor:             pointer ;
    background-color: #122142 ;
}

/* Login */

main.login {
    align-items:     center ;
    background:   #e7ecf1 ;
    display:           flex ;
    justify-content: center ;
    height:           100vh ;
}

main.login .contenedorLogin {
    background: #ffffff ;
    padding:    2rem 1rem ;
}

main.login .contenedorLogin .logo {
    background: inherit ;
    margin:    0 auto 0 ;
}

main.login .contenedorLogin .titulo {
    background: inherit ;
    text-align:  center ;
    padding:     2rem 0 ;
}

main.login .contenedorLogin .titulo h4 {
    font-weight: 300 ;
}

/* Encabezado */

header.encabezado {
    background: inherit ;
}

header.encabezado .barraMenu {
    background:         #0c6774  ;
    display:                  flex ;
    justify-content: space-between ;
}

header.encabezado .barraMenu a i,
header.encabezado .barraMenu i {
    background: #1acde6 ;
    color:      #0c6774 ;
    font-size:       2rem ;
    padding:         2rem ; 
}

header.encabezado .opcionesMenu {
    animation: animacionderecha 1s ;
    background:          #0c6774 ;
    display:                  none ;
    flex-wrap:                wrap ;
    top:                         0 ;
    right:                       0 ;
    position:             absolute ;
    width:                     75% ;
}

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

header.encabezado .opcionesMenu .barra {
    background:     #1acde6 ;
    display:             flex ;
    justify-content: flex-end ;
}

header.encabezado .opcionesMenu .barra i {
    background:   inherit ;
    color:      #0c6774 ;
    font-size:       2rem ;
    padding:         2rem ; 
}

header.encabezado .opcionesMenu ul {
    background:   inherit ;
    list-style-type: none ;
}

header.encabezado .opcionesMenu ul li {
    background: inherit ;
    width:         100% ;
}

header.encabezado .opcionesMenu ul li a {
    background: inherit ;
    color:    #1acde6 ;
    display:      block ;
    padding:       1rem ;
}

header.encabezado .opcionesMenu ul li a:hover {
    background: #1acde6 ;
    color:      #0c6774 ;
}

/* Principal CV */

main.principal-cv {
    background: #ffffff ;
}

main.principal-cv .fecha {
    background:   #8bc501 ;
    display:           flex ;
    justify-content: center ;
}

main.principal-cv .fecha p {
    color:   #ffffff ;
    font-size:    1rem ;
    padding: 1rem 0rem ;
}

main.principal-cv .datos-personales {
    background: inherit ;
    display:       flex ;
    flex-wrap:     wrap ;
    padding:     1rem 0 ;
}

main.principal-cv .datos-personales .datos {
    background: inherit ;
}

main.principal-cv .datos-personales .datos .datos-1 {
    background: inherit ;
}

main.principal-cv .datos-personales .datos .datos-1 h1 {
    background: inherit ;
    color:    #8bc501 ;
    font-size:   2.5rem ;
    font-weight:    800 ;
    text-align:  center ;
}

main.principal-cv .datos-personales .datos .datos-1 h1 span {
    background: inherit ;
    color:    #000000 ;
}

main.principal-cv .datos-personales .datos .datos-1 p {
    background:   inherit ;
    color:      #8bc501 ;
    margin:   -1rem 0 0 0 ;
    font-size:       1rem ;
    text-align:    center ;
}

main.principal-cv .datos-personales .datos .datos-1 p span {
    background: inherit ;
    color:    #000000 ;
}

main.principal-cv .datos-personales .datos .datos-2 {
    background: inherit ;
}

main.principal-cv .datos-personales .datos .datos-2 .titulo {
    background: inherit ;
    margin:         0 0 ;
}

main.principal-cv .datos-personales .datos .datos-2 .titulo h2 {
    background: inherit ;
    color:    #8bc501 ;
    font-size:  1.75rem ;
    font-weight:    600 ;
}

main.principal-cv .datos-personales .datos .datos-2 .fecha-nacimiento {
    background: inherit ;
    margin:         0 0 ;
}

main.principal-cv .datos-personales .datos .datos-2 .nacionalidad {
    background: inherit ;
    margin:         0 0 ;
}

main.principal-cv .datos-personales .datos .datos-2 .domicilio {
    background: inherit ;
    margin:         0 0 ;
}

main.principal-cv .datos-personales .datos .datos-2 .fecha-nacimiento h3,
main.principal-cv .datos-personales .datos .datos-2 .nacionalidad h3,
main.principal-cv .datos-personales .datos .datos-2 .domicilio h3 {
    background: inherit ;
    color:    #8bc501 ;
    font-size:   1.5rem ;
    font-weight:    400 ;
}

main.principal-cv .datos-personales .datos .datos-2 .fecha-nacimiento p,
main.principal-cv .datos-personales .datos .datos-2 .nacionalidad p,
main.principal-cv .datos-personales .datos .datos-2 .domicilio p {
    background: inherit ;
    color:    #000000 ;
    font-weight:    600 ;
}

main.principal-cv .datos-personales .redes {
    background: inherit ;
    display:       flex ;
    flex-wrap:     wrap ;
}

main.principal-cv .datos-personales .redes .red {
    background:                    inherit ;
    border-bottom: 0.5rem double #8bc501 ;
    padding:                     0.75rem 0 ;
}

main.principal-cv .datos-personales .redes .red a {
    align-items: center ;
    background: inherit ;
    
    display:       flex ;
}

main.principal-cv .datos-personales .redes .red a i {
    background: inherit ;
    color:    #8bc501 ;
    font-size:     2rem ;
}

main.principal-cv .datos-personales .redes .red a p {
    background: inherit ;
    color:    #000000 ;
    padding: 0 0 0 1rem ;
}

/* Central */

main.central {
    background: #ffffff ;
}

main.central .habilidades {
    background: inherit ;
    
}

main.central .habilidades .encabezado-habilidades {
    background:                 inherit ;
    border-bottom: 1.5rem solid #8bc501 ;
}

main.central .habilidades .encabezado-habilidades .imagen-habilidades {
    background: inherit ;
}

main.central .habilidades .encabezado-habilidades .imagen-habilidades .img_hbldds {
    background: inherit ;
    width:          50% ;
}

main.central .habilidades .encabezado-habilidades .titulo-habilidades {
    background: inherit ;
}

main.central .habilidades .encabezado-habilidades .titulo-habilidades h2 {
    background: inherit ;
    font-size:   1.2rem ;
    text-align:  center ;
    padding-top:   1rem ;
}

main.central .habilidades .contenido-habilidades {
    background: inherit ;
    padding:     2rem 0 ;
}

main.central .habilidades .contenido-habilidades ul {
    background: inherit ;
    list-style:    none ;
}

main.central .habilidades .contenido-habilidades ul li {
    align-items: center ;
    background: inherit ;
    display:       flex ; 
    padding:  0.25rem 0 ;
}

main.central .habilidades .contenido-habilidades ul li i {
    background: inherit ;
    color:    #8bc501 ;
    font-weight: bolder ;
    padding:  0 0.75rem ;
}

main.central .experiencia {
    background: inherit ;
}




/*

{
    background: ;
}

*/


/*

h1 {
    font-size: 3.25rem ;
}

h2 {
    font-size: 2.9rem ;
}

h3 {
    font-size: 2.55rem ;
}

h4 {
    font-size: 2.2rem ;
}

h5 {
    font-size: 1.85rem ;
}

h6 {
    font-size: 1.5rem ;
}

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

p, li, label, i {
    font-size: 1.5rem ;
}

*/




















/* Testing */

/*
c-100
c-75
c-70
c-50
c-30
c-25
c-90
c-80
c-45
c-20
c-15
c-5

h1 {
    font-size: 3rem ;
}

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

.padre {
    background: aqua ;
}

.uno {
    background: burlywood ;
}

.dos {
    background: coral ;
}

.tres {
    background: darkblue ;
} 
*/