/* 
-------------------------------------------------------------------------
    GLOBAL STYLES
-------------------------------------------------------------------------
*/

body {
    font-family: "Whitney SSm A", "Whitney SSm B";
    font-weight: 400;
    background: #F7F7F8;
    color: #496367;
}

a {
    text-decoration: none;  
}

.button {
    font-family: "Whitney SSm A", "Whitney SSm B";
    text-decoration: none;
    text-transform: uppercase;
}

.text-center {
    text-align: center;
}

/* 
-------------------------------------------------------------------------
    HEADER
-------------------------------------------------------------------------
*/

#header {
    padding: 50px 0 0 0;
}

/* Logo */

.logo {
    display: inline-block;
    margin-top: 15px;
}
.logo img {
    max-height: 30px;
    width: auto;
}

/* Menu */

#header .menu li a {
    margin-left: 15px;
    line-height: 40px;
    font-family: "Archer A", "Archer B";
    font-size: 18px;
    font-weight: 600;
    color: #496367;
    text-align: center;
    border-radius: 4px;
}

#header .menu li a:hover {
    color: #133E43;
}

#header .menu .button {
    font-family: "Whitney SSm A", "Whitney SSm B";
    color: #A0ADAF;
    background: #F7F7F8;
    border: 1px solid #E0E1E2;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
}
#header .menu .button:hover {
    background: #FFF;
    color: #496367;
}

/* 
-------------------------------------------------------------------------
    HOMEPAGE
-------------------------------------------------------------------------
*/

/* Unique value proposition */

#hero {
    height: 737px;
    padding: 50px 0;
    background: url(img/hero-screenshot-2.png);
    background-repeat: no-repeat;
    background-size: 680px 637px;
    background-position: center right;
}

#hero h1 {
    margin-top: 80px;
    margin-bottom: 0;
    font-size: 32px;
    font-family: "Archer A", "Archer B";
    font-weight: 800;
    color: #133E43;
}

#hero p {
    font-size: 16px;
    line-height: 32px;
}

/* Connect site form */

.connect-site {
    padding-top: 40px;
}

.connect-site input {
    padding: 30px;
    font-size: 16px;
    border: 1px solid #E0E1E2;
    box-shadow: none;
    color: #496367;
}

.connect-site .button {
    width: 100%;
    padding: 24px 0;
    font-size: 12px;
    font-weight: 600;
}

/* Clients */

#clients {
    padding: 50px 0;
    background: #EFF0F1;
}

/* Typography */

p.heading {
    font-size: 32px;
    font-family: "Archer A", "Archer B";
    margin-bottom: 0;
    color: #133E43;
}

p.heading strong {
    font-weight: 800;
}

/* Product details */

#product-details {
    padding: 80px 0 300px;
}

.dark-section {
    background: #133E43;
}
.dark-section p {
    color: #ACB8BA;
}
.dark-section p.heading {
    color: #FFF;
}

#product-details .container {
    margin-top: 80px;
    font-size: 14px;
    line-height: 28px;
    background: rgba(0,0,0,0.2);
    border-radius: 4;
}

#product-details .padded {
    padding: 20px 40px;
}

#product-image img {
    width: 90%;
    height: auto;
    margin-top: -300px;
}

/* Product features */

#product-features .row {
    padding-top: 120px;
    border-bottom: 1px solid #E0E1E2;
}

#product-features h2 {
    margin: 0;
    padding: 0;
    font-family: "Archer A", "Archer B";
    font-weight: 800;
    font-size: 24px;
    color: #133E43;
}

#product-features p, #product-features ul {
    line-height: 2em;
}

#product-features li {
    font-size: 14px;
    font-weight: 600;
}

#product-features img {
    border-radius: 10px 10px 0 0;
    border-top: 24px solid rgba(224, 225, 226, 0.5);
    border-left: 24px solid rgba(224, 225, 226, 0.5);
    border-right: 24px solid rgba(224, 225, 226, 0.5);
}

/* Quotes */

#quotes {
    padding: 80px 0;
}

#quotes blockquote {
    padding: 50px 0 80px 0;
}

#quotes blockquote p {
    margin: 0;
    padding: 40px 0 0 0;
    font-family: "Archer A", "Archer B";
    font-size: 30px;
    color: #FFFFFF;
    line-height: 2em;
}

#quotes blockquote span {
    display: block;
    padding: 20px 0 50px 0;
}

#quotes blockquote span strong {
    color: #FFF;
}

#quotes img {
    max-width: 150px;
    height: auto;
}
/*
#quotes .active img {
    opacity: 1;
}
*/
/* Pricing */

#pricing {
    padding: 80px 0;
    border-bottom: 1px solid #E0E1E2;
}

#pricing .pricing-table .container {
    margin: 40px 0;
    background: #FFF;
    border-radius: 4px;
   -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
      -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
           box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
    z-index: 1001;
}

#pricing .plan {
    padding: 0 15px;
}

.pricing-table .title {
    display: block;
    padding: 24px 0;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: #21CDE1;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.pricing-table .price {
    margin: 0;
    padding: 14px 0 24px 0;
    font-family: "Archer A", "Archer B";
    font-weight: 800;
    font-size: 36px;
    color: #133E43;
}

.pricing-table .price small {
    display: block;
    margin-top: 0;
    font-family: "Whitney SSm A", "Whitney SSm B";
    font-weight: 400;
    font-size: 12px;
    opacity: 0.4;
    font-style: italic;
}

.pricing-table ul {
    margin: 0;
    padding: 0 0 40px 0;
    list-style-type: none;
}

.pricing-table li {
    margin: 0;
    padding: 14px 0;
    font-size: 16px;
    border-top: 1px solid rgba(0,0,0,0.05); 
}

/* Footer */

#footer {
    padding: 80px 0;
    background: #FFF;
}

#footer img {
    height: 20px;
    width: auto;
}

/* 
-------------------------------------------------------------------------
    OVERRIDES
-------------------------------------------------------------------------
*/

/* Small only */
@media screen and (max-width: 39.9375em) {
    
    #hero {
        background: none;
        text-align: center;
    }
    
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    
    #hero {
        height: auto;
        padding: 0 0 120px 0;
        background: none;
        text-align: left;
    }
    #product-features h2, #product-features p {
        padding-left: 20px;
    }
    #product-features .medium-offset-1 h2, #product-features .medium-offset-1 p {
        padding-left: 0;
        padding-right: 20px;
    }
    
}

/* Large and up */
@media screen and (min-width: 64em) {
    
    
    
}