.background {
    background-image:url(/images/bg/AquaFurLarge.jpg);
    background-repeat: repeat;        
}

@keyframes changeGradient {
    0% { opacity : 0; }
    10% { opacity : 0; }
    40% { opacity : 1.0; }
    50% { opacity : 1.0; }
    60% { opacity : 1.0; }
    90% { opacity : 0; }
    100% { opacity: 0; }
}

.bg-gradient {
    background-image: -webkit-linear-gradient(rgba(0,0,0,.99) 4% , rgba(255,255,255,0) 25%,
						  rgba(255,255,255,0) 80%, rgba(0,0,0,0.99) 95%);  

    background-image: linear-gradient(rgba(0,0,0,.99) 4% , rgba(255,255,255,0) 25%,
						  rgba(255,255,255,0) 80%, rgba(0,0,0,0.99) 95%);  
    
    position: relative;
    z-index: 100;       
}

.bg-gradient:before {
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.99) 12% , rgba(16, 246, 28, 0.4) 35%,
						  rgba(16, 246, 28, 0.4) 70%, rgba(0, 0, 0, 0.99) 88%);

    background-image: linear-gradient(rgba(0, 0, 0, 0.99) 12% , rgba(16, 246, 28, 0.4) 35%,
						  rgba(16, 246, 28, 0.4) 70%, rgba(0, 0, 0, 0.99) 88%);
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -100;

    animation-name: changeGradient;
    animation-duration: 15s;
    animation-iteration-count: infinite;
}

.banner-background {
    position: fixed;
    top: 50px;    
    right: 0px;
    left: 0px;
    z-index: 1030;
    background-color: black;
    min-height: 75px;
}

.banner {
    position: fixed;
    top: 50px;    
    right: 0px;
    left: 0px;
    padding-bottom: 5px;
    z-index: 1030;  
    background-color: black;     
}

.logo {
  color:#2FFD06;
  font-size: 40px;
  text-transform:uppercase;
  font-weight:400;
  font-family:'Knewave', cursive; 
  text-shadow: #fff 0px 0px 3px, #fff 0px 0px 3px, #fff 0px 0px 3px, #fff 0px 0px 3px;
  -webkit-font-smoothing: antialiased; 
}


.slogan {
    color:#fab66c;
    font-size: 24px;
    font-weight:400;
    font-family:'Knewave', cursive;   
}

.anchor-tag-offset {
    display: block;
    position: relative;
    top: -145px;
    visibility: hidden;
}

li {
    list-style: none;
}

/* ----------------- Navbar styles -------------------- */

.nav li{
    font-size: 16px;
}

.navbar {
    min-height: 50px;   
    background-color: black;   
    padding-top: 10px;  
}

.navbar-inverse .navbar-nav > li > a {
    color: #CCCCCC;
}

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
    color: #18f8f8;
}



.body-content { 
    margin-top: 90px;    
    padding-left: 45px;
    padding-right: 45px;   
}

.box-shadow {
    border: 3px solid #000;  
    box-shadow: 0 0 20px 5px #000;
}

/* --------------- Carousel styles -------------------- */

.carousel.fade {
  opacity: 1;
}

.carousel.fade .item {
  transition: opacity ease-out .7s;
  left: 0;
  opacity: 0; /* hide all slides */
  top: 0;
  position: absolute;
  width: 100%;
  display: block;
}

.carousel.fade .item:first-child {
  top: auto;
  opacity: 1; /* show first slide */
  position: relative;
}

.carousel.fade .item.active {
  opacity: 1;
}

.carousel-inner {
    border-radius: 10px;    
    overflow: hidden;
}

#imageCarousel {
    background-color:black;      
    border-radius: 10px;    
}

#carouselDiv {
    margin-top: 5px;
    margin-bottom: 30px;
}

#carouselDiv .col-xs-6 {
    padding-right: 2px;
    padding-left: 2px;    
}

.right.carousel-control {
    background-image:none;
}

.left.carousel-control {
    background-image:none;
}


/* ----------- Main content ----------------- */


/* The animation code */
@keyframes expandIn {
    0%   {transform: scale(0.5);}
    100% {transform: scale(1);}
}

/* The element to apply the animation to */
.main-content{
   animation-name: expandIn;
   animation-duration: 1s;
} 



.main-content {    
    background-color: #fab66c;
    border-radius: 10px;    
    padding: 5px 30px 20px 30px;         /*top - right - bottom - left*/
    margin-bottom: 40px;
    margin-top: 0px; 
    width: auto;    
}

.main-content h1 {
    color: #18f8f8;
    font-weight: 800;
    text-shadow: 0 0 3px #000, 0 0 6px #000;
    margin-bottom: 20px;
}


.main-content h2 {
    color: #2FFD06;
    font-weight: 800;
    text-shadow: 0 0 3px #000, 0 0 6px #000;
    margin-bottom: 15px;
}

.main-content h3 {
    color: #18f8f8;
    font-weight: 800;
    text-shadow: 0 0 3px #000, 0 0 6px #000;
}

.main-content-img {
    margin-top: 20px;
    margin-bottom: 20px;
    border:4px #444 solid;
    border-radius: 5px;
}

.main-content hr {
    border-top: 2px solid #fbc181;    
}

.main-content a {
    color: #2FFD06;
    font-weight: 800;
    text-shadow: 0 0 3px #000, 0 0 6px #000;
    text-decoration: none;
}


.main-content a:hover {
    color: #09abe0;
}

.social-icons img{
    border: none;
}

/* ----------------- Image Gallery ----------------------- */

.img-gallery div {  
    margin: 0px !important;
    padding: 5px !important;
}

.img-gallery img, iframe {
    border:4px #444 solid;
    border-radius: 5px;
}



/* ----------------- Popular Videos ------------------*/

.popular-videos iframe{
    margin-top:30px;    
    margin-bottom: 10px;
    width: 90%;
    height:280px;    
    border:4px #444 solid;
    border-radius: 5px;
}

.popular-videos h3 {
    margin-left: 16px;
}



/* ---------------- Footer styles -------------------*/

footer {
    margin-top: 30px;
    text-align: center;
}

footer p {
    font-size: 16px;
    color: #ccc;
}

/* ----------------- Login Page ----------------------*/

.checkbox {
    margin-left: 20px !important;
}