.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}


body {
font-family: 'Trirong', sans-serif;
font-size: 17px;
letter-spacing: 0.25px;
color: #666666;
background-color: #ffffff;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Kanit', sans-serif;
}

.clear {
clear: both;
}
/* .center {
text-align: center;
} */


/* Section Title
-------------------------------- */
h1.section-title {
color: #023059;
font-weight: 900 !important;
text-align: center;
}
hr.section-title {
width: 30%;
border-bottom: 2px solid rgb(242, 153, 75, 1);
}
@media only screen and (max-width: 767px) {
h1.section-title {
  font-size: 32px;
}
hr.section-title {
  width: 55%;
}
}


/* Navbar
-------------------------------- */
img.logo {
width: 100px;
height: auto;
margin-right: 100px;
}
.nav-item {
padding: 10px 15px;
font-family: 'Kanit', sans-serif;
font-weight: 900;
}
a.nav-link {
color: #2441D4 !important;
font-size: 18px;
text-decoration: none;
}
a:hover.nav-link, a:active.nav-link {
color: #000000 !important;
text-decoration: none;
}
@media only screen and (max-width: 767px) {
.nav-item {
  padding: 0px 15px;
}
} 


/* Banner
---------------------------- */
.banner {
width: 100%;
height: 500px;
background-image: url(https://picsum.photos/1200);
background-position: center center;
background-size: cover;
}
.banner-text {
top: 150px;
width: 80%;
left: 10%;
position: relative;
text-align: center;
background: rgb(255, 255, 255, 0.8);
}
.banner-text h3 {
padding: 20px;
font-weight: 900;
color: #000000;
}
p.intro-text {
padding: 10px 30px 20px 30px;
font-size: 20px;
color: #000000;
}
@media only screen and (max-width: 767px) {
.banner {
  width: 100%;
  height: 410px;
}
.banner-text {
  top: 60px;
  width: 90%;
  left: 5%;
}
.banner-text h3 {
  font-size: 24px;
}
p.intro-text {
  padding: 10px;
  font-size: 16px;
}
} 



/* Breadcrump
-------------------------------------- */
/* Style the list */
ul.breadcrumb {
padding: 10px 16px;
list-style: none;
background-color: #f3f3f3;
}

/* Display list items side by side */
ul.breadcrumb li {
display: inline;
font-size: 18px;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
color: #2441D4;
text-decoration: none;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
color: #000000;
text-decoration: none;
}
ul.breadcrumb i {
padding-right: 7px;
}



/* Footer
---------------------------- */
footer {
background-color: #021826;
color: #ffffff;
}
footer a {
color: #F2CB05;
text-decoration: none;
}
footer a:hover {
color: #F28749;
text-decoration: none;
}



/* Index Search
------------------------------- */
.search-accordion {
padding: 30px 0 60px 0;
background-color: #00B6DF;
}
.search-section {
/* background-color: #F2E5A2; */
background-color: #012840;
padding: 20px 20px 40px 20px;
margin-top: 40px;
}
div.index-search {
text-align: center;
padding-top: 40px;
height: 100%;
margin-bottom: 20px;
}
.index-search input[type=text] {
margin-left: 10%;
padding: 12px;
font-size: 17px;
border: 1px solid #ffffff;
float: left;
width: 70%;
background: #ffffff;
height: 55px;
}

div.author-search {
text-align: center;
/* padding-top: 10px; */
height: 100%;
/* margin-bottom: 10px; */
}
.author-search input[type=text] {
margin-left: 0;
padding: 10px;
font-size: 17px;
border: 1px solid #ffffff;
float: left;
width: 100%;
background: #ffffff;
}
div.title-search {
text-align: center;
/* padding-top: 10px; */
height: 100%;
/* margin-bottom: 10px; */
}
.title-search input[type=text] {
margin-left: 0;
padding: 10px;
font-size: 17px;
border: 1px solid #ffffff;
float: left;
width: 100%;
background: #ffffff;
}
div.keyword-search {
text-align: center;
/* padding-top: 10px; */
height: 100%;
/* margin-bottom: 10px; */
}
.keyword-search input[type=text] {
margin-left: 0;
padding: 10px;
font-size: 17px;
border: 1px solid #ffffff;
float: left;
width: 100%;
background: #ffffff;
}

.index-search button {
float: left;
width: 10%;
height: 55px;
padding: 12px;
/* background: #F2CB05; */
background: #F2B84B;
color: white;
font-size: 17px;
/* border: 1px solid #F2CB05; */
border: 1px solid #F2B84B;
border-left: none;
cursor: pointer;
}

.index-search button:hover {
/* background: #fcd719; */
background: #F2C438;
border-left: none;
/* border: 1px solid #F2E205; */
}

.index-search::after {
content: "";
clear: both;
display: table;
}
button.search-reset {
width: 20%;
padding: 12px;
background: #F2B84B;
color: white;
font-size: 17px;
border: 1px solid #F2B84B;
border-left: none;
cursor: pointer;
border-radius: 5px;
margin-right: 15px;
}
button:hover.search-reset {
background: #F2C438;
}
button.search-submit {
width: 20%;
padding: 12px;
background: #F2B84B;
color: white;
font-size: 17px;
border: 1px solid #F2B84B;
border-left: none;
cursor: pointer;
border-radius: 5px;
}
button:hover.search-submit {
background: #F2C438;
}

@media screen and (max-width: 767px) {
.index-search input[type=text] {
  margin-left: 5%;
  width: 70%;
}
.index-search button {
  width: 20%;
}
div.index-search {
  height: 100%;
}
.head-banner {
  min-height: 150px;
  height: 100%;
  padding-bottom: 40px;
}
button.search-reset {
  width: 30%;
}
button.search-submit {
  width: 30%;
}
  
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {
.tabs-wrapper label {
  width: 32.5%;
}
.head-banner {
  min-height: 180px;
  height: 100%;
  padding-bottom: 40px;
}
}



/* Search Accordion
------------------------------- */
.search-wrapper {
width: 80%;
margin-left: 10%;
margin-top: 5px;
}
.search-panel-body {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px 30px;
}
.search-panel-default > .search-panel-heading {
color: #333;
background-color: #fff;
border-color: #e4e5e7;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.search-panel-default > .search-panel-heading a {
display: block;
padding: 15px 15px;
}

.search-panel-default > .search-panel-heading a:after {
content: "";
/* position: relative; */
top: 1px;
display: inline-block;
font-family: "Glyphicons Halflings";
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
float: right;
transition: transform 0.25s linear;
-webkit-transition: -webkit-transform 0.25s linear;
}

.search-panel-default > .search-panel-heading a[aria-expanded="true"] {
background-color: #ffffff;
}

.search-panel-default > .search-panel-heading a[aria-expanded="true"]:after {
content: "\2212";
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}

.search-panel-default > .search-panel-heading a[aria-expanded="false"]:after {
content: "\002b";
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

.accordion-option {
width: 100%;
float: left;
clear: both;
margin: 15px 0;
}

.accordion-option .title {
font-size: 20px;
font-weight: bold;
float: left;
padding: 0;
margin: 0;
}

.accordion-option .toggle-accordion {
float: right;
font-size: 16px;
color: #6a6c6f;
}

.accordion-option .toggle-accordion:before {
content: "Expand All";
}

.accordion-option .toggle-accordion.active:before {
content: "Collapse All";
}
a.accordion-title {
color: #F25C05;
font-size: 16px;
text-decoration: none;
}

.index-control-group {
/* display: inline-block; */
vertical-align: top;
background-color: rgba(255, 255, 255, 1);
text-align: left;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
padding: 10px;
width: 100%;
height: auto;
margin-top: 10px;
}

@media (max-width: 767px) {
.search-wrapper {
  width: 90%;
  margin-left: 5%;
}
}




/* Reearch Type Accordion
------------------------------- */

.accordion dl,
.accordion-list {
border: 1px solid #ffffff;
}
.accordion dl:after,
.accordion-list:after {
content: "";
display: block;
height: 100%;
width: 100%;
background-color: #ffffff;
}

.accordion dd,
.accordion__panel {
background-color: #ffffff;
font-size: 1em;
line-height: 1.5em;
border: 1px solid #d9d9d9;
}

/* .accordion p {
padding: 5px;
} */

.accordion {
position: relative;
background-color: #ffffff;
}

.accordionTitle,
.accordion__Heading {
background-color: #F2B84B;
text-align: center;
font-weight: 700;
padding: 15px;
display: block;
text-decoration: none;
color: #fff !important;
transition: background-color 0.5s ease-in-out;
border-bottom: 1px solid #F2B84B;
}
.accordionTitle:before,
.accordion__Heading:before {
content: "+";
font-size: 1.7em;
line-height: 1em;
float: left;
transition: transform 0.3s ease-in-out;
}
.accordionTitle:hover,
.accordion__Heading:hover {
background-color: #F2B84B;
}

.accordionTitleActive,
.accordionTitle.is-expanded {
background-color: #F2B84B;
}
.accordionTitleActive:before,
.accordionTitle.is-expanded:before {
transform: rotate(-225deg);
}

.accordionItem {
height: auto;
overflow: hidden;
/* max-height: 50em; */
transition: max-height 0.5s;
}

.accordionItem.is-collapsed {
max-height: 0;
}

.no-js .accordionItem.is-collapsed {
max-height: auto;
}

.animateIn {
-webkit-animation: accordionIn 0.2s normal ease-in-out both 1;
        animation: accordionIn 0.2s normal ease-in-out both 1;
}

.animateOut {
-webkit-animation: accordionOut 0.2s alternate ease-in-out both 1;
        animation: accordionOut 0.2s alternate ease-in-out both 1;
}

@-webkit-keyframes accordionIn {
0% {
  opacity: 0;
  transform: scale(0.9) rotateX(-60deg);
  transform-origin: 50% 0;
}
100% {
  opacity: 1;
  transform: scale(1);
}
}

@keyframes accordionIn {
0% {
  opacity: 0;
  transform: scale(0.9) rotateX(-60deg);
  transform-origin: 50% 0;
}
100% {
  opacity: 1;
  transform: scale(1);
}
}
@-webkit-keyframes accordionOut {
0% {
  opacity: 1;
  transform: scale(1);
}
100% {
  opacity: 0;
  transform: scale(0.9) rotateX(-60deg);
}
}
@keyframes accordionOut {
0% {
  opacity: 1;
  transform: scale(1);
}
100% {
  opacity: 0;
  transform: scale(0.9) rotateX(-60deg);
}
}

@media (max-width: 767px) {
.accordionItem {
  height: 100%;
  transition: max-height 0.5s;
}
}



/* Radio Search
------------------------------- */

.radio {
margin: 5px 0px;
}
.radio input[type=radio] {
position: absolute;
opacity: 0;
}
.radio input[type=radio] + .radio-label:before {
content: "";
background: #f4f4f4;
border-radius: 100%;
border: 1px solid #b4b4b4;
display: inline-block;
width: 1.4em;
height: 1.4em;
position: relative;
top: -0.2em;
margin-right: 1em;
vertical-align: top;
cursor: pointer;
text-align: center;
transition: all 250ms ease;
}
.radio input[type=radio]:checked + .radio-label:before {
background-color: #3197EE;
box-shadow: inset 0 0 0 4px #f4f4f4;
}
.radio input[type=radio]:focus + .radio-label:before {
outline: none;
border-color: #3197EE;
}
.radio input[type=radio]:disabled + .radio-label:before {
box-shadow: inset 0 0 0 4px #f4f4f4;
border-color: #b4b4b4;
background: #b4b4b4;
}
.radio input[type=radio] + .radio-label:empty:before {
margin-right: 0;
}




/* Checkbox Search
------------------------------- */

.checkbox {
margin: 5px 0px;
}
.checkbox input[type=checkbox] {
position: absolute;
opacity: 0;
}
.checkbox input[type=checkbox] + .checkbox-label:before {
content: "";
background: #f4f4f4;
border: 1px solid #b4b4b4;
display: inline-block;
width: 1.4em;
height: 1.4em;
position: relative;
top: -0.2em;
margin-right: 1em;
vertical-align: top;
cursor: pointer;
text-align: center;
transition: all 250ms ease;
}
.checkbox input[type=checkbox]:checked + .checkbox-label:before {
background-color: #3197EE;
box-shadow: inset 0 0 0 4px #f4f4f4;
}
.checkbox input[type=racheckboxdio]:focus + .checkbox-label:before {
outline: none;
border-color: #3197EE;
}
.checkbox input[type=checkbox]:disabled + .checkbox-label:before {
box-shadow: inset 0 0 0 4px #f4f4f4;
border-color: #b4b4b4;
background: #b4b4b4;
}
.checkbox input[type=checkbox] + .checkbox-label:empty:before {
margin-right: 0;
}


/* Dropdown Select 
----------------------------------*/
.search-select {
position: relative;
display: inline-block;
margin-bottom: 15px;
width: 100%;
}
.search-select select {
display: inline-block;
width: 100%;
cursor: pointer;
padding: 10px 15px;
outline: 0;
border: 0;
border-radius: 0;
background: #e6e6e6;
color: #4E4E4D;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.search-select select::-ms-expand {
display: none;
}
.search-select select:hover,
.search-select select:focus {
color: #000;
background: #ccc;
}
.search-select select:disabled {
opacity: 0.5;
pointer-events: none;
}
.select__arrow {
position: absolute;
top: 16px;
right: 15px;
width: 0;
height: 0;
pointer-events: none;
border-style: solid;
border-width: 8px 5px 0 5px;
border-color: #7b7b7b transparent transparent transparent;
}
.search-select select:hover ~ .search-select__arrow,
.search-select select:focus ~ .search-select__arrow {
border-top-color: #000;
}
.search-select select:disabled ~ .search-select__arrow {
border-top-color: #ccc;
}



/* PIE Charts 
--------------------------------------- */

@-webkit-keyframes bake-pie {
from {
  transform: rotate(0deg) translate3d(0, 0, 0);
}
}

@keyframes bake-pie {
from {
  transform: rotate(0deg) translate3d(0, 0, 0);
}
}
/* .pie-chart {
font-family: "Open Sans", Arial;
} */
.pie-chart--wrapper {
max-width: 360px;
margin: 30px auto;
text-align: center;
display: inline-block;
}
.pie-chart__pie, .pie-chart__legend {
display: inline-block;
vertical-align: top;
}
.pie-chart__pie {
position: relative;
height: 200px;
width: 200px;
margin: 10px auto 35px;
}
.pie-chart__pie::before {
content: "";
display: block;
position: absolute;
z-index: 1;
width: 100px;
height: 100px;
background: #EEE;
border-radius: 50%;
top: 50px;
left: 50px;
}
.pie-chart__pie::after {
content: "";
display: block;
width: 120px;
height: 2px;
background: rgba(0, 0, 0, 0.1);
border-radius: 50%;
box-shadow: 0 0 3px 4px rgba(0, 0, 0, 0.1);
margin: 220px auto;
}

.slice {
position: absolute;
width: 200px;
height: 200px;
clip: rect(0px, 200px, 200px, 100px);
-webkit-animation: bake-pie 1s;
        animation: bake-pie 1s;
}
.slice span {
display: block;
position: absolute;
top: 0;
left: 0;
background-color: black;
width: 200px;
height: 200px;
border-radius: 50%;
clip: rect(0px, 200px, 200px, 100px);
}

.pie-chart__legend {
display: block;
list-style-type: none;
padding: 0;
margin: 0 auto;
background: #FFF;
padding: 0.75em 0.75em 0.05em;
font-size: 13px;
box-shadow: 1px 1px 0 #DDD, 2px 2px 0 #BBB;
text-align: left;
width: 85%;
}
.pie-chart__legend li {
height: 1.25em;
margin-bottom: 0.7em;
padding-left: 0.5em;
border-left: 1.25em solid black;
}
.pie-chart__legend em {
font-style: normal;
}
.pie-chart__legend span {
float: right;
}

.pie-charts {
display: block;
flex-direction: row;
}
@media (max-width: 767px) {
.pie-charts {
  flex-direction: column;
}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
.pie-chart--wrapper {
  max-width: 700px;
}
}
/* @media only screen and (min-width: 1024px) and (max-width: 1199px) {
.pie-chart--wrapper {
  max-width: 500px;
}
} */


/* Count Number 
--------------------------------- */
/* 
.col_half {
width: 49%;
}
.col_third {
width: 33.33%;
}
.col_fourth {
width: 23.5%;
}
.col_fifth {
width: 18.4%;
}
.col_sixth {
width: 15%;
}
.col_three_fourth {
width: 74.5%;
}
.col_twothird {
width: 66%;
}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth {
position: relative;
display: inline;
display: inline-block;
float: left;
margin-right: 20px;
margin-bottom: 20px;
} */

.end {
margin-right: 0 !important;
}
/* Column Grids End */

.wrapper {
/* width: 980px; */
margin: 30px auto;
position: relative;
}
.counter {
background-color: #ffffff;
padding: 20px 0;
border-radius: 5px;
display: inline-block;
max-width: 32.5%;
}
.count-title {
font-size: 40px;
font-weight: 900 !important;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0;
text-align: center;
}
.count-text {
font-size: 20px;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0;
text-align: center;
}
p.count-text a {
  color: #0b64b2;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
}
p.count-text a:hover {
color: #1a2886;
}
.fa-2x {
margin: 0 auto;
float: none;
display: table;
font-size: 60px;
/* color: #4ad1e5; */
color: #F2B84B;
}

@media (max-width: 767px) {
.counter {
  max-width: 100%;
}
}


/* Researh Page
-------------------------------- */
.sidenav {
height: 100%; 
width: 300px; 
z-index: 1; 
top: 0; 
left: 0;
}
.card-head {
background-color: #F2B84B;
color: #000000;
font-size: 20px;
font-weight: 900;
padding: 10px 15px;
}
.research-type {
float: right;
}
.info-text {
font-size: 16px;
font-weight: 900;
color: #666666;
text-decoration: underline;
/* border-bottom: 1px dotted #dad9d9; */
}
.research-info-text {
font-size: 16px;
font-weight: 500;
color: #666666;
/* border-bottom: 1px dotted #dad9d9; */
}
h5.research-title {
font-family:'Trirong', sans-serif;
font-size: 19px;
font-weight: 700;
}
.row-text {
padding-top: 15px;
border-bottom: 1px dotted #dad9d9;
}


@media screen and (max-width: 767px) {
.sidenav {
  width: 97%; 
  height: 100%;
  margin-left: 5px;
}
}




/* Researcher Page
--------------------------------- */
ul.type-box {
padding: 15px 20px!important;
margin-bottom: 5px !important;
}
ul.type-box li {
list-style: none;
line-height: 30px;
}




/* Link
------------------------------- */
/* p.card-text-type {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} */
a.back-to-top {
background-color: rgba(87, 87, 87, 0.8);
color: #ffffff;
text-decoration: none;
padding: 5px 10px;
}
a:hover.back-to-top {
color: #ffffff;
}
a.title-link {
/* color: #F25C05; */
color: #0b64b2;
font-size: 18px;
font-weight: 600;
text-decoration: none;
}
a:hover.title-link {
color: #1a2886;
}
a.author-link, p.author-link a {
color: #747474 !important;
font-size: 16px;
font-weight: 600;
text-decoration: none;
}
a:hover.author-link, p.author-link a:hover {
color: #595959 !important;
}
a.title-search-link {
/* color: #F25C05; */
color: #0b64b2;
font-size: 16px;
font-weight: 400;
text-decoration: none;
}
a:hover.title-search-link {
color: #1a2886;
}
a.type-search-link {
/* color: #F25C05; */
color: #0b64b2;
font-size: 14px;
font-weight: 400;
text-decoration: none;
width: 100px !important;
}
a:hover.type-search-link {
color: #1a2886;
}
a.dep-search-link {
/* color: #F25C05; */
color: #0b64b2;
font-size: 13px;
font-weight: 400;
text-decoration: none;
width: 100px !important;
}
a:hover.dep-search-link {
color: #1a2886;
}
a.link-to-author, p.link-to-author a {
/* color: #F25C05; */
color: #0b64b2 !important;
font-size: 16px;
font-weight: 600;
text-decoration: none;
}
a:hover.link-to-author, p.link-to-author a:hover {
color: #1a2886 !important;
}
a.link-to-subject {
/* color: #F25C05; */
color: #747474;
font-size: 16px;
font-weight: 600;
text-decoration: none;
}
a:hover.link-to-subject {
color: #595959;
}


/* Button 
---------------------------------- */
.btn-outline-secondary {
color: #8C8C8C;
border-color: #8C8C8C;
margin-right: 10px;
}
.btn-outline-secondary:hover {
color: #ffffff;
background-color: #a5a5a5;
border-color: #8C8C8C;
margin-right: 10px;
}



/* Pagination
------------------------------ */
/*
.pagination{
padding: 30px 10px;
justify-content: center;
margin-bottom: 50px;
}

.pagination ul {
margin: 0;
padding: 0;
list-style-type: none;
}

.pagination li {
display: inline-block;
}

.p1 li a {
display: inline-block;
padding: 7px 16px;
color: #222;
}

.pagination .p1 li {
width: 35px;
height: 35px;
line-height: 35px;
padding: 0;
text-align: center;
}

.p1 li a.is-active{
background-color: #F2B84B;
color: #fff;
}

.p1 li a:hover{
background-color: #F2B84B;
color: #fff;
text-decoration: none;
}*/
.pagination li a, .pagination li span {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
/* border: 1px solid #F2B84B; */
margin: 0 4px;
}

.pagination li.active a {
background-color: #F2B84B;
color: white;
/* border: 1px solid #F2B84B; */
}

.pagination li a:hover:not(.active) {
background-color: #F2B84B;
color: white;
}



@media screen and (max-width: 767px) {
.pagination{
  width: 380px;
}
}



/* Responsive Table
-------------------------------------- */

.researcher-table {
margin: 0 0 40px 0;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
display: table;
}
.researcher-row {
display: table-row;
background: #f6f6f6;
}
.researcher-row:nth-of-type(odd) {
background: #e9e9e9;
}
.researcher-row.header {
font-weight: 900;
color: #ffffff;
background: #002840;
text-align: center;
}
.cell {
padding: 10px 15px;
display: table-cell;
}
.cell-number {
padding: 10px 15px;
display: table-cell;
text-align: center;
}


@media screen and (max-width: 767px) {
.researcher-table {
  display: block;
}
.researcher-row {
  padding: 14px 0 7px;
  display: block;
}
.researcher-row.header {
  padding: 0;
  height: 6px;
}
.researcher-row.header .cell {
  display: none;
}
.researcher-row .cell {
  margin-bottom: 10px;
}
.researcher-row .cell:before {
  margin-bottom: 3px;
  content: attr(data-title);
  min-width: 98px;
  font-size: 15px;
  line-height: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #969696;
  display: block;
}
.cell {
  padding: 2px 16px;
  display: block;
}
.cell-number {
  padding: 2px 16px;
  display: block;
  text-align: left;
}
}

/* Carousel
------------------------------------ */
.head-banner {
width: 100%;
max-height: 650px;
position: relative;
}
/* .carousel-item {
height: 700px;
display: flex;
overflow-x: auto;
} */
.carousel-item img {
width: 100%;
height: 700px;
object-fit: cover;
}
.carousel-caption {
/* background: rgba(255, 255, 255, 0.5); */
background: rgba(0, 0, 0, 0.3);
bottom: 100px;
left: 20%;
right: 20%;
}
.carousel-caption h2 {
color: #ffffff;
font-weight: 900;
padding: 20px;
}
.carousel-caption p {
color: #ffffff;
font-weight: 900;
padding: 10px;
font-size: 20px;
}
@media screen and (max-width: 767px) {
.carousel-item img {
  width: 100%;
  height: 210px;
  object-fit: cover;
}
.carousel-caption {
  /* background: rgba(255, 255, 255, 0.5); */
  background: rgba(0, 0, 0, 0.3);
  bottom: 0px;
  left: 5%;
  right: 5%;
  display: none;
}
.carousel-caption h2 {
  font-size: 20px;
}
.carousel-caption p {
  font-size: 16px;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px){
.carousel-item img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
.carousel-caption {
  /* background: rgba(255, 255, 255, 0.5); */
  background: rgba(0, 0, 0, 0.3);
  bottom: 80px;
  left: 10%;
  right: 10%;
}
.carousel-caption h2 {
  font-size: 22px;
}
.carousel-caption p {
  font-size: 17px;
  padding: 15px;
}
}
@media screen and (min-width: 1024px) and (max-width: 1200px){
.carousel-item img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}
.carousel-caption {
  /* background: rgba(255, 255, 255, 0.5); */
  background: rgba(0, 0, 0, 0.3);
  bottom: 80px;
  left: 10%;
  right: 10%;
}
.carousel-caption h2 {
  font-size: 24px;
}
.carousel-caption p {
  font-size: 17px;
  padding: 15px;
}
}

/* About Page
------------------------------------- */
.about-text {
font-size: 16px;
font-weight: 500;
color: #666666;
padding: 5px 15px 0px 15px;
}
li.about-text {
font-size: 16px;
line-height: 30px;
font-weight: 500;
color: #666666;
padding: 5px 15px 0px 15px;
}
h3.about-page-title {
padding: 15px 15px 10px 15px;
}



/* Login Popup
-------------------------------------- */
.modal-content input[type=text], .modal-content input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}

button.login {
background-color: #F2B84B;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}

button.login:hover {
opacity: 0.8;
}

button.cancel {
background-color: #f44336;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 120px;
}

button.cancel:hover {
opacity: 0.8;
}

.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}

.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}

img.avatar {
width: 40%;
border-radius: 50%;
}

.container {
padding: 16px;
}

span.psw {
float: right;
padding-top: 16px;
}

.modal {
display: none; 
position: fixed; 
z-index: 1; 
left: 0;
top: 0;
width: 100%; 
height: 100%; 
overflow: auto; 
background-color: rgb(0,0,0); 
background-color: rgba(0,0,0,0.4); 
padding-top: 60px;
}

.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; 
border: 1px solid #888;
width: 80%; 
}

.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: red;
cursor: pointer;
}

.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)} 
to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
from {transform: scale(0)} 
to {transform: scale(1)}
}

@media screen and (max-width: 300px) {
span.psw {
   display: block;
   float: none;
}
.cancelbtn {
   width: 100%;
}
}



/* Contact
------------------------------------- */
div.contact {
margin-left: 10%;
margin-right: 10%;
width: 80%;
}
.contact input[type=text], .contact select, .contact textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}

.btn-primary {
color: #ffffff;
background-color: #002840;
border-radius: 4px;
border: none;
padding: 10px 15px;
}
.btn-primary:hover {
background-color: #155c85;
}

/* .contact input[type=submit] {
background-color: #002840;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}

.contact input[type=submit]:hover {
background-color: #002033;
} */

@media screen and (max-width: 767px) {
div.contact {
  margin-left: 5%;
  margin-right: 5%;
  width: 90%;
}
}



/* Custom All Form 
----------------------------------------------*/
div.bookmark-form {
margin-left: 10%;
margin-right: 10%;
width: 80%;
}
.bookmark-form input[type=text], .bookmark-form select, .bookmark-form textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}

@media screen and (max-width: 767px) {
div.bookmark-form {
  margin-left: 5%;
  margin-right: 5%;
  width: 90%;
}
}




/* Redirect message
---------------------------------------------- */
.message-card {
width: 50%;
margin-left: 25%;
margin-right: 25%;
border-radius: 10px;
border: 1px solid #021826;
background-color: #021826;
color: #ffffff;
padding: 30px;
text-align: center;
}
.xl-size {
font-size: 80px;
padding-top: 50px;
padding-bottom: 50px;
}

@media only screen and (max-width: 767px) {
.message-card {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
.message-card {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
}
}