/* Add here all your CSS customizations */

.mt-60 {margin-top: 60px;}

ul#mainNav > li > a:hover {text-decoration: none;}

#gmap-container iframe {width: 100% !important; height: 450px !important; display: block;}

.img-thumbnail img {max-width: 100%;}

.wysiwyg-content p {margin-bottom: 0;}
.wysiwyg-content h3 {text-transform: none; font-size: 25px; line-height: 33px;}
textarea.no-resize {resize: none;}
a.gen-btn {display: inline-block; background: #0088cc; padding: 10px 20px; color: #fff !important; cursor: pointer;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px;
transition: all 0.25s linear; -webkit-transition: all 0.25s linear; -moz-transition: all 0.25s linear; -o-transition: all 0.25s linear;}
a.gen-btn:hover {background: #006699;}

h5.mt-2 {text-transform: none;}

.slider-container .tp-caption.top-label {width: 10em; text-align: center !important;}
.slider-container .tp-caption.main-label {width: 10em; text-align: center !important;}
.slider-container .tp-caption.bottom-label {width: 22em; text-align: center !important;}

#header-resp-cover {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(3, 122, 204, 0.95); z-index: 5000; display: none;}
#header-resp-nav-ct {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%;}
ul#header-resp-nav-list {padding: 0; margin: 0;}
ul#header-resp-nav-list > li {list-style-type: none; text-align: center; padding: 0; margin: 0; margin-bottom: 15px;}
ul#header-resp-nav-list > li:last-child {margin-bottom: 0;}
ul#header-resp-nav-list > li > a {font-size: 20px; line-height: 28px; color: #fff; text-decoration: none;}
ul#header-resp-nav-list > li > a:hover {color: #efefef;}
#header-resp-nav-close {width: 36px; height: 36px; background: url(../images/icons/nav-close.png) no-repeat center; position: absolute; top: 30px; right: 30px; height: 28px; width: 28px; background-size: 28px 28px; cursor: pointer;
transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in;}
#header-resp-nav-close:hover {opacity: 0.8;}

#jst-template-category-ct {text-align: center;}
select#jst-template-category {width: 500px; padding: 15px; margin-bottom: 15px;}
ul.jst-template-list {float: left; width: 100%; position: relative; margin: 0; padding: 0; margin-top: 15px;}
ul.jst-template-list > li {float: left; width: 49%; margin-right: 2%; margin-bottom: 20px; list-style-type: none; position: relative; box-sizing: border-box;}
ul.jst-template-list > li:nth-child(2n) {margin-right: 0;}
ul.jst-template-list > li img {display: block; width: 100%;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px;}
ul.jst-template-list > li .jst-cover {position: absolute; z-index: 100; bottom: 0; width: 100%; padding: 15px 20px; background: rgba(0, 0, 0, 0.5); display: none;
border-bottom-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-bottom-left-radius: 5px; -o-border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-bottom-right-radius: 5px; -o-border-bottom-right-radius: 5px;}
ul.jst-template-list > li .jst-cover .title {float: left; width: 65%;}
ul.jst-template-list > li .jst-cover .title h4 {font-size: 18px; line-height: 26px; color: #fff; margin: 0; padding: 0; font-weight: bold;}
ul.jst-template-list > li .jst-cover .title p {font-size: 14px; line-height: 22px; color: #fff; margin: 0; padding: 0;}
ul.jst-template-list > li .jst-cover .preview {float: right;}
ul.jst-template-list > li .jst-cover .preview a {font-size: 14px; line-height: 22px; display: inline-block; padding: 10px 25px; background: #0088cc; color: #fff; margin: 0 auto;
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px;
transition: all 0.25s ease-in; -webkit-transition: all 0.25s ease-in; -moz-transition: all 0.25s ease-in; -o-transition: all 0.25s ease-in;}
ul.jst-template-list > li .jst-cover .preview a:hover {background: #00a1f2; text-decoration: none;}
ul.jst-template-list > li.no-result {float: none; width: 100%; margin-right: 0; text-align: center;}
.fl-clear {clear: both;}
.jst-template-pagination {text-align: center;}

/* PAGINATION */
.pagination-sfw {margin-top: 50px;}
.pagination-list {margin: 0; padding: 0;}
.jst-template-pagination .pagination-list {margin-top: 30px;}
.pagination-list.centered {display: inline-block; margin: 0 auto;}
.pagination-list li {float: left; margin-bottom: 5px; margin-right: 7px; list-style-type: none;}
.pagination-list li:last-child {margin-right: 0px;}
.pagination-list li a {font-size: 14px; line-height: 14px; color: #0088cc !important; display: inline-block; font-family: 'GeneralFont', Arial, Verdana; border: 1px solid #0088cc; padding: 10px 12px;
transition: all 0.25s ease-in; -moz-transition: all 0.25s ease-in; -webkit-transition: all 0.25s ease-in; -o-transition: all 0.25s ease-in;
border-radius: 0 !important; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; -o-border-radius: 0 !important;}
.pagination-list li a:hover {text-decoration: none; background: #0088cc; color: #fff !important;}
.pagination-list li a.active, .pagination-list li a.active:hover {cursor: text; background: #0088cc; color: #fff !important; border: 1px solid #0088cc; font-family: 'BoldFont', Arial, Verdana;}

@media only screen and (max-width: 500px) {
	.pagination-list li a.edge {display: none;}
	.pagination-container.fl-right, .pagination-container.fl-left {float: none !important;}
	.pagination-container {text-align: center;}
	.pagination-list {display: inline-block; margin: 0 auto;}
}
/* /PAGINATION */

@media (max-width: 500px) {
	.slider-container .tp-caption.bottom-label {font-size: 9px !important; line-height: 16px;}
}
@media (min-width: 991px) {
	.footer-copyright a.logo img {max-width: 120px; height: auto; margin: 0 auto; display: block;}
}
@media (max-width: 990px) {
	.footer-copyright a.logo img {margin-left: 0; margin-right: 0; max-width: 130px;}
	
	ul.jst-template-list > li .jst-cover .title h4 {font-size: 14px; line-height: 22px;}
	ul.jst-template-list > li .jst-cover .title p {font-size: 12px; line-height: 20px;}
	ul.jst-template-list > li .jst-cover .preview a {font-size: 12px; line-height: 12px; padding: 12px 15px;}
}

@media (max-width: 768px) {
	ul.jst-template-list > li {width: 100%; margin-right: 0;}
	ul.jst-template-list > li .jst-cover .title h4 {font-size: 16px; line-height: 24px;}
	ul.jst-template-list > li .jst-cover .title p {font-size: 14px; line-height: 22px;}
	ul.jst-template-list > li .jst-cover .preview a {font-size: 14px; line-height: 22px; padding: 12px 15px;}
	
	select#jst-template-category  {width: 360px;}
	
}
@media (max-width: 500px) {
	ul.jst-template-list > li .jst-cover .title h4 {font-size: 14px; line-height: 22px;}
	ul.jst-template-list > li .jst-cover .title p {font-size: 12px; line-height: 20px;}
	ul.jst-template-list > li .jst-cover .preview a {font-size: 12px; line-height: 12px; padding: 12px;}	
}

@media (max-width: 360px) {
	ul.jst-template-list > li .jst-cover .title h4 {font-size: 12px; line-height: 18px;}
	ul.jst-template-list > li .jst-cover .title p {font-size: 11px; line-height: 15px;}
	ul.jst-template-list > li .jst-cover .preview a {font-size: 11px; line-height: 11px; padding: 10px 10px;}	
	
}

/* OVERLAY NOTIFICATION */
.overlay-bg, .overlay-bg2  { width: 100%; height: 100%; background: #7f7f7f; opacity: 0.5; z-index: 9000; left: 0; top: 0; position: fixed;}
.notification-content, .notification-content2 {width: 40%; box-sizing: border-box; padding: 40px; background: #ffffff; z-index: 10000; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.notification-content h3, .notification-content2 h3 {font-size: 30px; line-height: 36px; font-weight: bold; color: #333; margin-bottom: 20px;}
.notification-content p, .notification-content2 p {font-size: 16px; line-height: 24px; margin-bottom: 0px; color: #808285;}
.notification-content small, .notification-content2 small {padding-left: 3px; font-size: 13px; color: #222;}

.notif-success h3, .notif-success2 h3 {padding-top: 100px; background: url(../images/icons/success-notif.png) no-repeat top center; background-size: auto 75px;}
.notification-close-btn {margin-top: 15px;}

.overlay-bg2, .notification-content2 {display: none;}
.form-control.type2 {display: inline; width: 60%;}

@media only screen and (max-width: 960px) {
	.notification-content, .notification-content2 {width: 70%;}
}

@media only screen and (max-width: 600px) {
	.notification-content, .notification-content2 {width: 80%; padding: 20px;}
	.notification-content h3, .notification-content2 h3 {margin-bottom: 20px;}
	.notif-success h3, .notif-success2 h3 {padding-top: 75px; background-size: auto 50px;}
	.notification-content h3, .notification-content2 h3 {font-size: 26px; line-height: 32px;}
	.notification-content p, .notification-content2 p {font-size: 14px; line-height: 20px;}
}


/* FLOATING WA */
.sticky-wa {position: fixed; right: 25px; bottom: 70px; z-index: 2000;
transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in;}
.sticky-wa:hover {bottom: 80px;}
.sticky-wa img {width: 73px; height: 73px; display: block;}

@media only screen and (max-width: 500px) {
	.sticky-wa {bottom: 50px;}
	.sticky-wa:hover {bottom: 60px;}
	.sticky-wa img {width: 57px; height: 57px;}
}
/* /FLOATING WA */


/* ADDITIONAL */
#fp-waiting {background: #fff; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.7; z-index: 9000; display: none;}
#fp-waiting img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
/* /ADDITIONAL */