/* CSS Document */

html{
	overflow-x: hidden;
}
body {
	font-family: 'Montserrat', sans-serif;
	overflow:hidden;
}

.whatsappGlow{
	animation-name: whatsappGlowPulse;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

@-webkit-keyframes whatsappGlowPulse{ 
	0% {text-shadow: 0px 0px 0px white;}
    25% {text-shadow: 0px 0px 5px limegreen;}
	30% {text-shadow: 0px 0px 2px limegreen;}
	50% {text-shadow: 0px 0px 0px white;}
	75% {text-shadow: 0px 0px 5px limegreen;}
	80% {text-shadow: 0px 0px 2px limegreen;}
	100% {text-shadow: 0px 0px 0px white;}
}
	
@keyframes whatsappGlowPulse {
	0% {text-shadow: 0px 0px 0px white;}
    25% {text-shadow: 0px 0px 5px limegreen;}
	30% {text-shadow: 0px 0px 2px limegreen;}
	50% {text-shadow: 0px 0px 0px white;}
	75% {text-shadow: 0px 0px 5px limegreen;}
	80% {text-shadow: 0px 0px 2px limegreen;}
	100% {text-shadow: 0px 0px 0px white;}
}

.gameIframe{
	width:100%;
	overflow: visible;
}

.descImage{
	width:100%;
	position: absolute;
	top:0px;
	left:50%;
	transform: translate(-50%,0);
	opacity: 0.3;
	box-shadow: 0px 0px 10px 0px black;
	border-radius:5px;
	z-index:-1;
}

p {
	font-size:1em;
}

@media(max-width:767.98px){
p {
	font-size:0.9em;
}
}

a:hover{
	cursor:pointer;
}

h1{
	
}

h2, h3{
	font-family: 'Poor Story'; 
}

header {
position:fixed;
width:100%;
z-index: 10;
}
button{
	font-family: 'Poor Story';
	font-size-adjust: auto;
	letter-spacing: 2px;
}
button a{
	
}

    /* ------------------------- Preloader Style ------------------------------*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 101;
  background-color:#222330;
}
#preloader i {
  color: #fff;
  position: absolute;
  top:100%;
  left: 50%;
  transform: translate(-50%,-100%);
  height: 200px;
  width: 200px;
}

#preloaderLogo{
    position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
    max-width: 100px;
	min-width:25px;
    z-index: 999;
}

.glass{
	font-family: 'Poor Story'; 
	/* background styles */
	position: relative;
	display: inline-block;
	background-color: silver; /*for compatibility with older browsers*/
	background-image: linear-gradient(silver, black);
	font-size:22px;
	width:100%;
	height:50px;
	
	/* text styles */
	text-decoration: none;
	border-radius: 10px;
	box-shadow: 0px 5px 10px -5px #333;
	/*text-shadow: 0px -1px #333;*/
	color:white;
	text-shadow:0px 0px 5px black;
}

.glass:after{
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	border-radius: 10px;
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}

.glass:hover{
	background: linear-gradient(#073,#0fa);
}

.glassAlt{
	/* background styles */
	font-family: 'Poor Story'; 
	position: relative;
	display: inline-block;
	background-color: silver; /*for compatibility with older browsers*/
	background-image: linear-gradient(silver, yellow);
	font-size:22px;
	width:100%;
	height:50px;
	
	/* text styles */
	text-decoration: none;
	border-radius: 10px;
	box-shadow: 0px 5px 10px -5px #333;
	/*text-shadow: 0px -1px #333;*/
	color:black;
	text-shadow:0px 0px 5px white;
}

.glassAlt:after{
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	border-radius: 10px;
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}

.glassAlt:hover{
	background: linear-gradient(#073,#0fa);
}
/*--------------------- Section Styling --------------------*/

section{
width:100%;
padding:75px 0px 50px 0px;
}

.section-title {
	font-size:2.8em;
}

.section-tagline {
	color: dimgrey;
	font-size: 1.5em;
}
@media(max-width:767.98px){
	.section-title{
		font-size:2.5em;
	}
}

@media(max-width:575.98px){
	.section-title{
		font-size:2.1em;
	}
	.section-tagline{
		font-size:1.2em;
	}
}

#hero {
	height:100vh;
	padding:0px;
	background-image: url(../img/meshWave_m.jpeg);
	background-attachment:fixed;
	background-size:cover;
	background-position: center;
	background-repeat: no-repeat;
}

#about{
	background: #DDDDDD;
	background-image: url(../img/builder.svg);
	background-attachment: fixed;
	background-size:cover;
	background-position: center;
	background-repeat: no-repeat;
	border-top:5px black solid;
	border-bottom:5px black solid;
}

#aboutMain {
	background-image: url(../img/nodeWave_m.jpg);
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
#services {
	min-height: 750px;
	position: relative;
	z-index: 1;
}

#testimonials{
	background-image: url(../img/builder.svg);
	background-size:cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: inset 0px 0px 15px black;	
}

#portfolio{
	position: relative;
	z-index: 0;
	background-image: url("../img/meshWave_m.jpeg");
	background-attachment: fixed;
	background-size:cover;
	background-position: center;
	background-repeat: no-repeat;	border-top:5px black solid;
	border-bottom:5px black solid;
}

#contact{
	background: #DDDDDD;
	overflow:hidden;
}
.snapwidget-widget{
	border-radius:5px;
	overflow:hidden;
	width:auto;
	height:auto;
	margin:auto;
}
@media(max-width : 991.98px) {
	
#services {
	min-height: 1100px;
}

}

@media(max-width : 767.98px) {
	#hero{
		background-attachment: scroll;
		background-size:contain;
		background-position: bottom;
	}
	
	#aboutMain
	{
		background-attachment: scroll;
		background-size:contain;
		background-position: bottom;
	}
	
	#services {
		min-height: 1100px;
	}
	
	#portfolio{
		background-attachment: scroll;
		background-size:contain;
		background-position: bottom;
	}
	.snapwidget-widget{
	border-radius:5px;
	overflow:hidden;
	width:100%;
	height:auto;
	margin:auto;
}
}



@media(max-width : 575.98px){
	#testimonials {
		background-size: contain;
	}
	#services {
		min-height: 900px;
	}
	#about {
		background-image: url(../img/builder.png);
		background-size:contain;
		background-attachment: scroll !important;
		background-position: top;
	    background-repeat: space;
	}

}


/*------------------------- Nav Styling --------------------------------*/
nav{
	font-weight: 700;
	box-shadow: 3px 0px 7px grey;
}
nav li{
	border-right:0.5px lightgray solid;
	font-weight: 700;
}

nav li:hover{
	background-color: lightgray;
	border-radius: 5px;
}

.navbar-brand{
	letter-spacing: 2px;
	font-weight: 700;
}

.navSocial{
	float:right;
}
.navSocial a {
	color:#222222;
	text-decoration: none;
}
@media(max-width:991.98px){
	.navSocial{
	visibility: collapse;
	display: none;
	}
}

#clientPortalNav{
	animation: textShadowPulse 1s infinite;
}

@-webkit-keyframes textShadowPulse {
    0% {text-shadow: 0px 0px 0px white;}
    50% {text-shadow: 0px 0px 10px yellow;}
	100% {text-shadow: 0px 0px 0px white;}
}

@keyframes textShadowPulse {
    0% {text-shadow: 0px 0px 0px white;}
    50% {text-shadow: 0px 0px 10px yellow;}
	100% {text-shadow: 0px 0px 0px white;}
}
/*------------------------- Hero Styling --------------------------------*/
#hero button{
	margin-bottom:15px;
	margin-left: 5px;
	margin-right:5px;
}
#hero button a{
	padding:0px 5px;
	font-size:1.5em;
}

.hero-title{
	font-size:50px;
	font-weight: 700;
	letter-spacing:10px;
	
}

.hero-tagline{
	font-family: 'Montserrat', sans-serif;
	font-variant:small-caps;
	font-size:26px;
	height: 50px;
	letter-spacing: 2px;
	font-weight: 300;
}

@media(max-width:575.98px){
.hero-tagline{
	line-height: 2;
	font-size:20px;
}	
}

.hero-logo{
	width:60%;
	max-width: 550px;
	min-width:250px;
	padding:25px;
	margin:auto;
}

.hero-icon{
	text-align: center;
	padding:0px 10px;
	text-shadow:0px 0px 5px white;
}
@media(max-width:575.98px){
	.hero-icon{
		font-size:20px;
	}	
}

.topShadow{
	width:70%;
}

.bottomShadow{
	width:70%
}

.serviceGraphics{
	text-decoration:none;
	color:#222222;
}
.serviceGraphics:hover{
	color:black;
}

.hero-container {
	position: relative;
	width:100%;
	text-align: center;
	top:50%;
	transform: translate(0%,-50%);
}

@media(max-width : 350px){
	.hero-container{
	position: static;
	margin-top:100px;
	transform: translate(0%, 0%);
	}
}

.heroCanvas {
	position: absolute;
	left:0px;
	top:0px;
	width:100%;
	height:inherit;
	min-height:100%;
	background-color:rgba(0,0,0,0.00);
	overflow: hidden;
	z-index:0;
}

/* ------------------------ About Styling --------------------------*/

.myGradient{
	background-color:linear-gradient(to right, rgba(255,255,255,1), rgba(0,0,0,0) 100%);
}

.about-intro-cont{
	margin-bottom:5px;
	background-color:rgba(255,255,255,0.95);
	border-radius: 5px;
	box-shadow: 0px 0px 5px black;
	padding:10px;
}

@media(max-width:575.98px){
	.about-intro-cont{
	background-color:rgba(255,255,255,0.95);
	width:98%;
	margin:auto;
	}
}

.about-intro-cont h4 {
	font-family: 'Poor Story'; 
	background-color:#444444;
	color:white;
	border-radius: 5px;
	padding:5px 5px 10px 5px;
}

.about-intro-cont h4:hover {
	cursor: pointer;
	background-color:#222222; 
	transition: all 0.3s linear;
}

.about-intro{
	color:black;
	padding:5px 15px 15px 5px;
}
.read-more{
	font-family: 'Poor Story';
}

#testimonials i {
	font-size:25px;
}	
@media(max-width:767.98px){
	#testimonials i{
		font-size:18px;
	}	
}

@media(max-width:575.98px){
	#testimonials i{
		font-size:16px;
	}	
}

.testimonialItem{
	background-color:rgba(255,255,255,0.9);
	line-height:2;
	padding-top:25px;
	box-shadow: 0px 0px 15px black;
	border-top:black solid 5px;
	border-bottom:black solid 5px;
}
.testimonialLogo{
	width:25px;
	margin: auto;
}

.aboutContent{
	padding:25px;
	border-radius: 5px;
	box-shadow: 0px 0px 10px black;
	border:white solid 5px;
	background:#DDDDDD;
}

.aboutContentSection{
	
}

.aboutContentSection p {
	padding:0px 15px 15px 15px;
}

.aboutSubtitle{
	border-radius: 5px;
	background: linear-gradient(to right, rgba(255,255,255,1), rgba(0,0,0,0) 90%);
	padding:5px;
}

.expandBtn{
	animation-duration: 2s;
	text-shadow: 0px 0px 5px white;
}
.expandBtn:hover{
	cursor:pointer;
	animation: none;
}

#extraAbout{
	visibility: collapse;
	display: none;
	padding-top:25px;
}
#extraAbout h2{
 font-size:2em;
}
#extraAbout h3{
	font-size:1.4em;
}

.profilepicCont{
	border:white solid 5px;
	border-radius:5px;
	background:#DDDDDD;
	max-width:250px;
	margin:auto;
	padding:15px 0px 15px 0px;
	box-shadow:0px 0px 5px black;
	text-align: center;
}

/*------------------------Service Styling ------------------------------------*/

.serviceNodeCont{
	width:100%;
	text-align: center;
}

.serviceSpider{
	width:350px;
}
.serviceTitle{
	padding-bottom:75px;
}
.serviceNode{
	width:125px;
	height:125px;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
	background-color: #444444;
	position:absolute;
	background-size: cover;
	border:white 5px double;
	box-shadow: 0px 0px 5px 0px black;
	z-index: 2;
}

.serviceNode:hover{
	animation-name: none;
	box-shadow: 0px 0px 10px 0px black;
	cursor:pointer;
	transition:all ease 0.3s;
}

.serviceNode i {
	position: relative;
	top:50%;
	transform: translate(0%,-50%);
}

.serviceNode h2 {
	font-size:30px;
}

.serviceNode h3 {
	font-size:24px;
	font-weight: 700;
	text-decoration: underline;
}

.serviceNode p {
	font-size:14px;
}

.serviceNodeText{
	position: absolute;
}

.serviceNodeTextClose{
	position:absolute;
	visibility:collapse;
	display:none;
}

.serviceNode em { 
	text-shadow: 0px 0px 5px black;
}

.servicePopOutTitle {
	font-family: 'Poor Story';
	font-weight: 700;
	padding-left:5px;
	color:black;
	text-shadow: 1px 1px 5px white;
	font-size:40px;
}
.serviceNode hr {
	color:white;
	border:1px solid white;
	border-radius: 1px;
	width:60%;
}

@media(max-width : 575.98px){
	.servicePopOutTitle {
		font-size:28px;
	}
	.serviceNode h3{
		font-size:20px;
	}
}

#webNode{
	background-image: url();
	background-position: center;
	top:-20%;
	left:39%;
	-moz-animation-duration: 2s;
	-webkit-animation-duration: 2s;
	animation-duration:2s;
}

#appNode{
	background-image: url();
	background-position: center;
	top:60%;
	left:10%;
	-moz-animation-duration: 1.8s;
	-webkit-animation-duration: 1.8s;
	animation-duration:1.8s;
}

#gameNode{
	background-image: url();
	background-position: center;
	top:10%;
	left:70%;
	-moz-animation-duration: 1.6s;
	-webkit-animation-duration: 1.6s;
	animation-duration:1.6s;
}

#designCubeNode{
	background-image: url();
	background-position: center;
	top:60%;
	left:69%;
	-moz-animation-duration: 1.9s;
	-webkit-animation-duration: 1.9s;
	animation-duration:1.9s;
}

#designNode{
	background-image: url();
	background-position: center;
	top:10%;
	left:10%;
	-moz-animation-duration: 1.4s;
	-webkit-animation-duration: 1.4s;
	animation-duration:1.4s;
}

#cryptoNode{
	background-image: url();
	background-position: center;
	top:85%;
	left:39%;
	-moz-animation-duration: 2.1s;
	-webkit-animation-duration: 2.1s;
	animation-duration:2.1s;
}

@media(max-width : 1199.98px){
	#webNode{
		top:-20%;
		left:37.5%;
	}
	
	#appNode{
		top:60%;
		left:5%;
	}
	
	#gameNode{
		top:10%;
		left:70%;
	}
	
	#designCubeNode{
		top:60%;
		left:70%;
	}
	
	#designNode{
		top:10%;
		left:5%;
	}
	
	#cryptoNode{
		top:85%;
		left:37.5%;
	}
}

@media(max-width : 991.98px){
	#serviceCol{
		margin-bottom:100px;
	}
	#webNode{
		top:-25%;
		left:41%;
	}
	
	#appNode{
		top:60%;
		left:13%;
	}
	
	#gameNode{
		top:5%;
		left:70%;
	}
	
	#designCubeNode{
		top:60%;
		left:70%;
	}
	
	#designNode{
		top:5%;
		left:13%;
	}
	
	#cryptoNode{
		top:90%;
		left:41%;
	}
}

@media(max-width : 767.98px){
	.serviceNode{
		width:120px;
		height:120px;
		border:white 2px double;
		font-size:0.8em;
	}
	
	#serviceCol{
		margin-bottom:100px;
	}
	#webNode{
		top:-20%;
		left:38.5%;
	}
	
	#appNode{
		top:60%;
		left:7%;
	}
	
	#gameNode{
		top:10%;
		left:70%;
	}
	
	#designCubeNode{
		top:60%;
		left:70%;
	}
	
	#designNode{
		top:10%;
		left:7%;
	}
	
	#cryptoNode{
		top:85%;
		left:38.5%;
	}
}

@media(max-width : 575.98px){


	
	#serviceCol{
		width:300px;
		position: relative;
		left:50%;
		transform: translate(-50%,0%);
		margin-bottom:75px;
	}
	
	.serviceNodeCont{
		text-align: center;
	}
	.serviceSpider{
		width:200px;
	}
	
	.serviceNode{
		width:75px;
		height:75px;
		border:white 2px double;
		font-size:0.7em;
	}
	
	#webNode{
		top:-20%;
		left:37.5%;
	}
	
	#appNode{
		top:60%;
		left:5%;
	}
	
	#gameNode{
		top:10%;
		left:70%;
	}
	
	#designCubeNode{
		top:60%;
		left:70%;
	}
	
	#designNode{
		top:10%;
		left:5%;
	}
	
	#cryptoNode{
		top:85%;
		left:37.5%;
	}
	
}

@media(max-width : 350px ){
	#serviceCol{
		width:175px;
	}
	.serviceNode{
		width:70px;
		height:70px;
		border:white 2px double;
		font-size:0.6em;
	}
	.serviceSpider{
		width:160px;
	}
	#webNode{
		top:-25%;
		left:35%;
	}
	#appNode{
		top:60%;
		left:-15%;
	}
	
	#gameNode{
		top:5%;
		left:80%;
	}
	
	#designCubeNode{
		top:60%;
		left:80%;
	}
	
	#designNode{
		top:5%;
		left:-15%;
	}
	#cryptoNode{
		top:90%;
		left:35%;
	}
}

.services-dropdown-cont{
	margin-bottom:5px;
	background-color:rgba(255,255,255,0.95);
	border-radius: 5px;
	box-shadow: 0px 0px 5px black;
}

.services-dropdown-cont a{
	text-decoration: none;
}

.serviceBadge {
	font-size:25px;
	width:45px;
	text-align: center;
}

.services-dropdown-cont h4 {
	font-family: 'Poor Story'; 
	background-color:#444444;
	color:white;
	border-radius: 5px;
	padding:5px 5px 10px 5px;
}

@media(max-width:575.98px){
	.services-dropdown-cont h4 {
	font-size:20px;
	}
}

.services-dropdown-cont h4:hover {
	cursor: pointer;
	background-color:#222222; 
	transition: all 0.3s linear;
}

.services-intro{
	color:black;
	padding:5px 15px 15px 5px;
}
/*----------------------- Portfolio Styling ------------------------ */
#portfolioSlider{

}

.slick-prev:before {
  color:#444444;
}
.slick-next:before {
  color:#444444;
}

.portfolioSlide{
	visibility: collapse;
	position:absolute;
}

.activeSlide{
	visibility: visible;
    position: static;
}

#portfolioWeb{
	
}

.portfolioSlick{
	
}

.portfolioSlickItem{
 width:auto;
}

.portfolioTile{
	width:auto;
	padding:10px;
	margin:auto;
}
.itemTile{
	width:auto;
	max-width:380px;
	padding:25px;
	margin:auto;
	/*background-color:#444444;*/
	color:#444444;
	border-radius: 5px;
}

.itemTile:hover{
	transition: all 0.3s linear;
	color:white;
	background-color:#444444; 
	cursor:pointer;
	box-shadow:0px 0px 5px #444444;
}
.itemTitle{
 margin: auto;
 display: inline-block;
}
.itemTitle span{
float:left;
}

@media(max-width:575.98px){
	.itemTitle span{
	 font-size: 22px;
	}
}

.portfolioScreenShot {
	width:auto;
	max-width:95%;
	height:auto;
	max-height:180px;
	margin:auto;
	border:2px solid #CDCDCD;
	border-radius: 5px;
	box-shadow: 0px 0px 5px #444444;
}


.portfolioItemLogo{
	max-width:30px;
	max-height:30px;
	border-radius:5px;
	float:left;
}
/*------------------------ Contact Styling---------------------------*/

#contact .container{
	
}

.social-links{
	
}
.social-links a{
	color:black;
}

#worldSVG{
	position:absolute;
	width:450px;
	transform: translate(-25%,-25%);
}

#flagGif{
	position: relative;
	width:200px;
	top:-215px;
	left:18%;
}

@media(max-width:1199.98px){
	#worldSVG{
	position:absolute;
	width:400px;
	transform: translate(-36%,-40%);
}

#flagGif{
	position: relative;
	width:180px;
	top:-250px;
	left:14%;
}
}
@media(max-width:991.98px){
	#worldSVG{
	position:absolute;
	width:400px;
	transform: translate(-30%,-25%);
}

#flagGif{
	position: relative;
	width:180px;
	top:-200px;
	left:22%;
}
}
@media(max-width:767.98px){
	#worldSVG{
	position:absolute;
	width:400px;
	transform: translate(40%,0%);
}

#flagGif{
	position: relative;
	width:180px;
	top:-100px;
	left:85%;
}
}
@media(max-width:575.98px){
	#worldSVG{
	position:absolute;
	width:200px;
	transform: translate(45%,0%);
}

#flagGif{
	position: relative;
	width:125px;
	top:-80px;
	left:220px;
}
}

/*---------------- Footer styling -------------------------*/
#footer{
	position:relative;
	width:100%;
}

footer{
	height: 100px;
	background: #222222;
}

.footer-title{
 color:white;
 font-size:25px;
 line-height: 2;
 font-weight: 700;
 letter-spacing:5px;
}

.footer-info{
	font-size:12px;
	color:white;
}

.loginBody{
	background-image: url(../img/nodeWave_m.jpg);
	background-size: cover;
	background-position: bottom;
	background-repeat: no-repeat;
}

.whatIsThis{
	position: absolute;
	left:50%;
	transform: translate(-50%,0%);
	bottom:0px;
	color:black;
	text-shadow: 0px 0px 2px white;
	}

@media(max-width:767.98px){
	
	.loginBody{
		background-size:contain;
	}
	
	.whatIsThis{
		position: relative;
		padding:10px;
	}
}

/*-----------------Anchor offset-------------------*/

/*:target::before {
  content:"";
  display:block;
  height:60px; 
  margin:-60px 0 0; 
}*/



.gameIcon {
	width:45px;
	border-radius: 5px;
	border:3px solid black;
	line-height: 0;
}

.gameInfo {
	margin-top:100px;
	margin-bottom:25px;
}

#canvas {
	border-radius:5px;
}

.template-wrap {
	text-align:center;
}

.template {
	
}

#stackrTile {
	background-image: url("../resources/stackr/logoMain.jpg");
}
#bitmunchTile {
	background-image: url("../resources/bitmunch/logoSpin.gif");
}
#dontPopTile {
	background-image: url("../resources/dont_pop/dontPopLogo.JPG");
}
#orbsTile{
	background-image: url("../../img/portfolio/orbsLogo.jpg")
}
.gameTile{
	width:100%;
	height:245px;
	max-width:245px;
	border:5px solid black;
	box-shadow:0px 0px 5px black;
	border-radius:5px;
	margin:auto;
	margin-top:15px;
	margin-bottom:15px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: all linear 0.2s;
}

.gameTile:hover{
	box-shadow:0px 0px 20px 1px black;
	border-color:white;
	height:250px;
	max-width:250px;
	margin-top: 12.5px;
	margin-bottom : 12.5px;
	transition: all linear 0.3s;
}

.gameLoginForm{
	z-index:1;
 	text-align: center;
 	width:40%;
	min-width:300px;
	margin:auto;
}
.gameLoginForm form{
	text-align: center;
	margin:auto;
}
@media(min-width:1360px){
	.gameLoginForm {
		width:auto;
		min-width:auto;
		max-width:250px;
		position: absolute;
		left:0px;
		top:50%;
		transform: translate(0%,-50%);
		text-align: left;
	}
	.gameLoginForm form{
		text-align: left;
	}
}

#leaderboardTable{
	font-family:'Poor Story';
	margin:auto;
	border-radius: 5px;
	box-shadow: 0px 5px 10px black;
	max-width:800px;

}
#leaderboardTable tr {
	font-family:'Poor Story';
}
#leaderboardTable td{
	border:1px solid black;
}
#leaderboardTable th{
	padding:5px;
	border:2px solid black;
	text-align:center;
}



#leaderboard {
	width:100%;
	text-align: center;
	padding:5px;
	padding-bottom: 15px;
	max-height:300px;
	max-width:850px;
	overflow-y: scroll;
	margin:auto;
}

#cmpIframe {
	border-radius:5px;
	border:none;
	box-shadow: 0px 0px 10px black;
	position: absolute;
	z-index: 999;
	min-width:350px;
	width:20%;
	height: 40%;
	min-height:720px;
	left:0px;
	top:60%;
	transform: translate(0%,-50%);
	
}

:root {
  --animation_duration : 7s;
  --animation_xStart : 0%; 
  --animation_yStart : 40%;
  --animation_xFade : 5%;
  --animation_yFade : 40%;
  --animation_xFin : 5%;
  --animation_yFin : 40%;
}

.twitterPopUpLogo{
position: absolute;
top:0px;
left:50%;
transform: translate(-50%, -100%);
}

.twitterPic{
	border-radius: 50%;
	box-shadow: 0px 0px 5px black;
}
.tweetPopUp {
	z-index:10;
	background:rgba(255,255,255,0.5);
	top:var(--animation_yStart);
	right:var(--animation_xStart);
	opacity: 0;
	position: absolute;
	width:20%;
	min-width:250px;
	max-width:400px;
	min-height:50px;
	padding:5px;
	box-shadow: 0px 0px 10px black;
	border-radius: 5px;
	border:solid 2px #00BBFF;
	animation-name: tweetAni;
	animation-duration: var(--animation_duration);
	animation-iteration-count: 1;
	animation-play-state: running;
}

@-webkit-keyframes tweetAni { 
	0% {top:var(--animation_yStart); right:var(--animation_xStart); opacity: 0;}
	5% {top:var(--animation_yStart); right:var(--animation_xStart); opacity: 1;}
	95% {top:var(--animation_yFade); right:var(--animation_xFade); opacity: 1;}
	100% {top:var(--animation_yFin); right:var(--animation_xFin); opacity: 0;}
}

@keyframes tweetAni {
	0% {top:var(--animation_yStart); right:var(--animation_xStart); opacity: 0;}
	5% {top:var(--animation_yStart); right:var(--animation_xStart); opacity: 1;}
	95% {top:var(--animation_yFade); right:var(--animation_xFade); opacity: 1;}
	100% {top:var(--animation_yFin); right:var(--animation_xFin); opacity: 0;}
}
@media(max-width:1700px){
	
:root {
  --animation_yStart : 75%;
  --animation_yFade : 75%;
  --animation_yFin : 75%;
}
	
#cmpIframe {
	position: relative;
	min-width:320px;
	width:100%;
	min-height:640px;
	transform: translate(0%,0%);
}
	
.tweetPopUp {
	z-index:99;
	background:rgba(255,255,255,0);
	border:none;
	opacity: 0;
	position: relative;
	min-width:350px;
	width:40%;
	max-width: 90%;
	margin:auto;
	animation-name:none;
}
}



.portfolioSelector {
	position: absolute;
}

.snapwidget-widget {
	min-width:600px;
	min-height: 200px;
}

@media(max-width:579.98px) {
	.snapwidget-widget {
		min-width:300px;
		min-height: 100px;
	}
}

.affiliateLink{
	padding:10px 0px 10px 0px;
	text-align:center;
}


#eventNotification{
	position: fixed;
	bottom:0px;
	left:0px;
	width: 100%;
	height:auto;
	padding:25px 5%;
	background-color: rgba(0,0,0,0.8);
	color:white;
	z-index:100;
}

#cookieBanner{
	position: fixed;
	bottom:0px;
	left:0px;
	width: 100%;
	height:auto;
	padding:25px 5%;
	background-color: rgba(0,0,0,0.8);
	color:white;
	z-index:100;
}

.storeSlickItem {
	 width:auto;
}