@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
body, html
{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif; overflow-x: hidden
}
.ccheader
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 40px 100px 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center; 
}
.ccheader .cclogo
{
  color: #fff;
  text-transform: uppercase;
  cursor: pointer; 
}
.ccheader .cclogo img{width: 320px}
.ccshowcase
{
  position: relative;
  right: 0;
  width: 100%;
  min-height: 45vh;
  padding: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #111;
  transition: 0.5s;
  z-index: 2;
}
.ccshowcase.active
{
  right: 300px;
}
.ccshowcase video
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}
.overlay
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:rgba(27,27,27,0.40);
  mix-blend-mode: overlay;
}
.cctext
{	width: 100%;
  position: relative;
  z-index: 10; 
}
.cctext h1
{
  font-size: 3em;
  font-weight: 600;
  color: #fff;
  line-height: 1.2em; margin: 40px 0 20px;
  text-transform:inherit;
}
.cctext h3
{
  font-size: 1.3em;
  font-weight: 300;
  color: #fff;
  line-height: 1.5em; margin:0 0 30px;
  text-transform: uppercase;
}
.cctext p
{
  font-size: 1.5em;
  color: #fff;
  margin: 20px 0;
  font-weight: 400;
  max-width: 700px; margin-bottom: 60px
}
.playccbtn a
{
  display: inline-block; float: left;
  font-size: 1.5em;
  background: #ffde00;
  padding: 15px 60px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  margin-top: 10px;
  color: #111;
  letter-spacing: 2px;
  transition: 0.2s; border-radius: 60px; margin-right: 20px
}
.playccbtn a:hover
{
  letter-spacing: 6px;
}
.playccdemo a
{
  display: inline-block; float: left;
  font-size: 1.2em;
  border: 1px solid #fff;
  padding: 15px 30px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  margin-top: 10px;
  color: #fff;
  letter-spacing: 2px;
  transition: 0.2s; border-radius: 60px
}
.playccdemo a:hover
{
  letter-spacing: 6px;
}

.cc-intro
{
  position: relative;
  width: 100%;
  padding: 0px 0 60px;
  align-items: center;
  background: #450505; background-image: url("../img/bg-pgsoft-cashclub.jpg"); background-size:auto; background-position: center top; background-repeat: no-repeat;
  transition: 0.5s;
  z-index: 2;
}
.cc-frame{width:1000px; position: relative; margin: 0 auto;}
.cc-number{width:60%; margin:0px 20% 0px; padding:5px 0 10px; top:-50px; position: relative; float: left; background-color: #fff; text-align: center; border-radius: 60px}
.cc-games-number{width:49%; position: relative; float: left; border-right:1px solid rgba(74,74,74,0.20)}
.cc-players-number{width:50%; position: relative; float: left}
.ccgames,
.ccplayers {
  font-size: 42px;
  font-weight:700;
  color: #000; 
}
.ccgames:after,.ccplayers:after{content:'+'; position: relative}
.clearfix{ clear:left; margin: 0}

.cc-wrap{width:100%; position: relative; float: left}
.cc-desc{width: 100%; margin: 0; color: #fff; font-size: 14px; font-weight: 300; float: left; text-align:center}
.cc-desc h1{font-size: 2.5em; font-weight: 600; color: #ffde00; margin-bottom: 20px}
.cc-desc h4{font-size: 1.5em; font-weight: 500; color: #ffde00; margin-bottom: 20px}
.cc-desc p{font-size: 16px; margin: 0 0 30px}
.cc-top-game{ width: 100%; float:left; margin:0 0 60px}
.cc-demo-game{ width: 100%; float:left; margin:0 0 20px}

.demo-container{width: 100%; position: relative; background-color:#000}
.ccimgoverlay {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}
.demo-container a{ text-decoration: none; color: #000}
.ccmiddle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.demo-container:hover .ccimgoverlay {opacity: 0.3}
.demo-container:hover .ccmiddle {
  opacity: 1;
}
.ccbtnoverlay {
  background-color: #ffde00;
  color: #000;
  font-size: 16px; line-height:  font-weight: 500;
  padding: 16px 22px;
}

.grid { 
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid img {
max-width: 100%;
}
.ccgrid2 { 
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.ccgrid2 img {
max-width: 100%;
}
.cc-games-slider{width:1600px; position: relative; margin: 0 auto;}
.cc-games-slider{width:1600px; position: relative; margin: 0 auto;}
.cc-demo-btn{width:100%; float: left; margin:20px 0 0; text-align: center}
.sub-playdemobtn a {
  display: inline-block;
  font-size: 1.5em;
  background: #ffde00;
  padding: 15px 30px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  margin-top: 10px;
  color: #111;
  letter-spacing: 2px;
  transition: 0.2s;
  border-radius: 60px;
  margin: 0 auto;
}
.sub-playdemobtn a:hover
{
  letter-spacing: 6px;
}
#playNow {
  text-align: center;
}
@media screen and (min-width: 720px){  /* desktop */
  #playNow {
    text-align: left;
  }
}

.ccabout{width:100%; position: relative; padding: 0px 0 0px; align-items: center; background: #fff; background-image: url("../img/bg-about.jpg"); background-size:auto; background-position: center top; background-repeat: no-repeat; transition: 0.5s; z-index: 2; text-align: center}	
.ccabout-frame{width:1000px; margin: 0 auto; padding: 40px 0 60px}
.ccabout-col{width:100%; float: left; margin-bottom: 30px}
.ccabout-img{width:100%; float: left; transform: translatey(0px);
animation: float 2s ease-in-out infinite}
@keyframes float {
0% {transform: translatey(0px)}
50% {transform: translatey(-20px)}
100% {transform: translatey(0px)}
}
.ccabout h4{font-size: 2em; margin-bottom: 0px}
.ccabout-img img{width:650px}
.ccabout-decs{width:100%; margin:0px 0 40px 0; float: left}
.ccabout-icons{width:100%; margin-bottom: 30px; float: left; font-size: 14px}
.ccabout-icons span{width:100%; float: left; text-align: center}
.ccfeatures{width:100%; position: relative; padding: 0px 0 60px; align-items: center; background: #fff; background-image: url("../img/bg-features.jpg"); background-size:auto; background-position: center top; background-repeat: no-repeat;
transition: 0.5s; z-index: 2}	
.ccfeatures-frame{width:1000px; margin: 0 auto; padding: 60px 0 0px}
.ccfeatures-col{width:100%; float: left; margin-bottom: 30px}
.ccfeatures-img{width:40%;float: left; transform: translatey(0px);
animation: float 2s ease-in-out infinite} .ccfeatures-img img{width:100%}
.ccfeatures-decs{width:55%; margin:0px 0 20px 5%; float: left}
.ccfeatures-decs h4{font-size: 2em; margin-bottom: 0px}
.ccfeatures-icons{width:100%; float: left; font-size: 14px; text-align: center;}
.ccfeatures-icons img{width: 160px; margin-bottom: 10px}
.ccfeatures-icons span{width:100%; float: left; text-align: center}
.ccfeatures-icons h5{font-size: 1.2em; margin: 0 0 10px}
.ccfeatures-icons p{margin: 0}
.ccvideo{width:100%; position: relative; padding: 20px 0 80px;
align-items: center;
background: #fff; background-image: url("../img/bg-video-games.jpg"); background-size:auto; background-position: center top; background-repeat: no-repeat;
transition: 0.5s;
z-index: 2;}	
.ccvideo-frame{width:1000px; margin: 0 auto; padding: 80px 0 90px}
.ccvideo-col{width:100%; float: left; margin-bottom: 0px}
.ccvideo-img{width:60%;float: left}
.ccvideo-img iframe{border-radius: 20px}
.ccvideo-decs{width:38%; margin:20px 0 40px 2%; float: left; text-align: center}
.ccvideo-decs h2{font-size: 2.3em!important; color: #fff; font-weight: 600; line-height: 1.2em; margin: 20px 0 10px}
.ccvideo-decs h4{font-size: 1.5em; color: #ffd200; font-weight: normal; line-height: 1.3em; margin: 0px}
.cc-seo{width:100%; padding: 40px 0 60px; position: relative; background-color: #000}	  
.collapsible {
background-color: #000;
color: #ffd200;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 16px;
}
.collapsible h3{float: left; margin: 0}
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.collapsible-content {
color: #fff; font-weight: 300px;
padding: 0 18px; margin-bottom: 0px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.collapsible-content a{color:#ffd200}



/* The Modal (background) */
button {
  margin: 0;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  position: relative;
}

.btn {

}
.btn:hover {
}
.btn:active {
}
.modal {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  padding: 10px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}
.modal-close-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 20px;
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
}