/* ===================================================================
 * 09. home - (_layout.scss)
 *
 * ------------------------------------------------------------------- */
#home {
	background: black;
	width: 100%;
	height: 100%;
	min-height: 800px;
	z-index: 600;
	position: relative;
}


#home.home-particles {
	background: black;
	overflow: hidden;
}
#home.home-particles .pg-canvas {
	position: absolute;
	top: 0;
	left: 0;
	height: 100% !important;
	width: 100% !important;
	opacity: 0.15;
}
#home.home-particles .shadow-overlay {
	display: none;
}


#container {
  background:#fff;
  text-align:center;
  border-radius:4px;
}

.colors {
}

.colors > li {
  list-style: none;
  width: 23%;
  display: inline-block;
  margin: 0 10px;
  cursor: pointer;
  transition-duration: .2s;
}
.colors > li:hover {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
.colors > li.active-team {
  -webkit-transform: scale(1.2) translateY(-10px);
  transform: scale(1.2) translateY(-10px);
}


.colors > li:nth-child(1) {
}
.colors > li:nth-child(2) {
}
.colors > li:nth-child(3) {
}
.colors > li:nth-child(4) {
}
.colors > li:nth-child(5) {
}


.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
}

.flip-container:hover .flipper,
.flip-container.hover .flipper {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}


.flipper {
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;

  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;

  -o-transition: 0.6s;
  -o-transform-style: preserve-3d;

  transition: 0.6s;
  transform-style: preserve-3d;

  position: relative;
}

.front, .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;

  position: absolute;
  top: 0;
  left: 0;
}

.front {
  z-index: 2;
  max-height: 430px;
  overflow: hidden;



}

.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.front .name {
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  transform: rotate(-20deg);
}


.story {
  max-height: 200px;
  overflow: auto;
}

.story_v2 {
  max-height: 100px;
  overflow: auto;
}

.purple{
  background-color:#9877ea;
}

.cbp-item p {
  max-height: 350px;
  overflow: auto;
}