.error{
  color: red;
}
.requiredlabel:after {
    content:" *";
    color: red;
  }
.rti-ul{
          list-style: none;
  }

.rti-ul li{
          display: inline-block;
          font-weight: 700;
          /*border-left: 2px solid;*/
          padding-left: 10px;
          padding-right: 10px;
  }

#loading {
          position: fixed;
          display: block;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          text-align: center;
          opacity: 0.9;
          background-color: #fff;
          z-index: 99;
        }

#loading-image {
          position: absolute;
          top: 35%;
          left: 45%;
          z-index: 100;
          border-radius: 20%;
}
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 100000; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
}

#snackbar.success {
  background-color: #468a46; /* Black background color */
}

#snackbar.error {
  background-color: red; /* Black background color */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}


/*.blink-text{
  animation:blink-animation 5s infinite;
}*/
/*.blink-text2{
  animation:alt-blink-animation 5s infinite;
}
*/
.blink-text{
    color: #fff;
    padding: 10px;
    display: inline-block;
    border-radius: 5px;
    animation: blinkingBackground 2s infinite;
  }
.blink-text2{
    color: #fff;
    padding: 10px;
    display: inline-block;
    border-radius: 5px;
    animation: altBlinkingBackground 2s infinite;
  }

  @keyframes blinkingBackground{
    0%    { background-color: #10c018;}
    25%   { background-color: #54a358;}
    50%   { background-color: #db970f;}
    75%   { background-color: #254878;}
    100%  { background-color: #04a1d5;}
  } 

   @keyframes altBlinkingBackground{
    0%    { background-color: #04a1d5;}
    25%   { background-color: #10c018;}
    50%   { background-color: #254878;}
    75%   { background-color: #db970f;}
    100%  { background-color: #54a358;}
  }

@keyframes blink-animation {
    0% { opacity: 0.7;}
    100% { opacity: 1;}
  }

@keyframes alt-blink-animation {
    0% { opacity: 1;}
    100% { opacity: 0.5;}
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0;
  }
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@media only screen and (max-width: 700px) {
      .showindesk{
            display: none;
        }
        .showinmob{
            display: block;
        }
        
    }

    @media only screen and (min-width: 700px) {
      .showindesk{
            display: block;
        }
        .showinmob{
            display: none;
        }
    }
.gallery-grid {
  display: none; /* Hide all elements by default */
  padding: 8px;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

@media only screen and (max-width: 700px) {
        .showindesk{
            display: none;
        }
        .showinmob{
            display: block;
        }


    span.showindesk{
      display: none;
    }
    span.showinmob{
            display: inline-block;
        }     
    }

    @media only screen and (min-width: 700px) {
      .showindesk{
            display: block;
        }
        .showinmob{
            display: none;
        }
        span.showindesk{
      display: inline-block;
    }
    span.showinmob{
            display: none;
        } 
    }

/*--------------------------------------------------------------
# Animations
--------------------------------------------------------------*/

@keyframes ImgBounce {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
}

@keyframes shapeMover {

  0%,
  100% {
    transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
  }

  50% {
    transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px);
  }
}


@keyframes bubbleMover {
  0% {
    -webkit-transform: translateY(0px) translateX(0) rotate(0);
    transform: translateY(0px) translateX(0) rotate(0);
  }

  30% {
    -webkit-transform: translateY(30px) translateX(50px) rotate(15deg);
    transform: translateY(30px) translateX(50px) rotate(15deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
  }

  50% {
    -webkit-transform: translateY(50px) translateX(100px) rotate(45deg);
    transform: translateY(50px) translateX(100px) rotate(45deg);
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
  }

  80% {
    -webkit-transform: translateY(30px) translateX(50px) rotate(15deg);
    transform: translateY(30px) translateX(50px) rotate(15deg);
    -webkit-transform-origin: left top;
    transform-origin: left top;
  }

  100% {
    -webkit-transform: translateY(0px) translateX(0) rotate(0);
    transform: translateY(0px) translateX(0) rotate(0);
    -webkit-transform-origin: center center;
    transform-origin: center center;
  }
}

@keyframes banner3Shake {
  0% {
    -webkit-transform: rotate3d(0, 1, 0, 0deg);
    transform: rotate3d(0, 1, 0, 0deg);
  }

  30% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  60% {
    -webkit-transform: rotate3d(1, 0, 0, 0deg);
    transform: rotate3d(1, 0, 0, 0deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 1, 0, 0deg);
    transform: rotate3d(0, 1, 0, 0deg);
  }
}

    /*--------------------------------------------------------------
# Banner
--------------------------------------------------------------*/

.banner-one {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

.banner-one::before {
    content: '';
    width: 100%;
    height: 200px;
    position: absolute;
    bottom: 0;
    left: 0;
    /*background-color: #fff;*/
    clip-path: polygon(71.5% 0, 0% 100%, 100% 100%);
}

@media(max-width: 991px) {
    .banner-one::before {
        height: 80px;
    }
}

.banner-one .container {
    position: relative;
    padding-top: 320px;
    padding-bottom: 275px;
}

.banner-one__moc {
    position: absolute;
    bottom: -2px;
    right: -30px;
    animation: ImgBounce 5s ease-in-out 0s infinite alternate;
}

.banner-one__content h3 {
    margin: 0;
    font-size: 70px;
    text-transform: uppercase;
    line-height: 80px;
    font-weight: 300;
    color: #fff;
    margin-top: 10px;
    margin-bottom: 25px;
}

.banner-one__content p {
    /*margin-left: 10px;*/
        /*padding: 20px;*/
    font-size: 20px;
    line-height: 32px;
    font-weight: 300;
    color: #ffffff;
}

.banner-one__btn {
    padding: 16px 56px;
    background-image: none;
    border: 2px solid #fff;
    margin-top: 40px;
}

.banner-one__btn:hover {
    background-color: #fff;
    color: var(thm-black);
}

.banner-one__content .banner-one__tag-line {
    display: inline-block;
    background-color: rgba(0, 0, 0, .1);
    text-transform: uppercase;
    font-size: 50px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: .1em;
    border-radius: 5px;
    overflow: hidden;
    /*padding-left: 30px;*/
    line-height: 40px;
}
/*.banner-one__content{
    margin: 75px;
}*/

.banner-one__content .banner-one__tag-line a {
    display: inline-block;
    vertical-align: middle;
    background-color: #feec66;
    color: #23242b;
    padding-left: 30px;
    padding-right: 30px;
    margin-left: 25px;
    transition: all 500ms ease;
}

.banner-one__content .banner-one__tag-line a:hover {
    background-color: var(thm-black);
    color: #fff;
}

[class*=banner-one__shape-] {
    position: absolute;
}

.banner-one__shape-moc-1 {
    top: 15%;
    right: -9%;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.banner-one__shape-1 {
    top: 3%;
    left: 0;
}

.banner-one__shape-2 {
    top: -10%;
    right: 7%;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: banner3Shake;
    animation-name: banner3Shake;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.banner-one__shape-3 {
    bottom: 19%;
    left: 6%;
}

.banner-one__shape-4 {
    top: 35%;
    right: 45%;
    -webkit-animation-name: bubbleMover;
    animation-name: bubbleMover;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    animation-duration: 8s;
}

.banner-one__shape-5 {
    top: -25%;
    right: 6%;
    -webkit-animation-name: bubbleMover;
    animation-name: bubbleMover;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}

.banner-one__shape-6 {
    bottom: 29%;
    right: 30%;
    -webkit-animation-name: shapeMover;
    animation-name: shapeMover;
    -webkit-animation-duration: 9s;
    animation-duration: 9s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.banner-one__shape-7 {
    bottom: 0;
    right: 6%;
    -webkit-animation-name: shapeMover;
    animation-name: shapeMover;
    -webkit-animation-duration: 9s;
    animation-duration: 9s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    animation-delay: 2s;
}
.musicctrlbtn{
  color: #ecbb6c;
      border-color: #df8f0e;
}
.card-title{
  padding: 10px;
  font-weight: bold;
}
.text-primary {
    color: #9c2350!important;
}