/****** START Metropolitan Community College custom style ******/

/*** START font ***/
/* import google font and apply it to headings*/
@import url(https://fonts.googleapis.com/css?family=Raleway:400,200,800,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,300,300italic,700italic);

body {
    font-family: 'open sans';
}
h1, h2, h3, h4, h5, h6, .hero-region h1, .hero-region .h1, .hero-region .AdminSynopsis__Title {
    font-family: 'Raleway', sans-serif;   
    font-weight: 600;
    color: #183e50;
}
h1, h2, h3 {     
    text-transform: capitalize;
}
h2 {
    margin-bottom: 4px;
}
h3 {
    font-size: 20px;
}
h4 {
    font-size: 16px;
}

.faculty-title {
    font-style: italic;
    margin-bottom: 5px;
}
.instructor-container {
    clear: both;
    padding-top: 15px;
}
img.instructor {
    width: 120px;
    float: left;
    margin-right: 10px
}

.comingsoon {
color: white;
font-size: 2em;  
text-align: center;
background-color: #960730;
}

/*** END font ***/

/*** START header ***/

/*modify the header background for all catalog pages.*/
#app-header {
  padding: 0;
  height: 100px;
  background-color: #fff;
} 
  
#app-header h1 {
    margin:10px 0;
}

/* Modify the layout of the header contents*/
#app-header .container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}

/*Modify the account logo in the header*/
/*any header logo uploaded in a catalog will override this option*/
#app-header .logo a {
  background-size: 212px 29px;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 20px;
  width: 212px;
  height: 53px;
}

/* image and text box Container */
#hero-container {
}

/* featured image hero */
#hero-image {
    margin: auto;
    float: left;
    overflow: hidden;
    width: 100%;
    max-height: 400px;
    position: relative;
    display: flex;
    align-items: center;
}

#image {
    width: 100%;
}

#caption-text-box {
    /*position: absolute;
    left: 50%;
    top: 25%;*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
left: -65%;
top: 25%;
}

#caption-text {
    font-family: 'Raleway', sans-serif; 
    position: relative;
    left: -50%;
    color: #fff !important;
    margin-top: 110px;
    font-size: 36px;
    text-align: center;
    background: rgba(29, 95, 171, .75);
    padding: 20px;
    border-radius: 5px;
    white-space: nowrap;
    display: flex;
   flex-direction: column;
justify-content: center;
align-items: center;
}

/* text box hyperlink styling
#caption-text a:link { color: #fff}
#caption-text a:visited { color: #fff; }
#caption-text a:hover { color: #fff; text-decoration:none}
#caption-text a:active { color: #fff; text-decoration:none}
*/

/* search background to #1d5fab */
.search-form-container { 
background-color: #1d5fab;
}

/* search box realign vertical */
#search-form .search-label, #search-form .search-box-wrapper {
    margin-top: 9px;
}
//button#search-refine-button--refine.search-refine-button.btn.btn-lg {
    padding: 12px 16px 5px 16px;
}

/* user-nav includes changes to the Login / User information link */
#user-nav {
    padding-top:25px;
}
#user-nav > a {
    display:inline-block;
    margin-bottom:0;
    font-weight:normal;
    text-align:center;
    vertical-align:middle;
    cursor:pointer;
    background-image:none;
    border:1px solid transparent;
    white-space:nowrap;
    padding-right: 10px;
    font-size:14px;
    line-height:1.428571429;
    border-radius:4px;
    -webkit-user-select:none;
    color:#1d5fab;
}

#user-nav > a:hover {
    text-decoration:none;
    color:#e63d2f;
}
/* Active Color of Login button once logged in */

.header-nav li a {
    color:#1d5fab;
}

/* Page Links refers to the custom links */
#page-links {
    display:inline-block;
}

#page-links a {
    display:inline-block;
    padding-right: 10px;
    font-size:14px;
    color:#1d5fab;
}

#page-links a:hover,
.btn-link:hover,
.btn-link {
    color:#1d5fab;
}

#page-links .piped-list>li:after {
    content:"|";
    color:#1d5fab;
}
#page-links .piped-list>li:before {
    display:none;
    margin-right:0;
}

/*** END header ***/

/*** START home page ***/

/* Carousel object CSS */
.carousel-inner .item img {
    height: 350px;
    width: 100%;
    object-fit: cover;
  }

/*Color of the inactive carousel dots*/
.carousel-indicators li {
     border: 1px solid #1d5fab;
     background-color: #fff;
}

/*Color of the active carousel dot*/
.carousel-indicators .active {
   background-color: #1d5fab;
}

/*remove background image*/
.feature-region {
	background-image: none;
}

/*Hide Categories button on root catalog*/
.search-categories-button {
visibility: collapse;
}

/*Modify the home page feature area background*/
#home-page .feature-region {
  height: 300px;
  width: 100%;
  margin: auto;
  background-image: none;
  background-size: cover;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  background-color: #fff;
  }


/*Modify the layout for the contents of the feature area background*/
#home-page #feature div {
  max-width: auto;
  margin: auto;
  color: #c6d7e9;
}

/*Modify the H3 (includes Carousel caption text) text style in the feature area. Add actual text via JavaScript */
#home-page #feature h3 {
  text-align: center;
  font-size: 3.6em;
  color: #1d5fab;
  margin-top: 1em;
  line-height: 1;
  position: relative;
  bottom: 75px;
  text-shadow: 1px 1px #fff;
}

/*Modify the H4 text style in the feature area. Add actual text via JavaScript */
#home-page #feature h4 {
  text-align: center;
  font-size: 1.9em;
}

    
/*Working as of November 2, 2018*/

#search-form .search-label,
#search-form .search-box-wrapper {
    visibility: hidden;
}

#search-refine-button--refine {
    display: none;
}

::placeholder {
    color: #9f9f9f !important;
}

#search-form.callout-region {
  background-color: #1d5fab;
}


/*Modify the layout for account logo on product tile. Add logo in managed accounts area.*/
.product-tile .product-account-image-wrapper {
  height: 30px;
  margin-bottom: 10px;
}

/*LISTING PAGE*/

/*Format the listing page feature area background*/
#product-page #feature {
    background: #1d5fab;
    padding-top: 20px
}

/*Format the background inside the feature area*/
.product-bg {
  background-color: #c6d7e9;
}

/*Format the account logo under feature area; same logo on Home Page*/
.product-tile .product-account-logo {
  height: 500px;
  margin-bottom: 10px;
  margin-top: 10px;
}

/*To hide the account logo on listing page, use code below instead and remove /* */ around code*/
/*.product-tile .product-account-logo {
  display: none;
}
*/

/*Format the full course or program description area*/
#main {
 color: #0899D3;
min-height: 150px;
}

/* customize card footer hover effect */
.product-tile:hover {
box-shadow: inset 0px -5px 0px #1d5fab !important;
}

/*** END home page ***/

/*** START footer ***/

/* Modify the listing page footer background*/
.callout-region {
  background-color: #1d5fab;
}

/*Format the listing page footer text layout*/
#product-page footer .h2 {
  font-style: normal;
  margin: 15px 0
  color: #ffffff
  font-size: 25px;
}

#app-footer{
  background-color: #1d5fab;
}

#app-footer a, #app-footer ul {
  background-color: #1d5fab;
  padding-top: 15px;
  font-size:  14px;
  color: #ffffff;
}

.piped-list>li:before {
    margin-right: 8px;
    content: "|";
    color: #ffffff;
}

/*Format the second row of copyright information*/
.small {
  background-color: #1d5fab;
  font-size: 12px;
  color: #ffffff;
}

/*** END footer ***/

/*** START listing ***/
.new-layout p {
	line-height: 1.25;
}

.read-more {
	font-family: 'proxima nova bold', arial, sans-serif;
	cursor: pointer;
}

.more-text {
	display: none;
}

.ProductEnrollment__Notice {
	font-size: 14px;
	color: rgb(70,70,70);
}

.product-price {
display:  none;
}

.strong {
display: none;
}

/*Button*/

a.button {
display: inline-block;
text-decoration: none;
border: 2px solid #1d5fab;
padding: 10px;
color: #fff !important;
background-color: #1d5fab;
font-size: inherit;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
box-shadow: 0px 3px 6px #000;
font-family: inherit;
width: 150px;
text-align: center;
}

a.button:hover {
 background-color: initial;
 color: #1d5fab !important;
 text-decoration: none;
}

.btn-container {
text-align: center;
width: 60vw;
position: relative;
left: calc(-50vw + 127.5%);
}

a.contact-btn {
display: inline-block;
}

/*** END listing ***/

/*** START @media styling for responsive devices ***/
@media (max-width: 1200px) {
  #home-page #feature div {
    max-width: 800px;
}
}
@media (max-width: 979px) {
    #caption-text {
    font-size: 1.5em;
    }
	
    #app-header {
    background-color: white;
    color: #5b6c79;
    padding: 0;
    white-space: nowrap;
    }
    .AccountDropdown--margin-top {
    margin-top: 0;
    }
}
@media (max-width: 768px) {
  #app-header .header-nav {
    background: #ffffff;
}
}
@media (max-width: 768px) {
  #home-page #feature .right .carousel-control {
    max-height: 200px;
    text-align: center;
    padding: 0 2em;
  }
}
@media (max-width: 600px) {
#caption-text-box {
    top: 10%;
    }
}
@media (max-width: 540px) {
    #caption-text {
    display: none;
    }
}

/*** END @media styling for responsive devices ***/