/*
  primary #0099ff
secondary #636359
danger #B22221
*/

/*-- Body Reset --*/
body {
  overflow-x: hidden;
/*  font-family: 'Barlow Condensed', sans-serif;*/
font-family: 'Josefin Sans', sans-serif;
/*font-family: 'Open Sans', sans-serif;
font-family: 'Roboto Mono', monospace;
font-family: 'RocknRoll One', sans-serif;*/
  color: #000;
  font-size: 1.3rem;
}




/*============= TOP BAR HEADER =============*/
.top-bar{
  background: #3C6BAE;
  height: 2%;
  padding-top: 0.2rem;
  padding-bottom: 0.1rem;
  color: white;
}

.top-bar a{
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
  padding: 0 2.5rem ;
}

/*============= NAVIGATION =============*/

.navbar-brand img{
  height: 6rem;
}


.navbar {
  font-size: 1.05rem ;
  font-weight: 600;
  letter-spacing: 0rem;
  box-shadow: 0 .5rem .5rem rgba(0,0,0,.1);
  z-index:1;

  background: #636359;
  
}




.nav-item{
  padding: 0.05rem;
  border: 0px solid #B22221;
}

.nav-link{
  color: #d5d5d5!important;
  font-size: 1rem!important;
  font-weight: normal;
  color: #e5e5e5!important;
}

.nav-link.active{
  color: #fff!important;
}
.nav-link:hover{
  color: #fff!important;
  border-bottom: 0px solid #c1c1c1;
  background-color: #dc3545;
}

.dropdown-menu{
  background-color: #636359;
  position: absolute;

  border: 2px solid #545454;

}

.dropdown-item{
  color: #f5f5f5;
}
.dropdown-item:hover{
  background-color: #dc3545;
  color: white;
}
.dropdown-divider{
  border: 1px solid #545454;
}

#footer{
  color: #e5e5e5;
}

.dby{
  font-size: 0.925rem;
  color: #d5d5d5;
}

.gallery-home{
  width: 25%;
  padding: 1rem;
}



/*============= CAROUSEL =============*/
/*#carousel{
  box-shadow: 0 1rem 1rem rgba(0,0,0,.1);
}*/

.carousel-inner{
  max-height: 35rem!important;
}


/*---Change Carousel Transition Speed --*/
.carousel-item-next, 
.carousel-item-prev,
.carousel-item.active {
  transition: transform 1.6s ease
}


/*-- Carousel Content --*/

.carousel-caption{
  
  position: absolute;
  top: 5%;
  left: 40%;
  width: 60%;
  height: 15%;
  text-align:left;
  transform: translateY(-50%);
  /*border: solid 1px red;*/
}
.bg-custom{
  /*background-color: rgba(200,200,200,.7);*/
  color: white;
  padding: 2rem;


}

.carousel-caption h1{
  font-size: 2.9rem;
  color: black;
}

.border-secondary{
  border-top: .1rem solid #323232!important;

}

.carousel-caption h3{
  font-size: 1.9rem;
}

ul.lstFclts {
  
  margin: .5rem;
  padding: 0;
  list-style-type: none;
  line-height: 2.0rem;
}

.fcl{
  font-size: 1.5rem;
  padding: 0.5rem;
  margin: 1.5rem;
}

.round-corner{
  border: 2px solid #636359;
  border-radius: 1%; 
}

.playbtn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  animation: pulse-border 1s linear infinite;

}

.border-animation{
  position: absolute;
  
  width: 6rem;
  height: 6rem;
  border: 0.55rem solid red;
  top: 46%;
  left: 48%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  animation: pulse-border 1s linear infinite;
  
}

@keyframes pulse-border{
    0% {
      transform: scale(1);
    }
    100%{
      transform: scale(1.2);
    }
}

.bg-primary{
  background-color: #0099ff!important;
}

.bg-secondary{
  background-color: #636057!important;
}

/*.bg-danger{
  background-color: #B22221!important;
}*/

/*.btn-danger{
  background-color: #B22221!important;
}*/

.text-primary{
  color: #0099ff!important;
}

/*.text-danger{
  color: #B22221!important;;
}*/

.text-secondary{
  color: #636057!important;
}





/*===== FIXED BACKGROUND IMG =====*/

.fixed {
  background-image: url('../img/simba.jpg');
  position: fixed;
}

.fixed-background {
    padding: 10rem 0;
}

.fixed-background h1 {
  font-size: 4.5rem;
}

.fixed-background h2 {
  font-size: 3rem;
}

/*-- Emoji Navbar --*/



/*============= FOOTER =============*/
footer{
  background-color: #fff8;
  padding: 1rem 2rem 3rem;
}

footer img{
  height: 12rem;
  margin: 1.5rem auto;
  padding: 0.1rem;
  border: 3px solid #454545;
}


footer p, footer a, .socket a{
  color: white;
  text-decoration: none;
}



.sitecredit{
  color: #434343;
  font-size: 8px;
}
ul.social{
  list-style-type: none;
  display: flex;
  max-width: 10rem;
  margin: 0 auto;
  padding: 0;
}

footer .svg-inline--fa{
  font-size: 2.3rem;
}

footer .svg-inline--fa:hover{
  color: #68a0d2;
}


ul.social li{
  margin: 0 auto;
}


.container .pgallery img{
  height: 12rem;
  margin: 0.5rem auto;
  border: 3px solid #B6E6F4;
}

/*============= SOCKET =============*/

.socket {
  background-color: #353535;
  padding: 0%;
  border-top: 0px solid #434343;
  
}
.socket h5{
  color: #959595;
  font-weight: bold;
}

.socket img{
  height: 5rem;
}

/*============= MEDIA QUERIES =============*/

/* Devices under 1199px (xl) */
@media (max-width: 1199.98px) {

}
/* Devices under 768px (md) */
@media (max-width: 767.98px) {

}


/*============ BOOTSTRAP BREAK POINTS:

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) { ... }

=============*/

/*-- Bootstrap Mobile Gutter Fix --*/
.row, .container-fluid {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

/*-- Fixed Background Image --*/
.fixed-background {
  position: relative;
  width: 100%;
  z-index: 1000!important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -999 !important;
}
.fixed {
  z-index: -999!important;
  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;
}