html,body {
  height: 100%;
  width: 100%;
  font-family: 'Open Sans', Arial, sans-serif;
  min-height: 812px;
  margin:0;
}
body {
  background-color: #f8f9fc;
  font-family: 'Open Sans', Arial, sans-serif;
  display: grid;
}
a {
  text-decoration: none;
  color:#7280bb;
  transition: all 0.8s ease;
}

a:hover {
  color: white;
}

#tc {
  color: white;
  font-size: 12px;
  text-decoration: underline;
  font-weight: 100;
  margin-top: 15px;
}

#popmenu {
  display: none;
}
/* popup */

.trow {
  margin-top: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.menubtn {
  background-color: #42aa8b;
    height: 55px;
    width: 250px;
    display: grid;
    justify-content: center;
    align-content: center;
    color: white;
    border-radius: 30px;
    font-weight: 700;
}

.menubtn:hover {
background-color: #51d6ae;
}

.navbtns {
  display: flex;
    position: absolute;
    justify-self: end;
    margin: 10px 25px 0px 0px;
}

#sbtn {
  background-color: #42aa8b;
  height: 40px;
  color: white;
  width: 106px;
  margin-right: 10px;
  border-radius: 20px;
  display: grid;
  justify-content: center;
  align-content: center;
  font-size: 14px;
  font-weight: 900;
}

#sbtn:hover {
background-color: #55c091;
}

#lbtn {
border-radius: 20px;
border: 3px solid #42aa8b;
height: 34px;
color: #42aa8b;
width: 100px;
display: grid;
justify-content: center;
align-content: center;
font-size: 14px;
font-weight: 900;
}

#lbtn:hover {
border: 3px solid #55c091;
}

.outline {
  background-color: white!important;
  border: 3px solid #42aa8b;
  color: #42aa8b;
      margin: -40px 0px;
}

.outline:hover {
  border: 3px solid #51d6ae;
  color: #51d6ae;
}

#xclose {
  font-size: 20px;
    font-weight: 900;
    color: #29335c;
        margin-right: -80px;
}

#xclose:hover {
  color: #29335c;
}

.topmenu {
  background-color: white;
    height: 275px;
    display: grid;
    justify-content: center;
}

#logom {
  width: 40px;
}

.menulink {
  display: flex;
    margin: 30px 40px;
    align-items: center;
}

.menulink a {
  color: white;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 1px;
    margin-left: 15px;
}
#promo {
  background-image: url(../img/promo.png);
  background-size: 100%;
  height: 45px;
  width: 45px;
  border-radius: 20px;
  background-repeat: no-repeat;
  background-position: 2px 0px;
  background-color: #283b6a;
}

#all {
  background-image: url(../img/all.png);
  background-size: 100%;
  height: 45px;
  width: 45px;
  border-radius: 20px;
  background-repeat: no-repeat;
  background-position: 2px 0px;
  background-color: #283b6a;
}

#hot {
  background-image: url(../img/hot.png);
  background-size: 100%;
height: 45px;
width: 45px;
border-radius: 20px;
background-repeat: no-repeat;
background-position: 2px 0px;
background-color: #283b6a;
}

#slotside {
  background-image: url(../img/slotside.png);
  background-size: 100%;
  height: 45px;
  width: 45px;
  border-radius: 20px;
  background-repeat: no-repeat;
  background-position: 2px 0px;
  background-color: #283b6a;
}

#cs {
  background-image: url(../img/cs.png);
  background-size: 100%;
  height: 45px;
  width: 45px;
  border-radius: 20px;
  background-repeat: no-repeat;
  background-position: 2px 0px;
  background-color: #283b6a;
}
.pop-up-container {
  display: block;
  z-index: 2000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  backdrop-filter: blur(8px);
  background: #11234b99;
}

.pop-up-container form {
  position: relative;
  width: 325px;
  height: 100%;
  background-color: #29335c;
  box-shadow: 0 2px 6px 3px rgba(0, 0, 0, 0.2);
  border: solid #3a3939 2px;
  color: #eee;
  font-size: 14px;
  border-radius: 8px;
}

.pop-up-container h4 {
  margin-top: 0;
  margin-bottom: 20px;
  text-shadow: 0px 2px 3px rgba(0, 0, 0, .5);
  font-size: 24px;
  color: #eee;
}

.pop-up-container p {
  margin-bottom: 20px;
  font-size: 16px;
}

.pop-up-button  {
  cursor: pointer;
  width: 45%;
  display: inline-block;
  padding: 15px 30px 15px 30px;
  background: #8e948c;
  border: solid #3a3939 1px;
  border-radius: 8px;
  font-size: 16px;
  color: #2f312d!important;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 2px 6px 3px rgba(0, 0, 0, 0.2);
}

.pop-up-button:hover {
  background: #8cbb7c;
  color: #bbbaba!important;
  text-decoration: none;
}

/* popup */


ul,li {
  list-style-type: none;
}

ul {
  display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
}
.registration {
  display: grid;
    background-color: #29335c;
    height: 100%;
    z-index: 33;
    color: white;
    align-content: baseline;
}

#registration-form {
  margin: -5px 0px 0px 0px;
}

.row {
  display: flex;
  margin-top: 39px;
}

.row a {
  margin: 10px;
}
.navsection {
  display: grid;
  align-content: baseline;
    width: 100%;
justify-self: center;
}
.regnav {
  width: 100%;
  display: grid;
  justify-items: center;
  background-color: white;
  height: 100px;
  align-content: center;
}


.splshbtn {
  background-color: #3ba080;
    width: 200px;
    height: 50px;
    color: white;
    display: grid;
    justify-content: center;
    align-content: center;
    font-weight: 900;
    border-radius: 22px;
}
#login {
border: 3px solid white;
color: #ffffff;
background-color: #00000040;
text-shadow: none;
width: 274px;
height: 50px;
display: grid;
font-weight: 900;
font-size: 14px;
justify-content: center;
align-content: center;
border-radius: 26px;
transition: all 0.8s ease;
box-shadow: 1px 2px 4px #0000007a;
}

#login:hover {
  color: #3ba080;
}

.navrow {
  display: grid;
      width: 100%;
      background-color: #fff;

      position: fixed;
      top: 0;
      z-index: 333;
}

.navboxa {
  width: 44%;
    display: grid;
    justify-content: left;
    align-self: center;
}

.navboxb {
  width: 50%;
display: grid;
justify-content: left;
align-self: center;
}

.navrow1 a {
color: #082b54;
font-size: 18px;
font-weight: 900;
transition: all 0.8s ease;
}

.navrow1 a:hover {
color: #082b547a;
font-size: 18px;
font-weight: 900;
}

.Gnav {
  display: flex;
width: 100%;
align-items: center;
}

.gamescta {
  width: 200px;
    height: 40px;
    display: grid;
    border-radius: 6px;
    justify-content: center;
    background-color: #29335c;
    color: white;
    align-content: center;
}

.spacenav {
  width: 50%;
}

#menupic {
  width: 40px;
  height: 40px;
  margin-left: 25px;
  background-image: url(../img/mobile.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  align-self: center;
}
#mob {
  display: none;
}
.openact {
  background-color: white;
  display: grid;
  justify-content: center;
  align-content: center;
}
.icon {
  width: 68px;
    height: 68px;
    border: 2px solid #29335c;
    display: grid;
    justify-items: center;
    align-content: space-evenly;
    border-radius: 56px;
    transition: all 0.8s ease;
    font-size: 12px;
    color: #29335c;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
}

.icon:hover {

  background-color: #29335c;
}

#i1  {
  transition: all 0.8s ease;
background-image: url(../img/slot.png);
}

#i2  {
  transition: all 0.8s ease;
background-image: url(../img/live.png);
}

#i3  {
  transition: all 0.8s ease;
  background-image: url(../img/jackpot.png);
}

#i4  {
  transition: all 0.8s ease;
background-image: url(../img/table.png);
}

#i5  {
  transition: all 0.8s ease;
  background-image: url(../img/allgames.png);
}

#i1:hover   {
background-image: url(../img/slotw.png);
}

#i2:hover   {
background-image: url(../img/livew.png);
}

#i3:hover   {
  background-image: url(../img/jackpotw.png);
}

#i4:hover   {
background-image: url(../img/tablew.png);
}

#i5:hover  {
  background-image: url(../img/allgamesw.png);
}

.space {
  width: 10%;
}

.signact {
  border: 2px solid white;
      color: white;
      border-radius: 4px;
      height: 30px;
      font-size: 12px;
      display: grid;
      width: 80px;
      align-content: center;
      justify-content: center;
}

.openact {
  background-color: white;
      display: grid;
      justify-content: center;
      align-content: center;
      color: #f74d07;
      border-radius: 4px;
      height: 40px;
      width: 125px;
      font-size: 12px;

}

.iconrow {
  display: flex;
width: 90%;
justify-content: space-evenly;
justify-self: center;
margin-top: 25px;
align-items: center;
}



.iconarea {
  display: grid;
justify-items: center;
    margin: 0px 20px;
}

.iconarea p {
  color: #29335c;
  font-weight: 900;
  font-size: 14px;
}

#mobilemenu {
  color: white;
  display: none;
}
.inputtop {
      background-color: #9999995e;
      border: none;
      border-radius: 4px;
      /* box-shadow: 2px 2px 2px #0000002e inset; */
      height: 30px;
}


#logo {
  width: 140px;
    height: 60px;
    background-image: url(../img/logo.svg);
    background-repeat: no-repeat;
    background-position: center;
    justify-self: center;
}
.headicns {
  display: none;
}
.whitemenu {
display: flex;
    height: 50px;
    background-color: white;
    font-size: 15px;
    justify-content: space-around;
    align-items: center;
    width: 85%;
    justify-self: center;
}

.whitemenu a {
  color: #8a8a8a;
}

.whitemenu a:hover {
  color: #f74d07;
}

#bgheaderslider {
display: grid;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 680px;
position: relative;
width: 100%;
justify-self: center;
}

.ctasection {
  display: grid;
  justify-content: center;
  align-content: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: initial;
  position: absolute;
  width: 100%;
  height: 100%;
  color: white;
  text-shadow: 0px 0px 8px #0000007a;
  justify-self: left;
}

#one.ctasection {
  background-image: url(../img/bg.jpg);
}

#two.ctasection {
  background-image: url(../img/bg22.png);
}

#three.ctasection {
  background-image: url(../img/bg33.png);
}

#four.ctasection {
  background-image: url(../img/bg11.png);
}


.ctaarea {
  text-align: center;
display: grid;
justify-items: center;
margin-top: 40px;
}

.ctaarea span{
  color: grey;
    text-decoration: underline;
    font-size: 12px;
}

.ctaarea h1 {
  font-size: 70px;
    margin: 0;
    font-weight: 800;
    line-height: 70px;
    margin-top: 30px;
}

.ctaarea h3 {
  font-size: 22px;
      line-height: 26px;
      margin-bottom: 0;
      margin-top: 6px;
      font-weight: 800;
}

.ctabutton {
  width: 280px;
    height: 55px;
    display: grid;
    color: white;
    font-weight: 700;
    background-color: #43aa8b;
    justify-content: center;
    align-content: center;
    border-radius: 26px;
    text-shadow: none;
    transition: all 0.8s ease;
    box-shadow: 1px 2px 4px #0000007a;
    font-size: 14px;
}

.ctabutton:hover {
  background-color: #48bb97;
  box-shadow: 1px 2px 4px #00000000;
}

.gamesection {
  display: grid;
background-color: #f1f4f9;
width: 100%;
justify-self: center;

}

.gamesection1 {
  display: grid;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    justify-self: center;
    width: 100%;
    align-content: space-around;
    justify-content: center;
}
.gamesection2 {
  display: grid;
    background-image: url(../img/bg6.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 75%;
    width: 90%;
    justify-self: center;
    text-align: center;
    margin-bottom: 100px;
    height: 600px;
    color: white;
    align-content: center;
    justify-items: center;
}

.gamesection2 a {
  justify-self: center;
      margin-bottom: 20px;
      color: white;
      font-size: 30px;
}
.gamesection2 h1 {
  margin: 0;
}

#gsearch {

  width: 70%;
  justify-self: center;
  height: 55px;
  background-color: #e4e7e9;
  border-radius: 40px;
  background: #e4e7e9;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 700;
  border: none;
  text-align: center;
}

::-webkit-input-placeholder {
  color: #29335c;
  font-size: 14px;
}

:-ms-input-placeholder {
  color: #29335c;
  font-size: 14px;
}

::placeholder {
  color: #29335c;
  font-size: 14px;
}

.title {
  display: flex;
    align-items: center;
    margin: 20px 0px -30px 60px;
}

.title img {
  width: 35px;
    height: 35px;
    margin: 0px 10px 0px;
    border: 2px solid #29335c;
    border-radius: 70px;
}
.moregames {
  margin-left: 50%;
    display: grid;
    border: solid 3px #8891a5;
    padding: 14px;
    border-radius: 34px;
    font-weight: 900;
    color: #29335c;
    font-size: 15px;
    display: none;
}
/*form styles*/
#msform {
	width: 400px;
	margin: 50px auto;
	text-align: center;
	position: relative;
  z-index: 333;
}
#msform fieldset {
  background: #252d52;
    border: 0 none;
    border-radius: 3px;
    padding: 20px 30px;
    box-sizing: border-box;
    width: 100%;
    margin: 0 10%;
    position: relative;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
	display: none;
}
/*inputs*/
#msform input, #msform textarea {
  padding: 15px;
    border: 1px solid #ccc;
    border-radius: 28px;
    margin-bottom: 10px;
    height: 60px;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Open Sans', Arial, sans-serif;
    color: #2C3E50;
    font-size: 13px;
}
/*buttons*/
#msform .action-button {
	width: 100px;
	background: #27AE60;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px 5px;
	margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
	box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
	font-size: 15px;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 10px;
}
.fs-subtitle {
	font-weight: normal;
	font-size: 13px;
	color: #fff;
	margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
}
#progressbar li {
	list-style-type: none;
	color: white;
	text-transform: uppercase;
	font-size: 9px;
	width: 33.33%;
	float: left;
	position: relative;
}
#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 20px;
	line-height: 20px;
	display: block;
	font-size: 10px;
	color: #333;
	background: white;
	border-radius: 3px;
	margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: white;
	position: absolute;
	left: -50%;
	top: 9px;
	z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
	background: #27AE60;
	color: white;
}


.writtencontent {
  background-color: #f8f9fc;
    display: grid;
    width: 65%;
    color: #29335c;
    justify-self: center;
    margin-bottom: 100px;
    margin-top: 50px;
}

.writtencontent p {
color: #29335c;
font-size: 16px;
}

.writtencontent h2 {
color: #29335c;
font-size: 22px;
}

.thnxmessage {
  display: grid;
    background-color: #3a4f9fad;
    width: 60%;
    border-radius: 8px;
    box-shadow: 2px 2px 18px 7px #4170dc inset;
    padding:40px 20px;
}
.category {
  display: grid;
}
.thnkbtn {
  background-color: #f86c11;
      box-shadow: 0px 6px 8px 0px black;
      width: 200px;
      height: 60px;
      justify-self: center;
      display: grid;
    align-content: center;
}

.thnkbtn:hover {
  box-shadow: 0px 6px 8px 0px #00000000;
}

#signupsection {
  display: grid;
height: 200px;

align-content: end;
justify-items: center;
margin-top: 50px;
padding-bottom: 40px;
color: white;
text-align: center;
background-image: url(../img/bg33.png);
background-position: center 76%;
background-repeat: no-repeat;
background-size: cover;

}

#signupsection h1 {
  margin:0;
}
.confirmation {
  display: grid;
background-color: #252d52;
height: 600px;
color: white;
align-content: center;
justify-content: center;
text-align: center;
}

.confirmation h3 {
color: #3ba080;
}

.confirmation a {
  width: 200px;
      display: grid;
      height: 45px;
      background-color: white;
      align-content: center;
      border-radius: 50px;
      justify-self: center;
      padding: 10px;
      transition: all 0.8s ease;
}

.confirmation a:hover {
background-color: #3ba080;
}

.signin {
  margin: 5px;
    height: 40px;
    border: none;
    border-radius: 8px;
}
.ctabtn {
  width: 150px;
  height: 40px;
  display: grid;
  justify-content: center;
  background-color: white;
  align-items: center;
  margin: 5px;
  transition: all 0.8s ease;
  border-radius: 4px;
    box-shadow: 3px 3px 4px 4px #00000057;
}
.ctabtn:hover {
  box-shadow: 3px 3px 4px 4px #00000000;
}
.signrow {
  display: flex;
  align-items: center;
}

.signrow a {
  color: black;
  font-weight: 900;
  transition: all 0.8s ease;
}

.signrow a:hover {
  color: #00c7ff;
  font-weight: 900;
}

.category h1 {
  color: #29335c;
    font-size: 28px;
    font-weight: 900;
}

.gamerow {
  display: flex;
  justify-content: center;
}

.game {
  height: 130px;
width: 220px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: grey;
margin: 40px 10px;
transition: all 0.8s ease;
border-radius: 15px;
display: grid;
justify-content: center;
align-content: end;
}

.game p {
  color: #29335c;
  margin-bottom: -60px;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  text-transform: capitalize;
}
.gameplayer {
  width: 100%;
}
.gameplayer > div {
  display: grid;
      justify-items: center;
}

iframe {

}

.game:hover {
  box-shadow: 4px 6px 4px #00000000;
}

#g1 {
  background-image: url(../img/narcos.svg);
}

#g2 {
  background-image: url(../img/bookofatem.jpg);
}

#g3 {
  background-image: url(../img/bookofoz.jpg);
}

#g4 {
  background-image: url(../img/fighter.jpg);
}

#g5 {
  background-image: url(../img/piratesplenty.jpg);
}

#g6 {
  background-image: url(../img/darkking.jpg);
}

#g7 {
  background-image: url(../img/starburst.svg);
}

#g8 {
  background-image: url(../img/rage.svg);
}

#g9 {
  background-image: url(../img/fortuniumgold.jpg);
}

#g10 {
  background-image: url(../img/divine.svg);
}

#g11 {
  background-image: url(../img/blackjack.jpg);
}

#g12 {
  background-image: url(../img/gonzos.jpeg);
}

#g13 {
  background-image: url(../img/flowerfortune.jpeg);
}

#g14 {
  background-image: url(../img/jumanji.jpg);
}

#g15 {
  background-image: url(../img/twinspin.svg);
}

#g16 {
  background-image: url(../img/godsgold.jpg);
}

#g17 {
  background-image: url(../img/africanlegends.jpeg);
}

#g18 {
  background-image: url(../img/queenalexandria.jpeg);
}

#g19 {
  background-image: url(../img/roses.jpg);
}

#g20 {
  background-image: url(../img/hell.jpg);
}


#g21 {
  background-image: url(../img/cherrypop.jpg);
}

#g22 {
  background-image: url(../img/roulette.jpg);
}

#g23 {
  background-image: url(../img/wildwild.jpg);
}

#g24 {
  background-image: url(../img/midnighttokyo.jpg);
}

#c1 {
  background-image: url(../img/dazzle.jpg);
}

#c2 {
  background-image: url(../img/motor.jpg);
}

#c3 {
  background-image: url(../img/c3.jpg);
}

#c4 {
  background-image: url(../img/c4.png);
}

#c5 {
  background-image: url(../img/c5.png);
}

#c6 {
  background-image: url(../img/c6.png);
}

.gamec {
  width: 200px;
    height: 250px;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: grey;
  box-shadow: 4px 6px 4px #0000005c;
  margin: 40px 10px;
    border-radius: 6px;
    display: grid;
    justify-content: center;
    align-content: end;
}

.gamec:hover {
  box-shadow: 4px 6px 4px #00000000;
}

.gamec p {
  color: #262626;
  margin-bottom: -60px;
  font-weight: 900;
  text-align: center;
}

.gamef {
  width: 100%!important;
  height: 100%!important;
}


.footer {
  display: grid;
    justify-items: center;
    align-content: center;
    background-color: #29335c;
    text-align: center;
    color: #8f8f8f;
    padding-bottom: 20px;
    width: 100%;
    height: 800px;
    justify-self: center;
    z-index: 1;
}

.ftop {
  clip-path: polygon(0 38%, 100% 0, 100% 102%, 0% 100%);
      background-color: black;
      height: 350px;
      display: grid;
      align-content: flex-end;
      justify-items: center;
      width: 100%;
}

.fbottom {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 62%);
background-color: black;
height: 300px;
width: 100%;
display: grid;
justify-items: center;
}

.footer p {
  width: 80%;
  font-size: 16px;
}

.footerlinks2 {
  display: flex;
}

.footerlinks {
  display: flex;
  width: 50%;
  justify-content: space-around;
  margin-top: 20px;
}

.footerlinks img {
  margin: 10px 0px;
max-height: 38px;
}

.footerlinks2 a {
  margin: 5px;
  color: #bec3cd;
  transition: all 0.8s ease;
  font-size: 18px;
}

.footerlinks2 a:hover {
  color: #ffffff;
}

.Thead {
  color: white;
    height: 300px;
    background-color: #29335c;
    display: grid;
    justify-content: center;
    align-content: center;
    margin-top: 60px;
    font-size: 34px;
    text-align: center;
}

.privacy {
  text-align: center;
padding-top: 20px;
background-color: #ffffff;
padding-bottom: 20px;
color: #29335c;
display: grid;
justify-items: center;
}

.privacy p {
  width: 80%;
  font-size: 16px;
}

strong {
  font-weight: 600;
      font-size: 20px;
}

.terms {
  text-align: initial;
padding-top: 20px;
padding-bottom: 20px;
color: #29335c;
width: 80%;
justify-self: center;
}

.terms li {
box-shadow: 0px 0px 0px #00000070;
background: #f0f8ff00;
}

.terms a {
  color: #4fc1e9;
}

.terms p {
  font-size: 16px;
}

#hide {
  color: white;
  float: right;
  margin-right: 30px;
  font-size: 30px;
}

#hide:hover{
color: #333;
}

#hide2 {
  color: white;
  float: right;
  margin-right: 30px;
  font-size: 30px;
}

#hide2:hover{
color: #333;
}

/* pop up style */
.mobgames {
  display: none;
}

#gsearch2 {
  display: none;
}

@media only screen and (min-width:1251px) and (max-width: 3000px) {

#gsearch2 {
  display: block;
  max-width: 325px;
  min-width: 321px;
  width: 100%;
    align-self: flex-start;
    margin-right: 40px;
    justify-self: center;
    height: 55px;
    background-color: #e4e7e9;
    border-radius: 40px;
    background: #e4e7e9;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    border: none;
    text-align: left;
    margin-top: 10px;
}

#gsearch {
  display: none;
}

}

@media only screen and (min-width:1350px) and (max-width: 2500px) {
  .gamerow {
      justify-content: space-evenly;}

      .game {
        height: 165px;
        width: 250px;
      }

      .mobgames {
        display: none;
      }


}

@media only screen and (min-width:500px) and (max-width: 830px) {
  #mobilemenu {
    color: white;
    display: flex;
  }
  .desktop {
    display: none;}

    .mobgames {
      display: none;
    }

    #gsearch2 {
      display: none;
    }

}

@media only screen and (min-width:500px) and (max-width: 790px) {
.game {
  height: 60px;
  width: 80px;}

.game p {
  font-size: 12px;
}
.icon {
  width: 56px;
  height: 56px;
}
#gsearch2 {
  display: none;
}
.iconarea p{
  font-size: 12px;
}

.ctabutton {
  width: 150px;
}

#login {
  width: 150px;
}
  .gamec {
    width: 150px;
    height: 200px;}

.category h1 {
  font-size: 22px
}

.ctasection {
  justify-content: center;
}
.ctaarea {
    margin-left: 0px;
    display: grid;
    justify-items: center;
    text-align: center;
}
.ctaarea h1 {
    font-size: 50px;
    margin: 0;}

.thnxmessage {
    padding:20px 40px;

}

.mobgames {
  display: none;
}

#menupic {
  display: none;
}

#logo {
 justify-self: baseline;
 margin-left: 15px;
}

}
@media only screen and (min-width:500px) and (max-width: 535px) {

  .signrow {
      display: grid;}

      #signupsection {
    height: 300px;}

    .mobgames {
      display: none;
    }
    #gsearch2 {
      display: none;
    }
}
@media only screen and (min-width:0px) and (max-width: 499px) {
.desk {
  display: none;
}
.hide {
  display: none;
}
.menulink {
  margin: 18px 13px;
}
.navboxa {
    width: 44.5%;
  }
#menupic {
  display: none;
}

.registration {
  margin-top: 25px;
}

#gsearch {
    width: 90%;
  }
  #gsearch2 {
    display: none;
  }

  .row {
    display: grid;
    justify-items: center;
    padding-top: 0px;
    margin-top: 20px
  }

.iconrow {
  width: 100%;
  padding-top: 20px;
}

  #mobilemenu {
    color: white;
    display: flex;

  }

  .navrow {
   height: 60px;
   align-items: center;
  }

  .navrow1 a {
    display: none;
  }

  #mob {
    display: flex;
  }
.ctabutton {
  width: 200px;
}
#login {
  width: 200px;
}
  .headicns {
    display: flex;
  }
.headicns h1 {
  margin: 0;
}
  .navrow2 a {
  color: white;
  }

#progressbar {
  display: none;
}
#msform fieldset {
  margin: 0;
}
iframe {
  max-width: 100%;

}

.icon {
  width: 64px;
    height: 64px;
    background-size: 68px 68px;
}

.iconarea p{
  font-size: 12px;
}

.iconarea {
text-align: center;
}

.ctabutton {
  width: 220px;
}

#login {
  width: 220px;
}

 .mobilebtn {
   background-color: white;
    display: grid;
    justify-content: center;
    align-content: center;
    color: #f74d07;
    border-radius: 4px;
    height: 40px;
    width: 75px;
    font-size: 12px;
 }

 .mobilebtn p {
   color: #f86c11;
 }
  .navrow2 {
    align-items: center;
    justify-content: space-around;
  }
body {
  background-color: #f8f9fc;
}

#logo {
height: 28px;
width: 100px;
background-image: url(../img/mobilelogo.svg);
background-size: contain;
justify-self: flex-start;
  }

  #sbtn {
    width: 96px;
    margin-right: 10px;
    font-size: 10px;
  }

  #lbtn {
    width: 96px;
    font-size: 10px;
  }

.navbtns {
margin: 0px;
margin-right: 15px;
}

#bgheaderslider {
  width: 100%;
  height: 580px;
}

.mobgames {
  display: grid;
}

.mobgamedivider {
display: flex;
}

  .gamesection {
    width: 100%;
  }
  .gamesection2 {
    background-position: right 75%;
  }
  .gamerow {
    display: grid;
  }
  .game {
    height: 89px;
    width: 159px;
    margin: 20px 10px;
  }


  .game p {
    font-size: 12px;
    }

    .signrow {
        display: grid;}

        #signupsection {
      height: 300px;}

      .category h1 {
        font-size: 18px;
       line-height: 26px;
      }

.gamec {
margin-bottom: 80px;
width: 100px;
height: 150px;
}

.thnxmessage {
  padding:10px 20px;
  }

  .whitemenu {
    width: 100%;
  }
.title {
  margin: 20px 0px -12px 10px;
}
 .ctasection {
  justify-content: center;
  background-size: cover;
   }

   .ctaarea {
       margin-left: 0px;
       display: grid;
       justify-items: center;
       text-align: center;
       margin-top: 46px;
   }

   .ctaarea h1 {
       font-size: 44px;
       margin: 0;
      line-height: 44px;
    }

  .ctaarea h3 {
    font-size: 16px;
    line-height: 20px;
      }

    .footer {
      width: 100%;
    }

    .footer p {
      font-size: 12px;
    }

    .ftop {
      clip-path: polygon(0 21%, 100% 0, 100% 102%, 0% 100%);
    height: 350px;
    align-content: center;
    width: 100%;
    justify-items: center;
    }

}

.sign-up-container form {
  position: absolute;
  z-index: 2200;
  width: 380px;
  height: auto;
  margin: 0 auto;
  padding: 20px;
  top: 28%;
  right: 0;
  left: 0;
  background-color: #fff;
  box-shadow: 0 2px 6px 3px rgba(0, 0, 0, 0.2);
  border: solid #3a3939 2px;
  text-align: center;
}

.sign-up-container .close {
  float: right;
  font-size: 20px;
  font-weight: 900;
  color: #29335c;
}

.sign-up-container .ctabutton {
  display: inline-block;
  height: auto;
  font-size: 18px;
  margin: 20px 0;
  padding: 20px 0 20px 0;
}

.sign-up-container .error-block {
  color: red;
}

.sign-up-container .main-logo {
  width: 200px;
  margin: 20px 0 20px 0;
}

.sign-up-container h3 {
  color: #29335c;
  font-size: 22px;
  font-weight: 800;
}

.sign-up-container input[type="checkbox"] {
  display: inline;
  width: 20px;
  height: 20px;
  border: solid #29335c 2px;
}  

.sign-up-container .checkbox-container {
  font-size: 16px;
  color: #29335c;
}