/* CSS Document */
html, body{
          background-color: #fff;
          color: #737373;
      }
      .navbar-brand{ color: #404040; }    
      a.nav-link{ color: #737373; }
      a.nav-link:hover{ color: #fff; background-color: #8eb6dc; opacity: 0.6;}
      a.nav-link:active{ color: #fff; background-color: #8eb6dc; opacity: 0.6;}
  /* Make the image fully responsive */
  .carousel-inner img {
    width: 100%;
    height: auto;
  }

audio{  height: 26px;}      
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    
    #navMenu{ 
        margin-left: 100px !important;
        
    }
    li.nav-item{ 
        white-space: nowrap !important; margin-left: 10px !important; margin-bottom: 10px !important; padding-bottom: 0px !important;}
      .carousel{
          .playBtn{
              bottom: 28px;
              left: 70%;
              position: absolute;
              opacity: 0.6;
              z-index: 999;
              
              &:hover{
                  opacity: 1;
              }
          }
      }
    
  .carousel-inner img {
    width: 100%;
    height: auto;
      
  }
    
    .carousel-caption{
        width: 45%;
        top: 30%;
        left: 45%;
        bottom: 30px; 
    }
    #sp_1{
        width: 45%;
        top: 30%;
        left: 45%;
        bottom: 30px; 
        color: #404040;
    }
    #sp_4p{ font-size: 1.1em; }
    #sp_2, #sp_4, #sp_5{
        text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 5px #000000;
    }
    #sp_3{
        width: 45%;
        top: 30%;
        left: 45%;
        bottom: 30px; 
        text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 5px #000000;
    }
    .carousel-caption > p { font-size: 1.em;}
    
    .carousel-indicators{
        bottom: 10px; 
    }
} 

@media only screen and (max-width: 750px) {	/*in small screen*/
      .carousel{
          .playBtn{
              bottom: 0px;
              left: 18%;
              position: absolute;
              opacity: 0.6;
              z-index: 999;
              
              &:hover{
                  opacity: 1;
              }
          }
      }

    .carousel-caption{
        width: 50%;
        top: 5%;
        left: 40%;
        bottom: 10px;
    }
    #sp_1{
        width: 55%;
        top: 5%;
        left: 35%;
        bottom: 10px;
        color: #404040;
        text-shadow: 1px 1px 2px #fff, 0 0 25px #fff, 0 0 5px #fff;
    }
    #sp_2, #sp_4, #sp_5{
        text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 5px #000000;
    }
    #sp_3{
        width: 50%;
        top: 5%;
        left: 40%;
        bottom: 10px;
        text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 5px #000000; 
    }
    .carousel-caption > h3{ font-size: 1em;}
    .carousel-caption > p{ font-size: 0.7em;}
    
    .carousel-indicators{ bottom: 0px; }
    a.nav-link{padding-left: 10px !important; }
    
}

      .footer{
          background-color: #1470af;
      }
      .secTitle{
          background-color: #8eb6dc;
      }
      .copyR{ font-size: 0.8em;}

 #backToTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
     width: 56px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
  opacity:0.5;
}

#backToTop:hover {  background-color: #555; opacity:0.8; }