@CHARSET "UTF-8"; /* !! RESET CSS !! */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* !! CONTENT ELEMENTS !! */
body {
    font-family: proxima-nova, Helvetica, Arial, sans-serif;
    color: #111111;
    /* -webkit-font-smoothing: antialiased; */
}

.wrapper {
    width: 100%;
    width: auto;
    clear: both;
}

.cases .wrapper {
    border-top: 1px solid #e8e8e8;
}

.wrapper.darker {
    background-color: #f6f6f6;
}

.wrapper_center {
    width: 1080px;
    margin: 0 auto;
}

/* Header */
.header {
    height: 100px;
    padding-top: 69px;
}

.header h1 {
    float: left;
}

.header .logo {
    float: left;
}

.header .logo img {
    width: 51px;
}

.header .button {
    float: right;
    margin-right: 18px;
    margin-top: 11px;
}

.header .social {
    float: right;
    margin-top: 9px;
}

.header .social .followus {
    float: right;
    margin-bottom: 6px;
    color: #569fba;
    font-weight: 500;
}

.header .social .networks {
    float: right;
    clear: both;
}

.header .social .networks a {
    margin-left: 6px;
    font-size: 18px;
    opacity: 0.8;
    text-decoration: none;
}

.header .social .networks a:hover {
    opacity: 1;
}

.header .social .networks a:active {
    opacity: 0;
}

.header #language_selector {
    float: right;
    margin: 21px 24px 0px 0px;
}


/* Introduction */
.main {
}

.main .intro {
    padding-top: 36px;
    /* padding-bottom: 100px; */
}

.main .intro h1 {
    line-height: 69px;
    margin-bottom: 34px;
}

.main .intro p {
    padding-bottom: 24px;
    width: 815px;
}

.main .cases {margin-top: 100px;}

.main .case {
    clear: both;
    padding: 64px 0px;
    min-height: 328px;
    display: inline-block;
}

.main .case .left {
    float: left;
    width: 540px;
}

.main .case .right {
    float: right;
    width: 540px;
}

.main .case .center {
    text-align: center;
    width: 1080px;
}


.main .case h2 {
    padding-bottom: 19px;
    width: 432px;
    padding-top: 8px;
    display: inline-block;
    float: left;
    clear: both;
}

.main .case h2 a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.main .case .center h2, .main .case .center p {
    float: none;
    clear: both;
    width: 100%;
}

.main .case .center input[type=email] {
    width: 343px;
    margin-bottom: 27px;
    margin-top: 14px;
}

.main .case p {
    width: 432px;
}

.main .case img {
    max-width: 475px;
    margin-top: 16px;
    padding: 10px 5px 9px 9px;
    background-color: white;
    border: 1px solid #e8e8e8;
}

.main .case a.button {
    margin-top: 25px;
}


.main .poweredby {
display: none;
}

/* Visual */
.main .visual {margin-bottom: 15px;margin-top: 50px;}

.main .visual #container_pageviews, .main .visual #container_engagement {
    margin-top: 10px;
}

/* Explainer */
.main .explainer {
    margin-top: 47px;
    padding-bottom: 4px;
    clear: both;
    display: inline-block;
    }

.main .explainer h2 {margin-bottom: 25px;}

.main .explainer p {
    width: 780px;
}



/* Footer */
.footer {
    background-color: #3e454f;
    height: 270px;
    text-align: center;
    padding-top: 49px;
}

.footer img {
    height: 160px;

}

.footer .friends {
color: #FFF;
opacity: 0.5;
font-size: 14px;
}

.footer .friends a {
    text-decoration: none;
    color: inherit;
}

.footer .friends a:hover {
    text-decoration: underline;
}

/* !! UI ELEMENTS !! */

h1 {
    font-size: 58px;
    font-weight: 600;
}

h2 {
        font-size: 34px;
        font-weight: 600;
        line-height: 45px;
}

p {
        font-size: 18px;
        line-height: 27px;
        padding-bottom: 13px;
}

hr {
    border-bottom: 1px solid #e8e8e8;
    border-top: none;
    clear: both;
}

.gradient {
        clear: both;
    width: 100%;
    height: 12px;
    background: rgba(252,201,177,1);
    background: -moz-linear-gradient(left,rgba(252,201,177,1) 0,rgba(96,197,192,1) 100%);
    background: -webkit-gradient(left top,right top,color-stop(0,rgba(252,201,177,1)),color-stop(100%,rgba(96,197,192,1)));
    background: -webkit-linear-gradient(left,rgba(252,201,177,1) 0,rgba(96,197,192,1) 100%);
    background: -o-linear-gradient(left,rgba(252,201,177,1) 0,rgba(96,197,192,1) 100%);
    background: -ms-linear-gradient(left,rgba(252,201,177,1) 0,rgba(96,197,192,1) 100%);
    background: linear-gradient(to right,rgba(252,201,177,1) 0,rgba(96,197,192,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcc9b1', endColorstr='#60c5c0', GradientType=1 );
}

a.text_link, p a {
    color: #5fc4bf;
    text-decoration: none;
    cursor: pointer;
}

a.text_link:hover, p a:hover {
    text-decoration: underline;
}

a.text_link:active, p a:active {
    opacity: 0;
}

.grey_text {
    color: #ADADAD;
    text-decoration: none;
}

a.grey_text:hover, a.grey_text i:hover {
    color: #787878;
    cursor: pointer;
}

.button {
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    white-space: nowrap;
    user-select: none;
    background-color: transparent;
    font-family: proxima-nova, Helvetica, Arial, sans-serif;
}

.button:focus {
    outline: 0;
}

.button.green {
    color: #60c5c0;
    border-color: #60c5c0;
}

.button.green:hover {
    cursor: pointer;
    color: #3E454F;
    border-color: #3E454F;
}

.button.large {
            font-size: 18px;
            padding: 15px 40px;
            font-weight: 800 !important;
            border: 3px solid;
}

.button.small {font-size: 13px;border: 2px solid;font-weight: 500;padding: 9px 14px;}

.label {
        color: #569fba;
        font-size: 14px;
        text-decoration: underline;
        font-weight: 500;
        float: left;
        display: inline-block;
}

input[type=password], input[type=text], input[type=email] {
    border: 1px solid #e8e9eb;
    background-color: #FFFFFF;
}

input[type=password]:focus, input[type=text]:focus, input[type=email]:focus {
    border: 1px solid #56646e!important;
    outline: none !important;
}

input[type=password].input_large, input[type=text].input_large, input[type=email].input_large {
    font-size: 18px;
    padding: 9px 12px;
    border-radius: 2px;
}


/* Chrome often cuts out last two CSS lines for some random reason. This is to ensure it doesn't actually break something */
.chromebug {

}