/* TILES */
.tile__section__outer { position: relative; display: block; width: 100%; border: 0px solid red;  text-align: left;  padding: 0px 0px;   }
.tile__section__outer--videos { display: flex; flex-direction: row; flex-wrap: wrap; align-content: stretch; padding: 0px 0px; }


.tile__each__outer { position: relative;  vertical-align: top; border: 0px solid white;  float: left; overflow: hidden;  opacity: 0; opacity: 1; }


.tile__each__outer--teacher_rating {   color: #ffffff;   }
.tile__each__outer--teacher_rating .tile__bg { background-color: #ec1c99; }
.tile__each__outer--resource_button { background-color: transparent; color: #ec1c99;    }
.tile__each__outer--resource_button p { text-align: center;   }

.tile__inner { position: absolute;  top: 16px; left: 16px; right: 16px; bottom: 16px;  overflow: hidden;  border-radius: 4px;   }
.pair_left .tile__inner { left: 0px; border-radius: 0px 4px 4px 0px; }
.pair_right .tile__inner { right: 0px; border-radius: 4px 0px 0px 4px;  }

.tcols_1.trows_1 {  padding-top: 25%; }
.tcols_1.trows_15 {  padding-top: 32.5%; }
.tcols_2.trows_2 { padding-bottom: 50%;  }
.tcols_2.trows_1 { padding-bottom: 25%;   }
.tcols_2.trows_15 { padding-bottom: 32.5%;   }
.tcols_3.trows_1 { padding-bottom: 25%;   }
.tcols_3.trows_15 { padding-bottom: 32.5%;   }
.tcols_1.trows_2 { padding-bottom: 50%;  }
.section__outer--4_column .tcols_1 { width: 25%;    }
.section__outer--3_column .tcols_1 { width: 33.33%;  }
.section__outer--4_column .tcols_2 { width: 50%; }
.section__outer--3_column .tcols_2 { width: 66.66%; }
.section__outer--4_column .tcols_3 { width: 75%; }
.section__outer--4_column .tcols_4, .section__outer--3_column .tcols_3 {  width: 100%;    }

.trows_auto { height: auto !important;  }
.trows_auto .tile__inner { position: relative;  top: auto; left: auto; right: auto; bottom: auto; margin: 16px;     }

.tile__bg { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; display: block;      }

.tile__image { position: relative; width: 100%;  height: 100%;  overflow: hidden;  background-repeat: no-repeat; background-position: 50% 50%; background-attachment: scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;  }
.tile__image img {    display: block; width: 100%;   }
.tile__image.half_height {  height: 50%; }
.tile__image--small { height: auto;  }
.tile__image--small img {  margin: 0px auto !important;  }

.tile--link:hover .tile__bg  { filter: brightness(70%); }
.tile--link:hover .tile__image {  filter: brightness(70%); }

.tile__text { position: relative; width: 100%;  display: block;  font-family: 'VAGRoundedNext-Light'; font-size: 24px; line-height: 28px;  padding: 30px 16px; text-align: left;    }
.tile--image .tile__text { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center;   }
.tcols_2 .tile__text { padding: 30px 32px;  }
.tile__text.no_padding {  padding: 0px 0px;  }

.tile__overlay__text { position: absolute; bottom: 0px; left: 0px; width: 100%; font-family: 'VAGRoundedNext-Regular'; font-size: 16px; line-height: 22px; background-color: rgba(41,41,41,0.85); color: #FFFFFF; padding: 8px 16px; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center;   }
.tile__overlay__text .title { font-family: 'VAGRoundedNext-SemiBold'; font-size: 30px; line-height: 30px; letter-spacing: 1px; padding-bottom: 2px;   }

.tile_title, .tile__title { font-family: 'VAGRoundedNext-SemiBold';  font-size: 30px;  line-height: 32px; padding-bottom: 8px; display: inline-block;   }

.tile__link {position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; z-index: 150;   }

.tile__each__outer a { color: #ec1c99; }
.tile__each__outer:hover a { color: #ec652c !important; }

.metric__each__outer { position: relative;  vertical-align: top;   border: 0px solid white;  float: left; overflow: hidden;  opacity: 0; opacity: 1; }


/* VIDEO TILES */
.tile--video {  padding: 16px !important; padding-bottom: 0px !important;  }
.tile--video.no_padding {  padding: 0px !important;  }


.tile--video .tile__inner { position: relative;  top: auto; left: auto; right: auto; bottom: auto;  overflow: hidden;  border-radius: 4px; width: 100%; height: 100%; display: flex; flex-direction: column; }
.tile--video.no_padding .tile__inner {  border-radius: 0px; }
.tile__video { position: relative; width: 100%; }

.tile--video .tile__overlay__text { position: relative; bottom: auto; left: auto; flex-grow: 1;  justify-content: flex-start; }
.tile--video .tile__overlay__text.even { background-color: #282828;  }
.tile--video .tile__overlay__text.odd { background-color: #3d3d3d;  }

.tile--video .tile__overlay__text p::after { display: none;    }

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

.videoWrapper {
  position: relative;
  width: 100%;
  height: 0;
  background-color: #000;
}

.videoWrapper169 {  padding-bottom: 56.25%;  }

.videoIframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}


.videoPoster {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: 0;
  outline: none;
  background-position: 50% 50%;
  background-size: 100% 100%;
  background-size: cover;
  text-indent: -999em;
  overflow: hidden;
  opacity: 1;
  -webkit-transition: opacity 800ms, height 0s;
  -moz-transition: opacity 800ms, height 0s;
  transition: opacity 800ms, height 0s;
  -webkit-transition-delay: 0s, 0s;
  -moz-transition-delay: 0s, 0s;
  transition-delay: 0s, 0s;
}

.videoPoster_image {
  position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
height: 100%; 
margin: 0;
padding: 0;
background-size: cover;
z-index: 0;
}


.videoPoster::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    border: 5px solid #FFFFFF;
    border-radius: 100%;
    -webkit-transition: border-color 300ms;
    -moz-transition: border-color 300ms;
    transition: border-color 300ms;
    display: none; 
    z-index: 1; 
  }
.videoPoster::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    margin: -25px 0 0 -15px;
    border-left: 40px solid #FFFFFF;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    -webkit-transition: border-color 300ms;
    -moz-transition: border-color 300ms;
    transition: border-color 300ms;
    display: none; 
    z-index: 1; 
  }
.videoPoster:hover::before,
.videoPoster:focus::before { border: 5px solid #ec1c99; display: block; }
.videoPoster:hover::after,
.videoPoster:focus::after { border-left: 40px solid #ec1c99; display: block;  }
.videoPoster:hover  .videoPoster_image { filter: brightness(50%);  }


.videoWrapperActive .videoPoster {
    opacity: 0;
    height: 0;
    -webkit-transition-delay: 0s, 800ms;
    -moz-transition-delay: 0s, 800ms;
    transition-delay: 0s, 800ms;
  }




.tile--pledge .tile__inner  {  display: flex; flex-direction: column; justify-content: center; }


@media only screen and (max-width: 500px) {
    .tcols_1.trows_1 { padding-top: 47%;    }
    .tcols_1.trows_15 { padding-top: 47%;    }
    .tcols_2.trows_2 { width: 50%;  padding-bottom: 47%;  }
    .tcols_2.trows_1 {  width: 100%;  padding-bottom: 60%;   }
    .tcols_2.trows_15 {  width: 100%;  padding-bottom: 100%;   }
    .tcols_3.trows_1 {  width: 100%;  padding-bottom: 60%;   }
    .tcols_3.trows_15 {  width: 100%;  padding-bottom: 60%;   }
    .tcols_1.trows_2 { width: 50%;  padding-bottom: 94%; }
  	.section__outer--4_column .tcols_1 { width: 100%;    }
  	.section__outer--3_column .tcols_1 { width: 100%;  }
  	.section__outer--4_column .tcols_2 { width: 100%; }

  	.section__outer--3_column .tcols_2 { width: 100%; }
  	.section__outer--4_column .tcols_3 { width: 100%; }
  	.section__outer--4_column .tcols_4, .section__outer--3_column .tcols_3 {  width: 100%;    }
    .tile__inner { top: 3%; left: 3%; right: 3%; bottom: 3%; }
    .trows_auto .tile__inner {  top: auto; left: auto; right: auto; bottom: auto; margin: 0px;     }
    .tcols_2.trows_1 .tile__inner { left: 1.5%; right: 1.5%; }
    .tile__section__outer { text-align: center;  font-size: 0px; line-height: 0px; padding: 24px 0px;  }
    .section__outer--low_pad .tile__section__outer  {  padding: 8px 0px;  }
    .section__outer--no_pad .tile__section__outer  {  padding: 0px 0px;  }
  	.tile__each__outer { padding: 8px 16px;  }
  	.tile__text { font-size: 18px; line-height: 24px; padding: 16px 16px; }
  	.tile__text.no_padding { padding: 16px 16px;   }
  	.tile__title, .tile_title { font-size: 24px; line-height: 26px; padding-bottom: 2px;   }
  
    .tile__overlay__text { font-size: 12px; line-height: 16px;   }
    .tile__overlay__text .title { font-size: 18px; line-height: 24px;   }
    
    
    .tcols_2.trows_2 {  padding: 8px !important;  }
    .tcols_2.trows_auto {  padding: 8px !important;  }
    .tcols_2.trows_2  .tile__inner { position: relative; top: auto; left: auto; right: auto; bottom: auto; }
    .tcols_2 .tile__text { padding: 24px 24px !important;   }
    .tile__each__outer.tcols_2.trows_2 .tile__image { height: calc(100vw - 32px) !important;  }
    
    .tcols_1.trows_1 {  padding: 8px !important;  }
    .tcols_1.trows_1  .tile__inner { position: relative; top: auto; left: auto; right: auto; bottom: auto; }
    .tcols_1.trows_1.pair_left { padding-top: 0px !important;   }
    .tcols_1.trows_1.pair_left .tile__inner { border-radius: 0px 0px 4px 4px; }
    .tcols_1.trows_1.pair_right { padding-bottom: 0px !important;  }
    .tcols_1.trows_1.pair_right .tile__inner  { border-radius: 4px 4px 0px 0px; }
    
    .tcols_1 .tile__text { padding: 24px 24px !important;   }
    .tile__each__outer.tcols_1.trows_1 .tile__image { height: calc(100vw - 32px) !important;  }
    
    .tcols_2.trows_1 {  padding: 8px !important;  }
    .tcols_2.trows_1  .tile__inner { position: relative; top: auto; left: auto; right: auto; bottom: auto; }
    .tcols_2 .tile__text { padding: 24px 24px !important;   }
    .tile__each__outer.tcols_2.trows_1 .tile__image { height: calc(50vw - 16px) !important;  }
    
    
    .tcols_1.trows_2 {  padding: 8px !important;  }
    .tcols_1.trows_2  .tile__inner { position: relative; top: auto; left: auto; right: auto; bottom: auto; }
    .tcols_1 .tile__text { padding: 24px 24px !important;   }
    
    .metric__each__outer { float: none; display: inline-block;   }
    .metric__each__outer.tcols_1.trows_1 { width: 50%;   }
    .metric__each__outer.tcols_1.trows_2 { width: 50%;  }
    
    .tile__image { height: auto;   }
    
}

@media only screen and (min-width: 501px) and (max-width: 580px) { /* BLUE */
  .section__outer--4_column .tcols_1 { width: 50%; }
  .section__outer--3_column .tcols_1 { width: 100%;  }
  .section__outer--4_column .tcols_2 { width: 100%; }
  .section__outer--3_column .tcols_2 { width: 100%; }
  .section__outer--4_column .tcols_3 { width: 100%; }
  .section__outer--4_column .tcols_4, .section__outer--3_column .tcols_3 {  width: 100%;    }
  .tcols_1.trows_1 { padding-top: 47%;    }
  .tcols_1.trows_15 { padding-top: 47%;    }
  .tcols_2.trows_2 { width: 50%;  padding-bottom: 47%; }
  .tcols_2.trows_1 {  width: 100%;  padding-bottom: 60%;   }
  .tcols_2.trows_15 {  width: 100%;  padding-bottom: 60%;   }
  .tcols_3.trows_1 {  width: 100%;  padding-bottom: 60%;   }
  .tcols_3.trows_15 {  width: 100%;  padding-bottom: 60%;   }
  .tcols_1.trows_2 { width: 50%;  padding-bottom: 94%; }

  .tile__inner { top: 3%; left: 3%; right: 3%; bottom: 3%; }
  .trows_auto .tile__inner {  top: auto; left: auto; right: auto; bottom: auto; margin: 0px;     }
  .tcols_2.trows_1 .tile__inner { left: 1.5%; right: 1.5%; }
  .tile__section__outer { text-align: center;  font-size: 0px; line-height: 0px; padding: 24px 0px;  }
  .section__outer--low_pad .tile__section__outer  {  padding: 8px 0px;  }
  .section__outer--no_pad .tile__section__outer  {  padding: 0px 0px;  }
  .tile__each__outer { padding: 8px 8px; float: none; display: inline-block;  font-size: 0px; line-height: 0px;  }
  .tile__text { font-size: 18px; line-height: 24px; padding: 16px 16px; }
  .tile__text.no_padding { padding: 16px 16px;   }
  .tile__title, .tile_title { font-size: 24px; line-height: 26px; padding-bottom: 4px;   }
  
  
  .tile__overlay__text { font-size: 14px; line-height: 21px;   }
  .tile__overlay__text .title { font-size: 21px; line-height: 28px;   }
  
  
  .tcols_2.trows_2 {  padding: 8px !important; width: 100%;  }
  .tcols_2.trows_2  .tile__inner { position: relative; top: auto; left: auto; right: auto; bottom: auto; }
  .tcols_2 .tile__text { padding: 16px 16px !important;   }
  .tile__each__outer.tcols_2.trows_2 .tile__image { height: calc(100vw - 32px) !important;  }
  
}

@media only screen and (min-width: 581px) and (max-width: 767px) { /* RED */
  
  .section__outer--4_column .tcols_1 { width: 50%; }
	.section__outer--3_column .tcols_1 { width: 100%;  }
  .section__outer--4_column .tcols_2 { width: 100%; }
	.section__outer--3_column .tcols_2 { width: 100%; }
	.section__outer--4_column .tcols_3 { width: 100%; }
	.section__outer--4_column .tcols_4, .section__outer--3_column .tcols_3 {  width: 100%;    }
	.tcols_1.trows_1 { padding-top: 47%;    }
  .tcols_1.trows_15 { padding-top: 47%;    }
	.tcols_2.trows_2 { width: 50%;  padding-bottom: 47%; }
	.tcols_2.trows_1 {  width: 100%;  padding-bottom: 47%;   }
  .tcols_2.trows_15 {  width: 100%;  padding-bottom: 47%;   }
  .tcols_3.trows_1 {  width: 100%;  padding-bottom: 47%;   }
  .tcols_3.trows_15 {  width: 100%;  padding-bottom: 47%;   }
  .tcols_1.trows_2 { width: 50%;  padding-bottom: 94%; }

	.tile__inner { top: 3%; left: 3%; right: 3%; bottom: 3%; }
  .trows_auto .tile__inner {  top: auto; left: auto; right: auto; bottom: auto; margin: 0px;     }
	.tcols_2.trows_1 .tile__inner { left: 1.5%; right: 1.5%; }
	.tile__section__outer { text-align: center;  font-size: 0px; line-height: 0px; padding: 24px 0px;  }
  .section__outer--low_pad .tile__section__outer  {  padding: 8px 0px;  }
  .section__outer--no_pad .tile__section__outer  {  padding: 0px 0px;  }
	.tile__each__outer { padding: 8px 8px; float: none; display: inline-block;  font-size: 0px; line-height: 0px;  }
	.tile__text { font-size: 18px; line-height: 24px; padding: 16px 16px; }
	.tile__text.no_padding { padding: 16px 16px;   }
	.tile__title, .tile_title { font-size: 24px; line-height: 30px; padding-bottom: 4px;   }
  
  .tile__overlay__text { font-size: 14px; line-height: 21px;   }
  .tile__overlay__text .title { font-size: 21px; line-height: 28px;   }
  
  
  .tcols_2.trows_2 {  padding: 8px !important; width: 100%;  }
  .tcols_2.trows_2  .tile__inner { position: relative; top: auto; left: auto; right: auto; bottom: auto; }
  .tcols_2 .tile__text { padding: 16px 16px !important;   }
  .tile__each__outer.tcols_2.trows_2 .tile__image { height: calc(100vw - 32px) !important;  }
  
}

@media only screen and (min-width:  768px) and (max-width: 840px)   { /* PINK */
  
    .tcols_2.trows_1 {    padding-bottom: 50%;   }
    .tcols_2.trows_15 {    padding-bottom: 50%;   }
  	.tile__inner { top: 8px; left: 8px; right: 8px; bottom: 8px; }
    .trows_auto .tile__inner {  top: auto; left: auto; right: auto; bottom: auto; margin: 8px;     }
  	.tile__text { padding: 16px 16px; }
  	.tile__text.no_padding { padding: 16px 16px;   }
  	.tile__title, .tile_title { font-size: 21px; line-height: 25px; padding-bottom: 4px;    }
  
    .tile__overlay__text { font-size: 14px; line-height: 21px;   }
    .tile__overlay__text .title { font-size: 21px; line-height: 28px;   }
    .tile__section__outer { padding: 24px 8px;    }
    .section__outer--low_pad .tile__section__outer  {  padding: 8px 8px;  }
    .section__outer--no_pad .tile__section__outer  {  padding: 0px 0px;  }
    
    .tcols_2.trows_2 { padding: 8px !important;  width: 100%;  }
    .tcols_2.trows_2  .tile__inner { position: relative; top: auto; left: auto; right: auto; bottom: auto; }
    .tcols_2 .tile__text { padding: 16px 16px !important;   }
    .tile__each__outer.tcols_2.trows_2 .tile__image { height: calc(100vw - 32px) !important;  }
    
    
    .tcols_1.trows_1 { width: 50%; padding-top: 50%; }
    .tcols_1.trows_15 { width: 50%; padding-top: 50%; }
    .tcols_1.trows_2 { width: 50%; padding-top: 50%; }
    .tcols_2.trows_1 { width: 100%; padding-bottom: 50%;}
    .tcols_2.trows_15 { width: 100%; padding-bottom: 60%;}
    .tcols_3.trows_1 { width: 100%; padding-bottom: 50%;}
    .tcols_3.trows_15 { width: 100%; padding-bottom: 50%;}
  
}

@media only screen  and (min-width: 841px) and (max-width: 1000px)  { /* YELLOW */
  .tcols_2.trows_1 { padding-bottom: 25%;   }
  .tcols_2.trows_15 { padding-bottom: 37.5%;   }
  .tile__inner { top: 8px; left: 8px; right: 8px; bottom: 8px; }
  .trows_auto .tile__inner {  top: auto; left: auto; right: auto; bottom: auto; margin: 8px;     }
  .tile__text { font-size: 16px; line-height: 19px; padding: 12px 12px; }
  .tile__text.no_padding { padding: 12px 12px;   }
  .tile__title,  .tile_title { font-size: 19px; line-height: 23px; padding-bottom: 4px; }

  .tile__overlay__text { font-size: 14px; line-height: 21px;   }
  .tile__overlay__text .title { font-size: 21px; line-height: 28px;   }
  
  .section__outer--low_pad .tile__section__outer  {  padding: 8px 8px;  }
  .section__outer--no_pad .tile__section__outer  {  padding: 0px 0px;  }
  
  .section__outer--full_width .tcols_1.tile--video { width: calc(100% / 2);    }
  
}

@media only screen  and (min-width: 1001px) and (max-width: 1300px)  { /* BLACK */
  .tcols_2.trows_1 {    padding-bottom: 25%;   }
  .tile__inner { top: 8px; left: 8px; right: 8px; bottom: 8px; }
  .trows_auto .tile__inner {  top: auto; left: auto; right: auto; bottom: auto; margin: 8px;     }
  
  .tile__text { font-size: 18px; line-height: 22px; padding: 16px 16px; }
  .tile__overlay__text { font-size: 14px; line-height: 21px;   }
  .tile__overlay__text .title { font-size: 21px; line-height: 28px;   }
  
  .tile__overlay__text { font-size: 14px; line-height: 21px;   }
  .tile__overlay__text .title { font-size: 21px; line-height: 28px;   }
  .tile__section__outer { padding: 24px 8px;    }
  .section__outer--low_pad .tile__section__outer  {  padding: 8px 8px;  }
  .section__outer--no_pad .tile__section__outer  {  padding: 0px 0px;  }
  
  .tile__title, .tile_title { font-size: 21px; line-height: 25px; padding-bottom: 4px;    }
  .section__outer--full_width .tcols_1.tile--video { width: calc(100% / 3);    }
}