body {
	font-size: 18px;
	color: #fff;
	padding: 75px 0;
	background-color: #a0312d; /* #1B5E20 */
	background-size: 232px 232px;
	background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),repeating-linear-gradient(270deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px,rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),repeating-linear-gradient(125deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px,rgba(0,0,0,.2) 5px);
}

h1 {
	font-family: 'Suez One', serif;
	font-size: 3.5rem;
}
h3 {
	color: rgba(255,255,255,.8);
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;	
}
.card h2 {
	font-family: 'Roboto Slab', serif;
	text-align: center;
	height: 100px;
	max-height: 100px;
	background-color: #a0312d;
	margin: 0;
	padding: 28px 0;
	position: absolute;
    width: 100%;
	transition: none;
	-webkit-transition: none;    	
}
.card.open h2 {
	background-color: #1B5E20;
	transition: all 0.5s ease 1s;
	-webkit-transition: all 0.5s ease 1s;    		
}
.card h3 {
	font-family: 'Roboto Slab', serif;
	text-align: center;	
	padding: 25px 30px 5px;
	margin-bottom: 15px; 
}
.card h5 {
	font-family: 'Roboto Slab', serif;
	text-align: left;	
}
.divider {
	margin: 5px 20% 15px;
	font-size: 2rem;
	text-align: center;
	border-bottom: 1px dashed rgba(255,255,255,.4);   	
}
.card p {
	color: rgba(255,255,255,.8);
	text-align: center;
	padding: 20px 30px;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
	margin-top: 100px;
	margin-bottom: 0;
}
.card p + p {
	margin-top: 0;
	padding-top: 0;
}
.content {
	padding: 0 20%;
}
.card .content p {
	margin: 0 0 10px !important;
	text-align: left;
}
.content li {
	padding: 0;
}
li {
	color: rgba(255,255,255,.8);
	padding: 20px 30px;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;	
}
.card {
	background-color: #1B5E20;
	border: 1px dashed #fff;
	height: auto;
	max-height: 100px;
	overflow: hidden;
	margin-top: 40px;
	padding-bottom: 30px;
	cursor: pointer;
	transition: none;
	-webkit-transition: none;    	
}
.card.open {
	max-height: 5000px;
	animation: wobble 0.82s cubic-bezier(.36,.07,.19,.97) both;
	transition: max-height 2s ease-out 1s;
	-webkit-transition: max-height 2s ease-out 1s;		
}
li.media {
	padding: 20px 25%;
}

@keyframes wobble {
	10%, 90% {
		transform: rotate(-2deg);
	}
	20%, 80% {
		transform: rotate(2deg);
	}
	30%, 50%, 70% {
		transform: rotate(-3deg);
	}
	40%, 60% {
		transform: rotate(3deg);
	}
}


#snowflakeContainer {
	position: absolute;
	left: 0px;
	top: 0px;
	display: none;
}
.snowflake {
	position: fixed;
	background-color: rgba(255,255,255,1);
	user-select: none;
	z-index: 1000;
	pointer-events: none;
	border-radius: 50%;
	width: 10px;
	height: 10px;
}

.particles > .particle {
  border-radius: 100%;
  background: transparent;
  
  position: absolute;
  
  background-size: 100% 100%;
  background-repeat: no-repeat;
  
  &.smaller {
    width: 5px;
    height: 5px;
  }
  &.small {
    width: 10px;
    height: 10px;
  }
  &.normal {
    width: 15px;
    height: 15px;
  }
  &.big {
    width: 20px;
    height: 20px;
  }
  &.bigger {
    width: 25px;
    height: 25px;
  }
}