.brand-animate {
    -webkit-animation: rotate 1s infinite linear;
    animation: rotate 1s infinite linear;

    transform-origin: 24px 24px;
    -webkit-transform-origin: 24px 24px;

    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    -webkit-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;

    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.pace-running .brand-animate{
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.pace-done .brand-animate{
    opacity: 0;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}


.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #7ac142;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 1% auto;
  box-shadow: inset 0px 0px 0px #7ac142;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #7ac142;
  }
}

.svg-box {
    display:inline-block;
    position: relative;
    width:150px;
}

.green-stroke {
    stroke:#7CB342;
}

.red-stroke {
    stroke: #FF6245;
}

.yellow-stroke {
    stroke: #FFC107;
}


.circular circle.path {
    stroke-dasharray: 330;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    opacity: 0.4;
    animation: 0.7s draw-circle ease-out;
}

/*---------- Cross ----------*/

.cross {
    stroke-width:6.25;
    stroke-linecap: round;
    position: absolute;
    top: 54px;
    left: 54px;
    width: 40px;
    height: 40px;
}

.cross .first-line {
    animation: 0.7s draw-first-line ease-out;
}

.cross .second-line {
    animation: 0.7s draw-second-line ease-out;
}

@keyframes draw-first-line {
    0% {
        stroke-dasharray: 0,56;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 0,56;
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dasharray: 56,330;
        stroke-dashoffset: 0;
    }
}

@keyframes draw-second-line {
    0% {
        stroke-dasharray: 0,55;
        stroke-dashoffset: 1;
    }

    50% {
        stroke-dasharray: 0,55;
        stroke-dashoffset: 1;
    }

    100% {
        stroke-dasharray: 55,0;
        stroke-dashoffset: 70;
    }
}

.alert-sign {
    stroke-width:6.25;
    stroke-linecap: round;
    position: absolute;
    top: 40px;
    left: 68px;
    width: 15px;
    height: 70px;
    animation: 0.5s alert-sign-bounce cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.alert-sign .dot {
    stroke:none;
    fill: #FFC107;
}

@keyframes alert-sign-bounce {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}



form.sign_in label.error, label.error {color: red; font-style: italic; font-size:13px;}
form.sign_up label.error, label.error {color: red; font-style: italic; font-size:13px;}


/**
 * Instagram
 */

.instagram-wrapper {
    margin: 0;
    overflow: hidden;
}

.instagram {
    overflow: hidden;
    width: 100%;
    margin: 0 auto
}

.instagram-placeholder {
    float: left;
    padding: 0;
    width: 25%;
    position: relative;
}

.instagram-placeholder:hover {
    opacity: 0.8;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}

.instagram-image {
    display: block;
    position: relative;
    width: 101px;
    padding-bottom: 3px;
}

@media only screen and (max-width: 1199px) {}

@media only screen and (max-width: 991px) {
    .instagram-wrapper {
        margin-left: -1px;
        margin-right: -1px;
    }
    .instagram-placeholder {
        padding: 1px;
    }
}

@media (max-width: 767px) {
    .instagram-placeholder {
        width: 25%;
    }
}

@media (max-width: 479px) {} 


.pagination li {
list-style-type: none;
    float: left;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #37474F;
    background-color: #37474F;
    color: #FFF;
    text-align: center;
    cursor: pointer;
    margin: 0 5px;
    border-radius: 50%;
}

.pagination li:hover {
  background-color: #fff;
  border: 1px solid #000;
  color: #000
}

.pagination ul {
  border: 0;
  padding: 0;
}

.cactive {
 background-color: #fff !important;

  color: #000 !important;

}

@import url("/templates/music/css/font-awesome/css/font-awesome.min.css");

/* entypo */
[class*="fa-"]:before {
   font-family: "FontAwesome", sans-serif;
}
a { 
   text-decoration: none;
}
ul {
   list-style: none;
   margin: 0;
   padding: 0;
}
#sticky-social {
   left: 0;
   position: fixed;
   top: 250px;
   z-index: 999;
}
#sticky-social a {
   background: #18191B;
   color: #fff;
   display: block;
   height: 35px;
   font: 16px "Open Sans", sans-serif;
   line-height: 35px;
   position: relative;
   text-align: center;
   width: 40px;
}
#sticky-social a span {
   line-height: 35px;
   left: -120px;
   position: absolute;
   text-align:center;
   padding-left: 5px;
   padding-right: 10px;
   width:auto;
}
#sticky-social a:hover span {
   left: 100%;
}
#sticky-social a[class*="facebook"],
#sticky-social a[class*="facebook"]:hover {
    transition: all 0.3s;
    background: #3b5998;
}
#sticky-social a[class*="facebook"] span { 	
	webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    background: #3b5998;
    z-index: -9;  
    }
#sticky-social a[class*="twitter"],
#sticky-social a[class*="twitter"]:hover {
    transition: all 0.3s;
    background: #00aced;
}
#sticky-social a[class*="twitter"] span { 	
	webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    background: #00aced;
    z-index: -9;  
    }
#sticky-social a[class*="youtube"],
#sticky-social a[class*="youtube"]:hover {
    transition: all 0.3s;
    background: #e94639;
}
#sticky-social a[class*="youtube"] span { 	
	webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    background: #e94639;
    z-index: -9;  
    }
#sticky-social a[class*="instagram"],
#sticky-social a[class*="instagram"]:hover {
    transition: all 0.3s;
    background: #517fa4;
}
#sticky-social a[class*="instagram"] span { 	
	webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    background: #517fa4;
    z-index: -9;  
    }