html, body {
  font-family: "Kanit", sans-serif;

  /* font-family: "Roboto", sans-serif; */

  /* font-weight: 100; */
  font-style: normal;
  font-size: 15px;
  line-height: 1.5;
  margin: 0px;
  display: grid;
}
.w3-container, .w3-panel {
padding: 0.01em 60px;
}
.w3-container-right {
    padding: 0.01em 16px;
}
.w3-col.w3-15{
width: 15%;
}
.w3-col.w3-20{
width: 19%;
}
.w3-col.w3-25{
width: 24%;
}
.w3-col.w3-40 {
width: 39%;
}
.w3-col.w3-50 {
width: 49%;
}
.w3-col.w3-60 {
width: 59%;
}
.w3-col.w3-75 {
width: 75%;
}
.w3-col.w3-80 {
width: 79%;
}
.w3-col.w3-25.w3-center {
    text-align: center;
}
.w3-col.w3-center {
text-align: justify;
}
.w3-center {
text-align: center;
}
.w3-col, .w3-half, .w3-third, .w3-twothird, .w3-threequarter, .w3-quarter {
float: left;
/* width: 100%; */
}
.w100{
  width: 96%;
}
*, *:before, *:after {
box-sizing: inherit;
}
.w3-container:after, .w3-container:before, .w3-panel:after, .w3-panel:before, .w3-row:after, .w3-row:before, .w3-row-padding:after, .w3-row-padding:before, .w3-cell-row:before, .w3-cell-row:after, .w3-clear:after, .w3-clear:before, .w3-bar:before, .w3-bar:after {
content: "";
display: table;
clear: both;
}

.accordion {
background-color: #eee;
color: #7a7a7a;
cursor: pointer;
padding: 18px;
margin: 5px 0;
width: 95%;
line-height: 25px;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
border-radius: 5px;
}

.active, .accordion:hover {
background-color: #ccc;
}

.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}

.stars {
cursor: pointer;
display: flex;

&:hover {
.star polygon {
fill: #ffd055 !important;
}
}

.star {
polygon {
fill: #d8d8d8;
}

&:hover ~ .star {
polygon {
  fill: #d8d8d8 !important;
}
}
}

&[data-stars] {
.star polygon {
fill: #ffd055;
}
}

&[data-stars="1"] {
.star:nth-child(1) ~ .star polygon {
fill: #d8d8d8;
}
}

&[data-stars="2"] {
.star:nth-child(2) ~ .star polygon {
fill: #d8d8d8;
}
}

&[data-stars="3"] {
.star:nth-child(3) ~ .star polygon {
fill: #d8d8d8;
}
}

&[data-stars="4"] {
.star:nth-child(4) ~ .star polygon {
fill: #d8d8d8;
}
}

&[data-stars="5"] {
.star:nth-child(5) ~ .star polygon {
fill: #d8d8d8;
}
}
}

.w3-left {
float: left!important;
}
.w3-margin-right {
margin-right: 16px!important;
}
.w3-circle {
border-radius: 50%;
}
img {
vertical-align: middle;
}
img {
border-style: none;
}
.w3-margin-bottom {
margin-bottom: 16px!important;
}

/* .w3-row-padding, .w3-row-padding>.w3-half, .w3-row-padding>.w3-third, .w3-row-padding>.w3-twothird, .w3-row-padding>.w3-threequarter, .w3-row-padding>.w3-quarter, .w3-row-padding>.w3-col { */
/* padding: 0 8px; */
/* padding: 0 15px 0 0; */
/* } */

/* .w3-row-padding{
  padding: 0px
} */
.w3-row-padding>.w3-third{
  padding: 0 5px 0 0;
}

.w3-white, .w3-hover-white:hover {
color: #000!important;
background-color: #fff!important;
}



.w3-top {
top: 0;
}

.w3-top, .w3-bottom {
position: sticky!important;
}
.w3-top, .w3-bottom {
position: fixed;
width: 100%;
z-index: 1;
}
.w3-card, .w3-card-2 {
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

.w3-bar {
width: 100%;
overflow: hidden;
}

.w3-bar .w3-button {
white-space: normal;
}

.w3-bar .w3-bar-item {
padding: 8px 16px;
float: left;
width: auto;
border: none;
/* display: block; */
outline: 0;
}
.w3-btn, .w3-button {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.w3-btn, .w3-button {
border: none;
display: inline-block;
padding: 8px 16px;
border-radius: 5px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap;
}
.w3-wide {
letter-spacing: 4px;
}
.center{
text-align: center;
}
.w3-right {
float: right!important;
}

.w3-black, .w3-hover-black:hover {
color: #fff!important;
background-color: #000!important;
}

.w3-animate-left {
position: relative;
animation: animateleft 0.4s;
}
.w3-card, .w3-card-2 {
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}
.w3-sidebar {
height: 100%;
width: 200px;
background-color: #fff;
position: fixed!important;
z-index: 1;
overflow: auto;
}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section {
display: block;
}
.w3-bar-block .w3-bar-item {
width: 100%;
display: block;
padding: 8px 16px;
text-align: left;
border: none;
white-space: normal;
float: none;
outline: 0;
}

.w3-padding-16 {
padding-top: 16px!important;
padding-bottom: 16px!important;
}
.w3-large {
font-size: 18px!important;
}

.w3-right.w3-hide-small {
padding: 15px;
}
img.aux-attachment.aux-featured-image.attachment-150x86.aux-attachment-id-1104 {
padding: 0 15px;
}
a.w3-bar-item.w3-button {
font-weight: 700;
font-family: "Kanit", sans-serif;
}
button.w3-button.w3-black.w3-right {
margin: 0 0 0 5px;
}

.kanit {
font-family: "Kanit", sans-serif;
}

.w700 {
font-weight: 700;
}
.red-kangzen {
    color: #073b70;
}

.font15rem{
  font-size: 1.5rem;
}
.font15{
font-size: 15px!important;
}
.font17{
font-size: 17px;
}

.containerie-ist {
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1100px;
  gap: 2rem;
}
.text-black{
  color: black;
}
.indent{
  /* text-indent: 1.5em; */
  padding: 0 0 0 1.5em;
}

.button-style {
    font-size: 16px;
    line-height: 1em;
    color: #FFFFFF;
    cursor: pointer;
    background-color: #FF5A5A;
    border-radius: 5px 5px 5px 5px;
    border: none;
    box-shadow: 10px 20px 50px 0px rgba(1.0000000000000013, 17.000000000000032, 49.00000000000001, 0.23);
    margin: 15% 0;
    padding: 15px;
}

.w3-col.s25 {
    width: 25%;
}
.w3-green, .w3-hover-green:hover {
    color: #fff !important;
    background-color: #4CAF50 !important;
}
.w3-dark-grey, .w3-hover-dark-grey:hover, .w3-dark-gray, .w3-hover-dark-gray:hover {
    color: #fff !important;
    background-color: #616161 !important;
}
.w3-red, .w3-hover-red:hover {
    color: #fff !important;
    background-color: #f44336 !important;
}
.w3-center {
    text-align: center !important;
}
.w3-col, .w3-half, .w3-third, .w3-twothird, .w3-threequarter, .w3-quarter {
    float: left;
    width: 100%;
}
*, *:before, *:after {
    box-sizing: inherit;
}


.frame {
  width: 90%;
  margin: 1% auto;
  text-align: center;
}
button {
  margin: 20px;
}
.custom-btn {
  font-size: 16px;
  line-height: 1.5em;
  color: #FFFFFF;
  cursor: pointer;
  background-color: #FF5A5A;
  border-radius: 5px 5px 5px 5px;
  border: none;
  box-shadow: 10px 20px 50px 0px rgba(1.0000000000000013, 17.000000000000032, 49.00000000000001, 0.23);
  padding: 15px;
  margin: 5px;
}

/* 1 */
/* .btn-1 {
  background: rgb(6,14,131);
  background: linear-gradient(0deg, rgba(6,14,131,1) 0%, rgba(12,25,180,1) 100%);
  border: none;
} */



.price {
list-style-type: none;
/* border: 1px solid #eee; */
width: 100%;
margin: 0;
padding: 0;
border-radius: 1em;
-webkit-transition: 0.3s;
transition: 0.3s;
box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.1);
}

/* .price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
} */

.price .header {
background-color: #111;
color: white;
padding: 20px;
font-size: 25px;
}

.price li {
border-top: 1px solid #eee;
padding: 10px 30px;
text-align: center;
}


.price .grey {
background-color: #eee;
font-size: 20px;
}

li.li-pro-left {
    text-align: left;
    text-indent: 5%;
}

.button {
background-color: #f00;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
border-radius: 5px;
/* background: linear-gradient(138deg, rgb(49 255 0) 0%, rgba(6, 95, 212, 1) 100%); */
}



.text-def {
color: #7a7a7a;
font-size: 20px;
}

hr,hr.its {
border: 1px solid #eee;
}

div.rev {
background: #e3e3e352;
padding: 15px;
margin: 0 5px;
color: #7a7a7a;
border-radius: 15px;
font-size: 19px;
width: auto;
}
footer.center {
/* border: 1px solid #eee; */
}

button.butt:hover,.w3-hover-opacity:hover{
opacity: 0.8;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}
button.butt {
background-color: #065fd4;
/* border: solid 1px #C40101; */
margin: 0 0 0 5px;
padding: 15px;
color: white;
box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.1);
}
.font-rate {
padding: 0 0 0 15px;
font-size: 17px !important;
font-weight: 600;
display: contents;
}


/*the container must be positioned relative:*/
.custom-select {
position: relative;
float: right;
width: 60%;
}

.custom-select select {
display: none; /*hide original SELECT element:*/
}

.select-selected {
background-color: #eee;
}

/*style the arrow inside the select element:*/
.select-selected:after {
position: absolute;
content: "";
top: 17px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #444 transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
border-color: transparent transparent #444 transparent;
top: 11px;
}

/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
color: #444;
padding: 8px 16px;
border: 1px solid transparent;
/* border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; */
cursor: pointer;
user-select: none;
border-radius: 5px;
}

/*style items (options):*/
.select-items {
position: absolute;
background-color: #f6f6f6;
top: 100%;
left: 0;
right: 0;
z-index: 1;
border-radius: 5px;
}

/*hide the items when the select box is closed:*/
.select-hide {
display: none;
}

.select-items div:hover, .same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}

.top-right {
position: absolute;
top: 8px;
right: 16px;
}

.container {
position: relative;
text-align: center;
color: white;
/* height: 160px; */
/* width: 100%; */
}

.fa-heart-o:hover,.fa-heart:hover{
color: #c40101;
cursor: pointer;
}

.fa-heart-o:active,.fa-heart:active{
color: #c40101;
}

.fa-heart-o.active,.fa-heart.active{
color: #c40101;
background:none;
}

h1 {

    line-height: 30px;
}

h1.head-1 {
text-decoration: none;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
li.header {
border-radius: 15px 15px 0 0;
background: rgb(196, 1, 1);
background: linear-gradient(352deg, rgba(196, 1, 1, 1) 0%, rgba(6, 95, 212, 1) 100%);
}

li.text-def.activate {
    color: #073b70;
    background-color: #eee;
}
.noactivate{
  cursor: pointer;
}

.img-Testimonials{
width: 70px;
height: 70px;
}

.img-blog {
width: 100%;
/* height: 160px; */
border-radius: 1em 1em 0 0;
}

iframe {
height: 540px ;
width: 100%;
border-radius: 1em;
box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.1);
}

.dt-box {
    margin-top: -5px;
    box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.1);
    border-radius: 0 0 1em 1em;
    padding: 10px;
    background: linear-gradient(to right, #FFFFFF, #ECE9E6);
}

.w3-hide-large {
display: none;
}

a.w3-bar-item.w3-button.w3-right.w3-hide-large.w3-hide-medium {
padding-top: 25px;
}

.Avatar {
  margin-top: 10%;
  width: 80px;
  height: 80px;
}

.scrolling {
position: relative;
height: 300px;
overflow: auto;
margin: 0 0 25px 0;
}

a.ahref {
    color: gray;
    text-decoration: none;
}
section.call-to-action {
  margin: 1% 8% 0;
  padding: 3% 16px;
  text-align: center;
  list-style-type: none;
  width: -webkit-fill-available;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-radius: 15px;
  box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.1);
}


.fa {
  padding: 10px;
  font-size: 30px;
  width: 20px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}
.faz {
    padding: 1px 10px 0 0;
    font-size: 30px;
    width: 5px;
    /* text-align: center; */
    /* text-decoration: none; */
    /* margin: 5px 2px; */
    /* border-radius: 50%; */
}
.fas {
    padding: 1px 10px 0 0;
    font-size: 30px;
    width: 5px;
    /* text-align: center; */
    /* text-decoration: none; */
    /* margin: 5px 2px; */
    /* border-radius: 50%; */
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.faz,.fas {
    display: inline-block;
    font: normal normal normal 14px / 1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.posit {
    text-align: justify;
    font-size: 25px;
    font-weight: 700;
    margin: 5px 0;
    color: gray;
}
.margin5-0{
  margin: 5px 0
}
.margin-9-0{
  margin: -9px 0 0 0;
}

.alert {
    background: #ff7171;
    color: aliceblue;
    margin: 0 35%;
    border-radius: 5px;
}

@media only screen and (max-width: 2560px) {

}

@media only screen and (max-width: 1440px) {
  iframe {
      height: 400px;
  }
}

@media only screen and (max-width: 1024px) {
  .w3-container, .w3-panel {
    padding: 0.01em 20px;
}
.img-blog {
/* height: 130px; */
}
iframe {
height: 310px; ;
}
.Avatar{
margin-top: 15%;
width: 70px;
height: 70px;
}
.w3-col.w3-25 {
    width: 26%;
}
.w3-col.w3-15{
width: 16%;
}
.w3-col.w3-75 {
    width: 74%;
}
.text-def {
    font-size: 17px;
}
.containerie-ist {
  max-width: 800px !important;
  /* gap: 2rem; */
}

}

@media only  screen and(max-width: 993px){
.w3-hide-large {
display: none!important;
}
}

@media only screen and (max-width: 768px){
iframe {
height: 230px !important;
}
.w-to-100,.w3-col.w3-20,.w3-col.w3-80{
width: 100% !important;
}
.w3-col.w3-25 {
    width: 25%;
}
.w3-col.w3-15{
width: 16%;
}
.text-def {
    font-size: 12px;
}
.Avatar {
  margin-top: 15% !important;
  width: 50px;
  height: 50px;
}
.price li {
    padding: 10px;
}
h1 {
    font-size: 19px;
    line-height: 25px;
}
.price .header,.posit {
    font-size: 19px;
}

hr {
display: none;
}
hr.its{
display: inherit;
}
.containerie-ist {
  max-width: 600px !important;
  /* gap: 2rem; */
}
.custom-btn {
  width: 40%
}

}

@media (min-width: 601px){
  .w3-col.m4, .w3-third {
  /* width: 30.33333%; */
  /* width: 29%; */
          width: 48%;
  }
}

@media only screen and (max-width: 600px) {
  .columns {
  width: 100%;
  }
}

@media only  screen and (max-width: 425px){
  .w3-container, .w3-panel {
    padding: 0.01em 16px;
  }
  .w3-right.w3-hide-small{
  display: none;
  }
  .w3-col.w3-15{
  width: 23%;
  }
  .w2-to-100{
  width: 100% !important;
  }
  iframe {
  height: 205px !important;
  }
  .Avatar {
      width: 65px;
      height: 65px;
  }
  .w3-hide-large {
  display: inherit;
  }
  .accordion{
  width: 90%
  }
  .price{
  width: 100%
  }
  .custom-select {
  width: 90%;
  }

  .head-respon {
  /* font-size: 19px !important; */
  /* margin: 5px 0; */
  }
  .text-def {
  font-size: 15px;
  }
  .price {
  margin: 20px 0;
  }
  /* .font17 {
  font-size: 12px;
  } */
  .img-blog {
  /* height: 170px; */
  }
  .containerie-ist {
    padding: 0 5%;
  }
  .custom-btn {
    width: 50%
  }
}
@media only  screen and (max-width: 375px){

  .img-blog {
  /* height: 150px; */
  }
  .w3-col.w3-15{
  width: 26%;
  }
  .Avatar {
      width: 60px;
      height: 60px;
}
}