/*
Project: Ella McCrea Portfolio Website;
Description: Standard reset, framework, and global site styles;
Author: Ella McCrea & Paul Capetola;
Version: 7.13.2020;

 * This is subpage css for moledraw
 */
/* ================================================================================================== */

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
#1.0.0 - Color, Sizing, specific 
#
--------------------------------------------------------------*/
.BAFS .hero {
	background-image: url(images/BAFS-hero.png);
  background-position: 115% top;
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: 120%;
  background-size: calc(100% - 90px);
  height: 622px;
  position: relative;
}

.hero .headerLine {
  position: relative;
  width: 625px;
  max-width: 100%;
  bottom: -446px;
  z-index: 1;
}

/* layer between text and bk image*/
.hero:after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(180deg, rgba(82,97,210,0.00) 0%, rgba(218,220,255,0.5)100%);
  bottom: 0;
  z-index: 0;
}
 
/* last color section on each page */
.last {
  background-image: linear-gradient(270deg, #E9ECFD 0%, #D1D4FD 100%);
}
/* unique page color for titles */
.BAFS figcaption, .BAFS h2, .BAFS h3 {
  color:#828BFA;
}

/* Headline specific sizing if you need it */ 
.final-app {
  width: 75vw;
  max-width: 75vw;
}


/*--------------------------------------------------------------
#2.0.0 - Media Specific 
--------------------------------------------------------------*/
@media screen and (max-width: 991px) {
  .last img.final-app:first-child {
    margin-top: 15px;
    width: 100%;
    max-width: 100%;
    position: relative;
    right: -15px;
  }
}
@media screen and (max-width: 767px) {
  .hero {
    height: 450px;
    background-size: cover;
  }
  .hero .headerLine {
    bottom: -280px;
  }
  .last { margin-top: 48px; }
  .destination h3.headerLine {
    margin-top: 60px;
  }
  .last img:first-child { padding-top: 15px; }
}

@media screen and (max-width: 599px) {
  .hero .headerLine {
    width: 480px;
    bottom: -360px;
  }
}