/* --------------------- Fonts ------------------*/
@font-face {
  font-family: 'kaweelikhit';
  src: url("../font/SOV_KaweeLikhit/sov_kaweelikhit-webfont.woff2") format("woff2"), url("../font/SOV_KaweeLikhit/sov_kaweelikhit-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'kaweelikhit-bold';
  src: url("../font/SOV_KaweeLikhit/sov_kaweelikhit-bold-webfont.woff2") format("woff2"), url("../font/SOV_KaweeLikhit/sov_kaweelikhit-bold-webfont.woff") format("woff");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'Pridi', serif; }

/* --------------------- General Body  ------------------*/
body {
  /* position */
  width: 80%; 
  margin: 50px 10% 30px; 
  font-family: Pridi; 
  background-color: #efeff2; 
  padding-bottom: 30px;
  border: none;
  display: block;
}


body a {
  color: brown; 
}

/* --------------------- Header  ------------------*/
#logo {
  margin-top: 0;
  margin-bottom: 0;
  padding: 20px 0 20px; 
}

h1#logo {
  font-family: kaweelikhit; 
}

div#header-bar {
  position: relative;
  text-align: center;
  background-color: #efeff2; 
}

div#nav-bar {
  background-color: #efeff2; 
}

.header-menu {
  width: 70%;
  text-decoration: none;
  color: #000; 
}


/* --------------------- Contents  ------------------*/
#contents {
  position: block;
  padding: 10px 10px 10px;
  clear: both; }

#contents h1 {
  text-decoration: underline; 
}

button {
  border-radius: 7.5px;
  border-width: 1.5px; 
}


.book-details img {
  max-width: 60%;
  max-height: 700px;
  padding-left: -7%;
  margin-left: 20%; 
}

.advice {
  color: #534f58;
  margin: 5px 5px 50px;
  border: dashed 2px;
  border-color: #a69eb0;
  padding: 12px 6px;
  font-size: 0.95em; 
}

.advice-text-head {
  color: brown; 
}

.hash-block {
  display: block;
  height: 50px;
  margin-top: -50px;
  visibility: hidden; 
}

.block-area {
  border-top: dashed 3px;
  /*margin-left: -10px;
  margin-right: -10px;
  padding: 10px 10px 30px; */ 
}

.fb-div {
  width: 80%;
  margin-left: 10%;
  margin-top: 30px;
  text-align: center; 
}


.slide-show {
  display: block;
  text-align: center;
  width: 80%;
  padding-left: 0;
  margin-left: 10%; 
}

.slide-show img {
  width: auto;
  max-width: 80%;
  padding-left: 10%; 
}

button.slick-arrow {
  border-radius: 50%;
  border-width: 0; 
}

.slick-arrow {
  background-color: rgba(166, 158, 176, 0.6); 
}

.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
  background: #000; 
}

#introvideo {
  width: 50%;
  margin: 10px 25% 15px;
  position: relative; 
}

#line {
  width: 90%;
  padding-left: -7px;
  padding-top: 3px;
  padding-bottom: 3px;
  margin-left: 5%;
  margin-bottom: 40px;
  text-align: center;
  font-size: 20px; 
}

#line a {
  text-decoration: none; 
}

#line p {
  padding: 4px 0 4px;
  color: #fff; 
}

#call-border {
  background-color: #c0bac7;
  padding: 5px 5px; 
}

#line-border {
  background-color: #c0bac7;
  padding: 5px 5px; 
}

#fb-div {
  padding: 30px 5px 30px 5px;
  text-align: center; 
}


  #to-top {
    float: none;
    clear: both; 
  } 

  #contact-menu {
    clear: both;
    float: none;
    display: block;
    background-color: #efeff2; 
    width: 100%;
  }

  .header-menu h3 {
    margin-bottom: 25px;
    border: solid 2px;
    border-top: 0px;
    border-right: 0px;
    border-left: 0px;
    margin-bottom: 0px;
    padding-bottom: 15px;
  }



#book-1 {
  margin-top: 20px;
  background-color: #e4e8d7;
  display: block;
  padding: 10px 10px;
}

  #book-2 {
    margin-top: 20px;
    display: block;
    padding: 10px 10px;
  }

  #book-3 {
    margin-top: 20px;
    background-color: #e4e8d7;
    display: block;
    padding: 10px 10px;
  }

  #set-4 {
    margin-top: 20px;
    display: block;
    padding: 10px 10px;
  }

  #set-5 {
    margin-top: 20px;
    background-color: #e4e8d7;
    display: block;
    padding: 10px 10px;
  }

  #set-6 {
    margin-top: 20px;
    display: block;
    padding: 10px 10px;
  }

  #two-books-bundle {
    margin-top: 15px;
    color: darkred;
    background-color: #c0bac7;
  }

  #set-7 {
    margin-top: 20px;
    background-color: #e4e8d7;
    display: block;
    padding: 10px 10px;
  }

  #reviews {
    clear: both;
    text-align: center;
  }



/* --------------------- Media Queries ------------------ */

@supports (-webkit-touch-callout: none) {
  /* hide copy button on ios */
  .copy-button {
    display: hidden;
  }
}

/* tablet size */
@media (min-width: 450px) {

  .header-menu {
    display: block;
    position: relative;
    float: left;
    width: 33.33%;
    text-decoration: none;
    border: solid;
    border-right: 0px;
    border-left: 3px;
    border-color: #000;
    margin-left: 0;
  }

  #contact-menu {
    clear: unset;
    position: relative;
    float: right;
    width: 33.33%;

  }


  .header-menu-right {
    border-left: solid 3px;
    margin-left: -3px; 
  }


  .header-menu h3 {
    border: none;
    padding-bottom: 15px;
  }

}

/* desktop size */
@media (min-width: 1000px) {

  #logo {
    float: left;
    padding-top: 10px;
    padding: 15px 0 0;
    padding-left: 10px; 
  }

  .header-menu {
    padding-top: 10px;
    width: 15%;
    float: right;
    border: none;
    margin-bottom: 5px; 
  }


  #contact-menu {
    width: 15%;

  }

  .header-menu h3 {
    text-decoration: underline; 
  }


  #contact {
    margin-top: 15px;
    float: right;
    width: 48%;
    padding: 3px 2% 10px 3px;  
  }

  #contact img {
    max-width: 48%;
   }

 #fb-div {
  margin-top: 15px;
  width: 48%;
  float: left;
  padding: 3px 0px 2% 3px;  
  }


  #to-top {
    float: none;
    clear: both; 
  } 


  #book-1 {
    margin-top: 15px;
    background-color: #e4e8d7;
    width: 48%;
    float: left;
    padding: 3px 0px 2% 3px; 
  }

  #book-2 {
    margin-top: 15px;
    background-color: #e4e8d7;
    float: right;
    width: 48%;
    padding: 3px 2% 0px 3px; }

  #book-3 {
    margin-top: 15px;
    background-color: #e4e8d7;
    float: left;
    width: 48%;
    padding: 3px 0px 2% 3px; 
  }

  #set-4 {
    margin-top: 15px;
    background-color: #e4e8d7;
    float: right;
    width: 48%;
    padding: 3px 2% 110px 3px; 
  }

  #set-5 {
    margin-top: 15px;
    background-color: #e4e8d7;
    clear: both;
    float: left;
    width: 48%;
    padding: 3px 0px 2% 3px; 
  }

  #set-6 {
    margin-top: 15px;
    background-color: #e4e8d7;
    float: right;
    width: 48%;
    padding: 3px 2% 10px 3px; 
  }

  #two-books-bundle {
    margin-top: 15px;
    clear: both;
    float: left;
    width: 97.5%;
    padding: 3px 2% 0px 3px; 
    color: darkred;
    background-color: #c0bac7;
  }

  #set-7 {
    margin-top: 15px;
    background-color: #e4e8d7;
    clear: both;
    float: left;
    width: 48%;
    padding: 3px 0px 2% 3px; 
  }

 #delivery {
    margin-top: 15px;
    float: right;
    width: 48%;
    padding: 3px 2% 10px 3px;  
  }

 div#header-bar {
    display: block;
    border-bottom: solid 3px;
    height: 80px !important; 
    border-left: solid 3px;
    border-right: solid 3px;
  }

  body {
    /* position */
    /* border */
    border: solid;
    border-color: #000;
    border-bottom: none;
    border-left: none;
    border-right: none;
    margin-bottom: 30px;
  }

  div#wrap-contents {
    display: block;
  }

  div#contents {
    border: solid;
    border-color: #000;
    margin-bottom: 30px;
    border-top: none;
  }
}