/* Stylesheet CSS*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap');

@font-face {
  font-family: 'rangetregular';
  src: url('../fonts/ranget-webfont.woff2') format('woff2'),
    url('../fonts/ranget-webfont.woff') format('woff');
  font-weight: lighter;
  font-style: normal;
}
/* 



font-family: 'Inter', sans-serif;
font-family: 'Poppins', sans-serif;
font-family: 'Source Sans Pro', sans-serif;

background: rgb(157,194,172);
background: linear-gradient(90deg, rgba(157,194,172,1) 0%, rgba(174,193,192,1) 25%, rgba(249,249,249,1) 100%);

/*-------------
 	General
-------------*/

:root {
  --brand-white: #f7f7f7;
  --brand-black: #272727;
  --brand-grey: #dce0d9;
  --brand-purple: #6868ac;
  --brand-blue: #6db0c0;
  --brand-dkblue: #525e75;
  --brand-green: #92ba92;
  --brand-sand: #f1ddbf;
  --brand-olive: #78938a;
  --script-font: 'rangetregular';
  --heading-font: 'poppins', sans-serif;

  /* --brand-darkblue: #1f71ab;
  --brand-green: #44b549;
  --brand-yellow: #d9e03b;
  --brand-orange: #ff934f;
  --brand-blue80: #1f71abcc;
  --brand-blue90: #1f71abe6; */
}

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

html {
  font: normal 16px sans-serif;
  color: #555;
  font-family: 'Inter', sans-serif;
  background: var(--brand-white);
}

ul,
nav {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  opacity: 1;
}

a:hover {
  font-weight: bold;
}

body {
  max-width: 100vw;
  background: url('../img/bgbeach.jpg');
  background-size: cover;
  background-position: bottom right -60vw;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

@media only screen and (min-width: 56.25em) {
  body {
    background-position: bottom center;
  }
}

/* -------------
 	typography
 ------------- */

p {
  color: #2d2d2d;
  font-family: 'Inter', sans-serif;
  font-size: 1.2em;
  line-height: 1.2em;
  font-weight: 200;
  /* margin: 1.5em 0; */
}

small {
  font-size: 0.7em;
  line-height: 1.2em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #757083;
  font-family: 'poppins', sans-serif;
  line-height: 2em;
  font-weight: 800;
}

h1 {
  font-size: 2.125em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.825em;
}

h4 {
  font-size: 1.5em;
}

h5 {
  font-size: 1.25em;
}

h6 {
  font-size: 1.125em;
}

.redfont {
  font-size: 1em;
  color: #7c1919;
  border: 1px solid #7c1919;
  padding: 1vh;
}

/* *900PX SCREENS AND UP for-tablet-landscape-up*/
@media only screen and (min-width: 56.25em) {
  h1 {
    font-size: 5em;
  }

  h2 {
    font-size: 2.5em;
  }

  h3 {
    font-size: 2.25em;
  }

  h4 {
    font-size: 2em;
  }

  h5 {
    font-size: 1.5em;
  }

  h6 {
    font-size: 1.25em;
  }
}

/* -------------
	 DESIGN MOBILE FIRST. ALL CSS IS FOR MOBILE SCREENS UP TO 599PX WIDE= 37.4EM
------------- */

/* *600PX SCREENS AND UP for-tablet-portrait-up*/
@media only screen and (min-width: 37.5em) {
}

/* *900PX SCREENS AND UP for-tablet-landscape-up*/
@media only screen and (min-width: 56.25em) {
}

/* *1200PX SCREENS AND UP for-desktop-up*/
@media only screen and (min-width: 75em) {
}

/* *1800PX SCREENS AND UP for-big-desktop-up*/
@media only screen and (min-width: 112.5em) {
}

/* -------------
 SITE COLORS
 ------------- */
.brandwhite {
  color: #f6f6f6;
}

.brandblack {
  color: #363538;
}

.brandgrey {
  color: #8d8c8a;
}

.brandteal {
  color: #408697;
}

.brandblue {
  color: #52d6f4;
}

/* -------------
 SPACING AND HIDING HACKS
 ------------- */

.mobileOnly {
  display: inline;
}

.desktopOnly {
  display: none;
}

@media only screen and (min-width: 56.25em) {
  .mobileOnly {
    display: none;
  }

  .desktopOnly {
    display: inline;
  }
}

.h1 {
  height: 1vh;
}
.h2 {
  height: 2vh;
}

.h5 {
  height: 5vh;
}

.h10 {
  height: 10vh;
}

.h20 {
  height: 20vh;
}

.h30 {
  height: 30vh;
}

.h40 {
  height: 40vh;
}

.h50 {
  height: 50vh;
}

.h60 {
  height: 60vh;
}

.h70 {
  height: 70vh;
}

.h80 {
  height: 80vh;
}

.h90 {
  height: 90vh;
}

.w2 {
  width: 2vw;
}

.w5 {
  width: 5vw;
}

.w10 {
  width: 10vw;
}

.w20 {
  width: 20vw;
}

.w30 {
  width: 30vw;
}

.w40 {
  width: 40vw;
}

.w50 {
  width: 50vw;
}

.w60 {
  width: 60vw;
}

.w70 {
  width: 70vw;
}

.w80 {
  width: 80vw;
}

.w90 {
  width: 90vw;
}

.w100 {
  width: 100vw;
}

hr {
  width: 50%;
  height: 0.1vh;
  background-color: #9dc2ac;
  border: 0;
  margin: 0 auto;
  margin-bottom: 2vh;
  margin-top: 2vh;
}

/* -------------
 BUTTONS
 ------------- */

button {
  display: inline-block;
  background: #fefefe;
  border: 0px solid #fefefe;
  border-radius: 4px;
  transition: all 0.4s ease 0s;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.3rem;
  color: #222;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 3vh 6vh;
  cursor: pointer;
  /* margin: 2vh; */
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

.btnGhost {
  color: var(--brand-dkblue);
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  text-transform: uppercase;
  background-color: transparent;
  background-color: #ea526f;
  background-color: #bc8da7;
  background-color: #b7ce63;
  background-color: var(--brand-sand);
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.2rem;
  text-align: center;
  padding: 2vh 6vh;
  border: #fdfdfd 0px solid;
  cursor: pointer;
  margin: 2vh;
  /*-webkit-box-shadow: #000;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
  */
}

.btnGhost:hover {
  background: rgba(0, 0, 0, 0.3);
  background-color: var(--brand-green);
  color: var(--brand-white);
}

.btnSmall {
  color: #408697;
  background-color: #f6f6f6;
  border: 1px solid #408697;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.1rem;
  padding: 1.5vh 3vh;
}

.btnThin {
  padding: 1vh 6vh;
  background-color: #408697;
  color: #f6f6f6;
  border-radius: 2vh;
}

.btnCta {
  background: transparent;
  color: var(--brand-white);
  background: var(--brand-dkblue);
  border: 0px solid var(--brand-white);
  padding: 1.5vh 3vh;
}

.btnCta:hover {
  background: var(--brand-blue);
  border: 2px solid var(--brand-white);
}

.btnCtaInv {
  background: transparent;
  color: var(--brand-dkblue);
  background: var(--brand-blue);
}

.btnCtaInv:hover {
  background: var(--brand-dkblue);
  border: 2px solid var(--brand-white);
}

.btnDelete {
  background: #7c1919;
  color: #f6f6f6;
  width: 30vw;
  height: 8vw;
  font-size: 0.8em;
  padding: 0;
}

.btnEdit {
  background: #408697;
  color: #f6f6f6;
  width: 30vw;
  height: 8vw;
  font-size: 0.8em;
  padding: 0;
}

.btnMenu {
  padding: 2vh;
  background: transparent;
  color: #f9f9f9;
  font-size: 0.6em;
  border: 2px solid #f9f9f9;
  border-radius: 2vh;
}

@media only screen and (min-width: 56.25em) {
  .btnDelete {
    width: 4vw;
    height: 2vw;
  }

  .btnEdit {
    width: 4vw;
    height: 2vw;
  }

  .btnGhost {
    font-size: 0.9em;
    font-weight: 400;
    letter-spacing: 0.4rem;
    padding: 2vh 6vh;
  }
  .btnCta {
    min-width: 30%;
    padding: 1.5vh 2vh;
  }
}

/* :::::::::::::::

IMG CLASSES

::::::::::::::: */

img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
}

.logo {
  max-width: 80vw;
  height: auto;
}

.logoSmall {
  max-width: 45vw;
  height: auto;
}

.logoMobileBar {
  max-height: 7vh;
  width: auto;
}

.iconSocial {
  max-width: 8vw;
  height: auto;
  margin: 2vh;
}

.iconFooter {
  max-width: 8vw;
  height: auto;
  margin: 0 auto;
}

.iconInstall {
  max-width: 25vw;
  height: auto;
}

.iconScroll {
  max-height: 8vh;
  width: auto;
}

.banner {
  max-width: 100vw;
  height: auto;
}

.pressThumb {
  max-width: 60vw;
  height: 60vw;
  overflow: hidden;
}

.headerlogo {
  max-width: 40vw;
  height: auto;
  padding: 0.5em;
}
.musicLinkLogo {
  max-width: 30vw;
  height: auto;
  margin: 1vw;
}

@media only screen and (min-width: 56.25em) {
  .logo {
    max-width: 20vw;
  }

  .logoSmall {
    max-width: 15vw;
  }

  .iconSocial {
    max-width: 2vw;
  }

  .iconFooter {
    max-width: 2vw;
  }

  .iconInstall {
    max-width: 10vw;
  }

  .iconScroll {
    max-height: 20vw;
    margin-right: 1vw;
  }

  .banner {
    max-width: 30vw;
  }

  .pressThumb {
    max-width: 20vw;
    height: 20vw;
    overflow: hidden;
  }

  .headerlogo {
    max-height: 8vh;
    width: auto;
  }
  .musicLinkLogo {
    max-width: 10vw;
    height: auto;
  }
}

/* -------------
 
NAVIGATION
 ------------- */

/* :::::::::::::::::::::::::::::::::::::::::::::
MENU  ICON and MENU TOGGLE


To implement:-
HTML

The "menu-toggle and menu-icon" can be placed in either the .mobileBarLeft or .mobileBarRight divs.

1.  For Hamburger Menu Icon
<label for="menu-toggle" class="menu-icon">
  <span></span>
</label>

2. For The Word "MENU"
<label for="menu-toggle" class="menuWord">
   <span></span>
</label>
You can then adjust the appearance of the word

::::::::::::::::::::::::::::::::::::::::::::: */

.menu-icon {
  z-index: 10;
  display: block;
  position: relative;
  width: 25px;
  height: 100%;
  cursor: pointer;
  transition: transform 900ms ease;
}

.menu-icon > span {
  display: block;
  position: absolute;
  top: 55%;
  margin-top: -0.5em;
  width: 100%;
  height: 0.15em;
  border-radius: 1px;
  background-color: #fb6c2d;
  transition: transform 900ms ease;
}

.menu-icon > span:before,
.menu-icon > span:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 1px;
  background-color: #ecdccd;
  background-color: #fb6c2d;
  transition: transform 900ms ease;
}

.menu-icon > span:before {
  transform: translateY(-0.6em);
}

.menu-icon > span:after {
  transform: translateY(0.6em);
}

@media only screen and (min-width: 56.25em) {
  .menu-icon {
    display: none;
  }
}

/**---- Menu Icon Effects ----**/

.menu-toggle:checked + .mobile-bar .menu-icon {
  transform: rotate(45deg);
}

.menu-toggle:checked + .mobile-bar span:before,
.menu-toggle:checked + .mobile-bar span:after {
  transform: rotate(90deg);
}

/**---- Menu Word Effects ----**/
.menuWord {
  font-size: 1.2em;
  font-weight: 300;
  color: #408697;
  cursor: pointer;
  transition: transform 900ms ease;
}

.menuWord > span:before {
  transform: translateY(-0.6em);
  content: 'MENU';
}

.menuWord > span:after {
  transform: translateY(0.6em);
  content: '';
}

.menu-toggle:checked + .mobile-bar .menuWord {
  transform: rotate(45deg);
}

.menu-toggle:checked + .mobile-bar .menuWord span:before,
.menu-toggle:checked + .mobile-bar .menuWord span:after {
  transform: rotate(90deg);
  content: '';
}

.menu-toggle:checked + .mobile-bar .menuWord span:after {
  font-size: 0.8em;
  content: 'Close(X)';
}

/**---- Off-Canvas Effect ----**/

.menu-toggle:checked ~ .header {
  transform: translateX(100%);
  transform: translate3d(100%, 0, 0);
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
}

.menu-toggle:checked ~ .container {
  transform: translateX(100%);
  transform: translate3d(100%, 0, 0);
}

/**---- Pushdown Page Effect ----**/

.menu-toggle:checked ~ .dropdown-menu {
  transform: translateY(100%);
}

.menu-toggle:checked ~ .pagedrop {
  transform: translateY(100%);
}

@media only screen and (min-width: 56.25em) {
  .menu-toggle:checked ~ .header {
    transform: translateX(100%);
    transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    -o-transform: translate3d(100%, 0, 0);
  }

  .menu-toggle:checked ~ .container {
    transform: translateX(100%);
    transform: translate3d(100%, 0, 0);
  }
}

/* :::::::::::::::::::::::::::::::::::::::::::::

MOBILE BAR AT TOP
3 SECTIONS LEFT MIDDLE AND RIGHT
LEFT OR MIDDLE CONTAIN SITE LOGO
RIGHT CONTAINS MENU-ICON (HAMBURGER MENU)

::::::::::::::::::::::::::::::::::::::::::::: */

.menu-toggle {
  display: none;
}

.mobile-bar {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 2.5vw;
  width: 100vw;
  height: 10vh;
  background-color: transparent;
  display: flex;
  flex-direction: row;
}

.mobile-bar-left {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.mobile-bar-center {
  z-index: 8;
  flex: 3;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.mobile-bar-right {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

@media only screen and (min-width: 56.25em) {
  .mobile-bar {
    display: none;
  }
}

/* :::::::::::::::::::::::::::::::::::::::::::::
     HEADER 
     ::::::::::::::::::::::::::::::::::::::::::::: */

header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

header nav li {
  margin: 0;
}

header nav li:first-child {
  margin-left: 0;
}

header nav li:last-child {
  margin-right: 0;
}

/* :::::::::::::::::::::::::::::::::::::::::::::
MOBILE NAVIGATION OFFCANVAS slide in from right

To implement:-
HTML

1. <header class="header">
2. Main page contents must be wrapped in class .pagedrop
<section class="col pagedrop">

::::::::::::::::::::::::::::::::::::::::::::: */

.header {
  z-index: 9;
  position: fixed;
  top: 0;
  left: -100vw;
  padding-top: 10vh;
  padding-bottom: 4em;
  height: 100%;
  background-color: rgba(76, 60, 62, 0.8);
  text-align: center;
  transition: transform 1000ms ease;
}

/* ////// CHANGE WIDTH BELOW, TO CHANGE WIDTH OF OFF CANVAS MENU THAT SLIDES IN.  EG 100% IS FULL SCREEN, 50% IS HALF SCREEN /////// */

.header nav,
.header ul {
  height: 100%;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.header li {
  border-bottom: 0px solid #1f678a;
}

.header a {
  font-weight: 400;
  letter-spacing: 0.3em;
  color: #9dc2ac;
  color: #f9f9f9;
  display: block;
  padding: 1vh;
  transition: background-color 2000ms ease-in;
  font-size: 1.5em;
}

.header a:hover {
  color: #ff734c;
}

.menu-icon p {
  opacity: 0;
}

@media only screen and (min-width: 56.25em) {
  /* :::::::::::::::::::::::::::::::::::::::::::::
Desktop Navigation Style===  Comment out section 1 or 2 below.
::::::::::::::::::::::::::::::::::::::::::::: */

  /* :::::::::::::::::::::::::::::::::::::::::::::
1.  Horizontal Desktop Navigation
////////////////////////////////////////// */

  /* .header a {
        font-size: 1em;
    }

    .header {
        padding: 0;
        left: 0;
        height: auto;
        background-color: transparent;
    }

    .header nav,
    .header ul {
        height: 10vh;
        width: 100vw;
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        justify-content: space-around;
        -webkit-box-align: center;
        align-items: center;
    } */

  /* :::::::::::::::::::::::::::::::::::::::::::::
2.  Mobile Style Hamburger Menu on Desktop Navigation

THE "DISPLAY" properties on 
.mobile-bar
.menu-icon
are the key to displaying the hamburger and mobile bar with logo,
as the navigation.

.header nav, .header ul
width determines the width of the navigation that slides onto the screen.
width: 100vw;  is full screen!!
////////////////////////////////////////// */

  .header a {
    font-size: 2em;
  }

  .menu-icon p {
    font-size: 4em;
    opacity: 1;
  }

  .header nav,
  .header ul {
    width: 100vw;
  }

  .mobile-bar {
    display: flex;
  }

  .menu-icon {
    display: block;
  }
}

/* :::::::::::::::::::::::::::::::::::::::::::::
MOBILE NAVIGATION TOP that pushes page contents down

To implement:-
HTML

1. <header class="dropdown-menu">

2. Main page contents must be wrapped in class .pagedrop
<section class="col pagedrop">

CSS Below:

3. Adjust height of dropdown menu here, 100% full page.
.dropdown-menu
    top: -100%;
    height: 100%;

::::::::::::::::::::::::::::::::::::::::::::: */

.dropdown-menu {
  position: fixed;
  top: -70%;
  height: 70%;
  width: 100vw;
  left: 0;
  padding-top: 10vh;
  padding-bottom: 4em;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  transition: transform 900ms ease;
}

.dropdown-menu nav,
.dropdown-menu ul {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.dropdown-menu li {
  border-bottom: 0px solid #1f678a;
}

.dropdown-menu a {
  font-weight: 400;
  letter-spacing: 0.3em;
  color: #80ced7;
  display: block;
  padding: 1vh;
  transition: background-color 300ms ease-in;
  font-size: 1em;
}

.dropdown-menu a:hover {
  color: #dbf4a7;
}

.menu-icon p {
  opacity: 0;
}

@media only screen and (min-width: 56.25em) {
  /* :::::::::::::::::::::::::::::::::::::::::::::
Desktop Navigation Style===  Comment out section 1 or 2 below.
::::::::::::::::::::::::::::::::::::::::::::: */

  /* :::::::::::::::::::::::::::::::::::::::::::::
1.  Horizontal Desktop Navigation
////////////////////////////////////////// */

  /* .dropdown-menu a {
        font-size: 1em;
    }

    .dropdown-menu {
        padding: 0;
        left: 0;
        height: auto;
        background-color: transparent;
    }

    .dropdown-menu {
        top: 0;
        height: auto;
        padding-top: 2vh;
        padding-bottom: 2vh;
    }

    .dropdown-menu nav,
    .dropdown-menu ul {
        height: 10vh;
        width: 100vw;
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        justify-content: space-around;
        -webkit-box-align: center;
        align-items: center;
    }

    .mobile-bar {
        display: none;
    }

    .menu-icon {
        display: none;
    } */

  /* :::::::::::::::::::::::::::::::::::::::::::::
2.  Mobile Style Hamburger Menu on Desktop Navigation

THE "DISPLAY" properties on 
.mobile-bar
.menu-icon
are the key to displaying the hamburger and mobile bar with logo,
as the navigation.

.header nav, .header ul
width determines the width of the navigation that slides onto the screen.
width: 100vw;  is full screen!!
////////////////////////////////////////// */

  .dropdown-menu a {
    font-size: 2em;
  }

  .menu-icon p {
    font-size: 4em;
    opacity: 1;
  }

  .dropdown-menu nav,
  .dropdown-menu ul {
    width: 100vw;
  }

  .mobile-bar {
    display: flex;
  }

  .menu-icon {
    display: block;
  }
}

/* :::::::::::::::::::::::::::::::::::::::::::::

MOBILE APP BAR MOBILE APP MODULE

::::::::::::::::::::::::::::::::::::::::::::: */

.mobileappbar {
  z-index: 9;
  background: transparent;
  background-color: rgba(76, 60, 62, 0.8);
  width: 100vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0;
  position: fixed;
  bottom: 0;
  height: 8vh;
}

.mobileappbar p {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #f6f6f6;
  letter-spacing: 0.3em;
  font-size: 0.825em;
  line-height: 1em;
}

.mobileappbarbutton {
  flex: 1;
  min-width: calc(100% / 4);
  /* background: rgba(0, 0, 0, 0.9); */
  background: transparent;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0px;
  text-align: center;
  /* border-right: rgba(64, 63, 76, 0.8) solid 1px; */
  padding: 2vh;
}

.last {
  border-right: 0px;
}

@media only screen and (min-width: 56.25em) {
  .mobileappbar {
    display: none;
  }
}

/* :::::::::::::::::::::::::::::::::::::::::::::

FOOTER  SECTION

::::::::::::::::::::::::::::::::::::::::::::: */

.footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  bottom: 0;
  margin-bottom: 8vh;
  /* margin-bottom 8vh is to allow for the mobile app bar at bottom.
If is not a mobile app.  apply margin-bottom: 0;
    margin-bottom: 0; */
}

.footer p {
  font-size: 0.8em;
  line-height: 1.5em;
  color: #8d8c8a;
}

.footer a {
  font-size: 0.8em;
  line-height: 1.5em;
  color: #8d8c8a;
}

/* :::::::::::::::::::::::::::::::::::::::::::::

L A Y O U T

::::::::::::::::::::::::::::::::::::::::::::: */

/* TO INCLUDE BACKGROUND IMAGE ON PAGE::: */
/* background: url(img/hero.jpg) no-repeat center left fixed;
	background-size: cover; */

/*---------------------
	GLOBAL LAYOUT STYLES
---------------------*/
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  transition: transform 900ms ease;
}

.pagedrop {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10vh;
  transition: transform 900ms ease;
}

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.rowcol {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.colrow {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.colhalf {
  width: 100%;
}

@media only screen and (min-width: 75em) {
  .page {
    /* -webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center; */
    align-items: center;
  }

  .pagedrop {
    justify-content: center;
    align-items: center;
  }

  .rowcol {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .colrow {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .colhalf {
    width: 50%;
  }
}

.angle-top {
  -webkit-clip-path: polygon(0 20%, 100% 0%, 100% 100%, 0 100%);
  clip-path: polygon(0 20%, 100% 0%, 100% 100%, 0 100%);
}
/*---------------------
	INDIVIDUAL PAGE LAYOUTS
---------------------*/

.landing {
  height: 90vh;
  background: var(--brand-white);

  /* background: url(../img/bglarge.jpg) no-repeat top center fixed;
  background-size: cover; */
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  -webkit-clip-path: polygon(0 0%, 100% 0, 100% 100%, 0 85%);
  clip-path: polygon(0 0%, 100% 0, 100% 100%, 0 85%);
}

.landing-content {
  /* height: 90vh; */
  background: var(--brand-white);
  /* -webkit-clip-path: polygon(0 0%, 100% 0%, 85% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0%, 85% 100%, 0 100%); */
  justify-content: center;
  align-items: center;
}

.landing h1 {
  font-family: 'Poppins', sans-serif;
  color: var(--brand-black);
  line-height: 1em;
  font-size: 3.8em;
  font-weight: 700;
  /* color: #ff734c; */
}

.landing p {
  color: var(--brand-purple);
  font-size: 1.5em;
}

@media only screen and (min-width: 56.25em) {
  .landing h1 {
    font-size: 7em;
  }

  .landing p {
    font-size: 2em;
  }

  .landing-content {
    width: 100%;
  }

  .landing-image img {
    -webkit-clip-path: polygon(0 0%, 100% 2.5%, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 2.5%, 100% 100%, 0 100%);
  }
}

.landing-hero {
  min-height: 100vh;
  width: 100%;
  background: transparent;
  justify-content: center;
  align-items: center;
}

.landing-hero h2 {
  font-family: 'rangetregular';
  font-family: 'Poppins', sans-serif;
  font-weight: 200;
  font-size: 2em;
  line-height: 0.5em;
  -webkit-margin-before: 0em;
  margin-block-start: 0em;
  -webkit-margin-after: 0em;
  margin-block-end: 0em;
  color: var(--brand-white);
}

script {
  font-family: 'rangetregular';
}
@media only screen and (min-width: 56.25em) {
  /* .landing-hero {
    background-position: bottom center;
  } */
  .landing-hero h2 {
    font-size: 7em;
  }
}

.hero {
  min-height: 100vh;
  width: 100%;
  background: url('../img/bglarge2.jpg');
  background-size: cover;
  background-position: top right -32vw;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  justify-content: flex-start;
  align-items: center;
  padding-top: 40vh;
}
.hero-col {
  margin-top: 70vh;
  background-color: #f7f7f7c6;
  border-radius: 50px;
  width: 90vw;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  padding: 2vh;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}
.blue-col {
  /* background-color: var(--brand-dkblue); */
  width: 100%;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
}
.hero h1 {
  font-family: 'rangetregular';
  font-weight: 200;
  font-size: 9em;
  line-height: 0.5em;
  -webkit-margin-before: 0em;
  margin-block-start: 0em;
  -webkit-margin-after: 0em;
  margin-block-end: 0em;
  margin-top: 10vh;
  color: var(--brand-dkblue);
}

.hero h2 {
  line-height: 1em;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  color: var(--brand-blue);
  font-size: 5em;
}
.hero h3 {
  line-height: 1em;
  font-family: 'Poppins', sans-serif;
  font-weight: 200;
  color: var(--brand-blue);
  font-size: 4em;
}
.vl {
  border-left: 6px solid var(--brand-blue);
  height: 50vh;
}

.hero p {
  font-weight: 300;
  letter-spacing: 0.1em;
}
.hero50 {
  height: 10vh;
  width: 100%;
}

@media only screen and (min-width: 56.25em) {
  .hero {
    background-position: top center;
  }
  .hero-col {
    margin-top: 0;
    background-color: transparent;
    width: 50vw;
    padding: 0;
  }
  .hero-col h1 {
    font-size: 15em;
  }
  .hero-col h3 {
    padding-bottom: 0vh;
  }
  .hero50 {
    height: 50vh;
    width: 100%;
  }

  .vl {
    border-left: 6px solid var(--brand-blue);
    height: 50vh;
  }
}

.what {
  min-height: 120vh;
  width: 100%;
  background: var(--brand-blue);
  background: url('../img/bglarge3.jpg');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;

  justify-content: center;
  align-items: center;
  padding: 2vh;
  line-height: 0.5em;
}

.what h2 {
  line-height: 1em;
  letter-spacing: 0em;
  font-family: 'Source Sans Pro', sans-serif;
  font-family: 'rangetregular';
  color: var(--brand-grey);
  color: var(--brand-dkblue);
  font-size: 7em;
  font-weight: 100;
}

.what p {
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--brand-black);
  color: var(--brand-dkblue);
}

.what h1 {
  font-family: 'rangetregular';
  font-family: 'Poppins', sans-serif;
  color: var(--brand-white);
  line-height: 1em;
  padding-right: 0;
  font-size: 2em;
  font-weight: 200;
}

.what h2 {
  font-size: 3em;
}

.what-col {
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
}

@media only screen and (min-width: 56.25em) {
  .what {
    padding: 0vh;
  }
  .what h1 {
    font-size: 4.5em;
    font-weight: 100;
    line-height: 2em;
    padding-right: 2vw;
  }
  .what h2 {
    font-size: 7em;
  }
}

.mission {
  min-height: 30vh;
  width: 100%;
  justify-content: center;
  align-items: center;
  background-color: var(--brand-dkblue);
  opacity: 0.8;
  padding: 2vh;
  text-align: center;
}

.mission h2 {
  font-family: 'Poppins', sans-serif;
  color: var(--brand-sand);
  font-weight: 100;
  font-size: 2.2em;
}

.mission p {
  color: var(--brand-white);
  text-transform: none;
}

@media only screen and (min-width: 56.25em) {
  .mission h2 {
    font-size: 7em;
  }
}

.definition {
  min-height: 50vh;
  width: 100%;
  background: var(--brand-white);
  justify-content: center;
  align-items: flex-start;
  padding: 10vh;
}

.definition h2 {
  line-height: 1em;
  letter-spacing: 0em;
  font-family: 'Source Sans Pro', sans-serif;
  font-family: 'rangetregular';
}

.definition p {
  text-transform: uppercase;
  color: var(--brand-black);
}

.definition h1 {
  font-family: 'rangetregular';
  font-weight: lighter;
  color: var(--brand-blue);
  font-size: 8em;
  line-height: 1em;
}

.work {
  height: 30vh;
  width: 100%;
  justify-content: center;
  align-items: center;
  background-color: var(--brand-sand);
  opacity: 0.8;
}

.work h2 {
  font-family: 'rangetregular';
  font-family: 'Poppins', sans-serif;
  font-weight: 200;
  font-size: 3em;
  line-height: 0.5em;
  -webkit-margin-before: 0em;
  margin-block-start: 0em;
  -webkit-margin-after: 0em;
  margin-block-end: 0em;
  color: var(--brand-dkblue);
}

@media only screen and (min-width: 56.25em) {
  .work h2 {
    font-size: 7em;
  }
}

.projects {
  background: var(--brand-white);
  min-height: 100vh;
  width: 100%;
}

.projects h2 {
  font-family: 'rangetregular';
  font-size: 5em;
  font-weight: 100;
  color: var(--brand-dkblue);
  line-height: 1em;
}

.projects h3 {
  color: var(--brand-blue);
}

.projects p {
  font-weight: 300;
  letter-spacing: 0.1em;
}

.projects-col {
  background-color: #f7f7f7c6;
  border-radius: 50px;
  width: 90vw;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: center;
  padding: 2vh;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}

.projects-film {
  width: 100%;
  flex-wrap: wrap;
}

.film-card {
  width: 100%;
  height: auto;
  margin: 0;
}

.projects img {
  filter: saturate(1);
  -webkit-filter: saturate(1);
  transition: all 1.2s ease 0s;
  -webkit-transition: all 1.2s ease 0s;
  -moz-transition: all 1.2s ease 0s;
  -ms-transition: all 1.2s ease 0s;
  -o-transition: all 1.2s ease 0s;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

.projects img:hover {
  filter: saturate(1.3);
  -webkit-filter: saturate(1.3);
  cursor: pointer;
}
.offset-row {
  margin-top: 5vh;
}

.vlprojects {
  height: 10vh;
}

.title-col {
  padding: 2vh;
  text-align: center;
}

.projects-individual {
  width: 100%;
}

@media only screen and (min-width: 56.25em) {
  .projects-col {
    margin-top: 0;
    background-color: transparent;
    width: 50vw;
    padding: 0;
  }
  .projects h2 {
    font-size: 10em;
  }
  .projects img {
    filter: saturate(1);
    -webkit-filter: saturate(1);
    transition: all 1.2s ease 0s;
    -webkit-transition: all 1.2s ease 0s;
    -moz-transition: all 1.2s ease 0s;
    -ms-transition: all 1.2s ease 0s;
    -o-transition: all 1.2s ease 0s;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
  }
  .level-row {
    margin-top: 0;
  }
  .offset-row {
    margin-top: -25vh;
  }
  .title-col {
    flex: 4;
    text-align: center;
    padding: 2vh;
  }
  .line-col {
    flex: 4;
    padding: 2vh;
  }
  .image-col {
    /* flex: 4; */
    padding: 0vh;
  }
  .projects-individual {
    width: 70%;
  }
  .film-card {
    width: calc(100% / 3);
    height: auto;
    margin: 0 1vh;
  }
}

.musicpage p {
  font-family: var(--heading-font);
}

.music {
  width: 100%;
  min-height: 90vh;
  background: var(--brand-white);
  height: auto;
  /* background: url('../img/bgphone.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; */
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 5vh;
}

.music h2 {
  color: var(--brand-blue);
  font-size: 1.8em;
  line-height: 1.2em;
}

.music h4 {
  color: var(--brand-purple);
  line-height: 1.2em;
}

.banner {
  width: 100%;
  align-items: center;
  padding: 2vh;
}
.cta {
  width: 100%;
  background: var(--brand-white);
  /* background: var(--brand-blue); */
  text-align: center;
}

.cta h4 {
  color: var(--brand-dkblue);
  line-height: 1.2em;
}

.cta p {
  font-weight: 400;
}
.blueintro {
  width: 100%;
  background: var(--brand-blue);
  /*background: var(--brand-sand);
  */
  padding: 2vh;
  text-align: center;
  margin: 5vh;
  border-radius: 5vh;
  -webkit-border-radius: 5vh;
  -moz-border-radius: 5vh;
  -ms-border-radius: 5vh;
  -o-border-radius: 5vh;
}

.blueintro h2 {
  color: var(--brand-white);
  font-size: 1.5em;
  line-height: 1.2em;
}

.blueintro p {
  font-weight: 300;
}

.bluetext p {
  color: var(--brand-dkblue);
}

.magazine {
  width: 100%;
  background: var(--brand-blue);
  background: #38b1c2;
  padding: 0vh;
  text-align: center;
}
.magcover {
  width: 100%;
  height: auto;
}

@media only screen and (min-width: 56.25em) {
  .music {
    height: 90vh;
    text-align: left;
  }
  .music p {
    text-align: left;
  }
  .music h2 {
    font-size: 3.8em;
    line-height: 1.2em;
  }
  .banner {
    min-width: 50%;
    align-items: flex-start;
  }
  .blueintro {
    width: 50%;
  }
  .blueintro h2 {
    font-size: 2.5em;
    margin-bottom: 0em;
  }
  .magcover {
    width: 50%;
    height: auto;
  }
}

.musictroy {
  width: 100%;
  background: var(--brand-black);
  background: var(--brand-dkblue);
  min-height: 100vh;
  text-align: center;
}
.musictroy h2 {
  color: var(--brand-blue);
  line-height: 1.5em;
}
.musictroy p {
  color: var(--brand-sand);
}

.artwork {
  width: 95%;
  height: auto;
  margin: 2vh;
}

.album {
  width: 95%;
  height: auto;
  margin: 2vh;
}

.posts {
  background: black;
  background: var(--brand-black);
}

.reel {
  width: 100%;
  height: auto;
  margin: 0;
}

@media only screen and (min-width: 56.25em) {
  .artwork {
    width: 30%;
  }
  .album {
    width: 25%;
  }
  .reel {
    width: 25%;
    height: auto;
  }
}

.links {
  width: 100%;
  min-height: 90vh;
  background: var(--brand-white);
  height: auto;
  /* background: url('../img/bgphone.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; */
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding-top: 10vh;
}

.links h2 {
  color: var(--brand-blue);
  font-size: 1.8em;
  line-height: 1.2em;
}

.linksblock {
  width: 90vw;
  height: auto;
  background-color: var(--brand-dkblue);
  color: var(--brand-white);
  padding: 2vh;
  justify-content: flex-start;
}
.linksblock p {
  color: var(--brand-white);
}
.linksblock img {
  max-width: 25vw;
}
.linkstext {
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}

.blockinv {
  background-color: var(--brand-blue);
  color: var(--brand-dkblue);
}

.blockinv p {
  color: var(--brand-dkblue);
}

@media only screen and (min-width: 56.25em) {
  .links h2 {
    font-size: 3.8em;
    line-height: 1.2em;
  }
  .linksblock {
    width: 50vw;
  }
}

/* VIDEO ON PAGE SETTINGS:::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* VIDEO ON PAGE SETTINGS:::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* VIDEO ON PAGE SETTINGS:::::::::::::::::::::::::::::::::::::::::::::::::::: */

.iframe-container {
  position: relative;
  width: 100%;
  padding: 2vh;
  margin: 1 auto;
}

.iframe-container .ratio {
  display: block;
  width: 100%;
  height: auto;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.iframe-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.spotify {
  max-width: 95vw;
}

@media only screen and (min-width: 56.25em) {
  /* .video-page {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	text-align: center;
	} */

  /* .iframe-container {
    width: 100%;
    margin: 0 2vw;
  } */

  .spotify {
    max-width: 60vw;
  }
}

.linkBox {
  min-height: 10vh;
  width: 80%;
  border-bottom: 1px solid #2f6185;
}

.linkLogo {
  flex: 3;
  padding: 1vh;
  margin-right: 10vw;
}

.linkButton {
  flex: 2;
  padding: 1vh 2vh;
  border: 1px solid #2f6185;
  cursor: pointer;
}

.linkButton p {
  font-size: 0.8em;
}

.linkButton:hover {
  background-color: #2f6185;
}

.linkButton:hover p {
  color: #f9f9f9;
}

@media only screen and (min-width: 56.25em) {
  .linkBox {
    width: 50%;
  }
}

/* LANDING PAGE CONTACT SECTION CSS /////////////////////////////////////////////// */
.landing-bottom-image {
  background: url('../img/bgbeach-2.jpg');
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  width: 100%;
  min-height: 100vh;
  background-color: var(--brand-darkblue);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  text-align: center;
  padding: 2vh;
  padding-top: 70vh;
}

.landing-contact {
  /* background: url('../img/bgbeach-2.jpg');
  background-size: cover;
  background-position: bottom right -60vw;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover; */
  background: var(--brand-blue);
  opacity: 0.8;
  width: 100%;
  max-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  text-align: center;
  padding: 2vh;
}

.landing-contact p {
  color: var(--brand-white);
}

.landing-contact h4 {
  color: var(--brand-dkblue);
  font-family: var(--script-font);
  font-size: 7em;
  font-weight: 100;
  line-height: 1em;
}

@media only screen and (min-width: 56.25em) {
  .landing-contact {
    background-position: bottom center;
  }
}

.made {
  width: 100%;
  background: var(--brand-white);
}

.project-thumb-row {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}

.project-thumb-row-small {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  -moz-column-gap: 2vh;
  column-gap: 2vh;
  padding: 0 2vh;
}

@media only screen and (min-width: 56.25em) {
  .project-thumb-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .project-thumb-row-small {
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: 5vh;
    column-gap: 5vh;
  }
  .two-tile {
    grid-template-columns: repeat(2, 1fr);
  }
  .one-tile {
    grid-template-columns: 1fr;
  }
}

.portfolio-page {
  background-color: var(--brand-white);
  padding: 0;
  margin: 0;
  padding-top: 5vh;
  justify-content: start;
}

.portfolio-page h2 {
  color: var(--brand-dkblue);
  font-family: var(--script-font);
  font-size: 4em;
  font-weight: 100;
  line-height: 1em;
}

.portfolio-head {
  width: 100%;
  /* height: 70vh; */
  justify-content: center;
  padding: 5vh;
  text-align: center;
  background-color: var(--brand-white);
}
.portfolio-head h5 {
  color: var(--brand-white);
  color: var(--brand-blue);
  font-weight: 400;
  line-height: 1.2em;
}
.portfolio-page h2 {
  font-family: var(--script-font);
  font-weight: 100;
  color: var(--brand-dkblue);
}

.portfolio-row {
  width: 100%;
  flex-wrap: wrap;
}
.portfolio-row h4 {
  font-family: var(--heading-font);
  font-family: 'Inter', sans-serif;
  font-weight: 200;
}
.portfolio-col {
  width: 100%;
}
@media only screen and (min-width: 56.25em) {
  .portfolio-head {
    padding: 5vh 60vh;
  }
  .portfolio-row {
    width: 100%;
    flex-wrap: wrap;
  }
  /* .portfolio-col {
    width: calc(100% / 5);
  } */
  .column {
    width: calc(100% / 3);
  }
}

.portfolio-textbox {
  width: 20vw;
  height: 20vw;
  border: 2px solid var(--brand-black);
  justify-content: center;
  align-items: center;
}

.white-text {
  color: var(--brand-white);
}

.banana-yellow {
  background-color: #f9884a;
  background-color: #f9c54f;
}

.portfolio-logo {
  max-width: 30vw;
}

@media only screen and (min-width: 56.25em) {
  .portfolio-page h2 {
    font-size: 6em;
  }

  .portfolio-col {
    width: calc(100% / 2);
    min-height: 70vh;
  }
}

.portfolio-col {
  width: 100%;
  justify-content: center;
  align-items: center;
  height: 35vh;
}

.portfolio-image {
  width: 50vw;
}

.void {
  width: 100%;
  height: 50vh;
  background: url('../img/projects/blues/Imaged-Blues-And-Berries-BG1.jpg');
  background-position: center right -70vw;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.white {
  background-color: var(--brand-white);
}

.blues {
  background-color: var(--brand-white);
}
.blues-teal {
  background-color: #50a1b2;
}
.blues-purple {
  background-color: #794fa1;
}
.blues-purple h5 {
  color: var(--brand-white);
}

@media only screen and (min-width: 56.25em) {
  .portfolio-image {
    width: 25vw;
  }
  .void {
    background-position: center center;
  }
}

/* client page///////////////////////////// */

.client-page {
  width: 100%;
  background-color: var(--brand-white);
  padding-top: 10vh;
}

.client-page-head {
  width: 100%;
  height: 30vh;
  align-items: flex-start;
  padding: 2vh;
}

.client-page-head h1 {
  font-weight: 100;
  font-size: 1.9em;
  border-bottom: 2px solid var(--brand-blue);
}
.client-page-head span {
  font-weight: 300;
  color: var(--brand-blue);
}

@media only screen and (min-width: 56.25em) {
  .client-page-head h1 {
    font-size: 6em;
  }
}

.imgrot {
  transform: rotate(-8deg);
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -webkit-filter: drop-shadow(5px 5px 10px #000);
  filter: drop-shadow(5px 5px 10px #000);
}

.client-content h2 {
  font-family: var(--script-font);
  font-weight: 200;
  font-size: 6em;
  color: var(--brand-blue);
}

.client-content-text-box {
  padding: 0 5px;
}

.per30,
.per60 {
  width: 100%;
}

@media only screen and (min-width: 56.25em) {
  .per30 {
    width: 30%;
  }
  .per60 {
    width: 60%;
  }
}

.overflow-image {
  justify-content: flex-end;
  height: 100%;
  overflow-x: hidden;
}

.thank-you {
  height: 100vh;
  justify-content: center;
  align-items: center;
  padding-bottom: 20vh;
}
.thank-you h2 {
  font-family: var(--script-font);
  font-weight: 100;
  font-size: 7em;
  color: var(--brand-dkblue);
  line-height: 1em;
}

.contact {
  min-height: 100vh;
  background: #f6f6f6;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  /* background: url(../img/bgmobile2.jpg) no-repeat center left fixed;
  background-size: cover; */
}

.contact h5 {
  font-weight: 400;
}

.contactContent {
  min-height: 70vh;
  background: rgba(255, 255, 255, 0.8);
  width: 100%;
  flex: 1;
  padding: 2vh;
  /* margin-top: 40vh; */
}
/* .join {
  background: url(../img/bglarge3.jpg) no-repeat center center fixed;
} */
.bio {
  align-items: flex-start;
}
.bio p {
  text-align: justify;
}

@media only screen and (min-width: 56.25em) {
  .contact {
    background: url(../img/bglarge2.jpg) no-repeat center left fixed;
    padding: 0 20vw;
  }

  .contactContent {
    background: transparent;
    height: auto;
    margin-top: 5vh;
  }

  .join {
    background: url(../img/bglarge2.jpg) no-repeat center left fixed;
  }
}

.promo {
  min-height: 100vh;
  background: #f6f6f6;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(198, 226, 255, 1) 100%
  );
}

.promoContent {
  padding: 2vh;
  align-items: flex-end;
}

@media only screen and (min-width: 56.25em) {
  .promo {
    /* background: url(../img/bglarge.jpg) no-repeat center center fixed; */
    padding: 0;
    padding-top: 5vh;
  }

  .promoHead {
    justify-content: flex-start;
    align-items: center;
  }
}

.start {
  justify-content: flex-start;
  margin: 2vh 0;
}

.skinBox {
  justify-content: flex-start;
  background: #e6aa80;
  width: 60vw;
}

.bio {
  padding: 2vh;
  width: 95vw;
  text-align: left;
}

.bio p {
  font-size: 1em;
  line-height: 1.25;
}

.bio h3 {
  color: #f9f9f9;
}

@media only screen and (min-width: 56.25em) {
  .bio {
    width: 45vw;
  }

  .bio p {
    font-size: 1.2em;

    line-height: 1.75;
  }
}

.pressImages {
  flex-wrap: wrap;
}

/*---------------------
	INSTALL WEBAPP PAGE
---------------------*/
.installwebapp {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(198, 226, 255, 1) 100%
  );
  padding: 2vh;
  padding-top: 12vh;
  /* padding-bottom: 8vh; */
}

.installwebapp h1 {
  color: #fefefe;
}

.installwebapp p {
  color: #9eb3c2;
}

.installPage {
  background: #4c3c3e;
  padding: 2vh;
}

.installPage p {
  color: #c6e2ff;
  text-align: center;
  font-size: 0.9em;
  line-height: 1.2em;
}

.spaced {
  justify-content: space-around;
}

@media only screen and (min-width: 75em) {
  .installwebapp {
    padding: 2vh;
    padding-top: 12vh;
  }

  .installwebapp h1 {
    font-size: 3em;
  }
}

/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-color: #fefefe;
  margin: 25% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: auto;
  /* Could be more or less, depending on screen size */
}

.modal-image {
  width: 90%;
  height: auto;
}

.hide {
  display: none;
}

#myBtn .show {
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  color: #222;
  text-transform: uppercase;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.3);
  background: #fff;
  /* padding: 20px; */
  border: 0px solid #fefefe;
  border-radius: 15px;
  display: inline-block;
  transition: all 0.4s ease 0s;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 0.8em;
  font-weight: 400;
  letter-spacing: 0.2rem;
  /* padding: 1.2vh 2.4vh; */
  cursor: pointer;
  margin: 2vh;
  margin-top: 10vh;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

.install-prompt {
  width: 90%;
  height: auto;
  margin: 0 auto;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.close2 {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close2:hover,
.close2:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.chrome {
  display: block;
}

/* :::::::::::::::::::::::::::::::::::::::::::::

FORMS

::::::::::::::::::::::::::::::::::::::::::::: */

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
  width: 100%;
  padding: 2vh;
}

.form-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin: 0 auto;
  text-align: left;
}

.form-group input {
  border: none;
  border-bottom: 1px solid #f6f6f6;
  border-radius: 0;
  background-color: transparent;
  padding: 15px;
  flex: 1;
  width: 100%;
  height: 5vh;
  font-size: 1em;
  color: var(--brand-grey);
  margin: 0 0 20px 0;
  flex-basis: 100%;
  font-family: 'Roboto Condensed', sans-serif;
}

.form-group ::-webkit-input-placeholder {
  font-family: 'Roboto Condensed', sans-serif;
  color: var(--brand-dkblue);
  cursor: text;
}

.form-group ::-moz-placeholder {
  font-family: 'Roboto Condensed', sans-serif;
  color: var(--brand-dkblue);
  cursor: text;
}

.form-group :-ms-input-placeholder {
  font-family: 'Roboto Condensed', sans-serif;
  color: var(--brand-dkblue);
  cursor: text;
}

.form-group ::-ms-input-placeholder {
  font-family: 'Roboto Condensed', sans-serif;
  color: var(--brand-dkblue);
  cursor: text;
}

.form-group ::placeholder {
  font-family: 'Roboto Condensed', sans-serif;
  color: var(--brand-dkblue);
  cursor: text;
}

.form-group textarea {
  padding: 15px;
  width: 100%;
  height: 15vh;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1em;
  color: var(--brand-dkblue);
  background-color: #ffffffcc;
  margin: 5vh 0 5vh 0;
  border: none;
  border: 1px solid #f6f6f6;
}

select {
  width: 100%;
  padding: 1vh;
}

.form-group label {
  color: var(--brand-grey);
}

.form-button {
  display: inline-block;
  color: #fff;
  border-radius: 4px;
  text-transform: uppercase;
  background-color: transparent;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 0.8em;
  font-weight: 400;
  letter-spacing: 0.3rem;
  text-align: center;
  padding: 2vh 4vh;
  border: 1px solid #fff;
  cursor: pointer;
  margin: 2vh;
  box-shadow: 0px 8px 15px rgb(0 0 0 / 30%);
  transition: all 0.4s ease 0s;
}

.form-button:hover {
  background-color: var(--brand-gold);
  color: var(--brand-white);
}

.small-form {
  width: 100%;
}

@media only screen and (min-width: 56.25em) {
  .small-form {
    width: 25%;
  }
}

/* EMAIL SPAM FILTER CSS///////////////////////// */
#email_add {
  display: none;
}

/* -------------
 SITE COLORS
 ------------- */
.brandgreen {
  color: #9dc2ac;
}

.brandskin {
  color: #e6aa80;
}

.brandgrey {
  color: #aec1c0;
}

.branddarkgrey {
  color: #757083;
}

.brandwhite {
  color: #f9f9f9;
}

.brandblack {
  color: #080c0e;
}

.bgBrandGreen {
  background-color: #9dc2ac;
}

.bgBrandSkin {
  background-color: #e6aa80;
}

.bgBrandGrey {
  background-color: #aec1c0;
}

.bgBrandDarkgrey {
  background-color: #757083;
}

.bgBrandWhite {
  background-color: #f9f9f9;
}

.bgBrandBlack {
  background-color: #080c0e;
}

.bgCoral {
  background-color: #ff734c;
}

.h5 {
  height: 5vh;
}

.h10 {
  height: 10vh;
}

.h20 {
  height: 20vh;
}

.h30 {
  height: 30vh;
}

.h40 {
  height: 40vh;
}

.h50 {
  height: 50vh;
}

.h60 {
  height: 60vh;
}

.h70 {
  height: 70vh;
}

.h80 {
  height: 80vh;
}

.h90 {
  height: 90vh;
}

.w5 {
  width: 5vw;
}

.w10 {
  width: 10vw;
}

.w20 {
  width: 20vw;
}

.w30 {
  width: 30vw;
}

.w40 {
  width: 40vw;
}

.w50 {
  width: 50vw;
}

.w60 {
  width: 60vw;
}

.w70 {
  width: 70vw;
}

.w80 {
  width: 80vw;
}

.w90 {
  width: 90vw;
}

.w100 {
  width: 100vw;
}

.w50100 {
  width: 100vw;
}

@media only screen and (min-width: 56.25em) {
  .w50100 {
    width: 50vw;
  }
}

/* EMAIL SPAM FILTER CSS///////////////////////// */
#email_add {
  display: none;
}

.desktopOnly {
  display: none;
}

.mobileOnly {
  display: inline;
}

@media only screen and (min-width: 56.25em) {
  .desktopOnly {
    display: inline;
  }

  .mobileOnly {
    display: none;
  }
}

@media only screen and (min-width: 37.5em) {
  .desktopOnly {
    display: inline;
  }

  .mobileOnly {
    display: none;
  }
}
/* ///////////////////////////////////////////////////////////////////////////////////////////////
THIS IS THE CSS TO MAKE FULL BACKGROUND IMAGES WORK ON IOS DEVICES
This Media Query, targets IOS devices only (AS AT April 2021)
Include every page that has full page background image in here and add the property
background-attachment: initial;
/////////////////////////////////////////////////////////////////////////////////////////////// */

@supports (-webkit-touch-callout: none) {
  body {
    background-size: auto 100vh;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }
  .landing-hero {
    background: url('../img/bgbeach.jpg');
    background-size: cover;
    background-position: bottom right -60vw;
    background-size: auto 100vh;
    background-repeat: no-repeat;
    background-attachment: initial;
  }
  .hero {
    background-size: auto 100vh;
    background-repeat: no-repeat;
    background-attachment: initial;
  }
  .hero-col {
    margin-top: 20vh;
  }
  .what {
    background-size: auto 100vh;
    background-repeat: no-repeat;
    background-attachment: initial;
  }
  .landing-bottom-image {
    padding-top: 5vh;
    background-size: auto 100vh;
    background-repeat: no-repeat;
    background-attachment: initial;
  }
  .thank-you {
    background-size: auto 100vh;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }
}
/* ///////////////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////////////// */