/*////////////////////////////////////////////////////////

STYLING SPECIFIC TO THE APPLICATION LIST AND LANDING PAGES

////////////////////////////////////////////////////////*/

/*
======================
APPLICATIONS LIST PAGE
======================
*/

#main .app-list .column {
    display: block;
    min-height: 220px;
    background-size: cover;
    padding: 0;
    margin-bottom: 1em;
}

    #main .app-list .column h3 {
        font-family: "myriad-pro-semiextended", sans-serif;
        font-weight: normal;
        font-size: 1.3125em;
        margin-bottom: .5em;
    }

    #main .app-list .column p {
        font-size: .8125em;
    }

    #main .app-list .column a {
        color: #FFF;
        display: block;
        padding: 1em;
        min-height: 220px;
        text-decoration: none;
        background: none;
    }

        #main .app-list .column a:hover,
        #main .app-list .column a:active {
            background-color: rgba(0, 0, 0, 0.5);
        }

/* Medium screen */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    #main .app-list .column {
        min-height: 220px;
        border-left: .5em solid #FFF;
        border-right: .5em solid #FFF;
    }

        #main .app-list .column a {
            min-height: 220px;
        }

        #main .app-list .column h3 {
            font-size: 1.5em;
            margin-bottom: .25em;
        }

        #main .app-list .column p {
            font-size: .875em;
        }
}

/* Large Screen */
@media screen and (min-width: 64em) {
    #main .app-list .column {
        height: 250px; /* changed from 300px to better fit underlying imagery */
        border-right: 1em solid #FFF;
    }

        #main .app-list .column a {
            height: 250px; /* changed from 300px to better fit underlying imagery */
        }

        #main .app-list .column h3 {
            font-size: 2em;
            margin-bottom: .125em;
        }

        #main .app-list .column p {
            font-size: 1em;
        }
}

/*
==================================
APPLICATIONS LANDING PAGE SPECIFIC
==================================
*/

/* 
-----------------------------------
Imagery for global heading masthead 
-----------------------------------
*/

#main .applanding .primary-content {
    margin-top: -8px;
    min-height: 460px;
    color: #FFF;
}

/* 
-----------------------------------
Content for global heading masthead 
-----------------------------------
*/

#main .applanding #global-heading {
    margin: 0;
    padding: 0 1em;
    background: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    min-height: 460px;
}

    #main .applanding #global-heading h1 {
        text-transform: uppercase;
        font-weight: normal;
        padding-top: 1.25em;
        font-size: 1.3125em; /* 21 px */
    }

    #main .applanding #global-heading .apptype::before {
        content: "|| ";
    }

    #main .applanding #global-heading h2 {
        font-size: 1.75em;
        font-family: "myriad-pro-semi-condensed", sans-serif;
        margin-top: .5em;
    }

    #main .applanding #global-heading h3 {
        font-size: 1.5em;
        margin-top: .25em;
        margin-bottom: .5em;
        line-height: 1.2;
    }

    #main .applanding #global-heading .button {
        margin-bottom: 3rem;
    }

#main .applanding .primary-content p {
    font-size: 1.125em;
    line-height: 1.5;
}

#main .applanding .primary-content ul {
        font-size: 1em;
}

#main .applanding .primary-content a {
    background: none; /* removes the text link underline */
}

/* medium and large screen */
@media screen and (min-width: 40em) {
    #main .applanding #global-heading h1 {
        font-size: 1.125em; /* 18 px */
    }
}

/* medium screen */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    #main .applanding #global-heading h2 {
        font-size: 2em;
    }

    #main .applanding #global-heading h3 {
        font-size: 1.75em;
    }

    #main .applanding .primary-content p {
        font-size: 1.3125em;
    }
}

/* large screen */
@media screen and (min-width: 64em) {
    #main .applanding #global-heading h2 {
        font-size: 2.25em;
    }

    #main .applanding #global-heading h3 {
        font-size: 1.875em;
    }

    #main .applanding .primary-content p {
        font-size: 1.5em;
    }

    #main .applanding .primary-content ul {
        font-size: 1.25em;
    }
}

#main .applanding .primary-content .button {
    background-color: #97181D;
    font-size: 1.125em;
    text-transform: uppercase;
    border-radius: 50px;
    margin-top: .75em;
    color: #FFF;
    text-decoration: none;
}

    #main .applanding .primary-content .button:hover,
    #main .applanding .primary-content .button:active {
        background-color: #444744;
    }

/*
#main .applanding .products {
	margin-bottom: 2em;
}
*/

#main .applanding .products h2 {
    text-align: center;
    text-transform: uppercase;
    margin-top: .5em;
    /*font-size: 1.75em;*/
    font-size: 2.25em;
}

    #main .applanding .products h2 .apptype {
        display: block;
        font-weight: normal;
    }

/*
#main .applanding .products .item {
	padding: 0 3em;
}
*/

#main .applanding .products .item a {
    display: block;
    /* height: 100%; */
    margin-bottom: 1.5em;
    border: 1px solid #e3e5e3; /* border along the outside of each item */
}

    #main .applanding .products .item a:hover,
    #main .applanding .products .item a:active {
        color: #97181D;
        box-shadow: 0 2px 5px rgba(0,0,0,0.5);
        border: 1px solid #FFF;
    }

#main .applanding .products .item .product-img {
    display: block;
    margin: 0 auto;
    width: 75%;
}

#main .applanding .products .item .product-desc {
    position: relative;
    margin-top: -2em; /* optionally placed to move content up into image area */
    margin-bottom: 2em;
    padding: 0 5%;
}

    #main .applanding .products .item .product-desc h3 {
        font-family: "myriad-pro-semi-condensed", sans-serif;
        font-weight: 700;
        font-size: 2.25em;
        line-height: 1;
        color: #1B326c;
        margin-bottom: .125em;
        text-shadow: 0 0 2px rgba(255, 255, 255, 1), 0 0 4px rgba(255, 255, 255, 1), 0 0 6px rgba(255, 255, 255, 1);
    }

        #main .applanding .products .item .product-desc h3 span {
            font-family: "myriad-pro", sans-serif;
            font-weight: 400;
            text-transform: uppercase;
            font-style: normal;
            display: block;
            font-size: .65em;
            /*font-size: .5em;*/
            color: #444744;
            margin-top: .125em;
        }

    #main .applanding .products .item .product-desc p.more {
        font-weight: 700;
        font-size: 1.25em;
        line-height: 1;
        text-transform: uppercase;
        color: #97181D;
        margin: 0;
    }

#main .applanding .products li {
    color: #444744;
    line-height: 1.1;
    margin-bottom: .5em;
}

#main .applanding .products .item a:hover li,
#main .applanding .products .item a:active li {
    color: #97181D;
}

#main .applanding .products .item a:hover p.more,
#main .applanding .products .item a:active p.more {
    color: #444744;
}

/* medium and large screen */
@media screen and (min-width: 40em) {
    #main .applanding .products h2 .apptype {
        display: inline;
    }

    #main .applanding .products h2 {
        text-align: left;
        font-size: 1.5em;
        margin-top: 1.5em;
    }

    #main .applanding .products .item {
        padding: 0 1em;
    }

        #main .applanding .products .item .product-desc {
            bottom: 1em;
            margin-bottom: 0;
            margin-top: 1em;
        }

       /* #main .applanding .products .item .product-img {
            width: 100%;
        }*/

        #main .applanding .products .item .product-desc h3 {
            font-size: 1.75em;
        }

        #main .applanding .products .item .product-desc p.more,
        #main .applanding .products .item .product-desc li {
            font-size: .875em;
        }
}