@import url('https://fonts.googleapis.com/css?family=Kanit|Roboto:300,400,500,700|Sarabun:400,500');
@import "./jquery-ui.min.css";
@import "./bootstrap.min.css";
@import "./owl.carousel.min.css";
@import "./font-awesome.min.css";
@import "./fancybox.css";
@import "./default.css";
@keyframes fade {0% {transform: scale(1.5);transform-origin: center} 100% {transform: scale(1);transform-origin: center} }

html,body{font-family: "Roboto", sans-serif;padding:0;margin:0;font-weight: 400;opacity: 1;transition: .3s opacity;max-width: 100%;overflow-x: hidden;color: #333;font-size: 16px;}
body.loading{opacity: 0;}
body{padding-right: 0 !important;}
*{outline: none !important;}
ul,li{margin:0;padding: 0;list-style: none}
iframe,img{max-width: 100%;border:0;}
h1,h2,h3,h4,h5,h6{font-family: "Kanit", sans-serif;font-weight: 300;}
h3{font-size: 24px;}
h2{font-size: 30px;color: #020167}
a{transform: .3s all;color: #020167}
a:hover{text-decoration: none;transform: .3s all;}
.hoverImage{position: relative;display: block;overflow: hidden;}
.hoverImage:before{content:'';background:rgba(255,255,255,.3);left: 0;right: 0;margin: 0 auto;top: 50%;position: absolute;width: 0;height: 0;transition: .3s all;}
.hoverImage:hover:before{height: 100%;width: 100%;top: 0;transition: .3s all;}

#breadcrumb{background-size: cover;background-position: top center;height: 200px;overflow: hidden;padding: 80px 0;position: relative;background-attachment: fixed;}
#breadcrumb:before{content:'';background:rgba(0,0,0,.4);top: 0;left: 0;width: 100%;height: 100%;position: absolute;}
#breadcrumb .breadcrumb{background:transparent;text-align: right;font-size: 16px;}
#breadcrumb .breadcrumb a{color: white;text-shadow: none;}
.modal-title{font-size: 26px;}
.breadcrumb>.active{color: #c5eab7}
.detail{font-size: 16px;}
.detail b{font-weight: 700}
.detail strong{font-weight: 700}
.detail img{max-width: 100% !important;height: initial !important;}
.detail h3{font-size: 24px;}
.detail ul,.detail li{list-style:initial;margin: initial;text-indent: initial;padding: initial;}
.detail ul{margin: 10px 0 10px 50px;}
.fadeImage{height: 500px;overflow: hidden;}
.fadeImage img{animation: fade 7s linear;position: relative;transition: .3s all;transform: scale(1);top: -30%}
.btn.readmore{font-family: Kanit,sans-serif;font-size: 15px;line-height: 18px;padding: 5px 15px}
.owl-dots{right: 0;left: 0;margin: 0 auto;text-align: center;}
.f_roboto{font-family: Roboto,sans-serif}
.cursor-default{cursor: text;}
.f_kanit{font-family: Kanit,sans-serif;font-weight: 300;}
.f-sarabun{font-family: Sarabun, sans-serif;}
.sticky-container{padding:0;margin:0;position:fixed;right:-170px;top:260px;width:210px;z-index:1100}.sticky li{list-style-type:none;background-color:#fff;color:#efefef;height:43px;padding:0;margin:0 0 1px;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;cursor:pointer}.sticky li:hover{margin-left:-110px}.sticky li img{float:left;margin:5px 4px;margin-right:5px}.sticky li p{padding-top:5px;margin:0;line-height:16px;font-size:11px}.sticky li p a{text-decoration:none;color:#2C3539}.sticky li p a:hover{text-decoration:underline}
.sticky>li:nth-child(2):hover{margin-left: -160px}
.sticky>li:nth-child(3):hover{margin-left: -70px}
.sticky>li:nth-child(4):hover{margin-left: -60px}
.bgee{background: #eee;}
.bgred{background: #C52226;}
.bglightblue{background: #ebefff;}
.bgf6{background: #f6f6f6;}
.bg-paralax{background: url('../img/upload/1.jpg') top center no-repeat;background-size: cover;background-attachment: fixed;position: relative;}
.bg-paralax:before{content:'';background: rgba(255,255,255,.97);width: 100%;height: 100%;top: 0;left: 0;position: absolute;}
.c-red{color: red;}

/*HEADER 
============================= */
body.page{padding-top:75px;}
header{padding: 0 20px;position: fixed;top: 0;left: 0;width: 100%;z-index: 1000;background:rgba(255,255,255,.75);font-size: 14px;}
header .container{width: auto}
header div#warp-logo{float: left;padding: 5px 0}
header div#warp-logo img{float: left;width: auto;margin-right: 10px;transition: .3s all;height: 74px}
header div#warp-logo a{color: #000;display: inline-block;text-decoration: none;}
header h1{font-weight: 300;font-family: "Kanit",sans-serif;font-size: 21px;margin-top: 15px;color: #000;white-space: nowrap;transition: .3s all;line-height: 26px;}
header h1+p{white-space: nowrap;font-family: "Roboto",sans-serif;font-weight: 400;color: #000;font-size: 13px;}
header>div>nav{float: right;}
header>div>nav>ul>li{display: inline-block;vertical-align: middle;position: relative;margin: 0 5px;}
header>div>nav>ul>li.sub-menu>a:after{content:'\f107';font-family: "FontAwesome";margin-left: 3px;}
header>div>nav>ul>li>a{font-family: "Kanit",sans-serif;font-size: 17px;font-weight: 300;color: #020167;padding: 31px 10px 32px;display: block;position: relative;transition: .3s all;}
header>div>nav>ul>li>a:hover{text-decoration: none;outline: none;color: #ef5151;}
header>div>nav>ul>li:not(:last-child):hover>a:before,header>div>nav>ul>li.active>a:before{height: 4px;transition: .3s all;width: 100%;top: 0;}
header>div>nav>ul>li:hover>a,header>div>nav>ul>li.active>a{color: #ef5151;transition: .3s all;text-decoration: underline;}
header>div>nav>ul>li>ul{position: absolute;top:70px;left: 0;width: 260px;background:white;padding: 15px;display: none;box-shadow: 0 5px 10px -3px rgba(0,0,0,.3);z-index: 100;border: 1px solid #ccc;}
header>div>nav>ul>li:last-child ul{right: 0;left: initial;}
header>div>nav>ul>li ul>li{display: block;}
header>div>nav>ul>li ul>li:not(:last-child){border-bottom: 1px solid #eee;}
header>div>nav>ul>li ul>li.active>a{color: #ef5151}
header.stick nav>ul>li ul>li.active>a{color: #d6d1a1}
header>div>nav>ul>li ul>li>a{color: #383838;padding: 5px;font-family: "Kanit",sans-serif;display: block;padding: 7px 5px;font-size: 15px;}
header>div>nav>ul>li ul>li>a:hover{color: #ef5151;}
header>div>nav>ul>li ul>li>a.cursor-default{color: #000;border-bottom: 1px solid #ccc;color: #020167  !important;font-size: 17px;}
/* header.stick>div>nav>ul>li ul>li>a.cursor-default{color: #fff  !important;} */
header form{position: absolute;top: 27px;left: -215px;white-space: nowrap;display: none;}
header.search form{display: block;}
header form input[type='search']{border: 0;border-radius: 0; font-size: 14px; padding: 6px 30px 6px 15px; width: 250px; outline: none !important;background: #fff;box-shadow: 0 0 1px 1px rgba(0,0,0,.2);color: #333;position: relative;font-family: Kanit,sans-serif;background: #fff url('../img/search-black.png') no-repeat center right 5px;}
header form button[type='submit']{position: absolute; top: 0; right: 1px; border: 0 !important; background: transparent; padding: 6px 10px;outline: none !important;}
header form button[type='submit'] i{outline: none !important;font-size: 15px;}
header>div>nav>ul>li.sub-menu a.submenu{display: none;}
header #responsive-menu{display: none;}
header.stick{background: #fff;box-shadow: 0 1px 1px rgba(0,0,0,.2)}
header.stick div#warp-logo img{width: auto;transition: .3s all;height: 60px}
header.stick h1{font-size: 19px;margin-top: 11px;margin-bottom: 5px;transition: .3s all;}
header.stick nav>ul>li>a{padding: 27px 10px 28px;transition: .3s all;font-weight: 300;color: #020167;}
header nav>ul>li.hightlight>a{background:red;border-radius: 7px;padding:5px 10px;color: white;}
header nav>ul>li.hightlight>a:hover{text-decoration: none;transition: .3s all;transform: translateY(-1px);opacity: .5;}
/* header.stick nav>ul>li ul{background: #111;}
header.stick nav>ul>li ul>li>a{font-weight: 300;color: white;} */
/* header.stick nav>ul>li ul>li:not(:last-child){border-bottom: 1px solid #2d2a2a} */
/* header.stick nav>ul>li ul>li>a:hover{color: #ef5151} */
header.stick form{top: 22px}
.owl-dot.active{background: #000}
.inpage{background: #f9f9f9;}
.inpage .content{background: #fff;box-shadow: 0 1px 3px rgba(0,0,0,.1);margin-top: 20px;padding: 30px;}
main h1{font-size: 24px;position: relative;margin:0 0 15px;padding: 0;background: transparent;color: #000;font-weight: 300;text-align: center;;}
main h1+div.content{background: #fff;border: 2px solid #eee;padding: 30px;margin-bottom: 30px;}
.breadcrumb{background: transparent;padding: 5px;margin-bottom: 10px;}
.breadcrumb ul>li{display: inline-block;vertical-align: middle;font-family: Sarabun;font-size: 14px;}
.breadcrumb ul>li:not(:last-child):after{content:'/';margin-left: 10px;margin-right: 5px;;}
/*SLIDER
============================= */
.slider.owl-carousel .owl-item img{margin: 0 auto;}
.slider.slide-news.owl-carousel .owl-item img{width: initial;margin: 0 auto;max-height: 450px;}
.slider.slide-news.owl-carousel .owl-dots{bottom: initial;top: 100%;margin-top: 10px;}
.slider.slide-news.owl-carousel .owl-next i, .slider.slide-news.owl-carousel .owl-prev i{color: #232281;}

/*CONTENT 
============================= */
.content{padding: 75px 0;position: relative;}
.content .sub-content{padding: 50px 0 0;}
.content>div{position: relative;}
.content h2+p{padding: 15px 8%;color: #666;font-size: 16px;}
.content h3.heading{color: #333;text-align: center;font-size: 20px;position: relative;padding-bottom: 10px;margin-bottom: 30px;}
.content h2.heading{position: relative;padding-bottom: 20px;margin-top: 0;margin-bottom: 40px;}
.content h2.heading.white{color: white;}
.content h2.heading:before{content:'';width:120px;height: 2px;background: #ccc;left: 50%;top: 100%;margin-left: -60px;position: absolute;}
.content h2.heading:after{content: ''; width: 15px; height: 15px; top: 100%; margin-top: -6px; left: 50%; margin-left: -5px; position: absolute; background: #4c4b97; transform: rotate(45deg); }
.content h2.heading.white:after{content:'';background: white;}
.content h3.heading:before{content:'';width:30px;height: 2px;background: #ccc;left: 50%;top: 100%;margin-left: -15px;position: absolute;}
.content h3.heading>a{background: #ef5151;color: #fff;display: inline-block;padding: 7.5px 15px;border-radius: 2px;position: absolute;right: 0;top: 5px;font-size: 14px;font-family: Sarabun;box-shadow: 0 1px 3px rgba(0,0,0,.2);transition: .1s all;}
.content h3.heading>a:after{content:'\f061';font-family: 'FontAwesome';margin-left: 3px;}
.content h3.heading>a:hover{transition: .3s all;transform: translateX(3px);}

.show-when-xs{display: inline-block;background: red;color: #fff;padding: 7.5px 15px;border-radius: 2px;margin-top:10px;font-size: 14px;font-family: Sarabun;box-shadow: 0 1px 3px rgba(0,0,0,.2);transition: .1s all;}
.show-when-xs:after{content:'\f061';font-family: 'FontAwesome';margin-left: 3px;}
.show-when-xs:hover{transition: .3s all;transform: translateX(3px);}


/* .content h3.heading:after{content: ''; width: 10px; height: 10px; top: 100%; margin-top: -3px; left: 50%; margin-left: -3px; position: absolute; background: #ccc; transform: rotate(45deg); } */
#ptt{position: absolute;bottom: 0;right: 20px;padding: 10px;box-shadow: 0 1px 3px rgba(0,0,0,.3)}
#ptt button{position: absolute;top: -10px;right: -10px;border-radius: 50%;box-shadow: none;border: 0}
#gallery3>div>div>a{display: block;margin-bottom: 10px;position: relative;overflow: hidden;transition: .1s all;}
#gallery3>div>div>a img{width: 100%;transition: .3s all;}
#gallery3>div>div>a:hover img{transition: .3s all;}
#gallery3>div>div h3{font-size: 18px;text-align: center;margin-top: 0;}
#gallery3>div>div h3>a{color: #000;}
#gallery3>div>div h3>a:hover{color: #020167;text-decoration: underline;}
#gallery3>div>div p.description{font-size: 12px;color: #777;font-weight: bold;margin-bottom: 0;}
#gallery3>div>div p.date{font-size: 12px;color: #999;font-weight: bold;margin-bottom: 0;margin-top: 10px;}
#gallery3>div>div{padding: 15px;border: 1px solid #ccc;box-shadow: 0 1px 3px rgba(0,0,0,.2);background: white;transition: .1s all;}
#gallery3>div>div:hover{transition: .3s all;box-shadow: 0 3px 15px rgba(0,0,0,.3);transform: translateY(-2px)}

.grid.col5{margin: 0 -10px;}
.grid.col5 .item{width: 20%;padding: 10px;overflow: hidden;position: relative;}
.grid.col5 .item>a{display: block;transition: .1s all;}
.grid.col5 .item>a:hover{transition: .3s all;transform: scale(1.05);box-shadow: 0 5px 10px rgba(0,0,0,.2);}
.grid.col3{margin: 0 -10px;}
.grid.col3 .item{width: 33.33%;padding: 10px;position: relative;overflow: hidden;}
.grid.col3 .item>a{display: block;transition: .1s all;}
.grid.col3 .item>a:hover{transition: .3s all;transform: scale(1.05);box-shadow: 0 5px 10px rgba(0,0,0,.2);}

.grid.col2 .item{width: 50%;padding: 10px;position: relative;overflow: hidden;}

.text-editor img{max-width: 100% !important;height: initial !important;}

#overall-gallery>div{margin: 15px 0;}
#overall-gallery>div img{width: 500px;max-width: 100%;transition: .1s all;}
#overall-gallery>div a{display: block;}
#overall-gallery>div a:hover img{box-shadow: 0 1px 5px rgba(0,0,0,.5);transition: .3s all;transform: translateY(-1px);}


/*FOOTER
============================= */
footer{padding: 50px 0 30px;background:#eee;color: #000;margin-top: 0;font-size: 16px;position: relative;font-family: Sarabun;font-weight: normal;}
footer h2{color: #000;font-family: Kanit;font-size: 20px;border-bottom: 2px solid white;padding: 0 0 5px;margin-bottom: 15px;position: relative;}
footer h2:after{content:'';width: 80px;height: 2px;background: red;top: 100%;left: 0;position: absolute;;}
footer a{color: #020167;}
footer a:hover{text-decoration: underline;color: #ef5151;}
footer #socials{padding: 15px 0;}
footer #socials li{display: inline-block;vertical-align: middle;margin-right: 15px;margin-bottom: 15px;}
footer #socials li>a{display: block;}
footer #socials li>a img{margin-right: 5px;}
footer a.cursor-default{cursor: default;}
footer a.cursor-default:hover{text-decoration: none;color: initial;}

@media(min-width:768px) {
	header>div>nav>ul>li.sub-menu:hover>ul{display: block;}
}


@media(max-width: 1500px){
	header h1{display: none;}
	header div#warp-logo img{height: 60px;}
	header >div>nav>ul>li>a{font-size: 15px;padding: 27px 4px 28px;}
	header.stick nav>ul>li>a{font-size: 15px;padding: 27px 4px 28px;}
}
@media(max-width:1024px) {
.grid.col5 .item{width: 25%;}
	#gallery3 .col-sm-4{padding-right:5px;padding-left: 5px;}
	#gallery3.row{margin: 0 -10px;}
}
@media(max-width:1024px){
.grid.col3 .item{width: 50%;}
	header.stick h1,header h1{display: inline-block;font-size: 17px;margin-top: 2px;}
	header.stick nav>ul>li.hightlight>a{margin-bottom: 15px;display: inline-block;width: 170px;}

	.wrap-calendar iframe{height: 400px !important;}
	body{padding-top: 60px;}
	header div#warp-logo img,header.stick div#warp-logo img{height: 50px;}
	header{padding: 0 10px;position: fixed;box-shadow: 0 1px 3px rgba(0,0,0,.3);z-index: 1000;}
	header .container{padding: 0}
	header nav{float: none;position: fixed;top: 0;left: 0;width: 100%;background:white;box-shadow: none;visibility: hidden;height: 100%;padding-top: 10vh;overflow-y: scroll;overflow-x: hidden;}
	header.active nav{visibility: visible;height: 100vh}
	header div#warp-logo a{display: block}
	header.stick>div>nav>ul>li,header>div>nav>ul>li{display: block;text-align: center}
	header>div>nav>ul>li>a,header.stick>div>nav>ul>li>a{padding: 10px 30px;display: block;font-size: 18px;}
	header>div>nav>ul>li>a:after,header.stick>div>nav>ul>li>a:after{display: none;}
	header nav>ul{display: block;}
	header>div>nav>ul>li ul{padding-left: 45px;width: 100%;position: relative;;}
	header>div>nav>ul>li.sub-menu a.submenu{position: absolute;top: 9px;right: 15px;z-index: 100;display: block;padding: 0;margin: 0;height: 20px;width: 20px;padding: 0 5px;border-radius: 50%;}
	header>div>nav>ul>li.sub-menu a.submenu:hover{color: white;}
	header.stick nav > ul > li ul > li > a{color: #333;}
	header.stick > div > nav > ul > li ul > li > a.cursor-default{color: #232281 !important;}
	header>div>nav>ul>li.sub-menu.active ul{display: block;top: 0;position: relative;box-shadow: none;border: 0;padding: 15px;background: #eee;}
	header>div>nav>ul>li#lang {position: absolute;top: -46px;right: 100px;visibility: visible;border: 0}
	header.active #responsive-menu>i:before{content:'\f00d';transition: .3s all;}
	header.active #responsive-menu>i:hover:before{transform: rotate(90deg);transition: .3s all;}
	header #responsive-menu{display: block;position: absolute;top: 15px;z-index: 1001;right: 15px;font-size: 22px;color: #000;outline: none !important;transition: .3s all;}
	header.active #responsive-menu>i:before{content:'\f00d';transition: .3s all;}
	header.stick #responsive-menu{color: #000;}
	header.active #responsive-menu>i:hover:before{transform: rotate(90deg);transition: .3s all;}
	/* header.stick nav{background: #232281;} */
	header.stick nav > ul > li ul > li:not(:last-child){border: 0;}
	h2{font-size: 26px;}
	.content h3.heading>a{display: none;;}
	.show-when-xs{display: inline-block}
	.grid.col5 .item{width: 50%;}
	.grid.col5 .item{padding: 5px;}
}
@media(max-width:767px){
	.grid.col2 .item{width: 100%;}
	header.stick h1,header h1{display: none;}
}
@media(max-width:500px){
	.grid.col2 .item a{grid-template-columns: auto 100px !important;}
.grid.col3 .item{width: 100%;}
}
/* 
@media(max-width: 1100px){
	h2{font-size: 32px;}
	#travel #class-room a > p{font-size: 14px;}
}

@media(max-width: 991px){
	.fadeImage{height: 300px;}
	#about{padding: 20px 0 30px;}
	#travel{padding: 20px 0 30px}
	#about h2{font-size: 26px;}
	#about h2 + p{font-size: 15px;}
	#mascot{bottom: initial; left: 0; width: 250px; top: 300px;} 
	#ptt{display: none;}
	.sm-db{display: block}
	.sm-dn{display: none;}
}

@media(max-width: 767px){
	.detail img{margin-bottom: 10px;}
	.xs-mb-10{margin-bottom: 10px;}
	.xs-db{display: block}
	#mascot{display: none;}
	.xs-mb-15{margin-bottom: 15px;}
	.xs-dib{display: inline-block}
	.xs-text-left{text-align: left}
	.contact-chanel>p{white-space: normal;}
	.contact-chanel{grid-template-columns: auto}
	#contact-form{padding: 0;background: transparent;border: 0}
	main h1+div.content{padding: 15px}
	main h1{font-size: 22px;padding: 10px 15px;margin-top: 10px}
	.fadeImage{height: 250px;}
	.fadeImage img{width:150%;max-width: none}
	h2{font-size: 24px;}
	.about-home p{font-size: 15px;}
	#home-map{height: 250px}
	.about-home{display: block !important}
	.xs-mb-20{margin-bottom: 20px;}
	.tribe .image{height: 180px;}
	#event .image{height: 150px;}
	#event{padding-left: 50px;padding-right: 50px}
	#news .next-image{height: 100px;}
	#news .first-image{height: 350px;margin-bottom: 20px;}
	#about{padding: 20px 0;}
	#travel{padding: 20px 0;}
	#tribe{padding:  20px 0;}
	#event{padding: 20px 50px;}
	#news{padding: 20px 0;}
	#youtube-map{padding: 20px 0;}
	.bannerControls,.bottomNav{display: none !important;}
	header form{left: -171px;}
	header form input[type="search"]{width: 200px;}
	header>div>nav>ul>li ul{padding: 0;}
	header>div>nav>ul>li ul>li{padding: 3px 0 3px 25px;}
	header>div>nav>ul>li ul>li:first-child{border-top: 1px solid #eee;}
	header .container{padding: 0;}
	header #responsive-menu{right: 15px;}
	header>div>nav > ul > li:last-child{right: 50px;}
	#about h2+p{padding: 15px 0}
	.floorSlider .image{background: transparent !important;height: auto;width: auto}
	.floorSlider .image img{display: block;}
	header.stick nav > ul > li:last-child{right: 54px;}
}
@media(max-width: 480px){
	#news .next-image{height: 65px;min-width: 100px;max-width: auto;margin-right: 5px;}
	.tribe .image{height: 140px;}
}
@media(max-width: 479px){
	#class-room>div.col-sm-3{width: 100%}
	#travel #class-room a > p{font-size: 16px;}
	#news h3{font-size: 18px;}
	header>div>nav > ul > li:last-child{top: -40px;}
	header>div>nav > ul > li#lang{right: 80px;top: -38px;}
	header div#warp-logo img{height: 44px;}
	header h1{margin-top: 0;font-size: 15px;}
	header #responsive-menu{top: 12px;}
	header h1 + p{margin-bottom: 0;font-size: 12px;}
	.owl-carousel.slider .owl-item img{width: 550px;max-width: none;margin: 0 auto;}
	header.stick div#warp-logo img{height: 44px}
	header.stick nav > ul > li#lang{right: 80px;top: -38px;}
	header.stick nav > ul > li:last-child{top: -40px;right: 50px}
	header.stick #responsive-menu{top: 12px}
}
@media(max-width: 400px){
	.pl400{padding-left: 10%;}
	#event .image{height: 200px;}
	.inpage .content{padding: 25px 10px}
}
@media(max-width: 399px){
	header>div>nav > ul > li#lang,header.stick nav > ul > li#lang{position: relative;left: initial;right: initial;top: initial;visibility: inherit;padding-left: 0;padding-bottom: 15px;}
	.owl-carousel .owl-item img{width: 450px;}
	#youtube-map iframe{height: 200px;}
	h2{font-size: 32px;}
	#news .first-image{height: 300px;}
	header h1 span{display: block;}
	header h1{margin-top: 11px;padding-left: 60px;}
	header h1+p {display: none;}
	header div#warp-logo{height: 54px;}
	header h1{padding-right: 75px;white-space: normal;}
	header.stick h1{font-size: 16px;}
}
@media(max-width: 379px){
	header.stick h1{font-size: 15px;}
	.fadeImage{height: 220px}
}
@media(max-width: 350px){
	#youtube-map iframe{height: 180px;}
	#news .first-image{height: 250px;}
	header h1{font-size: 13px;}
}
@media(max-width: 349px){
	#news .first-image{height: 220px;}
	#news .next-image{min-width: 80px;}
}
@media(max-width: 315px){
	header.stick h1{font-size: 14px;}
} */