/*--------------------------------------------------------------
# Desktop (Others)
--------------------------------------------------------------*/
@media only screen and (max-width: 1024px) and (min-width: 768px) {
  body {
    min-width: 1024px; }

  .large-1, .row .large-1 {
    width: 8.33333%; }

  .large-2, .row .large-2 {
    width: 16.66667%; }

  .large-3, .row .large-3 {
    width: 25%; }

  .large-4, .row .large-4 {
    width: 33.33333%; }

  .large-5, .row .large-5 {
    width: 41.66667%; }

  .large-6, .row .large-6 {
    width: 50%; }

  .large-7, .row .large-7 {
    width: 58.33333%; }

  .large-8, .row .large-8 {
    width: 66.66667%; }

  .large-9, .row .large-9 {
    width: 75%; }

  .large-10, .row .large-10 {
    width: 83.33333%; }

  .large-11, .row .large-11 {
    width: 91.66667%; }

  .large-12, .row .large-12 {
    width: 100%; }

  .column.centered, .columns.centered {
    float: nlarge-1;
    margin: 0 auto; }

  .large-block-grid-4 > li {
    width: 25% !important; }

  .large-block-grid-4 > li:nth-of-type(1n) {
    clear: none !important; }

  .large-block-grid-4 > li:nth-of-type(4n+1) {
    clear: both !important; }

  .large-block-grid-3 > li {
    width: 33.33333% !important;
    list-style: none; }

  .large-block-grid-3 > li:nth-of-type(1n) {
    clear: none !important; }

  .large-block-grid-3 > li:nth-of-type(3n+1) {
    clear: both !important; }

  .large-block-grid-2 > li {
    width: 50% !important; }

  .large-block-grid-2 > li:nth-of-type(1n) {
    clear: none !important; }

  .large-block-grid-2 > li:nth-of-type(2n+1) {
    clear: both !important; } }
/*--------------------------------------------------------------
# Tablet 
--------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
  .desktop {
    display: none; }

  .mobile {
    display: block; }

  .mobile-marginbottom > div.columns {
    margin-bottom: 20px; }
  .mobile-marginbottom > div.columns:last-child {
    margin-bottom: 0; }

  #topfooter #nav_menu-2, #topfooter #text-2, #topfooter #text-3, #topfooter #text-4 {
    width: 100%; }

  /*#############################################################
  # WELCOME   
  ##############################################################*/
  #welcome h1 {
    text-align: center; }
  #welcome #container-content > ul > li {
    margin-left: 0; }
  #welcome #container-content > ul > li #Website {
    margin: 20px 0; }
  #welcome #container-content > ul > li #Website > ul > li {
    margin-bottom: 0;
    width: 50%; }
  #welcome #container-content > ul > li:nth-of-type(1) {
    width: 100%; }
  #welcome #container-content > ul > li:nth-of-type(2) {
    width: 100%; }
  #welcome hr {
    margin-top: 50px; }
  #welcome #link {
    padding-top: 15px; }

  #link-website #container-main > ul > li:nth-of-type(even) {
    padding-left: 0; }

  /*#############################################################
  # Contact Us Page
  ##############################################################*/
  #contactpage-map iframe {
    height: 200px; }

  /*#############################################################
  # BANNER SECTION
  ##############################################################*/
  .left {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 90%; }

  .center {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 90%; }

  .right {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    right: auto;
    width: 90%; }

  #banner-slider .opacity {
    background-color: rgba(0, 0, 0, 0.5); }
  #banner-slider ul li #wrapper .row {
    position: relative;
    height: 100%; }
  #banner-slider ul li #wrapper .row .large-12 {
    position: relative;
    height: 100%;
    padding: 0; }
  #banner-slider ul li #wrapper .row .large-12 #content .slide-title {
    font-size: 30px;
    color: white;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 0; }

  /*#############################################################
   # TOUR
   ##############################################################*/
  #tour .row {
    max-width: auto; }
  #tour .row ul li {
    width: 50%;
    margin-left: 0;
    margin-bottom: 15px; }
  #tour .row ul li:nth-last-child(1) {
    margin-bottom: 0; }
  #tour .row ul li div#eachtour #Image {
    position: relative;
    cursor: pointer; }

  /*#############################################################
  # Logo
  ##############################################################*/
  #logo-icons ul li {
    text-align: center;
    float: left;
    width: 25%; }

  /*#############################################################
  # FeedBack
  ##############################################################*/
  #feedback #container .lSAction a.lSPrev {
    left: 42%; }
  #feedback #container .lSAction a.lSPrev:before {
    left: 0;
    top: 50%; }
  #feedback #container .lSAction a.lSNext {
    right: 42%; }
  #feedback #container .lSAction a.lSNext:before {
    left: 0;
    top: 50%; }

  /*#############################################################
  # CTA
  ##############################################################*/
  #cta {
    text-align: center; }
  #cta #container h2 {
    margin-left: auto; }
  #cta #container h2.cafe-13 {
    font-size: 24px;
    text-align: center;
    margin-left: 0; }

  /*#############################################################
  # Thumbnail Theme
  ##############################################################*/
  ul#images-side li {
    width: 50%;
    padding: 5px; }
  ul#images-side li img {
    margin: 0 auto;
    display: block; }

  /*#############################################################
  # Circle Theme
  ##############################################################*/
  #cafe-images ul.grid > li {
    width: 25%;
    float: left;
    padding: 0 5px 10px 5px;
    margin-left: 0; }
  #cafe-images ul.grid > li:first-child {
    margin-left: 0; }
  #cafe-images ul.grid > li a:hover div.each-container > .opacity {
    background-color: rgba(0, 0, 0, 0.6); }
  #cafe-images ul.grid > li a:hover div.each-container > .detail-container {
    left: 50%; }
  #cafe-images ul.grid > li a div.each-container {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    background-color: white;
    border: 10px solid #EBEBEB; }
  #cafe-images ul.grid > li a div.each-container .opacity {
    background-color: transparent; }
  #cafe-images ul.grid > li a div.each-container .detail-container {
    position: absolute;
    top: 50%;
    left: -50%;
    right: 0;
    padding: 5px 10px;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    width: 90%; } }
/*--------------------------------------------------------------
# Phone (Responsive-MobileView)
--------------------------------------------------------------*/
@media only screen and (max-width: 540px) {
  /*#############################################################
   # Feedback
   ##############################################################*/
  #feedback #container ul li div#quote {
    padding: 20% 1%; }
  #feedback #container .lSAction a.lSPrev {
    left: 37%; }
  #feedback #container .lSAction a.lSPrev:before {
    left: 0;
    top: 1%; }
  #feedback #container .lSAction a.lSNext {
    right: 37%; }
  #feedback #container .lSAction a.lSNext:before {
    left: 0;
    top: 1%; }

  /*#############################################################
  # Logo
  ##############################################################*/
  #logo-icons ul li {
    text-align: center;
    float: left;
    width: 50%; }

  /*#############################################################
   # Form 7 Settings
   ##############################################################*/
  .wpcf7-recaptcha {
    float: left;
    transform-origin: 0 0;
    transform: scale(0.8, 1); } }
/*--------------------------------------------------------------
# Phone (Responsive-MobileView)
--------------------------------------------------------------*/
@media only screen and (max-width: 500px) {
  #banner-slider ul li #wrapper .row .large-12 #content .slide-title {
    font-size: 18px;
    color: white;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 0; }
  #banner-slider ul li #wrapper .row .large-12 #content p {
    font-size: 13px; }

  /*#############################################################
   # TOUR
   ##############################################################*/
  #tour .row ul li {
    width: 100%;
    margin-left: 0;
    margin-bottom: 15px; }
  #tour .row ul li:nth-last-child(1) {
    margin-bottom: 0; }
  #tour .row ul li div#eachtour #Image {
    position: relative;
    cursor: pointer; }

  /*#############################################################
  # Thumbnail Theme
  ##############################################################*/
  ul#images-side li {
    width: 100%;
    padding: 5px; }

  /*#############################################################
  # Circle Theme
  ##############################################################*/
  #cafe-images ul.grid > li {
    width: 50%;
    float: left;
    padding: 0 5px 10px 5px;
    margin-left: 0; }
  #cafe-images ul.grid > li:first-child {
    margin-left: 0; }
  #cafe-images ul.grid > li a:hover div.each-container > .opacity {
    background-color: rgba(0, 0, 0, 0.6); }
  #cafe-images ul.grid > li a:hover div.each-container > .detail-container {
    left: 50%; }
  #cafe-images ul.grid > li a div.each-container {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    background-color: white;
    border: 10px solid #EBEBEB; }
  #cafe-images ul.grid > li a div.each-container .opacity {
    background-color: transparent; }
  #cafe-images ul.grid > li a div.each-container .detail-container {
    position: absolute;
    top: 50%;
    left: -50%;
    right: 0;
    padding: 5px 10px;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    width: 90%; } }