/*!
 * FIFA 20 Landing Page
 * Custom Stylesheet for this Landing Page
 * Landing Page (https://cpacodex.com)
 * Copyright 2014-2020 CPACodex Web Services
 * Licensed under MIT 
 */

 /* Global Changes */

 body, html {
 	height: 100%;
 }

body {
	background: url( '../img/bg.webp' );
	background-size: cover;
    -webkit-background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
	color: #FFF;
	background-color: #0C141A;
	padding-top: 50px;
  	overflow-x: hidden;
}

body.modal-open .effect {
    -webkit-filter: blur(7px);
    -moz-filter: blur(7px);
    -o-filter: blur(7px);
    -ms-filter: blur(7px);
    filter: blur(7px);
}

.modal-content {
  text-align: center;
  background: none;
  border: none;
}

.modal-header {
  background: none;
  border: none;
}

.modal-body {
  background: none;
  border: none;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #52F8C9;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #52F8C9;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #52F8C9;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #52F8C9;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #52F8C9;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #52F8C9;
}

.separator {
	padding-top: 15px;
	padding-bottom: 15px;
}	

.logo {
	padding-bottom: 30px;
}

.logo img {
	width: 280px;
}

.logo p {
	line-height: 30px;
	font-family: bebas-neue, sans-serif;
	font-weight: 400;
	font-size: 43px;
}

.section-outter {
	height: 40px;
	padding: 10px;
	position: relative;
}

.section-input {
	background: rgba(16, 50, 51, 0.70);
	-webkit-clip-path: polygon(3% 0, 100% 0, 98% 100%, 0% 100%);
	clip-path: polygon(3% 0, 100% 0, 98% 100%, 0% 100%);
	padding: 7px;
	padding-left: 20px;
	padding-right: 20px;
}

.section-outter:before {
	background: rgba(0, 0, 0, 0.75);
	position: absolute;
	content: ' ';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	-webkit-clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
	clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
}

.section-inner {
	font-family: bebas-neue, sans-serif;
	font-weight: 300;
	font-size: 25px;
	margin-top: -18px;
	padding: 1px;
	width: 100%;
	position: relative;
	background: #7a35fa;
	-webkit-clip-path: polygon(3% 0, 100% 0, 98% 100%, 1% 100%);
	clip-path: polygon(3% 0, 100% 0, 98% 100%, 1% 100%);
}

.input-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    max-width: 35px;
    left: 30px;
    z-index: 1;
    top: 16px;
}

.styled-input {
	font-family: bebas-neue, sans-serif;
	position: relative;
	text-align: center;
    width: 100%;
    background: #091314;
    border: none;
    box-shadow: none;
    padding: 0 20px 0 70px;
    height: 75px;
    color: #fff;
    font-size: 2.3em;
    font-weight: 700;
	-webkit-clip-path: polygon(4% 0, 100% 0, 95% 100%, 0% 100%);
	clip-path: polygon(4% 0, 100% 0, 95% 100%, 0% 100%);
}

.platform-section {
	background: #131D24;
}

.platforms {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.platforms li {
  	cursor: pointer;
    display: inline-block;
    color: #d9fff9;
    padding: 19px 0px 19px 0px;
    width: 13.333333333333%;
    line-height: 28px;
    -webkit-transition: background 1s ease-out;  
    -moz-transition: background 1s ease-out;  
    -o-transition: background 1s ease-out;  
    transition: background 1s ease-out;  
}

.platforms li:hover {
	background: #1b262e;
	background: -moz-linear-gradient(top,  #1b262e 0%, #2d373e 100%);
	background: -webkit-linear-gradient(top,  #1b262e 0%,#2d373e 100%);
	background: linear-gradient(to bottom,  #1b262e 0%,#2d373e 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b262e', endColorstr='#2d373e',GradientType=0 );
}

.platforms li img {
    -moz-transition: all 1s; 
    -webkit-transition: all 1s;  
    -ms-transition: all 1s;  
    -o-transition: all 1s;  
    transition: all 1s; 
	opacity: 0.6;
	z-index: 1;
}

.platforms li:hover + .platforms li img {
	opacity: 1!important;
}

.platform-active {
	background: #1b262e;
	background: -moz-linear-gradient(top,  #1b262e 0%, #2d373e 100%);
	background: -webkit-linear-gradient(top,  #1b262e 0%,#2d373e 100%);
	background: linear-gradient(to bottom,  #1b262e 0%,#2d373e 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b262e', endColorstr='#2d373e',GradientType=0 );
}

.platform-active img {
	opacity: 1!important;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.styled-input:focus {   
  border-color: none;
  box-shadow: none;
  outline: 0 none;
}

.recent-activity-column {
  position: relative;
  color: #fff;
  background: #7a35fa;
  background: -moz-linear-gradient(top,  #7a35fa 0%, #250069 100%);
  background: -webkit-linear-gradient(top,  #7a35fa 0%,#250069 100%);
  background: linear-gradient(to bottom,  #7a35fa 0%,#250069 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#250069', endColorstr='#4804c7',GradientType=0 );
  padding-bottom: 0px!important;
  -webkit-clip-path: polygon(3% 0, 100% 0, 98% 100%, 1% 100%);
  clip-path: polygon(3% 0, 100% 0, 98% 100%, 1% 100%);
}

.recent-activity-column:before {
	z-index: -1;
	position: absolute;
	content: ' ';
	width: 100%;
	height: 100%;
	left: -15px;
	right: 0;
	bottom: -15px;
    -webkit-clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
    clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
}

.recent-activity-title {
  margin-top: 25px;
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
}

.recent-activity-footer {
  background-color: #250069;
  margin-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
  padding-bottom: 7px;
  color: #FFF;
}

.activity-column b {
  font-family: bebas-neue, sans-serif;
  text-transform: uppercase;
  color: #fff;
  font-size: 32px;
}

.ra-username {
	font-family: bebas-neue, sans-serif;
	font-size: 24px;
}

.activity-column span {
  font-family: bebas-neue, sans-serif;
  text-transform: uppercase;
  top: -4;
  display: block;
  margin-top: -13px;
  font-size: 18px;
  color: #fff;
}

.user-icon {
  margin-top: -2px;
  width: 30px;
}

.coins-img {
  width: 80px;
}

.points-img {
  width: 110px;
}

/* Steps - Progress Bar */
.wizard-steps-container {
  position: relative;
  margin: 0 30px;
  margin-top: -10px;
}
.wizard-steps-container .progress-bar-container {
  left: 20px;
  right: 20px;
  position: absolute;
  height: 5px;
  background-color: rgb(0, 0, 0);
  top: 8px;
}
.wizard-steps-container .progress-bar-container .progress-bar {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 50%;
  background-color: #fffb00;
  transition: width 900ms ease;
}

.steps {
  display: flex;
  justify-content: space-between;
  margin: 30px 0 0;
}
.steps .step {
  height: 20px;
  width: 20px;
  background-color: #000000;
  border-radius: 50%;
  position: relative;
}
.steps .step.done, .steps .step.active {
  background-color: #fbff00;
}

.steps .step .label {
  font-family: bebas-neue, sans-serif;
  color: #fff;
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 100px;
  margin-left: 80px;
  margin-bottom: -6px;
  text-align: center;
}

.multi-steps > li.is-active:before, .multi-steps > li.is-active ~ li:before {
  content: counter(stepNum);
  font-family: inherit;
  font-weight: 700;
}
.multi-steps > li.is-active:after, .multi-steps > li.is-active ~ li:after {
  background-color: #ddd;
}

.multi-steps {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.multi-steps > li {
  z-index: 1;
  counter-increment: stepNum;
  text-align: center;
  display: table-cell;
  position: relative;
  color: #FFF;
}
.multi-steps > li:before {
  cursor: pointer;
  content: '\f00c';
  content: '\2713;';
  content: '\10003';
  content: '\10004';
  content: '\2713';
  display: block;
  margin: 0 auto 4px;
  background-color: #EAB642;
  width: 30px;
  height: 30px;
  line-height: 22px;
  text-align: center;
  font-weight: bold;
  border-width: 3px;
  border-style: solid;
  border-color: #FFF;
  border-radius: 50%;
}
.multi-steps > li:after {
  content: '';
  height: 1px;
  width: 100%;
  background-color: #FFF;
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: -1;
}
.multi-steps > li:last-child:after {
  display: none;
}
.multi-steps > li.is-active:before {
  background-color: #EAB642;
  border-color: #FFF;
}
.multi-steps > li.is-active ~ li {
  color: #fff;
}
.multi-steps > li.is-active ~ li:before {
  background-color: #EAB642;
  border-color: #ddd;
}

.footer {
	font-family: bebas-neue, sans-serif;
	font-size: 20px;
}

.btn-generator {
  cursor: pointer;
}

.animation-delay-200 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}


.animation-delay-100 {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}


.animation-delay-400 {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.animation-delay-600 {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.animation-delay-1000 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}


.animation-delay-800 {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

.console-processing-inner-wrap {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
}

.console-processing-res-wrap {
    font-family: bebas-neue, sans-serif;
    max-width: 300px;
    margin: 0 auto;
    display: none;
}

.console-processing-res-item-wrap {
  color: #fff;
  background: #7a35fa;
    background: -moz-linear-gradient(top,  #7a35fa 0%, #250069 100%);
    background: -webkit-linear-gradient(top,  #7a35fa 0%,#250069 100%);
    background: linear-gradient(to bottom,  #7a35fa 0%,#250069 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a3152f', endColorstr='#f61f48',GradientType=0 );
  -webkit-clip-path: polygon(3% 0, 100% 0, 98% 100%, 1% 100%);
  clip-path: polygon(3% 0, 100% 0, 98% 100%, 1% 100%);
  position: relative;
    margin: 0 auto;
    text-align: center;
    padding: 50px;
    width: 300px;
    display: table;
}

.console-processing-res-item-wrap:before {
  z-index: -1;
  background: #250069;
  position: absolute;
  content: ' ';
  width: 100%;
  height: 100%;
  left: -15px;
  right: 0;
  bottom: -15px;
  -webkit-clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
  clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
}

.coins-generator, .points-generator {
  font-style: normal;
}

.console-item-img {
    max-width: 100px;
}

.console-processing-res-select-amount {
    font-size: 5em;
    display: block;
    line-height: 1;
    font-weight: 700;
    margin-top: 7px;
    text-align: center;
    color: #000;
}

.console-processing-res-select-label {
    font-size: 1.2em;
    text-align: center;
    line-height: 1;
    color: rgba(0, 0, 0, 0.4);
    font-weight: 700;
    text-transform: uppercase;
}

.console-processing-msg {
    font-family: bebas-neue, sans-serif;
    font-size: 3em;
    color: #fff;
    text-shadow: 3px 4px 0 rgba(0, 0, 0, 0.3);
    font-weight: 700;
    text-transform: uppercase;
    margin: 20px auto 0 auto;
}

.console-processing-msg span.lnr {
    font-size: 2em;
    color: #00fcff;
    position: relative;
    margin-bottom: 10px;
    display: block;
    text-shadow: none;
    text-align: center;
}


.console-processing-msg-success {
    color: #00fcff;
}

.console-processing-msg-fail {
    color: #fcc247;
}

.console-processing-msg-fail span.lnr {
  color: #fcc247;
}

/* Packages */

.packagesPageCoins {
  display: none;
}

.packages {
  font-family: bebas-neue, sans-serif;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 0 auto;
  padding-inline-start: 0px;
}

.packages li {
  cursor: pointer;
  text-align: center;
  padding: 8px;
  background-color: rgba(41, 56, 68, 0.88);
  list-style-type: none;
  display: inline-block;
}

.strike {
    position: relative;
    display: inline-block;
}
.strike::before {
    content: '';
    border-bottom: 2px solid red;
    width: 100%;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: skewY(-10deg);
    transform: skewY(-10deg);
}

.packages-bg {
  -webkit-box-shadow: -1px 2px 18px -2px rgba(0,0,0,0.75);
  -moz-box-shadow: -1px 2px 18px -2px rgba(0,0,0,0.75);
  box-shadow: -1px 2px 18px -2px rgba(0,0,0,0.75);
  position: relative;
  text-align: center;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(173,176,179,0.44) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(173,176,179,0.44) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(173,176,179,0.44) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#70adb0b3',GradientType=0 );
  padding: 7px;
  z-index: 1;
  font-size: 27px;  
  color: #515151;
}

.packages-bg b {
  top: -15px;
  color: #56fffa;
}

.new-price {
  margin-top: -25px;
}

.packages-bg span {
  color: #FFF;
  font-weight: bold;
}

.packages-bg img {
  width: 130px;
}

.packages-amount {
  padding-top: 5px;
}

.packages-amount span {
  font-size: 20px;
    font-weight: bold;
}

.packages-amount img {
  margin-top: -5px;
}

.packages-about {
  font-size: 18px;
    line-height: 10px;
    padding-bottom: 6px;
}

.packages-bg:after {
  top: 0;
  left: 0;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat:no-repeat;        
    background-position: 0% top;
    z-index: -1;
    opacity: 0.7;
}

.packages-bg:before {
  top: 0;
  left: 0;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat:no-repeat;        
    background-position: right bottom;
    z-index: -1;
    opacity: 0.7;
}


.packages-bg img {
  margin-top: -50px;
}

.package-active {
  background: rgba( 16, 238, 241, 0.30 );
}

.package-active .packages-bg {
  background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(86,255,250,0.44) 100%);
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(86,255,250,0.44) 100%);
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(86,255,250,0.44) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#7056fffa',GradientType=0 );
}

.package-active .strike::before {
  border-color: #FFF;
}

.package-active2 {
  background: rgba( 16, 238, 241, 0.30 );
}

.package-active2 .packages-bg {
  background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(86,255,250,0.44) 100%);
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(86,255,250,0.44) 100%);
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(86,255,250,0.44) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#7056fffa',GradientType=0 );
}

.package-active2 .strike::before {
  border-color: #FFF;
}

.packages li:hover {
  -webkit-transition: background 0.15s ease-in-out;
  -moz-transition: background 0.15s ease-in-out;
  -ms-transition: background 0.15s ease-in-out;
  -o-transition: background 0.15s ease-in-out;
  transition: background 0.15s ease-in-out;
  background: rgba( 16, 238, 241, 0.30 );
}


.packages li:hover .packages-bg {
  -webkit-transition: background 0.15s ease-in-out;
  -moz-transition: background 0.15s ease-in-out;
  -ms-transition: background 0.15s ease-in-out;
  -o-transition: background 0.15s ease-in-out;
  transition: background 0.15s ease-in-out;
  background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(86,255,250,0.44) 100%);
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(86,255,250,0.44) 100%);
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(86,255,250,0.44) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#7056fffa',GradientType=0 );
}

.packages li:hover .strike::before {
  -webkit-transition: background 0.15s ease-in-out;
  -moz-transition: background 0.15s ease-in-out;
  -ms-transition: background 0.15s ease-in-out;
  -o-transition: background 0.15s ease-in-out;
  transition: background 0.15s ease-in-out;
  border-color: #FFF;
}

.packages li:hover .packages-bg b {
  -webkit-transition: background 0.15s ease-in-out;
  -moz-transition: background 0.15s ease-in-out;
  -ms-transition: background 0.15s ease-in-out;
  -o-transition: background 0.15s ease-in-out;
  transition: background 0.15s ease-in-out;
  text-shadow: none;
  color: #FFF;
}

.packages li:hover .packages-bg:after {
  -webkit-transition: background 0.15s ease-in-out;
  -moz-transition: background 0.15s ease-in-out;
  -ms-transition: background 0.15s ease-in-out;
  -o-transition: background 0.15s ease-in-out;
  transition: background 0.15s ease-in-out;
}

.packages li:hover .packages-bg:before {
  -webkit-transition: background 0.15s ease-in-out;
  -moz-transition: background 0.15s ease-in-out;
  -ms-transition: background 0.15s ease-in-out;
  -o-transition: background 0.15s ease-in-out;
  transition: background 0.15s ease-in-out;
}

.btn-verify {
  cursor: pointer;
}

.verification-wrapper h3 {
  font-family: bebas-neue, sans-serif;
  font-size: 3.4em;
  text-transform: uppercase;
  color: #ffffff;
}

.verification-wrapper p {
  font-family: bebas-neue, sans-serif;
  color: #FFF;
  font-size: 1.3em;
  max-width: 500px;
  margin: 0 auto;
  display: table;
}

.verification-wrapper {
  position: relative;
  color: #fff;
  background: #7a35fa;
  background: -moz-linear-gradient(top,  #7a35fa 0%, #250069 100%);
  background: -webkit-linear-gradient(top,  #7a35fa 0%,#250069 100%);
  background: linear-gradient(to bottom,  #7a35fa 0%,#250069 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a3152f', endColorstr='#f61f48',GradientType=0 );
  -webkit-clip-path: polygon(3% 0, 100% 0, 98% 100%, 1% 100%);
  clip-path: polygon(3% 0, 100% 0, 98% 100%, 1% 100%);
  padding: 14px;
  max-width: 650px;
  margin: 0 auto;
  text-align: center;
}


.verification-entered-info {
    position: relative;
    margin-top: 10px;
}

.verification-e-i-col {
    font-family: bebas-neue, sans-serif;
    text-align: center;
    background: #7a35fa;
    background: -moz-linear-gradient(top,  #7a35fa 0%, #250069 100%);
    background: -webkit-linear-gradient(top,  #7a35fa 0%,#250069 100%);
    background: linear-gradient(to bottom,  #7a35fa 0%,#250069 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a3152f', endColorstr='#f61f48',GradientType=0 );
    padding-bottom: 0px!important;
    -webkit-clip-path: polygon(3% 0, 100% 0, 98% 100%, 1% 100%);
    clip-path: polygon(3% 0, 100% 0, 98% 100%, 1% 100%);
    padding: 15px 15px;
}


.v-e-i-label {
    display: block;
}

.v-e-i-val {
    font-size: 1.8em;
}

.v-e-i-val img {
    max-width: 35px;
    margin-right: 5px;
    position: relative;
}

.verification-spinner {
    font-size: 2.6em;
    display: block;
    text-align: center;
    margin: 20px auto;
    color: #fff;
}

.player-name-v2 {
  font-style: normal;
}

/* Mobile CSS */

@media (max-width: 767px) {

  .packages li {
    margin-bottom: 40px;
    width: 45%;
  }

	.platforms li {
		width: 30%;
	}

    .steps .step .label {
        margin-left: 6px;	
        font-size: 13px;	
    }

	 .coins-img {
		width: 60px;
	}

	.points-img {
		width: 90px;
	}

	.activity-column b {
	    font-size: 28px;
	}

  .styled-input {
    font-size: 1.6em;
  }

  .packages-bg img {
      width: 100px;
  }

  .console-processing-msg {
    font-size: 2.6em;
  }

}