#mobile { .arrow-container { width: 35px; } .left-arrow-container span { left: 7px; } .right-arrow-container span { right: 7px; } min-height: 100%; margin-bottom: 20px; sup { color: @green-color; margin-left: 2px; } .mobile-footer { padding: 10px; margin-top: 20px; text-align: center; font-size: 11px; } .mobile-content { padding-bottom: 20px; position: relative; z-index: 11; } .mobile-section { min-height: 100%; position: relative; padding: 0 35px; color: #fff; padding-bottom: 20px; .mheader { min-height: 0; background: #F4F4F6; border-bottom: 0; position: relative; text-align: center; padding: 20px 0; margin-top: 50px; } .body-modal { width: 100%; z-index: 2; position: relative; } .mobile-plans { .mobile-plan { box-shadow: 0 15px 35px rgba(0,0,0,.1),0 3px 10px rgba(0,0,0,.07); border-radius: 7px; margin-bottom: 15px; padding: 10px 10px 80px 10px; position: relative; &.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%)); } &.unlimited { background-color: @brick-color; #gradient > .directional(@brick-color, lighten(@brick-color, 18%)); } .price { font-size: 28px; font-weight: 600; margin: 10px; line-height: 1.1; text-align: center; span { display: block; font-size: 19px; margin-top: 5px; font-weight: 400; } } .icon { font-size: 30px; display: inline-block; vertical-align: middle; margin-right: 10px; } .pf { text-align: center; margin: 10px 0; } .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); } } } } .feature { position: relative; margin: 20px auto; max-width: 200px; .round-icon { width: 40px; height: 40px; position: absolute; top: 50%; margin-top: -20px; background-color: transparent; border: 0; } .round-icon > span { color: #fff; padding: 0; font-size: 20px; } .title-area { padding-left: 60px; } h3 { color: #fff; margin: 5px 0; text-align: left; font-size: 12px; font-weight: bold; } } h1 { font-size: 23px; font-weight: 400; text-align: center; line-height: 1.3; margin: 0; padding: 30px 0 10px; } h2 { color: #fff; font-weight: 200; color: rgba(255, 255, 255, 0.8); text-align: center; margin-bottom: 30px; line-height: 1.3; } h3 { font-weight: 200; color: rgba(255, 255, 255, 0.8); text-align: center; margin-bottom: 30px; line-height: 1.3; font-size: 17px; } .logo-container { text-align: center; padding-top: 15px; #logo-text { display: block; } } .second-text { text-align: center; font-size: 1.2em; } &.landing { #gradient > .front-radial(@light-blue-color); } &.product { 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); } &.pricing { #gradient > .front-radial(lighten(@pink-color, 18%)); } &.privacy { background: #1b2128; background-image: -webkit-linear-gradient(287deg,#1b2128,#61758e); background-image: linear-gradient(163deg,#1b2128,#61758e); } &.managed { background: #c6274c; background-image: -webkit-linear-gradient(287deg,#c6274c,lighten(#c6274c, 10%)); background-image: linear-gradient(163deg,#c6274c,lighten(#c6274c, 10%)); a { color: #fff; font-weight: bold; } a:hover { color: #fff; } } &.contact { background-image: -webkit-linear-gradient(163deg,#5f995f 20%,#5cb85c 50%,#5cb85c 30%); //-webkit-linear-gradient(287deg,#270530 10%,#196d82 36%,#23B3B9 70%); background-image: linear-gradient(163deg,#5f995f 20%,#5cb85c 50%,#5cb85c 30%); //linear-gradient(163deg,#270530 10%,#196d82 36%,#23B3B9 70%); } } .privacy { #privacy-image { width: 100px; height: 100px; margin: 10px auto 0; } } .managed { #managed-image { width: 100px; height: 100px; margin: 10px auto 0; } } .chart-bg { background-image: url("http://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; z-index: 0; left: 0; @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { background-image: url("http://app-static.datareportive.com/images/background.png"); } } }