/*----------
	Theme Name: Prestige
	Start Date : 17-April-2017
	End Date : 
	Last change: 
	Version: 1.0
	Assigned to:
	Primary use:
	
----------*/

/* [Layout] */

/*----------
	
	## Font List
		- font-family: 'AleoRegular';
		- font-family: 'Exo 2', sans-serif;
		- font-family: 'Montserrat', sans-serif;
		- font-family: 'Open Sans', sans-serif;
		- font-family: 'Poppins', sans-serif;
		- font-family: 'Montserrat Alternates', sans-serif;
		- font-family: 'Raleway', sans-serif;
		- font-family: 'Lato', sans-serif;

	## Global
	
		- Padding/Margin
		- Section Padding
		
	## Site Header
	
		- Navigation Menu
			-- Nav Main
			-- Nav Header
			-- Nav Toggle
			-- Nav Switch
			-- Nav Items
			-- Nav Dropdown

	
	## Widgets
	
	## Responsive
	- Min Width : 992px & Max Width 1200px
	
	- Min Width : 992px
	
		## Navigation Menu
		- Nav Main
		- Nav Header
		- Nav Toggle
		- Nav Switch
		- Nav Items
		- Nav Dropdown
	
	* Responsive		
		- min-width: 1200
		- min-width: 992
		- min-width: 768
		- max-width: 1200
		- min-width: 992 to max-width: 1199		
		- max-width: 991
		- min-width: 768 to max-width: 991
		- max-width: 767
		- max-width: 639
		- max-width: 479
		
----------*/

/* ## Global ******************************************* */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans Lao", "Poppins", sans-serif;
  font-size: 14px;
  color: white;
  overflow-x: hidden;
}

@font-face {
  font-family: "AleoRegular";
  src: url("assets/fonts/AleoRegular.eot");
  src: url("assets/fonts/AleoRegular.eot") format("embedded-opentype"),
    url("assets/fonts/AleoRegular.woff2") format("woff2"),
    url("assets/fonts/AleoRegular.woff") format("woff"),
    url("assets/fonts/AleoRegular.ttf") format("truetype"),
    url("assets/fonts/AleoRegular.svg#AleoRegular") format("svg");
}

img {
  max-width: 100%;
  height: auto;
}
a {
  outline: 0 !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
span {
  word-wrap: break-word;
}

/* ########################################### MY CSS ############################################# */

/* menu item */
nav {
  height: 60px;
  display: flex;
  align-items: center;
}
ul.menu {
  display: flex;
  align-items: center;

  list-style: none;
  padding: 0 0;
}

ul.menu li {
  padding: 0 0;
  margin: 0 2rem;
}

ul.menu li a:link,
a:visited {
  color: black;
  padding: 4px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 28px;
  border-radius: 10px;
}
ul.menu li a:hover,
a:active {
  background-color: rgb(61, 61, 61);
  color: white;
}

ul.menu li i {
  padding-right: 10px;
  color: red;
  font-size: 24px;
}
/* menu item */

body {
  background-image: url("assets/images/wp2229510-black-and-gold-marble-wallpapers.jpg");
  /* background-image: url("assets/images/bb.png"),
    url("assets/images/footer-bg1.jpg"); */
    /* url("assets/images/slide-1.jpg"); */

  background-position: center;
}
/* top logo and name */
.toplogo img {
  width: 120px;
  height: 120px;
}
.textw {
  color: white;
  font-size: 5rem;
}
/* top logo and name */

.top-left {
  position: relative;
  z-index: 10;
}

.loginbox img {
  max-width: 300px;
  height: auto;
}

.chip-a img {
  width: 70px;
  height: 70px;
}

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

.topsvg img {
  width: 100px;
  height: 100px;
  margin: 1rem;
}

.laotext {
  font-family: "Noto Sans Lao";
}
.toppic p {
  font-size: 30px;
}
.toppic p:hover {
  background-color: #555;
}
.mainbgcolor {
  background-color: gold;
  background: linear-gradient(
    rgba(139, 75, 19, 1) 0%,
    rgba(192, 137, 54, 1) 9%,
    rgba(193, 142, 55, 1) 19%,
    rgba(255, 250, 174, 1) 42%,
    rgba(193, 142, 55, 1) 66%,
    rgba(125, 69, 0, 1) 83%,
    rgba(193, 142, 55, 1) 98%,
    rgba(193, 142, 55, 1) 100%
  );
  border: 1px solid black;
}
.my-carousel img {
  max-width: 350px;
  height: auto;
  border-image: linear-gradient(to right bottom, #8f6b29, #fde08d, #df9f28);
  border-width: 8px;
  border-style: solid;
  border-image-slice: 1;
}

.line {
  border-top: 0.5rem solid red;
  margin: 2rem 0;
}
.logogame-carousel img {
  max-width: 140px;
  height: 140px;
  border-image: linear-gradient(to right bottom, #8f6b29, #fde08d, #df9f28);
  border-width: 8px;
  border-style: solid;
  border-image-slice: 1;
}

.blog-carousel img {
  border-image: linear-gradient(to right bottom, #8f6b29, #fde08d, #df9f28);
  border-width: 8px;
  border-style: solid;
  border-image-slice: 1;
}
.team-carousel img {
  border-image: linear-gradient(to right bottom, #8f6b29, #fde08d, #df9f28);
  border-width: 8px;
  border-style: solid;
  border-image-slice: 1;
}
.tp-caption p {
  animation: color-change 1s infinite;
  text-shadow: 3px 3px 0 white, -1px -1px 0 white, 1px -1px 0 white,
    -1px 1px 0 white, 1px 1px 0 white;
}

@keyframes color-change {
  0% {
    color: red;
  }
  50% {
    color: blue;
  }
  100% {
    color: gold;
  }
}

.game-carousel img {
  border-image: linear-gradient(to right bottom, #8f6b29, #fde08d, #df9f28);
  border-width: 8px;
  border-style: solid;
  border-image-slice: 1;
}

/*###########################################################################################*/

.goldtext a {
  margin: 2rem 0;
  float: left;
  width: 100%;
  text-align: center;
  font-weight: 700;
  color: #000;
  font-size: 50px;
  line-height: 80px;

  /* background: #caae62; */
  background: -moz-linear-gradient(
    left,
    #caae62 0%,
    #eae0a5 21%,
    #f9f7c6 49%,
    #ecd68d 80%,
    #c19b50 100%
  );
  background: -webkit-linear-gradient(
    left,
    #caae62 0%,
    #eae0a5 21%,
    #f9f7c6 49%,
    #ecd68d 80%,
    #c19b50 100%
  );
  /* background: linear-gradient(to right,#caae62 0%,#eae0a5 21%,#f9f7c6 49%,#ecd68d 80%,#c19b50 100%); */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#caae62',endColorstr='#c19b50',GradientType=1);
}

.font-red {
  color: red;
}

.footerlogo img {
  width: 250px;
  height: 250px;
}

.gallery-content img {
  border: 5px solid #555;
}

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

/* ########################################### MY CSS ############################################# */

/* - Padding/Margin */
.no-padding {
  padding: 0;
}
.no-left-padding {
  padding-left: 0;
}
.no-right-padding {
  padding-right: 0;
}
.no-top-padding {
  padding-top: 0;
}
.no-bottom-padding {
  padding-bottom: 0;
}
.no-margin {
  margin: 0;
}
.no-left-margin {
  margin-left: 0;
}
.no-right-margin {
  margin-right: 0;
}
.no-top-margin {
  margin-top: 0;
}
.no-bottom-margin {
  margin-bottom: 0;
}

/* - Section Padding */
.section-padding {
  padding-top: 75px;
  padding-bottom: 75px;
}
.padding-10 {
  padding-top: 5px;
  padding-bottom: 5px;
}
.padding-20 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.padding-30 {
  padding-top: 15px;
  padding-bottom: 15px;
}
.padding-40 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.padding-50 {
  padding-top: 25px;
  padding-bottom: 25px;
}
.padding-60 {
  padding-top: 30px;
  padding-bottom: 30px;
}
.padding-70 {
  padding-top: 35px;
  padding-bottom: 35px;
}
.padding-80 {
  padding-top: 40px;
  padding-bottom: 40px;
}
.padding-90 {
  padding-top: 45px;
  padding-bottom: 45px;
}
.padding-100 {
  padding-top: 50px;
  padding-bottom: 50px;
}
.vertical_middle {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.nav_absolute {
  position: absolute;
}
.align_left {
  text-align: left;
}
.align_right {
  text-align: right;
}
.align_center {
  text-align: center;
}

/* - OW pull-left/pull-right */
.ow-pull-left {
  float: left;
}
.ow-pull-right {
  float: right;
}

.main-container {
  width: 1920px;
  max-width: 100%;
  margin: 0 auto;
}

/* ## Responsive ************************************************************************************** */

/*----------------------------------------------------
	* Responsive
------------------------------------------------------*/

/* - min-width: 1200 */
@media (min-width: 1200px) {
  .container {
    width: 1200px;
  }
}

/* - min-width: 992 */
@media (min-width: 992px) {
}

/* - min-width: 768 */
@media (min-width: 768px) {
}

/* - max-width: 1200px */
@media (max-width: 1200px) {
}

/* - Min Width : 992px & Max Width 1200px */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
}

/* - min-width: 992 to max-width: 1199 ########################################################################### */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .loginbox img {
    width: 200px;
    height: auto;
  }
  .toplogo img {
    width: 100px;
    height: 100px;
  }
  .textw {
    font-size: 4rem;
  }
  /* menu item */

  ul.menu li a:link,
  a:visited {
    font-size: 20px;
    padding: 7px 4px;
  }
  ul.menu li {
    margin: 2rem;
  }
  ul.menu li i {
    padding: 0 5px;
  }
  /* menu item */
}

/* - max-width: 991 */
@media (max-width: 991px) {
  nav {
    height: 80px;
  }
}

/* - min-width: 768 to max-width: 991 */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .loginbox img {
    width: 180px;
    height: auto;
  }

  /* menu item */

  ul.menu li a:link,
  a:visited {
    font-size: 20px;
    padding: 2px 2px;
  }
  ul.menu li {
    margin: 1rem;
  }
  ul.menu li i {
    padding: 0 28px;
  }
  /* menu item */
}

/* - max-width: 767 */
@media (max-width: 767px) {
  .loginbox img {
    width: 180px;
    height: auto;
  }
  /* menu item */

  ul.menu li a:link,
  a:visited {
    font-size: 18px;
    padding: 4px 4px;
  }
  ul.menu li {
    margin: 0.5rem;
  }
  ul.menu li i {
    padding: 0 32px;
  }
  /* menu item */
}
@media (max-width: 678px) {
  /* menu item */

  ul.menu li a:link,
  a:visited {
    font-size: 16px;
    padding: 4px 4px;
  }
  ul.menu li {
    margin: 0.5rem;
  }
  ul.menu li i {
    padding: 0 25px;
  }
  /* menu item */
  .goldtext a {
    font-size: 25px;
    line-height: 50px;
  }
}
@media (max-width: 566px) {
  /* menu item */

  ul.menu li a:link,
  a:visited {
    font-size: 14px;
    padding: 0px 0;
  }
  ul.menu li {
    margin: 0.3rem;
  }
  ul.menu li i {
    padding: 0 23px;
  }
  /* menu item */
}

/* -  max-width: 639 */
@media (max-width: 639px) {
  .loginbox img {
    width: 180px;
    height: auto;
  }
}

/* -  max-width: 479 */
@media (max-width: 479px) {
  /* -  img top slide */
  .loginbox img {
    width: 160px;
    height: auto;
  }

  ul.menu li a:link,
  a:visited {
    font-size: 14px;
    padding: 0px 0;
  }
  ul.menu li {
    margin: 0.2rem;
  }
  ul.menu li i {
    padding: 0 16px;
  }
  /* menu item */
  .goldtext a {
    font-size: 20px;
    line-height: 40px;
  }
  .toppic p {
    font-size: 18px;
  }
  .topsvg img {
    width: 60px;
    height: 60px;
    margin: 1rem;
  }
}
@media (max-width: 414px) {
  ul.menu li a:link,
  a:visited {
    font-size: 14px;
    padding: 0px 0;
  }
  ul.menu li {
    margin: 0.1rem;
    padding: 1px;
  }
  ul.menu li i {
    padding: 0 12px;
  }
  /* menu item */
  .logogame-carousel img {
    max-width: 120px;
    height: 120px;
  }
}
@media (max-width: 379px) {
  ul.menu li a:link,
  a:visited {
    font-size: 12px;
    padding: 0px 0;
  }
  ul.menu li {
    margin: 0.1rem;
  }
  ul.menu li i {
    padding: 0 12px;
  }
  /* menu item */
}

/* -  max-width: 371 */
@media (max-width: 379px) {
  /* -  img top slide */

  .loginbox img {
    width: 140px;
    height: auto;
  }
  ul.menu li a:link,
  a:visited {
    font-size: 12px;
    padding: 0px 0;
  }
  ul.menu li {
    margin: 0.1rem;
  }
  ul.menu li i {
    padding: 0 9px;
  }
  /* menu item */
}
@media (max-width: 334px) {
  /* -  img top slide */

  .loginbox img {
    width: 120px;
    height: auto;
  }
  ul.menu li a:link,
  a:visited {
    font-size: 10px;
    padding: 0px 0;
  }
  ul.menu li {
    margin: 0.1rem;
  }
  ul.menu li i {
    padding: 0 6px;
  }
  /* menu item */
  .logogame-carousel img {
    max-width: 100px;
    height: 100px;
  }
}

/* test */