/* CloudConnector shared styles.

   developer: rmiske
   ========================================================================== */

/* ==========================================================================
   setup/common
   ========================================================================== */

body { background: #fff; }

span.red { color: #dd1100 !important; }
span.orange { color: #ff7700 !important; }

/* ==========================================================================
   local wrapper
   ========================================================================== */

.local-wrapper {
    color: #636363;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
}

.local-wrapper a {
    color: #dd1100;
    outline: none;
    text-decoration: none;
}

.local-wrapper a:hover {
    color: #f57300;
    outline: none;
    text-decoration: none;
}

.local-wrapper h1,
.local-wrapper h2,
.local-wrapper h3,
.local-wrapper h4,
.local-wrapper h5,
.local-wrapper h6,
.local-wrapper p,
.local-wrapper ul,
.local-wrapper li {
    display: block;
    margin: 0;
    padding: 0;
}

.local-wrapper img {
    max-width: 100%;
}

#heading h2 {
    color: #dd1100;
    font-size: 2.8125rem;
    font-weight: 400;
    line-height: 2.9375rem;
    margin-bottom: 0.625rem;
    width: 100%;
}

/* ==========================================================================
   section wrapper
   ========================================================================== */

#cce-section-header, .section-wrapper { padding: 0 2.5rem; }
#cce-section-header .width, .section-wrapper .width {
    margin: 0 auto;
    max-width: 63.4375rem;
    padding: 0;
}

.section-wrapper .width.header { padding: 3.125rem 0 1.5625rem; }

.section-wrapper.last { border: none; }

section#about { margin: 0.125rem auto 5.875rem; }
#why-cloud-connector section#about,
#use-cases section#about {
    margin-bottom: 0;
}

.section-wrapper .col { width: 50%; }
.section-wrapper .col.left { padding-right: 1.375rem; }
.section-wrapper .col.right { padding-left: 1.375rem; }

.section-wrapper img {
    display: block;
    margin: 0.9375rem 0 1.25rem;
    max-width: 100%;
}

.section-wrapper img.less-margin {
    margin-bottom: 0.625rem;
}

.section-wrapper p {
    color: #535353;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5rem;
    margin: 0.375rem 0 1.875rem 0;
}

.section-wrapper h3 {
    color: #f77700;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5625rem;
    margin: 0 0 0.3125rem;
}

/* ==========================================================================
   sub navigation
   ========================================================================== */

/*#overview #subnav-overview,
#why-cloud-connector #subnav-why-cloud-connector,
#use-cases #subnav-use-cases,
#resources #subnav-resources,
#faq #subnav-faq {
    background: #fff;
}*/

/* ==========================================================================
   contact us section
   ========================================================================== */

#contact-us-section {
    background: #f86300;
    border-bottom: 1px solid #fff;
    margin-top: 5.625rem;
}
#contact-us-section * {
    margin: 0;
    padding: 0;
}
#contact-us-section .width {
    margin: 0 auto;
    max-width: 63.4375rem;
    padding: 2.25rem 0; 
}

#contact-us-section .grid { margin: 1.5rem auto 0; }
#contact-us-section .col.left { width: 33%; }
#contact-us-section .col.mid { width: 34%; }
#contact-us-section .col.right { width: 33%; }

#contact-us-section h2,
#contact-us-section h3,
#contact-us-section p {
    color: #fff;
    font-weight: 300;
    padding: 0 1.5625rem;
}
#contact-us-section h2 {
    color: #fff;
    font-size: 1.75rem;
    line-height: 2.1rem;
    margin: 0 0 0.5rem;
    padding: 0;
    text-align: center;
}
#contact-us-section h3 {
    border: none;
    font-size: 1.25rem;
    line-height: 1.5rem !important;
    margin-bottom: 0.5rem !important;
    white-space: nowrap;
}
#contact-us-section p {
    /*width: auto;*/
    font-size: 0.875rem;
    line-height: 1.5625rem;
}

#contact-us-section a,
#contact-us-section a:link,
#contact-us-section a:visited {
    color: #f3f37e;
}
#contact-us-section a:hover,
#contact-us-section a:active {
    color: #fff;
}

#contact-us-section a.button,
#contact-us-section a.button:link,
#contact-us-section a.button:visited {
    background: #fff;
    border: 1px solid #c53c00;
    border-radius: 3px;
    color: #f86300;
    display: inline-block;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.0625rem;
    margin: 0.75rem 0.3125rem 0 0;
    padding: 0.3125rem 0.1875rem;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    width: 5.625rem;
}
#contact-us-section a.button:hover,
#contact-us-section a.button:active {
    background: #e35b00;
    border: 1px solid #fff;
    color: #fff;
}

/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for large screens (1200px)
   ========================================================================== */
@media all and (max-width: 1200px) {
}

/* styles for medium screens (900px)
   ========================================================================== */
@media all and (max-width: 900px) {
    #cce-section-header, .section-wrapper { padding: 0 1rem; }

    #contact-us-section .col.left { 
        margin-bottom: 1.875rem;
        width: 100%; 
    }
    #contact-us-section .col.mid {
        padding-right: 1.5625rem;
        width: 50%;
    }
    #contact-us-section .col.right { 
        padding-left: 1.5625rem;
        width: 50%; 
    }
    #contact-us-section h2,
    #contact-us-section h3,
    #contact-us-section p {
        padding: 0;
    }
}

/* styles for small screens (600px)
   ========================================================================== */
@media all and (max-width: 600px) {
    .section-wrapper .col { width: 100%; }
    .section-wrapper .col.left { padding-right: 0; }
    .section-wrapper .col.right { padding-left: 0; }

    #contact-us-section .col { width: 100% !important; }
    #contact-us-section .col.mid {
        margin-bottom: 1.875rem;
        padding-right: 0;
    }
    #contact-us-section .col.right { 
        padding-left: 0;
    }
}

/* styles for minimum supported screen width (320px)
   ========================================================================== */
@media all and (max-width: 320px) {
}

/* printer styles
   ========================================================================== */
@media print {
}