/*General CSS Rules*/
body {
/*    overflow: hidden;*/
    overflow-x: hidden;
    font-family: 'Lato',sans-serif;
    color: #505962;
}
.btn {
    border-radius: 15px 0px !important;
    line-height: 1;
}
.btn-lg {
    border-width: medium;
    border-radius: 0;
    text-transform: uppercase;
    font-size: .8rem !important;
    font-weight: bold;
}
.btn-warning {
    background: #e58221 !important;
    color: #fff;
    border-color:  #e58221; 
}
/*     Navbar   */
.offset:before {
    height: 3.9rem;
    margin-top: 3.9rem;
    content: '';
    display: block;
}
.header-wrapper {
	width: 100%;
	height: 70px !important;
    padding-top: .4rem;
	background-color: #f8f9fa;
}
.container  {
    padding-right: 0px !important;
    padding-left: 0px !important;
}
.logo {
	margin: 0 auto !important;
    height: 3.5rem !important;
}
.menu {
    color: #fff;
}
#header-btn {
    margin: .6rem 0rem 0rem !important;
    padding-left: .2rem;
    padding-right: .2rem;
}
.nav-link {
 	text-transform: uppercase;
 	border-bottom: 1px solid #eee;
 	padding-bottom: 5px;
 	color: #fff !important;
 	font-weight: bold;
 }
.nav-link:hover {
   color: #a5b3be!important; 
}
#masterheader button {
	border: none !important;
}

.navbar {
    text-transform: uppercase;
    font-family: 'lato',sans-serif;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .1rem;
    background: rgba(9, 83, 110, 1)!important;
}
.navbar-brand img{
    height: 2rem;
}








.navbar-nav li {
    padding-right: .7rem;
}
.navbar-dark .navbar-nav .nav-link {
    color: white;
    padding-top: .8rem;
}
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover {
    color: #1ebba3;
}
/*  Slider  */

.carousel-item {
    height: 65vh;
}
.carousel-caption {
    position: absolute;
    top:0%;
    text-transform: uppercase;
    right: 5%;
    left: 5%;
}
.about .carousel-caption {
    position: absolute;
    top:65%;
    text-transform: uppercase;
    right: 50%;
    left: 7%;
}
.program-detail .carousel-caption {
    position: absolute;
    top:65%;
    text-transform: uppercase;
    
}
.gallery .carousel-caption {
    position: absolute;
    top:20%;
    text-transform: uppercase;
    right: 50%;
    left: 7%;
}
.gallery .carousel-item {
    height: 20vh;
}
/*Images Style*/
.gallery-row img {
  -webkit-transition: all 0.7s ease !important;
  transition: all 0.7s ease !important;
}
.gallery-row img:hover {
  opacity: 0.7 !important;
  filter: alpha(opacity=70) !important;
}
.about-title {
    padding-left: 25px;
}

/*
.carousel-caption .inner-row {
    margin: 0 .5rem !important;
}
*/
.carousel-caption h1 {
    font-size: 2rem !important;
    font-weight: 700;
    right: 0;
    left: 0;
    width: 100%;
    text-shadow: .1rem .1rem .2rem black;
    padding-bottom: 1rem;
    margin: 0;
}

.carousel-caption .btn {
    margin-bottom: .6rem !important;
}
 .carousel-caption h1 {
        font-size: 2.7rem;
        letter-spacing: .01rem;
        padding-bottom: .5rem;
    }

    .carousel-caption h3 {
        font-size: 1.2rem;
        padding-bottom: 1.2rem;
    }

    .btn-lg {
        font-size: 1.1rem;
    }
    .narrow h1 {
        font-size: 1.5rem;
    }
    p.lead {
        font-size: 1rem;
    }


/* Start About Section */
.narrow {
    width: 75%;
    margin: 0 auto;
    padding-top: 2rem;
    padding-bottom: 1.9rem;
}
.heading-underline {
    width: 3rem;
    height: .2rem;
    background-color: #b6b6b7;
    margin: 0 auto 2rem;
}
[class*="col-"] {
     padding-top: 0 !important;
     padding-bottom: 0 !important;
}
.btn-block {
    border-width: medium;
    border-radius: 0;
    padding: .5rem 1.1rem;
    text-transform: uppercase;
    margin-bottom: .4rem;
    font-size: .9rem;
}
h3.heading {
    font-size: 1.5rem;
    font-family: lato;
    font-weight: 700;
    text-transform: uppercase !important;
}
/*  margin: 1rem;
}
.jumbotron {
    border-radius: 0;
    padding: 3rem 0 2rem;
    margin-bottom: 0;
}
.h3.heading {
    font-size: 1.9rem;
    font-weight: 700;
    text-transform: uppercase;
}

/*End About Section*/

/*--- Start Programmes ---*/
/* transitions */
.transition{
  -moz-transition: 0.50s;
  -webkit-transition: 0.50s;
  -ms-transition: 0.50s;
  -o-transition: 0.50s;
  transition: 0.50s;
}
.opacity{
  opacity: 0.85;
  filter: alpha(opacity=85);
}

.module{
  max-width: 600px;
  margin: auto;
}
.module figure{
  position: relative;
  overflow: hidden;
  border: 1px solid #fff;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.module .small{
  width: 100%;
}
.module figure img{
  display: block;
  max-width: 100%;
}
.module figcaption{
  position: absolute;
  bottom: 0%;
  width: 100%;
  max-height: 40px;
    margin-right: auto;
}
.module .text{
  color: #fff;
  background-color: #000;
  font-size: 1em;
}
.module figure:hover figcaption{
  max-height: 100%;
}
.module figure:hover figcaption .text{
  background-color: #000;
  color: #fff;
}
.module figcaption a{
  /*display: block;*/
  text-decoration: none;
  padding: .2rem;
}
.module .title{
  display: block;
  padding: 5px 5px 5px 15px;
  text-transform: capitalize;
    font-size: 1.5em;
}
.module .desc{
  display: block;
  padding: 0px 15px 15px 15px;
}
.bgcolor{
  background-color: #fff;
}

/* hover over the image to see the caption appear! */


.row.no-padding [class*=col-] {
    padding: 0;
}
.col-lg-2 {
    width: 100%;
    min-height: 1px;
    padding-right: 2px !important;
    padding-left: 2px !important;
}
.col-2dot4,
.col-sm-2dot4,
.col-md-2dot4,
.col-lg-2dot4,
.col-xl-2dot4 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 2px !important;
    padding-left: 2px !important;
}
.program-row {
    margin-left: 1px !important;
    margin-right:   1px !important;
}
.col-2dot4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

#portfolio {
    overflow: hidden;
}
#portfolio .card {
    margin: .5rem !important;
}
#portfolio .card h4 {
    font-size: 1.5rem!important;
}
#portfolio .card .img {
    height: 50% !important;
    width: 100%!important;
}
.programmes .card {
    margin-bottom: .4rem;
}
 #programmes .card {
        background-color: transparent;
    }
 #programmes .card .card-img-top{
        background: #b7b7b7;
    }
#news .card {
    border-radius: 0px !important;
}
#news h3 {
    font-size: 1.5rem;
    font-weight: 500;
    color: rgba(9, 83, 110, 1)!important;
}
#news .card .btn {
     border-radius:  0px !important;
}
.jumbotron {
    margin-bottom: 0 !important;
}

/* Start Get Involved Options*/

.options .card-title {
    font-weight: 600;
    font-size: .9rem;
}
.options .card-header{
    font-weight: 800;
}
/* End Get Involved Options*/

/*--- End Programmes ---*/

/*--- Start Qoute ---*/
#quote .jumbotron{
    background-image: url(/img/qoute.png); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
   
}
#quote p{
  font-family: Georgia;
    font-size: 1.rem;
    color: #fff;
    text-transform: capitalize;
    text-shadow: .1rem .1rem .2rem black;
}
#qoute p small{
    font-family: Rochester !important;
    color: blue !important;
}
/*--- End Qoute ---*/

/*--- Start Children's rights sectiomm ---*/
.video-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.video-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*--- End Children's rights sectiomm ---*/

/*    Contact   */
.box {
  position: relative;
  line-height: 0px;
  height: 1rem;
  width: 100%;
}

.one:before {
  background: linear-gradient(to right, #0a6ab2 37%,#31333e 5%);
  position: absolute;
  content: '';
  height: .2rem;
  right: 0px;
  left: 0;
  top: 20px;
}


.two:before {
  background: linear-gradient(to right, #d71bff 46%,#31333e 5%);
  position: absolute;
  content: '';
  height: .2rem;
  right: 0px;
  left: 0;
  top: 20px;
}


.three:before {
  background: linear-gradient(to right, #fa005e 41%,#31333e 5%);
  position: absolute;
  content: '';
  height: .2rem;
  right: 0px;
  left: 0;
  top: 20px;
}


footer {
    background-color: #1a1c28;
    color: white;
    padding: 3.5rem 0 0rem ;
    margin-top: 1rem;
    font-family: lato;
}
.child-footer {
    height: 60px;
    width: 100%;
    background: #141622;
}

.footer-title {
    /*text-transform: uppercase;*/
    font-size: 1.4rem;
}
/*.footer-title span {
  font-weight: lighter;
}*/
.footer-subtitle {
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 700;
}
footer img {
    height: 3rem;
    margin: 1.5rem 0;
}
footer fab{
    color: #fff !important;
}
.footer-about a{
    color: #0b7ed5 !important;
}
footer .footer-about a:hover{
    color: #b6b6b7 !important;
}
footer .learn-more:visited{
    color: #0b7ed5 !important;
}
footer svg.svg-inline--fa {
    color: #fff !important;
    font-size: 1.6rem;
    margin: 1.2rem .5rem 0 0;
}
footer svg.svg-inline--fa:hover {
    color: #b6b6b7 !important;
}
footer .copyright-bg {
    padding: 0 !important;
    background-color: #141622;
    height: 4rem;
    text-align: center;
    
}
.copyright-bg .copyright-text {
    margin-top: 1.1rem !important;
    font-size: .9rem;
}
.copyright-bg .copyright-text span {
    font-weight: bold !important;
    color: #fa005e;
}
.socket {
    border-top: .2rem solid #666b71;
    width: 100%;
}


/*---Media Queries --*/

@media (min-width: 540px) {
      .col-sm-2dot4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}


@media (min-width: 576px) {
 
  .logo {
       height: 4.5rem !important;
   }
    .nav-link {
        border-bottom: none;
        font-size: .8;
    }
   #header-btn {
       margin: 1.1rem 0rem 0rem !important;
       padding-left: .8rem;
       padding-right: .8rem;
   }
   .header-wrapper {
       width: 100%;
       height: 80px !important;
       background-color: #f8f9fa;
   }
   
   .carousel-caption {
       top: 8%;
       right: 10%;
       left: 10%;
   }
  
   .carousel-caption h1 {
       font-size: 2.5rem !important;
   }

    #quote p{
    font-size: 2.6rem;
}
   .container {
       padding-right: 15px !important;
       padding-left: 15px !important;
   }
    h3.heading {
        display: grid;
        grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
        align-items: center;
        text-align: center;
        grid-gap: 20px;
        width: 100%;
    }
    h3.heading:before,
    h3.heading:after {
        content: '';
        border-top: 2px solid #b6b6b7;
        border-top: 2px solid #b6b6b7;
    }
    .heading-underline {
        width: 0rem;
        height: 0rem;
        background-color: #b6b6b7;
        margin: 0;
    }
    #portfolio .card img {
/*        height: 20rem;*/
    }
    #programmes .jumbotron {
        padding: 1.875rem 0;
    }
    
    #programmes .card:hover{
        background: #eeecec;
        border: 3px solid #b6b6b7;
    }
    #rights .heading {
        margin-top: 1.875rem !important;
    }
    #programmes [class*=col-] {
        padding-left: 0 !important;
        padding-right: 0!important;
    }

    .visited {
        color: #a5b3be!important; 
    }
}
}

@media (min-width: 720px) {
     .col-md-2dot4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}
}
@media (min-width: 768px) {
    
    .nav-link {
        font-size: .9;
    }
    .carousel-caption {
         right: 13%;
         left: 13%;
     }
   .carousel-caption h1 {
       font-size: 3rem !important;
   }
    p.lead-text {
        font-size: 1.1rem !important;
    }
       #quote p{
    font-size: 3rem;
}
   
}

@media (min-width: 960px) {
    .col-lg-2dot4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}
}
@media (min-width: 992px) {
    .nav-link {
        font-size: 1rem;
    }
      .carousel-caption {
         top: 17%;
         right: 13%;
         left: 13%;
     }
    .carousel-caption h1 {
       font-size: 4rem !important;
   }
    p.lead-text {
        font-size: 1.2rem !important;
    }
       #quote p{
    font-size: 3rem;
}
  }
@media (min-width: 1140px) {
    .col=xl-2dot4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}


/*---Firefox Bug Fix --*/
.carousel-item {
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
/*--- Fixed Background Image --*/
figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0!important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#fixed {
  background-image: url('img/mac.png');
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
    padding: 1rem;
}





/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/