/* CSS Document */
.brGap-none, .brGap-sm, .brGap-md, .brGap-lg{
    clear: both;
    margin:0;
    padding:0;
}
.brGap-none{
    line-height: 0;
}
.brGap-sm{
    line-height: 3px;
}
.brGap-md{
    line-height: 8px;
}
.brGap-lg{
    line-height: 15px;
}

/* max width */
.max-width-xl{
  max-width: 1140px !important;
}
.max-width-lg{
  max-width: 960px !important;
}
.max-width-md{
  max-width: 720px !important;
}
.max-width-sm{
  max-width: 540px !important;
}

/* fix stylesheet.css */
a:link, a:visited,  a:active
{ color: #1D2F65; }
a:hover
{ color: #9f00ff; } 

.lang-offcanvas a:link, .user-offcanvas a:link
{ color: #eee;}
.lang-offcanvas a:visited, .user-offcanvas a:visited
{ color: #fff;}
.lang-offcanvas a:active, .user-offcanvas a:active
{ color: #fff;}
.lang-offcanvas a:hover, .user-offcanvas a:hover
{ color: #ffa5e9;}
.lang-offcanvas, .user-offcanvas
{ width:200px !important;}


/* tpl_header.php */
#headerWrapper{
  background-color: #DC8D69;
}
.top-list-container{
  background-color:#f1e5d6;
}
.culture-top-list{
  background-color:#fff5e8;
}

.culture-body{
  padding-top: 0.5rem;
}

/* main content */
.main-content img{
  max-width: 100%;
  height: auto;
}


/* content form */
div.cke_contents {
    height: 300px !important;
}


#productDescription table{
  border: 1px solid #ccc;
}


/* Color */
.bb-fun-form{
  background-color: #f5f5f5;
  color: #3B2121;
  border: 0px;
  padding: 15px;
  margin: 30px;
}
.bb-fun-box{
  background-color: #fbff90;
  color: #3B2121;
  border: 0px;
  padding: 40px;
  margin: 20px 0;
  max-width: 820px;
}


/* Products */
#productDescription p{
  margin: 0;
  padding:0;
}
.wrapperAttribsOptions .optionName{
  
}


/* GAMES */
.black-gradient-bg{
  background: linear-gradient(#444, #222);
}



/* Slick Slider */
.slick-items{
  width:90%;
  margin:0px auto;
  margin-top: 10px;
}
.slick-slide{
  margin:10px;
}
.slick-slide img{
  width:100%;
  border: 0px solid #fff;
}


/* Svg Icons */
.navigate-icon {
  color: #ffffff;
  font-size: 1.5rem;
}


/* IMG */
.pImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.pImg:hover {opacity: 0.7;}

/* The Modal (background) */
.img-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}




/* Modal Content (image) */
#bb-enlarge-page-content img{
  cursor: -moz-zoom-in; 
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
  width: 100%;
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 1020px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}