/* Custom CSS for 175-years.html */

/* Video Modal */
.modal-dialog {
  max-width: 800px;
  margin: 30px auto;
}

.modal-body {
  position:relative;
  padding:0px;
}

.close {
  position:absolute;
  right:-30px;
  top:0;
  z-index:999;
  font-size:2rem;
  font-weight: normal;
  color:#fff;
  opacity:1;
}

/* Timeline - Schools */
* {
  outline: none;
}

.timeline-carousel {
  margin: 0;
  background-color: #323232;
  /*font-family: "Roboto", sans-serif;*/
  font-weight: 400;
  padding: 86px 6.9444% 70px 6.9444%;
  position: relative;
  overflow: hidden;
}
.timeline-carousel:after, .timeline-carousel:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  height: 100%;
  width: 6.9444%;
  background-color: #323232;
  z-index: 3;
  width: 6.9444%;
}
.timeline-carousel:after {
  left: 0;
}
.timeline-carousel:before {
  right: 0;
  opacity: 0;
}
.timeline-carousel .slick-list {
  overflow: visible;
}
.timeline-carousel .slick-dots {
  bottom: -50px;
}
.timeline-carousel h1 {
  color: white;
  font-family: "Libre Franklin", sans-serif;
  font-weight: 700;
}
.timeline-carousel p {
  color: white;
  font-weight: 300;
}
.timeline-carousel__image {
  padding-right: 30px;
}
.timeline-carousel__item {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
.timeline-carousel__item .media-wrapper {
  opacity: 0.4;
  padding-bottom: 71.4%;
  -webkit-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  -o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.timeline-carousel__item:last-child .timeline-carousel__item-inner:after {
  width: calc(100% - 30px);
}
.timeline-carousel__item-inner {
  position: relative;
  padding-top: 45px;
}
.timeline-carousel__item-inner:after {
  position: absolute;
  width: 100%;
  top: 45px;
  left: 0;
  content: "";
  border-bottom: 2px solid rgba(13, 131, 132, 1);
}
.timeline-carousel__item-inner .year {
  font-family: sans-serif;
  font-size: 36px;
  line-height: 36px;
  color: white;
  display: table;
  letter-spacing: -1px;
  padding-right: 10px;
  background-color: #323232;
  z-index: 1;
  position: relative;
  margin: -15px 0 20px;
  font-weight: 700;
}
.timeline-carousel__item-inner .year:after {
  content: "";
  position: absolute;
  display: block;
  left: -10px;
  top: 0;
  height: 100%;
  width: 10px;
  background-color: #323232;
  z-index: 3;
}
.timeline-carousel__item-inner .month {
  font-family: 'Josefin Sans', 'PT Sans', Arial, sans-serif;
  font-size: .975em;
  text-transform: uppercase;
  color: #fff;
  display: block;
  margin-bottom: 1em;
  font-weight: 700;
  letter-spacing: -.01rem;
}
.timeline-carousel__item-inner p {
  font-family: 'PT Sans', Arial, sans-serif;
  font-size: .9em;
  line-height: 1.45;
  color: white;
  width: 65%;
  font-weight: 400;
  margin-bottom: 1em;
}

/*.timeline-carousel__item-inner .read-more {
  font-size: 12px;
  color: #ffc107;
  display: table;
  margin-bottom: 10px;
  font-weight: 900;
  text-decoration: none;
  position: relative;
}

.timeline-carousel__item-inner .read-more:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  border-bottom: 2px solid #ffc107;
  -webkit-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  -o-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}*/

.timeline-carousel__item-inner .read-more:hover:after {
  width: 100%;
}
.timeline-carousel__item-inner .pointer {
  height: 29px;
  position: relative;
  z-index: 1;
  margin: -4px 0 16px;
}
.timeline-carousel__item-inner .pointer:after, .timeline-carousel__item-inner .pointer:before {
  position: absolute;
  content: "";
}
.timeline-carousel__item-inner .pointer:after {
  width: 9px;
  height: 9px;
  border-radius: 100%;
  top: 0;
  left: 0;
  background-color: rgba(13, 131, 132, 1);
}
.timeline-carousel__item-inner .pointer:before {
  width: 2px;
  height: 100%;
  top: 0;
  left: 4px;
  background-color: rgba(13, 131, 132, 1);
}
.timeline-carousel .slick-active .media-wrapper {
  opacity: 1 !important;
}

.slick-dots {
  bottom: 0px;
  list-style: none;
  position: absolute;
  width: 100%;
  left: -30px;
  text-align: center;
  z-index: 2;
}
.slick-dots li {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  display: inline-block;
  margin: 0px 7px;
  position: relative;
  width: 10px;
  height: 10px;
}
.slick-dots li:last-child {
  margin-right: 0;
}
.slick-dots li.slick-active button {
  background: #aa7247;
  border-color: rgb(209, 131, 87);
  border-radius: 50%;
}
.slick-dots li button {
  display: block;
  font-size: 0;
  width: 10px;
  height: 10px;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  -o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.slick-dots li button:hover {
  background: #aa7247;
  border-color: #aa7247;
}

.link {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 20px;
  z-index: 9999;
}
.link a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
}
.link .fa {
  font-size: 28px;
  margin-right: 8px;
  color: #fff;
}

.slick-prev svg, .slick-next svg {
  height: auto;
  width: 18px;
  padding-bottom: 2px;
  fill: #fff;
}

.slick-prev .btn, .slick-next .btn {
  border-radius: 0;
  font-family: sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  background: #9d6a37;
  border: none;
}

.slick-prev, .slick-next {
  position: absolute;
  top: 0;
  z-index: 3;
  border-radius: 0;
  color: #fff;
  font-family: sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
}

.slick-prev {
  left: 0;
}

.slick-next {
  right: 28px;
}

/* Cards - Oral History Quotes */
.card-columns {
    -webkit-column-gap: 3rem !important;
    column-gap: 3rem !important;
}

.card-columns .card {
	/*background: #f8f9fa;*/
	background: #fff;
	border: none;
	margin-bottom: 3em !important;
	border-radius: 0;
}

.card-header, .card-footer {
	background: #fff;
	/*padding-right: 1.5em;
	padding-left: 1.6em;
	padding-bottom: 0rem;*/
	padding: 1.2rem 1.5rem .75rem 1.6rem;
}

.card img {
	border-radius: 0;
}

.cards-heading h2 {
	font-size: 2.65rem;
	line-height: 1.1;
}

.card h3 {
	font-family: 'Pt Sans', 'Arial', sans-serif !important;
    color: #283f44;
	font-weight: 400;
	font-size: 1.5rem;
	letter-spacing: -.05rem;
	line-height: 1.15;
	cursor: pointer;
}

.card-title .svg-inline--fa {
	color: #9d6a37;
	font-size: 1.25em;
	font-weight: 400;
	cursor: pointer;
	float: right;
}

/*.card-title [data-toggle="collapse"] .fas:before {   
  content: "\f35b";
}

.card-title [data-toggle="collapse"].collapsed .fas:before {
  content: "\f358";
}*/

.card-text {
	font-family: 'Merriweather', Georgia, Times New Roman, serif;
	color: #555;
	font-style: italic;
	font-size: .825rem;
	line-height: 1.85;
}

/*.card-text {
	font-family: 'Cormorant Garamond', Georgia, Times New Roman, serif;
	color: #000;
	font-style: italic;
	font-size: 1.15rem;
	line-height: 1.35;
}*/

.card .card-subtitle {
	font-family: 'PT Sans', sans-serif;
	font-size: .875rem;
	color: #555;
	letter-spacing: -.005rem;
}

.intro h2 {
	font-family: 'Merriweather', Georgia, Times New Roman, serif;
	font-weight: 600;
	font-size: 1.75rem;
	line-height: 1.15;
}

.intro .card-text {
	font-family: 'PT Sans', sans-serif;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.5;
}

/* Ken Burns Effect Slideshow - Farmington Today */
/**
 * See: http://www.css-101.org/articles/ken-burns_effect/css-transition.php
 */

/**
 * Styling the container (the wrapper)
 * 
 * position is used to make this box a containing block (it becomes a reference for its absolutely positioned children). overflow will hide part of the images moving outside of the box.
 */

#slideshow {
    position:relative;
    width:800px;
    height:400px;
    overflow:hidden;
	margin: 0 auto;
    /*border:8px solid #ccc;*/
}

@media (min-width: 992px) {
	.slideshow  {
		margin-right: -8em;;
	}
}

@media (max-width: 991px) {
	.slideshow  {
		margin-left: -4em;
	}
}

/**
 * Styling the images
 *
 * position:absolute is to put all images in a stack. Dimensions are set to increase the size of these images so their edges do not appear in the parent box when we move them inside the said box.
 * Because the images are now larger than their parent container, we use top, left and margin values to align them in the center of the box.
 * Finally, we set the transition (property and duration). Note that duration values are different for opacity and transform as we want the "fade-in" effect to be faster than the "panning" effect.
 */

#slideshow img {
    position:absolute;
    width:800px;
    height:400px;
    top:50%;
    left:50%;
    margin-left:-400px;
    margin-top:-200px;
    opacity:0;
    -webkit-transition-property: opacity, -webkit-transform;
    -webkit-transition-duration: 3s, 10s;
       -moz-transition-property: opacity, -moz-transform;
       -moz-transition-duration: 3s, 10s;
        -ms-transition-property: opacity, -ms-transform;
        -ms-transition-duration: 3s, 10s;
         -o-transition-property: opacity, -o-transform;
         -o-transition-duration: 3s, 10s;
            transition-property: opacity, transform;
            transition-duration: 3s, 10s;
}

/**
 * We change the point of origin using four corners so images do not move in the same direction. 
 * This technique allows us to create various paths while applying the same translate() values to all images (see the 'fx' class further below).
 */

#slideshow img  {
    -webkit-transform-origin: bottom left;
       -moz-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
         -o-transform-origin: bottom left;
            transform-origin: bottom left;
}

#slideshow :nth-child(2n+1) {
    -webkit-transform-origin: top right;
       -moz-transform-origin: top right;
        -ms-transform-origin: top right;
         -o-transform-origin: top right;
            transform-origin: top right;
}

#slideshow :nth-child(3n+1) {
    -webkit-transform-origin: top left;
       -moz-transform-origin: top left;
        -ms-transform-origin: top left;
         -o-transform-origin: top left;
            transform-origin: top left;
}
#slideshow :nth-child(4n+1) {
  -webkit-transform-origin: bottom right;
     -moz-transform-origin: bottom right;
      -ms-transform-origin: bottom right;
       -o-transform-origin: bottom right;
          transform-origin: bottom right;
}

/**
 * Because of the stacking context, we need to make sure that the first image (in source) is not hidden by the last one. 
 * The rule below moves all images past the second one down the stack. 
 * This is because the second image needs to show on top of the first one when it transitions in.
 */

#slideshow .fx:first-child + img ~ img  {
    z-index:-1;
}

/**
 * Because images are styled with a different point of origin, the following rule will create different panning effects.
 */

#slideshow .fx {
    opacity:1;
    -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
         -o-transform: scale(1.1);
            transform: scale(1.1);
}