@charset "UTF-8";
/* CSS Document */

/* Mobile Adjustments */
@media only screen and (max-width: 400px) {
  .h1-custom-header {
    font-size: 150% !important;
  }
}

@media only screen and (max-width: 900px) {
  /* Full-Width Box on Explore page */
  .full-width-box-template.full-width-short-image{
    margin-bottom: 50px !important;
  }

  /* Button Font Size */

  .btn-secondary{
    font-size: 1em;
  }
}

/* Hide site menu elements */
.block-alert-block,
.erms-message.info,
.erms-message.important,
#block-mainnavigation-2,
.block-de-theme-page-title,
.block-de-theme-page-title,
#block-de-theme-page-title,
.main-menu--toggle,
#block-visit-apply-buttons,
#block-audience-2,
#block-mohawkloginlinks {
	display: none !important;
}
/* End hide site menu elements */
/***************************/

/* menu */
.OHP-navbar-flex{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch !important;
  justify-content: center;
}

.OHP-navbar-menu-links {
  flex: 0 0 16%;
  margin-left: 2px;
  margin-right: 2px;
  background-color: #990033;
  font-size: 124%;
  transition: background-color .4s ease-out, box-shadow .3s ease-out, -webkit-box-shadow .3s ease-out !important;
}

.menu-link-orange {
  background-color: #ff9933 !important;
  transition: background-color .4s ease-out, box-shadow .3s ease-out, -webkit-box-shadow .3s ease-out !important;
}

.menu-link-orange:hover {
  background-color: #CB6B18 !important;
  transition: background-color .4s ease-out, box-shadow .3s ease-out, -webkit-box-shadow .3s ease-out !important;
}

.OHP-navbar-menu-links a {
  padding: 10px;
  font-weight: bold;
  text-decoration: none;
  width: 100%;
  height: 100%;
  line-height: 1.5;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: 90%;
	color: #ffffff;
  transition: background-color .4s ease-out, box-shadow .3s ease-out, -webkit-box-shadow .3s ease-out !important;
}

.menu-link-orange a {
  color: #000000 !important;
}

.OHP-navbar-menu-links:hover {
    background-color: #660033;
    cursor: pointer;
    transition: background-color .4s ease-out, box-shadow .3s ease-out, -webkit-box-shadow .3s ease-out !important;
}

.OHP-navbar-menu-links.active {
  background-color: #660033;
  transition: background-color .4s ease-out, box-shadow .3s ease-out, -webkit-box-shadow .3s ease-out !important;
}

.OHP-navbar-menu-links.active:hover {
    background-color: #660033;
    cursor: pointer;
    transition: background-color .4s ease-out, box-shadow .3s ease-out, -webkit-box-shadow .3s ease-out !important;
}

.OHP-navbar-menu-links.active a{
    color: #990033;
}

.OHP-navbar-menu-links:last-child a{
  border-right: 0px !important;
}

.OHP-mobileImage {
  display: none;
}

/* Logo and Chat */
.OHP-logo-chat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.OHP-main-logo {
  flex: 0 0 60%;
}

.OHP-chat-icon {
  flex: 0 0 40%;
}

.libraryh3lp img {
  width: 225px;
  height: auto;
}

@media only screen and (max-width: 900px) {
    .OHP-navbar-menu-links{
        flex: 0 1 100%;
        margin-bottom: 4px;
        text-align: left;
    }

    .OHP-navbar-menu-links a{
        border-right: 0px;
        justify-content: start;
        text-align: left;
		    color: #ffffff;
    }

    .OHP-main-logo {
      flex: 0 0 100%;
    }

    .OHP-chat-icon {
      flex: 0 0 100%;
    }
}


/* end menu */

/* highlight box */
@media only screen and (max-width: 900px) {
  .highlight-box-template .highlight-area, .full-width-box-template .highlight-area {
    margin: 0px !important;
  }
}

/* buttons */
.btn-primary {
margin: 20px 0 0 0;
}
.btn-secondary {
margin: 20px 0 0 0;
}
/* end buttons */

/* hide elements */

@media only screen and (min-width : 901px) {
.FRT-headlineText-small  {display: none;}
}

@media only screen and (max-width : 900px) {
.FRT-headlineText  {display: none;}
}


/* end hide elements */

/***** Accordion Titles *****/
@media only screen and (min-width : 1px) and (max-width : 767px) {
.widget--accordion__title {font-size: 1em;}
}

/***** End Accordion Titles *****/

/* toolkit top */
.grey {
	background-color: #e8eaf0 !important;
}
.OHP-home {
	 background-image: url("https://www.mohawkcollege.ca/sites/default/files/Marketing%20and%20Communications/convocation/heart-students-centre-2000x1200.jpg");
	background-position: center center;
    background-repeat: no-repeat;
background-size: 100%;
    background-color: #000000;
	display: block;
	overflow: auto;
	padding-bottom: 20px;
	margin-top: 30px;
clear: both;
}
.OHP-sub {
    background-color: #000000;
	display: block;
	overflow: auto;
	padding-bottom: 0px;
	margin-top: 30px;
	margin-bottom: 50px;
clear: both; 
}
.OHP-topArea {
    padding: 20px;
    overflow: auto;
	clear: both;
	margi-top: 30px;
}

.OHP-title {
    color: #990033;
    text-align: center;
    font-size: 300%;
    font-weight: bold;
    margin: 0;
    padding: 20px 0 0 0;
}
.OHP-title a:link {
text-decoration: none;
}
.OHP-headlineText {
    color: #ffffff;
    text-shadow: 1px 1px 35px #000000;
    font-size: 300%;
    text-align: left;
    margin: 0 20px;
    padding: 30px 20px;
    font-weight: bold;
    width: 50%;
	line-height: normal;
}

.OHP-subHeadlineText {
	color: #ffffff;
  text-shadow: 1px 1px 10px #000000;
	width: 50%;
	font-size: 125%;
	padding: 0 0 0 40px;
	
}

.full-screen-grey-cta-area.image-left > img
{margin-right: 1.5em;
}

/* BEGIN: OH+ Home Image Mobile Adjustments */
@media only screen and (max-width: 900px) {
  .OHP-headlineText,
  .OHP-subHeadlineText,
  .OHP-subHeadlineText {
    width: 100% !important;
    padding-right: 40px;
  }

  .OHP-headlineText{
    padding-top: 0px;
  }

  .OHP-homeImage {
    overflow-x: hidden;
  }

  .OHP-home {
    background-image: none !important;
  }

  .OHP-mobileImage{
    display: block;
  }
}
/* END: OH+ Home Image Mobile Adjustments */


/* end toolkit top */

.active {
  background-color: #990033;
  color: #ffffff !important;
}
.selected {
background-color: #990033;
  color: #ffffff !important;
}
.selected a {
text-decoration: none;
color: #ffffff !important;
}
.view-content {display: none;}
.anchor-buttons-container{
    width: 60%;
margin: 30px 0;
  }
  .anchor-button{
    display: inline-block;
  }
  .anchor-button a{
 font-size: 15px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
margin: 5px;
float: left;
background-color: #F1AA48;
color: black;
text-align: left;
  }
.twoColumnBlueSection {
background-color: #E7EFF9;
}
.blue {
background-color: #E7EFF9 !important;
padding: 20px;
border: 0px !important;
margin: 20px 0;
}
.red {
color: #990033 !important;
}
.card-list .card-list-item__inner {
    padding: 0 2em;
    margin: 0;
}
.vrlHeader {
background-image: url(https://www.mohawkcollege.ca/sites/default/files/Marketing%20and%20Communications/virtualRemoteLearning/vrlHeader-1900x600cropped.jpg);
background-repeat: no-repeat;
margin: 20px 0;
padding: 20px 50px 20px 0px;
background-position: top right;
background-size: cover;
}


.extra-h2-space {
font-size: 200%;
margin-top: 80px;
}


.full-screen-grey-cta-area {
  text-align: left;
	margin-top: 70px;
}

.50pxmargin {
  margin-bottom: 50px !important;
}

.card-list .card-list-item__inner {
  padding: 30px !important;
}

.full-width-link-padding-area a {
  color: #ffffff !important;
  font-weight: bold;
}

.full-video-box {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 30px;
  padding: 20px 20px 20px 20px;
}

.centered-list {
  width: 60%;
  margin: 0 auto;ottom
  margin-top: 30px;
  margin-bottom: 30px;
}

/* Mobile Optimizations */
@media only screen and (max-width: 900px) {
    /* Replace header image with background colour */
    /* Adjust left padding of header area */
    .vrlHeader{
        background-image: none;
        background-color: #2a3f52;
        padding-left: 5px;
    }

    /* Adjust font size of main heading */
    .evlHeader {
      font-size: 2.5em;
      width: 100%;
    }

    /* Full-Width Anchor Buttons */
    .anchor-buttons-container{
        width: 100%;
    }

    /* Remove unnecessary margin between cards in .twoColumnBlueSection */
    .twoColumnBlueSection .two-column-template .cta-box{
        margin-bottom: 0px !important;
    }

    /* Make grey video box full-width */
    .full-video-box {
      width: 100%;
    }

    /* Make centered list full-width */
    .centered-list {
      width: 100%;
    }
}

/***************************************/
/******** Page Specific Styling ********/

/* Remove white bar above header image */
.section-content { padding-top: 0px; }
.layout-content{
    position: relative;
    top: -20px;
}

/* highlight box */
.highlight-box-template {
margin: 0px !important;
}
h1 {
}

/* to create border on the card accordion accordions */
.border {
border-top: 1px solid #b8c1cb !important;
border-bottom: 1px solid #b8c1cb;
}
/* to reduce some padding on the card accordion illustrations*/
.card-list .card-list-item__inner {
    padding: 15px 30px !important;
}

/* to reduce the vertical spacing between card accordions

.card-list.card-accordion .card-list-item {
margin-top: 0px !important;
margin-bottom: 0px !important;
}*/
.card-list {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.blueCardAccordions {
background-color: #E7EFF9 !important;
}


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

/*accordions*/

.widget--accordion__title {
    font-size: 1em;
    font-weight: bold;
}

/* Event Schedule Styling */
.event-date {
  margin-bottom: 20px;
  padding: 20px 30px 20px 30px;
  background-color: #660033;
}

.event-date h2,
.event-date h3 {
  color: #ffffff;
  margin: 0px;
  padding: 0px;
  font-size: 1.5em;
}

.event-list {
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 30px;
}

/* YouTube Embed Container */
.embed-container { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden; 
  max-width: 100%; 
}

.embed-container iframe, .embed-container object, .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

/* Hide IBM Chat Bot */
.WatsonAssistantChatHost {
  display: none !important;
}



/* -------------- START Heading and Font styling -------------- */

.h1-custom-header {
	color: #fff;
	font-size: 250%;
}

@media only screen and (max-width : 900px) {
.h1-custom-header {
	width: 100%;
  }
}

@media only screen and (min-width : 901px) {
.h1-custom-header {
	font-size: 340%;
	margin: 0 40px;
	width: 50%;
  }
}

.h2-custom-style {
	font-size: 2em;
	line-height: 1.5;
	text-align: center;
	color: #603 !important;
} 



.h3-custom-style {
	text-align: center;
	color: #fff !important;
	padding-bottom: 10px;
}

.p-custom-header {
	color: #fff;
	font-size: 118%;
}

@media only screen and (max-width : 900px) {
 .p-custom-header {
	width: 100%;
  }
}

@media only screen and (min-width : 901px) {
 .p-custom-header {
 	margin: 0 40px;
	width: 50%;
  }
}

.p-custom-style {
	font-size: 115%;
	line-height: 1.5;
	text-align: center !important;
} 


/* -------------- END Heading and Font styling -------------- */

/* -------------- START Full Width styling -------------- */
.full-screen-grey-cta-area {
	margin-top: 20px !important;
}

@media only screen and (min-width : 320px) and (max-width : 480px) {
 .full-screen-grey-cta-area {
	padding: 0.1em 0;
  }
}

.full-screen-grey-cta-area:before {
	background-color: #000;
}

.full-screen-grey-cta-area:after {
	background-color: #000;
}

.full-screen-grey-cta-area {
	background-color: #000;
}

/* -------------- END Full Width styling -------------- */

.view-content {
	display: none;
}
/* .section-content { background-color: #000;} */

#block-audience {
	display: none;
}

/* --------------START Video Styling -------------- */

.responsive-75 {
    width: 75%;
    margin: 0 auto;
  }

  .responsive-iframe {
    overflow: hidden;
    position: relative;
    padding-top: 56.25%;
  }

  .responsive-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  @media only screen and (max-width: 980px) {
    .responsive-75 {
      width: 100%;
    }
  }
/* -------------- END Video Styling -------------- */



/* -------------- START MENU Overrides -------------- */

.OHP-navbar-flex {
justify-content: flex-start !important;
}

@media only screen and (min-width : 901px) {
 .OHP-navbar-flex {
margin-left: 40px !important;
  }
}

/* -------------- END MENU Overrides -------------- */