/* SECTION: ABOUT */
section.about-us { 
  max-width: 1200px;
  align-content: center;
  align-items: center;
  padding: 120px 50px 0;
  margin-bottom: 100px }

  @media (min-width:1081px) { section.about-us{ padding: 200px 50px 75px }}

section.about-us .brand { margin-bottom: 10px}

section.about-us h2, section.about-us p, section.about-us h3 {
  opacity: 0;
  animation-name: reveal;
  animation-duration: 4s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-timing-function: ease;
  animation-fill-mode: forwards }


/* SECTION 4: OUR STORY */
section.sec4 { 
  color: #FFFFFF;
  padding: 75px 50px;
  background-color: var(--circumvent);
  margin-top: 500px;
  animation-name: margin-pull;
  animation-duration: 1s;
  animation-delay: .75s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-timing-function: ease;
  animation-fill-mode: forwards }

  @media (min-width:1081px) { section.sec4 { padding: 100px 50px 125px }}

section.sec4::before {
  display: block;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/noise.png");
  opacity: 0.1 }

section.sec4 .text-wrapper {
    max-width: 1200px
}

section.sec4 h2, section.sec4 h3, section.sec4 p { 
  transform: scale(0);
  transform-origin: bottom;
  animation-name: scale-up;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-timing-function: ease;
  animation-fill-mode: forwards }

section.sec4 h2 { 
  animation-duration: 1s;
  animation-delay: 1s }

section.sec4 h3 { 
  animation-duration: 1.25s;
  animation-delay: 1.25s }

section.sec4 p:nth-of-type(1) { 
  animation-duration: 1.5s;
  animation-delay: 1.5s }

section.sec4 p:nth-of-type(2) { 
  animation-duration: 1.75s;
  animation-delay: 1.75s }


/* SECTION 5: WHAT WE BELIEVE */
section.sec5 {
  display: flex;
  max-width: 1800px;
  flex-flow: row wrap;
  padding: 100px 50px 25px }

  @media (min-width:1081px) { section.sec5 { padding-bottom: 75px }}

section.sec5 > h2, section.sec5 > h3, section.sec5 > div { 
  flex: 1 1 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: center }

  @media (min-width:1081px) { section.sec5 > h3 { padding-bottom: 30px } }

section.sec5 > h2 {
  margin-top: 500px;
  -webkit-transition: margin 0.5s 0s ease;
  -moz-transition: margin 0.5s 0s ease;
  -o-transition: margin 0.5s 0s ease;
  -ms-transition: margin 0.5s 0s ease;
  transition: margin 0.5s 0s ease }

section.sec5 > h3 {
  transform: scale(0);
  -webkit-transition: transform 0.75s 0.25s ease;
  -moz-transition: transform 0.75s 0.25s ease;
  -o-transition: transform 0.75s 0.25s ease;
  -ms-transition: transform 0.75s 0.25s ease;
  transition: transform 0.75s 0.25s ease }

section.sec5 > div {
  padding-bottom: 40px;
  transform: scale(0);
  -webkit-transition: transform 0.75s 1s ease;
  -moz-transition: transform 0.75s 1s ease;
  -o-transition: transform 0.75s 1s ease;
  -ms-transition: transform 0.75s 1s ease;
  transition: transform 0.75s 1s ease }

  @media (min-width:1081px) { 
    section.sec5 > div { flex: 0 0 29%; align-content: stretch; padding-bottom: 0; margin: 2% }
    section.sec5 > div:nth-of-type(4), section.sec5 > div:nth-of-type(5) { flex: 0 0 40% }}

section.sec5 h4 {
  flex: 0 0 auto
}

section.sec5 p {
  flex: 1 1 100%;
  padding-bottom: 50px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--tertiary) }

  @media (min-width:1081px) { section.sec5 p { align-self: flex-end }}

  @media (max-width:1080px) { section.sec5 > div:last-child p { border-bottom: 0 }}


/* SECTION 6: MEET THE TEAM */
section.sec6 { 
  padding: 100px 50px;
  background-color: var(--gray)}


/* SECTION 7: PARTNERS & COLLABORATORS */
section.sec7 { 
  padding: 100px 50px }


/* SECTION 8: CAREERS OR COLLABORATION */
section.sec8 { 
  color: #eaf0f6;
  padding: 100px 50px;
  background-color: var(--primary) }

  @media (min-width:1081px) { section.sec8 { padding-bottom: 150px }}

section.sec8 .text-wrapper { 
  max-width: 1200px }

section.sec8 div.buttons {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin-top: 50px }

section.sec8 div.buttons a.btn { flex: 1 1 100%; color: black; margin-bottom: 10px; background-color: #FFFFFF }

  @media (min-width:1081px) { section.sec8 div.buttons a.btn { flex: 0 0 auto; margin: 0 1%; margin-bottom: 0 }}