.home {
  /*
    background: url(/img/background5.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    */
}
/* video */
.home-video-container {
  position: relative;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
}
.home-video {
  display: block;
  /*
    width: 100%;
    */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  overflow: hidden;
  min-width: 100%;
  min-height: 100%;
}
@media screen and (max-aspect-ratio: 1920/1080) {
  .home-video-container > video {
    height: 100%;
  }
}
@media screen and (min-aspect-ratio: 1920/1080) {
  .home-video-container > video {
    width: 100%;
  }
}
.home-video-mask {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 10;
  min-width: 100%;
  min-height: 100%;
  background-color: rgba(0, 0, 0, 0.33);
}
.home-image1 {
  display: none;
  min-width: 100%;
  min-height: 100%;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  overflow: hidden;
}
.home-image {
  /*display: none;*/
  background: url(/img/home.jpg) no-repeat center center;
  background-size: cover;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
}
/* vdeo end */
/* title */
.home-title {
  position: absolute;
  bottom: 25%;
  margin-left: 10%;
  color: #ffffff;
  z-index: 20;
}
.home-title .line1 {
  font-size: 2.5rem;
  line-height: 60%;
}
.home-title .line2 {
  font-size: 3.5rem;
  margin-bottom: 20px;
}
.contact-link a {
  font-size: 1rem;
  background-color: #353535 /*#ff5b5b*/;
  padding: 10px 30px;
  color: #ffffff;
}
.contact-link a:hover {
  opacity: 0.9;
}
.contact-link i {
  margin-right: 10px;
}
.contact-link-phone {
  display: none;
}
/* title end */
/* home intro */
.home-intro {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 50px 20%;
  justify-content: space-around;
}
.home-intro > div {
  width: 40%;
}
.intro-text-title {
  font-size: 2em;
  /* background: linear-gradient(#000000, #000000) center bottom; */
  /* background-size: 0% 2px; */
  /* background-repeat: no-repeat; */
  /* background-size: 100% 2px; */
  margin-bottom: 40px;
  display: inline-block;
  padding: 0px 20px;
  border-bottom: 1px solid #000000;
}
.intro-text-description {
  font-size: 1.2rem;
}
.intro-image img {
  width: 100%;
}
/* home intro end */
/* home pills */
.home-pills {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  padding: 50px 20%;
  justify-content: space-evenly;
  background-color: #f6f6f6;
}
.pill {
  width: 33%;
  padding: 30px;
}
.pill .header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px 0px;
  /* border-bottom: 1px solid #000000; */
  margin-bottom: 20px;
}
.pill .header .icon {
  margin-right: 20px;
}
.pill .title {
  font-weight: bold;
  font-size: 1.2rem;
}
.pill img {
  width: 50px;
}
.pill .info {
  text-align: center;
}
.pill ul {
  list-style: circle;
  margin-top: 10px;
}
/* home pills end */
/* treatments link */
.treatments-link {
  padding-bottom: 30px;
  background-color: #f6f6f6;
  text-align: center;
}
.treatments-link a {
  padding: 10px 20px;
  background-color: #353535 /*#ff5b5b*/;
  color: #ffffff;
  display: inline-block;
}
.treatments-link a:hover {
  opacity: 0.9;
}
/* treatments link end */
.spacer {
  width: 100%;
  height: 0;
  padding-top: 20%;
}
@media screen and (max-width: 1450px) {
  .home-pills {
    padding: 50px 15%;
  }
}
@media screen and (max-width: 1200px) {
  .home-intro {
    padding: 50px 15%;
  }
  .home-pills {
    padding: 50px 10%;
  }
}
@media screen and (max-width: 1000px) {
  .home-title .line1 {
    font-size: 2rem;
  }
  .home-title .line2 {
    font-size: 3rem;
  }
  .home-intro {
    padding: 50px 10%;
  }
  .intro-text-description {
    font-size: 1.1rem;
  }
  .pill {
    width: 50%;
  }
  .contact-link-web {
    display: none;
  }
  .contact-link-phone {
    display: inline;
  }
}
@media screen and (max-width: 875px) {
  .home-title .line1 {
    font-size: 1.5rem;
  }
  .home-title .line2 {
    font-size: 2.5rem;
  }
  .home-intro {
    flex-direction: column-reverse;
    text-align: center;
  }
  .home-intro > div {
    width: 100%;
  }
  .intro-text-title {
    margin-bottom: 20px;
  }
  .intro-image {
    margin-top: 30px;
  }
}
@media screen and (max-width: 600px) {
  .home-title .line1 {
    font-size: 1rem;
  }
  .home-title .line2 {
    font-size: 2rem;
  }
  .pill {
    width: 100%;
  }
}
@media screen and (max-width: 400px) {
  .home-title .line1 {
    font-size: 1rem;
  }
  .home-title .line2 {
    font-size: 1.5rem;
  }
  .intro-text-title {
    font-size: 1.4rem;
  }
}
/*
// The typing effect 
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

// The typewriter cursor effect 
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange; }
}
*/
/*
@media screen and (max-width: 1200px) {

}

@media screen and (max-width: 1000px) {
    .section1 {
        font-size: 90%;
    }

    .section3 .platform {
        opacity: 1;
    }
    .section3 .platform:hover {
        opacity: 0.5;
    }
}
  
@media screen and (max-width: 900px) {
    .section1 {
        font-size: 80%;
    }
}
*/
/* When the screen is less than 800 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
/*
@media screen and (max-width: 800px) {
        
    .section1 {
        font-size: 80%;
    }

    .topnav a  {
        display: none;
    }


    .menu-button {
        display: inline-flex;
        align-items: center;
    }

    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

    .top-bar {
        padding: 5px 20px;
    }

    .section1 {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .section1 .title .highlight {
        display: block;
    }

    .section2 {
        flex-direction: column;
        align-items: center;
        font-size: 18px;
    }

    .section2 .subsection {
        max-width: 600px;
        padding: 30px 0px;
        
    }

    .section-news {
        padding: 30px;
    }
}

@media screen and (max-width: 700px) {

    .section1 {
        font-size: 72%;
    }

    .spacer {
        padding-top: 18%;
    }

    .section2 {
        font-size: 14px;
    }
}

@media screen and (max-width: 600px) {

    .section1 {
        font-size: 70%;
    }
    .spacer {
        padding-top: 15%;
    }
}

@media screen and (max-width: 500px) {

    .section1 {
        font-size: 70%;
    }


    .spacer {
        padding-top: 30%;
    }

  
}

@media screen and (max-width: 400px) {

    .section1 {
        font-size: 65%;
    }
}

@media screen and (max-width: 350px) {

    .section1 {
        font-size: 50%;
    }

}

@media screen and (max-width: 280px) {

    .section1 {
        font-size: 35%;
    }

}
*/