:root {
    --turquise: #5cc5c3;
    --turq-strong: #0dcaf0;
    --yellow-strong: #f6b612;
    --purple-dark: #92219b;
    --purple-violet: #7f73eb;
    --violet: #5d52ba;
    --grey-light: #F8F9FA;
    --dark-blue: #194376;
    --dark-grey: #757575;
    --primary-color: ;
    --secondary-color: ;
    --button-primary: #D80077;
    --button-secondary: #A5005B;
    --background-grey: #F8F9FA;
    --background-light-blue: #F0F8FF;

}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', 'Roboto', 'Pt sans', serif;
}

html {
    scroll-behavior: smooth;
  }

.section-blue {
    background-color: var(--background-light-blue);
}

h1, h2, h3, h4, h5, h6, p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}


h2 {
    font-size: 2.8em;
    color: var(--dark-blue);
    font-family: 'Open Sans';
    font-weight: 900;
}

h3 {
    font-size: 2em;
    color: var(--dark-blue);
}

@media (width <= 920px) {
    h2 {
        font-size: 2.5em;
      }
    h3 {
        font-size: 2.2em;
    }
}

@media (width <= 720px) {
    h2 {
        font-size: 2em;
      }
    h3 {
        font-size: 1.8em;
    }
}


p {
    font-size: 1.2em;
    color: var(--dark-grey)
}

.small-letters {
    font-size: 0.8em;
}

.super-small-letters {
    font-size: 0.5em;
}

a {
    color: var(--orange);
    text-decoration: none;
 }

.link-obvious {
    text-decoration: underline;
    color: var(--dark-blue)
}

a:hover, a:focus, a:active {
    text-decoration: underline;
 }

 h4 {
    color: var(--turquise);
    font-weight: 500;
 }

 .price {
    font-weight: 700;
    font-size: 1.8em;
    color: var(--turquise)
 }


.headline-link {
    color: black;
    text-decoration: none;
}

.headline-link:hover {
    color: black;
}

.serif-font {
    font-family: Georgia, 'Times New Roman', Times, serif;
    letter-spacing: -0.08rem;
    line-height: 1.8em;
}

.monospace-font {
    font-family: Arial, Helvetica, sans-serif
}

/* -------------------------
           HERO
-------------------------- */


.hero-img {
    height: 500px;
}

.hero-headline {
    font-size: 4em;
    font-weight: 900;
    line-height: 1.5em;
    z-index: 10;
    color: white;
}

.hero-subheadline-top {
    font-size: 1.8em;
    z-index: 10;
}

@media (width <= 920px) {
    .hero-headline {
        font-size: 2.5em;
      }
      .hero-subheadline-top {
        font-size: 1.5em;
    }
    
}

@media (width <= 720px) {
    .hero-headline {
        font-size: 2em;
      }

      .hero-subheadline-top {
        font-size: 1.2em;
    }
}


.section-overlay {
    background: rgba(0, 0, 0, 0.65);
    /*background: var(--turquise);*/
    opacity: 0.25;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
  }


.hero-section {
    background-image: url('../images/laundry-service.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    position: relative;
    padding-top: 150px;
    padding-bottom: 150px;
    height: 500px;
    color:white !important;
  }

.gratis-section {
    background-image: url('../images/washing-machine.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    padding-top: 150px;
    padding-bottom: 150px;
    height: 400px;
    color:white;
}

.gratis-text {
    color: white;
    z-index: 10;
    position:relative;
}


@media only screen and (max-width: 820px) {
    .hero-section {
      height: 400px;
    }

  }

.hero-section .section-overlay {
    background: black;
  }



/* ------------------
       Sections
-------------------- */


.img-bolsas {
    width: 80%;
    object-fit: contain;
    height: 400px;
}

.img-fit {
    width: 100%;
    object-fit: cover;
    height: 600px;
}

.section-divider {
    width: 80%;
    border: 1px solid var(--violet);
    margin: 4em auto;
}

.small-divider {
    width: 70%;
    border: 1px solid white;
    margin: 4em auto;
}

@media (width <= 720px) {
    .img-negocio {
        width: 60%;
    }
}


table {
    border-collapse: collapse;
}
td {
    border: none;
}

/* ----------------------
      Contact form
----------------------- */


.form-container {
  display: flex;
}

.right-container {
    background-color: white;
  }
  
.left-container {
    display: flex;
    background-color: var(--turquise);
    justify-content: center;
    align-items: center;
    color: white;
    min-height: 400px;
  }

.left-container p {
  font-size: 0.9rem;
  color: white !important;
}

.right-inner-container {
  width: 70%;
  height: 80%;
  text-align: center;
}

.left-inner-container {
  width: 80%;
  text-align: center;
  line-height: 22px;
}

.input, textarea {
	background-color: #eee;
	border: none;
	padding: 12px 15px;
	margin: 8px 0;
	width: 100%;
    font-size: 0.8rem;
}

.input:focus, textarea:focus{
  outline: 1px solid teal;
}

button {
	border-radius: 20px;
	border: 1px solid #00b4cf;
	background-color: #00b4cf;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
	padding: 12px 45px;
	letter-spacing: 1px;
    cursor: pointer;
    transition-duration: 200ms;
}

button:hover {
  background-color: var(--turq-strong);
  transition-duration: 200ms;
}

form p {
  text-align: left;
}

/*-----------------------
      REGISTER RELEVANT
-------------------------*/

.register-but, .order-but {
    width: 200px;
    font-size: 1.2em;
    color: white;
    background-color: var(--turquise);
    z-index: 10;
    font-weight: bold;
    border: 1px solid #00b4cf;
    
}

.register-but:hover {
    background-color: var(--turq-strong);
    transition-duration: 200ms;
    text-decoration: none;
}

.order-but {
    background-color: var(--yellow-strong);
    border: none;
    z-index: 10;
}

/*-----------------------
      COMO FUNCCIONA
-------------------------*/

.explain-container {
    display: flex;
    flex-direction: column;
    background-color: var(--turquise);
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.explain-container p {
    color: white;
}

.explain-container .row {
    width: 90%;
}