/**
 * Main css stylesheet
 *
 **/

@font-face {
  font-family: 'Pro';
  src: url('../fonts/PSLKittithadaPro.eot?#iefix') format('embedded-opentype'),  
       url('../fonts/PSLKittithadaPro.woff') format('woff'), 
       url('../fonts/PSLKittithadaPro.ttf')  format('truetype'), 
       url('../fonts/PSLKittithadaPro.svg#PSLKittithadaPro') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'ProBold';
  src: url('../fonts/PSLKittithadaProBold.eot?#iefix') format('embedded-opentype'),  
       url('../fonts/PSLKittithadaProBold.woff') format('woff'), 
       url('../fonts/PSLKittithadaProBold.ttf')  format('truetype'), 
       url('../fonts/PSLKittithadaProBold.svg#PSLKittithadaProBold') format('svg');
  font-weight: normal;
  font-style: normal;
}

.text-bold {
    font-family: 'ProBold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

/**
 * Homepage 
 *========================== **/
html {
    height: 100%;
}
body {
    font-family: 'Pro', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-size: 20px;
    background-image: url(../images/bg-blur.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /*letter-spacing: 2px;*/
}
body.page-home {
    height: 100%;
    background-image: url(../images/bg-home-2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow-y: hidden;
}
.login-box {
    width: 30%;
    height: 88%;
    float: right;
    margin-top: 0;
    margin-right: 3%;
    background-color: #FFF;
    text-align: center;
    position: relative;
}
.login-box .logo {
    display: block;
    margin: 15% auto 0;
    width: 54%;
}
.login-box .abs {
    width: 100%;
    text-align: center;
}
.login-box .abs-bottom {
    bottom: 18px;
}
.login-box .abs-bottom img {
    width: 64%;
}
.login-box .table-contain {
    width: 100%;
    text-align: center;
    padding: 0 15%;
}
.login-box h2 {
    margin-top: 20%;
}
/*
.login-box.register-box h2 {
    margin-top: 12%;
}
*/
.contact-info {
    color: #FFF;
    position: absolute;
    bottom: -15px;
    right: 3%;
    font-size: 2.4em;
}
.contact-info big {
    font-size: 1.8em;
    letter-spacing: 5px;
    margin-left: 12px;
}
.ads-image {
    position: absolute;
    left: 30px;
    top: 30px;
}

/**
 * Main menu 
 *========================== **/
.main-menu {
    width: 100%;
    padding: 0;
    background-color: #FFF;
}
.main-menu .logo {
    display: inline-block;
    margin: 36px auto 24px;
}
.main-menu .logo img {
    width: 204px;
}
.main-menu hr {
    margin: 0;
}
.call-tel {
    font-size: 1.8em;
    letter-spacing: 2px;
    color: #cacaca;
    margin-top: 5px;
    display: block;
}
.call-tel span {
    color: #42c0d9;
}
.main-menu .btn {
    font-size: 1em;
    margin-top: 12px;
}

/**
 * Form 
 *========================== **/
.form-login .form-group {
    padding: 0 25%;
}
.form-control {
    font-size: 1em;
}
.form-atmoz .form-control {
    border-radius: 0;
    padding: 20px;
    font-size: 1.2em;
}
.form-login .form-group.list-button {
    margin-top: 6%;
    padding: 0px 18%;
    overflow: hidden;
}
.form-atmoz .btn,
.form-atmoz a.btn {
    padding: 4px 0;
    width: 140px;
}
.form-atmoz .form-group.list-button span {
    margin-top: 10px;
    display: inline-block;
}
.form-atmoz select {
    width: 100%;
    border-radius: 40px;
    padding: 5px 15px;
    color: #333;
}
.form-atmoz select:focus {
    outline: none;
}
.form-register {
    padding: 0 12%;
}
.select-wrap {
    width: 480px;
    margin: auto;
}
.form-register .form-group.list-button {
    margin-top: 12%;
}
p.error-form {
    margin: 0 auto;
}

/**
 * Link, Button 
 *========================== **/
a,
a:link,
a:focus,
a:visited,
.link {
    color: #01b6d3;
    text-decoration: none;
}
.btn {
    font-size: 1.2em;
}
.link.link-danger {
    color: #f27d83;
}
a.link-white {
    color: #FFF;
    font-weight: bold;
    font-size: 1.2em;
}
.btn,
a.btn {
    padding: 4px 46px;
    color: #FFF;
}
.btn-blue {
    background-color: #01b6d3;
}
.btn-pink {
    background-color: #7A5E57;
}
.btn-left {
    float: left;
}
.btn-right {
    float: right;
}
.form-payment .btn-atmoz-large,
.form-payment a.btn-atmoz-large {
    font-family: 'ProBold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    width: 100%;
    font-size: 1.4em;
    padding: 10px 0;
    border-radius: 12px;
}

/**
 * Content 
 *========================== **/
/** Reserve room **/
.content {
    color: #FFF;
}
.content header h1 {
    text-transform: uppercase;
    font-size: 2em;
    margin: 10% auto 4%;
}
.status-color {
    width: 32px;
    height: 32px;
    border-radius: 50% 50%;
    display: inline-block;
    position: relative;
    top: 10px;
    margin-right: 8px;
}
.color-green { background-color: #54D55E;  }
.color-orange { background-color: #E5DD4E; }
.color-pink { background-color: #D55554; }

.text-green { color: #54D55E; }
.text-orange { color: #E5DD4E; }
.text-pink { color: #D55554; }

.digit-result {
    font-size: 3.2em;
    line-height: 1em;
}
.compass {
    position: absolute;
    top: -30px;
    left: 0;
    width: 48px;
}

.room-status-info {
    width: 40%;
    float: right;
    border-right: 1px solid rgba(255,255,255,0.3);
}
.room-status-info ul li {
    margin-right: 8%;
}
.room-status-result {
    width: 60%;
    float: right;
    padding-left: 10%;
}
.room-status-result ul li {
    margin-right: 18%;
}
.content-title {
    background-image: url(../images/title-bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 460px;
    height: 68px;
    padding: 20px 0 0 70px;
}
.marB-section.plan-section {
    margin-bottom: 15%;
}
.plan-section .content-title {
    margin-bottom: 12%;
}

/** Payment **/
.content.payment,
.content.reserve-howto {
    margin-top: 5%;
}
.room-preview img {
    margin: 0 auto;
    display: block;
}
.room-preview img:nth-of-type(1) {
    width: 58%;
}
.room-preview img:nth-of-type(2) {
    width: 60%;
    margin: 80px auto 50px;
}
.room-detail .content-title {
    background-image: url(../images/title-bg-green.png);
    display: block;
    width: 245px;
    height: 52px;
    position: relative;
    padding: 15px 0 0 32px;
}
.round-box {
    background-color: #FFF;
    border-radius: 16px;
    color: #000;
    letter-spacing: 1px;
    overflow: hidden;
}
.detail-table {
    width: 100%;
    margin: 20px auto;
}
.detail-table tr td {
    width: 50%;
    padding-top: 1px;
    padding-bottom: 1px;
}
.detail-table tr td:nth-of-type(1) {
    padding-right: 5px; 
    padding-left: 20px;
}
.detail-table tr td:nth-of-type(2) {
    text-align: right;
    padding-left: 5px;
    padding-right: 20px;
}
.round-box h3 {
    color: #FFF;
    margin: 0;
    text-align: center;
    padding: 12px 0;
}
.round-box.blue h3 {
    background-color: #01b6d3;
}
.round-box.pink h3 {
    background-color: #7A5E57;
}
.round-box.pink big {
    font-size: 2.4em;
    font-weight: bold;
}

/** Room preview **/
.room-list {
    
	display: none;
}
.room-type {
    
	display: none;
}


.room-box {
    text-align: center;
    margin-bottom: 80px;
	display: block;
}
.room-box .room-preview {
    width: 70%;
    margin: 0 auto;
    
}
.room-name {
    font-size: 2em;
}
.plan-section {
    padding: 0;
}
.room-box table {
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.2);
}
.room-box table tr:nth-of-type(1) td {
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding: 10px 0;
    font-size: 1.4em;
}
.room-box table tr:nth-of-type(2) td {
    padding: 10px 0 20px;
}
.room-box .btn {
    width: 80%;
    padding: 8px 0;
    font-size: 1.4em;
}
.round-box.pink {
    margin-top: 20px;
}

.logo-asset {
    width: 130px;
    height: 120px;
    background-color: #fff;
    float: left;
    box-shadow: 0px 5px 15px rgba(0,0,0,0.2);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    line-height: 120px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 30px;
    margin-right: 30px;
}


/**
 * Footer
 *========================== **/
.main-footer {
    background-color: #282828;
    color: #FFF;
    margin-top: 120px;
}
.main-footer .container {
    padding: 50px 15px 80px;
}
.tel-big {
    font-family: 'ProBold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    color: #00b7d3;
    font-size: 3.2em;
    display: block;
    position: relative;
    top: -15px; 
}
.condition-text {
    font-size: 0.86em;
    line-height: 1.3em;
}
.contact-info a {
    color: #FFF;
}

/**
 * Digit
 **/
.digit-countdown {
    position: absolute;
    left: 30px;
    bottom: 20px;
    z-index: 100;
    background-color: #7A5E57;
    padding: 30px 50px;
    color: #FFF;
}
.digit-countdown ul {
    margin: 0;
    padding: 0;
}
li.digit-box {
    background-color: rgba(255,255,255,0.2);
    text-align: center;
    width: 72px
}
li.digit-box small {
    display: block;
}
li.digit-box big {
    font-size: 2.4em;
    line-height: 1.2em;
}
.digit-countdown li b {
    font-size: 1.4em;
    position: relative;
    bottom: 20px;
    margin-right: 15px;
}

body.countdown {
    background-image: url(../images/bg-home-countdown.jpg);
}
.countdown .digit-countdown {
    position: relative;
    left: 0;
    bottom: 0;
    text-align: center;
    margin: 0 auto 40%;
    background-color: #1063a7;
}
.countdown li.digit-box {
    background-color: #01B6D3;
}
.countdown .logout {
    position: fixed;
    top: 0;
    right: 20%;
    z-index: 100;
    background-color: #1063a7;
}
.online-logo {
    margin-top: 5%;
}
.countdown .marT {
    margin: 18% auto 15px;
    text-align: center;
    font-weight: bold;
    font-size: 2em;
}

/**
 * Alert
 *========================== **/
.alert-success-atmoz {
    font-family: 'ProBold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    background-color: #2db972;
    color: #FFF;
    text-align: center;
    margin-bottom: 50px;
    padding-top: 24px;
    padding-bottom: 24px;
}
.alert-warning-atmoz {
    font-family: 'ProBold', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    background-color: #ff906d;
    color: #FFF;
    text-align: center;
    margin-bottom: 50px;
    padding-top: 24px;
    padding-bottom: 24px;
}

/**
 * Helper 
 *========================== **/
.table-contain {
    display: table;
    height: 100%;
}
.table-cell-middle {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}
.abs {
    position: absolute;
}
.abs-top {
    top: 0;
}
.abs-bottom {
    bottom: 0;
}
.marB-section {
    margin-bottom: 7%;
}
.marT-small {
    margin-top: 50px;
}
.marT-center {
    margin-top: 80px;
    margin-bottom: 80px;
}
.marB-small {
    margin-bottom: 50px;
}
.red {
    color: #e8615e;
}
.bg-orange {
    background-color: #ff906d;
}
.bg-red {
    background-color: red;
}
.bg-yellow {
    background-color: yellow;
}
.bg-green {
    background-color: #38d530;
}
.pos-relative {
    position: relative;
}
.marT10per {
    margin-top: 10%;
}

.bg-2 {
    background-color: red;
}
.bg-1 {
    background-color: yellow;
}
.bg-0 {
    background-color: #38d530;
}

.room-reserving {
    float: right;
    text-align: right;
    margin-top: 30px;
    background-color: rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 8px;
}
.room-reserving ul {
    list-style: none;
}

.form-fill-account {
    width: 540px;
    margin: 3% auto;
    overflow: hidden;
    background-color: #FFF;
    padding: 30px;
    color: #000;
    border-radius: 6px;
}
.fill-account header {
    margin-top: 5%;
}
.form-fill-account .text-warning {
    display: block;
    color: red;
    margin-top: 15px;
}