/* Theme Name: PTSCQuangNgai Theme URI: https://www.pvonline.vn Author: PVonline.vn Author URI: https://www.pvonline.vn Description: Thiết kế và phát triển bởi PVonline.vn Text Domain: ptscquangngai.com.vn Tags: dịch vụ dầu khí PTSC Quảng Ngãi */ /* ====================================== [ Body ] ====================================== */ @font-face { font-family: 'Segoe-Ui-Semibold'; src: url('assets/fonts/Segoe-Ui-Semibold/Segoe-Ui-Semibold.eot'); /* IE9 Compat Modes */ src: url('assets/fonts/Segoe-Ui-Semibold/Segoe-Ui-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('assets/fonts/Segoe-Ui-Semibold/Segoe-Ui-Semibold.ttf') format('truetype'), /* Safari, Android, iOS */ url('assets/fonts/Segoe-Ui-Semibold/Segoe-Ui-Semibold.svg#Segoe-Ui-Semibold') format('svg'); /* Legacy iOS */ font-weight: normal; font-style: normal; } body { font-family: "OpenSansWeb", Helvetica, Arial, sans-serif; font-size: 15px; } a, a:focus, a:hover { text-decoration: none; outline: 0; } /* ====================================== [ Header ] ====================================== */ .header { background: #0eb0ee; height: 125px; color: #fff; } .logo {position: relative; z-index: 999;} .logo img {height: 90px;} .search-form .buttom-search { background-color: #f90b0b; border: 0; color: #fff; text-transform: uppercase; font-size: 14px; height: 35px; } .search-form input.form-control { height: 35px; border-radius: 0; background: #f5f5f5; color: #fbb80b; } .search-form .form-control { border: 0; -webkit-box-shadow: none; box-shadow: none; } .search-form .form-group { margin: 0; } .fixed {position: fixed;z-index: 9999;width: 100%;top: 0;right: 0;left: 0;transition: all 0.2s ease-in-out 0s;-moz-gnimation: headerAnimation 0.7s 1;-webkit-animation: headerAnimation 0.7s 1;-o-animation: headerAnimation 0.7s 1;animation: headerAnimation 0.7s 1;} @-webkit-keyframes "headerAnimation" { 0% { margin-top: -70px; } 100% { margin-top: 0; } } @keyframes "headerAnimation" { 0% { margin-top: -70px; } 100% { margin-top: 0; } } /* ====================================== [ Menu Main ] ====================================== */ .primary-relative {margin: 0;position: absolute;z-index: 999;left: 0;right: 0;top: 100px;} .menu-primary>.wrap> ul {list-style: none;-webkit-box-shadow: 0px 0px 9px 0px rgba(6, 22, 58, 0.07);-moz-box-shadow: 0px 0px 9px 0px rgba(6, 22, 58, 0.07);box-shadow: 0px 0px 9px 0px rgba(6, 22, 58, 0.07);background: #fff;height: 50px;padding: 0;position: relative;} .menu-primary>.wrap>ul>li { position: relative; display: block; float: left; -moz-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; } .menu-primary>.wrap>ul>li>a {text-transform: uppercase;padding: 13px 13px;display: block;color: #000;font-size: 14px;letter-spacing: .2em;font-weight: bold;} .menu-primary>.wrap>ul>li>a>i { display: none; text-align: center; margin-bottom: 10px; } .menu-primary>.wrap>ul>li>a:after { background: transparent; content: ''; width: 0; height: 3px; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: width 0.2s ease; -moz-transition: width 0.2s ease; -o-transition: width 0.2s ease; transition: width 0.2s ease; } .menu-primary>.wrap>ul>li:hover a:after, .menu-primary li.current-menu-item>a:after { background: #0083c7; width: 100%; } .menu-primary ul li.menu-item-has-children:hover ul.sub-menu { display: block; } .menu-primary ul.sub-menu { list-style: none; padding: 0; display: none; width: 200px; position: absolute; z-index: 200; background: #0083c7; -moz-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; } .menu-primary>.wrap>ul>li.menu-item-has-children:before {content: "";position: absolute;top: 45px;left: 0;right: 0;text-align: center;margin: 0 auto;width: 0;height: 0;border-style: solid;border-width: 0 5px 5px 5px;border-color: transparent transparent #0083c7 transparent;z-index: 99;} .menu-primary ul.sub-menu li { padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.31); } .menu-primary ul.sub-menu li a {color: #fff;display: flex;} .menu-primary>.wrap>ul>li:not(:first-child)>a:before {content: "";border-right: 1px solid #6c757d7a;position: absolute;top: 17px;left: 0;height: 15px;} /* ====================================== [ Menu Mobi ] ====================================== */ .nav-fixed { display: block; background: #444; padding: 10px; text-align: right; } .nav-fixed a.nav-a { color: #fff; display: inline-block; width: 40px; height: 35px; text-align: center; line-height: 2.2; background: #00000059; border: 1px solid #ffffff47; } .nav-fixed a.nav-a:hover { color: #fff; } .background-mobile { background: #333; top: 55px; height: auto; position: fixed; width: 100%; z-index: 99999; display: none; left: 0; } ul.accordion-responsive { list-style: none; padding: 0; } ul.accordion-responsive li { border-bottom: 1px solid rgba(255, 255, 255, 0.08); position: relative; } ul.accordion-responsive li a { color: rgb(255, 255, 255); font-size: 15px; padding: 10px; display: block; } ul.accordion-responsive li .dcjq-icon:after { content: ""; display: inline-block; font-weight: 900; font-family: 'Font Awesome 5 Free'; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); position: absolute; right: 0; color: #fff; top: 0; width: 40px; height: 40px; text-align: center; line-height: 3; } ul.accordion-responsive li .dcjq-icon:after { content: "\f107" } ul.accordion-responsive li .dcjq-icon.active:after { content: "\f106"; } ul.accordion-responsive li ul { list-style: none; padding: 0; } ul.accordion-responsive li ul >li { padding-left: 20px; } ul.accordion-responsive li ul >li a:before { font-weight: 900; font-family: 'Font Awesome 5 Free'; content: "\f054"; margin-right: 10px; } .post-wrap h3 { font-family: 'OpenSansWeb', sans-serif; font-size: 18px; line-height: 1.6; } .post-wrap { padding: 15px; text-align: justify; line-height: 1.8; } .post-wrap h3 a { color: #000; } .post-meta { border-top: 1px solid #fff; padding: 10px; color: #e52117; font-size: 14px; } h1.h1 { font-family: 'OpenSansWeb', sans-serif; font-size: 20px; text-rendering: optimizelegibility; width: 100%; line-height: 1.2; margin: 5px 0; color: #fff; font-weight: 700; } h2.widget-title i:before { content: ''; position: absolute; width: 50px; border: 2px solid #d40835; left: 130px; top: 15px; } h2.widget-title i:after { content: ''; position: absolute; width: 50px; border: 2px solid #d40835; right: 130px; top: 15px; } h2.widget-title { text-align: center; margin: 25px 0; font-family: 'OpenSansWeb', sans-serif; font-size: 20px; position: relative; } h2.widget-title span:before { content: ""; position: absolute; top: 0; left: -15px; right: 0; z-index: 9; width: 0; height: 0; border-style: solid; border-width: 0 0 37px 15px; border-color: transparent transparent #d40835 transparent; } h2.widget-title span:after { content: ""; position: absolute; top: 0; right: -15px; border-style: solid; border-width: 0px 0px 37px 15px; border-color: transparent transparent transparent #d40835; } h2.widget-title span { background: #d40835; color: #fff; position: relative; padding: 5px; height: 37px; display: inline-block; } h3.h3 { margin-bottom: 10px; font-size: 20px; position: relative; font-family: 'OpenSansWeb', sans-serif; font-weight: 600; padding-bottom: 10px; } h3.h3:before { content: ""; position: absolute; bottom: 0; left: 0; border-bottom: 2px solid #0083c7; width: 50px; } h3.h3:after { content: ""; position: absolute; bottom: 0; left: 60px; border-bottom: 2px solid #db4437; width: 50px; } footer.footer { position: relative; background-color: #252525; color: #fff; } footer.footer h4 { position: relative; } footer.footer h4 strong { display: block; font-size: 15px; text-transform: uppercase; margin-top: 15px; font-family: 'OpenSansWeb', sans-serif; margin-bottom: 15px; color: #58c6ff; } footer.footer h4 span.separator { position: relative; display: inline-block; margin: 0 auto; text-align: center; } footer.footer h4 span.separator i { font-size: 13px; } footer.footer h4 span.separator:before { content: ""; position: absolute; width: 50px; height: 10px; right: 25px; margin: 0 auto; top: 8px; border-bottom: 1px solid #f3af08; } footer.footer h4 span.separator:after { content: ""; position: absolute; width: 50px; height: 10px; left: 25px; margin: 0 auto; top: 8px; border-bottom: 1px solid #eda817; } footer.footer ul.menu { list-style: square; padding: 0 0 0 20px; color: #444; } footer.footer ul.menu li { padding: 5px; color: #fff; } footer.footer ul.menu li a { color: #ffffffe6; } footer.footer .social i { font-size: 20px; width: 35px; height: 35px; text-align: center; color: #fff; line-height: 1.8; border-radius: 50%; } footer.footer .social i.icon-facebook { background: #3b5998 } footer.footer .social i.icon-twitter { background: #00aff0 } footer.footer .social i.icon-youtube { background: #e62117 } footer.footer .social i.icon-linkedin {background: #0083c7;} footer.footer .copyright { padding: 10px 0; font-size: 14px; line-height: 1.8; background: #0c96cb; color: #fff; } section.partner-wrap { background: url(assets/images/footer-top-bg.png) no-repeat center bottom; background-size: 100%; } /* ====================================== [ Contact From ] ====================================== */ .contact-form { position: relative; } .contact-form .input-group { margin-bottom: 15px; float: left; background: #0202023d; } .contact-form .input-group br { display: none; } .contact-form .input-group-text { background: none; border: none; width: 40px; display: block; text-align: center; color: #fff; } .contact-form .input-group .input-group-addon { border-radius: 0px; border: none; position: relative; padding: 0px 10px; background-color: #fff; } .contact-form .input-group .input-group-addon i { color: #fff; font-size: 20px; width: 20px; height: 20px; } .contact-form .input-group .form-control { background-color: rgba(0, 0, 0, 0.08); border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; color: #fff; min-height: 34px; border: none; -webkit-box-shadow: none; box-shadow: none; } .owl-banner .item .info { position: absolute; z-index: 9999; top: 50%; transform: translateY(-50%); width: 100%; left: 0; right: 0; } .owl-banner .item .owl-title { color: #fbb80a; font-weight: 500; text-transform: uppercase; line-height: 1.6; -webkit-transform: translateY(60px); -moz-transform: translateY(60px); -ms-transform: translateY(60px); -o-transform: translateY(60px); transform: translateY(60px); opacity: 0; font-family: 'OpenSansWeb', sans-serif; font-size: 30px; font-weight: 600; display: block; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 3px 3px 5px #ffffff; } .owl-banner .active .item .owl-title { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); opacity: 1; -webkit-transition: 0.2s ease all 1s; -o-transition: 0.2s ease all 1s; -moz-transition: 0.2s ease all 1s; transition: 0.2s ease all 1s; } .owl-banner .item .owl-btn { font-weight: 500; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); opacity: 0; font-size: 14px; display: inline-block; font-family: 'Segoe-Ui-Semibold'; background: #444; margin-top: 20px; color: #fff; padding-right: 10px; } .owl-banner .active .item .owl-btn { -webkit-transform: scale(1.0); -moz-transform: scale(1.0); -ms-transform: scale(1.0); -o-transform: scale(1.0); transform: scale(1.0); opacity: 1; -webkit-transition: 1s ease all 1.5s; -o-transition: 1s ease all 1.5s; -moz-transition: 1s ease all 1.5s; transition: 1s ease all 1.5s; } .owl-banner .active .item .owl-btn i { background: #fbb80a; padding: 10px; color: #fff; margin-right: 5px; } /* ====================================== [ Overlay ] ====================================== */ .overlay { position: relative; } .overlay:before { content: ""; position: absolute; background: rgba(0, 0, 0, 0.05); left: 0; right: 0; top: 0; width: 100%; height: 100%; z-index: 1; } .overlay .container { position: relative; z-index: 9; } .breadcrumbs {background: url(assets/images/tm-titlebar-bg.png) no-repeat center;padding: 100px 0;color: #fff;height: 317px;} .breadcrumbs a { color: #f90b0b; } .single-detail .item { background: #f5f5f5; display: block; padding: 20px; margin: 10px 0; text-align: center; } .single-detail .item i { display: block; font-size: 30px; width: 40px; height: 40px; margin: 0 auto; color: #fbb80a; } .single-detail .item span { display: block; } .single-detail .item span.label-content { font-style: italic; color: #db4437; } .widget-post .item { margin: 10px 0; padding: 5px; background: #f5f5f5; } .widget-post .item a.post-title {color: #f90b0b;font-size: 16px;display: block;} .widget-post .item .post-thumbnail { position: relative; display: block; } .widget-post .item span.post-time { display: block; margin: 10px 0; color: #444; } ul.accordion-taxonomy { padding: 0; margin: 0 0 20px 0; overflow: hidden; background: #f7f7f796; } ul.accordion-taxonomy li { display: block; font-size: 15px; color: #333; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; padding: 10px; } ul.accordion-taxonomy li:hover { padding-left: 20px; } ul.accordion-taxonomy li:nth-child(odd) {background: #f3f0f0;} ul.accordion-taxonomy li a { color: #4b4f56; } ul.accordion-taxonomy li a:before { display: inline-block; font-weight: 900; font-family: 'Font Awesome 5 Free'; content: "\f02c"; margin-right: 5px; } ul.accordion-taxonomy li:hover, ul.accordion-taxonomy li.current-menu-item { background: #0eb0ee; } ul.accordion-taxonomy li:hover a, ul.accordion-taxonomy li.current-menu-item a { color: #fff; } /* ====================================== [ Gallery ] ====================================== */ .gallery-full { margin-bottom: 10px; } .gallery-thumbnail .owl-item { border: 2px solid rgba(0, 0, 0, 0); } .gallery-thumbnail .owl-item.current { border: 2px solid red; } .gallery-full img { height: 400px; object-fit: cover; background: #f5f5f5; padding: 5px; } .gallery-thumbnail img { height: 100px; object-fit: cover; } section.terms .item { background: #f5f5f5; padding: 10px; } section.terms .item img { display: block; margin: 10px auto; } section.terms .item span { display: block; font-size: 20px; font-family: 'OpenSansWeb', sans-serif; color: #fac158; position: relative; } .product-wrap .item {box-shadow: rgba(34, 34, 34, 0.07) 3px 3px 9px 0px;border: 1px solid rgba(255, 255, 255, 0.37);position: relative;} .product-wrap .item a >span { display: block; font-family: 'OpenSansWeb', sans-serif; color: #ffffff; } .product-wrap .item a.thumbnail, .product-wrap .item a.thumbnail img { display: block; position: relative; } .product-wrap .item a.thumbnail { overflow: hidden; } .product-wrap .item a.thumbnail >div { position: absolute; background: #0083c79e; width: 100%; height: 100%; } .product-wrap .item span.info {position: absolute;bottom: 0;background: #f90b0b;left: 0;right: 0;color: #fff;display: block;} .product-wrap .item:hover span.info {opacity: 0;transition: all 300ms ease 0s;} .product-wrap .item img { height: 300px; object-fit: cover; } /* ====================================== [ Pagenavi ] ====================================== */ .pagenavi { margin: 20px 0; } .pagenavi a { color: #fff; background: #444; display: inline-block; padding: 5px 15px; } .pagenavi a:hover { background: #f2663a; } .pagenavi span { color: #fff; background: #f2663a; display: inline-block; padding: 5px 15px; } section.abouts-wrap { -webkit-box-shadow: 0 0 11px 0 rgba(6, 22, 58, .14); -moz-box-shadow: 0 0 11px 0 rgba(6, 22, 58, .14); box-shadow: 0 0 11px 0 rgba(6, 22, 58, .14); margin-top: -50px; padding: 40px 15px 34px 15px; z-index: 999; position: relative; background: #fff; } section.abouts-wrap strong { } section.abouts-wrap a.readmore { display: inline-block; border: 1px solid; color: #fbb907; padding: 7px 20px; position: relative; } section.abouts-wrap a.readmore:after { content: ""; border-top: 1px solid; width: 50px; height: 1px; color: #fbb907; position: absolute; top: 18px; left: 115px; } section.abouts-wrap h2 span { font-family: 'OpenSansWeb', sans-serif; text-transform: uppercase; font-weight: 700; font-size: 22px; line-height: 22px; color: #f90b0b; margin-bottom: 6px; display: block; } section.whyus-wrap { background: #0eb0ee url(assets/images/col-bg-image.jpg) no-repeat center left; color: #fff; } section.whyus-wrap .item img {width: 100px;} section.whyus-wrap .item { color: #fff; border: 1px solid #ffffff2e; text-align: center; } section.whyus-wrap .item h3 {margin-top: 10px;font-family: 'OpenSansWeb', sans-serif;font-size: 15px;font-weight: 700;} section.abouts-short-wrap { background: #444; padding: 30px 0 5px; color: #fff; } section.statistical-wrap { background: #444; } section.statistical-wrap .item { color: #fff; text-align: center; padding: 20px; border: 1px solid #ffffff26; margin-top: 30px; margin-bottom: 30px; } section.statistical-wrap .item h3 { font-size: 20px; font-family: 'OpenSansWeb', sans-serif; margin-top: 10px; color: #ff9701; } section.statistical-wrap .item i { font-size: 50px; } section.statistical-wrap .item span { font-family: 'OpenSansWeb', sans-serif; font-size: 30px; } /* ====================================== [ Comment ] ====================================== */ h2.comments-title { font-size: 16px; background: #215a94; color: #fff; padding: 10px; } h3.comment-reply-title { text-transform: uppercase; font-size: 16px; } .comment-reply-title a { border: 1px solid; padding: 3px 10px; color: #EE2D34; font-size: 12px; margin-left: 20px; } ol.comment-list { list-style: none; margin: 0; padding: 0; } ol.children { list-style: none; } .comments-area .avatar { float: left; border-radius: 50%; margin-right: 10px; } .comment-author { overflow: hidden; position: relative; } .comment-meta { margin: 10px 10px 10px 60px; border: 1px solid #eee; padding: 10px 10px 0; position: relative; line-height: 1.8; } span.comment-name a { color: #EE2D34; } .reply a { right: 10px; position: absolute; top: 20px; border: 1px solid; padding: 0 15px; color: #EE2D34; line-height: 1.8; } .comment-meta a { margin: 10px 0; } span.comment-name { display: block; margin: 10px 0 0; font-style: italic; padding-right: 10px; color: #EE2D34; } .comment-author a.comment-date { font-style: italic; color: #999; } em.comment-awaiting-moderation { color: #fe6d03; display: block; } .comment-edit-link, .logged-in-as a { border: 1px solid; padding: 0 5px; color: #EE2D34; line-height: 1.8; display: inline-block; font-weight: 300; } .comment-respond textarea {width: 100%;background: #ffffff;border: 1px solid #e6e6e6;font-size: 14px;font-family: Arial, sans-serif;padding: 15px;height: 100px;} .comment-respond input[type="text"] { background: #ffffff; border: 1px solid #e6e6e6; font-size: 14px; font-family: Arial, sans-serif; padding: 10px 15px; width: 100%; } .comment-respond input[type="submit"] { background: #EE2D34; border: 1px solid #EE2D34; font-size: 15px; padding: 5px 10px; color: #fff; font-weight: 100; } .comment-form { margin: 20px 0; } .owl-member .item img { width: 100px; height: 100px; object-fit: cover; border: 4px solid #990005; max-width: 100%; border-radius: 50%; float: left; } .owl-member .item .wrap >i { font-size: 40px; color: #e01a34; } .owl-member .item:after { content: ""; background: #f5f5f5; width: 100%; position: absolute; height: 200px; top: 0; left: 0; z-index: 1; } .owl-member .item { position: relative; padding: 20px; } .owl-member .item .wrap { z-index: 999; position: relative; } .owl-member .item .wrap strong { color: #e01a34; } .video a.item i { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: 45px; color: #f90b0b; border: 2px solid #fff; width: 50px; height: 50px; margin: 0 auto; border-radius: 50%; background: #fff; } .video a.item { position: relative; display: block; } /* ====================================== [ Social] ====================================== */ .share-social i { font-size: 34px; text-align: center; } .share-social i.icon-facebook { color: #3b5998 } .share-social i.icon-google { color: #db4437 } .share-social i.icon-twitter {color: #0c96cb;} .share-social i.icon-pinterest { color: #00aff0 } /* ====================================== [ Effect ] ====================================== */ .effect-scale:before { content: ""; display: block; position: absolute; z-index: 999; top: 0; left: 0; bottom: 0; right: 0; background: rgba(41, 41, 41, 0.5); transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); opacity: 0; -moz-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; } .effect-scale:hover::before { content: ""; display: block; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); opacity: 1; } .effect-scale3d>div:after { position: absolute; top: 0; left: 0; width: 160%; height: 100%; background: rgba(255, 255, 255, .2); content: ''; z-index: 1; transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0); -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0); -moz-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0); -ms-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0); -o-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0); } .effect-scale3d:hover>div:after { -webkit-transition: transform .7s ease 0s; -moz-transition: transform .7s ease 0s; -o-transition: transform .7s ease 0s; transition: transform .7s ease 0s; transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 146%, 0); -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 146%, 0); -moz-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 146%, 0); -ms-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 146%, 0); -o-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 146%, 0); } .back-to-top { position: fixed; bottom: 35px; right: 10px; display: none; cursor: pointer; z-index: 9999 } .back-to-top i { background: #f90b0b; padding: 5px 10px; color: #ffffff; font-size: 30px;} .extra ul { padding: 0; } .extra ul:after { clear: both; content: ""; display: table; } .extra ul li { padding: 3px 0; list-style: square inside; color: #ff600a; } .extra ul li strong { color: #7b7b7b; font-weight: 600; font-size: 13px; } .extra ul li span { color: #7b7b7b; font-weight: 100; text-transform: lowercase; } span.stock { border: 1px solid; padding: 2px 5px; border-radius: 2px; display: inline-block; margin: 0 0 10px 0; } span.out-of-stock { color: #c51230; } span.in-stock { color: #2ecc71; } span.rating { color: #d22237; } span.rating i { color: #FFC107; } .product-btn a { display: block; text-transform: uppercase; font-size: 17px; vertical-align: middle; text-align: center; border-radius: 0; overflow: hidden; margin-bottom: 5px; } .product-btn a i { float: left; background: rgba(0, 0, 0, 0.2); width: 60px; font-size: 20px; padding: 15px; color: #fff; } .product-btn a.hotline { background: #FC1047; color: #fff; } .product-btn a.facebook { background: #49C369; color: #fff; } .product-btn span { display: block; margin-top: 15px; color: #fff; } .ripple:before, .ripple:after { position: absolute; top: 50%; left: 50%; height: 100px; width: 100px; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transform-origin: center; transform-origin: center center; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 0 0 rgb(255, 255, 255); -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255); -ms-box-shadow: 0 0 0 0 rgba(255, 255, 255); -o-box-shadow: 0 0 0 0 rgba(255, 255, 255); box-shadow: 0 0 0 0 rgba(255, 255, 255); -webkit-animation: ripple 1s infinite; -moz-animation: ripple 1s infinite; -ms-animation: ripple 1s infinite; -o-animation: ripple 1s infinite; animation: ripple 1s infinite; } .ripple:before { -webkit-animation-delay: .9s; -moz-animation-delay: .9s; -ms-animation-delay: .9s; -o-animation-delay: .9s; animation-delay: .9s; content: ""; } .ripple:after { -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -ms-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; content: ""; } @-webkit-keyframes ripple { 70% { box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @keyframes ripple { 70% { box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } .video-section-full:after, .video-section-full:before, .video-section-inner:after, .video-section-inner:before { content: ""; position: absolute; background-color: #fff; z-index: 999; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; overflow: hidden; } .video-section-full:after { width: 30px; height: 2px; left: 20px; top: 20px; } .video-section-full:before { width: 2px; height: 30px; left: 20px; top: 20px; } .video-section-full:hover:after { width: 100%; } .video-section-full:hover:before { height: 100%; } .video-section-inner:after { width: 30px; height: 2px; right: 20px; bottom: 20px; } .video-section-inner:before { width: 2px; height: 30px; right: 20px; bottom: 20px; } .video-section-full:hover .video-section-inner:after { width: 100%; } .video-section-full:hover .video-section-inner:before { height: 100%; } .video-section-full, .video-section-inner { position: relative; overflow: hidden; } .video-wrap { position: relative; } .video-wrap:after { position: absolute; content: ''; left: -20px; top: -20px; width: 40%; height: calc(100% + 40px); background-color: #0083c7; z-index: -1; } .site-button {display: inline-block;font-size: 14px;cursor: pointer;outline: none;border-width: 0;border-style: solid;border-color: transparent;line-height: 1.42857;text-decoration: none;color: #f90b0b;font-weight: bold;} .btn-effect { letter-spacing: 2px; position: relative; } .title-effect span:after { content: ""; width: 200px; border-bottom: 5px solid #0083c7; position: absolute; top: 18px; margin-left: 10px; } .contact-form .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #fff; opacity: 1; /* Firefox */ } .contact-form .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #fff; } .contact-form .form-control::-ms-input-placeholder { /* Microsoft Edge */ color: #fff; } footer.footer h4 strong:after { content: ""; width: 150px; border-bottom: 2px solid #00aff0; position: absolute; top: 8px; margin-left: 10px; } header.header .item i { display: block; float: left; font-size: 26px; width: 50px; height: 50px; border-radius: 100%; border: 1px solid; text-align: center; line-height: 1.8; color: #fff; margin-right: 10px; } header.header .item strong { display: block; margin-bottom: 5px; } section.abouts-wrap h2 > strong { font-family: 'OpenSansWeb', sans-serif; } section.abouts-wrap .item strong {display: block;font-size: 30px;color: #f90b0b;font-family: 'OpenSansWeb', sans-serif;} section.abouts-wrap .item span { font-size: 13px; letter-spacing: 1.5px; display: block; font-weight: bold;} section.abouts-wrap h2 { position: relative; padding-bottom: 20px; margin-bottom: 40px; } section.abouts-wrap h2:before { content: ""; border-bottom: 3px solid #0eb0ee; width: 50px; position: absolute; bottom: 0; } section.abouts-wrap h2:after { content: ""; border-bottom: 3px solid #fe0000; width: 100px; position: absolute; bottom: 0; left: 55px } section.abouts-wrap .item { text-align: center; } section.whyus-wrap h2 > strong {font-family: 'OpenSansWeb', sans-serif;font-size: 20px;} section.whyus-wrap h2 {position: relative;padding-bottom: 20px;} section.whyus-wrap h2:before { content: ""; border-bottom: 3px solid #ffffff; width: 50px; position: absolute; bottom: 0; } section.whyus-wrap h2:after { content: ""; border-bottom: 3px solid #fe0000; width: 100px; position: absolute; bottom: 0; left: 55px } section.whyus-wrap h2 span {font-family: 'OpenSansWeb', sans-serif;text-transform: uppercase;font-weight: 700;font-size: 22px;line-height: 22px;color: #f90b0b;margin-bottom: 5px;display: block;} .whyus-content {background: #0eb0ee;padding-left: 20px;padding-top: 20px;} section.whyus-wrap .item span {font-size: 15px;display: block;line-height: 1.8;padding: 5px;position: relative;} .product-wrap h2 span { font-family: 'OpenSansWeb', sans-serif; font-weight: 400; font-size: 15px; line-height: 28px; color: #f90b0b; margin-bottom: 6px; display: block; text-transform: uppercase; } .product-wrap h2 > a {font-family: 'OpenSansWeb', sans-serif;color: #444;font-size: 20px; font-weight: 700;} .product-wrap h2 { position: relative; padding-bottom: 9px; margin-bottom: 10px; margin-top: 10px; } .product-wrap h2:before { content: ""; border-bottom: 3px solid #0083c7; width: 50px; position: absolute; bottom: 0; } .product-wrap h2:after { content: ""; border-bottom: 3px solid #fe0000; width: 100px; position: absolute; bottom: 0; left: 55px } .product-wrap { -webkit-box-shadow: 0 0 11px 0 rgba(6, 22, 58, .14); -moz-box-shadow: 0 0 11px 0 rgba(6, 22, 58, .14); box-shadow: 0 0 11px 0 rgba(6, 22, 58, .14); padding: 10px; } .heading h2 span {display: block;text-transform: uppercase;font-size: 22px;margin-bottom: 5px;font-family: 'OpenSansWeb', sans-serif;color: #f90b0b; font-weight: 700;} .heading h2 strong {display: block;font-size: 20px;padding-bottom: 10px;font-family: 'OpenSansWeb', sans-serif;color: #0083c7;} .heading h2 { margin-bottom: 0; } .heading h2:before { content: ""; border-bottom: 3px solid #0083c7; width: 50px; position: absolute; bottom: 0; } .heading h2:after { content: ""; border-bottom: 3px solid #fe0000; width: 100px; position: absolute; bottom: 0; left: 55px } .entry-item h3 a { font-size: 15px; color: #f90b0b; height: 50px; overflow: hidden; font-family: 'OpenSansWeb', sans-serif; display: block; line-height: 1.8; margin: 20px 0; font-weight: bold;} .entry-meta { padding: 5px 0; color: #7b7777; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .entry-item {line-height: 1.8;font-size: 15px;} .entry-item a.readmore { color: #f90b0b; display: inline-block; margin: 10px 0; font-weight: bold; } .heading { } .support-wrap { background: #0eb0ee; color: #fff; text-align: center; line-height: 2; } .support-wrap .item > i { display: block; font-size: 40px; } .support-wrap strong {display: block;font-size: 17px;color: #ffffff;font-family: 'OpenSansWeb', sans-serif; border-bottom-style: solid;} .support-wrap span { display: block; } .support-wrap .item {padding: 20px;background: #00000026;border-radius: 10px;} .support-wrap .item a { color: #ffffff; } .support-wrap .item a { letter-spacing: 2px; position: relative; font-size: 15px; padding: 5px; font-weight: bold; } .owl-banner .item { position: relative; } .owl-banner .item:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #00000014; z-index: 999; } .owl-banner .item span {position: absolute;z-index: 99999;bottom: 100px;width: 100%;left: 0;right: 0;text-align: center;} .owl-banner .item span {color: #f90b0b;text-transform: uppercase;line-height: 1.6;font-family: 'OpenSansWeb', sans-serif;font-size: 22px;font-weight: 600;display: block;text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 3px 3px 5px #ffffff;} main.contact-wrap {color: #fff;margin-bottom: 15px;position: relative;} main.contact-wrap .right {background: #0eb0ee;margin-top: 100px;} main.contact-wrap .right span { display: block; overflow: hidden; margin: 33px 0; } main.contact-wrap .right span i {float: left;font-size: 30px;width: 50px;text-align: center;display: block;margin-top: 5px;height: 60px;} main.contact-wrap .right span strong { display: block; } main.contact-wrap .left {} .map { width: 100%; height: 450px; } .blog-wrap { -webkit-box-shadow: 0 0 11px 0 rgba(6, 22, 58, .14); -moz-box-shadow: 0 0 11px 0 rgba(6, 22, 58, .14); box-shadow: 0 0 11px 0 rgba(6, 22, 58, .14); padding: 10px; } /* ====================================== [ Effect ] ====================================== */ .transition-thumbnail img { -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; transition: all 1s ease 0s; } .transition-thumbnail img:hover { -webkit-transform: scale(1.2) rotate(-7deg); -moz-transform: scale(1.2) rotate(-7deg); -o-transform: scale(1.2) rotate(-7deg); -ms-transform: scale(1.2) rotate(-7deg); transform: scale(1.2) rotate(-7deg); } .transition-thumbnail { display: block; position: relative; overflow: hidden; } .video-bg { width: 100%; height: 800px; } ul.languages { list-style: none; margin: 0; } ul.languages li {display: inline;opacity: 0.7;} ul.languages li.current-lang { opacity: 1; } .search-fixed .search-btn {position: absolute;right: 15px;top: 15px;} .search-wrap { position: absolute; right: 0; top: 60px; } section.whyus-wrap .item a { color: #fff; } .product-wrap .excerpt { line-height: 1.8; height: 50px; overflow: hidden; } span.ripple { width: 100px; height: 100px; margin: 20px auto; border-radius: 100%; text-align: center; } .header span { font-size: 22px; font-family: 'OpenSansWeb', sans-serif; } .product-wrap .item .hover { position: absolute; top: 0; right: 0; display:none; left: 0; bottom: 0; background: #000000b8; text-align: center; width: 100%; height: 100%; } .product-wrap .item:hover .hover { display:block; transition: all 300ms ease 0s; } .product-wrap .item .hover a { display: inline-block; width: 50px; height: 50px; background: #f90b0b; border-radius: 50%; text-align: center; line-height: 2.5; font-size: 20px; color: #fff; } .product-wrap .item .hover .align-center { top: 50%; transform: translateY(-50%); position: absolute; left: 0; right: 0; } .menu-primary>.wrap>ul>li:hover>a, .menu-primary>.wrap>ul>li.current-menu-item >a, .menu-primary>.wrap>ul>li.current-menu-parent > a { background: #f5f5f5; } .menu-primary ul.sub-menu li:hover { opacity: 0.7; } .entry-item a.readmore:hover, .product-wrap h2 > a:hover { color: #0eb0ee; } .support-wrap .item a:hover { color: #f90b0b; } .entry-item h3 a:hover, .widget-post .item a.post-title:hover { color: #0eb0ee; } section.whyus-wrap .item h3:hover { color: #f90b0b; } .blog-row .entry-item { background: #fff; padding: 5px; -webkit-box-shadow: 0 0 11px 0 rgba(6, 22, 58, .14); -moz-box-shadow: 0 0 11px 0 rgba(6, 22, 58, .14); box-shadow: 0 0 11px 0 rgba(6, 22, 58, .14); } main.contact-wrap:before {content: "";position: absolute;background: #095a79;width: 70%;height: 90%;} main.contact-wrap h3 { font-family: 'OpenSansWeb', sans-serif; font-size: 25px; line-height: 1.6; text-transform: uppercase; } @media (max-width: 768px) { main.contact-wrap { background: #095a79; } main.contact-wrap .right { margin: 0; } } ul.languages li img { width: 30px; height: auto; } .owl-project { background: #f5f5f5; padding: 10px; } section.abouts-wrap .item strong:after {content: "\f067";font-family: 'Font Awesome 5 Free';font-weight: 900;font-size: 15px;margin-left: 10px;position: relative;top: -5px;} .owl-carousel .owl-item img:hover { opacity: 0.6; } .btn-dropdown { color: #fff; background-color: #0eb0ee; border-color: #0eb0ee; } .dropdown:hover>.dropdown-menu { display: block; } .dropdown>.dropdown-toggle:active { pointer-events: none; }