@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&family=Yellowtail&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Joan&display=swap");
* {
  padding: 0;
  margin: 0;
  color: #ffffff; }

main {
  background: #012d38;
  margin: 0; }

h1 {
  font-family: Roboto, "Times New Roman", Times, serif;
  font-weight: 900; }

h2 {
  font-family: Roboto, "Times New Roman", Times, serif;
  font-weight: 700; }

h3 {
  font-family: Roboto, "Times New Roman", Times, serif;
  font-weight: bolder;
  font-size: 1.3em; }

h4 {
  font-family: Roboto, "Times New Roman", Times, serif;
  font-weight: bolder;
  margin-top: 45px;
  text-align: center; }

::textarea {
  color: #000000; }

.sidemargins, .customcard__image {
  width: 100%;
  height: 100%; }

.boxshadow {
  box-shadow: 5px 5px 15px 5px #000000; }
  .boxshadow:hover {
    transform: scale(1.2); }

.header {
  font-family: 'Montserrat', sans-serif; }
  .header__logo {
    margin-left: 5%;
    height: 150px; }
  .header__logo2 {
    height: 150px; }
  .header__background {
    background-color: #000000;
    text-align: center; }

.nav-item {
  font-weight: 600; }
  .nav-item:hover {
    transform: scale(1.02);
    background-color: #012d38; }

.footer {
  background-color: #000000;
  font-family: Roboto, "Times New Roman", Times, serif;
  border: 15px solid #000000;
  display: flex;
  justify-content: space-around;
  text-shadow: #6495ED;
  row-gap: 9px; }
  .footer a {
    padding-left: 5px;
    margin-top: 50px;
    color: #ECE5C7; }

.footer__copyright p {
  color: #2c2c2c;
  font-size: 21px; }

.icon {
  height: 30px;
  margin-top: 2px; }

.logo img {
  width: 200px; }

.footer__whatsaap {
  background-color: #005000;
  border: 2px solid #002500;
  height: 36px;
  width: 150px;
  padding-left: 15px; }
  .footer__whatsaap a {
    color: #00d400;
    text-decoration: none;
    font-weight: 800; }

.footer__instagram {
  background-color: #500018;
  border: 2px solid #20000a;
  height: 36px;
  width: 150px;
  padding-left: 15px; }
  .footer__instagram a {
    color: #ff004c;
    text-decoration: none;
    font-weight: 800; }

.footer__facebook {
  background-color: #00003d;
  border: 2px solid #00001a;
  height: 36px;
  width: 150px;
  padding-left: 15px; }
  .footer__facebook a {
    color: #0000e0;
    text-decoration: none;
    font-weight: 800; }

form {
  font-family: 'Montserrat', sans-serif;
  color: #000000;
  width: 50%;
  margin: auto;
  display: flex;
  flex-flow: column;
  padding-bottom: 100px; }
  form button {
    background-color: #4CAF50;
    border: none;
    color: #ECE5C7;
    margin-top: 25px;
    padding: 15px 40px;
    text-align: center;
    display: inline-block;
    font-size: 16px; }

textarea {
  color: #000000; }

.redes {
  display: flex;
  justify-content: space-evenly;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 15px; }
  .redes a {
    color: #ECE5C7;
    text-decoration: none;
    font-weight: 700; }

select {
  color: #000000; }
  select option {
    color: #000000; }

.us {
  text-align: center;
  margin-top: 35px;
  padding-bottom: 45px;
  width: 100%; }
  .us p {
    font-family: 'Montserrat', sans-serif; }
  .us h2 {
    font-family: 'Montserrat', sans-serif;
    padding-top: 30px;
    margin-bottom: 25px;
    text-align: center; }
  .us__photos {
    width: 20%;
    box-shadow: 5px 5px 15px 5px #000000; }
    .us__photos:hover {
      animation-name: hovercards;
      animation-duration: 0.3s;
      transform: scale(1.1);
      z-index: 3; }

.nosotros {
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  padding: 30px; }

.nosotros__section1 {
  width: 90%;
  text-align: center;
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 20px; }
  .nosotros__section1 img {
    width: 80%;
    border-radius: 4px;
    box-shadow: 5px 5px 15px 5px #000000; }

.mapouter {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-bottom: 45px; }
  .mapouter iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.video1 {
  height: 640px;
  box-shadow: 5px 5px 15px 5px #000000;
  margin-bottom: 25px; }

.roundborder, .footer__whatsaap, .footer__instagram, .footer__facebook, .customcards, .customcard, .customcard__footer, .customcard__image, .gallery__image {
  border-radius: 8px; }

.customcards {
  padding: 45px 15px;
  margin: 0px 0px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-gap: 30px;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  background: rgba(0, 0, 0, 0.3); }

.customcard {
  display: grid;
  grid-template-rows: max-content 200px 1fr;
  box-shadow: 5px 7px 27px 5px #000000;
  margin: 10px; }
  .customcard__header h5 {
    font-size: 19px;
    font-family: Roboto, "Times New Roman", Times, serif;
    font-weight: 700;
    padding-top: 4px; }

.customcard__image {
  object-fit: cover; }

.status-sold {
  background-color: #9b0000; }

.status-stock {
  background-color: #009b00; }

.catalogoLink {
  font-family: Roboto, "Times New Roman", Times, serif;
  font-weight: bolder;
  display: inline-block;
  background-color: #005a1e;
  color: #ffffff;
  width: 100%;
  font-weight: 800;
  font-size: 1.5em;
  border-radius: 4px;
  text-align: center;
  line-height: 28px;
  padding: 0.4em;
  text-decoration: none;
  margin-top: 19px;
  box-shadow: 5px 7px 27px 5px #000000; }
  .catalogoLink:hover {
    background-color: #00ff40;
    color: #ffffff;
    font-size: 1.6em; }

* {
  box-sizing: border-box; }

.section {
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  background-color: #B1BCE6; }
  .section h2 {
    padding-top: 35px;
    font-weight: bold; }
  .section p {
    padding-bottom: 15px; }

.why {
  display: flex;
  font-family: 'Joan', sans-serif;
  padding: 45px 4.2%; }
  .why .whycards {
    font-family: 'Montserrat', sans-serif;
    text-align: center; }

div.at-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; }

.at-item {
  width: 100px;
  height: 100px;
  background-color: #ffe672;
  animation-name: wobble-hor-top;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none; }

@keyframes wobble-hor-top {
  0% {
    transform: translateX(0%);
    transform-origin: 50% 50%; }
  15% {
    transform: translateX(-30px) rotate(6deg); }
  30% {
    transform: translateX(15px) rotate(-6deg); }
  45% {
    transform: translateX(-15px) rotate(3.6deg); }
  60% {
    transform: translateX(9px) rotate(-2.4deg); }
  75% {
    transform: translateX(-6px) rotate(1.2deg); }
  100% {
    transform: translateX(0%);
    transform-origin: 50% 50%; } }

@keyframes hovercards {
  0% {
    background-color: rgba(194, 165, 0, 0.336); }
  100% {
    background-color: rgba(0, 0, 0, 0.4); } }

.hover-1 {
  background-image: linear-gradient(#2873EE, #2873EE);
  background-size: 0 100%;
  background-repeat: no-repeat;
  transition: .4s; }

.hover-1:hover {
  background-size: 100% 100%; }

.hover-2 {
  background: linear-gradient(#2873EE 0 0) left/var(--p, 0) no-repeat;
  transition: .4s,background-position 0s; }

.hover-2:hover {
  --p: 100%;
  background-position: right; }

.hovercards:hover, .icon:hover, .footer__whatsaap:hover, .footer__instagram:hover, .footer__facebook:hover, .customcard:hover, .gallery__image:hover {
  animation-name: hovercards;
  animation-duration: 0.3s;
  transform: scale(1.1);
  z-index: 3; }

.boxshadow {
  box-shadow: 5px 5px 15px 5px #000000; }
  .boxshadow:hover {
    transform: scale(1.2); }
  .boxshadow .galeria {
    display: flex;
    padding-left: 6%;
    flex-wrap: wrap;
    padding-bottom: 25px; }

.gallery__image {
  width: 20%; }

.img-hover-zoom {
  overflow: hidden; }

.gallery__image {
  transition: transform .5s ease-in-out; }

/* The Transformation */
.gallery__image:hover {
  transform: scale(1.5); }

.gallery__image:hover {
  transform: scale(1.5) rotate(15deg); }

@media (max-width: 768px) {
  .header__logo2 {
    height: 150px; }
  .header__logo {
    display: none; }
  .header .why {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr); }
  .galeria {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr); }
  .gallery__image {
    width: 90%; }
  .footer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 3; }
    .footer__facebook {
      margin-top: 15px; }
    .footer__copyright {
      margin-top: 7px; }
  .customcards {
    grid-template-columns: 50% 50%;
    grid-gap: 7px;
    row-gap: 19px;
    width: 100%; }
  h1 {
    font-size: 55px; }
  h2 {
    font-size: 46px; }
  h3 {
    font-size: 36px; }
  h4 {
    font-size: 36px; }
  .customcard__header h5 {
    font-size: 31px; }
  p {
    font-size: 26px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; }
  .content p {
    font-size: 15px;
    color: #00b6ee; }
  .firstP {
    font-weight: 200;
    font-size: 22px; } }