/*CSS Reset / Normalize*/

:root{
   --color-de-fondo: #f5f5f5;
   --color-principal: #5779dc;
   --link-menu: #ffffff;
   --link-title__network__item: #000000;
}

body {
    box-sizing: border-box;
    background-color: var(--color-de-fondo) ;
    font-family: 'Signika Negative', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* SPIN*/
.hidden-spn{
    overflow: hidden;
}

.centrado-spinner{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #000000;
}

.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}

.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #fff;
}

.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}

.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* FIN SPIN*/
ol, ul,li {
    list-style: none;
}

a{
    text-decoration: none;
    color: #000;
}

h1{
    font-size: 3rem;
    text-align: center;
}

h3{
    text-align: center;
}

/*BEM*/

/* Boton flotante  */
.btn__flotante {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1;
    font-size: 50px;
    transition: 0.5s all ease;
    opacity: 0.5;
}

.btn__flotante:hover{
    color: #000000;
    font-size: 55px;
    opacity: 1;
}


section.menu__accesibilidad{
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: flex-end;
    background-color: var(--color-principal);
}

section.menu__accesibilidad ul.menu__accesibilidad__list{
    display: flex;
}


/*Section Menu*/
section.menu{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: var(--color-principal);
}

/*Color al menu lateral en movil*/
section.menu nav.navbar div.container-fluid a.navbar-brand, 
section.menu nav.navbar div.container-fluid div.offcanvas {
    background-color: var(--color-principal);
}

section.menu nav.navbar div.container-fluid a.navbar-brand, 
section.menu nav.navbar div.container-fluid div.offcanvas div.offcanvas-body ul.navbar-nav li.nav-item a.nav-link{
    color: #ffffff;
    transition: 1s all ease;
    font-size: 20px;
}

section.menu nav.navbar div.container-fluid a.navbar-brand:hover, 
section.menu nav.navbar div.container-fluid div.offcanvas div.offcanvas-body ul.navbar-nav li.nav-item a.nav-link:hover{
    color: #000000;
}

section.menu nav.navbar div.offcanvas-header a h5 img{
    width: 50px;
    height: auto;
}

@media screen and (max-width: 767px){
    .navbar-brand{
        display: none;
    }
}

section.menu .navbar .navbar-brand img{
    width: 50px;
    height: auto;
}

section.menu .navbar{
    display: flex;
    justify-content: space-between;
    padding: 2rem;
}

section.menu nav ul.menu__list{
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    width: 750px;
}

section.menu .menu__list__item a{
    color: var(--link-menu);
}

section.menu nav ul.menu__list li:nth-child(6){
    color:  black;
    font-weight: 800;
}


/*Sección Title*/
section.title{
    /*margin: 0 153px; 
    width: 80%;*/
    color: #464646;
}

section.title div.title__div{
    justify-content: space-around;
    align-content: flex-start;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

section.title div.title__container h2{
    font-size: 56px;
    font-weight: 700;
    line-height: 61px;
}

section.title div.title__div div.title__container h1 b:hover{
    color: var(--color-principal);
    cursor: pointer;
}

section.title div.title__div div.title__container p{
    font-size: 25px;
}

section.title div.title__div div.title__container p b:hover{
    color: var(--color-principal);
    cursor: pointer;
}

section.title img.title__profile{
    width: 400px;
    border-radius: 80%;
    border: groove;
    opacity: 0.9;
    transition: 0.5s all ease-in-out;
}

section.title img.title__profile:hover{
    opacity: 1;
    cursor: pointer;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8);
}

section.title div.title__div div.title__container h3{
    font-size: 17px;
    line-height: 23px;
    width: 600px;
    margin-bottom: 30px;
}

section.title div.title__div div.title__container ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 25px;
    /* width: 500px;*/
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

section.title div.title__container a{
    font-size: 22px;
}

section.title div.title__container a:hover{
    color: var(--color-principal);
}

section.title div.title__container img{
    width: 30px;
    height: auto;
}


/*Sección About*/
section.about h3.about__title{
    font-size: 30px;
}

section.about{
    padding: 62px 153px;
    background-color: var(--color-principal);
    color: white; 
}

section.about div.about__container{
    width: 700px;
}

/*Sección skills*/
section.skills{
    margin: 64px 0px;
    text-align: center;
}

section.skills h3.skills__title{
    font-size: 32px;
    text-align: center; 
}

section.skills div.skills__line{
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    /*justify-content: space-around;*/
    /*width: 100%;*/
}

section.skills div.skills__box{
  display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding: 16px;
    background-color: #ffffff;
    margin: 5px auto;
    width: 150px;
    height: 160px;
}

/* Hover skills y hobbies */
section.skills div.skills__line div.skills__box:hover,
section.hobbies div.hobbies__box:hover{
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    opacity: 1;
    background: #2900cc;
    background: -moz-linear-gradient(-45deg, #e2a9e5 15%, var(--color-principal) 100%);
    background: -webkit-linear-gradient(-45deg, #e2a9e5 15%, var(--color-principal) 100%);
    background: linear-gradient(50deg, #e2a9e5 15%, var(--color-principal) 100%);
}

section.skills div.skills__box ul{
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 22px;
    line-height: 19px;
}

/*  Alinear iconos y titulos enlaces skills */
section.skills div.skills__box ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
}


/*Section Hobbies*/
section.hobbies{
    margin: 64px 0px;
    text-align: center;
}

section.hobbies h3.hobbies__title{
    font-size: 30px;
    text-align: center;
}

section.hobbies div.hobbies__line{
    /*display: flex;*/
    /* flex-wrap: wrap; */
    /*justify-content: space-around;*/
}

section.hobbies div.hobbies__box{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: stretch;
   padding: 5px;
   background-color: #ffffff;
   margin: 0 auto;
   width: 150px;
   height: 160px;
}

section.hobbies div.hobbies__line div.hobbies__box ul{
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 22px;
    line-height: 19px;
}


/* Experiencia Académica*/
section.academic{
    padding: 64px 0;
    background-color: #EAF2FD;
}

section.academic h3.academic__title{
    font-size: 30px;
    text-align: center;
}

section.academic div.academic__courses{
    display: flex;
    justify-content: center;
}

section.academic div.academic__courses__box{
    /*width: 26.6rem;
    margin: 0 1rem;*/
    text-align: center;
    align-self: self-end;
}

section.academic div.academic__courses__box ul{
    /*margin: 32px;*/
    padding: 0;
}

section.academic div.academic__courses__box ul li{
    padding: 0 ;
    /*margin: 32px;*/
}

section.academic div.academic__courses__box ul li.academic__courses__item__img{
    /*padding: 8%;*/
}


/* Experiencia */
section.experience{
    margin: 64px 0px;
}

section.experience h3.experience__section__title{
    font-size: 30px;
    text-align: center;
}

section.experience div.experience__box{
   /*display: flex;
    justify-content: start;
    align-items: flex-start;
    text-align: center; */
    margin-bottom: 60px;
}

section.experience div.experience__box:nth-child(2n+1){
    flex-direction: row-reverse;
}

/*section.experience img.experience__img{
    padding: 10px;
}*/


section.experience div.experience__box div.experience__info{
    vertical-align: middle;
}

section.experience div.experience__box h3.experience__text{
    font-weight: normal;
}

section.experience button.experiencia__botao--repo{
    background-color: #ffffff;
    border: 1px solid #2A7AE4;
    color: #2A7AE4;
    padding: 12px;
    cursor: pointer;
}

section.experience button.experiencia__botao--repo:hover{
    background-color: #2A7AE4;
    border: 1px solid #2A7AE4;
    color: #ffffff;
    padding: 12px;
    cursor: pointer;
}

section.experience button.experience__boton__demo{
    background-color: #2A7AE4;
    border: 1px solid #2A7AE4;
    color: #ffffff;
    padding: 12px;
    cursor: pointer;
}

section.experience button.experience__boton__demo:hover{
    background-color: #ffffff;
    border: 1px solid #2A7AE4;
    color: #2A7AE4;
    padding: 12px;
    cursor: pointer;
}


/*Contacto*/
section.formcontato{
    padding: 62px 153px;
    background-color: #EAF2FD;
    color: #000000;
}

section.formcontato div.formcontato__contacto{
    display: flex;
    margin: 10px;
}

section.formcontato div.formcontato__contacto div.formcontato__text{
    /*padding: 10px;*/
}

section.formcontato div.formcontato__contacto div.formcontato__text h2.formcontato__title{
    font-size: 30px;
}

section.formcontato div.formcontato__contacto div.formcontato__text h3.formcontato__subtext{
    font-size: 15px;
    font-weight: normal;
}

section.formcontato div.formcontato__contacto div.formcontato__text form.formcontato__form{
    display: flex;
    flex-direction: column;
}

section.formcontato div.formcontato__contacto div.formcontato__text form.formcontato__form input.formcontato__input, textarea.formcontato__textarea, button.formcontato__botao{
   /* padding: 10px;
    margin-bottom: 10px!important;*/
    border: none;
}

.form-control{
    margin-bottom: 10px!important;
}

section.formcontato div.formcontato__contacto div.formcontato__text form.formcontato__form button.formcontacto__boton{
    background-color: #2A7AE4;
    border: 1px solid #2A7AE4;
    color: #ffffff;
    padding: 12px;
    cursor: pointer;
    width: 25%;
}

section.formcontato div.formcontato__contacto div.formcontato__text form.formcontato__form button.formcontacto__boton:hover{
    background-color: #ffffff;
    border: 1px solid #2A7AE4;
    color: #2A7AE4;
    padding: 12px;
    cursor: pointer;
}

section.formcontato div.form__msg{
    text-align: center;
    color: #ff0000;
}

section.formcontato div.form__msg__enviado{
    text-align: center;
    color: #00ff00;
}


/* Footeer */
section.footer{
   display: flex;
   justify-content: center;
   padding: 32px;
   background-color: #ffffff;
   color: #000000;
}

section.footer div.footer__rodape p{
   text-align: center;
}



/* @MEDIA Tablet */
@media (max-width: 768px) {


/* Menú */
section.menu{
    padding: 10px;
}

section.menu nav ul.menu__list li.menu__list__item:nth-of-type(-n+5){
    display: none;
}

section.menu nav ul.menu__list{
    width: 80%;
}


/* Title */
section.title{
    margin: 0;
    width: 100%;
}

section.title div.title__div{
    padding: 10px;
    align-items: center;
}

section.title div.title__div img.title__profile{
    height: 120px;
    width: 120px;
}

section.title div.title__div div.title__container h2{
    font-size: 30px;
    margin: 0;
    line-height: 30px;
}

section.title div.title__div div.title__container h3{
    font-size: 15px;
    margin: 0;
    padding: 0;
}


/* Section sobre mi */
section.about {
    padding: 10px 10px;
}

section.about div.about__container p.about__paragraph{
    text-align: justify;
}


/* Skills */
section.skills div.skills__box {
    margin: 10px auto;
    padding: 10px;
    align-items: stretch;
}


/* Hobbies */
section.hobbies div.hobbies__box {
    margin: 10px auto;
    padding: 10px;
    align-items: stretch;
}


/* Formación Académica */
section.academic{
    /*width: 100%;*/
}

section.academic div.academic__courses__box{
    /*width: 90%;*/
}

section.academic  div.academic__courses div.academic__courses__box ul{
    padding: 0;
}

section.academic div.academic__courses__box ul li{
    padding: 0;
    margin: 0;
}


/* Experiencia Profesional */
section.experience{
    /*flex-direction: column;*/
    /*margin: 0;*/
    /*flex-wrap: wrap;*/
}

/*section.experience div.experience__box{
    flex-direction: column;
    flex-wrap: wrap;
    padding: 10px;
}


/*section.experience img.experience__img{
    width: 100%;
    padding: 0;
}*/

section.experience div.experience__info{
    align-items: center;
    padding: 10px;
}

section.experience div.experience__info h2{
    padding: 0;
    margin: 0;
}

section.experience div.experience__info h3{
    padding: 10px 0;
    margin: 0;
}



/* Contacto form */

section.formcontato{
    flex-direction: column;
    padding: 15px 0;
    margin: 0;
}

section.formcontato div.formcontato__contacto div.formcontato__esquerda{
    display: none;
}

section.formcontato div.formcontato__contacto h2.formcontato__title, h3{
    padding: 10px;
    margin: 0;
}

section.formcontato div.formcontato__contacto div.formcontato__text form.formcontato__form input.formcontato__input, textarea.formcontato__textarea, button.formcontato__botao {
    /*padding: 10px;
    margin: 10px;*/
    border: none;
}

section.formcontato div.formcontato__text {
    /*width: 100%;*/
}

/* footer */


}






/*Mobile*/
@media (max-width: 425px) {

/*Menu*/
section.menu{
    flex-direction: column;
    padding: 0;
    text-align: center;
    justify-content: center;
}

section.menu nav{
    display: none;
}


/*Titulo*/
section.title{
    flex-direction: column;
    margin: 0;
    padding: 0;
    width: 100vw;
}

section.title div.title__div{
    flex-direction: column;
    align-items: center;
    text-align: justify;  
}

section.title div.title__div img.title__profile{
   align-items: center;
}

section.title div.title__div div.title__container{
    padding-top: 10px;
}

section.title div.title__div div.title__container h2{
    font-size: 20px;
    line-height: 1;
    width: 90vw;
}

section.title div.title__div div.title__container h3{
    width: 90vw;
}

section.title div.title__div div.title__container ul.title__network{
    width: 90vw;
    text-align: center;
    justify-content: space-between;
    padding-top: 4%;
    padding-left: 12%;
    margin: 0;
}   


/*Sección sobre mi*/
section.about {
    padding: 10px 10px;
}

section.about div.about__container{
    width: 90vw;
    text-align: justify;
    margin: 2%;
}


/*Skills*/
section.skills {
    margin: 0;
    text-align: center;
}

section.skills div.skills__box{
    /*margin: 10px;*/
}


/*Hobbies*/
section.hobbies {
    /* margin: 16px 0px; */
    margin-top: 30px;
}

 section.hobbies div.hobbies__box{
    /*margin: 10px auto;*/
}


 /*Formación Académica*/
section.academic{
    /*width: 100%;*/
}

section.academic div.academic__courses{
    /*flex-direction: column;
    width: 90vw;*/
}

section.academic div.academic__courses__box{
    /*width: 90vw;*/
}

section.academic  div.academic__courses div.academic__courses__box ul{
    padding: 0;
}

section.academic img{
    /*width: 100%;*/
}

section.academic  div.academic__courses div.academic__courses__box ul li.academic__courses__item__img{
    padding: 0;
    margin: 0 auto;
}


/*Experiencia Profesional*/
section.experience{
  /*width: 100%;*/
}

/*section.experience div.experience__box{
    flex-wrap: wrap;
    width: 90%;
    padding: 10px;
    margin: 0 auto;
}*/

section.experience img.experience__img{
    margin: 0 auto;
}

section.experience div.experience__box div.experience__info{
    padding: 10px;
}

section.experience div.experience__box div.experience__info-container{
    padding: 10px;
}


 /*Contacto*/
section.formcontato div.formcontato__contacto {
    margin: 0 auto;
}

section.formcontato div.formcontato__contacto div.formcontato__text {
    /*padding: 0;*/
}

section.formcontato div.formcontato__contacto div.formcontato__text h3.formcontato__subtext {
    text-align: justify;
    font-size: 16px;
}


/*Footer*/

}