.left-container {
  float: left;
  width: 300px;
  border: 1px solid red;
  box-sizing: border-box;
  height: 300px;
}
.right-container {
  float: right;
  min-width: 300px;
  border: 1px solid yellow;
  box-sizing: border-box;
  height: 300px;
}



.allstats-container {
    background: #25AAE1;
    border-radius: 0 0 5px 5px;
    padding-bottom: 20px;
}

.ministats-container {
  padding-bottom: 20px;
}

.statsection.ministats {
    width: 90%;
    overflow: auto;
    margin: 0 auto;
}

.allstats {
    background-color: #1f8cb9;
    border-radius: 5px;
    font-family: "ralewaybold";
    font-size: 10px;
    font-weight: normal;
    text-transform: uppercase;
    color: #ffffff;
    padding: 6px;
    position: relative;
    width: 100px;
    margin: 0px auto;
}

.allstats.alternate {
    background-color: #f79521;
}

.attention {
  margin-top: 10px;
  margin-bottom: 10px;
  animation: shadow-pulse 1s infinite;
}

@keyframes shadow-pulse
{
     0% {
          box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
     }
     100% {
          box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
     }
}

@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

.animated {
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}


.allstats:hover, .full-profile:hover{
 background-color: #1b7ba3;
}


.share .fa-facebook:hover, .share .fa-twitter:hover {
  color: #1b7ba3;
  cursor: pointer;
}

.profile-alert {
    position: absolute;
    height: 145px;
    width: 100%;
    z-index: 100;
    text-align: center;
    background: rgba(0, 0, 0, 0.8);  
}

.profile-alert p {
    position: absolute;
    font-size: 18px;
    font-family: "ralewaymedium";
    color: #ffffff;
    top: 61px;
    right: 64px;
    margin-right: 20px;
    width: 125px;
    -ms-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
}

.profile-alert p i {
  position: absolute;
  right: -34px;
  top: 0px;
  font-size: 40px;
  color: #F7A646
}


.fade-in {
  animation: fadeIn ease .9s;
  -webkit-animation: fadeIn ease .9s;
  -moz-animation: fadeIn ease .9s;
  -o-animation: fadeIn ease .9s;
  -ms-animation: fadeIn ease .9s;
}

@keyframes fadeIn{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}


/* - - - -  MEDIA QUERIES FOR ADS BELOW THIS LINE - - - - - */


.gad-unit {
    /*    border: 5px solid #27b5EF; */
  }

.gad-unit.rect {
    width: 320px;
    height: 100px;
  }

.gad-unit.stats.last {
  margin-top: 0px;
  margin-bottom: 45px;
}

@media only screen  and (max-width: 640px){
    .gad-unit.aboutfact, .gad-unit.results {
        float: none;
        margin: 0;
        display: inline-block;
        margin-bottom: 10px;
    }

    .posmod1 { /*used for ad and text positioning*/
    display: block;
    padding-bottom: 20px;
}

    .posmod2 { /*used for ad and text positioning*/
      display: none;
    }
}

@media only screen and (min-width: 641px) {
    .gad-unit.aboutfact, .gad-unit.results {
        float: right;
        margin: 25px;
        margin-top: 7px;
        position: relative; /*needed to make ad clickable */
        z-index: 1; /*needed to make ad clickable */
    }

    .posmod1 { /*used for ad and text positioning*/
      display: none;
    }

    .posmod2 { /*used for ad and text positioning*/
      display: block;
    }
}

@media only screen and (max-width: 724px) {
  .gadban {
    width: 300px;
    height: 250px;
    background: #cccccc;
    display: inline-block;
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

@media only screen and (min-width: 725px) {
  .gadban {
    width: 728px;
    height: 90px;
    background: #cccccc;
    display: inline-block;
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

/* ^ ^ ^ ^ ^ MEDIA QUERIES FOR ADS ABOVE THIS LINE ^ ^ ^ ^ ^ */

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

    .half {
      width: 85%;
      margin: 0 auto;
    }

    .results-container {
        position: relative;
        width: 100%;
        display: inline-block;
    }

    .points-tally {
      width: 100%;
      display: inline-block;
    }

    .results-footer {
      background: #25aae1;
      height: auto;
      padding-bottom: 40px;
    }

    .results-footer.myprofile {
      height: 185px;
    }

    .results-smacklevel {
      margin-top: 15px;
      width: 90%;
      display: inline-block;
    }

    .results-multiplier {
      margin-top: 25px;
      display: inline-block;
    }

    .banner {
      position: relative;
      z-index: 100;
      background: linear-gradient(to bottom, #27b5ef 50%, #25aae1 50%);
      width: 85%;
      max-width: 340px;
      height: 46px;
      display: inline-block;
      line-height: 46px;
      top: -20px;
    }

    .banner:before {
      content: '';
      position: absolute;
      border-top: 23px solid #27b5ef;
      border-bottom: 23px solid #25aae1;
      border-left: 17px solid transparent;
      top: 0px;
      left: -17px;
      margin: 0px;
    }

    .banner:after {
      content: '';
      position: absolute;
      border-top: 23px solid #27b5ef;
      border-bottom: 23px solid #25aae1;
      border-right: 17px solid transparent;
      top: 0px;
      right: -17px;
    }

    .banner h2 {
      font-size: 28px;
    }

    .banner.smalltext h2 {
      font-size: 24px;
    } 

    .banner.category h2 {
      font-size: 35px;
    }

    .banner.modal h2 {
      font-size: 26px;
    }

    .banner.modal.smalltext h2 {
      font-size: 22px;
    }  



}

@media only screen and (min-width: 641px) {


    .half {
      width: 49%;
      float: left;
    }

    .results-container {
      margin-bottom: 50px;
    }

    .results-container h3 {
      width: 100%;
    }

    .points-tally {
      width: 100%;
      display: inline-block;
    }

    .gad-unit.results {
      float: right;
      margin-right: 25px;
      margin-top: 5px;
      margin-left: 0px;
    }

    .results-multiplier {
      margin-top: 15px;
      float: right;
      margin-right: 20px;
    }

    .results-footer {
      background: #25aae1;
      height: 130px;
    }

    .results-footer.myprofile {
      height: 120px;
    }

    .results-smacklevel {
      margin-top: 15px;
      width: 37%;
      float: left;
      margin-left: 20px;
    }

    .banner {
      position: relative;
      z-index: 100;
      background: linear-gradient(to bottom, #27b5ef 50%, #25aae1 50%);
      width: 85%;
      max-width: 340px;
      height: 56px;
      display: inline-block;
      line-height: 56px;
      top: -20px;
    }

    .banner:before {
      content: '';
      position: absolute;
      border-top: 28px solid #27b5ef;
      border-bottom: 28px solid #25aae1;
      border-left: 17px solid transparent;
      top: 0px;
      left: -17px;
      margin: 0px;
    }

    .banner:after {
      content: '';
      position: absolute;
      border-top: 28px solid #27b5ef;
      border-bottom: 28px solid #25aae1;
      border-right: 17px solid transparent;
      top: 0px;
      right: -17px;
    }

    .banner h2 {
      font-size: 35px;
    }

    .banner.smalltext h2 {
      font-size: 32px;
    } 

    .banner.category h2 {
      font-size: 40px;
    }   

    .banner.modal h2 {
      font-size: 32px;
    } 

    .banner.modal.smalltext h2 {
      font-size: 28px;
    }  

}

@media only screen and (max-width: 345px) {
  .contentbox {
    width: 100%;
  }
}

@media only screen and (min-width: 346px) {
  .contentbox {
    width: 95%;
  }
}
/* - - - - MEDIA QUERIES FOR XP MULTIPLIER - - - - */
@media only screen and (max-width: 430px) {
      .xp-level i:nth-of-type(3n+0) {
    display: none;
    }
}

@media only screen and (max-width: 450px) {
    .xp-level i:nth-of-type(3n+0) {
      display: none;
    }
}

@media only screen and (min-width: 451px) and (max-width: 640px) {
    .xp-level i:nth-of-type(3n+0) {
      display: inline-block;
    }
}

@media only screen and (min-width: 641px) and (max-width: 720px) {
    .xp-level i:nth-of-type(3n+0) {
      display: none;
    }
}
/* - - - - - - MEDIA QUERIES FOR BADGES - - - - - - - - - - - */
@media only screen and (max-width: 450px) {
    .badges.allbadges li img {
      max-width: 58px;
    }
}

@media only screen and (min-width: 451px) and (max-width: 689px) {
    .badges.allbadges li img {
      max-width: 105px;
    }
}


@media only screen and (min-width: 690px) and (max-width: 835px) {
    .badges.allbadges li img {
      max-width: 105px;
    }
}

@media only screen and (min-width: 836px) {
    .badges.allbadges li img {
      max-width: 129px;
    }
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

html, body {
    min-width: 310px;
    max-width: 100%;
    overflow-x: hidden;
}

body {  
  text-align: center;
  margin: 0px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}

h1, h2, h3, h4, h5, p {
  margin: 0px;
  padding: 0px;
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*margin-left: 4px;*/
  /*margin-right: 4px;*/
}

a {
  text-decoration: none;
}

ul {
  padding: 0px;
  list-style: none;
}

.gad-unit {
  margin: 0 auto;
  /*width: 300px;
  height: 250px;*/
  /*background-color: #cccccc;*/
  margin-top: 10px;
  margin-bottom: 15px;
}

.gad-unit.last {
  margin-bottom: 50px;
}


/* - - - - BANNERS - - - - */
.cat-logo {
  height: 78px;
  width: 156px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -28px;
}

/* - - - - - CAT LOGOS - - - - - */
.cat-logo.cat_animals {
  background: url(/img/categories/cat_animal.png);
  background-repeat: no-repeat;
}
.cat-logo.cat_culture {
  background: url(/img/categories/cat_culture.png);
  background-repeat: no-repeat;
}
.cat-logo.cat_food {
  background: url(/img/categories/cat_food.png);
  background-repeat: no-repeat;
}
.cat-logo.cat_gaming {
  background: url(/img/categories/cat_gaming.png);
  background-repeat: no-repeat;
}
.cat-logo.cat_geography {
  background: url(/img/categories/cat_geography.png);
  background-repeat: no-repeat;
}
.cat-logo.cat_headlines {
  background: url(/img/categories/cat_headlines.png);
  background-repeat: no-repeat;
}
.cat-logo.cat_history {
  background: url(/img/categories/cat_history.png);
  background-repeat: no-repeat;
}
.cat-logo.cat_holidays {
  background: url(/img/categories/cat_holidays.png);
  background-repeat: no-repeat;
}
.cat-logo.cat_literature {
  background: url(/img/categories/cat_literature.png);
  background-repeat: no-repeat;
}
.cat-logo.cat_film {
  background: url(/img/categories/cat_film.png);
  background-repeat: no-repeat;
}
.cat-logo.cat_music {
  background: url(/img/categories/cat_music.png);
  background-repeat: no-repeat;
}
.cat-logo.cat_people {
  background: url(/img/categories/cat_people.png);
  background-repeat: no-repeat;
}
.cat-logo.cat_politics {
  background: url(/img/categories/cat_politics.png);
  background-repeat: no-repeat;
}
.cat-logo.cat_science {
  background: url(/img/categories/cat_science.png);
  background-repeat: no-repeat;
}
.cat-logo.cat_sports {
  background: url(/img/categories/cat_sports.png);
  background-repeat: no-repeat;
}
.cat-logo.cat_surprise {
  background: url(/img/categories/cat_surprise.png);
  background-repeat: no-repeat;
}
.cat-logo.cat_technology {
  background: url(/img/categories/cat_technology.png);
  background-repeat: no-repeat;
}
.cat-logo.cat_television {
  background: url(/img/categories/cat_television.png);
  background-repeat: no-repeat;
}
/* - - - - - - - - - */

.width-container {
  width: 100%;
  max-width: 840px;
  display: inline-block;
}

.width-limit {
  max-width: 700px;
  display: inline-block;
}

/* - - - - BANNERS - - - - */

.banner-container {
  position: relative;
  width: 100%;
}

/*
.banner {
  position: relative;
  z-index: 100;
  background: linear-gradient(to bottom, #27b5ef 50%, #25aae1 50%);
  width: 85%;
  max-width: 420px;
  height: 56px;
  display: inline-block;
  line-height: 56px;
  top:-25px;
}
*/

.banner.category {
  top: 0px;
  margin-top: 50px;
  margin-bottom: 28px;
}

.banner h2 {
    position: relative;
    font-family: "ralewayextrabold";
    text-transform: uppercase;
    /*font-size: 30px; - handled in media query */
    color: #ffffff;
    text-shadow: 0px 2px rgba(0, 0, 0, 0.12);
    font-weight: normal;
}

/* dropdown menu css */
nav {
position: relative;
width: 100%
}

.trigger {
  border-radius: 4px;
  background-color: #24a4d9;
  position: absolute;
  bottom: -33px;
  right: 0px;
  width: 109px;
  height: 37px;
  z-index: 1000;
  font-family: "ralewayextrabold";
  font-size: 14px;
  color: #ffffff;
  text-transform: uppercase;
  line-height: 3.2em;
  margin-right: 20px;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.12);
}
/* dropdown menu css */

.titlebar {
  width: 100%;
  margin-top: 38px;
  margin-bottom: 6px;
}

.titlebar img {
  display: inline-block;
}

.gadbar {
  background-color: #e7e7e7;
}


.contentbox {
    display: inline-block;
    background-color: #f2f2f2;
    border-radius: 5px;
    margin-top: 15px;
    margin-bottom: 45px;
    position: relative;
    /*width: - handled width media query*/
    max-width: 750px;
}

.contentbox.globalstats {
  background: #ffffff;
}

.contentbox.with-icon {
  border: 8px solid #ffffff;
  margin: 0px 30px 22px;
  display: inline-block;
  list-style: none;
  max-width: 630px;
  width: 80%;
  padding: 0px;
}

.contentbox.with-icon.answer {
  margin-bottom: 60px;
}

.contentbox.with-icon.selectright {
  border: 4px solid #63C900;
}

.contentbox.with-icon.selectwrong {
  border: 4px solid #F81515;
}

.contentbox.with-icon.selectright:after {
  content: 'Your Answer';
  background: #63C900;
  font-family: "ralewaybold";
  color: #ffffff;
  font-size: 10px;
  padding: 2px 4px 4px 4px;
  border-radius: 0px 0px 0px 3px;
  position: absolute;
  top: 0px;
  right: 0px;
  text-transform: uppercase;
}

.contentbox.with-icon.selectwrong:after {
  content: 'Your Answer';
  background: #F81515;
  font-family: "ralewaybold";
  color: #ffffff;
  font-size: 10px;
  padding: 2px 4px 4px 4px;
  border-radius: 0px 0px 0px 3px;
  position: absolute;
  top: 0px;
  right: 0px;
  text-transform: uppercase;
}



.contentbox.select:hover {
    border: 8px solid #ffa233;
    background-color: #fff0e1;
}

.contentbox p {
    font-family: "ralewaymedium";
    font-size: 16px;
    color: #545454;
    position: relative;
    z-index: 5;
    text-align: left;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0px;
    /*padding-top: 10px;
    padding-bottom: 10px;*/
}

/*
.multiplier {
  margin-bottom: 40px;
}

.multiplier p span {
  font-family: "ralewaybold";
}
*/

.multi-streak {
  text-align: left;
  margin-left: 12px;
}

.multi-streak li {
  display: inline-block;
  font-family: "ralewaymedium";
  font-size: 24px;
  text-align: center;
}
.multi-streak li i {
  letter-spacing: -5px;
    animation-name: multiplierX;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    color: #e2e2e2;
}

@keyframes multiplierX {
  0% {
    color: #000000;
  }

  100%{
    color: #e2e2e2;
  }
}

.ani-a { -webkit-animation-delay: .2s; /* Safari 4.0 - 8.0 */
          animation-delay: .2s;}
.ani-b { -webkit-animation-delay: .4s; /* Safari 4.0 - 8.0 */
          animation-delay: .4s;}
.ani-c { -webkit-animation-delay: .6s; /* Safari 4.0 - 8.0 */
          animation-delay: .6s;}
.ani-d { -webkit-animation-delay: .8s; /* Safari 4.0 - 8.0 */
          animation-delay: .8s;}
.ani-e { -webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
          animation-delay: 1s;}



.multi-streak li.multi-stat {
  font-family: "ralewayextrabold";
  font-size: 36px;
  border-radius: 50%;
  height: 70px;
  width: 70px;
  line-height: 65px;
  margin-left: 8px;
  margin-right: 8px;
  background: #82D433;
  border: 5px solid #63C900;
  color: #ffffff;
}
.multi-streak.down li.multi-stat {
  background: #F94444;
  border: 5px solid #F81515;
}


.contentbox.aboutfact, .contentbox.globalstats {
      padding-bottom: 20px;
}

/*.contentbox.aboutfact p:first-of-type {
  margin-top: 25px;
}*/

.contentbox.aboutfact .fact-description {
  margin-top: 25px;
}

.contentbox.aboutfact p, .contentbox.results p,
.contentbox.allbadges p, .contentbox.mystats p {
    font-size: 14px;
    line-height: 20px;
}

.contentbox.allbadges h3,
.contentbox.allbadges p {
  text-align: center;
}

.catbreak {
  width: 90%;
  height: 4px;
  background: #e7e7e7;
  border: none;
  margin-bottom: 30px;
}

#xplevel-txt {
    font-family: "ralewayextrabold";
    font-size: 14px;
    font-weight: normal;
    text-transform: uppercase;
    color: #ffffff;
    text-align: left;
  padding-left: 5px;
  padding-top: 2px;
}

.truefact .contentbox.with-icon {
  margin: 0px 40px 22px;
  background-color: #ffffff;
  border: 8px solid #ffffff;
  border-radius: 0px;
}

.contentbox.with-icon p {
  padding-left: 44px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.contentbox h3 {
  font-size: 24px;
  font-family: "ralewaybold";
  color: rgb( 37, 170, 225 );
  text-align: left;
  padding-left: 20px;
  text-transform: uppercase;
  margin-top: 25px;
}

.contentbox.results h4 {
  font-size: 18px;
  font-family: "ralewaybold";
  color: rgb( 147, 214, 57 );
  text-align: left;
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 30px;
  }

  .payout {
    padding-left: 20px;
  }

/*
.categorylogo {
  position: relative;
  top: -36px;
    height: 137px;
    width: 307px;
    background: url(../img/movie.png) no-repeat;
    display: inline-block;
    text-align: center;
}

.categorylogo h2 {
    position: relative;
    top: 79px;
    font-family: "ralewayextrabold";
    text-transform: uppercase;
    font-size: 46px;
    color: #ffffff;
    text-shadow: 0px 2px rgba(0, 0, 0, 0.12);
    font-weight: normal;
}
*/

.line-seperator {
    position: relative;
    width: 100%;
    height: 5px;
    background: url(../img/line.png) repeat;
    top: -5px;
}

.line-seperator2 {
  position: relative;
    width: 100%;
    height: 5px;
  background: url(../img/line2.png) repeat;
  top: -5px;
}

.line-seperator-blue {
  position: relative;
    width: 100%;
    height: 5px;
  background: url(../img/line-blue.png) repeat;
  top: -5px;
}

.results-meter {
    position: relative;
    display: inline-block;
    height: 33px;
    background-color: #ffffff;
    border-radius: 5px;
    width: 100%;
    box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.12);
    font-family: "ralewaybold";
    font-size: 18px;
}

.results-meter .progress {
  height: 100%;
  width: 40%;
  background-image: url(/img/progress-bg.png);
  border-radius: 5px;
}

.results-meter .next-level {
  color: #24a4d9;
  position: absolute;
  right: 0px;
  top: 5px;
  margin-right: 10px;
}

.results-meter .current-level {
  color: #ffffff;
  position: absolute;
  left: 0px;
  top: 5px;
  padding-left: 10px;
}

.results-multiplier h2 {
  font-family: "ralewayextrabold";
  font-size: 14px;
  font-weight: normal;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0px;
  text-align: left;
}

.results-multiplier p {
  font-family: "ralewaybold";
  font-size: 11px;
  text-transform: none;
  color: #ffffff;
  text-align: left;
}

.xp-level {
  text-align: left;
}
.xp-level p{
  padding-left: 0px;
  padding-right: 0px;
}

.xp-level li {
    position: relative;
    top: 9px;
    display: inline-block;
    border-radius: 50%;
    height: 7px;
    width: 7px;
    background: #1f8cb9;
    border: 4px solid #ffffff;
    margin: 1px;
}

.xp-level.answer i {
  font-size: 10px;
  color: #ffffff;
  margin-right: -3px;
  font-size: 12px;
  position: relative;
  top: 2px;
  left: -2px;
}

.xp-level li.active {
  border: 4px solid #93d639;
  background: #ffffff;
}

.xp-level li.active:before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    height: 0px;
    width: 0px;
    opacity: 0;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid #ffffff;
    animation-name: indicatorglow;
    -webkit-animation-name: indicatorglow;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
    /*animation-delay: 1s;*/
}

@keyframes indicatorglow {
  0% {
    position:absolute; 
    top:-3px; 
    left:-3px;
    width: 11px; 
    height: 11px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    opacity: 1;
  }


  30%{
    position:absolute; 
    top:-10px; 
    left:-10px;
    width: 25px; 
    height: 25px;
    border:1px solid #ffffff;
    border-radius: 50%;
    opacity: 0;
  }
}


.xp-level p {
  font-size: 12px;
  font-family: "ralewaybold";
  font-weight: normal;
  color: rgb( 255, 255, 255 );
  position: relative;
  top: 13px;
}

.xp-level li:last-of-type p {
  left: -3px;
}

/*.results-smacklevel {
  float: left;
  margin-left: 20px;
  margin-top: 25px;
  width: 37%;
}*/

/*.results-multiplier {
  float: right;
  margin-right: 20px;
}*/



.results-smacklevel h2 {
    font-family: "ralewayextrabold";
    font-size: 14px;
    font-weight: normal;
    text-transform: uppercase;
    color: #ffffff;
    text-align: left;
    margin: 0px;
    /* margin-top: 20px; */
    padding-bottom: 4px;
}

.level_font {
  color: #cceca2;
}

.badges {
  display: inline-block;
  padding: 0px;
  margin: 0px;
}

.badges.allbadges {
  margin-bottom: 15px;
}

.badge-answerpage {
  max-width: 105px;
}

.badge-profile {
  max-width: 65px;
}

.badges li {
  display: inline-block;
  margin: 5px;
}

.badges p {
  padding-bottom: 15px;
}

.badges li:first-child {
  margin-bottom: 10px;
}

.main {
  background: url(/img/question-bg.png) repeat;
  width: 100%;
  height: 100%;
  background-attachment: fixed;
}

.question h2, .answer h2, .question.stats h2, .truefact h2  {
    font-family: "ralewayregular";
    font-size: 22px;
    color: rgb( 255, 255, 255 );
    font-weight: normal;
    position: relative;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
    margin-right: 10px;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
}

.question.stats h2, .truefact h2 {
  font-size: 24px;
  font-family: "ralewaymedium";
  color: rgb( 49, 49, 49 );
  padding-top: 15px;
  padding-bottom: 15px;
}

.answer h2 {
  margin: 40px auto 0;
  font-weight: bold;
  margin-bottom: 25px;
}

.sharestats h2 {
  font-size: 12px;
  font-family: "ralewaybold";
  color: rgb( 64, 64, 64 );
  text-transform: uppercase;
  position: relative;
  top: 2px;
}

/* share buttons */
.fb-share, .tw-share {
  font-size: 14px;
}

.fb-share.big, .tw-share.big {
  font-size: 30px;
}

.fb-share.badge, .tw-share.badge {
  font-size: 22px;
}

.fa-circle {
  color: #f79521;
}

.fa-facebook, .fa-twitter {
  color: #ffffff;
}

.fa-circle.badge {
  color: #27b5ef;
}

.fa-facebook.badge, .fa-twitter.badge {
  color: #ffffff;
}

.sharestats {
  padding-top: 10px;
  padding-bottom: 35px;
}

.sharestats li{
  display: inline-block;
}

.sharereward li {
  display: inline-block;
}

.sharereward h2 {
  font-size: 20px;
  font-family: "ralewaybold";
  color: rgb( 49, 49, 49 );
  text-transform: uppercase;
}

.fa-angle-right.badge {
  font-size: 21px;
  color: #000000;
  position: relative;
  top: 0px;
}

.fa-angle-right.badge:first-child {
  padding-left: 5px;
  margin-right: -5px
}

.fa-angle-right.badge:nth-child(2) {
  padding-right: 4px;
}

.correct-answer-points, .day-xp-multiplier, .grand-total {
    background-color: #e2e2e2;
    border-radius: 3px;
    height: 25px;
    margin-bottom: 5px;
    margin-right: 20px;
}

.grand-total {
  background-color: #f79521;
  margin-top: 20px;
}

.correct-answer-points h5, .day-xp-multiplier h5, .grand-total h5 {
  font-family: "Montserrat";
  font-size: 12px;
  float: left;
  padding-top: 5px;
  padding-left: 5px;
  text-transform: uppercase;
  color: #313131;
}

.correct-answer-points span, .day-xp-multiplier span, .grand-total span {
  float: right;
  margin-right: 5px;
  font-family: "ralewaybold";
  font-size: 16px;
  color: #f79521;
  padding-top: 2px;
}

.grand-total span {
  color: #ffffff;
}

.correct-answer-points {
  margin-top: 30px;
}

#a, #b, #c, #check, .choice, #incorrect {
    position: absolute;
    left: -36.5px;
    width: 65px;
    height: 65px;
    top: 50%;
    margin-top: -34px; /* should be half the id's height in order to center it */
}

/*.choice.red {
  background: url(/img/red.png) no-repeat;
}*/

/*.choice.green {
  background: url(/img/green.png) no-repeat;
}*/

.choice.green {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #82D433;
  border: 5px solid #63C900;
  overflow: hidden;
  position: absolute;
}

.choice.red{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #F94444;
  border: 5px solid #F81515;
  overflow: hidden;
  position: absolute;
}

.choice {
  z-index: 20;
}

.pct-fill.green {
  position: absolute;
  bottom: 0px;
  /*height: styled inline with asp*/
  width: 100%;
  background: #4FA100;
  animation-delay: 0.3s;
  animation-duration: .6s;
}

.pct-fill.red {
  position: absolute;
  bottom: 0px;
  /*height: styled inline with asp*/
  width: 110%;
  background: #C61111;
  animation-delay: 0s;
  animation-duration: .7s;
}

.pct-fill {
  z-index: 0;
  animation-name: wave;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes wave {
  0%{
    -ms-transform: rotate(3deg); /* IE 9 */
    -webkit-transform: rotate(3deg); /* Safari */
    transform: rotate(3deg);
    }

  50%{
  }

  100%{
    -ms-transform: rotate(-3deg); /* IE 9 */
    -webkit-transform: rotate(-3deg); /* Safari */
    transform: rotate(-3deg);
  }
}


.choice span {
  position: relative;
  font-family: "ralewaybold";
  font-size: 24px;
  color: #ffffff;
  line-height: 58px;
  z-index: 11;
}

#a {
  background: url(/img/a.png) no-repeat;
}

#b {
  background: url(/img/b.png) no-repeat;
}

#c {
  background: url(/img/c.png) no-repeat;
}

#check {
  background: url(/img/correct.png) no-repeat;
}

#incorrect {
  background: url(/img/incorrect.png) no-repeat;
}

.submit-button {
  background: url(/img/submit-bg.png) repeat;
  height: 51px;
  width: 280px;
  border-radius: 5px;
  display: inline-block;
  margin-bottom: 47px;
  font-family: "ralewayextrabold";
  font-size: 30px;
  color: #ffffff;
  text-transform: uppercase;
  line-height: 1.7em;
  width: 75%;
  max-width: 522px;
  padding-left: 4px;
  padding-right: 4px;
}

form {
    text-align: left;
    width: 80%;
    display: inline-block;
}

form input, form textarea {
  width: 100%;
  border-radius: 5px;
  border-width: 1px;
  border-style: inset;
  border-color: initial;
  border-image: initial;
  padding-left: 5px;
}

form textarea {
  min-height: 80px;
}

form input {
  height: 30px;
  margin-top: 5px;
}

form textarea {
  margin-top: 5px;
}

form label {
    font-family: "ralewayregular";
    font-size: 18px;
    text-shadow: 0px 1px 0px rgba(0,0,0,0.25);
}

form div {
  margin-top: 15px;
}

button {
  margin: 5px;
  padding: 5px 10px;
  border-radius: 5px;
  border-width: 1px;
  font-size: 22px;
  font-family: "ralewaybold";
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(to bottom, #ff971a 50%, #ff8b00 50%);
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.12);
  border: 0px;
}

button:hover {
  cursor: pointer;
  background: linear-gradient(to bottom, #ff8b00 50%, #ff7600 50%);
}

.continue-button:hover {
  background: #ff961a;
}

button.badge {
  height: 50px;
  width: 80%;
  max-width: 285px;
}

form button {
  float: right;
}

footer {
  width: 100%;
  height: 150px;
  background-color: #252525;
}

footer ul li {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}

footer a, footer a:visited {
  font-family: "ralewaymedium";
  font-size: 16px;
  color: #ffffff;
}

/* sign in modal */

#fade {
  display: block;
    position: fixed;
    left: 0%;
    top: 0%;
    background-color: black;
    -moz-opacity: 0.8;
    opacity: 0.8;
    filter: alpha(opacity=80);
    width: 100%;
    height: 110%;
    z-index: 1001;
}


.xoxo {
  display: none;
}
.modalDialog {
  display: block;
  position: absolute;
  top: 5%;
  right: 0;
  left: 0;
  background: #ffffff;
  z-index: 1002;
  width: 90%;
  height: auto;
  min-width: 270px;
  max-width: 460px;
  margin: 10% auto;
  border-radius: 5px;
  border: 8px solid #f2f2f2;
  padding-bottom: 30px;
  color: #343232;

  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
  -webkit-animation-duration: .4s;
  animation-duration: .4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
  -webkit-animation-duration: .4s;
  animation-duration: .4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 0;
  }
}


.modalDialog h3 {
    font-size: 20px;
    font-family: "ralewaymedium";
    color: rgb( 49, 49, 49 );
    padding: 0px;
    padding-bottom: 10px;
    text-transform: none;
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
}

.modalDialog.reward h3 {
  padding-bottom: 5px;
}

.modalDialog h4 {
  font-size: 25px;
  font-family: "ralewaybold";
  color: rgb( 39, 181, 239 );
  margin-bottom: 10px;
}

.modalDialog p {
  font-family: "ralewaymedium";
  font-size: 16px;
  width: 85%;
  margin: 0 auto;
}

.modalDialog.thanks p {
  margin-bottom: 10px;
}

.facebook-button.signin {
  margin-top: 3px;
}

.whoopsies {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  top: 25%;
  left: 0;
  right: 0;
  background: #F94444;
  padding: 10px;
  border-radius: 5px;
  border: 4px solid #F81515;
  width: 80%;
  display: inline-block;
  font-family: "ralewaymedium";
  font-size: 16px;
  color: #ffffff;
  max-width: 150px;
  z-index: 1000;
  box-shadow: 0px 2px rgba(0, 0, 0, 0.20);
}

.whoopsies > .triangle {
    position: absolute;
    top: 62px;
    left: 116px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #F81515;
    z-index: 1000;
}

.whoopsies > .triangle-shadow {
    position: absolute;
    top: 64px;
    left: 115px;
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 11px solid rgba(0, 0, 0, 0.20);
    z-index: 999;
}

.facebook-button, .email-container, .continue-button {
  position: relative;
  display: inline-block;
  border-radius: 5px;
  margin-top: 20px;
  width: 80%;
  max-width: 290px;
  height: 40px;
  /*line-height: 40px;*/
  color: #ffffff;
  font-size: 15px;
  font-family: "ralewayregular";
  /*border-right: 1px solid #999999;
  border-bottom: 1px solid #999999;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;*/
  border: none;
  cursor: pointer;
  z-index: 20;
  overflow: hidden;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.12);
}
.email-container {
  box-shadow: none;
}

.email-button {
  display: none;
    margin: 0px;
    position: relative;
    top: 0px;
    left: 0px;
    background: #61ccd3;
    z-index: 25;
    height: 100%;
    width: 100%;
}

.continue-button {
  background: #ffa233;
}

.continue-button i {
  padding-left: 8px;
}

.email-button i, .facebook-button i {
  padding-right: 8px;
}

input.signin {
    -webkit-appearance: none;
    position: relative;
    top: 0px;
    left: 0px;
    width: 93%;
    max-width: 277px;
    height: 34px;
    line-height: 35px;
    z-index: 23;
    padding-left: 10px;
    font-size: 17px;
    border-radius: 5px;
}

.submit-btn {
  position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 50px;
    color: #ffa233;
    z-index: 24;
    line-height: 52px;
}

.submit-btn i {
  font-size: 30px;
    padding-left: 13px;
}

.facebook-button {
  background: #3b5998;
}

.reward-container {
  position: relative;
  width: 100%;
  height: 180px;
  top: -10px;
}

.complete-badge {
  position: relative;
  width: 180px;
  height: 180px;
  display: inline-block;
}

.newbadge {
position: absolute;
left: 0;
right: 0;
margin: 27px auto;
width: 129px;
height: 129px;
}

.newlevel {
position: absolute;
left: 0;
right: 0;
margin: 34px auto;
width: 102px;
height: 112px;
background: url("/badges/level.png");
background-repeat: no-repeat;
background-size: 100%;
}

.newlevel span {
  font-size: 70px;
  line-height: 112px;
  font-family: 'Montserrat';
  color: rgb( 255, 255, 255 );
  text-shadow: 1px 1.732px 0px #63c900;
}

.spinner {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 180px;
  width: 180px;
  -webkit-animation: fa-spin 20s infinite linear;
  animation: fa-spin 20s infinite linear;
}

.allbadges-placeholder {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #e7e7e7;
  display: inline-block;
}


.allbadges-placeholder span {
  position: absolute;
  left: 2px;
  right: 0px;
  line-height: 52px;
  font-size: 30px;
  text-align: center;
  font-family: "ralewaybold";
  text-transform: uppercase;
  color: #ffffff;
  font-weight: normal;
  -ms-transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}

.badge-shadow { 
    height: 52px;
    width: 52px;
    border-radius: 50px;
    margin: 20px;
    -webkit-box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.25); 
}


@media only screen and (min-width: 641px) and (max-width: 790px) {
    .correct-answer-points h5, 
    .day-xp-multiplier h5,
    .grand-total h5 {
      font-size: 9px;
      line-height: 15px;
    }
}

/* - - - - - - - - - - - - - - - - */
.faq h3, .legal h3 {
    font-family: "ralewaymedium";
    font-size: 20px;
    color: #F79621;
    font-weight: normal;
    position: relative;
    margin-bottom: 15px;
}

.legal h3 span {
  font-size: 24px;
  color: #27B5EF;
}

.contentbox.mystats {
  margin-top: 60px;
}

.shareprofile {
  float: right;
  margin-top: -15px;
  margin-right: 10px;
  padding-bottom: 10px;
}

.shareprofile li{
  display: inline-block;
}

.shareprofile h2 {
  font-size: 12px;
  font-family: "ralewaybold";
  color: rgb( 64, 64, 64 );
  text-transform: uppercase;
  position: relative;
  top: 2px;
}

@media only screen and (max-width: 380px) {
  .statsection ul, .badgesection {
    margin: 0px;
    margin-left: 2px;
  }

  .badgewall.myprofile img {
    max-width: 53px;
    margin-bottom: 10px;
  }

  .badgewall.myprofile {
    text-align: center;
  }

  .username.myprofile, .statsection ul, .badgestats {
    text-indent: 5px;
  }
}

@media only screen and (min-width: 381px) {

  .statsection ul, .badgesection {
    margin: 0px;
    margin-left: 5px;
    margin-bottom: 25px;
  }

  .badgewall.myprofile img {
    max-width: 60px;
    margin-bottom: 10px;
  }

    .badgewall.myprofile {
    text-align: center;
  }

    .username.myprofile, .statsection ul, .badgestats {
    text-indent: 15px;
  }
}

.statsection ul li, .badgestats li {
  font-size: 14px;
  font-family: "ralewaymedium";
  color: rgb( 84, 84, 84 );
  text-align: left;
  margin-bottom: 10px;
}

.statsection ul li span {
  color: #f79521;
}

#stat-reset {
    background-color: #F79520;
    border-radius: 5px;
    font-family: "ralewaybold";
    font-size: 10px;
    font-weight: normal;
    text-transform: uppercase;
    color: #ffffff;
    padding: 5px;
    position: relative;
    width: 70px;
    margin-left: 15px;
    text-align: center;
    text-indent: 0px;
}

#correctpct {
  color: rgb( 37, 170, 225 );
}

.username.myprofile {
  font-size: 24px;
  font-family: "ralewaybold";
  color: rgb( 37, 170, 225 );
  text-align: left;
  margin-bottom: 15px;
}

.badgestats {
  margin: 0px;
}

.badgewall.myprofile ul {
  margin: 0px;
}

.badgewall.myprofile {
    display: inline-block;
    width: 100%;
    min-height: 0px;
    background: none;
    border: none;
    border-radius: 0px;
    margin-top: 15px;
    margin-bottom: 0px;
}

.seeallbadge.myprofile {
  top:0px;
}

.badgewall.myprofile ul {
  max-width: none;
}

.badgewall.myprofile ul li {
    display: inline-block;
    margin: 1px;
}


.xp-level.myprofile {
  margin: 0px;
}

.gamehistory ul {
  font-size: 16px;
  font-family: "ralewaybold";
  color: rgb( 49, 49, 49 );
  text-align: left;
  text-align: center;
}

.gamehistory ul li {
  background-color: #f2f2f2;
  padding-left: 15px;
  padding-top: 4px;
  padding-bottom: 4px;
  text-align: left;
  margin-bottom: 5px;
  width: 90%;
  display: inline-block;
  border-radius: 4px;
}

@media only screen and (max-width: 385px) {
  .earndate, .earntxt {
  text-align: center;
  width: 100%;
  }

  .gamehistory ul li {
  padding-left: 0px;  
  }
}

@media only screen and (min-width: 386px) {
  {
  display: inline-block;
  }
}

.earndate i{
  color: #ff961c;
  margin-left: 18px;
}

.earntxt span {
  color: #25aae1;
}

.contentbox.mystats {
  background-color: #ffffff;
}

.showmorehist {
  margin-bottom: 30px;
  font-size: 18px;
  padding: 10px 25px;
}

.category_name.myprofile {
  position: relative;
  background-color: #f2f2f2;
  width: 364px;
  min-height: 285px;
  display: inline-block;
  margin-bottom: 20px;
  border-radius: 5px;
}

.win-ratio {
  height: 115px;
  width: 115px;
  background: #93d639;
  border-radius: 50%;
  border: 5px solid #a3dc57;
  display: inline-block;
  color: #ffffff;
  font-family: "ralewaybold";
  font-size: 37px;
}

.win-percentage {
  margin-top: 24px;
}

.win-ratio h5 {
  font-family: "ralewayregular";
  font-size: 14px;
  text-transform: uppercase;
  padding-top: 2px;
}

.category_name.myprofile h3 {
    font-size: 34px;
    font-family: "ralewaybold";
    color: rgb( 37, 170, 225 );
    text-transform: uppercase;
    text-align: center;
    margin-top: 18px;
    margin-bottom: 15px;
    padding: 0px;
}

.cat-logo.myprofile {
    height: 78px;
    width: 156px;
    position: relative;
    top: 0px;
    text-align: center;
    margin-top: 15px;
}

.category-slides {
  margin: 0px;
  padding-bottom: 32px;
}

.category-slides li {
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
}

.ratio-stats h5 {
    font-family: "ralewaymedium";
    color: rgb( 49, 49, 49 );
    font-size: 20px;
    text-transform: uppercase;
}

.ratio-stats {
  margin-top: 15px;
}

.slide-indicator {
    position: absolute;
    color: #f89520;
    font-size: 40px;
    bottom: 1px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    z-index: 3;
}

.flickity-prev-next-button.previous {
  animation-name: nextblinkp;
  animation-duration: .5s;
  animation-delay: .25s;
  animation-iteration-count: 20;
  /*animation-direction: alternate;*/
  animation-timing-function: linear;
}

.flickity-prev-next-button.next {
  animation-name: nextblinkn;
  animation-duration: .5s;
  animation-delay: .25s;
  animation-iteration-count: 20;
  /*animation-direction: alternate;*/
  animation-timing-function: linear;
}

@keyframes nextblinkp {
  0%{
    left: 1px;
  }

  100%{
    left: 5px;
  }
}

@keyframes nextblinkn {
  0%{
    right: 1px;
  }

  100%{
    right: 5px;
  }
}

.fa.fa-arrows-h {
  position: relative;
  right: -17px;
  top: -16px;
  z-index: 2;
  opacity: .6;
}


.fa-hand-o-up {
  position: relative;
  animation-name: slideicon;
  animation-duration: .5s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes slideicon {
  0%{
    left: -21px;
  }
  100%{
    left: -33px;
  }
}

/* - - - - - - - - - - - - - FOR SLIDER MENU - - - - - - - - - - - */

#wrapper {
  width: 99%;
  height: 430px;
  margin: 0 auto;
}

#scroller {
  position: absolute;
  z-index: 10;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
  text-size-adjust: none;
  overflow: hidden;
}


@media only screen and (max-width: 531px) {
  #scroller {
  width: 6550px;
  height: 420px;
  }

.category_name.myprofile {
      position: relative;
    background-color: #f2f2f2;
    width: 320px;
    min-height: 277px;
    display: inline-block;
    margin-bottom: 20px;
    border-radius: 5px;
  }

}


@media only screen and (min-width: 532px) {
  #scroller {
  width: 7680px;
  height: 420px;
  }
}


#indicator {
display: none;
}

#dotty {
display: none;
}

.slidermenu {
  position: relative;
  top: 0px;
  overflow: hidden;
}

/* ^ ^ ^ ^ ^ ^ ^ ^ END SLIDER MENU ^ ^ ^ ^ ^ ^ ^ ^ */