@charset "UTF-8";
/* CSS Document
Client: Lil' Drug Store / Preston Kelly
Company: Informatics, Inc
Author: JS
Date: December 2021
*/

/* TYPOGRAPHY */
@font-face {
  font-family: 'gothambold';
  src: url('../woff2/gotham-bold-webfont.woff2') format('woff2'),
       url('../woff/gotham-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'gothambook';
  src: url('../woff2/gotham-book-webfont.woff2') format('woff2'),
       url('../woff/gotham-book-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
:root {
--gold: #fcb813;
--ornage: #f7931e;
--blue: #0071bc;
--green: #00a99d;
--lightgray: #d8d8d8;
--darkgray: #595959;	
--dreamblue: #00aced;
--dreamgreen: #89c33e;
--transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#giving h1, #giving h2, #giving h3 {text-transform: uppercase;}
#giving h1 strong, #giving h3 strong {font-family: 'gothambold';}
#giving h1, #giving h2, #giving {font-family: 'gothambook';}
#giving h1 span, #giving h2 span {font-family: 'gothambold';}
#giving header {text-align: center; background: var(--dreamblue); margin: 0 0 25px 0; position: relative; z-index: 5;}
#giving header h1 {color: #fff; margin: 0; padding: 25px 0; font-weight: 400;}
#giving header img {width: 80px; position: absolute; left: calc(50% - 225px); top: 5px; z-index: -1; mix-blend-mode: multiply; opacity: .5;}
#giving header a {display: block; color: #fff; position: relative; top: -15px;}
#giving .container {margin: 50px auto; font-size: 18px;}
#giving h2, #giving h3 {text-transform: uppercase; font-weight: 500; color: var(--dreamblue);}
#giving h3 {font-size: 21px; color: var(--dreamblue);}
#giving ul {list-style: square; padding: 0 0 0 25px;}
#giving ul li::marker {color: var(--dreamblue);}
#giving ul a {color: rgb(0, 0, 0); text-decoration: underline; display:  block; padding: 3px;}
#giving .skinny img {margin: 0 0 50px 0; box-shadow: 10px 10px 0 #fff, 15px 15px 0 var(--dreamblue); width: auto; height: auto;}
.two-col {display: grid; grid-template-columns: 1fr 1fr;}

.btn-dream a {background: var(--dreamblue); padding: 10px 15px; color: #fff; display: inline-block; font-weight: 700; text-transform: uppercase; border-radius: 20px;}
.btn-dream a:hover {background: var(--blue); text-decoration: none;}

.dreamwork {background: #000; padding: 25px; display: grid; gap: 25px; margin: -25px 0 25px 0;}

.video-link {position: relative; display: block; color: #fff; text-transform: uppercase; background: #000; overflow: hidden;}
.video-link .overlay {position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; flex-direction: column; text-align: center; z-index: 5;}
.video-link i {font-size: 4rem; color: #fff; margin: 0 0 1rem 0;}
.video-link p {margin: 0; font-weight: 600; letter-spacing: 2px;}
.video-link img {opacity: .6; transition: var(--transition);;}
.video-link:hover {color: #fff;}
.video-link:hover img {opacity: .8; transform: scale(1.05);}

.img-combo {position: relative; padding: 0 75px 125px 0; margin: 0 0 25px 0;}
.img-combo img:nth-of-type(2) {position: absolute; bottom: 0 ; right: 25px; width: 50%; border: 15px solid #fff; border-bottom: none; z-index: 5; border-right: none;}
.img-combo:after {width: 75px; height: 75px; background: var(--dreamgreen); position: absolute; bottom: 75px; left: 75px; content: ""; border: 10px solid #fff;}

.dream-nav {display: grid; gap: 15px;}
.dream-nav a {background: var(--dreamblue); display: block; color: #fff; text-transform: uppercase; display: grid; grid-template-columns: 100px auto; gap: 25px; align-items: center; font-size: 2.5rem; border-radius: 5px; box-shadow: 5px 5px 15px rgba(0,0,0,.1);}
.dream-nav a span {background: #fff; padding: 15px; border-radius: 50%; width: 110px; height: 110px; object-fit: contain; transition: var(--transition); display: flex; justify-content: center;}
.dream-nav a:nth-child(2n) span {background: #8bc53f;}

.dream-nav a:hover {background: var(--blue); text-decoration: none;}
.dream-nav a:hover span {transform: scale(1.1);}

.explore {border-bottom: 1px solid #ccc; text-align: center; margin: 2rem 0 2.5rem 0;}
.explore span {display: inline-block; padding: 5px 10px; background: #fff; position: relative; bottom: -17px;}

.project-item {position: relative; margin: 145px 0 0 0;}
.project-item .text {background: var(--dreamblue); color: #fff; padding: 25px; position: relative;}
.project-item .text h3 {color: #fff !important; text-transform: uppercase !important; font-size: 2.5rem;}
.project-item .project-logo {width: 250px; height: 250px; padding: 22px; border-radius: 50%; border: 5px solid var(--dreamblue); display: flex; justify-content: center; flex-direction: column; background: #fff; position: absolute; top: -125px; left: calc(50% - 125px); box-shadow: 5px 5px 25px rgba(0,0,0,.1);}
.project-item .text a {display: inline-block; padding: 10px 15px; background: #fff; color: var(--dreamblue); border: 2px solid #fff; font-family: 'gothambold'; text-transform: uppercase; display: inline-flex; align-items: center; align-self: flex-start;}
.project-item .text a i {font-size: 2rem; margin: 0 5px 0 0;}
.project-item .text a:hover {background: #d4effc; text-decoration: none;}

.team-list {display: grid; grid-template-columns: repeat( auto-fit, minmax(205px, 1fr) ); grid-template-rows: repeat( auto-fit, 200px); gap: 35px;}
.team-list .empty {display: none;}
.team-item {border: 3px solid var(--dreamblue); border-top: none; border-right: none; padding: 0 0 15px 15px; grid-row: span 2; margin: 25px;}
.team-item img {margin: 0 0 15px 0;}
.team-item p {margin: 0; font-size: 11px;}
.team-item:hover { cursor: pointer;}

.fact-item {background: var(--dreamblue); color: #fff; padding: 25px;border: 2px solid var(--dreamblue); display: flex; justify-content: center; flex-direction: column;}
.fact-item:nth-of-type(even) {background: #fff; color: var(--dreamblue);}
.fact-item p {margin: 0; text-transform: uppercase;}
.fact-item p strong {font-size: 3rem;}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.dreamwork {display: grid; grid-template-columns: 1fr 1fr;}
.fact-grid {display: grid; grid-template-columns: 1fr 1fr 1fr; }
.fact-item p strong {font-size: 5rem; display: block;}

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
.dreamwork {padding: 0;}
.dreamwork .col {display: flex; justify-content: center; flex-direction: column; align-items: center;}
.dreamwork .logo {max-width: 400px; float: right; display: block;}

.dream-nav {grid-template-columns: 1fr 1fr 1fr;}
.dream-nav a {padding: 15px; font-size: 1.75rem;}

.project-item {background: #d4effc; padding: 50px 0 100px 0; position: relative; overflow: hidden;}
.project-item .text {position: absolute; left: 50px; bottom: 50px; width: 40%; font-size: 12px; border: 5px solid #fff; padding: 25px; z-index: 5; padding-top: 45px;}
.project-item .text p {text-align: justify;}
.project-item .bkg-img {width: 85%;}
.project-item:after {content: ""; border: 5px solid var(--dreamblue); position: absolute; right: calc(15% - 15px); bottom: calc(100px - 15px); width: 60%; height: 40%; border-top: none; border-left: none;}
.project-item .project-logo {width: 200px; height: 200px; left: auto; right: calc(15% - 105px); top: calc(50% - 125px); z-index: 5;}

.project-item:nth-of-type(even) .bkg-img {float: right;}
.project-item:nth-of-type(even) .text {left: auto; right: 50px;}
.project-item:nth-of-type(even) .project-logo {right: auto; left: calc(15% - 105px);}
.project-item:nth-of-type(even):after {right: auto; left: calc(15% - 15px); border-left: 5px solid var(--dreamblue);}

.project-item .text a {position: absolute; right: 50px; top: -25px; font-size: 16px;}

.team-item:nth-of-type(odd) {position: relative; top: 125px;}
.team-list {padding-bottom: 75px;}
.team-list .empty {display: block;}
.fact-item p strong {font-size: 7rem; display: block; margin: -10px 0;}

#giving .skinny .img-right {max-width: 50%; float: right; margin: 0 0 15px 25px;}
#giving .skinny .img-left {max-width: 50%; float: left; margin: 0 25px 25px 0;}
#giving .lead {font-size: 24px; line-height: 1.6;}
#giving {font-size: 24px;}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
#giving h1 {font-size: 36px;}
}


/* Changes Sent By the Client on 12/3/2021 */
#giving h2, #giving h3 {
  letter-spacing: 3px;
}
#giving header h1 {
  letter-spacing: 3px;
}

.dream-nav a:nth-child(2n) {
  background: #fff !important;
  color: var(--dreamblue);
  border: 2px solid var(--dreamblue);
}



.dream-nav {
  gap: unset;
}

.dream-nav a {
  border-radius: 0px !important;
  padding: 15px;
}

.video-link2 {
  color: unset;
}
.video-link2:hover {
  text-decoration: none;
  color: unset;
}
.project-item p {
  text-align: justify;
}
.project-item .text a {
  border-radius: 50px;
}
.fact-grid {
  margin-bottom: 80px;
}

@media (max-width: 425px) {
  .dream-nav a {
    font-size: 1.4rem;
  }
}

.dream-nav strong {
  font-family: 'gothambold';
}