#masthead {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3000;
    background-image: url(images/header-bg.png);
    background-size: cover;
    background-position: 50% 100%;
    padding-bottom: 12px;
}
@font-face {
  font-family: textFont;
  src: url(fonts/text.ttf);
}
@font-face {
  font-family: headingFont;
  src: url(fonts/heading.ttf);
}
body {
    background-color: #fff;
}
#page{
  position: relative;
}
#content {
    background-image: url(images/white-bg.png);
    background-size: contain;
    position: relative;
    z-index: 1;
}
#main-slider {
    padding-top: 80px;
    z-index: -1;
}
.black-overlay {
   position: absolute;
    width: 100%;
    height: 100%;
    top: 15%;
    left: 14%;
    bottom: 0;
}
.responsive-img {
  width: 15%;
  height: auto;
  max-width: 439px;
  max-height: 439px;
}
.responsive-img-grade {
  margin-left: 5%;
  width: 10%;
  height: auto;
  max-width: 270px;
  max-height: 270px;
}

#main-slider ol.carousel-indicators {
    bottom: 30px;
}
body, button, input, select, textarea {
    color: #404040;
    font-family: 'headingFont';
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5;
}
.navbar-icon-top.navbar-expand-lg .navbar-nav li a{
      color: #333;
}
.site-header ul i.fa:before {
    font-family: "FontAwesome";
    font-size: 35px;
    display: block;
    margin-top: 10px;
}
@media (min-width: 992px) {  
  .navbar-icon-top.navbar-expand-lg .navbar-nav .nav-link > .fa {
    display: block;
    text-align: center;
  }
  .navbar-icon-top.navbar-expand-lg .navbar-nav .nav-link {
    text-align: center;
    display: table-cell;
    height: 70px;
    vertical-align: middle;
    padding-top: 0;
    padding-bottom: 0;
  }
  .navbar-brand.abs
    {
        position: absolute;
        width: 100%;
        left: 0;
        text-align: center;
    }

  
}
@media (max-width: 992px) {
  #masthead {
    padding-bottom: 12px;
    background-color: white;
}
/*.site-header ul i.fa:before {
    height   : 1px;
    width    : 1px;
    position : absolute;
    overflow : hidden;
    top      : -1000px; 
}*/
.main-navigation .nav-link i.fa:before {
    margin-right: 6px;
}
.site-header .site-branding{
    height   : 1px;
    width    : 1px;
    position : absolute;
    overflow : hidden;
    top      : -1000px; 
}
}
#masthead .main-navigation ul.left-menu > li:nth-child(1):hover > a{
    color: #e14f50;
}
#masthead .main-navigation ul.left-menu > li:nth-child(2):hover > a{
    color: #5a69a5;
}
#masthead .main-navigation ul.left-menu > li:nth-child(3):hover > a{
    color: #90c367;
}
#masthead .main-navigation ul.right-menu > li:nth-child(1):hover > a{
    color: #6da5ff;
}
#masthead .main-navigation ul.right-menu > li:nth-child(2):hover > a{
    color: #fdd51f;
}
#masthead .main-navigation ul.right-menu > li:nth-child(3):hover > a{
    color: #6d4992;
}
i.fa.fa-puzzle-piece {
    color: #e14f50;
}
i.fa.fa-caret-square-o-left {
    color: #5a69a5;
}
i.fa.fa-users {
    color: #90c367;
}
i.fa.fa-user {
    color: #6da5ff;
}
i.fa.fa-user-circle {
    color: #fdd51f;
}
i.fa.fa-user-circle-o {
    color: #6d4992;
}
.site-branding {
    /*width: 28%;*/
    background-image: url(images/logo-bg.png);
    background-size: cover;
    background-position: 50% 95%;
    padding: 0 0 35px 0;
    text-align: center;
    position: relative;
    top: 30px;
    min-height: 155px;
}
.left-right-menu{
    width: 36%;
}
.site-header .site-branding{
    padding: 0 0 65px 0;

}
img.custom-logo {
    /* text-align: center; */
    width: 218px;
}
#top-Games.background-image-properties {
    background-size: contain;
    /*width: 100%;*/
}
#top-Games {
   background-image: url(images/white-bg.png);
   /* margin-top: -62px;
   z-index: 1100;
    position: absolute;*/
    margin-bottom: 30px;
    z-index: 1;
    margin-top: -52px;
}
#logic-Games.background-image-properties {
    background-size: contain;
    /* width: 100%; */
}
#logic-Games {
    background-image: url(images/white-bg.png);
    margin-bottom: 30px;
    z-index: 1;
    margin-top: -52px;
}
.entry-header {
    text-align: center;
    margin-bottom: 2em;
    /*margin-top: 5em;*/
}
.entry-title {
    word-wrap: break-word;
    color: #333;
    margin-top: 80px;
    
    border-bottom: 1px solid #ddd;
    display: inline-block;
    position: relative;
    padding-bottom: 15px;
    text-transform: capitalize;
}
.entry-title:after {
    content: "";
    width: 50px;
    height: 5px;
    background-color: #6d4992;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}
.game-col {
    padding: 25px;
    margin: 10px 10px;
    border-radius: 18px;
}
.game-col-1 {
    background-color: #e9642a;
}
.game-col-2 {
    background-color: #c685d2;
}
.game-col-3 {
    background-color: #fdd51f;
}
.image-wrapper {
    position: relative;
    overflow: hidden;
}
.game-col img {
    border: 5px solid #fff;
    border-radius: 18px;
    vertical-align: middle;
    width: 100%;
}
.game-title .title {
    margin: 0.5em 0 0 0;
    font-size: 24px;
    color: #fff;
}
.game-contents:hover h5 {
    color: #333;
}

.submit
{
	background: #ff9b00;
    color: #fff;
    font-weight: 600;
    width: 25%;
	
}
.btn.btn-play {
    background-color: #fff;
    border: 1px solid #fff;
    color: #333;
    padding: 0 28px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 24px;
    font-weight: bold;
   margin-bottom: 4px;
   margin-top: 8px;
    cursor: pointer;
    border-radius: 6px;
}
.btn-play:hover{
color: #fff;
    background-color: #6d4992;
    border-color: #6d4992;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle{
    color: #fff;
    background-color: #6d4992;
    border-color: #6d4992; /*set the color you want here*/
}
#popular-games {
    background-image: url(images/yellow-bg-2.png);
}
#popular-games.background-image-properties {
   background-size: contain;
    background-position: 50% 0;
}
#row-popular-games {
    background-color: #fbee49;
    background-image: url(images/yellow-bg.png);
    background-size: cover;
    /* background-repeat-y: repeat; */
    /* margin-bottom: -20px; */
}

.move-section-up{
  margin-top: -50px;
}
section, .site-content {
    position: relative;
}
.black2-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.91);
    border-radius: 18px;
    opacity: 0;
    border: 5px solid #ffff;
}
.portfolio-item:hover .black2-overlay, .portfolio-item:hover .hovercontent {
    opacity: 1;
}
.portfolio-item .hovercontent {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
    height: 70px;
    opacity: 0;
}
.portfolio-col {
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 18px;
}
.portfolio-col img {
    border: 5px solid #fff;
    border-radius: 18px;
    vertical-align: middle;
    width: 100%;
}
.entry-header2 {
    text-align: center;
    margin-bottom: 2em;
    /*margin-top: 5em;*/
}
.entry-title2 {
    word-wrap: break-word;
    color: #333;
    margin-top: 80px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    display: inline-block;
    position: relative;
    padding-bottom: 15px;
    text-transform: capitalize;
}
.footer-divider img {
    vertical-align: bottom;
    max-width: 100%;
}
section#footer {
    margin-top: -90px;
    z-index: 1;
}
.site-footer {
    text-align: center;
    background-position: 50% 100%;
    background-size: cover;
    background-image: url(images/footer-bg.png);
}

.spacer {
    margin-top: 30%;
}
.site-footer .site-info{
    font-size: 16px;
    font-weight: 500;
}
.textwidget{
    font-size: 18px;
    font-weight: 500;
  }
#masthead.fixed-header.is-sticky {
    position: fixed;
   /* background-color: transparent;*/
}

#play-Games {
   background-image: url(images/yellow-bg.png);
  padding-top: 122px;
  background-size: contain;

}
#gamePagecontent {
    background-image: url(images/yellow-bg.png);
    background-size: cover;
    position: relative;
    z-index: 1;
}
.col.gameFrame {
    max-width: 84%;
}

/* Team Page Styling*/
img.OurTeam-img.img-fluid {
    margin-top: 65px;
}
#Our-Team.background-image-properties {
    background-size: contain;
    /*width: 100%;*/
}
#Our-Team {
   background-image: url(images/white-bg.png);
    margin-bottom: 130px;
    z-index: 1;
    margin-top: -4%;
}
.team-col-1 {
    background-color: #eb4944;
}
.team-col-2 {
    background-color: #f6aa06;
}
.team-col-3 {
    background-color: #136da9;
}
.team-col-4 {
    background-color: #6f4b95;
}
.team-col-5 {
    background-color: #90c366;
}
.team-col-6 {
    background-color: #f5ce07;
}

/* end Team Page Styling*/

.expertise-title .title {
    margin: 0.5em 0 0 0;
    font-size: 24px;
    color: #6d4992;
}
/* Contact Us Page Styling*/
#content-Contacts {
    /* background-image: url(images/white-bg.png); */
    background-size: contain;
    position: relative;
    z-index: 1;
    background-color: #fbee49;
}
#contact-page {
    background-image: url(images/yellow-bg.png);
    z-index: 1;
    margin-top: -6%;
}
#contact-page.background-image-properties {
    background-size: 100%;
    width: 100%;
}
.row.contactRow {
    margin-bottom: 60px;
    margin-top: 12px;
}
.contact{
        padding: 8%;
    }
    .contact-col.col-md-3{
        background: #ff9b00;
        padding: 4%;
        border-top-left-radius: 0.5rem;
        border-bottom-left-radius: 0.5rem;
    }
    .contact-info{
        margin-top:10%;
        color: #fff;
    }
    .contact-info img{
        margin-bottom: 10%;
    }
    .contact-info h2{
        margin-bottom: 10%;
    }
    .contact-col.col-md-9{
        background: #fff;
        padding: 3%;
        border-top-right-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
    }
    .contact-form label{
        font-weight:600;
    }
    .contact-form button{
        background: #ff9b00;
        color: #fff;
        font-weight: 600;
        width: 25%;
    }
    .contact-form button:focus{
        box-shadow:none;
    }
    /* End Contact Us Page Styling*/

/* login Panda Page Styling*/


body.loginPage {
   
    background: #fbee49;
}

.panda {
  position: relative;
  width: 200px;
  margin: 50px auto;
}

.face {
  width: 200px;
  height: 200px;
  background: #fff;
  border-radius: 100%;
  margin: 50px auto;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
  z-index: 50;
  position: relative;
}

.ear, .ear:after {
  position: absolute;
  width: 80px;
  height: 80px;
  background: #000;
  z-index: 5;
  border: 10px solid #fff;
  left: -15px;
  top: -15px;
  border-radius: 100%;
}
.ear:after {
  content: '';
  left: 125px;
}

.eye-shade {
  background: #000;
  width: 50px;
  height: 80px;
  margin: 10px;
  position: absolute;
  top: 35px;
  left: 25px;
  -webkit-transform: rotate(220deg);
  transform: rotate(220deg);
  border-radius: 25px/20px 30px 35px 40px;
}
.eye-shade.rgt {
  -webkit-transform: rotate(140deg);
  transform: rotate(140deg);
  left: 105px;
}

.eye-white {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: #fff;
  z-index: 500;
  left: 40px;
  top: 80px;
  overflow: hidden;
}
.eye-white.rgt {
  right: 40px;
  left: auto;
}

.eye-ball {
  position: absolute;
  width: 0px;
  height: 0px;
  left: 20px;
  top: 20px;
  max-width: 10px;
  max-height: 10px;
  transition: 0.1s;
}
.eye-ball:after {
  content: '';
  background: #000;
  position: absolute;
  border-radius: 100%;
  right: 0;
  bottom: 0px;
  width: 20px;
  height: 20px;
}

.nose {
  position: absolute;
  height: 20px;
  width: 35px;
  bottom: 40px;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 50px 20px/30px 15px;
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
  background: #000;
}
a:hover {
 cursor:hand;
}
.body {
  background: #fff;
  position: absolute;
  top: 200px;
  left: -20px;
  border-radius: 100px 100px 100px 100px/126px 126px 96px 96px;
  width: 250px;
  height: 282px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

.hand, .hand:after, .hand:before {
  width: 40px;
  height: 30px;
  border-radius: 50px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  background: #000;
  margin: 5px;
  position: absolute;
  top: 70px;
  left: -25px;
}
.hand:after, .hand:before {
  content: '';
  left: -5px;
  top: 11px;
}
.hand:before {
  top: 26px;
}
.hand.rgt, .rgt.hand:after, .rgt.hand:before {
  left: auto;
  right: -25px;
}
.hand.rgt:after, .hand.rgt:before {
  left: auto;
  right: -5px;
}

.foot {
  top: 360px;
  left: -80px;
  position: absolute;
  background: #000;
  z-index: 1400;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  border-radius: 40px 40px 39px 40px/26px 26px 63px 63px;
  width: 82px;
  height: 120px;
}
.foot:after {
  content: '';
  width: 55px;
  height: 65px;
  background: #222;
  border-radius: 100%;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  margin: auto;
}
.foot .finger, .foot .finger:after, .foot .finger:before {
  position: absolute;
  width: 25px;
  height: 35px;
  background: #222;
  border-radius: 100%;
  top: 10px;
  right: 5px;
}
.foot .finger:after, .foot .finger:before {
  content: '';
  right: 30px;
  width: 20px;
  top: 0;
}
.foot .finger:before {
  right: 55px;
  top: 5px;
}
.foot.rgt {
  left: auto;
  right: -80px;
}
.foot.rgt .finger, .foot.rgt .finger:after, .foot.rgt .finger:before {
  left: 5px;
  right: auto;
}
.foot.rgt .finger:after {
  left: 30px;
  right: auto;
}
.foot.rgt .finger:before {
  left: 55px;
  right: auto;
}

form.loginForm {
  text-align: center;
  display: none;
  max-width: 400px;
  padding: 20px 40px;
  background: #fff;
  height: 300px;
  margin: auto;
  display: block;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
  transition: 0.3s;
  position: relative;
  -webkit-transform: translateY(-100px);
  transform: translateY(-100px);
  z-index: 500;
  border: 1px solid #eee;
}
form.up {
  -webkit-transform: translateY(-180px);
  transform: translateY(-180px);
}

h1.loginHeading {
  color: #6d4992;
 
}

.btn.btn-login {
  background: #fff;
  padding: 5px;
  width: 150px;
  height: 35px;
  border: 1px solid #6d4992;
  margin-top: 25px;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0 50px #6d4992 inset;
  color: #fff;
}
.btn.btn-login:hover {
  box-shadow: 0 0 #6d4992 inset;
  color: #6d4992;
}
.btn.btn-login:focus {
  outline: none;
}

.form-group {
  position: relative;
  font-size: 15px;
  color: #666;
}
.form-group + .form-group {
  margin-top: 30px;
}
.form-group .form-label {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 5px;
  transition: 0.3s;
}
.form-group .form-control {
  width: 100%;
  position: relative;
  z-index: 3;
  height: 35px;
  background: none;
  border: none;
  padding: 5px 0;
  transition: 0.3s;
  border-bottom: 1px solid #777;
  color: #555;
}
.form-group .form-control:invalid {
  outline: none;
}
.form-group .form-control:focus, .form-group .form-control:valid {
  outline: none;
  box-shadow: 0 1px #6d4992;
  border-color: #6d4992;
}
.form-group .form-control:focus + .form-label, .form-group .form-control:valid + .form-label {
  font-size: 12px;
  color: #6d4992;
  -webkit-transform: translateY(-15px);
  transform: translateY(-15px);
}

.alert {
  position: absolute;
  color: #f00;
  font-size: 16px;
  right: -180px;
  top: -300px;
  z-index: 200;
  padding: 30px 25px;
  background: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  opacity: 0;
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0);
  -moz-transition: linear 0.4s 0.6s;
  -o-transition: linear 0.4s 0.6s;
  -webkit-transition: linear 0.4s;
  -webkit-transition-delay: 0.6s;
  transition: linear 0.4s 0.6s;
}
.alert:after, .alert:before {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  background: #fff;
  left: -19px;
  bottom: -8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
}
.alert:before {
  width: 15px;
  height: 15px;
  left: -35px;
  bottom: -25px;
}

.wrong-entry {
  -webkit-animation: wrong-log 0.3s;
  animation: wrong-log 0.3s;
}
.wrong-entry .alert {
  opacity: 1;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}
@-webkit-keyframes eye-blink {
  to {
    height: 30px;
  }
}
@keyframes eye-blink {
  to {
    height: 30px;
  }
}
@-webkit-keyframes wrong-log {
  0%, 100% {
    left: 0px;
  }
  20% , 60% {
    left: 20px;
  }
  40% , 80% {
    left: -20px;
  }
}
@keyframes wrong-log {
  0%, 100% {
    left: 0px;
  }
  20% , 60% {
    left: 20px;
  }
  40% , 80% {
    left: -20px;
  }
}
section#footerLoginPage {
    margin-top: -12%;
    z-index: 1;
}
/* END login Panda Page Styling*/
.form-group.reg-Btn {
    text-align: center;
    margin-top: 10px;
}