/* Custom CSS for new Triton College website */
/* Example pages at uat.triton.wsoldev.com */

/*************************************************************/
/*Full width image panel */
.override {
	width: 100vw !important;
	margin-left: calc(-1 * ((100vw - 100%) / 2));
	max-height: 275px;
	overflow: hidden;
	display: flex;
	align-items: center;
}

/*************************************************************/
/* Full width gray band with margins for content */
.graywrap {
	width: 100vw !important;
	margin-left: calc(-1 * ((100vw - 100%) / 2));
	overflow: hidden;
	display: flex;
	align-items: center;
	background: #f7f7f7;
	padding: 0px 3%;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

 .graywrap .inner, .graywrap .section {
	padding-bottom: 0px;
	max-width: 100vw;
	/* display: flex; */
	/* padding-right: 20px; */
}

.graywrap .unit, .graywrap .bravo-media {
	padding: 0px 1em;
}

.graywrap p {
	margin: 1rem 0px 0px 0px;
}

/*************************************************************/
/* gets rid or iframe border in the only way Epi will respect */
iframe {
	border: 0;
}

.qless {
	height: 650px;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.qless iframe {
	height: 100%;
	width: 100%;
	border: 0;
	overflow: hidden;
}

@media (max-width:750px) {
  .qless {
    height: 960px;
  }
}

/*************************************************************/
/* makes iFrames inside of container responsive */

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
  z-index: 1;
  height: 1300px;
  max-width: 720px;
}
 
.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}


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


/*************************************************************/
/* obviously, this is the slideshow styling and button controls */

.mySlides {
/* 	height: auto; */
	width: auto;
	margin: auto;
	max-width: 100%;
	max-height: 600px;
}
.slide-control {
	text-align: center;
	padding-top: 10px;
}

/*************************************************************/
/* sets width of buttons to max, instead of adjusting by content (appends to WSOL css)  */
.btn, .btn-secondary {
	width: 100%;
}


@media only screen and (min-width: 680px) {
/* This is for desktop display of 4 columns of icons*/
[type=reset] {
	width: 48% !important;
}

[type=submit] {
	width: 48% !important;
}
}

/*************************************************************/
/* use .filldiv on a container around an image to make the image overflow container and fill to full size */
.filldiv {
    display: flex;
    justify-content: center;
/*     align-items: center; */
    overflow: hidden;
    margin-bottom: 3rem;
}
.filldiv img {
	object-fit: none;
    flex-shrink: 0;
    width: auto;
    min-width: 100%;
    height: auto;
    min-height: 100%
}

/*************************************************************/
/*use a div with full-width for gray bars. Use a narrow-block to scale it to normal width  */
.full-width {
  width: 100vw;
  position: relative;
  background: #f7f7f7;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.full-width .inner {
	margin: auto;
	padding-bottom: initial;
}

.narrow-block {
	max-width: 60rem;
	padding: 1.5rem;
	margin: auto;
}

/*************************************************************/
/*use with a span or text format to set text color to red  */
.red {
	color: #ba0c2f;
}

/*************************************************************/
/*hides some headings link lists  */

/* duped below, but without exclusion of home page h2*/
/*
.unit.FlexibleContent.size1of1.generalcontentblockdata h3, h2.section-header, .pride h3{
	display: none;
}
 */
 .unit.FlexibleContent.size1of1.generalcontentblockdata h3, .pride h3{
	display: none;
}

.hidden-override {
	display: initial !important;
}

.noheading h3 {
	display: none;
}

h3.linked {
	display: initial;
}

.copyright a {
	color: #b2b2b2;
	font-style: normal;
	font-weight: 200;
}

.chatcenter {
	text-align: center !important;
}

.center-div {
	text-align: center !important;
}

.hsi {
	margin: auto;
	text-align: center;
	max-width: 400px;
}

.hsi > img {
	width: 100%;
	max-width: 360px;
}


/*Reducing pad on low-level alerts on desktop only*/
@media screen and (min-width: 56em) {
	.alert {
		padding: 1.5rem !important;
	}
}