* { padding: 0; margin: 0; }

body
{
    font-family: ProximaNova-Regular,Arial;
    font-size: 14px;
    color: #000000;
	line-height: 150%;
}

a
{
	position: relative;
    -moz-outline-style: none;
	color: #007842;
	outline: none;
}

button
{
    -moz-outline-style: none;
	outline: none;
}

a:active
{
  outline: none;
}


a:hover
{
    text-decoration: underline;
	color: #007842;
}

a img
{
    border: none;
}

fieldset
{
	border: none;
}


/* ###################################################################################### */

.container
{
    position: relative;
    width: 960px;
    margin: 0 auto;
}

/* ###################################################################################### */

.header {

    position: relative;
    float: left;
    width: 960px;
    border-bottom: 1px solid #CCCCCC;
    padding-bottom: 30px;

}

.header .brand {

    float: left;

}

.header h1 {

    float: right;
    line-height: 30px;
    font-size: 30px;
    padding-top: 40px;

}



/* ###################################################################################### */

#intro
{
    position: relative;
    width: 100%;
    height: 500px;
    margin: 0 auto;
    background: url("../img/office.html") 50% top no-repeat #333333;
}


#intro h1
{
    font-family: ProximaNova-Bold;
    font-weight: normal;
    width: 100%;
    text-align: center;
    font-size: 44px;
    color: #7b7b7b;
    margin: 50px 0px 20px 0px;
    color: #ffffff;
    text-shadow: 0 1px 10px #000000;
}

#intro h1.lt
{
    margin: 40px 0px 20px 0px;
}

#intro h2
{
    width: 100%;
    text-align: center;
    font-size: 22px;
    color: #7b7b7b;
    font-family: ProximaNova-Bold;
    font-weight: normal;
    color: #ffffff;
    text-shadow: 0 1px 10px #000000;
    line-height: 130%;
}

#intro img.screenshot1
{
    position: absolute;
    z-index: 1000;
    top: 170px;
    left: -20px;
}

#intro img.screenshot2
{
    position: absolute;
    z-index: 999;
    top: 190px;
    left: 630px;
}


/* ###################################################################################### */

#content h2
{
    width: 100%;
    text-align: center;
    font-size: 30px;
    color: #7b7b7b;
    margin: 40px 0px 40px 0px;
    
    font-weight: normal;
}

/* ###################################################################################### */

#content div.demo
{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #C0C0C0;
    border-radius: 5px 5px 5px 5px;
    float: left;
    margin-bottom: 30px;
    position: relative;
    width: 900px;
    padding: 29px;
    text-align: center;
}

#content div.demo a.btn
{
    width: 280px;
    padding: 0px 0px;
    margin-bottom: 15px;
    font-family: ProximaNova-Bold;
}

#content div.demo span
{
    display: block;
    clear: left;
    color: #666666;
    font-weight: bold;
    font-size: 16px;
}

/* ###################################################################################### */

.btn-demo
{

}

/* ###################################################################################### */

#content div.container
{
    padding: 90px 0px 0px 0px;
}

#content div.box
{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #C0C0C0;
    border-radius: 5px 5px 5px 5px;
    float: left;
    margin-bottom: 30px;
    position: relative;
    width: 958px;
}

#content div.box div.text
{
    position: relative;
    width: 420px;
    float: left;
    margin-left: 30px;
    margin-top: 100px;
    color: #333333;
    font-size: 16px;
    line-height: 25px;
}

#content div.box div.text p
{
    padding-bottom: 10px;
}

#content div.box div.text h3
{
    font-size: 26px;
    
    font-weight: normal;
    margin-bottom: 15px;
}

#content div.box div.text ul li
{
    padding-bottom: 10px;
}

#content div.box img.feature
{
    position: relative;
    float: right;
    margin-top: 10px;
    margin-bottom: 10px;
}



/* ###################################################################################### */

#content div.box div.title
{
    position: relative;
    float: left;
    width: 900px;
    border-bottom: 1px solid #cccccc;
    padding: 10px 30px;
    text-align: center;
}

#content div.box div.title h3
{
    font-size: 26px;
    font-family: ProximaNova-Bold;    
    font-weight: normal;
    color: #666666;
}

/* ###################################################################################### */

#content div.box div.clients
{
    position: relative;
    float: left;
    padding: 30px 30px;
    width: 900px;
}

#content div.box div.clients ul
{
    margin-left: 0px;
    list-style: none;
}

#content div.box div.clients ul li
{
    position: relative;
    float: left;
    display: inline;
    margin-right: 16px;
}

#content div.box div.clients ul li.last
{
    margin-right: 0px;
}

#content div.box div.clients ul li a img
{
    position: relative;
    float: left;
}


/* ###################################################################################### */

#content div.box div.price
{
    position: relative;
    float: left;
    padding: 30px 30px;
    width: 900px;
}

#content div.box div.price table
{
    width: 900px;
}

#content div.box div.price table td
{
    width: 180px;
    padding: 10px 0px;
    text-align: center;
    border-bottom: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
}

#content div.box div.price table th
{
    text-align: right;
    width: 160px;
    border-bottom: 1px solid #cccccc;
    padding-right: 20px;
    color: #666666;
}


#content div.box div.price table td.plan
{
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

#content div.box div.price table td.price
{
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    padding: 20px 0px;
    color: #007842;
}

#content div.box div.price table td.price span
{
    font-size: 13px;
}

#content div.box div.price table td.volume
{
    font-weight: bold;
}


#content div.box div.price table td span.no
{
    font-weight: bold;
    color: #ce0000;
}

#content div.box div.price table td span.yes
{
    font-weight: bold;
    color: #007842;
}

#content div.box div.price table tr.section td, #content div.box div.price table tr.section th
{
    border-bottom: 3px solid #cccccc;
}

#content div.box div.price table tr.bottom td, #content div.box div.price table tr.bottom th
{
    border-bottom: none;
}

#content div.box div.price table td.side
{
    border-left: none;
}

/* ###################################################################################### */

#content div.box div.pricing
{
    position: relative;
    float: left;
    padding: 60px 150px;
    width: 660px;
}

#content div.box div.pricing div.plan
{
    width: 660px;
    padding: 30px 0px;
    background: #cccccc;
    border-radius: 5px;
}

#content div.box div.pricing div.plan h3
{
    width: 100%;
    text-align: center;
    
    font-weight: normal;
    font-size: 40px;
    margin: 0px 0px 15px 0px;
}

#content div.box div.pricing div.plan h3 span.month
{
    font-size: 26px;
}

#content div.box div.pricing div.plan h3 span.dollar
{
    font-size: 30px;
    padding-right: 3px;
}

#content div.box div.pricing div.plan h4
{
    width: 100%;
    text-align: center;
    
    font-weight: normal;
    font-size: 20px;
    line-height: 26px;
    margin: 0px 0px 50px 0px;
}

#content div.box div.pricing div.plan h5
{
    width: 100%;
    text-align: center;
    
    font-weight: normal;
    font-size: 20px;
    line-height: 26px;
    margin: 0px 0px;
}

#content div.box div.pricing div.free
{
    position: relative;
    float: left;
    background: url("../img/free.plan.bg.html") #a1ec6f;
}

#content div.box div.pricing div.paid
{
    position: relative;
    float: right;
    background: url("../img/paid.plan.bg.html") #d6d6d6;
}

#content div.box div.pricing div.paid h3
{
    margin-bottom: 10px;
}

#content div.box div.pricing div.free a.btn
{
    
    font-weight: normal;
    font-size: 20px;
    outline: none;
    padding: 0px;
    width: 200px;
    margin-left: 230px;
    height: 50px;
    line-height: 50px;
}

/* ###################################################################################### */

#content div.contact
{
    position: relative;
    float: left;
    width: 960px;
    text-align: center;
}


#content div.contact h6
{
    font-family: ProximaNova-Bold;
    font-weight: normal;
    font-size: 20px;
}

#content div.contact a
{
    font-weight: bold;
    font-size: 16px;
}



/* ###################################################################################### */

#content div.box div.signup
{
    position: relative;
    float: left;
    margin: 30px 0px 0px 30px;
}

#content div.box div.signup fieldset
{
    margin-bottom: 10px;
}

#content div.box div.signup fieldset input
{
    margin-bottom: 0px;
}

/* ###################################################################################### */

#content div.features
{
    position: relative;
    float: left;
    width: 900px;
    padding: 29px;
}

#content div.features ul
{
    list-style: none;
    margin: 0px;
}

#content div.features ul li
{
    position: relative;
    float: left;
    display: inline;
    margin: 0px 30px 20px 0px;
    width: 280px;
    font-size: 14px;
    line-height: 150%;
}

#content div.features ul li.last
{
    margin-right: 0px;
}

#content div.features ul li img
{
    position: relative;
    float: left;
    display: inline;
    margin-right: 20px;
}

#content div.features ul li h3
{
    
    font-weight: normal;
    font-size: 20px;
    margin: 10px 0px 7px 0px;
    line-height: normal;
    font-family: ProximaNova-Bold;
}

/* ###################################################################################### */

#content div.price_calculator
{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #C0C0C0;
    border-radius: 5px 5px 5px 5px;
    float: left;
    margin-bottom: 30px;
    position: relative;
    width: 958px;
}

#content div.price_calculator div.title
{
    position: relative;
    float: left;
    width: 900px;
    border-bottom: 1px solid #C0C0C0;
    padding: 29px 29px;
    margin-bottom: 39px;
}

#content div.price_calculator div.title h3
{
    position: relative;
    float: left;
    
    font-weight: normal;
    font-size: 26px;
    line-height: 61px;
    margin: 0px;
    width: auto;
}

/* ###################################################################################### */

#content div.price_calculator table
{
    position: relative;
    float: left;
    width: 660px;
    margin-left: 150px;
    margin-bottom: 39px;
    border: 1px solid #CCCCCC;
    border-collapse: separate;
    border-radius: 5px;
}

#content div.price_calculator table th
{
    text-align: left;
    width: 330px;
    padding: 15px;
    font-size: 15px;
    border-bottom: 1px solid #D1D1D1;
    color: #666666;
}

#content div.price_calculator table td
{
    padding: 15px;
    font-size: 15px;
    border-bottom: 1px solid #D1D1D1;
}

#content div.price_calculator table td.plan_price
{
    width: 330px;
    text-align: right;
}

#content div.price_calculator table td.price
{
    width: 210px;
    text-align: right;
    font-weight: bold;
}

#content div.price_calculator table td.emails
{
    width: 210px;
    text-align: left;
}

#content div.price_calculator table td.plan
{
    width: 210px;
    text-align: left;
}

#content div.price_calculator table td.total
{
    width: 420px;
    text-align: left;
    font-weight: bold;
    color: #007842;
}

#content div.price_calculator table td.sum
{
    width: 210px;
    text-align: right;
    font-weight: bold;
    font-size: 20px;
    color: #007842;
}

#content div.price_calculator table th span.free
{
    font-size: 20px;
    color: #007842;
}

#content div.price_calculator table th span.price
{
    font-size: 20px;
    color: #000000;
}

#content div.price_calculator table tr:last-child td, #content div.price_calculator table tr:last-child th
{
    border-bottom: none;
}

/* ###################################################################################### */

#content div.price_calculator a.btn
{
    position: relative;
    float: left;
    
    font-weight: normal;
    font-size: 20px;
    outline: none;
    padding: 0px;
    width: 200px;
    margin-left: 379px;
    height: 50px;
    line-height: 50px;
    margin-bottom: 39px;
}

/* ###################################################################################### */

#content div.price_calculator table.zebra tbody tr:nth-child(even) {
    background: #f5f5f5;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}

/* ###################################################################################### */

#content div.price_calculator div.title fieldset
{
    position: relative;
    float: right;
    width: 300px;
}

#content div.price_calculator div.title fieldset label
{
    position: relative;
    float: left;
    margin: 0px;
    width: 100%;
    font-size: 13px;
    font-weight: bold;
    color: #666666;
    padding-bottom: 5px;
    text-align: right;
}

#content div.price_calculator div.title fieldset input
{
    position: relative;
    float: right;
    margin: 0px;
    font-size: 16px;
    color: #000000;
    width: 100%;
    padding: 7px 10px;
    width: 246px;
    text-align: right;
    font-weight: bold;
}

#content div.price_calculator div.title fieldset input:focus
{
    border-color: #00A467;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px #00A467;
    outline: 0 none;
}

/* ###################################################################################### */

#content div.box div.signup input:focus
{
    border-color: #00a467;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #00a467;
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #00a467;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #00a467;
    outline: 0;
  /* IE6-9 */
}

/* ###################################################################################### */

.btn-demo,
.btn-demo:hover
{
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    color: #ffffff;
    
    font-size: 22px;
}

.btn-demo
{
    padding: 0px 30px;
    line-height: 48px;
    outline:none;
	background-color: #77CC46;
	background-image: -moz-linear-gradient(top, #92EC5C, #65BF31);
	background-image: -ms-linear-gradient(top, #92EC5C, #65BF31);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#92EC5C), to(#65BF31));
	background-image: -webkit-linear-gradient(top, #92EC5C, #65BF31);
	background-image: -o-linear-gradient(top, #92EC5C, #65BF31);
	background-image: linear-gradient(top, #92EC5C, #65BF31);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#92EC5C', endColorstr='#65BF31', GradientType=0);
	border-color: #65BF31 #65BF31 #7DDB46;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

.btn-demo:hover,
.btn-demo:active,
.btn-demo.active,
.btn-demo.disabled,
.btn-demo[disabled]
{
	background-color: #65BF31;
}

.btn-demo:focus
{
    outline-color: transparent;
    outline-style: none;
}

/* ###################################################################################### */

.btn-signup,
.btn-signup:hover {
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
    color: #ffffff;
    font-family: ProximaNova-Bold;    
    font-size: 18px;
}
.btn-signup {
    padding: 0px 15px;
    line-height: 28px;
    margin-top: 10px;
    margin-left: 10px;
    outline:none;
	background-color: #77CC46;
	background-image: -moz-linear-gradient(top, #92EC5C, #65BF31);
	background-image: -ms-linear-gradient(top, #92EC5C, #65BF31);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#92EC5C), to(#65BF31));
	background-image: -webkit-linear-gradient(top, #92EC5C, #65BF31);
	background-image: -o-linear-gradient(top, #92EC5C, #65BF31);
	background-image: linear-gradient(top, #92EC5C, #65BF31);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#92EC5C', endColorstr='#65BF31', GradientType=0);
	border-color: #65BF31 #65BF31 #7DDB46;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-signup:hover,
.btn-signup:active,
.btn-signup.active,
.btn-signup.disabled,
.btn-signup[disabled] {
	background-color: #65BF31;
}

.btn-signup:focus {
    outline-color: transparent;
    outline-style: none;
}

/* ###################################################################################### */

.btn-login,
.btn-login:hover {
    text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
    color: #666666;
    font-family: ProximaNova-Bold;    
    font-size: 18px;
}
.btn-login {
    padding: 0px 15px;
    line-height: 28px;
    margin-top: 10px;
    margin-left: 10px;
	background-color: #BABABA;
    outline:none;
	background-image: -moz-linear-gradient(top, #FFFFFF, #EBEBEB);
	background-image: -ms-linear-gradient(top, #FFFFFF, #EBEBEB);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFFFFF), to(#EBEBEB));
	background-image: -webkit-linear-gradient(top, #FFFFFF, #EBEBEB);
	background-image: -o-linear-gradient(top, #FFFFFF, #EBEBEB);
	background-image: linear-gradient(top, #FFFFFF, #EBEBEB);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EBEBEB', GradientType=0);
	border-color: #EBEBEB #EBEBEB #EDEDED;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-login:hover,
.btn-login:active,
.btn-login.active,
.btn-login.disabled,
.btn-login[disabled] {
	background-color: #EBEBEB;
}

.btn-login:focus {
    outline-color: transparent;
    outline-style: none;
}

form {
    margin: 0;
    padding: 0;
}

body .modal {
    width: 670px;
    margin-left: -375px;
}

/* @group Footer */

.footer {
	background: #000;
	color: #fff;
}

    .footer .container {
    
        width: 960px;
        padding-top: 20px;
        padding-bottom: 20px;

    }

    .footer div.copyright {
        color: #ffffff;;
        font-size: 13px;
        float: left;
        text-align: center;
    }

    .footer ul {
        float: right;
    }

    .footer li {
        float: left;
    }

        .footer li a {
            color: #333333;
            font-size: 13px;
            margin-left: 20px;
        }

/* @end */

#documentation {
    margin-top: 55px;
}

/* ###################################################################################### */

#documentation div.title
{
    position: relative;
    float: left;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #C0C0C0;
    border-radius: 5px 5px 0px 0px;
    width: 900px;
    padding: 19px 29px;
}

#documentation div.title h2
{
    margin: 0px;
    font-size: 30px;
    
    font-weight: normal;
}

/* ###################################################################################### */

#documentation div.content
{
    position: relative;
    float: left;
    width: 900px;
    padding: 30px;
    margin-bottom: 30px;
}

#documentation div.content div.sidebar
{
    position: relative;
    float: left;
    width: 239px;
    border-right: 1px solid #C0C0C0;
    margin-right: 60px
}

#documentation div.content div.text
{
    position: relative;
    float: left;
    width: 600px;
}

/* ###################################################################################### */

#documentation div.content h1,
#documentation div.content h2,
#documentation div.content h3,
#documentation div.content h4,
#documentation div.content h5,
#documentation div.content h6,
.text-page h1,
.text-page h2,
.text-page h3,
.text-page h4,
.text-page h5,
.text-page h6
{
    
    font-weight: normal;
    line-height: normal;
    margin: 0px;
    padding: 10px 0px 10px 0px;
}

#documentation div.content h1,
.text-page h1
{
    font-size: 36px;
    color: #333333;
    margin: 0px 0px 20px 0px;
    padding: 0px;
}

#documentation div.content h2,
.text-page h2
{
    font-size: 26px;
    color: #666666;
    margin: 10px 0px 15px 0px;
    padding: 0px;
}

#documentation div.content h3,
.text-page h3
{
    font-size: 20px;
    color: #666666;
    margin: 10px 0px 10px 0px;
    padding: 0px;
}

#documentation div.content div.text p,
.text-page p
{
    font-size: 15px;
    padding-bottom: 0px;
    line-height: 150%;
    margin-bottom: 15px;
}

/* ###################################################################################### */

#documentation div.content div.text ol, div.content div.text ul
{
    margin-left: 50px;
    margin-bottom: 0px;
}

#documentation div.content div.text ol li, div.content div.text ul li
{
    font-size: 15px;
    padding-bottom: 10px;
}

#documentation div.content div.text ol li:last-child, div.content div.text ul li:last-child
{
    padding-bottom: 0px;
}

/* ###################################################################################### */

#documentation .sidebar ul
{
    float: left;
    list-style-type: none;
    margin: 0px;
    padding: 0;
    width: 100%;
}

#documentation .sidebar ul li
{
    float: left;
    width: 100%;
}

#documentation .sidebar ul li a
{
    float: left;
    color: #333;
    margin-bottom: 10px;
}

#documentation .sidebar > ul > li
{
    margin-bottom: 10px;
}

#documentation .sidebar > ul > li > a
{
    font-size: 16px;
    font-weight: bold;
}

#documentation .sidebar > ul > li > ul > li > a
{
    margin-left: 10px;
    font-size: 13px;
}

#documentation .sidebar > ul > li > ul > li > ul > li > a
{
    color: #333;
    margin-left: 20px;
}

#documentation .sidebar ul li ul.sublist li
{
	font-size: 11px;
	padding-left: 10px;
	color: #666;
	line-height: 11px;
}

.text-page {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #C0C0C0;
    border-radius: 5px;
    margin: 30px 0px;
    padding: 29px;
}

/* ###################################################################################### */

#content div.small-box
{
    width: 463px;
}

#content div.small-box div.title
{
    width: 403px;
}

#content div.about-us
{
    float: right;
}

#content div.about-us div.about-text
{
    position: relative;
    float: left;
    padding: 30px 30px 0px 30px;
    font-size: 14px;
    height: 170px;
    width: 403px;
}

/* ###################################################################################### */

#content div.contact-info
{
    float: left;
}

#content div.contact-info div.contact-text
{
    position: relative;
    float: left;
    padding: 30px 30px 0px 30px;
    font-size: 14px;
    height: 170px;
    width: 403px;
}

#content div.contact-info div.contact-text img
{

}

#content div.contact-info ul
{
    margin-top: 30px;
}

#content div.contact-info ul li
{
    font-size: 16px;
    padding-bottom: 5px;
}

span.vat
{
    float: left;
    position: relative;
    width: 100%;
    text-align: center;
    color: #999999;
    margin-top: 20px;
}

#content div.company
{
    float: right;
}

#content div.company div.company-text
{
    position: relative;
    float: left;
    padding: 30px 30px 0px 30px;
    font-size: 14px;
    height: 170px;
    width: 403px;
    text-align: center;
}

/* ###################################################################################### */

#content div.pull-left
{
    float: left;
}

#content div.pull-right
{
    float: right;
}

#content div.contact-and-company
{
    position: relative;
    float: left;
    padding: 30px 30px 20px 30px;
    width: 403px;
    text-align: center;
}

/* ###################################################################################### */

#content div.contact-and-company ul
{
    position: relative;
    float: left;
    width: 100%;
}

#content div.contact-and-company ul li
{
    position: relative;
    float: left;
    font-size: 16px;
    padding-bottom: 10px;
    width: 100%;
}

.navbar-inverse .navbar-inner
{
    background: #fff;
}

.top-alert {
	position: fixed;
	top: 0%;
	left: 0%;
	height: 25px;
	width: 100%;
	z-index: 9999;
}

.top-alert div {
	width: 960px;
	margin: 0 auto;
}