@font-face {
     font-family: 'bebas';
     src: url('./fonts/BEBAS.ttf');
     font-weight: normal;
     font-style: normal;
}

 @font-face {
     font-family: 'trueplookpanya';
     src: url('./fonts/trueplookpanaya-regular.eot');
     src: url('./fonts/trueplookpanaya-regular.eot?#iefix') format('embedded-opentype'), url('./fonts/trueplookpanaya-regular.ttf') format('truetype'), url('./fonts/trueplookpanaya-regular.svg#trueplookpanaya-regular') format('svg');
     font-weight: normal;
     font-style: normal;
}
 @font-face {
     font-family: 'trueplookpanya';
     src: url('./fonts/trueplookpanya-bold.eot');
     src: url('./fonts/trueplookpanya-bold.eot?#iefix') format('embedded-opentype'), url('./fonts/trueplookpanya-bold.ttf') format('truetype'), url('./fonts/trueplookpanya-bold.svg#trueplookpanya-bold') format('svg');
     font-weight: bold;
     font-style: normal;
}
 @font-face {
     font-family: 'TrueTextBOnline';
     src: url('./fonts/TrueTextBOnline-Regular.ttf');
     font-weight: normal;
     font-style: normal;
}
 @font-face {
     font-family: 'TrueTextBOnline';
     src: url('./fonts/TrueTextBOnline-Bold.ttf');
     font-weight: bold;
     font-style: normal;
}

 @font-face {
     font-family: 'trueplookpanyaround';
     src: url('./fonts/trueplookpanyaround.ttf');
     font-weight: normal;
     font-style: normal;
}
 @font-face {
     font-family: 'trueplookpanyaround';
     src: url('./fonts/trueplookpanyaround.ttf');
     font-weight: bold;
     font-style: normal;
}


 @font-face {
     font-family: 'TrueOnline-Bold';
     src: url('./fonts/TrueOnline-Bold.otf') format("opentype");

     font-style: normal;
}
 @font-face {
     font-family: 'TLight';
     src: url('./fonts/TLight.ttf');
     font-weight: normal;
     font-style: normal;
}

 @font-face {
     font-family: 'TruePlookpanyaOnline-Bold';
     src: url('./fonts/TruePlookpanyaOnline-Bold.ttf') format("opentype");

     font-style: normal;
}

 @font-face {
     font-family: 'TruePlookpanyaOnline';
     /* src: url('./fonts/TruePlookpanyaOnline-Bold.ttf'); */
     src: url('./fonts/TruePlookpanyaOnline-Bold.ttf');
     font-weight: bold;
}
 @font-face {
     font-family: 'TruePlookpanyaOnline';
     src: url('./fonts/TruePlookpanyaOnline-Regular.ttf');
}

/* BASE */
 html, body {
     font-family: TrueTextBOnline, sans-serif;
     color:#333;
     font-size: 28px;
     height: 100%;
     margin: 0;
     padding: 0;
}
 body{
    /*background-color:#607d8b;
     */
     font-family:TruePlookpanyaOnline; font-weight:bold;
}
 body>header{
    /*margin-bottom:135px;*/
    background-color:#fff;
}
txt-main {font-family:TrueTextBOnline; font-size:28px;}
 a{
    color:#666;
     text-decoration:none;
}
 a:hover, a:focus, a:active, a.active {
    color:#999;
     text-decoration:none;
}
 .carousel-indicators-circle li {
     border-radius: 12px;
     width: 12px;
     height: 12px;
     background-color: #404040;
}
 .row-equal > div[class*='col-'] {
     display: flex;
     flex: 1 0 auto;
}
 .row-equal .card {
    /*width: 220%;
    */
}
/*
 .carousel-inner-card>.row-equal.active, .carousel-inner-card>.row-equal.next, .carousel-inner-card>.row-equal.prev {
     display: flex;
}
 .carousel-inner-card>.row-equal.active.left, .carousel-inner-card>.row-equal.active.right {
     opacity: 0.5;
     display: flex;
}
 .carousel-inner-card>.carousel-item-next, .carousel-inner-card>.carousel-item-prev {
     opacity: 0.5;
     display: flex;
}
*/
 .home-timeline {
     font-size: 2vw;
}
 select.ddl {
     font-size:24px;
     font-family:TrueTextBOnline;
     border-radius:5px;
     height:45px !important;
     border:2px solid #FF3241;
     overflow: hidden;
     overflow: -moz-hidden-unscrollable;
     background: url(../images/ddl-caret.png) no-repeat right white;
     background-size:  26px 26px ;
     position: relative;
     background-position: right 10px center;
     -webkit-appearance: none;
     -moz-appearance: none;
     text-indent: 1px;
     padding-right: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 25px;
    padding-top:0.237rem;
    padding-bottom:0.237rem;
}
 select.ddl::-ms-expand {
     display: none;
}
 select.ddl:focus {
     border:2px solid #FF3241;
     box-shadow: unset;
}
 .dream-navbar {
    background-color:#fff;
    /*min-height:132px;*/
    /*padding: 10px;*/
}
 .dream-navbar a, .dream-navbar a:hover {
    color:#ff3241;
}
 .dream-navbar .navbar-brand, .dream-navbar .navbar-brand:hover{
     font-family:Bebas;
     font-size:15px;
     color:#ff3241 
}
 .navbar-toggler-icon{
    height:29px
}
 .bg-red{
    background-color:#CC2834
}
 .bg-red2{
    background-color:#FF3241
}
 .h2-line-red {
     position: relative;
}
 .h2-line-red span{
     z-index: 2;
     display: block;
     background: #cc2834;
     padding: 0 24px;
     font-family: Bebas;
     font-size:22.4px;
     color:#fff;
    line-height: 24px;
}
 .h2-line-red hr{
     margin-top: unset;
     width: 100%;
     position: absolute;
     height: 3px;
     background: #fff;
     border: 0px;
     z-index: 0;
    margin: 0.5em auto;
    line-height: 24px;
}
 .h2-line-gray {
     position: relative;
}
 .h2-line-gray span{
     z-index: 2;
     display: block;
     background: #fff;
     padding: 0 24px;
     font-family: TruePlookpanyaOnline;
     font-size:30px;
     color:#333;
    line-height: 24px;
}
 .h2-line-gray hr{
     margin-top: unset;
     width: 100%;
     position: absolute;
     height: 3px;
     background: #333;
     border: 0px;
     z-index: 0;
    margin: 0.5em auto;
    line-height: 24px;
}

.TrueTextBOnline {font-family:TrueTextBOnline}
.box-summary { width:150px; height:150px; border:3px solid #FF3241; border-radius:5px; margin:auto; }
.box-summary h1{ font-family:TrueTextBOnline; font-size:72px; margin-bottom:0px; font-weight:bold}
.box-summary span{ font-family:TruePlookpanyaOnline; font-size:24px; font-weight:bold}

.card-img-top { width: 100%; border-top-left-radius: calc(4px - 1px); border-top-right-radius: calc(4px - 1px); }
.card{ border-radius: 4px; }

.bg-bar2 {margin:0 auto; background-color:#ee3a46; padding: 11px 0px; font-family: 'TruePlookpanyaOnline-Bold'; color:#fff; font-size:30px;}
.bg-bar2 a:hover{ color:#FDE757; }
.bg-bar2 a{ padding: 0 40px; color:#fff; }


.fixed-top-margin{margin-top:68px;}

/*SM*/
@media (min-width: 576px) {
  .box-summary {    width:120px;   height:120px;    } 
  .box-summary h1{    font-size:54px;   } 
  .box-summary span{    font-size:32px   } 
} 
  .tde-text{display:none;}
@media (min-width: 376px) {
  .tde-text{display:inline-block;}
}
@media (min-width: 768px) {
   .h2-line-gray span{ font-size:36px; }
  .box-summary {    width:120px;    height:120px;  }
  .box-summary h1{    font-size:54px;    margin-bottom:0px;  }
  .box-summary span{    font-size:32px  }
  .dream-navbar .navbar-brand, .dream-navbar .navbar-brand:hover{   font-size:18px;  }
  .bg-bar2 { font-size:22px;}
  .bg-bar2 a{ padding: 0 10px; }
  .img-logo{width:auto;}  
.fixed-top-margin{ /*margin-top:135px;    */margin-top: 125px;}
}
  .img-logo{width:auto; max-height:35px}
@media (min-width: 992px) {
   .h2-line-gray span{ font-size:40px; }
  .img-logo{width:auto; max-height:42px}
  .dream-navbar .navbar-brand, .dream-navbar .navbar-brand:hover{   font-size:25px;  }
  .box-summary {    width:150px;    height:150px;  }
  .box-summary h1{    line-height: 50px;    margin-top: 30px;  }
  .box-summary span{    font-size:32px;        top: 10px;    position: relative;  }
  .bg-bar2 { font-size:28px;}
  .bg-bar2 a{ padding: 0 15px; color:#fff;}
  .txt-login-bar{font-size:19px}
}
@media (min-width: 1200px) {
  .bg-bar2 a{ padding: 0 35px; color:#fff; }
}


.txt-login-bar{font-size:22px; /*font-family:*/}
.color-red1 {color:#ff3241;}
.color-pink1{color:#D51F6C}
 .btn-dream{
 color:#fff;
 }
 .btn-dream:focus{
   outline: 0;
   -webkit-box-shadow: none;
   box-shadow: none;
}
/*
 .btn-dream{
    font-family:trueplookpanyaround;
     font-size: 23px;
     background: #FF3241;
     border: 0;
     color:#fff;
}
 .btn-dream:hover{
    background: #cc2834;
}

*/
 .h3-e{
    font-family:Bebas;
     font-size:21px;
     line-height:49px;
}
 .footer-all span, .footer-all p, .footer-all a {
    font-family:TrueTextBOnline;
     font-size:21px;
     line-height:32px;
     color:#fff
}

.noborder-active, .noborder-active:hover, .noborder-active:active, .noborder-active:focus{border:0px; outline: unset;}

.dropdown-menu-profile{    background: #ff3241; margin: 12px 0 0; border-radius: 0px; border: 0px;}
.dropdown-menu-profile .dropdown-item{    color: #fff; font-size:20px;}
.dropdown-menu-profile .dropdown-item:hover{    color: #eee; text-decoration: none; background-color: #cc2834;}
.nav-white {color: #fff !important; font-family: TrueTextBOnline; font-size: 22px; line-height: 18px;}

.round-5px{border-radius:5px;}
.py-55px{padding-bottom:55px; padding-top:55px;}




/* HOVER EFFECT */
.hover-grad { background-color: #fff;}
.hover-grad img {	opacity: 1;	-webkit-transition: .3s ease-in-out;	transition: .3s ease-in-out; }
.hover-grad img:hover  { opacity: .5; }
.hover-zoom img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
.hover-zoom img:hover { -webkit-transform: scale(1.1); transform: scale(1.1); }
.hover-zoom { overflow: hidden; position:relative; }
.hover-opacity img:hover { opacity: 0.8; background-color:#fff;}
.hover-opacity { opacity: 1; display: block; width: 100%; height: auto; transition: .2s ease; backface-visibility: hidden; }

.btn-nofocus:focus, .btn-nofocus:active{ box-shadow: none; outline: 0; }