/* Main Style For AsiaHotelGroup */
/* Header Section */

	@-moz-keyframes appear {
	15% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
	}
	@-o-keyframes appear {
	15% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
	}
	@keyframes appear {
	15% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
	}
/*
@media all and (min-width: 900px) {
  .pen {
    max-width: 100%;
  }
  .element {
    width: 286px;
  }
  .element.inactive {
    width: 246px;
  }
  .element.active {
    width: 366px;
  }
  .stage {
    max-width: 100%;
    height: 600px;
  }
}
@media all and (max-width: 660px) {
  .pen {
    max-width: 335px;
  }
  .element {
    width: 101px;
  }
  .element.inactive {
    width: 61px;
  }
  .element.active {
    width: 181px;
  }
  .stage {
    max-width: 335px;
  }
}
*/
	body {
		font-family: kanit !important;
		width: 100% !important;
		max-width: 1680px;
		margin-left: auto;
		margin-right: auto;
	}
	
	.full-width {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	}
		
	.display-slide {
		text-align:center;
	}	
		
	.display-slide img{
		display:inline-block;
		max-width: 320px;
	}	
		
	.pen {		
		text-align:center;
		width: 100%;
		margin: 0 auto;
		opacity: 0;
		position: relative;
		-webkit-transition: all 0.25s ease-in-out;
		-moz-transition: all 0.25s ease-in-out;
		-ms-transition: all 0.25s ease-in-out;
		-o-transition: all 0.25s ease-in-out;
		transition: all 0.25s ease-in-out;
		-webkit-animation: 1s appear 1 forwards;
		-moz-animation: 1s appear 1 forwards;
		-o-animation: 1s appear 1 forwards;
		animation: 1s appear 1 forwards;
	}	
		
	.stage {			
		display: in-line;
		/*width: 1680px;*/
		height: 333px;
		-webkit-transition: all 0.25s ease-in-out;
		-moz-transition: all 0.25s ease-in-out;
		-ms-transition: all 0.25s ease-in-out;
		-o-transition: all 0.25s ease-in-out;
		transition: all 0.25s ease-in-out;
	}
	.element {
		background: green;
		width: 30%;
		-webkit-transform-origin: 50% 50%;
		height: inherit;
		margin: 0 7px 0 0;
		display: inline-block;
		-webkit-transition: all 0.25s ease-in-out;
		-moz-transition: all 0.25s ease-in-out;
		-ms-transition: all 0.25s ease-in-out;
		-o-transition: all 0.25s ease-in-out;
		transition: all 0.25s ease-in-out;
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		-o-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	.element.active {
		width: 80%;
		-webkit-transition: all 0.25s ease-in-out;
		-moz-transition: all 0.25s ease-in-out;
		-ms-transition: all 0.25s ease-in-out;
		-o-transition: all 0.25s ease-in-out;
		transition: all 0.25s ease-in-out;
	}
	.element.inactive {			
		width: 5%;
		-webkit-transition: all 0.25s ease-in-out;
		-moz-transition: all 0.25s ease-in-out;
		-ms-transition: all 0.25s ease-in-out;
		-o-transition: all 0.25s ease-in-out;
		transition: all 0.25s ease-in-out;
		opacity: 0.4;
	}
	.element.first {
		background: url('http://asiagrouphotel.com/img/500/Poonpech_2017_071.jpg') 40% 0 no-repeat;
		background-size: cover;
	}	
	.element.second {
		background: url('http://asiagrouphotel.com/img/500/Massage_Spa_03.jpg') 40% 0 no-repeat;
		background-size: cover;
	}	
	.element.third {
		background: url('http://asiagrouphotel.com/img/500/Poonpech_2017_123.jpg') 40% 0 no-repeat;
		background-size: cover;
	}
	.element.sup-first {
		background: url('http://asiagrouphotel.com/img/500/Superior-1.jpg') 40% 0 no-repeat;
		background-size: cover;
	}
	.element.sup-second {
		background: url('http://asiagrouphotel.com/img/500/Superior-4.jpg') 40% 0 no-repeat;
		background-size: cover;
	}
	.element.sup-third {
		background: url('http://asiagrouphotel.com/img/500/Superior-5.jpg') 40% 0 no-repeat;
		background-size: cover;
	}	
	
	.element.Rest-first {
		background: url('http://asiagrouphotel.com/img/500/64871.jpg') 40% 0 no-repeat;
		background-size: cover;
	}
	
	.element.Rest-second {
		background: url('http://asiagrouphotel.com/img/500/64847.jpg') 40% 0 no-repeat;
		background-size: cover;
	}
	
	.element.Rest-third {
		background: url('http://asiagrouphotel.com/img/500/64863.jpg') 40% 0 no-repeat;
		background-size: cover;
	}
	
	.hidden {
		display: none !important;
	}
	
	.above-header {
		display:none;
	}
		
	#header {
		padding-top: 20px;
		margin-bottom: 30px;
	}

	#header .logo {
		float: left;
		margin-bottom: 0;
		font-size: x-small;
	}
	
	#header .logo img {
		position: relative;
		z-index: 6;
	}
	
	.lang-select {
		position: absolute;
		top: 24px;
		right: 15px;		
		overflow: hidden;
		background-color: #fff;
		font-style: italic;
		font-size: 11px;
	}
	
	.lang-select ul {
		text-align: right;
		padding: 5px 0 5px 0;
		display: none;
	}
	
	.lang-select .selected {
		line-height: 30px;
		display: inline-block;
	}
	
	.lang-select .selected a {
		position: relative;
		padding-right: 20px;
	}
	
	.lang-select li {
		line-height: 22px;
	}	
	
	.lang-select a {
		padding-right: 20px;
		color: #002a34;
	}
	
	#main-menu {		
		background: #002a34;
		position: relative;		
	}
	
	#main-menu .menu-bar {
		padding: 1px;
	}
	
	#main-menu .level-1 {
		margin-left: -35px;
	}
	
	#main-menu .level-1 li {
		padding-left: 0;
	}
	
	#main-menu .level-1 li a:active, #main-menu .level-1 li a:focus {
		outline: 0;
	}
	
	#main-menu .level-1 li a .constance-icon-menu {
		font-size: 20px;
		color: #4fbbbd;
		vertical-align: text-top;
		margin-right: 5px;
		margin-top: 7px;
	}
	
	#main-menu .menu-mobile {
		background: #002a34;
		position: absolute;
		width: 100%;
		z-index: 100;
		display: none;
	}
	
	#main-menu .menu-mobile .col_mobile {
		box-sizing: border-box;
		width: 100%;
		float: left;
	}
	
	#main-menu .menu-mobile .panel {
		min-height: 140px;
		background-position-y: -50px;
		background-position-x: -265px;
		background: #002a34;
		margin-top: 20px;
	}
	
	#main-menu .menu-mobile .panel ul {
		list-style: none;		
	}
	
	#main-menu .menu-mobile .panel ul li a {
		line-height: 150%;
		text-align: left;
		font-size: 17px;
		color: #fff;
	}
	
	#main-menu .level-1 li.reservation {
		padding: 7px;
		height: 40px;
		min-width: 120px;
		text-align: center;		
	}
	
	#main-menu .level-1 li.reservation a {
		padding-left: 10px;
		padding-right: 10px;
		color: #fff;
		text-decoration: none;
	}
	
	#main-menu .reservation {
		position: absolute;
		z-index: 3;
		right: 0;
		top: 0;
		font-size: 16px;
		background-color: #ff6464;
	}
	/* Reservation-menu Section */
	#main-menu .reservation-mobile{
		background: #002a34;
		position: absolute;
		width: 100%;
		z-index: 100;
		display: none;
	}
	
	#main-menu .reservation-mobile .col-reservation {
		box-sizing: border-box;
		width: 100%;
		float: left;
	}
	
	#main-menu .reservation-mobile .panel {
		min-height: 200px;
		background-position-y: -50px;
		background-position-x: -265px;
		background: #002a34;
		margin-top: 20px;
		/*text-align: center;*/
	}
	
	#main-menu .reservation-mobile .panel .reserv-label {
		color:#ff6464;
		
	}
	
	#main-menu .reservation-mobile .panel .reserv-input {
		border-style: solid 2px;
		border-color: #ff6464;
		/*width: 60%;
		margin: 0 auto;*/
	}
	
	#main-menu .reservation-mobile .panel .findroom {
		color: #fff;
		text-align: center;
		width: 50%;
		border-style: solid 2px;
		background-color: #ff6464;
		font-size: 25px;
	}
	
	#main-menu .reservation-mobile .panel ul {
		list-style: none;		
	}
	
	#main-menu .reservation-mobile .panel ul li a {
		line-height: 150%;
		text-align: left;
		font-size: 17px;
		color: #fff;
	}
	
	#main-menu .reservation a:after {
    content: "";
    display: block;
    border-top: 20px solid #ff6464;
    border-right: 60px inset transparent;
    border-left: 60px inset transparent;
    position: absolute;
    left: 0;
    right: 0;
    top: 39px;
    z-index: 2;
	}
	/* End-Reservation */
	.reponsive-image {
		max-width: 100%; 
		display:block; 
		height: auto;
	}
	
	.header-room {
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding: 18px 15px;
		width: auto!important;
		line-height: 1;
		width: 100%;
		padding-left: 15%;
		padding-right: 45%;
	}
	
	.header-relative {
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding: 18px 15px;
		width: auto!important;
		line-height: 1;
		width: 100%;
	}
	
	.header-relative-left {
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding: 18px 15px;
		width: auto!important;
		line-height: 1;
		width: 100%;
	}
	
	.titles-container {
		background-color: #002a34;
		color: #fff;
		letter-spacing: .08em;
		text-align: center;
		padding: 3px 0 3px 0;
	}
	
	.inline {
		display: inline-block;
		color: #4fbbbd;
		margin-left: 15px;
		margin-right: 15px;
	}
	
	.panel-asiagroup {
		border-color: #002a34;
	}
	
	.panel-asiagroup>.panel-heading {
		color: #fff;
		background-color: #002a34;
		border-color: #002a34;
	}
	
	/* Footer */
	
	#footer {
		padding: 9px 0 5px;
		margin-top: 160px;
		background-color: #002a34;
		background-size: cover;
		background-position: center center;
		color: #fff;
		position: relative;
	}
	
	#footer .container {
		position: relative;
	}
	
	#footer .mobile-links {
		text-align:center;
		margin-top: -65px;
	}
	
	#footer .mobile-links::before {
		content: "";
		display: block;
		background-color: #002a34;
		z-index: -1;
		position:absolute;		
		height: 125px;
		width: 125px;
		left: 50.5%;
		top: -16%;
		margin-left: -64px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	#footer.collapsed .separator {
		margin-top: 0;		
	}
	
	#footer .separator {
		width: 90%;
		margin-top: 25px;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		/* border-bottom: 2px solid #4fbbbd; */
	}
	
	#footer .separator .social .hn span {
		background: #002a34;
		padding: 0 16px 0 19px;
		font-size: 16px;
	}
	
	#footer .separator .social .hn:after {
		content: "";
		display: block;
		height: 2px;
		background-color: #d2c5a0;
		margin-top: -12px;
	}
	
	#footer .col dl, #footer .col ul {		
		list-style: none;
		margin: 0;
		padding: 0;
		margin-top: 15px;
	}
	
	#footer .social-links li:not(:last-of-type) {
		padding-right: 26px;
	}
			
	#footer .col li {
		margin-bottom: 6px;
	}
	
	#footer .social-links a {		
		color: #4fbbbd;
		font-size: 25px;
	}
	
	#footer .recommended {
		border-top: 2px solid #fff;
		border-bottom: 2px solid #4fbbbd;
		text-align: center;
		padding: 27px 0;
		position: relative;
		margin-bottom: 20px;
		margin-top: 20px;
	}
	
	#footer .recommended .hn {		
		position: absolute;
		left: 0;
		right: 0;
		top: -13px;
		margin: auto;
	}
	
	#footer .recommended .hn span {
		background: #002a34;
		padding: 0 20px;
		font-size: 12px;
	}
	
	#footer .recommended .list-inline {
		display: table;
		margin-left: auto;
		margin-right: auto;
	}
	
	#footer .recommended .list-inline li {
		display: block;
		margin-bottom: 10px;
	}
	
	#footer .recommended .list-inline li a{
		color: #fff;
	}
	
	#footer .hidden-mobile {
		display:none;
	}
	
	.bg-welcome  {
		position: relative;
		background-size: cover;		
		height: 280px;
		background-image:url(http://asiagrouphotel.com/img/asiagroup_greeting.jpg)
	}
	
	.bg-accommodations  {
		position: relative;
		background-size: cover;		
		height: 280px;
		background-image:url(http://asiagrouphotel.com/img/asiagroup_room.jpg)
	}
	
	.bg-room {
		margin-top: 25px;
		background-size: cover;		
		height: 280px;
		background-image:url(http://asiagrouphotel.com/img/asiagroup_room.jpg)
	}
	
	.bg-facilities {
		margin-top: 25px;
		background-size: cover;		
		height: 280px;
		background-image:url(http://asiagrouphotel.com/img/fitness.jpg)
	}
	
	.room-detail {
		float: left;
		max-width: 45%;	
		margin-left: 10px;
	}
	
	.room-specific {
		float: left;
		max-width: 45%;
		margin-left: 20px;
		font-size: 11px;
	}
	
	.bg-superior {		
		background-size: cover;	
		background-position: center;
		margin-top: -55px;
		margin-bottom: 20px;
		height: 300px;
		background-image:url(http://asiagrouphotel.com/img/1080/Superior-3.jpg)
	}
	
	.bg-deluxe {
		background-size: cover;	
		background-position: center;
		margin-top: -55px;
		margin-bottom: 20px;
		height: 300px;
		background-image:url(http://asiagrouphotel.com/img/1080/Deluxe-Premium-1.jpg)
	}
	
	.bg-deluxe-premium {
		background-size: cover;	
		background-position: center;
		margin-top: -55px;
		margin-bottom: 20px;
		height: 300px;
		background-image:url(http://asiagrouphotel.com/img/1080/Deluxe-Premium-3.jpg)
	}
	
	.bg-executive {
		background-size: cover;	
		background-position: center;
		margin-top: -55px;
		margin-bottom: 20px;
		height: 300px;
		background-image:url(http://asiagrouphotel.com/img/1080/Executive-Suite-3.jpg)
	}
	
	.bg-grand {
		background-size: cover;	
		background-position: center;
		margin-top: -55px;
		margin-bottom: 20px;
		height: 300px;
		background-image:url(http://asiagrouphotel.com/img/1080/Grand-Suite-1.jpg)
	}
	
	.header-square::before {
		content: "";
		display: block;
		background-color: #002a34;
		z-index: -1;
		position:absolute;		
		height: 125px;
		width: 125px;
		left: 50%;
		top: -16%;
		margin-left: -64px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	.header-square {
		margin-top: 50px;
		position: relative;
		text-align: center;
		margin-left: auto;
		margin-right: auto;		
		color: #fff;
		z-index: 1;
	}
	
	#slideshow {
		position: relative;
		box-shadow: 0 0 20px rgba(0,0,0,0.4);
		width: 100%;
		overflow: hidden;
		
	}
	
	#slideshow div:not(:first-child) {
		position: absolute
	}
	
	input.flat, textarea.flat {
		-webkit-transform-style: flat !important;
	}
	
	.submit-color {
		background-color: #002a34;
		color: white;
	}
	
	.submit-color:active {
		color: white;
	}
	
	.submit-reserv {
		background-color: #ff6464;
		color: white;
	}
	
	.submit-reserv:active {
	
	}
	
	.img-row img {
		width: 100%;
	}
	
	.imgBorder {
		padding: 15px;
		background-color: white;
		box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
		-moz-box-shadow: 0 1px 2px rgba(34,25,25,0.4);
		-webkit-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
	}
	
	
@media (min-width: 768px) {
/* s-768 */
	
	.pen {
		max-width: 1200px;
	}
	.element {
    
	}
	.element.inactive {
		width: 100px;
	}
	.element.active {
		width: 500px;
	}
	.stage {
    
	}

	.above-header {
		position: fixed;
		display:block;
	}
		
	.above-header {
		background: #002a34;		
		width: 100%;
		z-index: 900;
		max-width: 1680px;
	}
	
	.above-header .phone-numbers {
		float: left;
		text-align: left;
		font-size: large;
		margin-top: 8px;
	}
	
	.above-header .buttons {
		float: right;
		text-align: left;
	}
	
	.above-header .button a {
		border-left: 1px solid #333;
		color: #fff;
		display: block;
		font-family: 'Kanit','NeutraText-Bold';
		font-size: 18px;
		height: 44px;
		line-height: 44px;
		padding: 0 30px;
		text-transform: uppercase;
		text-decoration: none;
	}
	
	.above-header #reserv-desktop {
		
	}
	
	.above-header .button a:hover {		
		color: #ff6464;		
	}
	
	.above-header .button a.blue {
		transition: all 0.25s ease-in-out;
		background: #ff6464;
		border-left: none;
		position: relative;
	}
		
	.above-header .button a.blue:hover {
		background: #fff;
		text-decoration: none;
	}
	
	.above-header .buttons .button a:after {
    content: "";
    display: block;
    border-top: 15px solid #ff6464;
    border-right: 75px inset transparent;
    border-left: 75px inset transparent;
    position: absolute;
    left: 0;
    right: 0;
    top: 44px;
    z-index: 2;
	}
	
	.above-header .buttons .button a:hover:after {
		border-top: 15px solid #fff;		
	}
	
	#main-menu {
		position: relative;
		z-index: 100;
	}

	#main-menu .menu-bar {
		background: #002a34;
		padding: 15px 15px 15px 100px;
	}
	
	#main-menu .level-1 {
		width: 93%;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	#main-menu .level-1 li {
		display: table-cell;
		padding: 0 15px 0 15px;
		font-family: 'Kanit',"Gill Sans Nova Book","Gill Sans Nova Medium",serif;
		text-transform: uppercase;
		font-style: normal;		
	}
	
	#main-menu .level-1 li a{		
		display: inline-block;
		padding: 12px 0 10px;
		color: #fff;
		letter-spacing: 2px;		
	}
	
	#main-menu .level-1 li a:hover{		
		color: #4fbbbd;	
		text-decoration: none;
	}
	
	#header {
		padding-top: 70px;
				
	}
	
	#header .logo {
		float: left;
		margin-bottom: 0;
		font-size: x-small;
	}
	
	.lang-select {
		position: absolute;
		top: 55px;
		float: right;
		margin-right: 150px;
		overflow: hidden;
		background-color: #fff;	
		font-size: 20px;
	}
	
	.lang-select ul {
		text-align: left;		
		display: none;
		margin-bottom: 0px;
		margin-top: -5px;
	}
	
	.lang-select .selected {
		line-height: 30px;
		display: inline-block;
	}
	
	.lang-select .selected a {
		position: relative;
		padding-right: 20px;
	}
	
	.lang-select li {
		line-height: 25px;
	}	
	
	.lang-select a {
		padding-right: 20px;
		color: #002a34;
	}
		
	#main-menu .menu-bar {
		background: #002a34;
	}
	
	#main-meun .level-1 {
	    float: right;
		padding-left: 7px;
	}
	
	#main-menu ul {		
		display: flex;
		justify-content: center;
	}
	
	#main-menu ul li {
		padding: 0 8px;
	}
	
	#main-menu .level-1 li:not(.no-bullet):after {
		content: "\b7";
		display: inline-block;
		color: #4fbbbd;
		margin-left: 14px;
	}
	
	#main-menu .lang-select {
		top: 0;
		font-size: 11px;
	}
	
	#main-menu .reservation-mobile .panel .findroom {		
		width: 30%;		
	}
	
	#main-menu .reservation-mobile {
		position: fixed;
		margin-top: -220px;
		max-width: 1680px;
	}
	
	#main-menu .reservation-mobile .col-reservation {
		padding-top: 100px;
	}
	
	.visible {
		display: none !important;
	}
	
	.hidden {
		display: table-cell !important;
	}

	.header-relative {
		padding-right: 50%;
		padding-left: 15%;
	}					
		
	.header-room {
		padding-right: 30%;
		padding-left: 15%;
		max-height: 98px;
	}
		
	.header-relative-left {
		padding-right: 15%;
		padding-left: 50%;
	}
	
	.inline {
		display: inline-block;
		color: #4fbbbd;
	}
	
	.room-display {
		min-height: 200px;
	}
	
	.row-content {
		padding-left: 54%;
	}
	
	.row-content-left {
		padding-left: 4%;
		padding-right: 54%;
	}
	
	.bg-welcome  {
		position: relative;
		background-size: cover;		
		height: 580px;
		background-image:url(http://asiagrouphotel.com/img/asiagroup_greeting.jpg)
	}
	
	.bg-accommodations  {
		position: relative;
		background-size: cover;		
		height: 650px;
		background-image:url(http://asiagrouphotel.com/img/asiagroup_room.jpg)
	}
	
	.bg-facilities {			
		height: 750px;	
		margin-top: 0px;
	}
	
	.bg-room {
		width: 450px;
		
		margin-top: -85px;
	}
	
	.bg-superior {				
		margin-top: -55px;		
	}
	
	.bg-deluxe {		
		margin-top: -55px;		
	}
	
	.bg-deluxe-premium {		
		margin-top: -55px;		
	}
	
	.bg-executive {		
		margin-top: -55px;		
	}
	
	.bg-grand {		
		margin-top: -55px;		
	}
	
	.header-square {
		margin-top: 20px;
	}
	
	.header-square::before {
		
	}
		
	#welcome {
		
	}
	
	#footer .separator {
		border-left: 2px solid #4fbbbd;
		padding-left: 40px;
	}
	
	#footer .separator {
		width: 30%;    
	}	
	
	#footer .col {
		display: table-cell;
		float: none;
	}
	
	#footer .col .hn {		
		margin-bottom: 20px;
	}	
	
	#footer .group {
		padding-left: 25%;
	}
	
	#footer .group ul li a {
		color: #fff;
	}
	
	#footer .separator .social .hn:after {
		content: "";
		display: none;
		height: 2px;
		background-color: #d2c5a0;
		margin-top: -12px;
	}
	
	#footer .recommended .hn span {		
		font-size: 18px;
	}
	
	#footer .recommended .list-inline li {	
		display: inline;
	}
	
	#footer .recommended .list-inline li:not(.no-bullet):after {	
		content: "\b7";
		display: inline-block;
		color: #4fbbbd;
		margin-left: 14px;
	}
	
	#footer .hidden-mobile {
		display:block;
	}	
}

@media (min-width: 1600px) {
	.room-display {
		min-height: 300px;
	}
}
/* End Header Section */