* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: 'Raleway', sans-serif;
  box-sizing: border-box; }

body {
  background-image: url(../img/fondo.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: center;
  min-height: 100vh; }

#layout {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 350px 650px 350px;
  grid-template-areas: "header"
 "main"
 "footer"; }

@media only screen and (min-width: 816px) {
  #layout {
    grid-template-rows: 100px 900px 350px; }
  header {
    border-bottom: none; }
  div.container {
    flex-direction: row; }
  .logo {
    margin-bottom: 0px; } }

#layout2 {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 300px 1400px 200px;
  grid-template-areas: "header"
 "main"
 "footer"; }

@media only screen and (min-width: 816px) {
  #layout2 {
    grid-template-rows: 50px 1000px 200px; }
  .container1 {
    flex-wrap: nowrap; } }

#layout3 {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 350px 2000px 200px;
  grid-template-areas: "header"
 "main"
 "footer"; }

@media only screen and (min-width: 816px) {
  #layout3 {
    grid-template-rows: 100px 2000px 200px; } }

#container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 150px 300px;
  grid-gap: 15px;
  grid-auto-flow: dense; }

@media only screen and (max-width: 500px) {
  #container {
    grid-template-columns: repeat(4, 1fr); }
  .s-4 .gallery__item .image img {
    object-position: 90% 70%; } }

@media only screen and (max-width: 990px) {
  #container {
    margin: 10px;
    padding: 60px 20px 30px 20px;
    max-height: 1700px; }
  .s-2, .s-3 {
    grid-column: span 4;
    grid-row: span 1; } }

@media only screen and (min-width: 993px) {
  #container {
    justify-self: center;
    padding: 80px;
    margin: 100px; }
  .s-3 {
    grid-column: span 3;
    grid-row: span 2; }
  .s-2 {
    grid-column: span 1;
    grid-row: span 2; } }

#layout4 {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 350px 900px 200px;
  grid-template-areas: "header"
 "main"
 "footer"; }

@media only screen and (min-width: 816px) {
  #layout4 {
    grid-template-rows: 100px 1000px 200px; }
  .logo2 {
    padding-top: 20px;
    align-self: center; } }

@media only screen and (min-width: 775px) {
  .container--redes {
    margin: 40px 80px;
    width: 1200px; } }

#layout5 {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 300px 800px 200px;
  grid-template-areas: "header"
 "main"
 "footer"; }

@media only screen and (min-width: 816px) {
  #layout5 {
    grid-template-rows: 100px 900px 200px; } }

@media only screen and (max-width: 584) {
  .container_form {
    max-width: 100%; }
  form .user-details .input-box {
    margin-bottom: 15px;
    width: 100%; }
  .container_form form .user-details {
    max-height: 300px; } }

header {
  grid-area: header; }

A:link {
  text-decoration: none; }

A:visited {
  color: black;
  text-decoration: none; }

.nav-item {
  margin: 0 10px; }
  .nav-item .nav-link:hover {
    transform: scale(1.1); }

/*footer*/
footer {
  grid-area: footer;
  position: relative;
  background-color: black;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 2rem 8%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 350px; }
  footer pre {
    display: flex;
    flex-direction: column;
    text-align: center; }
  footer .logo_footer {
    height: 150px;
    margin-top: 3rem; }
  footer .contacto_footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    color: white; }
  footer small {
    color: white;
    text-align: center;
    margin-bottom: 2rem; }

/*index*/
.index_main {
  display: flex;
  grid-area: main;
  justify-content: center;
  align-items: center;
  padding: 20px; }
  .index_main .logo {
    grid-area: main;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.6)); }

/*Sobre nosotros*/
.container1 {
  grid-area: main;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%; }
  .container1 .card {
    transition: transform .3s;
    width: 300px;
    height: 500px;
    border-radius: 30px 5px;
    overflow: hidden;
    margin: 20px 50px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.75);
    box-shadow: 0px 0px 8px 2px white;
    border: none; }
    .container1 .card .card-body {
      display: flex;
      align-items: center;
      justify-content: center;
      border-top: solid black 1px; }
    .container1 .card p {
      padding: 0 1rem;
      font-size: 16px;
      font-weight: 700; }
    .container1 .card:hover {
      transform: scale(1.2); }
  .container1 .card2 {
    transition: transform .3s;
    width: 300px;
    height: 450px; }
    .container1 .card2:hover {
      transform: scale(1.2); }
  .container1 #card1 img {
    width: 250px;
    height: 220px;
    align-self: center;
    margin-top: 15px;
    border-radius: 30px 5px;
    margin-bottom: 20px; }
  .container1 #card2 img {
    width: 250px;
    height: 220px;
    align-self: center;
    margin-top: 15px;
    border-radius: 30px 5px;
    margin-bottom: 20px; }

/*trabajos*/
#container {
  grid-area: main;
  background-color: rgba(255, 255, 255, 0.75); }
  #container .gallery__container .gallery__item {
    width: 100%;
    height: 100%;
    position: relative;
    box-shadow: 0px 0px 5px 3px black; }
    #container .gallery__container .gallery__item .image {
      width: 100%;
      height: 100%;
      overflow: hidden; }
      #container .gallery__container .gallery__item .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        cursor: pointer;
        transition: .5s ease-in-out; }
    #container .gallery__container .gallery__item:hover .image img {
      transform: scale(1.1); }
  #container .s-1 {
    grid-column: span 2;
    grid-row: span 2; }
    #container .s-1 .gallery__item .image img {
      object-position: 40% 50%; }
  #container .s-2 .gallery__item .image img {
    object-position: 50% 2%; }
  #container .s-3 .gallery__item .image img {
    object-position: 50% 35%; }
  #container .s-4 {
    grid-column: span 6;
    grid-row: span 2; }
    #container .s-4 .gallery__item .image img {
      object-position: 80% 50%; }
  #container .s-5 {
    grid-column: span 6;
    grid-row: span 1; }
    #container .s-5 .gallery__item .image img {
      object-position: 50% 60%; }
  #container .s-6 {
    grid-column: span 2;
    grid-row: span 2; }
  #container .s-7 {
    grid-column: span 4;
    grid-row: span 2; }
    #container .s-7 .gallery__item .image img {
      object-position: 50% 50%; }

/*REDES*/
main {
  display: flex;
  justify-content: center;
  align-items: center; }
  main .logo2 {
    grid-area: logo;
    display: flex;
    justify-self: center;
    align-self: center;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.6));
    margin: 20px 5px; }
    main .logo2 .logo_redes {
      position: relative;
      max-width: 100%; }
  main .container--redes {
    display: flex;
    grid-area: main;
    flex-direction: column;
    padding: 40px;
    background-color: rgba(255, 255, 255, 0.75);
    margin: 0px 15px 50px 15px; }
    main .container--redes .redes {
      font-size: 180%;
      font-weight: 900;
      align-self: center;
      justify-self: center;
      text-align: center;
      color: black; }
    main .container--redes .redesLink {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin: 20px 0 20px 0; }
      main .container--redes .redesLink ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0; }
        main .container--redes .redesLink ul li {
          display: flex;
          width: 75px;
          height: 75px;
          line-height: 75px;
          margin: 10px 15px;
          cursor: pointer;
          border-radius: 100%;
          border: 5px solid #020202;
          float: left;
          transition: all 0.5s ease;
          justify-content: center;
          align-items: center; }
          main .container--redes .redesLink ul li .bi-facebook {
            color: black;
            transition: all 0.5s ease;
            font-size: 35px; }
          main .container--redes .redesLink ul li .bi-instagram {
            font-size: 35px;
            color: black; }
          main .container--redes .redesLink ul li .bi-whatsapp {
            font-size: 35px;
            color: black; }
          main .container--redes .redesLink ul li:hover.facebook {
            border: 5px solid #3b5998;
            box-shadow: 0 0 15px #3b5998;
            transition: all 0.5s ease; }
          main .container--redes .redesLink ul li:hover .bi-facebook {
            color: #3b5998;
            text-shadow: 0 0 15px #3b5998;
            transition: all 0.5s ease; }
          main .container--redes .redesLink ul li:hover.instagram {
            border: 5px solid #bc2a8d;
            box-shadow: 0 0 15px #bc2a8d;
            transition: all 0.5s ease; }
          main .container--redes .redesLink ul li:hover .bi-instagram {
            color: #bc2a8d;
            text-shadow: 0 0 15px #bc2a8d;
            transition: all 0.5s ease; }
          main .container--redes .redesLink ul li:hover.whatsapp {
            border: 5px solid #00bb2d;
            box-shadow: 0 0 15px #00bb2d;
            transition: all 0.5s ease; }
          main .container--redes .redesLink ul li:hover .bi-whatsapp {
            color: #00bb2d;
            text-shadow: 0 0 15px #00bb2d;
            transition: all 0.5s ease; }