/*************************************************************************************************************** |||||||||||||||||||||||||| MASTER STYLESHEET FOR ENDUZ ||||||||||||||||||||||||||||||||||||||| **************************************************************************************************************** |||||||||||||||||||||||||| TABLE OF CONTENT ||||||||||||||||||||||||||||||||||||||| **************************************************************************************************************** **************************************************************************************************************** 01. Imported styles 02. Flaticon reset styles 03. Header styles 04. Mainmenu styles 05. Rev_slider_wrapper styles 66. Call to action area Style 07. Categories area style 08. Fact counter area style 09. Latest Blog area style 10. Latest blog area style 11. Testimonial area style 12. Brand area style 13. Single service style 14. Pricing table area style 15. About page style 16. Account page style 17. 404 page style style 18. Blog page style 19. Blog single style 20. Contact page style **************************************************************************************************************** |||||||||||||||||||||||||||| End TABLE OF CONTENT |||||||||||||||||||||||||||||||||||| ****************************************************************************************************************/ /* Imported styles */ @import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900'); @import url('https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i'); @import url(imp.css); @import url(bootstrap.css); @import url(font-awesome.min.css); @import url(hover.css); @import url(jquery.bxslider.css); @import url(owl.css); @import url(owl.theme.default.css); @import url(animate.css); @import url(jquery.bootstrap-touchspin.css); @import url('bootstrap-select.min.css'); @import url('imagehover.css'); @import url('icomoon.css'); @import url('jquery.fancybox.min.css'); @import url('jquery.mCustomScrollbar.min.css'); @import url('slick.css'); @import url(../fonts/flaticon/flaticon.css); /*** Price filter***/ @import url(../assets/price-filter/nouislider.css); @import url(../assets/price-filter/nouislider.pips.css); /*** single shop slide ***/ @import url(flexslider.css); /*** Time picker css ***/ @import url(../assets/timepicker/timePicker.css); /*** flaticon fonts css ***/ @import url(../fonts/flaticon/flaticon.css); /*** jquery ui css ***/ @import url(../assets/jquery-ui-1.11.4/jquery-ui.css); /*** Revolution slider ***/ @import url(../plugins/revolution/css/settings.css); @import url(../plugins/revolution/css/layers.css); @import url(../plugins/revolution/css/navigation.css); /*** Bootstrap select picker css ***/ @import url(../assets/bootstrap-sl-1.12.1/bootstrap-select.css); /*** Language Switcher ***/ @import url(../assets/language-switcher/polyglot-language-switcher.css); /*============================================== Base Css ===============================================*/ html, body { height: 100%; } body { font-family: 'Roboto', sans-serif; font-size: 16px; color: #080808; line-height: 24px; font-weight: 400; } button:focus{ outline: none; } button { cursor: pointer; border: none; background: transparent; padding: 0; } h1, h2, h3, h4, h5, h6 { font-family: 'Rubik', sans-serif; font-weight: 500; margin: 0; } h3 { font-size: 20px; line-height: 24px; } h4 { } a, a:hover, a:active, a:focus { text-decoration: none; outline: none; border: none; } .fix{ overflow: hidden; } img { max-width: 100%; height: auto; } i { font-style: normal; } ul, li { list-style: none; margin: 0; padding: 0; } .sec-pd-one{ padding: 100px 0; } .sec-pding-two{ padding: 100px 0 60px; } .btn-one { position: relative; background: #fec144; color: #222222; font-size: 13px; line-height: 13px; font-weight: 500; display: inline-block; padding: 23px 40px 23px; text-transform: uppercase; font-family: 'Rubik', sans-serif; transition: all 500ms ease; border-radius: 3px; } .btn-one:hover{ color: #fff; background: #eb9f04; } .btn-two{ color: #222222; font-size: 13px; font-weight: 500; text-transform: uppercase; font-family: 'Rubik', sans-serif; transition: all 500ms ease; } .btn-two span:before { position: relative; top: 4px; font-weight: 400; font-size: 20px; line-height: 10px; display: inline-block; padding-right: 9px; } .btn-two:hover{ color: #000000; } .sec-title { position: relative; margin-top: -7px; padding-bottom: 42px; } .sec-title.text-center { max-width: 775px; margin: -7px auto 0; } .sec-title .title { position: relative; display: block; margin: 0px 0 8px; color: #222222; font-size: 36px; line-height: 40px; font-weight: 500; text-transform: none; font-family: 'Rubik', sans-serif; z-index: 1; } .sec-title .title.clr-white{ color: #ffffff; } .sec-title .inner{ position: relative; display: inline-block; line-height: 14px; z-index: 1; } .sec-title .inner .border1 { width: 50px; height: 2px; background: #fec144; display: inline-block; float: left; margin: 6px 0; } .sec-title .inner .border2 { width: 50px; height: 2px; background: #fec144; display: inline-block; float: right; margin: 6px 0; } .sec-title .inner span { position: relative; display: inline-block; color: #fec144; font-size: 18px; font-weight: 500; text-transform: capitalize; font-family: 'Rubik', sans-serif; line-height: 14px; padding: 0 15px; } .sec-title p{ color: #848484; font-size: 18px; line-height: 28px; margin: 17px 0 0; } .parallax-bg-one { background-attachment: fixed; background-position: center top; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1; } .parallax-bg-one::before { background: rgba(18, 32, 0, 0.90) none repeat scroll 0 0; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; } .parallax-bg-two { background-attachment: fixed; background-position: center top; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1; } .parallax-bg-two::before { background: rgba(9, 23, 33, 0.90) none repeat scroll 0 0; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; } .flex-box { display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap; } .flex-box-two { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; } .flex-box-three { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; align-items: center; } .flex-box-four { display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap; align-items: center; } .flex-box-five { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; align-items: center; } .owl-nav-style-one{} .owl-nav-style-one .owl-controls { } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"] { background: #ffffff none repeat scroll 0 0; border-radius: 50%; color: #909090; font-size: 24px; font-weight: 700; height: 50px; line-height: 46px; margin: 0 0 0 0px; padding: 0; width: 50px; border: 1px solid #f3f3f3; transition: all 700ms ease 0s; } .owl-nav-style-one.owl-theme .owl-nav .owl-next { margin-left: 10px; } .owl-nav-style-one.owl-theme .owl-nav [class*="owl-"]:hover{ border-color: #172272; color: #172272; } .owl-nav-style-two{} .owl-nav-style-two .owl-controls { } .owl-nav-style-two.owl-theme .owl-nav [class*="owl-"] { background: #fff none repeat scroll 0 0; border-radius: 0%; color: #3740b0; font-size: 24px; font-weight: 700; height: 50px; line-height: 50px; margin: 0 0 0 0px; padding: 0; width: 50px; transition: all 700ms ease 0s; } .owl-nav-style-two.owl-theme .owl-nav .owl-next { margin-left: 0px; } .owl-nav-style-two.owl-theme .owl-nav [class*="owl-"]:hover{ color: #ffffff; background: #3740b0; } .accordion-box { display: block; overflow: hidden; padding: 0; } .accordion-box .accordion { position: relative; display: block; overflow: hidden; } .accordion-box .accordion .accord-btn { border-bottom: 1px solid #f2f2f2; cursor: pointer; position: relative; transition: all 500ms ease; display: block; padding-left: 35px; padding-right: 35px; padding-top: 19px; padding-bottom: 18px; } .accordion-box .accordion .accord-btn h4 { color: #222222; font-size: 18px; font-weight: 400; line-height: 26px; transition: all 500ms ease; } .accordion-box .accordion .accord-btn::after { position: absolute; top: 25px; left: 0px; color: #bdbdbd; content: "\e91e"; font-family: 'icomoon'; font-size: 14px; line-height: 14px; font-weight: 300; transform:rotate(90deg); transition: all 500ms ease 0s; } .accordion-box .accordion .accord-btn.active{ border-bottom: 1px solid #f2f2f2; transition: all 500ms ease; } .accordion-box .accordion .accord-btn.active h4 { color: #fec144; } .accordion-box .accordion .accord-btn.active:after{ color: #fec144; transform:rotate(-90deg); } .accordion-box .accordion .accord-content { display: none; position: relative; padding-top: 25px; padding-bottom: 23px; padding-left: 35px; padding-right: 30px; border-bottom: 1px solid #f2f2f2; } .accordion-box .accordion .accord-content.collapsed { display: block; } .accordion-box .accordion .accord-content p { margin: 0; } .slick-dots { position: relative; display: inline-block; top: 0px; margin-top: 31px; } .slick-dots li { position: relative; display: inline-block; margin: 0 15px; } .slick-dots li:before { position: absolute; top: 0; bottom: 0; right: -17px; width: 6px; height: 1px; background: #555555; content: ""; margin: 16px 0; } .slick-dots li:last-child:before { display: none; } .slick-dots li button { position: relative; display: block; width: 32px; height: 32px; border-radius: 50%; background: transparent; color: #c2c2c2; font-size: 17px; font-weight: 500; padding-bottom: 0; font-family: 'Rubik', sans-serif; } .slick-dots li.slick-active button { background: #fec144; color: #222222; } .boxed_wrapper { background: #fff none repeat scroll 0 0; position: relative; margin: 0 auto; width: 100%; min-width: 320px; min-height: 400px; overflow: hidden; } /*________________Preloader_______________ */ .preloader{ position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:999999999999999999; background-color:#f4f6f4; background-position:center center; background-repeat:no-repeat; background-image:url(../images/icon/preloader.gif); } /* Update header Style */ @keyframes menu_sticky { 0% {margin-top:-100px;} 50% {margin-top: -74px;} 100% {margin-top: 0;} } .mainmenu-area.stricky-fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; background: #f5f5f5; animation-name: menu_sticky; animation-duration: 0.60s; animation-timing-function: ease-out; transition: all .25s ease-in-out; } .mainmenu-area.stricky-fixed .inner-content { background: #f5f5f5; border-top: 1px solid #f5f5f5; } /* scroll to top styles */ .scroll-to-top { background: #282828; border-radius: 4px; bottom: 25px; color: #ffffff; cursor: pointer; display: none; font-size: 25px; font-weight: normal; height: 55px; line-height: 56px; position: fixed; right: 15px; text-align: center; transition: all 500ms ease 0s; width: 55px; z-index: 99999999; box-shadow: 0px 8px 23px -6px rgba(27,27,27,1); } .scroll-to-top:hover { opacity: .5; } /* Form validation styles */ input:focus, textarea:focus, select:focus { border-color: #43c3ea; outline: none; } #contact-form input[type="text"].error{ border-color: red; } #contact-form input[type="email"].error{ border-color: red; } #contact-form select.error { border-color: red; } #contact-form textarea.error{ border-color: red; } /* Post pagination styles */ .post-pagination{ display: block; margin-top: 10px; } .post-pagination li { display: inline-block; margin: 0 3px; } .post-pagination li a { color: #222222; display: block; font-size: 17px; font-weight: 400; height: 32px; width: 32px; line-height: 32px; text-align: center; transition: all 500ms ease 0s; font-family: 'Rubik', sans-serif; border-radius: 50%; } .post-pagination li.active a, .post-pagination li:hover a { background: #fec144; } .post-pagination li a.left { width: auto; height: auto; display: block; color: #727272; padding-right: 10px; transition: all 500ms ease; } .post-pagination li:hover a.left{ background: none; } .post-pagination li a.left i { position: relative; top: 1px; display: inline-block; padding-right: 8px; font-size: 21px; } .post-pagination li a.left:hover{ color: #fec144; } .post-pagination li a.right { width: auto; height: auto; display: block; color: #727272; padding-left: 10px; transition: all 500ms ease; } .post-pagination li a.right:hover{ color: #fec144; } .post-pagination li:hover a.right{ background: none; } .post-pagination 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(0, 0, 0, 0.80); transition: all 500ms ease; transition-delay: 0.10s; opacity: 0; z-index: 2; } .overlay-style-one .box{ display: table; height: 100%; width: 100%; } .overlay-style-one .box .content{ display: table-cell; text-align: center; vertical-align: middle; } .review-box { position: relative; display: block; overflow: hidden; line-height: 16px; } .review-box ul { display: block; overflow: hidden; } .review-box ul li { display: inline-block; float: left; margin-right: 4px; } .review-box ul li:last-child{ margin-right: 0px; } .review-box ul li i { font-size: 14px; color: #fec144; } .sociallinks-style-one{} .sociallinks-style-one li{ display: inline-block; float: left; margin-right: 15px; } .sociallinks-style-one li:last-child{ margin-right: 0px; } .sociallinks-style-one li a i{ color: #959595; font-size: 14px; transition: all 500ms ease; } .sociallinks-style-one li a:hover i{ color: #172272; } .sociallinks-style-two{ overflow: hidden; } .sociallinks-style-two li { display: inline-block; margin-right: 10px; } .sociallinks-style-two li:last-child{ margin-right: 0px; } .sociallinks-style-two li a i { border: 2px solid #e5e5e5; background: #e5e5e5; border-radius: 50%; color: #848484; font-size: 14px; height: 45px; line-height: 42px; padding: 0; text-align: center; transition: all 500ms ease 0s; width: 45px; } .sociallinks-style-two li a:hover i{ background: #4eab27; border-color: #4eab27; color: #fff; } /*============================================== Top bar Area Css ===============================================*/ .top-bar-area { position: relative; display: block; padding: 14px 0; background: #1f1f1f; } .top-bar{ position: relative; display: block; width: 100%; } .top-bar .top-left { position: relative; color: #f8c145; display: block; max-width: 440px; width: 100%; min-height: 26px; } .top-bar .top-right { position: relative; display: block; max-width: 420px; width: 100%; } .top-bar .top-right ul { display: block; overflow: hidden; } .top-bar .top-right ul li { display: inline-block; float: left; color: #fec144; font-size: 15px; font-weight: 500; margin-right: 20px; line-height: 26px; font-family: 'Rubik', sans-serif; } .top-bar .top-right ul li:last-child { margin-right: 0px; } .top-bar .top-right ul li a{ color: #c2c2c2; font-weight: 400; font-family: 'Roboto', sans-serif; transition: all 500ms ease; } .top-bar .top-right ul li a:hover{ color: #fec144; } .top-bar .top-right ul li a span:before { position: relative; top: 2px; display: inline-block; padding-right: 9px; color: #fec144; font-size: 16px; line-height: 16px; } /*============================================== Header Style1 Area Css ===============================================*/ .header-style1-area { display: block; background: #ffffff; padding: 0px 0; } .header-style1-logo { display: block; margin: 0; } .header-style1-logo a { display: block; margin: 3px 0 4px; } .headers1-header-right{ position: relative; display: block; padding-top: 10px; } .headers1-header-right ul { position: relative; overflow: hidden; float: left; margin-right: 60px; padding: 1px 0; } .headers1-header-right ul li{ display: inline-block; float: left; margin-right: 28px; padding-right: 28px; border-right: 1px solid #e9e9e9; } .headers1-header-right ul li:last-child{ margin-right: 0; padding-right: 0; border: none; } .headers1-header-right ul li .single-item{ position: relative; display: block; } .headers1-header-right ul li .single-item .icon{ width: 35px; } .headers1-header-right ul li .single-item .icon span:before{ position: relative; top: 1px; font-size: 22px; line-height: 22px; color: #fec144; display: inline-block; padding-right: 10px; } .headers1-header-right ul li .single-item .icon, .headers1-header-right ul li .single-item .text{ display: table-cell; vertical-align: middle; } .headers1-header-right ul li .single-item .text p{ color: #2f2f2f; font-size: 16px; margin: 0 0 2px; font-family: 'Rubik', sans-serif; } .headers1-header-right ul li .single-item .text span{ color: #848484; } .headers1-header-right ul li .single-item h3 { color: #f3441e; font-size: 16px; font-weight: 600; text-transform: uppercase; display: block; margin: 13px 0; } .headers1-header-right ul li .single-item h3 span{ position: relative; top: 2px; color: #2f2f2f; font-size: 20px; font-weight: 400; font-family: 'Rubik', sans-serif; display: inline-block; padding-left: 10px; } .headers1-header-right .header-button { float: right; } .headers1-header-right .header-button a { padding: 19px 35px 20px; } /*** ===================================================== Main Header style ===================================================== ***/ .header-style1-area.main-header { position:absolute; left:0px; top:0px; z-index:999; width:100%; padding: 0; background: transparent; } .header-top { position: relative; display: block; padding: 32px 0; } .header-top .headers1-header-right ul li { border-right: 1px solid rgba(255, 255, 255, 0.20); } .header-top .headers1-header-right ul li:last-child{ border: none; } .header-top .headers1-header-right ul li .single-item .text p { color: #ffffff; } .header-top .headers1-header-right ul li .single-item .text span { color: #c2c2c2; } .header-lower { margin: 0; } .header-lower.mainmenu-area .inner-content { border-top: 0px solid; } .main-header.fixed-header .header-lower.mainmenu-area .inner-content { background: #f2f2f2; } .main-header.fixed-header .main-box{ position: fixed; left: 0; top: 0; width: 100%; z-index: 999999; } .header-lower .main-menu .navigation li a{ position: relative; } .header-lower .main-menu .navigation li a:before { position: absolute; top: -3px; left: 0; width: 100%; height: 3px; content: ""; background: #fec144; transform: none; transition: all .2s ease-in-out; } .header-lower .main-menu .navigation li a:after { position: absolute; bottom: -3px; left: 0; width: 100%; height: 3px; content: ""; background: #fec144; transform: none; transition: all .2s ease-in-out; } .header-lower .main-menu .navigation li:hover > a:before, .header-lower .main-menu .navigation li.current > a:before{ opacity: 1; left: auto; } .header-lower .main-menu .navigation li:hover > a:after, .header-lower .main-menu .navigation li.current > a:after{ opacity: 1; right: auto; } .header-lower .main-menu .navigation li ul li a:before{ display: none; } .main-header.fixed-header .main-menu .navigation li a { padding: 24px 0 21px; transition: all 0.4s ease-in-out 0s; } .main-header.fixed-header .main-menu .navigation li ul li a { padding: 18px 30px 15px; } .main-header.fixed-header .mainmenu-right { padding: 19px 0 20px; transition: all 0.4s ease-in-out 0s; } /*** ===================================================== Mainmenu Area style ===================================================== ***/ .mainmenu-area{ position: relative; display: block; background: transparent; margin-bottom: 0px; z-index: 999; } .mainmenu-area .inner-content { position: relative; display: block; background: #ffffff; border-top: 1px solid #e9e9e9; padding-left: 40px; padding-right: 40px; } .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; float: left; margin-right: 40px; } .main-menu .navigation li:last-child{ margin-right: 0; } .main-menu .navigation li a { position: relative; color: #222222; display: block; font-size: 14px; font-weight: 500; line-height: 14px; text-transform: uppercase; opacity: 1; padding: 29px 0 26px; transition: all 300ms ease; font-family: 'Rubik', sans-serif; } .main-menu .navigation > li:hover > a, .main-menu .navigation > li.current > a { color: #fec144; } .main-menu .navigation li > a:before { position: absolute; bottom: 15px; left: 0px; right: 0; width: 8px; height: 4px; background: #fec144; content: ""; margin: 0 auto; transform: rotate(-45deg); transition: all .2s ease-in-out; opacity: 0; } .main-menu .navigation li:hover > a:before, .main-menu .navigation li.current > a:before{ opacity: 1; left: -8px; } .main-menu .navigation li > a:after { position: absolute; bottom: 15px; left: 0; right: 0px; width: 8px; height: 4px; background: #fec144; content: ""; margin: 0 auto; transform: rotate(-45deg); transition: all .4s ease-in-out; opacity: 0; } .main-menu .navigation li:hover > a:after, .main-menu .navigation li.current > a:after{ opacity: 1; right: -8px; } .main-menu .navigation > li > ul { position: absolute; left: 0px; top: 130%; width: 250px; background: transparent; padding: 10px 0px 0; z-index: 100; visibility: hidden; opacity: 0; transition: all 500ms ease; display: block; border-bottom: 3px solid #fec144; border-radius: 8px; } .main-menu .navigation > li > ul:before { position: absolute; top: 10px; left: 0; width: 100%; background: #ffffff; content: ""; z-index: -1; bottom: 0; border-radius: 6px; } .main-menu .navigation > li:hover > ul { top: 100%; opacity: 1; visibility: visible; } .main-menu .navigation > li > ul > li { position: relative; display: block; float: none; margin: 0; padding: 0; width: 100%; transition: all 500ms ease; z-index: 1; } .main-menu .navigation > li > ul > li:before{ position: absolute; left: 30px; right: 30px; height: 100%; border-bottom: 1px solid #e9e9e9; content: ""; z-index: -1; } .main-menu .navigation > li > ul > li:last-child:before{ border-bottom: none; } .main-menu .navigation li ul li a { position: relative; display: block; color: #222222; font-size: 16px; font-weight: 400; line-height: 20px; text-transform: capitalize; transition: all 500ms ease 0s; padding: 18px 30px 15px; font-family: 'Rubik', sans-serif; } .main-menu .navigation li ul li a:before { position: absolute; top: 0; left: 30px; bottom: 0; right: auto; width: 7px; height: 7px; background: #fec144; border-radius: 50%; content: ""; border-radius: 50%; margin: 23px 0; transform: none; opacity: 1; transform: scale(0); transition: all 500ms ease; } .main-menu .navigation li ul li:hover a:before{ transform: scale(1); left: 30px; } .main-menu .navigation li ul li a:after{ display: none; } .main-menu .navigation > li > ul > li:hover > a { color: #fec144; padding-left: 45px; } .main-menu .navigation > li > ul > li > ul { position: absolute; left:100%; top:20px; width: 250px; z-index: 100; padding-left: 10px; visibility: hidden; opacity: 0; background: transparent; transition: all 200ms ease; } .main-menu .navigation > li > ul > li > ul:before{ position: absolute; left: 10px; bottom: 0; width: 100%; height: 100%; background: #ffffff; border-bottom: 3px solid #fec144; content: ""; z-index: -1; border-radius: 6px; } .main-menu .navigation > li > ul > li:hover > ul{ visibility:visible; opacity:1; top:0px; } .main-menu .navigation > li > ul > li > ul > li{ position: relative; display: block; float: none; margin: 0; padding: 0; width: 100%; transition: all 500ms ease; } .main-menu .navigation > li > ul > li > ul > li:before{ position: absolute; left: 30px; right: 30px; height: 100%; border-bottom: 1px solid #e9e9e9; content: ""; z-index: -1; } .main-menu .navigation > li > ul > li > ul > li:last-child:before{ border-bottom: none; } .main-menu .navigation > li > ul > li > ul > li a{ position: relative; display: block; color: #222222; font-size: 16px; font-weight: 400; line-height: 20px; text-transform: capitalize; transition: all 500ms ease 0s; padding: 18px 30px 15px; font-family: 'Rubik', sans-serif; } .main-menu .navigation > li > ul > li > ul > li a:before { position: absolute; top: 0; left: 30px; bottom: 0; right: auto; width: 7px; height: 7px; background: #fec144; border-radius: 50%; content: ""; margin: 23px 0; transform: none; opacity: 0; transform: scale(0); transition: all 500ms ease; } .main-menu .navigation > li > ul > li > ul > li:hover a:before{ transform: scale(1); opacity: 1; left: 30px; } .main-menu .navigation > li > ul > li > ul > li:hover a{ color: #fec144; padding-left: 45px; } .main-menu .navigation li ul li.dropdown{ position: relative; display: block; width: 100%; } .main-menu .navigation li ul li.dropdown:after{ position: absolute; font-family: 'FontAwesome'; content: "\f105"; font-size: 18px; line-height: 30px; display: block; top: 0; bottom: 0; right: 30px; margin: 11px 0; color: #8d8d8d; } .main-menu .navbar-collapse > ul li.dropdown .dropdown-btn { position: absolute; right: 10px; top: 6px; width: 34px; height: 30px; border: 1px solid #ffffff; background: url(../images/icon/submenu-icon.png) center center no-repeat; background-size: 20px; cursor: pointer; z-index: 5; display: none; border-radius: 3px; } .mainmenu-right { position: relative; display: inline-block; float: right; padding: 24px 0 25px; } .outer-search-box { display: inline-block; float: left; padding: 2px 0; } .outer-search-box .seach-toggle { color: #2f2f2f; cursor: pointer; font-size: 16px; position: relative; text-align: center; transition: all 500ms ease; height: 16px; display: block; width: 25px; line-height: 14px; } .outer-search-box .seach-toggle:hover, .outer-search-box .seach-toggle.active{ color: #fec144; } .search-box { background: #2f2f2f; opacity: 0; padding: 18px; position: absolute; top: 120%; left: -100%; transition: all 500ms ease 0s; visibility: hidden; z-index: 100; } .search-box.now-visible { top: 100%; opacity: 1; visibility: visible; z-index: 100; } .search-box .form-group{ position:relative; padding: 0px; margin: 0px; width: 100%; min-width: 250px; } .search-box .form-group input[type="search"] { background: #ffffff none repeat scroll 0 0; border: 1px solid #1d1d1d; color: #000; display: block; font-size: 13px; line-height: 24px; position: relative; transition: all 500ms ease 0s; width: 100%; height: 40px; padding-left: 15px; padding-right: 50px; } .search-box .form-group input[type="search"]:focus{ border-color: #000000; } .search-box .form-group button, .search-box .form-group input[type="submit"] { background: #1d1d1d; color: #fff; cursor: pointer; display: block; font-size: 13px; height: 40px; line-height: 40px; position: absolute; right: 0; top: 0; width: 40px; transition: all 500ms ease 0s; } .search-box .form-group button:hover, .search-box .form-group input:focus + button{ color:#fff; background: #000; } .mainmenu-right .cart-box { position: relative; display: inline-block; float: left; height: 20px; border-left: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; padding-left: 20px; padding-right: 20px; margin-left: 15px; margin-right: 20px; } .mainmenu-right .cart-box a{ display: inline-block; font-family: 'Rubik', sans-serif; } .mainmenu-right .cart-box a span:before{ color: #222222; font-size: 20px; line-height: 20px; display: inline-block; float: left; padding-right: 6px; transition: all 500ms ease; } .mainmenu-right .cart-box a:hover span:before{ color: #fec144; } .mainmenu-right .cart-box a span.number { position: relative; display: inline-block; float: left; margin: 1px 0; height: 18px; width: 18px; background: #fec144; border-radius: 50%; color: #222222; font-size: 13px; font-weight: 500; font-family: 'Rubik', sans-serif; text-align: center; line-height: 18px; } .mainmenu-right .social-links-box{ position: relative; display: inline-block; float: left; } .mainmenu-right .social-links-box ul{ display: block; overflow: hidden; } .mainmenu-right .social-links-box ul li { display: inline-block; float: left; margin-right: 18px; line-height: 20px; } .mainmenu-right .social-links-box ul li:last-child{ margin-right: 0; } .mainmenu-right .social-links-box ul li a i{ color: #848484; font-size: 14px; transition: all 500ms ease; } .mainmenu-right .social-links-box ul li a:hover i{ color: #fec144; } /*** ============================================ Hidden Sidebar style ============================================ ***/ .hidden-bar{ position: fixed; top: 0; width: 320px; height: 100%; background: #111111; z-index: 9999999999; transition: all 700ms ease; } .hidden-bar .mCSB_inside > .mCSB_container{ margin-right:0px; } .hidden-bar.right-align { right: -400px; } .hidden-bar.right-align.visible-sidebar{ right:0px; transition-delay: 300ms; } .hidden-bar .hidden-bar-closer { width: 40px; height: 40px; position: absolute; right: 20px; top: 10px; background: none; color: #ffffff; border-radius: 0px; text-align: center; line-height: 40px; transition: all 300ms ease; z-index: 999999; } .hidden-bar .hidden-bar-closer button { background: none; display:block; font-size: 40px; color:#ffffff; width:40px; height:40px; line-height:40px; } .hidden-bar .hidden-bar-closer button span:before{ font-size: 30px; line-height: 30px; } .hidden-bar .hidden-bar-closer:hover button { color: #ffffff; } .hidden-bar-wrapper { height: 100%; padding:30px 5px 30px 30px; } .hidden-bar .logo { padding:0px 0px 30px; } .hidden-bar .logo img{ display:inline-block; max-width:100%; } .hidden-bar .content-box{ position:relative; padding-right:32px; } .hidden-bar .content-box a { padding: 20px 40px 20px; } .hidden-bar .content-box h2{ position:relative; font-size:18px; color:#ffffff; font-weight:500; margin-bottom:20px; } .hidden-bar .content-box .text{ position:relative; font-size:14px; color: rgba(255,255,255,0.60); margin-bottom:25px; } .hidden-bar .contact-info{ position:relative; margin-top:60px; } .hidden-bar .contact-info h2{ position:relative; font-size:18px; color:#ffffff; font-weight:500; margin-bottom:20px; } .hidden-bar .contact-info li{ position:relative; margin-bottom:12px; color:rgba(255,255,255,0.90); font-size:14px; font-weight:400; padding-left:30px; line-height:2em; } .hidden-bar .contact-info li a{ color:rgba(255,255,255,0.90); transition: all 300ms ease; } .hidden-bar .contact-info li a:hover{ color: #ffffff; } .hidden-bar .contact-info li .icon{ position:absolute; left:0px; top:4px; color:rgba(255,255,255,0.60); font-size:18px; line-height:1.2em; } /*** ===================================================== 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 .slide-content{ position: relative; display: block; } .main-slider .slide-content .big-title{ position: relative; font-size: 60px; color: #ffffff; font-weight: 400; text-transform: none; line-height: 1.2em; font-family: 'Rubik', sans-serif; } .main-slider .slide-content .big-title b{ font-weight: 700; text-transform: uppercase; } .main-slider .slide-content .text{ position: relative; font-size: 18px; font-weight: 500; color: #ffffff; line-height: 1.6em; display: block; font-family: 'Roboto', sans-serif; } .main-slider .slide-content .btn-box{} .main-slider .slide-content .btn-box a{ padding: 23px 30px 23px; } .main-slider #rev_slider_two_wrapper .slide-content .big-title { color: #ffffff; } .main-slider #rev_slider_two_wrapper .slide-content .text { color: #ffffff; } /*** ============================================= Call To Action Area style ============================================= ***/ .call-to-action-area{ position: relative; display: block; margin-top: -70px; background: transparent; padding-bottom: 100px; z-index: 100; } .callto-action{ position: relative; display: block; overflow: hidden; background: #ffffff; -webkit-box-shadow: 0px 2px 5px 2px rgba(222,219,219,0.5); -moz-box-shadow: 0px 2px 5px 2px rgba(222,219,219,0.5); box-shadow: 0px 2px 5px 2px rgba(222,219,219,0.5); } .callto-action ul{ display: block; width: 100%; } .callto-action ul .single-box { position: relative; display: block; float: left; max-width: 390px; width: 100%; border-right: 1px solid #f5f5f5; padding: 50px 50px 42px; } .callto-action ul .single-box:last-child{ border: none; } .callto-action ul .single-box .top{ position: relative; display: block; overflow: hidden; } .callto-action ul .single-box .top .icon-holder{ width: 80px; } .callto-action ul .single-box .top .icon-holder span:before { color: #c9c9c9; font-size: 55px; line-height: 55px; display: block; transition: all .2s ease-in-out; } .callto-action ul .single-box:hover .top .icon-holder span:before{ color: #fec144; } .callto-action ul .single-box .top .icon-holder, .callto-action ul .single-box .top .title-holder{ display: table-cell; vertical-align: middle; } .callto-action ul .single-box .top .title-holder{} .callto-action ul .single-box .top .title-holder h3{ color: #222222; } .callto-action ul .single-box .text-holder{ position: relative; display: block; margin-top: 26px; } .callto-action ul .single-box .text-holder p{ margin: 0 0 26px; } .callto-action ul .single-box .text-holder a{ transition: all .5s ease-in-out; } .callto-action ul .single-box:hover .text-holder a{ color: #fec144; } /*** ============================================= Services Style1 Area Style ============================================= ***/ .services-style1-area { position: relative; display: block; padding-bottom: 88px; } .single-solution-style1 { position: relative; display: block; margin-bottom: 10px; margin-left: 5px; margin-right: 5px; } .single-solution-style1 .img-holder{ position: relative; display: block; overflow: hidden; border-radius: 5px 5px 0 0; z-index: 1; } .single-solution-style1 .img-holder::before { background: rgba(0, 0, 0, 0.50); 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-solution-style1:hover .img-holder::before{ opacity: 1; } .single-solution-style1 .img-holder img { width: 100%; transition: .5s ease; } .single-solution-style1:hover .img-holder img { transform: translateX(0%) translateY(-40px) scale(1); } .single-solution-style1 .statics-content { position: relative; display: block; z-index: 10; padding: 36px 20px 33px; box-shadow: 0px 3px 7px 1px rgba(240,240,240,0.7); background: #ffffff; } .single-solution-style1 .text-holder{ position: relative; display: block; background: #ffffff; padding-left: 70px; } .single-solution-style1 .text-holder .icon{ position: absolute; top: 4px; left: 0; } .single-solution-style1 .text-holder .icon span:before{ font-size: 50px; line-height: 50px; color: #222222; } .single-solution-style1 .text-holder .text{ position: relative; display: block; padding-left: 20px; } .single-solution-style1 .text-holder .text:before{ position: absolute; top: 4px; left: 0; width: 2px; height: 50px; background: #fec144; content: ""; } .single-solution-style1 .text-holder .text h3{ color: #222222; margin: 0 0 15px; } .single-solution-style1 .text-holder .text p{ margin: 0; } .single-solution-style1 .text-holder .text .readmore{ display: block; padding-top: 15px; } .single-solution-style1 .overlay-content { position: absolute; left: 0; right: 0; bottom: -40px; display: block; z-index: 11; padding: 36px 20px 33px; box-shadow: 0px 3px 7px 1px rgba(240,240,240,0.7); background: #ffffff; opacity: 0; transition: all 0.4s ease-in-out 0s; } .single-solution-style1:hover .overlay-content{ opacity: 1; transform: translateX(0%) translateY(-40px) scale(1); } .services-style1-area .owl-dots { position: relative; display: block !important; margin-top: 25px !important; } .services-style1-area .owl-dots .owl-dot{ background-image:none; width: 10px; height: 10px; margin: 5px 5px; border: 2px solid #d5d5d5; padding:0px; background: #ffffff; border-radius:50%; transition: all 500ms ease; display: inline-block; } .services-style1-area .owl-dots .owl-dot span{ display:none; } .services-style1-area .owl-dots .owl-dot.active{ background:#fec144; border-color: #fec144; border-radius: 15px; } .services-style1-area .owl-dots .owl-dot:hover{ background:#fec144; border-color: #fec144; } /*** ============================================= Services Style2 Area Style ============================================= ***/ .services-style2-area { position: relative; display: block; padding-top: 100px; padding-bottom: 88px; } .services-style2-area .container-fluid{ padding: 0; } .services-style2-area .container-fluid .mar0{ margin: 0; } .services-style2-area .container-fluid .pd0{ padding: 0; } .single-solution-style2{ position: relative; display: block; width: 100%; border: 1px solid #f2f2f2; } .single-solution-style2 .img-holder{ position: relative; display: block; width: 50%; float: left; } .single-solution-style2 .img-holder img{ width: 100%; } .single-solution-style2 .img-holder .icon-box{ position: absolute; top: 65px; right: -42px; width: 85px; height: 85px; background: transparent; display: block; text-align: center; z-index: 2; } .single-solution-style2 .img-holder .icon-box:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fec144; content: ""; z-index: -1; transform: rotate(45deg); } .single-solution-style2 .img-holder .icon-box span:before { color: #222222; font-size: 50px; line-height: 50px; display: block; padding: 17px 0px; } .single-solution-style2 .text-holder { position: relative; display: block; width: 50%; float: left; overflow: hidden; text-align: center; padding-top: 77px; padding-bottom: 79px; padding-left: 30px; padding-right: 30px; } .single-solution-style2 .text-holder .big-title{ color: #e9e9e9; font-size: 60px; line-height: 60px; font-weight: 500; font-style: italic; font-family: 'Rubik', sans-serif; } .single-solution-style2 .text-holder .text{ display: block; margin-top: 26px; } .single-solution-style2 .text-holder .text h3{ color: #222222; margin: 0 0 20px; } .single-solution-style2 .text-holder .text p{ margin: 0 0 25px; } .services-style2-area .owl-dots { position: relative; display: block !important; margin-top: 35px !important; } .services-style2-area .owl-dots .owl-dot{ background-image:none; width: 10px; height: 10px; margin: 5px 5px; border: 2px solid #d5d5d5; padding:0px; background: #ffffff; border-radius:50%; transition: all 500ms ease; display: inline-block; } .services-style2-area .owl-dots .owl-dot span{ display:none; } .services-style2-area .owl-dots .owl-dot.active{ background:#fec144; border-color: #fec144; border-radius: 15px; } .services-style2-area .owl-dots .owl-dot:hover{ background:#fec144; border-color: #fec144; } /*** ============================================= Growth Area Style ============================================= ***/ .growth-area{ position: relative; display: block; background: #f5f5f5; padding-top: 100px; padding-bottom: 100px; } .growth-area .growth-chart-image{ position: absolute; top: 0; left: 0; bottom: 0; } .growth-area .growth-chart-image img { width: 87%; height: 87%; } .growth-content { position: relative; display: block; overflow: hidden; max-width: 500px; width: 100%; background: #ffffff96; padding: 8px 50px 21px; border-radius: 3px; } .growth-content h3 { font-size: 24px; line-height: 30px; color: #222222; padding-left: 0px; margin: 0 0 32px; } .progress-levels{ position:relative; display: block; } .progress-levels .progress-box { position: relative; display: block; margin-bottom: 29px; } .progress-levels .progress-box .inner { position: relative; display: block; } .progress-levels .progress-box .inner .text { position: relative; color: #222222; font-size: 16px; line-height: 16px; font-weight: 500; margin: 0 0 9px; text-transform: capitalize; font-family: 'Rubik', sans-serif; } .progress-levels .progress-box .bar{ position: relative; display: block; } .progress-levels .progress-box .bar .bar-innner{ position: relative; width: 100%; height: 10px; background: #f7f7f7; border-radius: 5px; } .progress-levels .progress-box .bar .bar-fill{ position:absolute; top: 0%; bottom: 0%; left: 0px; height: 10px; width: 0px; border-radius: 5px; background: #fec144; transition: all 2000ms ease 300ms; } .progress-levels .progress-box .bar .bar-innner .skill-percent { position: absolute; top: -40px; right: 0; width: 35px; height: 35px; background: #f5f5f5; border-radius: 50%; display: block; text-align: center; padding: 0 6px; } .progress-levels .progress-box .inner .count-text { position: relative; font-size: 12px; font-weight: 700; color: #222222; display: inline-block; float: left; font-family: 'Roboto', sans-serif; line-height: 35px; } .progress-levels .progress-box .inner .percent{ position:relative; font-size:12px; font-weight:700; color:#222222; display:inline-block; float: left; font-family: 'Roboto', sans-serif; line-height: 35px; } .growth-content-right .icon-holder { position: relative; display: block; margin: 0 0 33px; } .growth-content-right .icon-holder span:before{ color: #222222; font-size: 75px; line-height: 75px; } .growth-content-right h2{ color: #222222; font-size: 30px; line-height: 38px; margin: 0 0 16px; } .growth-content-right .bottom-content{ position: relative; display: block; overflow: hidden; margin-top: 34px; } .growth-content-right .bottom-content .icon{ position: relative; width: 75px; height: 75px; display: block; background-attachment: fixed; background-position: center top; background-repeat: no-repeat; background-size: cover; background: rgba(56, 172, 73, 0.60); border-radius: 50%; z-index: 1; } .growth-content-right .bottom-content .icon::before { background: rgba(0, 0, 0, 0.60) none repeat scroll 0 0; content: ""; height: 100%; width: 100%; top: 0; left: 0; position: absolute; z-index: -1; border-radius: 50%; } .growth-content-right .bottom-content .icon a{ width: 75px; height: 75px; text-align: center; border-radius: 50%; display: block; } .growth-content-right .bottom-content .icon a span:before { color: #fec144; font-size: 20px; display: block; padding: 27px 0; } .growth-content-right .bottom-content .title, .growth-content-right .bottom-content .icon{ display: table-cell; vertical-align: middle; } .growth-content-right .bottom-content .title{ position: relative; padding-left: 25px; } .growth-content-right .bottom-content .title h4{ color: #222222; font-size: 16px; margin: 0 0 6px; } .growth-content-right .bottom-content .title span{} /*** ============================================= Featured Project Area Style ============================================= ***/ .featured-project-area{ position: relative; display: block; padding: 100px 0 100px; } .featured-project{} .featured-project .single-featured-project{ position: relative; display: block; } .featured-project .single-featured-project .img-holder{ position: relative; display: block; overflow: hidden; } .featured-project .single-featured-project .img-holder img{ width: 100%; transition: all 0.4s ease-in-out 0s; } .featured-project .single-featured-project:hover .img-holder img { transform: scale(1.1); } .featured-project .single-featured-project .overlay-content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .featured-project .single-featured-project .overlay-content .count { width: 200px; height: 100%; display: block; float: left; font-size: 72px; font-weight: 700; color: #ffffff; font-family: 'Rubik', sans-serif; line-height: 60px; text-align: center; padding-top: 46px; } .featured-project .single-featured-project .overlay-content .project-details{ position: relative; display: block; float: left; max-width: 370px; width: 100%; background: #fec144; padding: 47px 40px 42px; } .featured-project .single-featured-project .overlay-content .project-details h3{ color: #222222; font-size: 24px; display: block; margin: 0 0 50px; } .featured-project .single-featured-project .overlay-content .project-details span{ color: #222222; font-size: 14px; font-weight: 500; text-transform: uppercase; font-family: 'Rubik', sans-serif; } .featured-project .single-featured-project .overlay-content .project-details p{ color: #222222; margin: 7px 0 25px; } .featured-project .single-featured-project .overlay-content .project-details a{ color: #222222; font-size: 13px; font-weight: 500; text-transform: uppercase; font-family: 'Rubik', sans-serif; } .featured-project .owl-theme .owl-nav { position: absolute; right: 0; bottom: 0; width: 250px; height: 90px; background: #fec144; display: block; text-align: center; padding: 36px 0; } .featured-project .owl-theme .owl-nav:before { position: absolute; top: 41px; left: 50%; width: 2px; height: 9px; background: #cf9c35; content: ""; margin-left: -1px; } .featured-project .owl-theme .owl-nav [class*="owl-"] { background: transparent; color: #222222; font-size: 13px; width: 65px; height: 15px; margin: 0; padding: 0; border: 0px solid; transition: all 700ms ease 0s; } .featured-project .owl-theme .owl-nav [class*="owl-"] p { font-weight: 500; margin: 0; display: inline-block; float: right; text-transform: uppercase; font-family: 'Rubik', sans-serif; line-height: 15px; } .featured-project .owl-theme .owl-nav .owl-prev span:before { font-size: 20px; float: left; line-height: 15px; transform: rotate(180deg); } .featured-project .owl-theme .owl-nav .owl-next span:before{ font-size: 20px; float: right; line-height: 15px; } .featured-project .owl-theme .owl-nav .owl-next p{ float: left; } .featured-project .owl-theme .owl-nav .owl-prev { margin-right: 20px; } .featured-project .owl-theme .owl-nav .owl-next { margin-left: 20px; } .featured-project .owl-theme .owl-nav .owl-prev:hover{ color: #ffffff; } .featured-project .owl-theme .owl-nav .owl-next:hover{ color: #ffffff; } /*** ============================================= Featured Project Area V2 Style ============================================= ***/ .featured-project-area-v2{ position: relative; display: block; background: #f5f5f5; padding: 100px 0 0px; } .featured-project-area-v2 .container-fluid{ padding: 0; } .featured-project-area-v2 .mar0{ margin: 0; } .featured-project-area-v2 .pd0{ padding: 0; } .featured-project-area-v2 .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; margin-left: -12.5%; margin-right: -12.5%; } .single-featured-project-v2{ position: relative; display: block; } .single-featured-project-v2 .img-holder{ position: relative; display: block; overflow: hidden; z-index: 1; } .single-featured-project-v2 .img-holder::before { background: rgba(0, 0, 0, 0.80); 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-featured-project-v2:hover .img-holder::before{ opacity: 1; } .single-featured-project-v2 .img-holder img{ width: 100%; transition: all 0.4s ease-in-out 0s; } .single-featured-project-v2:hover .img-holder img{ transform: translateX(0%) translateY(0px) scale(1.1); } .single-featured-project-v2 .overlay-content { position: absolute; left: 40px; bottom: 0; right: 40px; background: #f5f5f5; display: block; padding: 26px 40px 23px; border-radius: 5px 5px 0 0; overflow: hidden; transform: translateY(100%); transition: all 500ms ease; z-index: 2; } .single-featured-project-v2:hover .overlay-content{ transform: translateY(0); } .single-featured-project-v2 .overlay-content h3{ color: #222222; font-size: 20px; border-bottom: 1px solid #e9e9e9; display: block; padding-bottom: 15px; margin-bottom: 20px; } .single-featured-project-v2 .overlay-content ul{ position: relative; display: block; margin-top: -6px; } .single-featured-project-v2 .overlay-content ul li{ color: #848484; font-size: 16px; margin-bottom: 6px; } .single-featured-project-v2 .overlay-content ul li:last-child{ margin-bottom: 0; } .single-featured-project-v2 .overlay-content ul li span{ color: #222222; font-size: 13px; font-weight: 500; text-transform: uppercase; font-family: 'Rubik', sans-serif; display: inline-block; width: 53px; margin-right: 20px; } .single-featured-project-v2 .overlay-content ul li b{ position: relative; top: 1px; font-weight: 400; display: inline-block; padding-left: 20px; } .single-featured-project-v2 .overlay-content .more-content{ display: inline-block; } .single-featured-project-v2 .overlay-content .more-content a{ display: block; width: 43px; height: 43px; background: #fec144; border-radius: 3px; text-align: center; transition: all 500ms ease; } .single-featured-project-v2 .overlay-content .more-content a:hover{ background: #e79d05; } .single-featured-project-v2 .overlay-content .more-content a span:before { color: #222222; font-size: 20px; display: block; padding: 11px 0; } .featured-project-area-v2 .owl-carousel .owl-nav { position: absolute; right: 365px; top: -104px; display: block; } .featured-project-area-v2 .owl-carousel .owl-nav [class*="owl-"] { background: #ffffff none repeat scroll 0 0; border-radius: 0; color: #ababab; font-size: 20px; font-weight: 700; height: 45px; line-height: 42px; margin: 0 0 0 0px; padding: 0; width: 45px; border: 1px solid #f2f2f2; transition: all 700ms ease 0s; border-radius: 50%; } .featured-project-area-v2 .owl-carousel .owl-nav .owl-next { margin-left: 10px; } .featured-project-area-v2 .owl-carousel .owl-nav [class*="owl-"]:hover{ border-color: #fec144; color: #fec144; } /*** ============================================= Fact counter Area style ============================================= ***/ .fact-counter-area { background-attachment: scroll; background-position: center top; background-repeat: no-repeat; background-size: cover; padding-top: 100px; padding-bottom: 60px; position: relative; z-index: 1; } .fact-counter-area::before { position: absolute; background: rgba(5, 7, 8, 0.90); content: ""; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } .single-fact-counter { position: relative; display: block; max-width: 330px; width: 100%; height: 330px; border-radius: 50%; border: 2px dashed #2d2f31; margin: 0 auto 40px; } .single-fact-counter .count-box { position: relative; display: block; padding: 58px 0 69px; } .single-fact-counter h1{ position: relative; display: block; } .single-fact-counter h1 span { position: relative; display: inline-block; color: #ffffff; font-size: 48px; font-weight: 700; font-family: 'Rubik', sans-serif; } .single-fact-counter h1 b{ color: #ffffff; font-size: 48px; font-weight: 700; display: inline-block; padding-left: 5px; } .single-fact-counter .title{ position: relative; display: block; margin-top: 3px; } .single-fact-counter .title h3 { color: #cacaca; font-size: 18px; text-transform: capitalize; } .single-fact-counter .icon{ position: relative; display: block; margin-top: 34px; } .single-fact-counter .icon span:before{ color: #fec144; font-size: 80px; line-height: 80px; } .single-fact-counter .overlay-text { position: absolute; top: -2px; left: -2px; bottom: -2px; right: -2px; background: #252729; border-radius: 50%; display: block; padding: 65px 40px 0; transition: all 0.5s ease-in-out 0s; transform-style: preserve-3d; transform: perspective(1200px) rotateX(-90deg) translateZ(0px); } .single-fact-counter:hover .overlay-text { transform: perspective(1200px) rotateX(0deg) translateZ(0px); transition-delay: 0.2s; } .single-fact-counter .overlay-text .text{} .single-fact-counter .overlay-text .text p{ color: #ababab; margin: 14px 0 25px; } .single-fact-counter .overlay-text .text a{ color: #ffffff; } /*** ============================================= Fact Counter Area Style2 style ============================================= ***/ .fact-counter-area.style2{ position: relative; display: block; background: #ffffff; padding: 100px 0 100px; } .fact-counter-area.style2::before { display: none; } .fact-counter-area.style2 ul{ position: relative; display: block; overflow: hidden; border-top: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2; } .single-fact-counter-style2{ position: relative; display: inline-block; float: left; max-width: 390px; width: 100%; padding: 49px 50px 42px; border-right: 1px solid #f2f2f2; } .single-fact-counter-style2:last-child{ border-right: none; } .single-fact-counter-style2 .icon{ position: relative; display: block; margin-bottom: 28px; } .single-fact-counter-style2 .icon span:before{ color: #c9c9c9; font-size: 80px; line-height: 80px; transition: all 500ms ease; } .single-fact-counter-style2:hover .icon span:before{ color: #fec144; } .single-fact-counter-style2 h1 span { position: relative; display: inline-block; color: #222222; font-size: 48px; font-weight: 700; font-family: 'Rubik', sans-serif; } .single-fact-counter-style2 h1 b { color: #222222; font-size: 48px; font-weight: 700; display: inline-block; padding-left: 5px; font-family: 'Rubik', sans-serif; } .single-fact-counter-style2 .title h3 { color: #222222; font-size: 18px; margin: 3px 0 14px; text-transform: capitalize; } .single-fact-counter-style2 .text p { color: #848484; margin: 0; } /*** ============================================= Working Process Area Style ============================================= ***/ .working-process-area { position: relative; display: block; padding: 100px 0 60px; } .working-process{} .working-process ul{} .working-process ul li { position: relative; display: block; float: left; width: 270px; text-align: center; margin-right: 30px; margin-bottom: 40px; } .working-process ul li.martop50{ margin-top: 50px; } .working-process ul li.arrow:before { position: absolute; top: 38px; right: -68px; width: 109px; height: 44px; background: url(../images/icon/arrow-bottom.png); background-repeat: no-repeat; content: ""; } .working-process ul li.arrow.top:before { position: absolute; top: -12px; right: -68px; width: 109px; height: 44px; background: url(../images/icon/arrow-top.png); background-repeat: no-repeat; content: ""; } .working-process ul li:last-child{ margin-right: 0; } .working-process ul li .single-item{} .working-process ul li .single-item .icon-holder { position: relative; display: block; width: 80px; height: 80px; margin: 0 auto; border-radius: 50%; padding: 24px 0 15px; border: 1px solid #f3f3f3; transition: all 0.3s ease-in-out 0s; } .working-process ul li:hover .single-item .icon-holder{ background: #fec144; border-color: #fec144; } .working-process ul li .single-item .icon-holder span:before{ color: #222222; font-size: 30px; line-height: 30px; } .working-process ul li .single-item .icon-holder .count-box { position: absolute; top: -1px; left: -11px; width: 30px; height: 30px; border: 1px solid #f5f5f4; background: #f5f5f4; border-radius: 50%; transition: all 0.7s ease-in-out 0s; } .working-process ul li:hover .single-item .icon-holder .count-box{ background: #ffffff; } .working-process ul li .single-item .icon-holder .count-box h4 { color: #222222; font-size: 16px; font-weight: 400; line-height: 30px; } .working-process ul li .single-item .text-holder { position: relative; display: block; margin-top: 40px; border: 1px solid #f2f2f2; padding: 45px 15px 43px; border-radius: 4px; -webkit-box-shadow: 0px 2px 8px 0px rgba(242,242,242,1); -moz-box-shadow: 0px 2px 8px 0px rgba(242,242,242,1); box-shadow: 0px 2px 8px 0px rgba(242,242,242,1); } .working-process ul li .single-item .text-holder h3{ color: #222222; font-size: 18px; margin: 0 0 1px; } .working-process ul li .single-item .text-holder span{ color: #fec144; font-size: 15px; } .working-process ul li .single-item .text-holder p{ margin: 13px 0 0; } /*** ============================================= Testimonial Area Style ============================================= ***/ .testimonial-area{ position: relative; display: block; background: #f5f5f5; padding: 80px 0 150px; z-index: 1; } .testimonial-area:before{ position: absolute; top: 0; left: 0; width: 100%; height: 80px; background: #ffffff; content: ""; z-index: -1; } .testimonial-area .title{ position: absolute; left: 0; right: 0; top: 44px; text-align: center; z-index: -1; } .testimonial-area .title span{ font-size: 150px; color: #f5f5f5; font-weight: 700; text-transform: uppercase; } .testimonial-carousel{ position: relative; display: block; } .testimonial-area .owl-carousel .owl-stage-outer { position: relative; overflow: inherit; } .single-testimonial-item{ position: relative; display: block; } .single-testimonial-item .img-holder{ position: relative; display: block; } .single-testimonial-item .img-holder img{ width: 100%; } .single-testimonial-item .icon-holder{ position: absolute; top: 50px; left: 50px; } .single-testimonial-item .icon-holder span:before{ color: #fec144; font-size: 30px; line-height: 30px; } .single-testimonial-item .title-holder{ position: absolute; bottom: 45px; left: 50px; transition: all 700ms ease; transform: scale(1.0); } .single-testimonial-item:hover .title-holder{ transform: scale(0); } .single-testimonial-item .title-holder span{ color: #fec144; font-size: 15px; font-weight: 500; font-family: 'Rubik', sans-serif; } .single-testimonial-item .title-holder h3{ color: #222222; margin: 4px 0 0; } .single-testimonial-item .overlay-content { position: absolute; bottom: -45px; left: 50px; right: 50px; background: #ffffff; padding: 33px 30px 33px; border-radius: 15px; text-align: center; box-shadow: 0px 2px 7px 3px rgba(226,226,226,0.65); transition-delay: .3s; transform: scale(0); transition: all 500ms ease; } .single-testimonial-item:hover .overlay-content{ transform: scale(1.0); transition-delay: .3s; transition: all 500ms ease; } .single-testimonial-item .overlay-content:before { position: absolute; content: ''; left: 80px; top: -34px; border-bottom: 35px solid #ffffff; border-right: 30px solid transparent; transform: rotate(-5deg); z-index: 1; } .single-testimonial-item .overlay-content p{ margin: 0; } .testimonial-area .owl-theme .owl-nav { position: absolute; left: 0; right: 0; bottom: -80px; width: 200px; display: block; margin: 0 auto; text-align: center; } .testimonial-area .owl-theme .owl-nav:before { position: absolute; top: 5px; left: 50%; width: 2px; height: 9px; background: #d5d5d5; content: ""; margin-left: -1px; } .testimonial-area .owl-theme .owl-nav [class*="owl-"] { background: transparent; color: #222222; font-size: 13px; width: 65px; height: 15px; margin: 0; padding: 0; border: 0px solid; transition: all 700ms ease 0s; } .testimonial-area .owl-theme .owl-nav [class*="owl-"] p { font-weight: 500; margin: 0; display: inline-block; float: right; text-transform: uppercase; font-family: 'Rubik', sans-serif; line-height: 15px; } .testimonial-area .owl-theme .owl-nav .owl-prev span:before { font-size: 20px; float: left; line-height: 15px; transform: rotate(180deg); } .testimonial-area .owl-theme .owl-nav .owl-next span:before{ font-size: 20px; float: right; line-height: 15px; } .testimonial-area .owl-theme .owl-nav .owl-next p{ float: left; } .testimonial-area .owl-theme .owl-nav .owl-prev { margin-right: 20px; } .testimonial-area .owl-theme .owl-nav .owl-next { margin-left: 20px; } .testimonial-area .owl-theme .owl-nav .owl-prev:hover{ color: #fec144; } .testimonial-area .owl-theme .owl-nav .owl-next:hover{ color: #fec144; } /*** ============================================= Testimonial Area V2 Style ============================================= ***/ .testimonial-area-v2{ position: relative; display: block; padding: 100px 0 88px; } .single-testimonial-item-v2{ position: relative; display: block; overflow: hidden; border: 1px solid #f2f2f2; border-radius: 5px; padding: 40px; } .single-testimonial-item-v2 .text-holder{ position: relative; display: block; background: #ffffff; padding: 35px 40px 33px; box-shadow: 0px 1px 7px 3px rgba(244,244,244,1); border-top-right-radius: 5px; border-top-left-radius: 5px; border-bottom-right-radius: 5px; } .single-testimonial-item-v2 .text-holder:before { position: absolute; content: ''; left: 0px; width: 26px; height: 35px; bottom: -35px; background: url(../images/icon/testimonial-arrow.png); } .single-testimonial-item-v2 .text-holder p{ margin: 0; } .single-testimonial-item-v2 .client-info { position: relative; display: block; margin-top: 25px; margin-left: 45px; } .single-testimonial-item-v2 .client-info .img-holder{ width: 80px; } .single-testimonial-item-v2 .client-info .img-holder, .single-testimonial-item-v2 .client-info .title-holder{ display: table-cell; vertical-align: middle; } .single-testimonial-item-v2 .client-info .title-holder{ position: relative; padding-left: 20px; } .single-testimonial-item-v2 .client-info .title-holder h3 { color: #222222; font-size: 18px; margin: 0 0 9px; } .single-testimonial-item-v2 .client-info .title-holder h3 span{ color: #848484; font-size: 16px; font-weight: 400; font-style: italic; font-family: 'Roboto', sans-serif; } .single-testimonial-item-v2 .client-info .quote-icon { position: absolute; top: 0; right: 0px; bottom: 0; margin: 4px 0; } .testimonial-area-v2 .owl-dots { position: relative; display: block !important; margin-top: 35px !important; } .testimonial-area-v2 .owl-dots .owl-dot{ background-image:none; width: 10px; height: 10px; margin: 5px 5px; border: 2px solid #d5d5d5; padding:0px; background: #ffffff; border-radius:50%; transition: all 500ms ease; display: inline-block; } .testimonial-area-v2 .owl-dots .owl-dot span{ display:none; } .testimonial-area-v2 .owl-dots .owl-dot.active{ background:#fec144; border-color: #fec144; border-radius: 15px; } .testimonial-area-v2 .owl-dots .owl-dot:hover{ background:#fec144; border-color: #fec144; } /*** ============================================= Map Quote Area Style ============================================= ***/ .map-quote-area{ position: relative; display: block; z-index: 1; } #home1-google-map { height: 610px; width: 100%; } .map-quote-area .quote-content{ position: absolute; top: 140px; left: 0; right: 0; } .map-quote-area .quote-content .view-map { position: absolute; top: -140px; right: 0; width: 270px; height: 70px; text-align: center; z-index: 1; } .map-quote-area .quote-content .view-map:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/icon/view-map-bg.png); background-repeat: no-repeat; width: 270px; height: 70px; z-index: -1; content: ""; } .map-quote-area .quote-content .view-map a { color: #222222; font-size: 18px; font-weight: 500; font-family: 'Rubik', sans-serif; text-transform: capitalize; line-height: 70px; } .map-quote-area .inner-content{ position: relative; display: block; } .contact-box { position: relative; display: block; padding: 43px 47px 0px; padding-right: 10px; max-width: 400px; width: 100%; background: #fec144; float: left; } .contact-box h3{ color: #222222; font-size: 24px; margin: 0 0 20px; } .contact-box ul{ position: relative; display: block; } .contact-box ul li{ display: block; margin-bottom: 16px; } .contact-box ul li:last-child{ margin-bottom: 0; } .contact-box ul li span{ color: #222222; font-size: 14px; font-weight: 500; text-transform: uppercase; font-family: 'Rubik', sans-serif; } .contact-box ul li p{ color: #222222; line-height: 26px; margin: 1px 0 0; } .quote { position: relative; display: block; background: #ffffff; float: left; max-width: 770px; width: 100%; padding: 57px 50px 23px; } .quote .title { display: block; margin-bottom: 32px; } .quote .title h3 { color: #222222; font-size: 24px; margin: 0 0 20px; } .quote .title p{ color: #848484; font-size: 18px; line-height: 28px; } .quote .quote-form { display: block; } .quote .quote-form .input-box { position: relative; margin-bottom: 30px; } .quote .quote-form .input-box input[type=text]{ width: 100%; border: 1px solid #f2f2f2; height: 50px; display: block; padding: 0 20px; color: #848484; font-size: 15px; font-weight: 400; border-radius: 0px; font-family: 'Roboto', sans-serif; transition: all 500ms ease; } .quote .quote-form button { display: block; width: 100%; padding: 19px 0 18px; } .quote .quote-form .input-box input[type=text]:focus{ border-color: #222222; } .appoinment .appoinment-form button:hover{} /*** ============================================= Newsletter Area Style ============================================= ***/ .newsletter-area { position: relative; display: block; background: #ffffff; border-top: 1px solid #f2f2f2; padding-top: 70px; padding-bottom: 95px; } .newsletter-title { position: relative; display: block; margin: 2px 0 1px; } .newsletter-title h3{ color: #222222; font-size: 18px; margin: 0 0 9px; } .newsletter-title span{} .newsletter-form{} .newsletter-form { position: relative; display: block; margin-left: 9px; } .newsletter-form input[type="text"], .newsletter-form input[type="email"]{ background: #ffffff; border: 1px solid #f2f2f2; color: #303030; display: block; font-size: 16px; height: 60px; margin-bottom: 0px; padding: 0 20px; max-width: 285px; width: 100%; float: left; transition: all 500ms ease; } .newsletter-form input[type="email"]{ border-left: none; } .newsletter-form button { margin-left: 30px; } /*** ============================================= Newsletter Area Style2 Style ============================================= ***/ .newsletter-area.style2{ position: relative; display: block; background: #fec144; border-top: 0px solid; padding-top: 80px; padding-bottom: 80px; } .newsletter-area.style2 .newsletter-form button { background: #222222; color: #ffffff; margin-left: 30px; } .newsletter-area.style2 .newsletter-title span { color: #222222; } /*** ============================================= Latest blog Area style ============================================= ***/ .latest-blog-area { background: #ffffff; position: relative; display: block; padding-top: 100px; padding-bottom: 60px; } .single-blog-post { position: relative; display: block; overflow: hidden; transition: all 0.5s ease-in-out 0.6s; margin-bottom: 40px; } .single-blog-post .img-holder { display: block; overflow: hidden; position: relative; border-radius: 5px 5px 0px 0; } .single-blog-post .img-holder img { transition: all 0.5s ease-in-out 0.6s; width: 100%; } .single-blog-post:hover .img-holder img { transform: scale(1.2, 1.2); } .single-blog-post .img-holder .author-box { position: absolute; left: 30px; bottom: 20px; height: 30px; z-index: 3; margin: 0; } .single-blog-post .img-holder .author-box .img-holder{ width: 30px; } .single-blog-post .img-holder .author-box .img-holder:before{ display: none; } .single-blog-post .img-holder .author-box .img-holder img{ transition: none; width: auto; } .single-blog-post:hover .img-holder .author-box .img-holder img{ transform: none; } .single-blog-post .img-holder .author-box .img-holder, .single-blog-post .img-holder .author-box .title-holder{ display: table-cell; vertical-align: middle; } .single-blog-post .img-holder .author-box .title-holder{ position: relative; padding-left: 10px; } .single-blog-post .img-holder .author-box .title-holder h4{ color: #ffffff; font-size: 15px; } .single-blog-post:hover .overlay-style-one{ opacity: 1; } .single-blog-post .overlay-style-one .box .content a span:before { display: inline-block; color: #ffffff; font-size: 30px; line-height: 30px; width: 30px; height: 30px; transform: scale(3); transition: all 0.9s ease-in-out 0.3s; opacity: 0; } .single-blog-post:hover .overlay-style-one .box .content a span:before{ transform: scale(1.0); opacity: 1; } .single-blog-post:hover .overlay-style-one .box .content a:hover span:before{ color: #fec144; } .single-blog-post .text-holder { display: block; transition: all 500ms ease; border: 1px solid #f2f2f2; padding: 31px 30px 40px; } .single-blog-post .text-holder .blog-title { position: relative; display: block; font-size: 18px; line-height: 26px; } .single-blog-post .text-holder .blog-title a{ color: #222222; transition: all 500ms ease; } .single-blog-post .text-holder .blog-title a:hover{ color: #fec144; } .single-blog-post .text-holder .post-date { position: relative; display: block; padding-left: 40px; line-height: 30px; z-index: 1; margin: 0 0 3px; } .single-blog-post .text-holder .post-date:before { position: absolute; top: 0; bottom: 0; left: 0; height: 1px; width: 30px; background: #e9e9e9; z-index: -1; content: ""; margin: 14px 0; } .single-blog-post .text-holder .post-date p{ color: #848484; font-size: 14px; margin: 0; } .single-blog-post .text-holder .text{ display: block; margin-top: 18px; } .single-blog-post .text-holder .text p{ margin: 0; } .single-blog-post .text-holder .meta-box { position: relative; display: block; } .single-blog-post .text-holder .meta-box .meta-info { display: block; overflow: hidden; box-shadow: 0px 0px 4px 2px rgba(247,247,247,1); padding: 10px 20px 9px; margin: 23px 0 0; } .single-blog-post .text-holder .meta-box .meta-info li { display: inline-block; float: left; line-height: 20px; margin-right: 20px; } .single-blog-post .text-holder .meta-box .meta-info li:last-child{ margin-right: 0; } .single-blog-post .text-holder .meta-box .meta-info li a{ color: #848484; font-size: 14px; font-weight: 400; text-transform: capitalize; font-family: 'Rubik', sans-serif; transition: all 500ms ease; } .single-blog-post .text-holder .meta-box .meta-info li a span:before{ position: relative; top: 2px; color: #fec144; font-size: 16px; display: inline-block; padding-right: 9px; transition: all 500ms ease; } .single-blog-post .text-holder .meta-box .meta-info li a:hover{ color: #fec144; } /*** ============================================= Latest blog Area Style2 style ============================================= ***/ .latest-blog-area.style2{ position: relative; display: block; } .single-blog-post.style2{ position: relative; display: block; overflow: hidden; } .single-blog-post.style2 .img-holder{ position: relative; display: block; border-radius: 5px; z-index: 2; } .single-blog-post.style2 .img-holder::before { background: rgba(0, 0, 0, 0.70); 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-blog-post.style2:hover .img-holder::before{ opacity: 1; } .single-blog-post.style2 .img-holder .author-box { position: absolute; left: 30px; top: 30px; height: 30px; z-index: 3; margin: 0; z-index: 3; } .single-blog-post.style2 .img-holder .overlay-content-box { position: absolute; left: 0; bottom: 42px; right: 0; text-align: center; display: block; padding: 0 25px; z-index: 3; } .single-blog-post.style2 .img-holder .overlay-content-box span{ position: relative; display: inline-block; background: #fec144; color: #222222; font-size: 14px; font-weight: 400; text-transform: uppercase; padding: 4px 10px 2px; } .single-blog-post.style2 .img-holder .overlay-content-box h3{ font-size: 18px; font-weight: 500; line-height: 26px; margin: 14px 0 7px; } .single-blog-post.style2 .img-holder .overlay-content-box h3 a{ color: #ffffff; } .single-blog-post.style2 .img-holder .overlay-content-box p{ color: #c2c2c2; font-size: 14px; font-weight: 400; margin: 0; } /*** ============================================= Brand Area Style ============================================= ***/ .brand-area{ position: relative; display: block; padding: 100px 0 60px; } .brand-area .brand { position: relative; display: block; overflow: hidden; } .brand-area .brand li { position: relative; display: inline-block; float: left; max-width: 270px; margin-right: 30px; width: 100%; text-align: center; margin-bottom: 40px; } .brand-area .brand li:last-child{ margin-right: 0; } .brand-area .brand li:before{ position: absolute; top: 0; right: -15px; width: 1px; height: 100%; background: #f2f2f2; content: ""; } .brand-area .brand li:last-child:before{ border: none; } .brand-area .brand li a{ display: block; } .brand-area .brand li a img{ width: auto; } .brand-area .brand li .title{ position: relative; display: block; padding-top: 15px; border-top: 1PX solid #F2F2F2; } .brand-area .brand li .title h3{ color: #222222; font-size: 18px; } /*** ============================================= Brand Area Style2 style ============================================= ***/ .brand-area.style2{ background: #f5f5f5; } .brand-area.style2 .brand li:before { background: #e9e9e9; } .brand-area.style2 .brand li .title { border-top: 1px solid #e9e9e9; } /*** ============================================= Footer area style ============================================= ***/ .footer-area { position: relative; display: block; background: #050709; padding-top: 80px; padding-bottom: 45px; } .single-footer-widget { overflow: hidden; } .single-footer-widget .title { position: relative; display: block; margin-top: -3px; margin-bottom: 34px; } .single-footer-widget .title h3 { color: #ffffff; font-size: 16px; line-height: 20px; font-weight: 500; text-transform: uppercase; } .single-footer-widget .footer-contact-info{ position: relative; display: block; } .single-footer-widget .footer-contact-info h3 { color: #ffffff; font-size: 20px; font-weight: 500; line-height: 30px; margin: -7px 0 24px; } .single-footer-widget .footer-contact-info .contact-info { position: relative; display: block; overflow: hidden; } .single-footer-widget .footer-contact-info .contact-info .single{ display: block; margin-bottom: 15px; } .single-footer-widget .footer-contact-info .contact-info .single:last-child{ margin-bottom: 0; } .single-footer-widget .footer-contact-info .contact-info .single span{ color: #ffffff; font-size: 13px; font-weight: 500; text-transform: uppercase; font-family: 'Rubik', sans-serif; } .single-footer-widget .footer-contact-info .contact-info .single p{ color: #c2c2c2; font-size: 16px; margin: 1px 0 0; } .single-footer-widget .footer-contact-info .contact-info .single .footer-social-links{ display: block; overflow: hidden; margin-top: 11px; } .single-footer-widget .footer-contact-info .contact-info .single .footer-social-links ul { line-height: 16px; overflow: hidden; } .single-footer-widget .footer-contact-info .contact-info .single .footer-social-links ul li{ display: inline-block; float: left; border-right: 1px solid #404244; margin-right: 10px; padding-right: 10px; } .single-footer-widget .footer-contact-info .contact-info .single .footer-social-links ul li:last-child{ margin: 0; padding: 0; border: none; } .single-footer-widget .footer-contact-info .contact-info .single .footer-social-links ul li a{ color: #c2c2c2; font-size: 16px; transition: all 500ms ease; } .single-footer-widget .footer-contact-info .contact-info .single .footer-social-links ul li a:hover{ color: #fec144; } .single-footer-widget .about-links{ position: relative; display: block; } .single-footer-widget .about-links li { line-height: 16px; margin-bottom: 22px; } .single-footer-widget .about-links li:last-chil{ margin-bottom: 0; } .single-footer-widget .about-links li a{ position: relative; color: #c2c2c2; font-size: 16px; font-weight: 400; transition: all 500ms ease; } .single-footer-widget .about-links li a:hover{ color: #fec144; padding-left: 20px; } .single-footer-widget .about-links li a:before { position: absolute; top: 3px; left: 2px; width: 1px; height: 13px; background: #fec144; content: ""; transform: rotate(15deg); opacity: 0; transition: all 0.3s ease-in-out 0.1s; } .single-footer-widget .about-links li a:hover:before{ opacity: 1; } .single-footer-widget .about-links li a:after { position: absolute; top: 3px; left: 7px; width: 1px; height: 13px; background: #fec144; content: ""; transform: rotate(15deg); opacity: 0; transition: all 0.4s ease-in-out 0.2s; } .single-footer-widget .about-links li a:hover:after{ opacity: 1; } .single-footer-widget .solutions-links{ position: relative; display: block; } .single-footer-widget .solutions-links li { line-height: 16px; margin-bottom: 22px; } .single-footer-widget .solutions-links li:last-chil{ margin-bottom: 0; } .single-footer-widget .solutions-links li a{ position: relative; color: #c2c2c2; font-size: 16px; font-weight: 400; transition: all 500ms ease; } .single-footer-widget .solutions-links li a:hover{ color: #fec144; padding-left: 20px; } .single-footer-widget .solutions-links li a:before { position: absolute; top: 3px; left: 2px; width: 1px; height: 13px; background: #fec144; content: ""; transform: rotate(15deg); opacity: 0; transition: all 0.3s ease-in-out 0.1s; } .single-footer-widget .solutions-links li a:hover:before{ opacity: 1; } .single-footer-widget .solutions-links li a:after { position: absolute; top: 3px; left: 7px; width: 1px; height: 13px; background: #fec144; content: ""; transform: rotate(15deg); opacity: 0; transition: all 0.4s ease-in-out 0.2s; } .single-footer-widget .solutions-links li a:hover:after{ opacity: 1; } .single-footer-widget .locations{ position: relative; display: block; overflow: hidden; margin-top: -4px; } .single-footer-widget .locations li { display: block; margin-bottom: 28px; } .single-footer-widget .locations li:last-child{ margin-bottom: 0; } .single-footer-widget .locations li h3{ color: #f2f2f2; font-size: 18px; font-weight: 400; margin: 0 0 14px; } .single-footer-widget .locations li p{ color: #c2c2c2; margin: 0; } /*** ============================================= Footer Bottom Area Style ============================================= ***/ .footer-bottom-area{ position: relative; display: block; background: #050709; border-top: 1px solid rgba(255, 255, 255, 0.13); padding: 41px 0; } .footer-bottom-area .copyright-text { margin: 0; } .footer-bottom-area .copyright-text p { color: #c2c2c2; font-size: 16px; font-weight: 400; margin: 0; line-height: 22px; } .footer-bottom-area .copyright-text p a { color: #ffffff; font-size: 18px; font-weight: 500; font-family: 'Rubik', sans-serif; transition: all 500ms ease; } .footer-bottom-area .copyright-text p a:hover{ color: #fec144; } .footer-logo { position: absolute; top: -11px; left: 0; right: 0; max-width: 250px; width: 100%; margin: 0 auto; display: block; z-index: 2; } .footer-logo a { display: block; text-align: center; } .footer-menu { position: relative; display: block; margin: 3px 0px 4px; } .footer-menu li{ display: inline-block; float: left; border-right: 1px solid #37393b; margin-right: 15px; padding-right: 15px; line-height: 16px; } .footer-menu li:last-child{ border-right: none; margin-right: 0; padding-right: 0; } .footer-menu li a{ color: #c2c2c2; font-size: 16px; } .footer-menu li a:hover{ color: #fec144; } /*** ============================================= About Area Style ============================================= ***/ .about-area{ position: relative; display: block; padding-bottom: 100px; z-index: 1; } .about-area::before { position: absolute; background: url(../images/pattern/about-area-bg.jpg); background-repeat: no-repeat; background-position: left bottom; content: ""; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } .about-area .content-box{ display: block; padding-top: 100px; padding-bottom: 80px; } .about-video-holder { position: relative; display: block; } .about-video-holder .video-holder { position: relative; display: block; overflow: hidden; max-width: 470px; width: 100%; } .about-video-holder .video-holder img { transform: scale(1); transition: all 0.5s ease 0s; width: 100%; } .about-video-holder .video-holder .overlay-gallery { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; transition: all 500ms ease; } .about-video-holder .video-holder .overlay-gallery .icon-holder{ display: table; height: 100%; width: 100%; text-align: center; } .about-video-holder .video-holder .overlay-gallery .icon-holder .icon{ display: table-cell; vertical-align: middle; text-align: center; } .about-video-holder .video-holder .overlay-gallery .icon-holder .icon .inner { width: 75px; height: 75px; display: inline-block; background: rgba(255, 255, 255, 0.97); border-radius: 50%; transition: all 0.5s ease-in-out 0s; } .about-video-holder .video-holder:hover .overlay-gallery .icon-holder .icon .inner{ background: rgba(255, 255, 255, 0.90); } .about-video-holder .video-holder .overlay-gallery .icon-holder .icon .inner a { width: 75px; height: 75px; display: block; border-radius: 50%; } .about-video-holder .video-holder .overlay-gallery .icon-holder .icon .inner a span:before { color: #fec144; font-size: 20px; display: block; padding: 27px 0 28px; } .about-video-holder .video-holder:hover .overlay-gallery { background-color: rgba(0, 0, 0, 0.40); } .about-video-holder .video-holder:hover img { transform: scale(1.1); } .about-text-holder{ position: relative; display: block; } .about-text-holder .sec-title { position: relative; margin-top: -4px; padding-bottom: 19px; } .about-text-holder .inner-content{ display: block; } .about-text-holder .inner-content h3{ color: #222222; font-size: 24px; line-height: 32px; margin: 0 0 27px; } .about-text-holder .inner-content p{ margin: 0 0 43px; } .about-text-holder .inner-content a{ padding: 18px 40px 18px; } .featured-items{ position: relative; display: block; } .single-featured-item{ position: relative; display: block; width: 100%; border: 1px solid #f2f2f2; border-right: none; overflow: hidden; } .single-featured-item .single-box { position: relative; display: inline-block; float: left; width: 50%; border-right: 1px solid #f2f2f2; background: #ffffff; padding: 49px 0 42px; } .single-featured-item .single-box .icon-holder { display: block; padding-bottom: 14px; } .single-featured-item .single-box .icon-holder span:before{ color: #c9c9c9; font-size: 65px; line-height: 65px; } .single-featured-item .single-box .title-holder{ display: block; } .single-featured-item .single-box .title-holder h3{ color: #222222; font-size: 18px; line-height: 26px; } .single-featured-item .single-box .overlay-content{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #fec144; opacity: 0; visibility: hidden; transition: .5s ease; transform: translate(0,-50px) scale(0.8); } .single-featured-item .single-box:hover .overlay-content { opacity: 1; visibility: visible; transform: translate(0,0px) scale(1); } .single-featured-item .single-box .overlay-content .box { display: table; height: 100%; width: 100%; } .single-featured-item .single-box .overlay-content .box .inner-content{ display: table-cell; text-align: center; vertical-align: middle; padding: 0 20px; } .single-featured-item .single-box .overlay-content .box .inner-content h3{ color: #222222; font-size: 18px; line-height: 26px; margin: 0 0 18px; } .single-featured-item .single-box .overlay-content .box .inner-content p{ color: #222222; margin: 0; } .featured-items .owl-theme .owl-nav { position: absolute; top: 33%; left: -25px; width: 100%; display: block; margin-top: 13px; } .featured-items .owl-theme .owl-nav .owl-prev { background: #fff none repeat scroll 0 0; border: 1px solid #f2f2f2; color: #303030; display: block; height: 50px; width: 50px; position: absolute; transition: all 700ms ease 0s; z-index: 10; margin: 0; border-radius: 50%; padding: 6px 0; } .featured-items .owl-theme .owl-nav .owl-next { background: #fff none repeat scroll 0 0; border: 1px solid #f2f2f2; color: #303030; display: block; height: 50px; width: 50px; position: absolute; z-index: 10; transition: all 700ms ease 0s; margin: 0; border-radius: 50%; padding: 6px 0; right: -50px; } .featured-items .owl-theme .owl-nav div .fa { font-size: 25px; display: block; text-align: center; line-height: 36px; } .featured-items .owl-theme .owl-nav .owl-prev:hover{ color: #fff; border-color: #fec144; background: #fec144; } .featured-items .owl-theme .owl-nav .owl-next:hover{ color: #fff; border-color: #fec144; background: #fec144; } /*** ============================================= Quote Area Style2 Style ============================================= ***/ .quote-area{ position: relative; display: block; background-attachment: fixed; background-position: center top; background-repeat: no-repeat; background-size: cover; padding: 100px 0 100px; z-index: 1; } .quote-area::before { position: absolute; background: rgba(0, 0, 0, 0.90); content: ""; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } .quote-area .sec-title .title{ margin: 0 0 8px; } .quote-area .sec-title .inner span{} .quote-left-content { position: relative; display: block; margin: 10px 0; } .quote-left-content .sec-title{ display: block; padding-bottom: 35px; } .quote-left-content .sec-title p{ color: #c2c2c2; margin: 27px 0 0; } .quote-left-content .inner-content{ display: block; overflow: hidden; } .quote-left-content .inner-content ul{ display: block; float: left; } .quote-left-content .inner-content ul.mar-right{ margin-right: 70px; } .quote-left-content .inner-content ul li{ color: #c2c2c2; font-size: 16px; line-height: 40px; } .quote-left-content .inner-content ul li span:before{ position: relative; top: 2px; color: #fec144; font-size: 18px; line-height: 18px; display: inline-block; padding-right: 15px; } .quote-left-content .button{ overflow: hidden; display: block; margin-top: 30px; } .quote-right-content .quote { position: relative; display: block; float: none; max-width: 100%; width: 100%; padding: 50px 50px 27px; } .quote-right-content .quote .sec-title{ padding-bottom: 32px; } .quote-right-content .quote .quote-form .input-box { position: relative; margin-bottom: 23px; } .quote-right-content .quote .quote-form .input-box input[type=text], .quote-right-content .quote .quote-form .input-box input[type=email]{ width: 100%; border: 1px solid #f2f2f2; height: 50px; display: block; padding: 0 20px; color: #848484; font-size: 15px; font-weight: 400; border-radius: 0px; font-family: 'Roboto', sans-serif; transition: all 500ms ease; } .quote-right-content .quote .quote-form button { display: block; margin-top: 7px; } /*** ============================================= Breadcrumb area style ============================================= ***/ .breadcrumb-area { position: relative; background-attachment: scroll; background-position: center top; background-repeat: no-repeat; background-size: cover; padding-top: 170px; z-index: 1; } .breadcrumb-area::before { background: rgba(0, 0, 0, 0.70) none repeat scroll 0 0; content: ""; height: 100%; left: 0; position: inherit; top: 0; width: 100%; z-index: -1; } .breadcrumb-area .inner-content{ position: relative; display: block; padding-bottom: 137px; } .breadcrumb-area .icon { display: block; margin-bottom: 20px; } .breadcrumb-area .icon span:before{ color: #fec144; font-size: 75px; line-height: 75px; } .breadcrumb-area .title { display: block; } .breadcrumb-area .title h1{ color: #ffffff; font-size: 48px; line-height: 56px; font-weight: 500; text-transform: capitalize; } .breadcrumb-area .breadcrumb-menu { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; padding-bottom: 28px; } .breadcrumb-area .breadcrumb-menu span:before{ position: relative; top: -4px; color: #fec144; font-size: 16px; line-height: 16px; display: inline-block; float: left; padding-right: 2px; } .breadcrumb-area .breadcrumb-menu ul { position: relative; display: inline-block; float: left; padding-left: 8px; } .breadcrumb-area .breadcrumb-menu ul li { position: relative; display: block; float: left; margin-right: 5px; padding-right: 10px; line-height: 12px; font-size: 16px; font-weight: 400; text-transform: capitalize; font-family: 'Rubik', sans-serif; transition: all 500ms ease; } .breadcrumb-area .breadcrumb-menu ul li:before { position: absolute; top: 0; bottom: 0; right: 0px; width: 5px; height: 1px; background: #ffffff; content: ""; margin: 6px 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: #c2c2c2; font-size: 16px; font-weight: 400; text-transform: capitalize; font-family: 'Rubik', sans-serif; transition: all 500ms ease; } .breadcrumb-area .breadcrumb-menu ul li.active{ color: #ffffff; } .breadcrumb-area .breadcrumb-menu ul li a:hover{ color: #ffffff; } /*** ============================================= Services Style1 Area Service Page style ============================================= ***/ .services-style1-area.service-page{ position: relative; display: block; padding-top: 100px; padding-bottom: 50px; } .services-style1-area.service-page .single-solution-style1 { position: relative; display: block; margin: 0; margin-bottom: 50px; } /*** ============================================= Slogan Area style ============================================= ***/ .slogan-area{ position: relative; display: block; background: #050709; padding: 88px 0 100px; } .slogan-area .inner-content{ position: relative; display: block; } .slogan-area .inner-content .count-box { position: relative; display: block; color: rgba(255, 255, 255, 0.10); font-size: 200px; font-weight: 700; line-height: 170px; text-transform: uppercase; font-family: 'Rubik', sans-serif; } .slogan-area .inner-content .overlay-text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 0 130px; margin: 35px 0; } .slogan-area .inner-content .overlay-text h1{ color: #ffffff; font-size: 36px; font-weight: 700; line-height: 46px; } /*** ============================================= Call To Action Area Service Page style ============================================= ***/ .other-service-area{ position: relative; display: block; background: #ffffff; padding-top: 100px; padding-bottom: 60px; z-index: 1; } .single-other-service { position: relative; display: block; border: 1px solid #f5f5f5; padding: 50px 40px 42px; margin-bottom: 40px; transition: all .4s ease-in-out; } .single-other-service:hover{ background: #f5f5f5; } .single-other-service .top{ position: relative; display: block; overflow: hidden; } .single-other-service .top .icon-holder{ width: 80px; } .single-other-service .top .icon-holder span:before { position: relative; display: block; width: 65px; height: 65px; background: #f2f2f2; border-radius: 50%; color: #222222; font-size: 30px; line-height: 30px; transition: all .4s ease-in-out; text-align: center; padding: 17px 0; } .single-other-service:hover .top .icon-holder span:before{ color: #ffffff; background: #fec144; } .single-other-service .top .icon-holder, .single-other-service .top .title-holder{ display: table-cell; vertical-align: middle; } .single-other-service .top .title-holder{ padding-left: 10px; } .single-other-service .top .title-holder h3{ color: #222222; line-height: 26px; } .single-other-service .text-holder{ position: relative; display: block; margin-top: 26px; } .single-other-service .text-holder p{ margin: 0 0 26px; } .single-other-service .text-holder a{ transition: all .5s ease-in-out; } .single-other-service:hover .text-holder a{ color: #fec144; } /*** ============================================= Caption Area style ============================================= ***/ .caption-area{ position: relative; display: block; background: #fec144; padding: 40px 0 40px; } .caption-title { position: relative; display: block; margin: 8px 0; } .caption-title h2{ color: #222222; font-size: 24px; line-height: 32px; } .request-button{} .request-button a { color: #222222; background: #ffffff; padding: 18px 30px 18px; } /*** ============================================= Single Service Area style ============================================= ***/ .single-service-area{ position: relative; display: block; padding: 100px 0 100px; } .sec-title-box { position: relative; display: block; overflow: hidden; padding-bottom: 30px; margin-top: -6px; } .sec-title-box h2{ display: block; color: #222222; font-size: 24px; line-height: 30px; margin: 0 0 18px; } .sec-title-box p{ margin: 0; } .single-service-top { position: relative; display: block; margin-bottom: 35px; margin-top: -9px; } .single-service-top h2 { position: relative; display: block; color: #222222; font-size: 30px; line-height: 40px; margin: 0 0 -55px; } .single-service-top .img-holder{ position: relative; display: block; } .single-service-top .img-holder img{ width: 100%; transition: all 0.4s ease-in-out 0s; } .single-service-top .img-holder .icon-box { position: relative; width: 85px; height: 85px; background: transparent; display: block; text-align: center; z-index: 2; float: right; top: 43px; right: 48px; } .single-service-top .img-holder .icon-box:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fec144; content: ""; z-index: -1; transform: rotate(45deg); } .single-service-top .img-holder .icon-box span:before { color: #222222; font-size: 50px; line-height: 50px; display: block; padding: 17px 0px; } .single-service-top .owl-dots { position: absolute; display: block !important; margin-top: 0 !important; bottom: 0; left: 0; right: 0; padding-bottom: 8px; } .single-service-top .owl-dots .owl-dot{ background-image:none; width: 10px; height: 10px; margin: 5px 5px; border: 2px solid #d5d5d5; padding:0px; background: transparent; border-radius:50%; transition: all 500ms ease; display: inline-block; } .single-service-top .owl-dots .owl-dot span{ display:none; } .single-service-top .owl-dots .owl-dot.active{ background:#fec144; border-color: #fec144; border-radius: 15px; } .single-service-top .owl-dots .owl-dot:hover{ background:#fec144; border-color: #fec144; } .single-service-text{ position: relative; display: block; overflow: hidden; margin-bottom: 37px; } .research-development { position: relative; display: block; overflow: hidden; margin-bottom: 53px; } .research-development ul{ display: block; overflow: hidden; } .research-development ul li{ position: relative; display: block; overflow: hidden; padding-left: 40px; margin-bottom: 20px; } .research-development ul li:last-child{ margin-bottom: 0; } .research-development ul li .icon { position: absolute; top: 3px; left: 0; } .research-development ul li .icon span:before{ color: #fec144; font-size: 20px; line-height: 20px; } .research-development ul li .text{ position: relative; display: block; } .research-development ul li .text h4{ color: #222222; font-size: 16px; display: block; margin: 0 0 11px; } .research-development ul li .text p{ margin: 0; } .graph-outer { max-width: 250px; width: 100%; margin: 0 auto; margin-top: 31px; } .single-service-text-box{ position: relative; display: block; overflow: hidden; background: #f5f5f5; width: 100%; border-radius: 5px; } .single-service-text-box:before{ position: absolute; left: 50%; top: 40px; bottom: 40px; width: 1px; content: ""; background: #e9e9e9; } .single-service-text-box .single-box { position: relative; display: block; width: 50%; padding: 35px 40px 33px; } .single-service-text-box .single-box h3{ color: #222222; font-size: 18px; margin: 0 0 19px; } .single-service-text-box .single-box p{ color: #848484; margin: 0; } .service-solution-box { position: relative; display: block; overflow: hidden; margin: 60px 0 60px; } .service-solution-box .sec-title-box{} .service-solution-box ul{ display: block; overflow: hidden; } .service-solution-box ul li { position: relative; display: block; overflow: hidden; padding-left: 95px; min-height: 95px; margin-bottom: 40px; } .service-solution-box ul li:last-child{ margin-bottom: 0; } .service-solution-box ul li .icon-holder { position: absolute; top: 0; left: 0; width: 95px; height: 95px; border: 1px solid #f2f2f2; border-radius: 50%; display: block; text-align: center; padding: 18px 20px; z-index: 1; } .service-solution-box ul li .icon-holder:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: #fec144; border-radius: 50%; z-index: -1; transform: scale(0); transition: all 500ms ease; } .service-solution-box ul li:hover .icon-holder:after{ transform: scale(1); } .service-solution-box ul li .icon-holder.one { padding: 18px 25px; } .service-solution-box ul li .icon-holder span:before{ color: #fec144; font-size: 55px; line-height: 55px; transition: all 500ms ease; transition-delay: .5s; } .service-solution-box ul li:hover .icon-holder span:before{ color: #ffffff; } .service-solution-box ul li .text-holder { position: relative; display: block; padding-left: 40px; margin: 4px 0; } .service-solution-box ul li .text-holder h3{ color: #222222; font-size: 18px; margin: 0 0 14px; } .service-solution-box ul li .text-holder p{ margin: 0; } .single-service-tab-box{ overflow: hidden; display: block; } .single-service-tab-box .sec-title-box { padding-bottom: 23px; } .single-service-tab-box .sec-title-box h2{ margin: 0; } .service-tab-box { } .service-tab-box .tab-menu { border-bottom: 1px solid #f4f4f4; overflow: hidden; } .service-tab-box .tab-menu li { display: inline-block; float: left; margin-bottom: 0px; margin-right: 3px; } .service-tab-box .tab-menu li span { background: #ffffff; border-top: 1px solid #f4f4f4; border-left: 1px solid #f4f4f4; border-right: 1px solid #f4f4f4; border-bottom: 1px solid #f4f4f4; border-radius: 0; margin-bottom: -1px; padding: 15px 30px 13px; color: #848484; font-size: 16px; font-weight: 500; text-transform: capitalize; transition: all 500ms ease; font-family: 'Rubik', sans-serif; position: relative; display: block; cursor: pointer; } .service-tab-box .tab-menu li.active span, .service-tab-box .tab-menu li:hover span{ background: #f4f4f4; color: #262626; border-left-color: #f4f4f4; border-top-color: #f4f4f4; border-right-color: #f4f4f4; border-bottom-color: #f4f4f4; } .service-tab-box .tab-content-box { background: #f4f4f4; padding: 29px 20px 20px; display: block; } .service-tab-box .tab-content-box .single-tab-content{} .service-tab-box .tab-content-box .single-tab-content .top-content { margin-bottom: 10px; } .service-tab-box .tab-content-box .single-tab-content .top-content p{} .single-service-sidebar{ position: relative; display: block; margin-left: 35px; padding: 49px 30px 50px; background: #f5f5f5; } .title-box{ position: relative; display: block; padding-bottom: 28px; } .title-box h3 { color: #222222; font-size: 18px; font-weight: 500; line-height: 16px; text-transform: capitalize; } .single-service-sidebar .single-sidebar{ position: relative; display: block; margin-bottom: 49px; } .single-service-sidebar .service-pages{} .single-service-sidebar .service-pages li{ position: relative; display: block; } .single-service-sidebar .service-pages li a{ position: relative; display: block; border-bottom: 1px solid #e9e9e9; padding: 19px 0px 17px; color: #222222; font-size: 16px; font-weight: 400; text-transform: capitalize; font-family: 'Rubik', sans-serif; transition: all 500ms ease; transition-delay: .1s; } .single-service-sidebar .service-pages li:first-child a{ border-top: 1px solid #e9e9e9; } .single-service-sidebar .service-pages li a:hover, .single-service-sidebar .service-pages li.active a{ color: #fec144; } .single-service-sidebar .service-pages li a:before { position: absolute; top: -1px; bottom: -1px; left: -30px; width: 2px; background: #fec144; content: ""; transition: all 500ms ease; opacity: 0; } .single-service-sidebar .service-pages li a:hover:before, .single-service-sidebar .service-pages li.active a:before{ opacity: 1; } .single-service-sidebar .our-materials { position: relative; display: block; overflow: hidden; } .single-service-sidebar .our-materials li { position: relative; display: block; margin-bottom: 20px; } .single-service-sidebar .our-materials li:last-child{ margin-bottom: 0; } .single-service-sidebar .our-materials li a { position: relative; display: block; padding: 12px 65px 10px; padding-right: 0; background: #ffffff; transition: all 500ms ease; } .single-service-sidebar .our-materials li a:before{ position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #fec144; content: ""; opacity: 0; transition: all 500ms ease; } .single-service-sidebar .our-materials li:hover a:before{ opacity: 1; } .single-service-sidebar .our-materials li a .icon-holder { position: absolute; top: 0px; left: 18px; bottom: 0; margin: 17px 0; } .single-service-sidebar .our-materials li a .icon-holder span:before{ color: #fec144; font-size: 35px; line-height: 35px; } .single-service-sidebar .our-materials li a .title-holder{} .single-service-sidebar .our-materials li a .title-holder h3 { color: #222222; font-size: 16px; font-weight: 400; line-height: 24px; transition: all 500ms ease; } .single-service-sidebar .our-materials li a:hover .title-holder h3{ color: #fec144; } .single-service-sidebar .why-service { position: relative; display: block; overflow: hidden; padding-top: 3px; } .single-service-sidebar .why-service li { position: relative; display: block; border-bottom: 1px solid #e9e9e9; margin-bottom: 19px; padding-bottom: 17px; } .single-service-sidebar .why-service li:last-child{ margin-bottom: 0; } .single-service-sidebar .why-service li a { position: relative; display: block; padding-left: 45px; } .single-service-sidebar .why-service li a .icon-holder { position: absolute; top: -1px; left: 0px; bottom: 0; } .single-service-sidebar .why-service li a .icon-holder span:before{ color: #c2c2c2; font-size: 30px; line-height: 30px; } .single-service-sidebar .why-service li a .title-holder{} .single-service-sidebar .why-service li a .title-holder h4 { color: #222222; font-size: 16px; font-weight: 400; line-height: 24px; transition: all 500ms ease; } .single-service-sidebar .why-service li a:hover .title-holder h4{ color: #fec144; } .sidebar-contact-box{ position: relative; display: block; overflow: hidden; background: #fec144; padding: 44px 30px 42px; } .sidebar-contact-box:before { position: absolute; top: 12px; right: -20px; font-family: 'icomoon'; content: "\e903"; color: rgba(5, 5, 5, 0.10); font-size: 120px; line-height: 100px; } .sidebar-contact-box h3{ color: #222222; font-size: 20px; line-height: 28px; margin: 0 0 23px; } .sidebar-contact-box a{ background: #050709; color: #ffffff; padding: 18px 30px 18px; width: 100%; } .sidebar-contact-box h4{ color: #222222; font-size: 16px; margin: 27px 0 0; } .sidebar-contact-box ul { position: relative; display: block; margin: 9px 0 0; } .sidebar-contact-box ul li{ color: #222222; font-size: 16px; font-weight: 400; line-height: 27px; } /*** ============================================= About Content Area style ============================================= ***/ .about-content-area{ position: relative; display: block; padding-top: 100px; padding-bottom: 35px; } .about-content-box { position: relative; display: block; margin-top: -6px; } .about-content-box h2{ color: #222222; font-size: 30px; line-height: 36px; margin: 0 0 27px; } .about-content-box p{} .about-content-box .bottom-text { display: block; margin-top: 28px; } .about-content-box .bottom-text h3{ color: #222222; font-size: 18px; margin: 0 0 19px; } .about-content-box .bottom-text p{} .about-content-box .download-box { position: relative; display: block; padding-left: 80px; margin-top: 35px; } .about-content-box .download-box .icon-holder { position: absolute; top: -2px; left: 0; } .about-content-box .download-box .icon-holder span:before{ font-size: 55px; line-height: 55px; color: #222222; } .about-content-box .download-box .title-holder{ position: relative; display: block; } .about-content-box .download-box .title-holder h3{ color: #222222; font-size: 18px; margin: 0 0 4px; } .about-content-box .download-box .title-holder span{} .about-right-img{ position: relative; display: block; } .about-right-img img{ width: 100%; } /*** ============================================= History Section style ============================================= ***/ .history-section{ position: relative; display: block; background: #f5f5f5; padding: 0px 0 0px; } .history-section .history-carousel{ position:relative; } .history-section .carousel-outer{ position:relative; } .history-section .carousel-outer:before{ position:absolute; content:''; left:-1000px; right: -10000px; top: 140px; height:1px; background-color:#e3e3e3; } .history-section .carousel-outer .thumbs-outer{ position:relative; overflow:hidden; } .history-section .history-carousel .thumbs-carousel { position: relative; max-width: 400px; margin: 0 auto; margin-bottom: 30px; text-align: center; } .history-section .history-carousel .thumbs-carousel:before{ position: absolute; bottom: 10px; left: 0px; width: 1px; height: 50px; background: #e3e3e3; content: ""; z-index: 3; } .history-section .history-carousel .thumbs-carousel:after{ position: absolute; bottom: 10px; right: 0px; width: 1px; height: 50px; background: #e3e3e3; content: ""; z-index: 3; } .history-section .history-carousel .thumbs-carousel .owl-stage-outer{ overflow:visible; } .history-section .history-carousel .thumbs-carousel li{ position: relative; color: #e9e9e9; font-size: 72px; font-weight: 500; cursor: pointer; line-height: 1em; text-align: center; padding: 0; transition: all 0.3s ease; display: inline-block; font-family: 'Rubik', sans-serif; } .history-section .history-carousel .thumbs-carousel li:before{ position: absolute; bottom: -76px; left: 10px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #e3e3e3; background: #f5f5f5; content: ""; z-index: 3; } .history-section .history-carousel .thumbs-carousel li:after{ position: absolute; bottom: -76px; right: 10px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #e3e3e3; background: #f5f5f5; content: ""; z-index: 3; } .history-section .history-carousel .thumbs-carousel .owl-item.active{ position: relative; } .history-section .history-carousel .thumbs-carousel .owl-item.active:before{ position: absolute; bottom: -76px; left: 50%; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fec144; background: #fec144; content: ""; z-index: 3; margin-left: -8px; } .history-section .history-carousel .thumbs-carousel .owl-item.active li{ position:relative; color: #fec144; } .history-section .history-carousel .thumbs-carousel .owl-nav { position: relative; height: 70px; margin: 34px 0 0; z-index: 999; } .history-section .history-carousel .thumbs-carousel .owl-nav .owl-prev { position: absolute; left: -385px; top: 0px; font-size: 22px; color: #d1d1d1; font-weight: 700; width: 70px; height: 70px; border-radius: 50%; border: 4px solid #e9e9e9; display: inline-block; background-color: #f5f5f5; transition: all 0.3s ease; margin: 0; padding: 20px 0; z-index: 999; } .history-section .history-carousel .thumbs-carousel .owl-nav .owl-next{ position: absolute; right: -385px; top: 0px; font-size: 22px; color: #d1d1d1; font-weight: 700; width: 70px; height: 70px; border-radius: 50%; border: 4px solid #e9e9e9; display: inline-block; background-color: #f5f5f5; transition: all 0.3s ease; margin: 0; padding: 20px 0; z-index: 999; } .history-section .history-carousel .thumbs-carousel .owl-nav .owl-prev:hover, .history-section .history-carousel .thumbs-carousel .owl-nav .owl-next:hover{ color:#222222; background: #fec144; border-color: #fec144; } .history-section .carousel-outer .content-carousel{ max-width: 950px; margin: 0 auto; } .history-section .carousel-outer .content-carousel .owl-item.active .content-inner{ position: relative; } .history-section .carousel-outer .content-slide{ position:relative; } .history-section .carousel-outer .content-carousel .owl-stage-outer { padding-top: 0px; } .history-section .carousel-outer .content-slide .content-inner{ position: relative; text-align: center; max-width: 950px; margin: 0 auto; padding: 33px 80px 33px; background-color:#fec144; } .history-section .carousel-outer .content-slide .content-inner .date{ color: #222222; font-size: 13px; font-weight: 500; text-transform: uppercase; font-family: 'Rubik', sans-serif; } .history-section .carousel-outer .content-slide .content-inner h3{ color: #222222; font-size: 20px; display: block; margin: 8px 0 20px; } .history-section .carousel-outer .content-slide .content-inner .text{ color: #222222; margin: 0; } .history-section .carousel-outer .content-carousel .owl-nav{ position:absolute; left: 0px; bottom: 50%; width: 100%; } .history-section .carousel-outer .content-carousel .owl-nav .owl-prev{ position: absolute; top: -21px; left: -62px; width: 42px; height: 42px; color: #d1d1d1; line-height:44px; text-align:center; border-radius:50%; font-weight:700; background-color: transparent; transition:all 0.3s ease; font-size: 20px; margin: 0; padding: 0; } .history-section .carousel-outer .content-carousel .owl-nav .owl-next{ position: absolute; top: -21px; right: -62px; width: 42px; height: 42px; color: #d1d1d1; line-height: 44px; text-align: center; border-radius: 50%; font-weight: 700; background-color: transparent; transition:all 0.3s ease; font-size: 20px; margin: 0; padding: 0; } .history-section .carousel-outer .content-carousel .owl-nav .owl-next:hover, .history-section .carousel-outer .content-carousel .owl-nav .owl-prev:hover{ color:#ffffff; background-color:#fec144; } /*** ==================================================================== Feedback Section ==================================================================== ***/ .choose-section{ position:relative; padding:45px 0px; } .choose-block{ position:relative; transition:all 0.3s ease; } .choose-block .inner-box{ position:relative; } .choose-block .inner-box .content-box { position: relative; text-align: center; padding: 60px 0px 53px; border-bottom: 3px solid #f2f2f2; border-radius: 3px; } .choose-block .inner-box .content-box .icon-holder{ position:relative; display: block; text-align: center; margin-bottom: 36px; transition:all 0.3s ease; } .choose-block .inner-box .content-box .icon-holder img{ width: auto; text-align: center; margin: 0 auto; } .choose-block .inner-box .content-box h3{ color: #222222; font-size: 20px; display: block; margin: 0 0 20px; } .choose-block .inner-box .content-box .text{ position: relative; display: block; } .choose-block .inner-box .content-box .text p{ margin: 0; } .choose-block .inner-box .content-box .read-more-button{ position:relative; margin-top:53px; display: none; margin-left: -30px; margin-right: -30px; transition: all 500ms ease; } .choose-block .inner-box .content-box .read-more-button a{ width: 100%; } .choose-section .inner-content{ overflow:hidden; } .choose-section .owl-carousel{ max-width:370px; margin:0 auto; width:100%; display:block; } .choose-section .owl-carousel .owl-stage-outer{ overflow: visible; padding: 0px 0px; } .choose-section .owl-carousel .owl-stage-outer .owl-item.active .choose-block{ transform: translateY(0px); -webkit-box-shadow: 0px -1px 6px 2px rgba(242,242,242,1); -moz-box-shadow: 0px -1px 6px 2px rgba(242,242,242,1); box-shadow: 0px -1px 6px 2px rgba(242,242,242,1); } .choose-section .owl-carousel .owl-stage-outer .owl-item.active .choose-block .inner-box .content-box{ padding: 60px 30px 0; border-bottom: 0px solid; } .choose-section .owl-carousel .owl-stage-outer .owl-item.active .choose-block .inner-box .content-box .read-more-button{ display: block; transition: all 500ms ease; } .choose-section .owl-dots{ display:none; } .choose-section .owl-theme .owl-nav { position: relative; width: 200px; display: block; margin: 35px auto 0; text-align: center; } .choose-section .owl-theme .owl-nav:before { position: absolute; top: 5px; left: 50%; width: 2px; height: 9px; background: #d5d5d5; content: ""; margin-left: -1px; } .choose-section .owl-theme .owl-nav [class*="owl-"] { background: transparent; color: #222222; font-size: 13px; width: 65px; height: 15px; margin: 0; padding: 0; border: 0px solid; transition: all 700ms ease 0s; } .choose-section .owl-theme .owl-nav [class*="owl-"] p { font-weight: 500; margin: 0; display: inline-block; float: right; text-transform: uppercase; font-family: 'Rubik', sans-serif; line-height: 15px; } .choose-section .owl-theme .owl-nav .owl-prev span:before { font-size: 20px; float: left; line-height: 15px; transform: rotate(180deg); } .choose-section .owl-theme .owl-nav .owl-next span:before{ font-size: 20px; float: right; line-height: 15px; } .choose-section .owl-theme .owl-nav .owl-next p{ float: left; } .choose-section .owl-theme .owl-nav .owl-prev { margin-right: 20px; } .choose-section .owl-theme .owl-nav .owl-next { margin-left: 20px; } .choose-section .owl-theme .owl-nav .owl-prev:hover{ color: #fec144; } .choose-section .owl-theme .owl-nav .owl-next:hover{ color: #fec144; } /*** ============================================= Team Area style ============================================= ***/ .slogan-area.style2{ background-attachment: scroll; background-position: center top; background-repeat: no-repeat; background-size: cover; padding: 96px 0 100px; position: relative; z-index: 1; } .slogan-area.style2::before { position: absolute; background: rgba(5, 7, 8, 0.90); content: ""; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } .slogan-area.style2 .inner-content .sec-title{ padding-bottom: 29px; margin-top: 0; } .slogan-area.style2 .inner-content .sec-title .inner{ line-height: 18px; } .slogan-area.style2 .inner-content .sec-title .inner .border1 { margin: 8px 0; } .slogan-area.style2 .inner-content .sec-title .inner .border2 { margin: 8px 0; } .slogan-area.style2 .inner-content .sec-title .inner span{ text-transform: capitalize; line-height: 18px; } .slogan-area .inner-content .inner-box { position: relative; display: block; } .slogan-area.style2 .inner-content .overlay-text h1 { color: #ffffff; font-size: 36px; font-weight: 500; line-height: 46px; } .slogan-area.style2 .slick-dots { position: relative; display: inline-block; top: 0px; margin-top: 26px; } /*** ============================================= Team Area style ============================================= ***/ .team-area { position: relative; padding-top: 90px; padding-bottom: 56px; } .single-team-member { position: relative; display: block; overflow: hidden; margin-bottom: 40px; transition: all 500ms ease; } .single-team-member .img-holder { position: relative; display: block; overflow: hidden; border-radius: 4px; transition: all 500ms ease; } .single-team-member .img-holder img{ transition: all 0.5s ease-in-out 0.6s; width: 100%; } .single-team-member:hover .img-holder img{ transform: scale(1.2, 1.2); } .single-team-member .img-holder .overlay-style-one{ position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; display: block; opacity: 0; text-align: center; transform: perspective(400px) rotateY(-90deg); transform-origin: right; transition: all 0.5s; background-color: rgba(0, 0, 0, 0.80); } .single-team-member:hover .img-holder .overlay-style-one{ opacity: 1; transform: perspective(400px) rotateY(0deg); } .single-team-member .img-holder .overlay-style-one .social-links { position: absolute; top: 40px; left: 20px; } .single-team-member .img-holder .overlay-style-one .social-links li{ display: block; margin-bottom: 10px; } .single-team-member .img-holder .overlay-style-one .social-links li:last-child{ margin-bottom: 0; } .single-team-member .img-holder .overlay-style-one .social-links li a i{ width: 35px; height: 35px; line-height: 35px; background: #ffffff; border-radius: 3px; color: #727272; font-size: 14px; transition: all 500ms ease; } .single-team-member .img-holder .overlay-style-one .social-links li a:hover i{ color: #222222; background: #fec144; } .single-team-member .name { position: relative; display: block; background: #ffffff; padding: 20px 0 0; z-index: 1; } .single-team-member .name span{ color: #fec144; font-weight: 500; transition: all 500ms ease; transition-delay: .5s; } .single-team-member .name h3{ display: block; color: #222222; font-size: 18px; font-weight: 500; margin: 3px 0 12px; transition: all 500ms ease; transition-delay: .4s; } .single-team-member .name .mail-box{ position: relative; display: block; height: 20px; } .single-team-member .name .mail-box a.btn-two{ position: absolute; top: 0; left: 0; bottom: 0; background: #ffffff; width: 100%; opacity: 1; transition: all 500ms ease; z-index: 2; } .single-team-member .name .mail-box a.btn-two span:before{ color: #727272; } .single-team-member .name .mail-box a.btn-three{ position: absolute; top: 0; left: 0; bottom: 0; background: #ffffff; width: 100%; opacity: 0; color: #848484; font-size: 14px; font-weight: 400; text-transform: none; font-family: 'Roboto', sans-serif; transition: all 500ms ease; } .single-team-member:hover .name .mail-box a.btn-three{ opacity: 1; } .single-team-member .name .mail-box a.btn-three span:before{ color: #fec144; } /*** ============================================= Case Studies Area style ============================================= ***/ .case-studies-area{ position: relative; display: block; padding: 100px 0 60px; } .single-case-studies { position: relative; display: block; margin-bottom: 40px; } .single-case-studies .img-holder{ position: relative; display: block; overflow: hidden; border-radius: 5px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; z-index: 1; } .single-case-studies .img-holder::before { background: rgba(0, 0, 0, 0.80); 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-case-studies:hover .img-holder::before{ opacity: 1; } .single-case-studies .img-holder img { width: 100%; transition: .5s ease; } .single-case-studies:hover .img-holder img { transform: translateX(0%) translateY(0px) scale(1.1); } .single-case-studies .read-more-button{ position: absolute; bottom: 0; right: 0; width: 60px; height: 60px; z-index: 3; text-align: center; } .single-case-studies .read-more-button a span:before { color: #222222; background: #ffffff; font-size: 20px; line-height: 20px; display: block; padding: 20px 0; border-top-left-radius: 5px; } .single-case-studies:hover .read-more-button a span:before { color: #fec144; } .single-case-studies .text-holder{ position: relative; display: block; background: #ffffff; padding: 36px 35px 27px; box-shadow: 0px 3px 7px 1px rgba(240,240,240,0.7); } .single-case-studies .text-holder h3{ color: #222222; font-size: 20px; margin: 0 0 15px; } .single-case-studies .text-holder p{ margin: 0; } .single-case-studies .text-holder .case-info{ position: relative; display: block; overflow: hidden; margin: 15px 0 0; } .single-case-studies .text-holder .case-info li{ line-height: 30px; } .single-case-studies .text-holder .case-info li span{ position: relative; top: -2px; color: #222222; font-size: 13px; font-weight: 500; text-transform: uppercase; display: inline-block; width: 50px; font-family: 'Rubik', sans-serif; } .single-case-studies .text-holder .case-info li b{ position: relative; top: -2px; color: #222222; font-size: 13px; font-weight: 500; display: inline-block; width: 20px; } /*** ============================================= Case Single Area style ============================================= ***/ .case-single-area{ position: relative; display: block; padding: 100px 0 53px; } .single-case-info { position: relative; display: block; margin-top: -6px; } .single-case-info h2{ color: #222222; font-size: 30px; line-height: 36px; margin: 0 0 21px; } .single-case-info ul{ display: block; overflow: hidden; } .single-case-info ul li{ line-height: 36px; } .single-case-info ul li span{ color: #222222; font-weight: 400; font-family: 'Rubik', sans-serif; display: inline-block; padding-right: 10px; } .single-case-info ul li .review-box { display: inline-block; margin: -4px 0; } .single-case-info ul li .review-box ul li{ line-height: 16px; } /*** ============================================= Case description Area style ============================================= ***/ .case-description-area{ position: relative; display: block; padding: 0 0 53px; } .case-description-content{ position: relative; display: block; } .case-description-content h3{ color: #222222; font-size: 24px; margin: 0 0 17px; line-height: 32px; } .case-description-content p{ margin: 0; } /*** ============================================= Challenge Solution Area style ============================================= ***/ .challenge-solution-area{ position: relative; display: block; padding: 0 0 100px; } .challenge-solution-area .single-box{ position: relative; display: block; border: 1px solid #f2f2f2; border-radius: 5px; padding: 32px 40px 27px; } .challenge-solution-area .single-box h3{ color: #222222; font-size: 24px; margin: 0 0 17px; line-height: 32px; } .challenge-solution-area .single-box p{ margin: 0; } .challenge-solution-area .single-box ul{ display: block; overflow: hidden; margin-top: 12px; } .challenge-solution-area .single-box li{ line-height: 36px; } .challenge-solution-area .single-box li i{ display: inline-block; padding-right: 18px; color: #fec144; font-size: 14px; } /*** ============================================= Main Project Area style ============================================= ***/ .main-project-area{ position: relative; display: block; background: #ffffff; padding: 100px 0 70px; } .single-project-item{ position: relative; display: block; overflow: hidden; margin-bottom: 30px; } .single-project-item .img-holder{ display: block; overflow: hidden; position: relative; border-radius: 5px; } .single-project-item .img-holder img{ transition: all 0.5s ease-in-out 0.6s; width: 100%; } .single-project-item:hover .img-holder img { transform: scale(1.2, 1.2); } .single-project-item:hover .overlay-style-one{ opacity: 1; } .single-project-item .img-holder .overlay-style-one .content{} .single-project-item .img-holder .overlay-style-one .content a { display: inline-block; width: 40px; height: 40px; color: #ffffff; font-size: 25px; line-height: 42px; font-weight: 700; transform: translateX(0%) translateY(-50%) scale(0.5); transition: all 0.7s ease 0s; opacity: 0; } .single-project-item .img-holder .overlay-style-one .content a span:before{ font-weight: 700; transition: all 500ms ease; } .single-project-item .img-holder .overlay-style-one .content a:hover span:before{ color: #fec144; } .single-project-item:hover .img-holder .overlay-style-one .content a { opacity: 1; transform: translateX(0) translateY(0%) scale(1); } .single-project-item .img-holder .overlay-style-one .title-holder{ position: absolute; left: 30px; right: 0; bottom: 13px; transform: translateY(15px); transition: all 0.4s ease-in-out 0.6s; opacity: 0; } .single-project-item:hover .img-holder .overlay-style-one .title-holder{ opacity: 1; transform: translateX(0) translateY(0%) scale(1); } .single-project-item .img-holder .overlay-style-one .title-holder h3{ font-size: 18px; margin: 0 0 4px; } .single-project-item .img-holder .overlay-style-one .title-holder h3 a{ color: #ffffff; transition: all 500ms ease; } .single-project-item .img-holder .overlay-style-one .title-holder h3 a:hover{ color: #fec144; } .single-project-item .img-holder .overlay-style-one .title-holder span{ color: #c2c2c2; } /*** ============================================= Main Project V2 Area style ============================================= ***/ .main-project-area.projectv2{ padding: 100px 0 100px; } .project-filter { position: relative; display: block; margin-bottom: 40px; } .project-filter li { display: inline-block; margin: 0 1px; } .project-filter li span { position: relative; color: #222222; cursor: pointer; display: block; font-size: 18px; line-height: 18px; font-weight: 400; text-transform: capitalize; transition: all 500ms ease 0s; font-family: 'Rubik', sans-serif; padding: 14px 20px 13px; border-radius: 5px; } .project-filter li.active span, .project-filter li:hover span { color: #222222; background: #fec144; } /*** ============================================= Faq Area style ============================================= ***/ .faq-area{ position: relative; display: block; padding: 100px 0 100px; } .faq-content-box { position: relative; display: block; margin-right: 30px; border-top: 1px solid #f2f2f2; } .faq-sidebar .sidebar-appoinment{ position: relative; display: block; } .faq-sidebar .sidebar-appoinment .title { display: block; background: #f5f5f5; text-align: center; padding: 16px 0 15px; } .faq-sidebar .sidebar-appoinment .title h3{ color: #222222; font-size: 18px; font-weight: 500; text-transform: uppercase; } .faq-sidebar .sidebar-appoinment .appoinment-form{ display: block; padding: 24px 30px 40px; } .faq-sidebar .sidebar-appoinment .appoinment-form .input-box { position: relative; display: block; margin-bottom: 14px; } .faq-sidebar .sidebar-appoinment .appoinment-form .input-box.marbtm7 { margin-bottom: 17px; } .faq-sidebar .sidebar-appoinment .appoinment-form .input-box input[type=text], .faq-sidebar .sidebar-appoinment .appoinment-form .input-box input[type=email], .faq-sidebar .sidebar-appoinment .appoinment-form .input-box textarea{ width: 100%; border: 0px solid #f2f2f2; border-bottom: 1px solid #f2f2f2; height: 45px; display: block; padding: 0 0px; color: #222222; font-size: 16px; font-weight: 400; border-radius: 0px; font-family: 'Rubik', sans-serif; transition: all 500ms ease; } .faq-sidebar .sidebar-appoinment .appoinment-form .input-box textarea{ height: 58px; } .faq-sidebar .sidebar-appoinment .appoinment-form button.btn-one { background: #fec144; display: block; width: 100%; padding: 21px 0 21px; border-radius: 5px; margin-top: 16px; } /*** ============================================= Testimonial page style ============================================= ***/ .testimonial-page{ padding-top: 100px; padding-bottom: 60px; } .single-testimonial-box { position: relative; display: block; margin-bottom: 75px; transition: all 500ms ease; } .single-testimonial-box:hover{ } .single-testimonial-box .text-holder { position: relative; display: block; border: 1px solid #f2f2f2; padding: 44px 70px 67px; transition: all 500ms ease; z-index: 2; } .single-testimonial-box:hover .text-holder { -webkit-box-shadow: 0px 1px 5px 3px rgba(242,242,242,1); -moz-box-shadow: 0px 1px 5px 3px rgba(242,242,242,1); box-shadow: 0px 1px 5px 3px rgba(242,242,242,1); } .single-testimonial-box .text-holder .text{ display: block; margin-bottom: 23px; } .single-testimonial-box .text-holder .text p{ color: #727272; font-size: 16px; margin: 0; } .single-testimonial-box .text-holder h3{ color: #222222; font-size: 18px; margin: 0 0 7px; } .single-testimonial-box .text-holder h3 span{ color: #fec144; font-size: 15px; } .single-testimonial-box .text-holder .review-box ul li { display: inline-block; float: none; margin-right: 0; margin: 0 0; } .single-testimonial-box .text-holder .quote-icon { position: absolute; top: 30px; left: 30px; z-index: -1; } .single-testimonial-box .img-holder{ position: absolute; bottom: -35px; left: 0; right: 0; width: 75px; height: 75px; margin: 0 auto; z-index: 9; } .single-testimonial-box .img-holder img{ border-radius: 50%; } /*** ============================================= Coming Soon Area style ============================================= ***/ .coming-soon-area { background-attachment: scroll; background-position: center top; background-repeat: no-repeat; background-size: cover; padding-top: 106px; padding-bottom: 347px; position: relative; z-index: 10; } .coming-soon-area .icon-holder{ position: absolute; top: 0; right: 0; } .coming-soon-area .icon-holder span:before { color: #f5c624; font-size: 445px; line-height: 445px; } .coming-soon-content{} .coming-soon-content .big-title{ color: #222222; font-size: 72px; line-height: 80px; font-weight: 700; text-transform: uppercase; font-family: 'Rubik', sans-serif; } .coming-soon-content .title { color: #222222; font-size: 24px; line-height: 32px; font-weight: 400; font-family: 'Rubik', sans-serif; margin: 7px 0 32px; } .coming-soon-content .subscribe-form form { position: relative; display: block; max-width: 570px; width: 100%; margin: 0 auto; } .coming-soon-content .subscribe-form form input[type=text] { background: transparent; border: 1px solid #eebc17; color: #222222; display: block; font-size: 15px; font-weight: 400; font-style: normal; height: 65px; padding-left: 20px; padding-right: 170px; position: relative; transition: all 500ms ease 0s; max-width: 100%; width: 100%; border-radius: 5px; } .coming-soon-content .subscribe-form form button { position: absolute; top: 0; right: 20px; bottom: 0; width: 140px; height: 45px; display: block; padding: 11px 0; background: #eebc17; text-align: center; color: #222222; font-size: 13px; font-weight: 500; text-transform: uppercase; transition: all 500ms ease 0s; border-radius: 5px; font-family: 'Rubik', sans-serif; margin: 10px 0; } .coming-soon-content .subscribe-form form input::-webkit-input-placeholder { color: #222222; } .coming-soon-content .subscribe-form form input:-moz-placeholder { color: #222222; } .coming-soon-content .subscribe-form form input::-moz-placeholder { color: #222222; } .coming-soon-content .subscribe-form form input:-ms-input-placeholder { color: #222222; } .coming-soon-content .subscribe-form form input[type=text]:focus { border: 1px solid #222222; color: #222222; } .coming-soon-content .subscribe-form form input[type=text]:focus + button, .coming-soon-content .subscribe-form form button:hover { background: #222222; color: #ffffff; } .timer-box { position: relative; display: block; overflow: hidden; padding: 25px 0; margin-top: 54px; } .countdown-timer {} .countdown-timer .default-coundown {} .countdown-timer .default-coundown .box {} .countdown-timer li { position: relative; display: inline-block; background: transparent; float: none; text-align: center; height: 130px; width: 130px; border: 1px solid transparent; margin: 0px 34px; padding: 18px 0; border-radius: 15px; z-index: 1; } .countdown-timer li:before{ position: absolute; top: 0px; left: 0px; right: 0; bottom: 0; height: 130px; width: 130px; display: block; background: #ffcf2e; border: 1px solid #eebc17; border-radius: 15px; transform: rotate(45deg); content: ""; z-index: -1; transition: all 500ms ease; } .countdown-timer li span.days, .countdown-timer li span.hours, .countdown-timer li span.minutes, .countdown-timer li span.seconds { position: relative; display: block; color: #222222; font-size: 48px; line-height: 60px; font-weight: 700; text-align: center; font-family: 'Rubik', sans-serif; } .countdown-timer li span.hours{} .countdown-timer li span.minutes{} .countdown-timer li span.seconds{} .countdown-timer li span.timeRef { color: #222222; font-size: 18px; line-height: 24px; font-weight: 500; text-transform: capitalize; margin-top: 1px; display: block; font-family: 'Rubik', sans-serif; } /*** ============================================= Blog Default Area style ============================================= ***/ #blog-area{ padding: 100px 0 100px; } .blog-default-area .single-blog-post { margin-bottom: 50px; } .blog-default-area .post-pagination { margin-top: -10px; } /*** ============================================= Blog large Area style ============================================= ***/ .blog-large-area{} .blog-large-area .blog-post { position: relative; display: block; z-index: 1; } .blog-large-area .single-blog-post { margin-bottom: 50px; } .blog-large-area .single-blog-post .img-holder .author-box { left: 30px; bottom: 30px; } .blog-large-area .single-blog-post .text-holder { position: relative; display: block; padding-left: 30px; padding-right: 30px; padding-top: 30px; padding-bottom: 40px; border: 1px solid #f2f2f2; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .blog-large-area .single-blog-post .text-holder .blog-title { display: block; font-size: 30px; line-height: 36px; } .blog-large-area .single-blog-post .text-holder .blog-title a{ color: #222222; } .blog-large-area .single-blog-post .text-holder .blog-title a:hover{ color: #fec144; } .blog-large-area .single-blog-post .text-holder .text { display: block; margin-top: 18px; } .blog-large-area .single-blog-post .text-holder .text p { margin: 0; } .blog-large-area .single-blog-post .text-holder .meta-box .meta-info { } .blog-large-area .post-pagination { display: block; margin-top: 0; } #blog-area .sidebar-wrapper { position: relative; display: block; } .sidebar-title { position: relative; display: block; overflow: hidden; margin-top: -3px; padding-bottom: 26px; } .sidebar-title h3{ color: #222222; font-size: 18px; line-height: 20px; } .sidebar-wrapper .single-sidebar { position: relative; display: block; overflow: hidden; } .sidebar-wrapper .single-sidebar form.search-form { position: relative; display: block; max-width: 370px; margin-bottom: 50px; } .sidebar-wrapper .single-sidebar .search-form input[type="text"] { position: relative; display: block; background: #fff; border: 1px solid #f2f2f2; color: #222222; display: block; font-size: 16px; font-weight: 400; height: 70px; letter-spacing: 1px; padding-left: 30px; padding-right: 80px; max-width: 370px; width: 100%; border-radius: 5px; transition: all 500ms ease 0s; } .sidebar-wrapper .single-sidebar .search-form button { position: absolute; top: 0; bottom: 0; right: 30px; display: block; background: #fec144; font-size: 14px; color: #222222; height: 35px; width: 35px; border: 1px solid #fec144; line-height: 35px; text-align: center; border-radius: 50%; transition: all 500ms ease 0s; margin: 17px 0; } .sidebar-wrapper .single-sidebar .search-form button i { font-size: 14px } .sidebar-wrapper .single-sidebar .search-form input[type="text"]:focus { border: 1px solid #fec144; background: #fff; color: #000000; } .sidebar-wrapper .single-sidebar .search-form input[type="text"]:focus + button, .sidebar-wrapper .single-sidebar .search-form button:hover { background: #fec144; border-color: #f2b028; color: #fff; } .single-sidebar .categories { position: relative; display: block; margin-top: -5px; padding-bottom: 33px; border-bottom: 1px solid #f2f2f2; margin-bottom: 40px; } .single-sidebar .categories li { position: relative; display: block; margin-bottom: 14px; } .single-sidebar .categories li:last-child{ margin-bottom: 0; } .single-sidebar .categories li a { position: relative; display: block; color: #848484; font-size: 16px; font-weight: 400; font-family: 'Roboto', sans-serif; transition: all 500ms ease; } .single-sidebar .categories li a span{ position: relative; display: inline-block; margin-left: 10px; text-align: center; width: 20px; height: 20px; background: #fec144; border-radius: 50%; color: #222222; font-size: 14px; line-height: 22px; transition: all 500ms ease; opacity: 0; } .single-sidebar .categories li a:hover span{ opacity: 1; } .single-sidebar .categories li a:hover{ color: #fec144; } .single-sidebar .popular-post { position: relative; display: block; overflow: hidden; border-bottom: 1px solid #f2f2f2; padding-bottom: 33px; margin-bottom: 40px; } .single-sidebar .popular-post li { position: relative; display: block; margin-bottom: 33px; padding-left: 85px; min-height: 100px; } .single-sidebar .popular-post li:last-child{ margin-bottom: 0; } .single-sidebar .popular-post li .img-holder { position: absolute; top: 0px; left: 0; width: 85px; height: auto; display: block; overflow: hidden; border-radius: 5px; } .single-sidebar .popular-post li .img-holder img { transition: all 0.4s ease-in-out 0.5s; width: 100%; transform: scale(1.1, 1.1); } .single-sidebar .popular-post li:hover .img-holder img { transition-delay: 0s; transform: scale(1.2, 1.2); } .single-sidebar .popular-post li .img-holder .overlay-style-one .box .content a i{ color: #fff; font-size: 16px; transition: all 500ms ease; } .single-sidebar .popular-post li:hover .img-holder .overlay-style-one{ opacity: 1; } .single-sidebar .popular-post li .img-holder .overlay-style-one .box .content a:hover i{ color: #fec144; } .single-sidebar .popular-post li .title-holder { padding-left: 20px; } .single-sidebar .popular-post li .title-holder h6 { position: relative; top: -1px; color: #fec144; font-size: 14px; margin: 0px 0 5px; } .single-sidebar .popular-post li .title-holder .post-title { position: relative; font-size: 16px; line-height: 26px; font-weight: 400; margin: 0 0 7px; transition: all 500ms ease; } .single-sidebar .popular-post li .title-holder .post-title a{ color: #222222; transition: all 500ms ease; } .single-sidebar .popular-post li .title-holder .post-title a:hover{ color: #fec144; } .single-sidebar .popular-post li .title-holder .post-date { display: block; color: #848484; } .single-sidebar .subscribe-form-box{ position: relative; display: block; margin-top: -5px; border-bottom: 1px solid #f2f2f2; margin-bottom: 40px; padding-bottom: 40px; z-index: 1; } .single-sidebar .subscribe-form-box:before { position: absolute; top: -40px; left: 0; right: 0; font-family: "Flaticon"; content: "\f110"; font-size: 130px; line-height: 130px; color: #f7f7f7; text-align: center; transform: rotate(30deg); z-index: -1; } .single-sidebar .subscribe-form-box p{ margin: 0 0 23px; } .single-sidebar .subscribe-form-box form { position: relative; display: block; max-width: 370px; overflow: hidden; } .single-sidebar .subscribe-form-box form input[type=text] { position: relative; display: block; float: left; background: transparent; border: 1px solid #f2f2f2; color: #848484; display: block; font-size: 15px; font-weight: 400; font-style: normal; height: 50px; padding-left: 15px; padding-right: 15px; transition: all 500ms ease 0s; max-width: 140px; width: 100%; border-radius: 5px 0 0 5px; } .single-sidebar .subscribe-form-box form input[type=email] { position: relative; display: block; float: left; background: transparent; border: 1px solid #f2f2f2; border-left: none; color: #848484; display: block; font-size: 15px; font-weight: 400; font-style: normal; height: 50px; padding-left: 15px; padding-right: 15px; transition: all 500ms ease 0s; max-width: 180px; width: 100%; } .single-sidebar .subscribe-form-box form button { position: absolute; top: 0; right: 0; width: 50px; height: 50px; background: #ffffff; color: #222222; display: block; padding: 13.5px 0; text-align: center; border: 1px solid #f2f2f2; border-left: none; transition: all 500ms ease 0s; border-radius: 0 5px 5px 0px; font-size: 20px; } .single-sidebar .subscribe-form-box form input[type=text]:focus { border-bottom-color: #fec144; } .single-sidebar .subscribe-form-box form input[type=email]:focus { border-bottom-color: #fec144; } .single-sidebar .subscribe-form-box form button:hover { background: #fec144; border-color: #fec144; color: #ffffff; } .single-sidebar .social-links { display: block; line-height: 16px; margin-top: -10px; border-bottom: 1px solid #f2f2f2; padding-bottom: 30px; margin-bottom: 40px; } .single-sidebar .social-links li{ position: relative; display: block; border-bottom: 1px solid #f2f2f2; line-height: 60px; } .single-sidebar .social-links li:last-child{ border-bottom: 0px solid; } .single-sidebar .social-links li a{ color: #848484; font-size: 16px; display: block; transition: all 500ms ease; } .single-sidebar .social-links li a .icon { position: relative; display: inline-block; float: left; width: 40px; height: 40px; border-radius: 50%; text-align: center; border: 1px solid transparent; background: transparent; color: #7c7b7b; font-size: 14px; line-height: 38px; margin: 10px 0; margin-right: 15px; transition: all 500ms ease; } .single-sidebar .social-links li a:hover .icon{ background: #fec144; border-color: #f2f2f2; color: #222222; } .single-sidebar .follow-us{ position: relative; top: -1px; display: block; color: #fec144; font-size: 16px; font-weight: 500; text-transform: capitalize; font-family: 'Rubik', sans-serif; } .single-sidebar .instagram { overflow: hidden; display: block; margin-top: -4px; margin-left: -10px; margin-right: -10px; border-bottom: 1px solid #f2f2f2; padding-bottom: 20px; margin-bottom: 40px; } .single-sidebar .instagram li { position: relative; display: inline-block; float: left; margin: 0 10px 20px; transition: all 0.5s ease 0s; } .single-sidebar .instagram li .img-holder { position: relative; display: block; overflow: hidden; border-radius: 5px; transition: all 0.5s ease 0s; z-index: 5; } .single-sidebar .instagram li:hover .img-holder{ border-radius: 0px; } .single-sidebar .instagram li .img-holder:before { position: absolute; top: 0; left: 0; background: #ffffff; height: 0; width: 100%; content: ""; transition: all 500ms ease; z-index: 3; opacity: 0; } .single-sidebar .instagram li:hover .img-holder:before{ height: 10px; opacity: 1; } .single-sidebar .instagram li .img-holder:after{ position: absolute; bottom: 0; left: 0; height: 0; width: 100%; background: #ffffff; content: ""; transition: all 500ms ease; z-index: 3; } .single-sidebar .instagram li:hover .img-holder:after{ height: 10px; } .single-sidebar .instagram li .img-holder .overlay-style-one:before{ position: absolute; top: 0; left: 0; background: #ffffff; height: 100%; width: 0px; content: ""; transition: all 500ms ease; z-index: 5; text-align: center; } .single-sidebar .instagram li:hover .img-holder .overlay-style-one:before{ width: 10px; } .single-sidebar .instagram li .img-holder .overlay-style-one:after{ position: absolute; top: 0; right: 0; background: #ffffff; height: 100%; width: 0px; content: ""; transition: all 500ms ease; z-index: 5; text-align: center; } .single-sidebar .instagram li:hover .img-holder .overlay-style-one:after{ width: 10px; } .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 .img-holder .overlay-style-one{ } .single-sidebar .instagram li .img-holder .overlay-style-one .box .content a i{ color: #fff; font-size: 16px; filter: alpha(opacity=0); opacity: 0; transform: scale(3); transition: all 0.3s ease-in-out 0.3s; z-index: 5; } .single-sidebar .instagram li:hover .img-holder .overlay-style-one .box .content a i{ filter: alpha(opacity=100); opacity: 1; transform: scale(1); transition-delay: 0.1s; } .single-sidebar .instagram li:hover .img-holder .overlay-style-one .box .content a:hover i{ color: #fec144; } .single-sidebar .instagram li:hover .img-holder .overlay-style-one { filter: alpha(opacity=100); opacity: 1; transition-delay: 0s; } .single-sidebar .instagram li:hover .img-holder img { transform: scale(1, 1); } .single-sidebar .archives-form-box{ position: relative; display: block; overflow: hidden; border-bottom: 1px solid #f2f2f2; padding-bottom: 33px; margin-bottom: 40px; } .single-sidebar .archives-form-box form { position: relative; display: block; overflow: hidden; max-width: 370px; } .single-sidebar .archives-form-box form .input-box.month{ max-width: 150px; width: 100%; float: left; } .single-sidebar .archives-form-box form .input-box.year{ max-width: 130px; width: 100%; float: left; margin-left: 20px; } .single-sidebar .archives-form-box form button{ position: absolute; top: 0; right: 0; width: 50px; height: 50px; border-radius: 5px; text-align: center; background: #f5f5f5; color: #222222; font-size: 13px; line-height: 50px; font-weight: 500; text-transform: uppercase; font-family: 'Rubik', sans-serif; transition: all 500ms ease; } .single-sidebar .archives-form-box form button:hover{ background: #fec144; color: #ffffff; } .single-sidebar .popular-tag { position: relative; display: block; overflow: hidden; margin-top: -5px; } .single-sidebar .popular-tag li { display: inline-block; float: left; margin-right: 18px; margin-bottom: 15px; } .single-sidebar .popular-tag li a { display: block; color: #848484; font-size: 16px; font-weight: 400; transition: all 500ms ease 0s; } .single-sidebar .popular-tag li.big a{ font-size: 24px; } .single-sidebar .popular-tag li a:hover{ color: #fec144; } /*** ============================================= Blog Single Area style ============================================= ***/ .blog-single-area{} .blog-single-area .blog-post { position: relative; display: block; } .blog-single-area .single-blog-post{ margin: 0; } .single-blog-post .top-box { position: relative; display: block; overflow: hidden; } .single-blog-post .top-box .author-box { position: relative; display: block; overflow: hidden; margin-bottom: 25px; } .single-blog-post .top-box .author-box .img-box{ width: 70px; } .single-blog-post .top-box .author-box .img-box img{ width: 100%; border-radius: 50%; } .single-blog-post .top-box .author-box .img-box, .single-blog-post .top-box .author-box .title-holder{ display: table-cell; vertical-align: middle; } .single-blog-post .top-box .author-box .title-holder{ padding-left: 20px; } .single-blog-post .top-box .author-box .title-holder h3{ color: #222222; font-size: 18px; } .single-blog-post .top-box .social-share-box{ position: relative; display: block; overflow: hidden; } .single-blog-post .top-box .social-share-box h3{ color: #222222; font-size: 18px; display: inline-block; float: left; } .single-blog-post .top-box .social-share-box ul { position: relative; display: inline-block; float: left; line-height: 16px; overflow: hidden; margin: 5px 0 0; padding-left: 10px; } .single-blog-post .top-box .social-share-box ul li{ display: inline-block; float: left; border-right: 1px solid #e9e9e9; margin-right: 10px; padding-right: 10px; } .single-blog-post .top-box .social-share-box ul li:last-child{ margin: 0; padding: 0; border: none; } .single-blog-post .top-box .social-share-box ul li a{ color: #727272; font-size: 16px; transition: all 500ms ease; } .single-blog-post .top-box .title-box-holder { position: relative; display: block; margin-top: -8px; } .single-blog-post .top-box .title-box-holder .post-date { position: relative; display: block; padding-left: 40px; line-height: 30px; z-index: 1; } .single-blog-post .top-box .title-box-holder .post-date:before { position: absolute; top: 0; bottom: 0; left: 0; height: 1px; width: 30px; background: #e9e9e9; z-index: -1; content: ""; margin: 14px 0; } .single-blog-post .top-box .title-box-holder .post-date p{ color: #848484; font-size: 14px; margin: 0; } .single-blog-post .top-box .title-box-holder .blog-title { position: relative; display: block; margin-top: 9px; color: #222222; font-size: 36px; line-height: 46px; } .single-blog-post .top-box .title-box-holder .meta-box { position: relative; display: block; } .single-blog-post .top-box .title-box-holder .meta-box .meta-info { display: block; overflow: hidden; margin: 16px 0 0; } .single-blog-post .top-box .title-box-holder .meta-box .meta-info li { display: inline-block; float: left; line-height: 20px; margin-right: 20px; } .single-blog-post .top-box .title-box-holder .meta-box .meta-info li:last-child{ margin-right: 0; } .single-blog-post .top-box .title-box-holder .meta-info li a{ color: #848484; font-size: 14px; font-weight: 400; text-transform: capitalize; font-family: 'Rubik', sans-serif; transition: all 500ms ease; } .single-blog-post .top-box .title-box-holder .meta-info li a span:before{ position: relative; top: 2px; color: #fec144; font-size: 16px; display: inline-block; padding-right: 9px; transition: all 500ms ease; } .single-blog-post .top-box .title-box-holder .meta-info li a:hover{ color: #fec144; } .single-blog-post .main-image-holder { position: relative; display: block; margin-top: 54px; } .single-blog-post .text{ position: relative; display: block; margin-top: 45px; margin-bottom: 36px; } .author-caption-box { position: relative; display: block; margin-bottom: 62px; } .author-caption-box .quote-icon{ display: block; text-align: center; } .author-caption-box .quote-icon span:before { color: #f7f7f7; font-size: 125px; line-height: 125px; margin: 5px 0; display: block; } .author-caption-box .text-holder { position: relative; display: block; } .author-caption-box .text-holder p{ color: #8c8c8c; font-size: 20px; line-height: 30px; margin: 0 0 19px; font-family: 'Rubik', sans-serif; } .author-caption-box .text-holder h3{ color: #222222; font-size: 18px; } .author-caption-box .text-holder h3 span{ color: #fec144; font-size: 15px; } .sustainability-goals-content{ position: relative; display: block; overflow: hidden; } .single-blog-title-box { position: relative; display: block; overflow: hidden; padding-bottom: 33px; margin-top: -6px; } .single-blog-title-box h2{ color: #222222; font-size: 24px; line-height: 30px; } .sustainability-goals-content .text { display: block; margin-top: -5px; margin-bottom: 28px; } .sustainability-goals-content .single-item { position: relative; display: block; margin-bottom: 28px; } .sustainability-goals-content .single-item img { border-radius: 6px; } .sustainability-goals-content ul{ position: relative; display: block; overflow: hidden; } .sustainability-goals-content ul li{ position: relative; display: block; line-height: 38px; padding-left: 25px; } .sustainability-goals-content ul li:before { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; height: 8px; background: #fec144; border-radius: 50%; content: ""; margin: 15px 0; } .blog-prev-next-option { position: relative; display: block; overflow: hidden; width: 100%; margin: 46px 0 0px; border-top: 1px solid #f2f2f2; padding-top: 40px; } .blog-prev-next-option:before{ position: absolute; left: 50%; top: 40px; bottom: 0px; width: 1px; background: #f2f2f2; content: ""; } .blog-prev-next-option .single{ position: relative; display: block; width: 50%; } .blog-prev-next-option .single.prev { position: relative; display: block; overflow: hidden; float: left; padding-left: 90px; min-height: 90px; } .blog-prev-next-option .single.prev .image-thumb{ position: absolute; top: 0; left: 0; width: 90px; height: 90px; } .blog-prev-next-option .single .image-thumb img{ width: 100%; border-radius: 6px; } .blog-prev-next-option .single.prev .title { padding-left: 30px; max-width: 370px; } .blog-prev-next-option .single .title { margin-top: -6px; } .blog-prev-next-option .single .title h3 { color: #222222; font-size: 18px; font-weight: 500; line-height: 26px; margin: 0 0 8px; } .blog-prev-next-option .single .title a{ color: #848484; font-size: 16px; font-weight: 400; transition: all 500ms ease; } .blog-prev-next-option .single .title a:hover{ color: #fec144; } .blog-prev-next-option .single .title a i{ display: inline-block; padding-right: 5px; font-size: 18px; } .blog-prev-next-option .single.next{ position: relative; display: block; overflow: hidden; float: right; padding-right: 90px; min-height: 90px; } .blog-prev-next-option .single.next .image-thumb{ position: absolute; top: 0; right: 0; width: 90px; height: 90px; } .blog-prev-next-option .single.next .title { max-width: 370px; padding-right: 30px; text-align: right; float: right; } .blog-prev-next-option .single.next .title a i { display: inline-block; padding-left: 5px; font-size: 18px; } .blog-single-area .inner-comment-box { position: relative; display: block; overflow: hidden; padding-top: 100px; padding-bottom: 30px; } .blog-single-area .inner-comment-box .single-comment-box { position: relative; display: block; padding-left: 80px; margin-bottom: 40px; } .blog-single-area .inner-comment-box .single-comment-box.mar-left{ margin-left: 50px; } .blog-single-area .inner-comment-box .single-comment-box .img-holder { position: absolute; left: 0; top: 0; width: 80px; height: 80px; } .blog-single-area .inner-comment-box .single-comment-box .text-holder { position: relative; display: block; margin-left: 30px; border: 1px solid #f2f2f2; padding: 36px 30px 31px; } .blog-single-area .inner-comment-box .single-comment-box .text-holder .top { position: relative; display: block; overflow: hidden; padding-bottom: 20px; } .blog-single-area .inner-comment-box .single-comment-box .text-holder .top .date h5 { color: #222222; font-size: 18px; font-weight: 500; } .blog-single-area .inner-comment-box .single-comment-box .text-holder .reply-button{ position: relative; display: block; overflow: hidden; } .blog-single-area .inner-comment-box .single-comment-box .text-holder .reply-button a{ color: #fec144; font-size: 13px; font-weight: 500; text-transform: uppercase; font-family: 'Rubik', sans-serif; } .blog-single-area .inner-comment-box .single-comment-box .text-holder .reply-button a span:before{ font-size: 15px; line-height: 15px; display: inline-block; padding-right: 9px; } .add-comment-box { position: relative; display: block; overflow: hidden; margin-top: 10px; } .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{ background: #fff none repeat scroll 0 0; border: 1px solid #f2f2f2; display: block; color: #848484; font-size: 15px; font-weight: 400; height: 55px; padding: 0 30px; width: 100%; margin-bottom: 35px; transition: all 500ms ease; } .add-comment-box #add-comment-form textarea { height: 150px; padding: 13px 30px; margin-bottom: 40px; } .add-comment-box #add-comment-form input[type="text"]:focus{ border-color: #fec144; } .add-comment-box #add-comment-form input[type="email"]:focus{ border-color: #fec144; } .add-comment-box #add-comment-form textarea:focus{ border-color: #fec144; } .add-comment-box #add-comment-form button { position: relative; display: block; width: 170px; height: 60px; line-height: 60px; border-radius: 5px; padding: 0; } .add-comment-box #add-comment-form button:hover{} /*** ============================================= Shop area style ============================================= ***/ #shop-area { padding-top: 100px; padding-bottom: 100px; } .main-shop-area{ position: relative; display: block; background: #ffffff; } #shop-area .shop-content { position: relative; display: block; } .showing-result-shorting { display: flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; align-items: center; padding-bottom: 13px; border-bottom: 1px solid #f2f2f2; margin-bottom: 40px; } .showing-result-shorting .showing{} .showing-result-shorting .shorting{ } .showing-result-shorting .showing p { color: #848484; font-size: 16px; font-weight: 400; margin: 0; } .single-product-item { position: relative; display: block; padding-bottom: 40px; } .single-product-item:hover{ box-shadow: 0px 3px 8px #f0f0f0; transition: all 500ms ease; } .single-product-item .inner-content { position: relative; display: block; border: 1px solid #f2f2f2; padding: 10px 0 35px; transition: all 500ms ease; } .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; } .single-product-item .title-holder span{} .single-product-item .title-holder h3{ font-size: 20px; font-weight: 500; margin: 3px 0 10px; line-height: 26px; } .single-product-item .title-holder h3 a{ color: #222222; transition: all 500ms ease; } .single-product-item .title-holder .rate{ color: #fec144; font-size: 15px; font-weight: 700; } .single-product-item .overlay-button-box { position: absolute; bottom: -10px; left: 0px; right: 0px; transform: scale(0); transition: all .5s ease-in-out; z-index: 3; } .single-product-item:hover .overlay-button-box{ transform: scale(1) } .single-product-item .overlay-button-box ul li { position: relative; display: inline-block; float: left; width: 134px; height: 60px; } .single-product-item .overlay-button-box ul li a { position: relative; display: block; background: #fec144; height: 60px; color: #222222; font-size: 13px; line-height: 60px; font-weight: 500; text-transform: uppercase; font-family: 'Rubik', sans-serif; } .single-product-item .overlay-button-box ul li a.style2{ background: #222222; color: #ffffff; } .main-shop-area .post-pagination { margin-top: 30px; } #shop-area .sidebar-wrapper { position: relative; display: block; } .single-sidebar .price-ranger { margin-top: 4px; } .single-sidebar .price-ranger .ui-widget-content { background: #efedea; border: none; height: 2px; } .single-sidebar .price-ranger .ui-slider-handle { background: #fec144 none repeat scroll 0 0; border: 2px solid #fec144; border-radius: 50%; height: 10px; margin-left: -4px; outline: medium none; width: 10px !important; cursor: pointer; } .single-sidebar .price-ranger .ui-slider-horizontal .ui-slider-handle { top: -4px; } .single-sidebar .price-ranger .ui-slider .ui-slider-range { background: #fec144; } .single-sidebar .price-ranger #slider-range { margin-left: 4px; margin-right: 6px; margin-top: 0; } .single-sidebar .price-ranger .ranger-min-max-block { margin-bottom: 0px; margin-top: 25px; } .single-sidebar .price-ranger .ranger-min-max-block input { display: inline-block; } .single-sidebar .price-ranger .ranger-min-max-block input[type="submit"] { float: left; margin-right: 10px; padding: 12px 0 12px; text-align: center; width: 90px; border: none; color: #ffffff; cursor: pointer; margin-top: 0; border-radius: 0; } .single-sidebar .price-ranger .ranger-min-max-block input[type="submit"]:hover{} .single-sidebar .price-ranger .ranger-min-max-block input[type="text"] { border: medium none; color: #848484; font-size: 16px; font-weight: 400; outline: medium none; text-align: right; width: 40px; } .single-sidebar .price-ranger .ranger-min-max-block input[type='text'].max {} .single-sidebar .price-ranger .ranger-min-max-block span { color: #848484; font-weight: 400; font-size: 16px; line-height: 40px; } /*** ============================================= Single Shop Area style ============================================= ***/ #shop-area.single-shop-area{ padding-bottom: 60px; } .single-shop-content .img-holder { margin-right: 50px; border: 1px solid #f2f2f2; } .single-shop-content .img-holder img{ width: 100%; } .single-shop-content .content-box { margin-left: -50px; } .single-shop-content .content-box h3 { color: #222222; font-size: 30px; font-weight: 500; margin: 0 0 21px; text-transform: capitalize; } .single-shop-content .content-box span.price { color: #727272; font-size: 22px; font-weight: 400; } .single-shop-content .content-box .review-box { margin: 6px 0 0; overflow: hidden; } .single-shop-content .content-box .review-box ul {} .single-shop-content .content-box .review-box ul li {} .single-shop-content .content-box .review-box ul li i { color: #fec144; } .single-shop-content .content-box .text { overflow: hidden; padding: 23px 0 15px; } .single-shop-content .content-box .location-box { margin: 5px 0 30px; } .single-shop-content .content-box .location-box p { color: #848484; font-size: 16px; margin: 0 0 13px; } .single-shop-content .content-box .location-box form input { border: 2px solid #f7f7f7; height: 40px; padding-left: 10px; padding-right: 10px; width: 170px; transition: all 500ms ease; margin: 0 0 10px; } .single-shop-content .content-box .location-box form input:focus{ border-color: #202020; } .single-shop-content .content-box .location-box form button { background: #f7f7f7 none repeat scroll 0 0; border: medium none; color: #303030; font-size: 14px; font-weight: 700; height: 40px; margin-left: 6px; padding: 0; text-align: center; text-transform: uppercase; transition: all 500ms ease 0s; width: 95px; position: relative; top: -1px; line-height: 40px; } .single-shop-content .content-box .location-box form button:hover{ background: #202020; color: #fff; } .single-shop-content .content-box .location-box form span { color: #fec144; } .single-shop-content .content-box .addto-cart-box {} .single-shop-content .content-box .addto-cart-box .input-group.bootstrap-touchspin { float: left; width: 46px; } .single-shop-content .content-box .addto-cart-box .bootstrap-touchspin .input-group-btn-vertical .btn { display: block; float: none; margin-left: 0px; position: relative; width: 100%; background: #efefef; border: 1px solid #efefef; color: #848484; padding: 12px 11px; cursor: pointer; } .single-shop-content .content-box .addto-cart-box .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up { border-radius: 0 } .single-shop-content .content-box .addto-cart-box .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down { border-radius: 0; margin-top: -2px; } .single-shop-content .content-box .addto-cart-box .bootstrap-touchspin .input-group-btn-vertical .btn.bootstrap-touchspin-up:before { content: "\f0d8"; font-family: FontAwesome; color: #848484; font-size: 14px; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 5px 5px 5px; } .single-shop-content .content-box .addto-cart-box .bootstrap-touchspin .input-group-btn-vertical .btn.bootstrap-touchspin-down:before { content: "\f0d7"; font-family: FontAwesome; color: #848484; font-size: 14px; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 2px 5px 8px; } .single-shop-content .content-box .addto-cart-box button.addtocart { height: 50px; width: 170px; margin-left: 43px; color: #fff; padding: 12px 0 12px; cursor: pointer; border-radius: 0; } .single-shop-content .content-box .addto-cart-box button.addtocart:hover{} .product-tab-box { position: relative; border: 1px solid #ececec; border-top: none; border-right: none; border-left: none; overflow: hidden; margin-top: 60px; } .product-tab-box .tab-btns { position: relative; z-index: 1; border-bottom: 1px solid #ececec; margin-bottom: 30px; } .product-tab-box .tab-btns .tab-btn { display: inline-block; float: left; margin-bottom: -1px; margin-right: 3px; } .product-tab-box .tab-btns .tab-btn span { background: #f7f7f7; border-top: 1px solid #ececec; border-left: 1px solid #ececec; border-right: 1px solid #ececec; border-bottom: 1px solid transparent; border-radius: 0; cursor: pointer; display: block; margin-right: 1px; padding: 15px 30px 13px; color: #303030; font-size: 18px; font-weight: 500; text-transform: capitalize; background: #f7f7f7; transition: all 500ms ease; font-family: 'Titillium Web', sans-serif; } .product-tab-box .tab-btns .tab-btn.active-btn span, .product-tab-box .tab-btns .tab-btn:hover span{ background: #ffffff; color: #fec144; border-left-color: #ececec; border-top-color: #ececec; border-right-color: #ececec; } .product-tab-box .tabs-content { position: relative; border-left: 1px solid #ececec; border-right: 1px solid #ececec; margin-top: -30px; padding: 35px 30px 40px; } .product-tab-box .tabs-content .tab{ position:relative; padding:0px; display:none; } .product-tab-box .tabs-content .tab.active-tab{ display:block; } .product-tab-box .tabs-content .review-box {} .product-tab-box .tabs-content .review-box .title { margin-bottom: 33px; } .product-tab-box .tabs-content .review-box .title h3 { color: #222222; font-size: 20px; font-weight: 400; text-transform: capitalize; } .product-tab-box .tabs-content .review-box .single-review-box { margin-bottom: 30px; padding-left: 60px; position: relative; } .product-tab-box .tabs-content .review-box .single-review-box .img-holder { left: 0; position: absolute; top: 0; } .product-tab-box .tabs-content .review-box .single-review-box .text-holder { border: 1px solid #ececec; margin-left: 20px; padding: 17px 20px 12px; } .product-tab-box .tabs-content .review-box .single-review-box .text-holder .top { margin: 0 0 10px; overflow: hidden; } .product-tab-box .tabs-content .review-box .single-review-box .text-holder .top .name h4 { color: #222222; font-size: 16px; font-weight: 500; margin: 0; text-transform: capitalize; } .product-tab-box .tabs-content .review-box .single-review-box .text-holder .top .review-box ul { margin-top: -2px; padding-left: 0px; position: relative; } .product-tab-box .tabs-content .review-box .single-review-box .text-holder .top .review-box ul li { display: inline-block; margin-right: 1px; } .product-tab-box .tabs-content .review-box .single-review-box .text-holder .top .review-box ul li i { color: #fec144; font-size: 14px; } .product-tab-box .tabs-content .review-box .single-review-box .text-holder .text p { margin: 0; line-height: 26px; } .product-tab-box .review-form { padding-top: 30px; } .product-tab-box .review-form .title { padding-bottom: 30px; } .product-tab-box .review-form .title h3 { color: #222222; font-size: 24px; font-weight: 500; text-transform: capitalize; } .product-tab-box .review-form .add-rating-box { margin: 0 0 20px; } .product-tab-box .review-form .add-rating-box .add-rating-title h4 { color: #848484; font-size: 16px; font-weight: 400; margin: 0 0 10px; font-family: 'Rubik', sans-serif; text-transform: none; } .product-tab-box .review-form .add-rating-box ul li { border-right: 1px solid #ebebeb; display: inline-block; line-height: 20px; margin-right: 10px; padding-right: 10px; } .product-tab-box .review-form .add-rating-box ul li:last-child{ margin-right: 0px; padding-right: 0px; border-right: 0px solid #ebebeb; } .product-tab-box .review-form .add-rating-box ul li a i { color: #d6d6d6; font-size: 12px; line-height: 20px; margin-right: 1px; opacity: 0.9; transition: all 500ms ease 0s; } .product-tab-box .review-form form .field-label p { color: #848484; font-size: 16px; font-weight: 400; margin: 0 0 3px; font-family: 'Rubik', sans-serif; } .product-tab-box .review-form form input[type="text"], .product-tab-box .review-form form input[type="email"], .product-tab-box .review-form form textarea { background: #fff; height: 50px; width: 100%; border: 1px solid #ececec; color: #252525; font-size: 14px; padding: 0 15px; margin-bottom: 20px; transition: all 500ms ease; } .product-tab-box .review-form form textarea { height: 110px; padding: 10px 15px; margin-bottom: 25px; } .product-tab-box .review-form form button { padding: 18px 40px 18px; border-radius: 0; } .product-tab-box .review-form .add-rating-box ul li:hover a i{ opacity: 1; color: #fec144; } .product-tab-box .review-form form input[type="text"]:focus{ border-color: #fec144; } .product-tab-box .review-form form input[type="email"]:focus{ border-color: #fec144; } .product-tab-box .review-form form textarea:focus{ border-color: #fec144; } .related-product { padding-top: 60px; } .related-product .title { padding-bottom: 30px; margin-top: -3px; } .related-product .title h3 { color: #222222; font-size: 24px; font-weight: 500; text-transform: capitalize; } .related-product .single-product-item {} /*** ============================================= Cart area style ============================================= ***/ .cart-area { padding-bottom: 100px; padding-top: 100px; } .cart-area .table-outer { overflow-x: auto; position: relative; width: 100%; } .cart-area .cart-table { min-width: 1024px; width: 100%; } .cart-area .cart-table .cart-header { background: #f7f7f7; color: #222222; font-family: 'Rubik', sans-serif; font-size: 18px; font-weight: 500; position: relative; text-transform: capitalize; width: 100%; } .cart-area .cart-table thead tr th { font-weight: 500; 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 #f7f7f7; } .cart-area .cart-table tbody tr td { color: #222222; font-family: 'Rubik', sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; min-width: 100px; padding: 27.5px 25px; } .cart-area .cart-table tbody tr .prod-column .column-box { min-height: 70px; position: relative; } .cart-area .cart-table tbody tr .prod-column .column-box .prod-thumb { width: 70px; border: 1px solid #f7f7f7; } .cart-area .cart-table tbody tr .prod-column .column-box .prod-thumb a { display: block; border-radius: 5px; } .cart-area .cart-table tbody tr .prod-column .column-box .prod-thumb img { display: block; max-width: 100%; border-radius: 5px; } .cart-area .cart-table tbody tr .prod-column .column-box .prod-thumb, .cart-area .cart-table tbody tr .prod-column .column-box .title{ display: table-cell; vertical-align: middle; } .cart-area .cart-table tbody tr .prod-column .column-box .title{ padding-left: 20px; } .cart-area .cart-table tbody tr .prod-column .column-box .title h3 { color: #222222; font-size: 18px; line-height: 20px; font-weight: 500; text-transform: capitalize; } .cart-area .cart-table tbody tr .qty { padding-right: 25px; width: 120px; } .cart-area .cart-table tbody tr .qty .input-group.bootstrap-touchspin { float: left; width: 46px; } .cart-area .cart-table tbody tr .qty .bootstrap-touchspin .input-group-btn-vertical > .btn { display: block; float: none; margin-left: 0px; position: relative; width: 100%; background: #efefef; border: 1px solid #efefef; color: #848484; padding: 12px 11px; cursor: pointer; } .cart-area .cart-table tbody tr .qty .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up { border-radius: 0 } .cart-area .cart-table tbody tr .qty .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down { border-radius: 0; margin-top: -2px; } .cart-area .cart-table tbody tr .qty .bootstrap-touchspin .input-group-btn-vertical > .btn.bootstrap-touchspin-up:before { content: "\f0d8"; font-family: FontAwesome; color: #848484; font-size: 14px; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 5px 5px 5px; } .cart-area .cart-table tbody tr .qty .bootstrap-touchspin .input-group-btn-vertical > .btn.bootstrap-touchspin-down:before { content: "\f0d7"; font-family: FontAwesome; color: #848484; font-size: 14px; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 2px 5px 8px; } .cart-area .cart-table tbody tr td.unit-price { padding-left: 40px; padding-right: 20px; } .cart-area .cart-table tbody .available-info { color: #848484; font-size: 16px; font-weight: 400; line-height: 20px; padding-left: 50px; position: relative; font-family: 'Rubik', sans-serif; } .cart-area .cart-table tbody .available-info .icon { background: #fec144; border-radius: 50%; color: #222222; font-size: 18px; height: 40px; left: 0; line-height: 40px; position: absolute; text-align: center; top: 0px; width: 40px; } .cart-area .cart-table tbody tr td.price { color: #727272; font-size: 18px; font-weight: 400; font-family: 'Rubik', sans-serif; } .cart-area .cart-table tbody tr .sub-total { color: #fec144; font-weight: 400; font-size: 18px; font-family: 'Rubik', sans-serif; } .cart-area .cart-table tbody tr td .remove{ } .cart-area .cart-table tbody tr td .remove .checkbox label { color: #848484; font-size: 18px; font-weight: 400; } .cart-area .cart-table tbody tr td .remove .checkbox label input[type="checkbox"] { display: inline-block; position: relative; top: 1px; } .cart-middle { padding-top: 30px } .cart-middle .apply-coupon { padding-left: 245px; position: relative; } .cart-middle .apply-coupon input[type="text"] { border: 2px solid #f7f7f7; color: #9e9e9e; font-size: 14px; font-weight: 400; height: 50px; left: 0; padding: 0 15px; position: absolute; text-transform: capitalize; top: 0; transition: all 500ms ease 0s; border-radius: 5px; width: 225px; } .cart-middle .apply-coupon input[type="text"]:focus { border: 2px solid #1d1d1d } .cart-middle .apply-coupon .apply-coupon-button button { padding: 18px 30px 18px; border-radius: 5px; cursor: pointer; } .cart-middle .update-cart button { background: #f7f7f7; padding: 18px 30px 18px; cursor: pointer; border-radius: 5px; color: #303030; } .cart-middle .update-cart button:hover{ background: #1D1D1D; color: #fff; } .cart-bottom { overflow: hidden; padding-top: 70px; } .shop-title-box { position: relative; display: block; overflow: hidden; margin-top: -6px; padding-bottom: 23px; } .shop-title-box h3{ color: #222222; font-size: 24px; line-height: 30px; } .cart-bottom .calculate-shipping {} .cart-bottom .calculate-shipping .ui-state-default .ui-icon { background: none } .cart-bottom .calculate-shipping .ui-state-default { background: #fff none repeat scroll 0 0; border: 2px solid #f7f7f7; border-radius: 0; color: #848484; font-size: 14px; font-weight: normal; height: 45px; margin-bottom: 17px; outline: medium none; width: 100%; } .cart-bottom .calculate-shipping .ui-selectmenu-button span.ui-icon { margin-top: 0; position: absolute; right: 0; top: 0; } .cart-bottom .calculate-shipping .ui-selectmenu-button span.ui-icon { border-left: 2px solid #f7f7f7; display: block; float: right; height: 41px; position: relative; text-indent: 0; top: 0; width: 43px; } .cart-bottom .calculate-shipping .ui-selectmenu-button span.ui-icon::before { color: #9b9b9b; content: "\f107"; font-family: FontAwesome; font-size: 20px; overflow: visible; position: absolute; right: 14px; top: 6px; } .cart-bottom .calculate-shipping .ui-selectmenu-button span.ui-selectmenu-text { display: block; line-height: 18px; overflow: hidden; padding: 12px 17px; text-align: left; } .cart-bottom .calculate-shipping input[type="text"] { border: 2px solid #f7f7f7; color: #848484; display: block; font-size: 14px; height: 45px; padding: 0 18px; width: 100%; margin-bottom: 30px; transition: all 500ms ease; } .cart-bottom .calculate-shipping input[type="text"]:focus { border: 2px solid #1d1d1d; } .cart-bottom .calculate-shipping button { color: #222222; background: #f7f7f7; font-weight: 500; padding: 18px 30px 18px; border-radius: 5px; cursor: pointer; } .cart-bottom .calculate-shipping button:hover{ background: #1d1d1d; color: #ffffff; } .cart-bottom button.checkout-btn{ margin-top: 30px; padding: 18px 30px 18px; border-radius: 5px; cursor: pointer; } /*** ============================================= Checkout Area style ============================================= ***/ .checkout-area { position: relative; display: block; padding-top: 100px; } .checkout-area .exisitng-customer { position: relative; display: block; background: #f7f7f7; 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: #fec144; content: ""; } .checkout-area .exisitng-customer h5{ color: #222222; font-size: 16px; font-weight: 400; } .checkout-area .exisitng-customer h5 a{ color: #fec144; font-weight: 400; display: inline-block; padding-left: 15px; } .checkout-area .coupon { position: relative; display: block; background: #f7f7f7; padding: 20px 28px 21px; margin-bottom: 58px; border-radius: 5px; } .checkout-area .coupon:before { position: absolute; top: 0; left: 0; width: 2px; height: 100%; background: #fec144; content: ""; } .checkout-area .coupon h5 { color: #222222; font-size: 16px; font-weight: 400; } .checkout-area .coupon h5 a { color: #fec144; font-weight: 400; display: inline-block; padding-left: 15px; } .checkout-area .form form .field-label { color: #222222; font-size: 15px; font-weight: 400; margin: 0 0 3px; text-transform: capitalize; font-family: 'Rubik', sans-serif; } .checkout-area .form form .field-input input[type="text"] { border: 1px solid #ececec; color: #848484; display: block; font-size: 16px; height: 48px; margin-bottom: 25px; padding: 0 15px; width: 100%; border-radius: 5px; transition: all 500ms ease; } .checkout-area .form form .field-input input[type="text"]:focus{ border: 1px solid #c8c8c8; } .checkout-area .create-acc .checkbox { margin: 7px 0 0; } .checkout-area .create-acc .checkbox label { color: #fec144; font-weight: 400; font-size: 16px; cursor: pointer; } .checkout-area .create-acc .checkbox input { position: relative; top: 1px; } .checkout-area .shipping-info input[type="checkbox"] { cursor: pointer; display: inline-block; margin: 0 0 0 20px; position: relative; top: 0px; vertical-align: middle; } .checkout-area .form form .field-input textarea { border: 1px solid #ececec; color: #848484; display: block; font-size: 16px; height: 124px; margin-bottom: 28px; padding: 10px 15px; width: 100%; transition: all 500ms ease; } .checkout-area .form form .field-input textarea:focus{ border-color: #c8c8c8; } .checkout-area .bottom { display: block; padding-top: 70px; padding-bottom: 100px; margin-top: 55px; border-top: 1px solid #f2f2f2; } .checkout-area .table { overflow-x: auto; position: relative; width: 100%; margin-bottom: 0; } .checkout-area .table .cart-table { min-width: auto; width: 100%; } .checkout-area .table .cart-table .cart-header { position: relative; color: #222222; font-size: 16px; background: #f5f5f5; text-transform: capitalize; width: 100%; font-weight: 500; font-family: 'Rubik', sans-serif; } .checkout-area .table .cart-table thead tr th { font-weight: 500; 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 #e9e9e9; } .checkout-area .table .cart-table tbody tr td { vertical-align: middle } .checkout-area .table .cart-table tbody tr td { min-width: 110px; padding: 25px 25px; border-top: none; } .checkout-area .table .cart-table tbody tr .product-column .column-box { min-height: 70px; } .checkout-area .table .cart-table tbody tr .product-column .column-box .prod-thumb { width: 70px; } .checkout-area .table .cart-table tbody tr .product-column .column-box .prod-thumb a { display: block; border: 1px solid #f2f2f2; } .checkout-area .table .cart-table tbody tr .product-column .column-box .prod-thumb img { display: block; max-width: 100%; } .checkout-area .table .cart-table tbody tr .product-column .column-box .prod-thumb, .checkout-area .table .cart-table tbody tr .product-column .column-box .product-title{ display: table-cell; vertical-align: middle; } .checkout-area .table .cart-table tbody tr .product-column .column-box .product-title{ padding-left: 20px; } .checkout-area .table .cart-table tbody tr .product-column .column-box .product-title h3 { color: #222222; font-size: 16px; font-weight: 500; text-transform: capitalize; } .checkout-area .table .cart-table tbody tr .qty { padding-right: 30px; width: 130px; } .checkout-area .table .cart-table tbody tr .qty .input-group.bootstrap-touchspin { float: left; width: 46px; } .checkout-area .table .cart-table tbody tr .qty .bootstrap-touchspin .input-group-btn-vertical > .btn { display: block; float: none; margin-left: 0px; position: relative; width: 100%; background: #efefef; border: 1px solid #efefef; color: #848484; padding: 12px 11px; cursor: pointer; } .checkout-area .table .cart-table tbody tr .qty .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up { border-radius: 0 } .checkout-area .table .cart-table tbody tr .qty .bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down { border-radius: 0; margin-top: -2px; } .checkout-area .table .cart-table tbody tr .qty .bootstrap-touchspin .input-group-btn-vertical > .btn.bootstrap-touchspin-up:before { content: "\f0d8"; font-family: FontAwesome; color: #848484; font-size: 14px; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 5px 5px 5px; } .checkout-area .table .cart-table tbody tr .qty .bootstrap-touchspin .input-group-btn-vertical > .btn.bootstrap-touchspin-down:before { content: "\f0d7"; font-family: FontAwesome; color: #848484; font-size: 14px; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 2px 5px 8px; } .checkout-area .table .cart-table tbody tr td.price { color: #fec144; font-size: 16px; font-weight: 400; } .cart-total-table { border: 1px solid #e9e9e9 } .cart-total-table li { border-bottom: 1px solid #e9e9e9 } .cart-total-table li:last-child { border-bottom: none } .cart-total-table li span.col.col-title { border-right: 1px solid #f7f7f7; color: #222222; display: block; float: left; font-size: 16px; font-weight: 500; line-height: 28px; padding: 10px 18px; position: relative; width: 50%; font-family: 'Rubik', sans-serif; } .cart-total-table li span.col { color: #848484; display: block; float: left; font-size: 16px; font-weight: 400; line-height: 28px; padding: 10px 18px; position: relative; width: 50%; font-family: 'Roboto', sans-serif; } .cart-total .payment-options { background: #ffffff none repeat scroll 0 0; margin-top: 30px; overflow: hidden; border: 1px solid #f2f2f2; padding: 23px 20px 35px; } .cart-total .payment-options .option-block { margin-bottom: 14px } .cart-total .payment-options .option-block .checkbox { margin: 0 0 5px; } .cart-total .payment-options .option-block .checkbox label { display: block; font-weight: 500; min-height: 20px; padding-left: 0px; margin: 0; } .cart-total .payment-options .option-block .checkbox label input { position: relative; top: 1px; } .cart-total .payment-options .option-block .checkbox label span { color: #222222; font-size: 16px; padding-left: 10px; font-weight: 500; font-family: 'Rubik', sans-serif; } .cart-total .payment-options .option-block .checkbox label span b { color: #222222; display: inline-block; font-size: 15px; font-weight: 400; padding-left: 25px; text-decoration: underline; } .cart-total .payment-options .option-block .text{ padding-left: 30px; } .cart-total .payment-options .option-block .text p { margin: 0; line-height: 28px; } .placeorder-button button { padding: 18px 35px 18px; margin-top: 20px; border-radius: 5px; cursor: pointer; } .placeorder-button button:hover{ } /*** ============================================= Login Register Area style ============================================= ***/ .login-register-area { position: relative; display: block; padding-top: 100px; padding-bottom: 93px; } .login-register-area .form form { width: 100%; } .login-register-area .form .input-field { position: relative; } .login-register-area .form .input-field input[type="text"] { border: 2px solid #f4f4f4; color: #848484; font-size: 16px; height: 50px; margin-bottom: 30px; padding-left: 15px; padding-right: 50px; width: 100%; transition: all 700ms ease 0s; } .login-register-area .form .input-field .icon-holder { position: absolute; right: 20px; top: 11px; } .login-register-area .form .input-field .icon-holder i { color: #999999; font-size: 14px; font-weight: 400; } .login-register-area .form button { margin-top: 10px; padding: 18px 25px 18px; cursor: pointer; } .login-register-area .form button:hover{ } .login-register-area .form .remember-text { margin-top: 19px; } .login-register-area .form .remember-text .checkbox label { color: #848484; font-size: 16px; font-weight: 400; margin: 0; cursor: pointer; } .login-register-area .form .remember-text .checkbox input { position: relative; top: 1px; } .login-register-area .form .remember-text .checkbox span { color: #303030; font-size: 16px; font-weight: 400; font-family: 'Rubik', sans-serif; } .login-register-area .form .social-icon { float: right; margin-right: -8px; margin-top: 15px; position: relative; } .login-register-area .form .social-icon .login-with { display: inline-block; left: -110px; position: absolute; top: 8px; } .login-register-area .form .social-icon li { display: inline-block; margin: 0 8px; } .login-register-area .form .social-icon li a i { background: #47588f none repeat scroll 0 0; border-radius: 50%; color: #fff; display: block; font-size: 14px; font-weight: 100; height: 40px; line-height: 24px; padding: 8px 0; text-align: center; transition: all 700ms ease 0s; width: 40px; } .login-register-area .form .social-icon li a i.twitter { background: #33ccfe none repeat scroll 0 0; } .login-register-area .form .social-icon li a i.gplus { background: #dd4b39 none repeat scroll 0 0; } .login-register-area .form a.forgot-password { color: #f3441e; float: right; font-weight: 500; margin: 20px 0 0; font-family: 'Rubik', sans-serif; } .login-register-area .form .right { display: block; overflow: hidden; margin-left: -20px; } .login-register-area .form .right h6 { float: left; color: #848484; font-size: 14px; font-weight: 400; margin-top: 28px; } .login-register-area .form .input-field input[type="text"]:focus{ border: 2px 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; } /*** ============================================= Contact Info Area style ============================================= ***/ .contact-info-area{ position: relative; padding: 100px 0 70px; } .contact-form { position: relative; display: block; } .contact-form .sec-title { padding-bottom: 32px; } .contact-form form{ position: relative; display: block; } .contact-form form input[type="text"], .contact-form form input[type="email"], .contact-form form textarea{ background: transparent; border: 1px solid #f2f2f2; color: #848484; display: block; font-size: 15px; height: 60px; margin-bottom: 30px; padding: 0 30px; border-radius: 5px; width: 100%; transition: all 500ms ease; } .contact-form form textarea{ height: 150px; border-radius: 5px; padding: 10px 20px; } .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 button { width: 100%; padding: 24px 0 23px; cursor: pointer; display: block; } .quick-contact-box { position: relative; display: block; margin-top: -100px; margin-bottom: -96px; margin-left: 30px; padding: 100px 70px 96px; padding-right: 0; z-index: 3; } .quick-contact-box:before { position: absolute; background: url(../images/pattern/quick-contact-box-bg.jpg); background-repeat: no-repeat; background-position: left bottom; background-size: cover; content: ""; top: 0; left: 0; bottom: 0; right: -375px; z-index: -1; } .quick-contact-box:after { position: absolute; background: rgba(254, 193, 71, 0.95); content: ""; top: 0; left: 0; bottom: 0; right: -375px; z-index: -1; } .quick-contact-box h3 { color: #222222; font-size: 24px; margin: -2px 0 33px; } .quick-contact-box .top{ position: relative; display: block; overflow: hidden; padding-bottom: 49px; } .quick-contact-box .top li{ display: block; } .quick-contact-box .top li .title{ display: block; } .quick-contact-box .top li .title h3{ color: #222222; font-size: 24px; font-weight: 400; margin: 0 0 10px; } .quick-contact-box .top li .text{ display: block; margin: 0 0 14px; } .quick-contact-box .top li .text p{ color: #222222; font-size: 16px; line-height: 26px; margin: 0; } .quick-contact-box .top li .get-direction{ display: block; } .quick-contact-box .top li .get-direction a:hover{ color: #ffffff; } .quick-contact-box .bottom{ position: relative; display: block; overflow: hidden; } .quick-contact-box .bottom li{ position: relative; display: block; margin-bottom: 15px; } .quick-contact-box .bottom li:last-child{ margin: 0; } .quick-contact-box .bottom li .title{ display: block; } .quick-contact-box .bottom li .title h5{ color: #222222; font-size: 13px; font-weight: 500; text-transform: uppercase; margin: 0 0 6px; } .quick-contact-box .bottom li .text{ display: block; } .quick-contact-box .bottom li .text p{ color: #222222; margin: 0; } /*** ============================================= Positive Career Area style ============================================= ***/ .positive-career-area { background-attachment: fixed; /* background-position: center bottom;*/ background-repeat: no-repeat; background-size: cover; padding-top: 100px; padding-bottom: 100px; position: relative; z-index: 1; } .positive-career-area:before{ position: absolute; background: rgba(5, 7, 8, 0.02); content: ""; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } .positive-career-content{ position: relative; display: block; background: #fec144; max-width: 570px; width: 100%; float: right; border-radius: 6px; text-align: center; padding: 60px 40px 52px; } .positive-career-content .icon{} .positive-career-content .icon span:before{ color: #222222; font-size: 80px; line-height: 80px; } .positive-career-content h1{ display: block; margin: 22px 0 16px; color: #222222; font-size: 36px; line-height: 42px; } .positive-career-content p{ color: #222222; margin: 0 0 25px; } /*** ============================================= Branches Section style ============================================= ***/ .branches-section{ position: relative; display: block; padding: 100px 0 60px; } .single-branches-box{ position: relative; display: block; margin-bottom: 40px; } .single-branches-box h3{ color: #222222; font-size: 20px; display: block; margin: 0 0 25px; } .single-branches-box ul{ position: relative; display: block; border: 1px solid #f2f2f2; border-radius: 6px; padding: 37px 40px 33px; padding-right: 20px; } .single-branches-box ul li{ display: block; margin-bottom: 20px; } .single-branches-box ul li:last-child{ margin-bottom: 0; } .single-branches-box ul li .title{ display: block; margin-bottom: 8px; } .single-branches-box ul li .title h5{ color: #222222; font-size: 13px; text-transform: uppercase; } .single-branches-box ul li .text{} .single-branches-box ul li .text p{ margin: 0; } .breadcrumb-area.style2::before { display: none; }