html {scroll-behavior: smooth;}
.active, .dot:hover{background-color:inherit !important;}
.reg-bg .container, footer .container{background-color:inherit !important;}
.faq h5{white-space: break-spaces; text-align:left;}
.pink{background-color:#fb33db;}
.carefont{font-family:'Anton', sans-serif;}
.font-p{font-family: 'Sanchez', serif; font-size:22px !important;}
.form-control{background-color:rgba(255,255,255,0.7); margin-bottom:5px;}
body p{font-family: 'Titillium Web', sans-serif; font-size:16px; }
body h3, body h2{font-family: 'Oswald', sans-serif; font-weight:normal;}
.bg1{background: url("../assets/bg.jpg") repeat left center;}
.img-box {
    text-align: center;
    background: url("../assets/pattern1.jpg") no-repeat center center;
    padding: 0px 0 20px;
    margin: 10px auto 20px auto;
    border: 5px solid #CC6590;
}
.font-50{font-size:70px;}
.reg-bg{height:inherit; background: url("../assets/reg.jpg") no-repeat left top; background-size:cover;}
.reg-bg2{height:300px; background: url("../assets/about-us-2.jpg") no-repeat left -35px; background-size:cover;}

.pink2{background-color:#FF00CE!important;}
.pink2-color{color:#FF00CE!important;}
.pink3{background: #333333;  /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #dd1818, #333333);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #dd1818, #333333); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.pink4{background: #0310ea;}
.pink44{background:#CC6590;}
.white11{background:#7fff00; border-radius:5px;}
.pink5{background: #0310ea;}
.grey2{background-color:#3D3232}

label{margin-bottom:inherit; color:inherit;}
.btn-big{width: 100%; font-size: 30px; text-transform: uppercase;  font-weight: bold; background-color:#000; color:#fff;}
@media only screen and (max-width: 600px) and (orientation:portrait) {
.registration_form_s{margin-top:inherit;}
.reg-bg{height:inherit !important;}
}

@media only screen and (max-width: 750px) and (orientation:landscape) {
.registration_form_s{margin-top:-250px !important;}
}


#error, #success {overflow: hidden; clear: both; width: 100%; display: none;}
textarea {overflow: auto; resize: vertical; width: 100%; min-height: 250px; border-radius: 5px; border: 1px solid #ccc;}

.login_btn{font-size:25px; color:#fff; text-transform:uppercase;}
form#contactForm{width:100%;}



/*=== Gallery ===*/
.gallery {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-width: 33%;
    -moz-column-width: 33%;
    column-width: 33%; }
.gallery .pics {
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease; }
.gallery .animation {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }

@media (max-width: 450px) {
    .gallery {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
        -webkit-column-width: 100%;
        -moz-column-width: 100%;
        column-width: 100%;
    }
    
}

@media (max-width: 400px) {
    .btn.filter {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }
}



.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover, .nav-link.active{background-color:#CC6590;}

.card{background:inherit !important; border:inherit !important;}
.card img {margin-bottom: 8px;  border-radius: 100%; border: 1px solid #666;}

form label{margin:25px 0 8px 0;}
.prev:hover, .next:hover{color:#fff !important;}








/*======================= carrousel =====================================*/
@media (min-width: 768px) {

    /* show 3 items */
    .carousel-inner .active,
    .carousel-inner .active + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item  {
        display: block;
    }
    
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }
    
    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    
    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}

 /* Bootstrap Lightbox using Modal */

#profile-grid { overflow: auto; white-space: normal; } 
#profile-grid .profile { padding-bottom: 40px; }
#profile-grid .panel { padding: 0 }
#profile-grid .panel-body { padding: 15px }
#profile-grid .profile-name { font-weight: bold; }
#profile-grid .thumbnail {margin-bottom:6px;}
#profile-grid .panel-thumbnail { overflow: hidden; }
#profile-grid .img-rounded { border-radius: 4px 4px 0 0;}





/*=== animaton 2 =================*/
.btn.ani2 {
  background-color: #FFFF00;
  animation-name: example;
  animation-duration: 2s;
  animation: example 2s infinite;
}

@keyframes example {
  0% {background-color: #FFFF00;}
  50% {background-color: #000; color:yellow;}
  100% {background-color: #FFFF00;}
}

/*=== animaton 3 =================*/
.ani3 {
  background-color: #751259;
  color:#000;
  animation-name: join2;
  animation-duration: 1.5s;
  animation: join2 1.5s infinite;
}

@keyframes join2 {
  0% {background-color: #751259; color:#fff;}
  50% {background-color: #ffff00; color:#000;}
  100% {background-color: #751259; color:#fff;}
}
.ani3:hover{	
	animation-duration: 0s;
  animation: join2 0s infinite;	
}

/*=== animaton 4 =================*/
.ani4 {
 background-color:#ff00fe;
 color:#fff;
  animation-name: textani;
  animation-duration: 0.5s;
  animation: textani 0.5s infinite;
}

@keyframes textani {
  0% {background-color:#ff00fe; color:#fff;}
  50% {background-color:#02ff02; color:#000;}
  100% {background-color:#ff00fe; color:#fff;}
}
.ani4:hover{	
	animation-duration: 0s;
  animation: textani 0s infinite;	
}




.number-highlight3 {
  background-color: yellow;
  color:#000;
  animation-name: btnAni3;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  line-height:1.7;
}

.number-highlight3:hover{animation-duration: 0s;  background-color: yellow; color:#000;}

@keyframes btnAni3 {
  0% {background-color: yellow; color:#000;}
  50% {background-color: black; color:#fff;}
  100% {background-color: yellow; color:#000;}
}

/* cusom gallery for premium profile page*/
p.addf{margin-top:-30px;}
p.addf a{text-align:center;}
p.addf a.message-f{position:relative; top:18px;}
.card p.addf a{display:inline-block;}
.card p.addf a:last-child{position:relative; top:17px;}
.card p.addf small{display:block;}

.card-img{width:97% !important;}
.card-title{margin-bottom:0;}
.card-body{line-height:normal;}


/*======= number highlight 4 =====*/
.number-highlight4 {
  background-color: #1e40a0;
  animation-name: btnAni4;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.number-highlight4:hover{animation-duration: 0s;  background-color: #1e40a0;}

@keyframes btnAni4 {
  0% {background-color: #fff; color:#000;}
  50% {background-color: #1e40a0; color:#fff;}
  100% {background-color: #fff; color:#000;}
}

/*=== animaton 3 =================*/
.ani3 {
  background-color: #751259;
  color:#000;
  animation-name: join2;
  animation-duration: 1.5s;
  animation: join2 1.5s infinite;
}

@keyframes join2 {
  0% {background-color: #751259; color:#fff;}
  50% {background-color: #ffff00; color:#000;}
  100% {background-color: #751259; color:#fff;}
}
.ani3:hover{	
	animation-duration: 0s;
  animation: join2 0s infinite;	
}