@font-face {
  font-family: Gadugi;
  src: url(font/gadugi.ttf);
}
@font-face {
  font-family: PermanentMarker-Regular;
  src: url(font/PermanentMarker-Regular.ttf);
}
body {
	margin:0px;
	padding: 0px;
	font-family: Gadugi, Arial, Helvetica, sans-serif;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
.center {
	position:relative;
	margin-left: auto;
	margin-right: auto;
}

	#unicorn {
		margin-top:20px !important;
		background-image: url("images/unicorn.png");
		width: 120px;
		height: 120px;
		background-size: contain;
		background-repeat: no-repeat;
		margin-bottom: 80px;
	}

.snippetmessage {
	top: 0px;
	width: 543px;
	height:199px;
	position:absolute;
	display: none;
}
#center_wrapper_for_snippets{
	position:fixed;
	top:0px;
	width: 100%;
	height:199px;
	}
/* Extra small devices (phones, 600px and down) */
/* Medium devices (landscape tablets, 768px and up) */
/* Small devices (portrait tablets and large phones, 600px and up) */
/* @media only screen and (max-width: 600px), screen and (min-width: 600px), screen and (min-width: 768px) {
	
} */
@media only screen and (max-width: 992px) {
	#canvasexplosion{
		position:absolute;
		margin:0;
		padding:0;
		z-index:-10000;
	}
	.outer {
	  display: table;
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 80%;
	  width: 100%;
	  min-height:510px;
	}

	.middle {
	  display: table-cell;
	  vertical-align: middle;
	}
	#title {
	  font-size: 4.5em; /* 40px/16=2.5em */
	  text-align: center;
	}
	.mobilelinebreak {
		display:inline;
	}
	.desktoplinebreak {
		display:block;
	}
	.smallerfont{
		font-size: 1em;
	}
	p {
	  font-size: 1em; 
	}
	#logo {
		margin-top:20px;
		background-image: url("images/logo.png");
		background-size: contain;
		background-repeat:no-repeat;
		width: 250px;
		height: 250px;
	}
	#ctawrapper {
		width: 438px;
		height: 147px;
	}
	#slacklink {
		width: 438px;
		height: 147px;
		z-index:100000;
	}
	#cta {		
		z-index: 100000;
		background-image:url("images/addtoslack.png");
		background-size: contain;
		background-repeat:no-repeat;
		width: 438px;
		height: 147px;
	}
	#wackscore {
		color: #fff;
		height: 50px;
		width: 50px;
		background-color: #ff3366;
		border-radius: 50%;
		display: inline-block;
		position:absolute;
		left:410px;
		top:-25px;
		font-size:2em;
		z-index:100000;
		text-align:center;
		font-weight:bold;
		visibility:hidden;
	}
	#snippetpreview {
		width: 650px;
		color:#ff3366;
		font-family:PermanentMarker-Regular;
		font-size:2em;
		text-align:center;
		visibility:hidden;
	}
	#wacktrophy {
		background-image:url("images/wacktrophy.png");
		background-size: contain;
		background-repeat:no-repeat;
		width: 155px;
		height: 51px;
		position:absolute;
		left:130px;
		top:-11px;
		z-index:100000;
		visibility:hidden;
	}
	#arrow {
		background-image:url("images/arrow.png");
		background-size: contain;
		background-repeat:no-repeat;
		width: 150px;
		height: 150px;
		position: absolute;
		left: 510px;
		top: -60px;
		z-index:100000;
	}
	#subtitle {
		text-align: center;
		padding-top: 0px;
		z-index: 100000;
		font-size:2.5em;
	}
	#unicorn {
		margin-top:10px;
		background-image: url("images/unicorn.png");
		width: 40px;
		height: 40px;
		z-index:1500;
	}
	#canvas {
		position: absolute;
		left: 663px;
		top:601px;
		z-index:-1;
		display:none;
	}
	#footerbuffer{
		width:100%;
		height:550px;
	}
	#footer {
		width: 100%;
		background-color: #ff3366;
		position:absolute;
		bottom:0;
	}
	#quotescontainer{
		width:700px;
		height: 300px;
		font-size:2em;

	}
	.quotepic{
		width: 150px;
		height: 150px;
		float:left;
		position:relative;
		top:23px;
		background-size: contain;
		margin-left: 0px;
		background-repeat: no-repeat;
	}
	
	#quotepic1{
		background-image: url("images/gal.png");
	}
	.quotetext{
		text-align:left;
		color:#fff;
		font-size:1.125em;
		left: 20px;
		top:20px;
		position:relative;
		margin-right: 0px;
	}
	.quotename{
		text-align:right;
		color:#000;
		top:25px;
		font-size:1em;
		position:relative;
		margin-right: 0px;
	}
	#footernote {
		font-size: 2em;
		text-align: center;
		width: 100%;
		padding-bottom: 40px;
		padding-top: 5px;
		background-color: #fff;
		bottom: 0px;
	}
	#slackamole {
		display: none;
		position:absolute;
		cursor:pointer;
		width: 100px;
		height: 100px;
		z-index:0;
	}
	#floating_slack_logo {
		position:absolute;
		background: url("images/slacklogo50px.png");
		background-size: contain;
		background-repeat:no-repeat;
		width: 60px;
		height: 60px;
		top:12px;
		left:12px
	}
	#floating_slack_logo_counter{
		position:absolute;
		background: url("images/floating_counter.png");
		background-size: contain;
		background-repeat:no-repeat;
		width: 35px;
		height: 35px;
		top:0px;
		left:56px;
		animation: pulse 2s infinite;
	}
	@keyframes pulse {
		0% {
		  opacity: 0%;
		}
		50%{
			opacity: 100%;
		}
		100% {
		  opacity: 0%;
		}
	  }
	.snippetmessage {
		width: 100%;
		height: auto;
	}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

	#canvasexplosion{
		position:absolute;
		margin:0;
		padding:0;
		z-index:-10000;
	}
	.outer {
	  display: table;
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 80%;
	  width: 100%;
	  min-height:510px;
	}

	.middle {
	  display: table-cell;
	  vertical-align: middle;
	}
	#title {
	  font-size: 2.5em; /* 40px/16=2.5em */
	  text-align: center;
	}
	.mobilelinebreak {
		display:inline;
	}
	.desktoplinebreak {
		display:block;
	}
	.smallerfont{
		font-size: 1em;
	}
	p {
	  font-size: 1em; 
	}
	#logo {
		margin-top:20px;
		background-image: url("images/logo.png");
		background-size: contain;
		background-repeat:no-repeat;
		width: 112px;
		height: 112px;
	}
	#ctawrapper {
		width: 146px;
		height: 49px;
	}
	#slacklink {
		width: 146px;
		height: 49px;
		z-index:100000;
	}
	#cta {		
		z-index: 100000;
		background-image:url("images/addtoslack.png");
		background-size: contain;
		background-repeat:no-repeat;
		width: 146px;
		height: 49px;
	}
	#wackscore {
		color: #fff;
		height: 22px;
		width: 22px;
		background-color: #ff3366;
		border-radius: 50%;
		display: inline-block;
		position:absolute;
		left:135px;
		top:-11px;
		z-index:100000;
		text-align:center;
		font-weight:bold;
		visibility:hidden;
	}
	#snippetpreview {
		width: 350px;
		color:#ff3366;
		font-family:PermanentMarker-Regular;
		font-size:1em;
		text-align:center;
		visibility:hidden;
	}
	#wacktrophy {
		background-image:url("images/wacktrophy.png");
		background-size: contain;
		background-repeat:no-repeat;
		width: 155px;
		height: 51px;
		position:absolute;
		left:130px;
		top:-11px;
		z-index:100000;
		visibility:hidden;
	}
	#arrow {
		background-image:url("images/arrow.png");
		background-size: contain;
		background-repeat:no-repeat;
		width: 63px;
		height: 63px;
		position:absolute;
		left:230px;
		top:-20px;
		z-index:100000;
	}
	#subtitle {
		text-align: center;
		padding-top: 0px;
		z-index: 100000;
	}
	#unicorn {
		margin-top:10px;
		background-image: url("images/unicorn.png");
		width: 40px;
		height: 40px;
		z-index:1500;
	}
	#canvas {
		position: absolute;
		left: 663px;
		top:601px;
		z-index:-1;
		display:none;
	}
	#footerbuffer{
		width:100%;
		height:550px;
	}
	#footer {
		width: 100%;
		background-color: #ff3366;
		margin-top: auto;
	}
	#quotescontainer{
		width:625px;
		height: 132px;

	}
	.quotepic{
		width: 78px;
		height: 78px;
		float:left;
		position:relative;
		top:23px;
		background-size: contain;
		margin-left: 0px;
		background-repeat: no-repeat;
	}
	
	#quotepic1{
		background-image: url("images/gal.png");
	}
	.quotetext{
		text-align:left;
		color:#fff;
		font-size:1.125em;
		left: 20px;
		top:20px;
		position:relative;
		margin-right: 0px;
	}
	.quotename{
		text-align:right;
		color:#000;
		top:25px;
		font-size:1em;
		position:relative;
		margin-right: 0px;
	}
	#footernote {
		font-size: 0.8em;
		text-align: center;
		width: 100%;
		padding-bottom: 5px;
		padding-top: 5px;
		background-color: #fff;
		bottom: 0px;
	}
	#slackamole {
		display: none;
		position:absolute;
		cursor:pointer;
		width: 50px;
		height: 50px;
		z-index:0;
	}
	#floating_slack_logo {
		position:absolute;
		background: url("images/slacklogo50px.png");
		background-size: contain;
		background-repeat:no-repeat;
		width: 25px;
		height: 25px;
		top:12px;
		left:12px
	}
	#floating_slack_logo_counter{
		position:absolute;
		background: url("images/floating_counter.png");
		background-size: contain;
		background-repeat:no-repeat;
		width: 15px;
		height: 15px;
		top:5px;
		left:28px;
		animation: pulse 2s infinite;
	}
	@keyframes pulse {
		0% {
		  opacity: 0%;
		}
		50%{
			opacity: 100%;
		}
		100% {
		  opacity: 0%;
		}
	  }
	.snippetmessage {
		left: 50%; /*half the container width*/
		margin-left: -271px; /*half the width of the image*/
	}

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	
}


#bgcover {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #4a154b;
	display: none;
	z-index: -2;
}
#preload-02 { 
	background: url("images/addtoslack2.png");
	visibility:hidden;
	position:absolute;
	}
#preload-03 { 
	background: url("images/addtoslack3.png");
	visibility:hidden;
	position:absolute;
	}
#preload-04 { 
	background: url("images/addtoslack4.png");
	visibility:hidden;
	position:absolute; 
	}
#preload-05 { 
	background: url("images/addtoslack5.png");
	visibility:hidden;
	position:absolute;
	}
#preload-06 { 
	background: url("images/addtoslack6.png");
	visibility:hidden;
	position:absolute;
	}
#preload-07 { 
	background: url("images/addtoslack7.png");
	visibility:hidden;
	position:absolute;
	}