/* https://codepen.io/andrewhawkes/pen/RwwOJrO */

.gloss::after {
    display: block;
    content: '';
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background: linear-gradient(226deg, rgba(245,245,245,0.4) 0%, rgba(245,245,245,0.4) 35%, rgba(245,245,245,0.2) 42%, rgba(245,245,245,0) 60%);
    transform: translateY(-20%);
    will-change: transform;
    transition: transform .65s cubic-bezier(0.18, 0.9, 0.58, 1);
}

.gloss:hover::after {
    transform: translateY(0%);
}

.lift-container {
    z-index: 1;
    width: 100%;
    perspective: 1000px;
}    

.lift {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
    transform-origin: top center;
    will-change: transform;
    transform: skewX(.001deg);
    transition: transform .35s ease-in-out;

  }
  
.lift-container:hover .lift {
    transform: rotateX(7deg) translateY(-6px); 
}
  

.lift-container::before {
    display: block;
    content: '';
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 6px 12px 12px rgba(0, 0, 0, 0.4);
    will-change: opacity;
    transform-origin: top center;
    transform: skewX(.001deg);
    transition: transform .35s ease-in-out, opacity .5s ease-in-out;
  }
  
.lift-container:hover::before {
    opacity: 0.6;
    transform: rotateX(7deg) translateY(-6px) scale(1.05);
}
  
/* https://codepen.io/JeremyWink/pen/LYPMLLV */

.shine {
  text-decoration: none;
  border: 1px solid silver;
  position: relative;
  overflow: hidden;
}

.shine:hover {
  box-shadow: 1px 1px 25px 10px rgba(255, 255, 255, 0.4);
}

.shine:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: all 650ms;
}

.shine:hover:before {
  left: 100%;
}

/* Timeline https://www.w3schools.com/howto/howto_css_timeline.asp */

/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  margin: 0 auto;
  border-radius: 0.4em;
  background-color: #6a93cb;
  background-image: linear-gradient(315deg, #6a93cb 0%, #a4bfef 74%);  
}

.timeline h3 {
   font-size: 24px;
   font-weight: bold;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.timeline .container {
  padding: 10px 40px;
  position: relative;
  width: 50%;
}

/* The circles on the timeline */
.timeline .container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid #FF9F55;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.timeline .left {
  left: 0;
  border-radius: 0.4em;
}

/* Place the container to the right */
.timeline .right {
  left: 50%;
  border-radius: 0.4em;
}

/* Add arrows to the left container (pointing right) */
.timeline .left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.timeline .right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.timeline .right::after {
  left: -16px;
}

/* The actual content */
.timeline .container .content {
  padding: .5em 1em;
  background-color: white;
  position: relative;
  border-radius: 6px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 1023px) {
/* Place the timelime to the left */
  .timeline::after {
    left: 31px;
  }

/* Full-width containers */
  .timeline .container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

/* Make sure that all arrows are pointing leftwards */
  .timeline .container::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

/* Make sure all circles are at the same spot */
  .timeline .left::after, .timeline .right::after {
    left: 15px;
  }

/* Make all right containers behave like the left ones */
  .timeline .right {
    left: 0%;
  }
}

.timeline .container h1, .timeline .container h2, .timeline .container h3, .timeline .container h4, .timeline .container h5 {
    margin: 0;
}

.timeline .container p {
    font-size: 10pt;
    margin-top: 0.5em;
    margin-bottom: 0;
}


/* Blockquote https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/ */

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #6a93cb; /*#ccc*/
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  position: relative;
  color: #6a93cb; /* #ccc */
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
  z-index: 1;
  top: 0;
  left: 0;
}
blockquote p {
  display: inline;
}


.highlight {
  background: #f9f9f9;
  border-left: 10px solid #e73716;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
  font-family: raleway,helvetica neue,sans-serif;
  font-size: 1em;
  line-height: 1.5em;
  text-align: justify;
  display: block;
}
.highlight:before {
  position: relative;
  color: #e73716;
  content: "🚩";
  font-size: 1.5em;
  line-height: 0.1em;
  margin-right: 0.25em;

  z-index: 1;
  top: 0;
  left: 0;
  font-family: Georgia,serif;
 
}
.highlight p {
  display: inline;
}
.highlight div {
    display: none;
}

.info {
  background: #f9f9f9;
  border-left: 10px solid #0078d7;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
  font-family: raleway,helvetica neue,sans-serif;
  font-size: 1em;
  line-height: 1.5em;
  text-align: justify;
  display: block;
}
.info:before {
  position: relative;
  color: #0078d7;
  content: "ℹ";
  font-size: 1.8em;
  line-height: 0.1em;
  margin-right: 0.25em;

  z-index: 1;
  top: 0;
  left: 0;
  font-family: Georgia,serif;
 
}
.info p {
  display: inline;
}
.info div {
    display: none;
}

.text-outline {
    text-shadow:
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}