/*css for landing page */
video{
    width: 100%;
    height: auto;
}
.carousl-img{
    width: 100%;
    height: auto;
}
@media only screen and (max-width: 560px) {
      .carousel-indicators{
            top: 40px !important;
      }
      .carousel-indicators li, .carousel-indicators li.active{
            margin-bottom: 1rem !important;
      }
} 
@media only screen and (max-width: 768px) { 
      .landing-page-section{
            margin-top: 5rem;
            margin-bottom: 10rem;;
      }
      .image-block-one, .image-block-two, .image-block-three{
            height: 30rem;
      }      
      .carousel-indicators li{
            width: 12px;
            height: 12px;
      }
      .carousel-indicators .active{
            width: 14px;
            height: 14px;
      }
      /* .carousel-indicators{
            top: 60px !important;
      } */
}
@media only screen and (min-width: 768px) { 
      .landing-page-section{
            margin-top: -18rem;
            margin-bottom: 10rem;;
      }
      .image-block-one, .image-block-two, .image-block-three{
            height: 35rem;
      }
      .image-block-one:hover .logo-image, .image-block-two:hover .logo-image, .image-block-three:hover .logo-image {
            width: 60%;
            margin-left: 20%;
            height: auto;
            display: block;
            transition: .5s ease;
      }
      
      .carousel-indicators li{
            width: 16px;
            height: 16px;
            margin: 2px;
      }
      .carousel-indicators .active{
            width: 18px;
            height: 18px;
      }
}
@media only screen and (min-width: 992px) { 
      .landing-page-section{
            margin-top: -18rem;
            margin-bottom: 15rem;;
      }
      .image-block-one, .image-block-two, .image-block-three{
            height: 45rem;
      }
      .carousel-indicators li{
            width: 20px;
            height: 20px;
      }
      .carousel-indicators .active{
            width: 22px;
            height: 22px;
      }
}
.col-md-4, .col-sm-4, .col-lg-4{
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
}
.card-row{
    margin-right: 10%;
    margin-left: 10%;
    width: 80%;
}
.carousel{
      /* z-index: -1; */
}
.landing-page-section{
      position: relative;
}
.image-block-one{
      background-image: url(../images/sections/01.jpg);
}
.image-block-two{
      background-image: url(../images/sections/02.jpg);
}
.image-block-three{
      background-image: url(../images/sections/03.jpg);
}
.image-block-one, .image-block-two, .image-block-three{
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
}
.overlay-top {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      /* background-color: #008CBA; */
      overflow: hidden;
      width: 100%;
      height: 100%;
      transition: .50s ease;
}
    
.image-block-one:hover .overlay-top, .image-block-two:hover .overlay-top, .image-block-three:hover .overlay-top {
      bottom: 100%;
      height: 0;
}
.logo-image{
      width: 100%;
      height: auto;
      display: block;
      transition: .5s ease;
}
.logo-section {
      white-space: nowrap; 
      color: white;
      font-size: 20px;
      position: absolute;
      overflow: hidden;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      z-index: 1;
      transition: .50s ease;
}
.image-block-one:hover .logo-section, .image-block-two:hover .logo-section, .image-block-three:hover .logo-section {
      white-space: nowrap; 
      color: white;
      font-size: 20px;
      position: absolute;
      overflow: hidden;
      top: 15rem;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transition: .50s ease;
}
.logo-text{
      display: none;
      color:white; 
      text-align:center;
      font-weight: bold;
}
.image-block-one:hover .logo-text, .image-block-two:hover .logo-text, .image-block-three:hover .logo-text{
      display: block;
}
.carousel-indicators {
      display: grid;
      text-align: right !important;
    float: right !important;
    right: 6% !important;
    left: inherit !important;
    width: 0%;
}
ol{
      margin-bottom: 18%;
}
.carousel-indicators li, .carousel-indicators li.active{
      margin-bottom: 2rem;
}
.carousel-indicators .active{
      background-color: #870027;
}
.myClass{
      z-index: -1;
}