/* Webfont: Lato-Hairline */@font-face {
    font-family: 'LatoWebHairline';
    src: url('../fonts/Lato-Hairline.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Lato-Hairline.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/Lato-Hairline.woff2') format('woff2'), /* Modern Browsers */
         url('../fonts/Lato-Hairline.woff') format('woff'), /* Modern Browsers */
         url('../fonts/Lato-Hairline.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Thin */@font-face {
    font-family: 'LatoWebThin';
    src: url('../fonts/Lato-Thin.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Lato-Thin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/Lato-Thin.woff2') format('woff2'), /* Modern Browsers */
         url('../fonts/Lato-Thin.woff') format('woff'), /* Modern Browsers */
         url('../fonts/Lato-Thin.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Light */@font-face {
    font-family: 'LatoWebLight';
    src: url('../fonts/Lato-Light.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Lato-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/Lato-Light.woff2') format('woff2'), /* Modern Browsers */
         url('../fonts/Lato-Light.woff') format('woff'), /* Modern Browsers */
         url('../fonts/Lato-Light.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Regular */@font-face {
    font-family: 'LatoWebRegular';
    src: url('../fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('../fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/Lato-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

body, html{
    font-family: "LatoWebLight";
    height: 100%;
    color: white
}

a {
    -webkit-transition: color 0.3s;
    -moz-transition:    color 0.3s;
    -ms-transition:     color 0.3s;
    -o-transition:      color 0.3s;
    transition:         color 0.3s;
}
a:hover { text-decoration: none}
#superbg{
    position:fixed;
    top:0;
    left:0;
    z-index:-1
}

#superbg img {
    position:fixed;
    top:0;
    left:0;
    z-index:-1
}


#header{
    margin: 0;
}

#header-content
{
    width: 350px;
    float: none;
    margin: 0 auto;
    padding: 30px 0 30px 0;
}

#header-content .logo{ 
    width: 280px;
    margin-top: -20px;
    margin-bottom: 30px;
}

.pageTitle{
    font-family: "Latowebhairline";
    text-transform: uppercase;
    color: #FFFFFF;
    text-align: center;
    letter-spacing: 1px;
    font-size: 30px
}

#principal_btns .col-2{
    padding : 2px !important
}

.principal_btn {
    width: 100%;    
    border-radius: 50%;
    float: none;
    background-color: #002340;
}
.principal_btn::after {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.principal_btn:hover{
    opacity: 0.7
}

.principal_btn span{
    font-family: "LatoWebRegular" !important;
    position: absolute;
    text-align: center;
    vertical-align: center;
    font-weight: 100 !important;
    font-size: 10px;
    color: white;
    width: 100%;
    left: 0;
    line-height: 60px;
    text-transform: uppercase;
}

#btn_we{ background-color : rgba(255, 54, 146, 0.4)}
#btn_we_watch{ background-color : rgba(0, 30, 255, 0.4)}
#btn_we_are{ background-color : rgba(255, 255, 30, 0.4)}
#btn_we_give{ background-color : rgba(130, 255, 30, 0.4)}
#btn_we_do{ background-color : rgba(180, 0, 255, 0.4)}
#btn_we_talk{ background-color : rgba(0, 255, 255, 0.4)}
#btn_we_thank{ background-color : rgba(255, 80, 0, 0.4)}


#content{
    padding: 20px 0 0px 0;
    margin: 0;
}

#bismillah{
    width: 128px;
    margin-bottom:40px;
    opacity: 0.7
}

#discover {
    display: block;
    width: 110px;   
    height: 110px; 
    border-radius: 50%;
    font-size: 11px;
    color: white;
    border: none;
    padding: 25px;
    background-color: rgba(135, 156, 163, 0.5)
}
#discover:hover{
    opacity: 0.9
}

#discover .inner_disc{
    display: block;
    border-radius: 50%;
    width: 60px;   
    height: 60px;
    line-height: 59px;
    background-color: #00003c 
}


#intro_text{
    margin-top: -80px;
    font-size: 16px;
    font-weight: lighter
}
/**** Carousel with fade effect ****/

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev
{
    /*SET IN BS AS FLEXBOX. SO PERSPECTIVE SCALE DID NOT WORK*/
    display:block;
}

.carousel-inner>.carousel-item>a>img,
.carousel-inner>.carousel-item>img,
.img-responsive
{
    display: block;
    max-width: 100%;
    height: auto;
}

.carousel-fade .carousel-inner .carousel-item {
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    -ms-transition-property: opacity;
    transition-property: opacity;
}

.carousel-inner .carousel-item,
.carousel-inner .active.carousel-item-left,
.carousel-inner .active.carousel-item-right
{
    opacity:0;
}

.carousel-inner .active,
.carousel-inner .carousel-item-next.carousel-item-left,
.carousel-inner .carousel-item-previous.carousel-item-right
{
    opacity: 1;
}

.carousel-inner{ overflow:visible !important}
.carousel-item{overflow:visible !important}

.carousel-item.active,
.active.carousel-item-left,
.active.carousel-item-prev,
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right
{
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.carousel{
    width: 100%;
    margin: 10px 0
}
.carousel-item{
    overflow:hidden
}
.carousel-item-content-circle {
    width: 100%;    
    border-radius: 50%;
    float: none;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.carousel-item-content-circle:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.carousel-item-content-square {
    width: 100%;    
    float: none;
    margin: 0 auto;
}
.carousel-item-content-square:after {
    content: "";
    display: block;
    padding-bottom: 70%;
}
.carousel-control-prev, .carousel-control-next{ opacity: 1}
.carousel-control-prev:hover, .carousel-control-next:hover{ opacity: 0.8 }


.carousel-item-small-icon
{
    background-color:#002340;
    border: 13px solid rgba(86, 169, 231, 0.9)
}

.arrow_slider_img { width: auto; max-width: 40px }

.image_slide {
    position:absolute;
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: 100%;
}

.icon_slide {
    position:absolute;
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: 100%;
}

.title_slide
{
    font-family:"LatoWebLight";
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    font-size: 34px;
    padding: 10px 0 0 0;

    margin : 0 -40px;
}

.title_slide_small
{
    font-family: "LatoWebLight";
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    font-size: 13px;
    padding: 10px 0 0 0;
    text-overflow:ellipsis;
    margin : 0 -10px;
}

.vertical_slide{
    margin-top:50px;
    font-size:22px
}

.title_list
{
    font-family: "LatoWebLight";
    font-weight: 100;
    color: #FFFFFF;
    text-align: center;
    font-size: 13px;
    padding: 10px 0 0 0;
    text-overflow:ellipsis;
    margin: -5px 0 20px 0;
    opacity: 0
}

.input_text{
    font-family: "LatoWebLight";
    font-weight: 400;
    width: 100%;
    background-color:#85C0EC;
    border-radius: 25px;
    height: 30px;
    border: none;
    text-align: center;
    color: #112B60;
    font-size: 14px;
    letter-spacing: 1px;
    margin: 7px auto;
}
.input_text:focus{
    outline: none;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #112B60;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #112B60;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #112B60;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #112B60;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #112B60;
}



.btn_circle
{
    width:45px;
    height: 45px;
    border-radius: 50%;
    opacity: 0.9;
    background-color: #989898;
    -webkit-transition: color 0.3s;
    -moz-transition:    color 0.3s;
    -ms-transition:     color 0.3s;
    -o-transition:      color 0.3s;
    transition:         color 0.3s;
}

.btn_circle:hover{
    background-color: #85C0ED;
}
.btn_col{
    margin:80px 0 0 0;
    padding: 0
}

.btn_container
{
    width: 120px;
    float: none;
    margin: 0 auto;
}

.justify-content-md-center{
    padding: 0;
    margin: 0
}



footer{
    margin-top: -150px;
    color:white;
    text-align: center;
    font-size: 12px;
    padding-bottom : 30px;
}

footer p{
    margin-bottom: 7px
}

footer a{
    font-size: 22px;
    color: white;
    font-weight: 100;
    margin : 0 15px
}

footer a:hover{
    color:#A21465
}

footer .copyright{
    font-size: 12px
}

.ptitle{
    text-align: center;
    font-size: 30px;
    text-transform: uppercase;
}

.psubtitle{
    font-family: 'LatoWebLight';
    text-align: center;
    font-size: 11px;
    font-weight: 900;
    margin-top : -18px
}

.pcontent form{
    padding : 0 20px
}

.form_message{
    padding : 10px;
    width: 100%;
    height: 100%;
    color: white;
    background-color: rgba(250, 250, 250, 0.3);
    font-size: 11px;
}

.pcontent input, .pcontent textarea{
    background-color: rgba(250, 250, 250, 0.3);
    width: 100%; 
    margin : 3px 0;
    color: white;
    border: none;
    padding : 2px 10px;
    font-size: 11px;
}

.pcontent input:focus, .pcontent textarea:focus{
  outline: 0;
  box-shadow: none;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    white;
}
:-moz-placeholder {  
   color:    white;
   opacity:  1;
}
::-moz-placeholder {  
   color:    white;
   opacity:  1;
}
:-ms-input-placeholder {  
   color:    white;
}
::-ms-input-placeholder {  
   color:    white;
}

::placeholder { 
   color:    white;
}

.pcontentBackground{
    background-color: rgba(22, 49, 91, 0.5) !important
}

.pcontent_text{
    margin : 5px 6px 5px 5px;
    font-size: 14px;
    max-height: 200px;
    overflow-y : auto
}

.pcontent_text::-webkit-scrollbar
{
    width: 3px;
    background-color: rgba(22, 49, 91, 0.5);
}

.pcontent_text::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px white ;
    background-color: white;
    border-left: 2px solid rgba(22, 49, 91, 1);
    border-right: 2px solid rgba(22, 49, 91, 1);
    margin : 5px;
}

.pcontent_text::-webkit-scrollbar-thumb
{
    border-radius: 50px;
    background-color: white;
}

.pcontent img{
    width: 100%;
    height: auto
}


.tavatar{
    display: block;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    background-color: #ffffff;
    overflow: hidden
}

.tavatar img{
    width : 100%;
    height: auto;
}

.tname{
    font-family: 'LatoWebLight';
    font-size: 12px;
    margin-top : 5px
}

.tcontact{
    margin-top : -10px
}

.tcontact a{
    font-size: 22px;
    color: white;
    margin: 0 13px;
    font-weight: 100
}

.tcontact a:hover{
    color:#A21465
}

#btns_action,#btns_action_form{
    margin-top: 20px
}

.btn_action img{
   width: 60px;
   margin: 2px;
}


.btn_action img:hover{
    opacity : 0.7;
    -webkit-backface-visibility: hidden;
}

.disable_btn{
    opacity: 1
}

#contents_container{

}

#contents_container .col-12{ 
    display: none
}


#contents_container  .active_content{
    /*display: block*/
}


/**** Clock ****/
.clock_container{
    max-width: 170px;
}

@media (max-width: 770px) { 
    .clock_container{
        margin: 0 auto
    } 
}
.clock {
    width: 45em;
    height: 45em;
    border-radius: 50%;
    background-color : rgba(250, 250, 250, 0.2);
    margin: auto;
    position: relative;
  }
  .clock div,
  .faceBox {
    border: 0;
    position: absolute;
    transform-origin: center bottom;
    -webkit-transform-origin: center bottom;
    -moz-transform-origin: center bottom;
    -o-transform-origin: center bottom;
    transform: rotate(0deg);
  }
  .clock .hour {
    /*border-radius: 0.75em 0.75em 0 0;*/
    width: 1em;
    height: 8.5em;
    top: 14em;
    left: 21.75em;
    background-color: white;
  }
  .clock .minute {
    /*border-radius: 0.5em;*/
    width: 0.35em;
    height: 11em;
    top: 11.5em;
    left: 22em;
    background-color: white;
  }
  .clock .second {
    width: 0.20em;
    height: 14em;
    top: 8.5em;
    left: 22.25em;
    background-color: white;
  }
  .clock .center {
    height: 3em;
    width: 3em;
    border-radius: 50%;
    top: 21em;
    left: 21em;
    transform: rotate(0deg);
    background-color: white;
  }

  .clock_label{
      font-size: 14px;
      text-align: center;
      background-color: rgba(51, 61, 66, 0.7);
      margin : 15px 10px 30px 10px;
  }
  .smallTick {
    width: 0;
    height: 0;
    background-color: white;
    margin: 0 1.45em;
  }
  .mediumTick {
    width: 0.25em;
    height: 4.5em;
    background-color: white;
    margin: 2em 1.375em;
  }
  .largeTick {
    width: 0;
    height: 0;
    background-color: white;
    position: relative;
    margin: 0 1.3em;
  }
  .tickNum {
    font-size: 5em;
    line-height: 0;
    color: white;
    position: relative;
    top: 1em;
    left: 0;
    padding: 0;
  }
  div.faceBox {
    border: 0;
    width: 3em;
    height: 22.5em;
    top: -0.5em;
    left: 20.5em;
    position: absolute;
    text-align: center;
    overflow: visible;
  }

  /*** End clock ***/

  .loader {
    margin: 0px auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-left-color: #ffffff;
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
  }

  .loader.big{
    width: 61px;
    height: 61px;
  }

  @-webkit-keyframes load8 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes load8 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }