@font-face {
  font-family: alnahj;
  src: url("../fonts/Arabic_Fonts_Dec_2014_(13).otf");
}


* {
  margin: 0;
  padding: 0;
  font-family: alnahj;
  box-sizing: border-box;
}
a, a:hover {
text-decoration: none;
color: #fff;
}
body {
  height: auto;
  font-family: alnahj;
  text-align: left;
}
h1,h2,h3,h4,h5,h6,p,span {
  direction: inherit;
  /* text-align: left; */
}
.blue {color: #0c4d9e !important}
.green{ color: #54d66f !important}
.bg_blue {background: #0c4d9e !important}
.bg_green {
  background: #54d66f !important;
  border-color: #54d66f !important;
}
.hesder_con {
  height: auto;
  width: 100%;
  /* background-color: #fff; */
}
.fixed {
  background-color: #fff;
}
.navbar-collapse {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
.navbar-brand img {
width: 150px;
}
.marg_menu { margin-left: 30px;}
.navbar-light .navbar-nav .nav-link {
  font-size: 18px;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 5px;
  border-radius: 10px;
  color: #cc6135 ;
  margin-right: 5px;
  -webkit-transition: .3s all ease-in;
  -moz-transition: .3s all ease-in;
  -ms-transition: .3s all ease-in;
  -o-transition: .3s all ease-in;
  transition: .3s all ease-in;
}
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
background: #cc6135;
border-radius: 10px;
color: #fff ;
}
.active-list {
background-color: #cc6135;
color: #fff;
border-radius: 10px;
}
.mr-auto, .mx-auto {
  margin-left: auto!important;
  margin-right: unset!important;
}
.social_li {
  margin: auto;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 7px;
  margin-right: 7px;
}
.home_banner {
  width: 100%;
  height: auto;
  position: relative;
  background-image: url(../img/banner/home.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.media_clear {
  position: relative;
  top: 25%;
}
.clear_img > img {
  width: 55%;
  margin-left: 28%;
}
.media_sec {
  /* background: #acb9b882;
  border: 1px solid transparent;
  border-radius: 15px; */

}
.about_alnahj_sec {
  padding-top: 50px;
  padding-bottom: 50px;
}
.sec_text {
  color: #2c5ca5;
  margin-top: -3rem;
}
.hed_img {
  margin-bottom: 1.5rem;
}
.sec_text > p {
  font-size: 20px;
  text-align: justify;
}
.hed_img > h1 {
  font-weight: bold;
}
.hed_img > img {
  margin: 10px 90px;
}
.sounds_card, .articl_card, .alert_card {
  background-size: cover;
  background-repeat: no-repeat;
  width: 90%;
  height: auto;
  border: 1px solid transparent;
  border-radius: 15px;
  margin: 3px 5%;
}
.sounds_card {
  background-image: url(../img/card/sounds.png);
}
.articl_card {
  background-image: url(../img/card/articles.png);
}
.alert_card {
  background-image: url(../img/card/lessons_schedule.png);
}
.sounds_card > .card-body, .articl_card > .card-body, .alert_card > .card-body {
  margin: 35px 0px auto 2px;
}
.sounds_card > .card-body > .card-icon, .articl_card > .card-body > .card-icon, .alert_card > .card-body > .card-icon{float: right;}
.sounds_card > .card-body > .card-title, .articl_card > .card-body > .card-title, .alert_card > .card-body > .card-title{
  display: inline-block;
  float: left;
  color: #fff;
  font-size: 25px;
  font-weight: bold;
  margin-top: 1rem;
}



.btn-info:hover {
  color: #fff;
  background-color: #0a458f;
  border-color: #0a458f;
}
.btn-info{
  color: #fff;
  background-color: #0c4d9e;
  border-color: #0c4d9e;
}

.first_carouse {
  background-image: url(../img/banner/first_carouse.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: auto;
  color: #fff;
}
.second_carouse {
  height: auto;
  background: #e9f4ff;
  color: #2c5ca5;
  padding-bottom: 50px;
}
.second_carouse .carousel-indicators {
  bottom: 0;
}
.second_carouse .artical_div {
  width: 85%;
  font-size: 20px;
}
.carousel-indicators li {
  background: #080;
}
.second_carouse .carousel-indicators .active {
  background: #0c4d9e;
}
.second_carouse .carousel-item p {
  color: #2c5ca5;
}
.second_carouse .carousel-item {
  text-align: right;
  padding-top: 4rem;
}
.first_carouse > .container-fluid {height: auto;}
.first_carouse > .container-fluid > .row {
  height: auto;
}
.carousel-indicators li {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.carousel-item {
  height: auto;
  padding-top: 135px;
}
.first_carouse .carousel-item p {
  font-size: 20px;
  font-weight: bold;
  display: inline-block!important;
  width: 67%;
  text-align: center;
  padding-bottom: 2px;
}
.khotab {
  font-weight: bold;
}
.mosky_pic_p > img, .mosky_pic_p > p {display: inline-block}
.mosky_pic_p > p { width: 50%;}
.mosky_pic_p > img {
 padding-bottom: 60px;
}

.contact-whith-us-sec .container-search {
margin-top: 20PX;
margin-bottom: 20PX;
}
.contact-whith-us-sec .container-search .btn-success
{
  width: 100px;
  /*margin-top: -20px;*/
}
.contact-whith-us-sec .container-search
.container-title {
  background-image: url(../img/search/articles.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  padding: 50px;
}
.contact-whith-us-sec .container
.row .content-search {
  margin-bottom: 10px;
  color: #fff;
}

.contact-whith-us-sec .container
.row .content-search label {
  display: block;
}



.contact-whith-us-sec .container
.row .content-search  select {
  -webkit-appearance: menulist;
  box-sizing: border-box;
  align-items: center;
  white-space: pre;
  -webkit-rtl-ordering: logical;
  color: #fff;
  background-color: white;
  cursor: default;
  border-width: 1px;
  border-style: solid;
  border-color: initial;
  border-image: initial;
}
.card-body {
text-align: left;
}
.sec_sound_artic .card-more{
right: 7% !important;
}
.contact-whith-us-sec .container .row .content-search .select
{
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;

  /* background-image: url(../img/icon/select.png); */
  /* background-position: 97% center; */
  /* background-repeat: no-repeat; */
  background-color: #0b4d9d;

  -webkit-box-shadow: 0px 1px 3px rgba(255,255,255,0.6);
  color: #fff;
  padding: 10px;
  width: 100%;
  outline: none;
  border-radius: 5px;
  border: 1px solid #fff;
}

#model {
position: relative;
top: 20px;
left: 0px;
}
.contact-whith-us-sec .container
.row .content-search .input {
  padding: 10px;
  width: 100%;
  outline: none;
  -webkit-box-shadow: 0px 1px 3px rgba(255,255,255,0.6);
  border-radius: 5px;
  border: 1px solid #fff;
  background: transparent;
  color: white;
}




.sec_sound_artic {
  padding-top: 50px;
  padding-bottom: 50px;
}
.sec_sound_artic .container-fluid .row
.soun_sec .card .card-body .card-text-1 {
margin-right: 0px;
margin-left: 10px;
margin-top: 10px;
}

#articls .sec_sound_artic .container-fluid .row {
position: relative;
top: -30px;
}

.sec_sound_artic .container-fluid
.card .row .col-lg-4 {
text-align: center;
position: relative;
margin-top: 0px;
color: #f00;
}

.sec_sound_artic .container-fluid
.card .row .col-lg-4 audio {
margin-left: 10px;
width: 80%;
}
.soun_sec, .artical_sec {
  text-align: right;
}
/*
.soun_sec {
 margin-right: 4rem;
}*/
.sec_sound_artic .card {
  margin: 0 1rem 2rem 1rem;
  min-height: 4.5rem;
  border-radius: 1rem;
}

.btn-primary {background: #0c4d9e;}
.sec_sound_artic .btn-primary {
  position: absolute;
  left: 5%;
  width: auto;
  border-radius: 0;
}

.container-fluid .card {
text-align: right;
padding: 10px;
margin-right: 15%;
width: 70%;
}
/******************************************************/
#home .container-fluid .card {
text-align: right;
padding: 10px;
}

#home .container-fluid .justify-content-between {
position: relative;
margin: 0px auto;
}

/* #home .container-fluid .soun_sec {
position: relative;
margin: 0px auto;
} */

#home .container-fluid .card {
text-align: right;
position: relative;
margin-left: auto;
margin-right: auto;
padding: 10px;
width: 100%;
}

#home .container-fluid .card .card-layer, .card-p {
position: absolute;
right: 2%;
}

#home .container-fluid .artical_sec .card {
padding: 15px;
}

#audios .container-fluid .card {
text-align: right;
padding: 10px;
margin-right: 15%;
width: 70%;
}

.header-btn {
position: relative;
top: -20px;
}


#articles .container-fluid .card {
text-align: right;
padding: 10px;
margin-right: 15%;
width: 70%;
}

.row-body {
margin-top: -37px;
}

#about_us .container-fluid .card {
text-align: right;
padding: 10px;
margin-right: 15%;
width: 70%;
}

#fatawah .container-fluid .card {
text-align: right;
padding: 10px;
margin-right: 15%;
width: 70%;
}
#videos .container-fluid .card {
text-align: right;
padding: 10px;
margin-right: 15%;
width: 70%;
}

#session .container-fluid .card {
text-align: right;
padding: 10px;
margin-right: 15%;
width: 70%;
}
/*******************************************/
#lessons_schedule  .lesson-sec .container-fluid .card {
text-align: right;
padding: 50px;
margin-right: 15%;
width: 70%;
background: #0c4d9e;
border-radius: 50px;
color: #fff;
}

.lesson-sec  {
margin-top: 135px;
margin-bottom: 50px;
}

.lesson-sec .header-icon {
padding: 30px;
width: 181px !important;
height: 181px !important;
position: absolute;
font-size: 1.2em;
top: 0;
margin: -128px 41%;
text-align: center;
background: #54d66f;
border-radius: 50%;
}

.lesson-sec .header-icon img {
display: block;
}

#lessons_schedule .lesson-sec .container-fluid .card  {
position: relative;
margin: 0px auto;
}

#lessons_schedule .lesson-sec .container-fluid .card  .row {
margin-top: 125px;
position: relative;
margin-left: auto;
margin-right: auto;
}

#lessons_schedule .lesson-sec .container-fluid .card .left_fa {
display: inline-block;
display: inline;
position: absolute;
top: 98%;
left: 10%;
text-align: center;
color: #54d66f;
background: #0b3460;
padding: 5px;
padding-right: 5px;
border-radius: 50%;
width: 30px;
height: 30px;
cursor: pointer;
}
#fssList li{
display:inline;
padding-right:10px;
}


#slideshow li.fssActive {
display: inline-block;
}

#slideshow li {
display: none;
}
#lessons_schedule svg:not(:root).svg-inline--fa {
  margin-left: 0;
}

#lessons_schedule .lesson-sec .container-fluid .card .left_fa:last-child {
margin-left: 50px;
color: #54d66f;
background: #0b3460;
padding: 5px;
padding-right: 5px;
border-radius: 50%;
}
#lessons_schedule .lessonEffect {
width: 100%;
height: 100%;
left: 0;
position: relative;
overflow: hidden;
text-align: center;
cursor: default;
}

.card-title {
  text-align: left;
}
#lessons_schedule .card-title {
  background-image: url(../img/head_table.png);
  background-repeat: no-repeat;
  color: #0c4d9e;
  margin: unset;
  padding: 40px 5px;
  position: absolute;
  width: 100px;
  left: 0px;
  top: 20px;
  text-align: center;
  z-index: 99;
}

#lessons_schedule .card-body {
background-image: url(../img/body-less.png);
background-repeat: no-repeat;
color: #fff;
padding: 100px 15% 100px 0;
position: relative;
width: 100%;
margin-top: 55px;
left: 5px;
}

#lessons_schedule .card-body span {
display: block;
}
/*******************************************/
#contact_us .container-fluid .card {
text-align: right;
padding: 10px;
margin-right: 15%;
width: 70%;
}
.active-list-bottom {
  background: #54d66f;
  color: #fff !important;
}

.container-fluid .pagi {
width: 250px;
margin-right: 44%;

}


.pagination-circular li.current span{
  background: #54d66f;
  color: #fefefe;

  border: 1px solid #1779ba;
  border-radius: 5000px;
  padding: 0.285em 0.8em;
  font-size: 18px;
}

.pagination-circular li.disabled span{
border: 1px solid #cacaca;
padding: 0.285em 0.8em;
border-radius: 5000px;
font-size: 18px;
}

.pagination-circular a {
border-radius: 5000px;
padding: 0.285em 0.8em;
border: 1px solid #1779ba;
font-size: 18px;
color: #1779ba;
}

.pagination-circular li:not(.disabled):hover a {
background: #54d66f;
color: #fefefe;
text-decoration: none;
}

.pagination-circular li a {
transition: background 0.15s ease-in, color 0.15s ease-in;
}

/*****************************************/
.hovereffect {
width: 100%;
height: 100%;
float: left;
left: 5%;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}

.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}

.hovereffect img {
display: block;
position: relative;
-webkit-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
}

.hovereffect img {
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /><feGaussianBlur stdDeviation="3" /></filter></svg>#filter');
filter: grayscale(2) blur(0px);
-webkit-filter: grayscale(2) blur(0px);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}

.hovereffect a.info-01 {
display: inline-block;
text-decoration: none;
cursor: default;
color: #0c4d9e;
padding: 7px 14px;
border-radius: 50%;
margin: 41px 0 0 0;
background-color: #fff;
}


.hovereffect a.info-01 {
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
-webkit-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
opacity: 0;
filter: alpha(opacity=0);
color: #0c4d9e;
padding: 18px;
font-size: 1.5em;
text-transform: uppercase;
}
.hovereffect a.info-01:hover {
color: #0c4d9e;
padding: 18px;
font-size: 1.5em;
text-transform: uppercase;
}

.hovereffect a.info-01{
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
/******************************************/

/*****************************************/
.fatawaheffect {
width: 70%;
height: 100%;
border-radius: 50%;
background: #0c4d9e;
float: left;
left: 5%;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}

.fatawaheffect a.info-01 {
display: inline-block;
text-decoration: none;
cursor: default;
color: #fff;
padding: 7px 14px;
border-radius: 50%;
margin: 20px 0 0 0;
}

.fatawaheffect span {
display: block;
width: 100px;
border-bottom: 1px solid #fff;
color: #fff;
padding: 0px 14px;
margin: 20px 51px 0 0;
}


.fatawaheffect a.info-01 {
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
-webkit-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
opacity: 0;
filter: alpha(opacity=0);
color: #fff;
padding: 18px;
font-size: 1.5em;
text-transform: uppercase;
}
.fatawaheffect a.info-01:hover {
color: #fff;
padding: 18px;
font-size: 1.5em;
text-transform: uppercase;
}

.fatawaheffect a.info-01{
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
/******************************************/

.sec_sound_artic .articls-hesder {
position: relative;
top: -25px;
padding: 5px;
width: fit-content;
width: -moz-fit-content;
border-radius: 5px;
text-align: left;
}

.headre-text-img {
text-align: center;
margin-bottom: 50px;
}

.sec_sound_artic .container-fluid .cover-icon {
    position: relative;
    top: -19px;
    padding: 5px;
    background: #0c4d9e;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-top: -15px;
    right: -12%;
    color: #333;
    text-align: center;
}

.sec_sound_artic .container-fluid .cover-icon  .fa-plus {
position: relative;
top: 0;
right: 0;
color: #fff;
cursor: pointer;
}

.fa-minus {
position: absolute;
top: 4.8px;
left: 3.5px;
color: #fff;
display: none;
cursor: pointer;
}
.sec_sound_artic .all {
  position: static;
  width: 6rem;
  border-radius: .5rem;
  font-size: 22px;
  float: right;
  margin-left: 1rem;
}
.sec_sound_artic .card-title {
  width: auto;
  text-align: left;
  position: absolute;
  left: 2%;
  display: inline-block;
  font-size: 1em;
  font-weight: bold;
  color: #2c5ca5;
}
.sec_sound_artic .card-more {
position: absolute;
display: block;
right: 87%;
bottom: 0%;
margin-bottom: 10px;
text-align: center;
padding: 5px;
border-radius: 10px;
background-color: #2c5ca5;
color: #fff;
width: 80px;
cursor: pointer;
}
.sec_sound_artic .card-text-1:last-child {
  display: inline-block;
  padding: 3px;
  right: 0;
  background: #54d66f;
  width: 70px;
  text-align: center;
  height: 34px;
  font-size: 18px;
  color: #fff;
  cursor: pointer
}
.sec_sound_artic .card-text:last-child:hover {color: #19832f;}
.audio_sec_title {
  margin: auto;
  margin-bottom: 4rem;
}
.artical_sec .audio_sec_title {margin-bottom: 5rem;}
.title_img {
  width: 12rem;
  border-bottom: 2px solid #236ab7;
  height: 5rem;
}
.artical_sec .title_img {height: 4rem;}
.title_img > h1 {
  display: inline-block;
  color: #236ab7;
}
.title_img > img {margin: -1.6rem -1.7rem 0 1rem;}
.artical_sec .title_img > img {margin: -.7rem -1.7rem 0 1rem;}
svg:not(:root).svg-inline--fa {margin-left: .3rem;}

.img_p {
  position: relative;
  width: 100%;
  height: auto;
}
.img_p > img {
  position: absolute;
  left: 0;
  top: -5.4rem;
}
.img_p:before, .img_p:after {
  position: absolute;
  left: 50%;
  right: 50%;
  z-index: 1;
  text-align: center;
  color: #fff;
}
.img_p:before {
  content: 'new';
  top: 45%;
  margin-top: 150px;
  position: absolute;
  width: 2.1rem;
  height: 1.1rem;
  background: #f00;
  font-size: 14px;
  line-height: 1.1rem;
}
.img_p:after {
  content: 'Fatwas';
  position: absolute;
  top: 48%;
  margin-top: 150px;
  font-size: 34px;
  font-weight: bold;
}
.choose_artical {
  height: auto;
  padding-top: 50px;
  padding-bottom: 50px;
  text-align: right;
}
.choose_artical .hed_img, .hed_img {margin: auto; margin-bottom: 1.5rem;}
.choose_artical .card {
  background: #e9f4ff;
  position: relative;
  height: auto;
  margin-bottom: 30px;
}
.choose_artical .card::after {
  content: url(../img/after.png);
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: auto;
}
.choose_artical .card::before {
  content: url(../img/before.png);
  position: absolute;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
}
.choose_artical .card a {
  position: absolute;
  bottom: -1rem;
  left: 50%;
  right: 50%;
  width: 5rem;
  font-size: 1.3rem;
  border-radius: 0.5rem;
}
.next {
transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
color: #666;
top: 67px;
position: absolute;
font-size: 20px;
}

.prev {
transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
color: #666;
top: 67px;
position: absolute;
font-size: 20px;
}
.choose_artical .card .card-body{
  margin: auto;
  padding-top: 2.5rem;
}
.choose_artical .card .card-body .card-title {
  font-size: 22px;
  font-weight: bold;
  text-align: left;
}
.choose_artical .card .card-body .card-text {
  font-size: 18px;
}
.carousel-item .col-sm .card .card-title, .card-text {
  margin-right: 80px;
  text-align: left;
}
.open_interveiw {
  height: auto;
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
  background: #0c4d9e;
  text-align: right;
  position: relative;

}
.open_interveiw .img_mic > img  {
  position: absolute;
  width: 9rem;
  height: 30rem;
  bottom: 0;
  z-index: 2;
}
.open_interveiw .carousel-item {
  padding: 0;

}
.open_interveiw .hed_img {
  color: #fff;
  padding-top: 3rem;
}
.open_interveiw .hed_img > img {
  margin: 10px 90px 1px -22px;
}
.open_interveiw .watch_all {
  position: relative;
  left: -16rem;
  font-size: 24px;
}
.open_interveiw .card {
  border-top-right-radius: 10rem;
  border-bottom-left-radius: 10rem;
}
/*
.open_interveiw .card {
  padding-right: 10rem;
}*/
.open_interveiw .card-text {
  width: 74%;
  font-size: 20px;
}

a.card-text,.card-title a{color: blue;}
a.card-text:hover,.card-title a:hover{color: lightblue;}
.open_interveiw .col-sm a {
  position: relative;
  left: -36rem;
  width: 5rem;
  font-size: 20px;
  z-index: 1;
  bottom: 2rem;
}
.open_interveiw .carousel-indicators {
  bottom: -1rem;
}
/******** Footer */
.footer_sec {
  background-image: url(../img/banner/footer.png);
  height: auto;
  text-align: right;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.footer_sec > .container > .row > .head_padd {padding-top: 5rem;}
.footer_sec .col-sm-3 {
margin-right: 5rem;
margin-bottom: 31px;
}
.footer_sec .col-sm-3 img {
  position: absolute;
  right: -52px;
}
.footer_sec h2 {
  font-weight: bold;
}
.footer_sec p {
  font-size: 21px;
}
.footer_sec h2,
.footer_sec p {
  display: inline-block;
}
.footer_sec .copy_right {width: auto;}
.footer_sec .copy_right img {margin: 0}
.footer_sec .copy_right p{font-size: 18px; margin: 0;}
.footer_sec  .design {
  margin-left: 0rem;
  margin-top: 0;
  margin-bottom: 0;
}

.mail input {
outline: none;
background: transparent;
border: none;
border-bottom: 2px solid #999;
}
.top-01 {
margin-top: 50px;
padding-bottom: 50px;
}

.login-alnahj {
text-decoration: none;
text-decoration-line: none;
color: #0c4d9e;
transition: .3s all ease-in;
}

.login-alnahj:hover {
text-decoration: none;
color: #cc6135;
}

/*
.footer_sec  .design a  p {color: #da2b2b; font-size: 16px;}
.footer_sec  .contact {
  margin-left: -10rem;
  padding-top: 7rem;
  margin-bottom: 0;
}*/
.footer_sec  .contact a {color: #fff}



#home .home , #about_us .about , #audios .audios , #articals .articals ,body#contact_us .contact ,#lessons_schedule_schedule .lessons , #videos .videos , #fatawah .fatawah , #session .session {
background-color: #cc6135;
color: #fff;
border-radius: 10px;
}










/* About US */
.contact-whith-us-sec .container .row .col-sm-12 .card-body {
  text-align: left;
}

.contact-whith-us-sec .container .row .col-sm-12 .card-body h1 {
margin-bottom: 50px;
}


.list-title {
text-align: left;
margin: 20px 50px;
}

.list-title p {
text-align: left;
margin-right: 20px 50px;
}

.list-title p span {
  background: #efefef;
  color: #000;
  text-align: center;
  font-size: 10px;
  border-radius: 50px;
  margin-right: 10px;
}
.list-title p span svg:not(:root).svg-inline--fa {
margin-left: 5px;
margin-right: 5px;
}

.about-meddel-sec .container .row .col-lg-12 .card-body {
text-align: center;
color: #0c4d9e;
font-size: 1.2em;
padding-top: 50px;
padding-bottom: 50px;
}
/* End About US */



/* Home */
#logo_media, #media_pic  {
  width: 20vmin;
  margin-top: 8%;
  margin-left: 15px;
  margin-bottom: -40px;
}
#wrapper{
/* height: 400px; */
margin: 10px auto;
margin-bottom: 30px;

}
#pnav{
/* background-color: #fff; */
/* width: 389px;
padding-bottom: 3px;
height: 218px; */

}

#defaultBar{
width: 389px;
position: relative;
top: 150px;
background-color: #606060;
height: 10px;
}

#progressBar{
position: relative;
height: 10px;
background-color: #3498db;
}


#all-buttons {
margin-top: 23%;
margin-left: 2%;
}

#playButton {
outline: none;
border: none;
top: -11px;
left: 20px;
position: relative;
background: transparent;
color: #0c4e9e ;
cursor: pointer;
}


#playButton .fa-play-circle {
font-size: 20px;
position: absolute;
}

#playButton .fa-pause {
display: none;
position: absolute;
}
.media_sec {
  /* background: #acb9b882;
  border: 1px solid transparent;
  border-radius: 15px; */
 background-image: url(../img/base/background-dark.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 100%;
  padding: 10px 10px;
  margin-right: -115px;
}


#muteButton{
outline: none;
border: none;
top: -11px;
position: relative;
left: 60px;
background: transparent;
cursor: pointer;
}

#muteButton .fa-volume-up, .fa-volume-off {
font-size: 20px;
position: absolute;
color: #0c4e9e;
direction: left;
}

#muteButton .fa-volume-off {
display: none;
direction: left;
margin-left: -1px;
}

#vol-control {
margin-left: 70px;
width: 100px;
margin-top: -2px;
/* transform: rotate(180deg); */
}

#ex1Slider .slider-selection {
background: #BABABA;
}

input[type=range] {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 100%; /* Specific width is required for Firefox. */
background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}

input[type=range]:focus {
outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
width: 100%;
cursor: pointer;

/* Hides the slider so custom styles can be added */
background: transparent;
border-color: transparent;
color: transparent;
}


/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #000000;
height: 16px;
width: 16px;
border-radius: 50%;
background: #ffffff;
cursor: pointer;
margin-top: -4px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}

input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}

input[type=range]:focus::-webkit-slider-runnable-track {
background: #367ebd;
}

input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}

input[type=range]::-ms-track {
width: 100%;
height: 8.4px;
cursor: pointer;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-upper {
background: #367ebd;
}

#playButton:active,#muteButton:active{
position: relative;

}

.dropdown-rideo {
position: relative;
top: 0;
left: 0;
border-radius: 20px;
}

.dropdown-rideo select {
  top: -30px;
  /* left: 255px; */
  right: 3%;
  padding: 2px;
    width: 30%;
    outline: none;
  background: transparent;
  border-radius: 20px;
  position: absolute;
}

.dropdown-rideo select option {
background-color: rgba(0, 0, 0, .1);
color: gray;
padding: 10px 15px;
height: 20px;
cursor: pointer;
}
/* End Home */









.audio-clannels
{
  background-image:url(../img/base/background-dark.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 389px;
  height: 218px;
}

.audio-clannels .col-content
{
  position:  relative;
  bottom: -35px;
}

.audio-clannels .row-images div
{
  width:50%
}
.audio-clannels .row-images img
{
  width: 90%;
  height: auto;
  margin: 15px;
}


.row-buttons{
  /* padding: 0px 6% 0 0; */
  padding: 0px 6% 0 3%;
  /* width: 100%; */
}

.row-buttons .play,.row-buttons .mute
{
  border: none;
  background: transparent;
  width:10%
}

.row-buttons .div-volume
{
  width:30%
}
.row-buttons .div-channels
{
  width:50%;
}

.row-buttons .play i,.row-buttons .mute i,.row-buttons .div-volume .vol-control
{
  cursor: pointer;
  font-size: 20px;
  color: #0c4e9e;
}
.fa-volume-off {
  margin: -13px -12px;
}

.div-channels select {
  padding: 2px;
  outline: none;
  background: transparent;
  border-radius: 20px;
  float: right;
}

.div-channels select option {
background-color: rgba(0, 0, 0, .1);
color: gray;
padding: 10px 15px;
height: 20px;
cursor: pointer;
}

.div-volume .slider-handle {
  border: 1px solid rgb(204, 204, 204);
  box-shadow: 0px 0px 2px 1px;
  background: #0c4e9e;
}

.div-volume .slider-track-high, .div-volume .slider-track-high {
  background: #6c75a2;
}

.div-volume .slider-selection, .div-volume .slider-track-low {
  background: #0c4e9e;
}

/* new artical */
@import url(https://fonts.googleapis.com/css?family=Lato:400,600,700);
.snip1527 {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
color: #ffffff;
/* float: left; */
font-family: 'Lato', Arial, sans-serif;
font-size: 16px;
margin: 10px 1%;
max-width: 310px;
min-width: 250px;
overflow: hidden;
position: relative;
text-align: left;
width: 100%;
margin: auto;
margin-top: 2em;
}
.artical_card{
width: 96% !important;
}
.snip1527 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}

.snip1527 img {
max-width: 100%;
vertical-align: top;
position: relative;
}

.snip1527 figcaption {
padding: 25px 20px 25px;
position: absolute;
bottom: 0;
z-index: 1;
}

.snip1527 figcaption:before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #700877;
content: '';
background: -moz-linear-gradient(90deg, #700877 0%, #ff2759 100%, #ff2759 100%);
background: -webkit-linear-gradient(90deg, #700877 0%, #ff2759 100%, #ff2759 100%);
background: linear-gradient(90deg, #700877 0%, #ff2759 100%, #ff2759 100%);
opacity: 0.8;
z-index: -1;
}

.snip1527 .date {
background-color: #fff;
border-radius: 50%;
color: #700877;
font-size: 18px;
font-weight: 700;
min-height: 48px;
min-width: 48px;
padding: 10px 0;
position: absolute;
right: 15px;
text-align: center;
text-transform: uppercase;
top: -25px;
}

.snip1527 .date span {
display: block;
line-height: 14px;
}

.snip1527 .date .month {
font-size: 11px;
}

.snip1527 h3,
.snip1527 p {
margin: 0;
padding: 0;
}

.snip1527 h3 {
display: inline-block;
font-weight: 700;
letter-spacing: -0.4px;
margin-bottom: 5px;
}

.snip1527 p {
font-size: 0.8em;
line-height: 1.6em;
margin-bottom: 0px;
}

.snip1527 a {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 1;
}

.snip1527:hover img,
.snip1527.hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}


/* new artical */
/* Video Page */
.custom-video .yt-link, .custom-video .yt-link:hover, .custom-video .yt-link:focus {
text-decoration: none;
}

.custom-video .yt-bg {
width: 300px;
height: 180px;
display: block;
background-size: contain;
background-repeat: no-repeat;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
}

.custom-video .uk-icon-youtube-play {
font-size: 40px;
color: #322;
}

.custom-video .uk-modal {
background: rgba(0, 0, 0, 0.95);
}
/*# sourceMappingURL=ggg.css.map */
/* Video Page */


/* custom */
.lesson-sec.custom .header-icon {
position: inherit;
margin: auto;
}

.lesson-sec.custom .carousel-item {
height: auto;
padding: 0;
}
.lesson-sec.custom .carousel-inner {
/* overflow: inherit !important; */
}
.lesson-sec.custom .card-title {
margin: auto !important;
position: inherit !important;
text-align: center !important;
}
.lesson-sec.custom .card-body {
opacity: 0;
height: 0;
padding: 0 !important;
margin: 0 !important;
}
.lesson-sec.custom .container-fluid .card .row {
margin-top: 40px !important;
}
.lesson-sec.custom .card-title {
padding: 48px 6px !important;

}
/*# sourceMappingURL=ggg.css.map */
/* custom */
/*s*/

.mt-30{
margin-top: 30px !important;
}
#fixedAudio .card-body{
position: absolute;
}
@media screen and (max-width: 480px) {
.sec_sound_artic .card-more {
    right: -67% !important;
}
}
.badge{
white-space: normal;
font-size: 100%;
}