$font-primary: 'Roboto', Arial, sans-serif; // Overrides $grid-gutter-width: 40px !default; $border-radius-base: 4px !default; $padding-base-vertical: 14px !default; $brand-primary: #FA5555 !default; $brand-secondary: #484c50 !default; $brand-tertiary: #85919d !default; $brand-white: #fff; $brand-black: #000; $brand-darker: #444; $brand-gray: #ccc; $brand-lighter: #e9e9e9; $brand-body-color: #818892; $brand-selection-color: #f9f6f0; $brand-overlay-color: #3b3d40; $brand-bg-color: #efefef; $input-border-focus: $brand-primary !default; $form-group-margin-bottom: 30px !default; // Mixin @mixin mouliWP-translate($translatex) { -moz-transform: translateX($translatex); -webkit-transform: translateX($translatex); -ms-transform: translateX($translatex); -o-transform: translateX($translatex); transform: translateX($translatex); } @mixin transition($transition) { -moz-transition: $transition ease; -o-transition: $transition ease; -webkit-transition: $transition ease; -ms-transition: $transition ease; transition: $transition ease; } @mixin inline-block() { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; } @mixin flex() { display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } @mixin flex() { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } @mixin flexwrap() { flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; } @font-face { font-family: 'icomoon'; src:url('../fonts/icomoon/icomoon.eot?srf3rx'); src:url('../fonts/icomoon/icomoon.eot?srf3rx#iefix') format('embedded-opentype'), url('../fonts/icomoon/icomoon.ttf?srf3rx') format('truetype'), url('../fonts/icomoon/icomoon.woff?srf3rx') format('woff'), url('../fonts/icomoon/icomoon.svg?srf3rx#icomoon') format('svg'); font-weight: normal; font-style: normal; } @mixin icomoon() { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } // Import @import 'bootstrap/mixins'; @import 'bootstrap/variables'; /* ======================================================= * * Template Style * Edit this section * * ======================================================= */ // Template Base body { font-family: $font-primary; // font-weight: 300; font-size: 16px; line-height: 28px; font-weight: 300; color: $brand-tertiary; height: 100%; position: relative; &.mouliWP-overflow { overflow-x: auto; } } a { color: $brand-primary; @include transition(.5s); &:hover, &:active, &:focus { color: $brand-primary; outline: none; text-decoration: none; } } p, figure { margin-bottom: 1.5em; } h1, h2, h3, h4, h5, h6 { color: $brand-secondary; font-family: $font-primary; font-weight: 400; margin: 0 0 30px 0; } ::-webkit-selection { color: $brand-body-color; background: $brand-selection-color; } ::-moz-selection { color: $brand-body-color; background: $brand-selection-color; } ::selection { color: $brand-body-color; background: $brand-selection-color; } // Buttons .btn { margin-right: 4px; margin-bottom: 4px; font-family: $font-primary; font-size: 16px; font-weight: 400; @include border-radius(4px); @include transition(.5s); &.btn-md { padding: 10px 20px!important; } &.btn-lg { padding: 18px 36px!important; } &:hover, &:active, &:focus { box-shadow: none!important; outline: none!important; } } .btn-primary { background: $brand-primary; color: $brand-white; border: 2px solid $brand-primary; &:hover, &:focus, &:active { background: lighten($brand-primary, 5%)!important; border-color: lighten($brand-primary, 5%)!important; } &.btn-outline { background: transparent; color: $brand-primary; border: 2px solid $brand-primary; &:hover, &:focus, &:active { background: $brand-primary; color: $brand-white; } } } .btn-success { background: $brand-success; color: $brand-white; border: 2px solid $brand-success; &:hover, &:focus, &:active { background: darken($brand-success, 5%)!important; border-color: darken($brand-success, 5%)!important; } &.btn-outline { background: transparent; color: $brand-success; border: 2px solid $brand-success; &:hover, &:focus, &:active { background: $brand-success; color: $brand-white; } } } .btn-info { background: $brand-info; color: $brand-white; border: 2px solid $brand-info; &:hover, &:focus, &:active { background: darken($brand-info, 5%)!important; border-color: darken($brand-info, 5%)!important; } &.btn-outline { background: transparent; color: $brand-info; border: 2px solid $brand-info; &:hover, &:focus, &:active { background: $brand-info; color: $brand-white; } } } .btn-warning { background: $brand-warning; color: $brand-white; border: 2px solid $brand-warning; &:hover, &:focus, &:active { background: darken($brand-warning, 5%)!important; border-color: darken($brand-warning, 5%)!important; } &.btn-outline { background: transparent; color: $brand-warning; border: 2px solid $brand-warning; &:hover, &:focus, &:active { background: $brand-warning; color: $brand-white; } } } .btn-danger { background: $brand-danger; color: $brand-white; border: 2px solid $brand-danger; &:hover, &:focus, &:active { background: darken($brand-danger, 5%)!important; border-color: darken($brand-danger, 5%)!important; } &.btn-outline { background: transparent; color: $brand-danger; border: 2px solid $brand-danger; &:hover, &:focus, &:active { background: $brand-danger; color: $brand-white; } } } .btn-outline { background: none; border: 2px solid lighten($brand-black, 50%); font-size: 16px; @include transition(.3s); &:hover, &:focus, &:active { box-shadow: none; } } // Form Input Field .form-control { box-shadow: none; background: transparent; border: 2px solid rgba(0, 0, 0, 0.1); height: 54px; font-size: 18px; font-weight: 300; &:active, &:focus { outline: none; box-shadow: none; border-color: $brand-primary; } } body { background: $brand-bg-color url(../images/white_wave.png) repeat;; // high resolution background. @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { background: $brand-bg-color url(../images/white_wave_@2X.png) repeat; } } #mouliWP-page { .boxed & { max-width: 1340px; max-width: 1140px; margin: 0 auto; background: $brand-white; -webkit-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1); -o-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1); @media screen and (max-width: $screen-lg) { max-width: 1060px; max-width: 960px; } .container { max-width: 1140px; max-width: 960px; margin: 0 auto; @media screen and (max-width: $screen-lg) { max-width: 960px; max-width: 780px; } } } } #mouliWP-header { position: absolute; width: 100%; left: 0; padding-top: 50px; z-index: 12; @media screen and (max-width: $screen-sm) { padding-top: 30px; } #mouliWP-logo { text-align: center; display: block; position: absolute; width: 100%; left: 0; top: -12px; z-index: 1; a { font-size: 30px; font-weight: 500; color: rgba(255,255,255,1); span { color: $brand-primary; } } } nav { position: relative; ul { padding: 0; margin: 0; z-index: 2; position: relative; @media screen and (max-width: $screen-sm) { display: none; } li { display: inline; a { font-size: 18px; color: rgba(255,255,255,.5); font-weight: 400; &:hover { color: rgba(255,255,255,1); } } &.mouliWP-cta-btn { a { position: relative; border-bottom: none; padding: 7px 20px; border: 2px solid rgba(255,255,255,.5); @include border-radius(7px); &:hover { border: 2px solid rgba(255,255,255,1); } } } &.active { a { color: rgba(255,255,255,1); } } } &.left-menu { li { margin-right: 30px; } } &.right-menu { li { margin-left: 30px; } } } } } #mouliWP-hero { background-color: transparent; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; position: relative; width: 100%;@media screen and (max-width: $screen-xs) { height: 450px; } .mouliWP-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #2a2d36; opacity: .54; z-index: 9; } .mouliWP-intro { display: table; width: 100%; z-index: 10; position: relative; @media screen and (max-width: $screen-xs) { height: 450px; } > div { vertical-align: middle; display: table-cell; .mouliWP-left-position { width: 65%; float: left; @media screen and (max-width: $screen-md) { width: 100%; } } .mouliWP-center-position { width: 65%; text-align: center; margin: 0 auto; @media screen and (max-width: $screen-md) { width: 100%; text-align: center; } } .mouliWP-right-position { width: 65%; float: right; text-align: right; @media screen and (max-width: $screen-md) { width: 100%; text-align: left; } } h2 { font-size: 70px; line-height: 87px; font-weight: 100; color: rgba(255,255,255,1); @media screen and (max-width: $screen-md) { font-size: 40px; line-height: 57px; text-align: center; } } h3 { font-weight: 100; font-size: 30px; line-height: 45px; color: rgba(255,255,255,1); @media screen and (max-width: $screen-md) { font-size: 24px; line-height: 37px; text-align: center; } } .btn-outline, .btn-primary { padding: 20px 30px!important; min-width: 200px; font-size: 18px; @media screen and (max-width: $screen-xs) { padding: 10px 30px!important; width: 100%; } } .btn-outline { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,1); background-color: rgba(255,255,255,.1); &:hover { border-color: rgba(255,255,255,.4); color: rgba(255,255,255,1); background-color: rgba(255,255,255,.2); } } } } .mouliWP-learn-more { position: absolute; bottom: -25px; left: 50%; z-index: 12; text-align: center; a { display: block; .text { display: block; color: rgba(255,255,255,.5); margin-bottom: 20px; } .arrow { display: block; width: 50px; height: 50px; margin: 0 auto; background: $brand-primary; @include border-radius(50%); i { top: 10px; position: relative; color: $brand-white; vertical-align: middle; } } } } } .no-js-fullheight { height: 620px; @media screen and (max-width: $screen-sm) { height: inherit; padding: 3em 0; } } .mouliWP-lead { font-size: 50px; font-weight: 300; color: $brand-secondary; margin-bottom: 10px; @media screen and (max-width: $screen-sm) { font-size: 35px; } } .mouliWP-sub-lead { font-size: 18px; line-height: 32px; font-weight:300; } #mouliWP-features, #mouliWP-features-2, #mouliWP-features-3, #mouliWP-features-4, #mouliWP-projects, #mouliWP-testimonials, #mouliWP-about, #mouliWP-subscribe, #mouliWP-info, #mouliWP-pricing, #mouliWP-faqs, #mouliWP-footer { background-color: $brand-white; padding: 7em 0; @media screen and (max-width: $screen-sm) { padding: 3em 0; } } #mouliWP-projects { background: #f9f9f9; .mouliWP-lead { font-size: 50px; font-weight: 300; color: $brand-secondary; margin-bottom: 10px; @media screen and (max-width: $screen-sm) { font-size: 35px; } } .mouliWP-sub-lead { font-size: 18px; line-height: 32px; font-weight:300; } .mouliWP-project-item { display: block; width: 100%; position: relative; // top: 0; background: $brand-white; overflow: hidden; z-index: 9; margin-bottom: 30px; -webkit-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1); -o-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1); @include border-radius(7px); @include transition(.3s); img { z-index: 8; opacity: 1; @include transition(.3s); } .mouliWP-text { padding: 30px 10px 10px 20px; text-align: center; h2, span { text-decoration: none!important; } h2 { font-size: 18px; font-weight: bold; margin: 0 0 10px 0; color: $brand-secondary; } span { color: lighten($brand-black, 70%); font-size: 16px; font-weight: 400; } p { color: $brand-tertiary; @include transition(.5s); } } &:hover, &:focus { -webkit-box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.1); -o-box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.1); text-decoration: none; // top: -10px; img { opacity: .7; } h2, span { text-decoration: none!important; } p { color: $brand-secondary; } } } } #mouliWP-features { .mouliWP-devices { margin-bottom: 40px; img { margin: 0 auto; } } .mouliWP-lead { font-size: 50px; font-weight: 300; color: $brand-secondary; margin-bottom: 10px; @media screen and (max-width: $screen-sm) { font-size: 35px; } } .mouliWP-sub-lead { font-size: 18px; line-height: 32px; font-weight:300; } .mouliWP-feature { text-align: center; padding-left: 20px; padding-right: 20px; margin-bottom: 30px; width: 100%; @media screen and (max-width: $screen-sm) { padding-left: 0px; padding-right: 0px; } .mouliWP-icon { width: 112px; height: 112px; display: table; margin: 0 auto 30px auto; background: lighten($brand-primary, 33%); @include border-radius(50%); i { position: relative; top: -1px; display: table-cell; vertical-align: middle; font-size: 50px; color: $brand-primary; } } h3 { font-size: 20px; margin-bottom: 10px; } } } #mouliWP-features-2, #mouliWP-features-3, #mouliWP-features-4 { background: #f9f9f9; overflow: hidden; .mouliWP-label { display: block; } .mouliWP-lead { font-size: 50px; font-weight: 300; color: $brand-secondary; margin-bottom: 40px; @media screen and (max-width: $screen-sm) { font-size: 35px; } } .mouliWP-feature { clear: both; margin-bottom: 20px; float: left; width: 100%; .mouliWP-icon { float: left; width: 10%; i { font-size: 40px; color: $brand-primary; @media screen and (max-width: $screen-sm) { font-size: 30px; } } } .mouliWP-text { float: right; width: 85%; } h3 { font-size: 24px; color: $brand-secondary; margin-bottom: 10px; font-weight: 300; } } .mouliWP-btn-action { width: 100%; float: left; > a { margin-left: 15%; @media screen and (max-width: $screen-xs) { margin-left: 0; } } } .mouliWP-feature-image { @media screen and (max-width: $screen-md) { img { max-width: 100%; } } } } #mouliWP-features-3 { background: $brand-white; } #mouliWP-testimonials { &.boredr-top { border-top: 1px solid lighten($brand-tertiary, 38%); } .mouliWP-lead { font-size: 50px; font-weight: 300; color: $brand-secondary; margin-bottom: 10px; @media screen and (max-width: $screen-sm) { font-size: 35px; } } .flexslider { background: transparent; border: none; @include border-radius(0); } .slides { z-index: 99; li { blockquote { border-left: none; padding-left: 0; font-size: 26px; line-height: 46px; margin-bottom: 0; } p { cite { font-size: 16px; } } } } .flexslider-controls { margin-left: -15px; z-index: 100; position: relative; .flex-control-nav { padding-bottom: 30px; @media screen and (max-width :$screen-sm) { padding-bottom: 30px; } li { cursor: pointer; img { cursor: pointer; width: 50px; opacity: .3; @include transition(.5s); @include border-radius(50%); } &.flex-active { img { opacity: 1; } } &:hover { img { opacity: 1; } } } } } } #mouliWP-about { .mouliWP-social { a { font-size: 35px!important; color: lighten($brand-black, 70%)!important; &:hover { color: lighten($brand-black, 20%)!important; } } } .mouliWP-lead { font-size: 50px; font-weight: 300; color: $brand-secondary; margin-bottom: 30px; @media screen and (max-width: $screen-sm) { font-size: 35px; } } .mouliWP-sub-lead { font-size: 18px; line-height: 32px; font-weight:300; } .flexslider { background: transparent; border: none; @include border-radius(0); } } #mouliWP-subscribe { background: #f9f9f9; padding: 3em 0; h3 { float: left; width: 30%; top: 10px; font-size: 26px; margin-bottom: 0; position: relative; label { font-weight: 300; } @media screen and (max-width: $screen-md) { width: 100%; margin-bottom: 30px; } } form { width: 60%; float: right; position: relative; @media screen and (max-width: $screen-md) { width: 100%; } .mouliWP-icon { position: absolute; top: 50%; margin-top: -10px; left: 15px; font-size: 20px; @media screen and (max-width: $screen-xs) { position: absolute; top: 26px; } } input[type="email"] { width: 100%; background: #ededed; border: none; padding-left: 50px; padding-right: 170px; @media screen and (max-width: $screen-xs) { margin-bottom: 10px; padding-right: 50px; } } input[type="submit"] { position: absolute; right: 0; top: 0; margin-right: -4px; height: 54px; border-top-left-radius: 0; border-bottom-left-radius: 0; font-size: 20px; font-weight: 300; width: 160px; @media screen and (max-width: $screen-xs) { position: relative; width: 100%; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } } } } #mouliWP-info { background: $brand-primary; .mouliWP-label { color: rgba(255,255,255,.5); } .mouliWP-lead { color: rgba(255,255,255,1); } p { color: rgba(255,255,255,1); } } #mouliWP-pricing { background: #f9f9f9; .price-box { background: $brand-white; border: 2px solid #ECEEF0; text-align: center; padding: 30px; margin-bottom: 40px; position: relative; @include border-radius(5px); &.popular { border: 2px solid $brand-primary; .popular-text { top: 0; left: 50%; margin-left: -54px; margin-top: -2em; position: absolute; padding: 4px 20px; background: $brand-primary; color: $brand-white; @include border-radius(4px); &:after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -10px; border-top: 10px solid black; border-top-color: $brand-primary; border-left: 10px solid transparent; border-right: 10px solid transparent; } } } } .pricing-plan { margin: 0 0 30px 0; padding: 0; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; } .price { font-size: 50px; color: $brand-black; .currency { font-size: 20px; top: -1.2em; } small { font-size: 16px; } } .pricing-info { padding: 0; margin: 0 0 30px 0; li { padding: 0; margin: 0; list-style: none; text-align: center; } } } #mouliWP-faqs { .mouliWP-faq-list { margin: 0; padding: 0; li { margin: 0 0 40px 0; padding: 0; line-height: 24px; list-style: none; @media screen and (max-width: $screen-sm) { margin: 0 0 20px 0; } h2 { font-size: 30px; font-weight: 300; margin-bottom: 15px; @media screen and (max-width: $screen-sm) { font-size: 26px; } } } } } #mouliWP-footer { padding-bottom: 0; a { color: darken($brand-tertiary, 10%); &:hover { text-decoration: underline; } } .mouliWP-footer-widget { @media screen and (max-width: $screen-md) { margin-bottom: 30px; float: left; width: 100%; } h3 { font-size: 18px; font-weight: 400; } .mouliWP-links { padding: 0; margin: 0; li { padding: 0; margin: 0; list-style: none; margin-bottom: 15px; line-height: 24px; a { color: darken($brand-tertiary, 10%); &:hover { text-decoration: underline; } } } } } .mouliWP-copyright { border-top: 1px solid lighten($brand-tertiary, 38%); padding: 40px 0; a { font-weight: 700; } p { margin-bottom: 0; small { font-size: 15px; } } .mouliWP-left { float: left; } .mouliWP-right { float: right; @media screen and (max-width: $screen-sm) { float: left; } } } } .mouliWP-social { padding: 0; margin: 0; li { padding: 0; margin: 0; display: inline; a { padding: 4px 7px; font-size: 22px; &:hover { text-decoration: none!important; color: $brand-primary!important; } } } } // Person .mouliWP-person { text-align: center; @media screen and (max-width: $screen-md) { margin-bottom: 30px; float: left; width: 100%; } figure { margin: 0 auto 30px auto; img { margin: 0 auto; display: block; } } .mouliWP-name { margin-bottom: 0; color: $brand-secondary; } .mouliWP-designation { color: $brand-tertiary; } .mouliWP-bio { text-align: left; } } #mouliWP-why { } // Offcanvas Menu #mouliWP-offcanvas, .mouliWP-nav-toggle, #mouliWP-page { @include transition(.5s); } #mouliWP-offcanvas, .mouliWP-nav-toggle, #mouliWP-page { position: relative; } #mouliWP-page { z-index: 2; @include transition(.5s); .offcanvas-visible & { @include mouliWP-translate(-275px); } } #mouliWP-offcanvas { display: none; height: 100%; right: 0; overflow-y: auto; position: fixed; z-index: 1; top: 0; width: 275px; background: rgba(0,0,0,1); padding: 30px; @media screen and (max-width: $screen-sm) { display: block; } ul { padding: 0; margin: 0; li { padding: 0; margin: 0 0 10px 0; list-style: none; line-height: 28px; a { font-size: 18px; color: rgba(255,255,255,.7); } &.active { a { color: $brand-primary; } } } } } // Burger Menu .mouliWP-nav-toggle { cursor: pointer; text-decoration: none; &.active i { &::before, &::after { background: $brand-white; } } &.dark { &.active i { &::before, &::after { background: $brand-white; } } } &:hover, &:focus, &:active { outline: none; border-bottom: none!important; } i { position: relative; @include inline-block; width: 30px; height: 2px; color: $brand-white; font:bold 14px/.4 Helvetica; text-transform: uppercase; text-indent:-55px; background: $brand-white; transition: all .2s ease-out; &::before, &::after { content:''; width: 30px; height: 2px; background: $brand-white; position: absolute; left:0; @include transition(.2s); } } &.dark { i { position: relative; color: $brand-black; background: $brand-black; transition: all .2s ease-out; &::before, &::after { background: $brand-black; @include transition(.2s); } } } } .mouliWP-nav-toggle i::before { top: -7px; } .mouliWP-nav-toggle i::after { bottom: -7px; } .mouliWP-nav-toggle:hover i::before { top: -10px; } .mouliWP-nav-toggle:hover i::after { bottom: -10px; } .mouliWP-nav-toggle.active i { background: transparent; } .mouliWP-nav-toggle.active i::before { top:0; -webkit-transform: rotateZ(45deg); -moz-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); transform: rotateZ(45deg); } .mouliWP-nav-toggle.active i::after { bottom:0; -webkit-transform: rotateZ(-45deg); -moz-transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); -o-transform: rotateZ(-45deg); transform: rotateZ(-45deg); } .mouliWP-nav-toggle { position: fixed; top: 40px; right: 20px; z-index: 9999; display: block; margin: 0 auto; display: none; cursor: pointer; @media screen and (max-width: $screen-sm) { display: block; top: 20px; } } // Magnific Popup .mfp-with-zoom .mfp-container, .mfp-with-zoom.mfp-bg { opacity: 0; -webkit-backface-visibility: hidden; /* ideally, transition speed should match zoom duration */ -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .mfp-with-zoom.mfp-ready .mfp-container { opacity: 1; } .mfp-with-zoom.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-with-zoom.mfp-removing .mfp-container, .mfp-with-zoom.mfp-removing.mfp-bg { opacity: 0; } // Helper Class .col-xxs-12 { @media screen and (max-width: 480px) { float: none; width: 100%; } } .btn-cta { padding: 20px 30px!important; width: 200px; font-size: 18px; @media screen and (max-width: $screen-xs) { padding: 10px 30px!important; width: 100%; } } .row-bottom-padded-lg { padding-bottom: 7em; @media screen and (max-width: $screen-sm ) { padding-bottom: 2em; } } .row-top-padded-lg { padding-top: 7em; @media screen and (max-width: $screen-sm ) { padding-top: 2em; } } .row-bottom-padded-md { padding-bottom: 4em; @media screen and (max-width: $screen-sm ) { padding-bottom: 2em; } } .row-top-padded-md { padding-top: 4em; @media screen and (max-width: $screen-sm ) { padding-top: 2em; } } .row-bottom-padded-sm { padding-bottom: 2em; @media screen and (max-width: $screen-sm ) { padding-bottom: 2em; } } .row-top-padded-sm { padding-top: 2em; @media screen and (max-width: $screen-sm ) { padding-top: 2em; } } .no-js #loader { display: none; } .js #loader { display: block; position: absolute; left: 100px; top: 0; border: 10px solid red; } .mouliWP-loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url(../images/Preloader_2.gif) center no-repeat #fff; } .animate-box { .js & { opacity: 0; } }