/*
[class*="container"] {
  outline: 1px solid blue;
}
[class*="row"] {
  outline: 1px solid green; 
}
[class*="col-"] {
  outline: 1px solid red;
}
*/


:root {
  --theme-color-1: #1e1a1f;
  --theme-color-2: #665a5b;
  --theme-color-3: #e9e9e0;
  --theme-color-4: #d8c9bb;
  --fs-base: 18px;
  --border-radius: 2.6rem;
}

.no-overflow {
  overflow: hidden;
}

* {
  font-family: 'Manrope', sans-serif;
}

body {
  background: var(--theme-grey-dark);
}

h1, .h1 {
  font-size: 4.5rem;
  line-height: 1.1;
}
h1 span, .h1 span,
h2 span, .h2 span {
  opacity: 0;
  transform: translateY(-50%);
  /* white-space: nowrap; */
  display: inline-block;
  animation: riseup 1.2s ease forwards;
  animation-delay: var(--x);
}

#main-img {
  opacity: 0;
  transform: translateX(5%);
  animation: rightToLeft 1.2s ease forwards;
  animation-delay: 1.00s;
}


@media (max-width: 1450px) {
  .h1, h1 {
    font-size: 3rem;
  }
}
@media (max-width: 1100px) {
  .h1, h1 {
    font-size: 2.5rem;
  }
}
@media (max-width: 480px) {
  .h1, h1 {
    font-size: 1.6rem;
  }
  h1 span,
  h2 span {
    white-space: initial;
  }
}


p, li {
  font-size: calc(1rem + 0.2vw);
}
@media (min-width: 1200px) {
  p, li {
    font-size: var(--fs-base);  
  }
}

ul {
  padding-left: 20px;
}
li {
  margin-bottom: 5px;
}

header > [class*="container"] {
  padding: 36px 5%;
}
  header [class*="col-"] {
    display: flex;
    justify-content: end;
    flex-direction: column;
  }

#logo {
  height: 200px;
  max-height: 35vw;
}
@media screen and (max-width: 990px) {
  #logo {
    position: initial;
  }
  #portrait {
    margin-top: 6dvh;
  }
}


form {
  background: white;
  padding: 15px;
}

#form1 {
  position: relative;
  transform: translateY( -8vw );
  padding: 2rem;
  border-radius: var(--border-radius);
  margin-bottom: -2rem;
}
@media screen and (max-width:990px){ 
  #form1 {
    top: -15px;
    padding: 1rem;
  }
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #333 !important;
  opacity: 1 !important; /* Firefox */
}

form input[type="text"],
form input[type="email"],
form textarea {
  border-radius: 0 !important;
  border: 1px solid #333 !important;
  margin-bottom: 10px;
  font-size: 1.2rem !important;
}
form input[type="checkbox"] {
  border-radius: 0 !important;
  width:18px;
  height:18px;  
}
.form-check {
  margin-bottom: 10px;
}

@media screen and (max-width: 480px){
  form input[type="text"],
  form input[type="email"],
  form textarea {
    font-size: 1rem !important;
  }
}

button {
  border: none;
  padding: 10px 15px;
  color: var(--theme-color-2);
  border: 1px solid white;
  min-width: 300px;
  max-width: calc(100% - 2rem);
  font-size: 1.2rem;
}
  button:hover {
    color: black;
    border: 1px solid black;
  }

#form2 button {
  color: white;
  background: var(--theme-color-2);
  border: 1px solid var(--theme-color-2);
}
  #form2 button:hover {
    border: 1px solid black;
  }

button.rounded {
  border: none;
  border-radius: 2rem !important;
  padding: 10px 15px;
  background: var(--theme-color-2);
  border: 2px solid var(--theme-color-2);
  color: white;
  max-width: calc(100% - 2rem);
  font-size: 1.2rem;
  font-weight: 800;
  min-width: 300px;
}
  button.rounded:hover {
    background: white;
    color: var(--theme-color-2);
  }

@media screen and (max-width:575px){ 
  button {
    width: calc( 100% - 10px);
    font-size: 1rem !important;
  }
}

span.error {
  color: red;
  display: block;
  text-align: left;
  position: relative;
  top: -8px;
  font-size: 12px;
}
#form1 span.error { color: white; }
input.has-error, textarea.has-error {
  outline: 2px solid red;
  outline-offset: -2px;
}
#form1 input.has-error, #form1 textarea.has-error { outline: 2px solid white; }
label {
  margin-bottom: 10px !important;
  line-height: 1.2;
  display: block;
}

#nuestros-perros-div {
  background-position: bottom left !important;
}
#nuestros-perros-ul {
  list-style: disc;
  margin-bottom: 2rem;
}
  #nuestros-perros-ul > li {
    margin-bottom: 1rem;
    font-weight: 600;
  }
@media screen and (max-width: 500px){
  #nuestros-perros-div {
    background-position: 0 80% !important;
  }
}

.absolute-maximized {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.swiper-slide:hover h5 {
  text-decoration: underline;
}

@keyframes riseup {
  0% {
    transform: translateY(0%);
    opacity: 0;
  }
  100% {
    transform: translateY(-50%);
    opacity: 1;
  }
}
@keyframes rightToLeft {
  0% {
    transform: translateX(5%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}