/*************************************************************************************************************** |||||||||||||||||||||||||| MASTER STYLESHEET FOR INTEXURE |||||||||||||||||||||||||||||||||||| **************************************************************************************************************** |||||||||||||||||||||||||| 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 |||||||||||||||||||||||||||||||||||| ****************************************************************************************************************/ @import url('https://fonts.googleapis.com/css?family=Poppins:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i'); @import url('https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i'); @import url(animate.css); @import url(bootstrap.css); @import url('bootstrap-select.min.css'); @import url('custom-animate.css'); @import url(font-awesome.min.css); @import url('icomoon.css'); @import url('imp.css'); @import url(jquery.bootstrap-touchspin.css); @import url('jquery.fancybox.min.css'); @import url(owl.css); @import url(owl.theme.default.css); @import url(../fonts/flaticon/flaticon.css); /*** Price filter***/ @import url(../assets/price-filter/nouislider.css); @import url(../assets/price-filter/nouislider.pips.css); /*** Time picker css ***/ @import url(../assets/timepicker/timePicker.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); /*** Language Switcher ***/ @import url(../assets/language-switcher/polyglot-language-switcher.css); @import url(../plugins/energy-icon/style.css); @font-face { font-family: 'Futura PT Book'; src: url('FuturaPT-Book.eot'); src: url('FuturaPT-Book.eot?#iefix') format('embedded-opentype'), url('FuturaPT-Book.woff') format('woff'), url('FuturaPT-Book.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Futura PT Cond ExtraBold Oblique '; src: url('FuturaPTCond-ExtraBoldObl.eot'); src: url('FuturaPTCond-ExtraBoldObl.eot?#iefix') format('embedded-opentype'), url('FuturaPTCond-ExtraBoldObl.woff') format('woff'), url('FuturaPTCond-ExtraBoldObl.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Futura PT Cond ExtraBold'; src: url('FuturaPTCond-ExtraBold.eot'); src: url('FuturaPTCond-ExtraBold.eot?#iefix') format('embedded-opentype'), url('FuturaPTCond-ExtraBold.woff') format('woff'), url('FuturaPTCond-ExtraBold.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Futura PT Cond Bold Oblique '; src: url('FuturaPTCond-BoldObl.eot'); src: url('FuturaPTCond-BoldObl.eot?#iefix') format('embedded-opentype'), url('FuturaPTCond-BoldObl.woff') format('woff'), url('FuturaPTCond-BoldObl.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Futura PT Cond Bold'; src: url('FuturaPTCond-Bold.eot'); src: url('FuturaPTCond-Bold.eot?#iefix') format('embedded-opentype'), url('FuturaPTCond-Bold.woff') format('woff'), url('FuturaPTCond-Bold.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Futura PT Cond Medium Oblique '; src: url('FuturaPTCond-MediumObl.eot'); src: url('FuturaPTCond-MediumObl.eot?#iefix') format('embedded-opentype'), url('FuturaPTCond-MediumObl.woff') format('woff'), url('FuturaPTCond-MediumObl.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Futura PT Cond Medium'; src: url('FuturaPTCond-Medium.eot'); src: url('FuturaPTCond-Medium.eot?#iefix') format('embedded-opentype'), url('FuturaPTCond-Medium.woff') format('woff'), url('FuturaPTCond-Medium.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Futura PT Cond Book Oblique '; src: url('FuturaPTCond-BookObl.eot'); src: url('FuturaPTCond-BookObl.eot?#iefix') format('embedded-opentype'), url('FuturaPTCond-BookObl.woff') format('woff'), url('FuturaPTCond-BookObl.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Futura PT Cond Book'; src: url('FuturaPTCond-Book.eot'); src: url('FuturaPTCond-Book.eot?#iefix') format('embedded-opentype'), url('FuturaPTCond-Book.woff') format('woff'), url('FuturaPTCond-Book.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Futura PT Heavy Oblique '; src: url('FuturaPT-HeavyObl.eot'); src: url('FuturaPT-HeavyObl.eot?#iefix') format('embedded-opentype'), url('FuturaPT-HeavyObl.woff') format('woff'), url('FuturaPT-HeavyObl.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Futura PT Heavy'; src: url('FuturaPT-Heavy.eot'); src: url('FuturaPT-Heavy.eot?#iefix') format('embedded-opentype'), url('FuturaPT-Heavy.woff') format('woff'), url('FuturaPT-Heavy.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Futura PT ExtraBold Oblique '; src: url('FuturaPT-ExtraBoldObl.eot'); src: url('FuturaPT-ExtraBoldObl.eot?#iefix') format('embedded-opentype'), url('FuturaPT-ExtraBoldObl.woff') format('woff'), url('FuturaPT-ExtraBoldObl.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Futura PT ExtraBold'; src: url('FuturaPT-ExtraBold.eot'); src: url('FuturaPT-ExtraBold.eot?#iefix') format('embedded-opentype'), url('FuturaPT-ExtraBold.woff') format('woff'), url('FuturaPT-ExtraBold.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Futura PT Bold Oblique '; src: url('FuturaPT-BoldObl.eot'); src: url('FuturaPT-BoldObl.eot?#iefix') format('embedded-opentype'), url('FuturaPT-BoldObl.woff') format('woff'), url('FuturaPT-BoldObl.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Futura PT Bold'; src: url('FuturaPT-Bold.eot'); src: url('FuturaPT-Bold.eot?#iefix') format('embedded-opentype'), url('FuturaPT-Bold.woff') format('woff'), url('FuturaPT-Bold.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Futura PT Light Oblique '; src: url('FuturaPT-LightObl.eot'); src: url('FuturaPT-LightObl.eot?#iefix') format('embedded-opentype'), url('FuturaPT-LightObl.woff') format('woff'), url('FuturaPT-LightObl.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Futura PT Demi Oblique '; src: url('FuturaPT-DemiObl.eot'); src: url('FuturaPT-DemiObl.eot?#iefix') format('embedded-opentype'), url('FuturaPT-DemiObl.woff') format('woff'), url('FuturaPT-DemiObl.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Futura PT Light'; src: url('FuturaPT-Light.eot'); src: url('FuturaPT-Light.eot?#iefix') format('embedded-opentype'), url('FuturaPT-Light.woff') format('woff'), url('FuturaPT-Light.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Futura PT Demi'; src: url('FuturaPT-Demi.eot'); src: url('FuturaPT-Demi.eot?#iefix') format('embedded-opentype'), url('FuturaPT-Demi.woff') format('woff'), url('FuturaPT-Demi.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Futura PT Medium Oblique '; src: url('FuturaPT-MediumObl.eot'); src: url('FuturaPT-MediumObl.eot?#iefix') format('embedded-opentype'), url('FuturaPT-MediumObl.woff') format('woff'), url('FuturaPT-MediumObl.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Futura PT Medium'; src: url('FuturaPT-Medium.eot'); src: url('FuturaPT-Medium.eot?#iefix') format('embedded-opentype'), url('FuturaPT-Medium.woff') format('woff'), url('FuturaPT-Medium.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Futura PT Book Oblique '; src: url('FuturaPT-BookObl.eot'); src: url('FuturaPT-BookObl.eot?#iefix') format('embedded-opentype'), url('FuturaPT-BookObl.woff') format('woff'), url('FuturaPT-BookObl.ttf') format('truetype'); font-weight: normal; font-style: normal; } /*============================================== Base Css ===============================================*/ *{ margin:0px; padding:0px; border: none; outline: none; font-size: 100%; } html, body { height: 100%; } body { color: #49576f; font-size: 20px; line-height: 25px; font-family: 'Futura PT Book'; } button:focus{ outline: none; } button { cursor: pointer; border: none; background: transparent; padding: 0; } h1, h2, h3, h4, h5, h6 { color: #3a3a3a; font-family: 'Futura PT Book'; margin: 0; } h3 { color: #49576f; font-size: 20px; line-height: 26px; } h4 { } a, a:hover, a:active, a:focus { text-decoration: none; outline: none; border: none; } @media (min-width: 1200px) { .container { max-width: 1200px; } } @media (min-width: 1500px) { .container { max-width: 1500px; } } .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; } ol, li{ margin: 0; padding: 0; } .clr1{ color: #f36727; } .bgclr1{ background: #f36727; } .secpd1{ padding: 100px 0; } .secpd2{ padding: 100px 0 60px; } .secpd3{ padding: 100px 0 70px; } .btn-one { position: relative; display: inline-block; background:#eb5185; color: #ffffff; font-size: 17px; line-height: 60px; text-transform: uppercase; font-family: 'Futura PT Book'; padding: 0 30px 0; transition: all 500ms ease; } .btn-one img { position: relative; display: inline-block; padding-left: 10px; width: auto; } .btn-one span:before { font-size: 26px; line-height: 14px; display: inline-block; padding-left: 10px; position: relative; top: 4px; } .btn-one:hover{ color: #ffffff; background:#49576f; } .btn-two{ color: #49576f; font-size: 15px; line-height: 20px;; text-transform: capitalize; font-family: 'Futura PT Book'; transition: all 500ms ease; } .btn-two span:before { position: relative; top: 5px; font-size: 26px; line-height: 14px; display: inline-block; padding-left: 10px; } .btn-two:hover{ color: #49576f; } .btn-three { position: relative; display: inline-block; background: #ffffff; color: #203260; font-size: 14px; line-height: 62px; height: 60px; text-transform: uppercase; font-family: 'Roboto', sans-serif; padding: 0 30px 0; border-radius: 5px; transition: all 500ms ease; } .btn-three span:before { position: relative; display: inline-block; top: 4px; padding-left: 9px; font-size: 20px; } .btn-three:hover{ color: #3aa40c; } .sec-title { position: relative; display: block; margin-top: -5px; padding-bottom: 50px; } .sec-title.max-width{ margin: -5px auto 0; } .sec-title.with-text{ padding-bottom: 52px; } .sec-title p{ color: #ff0000; border: 2px solid #49576f; padding: 15px; font-size: 25px; line-height: 30px; text-transform: uppercase; margin: 0 0 7px; font-family: 'Futura PT Demi'; letter-spacing: 0.5px; } .sec-title .title { position: relative; display: block; color: #49576f; font-size: 36px; line-height: 44px; text-transform: uppercase; font-family: 'Futura PT Bold'; } .sec-title .title.clr-white{ color: #ffffff; } .sec-title .title span{ font-family: 'Futura PT Demi'; } .sec-title .bottom-text{ color: #7c7e84; font-size: 17px; line-height: 27px; text-transform: none; margin: 13px 0 0; font-family: 'Futura PT Book'; } .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; align-items: center; } .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; 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; 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 { position: relative; display: block; overflow: hidden; } .accordion-box .accordion { position: relative; display: block; margin-bottom: 20px; } .accordion-box .accordion .accord-btn { position: relative; display: block; cursor: pointer; background: #ffffff; padding-left: 40px; padding-right: 70px; padding-top: 22px; padding-bottom: 22px; -webkit-box-shadow: 0px 3px 5px 2px #ededed; box-shadow: 0px 3px 5px 2px #ededed; transition: all 500ms ease; } .accordion-box .accordion .accord-btn h4 { color: #49576f; font-size: 18px; line-height: 26px; transition: all 500ms ease; } .accordion-box .accordion .accord-btn::after { font-family: "Flaticon"; position: absolute; top: 22px; right: 40px; color: #b4b4b4; content: "\f10d"; font-size: 25px; line-height: 25px; transition: all 500ms ease 0s; } .accordion-box .accordion .accord-btn.active{ background: #49576f; transition: all 500ms ease; } .accordion-box .accordion .accord-btn.active h4 { color: #ffffff; } .accordion-box .accordion .accord-btn.active:after{ color: #ffffff; } .accordion-box .accordion .accord-content { position: relative; display: block; padding-top: 29px; padding-bottom: 7px; padding-left: 0px; padding-right: 40px; display: none; } .accordion-box .accordion .accord-content.collapsed { display: block; } .accordion-box .accordion .accord-content p { margin: 0; } .boxed_wrapper { background: #fff none repeat scroll 0 0; position: relative; margin: 0 auto; width: 100%; min-width: 320px; min-height: 400px; overflow: hidden; } /*________________Preloader_______________ */ .preloader{ position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:999999999999999999; background-color:#ffffff; background-position:center center; background-repeat:no-repeat; background-image:url(../images/icon/preloader.gif); } .preloader.style-two { background-image: url(../images/home-pages/preloader-2.gif); } .preloader.style-three { background-image: url(../images/home-pages/preloader-3.gif); } .preloader.style-four { background-image: url(../images/home-pages/preloader-4.gif); } .preloader.style-five { background-image: url(../images/home-pages/preloader-5.gif); } /* scroll to top styles */ .scroll-to-top { position: fixed; right: 20px; bottom: 30px; width: 55px; height: 55px; background: #49576f; border: 2px solid #49576f; border-radius: 0%; color: #ffffff; font-size: 25px; line-height: 50px; cursor: pointer; display: none; text-align: center; transition: all 500ms ease 0s; z-index: 99999999999; box-shadow: 0px 5px 10px -10px rgba(27,27,27,1); } .scroll-to-top:hover { opacity: .5; } .scroll-to-top-style2 { position: fixed; bottom: 25px; right: 15px; background: #49576f; border: 2px solid #49576f; width: 55px; height: 55px; border-radius: 0%; color: #ffffff; font-size: 25px; line-height: 50px; cursor: pointer; display: none; text-align: center; transition: all 500ms ease 0s; z-index: 9999999999999; box-shadow: 0px 8px 23px -6px rgba(27,27,27,1); } .scroll-to-top-style2: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.martop20{ margin-top: 20px; } .post-pagination li { display: inline-block; margin: 0 3px; } .post-pagination li a { position: relative; display: block; background: #ffffff; border-radius: 0px; border: 1px solid #ededed; color: #2f2f2f; font-size: 18px; height: 50px; width: 50px; padding: 11px 0; transition: all 500ms ease 0s; font-family: 'Futura PT Book'; } .post-pagination li a i { position: relative; font-size: 20px; } .post-pagination li.active a, .post-pagination li:hover a { color: #fff; background: #49576f; border: 1px solid #49576f; } /* 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: #222222; font-size: 18px; height: 32px; width: 32px; line-height: 32px; text-align: center; transition: all 500ms ease 0s; font-family: 'Futura PT Book'; border-radius: 50%; } .post-pagination2 li.active a, .post-pagination2 li:hover a { background: #f36727; color: #ffffff; } .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: #f36727; } .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: #f36727; } .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(233, 33, 48, 0.85); transition: all 700ms ease 100ms; 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; } .overlay-style-two{ position: absolute; left: 0px; bottom: 0px; right: 0px; top: 0px; z-index: 2; opacity: 0; transition: all 900ms ease; } .overlay-style-two:before{ position: absolute; content: ''; top: 0px; left: 0px; width: 100%; height: 50%; display: block; opacity: 0; text-align: center; transform: perspective(400px) rotateX(-90deg); transform-origin: top; transition: all 0.5s; background-color: rgba(0, 0, 0, 0.80); } .overlay-style-two:after{ position: absolute; content: ''; left: 0px; bottom: 0px; width: 100%; height: 50%; display: block; opacity: 0; text-align: center; transform: perspective(400px) rotateX(90deg); transform-origin: bottom; transition: all 0.5s; background-color: rgba(0, 0, 0, 0.80); } .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: 16px; color: #49576f; } .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: #9491a2; font-size: 15px; transition: all 500ms ease; } .sociallinks-style-one li a:hover i{ color: #39345a; } .sociallinks-style-two{ overflow: hidden; } .sociallinks-style-two li { display: inline-block; float: left; margin-right: 20px; } .sociallinks-style-two li:last-child{ margin-right: 0px; } .sociallinks-style-two li a i { position: relative; display: block; width: 50px; height: 50px; background: #203260; border: 1px solid #31426c; border-radius: 50%; color: #ffffff; font-size: 14px; line-height: 48px; text-align: center; transition: all 500ms ease 0s; } .sociallinks-style-two li a:hover i{ color: #3398fd; transform: rotate(360deg); } /* Update header Style */ @keyframes menu_sticky { 0% {margin-top:-90px;} 50% {margin-top: -74px;} 100% {margin-top: 0;} } /*============================================== Top Bar Style1 Css ===============================================*/ .top-bar-style1 { position: relative; display: block; background: #26272b; padding: 19px 0 62px; } .top-style1{ position: relative; display: block; text-align: center; } .top-style1 p{ margin: 0; } .top-style1 p a{ color: #ffffff; transition: all 300ms ease 100ms; } .top-style1 p a:hover{ color: #49576f; } /*============================================== Main Header Css ===============================================*/ .main-header { position: relative; display: block; z-index: 999; } .main-header.header-style1{} .header-upper-style1{ position: relative; display: block; background: #f6f6f6; } .header-upper-style1.fixed-header .inner-container { position: fixed; top: 0px; left: 0; right: 0; width: 100%; max-width: 1170px; margin: 0 auto; box-shadow: 0 0 10px rgba(0,0,0,.1); transition: all 900ms ease 100ms; z-index: 9999999999; } .header-upper-style1.fixed-header .logo-box-style1 { margin: 10px 0; transition: all 500ms ease 100ms; } .header-upper-style1.fixed-header .main-menu .navigation > li > a { padding: 29px 0px 27px; transition: all 500ms ease 100ms; } .header-upper-style1.fixed-header .outer-search-box { padding: 10px 0; transition: all 500ms ease 100ms; } .header-upper-style1.fixed-header .cart-box { margin: 10px 0; transition: all 500ms ease 100ms; } .header-upper-style1 .inner-container { position: relative; display: block; padding: 0 40px; background: #ffffff; -webkit-box-shadow: 0px 4px 11px -1px #ECECEC; box-shadow: 0px 4px 11px -1px #ECECEC; z-index: 9999999999; } .logo-box-style1 { position: relative; display: block; margin: 20px 0; transition: all 500ms ease 100ms; } .logo-box-style1 a{ display: inline-block; } .main-menu-box{ position: relative; display: block; } .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: 35px; } .main-menu .navigation > li:last-child{ margin-right: 0; } .main-menu .navigation > li > a { position: relative; display: block; color: #49576f; font-size: 15px; letter-spacing: 0.5px; line-height: 14px; text-transform: uppercase; opacity: 1; padding: 39px 0px 37px; transition: all 300ms ease; font-family: 'Futura PT Book'; } .main-menu .navigation > li:hover > a, .main-menu .navigation > li.current > a { color:#eb5185; } .main-menu .navigation > li > ul { position: absolute; left: 0px; top: 130%; width: 270px; background: transparent; padding: 10px 0px 0; visibility: hidden; opacity: 0; display: block; border-radius: 0px; transition: all 500ms ease; z-index: 100; } .main-menu .navigation > li > ul:before { position: absolute; top: 10px; left: 0; bottom: 0; width: 100%; background: #49576f; content: ""; z-index: -1; } .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 > a { position: relative; display: block; color: #fff; font-size: 15px; line-height: 20px; border-bottom: 1px solid #e2e8f0; text-transform: uppercase; transition: all 500ms ease 0s; padding: 16px 30px 15px; padding-right: 0; font-family: 'Futura PT Book'; } .main-menu .navigation > li > ul > li:last-child a{ border-bottom: none; } .main-menu .navigation > li > ul > li:hover a:after{ opacity: 1; transform: scale(1.0); } .main-menu .navigation > li > ul > li:hover > a { color: #fff; padding-left: 40px; } .main-menu .navigation > li > ul > li > ul { position: absolute; left: 100%; top: 20px; width: 270px; margin-left: 0px; visibility: hidden; opacity: 0; background: #49576f; z-index: 100; box-shadow: 0 6px 12px rgba(0,0,0,.175); transition: all 200ms ease; } .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 a{ position: relative; display: block; color: #fff; font-size: 15px; line-height: 20px; border-bottom: 1px solid #e2e8f0 !important; text-transform: capitalize; transition: all 500ms ease 0s; padding: 16px 30px 15px; padding-right: 0; font-family: 'Futura PT Book'; } .main-menu .navigation > li > ul > li > ul > li:last-child a{ border-bottom: 0px !important; } .main-menu .navigation > li > ul > li > ul > li:hover a:before{ opacity: 1; transform: scale(1.0) !important; } .main-menu .navigation > li > ul > li > ul > li:hover > a { color: #fff; padding-left: 40px; } /* .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; margin-left: 30px; } .outer-search-box { position: relative; display: inline-block; float: left; padding: 20px 0; margin-right: 20px; transition: all 500ms ease 100ms; } .outer-search-box .seach-toggle { position: relative; display: block; color: #49576f; font-size: 16px; line-height: 50px; cursor: pointer; text-align: center; height: 50px; width: 50px; border-radius: 3px; margin: 0; border-right: 1px solid #ededed; transition: all 500ms ease; } .outer-search-box .seach-toggle:hover, .outer-search-box .seach-toggle.active{ color: #49576f; background: #ededed; } .search-box { position: absolute; top: 120%; right: 0%; background: #49576f; opacity: 0; padding: 20px; transition: all 500ms ease 0s; visibility: hidden; z-index: 100; margin-left: 0; } .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 #1f1f23; color: #000; display: block; font-size: 13px; line-height: 24px; position: relative; transition: all 500ms ease 0s; width: 100%; height: 45px; padding-left: 15px; padding-right: 50px; } .search-box .form-group input[type="search"]:focus{ border-color: #f5f5f5; } .search-box .form-group button, .search-box .form-group input[type="submit"] { position: absolute; right: 0; top: 0; display: block; cursor: pointer; background: #1f1f23; color: #fff; font-size: 13px; height: 45px; line-height: 45px; width: 45px; transition: all 500ms ease 0s; } .search-box .form-group button:hover, .search-box .form-group input:focus + button{ color: #222222; background: #f5f5f5; } .cart-box { position: relative; display: inline-block; float: right; height: 50px; padding: 15px 0; margin: 20px 0; transition: all 500ms ease 100ms; } .cart-box a{ display: inline-block; font-family: 'Futura PT Book'; } .cart-box a span:before{ position: relative; display: inline-block; float: left; color: #49576f; font-size: 20px; line-height: 20px; padding-right: 6px; transition: all 500ms ease; } .cart-box a:hover span:before{ color: #49576f; } .cart-box a span.number { position: relative; display: inline-block; float: left; color: #49576f; font-size: 14px; line-height: 14px; } .header-lower-style1 { position: relative; display: block; background: #f6f6f6; padding: 30px 0; } .header-lower-style1 .inner-content{ position: relative; display: block; border-right: 1px solid #dddddd; } .header-contact-info { position: relative; display: block; border-left: 1px solid #dddddd; padding-left: 20px; } .header-contact-info li { position: relative; display: inline-block; float: left; border-right: 1px solid #dddddd; padding-right: 30px; margin-right: 30px; } .header-contact-info li:last-child{ margin-right: 0; } .header-contact-info li .single-item{ position: relative; display: block; } .header-contact-info li .single-item .icon{ width: 50px; } .header-contact-info li .single-item .icon span:before { position: relative; top: 2px; color: #b7b7b7; font-size: 50px; line-height: 50px; transition: all 300ms ease 100ms; } .header-contact-info li:hover .single-item .icon span:before{ color: #49576f; } .header-contact-info li .single-item .icon, .header-contact-info li .single-item .text{ display: table-cell; vertical-align: middle; } .header-contact-info li .single-item .text{ padding-left: 15px; } .header-contact-info li .single-item .text h3{ font-size: 18px; text-transform: capitalize; font-family: 'Futura PT Book'; } .header-contact-info li .single-item .text p{ line-height: 18px; margin: 6px 0 0; } .header-social-links-style1 { position: relative; display: block; padding-right: 20px; margin: 2px 0 3px; } .header-social-links-style1 li{ position: relative; display: inline-block; float: left; margin-right: 15px; } .header-social-links-style1 li:last-child{ margin-right: 0; } .header-social-links-style1 li a{} .header-social-links-style1 li a i{ position: relative; display: block; width: 50px; height: 50px; border-radius: 50%; background: #ffffff; color: #7c7e84; font-size: 14px; line-height: 50px; text-align: center; transition: all 700ms ease 100ms; } .header-social-links-style1 li a:hover i{ color: #ffffff; background: #49576f; transform: rotate(360deg); } /*** ===================================================== Main Slider style ===================================================== ***/ .main-slider { position: relative; z-index: 10; } .main-slider .tp-caption{ z-index:5 ; } .main-slider .tp-dottedoverlay{ background: none !important; } .main-slider .tparrows { top: 40% !important; } .main-slider .slide-content{ position: relative; display: block; } .main-slider .slide-content .big-title{ position: relative; color: #ffffff; font-size: 72px; line-height: 1.1em; text-transform: none; font-family: 'Futura PT Book'; } .main-slider .slide-content .text{ position: relative; display: block; color: #ffffff; font-size: 18px; line-height: 1.5em; letter-spacing: normal; text-transform: none; font-family: 'Futura PT Book'; } .main-slider .slide-content .btn-box{} .main-slider .slide-content .btn-box a{ } .main-slider .slide-content .btn-box a.project-view-button { position: relative; display: inline-block; margin-left: 35px; color: #ffffff; font-size: 15px; line-height: 56px; font-family: 'Futura PT Book'; transition: all 500ms ease; } .main-slider .slide-content .btn-box a.project-view-button:hover{ color: #49576f; } .main-slider .slide-content .btn-box a.project-view-button:before { position: absolute; left: 0; bottom: 16px; right: 0; height: 2px; background: #ffffff; content: ""; } /*** ===================================================== Main Slider Style2 style ===================================================== ***/ .main-slider.style2 { position: relative; display: block; z-index: 10; } .main-slider.style2 .slide-content .big-title{ position: relative; color: #49576f; font-size: 60px; line-height: 1.2em; text-transform: uppercase; font-family: 'Futura PT Bold'; } .main-slider.style2 .slide-content .text{ position: relative; display: block; color: #49576f; font-size: 20px; line-height: 1.6em; letter-spacing: normal; text-transform: none; font-family: 'Futura PT ExtraBold'; } .main-slider.style2 .slide-content .btn-box a.play-button{ width: 70px; } .main-slider.style2 .slide-content .btn-box a.play-button, .main-slider.style2 .slide-content .btn-box a.slide-style2-button{ display: table-cell; vertical-align: middle; } .main-slider.style2 .slide-content .btn-box a.play-button{ position: relative; display: inline-block; width: 70px; height: 70px; border-radius: 50%; background: #49576f; text-align: center; } .main-slider.style2 .slide-content .btn-box a.play-button span:before{ position: relative; display: block; color: #ffffff; font-size: 30px; line-height: 70px; } .main-slider.style2 .slide-content .btn-box a.slide-style2-button { position: relative; display: inline-block; margin-left: 25px; color: #ffffff; font-size: 15px; line-height: 70px; font-family: 'Futura PT Book'; transition: all 500ms ease; } .main-slider.style2 .slide-content .btn-box a.slide-style2-button:before { position: absolute; left: 0; bottom: 25px; right: 0; height: 2px; background: #ffffff; content: ""; } .main-slider.style2 .tp-bullets { position: absolute; top: 50% !important; right: 20px !important; opacity: 1 !important; display: block !important; text-align: center; width: auto !important; text-align: right; left: auto !important; transform: none !important; } .main-slider.style2 .hermes .tp-bullet { position: relative !important; display: block !important; right: 0 !important; margin: 10px 0 !important; left: auto !important; top: auto !important; width: 12px; height: 12px; } .main-slider.style2 .hermes .tp-bullet:after { position: absolute; content: ' '; bottom: 0; height: 0; left: 0; width: 100%; background-color: #FFF; box-shadow: 0 0 1px #FFF; -webkit-transition: height 0.3s ease; transition: height 0.3s ease; } .tp-bullet.selected, .tp-bullet:hover { background: #fff; } /*** ===================================================== Main Slider Style3 style ===================================================== ***/ .main-slider.style3 .slide-content .big-title{ position: relative; color: #ffffff; font-size: 72px; line-height: 1.2em; text-transform: capitalize; font-family: 'Futura PT Book'; } .main-slider.style3 .slide-content .text{ position: relative; display: block; color: #ffffff; font-size: 18px; line-height: 1.6em; letter-spacing: normal; text-transform: none; font-family: 'Futura PT Book'; } .main-slider.style3 .slide-content .btn-box a{ } /*** ============================================= About Area style ============================================= ***/ .highlights-area{ position: relative; display: block; background: transparent; margin-top: -135px; z-index: 100; } .single-highlight-box{ position: relative; display: block; background: transparent; padding-top: 55px; margin-bottom: 50px; } .single-highlight-box .icon-holder{ position: absolute; top: 0; left: 0; right: 0; width: 110px; height: 110px; background: #ffffff; margin: 0 auto; border-radius: 50%; border: 3px solid #49576f; text-align: center; z-index: 3; } .single-highlight-box .icon-holder::before { position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; content: ""; background: #49576f; border-radius: 50%; transition: all 0.5s ease-in-out 0s; transform-style: preserve-3d; transform: perspective(1200px) rotateY(-90deg) translateZ(0px); opacity: 0; z-index: -1; } .single-highlight-box:hover .icon-holder::before{ transform: perspective(1200px) rotateY(0deg) translateZ(0px); transition-delay: 0.1s; opacity: 1; } .single-highlight-box .icon-holder span:before { display: block; color: #b3b3b3; font-size: 50px; line-height: 104px; transition: all 0.7s ease-in-out 0s; } .single-highlight-box:hover .icon-holder span:before{ color: #ffffff; } .single-highlight-box .inner-content{ position: relative; display: block; background: #ffffff; padding-top: 55px; box-shadow: 0px 4px 11px -1px #ECECEC; } .single-highlight-box .inner-content .text{ position: relative; display: block; padding: 26px 30px 32px; } .single-highlight-box .inner-content h3 { margin: 0px 0 18px; } .single-highlight-box .inner-content p{ margin: 0; } .single-highlight-box .inner-content a{ position: relative; display: block; background: #f6f6f6; color: #49576f; } .single-highlight-box:hover .inner-content a{ color: #49576f; } /*** ============================================= About Area style ============================================= ***/ .about-area{ position: relative; display: block; padding-top: 60px; padding-bottom: 60px; } .about-image-box { position: relative; display: block; width: 100%; background: #f6f6f6; padding-top: 60px; padding-left: 60px; } .about-image-box:before{ position: absolute; top: 0; right: 0; width: 60px; height: 100%; background: #ffffff; content: ""; z-index: 1; } .about-image-box .inner-box{ position: relative; display: block; z-index: 2; } .about-image-box .inner-box img{ width: 100%; } .about-image-box .inner-box .overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .about-image-box .inner-box .overlay .box{ display: table; width: 100%; height: 100%; } .about-image-box .inner-box .overlay .box .icon{ display: table-cell; vertical-align: middle; text-align: center; } .about-image-box .inner-box .overlay .box .icon img{ width: auto; } .about-image-box .text-box { position: relative; display: block; padding-top: 33px; padding-bottom: 52px; padding-right: 20px; margin-right: 60px; z-index: 1; } .about-image-box .text-box:before { position: absolute; right: 40px; bottom: 30px; font-family: 'icomoon'; content: "\e939"; color: #ebebeb; font-size: 70px; line-height: 70px; transform: perspective(1200px) rotateX(180deg) translateZ(0px); z-index: -1; } .about-image-box .text-box p { color: #49576f; font-size: 20px; line-height: 30px; margin: 0 0 17px; } .about-image-box .text-box h3{ color: #3a3a3a; font-size: 18px; } .about-image-box .text-box h3 span{ color: #49576f; font-size: 15px; font-family: 'Futura PT Book'; } .about-text{ position: relative; display: block; } .about-text .sec-title { padding-bottom: 44px; } .about-text .inner-content{ position: relative; display: block; } .about-text .inner-content .text { display: block; padding-bottom: 26px; } .about-carousel-box{ position: relative; display: block; background: #49576f; padding: 41px 41px 37px; z-index: 1; } .about-carousel-box:before { position: absolute; left: 40px; bottom: -30px; font-family: "Flaticon"; content: "\f103"; color: #49576f; font-size: 40px; line-height: 40px; transform: perspective(1200px) rotateY(180deg) translateZ(0px); } .about-carousel-box .single-box{ position: relative; display: block; } .about-carousel-box .single-box .icon-holder{ width: 90px; } .about-carousel-box .single-box .icon-holder span:before{ color: #ffffff; font-size: 90px; line-height: 90px; margin-left: 1px; } .about-carousel-box .single-box .icon-holder, .about-carousel-box .single-box .text-holder{ display: table-cell; vertical-align: middle; } .about-carousel-box .single-box .text-holder{ padding-left: 30px; } .about-carousel-box .single-box .text-holder h3{ color: #ffffff; font-size: 20px; margin: 0 0 21px; text-decoration: underline; } .about-carousel-box .single-box .text-holder p{ color: #ffffff; margin: 0; } .about-carousel-box.owl-carousel .owl-stage-outer { position: relative; overflow: hidden; padding-bottom: 0px; } .about-carousel-box .owl-dots { position: absolute; margin-top: 105px !important; height: 25px; line-height: 25px; left: -10px; } .about-carousel-box .owl-dots .owl-dot{ background-image: none; width: 20px; height: 5px; margin: 0px 10px; background: #e1e1e1; border: 2px solid #e1e1e1; padding: 0px; border-radius: 0%; transition: all 500ms ease; display: inline-block; } .about-carousel-box .owl-dots .owl-dot span{ display: none; } .about-carousel-box .owl-dots .owl-dot.active{ background: #49576f; border-color: #49576f; } /*** ============================================= Working Area style ============================================= ***/ .working-area { position: relative; display: block; background-attachment: fixed; background-size: cover; background-position: center top; background-repeat: no-repeat; padding: 110px 0 60px; z-index: 1; } .working-area::before { background: rgba(40, 41, 46, 0.97) none repeat scroll 0 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; content: ""; z-index: -1; } .single-working-box{ position: relative; display: block; margin-bottom: 50px; } .single-working-box .img-holder{ position: relative; display: block; } .single-working-box .img-holder .inner{ position: relative; display: block; overflow: hidden; } .single-working-box .img-holder .inner img{ width: 100%; transform: scale(1.01); transition: all 700ms ease 300ms; } .single-working-box:hover .img-holder .inner img{ transform:scale(1.2) rotate(2deg); } .single-working-box .img-holder .inner .overlay-style-one{ background-color: rgba(0, 0, 0, 0.85); } .single-working-box:hover .img-holder .inner .overlay-style-one{ opacity: 1; } .single-working-box .img-holder .inner:before, .single-working-box .img-holder .inner:after { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; transition: all 700ms ease 500ms; border-radius: 0px; z-index: 3; } .single-working-box .img-holder .inner:before { transform: scale(0, 1); transform-origin: bottom center; border-top: 4px solid #49576f; border-bottom: 4px solid #49576f; } .single-working-box:hover .img-holder .inner:before { transform: scale(1, 1); } .single-working-box .img-holder .inner:after { transform: scale(1, 0); transform-origin: left center; border-left: 4px solid #49576f; border-right: 4px solid #49576f; } .single-working-box:hover .img-holder .inner:after{ transform: scale(1, 1); } .single-working-box .text-holder{ position: relative; display: block; background: #ffffff; margin: 0 20px; margin-top: -40px; z-index: 5; } .single-working-box .text-holder .plus-icon-box { position: absolute; right: 30px; top: -25px; width: 50px; height: 50px; background: #49576f; border-radius: 50%; text-align: center; display: block; padding: 15px 0; transition: all 300ms ease 100ms; } .single-working-box:hover .text-holder .plus-icon-box { top: -50px; height: 75px; background: #49576f; border-radius: 25px 25px 0px 0px; padding: 27px 0; } .single-working-box .text-holder .plus-icon-box span:before{ display: block; color: #ffffff; font-size: 20px; line-height: 20px; } .single-working-box .text-holder .outer-box { position: relative; display: block; padding-left: 70px; padding-top: 35px; padding-bottom: 32px; } .single-working-box .text-holder .outer-box .icon{ position: absolute; top: 0; left: 0; width: 70px; height: 100%; background: rgb(237,237,237); background: linear-gradient(0deg, rgba(237,237,237,1) 0%, rgba(237,237,237,0) 0%, rgba(237,237,237,1) 100%, rgba(32,50,96,0) 100%, rgba(32,50,96,0.6530987394957983) 100%, rgba(80,166,253,1) 100%, rgba(93,173,253,1) 100%); } .single-working-box .text-holder .outer-box .icon .inner { display: table; width: 100%; height: 100%; } .single-working-box .text-holder .outer-box .icon .inner .box{ display: table-cell; vertical-align: middle; text-align: center; } .single-working-box .text-holder .outer-box .icon .inner .box span:before{ color: #49576f; font-size: 35px; line-height: 35px; } .single-working-box .text-holder .outer-box .text{ position: relative; display: block; padding-left: 30px; } .single-working-box .text-holder .outer-box .text h3{ color: #49576f; margin: 0 0 13px; } .single-working-box .text-holder .outer-box .text p{ margin: 0; } /*** ============================================= Recently Project Area style ============================================= ***/ .recently-project-area{ position: relative; display: block; padding: 110px 0 108px; } .recently-project-area .container-fluid { padding-right: 10px; padding-left: 10px; } .more-project-button { position: relative; display: block; margin-top: 39px; } .single-project-style1{ position: relative; display: block; z-index: 6; } .single-project-style1 .img-holder{ position: relative; display: block; overflow: hidden; z-index: 5; } .single-project-style1 .img-holder img{ width: 100%; transform: scale(1.01); transition: all 700ms ease; } .single-project-style1:hover .img-holder img { transform:scale(1.2) rotate(2deg); } .single-project-style1 .overlay-content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: rgba(0, 0, 0, 0.80); transform: scaleX(0); transition: all 700ms ease 100ms; } .single-project-style1:hover .overlay-content{ transform: scaleY(1); } .single-project-style1 .overlay-content .inner-content{ display: table; width: 100%; height: 100%; } .single-project-style1 .overlay-content .inner-content .link-box { display: table-cell; vertical-align: middle; text-align: center; opacity: 0; transform-style: preserve-3d; transform: perspective(1200px) rotateX(90deg) translateZ(-45px); transition: all 300ms ease 100ms; } .single-project-style1:hover .overlay-content .inner-content .link-box{ opacity: 1; transform: translate3d(0px, 0px, 0px); transition: all 700ms ease 500ms; } .single-project-style1 .overlay-content .inner-content .link-box a { background: #ffffff; color: #49576f; line-height: 55px; padding: 0 25px 0; } .single-project-style1 .overlay-content .inner-content .link-box a:hover{ color: #ffffff; background: #49576f; } .single-project-style1 .img-holder .title-box { position: absolute; left: 0px; bottom: 0px; right: 0px; text-align: center; display: block; padding-bottom: 34px; transform-style: preserve-3d; transform: perspective(1200px) rotateX(90deg) translateZ(-45px); opacity: 0; transition: all 300ms ease 200ms; z-index: 3; } .single-project-style1:hover .img-holder .title-box{ transform: translate3d(0px, 0px, 0px); opacity: 1; transition: all 700ms ease 800ms; } .single-project-style1 .img-holder .title-box span{ color: #95979c; } .single-project-style1 .img-holder .title-box h3{ color: #ffffff; margin: 3px 0 0; } .project-carousel.owl-carousel .owl-stage-outer{ padding: 0px; } .project-carousel .owl-dots { position: relative; display: block !important; margin-top: 43px !important; line-height: 14px; } .project-carousel .owl-dots .owl-dot{ background-image: none; width: 20px; height: 5px; margin: 0px 10px; background: #e1e1e1; border: 2px solid #e1e1e1; padding: 0px; border-radius: 0%; transition: all 500ms ease; display: inline-block; } .project-carousel .owl-dots .owl-dot span{ display:none; } .project-carousel .owl-dots .owl-dot.active{ background: #49576f; border-color: #49576f; } /*** ============================================= Working Process area Style ============================================= ***/ .working-process-area{ position: relative; display: block; background: #f6f6f6; padding: 110px 0 50px; z-index: 2; } .single-working-process{ position: relative; display: block; padding-top: 40px; background: transparent; transition:all 500ms ease; margin-bottom: 60px; } .single-working-process:hover{ transform:translateY(-10px); } .single-working-process .top-box { position: absolute; top: 0; left: 0; right: 0; width: 90px; height: 90px; display: block; border: 3px solid #49576f; padding: 27px 0; background: #ffffff; border-radius: 50%; text-align: center; margin: 0 auto; z-index: 3; } .single-working-process .top-box::before { position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; content: ""; background: #49576f; border-radius: 50%; transition: all 0.5s ease-in-out 0s; transform-style: preserve-3d; transform: perspective(1200px) rotateY(-90deg) translateZ(0px); opacity: 0; z-index: -1; } .single-working-process:hover .top-box::before{ transform: perspective(1200px) rotateY(0deg) translateZ(0px); transition-delay: 0.1s; opacity: 1; } .single-working-process .top-box span{ color: #49576f; font-size: 24px; line-height: 30px; text-transform: uppercase; transition: all 700ms ease 100ms; } .single-working-process:hover .top-box span{ color: #ffffff; transition: all 700ms ease 500ms; } .single-working-process .inner{ position: relative; display: block; padding: 82px 30px 50px; background: #ffffff; border-top: 3px solid #49576f; -webkit-box-shadow: 0px 6px 10px 3px #e8e8e8; box-shadow: 0px 6px 10px 3px #e8e8e8; transition: all 300ms ease; } .single-working-process:hover .inner{ box-shadow: none; } .single-working-process .inner h3{ color: #49576f; margin: 0 0 18px; } .single-working-process .inner p{ margin: 0; } .single-working-process .inner .icon-holder{ position: relative; display: block; padding-top: 22px; } .single-working-process .inner .icon-holder span:before{ color: #bababa; font-size: 80px; line-height: 80px; transition: all 700ms ease 500ms; } .single-working-process:hover .inner .icon-holder span:before{ color: #49576f; transition: all 700ms ease 500ms; } /*** ============================================= Slogan area style ============================================= ***/ .slogan-area { position: relative; display: block; background: #49576f; padding: 35px 0; } .slogan-area .title { position: relative; display: block; } .slogan-area .title h3{ color: #ffffff; font-size: 20px; line-height: 30px; } .slogan-area .button { position: relative; display: block; } .slogan-area .button a{ color: #49576f; background: #ffffff; } .slogan-area .button a:hover{ color: #ffffff; background: #e11f2c; } /*** ============================================= Testimonial Area Style ============================================= ***/ .testimonial-area { position: relative; display: block; padding: 110px 0 60px; background: #ffffff; } .more-reviews-button { position: relative; display: block; margin-top: 39px; } .single-testimonial-item{ position: relative; display: block; background: #ffffff; -webkit-box-shadow: 0px 2px 10px 3px #f6f6f6; box-shadow: 0px 2px 10px 3px #f6f6f6; margin-bottom: 50px; } .single-testimonial-item .inner-content{ position: relative; display: block; padding: 55px 30px 52px; background: #ffffff; } .single-testimonial-item .inner-content .client-info{ position: relative; display: block; padding-bottom: 22px; } .single-testimonial-item .inner-content .client-info h3{ color: #3a3a3a; margin: 0 0 3px; } .single-testimonial-item .inner-content .client-info span{ } .single-testimonial-item .inner-content .img-box{ position: relative; display: block; overflow: hidden; width: 100px; height: 100px; margin: 0 auto; border-radius: 50%; z-index: 2; } .single-testimonial-item .inner-content .img-box::before { position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; content: ""; background: rgba(0, 0, 0, 0.70); border-radius: 50%; transition: all 0.5s ease-in-out 0s; transform-style: preserve-3d; transform: perspective(1200px) rotateY(-90deg) translateZ(0px); opacity: 0; z-index: 4; } .single-testimonial-item:hover .inner-content .img-box::before{ transform: perspective(1200px) rotateY(0deg) translateZ(0px); transition-delay: 0.1s; opacity: 1; } .single-testimonial-item .inner-content .img-box img{ width: 100%; transition: all 700ms ease 800ms; border-radius: 50%; } .single-testimonial-item:hover .inner-content .img-box img{ transform: rotate(360deg); } .single-testimonial-item .inner-content .text-box{ position: relative; display: block; padding-top: 24px; } .single-testimonial-item .inner-content .text-box p{ margin: 0; } .single-testimonial-item .quote-icon{ position: absolute; top: 0; left: 0; width: 60px; height: 70px; background: #49576f; z-index: 3; } .single-testimonial-item .quote-icon span:before{ color: #ffffff; font-size: 30px; display: block; padding: 20px 0; } /*** ============================================= appointment Area Style ============================================= ***/ .appointment-area { position: relative; display: block; background: #49576f; background-position: top right; background-attachment: scroll; background-repeat: no-repeat; background-size: auto; padding-top: 110px; padding-bottom: 110px; z-index: 1; } .map-content-box .sec-title .title{ color: #ffffff; } .map-content-box .inner{ position: relative; display: block; max-width: 570px; width: 100%; margin: 0 auto; z-index: 99; } .map-content-box .inner .overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .map-content-box .inner .overlay .single-location-box{ position: absolute; } .map-content-box .inner .overlay .single-location-box.one { top: 60px; left: 70px; } .map-content-box .inner .overlay .single-location-box.two{ top: 100px; left: 50%; } .map-content-box .inner .overlay .single-location-box.three{ left: 150px; bottom: 70px; } .map-content-box .inner .overlay .single-location-box.four{ right: 50px; bottom: 60px; } .map-content-box .inner .overlay .marker-box{ display: inline-block; } .map-content-box .inner .overlay .marker-box span:before{ color: #ffffff; font-size: 50px; line-height: 50px; cursor: pointer; } .map-content-box .inner .overlay .location-info { position: absolute; left: -10px; bottom: 100px; width: 270px; opacity: 0; visibility: hidden; padding: 25px 30px 22px; padding-right: 20px; margin-left: 0; border-radius: 0px; background-color: #ffffff; transition: all 0.3s ease; z-index: 9999999999; } .map-content-box .inner .overlay .location-info:before { position: absolute; left: 30px; bottom: -30px; font-family: "Flaticon"; content: "\f103"; color: #ffffff; font-size: 40px; line-height: 40px; transform: perspective(1200px) rotateY(180deg) translateZ(0px); } .map-content-box .inner .overlay .single-location-box:hover .location-info { opacity: 1; visibility: visible; bottom: 90px; } .map-content-box .inner .overlay .single-location-box:hover .marker-box span:before{ color: #49576f; transition: all 500ms ease; } .map-content-box .inner .overlay .location-info h3{ color: #49576f; margin: 0 0 13px; } .map-content-box .inner .overlay .location-info p{ margin: 0; } .appointment-box{ position: relative; display: block; padding: 44px 50px 50px; max-width: 570px; width: 100%; background: #ffffff; } .appointment-box .title-box{ position: relative; display: block; padding-bottom: 22px; } .appointment-box .title-box h2{ color: #49576f; font-size: 24px; line-height: 34px; margin: 0 0 10px; } .appointment-box .title-box span{} .appointment{ position: relative; display: block; } .appointment-form .single-box{ position: relative; display: block; } .appointment-form input[type="text"], .appointment-form input[type="email"], .appointment-form textarea { position: relative; display: block; padding: 0 20px; border: 1px solid #ededed; background: #ffffff; color: #7c7e84; font-size: 15px; width: 100%; height: 60px; margin-bottom: 20px; border-radius: 5px; transition: all 500ms ease; } .appointment-form input[type="text"]:focus{ border-color: #49576f; } .appointment-form input[type="email"]:focus{ border-color: #49576f; } .appointment-form .single-box button{ display: block; width: 100%; background: #49576f; color: #ffffff; margin-top: 20px; border-radius: 5px; } .appointment-form input::-webkit-input-placeholder { color: #7c7e84; } .appointment-form input:-moz-placeholder { color: #7c7e84; } .appointment-form input::-moz-placeholder { color: #7c7e84; } .appointment-form input:-ms-input-placeholder { color: #7c7e84; } .appointment-form .single-box .bootstrap-select { position: relative; display: block; } .appointment-form .single-box .bootstrap-select>.dropdown-toggle { outline: none !important; border-radius: 5px; border: 1px solid #edf2f7; height: 60px; background-color: transparent; padding: 0; padding-left: 20px; color: #83888d; line-height: 60px; margin: 0; box-shadow: none !important; } .appointment-form .single-box .bootstrap-select>.dropdown-toggle::after { position: absolute; top: 50%; right: 20px; width: auto; height: auto; font-family: 'FontAwesome'; content: '\f107'; color: #83888d; font-size: 18px; transform: translateY(-50%); margin: 0; border: none; } .appointment-form .single-box .bootstrap-select .dropdown-menu { margin: 0; padding: 0; border-radius: 0; border: 0px solid #ddd; background: #f9f9f9; font-size: 16px; color: #000000; } .appointment-form .single-box .dropdown-item { display: block; width: 100%; padding: 9px 20px 9px; color: #222222; text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; border-radius: 0; transition: all 500ms ease; } .appointment-form .single-box .dropdown-item.active, .appointment-form .single-box .dropdown-item:active { background: #49576f; color: #fff; } .appointment-form .single-box .dropdown-item:hover { background: #49576f; color: #fff; } /*** ============================================= Latest blog Area style ============================================= ***/ .latest-blog-area { position: relative; display: block; background: #ffffff; padding-top: 110px; padding-bottom: 50px; } .single-blog-post { position: relative; display: block; margin-bottom: 52px; } .single-blog-post .img-holder { position: relative; display: block; overflow: hidden; } .single-blog-post:hover .overlay-style-two{ opacity: 1; } .single-blog-post:hover .img-holder .overlay-style-two:before{ opacity: 1; transform: perspective(400px) rotateX(0deg); transition: all 700ms ease 100ms; } .single-blog-post:hover .img-holder .overlay-style-two:after{ opacity: 1; transform: perspective(400px) rotateX(0deg); transition: all 700ms ease 300ms; } .single-blog-post .img-holder img { width: 100%; transform: scale(1.01); transition: all 700ms ease; } .single-blog-post:hover .img-holder img { transform:scale(1.2) rotate(2deg); } .single-blog-post .img-holder .overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; transform: translate3d(0px, -100%, 0px); transition: all 700ms ease 300ms; } .single-blog-post:hover .img-holder .overlay{ transition: all 700ms ease 500ms; transform: translate3d(0px, 0px, 0px); } .single-blog-post .img-holder .overlay .box{ display: table; width: 100%; height: 100%; } .single-blog-post .img-holder .overlay .box .link-icon{ display: table-cell; vertical-align: middle; text-align: center; } .single-blog-post .img-holder .overlay .box .link-icon a span:before{ display: inline-block; color: #ffffff; font-size: 35px; line-height: 35px; transition: all 500ms ease; } .single-blog-post .img-holder .overlay .box .link-icon a:hover span:before{ color: #49576f; } .single-blog-post .text-holder { position: relative; display: block; padding-top: 20px; } .single-blog-post .text-holder .post-date { position: relative; display: inline-block; height: 45px; border-bottom: 3px solid #dadada; transition: all 700ms ease 500ms; } .single-blog-post .text-holder .post-date h3 { position: relative; display: block; color: #49576f; font-size: 36px; line-height: 38px; text-transform: uppercase; } .single-blog-post .text-holder .post-date h3 span{ color: #49576f; font-size: 14px; } .single-blog-post .meta-box { position: relative; display: block; overflow: hidden; min-height: 30px; margin-top: 16px; margin-bottom: 10px; } .single-blog-post .meta-box .meta-info { position: relative; display: block; overflow: hidden; } .single-blog-post .meta-box .meta-info li { position: relative; display: inline-block; float: left; line-height: 20px; padding-right: 16px; margin-right: 14px; } .single-blog-post .meta-box .meta-info li:before{ position: absolute; top: 3px; right: 0px; width: 1px; height: 12px; background: #d3d9e0; content: ""; } .single-blog-post .meta-box .meta-info li:last-child{ padding-right: 0; margin-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: #49576f; font-size: 15px; text-transform: capitalize; transition: all 500ms ease; } .single-blog-post .meta-box .meta-info li a:hover{ color: #49576f; } .single-blog-post .text-holder .blog-title { position: relative; display: block; font-size: 20px; line-height: 28px; } .single-blog-post .text-holder .blog-title a{ color: #49576f; transition: all 500ms ease; } .single-blog-post .text-holder .blog-title a:hover{ color: #49576f; } .single-blog-post .text-holder .text{ display: block; margin-top: 12px; } .single-blog-post .text-holder .text p{ margin: 0 0 26px; } /*** ============================================= Brand Area Style ============================================= ***/ .brand-area { position: relative; display: block; background: #f6f6f6; padding-top: 110px; padding-bottom: 90px; } .brand-items{ position: relative; display: block; } .single-brand-item { position: relative; display: block; } .single-brand-item a { display: block; background: #ffffff; text-align: center; transition: all 700ms ease 200ms; } .single-brand-item a:hover{ -webkit-box-shadow: 0px 5px 10px 2px #ebebeb; box-shadow: 0px 5px 10px 2px #ebebeb; } .single-brand-item a img{ width: auto; transition: all 900ms ease 200ms; transform: perspective(1200px) rotateY(0deg) translateZ(0px); } .single-brand-item:hover a img{ filter: brightness(0%); transform: perspective(1200px) rotateY(360deg) translateZ(0px); } .single-brand-item .overlay-content { position: absolute; left: 0px; right: 0; bottom: -35px; width: 130px; margin: 0 auto; opacity: 0; visibility: hidden; padding: 3px 0px 2px; text-align: center; background-color: #49576f; transition: all 300ms ease 100ms; z-index: 999; } .single-brand-item:hover .overlay-content{ bottom: -15px; visibility: visible; opacity: 1; } .single-brand-item .overlay-content:before { font-family: FontAwesome; content: "\f0de"; position: absolute; top: -8px; left: 0; right: 0; text-align: center; color: #49576f; font-size: 30px; } .single-brand-item .overlay-content p{ color: #ffffff; font-size: 16px; font-family: 'Futura PT Book'; margin: 0; } .brand-items-carousel.owl-carousel .owl-stage-outer { position: relative; overflow: hidden; padding-bottom: 20px; } .brand-items-carousel.owl-carousel .owl-nav { position: absolute; right: 0; top: -115px; margin: 0; display: block; } .brand-items-carousel.owl-carousel .owl-nav [class*="owl-"] { position: relative; display: inline-block; background: #f6f6f6; width: 55px; height: 55px; border: 1px solid #dddddd; line-height: 54px; margin: 0; padding: 0; transition: all 700ms ease 100ms; border-radius: 50%; } .brand-items-carousel.owl-carousel .owl-nav [class*="owl-"] i:before{ color: #ababab; font-size: 20px; } .brand-items-carousel.owl-carousel .owl-nav .owl-next { margin-left: 10px; } .brand-items-carousel.owl-carousel .owl-nav [class*="owl-"]:hover{ border-color: #49576f; } /*** ============================================= Footer area style ============================================= ***/ .footer-area { position: relative; display: block; background: #49576f; padding-top: 110px; padding-bottom: 110px; z-index: 1; } .footer-shape-bg{ position: absolute; top: 0; right: 0; background-repeat: no-repeat; background-position: top right; height: 695px; width: 695px; background-image: url(../images/footer/footer-shape.png); z-index: -1; } .single-footer-widget { position: relative; display: block; overflow: hidden; } .single-footer-widget .title { position: relative; display: block; padding-bottom: 27px; margin-top: -1px; margin-bottom: 40px; z-index: 1; } .single-footer-widget .title:before{ position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #404043; content: ""; z-index: -1; } .single-footer-widget .title:after{ position: absolute; left: 0; bottom: 0; width: 50px; height: 1px; background: #49576f; content: ""; z-index: 1; } .single-footer-widget .title h3 { color: #ffffff; font-size: 24px; line-height: 24px; text-transform: capitalize; } .single-footer-widget .contact-info-box{ position: relative; display: block; } .single-footer-widget .contact-info-box .footer-logo { position: relative; display: block; padding-bottom: 33px; } .single-footer-widget .contact-info-box .footer-logo a{ display: inline-block; } .single-footer-widget .contact-info-box ul { position: relative; display: block; } .single-footer-widget .contact-info-box ul li { position: relative; display: block; margin-bottom: 15px; } .single-footer-widget .contact-info-box ul li:last-child{ margin-bottom: 0; } .single-footer-widget .contact-info-box ul li h6{ position: relative; display: inline-block; color: #ffffff; font-size: 14px; line-height: 20px; text-transform: uppercase; border-bottom: 2px solid #404043; } .single-footer-widget .contact-info-box ul li p{ color: #7c7e84; margin: 13px 0 0; } .single-footer-widget .services-links{ position: relative; display: block; } .single-footer-widget .services-links ul { position: relative; display: block; overflow: hidden; margin-top: -19px; } .single-footer-widget .services-links ul li { position: relative; display: block; border-bottom: 1px solid #333438; line-height: 50px; } .single-footer-widget .services-links ul li a{ color: #7c7e84; font-size: 15px; padding-left: 20px; transition: all 500ms ease; } .single-footer-widget .services-links ul li a:hover{ color: #ffffff; } .single-footer-widget .services-links ul li a:before { position: absolute; top: 0px; left: 0; content: "\f107"; font-family: "Flaticon"; color: #7c7e84; font-size: 10px; transition: all 500ms ease; line-height: 20px; margin: 14px 0 16px; } .single-footer-widget .services-links ul li a:hover:before{ content: "\f108"; color: #ffffff; transition: all 500ms ease; } .single-footer-widget .recent-news { position: relative; display: block; overflow: hidden; } .single-footer-widget .recent-news li { position: relative; display: block; padding-left: 75px; min-height: 75px; margin-bottom: 30px; } .single-footer-widget .recent-news li:last-child{ margin-bottom: 0; } .single-footer-widget .recent-news li .img-holder { position: absolute; top: 0; left: 0; width: 75px; height: 75px; display: block; overflow: hidden; } .single-footer-widget .recent-news li .img-holder img{ transition: all 0.5s ease-in-out 0.6s; width: 100%; transform: scale(1.0, 1.0); } .single-footer-widget .recent-news li:hover .img-holder img{ transform: scale(1.2, 1.2); } .single-footer-widget .recent-news li:hover .img-holder .overlay-style-one{ opacity: 1; } .single-footer-widget .recent-news li .img-holder .overlay-style-one .content a span:before{ position: relative; display: inline-block; width: 25px; height: 25px; color: #ffffff; font-size: 25px; line-height: 25px; filter: alpha(opacity=0); opacity: 0; transform: perspective(1200px) rotateY(-90deg) scale(5); transition: all 0.5s ease-in-out 0.3s; } .single-footer-widget .recent-news li:hover .img-holder .overlay-style-one .content a span:before{ filter: alpha(opacity=100); opacity: 1; transform: perspective(1200px) rotateY(0deg) scale(1.0); transition-delay: 0.1s; } .single-footer-widget .recent-news li .title-holder{ position: relative; display: block; padding-left: 20px; } .single-footer-widget .recent-news li .title-holder p{ color: #7c7e84; line-height: 16px; margin: 0 0 9px; } .single-footer-widget .recent-news li .title-holder h5{ font-size: 16px; line-height: 22px; } .single-footer-widget .recent-news li .title-holder h5 a{ color: #ffffff; } .single-footer-widget .brochures-carousel-box{ position: relative; display: block; max-width: 270px; width: 100%; background: #ffffff; } .single-footer-widget .brochures-carousel-box .img-holder{ position: relative; display: block; overflow: hidden; } .single-footer-widget .brochures-carousel-box .img-holder img{} .single-footer-widget .brochures-carousel-box .title-holder{ position: relative; display: block; padding: 24px 30px 22px; z-index: 1; } .single-footer-widget .brochures-carousel-box .title-holder:before{ position: absolute; right: 15px; bottom: 20px; font-family: "Flaticon"; content: "\f109"; color: #ececec; font-size: 80px; line-height: 80px; z-index: -1; } .single-footer-widget .brochures-carousel-box .title-holder h3{ color: #49576f; font-size: 18px; line-height: 26px; margin: 0 0 17px; } .single-footer-widget .brochures-carousel-box .title-holder h3 a{} .brochures-carousel-box .owl-dots { position: absolute; margin-top: -177px !important; height: 25px; line-height: 25px; right: 15px; } .brochures-carousel-box .owl-dots .owl-dot{ background-image: none; width: 12px; height: 12px; margin: 0px 5px; background: transparent; border: 2px solid #ffffff; padding: 0px; border-radius: 50%; transition: all 500ms ease; display: inline-block; } .brochures-carousel-box .owl-dots .owl-dot span{ display: none; } .brochures-carousel-box .owl-dots .owl-dot.active{ background: #ffffff; } /*** ============================================= Footer Bottom Area Style ============================================= ***/ .footer-bottom-area { position: relative; display: block; padding: 20px 0; background: #ffffff; z-index: 10; } .footer-bottom-area .copyright-text { margin: 0; } .footer-bottom-area .copyright-text p { color: #fff; font-size: 15px; line-height: 24px; margin: 0; } .footer-bottom-area .copyright-text p a { color: #fff; transition: all 500ms ease; } .footer-bottom-area .copyright-text p a:hover{ color: #fff; } .footer-social-links { position: relative; display: block; } .footer-social-links span{ position: relative; display: inline-block; float: left; padding-right: 15px; color: #49576f; font-size: 14px; line-height: 30px; } .footer-social-links .sociallinks-style-one{ position: relative; display: inline-block; line-height: 30px; float: left; } .footer-social-links .sociallinks-style-one li a i { color: #7c7e84; font-size: 14px; transition: all 500ms ease; } .footer-social-links .sociallinks-style-one li a:hover i{ color: #49576f; } /*** ============================================= Top Bar Style2 style ============================================= ***/ .top-bar-style2{ position: relative; display: block; background: #49576f; padding: 15px 25px; } .top-style2 { display: flow-root; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; align-items: center; } .top-style2-left{ position: relative; display: block; } .top-style2-left p{ position: relative; display: inline-block; float: left; color: #ffffff; font-size: 14px; line-height: 30px; margin: 0; font-family: 'Futura PT Book'; } .top-style2-left p span:before{ position: relative; top: 3px; color: #49576f; font-size: 20px; line-height: 20px; display: inline-block; padding-right: 9px; } .top-style2-left ul{ position: relative; display: inline-block; float: left; padding-left: 0px; } .top-style2-left ul li{ position: relative; display: inline-block; float: left; padding-right: 16px; margin-right: 15px; color: #fff; font-size: 18px; line-height: 30px; } .top-style2-left ul li:last-child{ padding-right: 0; margin-right: 0; } .top-style2-left ul li:before{ position: absolute; top: 7px; right: 0; width: 1px; height: 15px; background: #fff; content: ""; } .top-style2-left ul li:last-child:before{ display: none; } .top-style2-right { position: relative; display: block; overflow: hidden; float: right; } .top-style2-right .top-right-menu { position: relative; display: inline-block; float: left; padding-right: 20px; margin-right: 20px; } .top-style2-right .top-right-menu:before{ position: absolute; top: 7px; right: 0; width: 1px; height: 15px; background: #404043; content: ""; } .top-style2-right .top-right-menu li{ position: relative; display: inline-block; float: left; line-height: 30px; padding-right: 30px; } .top-style2-right .top-right-menu li:last-child{ padding-right: 0; } .top-style2-right .top-right-menu li a{ color: #7c7e84; font-size: 15px; transition: all 500ms ease; } .top-style2-right .top-right-menu li a:hover{ color: #49576f; } .top-style2-right .topbar-social-links{ position: relative; display: inline-block; float: right; } .top-style2-right .topbar-social-links li{ position: relative; display: inline-block; float: left; line-height: 30px; padding-right: 30px; } .top-style2-right .topbar-social-links li:last-child{ padding-right: 0; } .top-style2-right .topbar-social-links li a i{ color: #fff; font-size: 14px; transition: all 500ms ease; } .top-style2-right .topbar-social-links li a:hover i{ color: #49576f; } /*** ============================================= Header Style2 style ============================================= ***/ .header-style2{ position: relative; display: block; z-index: 9999; } .header-style2.stricky-fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 99999999; background: #ffffff; margin: 0; animation-name: menu_sticky; animation-duration: 0.60s; animation-timing-function: ease-out; transition: all .25s ease-in-out; -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.10); -moz-box-shadow: 0 0 15px rgba(0,0,0,0.10); -ms-box-shadow: 0 0 15px rgba(0,0,0,0.10); -o-box-shadow: 0 0 15px rgba(0,0,0,0.10); box-shadow: 0 0 15px rgba(0,0,0,0.10); } .header-style2 .inner-container { position: relative; padding: 0 50px; } .logo-box-style2 { position: relative; display: block; margin: 5px 0; transition: all 500ms ease 100ms; } .logo-box-style2 a { display: inline-block; } .main-menu.style2 .navigation > li { margin-right: 30px; } .main-menu.style2 .navigation > li:last-child { margin-right: 0px; } .main-menu.style2 .navigation > li > a { padding: 39px 0px 37px; } .main-menu.style2 .navigation > li.dropdown > a:after { font-family: FontAwesome; position: absolute; right: -18px; top: 0px; display: block; font-size: 15px; line-height: 90px; color: #919191; content: "\f107"; z-index: 5; } .mainmenu-right.style2 { margin-left: 40px; } .mainmenu-right.style2 .cart-box { float: left; } .mainmenu-right.style2 .button { position: relative; display: inline-block; float: right; margin-left: 35px; padding: 20px 0; } .mainmenu-right.style2 .button a { line-height: 50px; padding: 0 20px 0; } /*** ============================================= About Style2 Area style ============================================= ***/ .about-style2-area{ position: relative; display: block; padding: 110px 0 110px; } .about-style2-text{ position: relative; display: block; } .about-style2-text .sec-title { padding-bottom: 30px; } .about-style2-text .sec-title p{ margin: 0 0 27px; } .about-style2-text .text { position: relative; display: block; border-top: 1px dashed #cccccc; padding-top: 44px; padding-bottom: 35px; } .about-style2-text .text p{ margin: 0; } .about-style2-text .authorised-info{ position: relative; display: block; } .about-style2-text .authorised-info .signature{ width: 185px; } .about-style2-text .authorised-info .signature, .about-style2-text .authorised-info .name{ display: table-cell; vertical-align: middle; } .about-style2-text .authorised-info .name{ border-left: 1px solid #ededed; padding-left: 20px; } .about-style2-text .authorised-info .name h3{ color: #49576f; margin: 0 0 5px; } .about-style2-text .authorised-info .name p{ color: #49576f; line-height: 20px; margin: 0; } .about-style2-text .button{ position: relative; display: block; padding-top: 50px; } .about-style2-image-box{ position: relative; display: block; } .about-style2-image-box .pattern{ position: absolute; top: -110px; left: 5px; right: 0; bottom: -110px; background: #f9f9f9; background-repeat: no-repeat; width: 664px; height: 765px; content: ""; } .about-style2-image-box .image{ position: relative; display: block; max-width: 470px; width: 100%; margin: 0 auto; z-index: 3; } .about-style2-image-box img{ width: 100%; } .about-style2-image-box .overlay-box{ position: absolute; left: 40px; bottom: 30px; right: 40px; background: #ffffff; } .about-style2-image-box .overlay-box:before { font-family: FontAwesome; position: absolute; top: -20px; left: 30px; content: "\f0d8"; color: #ffffff; font-size: 50px; } .about-style2-image-box .overlay-box .title { position: relative; display: block; float: left; padding: 23px 0 20px; padding-left: 30px; } .about-style2-image-box .overlay-box .title h1{ color: #555555; font-size: 48px; filter: alpha(opacity=50); font-family: 'Futura PT Book'; } .about-style2-image-box .overlay-box .title h1 span{ position: relative; display: inline-block; font-size: 18px; line-height: 24px; text-transform: uppercase; font-family: 'Futura PT Book'; } .about-style2-image-box .overlay-box .button{ position: relative; display: block; float: right; } .about-style2-image-box .overlay-box .button a span:before { position: relative; display: block; width: 80px; background: #49576f; color: #ffffff; font-size: 30px; line-height: 100px; text-align: center; transform: rotate(180deg); } /*** ============================================= Working Style2 Area style ============================================= ***/ .working-style2-area { position: relative; display: block; background-attachment: fixed; background-size: cover; background-position: center top; background-repeat: no-repeat; padding: 0px 0 110px; margin-top: 110px; z-index: 1; } .working-style2-area::before { background: rgba(0, 0, 0, 0.80) none repeat scroll 0 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; content: ""; z-index: -1; } .working-style2-content { margin-top: -110px; } .single-working-box-style2{ position: relative; display: block; width: 25%; float: left; } .single-working-box-style2 .img-holder{ position: relative; display: block; overflow: hidden; } .single-working-box-style2 .img-holder img{ width: 100%; transform: scale(1.0); transition: all 700ms ease; } .single-working-box-style2:hover .img-holder img { transform: scale(1.2); } .single-working-box-style2 .static-content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; visibility: visible; opacity: 1; transform: translateY(0px); transition: all 500ms ease 100ms; } .single-working-box-style2:hover .static-content{ opacity: 0; visibility: hidden; transform: translateY(100%); transition: all 900ms ease 100ms; } .single-working-box-style2 .static-content .box{ display: table; width: 100%; height: 100%; } .single-working-box-style2 .static-content .box .inner{ display: table-cell; vertical-align: middle; text-align: center; } .single-working-box-style2 .icon-holder{ position: relative; display: block; width: 110px; height: 110px; margin: 0 auto 60px; text-align: center; border: 2px solid #ffffff; border-radius: 50%; } .single-working-box-style2 .icon-holder span:before { display: block; color: #ffffff; font-size: 55px; line-height: 106px; } .single-working-box-style2 .text-holder{ position: relative; display: block; } .single-working-box-style2 .text-holder .title{ position: relative; display: block; } .single-working-box-style2 .text-holder .title h3{ color: #ffffff; font-size: 20px; line-height: 70px; z-index: 1; } .single-working-box-style2 .text-holder .title .count { position: absolute; top: 0; left: 0; right: 0; color: #2d2e32; font-size: 100px; line-height: 70px; font-family: 'Futura PT Book'; z-index: -1; } .single-working-box-style2 .overlay-content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; opacity: 0; transform: translateY(100%); transition: all 300ms ease 100ms; } .single-working-box-style2:hover .overlay-content{ opacity: 1; transform: translateY(-10px); transition: all 900ms ease 300ms; } .single-working-box-style2 .overlay-content .box{ display: table; width: 100%; height: 100%; } .single-working-box-style2 .overlay-content .box .inner{ display: table-cell; vertical-align: middle; text-align: center; } .single-working-box-style2 .overlay-content .icon-holder { margin: 0 auto 50px; border: 2px solid #49576f; background: #49576f; } .single-working-box-style2 .text-holder .text{ position: relative; display: block; padding: 0 20px; margin-top: 34px; } .single-working-box-style2 .text-holder .text p{ color: #7c7e84; margin: 0; } .single-working-box-style2 .read-more a span:before { position: absolute; left: 0; bottom: -30px; right: 0; width: 60px; height: 60px; margin: 0 auto; background: #49576f; border-radius: 50%; color: #ffffff; font-size: 20px; line-height: 60px; text-align: center; opacity: 0; transform: scale(0.5); transition: all 200ms ease 100ms; } .single-working-box-style2:hover .read-more a span:before{ opacity: 1.0; transform: scale(1.0); transition: all 900ms ease 900ms; } .working-style-bottom{ position: relative; display: block; padding-top: 84px; } .working-style-bottom p{ color: #ffffff; font-size: 18px; line-height: 28px; margin: 0 0 42px; font-family: 'Futura PT Book'; } .working-style-bottom a{ padding: 0 40px; } /*** ============================================= Services Style1 Area Style ============================================= ***/ .services-style1-area { position: relative; display: block; padding: 110px 0 120px; } .single-service-style1 { position: relative; display: block; margin-bottom: 50px; } .single-service-style1 .img-holder{ position: relative; display: block; overflow: hidden; z-index: 1; } .single-service-style1 .img-holder img { width: 100%; transform: scale(1.01); transition: all 700ms ease; } .single-service-style1:hover .img-holder img { transform: scale(1.2); } .single-service-style1:hover .overlay-style-two{ opacity: 1; } .single-service-style1 .img-holder .overlay-style-two:before{ background-color: rgba(40, 41, 46, 0.90); } .single-service-style1:hover .img-holder .overlay-style-two:before{ opacity: 1; transform: perspective(400px) rotateX(0deg); transition: all 700ms ease 100ms; } .single-service-style1 .img-holder .overlay-style-two:after{ background-color: rgba(40, 41, 46, 0.90); } .single-service-style1:hover .img-holder .overlay-style-two:after{ opacity: 1; transform: perspective(400px) rotateX(0deg); transition: all 700ms ease 300ms; } .single-service-style1 .overlay-content-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; } .single-service-style1 .overlay-content-box .box{ display: table; width: 100%; height: 100%; } .single-service-style1 .overlay-content-box .box .inner{ display: table-cell; vertical-align: middle; text-align: center; } .single-service-style1 .overlay-content-box .icon { position: relative; display: block; margin: 0 0 11px; opacity: 0; transform: translate3d(0px, -50%, 0px); transition: all 300ms ease 100ms; } .single-service-style1:hover .overlay-content-box .icon{ opacity: 1; transform: translate3d(0px, 0%, 0px); transition: all 700ms ease 800ms; } .single-service-style1 .overlay-content-box .icon span:before{ display: inline-block; color: #49576f; font-size: 60px; line-height: 60px; } .single-service-style1 .overlay-content-box .title{ position: relative; display: block; opacity: 0; transform: translate3d(0px, 50%, 0px); transition: all 300ms ease 100ms; } .single-service-style1:hover .overlay-content-box .title{ opacity: 1; transform: translate3d(0px, 0%, 0px); transition: all 700ms ease 900ms; } .single-service-style1 .overlay-content-box .title h3{ color: #ffffff; } .single-service-style1 .text-holder{ position: relative; display: block; border: 1px solid #ededed; padding: 35px 30px 28px; } .single-service-style1 .text-holder .inner-content{ position: relative; display: block; -webkit-transform: translateY(0%); transform: translateY(0%); transition: all 700ms ease 800ms; } .single-service-style1:hover .text-holder .inner-content{ opacity: 0; -webkit-transform: translateY(-40%); transform: translateY(-40%); transition: all 700ms ease 500ms; } .single-service-style1 .text-holder .top { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; } .single-service-style1 .text-holder .top .icon{} .single-service-style1 .text-holder .top .icon span:before{ color: #b3b3b3; font-size: 60px; line-height: 60px; } .single-service-style1 .text-holder .top .count{} .single-service-style1 .text-holder .top .count h1{ font-size: 48px; line-height: 40px; background: -moz-linear-gradient(45deg, rgba(65,94,82,1) 0%, rgba(255,0,0,1) 1%, rgba(77,0,0,1) 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(65,94,82,1)), color-stop(1%, rgba(255,0,0,1)), color-stop(100%, rgba(77,0,0,1))); /* safari4+,chrome */ background: -webkit-linear-gradient(45deg, rgba(65,94,82,1) 0%, rgba(255,0,0,1) 1%, rgba(77,0,0,1) 100%); /* safari5.1+,chrome10+ */ background: -o-linear-gradient(45deg, rgba(65,94,82,1) 0%, rgba(255,0,0,1) 1%, rgba(77,0,0,1) 100%); /* opera 11.10+ */ background: -ms-linear-gradient(45deg, rgba(65,94,82,1) 0%, rgba(255,0,0,1) 1%, rgba(77,0,0,1) 100%); /* ie10+ */ background: linear-gradient(45deg, rgba(65,94,82,1) 0%, rgba(255,0,0,1) 1%, rgba(77,0,0,1) 100%); /* w3c */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4D0000', endColorstr='#415E52',GradientType=1 ); /* ie6-9 */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: 'Futura PT Book'; } .single-service-style1 .text-holder .bottom { padding-top: 7px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .single-service-style1 .text-holder .bottom .title{} .single-service-style1 .text-holder .bottom .title h3{ color: #49576f; } .single-service-style1 .text-holder .bottom .read-more{} .single-service-style1 .text-holder .bottom .read-more a span:before { color: #b3b3b3; font-size: 25px; line-height: 36px; } .single-service-style1 .text-holder .overlay-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; display: block; padding: 28px 30px 0; opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); transition: all 700ms ease 100ms; } .single-service-style1:hover .text-holder .overlay-content { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); transition: all 700ms ease 500ms; } .single-service-style1 .text-holder .overlay-content .text { position: relative; display: block; } .single-service-style1 .text-holder .overlay-content .text p{ margin: 0; } .single-service-style1 .text-holder .overlay-content .read-more{} .single-service-style1 .text-holder .overlay-content .read-more a span:before { position: absolute; left: 0; bottom: -30px; right: 0; width: 60px; height: 60px; margin: 0 auto; background: #49576f; display: block; text-align: center; border-radius: 50%; color: #ffffff; font-size: 24px; line-height: 60px; } /*** ============================================= Slogan Style2 Area style ============================================= ***/ .slogan-style2-area{ position: relative; display: block; background-attachment: fixed; background-size: cover; background-position: center top; background-repeat: no-repeat; padding: 102px 0 110px; z-index: 1; } .slogan-style2-area .icon-holder{ position: absolute; top: -60px; left: 0; right: 0; width: 120px; height: 120px; background: #49576f; margin: 0 auto; border-radius: 50%; text-align: center; animation: fa-spin 9s ease infinite; } .slogan-style2-area .icon-holder span:before { position: relative; display: block; color: #ffffff; font-size: 80px; line-height: 120px; } .slogan-style2-area .inner-content { display: flex; align-items: center; flex-direction: column; text-align: center; } .slogan-style2-area .inner-content .title{ display: block; padding-bottom: 40px; } .slogan-style2-area .inner-content .title h1{ color: #ffffff; font-size: 36px; line-height: 44px; text-transform: uppercase; } .slogan-style2-area .inner-content .title h1 span{ } .slogan-style2-area .inner-content .button{} .slogan-style2-area .inner-content .button a{ color: #49576f; background: #ffffff; margin: 0 13px; padding: 0 40px 0; } .slogan-style2-area .inner-content .button a:hover{ color: #ffffff; background: #49576f; } .slogan-style2-area .inner-content .button a.call-us{ color: #ffffff; background: #49576f; } .slogan-style2-area .inner-content .button a.call-us i:before { position: relative; top: 2px; display: inline-block; padding-right: 10px; font-size: 20px; line-height: 20px; } /*** ============================================= Why Choose Area style ============================================= ***/ .why-choose-area{ position: relative; display: block; background-attachment: fixed; background-size: cover; background-position: center top; background-repeat: no-repeat; padding: 110px 0 110px; z-index: 1; } .why-choose-title{ position: relative; display: block; padding-bottom: 60px; background: #49576f; max-width: 390px; width: 100%; } .why-choose-title .sec-title { margin: 0; padding-top: 50px; padding-left: 40px; padding-bottom: 28px; } .why-choose-title .sec-title .icon { position: relative; display: block; margin-bottom: 32px; } .why-choose-title .sec-title .title { color: #ffffff; font-size: 30px; line-height: 40px; } .why-choose-title ul{ position: relative; display: block; padding-left: 40px; } .why-choose-title ul li{ position: relative; display: block; padding-left: 35px; color: #ffffff; font-size: 16px; margin-bottom: 17px; } .why-choose-title ul li:last-child{ margin-bottom: 0; } .why-choose-title ul li:before{ font-family: 'icomoon'; content: "\e935"; position: absolute; top: 2px; left: 0; color: #49576f; font-size: 20px; line-height: 20px; } .why-choose-title .button{ position: relative; display: block; margin-top: 52px; z-index: 1; } .why-choose-title .button:before{ position: absolute; top: 0; left: -10px; bottom: 0; width: 10px; background: #49576f; content: ""; z-index: -1; } .why-choose-title .button:after { position: absolute; top: -15px; left: -10px; width: 10px; height: 15px; content: ""; background: url(../images/icon/button-shape.png); z-index: -1; } .why-choose-title .button a { position: relative; display: block; background: #49576f; color: #ffffff; line-height: 70px; padding: 0 40px 0; } .why-choose-title .button a:hover{ background: #d51723; } .why-choose-content{ position: relative; max-width: 780px; width: 100%; display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap; } .why-choose-content .single-box{ position: relative; display: block; padding: 50px 40px 42px; padding-right: 30px; width: 50%; } .why-choose-content .single-box.redbg{ background: #49576f; } .why-choose-content .single-box.whitebg{ background: #ffffff; } .why-choose-content .single-box.blackbg{ background: #49576f; } .why-choose-content .single-box .icon-holder{ position: relative; display: block; padding: 10px; width: 70px; height: 70px; z-index: 1; } .why-choose-content .single-box .icon-holder:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: #ed4d58; border-radius: 50%; z-index: -1; } .why-choose-content .single-box .icon-holder span:before{ color: #ffffff; font-size: 50px; line-height: 50px; } .why-choose-content .single-box .text-holder{ position: relative; display: block; padding-top: 16px; } .why-choose-content .single-box .text-holder h3{ color: #ffffff; font-size: 20px; margin: 0 0 18px; } .why-choose-content .single-box .text-holder p{ color: #ffffff; margin: 0; } .why-choose-content .single-box.whitebg .text-holder h3{ color: #49576f; } .why-choose-content .single-box.whitebg .text-holder p{ color: #49576f; } .why-choose-content .single-box.whitebg .icon-holder:before{ background: #ffeced; } .why-choose-content .single-box.whitebg .icon-holder span:before{ color: #49576f; } .why-choose-content .single-box.blackbg .text-holder p{ color: #49576f; } .why-choose-content .single-box.blackbg .icon-holder:before{ background: #36373b; } .why-choose-content .single-box.blackbg .icon-holder span:before{ color: #ffffff; } /*** ============================================= Recently Project Style2 Area style ============================================= ***/ .recently-project-style2-area{ position: relative; display: block; padding: 110px 0 108px; } .single-project-style2{ position: relative; display: block; } .single-project-style2 .img-holder{ position: relative; display: block; overflow: hidden; } .single-project-style2 .img-holder:before{ position: absolute; left: 0; bottom: 0; right: 0; height: 40%; content: ""; transition: all 300ms ease 100ms; z-index: 2; background: rgb(39,40,44); background: linear-gradient(180deg, rgba(39,40,44,0) 40%, rgba(39,40,44,0.8407738095238095) 78%, rgba(39,40,44,1) 94%, rgba(39,40,44,1) 100%, rgba(39,40,44,1) 100%, rgba(237,237,237,1) 100%, rgba(32,50,96,0) 100%); } .single-project-style2:hover .img-holder:before{ opacity: 0; } .single-project-style2 .img-holder:after{ position: absolute; left: 0; bottom: 0; right: 0; height: 100%; content: ""; opacity: 0; transition: all 300ms ease 100ms; z-index: 2; background: rgb(39,40,44); background: linear-gradient(0deg, rgba(39,40,44,0) 0%, rgba(39,40,44,0.8407738095238095) 0%, rgba(39,40,44,1) 0%, rgba(39,40,44,0.7959558823529411) 100%, rgba(39,40,44,1) 100%, rgba(39,40,44,1) 100%, rgba(237,237,237,1) 100%, rgba(32,50,96,0) 100%); } .single-project-style2:hover .img-holder:after{ opacity: 1; } .single-project-style2 .img-holder img{ width: 100%; transform: scale(1.01); transition: all 700ms ease; } .single-project-style2:hover .img-holder img { transform:scale(1.2) rotate(2deg); } .single-project-style2 .read-more{ position: absolute; top: 40px; left: 40px; z-index: 3; } .single-project-style2 .read-more a span:before{ position: relative; display: block; width: 60px; height: 60px; background: #ffffff; border-radius: 50%; color: #858585; font-size: 20px; line-height: 60px; text-align: center; transition: all 700ms ease 400ms; } .single-project-style2:hover .read-more a span:before{ color: #ffffff; background: #49576f; transform: perspective(400px) rotate(360deg); } .single-project-style2 .title-box{ position: absolute; left: 40px; bottom: 34px; z-index: 3; } .single-project-style2 .title-box span{ color: #7c7e84; } .single-project-style2 .title-box h3{ color: #ffffff; margin: 3px 0 0; } .project-carousel-v2 .owl-dots { position: relative; display: block !important; margin-top: 43px !important; line-height: 14px; } .project-carousel-v2 .owl-dots .owl-dot{ background-image: none; width: 20px; height: 5px; margin: 0px 10px; background: #e1e1e1; border: 2px solid #e1e1e1; padding: 0px; border-radius: 0%; transition: all 500ms ease; display: inline-block; } .project-carousel-v2 .owl-dots .owl-dot span{ display:none; } .project-carousel-v2 .owl-dots .owl-dot.active{ background: #49576f; border-color: #49576f; } /*** ============================================= Working Process Style2 Area style ============================================= ***/ .working-process-style2-area{ position: relative; display: block; background-attachment: fixed; background-size: cover; background-position: center top; background-repeat: no-repeat; padding: 110px 0 110px; z-index: 1; } .single-working-process-style2{ position: relative; display: block; max-width: 370px; min-width: 370px; width: 100%; margin: 0 auto; background: #ffffff; } .single-working-process-style2 .top-box { position: relative; display: block; padding: 30px 40px 20px; z-index: 2; } .single-working-process-style2 .top-box:before{ position: absolute; top: 11px; right: 0; width: 370px; height: 113px; background: url(../images/pattern/working-process-item-bg.png); content: ""; z-index: -1; opacity: 1; transition: all 300ms ease 100ms; } .single-working-process-style2:hover .top-box:before{ opacity: 0; transition: all 900ms ease 500ms; } .single-working-process-style2 .top-box:after{ position: absolute; top: 0px; left: 0; width: 370px; height: 99px; background: url(../images/pattern/working-process-item-hover-bg.png); content: ""; z-index: -1; transition: all 900ms ease 100ms; transform-style: preserve-3d; transform: perspective(1200px) rotateX(-90deg) translateZ(-45px); opacity: 0; } .single-working-process-style2:hover .top-box:after{ opacity: 1; transform: perspective(1200px) rotateX(0deg) translateZ(0px); transition: all 900ms ease 300ms; } .single-working-process-style2 .top-box .count{ position: relative; display: block; float: left; } .single-working-process-style2 .top-box .count h1 { color: #49576f; font-size: 60px; line-height: 46px; font-family: 'Futura PT Book'; transition: all 700ms ease 500ms; } .single-working-process-style2:hover .top-box .count h1{ color: #ffffff; } .single-working-process-style2 .top-box .icon{ position: relative; display: block; float: right; } .single-working-process-style2 .top-box .icon span:before{ color: #d0d0d0; font-size: 70px; line-height: 70px; } .single-working-process-style2 .inner { position: relative; display: block; overflow: hidden; padding: 35px 40px 52px; width: 100%; } .single-working-process-style2 .inner h3 { color: #49576f; margin: 0 0 18px; } .single-working-process-style2 .inner p { margin: 0; } .working-process-carousel.owl-carousel .owl-nav { position: absolute; right: 0; top: -115px; margin: 0; display: block; } .working-process-carousel.owl-carousel .owl-nav [class*="owl-"] { position: relative; display: inline-block; background: transparent; width: 55px; height: 55px; border: 1px solid #dddddd; line-height: 54px; margin: 0; padding: 0; transition: all 700ms ease 100ms; border-radius: 50%; } .working-process-carousel.owl-carousel .owl-nav [class*="owl-"] i:before{ color: #ababab; font-size: 20px; } .working-process-carousel.owl-carousel .owl-nav .owl-next { margin-left: 10px; } .working-process-carousel.owl-carousel .owl-nav [class*="owl-"]:hover{ border-color: #49576f; } /*** ============================================= Testimonial Style2 area style ============================================= ***/ .testimonial-style2-area{ position: relative; display: block; padding: 110px 0 108px; } .testimonial-style2-area .sec-title{ padding-bottom: 40px; } .single-testimonial-style2 { position: relative; display: block; border: 1px solid transparent; transition: all 700ms ease 300ms; } .single-testimonial-style2 .inner-content{ position: relative; display: block; overflow: hidden; } .single-testimonial-style2 .static-content { position: relative; display: block; padding: 55px 40px 62px; transform: translateY(0%); transition: all 700ms ease 100ms; } .single-testimonial-style2:hover .static-content{ opacity: 0; transform: translateY(-10%); transition: all 900ms ease 100ms; } .single-testimonial-style2 .static-content .quote-icon{ position: relative; display: block; padding-bottom: 11px; } .single-testimonial-style2 .static-content .quote-icon span:before{ color: #49576f; font-size: 63px; line-height: 63px; } .single-testimonial-style2 .text-box{} .single-testimonial-style2 .text-box p{ margin: 0; } .single-testimonial-style2 .static-content .client-info{ position: relative; display: block; padding-top: 32px; } .single-testimonial-style2 .client-info .review-box{} .single-testimonial-style2 .client-info .review-box ul{} .single-testimonial-style2 .client-info .review-box ul li { float: none; margin: 0 1px; } .single-testimonial-style2 .client-info .review-box ul li i{} .single-testimonial-style2 .client-info h3{ color: #49576f; font-size: 18px; margin: 8px 0 0; } .single-testimonial-style2 .client-info { position: relative; display: block; } .single-testimonial-style2 .overlay-content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ffffff; display: block; padding: 50px 40px 0; opacity: 0; transform: translateY(-10%); transition: all 700ms ease 100ms; } .single-testimonial-style2:hover .overlay-content{ opacity: 1; transform: translateY(0%); transition: all 900ms ease 100ms; } .single-testimonial-style2 .overlay-content .img-box{ position: relative; display: block; width: 80px; height: 80px; margin: 0 auto; } .single-testimonial-style2 .overlay-content .img-box img{ border-radius: 50%; } .single-testimonial-style2 .overlay-content .text-box { position: relative; display: block; padding: 10px 0 10px; margin: 14px 0 0; z-index: 2; } .single-testimonial-style2 .overlay-content .text-box .quote-icon{ position: absolute; top: -18px; left: 0; right: 0; z-index: -1; } .single-testimonial-style2 .overlay-content .text-box .quote-icon span:before{ color: #f6f6f6; font-size: 128px; line-height: 128px; } .single-testimonial-style2 .overlay-content .client-info { position: relative; display: block; padding-top: 22px; } .testimonial-style2-content{ overflow: hidden; } .testimonial-style2-content .owl-carousel{ display: block; max-width: 370px; width: 100%; margin: 0 auto; } .testimonial-style2-content .owl-carousel .owl-stage-outer{ overflow: visible; padding: 10px 0px 43px; } .testimonial-style2-content .owl-carousel .owl-stage-outer .owl-item.active .single-testimonial-style2{ -webkit-box-shadow: 0px 2px 5px 4px #f6f6f6; box-shadow: 0px 2px 5px 4px #f6f6f6; transition: all 700ms ease 800ms; } .testimonial-style2-content .owl-carousel .owl-stage-outer .owl-item.active .single-testimonial-style2 .static-content{ opacity: 0; transform: translateY(-10%); transition: all 900ms ease 300ms; } .testimonial-style2-content .owl-carousel .owl-stage-outer .owl-item.active .single-testimonial-style2 .overlay-content{ opacity: 1; transform: translateY(0%); transition: all 900ms ease 300ms; } .testimonial-carousel .owl-dots { position: relative; display: block !important; margin-top: 0px !important; line-height: 14px; } .testimonial-carousel .owl-dots .owl-dot{ background-image: none; width: 20px; height: 5px; margin: 0px 10px; background: #e1e1e1; border: 2px solid #e1e1e1; padding: 0px; border-radius: 0%; transition: all 500ms ease; display: inline-block; } .testimonial-carousel .owl-dots .owl-dot span{ display:none; } .testimonial-carousel .owl-dots .owl-dot.active{ background: #49576f; border-color: #49576f; } /*** ============================================= Contact Details Area style ============================================= ***/ .contact-details-area{ position: relative; display: block; padding: 110px 0 0; z-index: 4; } .contact-details-area .sec-title { z-index: 3; } .contact-details-area .parallax-background{ position: absolute; top: 0; left: 0; width: 100%; min-height: 550px; background-attachment: fixed; background-position: center top; background-repeat: no-repeat; background-size: cover; z-index: 1; } .contact-details-content{ position: relative; display: block; background: #f6f6f6; z-index: 3; } .content-info-box{ position: relative; display: block; background-attachment: scroll; background-position: left top; background-repeat: no-repeat; background-size: auto; min-height: 650px; margin-right: 30px; } .content-info-box .inner-content { display: flex; flex-direction: column; align-items: flex-end; flex-wrap: wrap; padding: 70px 0 70px; } .content-info-box .inner-content .inner{ -webkit-box-shadow: 3px 0px 5px 0px #ededed; box-shadow: 3px 0px 5px 0px #ededed; } .content-info-box .inner-content .single-info-box{ max-width: 270px; width: 100%; background: #49576f; text-align: center; padding: 50px 30px 42px; } .content-info-box .inner-content .single-info-box .icon{ margin-bottom: 20px; } .content-info-box .inner-content .single-info-box .icon span:before{ color: #f6f6f6; font-size: 50px; line-height: 50px; } .content-info-box .inner-content .single-info-box .text{} .content-info-box .inner-content .single-info-box .text h3{ color: #f6f6f6; font-size: 18px; margin: 0 0 12px; } .content-info-box .inner-content .single-info-box .text p{ color: #f6f6f6; margin: 0; } .content-info-box .inner-content .single-info-box.white-bg{ background: #f4f4f4; } .content-info-box .inner-content .single-info-box.white-bg .icon span:before{ color: #49576f; } .content-info-box .inner-content .single-info-box.white-bg .text h3{ color: #49576f; } .content-info-box .inner-content .single-info-box.white-bg .text p{ color: #49576f; } .contact-details-form-box { position: relative; display: block; padding: 65px 60px 0px; width: 100%; padding-left: 0; } .contact-details-form-box .title-box{ position: relative; display: block; padding-bottom: 42px; } .contact-details-form-box .title-box h2{ color: #49576f; font-size: 30px; line-height: 36px; } .contact-details-box{ position: relative; display: block; } .contact-details-form .single-box{ position: relative; display: block; } .contact-details-form input[type="text"], .contact-details-form input[type="email"], .contact-details-form textarea { position: relative; display: block; padding: 0 20px; border: 1px solid #e0e0e0; background: #f6f6f6; color: #7c7e84; font-size: 15px; width: 100%; height: 55px; margin-bottom: 30px; border-radius: 0px; transition: all 500ms ease; } .contact-details-form textarea { padding: 15px 20px; height: 120px; margin-top: 30px; margin-bottom: 50px; } .contact-details-form input[type="text"]:focus{ border-color: #49576f; } .contact-details-form input[type="email"]:focus{ border-color: #49576f; } .contact-details-form textarea:focus{ border-color: #49576f; } .contact-details-form .single-box button{ padding: 0 40px; } .contact-details-form input::-webkit-input-placeholder { color: #7c7e84; } .contact-details-form input:-moz-placeholder { color: #7c7e84; } .contact-details-form input::-moz-placeholder { color: #7c7e84; } .contact-details-form input:-ms-input-placeholder { color: #7c7e84; } .contact-details-form .single-box .bootstrap-select { position: relative; display: block; } .contact-details-form .single-box .bootstrap-select>.dropdown-toggle { position: relative; display: block; outline: none !important; border-radius: 0px; background-color: #f6f6f6; border: 1px solid #e0e0e0; height: 55px; line-height: 55px; padding: 0; padding-left: 20px; color: #7c7e84; margin: 0; box-shadow: none !important; } .contact-details-form .single-box .bootstrap-select>.dropdown-toggle::after { position: absolute; top: 50%; right: 20px; width: auto; height: auto; font-family: 'FontAwesome'; content: '\f107'; color: #7c7e84; font-size: 18px; transform: translateY(-50%); margin: 0; border: none; } .contact-details-form .single-box .bootstrap-select .dropdown-menu { position: static; margin: 0; padding: 0; border-radius: 0; border: 0px solid #ddd; background: #f9f9f9; font-size: 16px; color: #000000; } .contact-details-form .single-box .dropdown-item { display: block; width: 100%; padding: 9px 20px 9px; color: #222222; text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; border-radius: 0; transition: all 500ms ease; } .contact-details-form .single-box .dropdown-item.active, .contact-details-form .single-box .dropdown-item:active { background: #49576f; color: #fff; } .contact-details-form .single-box .dropdown-item:hover { background: #49576f; color: #fff; } /*** ============================================= Latest Blog Area Style2 style ============================================= ***/ .latest-blog-area.style2{} .more-blog-button { position: relative; display: block; margin-top: 39px; } /*** ============================================= Brand Area style2 Style2 style ============================================= ***/ .brand-area.style2{ padding-top: 110px; padding-bottom: 110px; } .single-brand-item.style2{ max-width: 170px; width: 100%; float: left; margin-right: 30px; } .single-brand-item.style2:last-child{ margin-right: 0; } .single-brand-item.style2 a:hover{ -webkit-box-shadow: 0px -4px 10px 3px #e8e8e8; box-shadow: 0px -4px 10px 3px #e8e8e8; } /*** ============================================= Instagram area style ============================================= ***/ .instagram-area { position: relative; display: block; background: #49576f; } .instagram-title { position: relative; display: block; margin-right: -30px; padding: 43px 0; z-index: 3; } .instagram-title .pattern-bg { position: absolute; top: 0; left: -500px; bottom: 0; right: 0; background: url(../images/pattern/instagram-title-bg.png); z-index: -1; background-repeat: no-repeat; } .instagram-title h3{ color: #ffffff; font-size: 20px; line-height: 28px; margin: 0 0 17px; } .instagram-title a{ color: #ffffff; } .instagram-title a:hover{ color: #49576f; } .instagram-items { position: relative; display: block; margin-right: -375px; z-index: 3; } .instagram-items li{ position: relative; display: inline-block; float: left; } .instagram-items li .img-holder { position: relative; display: block; overflow: hidden; } .instagram-items li:hover .overlay-style-two{ opacity: 1; } .instagram-items li .img-holder .overlay-style-two:before { background-color: rgba(40, 41, 46, 0.95); } .instagram-items li:hover .img-holder .overlay-style-two:before{ opacity: 1; transform: perspective(400px) rotateX(0deg); transition: all 700ms ease 100ms; } .instagram-items li .img-holder .overlay-style-two:after { background-color: rgba(40, 41, 46, 0.95); } .instagram-items li:hover .img-holder .overlay-style-two:after{ opacity: 1; transform: perspective(400px) rotateX(0deg); transition: all 700ms ease 300ms; } .instagram-items li .img-holder img { width: 100%; transform: scale(1.01); transition: all 700ms ease; } .instagram-items li:hover .img-holder img { transform:scale(1.2) rotate(2deg); } .instagram-items li .img-holder .overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; transform: translate3d(0px, -100%, 0px); transition: all 700ms ease 300ms; } .instagram-items li:hover .img-holder .overlay{ transition: all 700ms ease 500ms; transform: translate3d(0px, 0px, 0px); } .instagram-items li .img-holder .overlay .box{ display: table; width: 100%; height: 100%; } .instagram-items li .img-holder .overlay .box .link-icon{ display: table-cell; vertical-align: middle; text-align: center; } .instagram-items li .img-holder .overlay .box .link-icon a span:before{ display: inline-block; color: #ffffff; font-size: 30px; line-height: 30px; transition: all 500ms ease; } .instagram-items li .img-holder .overlay .box .link-icon a:hover span:before{ color: #49576f; } /*** ============================================= Footer Area Style2 style ============================================= ***/ .footer-area.style2 { padding: 110px 0 100px; z-index: 10; } .single-footer-widget .title-style2 { position: relative; display: block; margin-top: -4px; padding-bottom: 33px; } .single-footer-widget .title-style2 h3 { color: #ffffff; font-size: 24px; line-height: 30px; text-transform: capitalize; } .single-footer-widget .our-info-box{} .single-footer-widget .our-info-box .footer-logo{ position: relative; display: block; padding-bottom: 34px; } .single-footer-widget .our-info-box .footer-logo a{ display: inline-block; } .single-footer-widget .our-info-box .text{ position: relative; display: block; padding-bottom: 23px; } .single-footer-widget .our-info-box .text p{ color: #7c7e84; margin: 0; } .single-footer-widget .our-info-box .follow-us-social-links{ position: relative; display: block; } .single-footer-widget .our-info-box .follow-us-social-links span{ position: relative; display: inline-block; padding-right: 6px; color: #ffffff; font-size: 15px; line-height: 30px; float: left; } .single-footer-widget .our-info-box .follow-us-social-links ul{ position: relative; display: inline-block; float: left; line-height: 30px; } .single-footer-widget .our-info-box .follow-us-social-links ul li{ position: relative; display: inline-block; float: left; padding-right: 11px; margin-right: 10px; } .single-footer-widget .our-info-box .follow-us-social-links ul li:before { position: absolute; top: 10px; right: 0; width: 1px; height: 11px; background: #404146; content: ""; transform: rotate(15deg); } .single-footer-widget .our-info-box .follow-us-social-links ul li:last-child{ padding-right: 0; margin-right: 0; } .single-footer-widget .our-info-box .follow-us-social-links ul li a{ color: #7c7e84; font-size: 15px; transition: all 300ms ease 100ms; } .single-footer-widget .our-info-box .follow-us-social-links ul li a:hover{ color: #ffffff; } .single-footer-widget .usefull-links { position: relative; display: block; overflow: hidden; margin-top: -12px; } .single-footer-widget .usefull-links ul { position: relative; display: block; overflow: hidden; } .single-footer-widget .usefull-links ul.marleft30{ margin-left: 30px; } .single-footer-widget .usefull-links ul.borders-left { position: relative; margin-left: 80px; padding-left: 30px; } .single-footer-widget .usefull-links ul li { position: relative; display: block; line-height: 36px; } .single-footer-widget .usefull-links ul li a{ color: #7c7e84; font-size: 15px; padding-left: 20px; transition: all 500ms ease; } .single-footer-widget .usefull-links ul li a:hover{ color: #ffffff; } .single-footer-widget .usefull-links ul li a:before { position: absolute; top: 0px; left: 0; content: "\f107"; font-family: "Flaticon"; color: #7c7e84; font-size: 10px; transition: all 500ms ease; line-height: 36px; margin: 0px 0 0px; } .single-footer-widget .usefull-links ul li a:hover:before{ color: #ffffff; content: "\f108"; transition: all 500ms ease; } .single-footer-widget .usefull-links ul.borders-left:before{ position: absolute; top: 12px; left: 0; bottom: 7px; width: 1px; background: #404043; content: ""; } .single-footer-widget .subscribe-box{ position: relative; display: block; } .single-footer-widget .subscribe-form { position: relative; display: block; max-width: 370px; width: 100%; } .single-footer-widget .subscribe-form input[type="email"]{ position: relative; display: block; background: #49576f; border: 1px solid #404043; color: #62656f; font-size: 15px; width: 100%; height: 52px; margin-bottom: 0px; padding: 0 20px; transition: all 500ms ease; } .single-footer-widget .subscribe-form input::-webkit-input-placeholder { color: #62656f; } .single-footer-widget .subscribe-form input:-moz-placeholder { color: #62656f; } .single-footer-widget .subscribe-form input::-moz-placeholder { color: #62656f; } .single-footer-widget .subscribe-form input:-ms-input-placeholder { color: #62656f; } .single-footer-widget .subscribe-form button { margin-top: 20px; line-height: 50px; } .single-footer-widget .subscribe-form input[type="email"]:focus { border: 1px solid #ffffff; background: #ffffff; color: #222222; } .single-footer-widget .subscribe-form input[type="email"]:focus + button, .single-footer-widget .subscribe-form button:hover { background: #191a1c; color: #fff; } .single-footer-widget .subscribe-box .text{ position: relative; display: block; padding-top: 14px; } .single-footer-widget .subscribe-box .text p{ color: #7c7e84; font-size: 15px; margin: 0; } .single-footer-widget .subscribe-box .text p span{ color: #49576f; } /*** ============================================= Topbar Style3 Area style ============================================= ***/ .topbar-style3-area { position: relative; display: block; border-bottom: 1px solid #ededed; padding: 12px 0; } .topbar-style3-content { position: relative; display: flex; justify-content: space-between; flex-direction: row; align-items: center; flex-wrap: wrap; } .topbar-style3-left{ position: relative; display: block; } .topbar-style3-left ul{} .topbar-style3-left ul li{ display: inline-block; float: left; margin-right: 30px; line-height: 28px; } .topbar-style3-left ul li:last-child{ margin-right: 0; } .topbar-style3-left ul li a{ color: #7c7e84; font-size: 17px; transition: all 500ms ease; } .topbar-style3-left ul li a:hover{ color: #49576f; } .topbar-style3-right { position: relative; display: block; max-width: 270px; width: 100%; } .topbar-style3-right ul { position: relative; display: block; overflow: hidden; float: left; border-right: 1px solid #dadada; padding-right: 20px; } .topbar-style3-right ul li{ position: relative; display: inline-block; float: left; margin-right: 20px; line-height: 28px; } .topbar-style3-right ul li:last-child{ margin-right: 0; } .topbar-style3-right ul li a{ color: #7c7e84; font-size: 14px; } .topbar-style3-right ul li a:hover{ color: #49576f; } /*** ============================================= Header Style3 Area style ============================================= ***/ .header-style3-area{ position: relative; display: block; } .header-style3-content{ position: relative; display: block; overflow: hidden; } .logo-box-style3 { position: relative; display: block; margin: 5px 0; } .logo-box-style3 a{ display: inline-block; } .header-contact-info.style2 { position: relative; display: block; padding-left: 90px; border-left: none; margin: 27px 0 28px; } .header-contact-info.style2 li:last-child { margin-right: 0; padding-right: 0; border: none; } .header-call-button { position: relative; display: block; width: 270px; background: #eb5185; text-align: right; padding: 30px 30px 25px; z-index: 1; } .header-call-button a{ color: #fff; } .header-call-button:before{ position: absolute; left: 30px; bottom: 0; right: 30px; height: 1px; background: #fff; content: ""; } .header-call-button .inner{ position: relative; display: block; padding-right: 60px; } .header-call-button .inner .icon { position: absolute; top: 0; right: 0; transform: rotateY(180deg); } .header-call-button .inner .icon span:before { color: #ffffff; font-size: 40px; line-height: 50px; } .header-call-button .inner .title{ position: relative; display: block; } .header-call-button .inner .title span{ color: #ffffff; font-size: 15px; } .header-call-button .inner .title h3{ color: #ffffff; font-size: 18px; line-height: 22px; margin: 3px 0 0; font-family: 'Futura PT Book'; } /*** ============================================= Mainmenu Style3 Area style ============================================= ***/ .mainmenu-style3-area{ position: relative; display: block; background: #49576F; } .mainmenu-style3-area.stricky-fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 99999999; background: #49576f; margin: 0; animation-name: menu_sticky; animation-duration: 0.60s; animation-timing-function: ease-out; transition: all .25s ease-in-out; -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.10); -moz-box-shadow: 0 0 15px rgba(0,0,0,0.10); -ms-box-shadow: 0 0 15px rgba(0,0,0,0.10); -o-box-shadow: 0 0 15px rgba(0,0,0,0.10); box-shadow: 0 0 15px rgba(0,0,0,0.10); } .main-menu.style3 { position: relative; display: inline-block; } .main-menu.style3 .navigation > li { position: relative; display: inline-block; float: left; margin-right: 0; } .main-menu.style3 .navigation > li:last-child{ border-right: none; } .main-menu.style3 .navigation > li > a { color: #ffffff !important; padding: 18px 15px 18px; letter-spacing: 1px; } .main-menu.style3 .navigation > li:last-child > a{ padding-right: 0; } .main-menu.style3 .navigation > li:hover > a, .main-menu.style3 .navigation > li.current > a { color: #49576f; } .mainmenu-right.style3 { position: relative; display: inline-block; float: right; margin: 0; } .mainmenu-right.style3 .button a { line-height: 50px; width: 270px; padding: 0; text-align: center; text-transform: uppercase; font-size: 17px; letter-spacing: 0.5px; } .mainmenu-right.style3 .button a:hover{ background:#49576f; } /*** ============================================= Featured Area style ============================================= ***/ .featured-area { position: relative; display: block; margin-top: -160px; z-index: 10; background: transparent; } .single-featured-box{ position: relative; display: block; padding-top: 50px; max-width: 370px; width: 100%; margin: 0 auto; overflow: hidden; } .single-featured-box .inner{ position: relative; display: block; background: #49576f; transition: all 300ms ease 100ms; } .single-featured-box .inner .img-holder { position: relative; display: block; width: 255px; height: 270px; float: right; } .single-featured-box .inner .static-content { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: block; padding-top: 125px; padding-left: 30px; opacity: 1; visibility: visible; z-index: 1; transform: translateY(0px); transition: all 500ms ease 100ms; } .single-featured-box:hover .inner .static-content{ opacity: 0; visibility: hidden; transform: translateY(50%); transition: all 900ms ease 100ms; } .single-featured-box .icon{ position: relative; display: block; padding-bottom: 20px; } .single-featured-box .icon span:before{ color: #ffffff; font-size: 60px; line-height: 60px; } .single-featured-box .title{ position: relative; display: block; } .single-featured-box .title h3{ color: #ffffff; } .single-featured-box .inner .overlay-content { position: absolute; top: -50px; left: 0; bottom: 0; right: 0; display: block; padding-top: 50px; padding-left: 30px; padding-right: 30px; z-index: 3; background: #49576f; transition: all 300ms ease 100ms; opacity: 0; visibility: hidden; transform: translateY(100%); transition: all 500ms ease 100ms; } .single-featured-box:hover .inner .overlay-content{ opacity: 1; visibility: visible; transform: translateY(0%); transition: all 900ms ease 100ms; } .single-featured-box .inner .overlay-content .icon span:before{ color: #49576f; } .single-featured-box .inner .overlay-content .text{ position: relative; display: block; padding-top: 18px; padding-bottom: 0px; } .single-featured-box .inner .overlay-content .text p{ color: #ffffff; margin: 0 0 26px; } .single-featured-box .inner .overlay-content .text a{ color: #ffffff; } .single-featured-box .overlay-content .overlay-image{ position: absolute; bottom: 0; right: 0; width: 255px; height: 00px; opacity: 0; transform: scale(0.5); transition: all 500ms ease 100ms; } .single-featured-box:hover .overlay-content .overlay-image{ opacity: 1; height: 270px; transform: scale(1.0); transition: all 900ms ease 500ms; } .about-style3-content{ position: relative; display: block; padding-top: 110px; padding-bottom: 110px; } .about-style3-content .sec-title{ padding-bottom: 40px; margin: 0; } .about-style3-content .sec-title p { margin: 15px 0 27px; } .about-style3-content .button{} .about-style3-content .button a{ padding: 0 40px; margin: 0 13px; } .about-style3-content .button a.black{ background: #49576f; } .about-style3-bg { position: absolute; left: 0; top: -60px; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center top; background-size: cover; z-index: -1; opacity: 1; } @-webkit-keyframes banner-animate { 0% { -webkit-transform: translateX(-300px); transform: translateX(-300px); } 50% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(-300px); transform: translateX(-300px); } } @keyframes banner-animate { 0% { -webkit-transform: translateX(-300px); transform: translateX(-300px); } 50% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(-300px); transform: translateX(-300px); } } .banner-animate { animation-name: banner-animate; animation-duration: 70s; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: banner-animate; -webkit-animation-duration: 70s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: banner-animate; -moz-animation-duration: 70s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: banner-animate; -ms-animation-duration: 70s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: banner-animate; -o-animation-duration: 70s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } /*** ============================================= Services Style2 Area style ============================================= ***/ .services-style2-area { position: relative; display: block; background: #f6f6f6; padding: 110px 0 108px; z-index: 1; } .services-style2-area:before{ position: absolute; left: 0; bottom: 0; width: 100%; height: 407px; background: #ffffff; content: ""; z-index: -1; } .single-service-style2 .img-holder{ position: relative; display: block; overflow: hidden; z-index: 1; } .single-service-style2 .img-holder img { width: 100%; transform: scale(1.01); transition: all 700ms ease; } .single-service-style2:hover .img-holder img { transform: scale(1.2); } .single-service-style2:hover .overlay-style-two{ opacity: 1; } .single-service-style2 .img-holder .overlay-style-two:before{ background-color: rgba(40, 41, 46, 0.90); } .single-service-style2:hover .img-holder .overlay-style-two:before{ opacity: 1; transform: perspective(400px) rotateX(0deg); transition: all 700ms ease 100ms; } .single-service-style2 .img-holder .overlay-style-two:after{ background-color: rgba(40, 41, 46, 0.90); } .single-service-style2:hover .img-holder .overlay-style-two:after{ opacity: 1; transform: perspective(400px) rotateX(0deg); transition: all 700ms ease 300ms; } .single-service-style2 .text-holder{ position: relative; display: block; background: transparent; z-index: 10; } .single-service-style2 .text-holder .icon-holder { position: relative; display: block; width: 110px; height: 110px; border-radius: 50%; margin: -55px auto 0; border: 4px dotted #c9c9c9; background: #ffffff; text-align: center; z-index: 2; } .single-service-style2 .text-holder .icon-holder span:before { display: block; color: #b3b3b3; font-size: 50px; line-height: 102px; } .single-service-style2 .text-holder .inner{ position: relative; display: block; padding: 26px 0px 0px; text-align: center; background: #ffffff; z-index: 1; } .single-service-style2 .text-holder .inner:before { position: absolute; top: -55px; left: 0; bottom: 0; right: 0; background: #ffffff; content: ""; z-index: -1; } .single-service-style2 .text-holder .inner h3{ color: #49576f; margin: 0 0 18px; } .single-service-style2 .text-holder .inner .text { position: relative; display: block; padding: 0 30px 32px; } .single-service-style2 .text-holder .inner .text p{ margin: 0; } .single-service-style2 .text-holder .inner .read-more a{ color: #49576f; background: #f6f6f6; display: block; } .services-style2-content{ overflow: hidden; } .services-style2-content .owl-carousel{ display: block; max-width: 370px; width: 100%; margin: 0 auto; } .services-style2-content .owl-carousel .owl-stage-outer{ overflow: visible; padding: 0px 0px 43px; } .services-style2-content .owl-carousel .owl-stage-outer .owl-item.active .overlay-style-two{ opacity: 1; } .services-style2-content .owl-carousel .owl-stage-outer .owl-item.active .overlay-style-two:before{ opacity: 1; transform: perspective(400px) rotateX(0deg); transition: all 700ms ease 300ms; } .services-style2-content .owl-carousel .owl-stage-outer .owl-item.active .overlay-style-two:after{ opacity: 1; transform: perspective(400px) rotateX(0deg); transition: all 700ms ease 500ms; } .services-style2-content .owl-carousel .owl-stage-outer .owl-item.active .single-service-style2 .text-holder .icon-holder { border: 4px dotted #49576f; transition: all 700ms ease 700ms; } .services-style2-content .owl-carousel .owl-stage-outer .owl-item.active .single-service-style2 .text-holder .icon-holder span:before { color: #49576f; transition: all 700ms ease 800ms; } .services-style2-content .owl-carousel .owl-stage-outer .owl-item.active .single-service-style2 .text-holder .inner .read-more a{ color: #ffffff; background: #49576f; transition: all 700ms ease 900ms; } .services-carousel .owl-dots { position: relative; display: block !important; margin-top: 0px !important; line-height: 14px; } .services-carousel .owl-dots .owl-dot{ background-image: none; width: 20px; height: 5px; margin: 0px 10px; background: #e1e1e1; border: 2px solid #e1e1e1; padding: 0px; border-radius: 0%; transition: all 500ms ease; display: inline-block; } .services-carousel .owl-dots .owl-dot span{ display:none; } .services-carousel .owl-dots .owl-dot.active{ background: #49576f; border-color: #49576f; } /*** ============================================= Latest Projects Area style ============================================= ***/ .latest-projects-area{ position: relative; display: block; background: #49576f; width: 100%; padding: 110px 60px 104px; } .latest-projects-v3{ padding: 0; } .single-project-style3 .img-holder{ position: relative; display: block; overflow: hidden; z-index: 10; } .single-project-style3 .img-holder img{ width: 100%; transform: scale(1.01); transition: all 700ms ease; } .single-project-style3:hover .img-holder img { transform:scale(1.2) rotate(2deg); } .single-project-style3 .overlay-content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: rgba(0, 0, 0, 0.70); transform: scaleX(0); border: 4px solid #49576f; transition: all 700ms ease 100ms; z-index: 3; } .single-project-style3:hover .overlay-content{ transform: scaleY(1); } .single-project-style3 .overlay-content .inner-content{ display: table; width: 100%; height: 100%; } .single-project-style3 .overlay-content .inner-content .links-icons{ display: table-cell; vertical-align: middle; text-align: center; transform: scale(0); transition: all 700ms ease 500ms; } .single-project-style3:hover .overlay-content .inner-content .links-icons{ transform: scale(1.0); } .single-project-style3 .overlay-content .inner-content .links-icons a span:before{ position: relative; display: block; width: 35px; height: 35px; margin: 0 auto; color: #ffffff; font-size: 35px; line-height: 35px; transition: all 500ms ease; } .single-project-style3 .overlay-content .inner-content .links-icons a:hover span:before{ color: #49576f; } .single-project-style3 .title-holder{ position: relative; display: block; padding-top: 24px; } .single-project-style3 .title-holder span{ color: #7c7e84; } .single-project-style3 .title-holder h3{ color: #ffffff; margin: 3px 0 0; } .project-carousel-v3.owl-carousel .owl-nav { position: absolute; top: -115px; display: block; left: 0; right: 0; max-width: 1170px; width: 100%; margin: 0 auto; } .project-carousel-v3.owl-carousel .owl-nav [class*="owl-"] { position: absolute; right: 0; display: inline-block; background: transparent; width: 55px; height: 55px; border: 1px solid #3f3f42; line-height: 54px; margin: 0; padding: 0; transition: all 700ms ease 100ms; border-radius: 50%; } .project-carousel-v3.owl-carousel .owl-nav .owl-prev { right: 65px; } .project-carousel-v3.owl-carousel .owl-nav [class*="owl-"] i:before{ color: #5e5e5e; font-size: 20px; } .project-carousel-v3.owl-carousel .owl-nav .owl-next { margin-left: 10px; } .project-carousel-v3.owl-carousel .owl-nav [class*="owl-"]:hover{ border-color: #49576f; } /*** ============================================= Team Area style ============================================= ***/ .team-area { position: relative; display: block; padding-top: 110px; padding-bottom: 60px; } .view-all-member{ position: relative; display: block; margin-top: 39px; } .single-team-member { position: relative; display: block; margin-bottom: 50px; transition: all 500ms ease; } .single-team-member .img-holder { position: relative; display: block; overflow: hidden; } .single-team-member .img-holder img{ width: 100%; transform: scale(1.0); transition: all 700ms ease; } .single-team-member:hover .img-holder img{ transform:scale(1.05) rotate(0deg); } .single-team-member .sociallinks { position: absolute; top: 0; left: 0; right: 0; border-top: 4px solid #49576f; text-align: center; transition: all 900ms ease 100ms; transform-style: preserve-3d; transform: perspective(1200px) rotateX(-90deg) translateZ(-32px); opacity: 0; } .single-team-member:hover .sociallinks{ opacity: 1; transform: perspective(1200px) rotateX(0deg) translateZ(0px); transition: all 900ms ease 300ms; } .single-team-member .sociallinks li { position: relative; display: inline-block; float: left; width: 20%; line-height: 60px; border-right: 1px solid #ededed; } .single-team-member .sociallinks li:last-child{ border-right: none; } .single-team-member .sociallinks li a i{ position: relative; display: block; background: #ffffff; color: #7c7e84; font-size: 14px; line-height: 60px; transition: all 500ms ease; } .single-team-member .sociallinks li a:hover i{ color: #ffffff; background: #49576f; } .single-team-member .overlay { position: absolute; top: 64px; left: 0; bottom: 0; right: 0; z-index: 3; background: rgba(0, 0, 0, 0.85); transition: all 900ms ease 100ms; opacity: 0; transform-style: preserve-3d; transform: perspective(1200px) rotateX(-90deg) translateZ(-32px); } .single-team-member:hover .overlay{ opacity: 1; transform: perspective(1200px) rotateX(0deg) translateZ(0px); transition: all 900ms ease 300ms; } .single-team-member .overlay .box{ display: table; width: 100%; height: 100%; } .single-team-member .overlay .box .link{ display: table-cell; vertical-align: middle; text-align: center; } .single-team-member .overlay .box .link a{ color: #ffffff; } .single-team-member .name { position: relative; display: block; background: #ffffff; padding: 24px 0 24px; transition: all 700ms ease 600ms; -webkit-box-shadow: 0px 3px 7px 1px #f3f3f3; box-shadow: 0px 3px 7px 1px #f3f3f3; } .single-team-member:hover .name{ -webkit-box-shadow: 0px 3px 15px 1px #F3F3F3; box-shadow: 0px 3px 15px 1px #F3F3F3; } .single-team-member .name p { position: relative; display: inline-block; background: #ffffff; margin: 0; line-height: 20px; padding: 0 30px; z-index: 1; } .single-team-member .name p:before { position: absolute; top: 10px; left: 0; right: 0; height: 1px; background: #ededed; content: ""; z-index: -1; } .single-team-member .name p span { position: relative; display: inline-block; background: #ffffff; padding: 0 10px; color: #49576f; line-height: 20px; margin: 0; z-index: 2; } .single-team-member .name h3{ color: #49576f; margin: 8px 0 0; } /*** ============================================= Testimonial style3 area style ============================================= ***/ .testimonial-style3-area{ position: relative; display: block; background: #f6f6f6; padding: 110px 0 60px; } .single-testimonial-style3{ position: relative; display: block; padding-left: 20px; z-index: 1; } .single-testimonial-style3:before{ position: absolute; top: 20px; left: 0; bottom: -20px; right: 20px; border: 1px solid #dadada; content: ""; z-index: -1; } .single-testimonial-style3 .inner-content{ position: relative; display: block; background: #ffffff; padding: 50px 40px 48px; z-index: 1; } .single-testimonial-style3 .inner-content:before { font-family: 'icomoon'; position: absolute; bottom: 38px; right: 40px; content: "\e906"; color: #f6f6f6; font-size: 120px; line-height: 90px; z-index: -1; } .single-testimonial-style3 .client-info{ position: relative; display: block; } .single-testimonial-style3 .client-info .image{ width: 50px; } .single-testimonial-style3 .client-info .image img{ border-radius: 50%; } .single-testimonial-style3 .client-info .image, .single-testimonial-style3 .client-info .title{ display: table-cell; vertical-align: middle; } .single-testimonial-style3 .client-info .title{ padding-left: 20px; } .single-testimonial-style3 .client-info .title h3{ color: #49576f; font-size: 18px; margin: 0 0 2px; } .single-testimonial-style3 .client-info .title span{ color: #49576f; } .single-testimonial-style3 .text-box{ position: relative; display: block; padding-top: 20px; padding-bottom: 21px; } .single-testimonial-style3 .text-box p{ line-height: 28px; margin: 0; } .testimonial-carousel-2.owl-carousel .owl-stage-outer { padding: 0px 0px 63px; } .testimonial-carousel-2 .owl-dots { position: relative; display: block !important; margin-top: 0px !important; line-height: 14px; } .testimonial-carousel-2 .owl-dots .owl-dot{ background-image: none; width: 20px; height: 5px; margin: 0px 10px; background: #e1e1e1; border: 2px solid #e1e1e1; padding: 0px; border-radius: 0%; transition: all 500ms ease; display: inline-block; } .testimonial-carousel-2 .owl-dots .owl-dot span{ display:none; } .testimonial-carousel-2 .owl-dots .owl-dot.active{ background: #49576f; border-color: #49576f; } .testimonial-style3-area .owl-nav{ display: none; } .brand-style3{ padding-top: 30px; } .single-brand-item.style3{ max-width: 170px; width: 100%; float: left; margin-right: 30px; } .single-brand-item.style3 a { display: block; background: transparent; text-align: center; transition: all 700ms ease 200ms; } .single-brand-item.style3:last-child{ margin-right: 0; } .single-brand-item.style3 a:hover{ box-shadow: none; } /*** ============================================= Latest Blog Area Style3 style ============================================= ***/ .latest-blog-area.style3{ padding-top: 110px; padding-bottom: 70px; } .single-blog-post.style2{ margin-bottom: 40px; -webkit-box-shadow: 0px 3px 9px 2px #ebebeb; box-shadow: 0px 3px 9px 2px #ebebeb; } .single-blog-post.style2 .text-holder{ padding: 25px 30px 20px; } .single-blog-post.style2 .meta-box { min-height: 30px; margin-top: 16px; margin-bottom: 0px; } .single-blog-post.style2 .img-holder{ z-index: 1; } .single-blog-post.style2 .img-holder:before{ position: absolute; left: 0; bottom: 0; right: 0; height: 40%; content: ""; transition: all 300ms ease 100ms; z-index: 2; background: rgb(39,40,44); background: linear-gradient(180deg, rgba(39,40,44,0) 40%, rgba(39,40,44,0.8407738095238095) 78%, rgba(39,40,44,1) 94%, rgba(39,40,44,1) 100%, rgba(39,40,44,1) 100%, rgba(237,237,237,1) 100%, rgba(32,50,96,0) 100%); } .single-blog-post.style2 .overlay-title{ position: absolute; left: 30px; bottom: 23px; right: 30px; z-index: 3; } .single-blog-post.style2 .overlay-title .blog-title{ position: relative; display: block; font-size: 20px; line-height: 28px; } .single-blog-post.style2 .overlay-title .blog-title a{ color: #ffffff; transition: all 500ms ease; } .single-blog-post.style2 .overlay-title .blog-title a:hover{ color: #49576f; } /*** ============================================= Home Google Map Area style ============================================= ***/ .home-google-map-area{ position: relative; display: block; } .home-google-map-area .container-fluid{ padding: 0; } #home-google-map { height: 550px; width: 100%; } /*** ============================================= Footer Area style3 style ============================================= ***/ .footer-area.style3 { padding: 110px 0 100px; } .single-footer-widget .our-info-box.style2 .text{ padding: 0; } .single-footer-widget .our-info-box .more-info-about-company { color: #ffffff; margin-top: 26px; display: inline-block; } .single-footer-widget .work-gallery { position: relative; display: block; overflow: hidden; margin-left: -7.5px; margin-right: -7.5px; } .single-footer-widget .work-gallery li { position: relative; display: inline-block; float: left; margin: 0 7.5px 15px; } .single-footer-widget .work-gallery li .img-holder { position: relative; display: block; overflow: hidden; } .single-footer-widget .work-gallery li .img-holder img{ transition: all 0.5s ease-in-out 0.6s; width: 100%; transform: scale(1.1, 1.1); } .single-footer-widget .work-gallery li:hover .img-holder img{ transform: scale(1.2, 1.2); } .single-footer-widget .work-gallery li:hover .img-holder .overlay-style-one{ opacity: 1; } .single-footer-widget .work-gallery 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 .work-gallery 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 .work-gallery li .img-holder .overlay-style-one .content a:hover i{ color: #222222; } /*** ============================================= Footer Bottom Area Style2 Style ============================================= ***/ .footer-bottom-area.style2 { background: #49576f; } .footer-social-links.clr-white span{ color: #ffffff; } /*** ============================================= Breadcrumb area style ============================================= ***/ .breadcrumb-area { position: relative; background-attachment: scroll; background-position: center top; background-repeat: no-repeat; background-size: cover; padding: 0px 0 0px; z-index: 10; } .breadcrumb-area .inner-content { position: relative; display: block; padding: 360px 0 0; } .breadcrumb-area .title { position: relative; display: block; padding-top: 24px; padding-bottom: 47px; } .breadcrumb-area .title:before{ position: absolute; top: 0; left: 0; width: 120px; height: 5px; background: #ffffff; content: ""; } .breadcrumb-area .title h1{ color: #ffffff; font-size: 45px; line-height: 60px; text-transform: uppercase; margin: 0; font-family: Futura PT Bold; } .breadcrumb-area .breadcrumb-menu { position: relative; display: inline-block; line-height: 10px; } .breadcrumb-area .breadcrumb-menu ul { position: relative; display: inline-block; line-height: 30px; padding-bottom: 20px; } .breadcrumb-area .breadcrumb-menu ul li { position: relative; display: inline-block; float: left; color: #ffffff; font-size: 15px; line-height: 30px; text-transform: capitalize; transition: all 500ms ease; margin-right: 10px; padding-right: 17px; } .breadcrumb-area .breadcrumb-menu ul li:before { position: absolute; top: 0; bottom: 0; right: 0px; width: 7px; height: 2px; background: url(../images/icon/arrow.png); content: ""; margin: 14px 0; } .breadcrumb-area .breadcrumb-menu ul li:last-child:before{ display: none; } .breadcrumb-area .breadcrumb-menu ul li:last-child{ margin-right: 0; padding-right: 0; } .breadcrumb-area .breadcrumb-menu ul li a{ color: #ffffff; font-size: 15px; text-transform: capitalize; transition: all 500ms ease; } .breadcrumb-area .breadcrumb-menu ul li.active{ } .breadcrumb-area .breadcrumb-menu ul li a:hover{ color: #49576f; } /*** ============================================= Breadcrumb Area style2 Style ============================================= ***/ .breadcrumb-area.style2{} .breadcrumb-area .inner-content-box .title-s2 { position: relative; display: block; padding: 143px 0 86px; } .breadcrumb-area .inner-content-box .title-s2 span{ color: #49576f; font-size: 18px; line-height: 18px; text-transform: uppercase; font-family: 'Futura PT Demi'; } .breadcrumb-area .inner-content-box .title-s2 h1{ color: #ffffff; font-size: 48px; line-height: 62px; margin: 14px 0 0; text-transform: uppercase; font-family: Futura PT Bold; } /*** ============================================= Company Overview Area Style ============================================= ***/ .company-overview-area{ position: relative; display: block; padding: 105px 0 116px; z-index: 1; } .company-overview-area:before{ position: absolute; left: 0; bottom: 0; width: 100%; height: 580px; background: #f6f6f6; content: ""; z-index: -1; } .intro-box { position: relative; display: flex; flex-direction: row; align-items: flex-end; margin-bottom: 70px; } .intro-box .sec-title{ position: relative; display: block; max-width: 530px; width: 100%; margin: 0; padding: 0; } .intro-box .text{ position: relative; display: block; max-width: 640px; width: 100%; } .intro-box .text p{ margin: 0; } .history-content-box{ position: relative; display: block; } .single-history-content{ position: relative; display: block; overflow: hidden; width: 100%; background: #ffffff; -webkit-box-shadow: 4px 0px 9px 2px #f6f6f6; box-shadow: 4px 0px 9px 2px #f6f6f6; } .single-history-content .img-box{ position: relative; display: block; width: 50%; float: left; } .single-history-content .img-box .inner{ padding-right: 15px; } .single-history-content .img-box .inner img{ width: 100%; } .single-history-content .text-box { position: relative; display: block; width: 50%; float: left; padding-left: 65px; min-height: 450px; } .single-history-content .text-box .inner { position: relative; display: block; padding-top: 70px; padding-right: 50px; } .single-history-content .text-box .inner .date{ position: relative; display: block; width: 130px; background: #49576f; text-align: center; z-index: 1; } .single-history-content .text-box .inner .date:before { position: absolute; left: 0; bottom: -9px; width: 9px; height: 10px; background: url(../images/icon/arrow-2.png); content: ""; z-index: -1; } .single-history-content .text-box .inner .date h3{ color: #ffffff; font-size: 24px; line-height: 42px; font-family: 'Futura PT Book'; } .single-history-content .text-box .inner .title{ position: relative; display: block; padding: 43px 0 31px; } .single-history-content .text-box .inner .title h3{ color: #49576f; font-size: 24px; line-height: 32px; text-transform: uppercase; } .single-history-content .text-box .inner .text{ position: relative; display: block; } .single-history-content .text-box .inner .text p{ margin: 0 0 33px; } .history-carousel.owl-carousel .owl-stage-outer { padding: 10px 0 40px; padding-right: 10px; } .history-carousel.owl-theme .owl-nav { position: relative; display: block; width: 200px; margin: 0 auto; text-align: center; } .history-carousel.owl-theme .owl-nav [class*="owl-"] { position: absolute; top: 0; display: block; background: transparent; color: #a7a7a7; font-size: 20px; line-height: 30px; width: 30px; height: 30px; margin: 0; padding: 0; border: 0px solid; transition: all 700ms ease 0s; } .history-carousel.owl-theme .owl-nav .owl-prev{ left: 0; } .history-carousel.owl-theme .owl-nav .owl-next{ right: 0; } .history-carousel .owl-dots { position: relative; display: block !important; margin-top: 0px !important; line-height: 30px; width: 140px; margin: 0 auto; } .history-carousel .owl-dots .owl-dot{ background-image: none; width: 8px; height: 8px; margin: 0px 7.5px; background: #dadada; border: 2px solid #dadada; padding: 0px; border-radius: 50%; transition: all 500ms ease; display: inline-block; } .history-carousel .owl-dots .owl-dot span{ display:none; } .history-carousel .owl-dots .owl-dot.active{ background: #49576f; border-color: #49576f; } .fact-counter{ padding-top: 90px; } .single-fact-counter { position: relative; display: block; width: 100%; } .single-fact-counter .count-box { position: relative; width: 90px; padding-left: 35px; z-index: 1; } .single-fact-counter .count-box:before { position: absolute; top: -8px; left: 0; width: 70px; height: 70px; background: #ffffff; content: ""; z-index: -1; } .single-fact-counter .count-box h1{ color: #49576f; font-size: 48px; line-height: 40px; font-family: 'Futura PT Book'; } .single-fact-counter .count-box h1 span{ display: inline-block; float: left; } .single-fact-counter .count-box h1 img{ display: inline-block; float: left; padding-left: 1px; } .single-fact-counter .count-box, .single-fact-counter .title{ display: table-cell; vertical-align: middle; } .single-fact-counter .title{ padding-left: 20px; } .single-fact-counter .title h3 { color: #49576f; font-size: 18px; line-height: 28px; } /*** ============================================= team Area Style ============================================= ***/ .view-all-member.style2 { margin: 0px 0 0; } .view-all-member.style2 a{ line-height: 56px; } /*** ============================================= Footer Area Style4 Style ============================================= ***/ .footer-area.style4 { padding: 110px 0 160px; z-index: 10; } /*** ============================================= Footer Contact Info Area Style ============================================= ***/ .footer-contact-info-area { position: relative; display: block; background: transparent; margin: -60px 0 -60px; z-index: 100; } .footer-contact-info{ position: relative; display: block; background: #ffffff; } li .footer-contact-info{} li .single-footer-contact-info { position: relative; display: inline-block; float: left; max-width: 385px; width: 100%; border-right: 1px solid #ededed; } li:last-child .single-footer-contact-info { border-right: 0px solid; } li .single-footer-contact-info .inner { position: relative; display: block; padding: 35px 40px 30px; } li .single-footer-contact-info .icon{ width: 60px; } li .single-footer-contact-info .icon span:before{ color: #2f3033; font-size: 50px; transition: all 500ms ease; } li .single-footer-contact-info:hover .icon span:before{ color: #49576f; } li .single-footer-contact-info .icon, li .single-footer-contact-info .text{ display: table-cell; vertical-align: middle; } li .single-footer-contact-info .text p{ color: #49576f; margin: 0; } li .single-footer-contact-info .text p span{ color: #49576f; } /*** ============================================= Footer bottom Area Style3 Style ============================================= ***/ .footer-bottom-area.style3 { position: relative; display: block; padding: 88px 0 28px; background: #1f1f23; z-index: 10; } /*** ============================================= Faq Area style ============================================= ***/ .faq-area{ position: relative; display: block; padding: 110px 0 110px; } .faq-content-box { position: relative; display: block; background: #f6f6f6; padding: 60px 60px 40px; } /*** ============================================= Error Page Area Style ============================================= ***/ .error-page-area{ position: relative; display: block; background: #f6f6f6; padding: 145px 0 150px; } .error-content{ position: relative; display: block; z-index: 3; } .error-content span{ color: #49576f; font-size: 14px; text-transform: uppercase; } .error-content .title{ position: relative; display: block; color: #49576f; font-size: 180px; line-height: 150px; text-transform: uppercase; margin: 13px 0 14px; } .error-content p{ font-size: 18px; line-height: 28px; margin: 0 0 32px; } .error-content .button{} .error-content .button a { width: 270px; } /*** ============================================= Services Style2 Service Page Style ============================================= ***/ .services-style2-service-page{ position: relative; display: block; padding-top: 110px; padding-bottom: 70px; } .services-style2-service-page .sec-title{ position: relative; display: block; } .services-style2-service-page .text { position: relative; display: block; margin-top: 10px; } .services-style2-service-page .text p{ font-size: 17px; line-height: 27px; margin: 0; } .single-service-style2{ margin-bottom: 40px; } .single-service-style2:hover .text-holder .icon-holder { border: 4px dotted #49576f; transition: all 700ms ease 700ms; } .single-service-style2:hover .text-holder .icon-holder span:before { color: #49576f; transition: all 700ms ease 800ms; } .single-service-style2:hover .text-holder .inner .read-more a{ color: #ffffff; background: #49576f; transition: all 700ms ease 900ms; } /*** ============================================= Services Style1 Service Page Style ============================================= ***/ .services-style1-service-page{ position: relative; display: block; background: #f6f6f6; padding: 110px 0 60px; } .single-service-style1 .text-holder.bg-white { position: relative; display: block; border: 1px solid #ededed; padding: 35px 30px 28px; background: #ffffff; } .single-service-style1 .text-holder.bg-white .overlay-content .read-more a span:before { position: absolute; left: auto; right: 30px; transform: scale(0); transition: all 300ms ease 100ms; } .single-service-style1:hover .text-holder.bg-white .overlay-content .read-more a span:before{ transform: scale(1.0); transition: all 900ms ease 900ms; } /*** ============================================= Testimonial Style3 Service Page Style ============================================= ***/ .testimonial-style3-service-page{ position: relative; display: block; background: #ffffff; padding: 110px 0 110px; } .testimonial-style3-service-page .sec-title { padding-bottom: 40px; } .testimonial-style3-service-page .single-testimonial-style3:before { position: absolute; top: 20px; left: 0; bottom: -20px; right: 30px; border: 1px solid #ededed; content: ""; z-index: -1; } .testimonial-style3-service-page .single-testimonial-style3 .inner-content { background: #ffffff; padding: 50px 40px 48px; -webkit-box-shadow: 0px 2px 7px 3px #f6f6f6; box-shadow: 0px 2px 7px 3px #f6f6f6; margin-top: 10px; margin-right: 10px; } .testimonial-style3-service-page .testimonial-carousel-2.owl-carousel .owl-stage-outer { padding: 0px 0px 20px; } .testimonial-style3-service-page .testimonial-carousel-2 .owl-dots { display: none !important; } .testimonial-style3-service-page .owl-carousel .owl-nav { position: absolute; top: -115px; left: auto; right: 10px; max-width: 1170px; width: 100%; } .testimonial-style3-service-page .owl-carousel .owl-nav [class*="owl-"] { position: absolute; right: 0; display: inline-block; background: transparent; width: 55px; height: 55px; border: 1px solid #ededed; line-height: 54px; margin: 0; padding: 0; transition: all 700ms ease 100ms; border-radius: 50%; } .testimonial-style3-service-page .owl-carousel .owl-nav .owl-prev { right: 65px; } .testimonial-style3-service-page .owl-carousel .owl-nav [class*="owl-"] i:before{ color: #bfbfbf; font-size: 20px; transition: all 500ms ease; } .testimonial-style3-service-page .owl-carousel .owl-nav [class*="owl-"]:hover i:before{ color: #ffffff; } .testimonial-style3-service-page .owl-carousel .owl-nav .owl-next { margin-left: 10px; } .testimonial-style3-service-page .owl-carousel .owl-nav [class*="owl-"]:hover{ background: #49576f; border-color: #49576f; } /*** ============================================= Single Service Area style ============================================= ***/ .single-service-area{ position: relative; display: block; padding: 110px 0 110px; } .single-service-top { position: relative; display: block; } .single-service-image-box{ position: relative; display: block; } .single-service-image-box img{ width: 100%; } .single-service-top .text { position: relative; display: block; padding-top: 41px; padding-bottom: 26px; } .single-service-top .text h2{ color: #49576f; font-size: 30px; line-height: 40px; text-transform: uppercase; } .single-service-top .text .inner{ position: relative; display: block; padding-top: 14px; } .advantages-content{ position: relative; display: block; } .single-advantages-box{ position: relative; display: block; border: 1px solid #ededed; text-align: center; transition: all 700ms ease 500ms; } .single-advantages-box:hover{ -webkit-box-shadow: 0px 4px 13px 0px #D4D4D4; box-shadow: 0px 4px 13px 0px #D4D4D4; } .single-advantages-box .inner { position: relative; display: block; padding: 29px 0 23px; overflow: hidden; } .single-advantages-box .static-content{ position: relative; display: block; -webkit-transform: translateY(0%); transform: translateY(0%); transition: all 700ms ease 200ms; } .single-advantages-box:hover .static-content{ opacity: 0; transform: translateY(-40%); transition: all 700ms ease 200ms; } .single-advantages-box .icon-holder{ position: relative; display: block; padding-bottom: 26px; } .single-advantages-box .icon-holder span:before{ color: #49576f; font-size: 65px; line-height: 65px; } .single-advantages-box .title{ position: relative; display: block; } .single-advantages-box .title h3{ color: #49576f; font-size: 18px; line-height: 24px; } .single-advantages-box .overlay-text{ position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; background: #49576f; opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); transition: all 700ms ease 200ms; } .single-advantages-box:hover .overlay-text{ opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); transition: all 700ms ease 200ms; } .single-advantages-box .overlay-text .box{ display: table; width: 100%; height: 100%; } .single-advantages-box .overlay-text .box .inner-text{ display: table-cell; vertical-align: middle; text-align: center; padding: 0 10px; } .single-advantages-box .overlay-text .box .inner-text p{ color: #ffffff; margin: 0; } .how-work-box{ position: relative; display: block; padding-top: 80px; } .how-work-box .image-box{ position: relative; display: block; } .how-work-box .image-box img{ width: 100%; } .how-work-box .how-works-content{ position: relative; display: block; } .how-work-box .how-works-content h2{ color: #49576f; font-size: 24px; margin-top: -5px; text-transform: uppercase; } .how-work-box .how-works-content ul{ position: relative; display: block; overflow: hidden; padding-top: 28px; } .how-work-box .how-works-content ul li{ position: relative; display: block; padding-left: 20px; margin-bottom: 26px; } .how-work-box .how-works-content ul li:last-child{ margin-bottom: 0; } .how-work-box .how-works-content ul li .icon { position: absolute; top: 6px; left: 1px; } .how-work-box .how-works-content ul li .icon span:before{ color: #49576f; font-size: 20px; } .how-work-box .how-works-content ul li .text{ position: relative; display: block; padding-left: 20px; } .how-work-box .how-works-content ul li .text span{ color: #49576f; font-size: 14px; text-transform: uppercase; } .how-work-box .how-works-content ul li .text h3{ color: #49576f; font-size: 20px; line-height: 28px; margin: 2px 0 12px; } .how-work-box .how-works-content ul li .text p{ margin: 0; } .concept-design-pricing-box { position: relative; display: block; padding-top: 64px; } .concept-design-pricing-box .title{ display: block; padding-bottom: 32px; } .concept-design-pricing-box .title h2{ color: #49576f; font-size: 24px; line-height: 32px; text-transform: uppercase; } .concept-design-pricing-box .inner-content{ position: relative; display: block; } .single-pricing-box{ position: relative; display: block; max-width: 370px; width: 100%; margin: 0 auto 30px; } .single-pricing-box .inner{ position: relative; display: block; overflow: hidden; } .single-pricing-box .inner .img-box{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .single-pricing-box .inner .img-box:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: rgba(40, 41, 46, 0.95); z-index: 1; } .single-pricing-box .inner .img-box img{ width: 100%; height: 100%; } .single-pricing-box .static-content{ position: relative; display: block; overflow: hidden; z-index: 3; opacity: 1; transform: translateX(0%) translateY(0%) scale(1.0); transition: all 700ms ease 100ms; } .single-pricing-box:hover .static-content{ opacity: 0; transform: translateX(0%) translateY(70%) scale(0.5); transition: all 900ms ease 100ms; } .single-pricing-box .static-content .table-header { position: relative; display: block; padding-top: 46px; } .single-pricing-box .static-content .table-header .top { position: relative; display: block; padding-bottom: 25px; } .single-pricing-box .static-content .table-header .top h3{ color: #ffffff; font-size: 20px; margin: 0 0 3px; } .single-pricing-box .static-content .table-header .top span{ color: #ffffff; } .single-pricing-box .static-content .table-header .top span b{ color: #49576f; } .single-pricing-box .static-content .table-header .package { position: relative; display: block; } .single-pricing-box .static-content .table-header .package h1 { color: #49576f; font-size: 60px; line-height: 50px; font-family: 'Futura PT Book'; } .single-pricing-box .static-content .table-header .package span { position: relative; top: -17px; display: inline-block; font-size: 32px; line-height: 32px; padding-right: 2px; } .single-pricing-box .static-content .table-header .package p{ color: #ffffff; font-size: 14px; text-transform: uppercase; margin: 8px 0 0; font-family: 'Futura PT Book'; } .single-pricing-box .static-content .button{ position: relative; display: block; padding-top: 32px; padding-bottom: 50px; } .single-pricing-box .static-content .button a{} .single-pricing-box .inner .overlay-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; display: block; z-index: 10; padding: 40px 40px 0px; opacity: 0; transform-style: preserve-3d; transform: perspective(1200px) rotateY(90deg) translateX(-1200px); transition: all 700ms ease 100ms; } .single-pricing-box:hover .inner .overlay-content{ opacity: 1; transform: perspective(1200px) rotateY(0deg) translateX(0px); transition: all 900ms ease 100ms; } .single-pricing-box .overlay-content ul { position: relative; display: block; padding-bottom: 33px; } .single-pricing-box .overlay-content ul li{ position: relative; display: block; color: #ffffff; line-height: 42px; padding-left: 30px; } .single-pricing-box .overlay-content ul li:before{ position: absolute; top: 0; left: 0; font-family: FontAwesome; content: "\f058"; color: #b3b9c8; font-size: 16px; } .single-pricing-box .overlay-content a{ color: #ffffff; } .additional-information-box { position: relative; display: block; padding-top: 43px; } .additional-information-box .title{ display: block; padding-bottom: 32px; } .additional-information-box .title h2{ color: #49576f; font-size: 24px; line-height: 32px; text-transform: uppercase; } .additional-information-box .additional-info-content-box { position: relative; display: block; background: #f6f6f6; padding: 40px 30px 20px; } .additional-info-content-box .accordion-box .accordion .accord-btn h4{ font-size: 17px; } .single-service-sidebar { position: relative; display: block; max-width: 340px; width: 100%; z-index: 1; } .single-service-sidebar:before { position: absolute; top: -300px; right: -30px; bottom: -5000px; width: 1px; background: #ededed; content: ""; z-index: -1; } .single-service-sidebar .single-sidebar{ position: relative; display: block; margin-bottom: 50px; } .single-service-sidebar .service-pages{ position: relative; display: block; border: 1px solid #ededed; border-bottom: none; } .single-service-sidebar .service-pages li{ position: relative; display: block; height: 64px; border-bottom: 1px solid #ededed; transition: all 500ms ease; z-index: 5; } .single-service-sidebar .service-pages li.active, .single-service-sidebar .service-pages li:hover{ -webkit-box-shadow: 0px 4px 7px 0px #ededed; box-shadow: 0px 4px 7px 0px #ededed; } .single-service-sidebar .service-pages li:before { position: absolute; top: 20px; left: -1px; bottom: 20px; width: 3px; background: #49576f; content: ""; z-index: 3; opacity: 0; transition: all 700ms ease 300ms; transform: translateX(0%) translateY(0%) scaleY(0.1); } .single-service-sidebar .service-pages li.active:before, .single-service-sidebar .service-pages li:hover:before{ opacity: 1; transform: translateX(0%) translateY(0%) scaleY(1.0); transition: all 700ms ease 100ms; } .single-service-sidebar .service-pages li a { position: relative; display: block; padding-left: 30px; color: #49576f; font-size: 15px; text-transform: capitalize; transition: all 500ms ease; font-family: 'Futura PT Book'; } .single-service-sidebar .service-pages li a .title{ position: relative; display: block; z-index: 1; } .single-service-sidebar .service-pages li a .title .overlay-title { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; } .single-service-sidebar .service-pages li a .title .overlay-title h3 { color: #49576f; font-size: 20px; line-height: 63px; transform: scale(0.5); opacity: 0; transition: all 300ms ease 100ms; } .single-service-sidebar .service-pages li a .title h3.static { font-size: 15px; transform: scale(1.0); line-height: 63px; transition: all 300ms ease 100ms; } .single-service-sidebar .service-pages li.active a .title .overlay-title h3, .single-service-sidebar .service-pages li:hover a .title .overlay-title h3 { opacity: 1; transform: scale(1.0); } .single-service-sidebar .service-pages li.active a .title h3.static, .single-service-sidebar .service-pages li:hover a .title h3.static{ opacity: 0; } .sidebar-contact-box{ position: relative; display: block; padding-bottom: 50px; } .sidebar-contact-box .inner-content{ position: relative; display: block; padding: 48px 40px 50px; background: #49576f; z-index: 1; } .sidebar-contact-box .inner-content .icon-holder{ position: relative; display: block; padding-bottom: 22px; } .sidebar-contact-box .inner-content .icon-holder span:before{ color: #49576f; font-size: 65px; line-height: 65px; } .sidebar-contact-box .inner-content h3{ color: #ffffff; font-size: 20px; line-height: 30px; margin: 0 0 22px; } .sidebar-contact-box .inner-content .bottom-box{ position: relative; display: block; border-top: 1px solid #404043; padding-top: 25px; } .sidebar-contact-box .inner-content .bottom-box h2{ color: #ffffff; font-size: 24px; margin: 0 0 3px; font-family: 'Futura PT Book'; } .sidebar-contact-box .inner-content .bottom-box span{ color: #ffffff; } .sidebar-contact-box .inner-content .button { position: relative; display: block; padding-top: 32px; } .sidebar-contact-box .inner-content .button a { display: block; } .single-service-sidebar .service-pack-download { position: relative; display: block; } .single-service-sidebar .service-pack-download li { position: relative; display: block; background: #49576f; transition: all 500ms ease; padding: 17px 30px 17px; } .single-service-sidebar .service-pack-download li .title-holder{ position: relative; display: block; float: left; } .single-service-sidebar .service-pack-download li .title-holder a{ color: #ffffff; font-size: 15px; font-family: 'Futura PT Book'; } .single-service-sidebar .service-pack-download li .title-holder a span{ font-size: 14px; } .single-service-sidebar .service-pack-download li .icon-holder { position: relative; display: block; float: right; } .single-service-sidebar .service-pack-download li .icon-holder i { position: relative; top: 2px; color: #ffffff; font-size: 18px; line-height: 26px; } /*** ============================================= Main Project Area style ============================================= ***/ .main-project-area{ position: relative; display: block; background: #ffffff; padding: 108px 0 80px; } .project-filter { position: relative; display: block; text-align: center; margin-bottom: 44px; } .project-filter li { position: relative; display: inline-block; } .project-filter li + li {} .project-filter li .filter-text { color: #49576f; font-size: 13px; text-transform: uppercase; display: block; padding: 8px 10px 8px; padding-right: 26px; cursor: pointer; transition: all .4s ease; } .project-filter li:hover .filter-text, .project-filter li.active .filter-text { color: #49576f; } .project-filter li .count { position: absolute; top: -13px; right: 15%; color: #49576f; font-size: 12px; line-height: 20px; display: inline-block; opacity: 0; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); -webkit-transition: all .4s ease; transition: all .4s ease; font-family: 'Futura PT Book'; } .project-filter li:hover .count, .project-filter li.active .count { opacity: 1; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); } .single-project-style4{ position: relative; display: block; max-width: 370px; min-width: 300px; width: 100%; margin: 0 auto 30px; } .single-project-style4 .img-holder{ position: relative; display: block; overflow: hidden; z-index: 10; } .single-project-style4 .img-holder .inner { position: relative; display: block; } .single-project-style4 .img-holder .inner:before{ position: absolute; top: -37px; left: -37px; bottom: -37px; right: -37px; content: ''; border: 37px solid #ffffff; opacity: 1; transition: all 300ms ease 100ms; z-index: 1; } .single-project-style4:hover .img-holder .inner:before{ left: 3px; top: 3px; bottom: 3px; right: 3px; transition: all 300ms ease 100ms; } .single-project-style4 .img-holder:before, .single-project-style4 .img-holder:after { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; transform-origin: left top; transition: all 900ms ease 300ms; border-radius: 0px; z-index: 1; } .single-project-style4 .img-holder:before { transform: scale(0, 1); transform-origin: bottom center; border-top: 3px solid #49576f; border-bottom: 3px solid #49576f; } .single-project-style4:hover .img-holder:before { transform: scale(1, 1); } .single-project-style4 .img-holder:after { transform: scale(1, 0); transform-origin: left center; border-left: 3px solid #49576f; border-right: 3px solid #49576f; } .single-project-style4:hover .img-holder:after{ transform: scale(1, 1); } .single-project-style4 .img-holder img{ width: 100%; transform: scale(1.0); transition: all 700ms ease; } .single-project-style4:hover .img-holder img { transform:scale(1.2) rotate(0deg); } .single-project-style4 .overlay-box{ position: absolute; top: 40px; left: 40px; right: 40px; height: 280px; background: rgba(40, 41, 46, 0.90); z-index: 3; opacity: 0; transform:scale(0) rotate(0deg); transition: all 700ms ease 300ms; } .single-project-style4:hover .overlay-box{ opacity: 1; transform:scale(1.0) rotate(0deg); transition: all 700ms ease 500ms; } .single-project-style4 .overlay-box .box{ display: table; width: 100%; height: 100%; } .single-project-style4 .overlay-box .box .link{ display: table-cell; vertical-align: middle; text-align: center; } .single-project-style4 .overlay-box .box .link a span:before{ color: #ffffff; font-size: 40px; line-height: 40px; transition: all 500ms ease; } .single-project-style4 .overlay-box .box .link a:hover span:before{ color: #49576f; } .single-project-style4 .img-holder .overlay-content { position: absolute; left: 40px; right: 40px; bottom: 3px; height: 117px; background: #ffffff; z-index: 11; text-align: center; transition: all 700ms ease 300ms; opacity: 0; transform-style: preserve-3d; transform: perspective(1200px) rotateX(90deg) translateZ(-32px); } .single-project-style4:hover .img-holder .overlay-content { opacity: 1; transform: perspective(1200px) rotateX(0deg) translateZ(0px); transition: all 900ms ease 300ms; } .single-project-style4 .img-holder .overlay-content .title{ position: relative; display: block; padding-top: 33px; } .single-project-style4 .img-holder .overlay-content .title span{ color: #7c7e84; } .single-project-style4 .img-holder .overlay-content .title h3{ font-size: 20px; margin: 3px 0 0; } .single-project-style4 .img-holder .overlay-content .title h3 a{ color: #49576f; transition: all 500ms ease; } .single-project-style4 .img-holder .overlay-content .title h3 a:hover{ color: #49576f; } /*** ============================================= Main Project Area Style2 style ============================================= ***/ .main-project-area.style2{ position: relative; display: block; padding-bottom: 110px; } .single-project-style5{ position: relative; display: block; margin-bottom: 30px; -webkit-box-shadow: 0px 4px 8px 2px #f3f3f3; box-shadow: 0px 4px 8px 2px #f3f3f3; } .single-project-style5 .img-holder{ position: relative; display: block; overflow: hidden; } .single-project-style5 .img-holder .inner { position: relative; display: block; } .single-project-style5 .img-holder img{ width: 100%; transform: scale(1.0); transition: all 700ms ease; } .single-project-style5:hover .img-holder img { transform:scale(1.2) rotate(2deg); } .single-project-style5 .overlay-box{ position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0; background: rgba(40, 41, 46, 0.90); z-index: 3; opacity: 0; transform:scale(0) rotate(0deg); transition: all 700ms ease 300ms; } .single-project-style5:hover .overlay-box{ opacity: 1; transform:scale(1.0) rotate(0deg); transition: all 700ms ease 200ms; } .single-project-style5 .overlay-box .box{ display: table; width: 100%; height: 100%; } .single-project-style5 .overlay-box .box .link{ display: table-cell; vertical-align: middle; text-align: center; } .single-project-style5 .overlay-box .box .link a span:before{ color: #ffffff; font-size: 40px; line-height: 40px; transition: all 500ms ease; } .single-project-style5 .overlay-box .box .link a:hover span:before{ color: #49576f; } .single-project-style5 .title{ position: relative; display: block; padding-top: 24px; padding-bottom: 24px; text-align: center; } .single-project-style5 .title span{ color: #7c7e84; } .single-project-style5 .title h3{ font-size: 20px; margin: 3px 0 0; } .single-project-style5 .title h3 a{ color: #49576f; transition: all 500ms ease; } .single-project-style5 .title h3 a:hover{ color: #49576f; } /*** ============================================= Main Project Area Style3 style ============================================= ***/ .main-project-area.style3{ position: relative; display: block; padding-bottom: 110px; } .main-project-style3{ padding: 0; } .main-project-style3 .mar0{ margin: 0; } .main-project-style3 .pd0{ padding: 0; } .single-project-style6{ position: relative; display: block; } .single-project-style6 .img-holder{ position: relative; display: block; overflow: hidden; } .single-project-style6 .img-holder img{ width: 100%; transform: scale(1.01); transition: all 700ms ease; } .single-project-style6:hover .img-holder img { transform:scale(1.2) rotate(2deg); } .single-project-style6 .overlay-content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: rgba(40, 41, 46, 0.95); transform: scaleX(0); transition: all 700ms ease 100ms; } .single-project-style6:hover .overlay-content{ transform: scaleY(1); } .single-project-style6 .overlay-content .inner-content{ display: table; width: 100%; height: 100%; } .single-project-style6 .overlay-content .inner-content .title-box { display: table-cell; vertical-align: middle; text-align: center; opacity: 0; transform-style: preserve-3d; transform: perspective(1200px) rotateX(90deg) translateZ(-45px); transition: all 300ms ease 100ms; } .single-project-style6:hover .overlay-content .inner-content .title-box{ opacity: 1; transform: translate3d(0px, 0px, 0px); transition: all 700ms ease 500ms; } .single-project-style6 .overlay-content .inner-content .title-box span{ color: #7c7e84; } .single-project-style6 .overlay-content .inner-content .title-box h3{ font-size: 20px; margin: 3px 0 0; } .single-project-style6 .overlay-content .inner-content .title-box a { color: #ffffff; transition: all 500ms ease; } .single-project-style6 .overlay-content .inner-content .title-box a:hover{ color: #49576f; } .load-more-project-style3-button{ position: relative; display: block; padding-top: 60px; } /*** ============================================= Main Project Area Style4 style ============================================= ***/ .main-project-area.style4{ position: relative; display: block; padding-bottom: 110px; } .main-project-style4{ padding-left: 60px; padding-right: 60px; } .main-project-style4 .row { margin-left: -30px; margin-right: -30px; } .main-project-style4 .row [class*=col-] { padding-left: 30px; padding-right: 30px; } .single-project-style7{ position: relative; display: block; margin-bottom: 31px; } .single-project-style7 .img-holder{ position: relative; display: block; overflow: hidden; } .single-project-style7 .img-holder img{ width: 100%; transform: scale(1.01); transition: all 700ms ease; } .single-project-style7:hover .img-holder img { transform:scale(1.2) rotate(2deg); } .single-project-style7 .overlay-content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: rgba(40, 41, 46, 0.95); transform: scaleX(0); transition: all 700ms ease 100ms; } .single-project-style7:hover .overlay-content{ transform: scaleY(1); } .single-project-style7 .overlay-content .inner-content{ display: table; width: 100%; height: 100%; } .single-project-style7 .overlay-content .inner-content .title-box { display: table-cell; vertical-align: middle; text-align: center; opacity: 0; transform-style: preserve-3d; transform: perspective(1200px) rotateX(90deg) translateZ(-45px); transition: all 300ms ease 100ms; } .single-project-style7:hover .overlay-content .inner-content .title-box{ opacity: 1; transform: translate3d(0px, 0px, 0px); transition: all 700ms ease 500ms; } .single-project-style7 .overlay-content .inner-content .title-box span{ color: #7c7e84; } .single-project-style7 .overlay-content .inner-content .title-box h3{ font-size: 20px; margin: 3px 0 0; } .single-project-style7 .overlay-content .inner-content .title-box h3 a { color: #ffffff; transition: all 500ms ease; } .single-project-style7 .overlay-content .inner-content .title-box a:hover{ color: #49576f; } .single-project-style7 .title{ position: relative; display: block; padding-top: 24px; padding-bottom: 24px; text-align: center; opacity: 1; transform: translate3d(0px, 0px, 0px); transition: all 300ms ease 100ms; } .single-project-style7:hover .title{ opacity: 0; transform-style: preserve-3d; transform: perspective(1200px) rotateX(-90deg) translateZ(-45px); transition: all 700ms ease 500ms; } .single-project-style7 .title span{ color: #7c7e84; } .single-project-style7 .title h3{ font-size: 20px; margin: 3px 0 0; } .single-project-style7 .title h3 a{ color: #49576f; transition: all 500ms ease; } .single-project-style7 .title h3 a:hover{ color: #49576f; } .load-more-project-style4-button{ position: relative; display: block; padding-top: 0px; } /*** ============================================= Main Project Area Style5 style ============================================= ***/ .main-project-area.style5{ position: relative; display: block; padding-top: 110px; padding-bottom: 50px; z-index: 1; } .main-project-area.style5:before{ position: absolute; top: -150px; left: 50%; bottom: -500px; width: 1px; background: #ededed; content: ""; z-index: -1; } .main-project-style5{ position: relative; display: block; z-index: 1; } .main-project-style5:before{ position: absolute; top: -150px; left: -80px; bottom: -500px; width: 1px; background: #ededed; content: ""; z-index: -1; } .main-project-style5:after{ position: absolute; top: -150px; right: -80px; bottom: -500px; width: 1px; background: #ededed; content: ""; z-index: -1; } .main-project-style5 .row { margin-left: -45px; margin-right: -45px; } .main-project-style5 .row [class*=col-] { padding-left: 45px; padding-right: 45px; } .single-project-style8{ position: relative; display: block; margin-bottom: 60px; } .single-project-style8 .img-holder { position: relative; display: block; overflow: hidden; z-index: 10; } .single-project-style8 .img-holder:before, .single-project-style8 .img-holder:after { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; transform: scale(0); -webkit-transform-origin: left top; transform-origin: left top; transition: all 700ms ease 100ms; border-radius: 0px; z-index: 3; } .single-project-style8 .img-holder:before { transform: scale(0, 1); transform-origin: bottom center; border-top: 40px solid #ffffff; border-bottom: 40px solid #ffffff; } .single-project-style8:hover .img-holder:before { transform: scale(1, 1); transition: all 700ms ease 100ms; } .single-project-style8 .img-holder:after { transform: scale(1, 0); transform-origin: left center; border-left: 40px solid #ffffff; border-right: 40px solid #ffffff; } .single-project-style8:hover .img-holder:after{ transform: scale(1, 1); transition: all 700ms ease 100ms; } .single-project-style8 .img-holder img{ width: 100%; transform: scale(1.01); transition: all 700ms ease; } .single-project-style8:hover .img-holder img { transform:scale(1.2) rotate(2deg); } .single-project-style8 .overlay-content{ position: absolute; top: 40px; left: 40px; bottom: 40px; right: 40px; content: ""; background: rgba(40, 41, 46, 0.95); transform: scaleX(0); transition: all 700ms ease 100ms; z-index: 5; } .single-project-style8:hover .overlay-content{ transform: scaleY(1); } .single-project-style8 .overlay-content .inner-content{ display: table; width: 100%; height: 100%; } .single-project-style8 .overlay-content .inner-content .title-box { display: table-cell; vertical-align: middle; text-align: center; opacity: 0; transform-style: preserve-3d; transform: perspective(1200px) rotateX(90deg) translateZ(-45px); transition: all 300ms ease 100ms; z-index: 3; } .single-project-style8:hover .overlay-content .inner-content .title-box{ opacity: 1; transform: translate3d(0px, 0px, 0px); transition: all 700ms ease 500ms; } .single-project-style8 .overlay-content .inner-content .title-box span{ color: #7c7e84; } .single-project-style8 .overlay-content .inner-content .title-box h3{ font-size: 20px; margin: 3px 0 0; } .single-project-style8 .overlay-content .inner-content .title-box a { color: #ffffff; transition: all 500ms ease; } .single-project-style8 .overlay-content .inner-content .title-box a:hover{ color: #49576f; } /*** ============================================= Main Project Area Style6 style ============================================= ***/ .main-project-area.style6{ position: relative; display: block; padding-top: 110px; padding-bottom: 40px; z-index: 1; } .main-project-area.style6:before{ position: absolute; top: -150px; left: 50%; bottom: -500px; width: 1px; background: #ededed; content: ""; z-index: -1; } .main-project-style6{ position: relative; display: block; z-index: 1; } .main-project-style6:before{ position: absolute; top: -150px; left: -100px; bottom: -500px; width: 1px; background: #ededed; content: ""; z-index: -1; } .main-project-style6:after{ position: absolute; top: -150px; right: -100px; bottom: -500px; width: 1px; background: #ededed; content: ""; z-index: -1; } .main-project-style6 .row { margin-left: -115px; margin-right: -115px; } .main-project-style6 .row [class*=col-] { padding-left: 115px; padding-right: 115px; } .single-project-style9{ position: relative; display: block; margin-bottom: 40px; } .single-project-style9 .img-holder{ position: relative; display: block; overflow: hidden; } .single-project-style9 .img-holder img{ width: 100%; transform: scale(1.0); transition: all 700ms ease; } .single-project-style9:hover .img-holder img { transform:scale(1.2) rotate(2deg); } .single-project-style9 .overlay-box{ position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0; background: rgba(40, 41, 46, 0.95); z-index: 3; opacity: 0; transform:scale(0) rotate(0deg); transition: all 700ms ease 300ms; } .single-project-style9:hover .overlay-box{ opacity: 1; transform:scale(1.0) rotate(0deg); transition: all 700ms ease 200ms; } .single-project-style9 .overlay-box .box{ display: table; width: 100%; height: 100%; } .single-project-style9 .overlay-box .box .link{ display: table-cell; vertical-align: middle; text-align: center; } .single-project-style9 .overlay-box .box .link a span:before{ color: #ffffff; font-size: 40px; line-height: 40px; transition: all 500ms ease; } .single-project-style9 .overlay-box .box .link a:hover span:before{ color: #49576f; } .single-project-style9 .title{ position: relative; display: block; padding-top: 24px; padding-bottom: 24px; } .single-project-style9 .title span{ color: #7c7e84; } .single-project-style9 .title h3{ font-size: 20px; margin: 3px 0 0; } .single-project-style9 .title h3 a{ color: #49576f; transition: all 500ms ease; } .single-project-style9 .title h3 a:hover{ color: #49576f; } /*** ============================================= Project Description Area style ============================================= ***/ .project-description-area { position: relative; display: block; margin-top: 110px; padding: 110px 0 50px; } .project-description-area .pattern-bg { position: absolute; top: 0; left: 0; z-index: 1; } .project-description-image-box{ position: relative; display: block; z-index: 3; } .project-description-image-box img{ max-width: none; float: right; } .project-description-content { position: relative; display: block; z-index: 3; padding-top: 45px; padding-left: 100px; } .project-description-content .sec-title { padding-bottom: 32px; } .project-description-content .sec-title p{ margin: 0 0 5px; } .project-description-content .sec-title .title { font-size: 30px; } .project-description-content .inner-content{ position: relative; display: block; } .project-description-content .inner-content .bottpm-text{ position: relative; display: block; padding-top: 10px; } .project-description-content .inner-content ul { position: relative; display: block; padding-top: 2px; } .project-description-content .inner-content ul li{ position: relative; display: block; line-height: 41px; padding-left: 40px; } .project-description-content .inner-content ul li:before{ font-family: 'icomoon'; position: absolute; top: 0; left: 0; bottom: 0; content: "\e910"; color: #a7a7a7; font-size: 25px; } /*** ============================================= Project Info Area style ============================================= ***/ .project-info-area{ position: relative; display: block; padding-top: 110px; padding-bottom: 110px; } .project-info-area .pattern-bg { position: absolute; top: 0; right: 0; z-index: 1; } .project-info-content{ position: relative; display: block; max-width: 370px; width: 100%; margin: -6px auto 0; z-index: 3; } .project-info-content .project-info-title{ position: relative; display: block; padding-left: 70px; padding-bottom: 33px; } .project-info-content .project-info-title:before { position: absolute; top: 14px; left: 0; width: 70px; height: 1px; background: #49576f; content: ""; } .project-info-content .project-info-title h3{ position: relative; display: block; padding-left: 20px; color: #49576f; font-size: 24px; line-height: 30px; text-transform: uppercase; } .project-info-content .inner-content { position: relative; display: block; padding: 38px 50px 32px; box-shadow: 0px 0px 9px 3px #f6f6f6; } .project-info-content .inner-content ul{ position: relative; display: block; } .project-info-content .inner-content ul li { position: relative; display: block; border-bottom: 1px solid #ededed; padding-bottom: 12px; margin-bottom: 17px; } .project-info-content .inner-content ul li:last-child{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .project-info-content .inner-content ul li .icon{ width: 30px; } .project-info-content .inner-content ul li .icon span:before{ color: #49576f; font-size: 30px; line-height: 30px; } .project-info-content .inner-content ul li .icon, .project-info-content .inner-content ul li .title{ display: table-cell; vertical-align: middle; } .project-info-content .inner-content ul li .title{ padding-left: 20px; } .project-info-content .inner-content ul li .title h4{ color: #49576f; font-size: 16px; line-height: 20px; margin: 0 0 4px; } .project-info-content .inner-content ul li .title span{} .project-info-image-box{ position: relative; display: block; z-index: 3; } .project-info-image-box img{ max-width: none; float: left; } /*** ============================================= Video Image Holder Area style ============================================= ***/ .video-image-holder-area{ position: relative; display: block; } .video-image-holder-area .container-fluid { padding-right: 50px; padding-left: 50px; } .video-holder-box { position: relative; display: block; width: 100%; } .video-holder-box .img-holder{ position: relative; display: block; overflow: hidden; } .video-holder-box .img-holder img{ width: 100%; } .video-holder-box .img-holder .icon-holder{ position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; content: ""; background: rgba(255, 255, 255, 0.02); transition: all 900ms ease; z-index: 3; opacity: 1; } .video-holder-box .img-holder .icon-holder .icon{ display: table; width: 100%; height: 100%; } .video-holder-box .img-holder .icon-holder .icon .inner{ display: table-cell; vertical-align: middle; } .video-holder-box .img-holder .icon-holder .icon .inner a { position: relative; display: inline-block; border: 4px solid rgba(255, 255, 255, 0.99); color: #ffffff; height: 100px; width: 100px; border-radius: 50%; text-align: center; transition: all 500ms ease; } .video-holder-box .img-holder .icon-holder .icon .inner a span:before { position: relative; display: block; width: 100%; height: 100%; font-size: 40px; line-height: 92px; border-radius: 50%; -webkit-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; animation: pulse 2s infinite; transition: all 1s ease; } @keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(255,255,255,.1), 0 0 0 20px rgba(238, 238,238, 0.3000); } } .single-project-image-gallery{ position: relative; display: block; } .single-project-image-gallery img{ width: 100%; } /*** ============================================= Similar Projects Area style ============================================= ***/ .similar-projects-area{ position: relative; display: block; padding: 103px 0 54px; } .similar-projects-content{ padding-left: 60px; padding-right: 60px; } .similar-projects-content .row { margin-left: -30px; margin-right: -30px; } .similar-projects-content .row [class*=col-] { padding-left: 30px; padding-right: 30px; } .similar-project-title{ position: relative; display: block; padding-bottom: 41px; } .similar-project-title h2{ color: #49576f; font-size: 30px; line-height: 38px; text-transform: uppercase; } .single-similar-project{ position: relative; display: block; text-align: center; margin-bottom: 50px; } .single-similar-project .img-holder{ position: relative; display: block; overflow: hidden; z-index: 2; } .single-similar-project .img-holder::before { position: absolute; top: 0; left: -100%; width: 50%; height: 100%; content: ''; background: linear-gradient(to right, rgba(233,33,48, 0) 0%, rgba(233,33,48, .3) 100%); transform: skewX(-25deg); z-index: 2; } .single-similar-project:hover .img-holder::before{ -webkit-animation: shine 1.5s; animation: shine 1.5s; } @-webkit-keyframes shine { 100% { left: 125%; } } @keyframes shine { 100% { left: 125%; } } .single-similar-project .img-holder img{ width: 100%; transition: all 1500ms ease; } .single-similar-project:hover .img-holder img{ transform:scale(1.3) rotate(0deg); } .single-similar-project .title-holder{ position: relative; display: block; padding-top: 24px; } .single-similar-project .title-holder span{ color: #7c7e84; } .single-similar-project .title-holder h3{ font-size: 20px; line-height: 26px; margin: 3px 0 0; } .single-similar-project .title-holder h3 a{ color: #49576f; } /*** ============================================= Blog Default Area style ============================================= ***/ #blog-area{ position: relative; display: block; padding: 110px 0 110px; } #blog-area.blog-default-area { position: relative; display: block; padding: 110px 0 40px; } .single-blog-colum-style1{ position: relative; display: block; padding-left: 30px; z-index: 1; } .single-blog-colum-style1:before{ position: absolute; top: -300px; left: 0; bottom: -2000px; width: 1px; background: #ededed; content: ""; z-index: -1; } .single-blog-post.style3{ margin-bottom: 62px; } .single-blog-post.style3 .img-holder .overlay { transform: translate3d(0px, 0%, 0px); } .single-blog-post.style3 .post-date { position: absolute; top: 20px; right: 20px; width: 65px; height: 75px; text-align: center; background: #49576f; display: block; padding: 13px 0 6px; transition: all 700ms ease 500ms; z-index: 3; } .single-blog-post.style3 .post-date h3{ color: #ffffff; font-size: 14px; line-height: 24px; text-transform: uppercase; font-family: 'Futura PT Book'; } .single-blog-post.style3 .post-date h3 span{ font-size: 24px; } .single-blog-post.style3 .text-holder { position: relative; display: block; padding-top: 24px; } .single-blog-post.style3 .text-holder:before { position: absolute; top: 30px; left: -29px; width: 3px; height: 20px; background: #49576f; content: ""; z-index: 99; } .single-blog-post.style3 .text-holder:after { position: absolute; top: 30px; left: -29px; width: 3px; background: #49576f; content: ""; z-index: 99; bottom: 8px; transform: scaleY(0); transition: all 700ms ease 400ms; } .single-blog-post.style3:hover .text-holder:after{ transform: scaleY(1); } .single-blog-post.style3 .meta-box { margin-top: 14px; margin-bottom: 0px; } .single-blog-post.style3 .text-holder .text { margin-top: 9px; } .single-blog-post.style3 .text-holder .text p { margin: 0 0 26px; } /*** ============================================= Blog Area Blog Large style ============================================= ***/ #blog-area.blog-large-area{ position: relative; display: block; } .single-blog-post.style4{ position: relative; display: block; padding-left: 30px; padding-right: 35px; margin-bottom: 80px; z-index: 1; } .single-blog-post.style4:before{ position: absolute; top: -300px; left: 0; bottom: -500px; width: 1px; background: #ededed; content: ""; z-index: -1; } .single-blog-post.style4 .img-holder .overlay .box .link-icon a span:before { font-size: 55px; line-height: 55px; } .single-blog-post.style4 .text-holder { position: relative; display: block; padding-top: 32px; } .single-blog-post.style4 .text-holder:before { position: absolute; top: 40px; left: -29px; width: 3px; height: 20px; background: #49576f; content: ""; z-index: 99; } .single-blog-post.style4 .text-holder:after { position: absolute; top: 0px; left: -29px; width: 3px; background: #49576f; content: ""; z-index: 99; bottom: 0px; transform: scaleY(0); transition: all 700ms ease 400ms; } .single-blog-post.style4:hover .text-holder:after{ transform: scaleY(1); } .single-blog-post.style4 .text-holder .blog-title { font-size: 30px; line-height: 40px; } .single-blog-post.style4 .meta-box { margin-top: 11px; margin-bottom: 0px; border-bottom: 1px solid #ededed; padding-bottom: 25px; } .single-blog-post.style4 .text-holder .text { margin-top: 24px; } .single-blog-post.style4 .text-holder .text p { margin: 0 0 32px; } #blog-area .sidebar-wrapper { position: relative; display: block; max-width: 300px; margin-left: -30px; } .sidebar-title { position: relative; display: block; margin-top: -4px; padding-bottom: 6px; } .sidebar-title:before { position: absolute; top: 10px; left: -30px; width: 10px; height: 5px; background: #49576f; content: ""; } .sidebar-title .title { color: #49576f; font-size: 20px; line-height: 24px; font-family: 'Futura PT Book'; } .sidebar-wrapper .single-sidebar { position: relative; display: block; padding: 40px 30px 0; -webkit-box-shadow: 0px 0px 8px 2px #f6f6f6; box-shadow: 0px 0px 8px 2px #f6f6f6; margin-bottom: 50px; } .sidebar-search-box .search-form { position: relative; display: block; max-width: 300px; margin-bottom: 50px; -webkit-box-shadow: 0px 0px 8px 2px #f6f6f6; box-shadow: 0px 0px 8px 2px #f6f6f6; } .sidebar-search-box .search-form input[type="text"] { position: relative; display: block; background: #ffffff; border: 1px solid #f6f6f6; color: #49576f; font-size: 15px; height: 60px; width: 100%; padding-left: 20px; padding-right: 65px; border-radius: 0px; transition: all 500ms ease 0s; } .sidebar-wrapper .search-form button { position: absolute; top: 0; right: 0; bottom: 0; display: block; background: #49576f; color: #ffffff; font-size: 14px; height: 60px; width: 60px; border: 0px solid #49576f; line-height: 60px; text-align: center; border-radius: 0px; 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 #49576f; background: #fff; color: #000000; } .sidebar-wrapper .search-form input[type="text"]:focus + button, .sidebar-wrapper .search-form button:hover { border-color: #49576f; color: #ffffff; } .single-sidebar .categories { position: relative; display: block; padding-bottom: 20px; } .single-sidebar .categories li { position: relative; display: block; } .single-sidebar .categories li a { position: relative; display: block; padding-left: 20px; color: #49576f; font-size: 15px; line-height: 50px; border-bottom: 1px solid #ededed; font-family: 'Futura PT Book'; transition: all 700ms ease; z-index: 1; } .single-sidebar .categories li a sup { font-size: 12px; display: inline-block; padding-left: 5px; transform: scaleX(0); transition: all 300ms ease 100ms; } .single-sidebar .categories li:hover a sup{ transform: scaleX(1.0); transition: all 300ms ease 100ms; } .single-sidebar .categories li:last-child a{ border: none; } .single-sidebar .categories li:hover a{ color: #49576f; transition: all 700ms ease; } .single-sidebar .categories li a:before{ position: absolute; top: 0px; left: 0; content: "\f107"; font-family: "Flaticon"; color: #49576f; font-size: 10px; transition: all 900ms ease; line-height: 50px; margin: 0px; } .single-sidebar .categories li:hover a:before{ color: #49576f; content: "\f108"; transition: all 900ms ease; } .single-sidebar .recent-post { position: relative; display: block; overflow: hidden; padding: 19px 0 35px; } .single-sidebar .recent-post li { position: relative; display: block; border-bottom: 1px solid #ededed; min-height: 65px; padding-left: 60px; padding-bottom: 25px; margin-bottom: 30px; } .single-sidebar .recent-post li:last-child{ padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .single-sidebar .recent-post li .img-holder { position: absolute; top: 0px; left: 0; width: 60px; height: 60px; display: block; overflow: hidden; } .single-sidebar .recent-post li .img-holder img { transition: all 0.4s ease-in-out 0.5s; width: 100%; transform: scale(1.1, 1.1); } .single-sidebar .recent-post li:hover .img-holder img { transition-delay: 0s; transform: scale(1.2, 1.2); } .single-sidebar .recent-post li .img-holder .overlay-style-one{ background: rgba(233, 33, 48, 0.90); } .single-sidebar .recent-post li .img-holder .overlay-style-one .box .content a{ display: inline-block; width: 20px; height: 20px; filter: alpha(opacity=0); transform: scale(3); transition: all 0.3s ease-in-out 0.3s; opacity: 0; z-index: 5; } .single-sidebar .recent-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 .recent-post li .img-holder .overlay-style-one .box .content a span:before{ color: #ffffff; font-size: 20px; line-height: 20px; transition: all 500ms ease; } .single-sidebar .recent-post li .img-holder .overlay-style-one .box .content a:hover span:before{ color: #000000; } .single-sidebar .recent-post li:hover .img-holder .overlay-style-one{ opacity: 1; } .single-sidebar .recent-post li .title-holder { padding-left: 20px; } .single-sidebar .recent-post li .title-holder span { display: block; line-height: 14px; } .single-sidebar .recent-post li .title-holder .post-title { font-size: 14px; line-height: 22px; margin: 7px 0 0; transition: all 500ms ease; } .single-sidebar .recent-post li .title-holder .post-title a{ color: #49576f; transition: all 500ms ease; } .single-sidebar .recent-post li .title-holder .post-title a:hover{ color: #49576f; } .single-sidebar .instagram { position: relative; display: block; overflow: hidden; margin-left: -5px; margin-right: -5px; padding: 19px 0 4px; } .single-sidebar .instagram li { position: relative; display: inline-block; float: left; margin: 0 5px 10px; transition: all 0.5s ease 0s; } .single-sidebar .instagram li .img-holder { position: relative; display: block; overflow: hidden; 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 .img-holder .overlay-style-one{ background: rgba(40, 41, 46, 0.95); } .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 { position: relative; display: block; float: none; margin: 0; color: #ffffff; font-size: 14px; line-height: 26px; font-family: 'Futura PT Book'; 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{ 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 span:before{ display: inline-block; padding-right: 5px; font-size: 12px; filter: alpha(opacity=0); } .single-sidebar .instagram li .img-holder .overlay-style-one .box .content a:hover{ color: #49576f; } .follow-us-button { position: relative; display: block; padding-bottom: 32px; } .single-sidebar .popular-tag { position: relative; display: block; margin-left: -2.5px; margin-right: -2.5px; padding: 19px 0 35px; } .single-sidebar .popular-tag li { position: relative; display: inline-block; float: left; margin: 0 2.5px 5px; } .single-sidebar .popular-tag li a { position: relative; display: block; background: #f6f6f6; padding: 9px 10px 7px; color: #49576f; font-size: 15px; transition: all 500ms ease 0s; z-index: 1; } .single-sidebar .popular-tag li a:hover{ color: #ffffff; background: #49576f; } /*** ============================================= Main Header Blog Single style ============================================= ***/ .main-header.blog-single{ -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.10); -moz-box-shadow: 0 0 15px rgba(0,0,0,0.10); -ms-box-shadow: 0 0 15px rgba(0,0,0,0.10); -o-box-shadow: 0 0 15px rgba(0,0,0,0.10); box-shadow: 0 0 15px rgba(0,0,0,0.10); } /*** ============================================= Single Post Info Area style ============================================= ***/ .single-post-info-area { position: relative; display: block; padding: 104px 0 96px; } .single-post-info-content{ position: relative; display: block; } .single-post-info-content .meta-box { position: relative; display: block; overflow: hidden; } .single-post-info-content .meta-box .meta-info { position: relative; display: block; overflow: hidden; text-align: center; } .single-post-info-content .meta-box .meta-info li { position: relative; display: inline-block; float: none; color: #49576f; font-size: 15px; line-height: 20px; padding-right: 16px; margin-right: 11px; } .single-post-info-content .meta-box .meta-info li:before{ position: absolute; top: 3px; right: 0px; width: 1px; height: 12px; background: #d3d9e0; content: ""; } .single-post-info-content .meta-box .meta-info li:last-child{ padding-right: 0; margin-right: 0; } .single-post-info-content .meta-box .meta-info li:last-child:before{ display: none; } .single-post-info-content .meta-box .meta-info li a{ color: #49576f; font-size: 15px; text-transform: capitalize; transition: all 500ms ease; } .single-post-info-content .meta-box .meta-info li a:hover{ color: #49576f; } .single-post-info-content .blog-title{ color: #26272b; font-size: 48px; line-height: 60px; margin: 22px 0 0; } /*** ============================================= Blog Single Area style ============================================= ***/ #blog-area.blog-single-area { position: relative; display: block; padding: 0 0 110px; } .blog-single-area .blog-post { position: relative; display: block; margin-right: 35px; } .blog-single-area .single-blog-post { position: relative; display: block; } .blog-single-area .main-image-box{ position: relative; display: block; margin-bottom: 54px; } .blog-single-area .main-image-box img{ width: 100%; } .single-blog-post .top-text-box { position: relative; display: block; overflow: hidden; } .single-blog-post .top-text-box h3{ color: #49576f; font-size: 20px; margin: 27px 0 28px; } .author-quote-box { position: relative; display: block; padding: 33px 40px 33px; background: #49576f; margin-top: 36px; margin-bottom: 54px; } .author-quote-box:before{ font-family: 'icomoon'; position: absolute; bottom: -35px; right: 40px; width: 70px; height: 70px; border-radius: 50%; background: #49576f; content: "\e939"; color: #ffffff; font-size: 32px; line-height: 70px; text-align: center; } .author-quote-box .text { position: relative; display: block; } .author-quote-box .text p{ color: #ffffff; font-size: 24px; line-height: 32px; margin: 0 0 27px; } .author-quote-box .text .name{ position: relative; display: block; } .author-quote-box .text .name h3{ color: #ffffff; font-size: 18px; } .author-quote-box .text .name h3 span{ color: #7c7e84; font-size: 15px; font-family: 'Futura PT Book'; } .quote-bottom-text{ position: relative; display: block; } .blog-single-image-with-text-box{ position: relative; display: block; margin-top: 52px; } .blog-single-image-with-text-box .image-box{ position: relative; display: block; } .blog-single-image-with-text-box .image-box li{ position: relative; display: inline-block; float: left; margin-right: 35px; } .blog-single-image-with-text-box .image-box li:last-child{ margin-right: 0; } .blog-single-image-with-text-box .image-box li img{ width: 100%; } .blog-single-image-with-text-box .text-box{ position: relative; display: block; margin-top: 54px; } .blog-single-bottom-content-box{ position: relative; display: block; margin-top: 45px; } .blog-single-bottom-content-box h2{ color: #49576f; font-size: 24px; line-height: 32px; text-transform: uppercase; margin: 0 0 16px; } .blog-single-bottom-content-box p{ margin: 0 0 20px; } .blog-single-bottom-content-box ul{ position: relative; display: block; } .blog-single-bottom-content-box ul li{ position: relative; display: block; padding-left: 40px; line-height: 36px; } .blog-single-bottom-content-box ul li:before{ font-family: "Flaticon"; position: absolute; top: 0; left: 0; content: "\f102"; color: #49576f; font-size: 25px; } .tag-with-social-links-box { position: relative; display: block; overflow: hidden; border-top: 1px solid #ededed; margin-top: 47px; padding-top: 21px; } .tag-with-social-links-box .inner-content{ position: relative; display: block; } .tag-with-social-links-box .tag-box{ position: relative; display: block; } .tag-with-social-links-box .tag-box p { position: relative; display: inline-block; float: left; color: #49576f; font-size: 16px; line-height: 30px; margin: 0; font-family: 'Futura PT Book'; } .tag-with-social-links-box .tag-box ul{ position: relative; display: inline-block; float: left; padding-left: 10px; } .tag-with-social-links-box .tag-box ul li { position: relative; display: inline-block; float: left; margin-right: 5px; line-height: 30px; } .tag-with-social-links-box .tag-box ul li:last-child{ margin-right: 0; } .tag-with-social-links-box .tag-box ul li a{ position: relative; display: block; color: #49576f; font-size: 15px; text-transform: capitalize; transition: all 300ms ease 100ms; } .tag-with-social-links-box .tag-box ul li a:hover{ color: #49576f; } .tag-with-social-links-box .social-links-box{ position: relative; display: block; } .tag-with-social-links-box .social-links-box p{ position: relative; display: inline-block; float: left; color: #49576f; font-size: 16px; line-height: 30px; margin: 0; font-family: 'Futura PT Book'; } .tag-with-social-links-box .social-links-box p i{ position: relative; display: inline-block; padding-right: 8px; color: #49576f; } .tag-with-social-links-box .social-links-box .sociallinks{ position: relative; display: inline-block; float: left; padding-left: 10px; } .tag-with-social-links-box .social-links-box .sociallinks li{ position: relative; display: inline-block; float: left; line-height: 30px; margin-right: 20px; } .tag-with-social-links-box .social-links-box .sociallinks li:last-child{ margin-right: 0; } .tag-with-social-links-box .social-links-box .sociallinks li a i { position: relative; display: block; color: #b3b3b3; font-size: 14px; line-height: 30px; } .tag-with-social-links-box .social-links-box .sociallinks li a:hover i{ color: #49576f; } .blog-prev-next-option { position: relative; display: block; overflow: hidden; width: 100%; margin-top: 75px; } .blog-prev-next-option .single { position: relative; display: block; max-width: 400px; width: 100%; } .blog-prev-next-option .single.prev { position: relative; display: block; overflow: hidden; float: left; } .blog-prev-next-option .single .image-thumb { position: relative; display: block; overflow: hidden; } .blog-prev-next-option .single .image-thumb img{ transform: scale(1.1, 1.1); transition: all 0.5s ease 0s; width: 100%; } .blog-prev-next-option .single:hover .image-thumb img{ transform: scale(1, 1); } .blog-prev-next-option .single .image-thumb .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(40, 41, 46, 0.95); transition: all 700ms ease 100ms; opacity: 0; } .blog-prev-next-option .single:hover .image-thumb .overlay { filter: alpha(opacity=100); opacity: 1; transition-delay: 0s; } .blog-prev-next-option .single .image-thumb .overlay .box{ display: table; width: 100%; height: 100%; } .blog-prev-next-option .single .image-thumb .overlay .box .link{ display: table-cell; vertical-align: middle; text-align: center; } .blog-prev-next-option .single .image-thumb .overlay .box .link a { position: relative; display: inline-block; color: #ffffff; font-size: 15px; text-transform: capitalize; width: 100px; height: 20px; filter: alpha(opacity=0); transform: scale(3); transition: all 0.3s ease-in-out 0.3s; opacity: 0; } .blog-prev-next-option .single:hover .image-thumb .overlay .box .link a{ filter: alpha(opacity=100); transform: scale(1); transition-delay: 0.1s; opacity: 1; } .blog-prev-next-option .single .image-thumb .overlay .box .link a:hover{ color: #49576f; } .blog-prev-next-option .single .image-thumb .overlay .box .link a i{ display: inline-block; padding-left: 5px; } .blog-prev-next-option .single .title { position: relative; display: block; padding: 14px 20px 0; text-align: center; } .blog-prev-next-option .single .title h3 { font-size: 18px; line-height: 26px; } .blog-prev-next-option .single .title a{ color: #49576f; transition: all 500ms ease; } .blog-prev-next-option .single .title a:hover{ color: #49576f; } .blog-prev-next-option .single.next{ position: relative; display: block; overflow: hidden; float: right; } .author-box-holder { position: relative; display: block; background: #ffffff; padding: 45px 40px 40px; margin: 73px 0 80px; box-shadow: 0px 4px 10px 3px #e0e4e6; } .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 { width: 100%; 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: #222222; font-size: 20px; margin: 0; } .author-box-holder .inner-box .text h3 span{ color: #49576f; font-size: 15px; font-family: 'Futura PT Book'; } .author-box-holder .inner-box .text p{ line-height: 25px; margin: 16px 0 23px; } .author-box-holder .inner-box .text .author-social-links{ position: relative; display: block; overflow: hidden; } .author-box-holder .inner-box .text .author-social-links p{ position: relative; display: inline-block; float: left; padding-right: 10px; color: #49576f; font-size: 15px; line-height: 30px; margin: 0; } .author-box-holder .inner-box .text .author-social-links ul{ position: relative; display: inline-block; float: left; } .author-box-holder .inner-box .text .author-social-links ul li{ position: relative; display: inline-block; float: left; line-height: 30px; padding-right: 11px; margin-right: 10px; } .author-box-holder .inner-box .text .author-social-links ul li:before { position: absolute; top: 0; bottom: 0; right: 0; width: 1px; height: 12px; background: #e3e3e3; content: ""; transform: rotate(15deg); line-height: 30px; margin: 8px 0; } .author-box-holder .inner-box .text .author-social-links ul li:last-child:before{ display: none; } .author-box-holder .inner-box .text .author-social-links ul li:last-child{ padding-right: 0; margin-right: 0; } .author-box-holder .inner-box .text .author-social-links ul li a { color: #7c7e84; } .author-box-holder .inner-box .text .author-social-links ul li a:hover{ color: #49576f; } .single-blog-title-box{ position: relative; display: block; padding-bottom: 32px; margin-top: -7px; } .single-blog-title-box h2{ color: #49576f; font-size: 24px; line-height: 32px; text-transform: uppercase; } .blog-single-area .inner-comment-box { position: relative; display: block; overflow: hidden; } .blog-single-area .inner-comment-box .single-comment-outer-box{ position: relative; display: block; border: 1px solid #ededed; background: #ffffff; padding: 35px 40px 32px; margin-bottom: 40px; } .blog-single-area .inner-comment-box .single-comment-outer-box.mar-left{ margin-left: 80px; } .blog-single-area .inner-comment-box .single-comment-box { position: relative; display: block; padding-left: 80px; } .blog-single-area .inner-comment-box .single-comment-box .img-box { position: absolute; top: 4px; left: 0; width: 80px; height: 80px; } .blog-single-area .inner-comment-box .single-comment-box .img-box img{ border-radius: 50%; width: 100%; } .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: 16px; } .blog-single-area .inner-comment-box .single-comment-box .text-box .top .name{ position: relative; display: block; float: left; } .blog-single-area .inner-comment-box .single-comment-box .text-box .top .name h3{ color: #49576f; font-size: 20px; margin: 0 0 3px; } .blog-single-area .inner-comment-box .single-comment-box .text-box .top .name span { color: #49576f; } .blog-single-area .inner-comment-box .single-comment-box .text-box .top .reply-button{ position: relative; display: block; float: right; top: -3px; } .blog-single-area .inner-comment-box .single-comment-box .text-box .top .reply-button a{ color: #b3b3b3; font-size: 14px; text-transform: uppercase; font-family: 'Futura PT Book'; } .blog-single-area .inner-comment-box .single-comment-box .text-box .top .reply-button a:hover{ color: #49576f; } .blog-single-area .inner-comment-box .single-comment-box .text-box .top .reply-button a span:before{ position: relative; top: 1px; display: inline-block; padding-right: 10px; font-size: 14px; line-height: 14px; } .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; } .add-comment-box { position: relative; display: block; overflow: hidden; padding-top: 40px; } .add-comment-box #add-comment-form {} .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{ position: relative; display: block; background: #f6f6f6 none repeat scroll 0 0; border: 1px solid #f6f6f6; color: #49576f; font-size: 15px; height: 60px; padding: 0 30px; width: 100%; border-radius: 0px; margin-bottom: 30px; transition: all 500ms ease; } .add-comment-box #add-comment-form textarea { height: 170px; padding: 13px 30px; margin-bottom: 30px; } .add-comment-box #add-comment-form input[type="text"]:focus{ border-color: #49576f; } .add-comment-box #add-comment-form input[type="email"]:focus{ border-color: #49576f; } .add-comment-box #add-comment-form textarea:focus{ border-color: #49576f; } .add-comment-box #add-comment-form button { } .add-comment-box #add-comment-form button:hover{ } /*** ============================================= Shop area style ============================================= ***/ #shop-area { padding-top: 110px; padding-bottom: 110px; } .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: 30px; border-bottom: 1px solid #ededed; margin-bottom: 50px; } .showing-result-shorting .showing{} .showing-result-shorting .shorting{ } .showing-result-shorting .showing p { color: #49576f; font-size: 15px; margin: 0; } .single-product-item { position: relative; display: block; transition: all 500ms ease; margin-bottom: 50px; } .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; background: #ffffff; padding: 17px 0 13px; -webkit-box-shadow: 0px 3px 8px 2px #f9f9f9; box-shadow: 0px 3px 8px 2px #f9f9f9; margin-left: 20px; margin-right: 20px; margin-top: -30px; z-index: 10; } .single-product-item .title-holder .static-content{ position: relative; display: block; } .single-product-item .title-holder .title { position: relative; display: block; font-size: 16px; line-height: 22px; padding: 0 0 3px; } .single-product-item .title-holder .title a{ color: #49576f; transition: all 500ms ease; } .single-product-item .title-holder .static-content span{ color: #49576f; } .single-product-item .title-holder .overlay-content{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ffffff; text-align: center; transform: scaleX(0); -webkit-transform: scaleX(0); transition: all 700ms ease 300ms; } .single-product-item:hover .title-holder .overlay-content { transform: scaleY(1); -webkit-transform: scaleY(1); transition: all 700ms ease 100ms; } .single-product-item .title-holder .overlay-content ul { position: relative; display: block; padding: 22px 0 23px; width: 153px; margin: 0 auto; transform: scale(0); transition: all 700ms ease 100ms; } .single-product-item:hover .title-holder .overlay-content ul{ transform: scale(1); transition: all 700ms ease 600ms; } .single-product-item .title-holder .overlay-content ul li{ position: relative; display: inline-block; float: left; width: 51px; text-align: center; border-right: 1px solid #ededed; } .single-product-item .title-holder .overlay-content ul li:last-child{ border: none; } .single-product-item .title-holder .overlay-content ul li a{ position: relative; display: block; } .single-product-item .title-holder .overlay-content ul li a span:before{ position: relative; display: block; width: 100%; height: 35px; color: #b3b3b3; font-size: 18px; line-height: 35px; margin: 0; transition: all 500ms ease; } .single-product-item .title-holder .overlay-content ul li a:hover span:before{ color: #49576f; } .single-product-item .title-holder .overlay-content ul li a .toltip-content { position: absolute; left: -50%; right: 0; top: -25px; margin-left: -15px; opacity: 0; visibility: hidden; padding: 0; text-align: center; background-color: #49576f; transition: all 300ms ease 100ms; z-index: 999; min-width: 130px; } .single-product-item .title-holder .overlay-content ul li a .toltip-content:before { font-family: FontAwesome; position: absolute; left: 0; bottom: -8px; right: 0; content: "\f0d7"; color: #49576f; font-size: 25px; text-align: center; line-height: 10px; } .single-product-item .title-holder .overlay-content ul li a .toltip-content p{ color: #ffffff; font-size: 15px; line-height: 30px; margin: 0; } .single-product-item .title-holder .overlay-content ul li a:hover .toltip-content{ top: -37px; visibility: visible; opacity: 1; } .shop-sidebar-wrapper { position: relative; display: block; max-width: 270px; width: 100%; } .shop-sidebar-wrapper .single-sidebar-box { position: relative; display: block; overflow: hidden; } .single-sidebar-box.pdbtm{ padding-bottom: 50px; } .shop-sidebar-wrapper .search-form { position: relative; display: block; max-width: 270px; width: 100%; margin-bottom: 50px; } .shop-sidebar-wrapper .search-form input[type="text"] { position: relative; display: block; background: #fff; border: 1px solid #ededed; color: #7e8597; font-size: 15px; height: 50px; max-width: 270px; width: 100%; padding-left: 20px; padding-right: 60px; border-radius: 0px; transition: all 500ms ease 0s; } .shop-sidebar-wrapper .search-form button { position: absolute; top: 0; right: 0px; bottom: 0; display: block; background: #f6f6f6; color: #49576f; font-size: 14px; height: 50px; width: 50px; border: 0px solid #edf2f7; 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 #49576f; background: #fff; color: #000000; } .shop-sidebar-wrapper .search-form input[type="text"]:focus + button, .shop-sidebar-wrapper .search-form button:hover { background: #49576f; color: #fff; } .shop-sidebar-title { position: relative; display: block; padding-bottom: 23px; margin-top: -6px; } .shop-sidebar-title h3{ color: #303030; font-size: 18px; line-height: 26px; text-transform: capitalize; } .single-sidebar-box .categories { position: relative; display: block; border: 1px solid #ededed; border-bottom: none; } .single-sidebar-box .categories li { position: relative; display: block; padding-left: 20px; line-height: 50px; border-bottom: 1px solid #ededed; transition: all 500ms ease; } .single-sidebar-box .categories li:before { position: absolute; top: 0; left: 0; bottom: 0; width: 0px; background: #49576f; content: ""; transition: all 100ms ease; transition-delay: .3s; transform: perspective(0px) translateX(0px) rotate(0deg); } .single-sidebar-box .categories li:hover:before{ width: 3px; transform: perspective(0px) translateX(0px) rotate(0deg); } .single-sidebar-box .categories li a { position: relative; display: block; color: #49576f; font-size: 15px; font-family: 'Futura PT Book'; transition: all 500ms ease; transition-delay: .2s; transform: perspective(0px) translateX(0px) rotate(0deg); } .single-sidebar-box .categories li:hover a{ color: #49576f; transform: perspective(0px) translateX(10px) rotate(0deg); } .shop-sidebar-wrapper .price-ranger { margin-top: 4px; margin-bottom: 0px; } .shop-sidebar-wrapper .price-ranger .ui-widget-content { background: #edf2f7; border: none; height: 2px; } .shop-sidebar-wrapper .price-ranger .ui-slider-handle { position: absolute; top: -4px; background: #ffffff; border: 1px solid #eeeeee; border-radius: 50%; height: 10px; margin-left: -4px; outline: medium none; width: 10px !important; cursor: pointer; z-index: 2; } .shop-sidebar-wrapper .price-ranger .ui-slider-handle:before { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 4px; height: 4px; background: #49576f; border-radius: 50%; content: ""; margin: 2px; } .shop-sidebar-wrapper .price-ranger .ui-slider .ui-slider-range { background: #49576f; } .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 { position: relative; display: block; margin-top: 30px; } .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"] { position: relative; display: inline-block; background: #f6f6f6; float: left; margin-right: 10px; padding: 6px 0 4px; text-align: center; width: 90px; border: none; color: #49576f; font-size: 15px; margin-top: 0; border-radius: 0; text-transform: capitalize; cursor: pointer; } .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"] { position: relative; display: inline-block; float: left; color: #49576f; font-size: 15px; text-align: right; width: 40px; line-height: 35px; border: none; padding: 0; } .shop-sidebar-wrapper .price-ranger .ranger-min-max-block input[type='text'].max {} .shop-sidebar-wrapper .price-ranger .ranger-min-max-block span { position: relative; display: inline-block; color: #49576f; font-size: 15px; line-height: 35px; float: left; } .shop-sidebar-wrapper .products-post { position: relative; display: block; overflow: hidden; } .shop-sidebar-wrapper .products-post li { position: relative; display: block; border-bottom: 1px solid #ededed; min-height: 70px; padding-left: 70px; padding-bottom: 25px; margin-bottom: 25px; } .shop-sidebar-wrapper .products-post li:last-child{ padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .shop-sidebar-wrapper .products-post li .img-holder { position: absolute; top: 0px; left: 0; width: 70px; height: 70px; display: block; overflow: hidden; } .shop-sidebar-wrapper .products-post li .img-holder img { transition: all 0.4s ease-in-out 0.5s; width: 100%; transform: scale(1.1, 1.1); } .shop-sidebar-wrapper .products-post li:hover .img-holder img { transition-delay: 0s; transform: scale(1.2, 1.2); } .shop-sidebar-wrapper .products-post li .img-holder .overlay-style-one{ background: rgba(233, 33, 48, 0.90); } .shop-sidebar-wrapper .products-post li .img-holder .overlay-style-one .box .content a{ display: inline-block; width: 20px; height: 20px; filter: alpha(opacity=0); transform: scale(3); transition: all 0.3s ease-in-out 0.3s; opacity: 0; z-index: 5; } .shop-sidebar-wrapper .products-post li:hover .img-holder .overlay-style-one .box .content a{ filter: alpha(opacity=100); transform: scale(1); transition-delay: 0.1s; opacity: 1; } .shop-sidebar-wrapper .products-post li .img-holder .overlay-style-one .box .content a span:before{ color: #ffffff; font-size: 20px; line-height: 20px; transition: all 500ms ease; } .shop-sidebar-wrapper .products-post li .img-holder .overlay-style-one .box .content a:hover span:before{ color: #000000; } .shop-sidebar-wrapper .products-post li:hover .img-holder .overlay-style-one{ opacity: 1; } .shop-sidebar-wrapper .products-post li .title-holder { padding-left: 30px; min-height: 70px; } .shop-sidebar-wrapper .products-post li .title-holder .post-title { font-size: 16px; line-height: 20px; margin: 0 0 14px; transition: all 500ms ease; } .shop-sidebar-wrapper .products-post li .title-holder .post-title a{ color: #49576f; transition: all 500ms ease; } .shop-sidebar-wrapper .products-post li .title-holder .post-title a:hover{ color: #49576f; } .shop-sidebar-wrapper .products-post li .title-holder span { display: block; line-height: 14px; } /*** ============================================= Single Shop Area style ============================================= ***/ #shop-area.single-shop-area { padding-top: 110px; padding-bottom: 60px; } .single-product-image-holder { margin-right: 35px; } .single-product-image-holder img{ width: auto; } .single-shop-content .content-box { position: relative; display: block; } .single-shop-content .content-box span.price { color: #49576f; font-size: 24px; } .single-shop-content .content-box h2 { color: #49576f; font-size: 30px; margin: 6px 0 7px; text-transform: capitalize; } .single-shop-content .content-box .review-box {} .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: #f13729; font-size: 16px; } .single-shop-content .content-box .text { position: relative; display: block; overflow: hidden; padding: 22px 0 16px; } .single-shop-content .content-box .text p{ margin: 0; } .single-shop-content .content-box .location-box { margin: 0 0 32px; } .single-shop-content .content-box .location-box p { color: #49576f; font-size: 15px; 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 #ededed; 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: #555555; } .single-shop-content .content-box .location-box form button { position: relative; display: inline-block; float: left; background: #f6f6f6; border: none; color: #49576f; font-size: 15px; line-height: 52px; height: 50px; width: 100px; margin: 0; padding: 0; text-align: center; text-transform: uppercase; transition: all 500ms ease 0s; } .single-shop-content .content-box .location-box form button:hover{ color: #fff; background: #555555; } .single-shop-content .content-box .location-box span { color: #49576f; } .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 { position: relative; display: block; float: none; margin-left: 0px; width: 100%; background: #f6f6f6; border: 1px solid #f6f6f6; 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: -1px; left: 0px; width: 100%; height: 100%; padding: 0px 5px 5px; } .single-shop-content .content-box .addto-cart-box button.addtocart { background: #49576f; height: 50px; width: 170px; margin-left: 43px; color: #fff; padding: 0px 0 0px; cursor: pointer; border-radius: 0; line-height: 50px; } .single-shop-content .content-box .addto-cart-box button.addtocart:hover{ background: #26272b; } .share-products-socials { position: relative; display: block; overflow: hidden; margin-top: 46px; } .share-products-socials h5{ position: relative; display: inline-block; float: left; color: #49576f; font-size: 16px; line-height: 40px; text-transform: capitalize; } .share-products-socials ul { position: relative; display: inline-block; float: left; margin-left: 20px; } .share-products-socials ul li{ position: relative; display: inline-block; float: left; margin-right: 10px; } .share-products-socials ul li:last-child{ margin-right: 0; } .share-products-socials ul li a i{ position: relative; display: block; width: 40px; height: 40px; font-size: 18px; line-height: 42px; text-align: center; transition: all 500ms ease; } .share-products-socials ul li a i.fb{ background: #3b5998; border-color: #3b5998; color: #ffffff; } .share-products-socials ul li a:hover i.fb{ background: #1d376f; } .share-products-socials ul li a i.tw{ background: #55acee; border-color: #55acee; color: #ffffff; } .share-products-socials ul li a:hover i.tw{ background: #1e7dc5; } .share-products-socials ul li a i.pin{ background: #cb2027; border-color: #cb2027; color: #ffffff; } .share-products-socials ul li a:hover i.pin{ background: #a81218; } .share-products-socials ul li a i.lin{ background: #007ab9; border-color: #007ab9; color: #ffffff; } .share-products-socials ul li a:hover i.lin{ background: #01537d; } .product-tab-box { position: relative; display: block; overflow: hidden; margin-top: 66px; } .product-tab-box .tab-btns { position: relative; display: block; text-align: center; border-bottom: 1px solid #ededed; margin-bottom: 35px; 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: #49576f; font-size: 20px; text-transform: capitalize; transition: all 500ms ease; font-family: 'Futura PT Book'; } .product-tab-box .tab-btns .tab-btn.active-btn span, .product-tab-box .tab-btns .tab-btn:hover span{ color: #49576f; } .product-tab-box .tab-btns .tab-btn span:before{ position: absolute; left: 0; bottom: -1px; right: 0; height: 1px; background: #49576f; 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: 70px; margin-bottom: 40px; border-bottom: 1px solid #ededed; padding-bottom: 32px; } .review-box-holder .single-review-box .image-holder { position: absolute; left: 0; top: 5px; } .review-box-holder .single-review-box .image-holder img{ width: 100%; border-radius: 50%; } .review-box-holder .single-review-box .text-holder { position: relative; display: block; padding-left: 20px; padding-right: 40px; } .review-box-holder .single-review-box .text-holder .top { position: relative; display: block; overflow: hidden; margin: 0 0 17px; } .review-box-holder .single-review-box .text-holder .top .name h3 { color: #49576f; font-size: 18px; margin: 0 0 6px; text-transform: capitalize; } .review-box-holder .single-review-box .text-holder .top .name h3 span{ color: #49576f; font-size: 15px; font-family: 'Futura PT Book'; } .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: #49576f; font-size: 14px; } .review-box-holder .single-review-box .text-holder .text p { margin: 0; } .product-tab-box .review-form { padding-top: 33px; } .product-tab-box .review-form .shop-page-title{ padding-bottom: 28px; } .shop-page-title{ position: relative; display: block; } .shop-page-title .title{ color: #222222; font-size: 24px; line-height: 32px; margin: 0 0 6px; text-transform: uppercase; font-family: 'Futura PT Book'; } .shop-page-title .title span{ } .shop-page-title p{ margin: 0; } .shop-page-title p b{ color: #49576f; } .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: #49576f; font-size: 15px; line-height: 20px; margin: 0; 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: 20px; 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: #b5b5b5; font-size: 16px; line-height: 20px; opacity: 1; transition: all 500ms ease 0s; } .product-tab-box .review-form .input-box p{ color: #49576f; font-size: 15px; line-height: 20px; margin: 0 0 5px; } .product-tab-box .review-form .input-box p span{ color: #49576f; } .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 { position: relative; display: block; background: #ffffff; width: 100%; height: 60px; border: 1px solid #ededed; color: #252525; font-size: 15px; padding: 0 20px; margin-bottom: 30px; border-radius: 0px; transition: all 500ms ease; } .product-tab-box .review-form form textarea { height: 170px; padding: 10px 20px; margin-bottom: 40px; } .product-tab-box .review-form form button { padding: 0 50px; } .product-tab-box .review-form form button:hover{ } .product-tab-box .review-form form input[type="text"]:focus{ border-color: #e1dddd; } .product-tab-box .review-form form input[type="email"]:focus{ border-color: #e1dddd; } .product-tab-box .review-form form textarea:focus{ border-color: #e1dddd; } .related-product { padding-top: 73px; } .related-product .shop-page-title { padding-bottom: 26px; } .related-product .single-product-item {} /*** ============================================= Cart area style ============================================= ***/ .cart-area { padding-top: 110px; padding-bottom: 110px; } .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: #f6f6f6; color: #49576f; font-size: 16px; text-transform: capitalize; width: 100%; font-family: 'Futura PT Book'; } .cart-area .cart-table thead tr th { 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 #ededed; } .cart-area .cart-table tbody tr td { color: #49576f; font-size: 18px; line-height: 24px; min-width: 100px; padding: 30px 25px; font-family: 'Futura PT Book'; } .cart-area .cart-table tbody tr .prod-column .column-box { position: relative; min-height: 100px; } .cart-area .cart-table tbody tr .prod-column .column-box .prod-thumb { width: 80px; } .cart-area .cart-table tbody tr .prod-column .column-box .prod-thumb a { position: relative; display: block; border-radius: 0px; } .cart-area .cart-table tbody tr .prod-column .column-box .prod-thumb a img { width: 100%; } .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: #49576f; font-size: 18px; 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 { position: relative; display: block; float: none; margin-left: 0px; width: 100%; background: #f6f6f6; border: 1px solid #f6f6f6; 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: 0px 5px 10px; } .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: #49576f; font-size: 15px; line-height: 20px; padding-left: 50px; font-family: 'Futura PT Book'; } .cart-area .cart-table tbody .available-info .icon { position: absolute; top: 0px; left: 0; width: 40px; height: 40px; background: #49576f; border-radius: 50%; color: #ffffff; font-size: 18px; line-height: 40px; text-align: center; } .cart-area .cart-table tbody tr td.price { color: #49576f; font-size: 15px; font-family: 'Futura PT Book'; } .cart-area .cart-table tbody tr .sub-total { color: #49576f; font-size: 15px; font-family: 'Futura PT Book'; } .cart-area .cart-table tbody tr td .remove{ } .cart-area .cart-table tbody tr td .remove .checkbox label { color: #49576f; font-size: 15px; } .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: 60px; border: 1px solid #ededed; color: #49576f; font-size: 15px; padding: 0 15px; text-transform: capitalize; transition: all 500ms ease 0s; border-radius: 0px; } .cart-middle .apply-coupon input[type="text"]:focus { border: 1px solid #49576f } .cart-middle .apply-coupon .apply-coupon-button button { color: #49576f; background: #f6f6f6; } .cart-middle .apply-coupon .apply-coupon-button button:hover{ color: #ffffff; background: #49576f } .cart-middle .update-cart button { color: #ffffff; background: #49576f; } .cart-middle .update-cart button:hover{ background: #26272b; } .cart-bottom { overflow: hidden; padding-top: 70px; } .cart-bottom .calculate-shipping {} .cart-bottom .calculate-shipping .shop-page-title { padding-bottom: 16px; } .cart-bottom .calculate-shipping .ui-state-default .ui-icon { background: none } .cart-bottom .calculate-shipping .ui-state-default { position: relative; display: block; background: #ffffff; border: 1px solid #ededed; border-radius: 0; color: #49576f; font-size: 15px; height: 50px; margin-bottom: 30px; outline: medium none; width: 100%; font-family: 'Futura PT Book'; } .cart-bottom .calculate-shipping .ui-selectmenu-button span.ui-selectmenu-text { display: block; line-height: 18px; overflow: hidden; padding: 15px 19px; text-align: left; } .cart-bottom .calculate-shipping .ui-selectmenu-button span.ui-icon { position: absolute; top: 0; right: 0; bottom: 0; border-left: 1px solid #ededed; display: block; width: 60px; height: 48px; text-indent: 0; margin: 0; } .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: 21px; top: 12px; } .cart-bottom .calculate-shipping input[type="text"] { position: relative; display: block; border: 1px solid #ededed; color: #49576f; font-size: 15px; height: 50px; padding: 0 20px; width: 100%; margin-bottom: 30px; transition: all 500ms ease; font-family: 'Futura PT Book'; } .cart-bottom .calculate-shipping input[type="text"]:focus { border: 1px solid #1d1d1d; } .cart-bottom .calculate-shipping button { color: #49576f; background: #f6f6f6; } .cart-bottom .calculate-shipping button:hover{ color: #ffffff; background: #49576f; } .cart-bottom button.checkout-btn{ color: #49576f; background: #f6f6f6; margin-top: 30px; } .cart-bottom button.checkout-btn:hover{ color: #ffffff; background: #49576f; } /*** ============================================= Checkout Area style ============================================= ***/ .checkout-area { position: relative; display: block; padding-top: 110px; } .checkout-area .exisitng-customer { position: relative; display: block; background: #f6f6f6; 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: #49576f; content: ""; } .checkout-area .exisitng-customer h5{ color: #49576f; font-size: 16px; } .checkout-area .exisitng-customer h5 a{ color: #49576f; display: inline-block; padding-left: 15px; } .checkout-area .coupon { position: relative; display: block; background: #f6f6f6; padding: 20px 28px 21px; margin-bottom: 53px; border-radius: 5px; } .checkout-area .coupon:before { position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: #49576f; content: ""; } .checkout-area .coupon h5 { color: #49576f; font-size: 16px; } .checkout-area .coupon h5 a { color: #49576f; display: inline-block; padding-left: 15px; } .checkout-area .form .shop-page-title{ padding-bottom: 20px; } .checkout-area .form form .field-label { color: #49576f; font-size: 15px; margin: 0 0 2px; text-transform: capitalize; } .checkout-area .form form .field-input input[type="text"] { position: relative; display: block; border: 1px solid #ededed; color: #848484; font-size: 15px; height: 48px; margin-bottom: 25px; padding: 0 15px; width: 100%; border-radius: 0px; transition: all 500ms ease; } .checkout-area .form form .field-input input[type="text"]:focus{ border: 1px solid #49576f; } .checkout-area .create-acc .checkbox { margin: 7px 0 0; } .checkout-area .create-acc .checkbox label { color: #49576f; font-size: 16px; margin: 0; cursor: pointer; font-family: 'Futura PT Book'; } .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 { position: relative; display: block; border: 1px solid #ededed; color: #848484; font-size: 15px; height: 121px; margin-bottom: 28px; padding: 10px 15px; width: 100%; border-radius: 0px; transition: all 500ms ease; } .checkout-area .form form .field-input textarea:focus{ border-color: #49576f; } .checkout-area .bottom { position: relative; display: block; background: #fbfbfb; padding-top: 93px; padding-bottom: 110px; margin-top: 82px; } .checkout-area .table { overflow-x: auto; position: relative; width: 100%; margin-bottom: 0; } .checkout-area .table .shop-page-title{ padding-bottom: 26px; } .checkout-area .table .cart-table { min-width: auto; width: 100%; } .checkout-area .table .cart-table .cart-header { position: relative; background: #f6f6f6; color: #49576f; font-size: 16px; text-transform: capitalize; width: 100%; font-family: 'Futura PT Book'; } .checkout-area .table .cart-table thead tr th { 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 #f6f6f6; } .checkout-area .table .cart-table tbody tr td { vertical-align: middle } .checkout-area .table .cart-table tbody tr td { min-width: 110px; padding: 30px 25px; border-top: none; } .checkout-area .table .cart-table tbody tr .product-column .column-box { min-height: 100px; } .checkout-area .table .cart-table tbody tr .product-column .column-box .prod-thumb { width: 80px; } .checkout-area .table .cart-table tbody tr .product-column .column-box .prod-thumb a { display: block; } .checkout-area .table .cart-table tbody tr .product-column .column-box .prod-thumb img { display: block; 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: #49576f; font-size: 18px; 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 .form-control { display: block; background-color: #ffffff; background-image: none; border: 1px solid #f6f6f6; border-right: none; border-radius: 0 !important; box-shadow: none; color: #222222; font-size: 18px; height: 50px; padding: 6px 0; text-align: center; font-family: 'Futura PT Book'; } .checkout-area .table .cart-table tbody tr .qty .bootstrap-touchspin .input-group-btn-vertical > .btn { position: relative; display: block; float: none; margin-left: 0px; width: 100%; background: #ffffff; border: 1px solid #f6f6f6; 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: 1px 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: #49576f; font-size: 15px; font-family: 'Futura PT Book'; } .cart-total{ position: relative; display: block; } .cart-total .shop-page-title{ padding-bottom: 26px; } .cart-total-table { border: 1px solid #ededed } .cart-total-table li { border-bottom: 1px solid #ededed } .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 #ededed; color: #49576f; font-size: 16px; line-height: 28px; padding: 10px 18px; width: 50%; font-family: 'Futura PT Book'; } .cart-total-table li span.col { position: relative; display: block; float: left; color: #49576f; font-size: 16px; line-height: 28px; padding: 10px 18px; width: 50%; font-family: 'Futura PT Book'; } .cart-total .payment-options { position: relative; display: block; overflow: hidden; background: #ffffff; margin-top: 30px; border: 1px solid #ededed; padding: 33px 30px 40px; } .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; 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: #49576f; font-size: 16px; padding-left: 10px; font-family: 'Futura PT Book'; } .cart-total .payment-options .option-block .checkbox label span b { color: #49576f; display: inline-block; font-size: 15px; padding-left: 25px; text-decoration: underline; font-family: 'Futura PT Book'; } .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 { line-height: 50px; padding: 0 50px; margin-top: 17px; } .placeorder-button button:hover{} /*** ============================================= Login Register Area style ============================================= ***/ .login-register-area { position: relative; display: block; padding-top: 103px; padding-bottom: 102px; } .login-register-area .form .shop-page-title{ padding-bottom: 26px; } .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 #ededed; color: #83888d; font-size: 15px; margin-bottom: 30px; padding-left: 15px; padding-right: 50px; transition: all 700ms ease 0s; } .login-register-area .form .input-field .icon-holder { position: absolute; top: 15px; right: 20px; } .login-register-area .form .input-field .icon-holder i { color: #999999; font-size: 14px; } .login-register-area .form button { line-height: 50px; padding: 0 40px; } .login-register-area .form button:hover{ } .login-register-area .form .remember-text { margin-top: 19px; } .login-register-area .form .remember-text .checkbox label { color: #49576f; font-size: 16px; 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: #49576f; font-size: 16px; font-family: 'Futura PT Book'; } .login-register-area .form .social-icon { position: relative; float: right; margin-right: -8px; margin-top: 10px; } .login-register-area .form .social-icon .login-with { position: absolute; left: -100px; top: 8px; margin: 0; } .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 .right { display: block; overflow: hidden; margin-left: -60px; } .login-register-area .form .right h6 { float: left; color: #49576f; font-size: 14px; margin-top: 18px; } .login-register-area .form .right h6 span{ color: #49576f; } .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; } /*** ============================================= Breadcrumb Area Contact Page style ============================================= ***/ .breadcrumb-area.contact-page .inner-content-box .title-s2 { padding: 113px 0 220px; } /*** ============================================= Contact address Area style ============================================= ***/ .contact-address-area{ position: relative; display: block; background: #f6f6f6; padding-bottom: 102px; z-index: 100; } .single-contact-address-box{ position: relative; display: block; background: #ffffff; text-align: center; padding: 40px 30px 32px; -webkit-box-shadow: 0px 4px 6px 2px #ededed; box-shadow: 0px 4px 6px 2px #ededed; margin-top: -115px; margin-bottom: 30px; transition: all 900ms ease 600ms; margin-bottom: 15px } .single-contact-address-box:hover{ -webkit-box-shadow: 0px 5px 12px 2px #ededed; box-shadow: 0px 5px 12px 2px #ededed; } .single-contact-address-box span:before{ color: #b3b3b3; font-size: 50px; line-height: 50px; transition: all 500ms ease; } .single-contact-address-box:hover span:before{ color: #49576f; } .single-contact-address-box h3{ color: #49576f; font-size: 20px; line-height: 28px; margin: 20px 0 12px; font-family: Futura PT Demi } .single-contact-address-box p{ margin: 0; } .contact-address-area .bottom-text { position: relative; display: block; padding-top: 24px; } .contact-address-area .bottom-text p{ margin: 0; } .contact-address-area .bottom-text p a{ color: #49576f; } /*** ============================================= Contact Info Area style ============================================= ***/ .contact-info-area { position: relative; display: block; background: #ffffff; padding: 110px 0 110px; } .contact-form { position: relative; display: block; z-index: 3; } .contact-form .inner-box{ position: relative; display: block; background: #ffffff; border: 1px solid #ededed; padding: 49px; } .contact-form form{ position: relative; display: block; } .contact-form form .input-box{ position: relative; display: block; } .contact-form form .input-box .icon { position: absolute; top: 19px; left: 20px; } .contact-form form .input-box .icon i{ color: #b6b6b6; font-size: 16px; } .contact-form form .input-box .icon.envelop { position: absolute; top: 16px; left: 20px; } .contact-form form input[type="text"], .contact-form form input[type="email"], .contact-form form textarea{ position: relative; display: block; background: #ffffff; border: 1px solid #ededed; width: 100%; height: 60px; font-size: 15px; padding-left: 50px; padding-right: 20px; border-radius: 0px; margin-bottom: 30px; transition: all 500ms ease; } .contact-form form textarea { height: 110px; padding-left: 50px; padding-right: 20px; padding-top: 14px; 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 textarea:focus{ border-color: #1d1d1d; color: #222222; } .contact-form form input[type="text"]::-webkit-input-placeholder { color: #49576f; } .contact-form form input[type="text"]:-moz-placeholder { color: #49576f; } .contact-form form input[type="text"]::-moz-placeholder { color: #49576f; } .contact-form form input[type="text"]:-ms-input-placeholder { color: #49576f; } .contact-form form input[type="email"]::-webkit-input-placeholder { color: #49576f; } .contact-form form input[type="email"]:-moz-placeholder { color: #49576f; } .contact-form form input[type="email"]::-moz-placeholder { color: #49576f; } .contact-form form input[type="email"]:-ms-input-placeholder { color: #49576f; } .contact-form form button { position: relative; display: block; width: 100%; } .contact-form-image-box { position: absolute; top: -110px; right: -350px; z-index: 1; } .contact-form-image-box img{ max-width: none; float: left; } /*** ============================================= Job Career Brochures Area style ============================================= ***/ .job-career-brochures-area{ position: relative; display: block; } .job-career-brochures-area .container-fluid{ padding: 0; } .job-career-brochures-area .row{ margin: 0; } .job-career-brochures-area .row [class*=col-] { padding-left: 0; padding-right: 0; } .job-career-brochures-box{ position: relative; display: block; } .job-career-brochures-box .img-holder{ position: relative; display: block; overflow: hidden; } .job-career-brochures-box .img-holder img{ width: 100%; } .job-career-brochures-box .overlay-content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .job-career-brochures-box .overlay-content .innner{ display: table; width: 100%; height: 100%; } .job-career-brochures-box .overlay-content .innner .box{ display: table-cell; vertical-align: middle; text-align: center; } .job-career-brochures-box .overlay-content .innner .box h1{ color: #ffffff; font-size: 36px; line-height: 44px; margin: 0 0 14px; } .job-career-brochures-box .overlay-content .innner .box p{ color: #ffffff; margin: 0 0 42px; } .job-career-brochures-box .overlay-content .innner .box a{ color: #49576f; padding: 0 50px 0; background: #ffffff; } .job-career-brochures-box .overlay-content .innner .box a:hover{ color: #ffffff; background: #f13729; } /*** ============================================= Coming Soon Content Area style ============================================= ***/ .coming-soon-content-area { position: relative; display: block; background-attachment: fixed; background-size: cover; background-position: center top; background-repeat: no-repeat; padding: 110px 0 420px; z-index: 1; } .coming-soon-content{ position: relative; display: block; } .coming-soon-content .logo-box{ position: relative; display: block; padding-bottom: 50px; } .coming-soon-content .logo-box a{ display: inline-block; } .coming-soon-content .title{ color: #ffffff; font-size: 60px; line-height: 70px; font-family: 'Futura PT Book'; } /*** ============================================= Timer Area style ============================================= ***/ .timer-area{ position: relative; display: block; z-index: 1; } .timer-area:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/pattern/timer-area-bg.jpg); background-repeat: repeat; background-size: auto; background-position: left; content: ""; z-index: -1; } .timer-box { position: relative; display: block; overflow: hidden; background: #49576f; max-width: 770px; width: 100%; margin: 0 auto; padding: 74px 110px 72px; margin-top: -320px; z-index: 3; } .timer-box h1{ color: #ffffff; font-size: 48px; line-height: 58px; text-transform: capitalize; margin: 0 0 47px; } .countdown-timer {} .countdown-timer .default-coundown {} .countdown-timer .default-coundown .box { overflow: hidden; } .countdown-timer li { position: relative; display: inline-block; float: none; padding: 0; text-align: center; margin: 0 23px; } .countdown-timer li:first-child{ margin-left: 0; } .countdown-timer li:last-child{ margin-right: 0; } .countdown-timer li span.days, .countdown-timer li span.hours, .countdown-timer li span.minutes, .countdown-timer li span.seconds { position: relative; display: block; background: #ffffff; width: 100px; height: 100px; color: #49576f; font-size: 48px; line-height: 100px; text-align: center; border-radius: 0px; font-family: 'Futura PT Book'; } .countdown-timer li span.hours{} .countdown-timer li span.minutes{} .countdown-timer li span.seconds{} .countdown-timer li span.timeRef { color: #ffffff; font-size: 20px; line-height: 20px; text-transform: capitalize; margin-top: 17px; display: block; font-family: 'Futura PT Book'; } .countdown-timer li span.timeRef.clr-1{} .countdown-timer li span.timeRef.clr-2{} .countdown-timer li span.timeRef.clr-3{} .timer-box .subscribe-box{ position: relative; display: block; margin-top: 39px; } .timer-box .subscribe-box .subscribe-form { position: relative; display: block; width: 100%; } .timer-box .subscribe-box .subscribe-form input[type="email"]{ position: relative; display: block; background: #ffffff; border: 1px solid #ffffff; color: #49576f; font-size: 15px; width: 100%; height: 60px; margin-bottom: 0px; padding: 0 30px; padding-right: 185px; transition: all 500ms ease; } .timer-box .subscribe-box .subscribe-form input::-webkit-input-placeholder { color: #49576f; } .timer-box .subscribe-box .subscribe-form input:-moz-placeholder { color: #49576f; } .timer-box .subscribe-box .subscribe-form input::-moz-placeholder { color: #49576f; } .timer-box .subscribe-box .subscribe-form input:-ms-input-placeholder { color: #49576f; } .timer-box .subscribe-box .subscribe-form button { position: absolute; top: 0; right: 0; color: #49576f; background: #ffffff; border-left: 1px solid #ededed; padding: 0; width: 170px; } .timer-box .subscribe-box .subscribe-form input[type="email"]:focus { color: #222222; border: 1px solid #191a1c; background: #ffffff; } .timer-box .subscribe-box .subscribe-form input[type="email"]:focus + button, .timer-box .subscribe-box .subscribe-form button:hover { background: #191a1c; color: #fff; } .timer-box .subscribe-box .text{ position: relative; display: block; padding-top: 14px; } .timer-box .subscribe-box .text p{ color: #ffffff; font-size: 15px; margin: 0; } .timer-box .subscribe-box .text p span{ } #polyglotLanguageSwitcher ul.dropdown { display: none; position: absolute; top: 35px; left: 0px; border-top: none !important; border-radius: 0; background: #fff; width: 110px; padding: 0; z-index: 9999999; } #polyglotLanguageSwitcher ul.dropdown li a { width: 100%; color: #26272b; } .main-menu.style3 .navigation > li > a:hover { color: #fff; } p { margin-top: 0; margin-bottom: 1.5rem; } .text ul { margin-left: 20px; margin-bottom: 1.5rem; } li span { color: #49576f; border-bottom: 2px solid #49576f; font-size: 20px; } li{ margin-bottom: 5px; } b, strong { font-family: 'Futura PT Demi'; font-weight: normal; } header .btn-one{ font-size: 15px; } .logo-box-style2 img{ width: 250px } a { color: #49576f; } a:hover{ color: #49576f; } .single-contact-address-box a:hover{ color: #eb5185 !important; }