@import url(fonts/thsarabunnew.css);
/*@import url(fonts/Kanit.css);
@import url(fonts/Mitr.css);*/
@import url('https://fonts.googleapis.com/css?family=Kanit');
@import url('https://fonts.googleapis.com/css?family=Mitr');
@import url('https://fonts.googleapis.com/css?family=Sarabun');

body,td,th,p { 
	/*font-family: 'THSarabunNew',tahoma, sans-serif;*/
  font-family: 'Sarabun', 'THSarabunNew', tahoma, sans-serif;
  font-weight: lighter;
  font-size:1rem;
  color:#555;
} 
h1, h2, h3, h4, h5, h6, nav, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: 'Kanit', 'Mitr', 'THSarabunNew', 'Sarabun', tahoma, sans-serif;
  /*font-weight: bold;*/
}

strong{
  font-weight: bold;
  /*font-size:1.05rem;*/
}

.strong{
  font-weight: bold;
  /*font-size:1.05rem;*/
}

.fontKanit{
  font-family: 'Kanit';
}

.fontMitr{
  font-family: 'Mitr';
}

a{
  text-decoration: none;
}

#myLogoImage{

  
}
.color-mahidol{
  color:rgb(21,59,124);
}
.color-py{
  /*color:#669900;*/
  color:#6F7145;
}
.bg-mahidol{
  /*background-color: #153b7c;*/
  /*background: rgba(21,59,124,1);*/
  background: rgb(21,59,124);
  /*background: linear-gradient(90deg, rgba(21,59,124,1) 67%, rgba(52,104,189,1) 89%, rgba(21,59,124,1) 97%);*/
}

.bg-mahidol-trans{
  background: rgba(21,59,124,0.95);
}


.bg-py{
  background: #669900;
}

.bg-grayfade{
  background: rgb(238,238,238);
  background: linear-gradient(180deg, rgba(238,238,238,1) 10%, rgba(211,211,211,1) 30%, rgba(211,211,211,1) 60%, rgba(255,255,255,1) 90%);
}

.bg-grayfade-toggle{
  background: rgb(255,255,255); 
  background: linear-gradient(180deg, rgba(255,255,255,1) 40%, rgba(221,221,221,1) 80%, rgba(255,255,255,1) 100%);
}

.bg-bluestrip{
  background-image: repeating-linear-gradient(45deg, #606dbc, #606dbc 5px, #465298 5px, #465298 10px);
}



.container-xxl{
  max-width: 1800px;
}


.dropdown-menu{
  background-color: #153b7c;
}

.dropdown-menu a{
  color:#ddd;
  padding-top:10px;
  padding-bottom:10px;
}



.nav-link{
  color:#ccc;
  text-align: center;
  transition: transform 0.3s ease;
}

.nav-link:hover{
  color:#fff;
  transform: scale(1.1);
}


.dropdown-item{
  text-align: center;
  transition: transform 0.3s ease;
}

.dropdown-item:hover{
  transform: scale(1.1);
}

.imgpop{
  transition: transform 0.3s ease;
}

.imgpop:hover{
  transform: scale(1.02);
}



button{
  transition: transform 0.3s ease;
}

button:hover{
  transform: scale(1.1);
}

.circular-image { 
  width: 200px;
  height: 200px;
  border:0px solid #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.1);
  object-fit: cover;
  border-radius: 50%;
  transition: transform 0.3s ease;
}
.circular-image:hover{
  transform: scale(1.05);
}

.imgPresentContainer {

  display: block;
  width: 100%;
  height: 50.5vw;
  max-height: 100vh;
  background-color: #eee;

}

.navbar-brand img{
  max-height: 50px;
}

.carousel-item{
  /*background-color: rgba(0,0,0,0.08);*/
  background:#eee;
}

.carousel-caption-custom{ /* Mobile */

  background-color: #eee;
  background: rgb(238,238,238);
  background: linear-gradient(180deg, rgba(238,238,238,1) 40%, rgba(251,251,251,1) 70%, rgba(238,238,238,1) 100%);
  color: #333;
  border: 0px solid #ddd;
  border-radius: 0px;
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom:10px;
  padding-top: 10px;
  padding-left: 5px;
  padding-right: 5px;
  height:190px;
  width: 100%;
  font-size:0.9rem;
  
}

.carousel-indicators .active{
  background-color: #000;
}



@media (min-width:768px) { /* LG */
  
  .carousel-caption-custom{
    height:auto;
  }

  .bg-mahidol{
    background: linear-gradient(90deg, rgba(21,59,124,1) 67%, rgba(52,104,189,1) 89%, rgba(21,59,124,1) 97%);
  }

}



@media (min-width:1100px) {

  #myLogoImage{

    height: 60px;

  }

  .imgPresentContainer {

    position: relative;
    /*padding-bottom: calc(750 / 2000 * 100%);*/
    padding-bottom: calc(750 / 2000 * 100%);
    padding-top: 0px;
    height: 0;  
    
  }

  .navbar-brand img{
    max-height: 70px;
  }

  .carousel-item{
    background: #eee;
  }

  .carousel-caption-custom{ /* PC */

    display: none;
    /*
    background-color: #000;
    background: rgba(255,255,255,1);
    color: #333;
    border: 0px solid #fff;
    border-radius: 10px;
    position: relative;
    margin-top: -50px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: 5%;
    width: 800px;
    height:auto;
    */

    
  }

}


@media (min-width:1260px) and (max-width:1399px) {
  #myLogoImage{

    max-height: 60px;

  }

  .nav-link {
    font-size: 0.9rem;
  }

  .dropdown-item{
    font-size: 0.9rem;
  }
  
}


@media (min-width:1400px) {

  .circular-image { 
    width: 250px;
    height: 250px;
  }

  .carousel-caption-custom{ /* PC */

    display: none;
    /*
    background-color: #000;
    background: rgba(255,255,255,1);
    color: #333;
    border: 0px solid #fff;
    border-radius: 10px;
    position: relative;
    margin-top: -60px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: 5%;
    width: 800px;
    height:auto;
    */

  }

}


.popimg{
  filter: saturate(90%);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.popimg:hover{
  transform: scale(1.02);
  filter: saturate(150%);
}

.boxitem-3x2{
  border:0px solid #fff;
  background-color: #eee;
  position: relative;
  padding-bottom: calc(2000 / 3000 * 100%);
	padding-top: 0px;
	height: 0;
  margin-top:10px;
  margin-bottom:10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

.boxitem-3x2:hover{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.19);
}



.boxitem-4x3{
  border:0px solid #fff;
  background-color: lightblue;
  position: relative;
  padding-bottom: calc(300 / 400 * 100%);
	padding-top: 0px;
	height: 0;
  margin-top:10px;
  margin-bottom:10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

.boxitem-4x3:hover{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.19);
}


.boxitem-16x9{
  border:0px solid #fff;
  background-color: lightblue;
  position: relative;
  padding-bottom: calc(900 / 1600 * 100%);
	padding-top: 0px;
	height: 0;
  margin-top:10px;
  margin-bottom:10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

.boxitem-16x9:hover{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.19);
}



.boxmenu-3x2{
  background-color: lightblue;
  background-size: cover;
  background-position: center;
  position: relative;
  padding-bottom: calc(2000 / 3000 * 100%);
	padding-top: 0px;
	height: 0;
  margin-top:10px;
  margin-bottom:10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  border:0px solid #fff;
  filter: saturate(90%);
  transition: transform 0.3s ease, filter 0.3s ease;

}

.boxmenu-3x2:hover{
  cursor: pointer;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 4px 8px 0 rgba(0, 0, 0, 0.19);
  transform: scale(1.02);
  filter: saturate(150%);
  z-index: 3;
}



.boxitem2-16x9{
  background-color: lightblue;
  position: relative;
  padding-bottom: calc(900 / 1600 * 100%);
}

.list2rem{
  line-height: 2rem;
}



#zoomDetail h1,#zoomDetail h2,#zoomDetail h3,#zoomDetail h4,#zoomDetail h5,#zoomDetail h6{
  color: #669900;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
#zoomDetail,#zoomDetail p,#zoomDetail td,#zoomDetail th,#zoomDetail li{font-family: 'THSarabunNew','Sarabun';}
#zoomDetail blockquote p{ font-family: 'Kanit'; font-size:larger; padding: 1rem; border-left:5px solid #ccc; background-color: #eee; }
#zoomDetail li{ margin-bottom: 1rem;}
#zoomDetail img{ width:100%; max-width: 800px; margin-top:2rem; margin-bottom: 2rem;}

#referenceBox p,#referenceBox li,#referenceBox td,#referenceBox a{ font-size:0.8rem; margin-bottom:0.8rem}
