/*google font เริ่ม */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pattaya&display=swap');

/* google font จบ */

/* Font Awesome เริ่ม */
@import url('https://use.fontawesome.com/releases/v5.11.2/css/all.css');
/* Font Awesomet จบ */

:root{
  


  --color-rgb-theme-1:0 150 220;
  --color-rgb-theme-2:0 89 188;
  --color-rgb-theme-3:255 164 0;
  --color-rgb-theme-4:255 255 255;
  --color-rgb-theme-5:23 55 83;
  --color-rgb-theme-6:0 0 0;

  --color-theme-1:rgb(var(--color-rgb-theme-1));
  --color-theme-2:rgb(var(--color-rgb-theme-2));
  --color-theme-3:rgb(var(--color-rgb-theme-3));
  --color-theme-4:rgb(var(--color-rgb-theme-4));
  --color-theme-5:rgb(var(--color-rgb-theme-5));
  --color-theme-6:rgb(var(--color-rgb-theme-6));

  --clear-color: #00000000;
  --body-bg-color: #eeeeee;
  --navbar-bg-color:rgb(var(--color-rgb-theme-1)/1);

  --text10:100% 100% 100%;
  --text09:90% 90% 90%;
  --text08:80% 80% 80%;
  --text07:70% 70% 70%;
  --text06:60% 60% 60%;
  --text05:50% 50% 50%;
  --text04:40% 40% 40%;
  --text03:30% 30% 30%;
  --text02:20% 20% 20%;
  --text01:10% 10% 10%;
  --text00:0% 0% 0%;

 


  /* ratio  start set padding top*/
  --ratio-1: 1.333333333333333%;      /* portrait 3:4*/
  --ratio-2: 66.66666666666667%;      /* portrait 2:3 */
  --ratio-3: 56.25%;                  /* portrait 9:16 */
  --ratio-4: 42.85714285714286%;      /* portrait 9:21 */
  --ratio-5: 100%;                    /* symmetric 1:1*/
  --ratio-6: 75%;                     /* landscape 4:3*/
  --ratio-7: 66.66666666666667%;      /* landscape 3:2 */
  --ratio-8: 56.25%;                  /* landscape 16:9 */
  --ratio-9: 42.85714285714286%;      /* landscape 21:9 */
  
  /* ratio  end set padding to*/
  --normal-text-color:#555555;
  --top-navbar-text-color:#ffffffff;
   
  --shadow-color: 0px 2px 2px rgb(0 0 0 / 0.4);
  
  --slide-gradient: linear-gradient(70deg, rgb(var(--color-rgb-theme-2) / 0.7679446778711485) 0%, rgb(var(--color-rgb-theme-2) / 0) 6%, rgb(var(--color-rgb-theme-2) / 0.41220238095238093) 51%, rgb(var(--color-rgb-theme-2) / 1) 78%);
  
  
}
*{
  color: inherit ;
  background-color: var(--clear-color);
  /*transition: all 0.35s ease;*/
  /*font-size: 0.82em;*/
}
*:focus,*:focus-within,*:focus-within,*:focus-visible {
  box-shadow: none !important;

}
.container *{
  transition: all 0.35s ease;
}
body{
  margin: 0px;
  font-size: 15px;
  font-family:  'Kanit', sans-serif;
  color: var(--clear-color);
  /*background-image: url(/img/200-90-3-monochrome.png);
  background-color: var(--body-bg-color);*/
}
.debug-box{
  position: fixed;
  display: none;
  padding: 5px 20px;
  align-content: center;
  align-items: center;
  bottom: 0px;
  /*width: 100%;*/
  height: 50px;
  font-size: 1em;
  color: var(--color-theme-4);
  background-color: var(--color-theme-6);
  z-index: 10000;
}

#top-navbar{
  background-color: rgb(var(--color-rgb-theme-4)/1);
  padding: 0px;
  border-bottom: 1px solid rgb(var(--color-rgb-theme-1)/1);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
  transition: all 0.35s ease;
}
.navbar-menu{
  position: relative;
  font-size: 1.5rem;
  color: #0096DC;
  /*margin-right: 16px;*/
}
.navbar-menu a:visited{
  color: #0096DC;
}
.navbar-menu i{
  color: #0096DC;
}
#footer {
  background-color: var(--navbar-bg-color);
  font-family: 'Roboto Condensed', sans-serif;
  color: #ffffff;
  font-size: .85rem;
  height: 50px;
}
.offcanvas-start{
  width: 250px;
}
.offcanvas-header{
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: #0096DC;
  font-family: 'Roboto Condensed','Kanit', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  color: white;
}
.offcanvas-header h5{
  font-family: 'Roboto Condensed','Kanit', sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  color: white;

}
.offcanvas-body *{
  transition: all 0.35s ease;
}
.offcanvas-body{
  font-family: 'Roboto Condensed','Kanit', sans-serif;
  color: #0096DC66;
}
.offcanvas-body h4{
  font-family: 'Roboto Condensed','Kanit', sans-serif;
  color: #555;
  border-bottom: 1px solid #0096DC;
}
.offcanvas-body li{
  display: block;
  width: 100%;
  padding: 5px 10px;
  border-radius: 5px;
  margin-bottom: 2px;
  font-family: 'Roboto Condensed','Kanit', sans-serif;
  color: #888;
}
.offcanvas-body li:hover{
  color: #fff;
  background-color: #0096DC;
}
.offcanvas-body a:visited,.offcanvas-body a{
  font-family: 'Roboto Condensed','Kanit', sans-serif;
  text-decoration: none;
  color: #888;
}
.offcanvas-body i{
  text-decoration: none;
  color: #888;
}
.offcanvas-body li:hover a{
  color: #fff;
}
.offcanvas-body li:hover i{
  
  color: #fff;
}

/* width */
.offcanvas-body::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.offcanvas-body::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
.offcanvas-body::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
.offcanvas-body::-webkit-scrollbar-thumb:hover {
  background: #555; 
}







#top-navbar .logo{
  width: 180px;
  margin-right: 10px;
  transition: all .6s ease;
}
#top-navbar.scroll .logo{
  width: 160px;
  
}
.footer .logo{
  width: 50%;
  filter: grayscale(1) brightness(2);
}

.okay-item{
  margin-bottom: 16px;
}
.okay-item .okay-cover{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 5px;
  overflow: hidden;
}
.okay-item img{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%; 
  height: 100%;
  object-fit: cover; 
  object-position: center;
}
.okay-item a.okay-link,.okay-item a.okay-link:visited{
  color: rgb(var(--text02));
  text-decoration: none;
}
.okay-item .okay-title{ 
  display: -webkit-box;
  margin-top: 8px;
  margin-bottom: 0px;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.4;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; 
  overflow: hidden;
  /*min-height: calc(1.4*3*16px);*/
}
.okay-item .okay-group{ 
  min-height: unset;
}
.okay-item .okay-time{
  color: rgb(var(--text04)); 
  font-size: 0.65rem;
}
.okay-item .okay-badge{
  color: var(--color-theme-1);
  /*background-color: var(--color-theme-1); */
  font-weight: 300;
  font-size: 0.565rem;
}

.okay-shadow{
  border-radius: 5px;
  /*box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;*/
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

#mainCarousel .okay-item{
  margin-bottom: 0px;
}
#mainCarousel .okay-item .okay-cover{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 5px 5px 0px 0px;
  overflow: hidden;
  margin-bottom: 8px;
}
#mainCarousel .okay-item .okay-group{
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 5px 5px 0px 0px;
  overflow: hidden;
  margin-bottom: 8px;
}
#mainCarousel .okay-item .okay-title{
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.5;
  /*min-height: calc(1.5*3*2*16px);*/
}
#mainCarousel .okay-item .okay-time{
  color: rgb(var(--text04)); 
  font-size: 1rem;
}
#mainCarousel .okay-item .okay-badge{
  color: rgb(var(--text10));
  background-color: var(--color-theme-1); 
  font-size: 1rem;
}

#tagsCarousel .okay-item{
  margin-bottom: 0px;
}
#tagsCarousel .okay-item .okay-cover{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 5px 5px 0px 0px;
  overflow: hidden;
  margin-bottom: 5px;
}
#tagsCarousel .okay-item .okay-group{
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 5px 5px 0px 0px;
  overflow: hidden;
  margin-bottom: 8px;
}
#tagsCarousel .okay-item .okay-title{   
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.5;
  /*min-height: calc(1.5*3*1.5*16px);*/
}
#tagsCarousel .okay-item .okay-time{
  color: rgb(var(--text04)); 
  font-size: 0.8rem;
  margin-left: 10px;
}
#tagsCarousel .okay-item .okay-badge{
  color: rgb(var(--text10));
  background-color: var(--color-theme-1); 
  font-size: 0.8rem;
}




#mainCarousel .carousel-control-next, #mainCarousel .carousel-control-prev{
  position: relative;
}
#mainCarousel .carousel-control-btn {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 15px;
  height: 8px;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  border-radius: 5px;
  background-color: var(--color-theme-3);
  border: 0;
  opacity: .4;
  transition: all .6s ease;
}
#mainCarousel .carousel-control-btn.active  {
  opacity: 1;
  width: 50px;
}
#mainCarousel .carousel-indicators{
  position: relative;
  padding-top: 10px;
  padding-bottom: 25px;
}



#tagsCarousel .carousel-control-next, #tagsCarousel .carousel-control-prev{
  position: relative;
}
#tagsCarousel .carousel-control-btn {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 15px;
  height: 8px;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  border-radius: 5px;
  background-color: var(--color-theme-3);
  border: 0;
  opacity: .4;
  transition: all .6s ease;
}
#tagsCarousel .carousel-control-btn.active  {
  opacity: 1;
  width: 50px;
}
#tagsCarousel .carousel-indicators{
  position: relative;
  padding-top: 10px;
  padding-bottom: 25px;
}

#mainCarousel,#tagsCarousel{
  border-radius: 5px;
  /*box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px !important;*/
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px !important; 
  margin-bottom: 36px;
}

.okay-nav-bar{
  /*margin-top: 1.5rem;
  margin-bottom: 1.2rem;*/

  font-family: 'Roboto Condensed','Kanit', sans-serif;
  font-size: 1rem;
  color: #0096DC;
  /*border-bottom: 1px solid #0096DC;*/
  border: none;
}

.okay-nav-bar .nav-link.active{
  color: #0096DC;
  border: none;
}
.okay-nav-bar .nav-link.active:hover{
  color: #0096DC;
  
}
.okay-nav-bar .nav-link {
  background-color: #00000000;
  color: #555;
  border: none;
  margin-right: 20px;
  transition: all .6s ease;
}
.okay-nav-bar .nav-link:hover {
  color: #0096DC55;
  
}

.breadcrumb-item{
  color: #555;
}

.okay-main-headline {
  margin: 15px 0px;
  padding: 0px;
  padding-right: 5px;
  /*border-bottom: 3px solid var(--color-theme-1);*/
}
.okay-main-headline h2{
  position: relative;
  display: inline-block;
  font-family: 'Roboto Condensed','Kanit', sans-serif;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 30px;
  margin-bottom: 3px;
  padding-right: 0px;
  padding-left: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-left: 0px solid var(--color-theme-1);
  background-color: transparent;
  background-size:0% 100%;
  color: var(--color-theme-6);
}

.okay-content-headline {
  margin: 15px 0px;
  padding: 0px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgb(var(--color-rgb-theme-1)/0.5);
}
.okay-content-headline h2{
  position: relative;
  /*display: inline-block;*/
  font-family: 'Roboto Condensed','Kanit', sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 3px;
  padding-right: 0px;
  padding-left: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-left: 0px solid var(--color-theme-1);
  background-color: transparent;
  background-size:0% 100%;
  color: #0096DC;
}
.okay-content-headline span{
  font-family:  'Sarabun', sans-serif;
  font-size: 1rem;
  color: #888;
}

.okay-content-detail{
  font-family:  'Sarabun', sans-serif;
  font-size: 1rem;
  color: #555;
  padding-bottom: 30px;

}
.okay-content-detail h4{
  font-size: 1.3rem;
  line-height: 1.3;
  margin-bottom: 1rem;
}
.okay-content-detail p{
  margin-bottom: 1rem;
  margin : 0px;
}
.okay-content-detail .news_images{
  /*width: 100%;*/
  max-width: 100%;
  margin:1rem auto;
}

.okay-headline {
  margin: 25px 0px;
  padding: 0px;
  padding-right: 5px;
  border-bottom: 1px solid var(--color-theme-1);
}
.okay-headline h2{
  position: relative;
  display: inline-block;
  font-family: 'Roboto Condensed','Kanit', sans-serif;
  font-weight: 400;
  line-height: 30px;
  margin-bottom: 3px;
  padding-right: 0px;
  padding-left: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-left: 0px solid var(--color-theme-1);
  background-color: transparent;
  background-size:0% 100%;
  color: var(--color-theme-6);
}
.okay-youtube{
  position: relative;
  max-width: 800px;
  width: 100%;
  margin: 10px auto;
}    
.vdo-inner{
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  border-radius: 10px;
  overflow: hidden;
  background-color: #000;
}
.okay-youtube iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*.okay-headline h2:after {
  content: '';
  position: absolute;
  right: -20px;
  top: -1px;
  width: 0;
  height: 0;
  border: 0px solid transparent;
  border-left-color: transparent;
  border-right: 0;
  margin-top: 0px;
  margin-right: 0px;
}
.okay-headline h2:hover{
  padding-right: 15px;
  padding-left: 5px;
  border-left: 10px solid var(--color-theme-1);
  background-color: var(--color-theme-6);
  background-size:100% 100%;
  color: var(--color-theme-4);
}
.okay-headline h2:hover:after {
  content: '';
  border: 10px solid transparent;
  border-left-color: var(--color-theme-6);
  border-right: 0;
  margin-top: 10px;
  margin-right: 10px;
}*/

.okay-breadcrumb{
  font-family: 'Roboto Condensed','Kanit', sans-serif;
  padding-top: 2px;
  padding-bottom: 2px;
  border-top: 1px solid #0096DC;
  background-color: #0096DC;
  /*box-shadow: rgba(50, 50, 93, 0.1) 0px 10px 20px -6px inset, rgba(0, 0, 0, 0.2) 0px 3px 9px -6px inset;*/
}
.okay-breadcrumb .breadcrumb{
  margin-bottom: 0px;
  color: #fff;
}
.okay-breadcrumb .breadcrumb a{
  color: #fff;
  text-decoration: none;
}
.okay-breadcrumb .breadcrumb a:hover{
  color: #fff;
  text-decoration: none;
}
.okay-breadcrumb .breadcrumb a:visited{
  color: #fff;
  text-decoration: none;
}

.sticky-sidebar{
  position: sticky;
  top: 80px;
  margin-bottom: 1rem;
}
.btn-tag{
  border-radius: 38px;
  background-color: #888;
  color: #fff;
}

.main.container{
  margin-top: 20px;
  margin-bottom: 20px;
}
#top3-content{
  margin-top: 0px;
  
}

.menu-box {
  margin-top: 2.5px;
  margin-bottom: 15px;
  margin-right: 2.5px;
  margin-left: 2.5px;
  padding: 0px;
  padding-right: 5px;
  min-height: 25%;
}
.menu-box .menu-bar{
  padding-left:160px;
}
.menu-box .menu-bar .card{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
}
.menu-box .deco {
  background-color: var(--color-theme-1);
  width: 15px;
  min-height: 100%;
  /*margin-right: 10px;*/
  border-radius: 4px 0px 0px 4px;
}
.menu-box .dropdown {
  margin-left: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}
/*.menu-box .dropdown-toggle {
    
}*/
.menu-box .dropdown-toggle::after {
    margin-left: 0px;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none;
}
.menu-box h5 {
  margin: 5px 0px;
  font-weight: 300;
}
.menu-box form {
  margin: 5px;
  justify-items: stretch;
}
.menu-box form input {
  border-color: var(--color-theme-2);
}
.menu-box ul{
  /*width: 100%;*/
  margin-right: auto;
}
/*.menu-box li{
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
  margin-right: 10px;
  margin-left: 10px;
  
}*/



.main-logo{
  font-size: 3.3rem;
  font-family: 'Roboto Condensed', sans-serif;
  display: inline-block;
  line-height: 3.2rem;
  color:whitesmoke;
  text-shadow: var(--shadow-color);
  /*letter-spacing: 2px;*/
}


.tags-box {
  margin-top: 2.5px;
  margin-bottom: 15px;
  margin-right: 2.5px;
  margin-left: 2.5px;
  padding: 0px;
  padding-right: 5px;
  min-height: 25%;
}

.tags-box .card {
  background-color: var(--color-theme-3);
  
}


.tag-carousel .row{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;

}
#carouselTag .carousel-control-prev {
  width: 0;
  height: 0;
  border-radius: 5px;
  border-top: 4px solid transparent;
  border-right: 8px solid var(--color-theme-4);
  border-bottom: 4px solid transparent;
  transition: all .6s ease;
}
#carouselTag .carousel-control-next {
  width: 0;
  height: 0;
  border-radius: 5px;
  border-top: 4px solid transparent;
  border-left: 8px solid var(--color-theme-4);
  border-bottom: 4px solid transparent;
  transition: all .6s ease;
}
#carouselTag .carousel-control-next, #carouselTag .carousel-control-prev{
  position: relative;
}
#carouselTag .carousel-control-btn {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 15px;
  height: 8px;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  border-radius: 5px;
  background-color: var(--color-theme-4);
  /*background-clip: padding-box;*/
  border: 0;
  /*border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;*/
  opacity: .4;
  transition: all .6s ease;
}
#carouselTag .carousel-control-btn.active  {
  opacity: 1;
  width: 50px;
}
#carouselTag .carousel-indicators{
  position: relative;
  padding: 10px;
}


.headline-box {
  margin: 2.5px;
  padding: 0px;
  padding-right: 5px;
  border-left: 10px solid var(--color-theme-3);
}
.headline-box h2{
  display: inline-block;
  font-family: 'Roboto Condensed', sans-serif;
  line-height: 30px;
  margin-bottom: 0px;
  /*border-top-right-radius: 30px;
  padding-right: 35px;*/
  padding-right: 15px;
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: var(--color-theme-5);
  color: var(--color-theme-4);
}
.headline-box hr{
  margin-top: 0px;
  margin-bottom: 0px;
  border-top: 2px solid var(--color-theme-5);
  opacity: 1;
}



.news-group{
  position: relative;
  padding: 5px;
}
.news-group *{
  font-size: 02ch;
}
.news-group>.news-box{
  color: rgb(var(--text10));
  position: relative;
  background-color: #ccc;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.news-box>.news-img{
  position: relative;
  display: flex;
  padding-top: 56.25%;
  background-image:url(/img/OkayCafe-logo.png),url(/img/100-90-5-monochrome.png);
  background-position:center ,center;
  background-repeat: no-repeat ,repeat;
  background-size: cover,inherit;
}
.news-box>.news-img>img{
  position: absolute;
  display: flex;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
.news-box>.news-detail{
  display: block;
  position: absolute;
  line-height: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border-left: 10px solid var(--color-theme-3) ;
  background-color: rgb(var(--color-rgb-theme-6)/0.8);
  padding: 10px 10px;
  
}
.news-box>.news-detail h5{
  display: inline;
  font-weight: 300;
  font-size: 1.38ex;

}
.news-box>.news-detail span{
  color: rgb(var(--text07));
  display: inline;
  font-size: 0.95ex;
  font-weight: 300;

}
.news-box>.news-detail p{
  display: -webkit-box;
  color: rgb(var(--text09));
  margin-top: 8px;
  margin-bottom: 8px;
  font-family: 'Sarabun', sans-serif;
  font-size: 1.20348ex;
  text-indent: 15px;
  font-weight: 200;
  line-height: normal;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; 
  overflow: hidden;
}

/*#mainCarousel*/
.carousel-item .news-box{
  color: rgb(var(--text10));
  position: relative;
 
}
.carousel-item .news-img{
  position: relative;
  display: flex;
  padding-top: 33.33%;
  background-image:url(/img/OkayCafe-logo.png),url(/img/100-90-5-monochrome.png);
  background-position:center ,center;
  background-repeat: no-repeat ,repeat;
  background-size: cover,inherit;
  overflow: hidden;
}
.carousel-item .news-img>img{
  position: absolute;
  display: flex;
  left: -20%;
  top: 0px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.carousel-item .news-detail{
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  line-height: 0px;
  width: 50%;
  top: 0px;
  left: unset;
  right: 0px;
  bottom: 0px;
  border-left: none;
  padding: 10px 10px;
  padding-left: 10%;
} 

#mainCarousel .news-detail{
  background-color: unset;
  background-image: linear-gradient(90deg, rgb(var(--color-rgb-theme-2)/0) 6%, rgb(var(--color-rgb-theme-2)/1) 28%);
}
#carouselTag .news-detail{
  background-color: unset;
  background-image: linear-gradient(90deg, rgba(var(--color-rgb-theme-3)/0) 6%, rgba(var(--color-rgb-theme-3)/1) 28%);
}



.carousel-item .news-detail h5{
  display: inline;
  font-weight: 300;
  font-size: 4.38ex;

}
.carousel-item .news-detail span{
  color: rgb(var(--text07));
  display: inline;
  font-size: 2.25ex;
  font-weight: 300;

}
.carousel-item .news-detail p{
  display: -webkit-box;
  color: rgb(var(--text09));
  margin-top: 8px;
  margin-bottom: 8px;
  font-family: 'Sarabun', sans-serif;
  font-size: 2.80348ex;
  text-indent: 10%;
  font-weight: 200;
  line-height: normal;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; 
  overflow: hidden;
}





.footer{
  font-family: 'Roboto Condensed', sans-serif;
  display: flex;
  color: whitesmoke;
  align-content: center;
  text-align: center;
  align-items: center;
  background-color: var(--color-theme-5);
  padding-top: 30px;
  padding-bottom: 30px;
}
.footer h4{
  padding-left: 10px;
  line-height: 20px;
  align-content: flex-start;
  text-align: left;
  align-items: flex-start;
}
.footer hr{
  margin-top: 5px;
}
.footer ul{
  padding-left: 10px;
    
}
.footer-svg{
  display: inline-block;
}
.footer-logo{
  font-size: 26px;
  font-family: 'Roboto Condensed', sans-serif;
  display: inline-block;
  line-height: 1.8rem;
  /*letter-spacing: 2px;*/
}
.footer-blockquote{
  align-self: center;
  display: block;
  width: 100%;
}
blockquote.footer-blockquote {
  /*background: #f9f9f9;
  border-left: 10px solid #ccc;*/
  color: #ddd9;
  font-family:  'Kanit', sans-serif;
  font-weight: 200;
  font-size: 1.5em;
  margin: 0.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote.footer-blockquote:before {
  font-family: 'Pattaya', sans-serif;
  color: #ccc5;
  content: open-quote;
  font-size: 4em;
  line-height: 0.05em;
  margin-right: 0.02em;
  vertical-align: -0.4em;
}
blockquote.footer-blockquote:after {
  font-family: 'Pattaya', sans-serif;
  color: #ccc5;
  content: close-quote;
  font-size: 4em;
  line-height: 0.05em;
  margin-right: 0.02em;
  vertical-align: -0.4em;
}

.footer-link{
  font-size: 1rem;
  font-family: 'Roboto Condensed', sans-serif;
  display: inline-block;
  line-height: 30px;
  color: whitesmoke;
  /*letter-spacing: 2px;*/
}
.footer-link a:link{
  color: whitesmoke;
  text-decoration: none;
  /*letter-spacing: 2px;*/
}
.footer-link a:visited{
  color: whitesmoke;
  /*letter-spacing: 2px;*/
}

#footer{
  display: flex;
  color: whitesmoke;
  align-content: center;
  text-align: center;
  justify-content: center;
  align-items: center;
  background-color: var(--color-theme-1);
}

/* defaut is xs  */


@media (min-width: 0px) {
  
  .debug-box:after{
    content: "xs";
  }
  .navbar-menu .nav-link{
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
  
}
@media (min-width: 576px) {
  .container{
    max-width: 566px;
  }   
  .debug-box:after{
    content: "sm";
  }
  .navbar-menu .nav-link{
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }
}
@media (min-width: 768px) {
  .container{
    max-width: 758px;
  } 
  .debug-box:after{
    content: "md";
  } 
  .okay-item .okay-group{ 
    min-height: 90px;
  }
}
@media (min-width: 992px) {    
  .debug-box:after{
    content: "lg";
  }  
}
@media (min-width: 1200px) {   
  .debug-box:after{
    content: "xl";
  }
  .okay-item .okay-group{ 
    min-height: 90px;
  }
}
@media (min-width: 1400px) {   
  .debug-box:after{
    content: "xxl";
  }
  .okay-item .okay-group{ 
    min-height: 90px;
  }
}

ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
}