@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900);

*,
*:before,
*:after {
  box-sizing: border-box;
}

/* body {
  background: -webkit-linear-gradient(top, #8c7a7a 0%, #af877c 65%, #af877c 100%) fixed;
  background: linear-gradient(to bottom, #8c7a7a 0%, #af877c 65%, #af877c 100%) fixed;
  background: url("../images/coc-background.jpg") no-repeat center center fixed;
  background-size: cover;
  font: 14px/20px "Lato", Arial, sans-serif;
  color: #9E9E9E;
  margin-top: 30px;
} */

.slide-container {
  margin: auto;
  width: 100%;
  text-align: center;
}

.wrapper {
  padding-top: .9662rem;
  padding-bottom: .9662rem;
}

.wrapper:focus {
  outline: 0;
}

.clash-card {
  background: white;
  width: 7.2464rem;
  display: inline-block;
  margin: auto;
  border-radius: .4589rem;
  position: relative;
  text-align: center;
  box-shadow: 0 0 10px rgba(17, 16, 16, 0.7);
  z-index: 9999;
}

.clash-card__image {
  position: relative;
  height: 5.5556rem;
  margin-bottom: .8454rem;
  border-top-left-radius: .3382rem;
  border-top-right-radius: .3382rem;
}

.clash-card__image--barbarian {
  background: url("../images/barbarian-bg.jpg");
}

.clash-card__image--barbarian img {
  width: 9.6618rem;
  position: absolute;
  top: -1.57rem;
  left: -1.6908rem;
}

.clash-card__image--archer {
  background: url("../images/archer-bg.jpg");
}

.clash-card__image--archer img {
  width: 9.6618rem;
  position: absolute;
  top: -0.8213rem;
  left: -0.8937rem;
}

.clash-card__image--giant {
  background: url("../images/giant-bg.jpg");
}

.clash-card__image--giant img {
  width: 8.2126rem;
  position: absolute;
  top: -0.7246rem;
  left: -0.6039rem;
}

.clash-card__image--goblin {
  background: url("../images/goblin-bg.jpg");
}

.clash-card__image--goblin img {
  width: 8.9372rem;
  position: absolute;
  top: -0.5072rem;
  left: -0.8937rem;
}

.clash-card__image--wizard {
  background: url("../images/wizard-bg.jpg");
}

.clash-card__image--wizard img {
  width: 8.3333rem;
  position: absolute;
  top: -0.6763rem;
  left: -0.2415rem;
}

.clash-card__level {
  text-transform: uppercase;
  font-size: .4899rem;
  font-weight: 700;
  margin-bottom: .0725rem;
}

.clash-card__level--barbarian {
  color: #EC9B3B;
}

.clash-card__level--archer {
  color: #EE5487;
}

.clash-card__level--giant {
  color: #F6901A;
}

.clash-card__level--goblin {
  color: #82BB30;
}

.clash-card__level--wizard {
  color: #4FACFF;
}

.clash-card__unit-name {
  font-size: .628rem;
  color: black;
  font-weight: 900;
  margin-bottom: .1208rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  width: 100%;
}

.clash-card__unit-description {
  margin-bottom: .2415rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  height: 1.8116rem;
  font: .3382rem/.4831rem Lato, Arial, sans-serif;
  color: #9E9E9E;
}

.clash-card__unit-stats--barbarian {
  background: #EC9B3B;
}

.clash-card__unit-stats--barbarian .one-third {
  border-right: .0242rem solid #BD7C2F;
}

.clash-card__unit-stats--archer {
  background: #EE5487;
}

.clash-card__unit-stats--archer .one-third {
  border-right: .0242rem solid #ededed;
}

.clash-card__unit-stats--giant {
  background: #F6901A;
}

.clash-card__unit-stats--giant .one-third {
  border-right: .0242rem solid #de7b09;
}

.clash-card__unit-stats--goblin {
  background: #82BB30;
}

.clash-card__unit-stats--goblin .one-third {
  border-right: .0242rem solid #71a32a;
}

.clash-card__unit-stats--wizard {
  background: #4FACFF;
}

.clash-card__unit-stats--wizard .one-third {
  border-right: .0242rem solid #309eff;
}

.clash-card__unit-stats {
  color: white;
  font-weight: 700;
  border-bottom-left-radius: .3382rem;
  border-bottom-right-radius: .3382rem;
}

.clash-card__unit-stats .one-third {
  width: 33%;
  float: left;
  padding: .4831rem .3623rem;
}

.clash-card__unit-stats sup {
  position: absolute;
  right: 0;
  bottom: .5831rem;
  font-size: .35rem;
  margin-left: .1rem;
}

.clash-card__unit-stats .stat {
  position: relative;
  font-size: .5831rem;
  font-weight: 400;
  font-family: 'AlumniSansCollegiateOne-Regular';
  margin-bottom: .2415rem;
}

.clash-card__unit-stats .stat-value {
  text-transform: uppercase;
  font-weight: 400;
  font-size: .2899rem;
}

.clash-card__unit-stats .no-border {
  border-right: none;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.slick-prev {
  left: .2415rem;
  z-index: 999;
}

.slick-next {
  right: .2415rem;
  z-index: 999;
}