/* @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700'); */

:root {
  --regular-font: 'robotoregular';
  --bold-font: 'robotomedium';
  --background-color:#f6f9fd;
  --primary-text-color: #354052;
  --grey-text-color: #677897;
  --sky-blue-color: #e6effa;
}

@font-face {
  font-family: 'robotoregular';
  src: url('/fonts/roboto/roboto-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'robotomedium';
  src: url('/fonts/roboto/roboto-medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}


*{ margin: 0; padding: 0; box-sizing: border-box; outline: none; box-shadow: none;}
ul{ list-style: none;}
body{font-family: var(--regular-font);background-color: var(--background-color); color: var(--primary-text-color);}
.semibold{font-weight: 500;}
.bold{ font-weight: 700;}
.full{ width: 100%; float: left;}
.padd0{ padding: 0;}


.navbar-default{ background: none; border: 0; background: white; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  transition: background-color 0.5s ease 0s;}

.navbar-nav{
  margin: 0;
  padding: 0;
}
.navbar-default .navbar-nav>li>a{color: var(--primary-text-color);}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{background-color:var(--sky-blue-color);color: var(--primary-text-color);}
.navbar-toggle{ background: none; border: 0;}
.navbar-default .navbar-toggle{ margin-right: 0;}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{ background-color:var(--sky-blue-color); }
.navbar-default .navbar-toggle .icon-bar{ width: 16px; background-color:#000; }
.navbar-toggle .icon-bar:nth-child(3){ width: 12px;}

.navbar-default .navbar-collapse {
    border-color: #dde9f7;
}
.navbar-default .navbar-brand{ padding: 0; line-height: 60px; color: var(--primary-text-color);}
.navbar-default .navbar-brand:hover{ color: var(--primary-text-color);}
.navbar-collapse.in{ /* margin:10px 0 0; */ padding: 0;}

.audiojs{ width: 100%; margin-bottom: 30px; background:var(--grey-text-color) ;}
.audiojs .scrubber{ width: calc(100% - 180px); background: #556788;}
.audiojs .play-pause{ padding-left: 0; border-color:#556788;}
.audiojs .time{border-color:#556788;}
.audiojs .loaded{ background: #c9d8ea;}
.audiojs .progress{ background: #aec2da; border-radius: 0;}

.section-title{ padding: 10px; background: var(--sky-blue-color); font-size: 16px; color: var(--grey-text-color);
  font-family: var(--bold-font);
}

.sidebar .song{ pointer-events: none;}
/* .sidebar{ display: none;} */

/* language switch style starts */
#lang-switch img {
    width: 32px;
    height: 32px;
    opacity: 0.5;
    transition: all .5s;
    margin: auto 3px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  #lang-switch img:hover {
    cursor: pointer;
    opacity: 1;
  }
  
  .hin_lang,
  .en_lang {
    display: none;
    transition: display .5s;
  }

  
  /* Language */
  .active-lang {
    display: inline-block !important;
    transition: display .5s;
  }
  

  .hide {
    display: none;
 }

 .lang-switch li{ font-size: 16px; color: var(--grey-text-color); padding: 0 15px; line-height: 60px; cursor: pointer;}

 .lang-switch li.active-flag {
  transition: all .5s;
  opacity: 1 !important;
  font-family: var(--bold-font);
  box-shadow: inset 0px -3px 0px 0px var(--grey-text-color);
  color: var(--grey-text-color);
}
 /* language switch style starts */

 /* listing style starts */
  
  
  ul.listing {
    list-style-type: none;
    background: white;
    margin-bottom: 20px;;
  }
  
  ul.listing li {
    line-height: 50px;
    border: 1px solid var(--sky-blue-color);
    border-top: 0;
  }
  
  ul.listing a {
    height: 100%;
    text-decoration: none;
    color: var(--grey-text-color);
    padding: 0 15px;
    position: relative;
    -webkit-transition: background .3s;
            transition: background .3s;
  }

  ul.listing .download{
    float: right;
    width: 20px;
    height: 20px;
    margin-right: 20px;;
  }

  ul.listing .download img{
    width: 20px;
  }
  /* 
  ul.listing a:after {
    content: '⇢';
    position: absolute;
    right: 10px;
  } */
  
  /* ul.listing a:hover {
    background: #cdcbc4; 
  } */
  
  
  
  /* CHECKBOX CONTAINER STYLES
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  
  .listing-container { 
    position: relative; 
    height: auto;
    border-top: 0;
    color: var(--grey-text-color);
  }
  
  .listing-container [type="checkbox"] {
    position: absolute;
    left:  -9999px;	
  }
  
  .listing-container label {
    background: var(--background-color);
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
    position: relative;
    /*
     * no need to position absolutely the element 
     * because we are not interested in any transition effect
     * position: absolute;
     * top: 0;
     */
  }
  
  /*
   * use the rule below for testing purposes
   * label:hover {
   *    background: yellow;
   *  }
   */
  
   .listing-container label:before,
   .listing-container label:after {
      position: absolute;
  }
  
  .listing-container label:before {
    content: 'More';
    right: 35px;
  }
  
  .listing-container label:after {
    content: '⇣';
    right: 15px;
    -webkit-animation: sudo .85s linear infinite alternate;
            animation: sudo .85s linear infinite alternate;
  }
  
  @keyframes sudo { 
      from { 
      -webkit-transform: translateY(-2px); 
              transform: translateY(-2px); 
    }
      to { 
      -webkit-transform: translateY(2px); 
              transform: translateY(2px); 
    }
  }
  
  .listing-container input[type="checkbox"] ~ ul {
    width: 100%;
      display: none;
  }
  
  
  
  /* CHECKED STATE STYLES
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  
  .listing-container [type="checkbox"]:checked ~ ul {
    display: block;
  } 
  
  .listing-container [type="checkbox"]:checked + label {
    /**
     * if we have positioned relatively the element, 
     * during the "checked" state 
     * we have to change its type of positioning
     */
    position: absolute; 
    top: 100%;
  }
  
  .listing-container [type="checkbox"]:checked + label:before {
    content: 'Less';
  }
  
  .listing-container [type="checkbox"]:checked + label:after {
   content: '⇡'; 
  }
  
  ul.listing li:last-child {
    margin-bottom: 50px;
  }

  .copyright{ padding: 10px 0; background: var(--sky-blue-color); color: var(--grey-text-color)}
  /* listing style starts */
  

  @media only screen and (max-width: 767px) {
   /*  .homepage{ text-align: center;} */
    .navbar-collapse{border-width: 0px 1px 1px;border-style: solid;margin-top: 10px;}
    .nav>li{border-top: 1px solid #dde9f7;}
    .navbar-default .navbar-brand{ line-height: 50px;}
    /* .nav>li:first-child{border-top: 0;} */
    .sitemap ul{ padding: 0; text-align: left;}
  }


@media only screen and (min-width: 768px) {
  .nav>li>a{ font-size: 16px;}
  .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{background-color:transparent;}
  .navbar-default .navbar-brand{
    font-size: 22px;
  }

}

  @media only screen and (min-width: 1200px){
    .container {
      width: 1000px;
    }
  }