@charset "utf-8";
/* CSS Document */

* {
    margin: 0; /*all things begin with assumed 0 margin in Shane's way*/
    padding: 0; /*all things begin with assumed 0 padding in Shane's way*/
    box-sizing: border-box; /*box dimensions are logical in Shane's way*/
	font-family: 'Electrolize', sans-serif;
}

ul {
	list-style: none;
}


#home {
	font-size: 30px;
	text-decoration: none;
	background-color:rgba(6,46,9,1.00);
	color: antiquewhite;
	border: hidden;
  
}

#home:visited {
	font-size: 30px;
	text-decoration: none;
	background-color:rgba(6,46,9,1.00);
	color: antiquewhite;
	outline:0;
	border: hidden;
}

article {
			background-color:rgba(31,13,0,1.00);
			height:670px;
			font-size: 15px;
			line-height: 27px;
			width:450px;
			display:inline-block;
			padding: 10px;	
}

#index {
			background-color:black;
			height:450px;
			font-size: 40px;
			line-height: 27px;
			width:450px;
			display:inline-block;
			padding: 10px;	
}

#indexTop {
			background-color:rgba(6,46,9,1.00);
			height:450px;
			font-size: 35px;
			line-height: 35px;
			width:450px;
			display:inline-block;
			padding: 10px;	
}


div.home {
			background-color:rgba(6,46,9,1.00);
			height:670px;
			font-size: 15px;
			line-height: 27px;
			width:450px;
			display:inline-block;
			padding: 10px;	
}

aside.h1 {
	background-color:rgba(50,1,2,1.00);
			width:740px;
			height:670px;
			display:inline-block;
			vertical-align:top;
			padding:10px;
			line-height: 27px;
			padding-top: 20px
}
	
aside.automata {
			background-color:rgba(50,1,2,1.00);
			width:740px;
			height:670px;
			display:inline-block;
			vertical-align:top;
			padding:10px;
			line-height: 27px;
			padding-top: 20px
		}

aside.replicant {
			background-color:#CED2D2;
			width:740px;
			height:670px;
			display:inline-block;
			vertical-align:top;
			padding:10px;
			line-height: 27px;
			padding-top: 20px
		}

aside.ac {
			background-color:black;
			width:740px;
			height:670px;
			display:inline-block;
			vertical-align:top;
			padding:10px;
			line-height: 27px;
			padding-top: 20px
		}

aside.bb {
			background-color:rgba(31,13,0,1.00);
			width:740px;
			height:670px;
			display:inline-block;
			vertical-align:top;
			padding:10px;
			line-height: 27px;
			padding-top: 20px
		}

aside.bcs {
			background-color:rgba(31,13,0,1.00);
			width:740px;
			height:670px;
			display:inline-block;
			vertical-align:top;
			padding:10px;
			line-height: 27px;
			padding-top: 20px
		}

aside.bebop {
			background-color:#1A1A1A;
			width:740px;
			height:670px;
			display:inline-block;
			vertical-align:top;
			padding:10px;
			line-height: 27px;
			padding-top: 20px
		}

aside.aot {
			background-color:#3E1210;
			width:740px;
			height:670px;
			display:inline-block;
			vertical-align:top;
			padding:10px;
			line-height: 27px;
			padding-top: 20px
		}

aside.mob {
			background-color:#2F001F;
			width:740px;
			height:670px;
			display:inline-block;
			vertical-align:top;
			padding:10px;
			line-height: 27px;
			padding-top: 20px
		}

aside.db {
			background-color:#060D35;
			width:740px;
			height:670px;
			display:inline-block;
			vertical-align:top;
			padding:10px;
			line-height: 27px;
			padding-top: 20px
		}

aside.jjba {
			background-color:#43022B;
			width:740px;
			height:670px;
			display:inline-block;
			vertical-align:top;
			padding:10px;
			line-height: 27px;
			padding-top: 20px
		}

aside.twenty {
			background-color:#000000;
			width:740px;
			height:670px;
			display:inline-block;
			vertical-align:top;
			padding:10px;
			line-height: 27px;
			padding-top: 20px
		}



aside.left {
			width:140px;
			height:140px;
			display:inline-block;
			vertical-align:top;
			padding:10px;
			line-height: 27px;
			padding-top: 150px;
			float:left;
			padding-left: 100px;
			background-color: #333844;
}

nav {
    width: 100%; /*the nav will extend as far as it's container*/
}

nav ul {
    background-color: rgba(6,46,9,1.00);
    list-style: none; /*remove bullets in the ul*/
    text-align: center; /*align buttons centerd in area */
}

nav ul li {
    font-family: sans-serif; /*define a font-family*/
    font-size: 20px; /*define a font-size in px*/
    line-height: 60px; /*define the line-height (leading)*/
    height: 60px; /*match line-height and height of li box*/
    width: 250px; /*assign the width for each button*/
    display: inline-block; /*move buttons horizontal with display: inline-block */
    margin-right: -4px; /*remove a small margin caused by inline-block */
}

nav a {
    text-decoration: none; /*remove the ugly underline*/
    color:antiquewhite;
    display: block; /*make the entire button area active for hover */
}

nav a:hover { /*this is a psudo-class*/
    
    text-decoration: none; /*remove the ugly underline*/
}
		
		nav ul ul {
			display: none; /*hides the nested ul*/
			position: absolute; /*puts it into wormhole*/
			width: inherit; /*gets width from parent*/
}

		nav ul li:hover ul {
			display: block; /*make ul show when li is hovered*/
		}

		nav ul li ul li {
			display: block; /*fixes small offset in sub-navigation*/
		}


header {
	font-size: 40px;
	text-align: center;
}
#replicant {

	float: left;
	display: inline-block;
	
}

#replicant img {
	width:100%;
    height:100%;
	border: double thick black;
  float: left;
  
}

#snow {
	height: 300px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#snow img {
	width:100%;
    height:100%;
	border: double thick black;
	
}

#hills {
	height: 300px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#third {
	height: 300px;
	width: 200px;
	margin-left: auto;
	margin-right: auto;
}


#hills img {
	width:100%;
    height:100%;
	border: double thick black;
}





#automata {

	float: left;
	display: inline-block;
	
}

#automata img {
	width:100%;
    height:100%;
	border: double thick black;
  float: left;
  
}

#park {
	height: 300px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#park img {
	width:100%;
    height:100%;
	border: double thick white;
	
}

#city1 {
	height: 300px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#third {
	height: 300px;
	width: 200px;
	margin-left: auto;
	margin-right: auto;
}


#city1 img {
	width:100%;
    height:100%;
	border: double thick white;
}






#ac {

	float: left;
	display: inline-block;
	
}

#ac img {
	width:100%;
    height:100%;
	border: double thick black;
  float: left;
  
}

#ac1 {
	height: 300px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#ac1 img {
	width:100%;
    height:100%;
	border: double thick orange;
	
}

#ac2 {
	height: 300px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#third {
	height: 300px;
	width: 200px;
	margin-left: auto;
	margin-right: auto;
}


#ac2 img {
	width:100%;
    height:100%;
	border: double thick orange;
}

#wrapper::after {
  
  content: "";
  clear: both;
  display: table;
} 




#bb {

	float: left;
	display: inline-block;
	
}

#bb img {
	width:100%;
    height:100%;
	border: double thick black;
  float: left;
  
}

#bb1 {
	height: 300px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#bb1 img {
	width:100%;
    height:100%;
	border: double thick rgba(126,85,86,1.00);
	
}

#bb2 {
	height: 300px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#third {
	height: 300px;
	width: 200px;
	margin-left: auto;
	margin-right: auto;
}


#bb2 img {
	width:100%;
    height:100%;
	border: double thick rgba(126,85,86,1.00);
}






#bcs {

	float: left;
	display: inline-block;
	
}

#bcs img {
	width:100%;
    height:100%;
	border: double thick black;
  float: left;
  
}

#bcs1 {
	height: 300px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#bcs1 img {
	width:100%;
    height:100%;
	border: double thick rgba(126,85,86,1.00);
	
}

#bcs2 {
	height: 300px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#third {
	height: 300px;
	width: 200px;
	margin-left: auto;
	margin-right: auto;
}


#bcs2 img {
	width:100%;
    height:100%;
	border: double thick rgba(126,85,86,1.00);
}







#bebop {

	float: left;
	display: inline-block;
	
}

#bebop img {
	width:100%;
    height:100%;
	border: double thick black;
  float: left;
  
}

#bebop1 {
	height: 300px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#bebop1 img {
	width:100%;
    height:100%;
	border: double thick #DED894;
	
}

#bebop2 {
	height: 300px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#third {
	height: 300px;
	width: 200px;
	margin-left: auto;
	margin-right: auto;
}


#bebop2 img {
	width:100%;
    height:100%;
	border: double thick #DED894;
}





			#aot {

	float: left;
	display: inline-block;
	
}

#aot img {
	width:100%;
    height:100%;
	border: double thick black;
  float: left;
  
}

#aot1 {
	height: 300px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#aot1 img {
	width:100%;
    height:100%;
	border: double thick #5C8E87;
	
}

#aot2 {
	height: 300px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#third {
	height: 300px;
	width: 200px;
	margin-left: auto;
	margin-right: auto;
}


#aot2 img {
	width:100%;
    height:100%;
	border: double thick #5C8E87;
}



		#mob {

	float: left;
	display: inline-block;
	
}

#mob img {
	width:100%;
    height:100%;
	border: double thick black;
  float: left;
  
}

#mob1 {
	height: 300px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#mob1 img {
	width:100%;
    height:100%;
	border: double thick #931741;
	
}

#mob2 {
	height: 300px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#third {
	height: 300px;
	width: 200px;
	margin-left: auto;
	margin-right: auto;
}


#mob2 img {
	width:100%;
    height:100%;
	border: double thick #931741;
}




		#db {

	float: left;
	display: inline-block;
	
}

#db img {
	width:100%;
    height:100%;
	border: double thick black;
  float: left;
  
}

#db1 {
	height: 300px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#db1 img {
	width:100%;
    height:100%;
	border: double thick #CC7E0E;
	
}

#db2 {
	height: 300px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#third {
	height: 272px;
	width: 200px;
	margin-left: auto;
	margin-right: auto;
}


#db2 img {
	width:100%;
    height:100%;
	border: double thick #CC7E0E;
}




		#jjba {

	float: left;
	display: inline-block;
	
}

#jjba img {
	width:100%;
    height:100%;
	border: double thick black;
  float: left;
  
}

#jjba1 {
	height: 300px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#jjba1 img {
	width:100%;
    height:100%;
	border: double thick #B0FCDE;
	
}

#jjba2 {
	height: 300px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#third {
	height: 272px;
	width: 200px;
	margin-left: auto;
	margin-right: auto;
}


#jjba2 img {
	width:100%;
    height:100%;
	border: double thick #B0FCDE;
}




		#twenty {

	float: left;
	display: inline-block;
	
}

#twenty img {
	width:100%;
    height:100%;
	border: double thick black;
  float: left;
  
}

#twenty1 {
	height: 300px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#twenty1 img {
	width:100%;
    height:100%;
	border: double thick #494949;
	
}

#twenty2 {
	height: 300px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#third {
	height: 272px;
	width: 200px;
	margin-left: auto;
	margin-right: auto;
}


#twenty2 img {
	width:100%;
    height:100%;
	border: double thick #494949;
}

:root {
  --color1: rgb(0, 231, 255);
  --color2: rgb(255, 0, 231);
  --back: url(https://cms.channelfireball.com/dragonball_cardback_c2b4ccb5a8/dragonball_cardback_c2b4ccb5a8.jpg);
  --GokuAndVegeta1: #396ba0;
  --GokuAndVegeta2: #ced1d2;
  --GokuAndVegetafront: url(https://file-cdn.gvgmall.com/product/20170517172655_gvg.jpg);
  --Vegetto1: #54a29e;
  --Vegetto2: #a64c03;
  --Vegettofront: url(https://s3.amazonaws.com/prod.bandaitcgplus.files.api/card_image/DB-EN/BT7/BT7-118.png);
  --Gogeta1: #2f7299;
  --Gogeta2: #c2b200;
  --Gogetafront: url(https://product-images.tcgplayer.com/fit-in/437x437/188337.jpg);
  --Gohan1: #6ea1b4;
  --Gohan2: #1d386a;
  --Gohanfront: url(https://product-images.tcgplayer.com/fit-in/437x437/269271.jpg);
}

.card {
  width: 71.5vw;
  height: 100vw;
  position: relative;
  overflow: hidden;
  margin: 20px;
  overflow: hidden;
  z-index: 10;
  touch-action: none;
  border-radius: 5%/3.5%;
  box-shadow: -5px -5px 5px -5px var(--color1), 5px 5px 5px -5px var(--color2), -7px -7px 10px -5px transparent, 7px 7px 10px -5px transparent, 0 0 5px 0px rgba(255, 255, 255, 0), 0 55px 35px -20px rgba(0, 0, 0, 0.5);
  transition: transform 0.5s ease, box-shadow 0.2s ease;
  will-change: transform, filter;
  background-color: #040712;
  background-image: var(--front);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  transform-origin: center;
}
@media screen and (min-width: 600px) {
  .card {
    width: clamp(12.9vw, 61vh, 18vw);
    height: clamp(18vw, 85vh, 25.2vw);
  }
}

.card:hover {
  box-shadow: -20px -20px 30px -25px var(--color1), 20px 20px 30px -25px var(--color2), -7px -7px 10px -5px var(--color1), 7px 7px 10px -5px var(--color2), 0 0 13px 4px rgba(255, 255, 255, 0.3), 0 55px 35px -20px rgba(0, 0, 0, 0.5);
}

.card.GokuAndVegeta {
  --color1: var(--GokuAndVegeta1);
  --color2: var(--GokuAndVegeta2);
  --front: var(--GokuAndVegetafront);
}

.card.Vegetto {
   --color1: #54a29e;
  --color2: #ccac6f;
  --color3: #69e4a5;
  --color4: #8ec5d6;
  --color5: #b98cce;
  --front: var(--Vegettofront);
}

.card.Gohan {
  --color1: var(--Gohan1);
  --color2: var(--Gohan2);
  --front: var(--Gohanfront);
}

.card.Gogeta {
  --color1: #ec9bb6;
  --color2: #ccac6f;
  --color3: #69e4a5;
  --color4: #8ec5d6;
  --color5: #b98cce;
  --front: var(--Gogetafront);
}

.card:before,
.card:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-repeat: no-repeat;
  opacity: 0.5;
  mix-blend-mode: color-dodge;
  transition: all 0.33s ease;
}

.card:before {
  background-position: 50% 50%;
  background-size: 300% 300%;
  background-image: linear-gradient(115deg, transparent 0%, var(--color1) 25%, transparent 47%, transparent 53%, var(--color2) 75%, transparent 100%);
  opacity: 0.5;
  filter: brightness(0.5) contrast(1);
  z-index: 1;
}

.card:after {
  opacity: 1;
  background-image: url("https://assets.codepen.io/13471/sparkles.gif"), url(https://assets.codepen.io/13471/holo.png), linear-gradient(125deg, #ff008450 15%, #fca40040 30%, #ffff0030 40%, #00ff8a20 60%, #00cfff40 70%, #cc4cfa50 85%);
  background-position: 50% 50%;
  background-size: 160%;
  background-blend-mode: overlay;
  z-index: 2;
  filter: brightness(1) contrast(1);
  transition: all 0.33s ease;
  mix-blend-mode: color-dodge;
  opacity: 0.75;
}

.card.active:after,
.card:hover:after {
  filter: brightness(1) contrast(1);
  opacity: 1;
}

.card.active,
.card:hover {
  -webkit-animation: none;
          animation: none;
  transition: box-shadow 0.1s ease-out;
}

.card.active:before,
.card:hover:before {
  -webkit-animation: none;
          animation: none;
  background-image: linear-gradient(110deg, transparent 25%, var(--color1) 48%, var(--color2) 52%, transparent 75%);
  background-position: 50% 50%;
  background-size: 250% 250%;
  opacity: 0.88;
  filter: brightness(0.66) contrast(1.33);
  transition: none;
}

.card.active:before,
.card:hover:before,
.card.active:after,
.card:hover:after {
  -webkit-animation: none;
          animation: none;
  transition: none;
}

.card.animated {
  transition: none;
  -webkit-animation: holoCard 12s ease 0s 1;
          animation: holoCard 12s ease 0s 1;
}
.card.animated:before {
  transition: none;
  -webkit-animation: holoGradient 12s ease 0s 1;
          animation: holoGradient 12s ease 0s 1;
}
.card.animated:after {
  transition: none;
  -webkit-animation: holoSparkle 12s ease 0s 1;
          animation: holoSparkle 12s ease 0s 1;
}

@-webkit-keyframes holoSparkle {
  0%, 100% {
    opacity: 0.75;
    background-position: 50% 50%;
    filter: brightness(1.2) contrast(1.25);
  }
  5%, 8% {
    opacity: 1;
    background-position: 40% 40%;
    filter: brightness(0.8) contrast(1.2);
  }
  13%, 16% {
    opacity: 0.5;
    background-position: 50% 50%;
    filter: brightness(1.2) contrast(0.8);
  }
  35%, 38% {
    opacity: 1;
    background-position: 60% 60%;
    filter: brightness(1) contrast(1);
  }
  55% {
    opacity: 0.33;
    background-position: 45% 45%;
    filter: brightness(1.2) contrast(1.25);
  }
}

@keyframes holoSparkle {
  0%, 100% {
    opacity: 0.75;
    background-position: 50% 50%;
    filter: brightness(1.2) contrast(1.25);
  }
  5%, 8% {
    opacity: 1;
    background-position: 40% 40%;
    filter: brightness(0.8) contrast(1.2);
  }
  13%, 16% {
    opacity: 0.5;
    background-position: 50% 50%;
    filter: brightness(1.2) contrast(0.8);
  }
  35%, 38% {
    opacity: 1;
    background-position: 60% 60%;
    filter: brightness(1) contrast(1);
  }
  55% {
    opacity: 0.33;
    background-position: 45% 45%;
    filter: brightness(1.2) contrast(1.25);
  }
}
@-webkit-keyframes holoGradient {
  0%, 100% {
    opacity: 0.5;
    background-position: 50% 50%;
    filter: brightness(0.5) contrast(1);
  }
  5%, 9% {
    background-position: 100% 100%;
    opacity: 1;
    filter: brightness(0.75) contrast(1.25);
  }
  13%, 17% {
    background-position: 0% 0%;
    opacity: 0.88;
  }
  35%, 39% {
    background-position: 100% 100%;
    opacity: 1;
    filter: brightness(0.5) contrast(1);
  }
  55% {
    background-position: 0% 0%;
    opacity: 1;
    filter: brightness(0.75) contrast(1.25);
  }
}
@keyframes holoGradient {
  0%, 100% {
    opacity: 0.5;
    background-position: 50% 50%;
    filter: brightness(0.5) contrast(1);
  }
  5%, 9% {
    background-position: 100% 100%;
    opacity: 1;
    filter: brightness(0.75) contrast(1.25);
  }
  13%, 17% {
    background-position: 0% 0%;
    opacity: 0.88;
  }
  35%, 39% {
    background-position: 100% 100%;
    opacity: 1;
    filter: brightness(0.5) contrast(1);
  }
  55% {
    background-position: 0% 0%;
    opacity: 1;
    filter: brightness(0.75) contrast(1.25);
  }
}
@-webkit-keyframes holoCard {
  0%, 100% {
    transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
  }
  5%, 8% {
    transform: rotateZ(0deg) rotateX(6deg) rotateY(-20deg);
  }
  13%, 16% {
    transform: rotateZ(0deg) rotateX(-9deg) rotateY(32deg);
  }
  35%, 38% {
    transform: rotateZ(3deg) rotateX(12deg) rotateY(20deg);
  }
  55% {
    transform: rotateZ(-3deg) rotateX(-12deg) rotateY(-27deg);
  }
}
@keyframes holoCard {
  0%, 100% {
    transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
  }
  5%, 8% {
    transform: rotateZ(0deg) rotateX(6deg) rotateY(-20deg);
  }
  13%, 16% {
    transform: rotateZ(0deg) rotateX(-9deg) rotateY(32deg);
  }
  35%, 38% {
    transform: rotateZ(3deg) rotateX(12deg) rotateY(20deg);
  }
  55% {
    transform: rotateZ(-3deg) rotateX(-12deg) rotateY(-27deg);
  }
}
.card.Gogeta:hover {
  box-shadow: 0 0 30px -5px white, 0 0 10px -2px white, 0 55px 35px -20px rgba(0, 0, 0, 0.5);
}

.card.Gogeta:hover:before,
.card.Gogeta.active:before {
  background-image: linear-gradient(115deg, transparent 20%, var(--color1) 36%, var(--color2) 43%, var(--color3) 50%, var(--color4) 57%, var(--color5) 64%, transparent 80%);
}

.demo .card {
  background-image: var(--back);
  font-size: 2vh;
}

.demo .card > span {
  position: relative;
  top: 45%;
}

.demo .card:nth-of-type(1),
.demo .card:nth-of-type(2),
.demo .card:nth-of-type(3) {
  width: 20vh;
  height: 27.5vh;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 25px 15px -10px rgba(0, 0, 0, 0.5);
  -webkit-animation: none;
          animation: none;
}

.demo .card:nth-of-type(1):before, .demo .card:nth-of-type(1):after,
.demo .card:nth-of-type(2):before,
.demo .card:nth-of-type(2):after,
.demo .card:nth-of-type(3):before,
.demo .card:nth-of-type(3):after {
  -webkit-animation: none;
          animation: none;
}

.demo .card:nth-of-type(1):before, .demo .card:nth-of-type(1):after {
  display: none;
}

.demo .card:nth-of-type(2) {
  background: none;
}
.demo .card:nth-of-type(2):before {
  display: none;
}

.demo .card:nth-of-type(3) {
  background: none;
}
.demo .card:nth-of-type(3):after {
  display: none;
}

.operator {
  display: inline-block;
  vertical-align: middle;
  font-size: 6vh;
}

html, body {
  height: 100%;
  background-color: #333844;
  padding: 0;
  z-index: 1;
  transform: translate3d(0, 0, 0.1px);
}

body {
  color: white;
  background-color: #333844;
  font-family: "Heebo", sans-serif;
  text-align: center;
}

h1 {
  display: block;
  margin: 30px 0;
}

p {
  margin-top: 5px;
  font-weight: 200;
}

#app {
  position: relative;
}

.demo,
.cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  perspective: 2000px;
  position: relative;
  z-index: 1;
  transform: translate3d(0.1px, 0.1px, 0.1px);
}

.demo {
  flex-direction: row;
  justify-content: center;
}

@media screen and (min-width: 600px) {
  .cards {
    flex-direction: row;
  }
}
.cards .card:nth-child(2), .cards .card:nth-child(2):before, .cards .card:nth-child(2):after {
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}
.cards .card:nth-child(3), .cards .card:nth-child(3):before, .cards .card:nth-child(3):after {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.cards .card:nth-child(4), .cards .card:nth-child(4):before, .cards .card:nth-child(4):after {
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
}