@import 'https://fonts.googleapis.com/css?family=Prompt&display=swap';
@import 'https://www.tpa.or.th/css/footer-policy.css';

/* TPA Colors */
/*
Blue C100 M80 Y0  rgb(3,78,162)  #034ea2
Gold C20 M40 Y100  rgb(208,155,44)  #d09b2c 
*/

body { background-color: rgb(250,250,250); background-image: url('../images/background-html.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; }
h1,h2,h3,h4,h5, p.lead, #theQuote { font-family: 'Prompt', sans-serif !important; }
.heading { margin-bottom: 0; }
.heading::after { width: 100%; margin: 10px auto; }
/* your styles go here */
/* #page1.section div.content * { font-family: sans-serif; } */
#page1.section { /*background-color: rgb(250,250,250); background-image: url('../images/background-html.jpg'); background-repeat: no-repeat; background-position: center center;*/ font-family: 'Prompt', sans-serif !important; }
#page1.section div.content h1 { font-size: 27px; line-height: 1.1em; color: rgb(3,78,162); /*font-weight: bold;*/ }
#page1.section div.content h1 small { font-size: 20px; color: rgb(3,78,162); }
#page1.section div.content h2 { font-size: 40px; line-height: 1.1em; color: rgb(3,78,162); }
#page1.section li a { font-size: 18px; }
#page1boxzoom { display: block; width: 284px; padding: 10px 20px 10px 0; position: absolute; right: 7em; bottom: 3.5em; font-size: 1.1em; font-weight: bold; text-align: right; background-color: rgba(10,90,125,0.5); }
	#page1boxzoom strong { font-size: 1.4em; }
	#page1boxzoom span:nth-child(1) { width: 189px; float: left;}
	#page1boxzoom span:nth-child(2) { width: 64px; float: right;}
#page1-logo { width: 300px; height: auto; margin-bottom: 2em; }
#homenav50, #homemobilenav50 { color: rgb(3,78,162); list-style-type: none; }
#homenav50 .btn-homenav50, #homemobilenav50 .btn-homenav50 { display: block; width: 100%; height: 100%; margin: 0 auto; padding: 50px 0; border: 4px solid rgb(3,78,162); height: 170px; line-height: 20px; width: 170px; border-radius: 50%; text-align: center; font-family: 'Prompt', sans-serif !important; font-size: 16px; font-weight: bold; color: rgb(3,78,162); background-color: rgb(208,155,44); transition: background-color 0.5s; transition: background-image 0.5s; }
#homenav50 .btn-homenav50, #homemobilenav50 .btn-homenav50 { background-image: linear-gradient(45deg, rgba(245,228,146,1) 0%, rgba(216,179,90,1) 14%, rgba(249,242,138,1) 32%, rgba(191,154,63,1) 78%, rgba(212,178,91,1) 100%); }
#homenav50 .btn-homenav50:hover { color: rgb(208,155,44); border: 4px solid rgb(208,155,44); background-color: rgb(3,78,162); }
#homenav50 .btn-homenav50:hover { background-image: linear-gradient(45deg, rgba(31,103,197,1) 0%, rgba(2,58,162,1) 14%, rgba(31,103,197,1) 32%, rgba(2,58,162,1) 78%, rgba(2,79,157,1) 100%); }
p.lead { text-align: center;}
div.row.services ul li { margin-bottom: 1.4em; }
div.row.services ul li .label { font-size: 1.2em; }
div.row.services ul li i { margin-right: 0.9em; color: rgb(187,187,187); }
div.row.services ul li>address,div.row.services ul li>div { margin: 0.5em 2.2em; padding: 0; }
#theQuote { margin-top: 1.4em; font-size: 2em; color: rgb(3,78,162); }
#page2.section { background-color: rgb(250,250,250); }
#page3.section { background: none; }
#page4 div[class*="col-"] a img { margin: 1em 0; }
#page5.section
#page6.section img { margin: 0.5em 0; }
#page6.section a img {border: 4px solid white; }
#page6.section a:hover img { border: 4px solid goldenrod; }
#page6.section .page6-extlinks { text-align: center; }
#page6.section .page6-extlinks a img { width: auto; height: 90px; }
.page-footer { text-align: center; font-family: 'Prompt', sans-serif !important; }
.onepage-pagination { right: 0;}
/*
ol.onepage-pagination { background-color: rgba(3,78,162,0.35); }
*/
ol.onepage-pagination { width: 75%; position: relative; margin: 0.3em auto 0.5em auto !important; padding: 0.5em 0.5em 1.7em 0.5em; display: block; /*list-style-type: none;*/ }
ol.onepage-pagination li a::before { display: none; }
ol.onepage-pagination li a { text-decoration: none; transition: background-color 0.5s; }
/*
ol.onepage-pagination li { margin: 0.5em 0; line-height: 1.4em; }
ol.onepage-pagination li a { width: 100%; height: auto; overflow: hidden; display: block; border: 2px solid rgb(208,155,44); border-radius: 4px; background-color: rgb(3,78,162); color: rgb(255,255,255); transition: background-color 0.5s; }
ol.onepage-pagination li a:hover { border: 1px solid white; background-color: rgb(208,155,44); border: 2px solid rgb(3,78,162); color: white; text-decoration: none; }
.onepage-pagination li a::before { background: rgb(3,78,162); border: 1px solid rgba(252,252,252,0.5); }
.onepage-pagination li a.active::before { background: rgb(208,155,44); border: 2px solid rgba(3,78,162,0.9); }
*/


.table-noboder { display: block; }
.table-noboder th, .table-noboder td { padding: 10px; border: 0 none; vertical-align: top; }

div.icon { color: #99ccff; border-color: #99ccff !important; }

#modaltext { text-align: center; }
#modaltext img { max-height: 85vh; width: auto; max-width: 90%; }
.modal-footer { text-align: center; }

.page-detail { background-color: rgba(255,255,255,0.9); }
  .page-detail-data { padding: 2.4em 1.8em; }
  .page-detail-data ol { list-style-type: none; }
  .page-detail-data li { margin-top: 1.8em; margin-bottom: 1.2em; }
  .page-detail-data li a { color: #333333; }
.page-group-list div[class*="col-"] a img { margin: 1em 0;}

/*#specialbytony-1 { color: white; text-shadow: -1px -1px 0 rgb(3,78,162), 1px -1px 0 rgb(3,78,162), -1px 1px 0 rgb(3,78,162), 1px 1px 0 rgb(3,78,162); }*/
#specialbytony-1 { animation:blinkingText 1.2s infinite; }
@keyframes blinkingText{
    0%{ color: rgb(0,0,0); }
    49%{ color: rgb(0,0,0); }
    60%{ color: rgb(3,78,162); }
    99%{ color: rgb(3,78,162); }
    100%{ color: rgb(0,0,0); }
}
#specialbytony-1:hover { animation: none; }

@media (min-width: 992px) {
	.page-detail-data { animation: fadeInRight 1.2s; }
	@keyframes fadeInRight {
	  0% { opacity: 0; transform: translate3d(0, 100%, 0); }
	  100% { opacity: 1; transform: none; }
	}
}

@media (max-width: 991px) {
	body { background-repeat: repeat-y; background-position: center top; background-size: cover; }
	#page1.section { background: none; }
	#page4.section { background: white none; }
	section#page6 { background: none;  }
	.page-detail { padding-bottom: 15px; }	
}
@media (max-width: 640px) {
	body { font-size: 14px; background-image: url('../images/background-html-v.jpg'); background-repeat: no-repeat; background-position: center bottom; }
	#homemobilenav50 { margin: 0; padding: 0; }
	#homemobilenav50 .col-xs-4 { margin: 0; padding: 0; text-align: center; }
	#homemobilenav50 .btn-homenav50 { display: block; width: 90%; height: 90%; margin: 0 auto; padding: 25px 0; border: 4px solid rgb(3,78,162); height: 100px; line-height: 14px; width: 100px; font-size: 11px !important; }
	#page1.section div.content h1 { font-size: 2vh !important; line-height: 1em !important; }
	#page1.section div.content h1 small { font-size: 3vh !important; line-height: 1em !important; }
	#page1.section div.content h2 { font-size: 2vh !important; line-height: 1em !important; }
	#page1.section div.content h1.jptitle, #page1.section div.content h1.jptitle small { font-size: 1.5em !important; line-height: 1 !important; }
	h2.heading { font-size: 6vh !important; }
	#page1boxzoom { position: absolute; right: calc(50% - 140px); bottom: 7em; font-size: 1em; }
	.page1boxzoom-jp { width: 234px !important; position: absolute; right: calc(50% - 120px) !important; }
	.page1boxzoom-jp span:nth-child(1) { width: 134px !important; }
	.page1boxzoom-en { width: 234px !important; position: absolute; right: calc(50% - 120px) !important; }
	.page1boxzoom-en span:nth-child(1) { width: 129px !important; }
}

@media (max-height: 1080px) {
	body { font-size: 14px; }
	#page1.section div.content h1 { font-size: 30px; }
	#page1.section div.content h1 small { font-size: 24px; }
	#page1.section div.content h2 { font-size: 30px; }
	h2.heading, p.lead  { font-size: 18px; }
	.nobrfornotebook { display: none !important; }
	#page6.section .download { margin-left: 50px !important; margin-right: 50px !important; }
	#page7.section .contactdetail { margin-left: 80px !important; margin-right: 80px !important; }
	#page7.section .copyright { margin-top: 0 !important; }
}

@media (max-height: 700px) {
	#page4 div[class*="col-"] a img { width: 70%; height: auto; margin: 0.5em auto; }
}