.content_preview{
    text-align: justify;
    text-indent:3em;
}

.text-green{
    color: #12674A ;
}


.info_button
,.info_button:hover
{
    text-decoration: none;
    color: initial;
}

.info_button div{
    
    width                : 100%;
    height               : 2em;
    line-height          : 2em;
   
    background-color     : #99CCFF;
    /* border-radius        : 50%; */
    /* -webkit-border-radius: 50%;
    -moz-border-radius   : 50%; */
    -webkit-box-shadow   : 0px 5px 5px 0px #adb5bd;
    box-shadow           : 0px 5px 5px 0px #adb5bd;
}

.text-topic{
    color: #12674A;
}

div.contact{
    font-size:1.1em;
    margin-top:0.5em;
    margin-bottom:0.5em;
}

div.contact .fa-line{
    color:green;
    font-size:1.6em;   
}
div.contact .fa-phone-square{
    color:#0066ff;
    font-size:1.6em;   
}

.p_li{
    text-align: left !important;
}

.bg-light>div>p{
    font-size: 18px;
    /* color: rgb(21, 49, 77); */
}

.table-dt{
    background-color : #a4dbca !important;
}
.table-dt-light>td{
    background-color : #d7f3ea !important;
}
.btn.btn-info.btn-lg{
    background-color : #12674A !important;
    border-color : #12674A;
}
.btn.btn-info.btn-lg:hover{
    background-color : #2a9772 !important;
    border-color :#2a9772
}
#detail a{
    font-size: 18px;
    font-weight: 600;
    color: #12674A ;
}

#detail a:hover{
    font-size: 18px;
    text-decoration: none;
    color: #2a9772;  /*#dc3545 สีแดง*/
}
#fee_detail a{
    color: #212529;
}
#fee_detail a:hover{
    color: #12674A;
    text-decoration: none;
    font-weight: 600;
}


.list-inline-item.mr-3 a:hover{
    text-decoration: none;
}

.btn-outline-dark.box:hover{
    background-color: #F8F9FA;
    border-color: #343a40;
    color: #343a40;
}
.btn-outline-danger.box:hover{
    background-color: #F8F9FA;
    border-color: #dc3545;
    color: #dc3545;
}
.btn-outline-success.box:hover{
    background-color: #F8F9FA;
    border-color: #28a745;
    color: #28a745;
}
p#detail{
    margin: 0px;
}


/* add 17-03-2020 */
.tni-logo img{
    position: absolute;
    left: 3em;
    top: 1.5em;

}



@media(max-width: 989px) {
    .text-header {
        font-size: 1.2em !important;
    }
    .text-header-icon{
        font-size: 1.0em !important;
    }
    #top-banner{
        margin-top: 0.1em !important;
        /* padding: 10px 5px; */
    }
    #bottom-banner{
        margin-bottom: -4em;
    }

    hr{
        border:1px solid #333 !important;
        margin-bottom: 0.5em !important;
       margin-top: 0.5rem !important;
    }
    .tni-logo img{
        width: 30%;
        left: 2em;
    }

    .features-icons,.testimonials {
        padding-top: 3.0rem !important;
    }
    .testimonials,.features-icons{
        padding-bottom: 3rem !important;
    }

    .text-mobile{        
        font-size: 1.1em;  /* หัวข้ออื่นๆ เช่นคำว่า วิชาที่เรียน */
    }
    h6.text-mobile{
        font-size: 1.0em;  /*รายละเอียด*/
    }
    h2.text-mobile{
        font-size: 1.3em;  /*จุดเด่น โอกาส*/
    }
    .text-mobile ul{
        font-size: 0.7em;  /* listวิชาเรียน*/
    }
    .table td{
        font-size: 0.9em !important;  /*เนื้อหาของโอกาส จุดเด่น*/
    }
  
    .card-title.pricing-card-title>.text-muted{
        font-size: 0.8em !important;
    }
    p.text-mobile{
        font-size: 0.95em !important;   /* คุณสมบัติ ค่าใช้จ่าย เวลาเรียน*/
    }
    .shadow-sm.mx-auto{
        height: 270px!important;
        padding-top: 2.0em !important;  /* ระยะขอบของไอคอน คุณสมบัติ ค่าใช้จ่าย เวลาเรียน*/
    }
    .btn.btn-info.btn-lg,.btn.btn-dark.btn-lg{
        font-size: medium
        ; /* ปุ่มกลับ และสมัครเรียน */
    }
}

@media(max-width: 768px) {
    
    #media{
        font-size: 1.5em;
     
    }
    #media-icon{
        font-size:0.7em;
    }
    .text-uppercase{
        font-size: 2rem !important;
      }
   
    .text-header {
        font-size: 1.0em !important;
    }
    .text-header-icon{
        font-size: 0.8em !important;
    }
    #top-banner{
        margin-top: 0.1em !important;
        /* padding: 10px 5px; */
    }
    #bottom-banner{
        margin-bottom: -4em;
    }

    hr{
        border:1px solid #333 !important;
        margin-bottom: 0.5em !important;
       margin-top: 0.5rem !important;
    } 

    .tni-logo img{
        width: 30%;
        left: 2em;
    }

    .features-icons,.testimonials {
        padding-top: 2.0rem !important;
    }
    .testimonials,.features-icons{
        padding-bottom: 2.0rem !important;
    }

    .text-mobile{        
        font-size: 1.1em;  /* หัวข้ออื่นๆ */
    }
    h6.text-mobile{
        font-size: 1.0em;  /*รายละเอียด*/
    }
    h2.text-mobile{
        font-size: 1.3em;  /*จุดเด่น โอกาส*/
    }
    .text-mobile ul{
        font-size: 0.8em;  /* listวิชาเรียน*/
    }
    .table td{
        font-size: 0.9em !important;  /*เนื้อหาของโอกาส จุดเด่น*/
    }
    .card-title.pricing-card-title>.text-muted{
        font-size: 0.6em !important;
    }
  
    p.text-mobile{
        font-size: 0.9em !important;   /* คุณสมบัติ ค่าใช้จ่าย เวลาเรียน*/
    }
    .shadow-sm.mx-auto,.border-ld-resp{
        padding-top: 2.0em !important;  /* ระยะขอบของไอคอน คุณสมบัติ ค่าใช้จ่าย เวลาเรียน*/
    }
    .shadow-sm.mx-auto{
        height: 180px !important;
    }
    .shadow-sm.mx-auto.border-ld-resp{
        height: 310px !important;
    }
    .btn.btn-info.btn-lg,.btn.btn-dark.btn-lg{
        font-size: medium; /* ปุ่มกลับ และสมัครเรียน */
    }
}


@media(max-width: 565px) {

    #media .text-uppercase{
        /* font-size: 1.0em; */
        padding-top: 5.0em;
     
    }
    #media {
        font-size: 12px !important;
        padding-top: 0.5em;
     
    }
    #media-icon{
            font-size:0.7em;
        }
    .info_button div>p,.info_button_light div>p{
        font-size: 0.8em;
    }
    .row{
        margin-left: 0px !important;
    }
    #freepik{
        font-size:0.7em;
    }
    #logo-tni{
        width: 56%;
    }
    .text-uppercase{
         font-size: 1.0em !important;
         padding-top: 3em;
    }
        .text-second ,.list-inline {
        font-size: 1.0em !important;
        /* padding-top: 17em; */
   }

   .list-inline {
    margin: 0.1px;
  }

   
    /*add 17-03-2020*/
    .text-header {
        font-size: 0.9em !important;
    }
    .text-header-icon{
        font-size: 0.8em !important;
    }
    #top-banner{
        margin-top: -3em !important;
        padding: 0px 1px;
    }
    #bottom-banner{
        margin-bottom: -4em;
    }

    hr{
        border:1px solid #333 !important;
        margin-bottom: 0.5em !important;
       margin-top: 0.5rem !important;
    }

    .tni-logo img{
        position: relative;
        left: -5.5em;
        top: -0.1em;
        width: 40%;
    }
    .tni-logo {
        position: relative;
        top: -6em;
        background-color:rgba(255, 255, 255, 0.3);
        padding: 6px 6px 6px;
    }

    .features-icons,.testimonials {
        padding-top: 2rem !important;
    }
    .testimonials,.features-icons{
        padding-bottom: 2rem !important;
    }

    .text-mobile{        
        font-size: 1.0em;  /* หัวข้ออื่นๆ */
    }
    h6.text-mobile{
        font-size: 0.9em;  /*รายละเอียด*/
    }
    h2.text-mobile,h3.text-mobile{
        font-size: 1.2em;  /*จุดเด่น โอกาส*/
    }
    .text-mobile ul{
        font-size: 0.8em;  /* listวิชาเรียน*/
    }
    .table td{
        font-size: 0.8em !important;  /*เนื้อหาของโอกาส จุดเด่น*/
    }
  
    .card-title.pricing-card-title>.text-muted{
        font-size: 0.6em !important;
    }
    p.text-mobile{
        font-size: 0.8em !important;   /* คุณสมบัติ ค่าใช้จ่าย เวลาเรียน*/
    }
    .shadow-sm.mx-auto,.border-ld-resp{
        padding-top: 2.0em !important;  /* ระยะขอบของไอคอน คุณสมบัติ ค่าใช้จ่าย เวลาเรียน*/
    }
    .shadow-sm.mx-auto{
        height: 180px !important;
    }
    .shadow-sm.mx-auto.border-ld-resp{
        height: 340px !important;
    }
    .btn.btn-info.btn-lg,.btn.btn-dark.btn-lg{
        font-size: medium; /* ปุ่มกลับ และสมัครเรียน */
    }
    .btn.btn-info.btn-lg,.btn.btn-dark.btn-lg{
        font-size: small; /* ปุ่มกลับ และสมัครเรียน */
    }
    
    header.masthead .overlay{
        background-color: #121c27!important; 
    }

    .text-credit{
        top: 10.5em !important;
        font-size: 10px!important; 
    }

    
  
}