/*------------------------------------------------- = Table of Css 1.Isotope 1.KENBURNER RESPONSIVE BASIC STYLES OF HTML DOCUMENT 3.Header 4.General 5.content - home sections 6.Home2 7.Home3 8.Home Corporate 9.Home light boxed 10.Home dark boxed 11.Home dark 12.blog large, blog medium 13.blog with sidebar 14.blog grid page 15.blog masonry 16.single post page 17.About us 1 18.About us 2 19.services page 20.shop page 21.Home shop - ui-style 22.Product page 23.portfolio pages 24.single project 1 25.single project 2 26.Contact page 27.faqs page 28.error page 29.footer 30.Responsive part -------------------------------------------------*/ /*-------------------------------------------------------*/ /* 1. Isotope filtering /*-------------------------------------------------------*/ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } .isotope, .isotope .isotope-item { /* change duration value to whatever you like */ -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; } /*----------------------------------------------------------------------------- KENBURNER RESPONSIVE BASIC STYLES OF HTML DOCUMENT Screen Stylesheet version: 1.0 date: 07/27/11 author: themepunch email: support@themepunch.com website: http://www.themepunch.com -----------------------------------------------------------------------------*/ .boxedcontainer { max-width: 1200px; margin: auto; } /********************************************* - SETTINGS FOR BANNER CONTAINERS - **********************************************/ .tp-banner-container { width: 100%; position: relative; padding: 0; } .tp-banner { width: 100%; position: relative; } .tp-banner-fullscreen-container { width: 100%; position: relative; padding: 0; } /*-------------------------------------------------*/ /* = Header /*-------------------------------------------------*/ .navbar-default { background: #fff; border: none; padding: 0 40px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .navbar-brand { height: auto; padding: 25px 15px 20px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .navbar-nav { margin-right: 40px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .navbar-nav > li { position: relative; } .navbar-nav > li > a { color: #222222 !important; font-size: 14px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 600; text-transform: uppercase; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; padding: 25px 20px; } .navbar-nav > li > a:hover, .navbar-nav > li > a.active { color: #BA0511!important; } .navbar-nav a.open-search { padding-left: 0; padding-right: 15px; } .navbar-nav a.open-search i { color: #cccccc; font-size: 16px; display: inline-block; margin-top: -5px; } .navbar-nav li.shop-icon a { padding-left: 0; } .navbar-nav li.shop-icon a i { color: #cccccc; font-size: 16px; display: inline-block; margin-top: -5px; } .navbar-nav li.shop-icon a span { display: inline-block; width: 20px; height: 20px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background: #f7f7f7; text-align: center; line-height: 20px; color: #222222; margin: 0; margin-left: 6px; } .navbar-nav li.drop { position: relative; } .navbar-nav li ul.drop-down { margin: 0; padding: 0; position: absolute; top: 100%; left: 0px; width: 170px; visibility: hidden; opacity: 0; z-index: 3; text-align: left; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .navbar-nav li ul.drop-down li { list-style: none; display: block; margin: 0; } .navbar-nav li ul.drop-down li ul.drop-down.level3 { top: 0px; left: 100%; border-bottom: none; } .navbar-nav li ul.drop-down li a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; display: block; color: #ffffff; font-size: 11px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; padding: 15px 20px; text-transform: uppercase; font-weight: 400; background: #BA0511; margin: 0; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .navbar-nav li ul.drop-down li a:hover { background: #f7f7f7; color: #222222; } .navbar-nav li ul.drop-down li:first-child a { border-top: 1px solid rgba(255, 255, 255, 0.1); } .navbar-nav li ul.drop-down li:hover ul.drop-down.level3 { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } .navbar-nav > li:first-child ul.drop-down { left: 20px; } .navbar-nav li:hover > ul.drop-down { visibility: visible; opacity: 1; } .light-boxed .navbar-default { background: #f7f7f7; } .light-boxed header.active .navbar-default { background: #f7f7f7; } header.active .navbar-default { background: rgba(255, 255, 255, 0.95); } .dark-boxed .navbar-default { background: #f7f7f7; margin-bottom: 0; padding: 0; } .form-search { position: absolute; top: 100%; right: 0; width: 200px; background: #BA0511; padding: 4px; visibility: hidden; opacity: 0; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .form-search input[type="search"] { font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; margin: 0; color: #222222; padding: 8px 10px; border: none; width: 100%; outline: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; background: #ffffff; } .form-search button { background: #ffffff; border: none; float: right; margin-top: -28px; margin-right: 15px; position: relative; z-index: 2; } .form-search button i { color: #BA0511; font-size: 16px; } .form-search.active { visibility: visible; opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } /*-------------------------------------------------*/ /* = General /*-------------------------------------------------*/ #container { padding-top: 70px; opacity: 0; } #container.active { opacity: 1; } p { font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; } /*-------------------------------------------------*/ /* = content - home sections /*-------------------------------------------------*/ #slider .tp-caption.large_bold_white { font-size: 36px; line-height: 40px; font-weight: 700; color: #333333; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; text-decoration: none; text-transform: uppercase; letter-spacing: 1.4px; } #slider .tp-caption.large_bold_white span { color: #BA0511; } #slider .tp-caption.medium_thin_grey { font-size: 18px; font-weight: 600; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; color: #ffffff; text-transform: uppercase; padding: 0.3em 1em; background: #BA0511; } #slider.slider2 .tp-caption.medium_thin_grey { background: transparent; padding: 0; } #slider .tp-caption.medium_thin_grey span { color: #333333; } #slider .tp-caption.small_text { font-size: 14px; font-weight: 600; font-family: "Open Sans","Microsoft YaHei", sans-serif; color: #333333; } #slider .tp-bannertimer { display: none; } #slider a.button-one { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; color: #222222; font-size: 13px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; text-transform: uppercase; padding: 0.35em 1.5em; border: 2px solid #222222; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; } #slider a.button-one:hover { background: #BA0511; border: 2px solid #BA0511; color: #ffffff; } .services-section { padding-top: 65px; text-align: center; } .title-section { padding-bottom: 70px; text-align: center; position: relative; z-index: 2; } .title-section h1 { color: #222222; font-size: 20px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 30px; text-transform: uppercase; } .title-section p { max-width: 900px; margin: 0 auto; } .services-section-area { background: url('../images/1.jpg') center no-repeat fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; margin-top: 45px; position: relative; padding-bottom: 5px; } .services-section-area .title-section { padding-top: 70px; padding-bottom: 40px; } .services-section-area .title-section h1 { color: #f7f7f7; } .services-section-area .title-section p { color: #f3f3f3; } .services-section-area:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: rgba(34, 34, 34, 0.6); } .services-box { position: relative; z-index: 2; background: #fff; } .services-box .services-post { padding-bottom: 70px; } .services-box .services-post a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; width: 80px; height: 80px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; border: 1px solid #cccccc; margin-bottom: 26px; margin-top: -45px; text-align: center; background: #fff; } .services-box .services-post a i { line-height: 80px; color: #cccccc; font-size: 26px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .services-box .services-post h2 { color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; color: #BA0511; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; padding-bottom: 16px; margin-bottom: 16px; position: relative; text-transform: uppercase; } .services-box .services-post h2:after { position: absolute; content: ''; width: 20px; height: 0px; bottom: 0; left: 50%; margin-left: -10px; border-bottom: 1px solid #777777; } .services-box .services-post p { max-width: 250px; margin: 0 auto; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .services-box .services-post:hover a { background: #BA0511; border: 1px solid #BA0511; } .services-box .services-post:hover a i { color: #ffffff; } .buttons-area { margin-bottom: 50px; position: relative; z-index: 2; } .buttons-area a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; color: #ffffff; font-size: 13px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; text-transform: uppercase; -webkit-font-smoothing: antialiased; padding: 10px; width: 160px; text-align: center; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; border: 2px solid #ffffff; margin: 0 10px 5px; } .buttons-area a:hover { color: #BA0511; border: 2px solid #BA0511; } .portfolio-section { padding-top: 70px; } .portfolio-section ul.filter { margin: 0; padding: 0; margin-bottom: 32px; text-align: center; } .portfolio-section ul.filter li { display: inline-block; margin: 0 15px 3px; position: relative; } .portfolio-section ul.filter li a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; font-size: 13px; font-weight: 600; -webkit-font-smoothing: antialiased; margin: 0; position: relative; } .portfolio-section ul.filter li a.active { color: #BA0511; } .portfolio-section .project-post { width: 19.98%; padding-left: 1px; padding-bottom: 1px; overflow: hidden; } .portfolio-section .project-post img { width: 100%; } .portfolio-section .project-post .inner-project { position: relative; } .portfolio-section .project-post .inner-project .project-hover { position: absolute; top: 0px; left: 0; width: 100%; height: 100%; text-align: center; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .portfolio-section .project-post .inner-project .project-hover ul { margin: 0; padding: 0; position: absolute; top: 50%; margin-top: -12px; width: 100%; } .portfolio-section .project-post .inner-project .project-hover ul li { display: inline-block; margin: 0 14px; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); -o-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); opacity: 0; } .portfolio-section .project-post .inner-project .project-hover ul li a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .portfolio-section .project-post .inner-project .project-hover ul li a i { color: #BA0511; font-size: 24px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .portfolio-section .project-post .inner-project .project-hover ul li a:hover i { color: #ffffff; } .portfolio-section .project-post .inner-project .project-hover .caption { text-align: left; padding: 20px 30px; background: #ffffff; position: absolute; width: 100%; bottom: 0; -webkit-transform: translate3d(0, 200%, 0); -moz-transform: translate3d(0, 200%, 0); -o-transform: translate3d(0, 200%, 0); transform: translate3d(0, 200%, 0); transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .portfolio-section .project-post .inner-project .project-hover .caption h2 { font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; color: #222222; font-weight: 700; text-transform: uppercase; margin: 0; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transform: translate3d(0, 200%, 0); -moz-transform: translate3d(0, 200%, 0); -o-transform: translate3d(0, 200%, 0); transform: translate3d(0, 200%, 0); } .portfolio-section .project-post .inner-project .project-hover .caption span { display: inline-block; font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; color: #BA0511; margin: 0; opacity: 0; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transform: translate3d(0, 200%, 0); -moz-transform: translate3d(0, 200%, 0); -o-transform: translate3d(0, 200%, 0); transform: translate3d(0, 200%, 0); } .portfolio-section .project-post:hover .inner-project .project-hover { background: rgba(34, 34, 34, 0.8); } .portfolio-section .project-post:hover .inner-project .project-hover ul li { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } .portfolio-section .project-post:hover .inner-project .project-hover ul li:nth-child(1) { -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; -moz-transition-delay: 0.1s; transition-delay: 0.1s; } .portfolio-section .project-post:hover .inner-project .project-hover ul li:nth-child(2) { -webkit-transition-delay: 0.15s; -o-transition-delay: 0.15s; -moz-transition-delay: 0.15s; transition-delay: 0.15s; } .portfolio-section .project-post:hover .inner-project .project-hover ul li:nth-child(3) { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; } .portfolio-section .project-post:hover .inner-project .project-hover .caption { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .portfolio-section .project-post:hover .inner-project .project-hover .caption h2 { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .portfolio-section .project-post:hover .inner-project .project-hover .caption span { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition-delay: 0.15s; -o-transition-delay: 0.15s; -moz-transition-delay: 0.15s; transition-delay: 0.15s; opacity: 1; } .portfolio-section .show-more { padding: 30px 0; background: #f7f7f7; text-align: center; } .portfolio-section .show-more a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; font-size: 13px; font-family: "Open Sans","Microsoft YaHei", sans-serif; line-height: 20px; margin: 0 0 10px; color: #777777; font-weight: 400; -webkit-font-smoothing: antialiased; margin: 0; } .portfolio-section .show-more a:hover { color: #BA0511; } button.mfp-close, button.mfp-arrow { outline: none; } .title2 h1 { position: relative; margin-bottom: 0; text-transform: uppercase; } .title2 h1:after { position: absolute; content: ''; width: 22px; height: 2px; background: #222222; bottom: -36px; left: 50%; margin-left: -11px; } .team-section .title-section { position: relative; z-index: 2; padding-top: 50px; padding-bottom: 80px; background: #333333; } .team-section .title-section h1 { color: #ffffff; } .team-section .title-section h1:after { background: #fff; } .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span { background: #BA0511; border: 1px solid #BA0511; } .statistic-section { padding: 82px 0 92px; background: url('../images/2.jpg') center fixed no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; position: relative; } .statistic-section .statistic-box { overflow: hidden; position: relative; z-index: 2; } .statistic-section .statistic-box .statistic-post { padding: 35px 0; float: left; width: 25%; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.4); border-left: none; text-align: center; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .statistic-section .statistic-box .statistic-post i { color: #BA0511; font-size: 34px; margin-bottom: 20px; } .statistic-section .statistic-box .statistic-post p { font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; margin: 0; color: #222222; font-size: 15px; font-weight: 600; } .statistic-section .statistic-box .statistic-post p span.timer { display: inline-block; color: #ffffff; font-size: 36px; font-weight: 600; margin-bottom: 12px; } .statistic-section .statistic-box .statistic-post:first-child { border-left: 1px solid rgba(255, 255, 255, 0.4); } .statistic-section .statistic-box .statistic-post:hover { background: rgba(255, 255, 255, 0.5); } .statistic-section:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: rgba(37, 37, 37, 0.5); } .testimonial-section { padding: 64px 0 50px; text-align: center; } .testimonial-section ul { margin: 0; padding: 0; } .testimonial-section ul li { list-style: none; } .testimonial-section ul li img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; margin-bottom: 35px; display: inline-block; } .testimonial-section ul li p { max-width: 790px; margin: 0 auto 5px; } .testimonial-section ul li span { display: inline-block; font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; color: #BA0511; margin-bottom: 5px; } .testimonial-section .bx-wrapper .bx-controls-direction { display: none; } .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active { background: #BA0511; border: 1px solid #BA0511; } .bx-wrapper .bx-controls-direction a { border: 1px solid #BA0511; } .bx-wrapper .bx-controls-direction a:hover { background: #BA0511; } .bx-wrapper .bx-prev:after { color: #BA0511; } .bx-wrapper .bx-next:after { color: #BA0511; } .bx-wrapper .bx-prev:hover:after { color: #ffffff; } .bx-wrapper .bx-next:hover:after { color: #ffffff; } .feature-section { padding: 70px 0 0; background: url('../images/pattern1.jpg'); overflow: hidden; } .feature-section .feature-post { margin-bottom: 60px; position: relative; -webkit-transform: translate3d(0, 200%, 0); -moz-transform: translate3d(0, 200%, 0); -o-transform: translate3d(0, 200%, 0); transform: translate3d(0, 200%, 0); opacity: 0; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } .feature-section .feature-post a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; float: left; width: 50px; height: 50px; background: #BA0511; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; position: relative; text-align: center; margin-left: 5px; } .feature-section .feature-post a i { color: #ffffff; font-size: 20px; line-height: 50px; } .feature-section .feature-post a:before { content: ''; position: absolute; width: 60px; height: 60px; border: 3px solid #BA0511; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; top: -5px; left: -5px; } .feature-section .feature-post .feature-post-content { margin-left: 80px; } .feature-section .feature-post .feature-post-content h2 { color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; } .feature-section .feature-post .feature-post-content p { margin: 0; } .feature-section .feature-image { text-align: right; } .feature-section .feature-image img { max-width: 100%; } .feature-section .feature-box.active .feature-post { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } .team-post { position: relative; } .team-post img { width: 100%; } .team-post .hover-team { position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; text-align: center; } .team-post .hover-team .inner-team { position: absolute; top: 50%; margin-top: -60px; left: 0; width: 100%; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; opacity: 0; } .team-post .hover-team .inner-team ul.team-social { margin: 0; padding: 0; margin-bottom: 16px; } .team-post .hover-team .inner-team ul.team-social li { display: inline-block; } .team-post .hover-team .inner-team ul.team-social li a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; width: 32px; height: 32px; border: 1px solid transparent; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .team-post .hover-team .inner-team ul.team-social li a i { color: #ffffff; font-size: 18px; line-height: 30px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .team-post .hover-team .inner-team ul.team-social li a:hover { border: 1px solid #BA0511; } .team-post .hover-team .inner-team ul.team-social li a:hover i { color: #BA0511; } .team-post .hover-team .inner-team h2 { color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; color: #ffffff; margin: 0 0 3px; } .team-post .hover-team .inner-team span { color: #BA0511; font-size: 13px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; margin: 0; display: inline-block; } .team-post:hover { cursor: move; } .team-post:hover .hover-team { background: rgba(34, 34, 34, 0.7); } .team-post:hover .hover-team .inner-team { opacity: 1; } .client-section { padding: 40px 0 65px; } .client-section .client-box ul { margin: 0; padding: 0; overflow: hidden; } .client-section .client-box ul li { float: left; list-style: none; width: 25%; } .client-section .client-box ul li a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; max-width: 100%; border: 1px solid transparent; } .client-section .client-box ul li a img { max-width: 100%; } .client-section .client-box ul li a:hover { border: 1px solid #cccccc; } .line-banner-section { padding: 36px 0; background: #BA0511; text-align: center; } .line-banner-section p { margin: 0; color: #ffffff; font-size: 15px; font-weight: 600; } .line-banner-section p span { display: inline-block; margin-right: 16px; } .line-banner-section p a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; color: #ffffff; font-size: 13px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; -webkit-font-smoothing: antialiased; padding: 10px; width: 160px; text-align: center; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; border: 2px solid #ffffff; } .line-banner-section p a:hover { background: #ffffff; color: #BA0511; } /*-------------------------------------------------*/ /* = Home 2 /*-------------------------------------------------*/ .feature-section2 { padding: 60px 0; background: url('../images/4.jpg') center fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; position: relative; } .feature-section2 .title-section h1 { color: #ffffff; } .feature-section2 .title-section p { color: #f3f3f3; } .feature-section2 .feature-post { margin-bottom: 55px; position: relative; } .feature-section2 .feature-post a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; float: left; width: 60px; height: 60px; border: 2px solid #ffffff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; position: relative; text-align: center; margin-left: 5px; } .feature-section2 .feature-post a i { color: #ffffff; font-size: 24px; line-height: 56px; } .feature-section2 .feature-post .feature-post-content { margin-left: 80px; } .feature-section2 .feature-post .feature-post-content h2 { color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; color: #BA0511; text-transform: uppercase; } .feature-section2 .feature-post .feature-post-content p { margin: 0; color: #ffffff; } .feature-section2:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: rgba(34, 34, 34, 0.6); } .portfolio-container.three-col { width: 1170px; margin-left: -15px; } .portfolio-container.three-col .project-post { width: 360px; margin: 15px; } .portfolio-container.three-col .project-post .project-gal { position: relative; } .portfolio-container.three-col .project-post .inner-project > .caption { background: #f3f3f3; padding: 16px 20px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .portfolio-container.three-col .project-post .inner-project > .caption h2 { color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; font-weight: 600; font-size: 13px; text-transform: uppercase; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; margin: 0 0 3px; } .portfolio-container.three-col .project-post .inner-project > .caption span { display: inline-block; font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; color: #666666; margin: 0; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .portfolio-container.three-col .project-post:hover .inner-project > .caption { background: #BA0511; } .portfolio-container.three-col .project-post:hover .inner-project > .caption span { color: #333333; } .recent-posts-section { padding: 55px 0; background: #333333; } .recent-posts-section .title-section h1 { color: #ffffff; } .recent-posts-section .title-section h1:after { background: #ffffff; } .recent-posts-section .blog-post { text-align: center; } .recent-posts-section .blog-post .blog-gal { position: relative; border: 1px solid #444444; border-bottom: none; border-left: none; } .recent-posts-section .blog-post .blog-gal img { width: 100%; } .recent-posts-section .blog-post .blog-gal:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: rgba(51, 51, 51, 0.8); opacity: 0; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .recent-posts-section .blog-post .blog-title { padding: 20px; border: 1px solid #444444; border-top: none; border-left: none; margin-bottom: 10px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .recent-posts-section .blog-post .blog-title h2 { color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; margin: 0 0 3px; } .recent-posts-section .blog-post .blog-title h2 a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; color: #ffffff; } .recent-posts-section .blog-post .blog-title h2 a:hover { text-decoration: underline; } .recent-posts-section .blog-post .blog-title span { color: #BA0511; display: inline-block; font-size: 14px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; margin: 0; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .recent-posts-section .blog-post p { padding: 0 25px; } .recent-posts-section .blog-post:hover { cursor: move; } .recent-posts-section .blog-post:hover .blog-gal:after { opacity: 1; } .recent-posts-section .blog-post:hover .blog-title { background: #BA0511; } .recent-posts-section .blog-post:hover .blog-title span { color: #333333; } /*-------------------------------------------------*/ /* = Home 3 /*-------------------------------------------------*/ #slider .tp-caption.medium_thin_grey a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; margin: 0; font-weight: 600; text-transform: uppercase; color: #ffffff; padding: 0.6em 2.4em; border: 2px solid #ffffff; } #slider .tp-caption.medium_thin_grey a:hover { background: #ffffff; color: #222222; } ul.section-navigate-list { margin: 0; padding: 0; position: fixed; z-index: 99999; right: 30px; top: 50%; margin-top: -55px; } ul.section-navigate-list li { list-style: none; } ul.section-navigate-list li a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; width: 10px; height: 10px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; border: 1px solid #cecece; } ul.section-navigate-list li a.active, ul.section-navigate-list li a:hover { border: 1px solid #BA0511; background: #BA0511; } .services-alt-section { background: url('../images/3.jpg') center fixed no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; position: relative; overflow: hidden; } .services-alt-section .services-box { position: relative; z-index: 2; overflow: hidden; } .services-alt-section .services-box .services-post { width: 20%; float: left; padding-top: 100px; min-height: 270px; text-align: center; padding-bottom: 0; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .services-alt-section .services-box .services-post a { background: transparent; width: auto; height: auto; border: none; } .services-alt-section .services-box .services-post a i { line-height: 40px; } .services-alt-section .services-box .services-post p { transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; opacity: 0; visibility: hidden; margin-bottom: -100px; padding: 20px 5px 0; margin-top: 20px; position: relative; } .services-alt-section .services-box .services-post a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; margin-bottom: 20px; } .services-alt-section .services-box .services-post a i { font-size: 36px; color: #ffffff; } .services-alt-section .services-box .services-post h2 { color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; color: #ffffff; font-size: 18px; max-width: 140px; margin: 0 auto; font-weight: 600; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .services-alt-section .services-box .services-post h2:after { display: none; } .services-alt-section .services-box .services-post.blue-back { background: #738dac; } .services-alt-section .services-box .services-post.green-back { background: #BA0511; } .services-alt-section .services-box .services-post.red-back { background: #e26a6a; } .services-alt-section .services-box .services-post.pink-back { background: #ae6ba7; } .services-alt-section .services-box .services-post.orange-back { background: #eb974e; } .services-alt-section .services-box .services-post:hover { background: #ffffff !important; } .services-alt-section .services-box .services-post:hover h2 { color: #222222; margin-top: -90px; } .services-alt-section .services-box .services-post:hover p { opacity: 1; visibility: visible; margin-bottom: 0; } .services-alt-section .services-box .services-post:hover a { opacity: 0; visibility: hidden; } .services-alt-section .services-ban { position: relative; z-index: 2; padding: 120px 0 100px; } .services-alt-section .services-ban h1 { color: #222222; font-size: 20px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 30px; font-weight: 600; color: #ffffff; font-size: 36px; max-width: 570px; margin-bottom: 15px; } .services-alt-section .services-ban p { color: #ffffff; max-width: 570px; margin-bottom: 30px; } .services-alt-section .services-ban a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; color: #ffffff; font-size: 15px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; padding: 10px; width: 160px; text-align: center; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; border: 1px solid #ffffff; } .services-alt-section .services-ban a:hover { background: #ffffff; color: #BA0511; } .services-alt-section:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(34, 34, 34, 0.6); } .feature-section3 { padding: 90px 0 40px; } .feature-section3 .feature-post { margin-bottom: 40px; position: relative; } .feature-section3 .feature-post a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; float: left; width: 60px; height: 60px; background: #BA0511; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; position: relative; text-align: center; } .feature-section3 .feature-post a i { color: #ffffff; font-size: 24px; line-height: 56px; } .feature-section3 .feature-post .feature-post-content { margin-left: 80px; } .feature-section3 .feature-post .feature-post-content h2 { color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; } .feature-section3 .feature-post .feature-post-content p { margin: 0; } .statistic-section.second-style .statistic-box .statistic-post { background: #f7f7f7; border: 1px solid transparent; border-left: 1px solid #676365; } .statistic-section.second-style .statistic-box .statistic-post i { color: #BA0511; font-size: 34px; margin-bottom: 20px; } .statistic-section.second-style .statistic-box .statistic-post p { font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; } .statistic-section.second-style .statistic-box .statistic-post p span.timer { color: #222222; } .statistic-section.second-style .statistic-box .statistic-post:first-child { border-left: 1px solid transparent; } .statistic-section.second-style .statistic-box .statistic-post:hover { background: #f7f7f7; } .feature-section4 { overflow: hidden; } .feature-section4 .feature-box { width: 50%; float: left; background: #333333; padding-top: 124px; padding-bottom: 130px; overflow: hidden; border-bottom: 1px solid #414141; } .feature-section4 .feature-box .inner-feature-box { max-width: 630px; float: right; padding-right: 85px; } .feature-section4 .feature-box .inner-feature-box h1 { color: #222222; font-size: 20px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 30px; font-size: 36px; margin-bottom: 18px; color: #ffffff; } .feature-section4 .feature-box .inner-feature-box p { margin-bottom: 44px; } .feature-section4 .feature-box .inner-feature-box ul { margin: 0; padding: 0; } .feature-section4 .feature-box .inner-feature-box ul li { list-style: none; margin-bottom: 17px; } .feature-section4 .feature-box .inner-feature-box ul li i { color: #ffffff; font-size: 16px; margin-right: 15px; } .feature-section4 .feature-box .inner-feature-box ul li span { color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; margin: 0; color: #ffffff; display: inline-block; } .feature-section4 .feature-image { background: url('../images/banner-alt.jpg') center fixed no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; position: relative; padding-top: 74px; width: 50%; float: right; } .feature-section4 .feature-image img { max-width: 100%; position: relative; z-index: 2; margin-left: -30px; } .feature-section4 .feature-image:after { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: rgba(51, 51, 51, 0.7); } .testimonial-section2 { padding-top: 90px; background: #333333; } .testimonial-section2 .title-section h1 { color: #ffffff; text-transform: uppercase; } .testimonial-section2 .testimonial-box { overflow: hidden; } .testimonial-section2 .testimonial-box .testimonial-post { padding: 40px 70px 70px; border: 1px solid #666666; border-left: none; text-align: center; width: 25%; float: left; } .testimonial-section2 .testimonial-box .testimonial-post img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; margin-bottom: 30px; } .testimonial-section2 .testimonial-box .testimonial-post p { margin: 0 0 5px; } .testimonial-section2 .testimonial-box .testimonial-post span { font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; display: inline-block; margin: 0; color: #BA0511; } /*-------------------------------------------------*/ /* = Home corporate /*-------------------------------------------------*/ #slider.slider2 .tp-caption.large_bold_white { line-height: 40px; } #slider.slider2 .tp-caption.medium_thin_grey { font-size: 13px; color: #ffffff; line-height: 20px; text-transform: inherit; } #slider.slider2 .tp-bannertimer { display: none; } #slider.slider2 .slotholder:after { display: none; } #slider.slider2 .tp-leftarrow:hover, #slider.slider2 .tp-rightarrow:hover { background-position: top left; opacity: 0.7; } .text-banner-section.white-back { background: #fff; } .services-section3 { padding-top: 0; position: relative; } .services-section3 .services-box { position: relative; z-index: 2; margin-bottom: 0px; background: transparent; } .services-section3 .services-box .services-post { width: 100%; text-align: center; margin-bottom: 30px; } .services-section3 .services-box .services-post .inner-service-post { padding: 0; background: transparent; } .services-section3 .services-box .services-post .inner-service-post a { margin-top: 0; background: transparent; position: relative; border: 2px solid #222222; } .services-section3 .services-box .services-post .inner-service-post a i { color: #222222; } .services-section3 .services-box .services-post .inner-service-post a:after { content: ''; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; border: 2px solid transparent; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .services-section3 .services-box .services-post .inner-service-post h2 { color: #222222; } .services-section3 .services-box .services-post .inner-service-post p { color: #222222; } .services-section3 .services-box .services-post:hover .inner-service-post a { border: 2px solid #BA0511; background: #BA0511; } .services-section3 .services-box .services-post:hover .inner-service-post a:after { border: 2px solid #f7f7f7; } .text-banner-section2 { text-align: center; padding: 75px 0; position: relative; background: url('../images/1.jpg') fixed center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .text-banner-section2 h1 { color: #222222; font-size: 20px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 30px; margin-bottom: 25px; text-transform: uppercase; color: #ffffff; } .text-banner-section2 p { color: #cccccc; } .text-banner-section2:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(34, 34, 34, 0.8); } .portfolio-section.carousel-projects { padding-top: 80px; background: #333333; } .portfolio-section.carousel-projects .title-section h1 { color: #ffffff; } .portfolio-section.carousel-projects .title-section h1:after { background: #ffffff; } .portfolio-section.carousel-projects .portfolio-container { position: relative; } .portfolio-section.carousel-projects .portfolio-container #owl-demo4 .project-post { width: 100%; } .portfolio-section.carousel-projects .owl-controls { background: #ffffff; margin: -1px 0 0; padding: 10px 0; min-height: 50px; } .portfolio-section.carousel-projects .owl-controls .owl-pagination { display: none; } .portfolio-section.carousel-projects .owl-controls .owl-buttons { display: inline-block; } .portfolio-section.carousel-projects .owl-theme .owl-controls .owl-buttons div { display: inline-block; width: 40px; height: 40px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; border: 1px solid transparent; text-align: center; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; padding: 0; background: transparent; margin: 0 20px; } .portfolio-section.carousel-projects .owl-theme .owl-controls .owl-buttons div.owl-prev:before { content: '\f053'; font-family: 'FontAwesome'; font-size: 12px; color: #222222; line-height: 40px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .portfolio-section.carousel-projects .owl-theme .owl-controls .owl-buttons div.owl-next:before { content: '\f054'; font-family: 'FontAwesome'; font-size: 12px; color: #222222; line-height: 40px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .portfolio-section.carousel-projects .owl-theme .owl-controls .owl-buttons div:hover { border: 1px solid #BA0511; } .portfolio-section.carousel-projects .owl-theme .owl-controls .owl-buttons div.owl-prev:hover:before { color: #BA0511; } .portfolio-section.carousel-projects .owl-theme .owl-controls .owl-buttons div.owl-next:hover:before { color: #BA0511; } .portfolio-section.carousel-projects .show-all { position: absolute; width: 40px; left: 50%; margin-left: -20px; bottom: 10px; text-align: center; } .portfolio-section.carousel-projects .show-all a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; width: 40px; height: 40px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; border: 1px solid transparent; text-align: center; } .portfolio-section.carousel-projects .show-all a i { font-size: 12px; color: #cccccc; line-height: 40px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .portfolio-section.carousel-projects .show-all a:hover { border: 1px solid #BA0511; } .portfolio-section.carousel-projects .show-all a:hover i { color: #BA0511; } .team-section2.no-padd { padding: 60px 0; background: #ffffff; } .team-section2.no-padd .team-post { padding: 0; padding-left: 1px; } .testimonial-section3 { padding: 70px 0; background: #f8f8f8; } .testimonial-section3 .testimonial-box { text-align: center; } .testimonial-section3 .testimonial-box .testimonial-post { margin-bottom: 30px; padding: 0 10px; } .testimonial-section3 .testimonial-box .testimonial-post img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; margin-bottom: 30px; } .testimonial-section3 .testimonial-box .testimonial-post p { margin-bottom: 10px; } .testimonial-section3 .testimonial-box .testimonial-post span { font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; display: inline-block; color: #BA0511; margin: 0; } .testimonial-section3 .testimonial-box .testimonial-post:hover { cursor: move; } .pricing-section { position: relative; padding: 80px 0; background: url('../images/6.jpg') center fixed no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .pricing-section .pricing-table { padding: 25px; text-align: center; border: 1px solid transparent; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .pricing-section .pricing-table ul { margin: 0; padding: 0; } .pricing-section .pricing-table ul li { list-style: none; margin-bottom: 10px; } .pricing-section .pricing-table ul li h2 { color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; text-transform: uppercase; color: #ffffff; font-size: 18px; margin-bottom: 20px; } .pricing-section .pricing-table ul li p { margin: 0; font-weight: 600; color: #ffffff; } .pricing-section .pricing-table ul li a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; font-size: 15px; color: #ffffff; text-transform: uppercase; font-weight: 600; padding: 8px 50px; border: 2px solid #ffffff; margin: 20px 0 0; } .pricing-section .pricing-table ul li a:hover { background: #ffffff; color: #222222; } .pricing-section .pricing-table ul li.monthly-price p { width: 163px; height: 143px; border: 2px solid #ffffff; margin: 0 auto 15px; padding-top: 30px; font-size: 14px; font-weight: 700; text-transform: uppercase; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .pricing-section .pricing-table ul li.monthly-price p span { display: block; font-size: 48px; font-weight: 600; margin-bottom: 6px; line-height: 50px; } .pricing-section .pricing-table:hover { border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.1); } .pricing-section .pricing-table:hover ul li.monthly-price p { background: #ffffff; color: #222222; } .pricing-section:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(34, 34, 34, 0.8); } .feature-section4.second-style { overflow: hidden; } .feature-section4.second-style .feature-box { padding-top: 75px; padding-bottom: 93px; } .feature-section4.second-style .feature-box .inner-feature-box { width: 470px; float: right; padding-right: 100px; } .feature-section4.second-style .feature-box .inner-feature-box h1 { font-size: 18px; margin-bottom: 30px; } .feature-section4.second-style .feature-box .inner-feature-box p { margin-bottom: 32px; max-width: 295px; } .feature-section4.second-style .feature-box .inner-feature-box ul li i { font-size: 15px; } .feature-section4.second-style .feature-image { background: url('../images/banner-alt2.jpg') center fixed no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; padding-top: 50px; } .feature-section4.second-style .feature-image img { max-width: 100%; position: relative; z-index: 2; margin-left: -90px; } .history-timeline ul.timeline-list { margin: 0; padding: 0; position: relative; padding-right: 30px; max-height: 360px; overflow-y: scroll; } .history-timeline ul.timeline-list li { list-style: none; overflow: hidden; margin-bottom: 20px; position: relative; z-index: 2; } .history-timeline ul.timeline-list li p.date { float: left; width: 60px; height: 60px; text-align: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background: #BA0511; margin: 0; color: #ffffff; font-size: 12px; padding-top: 12px; } .history-timeline ul.timeline-list li p.date span { font-size: 20px; font-weight: 600; display: block; margin: 0; } .history-timeline ul.timeline-list li div.history-content { margin-left: 80px; background: #f7f7f7; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; padding: 8px 20px; position: relative; } .history-timeline ul.timeline-list li div.history-content h3 { font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; color: #222222; margin-bottom: 0; font-weight: 600; } .history-timeline ul.timeline-list li div.history-content p { margin-bottom: 0; } .history-timeline ul.timeline-list li div.history-content:before { content: ''; position: absolute; width: 0; height: 0; top: 13px; left: -10px; border: 5px solid #f7f7f7; border-top-color: transparent; border-left-color: transparent; border-bottom-color: transparent; } .history-timeline ul.timeline-list:before { content: ''; position: absolute; top: 0; left: 27px; width: 6px; height: 100%; background: #f7f7f7; } .history-timeline ::-webkit-scrollbar { width: 6px; height: 6px; } .history-timeline ::-webkit-scrollbar-track { background: #f7f7f7; } .history-timeline ::-webkit-scrollbar-thumb { background: #cccccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } /*-------------------------------------------------*/ /* = Home light boxed /*-------------------------------------------------*/ .light-boxed { background: url('../images/back-patt.png'); } .light-boxed .portfolio-section { background: #fff; } .light-boxed .portfolio-section .project-post { width: 33.3%; } .light-boxed .portfolio-section .show-more { padding: 30px 0; background: #BA0511; text-align: center; } .light-boxed .portfolio-section .show-more a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; color: #ffffff; font-weight: 300; -webkit-font-smoothing: antialiased; margin: 0; } .light-boxed .portfolio-section .show-more a:hover { color: #777777; } .light-boxed #container { max-width: 1200px; padding-top: 70px; margin: 0 auto; } .light-boxed #container #slider { width: 100%; overflow: hidden; } .statistic-section3 { padding: 50px 0 30px; } .statistic-section3 .statistic-post { text-align: center; padding: 45px 15px 52px; border: 2px solid #BA0511; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; max-width: 220px; margin: 0 auto 20px; } .statistic-section3 .statistic-post i { font-size: 34px; margin-bottom: 30px; display: inline-block; color: #BA0511; } .statistic-section3 .statistic-post p { font-size: 15px; margin-bottom: 0; font-weight: 600; text-transform: uppercase; } .statistic-section3 .statistic-post p span { display: inline-block; font-size: 36px; margin-bottom: 15px; color: #222222; } .blog-section.latest-blog { padding-bottom: 0; background: #fff; } .blog-section.latest-blog .blog-box.medium .blog-post .blog-content .blog-title span { color: #BA0511; } .blog-section.latest-blog .blog-box.medium .blog-post .blog-content { padding: 40px; min-height: 200px !important; background: transparent !important; } .blog-section.latest-blog .blog-box .blog-post .blog-title h2 { text-transform: inherit; } .blog-section.latest-blog .blog-post { margin-bottom: 0 !important; } .blog-section.latest-blog .blog-post .blog-gal img { transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .blog-section.latest-blog .blog-post iframe { height: 260px !important; } .blog-section.latest-blog .blog-post:hover .blog-gal img { opacity: 0.6; } .blog-section.latest-blog .show-more { padding: 25px 0; background: #BA0511; } .blog-section.latest-blog .show-more a { color: #ffffff; } .blog-section.latest-blog .show-more a:hover { color: #777777; } .feature-alt-section { padding: 67px 0 0; } .feature-alt-section .title-section a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; font-weight: 300; margin: 30px 10px 0; width: 160px; text-align: center; padding: 10px; text-transform: uppercase; font-weight: 600; border: 2px solid #777777; } .feature-alt-section .title-section a:hover { border: 2px solid #BA0511; color: #BA0511; } .feature-alt-section .main-image { text-align: center; } .feature-alt-section .main-image img { max-width: 100%; } .feature-alt-section .features-box { padding: 50px 0 20px; } .feature-alt-section .features-box .feature-post { margin-bottom: 40px; position: relative; } .feature-alt-section .features-box .feature-post a { display: inline-block; text-decoration: none; float: left; width: 60px; height: 60px; border: 2px solid #BA0511; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; position: relative; text-align: center; } .feature-alt-section .features-box .feature-post a i { color: #BA0511; font-size: 24px; line-height: 56px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .feature-alt-section .features-box .feature-post .feature-post-content { margin-left: 80px; } .feature-alt-section .features-box .feature-post .feature-post-content h2 { color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; } .feature-alt-section .features-box .feature-post .feature-post-content p { margin: 0; } .feature-alt-section .features-box .feature-post:hover a { background: #BA0511; } .feature-alt-section .features-box .feature-post:hover a i { color: #ffffff; } /*-------------------------------------------------*/ /* = Home dark boxed /*-------------------------------------------------*/ .dark-boxed { background: #333333; } .dark-boxed .portfolio-section { background: #fff; } .dark-boxed .portfolio-section .project-post { width: 33.3%; } .dark-boxed .portfolio-section .show-more { padding: 30px 0; background: #BA0511; text-align: center; } .dark-boxed .portfolio-section .show-more a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; color: #ffffff; font-weight: 300; -webkit-font-smoothing: antialiased; margin: 0; } .dark-boxed .portfolio-section .show-more a:hover { color: #777777; } .dark-boxed .text-banner-section { background: transparent; } .dark-boxed .text-banner-section h1 { color: #ffffff; } .dark-boxed .feature-alt-section .title-section h1 { color: #ffffff; } .dark-boxed .feature-alt-section .features-box { padding: 50px 0 20px; background: #f7f7f7; } .dark-boxed .statistic-section3 .statistic-post p span { color: #ffffff; } .dark-boxed #container { max-width: 1200px; margin: 0 auto; padding-top: 0; } .dark-boxed #container #slider { width: 100%; overflow: hidden; } /*-------------------------------------------------*/ /* = Home dark /*-------------------------------------------------*/ .dark-style { background: #333333; } .dark-style .title-section h1 { color: #ffffff; } .dark-style .title-section h1:after { background: #ffffff; } .dark-style .portfolio-container.three-col .project-post .inner-project > .caption { background: #383838; } .dark-style .portfolio-container.three-col .project-post .inner-project > .caption h2 { color: #ffffff; } .dark-style .portfolio-container.three-col .project-post:hover .inner-project > .caption { background: #BA0511; } .dark-style .portfolio-container.three-col .project-post:hover .inner-project > .caption span { color: #333333; } .services-section.services-dark .services-box { background: #333333 !important; } .services-section.services-dark .services-box .services-post { transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .services-section.services-dark .services-box .services-post a { border: 1px solid #656565; background: transparent; } .services-section.services-dark .services-box .services-post a i { color: #656565; } .services-section.services-dark .services-box .services-post h2 { color: #BA0511; } .services-section.services-dark .services-box .services-post h2:after { background: #777777; } .services-section.services-dark .services-box .services-post:hover a { background: #BA0511; border: 1px solid #BA0511; } .services-section.services-dark .services-box .services-post:hover a i { color: #ffffff; } .services-section.services-dark .services-box .services-post:hover h2, .services-section.services-dark .services-box .services-post:hover p { color: #ffffff; } .dark-style .portfolio-section { background: #333333; } .dark-style .portfolio-section .show-more { background: transparent; } .dark-style .portfolio-section .show-more a { width: 160px; text-align: center; padding: 10px; color: #ffffff; text-transform: uppercase; font-weight: 600; border: 2px solid #ffffff; } .dark-style .portfolio-section .show-more a:hover { color: #BA0511; border: 2px solid #BA0511; } .dark-style .testimonial-section { background: url('../images/5.jpg') center fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; position: relative; } .dark-style .testimonial-section .title-section h1 { color: #BA0511; } .dark-style .testimonial-section p { color: #cccccc; } .dark-style .testimonial-section:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: rgba(51, 51, 51, 0.7); } .container { position: relative; z-index: 2; } /*-------------------------------------------------*/ /* = blog large, blog medium /*-------------------------------------------------*/ .page-banner-section.blog-banner1 { background: url('../images/title-banner4.jpg') center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .page-banner-section.blog-banner2 { background: url('../images/title-banner5.jpg') center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .blog-section { padding: 75px 0 60px; } .blog-section .blog-box { max-width: 780px; margin: 0 auto; } .blog-section .blog-box .blog-post { text-align: center; margin-bottom: 50px; } .blog-section .blog-box .blog-post img { width: 100%; } .blog-section .blog-box .blog-post iframe { width: 100%; height: 400px; margin-bottom: -5px; } .blog-section .blog-box .blog-post .blog-title { margin-bottom: 30px; } .blog-section .blog-box .blog-post .blog-title h2 { color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; text-transform: uppercase; font-size: 18px; margin: 0 0 6px; } .blog-section .blog-box .blog-post .blog-title h2 a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; color: #222222; } .blog-section .blog-box .blog-post .blog-title h2 a:hover { color: #BA0511; } .blog-section .blog-box .blog-post .blog-title ul.blog-tags { margin: 0; padding: 0; } .blog-section .blog-box .blog-post .blog-title ul.blog-tags li { display: inline-block; font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; font-size: 12px; margin: 0 5px 5px 0; } .blog-section .blog-box .blog-post .blog-title ul.blog-tags li a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; color: #777777; } .blog-section .blog-box .blog-post .blog-title ul.blog-tags li a:hover { color: #BA0511; } .blog-section .blog-box .blog-post .blog-title ul.blog-tags li:before { content: '/'; font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; font-size: 12px; margin: 0 7px 0 0; } .blog-section .blog-box .blog-post .blog-title ul.blog-tags li:first-child:before { content: ''; margin: 0; } .blog-section .blog-box .blog-post .blog-content { padding: 35px 55px 40px; background: #f7f7f7; border-bottom: 1px solid #f7f7f7; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .blog-section .blog-box .blog-post .blog-content p { margin: 0 0 30px; } .blog-section .blog-box .blog-post .blog-content > a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; padding: 7px 17px; color: #222222; font-size: 13px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; text-transform: uppercase; font-weight: 600; border: 2px solid #222222; } .blog-section .blog-box .blog-post .blog-content > a:hover { background: #222222; color: #ffffff; } .blog-section .blog-box .blog-post:hover .blog-content { background: transparent; } .blog-section .show-more { text-align: center; } .blog-section .show-more a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; padding: 10px 47px; color: #BA0511; font-size: 13px; text-transform: uppercase; font-weight: 600; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; border: 2px solid #BA0511; } .blog-section .show-more a:hover { background: #BA0511; color: #ffffff; } .blog-section .blog-box.medium { width: 100%; max-width: 100%; } .blog-section .blog-box.medium .blog-post { text-align: left; overflow: hidden; background: #f7f7f7; } .blog-section .blog-box.medium .blog-post .blog-gal { width: 50%; float: left; } .blog-section .blog-box.medium .blog-post .blog-gal iframe { height: 390px; } .blog-section .blog-box.medium .blog-post .blog-content { width: 50%; float: right; border-bottom: none; padding: 26px 30px; min-height: 390px; } .blog-section .blog-box.medium .blog-post .blog-content .blog-title span { display: inline-block; font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; color: #222222; margin: 0 0 10px; font-size: 12px; font-weight: 300; } .blog-section .blog-box.medium .blog-post:nth-child(2n) .blog-gal { float: right; } .blog-section .blog-box.medium .blog-post:nth-child(2n) .blog-content { float: left; } .flex-control-paging li a.flex-active { background: #BA0511; border: 1px solid #BA0511; } /*-------------------------------------------------*/ /* = blog with sidebar /*-------------------------------------------------*/ .blog-section .blog-with-sidebar .blog-box { max-width: 100%; } .blog-section .blog-with-sidebar .blog-box .blog-post { text-align: left; } .blog-section .blog-with-sidebar .blog-box .blog-post .blog-content { padding: 30px 40px 40px; } .blog-section .blog-with-sidebar .sidebar .widget { margin-bottom: 40px; } .blog-section .blog-with-sidebar .sidebar .widget h2 { color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; font-size: 14px; margin-bottom: 40px; text-transform: uppercase; } .blog-section .blog-with-sidebar .sidebar .search-widget form { margin: 0; } .blog-section .blog-with-sidebar .sidebar .search-widget input[type="search"] { width: 100%; display: inline-block; padding: 12px 10px; background: #ffffff; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; color: #cccccc; font-size: 13px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; border: 1px solid #cccccc; outline: none; margin: 0; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .blog-section .blog-with-sidebar .sidebar .search-widget input[type="search"]:focus { border: 1px solid #BA0511; } .blog-section .blog-with-sidebar .sidebar .category-widget ul { margin: 0; padding: 0; } .blog-section .blog-with-sidebar .sidebar .category-widget ul li { list-style: none; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dotted #cccccc; } .blog-section .blog-with-sidebar .sidebar .category-widget ul li a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; color: #777777; font-size: 11px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 300; text-transform: uppercase; padding-left: 20px; position: relative; } .blog-section .blog-with-sidebar .sidebar .category-widget ul li a:after { transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; content: ''; position: absolute; left: 0; top: 3px; width: 10px; height: 10px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; border: 3px solid #f7f7f7; background: #BA0511; } .blog-section .blog-with-sidebar .sidebar .category-widget ul li a:hover { color: #BA0511; } .blog-section .blog-with-sidebar .sidebar .category-widget ul li a:hover:after { background: #ffffff; border: 3px solid #BA0511; } .blog-section .blog-with-sidebar .sidebar .category-widget ul li:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .blog-section .blog-with-sidebar .sidebar .popular-widget ul { margin: 0; padding: 0; } .blog-section .blog-with-sidebar .sidebar .popular-widget ul li { list-style: none; overflow: hidden; margin-bottom: 40px; } .blog-section .blog-with-sidebar .sidebar .popular-widget ul li img { float: left; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .blog-section .blog-with-sidebar .sidebar .popular-widget ul li .side-content { margin-left: 80px; } .blog-section .blog-with-sidebar .sidebar .popular-widget ul li .side-content h2 { color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; text-transform: uppercase; margin: 0; font-size: 11px; line-height: 20px; font-weight: 300; } .blog-section .blog-with-sidebar .sidebar .popular-widget ul li .side-content h2 a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; color: #222222; } .blog-section .blog-with-sidebar .sidebar .popular-widget ul li .side-content h2 a:hover { color: #BA0511; } .blog-section .blog-with-sidebar .sidebar .popular-widget ul li .side-content p { color: #a9a9a9; font-size: 12px; margin: 0; } .blog-section .blog-with-sidebar .sidebar .tags-widget ul { margin: 0; padding: 0; } .blog-section .blog-with-sidebar .sidebar .tags-widget ul li { display: inline-block; margin-bottom: 3px; } .blog-section .blog-with-sidebar .sidebar .tags-widget ul li a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; margin: 0; font-weight: 300; padding: 7px 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; border: 1px solid #dcdcdc; } .blog-section .blog-with-sidebar .sidebar .tags-widget ul li a:hover { color: #ffffff; background: #BA0511; border: 1px solid #BA0511; } /*-------------------------------------------------*/ /* = blog grid page /*-------------------------------------------------*/ .blog-section.fullwidth { padding-top: 0; } .blog-section.fullwidth .blog-box .blog-row { overflow: hidden; } .blog-section.fullwidth .blog-box .blog-row .blog-post { width: 50%; float: left; margin-bottom: 0; background: #f7f7f7; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .blog-section.fullwidth .blog-box .blog-row .blog-post .blog-gal { width: 50%; float: left; } .blog-section.fullwidth .blog-box .blog-row .blog-post .blog-content { width: 50%; float: right; } .blog-section.fullwidth .blog-box .blog-row .blog-post:hover { background: transparent; } .blog-section.fullwidth .blog-box .blog-row:nth-child(2n) .blog-post { width: 50%; float: left; } .blog-section.fullwidth .blog-box .blog-row:nth-child(2n) .blog-post .blog-gal { float: right; } .blog-section.fullwidth .blog-box .blog-row:nth-child(2n) .blog-post .blog-content { float: left; } .blog-section.fullwidth .show-more { margin-top: 40px; } /*-------------------------------------------------*/ /* = blog masonry /*-------------------------------------------------*/ .blog-section .blog-box.masonry { width: 1170px; max-width: 100%; margin: 0 auto 30px; } .blog-section .blog-box.masonry .blog-post { width: 380px; padding: 10px; text-align: left; margin: 0; } .blog-section .blog-box.masonry .blog-post .blog-gal iframe { height: 200px; } .blog-section .blog-box.masonry .blog-post .blog-content { padding: 16px 20px; border: 1px solid #f7f7f7; border-top: none; } .blog-section .blog-box.masonry .blog-post .blog-content .blog-title { margin-bottom: 25px; } .blog-section .blog-box.masonry .blog-post .blog-content .blog-title h2 { font-size: 14px; } .blog-section .blog-box.masonry .blog-post .blog-content .blog-title ul.blog-tags li { margin-bottom: 0; } .blog-section .blog-box.masonry .blog-post .blog-content p { margin-bottom: 16px; } .blog-section .blog-box.masonry .blog-post .blog-content div.comm-date { padding-top: 16px; border-top: 1px dotted #cccccc; } .blog-section .blog-box.masonry .blog-post .blog-content div.comm-date span { display: inline-block; font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; margin: 0 0 5px; font-size: 12px; font-weight: 300; } .blog-section .blog-box.masonry .blog-post .blog-content div.comm-date span i { font-size: 10px; margin-right: 8px; } .blog-section .blog-box.masonry .blog-post .blog-content div.comm-date span.comments-num { float: right; } .blog-section .blog-box.masonry .blog-post .blog-content div.comm-date span.comments-num a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; color: #777777; } .blog-section .blog-box.masonry .blog-post .blog-content div.comm-date span.comments-num a:hover { color: #BA0511; } .blog-section .blog-box.masonry .blog-post .blog-content blockquote { padding: 0; padding-left: 30px; margin: 0; border: none; margin-bottom: 25px; position: relative; } .blog-section .blog-box.masonry .blog-post .blog-content blockquote p { margin: 0 0 5px; color: #222222; font-size: 14px; font-weight: 600; font-style: italic; } .blog-section .blog-box.masonry .blog-post .blog-content blockquote span { font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; display: inline-block; font-weight: 300; margin: 0; } .blog-section .blog-box.masonry .blog-post .blog-content blockquote:before { position: absolute; top: 0; left: 0; content: '"'; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; color: #222222; font-size: 48px; font-weight: 600; font-style: italic; line-height: 40px; } .blog-section .blog-box.masonry.two-col { margin-bottom: 30px; } .blog-section .blog-box.masonry.two-col .blog-post { width: 570px; } /*-------------------------------------------------*/ /* = single post page /*-------------------------------------------------*/ .blog-post.single-post .single-post-content { background: #f7f7f7 !important; } .blog-post.single-post ul.single-post-tags { margin: 0; padding: 0; } .blog-post.single-post ul.single-post-tags li { display: inline-block; font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; color: #222222; font-weight: 300; margin: 0; } .blog-post.single-post ul.single-post-tags li span { font-weight: 600; } .blog-post.single-post ul.single-post-tags li a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; color: #222222; } .blog-post.single-post .autor-post { overflow: hidden; } .blog-post.single-post .autor-post img { float: left; width: auto; } .blog-post.single-post .autor-post .autor-content { margin-left: 150px; padding: 32px 20px; background: #333333; min-height: 150px; } .blog-post.single-post .autor-post .autor-content h3 { color: #ffffff; font-size: 14px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 600; text-transform: uppercase; margin: 0 0 10px; } .blog-post.single-post .autor-post .autor-content p { margin: 0; padding-left: 8px; } .blog-post.single-post .comment-section { padding: 35px 40px 0; } .blog-post.single-post .comment-section h3 { color: #222222; font-size: 14px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 600; text-transform: uppercase; padding-bottom: 35px; border-bottom: 1px dotted #cccccc; margin: 0 0 40px; } .blog-post.single-post .comment-section ul { margin: 0; padding: 0; } .blog-post.single-post .comment-section ul li { list-style: none; } .blog-post.single-post .comment-section ul li .comment-box { overflow: hidden; padding-bottom: 35px; border-bottom: 1px dotted #cccccc; margin-bottom: 40px; } .blog-post.single-post .comment-section ul li .comment-box img { width: auto; float: left; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; } .blog-post.single-post .comment-section ul li .comment-box .comment-content { margin-left: 100px; } .blog-post.single-post .comment-section ul li .comment-box .comment-content h4 { color: #222222; font-size: 14px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 600; text-transform: uppercase; margin: 0 0 4px; } .blog-post.single-post .comment-section ul li .comment-box .comment-content h4 a { color: #222222; display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; float: right; text-transform: lowercase; font-size: 13px; font-weight: 300; } .blog-post.single-post .comment-section ul li .comment-box .comment-content h4 a:hover { color: #BA0511; } .blog-post.single-post .comment-section ul li .comment-box .comment-content span { font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; display: inline-block; font-weight: 300; margin-bottom: 20px; } .blog-post.single-post .comment-section ul li .comment-box .comment-content p { margin: 0; } .blog-post.single-post .comment-section ul.depth .comment-box { padding-left: 100px; } .blog-post.single-post form.comment-form { padding: 0 40px 35px; } .blog-post.single-post form.comment-form h3 { color: #222222; font-size: 14px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 600; text-transform: uppercase; margin: 0 0 37px; } .blog-post.single-post form.comment-form input[type="text"], .blog-post.single-post form.comment-form textarea { width: 100%; display: block; padding: 12px 10px; background: #ffffff; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; color: #cccccc; font-size: 13px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; border: 1px solid #cccccc; outline: none; margin: 0 0 20px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .blog-post.single-post form.comment-form input[type="text"]:focus, .blog-post.single-post form.comment-form textarea:focus { border: 1px solid #BA0511; } .blog-post.single-post form.comment-form textarea { min-height: 122px; } .blog-post.single-post form.comment-form input[type="text"] { max-width: 360px; } .blog-post.single-post form.comment-form input[type="submit"] { display: inline-block; outline: none; padding: 10px 57px; color: #BA0511; font-size: 13px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; background: transparent; font-weight: 600; text-transform: uppercase; border: 2px solid #BA0511; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .blog-post.single-post form.comment-form input[type="submit"]:hover { background: #BA0511; color: #ffffff; } .blog-post.single-post form.comment-form .submit-area { text-align: center; } .blog-post.single-post form.comment-form .message { height: 30px; font-size: 13px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; } .blog-post.single-post form.comment-form .message.error { color: #e74c3c; } .blog-post.single-post form.comment-form .message.success { color: #BA0511; } /*-------------------------------------------------*/ /* = about us 1 /*-------------------------------------------------*/ .page-banner-section.about-banner { background: url('../images/title-banner7.jpg') center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .feature-section2.pattern-back { padding: 60px 0; background: #333333 repeat; background-size: initial !important; -webkit-background-size: initial !important; -moz-background-size: initial !important; -o-background-size: initial !important; position: relative; border-bottom: 5px solid #BA0511; } .feature-section2.pattern-back .title-section h1 { color: #ffffff; margin-bottom: 65px; } .feature-section2.pattern-back .title-section h1:after { background: #ffffff; } .feature-section2.pattern-back .feature-post { margin-bottom: 55px; position: relative; } .feature-section2.pattern-back .feature-post a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; float: left; width: 60px; height: 60px; border: none; background: #BA0511; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; position: relative; text-align: center; margin-left: 5px; } .feature-section2.pattern-back .feature-post a i { color: #ffffff; font-size: 24px; line-height: 56px; } .feature-section2.pattern-back .feature-post .feature-post-content { margin-left: 80px; } .feature-section2.pattern-back .feature-post .feature-post-content h2 { color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; color: #ffffff; } .feature-section2.pattern-back .feature-post .feature-post-content p { margin: 0; } .team-section .title2.white-back { background: #ffffff; } .team-section .title2.white-back h1 { color: #222222; } .skills-section { padding: 50px 0; } .skills-section .skills-box { text-align: center; } .skills-section .skills-box .circle-skill { margin-bottom: 10px; } .skills-section .skills-box p { color: #222222; margin: 0; } /*-------------------------------------------------*/ /* = About us 2 /*-------------------------------------------------*/ .horizontal-tabs-section2 .title-section { padding: 50px 0 100px; background: #f7f7f7; } .horizontal-tabs-section2 ul.nav-tabs { text-align: center; margin-top: -48px; border: none; } .horizontal-tabs-section2 ul.nav-tabs li { float: none; display: inline-block; border: none; margin-right: -2px; } .horizontal-tabs-section2 ul.nav-tabs li a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; padding: 15px 25px; background: #cccccc; -webkit-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; color: #ffffff; font-size: 13px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; text-transform: uppercase; border: none; margin: 0; } .horizontal-tabs-section2 ul.nav-tabs li a:hover { border: none; } .horizontal-tabs-section2 ul.nav-tabs li.active a { background: #ffffff; color: #222222; } .horizontal-tabs-section2 .tab-pane { padding: 25px 0 65px; } .horizontal-tabs-section2 .tab-pane .tab-data-content { padding: 0 55px; text-align: center; margin-bottom: 35px; } .horizontal-tabs-section2 .tab-pane .tab-data-content p { margin-bottom: 16px; } .horizontal-tabs-section2 .tab-pane .tab-data-content p span { font-weight: 600; color: #222222; } .horizontal-tabs-section2 .tab-pane .feature-post { overflow: hidden; } .horizontal-tabs-section2 .tab-pane .feature-post a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; float: left; width: 60px; height: 60px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; text-align: center; margin-left: 5px; border: 2px solid #BA0511; } .horizontal-tabs-section2 .tab-pane .feature-post a i { color: #BA0511; font-size: 24px; line-height: 56px; } .horizontal-tabs-section2 .tab-pane .feature-post .feature-post-content { margin-left: 80px; } .horizontal-tabs-section2 .tab-pane .feature-post .feature-post-content h2 { color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; } .horizontal-tabs-section2 .tab-pane .feature-post .feature-post-content p { margin: 0; } .team-section2 { padding: 50px 0; background: url('../images/pattern1.jpg'); } .team-section2 .team-post { padding: 0 10px; text-align: center; } .team-section2 .team-post .team-gal { position: relative; margin-bottom: 25px; } .team-section2 .team-post .team-gal .hover-team .inner-team { margin-top: -10px; } .team-section2 .team-post h2 { color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; margin-bottom: 3px; } .team-section2 .team-post span { font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; display: inline-block; color: #BA0511; font-size: 14px; margin: 0; } .statistic-section2 { padding: 70px 0 60px; background: #333333; } .statistic-section2 .statistic-box { text-align: center; } .statistic-section2 .statistic-box p { font-size: 15px; font-weight: 600; margin: 0; } .statistic-section2 .statistic-box p span.timer { color: #ffffff; display: inline-block; font-size: 36px; margin-bottom: 10px; } .tab-skill-section { padding: 50px 0; } .tab-skill-section .title-section.title2 { text-align: left; } .tab-skill-section .title-section.title2 h1:after { margin-left: 0; left: 3px; } .vertical-tab-box { overflow: hidden; margin-bottom: 30px; } .vertical-tab-box ul.nav-tabs { border: none; width: 160px; float: left; z-index: 2; position: relative; margin-right: -1px; } .vertical-tab-box ul.nav-tabs li { float: none; display: block; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .vertical-tab-box ul.nav-tabs li a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; display: block; padding: 15px 20px; background: transparent; -webkit-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; color: #222222; font-size: 13px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; border: none; margin: 0; } .vertical-tab-box ul.nav-tabs li.active a { border: 1px solid #eeeeee; border-right: none; background: #ffffff; color: #BA0511; } .vertical-tab-box .tab-content { border: 1px solid #eeeeee; padding: 20px 30px; max-height: 340px; overflow-y: scroll; margin: 0; } .vertical-tab-box .tab-content h3 { font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; font-weight: 600; color: #222222; margin-bottom: 16px; } .vertical-tab-box .tab-content p { margin-bottom: 16px; } .vertical-tab-box .tab-content img { width: 100%; margin-bottom: 16px; } .vertical-tab-box ::-webkit-scrollbar { width: 6px; height: 6px; } .vertical-tab-box ::-webkit-scrollbar-track { background: #f7f7f7; } .vertical-tab-box ::-webkit-scrollbar-thumb { background: #cccccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } .skills-progress { margin-bottom: 30px; } .skills-progress > p { color: #222222; font-weight: 600; margin-bottom: 16px; } .meter { height: 6px; /* Can be anything */ position: relative; background: #f7f7f7; margin-bottom: 16px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .meter > p { display: block; height: 100%; position: relative; background: #BA0511; color: #BA0511; font-weight: 600; margin: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .meter > p span { position: absolute; right: 0px; top: -32px; } .meter > p:after { content: ''; position: absolute; width: 20px; height: 20px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background: #ffffff; right: 0; top: -7px; border: 3px solid #BA0511; } /*-------------------------------------------------*/ /* = services page /*-------------------------------------------------*/ .page-banner-section.services-banner { background: url('../images/title-banner8.jpg') center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .services-section2 { padding-top: 50px; } .services-section2 > .title-section h1 { margin-bottom: 65px; text-transform: uppercase; } .services-section2 .services-box { text-align: center; } .services-section2 .services-section-area { background: url('../images/6.jpg') center fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; margin-bottom: 0; } .services-section2 .services-section-area .title-section h1 { color: #BA0511; text-transform: uppercase; } .services-box3 .services-post { margin-bottom: 55px; position: relative; } .services-box3 .services-post a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; float: left; width: 60px; height: 60px; border: 2px solid #ffffff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; position: relative; text-align: center; margin-left: 5px; margin-right: 20px; } .services-box3 .services-post a i { color: #ffffff; font-size: 24px; line-height: 56px; } .services-box3 .services-post h2 { color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; color: #ffffff; } .services-box3 .services-post p { margin: 0; } .work-steps-section { padding-top: 50px; } .work-steps-section .title-section h1 { margin-bottom: 65px; } .work-steps-section .work-steps-box ul { margin: 0; padding: 0; text-align: center; margin-bottom: 70px; } .work-steps-section .work-steps-box ul li { display: inline-block; min-width: 160px; margin-bottom: 12px; } .work-steps-section .work-steps-box ul li a { width: 82px; height: 82px; display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background: #BA0511; color: #ffffff; text-align: center; line-height: 82px; font-size: 30px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 600; border: 1px solid #BA0511; margin-bottom: 12px; position: relative; } .work-steps-section .work-steps-box ul li a:after { position: absolute; content: ''; width: 52px; height: 16px; background: url('../images/arrow3.png') center center no-repeat; top: 38px; right: -65px; } .work-steps-section .work-steps-box ul li span { display: block; color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; margin: 0; } .work-steps-section .work-steps-box ul li:hover a { color: #BA0511; background: #ffffff; } .work-steps-section .work-steps-box ul li:hover span { color: #BA0511; } .work-steps-section .work-steps-box ul li:nth-child(2n) a:after { background: url('../images/arrow4.png') center center no-repeat; } .work-steps-section .work-steps-box ul li:last-child a:after { display: none; } .work-steps-section .services-work-list { margin-bottom: 50px; } .work-steps-section .services-work-list h2 { color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; margin-bottom: 18px; } .work-steps-section .services-work-list ul { margin: 0; padding: 0; } .work-steps-section .services-work-list ul li { list-style: none; font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; margin-bottom: 10px; } .work-steps-section .services-work-list ul li:before { content: '\f058'; font-family: 'FontAwesome'; color: #BA0511; margin-right: 8px; font-size: 13px; } .work-steps-section .services-work-list.right-list { padding-left: 20px; } .work-steps-section .services-work-image img { width: 100%; } /*-------------------------------------------------*/ /* = shop page /*-------------------------------------------------*/ .page-banner-section.shop-banner { padding: 140px 0 120px; background: url('../images/shop-banner.jpg') center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .page-banner-section.shop-banner h1 span { color: #BA0511; } .page-banner-section.shop-banner p { text-transform: uppercase; max-width: 525px; margin: 10px auto 4px; font-size: 14px; } .client-area .bxslider { padding: 0; } .client-section .bx-wrapper .bx-controls-direction a { display: none; } .shop-banner-section { padding: 75px 0; background: url('../images/shop-banner.jpg') center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; position: relative; } .shop-banner-section p { font-size: 18px; text-transform: uppercase; font-weight: 300; margin-bottom: 2px; } .shop-banner-section h1 { color: #222222; font-size: 20px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; margin: 0 0 30px; font-size: 36px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; margin: 0; } .shop-banner-section:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(255, 255, 255, 0.3); } .shop-section { padding: 50px 0 30px; } .shop-section .shop-bar { overflow: hidden; margin-bottom: 50px; } .shop-section .shop-bar p { float: left; font-size: 12px; text-transform: uppercase; margin-top: 5px; } .shop-section .shop-bar select { float: right; width: 220px; border: 1px solid #cccccc; color: #999999; font-size: 12px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 300; text-transform: uppercase; padding: 8px 10px; outline: none; } .shop-section .shop-pagination { overflow: hidden; margin-top: 20px; } .shop-section .shop-pagination a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; width: 25px; height: 25px; border: 1px solid #dfdfdf; text-align: center; font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; font-size: 11px; margin: 0; line-height: 23px; } .shop-section .shop-pagination a:hover { color: #BA0511; border: 1px solid #BA0511; } .shop-section .shop-pagination a.prev-page { float: left; } .shop-section .shop-pagination a.next-page { float: right; } .shop-section .shop-pagination ul { margin: 0; padding: 0; text-align: center; } .shop-section .shop-pagination ul li { display: inline-block; } .shop-post { margin-bottom: 30px; } .shop-post .shop-gal { position: relative; } .shop-post .shop-gal img { width: 100%; } .shop-post .shop-gal > span { position: absolute; top: 10px; width: 60px; height: 60px; display: inline-block; text-align: center; line-height: 60px; text-transform: uppercase; color: #ffffff; font-size: 18px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 600; margin: 0; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .shop-post .shop-gal span.new-product { left: 10px; background: #ff8b58; } .shop-post .shop-gal span.sale-product { right: 10px; background: #BA0511; } .shop-post .shop-gal .hover-shop { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(255, 255, 255, 0.9); transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; opacity: 0; } .shop-post .shop-gal .hover-shop .inner-hover { position: absolute; width: 100%; top: 50%; left: 0; text-align: center; margin-top: -38px; } .shop-post .shop-gal .hover-shop .inner-hover a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; width: 104px; padding: 8px 5px; color: #ffffff; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-size: 13px; -webkit-border-radius: 16px; -moz-border-radius: 16px; -o-border-radius: 16px; border-radius: 16px; background: #222222; margin-bottom: 5px; } .shop-post .shop-gal .hover-shop .inner-hover a:hover { background: #BA0511; } .shop-post h2 { font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; padding: 16px 0; text-transform: uppercase; border-bottom: 1px dotted #cccccc; margin: 0 0 15px; } .shop-post h2 a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; color: #777777; } .shop-post h2 a:hover { color: #BA0511; } .shop-post p { overflow: hidden; margin: 0; padding-bottom: 15px; } .shop-post p span.price { display: inline-block; color: #222222; font-size: 18px; font-weight: 600; } .shop-post p span.old-price { display: inline-block; color: #cccccc; font-size: 18px; font-weight: 600; } .shop-post p span.rating { float: right; } .shop-post p span.rating i { color: #777777; font-size: 17px; line-height: 24px; } .shop-post p span.rating i[data-rated="rated"] { color: #BA0511; } .shop-post:hover .shop-gal span.new-product { opacity: 0; } .shop-post:hover .shop-gal span.sale-product { opacity: 0; } .shop-post:hover .shop-gal .hover-shop { opacity: 1; } /*-------------------------------------------------*/ /* = Home shop - ui-style /*-------------------------------------------------*/ .shop-sidebar { padding-top: 5px; } .shop-sidebar h1 { color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; text-transform: uppercase; margin-bottom: 30px; font-weight: 600; } .shop-sidebar .shop-widget { margin-bottom: 40px; } .shop-sidebar .category-widget ul { margin: 0; padding: 0; } .shop-sidebar .category-widget ul li { list-style: none; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px dotted #f0f0f0; } .shop-sidebar .category-widget ul li a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; margin: 0; } .shop-sidebar .category-widget ul li a:hover { color: #BA0511; } .shop-sidebar .category-widget ul li:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .shop-sidebar .filter-widget .price-range { padding: 18px 6px 12px; overflow: hidden; } .shop-sidebar .filter-widget #start-val, .shop-sidebar .filter-widget #end-val { display: inline-block; border: none; float: left; padding: 0; color: #777777; font-size: 13px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; max-width: 50px; } .shop-sidebar .filter-widget #end-val { float: right; text-align: right; } .shop-sidebar .filter-widget > a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; width: 103px; padding: 8px 8px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; border: 1px solid #222222; color: #222222; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-size: 13px; text-align: center; margin-top: 4px; } .shop-sidebar .filter-widget > a:hover { background: #222222; color: #ffffff; } .shop-sidebar .product-widget ul { margin: 0; padding: 0; } .shop-sidebar .product-widget ul li { list-style: none; overflow: hidden; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px dotted #f0f0f0; } .shop-sidebar .product-widget ul li img { float: left; } .shop-sidebar .product-widget ul li .product-widget-content { margin-left: 70px; } .shop-sidebar .product-widget ul li h2 { font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; margin: 0; margin-top: -3px; } .shop-sidebar .product-widget ul li h2 a { color: #777777; display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .shop-sidebar .product-widget ul li h2 a:hover { color: #BA0511; } .shop-sidebar .product-widget ul li span { display: inline-block; color: #222222; font-size: 14px; font-weight: 600; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; margin: 0; } .shop-sidebar .product-widget ul li span del { color: #777777; } .shop-sidebar .product-widget ul li:last-child { padding-bottom: 0; border-bottom: none; } .shop-sidebar .product-widget > a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; width: 103px; padding: 8px 8px; -webkit-border-radius: 18px; -moz-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; border: 1px solid #222222; color: #222222; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-size: 13px; text-align: center; margin-top: 4px; } .shop-sidebar .product-widget > a:hover { background: #222222; color: #ffffff; } .noUi-target * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-touch-callout: none; -ms-touch-action: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; cursor: default; } .noUi-base { width: 100%; height: 4px; position: relative; max-width: 100%; max-height: 100%; z-index: 1; margin-bottom: 15px; background: #f4f4f4; } .noUi-handle { background: #EEE; height: 10px; width: 10px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; margin: -3px 0 0 -3px; background: #BA0511; } .noUi-connect { background: Teal; background: #BA0511; } .noUi-background { background: #f5f5f5; } .noUi-origin { position: absolute; right: 0; top: 0; bottom: 0; z-index: 0; border-radius: inherit; background: #BA0511; } .noUi-origin-upper { background: inherit !important; } .noUi-z-index { z-index: 10; } .noUi-vertical { width: 40px; height: 100%; } .noUi-vertical .noUi-origin { bottom: 0; left: 0; } .noUi-vertical .noUi-handle { margin: -23px 0 0 -3px; } .noUi-target[disabled] .noUi-base { background: #999; } .noUi-target[disabled] .noUi-connect { background: #BBB; } .noUi-state-tap .noUi-origin { -webkit-transition: left 0.3s, top 0.3s; transition: left 0.3s, top 0.3s; } .marketing-box { padding-top: 1px; overflow: hidden; } .marketing-box .product { width: 25%; float: left; padding-left: 1px; padding-bottom: 1px; position: relative; } .marketing-box .product img { width: 100%; } .marketing-box .product .hover-mark { position: absolute; z-index: 2; top: 50%; margin-top: -65px; left: 27px; max-width: 280px; text-align: left; } .marketing-box .product .hover-mark h2 { color: #222222; font-size: 20px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 30px; margin: 0; text-transform: uppercase; color: #ffffff; } .marketing-box .product .hover-mark h2 span { color: #222222; } .marketing-box .product .hover-mark p { color: #ffffff; margin: 8px 0 0; } .marketing-box .product .hover-mark h1.offer { color: #ffffff; font-size: 36px; text-transform: uppercase; font-weight: 700; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; margin: 5px 0; } .marketing-box .product .hover-mark h1.offer span { font-weight: 300; } .marketing-box .product:after { position: absolute; top: 0; right: 0; left: 1px; bottom: 1px; content: ''; background: rgba(51, 51, 51, 0.6); } .marketing-box .product:nth-child(2n) .hover-mark { left: inherit; right: 27px; text-align: right; } .marketing-box .product:nth-child(2n) .hover-mark h2 { opacity: 0.5; } .marketing-box .product:nth-child(2n) .hover-mark p { opacity: 0.5; } /*-------------------------------------------------*/ /* = product page /*-------------------------------------------------*/ .related-shop-section { padding: 45px 0 30px; background: #f7f7f7; } .related-shop-section .product-box { width: 1170px; margin-left: -10px; } .related-shop-section .product-box .shop-post { margin-bottom: 0; padding: 0 10px; cursor: move; } .single-product-section { padding: 50px 0 60px; } .product-visibility { margin-bottom: 30px; } .product-visibility div.image-holder { margin-bottom: 20px; overflow: hidden; position: relative; } .product-visibility div.image-holder img { width: 100%; } .product-visibility div.image-holder > span { position: absolute; top: 10px; left: 10px; width: 60px; height: 60px; display: inline-block; text-align: center; line-height: 60px; text-transform: uppercase; color: #ffffff; font-size: 18px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 600; margin: 0; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; background: #ff8b58; } .product-visibility .other-products { margin: 0; padding: 0; overflow: hidden; } .product-visibility .other-products li { list-style: none; float: left; margin-right: 20px; } .product-visibility .other-products li img { width: 138px; } .product-visibility .other-products li:last-child { margin-right: 0; } .single-product-section h1 { color: #222222; font-size: 20px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 30px; text-transform: uppercase; padding-bottom: 14px; margin-bottom: 15px; border-bottom: 1px dotted #cccccc; } .single-product-section .product-details { margin-bottom: 20px; } .single-product-section .product-details p { margin-bottom: 20px; } .single-product-section .product-details p span.price { display: inline-block; color: #222222; font-size: 18px; font-weight: 600; } .single-product-section .product-details p span.rating { display: block; } .single-product-section .product-details p span.rating i { color: #777777; font-size: 17px; line-height: 24px; } .single-product-section .product-details p span.rating i[data-rated="rated"] { color: #BA0511; } .single-product-section .product-details button { width: 24px; height: 35px; display: inline-block; background: #eeeeee; text-align: center; line-height: 35px; color: #222222; font-size: 13px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; outline: none; border: none; margin: 2px 0 0; padding: 0; } .single-product-section .product-details input { display: inline-block; width: 54px; height: 35px; border: 1px solid #eeeeee; border-left: 1px solid transparent; border-right: 1px solid transparent; margin: 0px -4px 0 -6px; line-height: 34px; color: #222222; font-size: 13px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; outline: none; text-align: center; padding: 0; } .single-product-section .product-details a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; padding: 8px 16px; background: #BA0511; border: 2px solid transparent; color: #ffffff; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-size: 13px; text-transform: uppercase; font-weight: 600; text-align: center; margin-left: 3px; } .single-product-section .product-details a:hover { background: transparent; border: 2px solid #BA0511; color: #BA0511; } .single-product-section .product-desc { margin-bottom: 15px; overflow: hidden; } .single-product-section .product-desc p { margin-bottom: 15px; } .single-product-section .product-reviews ul { margin: 0; padding: 0; } .single-product-section .product-reviews ul li { list-style: none; border-bottom: 1px dotted #cccccc; margin-bottom: 16px; overflow: hidden; } .single-product-section .product-reviews ul li img { float: left; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; width: 80px; margin-bottom: 10px; } .single-product-section .product-reviews ul li .review-content { margin-left: 100px; } .single-product-section .product-reviews ul li .review-content h2 { overflow: hidden; color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; text-transform: uppercase; font-size: 14px; line-height: 20px; margin-bottom: -4px; } .single-product-section .product-reviews ul li .review-content h2 span.rating { float: right; margin: 0; } .single-product-section .product-reviews ul li .review-content h2 span.rating i { color: #777777; font-size: 14px; line-height: 24px; } .single-product-section .product-reviews ul li .review-content h2 span.rating i[data-rated="rated"] { color: #BA0511; } .single-product-section .product-reviews ul li .review-content span.time { font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; display: inline-block; margin: 0 0 16px; font-weight: 300; } .single-product-section .product-reviews ul li .review-content p { margin: 0 0 10px; } .single-product-section .product-reviews a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; padding: 8px 27px; border: 2px solid #222222; color: #222222; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-size: 13px; text-transform: uppercase; font-weight: 600; text-align: center; margin-left: 3px; } .single-product-section .product-reviews a:hover { background: #222222; color: #ffffff; } /*-------------------------------------------------*/ /* = portfolio pages /*-------------------------------------------------*/ .portfolio-banner { background: url('../images/title-banner6.jpg') center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .portfolio-gal1, .portfolio-mas1 { background: #333333; } .portfolio-gal1 .title2 h1, .portfolio-mas1 .title2 h1 { text-transform: uppercase; color: #ffffff; } .portfolio-gal1 .title2 h1:after, .portfolio-mas1 .title2 h1:after { background: #ffffff; } .portfolio-gal1 .portfolio-container .project-post, .portfolio-mas1 .portfolio-container .project-post { width: 24.98%; } .portfolio-gal1 .portfolio-container .project-post .inner-project .project-hover .caption, .portfolio-mas1 .portfolio-container .project-post .inner-project .project-hover .caption { top: 50%; text-align: center; background: transparent; bottom: inherit; opacity: 0; padding: 0; margin-top: 18px; } .portfolio-gal1 .portfolio-container .project-post .inner-project .project-hover .caption h2, .portfolio-mas1 .portfolio-container .project-post .inner-project .project-hover .caption h2 { color: #ffffff; margin-bottom: 2px; } .portfolio-gal1 .portfolio-container .project-post .inner-project .project-hover .caption span, .portfolio-mas1 .portfolio-container .project-post .inner-project .project-hover .caption span { color: #777777; } .portfolio-gal1 .portfolio-container .project-post:hover .inner-project .project-hover .caption, .portfolio-mas1 .portfolio-container .project-post:hover .inner-project .project-hover .caption { opacity: 1; } .portfolio-gal1 .show-more, .portfolio-mas1 .show-more { background: transparent; } .portfolio-gal1 .show-more a, .portfolio-mas1 .show-more a { padding: 10px 44px; color: #ffffff; border: 2px solid #ffffff; text-transform: uppercase; font-weight: 600; } .portfolio-gal1 .show-more a:hover, .portfolio-mas1 .show-more a:hover { background: #ffffff; color: #BA0511; } .portfolio-gal2 .title2 h1 { text-transform: uppercase; } ul.portfolio-pagination { margin: 0; padding: 0; margin-top: 10px; margin-bottom: 30px; } ul.portfolio-pagination li { display: inline-block; margin-left: -5px; } ul.portfolio-pagination li a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; width: 42px; height: 42px; border: 1px solid #dddddd; text-align: center; font-size: 12px; margin: 0; line-height: 40px !important; } ul.portfolio-pagination li a:hover { background: #BA0511; color: #ffffff !important; } .portfolio-classic1 .portfolio-container { width: 1160px; margin-left: -10px; } .portfolio-classic1 .portfolio-container .project-post { width: 365px; margin: 10px; } .portfolio-classic1 .portfolio-container .project-post .inner-project .project-gal { position: relative; } .portfolio-classic1 .portfolio-container .project-post .inner-project .caption { background: transparent; padding: 14px 0 0; } .portfolio-classic1 .portfolio-container .project-post .inner-project .caption h2 { font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; text-transform: uppercase; font-size: 13px; margin-bottom: 0; color: #222222; } .portfolio-classic1 .portfolio-container .project-post .inner-project .caption h2 a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; color: #222222; } .portfolio-classic1 .portfolio-container .project-post .inner-project .caption h2 a:hover { color: #BA0511; } .portfolio-classic1 .portfolio-container .project-post .inner-project .caption span { font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; display: inline-block; margin: 0; } .portfolio-classic1 .portfolio-container.with-4col .project-post { width: 270px; } .portfolio-classic1 .portfolio-container.with-2col .project-post { width: 560px; } .portfolio-classic1 .show-more { background: transparent; } .portfolio-section.portfolio-mas2 .portfolio-container .project-post { width: 33.333%; margin: 0; padding: 0 1px; } .portfolio-section.portfolio-mas2 .portfolio-container .project-post .inner-project .caption { background: rgba(255, 255, 255, 0.9); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .portfolio-section.portfolio-mas2 .portfolio-container .project-post .inner-project .caption h2 { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .portfolio-section.portfolio-mas2 .portfolio-container .project-post .inner-project .caption h2 a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; color: #222222; } .portfolio-section.portfolio-mas2 .portfolio-container .project-post .inner-project .caption h2 a:hover { color: #BA0511; } .portfolio-section.portfolio-mas2 .portfolio-container .project-post .inner-project .caption span { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; color: #777777; } .portfolio-section.portfolio-mas2 .portfolio-container.with-2col .project-post { width: 50%; } .portfolio-section.portfolio-mas2 .show-more { background: transparent; } .portfolio-section.portfolio-mas2 .show-more a { padding: 10px 44px; color: #BA0511; border: 2px solid #BA0511; margin-bottom: 30px; font-weight: 600; text-transform: uppercase; margin-top: 10px; } .portfolio-section.portfolio-mas2 .show-more a:hover { background: #BA0511; color: #ffffff; } .portfolio-mas1 .portfolio-container .project-post, .portfolio-section.masonry-style .portfolio-container .project-post { width: 24.98%; } .portfolio-mas1 .portfolio-container .project-post.scnd-width, .portfolio-section.masonry-style .portfolio-container .project-post.scnd-width { width: 49.90%; } .text-banner-section { text-align: center; padding: 75px 0; background: #f7f7f7; } .text-banner-section h1 { color: #222222; font-size: 20px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 30px; margin-bottom: 40px; text-transform: uppercase; } .text-banner-section a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; color: #222222; margin: 30px 10px 0; width: 160px; text-align: center; text-transform: uppercase; font-weight: 700; padding: 10px; border: 2px solid #222222; } .text-banner-section a:hover { border: 2px solid #BA0511; color: #BA0511; } /*-------------------------------------------------*/ /* = single project 1 /*-------------------------------------------------*/ .portfolio-section.related-projects { background: #f7f7f7; padding-bottom: 30px; } .portfolio-section.related-projects .portfolio-container .project-post { width: 100%; cursor: move; } .page-pagination-section { padding: 40px 0; background: #333333; } .page-pagination-section h1 { color: #222222; font-size: 20px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 30px; color: #ffffff; margin: 10px 0; } .page-pagination-section ul { margin: 0; padding: 0; text-align: right; } .page-pagination-section ul li { display: inline-block; } .page-pagination-section ul li a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; width: 40px; height: 40px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; text-align: center; border: 1px solid transparent; line-height: 40px; } .page-pagination-section ul li a i { font-size: 14px; color: #cccccc; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .page-pagination-section ul li a:hover { border: 1px solid #BA0511; } .page-pagination-section ul li a:hover i { color: #BA0511; } .single-project-section, .single-project-section2 { padding: 60px 0; } .single-project-section .image-place, .single-project-section2 .image-place { margin-bottom: 40px; } .single-project-section .image-place img, .single-project-section2 .image-place img { width: 100%; } .single-project-section .project-content, .single-project-section2 .project-content { padding-left: 30px; } .single-project-section .project-content h1, .single-project-section2 .project-content h1 { color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; margin-bottom: 30px; text-transform: uppercase; } .single-project-section .project-content p, .single-project-section2 .project-content p { margin-bottom: 20px; } .single-project-section .project-content ul.project-tags, .single-project-section2 .project-content ul.project-tags { margin: 0; padding: 0; margin-bottom: 15px; overflow: hidden; } .single-project-section .project-content ul.project-tags li, .single-project-section2 .project-content ul.project-tags li { list-style: none; margin-bottom: 10px; } .single-project-section .project-content ul.project-tags li a, .single-project-section2 .project-content ul.project-tags li a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; margin: 0; color: #222222; font-weight: 300; } .single-project-section .project-content ul.project-tags li a i, .single-project-section2 .project-content ul.project-tags li a i { color: #BA0511; margin-right: 10px; } .single-project-section .project-content ul.project-tags li a:hover, .single-project-section2 .project-content ul.project-tags li a:hover { color: #777777; } .single-project-section .project-content ul.project-social, .single-project-section2 .project-content ul.project-social { margin: 0; padding: 0; overflow: hidden; margin-bottom: 25px; } .single-project-section .project-content ul.project-social li, .single-project-section2 .project-content ul.project-social li { list-style: none; float: left; } .single-project-section .project-content ul.project-social li a, .single-project-section2 .project-content ul.project-social li a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; height: 40px; text-align: center; min-width: 40px; padding: 0 8px; border: 1px solid #dddddd; border-left: none; line-height: 38px; } .single-project-section .project-content ul.project-social li a i, .single-project-section2 .project-content ul.project-social li a i { font-size: 14px; color: #bbbbbb; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .single-project-section .project-content ul.project-social li a span, .single-project-section2 .project-content ul.project-social li a span { display: inline-block; font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; color: #222222; margin: 0 0 0 4px; } .single-project-section .project-content ul.project-social li a:hover i, .single-project-section2 .project-content ul.project-social li a:hover i { color: #BA0511; } .single-project-section .project-content ul.project-social li:first-child a, .single-project-section2 .project-content ul.project-social li:first-child a { border-left: 1px solid #dddddd; } /*-------------------------------------------------*/ /* = single project 2 /*-------------------------------------------------*/ .page-pagination-section.style2 { background: url('../images/pattern1.jpg'); } .page-pagination-section.style2 h1 { color: #222222; } .single-project-section2 { padding: 0; padding-bottom: 60px; } .single-project-section2 .project-content { padding-left: 0; padding-top: 25px; } .single-project-section2 .project-content h1 { margin-top: 15px; } #carousel.flexslider { margin-top: 10px !important; } /*-------------------------------------------------*/ /* = contact page /*-------------------------------------------------*/ .page-banner-section { padding: 100px 0 65px; text-align: center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; position: relative; } .page-banner-section h1 { color: #ffffff; text-transform: uppercase; font-size: 36px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; margin: 0; letter-spacing: 1px; } .page-banner-section:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: rgba(51, 51, 51, 0.7); } .contact-banner { background: url('../images/title-banner.jpg') center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .page-desc-section { padding-top: 50px; background: url('../images/pattern1.jpg'); } .contact-section { padding: 50px 0 70px; } .contact-section .info-post { overflow: hidden; margin-bottom: 30px; } .contact-section .info-post span.icon-info { display: inline-block; float: left; width: 60px; height: 60px; margin: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; border: 2px solid #BA0511; text-align: center; } .contact-section .info-post span.icon-info i { color: #BA0511; font-size: 24px; line-height: 60px; } .contact-section .info-post p { padding-top: 20px; color: #333333; font-size: 15px; font-style: 600; margin: 0 0 0 80px; } .contact-section .info-post p span { color: #BA0511; } .contact-section .info-post p a { color: #333333; } .contact-section #contact-form { padding-top: 15px; } .contact-section #contact-form input[type="text"], .contact-section #contact-form textarea { width: 100%; display: inline-block; padding: 12px 10px; background: #ffffff; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; color: #cccccc; font-size: 13px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; border: 1px solid #cccccc; outline: none; margin: 0 0 20px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .contact-section #contact-form input[type="text"]:focus, .contact-section #contact-form textarea:focus { border: 1px solid #BA0511; } .contact-section #contact-form textarea { min-height: 122px; } .contact-section #contact-form input[type="submit"] { display: inline-block; outline: none; padding: 10px 57px; color: #BA0511; font-size: 13px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; background: transparent; font-weight: 600; border: 2px solid #BA0511; text-transform: uppercase; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .contact-section #contact-form input[type="submit"]:hover { background: #BA0511; color: #ffffff; } .contact-section #contact-form .submit-area { text-align: center; } .contact-section #contact-form .message { height: 30px; font-size: 13px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; } .contact-section #contact-form .message.error { color: #e74c3c; } .contact-section #contact-form .message.success { color: #BA0511; } .map { height: 440px; } /*-------------------------------------------------*/ /* = faqs page /*-------------------------------------------------*/ .faq-banner { background: url('../images/title-banner2.jpg') center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .faqs-section { padding: 40px 0 60px; overflow: hidden; } .accord-elem { margin-top: 8px; } .accord-elem:first-child { margin-top: 0px; } .accord-title { position: relative; } .accord-title h2 { padding: 16px 20px; background: #f7f7f7; color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; margin-bottom: 0; margin-left: 52px; border: 1px solid #eeeeee; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .accord-title a.accord-link { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; position: absolute; width: 52px; height: 50px; top: 0; left: 0; text-align: center; background: #ffffff; border: 1px solid #eeeeee; border-right: none; } .accord-title a.accord-link:after { font-family: 'FontAwesome'; content: '\f0a9'; font-size: 18px; color: #333333; line-height: 49px; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .accord-title p { font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; margin: 12px 0 12px 72px; } .accord-elem.active .accord-title h2 { color: #ffffff; border: 1px solid #BA0511; background: #BA0511; } .accord-elem.active a.accord-link { background: #333333; border: 1px solid #333333; border-right: none; } .accord-elem.active a.accord-link:after { content: '\f0ab'; color: #ffffff; } .accord-content { display: none; padding-left: 72px; overflow: hidden; } .accord-content p { font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; margin: 12px 0; } .accord-elem.active .accord-content { display: block; } /*-------------------------------------------------*/ /* = error page /*-------------------------------------------------*/ .error-banner { background: url('../images/title-banner3.jpg') center no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } .error-section { padding: 60px 0 105px; background: url('../images/pattern1.jpg'); text-align: center; } .error-section img { max-width: 100%; margin-bottom: 40px; } .error-section .search-form { max-width: 460px; margin: -20px auto 0; text-align: left; } .error-section .search-form input[type="search"] { font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; margin: 0; color: #cccccc; padding: 12px 10px; border: 1px solid #cccccc; width: 100%; outline: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .error-section .search-form input[type="search"]:focus { border: 1px solid #BA0511; } .error-section .search-form button { background: #fff; border: none; float: right; margin-top: -32px; margin-right: 15px; position: relative; z-index: 2; } .error-section .search-form button i { color: #cccccc; font-size: 16px; } /*-------------------------------------------------*/ /* = footer /*-------------------------------------------------*/ footer { background: #333333; } footer p { color: #999999; } footer .up-footer { padding: 60px 0; } footer .up-footer h2 { color: #222222; font-size: 16px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; font-weight: 700; margin: 0 0 10px; color: #ffffff; text-transform: uppercase; margin-bottom: 30px; } footer .up-footer ul.social-list { margin: 0; padding: 0; } footer .up-footer ul.social-list li { display: inline-block; margin-right: 1px; } footer .up-footer ul.social-list li a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; width: 30px; height: 30px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background: #BA0511; text-align: center; border: 2px solid #BA0511; } footer .up-footer ul.social-list li a i { color: #333333; font-size: 14px; line-height: 26px; } footer .up-footer ul.social-list li a:hover { background: #333333; } footer .up-footer ul.social-list li a:hover i { color: #BA0511; } footer .up-footer .tweets-widget ul { margin: 0; padding: 0; } footer .up-footer .tweets-widget ul li { list-style: none; margin-bottom: 25px; } footer .up-footer .tweets-widget ul li p { color: #999999; margin: 0; } footer .up-footer .tweets-widget ul li p a { color: #BA0511; } footer .up-footer .tweets-widget ul li span { display: inline-block; font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; margin: 0; } footer .up-footer .tags-widget ul { margin: 0; padding: 0; } footer .up-footer .tags-widget ul li { display: inline-block; margin-bottom: 3px; } footer .up-footer .tags-widget ul li a { display: inline-block; text-decoration: none; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; font-size: 13px; color: #777777; font-family: "Open Sans","Microsoft YaHei", sans-serif; font-weight: 400; line-height: 20px; margin: 0 0 10px; color: #999999; margin: 0; padding: 8px; border: 1px solid #999999; } footer .up-footer .tags-widget ul li a:hover { color: #BA0511; border: 1px solid #BA0511; } footer .up-footer .subscribe-widget p { margin-bottom: 22px; } footer .up-footer .subscribe-widget input[type="text"] { background: transparent; border: 1px solid #999999; border-right: none; padding: 12px 10px; color: #c8c8c8; font-size: 13px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; float: left; width: 140px; outline: none; } footer .up-footer .subscribe-widget input[type="submit"] { padding: 12px 10px; color: #ffffff; background: #BA0511; border: 1px solid #BA0511; font-size: 13px; font-family: 'Asap',"Open Sans","Microsoft YaHei",sans-serif; text-transform: uppercase; font-weight: 600; float: left; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } footer .up-footer .subscribe-widget input[type="submit"]:hover { opacity: 0.6; } .footer-line { background: #222222; padding: 20px 0; text-align: center; } .footer-line p { margin: 0; color: #999999; } /*-------------------------------------------------*/ /* = Responsive Part /*-------------------------------------------------*/ @media (max-width: 1500px) { .portfolio-section .project-post { width: 19.97%; } } @media (max-width: 1400px) { .portfolio-section .project-post { width: 24.97%; } } @media (max-width: 1279px) { .blog-section.fullwidth .blog-box .blog-row .blog-post { width: 100%; } .blog-section.fullwidth .blog-box .blog-row .blog-post:last-child .blog-gal { float: right; } .blog-section.fullwidth .blog-box .blog-row .blog-post:last-child .blog-content { float: left; } .blog-section.fullwidth .blog-box .blog-row:nth-child(2n) .blog-post { width: 100%; } .blog-section.fullwidth .blog-box .blog-row:nth-child(2n) .blog-post .blog-gal { float: left; } .blog-section.fullwidth .blog-box .blog-row:nth-child(2n) .blog-post .blog-content { float: right; } .blog-section.fullwidth .blog-box .blog-row:nth-child(2n) .blog-post:last-child .blog-gal { float: right; } .blog-section.fullwidth .blog-box .blog-row:nth-child(2n) .blog-post:last-child .blog-content { float: left; } } @media (max-width: 1199px) { .portfolio-section .project-post { width: 33.31%; } .services-box .services-post .inner-service-post { padding-left: 5px; padding-right: 5px; } .services-box .services-post .inner-service-post p { max-width: 100%; } .portfolio-section.masonry-style .portfolio-container .project-post, .portfolio-mas1 .portfolio-container .project-post { width: 33.3%; } .portfolio-section.masonry-style .portfolio-container .project-post.scnd-width, .portfolio-mas1 .portfolio-container .project-post.scnd-width { width: 66.4%; } .marketing-box .product { width: 50%; } .portfolio-container.three-col { width: 970px; } .portfolio-container.three-col .project-post { width: 292px; } .portfolio-classic1 .portfolio-container { width: 960px; } .portfolio-classic1 .portfolio-container .project-post, .portfolio-classic1 .portfolio-container.with-4col .project-post { width: 300px; } .portfolio-classic1 .portfolio-container.with-2col .project-post { width: 460px; } .related-shop-section .product-box { width: 970px; } .blog-section .blog-box.masonry { width: 970px; } .blog-section .blog-box.masonry .blog-post { width: 312px; } .blog-section .blog-box.masonry.two-col .blog-post { width: 470px; } } @media (max-width: 991px) { .portfolio-section .project-post { width: 49.98%; } .services-box .services-post { float: none; width: 100%; } .statistic-section .statistic-box .statistic-post { width: 50%; margin-bottom: 1px; } .statistic-section .statistic-box .statistic-post:nth-child(2n+1) { border-left: 1px solid rgba(255, 255, 255, 0.3); } footer .widget { margin-bottom: 40px; } .services-section .services-section-area { background: url('../images/1.jpg') center fixed; } .services-section.services-dark .services-section-area { background: url('../images/3.jpg') center fixed; } .services-box2 .services-post { margin-top: 0; margin-bottom: 40px; } .services-box2 .services-post.left a { float: left; margin-right: 15px; margin-left: 0; } .services-box2 .services-post.right a { margin-left: 0; margin-right: 15px; } .services-box2 .services-post h2 { padding-top: 8px; } .services-box2 .services-image img { margin-bottom: 40px; width: auto; max-width: 100%; } .portfolio-container.three-col { width: 750px; } .portfolio-container.three-col .project-post { width: 345px; } .feature-section2 .feature-post .feature-post-content h2 { padding-top: 6px; } .navbar-nav > li > a { padding: 20px 17px; } .history-timeline { margin-bottom: 30px; } .feature-section4 .feature-box { width: 100%; float: none; padding-left: 15px; padding-right: 15px; } .feature-section4 .feature-box .inner-feature-box { width: 100% !important; float: none !important; max-width: 720px !important; margin: 0 auto; text-align: center; padding-right: 0 !important; } .feature-section4.second-style .feature-box .inner-feature-box p { max-width: 100%; } .feature-section4 .feature-image { width: 100%; float: none; text-align: center; padding-left: 15px; padding-right: 15px; } .feature-section4 .feature-image img { margin-left: 0 !important; max-width: 100%; } .light-boxed #container, .dark-boxed #container { max-width: 750px; } .light-boxed .portfolio-section .project-post, .dark-boxed .portfolio-section .project-post { width: 49.98%; } .blog-section.latest-blog .blog-box.medium .blog-post .blog-content { padding: 20px; } .portfolio-section.masonry-style .portfolio-container .project-post, .portfolio-mas1 .portfolio-container .project-post { width: 49.98%; } .portfolio-section.masonry-style .portfolio-container .project-post.scnd-width, .portfolio-mas1 .portfolio-container .project-post.scnd-width { width: 100%; } .horizontal-tabs-section2 .tab-pane .feature-post { margin-bottom: 20px; } .horizontal-tabs-section2 .tab-pane .tab-data-content { padding: 0 10px; } .horizontal-tabs-section2 ul.nav-tabs li a { padding: 15px; } .statistic-section2 .statistic-box .statistic-post { margin-bottom: 20px; } .vertical-tab-box ul.nav-tabs { width: 100%; float: none; margin-right: 0; } .vertical-tab-box ul.nav-tabs li.active a { border-right: 1px solid #eeeeee; } .work-steps-section .work-steps-box ul li { width: 140px; } .work-steps-section .services-work-image img { margin-bottom: 30px; } .portfolio-gal1 .portfolio-container .project-post, .portfolio-mas1 .portfolio-container .project-post { width: 33.3%; } .portfolio-section.portfolio-mas2 .portfolio-container .project-post, .portfolio-section.portfolio-mas2 .portfolio-container.with-2col .project-post { width: 360px; } .portfolio-classic1 .portfolio-container { width: 720px; } .portfolio-classic1 .portfolio-container .project-post { width: 340px; } .portfolio-classic1 .portfolio-container.with-4col .project-post { width: 220px; } .portfolio-classic1 .portfolio-container.with-2col .project-post { width: 340px; } .blog-section .blog-box.masonry { width: 720px; } .blog-section .blog-box.masonry .blog-post { width: 360px; } .blog-section .blog-box.masonry.two-col .blog-post { width: 360px; } .related-shop-section .product-box { width: auto; } } @media (max-width: 767px) { .navbar-toggle { margin-top: 17px; margin-bottom: 12px; } .navbar-default { padding: 0; } .navbar-nav > li > a { padding: 5px 15px; } .navbar-nav li.shop-icon a { padding-left: 20px; } .navbar-nav > li:before { display: none; } .navbar-nav li ul.drop-down, .navbar-nav li ul.drop-down li ul.drop-down.level3 { position: relative; width: auto; visibility: visible; opacity: 1; top: inherit; left: inherit !important; } .navbar-nav li ul.drop-down li a, .navbar-nav li ul.drop-down li ul.drop-down.level3 li a { background: none !important; color: #222222; font-size: 12px; padding: 4px 25px; border: none; } .navbar-nav li ul.drop-down li a:hover, .navbar-nav li ul.drop-down li ul.drop-down.level3 li a:hover { color: #BA0511; } .form-search { position: relative; top: inherit; right: inherit; width: auto; margin: 5px 15px; visibility: visible; opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } a.open-search { display: none !important; } .light-boxed .navbar-nav li ul.drop-down li a, .white-style .navbar-nav li ul.drop-down li a, .dark-boxed .navbar-nav li ul.drop-down li a, .light-boxed .navbar-nav li ul.drop-down li ul.drop-down.level3 li a, .white-style .navbar-nav li ul.drop-down li ul.drop-down.level3 li a, .dark-boxed .navbar-nav li ul.drop-down li ul.drop-down.level3 li a { color: #777777; } .light-boxed .navbar-nav li ul.drop-down li a:hover, .white-style .navbar-nav li ul.drop-down li a:hover, .dark-boxed .navbar-nav li ul.drop-down li a:hover, .light-boxed .navbar-nav li ul.drop-down li ul.drop-down.level3 li a:hover, .white-style .navbar-nav li ul.drop-down li ul.drop-down.level3 li a:hover, .dark-boxed .navbar-nav li ul.drop-down li ul.drop-down.level3 li a:hover { color: #BA0511; } .light-boxed .container .navbar-collapse, .white-style .container .navbar-collapse, .dark-boxed .container .navbar-collapse { overflow-y: scroll; max-height: 340px; } .tp-bullets { display: none; } .portfolio-container.three-col { width: 100%; margin: 0; } .portfolio-container.three-col .project-post { width: 100%; margin: 15px 0; } .blog-section .blog-box .blog-post .blog-content, .blog-section .blog-with-sidebar .blog-box .blog-post .blog-content { padding: 20px 25px 30px; } .blog-section .blog-box.medium .blog-post .blog-gal { width: 100%; float: none; } .blog-section .blog-box.medium .blog-post .blog-content { width: 100%; float: none; min-height: 50px; } .blog-section .blog-with-sidebar .show-more { margin-bottom: 40px; } .blog-section .blog-with-sidebar .sidebar { margin-bottom: 40px; } .feature-section4 .feature-box .inner-feature-box { max-width: 100% !important; } .portfolio-section.masonry-style .portfolio-container .project-post, .portfolio-mas1 .portfolio-container .project-post { width: 100%; } .marketing-box .product { width: 100%; } .work-steps-section .work-steps-box ul li a:after { display: none; } .work-steps-section .work-steps-box ul li { width: auto; } .portfolio-gal1 .portfolio-container .project-post, .portfolio-mas1 .portfolio-container .project-post { width: 49.98%; } .portfolio-section.portfolio-mas2 .portfolio-container .project-post, .portfolio-section.portfolio-mas2 .portfolio-container.with-2col .project-post { width: 49.98%; } .portfolio-classic1 .portfolio-container { width: 100%; margin-left: 0; } .portfolio-classic1 .portfolio-container .project-post { width: 100%; margin: 15px 0; } .portfolio-classic1 .portfolio-container.with-4col .project-post, .portfolio-classic1 .portfolio-container.with-2col .project-post { width: 100%; } .blog-section .blog-box.masonry { width: 100%; margin-left: 0; } .blog-section .blog-box.masonry .blog-post { width: 100%; margin: 10px 0; } .blog-section .blog-box.masonry.two-col .blog-post { width: 100%; } .blog-section.fullwidth .blog-box .blog-row .blog-post .blog-gal { float: none !important; width: 100% !important; } .blog-section.fullwidth .blog-box .blog-row .blog-post .blog-content { float: none !important; width: 100% !important; } .blog-post.single-post .comment-section ul.depth .comment-box { padding-left: 0; } .product-visibility .other-products li { width: 33.3%; padding-right: 20px; margin-right: 0; } .product-visibility .other-products li a { width: 100%; } .product-visibility .other-products li a img { width: 100%; } } @media (max-width: 581px) { .portfolio-section .project-post { width: 100%; } .blog-section .blog-box.medium .blog-post .blog-content { padding: 20px 15px; } .history-timeline ul.timeline-list li div.history-content { margin-left: 65px; padding: 8px 10px; } .light-boxed .portfolio-section .project-post, .dark-boxed .portfolio-section .project-post { width: 100%; } .portfolio-gal1 .portfolio-container .project-post, .portfolio-mas1 .portfolio-container .project-post { width: 100%; } .portfolio-section.portfolio-mas2 .portfolio-container .project-post, .portfolio-section.portfolio-mas2 .portfolio-container.with-2col .project-post { width: 100%; } .blog-post.single-post .autor-post img { float: none; width: 100%; } .blog-post.single-post .autor-post .autor-content { margin-left: 0; } .blog-post.single-post .comment-section { padding: 20px 10px 0; } .blog-post.single-post form.comment-form { padding: 0 10px 20px; } } @media (max-width: 440px) { .statistic-section .statistic-box .statistic-post { width: 100%; margin-bottom: 0px; border-bottom: none; border-left: 1px solid rgba(255, 255, 255, 0.3); } .statistic-section .statistic-box .statistic-post:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .line-banner-section p a { margin-top: 5px; } } /*Responsive Part - Home3*/ @media (max-width: 1100px) { .services-alt-section .services-box, .services-alt-section .services-ban { width: 100%; float: none; } .services-alt-section .services-ban { padding: 50px 70px; } .testimonial-section2 .testimonial-box .testimonial-post { width: 50%; } } @media (max-width: 991px) { .services-alt-section .services-box .services-post { width: 50%; } .testimonial-section2 .testimonial-box .testimonial-post { padding: 40px 20px 40px; } } @media (max-width: 767px) { .services-alt-section .services-ban { padding: 40px 20px; } .services-alt-section .services-ban h1 { font-size: 25px; } .testimonial-section2 .testimonial-box .testimonial-post { width: 100%; } } @media (max-width: 580px) { .services-alt-section .services-box .services-post { width: 100%; } .statistic-section .statistic-box .statistic-post { border-left: none !important; } }