html, body { height: 100%; a > span { vertical-align: middle; } } /*@media (max-width: @screen-xs-max) { ... } // phone @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } // Tablet @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } // Small Desktop @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { } // Large Desktop */ .slides-body { background-color: #fbfbfb; } .contact-body { background-color: #f8f9fb; } #support { padding: 50px 0; border-bottom: 1px solid #e6e6e6; .support-icon-container { text-align: right; @media (max-width: @screen-sm-max) { text-align: center; } > span { font-size: 70px; color: #37A7E8; } } .support-text-container { h3 { margin: 10px 0; } @media (max-width: @screen-sm-max) { text-align: center; } } } #usage { padding: 50px 0; border-bottom: 1px solid #e6e6e6; .support-icon-container { text-align: right; @media (max-width: @screen-sm-max) { text-align: center; } > span { font-size: 46px; color: #37A7E8; } } .support-text-container { h3 { margin: 10px 0; } @media (max-width: @screen-sm-max) { text-align: center; } } } .second-text { font-size: 1.4em; line-height: 1.6em; color: #fff; color: hsla(0,0%,100%,.8); width: 100%; margin-bottom: 25px; @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { font-size: 1.3em; } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { font-size: 1.2em; } } .domain-container { position: relative; #explain { margin-bottom: 10px; text-align: center; } input { width: 230px; display: inline-block; } #domain-id { display: block; position: absolute; top: 36px; left: 235px; font-weight: bold; } ul.errorlist { right: 132px !important; @media (max-width: @screen-xs-max) { display: none; } } } .outer-footer { border-bottom: 1px solid @border-grey; } .static-header { width: 100%; margin-bottom: 20px; text-align: center; padding-top: 40px; padding-bottom: 30px; background-color: #23b3b9; background-image: -webkit-radial-gradient(closest-corner, rgba(16, 47, 70, 0) 60%, rgba(16, 47, 70, 0.26)), -webkit-linear-gradient(108deg, #23b3b9, #1a2980 90%); background-image: radial-gradient(closest-corner, rgba(16, 47, 70, 0) 60%, rgba(16, 47, 70, 0.26)), -webkit-linear-gradient(108deg, #23b3b9, #1a2980 90%); .container { position: relative; } .home { color: #fff; text-transform: uppercase; font-weight: bold; } .logo { color: #fff; font-weight: bold; letter-spacing: -1px; background-color: @navbar-default-brand-color; display: inline-block; padding: 10px; } h3 { color: #fff; margin: 15px 0; } } .static-container { .copy-right { display: inline; } .last { text-align: center; border-top: 1px solid @border-grey; padding: 20px 0; margin-top: 20px; } } .vdivider { margin: 0 15px 0 20px; display: inline-block; vertical-align: middle; color: #fff; } #demo-request { .demo-request-container { .col-md-9 { padding: 20px; background: #fff; border: 1px solid @border-grey; p { font-size: 21px; color: #4d5a69; margin: 0; text-align: center; strong { color: #323B3F; } } } .col-md-3 { padding: 20px; text-align: center; background: #f5f7f9; border: 1px solid @border-grey; border-left: 0; } } } .round-icon { width: 70px; height: 70px; padding: 10px; text-align: center; margin: 0 auto; -webkit-filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); -moz-filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); -ms-filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); -o-filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); background-color: #fff; border-radius: 70px; border: 3px solid #fff; >span { color: #fff; padding: 1px; font-size: 42px; font-weight: 400; } &.blue { background-color: @blue-color; } &.pink { background-color: @pink-color; } &.purple { background-color: @purple-color; } &.green { background-color: @green-color; } &.teal { background-color: @teal-color; } } #slide-bg { position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -1; > div { position: absolute; top: 0; right: 0; left: 0; bottom: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-filter: alpha(opacity=0); -moz-filter: alpha(opacity=0); -ms-filter: alpha(opacity=0); -o-filter: alpha(opacity=0); filter: alpha(opacity=0); z-index: 1; } > div.prev { opacity: 1; transition: opacity 450ms ease; z-index: 3 !important; } > div.fade-out { opacity: 0 !important; z-index: 3 !important; } .landing-bg { #gradient > .front-radial(@light-blue-color); } &.landing > .landing-bg { opacity: 1; z-index: 2; } .product-bg { background: #1e1635; background: -webkit-linear-gradient(bottom right,#4cddff,#3b9aca 10%,#2d6ca5 20%,#2a5291 27%,#283d81 35%,#222654 50%,#1e1635 63%,#0c0010 93%,#000); background: linear-gradient(to top left,#4cddff,#3b9aca 10%,#2d6ca5 20%,#2a5291 27%,#283d81 35%,#222654 50%,#1e1635 63%,#0c0010 93%,#000); } &.product > .product-bg { opacity: 1; z-index: 2; } .pricing-bg { #gradient > .front-radial(lighten(@pink-color, 18%)); } &.pricing > .pricing-bg { opacity: 1; z-index: 2; } .privacy-bg { background: #1b2128; background-image: -webkit-linear-gradient(287deg,#1b2128,#61758e); background-image: linear-gradient(163deg,#1b2128,#61758e); } &.privacy > .privacy-bg { opacity: 1; z-index: 2; } .contact-bg { background-image: -webkit-linear-gradient(287deg,#270530 10%,#196d82 36%,#23B3B9 70%); background-image: linear-gradient(163deg,#270530 10%,#196d82 36%,#23B3B9 70%); } &.contact > .contact-bg { opacity: 1; z-index: 2; } } .nav-row { margin-bottom: 30px; @media (max-width: @screen-xs-max) { text-align: center; } .pull-left { padding: 0 5px; @media (max-width: @screen-xs-max) { float: none !important; } } .pull-right { padding: 9px 0; } .links { display: inline-block; } a { color: #fff; font-weight: bold; display: inline-block; vertical-align: middle; margin: 0 5px; font-size: 12px; } } #hero { min-height: 800px; max-height: 1200px; width: 100%; color: #fff; position: relative; height: 100%; @media (max-height: 600px) { position: relative; } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { min-height: 600px; } sup { color: @green-color; margin-left: 2px; } .copyright { font-weight: normal; font-size: 11px; padding: 16px !important; @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { width: 100%; text-align: center; } } .outer-container { position: absolute; top: 0; right: 0; left: 0; bottom: 48px; overflow: hidden; @media (max-width: @screen-xs-max) { position: static; } .header { padding-top: 10px; >.row > div { display: inline-block; vertical-align: middle; } } .slider { position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin-top: 75px; &.animate { -webkit-transition: -webkit-transform .77s cubic-bezier(.225,.5,.165,1); transition: transform .77s cubic-bezier(.225,.5,.165,1); } } .slide-content { position: absolute; left: -100px; top: 0; right: -100px; height: 100%; display: none; @media (max-width: @screen-xs-max) { position: static; } h1 { font-size: 36px; margin: 10px 0; font-weight: 400; line-height: 1.3; @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { font-size: 32px; } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { font-size: 26px; } @media (max-width: @screen-xs-max) { font-size: 17px; } } > div { position: relative; height: 100%; z-index: 40; padding: 0 70px; .row { height: 100%; > div { height: 100%; @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { height: auto; } } } } } .chart-bg { background-image: url("https://app-static.datareportive.com/images/background@2x.png"); background-position: 0 100%; background-repeat: repeat-x; opacity: .05; background-size: 1164px 300px; position: absolute; bottom: 0; width: 100%; height: 135px; @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url("https://app-static.datareportive.com/images/background.png"); } } } .outer-footer { position: absolute; right: 0; left: 0; bottom: 0; font-weight: 600; height: 48px; .container { @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { margin: 0; padding: 0; } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { margin: 0; padding: 0; width: 100%; } } .pull-right { padding: 14px; color: @text-color; } .nav-lower-btns { @media (max-width: @screen-xs-max) { display: none; } a { font-weight: 600; padding: 16px 0 15px; display: inline-block; border-right: 1px solid @border-grey; width: 150px; text-align: center; text-decoration: none; font-size: 11px; text-transform: uppercase; @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { width: 125px; } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { width: 20%; } .transition(all 250ms ease-in); &:first-child { border-left: 1px solid @border-grey; } &.blue { &:hover { background-color: #fafafa; color: @blue-color; } } &.green { &:hover { background-color: #fafafa; color: @green-color; } } &.pink { &:hover { background-color: #fafafa; color: @pink-color; } } &.teal { &:hover { background-color: #fafafa; color: @teal-color; } } &.orange { &:hover { background-color: #fafafa; color: @orange-color; } } } } } } span.pr-feature { display: block; padding: 10px 0; font-size: 17px; text-align: left; @media (max-width: @screen-xs-max) { text-align: center; } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { text-align: center; } } span.pr-icon { font-size: 46px; } .slide-text { text-shadow: 0 1px 2px rgba(0,0,0,.2); -webkit-font-smoothing: antialiased; } .arrow-container { position: absolute; top: 0; width: 200px; bottom: 0; cursor: pointer; z-index: 120; &:hover { span { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-filter: alpha(opacity=100); -moz-filter: alpha(opacity=100); -ms-filter: alpha(opacity=100); -o-filter: alpha(opacity=100); filter: alpha(opacity=100); } } span { content: ""; display: block; position: absolute; top: 0; bottom: 0; margin: auto 0; width: 19px; height: 58px; background-image: url('../images/arrow.png'); background-repeat: no-repeat; opacity: .8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; -webkit-filter: alpha(opacity=80); -moz-filter: alpha(opacity=80); -ms-filter: alpha(opacity=80); -o-filter: alpha(opacity=80); filter: alpha(opacity=80); -webkit-transition: background .4s ease; transition: background .4s ease; top: 50%; position: absolute; margin-top: -26px; } } .left-arrow-container { left: 0; span { left: 20px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } } .right-arrow-container { right: 0; span { right: 20px; } } .feature-table { width: 100%; max-width: 590px; margin: 0 auto; td { padding: 15px; width: 50%; } } .left-container { @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max), (max-width: @screen-xs-max) { position: static !important; margin-top: 40px !important; text-align: center !important; } } .right-menu { @media (max-width: @screen-xs-max) { display: none !important; } } #landing-slide { .left-container { position: absolute; top: 50%; margin-top: -166.5px; @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { margin-top: -158.5px; } } h2 { font-weight: 200; max-width: 768px; margin: 20px auto 0; line-height: 1.5em; margin-bottom: 25px; font-size: 36px; } } #contact-slide { .mheader { min-height: 0; background: #F4F4F6; border-bottom: 0; position: relative; text-align: center; padding: 20px 0; } h3 { color: #fff; font-weight: 200; color: rgba(255, 255, 255, 0.8); text-align: center; margin-bottom: 30px; line-height: 1.3; } h5 { color: #5b5b65; } input[type="submit"] { margin-top: 20px; } span { font-size: 28px; color: #37A7E8; } form { position: relative; overflow: hidden; } .success { background-color: #5cb85c; text-align: center; padding: 8px; font-weight: 600; border-radius: 7px; position: absolute; width: 100%; transition: 300ms all ease; left: 0; &.slide-out { left: -400px; } } .input-label-inline input[type="text"], .input-label-inline input[type="email"] { height: auto; } .form-group { margin: 0 0 10px 0; } .body-modal { position: absolute; top: 50%; left: 50%; margin-top: -233px; margin-left: -170px; width: 340px; } .left-container { position: absolute; top: 50%; margin-top: -163px; } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { .body-modal { position: static; margin: 50px auto 0; } } } form .loader > img { display: block; height: 34px; margin: 10px auto 0; } #product-slide { .left-container { position: absolute; top: 50%; margin-top: -245px; } } #product-slide, #privacy-slide { h3 { color: #fff; font-weight: 200; color: rgba(255, 255, 255, 0.8); text-align: center; margin-bottom: 30px; line-height: 1.3; @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { font-size: 21px; } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { font-size: 17px; } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { font-size: 17px; } } .feature { padding: 20px 0; text-align: center; } .features-menu { padding: 15px; border-top: 1px solid @border-grey; border-bottom: 1px solid @border-grey; } .title-area { > h3 { font-size: 16px; font-weight: 400; margin: 15px 0 5px; color: #fff; @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { font-size: 15px; } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { font-size: 15px; } } > p { color: rgba(255, 255, 255, 0.8); } } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { .feature { text-align: left; margin: 0 15px; h3 { text-align: left; } .title-area { display: inline-block; vertical-align: middle; margin-left: 20px; } .round-icon { display: inline-block; vertical-align: middle; } } } } #privacy-slide { position: absolute; top: 50%; margin-top: -177px; @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { position: static !important; margin-top: 0; } } #pricing-slide, #dashboard-slide { >.row { text-align: center; } .left-container { height: auto !important; position: absolute; top: 50%; margin-top: -315px; left: 50%; margin-left: -497px; @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { margin-left: -408px; margin-top: -256px; } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { position: static; margin-top: 0; margin-left: 0; width: 100%; } } h1 { font-size: 36px; margin-bottom: 10px; font-weight: 600; @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { font-size: 32px; } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { font-size: 26px; } } h3 { color: #fff; font-weight: 200; color: rgba(255, 255, 255, 0.8); @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { font-size: 21px; } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { font-size: 17px; } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { font-size: 17px; } } .pricing-containers { margin-top: 50px; } .pricing-features { margin-top: 40px; } .pricing-container { max-width: 300px; margin: 0 auto; max-height: 500px; border-radius: 7px; width: 300px; margin: 10px; display: inline-block; padding: 20px; height: 400px; box-shadow: 0 15px 35px rgba(0,0,0,.1),0 3px 10px rgba(0,0,0,.07); position: relative; vertical-align: top; .price { font-size: 50px; font-weight: 300; margin: 10px; line-height: 1.1; span { display: block; font-size: 15px; font-weight: 400; } } .icon { font-size: 36px; display: inline-block; vertical-align: middle; margin-right: 10px; } .pf > .title { font-size: 17px; font-weight: bold; display: inline-block; vertical-align: middle; } .btn { width: 100%; position: absolute; bottom: 0; left: 0; padding: 20px; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; text-transform: uppercase; border: 0; font-weight: 600; background-color: rgba(0,0,0,0.2); &:hover { background-color: rgba(0,0,0,0.3); } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { font-size: 11px; } } .pf { padding: 10px; font-size: 14px; } &.free { background-color: @green-color; #gradient > .directional(@green-color, lighten(@green-color, 18%)); } &.plus { background-color: @teal-color; #gradient > .directional(@teal-color, lighten(@teal-color, 18%)); } &.pro { background-color: @orange-color; #gradient > .directional(@orange-color, lighten(@orange-color, 18%)); } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { max-width: 250px; width: 250px; height: 280px; padding: 10px; .price { font-size: 33px; } .pricing-features { margin-top: 0; } .pricing-container { .btn-primary { font-size: 14px; } } .pf { padding: 5px; .title { font-size: 14px; } } } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { max-width: 190px; width: 250px; height: 280px; padding: 10px; .price { font-size: 33px; } .pricing-features { margin-top: 0; } .icon { font-size: 22px; } .pf { padding: 5px; .title { font-size: 14px; } } } } } #landing-image, #product-image, #privacy-image, #dashboard-report-image, #dashboard-report-image-mobile { height: 100%; background-size: 100%; background-repeat: no-repeat; background-position: center; @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { background-size: 90%; } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { background-size: 70%; } } #landing-image { width: 1000px; background-image: url('../images/macbook-retina-big.png'); background-position: left; margin-top: -37px; margin-left: -65px; @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { margin-left: -45px; } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { height: 350px; margin: 30px auto; width: 100%; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url('../images/macbook-retina-big@2x.png'); } } #dashboard-report-image, #dashboard-report-image-mobile { width: 1000px; height: 600px; background-image: url('../images/macbook-ipad-retina-big.png'); margin-top: -37px; //margin-left: -65px; @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { margin-left: -45px; } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { height: 350px; margin: 30px auto; width: 100%; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url('../images/macbook-ipad-retina-big@2x.png'); } } #dashboard-report-image-mobile { width: 100% !important; height: 400px !important; @media (max-width: @screen-xs) { height: 300px !important; } } #product-image { width: 420px; background-image: url('../images/ipad-report.png'); background-position: left; margin: -17px auto 0; @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url('../images/ipad-report@2x.png'); } } #privacy-image-sm { width: 100px; height: 100px; margin: 0 auto 20px; background-image: url('../images/lock.png'); background-size: 100%; @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url('../images/lock@2x.png'); } } #privacy-image { width: 350px; height: 350px; margin: -38px auto 0; background-image: url('../images/lock.png'); @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url('../images/lock@2x.png'); } } #large-logo { width: 75px; height: 75px; margin: 0 auto; background-size: 75px; background-image: url('../images/logo@75.png'); @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url('../images/logo@150.png'); } } #logo { display: inline-block; vertical-align: middle; width: 48px; height: 48px; background-size: 48px; background-image: url('../images/logo@48.png'); @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url('../images/logo@96.png'); } } #logo-text { display: inline-block; vertical-align: middle; color: #fff; font-size: 16px; font-weight: 800; letter-spacing: -1px; margin-left: 8px; } #error-page { width: 100%; height: 100%; background-image: -webkit-radial-gradient(closest-corner,rgba(16,47,70,0) 60%,rgba(16,47,70,.26)),-webkit-linear-gradient(108deg,@teal-color,#1a2980 90%); background-image: radial-gradient(closest-corner,rgba(16,47,70,0) 60%,rgba(16,47,70,.26)),-webkit-linear-gradient(108deg,@teal-color,#1a2980 90%); color: #fff; .section-inner { text-align: center; padding-top: 100px; } a { color: #fff; } } .contact-container { padding-top: 40px; padding-bottom: 40px; @media (max-width: @screen-sm-max) { padding-top: 0; padding-bottom: 0; } .left-container { padding-top: 60px; @media (max-width: @screen-sm-max) { padding-top: 0; margin-top: 0 !important; } } .col-md-5 { @media (max-width: @screen-sm-max) { margin-top: 50px; } .body-modal { @media (max-width: @screen-sm-max) { width: 100%; } @media (max-width: @screen-sm-max) { margin-bottom: 30px; } } } } #hero-page { h1, h2, h3 { color: #fff; } &.contact { #gradient > .front-radial(@light-blue-color); } .header { padding-top: 10px; >.row > div { display: inline-block; vertical-align: middle; } } } .round-logo { width: 75px; height: 75px; margin: 0 auto; position: absolute; top: -38px; left: 50%; margin-left: -37px; background-size: 75px; background-image: url('../images/logo@75.png'); @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url('../images/logo@150.png'); } } #sign-overlay { height: 100%; #gradient > .front-radial(@light-blue-color); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; .top, .bottom { width: 100%; height: 50%; position: absolute; } .top { background-image: url("../images/background.png"); background-position: 0 100%; background-repeat: repeat-x; opacity: .07; background-size: 1164px 300px; @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url("../images/background@2x.png"); } } .bottom { background-color: #F8F9FB; top: 50%; } } .signup-base { height: auto; } #sign-layout { .form-container { /*position: fixed; top: 50%; left: 50%; transition: all 1100ms ease; z-index: 2;*/ @media (max-width: @screen-xs-max) { .body-modal { width: 100%; #explain { font-size: 10px; } .domain { width: 130px !important; } #domain-id { left: 143px !important; } } } margin-top: 50px; &.slide-out { top: 180%; } .btn-success { width: 100%; } &.signup { } &.signin { #id_domain { margin-bottom: 0; } #domain-id { top: 7px; } &.signin-redirect { margin-left: -200px; margin-top: (-1)*(94.5px+37.5px); } } .mheader { position: relative; background-color: #23b3b9; color: #fff; #gradient > .front-radial(#23b3b9); } h4 { text-align: center; margin: 50px 0 0 0; } .mcontent { padding: 20px; } .subtitle { color: #fff; font-size: 13px; text-align: center; padding: 5px 50px 20px; } p { text-align: center; margin: 10px 0 0; } } .registration-footer { width: 100%; bottom: 0; background: #fff; } } .signup-container { @media (min-height: 750px) { .registration-footer { position: fixed; bottom: 0; } .form-container { position: fixed; top: 50%; left: 50%; z-index: 2; &.signup { margin-left: -200px !important; margin-top: (-1)*(318.5px+37.5px) !important; } } } } .signin-container { @media (min-height: 400px) { .registration-footer { position: fixed; bottom: 0; } .form-container { position: fixed; top: 50%; left: 50%; z-index: 2; &.signin { margin-left: -200px !important; margin-top: (-1)*(116px+37.5px) !important; } } } @media (max-width: @screen-xs-max) { .form-container { position: static; &.signin { margin-left: 0 !important; margin-top: 50px !important; } } } } .main-form { position: relative; .form-control { margin-bottom: 10px; } ul.errorlist { list-style-type: none; position: absolute; margin: 0; padding: 6px 10px; right: 1px; color: red; background-color: #fff; margin-top: 1px; background-color: rgba(255,255,255,0.8); border-top-right-radius: 4px; border-top-left-radius: 4px; border-left: 1px solid @border-grey; } } footer ul li { list-style-type: none; padding: 0; margin: 0 10px 0 0; display: inline; } footer { font-size: 13px; margin-top: 40px; border-top: 1px solid #e6e6e6; padding: 25px 0 15px; ul { padding: 0; display: inline-block; } p { display: inline-block; } } .home-href { &:hover { text-decoration: none; } } #hero-btns { @media (min-width: @screen-sm-min) { .row { display: table; } [class*="col-"] { float: none; display: table-cell; vertical-align: top; } } .feature-container { &:last-child { border-right: 1px solid @border-grey; } text-align: center; border-left: 1px solid @border-grey; border-bottom: 1px solid @border-grey; padding: 40px; .feature { h5, p, a { font-size: 14px; } h5 { margin-top: 20px; } } } } #supported_dbs { text-align: center; img { max-width: 820px; width: 100%; } .db-support-container { padding: 40px 0; } } #lower-hero-container { background-color: #F8F9FB; }