/*------------------------------------*\
$CONTENTS
\*------------------------------------*/


/*
* Base:            No name (default elements, no classes)
* Layout:          Divide the page into sections/areas. Layouts hold one or more modules/blocks together
* Modules/blocks:  Are the reusable, modular parts of our design. They are the callouts,
*                  the sidebar sections, the product lists and so on. (BEM: block__element--modifier)
-------------------------------------*/


/*------------------------------------*\
$1-BASE/GLOBAL (Overriding Foundation Defaults)
-------------------------------------*/


/*------------------------------------*\
* 1- TYPOGRAPHY
* 1.1 TYPE
* a- headers
* b- subheaders
* c- small header segments
* d- paragraphs
* e- links
* f- lists
* g- blockquotes
* 1.2 INLINE LIST
* 1.3 LABELS
* 2- NAVIGATION
* 2.1 TOP BAR
* 3- UTILITY CLASSES
* 4- FORMS
* 5- BUTTOMS
* 6- CONTENT
* 6.1 PRICING TABLES
* 6.2 TABLES
* 7- CALLOUTS & PROMPTS
* 7.1- PANELS
* 8- VISIBILITY
\*------------------------------------*/

body {
    font-family: 'Source Sans Pro', sans-serif;
}


/* 2-NAVIGATION > 2.1-TOP BAR */


/* Small screens */

@media only screen and (max-width: 40em) {
    /* max-width 640px, mobile-only styles, use when QAing mobile issues (0, 640px) */
    .top-bar-section li:not(.has-form) a:not(.button) {
        background: #3b3735;
        ;
    }
    .top-bar-section li.active:not(.has-form) a:not(.button) {
        background: #3b3735;
    }
    .top-bar li {
        background: #3b3735;
        /* only logo bar in small screen byEW */
    }
    .top-bar .toggle-topbar.menu-icon a {
        /* color:black; */
        /* change color menu name byEW */
    }
    .top-bar .toggle-topbar.menu-icon a::after {
        /* change color of 3 lines menu icon on box-shadow in small screen byEW */
        /*  content: "";
        position: absolute;
        right: 0;
        display: block;
        width: 16px;
        top: 0;
        height: 0;
        box-shadow: 0 10px 0 1px black, 0 16px 0 1px black, 0 22px 0 1px black; */
    }
    .top-bar.expanded .toggle-topbar a::after {
        /* menu icon tree lines small screen color byEW */
        box-shadow: 0 10px 0 1px #fff, 0 16px 0 1px #fff, 0 22px 0 1px #fff;
    }
    .top-bar.expanded .toggle-topbar a {
        /* menu icon MENU text color */
        color: #fff;
    }
}


/* Medium screens */

@media only screen and (min-width: 40.063em) {
    /* min-width 641px, medium screens (640px +) */
    .top-bar {
        background: #3B3735;
    }
    .top-bar-section li:not(.has-form) a:not(.button):hover {
        background: #000;
    }
    .top-bar-section li:not(.has-form) a:not(.button):hover {
        background: #3b3735;
        color: #fff;
    }
    .top-bar-section li.active:not(.has-form) a:not(.button):hover {
        background: #3b3735;
        color: #fff;
    }
    .top-bar-section li.active:not(.has-form) a:not(.button) {
        background: #3b3735;
    }
    .top-bar-section li:not(.has-form) a:not(.button) {
        background: #3b3735;
    }
}


/*------------------------------------*\
$2-LAYOUT (Main Blocks)
\*------------------------------------*/


/*------------------------------------*\
* 1- header
* 2- nav
* 3- main
* 4- aside
* 5- footer
\*------------------------------------*/

a {
    color: #999999;
    text-decoration: none;
    line-height: inherit;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
    font-size: 10px;
}

a:hover,
a:focus {
    color: #222222;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
}

a img {
    border: none;
}

strong {
    color: #58585a;
    font-weight: bold;
}

.hero {
    background: url("../img/01cinCityMagazine_01.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100% !important;
    z-index: 0;
}

.sidebar-sticky {
    position: fixed;
    width: 340px;
}

.size-12 {
    font-size: 12px;
}

.size-14 {
    font-size: 14px;
}

.size-16 {
    font-size: 16px;
}

.size-18 {
    font-size: 18px;
}

.size-21 {
    font-size: 21px;
}

.size-24 {
    font-size: 24px;
}

.size-36 {
    font-size: 36px;
}

.size-48 {
    font-size: 48px;
}

.size-60 {
    font-size: 60px;
}

.size-72 {
    font-size: 72px;
}

.th {
    line-height: 0;
    display: inline-block;
    border: none;
    max-width: 100%;
    color: #222222;
    transition: all 600ms ease-out;
    opacity: 1;
}

.th:hover,
.th:focus {
    transition: all 300ms ease-out;
    opacity: .7;
}

.th.radius {
    border-radius: none;
}


/*------------------------------------*\
$3-BLOCKS (created or added byMW)
\*------------------------------------*/


/*------------------------------------*\
$4-RESPONSIVE (Reference to copy & paste)
\*------------------------------------*/


/* Small screens */

@media only screen {}


/* Define mobile styles */

@media only screen and (max-width: 40em) {}


/* max-width 640px, mobile-only styles, use when QAing mobile issues (0, 640px) */


/* Medium screens */

@media only screen and (min-width: 40.063em) {}


/* min-width 641px, medium screens (640px +) */

@media only screen and (min-width: 40.063em) and (max-width: 64em) {}


/* min-width 641px and max-width 1024px, use when QAing tablet-only issues (641px, 1024px) */


/* Large screens */

@media only screen and (min-width: 64.063em) {}


/* min-width 1025px, large screens (1024px +) */

@media only screen and (min-width: 64.063em) and (max-width: 90em) {}


/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues (1025px, 1440px)*/


/* XLarge screens */

@media only screen and (min-width: 90.063em) {}


/* min-width 1441px, xlarge screens (1441px +) */

@media only screen and (min-width: 90.063em) and (max-width: 120em) {}


/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues (1441px, 1920px) */


/* XXLarge screens */

@media only screen and (min-width: 120.063em) {}


/* min-width 1921px, xxlarge screens (1921px +) */