/* change text-selection style. cannot combine */
::-moz-selection { background: #931420; text-shadow: none; color: white; }
::selection { background: #931420; text-shadow: none; color: white; }

p.blu {
	color: #004063; font-style: italic; font-weight: bolder;
}
h2.blu {
	color: #004063;
}


#cta, #cta2 {
	background-color: #eae6dc;
	padding: 1.5em;
	margin-top: 1em;
}

#cta input, #cta2 input, #cthx button {
	width: 17vw;
	height: 4vw;
	min-height: 2.5em;
	padding: 1vw;
	margin: 1vw;
	min-width: 10em;
	color: #FFF;
	font-size: 125%;
	font-weight: bolder;
	border: 2px solid #eae6dc;	
	background-color:  #004063;
	-webkit-box-shadow: 5px 5px 8px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 5px 5px 8px 0px rgba(0,0,0,0.5);
	box-shadow: 5px 5px 8px 0px rgba(0,0,0,0.5);
	cursor: pointer;
	transition: border 0.5s ease;
	transition: font-size 0.5s ease;
	transition: box-shadow 0.5s ease;
}

#cta input:hover, #cta2 input:hover, #cthx button:hover {
	font-size: 135%;
	border: 2px solid #004063;
	-webkit-box-shadow: 5px 9px 11px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 5px 9px 11px 0px rgba(0,0,0,0.5);
	box-shadow: 5px 9px 11px 0px rgba(0,0,0,0.5);
}


/* Lightbox */
.lightbox { position: fixed; z-index: 99; top: 0; left: 0; right: 0; bottom: 0; padding: 1em; background: rgba(0, 0, 0, 0.9); align-items: center; justify-content: center; text-decoration: none;}
.lightbox:hover { background: rgba(0, 0, 0, 0.9); }
.lightbox:target { display: flex;; }
.lightbox span {
	background: #FFF; padding: 4px;
	text-decoration: none !important; color: #222;
	max-width: 90vw;
	max-height: 90vh;
	text-align: center;
}
.lightbox span img {
	max-width: 100%;
	height: auto;
}

@media only screen and (min-width: 801px) {
	section.unpad {
		position: relative;
		margin-top: -9em;
		margin-bottom: 2em;
	}
	section.unpad h2, section.unpad div.upbord {
		width: 100%;
		padding: 1vw;
		background-color: #FFF;
	}
	section.unpad h2 {
		margin: 0 0 0 -.475em;
		opacity: .92;
		border: 2px solid #999;
		border-bottom: 1px dotted #BBB;
		border-radius: 9px 9px 0px 0px;
		-moz-border-radius: 9px 9px 0px 0px;
		-webkit-border-radius: 9px 9px 0px 0px;
	}
	section.unpad div.upbord {
		margin: 0 0 0 -1em;
		border: 2px solid #999;
		border-top: 0;
		border-radius: 0px 0px 9px 9px;
		-moz-border-radius: 0px 0px 9px 9px;
		-webkit-border-radius: 0px 0px 9px 9px;
	}
	section.unpad div.upbord p:first-child {
		margin-top: 0;
	}
	section.unpad p {
		background-color: #FFF;
	}
	section.unpad .collapse p {
		background-color: #eae6dc;
	}
}

table { border-collapse: collapse; border-spacing: 0; margin-bottom: 1em; }
table td { border: 1px solid #BBB; padding: 0.2em 0.5em; }
caption { display: table-caption; text-align: -webkit-center; font-style: italic; }

/* youtube full width */
#yt {
	display: block;
	padding-bottom: 1em;
}
#yt img {
	width: 100%;
	height: 55%;
	aspect-ratio: 1280 / 720;
	border: 2px solid transparent;
	transition: border 0.5s ease;
}
#yt img:hover, #bx img:hover {
	border: 2px solid #004063;
	cursor: pointer;
}

#yt img, #bx img {
	border-radius: 9px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
}

.x { /* flexbox container */
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;
    -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
    -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
    -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center;
    -webkit-align-items: center; -ms-flex-align: center; align-items: center;
}


/* COLLAPSE */
.collapse-content { width: 100%; margin: 1em auto; }

.collapse { background: #eae6dc; border: 1px solid #BBB; margin: 0.8em 0; }

.collapse h3 { margin: 0; }

.collapse p, .collapse p.blu { background-color: #eae6dc; }

.collapse a.toggler {
  display: block;
  font-size: 1.1rem;
  font-weight: bolder;
  padding: 0.6rem 1.2rem;
  margin-left: 22px;
  color: #931420;
  position: relative;
  text-decoration: none;
}
.collapse a.toggler:hover { text-decoration: underline; background: none; }

.collapse a.toggler:before {
  content: "";
  border-left: 7px solid #931420;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  position: absolute;
  top: 11px;
  left: 11px;
  margin-left: -22px;
}

.inner-content {
  padding: 0 1.2rem;
}

.content {
  max-height: 0em;
  transition: 0.3s linear 0s;
  overflow: hidden;
}

.collapse + .collapse a.toggler {
  /* border-top: 1px solid rgba(255, 255, 255, 0.7); */
}

.collapse:target .content {
  max-height: none;
}

.collapse:target a.toggler:before {
  transform: rotate(90deg);
}


/* Video Overlay */
.overlay-video{display:none;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;-ms-transition:opacity 600ms ease-in;transition:opacity 600ms ease-in;-ms-transition:opacity .6s;transition:opacity .6s;position:fixed;top:0;left:0;height:100%;width:100%;background:rgba(0,0,0,.7);z-index:98}.o1{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1;-ms-transition:opacity 600ms ease-out;transition:opacity 600ms ease-out;-ms-transition:opacity .6s;transition:opacity .6s}.videoWrapperExt{position:relative;top:50%;left:50%;-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);max-width:982px;padding:0 20px}.videoWrapper{position:relative;padding-bottom:56.25%;height:0}.videoWrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}

#wy {
	padding-top: 1em;
}


/* Student profiles */
#st {
	position: relative;
	background-color: #eae6dc;
	z-index: 0;
	padding: 1em 1em 0 1em;
	overflow: hidden;
	border-top: 3px solid #BBB;
	padding: 3em 0;
	text-align: center;
}
#st a { display: block; }
#st .x { flex-wrap: nowrap; }
#st img {
	width: 20vw;
	height: 20vw;
	margin: 1vw;
	border: .3vw solid #FFF;
	border-radius: 30vw;
}
#st a:hover {
	background: none;
}
#st a img {
	transition: background-color 0.5s ease;
}
#st a:hover img {
	border: .3vw solid #931420;
}
#st h3 {
	text-align: center;
}

/* by the numbers */
#btn {
	text-align: center;
	background-color: #444;
	padding: 1em 1em 3em 1em;
	color: #eae6dc;
	border-top: 9px solid #222;
	border-bottom: 9px solid #222;
}

#btn h2 {
	color: #eae6dc;
}
.bnx {
	width: 15vw;
	height: 11vw;
	margin: 0 .5em;
	padding: 0;
}
.xn {
	margin: 0 auto;
	width: 8vw;
	font-size: 4vw;
	font-weight: bolder;
	border-bottom: 1px dotted #eae6dc;
}
.xl {
	padding-top: 1em;
}
@media only screen and (max-width: 950px) {
	.bnx {
		width: 10em;
		height: 8em;
	}
	.xn {
		width: 2.5em;
		font-size: 180%;
		font-weight: bolder;
	}
}
@media only screen and (max-width: 685px) {
	#btn {
	}
	.bnx {
	}
}


/* bethany experience */
#bx { text-align: center; }
#bx h2 { margin-bottom: 0; }
#bx div div { margin-top: 1em; font-weight: bolder; }
#bx img { width: 30vw; height: calc(30vw*(9/16)); margin: 0 1vw; transition: border 0.5s ease; border: 2px solid transparent; }
@media only screen and (max-width: 950px) { #bx img { width: 46vw; height: calc(46vw*(9/16)); margin: 0.5em 1vw; } }
@media only screen and (max-width: 685px) { #bx img { width: 66vw; height: calc(66vw*(9/16)); margin: 0.5em 1vw; } }

#bxmore { text-align: right; font-style: italic; size: 90%; padding-right: .5em; margin: .5em 0; }
@media only screen and (max-width: 600px) { #bxmore { text-align: center; padding-right: 0; } }

	
#ctfe {
	width: 20em;
}

#ctfe button {
	padding: 1vw;
	color: #FFF;
	font-size: 125%;
	font-weight: bolder;
	border: 2px solid #eae6dc;	
	background-color:  #931420;
	-webkit-box-shadow: 5px 5px 8px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 5px 5px 8px 0px rgba(0,0,0,0.5);
	box-shadow: 5px 5px 8px 0px rgba(0,0,0,0.5);
	cursor: pointer;
	transition: border 0.5s ease;
	transition: font-size 0.5s ease;
	transition: box-shadow 0.5s ease;
}

#ctfe button:hover {
	font-size: 135%;
	-webkit-box-shadow: 5px 9px 11px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 5px 9px 11px 0px rgba(0,0,0,0.5);
	box-shadow: 5px 9px 11px 0px rgba(0,0,0,0.5);
}

#ctem {
	width: 19em;
	margin-left: 1em;
}
/* FORM */

#cthx:target {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#cthx div {
	text-align: center;
	padding: 5em 2em;
	font-size: 120%;
	border: 2px solid #004063;
	background-color: #FFC;
	margin-left: 9px;
}
#cthx p {
	color: #004063;
	background-color: inherit;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bolder;
}

label { display: block; font-weight: bolder; margin: .5em 0 0 .2em;}
input { display: block; }
textarea { width: 12em; height: 5em; }

#hta {
	margin-bottom: 3em;
}

#ct div {
	margin: 0 1em;
	text-align: center;
}

#ctsm div {
	padding: 0 1em;
}

footer { text-align: center; }
footer img { padding: 1em; }

/* Style adjustments for high resolution devices
@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {

}
 */
 
/* Print styles */ @media print {
    *,*::after,*::before {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important
    }

    a,a:visited {
        text-decoration: underline
    }

    a[href]::after {
        content: " (" attr(href) ")"
    }

    a[href^="#"]::after,a[href^="javascript:"]::after {
        content: ""
    }

    thead {
        display: table-header-group
    }

    img,tr {
        page-break-inside: avoid
    }

    h2,h3,p {
        orphans: 3;
        widows: 3
    }

    h2,h3 {
        page-break-after: avoid
    }

	.collapse-content { width: 99%; margin: 1em auto; }
	.content { max-height: none; } 
	.collapse { background: none; border: 1px solid #BBB; margin: 0.5em 0; }
	.collapse a.toggler:before { transform: rotate(90deg); }

}

/* screen reader only class if needed */
.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px
}