/* ==========================================
   ABOUT PAGE
   Conterco Industries
========================================== */

/* HERO */

.hero{
    background:
    linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.85)),
    url("image/about.jpg") center center/cover no-repeat;
}

.hero-content{
    max-width:900px;
    margin:auto;
    text-align:center;
}

.hero h1{
    max-width:900px;
    margin:auto;
}

.hero-text{
    max-width:760px;
    margin:30px auto 40px;
    color:#ddd;
}

/* ===========================
   GENERAL SECTIONS
=========================== */

section{
    max-width:1200px;
    margin:auto;
}

section h2{
    max-width:700px;
}

section p{
    max-width:850px;
    color:#d6d6d6;
}

/* Alternate backgrounds */

section:nth-of-type(even){
    background:#111;
}

section:nth-of-type(odd){
    background:#1a1a1a;
}

/* ===========================
   HERO TAG
=========================== */

.hero-tag{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
}

/* ===========================
   STORY
=========================== */

#story{
    text-align:left;
}

/* ===========================
   CARDS
=========================== */

.cards{
    margin-top:50px;
}

.product-card{
    background:#0d0d0d;
    border:1px solid #2b2b2b;
}

.product-card:hover{
    border-color:#ffffff33;
    transform:translateY(-8px);
}

.product-card h3{
    color:#fff;
}

.product-card p{
    color:#d5d5d5;
}

/* ===========================
   CTA
=========================== */

section:last-of-type{
    text-align:center;
}

section:last-of-type p{
    margin:auto auto 40px;
}

/* ===========================
   BUTTONS
=========================== */

.hero-buttons button{
    min-width:220px;
}

/* ===========================
   SECTION SPACING
=========================== */

section .hero-tag{
    margin-bottom:20px;
}

section h2{
    margin-bottom:25px;
}

section p+p{
    margin-top:20px;
}