/* YOUR CUSTOM STYLES */

/*general*/
.web{display: block; visibility: visible;}
.mob{display: none; visibility: hidden;}
.clear{clear: both;}

.container-content {width: 900px;}
body {color: #58595b; font-family: 'opensans-regular', 'sans-serif'; overflow-x: hidden !important;}
.title {font-size: 26px;}
.title-line {border-bottom: 4px solid #e69a1a; width: 14px;}
.title-line-grey {border-bottom: 1px solid #58595b; padding: 5px 0;}
.vertical-center {min-height: 100%;  /* Fallback for browsers do NOT support vh unit */min-height: 100vh; /* These two lines are counted as one :-)       */display: flex;align-items: center;}
a {color: inherit;}
.border-bottom-grey {border-bottom: 1px solid #808184; margin-top: 10px; margin-bottom: 10px;}
.border-top-grey {border-top: 1px solid rgb(230, 230, 230); margin-top: 10px; margin-bottom: 10px;}
.float-right{ float: right; }
.float-left{ float: left; }
.overflow {overflow: auto;}
.label.label-sm {font-size: 10px;font-weight: 600;padding: 3px 6px;}
.alert {margin:10px 0;}

/*bg*/
.bg-grey {background-color: #f8f8f8; }
.bg-dark-grey {background-color: #ededed; }

/*btn*/
.btn {font-size: 12px;}
.btn-primary {background-color:#59bdef; color: #fff; border-color: #59bdef;}
.btn-logout {margin: 10px;background: transparent; border: none;padding: 0;}
.btn-default {background-color:#e69a1a; color: #fff; border-color: #e69a1a;}
.btn-no-bg {background-color:transparent; color: #58595b; border-color: none; font-size: 20px;}
.btn-orange {
	background: url(../images/orange_button_2.png) no-repeat;
	width: 100%;
	min-height: 52px;
}
.btn-grey {
	background: url(../images/grey_button_2.png) no-repeat;
	width: 100%;
	min-height: 52px;
}

/*text*/
.bold {font-family: 'opensans-bold', 'sans-serif'; }
.semibold {font-family: 'opensans-semibold', 'sans-serif'; }
.light {font-family: 'opensans-light', 'sans-serif'; }
.uppercase {text-transform: uppercase;}
.txt-white {color: #fff;}
.txt-grey {color: #58595b; }

/*image*/
.rounded-circle { border-radius: 50%;}

/*form*/
.form-horizontal .form-group { margin-right: 0px;  margin-left: 0px;}
.form-control {padding: 15px;color: #fff; background-color: transparent;border: 2px solid #fff;height: 100%;}

/*pagination*/
.pagination > .active > a, 
.pagination > .active > span, 
.pagination > .active > a:hover, 
.pagination > .active > span:hover, 
.pagination > .active > a:focus, 
.pagination > .active > span:focus {background-color: #e69a1a; border-color: #e69a1a;}

.pagination {margin: inherit;}
.pagination > li > a, .pagination > li > span {border: none; border-radius: 4px; margin: 0 5px; padding: 5px 10px; font-size: 12px; color: #58595b; }

.pagination > .disabled > span,
.pagination > li:first-child > a, 
.pagination > li:first-child > span,
.pagination > li:last-child > a, 
.pagination > li:last-child > span{font-size: 18px; padding: 0;background: transparent;}

/*card*/
.card-footer, .card-header {padding: .75rem 1.25rem;background-color: #f7f7f9;}
.card-block {overflow: auto}

/*navbar*/
.navbar { background-color: #fff; max-height: 100px; height: 100px; margin-bottom:0;z-index: 2;}
.navbar.navbar-dark a, .navbar.navbar-dark .navbar-toggle, .navbar.navbar-dark .btn-link{color: #fff !important;}
.navbar-header {min-height: 100px;}
.navbar-brand > img {display: block; width: 120px; padding: 23px 0;}
.navbar.navbar-dark ul li{margin: 0 15px;}
.navbar.navbar-dark ul li a {color: #58595b !important; margin:30px 0px 0px; padding: 10px 0 2px 0; font-weight: normal;}
.navbar.navbar-dark ul li.cart a {margin-top: 38px;}
.navbar.navbar-dark ul li.active {border-bottom: 3px solid #e69a1a;}

.navbar.navbar-dark ul li.signin a {color: #fff !important; font-size: 16px; padding-right: 40px !important; padding-left: 40px !important; min-height: 100px;  line-height: 50px; margin: 0 !important; padding-top: 23px;}
.navbar.navbar-dark ul li.signin.active, .navbar.navbar-dark ul li.cart.active {border-bottom: none;}

.nav > li > a:hover, .nav > li > a:focus, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {background-color: inherit;}

.navbar-nav {width: 89%;}

.navbar-nav .signin {background-color: #808184;}

.navbar-nav .search a {padding: 10px 0 0 !important;}
.navbar-nav .search a img {width: 24px;}
.navbar-nav .cart {min-height: 100px;}
.navbar-nav .cart a{padding: 0 !important;}
.navbar-nav .cart a img {width: 26px; margin-right: 5px; margin-left: 5px;}
.navbar-nav .cart .count {position: absolute; top: 9%; left: 68%;}

.nav .signin.open > a, .nav .signin.open > a:hover, .nav .signin.open > a:focus {background-color: #808184;}
.nav .cart.open > a, .nav .cart.open > a:hover, .nav .cart.open > a:focus {background-color: transparent;}

.navbar-nav > li > .dropdown-menu {margin-top:-1px; border: none;}
.nav .dropdown .caret {display: none;}
.navbar.navbar-dark ul li.signin ul.dropdown-menu a{font-size: 14px;color: #58595b !important;min-height: 100%;line-height: 20px;text-align: left; padding: 15px 10px !important; width: 250px;}
.navbar-nav .signin .dropdown-menu > .active > a, 
.navbar-nav .signin .dropdown-menu > .active > a:hover, 
.navbar-nav .signin .dropdown-menu > .active > a:focus {background-color: transparent; color: inherit;}
.navbar.navbar-dark .signin ul.dropdown-menu li.active {border: none;}

/*nav side menu*/
.cbp-spmenu {position: absolute;}
.cbp-spmenu a.btn  {color: #fff;}
.cbp-spmenu h3 {margin-top: 100px; color: #fff;background: #808184;text-align: center;text-transform: uppercase;padding: 30px;}
.cbp-spmenu-right {right: -380px; z-index: 1;display:none; visible:hidden}
.cbp-spmenu-vertical {background: #fff;}
.cbp-spmenu-vertical {width: 380px; height: auto; margin: 0 0 20px;}
.cbp-spmenu-vertical a {border-bottom: 1px solid rgb(193, 121, 0);}
.cbp-spmenu-right.cbp-spmenu-open {display:block !important; visible:visible;}

/*margin*/
.mar-10 { margin: 10px;}
.mar-40 { margin: 40px;}

.mar-7T {margin-top: 7px;}
.mar-10T {margin-top: 10px;}
.mar-15T {margin-top: 15px;}
.mar-20T {margin-top: 20px;}
.mar-30T {margin-top: 30px;}
.mar-40T {margin-top: 40px;}
.mar-50T {margin-top: 50px;}

.mar-10B {margin-bottom: 10px;}
.mar-20B {margin-bottom: 20px;}
.mar-30B {margin-bottom: 30px;}
.mar-40B {margin-bottom: 40px;}
.mar-50B {margin-bottom: 50px;}

.mar-10TB {margin-top: 10px; margin-bottom: 10px;}
.mar-15TB {margin-top: 15px; margin-bottom: 15px;}
.mar-20TB {margin-top: 20px; margin-bottom: 10px;}
.mar-30TB {margin-top: 30px; margin-bottom: 30px;}
.mar-40TB {margin-top: 40px; margin-bottom: 40px;}
.mar-50TB {margin-top: 50px; margin-bottom: 50px;}
.mar-80TB {margin-top: 80px; margin-bottom: 80px;}

/*padding*/
.no-pad {padding: 0;}
.pad-10 {padding-top: 10px; padding-bottom: 10px; padding-right: 10px; padding-left: 10px;}
.pad-15 {padding-top: 15px; padding-bottom: 15px; padding-right: 15px; padding-left: 15px;}

.pad-5LR { padding-right: 5px; padding-left: 5px;}
.pad-10LR { padding-right: 10px; padding-left: 10px;}
.pad-15LR { padding-right: 15px; padding-left: 15px;}
.pad-40LR { padding-right: 40px; padding-left: 40px;}

.pad-20TB { padding-top: 20px; padding-bottom: 20px;}

/*slick carousel*/
.slick-dots li.slick-active button:before {opacity: 1.0;color: #e69a1a; width: 100%; height: 100%; font-size: 8px; line-height: 30px; border-radius: 50%;}
.slick-dots li button:before {opacity: 1.0; color: #808184; width: 100%; height: 100%; font-size: 8px; line-height: 30px; border-radius: 50%;}
.slick-dots li {margin: 0 5px; width: 10px; height: 20px;}
.slick-dots {margin: 10px 0; bottom: inherit;}
.slick-slide img {display: block;object-fit: cover;height: 150px;}
.slick-prev, .slick-next {display: none !important; visibility: none;}

/*login*/
.signup-login {
	background: url(./../images/signin_register_banner.png) no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
  	min-height: 81.9vh;
}
.site-login .vertical-center {min-height: 81.5vh;}
.site-login input::-webkit-input-placeholder, .site-signup input::-webkit-input-placeholder  { /* Chrome/Opera/Safari */color: #fff;}
.site-login input::-moz-placeholder, .site-signup input::-moz-placeholder { /* Firefox 19+ */color: #fff;}
.site-login input:-ms-input-placeholder, .site-signup input:-ms-input-placeholder { /* IE 10+ */color: #fff;}
.site-login input:-moz-placeholder, .site-signup input:-moz-placeholder { /* Firefox 18- */color: #fff;}

.site-login .title, .site-signup .title {color: #fff;}
.site-login .subtitle {color: #fff; font-size: 17px;}
.site-login .left { padding-left: 120px;}
.site-login .right { padding-right: 120px; border-right: 1px solid #fff;}

.site-login .btn,
.site-request-password-reset .btn,
.site-reset-password .btn,
.site-signup .btn,
.user-delivery-information-form .btn {padding: 10px 30px;  width: 150px;}

.site-login .forgot-password a {color: #fff !important; line-height: 38px;}

.site-signup .vertical-center {min-height: 81.5vh;}

.site-signup .signup-social h5{width:100%; text-align:center; border-bottom: 1px solid #ddd; line-height:0.1em; margin:10px 0 20px;}
.site-signup .signup-social h5 span{background-color: #fff; padding-right: 15px; padding-left: 15px;}

.site-signup .signup-social .social-icon {display: table; margin: 0 auto;}
.site-signup .signup-social .social-icon .auth-clients{margin: 0; -webkit-padding-start: 0;}
.site-signup .signup-social .social-icon .auth-clients li{margin: 0 5px; float: left; display: inline;}

.site-signup .has-error .help-block {color: #fff;}

/*user-profile*/
.user-profile td {padding: 5px;}
.user-profile .profile-image {max-width:200px; margin: 10px auto;}

.user-profile .nav-tabs > li {float: none;}
.user-profile .nav-tabs > li > a.active, 
.user-profile .nav-tabs > li > a:hover, 
.user-profile .nav-tabs > li > a:focus {color: #c00!important;cursor: default; background-color: #fff!important; border: 1px solid #c00!important;border-bottom-color: transparent;margin-right: 0;}
.user-profile .nav-tabs > li {background-color: #C00!important;}
.user-profile .nav-tabs > li > a {color: #fff!important;}
.user-profile .nav-tabs > li > a.active {color: #C00!important;}

/*user-games*/
.user-games .mainImg {width: 300px; height: 200px; object-fit: cover; padding: 10px 15px;}
.user-games .list-item {text-align: center;}

/*user-reload*/
.user-reload .reload-point .col-md-3, .user-reload .reload-point .col-xs-4 {padding-left:5px; padding-right:5px;}
.user-reload .payment-reload .col-md-12, .user-reload .payment-reload .col-xs-12 {padding-left:10px; padding-right:10px;}
.user-reload .button .col-md-12, .user-reload .button .col-xs-12 {padding-left:20px; padding-right:20px;}
.user-reload input[type="radio"] {display:none;}
.user-reload .reload-point .btn , .user-reload .payment-reload .btn {width:100%}
.user-reload .button .btn {width:100%; padding: 15px;}
.user-reload .btn:active, .btn.active {  background-image: none;  outline: 0; -webkit-box-shadow: none;box-shadow: none; background-color: #e69a1a; color: #fff;  border-color: #e69a1a;}
.user-reload .panel-body{padding: 10px 5px;}

/*about-us*/
.about-us .banner{
	background: url(./../images/homepage_banner.png) no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
  	min-height: 80vh;
  	position:relative;
}
.about-us .banner .title {font-size: 40px;left: 0;position:absolute;text-align:center;top: 50%; width: 100%}
.about-us .details {font-size: 18px; padding-top: 10px; padding-bottom: 10px; line-height: 30px; text-align: justify;}

/*digital-contents-services*/
.digital-contents-services .banner {
	background: url(./../images/digitalcontent_banner.png) no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
  	min-height: 80vh;
  	position:relative;
}
.digital-contents-services .banner .title {font-size: 40px;left: 0;position:absolute;text-align:center;top: 50%;width: 100%}

/*transaction-history*/
.transaction-history .list-item {font-size: 18px; padding: 20px 0; border-bottom: 1px solid #ddd;}
.transaction-history .list-item .divider {padding-left: 20px; padding-right: 20px;}
.transaction-history .tab {display: block;margin: 30px 0px;}
.transaction-history .tab a{ margin: 0 5px;width: 100px;border: 2px solid #ccc; padding: 5px 40px; color:#000; border-radius: 4px; text-decoration: none;}
.transaction-history .tab a.active , .transaction-history .tab a:hover {border: 2px solid #e69a1a; color: #e69a1a;}

/*item-view*/
.item-view .brand {font-size: 16px;}
.item-view .details {font-size: 18px; line-height: 30px; text-align: justify;}
.item-view .divider {padding-left: 20px; padding-right: 20px;}
.item-view .description {font-size: 16px;}
.item-view .price {font-size: 26px;}
.item-view sup {top: -1em;}
.item-view i {font-size: 13px;}
.item-view  td {padding: 5px 15px;}
.item-view  td:first-child {border-right: 1px solid #58595b; }
.item-view .btn-purchase {
	background: url(./../images/orange_button_2.png) no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
  	min-height: 54px;
    position: relative;
    padding: 0 50px;
    margin: 10px 10px 10px 0px;
    color: #fff;
}
.item-view .btn-cart {
	background: url(./../images/grey_button_2.png) no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
  	min-height: 52px;
  	position:relative;
  	padding: 0 40px;
    margin: 10px 0px 10px 0px;
    color: #fff;
}
.item-view .btn-cart img {margin-top: -5px; padding-right: 10px;}

.item-listing .filter-name{padding: 10px 15px;}
.item-listing .list-item{padding-right: 5px; padding-left: 10px;}
.item-listing .list-item .btn-default{padding: 10px 15px;}
.item-listing .list-item #even {background: #f8f8f8;}
.item-listing #item-list-form .form-control {padding: 10px 5px; width: 150px;  margin: 0 0 0 15px; margin-top: -10px;  border: 2px solid rgba(88, 89, 91, 0.60); color: inherit;}

/*cart*/
.cart td{padding: 5px;}
.cart-checkout td {padding: 10px 15px;}
.cart-checkout .panel-default > .panel-heading {color: #fff;background-color: #808184;border-color: #ddd;}
.cart-checkout .panel-default {background-color: #eaeaea;}
.cart-checkout .grand-total, .cart-checkout .amount {font-size: 20px;}
.cart-checkout .details td.border-bottom-grey{padding-top: 40px !important;}
#checkout .modal-header {display: none;}
#checkout .modal-footer {border: none;}
#checkout {text-align: center}
.cart-checkout .btn-plus {padding: 4px 0; margin-top: -3px; background: none;}
.cart-checkout .form-control {color: #58595b; border: 2px solid #58595b;}

/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

/*footer*/
footer.page-footer {background-color: #eaeaea;color: inherit}

.footer-copyright { background-color: #000 !important; color: #fff !important; font-size:11px; padding: 10px 0; text-align: center;}
.footer-copyright a {color: #fff !important;    text-decoration: none;}
.footer-copyright a:hover {color: #e69a1a !important;    text-decoration: none;}
.footer-copyright .copyright {padding-right: 20px;}
.footer-copyright .divider {padding-left: 10px; padding-right : 10px; color: #fff !important;}
footer .contact-us .details img {width: 18px;}
footer .contact-us .details .email a{color: #58595b}

.site-contact::-webkit-input-placeholder { /* Chrome/Opera/Safari */color: inherit;vertical-align: right;}
.site-contact::-moz-placeholder { /* Firefox 19+ */color: inherit;vertical-align: right;}
.site-contact:-ms-input-placeholder { /* IE 10+ */color: inherit;vertical-align: right;}
.site-contact:-moz-placeholder { /* Firefox 18- */color: inherit;}
.site-contact .form-control {border:1px solid #58595b; color: inherit; text-align: right; }

/*media queries*/

/* ----------- iPad mini ----------- */
@media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px) 
  and (orientation: portrait) {
	.web{display: block; visibility: visible;}
	.mob{display: none; visibility: hidden;}
	.navbar-brand > img {width: 90px;}
	.navbar.navbar-dark ul li {margin: 0 5px;}
	.navbar.navbar-dark ul li.signin a {padding-right: 20px !important;padding-left: 20px !important;}
	.about-us .banner {min-height: 30vh;}
	.about-us .banner .title {font-size: 25px;}
}

/* Portrait and Landscape */
@media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px) {
	.web{display: block; visibility: visible;}
	.mob{display: none; visibility: hidden;}
	/*general*/
	.container-content {width: 90%;}
	.navbar-dark .navbar-nav {float: none; width:100%; margin-left: 4% !important; margin: 0;}
	.navbar-dark .container {width: 90%;}
	/*.navbar-collapse {position: absolute; margin-left: 100px; width: 100%;}
	.navbar-collapse .nav {position: absolute; margin-left: 100px; width: 100%;}*/

	/* nav-menu-cart */
	.cbp-spmenu-right {display:none; visible:hidden}
	.cbp-spmenu h3 {margin-top: 0px;}
	.cbp-spmenu-right.cbp-spmenu-open {display:block !important; visible:visible;}

	.navbar-nav .open .dropdown-menu {position: absolute;}
}

@media (max-width: 767px){
	.navbar-nav .open .dropdown-menu {right: 0; position: absolute;margin-left: -129px; background-color: #fff;}
	.about-us .banner {min-height: 30vh;}
	.container-content { width: 100%;}

	/*cart*/
	.cart-checkout .grand-total, .cart-checkout .amount {font-size: 16px;}
}
/* ----------- iPhone 6+ ----------- */

/* Landscape */
@media only screen 
  and (min-width: 414px) 
  and (max-width: 736px)  { 
	.mob{display: block; visibility: visible;}
	.web{display: none; visibility: hidden;}
	.about-us .banner .title {font-size: 25px;}
	.container-content { width: 100%;}
	.about-us .details {font-size: 15px;}
	.signup-login {min-height: 100vh;}
	.site-login .btn, 
	.site-request-password-reset .btn, 
	.site-reset-password .btn, 
	.site-signup .btn, 
	.user-delivery-information-form .btn {width: auto;}
	
}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-width: 375px) 
  and (max-width: 667px)  { 
	.mob{display: block; visibility: visible;}
	.web{display: none; visibility: hidden;}
	.about-us .banner .title {font-size: 20px;}
	.container-content { width: 100%;}
	.about-us .details {font-size: 15px;}
	.signup-login {min-height: 100vh;}

	/*transaction-history*/
	.transaction-history .name {font-size: 16px !important;}
	.transaction-history .date-price, .transaction-history .small { font-size: 14px !important;}
}


/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-width: 320px) 
  and (max-width: 568px){
	.mob{display: block; visibility: visible;}
	.web{display: none; visibility: hidden;}
	.about-us .banner .title {font-size: 20px;}
	.container-content { width: 100%;}
	.about-us .details {font-size: 15px;}
	.signup-login {min-height: 100vh;}
	.transaction-history .tab a {padding: 5px 20px;}
}

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-width: 100px) 
  and (max-width: 480px) {
  	/*general*/	
	.mob{display: block; visibility: visible;}
	.web{display: none; visibility: hidden;}
	.container-content {width: auto;}
	.title {font-size: 20px; }
	.vertical-center {display: inline;}
	
	.signup-login {min-height: 100vh;}
	.site-login .btn, 
	.site-request-password-reset .btn, 
	.site-reset-password .btn, 
	.site-signup .btn, 
	.user-delivery-information-form .btn {width: auto;}

	.navbar-nav form {padding: 0px 10px 0px 15px;font-size: 11px;}
	.user-games .mainImg {width: 100%; height: 120px; padding: 0;}
	.list-delivery table td {padding: 5px !important;}

	/*margin*/
	.mar-40T{margin-top: 20px;}
	.mar-40B{margin-bottom: 20px;}
	.mar-40TB{margin-top: 20px; margin-bottom: 20px;}

	/*login*/
	.site-login .right {padding: 0px;border-right: none;border-bottom: 1px solid #fff;}
	.site-login .title,.site-login .subtitle {text-align: center;}
	.site-login .left {padding: 0px; margin-top: 20px;text-align: left;}
 	.site-login .left .title.semibold {text-align: left !important;}
		
	/* nav-menu-cart */
	.cbp-spmenu-right {right: -380px; z-index: 1;top:50px;width:90%; display:none; visible:hidden}
	.cbp-spmenu h3 {margin-top: 0px;}
	.cbp-spmenu-right.cbp-spmenu-open {display:block !important; visible:visible;}

	/*about-us*/
	.about-us .details {font-size: 14px; line-height: 24px; text-align: left;}
	.about-us .banner, .digital-contents-services .banner {min-height: 200px;}
	.about-us .banner .title, .digital-contents-services .banner .title {font-size: 16px;}
	.trending-now .see-more {margin: 5px 0; font-size:12px;}
	
	/*user-reload*/
	.user-reload {font-size: inherit;}

	/*item-view*/
	.item-view .brand { font-size: 13px; }
	.item-view .details {font-size: 14px; line-height: 24px; text-align: left;}
	.item-listing .mar-30TB {margin-top: 10px; margin-bottom: 10px;}
	.item-listing .filter {text-align: left !important;}

	/*transaction-history*/
	.transaction-history .tab a {padding: 5px 20px;}
	.transaction-history img {padding: 0 0 10px; height: 100% !important;}
	.transaction-history .name {font-size: 15px;}
	.transaction-history .date-price, .transaction-history .small { font-size: 13px;}
	.transaction-history .list-item .divider {padding: 0 10px;}	

	/*footer*/
	.footer-copyright {font-size: 9px;}
	.footer-copyright .divider {padding-left: 5px;padding-right: 5px;}
	.footer-copyright .copyright {padding: 0; display: block;}
	

	
}