a { text-decoration: none; outline: none; -webkit-transition: 0.3s; transition: 0.3s; color: #fff } input:focus, button:focus { text-decoration: none; outline: none; color: #000 } a:focus, a:hover { text-decoration: none; outline: none; color: #fff } a.link { color: greenyellow } img { max-width: 100%; height: auto } h1, h2, h3, h4, h5, h6 { margin: 0 0 10px; font-weight: 600 } html, body { height: 100% } body { font-family: Arial, Helvetica, sans-serif; font-weight: 400; font-size: 15px; line-height: 1.8; color: #515656 } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px white inset !important } .full-height { width: 100%; height: 100vh } .relative { position: relative } .fixed, .absolute { position: absolute; left: 0; top: 0; width: 100%; height: 100% } .fixed { position: fixed } .v-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap } .section-padding { padding: 50px 0 } .social-menu { list-style: none; margin: 0; padding: 10px } .social-menu li { display: inline-block; margin: 0 3px } .social-menu li a { display: block; width: 36px; height: 36px; text-align: center; line-height: 2.5em; background-color: #fff; color: #007CB9; border-radius: 100px; -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, .1); box-shadow: 0 0 0 0 rgba(0, 0, 0, .1); font-size: 15px } .social-menu li a:hover { opacity: .8 } .overlay:before, .sky-bg { background: #75cbe7; background: -webkit-gradient(linear, left top, left bottom, from(#75cbe7), to(#007CB9)); background: linear-gradient(to bottom, #75cbe7 0%, #007CB9 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#75cbe7', endColorstr='#007CB9', GradientType=0); color: #fff } .gray-bg { background-color: #f2fefe } .button { display: inline-block; padding: 8px 30px; color: #fff; background-color: #007CB9; -webkit-transition: 0.3s; transition: 0.3s; font-weight: 500; border: none; -webkit-box-shadow: 2px 5px 20px -5px rgba(0, 0, 0, .1); box-shadow: 2px 5px 20px -5px rgba(0, 0, 0, .1); border-radius: 35px; } .button.white { background: #fff; color: #007CB9 } .button:hover { background-color: #00d600; color: #fff } .button.white:hover { background-color: #fff; color: #007cb9; opacity: .9 } .button i { margin-left: 5px } .page-title { margin-bottom: 60px } .page-title h2 { text-transform: uppercase; position: relative; margin-bottom: 20px; padding-bottom: 20px; margin-top: 15px; font-weight: bold; } .page-title h2 span{ color: #007cb9; } .page-title h2:after { content: ""; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: -10px; width: 15px; height: 15px; font-size: 14px } .box { padding: 20px 10px; text-align: center; -webkit-box-shadow: 0 0 0 0 #fff; box-shadow: 0 0 0 0 #fff; -webkit-transition: 0.3s; transition: 0.3s; border-radius: 5px; -webkit-transform: translateY(0); transform: translateY(0) } .box:hover { -webkit-box-shadow: 0 10px 30px -5px rgba(0, 0, 0, .1); box-shadow: 0 10px 30px -5px rgba(0, 0, 0, .1); background-color: #fff; -webkit-transform: translateY(-5px); transform: translateY(-5px) } .box h4 { text-transform: uppercase } .box .box-icon i.fa { font-size: 48px; color: rgba(0, 124, 185, .64); margin-bottom: 30px } .box .box-icon img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: 0.3s; transition: 0.3s } .box:hover .box-icon img { -webkit-filter: grayscale(0); filter: grayscale(0) } .mainmenu-area { position: fixed; left: 0; top: 0; background: rgba(0, 124, 185, 1); width: 100%; z-index: 9999999; -webkit-transition: 0.3s; transition: 0.3s } .overlay, .overlay a, .mainmenu-area a { color: #fff } .mainmenu-area #primary-menu > ul > li.sign-in > a { background: #00d600; padding: 8px 25px } .mainmenu-area .logo { max-width: 180px; margin-top: -10px } .mainmenu-area .navbar-brand { position: relative } .mainmenu-area .navbar-brand .slogan { font-size: 11px; font-style: italic; position: absolute; right: 12px; bottom: -15px; font-weight: 300 } .mainmenu-area .logo h2 { margin-bottom: 0 } .mainmenu-area #primary-menu > ul > li { padding: 12px 10px } .mainmenu-area #primary-menu > ul > li > a {background: none;position: relative;border-top: 2px solid transparent;text-align: center;padding: 8px 3px;/* text-transform: uppercase; */font-size: 15px;border-radius: 35px;font-weight: bold;} .mainmenu-area #primary-menu > ul > li:not(:last-child) > a:hover:before, .mainmenu-area #primary-menu > ul > li:not(:last-child) .active > a:before { opacity: 1; top: 0 } .mainmenu-area #primary-menu ul li.active:not(:last-child) a, .mainmenu-area #primary-menu ul li:not(:last-child) a:hover { color: greenyellow } .mainmenu-area.affix { background-color: #007CB9 } .client-area, .header-area { background: #000 url(../img/parallax-2.jpg) no-repeat scroll center center / cover } .overlay { position: relative } .overlay:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: .8 } .header-text h2 { margin-bottom: 20px; font-size: 40px } .header-text h2 span { color: yellow } .header-text .button { margin-top: 30px } .screen-slider .item { background: url(../img/Flat-MacBook.png) no-repeat scroll center center / auto 100%; padding: 42px 90px; display: inline-block; margin: auto } .screen-slider.owl-carousel .owl-item { text-align: center } .screen-slider .owl-controls { position: absolute; left: 0; top: 100% } .screen-slider .owl-controls .owl-nav > div { display: inline-block; margin: 0 15px; font-size: 20px; text-align: center; position: relative } .screen-slider .owl-controls .owl-nav { position: relative; margin-top: 0 } .screen-slider .owl-controls .owl-nav:after { content: "/"; position: absolute; left: 50%; top: 12px; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .caption-slider .carousel-indicators { position: static; margin: 30px auto 0 auto; padding: 0; border-top: 1px solid rgba(255, 255, 255, .2); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .caption-slider .carousel-indicators li { float: left; padding-top: 20px; padding-right: 30px; cursor: pointer; position: relative; list-style: none } .caption-slider .carousel-indicators li:before { content: ""; position: absolute; left: 0; top: -2px; width: 100%; height: 3px; background-color: #fff; opacity: 0 } .caption-slider .carousel-indicators li.active:before { opacity: 1 } .caption-slider .carousel-indicators li strong { display: block } .caption-slider h2 { margin-bottom: 20px; font-size: 40px } .caption-slider .button { margin-top: 30px } .caption-slider .caption-photo { display: inline-block; -webkit-box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .1); box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .1) } .caption-slider .caption-photo.two { margin-top: 20px } .caption-slider .caption-title { -webkit-animation-delay: 0.4s; animation-delay: 0.4s } .caption-slider .caption-desc { -webkit-animation-delay: 0.6s; animation-delay: 0.6s } .caption-slider .caption-button { -webkit-animation-delay: 0.8s; animation-delay: 0.8s } .caption-slider .caption-photo.one { -webkit-animation-delay: 1s; animation-delay: 1s } .caption-slider .caption-photo.two { -webkit-animation-delay: 1.2s; animation-delay: 1.2s } .single-team { background-color: #fff; border-radius: 5px; overflow: hidden; color: #515656; text-align: center; position: relative; -webkit-box-shadow: 0 5px 30px -10px rgba(0, 0, 0, .3); box-shadow: 0 5px 30px -10px rgba(0, 0, 0, .3); -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: 0.3s; transition: 0.3s } .single-team:hover { -webkit-transform: translateY(-5px); transform: translateY(-5px) } .single-team .team-photo { margin-bottom: 20px; padding-top: 20px; overflow: hidden } .single-team .team-photo img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: 0.3s; transition: 0.3s } .single-team:hover .team-photo img { -webkit-transform: scale(1.1); transform: scale(1.1) } .single-team h4 { text-transform: uppercase } .single-team h6 { margin-bottom: 20px } .single-team .social-menu { -webkit-transition: 0.3s; transition: 0.3s; position: absolute; bottom: -80px; left: 0; width: 100%; padding: 23px 10px; background-color: #fff } .single-team:hover .social-menu { bottom: 0 } .testimonial-area { background: url(../img/parallax-7.jpg) no-repeat scroll center center / cover; position: relative; color: #fff } .testimonial-area:before { opacity: .9 } .testimonial { text-align: center } .testimonial .testimonial-photo { margin-bottom: 20px; display: inline-block; position: relative } .testimonial .testimonial-photo img { border-radius: 50%; -webkit-box-shadow: 5px 10px 30px -10px rgba(255, 255, 255, .5); box-shadow: 5px 10px 30px -10px rgba(255, 255, 255, .5) } .testimonial .testimonial-photo:after { content: ""; position: absolute; left: 50%; top: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 20px; height: 20px } .testimonials.owl-carousel .owl-controls .owl-nav { text-align: center } .price-table h3 { margin-bottom: 30px } .price-table { padding: 50px 40px; border-radius: 2px; text-align: center; background-color: #fff; color: #515656; position: relative; margin-top: 20px } .price-table.active { padding: 70px 40px; margin-top: 0 } .price-table ul { margin: 30px 0; padding: 0; list-style: none } .price-table ul li { padding: 5px 0 } .price-table .price-info { position: absolute; left: 50%; top: 0; width: 100px; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #61bddf; color: #fff; border-radius: 0 0 50% 50%; padding-bottom: 5px } #accordion .panel { background: none } #accordion .panel .panel-title { padding: 30px 0 30px 60px; position: relative } #accordion .panel .panel-collapse { padding-left: 60px } #accordion .panel .panel-title a span:after, #accordion .panel .panel-title a span:before, #accordion .panel .panel-title a span { content: ''; position: absolute; left: 0; top: 20px; width: 36px; height: 36px; background: #2f60c3; border-radius: 50%; -webkit-transition: 0.3s; transition: 0.3s } #accordion .panel .panel-title a span:before, #accordion .panel .panel-title a span:after { width: 10px; height: 1px; background-color: #fff; top: 50%; left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%) } #accordion .panel .panel-title a span:before { -webkit-transform: translate(-50%) rotate(90deg); transform: translate(-50%) rotate(90deg) } #accordion .panel .panel-title a[aria-expanded="true"] span:before { -webkit-transform: translate(-50%) rotate(0deg); transform: translate(-50%) rotate(0deg) } .single-blog { overflow: hidden; border-radius: 5px; -webkit-box-shadow: 10px 15px 50px -10px rgba(0, 0, 0, .1); box-shadow: 10px 15px 50px -10px rgba(0, 0, 0, .1) } .single-blog h3 { font-size: 18px } .single-blog .blog-meta { list-style: none; margin: 0; padding: 0; margin-top: 10px; margin-bottom: 30px } .single-blog .blog-meta li { display: inline-block; margin-right: 15px } .single-blog .blog-meta li span { margin-right: 5px } .single-blog .blog-content { padding: 40px 20px; background-color: #fff } .footer-area { padding-top: 80px; z-index: 1 } .footer-top { margin-bottom: 150px } .footer-bottom { padding-top: 0; padding-bottom: 15px } .footer-box { margin-bottom: 50px } .footer-box h4 { margin-bottom: 30px; font-size: 18px; text-transform: uppercase } .footer-box a { display: block; color: rgba(255, 255, 255, .9) } .footer-box a:hover { color: #fff; text-decoration: underline } #custom-sub-input { padding: 2px; border: solid 1px #fff; background-color: #fff; margin-top: 23px } #custom-sub-input input { border: 0; box-shadow: none } #custom-sub-input .form-control { height: 30px; font-size: 12px; padding: 5px 10px } #custom-sub-input button { margin: -3px 0 0 0; background: none; box-shadow: none; border: 0; color: #666; padding: 0 8px 0 10px; border-left: solid 1px #e5e5e5 } #custom-sub-input button:hover { border: 0; box-shadow: none; border-left: solid 1px #e5e5e5; color: #333 } #custom-sub-input .fa-envelope { font-size: 15px; color: #888 } #custom-sub-input .fa-envelope:hover { color: #555 } .contact-form .button { letter-spacing: 2px; min-width: 150px; margin-top: 10px; border-radius: 3px } .form-control { margin-bottom: 20px; height: auto; padding: 12px 20px } .form-double input { width: calc(50% - 10px); float: left } .form-double input:last-child { float: right } .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #75cbe7; background: -webkit-gradient(linear, left top, left bottom, from(#75cbe7), to(#007CB9)); background: linear-gradient(to bottom, #75cbe7 0%, #007CB9 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#75cbe7', endColorstr='#007CB9', GradientType=0); z-index: 99999999999 } .sk-folding-cube { margin: 20px auto; width: 40px; height: 40px; position: absolute; top: 50%; left: 50%; margin-top: -20px; margin-left: -20px; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg) } .sk-folding-cube .sk-cube { float: left; width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); transform: scale(1.1) } .sk-folding-cube .sk-cube:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; animation: sk-foldCubeAngle 2.4s infinite linear both; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100% } .sk-folding-cube .sk-cube2 { -webkit-transform: scale(1.1) rotateZ(90deg); transform: scale(1.1) rotateZ(90deg) } .sk-folding-cube .sk-cube3 { -webkit-transform: scale(1.1) rotateZ(180deg); transform: scale(1.1) rotateZ(180deg) } .sk-folding-cube .sk-cube4 { -webkit-transform: scale(1.1) rotateZ(270deg); transform: scale(1.1) rotateZ(270deg) } .sk-folding-cube .sk-cube2:before { -webkit-animation-delay: 0.3s; animation-delay: 0.3s } .sk-folding-cube .sk-cube3:before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s } .sk-folding-cube .sk-cube4:before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s } @-webkit-keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0 } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1 } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0 } } @keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0 } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1 } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0 } } .number { text-align: center; margin: 15px 0 } .number i { color: #83e084; font-size: 36px; margin-bottom: 20px } .number h3 { font-size: 36px; margin-bottom: 10px } .navbar-toggle .icon-bar { background: #fff } .morecontent span { display: none } .morelink { display: block } .box .more a { color: #007CB9 } .alert-info { padding: 5px; font-size: 13px } .owl-carousel .owl-item img {border: 1px solid #eee;padding: 20px;} .box-taisao{ margin: 20px 0; } .box-taisao h3{ color: #000; } .box-taisao  p{ height: 50px; line-height: 22px; max-width: 200px; text-align: center; margin: 10px auto 20px; } .box-taisao img{width: 80%;margin: auto;} .mb-0{margin-bottom: 0 !important;} .pb-0{padding-bottom: 10px!important;} .white-bg {background: #fff} .text-bold {font-weight: bold!important;} .text-diamond { color: #32A200; } .text-platium { color: #F700BE; } .text-gold { color: #D0B317; } .text-silver { color: #1F8FFF; } .text-standard { color: #707070; } .btn-muangay{ border-radius: 50px; margin-top: 10px; background: #007cb9; text-transform: uppercase; max-width: 100%; font-weight: bold; font-size: 12px; padding: 11px 20px; display: inline-block; color: #fff !important; } .btn-muangay:hover{ background: #007cb9; color: #fff; opacity: 0.8; } .text-danger { color: #d30400; font-size: 18px; } .box-goidv {margin: 10px 0;-webkit-box-shadow: 0 10px 30px -5px rgb(0 0 0 / 10%);box-shadow: 0 10px 30px -5px rgb(0 0 0 / 12%);padding: 5px 30px 0;} .box-goidv h3{ font-size: 24px; font-weight: bold; margin-bottom: 10px; margin-top: 20px; color: #000; } .box-goidv p{ font-size: 24px; } .box-goidv ul{ padding: 0; } .box-goidv ul li{ display: inline-block; margin-bottom: 5px; font-weight: bold; } .box-goidv ul li img{ width: 20px; display: inline-block; margin-top: -5px; margin-right: 7px; }@media (min-width: 992px){.container { width: 1085px; }}