/* This changes the color of the header bar */
#app-header {
    padding:4px 0 5px;
    background-color:#1D3C6F;
}

#app-header h1 {
    margin:10px 0;
}
/* END */


/* User-nav includes changes to the Login / User information link */ 
#user-nav {
    padding-top:25px;
}
#user-nav > a {
    display:inline-block;
    margin-bottom:5px;
    font-weight:normal;
    text-align:center;
    vertical-align:middle;
    cursor:pointer;
    background-image:none;
    border:1px solid transparent;
    white-space:nowrap; 
    padding:5px 10px;
    font-size:14px;
    line-height:1.428571429;
    border-radius:4px;
    -webkit-user-select:none;
    color:#FFFFFF;
}
#user-nav > a:hover {
    color:#FFFFFF;
    text-decoration:underline;
}
/* Active Color of Login button once logged in */ 
.header-nav li a {
    color:#FFFFFF;
    text-decoration:none;
}
/* END --------------------- */


/* Page Links refers to the custom links in header */
#page-links {
    display:inline-block;
}
#page-links a {
    display:inline-block;
    padding:5px 10px;
    font-size:14px;
    color:#ffffff;
    text-decoration:none;
}
.btn-link {
    color: #FFFFFF;
    text-decoration:none;
}
#page-links a:hover, .btn-link:hover {
    color: #FFFFFF;
    text-decoration:underline;
}
#page-links .piped-list>li:after {
    content:"|";
    color:#ffffff;
}
#page-links .piped-list>li:before {
    display:none;
    /* margin-right:0;  */
}
/* End --------------------- */

/* hero image area (orig image size: 1400 × 400 pixels) */
.carousel-inner .item img {
    width: 100%;
}
.feature-region {
    background-image: none;
    border-top: 0px solid #fff;
    border-bottom: 0px solid #fff;
}
/* End --------------------- */

/* changes the search bar */
#search-form.callout-region {
    background-color: #1A9C97;
    color: white;
    padding-bottom: 0;
}

/* changes color of the Load More and Enroll button */ 
.btn-info {
    outline: 0;
    outline-offset: 0;
    border: 0;
    border-radius: 2px;
    background: #C72A74;
    color: #ffffff;
}

/* changes color of the Load More and Enroll hover button */
.btn-info:hover {
    background: #b8d9dd;
    color: #C72A74;
}

/* changes color of catalog home page background */
#home-page .product-results {
    background: #f0f9fd;
    padding-top: 0;
}

/* changes color of "Free" on catalog home page */
.product-flag-free {
    background-color: #C72A74;
}

/* changes text color at bottom of course tile on home page */
.product-tile .product-footer {
    color: #C72A74;
}

/* changes color of COURSES icon on course tile on home page */
.ProductIcon__LargeCircle--course {
    background: #C72A74;
}

/* changes color of PROGRAM icon on course tile on home page */
.ProductIcon__LargeCircle--program {
    background-color: #F7941D;
}

/* changes hover color on course tile on home page */
.product-results .product-tile:hover {
    box-shadow: inset 0px -5px 0px #1D3C6F;
}

/* changes color of footer social media bar */
#footer-bar {
    background-color: #999999;
    padding: 18px 0 18px 0;
    margin-top: -30px;
    margin-bottom: 20px;
}

/* hides the default footer */
#app-footer .container {
    display: none;
}

/* changes listing page background */
.product-bg {
    background-color: #f0f9fd;
    background-size: cover;
}

/* changes search bar background on main catalog page */
#search-form .search-form-filters {
    background-color: #f0f9fd;
    padding-bottom: 30px;
}

/* changes listing page bottom "enroll" banner background */
.callout-region {
    background-color: #f0f9fd;
    background-size: cover;
}

/* MEDIA FORMATTING rules for responsive devices. This coding is optional but helpful for tablets and mobile devices. */

/* Media for header */
@media and (max-width: 768px) {
#page-links #app-header .header-nav {
    float: none;
    width: auto;
    }
}

/* Media for feature region */
  
@media and (max-width: 1200px) {
#home-page #feature div {
	max-width: 800px;
    }
}
   
@media and (max-width: 768px) {
#home-page #feature {
	height: 265px;
	text-align: center;
    padding: 0 2em;
    }
}

.alert-top {
	margin-bottom: 0;
}

/* END MEDIA FORMATTING */