/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --vh-base: 1vh;
  --logo-offset-x: -6%;
  --logo-offset-y: 6vh;
  --wave-first-stack-lift: clamp(24vh, 26vh, 28vh);
  --wave-lift-extra: -10vh;
  --wave-footer-drop: 0vh;
  --wave-blackbottom-drop: 2vh;
}




main {
  width: calc(100% - 240px);
  max-width: 680px;
  margin: 100px auto;
  z-index: 20;
}

p {
  font-size: 18px;
  line-height: 28px;
}

* {
  scroll-behavior: smooth;
}

/* Menu code starts here */

#menuToggle
{
  display: block;
  /* You can also use relative/absolute here if you want to stay on the top */
  position: fixed;
  top: 50px;
  left: 50px;
  color: #764334;
  
  z-index: 20;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #8f0813;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  max-width: 300px;
  max-height: 100vh;
  margin: -70px 0 0 -50px;
  padding: 40px;
  padding-top: 125px;
  box-sizing:border-box;
  overflow-y: auto;
  border-radius: 70px;
  background: #f23b00;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

#menu li label
{
  cursor: pointer;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}


@media (max-width: 1498px) {
  :root {
    --wave-first-stack-lift: clamp(18vh, 20vh, 22vh);
    --wave-lift-extra: 42vh;
    --wave-footer-drop: 10vh;
    --wave-blackbottom-drop: 6vh;
  }

  .wave-crest-text {
    width: min(90vw, 640px);
    padding: clamp(1rem, 3.5vw, 2.5rem);
  }

  .wave-crest-text h3 {
    font-size: clamp(2rem, 6vw, 3rem);
  }

  .wave-crest-text p {
    font-size: clamp(1rem, 3vw, 1.5rem);
  }
}

@media (max-width: 520px) {
  
  .wave-crest-text {
    width: min(82vw, 480px);
    padding: clamp(0.75rem, 3vw, 1.875rem);
    left: calc(40% + 2vh);
  }

  .wave-crest-text h3 {
    font-size: clamp(1.00rem, 3.55vw, 1.675rem)
  }

  .wave-crest-text p {
    font-size: clamp(0.875rem, 2.5vw, 1.25rem);
  }
}

body,
html {
  height: 100%;
  font-family: 'adorn-condensed-sans';
  scroll-behavior: smooth;
}

.hero {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
  height: 130vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.logo {
  margin-top: -5px;
  --logo-base-transform: translate(var(--logo-offset-x), var(--logo-offset-y));
  transform: var(--logo-base-transform);
  cursor: auto;
  transition: transform 0.3s ease, width 0.3s ease;
  z-index: 0;
}

.hero .logo-container {
  display: flex;
  width: 80%;
  height: auto;
  margin-top: -5px;
  justify-content: center;
}

/* Wiggle */
@keyframes wiggle {
  0% {
    transform: var(--logo-base-transform) rotate(0deg);
  }

  25% {
    transform: var(--logo-base-transform) rotate(-5deg);
  }

  50% {
    transform: var(--logo-base-transform) rotate(5deg);
  }

  75% {
    transform: var(--logo-base-transform) rotate(-3deg);
  }

  100% {
    transform: var(--logo-base-transform) rotate(0deg);
  }
}

@keyframes wave-logo-wiggle {
  0% {
    transform: var(--wave-logo-base-transform, translateY(0)) rotate(0deg);
  }

  25% {
    transform: var(--wave-logo-base-transform, translateY(0)) rotate(-4deg);
  }

  50% {
    transform: var(--wave-logo-base-transform, translateY(0)) rotate(4deg);
  }

  75% {
    transform: var(--wave-logo-base-transform, translateY(0)) rotate(-2deg);
  }

  100% {
    transform: var(--wave-logo-base-transform, translateY(0)) rotate(0deg);
  }
}

@keyframes wave-text-fade-in {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.logo:hover {
  animation: wiggle 0.6s ease-in-out;
}

.footer .footer-logo:hover {
  animation: footer-wiggle 0.8s ease-in-out;
}

/* Background */
body {
  background: linear-gradient(to bottom,
      #f5e3df 65%,
      /* creamy white dominates top */
      #ff7c33 100%,
      /* bright orange mid tone */
      #8f0813 100%
      /* deep red at the bottom */
    );
  background-attachment: fixed;
}



body::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 150vmax;
  height: 150vmax;
  background: url("../images/catheads-tile.svg") repeat;
  background-attachment: fixed;
  background-size: 100% auto;
  transform: translate(-50%, -50%) rotate(45deg);
  transform-origin: center;
  animation: pattern-pan 100s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
body.work-page::after {
  content: none;
}
body.cat-pattern-paused::after {
  animation-play-state: paused;
}

@keyframes pattern-pan {
  0% {
    background-position: 100% 0%;
    background-size: 115% auto;
  }

  50% {
    background-position: 0% 100%;
    background-size: 120% auto;
    /* subtle mid-zoom */
  }

  100% {
    background-position: 100% 0%;
    background-size: 115% auto;
  }
}

/* --- Parallax Waves --- */
.parallax {
  position: relative;
  width: 100%;
  min-height: 650vh;
  overflow: visible;
  z-index: 3;
  /* Above hero */
  pointer-events: none;
}

.wave-stack {
  position: relative;
}

.wave {
  position: fixed;
  /* Freed from normal flow — overlaps hero */
  left: 0;
  width: 100%;
  height: auto;
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0, 0, 0, 0.57);
  pointer-events: none;
}

.wave--footer-cta {
  pointer-events: auto;
}

.wave--footer-cta .wave__img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.wave-footer-text {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -45%);
  width: min(94.6vw, 660px);
  padding: clamp(1.1rem, 4.4vw, 3.025rem);
  border-radius: 36px;
  background: none;
  color: #8c3a19;
  text-align: center;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.wave-footer-text--visible {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.wave-footer-text h3 {
  font-family: "active-one", sans-serif;
  font-size: clamp(2rem, 5.8vw, 3.425rem);
  letter-spacing: 0.08em;
  margin: 0 0 0.5rem;
  color: #8f0813;
}

.wave-footer-text p {
  margin: 0;
  font-family: "adorn-condensed-sans", sans-serif;
  font-size: clamp(1.2rem, 3.02vw, 2.15rem);
  line-height: 1.45;
  color: #8f0813;
}

.is-initializing .wave {
  transition: none !important;
}



.wave-text-box {
  /* push the box below the crest */
  height: 40vh;
  width: 80px;
  padding: clamp(1rem, 2vw, 2rem);
  border-radius: 26px;
  line-height: 1.6;
  pointer-events: auto;
  z-index: 8;
  opacity: 3;
  max-width: 99%;
  transition: opacity 1s ease, transform 0.8s ease;
}

.wave-crest {
  pointer-events: none;
}

.wave-crest__media {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.wave-crest__img {
  display: block;
  width: 100%;
  height: auto;
}

.wave-crest-text {
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -45%);
  width: min(112.5vw, 800px);
  padding: clamp(1.3125rem, 4.8125vw, 3.90625rem);
  background: none;
  border-radius: 28px;
  text-align: center;
  color: none;
  font-family: "adorn-condensed-sans", sans-serif;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.wave-crest-text--visible {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.wave-crest-text h3 {
  font-family: "active-one", sans-serif;
  font-size: clamp(2.5rem, 7.5vw, 3.75rem);
  letter-spacing: 0.1em;
  margin: 0 0 0.5rem;
  color: #f5e3df;
  text-transform: uppercase;
}

.wave-crest-text p {
  margin: 0;
  font-size: clamp(1.25rem, 3.75vw, 1.875rem);
  line-height: 1.5;
  color: #f5e3df;
}

.wave-panel {
  position: relative;
  width: 100%;
}

.wave-panel__img {
  display: block;
  width: 100%;
  height: auto;
}

.wave-stack[data-wave-text="about"] .wave-text-box {
  background: transparent;
  color: #f5e3df;
  position: absolute;
  top: 45%;
  /* tweak to taste */
  left: 50%;
  width: 30vh;
  z-index: 18;
}


.wave-text-heading {
  margin: 0;
  font-size: clamp(5.0686rem, 9.639vw, 6.2654rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: "active-one", sans-serif;
  color: #f5e3df;
  font-style: normal;
}



.wave-text-box--light {
  background: rgba(245, 227, 223, 0.92);
  color: #8f0813;
  border: 1px solid rgba(118, 67, 52, 0.2);
}

.wave-text-box--light strong {
  color: #c6492d;
  letter-spacing: 0.08em;
}

.wave-text-box--light span {
  display: inline-block;
  color: #c6492d;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.8em;
  margin-right: 0.35em;
}

.wave-text-logo {
  display: block;
  width: clamp(450px, 45vw, 400px);
  margin: clamp(1rem, 2vw, 1.8rem) auto 0;
  opacity: 1;
  --wave-logo-base-transform: translateY(-30vh);
  transform: var(--wave-logo-base-transform);
  position: relative;
  left: 25vh;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.25));
  transition: opacity 1.5s ease, transform 0.8s ease;
  transition-delay: 0s, 0s;
  pointer-events: auto;
}





.wave-logo-box:hover .wave-text-logo,
.wave-text-logo:hover {
  animation: wave-logo-wiggle 0.6s ease-in-out;
}

.wave-logo-box {
  position: absolute;
  left: 8%;
  top: calc(26% + clamp(18rem, 5vw, 30rem));
  max-width: 65%;
  width: 65%;
  display: none;
  justify-content: flex-start;
  opacity: 0;
  transition: opacity 0.6s ease;
}


.wave-stack[data-wave-text="about"] .wave--cream-buffer {
  filter: brightness(1.05);
}

.wave-stack[data-wave-text="services"] .wave-text-heading {
  color: #8f0813;
}

.wave-stack[data-wave-text="services"] .wave-logo-box {
  left: auto;
  right: 8%;
  justify-content: flex-end;
  top: calc(12% + clamp(10rem, 6vw, 16rem));
}





.wave-text-box h3 {
  font-size: 4.5rem;
}


.wave-text-box p {
  line-height: 4.3vh;
  margin: 0.1rem 0 0;
  font-size: 1.6rem;
  font-weight: 400;
  font-family: "adorn-condensed-sans", sans-serif;
  font-style: normal;
}

/*----Center Brown About me Wave----*/
.wave-stack:first-of-type .wave:nth-child(1) {
  bottom: calc(var(--vh-base) * -128 + var(--wave-first-stack-lift) + var(--wave-lift-extra));
  border: 0px dotted #5a0101;
  z-index: 9;
}

/*Cream top*/
.wave-stack:first-of-type .wave:nth-child(2) {
  bottom: calc(var(--vh-base) * -126 + var(--wave-first-stack-lift) + var(--wave-lift-extra));
  z-index: 8;
  border: 0px dashed #f0f4d3;
}

/*Red top*/
.wave-stack:first-of-type .wave:nth-child(3) {
  z-index: 7;
  bottom: calc(var(--vh-base) * -113 + var(--wave-first-stack-lift) + var(--wave-lift-extra));
  border: 0px dashed #c61919;

}

/*Dark orange top*/
.wave-stack:first-of-type .wave:nth-child(5) {
  z-index: 6;
  bottom: calc(var(--vh-base) * -105 + var(--wave-first-stack-lift) + var(--wave-lift-extra));
  border: 0px dashed #e94c03;
}

/*Light orange top*/
.wave-stack:first-of-type .wave:nth-child(4) {
  z-index: 5;
  bottom: calc(var(--vh-base) * -102 + var(--wave-first-stack-lift) + var(--wave-lift-extra));
  border: 0px dashed #ff9100;
}

/* Bottom Wave Group - after ABOUT ME */


/*Light Cream Bottom*/
.wave-stack:first-of-type .wave:nth-child(6) {
  z-index: 8;
  bottom: calc(var(--vh-base) * -132 + var(--wave-first-stack-lift) + var(--wave-lift-extra));
  border: 0px dashed #f0f4d3;
  /* Cream */
}

/*Red Bottom*/
.wave-stack:first-of-type .wave:nth-child(7) {
  z-index: 7;
  bottom: calc(var(--vh-base) * -138 + var(--wave-first-stack-lift) + var(--wave-lift-extra));
  border: 0px dashed #ff0000;
}

/*Dark Orange Bottom*/
.wave-stack:first-of-type .wave:nth-child(8) {
  bottom: calc(var(--vh-base) * -144 + var(--wave-first-stack-lift) + var(--wave-lift-extra));
  z-index: 6;
  border: 0px dashed #e94c03;
}

/*Light Orange Bottom*/
.wave-stack:first-of-type .wave:nth-child(9) {
  bottom: calc(var(--vh-base) * -150 + var(--wave-first-stack-lift) + var(--wave-lift-extra));
  z-index: 5;
  border: 0px dashed #ffb727;
}

/*Cream Bottom Continued*/
.wave-stack:first-of-type .wave:nth-child(10) {
  bottom: calc(var(--vh-base) * -156 + var(--wave-first-stack-lift) + var(--wave-lift-extra));
  z-index: 4;
  border: 0px dashed #fffdbe;
}

/*Red Bottom Continued*/
.wave-stack:first-of-type .wave:nth-child(11) {
  z-index: 3;
  bottom: calc(var(--vh-base) * -162 + var(--wave-first-stack-lift) + var(--wave-lift-extra));
  border: 0px dashed #b70b0b;
}

/*Dark Orange Bottom Continued*/
.wave-stack:first-of-type .wave:nth-child(12) {
  z-index: 2;
  bottom: calc(var(--vh-base) * -168 + var(--wave-first-stack-lift) + var(--wave-lift-extra));
  border: 0px dashed #ff4400;
}

/*Light Orange Bottom Continued*/
.wave-stack:first-of-type .wave:nth-child(13) {
  bottom: calc(var(--vh-base) * -174 + var(--wave-first-stack-lift) + var(--wave-lift-extra));
  z-index: 0;
  border: 0px dashed #ea5600;
}

/*Brown Bottom Continued*/
.wave-stack:first-of-type .wave:nth-child(14) {
  bottom: calc(var(--vh-base) * -180 + var(--wave-first-stack-lift) + var(--wave-lift-extra));
  z-index: -2;
  border: 0px dashed #281c37;
}

/*White centert*/
.wave-stack:first-of-type .wave:nth-child(15) {
  bottom: calc(var(--vh-base) * -220 + var(--wave-first-stack-lift) + var(--wave-lift-extra));
  z-index: -2;
  border: 0px dotted #a3ff75;
}


/*Wave Footer*/

.wave-stack:first-of-type .wave:nth-child(16) {
  /* Cream Footer */
  z-index: 5;
  bottom: calc(var(--vh-base) * -370 + var(--wave-first-stack-lift) + var(--wave-lift-extra));
  border: 0px dashed #e2fda5;
}

/*Red Footer*/
.wave-stack:first-of-type .wave:nth-child(17) {
  bottom: calc(var(--vh-base) * -350 + var(--wave-first-stack-lift) + var(--wave-lift-extra));
  z-index: 4;
  border: 0px dashed #9f0b0b;
}

.wave-stack:first-of-type .wave:nth-child(18) {
  /* D Orange Footer */
  z-index: 3;
  bottom: calc(var(--vh-base) * -340 + var(--wave-first-stack-lift) + var(--wave-lift-extra));
  border: 0px solid #f35e0e;
}

/* L Orange Footer */
.wave-stack:first-of-type .wave:nth-child(19) {
  z-index: -1;
  /* lift CTA wave above other footer layers so text stays visible */
  bottom: calc(var(--vh-base) * -245 + var(--wave-first-stack-lift) + var(--wave-lift-extra));
  border: 0px dashed #fda24d;
}

/* Brown Footer */
.wave-stack:first-of-type .wave:nth-child(20) {
  z-index: 6;
  bottom: calc(var(--vh-base) * -370 + var(--wave-first-stack-lift) + var(--wave-lift-extra));
  border: 100px dashed #b18d58;
}

.wave-stack[data-wave-text="about"] .wave-text-box {
  padding: clamp(0.7rem, 3vw, 1.1rem) clamp(0.85rem, 7vw, 1.4rem);
  margin: 0 auto;
  --wave-box-translate-x: 0;
}



.wave-text-heading {
  font-size: clamp(1.53rem, 5.95vw, 2.3375rem);
}



.logo {
  width: clamp(400px, 80vw, 870px);
  --logo-offset-x: -6%;
  --logo-offset-y: -25vh;
  transform: var(--logo-base-transform);
}


/*okofk*/



/*text and bottom wave group  */

.footer {
  position: relative;
  z-index: 4;
  bottom: -40vh;
  width: 101%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #f5e3df;
  padding: clamp(2rem, 6vw, 4rem);
  overflow: hidden;
  background: url('../images/blackbottom.svg') center bottom/cover no-repeat;
}

.footer p {
  font-family: "adorn-condensed-sans", sans-serif;
  font-style: normal;
  font-size: clamp(1rem, 2.1vw, 1.375rem);
  letter-spacing: 0.08em;
  margin: 2vh 0 0;
  transform: translateY(14vh);
}

.footer-heading {
  font-family: "active-one", sans-serif;
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f5e3df;
  margin-bottom: 2vh;
  transform: translateY(25vh);
}
.footer-heading a {
  color: inherit;
  text-decoration: none;
}

.footer-wave {
  display: none;
}

.footer .footer-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: min(90vw, 1000px);
  padding: clamp(2rem, 6vw, 4rem);
}

.footer-logo {
  width: clamp(319px, 44.6vw, 701px);
  height: auto;
  z-index: 5;
  position: relative;
  left: 50%;
}

@keyframes footer-wiggle {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-4deg);
  }

  50% {
    transform: rotate(4deg);
  }

  75% {
    transform: rotate(-2deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* --- Services wave layout overrides --- */
.wave-stack[data-wave-text="services"] {
  position: relative;
  padding-top: 360vh;
  /* push services block down by roughly two extra viewport heights */
  z-index: -3;
  /* temporary: keep visible above other layers */
}

.wave-stack[data-wave-text="services"] .wave {
  position: relative;
  left: auto;
  will-change: auto;
  pointer-events: none;
}

.wave-stack[data-wave-text="services"] .wave--captioned {
  margin: 0 auto;
  min-height: unset;
}

.wave-panel--services {
  position: relative;
  width: 100%;
  height: 250vh;
  overflow: hidden;
  z-index: 50;
  background: url('../images/wavedivwhite.svg') repeat-y;
  margin-top: -72vh;
}



.wave-panel--services .wave-panel__content {
  position: absolute;
  background: rgba(245, 227, 223, 0.92);
  color: #8f0813;
  border: 1px solid rgba(118, 67, 52, 0.2);
  box-shadow: 0 18px 36px rgba(51, 21, 9, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.65rem;
  pointer-events: auto;
}

.wave-stack[data-wave-text="services"] .wave-text-box,
.wave-panel--services .wave-text-box {
  all: unset;
}

.wave-panel--services .wave-text-heading {
  margin: 0;
  font-size: clamp(2.45rem, 8vw, 3.45rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8f0813;
  font-family: "active-one", sans-serif;
}

.wave-panel--services p {
  margin: 0;
  font-family: "adorn-condensed-sans", sans-serif;
  font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  line-height: 1.6;
}

.wave-panel--services strong,
.wave-panel--services span {
  color: #c6492d;
  letter-spacing: 0.12em;
}



/*work page*/

body.work-page::after {
  content: none;
}

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

@mixin transition {
    -moz-transition:    0.3s ease-in-out all;
    -o-transition:      0.3s ease-in-out all;
    -webkit-transition: 0.3s ease-in-out all;
    transition:         0.3s ease-in-out all;
}

@mixin filter($filter) {
   -webkit-filter: $filter;
   -moz-filter: $filter;
   -o-filter: $filter;
}

@import url(https://fonts.googleapis.com/css?family=Roboto:300,900);

$sm: 480px;
$md: 768px;
$lg: 992px;

body {
   font-family: 'Roboto', sans-serif;
}

.header, .footer {
   //height: 350px;
   color: #fff;
   padding: 30px;
   text-align:center;
   
   a {
      color: #fff;
   }
   //box-sizing: border-box;
   
   @media (min-width: $md) {
      padding: 100px 30px;
   }
   
   h1 {
      font-size: 4em;
      font-weight: 300;
   }
   
   i.fa {
      font-size: 4em;
   }
   
   .bounce {
      -webkit-animation-name: bounce;
      animation-name: bounce;
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom;
      animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
   }
   
   .animated {
     -webkit-animation-duration: 2s;
     animation-duration: 2s;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
   }
}

.section {
   width: 100%;
   position: relative;
   //height: 300px;
   
   .left, .middle, .right {
      width:100%;
      display: block;
      color: #fff;
      box-sizing: border-box;
      left: 0;
      padding: 30px;
      text-align:center;
      overflow:hidden;
      
      @include transition;
      
      .content {
         @media (min-width: $sm) {
            @include vertical-align();
         }
      }
      
      @media (min-width: $sm) {
         width: 50%;
         font-size:0.9em;
         padding: 10px;
         left: 0;
         float: left;
         position: absolute;
      }
      
      @media (min-width: $md) {
         width: 33.33333%;
         left: 33.33%;
         padding: 10px;
      }
      
      @media (min-width: $lg) {
         padding: 30px;
         font-size: 1em;
      }
   }
   
   &.animate {
      .left {
         left:0;
         
         @media (min-width: $sm) {
            left: 50%;
         }
         
         @media (min-width: $md) {
            left:0;
         }
      }
      
      .right {
         left:0;
         
         @media (min-width: $sm) {
            left: 50%;
         }
         
         @media (min-width: $md) {
            left:66.66%;
         }
      }
      
      
   }
   
   .title {
      background: tomato;
      
      h2 {
         margin-top:0;
      }
      
      p {
         line-height:1.55em;
         margin-bottom: 0.75em;
      }
      
      .btn-primary {
         color: #fff;
         background: darken(tomato, 10%);
         padding: 10px;
         text-decoration:none;
         border-radius: 3px;
         display:inline-block;
         @include transition;
         
         &:hover {
            background: darken(tomato, 15%);
         }
         
      }
   }
   
   .tiles {
      padding:0;
      background: #fff;
      clear:both;
      display:none;
      float:none;
      
      img {
         width:50%;
         float:left;
         height:auto;
         opacity: 0.7;
         @include transition;
         @include filter(grayscale(100%)); 
         
         
         &:hover {
            opacity:1;
            @include filter(grayscale(0%));
         }
      }
      
      @media (min-width: $md) {
           display:block;
      }
   }
   
   .middle {
      background: slategray;
      z-index: 2;
      padding:0;
      
      img {
         width: 100%;
         height: auto;
         display:block;
      }
   }
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
    40% {-webkit-transform: translateY(-20px);}
    60% {-webkit-transform: translateY(-10px);}
} 
 
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-20px);}
    60% {transform: translateY(-10px);}
}