@font-face { font-family: CSChatThai; src:url("../fonts/CSChatThai.ttf") format("truetype"); }
@font-face { font-family: Optima-Regular-01; src:url("../fonts/Optima-Regular-01.ttf") format("truetype"); }
@font-face { font-family: Optima-Bold-02; src:url("../fonts/Optima-Bold-02.ttf") format("truetype"); }
@font-face { font-family: ShorelinesScriptBold; src:url("../fonts/ShorelinesScriptBold.otf") format("OpenType"); }
@font-face { font-family: STIXGeneral; src:url("../fonts/STIXGeneral.otf") format("OpenType"); }
@font-face { font-family: Helvetica; src:url("../fonts/Helvetica-01.ttf") format("truetype"); }
@font-face { font-family: HelveticaBold; src:url("../fonts/Helvetica-Bold-02.ttf") format("truetype"); }
@font-face { font-family: Swiss721SWA; src:url("../fonts/Swiss721SWA.ttf") format("truetype"); }

body { margin: 0 55px 55px; color: #677661; position: relative; background: #FFEEE1; }
html { max-width: 100%;  }

a { text-decoration: none;}
.th { font-family: CSChatThai!important; font-size: 24px!important; }

button { outline: none; background: transparent; border: none; border: 4px solid #247D7A; }
button p { padding: 10px 20px; margin: 0; font: 18px Optima-Regular-01!important; letter-spacing: 1px; }
button:hover , button:hover p { cursor: pointer; opacity: 0.8; -moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease; cursor: pointer; }

:hover { -moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease; cursor: pointer; }

.btn-youtube { border: none; background: url(../images/icon/youtube.png)left center no-repeat; padding: 20px; font: 18px Optima-Regular-01; text-indent: 2.5rem; }

#main { overflow: hidden; }

/*** header menu navbar desktop***/
header { left: 0; right: 0; position: fixed; top: 0; z-index: 999;  background: #DBD0C8; text-align: center; }
header div { display: inline-block; width: 45%; vertical-align: middle; text-align: left; }
header div:first-child { display: none; }
header div:first-child ,
header div:nth-child(2) { text-align: left; }
header div:last-child { text-align: right; }
header div:nth-child(2) img { max-height: 65px; }

.booking { left: 0; right: 0; background: #DBD0C8; position: fixed; bottom: 0; z-index: 999; padding: 0 ; }
.responsive { display: none!important; }
form { margin: 0; }
ul.nav{
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 9;
}
ul.nav li{
    display: inline-block;
    vertical-align: middle;
    position: relative;
    line-height: 70px;
    text-align: left;
    margin:0 1em;
}
ul.nav li.lang-aana { background: url(../images/ui/AANA-RESORT-04.png) center left no-repeat; }
ul.nav li.call-aana { background: url(../images/ui/AANA-RESORT-7.png) center left no-repeat; }
ul.nav li.menu-aana { background: url(../images/ui/AANA-RESORT-8.png) center left no-repeat; }
ul.nav li a{
    display: block;
    padding: 8px 25px;
    color: #333;
    text-decoration: none;
    font: 16px Optima-Regular-01;
}
ul.nav > li > a { padding: 1.5rem 25px; }
ul.nav li a span { margin-left: 1em; }
ul.nav li a:hover{
    color: #E78E5A;
}
ul.nav li ul.dropdown{
    width: 200px; /* Set width of the dropdown */
    opacity: 0;
    position: absolute;
    z-index: 999;
    left: -5em;
}
ul.nav li ul.dropdown a { color: #007476; }
ul.nav li:hover ul.dropdown{
  -moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;
    display: block; /* Display the dropdown */
    opacity: 1;
}
ul.nav li ul.dropdown li{
    display: block;
    background: #dbd0c8;
    text-align: center;
}
ul.nav li ul.dropdown li:hover { background:#007476; -moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;}
ul.nav li ul.dropdown li:hover a { color: #ffffff; }
ul.nav li ul.dropdown li.active { background:#007476; -moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;}
ul.nav li ul.dropdown li.active a { color: #ffffff; }
ul.nav li ul.dropdown a { font: 18px STIXGeneral; }
ul.nav li ul.dropdown a.cs { font: 20px CSChatThai; }

.icon-tel { background: url(../images/icon/icon--10.png)left center no-repeat;  padding-left: 3.5rem; margin-bottom: 10px; }
.icon-mail { background: url(../images/icon/icon--11.png)left center no-repeat;  padding-left: 3.5rem; margin-bottom: 10px; }
.icon-tel-b { background: url(../images/ui/AANA-RESORT-29-b.png)left center no-repeat;  padding-left: 3.5rem; margin-bottom: 10px; }
.icon-mail-b { background: url(../images/ui/AANA-RESORT-30-b.png)left center no-repeat;  padding-left: 3.5rem; margin-bottom: 10px; }

footer { display: none; }

.group-menu-look ul { margin: auto; padding: 0; }
.group-menu-look ul li {font:18px Optima-Regular-01; color: #CCCCCC; text-transform: uppercase; letter-spacing: 5px; margin: auto; padding: 0; display: inline-block; width: 15%; text-align: center; }
.group-menu-look ul li.active ,
.group-menu-look ul li:hover { color: #007476; cursor: pointer; -moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease; }

.group-menu-play ul { margin: auto; padding: 0; }
.group-menu-play ul li {font:18px Optima-Regular-01; color: #CCCCCC; text-transform: uppercase; letter-spacing: 5px; margin: auto; padding: 0; display: inline-block; width: 33%; text-align: center; }
.group-menu-play ul li.active ,
.group-menu-play ul li:hover { color: #007476; cursor: pointer; -moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;}
.group-menu-play ul li:first-child i { background: url(../images/ui/icon-play-2-07.png) center no-repeat; width: 232px; height: 91px; background-size: 100%; display: block;  margin:0 auto 10px;}
.group-menu-play ul li:nth-child(2) i { background: url(../images/ui/icon-play-2-08.png) center no-repeat; width: 153px; height: 86px; background-size: 100%; display: block;  margin:0 auto 10px;}
.group-menu-play ul li:last-child i { background: url(../images/ui/icon-play-2-09.png) center no-repeat; width: 153px; height: 86px; background-size: 100%; display: block;  margin:0 auto 10px;}
.group-menu-play ul li.active:first-child i ,
.group-menu-play ul li:hover:first-child i { background: url(../images/ui/icon-play-1-04.png) center no-repeat; width: 232px; height: 91px; background-size: 100%; display: block;  margin:0 auto 10px; -moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease; }
.group-menu-play ul li.active:nth-child(2) i ,
.group-menu-play ul li:hover:nth-child(2) i { background: url(../images/ui/icon-play-1-05.png) center no-repeat; width: 153px; height: 86px; background-size: 100%; display: block;  margin:0 auto 10px; -moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease; }
.group-menu-play ul li.active:last-child i ,
.group-menu-play ul li:hover:last-child i { background: url(../images/ui/icon-play-1-06.png) center no-repeat; width: 153px; height: 86px; background-size: 100%; display: block;  margin:0 auto 10px; -moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease; }

.banner-play .img { margin: 4rem auto; position: relative; display: inline-block; }
.banner-play .img .abs-left { position: absolute; top: 50%; transform: translateY(-50%); left: -10rem; z-index: -1; }
.banner-play .img .abs-right { position: absolute; top: 50%; transform: translateY(-50%); right: -10rem; z-index: -1; }

/*** booking ***/
.booking p { font: 14px Optima-Regular-01; color: #000;  letter-spacing: 1px; text-align: left; margin: 0; }
.booking ul { width: 100%; margin: auto; }
.booking ul li { display: table-cell; vertical-align: middle; width: 10%; margin:0; border-right: 1px solid #ccc; padding: 10px 1.5em 0; text-align: center; line-height: 40px; }
.booking ul li input { background: transparent; border: transparent; outline: none; height: 40px; text-align: center;  font: 26px Optima-Bold-02; color: #000;  cursor: pointer; width: 40px; display: inline-block; vertical-align: middle; }
.booking ul li input.datepicker { background: url(../images/ui/AANA-RESORT-9.png) right center no-repeat; width: initial;  font: 16px Optima-Bold-02; }
.booking ul li input.promocode { width: 100%;  font: 18px Optima-Bold-02; }

.booking ul li:last-child { background: #247D7A; padding: 15px 0 10px; text-align: center; border-right: none; }
.booking ul li button p { font: 20px Optima-Bold-02!important; color: #fff; background: url(../images/ui/AANA-RESORT-10.png) left center no-repeat; padding: 0; text-indent: 70px; }
.booking span {cursor:pointer; } 
.booking .minus, 
.booking .plus{ width:33px; height:33px; border-radius:4px; padding:2px; display: inline-block; vertical-align: middle; text-align: center; font: 26px Optima-Bold-02; color: #000; }

/* Sing In Button */
.button {background-color: rgba(44, 45, 47, 0.749); width: 97px; height: 30px; font-size: 12px; color: #fff; border: none; border-radius: 20px; cursor: pointer; }


/*** menu overlay ***/

* {box-sizing: border-box; }
.menu-right { position: absolute; right: 1em; top: 1em; }
.menu-right ul.nav li { display: inline-block!important; width: initial; vertical-align: middle; }
.menu-right ul.nav li > a { padding: 10px 35px!important; line-height: 35px; letter-spacing: 1px;}
.menu-right ul.dropdown li { margin-bottom: 0!important; width: 100%; }

.overlay-menu > div { display: block; vertical-align: middle; width: 100%; }
.overlay-menu > div ul.left { text-align: left; max-width: 1420px; }
.overlay-menu > div ul.left li { display: inline-block; position: relative; vertical-align: top; padding-left: 3rem; }
.overlay-menu > div ul.left li:first-child { padding-right: 3rem; padding-left: 0; }
.overlay-menu > div ul.left li:first-child h1 { font:36px Optima-Bold-02; color:#247D7A; letter-spacing: 5px; }
.overlay-menu > div ul.left li:first-child:after { content: url(../images/ui/line-green-01.png) ; width: 10px; height: 100px; position: absolute; left: 100%!important; background: transparent; top: 50%; transform: translateY(-50%); }
.overlay-menu > div ul.left li p { font: 18px Optima-Regular-01; color: #000; letter-spacing: 1px; text-transform: initial; margin: 0!important; }
.overlay-menu > div ul.left li h2 { font: 18px Optima-Bold-02; color: #247D7A; letter-spacing: 1px; text-transform: initial; text-transform: uppercase; }
.overlay-menu > div ul.left li.th h2 { font: 24px CSChatthai; line-height: 24px; }
.overlay-menu > div ul.left li > div.mt-25 { margin-top: 25px; }
.overlay-menu > div ul.left li > div p { display: table-cell; vertical-align: top; }
.overlay-menu .icon-tel { background: url(../images/ui/AANA-RESORT-29.png)left center no-repeat;  padding-left: 3.5rem; }
.overlay-menu .icon-mail { background: url(../images/ui/AANA-RESORT-30.png)left center no-repeat;  padding-left: 3.5rem; }
.overlay-menu button { border: 4px solid #fff; background: url(../images/ui/AANA-RESORT-10.png) right center no-repeat; padding-right: 5em; background-position-x: 6.5rem; margin-top: 2em;}
.overlay-menu button p { font: 16px Optima-Regular-01!important; color: #fff; letter-spacing: 1px; }

* { box-sizing: border-box; }
.navbar {height: 90px; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; }
.navbar-buttons {position: relative; width: 155px; display: flex; justify-content: space-between; align-items: center; }
 
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .35s, height .35s; overflow: hidden; border-left: 5px solid #fff; background:rgb(255 238 225 / 0.95) ; }
.overlay.open {opacity: 1; visibility: visible; height: 100%; z-index: 999; }
.overlay .nav-title {font-size: 22px; color: #fff; font-weight: bold; text-transform: uppercase; text-align: center; position: absolute; left: 50%; transform: translate(-50%); top: 8%; }
.overlay nav {position: relative; top: 50%; transform: translateY(-50%); font-size: 50px; font-weight: 400; text-transform: uppercase; text-align: center; }
.overlay ul {list-style: none; padding: 0; margin: 0 auto; display: inline-block; position: relative;  }
.overlay ul li {display: block; position: relative; opacity: 0; margin-bottom: 3rem; }
.overlay ul li a {display: block; position: relative; color: #E78E5A; text-decoration: none; overflow: hidden; font: 36px Optima-Bold-02; letter-spacing: 10px; line-height: 36px; }
.overlay ul li:after {content: ''; position: absolute; bottom: -20px; left: 50%; width: 0%; transform: translateX(-50%); height: 3px; background: #FFF; transition: 1s; }
.overlay ul li:hover:after,
.overlay ul li:focus:after,
.overlay ul li.active:after {width: 100%; color: #247D7A; background: url(../images/ui/line-green.png) center no-repeat; width: 100px; height: 10px; }
.overlay ul li.active a { color: #247D7A;  }
.overlay.open li {animation: fadeInRight .5s ease forwards; animation-delay: .35s; }
.overlay.open li:nth-of-type(2) {
  animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
  animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
  animation-delay: .50s;
}
 
@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}
button:focus {
  outline:0;
}
 
.open-menu,
.close-menu,
.button {
  cursor: pointer;
  transition: transform 0.30s;
}
.open-menu:hover,
.close-menu:hover,
.button:hover {
  transform: scale(1.1);
}

Last thing we need to do regarding CSS is to make it responsive.
 
@media (max-width: 670px) {
  .overlay nav {
    font-size: 30px;
  }
}
@media (max-width: 550px) {
  .overlay nav {
    font-size: 20px;
  }
}

/*** menu overlay amenities ***/

.overlay-amenities-menu { background: #fff; max-width: 95%; margin: auto; padding: 10px;  }
.overlay-amenities-menu > div { border: 3px solid #70b98b; padding: 1em; 
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    text-align: left;
}
.overlay-amenities-menu > div > div { display: inline-block; vertical-align: top; text-align: left; padding: 20px 1em; }
.overlay-amenities-menu > div > div ul { text-align: left; }
.overlay-amenities-menu > div > div ul li { font: 16px Swiss721SWA; color: #000; letter-spacing: 1px; text-transform: initial; list-style: disc;  }

* { box-sizing: border-box; }
.navbar {height: 90px; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; }
.navbar-buttons {position: relative; width: 155px; display: flex; justify-content: space-between; align-items: center; }
 
.overlay-amenities { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .35s, height .35s; overflow: hidden;  background:#70b98b ; text-align: center; }
.overlay-amenities.open {opacity: 1; visibility: visible; height: 100%; z-index: 999; }
.overlay-amenities .nav-title {font-size: 22px; color: #fff; font-weight: bold; text-transform: uppercase; text-align: center; position: absolute; left: 50%; transform: translate(-50%); top: 8%; }
.overlay-amenities nav {position: relative; height: auto; top: 50%; transform: translateY(-48%); font-size: 50px; font-weight: 400; text-transform: uppercase; text-align: center; }
.overlay-amenities ul {list-style: none; padding: 0; margin: 10px auto 0; position: relative; }
.overlay-amenities ul li {display: block; position: relative; opacity: 0;  }
.overlay-amenities ul li a {display: block; position: relative; color: #FFF; text-decoration: none; overflow: hidden; font: 34px Optima-Bold-02; letter-spacing: 10px; line-height: 65px; }
.overlay-amenities ul li a:after {content: ''; position: absolute; bottom: 0; left: 43.5%; width: 0%; transform: translateX(-50%); height: 3px; background: #FFF; transition: 1s; }
.overlay-amenities ul li a:hover:after,
.overlay-amenities ul li a:focus:after,
.overlay-amenities ul li a:active:after {width: 100%; /*background: #ea2e49;*/ }
.overlay-amenities.open li {animation: fadeInRight .5s ease forwards; animation-delay: .35s; }
.overlay-amenities.open li:nth-of-type(2) {
  animation-delay: .4s;
}
.overlay-amenities.open li:nth-of-type(3) {
  animation-delay: .45s;
}
.overlay-amenities.open li:nth-of-type(4) {
  animation-delay: .50s;
}
 
.overlay-amenities .title { background: #fff; padding: 2em 3em; position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; }
.overlay-amenities .title h1 { background: #fff; font: 60px ShorelinesScriptBold; color:#70b98b; line-height: 72px;  }
.overlay-amenities .title p { background: #fff; font: 24px Optima-Regular-01; color:#70b98b; line-height: 24px;  }

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}
button:focus {
  outline:0;
}
 
.open-menu,
.close-menu,
.button {
  cursor: pointer;
  transition: transform 0.30s;
}
.open-menu:hover,
.close-menu:hover,
.button:hover {
  transform: scale(1.1);
}

Last thing we need to do regarding CSS is to make it responsive.
 
@media (max-width: 670px) {
  .overlay-amenities nav {
    font-size: 30px;
  }
}
@media (max-width: 550px) {
  .overlay-amenities nav {
    font-size: 20px;
  }
}


/*** menu how to get there ***/

.overlay-howto-menu { max-width: 95%; margin: auto; padding: 10px; border: 2px solid #fff; }
.overlay-howto-menu > div { border: 3px solid #70acb9; border: 4px solid #fff; padding: 1rem; }
.overlay-howto-menu > div section:first-child { 
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    text-align: left;
}
.overlay-howto-menu > div section:first-child { width: 60%; }
.overlay-howto-menu > div section:last-child { width: 39%; text-align: center; }
.overlay-howto-menu > div section > div { padding-bottom: 1.5rem; }
.overlay-howto-menu > div section img { max-width: 100%; }
.overlay-howto-menu > div section button { display: block; margin: auto; border: none; text-align: center; }

.overlay-howto .title { background:#3784F4 ; padding: 2em 3em; position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 1; }
.overlay-howto .title h1 { font: 60px ShorelinesScriptBold; color:#fff; line-height: 72px; letter-spacing: 10px; margin: 0;}
.overlay-howto .title p { font: 24px Optima-Regular-01; color:#fff; line-height: 24px; margin: 0; margin-left: 20em; }

.overlay-howto-menu > div section { display: inline-block; vertical-align: top; text-align: left; padding: 1em; }
.overlay-howto-menu > div section p { font: 15px Helvetica; color: #fff; margin: 15px 0 0;  }
.overlay-howto-menu > div section ul { text-align: left; }
.overlay-howto-menu > div section ul li { font: 15px Helvetica; color: #fff; letter-spacing: 1px; text-transform: initial; list-style: disc;  }

* { box-sizing: border-box; }
.navbar {height: 90px; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; }
.navbar-buttons {position: relative; width: 155px; display: flex; justify-content: space-between; align-items: center; }
 
.overlay-howto { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .35s, height .35s; overflow: hidden;  background:#3784F4 ; text-align: center; }
.overlay-howto.open {opacity: 1; visibility: visible; height: 100%; z-index: 999; }
.overlay-howto .nav-title {font-size: 22px; color: #fff; font-weight: bold; text-transform: uppercase; text-align: center; position: absolute; left: 50%; transform: translate(-50%); top: 8%; }
.overlay-howto nav {position: relative; height: auto; top: 50%; transform: translateY(-48%); font-size: 50px; font-weight: 400; text-transform: uppercase; text-align: center; }
.overlay-howto ul {list-style: none; padding: 0; margin: 10px auto 0; position: relative; }
.overlay-howto ul li {display: block; position: relative; opacity: 0;  }
.overlay-howto ul li a {display: block; position: relative; color: #FFF; text-decoration: none; overflow: hidden; font: 34px Optima-Bold-02; letter-spacing: 10px; line-height: 65px; }
.overlay-howto ul li a:after {content: ''; position: absolute; bottom: 0; left: 43.5%; width: 0%; transform: translateX(-50%); height: 3px; background: #FFF; transition: 1s; }
.overlay-howto ul li a:hover:after,
.overlay-howto ul li a:focus:after,
.overlay-howto ul li a:active:after {width: 100%; /*background: #ea2e49;*/ }
.overlay-howto.open li {animation: fadeInRight .5s ease forwards; animation-delay: .35s; }
.overlay-howto.open li:nth-of-type(2) {
  animation-delay: .4s;
}
.overlay-howto.open li:nth-of-type(3) {
  animation-delay: .45s;
}
.overlay-howto.open li:nth-of-type(4) {
  animation-delay: .50s;
}
 

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}
button:focus {
  outline:0;
}
 
.open-menu,
.close-menu,
.button {
  cursor: pointer;
  transition: transform 0.30s;
}
.open-menu:hover,
.close-menu:hover,
.button:hover {
  transform: scale(1.1);
}

Last thing we need to do regarding CSS is to make it responsive.
 
@media (max-width: 670px) {
  .overlay-howto nav {
    font-size: 30px;
  }
}
@media (max-width: 550px) {
  .overlay-howto nav {
    font-size: 20px;
  }
}

hr.line {  background: url(../images/ui/line-green.png) center no-repeat; width: 100px; height: 10px; border: none; }
.btn-view { background: #247D7A; color: #fff; font: 18px Optima-Regular-01; ; letter-spacing: 1px; padding: 10px 20px; }
.multiply { mix-blend-mode: multiply; }
.responsive { display: none; }

/*** banner & fadeshow ***/

.aana-1 { height: 800px; }
.aana-1 .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; z-index: 1; max-width: 640px; }
.aana-1 .text p { font: 18px Optima-Regular-01;    margin-bottom: 1em; text-shadow: 2px 2px #212121; }
.aana-1 .text h1 { font: 36px Optima-bold-02; color: #F7B88D; display: inline-block; vertical-align: top;  line-height: initial; margin: 0; letter-spacing: 5px; text-transform: uppercase; text-shadow: 2px 2px #212121; }
.aana-1 .text h2 { font: 30px Optima-bold-02; letter-spacing: 5px; text-transform: uppercase; text-shadow: 2px 2px #212121; }
.aana-1 .text h2 a { background-color: rgb(74, 123, 140);
  color: #ffffff;
  padding: 10px;
  box-shadow: 1px 1px 3px 1px #607d8b; }
  .aana-1 .text h2 a:hover { opacity: 0.8; }
.aana-1 .text span {  font: 156px ShorelinesScriptBold; line-height: 0; margin: 0 31px 0 60px; }
.aana-1 .text hr.line {  background: url(../images/ui/line-green.png) center no-repeat; width: 110px; height: 10px; border: none; }
.aana-1 button { background: #247D7A; font: 18px Optima-Regular-01; color: #FFF; text-transform: uppercase; outline: none; border: none; padding: 10px 20px; margin-top: 3rem; }
/*.mutiply.text2 { background: url(../images/AANA-RESORT-KOHCHANG-20.jpg) center no-repeat; width:710px; height: 563px; background-blend-mode: multiply; }*/


/*** slide small fadeshow ***/

/*.owl-carousel { width: 600px!important; height: 300px; margin:auto; }*/



.aana-2 { margin: auto; }
.aana-2 > div { display: block; text-align: center; }

.aana-2 .content h1 { font: 36px Optima-bold-02; color: #E78E5A; position: relative; text-transform: uppercase; letter-spacing: 5px; margin: 0; }
.aana-2 .content h2 { font: 26px Optima-bold-02; color: #677661; position: relative; text-transform: uppercase; margin: 1rem 0; }
.aana-2 .content h1 span {  font: 54px ShorelinesScriptBold; position: absolute; top: -4.5rem; right: -2.5rem; }
.aana-2 .content p {  font:  18px Optima-Regular-01; color: #000; line-height: 24px; }
.aana-2 .content .th p {  font:  24px CSChatThai; color: #000; line-height: 24px; }
.aana-2 .content .th h1 { font: 48px CSChatThai; }
.aana-2 .content .th h2 { font: 40px CSChatThai; margin: 0; }

.aana-2 .content .text { max-width: 800px; margin:2rem auto; text-align: center; }
.aana-2 .content ul { display: table; padding: 0; max-width: 1200px; margin: auto; position: relative; }
.aana-2 .content ul li { text-align: center; display: inline-table; width: initial; position: relative; }
.aana-2 .content ul li img { max-width: 70%; }
.aana-2 .content ul li p { font: 18px Optima-bold-02; color: #F7B88D; text-transform: uppercase; letter-spacing: 1px;  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0; line-height: 24px; }
.aana-2 .content ul li .h-overlay { background: #000; position: absolute; top: 0; bottom: 0; width: 100%; opacity: 0.5; }
.aana-2 .content ul li:hover { transform: scale(1.15); z-index: 1; -moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease; cursor: pointer;}
.aana-2 .content ul li:hover img { box-shadow: 0px 0px 10px rgb(0 0 0 / 50%); -moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease; cursor: pointer; }
.aana-2 .content ul li:hover .h-overlay { background: transparent; -moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease; cursor: pointer; }
/* .aana-2 .content ul li:hover p { opacity: 0; -moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease; cursor: pointer; } */
.aana-2 .content ul::after { content: url(../images/home/bg-01.png); width: 285px; height: 405px; position: absolute; mix-blend-mode: multiply;
    right: 0; top: 10%; z-index: -1; }
.aana-2 .content ul::before { content: url(../images/home/bg-01.png); width: 285px; height: 405px; position: absolute; mix-blend-mode: multiply;
    left: 0; }
.aana-2 .content button { margin-top: 21px; }
.aana-2 .room-type { position: relative; }
.aana-2 .room-type ul li { display: inline-block; vertical-align: middle; max-width: 300px;     border: 0.05rem solid #ffffff1c; }
.aana-2 .room-type ul li img { max-width: 100%; }
.aana-2 .room-type .room-type-bg { background: #247D7A; height: 245px; position: absolute; width: 100%; top: 50%; transform: translateY(-50%); }

.aana-3 { position: relative; }
.aana-3 { max-width: 1200px; margin:10rem auto; }
.aana-3 > div { display: table-cell; vertical-align: middle; position: relative; text-align: center; }
.aana-3 > div > img { max-width: 80%; margin-bottom: 1.5rem }
.aana-3 > div:nth-child(2) { position: relative; }
.aana-3 .group { position: relative; width: 745px; height: 745px; mix-blend-mode: multiply; background: #247D7A; }
.aana-3 > div:nth-child(2) .ajax-img { position: absolute; top: 50px; left: 9px; }
.aana-3 > div:last-child  { text-align: right; width: 100%; }
.aana-3 > div:last-child ul { padding: 0; margin: auto; }
.aana-3 > div:last-child ul li { list-style: none; padding: 1.5rem 0; }
.aana-3 > div:last-child ul li hr { display: inline-block; }
.aana-3 > div:last-child ul li h1 {  font: 36px Optima-bold-02; color: #F7B88D; margin: 0; letter-spacing: 2px; }
.aana-3 > div:last-child ul li p {  font: 28px Optima-bold-02; color: #CCCCCC; margin: 0; letter-spacing: 5px; }
.aana-3 > div:last-child ul li p.th {  font: 30px CSChatThai!important; letter-spacing: 3px; }
.aana-3 > div:last-child ul li:hover p ,
.aana-3 > div:last-child ul li.active p {  color: #F7B88D; margin: 0; cursor: pointer; }
.aana-3 .group > img { mix-blend-mode: multiply; background: #247D7A; transform: translate(0%, -50%); left: -35%;
    top: 50%; position: absolute; }
.aana-3 .group .absolute { position: absolute; background-color: #3784f4; mix-blend-mode: multiply; width: 100px; height: 100px; bottom: -2rem; right: 5rem; z-index: -1; }
.aana-3 .text { text-align: left; max-width: 80%; margin: auto; }
.aana-3 .text h1 { font: 48px Optima-Regular-01; color: #000; position: relative; display: initial; }
.aana-3 .text h1 span {  font: 54px ShorelinesScriptBold; }
.aana-3 .text p {  font: bold 14px Swiss721SWA; color: #000; line-height: 24px; }
.aana-3 .text ul { margin-top: 1.5rem; }
.aana-3 .text ul li { display: inline-block; vertical-align: middle; margin-right:2rem; }
.aana-3 .text ul li div { display: inline-block; vertical-align: middle; width: initial; margin-right:1rem; }
.aana-3 .multiply { position: absolute; right: -80%; bottom: -15%; }
.aana-3 .ajax-img img { max-width: 725px; }

.aana-4 { position: relative; }
.aana-4 { max-width: 1200px; margin:10rem auto; }
.aana-4 > div { display: table-cell; vertical-align: middle; position: relative; text-align: center; }
.aana-4 > div:last-child > img { max-width: 80%; margin-bottom: 1.5rem }
.aana-4 > div:last-child { position: relative; }
.aana-4 .group { position: relative; width: 818px; height: 818px; mix-blend-mode: multiply; background: #247D7A; }
.aana-4 > div:last-child .ajax-img { position: absolute; top: 9px; left: 9px; }
.aana-4 > div:first-child  { text-align: right; width: 100%; }
.aana-4 > div:first-child ul { padding: 0; margin: auto; }
.aana-4 > div:first-child ul li { list-style: none; padding: 1.5rem 0; }
.aana-4 > div:first-child ul li hr { display: inline-block; }
.aana-4 > div:first-child ul li h1 {  font: 36px Optima-bold-02; color: #F7B88D; margin: 0; letter-spacing: 2px; }
.aana-4 > div:first-child ul li p {  font: 28px Optima-bold-02; color: #CCCCCC; margin: 0; letter-spacing: 5px; }
.aana-4 > div:first-child ul li:hover p ,
.aana-4 > div:first-child ul li.active p {  color: #F7B88D; margin: 0; cursor: pointer; }
.aana-4 .group > img { mix-blend-mode: multiply; background: #247D7A; transform: translate(0%, -50%); left: -35%;
    top: 50%; position: absolute; }
.aana-4 .group .absolute { position: absolute; background-color: #3784f4; mix-blend-mode: multiply; width: 100px; height: 100px; bottom: -2rem; right: 5rem; z-index: -1; }
.aana-4 .text { text-align: left; max-width: 80%; margin: auto; }
.aana-4 .text h1 { font: 48px Optima-Regular-01; color: #000; position: relative; display: initial; }
.aana-4 .text h1 span {  font: 54px ShorelinesScriptBold; }
.aana-4 .text p {  font: bold 14px Swiss721SWA; color: #000; line-height: 24px; }
.aana-4 .text ul { margin-top: 1.5rem; }
.aana-4 .text ul li { display: inline-block; vertical-align: middle; margin-right:2rem; }
.aana-4 .text ul li div { display: inline-block; vertical-align: middle; width: initial; margin-right:1rem; }
.aana-4 .multiply { position: absolute; right: -80%; bottom: -15%; }

.aana-5 { position: relative; }
.aana-5 > div { max-width: 1200px; margin: auto;  text-align: center;  }
.aana-5 > div > div { display: inline-block; vertical-align: middle; width: initial; margin: 0 2em; }
.aana-5 h1 { font: 36px Optima-bold-02; letter-spacing: 5px;  color: #F7B88D; line-height: 0; }
.aana-5 .owl-carousel { width: 1200px!important; margin: 3em auto; }
.aana-5 .item { text-align: center; margin: 1em 3em; position: relative; }
.aana-5 .item > img { max-width: initial; width: 350px!important;  margin: auto; }
.aana-5 .item p { margin: 1em 0; }
.aana-5 .item a > div { position: absolute; left:0; right: 0; text-align: center; top: 40% ;}
.aana-5 .item h2 span { background: #ffffffd9; padding: 1rem; border-radius: 10px;}
.aana-5 a > img { max-width: max-content; margin: auto; }
.aana-5 .multiply { position: absolute; right: 0%; top: -33%; z-index: -1; }
.aana-5 .multiply.abs2 { position: absolute; left: 0%; top: 70%; z-index: -1;}


.aana-7 { position: relative; max-width: 1300px; margin: 10rem auto ; }
.aana-7 > div { margin: auto;  display: inline-block; vertical-align: middle; text-align: center;  height: 675px; }
.aana-7 > div:first-child { width: 65%; }
.aana-7 .text { max-width: 640px; text-align: left;  }
.aana-7 .text > h1 { font: 36px Optima-Bold-02; color: #F7B88D; text-transform: uppercase; letter-spacing: 5px; }
.aana-7 .text > h2 { font: 36px Optima-Bold-02; color: #247D7A; line-height: 65px; letter-spacing: 5px; }
.aana-7 .text > h2.th { font: 38px CSChatThai!important; line-height: 65px; letter-spacing: 3px; }
.aana-7 .text > p { font:18px Optima-Regular-01; color: #000; margin: 3em 0; letter-spacing: 1px; line-height: 24px; }
.aana-7 .text > p.th { font: 24px CSChatThai!important; margin: 2em 0 1em; }
.aana-7 .btn { text-align: right; }
.aana-7 .group > div { display: inline-block; vertical-align: middle; }
.aana-7 .group p {  font:16px Optima-Regular-01; color: #000; letter-spacing: 1px; line-height: 24px;}
.aana-7 button { outline: none;  margin: 0 3em; }
.aana-7 button p { padding: 0; margin:0; font:18px Optima-Regular-01; color: #fff!important; letter-spacing: 1px; }
.aana-7 .text ul { margin: 2.5rem 0 1.5rem; }
.aana-7 .text ul li { text-align: center; display: inline-block; width: initial; margin-right: 2.5rem; }
.aana-7 .text ul li img { max-width: 70%; }
.aana-7 .text ul li:hover { opacity: 0.5; cursor: pointer; transition: opacity .85s; }
.aana-7 .text ul li p { margin-top: 1em; font:18px Optima-Regular-01; color: #000; }
.aana-7 .abs { position: absolute; left: -25%; top: 0%; }


.about-aana { max-width: 1560px; margin: auto; }
.about-aana > div { display: table-cell; vertical-align: middle; text-align: center; }
.about-aana > div > div { display: inline-block; vertical-align: middle; width: 46%; text-align: left; margin: 0 1em; position: relative; }
.about-aana > div > div:last-child { text-align: right; padding-left: 4em; }
.about-aana > div > div:last-child:after {content: '';width: 600px;height: 600px;background:#3784f4;display: block;position: absolute;left: 2em;bottom: -2em;z-index: -1;}
.about-aana h1 { font: 54px ShorelinesScriptBold; color: #000; line-height: 54px; margin-bottom: 1em; }
.about-aana p {  font: bold 15px Swiss721SWA; color: #000;  }
.about-aana .text ul { margin: 2.5rem 0 1.5rem; }
.about-aana .text ul li { text-align: center; display: inline-block; width: initial; margin-right: 2.5rem; }
.about-aana .text ul li img { max-width: 70%; }
.about-aana .text ul li p { margin-top: 1em; font: bold 14px Swiss721SWA; color: #000; }

.stay-aana { background: url(../images/AANA-RESORT-KOHCHANG-51.jpg) center no-repeat; }
.stay-aana > div {  display: table-cell; vertical-align: middle;}
.stay-aana > div > div { max-width: 600px; margin: auto; text-align: center; }
.stay-aana > div > div h1 { font: 48px Optima-Regular-01; color: #000; letter-spacing: 1px; }
.stay-aana > div > div h2 { font: 54px ShorelinesScriptBold; color: #000; }
.stay-aana > div > div p { margin-top: 2.5rem; font: 15px Swiss721SWA; color: #000; line-height: 24px; letter-spacing: 1px;}
.stay-aana  ul { margin: 0.5rem 0 1.5rem; }
.stay-aana  ul li { text-align: center; display: inline-block; width: initial; margin: 1.8rem; }
.stay-aana  ul li img { max-width: 70%; }
.stay-aana  ul li p { margin-top: 1em; }
.stay-aana  ul li:hover { opacity: 0.5; cursor: pointer; transition: opacity .85s; }

.stay-aana-1 { margin-top: 10rem; text-align: center; }
.stay-aana-1 h1 { font:36px Optima-Bold-02; color:#E78E5A ; text-transform: uppercase; letter-spacing: 5px; margin: 0; }
.stay-aana-1 p { font:24px Optima-Regular-01; color:#000 ; letter-spacing: 0.035rem; }
.stay-aana-1 .th p { font: 24px CSChatThai; color: #000; line-height: 24px; }
.stay-aana-1 img { max-width: 100%; }
.stay-aana-1 .txt { margin: 3rem auto; max-width: 640px;  }
.stay-aana-1 .txt img { margin-bottom: 1rem; }

.stay-aana-2 { max-width: 1200px; margin: 0 auto 5rem; }
.stay-aana-2 > div { display: table-cell; vertical-align: middle; width: 40%; padding: 0 1rem; }
.stay-aana-2 .content { max-width: 800px;  }
.stay-aana-2 h1 { font: 48px Optima-Bold-02; color: #000; position: relative; display: initial; margin: 0; letter-spacing: 5px;}
.stay-aana-2 h1 span {  font: 28px Optima-Bold-02; color: #247D7A; letter-spacing: 2px; text-transform: capitalize; }
.stay-aana-2 .th h1 span {  font: 28px CSChatThai; padding-top: 2rem; display: block;  }
.stay-aana-2 ul li ,
.stay-aana-2 .group ul li {  font: 18px Optima-Regular-01; color: #000; line-height: 24px; }
.stay-aana-2 .group.th ul li ,
.stay-aana-2 .group.th ul li span {  font: 22px CSChatThai!important; color: #000; line-height: 24px; }
.stay-aana-2 a {  font: 18px Optima-Regular-01; color: #E78E5A; line-height: 24px; display: block; margin: 1rem auto; }
.stay-aana-2 a.hide:after { content: url(../images/ui/icon-arrow.png); margin-left: 1rem; }
.stay-aana-2 a.show:after { content: url(../images/ui/icon-arrow-ro.png) ; margin-left: 1rem; }
.stay-aana-2 .text { margin:1rem auto; display: inline-block; width: 45%; vertical-align: top; }
.stay-aana-2 .text.wedding { width: 100%; }
.stay-aana-2 .text strong ,
.stay-aana-2 .group strong { font: 16px Optima-Bold-02; color: #000;}
.stay-aana-2 .text p { font: 14px Optima-Regular-01; color: #000; margin: 5px auto; text-indent: 10px;}
.stay-aana-2 .text ul ,
.stay-aana-2 .group ul { margin: 0; }
.stay-aana-2 .text:first-child { margin-right: 2rem; }
.stay-aana-2 .ajax-text.hide { max-height: 0; overflow: hidden; margin-bottom: 1rem; transition: }
.stay-aana-2 .ajax-text { max-height: 100%; margin-bottom: 0; }
.stay-aana-2 .ajax-text table { display: inline-block; vertical-align: top; max-width: 100%; margin: 1rem auto;}
.stay-aana-2 .ajax-text table h2 { font: 28px Optima-Bold-02; color: #247D7A; margin: auto;}
.stay-aana-2 .ajax-text table strong { font: 18px Optima-Bold-02; color: #000; line-height: 3rem; }
.stay-aana-2 .ajax-text table tr td { font:18px Optima-Regular-01; color: #000; padding: 0 10px; }

.stay-aana-2 .th a { font: 20px CSChatThai; }
.stay-aana-2 .th strong { font: 20px CSChatThai; font-weight: bolder; }

.stay-aana-2 .content ul li p { margin-top: 1em; }
.stay-aana-2 .content ul li:hover { opacity: 0.5; cursor: pointer; transition: opacity .85s; }
.stay-aana-2 .content button { margin-top: 21px; }
.stay-aana-2 .content > .item { background: #fff;  padding: 2em; }
.stay-aana-2 .section-item { border: 1px solid #F7B88D; padding: 10px; max-width: 520px; margin: auto; }
.stay-aana-2 .item { display: table; width: 100%; border: 1px solid #F7B88D; padding: 10px;  }
.stay-aana-2 .item > div { display: table-cell; vertical-align: top; text-align: center; }
.stay-aana-2 .item > div p { font: 14px HelveticaBold; color: #F7B88D; letter-spacing: 1px; margin: 10px auto; }
.stay-aana-2 .item > div span { font: 12px Helvetica; color: #F7B88D; letter-spacing: 1px; }

.stay-aana-2 .item.th > div p ,
.stay-aana-2 .item.th > div span { font: 20px CSChatThai;  }

.stay-aana-2 .owl-carousel { margin: 0; margin-bottom: 5em; width: 800px!important; height: auto!important; }
.stay-aana-2 .group { max-width: 700px;  }
.stay-aana-2 .group h1 { font: 36px Optima-Bold-02; color:  #E78E5A; text-transform: uppercase; }
.stay-aana-2 .group > p { font: 18px Optima-Regular-01; color:  #000; margin: 1em 0; max-width: 480px; }
.stay-aana-2 .group.th > p { font: 20px CSChatThai;  }
.stay-aana-2 .offer { border: 4px solid #f7931e; }
.stay-aana-2 .group ul { list-style: none; margin: 10px 0;}

.stay-aana-2.spa > div { width: 49%; display: inline-block; }

.group-btn { text-align: center; margin: 2rem auto; }
.group-btn.th p ,
.group-btn.th button ,
.btn-view.th { font: 24px CSChatThai!important; }


.stay-aana-3 { max-width: 95%; margin: auto; background: url(../images/AANA-RESORT-KOHCHANG-57.jpg) center no-repeat;}
.stay-aana-3 > div { display: table-cell; vertical-align: middle; width: 49%; }
.stay-aana-3 .content { max-width: 800px; margin: auto; }
.stay-aana-3 .content h1 { font: 48px Optima-Regular-01; color: #000; position: relative; display: initial; }
.stay-aana-3 .content h1 span {  font: 54px ShorelinesScriptBold; position: absolute; top: -4.5rem; right: -2.5rem; }
.stay-aana-3 .content p {  font: bold 14px Swiss721SWA; color: #000; line-height: 24px; }
.stay-aana-3 .content .text { max-width: 75%; margin: auto; }
.stay-aana-3 .content ul { margin: 0.5rem 0 1.5rem; }
.stay-aana-3 .content ul li { text-align: center; display: inline-block; width: initial; margin-right: 2.5rem; }
.stay-aana-3 .content ul li img { max-width: 70%; }
.stay-aana-3 .content ul li p { margin-top: 1em; }
.stay-aana-3 .content ul li:hover { opacity: 0.5; cursor: pointer; transition: opacity .85s; }
.stay-aana-3 .content button { margin-top: 21px; }
.stay-aana-3 .content > .item { background: #fff; padding: 2em; }
.stay-aana-3 .item { display: table; width: 100%;  }
.stay-aana-3 .item > div { display: table-cell; vertical-align: top; text-align: center; }
.stay-aana-3 .item > div p { font: 18px HelveticaBold; color: #000; letter-spacing: 1px; margin: 10px 0; }
.stay-aana-3 .item > div span { font: 16px Swiss721SWA; color: #000; letter-spacing: 1px; }

.stay-aana-3 .owl-carousel { margin: 0; margin-bottom: 1em; width: 800px!important; height: auto!important; }
.stay-aana-3 .group { max-width: 700px; margin-left: 10em; }
.stay-aana-3 .group h1 { font: 54px ShorelinesScriptBold; color:  #000; }
.stay-aana-3 .group .text {  padding: 2em;  }
.stay-aana-3 .group .text p { font: 24px Optima-Regular-01; color:  #000; letter-spacing: 1px; margin-bottom: 10px; }
.stay-aana-3 .group .text ul li { font: 15px Swiss721SWA; color:  #000; padding: 2px 0;  }
.stay-aana-3 .group > p { font: 15px Swiss721SWA; color:  #000; letter-spacing: 1px; margin: 2em 0; max-width: 480px; }
.stay-aana-3 .offer { border: 4px solid #f7931e; }

.stay-aana-2 button ,
.stay-aana-3 button { margin-right: 10px; }

.stay-aana-2.th .group > p {  font: 20px CSChatThai; }
.stay-aana-2.th .group a {  font: 20px CSChatThai; }
.stay-aana-2.th .text strong, .stay-aana-2.th .group strong ,
.stay-aana-2.th ul li, .stay-aana-2.th .group ul li ,
.stay-aana-2 .ajax-text.th table tr td {  font: 22px CSChatThai!important; }
.stay-aana-2.spa2 .th p span ,
.stay-aana-2 .ajax-text.th table strong,
.stay-aana-2.spa.last .th table p{ font: 24px CSChatThai; }
.stay-aana-2.spa2 .th h2 { font: 36px CSChatThai; }


.section--eat { max-width: 1200px; margin:5rem auto; }
.section--eat img { max-width: 100%; }
.section--eat > div { display: inline-block; vertical-align: bottom; width: 49% }
.section--eat > div:first-child { margin-right: 1rem; }
.section--eat > div:last-child { text-align: right; }
.section--eat h1 { font: 36px Optima-Bold-02; letter-spacing: 4px; color: #E78E5A; margin: 0; }
.section--eat h1 span { font: 28px Optima-Bold-02; letter-spacing: 4px; color: #247D7A; margin: 0; }
.section--eat p { font: 22px Optima-Regular-01; color: #000; letter-spacing: 2px; line-height:30px; }
.section--eat hr { display: inline-block; }
.section--eat button { margin-bottom: 3.5rem; }

.section--eat.th h1 { font: 60px CSChatThai;  }
.section--eat.th h1 span { font: 28px CSChatThai;  }
.section--eat.th p { font: 24px CSChatThai;  }

.section--eat .table { margin: 4rem auto; display: inherit; width: 100%; }
.section--eat table { border: 2px solid #E78E5A; width: 100%; padding: 5px; }
.section--eat table h1 { font-size: 28px; letter-spacing: 1px; }
.section--eat table p { font-size: 12px; margin: 10px 0 0; letter-spacing: 1px; }
.section--eat table tr div { text-align: center; padding: 15px; width: 100%; border: 1px solid #E78E5A; }
.section--eat .al-center { text-align: center!important; }
.section--eat.ver-top div { vertical-align: top!important; position: relative; }
.section--eat .abs-top {position: absolute;top: -15rem;right: -8rem;z-index: -1;}
.section--eat .abs-bottom {position: absolute; bottom: -15rem;left: -8rem;z-index: -1;}

.border-green { border: 10px solid #247D7A; }
.shadow-left { box-shadow: -15px 15px #247D7A; }
.shadow-right { box-shadow: 15px 15px #247D7A; }

.section--meet { max-width: 1200px; margin:2rem auto; }
.section--meet div { display: inline-block; vertical-align: middle; width: 49%; }
.section--meet div:first-child { text-align: center; }
.section--meet div:last-child { text-align: right; }
.section--meet h1 { font: 36px Optima-Bold-02; letter-spacing: 4px; color: #E78E5A; margin: 0; text-transform: uppercase;}
.section--meet h2 { font: 28px Optima-Bold-02; letter-spacing: 4px; color: #247D7A; margin: 0; text-transform: uppercase;}
.section--meet h2 span { font: 28px Optima-Bold-02; letter-spacing: 4px; color: #247D7A; margin: 0; text-transform: capitalize; }
.section--meet img { max-width: 100%; }

.section--meet ul { margin:1.5rem auto 3rem; padding: 0; }
.section--meet ul li { margin: auto; padding: 0; display: inline-block; padding: 10px; }
.section--meet ul li span {  padding-left: 2.5rem; font: 14px Helvetica; }
.section--meet ul li p { font: 12px Optima-Regular-01; color: #E78E5A;  text-transform: uppercase; margin: 10px; }

.section--meet.wedding > div { display: block; width: 100%; text-align: center; }
.section--meet.wedding p { font: 24px Optima-Regular-01; color: #000;  text-transform: uppercase; margin: 1rem auto; }

.stay-aana-2.spa img { max-width: 100%; }
.stay-aana-2.spa2 { text-align: center; }
.stay-aana-2.spa2 > div { display: block; width: 100%; margin: auto; }
.stay-aana-2.spa2 p { font: 24px Optima-Regular-01; color: #000;  text-transform: uppercase; margin: 1rem auto; }
.stay-aana-2.spa2 p span { font: 18px Optima-Bold-02; color: #E78E5A;  text-transform: capitalize; margin: 1rem auto; }
.stay-aana-2.spa2 h2 { font: 28px Optima-Bold-02; letter-spacing: 4px; color: #247D7A; margin: 0; text-transform: uppercase;}
.stay-aana-2.spa2 .img { position: relative; margin: 3rem auto; }
.stay-aana-2.spa2 img { max-width: 100%; }

.stay-aana-2.spa2 .abs-top-rigth { position: absolute; right: -5rem; top: -5rem; z-index: -1; }
.stay-aana-2.spa2 .abs-bottom-left { position: absolute; left: -5rem; bottom: -5rem; z-index: -1; }
.stay-aana-2.spa2 .abs-top-left { position: absolute; left: -5rem; top: -5rem; z-index: -1; }
.stay-aana-2.spa2 .abs-bottom-right { position: absolute; right : -5rem; bottom: -5rem; z-index: -1; }

.stay-aana-2 .table-align { min-height: 450px; display: table; vertical-align: middle; margin: auto; }
.stay-aana-2 .table-align .txt { display: table-cell; vertical-align: middle; text-align: center; }

.stay-aana-2.spa.last { max-width: 1360px; }
.stay-aana-2.spa.last > div { padding: 0; }
.stay-aana-2.spa.last > div > div { min-height: 425px; }
.stay-aana-2.spa.last .mt-5 { margin-top: 2rem; text-align: center; }
/*.stay-aana-2.spa.last table p ,
.stay-aana-2.spa.last table strong { text-align: center; }*/
.stay-aana-2.spa.last table p { margin: 1rem auto; }
.stay-aana-2.spa.last .img { position: relative; }
.stay-aana-2.spa.last .abs-top-left { position: absolute; right: 100%; top: 0; z-index: -1; }
.stay-aana-2.spa.last .abs-bottom-right { position: absolute; left : 100%; bottom: 0; z-index: -1; }


/************************************************/
/******************** 320 ***********************/
/************************************************/


@media only screen and (min-width: 0px) and (max-width: 639px) {

.desktop { display: none!important; }
.responsive { display: block!important; }
iframe { width: 100%!important;}

body { overflow: initial!important; }

header { max-width: 100%; display: table; width: 100%; display: table!important; }
header .logo { height: 50px; }
header > div { display: table-cell!important; padding: 0 10px; width: initial; text-align: center; }
header > div.responsive  { display: table-cell!important; width: initial;  }
header > div:first-child { display: table-cell!important; width: initial;  }
header > div:nth-child(2) { text-align: center; }
header div:nth-child(2) img { height: 60px; max-width: initial; }
header div:last-child ul.nav li { display: none; }
header div:last-child ul.nav li:last-child { display: block; width: 30px; height: 30px;}
header ul.nav li.menu-aana { margin: auto; }

.btn-view-video > a { display: block; }

.group-menu-look ul li { font-size: 12px; width: 22%; margin: 5px; letter-spacing: 0; }

.overlay-menu > div { width: 90%; display: block; margin: auto; }
.overlay ul li { margin-bottom: 2em; }
.overlay ul li a { letter-spacing: 3px; font-size: 20px; line-height: initial; }
.overlay .menu-right { left:1em ; }
.overlay .menu-right ul { width: 100%; padding: 0; }
.overlay .menu-right ul li { width: 49%; margin: 0; }
.overlay .menu-right ul.nav li > a { padding: 10px!important; }
.overlay .menu-right ul li:last-child { text-align: right; }
.overlay ul.nav { z-index: 999; }
.overlay ul.nav li ul.dropdown { left: 0; }
.overlay ul.nav li ul.dropdown li { width: 85%; }
.overlay ul.nav li ul.dropdown li:last-child { text-align: center; }


.booking { padding: 0; }
.booking ul { width: 100%; }
.booking ul li { display: none; }
.booking ul li:last-child  { display: block; width: 100%; padding: 5px 0 0; }
.booking ul li button p { font-size: 14px!important;  margin: 10px; }

.owl-carousel { width: 100%!important; max-width: 100%; }

.section { max-width: 100%; margin: auto; padding: 0!important; display: block!important; height: auto!important; }

.slide-navigation { display: none; }

.aana-1 .text { left: 10%; right: 10%; transform: translate(0, -50%); }
.aana-1 .text h1 { letter-spacing: 0; }

.aana-2 { max-width: 100%; margin: auto; }
.aana-2 > div { padding:0; }
.aana-2 .content { margin-left: 0; margin: 3.5rem auto 0; }
.aana-2 .content h1 { font-size: 36px!important; }
.aana-2 .content h1 span { font-size: 26px!important; top: -2rem; right: -1.5rem; }
.aana-2 .content ul { margin: 1.5rem auto; padding: 0;  }
.aana-2 .content ul li { margin-right: 0; width: 49%; vertical-align: top; margin-bottom: 0; }
.aana-2 .content ul li p { font-size: 14px; letter-spacing: 0; line-height: 18px; }
.aana-2 .content .text { width: 100%; max-width: 90%; text-align: center; }
.aana-2 .content .text > p { margin:1em 0 0;  }
.aana-2 .content button { margin: 1em auto; }
.aana-2 .owl-carousel { display: block!important; max-width: 320px; height: auto; }
.aana-2 .content ul::after { right: 10%; bottom: -30%; top: initial; }
.aana-2 .content ul::before { bottom: -30%; left: 10%;     content: ''; }

.aana-3 .text { max-width: 90%; text-align: center; }
.aana-3 .text h1 { font-size: 36px!important; }
.aana-3 .text h1 span { font-size: 36px!important; }
.aana-3 .text > p { margin:1em 0 0; font: bold 13px Swiss721SWA; line-height: 20px; }
.aana-3 div.group { width: 288px; height: 288px; margin:auto; display: none; }
.aana-3 > div { width: 100%; margin: 0 auto 1em; display: block; }
.aana-3 > div:nth-child(2) .ajax-img { top: 5px; left: 0; position: relative; }
.aana-3 > div:nth-child(2) .ajax-img img { width: 100vw;     border: 6px solid #267d79; }
.aana-3 > div:last-child > img { margin-bottom: -5em; }
.aana-3  ul { text-align: center; margin-top: 2em; padding: 0; }
.aana-3  ul li { display: block; margin-right: 0;  }
.aana-3  ul li:first-child { margin-right: 1em; }
.aana-3  ul li div { display: block; width: 100%; margin-bottom: 1em; }
.aana-3  ul li button { width: 40%; }
.aana-3 .owl-carousel { height: auto; }
.aana-3 { margin: 8rem auto; }

.aana-4 { padding: 1em 0!important; }
.aana-4 .text h1 { font-size: 36px!important; }
.aana-4 .text h1 span { font-size: 36px!important; }
.aana-4 .text > p { margin:0; font: bold 13px Swiss721SWA; line-height: 20px; }
.aana-4 .cell > div:first-child ,
.aana-4 .cell > div:last-child > div:first-child { display: none; }
.aana-4 .cell > div > div { margin: 0 1em ; }
.aana-4 .cell > div .text { text-align: center; margin-bottom: 2em; }
.aana-4 .content ul { text-align: center; margin: 10px 0; }
.aana-4 .content ul li { width: initial; margin-right: auto; padding: 10px; }
.aana-4 .content ul li img { max-width: 60%; }
.aana-4 .content ul li p { font-size: 10px; }

.aana-5 h1 { font-size: 36px; }
.aana-5 > div { max-width: 100%; display: block; }
.aana-5 .cell > div .text { text-align: center; margin-bottom: 2em; }
.aana-5 .owl-carousel { width: 90%!important; max-width: 480px!important; margin: 1em auto; height: initial; }
.aana-5 .owl-carousel .item { margin: auto; }
.aana-5 .owl-carousel .owl-dot span { margin: 5px; }
.aana-5 .item > img { max-width: 100%!important; }
.aana-5 .multiply { display: none; }

.aana-6 { display: block; padding: 0em!important; }
.aana-6 > div { background: url(../images/AANA-RESORT-KOHCHANG-18-480.jpg) center no-repeat; background-size: cover; display: block; padding: 2.5rem 0;     height: initial; }
.aana-6 .text { max-width: 90%; }
.aana-6 .text > p { margin: 1em auto; }
.aana-6 .text > h1 { font-size: 36px!important; line-height: 36px; }
.aana-6 .btn { text-align: center; }
.aana-6 button { margin-left: 0; }
.aana-6 button p { margin: 0; }

.aana-7 { margin: auto; }
.aana-7 > div {  padding-bottom: 1em; height: auto; display: block; }
.aana-7 > div:last-child { margin-top: -4rem; margin-bottom: 4rem; }
.aana-7 .text { max-width: 90%; margin: auto;  }
.aana-7 .text > p { margin: 3em 0 1em; font-size: 16px; }
.aana-7 .text > h1 { font-size: 30px!important; line-height: 36px; }
.aana-7 .text > h2 { font-size: 22px!important; line-height: 22px; }
.aana-7 .text ul { padding: 0; margin: auto; text-align: center; }
.aana-7 .text ul li { margin:10px; }
.aana-7 .text ul li img { max-width: 50%; }
.aana-7 .group { text-align: center; }
.aana-7 .group br { display: none; }
.aana-7 .group > div { display: block; margin: auto; }
.aana-7 button { margin:2em auto; }
.aana-7 button p { margin: 0; }
.aana-7 > div:first-child { width: 100%; }
.aana-7 .abs {position: absolute; left: 0; top: -13%; display: none; }
.aana-7 img { max-width: 100%; }


[data-am-fadeshow] .fs-quick-nav { bottom: 1em!important; }

footer { display: block; background: #347de9; padding: 4em 0; }
footer br { display: none; }
footer > div { display: block;  max-width: 90%; margin: auto; }
footer > div ul { text-align: center; list-style: none; padding: 0;     margin: auto;}
footer > div ul li { margin-bottom: 2em; }
footer > div ul li p { font: 16px Optima-Bold-02; color: #fff; letter-spacing: 1px; text-transform: initial; line-height: initial; margin: 0!important; }
footer > div ul li h1 { font: 44px ShorelinesScriptBold; color: #fff; letter-spacing: 1px; text-transform: initial; margin: 0; line-height: 44px;  }
footer > div ul li h2 { font: 20px Optima-Regular-01; color: #fff; letter-spacing: 1px; text-transform: initial;  }
footer > div ul li > p { padding: 10px 0; width: fit-content; margin: auto!important; }
footer > div ul li > p a { color: #fff; }
footer > div ul li > div { float: initial; margin: 0 10px; display: inline-block; }
footer .icon-tel { background: url(../images/ui/AANA-RESORT-29.png)left center no-repeat;  padding-left: 3.5rem; }
footer .icon-mail { background: url(../images/ui/AANA-RESORT-30.png)left center no-repeat;  padding-left: 3.5rem; }
footer button { border: 4px solid #fff; background: url(../images/ui/AANA-RESORT-10.png) right center no-repeat; padding-right: 5em; background-position-x: 6rem; margin-top: 2em;}
footer button p { font: 16px Optima-Regular-01!important; color: #fff; letter-spacing: 1px; }


.stay-aana > div > div h1 { padding-top: 20px; }
.stay-aana > div > div h2 { font-size: 30px; line-height: 36px; }
.stay-aana > div > div .icon-ui { max-width: 50%; }
.stay-aana > div > div { max-width: 90%; margin:auto; }
.stay-aana ul li { margin: 10px; }
.stay-aana ul li img { max-width: 50%; }
.stay-aana-1 { margin-top: 3.7rem; }
.stay-aana-1 p { font-size: 16px; }
.stay-aana-1 .txt { margin: 1rem auto; max-width: 90%; }
.stay-aana-1 .txt img { max-width: 30%; }
.stay-aana-1 h1 { font-size: 24px; }
.stay-aana-2 { margin: auto; max-width: 480px!important; }
.stay-aana-2 img { max-width: 100%; }
.stay-aana-2 ,
.stay-aana-3 { max-width: 100%; background: transparent!important; }
.stay-aana-2 h1 ,
.stay-aana-3 h1 {font: 24px Optima-Bold-02; color: #E78E5A; text-transform: uppercase; text-align: center; margin: 20px auto; }
.stay-aana-2 > div ,
.stay-aana-3 > div { display: block; width: 100%; margin:auto; }
.stay-aana-2 .group ,
.stay-aana-3 .group { max-width: 100%; margin-left: auto; margin: auto; text-align: center; padding-bottom: 2em; }
.stay-aana-2 .group h1 { font-size: 24px; }
.stay-aana-2 h1 span { font-size: 20px; }
.stay-aana-2 .group > p { font-size: 14px; max-width: 95%; margin: 1em auto; }
.stay-aana-2 .group > p br { display: none; }
.stay-aana-2 a ,
.stay-aana-2 ul li { font-size: 14px; }
.stay-aana-2 .text strong { font-size: 16px; }
.stay-aana-2 .text { display: block; width: 100%; }
.stay-aana-2 .ajax-text { max-height: fit-content; }
.stay-aana-2 .group .text { text-align: left; margin: auto; }
.stay-aana-2 .section-item { margin-top: 1rem; }
.stay-aana-2 .owl-carousel ,
.stay-aana-3 .owl-carousel { width: 100%!important; margin-bottom: 1em; } 
.stay-aana-2 .item { max-width: 95%; margin:1rem auto 0; background: transparent; }
.stay-aana-2 .item > div ,
.stay-aana-3 .item > div { display: table; width: 100%; padding: 5px; margin-bottom: 5px;}
.stay-aana-2 .item > div p ,
.stay-aana-2 .item > div span ,
.stay-aana-3 .item > div p ,
.stay-aana-3 .item > div span { font-size: 14px; }
.stay-aana-2 .item > div img ,
.stay-aana-3 .item > div img { max-width: 30%; }
.stay-aana-2 .item > div > div ,
.stay-aana-3 .item > div > div { display: table-cell; width: 50%;  vertical-align: middle; border: 1px solid #f2f2f2; }
.stay-aana-2 button { margin-right: 0; }

.btn-view ,
button p { font-size: 14px!important; }

.menu-right { right: 5px; top: 5px; z-index: 999; }
.menu-right ul.nav ,
.menu-right ul.nav li { margin: 0; }
.menu-right ul.nav li img { max-width: 30px; }
.overlay-amenities nav ,
.overlay-howto nav { height: 70%; overflow-y: auto; max-width: 90%; top: 0; transform: translateY(0);}
.overlay-amenities-menu > div ,
.overlay-howto-menu > div { column-count: 1; -webkit-column-count: 1; -moz-column-count: 1; text-align: center; }
.overlay-amenities-menu > div > div ,
.overlay-howto-menu > div > div { padding: 10px 0; text-align: center; }
.overlay-amenities-menu > div > div ul li ,
.overlay-howto-menu > div > div ul li { font-size: 14px; }
.overlay-amenities-menu > div > div ul li br ,
.overlay-howto-menu > div > div ul li br { display: none; }
.overlay-howto-menu > div section:first-child ,
.overlay-howto-menu > div section:last-child { width: 100%; padding: 0;    
  -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1; }

.overlay-amenities .title { position: relative; background: transparent; }
.overlay-amenities .title h1 { font-size: 36px; line-height: 36px; background: transparent; color: #fff; }
.overlay-amenities .title p { font-size: 18px; line-height: 18px; background: transparent; color: #fff; }

.overlay-howto .title { left: 0; transform: translateX(0%); width: 100%; padding: 2em 0; position: relative; background: transparent; }
.overlay-howto .title h1 { font-size: 26px; line-height: 36px; background: transparent; color: #fff; }
.overlay-howto .title p { font-size: 16px; line-height: 0; margin-left: 9em;  background: transparent; color: #fff; }

.section--eat {max-width: 320px;margin: 1rem auto; text-align: center;}
.section--eat h1 ,
.section--meet h1 { font-size: 28px; }
.section--eat p ,
.section--meet.wedding p{ font-size: 16px; }
.section--eat h1 span { font-size: 24px; }
.section--eat > div { width: 100%;     margin: 1rem auto;}
.section--eat > div:first-child {margin-right: auto; margin: 1rem auto; }
.section--eat table h1 ,
.section--meet h2 span { font-size: 20px; }
.section--eat .abs-top ,
.section--eat .abs-bottom { display: none; }

.banner-play .img .abs-left ,
.banner-play .img .abs-right ,
.stay-aana-2.spa2 .abs-top-rigth ,
.stay-aana-2.spa2 .abs-bottom-left ,
.stay-aana-2.spa2 .abs-bottom-right ,
.stay-aana-2.spa2 .abs-top-left ,
.stay-aana-2.spa.last .abs-bottom-right { display: none; }
.group-menu-play ul li { width: 100%; padding: 15px; }

.stay-aana-2.spa > div ,
.stay-aana-2 .ajax-text table { width: 100%; }


.stay-aana-2.spa2 { margin: 5rem auto; }
.stay-aana-2.spa2 h2 ,
.stay-aana-2 .ajax-text table h2 { font-size: 18px; }
.stay-aana-2 .ajax-text table strong { font-size: 16px; }
.stay-aana-2 .ajax-text table tr td { font-size: 14px; }
.stay-aana-2.spa2 .img { margin: auto; }
.stay-aana-2.spa.last > div > div { min-height: inherit; }

.section--meet div { width: 100%; }


}



/************************************************/
/******************** 640 ***********************/
/************************************************/


@media only screen and (min-width: 640px) and (max-width: 979px) {

.desktop { display: none!important; }
.responsive { display: block!important; }

body { overflow: initial!important; }

header { max-width: 100%; display: table; width: 100%; display: table!important; }
header > div { display: table-cell!important; padding: 0 10px; width: initial; text-align: center; }
header > div.responsive  { display: table-cell!important; width: initial; text-align: center;  }
header > div:first-child { display: table-cell!important; width: initial; text-align: center;  }

/* header > div:first-child { display: inline-block; width: initial; text-align: center;  } */
header div:nth-child(2) { text-align: center; }
header div:nth-child(2) img { height: 40px; max-width: initial; }
header div:last-child ul.nav li { display: none; }
header div:last-child ul.nav li:last-child { display: block; width: 30px; height: 30px;}
header ul.nav li.menu-aana { margin: auto; }

.group-menu-look ul li { font-size: 12px; width: 14%; margin: 5px; letter-spacing: 0; }


.overlay-menu > div { width: 90%; display: block; margin: auto; }
.overlay ul li { margin-bottom: 1em; }
.overlay ul li a { letter-spacing: 3px; font-size: 20px; line-height: initial; }
.overlay .menu-right { left:1em ; }
.overlay .menu-right ul { width: 100%; padding: 0; }
.overlay .menu-right ul li { width: 49%; margin: 0; }
.overlay .menu-right ul.nav li > a { padding: 10px!important; }
.overlay .menu-right ul li:last-child { text-align: right; }
.overlay ul.nav { z-index: 999; }
.overlay ul.nav li ul.dropdown { left: 0; }
.overlay ul.nav li ul.dropdown li { width: 85%; }
.overlay ul.nav li ul.dropdown li:last-child { text-align: center; }
.overlay-howto-menu > div section { display: initial; }
.overlay-howto-menu > div section:first-child ,
.overlay-howto-menu > div section:last-child { width: 100%; padding: 0;  }


.booking ul { width: 100%; }
.booking ul li { display: none; }
.booking ul li:last-child  { display: block; width: 100%; padding: 5px 0 0; }
.booking ul li button p { font-size: 14px!important; padding: 5px 0; margin: 0; }

.owl-carousel { width: 100%!important; max-width: 100%; }
.slide-navigation { display: none; }

.section { padding: 0!important; display: block!important; height: auto!important; }

.aana-1 { height: 640px!important; }
.aana-1 .text { top: 60%; }

[data-am-fadeshow] .fs-quick-nav { bottom: 1em!important; }

.aana-2 { max-width: 100%; margin: auto; }
.aana-2 > div { padding:0; }
.aana-2 .content { margin-left: 0; margin: 3.5rem auto 0; }
.aana-2 .content h1 { font-size: 36px!important; }
.aana-2 .content h1 span { font-size: 26px!important; top: -2rem; right: -1.5rem; }
.aana-2 .content ul { margin: 1.5rem auto; padding: 0;  }
.aana-2 .content ul li { margin-right: 0; vertical-align: top; max-width: 49%; }
.aana-2 .content ul li p { font-size: 18px; }
.aana-2 .content .text { width: 100%; max-width: 700px; text-align: center; }
.aana-2 .content .text > p { margin:1em 0 0; }
.aana-2 .content button { margin: 1em auto; }
.aana-2 .owl-carousel { display: block!important; max-width: 640px; height: auto; }
.aana-2 .content ul::before { top: 50%; transform: translateY(-50%); left: 0; }
.aana-2 .content ul::after { top: 50%; transform: translateY(-50%); right: 0; }
.aana-2 .room-type .room-type-bg { height: 150px; }

.aana-3 { margin: 5rem auto; max-width: 640px; }
.aana-3 .text { max-width: 90%; text-align: center; }
.aana-3 .text h1 { font-size: 36px!important; }
.aana-3 .text h1 span { font-size: 36px!important; }
.aana-3 .text > p { margin:1em 0 0; font: bold 13px Swiss721SWA; line-height: 20px; }
.aana-3 div.group { width: 640px; height: 640px; margin:auto; }
.aana-3 > div { margin: 0 auto 1em; display: block; }
.aana-3 > div:last-child > img { margin-bottom: -5em; }
.aana-3  ul { text-align: center; margin-top: 2em; padding: 0; }
.aana-3  ul li { display: inline-block; vertical-align: bottom; margin-right: 0; width: 40%; }
.aana-3  ul li:first-child { margin-right: 1em; }
.aana-3  ul li div { display: block; width: 100%; margin-bottom: 1em; }
.aana-3 > div:nth-child(2) .ajax-img img { max-width: 621px; }

.aana-5 h1 { font-size: 36px; }
.aana-5 > div { max-width: 100%; display: block; }
.aana-5 .cell > div .text { text-align: center; margin-bottom: 2em; }
.aana-5 .owl-carousel { width: 90%!important;  margin: 1em auto; height: initial; }
.aana-5 .owl-carousel .item { margin: auto; }
.aana-5 .owl-carousel .owl-dot span { margin: 5px; }
.aana-5 img { margin: auto; }
.aana-5 img.responsive { display: none; }
.aana-5 .multiply { z-index: -1; top: -55%; display: none; }

.aana-7 { margin: auto; }
.aana-7 > div { display: table-cell; }
.aana-7 > div img { max-width: 100%; }
.aana-7 .text { max-width: 90%; margin: auto; }
.aana-7 .text > p { margin: 3em 0 1em; }
.aana-7 .text > h1 { font-size: 36px!important; line-height: 36px; }
.aana-7 .text > h2 { font-size: 22px!important;  }
.aana-7 .text ul { padding: 0; margin: 1em auto 0; }
.aana-7 .text ul li { margin:10px; }
.aana-7 .text ul li img { max-width: 50%; }
.aana-7 .group br { display: none; }
.aana-7 .group > div { display: block; margin: auto; }
.aana-7 button { margin:2em auto; }
.aana-7 button p { margin: 0; }

.stay-aana > div > div h1 { padding-top: 20px; }
.stay-aana > div > div h2 { font-size: 30px; line-height: 36px; }
.stay-aana > div > div .icon-ui { max-width: 50%; }
.stay-aana > div > div { max-width: 90%; margin:auto; }
.stay-aana ul li { margin: 10px; }
.stay-aana ul li img { max-width: 50%; }
.stay-aana-1 p { font-size: 16px; }
.stay-aana-2 { margin: 0 auto; }
.stay-aana-2 ,
.stay-aana-3 { max-width: 100%; background: transparent!important;}
.stay-aana-2 h1 ,
.stay-aana-3 h1 {font: 30px Optima-Bold-02; color: #E78E5A; text-transform: uppercase; text-align: center; margin: 20px auto; }
.stay-aana-2 > div ,
.stay-aana-3 > div { display: block; width: 100%; margin:auto; }
.stay-aana-2 .group ,
.stay-aana-3 .group { max-width: 100%; margin-left: auto; margin: auto; text-align: center; padding-bottom: 2em;  }
.stay-aana-2 .group > p ,
.stay-aana-3 .group > p { max-width: 95%; margin: 1em auto; }
.stay-aana-2 .group .text ,
.stay-aana-3 .group .text { text-align: left; }
.stay-aana-2 .owl-carousel ,
.stay-aana-3 .owl-carousel { width: 100%!important; margin-bottom: 1em; } 
.stay-aana-2 .item ,
.stay-aana-3 .item { margin:auto; background: transparent; }
.stay-aana-2 .item > div ,
.stay-aana-2 .item > div p ,
.stay-aana-2 .item > div span ,
.stay-aana-3 .item > div p ,
.stay-aana-3 .item > div span { font-size: 14px; }
.stay-aana-2 .item > div img ,
.stay-aana-3 .item > div img { max-width: 30%; }
.stay-aana-2 .item > div > div ,
.stay-aana-3 .item > div > div { display: table-cell; width: 50%;  vertical-align: middle; border: 1px solid #f2f2f2; }
.stay-aana-2 .item.responsive { display: none!important; }
.stay-aana-2 .section-item.desktop { display: block!important; }

.menu-right { right: 5px; top: 5px; z-index: 999; }
.menu-right ul.nav ,
.menu-right ul.nav li { margin: 0; }
.menu-right ul.nav li img { max-width: 30px; }
.overlay-amenities nav ,
.overlay-howto nav { height: 70%; overflow-y: auto; max-width: 90%; top: 0; transform: translateY(0);}
.overlay-amenities-menu > div ,
.overlay-howto-menu > div { column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; text-align: center; }
.overlay-amenities-menu > div > div ,
.overlay-howto-menu > div > div { padding: 10px 0; text-align: center; }
.overlay-amenities-menu > div > div ul li ,
.overlay-howto-menu > div > div ul li { font-size: 14px; }
.overlay-amenities-menu > div > div ul li br ,
.overlay-howto-menu > div > div ul li br { display: none; }

.overlay-amenities .title { position: relative; background: transparent; }
.overlay-amenities .title h1 { font-size: 36px; line-height: 36px; background: transparent; color: #fff; }
.overlay-amenities .title p { font-size: 18px; line-height: 18px; background: transparent; color: #fff; }

.overlay-howto .title { left: 0; transform: translateX(0%); width: 100%; padding: 2em 0; position: relative; background: transparent; }
.overlay-howto .title h1 { font-size: 26px; line-height: 36px; background: transparent; color: #fff; }
.overlay-howto .title p { font-size: 16px; line-height: 0; margin-left: 9em;  background: transparent; color: #fff; }


footer { display: block; background: #347de9; padding: 4em 0; }
footer br { display: none; }
footer > div { display: block;  max-width: 60%; margin: auto; }
footer > div ul { text-align: center; list-style: none; padding: 0;     margin: auto;}
footer > div ul li { margin-bottom: 2em; }
footer > div ul li p { font: 16px Optima-Bold-02; color: #fff; letter-spacing: 1px; text-transform: initial; line-height: initial; margin: 0!important; }
footer > div ul li h1 { font: 44px ShorelinesScriptBold; color: #fff; letter-spacing: 1px; text-transform: initial; margin: 0; line-height: 44px;  }
footer > div ul li h2 { font: 20px Optima-Regular-01; color: #fff; letter-spacing: 1px; text-transform: initial;  }
footer > div ul li > p { padding: 10px 0; width: fit-content; margin: auto!important; }
footer > div ul li > p a { color: #fff; }
footer > div ul li > div { float: initial; margin: 0 10px; display: inline-block; }
footer .icon-tel { background: url(../images/ui/AANA-RESORT-29.png)left center no-repeat;  padding-left: 3.5rem; }
footer .icon-mail { background: url(../images/ui/AANA-RESORT-30.png)left center no-repeat;  padding-left: 3.5rem; }
footer button { border: 4px solid #fff; background: url(../images/ui/AANA-RESORT-10.png) right center no-repeat; padding-right: 5em; background-position-x: 6.5rem; margin-top: 2em;}
footer button p { font: 16px Optima-Regular-01!important; color: #fff; letter-spacing: 1px; }

.section--eat { text-align: center; margin: 2rem auto; }
.section--eat > div { width: 45%; }
.section--eat h1  ,
.section--meet h1{ font-size: 28px; }
.section--eat p ,
.section--meet.wedding p { font-size: 14px; }
.section--eat p br { display: none; }
.section--eat h1 span { font-size: 20px; }
.section--eat button { margin-bottom: 1.5rem; }
.section--eat .abs-top ,
.section--eat .abs-bottom { display: none; }
.section--eat table h1 { font-size: 18px; }
.section--meet h2 { font-size: 20px; }

.stay-aana-2 .ajax-text { max-height: inherit; }

.btn-view { font-size: 14px; padding: 5px 20px;}
.shadow-right {box-shadow: 7px 7px #247D7A; }
.shadow-left {box-shadow: -7px -7px #247D7A; }


.banner-play .img .abs-left ,
.banner-play .img .abs-right ,
.stay-aana-2.spa2 .abs-top-rigth ,
.stay-aana-2.spa2 .abs-bottom-left ,
.stay-aana-2.spa2 .abs-bottom-right ,
.stay-aana-2.spa2 .abs-top-left ,
.stay-aana-2.spa.last .abs-bottom-right { display: none; }


.group-menu-play ul li { width: 30%; }
.group-menu-play ul li:first-child i ,
.group-menu-play ul li:nth-child(2) i ,
.group-menu-play ul li:last-child i { width: 100px; }
.group-menu-play ul li { font-size: 14px; }

.stay-aana-2.spa2 ,
.stay-aana-2.spa.last { margin: 5rem auto; }
.stay-aana-2.spa > div { width: 100%; text-align: center; }

}







/************************************************/
/******************** 980 ***********************/
/************************************************/


@media only screen and (min-width: 980px) and (max-width: 1200px) {
/*
.desktop { display: none!important; }
.responsive { display: block!important; }
*/
ul.nav { margin: 0;  }
ul.nav > li > a { padding: 5px 30px; }

.overlay nav { top: 40%; }
.overlay-menu > div ul.left { margin-top: 1rem; }
.overlay-menu > div ul.left li:first-child h1 { text-align: center; margin: 0; font-size: 30px; }
.overlay-menu > div ul.left li:first-child { display: block; margin-bottom: 0; }
.overlay-menu > div ul.left li:first-child:after { display: none; }
.overlay-menu > div ul.left li { padding-left: 2rem; font-size:  }
.overlay-menu > div ul.left li p { font-size: 14px; }


body { overflow: initial!important; }

header { max-width: 100%; display: table; width: 100%; padding: 1em 0; }
header .logo { height: 50px;}
/* header > div { display: table-cell!important; padding: 0 10px; width: initial; } */
header > div:first-child { display: inline-block; width: initial; text-align: center;  }
header div:nth-child(2) { text-align: left; }
header div:nth-child(2) img { height: 60px; max-width: initial; }
header div:last-child { text-align: center;}
/* header div:last-child ul.nav li { display: none; } */
/* header div:last-child ul.nav li:last-child { display: block; width: 30px; height: 30px;} */
header div:last-child ul.nav li:last-child {  width: 30px; height: 30px;}
header ul.nav li.menu-aana { margin: auto; }

.reservation_box { top: 80px!important;}

ul.nav li { margin-right: 0; }

.overlay-menu > div { width: 90%; display: block; margin: auto; }
.overlay ul li { margin-bottom: 1em; }
.overlay ul li a { letter-spacing: 3px; font-size: 20px; line-height: initial; }
.overlay .menu-right { left:1em ; }
.overlay .menu-right ul { width: 100%; padding: 0; }
.overlay .menu-right ul li { width: 49%; margin: 0; }
.overlay .menu-right ul.nav li > a { padding: 10px!important; }
.overlay .menu-right ul li:last-child { text-align: right; }
.overlay ul.nav { z-index: 999; }
.overlay ul.nav li ul.dropdown { left: 0; }
.overlay ul.nav li ul.dropdown li { width: 85%; }
.overlay ul.nav li ul.dropdown li:last-child { text-align: center; }
.overlay-howto-menu > div section { display: initial; }
.overlay-howto-menu > div section:first-child ,
.overlay-howto-menu > div section:last-child { width: 100%; padding: 0;  }


button { border: 3px solid #3783f3; }

.booking ul { width: 100%; }
.booking ul li { display: none; }
.booking ul li:last-child  { display: block; width: 100%; padding: 5px 0 0; }
.booking ul li button p { font-size: 14px!important; padding: 5px 0; margin: 0; }

.owl-carousel { width: 100%!important; max-width: 100%; }
.slide-navigation { display: none; }

.section { padding: 0!important; display: block!important; height: auto!important; }

.aana-1 { height: 640px!important; }
.aana-1 .text { top: 60%; }

[data-am-fadeshow] .fs-quick-nav { bottom: 1em!important; }


.aana-2 { max-width: 100%; margin: auto; }
.aana-2 > div { padding:0; }
.aana-2 .content { margin-left: 0; margin: 3.5rem auto 0; }
.aana-2 .content h1 { font-size: 36px!important; }
.aana-2 .content h1 span { font-size: 26px!important; top: -2rem; right: -1.5rem; }
.aana-2 .content ul { margin: 1.5rem auto; padding: 0;  }
.aana-2 .content ul li { margin-right: 0; vertical-align: top; max-width: 49%; }
.aana-2 .content ul li p { font-size: 18px; }
.aana-2 .content .text { width: 100%; max-width: 700px; text-align: center; }
.aana-2 .content .text > p { margin:1em 0 0; }
.aana-2 .content button { margin: 1em auto; }
.aana-2 .owl-carousel { display: block!important; max-width: 640px; height: auto; }
.aana-2 .content ul::before { top: 50%; transform: translateY(-50%); left: 0; }
.aana-2 .content ul::after { top: 50%; transform: translateY(-50%); right: 0; }
.aana-2 .room-type .room-type-bg { height: 150px; }

.aana-3 { max-width: 980px; }
.aana-3 .text { max-width: 100%%; text-align: center; }
.aana-3 .text h1 { font-size: 36px!important; }
.aana-3 .text h1 span { font-size: 36px!important; }
.aana-3 .text > p { margin:1em 0 0; font: bold 13px Swiss721SWA; line-height: 20px; }
.aana-3 .group { width: 518px; height: 518px;}
.aana-3 > div { margin: 0 auto 1em; display: table-cell; }
.aana-3  ul { text-align: center; margin-top: 2em; }
.aana-3 > div:last-child ul li { text-align: right; padding: 15px 0; }
.aana-3 > div:last-child ul li p { font-size: 20px; }
.aana-3 .owl-carousel { height: auto; }
.aana-3 .responsive ,
.aana-3 .multiply { display: none!important; }
.aana-3 .desktop { display: table-cell!important; }
.aana-3 .ajax-img img { width: 500px; }


.aana-5 h1 { font-size: 36px; }
.aana-5 > div { max-width: 100%; display: block; }
.aana-5 .cell > div .text { text-align: center; margin-bottom: 2em; }
.aana-5 .owl-carousel { width: 90%!important;  margin: 1em auto; height: initial; }
.aana-5 .owl-carousel .item { margin: auto; }
.aana-5 .owl-carousel .owl-dot span { margin: 5px; }
.aana-5 img { margin: auto; }
.aana-5 img.responsive { display: none; }
.aana-5 .item > img { max-width: 100%; }

.aana-6 { display: block; padding: 0em!important; }
.aana-6 > div { background: url(../images/AANA-RESORT-KOHCHANG-18.jpg) center no-repeat; background-size: cover; display: block; padding: 5rem 0;     height: initial; }
.aana-6 .text { max-width: 90%; }
.aana-6 .text > p { margin: 1em auto; }
.aana-6 .text > h1 { font-size: 36px!important; line-height: 36px; }
.aana-6 .btn { text-align: center; }
.aana-6 button { margin-left: 0; }
.aana-6 button p { margin: 0; }


.aana-7 > div { display: table-cell; }
.aana-7 > div img { max-width: 100%; }
.aana-7 .text { max-width: 90%; margin: auto;  }
.aana-7 .text > p { margin: 3em 0 1em; }
.aana-7 .text > h1 { font-size: 36px!important; line-height: 36px; }
.aana-7 .text > h2 { font-size: 22px!important;  }
.aana-7 .text ul { padding: 0; margin: 1em auto 0; }
.aana-7 .text ul li { margin:10px; }
.aana-7 .text ul li img { max-width: 50%; }
.aana-7 .group br ,
.aana-7 .abs { display: none; }
.aana-7 .group > div { display: block; margin: auto; }
.aana-7 button { margin:2em auto; }
.aana-7 button p { margin: 0; }


.stay-aana > div > div h1 { padding-top: 20px; }
.stay-aana > div > div h2 { font-size: 30px; line-height: 36px; }
.stay-aana > div > div .icon-ui { max-width: 50%; }
.stay-aana > div > div { max-width: 90%; margin:auto; }
.stay-aana ul li { margin: 10px; }
.stay-aana ul li img { max-width: 50%; }
.stay-aana-2 ,
.stay-aana-3 { max-width: 100%; background: transparent!important;}
.stay-aana-2 h1 ,
.stay-aana-3 h1 {font: 30px ShorelinesScriptBold; color: #000; text-align: center; margin: 20px auto; }
.stay-aana-2 .group ,
.stay-aana-3 .group { max-width: 100%; margin-left: auto; margin: auto; text-align: center; padding-bottom: 2em;  }
.stay-aana-2 .group > p ,
.stay-aana-3 .group > p { max-width: 95%; margin: 1em auto; }
.stay-aana-2 .group .text ,
.stay-aana-3 .group .text { text-align: left; }
.stay-aana-2 .owl-carousel ,
.stay-aana-3 .owl-carousel { width: 100%!important; margin-bottom: 1em; } 
.stay-aana-2 .item ,
.stay-aana-3 .item { margin:auto; background: transparent; }
.stay-aana-2 .item > div p ,
.stay-aana-2 .item > div span ,
.stay-aana-3 .item > div p ,
.stay-aana-3 .item > div span { font-size: 14px; }
.stay-aana-2 .item > div img ,
.stay-aana-3 .item > div img { max-width: 30%; }
.stay-aana-2 .item > div > div ,
.stay-aana-3 .item > div > div { display: table-cell; width: 50%;  vertical-align: middle; border: 1px solid #f2f2f2; }
.stay-aana-2 > div { display: inline-block; width: 49%; }
.stay-aana-2 > div img { max-width: 100%; }

.flexslider { max-width: 507px!important; }

.section--eat { max-width: 95%; }
.section--eat .abs-top ,
.section--eat .abs-bottom { display: none; }

.menu-right { right: 5px; top: 5px; z-index: 999; }
.menu-right ul.nav ,
.menu-right ul.nav li { margin: 0; }
.menu-right ul.nav li img { max-width: 30px; }
.overlay-amenities nav ,
.overlay-howto nav { height: 70%; overflow-y: auto; max-width: 90%; top: 0; transform: translateY(0);}
.overlay-amenities-menu > div ,
.overlay-howto-menu > div { column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; text-align: center; }
.overlay-amenities-menu > div > div ,
.overlay-howto-menu > div > div { padding: 10px 0; text-align: center; }
.overlay-amenities-menu > div > div ul li ,
.overlay-howto-menu > div > div ul li { font-size: 14px; }
.overlay-amenities-menu > div > div ul li br ,
.overlay-howto-menu > div > div ul li br { display: none; }

.overlay-amenities .title { position: relative; background: transparent; }
.overlay-amenities .title h1 { font-size: 36px; line-height: 36px; background: transparent; color: #fff; }
.overlay-amenities .title p { font-size: 18px; line-height: 18px; background: transparent; color: #fff; }

.overlay-howto .title { left: 0; transform: translateX(0%); width: 100%; padding: 2em 0; position: relative; background: transparent; }
.overlay-howto .title h1 { font-size: 26px; line-height: 36px; background: transparent; color: #fff; }
.overlay-howto .title p { font-size: 16px; line-height: 0; margin-left: 9em;  background: transparent; color: #fff; }


footer { display: block; background: #347de9; padding: 4em 0; }
footer br { display: none; }
footer > div { display: block;  max-width: 60%; margin: auto; }
footer > div ul { text-align: center; list-style: none; padding: 0;     margin: auto;}
footer > div ul li { margin-bottom: 2em; }
footer > div ul li p { font: 16px Optima-Bold-02; color: #fff; letter-spacing: 1px; text-transform: initial; line-height: initial; margin: 0!important; }
footer > div ul li h1 { font: 44px ShorelinesScriptBold; color: #fff; letter-spacing: 1px; text-transform: initial; margin: 0; line-height: 44px;  }
footer > div ul li h2 { font: 20px Optima-Regular-01; color: #fff; letter-spacing: 1px; text-transform: initial;  }
footer > div ul li > p { padding: 10px 0; width: fit-content; margin: auto!important; }
footer > div ul li > p a { color: #fff; }
footer > div ul li > div { float: initial; margin: 0 10px; display: inline-block; }
footer .icon-tel { background: url(../images/ui/AANA-RESORT-29.png)left center no-repeat;  padding-left: 3.5rem; }
footer .icon-mail { background: url(../images/ui/AANA-RESORT-30.png)left center no-repeat;  padding-left: 3.5rem; }
footer button { border: 4px solid #fff; background: url(../images/ui/AANA-RESORT-10.png) right center no-repeat; padding-right: 5em; background-position-x: 6.5rem; margin-top: 2em;}
footer button p { font: 16px Optima-Regular-01!important; color: #fff; letter-spacing: 1px; }

.banner-play .img .abs-left ,
.banner-play .img .abs-right ,
.stay-aana-2.spa2 .abs-top-rigth ,
.stay-aana-2.spa2 .abs-bottom-left ,
.stay-aana-2.spa2 .abs-bottom-right ,
.stay-aana-2.spa2 .abs-top-left ,
.stay-aana-2.spa.last .abs-bottom-right { display: none; }

.stay-aana-2 .ajax-text table h2 { font-size: 24px; }
.stay-aana-2.spa.last table { width: 100%; }


}







/************************************************/
/******************** 1300 ***********************/
/************************************************/


@media only screen and (min-width: 1201px) and (max-width: 1599px) {

.desktop { display: none!important; }
.responsive { display: block; }

.overlay nav .desktop { display: block!important; }
.overlay ul { height: auto; }

header img { height: 60px; }

.booking p { font-size: 12px; }
.booking ul { display: table; }
.booking ul li { width: auto; padding: 10px ; }
.booking ul li button p { font-size: 16px!important; padding: 10px 0 0; }
.booking ul li input { width: 40px; font-size: 20px; }
.booking ul li input.promocode { font-size: 14px; }
.booking ul li:last-child { padding: 0 2.5em; }

.overlay nav { height: auto; top: 50%; }
.overlay ul li a { font-size: 26px; }
.overlay-menu > div ul.left li p { font-size: 14px; line-height: 26px; }
.overlay-howto-menu > div { padding: 1.5rem; }
.overlay-howto-menu > div section > div > img { max-height: 35px; }
.overlay-howto-menu > div section p { font-size: 12px; }
.overlay-howto-menu > div section { vertical-align: middle; padding: 0; }
.overlay-howto-menu > div section:first-child { width: 69%; }
.overlay-howto-menu > div section:last-child { width: 29%; }
.overlay-howto-menu > div section ul li { font-size: 14px; }

.owl-carousel .owl-nav .owl-prev { left: 3em; }
.owl-carousel .owl-nav .owl-next { right: 3em; }

.overlay-amenities .menu-right { top: 0; }
.overlay-amenities .title h1 { font-size: 30px; line-height: 40px; }
.overlay-amenities .title p { font-size: 16px; line-height: 8px; }
.overlay-amenities-menu > div { padding: 10px 1em; }
.overlay-amenities-menu > div > div { padding: 10px; }
.overlay-amenities-menu > div > div > img { max-height: 65px; }
.overlay-amenities-menu > div > div ul li { font-size: 12px; }


.overlay-howto .menu-right { top: 0; }
.overlay-howto .title { padding: 0 3em; }
.overlay-howto .title h1 { font-size: 40px; line-height: 40px; }
.overlay-howto .title p { font-size: 16px; line-height: 8px; }
.overlay-howto-menu > div { padding: 10px 1em; }
.overlay-howto-menu > div > div { padding: 10px; }
.overlay-howto-menu > div > div > img { max-height: 65px; }
.overlay-howto-menu > div > div ul li { font-size: 12px; }

.aana-2 { max-width: 100%; margin: auto; }
.aana-2 > div { padding:0; }
.aana-2 .content { margin-left: 0; margin: 3.5rem auto 0; }
.aana-2 .content h1 { font-size: 36px!important; }
.aana-2 .content .th h1 { font: 48px CSChatThai!important; }
.aana-2 .content h1 span { font-size: 26px!important; top: -2rem; right: -1.5rem; }
.aana-2 .content ul { margin: 1.5rem auto; padding: 0;     max-width: 95%;  }
.aana-2 .content ul li { margin-right: 0; vertical-align: top; }
.aana-2 .content ul li p { font-size: 18px; }
.aana-2 .content .text { width: 100%; max-width: 700px; text-align: center; }
.aana-2 .content .text > p { margin:1em 0 0; }
.aana-2 .content button { margin: 1em auto; }
.aana-2 .owl-carousel { display: block!important; max-width: 640px; height: auto; }
.aana-2 .content ul::before { top: 50%; transform: translateY(-50%); left: 0; }
.aana-2 .content ul::after { top: 50%; transform: translateY(-50%); right: 0; }
.aana-2 .room-type { margin: auto; max-width: 100%; }
.aana-2 .room-type .room-type-bg { height: 150px; }

.aana-3 { max-width: 980px; }
.aana-3 .text { max-width: 100%%; text-align: center; }
.aana-3 .text h1 { font-size: 36px!important; }
.aana-3 .text h1 span { font-size: 36px!important; }
.aana-3 .text > p { margin:1em 0 0; font: bold 13px Swiss721SWA; line-height: 20px; }
.aana-3 .group { width: 518px; height: 518px;}
.aana-3 > div { margin: 0 auto 1em; display: table-cell; }
.aana-3  ul { text-align: center; margin-top: 2em; }
.aana-3 > div:last-child ul li { text-align: right; padding: 15px 0; }
.aana-3 > div:last-child ul li p { font-size: 20px; }
.aana-3 .owl-carousel { height: auto; }
.aana-3 .responsive ,
.aana-3 .multiply { display: none!important; }
.aana-3 .desktop { display: table-cell!important; }
.aana-3 .ajax-img img { width: 500px; }


.aana-5 h1 { font-size: 36px; }
.aana-5 > div { max-width: 100%; display: block; }
.aana-5 .cell > div .text { text-align: center; margin-bottom: 2em; }
.aana-5 .owl-carousel { width: 90%!important;  margin: 4em auto; height: initial; }
.aana-5 .owl-carousel .item { margin: auto; }
.aana-5 .owl-carousel .owl-dot span { margin: 5px; }
.aana-5 img { margin: auto; }
.aana-5 img.responsive { display: none; }
.aana-5 .item > img { max-width: 100%; }

.aana-6 { display: block; padding: 0em!important; }
.aana-6 > div { background: url(../images/AANA-RESORT-KOHCHANG-18.jpg) center no-repeat; background-size: cover; display: block; padding: 5rem 0;     height: initial; }
.aana-6 .text { max-width: 90%; }
.aana-6 .text > p { margin: 1em auto; }
.aana-6 .text > h1 { font-size: 36px!important; line-height: 36px; }
.aana-6 .btn { text-align: center; }
.aana-6 button { margin-left: 0; }
.aana-6 button p { margin: 0; }


.aana-7 > div { display: table-cell; }
.aana-7 > div img { max-width: 100%; }
.aana-7 .text { max-width: 90%; margin: auto;  }
.aana-7 .text > p { margin: 3em 0 1em; }
.aana-7 .text > h1 { font-size: 36px!important; line-height: 36px; }
.aana-7 .text > h2 { font-size: 22px!important;  }
.aana-7 .text ul { padding: 0; margin: 1em auto 0; }
.aana-7 .text ul li { margin:10px; }
.aana-7 .text ul li img { max-width: 50%; }
.aana-7 .abs { display: none; }
.aana-7 .group > div { display: inline-block; margin: auto; padding-right: 2rem; }
.aana-7 button { margin:2em auto; }
.aana-7 button p { margin: 0; }


.stay-aana > div > div:first-child > img { max-width: 20%; }
.stay-aana > div > div h2 { font-size: 40px; line-height: 54px; }
.stay-aana ul li { margin: 1rem; }

.special-aana-1 { max-width: 80%; margin: auto; }
.special-aana-1 > div > h1 { display: none; }
.special-aana-1 > div > ul li { padding: 0; margin: auto; }
.special-aana-1 > div > ul li > h1 { margin: 10px auto 0; }
.special-aana-1 > div > ul li > p { font-size: 14px; }
.special-aana-1 > div > ul li > img { max-width: 85%; }

.nearby-aana-2 > div > h1 { display: none; }
.nearby-aana-2 > div > div.img { max-width: 40%; }
.nearby-aana-2 > div > div.txt > div { padding: 2em; }
.nearby-aana-2 button.yellow { margin-top: 2em; margin-left: 2em; }

#owl-carousel2.owl-carousel .owl-item img { max-width: 100%; }
#owl-carousel2.owl-carousel { width: 500px!important; }

.aana-6 > div { background-size: contain; }

.stay-aana ul li img { max-height: 50px; }
.stay-aana ul li p { font-size: 13px; }

.stay-aana-2 button p { padding: 8px 16px; }
/*.stay-aana-2 .group { max-width: 640px; margin-left: 0em; }*/
.stay-aana-2 .group > p { font-size: 16px; }
.stay-aana-2 .group h1.desktop { display: block!important; font-size: 36px; line-height: 40px; }
.stay-aana-2 .group .text p { font-size: 20px; margin-bottom: 0; }
.stay-aana-2 .group .text ul li { font-size: 14px; }
.stay-aana-2 .owl-carousel { width: 500px!important; margin-bottom: 1em; }
.stay-aana-2 .owl-carousel .owl-item img { max-width: 100%; width: initial; }
.stay-aana-2 > div { width: 49%; display: inline-block; }
.stay-aana-2 > div.desktop { display:inline-block!important; }
.stay-aana-2 .content { margin-left: -3em; }
.stay-aana-2 .content > .item { width: 500px; padding: 1em; }
.stay-aana-2 .content > .item img { max-height: 25px; }
.stay-aana-2 .item > div p ,
.stay-aana-2 .item > div span { font-size: 12px; }

.stay-aana-3 button p { padding: 8px 16px; }
.stay-aana-3 .group { max-width: 640px; margin-left: 4.5em; }
.stay-aana-3 .group > p { font-size: 12px; }
.stay-aana-3 .group h1.desktop { display: block!important; font-size: 40px; line-height: 40px; }
.stay-aana-3 .group .text p { font-size: 20px; margin-bottom: 0; }
.stay-aana-3 .group .text { padding: 1em 2em; }
.stay-aana-3 .group .text ul li { font-size: 12px; }
.stay-aana-3 .owl-carousel { width: 500px!important; margin-bottom: 1em; margin: auto; }
.stay-aana-3 .owl-carousel .owl-item img { max-width: 100%; width: initial; }
.stay-aana-3 > div.desktop { display:table-cell!important; }
.stay-aana-3 .content > .item.desktop { display: table!important; width: 500px; padding: 1em; margin: auto; }
.stay-aana-3 .content > .item img { max-height: 25px; }
.stay-aana-3 .item > div p ,
.stay-aana-3 .item > div span { font-size: 12px; }

.special-aana > div { max-width: 1024px; }
.special-aana > div > div.desktop { display: inline-block!important; }
.special-aana > div > div.txt .blue { background-size: 130px; padding: 1em 5em; }
.special-aana > div h1 { display: none; }
.special-aana > div h2 { font-size: 16px; margin-bottom: 10px; }
.special-aana > div > div p { font-size: 12px; line-height: initial; }
.special-aana .owl-carousel { height: 180px; }
.special-aana .owl-carousel .owl-dots { padding-top: 5px; }
.special-aana > div > div > div > p { display: inline-block; vertical-align: middle; margin-right: 1em; }
.special-aana .icon-mail ,
.special-aana .icon-tel { background-size: contain; }
.special-aana button { margin: 10px auto; }
}


/************************************************/
/******************** 1300 ***********************/
/************************************************/


@media only screen and (min-width: 1600px) and (max-width: 1899px) {

header img { height: 60px; }

.overlay nav { height: 70%; }

.booking ul { display: table; }
.booking ul li { width: auto; padding: 10px 2em; }
.booking ul li button p { font-size: 16px!important; }
.booking ul li:last-child { padding: 0 2.5em; }

.owl-carousel .owl-nav .owl-prev { left: 3em; }
.owl-carousel .owl-nav .owl-next { right: 3em; }

.overlay-amenities .title h1 { font-size: 50px; line-height: 50px; }
.overlay-amenities-menu > div { padding: 0; }
.overlay-amenities-menu > div > div ul li ,
.overlay-howto.open li { font-size: 13px; }
.overlay-howto .title h1 { font-size: 40px; line-height: 50px; }

.aana-2 { max-width: 100%; margin: auto; }
.aana-2 > div { padding:0; }
.aana-2 .content { margin-left: 0; margin: 3.5rem auto 0; }
.aana-2 .content h1 { font-size: 36px!important; }
.aana-2 .content h1 span { font-size: 26px!important; top: -2rem; right: -1.5rem; }
.aana-2 .content ul { margin: 1.5rem auto; padding: 0;    }
.aana-2 .content ul li { margin-right: 0; vertical-align: top; }
.aana-2 .content ul li p { font-size: 18px; }
.aana-2 .content .text { width: 100%; max-width: 800px; text-align: center; }
.aana-2 .content .text > p { margin:1em 0 0; }
.aana-2 .content button { margin: 1em auto; }
.aana-2 .owl-carousel { display: block!important; max-width: 640px; height: auto; }
.aana-2 .content ul::before { top: 50%; transform: translateY(-30%) rotate(-60deg); left: -6vw; }
.aana-2 .content ul::after { top: 50%; transform: translateY(-30%) rotate(60deg); right: -6vw; }
.aana-2 .room-type { margin: auto; max-width: 100%; }
.aana-2 .room-type .room-type-bg { height: 150px; }

.aana-2 .content .th h1 { font-size: 50px!important; font: 36px CSChatThai; font-weight: 600; }

.aana-3 { max-width: 980px; }
.aana-3 .text { max-width: 100%%; text-align: center; }
.aana-3 .text h1 { font-size: 36px!important; }
.aana-3 .text h1 span { font-size: 36px!important; }
.aana-3 .text > p { margin:1em 0 0; font: bold 13px Swiss721SWA; line-height: 20px; }
.aana-3 .group { width: 518px; height: 518px;}
.aana-3 > div { margin: 0 auto 1em; display: table-cell; }
.aana-3  ul { text-align: center; margin-top: 2em; }
.aana-3 > div:last-child ul li { text-align: right; padding: 15px 0; }
.aana-3 > div:last-child ul li p { font-size: 20px; }
.aana-3 .owl-carousel { height: auto; }
.aana-3 .responsive ,
.aana-3 .multiply { display: none!important; }
.aana-3 .desktop { display: table-cell!important; }
.aana-3 .ajax-img img { width: 500px; }

.aana-4 { max-width: 980px; }
.aana-4 .text { max-width: 100%; text-align: center; }
.aana-4 .text h1 { font-size: 36px!important; }
.aana-4 .text h1 span { font-size: 36px!important; }
.aana-4 .text > p { margin:1em 0 0; font: bold 13px Swiss721SWA; line-height: 20px; }
.aana-4 .group { width: 518px; height: 518px;}
.aana-4 > div { margin: 0 auto 1em; display: table-cell; }
.aana-4  ul { text-align: left; margin-top: 2em; }
.aana-4 > div:last-child ul li { text-align: right; padding: 15px 0; }
.aana-4 > div:last-child ul li p { font-size: 20px; }
.aana-4 .owl-carousel { height: auto; }
.aana-4 .responsive ,
.aana-4 .multiply { display: none!important; }
.aana-4 .desktop { display: table-cell!important; }
.aana-4 .ajax-img img { width: 500px; }




.aana-5 h1 { font-size: 36px; }
.aana-5 > div { max-width: 100%; display: block; }
.aana-5 .cell > div .text { text-align: center; margin-bottom: 2em; }
.aana-5 .owl-carousel { margin: 4em auto; height: initial; }
.aana-5 .owl-carousel .item { margin: auto; }
.aana-5 .owl-carousel .owl-dot span { margin: 5px; }
.aana-5 img { margin: auto; }
.aana-5 img.responsive { display: none; }

.aana-6 { display: block; padding: 0em!important; }
.aana-6 > div { background: url(../images/AANA-RESORT-KOHCHANG-18.jpg) center no-repeat; background-size: cover; display: block; padding: 5rem 0;     height: initial; }
.aana-6 .text { max-width: 90%; }
.aana-6 .text > p { margin: 1em auto; }
.aana-6 .text > h1 { font-size: 36px!important; line-height: 36px; }
.aana-6 .btn { text-align: center; }
.aana-6 button { margin-left: 0; }
.aana-6 button p { margin: 0; }


.aana-7 > div { display: table-cell; }
.aana-7 > div img { max-width: 100%; }
.aana-7 .text { max-width: 90%; margin: auto;  }
.aana-7 .text > p { margin: 3em 0 1em; }
.aana-7 .text > h1 { font-size: 36px!important; line-height: 36px; }
.aana-7 .text > h2 { font-size: 22px!important;  }
.aana-7 .text ul { padding: 0; margin: 1em auto 0; }
.aana-7 .text ul li { margin:10px; }
.aana-7 .text ul li img { max-width: 50%; }
.aana-7 .abs { display: none; }
.aana-7 .group > div { display: inline-block; margin: auto; padding-right: 2rem; }
.aana-7 button { margin:2em auto; }
.aana-7 button p { margin: 0; }



.special-aana-1 > div h1 { margin-bottom: 0; line-height: unset; }
.special-aana-1 > div > ul li { padding: 3em; }

.nearby-aana-2 > div > div.img.responsive ,
.special-aana > div > div.img.responsive ,
.stay-aana-2 .responsive ,
.stay-aana-3 .responsive { display: none!important; }
.nearby-aana-2 > div > div.img { max-width: 50%; }

.special-aana > div h1 { font-size: 40px; }
.special-aana > div h1 span { font-size: 40px; }
.special-aana > div h2 { font-size: 20px; }
.special-aana > div > div p { font-size: 14px; line-height: initial; }
.special-aana .owl-carousel { height: 200px; width: 400px!important; }

.stay-aana ul li img { max-width: 50%; }
.stay-aana ul li p { font-size: 14px; }
.stay-aana-2 .owl-carousel ,
.stay-aana-3 .owl-carousel { margin-bottom: 1em; height: 450px!important; }
.stay-aana-2 .owl-carousel .owl-item ,
.stay-aana-3 .owl-carousel .owl-item { height: 400px; overflow: hidden; }
.stay-aana-2 .content > .item > div > img ,
.stay-aana-3 .content > .item > div > img { max-width: 30px; }
.stay-aana-2 .content > .item ,
.stay-aana-3 .content > .item { padding: 10px; }

.stay-aana-2 .group .text p ,
.stay-aana-3 .group .text p { font-size: 20px; }
.stay-aana-2 .group .text ul li ,
.stay-aana-3 .group .text ul li ,
.stay-aana-2 .group > p ,
.stay-aana-3 .group > p { font-size: 14px; }
.stay-aana-2 .group h1 ,
.stay-aana-3 .group h1 { line-height: 45px; }

.stay-aana-2 .item > div p ,
.stay-aana-3 .item > div p { font-size: 14px; }
.stay-aana-2 .item > div span ,
.stay-aana-3 .item > div span { font-size: 14px; }


.overlay-howto-menu > div { padding: 0; }

}