* {box-sizing: border-box;}
html body {
	margin: 0;
	height: 100%;
	margin-bottom: 59px; /* Add a bottom margin to avoid content be overlaid by bottom navbar */
	/*width: 100%;*/
	/*font-family: Arial, Helvetica, sans-serif;*/
	/*background-image: {images/background_atpf1.jpg};
	background-size: contain;
	background-repeat:repeat;
	background-attachment: fixed;
	background-position: left top;
	border: 2px solid;
	width:auto;
	height:auto;*/
}
.bg {
	/*background-image: url("images/background.png");*/
	background-image: url("images/bgw400.png");
	/* Full height	 
	height:inherit;*/ 
	
	/* Center and scale the image nicely */
	background-position: left top;
	background-repeat: repeat;
	background-size:auto;
	z-index: 0;
  }
.page {
	/*display: flex;
	flex-wrap: wrap;*/
}
.section {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.header {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
/* to ensure this is full line with no flex */
.margination{
	width:100%;
}
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
    overflow: hidden;
	background-color: blue;
	position: fixed;
	bottom: 0;
	width: 100%;
	font-family: 'Niramit', sans-serif;
	z-index: 98;
}
  
/* Style the links inside the navigation bar */
.navbar a {
	float: left;
	display: block;
	color: #f8ed21;
	text-align: center;
	padding: 14px 16px; /*ค่าซ้ายคือระยะห่างบนล่าง ส่วนค่าขวาคือระยะห่างซ้ายขวา*/
	text-decoration: none;
	/*width: 10%;  Ten equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
	font-size: 24px;
	border: 3px;
	border-color:#f8ed21 ;
	border-style: groove; 
	border-radius: 3px;
}
/* Change the color of links on hover 
.navbar a:hover .dropdown:hover .dropbtn {*/
.navbar a:hover {
	background-color: #f8ed21;
	color: blue;
	transition: 2s;
}
  
  /* Add a green background color to the active link */
.navbar a.active {
	background-color: #24c0f0;
	color: white;
}
  
/* Hide the link that should open and close the navbar on small screens */
.navbar .icon {
	display: none;
}
.nav-right {
	float: right;
	/*width: 8%;*/
  }
.dropup {
	position: relative;
	/*display: inline-block;*/
	overflow: hidden;
	float: left;
	z-index:2;
  }
  
  .dropup-content {
	display: none;
	position: absolute;
	background-color: #6e6b6b;
	min-width: 150px;
	bottom: 50px;
	z-index: 1;
  }
  
  .dropup-content a {
	color: white;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
  }
  
  .dropup-content a:hover {background-color: #ccc}
  
  .dropup-content-sub {
	display: none;
	position: fixed;
	background-color: #6e6b6b;
	min-width: 150px;
	bottom: 50px;
	z-index: 1;
  }
  .dropup-content-sub a {
	color: white;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
  }
  .dropup-content-sub a:hover {background-color: #ccc}
  .dropup:hover .dropup-content {
	display: block;
  }
  
  .dropup:hover .dropbtn {
	background-color: #2980B9;
  }
  
.dropdown {
	float: left;
	overflow: hidden;
  }
  
  .dropdown .dropbtn {
	font-size: 17px;    
	border: none;
	outline: none;
	color: white;
	padding: 14px 16px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
  }
  
  .dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 100px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
  }
  
  .dropdown-content a {
	float: none;
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
  }
  
  .dropdown-content a:hover {
	background-color: #ddd;
	color: black;
  }
  
  .dropdown:hover .dropdown-content {
	display: block;
  }
  	

.overlay {
	position: fixed;
	top: 50;
	left: 50;
	height: 100px;
	width: 100px;
	z-index: 99;
	background-color: white;
  }

/* Slideshow container */
.slideshow-container {
	/*max-width: 1920px;*/
	width: 100%;
	position: relative;
	margin: auto;	
}
  
/* Hide the images by default */
.mySlides {
	display: none;	
}
.slideshow-container img{
	margin: 0px auto;  
}
  /* Next & previous buttons */
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}
  
  /* Position the "next button" to the right */
.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}
  
  /* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
	background-color: rgba(0,0,0,0.8);
}
  
/* Caption text */
.text {
	color: #f2f2f2;
	font-size: 15px;
	padding: 8px 12px;
	position: absolute;
	bottom: 15px;
	/*bottom: 8px; This make part ofcaption text at the bottom little lower than botoom photo border*/
	width: 100%;
	text-align: center;
}
  
/* Number text (1/3 etc) */
.numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
}
  
  /* The dots/bullets/indicators */
.dot {
	cursor: pointer;
	height: 14px;
	width: 14px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 2.4s ease;
		/* added by j on 130365
	object-position: 100px 100px;
	position: absolute;
	top: 90%;
	bottom: 90px;*/
}
  
.active, .dot:hover {
	background-color: #717171;
  }
  
  /* Fading animation */
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 3s;
	animation-name: fade;
	animation-duration: 3s;
}
  
@-webkit-keyframes fade {
	from {opacity: .4}
	to {opacity: 1}
}
  
@keyframes fade {
	from {opacity: .4}
	to {opacity: 1}
}
.flex-head{
	display: flex;
	flex-wrap: no-wrap;
	height: auto;
	/*width: 100%;*/
	margin-top: 17px;
	justify-content: center;
	align-items: center;
}
	
.flex-con{
	display: flex;
	flex-wrap: wrap;
	height: auto;
	width: 100%;
	justify-content: center;
	align-content: center;
	/*align-items: center;*/
	/*background-image: linear-gradient(to right,lightskyblue,rgb(126, 228, 247), rgb(213, 230, 225),rgb(77, 164, 235),    rgb(177, 7, 177));
	background-color: blue;*/
	}
	.flex-con > div {
		margin: 10px;
		padding: 10px;
		width: 400px;
	}
@media screen and (min-width: 737px) {
	.grid-con{
		display: grid;
		grid-template-columns: 2em 10fr 2fr 5fr 2fr;
		/*height: auto;
		width: 100%;*/	
	}
	.attribute-con {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr));
	}
	.name-id {
		--column-width-min: 10em;
	}
}	
/* Style the button that is used to open and close the collapsible content */
.collapsible {
	color: black;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: center;
	margin-bottom: 20px;
	margin-left: 19px;
	margin-right: 19px;
	outline: 2px solid;
	outline-color: white;
	border-radius: 20px;
	font-size:21px; 
	font-family:'Niramit', sans-serif; 
	font-weight: bold;
	text-transform: none;
} 
   
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
	/*background-color: rgb(139, 235, 248);*/
  }
  .collapsible:after {
	content: '\02795'; /* Unicode character for "plus" sign (+) */
	color: black;
	font-weight: bold;
	float:initial;
	margin-left: 5px;
  }
  
  .active:after {
	content: "\2796"; /* Unicode character for "minus" sign (-) */
  }
  
  /* Style the collapsible content. Note: hidden by default */
  .content {
	padding: 0 18px;
	margin-left: 19px;
	margin-right: 19px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	font-family: 'Niramit', sans-serif;
	/*background-color: #f1f1f1;*/
  }  

.logopos{
	margin:5px 11px 0px 2px;
	width: 374px; 
	height:211px;
}
.assoPhoto{
	/*grid-column: 1/4;
	grid-row: 1/span 2;*/
	grid-area: locPhoto;
}
.contBox{
	/*grid-column: 2/span 3;
	grid-row: 1/span 4;*/
	grid-area: contactBox;
}
.socBox{
	/*grid-column: 1/4;
	grid-row: 3;*/
	grid-area: socialBox;
}
.mapBoxM{
	/*grid-column: 1/4;
	grid-row: 4/span 3;*/
	grid-area: mapBox;
}
.addBox{
	/*grid-column: 2/span 3;
	grid-row: 6;*/
	grid-area: addrBox;
}
/*.grid-contactus{
	display: grid;
	grid-template-areas:
	'locPhoto contactBox contactBox contactBox'
	'locPhoto contactBox contactBox contactBox'
	'socialBox contactBox contactBox contactBox'
	'mapBox contactBox contactBox contactBox'
	'mapBox contactBox contactBox contactBox'
	'mapBox addrBox addrBox addrBox';
}*/
.center {
	margin: auto;
	width: 50%;
	/*border: 3px solid green;*/
	padding: 10px;
  }
.center90 {
	margin: auto;
	width: 90%;
	padding: 10px;
}

.center_slide {
	margin: auto;
	width: 100%;

}
.maintopic {
	margin-left: 5%;
	font-family:'Niramit', sans-serif; 
	font-size: 2.1vw;	
	font-weight:bold;
	/*text-transform:uppercase;*/
	line-height:1;
	/*color:var(--theme-ui-colors-white);*/
	color:#FFFFFF;
	display:inline-block;
	padding-top:15px;
	padding-bottom:15px;
	padding-left:15px;
	padding-right:15px;
	background-color: blue;
	box-shadow: 5px 5px 5px rgb(85, 83, 83);
	border-style:solid;
	border-radius:20px;
	outline:2px solid;
	/*outline-color:var(--theme-ui-colors-gray200);
	outline-offset:5px;*/
	z-index: 92;
}
.topic {
	margin-left: 5%;
	font-family:'Niramit', sans-serif; 
	font-size: 1.2vw;	
	font-weight:700;
	text-transform:uppercase;
	line-height:1.2;
	/*color:var(--theme-ui-colors-white);*/
	color:#FFFFFF;
	display:inline-block;
	padding-top:9px;
	padding-bottom:9px;
	padding-left:15px;
	padding-right:15px;
	background-color:black;
	border-radius:20px;
	outline:2px solid;
	/*outline-color:var(--theme-ui-colors-gray200);*/
	outline-offset:0px;
}
.vdoinsert{
	border:  0px;
	position: relative;
	top:0;
	/* object-fit: cover; comment by J 220324*/
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 added by j 220324 */
	/*padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; added by j 220324*/
}
.vdoinsert iframe .vdoinsert object .vdoinsert embed{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media screen and (max-width: 1385px) {
	.navbar a:not(:first-child), .dropdown .dropbtn {
	  display: none;
	}
	.navbar a.icon {
	  float: right;
	  display: block;
	}
  }
  
  @media screen and (max-width: 1385px) {
	/*.navbar.responsive {position: relative;}*/
	.navbar.responsive .icon {
	  position: absolute;
	  right: 0;
	  bottom: 0;
	}
	.navbar.responsive a {
	  float: none;
	  display: block;
	  text-align: left;
	}
	.navbar.responsive .dropup {float: none;}
	.navbar.responsive .dropup-content {position: relative;}
	.navbar.responsive .dropup .dropbtn {
	  display: block;
	  width: 100%;
	  text-align: left;
	}
  }

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the navbar (.icon) */
/* @media screen and (max-width: 600px) {
	.navbar a:not(:first-child) {display: none;}
	.navbar a.icon {
	  float: right;
	  display: block;
	}
}
  
The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) 
@media screen and (max-width: 600px) {
	.navbar.responsive .icon {
	  position: absolute;*/
	  /*position: fixed;
	  right: 0;
	  bottom: 0;
	}
	.navbar.responsive a {
	  float: none;
	  display: block;
	  text-align: left;
	}
}*/
.marquee {
    /*width: 400px;
    line-height: 50px;*/
	color: Black;
    white-space: nowrap;
    overflow: hidden;
    /*box-sizing: border-box;   */
}
.marquee p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 10s linear infinite;
}
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}
/* Standard Tables */

table {
	margin: 1em 0;
	border-collapse: collapse;
	/*border: 0.1em solid #d6d6d6;*/
  }
  
  caption {
	text-align: left;
	font-style: italic;
	padding: 0.25em 0.5em 0.5em 0.5em;
  }
  
  th,
  td {
	padding: 0.25em 0.5em 0.25em 1em;
	vertical-align: text-top;
	text-align: left;
	text-indent: -0.5em;
  }
  
  th {
	vertical-align: bottom;
	background-color: lightgrey;
	/*color: #fff;*/
  }
  
  tr:nth-child(even) th[scope=row] {
	background-color: #f2f2f2;
  }
  
  tr:nth-child(odd) th[scope=row] {
	background-color: #fff;
  }
  
  tr:nth-child(even) {
	background-color: rgba(255, 255, 255, 0.05);
  }
  
  tr:nth-child(odd) {
	background-color: rgba(0, 0, 0, 0.05);
  }
  
  td:nth-of-type(2) {
	font-style: normal;
  }
  
  th:nth-of-type(3),
  td:nth-of-type(3) {
	text-align: left;
  }
  
  /* Fixed Headers */
  
  th {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 2;
  }
  
  th[scope=row] {
	position: -webkit-sticky;
	position: sticky;
	left: 0;
	z-index: 1;
  }
  
  th[scope=row] {
	vertical-align: top;
	color: inherit;
	background-color: inherit;
	background: linear-gradient(90deg, transparent 0%, transparent calc(100% - .05em), #d6d6d6 calc(100% - .05em), #d6d6d6 100%);
  }
  
  table:nth-of-type(2) th:not([scope=row]):first-child {
	left: 0;
	z-index: 3;
	background: linear-gradient(90deg, #666 0%, #666 calc(100% - .05em), #ccc calc(100% - .05em), #ccc 100%);
  }
  
  /* Strictly for making the scrolling happen. */
  
  th[scope=row] + td {
	min-width: 24em;
  }
  
  th[scope=row] {
	min-width: 20em;
  }

/* for multiple level wrapping tables  and cards */
ol.collection {
    margin: 0px;
    padding: 0px;
}

li.item {
    list-style: none;
}

* {
    box-sizing: border-box;
}

/* 2 Column Card Layout 
@media screen and (max-width: 862px) {  */
@media screen and (max-width: 840px) {

    .collection-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }

    .item {
        border: 1px solid gray;
        border-radius: 2px;
        padding: 10px;
    }

    /* Don't display the first item, since it is used to display the header for tabular layouts*/
    .collection-container>li:first-child {
        display: none;
    }

    .attribute::before {
        content: attr(data-name);
    }

    /* Attribute name for first column, and attribute value for second column. */
    .attribute {
        display: grid;
        /* Original
		grid-template-columns: minmax(9em, 30%) 1fr;*/
		grid-template-columns: minmax(5em, 30%) 1fr;
    }
}

/* 1 Column Card Layout 
@media screen and (max-width:580px) {*/
@media screen and (max-width:688px) {
    .collection-container {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Tabular Layout */
/*@media screen and (min-width: 737px) {*/
@media screen and (min-width: 841px) {
    /* The maximum column width, that can wrap */
    .item-container {
        display: grid;
		width: 100%;
        /*grid-template-columns: 3fr 109px 34px;
        grid-template-columns: 1fr 7.5em 47px;
		grid-template-columns: 1fr 7.5em 2.3em;*/
        grid-template-columns: 6fr 1fr 2.3em;
        
    }

    .attribute-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr));
    }

    /* Definition of wrapping column width for attribute groups. */
    .part-information {
        --column-width-min: 34em;
    }

    /*.part-id {
        --column-width-min: 10em;
    }*/

    .quantity {
        --column-width-min: 7em;
    }

    .collection {
        border-top: 1px solid gray;
    }

    /* In order to maximize row lines, only display one line for a cell */
    .attribute {
        border-left: 1px solid gray;
        border-right: 1px solid gray;
        border-bottom: 1px solid gray;
        padding: 2px;
        /*overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;*/
    }

    .collection-container>.item-container:first-child {
        background-color: blanchedalmond;
    }

    .item-container:hover {
        background-color: rgb(200, 227, 252);
    }

    /* Center header labels */
    .collection-container>.item-container:first-child .attribute {
        display: flex;
        align-items: center;
        justify-content: center;
        text-overflow: initial;
        overflow: auto;
        white-space: normal;
    }
}