* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  font-family: "Roboto Slab", serif;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
}

/* FOOTER */
.footer-container {
  font-weight: normal;
  display: grid;
  justify-items: center;
  align-items: flex-start;
  text-align: center;
  grid-template-areas: "horarios horarios horarios telefono" "logo menu atilra ubicacion" "redes menu atilra ubicacion";
}
.footer-container__horarios {
  grid-area: horarios;
  background-color: #017D9F;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 1.2rem;
  margin-bottom: 0px;
  color: rgb(255, 255, 255);
}
.footer-container__telefono {
  grid-area: telefono;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  width: 100%;
  height: 55px;
}
.footer-container__telefono a {
  font-size: 1.2rem;
  position: relative;
  top: 2px;
}
.footer-container__telefono i {
  font-size: 1.5rem;
  color: rgb(48, 209, 77);
  margin: 10px;
  transition: transform 0.5s, color 0.5s;
}
.footer-container__logo {
  grid-area: logo;
  align-self: center;
  justify-self: center;
  margin: 10px;
}
.footer-container__menu {
  grid-area: menu;
  padding: 5px;
}
.footer-container ul {
  padding: 5px;
}
.footer-container ul li:first-child {
  color: #017D9F;
  font-weight: bold;
  font-size: 1.1rem;
}
.footer-container a {
  text-decoration: none;
  color: #017d9f;
  font-weight: bold;
  transition: color 0.5s;
}
.footer-container a:hover {
  color: #58585A;
}
.footer-container__atilra {
  grid-area: atilra;
}
.footer-container__ubicacion {
  grid-area: ubicacion;
  padding: 10px;
  width: 100%;
}
.footer-container__ubicacion iframe {
  width: 300px;
  height: 150px;
}
.footer-container__redes {
  grid-area: redes;
  padding: 10px;
}
.footer-container ul h3, .footer-container__ubicacion h3, .footer-container__redes h3 {
  font-size: 1.2rem;
  font-weight: bold;
  color: #017D9F;
}
.footer-container__redes i {
  margin: 8px;
  margin-top: 0;
  font-size: 1.3rem;
  display: inline-block;
  transition: transform 0.5s, color 0.5s;
}

.bi-facebook:hover {
  transform: scale(1.5);
  color: rgb(13, 137, 240);
}

.bi-instagram:hover {
  transform: scale(1.5);
  color: rgb(139, 41, 193);
}

.bi-youtube:hover {
  transform: scale(1.5);
  color: rgb(246, 0, 2);
}

.bi-whatsapp:hover {
  transform: scale(1.5);
  color: rgb(48, 209, 77);
}

@media (min-width: 768px) and (max-width: 1024px) {
  .footer-container {
    width: 100%;
    grid-template-areas: "horarios horarios horarios" "telefono telefono telefono" "logo menu atilra " "redes menu atilra" "ubicacion ubicacion ubicacion";
  }
  .footer-container iframe {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .footer-container {
    grid-template-areas: "horarios" "telefono" "menu" "atilra" "logo" "redes" "ubicacion";
  }
  .presentation__h1 {
    font-size: 40px;
    font-weight: 200;
    top: 10%;
  }
}
/* HEADER */
.header {
  background-color: rgb(255, 255, 255);
  border-bottom: 2px solid #C3CB1E;
  z-index: 10;
}
.header__a--nav {
  text-decoration: none;
  font-size: 1.1rem;
  color: #58585A;
  border-radius: 5px;
  padding: 5px;
  transition: background-color 0.3s;
}
.header__a--nav:hover {
  color: #ffffff;
  border-radius: 5px;
  background-color: #017D9F;
}

body {
  background-color: #ffe6cd;
}

.btn-1 {
  width: 80px;
  height: 40px;
  background-color: #017D9F;
  color: white;
  border-radius: 8px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* TITULO DE PAGINA */
.titulo {
  background-color: #017D9F;
  color: white;
  border-radius: 0 0 50px 0;
  display: inline-block;
  padding: 15px 35px 15px 15px;
  font-size: x-large;
}

.logo {
  width: 240px;
  height: 45px;
}

a.active-link {
  color: #ffffff;
  border-radius: 5px;
  background-color: #017D9F;
}

/* PORTADA */
.presentation {
  height: 100vh;
  background-image: url(./assets/tomotherapy-azul.png);
  background-size: cover;
  background-position: center 80%;
  background-repeat: no-repeat;
}
.presentation__h1 {
  background-color: rgba(255, 255, 255, 0.75);
  padding: 5px;
  font-size: 60px;
  font-weight: 200;
  color: #58585A;
  text-align: center;
  margin: auto;
  position: relative;
  top: 30%;
}

/* ESLOGAN */
.eslogan {
  background-color: white;
  height: auto;
}
.eslogan__h2 {
  color: black;
  font-size: 1.8rem;
  padding: 25px;
  text-align: center;
}

.prestaciones__div {
  text-align: center;
}
.prestaciones__img {
  width: 100px;
  height: 100px;
}
.prestaciones h3 {
  font-size: 1.1rem;
  margin: 10px;
}

.novedades {
  margin: 60px auto 60px;
}
.novedades__h2 {
  color: #017d9f;
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 40px;
}
.novedades__div-img {
  display: flex;
  justify-content: center;
}
.novedades__img {
  width: 50%;
  padding: 25px;
}

.carousel-novedades__div {
  width: 80%;
  margin: 0 auto;
  max-width: 350px;
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.7);
}
.carousel-novedades__img {
  width: 100%;
  max-width: 350px;
  max-height: 400px;
}

/* TARJETA TOMOTHERAPY */
.tomotherapy {
  background-color: #017d9f;
  color: white;
  margin-top: 60px;
  margin-bottom: 60px;
}
.tomotherapy__iframe {
  height: 350px;
  border: 3px solid white;
}
.tomotherapy__h2 {
  font-size: 1.5rem;
}
.tomotherapy__h3 {
  font-size: 1.2rem;
}
.tomotherapy__p {
  font-size: 1.2rem;
}

/* TARJETA PROFESIONALES */
.profesionales {
  width: 80%;
  margin-top: 60px;
  margin-bottom: 60px;
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
}
.profesionales__h2 {
  color: #017d9f;
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 30px;
}
.profesionales__h3 {
  font-size: 1.2rem;
  color: #017d9f;
  border-bottom: 2px solid #C3CB1E;
  display: inline-block;
}
.profesionales__ul {
  font-size: 0.8rem;
  color: #58585A;
  padding-left: 0;
}

/* QUIENES SOMOS*/
a.active-link {
  color: #ffffff;
  border-radius: 5px;
  background-color: #017D9F;
}

.dependencias__h2 {
  color: #58585A;
  text-align: center;
  font-size: 1.5rem;
  margin-top: 50px;
}
.dependencias__article {
  width: 80%;
  margin: 30px auto;
}
.dependencias p:first-child {
  font-weight: bold;
  font-size: 1.2rem;
  color: #58585A;
  margin-top: 20px;
}
.dependencias > img {
  width: 80%;
  display: block;
  margin: 0 auto;
}
.dependencias__img {
  width: 100%;
  height: 120px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  margin-bottom: 15px;
}
.dependencias__p {
  font-size: 0.8rem;
  width: 100%;
  color: #58585A;
}

@media (min-width: 576px) {
  .dependencias__img {
    width: 30%;
    height: 60px;
    margin-right: 5px;
    float: left;
  }
  .dependencias > img {
    display: none;
  }
}
@media (max-width: 576px) {
  section.slide {
    display: none;
  }
  .dependencias p:first-child {
    font-size: 0.8rem;
  }
}
.carousel-item {
  transition: transform 5s ease, opacity 0.5s ease-out;
}

.slide {
  margin: 10px auto;
}

.slide-container__item {
  padding: 15px;
}
.slide-container__item img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 20px;
  border: 5px solid white;
}

/* SERVICIOS */
a.active-link {
  color: #ffffff;
  border-radius: 5px;
  background-color: #017D9F;
}

.especialidades-container {
  width: 80%;
  margin: 50px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
}

.especialidades {
  width: 300px;
  height: 200px;
  text-align: center;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
  margin: 25px;
  color: #017d9f;
}
.especialidades__i {
  font-size: 45px;
}
.especialidades__h2 {
  font-size: 1.5rem;
}
.especialidades__p {
  font-size: 0.8rem;
}
.especialidades__radio:hover {
  background-image: url(./assets/especialidades__radio.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: black;
}
.especialidades__radio:hover div {
  transition: transform 1s;
  transform: rotate(360deg);
}
.especialidades__quimio:hover {
  background-image: url(./assets/especialidades__quimio.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: black;
}
.especialidades__quimio:hover div {
  transition: transform 1s;
  transform: rotate(360deg);
}
.especialidades__cons:hover {
  background-image: url(./assets/especialidades__cons.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: black;
}
.especialidades__cons:hover div {
  transition: transform 1s;
  transform: rotate(360deg);
}
.especialidades__tm:hover {
  background-image: url(./assets/especialidades__tm.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: black;
}
.especialidades__tm:hover div {
  transition: transform 1s;
  transform: rotate(360deg);
}
.especialidades__bl:hover {
  background-image: url(./assets/especialidades__bl.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: black;
}
.especialidades__bl:hover div {
  transition: transform 1s;
  transform: rotate(360deg);
}

/* NOTICIAS */
a.active-link {
  color: #ffffff;
  border-radius: 5px;
  background-color: #017D9F;
}

.buscador {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.buscador__input {
  text-align: center;
  width: 400px;
  height: 40px;
  border: 1px solid #017d9f;
  border-radius: 8px;
  margin: 0 5px;
}

.noticias__img {
  width: 200px;
  height: 120px;
}
.noticias__article {
  font-size: 0.8rem;
  margin-top: 25px;
  margin-bottom: 25px;
  padding: 25px;
  background-color: white;
  border: 1px solid #58585A;
  border-radius: 10px;
}
.noticias__a {
  color: white;
}

/* CONTACTANOS */
a.active-link {
  color: #ffffff;
  border-radius: 5px;
  background-color: #017D9F;
}

.contacto-container__ul {
  text-align: center;
  padding-left: 0;
}
.contacto-container__ul li {
  line-height: 35px;
}

.heartbeat {
  -webkit-animation: heartbeat 3s ease-in-out infinite both;
  animation: heartbeat 3s ease-in-out infinite both;
}

@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
    transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
    transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
    transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
    transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

/*# sourceMappingURL=style.css.map */