Sid Gifari File Manager
🏠 Root
/
home
/
ailwtbdh
/
superstepsgroup.com
/
wp-content
/
themes
/
reobiz
/
assets
/
css
/
Editing: default.less
@charset "utf-8"; /** * * ----------------------------------------------------------------------------- * * Template : reobiz - Consulting Business WordPress Theme * Author : rs-theme * Author URI : http://www.rstheme.com/ * * ----------------------------------------------------------------------------- * **/ /* Table Of Content --------------------------------------------------------- 01. General CSS 02. Global Class 03. Header Section 04. Sticky Menu 05. Slider Section 06. About Us 07. Services 08. Calltoaction 09. Portfolio 10. Pricing Tables 11. Team Member 12. Newsletter 13. Testimonial 15. Contact Us 16. Footer 17. Scroll Up 18. Video 19. Counter up 20. Breadcrumbs 21. Portfolio Details 25. Home Banner 26. Preloader 27. FAQ --------------------------------------------------------*/ @bodyFont: 'Roboto', sans-serif; @titleFont: 'Poppins', sans-serif; @transition: all 0.3s ease 0s; @primaryColor: #1c1b1b; @secondaryColor: #1273eb; @whiteColor: #ffffff; @titleColor: #1c1b1b; @menuColor: #000; @btnColor: #ed4e31; @linkColor: #000; @hoverColor: #ed2b09; @globalColor: #444; @bodyColor: #363636; @formBg: #1273eb; @lightColor: #969696; @btnBgColor: #1273eb; @btnHoverColor: #fff; @import "contact.less"; @import "blog.less"; @import "header.less"; @import "footer.less"; @import "rsaddons.less"; @import "price_table.less"; @import "woocommerce.less"; /* ----------------------------------- 01. General CSS -------------------------------------*/ html, body { font-size: 15px; color: @bodyColor; font-family: @bodyFont; vertical-align: baseline; line-height: 1.7; font-weight: 400; overflow-x: hidden; } img { max-width: 100%; height: auto; } p { margin: 0 0 26px; } h1, h2, h3, h4, h5, h6 { font-family: @titleFont; color: @titleColor; margin: 0 0 26px; } h1, h2, h3, h4, h5, h6 {margin:0 0 26px; padding:0; letter-spacing: 0; font-weight: 400;} h1 { font-size: 52px; line-height: 62px; font-weight: 700; } h2 { font-size: 40px; line-height: 50px; font-weight: 700; } h3 { font-size: 28px; line-height: 42px; font-weight: 700; } h4 { font-size: 26px; line-height: 36px; font-weight: 700; } h5 { font-size: 24px; line-height: 32px; font-weight: 600; } h6 { font-size: 20px; line-height: 28px; font-weight: 500; } a { color: @primaryColor; transition: @transition; text-decoration: none !important; outline: none !important; } a:active, a:hover { text-decoration: none; outline: 0 none; color: @hoverColor; } ul { list-style: outside none none; margin: 0; padding: 0; } .clear { clear: both; } ::-moz-selection { background: @secondaryColor; text-shadow: none; color: #ffffff; } ::selection { background: @secondaryColor; text-shadow: none; color: #ffffff; } .box-shadow{ box-shadow: 0px 14px 30px rgba(0, 0, 0, 0.07); border-radius: 7px; } body .bg-fixed{ background-attachment: fixed !important; background-position: center top !important; } body .bg-top{ background-position: center top !important; } body .bg-left{ background-position: bottom left !important; } body .bg-right{ background-position: top right !important; } body .bg-bottom{ background-position: center bottom !important; } body .main-contain{ background-size: cover; background-repeat: no-repeat; } .ball { position: absolute; border-radius: 100%; opacity: 1; } .rs-z_index_1, .rs-z_index_10{ position: relative; } .rs-z_index_1{ z-index: 1; } .rs-z_index_10{ z-index: 10; } .border-left-radius > .vc_column-inner{ border-top-left-radius: 7px; border-bottom-left-radius: 7px; } .border-right-radius > .vc_column-inner{ border-top-right-radius: 7px; border-bottom-right-radius: 7px; } .overflow-visible{ overflow: visible !important; z-index: 1; } .overflow-hidden{ overflow: hidden !important; } .max-width-700{ max-width: 700px; margin: 0 auto; } .white-color{ color: #fff; h1, h2, h3, h4{ color: #fff; } } iframe{ width: 100%; } .floating-box{ position: relative; z-index: 9; top: 160px; } .custom-max-width{ max-width: 800px; } .menu-cart-area h2{ display: none; } .bs-sidebar{ #wp-calendar{ th{ background: @secondaryColor; color: #fff; } } table{ margin-bottom: 0; } .widget select{ margin: 0; } } .common-shadow{ box-shadow: 0 0 150px #eee; background: #fff; } ul.profile_info{ padding-left: 0; margin-left: 0; li{ list-style: none; margin-bottom: 10px; font-size: 15px; padding: 5px 0px; position: relative; .title{ color: @globalColor; margin-right: 10px; position: relative; &:after{ content: ""; position: absolute; background: @secondaryColor; width: 30px; height: 3px; left: 0; z-index: -1; bottom: 5px; opacity: 0.6; } } a{ color: @bodyColor; } } } /* ----------------------- 404 --------------------------*/ .page-error{ position: relative; display: table; width: 100%; height: 100%; background-repeat: no-repeat !important; background-size: cover !important; background: @whiteColor; .container{ position: fixed; top: 50%; left: 0; right: 0; transform: translateY(-50%); } .content-area { position: relative; z-index: 101; margin: 0 auto; text-align: center; h1.page-title{ color: @whiteColor; font-size: 100px; margin-bottom: 30px; margin-top: 0px; } h2{ color: @titleColor; font-size: 35px; font-weight: 700 !important; margin-bottom: 50px; span{ display: block; font-size: 250px; line-height: 175px; margin: 0 0 60px; } } } .bs-sidebar{ max-width: 400px; margin: 0 auto; padding-bottom: 20px; } .bs-sidebar{ padding: 10px 0 35px; } .reobizicon-right-arrow:before{ padding-left: 5px; } .readon{ font-size: 20px; padding: 16px 35px; border-radius: 5px !important; &:focus{ color:@whiteColor; } } &.coming-soon{ height: 100vh; background:#101010; .content-area{ h3{ font-size: 30px; margin-top: 40px; margin-bottom: 60px; display: block; span{ font-size: 80px; text-shadow: unset; text-transform: uppercase; line-height: 90px; padding-bottom: 20px; letter-spacing: 5px; display: block; font-weight: 900 !important } } } .countdown-inner{ width: 600px; margin: 0 auto; max-width: 100%; .time_circles{ position: relative; justify-content: center; align-items: center; canvas{ opacity: 0; display: none; } div{ color: @whiteColor; font-size: 36px; font-weight: 600; padding-top: 25px; width: 120px !important; height: 120px !important; display: grid; align-items: center; margin: 0 auto; border-radius: 100%; border: 5px solid @whiteColor; background: @primaryColor; box-shadow: 0 0 52px rgba(0,0,0,0.3); display: inline-block; margin: 0 12px; &:first-child{ padding-left: 0; } &:last-child{ margin-right: 0; } span, h4{ color: #ffffff; } span{ line-height: 1; font-size: 55px; display: block; } h4{ margin: 0; font-weight: 400 !important; text-transform: uppercase; } } } } .follow-us-sbuscribe{ p{ color: @whiteColor; font-size: 30px; padding-top: 50px; font-weight: 500; margin-bottom: 5px; } ul{ list-style: none; margin:0; li{ display: inline-block; margin-right: 18px; &:last-child{ margin-right:0; } a{ width: 45px; height: 45px; line-height: 35px; border-radius: 50%; padding: 0; color: @whiteColor; &:hover{ opacity: .9; } } i{ line-height: 45px; font-size: 18px; } } } } } } /* ------------------------------------ 02. Global Class ---------------------------------------*/ .rectangle{ position: relative; &:after{ position: absolute; content: ""; height: 120px; width: 1px; background: #404c51; right: -20px; top: 50%; transform: translateY(-50%); } } .orange{ color: @secondaryColor; } span.yellow{ color: @primaryColor; } .overflow-show{ overflow: visible !important; } input[type="checkbox"], input[type="radio"] { margin-right: 8px; vertical-align: text-top; } .sticky{ .menu-area{ padding: 0 } } .alignleft{ margin-bottom: 26px; } .alignright{ margin-bottom: 26px; } .vertical-middle{ display: table; width: 100%; height: 100%; .vertical-middle-cell{ display: table-cell; vertical-align: middle; } } .display-table { display: table; height: 100%; width: 100%; } .display-table-cell { display: table-cell; vertical-align: middle; } ul.stylelisting{ list-style-type: none; margin-left: 20px !important; li{ position: relative; padding-left: 22px !important; line-height: 34px; border: none !important; &:before{ position: absolute; top: 0; left: 0; z-index: 0; content: "\f054"; font-family: 'FontAwesome'; color: #437ff9; font-size: 12px; } } } blockquote{ margin: 35px 0 !important; padding: 40px 40px; color: #666; position: relative; background: #fff !important; background-repeat: no-repeat; background-position: center center; background-size: 55px; font-weight: normal; font-style: italic; text-align: left; clear: both; box-shadow: 0 0 150px #eee !important; &:before{ position: absolute; content: ""; display: block; left: 0; top: 0; height: 100%; width: 10px; background: @secondaryColor; } p{ margin-bottom: 10px !important; strong{ color: #000 !important; font-size: 18px; padding-top: 20px !important; margin-bottom: 10px; display: block; } } } mark, ins{ background: @primaryColor; color: #fff; padding: 0 4px; } code{ background: @primaryColor; color: #fff !important; } .border-image { .vc_single_image-wrapper{ position: relative; &:after{ position: absolute; content: ''; width: 0; height: 0; border-top: 200px solid @secondaryColor; border-right: 200px solid transparent; left: -32px; top: -32px; } &:before{ position: absolute; content: ''; width: 0; height: 0; border-bottom: 300px solid @secondaryColor; border-left: 300px solid transparent; right: -32px; bottom: -32px; } img{ position: relative; z-index: 99; } } &.small-border{ .vc_single_image-wrapper{ &:after{ border-top: 250px solid @secondaryColor; border-right: 250px solid transparent; left: -21px; top: -21px; } &:before{ border-bottom: 250px solid @secondaryColor; border-left: 250px solid transparent; right: -21px; bottom: -21px; } } } } button, html input[type="button"], input[type="reset"], input[type="submit"] { color: #fff; padding:17px 30px; font-size: 14px; text-transform: capitalize; outline: none; transition: all .5s ease; border-radius: 0 3px 3px 0; background: @secondaryColor; position: relative; border: none; } .mb-30{ margin-bottom: 30px; } .top-float{ float: left; } .submit-btn{ display: block; position: relative; cursor: pointer; position: relative; transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; border-radius: 3px; font-size: 14px; font-weight: 500; color: #fff; z-index: 2; border: none; .wpcf7-submit{ position: relative; cursor: pointer; display: inline-block; text-transform: uppercase; border-radius: 3px; font-size: 14px; font-weight: 500; cursor: pointer; color: #fff; background: none; border: none; &:hover{ color:@secondaryColor; } } &:hover{ background: transparent; color: @secondaryColor; opacity: 0.99; } } .prelements-gradient-heading{ .title-inner{ .subtitle{ font-size: 16px; font-weight: 600; line-height: 26px; display: block; background-clip: text; text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(270deg, @secondaryColor 70%, #ff5fd1 100%); } .title{ background-clip: text; text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(270deg, @secondaryColor 70%, #ff5fd1 100%); } .description{ display: block; p{ font-size: 16px; } } } } .rs-advance-video{ .rs-icon-inners{ .animate-border{ .popup-border{ background: @secondaryColor; width: 80px; height: 80px; line-height: 80px; text-align: center; display: inline-block; border-radius: 50%; position: absolute; i{ color: @whiteColor; } &:before{ content: ""; border: 2px solid @secondaryColor; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 180px; height: 180px; border-radius: 50%; animation: zoomBig 3.25s linear infinite; -webkit-animation-delay: .75s; animation-delay: .75s; } &:after{ content: ""; border: 2px solid @secondaryColor; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 180px; height: 180px; border-radius: 50%; animation: zoomBig 3.25s linear infinite; -webkit-animation-delay: 0s; animation-delay: 0s; } } } } } @keyframes zoomBig { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; border-width: 3px; } 40% { opacity: .5; border-width: 2px; } 65% { border-width: 1px; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; border-width: 1px; } } @keyframes zoomBig { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; border-width: 3px; } 40% { opacity: .5; border-width: 2px; } 65% { border-width: 1px; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; border-width: 1px; } } #rs-header .nav-link-container .nav-menu-link div.dot-hum{ width: 30px; border-radius: 0; margin: 3px 0; height: 2px; } i.fa-close:before{ font-size: 22px; margin: 0; } .menu-wrap-off .inner-offcan .nav-link-container .close-button.styles2{ background: unset; color: #333; padding: unset; max-width: unset; display: unset; flex-wrap: unset; transition: none; border-radius: unset; margin-right: 8px; } body.on-offcanvas .menu-ofcn.off-open{ .inner-offcan{ opacity: 1; } } .offwrap{ cursor: url(../images/close.png), auto; width: 100%; left: 100%; transition: all .8s ease-out 0s; position: fixed; background: #fff; height: 100vh; top: 0; bottom: 0; opacity: .8; z-index: 999; } body.off-open .offwrap { left: 0%; transition: all .8s ease-out 0s; } button:hover, html input[type="button"]:hover, input[type="reset"]:hover{ background: @primaryColor; color:@whiteColor; } input[type="submit"]:hover{ opacity: .9; } .main-contain { #content { padding-top: 100px; padding-bottom: 100px; } .rs-porfolio-details{ #content { padding-bottom: 110px; } } .page-error{ #content { padding-top: 60px; } } } #content{ .project-gallery { .p-gallery-title{ margin: 0 0 40px; } } } body.single-teams { .main-contain{ #content { padding-bottom: 75px; } } } .single-product .main-contain #content{ padding-bottom: 45px; } .woocommerce-cart { .main-contain { #content { padding-bottom: 100px !important; } } } .sign{ margin-top:15px; } .rs-heading.bigger-text h2.title{ font-size: 55px; line-height: 65px; } .rs-heading.bigger-text p{ color: #fff; font-size: 18px; } ul.unorder-list{ margin:20px 0 0; padding: 0; list-style: none; li{ display: block; position: relative; padding-left: 25px; padding-bottom: 15px; font-weight: 500; line-height: 25px; &:before{ position: absolute; top: 0px; left: 0; content: "\f105"; font-family: FontAwesome; color: @secondaryColor; font-size: 20px; } } } ul.check-icon{ list-style: none; margin-left: 20px; li{ position: relative; padding-left: 22px; padding-bottom: 4px; font-size: 16px; &:before{ position: absolute; top: 4px; left: 0; content: "\f11b"; font-family: reobizicon; color: @primaryColor; font-weight: 700; font-size: 14px; } } &.two-call{ column-count: 2; li{ padding-right: 10px; } } } .light-faq{ .vc_toggle{ .vc_toggle_title{ h4{ color: #fff; } } .vc_toggle_content{ color: #fff; } } } .post-password-required input[type="password"]{ margin-left: 5px; } .post-password-required input[type="submit"] { margin-left: -4px; border-radius: 0 3px 3px 0; padding: 11px 20px; } input[type="text"], input[type="number"], input[type="password"], textarea, input[type="email"]{ color: @bodyColor ; width: 100%; max-width: 100%; opacity:1; &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #d1d1d1; opacity:1; } &::-moz-placeholder { /* Firefox 19+ */ color: #d1d1d1; opacity:1; } &:-ms-input-placeholder { /* IE 10+ */ color: #d1d1d1; opacity:1; } &:-moz-placeholder { /* Firefox 18- */ color: #d1d1d1; opacity:1; } } select{ color: @bodyColor; cursor: pointer; &:valid{ color:@bodyColor; } } /*-------------------------------------------------------------- ## Links --------------------------------------------------------------*/ a { color: @primaryColor; } a:hover, a:focus, a:active { color: @secondaryColor; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } .wp-block-calendar tfoot a{ color: @primaryColor; &:hover{ color:@secondaryColor; } } /********************* RS Particle Banner **************************/ .rs-particle-banner { width: 100%; position: relative; .particle-content { position: absolute; top: 50%; transform: translateY(-50%); .banner_title { display: inline-block; margin-bottom: 25px; font-size: 65px; position: relative; z-index: 9; color: #444; line-height: 70px; } .banner-button { margin-top: 20px; &.btn-light { .readon:not(.border) { &:hover { background: transparent; border-color: #fff !important; color: #fff !important; } } .readon.border { border-color: #fff !important; color: #fff !important; &:hover { border-color: @primaryColor !important; } } } a{ &:hover{ opacity: .8; } } } .banner-introtext{ display: block; font-size: 16px; line-height: 22px; padding-bottom: 25px; } } ul { list-style-type: none; margin: 0; padding: 0; li { display: inline-block; margin: 0 25px 25px 0; } } .arrow-btn { width: 26px; height: 55px; bottom: 0%; left: 50%; z-index: 2; text-align: center; position: absolute; border: 1px solid #999; border-radius: 20px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); i { color: #999; font-size: 22px; line-height: 80px; -webkit-animation: bounce 2s infinite; -moz-animation: bounce 2s infinite; -ms-animation: bounce 2s infinite; -o-animation: bounce 2s infinite; animation: bounce 2s infinite; transition: 0.4s; -webkit-transition: 0.4s; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; &:hover { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } } } } @-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } @keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } /*-------------------------------------------------------------- --------------------------------------------------------------*/ .ceo-founder p{ font-weight: 500; color: @titleColor; } .sticky-logo{ display: none; } .sticky { .logo-area{ display: none; } .logo-area.sticky-logo{ display: block; } } .owl-carousel { padding-top: 0; .owl-nav { right: 0; [class*="owl-"] { font-size: 0; width: 42px; height: 42px; line-height: 42px; background: @secondaryColor; color: #fff; border-radius: 50%; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: 0.6s ease all; opacity: 0; visibility: hidden; &:before { font-family: reobizicon; position: absolute; font-size: 20px; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } &.owl-prev{ left: 0; &:before { content: "\f112"; } } &.owl-next { right: 0; &:before { content: "\f113"; margin-left: 2px; } } &:hover { background: @primaryColor; color: #fff; } } } &:hover { .owl-nav { [class*="owl-"] { opacity: 1; visibility: visible; &.owl-prev{ left: -60px; } &.owl-next { right: -60px; } } } } .partner-item{ a{ img{ width: auto; margin: 0 auto; } } } } .sidenav { width: 100%; .widget-title{ color: #fff !important; padding: 0 0 15px; font-size: 30px !important; line-height: 30px; font-weight: 600 !important; position: relative; &:before { content: ""; position: absolute; background: #fff; height: 2px; width: 50px; left: 0; bottom: 0; display: block; z-index: 1; } } .widget { padding: 0; .widget-title { font-size: 26px; color: #fff; margin-bottom: 30px; } .search-form { .search-input { height: 42px; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3) !important; color: #fff; font-size: 14px; outline: none; &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #fff; } &::-moz-placeholder { /* Firefox 19+ */ color: #fff; } &:-ms-input-placeholder { /* IE 10+ */ color: #fff; } &:-moz-placeholder { /* Firefox 18- */ color: #fff; } } button { padding: 8px 12px; color: #fff; background: transparent !important; -webkit-transition: 0.3s ease all; transition: 0.3s ease all; &:hover { opacity: 0.7; } } } } .fa-ul{ margin-left: 0; text-align: left; font-size: 15px; li{ padding: 7px 0; display: flex; align-items: center; i{ padding-right: 15px; &:before{ font-size:26px; margin-left: 0 !important; } &.reobizicon-email{ position: relative; top: 1px; } } &.address1{ padding-left:45px; padding-top: 0; font-size: 18px; margin-bottom: 4px; padding-right: 40px; i{ position: absolute; top: 3px; left: 0; } } } } .offcanvas_social{ margin-left: 0; list-style-type: none; padding-bottom: 0; li{ display: inline-block; a{ -webkit-transition: all 0.35s; -o-transition: all 0.35s; transition: all 0.35s; -moz-transition: all 0.35s; -ms-transition: all 0.35s; float: left; margin-right: 0; i{ font-size: 15px; color: #fff; margin: 0 8px 0 0; text-align: center; background: @secondaryColor; width: 35px; height: 35px; line-height: 35px; border-radius: 3px; &:hover{ opacity:.9; } } } &:last-child{ a{ margin-right: 0; } } } } .nav-close-menu-li { margin: 0; padding-bottom: 30px; text-align: right; a{ font-size: 0; text-align: center; display: inline-block; border: 2px solid #fff; width: 36px; height: 36px; line-height: 36px; border-radius: 100%; margin-right: 10px; position: relative; &:after, &:before { content: ''; position: absolute; width: 2px; height: 14px; background-color: #fff; top: 9px; } &:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } &:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } &:hover{ background:#fff; color: #000; border-color: #fff; &:after, &:before { background-color: @primaryColor; } } } } .widget_nav_menu { ul{ padding: 0; margin: 0; text-align: left; li{ list-style: none; border: none !important; margin-left: 0; padding: 0; position:relative; a{ font-size: 15px; padding: 25px 0; display: block; color: #333; font-family: @titleFont; line-height: 45px; font-weight: 500 !important; &:hover{ color: #ccc; } } &:before{ display: none; } ul{ li{ a{ text-transform: capitalize; padding: 10px 0; line-height: 24px; } } } } } } .bs-search button{ padding: 5px 11px; } li.nav-link-container{ color: @secondaryColor; text-align: center; display: block; border-radius: 30px; height: 40px; right: 15px; width: 40px; top: 5px; position: absolute; -webkit-transition: transform .5s ease; -moz-transition: transform .5s ease; transition: transform .5s ease; &:hover{ a{ display: block; } } a{ display: block; background:none !important; span{ background: @primaryColor !important; height: 3px; width: 25px; } } .nav-menu-link{ padding: 13px 15px 15px 10px !important; div.hamburger1{ transform: rotate(-45deg) translate(-5px, 5px); } div.hamburger3{ -webkit-transform: rotate(45deg) translate(0px, 0px); transform: rotate(45deg) translate(0px, 0px); } } } } .fa-ul{ list-style: none; } .mobile-menu-container { .nav-close-menu-li { padding-top: 50px; a{ padding: 0 } } ul{ padding-left: 0; margin: 0; text-align: left; li{ list-style: none; border: none !important; margin-left: 0; padding: 0; a{ font-size: 15px; padding: 12px 0; display: block; color: #222; border-bottom: none; &:hover{ opacity: 0.9; } } &:before{ display: none; } } } } .nav-active-menu-container{ -ms-transform: translate(0); -webkit-transform: translate(0); -moz-transform: translate(0); transform: translate(0); } #rs-header.header-transparent .menu-sticky.sticky ul.offcanvas-icon.sidenav .nav-link-container span{ background: #fff !important; } #rs-header .menu-area .navbar ul .menu-item:not(.mega) ul li ul.sub-menu, #rs-header .menu-area .navbar ul .page_item:not(.mega) ul li ul.sub-menu{ position: absolute; left: 100%; top: 0px; opacity: 0; transform: scaleY(0); visibility: hidden; } #rs-header .menu-area .navbar ul .menu-item:not(.mega) ul > li:hover > ul.sub-menu, #rs-header .menu-area .navbar ul .page_item:not(.mega) ul > li:hover > ul.sub-menu { opacity: 1; transform: scaleY(1); visibility: visible; } .secondarycolor{ color: @secondaryColor; } #rs-header .menu-area .navbar ul li.three-col ul > li{ width: 33.33%; } #rs-header .menu-area .navbar ul li.four-col ul > li{ width: 25%; } .transparent_header { position: absolute; } .transparent_header .menu-area .navbar ul > li > a:after { background: #fff; } .transparent_header .sticky .navbar ul > li > a:after{ background: @primaryColor; } .default_header .menu-area .navbar ul > li > a:after { background: @primaryColor; } .customrev{ .rev-btn{ i{ position: absolute; top: 50%; right: 26px; transition: all 0.3s; transform: translateY(-50%); opacity: 1; font-size: 16px; } &:hover{ i{ opacity: 1; right: 18px; } } } } .space15 .elementor-accordion-item{ margin-bottom: 20px !important; } /*------------------------------------ 04. Sticky Menu --------------------------------------*/ .menu-sticky{ margin: 0; width: 100%; z-index: 99; transition: all 300ms ease-in-out; background: transparent; &.sticky{ position: fixed !important; background: rgba(255,255,255,0.9); box-shadow: 0 0 20px -10px rgba(0,0,0,0.8); padding: 0; .toolbar-area { display: none; } .navbar-menu{ width: 100%; text-align: right; ul.menu{ text-align: right; } } .navbar{ ul{ li{ > a{ color: @titleColor; font-size:14px; } } } } .btn_quote{ padding-top: 28px !important; padding-bottom: 28px !important; } .nav-link-container{ i{ color: @titleColor; } } } } .max900{ .vc_column-inner{ max-width: 900px; margin: 0 auto; } } .formbtn{ .form-button{ text-align: center; } } .rs-portfolio.style1 .slick-dots li button{ background:transparent !important; } /* ----------------------- 17. Scroll Up --------------------------*/ .clpricing-table .price-table.style1{ border:none; } .faq-simple{ .elementor-accordion-item{ margin-bottom: 25px; box-shadow: 0 0 22px rgba(0,0,0,.1); } } /* ------------------------------------ 20. Breadcrumbs ---------------------------------------*/ .rs-breadcrumbs { position: relative; background: #000; .breadcrumbs-title{ font-size: 0px; padding-top: 5px; color: @secondaryColor; > span{ margin-right: 12px; } span{ font-size: 14px; position: relative; padding-right: 34px; margin-right: 14px; &.current-item{ margin-right: 0; padding-right:0; } a{ span{ color: @primaryColor; &:hover{ opacity:.7; } } &:before{ background-color: #fff; content: ""; height: 15px; width: 2px; position: absolute; right: 9px; top: 2px; transform: rotate(26deg); } } } .current-item{ color: @primaryColor; } } .breadcrumbs-inner{ padding: 120px 0 120px; text-align: center; position: relative; .banner-desc{ margin-top: 10px; margin-bottom: 10px; color: #fff; text-align: left; } .cate-single{ .post-categories{ padding: 0 0 8px 0; a{ background: #fbfbfb; color: @bodyColor !important; padding: 6px 19px 5px; border-radius: 5px; font-size: 13px; margin-right: 10px; margin-bottom: 10px; display: inline-block; } } } .bs-meta{ padding-left: 0; li{ margin-right: 13px; font-size: 13px; i{ margin-right: 3px; &:before{ font-size: 14px; font-weight: 600; } } } } } .container-fluid{ padding-left: 100px; padding-right: 100px; } .breadcrumbs-single{ background-size: cover; } .trail-browse{ display: none !important; } .trail-items li{ position: relative; a{ padding-right: 20px; } } .trail-items li::after { right: 0px; position: absolute; padding: 0; content: "\f147"; font-family: reobizicon; font-style: normal; font-weight: 300; display: block !important; top: 0; } .trail-items li.trail-end::after{ display: none !important; } .page-title { margin: 0 auto; max-width: 950px; padding-bottom: 0 !important; color: #fff !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); } .breadcrumbs { text-align: center; } .trail-items li::after { font-size: 12px; } ul { display: inline-block; padding: 5px 20px; margin: 0px; li { color: #000; display: inline-block; font-size: 14px; * { color: #000; } a { padding: 0 8px; color: #000; &:hover { color: @primaryColor; } } &.trail-begin{ a { position: relative; display: inline-block; padding-left: 0; &:hover { opacity: 0.7; } } } &.trail-end{ padding-left: 8px; } } } &.porfolio-details { position: relative; } } .mc4wp-form-fields{ input[type="email"]{ &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #999; } &::-moz-placeholder { /* Firefox 19+ */ color: #999; } &:-ms-input-placeholder { /* IE 10+ */ color: #999; } &:-moz-placeholder { /* Firefox 18- */ color: #999; } } } .entry-content .page-links{ padding-top: 30px; } .comment-reply-title{ font-size: 24px; font-weight: 700; margin-top: 14px; } .page{ .comments-title{ font-size: 24px; font-weight: 700; } } .single-post{ .bs-sidebar{ h2{ margin-top: 0; } } } .recent-widget .show-featured .post-img img{ border-radius: 3px; } .format-aside .single-content-full .bs-desc { margin-top: 0; } .close5{ background: #28406d; color: #fff; border-radius: 50%; } .wpb-js-composer .vc_tta.vc_tta-accordion .vc_tta-controls-icon-position-left.vc_tta-panel-title > a { padding-right: 46px !important; padding-left: 20px !important; } .wpb-js-composer .vc_tta-color-white.vc_tta-style-flat .vc_tta-controls-icon::after, .wpb-js-composer .vc_tta-color-white.vc_tta-style-flat .vc_tta-controls-icon::before { border-color: @secondaryColor !important; } .wpb-js-composer .vc_tta-color-white.vc_tta-style-flat .vc_tta-panel .vc_tta-panel-title > a { color: #000 !important; border-radius:3px; } .wpb-js-composer .vc_tta-color-white.vc_tta-style-flat .vc_tta-panel.vc_active .vc_tta-panel-title > a { color: #fff !important; } .wpb-js-composer .vc_tta-color-white.vc_tta-style-flat .vc_tta-panel .vc_tta-panel-title > a:hover { color: #fff !important; } body.wpb-js-composer .vc_tta.vc_general .vc_tta-panel.vc_active .vc_tta-panel-title a > i.vc_tta-controls-icon:before{ border-color: #fff !important; } body.wpb-js-composer .vc_tta.vc_general .vc_tta-panel .vc_tta-panel-title a:hover > i.vc_tta-controls-icon:before, body.wpb-js-composer .vc_tta.vc_general .vc_tta-panel .vc_tta-panel-title a:hover > i.vc_tta-controls-icon:after { border-color: #fff !important; } .home1-contact{ input.wpcf7-text, select, textarea{ background: @secondaryColor; border: none; color: #fff; width: 100%; margin-bottom: 30px; outline: none; } input[type="submit"]{ background:@btnColor; width: 100%; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; margin-top: -7px; border-radius: 0; } input.wpcf7-text{ height: 55px; } textarea{ height: 170px; } input[type="text"], textarea, input[type="email"]{ &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #fff; opacity: 1; } &::-moz-placeholder { /* Firefox 19+ */ color: #fff; opacity: 1; } &:-ms-input-placeholder { /* IE 10+ */ color: #fff; opacity: 1; } &:-moz-placeholder { /* Firefox 18- */ color: #fff; opacity: 1; } } } .dark-contact{ input.wpcf7-text, select, textarea{ background: transparent; border: none; border-bottom: 2px solid #999; color: #fff; width: 100%; margin-bottom: 30px; outline: none; padding-left: 0; } input[type="submit"]{ background: @secondaryColor; width: 100%; font-size: 14px; text-transform: uppercase; border-radius: 0; border-color: @secondaryColor; padding: 12px 30px; &:hover{ border-color: @secondaryColor; background: transparent; color: #fff; } } input.wpcf7-text{ height: 55px; } textarea{ height: 120px; } input[type="text"], textarea, input[type="email"]{ &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #fff; opacity: 1; } &::-moz-placeholder { /* Firefox 19+ */ color: #fff; opacity: 1; } &:-ms-input-placeholder { /* IE 10+ */ color: #fff; opacity: 1; } &:-moz-placeholder { /* Firefox 18- */ color: #fff; opacity: 1; } } } .footer-top-contact{ .rs-contact{ color: #fff; .contact-address{ .address-text{ h3{ color: #fff; font-weight: 500; } a{ color: #fff; &:hover{ color: @primaryColor; } } } } } } .readon { .vc_btn3{ background: transparent !important; box-shadow: none !important; border: none !important; margin-top: -5px !important; &:hover{ color: @secondaryColor !important; } } } .error-404 { .readon{ &:hover{ opacity: 0.6; color: #fff; } } } .rs-portfolio-style7 .showcase-item img{ -webkit-animation: scale-up-center 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: scale-up-center 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } @-webkit-keyframes scale-up-center { 0% { -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes scale-up-center { 0% { -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .subscribe-form{ p{ text-align: center; margin: 0 auto; } .mc4wp-form-fields{ margin: 0 auto; } input{ display: inline-block; height: 70px; line-height: 70px; padding: 0 30px; } input[type="email"]{ width: 70%; border-radius: 30px 0 0 30px; } input[type="submit"]{ border-radius: 0 30px 30px 0; position: relative; } .signup-post{ display: none; } } /********************* FAQ **********************/ .home-faq{ .vc_toggle{ color: #fff; background: #333; padding:16px 20px; .vc_toggle_title > h4{ color: #fff; -webkit-transition: background-color 2s ease-out; -moz-transition: background-color 2s ease-out; -o-transition: background-color 2s ease-out; transition: background-color 2s ease-out; font-size: 16px; font-weight: 600; } .vc_toggle_content{ margin-bottom: 0 !important; p{ margin-bottom: 5px; } } } } body.wpb-js-composer .vc_tta.vc_general .vc_tta-panel .vc_tta-panel-title{ -webkit-transition: background-color 2s ease-out; -moz-transition: background-color 2s ease-out; -o-transition: background-color 2s ease-out; transition: background-color 2s ease-out; font-size: 15px; font-weight: 600; font-family: @titleFont; } body.wpb-js-composer .vc_tta.vc_general .vc_tta-panel.vc_active .vc_tta-panel-title a, body.wpb-js-composer .vc_tta.vc_general .vc_tta-panel .vc_tta-panel-title:hover a{ color: #fff; > i.vc_tta-controls-icon:before, > i.vc_tta-controls-icon:after{ border-color: #fff; } } body .wpb-js-composer .vc_tta-color-white.vc_tta-style-classic .vc_tta-panel .vc_tta-panel-title > a{ color: @primaryColor !important; } .page-template-full-page{ #fp-nav{ ul{ >li{ > a{ &.active, &:hover{ span{ background: @secondaryColor; } } } } } } } /********************* Contact **********************/ .contact-business{ z-index: 9; .form-button{ margin: 10px auto 0; } &.content-center .form-button{ margin: 0 auto; p{ text-align: center; margin: 0 auto; display: block; } } } .rsaddon-unique-slider .blog-content .blog-footer .blog-meta i { color: @secondaryColor; } .rsaddon-unique-slider .blog-content .blog-footer .blog-meta .date{ font-size: 14px; } /*------------------------- 33.Preloader CSS ---------------------------*/ #reobiz-load{ background-color: #fff; height: 100%; width: 100%; position: fixed; z-index: 1; margin-top: 0px; top: 0px; z-index: 999999; img{ position: absolute; top: 50%; left: 50%; padding:15px; transform: translate(-50%, -50%); } } .loader-reobiz { position: absolute; width: 75px; height: 100px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .spinner { width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; background-color: @secondaryColor; border-radius: 100%; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .spinner_inner-image{ position: absolute; top: 50%; left: 50%; z-index: 99; transform: translate(-50%, -50%); } @-webkit-keyframes sk-scaleout { 0% { -webkit-transform: scale(0) } 100% { -webkit-transform: scale(1.1); opacity: 0; } } @keyframes sk-scaleout { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; } } .sidenav{ .widget_nav_menu ul li.mega{ position:relative !important; } } .max1000{ .slick-list{ max-width: 1000px !important; margin: 0 auto !important; } } @-webkit-keyframes reobiz-loader-anim { 0% { opacity: 1; -webkit-transform: scale(.1); transform: scale(.1); } 70% { opacity: .5; -webkit-transform: scale(1); transform: scale(1); } 95% { opacity: 0; } } @-moz-keyframes reobiz-loader-anim { 0% { opacity: 1; -moz-transform: scale(.1); transform: scale(.1); } 70% { opacity: .5; -moz-transform: scale(1); transform: scale(1); } 95% { opacity: 0; } } @-o-keyframes reobiz-loader-anim { 0% { opacity: 1; -o-transform: scale(.1); transform: scale(.1); } 70% { opacity: .5; -o-transform: scale(1); transform: scale(1); } 95% { opacity: 0; } } @keyframes reobiz-loader-anim { 0% { opacity: 1; -webkit-transform: scale(.1); -moz-transform: scale(.1); -o-transform: scale(.1); transform: scale(.1); } 70% { opacity: .5; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 95% { opacity: 0; } } @-webkit-keyframes anim { from { left: -100%; } to { left:100%; } } @keyframes anim { from { left: -100%; } to { left:100%; } } .cd-title { position: relative; height: 160px; text-align: center; } .cd-intro { width: 90%; max-width: 768px; text-align: center; } .cd-words-wrapper { display: inline-block; position: relative; text-align: left; margin-left: 10px; } .cd-words-wrapper p { display: inline-block; position: absolute; white-space: nowrap; left: 0; top: 0; } .cd-words-wrapper p.is-visible { position: relative; } .no-js .cd-words-wrapper p { opacity: 0; } .no-js .cd-words-wrapper p.is-visible { opacity: 1; } /* -------------------------------- xrotate-1 -------------------------------- */ .cd-headline.rotate-1 .cd-words-wrapper { -webkit-perspective: 300px; -moz-perspective: 300px; perspective: 300px; } .cd-headline.rotate-1 p { opacity: 0; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); } .cd-headline.rotate-1 p.is-visible { opacity: 1; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-animation: cd-rotate-1-in 1.2s; -moz-animation: cd-rotate-1-in 1.2s; animation: cd-rotate-1-in 1.2s; } .cd-headline.rotate-1 p.is-hidden { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); -webkit-animation: cd-rotate-1-out 1.2s; -moz-animation: cd-rotate-1-out 1.2s; animation: cd-rotate-1-out 1.2s; } @-webkit-keyframes cd-rotate-1-in { 0% { -webkit-transform: rotateX(180deg); opacity: 0; } 35% { -webkit-transform: rotateX(120deg); opacity: 0; } 65% { opacity: 0; } 100% { -webkit-transform: rotateX(360deg); opacity: 1; } } @-moz-keyframes cd-rotate-1-in { 0% { -moz-transform: rotateX(180deg); opacity: 0; } 35% { -moz-transform: rotateX(120deg); opacity: 0; } 65% { opacity: 0; } 100% { -moz-transform: rotateX(360deg); opacity: 1; } } @keyframes cd-rotate-1-in { 0% { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); opacity: 0; } 35% { -webkit-transform: rotateX(120deg); -moz-transform: rotateX(120deg); -ms-transform: rotateX(120deg); -o-transform: rotateX(120deg); transform: rotateX(120deg); opacity: 0; } 65% { opacity: 0; } 100% { -webkit-transform: rotateX(360deg); -moz-transform: rotateX(360deg); -ms-transform: rotateX(360deg); -o-transform: rotateX(360deg); transform: rotateX(360deg); opacity: 1; } } @-webkit-keyframes cd-rotate-1-out { 0% { -webkit-transform: rotateX(0deg); opacity: 1; } 35% { -webkit-transform: rotateX(-40deg); opacity: 1; } 65% { opacity: 0; } 100% { -webkit-transform: rotateX(180deg); opacity: 0; } } @-moz-keyframes cd-rotate-1-out { 0% { -moz-transform: rotateX(0deg); opacity: 1; } 35% { -moz-transform: rotateX(-40deg); opacity: 1; } 65% { opacity: 0; } 100% { -moz-transform: rotateX(180deg); opacity: 0; } } @keyframes cd-rotate-1-out { 0% { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; } 35% { -webkit-transform: rotateX(-40deg); -moz-transform: rotateX(-40deg); -ms-transform: rotateX(-40deg); -o-transform: rotateX(-40deg); transform: rotateX(-40deg); opacity: 1; } 65% { opacity: 0; } 100% { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); opacity: 0; } } /* -------------------------------- xtype -------------------------------- */ .cd-headline.type .cd-words-wrapper { vertical-align: top; overflow: hidden; } .cd-headline.type .cd-words-wrapper::after { /* vertical bar */ content: ''; position: absolute; right: 0; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); height: 90%; width: 1px; background-color: #aebcb9; } .cd-headline.type .cd-words-wrapper.waiting::after { -webkit-animation: cd-pulse 1s infinite; -moz-animation: cd-pulse 1s infinite; animation: cd-pulse 1s infinite; } .cd-headline.type .cd-words-wrapper.selected { background-color: #aebcb9; } .cd-headline.type .cd-words-wrapper.selected::after { visibility: hidden; } .cd-headline.type .cd-words-wrapper.selected p { color: #0d0d0d; } .cd-headline.type p { visibility: hidden; } .cd-headline.type p.is-visible { visibility: visible; } .cd-headline.type i { position: absolute; visibility: hidden; } .cd-headline.type i.in { position: relative; visibility: visible; } @-webkit-keyframes cd-pulse { 0% { -webkit-transform: translateY(-50%) scale(1); opacity: 1; } 40% { -webkit-transform: translateY(-50%) scale(0.9); opacity: 0; } 100% { -webkit-transform: translateY(-50%) scale(0); opacity: 0; } } @-moz-keyframes cd-pulse { 0% { -moz-transform: translateY(-50%) scale(1); opacity: 1; } 40% { -moz-transform: translateY(-50%) scale(0.9); opacity: 0; } 100% { -moz-transform: translateY(-50%) scale(0); opacity: 0; } } @keyframes cd-pulse { 0% { -webkit-transform: translateY(-50%) scale(1); -moz-transform: translateY(-50%) scale(1); -ms-transform: translateY(-50%) scale(1); -o-transform: translateY(-50%) scale(1); transform: translateY(-50%) scale(1); opacity: 1; } 40% { -webkit-transform: translateY(-50%) scale(0.9); -moz-transform: translateY(-50%) scale(0.9); -ms-transform: translateY(-50%) scale(0.9); -o-transform: translateY(-50%) scale(0.9); transform: translateY(-50%) scale(0.9); opacity: 0; } 100% { -webkit-transform: translateY(-50%) scale(0); -moz-transform: translateY(-50%) scale(0); -ms-transform: translateY(-50%) scale(0); -o-transform: translateY(-50%) scale(0); transform: translateY(-50%) scale(0); opacity: 0; } } /* -------------------------------- xrotate-2 -------------------------------- */ .cd-headline.rotate-2 .cd-words-wrapper { -webkit-perspective: 300px; -moz-perspective: 300px; perspective: 300px; } .cd-headline.rotate-2 i, .cd-headline.rotate-2 em { display: inline-block; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cd-headline.rotate-2 b { opacity: 0; } .cd-headline.rotate-2 i { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(-20px) rotateX(90deg); -moz-transform: translateZ(-20px) rotateX(90deg); -ms-transform: translateZ(-20px) rotateX(90deg); -o-transform: translateZ(-20px) rotateX(90deg); transform: translateZ(-20px) rotateX(90deg); opacity: 0; } .is-visible .cd-headline.rotate-2 i { opacity: 1; } .cd-headline.rotate-2 i.in { -webkit-animation: cd-rotate-2-in 0.4s forwards; -moz-animation: cd-rotate-2-in 0.4s forwards; animation: cd-rotate-2-in 0.4s forwards; } .cd-headline.rotate-2 i.out { -webkit-animation: cd-rotate-2-out 0.4s forwards; -moz-animation: cd-rotate-2-out 0.4s forwards; animation: cd-rotate-2-out 0.4s forwards; } .cd-headline.rotate-2 em { -webkit-transform: translateZ(20px); -moz-transform: translateZ(20px); -ms-transform: translateZ(20px); -o-transform: translateZ(20px); transform: translateZ(20px); } .no-csstransitions .cd-headline.rotate-2 i { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 0; } .no-csstransitions .cd-headline.rotate-2 i em { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .no-csstransitions .cd-headline.rotate-2 .is-visible i { opacity: 1; } @-webkit-keyframes cd-rotate-2-in { 0% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(90deg); } 60% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(-10deg); } 100% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(0deg); } } @-moz-keyframes cd-rotate-2-in { 0% { opacity: 0; -moz-transform: translateZ(-20px) rotateX(90deg); } 60% { opacity: 1; -moz-transform: translateZ(-20px) rotateX(-10deg); } 100% { opacity: 1; -moz-transform: translateZ(-20px) rotateX(0deg); } } @keyframes cd-rotate-2-in { 0% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(90deg); -moz-transform: translateZ(-20px) rotateX(90deg); -ms-transform: translateZ(-20px) rotateX(90deg); -o-transform: translateZ(-20px) rotateX(90deg); transform: translateZ(-20px) rotateX(90deg); } 60% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(-10deg); -moz-transform: translateZ(-20px) rotateX(-10deg); -ms-transform: translateZ(-20px) rotateX(-10deg); -o-transform: translateZ(-20px) rotateX(-10deg); transform: translateZ(-20px) rotateX(-10deg); } 100% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(0deg); -moz-transform: translateZ(-20px) rotateX(0deg); -ms-transform: translateZ(-20px) rotateX(0deg); -o-transform: translateZ(-20px) rotateX(0deg); transform: translateZ(-20px) rotateX(0deg); } } @-webkit-keyframes cd-rotate-2-out { 0% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(0); } 60% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(-100deg); } 100% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(-90deg); } } @-moz-keyframes cd-rotate-2-out { 0% { opacity: 1; -moz-transform: translateZ(-20px) rotateX(0); } 60% { opacity: 0; -moz-transform: translateZ(-20px) rotateX(-100deg); } 100% { opacity: 0; -moz-transform: translateZ(-20px) rotateX(-90deg); } } @keyframes cd-rotate-2-out { 0% { opacity: 1; -webkit-transform: translateZ(-20px) rotateX(0); -moz-transform: translateZ(-20px) rotateX(0); -ms-transform: translateZ(-20px) rotateX(0); -o-transform: translateZ(-20px) rotateX(0); transform: translateZ(-20px) rotateX(0); } 60% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(-100deg); -moz-transform: translateZ(-20px) rotateX(-100deg); -ms-transform: translateZ(-20px) rotateX(-100deg); -o-transform: translateZ(-20px) rotateX(-100deg); transform: translateZ(-20px) rotateX(-100deg); } 100% { opacity: 0; -webkit-transform: translateZ(-20px) rotateX(-90deg); -moz-transform: translateZ(-20px) rotateX(-90deg); -ms-transform: translateZ(-20px) rotateX(-90deg); -o-transform: translateZ(-20px) rotateX(-90deg); transform: translateZ(-20px) rotateX(-90deg); } } /* -------------------------------- xloading-bar -------------------------------- */ .cd-headline.loading-bar span { display: inline-block; padding: .2em 0; } .cd-headline.loading-bar .cd-words-wrapper { overflow: hidden; vertical-align: top; } .cd-headline.loading-bar .cd-words-wrapper::after { /* loading bar */ content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #0096a7; z-index: 2; -webkit-transition: width 0.3s -0.1s; -moz-transition: width 0.3s -0.1s; transition: width 0.3s -0.1s; } .cd-headline.loading-bar .cd-words-wrapper.is-loading::after { width: 100%; -webkit-transition: width 3s; -moz-transition: width 3s; transition: width 3s; } .cd-headline.loading-bar p { top: .2em; opacity: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s; } .cd-headline.loading-bar p.is-visible { opacity: 1; top: 0; } /* -------------------------------- xslide -------------------------------- */ .cd-headline.slide span { display: inline-block; padding: .2em 0; } .cd-headline.slide .cd-words-wrapper { overflow: hidden; vertical-align: top; } .cd-headline.slide p { opacity: 0; top: .2em; } .cd-headline.slide p.is-visible { top: 0; opacity: 1; -webkit-animation: slide-in 0.6s; -moz-animation: slide-in 0.6s; animation: slide-in 0.6s; } .cd-headline.slide p.is-hidden { -webkit-animation: slide-out 0.6s; -moz-animation: slide-out 0.6s; animation: slide-out 0.6s; } @-webkit-keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(-100%); } 60% { opacity: 1; -webkit-transform: translateY(20%); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes slide-in { 0% { opacity: 0; -moz-transform: translateY(-100%); } 60% { opacity: 1; -moz-transform: translateY(20%); } 100% { opacity: 1; -moz-transform: translateY(0); } } @keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } 60% { opacity: 1; -webkit-transform: translateY(20%); -moz-transform: translateY(20%); -ms-transform: translateY(20%); -o-transform: translateY(20%); transform: translateY(20%); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes slide-out { 0% { opacity: 1; -webkit-transform: translateY(0); } 60% { opacity: 0; -webkit-transform: translateY(120%); } 100% { opacity: 0; -webkit-transform: translateY(100%); } } @-moz-keyframes slide-out { 0% { opacity: 1; -moz-transform: translateY(0); } 60% { opacity: 0; -moz-transform: translateY(120%); } 100% { opacity: 0; -moz-transform: translateY(100%); } } @keyframes slide-out { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 60% { opacity: 0; -webkit-transform: translateY(120%); -moz-transform: translateY(120%); -ms-transform: translateY(120%); -o-transform: translateY(120%); transform: translateY(120%); } 100% { opacity: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } } /* -------------------------------- xclip -------------------------------- */ .cd-headline.clip span { display: inline-block; padding: .2em 0; } .cd-headline.clip .cd-words-wrapper { overflow: hidden; vertical-align: top; } .cd-headline.clip .cd-words-wrapper::after { /* line */ content: ''; position: absolute; top: 0; right: 0; width: 2px; height: 100%; background-color: #aebcb9; } .cd-headline.clip p { opacity: 0; margin-bottom: 0; } .cd-headline.clip p.is-visible { opacity: 1; } /* -------------------------------- xzoom -------------------------------- */ .cd-headline.zoom .cd-words-wrapper { -webkit-perspective: 300px; -moz-perspective: 300px; perspective: 300px; } .cd-headline.zoom p { opacity: 0; } .cd-headline.zoom p.is-visible { opacity: 1; -webkit-animation: zoom-in 0.8s; -moz-animation: zoom-in 0.8s; animation: zoom-in 0.8s; } .cd-headline.zoom p.is-hidden { -webkit-animation: zoom-out 0.8s; -moz-animation: zoom-out 0.8s; animation: zoom-out 0.8s; } #rs-newsletter-subscribe { .newsletter-title { color: rgb(255, 255, 255); margin-bottom: 0px; font-size: 36px; } .text-right { position: relative; text-align: left !important; } .text-right input[type="email"] { margin-bottom: 0px; max-width: 390px; padding-top: 19px; padding-bottom: 19px; border-radius: 5px; } .text-right input[type="submit"] { position: absolute; z-index: 2; right: 15px; top: 50%; transform: translateY(-50%); font-size: 16px; font-weight: 600; height: 60px; border-radius: 5px; background: rgb(3, 46, 66); transition: all 0.3s ease 0s; } .row { align-items: center; } } @-webkit-keyframes zoom-in { 0% { opacity: 0; -webkit-transform: translateZ(100px); } 100% { opacity: 1; -webkit-transform: translateZ(0); } } @-moz-keyframes zoom-in { 0% { opacity: 0; -moz-transform: translateZ(100px); } 100% { opacity: 1; -moz-transform: translateZ(0); } } @keyframes zoom-in { 0% { opacity: 0; -webkit-transform: translateZ(100px); -moz-transform: translateZ(100px); -ms-transform: translateZ(100px); -o-transform: translateZ(100px); transform: translateZ(100px); } 100% { opacity: 1; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } } @-webkit-keyframes zoom-out { 0% { opacity: 1; -webkit-transform: translateZ(0); } 100% { opacity: 0; -webkit-transform: translateZ(-100px); } } @-moz-keyframes zoom-out { 0% { opacity: 1; -moz-transform: translateZ(0); } 100% { opacity: 0; -moz-transform: translateZ(-100px); } } @keyframes zoom-out { 0% { opacity: 1; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } 100% { opacity: 0; -webkit-transform: translateZ(-100px); -moz-transform: translateZ(-100px); -ms-transform: translateZ(-100px); -o-transform: translateZ(-100px); transform: translateZ(-100px); } } /* -------------------------------- xrotate-3 -------------------------------- */ .cd-headline.rotate-3 .cd-words-wrapper { -webkit-perspective: 300px; -moz-perspective: 300px; perspective: 300px; } .cd-headline.rotate-3 p { opacity: 0; } .cd-headline.rotate-3 i { display: inline-block; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .is-visible .cd-headline.rotate-3 i { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } .cd-headline.rotate-3 i.in { -webkit-animation: cd-rotate-3-in 0.6s forwards; -moz-animation: cd-rotate-3-in 0.6s forwards; animation: cd-rotate-3-in 0.6s forwards; } .cd-headline.rotate-3 i.out { -webkit-animation: cd-rotate-3-out 0.6s forwards; -moz-animation: cd-rotate-3-out 0.6s forwards; animation: cd-rotate-3-out 0.6s forwards; } .no-csstransitions .cd-headline.rotate-3 i { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 0; } .no-csstransitions .cd-headline.rotate-3 .is-visible i { opacity: 1; } @-webkit-keyframes cd-rotate-3-in { 0% { -webkit-transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(0deg); } } @-moz-keyframes cd-rotate-3-in { 0% { -moz-transform: rotateY(180deg); } 100% { -moz-transform: rotateY(0deg); } } @keyframes cd-rotate-3-in { 0% { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } } @-webkit-keyframes cd-rotate-3-out { 0% { -webkit-transform: rotateY(0); } 100% { -webkit-transform: rotateY(-180deg); } } @-moz-keyframes cd-rotate-3-out { 0% { -moz-transform: rotateY(0); } 100% { -moz-transform: rotateY(-180deg); } } @keyframes cd-rotate-3-out { 0% { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); } 100% { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg); } } /* -------------------------------- xscale -------------------------------- */ .cd-headline.scale p { opacity: 0; } .cd-headline.scale i { display: inline-block; opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } .is-visible .cd-headline.scale i { opacity: 1; } .cd-headline.scale i.in { -webkit-animation: scale-up 0.6s forwards; -moz-animation: scale-up 0.6s forwards; animation: scale-up 0.6s forwards; } .cd-headline.scale i.out { -webkit-animation: scale-down 0.6s forwards; -moz-animation: scale-down 0.6s forwards; animation: scale-down 0.6s forwards; } .no-csstransitions .cd-headline.scale i { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 0; } .no-csstransitions .cd-headline.scale .is-visible i { opacity: 1; } @-webkit-keyframes scale-up { 0% { -webkit-transform: scale(0); opacity: 0; } 60% { -webkit-transform: scale(1.2); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: 1; } } @-moz-keyframes scale-up { 0% { -moz-transform: scale(0); opacity: 0; } 60% { -moz-transform: scale(1.2); opacity: 1; } 100% { -moz-transform: scale(1); opacity: 1; } } @keyframes scale-up { 0% { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); opacity: 0; } 60% { -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: 1; } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } } @-webkit-keyframes scale-down { 0% { -webkit-transform: scale(1); opacity: 1; } 60% { -webkit-transform: scale(0); opacity: 0; } } @-moz-keyframes scale-down { 0% { -moz-transform: scale(1); opacity: 1; } 60% { -moz-transform: scale(0); opacity: 0; } } @keyframes scale-down { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } 60% { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); opacity: 0; } } /* -------------------------------- xpush -------------------------------- */ .cd-headline.push p { opacity: 0; } .cd-headline.push p.is-visible { opacity: 1; -webkit-animation: push-in 0.6s; -moz-animation: push-in 0.6s; animation: push-in 0.6s; } .cd-headline.push p.is-hidden { -webkit-animation: push-out 0.6s; -moz-animation: push-out 0.6s; animation: push-out 0.6s; } @-webkit-keyframes push-in { 0% { opacity: 0; -webkit-transform: translateX(-100%); } 60% { opacity: 1; -webkit-transform: translateX(10%); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes push-in { 0% { opacity: 0; -moz-transform: translateX(-100%); } 60% { opacity: 1; -moz-transform: translateX(10%); } 100% { opacity: 1; -moz-transform: translateX(0); } } @keyframes push-in { 0% { opacity: 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } 60% { opacity: 1; -webkit-transform: translateX(10%); -moz-transform: translateX(10%); -ms-transform: translateX(10%); -o-transform: translateX(10%); transform: translateX(10%); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes push-out { 0% { opacity: 1; -webkit-transform: translateX(0); } 60% { opacity: 0; -webkit-transform: translateX(110%); } 100% { opacity: 0; -webkit-transform: translateX(100%); } } @-moz-keyframes push-out { 0% { opacity: 1; -moz-transform: translateX(0); } 60% { opacity: 0; -moz-transform: translateX(110%); } 100% { opacity: 0; -moz-transform: translateX(100%); } } @keyframes push-out { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 60% { opacity: 0; -webkit-transform: translateX(110%); -moz-transform: translateX(110%); -ms-transform: translateX(110%); -o-transform: translateX(110%); transform: translateX(110%); } 100% { opacity: 0; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } }
Save
Cancel