@charset "UTF-8";
/*RECETEO DE ESTILO*/
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&family=Source+Sans+Pro:wght@300;400;700&display=swap");
* {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
  box-sizing: border-box; }

/*PRIMERO SIEMPRE VARIABLES*/
/*font-family: 'Oswald', sans-serif;
font-family: 'Source Sans Pro', sans-serif;*/
/*DECLARO LA TIPOGRAFIA Y TAMAÑO PARA TODOS LOS P*/
p {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 17px; }

/*Extend creado para el formulario de contacto*/
.mainContacto .formMargen .form-control {
  border: 1px solid #EFD40A; }
  .mainContacto .formMargen .form-control:focus {
    border-color: red;
    box-shadow: 0 0 0 0.25rem rgba(255, 6, 6, 0.411);
    color: red; }

/*mixin creado para el formulario de contacto*/
/*ABAJO SECCIONES*/
/*----------HEADER----------------*/
/*estilos de la barra de navegacion*/
.bg-white {
  box-shadow: 0px 0px 30px #00000054; }
  .bg-white .navbar-brand img {
    width: 50vh;
    margin-left: 15px; }
  .bg-white div .navegacion {
    justify-content: flex-end;
    margin-right: 6vh; }
    .bg-white div .navegacion a {
      letter-spacing: 2px;
      text-decoration: none;
      color: black;
      font-size: 17px;
      position: relative; }
      .bg-white div .navegacion a:after {
        /*creacion de la linea*/
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 100%;
        background: red;
        /*animacion de derecha a izquierda*/
        transform-origin: right;
        transform: scaleX(0);
        transition: transform 0.3s ease-in-out; }
      .bg-white div .navegacion a:hover:after {
        transform-origin: left;
        transform: scaleX(1); }
    .bg-white div .navegacion .nav-item {
      padding: 15px; }
      .bg-white div .navegacion .nav-item .nav-link {
        color: #000000; }
        .bg-white div .navegacion .nav-item .nav-link:hover {
          color: #f32222; }
      .bg-white div .navegacion .nav-item .active {
        color: red; }

@media only screen and (max-width: 780px) {
  /*Logo del nav*/
  .bg-white .navbar-brand img {
    width: 29vh; } }

@media only screen and (max-width: 425px) {
  /*Logo del nav*/
  .bg-white .navbar-brand img {
    width: 27vh; } }

@media only screen and (max-width: 281px) {
  /*Logo del nav*/
  .bg-white .navbar-brand img {
    width: 25vh; } }

/*--------------INDEX-----------------*/
/*estilo del boton de index.html de VER MAS*/
.btn-outline-danger {
  letter-spacing: 2px; }
  .btn-outline-danger:hover {
    border-radius: 6px;
    background-image: linear-gradient(to right, #ac0808 0%, #f10000 58%);
    transition: all .25s;
    width: 200px; }

/*----------------------------BIOGRAFIA------------------------*/
/*------estilos de biografia.html-----------*/
.biografia {
  padding-top: 8vh;
  padding-bottom: 8vh;
  background-color: #EFD40A; }

/* --SECCION CRONOLOGIA--*/
/*LINEA DE TIEMPO*/
.main-timeline:after {
  content: '';
  display: block;
  clear: both; }

.timeline {
  /*Edicion de la linea negra*/
  width: calc(50% + 58px);
  border-top: 2px solid #000000;
  float: left;
  position: relative;
  z-index: 1; }
  .timeline:before {
    /*Edicion del punto negro de la cronologia*/
    content: "";
    background: #000000;
    width: 10px;
    height: 10px;
    border-radius: 50px;
    position: absolute;
    top: -5px;
    right: 0; }
  .timeline .timeline-content {
    /*Edicion del contenido de la cronologia*/
    color: #000000;
    text-align: center;
    padding: 15px 80px 15px 10px;
    display: block;
    position: relative; }
    .timeline .timeline-content:before {
      /*Edicion de la linea de colores*/
      content: "";
      background: #EFD40A;
      width: 15px;
      height: 100%;
      position: absolute;
      top: 0;
      right: 50px; }
    .timeline .timeline-content .timeline-year {
      /*Edicion del AÑO en la cronologia*/
      font-size: 35px;
      line-height: 35px;
      font-weight: 700;
      transform: translateY(-50%) rotate(90deg);
      position: absolute;
      top: 50%;
      right: -15px; }

/*Posicionamiento del lado derecho*/
.timeline:nth-child(even) {
  float: right; }

.timeline:nth-child(even):before {
  right: auto;
  left: 0; }

/*Padding del titulo parrafo del lado derecho*/
.timeline:nth-child(even) .timeline-content {
  padding: 15px 10px 15px 80px; }

/*ubicacion de la line de colores del lado derecho*/
.timeline:nth-child(even) .timeline-content:before {
  right: auto;
  left: 51px; }

/*Posicionamiento del año*/
.timeline:nth-child(even) .timeline-year {
  right: auto;
  left: -15px; }

/*Edicion del colores de la linea despues del amarillo*/
.timeline:nth-child(4n+2) .timeline-content:before {
  background: red; }

.timeline:nth-child(4n+3) .timeline-content:before {
  background: #024A86; }

.timeline:nth-child(4n+4) .timeline-content:before {
  background: #000000; }

/*-------------------RESPONSIVE---------------------------*/
@media screen and (max-width: 769px) {
  .timeline {
    width: 100%; } }

/*---------------------------PINTURAS GALERIA--------------------------*/
/*Hecho con GRID de las pinturas con el efecto overlay*/
h1 {
  letter-spacing: 2px; }

.containerGrid {
  display: grid;
  grid-template-columns: repeat(4, 0.2fr);
  padding: 4vh;
  gap: 17px;
  width: 100%;
  justify-items: center;
  justify-content: space-evenly; }
  .containerGrid img {
    width: 100%;
    height: 100%;
    transition: all 500ms ease-out; }
  .containerGrid .containerImagen {
    position: relative;
    width: 290px;
    height: 320px;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
    cursor: pointer; }
    .containerGrid .containerImagen:hover > img {
      transform: scale(1.3); }
    .containerGrid .containerImagen:hover > .overlay {
      opacity: 1;
      visibility: visible; }
    .containerGrid .containerImagen:hover > .overlay h3 {
      margin-top: 80px;
      margin-bottom: 15px; }
    .containerGrid .containerImagen .overlay {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(39, 43, 44, 0.534);
      transition: all 500ms ease-out;
      opacity: 0;
      visibility: hidden;
      text-align: center; }
      .containerGrid .containerImagen .overlay p {
        color: white; }
      .containerGrid .containerImagen .overlay h3 {
        color: white;
        transition: all 500ms ease-out; }

/*Edicion de broadwayBoogie*/
.broadwayBoogie {
  background-image: url(../img/pinturas/broadwayBoogieWoogie.jpg);
  color: transparent;
  height: 6vh; }

/*-------------------RESPONSIVE---------------------------*/
@media screen and (max-width: 1025px) {
  /*responsive de la galeria de pinturas*/
  .containerGrid {
    display: grid;
    grid-template-columns: repeat(3, 0.2fr);
    margin: 0 0 8vh 0;
    padding: 0;
    justify-content: center; }
    .containerGrid .containerImagen {
      width: 300px;
      height: 400px; } }

@media only screen and (max-width: 913px) {
  /*responsive de la galeria de pinturas*/
  .containerGrid {
    display: grid;
    grid-template-columns: repeat(2, 0.2fr);
    justify-content: center;
    padding: 0;
    margin: 0 0 8vh 0;
    gap: 5vh; }
    .containerGrid .containerImagen {
      width: 250px;
      height: 300px; } }

@media only screen and (max-width: 725px) {
  /*responsive de la galeria de pinturas*/
  .containerGrid {
    display: grid;
    grid-template-columns: repeat(1, 0.2fr);
    justify-content: center;
    padding: 0;
    margin: 0 0 8vh 0;
    gap: 5vh; }
    .containerGrid .containerImagen {
      width: 250px;
      height: 300px; } }

/*---------------------DE STIJL--------------------*/
/*Estilos de destijl.html las CARDS*/
.row {
  justify-content: space-around; }
  .row .card {
    border: none;
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.349); }
  .row .colorCartaRed {
    background-color: #f32222; }
  .row .colorCartaBlue {
    background-color: #024b86; }

/*Responsive destijl.html la primera seccion USANDO FLEX*/
@media screen and (max-width: 1024px) {
  .deStijl {
    display: flex;
    flex-direction: column; } }

/*---------------------CONTACTO-------------------*/
/*Estilos de contacto.html*/
.mainContacto {
  background-image: url(../img/contacto/fondoContacto.jpg);
  /*margenes del formulario*/ }
  .mainContacto .formMargen {
    padding-top: 10vh;
    padding-bottom: 8vh;
    /*Espaciado del titulo del Form*/
    /*Color de fondo del formulario*/
    /*Edicion del boton de enviar de contacto*/
    /*Edicion del label de contacto*/
    /*Edicion del borde y del focus en el formulario*/ }
    .mainContacto .formMargen .fst-italic {
      letter-spacing: 2px; }
    .mainContacto .formMargen .fondoForm {
      background-color: white; }
    .mainContacto .formMargen .btn-primary {
      color: black;
      font-size: 1.2rem;
      letter-spacing: 2px;
      background-color: #EFD40A;
      border: 2px solid #EFD40A;
      border-radius: 25px; }
      .mainContacto .formMargen .btn-primary:hover {
        color: #024A86;
        border: 2px solid #024A86;
        background-color: white; }
    .mainContacto .formMargen .form-label {
      font-size: 19px;
      letter-spacing: 1px; }

/*-------------------FOOTER---------------------------*/
.footer-color {
  box-shadow: 30px 20px 20px 20px #00000054;
  /*Edicion de los botones de las redes sociales*/ }
  .footer-color .btGmail:hover {
    background-color: red;
    border-color: red; }
    .footer-color .btGmail:hover:focus {
      box-shadow: 0 0 0 0.25rem rgba(255, 6, 6, 0.411); }
  .footer-color .btLinkedin:hover {
    background-color: #024A86;
    border-color: #024A86; }
    .footer-color .btLinkedin:hover:focus {
      box-shadow: 0 0 0 0.25rem rgba(27, 69, 253, 0.411); }
  .footer-color .btGithub:hover {
    background-color: #EFD40A;
    border-color: #EFD40A; }
    .footer-color .btGithub:hover:focus {
      box-shadow: 0 0 0 0.25rem rgba(235, 231, 4, 0.616); }