@import url(base.css);

.banner { background-color: #1e1e1e; clear: both; padding: 1% 0px; width: 100%; }
.banner .carousel-control-next img, .banner .carousel-control-prev img { margin-top: inherit; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }

.main-content { clear: both; padding: 25px 0px 50px; width: 100%; }
.main-content h2 { color: #9e005d; font-family: 'Sintony', sans-serif; font-size: 36px; font-weight: 700; margin: 25px 0px; text-transform: uppercase; position:relative; }
.main-content h2:before { content: ""; display: block; border-top: 1px solid #a10963; height: 1px; position: absolute; top: 50%; width: 100%; z-index: 1; }
.main-content h2 span { background: #fff; padding: 0px 20px 0px 0px; position: relative; z-index: 5; }
.main-content h3 { color: #666; font-family: 'Sintony', sans-serif; font-size: 30px; font-weight: 700; margin: 15px 0px 20px; text-transform: uppercase; }
.main-content h3 small { color: #666; font-size: 18px; font-weight: 700; }

.models-area { clear: both; width: 100%; }
.models-area .col { flex-basis: auto; max-width: 16.666%; margin: 0px 0px 35px; text-align: center; }
.models-area p { color: #666; font-size: 26px; margin: 15px 0px; }
.model { border: 5px solid #9e005d; border-radius: 100%; padding: 2px; position: relative; max-width: 190px; }
.model img { border: 5px solid #9e005d; border-radius: 100%; }
.model span { background-color: #00ff00; border-radius: 100%; bottom: 15px; display: block; height: 25px; position: absolute; right: 5px; width: 25px; z-index: 1; }

.video { clear: both; position: relative; width: 100%; }
.video span { bottom: 5px; color: #fff !important; font-size: 11px; position: absolute; right: 5px; width: auto !important; }
#carouselVideo .carousel-item p { color: #fff; font-family: 'Sintony', sans-serif; font-size: 25px; font-weight: 700; margin: 0px; position: absolute; bottom: 0; right: 0; width: 100%; text-align: right; display: block; background: rgba(0, 0, 0, 0.7); padding:10px; }
#carouselVideo .carousel-item span { color: #fff; display: inline-block; font-family: 'Sintony', sans-serif; font-size: 12px; font-weight: 700; }
.carousel-item .fa, .owl-carousel .fa { font-size: 14px; }
.carousel-item .fa-thumbs-up, .owl-carousel .fa-thumbs-up, .tab-content .item .fa-thumbs-up { color: #00ad00; }
.carousel-control-next, .carousel-control-prev { opacity: 1; width: 30px; }
.carousel-control-prev { margin-left: -55px; }
.carousel-control-next { margin-right: -55px; }
.carousel-control-next img, .carousel-control-prev img { margin-top: -55px; }

.carousel-item p, .item p { color: #9e005d; font-family: 'Sintony', sans-serif; font-size: 14px; font-weight: 700; margin: 10px 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; width: 100%; margin-bottom:0; }
.carousel-item span, .item span { color: #666; display: inline-block; font-family: 'Sintony', sans-serif; font-size: 12px; font-weight: 700; }


.deskhide { display: none; visibility: hidden; }

.modal-body, .video-js, video, .modal-content, .modal.fade .modal-dialog, .modal iframe { padding:0; border-radius:10px; }
.modal-content { background: #000; box-shadow: 0 0 20px 0px black; border: 0; box-shadow: 0 0 20px 0px #9f1e81; border: 1px solid rgba(157, 31, 129, 0.58); }
.modal-backdrop.show { opacity: 0.9; }
#player { width:100%; height:100%; min-height: 640px; margin-bottom:-7px; }
.carousel-item span > b, .item span > b { display: inline-block; background-color: #8d2384; padding: 0 4px; border-radius: 5px; border-top-right-radius:0; border-bottom-right-radius:0; margin-left: -5px; left: -2px; position: relative; }
.carousel-item .video >span, .item .video >span { background-color: rgba(0, 0, 0, 0.5); border-radius: 5px; padding-right: 5px; padding-left: 5px; }
.video .set_bg a:hover:after { content: ''; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 25px solid #9e005d; display: block; position: absolute; left: 52%; top: 50%; transform: translate(-50%,-50%); }

.textright { text-align:right; }

#carouselVideo .carousel-item span > b { display: inline-block; background-color: #8d2384; padding: 0 4px; border-radius: 5px; border-top-right-radius:0; border-bottom-right-radius:0; margin-left: -5px; left: -2px; position: relative; }
#carouselVideo .carousel-item span { background-color: rgba(0, 0, 0, 0.5); border-radius: 5px; padding-right: 5px; padding-left: 5px; }
#carouselVideo .carousel-item span {
    bottom: 10px;
    color: #fff !important;
    font-size: 11px;
    position: absolute;
    right: 10px;
    width: auto !important;
}
#carouselVideo .carousel-item span { font-size:13px; }



.videocontainer { position:relative; width:100%; padding:28% 0; background-size:cover; background-position:center; }
.play-btn {
  width: 100px;
  height: 100px;
  background: radial-gradient( rgba(159, 0, 93, 0.8) 60%, rgba(255, 255, 255, 1) 62%);
  border-radius: 50%;
  position: relative;
  display: block;
  margin: 0;
  box-shadow: 0px 0px 25px 3px rgba(159, 0, 93, 0.8);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

/* triangle */
.play-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-40%) translateY(-50%);
  transform: translateX(-40%) translateY(-50%);
  transform-origin: center center;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 25px solid #fff;
  z-index: 100;
  -webkit-transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

/* pulse wave */
.play-btn:before {
  content: "";
  position: absolute;
  width: 150%;
  height: 150%;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation: pulsate1 2s;
  animation: pulsate1 2s;
  -webkit-animation-direction: forwards;
  animation-direction: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: steps;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, .75);
    top: -25%;
    left: -25%;
  background: rgba(198, 16, 0, 0);
}
.play-btn:hover { transform:scale(1.2) translate(-40%,-40%); }

@-webkit-keyframes pulsate1 {
  0% {
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 1;
    box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.75), 0px 0px 25px 10px rgba(255, 255, 255, 0.75);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
    box-shadow: none;

  }
}

@keyframes pulsate1 {
  0% {
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 1;
    box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.75), 0px 0px 25px 10px rgba(255, 255, 255, 0.75);
  }
  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1);
    opacity: 0;
    box-shadow: none;

  }
}

.set_bg { padding:28%; background-size:cover; position:relative; }
.set_bg > a { position:absolute; top:0; left:0; width:100%; height:100%; overflow: hidden; text-indent: -1000px; }

.models-area p > a { color: #9e005d; }

/*-------------------
    Media Query
---------------------------*/

@media only screen and (max-width: 767px) {
    .banner h1 { color: #fff; font-size: 35px; }
    .banner p { font-size: 14px; max-width: 100%; }
    .main-content h2 { font-size: 25px; }
    .models-area .col { margin-bottom: 10px; max-width: 50%; }
    .models-area p { font-size: 14px; }
    .model span { height: 20px; width: 20px; }
    .carousel-control-prev { margin-left: -15px; }
    .carousel-control-next { margin-right: -15px; }
    .mobhide { display: none; visibility: hidden; }
    .deskhide { display: block; visibility: visible; }
    #player { min-height:280px!important; }
    .carousel-item span, .item span { font-size:11px; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .banner h1 { color: #fff; font-size: 60px; }
    .banner h3 { color: #fff; font-size: 38px; }
    .models-area .col { margin-bottom: 10px; max-width: 25%; }
    .models-area p { font-size: 14px; }
    .carousel-item span { width: auto }
    .carousel-control-prev { margin-left: -35px; }
    .carousel-control-next { margin-right: -35px; }
    .carousel-item span, .item span { font-size:11px; }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .models-area p { font-size: 14px; }
    .model span { right: 0px; }
    .carousel-control-prev { margin-left: -45px; }
    .carousel-control-next { margin-right: -45px; }
    .carousel-item span, .item span { font-size:11px; }
}