/* ---- Global Element Styling ---- */


body, .section {
  background: #000000;
  color: #ffffff;
}
body:not(.front) .l-content .header, body:not(.front) .l-top .header {
  background-color: #000000;
}
body.front img {
  border-radius: 4px;
}
.ptc-parallax h2 {
  color: #ffffff;
}
@media screen and (min-width: 1250px) {
  .ptc-hero {
    background-size: cover;
    background-position: center;
  }
}
@media screen and (min-width: 600px) {
.ptc-hero div:not(.contextual-links-wrapper){
  top: 10%;
}
}
.dblue-box {
  background: rgba(0,0,0,.8);
}
.l-header {
  background-color: #000000;
}
.l-right.container {
  margin: unset;
}
@media (min-width: 48em) {
  .header-logo-wrapper {
    height: 3.5rem;
  }
}
.layout--ptc-full-screen-top .l-header img, .layout--ptc-full-screen-top-right .l-header img {
  height: 75%;
  margin: 10px;
}
.ptc-hero {
  background-image: url(../images/youth-logo.svg);
  background-blend-mode: inherit;
  background-color: #000000;
}
.block-hero {
  margin-bottom: 0;
}
.l-footer {
  border-top: 0;
  background: #000000;
}
body:not(.front) .l-footer {
  margin-top: 20px;
}
.block-system-main-menu a:hover {
  color: #d10f8e;
} 
a, .l-header a {
-webkit-transition: color 0.6s ease 0s;
transition: color 0.6s ease 0s;
    transition-property: color;
    transition-duration: 0.6s;
    transition-timing-function: ease;
    transition-delay: 0s;
}
.js .menu-dropdown > li {
  border-bottom-color: #d10f8e;
}
.ui-wrap.container {
  flex-direction: column-reverse;
}
@media (min-width: 48em) {
  .ui-wrap.container {
    flex-direction: row;
  }
}

/* ---- Block Object Color Options (TODO: NEEDS WORK/REFINEMENT)---- */

.container.gutters > .color-red {
	background: #ee4035;
	color: #ffffff;
	padding: 20px;
}
.color-red a {
	color: #ffffff;
}
.color-red .button {
  background: #20252e;
}
/* ---- Boxes ---- */
.container.gutters > .gray-box,
.black-box {
  background-color: #000000;
	color: #fff;
	padding: 20px;
}
.black-box.curriculum {
  border-top: 1px solid #d2d4d3;
}
.black-box-box a {
  color: #fff;
}
.black-box h2 {
  color: #fff;
}
.container.gutters > .gray-box,
.gray-box {
	background-color: #1a1a1a;
	color: #fff;
	padding: 20px;
}
.gray-box a {
  color: #fff;
}
.gray-box a:hover {
  color: #d10f8e;
}
.gray-box h2 {
  color: #fff;
}

.color-red .button, .gray-box .button, .black-box .button {
  display: table;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
}
/* ---- Views ---- */

@media screen and (min-width: 70em) {
  .views-exposed-form .views-exposed-widget, .views-bulk-form .form-item, .views-bulk-form .form-actions {
    padding: initial;
  }
}
.view-display-id-video_library .views-field-field-video, 
.view-display-id-video_library_block .views-field-field-video  {
  max-height: 400px;
  position: relative;
  border-radius: 5px;
}
.view-display-id-video_library .views-field-field-video .field-content,
.view-display-id-video_library_block .views-field-field-video .field-content {
  vertical-align: bottom;
}
view-display-id-video_library .views-field-field-video .field-content img,
.view-display-id-video_library_block .views-field-field-video .field-content img {
  border-radius: 4px;
}
img {
  transition: all 0.3s ease;
}
.views-field-field-video .field-content img {
  max-height: 100%;
  min-width: 100%;
}
@media screen and (min-width: 70em) {
  .views-field-field-video .field-content {
    width: 100%;
    height: 225px;
    margin: 1%;
  }
  .views-field-field-video .field-content img {
    max-height: 100%;
    min-width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ---- Buttons ---- */
.button, input.form-submit, input.button-primary, button.button-primary, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  background: #d10f8e;
  font-family: 'LatoWebBold', sans-serif;
  border-radius: 2px;
}
a.button {
  text-decoration: none;
}
input.form-submit, button.form-submit, .button {
  margin-right: 0;
}
/* ---- Pagers ---- */
.pager-first, .pager-previous, .pager-ellipsis, .pager-next, .pager-last, .pager-item {
  background: #d10f8e;
}

/* ---- Forms ---- */
.views-exposed-widget:not(.views-submit-button):not(.views-reset-button) {
  width: 100%;
}
.form-submit {
	font-weight: 700;
	cursor: pointer;
}
/* ---- Sumo Select styling ---- */
.SumoSelect {
  width: 100%;
	padding: 0 1em 0 0;
	color: #000000;
}
.SumoSelect .CaptionCont.SelectBox {
	border-radius: 4px;
	transition: all 0.3s ease;
	text-transform: uppercase;
	font-size: 14px;
}
.SumoSelect > .CaptionCont > label > i {
	background-image: url('../images/down-arrow.svg');
	width: 20px;
	background-size: 15px;
	top: 40%;
}
.SumoSelect:focus > .CaptionCont, 
.SumoSelect:hover > .CaptionCont, 
.SumoSelect.open > .CaptionCont {
	box-shadow: none;
	background: #E2E2E2;
}
.SumoSelect > .optWrapper > .options li.opt {
	padding: 12px 6px;
}
.SumoSelect > .optWrapper > .options li label {
	white-space: pre-wrap;
	line-height: 1.25;
	font-weight: 100;
}
.SumoSelect > .optWrapper.multiple > .options li.opt.selected span i, 
.SumoSelect .select-all.selected > span i, 
.SumoSelect .select-all.partial > span i {
	background-color: #5BCAEA;
}
.SumoSelect > .optWrapper.multiple > .options li.opt span i, 
.SumoSelect .select-all > span i {
	box-shadow: none;
}
.SumoSelect .search-txt {
	opacity: 0;
	visibility: hidden;
	transition: visibility .2s, opacity 0.2s linear;
}
.SumoSelect.open .search-txt {
	border: 1px solid #E2E2E2;
	padding: 10px 14px;
	border-radius: 10px 10px 0 0;
	opacity: 1;
	visibility: visible;
}
.SumoSelect > .optWrapper {
	box-shadow: none;
	border-radius: 0 0 10px 10px;
	position: relative;
	transition-property: all;
	transition-duration: .2s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
	visibility: hidden;
	height: 0;
	display: inherit;
	top: -7px;
	opacity: 0;
	
}
.SumoSelect.open > .optWrapper {
	visibility: visible;
	top: -7px;
	height: 100%;
	opacity: 1;
}
.SumoSelect > .optWrapper.multiple > .options li.opt {
	margin-bottom: 0;
}
.SumoSelect > .optWrapper > .options li.opt:hover {
	background: #F4F4F4;
}
.SumoSelect label {
	margin-bottom: 0;
}