/*************************************************************************************************************** |||||||||||||||||||||||||| MASTER STYLESHEET FOR SCREWER ||||||||||||||||||||||||||||||||||||| **************************************************************************************************************** |||||||||||||||||||||||||| TABLE OF CONTENT ||||||||||||||||||||||||||||||||||||||| **************************************************************************************************************** **************************************************************************************************************** 01. Imported styles 02. Flaticon reset styles 03. Header styles 04. Mainmenu styles 05. Rev_slider_wrapper styles 66. Call to action area Style 07. Categories area style 08. Fact counter area style 09. Latest Blog area style 10. Latest blog area style 11. Testimonial area style 12. Brand area style 13. Single service style 14. Pricing table area style 15. About page style 16. Account page style 17. 404 page style style 18. Blog page style 19. Blog single style 20. Contact page style **************************************************************************************************************** |||||||||||||||||||||||||||| End TABLE OF CONTENT |||||||||||||||||||||||||||||||||||| ****************************************************************************************************************/ /* Imported styles */ @import url(imp.css); @import url(bootstrap.css); @import url(font-awesome.min.css); @import url(hover.css); @import url(jquery.bxslider.css); @import url(owl.css); @import url(owl.theme.default.css); @import url(animate.css); @import url(jquery.bootstrap-touchspin.css); @import url('bootstrap-select.min.css'); @import url('imagehover.css'); @import url('icomoon.css'); @import url('jquery.fancybox.min.css'); @import url('jquery.mCustomScrollbar.min.css'); @import url('slick.css'); @import url(../fonts/flaticon/flaticon.css); /*** Price filter***/ @import url(../assets/price-filter/nouislider.css); @import url(../assets/price-filter/nouislider.pips.css); /*** single shop slide ***/ @import url(flexslider.css); /*** Time picker css ***/ @import url(../assets/timepicker/timePicker.css); /*** flaticon fonts css ***/ @import url(../fonts/flaticon/flaticon.css); /*** jquery ui css ***/ @import url(../assets/jquery-ui-1.11.4/jquery-ui.css); /*** Revolution slider ***/ @import url(../plugins/revolution/css/settings.css); @import url(../plugins/revolution/css/layers.css); @import url(../plugins/revolution/css/navigation.css); /*** Bootstrap select picker css ***/ @import url(../assets/bootstrap-sl-1.12.1/bootstrap-select.css); /*** Language Switcher ***/ @import url(../assets/language-switcher/polyglot-language-switcher.css); /*============================================== Base Css ===============================================*/ html, body { height: 100%; } body { font-family: 'Rubik', sans-serif; color: #222; font-size: 16px; line-height: 30px; font-weight: 400; } button:focus{ outline: none; } button { cursor: pointer; border: none; background: transparent; padding: 0; } h1, h2, h3, h4, h5, h6 { color: #222; font-weight: 600; margin: 0; font-family: 'Poppins', sans-serif; } h3 { font-size: 20px; /*line-height: 26px;*/ } h4 { } a, a:hover, a:active, a:focus { text-decoration: none; outline: none; border: none; } .fix{ position: relative; display: block; overflow: hidden; } img { max-width: 100%; height: auto; } i { font-style: normal; } ul, li { list-style: none; margin: 0; padding: 0; } .clr1{ color: #414141; } .clr2{ color:#fff; } .bgclr1{ background: #f36727; } .secpd1{ padding: 100px 0; } .secpd2{ padding: 70px 0 60px; } .secpd3{ padding: 70px 0 70px; } .btn-one { position: relative; display: inline-block; background: #222; color: #ffffff; font-size: 18px; line-height: 18px; font-weight: 400; padding: 15px 29px 16px; text-transform: capitalize; border-radius: 5px; font-family: 'Rubik', sans-serif; transition: all 500ms ease; border-radius: 3px; } .btn-one span:before { position: relative; top: 1px; font-weight: 400; font-size: 17px; line-height: 10px; display: inline-block; padding-left: 14px; } .btn-one:hover{ color: #f5f5f5; background: #999; } .btn-two{ color: #222; font-size: 18px; font-weight: 400; text-transform: capitalize; font-family: 'Rubik', sans-serif; transition: all 500ms ease; } .btn-two span:before { position: relative; top: 2px; font-weight: 400; font-size: 17px; line-height: 10px; display: inline-block; padding-left: 10px; } .btn-two:hover{ color: #999; } .sec-title { position: relative; display: block; /*margin-top: -7px;*/ padding-bottom: 73px; } .sec-title .title{ position: relative; display: block; } .sec-title .title span { position: relative; display: inline-block; color: #222; font-size: 30px; line-height: 36px; font-weight: 700; text-transform: uppercase; font-family: 'Poppins', sans-serif; z-index: 1; } .sec-title .title span:before { position: absolute; left: 0; bottom: -13px; width: 100%; height: 1px; background: #f2f1f9; content: ""; } .sec-title .title span:after{ position: absolute; left: 0; bottom: -13px; width: 60px; height: 1px; background: #222; content: ""; } .sec-title.clr-white{} .sec-title.clr-white .title span{ color: #ffffff; } .sec-title.clr-white .title span:before { background: #f2f1f9; } .sec-title.center .title span:after { left: 0; right: 0; margin: 0 auto; } .sec-title.max-width { max-width: 770px; margin: -7px auto 0; padding-bottom: 52px; } .sec-title p { font-size: 20px; line-height: 30px; margin: 36px 0 0; } /*** ============================================ Hidden Sidebar style ============================================ ***/ .hidden-bar{ position: fixed; top: 0; width: 320px; height: 100%; background: #111111; z-index: 9999999999; transition: all 700ms ease; } .hidden-bar .mCSB_inside > .mCSB_container{ margin-right:0px; } .hidden-bar.right-align { right: -400px; } .hidden-bar.right-align.visible-sidebar{ right:0px; transition-delay: 300ms; } .hidden-bar .hidden-bar-closer { width: 40px; height: 40px; position: absolute; right: 20px; top: 10px; background: none; color: #ffffff; border-radius: 0px; text-align: center; line-height: 40px; transition: all 300ms ease; z-index: 999999; } .hidden-bar .hidden-bar-closer button { background: none; display:block; font-size: 40px; color:#ffffff; width:40px; height:40px; line-height:40px; } .hidden-bar .hidden-bar-closer button span:before{ font-size: 30px; line-height: 30px; } .hidden-bar .hidden-bar-closer:hover button { color: #ffffff; } .hidden-bar-wrapper { height: 100%; padding:30px 5px 30px 30px; } .hidden-bar .logo { padding:0px 0px 30px; } .hidden-bar .logo img{ display:inline-block; max-width:100%; } .hidden-bar .content-box{ position:relative; padding-right:32px; } .hidden-bar .content-box a { padding: 20px 40px 20px; } .hidden-bar .content-box h2{ position:relative; font-size:18px; color:#ffffff; font-weight:500; margin-bottom:20px; } .hidden-bar .content-box .text{ position:relative; font-size:14px; color: rgba(255,255,255,0.60); margin-bottom:25px; } .hidden-bar .contact-info{ position:relative; margin-top:60px; } .hidden-bar .contact-info h2{ position:relative; font-size:18px; color:#ffffff; font-weight:500; margin-bottom:20px; } .hidden-bar .contact-info li{ position:relative; margin-bottom:12px; color:rgba(255,255,255,0.90); font-size:14px; font-weight:400; padding-left:30px; line-height:2em; } .hidden-bar .contact-info li a{ color:rgba(255,255,255,0.90); transition: all 300ms ease; } .hidden-bar .contact-info li a:hover{ color: #ffffff; } .hidden-bar .contact-info li .icon{ position:absolute; left:0px; top:4px; color:rgba(255,255,255,0.60); font-size:18px; line-height:1.2em; } .parallax-bg-one { background-attachment: fixed; background-position: center top; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1; } .parallax-bg-one::before { background: rgba(18, 32, 0, 0.90) none repeat scroll 0 0; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; } .parallax-bg-two { background-attachment: fixed; background-position: center top; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1; } .parallax-bg-two::before { background: rgba(9, 23, 33, 0.90) none repeat scroll 0 0; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; } .flex-box { display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap; } .flex-box-two { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; } .flex-box-three { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; align-items: center; } .flex-box-four { display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap; align-items: center; } .flex-box-five { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; align-items: center; } .owl-nav-style-one{} .owl-nav-style-one .owl-controls { } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"] { background: #ffffff none repeat scroll 0 0; border-radius: 50%; color: #909090; font-size: 24px; font-weight: 700; height: 50px; line-height: 46px; margin: 0 0 0 0px; padding: 0; width: 50px; border: 1px solid #f3f3f3; transition: all 700ms ease 0s; } .owl-nav-style-one.owl-theme .owl-nav .owl-next { margin-left: 10px; } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"]:hover{ border-color: #172272; color: #172272; } .owl-nav-style-two{} .owl-nav-style-two .owl-controls { } .owl-nav-style-two.owl-theme .owl-nav [class*="owl-"] { background: #fff none repeat scroll 0 0; border-radius: 0%; color: #3740b0; font-size: 24px; font-weight: 700; height: 50px; line-height: 50px; margin: 0 0 0 0px; padding: 0; width: 50px; transition: all 700ms ease 0s; } .owl-nav-style-two.owl-theme .owl-nav .owl-next { margin-left: 0px; } .owl-nav-style-two.owl-theme .owl-nav [class*="owl-"]:hover{ color: #ffffff; background: #3740b0; } .accordion-box { display: block; overflow: hidden; border-top: 1px solid #f2f2f2; border-left: 1px solid #f2f2f2; border-right: 1px solid #f2f2f2; } .accordion-box .accordion { position: relative; display: block; overflow: hidden; } .accordion-box .accordion .accord-btn { position: relative; display: block; cursor: pointer; border-bottom: 1px solid #f2f2f2; padding-left: 75px; padding-right: 20px; padding-top: 33px; padding-bottom: 33px; transition: all 500ms ease; } .accordion-box .accordion .accord-btn h4 { color: #303030; font-size: 16px; font-weight: 700; line-height: 24px; transition: all 500ms ease; } .accordion-box .accordion .accord-btn::after { font-family: "Flaticon"; position: absolute; top: 29px; left: 27px; color: #bdbdbd; content: "\f105"; font-size: 32px; line-height: 32px; font-weight: 300; transition: all 500ms ease 0s; } .accordion-box .accordion .accord-btn.active{ border-bottom: 1px solid #f2f2f2; transition: all 500ms ease; } .accordion-box .accordion .accord-btn.active h4 { color: #f36727; } .accordion-box .accordion .accord-btn.active:after{ color: #f36727; } .accordion-box .accordion .accord-content { position: relative; padding-top: 34px; padding-bottom: 33px; padding-left: 30px; padding-right: 30px; border-bottom: 1px solid #f2f2f2; display: none; } .accordion-box .accordion .accord-content:before{ position: absolute; top: 0; left: 0px; bottom: 0; width: 3px; background: #f36727; content: ""; } .accordion-box .accordion .accord-content.collapsed { display: block; } .accordion-box .accordion .accord-content p { margin: 0; } .slick-dots { position: relative; display: inline-block; top: 0px; margin-top: 31px; } .slick-dots li { position: relative; display: inline-block; margin: 0 15px; } .slick-dots li:before { position: absolute; top: 0; bottom: 0; right: -17px; width: 6px; height: 1px; background: #555555; content: ""; margin: 16px 0; } .slick-dots li:last-child:before { display: none; } .slick-dots li button { position: relative; display: block; width: 32px; height: 32px; border-radius: 50%; background: transparent; color: #c2c2c2; font-size: 17px; font-weight: 500; padding-bottom: 0; font-family: 'Rubik', sans-serif; } .slick-dots li.slick-active button { background: #fec144; color: #222222; } .boxed_wrapper { background: #fff none repeat scroll 0 0; position: relative; margin: 0 auto; width: 100%; min-width: 320px; min-height: 400px; overflow: hidden; } /*----------------------------------------------------/ 42. preloder------------------------------------------------------*/.preloader { background: #000; bottom: 0; height: 100%; left: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 99999; } .la-ball-scale-multiple, .la-ball-scale-multiple>div { position:relative; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box } .la-ball-scale-multiple { display:block; font-size:0; color:#fff } .la-ball-scale-multiple.la-dark { color:#333 } .la-ball-scale-multiple>div { display:inline-block; float:none; background-color:currentColor; border:0 solid currentColor } .la-ball-scale-multiple { width:32px; height:32px } .la-ball-scale-multiple>div { position:absolute; top:0; left:0; width:32px; height:32px; border-radius:100%; opacity:0; -webkit-animation:ball-scale-multiple 1s 0s linear infinite; -moz-animation:ball-scale-multiple 1s 0s linear infinite; -o-animation:ball-scale-multiple 1s 0s linear infinite; animation:ball-scale-multiple 1s 0s linear infinite } .la-ball-scale-multiple>div:nth-child(2) { -webkit-animation-delay:.2s; -moz-animation-delay:.2s; -o-animation-delay:.2s; animation-delay:.2s } .la-ball-scale-multiple>div:nth-child(3) { -webkit-animation-delay:.4s; -moz-animation-delay:.4s; -o-animation-delay:.4s; animation-delay:.4s } .la-ball-scale-multiple.la-sm { width:16px; height:16px } .la-ball-scale-multiple.la-sm>div { width:16px; height:16px } .la-ball-scale-multiple.la-2x { width:64px; height:64px; left: 0; top: 0; right: 0; margin: auto; bottom: 0; position: absolute; } .la-ball-scale-multiple.la-2x>div { width:64px; height:64px } .la-ball-scale-multiple.la-3x { width:96px; height:96px } .la-ball-scale-multiple.la-3x>div { width:96px; height:96px } @-webkit-keyframes ball-scale-multiple { 0% { opacity:0; -webkit-transform:scale(0); transform:scale(0) } 5% { opacity:.75 } 100% { opacity:0; -webkit-transform:scale(1); transform:scale(1) } } @-moz-keyframes ball-scale-multiple { 0% { opacity:0; -moz-transform:scale(0); transform:scale(0) } 5% { opacity:.75 } 100% { opacity:0; -moz-transform:scale(1); transform:scale(1) } } @-o-keyframes ball-scale-multiple { 0% { opacity:0; -o-transform:scale(0); transform:scale(0) } 5% { opacity:.75 } 100% { opacity:0; -o-transform:scale(1); transform:scale(1) } } @keyframes ball-scale-multiple { 0% { opacity:0; -webkit-transform:scale(0); -moz-transform:scale(0); -o-transform:scale(0); transform:scale(0) } 5% { opacity:.75 } 100% { opacity:0; -webkit-transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1); transform:scale(1) } } .fixedHeader { left: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 999; border: none; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); } /* Update header Style */ @keyframes menu_sticky { 0% {margin-top:-100px;} 50% {margin-top: -74px;} 100% {margin-top: 0;} } .mainmenu-area.stricky-fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 99999999; background: #f5f5f8; margin: 0; animation-name: menu_sticky; animation-duration: 0.60s; animation-timing-function: ease-out; transition: all .25s ease-in-out; } .header-style2-area.stricky-fixed{ position: fixed; top: 0; left: 0; width: 100%; z-index: 999; background: #f5f5f8; margin: 0; animation-name: menu_sticky; animation-duration: 0.60s; animation-timing-function: ease-out; transition: all .25s ease-in-out; } .header-style2-area.stricky-fixed .header-style2-logo{ padding: 15px 0 15px; } .header-style2-area.stricky-fixed .main-menu.style2 .navigation li a{ padding-top: 32px; padding-bottom: 33px; } .header-style2-area.stricky-fixed .main-menu.style2 .navigation li ul li a{ padding: 18px 30px 15px; } .header-style2-area.stricky-fixed .main-menu.style2 .navigation li ul li:hover a { padding-left: 45px; } .header-style2-area.stricky-fixed .headers2.quote-button-box{ padding: 14px 0 15px; } /* scroll to top styles */ .scroll-to-top { background: #222; border-radius: 50%; bottom: 90px; color: #ffffff; cursor: pointer; display: none; font-size: 25px; font-weight: normal; height: 55px; line-height: 56px; position: fixed; right: 15px; text-align: center; transition: all 500ms ease 0s; width: 55px; z-index: 99999999; box-shadow: 0px 8px 23px -6px rgba(27,27,27,1); } .scroll-to-top:hover { opacity: .5; } /* Form validation styles */ input:focus, textarea:focus, select:focus { border-color: #43c3ea; outline: none; } #contact-form input[type="text"].error{ border-color: red; } #contact-form input[type="email"].error{ border-color: red; } #contact-form select.error { border-color: red; } #contact-form textarea.error{ border-color: red; } /* Post pagination styles */ .post-pagination{ position: relative; display: block; } .post-pagination li { display: inline-block; margin: 0 3px; } .post-pagination li a { position: relative; display: block; background: #ffffff; border-radius: 5px; border: 1px solid #f0eef9; color: #222222; font-size: 18px; font-weight: 600; height: 50px; width: 50px; padding: 11px 0; transition: all 500ms ease 0s; font-family: 'Poppins', sans-serif; } .post-pagination li a i { position: relative; top: 1px; color: #868298; font-size: 20px; } .post-pagination li:hover a i{ color: #222222; } .post-pagination li.active a, .post-pagination li:hover a { color: #fff; background: #222222; border: 1px solid #222222; } /* Post pagination styles 2 */ .post-pagination2{ display: block; margin-top: 20px; } .post-pagination2 li { display: inline-block; margin: 0 3px; } .post-pagination2 li a { position: relative; display: block; color: #222; font-size: 18px; font-weight: 600; height: 32px; width: 32px; line-height: 32px; text-align: center; transition: all 500ms ease 0s; font-family: 'Poppins', sans-serif; border-radius: 50%; } .post-pagination2 li.active a, .post-pagination2 li:hover a { background: #222; color: #fff; } .post-pagination2 li a.left { width: auto; height: auto; display: block; color: #868298; padding-right: 10px; transition: all 500ms ease; } .post-pagination2 li:hover a.left{ background: none; } .post-pagination2 li a.left i { position: relative; top: 1px; display: inline-block; padding-right: 8px; font-size: 21px; } .post-pagination2 li a.left:hover{ color: #222; } .post-pagination2 li a.right { width: auto; height: auto; display: block; color: #868298; padding-left: 10px; transition: all 500ms ease; } .post-pagination2 li a.right:hover{ color: #222; } .post-pagination2 li:hover a.right{ background: none; } .post-pagination2 li a.right i { position: relative; top: 1px; display: inline-block; padding-left: 8px; font-size: 21px; } /* Overlay styles */ .overlay-style-one{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(243, 103, 40, 0.85); transition: all 500ms ease; transition-delay: 0.10s; opacity: 0; z-index: 2; } .overlay-style-one .box{ display: table; height: 100%; width: 100%; } .overlay-style-one .box .content{ display: table-cell; text-align: center; vertical-align: middle; } .review-box { position: relative; display: block; overflow: hidden; line-height: 16px; } .review-box ul { display: block; overflow: hidden; } .review-box ul li { display: inline-block; float: left; margin-right: 4px; } .review-box ul li:last-child{ margin-right: 0px; } .review-box ul li i { font-size: 14px; color: #f36727; } .sociallinks-style-one{ } .sociallinks-style-one li{ display: inline-block; float: left; margin-right: 20px; } .sociallinks-style-one li:last-child{ margin-right: 0px; } .sociallinks-style-one li a i{ color: #fff; font-size: 15px; font-weight: 400; transition: all 500ms ease; } .sociallinks-style-one li a:hover i{ color: #aaa; } .sociallinks-style-two{ overflow: hidden; } .sociallinks-style-two li { display: inline-block; float: left; margin-right: 10px; } .sociallinks-style-two li:last-child{ margin-right: 0px; } .sociallinks-style-two li a i { position: relative; display: block; width: 40px; height: 40px; background: #222; border: 1px solid #343434; border-radius: 50%; color: #fff; font-size: 14px; line-height: 38px; text-align: center; transition: all 500ms ease 0s; } .sociallinks-style-two li a:hover i{ background: #fff; border-color: #fff; color: #222; } /*============================================== Top Bar Style1 Css ===============================================*/ .top-bar-style1 { position: relative; display: block; background: #222; border-bottom: 1px solid #343434; padding: 13px 0 11px; } .top-style1{ position: relative; display: block; width: 100%; } .top-left-style1 { position: relative; display: block; max-width: 870px; width: 100%; } .top-left-style1 .find-map { position: relative; display: block; margin: 5px 0 4px; } .top-left-style1 .find-map p { color: #fff; margin: 0; } .top-left-style1 .find-map p span:before { color: #fff; font-size: 20px; line-height: 20px; display: inline-block; padding-right: 6px; } .top-left-style1 .find-map p a{ color: #f36727; transition: all 500ms ease; } .top-left-style1 .find-map p a span:before{ position: relative; top: 2px; font-size: 16px; line-height: 16px; display: inline-block; padding-left: 6px; padding-right: 0; transition: all 500ms ease; } .top-left-style1 .find-map p a:hover{ color: #9491a2; } .top-left-style1 .find-map p a:hover span:before{ color: #9491a2; } .top-right-style1 { position: relative; display: block; max-width: 300px; width: 100%; } .top-right-style1 .sociallinks-style-one{ line-height: 35px; } /*============================================== Top Bar Style2 Css ===============================================*/ .top-bar-style2 { position: relative; display: block; background: #39345a; padding: 8px 0 7px; } .top-style2 { position: relative; display: block; width: 100%; min-height: 35px; } .top-left-style2 { position: relative; display: block; padding-left: 120px; max-width: 900px; width: 100%; } .top-left-style2 .language-switcher { position: absolute; top: 0; left: 0; bottom: 0; margin: 0; border: none; width: 125px; height: 35px; background: transparent; display: block; padding: 0px 0px; border-radius: 5px; } .top-left-style2 .language-switcher #polyglotLanguageSwitcher a { color: #ffffff; } .top-left-style2 .language-switcher #polyglotLanguageSwitcher span.trigger:before { color: #868298; } .top-left-style2 .top-contact-info{ position: relative; display: block; } .top-left-style2 .top-contact-info ul { display: block; overflow: hidden; margin: 8px 0; } .top-left-style2 .top-contact-info ul li{ display: inline-block; float: left; border-left: 1px solid #4e4a6d; padding-left: 20px; margin-left: 20px; color: #868298; font-size: 16px; font-weight: 400; line-height: 18px; } .top-left-style2 .top-contact-info ul li span:before { position: relative; top: 1px; color: #f36727; font-size: 16px; line-height: 16px; display: inline-block; padding-right: 5px; } .top-left-style2 .top-contact-info ul li span.last{ display: inline-block; padding-left: 15px; } .top-left-style2 .top-contact-info ul li b{ color: #ffffff; font-weight: 400; } .top-right-style2 { position: relative; display: block; max-width: 200px; width: 100%; } .top-right-style2 .sociallinks-style-one { float: right; margin: 5px 0 4px; } .top-right-style2 .sociallinks-style-one li a:hover i{ color: #f36727; } /*============================================== Header Style1 Area Css ===============================================*/ .header-style1-area { display: block; background: #ffffff; padding: 17px 0 52px; } .header-style1{ position: relative; display: block; } .header-style1-logo { display: block; margin: 17px 0 18px; } .header-style1-logo a { display: block; } .headers1-header-right{ position: relative; display: block; } .headers1-header-right ul { position: relative; display: block; overflow: hidden; float: left; margin-right: 50px; padding: 16px 0; } .headers1-header-right ul li{ display: inline-block; float: left; margin-right: 40px; } .headers1-header-right ul li:last-child{ margin-right: 0; } .headers1-header-right ul li .single-item{ position: relative; display: block; } .headers1-header-right ul li .single-item .icon{ width: 25px; } .headers1-header-right ul li .single-item .icon span:before{ position: relative; display: inline-block; top: 1px; left: 1px; font-size: 24px; line-height: 24px; font-weight: 600; } .headers1-header-right ul li .single-item .icon, .headers1-header-right ul li .single-item .text{ display: table-cell; vertical-align: middle; } .headers1-header-right ul li .single-item .text{ padding-left: 20px; } .headers1-header-right ul li .single-item .text p{ margin: 0 0 1px; } .headers1-header-right ul li .single-item .text h3{ color: #4e4e4e; font-size: 18px; text-transform: uppercase; } .headers1-button { position: relative; display: block; float: right; /*width: 280px;*/ height: 85px; /*border: 1px solid #f0eef9;*/ border-radius: 5px; padding: 26px 15px 14px; } .headers1-button .icon{ /*width: 70px;*/ position: relative; } .headers1-button .icon:before { content: "\f0da"; font-family: FontAwesome; color: #222; font-size: 20px; position: absolute; top: 4px; right: -5px; } .headers1-button .icon span:before{ width: 35px; height: 35px; background: #222; text-align: center; border-radius: 50%; color: #ffffff; font-size: 16px; line-height: 35px; display: block; } .headers1-button .icon, .headers1-button .text{ display: table-cell; vertical-align: middle; } .headers1-button .text { padding-left: 15px; } .headers1-button .text span{ font-size: 18px; } .headers1-button .text h3{ font-size: 18px; margin: 2px 0 0; } /*============================================== Header Style2 Area Css ===============================================*/ .header-style2-area { display: none; background: #222; padding: 0 0 0; } .header-style2-logo { display: block; padding: 30px 0 30px; margin-right: 120px; transition: all 500ms ease; } .header-style2-logo a { display: block; } .main-menu.style2 .navigation li { margin-right: 30px; } .main-menu.style2 .navigation li:last-child{ margin-right: 0; } .main-menu.style2 .navigation li a { color: #222222; padding-top: 47px; padding-bottom: 48px; } .main-menu.style2 .navigation li ul li a { color: #222222; padding: 18px 30px 15px; } .headers2.quote-button-box { position: relative; display: block; padding: 29px 0 30px; transition: all 500ms ease; } /*** ===================================================== Mainmenu Area style ===================================================== ***/ .mainmenu-area{ position: relative; display: block; /*background: transparent;*/ background: #f5f5f8; margin-top: -35px; /*margin-bottom: -42px;*/ z-index: 999; max-width:100%; } .mainmenu-area .inner-content { position: relative; display: block; background: #f5f5f8; /*padding-left: 30px; padding-right: 30px;*/ } .main-menu { position: relative; display: inline-block; float: left; } .main-menu .navbar-collapse { padding: 0px } .main-menu .navigation { position: relative; } .main-menu .navigation li { position: relative; display: inline-block; float: left; margin-right: 45px; } .main-menu .navigation li:last-child{ margin-right: 0; } .main-menu .navigation li a { position: relative; display: block; color: #414141; font-size: 16px; line-height: 16px; font-weight: 600; text-transform: uppercase; opacity: 1; padding: 32px 0 32px; transition: all 300ms ease; font-family: 'Poppins', sans-serif; } .main-menu .navigation > li:hover > a, .main-menu .navigation > li.current > a { color: #222; padding-left: 20px; padding-right: 20px; background: #fff; } .main-menu .navigation > li > ul { position: absolute; left: 0px; top: 130%; width: 250px; background: transparent; padding: 10px 0px 0; z-index: 100; visibility: hidden; opacity: 0; transition: all 500ms ease; display: block; border-bottom: 3px solid #e9e9e9; border-radius: 8px; } .main-menu .navigation > li > ul:before { position: absolute; top: 10px; left: 0; width: 100%; background: #fff; content: ""; z-index: -1; bottom: 0; border-radius: 6px; } .main-menu .navigation > li:hover > ul { top: 100%; opacity: 1; visibility: visible; } .main-menu .navigation > li > ul > li { position: relative; display: block; float: none; margin: 0; padding: 0; width: 100%; transition: all 500ms ease; z-index: 1; } .main-menu .navigation > li > ul > li:before{ position: absolute; left: 30px; right: 30px; height: 100%; border-bottom: 1px solid #e9e9e9; content: ""; z-index: -1; } .main-menu .navigation > li > ul > li:last-child:before{ border-bottom: none; } .main-menu .navigation li ul li a { position: relative; display: block; color: #222222; font-size: 16px; font-weight: 400; line-height: 20px; text-transform: capitalize; transition: all 500ms ease 0s; padding: 18px 30px 15px; font-family: 'Rubik', sans-serif; } .main-menu .navigation li ul li a:before { position: absolute; top: 0; left: 30px; bottom: 0; right: auto; width: 7px; height: 7px; background: #999; border-radius: 50%; content: ""; margin: 23px 0; opacity: 1; transform: scale(0); transition: all 500ms ease; } .main-menu .navigation li ul li:hover a:before{ transform: scale(1); left: 30px; } .main-menu .navigation > li > ul > li:hover > a { color: #999; padding-left: 45px; } /* .main-menu .navigation > li > ul > li > ul { position: absolute; left:100%; top:20px; width: 250px; z-index: 100; padding-left: 10px; visibility: hidden; opacity: 0; background: transparent; transition: all 200ms ease; } .main-menu .navigation > li > ul > li > ul:before{ position: absolute; left: 10px; bottom: 0; width: 100%; height: 100%; background: #ffffff; border-bottom: 3px solid #fec144; content: ""; z-index: -1; border-radius: 6px; } .main-menu .navigation > li > ul > li:hover > ul{ visibility:visible; opacity:1; top:0px; } .main-menu .navigation > li > ul > li > ul > li{ position: relative; display: block; float: none; margin: 0; padding: 0; width: 100%; transition: all 500ms ease; } .main-menu .navigation > li > ul > li > ul > li:before{ position: absolute; left: 30px; right: 30px; height: 100%; border-bottom: 1px solid #e9e9e9; content: ""; z-index: -1; } .main-menu .navigation > li > ul > li > ul > li:last-child:before{ border-bottom: none; } .main-menu .navigation > li > ul > li > ul > li a{ position: relative; display: block; color: #222222; font-size: 16px; font-weight: 400; line-height: 20px; text-transform: capitalize; transition: all 500ms ease 0s; padding: 18px 30px 15px; font-family: 'Rubik', sans-serif; } .main-menu .navigation > li > ul > li > ul > li a:before { position: absolute; top: 0; left: 30px; bottom: 0; right: auto; width: 7px; height: 7px; background: #fec144; border-radius: 50%; content: ""; margin: 23px 0; transform: none; opacity: 0; transform: scale(0); transition: all 500ms ease; } .main-menu .navigation > li > ul > li > ul > li:hover a:before{ transform: scale(1); opacity: 1; left: 30px; } .main-menu .navigation > li > ul > li > ul > li:hover a{ color: #fec144; padding-left: 45px; } **/ /* .main-menu .navigation li ul li.dropdown{ position: relative; display: block; width: 100%; } .main-menu .navigation li ul li.dropdown:after{ position: absolute; font-family: 'FontAwesome'; content: "\f105"; font-size: 18px; line-height: 30px; display: block; top: 0; bottom: 0; right: 30px; margin: 11px 0; color: #8d8d8d; } **/ .main-menu .navbar-collapse > ul li.dropdown .dropdown-btn { position: absolute; right: 10px; top: 6px; width: 34px; height: 30px; border: 1px solid #ffffff; background: url(../images/icon/submenu-icon.png) center center no-repeat; background-size: 20px; cursor: pointer; z-index: 5; display: none; border-radius: 3px; } .mainmenu-right { position: relative; display: inline-block; float: right; } .outer-search-box { display: inline-block; float: left; margin-right: 30px; } .outer-search-box .seach-toggle { position: relative; display: block; color: #222; font-size: 18px; line-height: 52px; cursor: pointer; text-align: center; height: 51px; width: 50px; border-radius: 5px; margin: 14px 0; transition: all 500ms ease; } .outer-search-box .seach-toggle:hover, .outer-search-box .seach-toggle.active{ color: #fff; background: #ccc; } .search-box { background: #2f2f2f; opacity: 0; padding: 18px; position: absolute; top: 120%; left: -100%; transition: all 500ms ease 0s; visibility: hidden; z-index: 100; margin-left: 33px; } .search-box.now-visible { top: 100%; opacity: 1; visibility: visible; z-index: 100; } .search-box .form-group{ position:relative; padding: 0px; margin: 0px; width: 100%; min-width: 250px; } .search-box .form-group input[type="search"] { background: #ffffff none repeat scroll 0 0; border: 1px solid #1d1d1d; color: #000; display: block; font-size: 13px; line-height: 24px; position: relative; transition: all 500ms ease 0s; width: 100%; height: 40px; padding-left: 15px; padding-right: 50px; } .search-box .form-group input[type="search"]:focus{ border-color: #000000; } .search-box .form-group button, .search-box .form-group input[type="submit"] { background: #1d1d1d; color: #fff; cursor: pointer; display: block; font-size: 13px; height: 40px; line-height: 40px; position: absolute; right: 0; top: 0; width: 40px; transition: all 500ms ease 0s; } .search-box .form-group button:hover, .search-box .form-group input:focus + button{ color:#fff; background: #000; } .mainmenu-right .quote-button-box { margin: 14px 0; } /*** ===================================================== Main Slider style ===================================================== ***/ .main-slider { position: relative; z-index: 10; /*border-top: 3px solid #241f40;*/ } .main-slider .tp-caption{ z-index:5 ; } .main-slider .tp-dottedoverlay{ background: none !important; } .main-slider .slide-content{ position: relative; display: block; } .main-slider .slide-content .big-title{ position: relative; color: #ffffff; font-size: 60px; font-weight: 700; text-transform: none; line-height: 1.2em; font-family: 'Poppins', sans-serif; } .main-slider .slide-content .text{ position: relative; display: block; color: #ffffff; font-size: 24px; font-weight: 300; line-height: 1.6em; font-family: 'Rubik', sans-serif; } .main-slider .slide-content .btn-box{} .main-slider .slide-content .btn-box a{ } .main-slider #rev_slider_two_wrapper .slide-content .big-title { color: #ffffff; line-height: 1.1em; } /*** ============================================= Main Slider style2 ============================================= ***/ .main-slider.style2 { border-top: none; } /*** ============================================= About Area style ============================================= ***/ .about-area{ position: relative; display: block; padding: 90px 0 60px; } .about-title{} .about-title .sec-title { padding-bottom: 40px; } .about-title h1 { font-size: 34px; line-height: 58px; } .about-text{ position: relative; display: block; margin-top: -7px; } .about-text span{ color: #222222; font-size: 20px; line-height: 30px; } .about-text p{ line-height: 28px; margin: 25px 0 0; } .service-items{ margin-top: 43px; } .single-service-style2{ position: relative; display: block; max-width: 370px; width: 100%; border: 1px solid #f0eef9; padding: 24px 28px 22px; border-radius: 5px; margin: 0 auto 40px; transition: all 700ms ease; } .single-service-style2:hover{ -webkit-box-shadow: 0px 2px 10px 3px #f0eef9; box-shadow: 0px 2px 10px 3px #f0eef9; } .single-service-style2 .inner{ position: relative; display: block; padding-left: 95px; } .single-service-style2 .icon-box { position: absolute; top: 5px; left: 0; width: 70px; height: 120px; text-align: center; z-index: 1; transition: all 500ms ease; transition-delay: .3s; } .single-service-style2 .icon-box:before { position: absolute; top: 0; left: 0; right: 0; width: 40px; height: 120px; border: 4px solid #f8f7ff; content: ""; z-index: -1; margin: 0 auto; opacity: 0; transition: all 500ms ease; } .single-service-style2:hover .icon-box:before{ opacity: 1; } .single-service-style2 .icon-box span:before{ position: relative; top: 0; color: #222; font-size: 65px; line-height: 65px; transition: all 500ms ease; transition-delay: .2s; } .single-service-style2:hover .icon-box span:before{ top: 25px; color: #999; } .single-service-style2 .text-box{ } .single-service-style2 .text-box h3{ margin: 0 0 9px; } .single-service-style2 .text-box p{ line-height: 24px; margin: 0; } /*** ============================================= Slogan area style ============================================= ***/ .slogan-area { position: relative; background-attachment: scroll; background-size: cover; background-position: center top; background-repeat: no-repeat; padding: 53px 0; z-index: 1; } .slogan-area::before { background: rgba(34, 34, 34, 0.90) none repeat scroll 0 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; content: ""; z-index: -1; } .slogan-area .title { position: relative; display: block; margin: 12px 0 13px; } .slogan-area .title h3{ color: #fff; font-size: 24px; line-height: 30px; } .slogan-area .button{} .slogan-area .button a{ color: #fff; background: transparent; display: block; border: 2px solid #fff; } .slogan-area .button a:hover{ background: #999; } /*** ============================================= Services Style1 Area Style ============================================= ***/ .services-style1-area { position: relative; display: block; } .service_s1_title{ position: relative; display: inline-block; float: left; } .service_s1_text { position: relative; display: inline-block; float: left; max-width: 670px; width: 100%; padding-left: 80px; margin-top: -7px; } .service_s1_text p{ color: #222222; font-size: 20px; line-height: 30px; margin: 0; } .service_s1_button { float: right; margin-top: -6px; } .single-service-style1 { position: relative; display: block; margin-bottom: 30px; } .single-service-style1 .img-holder{ position: relative; display: block; overflow: hidden; z-index: 1; } .single-service-style1 .img-holder::before { background: rgba(34, 34, 34, 0.85); top: 0px; left: 0px; bottom: 0px; right: 0px; content: ""; position: absolute; transition: all 0.5s ease-in-out 0s; transform-style: preserve-3d; transform: perspective(1200px) rotateX(-90deg) translateZ(0px); } .single-service-style1:hover .img-holder::before{ transform: perspective(1200px) rotateX(0deg) translateZ(0px); transition-delay: 0.1s; } .single-service-style1 .img-holder img { width: 100%; transition: .5s ease; } .single-service-style1:hover .img-holder img {} .single-service-style1 .text-holder{ position: relative; display: block; border: 1px solid #f0eef9; padding: 24px 19px 23px; transition: all 700ms ease; } .single-service-style1:hover .text-holder{ -webkit-box-shadow: 0px 2px 10px 3px #f0eef9; box-shadow: 0px 2px 10px 3px #f0eef9; } .single-service-style1 .text-holder .inner{ position: relative; display: block; /*padding-left: 80px;*/ } .single-service-style1 .text-holder .icon-box { position: absolute; top: 5px; left: 0; width: 65px; height: 130px; text-align: center; z-index: 1; transition: all 500ms ease; transition-delay: .3s; } .single-service-style1 .text-holder .icon-box:before { position: absolute; top: 0; left: 0; right: 0; width: 40px; height: 130px; border: 4px solid #f8f7ff; content: ""; z-index: -1; margin: 0 auto; opacity: 0; transition: all 500ms ease; } .single-service-style1:hover .text-holder .icon-box:before{ opacity: 1; } .single-service-style1 .text-holder .icon-box span:before { position: relative; top: 0; color: #39345a; font-size: 35px; line-height: 64px; transition: all 500ms ease; transition-delay: .2s; width: 65px; height: 65px; display: block; border: 1px solid #f0eef9; border-radius: 50%; background: #fff; } .single-service-style1:hover .text-holder .icon-box span:before{ top: 30px; color: #fff; border-color: #f36727; background: #f36727; } .single-service-style1 .text-holder .text-box{} .single-service-style1 .text-holder .text-box h3{ margin: 0 0 18px; } .single-service-style1 .text-holder .text-box h3 a{ color: #222; transition: all 500ms ease; } .single-service-style1 .text-holder .text-box h3 a:hover{ color: #999; } .single-service-style1 .text-holder .text-box p{ line-height: 24px; margin: 0; } /*** ============================================= Services Style2 Area Style ============================================= ***/ .services-style2-area { position: relative; display: block; padding-bottom: 70px; } /*** ============================================= Company Info area Style ============================================= ***/ .company-info-area{ position: relative; display: block; background: #f5f5f5; padding-top: 100px; padding-bottom: 100px; } .video-holder-box{ position: relative; display: block; } .video-holder-box .img-holder{ position: relative; display: block; overflow: hidden; } .video-holder-box .img-holder img { transform: scale(1); transition: all 0.5s ease 0s; width: 100%; } .video-holder-box .img-holder:hover img{ transform: scale(1.1); } .video-holder-box .img-holder .icon-holder { position: absolute; top: 0; left: 0; height: 100%; width: 100%; transition: all 500ms ease; } .video-holder-box:hover .img-holder .icon-holder { background-color: rgba(0, 0, 0, 0.60); } .video-holder-box .img-holder .icon-holder .icon { display: table; height: 100%; width: 100%; } .video-holder-box .img-holder .icon-holder .icon .inner { display: table-cell; vertical-align: middle; text-align: center; } .video-holder-box .img-holder .icon-holder .icon .inner a{ position: relative; display: block; color: #ffffff; line-height: 88px; height: 90px; width: 90px; margin: 0 auto; border-radius: 50%; border: 1px solid #ffffff; text-align: center; transition: all 500ms ease; } .video-holder-box .img-holder .icon-holder .icon .inner a span:before{ font-size: 25px; } .video-holder-box .img-holder:hover .icon-holder .icon .inner a{ transform: rotate(360deg); } .company-info-content { position: relative; display: block; /*margin-top: -8px;*/ } .company-info-content h1{ font-size: 30px; line-height: 35px; margin: 0 0 22px; } .company-info-content span{ color: #222222; font-size: 20px; line-height: 28px; } .company-info-content p{ line-height: 28px; margin: 15px 0 21px; } .company-info-content a.learn-more span:before{ color: #222; } .company-info{ margin-top: 20px; } .single-info-of-company{ position: relative; display: block; overflow: hidden; background: #ffffff; padding-left: 80px; min-height: 110px; margin: 40px auto 0; max-width: 370px; width: 100%; border-radius: 5px; } .single-info-of-company .icon-holder{ position: absolute; top: 0; left: 0; width: 80px; height: 110px; text-align: center; z-index: 1; } .single-info-of-company .icon-holder.one{ position: absolute; top: 0; left: 0; width: 80px; height: 110px; background: url(../images/icon/1.jpg); } .single-info-of-company .icon-holder span:before { color: #f36727; font-size: 35px; line-height: 35px; display: block; padding: 37px 0 38px; } .single-info-of-company.two{ background: #48426e; } .single-info-of-company .icon-holder.two{ position: absolute; top: 0; left: 0; width: 80px; height: 110px; background: url(../images/icon/2.png); } .single-info-of-company.two .title-holder h3{ color: #ffffff; } .single-info-of-company.two .title-holder span{ color: #ffffff; } .single-info-of-company.three{ background: #f36727; } .single-info-of-company .icon-holder.three{ position: absolute; top: 0; left: 0; width: 80px; height: 110px; background: url(../images/icon/3.png); } .single-info-of-company .icon-holder.three span:before{ color: #ffffff; } .single-info-of-company.three .title-holder h3{ color: #ffffff; } .single-info-of-company.three .title-holder span{ color: #ffffff; } .single-info-of-company .title-holder { position: relative; display: block; padding-left: 15px; margin: 26px 0 25px; } .single-info-of-company .title-holder h3{ font-size: 18px; margin: 0 0 7px; } .single-info-of-company .title-holder span{} /*** ============================================= Latest Project Area Style ============================================= ***/ .latest-project-area{ position: relative; display: block; background: #222; padding: 100px 0 100px; } .latest-project{} .latest-project .owl-carousel{ display:block; max-width:450px; width: 100%; margin: 0 auto; } .latest-project .owl-carousel .owl-stage-outer{ overflow: visible; padding: 0px 0px; } .single-project-style1{ position: relative; display: block; } .single-project-style1 .img-holder{ position: relative; display: block; overflow: hidden; } .single-project-style1 .img-holder img{ width: 100%; transition: all 500ms ease; } .single-project-style1:hover .img-holder img { transform: scale(1.1); } .single-project-style1 .overlay-content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 500ms ease; transition-delay: .3s; opacity: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+36,1e5799+40,1e5799+40,1e5799+40,1e5799+42,1e5799+42,1e5799+49,0b0722+72&0+35,0.67+71,1+100 */ background: -moz-linear-gradient(top, rgba(67,67,67,0) 35%, rgba(67,67,67,0.02) 36%, rgba(67,67,67,0.09) 40%, rgba(67,67,67,0.13) 42%, rgba(67,67,67,0.26) 49%, rgba(57,57,57,0.67) 71%, rgba(52,52,52,0.68) 72%, rgba(52,52,52,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(67,67,67,0) 35%,rgba(67,67,67,0.02) 36%,rgba(67,67,67,0.09) 40%,rgba(67,67,67,0.13) 42%,rgba(67,67,67,0.26) 49%,rgba(57,57,57,0.67) 71%,rgba(52,52,52,0.68) 72%,rgba(52,52,52,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(67,67,67,0) 35%,rgba(67,67,67,0.02) 36%,rgba(67,67,67,0.09) 40%,rgba(67,67,67,0.13) 42%,rgba(67,67,67,0.26) 49%,rgba(57,57,57,0.67) 71%,rgba(52,52,52,0.68) 72%,rgba(52,52,52,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#0b0722',GradientType=0 ); /* IE6-9 */ } .single-project-style1:hover .overlay-content{ opacity: 1; } .single-project-style1 .overlay-content .project-details { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 30px 32px; transition: all 700ms ease; transition-delay: .6s; opacity: 0; transform-style: preserve-3d; transform: perspective(1200px) rotateX(-90deg) translateZ(-51px); } .single-project-style1:hover .overlay-content .project-details { -webkit-transform: perspective(1200px) rotateX(0deg) translateZ(0px); -moz-transform: perspective(1200px) rotateX(0deg) translateZ(0px); transform: perspective(1200px) rotateX(0deg) translateZ(0px); opacity: 1; transition-delay: 0.2s; } .single-project-style1 .project-details .left{ display: block; } .single-project-style1 .project-details .left h3{ color: #fff; margin: 0 0 3px; } .single-project-style1 .project-details .left span{ color: #fff; } .single-project-style1 .project-details .right { margin: 11px 0; } .single-project-style1 .project-details .right a { line-height: 15px; display: block; } .single-project-style1 .project-details .right a span:before{ color: #fff; font-size: 32px; line-height: 32px; } .latest-project .owl-theme .owl-nav { position: absolute; right: -330px; top: -105px; margin: 0; } .latest-project .owl-theme .owl-nav [class*="owl-"] { background: transparent; color: #fff; font-size: 20px; font-weight: 400; height: 45px; width: 45px; line-height: 42px; margin: 0; padding: 0; border: 1px solid #fff; transition: all 700ms ease 0s; border-radius: 50%; } .latest-project .owl-theme .owl-nav .owl-next { margin-left: 10px; } .latest-project .owl-theme .owl-nav [class*="owl-"]:hover{ border-color: #fff; background: #fff; color: #000000; } /*** ============================================= Fact counter Area style ============================================= ***/ .fact-counter-area { position: relative; display: block; background: #f8f7ff; padding: 75px 0 40px; } .single-fact-counter { position: relative; display: block; max-width: 270px; width: 100%; margin: 0 auto 30px; padding-left: 85px; } .single-fact-counter .icon-box { position: absolute; top: 0px; left: 0; width: 60px; height: 95px; text-align: center; z-index: 1; transition: all 500ms ease; transition-delay: .3s; } .single-fact-counter .icon-box:before { position: absolute; top: 0; left: 0; right: 0; width: 40px; height: 95px; border: 4px solid #f0eef9; content: ""; z-index: -1; margin: 0 auto; opacity: 1; transition: all 500ms ease; } .single-fact-counter .icon-box span:before { position: relative; top: 0; color: #f36727; font-size: 60px; line-height: 60px; transition: all 500ms ease; transition-delay: .2s; } .single-fact-counter .count-box { position: relative; display: block; } .single-fact-counter h1 { line-height: 36px; margin: 0 0 10px; } .single-fact-counter h1 span { color: #222222; font-size: 48px; font-weight: 600; font-family: 'Poppins', sans-serif; } .single-fact-counter .count-box .title{} .single-fact-counter .count-box .title h3 { color: #868298; font-size: 18px; line-height: 26px; font-weight: 400; text-transform: capitalize; font-family: 'Rubik', sans-serif; } /*** ============================================= Latest blog Area style ============================================= ***/ .latest-blog-area { position: relative; display: block; background: #ffffff; padding-top: 100px; padding-bottom: 40px; } .single-blog-post { position: relative; display: block; margin-bottom: 52px; } .single-blog-post .img-holder { position: relative; display: block; overflow: hidden; transition: all 0.5s ease-in-out 0.6s; } .single-blog-post .img-holder::before { background: rgba(34, 34, 34, 0.85); top: 0px; left: 0px; bottom: 0px; right: 0px; content: ""; position: absolute; transition: all 0.5s ease-in-out 0s; transform-style: preserve-3d; transform: perspective(1200px) rotateX(45deg) translateZ(0px); z-index: 3; opacity: 0; } .single-blog-post:hover .img-holder::before{ transform: perspective(1200px) rotateX(0deg) translateZ(0px); transition-delay: 0.1s; opacity: 1; } .single-blog-post .img-holder img { transition: all 0.5s ease-in-out 0.6s; width: 100%; } .single-blog-post:hover .img-holder img { transform: scale(1.2, 1.2); } .single-blog-post .post-date { position: absolute; top: 10px; left: 10px; width: 70px; height: 70px; text-align: center; background: rgba(34, 34, 34, 0.75); border-radius: 50%; z-index: 3; transition: all 0.8s ease-in-out 0.8s; } .single-blog-post:hover .post-date{ transform: rotate(360deg); } .single-blog-post .post-date h3 { display: block; padding: 13px 10px; color: #ffffff; line-height: 22px; } .single-blog-post .text-holder { position: relative; display: block; padding: 25px 0px 0px; } .single-blog-post .text-holder .blog-title { position: relative; display: block; font-size: 22px; line-height: 30px; display: block; word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .single-blog-post .text-holder .blog-title a{ color: #393939; transition: all 500ms ease; } .single-blog-post .text-holder .blog-title a:hover{ color: #999; } .single-blog-post .text-holder .text{ display: block; margin-top: 16px; } .single-blog-post .text-holder .text p{ margin: 0 0 16px; } .single-blog-post .text-holder .text a.read-more{ color: #222222; } .single-blog-post:hover .text-holder .text a.read-more{ color: #999; } /*** ============================================= Choose Area Style ============================================= ***/ .choose-area { position: relative; background-attachment: fixed; background-position: center top; background-repeat: no-repeat; background-size: cover; padding-top: 93px; padding-bottom: 60px; z-index: 1; } .choose-area::before { position: absolute; background: rgba(26, 22, 46, 0.90); content: ""; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } .choose-title { position: relative; display: block; max-width: 730px; width: 100%; text-align: center; margin: 0 auto; padding-bottom: 52px; } .choose-title h1{ color: #ffffff; font-size: 36px; line-height: 42px; font-weight: 600; margin: 0 0 14px; } .choose-title p{ color: #f36727; font-size: 20px; line-height: 30px; margin: 0; } .single-choose-item{ position: relative; display: block; background: #39345a; padding: 60px 15px 52px; margin-bottom: 40px; } .single-choose-item .iocn-holder{ display: block; margin-bottom: 25px; } .single-choose-item .text-holder{ position: relative; display: block; } .single-choose-item .text-holder h3{ color: #ffffff; margin: 0 0 18px; } .single-choose-item .text-holder p{ color: #d9d7e8; margin: 0; } .single-choose-item.bg1{ background: #ffffff; } .single-choose-item.bg1 .text-holder h3{ color: #222222; } .single-choose-item.bg1 .text-holder p{ color: #868298; } .single-choose-item.bg2{ background: #f36727; } .single-choose-item.bg2 .text-holder h3{ color: #ffffff; } .single-choose-item.bg2 .text-holder p{ color: #ffffff; } /*** ============================================= Call Us Area Style ============================================= ***/ .call-us-area{ position: relative; display: block; padding-top: 100px; padding-bottom: 60px; z-index: 3; } .call-us-area .call-us-bg { position: absolute; top: 0; left: 0; width: 100%; height: 320px; background-attachment: scroll; background-position: top right; background-repeat: no-repeat; background-size: cover; z-index: -1; } .call-us-area .call-us-bg::before { position: absolute; background: rgba(248, 247, 255, 0.85); content: ""; width: 100%; height: 320px; top: 0; left: 0; z-index: -1; } .sec-title.call-us-title{ position: relative; display: inline-block; float: left; padding-right: 120px; } .call-us-text { position: relative; display: inline-block; float: left; max-width: 600px; width: 100%; margin-top: -7px; } .call-us-text p{ color: #39345a; font-size: 20px; line-height: 30px; margin: 0; } .contact-info-box{ position: relative; display: block; background: #222; border-radius: 5px; padding: 35px 40px 17px; } .contact-info-box ul { position: relative; display: block; overflow: hidden; border-bottom: 1px solid #4d496b; padding-bottom: 32px; margin-bottom: 17px; } .contact-info-box ul li{ position: relative; display: block; padding-left: 45px; margin-bottom: 25px; } .contact-info-box ul li:last-child{ margin-bottom: 0; } .contact-info-box ul li .icon{ position: absolute; top: 10px; left: 0; } .contact-info-box ul li .icon span:before{ color: #fff; font-size: 35px; line-height: 35px; } .contact-info-box ul li .title{ position: relative; display: block; padding-left: 10px; } .contact-info-box ul li .title h3{ color: #fff; font-size: 18px; font-weight: 500; margin: 0 0 2px; } .contact-info-box ul li .title span{ color: #fff; font-size: 18px; } .contact-info-box .find-map-box { position: relative; display: block; overflow: hidden; padding-left: 60px; min-height: 45px; } .contact-info-box .find-map-box .icon{ position: absolute; top: 0; left: 0; } .contact-info-box .find-map-box .icon span:before{ color: #fff; font-size: 45px; line-height: 45px; } .contact-info-box .find-map-box .text { display: block; margin: 9px 0; } .contact-info-box .find-map-box .text a{ color: #ffffff; } .contact-info-form{ position: relative; display: block; background: #ffffff; padding: 40px 40px 20px; border: 1px solid #f0eef9; border-radius: 7px; } .contact-info-form form { position: relative; display: block; } .contact-info-form form .input-box { position: relative; margin-bottom: 20px; } .contact-info-form form .input-box input[type=text], .contact-info-form form .input-box input[type=email], .contact-info-form form .input-box input[type=tel], .contact-info-form form .input-box textarea{ position: relative; display: block; width: 100%; height: 55px; border: 1px solid #f0eef9; padding: 0 20px; color: #868298; font-size: 16px; font-weight: 400; border-radius: 5px; font-family: 'Rubik', sans-serif; transition: all 500ms ease; } .contact-info-form form .input-box textarea{ height: 205px; padding: 15px 20px; } .contact-info-form form .input-box button { padding: 19px 35px 18px; border-radius: 5px; } .contact-info-form form .input-box input[type=text]:focus{ border-color: #222; } .contact-info-form form .input-box input[type=email]:focus{ border-color: #222; } .contact-info-form form .input-box input[type=tel]:focus{ border-color: #222; } .contact-info-form form .input-box textarea:focus{ border-color: #222; } .contact-info-form form .input-box button:hover{} /*** ============================================= Brand Area Style ============================================= ***/ .brand-area{ position: relative; display: block; padding-bottom: 70px; } .single-brand-item { position: relative; display: block; max-width: 270px; width: 100%; text-align: center; margin: 0 auto 30px; border: 1px solid #f0eef9; transition: all 700ms ease; } .single-brand-item:hover{ -webkit-box-shadow: 0px 2px 10px 3px #f0eef9; box-shadow: 0px 2px 10px 3px #f0eef9; } .single-brand-item a{ display: block; } .single-brand-item a img{ width: auto; } /*** ============================================= Footer area style ============================================= ***/ .footer-area { position: relative; display: block; background: #ccc; padding-top: 98px; padding-bottom: 100px; } .single-footer-widget { position: relative; display: block; overflow: hidden; } .single-footer-widget .title { position: relative; display: block; margin-top: 0px; margin-bottom: 30px; } .single-footer-widget .title h3 { color: #222; font-size: 20px; line-height: 20px; font-weight: 500; text-transform: capitalize; } .single-footer-widget .company-info-text{ position: relative; display: block; } .single-footer-widget .company-info-text .text-box{ display: block; padding-bottom: 21px; } .single-footer-widget .company-info-text .text-box p{ color: #222; line-height: 28px; margin: 0; } .call-officers { position: relative; display: block; width: 270px; height: 85px; background: #222; border-radius: 5px; padding: 15px 13px 14px; } .call-officers .icon{ width: 70px; position: relative; } .call-officers .icon:before { content: "\f0da"; font-family: FontAwesome; color: #fff; font-size: 30px; position: absolute; top: 15px; right: 12px; } .call-officers .icon span:before{ width: 50px; height: 50px; background: #fff; text-align: center; border-radius: 50%; color: #222; font-size: 23px; line-height: 50px; display: block; } .call-officers .icon, .call-officers .text{ display: table-cell; vertical-align: middle; } .call-officers .text{ padding-left: 5px; } .call-officers .text span{ font-size: 18px; color:#fff; } .call-officers .text h3{ font-size: 18px; margin: 2px 0 0; } .single-footer-widget .solutions-links{ position: relative; display: block; } .single-footer-widget .solutions-links li { line-height: 28px; margin-bottom: 10px; } .single-footer-widget .solutions-links li:last-chil{ margin-bottom: 0; } .single-footer-widget .solutions-links li a{ position: relative; display: block; color: #222; font-size: 16px; font-weight: 400; padding-left: 20px; transition: all 500ms ease; } .single-footer-widget .solutions-links li a:hover{ padding-left: 25px; } .single-footer-widget .solutions-links li a:before { position: absolute; top: -1px; left: 0; content: "\f105"; font-family: FontAwesome; color: #222; font-size: 18px; transition: all 0.3s ease-in-out 0.1s; } .single-footer-widget .solutions-links li a:hover:before{ left: 5px; color: #222; } .single-footer-widget .useful-links{ position: relative; display: block; } .single-footer-widget .useful-links li { line-height: 28px; margin-bottom: 10px; } .single-footer-widget .useful-links li:last-chil{ margin-bottom: 0; } .single-footer-widget .useful-links li a{ position: relative; display: block; color: #222; font-size: 16px; font-weight: 400; padding-left: 20px; transition: all 500ms ease; } .single-footer-widget .useful-links li a:hover{ padding-left: 25px; } .single-footer-widget .useful-links li a:before { position: absolute; top: -1px; left: 0; content: "\f105"; font-family: FontAwesome; color: #222; font-size: 18px; transition: all 0.3s ease-in-out 0.1s; } .single-footer-widget .useful-links li a:hover:before{ left: 5px; color: #222; } .single-footer-widget .newsletter-box{ position: relative; display: block; max-width: 270px; width: 100%; } .single-footer-widget .newsletter-box .text{ display: block; padding-bottom: 21px; } .single-footer-widget .newsletter-box .text p{ color: #222; line-height: 28px; margin: 0; } .single-footer-widget .newsletter-form { position: relative; display: block; max-width: 270px; width: 100%; } .single-footer-widget .newsletter-form input[type="email"]{ position: relative; display: block; background: #222; border: 1px solid #343434; color: #fff; font-size: 16px; font-weight: 400; width: 100%; height: 60px; margin-bottom: 0px; padding: 0 20px; padding-right: 60px; transition: all 500ms ease; } .single-footer-widget .newsletter-form input::-webkit-input-placeholder { color: #fff; } .single-footer-widget .newsletter-form input:-moz-placeholder { color: #fff; } .single-footer-widget .newsletter-form input::-moz-placeholder { color: #fff; } .single-footer-widget .newsletter-form input:-ms-input-placeholder { color: #fff; } .single-footer-widget .newsletter-form button { position: absolute; top: 0; right: 0; width: 55px; height: 60px; background: transparent; text-align: center; color: #fff; font-size: 16px; transition: all 700ms ease; } .single-footer-widget .newsletter-form input[type="email"]:focus { border: 1px solid #343434; background: #222; color: #fff; } .single-footer-widget .newsletter-form input[type="email"]:focus + button, .single-footer-widget .newsletter-form button:hover { background: #fff; color: #222; } .single-footer-widget .footer-social-links{ position: relative; display: block; margin-top: 24px; } .single-footer-widget .footer-social-links p { color: #222; margin: 0 0 19px; } .single-footer-widget .lat-project { position: relative; display: block; overflow: hidden; margin-top: 37px; margin-left: -7.5px; margin-right: -7.5px; } .single-footer-widget .lat-project li { position: relative; display: inline-block; float: left; margin: 0 7.5px 15px; } .single-footer-widget .lat-project li .img-holder { position: relative; display: block; overflow: hidden; } .single-footer-widget .lat-project li .img-holder img{ transition: all 0.5s ease-in-out 0.6s; width: 100%; transform: scale(1.1, 1.1); } .single-footer-widget .lat-project li:hover .img-holder img{ transform: scale(1.2, 1.2); } .single-footer-widget .lat-project li:hover .img-holder .overlay-style-one{ opacity: 1; } .single-footer-widget .lat-project li .img-holder .overlay-style-one .content a i{ color: #ffffff; font-size: 18px; filter: alpha(opacity=0); opacity: 0; transform: scale(3); transition: all 0.3s ease-in-out 0.3s; } .single-footer-widget .lat-project li:hover .img-holder .overlay-style-one .content a i{ filter: alpha(opacity=100); opacity: 1; transform: scale(1); transition-delay: 0.1s; } .single-footer-widget .lat-project li .img-holder .overlay-style-one .content a:hover i{ color: #222222; } .single-footer-widget .view-all-project{ position: relative; display: block; margin-top: 9px; } .single-footer-widget .view-all-project p{ color: #d9d7e8; line-height: 26px; } .single-footer-widget .view-all-project p a{ color: #f36727; font-weight: 500; transition: all 500ms ease; } .single-footer-widget .view-all-project p a:hover{ color: #d9d7e8; } /*** ============================================= Footer Bottom Area Style ============================================= ***/ .footer-bottom-area { position: relative; display: block; background: #222; padding: 32px 0 31px; } .footer-bottom-area .copyright-text { margin: 0; } .footer-bottom-area .copyright-text p { color: #fff; font-size: 16px; font-weight: 400; margin: 0; line-height: 22px; } .footer-bottom-area .copyright-text p a { color: #fff; font-weight: 500; transition: all 500ms ease; } .footer-bottom-area .copyright-text p a:hover{ color: #d9d7e8; } .footer-menu { position: relative; display: block; } .footer-menu li { position: relative; display: inline-block; float: left; margin-right: 20px; padding-right: 20px; line-height: 22px; } .footer-menu li:before { position: absolute; top: 8px; right: -2px; width: 5px; height: 5px; background: #494465; border-radius: 50%; content: ""; transition: all 500ms ease; transition-delay: .1s; } .footer-menu li:last-child:before{ display: none; } .footer-menu li:last-child{ margin-right: 0; padding-right: 0; } .footer-menu li a{ position: relative; display: block; color: #fff; font-size: 16px; font-weight: 400; text-transform: uppercase; transition: all 500ms ease; transition-delay: .2s; } .footer-menu li a:hover{ color: #ccc; } /*** ============================================= Subscribe Area Style ============================================= ***/ .subscribe-area { position: relative; display: block; background: #f36727; padding-top: 25px; padding-bottom: 25px; } .subscribe-title { position: relative; display: block; margin: 9px 0 9px; } .subscribe-title h3{ color: #ffffff; font-size: 24px; line-height: 32px; } .subscribe-form{} .subscribe-form { position: relative; display: block; max-width: 470px; width: 100%; } .subscribe-form input[type="email"]{ position: relative; display: block; background: #ffffff; border: 1px solid #f2f2f2; color: #868298; font-size: 16px; height: 50px; width: 100%; margin-bottom: 0px; padding: 0 20px; padding-right: 130px; border-radius: 5px; transition: all 500ms ease; } .subscribe-form button { position: absolute; top: 5px; right: 5px; bottom: 5px; width: 120px; height: 40px; background: #f36727; text-align: center; color: #ffffff; font-size: 18px; font-weight: 400; line-height: 38px; border-radius: 5px; text-transform: capitalize; font-family: 'Rubik', sans-serif; transition: all 700ms ease; } /*** ============================================= Latest Blog Area s2 Style ============================================= ***/ .latest-blog-area-s2{ position: relative; display: block; padding-top: 40px; padding-bottom: 70px; } .blog-style2{ position: relative; display: block; } .single-blog-style2{ position: relative; display: block; border: 1px solid #f0eef9; padding: 36px 50px 30px; margin-bottom: 30px; } .single-blog-style2 .meta-info { position: relative; display: block; overflow: hidden; margin-bottom: 19px; } .single-blog-style2 .meta-info li { position: relative; display: inline-block; float: left; line-height: 20px; margin-right: 40px; } .single-blog-style2 .meta-info li:last-child{ margin-right: 0; } .single-blog-style2 .meta-info li:before { position: absolute; right: -30px; bottom: 5px; width: 20px; height: 1px; background: #d5d3db; content: ""; display: block; } .single-blog-style2 .meta-info li:last-child:before{ display: none; } .single-blog-style2 .meta-info li a{ color: #868298; font-size: 16px; font-weight: 400; text-transform: capitalize; font-family: 'Rubik', sans-serif; transition: all 500ms ease; } .single-blog-style2 .meta-info li a span:before{ position: relative; top: 1px; color: #39345a; font-size: 16px; display: inline-block; padding-right: 8px; transition: all 500ms ease; } .single-blog-style2 .meta-info li a:hover{ color: #39345a; } .single-blog-style2 .blog-title{ position: relative; display: block; line-height: 28px; } .single-blog-style2 .blog-title a{ color: #393939; } .single-blog-style2 .post-date-readmore{ position: relative; display: block; margin-top: 34px; } .single-blog-style2 .post-date-readmore .post-date{ position: relative; display: block; } .single-blog-style2 .post-date-readmore .post-date span:before{ position: relative; display: inline-block; float: left; top: 6px; color: #39345a; font-size: 16px; padding-right: 8px; transition: all 500ms ease; } .single-blog-style2 .post-date-readmore .post-date p { position: relative; display: inline-block; float: left; color: #868298; margin: 0; line-height: 31px; } .single-blog-style2 .post-date-readmore .readmore{ display: block; line-height: 30px; } .single-blog-style2 .post-date-readmore .readmore a { display: inline-block; line-height: 30px; } .single-blog-style2.image-box{ position: relative; display: block; overflow: hidden; border: 0px solid; padding: 0; margin-bottom: 41px; } .single-blog-style2.image-box img{ width: 100%; } .single-blog-style2.image-box .overlay-box{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(26, 22, 46, 0.85); transition: all 500ms ease; transition-delay: 0.10s; padding: 46px 50px 30px; opacity: 1; } .single-blog-style2.image-box .meta-info li a{ color: #ffffff; } .single-blog-style2.image-box .meta-info li a span:before{ color: #ffffff; } .single-blog-style2.image-box .meta-info li a:hover{ color: #f36727; } .single-blog-style2.image-box .blog-title a{ color: #ffffff; } .single-blog-style2.image-box .post-date-readmore { margin-top: 170px; } .single-blog-style2.image-box .post-date-readmore .post-date span:before{ color: #ffffff; } .single-blog-style2.image-box .post-date-readmore .post-date p { color: #ffffff; } .single-blog-style2.image-box .post-date-readmore .readmore a { display: inline-block; color: #ffffff; line-height: 30px; } .more-blog-button{ position: relative; display: block; } .more-blog-button a { border: 1px solid #f0eef9; background: #ffffff; color: #222222; display: block; text-align: center; padding: 19px 0 19px; } .more-blog-button a:hover{ border-color: #dc571a; } /*** ============================================= Call To Action Area Style ============================================= ***/ .call-to-action-area{ position: relative; display: block; padding-top: 80px; } .call-to-action{ position: relative; display: block; overflow: hidden; padding-bottom: 20px; margin-bottom: 60px; } .call-to-action:before{ position: absolute; left: 0; bottom: 0px; width: 100%; height: 1px; background: #e9e8f0; content: ""; } .call-to-action:after{ position: absolute; left: 0; bottom: 0px; width: 60px; height: 1px; background: #f36727; content: ""; } .call_to_action_title { position: relative; display: block; float: left; margin: 16px 0; } .call_to_action_title .title{ color: #222222; font-size: 30px; font-weight: 600; line-height: 44px; text-transform: none; font-family: 'Poppins', sans-serif; } .call_to_action_text { position: relative; display: block; float: left; padding-left: 90px; max-width: 520px; margin: 30px 0; } .call_to_action_text p{ color: #222222; font-size: 20px; line-height: 30px; margin: 0; } .video-holder-box2{ position: relative; display: block; float: right; } .video-holder-box2 .icon-holder { position: relative; display: block; height: 120px; width: 120px; border-radius: 50%; padding: 9px; text-align: center; border: 1px solid #eae9f1; transition: all 500ms ease; } .video-holder-box2 .icon-holder .icon { display: block; height: 100%; width: 100%; border-radius: 50%; padding: 9px; border: 1px solid #eae9f1; } .video-holder-box2 .icon-holder .icon .inner { display: block; } .video-holder-box2 .icon-holder .icon .inner a{ position: relative; display: block; height: 80px; width: 80px; background: #f36727; color: #ffffff; line-height: 80px; border-radius: 50%; text-align: center; transition: all 500ms ease; } .video-holder-box2 .icon-holder .icon .inner a span:before{ font-size: 20px; } .video-holder-box2:hover .icon-holder .icon .inner a{ transform: rotate(360deg); background: #dd5416; } /*** ============================================= Quote Area Style2 Style ============================================= ***/ .choose-area.style2 { position: relative; display: block; background: #ffffff; padding-top: 0; padding-bottom: 60px; z-index: 1; } .choose-area.style2::before { display: none; } .single-choose-item.style2 { position: relative; display: block; background: #ffffff; padding: 55px 15px 52px; border: 1px solid #e9e8f0; margin-bottom: 40px; transition: all 500ms ease; } .single-choose-item.style2:hover{ border: 1px solid transparent; -webkit-box-shadow: 0px 2px 10px 3px #f0eef9; box-shadow: 0px 2px 10px 3px #f0eef9; } .single-choose-item.style2 .iocn-holder { display: block; margin-bottom: 35px; } .single-choose-item.style2 .title h3 { color: #222222; margin: 0 0 33px; } .single-choose-item.style2 .text p { color: #868298; margin: 0; } /*** ============================================= Capabilities Area Style ============================================= ***/ .capabilities-area{ position: relative; display: block; background: #f8f7ff; padding: 100px 0 100px; } .capabilities-image{ position: relative; display: block; } .capabilities-image img{ width: 100%; } .capabilities-content{ position: relative; display: block; } .capabilities-content .icon{ display: block; margin-bottom: 20px; } .capabilities-content .icon span:before{ color: #f36727; font-size: 65px; line-height: 65px; } .capabilities-content h1{ color: #222222; font-size: 30px; font-weight: 700; text-transform: uppercase; margin: 0 0 6px; } .capabilities-content span{ color: #222222; font-size: 18px; } .capabilities-content p { margin: 26px 0 0; } .capabilities-content ul { position: relative; display: block; margin-top: 20px; margin-bottom: 33px; } .capabilities-content ul li{ position: relative; display: block; padding-left: 30px; color: #222222; font-size: 18px; line-height: 40px; } .capabilities-content ul li:before { position: absolute; top: 10px; left: 0; content: "\e905"; font-family: 'icomoon'; color: #f36727; font-size: 20px; line-height: 20px; } .capabilities-content a.btn-one span:before{ color: #ffffff; } /*** ============================================= Working Process Area Style ============================================= ***/ .working-process-area { position: relative; display: block; background-attachment: fixed; background-size: cover; background-position: center top; background-repeat: no-repeat; padding: 96px 0 52px; z-index: 1; } .working-process-area::before { background: rgba(26, 22, 46, 0.90) none repeat scroll 0 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; content: ""; z-index: -1; } .working-process-item{ position: relative; display: block; padding-left: 80px; margin-bottom: 40px; } .working-process-item .icon{ position: absolute; top: 4px; left: 0; width: 80px; } .working-process-item .icon span:before { position: relative; display: block; background: #1a172c; width: 80px; height: 80px; border-radius: 50%; border: 1px solid #2d2944; text-align: center; color: #817d93; font-size: 35px; padding: 21px 0; z-index: 1; } .working-process-item:hover .icon span:before { background: #f36727; border-color: #f36727; color: #ffffff; transition: all 0.5s ease-in-out 0s; transform-style: preserve-3d; transform: perspective(0px) rotateX(0deg) rotate(360deg); z-index: 1; } .working-process-item .icon h2{ display: block; text-align: center; color: #2c2941; font-size: 30px; font-weight: 500; margin: 3px 0 0; text-transform: uppercase; } .working-process-item .text{ position: relative; display: block; padding-left: 30px; } .working-process-item .text h3{ color: #ffffff; margin: 0 0 3px; } .working-process-item .text span{ color: #f36727; } .working-process-item .text p{ margin: 16px 0 0; } /*** ============================================= Testimonial Area Style ============================================= ***/ .testimonial-area { position: relative; display: block; overflow: hidden; padding-top: 40px; } .testimonial-image { position: relative; display: block; min-height: 600px; max-width: 570px; width: 100%; } .testimonial-image .img-box{ position: absolute; bottom: 0; left: -180px; max-width: 570px; height: 600px; } .testimonial-image .quote-icon-box{ position: absolute; top: 145px; right: 30px; width: 270px; height: 270px; border: 1px solid #f0eef9; border-radius: 50%; padding: 40px; } .testimonial-image .quote-icon-box .inner{ width: 100%; height: 100%; border: 1px solid #f0eef9; border-radius: 50%; padding: 40px; } .testimonial-image .quote-icon-box .inner .icon { width: 100%; height: 100%; background: #f36727; border-radius: 50%; padding: 32px 0 30px; text-align: center; } .testimonial-content{ position: relative; display: block; padding-top: 60px; } .single-testimonial-item{ position: relative; display: block; } .single-testimonial-item .company-logo{ display: block; margin-bottom: 0px; } .single-testimonial-item .company-logo img{ width: auto; } .single-testimonial-item .text{ margin-bottom: 25px; } .single-testimonial-item .text p{ font-size: 18px; line-height: 30px; margin: 0; } .single-testimonial-item .client-info{ display: block; } .single-testimonial-item .client-info h3{ color: #222222; margin: 0 0 4px; } .single-testimonial-item .client-info span{ color: #f36727; } .single-testimonial-item .button{ position: relative; display: block; margin-top: 50px; padding-left: 200px; } .single-testimonial-item .button a{ position: relative; top: 7px; color: #222222; } .testimonial-content .owl-theme .owl-nav { position: absolute; left: 0; bottom: -20px; margin: 0; } .testimonial-content .owl-theme .owl-nav [class*="owl-"] { background: transparent; color: #f36727; font-size: 25px; font-weight: 400; height: 55px; width: 55px; line-height: 52px; margin: 0; padding: 0; border: 1px solid #f0eef9; transition: all 700ms ease 0s; border-radius: 50%; } .testimonial-content .owl-theme .owl-nav .owl-next { margin-left: 10px; } .testimonial-content .owl-theme .owl-nav [class*="owl-"]:hover{ border-color: #f36727; color: #f36727; } /*** ============================================= Breadcrumb area style ============================================= ***/ .breadcrumb-area { position: relative; background-attachment: scroll; background-position: center top; background-repeat: no-repeat; background-size: cover; border-top: 3px solid #241f40; /*padding: 140px 0 132px;*/ z-index: 1; } .breadcrumb-area::before { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(249, 249, 249, 0.85) none repeat scroll 0 0; content: ""; z-index: -1; } .breadcrumb-area .inner-content { position: relative; display: block; padding-top: 28px; } .breadcrumb-area .title { display: block; } .breadcrumb-area .title h1{ color: #222; font-size: 50px; line-height: 60px; font-weight: 700; text-transform: capitalize; margin: 0 0 10px; } .breadcrumb-area .title p{ color: #222; font-size: 20px; line-height: 30px; margin: 0; } /*** ============================================= History Area style ============================================= ***/ .history-area{ position: relative; display: block; background: #222; } .history-image { position: relative; display: block; margin-right: -65px; } .history-image img { max-width: none; float: right; } .history-content { position: relative; display: block; margin-left: 35px; padding-left: 65px; } .history-content .arrow-box { position: absolute; top: 50%; left: -80px; width: 120px; transform: rotate(180deg); margin-top: -59px; } .history-content .arrow-box span:before{ color: #222; font-size: 125px; line-height: 125px; } .accordion-holder { position: relative; display: block; padding-top: 95px; padding-bottom: 70px; } .accordion-holder .accordion { position: relative; display: block; } .accordion-holder .accordion .acc-btn { position: relative; display: block; padding-left: 160px; cursor: pointer; z-index: 2; margin-bottom: 30px; } .accordion-holder .accordion .acc-btn:before { position: absolute; top: 5px; bottom: -35px; left: 160px; width: 1px; height: auto; background: #2e2a45; content: ""; } .accordion-holder .accordion .acc-btn .year { position: absolute; top: 0px; left: 0px; width: 160px; } .accordion-holder .accordion .acc-btn .year:before { position: absolute; top: 5px; right: -8px; width: 15px; height: 15px; background: #E43C18; border: 5px solid #E43C18; content: ""; border-radius: 50%; z-index: 3; transition: all 900ms ease; } .accordion-holder .accordion .acc-btn .year h3{ color: #e3e2ec; font-size: 20px; line-height: 26px; transition: all 500ms ease; } .accordion-holder .accordion .acc-btn.active .year:before{ border: 5px solid #ffffff; } .accordion-holder .accordion .acc-btn.active .year h3{ color: #E43C18; } .accordion-holder .accordion .acc-btn .title { position: relative; display: block; padding-left: 40px; } .accordion-holder .accordion .acc-btn .title h3 { color: #ffffff; font-size: 20px; line-height: 26px; transition: all 700ms ease; } .accordion-holder .accordion .acc-btn.active .title h3{ color: #E43C18; } .accordion-holder .accordion .acc-content { position: relative; display: none; } .accordion-holder .accordion .acc-content .inner { position: relative; display: block; padding: 0px 0px 30px; padding-left: 200px; } .accordion-holder .accordion .acc-content .inner:before { position: absolute; top: 0px; bottom: -5px; left: 160px; width: 1px; background: #2e2a45; content: ""; transition: all 500ms ease; } .accordion-holder .accordion .acc-content p{ color: #fff; margin: 0; } .accordion-holder .accordion .acc-content.collapsed{ display:block; } /*** ============================================= Testimonial Area S2 style ============================================= ***/ .testimonial-area-s2{ position: relative; display: block; background: #ffffff; padding: 100px 0 100px; } .testimonial_s2_title{ position: relative; display: inline-block; float: left; } .testimonial_s2_text { position: relative; display: inline-block; float: left; max-width: 670px; width: 100%; padding-left: 80px; /*margin-top: -7px;*/ } .testimonial_s2_text p{ color: #222222; font-size: 20px; line-height: 30px; margin: 0; } .testimonial_s2_button { float: right; margin-top: -6px; } .single-testimonial-style2{ position: relative; display: block; border: 1px solid #f0eef9; padding: 12px 15px 19px; border-radius: 7px; } .single-testimonial-style2 .text{ display: block; padding-bottom: 15px; } .single-testimonial-style2 .text p{ line-height: 28px; margin: 0; } .single-testimonial-style2 .client-name { display: block; padding-bottom: 17px; } .single-testimonial-style2 .client-name h3{ color: #222222; font-size: 18px; margin: 0 0 2px; } .single-testimonial-style2 .client-name h3:hover { color: #999; } .single-testimonial-style2 .client-name span{ color: #f36727; } .single-testimonial-style2 .logo-box { position: relative; display: block; /*border: 1px solid #f0eef9;*/ border-bottom: none; padding: 19px 0; } .single-testimonial-style2 .logo-box:before{ position: absolute; left: 0; right: 0; bottom: 0; /*height: 1px;*/ background: #f0eef9; content: ""; } .single-testimonial-style2 .company-logo { display: block; overflow: hidden; width: 100%; /*height: 56px; text-align: center; padding: 0 50px;*/ } .single-testimonial-style2 .company-logo img{ width: auto; } .testimonial-area-s2 .inner-content{ overflow: hidden; } .testimonial-area-s2 .owl-carousel{ display:block; max-width: 370px; width:100%; margin: 0 auto; } .testimonial-area-s2 .owl-carousel .owl-stage-outer{ overflow: visible; padding: 0px 0px 50px; } .testimonial-area-s2 .owl-carousel .owl-stage-outer .owl-item.active .single-testimonial-style2{ transform: translateY(0px); -webkit-box-shadow: 0px 2px 9px 2px #f0eef9; box-shadow: 0px 2px 9px 2px #f0eef9; border: 1px solid transparent; } .testimonial-area-s2 .owl-dots { position: relative; display: block; margin: 0px !important; line-height: 4px; } .testimonial-area-s2 .owl-dots .owl-dot{ background-image:none; width: 7px; height: 7px; margin: 0px 5px; border: 0px solid #cecece; padding: 0px; background: #bfbccb; border-radius: 0%; transition: all 500ms ease; display: inline-block; } .testimonial-area-s2 .owl-dots .owl-dot span{ display:none; } .testimonial-area-s2 .owl-dots .owl-dot.active{ width: 14px; background: #222; border-radius: 0; } .testimonial-area-s2 .owl-dots .owl-dot:hover{ width: 14px; background: #222; border-radius: 0; } /*** ============================================= Single Service Area style ============================================= ***/ .certifications-area{ position: relative; background-attachment: scroll; background-size: cover; background-position: center top; background-repeat: no-repeat; padding: 100px 0 100px; z-index: 1; } .certifications-area:before{ background: rgba(245, 245, 245, 0.90) none repeat scroll 0 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; content: ""; z-index: -1; } .sec-title.certifications-title{} .sec-title.certifications-title .title{} .sec-title.certifications-title .title span{ color: #222; } .sec-title.certifications-title .title span:before { background: #222; } .sec-title.certifications-title p{ color: #222; } .single-certifications { display: block; max-width: 170px; width: 100%; margin: 0 auto; background: #222; border: 1px solid #222; text-align: center; padding: 30px 0 23px; transition: all 900ms ease; } .single-certifications .icon{ display: block; padding: 0 0 21px; } .single-certifications .icon span:before{ color: #ffffff; font-size: 75px; line-height: 75px; transition: all 900ms ease; transition-delay: .3s; } .single-certifications .title{ display: block; } .single-certifications .title h3{ color: #ffffff; font-size: 18px; text-transform: uppercase; transition: all 900ms ease; transition-delay: .5s; } .certifications-area .outer-box{ max-width: 670px; width: 100%; margin: 0 auto; } .certifications{ overflow: hidden; max-width: 570px; width: 100%; margin: 0 auto; } .certifications-area .owl-carousel{ display: block; max-width: 170px; width: 100%; margin: 0 auto; } .certifications-area .owl-carousel .owl-stage-outer{ overflow: visible; padding: 0px 0px 40px; } .certifications-area .owl-carousel .owl-stage-outer .owl-item.active .single-certifications{ background: #ffffff; border-color: #ffffff; } .certifications-area .owl-carousel .owl-stage-outer .owl-item.active .single-certifications .icon span:before{ color: #E43C18; } .certifications-area .owl-carousel .owl-stage-outer .owl-item.active .single-certifications .title h3{ color: #222222; } .certifications-area .owl-dots { position: relative; display: block; margin: 0px !important; line-height: 4px; } .certifications-area .owl-dots .owl-dot{ background-image:none; width: 7px; height: 7px; margin: 0px 5px; border: 0px solid #cecece; padding: 0px; background: #bfbccb; border-radius: 0%; transition: all 500ms ease; display: inline-block; } .certifications-area .owl-dots .owl-dot span{ display:none; } .certifications-area .owl-dots .owl-dot.active{ width: 14px; background: #E43C18; border-radius: 0; } .certifications-area .owl-dots .owl-dot:hover{ width: 14px; background: #E43C18; border-radius: 0; } /*** ============================================= Team Area style ============================================= ***/ .team-area { position: relative; display: block; padding-top: 100px; padding-bottom: 58px; } .team_s2_title{ position: relative; display: inline-block; float: left; } .team_s2_text { position: relative; display: inline-block; float: left; max-width: 670px; width: 100%; padding-left: 80px; margin-top: -7px; } .team_s2_text p{ color: #222222; font-size: 20px; line-height: 30px; margin: 0; } .team_s2_button { float: right; margin-top: -6px; } .single-team-member { position: relative; display: block; margin-bottom: 40px; transition: all 500ms ease; } .single-team-member .img-holder { position: relative; display: block; overflow: hidden; border-bottom: 3px solid #39345a; transition: all 0.4s ease-in-out 0s; } .single-team-member .img-holder::before { background: rgba(60, 55, 90, 0.85); top: 0px; left: 0px; bottom: 0px; right: 0px; content: ""; opacity: 0; position: absolute; z-index: 1; transition: all 0.4s ease-in-out 0s; } .single-team-member:hover .img-holder::before{ opacity: 1; } .single-team-member .img-holder img{ width: 100%; transition: all 0.4s ease-in-out 0s; } .single-team-member:hover .img-holder img{ transform: translateX(0%) translateY(0px) scale(1.0); } .single-team-member .name { position: relative; display: block; background: #ffffff; padding: 19px 0 0; z-index: 1; transform: translateX(0%) translateY(0px) scale(1.0); transition: all 500ms ease; transition-delay: .4s; } .single-team-member:hover .name{ transform: translateX(0%) translateY(0px) scale(0); } .single-team-member .name.overlay-content { position: absolute; left: 0; right: 0; bottom: -75px; display: block; z-index: 3; padding: 24px 0px 5px; background: #ffffff; opacity: 0; transition: all 0.4s ease-in-out 0s; border-top: 3px solid #f36727; -webkit-box-shadow: 0px 3px 6px 1px #f5f5f5; box-shadow: 0px 3px 6px 1px #f5f5f5; margin: 0; } .single-team-member:hover .name.overlay-content{ opacity: 1; transform: translateX(0%) translateY(-77px) scale(1); } .single-team-member .name h3{ display: block; color: #222222; font-size: 18px; font-weight: 600; margin: 0 0 8px; transition: all 500ms ease; transition-delay: .4s; } .single-team-member .name p{ margin: 0; line-height: 14px; } .single-team-member .name.overlay-content p{ color: #f36727; } .single-team-member .sociallinks-style-one { position: relative; display: block; overflow: hidden; padding: 15px 0 20px; } .single-team-member .sociallinks-style-one ul{ text-align: center; } .single-team-member .sociallinks-style-one li { display: inline-block; float: none; margin-right: 0px; margin: 0 7px; line-height: 30px; } /*** ============================================= About Area Style2 style ============================================= ***/ .about-area.Style2{ position: relative; display: block; padding: 70px 0 100px; } .mission-vision-content{ position: relative; display: block; margin-top: 63px; } .mission-vision-tab-box { position: relative; display: block; width: 50%; background: #222; float: left; padding: 60px 50px 60px; } .mission-vision-tab-box .sec-title { padding-bottom: 58px; } .mission-vision-tab-box .sec-title .title{} .mission-vision-tab-box .sec-title .title span { color: #ffffff; font-size: 18px; font-weight: 600; line-height: 28px; } .mission-vision-tab-box .sec-title .title span:before { background: #4e4a6d; } .mission-vision-tab-box .sec-title .title span:after { background: #4e4a6d; } .mission-vision-tab-box .inner-content{ position: relative; display: block; padding-right: 50px; } .mission-vision-tab-box .inner-content h2 { color: #ffffff; font-size: 24px; line-height: 30px; margin: 0 0 27px; } .mission-vision-tab-box .inner-content p{ color: #ffffff; margin: 0; } .mission-vision-tab-box .tab-btns { position: relative; display: block; overflow: hidden; padding-top: 33px; } .mission-vision-tab-box .tab-btns li { position: relative; display: inline-block; float: left; margin-right: 30px; padding-right: 30px; padding-left: 45px; border-right: 1px solid #4e4a6d; cursor: pointer; } .mission-vision-tab-box .tab-btns li:last-child{ margin-right: 0; padding-right: 0; border: none; } .mission-vision-tab-box .tab-btns li .icon { position: absolute; top: 7px; left: 0; } .mission-vision-tab-box .tab-btns li .icon span:before{ color: #75718c; font-size: 30px; line-height: 30px; } .mission-vision-tab-box .tab-btns li .title{} .mission-vision-tab-box .tab-btns li .title h3{ color: #75718c; font-size: 18px; line-height: 24px; } .mission-vision-tab-box .tab-btns li.active-btn .icon span:before, .mission-vision-tab-box .tab-btns li.active-btn .title h3{ color: #ffffff; } .mission-vision-tab-box .tab-content-box { position: relative; display: block; } .mission-vision-tab-box .tab-content-box .single-tab-content{ position: absolute; left: 0px; top: 0px; width: 100%; height: auto; visibility: hidden; } .mission-vision-tab-box .tab-content-box .single-tab-content.active-tab { position: relative; visibility: visible; z-index: 5; } .mission { position: absolute; top: 102px; right: -108px; } .vision { position: absolute; top: 102px; right: -85px; } .mission-vision-image{ position: relative; display: block; width: 50%; float: right; } /*** ============================================= Choose Area style3 style ============================================= ***/ .choose-area.style3{ position: relative; display: block; background: #fff; padding: 100px 0 60px; } .choose-area.style3:before{ display: none; } .choose-area.style3 .sec-title .title span:before { background: #ebe6e6; } .choose-area.style3 .sec-title p { color: #222222; } .choose-area.style3 .single-choose-item.style2 { background: #fafafa; padding: 55px 15px 52px; border: 1px solid #ccc; margin-bottom: 40px; border-radius: 6px; } .choose-area.style3 .single-choose-item.style2:hover{ background: #ffffff; border: 1px solid transparent; } /*** ============================================= Single Service Area style ============================================= ***/ .single-service-area{ position: relative; display: block; padding: 70px 0 92px; } .sec-title-box { position: relative; display: block; overflow: hidden; padding-bottom: 36px; /*margin-top: -8px;*/ } .sec-title-box.style2{ /*margin-top: -7px;*/ padding-bottom: 42px; } .sec-title-box h2{ color: #222222; font-size: 30px; line-height: 38px; font-weight: 700; text-transform: uppercase; margin: 0 0 14px; } .sec-title-box h3{ color: #222222; font-size: 24px; line-height: 32px; font-weight: 700; text-transform: uppercase; margin: 0 0 16px; } .sec-title-box span{ color: #222222; font-size: 18px; font-weight: 500; line-height: 28px; } .sec-title-box p{ margin: 0; } .single-service-top { position: relative; display: block; } .single-service-top .text{ position: relative; display: block; /*padding-bottom: 42px;*/ } .single-service-top .text p{ margin: 0; /*text-indent:2em;8*/ padding-bottom:20px; line-height: 30px; } .single-service-top .text h3{ padding-bottom:20px; } .single-service-top .img-holder{ position: relative; display: block; } .single-service-top .img-holder img{ width: 100%; transition: all 0.4s ease-in-out 0s; } .single-service-top .img-holder .video-box { position: absolute; top: 40px; right: 40px; width: 150px; height: 150px; display: block; padding-left: 20px; padding-top: 25px; z-index: 2; } .single-service-top .img-holder .video-box:before{ position: absolute; top: 0; left: 0; width: 150px; height: 150px; background: url(../images/icon/service-video-bg.png); content: ""; z-index: -1; } .single-service-top .img-holder .video-box a span:before{ color: #ffffff; font-size: 35px; line-height: 35px; } .single-service-top .img-holder .video-box h4{ color: #ffffff; font-size: 16px; font-weight: 500; line-height: 22px; margin: 20px 0 0; } .service-provide{ position: relative; display: block; overflow: hidden; margin-top: 54px; } .service-provide .single-provide{ position: relative; display: block; max-width: 370px; width: 100%; margin: 0 auto 30px; } .service-provide .single-provide:before { position: absolute; left: 0; right: 0; bottom: 0px; width: 50px; height: 3px; margin: 0 auto; background: #f36727; content: ""; z-index: 3; } .service-provide .single-provide:after { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 3px; background: #f36727; content: ""; transform: scaleX(0); transition: all 500ms ease; transition-delay: .9s; z-index: 3; } .service-provide .single-provide:hover:after{ transform: scaleX(1.0); } .service-provide .single-provide .img-holder{ position: relative; display: block; overflow: hidden; } .service-provide .single-provide .img-holder img{ width: 100%; transition: all 500ms ease; } .service-provide .single-provide:hover .img-holder img{ transform: scale(1.1); } .service-provide .single-provide .img-holder .static-box{ position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; background: rgba(60, 55, 90, 0.85); content: ""; opacity: 1; transform: scale(1.0); z-index: 1; transition: all 500ms ease; } .service-provide .single-provide:hover .img-holder .static-box{ opacity: 0; transform: scale(0); } .service-provide .single-provide .img-holder .static-box .content{ display: table; width: 100%; height: 100%; } .service-provide .single-provide .img-holder .static-box .content .title{ display: table-cell; vertical-align: middle; text-align: center; } .service-provide .single-provide .img-holder .static-box .content .title h3{ color: #ffffff; filter: alpha(opacity=0); opacity: 1; transform: scale(1.0); transition: all 900ms ease; transition-delay: .3s; } .service-provide .single-provide:hover .img-holder .static-box .content .title h3{ transform: scale(0.0); } .service-provide .single-provide .img-holder .overlay-box{ position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; background: rgba(60, 55, 90, 0.85); content: ""; opacity: 0; transform: scale(0) z-index: 1; transition: all 900ms ease; } .service-provide .single-provide:hover .img-holder .overlay-box{ opacity: 1; transform: scale(1.0) } .service-provide .single-provide .img-holder .overlay-box .content{ display: table; width: 100%; height: 100%; } .service-provide .single-provide .img-holder .overlay-box .content .text{ display: table-cell; vertical-align: middle; text-align: center; } .service-provide .single-provide .img-holder .overlay-box .content .text p{ color: #ffffff; margin: 0; filter: alpha(opacity=0); opacity: 0; transform: scale(3); transition: all 900ms ease; transition-delay: .3s; } .service-provide .single-provide:hover .img-holder .overlay-box .content .text p{ opacity: 1; transform: scale(1.0); } .team-support { position: relative; display: block; margin-top: 44px; } .team-support h2 { font-size: 24px; font-weight: 700; line-height: 32px; margin: 0 0 20px; } .team-support ul{ position: relative; display: block; overflow: hidden; } .team-support ul li{ position: relative; display: block; padding-left: 45px; /*margin-bottom: 26px;*/ } .team-support ul li:last-child{ margin-bottom: 0; } .team-support ul li .icon { position: absolute; top: 7px; left: 0; } .team-support ul li .icon span:before{ color: #f36727; font-size: 25px; line-height: 25px; } .team-support ul li .text{ position: relative; display: block; } .team-support ul li .text h3{ margin: 0 0 13px; } .team-support ul li .text p{ margin: 0; text-indent:0em; line-height: 30px; } .team-support .img-holder{ position: relative; display: block; margin-top: 6px; } .statistical-overview { position: relative; display: block; overflow: hidden; margin-top: 76px; } .statistical-overview .sec-title-box.style2{ } .statistical-overview .chart-box{ position: relative; display: block; border: 1px solid #f0eef9; padding: 33px 30px 37px; } .statistical-overview .chart-box h3{ font-size: 18px; margin: 0 0 18px; } .statistical-overview .chart-box .inner-chart{ position: relative; display: block; } .business-growth{ position: relative; display: block; overflow: hidden; margin-top: 54px; } .business-growth-left{ position: relative; display: block; border: 1px solid #f0eef9; padding: 36px 40px 31px; } .business-growth-left h5{ font-size: 14px; font-weight: 700; text-transform: uppercase; margin: 0 0 15px; } .business-growth-left h1 { font-size: 60px; font-weight: 700; margin: 0 0 15px; line-height: 50px; text-transform: uppercase; } .business-growth-left h3{ font-size: 24px; font-weight: 700; margin: 0 0 19px; } .business-growth-left p{ margin: 0; } .business-growth-right{ position: relative; display: block; } .business-growth-right p{ margin: 0; } .business-growth-right ul { display: block; overflow: hidden; margin-top: 11px; } .business-growth-right ul li{ line-height: 36px; } .single-service-bottom-box{ position: relative; display: block; overflow: hidden; width: 100%; margin-top: 80px; border-top: 1px solid #f0eef9; padding-top: 54px; } .single-service-bottom-box:before { position: absolute; top: 60px; bottom: 8px; left: 50%; width: 1px; background: #f0eef9; content: ""; } .single-service-bottom-box .single-item{ position: relative; display: block; max-width: 330px; width: 100%; padding-left: 90px; } .single-service-bottom-box .single-item.left{ float: left; } .single-service-bottom-box .single-item.right{ float: right; } .single-service-bottom-box .single-item .icon{ position: absolute; top: 6px; left: 0; } .single-service-bottom-box .single-item .icon span:before{ color: #1a172c; font-size: 65px; line-height: 65px; } .single-service-bottom-box .single-item .text{ position: relative; display: block; } .single-service-bottom-box .single-item .text p{ margin: 0 0 11px; } .single-service-bottom-box .single-item .text p span{ color: #222222; text-transform: uppercase; } .single-service-bottom-box .single-item .text a{} .single-service-sidebar{ position: relative; display: block; } .service-sidebar-title{ position: relative; display: block; padding-bottom: 27px; } .service-sidebar-title h3 { color: #222222; font-size: 20px; line-height: 20px; font-weight: 700; text-transform: capitalize; } .single-service-sidebar .single-sidebar{ position: relative; display: block; border: 1px solid #f0eef9; padding: 38px 30px 40px; margin-bottom: 50px; } .single-service-sidebar .service-pages{ display: block; } .single-service-sidebar .service-pages li{ position: relative; display: block; margin-bottom: 10px; z-index: 5; } .single-service-sidebar .service-pages li:last-child{ margin-bottom: 0; } .single-service-sidebar .service-pages li:before { position: absolute; top: 0; left: -30px; right: -30px; height: 1px; background: #f0eef9; content: ""; z-index: 3; transition: all 500ms ease; transition-delay: .2s; opacity: 0; } .single-service-sidebar .service-pages li:after { position: absolute; bottom: 0; left: -30px; right: -30px; height: 1px; background: #f0eef9; content: ""; z-index: 3; transition: all 500ms ease; transition-delay: .2s; opacity: 0; } .single-service-sidebar .service-pages li:hover:before, .single-service-sidebar .service-pages li.active:before{ opacity: 1; } .single-service-sidebar .service-pages li:hover:after, .single-service-sidebar .service-pages li.active:after{ opacity: 1; } .single-service-sidebar .service-pages li a{ position: relative; display: block; background: #f5f5f8; border: 1px solid #f0eef9; padding: 14px 20px 13px; color: #868298; font-size: 16px; font-weight: 500; text-transform: capitalize; font-family: 'Poppins', sans-serif; transition: all 500ms ease; transition-delay: .2s; } .single-service-sidebar .service-pages li a:hover, .single-service-sidebar .service-pages li.active a{ background: #ffffff; padding-left: 35px; color: #222222; border: 1px solid transparent; } .single-service-sidebar .service-pages li a:before { position: absolute; top: 0; left: 0; bottom: 0; font-family: 'icomoon'; content: "\e9b3"; color: #f36727; font-size: 16px; line-height: 16px; margin: 19px 0; transition: all 500ms ease; transition-delay: .1s; opacity: 0; transform: scale(0) } .single-service-sidebar .service-pages li a:hover:before, .single-service-sidebar .service-pages li.active a:before{ opacity: 1; transform: scale(1) } .single-service-sidebar .our-brochures { position: relative; display: block; } .single-service-sidebar .our-brochures li { position: relative; display: block; border: 1px solid #f0eef9; padding: 13px 60px 12px; padding-right: 0; margin-bottom: 20px; transition: all 500ms ease; } .single-service-sidebar .our-brochures li:hover{ -webkit-box-shadow: 0px 2px 10px 3px #f0eef9; box-shadow: 0px 2px 10px 3px #f0eef9; } .single-service-sidebar .our-brochures li:last-child{ margin-bottom: 0; } .single-service-sidebar .our-brochures li .icon-holder { position: absolute; top: 27px; left: 19px; margin: 0; } .single-service-sidebar .our-brochures li .icon-holder span:before{ color: #39345a; font-size: 25px; line-height: 25px; } .single-service-sidebar .our-brochures li .title-holder{} .single-service-sidebar .our-brochures li .title-holder h3 { color: #222222; font-size: 16px; font-weight: 500; line-height: 24px; margin: 0 0 2px; } .single-service-sidebar .our-brochures li .title-holder h3 span{ color: #868298; font-weight: 400; font-family: 'Rubik', sans-serif; } .single-service-sidebar .our-brochures li .title-holder a{ color: #868298; } .single-service-sidebar .our-brochures li .title-holder a span:before{ transform: scale(0); transition: all 500ms ease; } .single-service-sidebar .our-brochures li .title-holder a:hover span:before{ color: #f36727; transform: scale(1.0); } .single-service-sidebar .our-brochures li .title-holder a:hover{ color: #f36727; } .single-sidebar .lat-projects { position: relative; display: block; } .single-sidebar .lat-projects li { position: relative; display: block; margin-bottom: 20px; padding-bottom: 20px; padding-left: 80px; border-bottom: 1px solid #f0eef9; min-height: 80px; } .single-sidebar .lat-projects li:last-child{ margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .single-sidebar .lat-projects li .img-holder { position: absolute; top: 0px; left: 0; width: 80px; height: 80px; overflow: hidden; } .single-sidebar .lat-projects li .img-holder img { transition: all 0.4s ease-in-out 0.5s; width: 100%; transform: scale(1.0, 1.0); } .single-sidebar .lat-projects li:hover .img-holder img { transition-delay: 0s; transform: scale(1.2, 1.2); } .single-sidebar .lat-projects li .img-holder .overlay-style-one .box .content a i{ color: #fff; font-size: 16px; transition: all 500ms ease; } .single-sidebar .lat-projects li:hover .img-holder .overlay-style-one{ filter: alpha(opacity=100); opacity: 1; } .single-sidebar .lat-projects li .img-holder .overlay-style-one .box .content a:hover i{ color: #0a1821; } .single-sidebar .lat-projects li .title-holder { padding-left: 20px; } .single-sidebar .lat-projects li .title-holder .post-title { position: relative; font-size: 16px; line-height: 26px; font-weight: 600; margin: 0 0 1px; } .single-sidebar .lat-projects li .title-holder .post-title a{ color: #222222; transition: all 500ms ease; } .single-sidebar .lat-projects li .title-holder .post-title a:hover{ color: #f36727; } .single-sidebar .lat-projects li .title-holder span { color: #f36724; } .single-sidebar .lat-projects li .title-holder .button{ display: block; } .single-sidebar .lat-projects li .title-holder .button a p{ display: inline-block; font-size: 16px; margin: 0; transform: scale(0); transition: all 500ms ease; transition-delay: .2s; } .single-sidebar .lat-projects li .title-holder .button a:hover p{ transform: scale(1.0); } .single-sidebar .lat-projects li .title-holder .button a span:before { top: 3px; transition: all 500ms ease; transition-delay: .1s; transform: translate3d(-93px, 0px, 0px); } .single-sidebar .lat-projects li .title-holder .button a:hover span:before{ transform: translate3d(0px, 0px, 0px); } .sidebar-contact-box{ position: relative; display: block; overflow: hidden; background: #222222; padding: 45px 30px 50px; } .sidebar-contact-box h3{ color: #ffffff; font-weight: 700; margin: 0 0 3px; } .sidebar-contact-box span{ color: #ffffff; } .sidebar-contact-box ul { position: relative; display: block; overflow: hidden; border-top: 1px solid #ffffff; margin: 12px 0 0; padding: 23px 0 0; } .sidebar-contact-box ul li{ color: #ffffff; font-size: 18px; line-height: 28px; } .sidebar-contact-box a{ margin-top: 22px; background: #ffffff; color: #222222; padding: 17px 30px 17px; } /*** ============================================= Testimonial Page Sec style ============================================= ***/ .testimonial-page-sec{ position: relative; display: block; padding: 100px 0 20px; } .single-testimonial-box{ position: relative; display: block; margin-bottom: 80px; transition: all 500ms ease; } .single-testimonial-box:hover{} .single-testimonial-box .company-logo{ position: relative; display: block; } .single-testimonial-box .company-logo img{ width: auto; } .single-testimonial-box .text-holder{ position: relative; display: block; } .single-testimonial-box .text-holder .text { display: block; margin-top: -6px; margin-bottom: 32px; } .single-testimonial-box .text-holder .text p{ margin: 0; } .single-testimonial-box .text-holder .client-info{ position: relative; display: block; } .single-testimonial-box .text-holder .client-info .img-box{ width: 90px; } .single-testimonial-box .text-holder .client-info .img-box img{ width: 70px; height: 70px; border-radius: 50%; } .single-testimonial-box .text-holder .client-info .img-box, .single-testimonial-box .text-holder .client-info .name-box{ display: table-cell; vertical-align: middle; } .single-testimonial-box .text-holder .client-info .name-box{ margin-left: 20px; border-left: 1px solid #f0eef9; padding-left: 20px; } .single-testimonial-box .text-holder .client-info .name-box h3{ font-size: 18px; margin: 0 0 2px; } .single-testimonial-box .text-holder .client-info .name-box span{ color: #f36727; } /*** ============================================= Faq Area style ============================================= ***/ .faq-area{ position: relative; display: block; padding: 100px 0 100px; } .faq-area .sec-title { padding-bottom: 35px; margin: -4px auto 0; } .faq-area .sec-title h3{ font-size: 24px; font-weight: 700; text-transform: uppercase; } .faq-search-box form.search-form { position: relative; display: block; max-width: 540px; width: 100%; margin: 0px auto 0px; } .faq-search-box .search-form input[type="search"] { position: relative; display: block; background: #fff; border: 1px solid #f0eef9; color: #868298; font-size: 16px; font-weight: 400; height: 55px; letter-spacing: 1px; padding-left: 20px; padding-right: 80px; width: 100%; border-radius: 0; transition: all 500ms ease 0s; } .faq-search-box .search-form button { position: absolute; top: 0; bottom: 0; right: 0px; display: block; background: transparent; font-size: 14px; color: #f36727; height: 55px; width: 70px; border: 0px solid; line-height: 54px; text-align: center; border-radius: 0%; transition: all 500ms ease 0s; margin: 0; } .faq-search-box .search-form button i { font-size: 14px } .faq-search-box .search-form input[type="search"]:focus { border: 1px solid #f36727; background: #fff; color: #000000; } .faq-search-box .search-form input[type="search"]:focus + button, .faq-search-box .search-form button:hover { background: #f36727; color: #fff; } .faq-search-box p{ display: block; text-align: center; margin: 20px 0 52px; } .faq-search-box p a{ color: #f36727; } .faq-content-box { position: relative; display: block; } /*** ============================================= Main Project Area style ============================================= ***/ .main-project-area{ position: relative; display: block; background: #ffffff; padding: 100px 0 50px; } .project-filter { position: relative; display: inline-block; border: 1px solid #f0eef9; border-radius: 5px; margin-bottom: 60px; } .project-filter li { position: relative; display: inline-block; margin: 0 1px; } .project-filter li span { position: relative; display: block; cursor: pointer; color: #222222; font-size: 18px; line-height: 18px; font-weight: 500; text-transform: capitalize; transition: all 500ms ease 0s; font-family: 'Poppins', sans-serif; padding: 15px 20px 15px; border-radius: 0px; border-right: 1px solid #f0eef9; } .project-filter li:last-child span{ border-right: none; } .project-filter li.active span, .project-filter li:hover span { color: #f36727; } .single-project{ position: relative; display: block; max-width: 370px; width: 100%; margin: 0 auto 45px; } .single-project .img-holder{ position: relative; display: block; overflow: hidden; z-index: 5; } .single-project .img-holder .inner { position: relative; display: block; overflow: hidden; padding-bottom: 37px; } .single-project .img-holder .inner::before { position: absolute; top: 0px; left: 0px; bottom: 37px; right: 0px; background: rgba(60, 55, 90, 0.85); content: ""; transition: all 0.5s ease-in-out 0s; transform-style: preserve-3d; transform: perspective(1200px) rotateX(-90deg) translateZ(0px); } .single-project:hover .img-holder .inner::before{ transform: perspective(1200px) rotateX(0deg) translateZ(0px); transition-delay: 0.1s; } .single-project .img-holder img{ transition: all 0.5s ease-in-out 0.6s; width: 100%; } .single-project:hover .img-holder img {} .single-project .img-holder .overlay-content { position: absolute; left: 30px; bottom: 0; right: 30px; transition: all 0.7s ease-in-out 0s; transform: translateX(0%) translateY(117px) scale(1.0); } .single-project:hover .img-holder .overlay-content{ transform: translateX(0%) translateY(0px) scale(1.0); } .single-project .img-holder .overlay-content .categories{ position: relative; display: inline-block; } .single-project .img-holder .overlay-content .categories h5{ position: relative; display: block; padding: 9px 15px 5px; background: #f36727; color: #ffffff; font-size: 14px; font-weight: 500; text-transform: uppercase; font-family: 'Rubik', sans-serif; } .single-project .img-holder .overlay-content .inner-content { position: relative; display: block; background: #ffffff; -webkit-box-shadow: 0px 2px 3px 0px #F8F8F8; box-shadow: 0px 2px 3px 0px #F8F8F8; margin: 0 0px 5px; padding-bottom: 19px; } .single-project .img-holder .overlay-content .inner-content:before{ position: absolute; left: 0; bottom: 0; right: 0; width: 90px; height: 3px; margin: 0 auto; background: #f36727; content: ""; } .single-project .img-holder .overlay-content .inner-content .title{ position: relative; display: block; padding: 21px 0 18px; box-shadow: 0px 2px 3px 0px #F8F8F8; transition: all 0.2s ease-in-out 0s; } .single-project:hover .img-holder .overlay-content .inner-content .title{ box-shadow: none; } .single-project .img-holder .overlay-content .inner-content .title h3{ position: relative; display: block; } .single-project .img-holder .overlay-content .inner-content .title h3 a{ color: #222222; transition: all 0.2s ease-in-out 0s; } .single-project .img-holder .overlay-content .inner-content .title h3 a:hover{ color: #f36727; } .single-project .img-holder .overlay-content .inner-content .text{ position: relative; display: block; padding: 0 20px 0; margin-bottom: 17px; } .single-project .img-holder .overlay-content .inner-content .text p{ margin: 0; } .single-project .img-holder .overlay-content .inner-content .readmore{ display: block; text-align: center; } .single-project .img-holder .overlay-content .inner-content .readmore a span:before{ color: #222222; font-size: 22px; line-height: 22px; transition: all 0.2s ease-in-out 0s; } .single-project .img-holder .overlay-content .inner-content .readmore a:hover span:before{ color: #f36727; } /*** ============================================= Main Project Area Style2 style ============================================= ***/ .main-project-area.style2{ position: relative; display: block; padding-bottom: 100px; } .single-project-style2{ position: relative; display: block; overflow: hidden; max-width: 370px; width: 100%; margin: 0 auto 30px; } .single-project-style2 .img-holder{ position: relative; display: block; overflow: hidden; } .single-project-style2 .img-holder img{ transition: all 0.5s ease-in-out 0.6s; width: 100%; } .single-project-style2:hover .img-holder img { transform: scale(1.2, 1.2); } .single-project-style2 .overlay-style-one{ background: rgba(60, 55, 90, 0.85); } .single-project-style2:hover .overlay-style-one{ opacity: 1; } .single-project-style2 .img-holder .overlay-style-one .content{} .single-project-style2 .img-holder .overlay-style-one .content a { position: relative; top: -34px; display: inline-block; width: 30px; height: 30px; color: #ffffff; font-size: 25px; line-height: 30px; font-weight: 500; transform: translateX(0%) translateY(-50%) scale(0.5); transition: all 0.7s ease 0s; opacity: 0; } .single-project-style2 .img-holder .overlay-style-one .content a span:before{ font-weight: 600; transition: all 500ms ease; } .single-project-style2 .img-holder .overlay-style-one .content a:hover span:before{ color: #f36727; } .single-project-style2:hover .img-holder .overlay-style-one .content a { opacity: 1; transform: translateX(0) translateY(0%) scale(1); } .single-project-style2 .img-holder .title-holder { position: absolute; left: 0; bottom: 0; right: 0; background: #ffffff; display: block; padding: 22px 25px 23px; transition: all 700ms ease; transition-delay: .6s; opacity: 0; transform-style: preserve-3d; transform: perspective(1200px) rotateX(-90deg) translateZ(50px); z-index: 10; } .single-project-style2:hover .img-holder .title-holder{ -webkit-transform: perspective(1200px) rotateX(0deg) translateZ(0px); -moz-transform: perspective(1200px) rotateX(0deg) translateZ(0px); transform: perspective(1200px) rotateX(0deg) translateZ(0px); opacity: 1; transition-delay: 0.2s; } .single-project-style2 .img-holder .title-holder .title{} .single-project-style2 .img-holder .title-holder .title h3{ line-height: 30px; } .single-project-style2 .img-holder .title-holder .title h3 a{ color: #222222; transition: all 500ms ease; } .single-project-style2 .img-holder .title-holder .title h3 a:hover{ color: #f36727; } .single-project-style2 .img-holder .title-holder .readmore { line-height: 30px; } .single-project-style2 .img-holder .title-holder .readmore a{} .single-project-style2 .img-holder .title-holder .readmore a span:before { position: relative; top: 3px; display: inline-block; color: #222222; font-size: 20px; line-height: 20px; transition: all 500ms ease; } .single-project-style2 .img-holder .title-holder .readmore a:hover span:before{ color: #f36727; } .main-project-area.style2 .post-pagination { position: relative; display: block; margin-top: 20px; } /*** ============================================= Main Project Area Style3 style ============================================= ***/ .main-project-area.style3{ position: relative; display: block; } .main-project-area.style3 .single-project-style1{ margin-bottom: 50px; } /*** ============================================= Project single Area style ============================================= ***/ .project-single-area { position: relative; display: block; padding: 100px 0 56px; } .project-carousel-box{ position: relative; display: block; margin-right: -30px; } .project-carousel-box .project-single-carousel{} .project-carousel-box .project-single-carousel .single-item{ position: relative; display: block; } .project-carousel-box .project-single-carousel .single-item img{ width: 100%; } .project-carousel-box .owl-theme .owl-nav { position: absolute; bottom: 0; right: 0; width: 120px; height: 60px; z-index: 100; margin: 0; } .project-carousel-box .owl-theme .owl-nav .owl-prev { position: absolute; left: 0; top: 0; width: 60px; height: 60px; background: #f8f7ff; display: block; transition: all 700ms ease 0s; z-index: 10; border-radius: 0; margin: 0; padding: 0; } .project-carousel-box .owl-theme .owl-nav .owl-next { position: absolute; right: 0; top: 0; width: 60px; height: 60px; background: #f8f7ff; display: block; transition: all 700ms ease 0s; z-index: 10; border-radius: 0; margin: 0; padding: 0; } .project-carousel-box .owl-theme .owl-nav .owl-prev:hover{ background: #f36727; } .project-carousel-box .owl-theme .owl-nav .owl-next:hover{ background: #f36727; } .project-carousel-box .owl-theme .owl-nav div .fa:hover{ color: #fff; } .project-carousel-box .owl-theme .owl-nav div .fa { display: block; text-align: center; color: #222222; font-size: 24px; font-weight: 700; line-height: 60px; } .project-info { position: relative; display: block; border: 1px solid #f0eef9; padding: 55px 39px 15px; } .project-info .title { display: block; padding-bottom: 22px; } .project-info .title h3{ color: #222222; font-size: 24px; font-weight: 700; text-transform: uppercase; margin: 0 0 19px; } .project-info .title p{ margin: 0; } .project-info ul{ position: relative; display: block; overflow: hidden; } .project-info ul li{ line-height: 53px; border-bottom: 1px solid #f0eef9; } .project-info ul li:last-child{ border: none; } .project-info ul li span { display: inline-block; float: left; color: #222222; font-weight: 500; width: 90px; font-family: 'Poppins', sans-serif; } .project-info ul li b { display: inline-block; float: left; color: #222222; font-weight: 500; width: 20px; font-family: 'Poppins', sans-serif; } .project-info ul li .review-box{ display: inline-block; line-height: normal; } .project-info ul li .review-box ul{ } .project-info ul li .review-box ul li { border: none; line-height: 53px; } .project-description{ position: relative; display: block; margin-top: 53px; } .project-description .title{ display: block; padding-bottom: 26px; } .project-description .title h2{ color: #222222; font-size: 30px; font-weight: 700; text-transform: uppercase; } .project-description .inner-content{ position: relative; display: block; } /*** ============================================= Challenge Solution Area style ============================================= ***/ .challenge-solution-area{ position: relative; display: block; padding-bottom: 50px; } .challenge-solution-box { position: relative; display: block; margin-bottom: 50px; } .challenge-solution-box .img-holder{ position: relative; display: block; } .challenge-solution-box .img-holder img{ width: 100%; } .challenge-solution-box .img-holder .icon { position: absolute; top: 50px; right: -60px; width: 120px; height: 120px; background: #ffffff; border-radius: 50%; content: ""; text-align: center; display: block; padding: 27px 0; -webkit-box-shadow: 3px 0px 6px 0px #f6f6f6; box-shadow: 3px 0px 6px 0px #f6f6f6; transition: all 0.3s ease-in-out 0s; } .challenge-solution-box .img-holder .icon.solutions{ top: 50px; left: -60px; -webkit-box-shadow: -3px 0px 6px 0px #F6F6F6; box-shadow: -3px 0px 6px 0px #F6F6F6; } .challenge-solution-box:hover .img-holder .icon { background: #f36727; transition: all 0.5s ease-in-out 0s; transform-style: preserve-3d; transform: perspective(0px) translateY(5px)rotate(360deg); box-shadow: none; } .challenge-solution-box .img-holder .icon span:before{ color: #f36727; font-size: 65px; line-height: 65px; transition: all 900ms ease; } .challenge-solution-box:hover .img-holder .icon span:before{ color: #ffffff; } .challenge-solution-box .text-holder { position: relative; display: block; padding-top: 55px; } .challenge-solution-box .text-holder .sec-title{ padding-bottom: 37px; } .challenge-solution-box .text-holder .inner-content{ position: relative; display: block; } .challenge-solution-box .text-holder .inner-content span{ color: #222222; font-size: 18px; } .challenge-solution-box .text-holder .inner-content p { margin: 26px 0 0; } .challenge-solution-box .text-holder .inner-content ul{ display: block; overflow: hidden; margin-top: 10px; } .challenge-solution-box .text-holder .inner-content ul li{ position: relative; display: block; padding-left: 30px; color: #222222; font-size: 18px; line-height: 40px; } .challenge-solution-box .text-holder .inner-content ul li:before { position: absolute; top: 10px; left: 0; content: "\e905"; font-family: 'icomoon'; color: #f36727; font-size: 20px; line-height: 20px; } /*** ============================================= Blog Default Area style ============================================= ***/ #blog-area{ padding: 70px 0 100px; } .blog-default-area .single-blog-post { margin-bottom: 50px; } .blog-default-area .post-pagination { border-top: 1px solid #f0eef9; padding-top: 30px; } /*** ============================================= Blog large Area style ============================================= ***/ .blog-large-area{} .blog-large-area .blog-post { position: relative; display: block; z-index: 1; } .blog-large-area .single-blog-post { position: relative; display: block; border: 1px solid #f0eef9; padding: 29px 29px 22px; border-radius: 7px; margin-bottom: 60px; transition: all 900ms ease; } .blog-large-area .single-blog-post:hover{ -webkit-box-shadow: 0px 3px 10px 2px rgba(240,238,249,0.85); box-shadow: 0px 3px 10px 2px rgba(240,238,249,0.85); } .post-author-share-box{ position: relative; display: block; overflow: hidden; } .post-author-share-box .post-author{ position: relative; display: block; } .post-author-share-box .post-author .img-box{ width: 60px; } .post-author-share-box .post-author .img-box img{ border-radius: 50%; } .post-author-share-box .post-author .img-box, .post-author-share-box .post-author .title-box{ display: table-cell; vertical-align: middle; } .post-author-share-box .post-author .title-box{ padding-left: 20px; } .post-author-share-box .post-author .title-box h5{ font-size: 16px; margin: 0 0 6px; } .post-author-share-box .post-author .title-box p{ margin: 0; } .post-author-share-box .post-author .title-box p span:before{ position: relative; top: 0px; color: #39345a; font-size: 14px; line-height: 14px; display: inline-block; padding-right: 6px; } .post-author-share-box .share-box { position: relative; display: block; margin: 7px 0; } .post-author-share-box .share-box a{ display: block; overflow: hidden; float: right; padding-left: 10px; } .post-author-share-box .share-box a span:before { position: relative; display: block; width: 45px; height: 45px; border: 1px solid #f0eef9; border-radius: 50%; color: #39345a; font-size: 20px; line-height: 20px; text-align: center; padding: 11px 0; transition: all 900ms ease; } .post-author-share-box .share-box a:hover span:before{ border-color: #f36727; color: #f36727; } .post-author-share-box .share-box ul { position: absolute; top: 0; right: 55px; width: 0; height: 45px; opacity: 0; transform: scale(0); transition: all 900ms ease; padding-right: 0; } .post-author-share-box .share-box:hover ul{ transform: scale(1.0); width: 155px; opacity: 1; } .post-author-share-box .share-box ul li { display: inline-block; float: right; margin-left: 10px; } .post-author-share-box .share-box ul li:last-child{ margin-left: 0; } .post-author-share-box .share-box ul li a{ padding: 0; } .post-author-share-box .share-box ul li a i { display: block; width: 45px; height: 45px; border: 1px solid #f0eef9; border-radius: 50%; text-align: center; color: #868298; font-size: 14px; line-height: 44px; transition: all 500ms ease; } .post-author-share-box .share-box ul li a:hover i{ color: #ffffff; background: #f36727; border-color: #f36727; } .blog-large-area .single-blog-post .blog-title { font-size: 26px; line-height: 32px; display: block; padding: 25px 0 23px; } .blog-large-area .single-blog-post .blog-title a{ color: #393939; transition: all 500ms ease; } .blog-large-area .single-blog-post .blog-title a:hover{ color: #f36727; } .blog-large-area .single-blog-post .img-holder{ border-radius: 5px; } .blog-large-area .single-blog-post .text-holder{ position: relative; display: block; padding: 0; } .blog-large-area .single-blog-post .text-holder .text { display: block; margin-top: 25px; margin-bottom: 15px; border-bottom: 1px solid #f0eef9; padding-bottom: 16px; } .single-blog-post .meta-box { position: relative; display: block; overflow: hidden; } .single-blog-post .meta-box .meta-info { position: relative; display: block; overflow: hidden; margin: 3px 0; } .single-blog-post .meta-box .meta-info li { position: relative; display: inline-block; float: left; line-height: 20px; padding-right: 40px; } .single-blog-post .meta-box .meta-info li:before{ position: absolute; bottom: 5px; right: 10px; width: 20px; height: 1px; background: #39345a; content: ""; } .single-blog-post .meta-box .meta-info li:last-child{ padding-right: 0; } .single-blog-post .meta-box .meta-info li:last-child:before{ display: none; } .single-blog-post .meta-box .meta-info li a{ color: #868298; font-size: 16px; font-weight: 400; text-transform: capitalize; font-family: 'Rubik', sans-serif; transition: all 500ms ease; } .single-blog-post .meta-box .meta-info li a span:before{ position: relative; top: 1px; color: #39345a; font-size: 16px; line-height: 16px; display: inline-block; padding-right: 7px; } .single-blog-post .meta-box .meta-info li a:hover{ color: #222222; } .single-blog-post .meta-box .reamore{} .single-blog-post .meta-box .reamore a{ color: #222222; } .single-blog-post:hover .meta-box .reamore a{ color: #222222; } #blog-area .sidebar-wrapper { position: relative; display: block; } .sidebar-title { position: relative; display: block; overflow: hidden; padding-bottom: 12px; z-index: 1; } .sidebar-title:before{ position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #f2f1f9; content: ""; z-index: 10; } .sidebar-title:after{ position: absolute; left: 0; bottom: 0; width: 60px; height: 1px; background: #f36727; content: ""; z-index: 10; } .sidebar-title h3 { color: #222222; font-size: 22px; line-height: 42px; } .sidebar-title h3 span:before { position: relative; top: 4px; color: #39345a; font-size: 30px; line-height: 30px; display: inline-block; padding-right: 15px; } .sidebar-wrapper .single-sidebar { position: relative; display: block; overflow: hidden; margin-top: 60px; border: 1px solid #f0eef9; border-radius: 5px; padding: 15px 29px 0; } .sidebar-search-box .search-form { position: relative; display: block; max-width: 370px; margin-bottom: 60px; } .sidebar-search-box .search-form input[type="text"] { position: relative; display: block; background: #fff; border: 1px solid #f0eef9; color: #868298; font-size: 16px; font-weight: 400; height: 60px; max-width: 300px; width: 100%; letter-spacing: 1px; padding-left: 20px; padding-right: 20px; border-radius: 5px; transition: all 500ms ease 0s; } .sidebar-wrapper .search-form button { position: absolute; top: 0; bottom: 0; right: 0px; display: block; background: #f36727; color: #ffffff; font-size: 14px; height: 60px; width: 60px; border: 0px solid #fec144; line-height: 58px; text-align: center; border-radius: 5px; transition: all 500ms ease 0s; margin: 0; } .sidebar-wrapper .search-form button i { font-size: 14px } .sidebar-wrapper .search-form input[type="text"]:focus { border: 1px solid #39345a; background: #fff; color: #000000; } .sidebar-wrapper .search-form input[type="text"]:focus + button, .sidebar-wrapper .search-form button:hover { background: #39345a; border-color: #39345a; color: #fff; } .single-sidebar .categories { position: relative; display: block; padding: 32px 0 29px; } .single-sidebar .categories li { position: relative; display: block; padding-left: 30px; line-height: 30px; margin-bottom: 18px; transition: all 500ms ease; } .single-sidebar .categories li:last-child{ margin-bottom: 0; } .single-sidebar .categories li:before { position: absolute; top: 0; left: 0; width: 7px; height: 7px; background: #868298; content: ""; margin: 11px 0; transition: all 500ms ease; transition-delay: .3s; transform: perspective(0px) translateX(0px) rotate(0deg); } .single-sidebar .categories li:hover:before{ transform: perspective(0px) translateX(30px) rotate(0deg); } .single-sidebar .categories li:after{ position: absolute; top: 0; left: 7px; width: 7px; height: 7px; background: #b8b5c4; content: ""; margin: 11px 0; transition: all 500ms ease; transition-delay: .3s; transform: perspective(0px) translateX(0px) rotate(0deg); } .single-sidebar .categories li:hover:after{ transform: perspective(0px) translateX(30px) rotate(0deg); } .single-sidebar .categories li a { position: relative; display: block; color: #868298; font-size: 16px; font-weight: 500; font-family: 'Poppins', sans-serif; transition: all 500ms ease; transition-delay: .2s; transform: perspective(0px) translateX(0px) rotate(0deg); } .single-sidebar .categories li:hover a{ color: #f36727; transform: perspective(0px) translateX(30px) rotate(0deg); } .single-sidebar .categories li a span { position: relative; display: inline-block; text-align: center; float: right; width: 30px; height: 20px; background: #f8f7ff; border: 1px solid #f0eef9; border-radius: 0%; color: #868298; font-size: 14px; font-weight: 500; line-height: 18px; opacity: 1; margin: 5px 0; transition: all 500ms ease; transition-delay: .2s; } .single-sidebar .categories li:hover a span{ background: #f36727; border-color: #f36727; color: #ffffff; transform: perspective(0px) translateX(-30px) rotate(0deg); } .single-sidebar .popular-post { position: relative; display: block; overflow: hidden; padding: 40px 0 40px; } .single-sidebar .popular-post li { position: relative; display: block; border-bottom: 1px solid #f0eef9; min-height: 75px; padding-left: 75px; padding-bottom: 30px; margin-bottom: 30px; } .single-sidebar .popular-post li:last-child{ padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .single-sidebar .popular-post li .img-holder { position: absolute; top: 0px; left: 0; width: 75px; height: 75px; display: block; overflow: hidden; } .single-sidebar .popular-post li .img-holder img { transition: all 0.4s ease-in-out 0.5s; width: 100%; transform: scale(1.1, 1.1); } .single-sidebar .popular-post li:hover .img-holder img { transition-delay: 0s; transform: scale(1.2, 1.2); } .single-sidebar .popular-post li .img-holder .overlay-style-one{ background: rgba(60, 55, 90, 0.85); } .single-sidebar .popular-post li .img-holder .overlay-style-one .box .content a{ display: inline-block; width: 25px; height: 25px; filter: alpha(opacity=0); transform: scale(3); transition: all 0.3s ease-in-out 0.3s; opacity: 0; z-index: 5; } .single-sidebar .popular-post li:hover .img-holder .overlay-style-one .box .content a{ filter: alpha(opacity=100); transform: scale(1); transition-delay: 0.1s; opacity: 1; } .single-sidebar .popular-post li .img-holder .overlay-style-one .box .content a span:before{ color: #f36727; font-size: 25px; line-height: 25px; transition: all 500ms ease; } .single-sidebar .popular-post li .img-holder .overlay-style-one .box .content a:hover span:before{ color: #ffffff; } .single-sidebar .popular-post li:hover .img-holder .overlay-style-one{ opacity: 1; } .single-sidebar .popular-post li .title-holder { padding-left: 30px; } .single-sidebar .popular-post li .title-holder .post-title { font-size: 16px; line-height: 22px; font-weight: 600; margin: 0 0 5px; transition: all 500ms ease; } .single-sidebar .popular-post li .title-holder .post-title a{ color: #222222; transition: all 500ms ease; } .single-sidebar .popular-post li .title-holder .post-title a:hover{ color: #f36727; } .single-sidebar .popular-post li .title-holder span { line-height: 20px; } .sidebar-subscribe-form{ position: relative; display: block; max-width: 370px; width: 100%; background: #39345a; padding: 50px 30px 50px; margin-top: 60px; z-index: 1; } .sidebar-subscribe-form .icon{ position: relative; display: block; padding-bottom: 25px; } .sidebar-subscribe-form .icon span:before{ font-size: 85px; line-height: 85px; } .sidebar-subscribe-form h3{ color: #ffffff; font-size: 22px; margin: 0 0 8px; } .sidebar-subscribe-form p { color: #ffffff; margin: 0 0 22px; } .sidebar-subscribe-form form { position: relative; display: block; overflow: hidden; width: 100%; } .sidebar-subscribe-form form .input-field{ position: relative; display: block; } .sidebar-subscribe-form form .input-field input[type=email] { position: relative; display: block; background: transparent; border: 1px solid #514d6e; color: #85809f; font-size: 16px; font-weight: 400; max-width: 200px; width: 100%; height: 55px; padding-left: 40px; padding-right: 15px; border-radius: 5px; transition: all 500ms ease 0s; } .sidebar-subscribe-form form .input-field input::-webkit-input-placeholder { color: #85809f; } .sidebar-subscribe-form form .input-field input:-moz-placeholder { color: #85809f; } .sidebar-subscribe-form form .input-field input::-moz-placeholder { color: #85809f; } .sidebar-subscribe-form form .input-field input:-ms-input-placeholder { color: #85809f; } .sidebar-subscribe-form form .input-field .input-field-icon { position: absolute; top: 0; left: 0; bottom: 0; margin: 16px 0px; padding-left: 16px; } .sidebar-subscribe-form form .input-field .input-field-icon span:before{ color: #7871aa; font-size: 18px; line-height: 18px; } .sidebar-subscribe-form form button { position: absolute; top: 0; right: 0; width: 100px; height: 55px; background: #f36727; color: #ffffff; font-size: 18px; line-height: 52px; text-transform: capitalize; text-align: center; border: 0px solid #f2f2f2; transition: all 500ms ease 0s; border-radius: 5px; font-family: 'Rubik', sans-serif; } .sidebar-subscribe-form form .input-field input[type=email]:focus { border-color: #ffffff; } .sidebar-subscribe-form form button:hover { background: #ffffff; color: #222222; } .single-sidebar .instagram { position: relative; display: block; overflow: hidden; margin-left: -10px; margin-right: -10px; padding: 40px 0 0; } .single-sidebar .instagram li { position: relative; display: inline-block; float: left; margin: 0 10px 20px; transition: all 0.5s ease 0s; } .single-sidebar .instagram li .img-holder { position: relative; display: block; overflow: hidden; border-radius: 5px; transition: all 0.5s ease 0s; z-index: 5; } .single-sidebar .instagram li .img-holder img { transform: scale(1.1, 1.1); transition: all 0.5s ease 0s; width: 100%; } .single-sidebar .instagram li:hover .img-holder img { transform: scale(1, 1); } .single-sidebar .instagram li:hover .img-holder .overlay-style-one { filter: alpha(opacity=100); opacity: 1; transition-delay: 0s; } .single-sidebar .instagram li .img-holder .overlay-style-one .box .content a i{ color: #fff; font-size: 18px; filter: alpha(opacity=0); opacity: 0; transform: scale(3); transition: all 0.3s ease-in-out 0.3s; z-index: 5; } .single-sidebar .instagram li:hover .img-holder .overlay-style-one .box .content a i{ filter: alpha(opacity=100); opacity: 1; transform: scale(1); transition-delay: 0.1s; } .single-sidebar .instagram li .img-holder .overlay-style-one .box .content a:hover i{ color: #222222; } .follow-us-button { display: block; text-align: center; padding: 17px 0 17px; margin-top: 10px; margin-bottom: 40px; } .single-sidebar .popular-tag { position: relative; display: block; overflow: hidden; padding-top: 36px; padding-bottom: 15px; } .single-sidebar .popular-tag li { display: inline-block; float: left; margin-right: 20px; margin-bottom: 16px; } .single-sidebar .popular-tag li a { display: block; color: #868298; font-size: 16px; font-weight: 400; transition: all 500ms ease 0s; } .single-sidebar .popular-tag li.big a{ font-size: 24px; } .single-sidebar .popular-tag li a:hover{ color: #f36727; text-decoration: underline; } /*** ============================================= Blog Single Area style ============================================= ***/ #blog-area.blog-single-area { padding-top: 70px; padding-bottom: 60px; } .blog-single-area .blog-post { position: relative; display: block; } .blog-single-area .single-blog-post { position: relative; display: block; margin: 0; /*margin-top: -50px;*/ border: 1px solid #f0eef9; padding: 45px 99px 60px; border-radius: 5px; background: #ffffff; z-index: 99; } .single-blog-post .top-box { position: relative; display: block; overflow: hidden; } .blog-single-area .single-blog-post .meta-box .meta-info { position: relative; display: block; overflow: hidden; margin: 0 0 15px; } .blog-single-area .single-blog-post .meta-box .meta-info li { position: relative; display: inline-block; float: none; line-height: 20px; padding-right: 40px; } .blog-single-area .blog-title { font-size: 30px; line-height: 42px; margin: 0 0 32px; } .blog-single-area .quote{ position: relative; display: block; max-width: 530px; width: 100%; margin: 0 auto; } .blog-single-area .quote:before { position: absolute; top: -1px; left: -23px; font-family: "Flaticon"; content: "\f108"; color: #ebeaee; font-size: 60px; line-height: 60px; } .blog-single-area .quote h2{ font-size: 24px; line-height: 32px; } .single-blog-post .main-image-holder { position: relative; display: block; margin-top: 42px; } .main-image-xinwen{ position: relative; display: block; margin-top: 25px; margin-bottom:25px; text-align:center; } .blog-single-area .text-holder{ position: relative; display: block; padding-top: 55px; } .blog-single-area .text-holder .bottom{ position: relative; display: block; padding-top: 11px; } .blog-single-area .text-holder .bottom h3{ font-weight: 400; margin: 0 0 28px; font-family: 'Rubik', sans-serif; } .quality-with-integrity { position: relative; display: block; margin-top: 62px; } .quality-with-integrity .text { display: block; margin-top: -6px; } .quality-with-integrity .text h3{ font-size: 24px; font-weight: 700; line-height: 30px; margin: 0 0 27px; text-transform: uppercase; } .quality-with-integrity .img-box{ position: relative; display: block; } .quality-with-integrity .img-box img{ width: auto; } .author-quote-box { position: relative; display: block; margin-top: 55px; margin-bottom: 35px; } .author-quote-box .text { position: relative; display: block; padding-top: 12px; padding-left: 100px; padding-bottom: 13px; } .author-quote-box .text:before{ position: absolute; top: 0; left: 0; bottom: 0; width: 1px; background: #f0eef9; content: ""; } .author-quote-box .text:after { position: absolute; top: 50%; left: 0; bottom: 0; width: 1px; height: 50px; background: #f36727; content: ""; margin-top: -25px; } .author-quote-box .text p{ color: #868298; font-size: 26px; line-height: 36px; margin: 0 0 24px; } .author-quote-box .name{ position: relative; display: block; padding-left: 70px; } .author-quote-box .name:before { position: absolute; left: 0; bottom: 0; width: 50px; height: 1px; background: #f36727; content: ""; top: 0; margin: 12px 0; } .author-quote-box .name h3{ font-size: 18px; } .blog-single-area .more-text-box{ position: relative; display: block; margin-bottom: 36px; } .some-features-box{ position: relative; display: block; } .some-features-box h3{ font-size: 18px; margin: 0 0 17px; } .some-features-box ul{ display: block; overflow: hidden; } .some-features-box ul li{ position: relative; display: block; padding-left: 30px; line-height: 36px; } .some-features-box ul li:before { position: absolute; top: 0; left: 0; width: 7px; height: 7px; background: #868298; content: ""; margin: 14px 0; transition: all 500ms ease; transition-delay: .3s; transform: perspective(0px) translateX(0px) rotate(0deg); } .some-features-box ul li:after { position: absolute; top: 0; left: 7px; width: 7px; height: 7px; background: #b8b5c4; content: ""; margin: 14px 0; transition: all 500ms ease; transition-delay: .3s; transform: perspective(0px) translateX(0px) rotate(0deg); } .some-features-box p{ margin-top: 31px; } .tag-holder-box { position: relative; display: block; overflow: hidden; border-top: 1px solid #f0eef9; margin-top: 52px; padding-top: 22px; } .tag-holder-box h5 { color: #222222; font-size: 18px; display: inline-block; float: left; padding-right: 15px; line-height: 30px; } .tag-holder-box ul{ display: inline-block; float: left; } .tag-holder-box ul li{ display: inline-block; float: left; line-height: 30px; margin-right: 4px; } .tag-holder-box ul li:last-child{ margin-right: 0; } .tag-holder-box ul li a{ display: block; color: #868298; font-size: 18px; font-weight: 400; transition: all 500ms ease; } .tag-holder-box ul li a:hover{ color: #222222; } .author-box-holder { position: relative; display: block; overflow: hidden; background: #39345a; border-radius: 6px; padding: 45px 50px 50px; margin: 60px 0 100px; } .author-box-holder .inner-box{ position: relative; display: block; } .author-box-holder .inner-box .img-box{ width: 100px; } .author-box-holder .inner-box .img-box img{ border-radius: 50%; } .author-box-holder .inner-box .img-box, .author-box-holder .inner-box .text{ display: table-cell; vertical-align: middle; } .author-box-holder .inner-box .text{ padding-left: 40px; } .author-box-holder .inner-box .text h3{ color: #ffffff; margin: 0 0 19px; } .author-box-holder .inner-box .text p{ color: #868298; line-height: 24px; margin: 0; } .author-box-holder .inner-box .text .author-social-links{ display: block; overflow: hidden; margin-top: 23px; } .author-box-holder .inner-box .text .author-social-links ul{ overflow: hidden; } .author-box-holder .inner-box .text .author-social-links ul li a i{ background: #39345a; color: #868298; border-color: #4a4568; } .author-box-holder .inner-box .text .author-social-links ul li a:hover i{ color: #f36727; background: #ffffff; border-color: #ffffff; } .single-blog-title-box{ position: relative; display: block; padding-bottom: 29px; margin-top: -5px; } .single-blog-title-box h2{ font-size: 24px; font-weight: 700; text-transform: uppercase; } .blog-single-area .inner-comment-box { position: relative; display: block; overflow: hidden; padding-bottom: 30px; } .blog-single-area .inner-comment-box .single-comment-box { position: relative; display: block; padding-left: 80px; margin-bottom: 35px; border-bottom: 1px solid #f0eef9; padding-bottom: 32px; } .blog-single-area .inner-comment-box .single-comment-box.pd-left{ margin-left: 50px; } .blog-single-area .inner-comment-box .single-comment-box .img-box { position: absolute; left: 0; top: 5px; width: 80px; height: 80px; } .blog-single-area .inner-comment-box .single-comment-box .text-box { position: relative; display: block; margin-left: 30px; } .blog-single-area .inner-comment-box .single-comment-box .text-box .top { position: relative; display: block; overflow: hidden; margin-bottom: 6px; } .blog-single-area .inner-comment-box .single-comment-box .text-box .top .name{ display: block; padding-bottom: 2px; } .blog-single-area .inner-comment-box .single-comment-box .text-box .top .name h3{ font-size: 18px; font-weight: 500; } .blog-single-area .inner-comment-box .single-comment-box .text-box .top .date span { color: #303030; font-size: 16px; font-weight: 400; font-family: 'Rubik', sans-serif; } .blog-single-area .inner-comment-box .single-comment-box .text-box .text{} .blog-single-area .inner-comment-box .single-comment-box .text-box .text p{ margin: 0 0 11px; } .blog-single-area .inner-comment-box .single-comment-box .text-box .reply-button{ position: relative; display: block; overflow: hidden; } .blog-single-area .inner-comment-box .single-comment-box .text-box .reply-button a{ color: #39345a; font-size: 16px; font-weight: 600; text-transform: capitalize; font-family: 'Poppins', sans-serif; transition: all 500ms ease; } .blog-single-area .inner-comment-box .single-comment-box .text-box .reply-button a:hover{ color: #f36727; } .blog-single-area .inner-comment-box .single-comment-box .text-box .reply-button a span:before{ font-size: 15px; line-height: 15px; display: inline-block; padding-right: 9px; } .add-comment-box { position: relative; display: block; overflow: hidden; } .add-comment-box #add-comment-form {} .add-comment-box #add-comment-form .field-label{ position: relative; display: block; color: #868298; font-size: 16px; font-weight: 500; padding-bottom: 4px; } .add-comment-box #add-comment-form .field-label span{ color: #f36727; font-size: 16px; } .add-comment-box #add-comment-form input[type="text"], .add-comment-box #add-comment-form input[type="email"], .add-comment-box #add-comment-form textarea{ display: block; background: #fff none repeat scroll 0 0; border: 1px solid #f0eef9; color: #848484; font-size: 15px; font-weight: 400; height: 55px; padding: 0 30px; width: 100%; border-radius: 5px; margin-bottom: 24px; transition: all 500ms ease; } .add-comment-box #add-comment-form textarea { height: 170px; padding: 13px 30px; margin-bottom: 35px; } .add-comment-box #add-comment-form input[type="text"]:focus{ border-color: #f36727; } .add-comment-box #add-comment-form input[type="email"]:focus{ border-color: #f36727; } .add-comment-box #add-comment-form textarea:focus{ border-color: #f36727; } .add-comment-box #add-comment-form button { position: relative; display: block; width: 190px; height: 55px; line-height: 54px; border-radius: 5px; padding: 0; } .add-comment-box #add-comment-form button:hover{} .blog-prev-next-option { position: relative; display: block; overflow: hidden; width: 100%; margin-top: 60px; border-bottom: 1px solid #f0eef9; padding-bottom: 60px; margin-bottom: 100px; } .blog-prev-next-option:before{ position: absolute; left: 50%; top: 0px; bottom: 60px; width: 1px; background: #f0eef9; content: ""; } .blog-prev-next-option .single{ position: relative; display: block; width: 50%; } .blog-prev-next-option .single.prev { position: relative; display: block; overflow: hidden; float: left; padding-left: 100px; min-height: 100px; } .blog-prev-next-option .single.prev .image-thumb{ position: absolute; top: 0; left: 0; width: 100px; height: 100px; } .blog-prev-next-option .single .image-thumb img{ width: 100%; border-radius: 5px; } .blog-prev-next-option .single.prev .title { padding-left: 30px; max-width: 380px; } .blog-prev-next-option .single .title { /*margin-top: -6px;*/ } .blog-prev-next-option .single .title h3 { color: #222222; font-size: 18px; font-weight: 600; line-height: 26px; margin: 0 0 17px; } .blog-prev-next-option .single .title a{ color: #868298; font-size: 16px; font-weight: 400; transition: all 500ms ease; } .blog-prev-next-option .single .title a:hover{ color: #222222; } .blog-prev-next-option .single .title a i{ display: inline-block; padding-right: 5px; font-size: 18px; } .blog-prev-next-option .single.next{ position: relative; display: block; overflow: hidden; float: right; padding-right: 100px; min-height: 100px; } .blog-prev-next-option .single.next .image-thumb{ position: absolute; top: 0; right: 0; width: 100px; height: 100px; } .blog-prev-next-option .single.next .title { max-width: 380px; padding-right: 30px; text-align: right; float: right; } .blog-prev-next-option .single.next .title a i { display: inline-block; padding-left: 5px; font-size: 18px; } .breadcrumb-area.blog-single-post { padding: 142px 0 180px; } .blog-single-social-links { position: absolute; top: 150px; left: -22px; width: 45px; height: 210px; z-index: 999; } .blog-single-social-links li{ display: block; float: none; margin-bottom: 10px; } .blog-single-social-links li:last-child{ margin-bottom: 0; } .blog-single-social-links li a i{ position: relative; display: block; width: 45px; height: 45px; background: #ffffff; border: 1px solid #f0eef9; border-radius: 50%; color: #868298; font-size: 14px; line-height: 44px; text-align: center; transition: all 500ms ease 0s; } .blog-single-social-links li a:hover i{ background: #f36727; border-color: #f36727; color: #ffffff; } .related-blog-post{ position: relative; display: block; } .related-blog-post .single-blog-title-box{ padding-bottom: 44px; } .single-related-blog{ position: relative; display: block; margin-bottom: 40px; } .single-related-blog .img-box{ position: relative; display: block; overflow: hidden; } .single-related-blog .img-box img{ width: 100%; } .single-related-blog .img-box .overlay-content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 500ms ease; transition-delay: .3s; opacity: 1; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+36,1e5799+40,1e5799+40,1e5799+40,1e5799+42,1e5799+42,1e5799+49,0b0722+72&0+35,0.67+71,1+100 */ background: -moz-linear-gradient(top, rgba(67,67,67,0) 35%, rgba(67,67,67,0.02) 36%, rgba(67,67,67,0.09) 40%, rgba(67,67,67,0.13) 42%, rgba(67,67,67,0.26) 49%, rgba(57,57,57,0.67) 71%, rgba(52,52,52,0.68) 72%, rgba(52,52,52,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(67,67,67,0) 35%,rgba(67,67,67,0.02) 36%,rgba(67,67,67,0.09) 40%,rgba(67,67,67,0.13) 42%,rgba(67,67,67,0.26) 49%,rgba(57,57,57,0.67) 71%,rgba(52,52,52,0.68) 72%,rgba(52,52,52,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(67,67,67,0) 35%,rgba(67,67,67,0.02) 36%,rgba(67,67,67,0.09) 40%,rgba(67,67,67,0.13) 42%,rgba(67,67,67,0.26) 49%,rgba(57,57,57,0.67) 71%,rgba(52,52,52,0.68) 72%,rgba(52,52,52,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#0b0722',GradientType=0 ); /* IE6-9 */ } .single-related-blog .img-box .overlay-content h3{ position: absolute; left: 30px; right: 30px; bottom: 23px; font-size: 18px; line-height: 26px; } .single-related-blog .img-box .overlay-content h3 a{ color: #ffffff; } /*** ============================================= Highlights area style ============================================= ***/ .highlights-area{ position: relative; display: block; padding-top: 60px; padding-bottom: 20px; } .highlights ul{ position: relative; display: block; overflow: hidden; } .single-highlights-box{ position: relative; display: inline-block; float: left; max-width: 390px; width: 100%; border-right: 1px solid #f0eef9; margin-bottom: 40px; } .single-highlights-box:last-child{ border-right: none; margin-bottom: 0; } .single-highlights-box .icon{ display: block; padding-bottom: 12px; } .single-highlights-box .icon span:before{ color: #39345a; font-size: 65px; line-height: 65px; } .single-highlights-box h3{ margin: 0 0 13px; } .single-highlights-box p{ line-height: 16px; margin: 0; } /*** ============================================= Categories Area style ============================================= ***/ .categories-area{ position: relative; display: block; } .categories-box{ display: block; width: 100%; } .single-categories-box{ position: relative; display: block; width: 50%; float: left; background-attachment: fixed; background-position: center top; background-repeat: no-repeat; background-size: cover; padding: 85px 50px 90px; z-index: 1; } .single-categories-box::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(204, 204, 204, 0.90); content: ""; z-index: -1; } .single-categories-box h3{ color: #fff; margin: 0 0 10px; } .single-categories-box h2{ color: #fff; font-size: 30px; font-weight: 700; text-transform: capitalize; margin: 0 0 14px; } .single-categories-box p{ color: #fff; line-height: 22px; margin: 0 0 24px; } .single-categories-box a{ padding: 11px 22px 12px; } .single-categories-box.style2{ background-attachment: scroll; } .single-categories-box.style2:before{ background: rgba(34, 34, 34, 0.90); } .single-categories-box.style2 a{ background: #999; } .single-categories-box.style2 a:hover{ background: #222; } /*** ============================================= Shop area style ============================================= ***/ #shop-area { padding-top: 70px; padding-bottom: 100px; } .main-shop-area{ position: relative; display: block; background: #ffffff; } #shop-area .shop-content { position: relative; display: block; } .showing-result-shorting { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; align-items: center; padding-bottom: 22px; border-bottom: 1px solid #f0eef9; margin-bottom: 50px; } .showing-result-shorting .showing{} .showing-result-shorting .shorting{ } .showing-result-shorting .showing p { color: #868298; font-size: 16px; font-weight: 400; margin: 0; } .single-product-item { position: relative; display: block; border: 1px solid #f0eef9; margin-bottom: 40px; transition: all 500ms ease; padding-bottom: 15px; } .single-product-item:hover{ box-shadow: 0px 3px 8px #f0f0f0; } .single-product-item .img-holder{ position: relative; display: block; overflow: hidden; } .single-product-item .img-holder::before { background: rgba(255, 255, 255, 0.30); top: 0px; left: 0px; bottom: 0px; right: 0px; content: ""; opacity: 0; position: absolute; z-index: 1; transition: all 0.4s ease-in-out 0s; } .single-product-item:hover .img-holder::before{ opacity: 1; } .single-product-item .img-holder img{ transform: scale(1); transition: all 0.7s ease 0s; width: 100%; } .single-product-item:hover .img-holder img{ transform: scale(1.1); } .single-product-item .title-holder { position: relative; display: block; border-top: 1px solid #f0eef9; padding-top: 16px; } .single-product-item .title-holder .title { margin: 0 0 12px; display: block; border-bottom: 1px solid #f0eef9; margin: 0 39px 17px; padding-bottom: 14px; text-align:left; } .single-product-item .title-holder .title a{ color: #222222; transition: all 500ms ease; } .single-product-item .title-holder .rate-review-box { position: relative; display: block; overflow: hidden; padding: 0 39px; } .single-product-item .title-holder .rate-box{ position: relative; display: block; } .single-product-item .title-holder .rate-box p{ color: #222; font-weight: 500; line-height: 25px; margin: 0; } .single-product-item .title-holder .rate-box p del{ color: #bfbccb; } .single-product-item .title-holder .review-box{ position: relative; display: block; } .single-product-item .title-holder .review-box ul{ line-height: 20px; } .single-product-item .title-holder .review-box ul li i{ color: #bfbccb; } .shop-sidebar-wrapper { position: relative; display: block; border: 1px solid #f0eef9; border-bottom: none; padding-top: 39px; } .shop-sidebar-wrapper .single-sidebar-box { position: relative; display: block; border-bottom: 1px solid #f0eef9; padding: 0 49px; } .single-sidebar-box.pdbtm{ padding-bottom: 32px; } .shop-sidebar-wrapper .search-form { position: relative; display: block; max-width: 270px; width: 100%; margin-bottom: 39px; } .shop-sidebar-wrapper .search-form input[type="text"] { position: relative; display: block; background: #fff; border: 1px solid #f0eef9; color: #868298; font-size: 16px; font-weight: 400; height: 50px; max-width: 270px; width: 100%; padding-left: 20px; padding-right: 70px; border-radius: 0px; transition: all 500ms ease 0s; } .shop-sidebar-wrapper .search-form button { position: absolute; top: 0; bottom: 0; right: 0px; display: block; background: #ffffff; color: #7c7b7b; font-size: 14px; height: 50px; width: 60px; border: 1px solid #f0eef9; border-left: none; line-height: 48px; text-align: center; border-radius: 0px; transition: all 500ms ease 0s; margin: 0; } .shop-sidebar-wrapper .search-form button i { font-size: 14px } .shop-sidebar-wrapper .search-form input[type="text"]:focus { border: 1px solid #222; background: #fff; color: #000; } .shop-sidebar-wrapper .search-form input[type="text"]:focus + button, .shop-sidebar-wrapper .search-form button:hover { background: #222; border-color: #222; color: #fff; } .shop-sidebar-title { position: relative; display: block; padding-top: 36px; } .shop-sidebar-title h3{ display: block; text-transform: capitalize; } .single-sidebar-box .categories { position: relative; display: block; padding: 9px 0 7px; } .single-sidebar-box .categories li { position: relative; display: block; padding-left: 20px; line-height: 44px; border-bottom: 1px solid #f0eef9; transition: all 500ms ease; } .single-sidebar-box .categories li:last-child{ border-bottom: none; } .single-sidebar-box .categories li:before { position: absolute; top: 0; left: 0; width: 7px; height: 7px; background: #222; border-radius: 50%; content: ""; margin: 18px 0; transition: all 500ms ease; transition-delay: .3s; transform: perspective(0px) translateX(0px) rotate(0deg); } .single-sidebar-box .categories li:hover:before{ background: #999; transform: perspective(0px) translateX(10px) rotate(0deg); } .single-sidebar-box .categories li a { position: relative; display: block; color: #222; font-size: 16px; font-weight: 400; font-family: 'Poppins', sans-serif; transition: all 500ms ease; transition-delay: .2s; transform: perspective(0px) translateX(0px) rotate(0deg); } .single-sidebar-box .categories li:hover a{ color: #999; transform: perspective(0px) translateX(10px) rotate(0deg); } .categories-view-all-button{ position: relative; display: block; } .categories-view-all-button a{ color: #f36727; font-size: 18px; font-weight: 400; text-transform: capitalize; } .categories-view-all-button a span:before{ position: relative; top: -1px; font-size: 14px; line-height: 14px; font-weight: 300; display: inline-block; padding-right: 6px; } .shop-sidebar-wrapper .price-ranger { margin-top: 28px; margin-bottom: 40px; } .shop-sidebar-wrapper .price-ranger .ui-widget-content { background: #f0eef9; border: none; height: 2px; } .shop-sidebar-wrapper .price-ranger .ui-slider-handle { background: #f36727 none repeat scroll 0 0; border: 2px solid #f36727; border-radius: 50%; height: 10px; margin-left: -4px; outline: medium none; width: 10px !important; cursor: pointer; } .shop-sidebar-wrapper .price-ranger .ui-slider-horizontal .ui-slider-handle { top: -4px; } .shop-sidebar-wrapper .price-ranger .ui-slider .ui-slider-range { background: #bfbccb; } .shop-sidebar-wrapper .price-ranger #slider-range { margin-left: 4px; margin-right: 6px; margin-top: 0; } .shop-sidebar-wrapper .price-ranger .ranger-min-max-block { margin-bottom: 0px; margin-top: 25px; } .shop-sidebar-wrapper .price-ranger .ranger-min-max-block input { display: inline-block; } .shop-sidebar-wrapper .price-ranger .ranger-min-max-block input[type="submit"] { float: left; margin-right: 10px; padding: 11px 0 11px; text-align: center; width: 90px; border: none; color: #ffffff; cursor: pointer; margin-top: 0; border-radius: 0; } .shop-sidebar-wrapper .price-ranger .ranger-min-max-block input[type="submit"]:hover{} .shop-sidebar-wrapper .price-ranger .ranger-min-max-block input[type="text"] { border: medium none; color: #868298; font-size: 18px; font-weight: 400; outline: medium none; text-align: right; width: 40px; line-height: 20px; } .shop-sidebar-wrapper .price-ranger .ranger-min-max-block input[type='text'].max {} .shop-sidebar-wrapper .price-ranger .ranger-min-max-block span { color: #868298; font-weight: 400; /*font-size: 18px;*/ /*line-height: 40px;*/ } /*** ============================================= Single Shop Area style ============================================= ***/ #shop-area.single-shop-area{ padding-top: 70px; padding-bottom: 60px; } .single-product-carousel { margin-right: 35px; } .single-product-carousel .carousel-outer{ position: relative; } .single-product-carousel .carousel-outer .thumbs-outer { position: relative; overflow: hidden; max-width: 535px; width: 100%; margin-top: 30px; } .single-product-carousel .thumbs-carousel { position: relative; max-width: 110px; } .single-product-carousel .thumbs-carousel .owl-stage-outer{ overflow: visible; } .single-product-carousel .thumbs-carousel .owl-item.active{ position: relative; } .single-product-carousel .thumbs-carousel li{ position: relative; display: inline-block; float: left; margin-right: 10px; border: 1px solid #f0eef9; cursor: pointer; } .single-product-carousel .thumbs-carousel li .thumb-image{ display: block; } .single-product-carousel .thumbs-carousel .owl-item.active li{ border-color: #f36727; } .single-product-carousel .carousel-outer .content-carousel{ max-width: 535px; width: 100%; border: 1px solid #f0eef9; } .single-product-carousel .carousel-outer .content-carousel .owl-item.active .content-inner{ position: relative; } .single-shop-content .content-box { position: relative; display: block; } .single-shop-content .content-box span.price { color: #f36727; font-size: 24px; font-weight: 500; } .single-shop-content .content-box h3 { color: #222222; font-size: 30px; font-weight: 600; margin: 11px 0 17px; text-transform: capitalize; } .single-shop-content .content-box .review-box { margin: 0; overflow: hidden; } .single-shop-content .content-box .review-box ul {} .single-shop-content .content-box .review-box ul li {} .single-shop-content .content-box .review-box ul li i { color: #bfbccb; font-size: 18px; } .single-shop-content .content-box .text { overflow: hidden; padding: 23px 0 0; } .single-shop-content .content-box .location-box { margin: 0 0 24px; } .single-shop-content .content-box .location-box p { color: #222222; font-size: 16px; margin: 0 0 12px; } .single-shop-content .content-box .location-box form{ position: relative; display: block; overflow: hidden; margin-bottom: 9px; } .single-shop-content .content-box .location-box form input { position: relative; display: inline-block; float: left; border: 1px solid #f0eef9; height: 50px; padding-left: 10px; padding-right: 10px; width: 180px; transition: all 500ms ease; margin: 0; } .single-shop-content .content-box .location-box form input:focus{ border-color: #202020; } .single-shop-content .content-box .location-box form button { position: relative; display: inline-block; float: left; background: #f8f7ff; border: none; color: #222222; font-size: 18px; font-weight: 400; line-height: 50px; height: 50px; width: 100px; margin: 0; padding: 0; text-align: center; text-transform: capitalize; transition: all 500ms ease 0s; } .single-shop-content .content-box .location-box form button:hover{ background: #202020; color: #fff; } .single-shop-content .content-box .location-box span { color: #f36727; } .single-shop-content .content-box .addto-cart-box {} .single-shop-content .content-box .addto-cart-box .input-group.bootstrap-touchspin { float: left; width: 46px; } .single-shop-content .content-box .addto-cart-box .bootstrap-touchspin .input-group-btn-vertical .btn { display: block; float: none; margin-left: 0px; position: relative; width: 100%; background: #f0eef9; border: 1px solid #f0eef9; color: #848484; padding: 12px 11px; cursor: pointer; } .single-shop-content .content-box .addto-cart-box .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up { border-radius: 0 } .single-shop-content .content-box .addto-cart-box .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down { border-radius: 0; margin-top: -2px; } .single-shop-content .content-box .addto-cart-box .bootstrap-touchspin .input-group-btn-vertical .btn.bootstrap-touchspin-up:before { content: "\f0d8"; font-family: FontAwesome; color: #848484; font-size: 14px; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 5px 5px 5px; } .single-shop-content .content-box .addto-cart-box .bootstrap-touchspin .input-group-btn-vertical .btn.bootstrap-touchspin-down:before { content: "\f0d7"; font-family: FontAwesome; color: #848484; font-size: 14px; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 2px 5px 8px; } .single-shop-content .content-box .addto-cart-box button.addtocart { height: 50px; width: 170px; margin-left: 43px; color: #fff; padding: 12px 0 12px; cursor: pointer; border-radius: 0; } .single-shop-content .content-box .addto-cart-box button.addtocart:hover{} .share-products { position: relative; display: block; overflow: hidden; margin-top: 40px; } .share-products h5{ position: relative; display: inline-block; float: left; font-size: 16px; font-weight: 500; line-height: 40px; } .share-products .sociallinks-style-two { position: relative; display: inline-block; float: left; margin-left: 20px; } .share-products .sociallinks-style-two li a i.fb{ background: #3b5998; border-color: #3b5998; color: #ffffff; } .share-products .sociallinks-style-two li a:hover i.fb{ background: #1d376f; } .share-products .sociallinks-style-two li a i.tw{ background: #55acee; border-color: #55acee; color: #ffffff; } .share-products .sociallinks-style-two li a:hover i.tw{ background: #1e7dc5; } .share-products .sociallinks-style-two li a i.pin{ background: #cb2027; border-color: #cb2027; color: #ffffff; } .share-products .sociallinks-style-two li a:hover i.pin{ background: #a81218; } .share-products .sociallinks-style-two li a i.lin{ background: #007ab9; border-color: #007ab9; color: #ffffff; } .share-products .sociallinks-style-two li a:hover i.lin{ background: #01537d; } .product-tab-box { position: relative; display: block; overflow: hidden; margin-top: 85px; } .product-tab-box .tab-btns { position: relative; display: block; text-align: center; border-bottom: 1px solid #f0eef9; margin-bottom: 45px; z-index: 1; } .product-tab-box .tab-btns .tab-btn { display: inline-block; float: none; text-align: center; margin: 0 2px; } .product-tab-box .tab-btns .tab-btn span { position: relative; display: block; background: transparent; border-radius: 0; cursor: pointer; margin: 0; padding: 15px 20px 13px; color: #222222; font-size: 20px; font-weight: 600; text-transform: capitalize; transition: all 500ms ease; font-family: 'Poppins', sans-serif; } .product-tab-box .tab-btns .tab-btn.active-btn span, .product-tab-box .tab-btns .tab-btn:hover span{ color: #999; } .product-tab-box .tab-btns .tab-btn span:before{ position: absolute; left: 0; bottom: -1px; right: 0; height: 1px; background: #999; content: ""; opacity: 0; transition: all 500ms ease; transition-delay: .3s; } .product-tab-box .tab-btns .tab-btn.active-btn span:before, .product-tab-box .tab-btns .tab-btn:hover span:before{ opacity: 1; } .product-tab-box .tabs-content { position: relative; display: block; padding: 0; } .product-tab-box .tabs-content .tab{ position: relative; padding: 0px; display: none; } .product-tab-box .tabs-content .tab.active-tab{ display: block; } .review-box-holder { position: relative; display: block; } .review-box-holder .single-review-box { position: relative; display: block; padding-left: 65px; margin-bottom: 40px; border-bottom: 1px solid #f0eef9; padding-bottom: 32px; } .review-box-holder .single-review-box .icon-holder { left: 0; position: absolute; top: 0; } .review-box-holder .single-review-box .icon-holder span:before{ color: #39345a; font-size: 65px; line-height: 65px; } .review-box-holder .single-review-box .text-holder { position: relative; display: block; padding-left: 30px; padding-right: 40px; } .review-box-holder .single-review-box .text-holder .top { position: relative; display: block; overflow: hidden; margin: 0 0 23px; } .review-box-holder .single-review-box .text-holder .top .name h3 { margin: 0 0 7px; text-transform: capitalize; } .review-box-holder .single-review-box .text-holder .top .name h3 span{ color: #f36727; font-size: 18px; font-weight: 400; font-style: italic; font-family: 'Rubik', sans-serif; } .review-box-holder .single-review-box .text-holder .top .review-box ul { position: relative; display: block; overflow: hidden; } .review-box-holder .single-review-box .text-holder .top .review-box ul li { display: inline-block; margin-right: 3px; } .review-box-holder .single-review-box .text-holder .top .review-box ul li:last-child{ margin-right: 0; } .review-box-holder .single-review-box .text-holder .top .review-box ul li i { color: #bfbccb; font-size: 14px; } .review-box-holder .single-review-box .text-holder .text p { margin: 0; line-height: 26px; } .text-xinwen p{ text-indent: 2em; line-height: 30px; text-align:left; padding-bottom: 10px; } .product-tab-box .review-form { padding-top: 6px; } .product-tab-box .review-form .title { padding-bottom: 26px; } .product-tab-box .review-form .title h3 { color: #222222; font-size: 24px; font-weight: 400; margin: 0 0 9px; text-transform: capitalize; } .product-tab-box .review-form .title span{} .product-tab-box .review-form .add-rating-box { position: relative; display: block; overflow: hidden; margin-bottom: 20px; } .product-tab-box .review-form .add-rating-box .add-rating-title{ position: relative; display: inline-block; float: left; } .product-tab-box .review-form .add-rating-box .add-rating-title h4 { color: #868298; font-size: 16px; font-weight: 500; line-height: 20px; margin: 0; font-family: 'Rubik', sans-serif; text-transform: capitalize; } .product-tab-box .review-form .add-rating-box .review-box{ position: relative; display: inline-block; float: left; padding-left: 20px; } .product-tab-box .review-form .add-rating-box .review-box ul li { position: relative; display: inline-block; float: left; line-height: 18px; margin-right: 5px; } .product-tab-box .review-form .add-rating-box .review-box ul li:last-child{ margin-right: 0px; } .product-tab-box .review-form .add-rating-box .review-box ul li i { color: #bfbccb; font-size: 18px; line-height: 20px; opacity: 1; transition: all 500ms ease 0s; } .product-tab-box .review-form form .field-label p { color: #868298; font-size: 16px; font-weight: 500; margin: 0 0 4px; font-family: 'Rubik', sans-serif; } .product-tab-box .review-form form .field-label p span{ color: #f36727; } .product-tab-box .review-form form input[type="text"], .product-tab-box .review-form form input[type="email"], .product-tab-box .review-form form textarea { background: #ffffff; height: 60px; width: 100%; border: 1px solid #f0eef9; color: #252525; font-size: 16px; padding: 0 15px; margin-bottom: 27px; border-radius: 5px; transition: all 500ms ease; font-family: 'Rubik', sans-serif; } .product-tab-box .review-form form textarea { height: 170px; padding: 10px 15px; margin-bottom: 35px; float: left; width: 100%; } .product-tab-box .review-form form button { padding: 15px 30px 16px; } .product-tab-box .review-form form input[type="text"]:focus{ border-color: #f36727; } .product-tab-box .review-form form input[type="email"]:focus{ border-color: #f36727; } .product-tab-box .review-form form textarea:focus{ border-color: #f36727; } .product-tab-box .review-form .add-rating-box ul li:hover a i{ opacity: 1; color: #fec144; } .related-product { padding-top: 76px; } .related-product .title { padding-bottom: 35px; } .related-product .title h3 { color: #222222; font-size: 24px; font-weight: 700; text-transform: uppercase; } .related-product .single-product-item {} /*** ============================================= Cart area style ============================================= ***/ .cart-area { padding-bottom: 100px; padding-top: 100px; } .cart-area .table-outer { overflow-x: auto; position: relative; width: 100%; } .cart-area .cart-table { min-width: 1024px; width: 100%; } .cart-area .cart-table .cart-header { position: relative; background: #39345a; color: #ffffff; font-size: 16px; font-weight: 600; text-transform: capitalize; width: 100%; font-family: 'Poppins', sans-serif; } .cart-area .cart-table thead tr th { font-weight: 600; line-height: 24px; min-width: 110px; padding: 20px 25px; } .cart-area .cart-table thead tr th.prod-column { padding-left: 30px; text-align: left; } .cart-area .cart-table thead tr th.availability { padding: 0 40px } .cart-area .cart-table tbody tr { border-bottom: 1px solid #f0eef9; } .cart-area .cart-table tbody tr td { color: #222222; font-size: 18px; font-weight: 600; line-height: 24px; min-width: 100px; padding: 27.5px 25px; font-family: 'Poppins', sans-serif; } .cart-area .cart-table tbody tr .prod-column .column-box { min-height: 70px; position: relative; } .cart-area .cart-table tbody tr .prod-column .column-box .prod-thumb { width: 70px; border: 1px solid #f0eef9; } .cart-area .cart-table tbody tr .prod-column .column-box .prod-thumb a { display: block; border-radius: 5px; } .cart-area .cart-table tbody tr .prod-column .column-box .prod-thumb img { display: block; max-width: 100%; border-radius: 5px; } .cart-area .cart-table tbody tr .prod-column .column-box .prod-thumb, .cart-area .cart-table tbody tr .prod-column .column-box .title{ display: table-cell; vertical-align: middle; } .cart-area .cart-table tbody tr .prod-column .column-box .title{ padding-left: 20px; } .cart-area .cart-table tbody tr .prod-column .column-box .title h3 { color: #222222; font-size: 18px; font-weight: 600; line-height: 20px; text-transform: capitalize; } .cart-area .cart-table tbody tr .qty { padding-right: 25px; width: 120px; } .cart-area .cart-table tbody tr .qty .input-group.bootstrap-touchspin { float: left; width: 46px; } .cart-area .cart-table tbody tr .qty .bootstrap-touchspin .input-group-btn-vertical > .btn { display: block; float: none; margin-left: 0px; position: relative; width: 100%; background: #efefef; border: 1px solid #efefef; color: #848484; padding: 12px 11px; cursor: pointer; } .cart-area .cart-table tbody tr .qty .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up { border-radius: 0 } .cart-area .cart-table tbody tr .qty .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down { border-radius: 0; margin-top: -2px; } .cart-area .cart-table tbody tr .qty .bootstrap-touchspin .input-group-btn-vertical > .btn.bootstrap-touchspin-up:before { content: "\f0d8"; font-family: FontAwesome; color: #848484; font-size: 14px; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 5px 5px 5px; } .cart-area .cart-table tbody tr .qty .bootstrap-touchspin .input-group-btn-vertical > .btn.bootstrap-touchspin-down:before { content: "\f0d7"; font-family: FontAwesome; color: #848484; font-size: 14px; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 2px 5px 8px; } .cart-area .cart-table tbody tr td.unit-price { padding-left: 40px; padding-right: 20px; } .cart-area .cart-table tbody .available-info { position: relative; color: #868298; font-size: 16px; font-weight: 400; line-height: 20px; padding-left: 50px; font-family: 'Rubik', sans-serif; } .cart-area .cart-table tbody .available-info .icon { position: absolute; top: 0px; left: 0; width: 40px; height: 40px; background: #f36727; border-radius: 50%; color: #ffffff; font-size: 18px; line-height: 40px; text-align: center; } .cart-area .cart-table tbody tr td.price { color: #868298; font-size: 18px; font-weight: 400; font-family: 'Rubik', sans-serif; } .cart-area .cart-table tbody tr .sub-total { color: #f36727; font-size: 18px; font-weight: 400; font-family: 'Rubik', sans-serif; } .cart-area .cart-table tbody tr td .remove{ } .cart-area .cart-table tbody tr td .remove .checkbox label { color: #848484; font-size: 18px; font-weight: 400; } .cart-area .cart-table tbody tr td .remove .checkbox label input[type="checkbox"] { display: inline-block; position: relative; top: 1px; } .cart-middle { padding-top: 30px } .cart-middle .apply-coupon { padding-left: 245px; position: relative; } .cart-middle .apply-coupon input[type="text"] { position: absolute; top: 0; left: 0; width: 225px; height: 50px; border: 1px solid #f0eef9; color: #9e9e9e; font-size: 14px; font-weight: 400; padding: 0 15px; text-transform: capitalize; transition: all 500ms ease 0s; border-radius: 5px; } .cart-middle .apply-coupon input[type="text"]:focus { border: 1px solid #f36727 } .cart-middle .apply-coupon .apply-coupon-button button { padding: 14px 30px 14px; border-radius: 5px; cursor: pointer; border: 2px solid #f0eef9; background: transparent; color: #222222; } .cart-middle .apply-coupon .apply-coupon-button button:hover{ border-color: #f36727; color: #f36727; } .cart-middle .update-cart button { color: #ffffff; background: #f36727; padding: 14px 30px 14px; cursor: pointer; border-radius: 5px; } .cart-middle .update-cart button:hover{ background: #c94408; color: #fff; } .cart-bottom { overflow: hidden; padding-top: 70px; } .shop-title-box { position: relative; display: block; overflow: hidden; margin-top: -6px; padding-bottom: 23px; } .shop-title-box h3{ color: #222222; font-size: 24px; line-height: 30px; text-transform: uppercase; } .cart-bottom .calculate-shipping {} .cart-bottom .calculate-shipping .ui-state-default .ui-icon { background: none } .cart-bottom .calculate-shipping .ui-state-default { background: #fff none repeat scroll 0 0; border: 2px solid #f0eef9; border-radius: 0; color: #848484; font-size: 14px; font-weight: normal; height: 45px; margin-bottom: 17px; outline: medium none; width: 100%; } .cart-bottom .calculate-shipping .ui-selectmenu-button span.ui-icon { margin-top: 0; position: absolute; right: 0; top: 0; } .cart-bottom .calculate-shipping .ui-selectmenu-button span.ui-icon { border-left: 2px solid #f0eef9; display: block; float: right; height: 41px; position: relative; text-indent: 0; top: 0; width: 43px; } .cart-bottom .calculate-shipping .ui-selectmenu-button span.ui-icon::before { color: #9b9b9b; content: "\f107"; font-family: FontAwesome; font-size: 20px; overflow: visible; position: absolute; right: 14px; top: 6px; } .cart-bottom .calculate-shipping .ui-selectmenu-button span.ui-selectmenu-text { display: block; line-height: 18px; overflow: hidden; padding: 12px 17px; text-align: left; } .cart-bottom .calculate-shipping input[type="text"] { border: 2px solid #f0eef9; color: #848484; display: block; font-size: 14px; height: 45px; padding: 0 18px; width: 100%; margin-bottom: 30px; transition: all 500ms ease; } .cart-bottom .calculate-shipping input[type="text"]:focus { border: 2px solid #1d1d1d; } .cart-bottom .calculate-shipping button { background: transparent; color: #222222; padding: 14px 30px 14px; border-radius: 5px; cursor: pointer; border: 2px solid #f0eef9; } .cart-bottom .calculate-shipping button:hover{ border-color: #f36727; color: #f36727; } .cart-bottom button.checkout-btn{ margin-top: 30px; color: #ffffff; background: #f36727; padding: 14px 30px 14px; cursor: pointer; border-radius: 5px; } /*** ============================================= Checkout Area style ============================================= ***/ .checkout-area { position: relative; display: block; padding-top: 100px; } .checkout-area .exisitng-customer { position: relative; display: block; background: #f8f7ff; padding: 20px 28px 21px; margin-bottom: 20px; border-radius: 5px; } .checkout-area .exisitng-customer:before{ position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: #f36727; content: ""; } .checkout-area .exisitng-customer h5{ color: #222222; font-size: 16px; font-weight: 500; } .checkout-area .exisitng-customer h5 a{ color: #f36727; font-weight: 400; display: inline-block; padding-left: 15px; } .checkout-area .coupon { position: relative; display: block; background: #f8f7ff; padding: 20px 28px 21px; margin-bottom: 60px; border-radius: 5px; } .checkout-area .coupon:before { position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: #f36727; content: ""; } .checkout-area .coupon h5 { color: #222222; font-size: 16px; font-weight: 500; } .checkout-area .coupon h5 a { color: #f36727; font-weight: 400; display: inline-block; padding-left: 15px; } .checkout-area .form form .field-label { color: #868298; font-size: 16px; font-weight: 500; margin: 0 0 3px; text-transform: capitalize; font-family: 'Rubik', sans-serif; } .checkout-area .form form .field-input input[type="text"] { border: 1px solid #f0eef9; color: #848484; display: block; font-size: 16px; height: 48px; margin-bottom: 25px; padding: 0 15px; width: 100%; border-radius: 5px; transition: all 500ms ease; } .checkout-area .form form .field-input input[type="text"]:focus{ border: 1px solid #f36727; } .checkout-area .create-acc .checkbox { margin: 7px 0 0; } .checkout-area .create-acc .checkbox label { color: #f36727; font-weight: 400; font-size: 16px; cursor: pointer; } .checkout-area .create-acc .checkbox input { position: relative; top: 1px; } .checkout-area .shipping-info input[type="checkbox"] { cursor: pointer; display: inline-block; margin: 0 0 0 20px; position: relative; top: 0px; vertical-align: middle; } .checkout-area .form form .field-input textarea { border: 1px solid #f0eef9; color: #848484; display: block; font-size: 16px; height: 121px; margin-bottom: 28px; padding: 10px 15px; width: 100%; border-radius: 5px; transition: all 500ms ease; } .checkout-area .form form .field-input textarea:focus{ border-color: #f36727; } .checkout-area .bottom { position: relative; display: block; background: #f8f7ff; padding-top: 100px; padding-bottom: 100px; margin-top: 85px; } .checkout-area .table { overflow-x: auto; position: relative; width: 100%; margin-bottom: 0; } .checkout-area .table .cart-table { min-width: auto; width: 100%; } .checkout-area .table .cart-table .cart-header { position: relative; background: #39345a; color: #ffffff; font-size: 16px; font-weight: 600; text-transform: capitalize; width: 100%; font-family: 'Poppins', sans-serif; } .checkout-area .table .cart-table thead tr th { font-weight: 600; line-height: 24px; min-width: 110px; padding: 19px 30px 17px; border-top: none; border-bottom: none; } .checkout-area .table .cart-table thead tr th.product-column { padding-left: 30px; text-align: left; } .checkout-area .table .cart-table tbody tr { border-bottom: 1px solid #e8e6f4; } .checkout-area .table .cart-table tbody tr td { vertical-align: middle } .checkout-area .table .cart-table tbody tr td { min-width: 110px; padding: 25px 25px; border-top: none; } .checkout-area .table .cart-table tbody tr .product-column .column-box { min-height: 70px; } .checkout-area .table .cart-table tbody tr .product-column .column-box .prod-thumb { width: 70px; } .checkout-area .table .cart-table tbody tr .product-column .column-box .prod-thumb a { display: block; border: 1px solid #f0eef9; } .checkout-area .table .cart-table tbody tr .product-column .column-box .prod-thumb img { display: block; max-width: 100%; } .checkout-area .table .cart-table tbody tr .product-column .column-box .prod-thumb, .checkout-area .table .cart-table tbody tr .product-column .column-box .product-title{ display: table-cell; vertical-align: middle; } .checkout-area .table .cart-table tbody tr .product-column .column-box .product-title{ padding-left: 20px; } .checkout-area .table .cart-table tbody tr .product-column .column-box .product-title h3 { color: #222222; font-size: 18px; font-weight: 600; text-transform: capitalize; } .checkout-area .table .cart-table tbody tr .qty { padding-right: 30px; width: 130px; } .checkout-area .table .cart-table tbody tr .qty .input-group.bootstrap-touchspin { float: left; width: 46px; } .checkout-area .table .cart-table tbody tr .qty .bootstrap-touchspin .input-group-btn-vertical > .btn { display: block; float: none; margin-left: 0px; position: relative; width: 100%; background: #ffffff; border: 1px solid #e8e6f4; color: #848484; padding: 12px 11px; cursor: pointer; } .checkout-area .table .cart-table tbody tr .qty .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up { border-radius: 0 } .checkout-area .table .cart-table tbody tr .qty .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down { border-radius: 0; margin-top: -2px; } .checkout-area .table .cart-table tbody tr .qty .bootstrap-touchspin .input-group-btn-vertical > .btn.bootstrap-touchspin-up:before { content: "\f0d8"; font-family: FontAwesome; color: #848484; font-size: 14px; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 5px 5px 5px; } .checkout-area .table .cart-table tbody tr .qty .bootstrap-touchspin .input-group-btn-vertical > .btn.bootstrap-touchspin-down:before { content: "\f0d7"; font-family: FontAwesome; color: #848484; font-size: 14px; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 2px 5px 8px; } .checkout-area .table .cart-table tbody tr td.price { color: #f36727; font-size: 18px; font-weight: 400; } .cart-total-table { border: 1px solid #e8e6f4 } .cart-total-table li { border-bottom: 1px solid #e8e6f4 } .cart-total-table li:last-child { border-bottom: none } .cart-total-table li span.col.col-title { position: relative; display: block; float: left; border-right: 1px solid #e8e6f4; color: #222222; font-size: 16px; font-weight: 600; line-height: 28px; padding: 10px 18px; width: 50%; font-family: 'Poppins', sans-serif; } .cart-total-table li span.col { position: relative; display: block; float: left; color: #868298; font-size: 16px; font-weight: 400; line-height: 28px; padding: 10px 18px; width: 50%; font-family: 'Rubik', sans-serif; } .cart-total .payment-options { position: relative; display: block; overflow: hidden; background: #f8f7ff; margin-top: 30px; border: 1px solid #e8e6f4; padding: 23px 20px 35px; } .cart-total .payment-options .option-block { margin-bottom: 14px } .cart-total .payment-options .option-block .checkbox { margin: 0 0 5px; } .cart-total .payment-options .option-block .checkbox label { display: block; font-weight: 500; min-height: 20px; padding-left: 0px; margin: 0; } .cart-total .payment-options .option-block .checkbox label input { position: relative; top: 1px; } .cart-total .payment-options .option-block .checkbox label span { color: #222222; font-size: 16px; font-weight: 500; padding-left: 10px; font-family: 'Poppins', sans-serif; } .cart-total .payment-options .option-block .checkbox label span b { color: #222222; display: inline-block; font-size: 15px; font-weight: 400; padding-left: 25px; text-decoration: underline; } .cart-total .payment-options .option-block .text{ padding-left: 30px; } .cart-total .payment-options .option-block .text p { margin: 0; line-height: 28px; } .placeorder-button button { padding: 16px 35px 16px; margin-top: 20px; border-radius: 5px; cursor: pointer; } .placeorder-button button:hover{ } /*** ============================================= Login Register Area style ============================================= ***/ .login-register-area { position: relative; display: block; padding-top: 100px; padding-bottom: 88px; } .login-register-area .form form { width: 100%; } .login-register-area .form .input-field { position: relative; } .login-register-area .form .input-field input[type="text"] { position: relative; display: block; width: 100%; height: 50px; border: 1px solid #f0eef9; color: #868298; font-size: 16px; margin-bottom: 30px; padding-left: 15px; padding-right: 50px; transition: all 700ms ease 0s; } .login-register-area .form .input-field .icon-holder { position: absolute; right: 20px; top: 12px; } .login-register-area .form .input-field .icon-holder i { color: #999999; font-size: 14px; font-weight: 400; } .login-register-area .form button { margin-top: 10px; padding: 16px 25px 16px; cursor: pointer; } .login-register-area .form button:hover{ } .login-register-area .form .remember-text { margin-top: 19px; } .login-register-area .form .remember-text .checkbox label { color: #848484; font-size: 16px; font-weight: 400; margin: 0; cursor: pointer; } .login-register-area .form .remember-text .checkbox input { position: relative; top: 1px; } .login-register-area .form .remember-text .checkbox span { color: #222222; font-size: 16px; font-weight: 400; font-family: 'Rubik', sans-serif; } .login-register-area .form .social-icon { float: right; margin-right: -8px; margin-top: 15px; position: relative; } .login-register-area .form .social-icon .login-with { display: inline-block; left: -110px; position: absolute; top: 8px; } .login-register-area .form .social-icon li { display: inline-block; margin: 0 8px; } .login-register-area .form .social-icon li a i { background: #47588f none repeat scroll 0 0; border-radius: 50%; color: #fff; display: block; font-size: 14px; font-weight: 100; height: 40px; line-height: 24px; padding: 8px 0; text-align: center; transition: all 700ms ease 0s; width: 40px; } .login-register-area .form .social-icon li a i.twitter { background: #33ccfe none repeat scroll 0 0; } .login-register-area .form .social-icon li a i.gplus { background: #dd4b39 none repeat scroll 0 0; } .login-register-area .form a.forgot-password { color: #f3441e; float: right; font-weight: 500; margin: 20px 0 0; font-family: 'Rubik', sans-serif; } .login-register-area .form .right { display: block; overflow: hidden; margin-left: -20px; } .login-register-area .form .right h6 { float: left; color: #868298; font-size: 14px; font-weight: 400; margin-top: 28px; } .login-register-area .form .right h6 span{ color: #f36727; } .login-register-area .form .input-field input[type="text"]:focus{ border: 1px solid #1d1d1d; } .login-register-area .form .social-icon li a:hover i{ background: #18387b; } .login-register-area .form .social-icon li a:hover i.twitter{ background: #12addf; } .login-register-area .form .social-icon li a:hover i.gplus{ background: #c62d1a; } /*** ============================================= Global Office Area style ============================================= ***/ .global-office-area { position: relative; display: block; padding: 70px 0 94px; } .global-office-area .sec-title p{ color: #222222; } .single-global-office { position: relative; display: block; float: left; width: 100%; border: 1px solid #f0eef9; padding: 39px 49px 31px; border-radius: 5px; margin-bottom: 30px; } .single-global-office.headquater{ padding-bottom: 27px; } .single-global-office .inner{ position: relative; display: block; } .single-global-office .inner .icon{ width: 75px; } .single-global-office .inner .icon span:before{ color: #222222; font-size: 75px; line-height: 75px; } .single-global-office .inner .icon, .single-global-office .inner .text{ display: table-cell; vertical-align: middle; } .single-global-office .inner .text{ padding-left: 30px; } .single-global-office .inner .text h3{ margin: 0 0 14px; } .single-global-office .inner .text h3 span{ display: inline-block; background: #222; color: #fff; font-size: 16px; font-weight: 400; padding: 2px 15px 2px; border-radius: 5px; margin-left: 15px; font-family: 'Rubik', sans-serif; } .single-global-office .inner .text p{ margin: 0 0 16px; } .single-global-office .inner .text a{} .single-global-office .inner .text ul { position: relative; display: block; margin-top: 18px; margin-bottom: 16px; } .single-global-office .inner .text ul li{ margin-bottom: 1px; } .single-global-office .inner .text ul li:last-child{ margin-bottom: 0; } .single-global-office .inner .text ul li b{ color: #222222; font-size: 16px; font-weight: 500; font-family: 'Poppins', sans-serif; } .all-global-branch{ position: relative; display: block; text-align: center; margin-top: 15px; } .all-global-branch h3 a{ color: #f36727; } /*** ============================================= Contact Info Area style ============================================= ***/ .contact-info-area{ position: relative; display: block; background: #f5f5f8; padding: 100px 0 100px; } .contact-form { position: relative; display: block; background: #ffffff; padding: 50px 50px 50px; -webkit-box-shadow: 0px 2px 5px 3px #f2f1f9; box-shadow: 0px 2px 5px 3px #f2f1f9; } .contact-form form{ position: relative; display: block; } .contact-form form .input-box{ position: relative; display: block; } .contact-form form input[type="text"], .contact-form form input[type="email"], .contact-form form input[type="tel"], .contact-form form textarea{ position: relative; display: block; background: transparent; border: 1px solid #f0eef9; width: 100%; height: 60px; font-size: 16px; margin-bottom: 30px; padding-left: 45px; padding-right: 20px; border-radius: 5px; transition: all 500ms ease; } .contact-form form textarea { height: 110px; padding-left: 45px; padding-right: 20px; padding-top: 17px; padding-bottom: 15px; } .contact-form form input[type="text"]:focus{ border-color: #1d1d1d; color: #222222; } .contact-form form input[type="email"]:focus{ border-color: #1d1d1d; color: #222222; } .contact-form form input[type="tel"]:focus{ border-color: #1d1d1d; color: #222222; } .contact-form form textarea:focus{ border-color: #1d1d1d; color: #222222; } .contact-form form .input-box .icon { position: absolute; top: 0; left: 20px; margin: 16px 0 14px; } .contact-form form .input-box .icon i{ color: #222222; font-size: 16px; line-height: 30px; } .contact-form form input[type="text"]::-webkit-input-placeholder { color: #868298; } .contact-form form input[type="text"]:-moz-placeholder { color: #868298; } .contact-form form input[type="text"]::-moz-placeholder { color: #868298; } .contact-form form input[type="text"]:-ms-input-placeholder { color: #868298; } .contact-form form input[type="email"]::-webkit-input-placeholder { color: #868298; } .contact-form form input[type="email"]:-moz-placeholder { color: #868298; } .contact-form form input[type="email"]::-moz-placeholder { color: #868298; } .contact-form form input[type="email"]:-ms-input-placeholder { color: #868298; } .contact-form form input[type="tel"]::-webkit-input-placeholder { color: #868298; } .contact-form form input[type="tel"]:-moz-placeholder { color: #868298; } .contact-form form input[type="tel"]::-moz-placeholder { color: #868298; } .contact-form form input[type="tel"]:-ms-input-placeholder { color: #868298; } .contact-form form button { width: 100%; padding: 21px 0 21px; cursor: pointer; display: block; } .how-can-help-box { position: relative; display: block; } .how-can-help-box .sec-title { padding-bottom: 38px; } .how-can-help-box .sec-title p { color: #222222; margin: 46px 0 0; } .how-can-help-box .inner-content{ position: relative; display: block; } .how-can-help-box .inner-content ul { position: relative; display: block; overflow: hidden; margin-bottom: 46px; } .how-can-help-box .inner-content ul li { position: relative; display: block; overflow: hidden; border-bottom: 1px solid #e8e6f4; padding-bottom: 22px; margin-bottom: 24px; } .how-can-help-box .inner-content ul li:last-child{ border-bottom: none; padding-bottom: 0; margin-bottom: 0; } .how-can-help-box .inner-content ul li .left{ position: relative; display: block; padding-left: 50px; } .how-can-help-box .inner-content ul li .left .icon { position: absolute; top: 7px; left: 0; } .how-can-help-box .inner-content ul li .left .icon span:before{ color: #222222; font-size: 45px; line-height: 45px; } .how-can-help-box .inner-content ul li .left .text{ position: relative; display: block; padding-left: 27px; } .how-can-help-box .inner-content ul li .left .text h3{ color: #222222; margin: 0 0 8px; } .how-can-help-box .inner-content ul li .left .text span{ color: #868298; } .how-can-help-box .inner-content ul li .right { position: relative; display: block; line-height: 20px; margin: 17px 0; } .how-can-help-box .inner-content ul li .right i{ color: #868298; font-size: 24px; transition: all 500ms ease; transform: perspective(0px) translateX(0px) rotate(0deg); } .how-can-help-box .inner-content ul li:hover .right i{ color: #222222; transform: perspective(0px) translateX(-20px) rotate(0deg); } /*** ============================================= Branches Section style 最新最全最好的Bootstrap模板:http://www.bootstrapmb.com ============================================= ***/ .branches-section{ position: relative; display: block; padding: 100px 0 90px; } .branches_s2_title { position: relative; display: inline-block; float: left; } .branches_s2_text{ position: relative; display: inline-block; float: left; max-width: 670px; width: 100%; padding-left: 80px; /*margin-top: -7px; */ } .branches_s2_text p{ color: #222222; font-size: 20px; line-height: 30px; margin: 0; } .single-branches-box{ position: relative; display: block; border: 1px solid #f0eef9; border-radius: 6px; padding: 34px 39px 32px; padding-right: 30px; transition: all 900ms ease; transition-delay: .5s; } .single-branches-box .title-box{ position: relative; display: block; padding-bottom: 15px; } .single-branches-box .title-box:before{ position: absolute; bottom: 0; left: 0; width: 60px; height: 1px; background: #222222; content: ""; } .single-branches-box .title-box h3{ display: block; text-transform: capitalize; } .single-branches-box ul { position: relative; display: block; margin-top: 26px; } .single-branches-box ul li{ display: block; margin-bottom: 20px; } .single-branches-box ul li:last-child{ margin-bottom: 0; } .single-branches-box ul li .title{ display: block; margin-bottom: 7px; } .single-branches-box ul li .title h5{ color: #222222; font-size: 16px; text-transform: uppercase; } .single-branches-box ul li .text{} .single-branches-box ul li .text p{ line-height: 24px; margin: 0; } .branches-section .inner-content{ overflow: hidden; } .branches-section .owl-carousel{ display: block; max-width: 370px; width: 100%; margin: 0 auto; } .branches-section .owl-carousel .owl-stage-outer{ overflow: visible; padding: 0px 0px 10px; } .branches-section .owl-carousel .owl-stage-outer .owl-item.active .single-branches-box{ transform: translateY(0px); -webkit-box-shadow: 0px 2px 9px 2px #f0eef9; box-shadow: 0px 2px 9px 2px #f0eef9; border: 1px solid transparent; } .branches-section .owl-theme .owl-nav { position: absolute; right: -400px; top: -102px; margin: 0; } .branches-section .owl-theme .owl-nav [class*="owl-"] { background: transparent; color: #868298; font-size: 20px; font-weight: 400; height: 45px; width: 45px; line-height: 42px; margin: 0; padding: 0; border: 1px solid #f0eef9; transition: all 700ms ease 0s; border-radius: 50%; } .branches-section .owl-theme .owl-nav .owl-next { margin-left: 10px; } .branches-section .owl-theme .owl-nav [class*="owl-"]:hover{ border-color: #222222; background: #222222; color: #ffffff; } /*** ============================================= Branches Section style ============================================= ***/ .google-map-area{ position: relative; display: block; } #contact-google-map{ height: 480px; width: 100%; max-width:none; } #dituContent img{ max-width: none; } .liste-bull{ padding-bottom: 20px; } #icon_menu_module p { line-height:15px; } .border_line{ height:0px!important; } .iconfont{ margin-top: 3px!important; }