Sid Gifari File Manager
🏠 Root
/
home
/
ailwtbdh
/
superstepsgroup.com
/
plugin-old
/
wp-rollback
/
rselements
/
assets
/
css
/
Editing: rsaddons.less
@transition: all 0.4s ease 0s; @primaryColor: #101010; @secondaryColor: #1273eb; @whiteColor: #ffffff; @titleColor: #0a0a0a; @formBg: #0e1254; @hoverColor: #1273eb; @linkColor: #1273eb; /*-------------------------------------------------------------- Heading css --------------------------------------------------------------*/ .rs-heading, .rs-dual-heading{ .title-inner{ .sub-text{ margin: 0 0 10px; display: block; font-size: 18px; font-weight: 600; line-height: 26px; &.title-upper{ text-transform: uppercase; } } .title{ color:@titleColor; line-height: 40px; margin-bottom: 15px; margin-top: 0; &.title-upper{ text-transform: uppercase; } span.watermark { position: absolute; font-size: 80px; text-transform: uppercase; font-weight: 800; z-index: -1; opacity: 0.05; width: 100%; left: 0; color: inherit; } } } &.big{ .title-inner{ h2{ font-size: 36px; line-height: 44px; } } .description{ p{ font-size: 20px; line-height: 32px; } } } &.style4{ .title-inner{ .title{ margin-bottom: 8px; } .title-img{ margin-bottom: 12px; } } } &.style5, &.style12{ .sub-text{ display: inline-block !important; } } &.style2{ position: relative; padding-bottom: 15px; &:after{ content: ""; position: absolute; border: 0; width: 66px; height: 2px; z-index: 9; margin-left: 0; left: 0; bottom: 0; } &.center{ &:after{ transform: translateX(-50%); left: 50%; } } &.right{ &:after{ left:auto; right: 0; } } h2{ margin-bottom: 12px; } .description{ p{ margin-bottom: 12px; } } &.Lite{ &: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; z-index: 9; margin-left: 0; left: 0; top: 14px; } p{ margin-bottom: 12px; } } &.Lite{ .description{ &:after{ background: #fff !important; } } } } &.style1{ position: relative; padding-bottom: 12px; h2{ margin-bottom: 12px; } .description{ position: relative; padding-right: 80px; &:after{ content: ""; position: absolute; border: 0; width: 60px; height: 2px; background: @primaryColor; z-index: 9; margin-left: 0; right: 0; top: 14px; } p{ margin-bottom: 12px; } } &.Lite{ .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: @primaryColor; z-index: 9; margin-left: 0; left: 0; top: 0; } } .description{ padding-left: 25px; position: relative; &:after{ content: ""; position: absolute; border: 0; width: 2px; height: 100%; background: @primaryColor; z-index: 9; margin-left: 0; left: 0; top: 0; } } h2{ margin-bottom: 5px; } &.text-center{ .description{ padding-top: 15px; padding-left: 0px; &:after{ display: none; } } } &.Lite{ .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: 9; 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; } } } &.Lite{ .sub-text{ &:after{ background: #fff !important; } } } &.dark{ .sub-text{ &:after{ background: #232023 !important; } } } } &.style4{ &.left{ .title-inner{ .sub-text{ padding-left: 43px; &:before{ left: 0; } } } } &.right{ .title-inner{ .sub-text{ padding-right: 43px; &:after{ right: 0; } } } } .title-inner{ position: relative; padding-bottom: 12px; h2{ margin-bottom: 12px; display: block; } .sub-text{ position: relative; color: @secondaryColor; display: inline-block; &:before, &:after{ content: ""; position: absolute; border: 0; width: 35px; height: 2px; background: @primaryColor; z-index: 9; margin-left: 0; left: -20px; top: 12px; } &:before{ left: -40px; } &:after{ left: auto; right: -40px; } p{ margin-bottom: 12px; } } } &.Lite{ .sub-text{ &:before, &:after{ background: #fff !important; } } } &.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: 9; margin-left: 0; right: 0; top: 4px; } p{ margin-bottom: 12px; } } &.Lite{ .sub-text{ &:after{ background: #fff !important; } } } &.text-center, &.text-right{ .title-inner{ .sub-text{ display: inline-block; } } } } } &.style9{ .title-inner{ margin-bottom: 35px; .title-img.top{ margin-bottom: 15px; } } .title-upper{ margin-bottom: 5px; } .bottom-line{ .title{ margin-bottom: 8px; position: relative; padding-bottom: 20px; &:after{ content: ""; position: absolute; border: 0; width: 80px; height: 2px; background: @primaryColor; z-index: 9; margin-left: 0; bottom: 0; left: 0; } } } &.text-center{ .bottom-line { .title{ &:after{ transform: translateX(-50%); left: 50%; } } } } .yes_animation img{ display: none; } .yes_animation{ position: relative; &:before{ position: absolute; content: ''; left: 0; bottom: 0; width: 100px; height: 14px; animation: waving-line 12s linear infinite; -webkit-animation: waving-line 12s linear infinite; } } } &.style10{ &.text-center{ text-align: left !important; .title-inner{ text-align: center; } } &.text-right{ text-align: left !important; .title-inner{ text-align: right; } } .title-inner{ transform: rotate(-90deg) translatex(-50%); display: inline-block; transform-origin: left center 0; .title{ white-space: nowrap; position: relative; top: 40px; left: 10px; margin-bottom: 0; } } .description{ transform: rotate(-90deg); display: inline-block; } } &.style11{ text-align: right !important; &.text-center{ text-align: right !important; .title-inner{ text-align: center; } } &.text-right{ text-align: right !important; .title-inner{ text-align: right; } } .title-inner{ transform: rotate(90deg); display: inline-block; } .description{ transform: rotate(90deg); display: inline-block; } } } .rs-animated-heading, .rs-dual-heading{ .title{ span{ display: inline-block; } } } .slick-slide{ outline: none; } .rs-animated-heading{ .title-inner{ .title, .title .cd-headline{ color:@titleColor; line-height: 56px; } .title{ margin-bottom: 20px; &.title-upper{ text-transform: uppercase; } .cd-headline{ font-weight: 700; color: @secondaryColor; p{ margin-bottom: 0; &:last-child{ left: -20px; } } } } } .cd-words-wrapper{ text-align: center; } } .overflow-visible > div{ overflow: visible !important; } .title-no-margin h4.title { margin-bottom: 5px; } .title-no-margin h3.title { margin-bottom: 3px !important; font-size: 20px; } .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; } } } .no-padding { padding: 0 !important; } //contact box .rs-contact-box{ text-align: left; .address-item{ display: flex; position: relative; align-items: center; margin-bottom: 30px; &:last-child{ margin-bottom: 0 !important; } .address-icon{ display: inline-block; position: relative; background: @secondaryColor; height: 70px; width: 70px; line-height: 70px; border-radius: 100%; text-align: center; &:after{ content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 70px; height: 70px; background: @secondaryColor; border-radius: 50%; opacity: 0; visibility: hidden; } &:before{ content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 70px; height: 70px; background: @secondaryColor; border-radius: 50%; animation: pulse-border 1500ms ease-out infinite; opacity: 0; visibility: hidden; } &:hover { border-color: rgba(255,255,255,0.7); } i{ text-align: center; color: #fff; border-radius: 100%; font-size: 30px; position: relative; line-height: 70px; z-index: 9; width: 100%; vertical-align: middle; margin-left: 0; height: auto; } } &:last-child{ .address-icon{ &:after{ display: none; } } } .address-text{ .contact-title{ margin-bottom: 1px; font-weight: 500; font-size: 20px; margin-top: 6px; } a{ &:hover{ color: @primaryColor; } } } &:hover{ .address-icon{ &:after, &:before{ opacity: 1; visibility: visible; } } } &.vertical{ display: block; text-align: center; .address-text{ span.label{ display: block; font-weight: 500; font-size: 20px; margin-top: 15px; } } } &.horizontal{ .address-icon{ margin-right: 20px; } .address-text > div{ display: flex; align-items: center; } } } } /** 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{ position: relative; background-repeat: no-repeat !important; background-size: cover !important; padding: 100px 20px; &.center{ .overly-border{ margin: 0 auto; } } &.left{ .overly-border{ margin-left: 0; margin-right: auto; } } &.right{ .overly-border{ margin-left: auto; margin-right: 0; } } &.style1{ .video-desc{ top: 60px; } } .video-desc{ z-index: 1; font-size: 20px; position: relative; span{ display: block; font-size: 22px; font-weight: 400; } } .overly-border{ border: 1px solid @primaryColor; border-radius: 50%; position: absolute; width: 100px; height: 100px; top: 40%; left: 50%; transform: translate(-50%, -50%); } .video-content { 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{ .rs-icon-inner{ display: flex; justify-content: center; align-items: center; position: relative; margin-top: 60px; .rs-icon-btn{ margin-right: 0; a{ display: block; background: #ffffff; color: @primaryColor; padding: 8px 34px; border-radius: 30px; transition: 0.4s; font-size: 16px; position: relative; transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; z-index: 1; overflow: hidden; border: 3px solid #ffffff; &:before{ display: block; position: absolute; top: 0px; right: 0px; width: 0px; height: 100%; z-index: -1; content: ''; background: @primaryColor; border-radius: 30px; transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; } &:hover{ background: @primaryColor; color: #ffffff; opacity: 0.9; &:before{ left: 0%; right: auto; width: 100%; } } } } .icon-area{ position: relative; display: none; left: -60px; .overly-border{ width: 60px; height: 60px; } .popup-videos{ width: 50px; height: 50px; line-height: 56px; i{ font-size: 24px; } } } } } } /** Counter up CSS ---------------------- ----------------------------------------*/ .counter-top-area{ position: relative; padding: 0 !important; .rs-counter-list{ .counter-icon{ display: inline-block; i{ font-size: 50px; color:#dcdcdc; line-height: 60px; transition: all 0.3s ease 0s; } } .count-text{ .rs-counter{ font-size: 50px; color: @primaryColor; line-height: 60px; display: inline-block; transition: all 0.3s ease 0s; } .title{ font-size: 18px; color: #666; line-height: 18px; transition: all 0.3s ease 0s; } } } &.style1{ text-align: center; .count-number span{ padding: 10px 0px 10px 0px; } } &.style2{ .rs-counter-list{ display: flex; align-items: center; .counter-icon{ display: inline-block; padding-right: 15px; } } } &.style3{ .count-text{ display: flex; align-items: flex-end; .title{ position: relative; bottom: 8px; } } } } /* Services CSS ---------------------- ----------------------------------------*/ .elementor-widget-container{ &:hover{ .rs-addon-services.services-style2::before{ transform: scaleY(1); } } } .rs-addon-services { text-align: center; .services-part { position: relative; .services-icon { display: inline-block; padding: 5px; font-size: 50px; line-height: 50px; color: @primaryColor; transition: all ease .3s; i { transition: all ease .3s; &:before{ margin: 0; } } img { max-width: unset; width: 50px; height: 50px; } &.grayscale { img { filter: gray; -webkit-filter: grayscale(1); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); transition: all 0.3s ease 0s; &:hover { filter: none; -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -ms-filter: grayscale(0); -o-filter: grayscale(0); filter: grayscale(0); } } } &:hover { color: @secondaryColor; } &:after { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 90px; height: 90px; background: @primaryColor; border-radius: 50%; animation: pulse-border 1500ms ease-out infinite; opacity: 0; transition: all 0.3s ease 0s; visibility: hidden; } } .services-text { padding: 10px 0 0; position: relative; .services-title { position: relative; .title { font-size: 24px; margin: 0 0 10px; color: @titleColor; a { color: @titleColor; &:hover { color: @hoverColor; } } &:before { content: "01."; font-size: 50px; font-weight: bold; color: @primaryColor; position: absolute; transition: all .3s ease 0s; top: 0; left: 0; z-index: 9; } } } .services-txt { margin: 0; transition: 0.4s; } .services-btn-part { margin: 15px 0 0; .services-btn { position: relative; display: inline-block; color: @secondaryColor; transition: all ease .3s; i { transition: all ease .3s; } &:hover { color: @primaryColor; } &.icon-after { span { float: left; } i { margin-left: 10px; } } &.icon-before { span { float: right; } i { margin-right: 10px; } } } } } &:after { content: ""; width: 0; height: 4px; background: @primaryColor; position: absolute; transition: all .3s ease 0s; bottom: 0; left: 50%; z-index: 9; transform: translateX(-50%); } &:hover { .services-icon { color: @secondaryColor; &:after { opacity: 1; visibility: visible; } } .services-text { .services-title { .title { color: @primaryColor; transition: 0.4s; a { color: @primaryColor; } } } } &:after { width: 100%; } } } &.services-style2 { &:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: @primaryColor; transform: scaleY(0); transition: all .3s ease 0s; } .services-part { background: 0 0; padding: 30px 0; text-align: left; position: relative; z-index: 1; &:hover{ .services-icon, .services-title .title, .services-txt{ color:#fff; } } } &:hover { &:before { transform: scaleY(1); } } } &.services-style3 { position: relative; .services-part { border-bottom-width: 4px; transition: all .3s ease 0s; position: relative; .services-icon { width: 90px; margin: 0 auto; position: absolute; left: 50%; top: -45px; transform: translateX(-50%); color: #fff; background: @primaryColor; box-shadow: 0px 3px 36px rgba(0,0,0,.04); transition: all .3s ease 0s; height: 90px; line-height: 90px; text-align: center; border-radius: 100%; i { position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; } img { width: 45px; height: 45px; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; } } &:hover { .services-icon { top: -35px; } } .services-text{ padding: 90px 30px 50px } } } &.services-style4, &.services-style7 { .services-part { display: flex; } } &.services-style7{ .image_border_shape{ text-align: center; .services-icon { position: relative; top: 3px; } } } &.services-style5{ position: relative; overflow: hidden; &:before, &:after{ content: ""; position: absolute; left: 50%; transform: translateX(-50%); background: #f3f3f3; border-radius: 50%; border: 1px solid #f3f3f3; transition: 0.4s; } &:after{ bottom: -125px; background: transparent; width: 170px; height: 170px; border-radius: 50%; border: 1px solid #f3f3f3; } &:before{ background: #f3f3f3; width: 126px; height: 126px; border-radius: 50%; bottom: -98px; } &.services-style5.service_shape_{ &:before, &:after, .services-part:before{ display: none; } } .services-part { position: relative; &:before{ content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background: #f3f3f3; transition: 0.5s; height: 1px; width: 0; } .services-text{ margin-top: -50px; } .services-btn-part{ position: absolute; margin: 0; line-height: normal; text-align: center; bottom: -150px; left: 50%; transform: translateX(-50%); z-index: 10; transition: 0.5s; opacity: 0; visibility: hidden; } .services-icon { padding: 0; img{ width: 100%; height: auto; } } .icon_image{ i{ width: 70px; height: 70px; line-height: 64px; border: 3px solid #ffffff; border-radius: 50%; background: @secondaryColor; color: #ffffff; box-shadow: 0 0 30px #a79f9f; font-size: 30px; margin-bottom: 10px; text-align: center; } } } &:hover{ &:after{ width: 182px; height: 182px; } &:before{ width: 140px; height: 140px; } .services-part { .services-btn-part{ bottom: -80px; opacity: 1; visibility: visible; } &:before{ width: 100%; } } } } &.services-style6{ .services-part { position: relative; .shape-image { animation: move-y 2s alternate infinite; -webkit-animation: move-y 2s alternate infinite; position: relative; width: unset; height: unset; position: absolute; top: -20px; right: 26px; transition: all 0.3s ease 0s; animation: none; } .services-icon { border-radius: 100%; width: 100px; height: 100px; line-height: 100px; margin: 0 auto 42px; position: relative; background: @secondaryColor; box-shadow: 0 28px 28px 0 rgba(108, 88, 250, 0.2); &:before{ border-color: @secondaryColor; position: absolute; content: ''; right: -1px; bottom: -2px; width: 112px; height: 112px; border-radius: 100%; border: 1px solid; transition: all 0.3s ease 0s; z-index: 0; } } } &:hover{ .services-part { .shape-image { animation: move-y 2s alternate infinite; -webkit-animation: move-y 2s alternate infinite; } .services-icon { &:before{ opacity: 0; transform: scale(0.85); } } } } } &.services-style8{ .services-icon{ transform: rotate(45deg); border-radius: 2px; margin-left: 11px; margin-top: 11px; transition: 0.4s; i{ transform: rotate(-45deg); } } &:hover{ .services-icon{ background-image: inherit !important; } } } } .rs-apps-screenshots{ .slick-list.draggable{ padding: 100px 0 !important; } .grid-item{ position: relative; img{ box-shadow: 0 0 10px rgba(0,0,0,0.08); border-radius: 30px; } &.slick-center{ -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); z-index: 3; img{ box-shadow: 0 0 30px rgba(0,0,0,0.1); } } } } .hover_effect .elementor-row .elementor-widget-container{ transition: 0.3s; } .hover_effect .elementor-row .elementor-widget-container:hover, .hover_effect .elementor-row:not(:hover) .active_hover > .elementor-widget-container{ box-shadow: 3px 7px 25px 0px rgba(0, 0, 0, 0.05); } .rs-animation-shape-image{ position: relative; .pattern{ position: absolute; top: 0; left: -200px; } .middle-image{ position: relative; z-index: 1; } .shape{ position: absolute; bottom: 30px; right: 15px; } } /* Number CSS ---------------------- ----------------------------------------*/ .rs-addon-number { .number-part { position: relative; text-align: center; .number-icon { display: inline-block; padding: 5px; font-size: 50px; color: @primaryColor; transition: all ease .3s; i { transition: all ease .3s; } img { max-width: unset; width: 50px; height: 50px; } &.grayscale { img { filter: gray; -webkit-filter: grayscale(1); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); transition: all 0.3s ease 0s; &:hover { filter: none; -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -ms-filter: grayscale(0); -o-filter: grayscale(0); filter: grayscale(0); } } } &:hover { color: @secondaryColor; } &:after { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 90px; height: 90px; background: @primaryColor; border-radius: 50%; animation: pulse-border 1500ms ease-out infinite; opacity: 0; transition: all 0.3s ease 0s; visibility: hidden; } } .number-text { position: relative; .number-area{ display: inline-block; width: 50px; line-height: 50px; z-index: 1; position: relative; transition: all 0.3s ease 0s; text-align: center; &:before{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; transform: rotate(45deg); transition: all 0.3s ease 0s; } } .number-prefix{ display: block; font-size: 50px; font-weight: 700; line-height: 1.4; color: @titleColor; } .number-title { position: relative; .title { font-size: 24px; margin: 0 0 10px; color: @titleColor; a { color: @titleColor; } } } .number-txt { margin: 0; } .number-btn-part { margin: 15px 0 0; .number-btn { position: relative; display: inline-block; color: @secondaryColor; transition: all ease .3s; i { transition: all ease .3s; } &:hover { color: @primaryColor; } &.icon-after { span { float: left; } i { margin-left: 10px; } } &.icon-before { span { float: right; } i { margin-right: 10px; } } } } } &:after { content: ""; width: 0; height: 4px; background: @primaryColor; position: absolute; transition: all .3s ease 0s; bottom: 0; left: 50%; z-index: 9; transform: translateX(-50%); } &:hover { .number-icon { color: @secondaryColor; &:after { opacity: 1; visibility: visible; } } .number-text { .number-title { .title { color: @primaryColor; a { color: @primaryColor; } } } } &:after { width: 100%; } } } &.number-style2 { &:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: @primaryColor; transform: scaleY(0); transition: all .3s ease 0s; } .number-part { background: 0 0; text-align: left; position: relative; z-index: 1; } &:hover { &:before { transform: scaleY(1); } } } &.number-style3 { .number-part { border-bottom-width: 4px; transition: all .3s ease 0s; position: relative; .number-icon { 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,.04); transition: all .3s ease 0s; height: 90px; line-height: 90px; text-align: center; border-radius: 100%; i { position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; } img { width: 45px; height: 45px; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; } } &:hover { .number-icon { top: -35px; } } } } &.number-style4 { .number-part { display: inline-flex; } } } /* Icon Box CSS ---------------------- ----------------------------------------*/ .rs-iconbox-area { .box-inner { position: relative; transition: 0.4s; overflow: hidden; .rs-badge{ position: absolute; background: @primaryColor; padding: 3px 8px 0; color: #ffffff; top: 5px; left: 5px; z-index: 1; transform: rotate(0deg); } .icon-area { display: inline-block; color: @primaryColor; transition: all ease .3s; i { transition: all ease .3s; font-size: 50px; } } .text-area { padding: 10px 0 0; position: relative; .iconbox-title { position: relative; .title { font-size: 20px; margin: 0; color: @titleColor; font-weight: 500; line-height: 1.5; a { text-decoration: none !important; color: @titleColor; &:hover { color: @hoverColor; } } &:before { content: "01."; font-size: 50px; font-weight: bold; color: @primaryColor; position: absolute; transition: all .3s ease 0s; top: 0; left: 0; z-index: 9; } } } .services-txt{ font-size: 16px; margin: 0; } } .services-btn-part { margin: 15px 0 0; .services-btn { position: relative; display: inline-block; color: @secondaryColor; transition: all ease .3s; i { transition: all ease .3s; } &:hover { color: @primaryColor; } &.icon-after { span { float: left; } i { margin-left: 10px; transition: 0.4s } } &.icon-before { span { float: right; } i { margin-right: 10px; } } } } } } /* RS Static Products ---------------------- ----------------------------------------*/ .rs-static-products { .box-inner { position: relative; padding: 40px 25px 30px; box-shadow: 0 0 38px 0 rgba(0,0,0,.12); transition: 0.4s; overflow: hidden; &:hover{ box-shadow: 0 8px 38px 0 rgba(0,0,0,.20); } .text-area { padding: 30px 0 0; position: relative; .product-title { position: relative; .title { font-size: 20px; margin: 0 0 10px; color: @titleColor; font-weight: 500; line-height: 1.5; a { color: @titleColor; &:hover { color: @hoverColor; } } } } .product-des{ font-size: 16px; margin: 0; } } .rs-product-button { margin: 15px 0 0; .product-button { position: relative; display: inline-block; color: @secondaryColor; transition: all ease .3s; i { transition: all ease .3s; } &:hover { color: @primaryColor; } &.icon-after { span { float: left; } i { margin-left: 10px; transition: 0.4s } } &.icon-before { span { float: right; } i { margin-right: 10px; } } } } } } /* Tooltip CSS ---------------------- ----------------------------------------*/ .rs-tooltip-area { .box-inner { position: relative; padding: 50px 15px 40px; box-shadow: 0 0 38px 0 rgba(0,0,0,.12); transition: 0.4s; cursor: pointer; .rs-tooltip{ position: absolute; width: max-content; background-color: #000; color: #ffffff; border-radius: 3px; padding: 2px 10px; opacity: 0; visibility: hidden; z-index: 10; max-width: 270px; text-decoration: none; &:before{ content: ""; position: absolute; border-width: 5px; border-style: solid; margin-top: 0; top: 100%; left: calc(50% - 5px); } &.bottom, &.top{ left: 50%; transform: translateX(-50%); } &.top{ bottom: 110%; margin-bottom: 10px; &:before{ border-color: #000 transparent transparent transparent; } } &.left, &.right{ top: 50%; transform: translateY(-50%); } &.right{ left: 110%; margin-left: 10px; &:before{ left: auto; right: 100%; top: 50%; border-color: transparent #000 transparent transparent; transform: translateY(-50%); } } &.left{ left: auto; right: 110%; top: 50%; transform: translateY(-50%); margin-right: 10px; &:before{ right: auto; left: 100%; top: 50%; border-color: transparent transparent transparent #000; transform: translateY(-50%); } } &.bottom{ bottom: auto; top: 110%; margin-top: 10px; &:before{ top: auto; bottom: 100%; left: 50%; border-color: transparent transparent #000 transparent; transform: translateX(-50%); } } } .icon-area { display: inline-block; color: @primaryColor; transition: all ease .3s; i { transition: all ease .3s; font-size: 50px; } } .text-area { padding: 10px 0 0; position: relative; .iconbox-title { position: relative; .title { font-size: 20px; margin: 0; color: @titleColor; font-weight: 500; line-height: 1.5; a { text-decoration: none !important; color: @titleColor; &:hover { color: @hoverColor; } } } } .rs-tooltip-text{ font-size: 16px; margin: 0; } } &:hover{ box-shadow: 0 8px 38px 0 rgba(0,0,0,.20); .rs-tooltip{ opacity: 1; visibility: visible; &.top{ bottom: 100%; } &.right{ left: 100%; } &.bottom{ top: 100%; } &.left{ right: 100%; } } } } } /* ------------------------------------ Gallery CSS ---------------------------------------*/ .rs-galleys{ .file-list-image, .galley-img{ position: relative; margin-bottom: 30px; overflow: hidden; .p-zoom, .zoom-icon{ position: absolute; top: 45%; left: 50%; z-index: 1; transform:translate(-50%, -50%); opacity: 1; visibility: hidden; background: transparent !important; color: #fff; width: 50px; height: 50px; line-height: 50px; text-align: center; transition: all 0.3s ease-in-out; i{ &:before{ font-size: 22px; } } &:hover{ opacity: 0.8 !important; } } .gallery-titles{ position: absolute; left: 43.5%; top: 110%; margin: 0; color: #fff; transition: all .8s ease; opacity: 0; visibility: hidden; z-index: 1; text-align: center; font-size: 20px; line-height: 28px!important; } &:before{ content: ""; position: absolute; background: #000; top: 0; left: 0; z-index: 1; width: 0%; height: 100%; opacity: 0.6; transition: all 0.3s ease-in-out; } &.right{ &:before{ left: auto; right: 0; } } &.top{ &:before{ top: 0; width: 100%; height: 0; } } &.bottom{ &:before{ top: auto; bottom: 0; width: 100%; height: 0; } } &:hover{ &:before{ width: 100%; } &.bottom, &.top{ &:before{ height: 100%; } } .p-zoom, .zoom-icon{ visibility: visible; opacity: 1; color: #fff; } .gallery-titles{ top: 55%; opacity: 1; visibility: visible; } &.style2{ &:before{ top: 20px; left: 20px; width: 90% !important; height: 85% !important; } } } } .no-gutters{ .file-list-image{ margin-bottom: 0; } } } .mfp-close{ opacity: 0.9; } /* ----------------------- Team Member --------------------------*/ .rs-addon-slider, .rs-testimonial-dots-style2 { margin: 0; .team-item { padding: 0 15px; } .slick-dots { line-height: 10px; bottom: -50px; li { display: inline-block; width: unset; height: unset; margin: 0 5px; button { width: 25px; height: 8px; display: inline-block; font-size: unset; line-height: unset; padding: unset; border-radius: 50px; background: @secondaryColor; 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.5; &:before { display: none; } &:hover { background: @secondaryColor; opacity: 1; width: 40px; } } &.slick-active { button { width: 40px; background: @secondaryColor; opacity: 1; } } } } .slick-next, .slick-prev { width: 42px; height: 42px; line-height: 42px; background: @primaryColor; border-radius: 50%; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: 0.6s ease all; z-index: 9; opacity: 0.75; visibility: hidden; &:before { line-height: 40px; color: #fff; } &:hover { opacity: 1; } } .slick-prev { left: 30px; } .slick-next { right: 30px; } &:hover { .slick-prev, .slick-next { opacity: 1; visibility: visible; } .slick-prev { left: -45px; } .slick-next { right: -45px; } } } .rs-testimonial-dots-style2{ &:hover{ .slick-prev{ left: 20%; } .slick-next{ right: 20%; } } } // Slider Style 1 .team-grid-style1, .team-slider-style1 { .team-item { overflow: visible; .social-icons1 { text-align: center; margin-top: 14px; a{ i{ color: #fff; font-size: 15px; width: 35px; height: 35px; line-height: 35px; text-align: center; -webkit-transition: 0.3s all ease; transition: 0.3s all ease; border-radius: 50%; margin: 0; } } } .image-wrap{ position: relative; overflow: hidden; .social-icons1{ position: absolute; right: -50px; bottom: 0; width: 50px; background: @primaryColor; padding: 12px 0; opacity: 0; visibility: hidden; transition: @transition; a{ padding: 0; background: transparent; i{ background: transparent; } &:hover{ i{ background: transparent; } } } } } :hover{ .image-wrap{ .social-icons1{ right: 0; width: 50px; opacity: 1; visibility: visible; } } } .team-content{ text-align: center; margin: 0; padding: 20px 20px 25px; box-shadow: 0 5px 20px rgba(34, 34, 34, 0.1); background: @primaryColor; margin-bottom: 30px; position: unset; opacity: 1; h3.team-name{ font-weight: 600; font-size: 20px; margin-bottom: 0px; text-transform: capitalize; a{ text-decoration: none; color: #ffffff; &:hover{ color: #c4c4c4; } } } span.team-title{ text-transform: uppercase; font-size: 14px; color: #ffffff; } } .social-icons{ display: none; } } } .team-slider-style1{ .team-item { .team-content { margin: 0; } } } // Slider Style 2 .team-grid-style2, .team-slider-style2 { .team-inner-wrap { position: relative; margin-bottom: 35px; overflow: hidden; a{ text-decoration: none; } .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; } } .team-content { width: 100%; transition: all 0.5s ease 0s; position: relative; padding-bottom: 0; z-index: 1; margin-bottom: 0; background: @primaryColor; border-radius: 3px 3px 0 0; padding: 8px 0 14px; margin-top: -35px; position: absolute; bottom: -50%; left: 50%; transform: translateX(-50%); width: 230px; transition: 0.4s; text-align: center; .team-name { margin-top: 0 !important; line-height: 28px !important; a{ text-decoration: none; position: relative; margin-bottom: 0; font-size: 20px; text-transform: capitalize; z-index: 111; } } .social-icons { a { i { height: 25px; width: 25px; } } } .social-icons, .team-name{ color: #ffffff; a { text-decoration: none; color: #ffffff; } } .team-title{ color: #ffffff; font-weight: 500; line-height: 1.4; display: block; margin: 10px 0 5px; } .social-icons{ padding-top: 2px; a{ padding: 0 3px; } } .nolink{ pointer-events: none; } .cat-doctor{ font-size: 14px; a{ text-decoration: none; color: #ffffff; text-transform: uppercase; } } .team-name{ margin: 18px 0 0; font-weight: 500; } .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-content { bottom: 0; } .team-img-sec{ &:before{ height:100%; } } } } } .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{ .icon-button{ a{ margin-bottom: 0px; } } } //Slider Styel3 .team-grid-style3, .team-slider-style3{ .team-item{ padding: 25px; position: relative; &:after{ position: absolute; content: ''; width: 0; height: 0; border-top: 200px solid @secondaryColor; border-right: 200px solid transparent; left: 0px; top: -10px; } &:before{ position: absolute; content: ''; width: 0; height: 0; border-bottom: 200px solid @secondaryColor; border-left: 200px solid transparent; right: 0px; bottom: -10px; } img{ position: relative; z-index: 99; } .team-inner-wrap{ 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: 15px; opacity: 0; transition: @transition; .team-name{ margin-bottom: 0; font-size: 20px; a{ color: #fff; } } .team-title{ color: #fff; position: relative; padding-bottom: 8px; margin-bottom: 10px; font-size: 14px; display: block; } .social-icons{ a{ color: #fff; margin-right: 12px; font-size: 16px; &:last-child{ margin-right: 0; } &:hover{ opacity: 0.8; } } } } &:hover{ .team-content{ opacity: 1; width: 100%; top: 50%; } .team-inner-wrap:before{ opacity: 0.8; } } } } .team-grid-style3 .team-img:after{ top: 0; } .team-grid-style3 .team-img:before{ bottom: 0; } .team-grid-style4, .team-slider-style4 { .owl-stage-outer { overflow-y: visible; } .team-item { margin-bottom: 125px; position: relative; overflow: visible; &:before { display: none; } .team-content { color: #f8560c; background: #fff; padding: 20px; text-align: center; z-index: 9; position: absolute; z-index: 1; opacity: 1; width: unset; height: unset; display: inline-block; top: unset; bottom: -85px; 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); left: 50%; max-width: 310px; transform: translateX(-50%); width: 95%; .team-name { display: block; font-size: 22px; margin-bottom: 0px; text-transform: capitalize; font-weight: 600; a { color: @primaryColor; } } .team-title { font-size: 14px; font-weight: 400; text-transform: uppercase; padding-top: 5px; display: block; font-family: 'Poppins', sans-serif; color: #0a0a0a; } .team-desc { font-size: 14px; margin-bottom: 0; color: #777; position: relative; z-index: 1; max-height: 0; opacity: 0; line-height: 24px; -webkit-transition: all 0.6s, max-height 0.5s; -o-transition: all 0.6s, max-height 0.5s; -moz-transition: all 0.6s, max-height 0.5s; transition: all 0.6s, max-height 0.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: @primaryColor; top: 0; left: 50%; width: 50px; height: 2px; margin-left: -25px; } } .social-icons { text-align: center; margin-top: 12px; a { display: inline-block; i { color: @primaryColor; 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; } } } } &:before { background: transparent; } &:hover { .team-content { opacity: 1; top: unset; .team-desc { 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 0.4s, max-height 1.5s; -o-transition: all 0.4s, max-height 1.5s; -moz-transition: all 0.4s, max-height 1.5s; transition: all 0.4s, max-height 1.5s; padding-top: 18px; margin-top: 8px; } } } } } .team-grid-style5, .team-slider-style5 { .team-inner-wrap { position: relative; overflow: hidden; padding-bottom: 100px; background: #fff; border-radius: 5px; .image-wrap { img { -webkit-transition: all .7s; transition: all .7s; } } .team-content { height: 100px; width: 100%; top: unset; bottom: 0; opacity: 1; position: absolute; padding: 15px 20px; color: #444; text-align: center; overflow: hidden; background: #fff; -webkit-transition: .3s all ease; -moz-transition: .3s all ease; transition: .3s all ease; .member-desc { margin: 10px 0; .team-name { font-size: 20px; font-weight: 700; line-height: 30px; margin: 0; text-transform: uppercase; a { color: #222; } } .team-title { font-size: 15px; text-transform: capitalize; color: #222; float: none; text-align: center; font-weight: 400; } } .team-desc{ display: none; } .social-icons { bottom: -100px !important; transition: all .3s ease 0s; position: absolute; bottom: 50px; width: 100%; text-align: center; z-index: 100; left: 50%; opacity: 0; transform: translateX(-50%) scale(.5); -webkit-transition: .4s all ease; transition: .4s all ease; a { display: block; width: 25px; height: 25px; line-height: 25px; padding: 0; border: none; text-align: center; color: #fff; display: inline-block; transition: all .3s ease 0s; background: 0 0 !important; margin-right: 8px; i { transition: all .3s ease 0s; } } } &:before { content: ""; position: absolute; bottom: 0; width: 100%; height: 3px; background: @primaryColor; -webkit-transition: .4s all ease; -moz-transition: .4s all ease; transition: .4s all ease; left: 0; } &:hover { content: ""; position: absolute; bottom: 0; width: 100%; height: 3px; background: @primaryColor; -webkit-transition: .4s all ease; -moz-transition: .4s all ease; transition: .4s all ease; left: 0; } } &:hover { .image-wrap { img { -moz-transform: scale(1.1); transform: scale(1.1); } } .team-content { opacity: 1; width: 100%; visibility: visible; transform: translate(0,0); top: unset; bottom: 0; height: 140px; background: #222; &:before{ background: #222; } .member-desc { .team-name { a { color: #fff; } } .team-title { color: #fff; } &:before{ background: #222; } } .social-icons { bottom: 25px !important; opacity: 1; transform: translateX(-50%) scale(1); } } } } } .team-slider-style6{ img{ border-radius: 5px 5px 0 0; } .team-content{ text-align: center; box-shadow: 0 6px 25px rgba(0, 0, 0, 0.07); padding: 20px 15px; .team-name{ margin-bottom: 2px; font-size: 20px; font-weight: 700; a{ color: @titleColor; &:hover{ color: @linkColor; } } } .team-title{ font-size: 16px; font-weight: 400; } } } /*// Slider Style 6*/ .team-grid-style6, .team-slider-style7{ .team-item { overflow: visible; .image-wrap{ text-align: center; background-size: cover; background-repeat: no-repeat; background-position: center center; img{ border-radius: 50%; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } } .image-inner{ overflow: hidden; border-radius: 50%; } .social-icons { text-align: center; margin-top: 10px; a { display: inline-block; i { color: #4a4a4a; 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; } } } .team-content{ text-align: center; margin: 0; padding: 20px 20px 25px; margin-bottom: 30px; position: unset; opacity: 1; h3.team-name{ font-weight: 600; font-size: 20px; margin-bottom: 0px; text-transform: capitalize; a{ text-decoration: none; color: @titleColor; &:hover{ color: @secondaryColor; } } } span.team-title{ font-size: 14px; color: #666; } } &:hover{ .image-wrap img { -webkit-transform: scale(1.2); transform: scale(1.2); } } } } //single team member .rselements-single-member{ .single-member-title{ h2{ margin-bottom: 7px; } span{ font-size: 18px; } } .contact-info{ ul{ list-style: none; margin:20px 0; li{ i{ margin-right: 7px; } } } } .team-elements-social{ margin:0; list-style: none; display: flex; li{ list-style: none; margin-right: 10px; } } } .rselements-porfolio-details{ .project-img{ padding-bottom: 30px; } .ps-informations{ background: #f9f9f9; padding: 40px; ul{ list-style: none; margin:0; } li{ margin-bottom: 10px; span{ font-weight: bold; min-width: 150px; display: inline-block; } } } } #rs-header.header-style7 .toolbar-area .toolbar-contact{ position: relative; z-index: 10; } /** Blog Style CSS -------------- -----------------------------------*/ .rs-blog-grid { .blog-item { overflow: visible; margin-bottom: 30px; outline: none; .image-wrap{ position: relative; img{ transition: all 0.5s ease 0s; } .author-avatar{ position: absolute; bottom: -16px; left: 30px; img{ border-radius: 50%; } } .cat_list{ position: absolute; z-index: 111; top: 20px; left: 20px; z-index: 10; ul{ margin: 0; padding: 0; list-style: none; li{ display: inline-block; a{ display: block; padding: 4px 10px; border-radius: 3px; color: #ffffff; background: @primaryColor; transition: 0.4s; &:hover{ opacity: 0.85; } } } } } } &.blog_meta_style2{ .image-wrap{ position: relative; .blog-meta{ position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); background: @primaryColor; color: #fff; padding: 8px 14px 7px; border-radius: 5px; } } } .blog-content{ margin: 0; padding: 20px 30px 5px; box-shadow: 0 5px 20px rgba(34, 34, 34, 0.1); background: #fff; position: unset; opacity: 1; h3.blog-name{ font-weight: 600; font-size: 20px; margin-bottom: 15px; line-height: 1.4; a{ text-decoration: none; color: @titleColor; } } .blog-meta{ margin-bottom: 6px; .admin{ margin-left: 12px; } } p{ margin: 0 0 15px; } &:hover{ h3.blog-name { a{ color: @primaryColor; } } } .blog-btn-part { margin: 15px 0 0; .blog-btn { position: relative; display: inline-block; color: @primaryColor; transition: all ease .3s; i { transition: all ease .3s; } &:hover { color: @primaryColor; } &.icon-after { span { float: left; } i { margin-left: 10px; transition: 0.4s } } &.icon-before { span { float: right; } i { margin-right: 10px; } } } } } &.transparent{ .blog-inner-wrap{ position: relative; overflow: hidden; .image-wrap{ position: relative; img{ transition: all 0.8s ease 0s; } &:before{ opacity: .85; background: transparent; background: linear-gradient(transparent, #333333), linear-gradient(transparent, #333333); background: -moz-linear-gradient(transparent, #333333), -moz-linear-gradient(transparent, #333333); background: -o-linear-gradient(transparent, #333333), -o-linear-gradient(transparent, #333333); content: ""; height: 100%; bottom: 0; left: 0; right: 0; position: absolute; width: 100%; z-index: 1; transition: all 0.7s ease 0s; } } .blog-content{ margin-bottom: 0; position: absolute; left: 0; bottom: 0; width: 100%; z-index: 1; background: transparent; } &:hover{ .image-wrap { img{ -webkit-transform: scale3d(1.1, 1.1, 1.1); -moz-transform: scale3d(1.1, 1.1, 1.1); -ms-transform: scale3d(1.1, 1.1, 1.1); -o-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } } } } } &.transparent_2{ .blog-inner-wrap{ .blog-footer{ } position: relative; overflow: hidden; .image-wrap{ position: relative; img{ transition: all 0.8s ease 0s; } } .blog-content{ margin-bottom: 0; position: absolute; left: 50%; transform: translateX(-50%); bottom: 25px; width: 86%; z-index: 1; background: transparent; border-radius: 5px; } &:hover{ transform: translateY(0px); .image-wrap { img{ filter: grayscale(0); -webkit-transform: scale(1.1, 1.1, 1.1); -moz-transform: scale(1.1, 1.1, 1.1); -ms-transform: scale(1.1, 1.1, 1.1); -o-transform: scale(1.1, 1.1, 1.1); transform: scale(1.1, 1.1, 1.1); } } } } } &.blog_style_2.slick-slide{ position: relative; overflow: hidden; padding: 0!important; margin: 20px 15px; .blog-content{ box-shadow: none; } .blog-content{ position: relative; h3.blog-name{ line-height: 1.4 !important; margin-bottom: 10px; } .blog-btn-part2{ margin: 0; position: absolute; left: 50%; transform: translateX(-50%); bottom: -150px; line-height: normal; z-index: 10; opacity: 0; visibility: hidden; transition: 0.5s; span{ z-index: 10; position: relative; } } } .blog-inner-wrap{ position: relative; &:before{ content: ""; width: 0; height: 1px; background: @secondaryColor; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: 0.5s; z-index: 2; } } .blog-meta{ position: absolute; top: -42px; left: 50%; transform: translateX(-50%); background: #1273eb; text-align: center; height: 42px; line-height: 42px; width: 150px; border-radius: 5px 5px 0 0; .date{ font-size: 15px; font-weight: 400; } } &:after, &:before{ content: ""; position: absolute; left: 50%; transform: translateX(-50%); background: #f3f3f3; border-radius: 50%; transition: 0.4s; z-index: 1; } &:before{ background: #f3f3f3; width: 128px; height: 128px; border-radius: 50%; bottom: -102px; } &:after{ bottom: -130px; background: transparent; width: 172px; height: 172px; border-radius: 50%; border: 1px solid #f3f3f3; } .blog-inner-wrap:hover{ transform: inherit; } &:hover{ &:after{ border-color: @secondaryColor; } &:before{ background: @secondaryColor; } .blog-inner-wrap:before{ width: 100%; } .blog-content .blog-btn-part2{ opacity: 1; visibility: visible; bottom: -10px; } &:before{ width: 140px; height: 140px; } &:after{ width: 180px; height: 180px; } } } &:hover{ .image-wrap{ .pointer-events img{ filter: grayscale(100%); } } } } .rs-pagination-area { padding-top: 0px; clear: both; text-align: center; margin-top: 20px; .pagination{ padding: 0; margin: 0; } .nav-links { display: inline-block; border: 1px solid #f9f9f9; padding: 11px 0px; border-radius: 3px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.05); background: #fff; span.current{ padding: 2px 20px 0 21px; line-height: 23px; background: transparent; font-size: 18px; text-decoration: none; transition: @transition; text-align: center; background: transparent; color: @primaryColor; display: inline-block; vertical-align: top; border-right: 1px solid #E6E6E6; } > * { border-radius: 0px; margin-left: 0px; margin-right: 0px; } a { padding: 2px 20px 0 14px; line-height: 23px; font-size: 18px; text-decoration: none; transition: @transition; text-align: center; background: transparent; opacity: .96; display: inline-block; vertical-align: top; border-right: 1px solid #E6E6E6; } span.current, a:hover{ color: @primaryColor; } a.next.page-numbers{ background: none !important; border-right: 0; } } } .rs-addon-slider{ .blog-item{ padding: 0 15px; &.blog_style_3{ .blog-inner-wrap:hover{ transform: translateY(0px); } .image-wrap img, .blog-content{ border-radius: 5px; } .image-wrap{ transform: skew(10deg); } .blog-content{ transform: skew(-10deg); position: relative; left: 8px; margin-top: -10px; } } } } } /** Pricing Table CSS -------------- -----------------------------------*/ .elementor-widget-rsprice{ .elementor-widget-container{ border-radius: 10px; box-shadow: 0 0.2rem 2.8rem rgba(36,36,36,.1); word-wrap: break-word; overflow-wrap: break-word; position: relative; overflow: hidden; .rs-pricing-table-badge { position: absolute; top: 0; padding: 10px 10px; background-color: @primaryColor; color: #fff; line-height: 1; z-index: 1; } .rs-pricing-table-title{ padding-top: 10px; margin-bottom: 20px; color: @titleColor; font-weight: 400; font-size: 24px; line-height: 30px; } .rs-pricing-table-price{ margin-bottom: 30px; .rs-pricing-table-price-tag { margin-bottom: .5rem; color: #242424; font-weight: 700; font-size: 60px; line-height: normal; .rs-pricing-table-currency { font-size: 24px; } .rs-pricing-table-price-text{ font-weight: 700; } } .rs-pricing-table-period { color: #8c8c8c; font-size: 16px; display: block; } &.display-inline2{ .rs-pricing-table-price-tag { line-height: 0.66; display: flex; justify-content: center; } .rs-pricing-table-period { display: flex; align-items: flex-end; } } &.display-inline { .rs-pricing-table-period { position: relative; padding-left: 20px; display: inline-block; &:before { position: absolute; content: ""; height: 20px; width: 2px; position: absolute; left: 0; transform: rotate(20deg) translateY(-50%); top: 50%; background: #f2f2f2; } } } } .rs-pricing-table-body{ margin-bottom: 35px; .rs-pricing-table-features-title { margin-top: 0; margin-bottom: 10px; font-weight: 700; font-size: 16px; } .rs-pricing-table-features-list{ margin: 0; padding: 0; list-style: none; li{ margin-bottom: 8px; font-size: 16px; &:last-child{ border: none !important; } i{ margin-right:10px; min-width: 15px; font-size: 16px; } } &.right_position{ li{ overflow: hidden; i{ float: right; margin-right: 0; } } } } } .rs-pricing-table-btn{ display: inline-block; padding: 10px 20px; border-radius: 40px; background-color: @primaryColor; color: #fff; text-decoration: none; font-size: 16px; -webkit-transition: all .3s; transition: all .3s; position: relative; } .rs-pricing-icon{ position: relative; i { position: relative; transition: @transition; text-align: center; } } } } /** Portfolio CSS --------------------- --------------------------------------*/ .portfolio-filter{ margin-bottom: 20px; span{ color: #333; padding: 10px; cursor: pointer; display: inline-block; &.active{ color:@primaryColor; } &:hover{ color: @primaryColor; } } } // Portfolio Style1 .rs-portfolio-style1 { .portfolio-item { position: relative; overflow: hidden; .portfolio-content { position: absolute; width: 100%; height: 100%; top: 30%; left: 0; text-align: center; z-index: 10; padding: 25px; opacity: 0; -webkit-transition: .3s all ease-out; transition: .3s all ease-out; border-radius: 5px; &:before{ content: ''; position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); transition: all 0.3s ease 0s; border-radius: 5px; } .vertical-middle{ position: relative; z-index: 9; } .p-category { color: #fff; margin-bottom: 0; margin-top: 8px; a { color: #fff; &:hover { color: rgba(255, 255, 255, 0.7); } } } .vertical-middle { display: table; height: 100%; width: 100%; } .vertical-middle-cell { display: table-cell; vertical-align: middle; } } .portfolio-img img { width: 100%; border-radius: 5px; } .p-link { transition: all 0.3s ease 0s; display: inline-block; font-size: 19px; width: 52px; line-height: 54px; height: 52px; text-align: center; border-radius: 50%; background: #fff; i { margin-left: 2px; } &:hover { background-color: @primaryColor; color: #fff; } } .p-title { font-size: 20px; line-height: normal; margin-top: 15px; color: #fff; margin-bottom: 0; a { color: #fff; &:hover { color: rgba(255, 255, 255, 0.7); } } } .p-desc { font-size: 16px; color: rgba(255,255,255,0.7); margin-bottom: 0; margin-top: 10px; } &:hover { .portfolio-content { opacity: 1; top: 0; &:before{ opacity: 1; } } } } } .rs-portfolio-style2{ .portfolio-item{ position: relative; overflow: hidden; z-index: 1; &:before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: @secondaryColor; opacity: 0; visibility: hidden; transition: @transition; } .portfolio-content{ .p-icon, .p-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; } } .p-title{ font-size: 20px; font-weight: 600; bottom: -250px; left: 25px; padding-right: 10px; span{ font-size: 16px; font-weight: 400; padding-bottom: 5px; display: block; } span, a{ color: #ffffff; } a:hover{ color: @primaryColor; } } } &:hover{ .portfolio-content .p-title{ bottom: 20px; } .portfolio-content .p-icon, .portfolio-content .p-title{ opacity: 1; visibility: visible; } &:before{ opacity: 0.9; visibility: visible; } .portfolio-content .p-icon{ top: 20px; } } } } .rs-portfolio-style3 { .portfolio-item { position: relative; overflow: hidden; border-radius: 0; .portfolio-img { position: relative; z-index: 1; overflow: hidden; &:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; transition: all 0.4s ease 0s; opacity: 1; z-index: 10; border-radius: 5px; } img { width: 100%; -webkit-transition: 1.3s all ease; transition: 1.3s all ease; border-radius: 0px; } .p-link { display: none !important; top: 20px; right: 20px; display: inline-block; font-size: 32px; color: #ffffff; -webkit-transition: 0.6s all ease; transition: 0.6s all ease; opacity: 0; z-index: 10; i { margin-left: 2px; display: none; } } } .portfolio-content { position: relative; padding: 15px 20px; opacity: 1; z-index: 1; bottom: 0; left: 0; right: 0; text-align: left; width: 100%; border: 1px solid #ebebeb; border-top: 0; &:before{ content: ''; position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); transition: all .3s ease 0s; border-radius: 5px; } .portfolio-inner{ position: absolute; bottom: 24px; width: 100%; } a { color: @secondaryColor; } h4 { margin-bottom: 0; font-size: 20px; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: 0.6s all ease; transition: 0.6s all ease; font-weight: 500 !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; } } &:hover { .portfolio-content { opacity: 1; h3 { -webkit-transform: translateY(0px); transform: translateY(0px); } p { -webkit-transform: translateY(0px); transform: translateY(0px); } &:before{ opacity: 1; } } .portfolio-img { &:before { opacity: 1; } img { -webkit-transform: scale(1.2); transform: scale(1.2); } .p-link { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } } } } } .rs-portfolio-style4{ .rs-portfolio4{ padding-bottom: 85px !important; .portfolio-item{ overflow: visible; .portfolio-img{ overflow: hidden; } .portfolio-inner{ background: #fff; box-shadow: 0 6px 25px rgba(0, 0, 0, 0.07); position: absolute; bottom: -60px; left: 35px; right: 35px; padding: 18px 0; border-radius: 5px; transition: all 0.5s ease-in-out; z-index: 10; text-align: center; .p-title{ top: 12px; text-align: center; transition: all 0.8s ease-in-out; left: 0; z-index: 11; width: 100%; padding: 0 20px; margin-bottom: 0; font-size: 20px; font-weight: 700; line-height: 30px; text-transform: capitalize; position: relative; font-size: 20px; font-weight: 600; a, a:hover{ color: @titleColor; } } .p-category{ top: 0; bottom: 0; left: 0; text-align: center; position: relative; transition: all 0.8s ease-in-out; opacity: 0; margin-bottom: 0; } } &:hover{ .portfolio-inner{ bottom: -50px; .p-title{ top: 0; } .p-category{ opacity: 1; } } } } } } .rs-portfolio-style5{ .rs-portfolio4{ .portfolio-item{ overflow: visible; .portfolio-img{ overflow: hidden; } .portfolio-inner{ background: #fff; box-shadow: 0 6px 25px rgba(0, 0, 0, 0.07); position: absolute; bottom: -60px; left: 0; border-radius: 5px; transition: all 0.5s ease-in-out; z-index: 10; text-align: center; width: 100%; .p-title{ top: 12px; text-align: center; transition: all 0.8s ease-in-out; left: 0; z-index: 11; width: 100%; padding: 0 20px; margin-bottom: 0; font-size: 20px; font-weight: 700; line-height: 30px; text-transform: capitalize; position: relative; font-size: 20px; font-weight: 600; a, a:hover{ color: @titleColor; } } .p-category{ top: 0; bottom: 0; left: 0; text-align: center; position: relative; transition: all 0.8s ease-in-out; opacity: 0; margin-bottom: 0; } } &:hover{ .portfolio-inner{ bottom: -50px; .p-title{ top: 0; } .p-category{ opacity: 1; } } } } } } .rs-portfolio-slider{ &.slider-style-5{ .rs-portfolio4 { .portfolio-item{ .portfolio-inner{ bottom: -200px; padding: 30px 0; opacity: 0; visibility: hidden; border-radius: 5px 5px 0 0; max-width: 370px; left: 50%; transform: translateX(-50%); .p-title{ top: 0; margin-bottom: 5px; } .p-category{ opacity: 1; } } img{ transform: scale(1); opacity: 0.20; } } &.slick-current{ .portfolio-item{ img{ opacity: 1; } } .portfolio-inner{ bottom: 0; opacity: 1; visibility: visible; } } } .rs-addon-sliders .slick-next, .rs-addon-sliders .slick-prev { position: absolute; -webkit-transform: inherit; transform: inherit; transition: 0.6s ease all; z-index: 2; opacity: 1; visibility: visible; &:before{ font-family: Flaticon; font-size: 24px; color: #111111; margin-left: 0; opacity: 1; transition: 0.3s; } &:hover{ &:before{ color: @secondaryColor; } } } .rs-addon-sliders .slick-prev{ left: 24%; &:before{ content: "\f111"; } } .rs-addon-sliders .slick-next{ right: 24%; &:before{ content: "\f110"; } } .rs-addon-sliders .slick-dots { bottom: -35px; } } &.slider-style-6{ .portfolio-item { > img{ border-radius: 5px; transition: 0.8s; } &:before{ content: ""; width: 0; height: 3px; background: @secondaryColor; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: 0.5s; } &:after{ content: ""; width: 100%; height: 100%; background: @secondaryColor; position: absolute; top: 0; left: 0; transition: 0.5s; } .portfolio-content{ position: static; opacity: 1; visibility: visible; text-align: center; padding: 0; .p-icon i{ opacity: 0; visibility: hidden; bottom: -50px; } .p-title{ bottom: 33px; padding: 0 20px; .p-category{ display: block; } .p-category a{ font-size: 16px; font-weight: 400; } } .p-icon i, .p-title{ position: absolute; left: 50%; transform: translateX(-50%); width: 100%; transition: 0.4s; z-index: 9; } .p-icon i{ width: 50px; height: 50px; border-radius: 50px; background: @secondaryColor; line-height: 50px; color: #ffffff; margin: 0 auto; display: block; &:before{ margin: 0; font-size: 22px; } } &:before{ display: none; } } &:hover{ > img{ border-radius: 5px 5px 0px 0px; } &:before{ width: 100%; } .portfolio-content{ .p-title{ bottom: 50%; transform: translate(-50%, 50%); } .p-icon i{ bottom: 30px; opacity: 1; visibility: visible; } } } } } } /* Button CSS ----------------- -----------------------------*/ .rs-btn{ a{ display: inline-block; color: #fff; padding: 10px 40px; font-size: 25px; font-weight: 400; font-style: normal; letter-spacing: 0px; background-color: @primaryColor; border-radius: 10px; 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); &:hover{ background:@secondaryColor; color: #fff; } } } /*Logo CSS----------------- --------------------------*/ .rs-logo-grid{ .rs-grid-figure{ .logo-img { overflow: hidden; } .logo-title { overflow: hidden; .title { margin: 0; } } .logo-desc { overflow: hidden; .description { margin: 0; } } } } /*CTA CSS----------------- --------------------------*/ .rs-cta { width: 100%; display: inline-flex; align-items: center; .cta-content { float: left; width: 80%; text-align: left; order: unset; .cta-title { h3.title { margin: 0 0 10px; } } .cta-text { .desc { margin: 0; } } } .rs-btn { width: 20%; float: right; text-align: right; order: unset; .readon { line-height: 1; color: #fff; background-color: @primaryColor; padding: 15px 35px; font-size: 17px; border-radius: 0; &:hover{ background:@secondaryColor; } i { margin: 0; transform: translateX(5px); transition: all ease .3s; } } } } /*---------Testimonial CSS--------- -----------------------------------*/ .rs-testimonial{ p{ margin: 0 0 15px; position: relative; } .image-wrap{ img{ height: 65px; width: 65px; border-radius: 50%; position:relative; } } .testimonial-item{ position: relative; .item-content{ span img{ z-index: 9; } &.bubble{ position: relative; &:after{ top: 100%; left: 15%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-top-color: @primaryColor; border-width: 12px; margin-left: -30px; z-index: 1; } span i{ z-index: 1; } } p{ padding: 40px 40px 40px 40px; // background-color: @primaryColor; border-radius: 0px 0px 0px 0px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); margin-bottom: 28px; color: #fff; } } .testimonial-information{ padding-left: 15px; position: relative; .ratings{ img{ width: 100px; } } .testimonial-name{ color: #000000; font-size: 20px; font-weight: 500; } .testimonial-title{ color:#878787; } } .testimonial-content{ position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } &.inline_yes{ .testimonial-content{ display: flex; justify-content: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; .testimonial-information{ padding: 0 0 0 25px; text-align: left; .testimonial-title{ padding-bottom: 10px; display: block; } } } } } } .rs-testimonial--right{ .testimonial-content{ -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .rs-testimonial{ .item-content{ &.bubble{ position: relative; &:after{ left: 94% !important; z-index: 1; } span i{ z-index: 1; } } } } .testimonial-information{ padding-right: 15px; } } .rs-testimonial--center{ .testimonial-content{ -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .rs-testimonial{ .item-content{ &.bubble{ position: relative; &:after{ left: 55%; z-index: 1; } span i{ z-index: 1; } } } } .testimonial-information{ padding-top: 15px; } } .rs-testimonial-nav-style2 { max-width: 540px; margin: -16px auto 0; .item { text-align: center; .testimonial-name, .testimonial-title{ display: none; } img{ margin: 0 auto; width: 70px; height: 70px; border-radius: 50%; opacity: 0.5; cursor: pointer; } &.slick-center{ .testimonial-name, .testimonial-title{ display: block; } img{ width: 100px; height: 100px; border-radius: 50%; opacity: 1; } } } } .slider-gap-15 .slick-list{ padding-top: 10px; } .rs-testimonial-dots-style2{ .slick-slide{ opacity: 0; .ratings{ position: relative; z-index: 1; img{ margin: 0 auto; max-width: 120px; } } &.slick-active{ opacity: 0.3; } &.slick-center{ opacity: 1; visibility: visible; z-index: 9; .item-content p{ box-shadow: none !important; } &:before{ content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scalex(1.3) scaleY(1.2); background: #ffffff; width: 100%; height: 100%; box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.14); } } } } /*Flip Box*/ .rs-flip-box { .rs-flip-box-inner { position: relative; z-index: 1; margin: 0; padding: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; .rs-flip-box-wrap { position: relative; -webkit-transform: translateZ(0); -webkit-perspective: 1000px; perspective: 1000px; } .front-part, .back-part { top: 0; right: 0; left: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -ms-flex-align: center; height: 300px; background-color: transparent; background-position: center; background-clip: padding-box; background-size: cover; background-repeat: no-repeat; text-align: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px; -webkit-transition: -webkit-transform .6s cubic-bezier(.2, .85, .4, 1.275); transition: -webkit-transform .6s cubic-bezier(.2, .85, .4, 1.275); transition: transform .6s cubic-bezier(.2, .85, .4, 1.275); transition: transform .6s cubic-bezier(.2, .85, .4, 1.275), -webkit-transform .6s cubic-bezier(.2, .85, .4, 1.275); &:before { position: absolute; top: 0; left: 0; z-index: -9; width: 100%; height: 100%; background-color: transparent; content: ""; } } .front-part { position: relative; bottom: 0; z-index: 10; padding: 30px; border-radius: 5px; background-color: #6094da; .front-content-part { .front-icon-part { margin-bottom: 10px; span { display: inline-block; text-align: center; color: @whiteColor; font-size: 30px; line-height: 1; img { width: 60px; height: 60px; } } } .front-title-part { margin-bottom: 10px; .front-title { margin: 0; font-weight: bold; font-size: 20px; line-height: 1.5; color: @whiteColor; } } .front-desc-part { .front-desc { margin-bottom: 0; font-size: 16px; color: @whiteColor; } } .front-btn-part { .front-btn { display: inline-block; line-height: 1; i { transition: @transition; } } } } } .back-part { position: absolute; z-index: -1; padding: 30px; border-radius: 5px; background-color: #562dd4; .back-content-part { .back-icon-part { display: inline-block; margin-bottom: 20px; text-align: center; .back-img { display: inline-block; } span { display: inline-block; text-align: center; img { width: 60px; height: 60px; } } } .back-title-part { margin-bottom: 10px; .back-title { margin: 0; font-weight: bold; font-size: 20px; line-height: 1.5; } } .back-desc-part { .back-desc { margin-bottom: 0; font-size: 16px; } } .back-btn-part { .back-btn { display: inline-block; line-height: 1; padding: 10px 25px; color: @titleColor; background: @whiteColor; i { transition: @transition; } &.icon-after { span { float: left; } i { margin-left: 10px; } } &.icon-before { span { float: right; } i { margin-right: 10px; } } &:hover { background: #1f1c51; color: @whiteColor; } } } } } .front-content-part, .back-content-part { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 100%; transition: all .9s ease 0s; } &.rs-flip-right { .front-part { -webkit-transform: rotateY(0); transform: rotateY(0); } .back-part { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .back-content-part { right: 15px; } &:hover { .back-part { -webkit-transform: rotateY(0); transform: rotateY(0); } .front-part { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .back-content-part { right: 0; } } } &.rs-flip-left { .front-part { -webkit-transform: rotateY(0); transform: rotateY(0); } .back-part { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .back-content-part { left: 15px; } &:hover { .front-part { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .back-part { -webkit-transform: rotateY(0); transform: rotateY(0); } .back-content-part { left: 0; } } } &.rs-flip-up { .front-part { -webkit-transform: rotateX(0); transform: rotateX(0); } .back-part { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .back-content-part { top: 15px; } &:hover { .front-part { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .back-part { -webkit-transform: rotateX(0); transform: rotateX(0); } .back-content-part { top: 0; } } } &.rs-flip-down { .front-part { -webkit-transform: rotateX(0); transform: rotateX(0); } .back-part { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .back-content-part { bottom: 15px; } &:hover { .front-part { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .back-part { -webkit-transform: rotateX(0); transform: rotateX(0); } .back-content-part { bottom: 0; } } } &:hover { .back-part { z-index: 1; } .front-part { z-index: -1; } } } &:after { display: block; visibility: hidden; clear: both; height: 0; content: " "; font-size: 0; } } /******* RS Tab CSS ********** -----------------------------*/ .rstab-main{ ul.nav{ margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; &.bubble{ li{ a.active{ position: relative; &:after{ top: 100%; left: 15%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-top-color: @primaryColor; border-width: 12px; margin-left: -30px; } } } } li{ flex: 1 1 0; a{ background: #f1f1f1; padding: 10px; display: flex; align-items: center; justify-content: center; position: relative; top: 1px; &.active{ background:@primaryColor; color: #fff; } } &:first-child{ margin-left: 0 !important; } &:last-child{ margin-right: 0 !important; } a:hover{ background:@primaryColor; } } &.icon_top{ li{ a, a img, a i,{ display: block; } } } } .tab-content{ background: #f9f9f9; padding: 10px; overflow: hidden; p{ &:last-child{ margin: 0; } } } &.vertical{ display: flex; ul.nav{ margin: 0 20px 0 0; display: block; &.bubble{ li{ a.active{ position: relative; &:after{ top: 100%; left: auto; right: -24px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-left-color: @primaryColor; border-width: 12px; margin-left: -30px; } } } } } } .tab-pane.active { animation: slide-down 2s ease-out; } &.no_item_menu{ ul{ display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } &.left{ text-align: left; } &.center{ text-align: center; } &.right{ text-align: right; } } @keyframes slide-down { 0% { opacity: 0; transform: translateY(50%); } 50% { opacity: 1; transform: translateY(0); } } } .rsaddon_pro_box{ &.default { .pointer-events{ pointer-events: none; } } } // Popstyle One .rspopup_style1{ max-width: 950px; margin:60px auto 60px; background: #ffffff; padding: 40px; position: relative; border-radius: 4px; .rsteam_content{ padding-left: 15px; .title{ margin: 0 0 30px; } } .team-name{ margin: 0 0 10px; color: #333; } .team-heading{ border-bottom: 1px solid #eee; } .team-des, .team-heading{ padding-bottom: 15px; margin-bottom: 15px; } .team-des{ margin-bottom: 0; img{ margin-bottom: 25px; } } .social-icons1{ a{ width: 35px; height: 35px; line-height: 40px; background: @primaryColor; color: #ffffff; text-align: center; border-radius: 50%; display: inline-block; margin-right: 10px; &:hover{ opacity: 0.9; } &:last-child{ margin-right: 0; margin-left: 4px; } } } .contact-info{ margin-bottom: 15px; border-top: 1px solid #eee; ul{ margin: 0; padding: 0; list-style: none; li{ display: block; border-bottom: 1px solid #eee; padding: 5px 0; a{ &:hover{ color: @primaryColor; } } } } } .project-info{ margin: 14px 0 0; padding: 0; list-style: none; li{ display: block; padding: 2px 0; span{ font-weight: 700; margin-right: 8px; width: 146px; display: inline-block; } } } } body .rspopup_style1{ .mfp-close{ color: #ffffff; right: 10px; top: 10px; border-radius: 50%; background: #ff0000; transition: 0.3s; } } //RS Progress Bar .rs-skill-bar{ .skillbar{ background: #eeeeee; display: inline-block; height: 16px; position: relative; width: 100%; .skillbar-bar{ background: @hoverColor; height: 16px; width: 0; margin-bottom: 0; } .skillbar-title, .skill-bar-percent{ position: absolute; } .skillbar-title{ color: #212121; font-size: 20px; font-weight: 600; } .skill-bar-percent { font-size: 16px; font-weight: 700; color: @titleColor; } } &.animation, &.striped{ .skillbar .skillbar-bar{ background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-size: 1rem 1rem; } } &.animation{ .skillbar .skillbar-bar{ -webkit-animation: rs-progress-pie-stripes 1s linear infinite; animation: rs-progress-pie-stripes 1s linear infinite; } } &.style1{ .skillbar{ .skillbar-title{ top: -35px; } .skill-bar-percent { right: 0; top: -30px; } } } &.style2{ .skillbar{ .skillbar-title{ left: 0; padding: 2px 20px 0; top: 0; width: 160px; background: #83b614; } .skill-bar-percent { right: 10px; top: 0; } } } } //RS Accordion CSS .rs_accordion { .card{ border: none; border-radius: 0; } .card-header{ padding: 0; border: none; .rs-tab-title{ display: flex; position: relative; padding: 10px 20px 6px 20px; line-height: 1.8; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) } span{ margin-left: auto; width: 30px; text-align: center; height: 100%; border: 1px solid #ddd; height: 30px; line-height: 30px; border-radius: 30px; position: relative; top: -2px; &.active{ display: none; } } &.active{ span{ &.normal{ display: none; } &.active{ display: block; } } } &.left_icon{ span{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); left: 20px; } } } .card-body{ border: 1px solid #eee; } } //Pricing Menu CSS// .rs-price-table-menu{ ul{ margin: 0; } ul,li{ list-style: none; } .rs-pricing-table-body{ h3.rs-pricing-menu-features-title{ margin-bottom: 0px; } .full-menu-item{ .price-menu{ display: flex; flex-wrap:wrap; .rs-pricing-menu-image{ margin-right: 10px; flex-grow:0; width: 80px; } .rs-pricing-table-feature-text{ display: flex; justify-content: space-between; margin-bottom: 5px; width: 100%; span.rs-price-title-connector{ border-bottom: 1px dashed #ccc; height: 1px; flex-grow: 1; align-self: center; margin: 0 20px; } span{ align-self:center; } } .menu-price{ display: inline-table; align-self:center; } } } } } .elementor-invisible.elementor-widget-rs-timecounter{ visibility: visible; } .wpcf7 label{ display:block; } //dual heading CSS .rs-dual-heading{ .second_title{ color: @secondaryColor } } //rs faq settings css .rs-faq-main{ .rs-faq-title{ background: #f7f7f7; padding: 15px 20px; margin-bottom: 0; span{ padding-right: 10px; } } .rs-faq-content{ padding:30px 20px 50px; } } .rs-image{ position: relative; width: 100%; height: 100%; &.yes{ .veritcal { animation-name: veritcal; animation-timing-function: linear; animation-duration: 12s; animation-iteration-count: infinite; } @keyframes veritcal { 0% { transform: translateY(0); } 50% { transform: translateY(100px); } 100% { transform: translateY(0); } } .horizontal { animation-name: horizontal; animation-timing-function: linear; animation-duration: 12s; animation-iteration-count: infinite; } @keyframes horizontal { 0% { transform: translateX(0); } 50% { transform: translateX(100px); } 100% { transform: translateX(0); } } .horizontal { animation-name: horizontal; animation-timing-function: linear; animation-duration: 12s; animation-iteration-count: infinite; } .rotated_style{ -webkit-animation: rotated_style 5s linear infinite; animation: rotated_style 5s linear infinite; } @keyframes rotated_style{ 0% { -webkit-transform: translate(0) rotate(0deg); transform: translate(0) rotate(0deg); } 25% { -webkit-transform: translate(-10px, 10px) rotate(10deg); transform: translate(-10px, 10px) rotate(10deg); } 50% { -webkit-transform: translate(5px, -5px) rotate(25deg); transform: translate(5px, -5px) rotate(25deg); } 75% { -webkit-transform: translate(15px, -5px) rotate(15deg); transform: translate(15px, -5px) rotate(15deg); } to { -webkit-transform: translate(0) rotate(0deg); transform: translate(0) rotate(0deg); } } } } /*Image Hover Effect*/ .rs-image-hover-effect { overflow: hidden; position: relative; .image-overlay { position: absolute; bottom: -100%; left: 0; width: 100%; height: 100%; z-index: 1; border-radius: 5px 5px 0 0; transition: 0.6s; } .image-part { overflow: hidden; border-radius: 5px; img { border-radius: 0 5px 5px 0; transition: @transition; } } .image-content { color: #555; padding: 45px 20px 18px; transition: @transition; z-index: 2; position: relative; .icon-image{ margin-bottom: 25px; } .title-part { .title-prefix { color: #333; margin-bottom: 8px; font-weight: 600; font-size: 22px; transition: 0.3s; &:hover{ opacity: 0.8; } } } .description-part { .description-text { margin-bottom: 30px; } } .button-part { .image-btn { display: inline-block; color: @whiteColor; background: @primaryColor; font-size: 16px; line-height: 1; padding: 10px 25px; border-radius: 5px; transition: @transition; &.icon-before { span { float: right; } i { position: absolute; } } &.icon-after { span { float: left; } i { margin-left: 10px; } } &:hover { background: @secondaryColor; i { margin-left: 10px; } } } } } .hover_content{ position: absolute; z-index: 11; top: 50%; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: all 0.7s ease 0s; padding: 40px 20px 40px; } &:hover{ .image-overlay { bottom: 0; } .normal_content{ opacity: 0; visibility: hidden; } .hover_content{ opacity: 1; visibility: visible; } } } /*RS Image Hover Effect Animation*/ .rs-image-hover-effect { [class^='rs-image-fade'] .image-content, [class*=' rs-image-fade'] .image-content { opacity: 0; } [class^='rs-image-fade']:hover .image-content, [class*=' rs-image-fade']:hover .image-content { opacity: 1; } [class^='rs-image-fade']:hover .image-part img, [class^='rs-image-fade']:hover .image-content, [class*=' rs-image-fade']:hover .image-part img, [class*=' rs-image-fade']:hover .image-content { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } /* rs-image-fade-in-up ----------------------------- */ .rs-image-fade-in-up .image-content { -webkit-transform: translate(0, 15%); -moz-transform: translate(0, 15%); -ms-transform: translate(0, 15%); -o-transform: translate(0, 15%); transform: translate(0, 15%); } /* rs-image-fade-in-down ----------------------------- */ .rs-image-fade-in-down .image-content { -webkit-transform: translate(0, -15%); -moz-transform: translate(0, -15%); -ms-transform: translate(0, -15%); -o-transform: translate(0, -15%); transform: translate(0, -15%); } /* rs-image-fade-in-left ----------------------------- */ .rs-image-fade-in-left .image-content { -webkit-transform: translate(-15%, 0); -moz-transform: translate(-15%, 0); -ms-transform: translate(-15%, 0); -o-transform: translate(-15%, 0); transform: translate(-15%, 0); } /* rs-image-fade-in-right ----------------------------- */ .rs-image-fade-in-right .image-content { -webkit-transform: translate(15%, 0); -moz-transform: translate(15%, 0); -ms-transform: translate(15%, 0); -o-transform: translate(15%, 0); transform: translate(15%, 0); } /* rs-image-push-* ----------------------------- */ [class^='rs-image-push-']:hover .image-content, [class*=' rs-image-push-']:hover .image-content { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } /* rs-image-push-up ----------------------------- */ .rs-image-push-up .image-content { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .rs-image-push-up:hover .image-part img { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } /* rs-image-push-down ----------------------------- */ .rs-image-push-down .image-content { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .rs-image-push-down:hover .image-part img { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } /* rs-image-push-left ----------------------------- */ .rs-image-push-left .image-content { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .rs-image-push-left:hover .image-part img { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } /* rs-image-push--right ----------------------------- */ .rs-image-push-right .image-content { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .rs-image-push-right:hover .image-part img { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } /* rs-image-slide-* ----------------------------- */ [class^='rs-image-slide-']:hover .image-content, [class*=' rs-image-slide-']:hover .image-content { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } /* rs-image-slide-up ----------------------------- */ .rs-image-slide-up .image-content { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } /* rs-image-slide-down ----------------------------- */ .rs-image-slide-down .image-content { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } /* rs-image-slide-left ----------------------------- */ .rs-image-slide-left .image-content { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } /* rs-image-slide-right ----------------------------- */ .rs-image-slide-right .image-content { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } /* rs-image-reveal-* ----------------------------- */ [class^='rs-image-reveal-']:before, [class*=' rs-image-reveal-']:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ''; } [class^='rs-image-reveal-'] .image-content, [class*=' rs-image-reveal-'] .image-content { opacity: 0; } [class^='rs-image-reveal-']:hover:before, [class*=' rs-image-reveal-']:hover:before { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } [class^='rs-image-reveal-']:hover .image-content, [class*=' rs-image-reveal-']:hover .image-content { opacity: 1; -webkit-transition-delay: 0.21s; -moz-transition-delay: 0.21s; transition-delay: 0.21s; } /* rs-image-reveal-up ----------------------------- */ .rs-image-reveal-up:before { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } /* rs-image-reveal-down ----------------------------- */ .rs-image-reveal-down:before { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } /* rs-image-reveal-left ----------------------------- */ .rs-image-reveal-left:before { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } /* rs-image-reveal-right ----------------------------- */ .rs-image-reveal-right:before { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } /* rs-image-hinge-* ----------------------------- */ [class^='rs-image-hinge-'], [class*=' rs-image-hinge-'] { -webkit-perspective: 50em; -moz-perspective: 50em; perspective: 50em; } [class^='rs-image-hinge-'] .image-content, [class*=' rs-image-hinge-'] .image-content { opacity: 0; z-index: 1; } [class^='rs-image-hinge-']:hover img, [class*=' rs-image-hinge-']:hover img { opacity: 0; } [class^='rs-image-hinge-']:hover .image-content, [class*=' rs-image-hinge-']:hover .image-content { opacity: 1; -webkit-transition-delay: 0.21s; -moz-transition-delay: 0.21s; transition-delay: 0.21s; } /* rs-image-hinge-up ----------------------------- */ .rs-image-hinge-up img { -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } .rs-image-hinge-up .image-content { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .rs-image-hinge-up:hover .image-part img { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } .rs-image-hinge-up:hover .image-content { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0); } /* rs-image-hinge-down ----------------------------- */ .rs-image-hinge-down img { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .rs-image-hinge-down .image-content { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% -50%; -moz-transform-origin: 50% -50%; -ms-transform-origin: 50% -50%; -o-transform-origin: 50% -50%; transform-origin: 50% -50%; } .rs-image-hinge-down:hover .image-part img { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); opacity: 0; } .rs-image-hinge-down:hover .image-content { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0); } /* rs-image-hinge-left ----------------------------- */ .rs-image-hinge-left img { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .rs-image-hinge-left .image-content { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .rs-image-hinge-left:hover .image-part img { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } .rs-image-hinge-left:hover .image-content { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); } /* rs-image-hinge-right ----------------------------- */ .rs-image-hinge-right img { -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .rs-image-hinge-right .image-content { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; } .rs-image-hinge-right:hover .image-part img { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } .rs-image-hinge-right:hover .image-content { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); } /* rs-image-flip-* ----------------------------- */ [class^='rs-image-flip-'], [class*=' rs-image-flip-'] { -webkit-perspective: 50em; -moz-perspective: 50em; perspective: 50em; } [class^='rs-image-flip-'] img, [class*=' rs-image-flip-'] img { backface-visibility: hidden; } [class^='rs-image-flip-'] .image-content, [class*=' rs-image-flip-'] .image-content { opacity: 0; } [class^='rs-image-flip-']:hover .image-part img, [class*=' rs-image-flip-']:hover .image-part img { opacity: 0; } [class^='rs-image-flip-']:hover .image-content, [class*=' rs-image-flip-']:hover .image-content { opacity: 1; -webkit-transition-delay: 0.14s; -moz-transition-delay: 0.14s; transition-delay: 0.14s; } /* rs-image-flip-horiz ----------------------------- */ .rs-image-flip-horiz .image-content { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .rs-image-flip-horiz:hover img { -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); -o-transform: rotateX(-180deg); transform: rotateX(-180deg); } .rs-image-flip-horiz:hover .image-content { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } /* rs-image-flip-vert ----------------------------- */ .rs-image-flip-vert .image-content { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } .rs-image-flip-vert:hover .image-part img { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg); } .rs-image-flip-vert:hover .image-content { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } /* rs-image-flip-diag-1 ----------------------------- */ .rs-image-flip-diag-1 .image-content { -webkit-transform: rotate3d(1, -1, 0, 100deg); -moz-transform: rotate3d(1, -1, 0, 100deg); -ms-transform: rotate3d(1, -1, 0, 100deg); -o-transform: rotate3d(1, -1, 0, 100deg); transform: rotate3d(1, -1, 0, 100deg); } .rs-image-flip-diag-1:hover .image-part img { -webkit-transform: rotate3d(-1, 1, 0, 100deg); -moz-transform: rotate3d(-1, 1, 0, 100deg); -ms-transform: rotate3d(-1, 1, 0, 100deg); -o-transform: rotate3d(-1, 1, 0, 100deg); transform: rotate3d(-1, 1, 0, 100deg); } .rs-image-flip-diag-1:hover .image-content { -webkit-transform: rotate3d(0, 0, 0, 0deg); -moz-transform: rotate3d(0, 0, 0, 0deg); -ms-transform: rotate3d(0, 0, 0, 0deg); -o-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } /* rs-image-flip-diag-2 ----------------------------- */ .rs-image-flip-diag-2 .image-content { -webkit-transform: rotate3d(1, 1, 0, 100deg); -moz-transform: rotate3d(1, 1, 0, 100deg); -ms-transform: rotate3d(1, 1, 0, 100deg); -o-transform: rotate3d(1, 1, 0, 100deg); transform: rotate3d(1, 1, 0, 100deg); } .rs-image-flip-diag-2:hover .image-part img { -webkit-transform: rotate3d(-1, -1, 0, 100deg); -moz-transform: rotate3d(-1, -1, 0, 100deg); -ms-transform: rotate3d(-1, -1, 0, 100deg); -o-transform: rotate3d(-1, -1, 0, 100deg); transform: rotate3d(-1, -1, 0, 100deg); } .rs-image-flip-diag-2:hover .image-content { -webkit-transform: rotate3d(0, 0, 0, 0deg); -moz-transform: rotate3d(0, 0, 0, 0deg); -ms-transform: rotate3d(0, 0, 0, 0deg); -o-transform: rotate3d(0, 0, 0, 0deg); transform: rotate3d(0, 0, 0, 0deg); } /* rs-image-shutter-out-* ----------------------------- */ [class^='rs-image-shutter-out-']:before, [class*=' rs-image-shutter-out-']:before { position: absolute; content: ''; -webkit-transition-delay: 0.105s; -moz-transition-delay: 0.105s; transition-delay: 0.105s; } [class^='rs-image-shutter-out-'] .image-content, [class*=' rs-image-shutter-out-'] .image-content { opacity: 0; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; } [class^='rs-image-shutter-out-']:hover:before, [class*=' rs-image-shutter-out-']:hover:before { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; } [class^='rs-image-shutter-out-']:hover .image-content, [class*=' rs-image-shutter-out-']:hover .image-content { opacity: 1; -webkit-transition-delay: 0.105s; -moz-transition-delay: 0.105s; transition-delay: 0.105s; } /* rs-image-shutter-out-horiz ----------------------------- */ .rs-image-shutter-out-horiz:before { left: 50%; right: 50%; top: 0; bottom: 0; } .rs-image-shutter-out-horiz:hover:before { left: 0; right: 0; } /* rs-image-shutter-out-vert ----------------------------- */ .rs-image-shutter-out-vert:before { top: 50%; bottom: 50%; left: 0; right: 0; } .rs-image-shutter-out-vert:hover:before { top: 0; bottom: 0; } /* rs-image-shutter-out-diag-1 ----------------------------- */ .rs-image-shutter-out-diag-1:before { top: 50%; bottom: 50%; left: -35%; right: -35%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .rs-image-shutter-out-diag-1:hover:before { top: -35%; bottom: -35%; } /* rs-image-shutter-out-diag-2 ----------------------------- */ .rs-image-shutter-out-diag-2:before { top: 50%; bottom: 50%; left: -35%; right: -35%; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .rs-image-shutter-out-diag-2:hover:before { top: -35%; bottom: -35%; } /* rs-image-shutter-in-* ----------------------------- */ [class^='rs-image-shutter-in-']:after, [class^='rs-image-shutter-in-']:before, [class*=' rs-image-shutter-in-']:after, [class*=' rs-image-shutter-in-']:before { position: absolute; content: ''; } [class^='rs-image-shutter-in-']:after, [class*=' rs-image-shutter-in-']:after { top: 0; left: 0; } [class^='rs-image-shutter-in-']:before, [class*=' rs-image-shutter-in-']:before { right: 0; bottom: 0; } [class^='rs-image-shutter-in-'] .image-content, [class*=' rs-image-shutter-in-'] .image-content { opacity: 0; z-index: 1; } [class^='rs-image-shutter-in-']:hover .image-content, [class*=' rs-image-shutter-in-']:hover .image-content { opacity: 1; -webkit-transition-delay: 0.21s; -moz-transition-delay: 0.21s; transition-delay: 0.21s; } /* rs-image-shutter-in-horiz ----------------------------- */ .rs-image-shutter-in-horiz:after, .rs-image-shutter-in-horiz:before { width: 0; height: 100%; } .rs-image-shutter-in-horiz:hover:after, .rs-image-shutter-in-horiz:hover:before { width: 50%; } /* rs-image-shutter-in-vert ----------------------------- */ .rs-image-shutter-in-vert:after, .rs-image-shutter-in-vert:before { height: 0; width: 100%; } .rs-image-shutter-in-vert:hover:after, .rs-image-shutter-in-vert:hover:before { height: 50%; } /* rs-image-shutter-in-out-horiz ----------------------------- */ .rs-image-shutter-in-out-horiz:after, .rs-image-shutter-in-out-horiz:before { width: 0; height: 100%; opacity: 0.75; } .rs-image-shutter-in-out-horiz:hover:after, .rs-image-shutter-in-out-horiz:hover:before { width: 100%; } /* rs-image-shutter-in-out-vert ----------------------------- */ .rs-image-shutter-in-out-vert:after, .rs-image-shutter-in-out-vert:before { height: 0; width: 100%; opacity: 0.75; } .rs-image-shutter-in-out-vert:hover:after, .rs-image-shutter-in-out-vert:hover:before { height: 100%; } /* rs-image-shutter-in-out-diag-1 ----------------------------- */ .rs-image-shutter-in-out-diag-1:after, .rs-image-shutter-in-out-diag-1:before { width: 200%; height: 200%; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; transition: all 0.6s ease; opacity: 0.75; } .rs-image-shutter-in-out-diag-1:after { -webkit-transform: skew(-45deg) translateX(-150%); -moz-transform: skew(-45deg) translateX(-150%); -ms-transform: skew(-45deg) translateX(-150%); -o-transform: skew(-45deg) translateX(-150%); transform: skew(-45deg) translateX(-150%); } .rs-image-shutter-in-out-diag-1:before { -webkit-transform: skew(-45deg) translateX(150%); -moz-transform: skew(-45deg) translateX(150%); -ms-transform: skew(-45deg) translateX(150%); -o-transform: skew(-45deg) translateX(150%); transform: skew(-45deg) translateX(150%); } .rs-image-shutter-in-out-diag-1:hover:after { -webkit-transform: skew(-45deg) translateX(-50%); -moz-transform: skew(-45deg) translateX(-50%); -ms-transform: skew(-45deg) translateX(-50%); -o-transform: skew(-45deg) translateX(-50%); transform: skew(-45deg) translateX(-50%); } .rs-image-shutter-in-out-diag-1:hover:before { -webkit-transform: skew(-45deg) translateX(50%); -moz-transform: skew(-45deg) translateX(50%); -ms-transform: skew(-45deg) translateX(50%); -o-transform: skew(-45deg) translateX(50%); transform: skew(-45deg) translateX(50%); } /* rs-image-shutter-in-out-diag-2 ----------------------------- */ .rs-image-shutter-in-out-diag-2:after, .rs-image-shutter-in-out-diag-2:before { width: 200%; height: 200%; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; transition: all 0.6s ease; opacity: 0.75; } .rs-image-shutter-in-out-diag-2:after { -webkit-transform: skew(45deg) translateX(-100%); -moz-transform: skew(45deg) translateX(-100%); -ms-transform: skew(45deg) translateX(-100%); -o-transform: skew(45deg) translateX(-100%); transform: skew(45deg) translateX(-100%); } .rs-image-shutter-in-out-diag-2:before { -webkit-transform: skew(45deg) translateX(100%); -moz-transform: skew(45deg) translateX(100%); -ms-transform: skew(45deg) translateX(100%); -o-transform: skew(45deg) translateX(100%); transform: skew(45deg) translateX(100%); } .rs-image-shutter-in-out-diag-2:hover:after { -webkit-transform: skew(45deg) translateX(0%); -moz-transform: skew(45deg) translateX(0%); -ms-transform: skew(45deg) translateX(0%); -o-transform: skew(45deg) translateX(0%); transform: skew(45deg) translateX(0%); } .rs-image-shutter-in-out-diag-2:hover:before { -webkit-transform: skew(45deg) translateX(0%); -moz-transform: skew(45deg) translateX(0%); -ms-transform: skew(45deg) translateX(0%); -o-transform: skew(45deg) translateX(0%); transform: skew(45deg) translateX(0%); } /* rs-image-fold* ----------------------------- */ [class^='rs-image-fold'], [class*=' rs-image-fold'] { -webkit-perspective: 50em; -moz-perspective: 50em; perspective: 50em; } [class^='rs-image-fold'] img, [class*=' rs-image-fold'] img { -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } [class^='rs-image-fold'] .image-content, [class*=' rs-image-fold'] .image-content { z-index: 1; opacity: 0; } [class^='rs-image-fold']:hover .image-part img, [class*=' rs-image-fold']:hover .image-part img { opacity: 0; -webkit-transition-delay: 0; -moz-transition-delay: 0; transition-delay: 0; } [class^='rs-image-fold']:hover .image-content, [class*=' rs-image-fold']:hover .image-content { -webkit-transform: rotateX(0) translate3d(0, 0%, 0) scale(1); -moz-transform: rotateX(0) translate3d(0, 0%, 0) scale(1); -ms-transform: rotateX(0) translate3d(0, 0%, 0) scale(1); -o-transform: rotateX(0) translate3d(0, 0%, 0) scale(1); transform: rotateX(0) translate3d(0, 0%, 0) scale(1); opacity: 1; -webkit-transition-delay: 0.21s; -moz-transition-delay: 0.21s; transition-delay: 0.21s; } /* rs-image-fold-up ----------------------------- */ .rs-image-fold-up .image-part img { -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } .rs-image-fold-up .image-content { -webkit-transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6); -moz-transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6); -ms-transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6); -o-transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6); transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .rs-image-fold-up:hover .image-part img { -webkit-transform: rotateX(90deg) scale(0.6) translateY(50%); -moz-transform: rotateX(90deg) scale(0.6) translateY(50%); -ms-transform: rotateX(90deg) scale(0.6) translateY(50%); -o-transform: rotateX(90deg) scale(0.6) translateY(50%); transform: rotateX(90deg) scale(0.6) translateY(50%); } /* rs-image-fold-down ----------------------------- */ .rs-image-fold-down .image-part img { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .rs-image-fold-down .image-content { -webkit-transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6); -moz-transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6); -ms-transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6); -o-transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6); transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6); -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } .rs-image-fold-down:hover .image-part img { -webkit-transform: rotateX(-90deg) scale(0.6) translateY(-50%); -moz-transform: rotateX(-90deg) scale(0.6) translateY(-50%); -ms-transform: rotateX(-90deg) scale(0.6) translateY(-50%); -o-transform: rotateX(-90deg) scale(0.6) translateY(-50%); transform: rotateX(-90deg) scale(0.6) translateY(-50%); } /* rs-image-fold-left ----------------------------- */ .rs-image-fold-left .image-part img { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .rs-image-fold-left .image-content { -webkit-transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6); -moz-transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6); -ms-transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6); -o-transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6); transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6); -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .rs-image-fold-left:hover .image-part img { -webkit-transform: rotateY(-90deg) scale(0.6) translateX(50%); -moz-transform: rotateY(-90deg) scale(0.6) translateX(50%); -ms-transform: rotateY(-90deg) scale(0.6) translateX(50%); -o-transform: rotateY(-90deg) scale(0.6) translateX(50%); transform: rotateY(-90deg) scale(0.6) translateX(50%); } /* rs-image-fold-right ----------------------------- */ .rs-image-fold-right .image-part img { -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .rs-image-fold-right .image-content { -webkit-transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6); -moz-transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6); -ms-transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6); -o-transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6); transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6); -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; } .rs-image-fold-right:hover .image-part img { -webkit-transform: rotateY(90deg) scale(0.6) translateX(-50%); -moz-transform: rotateY(90deg) scale(0.6) translateX(-50%); -ms-transform: rotateY(90deg) scale(0.6) translateX(-50%); -o-transform: rotateY(90deg) scale(0.6) translateX(-50%); transform: rotateY(90deg) scale(0.6) translateX(-50%); } /* rs-image-zoom-in ----------------------------- */ .rs-image-zoom-in .image-content { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } .rs-image-zoom-in:hover .image-content { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } /* rs-image-zoom-out* ----------------------------- */ [class^='rs-image-zoom-out'] .image-content, [class*=' rs-image-zoom-out'] .image-content { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; opacity: 0; } [class^='rs-image-zoom-out']:hover .image-content, [class^='rs-image-zoom-out'].hover .image-content, [class*=' rs-image-zoom-out']:hover .image-content, [class*=' rs-image-zoom-out'].hover .image-content { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition-delay: 0.35s; -moz-transition-delay: 0.35s; transition-delay: 0.35s; } /* rs-image-zoom-out ----------------------------- */ .rs-image-zoom-out:hover .image-part img { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); opacity: 0; } /* rs-image-zoom-out-up ----------------------------- */ .rs-image-zoom-out-up:hover .image-part img, .rs-image-zoom-out-up.hover .image-part img { -webkit-animation: rs-image-zoom-out-up 0.4025s linear; -moz-animation: rs-image-zoom-out-up 0.4025s linear; animation: rs-image-zoom-out-up 0.4025s linear; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes rs-image-zoom-out-up { 50% { -webkit-transform: scale(0.8) translateY(0%); -moz-transform: scale(0.8) translateY(0%); -ms-transform: scale(0.8) translateY(0%); -o-transform: scale(0.8) translateY(0%); transform: scale(0.8) translateY(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateY(-150%); -moz-transform: scale(0.8) translateY(-150%); -ms-transform: scale(0.8) translateY(-150%); -o-transform: scale(0.8) translateY(-150%); transform: scale(0.8) translateY(-150%); opacity: 0.5; } } @keyframes rs-image-zoom-out-up { 50% { -webkit-transform: scale(0.8) translateY(0%); -moz-transform: scale(0.8) translateY(0%); -ms-transform: scale(0.8) translateY(0%); -o-transform: scale(0.8) translateY(0%); transform: scale(0.8) translateY(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateY(-150%); -moz-transform: scale(0.8) translateY(-150%); -ms-transform: scale(0.8) translateY(-150%); -o-transform: scale(0.8) translateY(-150%); transform: scale(0.8) translateY(-150%); opacity: 0.5; } } /* rs-image-zoom-out-down ----------------------------- */ .rs-image-zoom-out-down:hover .image-part img, .rs-image-zoom-out-down.hover .image-part img { -webkit-animation: rs-image-zoom-out-down 0.4025s linear; -moz-animation: rs-image-zoom-out-down 0.4025s linear; animation: rs-image-zoom-out-down 0.4025s linear; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes rs-image-zoom-out-down { 50% { -webkit-transform: scale(0.8) translateY(0%); -moz-transform: scale(0.8) translateY(0%); -ms-transform: scale(0.8) translateY(0%); -o-transform: scale(0.8) translateY(0%); transform: scale(0.8) translateY(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateY(150%); -moz-transform: scale(0.8) translateY(150%); -ms-transform: scale(0.8) translateY(150%); -o-transform: scale(0.8) translateY(150%); transform: scale(0.8) translateY(150%); opacity: 0.5; } } @keyframes rs-image-zoom-out-down { 50% { -webkit-transform: scale(0.8) translateY(0%); -moz-transform: scale(0.8) translateY(0%); -ms-transform: scale(0.8) translateY(0%); -o-transform: scale(0.8) translateY(0%); transform: scale(0.8) translateY(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateY(150%); -moz-transform: scale(0.8) translateY(150%); -ms-transform: scale(0.8) translateY(150%); -o-transform: scale(0.8) translateY(150%); transform: scale(0.8) translateY(150%); opacity: 0.5; } } /* rs-image-zoom-out-left ----------------------------- */ .rs-image-zoom-out-left:hover .image-part img, .rs-image-zoom-out-left.hover .image-part img { -webkit-animation: rs-image-zoom-out-left 0.4025s linear; -moz-animation: rs-image-zoom-out-left 0.4025s linear; animation: rs-image-zoom-out-left 0.4025s linear; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes rs-image-zoom-out-left { 50% { -webkit-transform: scale(0.8) translateX(0%); -moz-transform: scale(0.8) translateX(0%); -ms-transform: scale(0.8) translateX(0%); -o-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(-150%); -moz-transform: scale(0.8) translateX(-150%); -ms-transform: scale(0.8) translateX(-150%); -o-transform: scale(0.8) translateX(-150%); transform: scale(0.8) translateX(-150%); opacity: 0.5; } } @keyframes rs-image-zoom-out-left { 50% { -webkit-transform: scale(0.8) translateX(0%); -moz-transform: scale(0.8) translateX(0%); -ms-transform: scale(0.8) translateX(0%); -o-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(-150%); -moz-transform: scale(0.8) translateX(-150%); -ms-transform: scale(0.8) translateX(-150%); -o-transform: scale(0.8) translateX(-150%); transform: scale(0.8) translateX(-150%); opacity: 0.5; } } /* rs-image-zoom-out-right ----------------------------- */ .rs-image-zoom-out-right:hover .image-part img, .rs-image-zoom-out-right.hover .image-part img { -webkit-animation: rs-image-zoom-out-right 0.4025s linear; -moz-animation: rs-image-zoom-out-right 0.4025s linear; animation: rs-image-zoom-out-right 0.4025s linear; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes rs-image-zoom-out-right { 50% { -webkit-transform: scale(0.8) translateX(0%); -moz-transform: scale(0.8) translateX(0%); -ms-transform: scale(0.8) translateX(0%); -o-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(150%); -moz-transform: scale(0.8) translateX(150%); -ms-transform: scale(0.8) translateX(150%); -o-transform: scale(0.8) translateX(150%); transform: scale(0.8) translateX(150%); opacity: 0.5; } } @keyframes rs-image-zoom-out-right { 50% { -webkit-transform: scale(0.8) translateX(0%); -moz-transform: scale(0.8) translateX(0%); -ms-transform: scale(0.8) translateX(0%); -o-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(150%); -moz-transform: scale(0.8) translateX(150%); -ms-transform: scale(0.8) translateX(150%); -o-transform: scale(0.8) translateX(150%); transform: scale(0.8) translateX(150%); opacity: 0.5; } } /* rs-image-zoom-out-flip-horiz ----------------------------- */ .rs-image-zoom-out-flip-horiz { -webkit-perspective: 50em; -moz-perspective: 50em; perspective: 50em; } .rs-image-zoom-out-flip-horiz .image-content { opacity: 0; -webkit-transform: rotateX(90deg) translateY(-100%) scale(0.5); -moz-transform: rotateX(90deg) translateY(-100%) scale(0.5); -ms-transform: rotateX(90deg) translateY(-100%) scale(0.5); -o-transform: rotateX(90deg) translateY(-100%) scale(0.5); transform: rotateX(90deg) translateY(-100%) scale(0.5); } .rs-image-zoom-out-flip-horiz:hover .image-part img, .rs-image-zoom-out-flip-horiz.hover .image-part img { -webkit-transform: rotateX(-100deg) translateY(50%) scale(0.5); -moz-transform: rotateX(-100deg) translateY(50%) scale(0.5); -ms-transform: rotateX(-100deg) translateY(50%) scale(0.5); -o-transform: rotateX(-100deg) translateY(50%) scale(0.5); transform: rotateX(-100deg) translateY(50%) scale(0.5); opacity: 0; -webkit-transition-delay: 0; -moz-transition-delay: 0; transition-delay: 0; } .rs-image-zoom-out-flip-horiz:hover .image-content, .rs-image-zoom-out-flip-horiz.hover .image-content { -webkit-transform: rotateX(0) translateY(0%) scale(1); -moz-transform: rotateX(0) translateY(0%) scale(1); -ms-transform: rotateX(0) translateY(0%) scale(1); -o-transform: rotateX(0) translateY(0%) scale(1); transform: rotateX(0) translateY(0%) scale(1); opacity: 1; -webkit-transition-delay: 0.35s; -moz-transition-delay: 0.35s; transition-delay: 0.35s; } /* rs-image-zoom-out-flip-vert ----------------------------- */ .rs-image-zoom-out-flip-vert { -webkit-perspective: 50em; -moz-perspective: 50em; perspective: 50em; } .rs-image-zoom-out-flip-vert .image-content { opacity: 0; -webkit-transform: rotateY(90deg) translate(50%, 0) scale(0.5); -moz-transform: rotateY(90deg) translate(50%, 0) scale(0.5); -ms-transform: rotateY(90deg) translate(50%, 0) scale(0.5); -o-transform: rotateY(90deg) translate(50%, 0) scale(0.5); transform: rotateY(90deg) translate(50%, 0) scale(0.5); } .rs-image-zoom-out-flip-vert:hover .image-part img, .rs-image-zoom-out-flip-vert.hover .image-part img { -webkit-transform: rotateY(-100deg) translateX(50%) scale(0.5); -moz-transform: rotateY(-100deg) translateX(50%) scale(0.5); -ms-transform: rotateY(-100deg) translateX(50%) scale(0.5); -o-transform: rotateY(-100deg) translateX(50%) scale(0.5); transform: rotateY(-100deg) translateX(50%) scale(0.5); opacity: 0; -webkit-transition-delay: 0; -moz-transition-delay: 0; transition-delay: 0; } .rs-image-zoom-out-flip-vert:hover .image-content, .rs-image-zoom-out-flip-vert.hover .image-content { -webkit-transform: rotateY(0) translate(0, 0) scale(1); -moz-transform: rotateY(0) translate(0, 0) scale(1); -ms-transform: rotateY(0) translate(0, 0) scale(1); -o-transform: rotateY(0) translate(0, 0) scale(1); transform: rotateY(0) translate(0, 0) scale(1); opacity: 1; -webkit-transition-delay: 0.35s; -moz-transition-delay: 0.35s; transition-delay: 0.35s; } /* rs-image-blur ----------------------------- */ .rs-image-blur .image-content { opacity: 0; } .rs-image-blur:hover .image-part img { -webkit-filter: blur(30px); filter: blur(30px); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); opacity: 0; } .rs-image-blur:hover .image-content { opacity: 1; -webkit-transition-delay: 0.21s; -moz-transition-delay: 0.21s; transition-delay: 0.21s; } /*Image Moving Part CSS*/ .rs-image-move-left .image-part img, .rs-image-move-right .image-part img, .rs-image-move-top .image-part img, .rs-image-move-bottom .image-part img { -webkit-transform: scale(1.1); transform: scale(1.1); } .rs-image-move-left .image-part img, .rs-image-move-right:hover .image-part img { -webkit-transform-origin: left; transform-origin: left; } .rs-image-move-right .image-part img, .rs-image-move-left:hover .image-part img { -webkit-transform-origin: right; transform-origin: right; } .rs-image-move-top .image-part img, .rs-image-move-bottom:hover .image-part img { -webkit-transform-origin: top; transform-origin: top; } .rs-image-move-bottom .image-part img, .rs-image-move-top:hover .image-part img { -webkit-transform-origin: bottom; transform-origin: bottom; } /*Long Image Top to Bottom CSS*/ .rs-image-top-down .image-part { max-height: 400px; transition: 3s; } .rs-image-top-down:hover .image-part { padding-top: 400px; } .rs-image-top-down .image-part img{ margin: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; vertical-align: bottom; transition: 3s; } .rs-image-top-down:hover .image-part img{ -webkit-transform: translateY(-100%); transform: translateY(-100%); } /*End RS Image Hover Effect Animation*/ } //Buisness hour css .rs-business-hour{ .rs-business-schedule{ display: flex; justify-content:space-between; padding: 8px; } } //Moble Layout @media only screen and (max-width: 1024px){ .rstab-main.no_item_menu ul, .rstab-main.vertical, .rstab-main ul.nav{ display: block !important; } .rstab-main ul.nav li { margin-right: 0 !important; margin-left: 0 !important; } .rstab-main.vertical ul.nav{ margin-right: 0; } .rstab-main.vertical ul.nav.bubble li a.active:after{ display: none; } } /* ----------------------- Features List CSS --------------------------*/ .rs-features-list-content{ ul,li{ list-style: none; margin:0; } li{ margin-bottom: 7px; display: flex; align-items: center; &:last-child{ margin-bottom:0px; } i{ margin-right: 10px; color:@secondaryColor; } } } /*------------------------------ Pie progress bar -----------------------------*/ .rs-pie-content{ text-align: center; .rspie-title-center { display: inline-block; position: relative; text-align: center; } .rspie-value { display: block; position: absolute; font-size: 14px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .number{ text-align: center; display: block; padding: 10px 0 0; font-size: 20px; } } /*----------------------------- RS DataTable CSS -------------------------------*/ .elementor-widget-RS-Table{ .dataTables_filter{ margin-bottom: 7px; input{ margin: 0 0 0 10px; outline: 0; -webkit-appearance: none; tap-highlight-color: rgba(255,255,255,0); line-height: 1.21428571em; padding: .67857143em 1em; font-size: 1em; background: #fff; border: 1px solid rgba(34,36,38,.15); color: rgba(0,0,0,.87); border-radius: .28571429rem; -webkit-box-shadow: 0 0 0 0 transparent inset; box-shadow: 0 0 0 0 transparent inset; } } .rsdatatable-select{ select{ margin:0 10px; height: auto; padding:8px 18px; border-radius: 5px; } } table.dataTable thead th, table.dataTable thead td{ border-bottom: 0; } .dataTables_paginate{ background: #fff; font-weight: 400; border: 1px solid rgba(34,36,38,.15); -webkit-box-shadow: 0 1px 2px 0 rgba(34,36,38,.15); box-shadow: 0 1px 2px 0 rgba(34,36,38,.15); border-radius: .28571429rem; min-height: 2.85714286em; padding-top: 0 !important; margin-top: 10px; a.paginate_button{ background: none !important; box-shadow:none !important; border:none !important; &.current{ box-shadow: none !important; background: rgba(0,0,0,.05) !important } &:hover{ background: rgba(0,0,0,.05) !important; color: #333 !important; } } } table.dataTable.no-footer{ border:0; } table.dataTable{ border-collapse: collapse; } } /*------------------------------ RS Timecounter -----------------------------*/ .rs-timecounter{ .time_circles{ position: relative; width: 100%; height: 100%; canvas{ opacity: 0; } div{ position: absolute; padding-right: 0; text-align: center; margin-top: -10px; span{ line-height: 1.2; font-size: 55px; } h4{ margin: 0; } } } &.circle_border_on{ .time_circles{ canvas{ opacity: 1; } } } &.separator{ .time_circles{ > div{ &:after{ content: ":"; position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-size: 30px; } &:last-child{ &:after{ display: none; } } } } } &.background_style{ .time_circles{ > div{ span{ background: transparent; } span, h4{ position: relative; z-index: 1; } padding: 20px 0 35px; &:after{ content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.08); width: 90%; height: 100%; } } } } &.number_border{ .time_circles{ > div{ span{ border: 4px solid #4a4a4a ; padding: 0 15px; } h4{ margin-top: 30px; } span, h4{ position: relative; z-index: 1; } } } } } /*Dual Button CSS----------- ---------------------------*/ .rselement-dual-btn, .rselement-dual-btn-connector { display: inline-block; } .rselement-dual-btn-wrapper { position: relative; text-align: center; font-weight: 400; } .rselement-dual-btn { padding: 1.2rem 3rem; max-width: 100%; color: #fff; text-decoration: none; font-size: 14px; } .rselement-dual-btn--left { background-color: #fe4d8b; } .rselement-dual-btn--left:hover, .rselement-dual-btn--left:focus { background-color: #d00d51; color: #fff; } .rselement-dual-btn--right { background-color: #3023ae; } .rselement-dual-btn--right:hover, .rselement-dual-btn--right:focus { background-color: #2e1cde; color: #fff; } .rselement-dual-btn-connector { position: absolute !important; z-index: 9; overflow: hidden; width: 30px; height: 30px; border-radius: 100%; background-color: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .3); color: #27374c; text-transform: uppercase; font-size: 12px; line-height: 30px; -webkit-transform: translate(50%, -50%); -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); } .rselement-dual-btn-icon > svg { width: 1em; height: auto; } .rselement-dual-btn-icon > i { font-size: 1em; } .rselement-dual-btn-icon--before { margin-right: 5px; } .rselement-dual-btn-icon--after { margin-left: 5px; } .elementor-widget-rs-dual-button > .elementor-widget-container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .elementor-widget-rs-dual-button { .rselement-dual-btn--left { border-radius: 0; } .rselement-dual-btn--right { border-radius: 0; } .rselement-dual-btn-connector { top: 50%; right: 0; } } /*woocommerce product list*/ .elementor-widget-rs-product-list, .elementor-widget-rs-product-slider, .elementor-widget-rs-productlist{ .product-img{ position: relative; span{ position: absolute; right: 10px; top: 10px; background: #fff; border-radius: 50%; color: #ff0000; font-weight: bold; width: 50px; height: 50px; line-height: 50px; text-align: center; } &.overlay{ position: relative; .product-btn{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all 2s ease; a{ padding:10px 20px; background:#000; color: #fff; font-size: 14px; &:hover{ background:#333; } } } } } .product-item{ .overlay{ &:before{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); top:0; left: 0; opacity: 0; z-index: 1; transition: all 2s ease; position: absolute; } } &:hover{ .overlay{ position: relative; .product-btn{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 1; z-index: 9; text-align: center; a{ padding:10px 20px; background:#000; color: #fff; font-size: 14px; display: inline-block; margin-bottom: 10px; &:hover{ background:#333; } } } &:before{ opacity: 1; } } } } } .rselements-product-list{ text-align: center; padding: 30px 15px; margin-bottom: 30px; h4{ margin: 0 0 10px; font-size: 20px; a{ color: #333; &:hover{ color:#111; } } } .product-price{ font-size: 16px; } .product-btn{ margin-top: 25px; a{ padding:10px 20px; background:#000; color: #fff; font-size: 14px; &:hover{ background:#333; } } } } .elementor-widget-rs-productlist{ .product-item{ padding-bottom: 35px; } .rselements-product-list{ text-align: unset; } } /*------------------------ ----Instagram CSS--------- -------------------------*/ /*instagram CSS */ .pp-instagram-feed-carousel{ .swiper-button-prev, .swiper-button-next { background: none !important } } .pp-instafeed-grid{ .pp-feed-item{ float: left; position: relative; .pp-overlay-container { color: #fff; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 1; -webkit-transition: all 0.25s linear 0s; transition: all 0.25s linear 0s; opacity: 0; span{ display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; margin: 0 5px; } .pp-if-icon{ margin-right: 5px; } } &:hover{ .pp-overlay-container{ opacity: 1; } } } } .pp-instagram-feed-gray{ .pp-feed-item{ img{ -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: filter 0.25s linear 0s; transition: filter 0.25s linear 0s; } &:hover{ img{ -webkit-filter: none; filter: none; } } } } .pp-instagram-feed-hover-gray{ .pp-feed-item{ img{ -webkit-filter: none; filter: none; } &:hover{ img{ -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: filter 0.25s linear 0s; transition: filter 0.25s linear 0s; } } } } .pp-instagram-feed-title-wrap { background: #fff; position: absolute; z-index: 2; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); .pp-instagram-feed-title{ padding: 10px 20px; display: block; } } /*----------------------------- ----RS Pricelist CSS ---------- ------------------------------*/ .rs-price-list{ list-style:none; padding:0; margin:0; .rs-width-expand{ flex: 1; min-width: 1px; } .rs-grid{ display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .rs-flex-middle{ align-items: center; } .rs-flex-inline{ padding-left: 40px; span{ display: inline-block; } } } .rs-price-list li:not(:last-child) { margin-bottom: 20px; } .rs-price-list .rs-price-list-image{max-width:50%;padding-right:25px} .rs-price-list .rs-price-list-image img{width:100%} .rs-price-list .rs-price-list-price{font-size:16px;font-weight:700} .rs-price-list .rs-price-list-header{font-size:14px;max-width:100%} .rs-price-list .rs-price-list-title{color:#444444} .rs-price-list .rs-price-list-description{font-size:12px} .rs-price-list .rs-grid.rs-has-image{margin-left:0} .rs-price-list .rs-price-list-image,.rs-price-list .rs-price-list-separator{display:none} .rs-price-list li{padding:0;margin:0} .rs-price-list li:not(:last-child){margin-bottom:10px} .rs-price-list .rs-price-list-item>div[onclick]{cursor:pointer} @media (min-width:768px){ .rs-price-list .rs-price-list-header{font-size:19px;font-weight:600} .rs-price-list .rs-price-list-title{max-width:80%} .rs-price-list .rs-price-list-separator{margin-left:10px;border-bottom-style:dotted;border-bottom-width:1px;height:0;color:#cccccc} .rs-price-list .rs-price-list-description{font-size:14px;margin:0;color:#999999} .rs-price-list .rs-price-list-description{font-size:14px} .rs-price-list .rs-price-list-image,.rs-price-list .rs-price-list-separator{display:inline-block} } /*box hover animation for any addon*/ .elementor-column{ &:hover{ .rs-animation-yes{ .elementor-animation-bounce-in{ transform: scale(1.2); transition-timing-function: cubic-bezier(0.47,2.02,.31,-.36); } .elementor-animation-grow{ transform: scale(1.1); } .elementor-animation-shrink{ transform: scale(0.9); } .elementor-animation-pulse{ animation-name: elementor-animation-pulse; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; } .elementor-animation-pulse-grow { animation-name: elementor-animation-pulse-grow; animation-duration: .3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } .elementor-animation-pulse-shrink{ animation-name: elementor-animation-pulse-shrink; animation-duration: .3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } .elementor-animation-push{ animation-name: elementor-animation-push; animation-duration: .3s; animation-timing-function: linear; animation-iteration-count: 1; } .elementor-animation-pop{ animation-name: elementor-animation-pop; animation-duration: .3s; animation-timing-function: linear; animation-iteration-count: 1; } .elementor-animation-bounce-in { transform: scale(1.2); transition-timing-function: cubic-bezier(0.47,2.02,.31,-.36); } .elementor-animation-bounce-out{ transform: scale(0.8); transition-timing-function: cubic-bezier(0.47,2.02,.31,-.36); } .elementor-animation-rotate{ transform: rotate(4deg); } .elementor-animation-grow-rotate { transform: scale(1.1) rotate(4deg); } .elementor-animation-float{ transform: translateY(-8px); } .elementor-animation-sink{ transform: translateY(8px); } .elementor-animation-bob{ animation-name: elementor-animation-bob-float,elementor-animation-bob; animation-duration: .3s,1.5s; animation-delay: 0s,.3s; animation-timing-function: ease-out,ease-in-out; animation-iteration-count: 1,infinite; animation-fill-mode: forwards; animation-direction: normal,alternate; } .elementor-animation-hang{ animation-name: elementor-animation-hang-sink,elementor-animation-hang; animation-duration: .3s,1.5s; animation-delay: 0s,.3s; animation-timing-function: ease-out,ease-in-out; animation-iteration-count: 1,infinite; animation-fill-mode: forwards; animation-direction: normal,alternate; } .elementor-animation-skew{ transform: skew(-10deg); } .elementor-animation-skew-forward{ transform: skew(-10deg); } .elementor-animation-skew-backward{ transform: skew(10deg); } .elementor-animation-wobble-vertical{ animation-name: elementor-animation-wobble-vertical; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; } .elementor-animation-wobble-horizontal{ animation-name: elementor-animation-wobble-horizontal; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; } .elementor-animation-wobble-to-bottom-right{ animation-name: elementor-animation-wobble-to-bottom-right; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; } .elementor-animation-wobble-to-top-right{ animation-name: elementor-animation-wobble-to-top-right; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; } .elementor-animation-wobble-top{ animation-name: elementor-animation-wobble-top; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; } .elementor-animation-wobble-bottom{ animation-name: elementor-animation-wobble-bottom; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; } .elementor-animation-wobble-skew { animation-name: elementor-animation-wobble-skew; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: 1; } .elementor-animation-buzz{ animation-name: elementor-animation-buzz; animation-duration: .15s; animation-timing-function: linear; animation-iteration-count: infinite; } .elementor-animation-buzz-out { animation-name: elementor-animation-buzz-out; animation-duration: .75s; animation-timing-function: linear; animation-iteration-count: 1; } } } } /* Waving Line Animation */ @keyframes waving-line{ 0% { background-position: 0 0; } 100% { background-position: -200px 0; } } @-webkit-keyframes waving-line { 0% { background-position: 0 0; } 100% { background-position: -200px 0; } } /* Move Animation */ .move-y { animation: move-y 2s alternate infinite; -webkit-animation: move-y 2s alternate infinite; } @keyframes move-y { from { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 10px, 0); -webkit-transform: translate3d(0, 10px, 0); } } @-webkit-keyframes move-y { from { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 10px, 0); -webkit-transform: translate3d(0, 10px, 0); } } /* Dancing Move */ .dance { animation: dance 4s both; -webkit-animation: dance 4s both; animation-direction: alternate; -webkit-animation-direction: alternate; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-delay: 1s; -webkit-animation-delay: 1s; } @keyframes dance { 0% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); } 50% { transform: translate3d(15px, -15px, 0); -webkit-transform: translate3d(15px, -15px, 0); } 100% { transform: translate3d(0, -15px, 15px); -webkit-transform: translate3d(0, -15px, 15px); } } @-webkit-keyframes dance { 0% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); } 50% { transform: translate3d(15px, -15px, 0); -webkit-transform: translate3d(15px, -15px, 0); } 100% { transform: translate3d(0, -15px, 15px); -webkit-transform: translate3d(0, -15px, 15px); } } .scale2 { animation: scale2 2s alternate infinite; -webkit-animation: scale2 2s alternate infinite; } @keyframes scale2 { from { transform: scale(0.8); -webkit-transform: scale(0.8); } to { transform: scale(1); -webkit-transform: scale(1); } } @-webkit-keyframes scale2 { from { transform: scale(0.8); -webkit-transform: scale(0.8); } to { transform: scale(1); -webkit-transform: scale(1); } } .dance2 { animation: dance2 4s both; -webkit-animation: dance2 4s both; animation-direction: alternate; -webkit-animation-direction: alternate; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-delay: 1s; -webkit-animation-delay: 1s; } @keyframes dance2 { 0% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-15px, 15px, 0); -webkit-transform: translate3d(-15px, 15px, 0); } 100% { transform: translate3d(0, 15px, -15px); -webkit-transform: translate3d(0, 15px, -15px); } } @-webkit-keyframes dance2 { 0% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-15px, 15px, 0); -webkit-transform: translate3d(-15px, 15px, 0); } 100% { transform: translate3d(0, 15px, -15px); -webkit-transform: translate3d(0, 15px, -15px); } }
Save
Cancel
