OwlCyberSecurity - MANAGER
Edit File: rsaddons.less
/*-------------------------------------------------------------- Heading css --------------------------------------------------------------*/ .prelements-heading{ .title-inner{ .sub-text{ font-weight: 600; margin: 0 0 10px; display: block; color: @secondaryColor; line-height: 28px; font-family: @titleFont; font-size: 15px; text-transform: uppercase; &.title-upper{ text-transform: uppercase; } } .title{ color: @titleColor; font-family: @titleFont; font-weight: 700; position: relative; &.title-upper{ text-transform: uppercase; } span.watermark { position: absolute; font-size: 200px; text-transform: uppercase; font-weight: 900; font-family: @titleFont; opacity: 0.05; width: 100%; left: 0; color: inherit; white-space: nowrap; vertical-align: middle; } span.watermark-animate { position: absolute; font-size: 130px; text-transform: uppercase; font-weight: 900; font-family: @titleFont; opacity: 0.05; width: 100%; left: 0; color: inherit; white-space: nowrap; vertical-align: middle; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; position:absolute; -webkit-animation: anim 8s infinite; animation: anim 8s infinite; animation-direction: alternate-reverse; -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */ animation-timing-function: linear; } } } &.style12{ .border-top12{ width: 50px; margin-bottom: 20px; display: block; } &.text-center{ .border-top12{ text-align: center; margin-left: auto; margin-right: auto; } } .title{ margin-bottom: 10px; } .sub-text { font-weight: 500; display: block; margin-bottom:25px; } } &.style11{ .sub-text{ font-family: @titleFont; } .title{ span.watermark { font-size: 180px; opacity: 0.08; } span{ display: block; font-size: 32px; font-weight: 600; } } .title-inner{ position: relative; &:before{ content: ""; position: absolute; top: 0; left: 0px; opacity: 0.5; width: 10px; height: 100%; } } &.text-center{ .title-inner{ position: relative; display: inline-block; &:before{ content: ""; position: absolute; bottom: 42px; left: 0; right: 0; opacity: 0.5; width: 50%; height: 10px; margin: 0 auto; display: block; top: auto; } } } } &.style10{ .title-inner{ .sub-text{ position: relative; display: inline-block; &:before{ content: '•'; position: absolute; top: 50%; left: -35px; color: transparent; text-shadow: 10px 0 @primaryColor, -10px 0 @primaryColor; color: @primaryColor; font-size: .8em; -webkit-transition: text-shadow 0.3s, color 0.3s; -moz-transition: text-shadow 0.3s, color 0.3s; transition: text-shadow 0.3s, color 0.3s; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); pointer-events: none; opacity: 1; } &:after{ content: '•'; position: absolute; top: 50%; right: -35px; color: transparent; text-shadow: 10px 0 @primaryColor, -10px 0 @primaryColor; color: @primaryColor; font-size: .8em; -webkit-transition: text-shadow 0.3s, color 0.3s; -moz-transition: text-shadow 0.3s, color 0.3s; transition: text-shadow 0.3s, color 0.3s; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); transform: translateY(-50%); pointer-events: none; opacity: 1; } } } } &.big{ .title-inner{ h2{ font-size: 36px; line-height: 44px; } } .description{ p{ font-size: 20px; line-height: 32px; } } } &.style4{ .title-inner{ .title{ margin-bottom: 0; } .title-img{ margin-bottom: 12px; } } } &.style2{ position: relative; margin-bottom: 23px; z-index: 1; .title { display: inline-block; position: relative; } h2{ margin-bottom: 12px; } .description{ p{ margin-bottom: 12px; } } &.light{ &:after{ background: #fff !important; } } } &.style3{ position: relative; padding-bottom: 12px; h2{ margin-bottom: 12px; } .description{ position: relative; padding-left: 80px; &:after{ content: ""; position: absolute; border: 0; width: 60px; height: 2px; background: @secondaryColor; z-index: 1; margin-left: 0; left: 0; top: 14px; } p{ margin-bottom: 12px; } } &.light{ .description{ &:after{ background: #fff !important; } } } } &.style8{ position: relative; padding-bottom: 12px; margin-bottom: 10px; .title-inner{ padding-left: 25px; position: relative; display: inline-block; .sub-text{ margin-bottom: 5px; } &:after{ content: ""; position: absolute; border: 0; width: 2px; height: 100%; background: @secondaryColor; z-index: 1; margin-left: 0; left: 0; top: 0; } } .description{ padding-left: 25px; position: relative; &:after{ content: ""; position: absolute; border: 0; width: 2px; height: 100%; background: @secondaryColor; z-index: 1; margin-left: 0; left: 0; top: 0; } } h2{ margin-bottom: 5px; } &.text-center{ .description{ padding-top: 15px; padding-left: 0px; &:after{ display: none; } } } &.light{ .title-inner{ &:after{ background: #fff; } } .description{ &:after{ background: #fff !important; } } } } &.style6{ .title-inner{ position: relative; padding-bottom: 12px; h2{ margin-bottom: 12px; } .sub-text{ position: relative; padding-left: 65px; color: @secondaryColor; &:after{ content: ""; position: absolute; border: 0; width: 50px; height: 2px; background: @primaryColor; z-index: 1; margin-left: 0; left: 0; top: 12px; } p{ margin-bottom: 12px; } } } &.text-center, &.text-right{ .title-inner{ .sub-text{ display: inline-block; } } } &.text-center{ .sub-text{ position: relative; padding-left: 0px; padding-top: 60px; color: @secondaryColor; &:after{ content: ''; width: 77px; height: 2px; position: absolute; left: 50%; top: 0; margin-top: -1px; width: 2px; height: 50px; } } } &.light{ .sub-text{ &:after{ background: #fff !important; } } } &.dark{ .sub-text{ &:after{ background: #232023 !important; } } } } &.style4{ .title-inner{ position: relative; padding-bottom: 12px; .title{ margin-top: 20px; margin-bottom: 12px; display: block; position: relative; &:before{ content: ""; position: absolute; border: 0; width: 65px; height: 5px; background: @secondaryColor; z-index: 1; margin-left: 0; left: 0; top: -28px; } } .sub-text{ position: relative; color: @primaryColor; display: inline-block; margin: 10px 0 0; p{ margin-bottom: 12px; } } } &.light{ .sub-text{ &:before, &:after{ background: #fff !important; } } } &.center{ .title-inner h2:before{ left: 50%; transform: translateX(-50%); } } &.right{ .title-inner h2:before{ left: auto; right: 0; } } &.text-center, &.text-right{ .title-inner{ .sub-text{ display: inline-block; } } } } &.style7{ .title-inner{ position: relative; padding-bottom: 12px; h2{ margin-bottom: 12px; } .sub-text{ position: relative; padding-right: 65px; display: inline-block; color: @secondaryColor; &:after{ content: ""; position: absolute; border: 0; width: 50px; height: 2px; background: @secondaryColor; z-index: 1; margin-left: 0; right: 0; top: 12px; } p{ margin-bottom: 12px; } } &.light{ .sub-text{ &:after{ background: #fff !important; } } } &.text-center, &.text-right{ .title-inner{ .sub-text{ display: inline-block; } } } } } &.style9{ .title-img{ margin-bottom: 15px; } .title-inner{ margin-bottom: 35px; } } } .list-style{ padding: 0; margin: 0; list-style: none; li{ position: relative; padding-left: 32px; margin-bottom: 5px; &:before{ content: "\f0a9"; font-family: FontAwesome; position: absolute; left: 0; top: 0; font-size: 20px; } } } /*-------------------------------------------------------------- Call to Actiobn --------------------------------------------------------------*/ .rs-cta { .description{ margin-top: 25px; font-size: 15px; line-height: 28px; font-weight: normal; p{ &:first-child{ margin: 0; } &:last-child{ margin: 0; } } ul{ margin: 0 0 0 18px; } } .title-wrap{ .exp-title{ font-size: 35px; line-height: 40px; margin-bottom: 0px; text-align: left; } .eta-subtitle{ margin-bottom: 0; margin-top: 10px; line-height: 1.4; text-transform: uppercase; } } .button-wrap{ .cta-hints{ margin-bottom: 0; margin-top: 10px; margin-right: 10px; } } .style1{ .hidden-md{ padding-right: 40px; } .title-wrap{ .eta-subtitle{ margin-top: 15px; margin-bottom: 7px; } .description{ margin-top: 18px; } } .eta-subtitle{ text-transform: none; } } .style2{ text-align: center; .title-wrap{ padding: 25px 0 10px; max-width: 650px; margin: 0 auto; } .eta-subtitle{ font-weight: 500; } .button-wrap{ margin-bottom: 10px; margin-top: 15px; } } &.text-left{ .style2{ text-align: left; .title-wrap{ h2{ text-align: left; } } } ul.stylelisting{ list-style-type: none; li{ position: relative; padding-left: 22px !important; line-height: 34px; border: none !important; &:before{ position: absolute; top: 0; left: 0; z-index: 0; content: "\f054"; font-family: 'FontAwesome'; color: #fff; font-size: 12px; } } } } &.text-right{ .style2{ text-align: right; .title-wrap{ h2{ text-align: right; } } } } .style2{ .title-wrap { .eta-subtitle{ margin-top: 10px; margin-bottom: 10px; font-family: @titleFont; } .exp-title{ text-align: center; position: relative; z-index: 1; } .description{ margin-top: 15px; } } } } .rs-cta.rs-cat-style3{ padding-bottom: 37px; .pry-btn{ height: 55px; line-height: 52px; border-radius: 30px; text-align: center; display: inline-block; color: #ffffff; padding: 0 50px; margin-top: 15px; position: relative; font-weight: 600; font-size: 15px; text-transform: uppercase; z-index: 1; background: @primaryColor; border: 2px solid #ffffff; &:hover{ border-width: 2px; background: @primaryColor; opacity: 0.8; border-color: #fff; } } .cta-wrap{ .title-wrap{ .button-wrap{ padding-top:20px; } } } } .rs-cta.rs-ctabg-style3{ .description{ margin-top: 10px; } .pry-btn{ height: 55px; line-height: 52px; text-align: center; display: inline-block; color: #ffffff; padding: 0 30px; margin-top: 15px; position: relative; font-weight: 600; font-size: 15px; text-transform: uppercase; z-index: 1; background: @primaryColor; border: 2px solid #ffffff; &:hover{ border-width: 2px; background: @primaryColor; opacity: 0.8; border-color: #fff; } } .cta-wrap{ .title-wrap{ .button-wrap{ padding-top:20px; } } } } /*-------------------------------------------------------------- services css --------------------------------------------------------------*/ .rs-services-default{ .services-wrap { transition: all .5s ease; .services-item{ margin-bottom: 40px; .services-icon{ font-size: 60px; line-height: 60px; width: 100%; position:relative; i{ color: @secondaryColor; } &:hover{ background-position: 20px -30px; } } h4{ margin-bottom: 0; font-size: 16px; text-transform: lowercase; font-weight: 400 !important; } .services-title{ font-size: 16px; margin: 0 0 5px; font-weight: 600 !important; line-height: 20px !important; } } } &.services-center{ .services-icon{ display: block; font-size: 40px; float: none; top: 8px; text-align: center; i{ margin: 0 auto; } } .services-desc{ width: 100%; text-align: center; } } &.services-right{ .services-icon{ display: block; font-size: 40px; float: none; width: 100%; text-align: right; i{ margin: 0 auto; margin-right: 0; } } .services-desc{ width: 100%; text-align: right; } } .services-item{ &.img-left{ display: flex; vertical-align: top; margin-bottom: 0; .services-icon{ float: left; width: 150px; &:after{ background: @secondaryColor; width: 40px; height: 40px; position: absolute; left: 36%; top: 30px; content: ""; display: block; opacity: 0.1; } img{ padding-right: 5px; } } .services-desc{ padding-left: 30px; float: left; padding-top: 10px } } &.img-right{ .services-icon{ float: right; width: 30%; } .services-desc{ padding-right: 25px; float: left; width: 70%; } } &.img-center{ float: none; width: inherit; .services-icon{ margin-bottom: 20px; } } } } .service-home{ .services-wrap{ .services-item{ .services-icon{ &:before{ content: ""; position: absolute; top: 35px; left: 0; right: 0; width: 0px; height: 0px; transition: all .5s ease; border-right: 60px solid transparent; border-top: 60px solid @primaryColor; border-left: 60px solid @primaryColor; border-bottom: 60px solid @primaryColor; border-top-left-radius: 60px; border-top-right-radius: 60px; border-bottom-left-radius: 60px; opacity: .05; transform: rotate(-90deg); z-index: -1; border-bottom-right-radius: 60px; } } } &:hover{ box-shadow: 0 0 50px #eee; .services-icon{ &:before{ left:150px; } } } } } .middle-column-shadow{ .rs-services-default .services-wrap{ box-shadow: 0 0 150px #eee; } } .service_box{ .rs-services-default { .services-wrap { .services-item { margin-bottom: 25px; .services-title{ font-weight: 400 !important; } p{ margin: 0; } .readon{ background: #ffffff; color: @primaryColor; border-color: #ffffff; margin-top: 15px; i:before{ font-size: 20px; margin-right: 10px; position: relative; top: 3px; } a{ color: #ffffff; } } } } } } .rs-services1{ .services-title { font-size: 15px; font-family: @titleFont; font-weight: 600; } .services-wrap { .services-item{ border-bottom: none; margin: 0; padding: 5px 0 32px; .services-icon{ font-size: 30px; width: 100%; i{ width: 60px; height: 60px; line-height: 60px; -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; display: block; } } .services-desc{ width:100%; .services-title{ margin: 28px 0 10px; } } &:hover{ .services-title a{ color: @hoverColor; } } } } &.services-center{ .services-item{ position: relative; padding: 0px 20px 14px; z-index: 110; overflow: hidden; transition: all 0.6s ease 0s; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.05); margin-bottom: 30px; } .services-title { margin: 0 0 12px !important; } } &.services-left{ .services-item { position: relative; z-index: 110; overflow: hidden; transition: all 0.6s ease 0s; margin-bottom: 30px; .services-title { font-weight: 600 !important; line-height: 24px; } .services-icon{ position: relative; display: inline-block; font-size: 36px; top: 0; text-align: left; i{ width: auto; height: auto; } } .services-desc{ position: relative; float: right; text-align: left; .services-title{ margin-top: 0; } } } } &.services-right{ .services-item { position: relative; padding: 25px 25px 2px 10px; z-index: 110; overflow: hidden; transition: all 0.6s ease 0s; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.05); margin-bottom: 30px; .services-title { font-size: 17px; font-weight: 500 !important; line-height: 24px; } .services-icon{ position: relative; display: inline-block; font-size: 36px; float: left; width: 20%; top: 0; text-align: center; } .services-desc{ position: relative; float: right; text-align: left; width: 78%; line-height: 25px; padding-left: 50px; font-size: 14px; .services-title{ margin-top: 0; } } } } &.services-right{ .services-item { .services-icon{ float: right; } .services-desc{ float: left; } } } &.services-center{ .services-icon{ display: block; font-size: 36px; float: none; width: 100%; top: 8px; text-align: center; i{ margin: 0 auto; } } .services-desc{ float: none; width: 100%; text-align: center; } } &.services-right{ .services-icon{ display: block; font-size: 36px; float: none; width: 100%; top: 8px; text-align: right; i{ margin: 0 auto; margin-right: 0; } } .services-desc{ float: none; width: 100%; text-align: right; } } } .rs-header-title.header-right { .title{ text-align: right; } } .services-style-2{ border-radius: 6px; transition: all .5s ease; .services-wrap{ .services-item{ position: relative; transition: all .5s ease; top: 0; .services-icon{ img{ height: 50px; } } .services-desc{ transition: all .5s ease; color: #fff; padding: 0 15px; max-width: 530px; margin: 0 auto; p{ color: #fff; margin-bottom: 0; } .services-title2{ font-size: 24px; margin: 12px 0 6px; line-height: normal; font-weight: 500 !important; color: @secondaryColor; a{ color: @secondaryColor } } } } } &.services-center{ .services-icon{ text-align: center; } .services-title2{ text-align: center; } .services-desc{ text-align: center; } &:hover{ .services-wrap{ .services-item{ top: -10px; } } } } &.service-active{ background: @primaryColor; .services-wrap{ .services-item{ .services-desc{ color: #fff; .services-title2{ color: #fff; a{ color: #fff; } } } } } } &.services-left{ margin-bottom: 30px; .services-wrap{ overflow: hidden; .services-item{ .services-icon{ float: left; width: 50px; } .services-title2{ text-align: left; margin: 0; font-weight: 500; margin-top: 7px; } .services-desc{ text-align: left; float: left; width: 80%; padding-left: 15px; padding-right: 0; } } } } &.services-right{ padding: 20px; margin-bottom: 30px; .services-wrap{ overflow: hidden; .services-item{ .services-icon{ float: right; width: 50px; } .services-title2{ text-align: right; margin: 0; font-weight: 500; } .services-desc{ text-align: right; float: left; width: 80%; padding-right: 18px; } } } } } .service-inner.no-rounded{ border-radius: 0 !important; } .services-style-7{ &.services-center{ text-align: center; } } /* Service Box Border Style*/ .rs-services1.services-left.border_style{ margin-bottom: 30px; .services-wrap { .services-item{ background: none; box-shadow: none; margin: 0; padding: 0; display: -ms-flexbox; display: -webkit-flex; display: flex; text-align: center; .services-icon{ width: 80px; i{ border: 2px solid @secondaryColor; border-radius: 50%; line-height: 70px; height: 80px; width: 80px; font-size: 40px; cursor: pointer; background: #ffffff; color: #28406d; } } &:hover{ .services-icon{ i{ background:@secondaryColor; color: @primaryColor; } } } .services-desc{ width: calc(~"100% - 80px"); padding-left: 15px; p{ margin-bottom: 0; } } } } } .rs-services1.services-right{ margin-bottom: 30px; .services-wrap { .services-item{ background: none; box-shadow: none; margin: 0; padding: 0; .services-icon{ width: 80px; float: right; i{ border: 2px solid @secondaryColor; border-radius: 50%; line-height: 70px; height: 80px; width: 80px; font-size: 40px; cursor: pointer; background: #ffffff; color: #28406d; &:hover{ background:@secondaryColor; color: @primaryColor; } } } .services-desc{ width: calc(~"100% - 80px"); padding-right: 15px; padding-left: 0; text-align: right; p{ margin-bottom: 0; } } } } } .rs-addon-services{ .services-icon.icon_animation { i{ position: relative; width: 70px; line-height: 70px; text-align: center; transition: 0s; } i:after{ content: ""; background: #DFF3FF; width: 70px; height: 70px; line-height: 70px; position: absolute; left: 0; z-index: -1; } } &:hover{ .services-icon.icon_animation i:after { animation: spine 15s linear infinite; -webkit-animation: spine 15s linear infinite; transition: 0.8s; } } } #content .rs-addon-services .services-icon.icon_animation{ background: transparent !important; background-color: transparent !important; } @keyframes spine { 0% { transform: rotate(0); -webkit-transform: rotate(0); } 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); } } @-webkit-keyframes spine { 0% { transform: rotate(0); -webkit-transform: rotate(0); } 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); } } .proces-item{ position: relative; z-index: 1; position: relative; padding-bottom: 5px; padding-right: 30px; margin-bottom: 40px; .number{ font-size: 48px; font-weight: 700; display: block; color: @bodyColor; margin-bottom: 20px; transition: all 0.3s ease 0s; line-height: 1; } h4{ margin: 0 0 10px; a{ color: @titleColor; } } &.active, &:hover{ .number{ color: @primaryColor; } } } .construction-process3{ margin-top: -140px; } .process-inner{ -webkit-box-shadow: 1px 0 3px 0px rgba(34, 34, 34, 0.3); -moz-box-shadow: 1px 0 3px 0px rgba(34, 34, 34, 0.3); box-shadow: 1px 0 3px 0px rgba(34, 34, 34, 0.3); display: table; width: 100%; position: relative; z-index: 1; background: #ffffff; -webkit-transition: all .3s; transition: all .3s; margin-top: -55px; .process-item{ padding: 42px 20px 0; border-top: none; display: table-cell; vertical-align: middle; -webkit-transition: all .3s; transition: all .3s; } .title{ font-size: 20px; line-height: 28px; margin-bottom: 8px; } .number{ font-size: 60px; color: @primaryColor; font-weight: 600; margin-bottom: 35px; margin-bottom: 12px; line-height: 60px; } .des{ opacity: 0; visibility: hidden; -webkit-transition: all .3s; transition: all .3s; line-height: 22px; } &.active, &:hover{ margin-top: -80px; margin-bottom: -80px; .process-item{ background: @primaryColor; padding-bottom: 44px; border-color: @primaryColor; .des{ opacity: 1; visibility: visible; } .title, .des, .number{ color: #ffffff; } } } } ul.check-list{ li{ position: relative; padding-left: 22px; padding-top: 4px; padding-bottom: 4px; font-size: 16px; list-style: none; &:before{ position: absolute; top: 4px; left: 0; content: "\f11b"; font-family: Flaticon; color: @primaryColor; font-weight: 700; font-size: 14px; } } } .rs-services-style3{ position: relative; overflow: hidden; max-width: 360px; .bg-img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; opacity: 1; -webkit-transition: all .7s ease; transition: all .7s ease; -webkit-transform: scale(1.05); transform: scale(1.05); background-size: cover; &:after{ content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: #222; opacity: 0.7; transition: 0.7s; } a{ position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); -webkit-transition: all .7s ease; transition: all .7s ease; font-size: 15px; height: 40px; line-height: 38px; padding: 0 30px; color: #fff; background: @secondaryColor; border-color: @secondaryColor; opacity: 0; visibility: hidden; z-index: 99; &:hover{ opacity: .95 !important; background: @secondaryColor; } &:before{ display: none; } } } .services-item{ position: relative; z-index: 1; .services-icon{ font-size: 44px; span{ display: inline-block; } } .services-desc{ .services-title{ margin-bottom: 10px; font-size: 16px; } p{ &:last-child{ margin-bottom: 0; } } } } &:hover{ .bg-img{ opacity: 1; -webkit-transform: scale(1); transform: scale(1); z-index: 9; a{ top: 50%; opacity: 99; visibility: visible; } &:after{ opacity: 0; } } } &.services-center{ text-align: center; } &.services-right{ text-align: right; } } .rs-portfolio-slider.rs-portfolio-style6{ overflow: visible; } .slider-services-style2{ display: block; position: relative; overflow: hidden; width: 100%; box-shadow: 0 10px 20px rgba(0,0,0,.05); border-radius: 3px; border: 1px solid transparent; margin-bottom: 20px; .service-img{ overflow: hidden; img{ max-width: 100%; -webkit-transition: all .4s ease-in; transition: all .4s ease-in; } } .services-desc{ padding: 27px 27px 8px; background: #fff; .services-title{ margin-bottom: 15px; font-size: 20px; } .readon{ height: 44px; line-height: 42px; margin-bottom: 25px; &:hover{ padding-right: 45px; } } } &:hover{ .service-img{ img{ filter: grayscale(0) blur(2px); -webkit-filter: grayscale(0) blur(2px); -webkit-transform: scale(1.1); transform: scale(1.1); } } .bg-img{ opacity: 1; -webkit-transform: scale(1); transform: scale(1); a{ top: 50%; } } } } .service-carousel{ .owl-stage-outer{ overflow: hidden; } .owl-nav { &.disabled{ display: none; } } .owl-dots{ text-align: center; margin-top: 25px; display: none; .owl-dot{ height: 8px; width: 20px; border-radius: 30px; border: 1px solid @primaryColor; display: inline-block; margin-right: 10px; cursor: pointer; &.active{ background: @primaryColor; cursor: inherit; } } } .rs-services-style3{ max-width: 100%; } } .light-arrow{ .owl-carousel .owl-nav [class*="owl-"]{ background: #fbfbfb !important; color: @titleColor; &:hover{ background: #fff !important; color: @titleColor; } } } .service-style-3{ .services-sliders4{ .inner-dis{ padding: 35px 30px 20px; background: #fbfbfb; text-align: center; .services-title{ font-size: 18px; line-height: 26px !important; margin-bottom: 10px; } } } } .rs-services-style4{ position: relative; transition: all .5s ease; padding: 50px 20px 20px; margin-bottom: 30px; overflow: hidden; .bg-img{ height: 300px; background-repeat: no-repeat; background-size: cover; background-position: center; opacity: 0; transition: all .5s ease; } .services-item{ .services-icon{ i{ font-size: 50px; } } .services-icon{ i{ color: @primaryColor; background-color: transparent; font-size: 55px; display: inline-block; width: 70px; height: 70px; line-height: 70px; color: #ffffff; background: @secondaryColor; border-radius: 50%; font-size: 30px; border: 2px solid transparent; transition: 0.3s; -webkit-transition: 0.3s; -ms-transition: 0.3s; text-align: center; } } .services-desc{ transition: all .5s ease; .services-title{ font-size: 20px; margin: 25px 0 10px !important; line-height: normal; font-weight: 600 !important; color: @titleColor; margin: 28px 0 10px; a{ color: @titleColor; } } } } &.services-center{ border: 1px solid #e1e1e1; .services-icon{ text-align: center; } .services-title2{ text-align: center; } .services-desc{ text-align: center; } } &.services-left{ .services-item{ .services-title{ text-align: left; margin: 0; font-weight: 500; } .services-desc{ text-align: left; } } } &.services-right{ padding: 20px; margin-bottom: 30px; overflow: hidden; .services-item{ .services-icon{ float: right; width: 50px; } .services-title{ text-align: right; margin: 0; font-weight: 500; } .services-desc{ text-align: right; float: left; width: 80%; padding-right: 18px; } } } &:hover{ .bg-img{ opacity: 1; } .services-icon i{ background: @primaryColor; color: @secondaryColor; } } } .services-style-5{ .services-wrap{ width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; } .services-desc, .services-item{ width: 180px; height: 180px; border-radius: 50%; .services-title{ padding-top: 25px; margin: 0 auto; text-transform: uppercase; border-radius: 50%; position: relative; a{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } } } .services-desc > div{ display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; } .services-item{ top: 20px; box-shadow: 0 0 0 20px rgba(225,197,13,0.4), inset 0 0 3px rgba(255,255,255,0.2); position: relative; margin: 0 auto; .icon_bg{ transition: all 0.6s ease-in-out; padding-top: 30px; text-align: center; img{ max-width: 120px; } } .services-title{ opacity: 0; pointer-events: none; transform: scale(1.5); transition: all 0.4s ease-in-out 0.2s; color: #fff; text-transform: uppercase; width: 100%; height: 100%; } &:hover{ .icon_bg{ transform: scale(0); opacity: 0; } .services-title{ transform: scale(1); opacity: 1; pointer-events: auto; background: @primaryColor; width: 100%; height: 100%; } } } .services-icon{ position: absolute; right: -32px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); max-width: 120px; background-repeat: no-repeat !important; } } .service-readon{ background: @primaryColor; color: #fff; padding: 3px 17px; display: inline-block; font-size: 20px; margin-top: 30px; border-radius: 18px; &:hover{ color: #fff; opacity: 0.9; } i{ &:before{ font-size: inherit; } } } .rs-services{ .services-style-9 { .services-wrap{ padding: 70px 35px 45px 35px; position: relative; border-bottom-width: 4px; transition: all 0.3s ease 0s; box-shadow: 0px 3px 36px rgba(0, 0, 0, 0.04); position: relative; background: #fff; border-radius: 7px; &:after{ content: ""; width: 0; height: 4px; background: @primaryColor; position: absolute; transition: all 0.5s ease 0s; bottom: 0; left: 50%; z-index: 9; transform: translateX(-50%); } .services-item{ .services-icon{ transition: all 0.5s ease 0s; width: 90px; margin: 0 auto; position: absolute; left: 50%; top: -45px; transform: translateX(-50%); background: #fff; box-shadow: 0px 3px 36px rgba(0, 0, 0, 0.04); transition: all 0.3s ease 0s; height: 90px; line-height: 90px; text-align: center; border-radius: 100%; img{ max-width: 45px; } } .services-desc{ margin: auto; .services-title{ margin-bottom: 8px; font-weight: 600 !important; font-size: 24px; color: @primaryColor; &.title-upper{ text-transform: uppercase; } a{ color: @primaryColor; &:hover{ color: @secondaryColor; } } } p{ margin-bottom: 0; } } } &:hover{ &:after{ width: 100%; } .services-item{ .services-icon{ top: -35px; } } } } &.services-center{ .services-desc{ text-align: center; } } } .services-style-7{ &.services-left{ .services-wrap{ .services-item{ display: flex; align-items: center; .services-icon{ width: 60px; padding-right: 20px; line-height: 50px; img{ width: 42px; } } .services-desc{ width: 70%; padding-right: 10px; .services-title{ font-size: 18px; line-height: 27px !important; margin-bottom: 0; font-weight: 600; } p{ margin-bottom: 0; } } } } } } } .rs-services-style6{ position: relative; border-radius: 6px; transition: all .5s ease; padding: 20px; margin-bottom: 30px; overflow: hidden; .bg-img{ height: 300px; background-repeat: no-repeat; background-size: cover; background-position: center; opacity: 0; transition: all .5s ease; } .services-item{ .services-icon{ i{ font-size: 50px; } } .services-icon{ i{ color: @primaryColor; border: 2px solid @primaryColor !important; background-color: transparent; font-size: 55px; display: inline-block; width: 135px; height: 135px; line-height: 135px; color: #ffffff; background: @primaryColor; border-radius: 50%; font-size: 60px; border: 2px solid transparent; transition: 0.3s; -webkit-transition: 0.3s; -ms-transition: 0.3s; text-align: center; } } .services-desc{ transition: all .5s ease; .services-title{ font-size: 24px; margin: 25px 0 10px !important; line-height: normal; font-weight: 500 !important; color: @titleColor; margin: 28px 0 10px; a{ color: @titleColor; } } } } &.services-center{ .services-icon{ text-align: center; } .services-title2{ text-align: center; } .services-desc{ text-align: center; } } &.services-left{ .services-item{ .services-title{ text-align: left; margin: 0; font-weight: 500; } .services-desc{ text-align: left; } } } &.services-right{ padding: 20px; margin-bottom: 30px; overflow: hidden; .services-item{ .services-icon{ float: right; width: 50px; } .services-title{ text-align: right; margin: 0; font-weight: 500; } .services-desc{ text-align: right; float: left; width: 80%; padding-right: 18px; } } } &:hover{ .bg-img{ opacity: 1; } .services-item{ .services-icon{ i{ background: transparent; color: @primaryColor; font-size: 50px; } } } } } .fullwidth-services-box{ .services-style-2{ background: rgba(2,27,121, .7); box-shadow: 0 0 20px @secondaryColor; &:hover{ background: @secondaryColor; } } } .style-bg{ .counter-top-area{ padding: 60px 0 30px; .count-number h3 { margin: 0; } } } .single-posts-meta{ .tag-line{ i{ color: @secondaryColor; margin-right: 3px; } } } /* -------------------------------- Vertical Timeline CSS -------------------------------- */ @media only screen and (min-width: 1170px) { .cd-is-hidden { visibility: hidden; } } .cd-timeline { overflow: hidden; margin: 2em auto; } .short-info h2{ font-size: 30px; line-height: 40px; } .cd-timeline__container { position: relative; width: 90%; max-width: 1170px; margin: 0 auto; padding: 0; iframe{ margin-bottom: 15px; } } .timeline-icon{ font-size: 30px; width: 80px; height: 80px; line-height: 80px; color: @primaryColor; @media screen and (max-width: 767px){ font-size: 15px; width: 40px; height: 40px; line-height: 40px; text-align: center; } } .cd-timeline__container::before { /* this is the vertical line */ content: ''; position: absolute; top: 0; left: 18px; height: 100%; width: 4px; background: @secondaryColor; } @media only screen and (min-width: 1170px) { .cd-timeline { margin-top: 34px; margin-bottom: 3em; } .cd-timeline__container::before { left: 50%; margin-left: -2px; } } .cd-timeline__block { position: relative; margin: 80px 0; } .cd-timeline__content .event-shedule-info{ .speaker-name, .speaker-name a { color: #f5f5f5; margin-bottom: 0; font-size: 14px; padding-bottom: 0; } .event-des{ font-size: 15px; line-height: 22px; } .event-title{ color: #fff !important; margin-bottom: 0px !important; margin-top: 0px !important; font-size: 24px; a{ color: #fff !important; } } p{ margin-top: 10px; } } .cd-timeline__block:after { /* clearfix */ content: ""; display: table; clear: both; } .cd-timeline__block:first-child { margin-top: 0; } .cd-timeline__block:last-child { margin-bottom: 0; } @media only screen and (min-width: 1170px) { .cd-timeline__block { margin: 4em 0; } } .cd-timeline__img { position: absolute; top: 0; left: 0; border-radius: 50%; width: 80px; height: 80px; line-height: 80px; text-align: center; } .cd-timeline__img img { display: block; width: 100%; height: 100%; position: relative; left: 0; top: 0; margin-left:0; margin-top: 0; border-radius: 100% !important; } .cd-timeline__img.cd-timeline__img--picture { background: @secondaryColor; span{ color: #fff; } } .cd-timeline__img.cd-timeline__img--movie { background: #c03b44; } .cd-timeline__img.cd-timeline__img--location { background: #f0ca45; } @media only screen and (min-width: 1170px) { .cd-timeline__img { left: 50%; margin-left: -40px; /* Force Hardware Acceleration */ -webkit-transform: translateZ(0); transform: translateZ(0); } .cd-timeline__img.cd-timeline__img--bounce-in { visibility: visible; -webkit-animation: cd-bounce-1 0.6s; animation: cd-bounce-1 0.6s; } } @media only screen and (max-width: 1199px) { body .cd-timeline__img{ left: -18px; } body .cd-timeline__content{ margin-left: 80px; } } @media only screen and (max-width: 767px) { .cd-block-start .cd-timeline__img .timeline-year { font-size: 12px; line-height: 12px; } body .cd-timeline__img { left: -10px; width: 60px; height: 60px; line-height: 60px; } body.wpb-js-composer .vc_tta.vc_general .vc_tta-panel .vc_tta-panel-title { a i{ color: @primaryColor; } &:hover{ a i{ color: #ffffff; } } } } @media only screen and (max-width: 480px) { body .cd-timeline__content .short-info { padding: 10px; } body .cd-timeline__content { margin-left: 65px; } body .cd-timeline__content .short-info h2, body .cd-timeline__content .short-info h3{ font-size: 20px; } } @-webkit-keyframes cd-bounce-1 { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 60% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes cd-bounce-1 { 0% { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); } 60% { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .cd-timeline__content { position: relative; margin-left: 60px; background: #f3f5f4; border-radius: 3px; padding: 1em; // border-top: 4px solid @secondaryColor; .short-info{ background: #f7f7fc; padding:50px; border-radius: 4px; h2, h3{ color: @secondaryColor; font-size: 24px; line-height: 28px !important; margin-bottom: 14px; a{ color: @secondaryColor; } } .career_thumb{ margin-bottom: 23px; } } .cd_timeline_desc{ margin-left: 60px; font-size: 20px; font-weight: 600; color: @titleColor; opacity: 1; h3{ color: @secondaryColor; font-size: 20px; line-height: 28px !important; margin-bottom: 14px; } p{ font-size: 16px; color: @titleColor; } } } .cd-timeline__content:after { /* clearfix */ content: ""; display: table; clear: both; } .cd-timeline__content::before { /* triangle next to content block */ content: ''; position: absolute; top: 16px; right: 100%; height: 0; width: 0; border: 15px solid transparent; border-right: 15px solid #f3f5f4; } .cd-timeline__content p, .cd-timeline__read-more, .cd-timeline__date { font-size: 16px; color: @titleColor; } .cd-timeline__read-more, .cd-timeline__date { display: inline-block; } .cd-block-start{ padding-bottom: 100px; .cd-timeline__img{ line-height: 20px; padding: 10px; font-size: 15px; .timeline-year{ position: relative; top: 5px; } } } .cd-block-done{ padding-bottom: 80px; text-transform: uppercase; } .cd-timeline__read-more { float: right; padding: .8em 1em; background: #acb7c0; color: white; border-radius: 0.25em; } .cd-timeline__read-more:hover { background-color: #bac4cb; } .cd-timeline__date { float: left; padding: .8em 0; opacity: .7; } @media only screen and (min-width: 768px) { .cd-timeline__content h2 { font-size: 2rem; } .cd-timeline__content p { font-size: 16px; color: @titleColor; } .cd-timeline__read-more, .cd-timeline__date { font-size: 1.4rem; } } @media only screen and (min-width: 1170px) { .cd-timeline__content { margin-left: 0; padding: 0; width: 43%; /* Force Hardware Acceleration */ -webkit-transform: translateZ(0); transform: translateZ(0); } .cd-timeline__content::before { top: 24px; left: 100%; border-color: transparent; border-left-color: #f3f5f4; } .cd-timeline__read-more { float: left; } .cd-timeline__date { position: absolute; width: 100%; left: 122%; top: 6px; font-size: 1.6rem; } .cd-timeline__block:nth-child(odd) .cd-timeline__content { float: right; } .cd-timeline__block:nth-child(odd) .cd-timeline__content::before { top: 24px; left: auto; right: 100%; border-color: transparent; border-right-color: #f3f5f4; } .cd-timeline__block:nth-child(odd) .cd-timeline__read-more { float: right; } .cd-timeline__block:nth-child(odd) .cd-timeline__date { left: auto; right: 133%; text-align: right; } .cd-timeline__content.cd-timeline__content--bounce-in { visibility: visible; -webkit-animation: cd-bounce-2 0.6s; animation: cd-bounce-2 0.6s; } } @media only screen and (min-width: 1170px) { /* inverse bounce effect on even content blocks */ .cd-timeline__block:nth-child(odd) .cd-timeline__content.cd-timeline__content--bounce-in { -webkit-animation: cd-bounce-2-inverse 0.6s; animation: cd-bounce-2-inverse 0.6s; } } @-webkit-keyframes cd-bounce-2 { 0% { opacity: 0; -webkit-transform: translateX(-100px); transform: translateX(-100px); } 60% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes cd-bounce-2 { 0% { opacity: 0; -webkit-transform: translateX(-100px); transform: translateX(-100px); } 60% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes cd-bounce-2-inverse { 0% { opacity: 0; -webkit-transform: translateX(100px); transform: translateX(100px); } 60% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes cd-bounce-2-inverse { 0% { opacity: 0; -webkit-transform: translateX(100px); transform: translateX(100px); } 60% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .timeline-alter { .timeline-item{ position: relative; display: table; table-layout: fixed; width: 100%; padding-bottom: 25px } .left-part { width: 30%; display: table-cell; padding-right: 25px; min-height: 100%; text-align: right; vertical-align: top } .item-period { margin: 2px 0 3px; font-size: 14px; line-height: 1.4em } .item-company { display: block; color: #aaa; margin: 0 0 4px; font-size: 12px; line-height: 1.45em } .divider { position: absolute; top: 0; left: 30%; bottom: 0; width: 1px; background-color: #eee; &:after { content: ''; display: block; margin-top: 12px; width: 11px; height: 11px; margin-left: -5px; border-radius: 5px; border: 2px solid; border-color: @secondaryColor; background-color: #fff; } } .right-part { width: 70%; display: table-cell; padding-left: 25px; padding-right: 15px; vertical-align: top; h4{ font-size: 16px; margin-bottom: 5px; } } .item-title { font-size: 16px; margin-bottom: 3px } } .timeline-alter .right-part p, .timeline-alter .right-part p>* { font-size: .92em } /* -------------------------------- Horizontal Timeline CSS -------------------------------- */ .wrap-list { overflow-x: hidden; } .wrap-index { overflow-x: hidden; -webkit-box-sizing: unset !important; -moz-box-sizing: unset !important; box-sizing: unset !important; } .over-wrap-index{ .prev{ position: absolute; left: -1px; top: 61%; transform: translateY(-50%); font-size: 30px; background: @secondaryColor; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; color: #fff; &:hover{ color: @primaryColor; } &.disabled{ background: #f2f2f2; cursor: default; color: #fff !important; } } .next{ position: absolute; right: -1px; top: 61%; transform: translateY(-50%); font-size: 30px; background: @secondaryColor; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; color: #fff; &:hover{ color: @primaryColor; } &.disabled{ background: #f2f2f2; cursor: default; color: #fff !important; } } } .over-wrap-list { position: relative; } .over-wrap-list .prev, .over-wrap-list .next { position: absolute; top: 50%; margin-top: -80px; font-size: 80px; text-decoration: none; color: #A09F9F; text-shadow: 1px 1px #fff; } .over-wrap-list .prev.disabled, .over-wrap-list .next.disabled { color: #DFDFDF; } .over-wrap-list .prev { left: 30px; } .over-wrap-list .prev:active { left: 29px; } .over-wrap-list .next { right: 30px; } .over-wrap-list .next:active { right: 29px; } .over-wrap-index { position: relative; } .over-wrap-index:before { content: ""; position: absolute; top: 0px; left: 0px; bottom: 0px; width: 200px; z-index: 999; background: url('../images/about-overlay-l.png') 0px top no-repeat; background-size: cover; background-position-x: right; display: none; } .over-wrap-index:after { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; width: 200px; z-index: 999; background: url('../images/about-overlay-r.png') right top no-repeat; background-size: cover; background-position-x: left; display: none; } ul.index { padding-left: 0; list-style: none; font-size: 0; position: relative; padding-top: 30px; padding-bottom: 50px; } ul.index li { font-size: 14px; display: inline-block; width: 200px; text-align: center; position: relative; vertical-align: bottom; padding-bottom: 15px; font-weight: 700; min-height: 40px; } ul.index li:after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1px solid @secondaryColor; position: absolute; bottom: -8px; left: 90px; z-index: 99; overflow: hidden; } .content-wrap{ display: flex; &.col-full{ display: block; } .date{ margin-left: 15px; background: transparent; color: #777; font-size: 100%; } .clear-both{ clear: both; border-bottom: 1px solid #f1f1f1; margin-bottom: 13px; display: block; max-width: 360px; } .career-title{ text-transform: capitalize; color: @secondaryColor; font-weight: 600; font-size: 26px; line-height: 36px; margin-bottom: 8px; } } .col-left{ width: 45%; padding-right: 35px; } .col-right{ width: 55%; padding-left: 15px; } ul.index li.active:after{ background: @secondaryColor; } ul.index li a { text-decoration: none; font-size: 24px; color: #646464; outline: none; } ul.index li a:hover { color: #7e7e7e; } ul.index li.active a { font-size: 48px; color: @secondaryColor; } ul.index:after { content: ""; position: absolute; bottom: 0px; height: 50px; left: 0; right: 0; border-top: 1px dotted @secondaryColor; } ul.list { padding-left: 0; list-style: none; font-size: 0; -webkit-transition: all 300ms ease; transition: all 300ms ease; } ul.list > li { font-size: 14px; display: inline-block; padding-top: 20px; vertical-align: top; } ul.list > li .image { width: 200px; float: left; position: relative; z-index: 2; } .over-wrap-list iframe{ display: none; } .over-wrap-list .show-me iframe{ display: block !important; } .content-wrap .post_image, .content-wrap .content{ display: none; } .content-wrap .post_image img{ border-radius: 5px; } .over-wrap-list .show-me .content-wrap .post_image, .over-wrap-list .show-me .content-wrap .content{ display: block !important; } #wrap-list{ iframe{ margin-top: 10px; } } ul.list > li .image:before, ul.list > li .image:after { content: ""; position: absolute; z-index: -1; width: 50%; height: 80%; max-height: 60px; -webkit-box-shadow: 0 15px 40px 5px rgba(0, 0, 0, 0.5); box-shadow: 0 15px 40px 5px rgba(0, 0, 0, 0.5); bottom: 20px; } ul.list > li .image:before { left: 20px; -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } ul.list > li .image:after { right: 20px; -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } ul.list > li .image img { min-width: 100%; min-height: 150px; display: block; max-width: 100%; height: auto; border: 1px solid #C0C0C0; padding: 7px; background: @secondaryColor; border-radius: 2px; } ul.list > li .content { color: @bodyColor; font-size: 16px; line-height: 28px; } ul.list > li .content .title { text-transform: capitalize; color: @secondaryColor; font-weight: 700; font-size: 26px; line-height: 36px; margin-bottom: 5px; } .designation{ color: #777; font-weight: 700; margin-bottom: 10px; font-size: 18px; line-height: 30px; float: left; i{ margin-right: 10px; } } .hide { display: none !important; } .show { display: block !important; } .one-line { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .arrow-up { border-left-color: transparent; border-right-color: transparent; border-top-style: none; } .arrow-down { border-left-color: transparent; border-right-color: transparent; border-bottom-style: none; } .arrow-right { border-top-color: transparent; border-bottom-color: transparent; border-right-style: none; } .arrow-left { border-top-color: transparent; border-bottom-color: transparent; border-left-style: none; } .arrow { width: 0; height: 0; display: inline-block; vertical-align: middle; border-color: white; border-width: 5px; border-style: solid; } .arrow.up { border-left-color: transparent; border-right-color: transparent; border-top-style: none; } .arrow.down { border-left-color: transparent; border-right-color: transparent; border-bottom-style: none; } .arrow.right { border-top-color: transparent; border-bottom-color: transparent; border-right-style: none; } .arrow.left { border-top-color: transparent; border-bottom-color: transparent; border-left-style: none; } .ir { background-color: transparent; border: 0; overflow: hidden; /* IE 6/7 fallback */ *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 150%; } .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* ========================================================================== Responsive ========================================================================== */ @media only screen and (min-width: 35em) { } @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { } @media print { * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; /* h5bp.com/t */ } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /* ========================================================================== End Horizontal timeline ========================================================================== */ /*-------------------------------------------------------------- Video css --------------------------------------------------------------*/ @keyframes pulse-border { 0% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } .rs-video-2{ position: relative; z-index: 1; .video-desc{ position: absolute; top: 70%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; z-index: 10; font-size: 20px; } .overly-border{ border: 1px solid @primaryColor; width: 100px; height: 100px; border-radius: 50%; position: absolute; top: 50%; bottom: 0; left: 0; right: 0; margin: 0 auto; transform: translateY(-50%); z-index: 0; } .video-content { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; z-index: 10; h4 { margin-top: 40px; margin-bottom: 0; font-size: 30px; color: #fff; text-transform: uppercase; } } &:hover{ .popup-videos{ animation-duration: 0.8s; } } .popup-videos{ position: absolute; transform: translateX(-50%) translateY(-50%); box-sizing: content-box; display: block; width: 80px; height: 80px; border-radius: 50%; line-height: 90px; padding: 0; margin: 0 auto; left: 50%; top: 50%; z-index: 9; text-align: center; background: @primaryColor; &:after{ content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 80px; height: 80px; border-radius: 50%; transition: all 200ms; } &:before{ background: @primaryColor; content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 80px; height: 80px; border-radius: 50%; animation: pulse-border 1500ms ease-out infinite; } i { text-indent: 5px; -webkit-transition: 0.3s ease all; transition: 0.3s ease all; font-size: 30px; color: @primaryColor; position: relative; &:before{ color: #fff; } } &:hover { border-color: rgba(255,255,255,0.7); } span{ display: block; position: relative; z-index: 3; width: 0; height: 0; border-left: 27px solid #fff; border-top: 17px solid transparent; border-bottom: 17px solid transparent; } } &:hover { .overly-border { &:before, &:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } } &.Style2 { .video-circle1{ height: 415px; width: 415px; animation: banner-right-circle 5s linear infinite; } .video-circle1, .video-circle2{ border: 1px solid @primaryColor; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: banner-right-circle 5s linear infinite; z-index: 1; } .video-circle2{ height: 350px; width: 350px; animation: banner-right-circle2 5s linear infinite; } } } @keyframes banner-right-circle { 0% { height: 250px; width: 250px; opacity: 1; } 100% { height: 415px; width: 415px; opacity: .1; } } @keyframes banner-right-circle2 { 0% { height: 150px; width: 150px; opacity: 1; } 100% { height: 405px; width: 405px; opacity: .1; } } .readon{ cursor: pointer; display: inline-block; position: relative; transition: all 0.4s; padding: 8px 30px; font-size: 15px; font-weight: 600; line-height: 26px; text-transform: uppercase; color: #ffffff; background: @btnBgColor; z-index: 1; border-radius: 30px; &:hover { background: @thirdColor; color: @whiteColor; } &.white{ background: @whiteColor; color: @primaryColor; &:hover{ background: @titleColor !important; color: @whiteColor; } } } .rev-custom-btn{ position: relative; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; &:before{ display: block; position: absolute; left: 0px; bottom: 0px; height: 0px; width: 100%; z-index: -1; content: ''; background: @btnColor; border-radius: 3px; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; } &:hover { background: @btnColor; color: @whiteColor; opacity: 0.99; &:before{ top: 0%; bottom: auto; height: 100%; } } } .rs-btn2{ &.btn-center{ text-align: center; } &.btn-right{ text-align: right; } } .blog-button a{ color: #fff; } .transparent-btn{ background: #ffffff; color: @bodyColor; border: 1px solid; border-color: @primaryColor; border-radius: 3px; padding: 0 20px; height: 40px; line-height: 40px; display: inline-block; position: relative; font-size: 16px; text-transform: uppercase; font-weight: 500; &:before{ position: absolute; height: 100%; font-size: 18px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; right: 50px; opacity: 0; top: 0px; content: "\f054"; font-size: 15px; font-family: fontawesome; } &:hover{ padding-right: 40px; &:before{ right: 20px; opacity: 1; } border-color: @primaryColor; background: @primaryColor; color: #ffffff; } } /*-------------------------------- Latest News ----------------------------------*/ .rs-latest-news { .news-normal-block { padding: 0px; transition: 0.3s; background-size: cover !important; .news-img { margin-bottom: 0px; padding: 13px 13px 8px; img { width: 100%; } } .news-info{ padding: 50px 30px; padding-right: 30%; color: #fff; a{ color: #fff; &:hover{ color: @primaryColor; } } .categories{ font-size: 16px; margin: 0 0 16px; } } .news-title { font-size: 28px; margin-bottom: 20px; font-weight: 600 !important; line-height: 38px !important; a { &:hover, &:focus { color: @primaryColor; } } } .news-desc { p { margin-bottom: 30px; } } .news-btn { a { display: inline-block; margin-left: auto; padding: 4px 20px; font-size: 13px; font-weight: 500; text-decoration: none; background-color: @primaryColor; color: #fff; border-radius: 35px; text-transform: uppercase; &:hover { background-color: @hoverColor; } } } } .news-list-block { .news-list-item { transition: 0.3s; background: #fff; &:hover { -webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); } .news-title { font-size: 18px !important; margin-bottom: 10px; font-weight: 600 !important; a { color: #212121; &:hover, &:focus { color: @primaryColor; } } } .news-desc { p { margin-bottom: 0; } } .categories{ font-size: 14px; margin: 0 0 10px; a{ color: #181818; &:hover{ color: @primaryColor; } } } .news-content{ padding: 20px; background: #ffffff; } } } } .latest-news-slider { .news-normal-block { box-shadow: none !important; } .slick-arrow { position: absolute; z-index: 11; bottom: 0; right: -104px; height: 42px; width: 42px; font-size: 0; border: 0; background-color: rgba(0,0,0,0.1); color: @primaryColor; cursor: pointer; outline: 0; border-radius: 50%; transition: 0.3s; top: auto; &:after { font-family: FontAwesome; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-size: 22px; color: inherit; text-indent: 2px; } &.slick-prev { left: auto; &:after { content: "\f104"; } } &.slick-next { right: -160px; &:after { content: "\f105"; } } &:hover { background-color: @primaryColor; color: #fff !important; } } } .latest-news-nav { .slick-track { width: 100% !important; } .slick-slide { width: calc(~"100% - 2px") !important; margin-bottom: 12px; cursor: pointer; background-color: #fff; border: 1px solid rgba(34, 34, 34, 0.1); padding: 13px; transition: 0.3s; &.slick-current, &:hover { background-color: @primaryColor; -webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); img { opacity: 0.8; } } } } .rs-latest-news{ &.style2{ .latest-news-nav { .slick-track { width: 100% !important; } .slick-slide { width: calc(~"100% - 2px") !important; margin-bottom: 12px; cursor: pointer; background-color: #fff; border: 1px solid rgba(34, 34, 34, 0.1); padding: 13px; &.slick-current, &:hover { background: #fff; border-color: #ccc; -webkit-box-shadow: 0 0px 15px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0px 15px rgba(0, 0, 0, 0.1); box-shadow: 0 0px 15px rgba(0, 0, 0, 0.1); img { opacity: 0.8; } } } } .news-list-block { .news-list-item { + .news-list-item{ margin-top: 15px; } } } .slick-arrow { bottom: -95px; right: -10px; &.slick-next { right: -65px; } } } } .rs-services3{ overflow: hidden; padding: 0; margin: 0; .col-services10{ float: right; width: 80%; .feature-title{ padding-top: 26px; margin: 0 0 13px; font-size: 22px; a{ color: @secondaryColor; } } .slick-list{ padding: 0 0 0 25px; } } &.services-right{ .col-services10{ float: left; width: 80%; .slick-list{ padding: 0 25px 0 0; } } .col-services2{ float: left; width: 20%; } } .col-services2{ float: left; width: 20%; } .heading-block{ text-align: center; h4{ font-size: 16px; margin: 15px 0; } } .slick-vertical .slick-slide{ padding: 0 5px; } .item-thumb img{ border-radius: 0 !important; cursor: pointer; } .slider-nav{ margin: 0 !important; } .slick-arrow{ display: block; position: absolute; top: 10px; z-index: 9999; left: 45%; transform: translateY(-50%); transform: rotate(90deg); width: 42px; height: 42px; line-height: 42px; background: @secondaryColor; color: #fff; border-radius: 50%; transition: 0.6s ease all; opacity: 1; opacity: 0; visibility: hidden; &:after{ top:-2px; } &.slick-next{ bottom: 28px; top: auto; } &:hover{ background: @primaryColor; color: @secondaryColor; } } .col-services2{ .slick-arrow{ opacity:1; visibility: visible; } &:hover{ .slick-arrow{ opacity:1; visibility: visible; } } } } // Slider Style 2 .team-grid-style2, .team-slider-style2 { .team-item-wrap { position: relative; margin-bottom: 35px; a{ text-decoration: none; } .team-img { position: relative; overflow: hidden; .team-img-sec{ position: relative; } .wrap-text{ box-shadow: 0 5px 20px rgba(34, 34, 34, 0.1); padding: 0 40px 12px; background: #fff; .team-desc{ margin-bottom: 0; } } .normal-text { width: 100%; transition: all 0.5s ease 0s; position: relative; padding-bottom: 0; z-index: 1; margin-bottom: 0; background: rgba(0, 0, 0, 0.6); border-radius: 3px 3px 0 0; padding: 15px 15px 20px; margin-top: -35px; position: absolute; bottom: -50%; left: 50%; transform: translateX(-50%); width: 100%; transition: 0.4s; .team-name { margin-top: 0 !important; line-height: 28px !important; a{ position: relative; margin-bottom: 0; font-size: 18px; text-transform: capitalize; z-index: 111; } } .team-social, .team-name{ color: #ffffff; a{ color: #ffffff; &:hover{ color: #ccc; } } } .cat-team{ color: #ffffff; line-height: 1.4; display: block; margin: 0 0 10px; } .team-social{ padding-top: 2px; a{ padding: 0 3px; } } .nolink{ pointer-events: none; } .cat-doctor{ font-family: @titleFont; font-size: 14px; a{ color: #ffffff; text-transform: uppercase; } } .team-name{ margin: 18px 0 4px; font-weight: 600; } .team-title { color: #eee; font-size: 13px; font-weight: 400; padding: 0; display: block; text-transform: uppercase; a{ color: #eee; pointer-events: none; } } } } &:hover{ .team-img{ .normal-text { bottom: 0; } .team-img-sec{ &:before{ height:100%; } } } } } .appointment-bottom-area{ overflow: hidden; text-align: left; padding-top: 18px; padding-bottom: 25px; .app_details, .app_btn{ a{ position: relative; color: #fff; } &:hover{ a{ color: #fff; opacity: .9; } } } .app_details{ margin-top: 10px; a{ color: @bodyColor; } &:hover{ a{ color: @primaryColor; } } } .app_details{ float: left; } .app_btn{ float: right; } } } .icon-button{ a{ background: @primaryColor; color: #fff; padding: 3px 17px; display: inline-block; font-size: 20px; margin-bottom: 25px; border-radius: 18px; &:hover{ color: #fff; background: @secondaryColor; } i{ &:before{ font-size: inherit; } } } } .blogfull{ box-shadow: 0 8px 6px -6px #eee; background: #fbfbfb !important; padding: 30px 40px !important; .blog-title{ min-height: 50px; } .icon-button{ a{ margin-bottom: 0px; } } } .rs-blog-grid .rs-addon-slider .blog-item { padding: 0 20px; } .rs-blog-grid .blog-item .blog-inner-wrap { box-shadow: 0 6px 25px rgba(12, 89, 219, 0.09); margin-top: 15px; } .rsaddon-unique-slider{ .blog-item{ .blog-inner-wrap{ transition: all 500ms ease; &:hover{ transform: translateY(-10px); .custom-blog-btn{ opacity: 1; } } } .custom-blog-btn{ transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; -webkit-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.25); opacity: 0; position: relative; i{ &:before{ margin-left: 0 !important; } } } } .blog-content{ .post-categories{ padding-left: 0; margin-left: 0; margin-bottom: 0; li{ list-style: none; margin-bottom: 8px; a{ font-size: 14px; } } } .author-avatar{ img{ border-radius: 50%; margin-right: 8px; } } .blog-footer{ font-size: 15px; font-weight: 500; .blog-meta{ i{ margin-right: 5px; } date{ text-decoration: underline; font-weight: 600; } } } .custom-blog-btn{ transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; -webkit-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.25); opacity: 0; position: relative; i{ &:before{ margin-left: 0 !important; } } &:hover{ opacity: 1; } } .blog-btn-part2{ position: relative; z-index: 10; margin-bottom: 20px; } } } //Slider Styel3 .team-grid-style3, .team-slider-style3{ .team-img{ position: relative; padding: 0; img{ position: relative; z-index: 99; } .team-img-sec{ position: relative; &:before{ position: absolute; content: ''; width: 100%; height: 100%; background: @secondaryColor; opacity: 0.8; left: 0; top: 0; z-index: 100; opacity: 0; transition: @transition; } .team-content{ position: absolute; display: block; left: 50%; width: 100%; top: 30%; transform: translate(-50%, -50%); text-align: center; z-index: 110; color: #fff; padding: 30px; transition: @transition; height: 100%; .author-text{ position: absolute; bottom: 20px; left: 30px; opacity: 0; visibility: hidden; transition: 0.4s; } .team-name, .team-title{ background: #fff; } .team-name{ margin-bottom: 0; font-size: 20px; display: block; padding: 0 10px; a{ color: #fff; } } .team-title{ color: #fff; position: relative; font-size: 14px; display: inline-block; padding: 3px 10px; &:after{ position: absolute; content: ''; width: 170px; height: 2px; background: #f2f2f2; left: 50%; bottom: 0; transform: translateX(-50%); } } .team-social{ a{ color: #fff; margin-right: 12px; font-size: 16px; &:last-child{ margin-right: 0; } &:hover{ opacity: 0.8; } } } } &:hover{ .team-content{ opacity: 1; .author-text{ opacity: 1; visibility: visible; } } } } } } .team-grid-style3 .team-img:after{ top: 0; }.team-grid-style3 .team-img:before{ bottom: 0; } .team-slider-style4{ .team-carousel{ .team-item{ margin: 20px 15px; transition: all .5s ease; .team-item-inner{ padding-top: 25px; padding-bottom: 10px; } &:hover{ box-shadow: none; background: @primaryColor; border-radius: 3px; .normal-text{ a, .designation{ color: #fff; } .social-icons{ a i{ color: #fff; } } } } } } } .nolink{ color: inherit; pointer-events: none; } .rs-team-grid{ .team-item-wrap{ margin-bottom: 30px; } &.team-style4{ .team-item-inner{ padding: 0 30px; img{ border-radius: 50%; } } .normal-text{ text-align: center; span{ display: block; font-size: 22px; padding-top: 20px; padding-bottom: 4px; font-weight: 600; font-family: @titleFont; } .designation{ font-weight: 400; text-transform: uppercase; float: none; font-size: 14px; font-family: @titleFont; color: @bodyColor; a{ color: @bodyColor; pointer-events: none; } } } .team-item{ .social-icons{ a{ i{ color: @bodyColor; font-size:14px; padding: 0 6px; } } } } } .team-item{ margin-bottom: 30px; } &.team-grid-style1{ .team-item{ box-shadow: 0 5px 20px rgba(34, 34, 34, 0.1); .team-content span.team-title{ font-weight: 500; } img{ opacity: 1; transition: @transition; } &:hover{ img{ opacity: 0.7; } } } } &.team-style4{ .team-wrapper{ position: relative; overflow: hidden; padding-bottom: 95px; background: #fff; border-radius: 5px; .team_photo { img { width: 100%; -webkit-transition: all 0.7s; transition: all 0.7s; } } .team-title{ font-weight: 400; text-transform: capitalize; float: none; font-size: inherit; color: @titleColor; } .team_desc { height: 100px; width: 100%; bottom: 0; position: absolute; padding: 15px 20px; color: @globalColor; text-align: center; overflow: hidden; background: #ffffff; -webkit-transition: 0.3s all ease; -moz-transition: 0.3s all ease; transition: 0.3s all ease; &:before { content: ""; position: absolute; bottom: 0; width: 100%; height: 0; background: @primaryColor; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; transition: 0.4s all ease; left: 0; } .name { font-size: 18px; font-weight: 600; margin: 5px 0 0; text-transform: capitalize; font-family: @titleFont; a { color: @hoverColor; &:hover { color: #eee; } } .designation { font-size: 15px; text-transform: capitalize; color: @hoverColor; float: none; text-align: center; font-weight: 500; } } .team-social { bottom: -100px !important; transition: @transition; a { font-size: 17px; display: block; width: 25px; height: 25px; line-height: 25px; padding: 0px; border: none; text-align: center; color: #fff; display: inline-block; transition: all 0.3s ease 0s; background: transparent !important; margin-right: 8px; &:last-child{ margin-right: 0; } i{ font-size: 16px; } } } } &:hover { .team_desc { opacity: 1; width: 100%; visibility: visible; transform: translate(0,0); bottom: 0; height: 130px; color: #fff; background: @secondaryColor; .name { a { color: #ffffff; } .designation { color: #ffffff; } } } .team-title{ display: block; margin-bottom: 15px; color: #fff; } .team_photo img { -moz-transform: scale(1.1); transform: scale(1.1); } .team-social{ bottom: 20px !important; } } } } &.team-style5{ .team-item { margin-bottom: 125px; position: relative; .team-img { position: relative; overflow: hidden; img { width: 100%; transform: scale(1.15); -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } } .normal-text{ background: #f7f7f7; color: @hoverColor; padding: 20px; text-align: center; z-index: 9; position: absolute; z-index: 1; left: 40px; bottom: -85px; background: #fff; width: calc(~"100% - 80px"); padding: 20px 20px 25px; -webkit-box-shadow: 10px 17px 38px 0 rgba(0,0,0,0.1); -moz-box-shadow: 10px 17px 38px 0 rgba(0,0,0,0.1); box-shadow: 10px 17px 38px 0 rgba(0,0,0,0.1); .designation{ font-size: 14px; font-weight: 500; float: none; color: @titleColor; margin-bottom: 0; text-transform: uppercase; a{ color: @titleColor; } } .team-text{ font-size: 14px; margin-bottom: 0; color: #777; position: relative; z-index: 1; max-height: 0; opacity: 0; line-height: 24px; padding: 0 20px; -webkit-transition: all .6s,max-height .5s; -o-transition: all .6s,max-height .5s; -moz-transition: all .6s,max-height .5s; transition: all .6s,max-height .5s; overflow: hidden; -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: bottom; -moz-transform-origin: bottom; -ms-transform-origin: bottom; -o-transform-origin: bottom; transform-origin: bottom; &:before{ content: ''; position: absolute; z-index: 1; background: @secondaryColor; top: 0; left: 50%; width: 50px; height: 2px; margin-left: -25px; } } .social-icons { text-align: center; margin-top: 12px; a{ i{ color: @bodyColor; font-size: 15px; width: 35px; height: 35px; line-height: 35px; background: transparent; text-align: center; -webkit-transition: 0.3s all ease; transition: 0.3s all ease; border-radius: 50%; margin: 0; } &:hover{ i{ background: @primaryColor; color: #fff; } } } } .person-name{ display: block; font-size: 18px; margin-bottom: 0px; text-transform: capitalize; font-weight: 600; a{ color: @secondaryColor; &:hover{ color: @primaryColor; } } } .person-designation{ font-size: 12px; color: @hoverColor; text-transform: uppercase; font-weight: normal; } } &:hover{ .normal-text{ .team-text{ position: relative; max-height: 400px; opacity: 1; text-align: center; -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); -webkit-transition: all .4s,max-height 1.5s; -o-transition: all .4s,max-height 1.5s; -moz-transition: all .4s,max-height 1.5s; transition: all .4s,max-height 1.5s; padding-top: 18px; margin-top: 8px; } } } .overlay-element{ .social-icons{ margin-top: 5px; i{ font-size: 15px; margin: 0 5px; } } } .team-content { padding: 10px; h3.team-name { font-size: 20px; margin-bottom: 4px; line-height: normal !important; text-transform: capitalize; a{ color: #fff; &:hover{ opacity: 0.8; color: #fff !important; } } } .designation{ font-size: 16px; font-weight: 500; } } .team-title { font-size: 15px; font-weight: 400; text-transform: capitalize; display: block; font-family: @titleFont; color: @titleColor; } .team-desc { margin-bottom: 0; padding-top: 12px; margin-top: 12px; border-top: 1px solid; line-height: 22px; } .team-desc{ color: #ffffff; } &:hover { .team-img { img { -webkit-transform: scale(1); transform: scale(1); } } .designation{ float: none; font-size: 13px; font-weight: 500; } } } } } .team-grid-style1 .team-item .team-content, .team-slider-style1 .team-item .team-content, .elementor-2333 .elementor-element.elementor-element-8fada60 .team-inner-wrap{ margin-bottom: 0 !important; } .clients-grids{ margin: 0; padding:0; list-style: none; text-align: center; li{ display: inline-block; a{ display: inline-block; padding:10px 20px; } } &.cols-one{ li{ width: 100%; } } &.cols-two{ li{ width: 50%; } } &.cols-three{ li{ width: 33.333%; } } &.cols-four{ li{ width: 25%; } } &.cols-five{ li{ width: 20%; } } &.cols-six{ li{ width: 16.666%; } } } #team-list-style{ .team-img{ background: #fff; box-shadow: 0 0 60px rgba(0, 0, 0, 0.04); .wrap-text{ padding: 30px 20px; } } .team-name{ margin-bottom: 5px; text-transform: uppercase; font-weight: 600 !important; font-size: 22px; line-height: 30px; a{ color: @primaryColor; &:hover{ color: @secondaryColor; } } } .team-title{ font-size: 16px; font-weight: 500; display: block; margin-bottom: 10px; } .social-info{ overflow: hidden; .phone{ float: left; &:first-child{ margin-right: 18px; } a{ color: @bodyColor; &:hover{ color: @primaryColor; } } i{ margin-right: 6px; position: relative; top: 2px; &:before{ font-size: 17px; } } } } .team-social { margin-top: 20px; margin-bottom: 24px; .social-icon{ margin-right: 13px; } i { font-size: 16px; transition: 0.4s; color: @bodyColor; text-align: center; &:hover{ color: @primaryColor; } } } } .rs-contact-box{ .address-item{ &.boxstyle2{ .address-icon{ width: 40px; height: 40px; line-height: 38px; i{ font-size: 17px; line-height: 20px; } &:before{ display: none; } &:after{ display: none; } } .address-text{ .text{ display: block; .label{ display: block; } } } } } } /* ---------------------------------- 09. Portfolio -------------------------------------*/ .information-sidebar{ li.widget{ background:#fff; box-shadow: 0 6px 25px rgba(0,0,0,.07); padding: 20px 20px 40px; h2.widget-title{ padding: 15px 20px 30px; border-radius: 0; font-size: 20px; color: @titleColor; line-height: 26px !important; margin: 0px !important; text-transform: uppercase; } ul.fa-ul, ul{ padding-left: 0; margin-left: 20px; } } ul,li{ list-style: none; } .serivce-brochure{ padding: 40px 40px 50px; border-radius: 0; background: @primaryColor; margin: -20px -20px -40px !important; .title{ padding: 0px 0px 30px; border-radius: 0; font-size: 20px; color: @whiteColor; line-height: 26px !important; margin: 0px !important; text-transform: uppercase; } p{ color: #fff; } } .widget_nav_menu{ ul.menu{ margin: 0; } li{ padding: 0; + li{ margin-top: 20px; } a{ color: @bodyColor; font-size: 16px; font-weight: 500; position: relative; &:hover{ color: @primaryColor; } } &.current-menu-item{ a{ color: @primaryColor; } } &:last-child{ margin-bottom: 0; } } } .widget_contact_widget{ li{ margin-bottom: 20px; &:last-child{ margin-bottom: 0; } a{ color: @bodyColor; } } li.address1{ position: relative; i{ position: absolute; top: 0; display: inline-block; } span{ margin: -10px 0 0; display: inline-block; padding-left: 41px; } } i{ font-size: 25px; padding-right: 23px; color: @primaryColor; } } } .rs-portfolio.col-filter{ .portfolio-content{ .portfolio-filter{ text-align: center !important; } } } .rs-portfolio{ .portfolio-slider { .portfolio-item { position: relative; margin: 0 15px; .categories{ position: absolute; top: 16px; right: 25px; z-index: 11; font-size: 16px; a{ color: @primaryColor; &:hover{ color: @primaryColor; } } } .p-title{ position: absolute; bottom: 16px; left: 0; z-index: 11; width: 100%; padding: 0 25px; margin-bottom: 0; font-size: 18px; font-weight: 600 !important; line-height: 30px !important; a{ color: @primaryColor; &:hover{ color: @primaryColor; } } } } } &.style1{ .portfolio-item { overflow: hidden; position: relative; .categories, .p-title { position: static; a{ color: #fff; position: relative; z-index: 10; transition: 0.4s; &:hover{ color: @secondaryColor; } } } .portfolio-content{ position: absolute; text-align: center; width: 100%; height: 100%; top: 30%; left: 0; transition: 0.4s; opacity: 0; visibility: hidden; } &:hover{ .portfolio-content{ top: 0; opacity: 1; visibility: visible; } } } } &.style2{ .portfolio-slider{ .portfolio-item{ .portfolio-img{ position: relative; .portfolio-content{ position: absolute; width: 100%; visibility: hidden; transition: 0.4s; bottom: -50px; .categories{ top: auto; bottom: 20px; left: 25px; &:before{ display:none; } a{ color: #fff; &:hover{ color:@secondaryColor; } } } h3.p-title{ top: auto; bottom: 52px; a{ color: #fff; &:hover{ color:@primaryColor; } } } } } &:hover{ .portfolio-content{ opacity: 1; visibility: visible; bottom: 0; } } } } } &.style5{ .portfolio-item { .portfolio-img-sinlge{ overflow: hidden; img{ transition: 0.4s; -webkit-transform: scale(1); transform: scale(1); } } .portfolio-content{ display: flex; align-items: center; justify-content: space-between; padding-top: 15px; } .p-title{ padding: 0; } .categories, .p-title { position: static; } .categories{ background: #fbfbfb; padding: 2px 10px; } &:hover{ .portfolio-img-sinlge{ img{ -webkit-transform: scale(1.2); transform: scale(1.2); } } } } } &.style6{ .portfolio-item { .portfolio-img-sinlge{ overflow: hidden; img{ transition: 0.4s; -webkit-transform: scale(1); transform: scale(1); } } .portfolio-content{ padding-top: 15px; } .p-title{ padding: 0; } .categories, .p-title { position: static; } &:hover{ .portfolio-img-sinlge{ img{ -webkit-transform: scale(1.2); transform: scale(1.2); } } } } } &.gap_no{ .portfolio-slider { .portfolio-item { margin: 0; } } } } // Vertical Slider .rs-portfolio.vertical-slider.style4{ .portfolio-slider{ .portfolio-img{ position: relative; height: 100vh; overflow: hidden; background-position: center top !important; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .portfolio-item{ text-align: center; .categories{ top: auto; bottom: 50px; left: 0; right: 0; padding: 0 25px; color: #fff !important; a{ color: #fff !important; font-size: 14px; } } .p-title{ bottom: 80px; padding-top: 30px; a{ color: #fff !important; position: relative; &:before{ content: ""; width: 2px; height: 40px; background: @secondaryColor; text-align: center; display: block; margin: 0px auto; position: relative; top: -10px; transition: 0.4s; } } } &:hover{ .p-title a{ color: @secondaryColor !important; &:before{ height: 100px; } } .portfolio-img{ transform: scale(1.04); } } } } } .rs-project-section{ &.gray-bg{ background: #f7f7fc; padding: 90px 0 50px; h3{ margin-bottom: 50px !important; } } .project-item{ position: relative; overflow: hidden; z-index: 1; .project-content{ .p-icon, .title{ position: absolute; z-index: 11; margin: 0; } .p-icon{ visibility: hidden; transition: @transition; } .p-icon{ top: -100px; right: 25px; text-align: right; width: 30px; height: 30px; line-height: 30px; text-align: center; background: @primaryColor; border-radius: 50%; i{ color: #ffffff; } i, i:before{ font-size: 15px; } } .title{ font-size: 18px; font-weight: 600; span{ font-size: 16px; font-weight: 400; padding-bottom: 5px; display: block; } bottom: -100px; left: 25px; span, a{ color: #ffffff; } a:hover{ color: @primaryColor; } } } &:hover{ .project-content .title{ bottom: 20px; } .project-content .p-icon, .project-content .title{ opacity: 1; visibility: visible; } .project-content .p-icon{ top: 20px; } } } .view-project{ margin-top: 60px; } .nav-style .owl-controls .owl-nav{ position: absolute; left: 17.5%; } } body.single-services{ .rs-porfolio-details{ padding: 120px 0 0; } } .rs-portfolio-style7{ .showcase li { display: inline-block; vertical-align: top; padding: 0; margin: 0 0 0 0; position: relative; } a .showcase-caption { display: inline-block; z-index: 2; color: white; text-shadow: 0px 0px 20px rgba(0,0,0,0.33); padding:20px; } .showcase { margin: 0 auto 0; display: block; } .showcase li:nth-of-type(3n+4) { clear: left; } .showcase-item { line-height: 1; z-index: 3; } .showcase-item.hover { z-index: 1; } .showcase-item a { display: block; padding: 15px 25px 10px 0; } .showcase-item img { position: fixed; z-index: 1; opacity: 1; display: none; transition: opacity .35s,transform .35s; } .showcase-item a h3{ position: relative; z-index: 3; transition: opacity .35s,transform .35s; } .showcase-item a p { position: relative; z-index: 3; transition: opacity .35s,transform .35s; margin: 0 !important; } .showcase-item a:hover + img { top: 0; left: 0; right: 0; bottom: 0; width: 100%; display: block; } .showcase-item a:hover { color: white; background: none; } .showcase-item h3 { font-size: 36px; padding: .45em .6em 15px 0; font-weight: 600; letter-spacing: 0px; margin: 0; } } /*responsive styles below*/ @media screen and (max-width: 1023px) { .showcase { margin: 0 auto } .showcase-item a img { border: 0px; } } /* ---------------------------------- 10. cl-testimonial style 7 -------------------------------------*/ #cl-testimonial.testimonials-area.slider8 .images-testimonial .desc-text .flaticon-right-quote:before{ font-size: 50px !important; } #cl-testimonial{ .testimonial-slide7{ .slick-track{ padding-bottom: 40px; } .single-testimonial{ padding: 0; background: rgba(11, 43, 167, 0.6) !important; border-radius: 0; padding: 40px 45px 46px 146px; position: relative; margin: 0 20px; border-radius: 5px; color: #fff; &:after, &:before{ content: ''; position: absolute; display: block; background: transparent; transition: all 0.2s; width: 0px; height: 0px; z-index: 100; top: -3px; border: none !important; right: 0; } &:after{ top: auto; bottom: 0; border-bottom: 0 solid; border-top: 30px solid transparent; border-bottom-color: #fff; } } .right-content, .testimonial-left{ width: 100%; float: none; } .testimonial-left{ img{ border: 2px solid #fff; } } .right-content{ position: relative; i{ top: 5px; padding-right: 0; position: absolute; left: -18px; } } .testimonial-left{ position: absolute; left: 33px; top: 50%; transform: translateY(-50%); max-width: 100%; width: auto; border-radius:50%; } p{ margin: 0; padding: 0; } ul.slick-dots li { button{ padding: 2px 0; height: 8px; border:1px solid #fff; } &.slick-active{ button{ background: #fff; border-color: #fff !important; } } } } } #cl-testimonial.testimonials-area.slider8{ position: relative; .images-testimonial{ img{ display: block; width: 90px !important; height: 90px !important; margin: 1em auto; background-size: cover; background-repeat: no-repeat; background-position: center center; -webkit-border-radius: 99em; -moz-border-radius: 99em; border-radius: 99em; border: 5px solid #eee; box-shadow: 0 3px 70px 0 rgba(255, 255, 255, 1) !important; } .desc-text{ margin: 0; padding: 80px 0px 40px !important; text-align: center !important; font-size: 17px; line-height: 32px; max-width: 620px; margin: 0 auto; position: relative; i{ display: block; text-align: center; font-size: 50px; opacity: 0.3; margin: 0; top: 10px; position: absolute; left: 50%; transform: translateX(-50%); } } img{ width: 90px; margin: 0 auto 12px; box-shadow: 0 20px 68px rgba(34, 34, 34, 0.4); } } .testimonials-nav{ width: 230px; top: 60px; left: 50%; transform: translate(-50%,-50%); position: absolute; .slick-list.draggable{ display: none; } .slick-prev, .slick-next{ opacity: 1; } .slick-prev{ left: 20px; &:after{ font-size: 18px; content: "\f138"; font-family: Flaticon; display: inline-block; padding-right: 3px; vertical-align: middle; position: absolute; font-weight: normal; color: #fff; transform: translateX(-50%); background: @primaryColor; width: 50px; } } .slick-next{ right: 20px; &:after{ font-size: 18px; content: "\f137"; font-family: Flaticon; display: inline-block; padding-right: 3px; vertical-align: middle; position: absolute; font-weight: normal; color: #fff; transform: translateX(-50%); } } } .slick-prev{ left: 20px; &:after{ font-size: 18px; content: '←'; font-family: 'slick'; display: inline-block; padding-right: 3px; vertical-align: middle; position: absolute; font-weight: normal; color: #fff; transform: translateX(-50%); background: @primaryColor; width: 50px; height: 50px; border-radius: 50%; line-height: 45px; } } .slick-next{ right: 20px; &:after{ font-size: 18px; font-family: 'slick'; content: '→'; display: inline-block; padding-right: 3px; vertical-align: middle; position: absolute; font-weight: normal; color: #fff; transform: translateX(-50%); background: @primaryColor; width: 50px; height: 50px; line-height: 45px; border-radius: 50%; } } p{ margin: 0 auto !important; } ul.author{ text-align: center; padding: 0px !important; li{ font-size: 20px; text-transform: uppercase; font-weight: 500; &.titles-dsignation{ text-transform: capitalize; font-size: 15px; padding-top: 0; } } } &.text-left{ .images-testimonial { padding-left: 20px; padding-top: 45px; p{ position: relative; max-width: 100%; text-align: left; margin: 0 auto !important; } i{ font-size: 80px; position: absolute; left: -18px; opacity: 1; top: -30px; z-index: -1; } ul.author, p{ text-align: left !important; } } .testimonials-nav{ overflow: hidden; .slick-list{ float: right; } .slick-track{ width: 100% !important; float: right; } .slick-slide{ width: 15px !important; height: 6px; border-radius: 3px; background: @titleColor; display: inline-block; margin: 0 4px; cursor: pointer; transition: 0.3s; &:hover, &.slick-current{ background: @primaryColor; } } } } &:hover{ .slick-prev{ left: 0px; } .slick-next{ right: 0px; } } } body .rselement-dual-btn{ font-size: 16px; } #cl-testimonial.cl-testimonial1 { .testimonial-slide.slider1{ ul.cl-author-info{ li:first-child{ font-size: 16px !important; } } .testimonial-item{ .testimonial-content{ padding: 60px !important; text-align: center; p{ text-align: center; font-style: normal !important; } } i{ display: none; } } .slick-dots button{ width: 10px; height: 10px; padding: 2px; background: #ccc !important; border: none !important; } .slick-active button{ background: @secondaryColor !important; border: none !important; } } } .cl-testimonial.cl-testimonial9{ .content-box{ background: #fff; padding: 40px; min-height: 250px; position: relative; p{ padding: 0 !important; margin-bottom: 0 !important; font-style: normal; i{ text-align: left; } } &:after{ content: "//"; position: absolute; bottom: -17px; text-align: center; left: 40px; right: auto; display: block; font-size: 20px; color: @secondaryColor; } } .testimonial-image{ flex:1; padding-left: 20px; img{ border-radius: 50%; max-width: 90px; } } .img-box{ display: flex; flex-wrap: wrap; margin-top: 35px; margin-bottom: 30px; align-content: space-around; } i{ display: block; &:before{ font-size: 45px; color: @secondaryColor; } } ul.cl-author-info{ flex:1; padding-left: 0px !important; padding-top: 15px !important; } .slick-next, .slick-prev{ display: none; } .slick-next::after, .slick-prev::after{ background: rgba(0,0,0,0.4) !important; width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 50%; } &:hover{ .slick-next, .slick-prev{ display: block; } } .slick-active button { background: @secondaryColor !important; } } body .cl-testimonial2{ .image-testimonial{ .testimonial-content{ box-shadow: none; padding: 0; background: transparent !important; text-align: left !important; font-size: 24px !important; .quote-arrow{ .flaticon-right-quote{ transform: rotate(180deg) !important; &:before{ font-size: 60px !important; } } } .cl-author-info{ li:nth-child(2){ font-size: 18px !important } } p,ul li { text-align: left !important; } &:hover{ box-shadow: none !important; } li.ratings img{ margin-top: 5px; margin-left: 0 !important; } } } .slick-dots{ text-align: left !important; padding-left: 10px !important; margin-top: -20px !important; button{ width: 10px !important; height: 10px !important; } } } /* ---------------------------------- cl-testimonial style 10 Custom By Rashid -------------------------------------*/ .testimonial-slide10.slider9{ .slick-dots{ display: none !important; } .single-testimonial{ overflow: inherit; padding-left: 5px; padding-top: 5px; padding-bottom: 0; .image-testimonial{ position: relative; padding-bottom: 100px; .testimonial-image{ width: 70%; margin-right: auto; } .testimonial10-content-wrap{ max-width: 380px; position: absolute; bottom: 50px; z-index: 99; background: #fff; padding: 40px; right: 0px; box-shadow: 0 8px 30px -6px #ccc; .content-testimonial{ padding-bottom: 15px; i{ position: absolute !important; top: 60px !important; font-size: 150px; left: 30px; width: 60px; height: 60px; line-height: 60px; text-align: center; color: #fff !important; border-radius: 50%; padding-right: 0px !important; z-index: -1; opacity: 0.2; } } } } } } .testimonial-transparent{ .image-testimonial{ background: transparent !important; } } .rs-testi-7{ .rs-addon-slider .slick-dots{ bottom: 0; } } ul.latest_projects{ margin: 0; padding:0; list-style: none; } .testimonial-light{ #cl-testimonial{ .testimonial-slide7{ .single-testimonial{ margin: 0; border-left: 4px solid @primaryColor; box-shadow: none; &:before, &:after{ border-top-color: @primaryColor; border-right-color: @primaryColor; border-right: 30px solid @primaryColor; } &:after{ border-top: 30px solid transparent; border-bottom-color: @primaryColor; } .cl-author-info{ li:first-child{ font-size: 18px; color: @secondaryColor; margin-bottom: 0; padding-bottom: 0 !important; line-height: 28px; margin-top: 5px; } } } } .slick-dots{ text-align: right; bottom: -4px; li { button{ background: #fff !important; border: 1px solid #ffff !important; } } } } } .light-button{ #cl-testimonial ul.slick-dots li button{ border: 1px solid #fff !important; } } .mfp-close-btn-in { .mfp-close { top: 0px; right: 0px; text-align: right; padding-right: 0; display: inline-block; text-align: center; background: @primaryColor; width: 44px; border-radius: 50%; font-size: 27px; } } .rs_button{ &.btn-border{ border-width: 2px; color: @secondaryColor; border-style: solid; border-color: @secondaryColor; background: transparent; &:hover{ background: @secondaryColor; color: @whiteColor; } } } .rs-btn{ &.btn-center{ text-align: center; } &.btn-left{ text-align: left; } &.btn-right{ text-align: right; } } .portfolio-filter { margin-bottom: 20px; &.filter-center { text-align: center; } &.filter-right { text-align: right; } &.filter-left { text-align: left; } button { font-size: 16px; background: transparent !important; color: @titleColor; margin: 0 0 30px; display: inline-block; padding: 0; transition: 0.4s; outline: none; -webkit-transition: 0.4s; -ms-transition: 0.4s; position: relative; padding: 5px 20px; border-radius: 30px; border: 0; &:hover, &.active { color: @secondaryColor; background: transparent !important; } } } .recent-post-widgets{ li.show-featured{ float: left; width: 33.33%; padding:0; } } .rs-vertical-middle { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .rs-vertical-bottom { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: flex-end; -webkit-align-items: flex-end; align-items: flex-end; } // Portfolio Gutter Gap .gutter-no-gap .row { margin: 0 !important; [class*="col-"] { padding: 0 !important; margin: 0 !important; } } .rs-sl-social-icons{ a{ color: #ffffff; &:hover{ color: @secondaryColor; } } } .rs-slider { * { outline: none; } .slider-item { background-size: cover; background-repeat: no-repeat; } .slide-description { max-width: 640px; p { margin-bottom: 0; font-size: 18px; } } .slide-title { font-size: 65px; line-height: 75px; font-weight: 700 !important; } .slide-content { max-width: 1250px; margin: 0 auto; padding: 150px 0; position: relative; .watermark{ z-index: 5; position: absolute; font-size: 200px; font-weight: 900; font-family: @titleFont; top: 10%; opacity: 0.1; } span.number{ position: absolute; left: 0; right: 0; text-align: center; top: auto; bottom: 42px; font-size: 20px; font-weight: 400; font-family: @titleFont; color: @bodyColor; .first{ font-size: 60px; font-weight: 700; color: #000; } } .slide-content-wrap{ max-width: 800px; position: relative; z-index: 10; } &.center { text-align: center; .slide-content-wrap{ display: block; margin: 0 auto; } .slide-description { margin-left: auto; margin-right: auto; } } &.right { text-align: right; .slide-description { margin-left: auto; } .slide-content-wrap{ display: block; margin-left: auto; } } } .slider-button { margin-top: 48px; ul { margin: 0; list-style-type: none; li { display: inline-block; + li { margin-left: 10px; } } } } .slick-arrow { width: 42px; height: 42px; line-height: 42px; text-align: center; color: @primary-color; opacity: 1; -webkit-transition: 0.3s all ease; transition: 0.3s all ease; top: auto; bottom: 40; &:after { color: inherit; top: -2px; font-family: "Flaticon"; font-size: 25px; } } .slick-prev { right: auto; left: 45%; top: auto; bottom: 40px; z-index: 1; &:after { font-family: "Flaticon"; content: "\f111" !important; color: #000; text-indent: 4px; } } .slick-next { left: auto; right: 45%; top: auto; bottom: 40px; &:after { font-family: "Flaticon"; content: "\f110" !important; color: #000; text-indent: -4px; } } &:hover { .slick-arrow { opacity: 1; } } .readons{ border: 2px solid #000; color: #000; padding: 14px 35px; border-radius: 3px; font-size: 16px; font-weight: 500; &:hover{ background: #000; color: #fff; border: 2px solid #000; } } } .recent-post-widgets{ li.show-featured{ float: left; width: 33.33%; .post-img{ padding:3px; float: none; width: auto; display: block; img{ width: 100%; border-radius:3px; } } } } .single-teams{ .details-tabs-area{ margin-right: 30px; .team-detail-wrap{ background: #fff; padding: 25px 50px 30px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.03); margin-bottom: 40px; } } .row.btm-row{ align-items: center; position:relative; box-shadow: 0px 0px 32px 0px rgba(7, 28, 31, 0.05); background: #fff; margin-bottom: 70px; padding:40px 0 40px 25px; .col-lg-7{ &.rs-con-info{ position:relative; &:before{ content: "\f10b"; font-size: 250px; position: absolute; right: 130px; color: @titleColor; font-family: "Flaticon"; height: 100%; top: 74px; opacity: 0.02; } } } } .title-bg-gray{ color: @titleColor; padding-bottom: 0px; margin-bottom: 0; } .designation-info{ display: block; color: @primaryColor; margin-top: 0; padding-bottom: 5px; text-transform: uppercase; font-weight: 600; } .single-title, .title-bg-gray{ padding-bottom:15px; } .team-skill{ display: block; margin-bottom: 40px; } .ps-image{ img{ border-radius:0px; } } .short-desc{ margin-bottom: 25px; padding-right:50px; } .ps-informations{ text-align: left; overflow: hidden; position: relative; margin-bottom: 30px; h4.single-title{ margin: -8px 0 0px; font-weight: 600 !important; font-size: 24px; color: #fff; } .designation-info{ font-size: 16px; font-weight: 500; } ul{ margin: 0; padding: 0; text-align: left; list-style: none; font-weight: 500; li{ border: none !important; margin: 0; color: #555; span{ width: auto; color: #555; } i:before{ margin-left: 0 !important; font-size: 16px; } &.social-icon{ border: none; margin-top: 0; display: inline-block; padding-top: 0; i{ line-height: 35px; width: 30px; height: 35px; font-size: 14px; transition: 0.4s; &:hover{ color: @secondaryColor; } } } &.phone, &.email{ margin: 5px 0 10px; padding: 0; display:block; a{ color: #555; &:hover{ color: @secondaryColor; } } i{ font-size: 16px; color: @secondaryColor; margin-right: 18px; position: relative; top: 2px; font-weight: 500; display: inline-block; text-align: center; &:before{ font-size: 20px; } } } &.phone{ margin-left: 0; } } } .social-info{ margin-top: 15px; margin-left: 0px; a{ color: #555; } } } .project-desc{ margin-bottom:20px; background: #fff; overflow: hidden; padding-right:55px; p{ margin-bottom: 18px; } .nav{ margin-left: 0; background: #f4f7fc; li{ width: 33.333%; text-align: center; } li + li{ border-left: 1px solid #ddd; } .nav-link{ position: relative; overflow: hidden; font-weight: 600; font-size: 20px; padding: 15px 0; &:before{ position: absolute; content: ""; width: 100%; height: 3px; background: @primaryColor; bottom: -5px; left: 0; transition: 0.4s; } &.active { &:before{ bottom: 0; } } } } } .inner-images{ padding: 0 30px 0 0; } .team-detail-wrap-btm.team-inner{ background: @primaryColor; padding-bottom: 54px; margin-top: 40px; .siderbar-title{ color:#fff; &:before{ background:#fff; } } tbody tr{ background: none; td{ padding: 8px 0; color: #fff; } } } .team-inner{ padding: 40px 40px 44px; background: #fff; box-shadow: 0 0 30px rgba(0, 0, 0, 0.03); h3{ margin-bottom: 0; position: relative; padding-bottom: 6px; font-size: 20px; text-transform: capitalize; &:before{ content: ""; position: absolute; background: @primaryColor; height: 2px; width: 50px; left: 0; bottom: 0; display: block; z-index: 1; opacity: .5; } } ul{ margin: 0; padding: 0; list-style: none; li{ display: block; border-bottom: 1px solid #eee; padding: 13px 0; i{ color: @primaryColor; margin-right: 5px; display: none; } &:last-child{ border-bottom: none; padding-bottom: 0; } } } } .doctor-awardss.team-inner{ padding-top: 25px; } .siderbar-title{ margin: 0 0 30px; color: @primaryColor; text-transform: capitalize; } .chevron-right-icon{ li{ float: left; width: 50%; margin: 4px 0; } } h3.title-left-border{ margin-top: 45px; } .emergency-time{ padding: 40px 15px 32px; .emergency-title{ margin: 14px 0 4px; } i{ color: @primaryColor; &:before{ font-size:50px; } } p{ margin-bottom: 0; } } .team-skill{ padding-left: 0; width: 100%; overflow: hidden; position: relative; margin-top: -20px; h3{ font-weight: 500; margin-bottom: 20px; } .rs-progress { height: 8px; border: 1px solid @primaryColor; border-radius: 0; overflow: visible; padding: 1px; background: #fff; margin-top: 50px; .progress-bar { position: relative; text-align: left; line-height: 4px; border-radius: 0; box-shadow: none; background-image: linear-gradient(250deg, @secondaryColor 19%, @thirdColor 100%); font-size: 16px; .pb-label { position: absolute; left: 0px; top: -24px; color: @bodyColor; } .pb-percent { position: absolute; right: -13px; top: -30px; padding: 8px 5px; color: @bodyColor; } } } } } body .vc_progress_bar .vc_single_bar .vc_label_units{ position: absolute; right: 0; font-weight: 500; } body .vc_progress_bar .vc_single_bar{ border-radius: 0 !important; box-shadow: none !important; height: 8px; line-height: 8px; } body .vc_progress_bar .vc_single_bar .vc_bar{ border-radius: 0 !important; } body .vc_progress_bar .vc_single_bar .vc_label{ font-weight: 500; } // Portfolio Style2 body .rs-portfolio-style2 .portfolio-item .portfolio-content .p-icon{ width: 50px; height: 50px; line-height: 50px; i:before{ font-size: 18px; } } /*// Portfolio Style3*/ .rs-portfolio-style3 { .portfolio-item { position: relative; overflow: hidden; z-index: 1; .portfolio-img { position: relative; z-index: 1; img { width: 100%; } .p-link { position: absolute; bottom: 20px; right: 20px; display: inline-block; font-size: 36px; color: #ffffff; transition: all 0.3s ease; opacity: 0; i { margin-left: 2px; } &:hover { opacity: 0.7 !important; } } } .p-icon{ transition: all .4s ease-in-out 0s; bottom: -100px; right: 25px; width: 30px; height: 30px; line-height: 30px; text-align: center; background: @secondaryColor; border-radius: 50%; z-index: 7; opacity: 0; visibility: hidden; position: absolute; } .portfolio-content { position: absolute; padding: 24px 30px; opacity: 1; z-index: 10; top: 0; border:none; &:before{ background: rgba(0, 0, 0, 0.4) !important; opacity: 1; } .portfolio-inner{ bottom: 30px; width: auto; right: 40px; left: 40px; display: flex; flex-wrap: wrap; transition: all .5s ease; .p-title{ order: 2; flex: 0 0 100%; } .p-category{ flex: 0 0 100%; } } a { color: #fff; } .p-title { margin-bottom: 5px; font-size: 18px; transition: 0.3s ease all; line-height: 25px !important; } p { margin-bottom: 0; color: #fff; transition: 0.3s ease all; } } &:hover { .p-icon{ bottom: 30px; opacity: 1; visibility: visible; } .portfolio-content { opacity: 1; .portfolio-inner{ bottom: 50px; } } .portfolio-img { &:before { opacity: 0.7; } .p-link { opacity: 1; } } } } } .rs-team{ &.team-slider-style5{ .team-item{ padding:0; margin: 0 22px 20px; box-shadow: 0 0 10px rgba(0,0,0,.07); .team-inner-wrap{ .team-content { padding: 12px 20px } } } } } /*// Portfolio Style4*/ .rs-portfolio-style4 { .portfolio-item { position: relative; overflow: hidden; .portfolio-img { position: relative; z-index: 1; img { width: 100%; -webkit-transition: 1.3s all ease; transition: 1.3s all ease; } .p-link { display: none; } } .portfolio-content { position: absolute; padding: 30px 20px 15px; opacity: 0; z-index: 1; bottom: -150px; left: 50%; transform: translateX(-50%); width: 86%; z-index: 9; background: #ffffff; transition: 0.6s; a { color: @titleColor; display: block; } h3 { margin-bottom: 5px; font-size: 20px; -webkit-transform: translateY(20px); transform: translateY(20px); -webkit-transition: 0.4s all ease; transition: 0.4s all ease; } .p-title{ margin-bottom: 5px; font-size: 18px; } .tite-color{ &:hover { color: @primaryColor; } } p { margin-bottom: 0; color: #fff; -webkit-transform: translateY(40px); transform: translateY(40px); -webkit-transition: 0.4s all ease; transition: 0.4s all ease; } .p-category{ a{ color: @bodyColor; display: inline-block; } } } .pt-icon-plus{ position: relative; -webkit-transition: .5s all ease-out; transform: translateY(20px); transition-delay: .1s; color: #ed4e31; &:before{ font-family: FontAwesome; content: "+"; position: absolute; left: 50%; transform: translateX(-50%); right: 0; bottom: -40px; width: 30px; height: 30px; line-height: 30px; text-align: center; z-index: 9999; font-size: 35px; display: block; cursor: pointer; transition: 0.4s; } } &:hover { .portfolio-content { opacity: 1; bottom: 30px; h3 { -webkit-transform: translateY(0px); transform: translateY(0px); } p { -webkit-transform: translateY(0px); transform: translateY(0px); } } .portfolio-img { &:before { opacity: 0.7; } img { -webkit-transform: scale(1.3); transform: scale(1.3); } } .pt-icon-plus:before{ bottom: -6px; } } } } /*// Portfolio Style5*/ .rs-portfolio-style5 { .portfolio-item { position: relative; overflow: hidden; z-index: 1; .portfolio-img { position: relative; z-index: 1; img { width: 100%; transform: scale(1.2); transition: 0.6s; } .p-link { position: absolute; bottom: 20px; right: 20px; display: inline-block; font-size: 36px; color: #ffffff; transition: all 0.3s ease; opacity: 0; i { margin-left: 2px; } &:hover { opacity: 0.7 !important; } } } .p-icon{ transition: all .4s ease-in-out 0s; bottom: -100px; right: 25px; width: 30px; height: 30px; line-height: 30px; text-align: center; background: @secondaryColor; border-radius: 50%; z-index: 7; opacity: 0; visibility: hidden; position: absolute; } .portfolio-content { position: absolute; padding: 24px 30px; opacity: 0; z-index: 10; top: 0; visibility: hidden; width: 100%; height: 100%; text-align: center; &:before{ background: rgba(0, 0, 0, 0.4); content: ''; position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; width: 100%; height: 100%; background: rgba(0,0,0,.5); transition: all 0.4s; transform: scale(1.2); transition: 0.6s; } a { color: #fff; } .p-title { margin-bottom: 5px; font-size: 18px; transition: 0.3s ease all; line-height: 25px !important; } p { margin-bottom: 0; color: #fff; transition: 0.3s ease all; } .portfolio-inner{ position: relative; z-index: 11; transform: scale(1.3); transition: 0.5s; } } &:hover { .portfolio-content, .portfolio-content:before{ opacity: 1; visibility: visible; } .portfolio-img img, .portfolio-content:before, .portfolio-content .portfolio-inner{ transform: scale(1); } } } } .rs-portfolio-style6 { overflow: hidden; .portfolio-item { position: relative; overflow: hidden; border-radius: 0; .portfolio-img { position: relative; z-index: 1; overflow: hidden; img { width: 100%; -webkit-transition: 1.3s all ease; transition: 1.3s all ease; border-radius: 0px; } } .portfolio-content { position: absolute; padding: 17px 25px 15px; opacity: 0; visibility: hidden; z-index: 1; left: 0; bottom: -100px; bottom: -100px; text-align: left; width: 100%; border-top: 0; z-index: 11; transition: 0.6s; height: 100%; .p-title{ font-size: 18px; margin-bottom: 0; a { color: @primaryColor; } } &:before{ background: rgba(0, 0, 0, 0.4); content: ''; position: absolute; bottom: -150px; left: 0; opacity: 0; visibility: hidden; width: 100%; height: 100%; background: rgba(0,0,0,.5); transition: all 0.4s; border-radius: 5px; transition: 0.6s; } .p-category{ a { color: @bodyColor; } } h3 { margin-bottom: 6px; font-size: 18px; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: 0.6s all ease; transition: 0.6s all ease; font-weight: 600 !important; line-height: 30px !important; a { &:hover { color: @secondaryColor; } } } p { margin-bottom: 0; color: @secondaryColor; -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition: 0.6s all ease; transition: 0.6s all ease; } .portfolio-inner{ position: absolute; bottom: -100px; transition: 0.5s; left: 30px; } } &:hover { .portfolio-content { opacity: 1; visibility: visible; bottom: 0; h3 { -webkit-transform: translateY(0px); transform: translateY(0px); } p { -webkit-transform: translateY(0px); transform: translateY(0px); } &:before { opacity: 1; bottom: 0; visibility: visible; } .portfolio-inner{ bottom: 30px; } } .portfolio-img { img { -webkit-transform: scale(1.2); transform: scale(1.2); } } } } } .portfolio-slider-data{ .slick-dots{ text-align: center; bottom: -75px; li{ display: inline-block; width: 12px; height: 12px; border-radius: 30px; background: @primaryColor; transition: 0.4s; &:hover, &.slick-active{ background: @secondaryColor; } } } .slick-prev, .slick-next{ background: @secondaryColor; width: 42px; height: 42px; line-height: 42px; border-radius: 50px; z-index: 8; transition: 0.4s; i{ color: #fff; } &:after{ display: none; } opacity: 0; visibility: hidden; } .slick-prev{ left: -100px; } .slick-next{ right: -100px; } &:hover{ .slick-prev, .slick-next{ opacity: 1; visibility: visible; } .slick-prev{ left: -50px; } .slick-next{ right: -50px; } } .portfolio-item, .project-item{ .bg-overlay{ background: #000; opacity: 0.7; left: 0; top: 0; width: 100%; height: 100%; } } } .rs_testimonials_dots_style{ .rs-addon-slider .slick-dots { bottom: 0; text-align: right; bottom: 40px; right: 40px; } } .light .rs-portfolio-style5 .portfolio-item .portfolio-content{ background: #fff; } .rs-addon-slider, .rs-testimonial-dots-style2{ .slick-next, .slick-prev{ background: #fff; box-shadow: 0 0 25px rgba(0,0,0,.1); width: 50px; height: 50px; line-height: 50px; &.slick-prev::before, &.slick-next::before { font-family: unset; color: @titleColor; line-height: 48px; } &:hover{ &.slick-prev::before, &.slick-next::before { color: @secondaryColor; } } } } .rs-portfolio-agency{ .portfolio-filter { margin-bottom: 30px; } } .single-portfolios { .rs-porfolio-details{ &.project-gallery{ margin-bottom: -30px; } } .project-desc{ padding-right:10px; img{ border-radius: 5px; } } .project-img{ margin-bottom: 50px; } } .wp-block-gallery.aligncenter, .wp-block-gallery.alignleft, .wp-block-gallery.alignright{ display: flex !important; } .mfp-content{ figure{ position: relative; .mfp-title{ position: absolute; left: 0; bottom: 4px; width: auto; right: 0; color:#fff !important; background:rgba(255,255,255,.05); padding: 30px; .gallery-title-wrap{ h3{ margin: 0; color:#fff !important; font-size: 25px !important; font-weight: 600 !important; } } p{ margin: 12px 0 0; } p:empty { display: none; } } } } .ps-navigation { margin-top: 70px; margin-left: auto; margin-right: auto; width: 100%; ul { margin: 0 !important; list-style: none; .prev { display: inline-block; text-align: left; } .next { display: inline-block; text-align: right; word-break: break-all; } a { text-transform: uppercase; span { display: block; font-weight: normal; text-transform: capitalize; &:first-child { margin-top: 0; } } span.pagi-date { font-size: 13px; color: #aaa; line-height: normal; margin-top: 5px; } &:hover { color: @secondaryColor; } } } } .single-portfolios { .owl-carousel .owl-nav [class*="owl-"]{ top: calc(50% - 0) } .ps-navigation { margin-bottom: 0; margin-top: 30px; margin-left: auto; margin-right: auto; width: 100%; ul{ li{ a{ font-size: 15px; span{ font-size: 15px !important; } } } } } .owl-stage-outer{ height: auto !important; margin-bottom: 50px; } } /* ------------------------------------ 21. Gallery Css ---------------------------------------*/ .rs-galleys{ .file-list-image, .galley-img{ position: relative; margin-bottom: 30px; .p-zoom, .zoom-icon{ position: absolute; top:50%; left: 50%; transform:translate(-50%, -50%); opacity: 0; visibility: hidden; background: transparent !important; color: #fff; width: 50px; height: 50px; line-height: 50px; text-align: center; transition: all 0.5s ease-in-out; i{ &:before{ font-size: 22px; } } &:hover{ color:@primaryColor; } } &:before{ content: ""; position: absolute; background: rgba(0,0,0,.3); top: 0; bottom: 0; left: 0; right: 0; width: 0%; height: 100%; transition: all 0.4s ease-in-out; } &:hover{ &:before{ width: 100%; } .p-zoom, .zoom-icon{ visibility: visible; opacity: 1; color: #fff !important; } } } .no-gutters{ .file-list-image{ margin-bottom: 0; } } } .mfp-close{ opacity: 0.9; } .rs-banner { &.full-screen{ width: 100%; height: 100vh; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; position: relative; background-repeat: no-repeat; background-position: bottom center; } #particles-js { background-size: cover; height: 100%; position: absolute; width: 100%; z-index: 0; } .banner-content { position: absolute; top: 50%; transform: translateY(-50%); .banner_title { display: inline-block; margin-bottom: 16px; font-size: 65px; position: relative; z-index: 9; color: #444; line-height: 70px; } .banner-button { margin-top: 20px; &.btn-light { .readon:not(.border) { &:hover { background: transparent; border-color: @secondaryColor; color: #fff; } } .readon.border { border-color: #fff; color: #fff; &:hover { border-color: @primaryColor; } } } .readon{ border-color:@secondaryColor; background:transparent; padding: 11px 35px; &:hover{ background:@secondaryColor !important; color: @whiteColor !important; } } } .work-position { h3 { font-size: 40px; color: #bbb; display: inline-block; span{ margin-right: 10px; } } .cd-headline { display: inline-block; color: #bbb; font-size: 40px; line-height: 52px; font-weight: 500; } } } .cd-words-wrapper:after{ background-color: @primaryColor; height: 90%; top: 10px; width: 0; } ul { list-style-type: none; margin: 0; padding: 0; li { display: inline-block; margin: 0 25px 25px 0; } } .arrow-btn { width: 26px; height: 55px; bottom: 7%; left: 50%; z-index: 99; text-align: center; position: absolute; border: 1px solid #999; border-radius: 20px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); i { color: #999; font-size: 22px; line-height: 80px; -webkit-animation: bounce 2s infinite; -moz-animation: bounce 2s infinite; -ms-animation: bounce 2s infinite; -o-animation: bounce 2s infinite; animation: bounce 2s infinite; transition: 0.4s; -webkit-transition: 0.4s; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; &:hover { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } } } &.not-full-screen{ .banner-content{ position: relative; top: 0; transform: translateY(0); } .cd-words-wrapper{ margin-left: 0; } .container{ padding: 0; } } } /* ------------------------------------ 21. Portfolio Details ---------------------------------------*/ .rs-porfolio-details { img.mb-30{ margin-top: 20px; } .ps-informations { ul{ margin: 0; list-style: none; text-align: left; padding: 0; } ul { li { color: #fff; + li { padding-top: 10px; margin-top: 10px; border-top: 1px solid rgba(54, 54, 54, 0.1); } span { width: 150px; display: inline-block; font-weight: 600; } } } } .ps-informations{ padding: 40px 30px 46px; border-radius: 5px; margin-bottom: 60px; background-image: linear-gradient(250deg, @secondaryColor 19%, @thirdColor 100%); .info-title{ padding-bottom: 10px; color: #fff; } } .widget-title{ font-size: 28px; margin-bottom: 20px; } .widget_custom_html, .contact-me-widget{ padding: 60px 30px 40px; border-radius: 5px; margin-bottom: 60px; background-image: linear-gradient(250deg, #0b70e1 19%, #03228f 100%); .sidebar_number, .sidebar_question{ color: #FFFFFF; } .sidebar_question{ font-size: 24px; line-height: 42px; margin-top: 50px; } .sidebar_number{ font-size: 28px; margin-top: 27px; a{ color: @whiteColor; &:hover{ color: #eee; } } } } .rs-contact-box .address-item .address-icon, .rs-contact-box .address-item .address-icon:before{ background: #fff; } .rs-contact-box .address-item .address-icon i{ color: @secondaryColor; } #custom_html-5, .brochures-widget{ padding: 40px 30px 56px; background: #f6f7f9; border-radius: 5px; margin-bottom: 60px; .rs_button, .brochures-button{ margin-top: 35px; font-size: 16px; font-weight: 600; color: #fff; padding: 14px 40px 14px 40px; } p.brochures-txt{ margin: 0; } } .information-sidebar .widget_nav_menu li { a{ display: block; border: 2px solid #e8e8e8; padding: 16px 18px; transition: all .5s ease; border-radius: 5px; position: relative; font-size: 16px; font-weight: 700; } &:hover a, &.current-menu-item a{ background-image: linear-gradient(250deg, #1273eb 19%, #03228f 100%); color: #ffffff; } } .ps-image { text-align: center; margin-bottom: 10px; } .ps-share { ul{ margin: 0 } margin-top: 40px; .share-title { font-size: 20px; font-weight: 500; margin-bottom: 20px; } ul { li { display: inline-block; margin: 0 10px 14px 0; a { font-size: 20px; display: block; width: 50px; height: 48px; line-height: 48px; border: 1px solid @primaryColor; text-align: center; transition: @transition; &:hover { background-color: @primaryColor; color: @secondaryColor; } } } } } .project-desc { line-height: 30px; p:last-child { margin-bottom: 0; } .ps-title { margin-bottom: 20px; } } .ps-related-project { margin-top: 50px; .ps-related-title { font-size: 20px; font-weight: 500; margin-bottom: 30px; } .portfolio-item { margin-bottom: 20px; } } .portfolio-carousel { .owl-dots { display: none; } .owl-stage-outer{ height: auto !important; } .owl-nav{ display: none; .owl-prev{ left: 10px !important; min-height: 1px; transition: all .5s ease; } .owl-next{ right: 10px !important; min-height: 1px; transition: all .5s ease; } } &:hover{ .owl-nav{ display: block; } } .file-list-image{ img{ border-radius: 5px; } } } &.project-gallery { .ps-image-wrap { margin-top: 60px; } .file-list-image { margin-bottom: 30px; position: relative; background: #000000; border-radius: 5px; a{ &:hover{ i{ color: #fff; } } } img { -webkit-transition: 0.3s all ease; transition: 0.3s all ease; border-radius: 5px; } .p-zoom { display: inline-block; font-size: 14px; color: #fff; transition: all 0.3s ease 0s; height: 46px; line-height: 44px; width: 46px; border: 1px solid #ffffff; border-radius: 50%; text-align: center; position: absolute; left: 50%; top: 60%; opacity: 0; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); -webkit-transition: 0.3s all ease; transition: 0.3s all ease; } &:hover { img { opacity: 0.4; } .p-zoom { top: 50%; opacity: 1; &:hover { background: @primaryColor; color: #ffffff; border: 1px solid @secondaryColor; } } } } } } /*-------------------------------------------------------------- Rs service slider css --------------------------------------------------------------*/ #rs-services-slider { padding-bottom: 30px; .item-thumb { width: 100%; padding-right: 16px; img{ border-radius: 5px; } } .item-thumb .owl-dot { width: 48%; display: inline-block; justify-content: center; padding: 10px; float: left; cursor: pointer; margin-left: 10px; margin-bottom: 10px; } .device-lg .item-thumb .owl-dot, .device-sm .item-thumb .owl-dot { height: 150px; } .device-xs .item-thumb .owl-dot { width: 50%; padding: 10px; height: 100px; } .feature-content{ margin-bottom: 12px; } .img_wrap{ position: relative; overflow: hidden; margin-bottom: 24px; .feature-title{ position: absolute; bottom: 0; left: 0; width: 100%; margin: 0; padding: 33px; z-index: 9; color: #fff; a{ color: #fff; &:hover{ color: @primaryColor; } } } a{ img{ width: 100%; } } &:before{ content: ""; position: absolute; background: @secondaryColor; left: -60px; right: 0; bottom: -80px; display: block; height: 192px; opacity: .8; z-index: 1; transform: rotate(-3deg); width: 150%; } &:after{ content: ""; position: absolute; background: @secondaryColor; left: -150px; right: 0; bottom: -80px; display: block; height: 204px; opacity: .8; z-index: 1; transform: rotate(-3deg); width: 150%; } } .item-thumb .owl-dot span { position: relative; display: block; background-size: cover; background-position: center center; width: auto; height: 100%; -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, .05); -moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, .05); box-shadow: 0 0 5px 1px rgba(0, 0, 0, .05); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .item-thumb .owl-dot.active span, .item-thumb .owl-dot:hover span { opacity: .7; } .menu-carousel .heading-block h4 { margin-bottom: 7px; margin-top: 10px; letter-spacing: 2px; font-size: 20px; line-height: 20px; text-transform: uppercase; } .menu-carousel .heading-block h4 a { font-weight: 600; color: @titleColor; transition: .20s; } .menu-carousel .heading-block h4 a:hover { color: @primaryColor; } .menu-carousel .feature-content { position: relative; padding: 16px 0 0; border-radius: 0 0 5px 0px; text-align: left; .service_details{ padding-top: 36px; } } .menu-carousel .heading-block p { margin-bottom: 0; } .menu-carousel .heading-block .readon { margin-top: 20px; } .menu-carousel .heading-block .food-info { color: #BBB; text-transform: uppercase; font-weight: 400; letter-spacing: 2px; font-size: 14px; } .food-price { position: absolute; top: 40px; right: 50px; font-size: 20px; letter-spacing: -1px; font-weight: 500; } .menu-carousel .more-link { margin-top: 35px; border-bottom: 1px solid #333 !important; } .more-link { font-style: normal; border-bottom: 0; color: #333; margin-top: 10px; font-size: 14px; } .team-title h4 { font-size: 15px; } .team-title span { font-style: normal; margin-bottom: 15px; color: #aaa !important; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; } .entry { padding: 0; margin: 0; border-bottom: 0; -webkit-box-shadow: 0 0 15px 2px rgba(0, 0, 0, .08); -moz-box-shadow: 0 0 15px 2px rgba(0, 0, 0, .08); box-shadow: 0 0 15px 2px rgba(0, 0, 0, .08); } .entry-title { background-color: #FFF; padding: 15px; } .entry-title h2 { text-transform: none; font-size: 17px; font-weight: 500; letter-spacing: 0; } .entry-meta { margin: 8px 0 0; } .ipost .entry-meta li a { font-size: 11px; font-style: normal; text-transform: uppercase; letter-spacing: 1px; color: #999; } .entry-meta li:before { content: '\00b7'; opacity: 1; } .service-button { margin: 80px 0 80px 15px; } .device-sm .service-button, .device-xs .service-button { margin: 30px 0 0; } .clfeatures .cl-ft-item { border-radius: 5px; img { display: block; margin: 0; border-radius: 5px; } } .item-thumb .owl-dot { position: relative; } .item-thumb .owl-dot:before { content: ""; position: absolute; left: 10px; top: 10px; z-index: 99; width: calc(~"100% - 20px"); height: calc(~"100% - 20px"); background: rgba(0, 0, 0, 0.8); transition: all 500ms ease; opacity: 0; border-radius: 5px; } h5.overlay-feature-title { font-size: 16px; line-height: 140%; font-weight: normal; margin: 0; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 9999; text-align: center; width: calc(100% - 20px); transition: all 500ms ease; opacity: 0; } h5.overlay-feature-title a { color: #fff; pointer-events: none; } .item-thumb .owl-dot:hover:before, .item-thumb .owl-dot.active:before { opacity: 1; } .item-thumb{ .owl-dot{ &.service_icon_style{ float: none; text-align: center; background: #ffffff; padding-top: 28px; padding-bottom: 22px; border-radius: 3px; box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.02); &:before{ display: none; } .tile-content{ margin-top: 10px; font-weight: 600; margin-bottom: 0; font-size: 16px; text-transform: uppercase; a{ color: @titleColor; } } &.active, &:hover{ .tile-content{ a{ color: @hoverColor; } } } } } } .item-thumb .owl-dot:hover h5.overlay-feature-title, .item-thumb .owl-dot.active h5.overlay-feature-title{ opacity: 1; } @media (min-width:992px) { #header, #header-wrap { z-index: 200; background-color: transparent !important; background-repeat: repeat-x; background-position: center bottom; background-size: auto 100%; -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } #primary-menu ul li>a { padding-top: 32px; padding-bottom: 10px; } #header.sticky-header #header-wrap { background-color: transparent !important; box-shadow: none; } .slider-caption h2 { font-size: 76px; } .food-price { font-size: 24px; top: 50px; right: 60px; } } .services-wrap { .services-item { position: relative; padding: 0px 25px 65px; z-index: 10; &:after { content: ''; position: absolute; left: 0; z-index: -1; height: 100%; width: 100%; background: #fff; transition: @transition; top: 50%; transform: scale(1,0.9) translateY(-50%); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); opacity: 0; } &:hover { .services-desc { &:after { background: @primaryColor; width: 100px; } } &:after { opacity: 1; transform: scale(1,1) translateY(-50%); } } } .services-icon { position: relative; display: inline-block; font-size: 64px; color: @primaryColor; } .services-title { font-size: 20px; margin-top: 35px; margin-bottom: 25px; } .services-desc { position: relative; &:after { content: ''; position: absolute; left: 0; height: 2px; width: 50px; bottom: -45px; background: rgba(0, 0, 0, 0.1); transition: @transition; } p{ margin-bottom: 55px; } } } } /*-------------------------------------------------------------- Rs service Grid css --------------------------------------------------------------*/ .rs-service-grid{ .service-item{ position: relative; .service-img{ position: relative; overflow: hidden; img{ border-radius: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.4s linear; } &:before{ content: ""; position: absolute; background: @secondaryColor; left: -73px; right: 0; bottom: -28px; display: block; height: 155px; opacity: .8; z-index: 1; transform: rotate(-8deg); width: 150%; transition: all 0.4s ease-in-out; } &:after{ content: ""; position: absolute; background: @secondaryColor; left: -73px; right: 0; bottom: -28px; display: block; height: 136px; opacity: .6; z-index: 1; transform: rotate(-8deg); width: 150%; transition: all 0.4s ease-in-out; } .p-title{ font-size: 20px; margin:0; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; padding: 28px 0; font-weight: 500; margin: 0; z-index: 9; a{ color: #fff; opacity: 1; } } } .service-content{ display: block; .service-excerpt{ padding-top: 0; p{ -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -o-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.4s ease-in-out; padding: 0 25px; } } } .service-content{ position: absolute; opacity: 0; padding: 20px; color: #fff; top: 0; left: 0; width: 100%; height: 100%; text-align: center; overflow: hidden; transition: all 0.4s ease-in-out; z-index: 9; &:before{ content:""; position: absolute; background: @secondaryColor; left: 0; right: 0; bottom: 0; display: block; top: 0; opacity: 0; z-index: 0; } .service-button{ -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -o-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.4s linear; .readon.rs_button{ height: 50px; line-height: 48px; background: #fff; border: 2px solid; border-color: #fff; color: @secondaryColor; &:hover{ background:#fff; padding-right: 55px; border: 2px solid; border-color: @secondaryColor; color: @secondaryColor; &:before{ right:35px; color: @secondaryColor; } } } } } &:hover{ .service-content{ opacity: 1; &:before{ opacity: .8; } } .service-button{ -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); opacity: 1; } .service-img{ h3.p-title{ display: none; } &:before, &:after{ opacity: 0; height: 0; } img{ -webkit-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -ms-transform: scale(1.1,1.1); transform: scale(1.1,1.1); } } .service-content{ .service-excerpt{ p{ -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); opacity: 1; } } } } } &.rs-service-style2{ .service-item{ .service-img{ &:before, &:after{ height: 90px; transform: rotate(0deg); bottom: 0; z-index: 0; } h3.p-title{ padding: 20px 0 14px; } } .service-content{ .service-excerpt{ position: absolute; top: 50%; transform: translateY(-50%); width: 100%; left: 0; right: 0; z-index: 99; } } } } &.rs-service-stylestyle4{ .service-item-four{ position: relative; overflow: hidden; &:after{ top: 0; left: 0; right: 0; bottom: 0; opacity: 0.9; content: ""; position: absolute; border-radius: 0; z-index: 0; transition: 0.4s; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0b2ba7+0,7db9e8+100&1+0,0+100 */ background: -moz-linear-gradient(bottom, rgba(0,0,0, 0.4) 0%, rgba(51,51,51,0.5) 70%); /* FF3.6-15 */ background: -webkit-linear-gradient(bottom, rgba(0,0,0, 0.4) 0%,rgba(51,51,51,0.5) 70%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to top, rgba(0,0,0, 0.4) 0%,rgba(51,51,51,0.5) 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#000000333',GradientType=0 ); /* IE6-9 */ } &:before{ top: 0; left: 0; right: 0; bottom: 0; opacity: 0.9; content: ""; position: absolute; background: transparent; border-radius: 0; z-index: 1; transition: 0.4s; } &:hover{ &:before{ background-color: rgba(0,0,0, 0.7); } } .service-content{ .p-title{ margin-bottom: 12px; font-size: 20px; width: 100%; } padding: 0 20px; position: absolute; left: 0; width: 100%; z-index: 1; transition: 0.4s; bottom: 15px; p{ line-height: 22px; opacity: 0; visibility: hidden; margin-bottom: 0; height: 0; transition: 0.4s; color: #ffffff; display: block; } h3{ color: #fff; padding: 12px 15px 0; display: inline-block; font-size: 18px; margin: 0; } &:after, &:before{ background: transparent; } } &:hover{ .service-content{ bottom: 15px; h3{ color: #fff; background: transparent; } p{ opacity: 1; visibility: visible; height: auto; } } } } } .show_cate_ser{ display: block; font-size: 14px; } } .porfolio-sidebar{ margin: 0; padding: 0; list-style: none; li{ margin-bottom: 10px; width: 100%; overflow: hidden; span{ width: 55%; font-weight: 700; float: left; color: @titleColor; font-size: 16px; } } } .box-service{ .rs-services-default{ .services-wrap{ .services-item{ padding: 25px 25px 25px 10px; transition: all 0.6s ease 0s; background: #fff; box-shadow: 0 14px 20px rgba(0, 0, 0, 0.05); margin-bottom: 30px; border-radius: 5px; } } } } /* Processbar CSS */ .cdev div { position: absolute; height: 150px; width: 150px; border-radius: 50%; } .skillbar-wrap { position: relative; height: 150px; width: 150px; .skill-title{ position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 113px; &:after{ content: ''; position: absolute; height: 113px; width: 1px; border: 1px dashed @secondaryColor; display: block; left: 50%; bottom: 26px; transform: translateX(-50%); } } } .vc_progress_bar { margin-bottom: 0; h2 { font-size: 24px; line-height: 34px; margin-bottom: 45px; text-transform: uppercase; } .vc_single_bar { background: #eee; margin-top: 23px; -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1); line-height: 12px; height: 12px; + .vc_single_bar { margin-top: 50px; } .vc_label { font-size: 13px; text-transform: uppercase; color: @bodyColor !important; text-shadow: none; padding: 0; position: absolute; text-shadow: none !important; top: -22px; padding: 0 !important; font-size: 13px; } .vc_label_units { margin-left: 6px; } } } .cdev div span { position: absolute; font-family: Arial; font-size: 25px; line-height: 105px; height: 70%; width: 70%; left: 15%; top: 15%; text-align: center; border-radius: 50%; background-color: white; } .cdev .background { background-color: #b3cef6; } .cdev .rotate { clip: rect(0 75px 150px 0); background-color: #4b86db; } .cdev .left { clip: rect(0 75px 150px 0); opacity: 1; background-color: #b3cef6; } .cdev .right { clip: rect(0 75px 150px 0); transform: rotate(180deg); opacity: 0; background-color: #4b86db; } @keyframes toggle { 0% { opacity: 0; } 100% { opacity: 1; } } /*-------------------------------------------------------------- Floating CSS --------------------------------------------------------------*/ .floating-top{ position: relative; z-index: 1; } /*-------------------------------------------------------------- Latest product slider --------------------------------------------------------------*/ .rs-products-slider{ .product-item{ background:#fff; text-align: center; padding: 0px 0px 30px; box-shadow: 0 0 150px #eee; h4.product-title{ padding-top:20px; margin-bottom: 15px; a{ color: @titleColor; &:hover{ color: @primaryColor; } } } .product-img{ img{ width: auto; margin: 0 auto; } } .product-price{ font-size: 16px; color: @titleColor; ins{ background:transparent !important; color: @primaryColor } } .product-btn{ padding-top:15px; a{ padding: 0 30px; height: 44px; line-height: 44px; display: inline-block; position: relative; font-size: 17px; background:@btnBgColor; font-weight: 500; border-radius:0; color: #fff; &:hover{ background:@btnHoverColor; } } } } &.rs-products-grid{ .product-item-inner{ padding: 0 0 30px; background: none; text-align: center; margin-bottom: 30px; .product-img{ position:relative; img{ width: 100%; } .product-btn{ a{ background: none; font-size: 0; background: #fff; border: none; padding: 0; position: absolute; bottom: 25px; transform: translateY(-200px); right: 10px; transition: all 0.5s ease-in-out 0s; padding: 0; opacity: 0; margin: 0; height: 45px; width: 45px; line-height: 45px; border-radius: 3px; &:before{ color: @titleColor; font-size: 27px; } &:hover{ &:before{ color: @primaryColor; } } &.wc-forward{ font-size: 14px; color: @titleColor; padding: 0; width: 90px; height: 34px; line-height: 37px; &:hover{ background:@primaryColor; color: #fff; } } &.added{ display: none; } } } } ins{ background:none; } } .product-item { background: none; text-align: center; padding:0 15px; box-shadow: none; h4.product-title{ margin-bottom: 5px; } &:hover{ .product-img{ .product-btn{ a{ transform: translateY(0); opacity: 1; } } } } } } } .wp-block-button__link{ background: @secondaryColor !important; border-radius:0 !important; padding: .467em 1.333em !important; } .wp-block-button{ margin-bottom: 20px !important; } .is-style-outline{ color: @secondaryColor !important; a{ background: transparent !important; border-color:@secondaryColor !important; } } .wp-block-quote.is-large, .wp-block-quote.is-style-large{ padding: 0 40px 40px } /*-------------------------------------------------------------- Parter CSS --------------------------------------------------------------*/ .partner-carousel{ .partner-item{ width: 100px; display: block; margin: 0 auto; img{ opacity: 0.3; } &:hover{ img{ opacity: 1; } } } } .wp-block-cover-image-text, .wp-block-cover-text, section.wp-block-cover-image h2, .wp-block-cover-text a{ color: #fff !important; }