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

body{
	font-family: 'Montserrat', sans-serif;
	-webkit-font-smoothing: subpixel-antialiased;
}

body.beta{
	margin-bottom: 64px;
}

.justify-center{float: none; margin: 0 auto;}


body.footifycup{background:#020B10; color: white;}

footer{
	/*background: url(../img/Footify-Pattern-02.svg) repeat #020B10;*/
	background: #020B10;
	padding: 16px;
	padding-top: 64px;
	
}

footer.beta{
	background: #fff;
	padding: 16px;
	
}

.footer-logo{width: 128px; display: block; margin: 0 auto;}


.accent{color:#2721F5;}

/***Typography***/
h1.display-1{
	font-size: 4.5em;
	font-weight: 400;
	margin-bottom: 32px;
	
}

h1{
	font-size: 2.5em;
	font-weight: 600;
	margin-bottom: 32px;	
}

p{
	line-height: 2em;
	margin-bottom: 32px;	
}

.grey{color: #666666;}
ul.list-no-style, ul.list-no-style li{list-style: none; margin-left: 0px; padding-left: 0px;}
.top-logo{width: 160px;}
.top-logo-big{max-width: 220px;}


.spacer{clear: both; display: block; width: 100%; height: 128px;}

.spacer-big{clear: both; display: block; width: 100%; height: 72px;}

.spacer-divider{clear: both; display: block; width: 100%; height: 32px; margin-bottom: 32px; border-bottom: 1px solid #151515;}

.spacer-divider.light{border-bottom: 1px solid #ddd;}

.spacer-medium{clear: both; display: block; width: 100%; height: 32px;}

.spacer-small{clear: both; display: block; width: 100%; height: 16px;}

.emblem-footer{width: 128px; height:86px; float: left; margin-right: 64px}


img.tournament-symbol{
	
	width: 50%;

}

ul.feature-list{
	margin: 0px; 
	margin-bottom: 32px;
	padding: 0px;
}

ul.feature-list li{
	/*list-style-image: url("../img/tick-icon.svg");*/
	background:  url("../img/tick-icon.svg") no-repeat left center;
	padding: 8px 16px 8px 48px;
	line-height: 32px;
	list-style: none;
}

ul.feature-list li.comingSoon{
	/*list-style-image: url("../img/tick-icon.svg");*/
	background:  url("../img/tick-comingSoon.svg") no-repeat left center;
	color: #555;
}


.badge-comingSoon{
	padding: 4px 12px 4px 12px;
	border-radius: 16px;
	font-size: 8px;
	margin-left: 16px;
	width: 96px;
	font-weight: 800;
	background:#FAF0FF;
	color:#CC00FF;
}

.badge-message{
	padding: 8px 12px 8px 12px;
	border-radius: 16px;
	font-size: 12px;
	width: 96px;
	font-weight: 800;
	background:#F806B5;
	color:#fff;
}


.social-media-icons{
	width: 56px;
	height: 56px;
	background: #fff;
	color:#020B10;
	font-size: 20px;
	text-align: center;
	line-height: 56px;
	border-radius: 28px;
	float: left;
	margin: 30px 30px 0px 0px;
	display: block;
	
}

.black.social-media-icons{background: #020B10; color: #fff; float: none; display: inline-block; }


.rating{width: 66px; position: absolute; bottom: 32px; left: 32px;}

.profile-summary{position: absolute; bottom: 32px; right: 48px; color:#fff; font-weight: bold;}

@media (max-width: 767.98px) {
	
	.top-logo{width: 140px;}
	
	h1.display-1{
	font-size: 2.6em;
	margin-bottom: 24px;
}

	.profile-summary{display: none;}
	
	.rating{width: 48px; bottom: 16px;}
	
	h1{
	font-size: 2em;
	margin-bottom: 24px;	
}
	
	.spacer{clear: both; display: block; width: 100%; height: 64px;}
		
}

.social-media-icons{
	width: 48px;
	height: 48px;
	background: #fff;
	color:#020B10;
	font-size: 20px;
	text-align: center;
	line-height: 48px;
	border-radius: 24px;
	float: left;
	margin: 30px 30px 0px 0px;
	display: block;
	
}

/***Sections***/
#cover{
	background: #888;
	padding: 32px;
	color: #ffffff;
	min-height: 100vh;
	background-image: url(../img/hero-image.jpg);
	background-size: cover; 
	background-position: center;
	
}

#cover-2{
	/*background: #888;*/
	background: #f7f7f7;
	/*padding: 32px;*/
	/*color: #ffffff;*/
	min-height: 100vh;
	/*background-image: url(../img/hero-image.jpg);*/ 
	background-size: cover; 
	background-position: center;
	
}


#cover-3{
	/*background: #888;*/
	background: #f7f7f7;
	/*padding: 32px;*/
	/*color: #ffffff;*/
	min-height: 50vh;
	/*background-image: url(../img/hero-image.jpg);*/ 
	
	background-position: center;
	
}

.feature-box{
	margin-top: 128px;
	margin-bottom: 128px;
}

.feature-box.small{
	margin-top: 64px;
	margin-bottom: 0px;
}

.feature-box-2{
	display: block;
}

.feature-img-style-1{
	margin-top: -30%;	
	margin-left: 15%;
	width: 40%;
}

.feature-img-style-2{
	margin-top: -70%;	
	margin-left: -15%;
	width: 60%;
}

.feature-copy-style-1{
	margin-top: 5%;
}

.feature-img-container{
	
	bottom: -10px;

}

.feature-img-container img{
	
	border-radius: 8px;
}


.feature-image-box{
	
	width: 100%;
	margin-bottom: 64px;
}


.app-feature-highlight{
	margin-bottom: 64px;	
	
}


.feature-panel{
	background-color: #0E1619;
	text-align: center;
	padding: 48px 32px 0px 32px;
	padding-bottom: 0px;
	border-radius: 24px;
	/*height: 420px;*/
	color: #fff;
	position: relative;
	overflow: hidden;
	margin-top: 32px;
	
}


.feature-panel .img-container{
	max-width: 100%;
	left: 15%;
	margin: 0 auto;
	/*background: red;*/
	
}

.feature-panel .img-container img{
	max-width: 100%;
	margin-bottom: 0px!important;
	
	
}

.feature-text{
	width: 70%;
	margin: 0 auto;
	margin-bottom: 32px;
	height: 144px;
}


.collage .col-md-4{margin-bottom: 24px;}

.dark-container{
	background: #060A0E;
	color: #ffffff;
	border-radius: 24px;
	padding-top: 48px;
	overflow: hidden;
}

.light-container{
	background: #fff;
	border-radius: 24px;
	padding-top: 48px;
	overflow: hidden;
	color: #060A0E;
}

.badge-beta{
	padding: 4px 16px 4px 16px;
	border-radius: 16px;
	font-size: 12px;
	width: 96px;
	background:#624D03;
	color:#fff;
	text-align: center;
}


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

ul.plain-list{padding-left: 20px; list-style: unset;}
ul.plain-list li{padding: 0px; list-style-type: square; padding-bottom: 24px;}

.display-desktop{display: block;}
.display-mobile{display: none;}
	

.down-arrow{
	width: 50px; 
	height: 50px; 
	border-radius: 50%; 
	background: #020B10; 
	color:#fff; 
	text-align: center; 
	position:  absolute; 
	margin: 0 auto;
	bottom: 140px;
	/*left: 49%;*/
	line-height: 50px;
	font-size: 18px; 
	right: 20px;

}

.down-arrow.black{
	background: #000000; 
	color:#ffffff; 
}


.icon-container{
		background:#282C2E;
	border-radius: 8px;
	padding: 16px 20px 16px 20px;
	float: left;
}


@media (max-width: 767.98px) {

.down-arrow{
	width: 32px; 
	height: 32px; 
	line-height: 32px;
	font-size: 14px;
	right: 20px;
	/*left: 0px;*/

}
	
.feature-box{
	margin-top: 64px;
	margin-bottom: 64px;
}

.profile-feature.feature-box{
	margin-top: 0px;
}
	
.feature-box.small{
	margin-top: 32px;
	margin-bottom: 0px;
}
	
	section{
	padding: 16px;
}

.display-desktop{display: none;}
.display-mobile{display: block;}
	
.move-right{float: right;}
	
}

.position{
	width: 40px; 
	height:40px;
	border-radius: 50%;
	background: red;
	bottom: -8px;
	position: absolute;
	font-size: 12px;
	line-height: 40px;
	font-weight: 500;
}

.p-s{color: #ffffff; background: #F41043; }
.p-f{color: #ffffff; background: #E1134E; }
.p-am, .p-lw, .p-rw{color: #ffffff; background: #E11378; }
.p-lm, .p-rm, .p-cm{color: #020B10; background: #F2FD3D; }

.p-lwb, .p-dm, .p-rwb{color: #020B10; background: #A2FD3D; }

.p-lb, .p-lcb, .p-cb, .p-rcb, .p-rb{color: #020B10; background: #06EF83; }

.p-sw{color: #020B10; background: #06F7CB; }

.p-gk{color: #ffffff; background: #065AF7; }

.playeravatar{
	width: 96px; 
	height:96px; 
	font-weight: 500;
	border-radius: 50%; 
	font-size: 24px;
	line-height: 96px;
	background: #fff; 
	color:#020B10;
	margin: 0 auto;
	margin-bottom: 32px;
	position: relative;

}

.playeravatar img{
	margin: 0 auto;
	width: 56px;
	
}

.player-card{
	text-align: center;
	padding-top: 64px;
	/*padding-bottom: 64px;*/
	min-height: 400px;
	border-radius: 4px;
	border: 2px solid #151515;
	margin-bottom: 32px;
	background: #0E1011;
	
}

.player-card p{margin-bottom: 32px;}

.badge-cap{
	padding: 4px 16px 4px 16px;
	border-radius: 16px;
	font-size: 12px;
	margin: 0 auto;
	width: 96px;
	background:#624D03;
	color:#fff;
}

.promo{background: #1C2022;padding-top: 64px; padding-bottom: 64px;}

@media (max-width: 767.98px) {
	.player-card h4{font-size: 16px;}
	.player-card p{font-size: 12px; color: #999;}
	.player-card{min-height: 330px; padding-top: 32px;}
	.player-card p{margin-bottom: 16px;}

}

/**Buttons**/
.button{
	text-align: center;
	/*line-height: 3.5em;*/
	font-weight: 500;
	color: #ffffff;
	background: #020B10;
	border-radius: 4px;
	width: 192px;
	height: 56px;
	line-height: 56px;
	display: block;
	margin-bottom: 8px;
}


/*.button small{clear: both; width: 100%; margin-top: -10px;}*/

.button:hover{
	color: #ffffff;
	text-decoration: none;
	background: #1B1D1E;
}

.button.two{
	color: #000;
	background: white;
}

.button.outline{
	color: #ffffff;
	border: 1px solid #999999;
	background: transparent;
}


.button.secondary-btn{
	background: #ffffff;
	color: #020B10;
}

.your-class:hover, .players-class:hover{cursor:move;}



.button.secondary-btn{
	background: #2721F5;
	color: #fff;
	border-radius: 4px;
}

/*Down arrow*/
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}


.bounce {
	-moz-animation: bounce 3s infinite;
	-webkit-animation: bounce 3s infinite;
	animation: bounce 3s infinite;
}


.mc-field-group{
	/*margin-bottom: 32px;*/
	
}

label.standard{
	width:100%;
	font-weight: 500;
}

.input-group label{float: left; margin-top: 3px;}

input{width: 100%; height: 48px; padding-left: 16px; padding-right: 16px;}
.input-group strong{display: block; width: 100%; clear: both; margin-bottom: 16px; font-weight: 500;}
.input-group{width: 100%;}
.input-group ul{list-style-type: none; float: left; padding-left: 0px; margin-legft: 0px;}
.input-group ul li{display: block; padding-bottom: 24px; width: 100%; clear: both;}
/*label {display: inline; padding-bottom: 16px; padding-top: 14px;}*/
input[type="text"]{width: 100%;clear: both;}
input[type="radio"]{width: 24px; float: left; margin-top: -10px; margin-right: 8px;}
input[type="checkbox"]{width: 24px; float: left; margin-top: -10px}
input[type="submit"]{border: 0px; border-radius: 2px;}

#mc_embed_signup .button {border: 0px; border-radius: 2px;}

#mc_embed_signup{border-bottom: 1px solid #f7f7f7; padding-bottom: 40px;}

body.beta #mc_embed_signup .mc-field-group label.standard {
     display: inline;
    margin-bottom: 3px; 
	width:100%;
	font-weight: 500;
}


body.beta .input-group label{float: left; margin-top: 3px;}

body.beta #mc_embed_signup .button{
	text-align: center;
	/*line-height: 3.5em;*/
	font-weight: 500;
	color: #ffffff;
	background: #020B10;
	border-radius: 0.125em;
	width: 192px;
	height: 56px;
	line-height: 56px;
	display: block;
	margin-bottom: 8px;
}

body.beta #mc_embed_signup .subfield{width: 100%;}
body.beta #mc_embed_signup .subfield span{padding-top: 3px; display: inline;}

body.beta #mc_embed_signup .mc-field-group label{display: inline-block;}

.small-legal{font-size: 12px; line-height: 16px; color: #999999;}

@supports (-webkit-overflow-scrolling: touch) {
  input[type="radio"]{width: 24px; float: left; margin-top: 0px; margin-right: 8px;}
input[type="checkbox"]{width: 24px; float: left; margin-top: 0px}
}

@supports not (-webkit-overflow-scrolling: touch) {
  /* CSS for other than iOS devices */ 
}

.browser-warning{
	
	background: #F31B3C;
	color: #fff;
	width: 100%;
	z-index: 2000;
	position: fixed;
	bottom: 0;
	padding: 24px;
	text-align: center;
	font-weight: 300;
	display: none;
}

.browser-warning strong{color: #fff; font-weight: 500;}


.dark-theme{
	
	color: #ffffff;
	background: #161F23;
}

.dark-theme #cover-2{
	background: #161F23;
}




/*SLIDER*/
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
	
	.col-md-4{
    position: relative;
    width: 50%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
}