/*
Template Name: SmartMVP - Responsive Premium Startup Landing Page Template
Theme URL: http://themedept.com/demo/smartmvp/index.html
Description: SmartMVP - Responsive Premium Startup Landing Page Template
Author: ThemeDept
Author URL: http://themedept.com
Version: 1.2.0
Website: http://themedept.com
Tags: startup landing page, app landing page, html5 template, one page, startup, saas, mvp, landing page
*/
/* ------------------------------------------ */
/* TABLE OF CONTENTS
/* ------------------------------------------ */
/* 01 - General Style */
/* 02 - Typography */
/* 03 - Buttons & Icons */
/* 04 - Header & Navigation */
/* 05 - Login/Signup Modal */
/* 06 - Sections Settings */
/* 07 - Testimonials */
/* 08 - Features Tab */
/* 09 - Fast Reg, Newsletter & Signup Divider */
/* 10 - Charts & Showcase Section */
/* 11 - Pricing Tabs */
/* 12 - Team Section */
/* 13 - Mobile Download Section */
/* 14 - Footer */
/* ==========================================================================
01. GENERAL STYLE
========================================================================== */
/*------------------------------------------*/
/* Basic Settings
/*------------------------------------------*/
.navbar-brand.img-logo {
display: block;
margin-bottom: 50px;
width: 100%;
}
body {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
color: #727272;
font-size: 16px;
line-height: 28px;
font-weight: 400;
padding: 0;
background-color: #A70C2B;
}
a, .text-color {
color: #fff!important;
font-weight: bold!important;
text-decoration: underline!important;
}
a,a:hover,a:visited{
outline: 0!important;
}
.main-wrapper {
overflow: hidden;
}
section{
position: relative;
overflow: hidden;
}
#about2 .col-sm-4.intro-content > p {
margin-bottom: 30px;
}
.intro-content > h4 {
margin-bottom: 10px;
}
#about2 .wrapper-lg {
padding: 90px 0 0px;
}
/*------------------------------------------------------------------*/
/* Internet Explorer 10 in Windows 8 and Windows Phone 8 Bug fix
/*-----------------------------------------------------------------*/
@-webkit-viewport {
width: device-width;
}
@-moz-viewport {
width: device-width;
}
@-ms-viewport {
width: device-width;
}
@-o-viewport {
width: device-width;
}
@viewport {
width: device-width;
}
/*------------------------------------------*/
/* Link
/*------------------------------------------*/
a {
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
a:hover, a:focus {
color: #3e3e3e;
text-decoration: none;
}
/*------------------------------------------*/
/* Lists
/*------------------------------------------*/
ul {
padding-left: 0;
list-style: none;
}
/*------------------------------------------*/
/* Backgrounds
/*------------------------------------------*/
.light-bg{
background-color: #fafafa;
}
.dark-bg{
background-color: #323a45;
}
.white-bg{
background-color: #ffffff;
}
/*------------------------------------------*/
/* Overlay Effect
/*------------------------------------------*/
.overlay{
}
/* set filter as none for IE9+, because IE9+ support RGBa */
:root .overlay {
filter: none\0/IE9;
}
/*------------------------------------------*/
/* Form Settings
/*------------------------------------------*/
.form-group {
margin-bottom: 25px;
}
.control-label {
display: block;
font-size: 13px;
line-height: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0 0 7px 0;
color: #3e3e3e;
}
.form-control {
display: inline-block;
width: 100%;
height: 39px;
padding: 9px;
font-size: 13px;
line-height: 17px;
color: #3e3e3e;
background-color: transparent;
background-image: none;
border: 2px solid #cb6060;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transition: none;
-o-transition: none;
-moz-transition: none;
transition: none;
}
/*------------------------------------------*/
/* Modal Settings
/*------------------------------------------*/
.modal-content {
text-align: center;
}
/*------------------------------------------*/
/* Notifications
/*------------------------------------------*/
.signup-success,.signup-failed,.lm-success,.lm-failed,.sm-success,.sm-failed,.fast-failed,.fast-success,.subscription-success,.subscription-failed,.mc-success,.mc-failed{
display: none;
margin-top: 5px;
}
.lm-success,.sm-success{
color:#27ae60;
}
.signup-success,.signup-failed,.fast-success,.fast-failed,.subscription-success,.subscription-failed,.mc-success,.mc-failed {
color:#ffffff;
}
.lm-failed,.sm-failed{
color:#c0392b;
}
/*------------------------------------------*/
/* Blockquote
/*------------------------------------------*/
blockquote {
border: 0;
padding: 0 20px;
}
blockquote:before {
height: 0;
float: left;
position: relative;
top: 14px;
left: -30px;
content: "β";
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 50px;
color: #999;
}
blockquote img {
float: left;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
height: 75px;
width: 75px;
margin-right: 15px;
}
/*------------------------------------------*/
/* Wrappers & Boxes
/*------------------------------------------*/
.wrapper-lg{
padding: 120px 0;
}
.wrapper-md{
padding: 80px 0;
}
.wrapper-sm{
padding: 50px 0;
}
.wrapper-xs{
padding: 20px 0;
}
/* vertical align */
.vmiddle{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/*------------------------------------------*/
/* Preloader
/*------------------------------------------*/
.preloader{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
height: 100%;
width: 100%;
text-align: center;
overflow: hidden !important;
}
.loader-container{
position: absolute;
top: 50%;
left: 50%;
margin: -20px 0 0 -80px;
}
.signal {
display: inline-block;
border: 3px solid #fff;
border-radius: 30px;
height: 30px;
opacity: 0;
width: 30px;
margin-top: 10px;
-webkit-animation: pulsate 1s ease-out;
-moz-animation: pulsate 1s ease-out;;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
}
@-webkit-keyframes pulsate {
0% {
transform:scale(.1);
opacity: 0.0;
}
50% {
opacity: 1;
}
100% {
transform:scale(1.2);
opacity: 0;
}
}
@-moz-keyframes pulsate {
0% {
transform:scale(.1);
opacity: 0.0;
}
50% {
opacity: 1;
}
100% {
transform:scale(1.2);
opacity: 0;
}
}
/*------------------------------------------*/
/* New Venobox Close Icon
/*------------------------------------------*/
.vbox-close {
top: 5px;
right: 8px;
width: 60px;
height: 50px;
background: url(../images/venobox/close.gif) no-repeat #161617;
}
/*------------------------------------------*/
/* Text-Logo
/*------------------------------------------*/
.text-logo{
font-family: 'Raleway','Open Sans',Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 19px;
line-height: 21px;
color: #ffffff;
}
/* ==========================================================================
02. TYPOGRAPHY
========================================================================== */
h1, h2, h3, h4 {
font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0 0 20px;
color: #3e3e3e;
letter-spacing: -1px;
}
h1 {
font-size: 48px;
line-height: 52px;
font-weight: 300;
}
h2 {
font-size: 42px;
line-height: 46px;
font-weight: 300;
text-align: center;
}
h3 {
font-size: 33px;
line-height: 36px;
font-weight: 300;
}
h4 {
font-size: 23px;
line-height: 32px;
font-weight: 400;
color: #353535;
}
h5 {
font-family: "Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 13px;
line-height: 15px;
text-transform: uppercase;
letter-spacing: 1px;
color: #3e3e3e;
}
b, strong {
font-weight: 400;
}
p {
margin: 0;
}
.large{
font-size: 18px;
line-height: 25px;
margin-bottom: 50px;
font-weight: 400;
text-align: center;
}
.text-white {
color: #ffffff;
}
/* ==========================================================================
03. BUTTONS & ICONS
========================================================================== */
.btn {
font-family: "Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
font-size: 11px;
line-height: 15px;
text-transform: uppercase;
letter-spacing: 1px;
-o-transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
margin-right: 15px;
margin-bottom: 5px;
border-radius: 5px;
display: inline-block;
padding: 14px 28px 13px 28px;
border:2px solid;
}
.btn:focus {
outline: none;
}
.btn:hover {
text-decoration: none;
}
.btn>i {
font-size: 15px;
margin-right: 5px;
vertical-align: text-bottom;
}
.btn-box {
padding:20px 0;
}
/*------------------------------------------*/
/* Buttons Color
/*------------------------------------------*/
.btn-ghost {
background: transparent;
color: #ffffff;
border-color: #ffffff;
}
.btn-ghost:hover {
background: #ffffff;
color: #3e3e3e;
border-color: #ffffff;
}
.btn-white {
background: #ffffff;
color: #c0392b;
border-color: #ffffff;
}
.btn-white:hover {
background: #c0392b;
color: #3e3e3e;
border-color: #c0392b;
}
.btn-grey {
color: #3e3e3e;
background-color: transparent;
border-color: #7f8c8d;
}
.btn-grey:hover {
color: #3e3e3e;
border-color: #3e3e3e;
background-color: transparent;
}
/*------------------------------------------*/
/* Icons Style
/*------------------------------------------*/
.icon-lg, .icon-sm {
transition: all .2s ease;
-webkit-transition: all .2s ease;
-o-transition: all .2s ease;
-moz-transition: all .2s ease;
color: #3e3e3e;
}
.icon-lg {
font-size: 65px;
}
.icon-sm {
font-size: 40px;
}
/* ==========================================================================
04. HEADER & NAVIGATION
========================================================================== */
/*------------------------------------------*/
/* Header Background Parallax Settings
/*------------------------------------------*/
.header{
background:#A70C2B;
/*
background: url("../images/lightroom.jpg") no-repeat center top fixed;
-webkit-background-size: cover;
-moz-background-size:cover;
background-size: cover;
*/
}
.header .overlay {
height: 700px;
}
/*------------------------------------------*/
/* Navbar General Settings
/*------------------------------------------*/
.navbar{
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.navbar-fixed-top {
padding-top: 25px;
padding-bottom: 25px;
}
.navbar-fixed-top.is-scrolling{
background: #323a45;
background: rgba(50,58,69,0.95);
border: 0;
padding-top: 5px;
padding-bottom: 5px;
}
.navbar-right{
position: relative;
top: 5px;
float: left;
text-align: left;
}
/* Img-Logo Fixes */
.navbar-brand.img-logo{
padding:0;
}
/*------------------------------------------*/
/* Navbar Links Menu
/*------------------------------------------*/
.navbar-nav>li>a{
font-family: 'Raleway','Open Sans',Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 11px;
line-height: 15px;
color: #ffffff;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
}
.navbar-nav>li>a:hover, .navbar-nav>li>a:focus, .navbar-nav>.active>a, .navbar-nav>.active>a:hover, .navbar-nav>.active>a:focus{
color: #ffffff;
background-color: transparent;
}
/*------------------------------------------*/
/* Navbar Mobile Menu
/*------------------------------------------*/
.navbar-toggle, .navbar-toggle:hover, .navbar-toggle:focus {
background-color: transparent;
}
.navbar-toggle {
color: #ffffff;
padding: 0;
margin-top: 13px;
margin-bottom: 0;
font-size:26px;
}
.navbar-collapse {
box-shadow:none;
border:0;
}
/*------------------------------------------*/
/* Navbar Buttons
/*------------------------------------------*/
.navbar-nav>li>a.btn-nav {
margin: 6px 0 10px 15px;
padding: 7px;
}
.navbar-nav>li>a.btn-nav:hover, .navbar-nav>li>a.btn-nav:focus {
background: #ffffff;
color: #3e3e3e;
border-color: #ffffff;
}
/*------------------------------------------*/
/* Hero-Section
/*------------------------------------------*/
.hero-section .btn-color:hover{
border-color: #ffffff;
}
.hero-section p{
font-size: 21px;
line-height: 27px;
letter-spacing: -1px;
margin-bottom: 35px;
}
.hero-section .btn-box{
padding: 0;
}
.hero-section .btn{
margin-bottom: 0;
}
/*------------------------------------------*/
/* Header Solid-Background
/*------------------------------------------*/
.solid-bg .overlay {
background: none;
}
.solid-bg .btn-white:hover{
border-color:#ffffff;
color:#ffffff;
}
/*------------------------------------------*/
/* Header App
/*------------------------------------------*/
.hero-app .hero-section{
padding-top: 20%;
}
/*------------------------------------------*/
/* Header Type
/*------------------------------------------*/
.type h1{
line-height: 59px;
}
/*------------------------------------------*/
/* Header Video Background
/*------------------------------------------*/
.header.video-bg{
background: transparent;
}
/*------------------------------------------*/
/* Header Video Background
/*------------------------------------------*/
.header.youtube-bg .overlay {
height: 650px;
}
/*------------------------------------------*/
/* Header Slider
/*------------------------------------------*/
.header.slider{
background: none;
}
.header.slider .overlay{
height: 100%;
}
.slider-text{
display: block;
}
/*------------------------------------------*/
/* Header Dashboard
/*------------------------------------------*/
.header.dashboard .overlay{
overflow:hidden;
}
.dashboard .hero-section{
padding-top: 25%;
}
.image-dashboard {
overflow: hidden;
padding-top: 30px;
}
.image-dashboard img {
max-width: 85%;
}
/* ==========================================================================
05. LOGIN/SIGNUP MODAL
========================================================================== */
.login .modal-dialog{
width: 400px;
margin-top: 105px;
}
.login .modal-content{
background-color: #fcfcfc;
border-radius:6px;
}
.login .modal-header {
padding: 15px 15px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.login .modal-header .close{
color:#3e3e3e;
opacity:0.7;
}
.login .modal-header .close:hover{
opacity:1;
}
.login .modal-header .close i{
font-weight:bold;
}
.login .modal-header .close:focus{
outline:none;
}
.login .modal-header .modal-title{
font-weight: 400;
font-size: 25px;
line-height: 29px;
margin-top: 10px;
margin-left: 25px;
}
.login .modal-header .modal-subtitle{
font-weight: 300;
font-size: 14px;
line-height: 17px;
color: #3e3e3e;
margin-bottom: 0;
margin-top: 5px;
}
.login .form-control{
margin: 5px auto;
}
.login .btn{
width: 100%;
margin: 5px 0 0;
}
.login .btn-color:hover{
color: #fff;
background-color: #3e3e3e;
border-color: #3e3e3e;
}
.login .modal-footer{
border-top: 0;
margin-top: 0;
padding: 10px 20px 20px;
}
.login .forgot{
color: #3e3e3e;
margin-left: 0;
overflow: hidden;
text-align: center;
width: 100%;
font-size: 13px;
font-weight: 400;
text-transform: uppercase;
}
.modal-body {
padding: 20px 50px;
}
/* ==========================================================================
06. SECTIONS SECTIONS
========================================================================== */
/*------------------------------------------*/
/* About - Intro Features
/*------------------------------------------*/
.intro-features {
text-align: center;
}
.intro-features .icon-lg{
margin-bottom: 20px;
}
/*------------------------------------------*/
/* Image with Action
/*------------------------------------------*/
.img-with-action .btn-color:hover{
background: transparent;
}
.img-with-action .btn-box{
padding-bottom: 0;
}
.img-col-bg{
position: absolute;
height: 100%;
padding: 0;
top: 0;
}
/* light img overlay*/
.img-col-bg:before{
opacity: 0.2;
position: absolute;
content: ' ';
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #b0babf;
}
.img-right {
right: 0;
background: url(../images/img-right.jpg) 50% 0 no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
/* ==========================================================================
07. TESTIMONIALS
========================================================================== */
/*------------------------------------------*/
/* Testimonial-Press Section
/*------------------------------------------*/
.testimonial-press {
height: 600px;
}
.testimonial-name {
padding-top: 25px;
font-size: 13px;
line-height: 16px;
}
.testimonial-name span {
display: block;
font-weight: 600;
color: #333333;
font-size: 14px;
}
.testimonial-press .etabs img {
margin-top: 30px;
max-width: 122px;
opacity: 0.3;
}
.testimonial-press .etabs .active img {
opacity: 1;
}
.navbar-nav > li > a {
padding-left: 10px!important;
padding-right: 10px!important;
}
/* ==========================================================================
08. FEATURES TAB
========================================================================== */
.tab-features .features-title{
padding-top: 60px;
text-align: center;
}
.tab-features .large{
}
#features .icon {
color: #A70C2B;
margin-top: -3px;
}
#features .icon-sm{font-size:0px;}
.tab-features .panel-container{
background-color: #ffffff;
}
.tab-features .etabs{
display: table;
text-align: center;
margin: 0 auto;
}
.tab-features .etabs .tab{
display: table-cell;
padding: 0 70px 22px 0;
opacity: 0.5;
}
.tab-features .etabs .tab:last-child{
padding-right: 0;
}
.tab-features .etabs .tab.active{
opacity: 1;
}
#features .col-md-12 p {
margin-bottom: 0px;
}
.tab-features .etabs .tab.active:before{
content: '';
position: relative;
bottom: -111px;
margin-left: 48px;
vertical-align: middle;
content: " ";
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 12px solid #f9f9fa;
border-style: none double solid;
width: 0;
height: 0;
display: block;
}
.etabs .icon-sm {
display: inline-block;
width:55px;
height:auto;
margin-right: 10px;
vertical-align: sub;
color: #ffffff;
}
.etabs .icon-sm:hover {
color: #ffffff;
}
.tab-features .etabs .active h5, .tab-features .etabs .active i {
color: #ffffff;
}
.tab-features .tab-content {
overflow:hidden !important;
height: 700px;
padding-top: 100px;
}
.tab-content h4 {
font-size: 24px;
line-height: 30px;
}
.tab-content p{
margin-bottom: 20px;
}
.tab-icon {
margin-bottom: 20px;
}
.tab-icon .icon-sm{
width: 60px;
margin-bottom: 10px;
display: inline-block;
}
.tab-icon .large{
margin-bottom: 10px;
display: inline-block;
color: #3e3e3e;
font-size: 20px;
position: relative;
bottom: 10px;
}
.img-device{
width: 100%;
}
/*single feature-tab fixes*/
/* 2col text left with buttons, image right */
#tab-feature-1 .btn-box{
padding: 0;
}
/* ==================================================================================
09. NEWSLETTER, FAST-REGISTRATION HEADER & SIGNUP DIVIDER SECTIONS
=================================================================================== */
/* Newsletter */
.newsletter .table{
display: table;
width: 100%;
margin: 0;
}
.newsletter .table-row{
display: table-row;
}
.newsletter .follow{
width: 120px;
}
.newsletter .getnewsletter{
width: 190px;
}
.newsletter .table-cell {
display: table-cell;
vertical-align: middle;
}
.newsletter .table-title {
font-size: 14px;
line-height: 16px;
color: #ffffff;
opacity: 0.8;
}
.newsletter .social-list{
display: block;
margin: 0 0 0 -10px;
list-style: none;
}
.newsletter .social-list>li {
float: left;
margin: 0 7px;
}
.newsletter .social-list>li a{
font-size: 50px;
color: #fff;
text-align: center;
}
.newsletter .social-list>li a:hover{
color: #3e3e3e;
}
.newsletter .input-group .form-control{
background: transparent;
border-color: #ffffff;
font-weight: 400;
font-size: 14px;
height: 50px;
color: #fff;
}
.newsletter .form-control:focus{
box-shadow: none;
}
.newsletter .form-control::-moz-placeholder {
color: #ffffff;
}
.newsletter .form-control:-ms-input-placeholder {
color: #ffffff;
}
.newsletter .form-control::-webkit-input-placeholder {
color: #ffffff;
}
.newsletter .btn{
padding: 16px 28px 15px 28px;
margin-right:0;
}
.newsletter .btn:hover{
background: #333333;
color: #fff;
border-color: #333333;
}
.newsletter .subscription-success, .newsletter .subscription-failed {
font-weight: 600;
color: #ffffff;
}
.newsletter .subscription-success i, .newsletter .subscription-failed i{
margin-right: 5px;
}
/* Signup Divider */
.signup-divider{
text-align: center;
}
.signup-divider h2{
font-weight: 400;
}
.signup-handwritten {
font-family: 'Handlee', cursive;
position: absolute;
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
-ms-transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
transform: rotate(-7deg);
right: 0;
bottom: 30px;
font-size: 21px;
}
.signup-handwritten:before {
content: "";
position: absolute;
left: -32px;
top: 16px;
background-repeat: no-repeat;
background-image: url(../images/arrow-hand.png);
background-size: 31px 55px;
background-position: center center;
width: 31px;
height: 54px;
}
.signup-divider canvas{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:-1;
}
.signup-divider .form-group,.fast-reg .form-group{
width:25%;
display: inline-block;
margin-right: 15px;
margin-bottom: 0;
}
.signup-divider .form-control,.fast-reg .form-control{
background: transparent;
border-color: #ffffff;
font-weight: 400;
font-size: 14px;
height: 50px;
color:#fff;
}
.signup-divider .btn{
margin-bottom: 0;
margin-right: 0;
font-size: 15px;
padding: 16px 28px 15px;
}
.fast-reg .btn{
margin-bottom: 0;
font-size: 13px;
padding: 16px 28px 15px;
}
.signup-divider .btn:hover,.fast-reg .btn:hover{
border-color: #ffffff;
}
.signup-divider .btn i,.fast-reg .btn i{
font-size: 16px;
margin-right: 0
}
.signup-divider.dark-bg {
z-index: 0;
}
.signup-divider .form-control::-moz-placeholder {
color: #fff;
}
.signup-divider .form-control:-ms-input-placeholder {
color: #fff;
}
.signup-divider .form-control::-webkit-input-placeholder {
color: #fff;
}
.signup-divider .form-container{
background-color: #3e3e3e;
background-color: rgba(62,62,62,0.8);
padding: 10px 0;
margin: 0 auto;
width: 70%;
border-radius: 6px;
}
/* Fast-reg Fixes */
.fast-reg .hero-section{
text-align: center;
}
.fast-reg .form-control{
background: #ffffff;
border-color: #ffffff;
font-weight: 400;
font-size: 14px;
height: 50px;
color: #333;
}
/* ==========================================================================
10. CHARTS SECTION
========================================================================== */
.charts p{
margin-bottom: 20px;
}
.charts p.large{
margin-bottom: 70px;
}
.charts h4{
font-size: 24px;
line-height: 30px;
}
.doughnut-box{
margin-bottom: 206px;
}
.chart-box{
margin-bottom: 80px;
}
#canvas-holder {
z-index:10;
position:absolute;
left:0;
}
#canvas-holder .chart-text{
text-align: center;
position: absolute;
left: 143px;
top: 163px;
}
#canvas2-holder {
position:absolute;
left:370px;
top:50px;
z-index:0;
}
#canvas2-holder .chart2-text{
text-align: center;
position: absolute;
left: 116px;
top: 111px;
}
.chart-text, .chart2-text{
font-family: "Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 21px;
line-height: 24px;
text-transform: uppercase;
letter-spacing: 1px;
color: #333333;
}
.chart-text span, .chart2-text span{
display:block;
font-weight: 600;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: none;
letter-spacing: normal;
}
.line-canvas{
width:100%;
}
/*------------------------------------------*/
/* Showcase Item with Video Button
/*------------------------------------------*/
.showcase .video-player{
position: absolute;
top: 37%;
left: 54%;
color: #ffffff;
font-size: 55px;
}
.showcase .video-player:hover{
opacity: 0.6;
}
/* ==========================================================================
11. PRICING TABS
========================================================================== */
.pricing-tab {
padding: 50px 30px 30px;
border-radius: 7px;
color:#333333;
text-align: center;
position: relative;
}
.pricing-tab p.price{
font-size: 56px;
letter-spacing: -2px;
margin-bottom: 30px;
font-weight: 300;
}
.pricing-tab p.price span {
font-size: 22px;
}
.pricing-tab h4 {
margin: 0 60px 30px;
padding-bottom: 5px;
}
.pricing-tab .btn{
padding:11px 35px;
font-size:13px;
}
.pricing-tab .btn:hover {
background: #333333;
color: #fff;
border-color: #333333;
}
.pricing-tab .ribbon {
position: absolute;
top: -10px;
right: -10px;
width: 115px;
height: 115px;
overflow: hidden;
}
.pricing-tab .ribbon .popular{
position: relative;
left: -8px;
top: 18px;
width: 158px;
padding: 10px 10px;
color: #fff;
-webkit-transform: rotate(45deg) translate3d(0, 0, 0);
-moz-transform: rotate(45deg) translate3d(0, 0, 0);
-ms-transform: rotate(45deg) translate3d(0, 0, 0);
-o-transform: rotate(45deg) translate3d(0, 0, 0);
transform: rotate(45deg) translate3d(0, 0, 0);
}
.pricing-tab .ribbon .popular:after, .pricing-tab .ribbon .popular:before{
content: '';
position: absolute;
bottom: -5px;
border-top: 5px solid #3e3e3e;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.pricing-tab .ribbon .popular:before{
left: 0;
}
.pricing-tab .ribbon .popular:after{
right: 0;
}
.pricing-features{
margin-bottom: 30px;
}
.pricing-features li{
padding: 3px 0;
font-size: 16px;
font-weight: 400;
}
.pricing-features li span{
display:block;
font-weight: 300;
}
.pricing-more {
margin-top:30px;
padding-left: 15px;
}
.pricing-more strong {
color: #333333;
}
.pricing-more i{
vertical-align: baseline;
}
/* ==========================================================================
12. TEAM SECTION
========================================================================== */
.team h4{
margin-top: 20px;
}
.team-img{
position: relative;
overflow: hidden;
perspective: 300px;
-webkit-perspective: 300px;
-ms-perspective: 300px;
-o-perspective: 300px;
-webkit-border-radius: 5%;
-moz-border-radius: 5%;
border-radius: 5%;
opacity:0.85;
}
.team-img .img-overlay{
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
opacity: 0;
background: rgba(27,27,27,.7);
-webkit-transition: all .3s;
-o-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.team-img:hover .img-overlay{
opacity: 1;
}
.team-img:hover img{
-ms-transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-o-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
transform: scale(1.5,1.5);
-webkit-transition: all .3s;
-o-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.team-img .img-icons {
width: 100%;
height: 100%;
text-align: center;
}
.team-img .img-icons span{
display: inline-block;
position: relative;
top: 33%;
margin: 0 3%;
}
.team-img .img-icons .icon-white a{
color:#ffffff;
}
.team-img .img-icons span i{
text-align: center;
font-size: 60px;
width: 60px;
height: 60px;
padding: 5%;
}
/* ==========================================================================
13. MOBILE DOWNLOAD SECTION
========================================================================== */
.mobile-download h3{
margin-top: 135px;
}
.mobile-text {
font-size: 18px;
line-height: 25px;
margin-bottom: 2h0px;
font-weight: 400;
}
.mobile-download .btn-color {
margin-top: 20px;
}
.mobile-download .btn-color:hover {
background-color: #3e3e3e;
border-color: #3e3e3e;
color: #ffffff;
}
.mobile-download .shot-container {
background: url("../images/app-screenshots/smartphone.png") no-repeat scroll center top rgba(0, 0, 0, 0);
margin: 0 auto 0;
height: 595px;
position: relative;
}
#owl-carousel-shots-phone {
height: 600px;
width: 244px;
margin: 0 auto;
}
#owl-carousel-shots-phone .owl-wrapper-outer {
height: 600px;
width: 240px;
margin-left: 4px
}
#owl-carousel-shots-phone .owl-item {
margin-top: 89px;
opacity: 0.2;
padding: 0;
}
#owl-carousel-shots-phone .owl-item.active {
opacity: 1;
}
#owl-carousel-shots-phone .img-shots-container img {
margin: 0 auto;
}
#owl-carousel-shots-phone .owl-controls .owl-buttons div {
background: none;
color: white;
position: absolute;
font-size: 25px;
}
#owl-carousel-shots-phone .owl-controls .owl-buttons .owl-prev {
left: -100px;
top: 200px;
}
#owl-carousel-shots-phone .owl-controls .owl-buttons .owl-next {
right: -100px;
top: 200px;
}
.mobile-download .right-features {
margin-top: 120px;
}
.mobile-download .right-features h4{
margin-bottom: 5px;
margin-top: 20px;
}
.mobile-download .description{
margin-bottom: 35px;
}
/* ==========================================================================
14. FOOTER
========================================================================== */
.footer, .footer a{
color: #ced3d8;
}
.footer h5{
font-size: 15px;
line-height: 23px;
}
.footer-hero, .footer-cta{
font-size: 19px;
line-height: 22px;
margin-top: 20px;
font-weight: 400;
}
.footer-hero strong{
font-weight: 600;
}
.footer-cta .btn{
padding: 10px;
margin-left: 5px;
color: #fff;
}
.footer-cta .btn:hover{
border-color: #ffffff;
}
.contact-item {
margin: 11px 0 16px;
}
.contact-icon {
margin-right: 10px;
font-size: 22px;
margin-bottom: 10px;
height: 20px;
width: 20px;
display: inline-block;
vertical-align: top;
}
.contact-content {
display: inline-block;
line-height: 21px;
}
.contact-content a {
color: #c0392b;
font-weight: 600;
}
.footer-nav{
margin-top: 100px;
font-family: 'Raleway','Open Sans',Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 13px;
line-height: 15px;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
text-align: center;
}
.footer-nav li{
display: inline-block;
margin-left: 15px;
}
.footer-nav a {
color: #fff;
}
.footer-copy{
margin-top:15px;
font-size:13px;
line-height: 16px;
text-align: center;
}
/* Twitter Feed by Tweetie */
.tweet {
font-size: 16px;
line-height: 21px;
}
.tweet ul{
list-style-type: circle;
}
.tweet li {
margin-top: 15px;
}
.tweet li span{
font-style: italic;
font-size: 15px;
}