/* Stylesheet CSS*/
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Oswald:wght@200;300;400;500;600;700&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cantata+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ramabhadra&display=swap');
/* 
font-family: 'Great Vibes', cursive;
font-family: 'Oswald', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Red Hat Text', sans-serif;
font-family: 'Cantata One', serif;
font-family: 'Ramabhadra', 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
-------------*/

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

html {
  font: normal 16px sans-serif;
  color: #555;
  font-family: 'Roboto Condensed', sans-serif;
  background: #fff;
}

ul,
nav {
  list-style: none;
}

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

a:hover {
  font-weight: bold;
}

body {
  max-width: 100vw;
}

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

p {
  color: #2d2d2d;
  font-family: 'Roboto Condensed', 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: 'Cantata One', serif;
  line-height: 2em;
}

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;
  }
}

.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: #fdfdfd;
  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: #fb6c2d;

  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.2rem;
  text-align: center;
  padding: 2vh 4vh;
  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-color: #ff734c;


}

.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 {
  min-width: 90%;
  background: #52d6f4;
  color: #408697;
}

.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) {
  .btnCta {
    min-width: 30%;
  }

  .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;
  }
}

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

IMG CLASSES

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

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

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

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

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

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

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

.iconInstall {
  max-width: 20vw;
  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;
}

.musicLinkLogo {
  max-width: 30vw;
  height: auto;
  margin: 1vw;
}

.cflogo {
  max-width: 40vw;
  height: auto;
}
@media only screen and (min-width: 56.25em) {
  .logo {
    max-width: 25vw;
  }

  .logoSmall {
    max-width: 15vw;
  }

  .iconSocial {
    max-width: 2vw;
  }

  .iconFooter {
    max-width: 2vw;
  }

  .iconInstall {
    max-width: 8vw;
  }

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

  .banner {
    max-width: 30vw;
  }

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

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

  .musicLinkLogo {
    max-width: 10vw;
    height: auto;
  }
  .cflogo {
    max-width: 20vw;
  }
}

/* -------------
 
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%;
  }
}

/*---------------------
	INDIVIDUAL PAGE LAYOUTS
---------------------*/

.landing {
  height: 100vh;
  background: #f6f6f6;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: center;
  /* background: linear-gradient(90deg, rgba(74, 75, 91, 1)0%, rgba(76, 60, 62, 0)70%, rgba(0, 0, 0, 0)100%), url(../img/bglarge.jpg) no-repeat top center fixed; */
  background: url(../img/bglarge.jpg) no-repeat top right fixed;
  background-size: cover;
  background-position: top 0 right -50vw;
  padding: 2vh;
  padding-top: 3vh;
}

.landingContent {
  padding-top: 5vh;
  width: 50%;
}

.landing h1 {
  color: #F7F7F7;
  line-height: 1em;
  font-size: 2em;  /* color: #ff734c; */
}

.landing h3 {
  font-family: 'Ramabhadra', sans-serif;
  line-height: 1em;
  font-weight: 800;
color: #232424;
}

.landing p {
  color: #f1c40f;
  color: #ff734c;
  color: #f9f9f9;
}

@media only screen and (min-width: 56.25em) {
  .landing {
    background: url(../img/bglarge.jpg) no-repeat top center fixed;
    background-position: top 0 right 0;
    padding-top: 1vh;

  }

  .landing h1 {
    font-size: 6em;
  }

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

  .landingContent {
    width: 80%;
    padding-top: 0;

  }
}

@media only screen and (min-width: 37.5em) {

  .landing {
    background-position: top 0 right -25vw;
  }
  .landing h1 {
    font-size: 3.8em;
  }

}

.hero {
  min-height: 100vh;
  width: 100%;
}

.hero h2 {
  line-height: 1em;
}

.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%;
  }
}


.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;
  justify-content: flex-start;
  align-items: flex-start;
  /* max-width: 100%;
	width: 100%; */
}

form p {
  color: #403f4c;
  font-size: 1.5vh;
}

form input {
  -webkit-appearance: textfield;
  background-color: white;
  -webkit-rtl-ordering: logical;
  cursor: text;
  padding: 1vh;
  border-width: 0.5px;
  border-style: inset;
  border-color: initial;
  -o-border-image: initial;
  border-image: initial;
  text-align: left;
  font-size: 1.8vh;
  margin-bottom: 4vh;
  width: 100%;
  border-radius: 5px;
  height: 40px;
}

form label {
  text-align: left;
  font-size: 1em;
  text-transform: capitalize;
  margin-bottom: 1vh;
  /* font-family: 'Poppins', sans-serif; */
  font-weight: 300;
}

input[type='button'i] {
  cursor: pointer;
  width: 50%;
  padding: 1vh 2vh;
  background: #408697;
  text-align: center;
}

input[type='checkbox'] {
  width: 5vw;
  height: 5vw;
  cursor: pointer;
  background: lightgrey;
}

select {
  -webkit-appearance: textfield;
  background-color: white;
  -webkit-rtl-ordering: logical;
  cursor: text;
  padding: 1px;
  border-width: 1px;
  border-style: inset;
  border-color: initial;
  -o-border-image: initial;
  border-image: initial;
  text-align: left;
  font-size: 2vh;
  color: #403f4c;
  width: 100%;
  cursor: pointer;
}

textarea {
  width: 100%;
}

.file-upload-box {
  background: #1c89df;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2vw;
  border-bottom: 1px solid #fff;
}

.lightBlue {
  background: #82cafe;
}

.lighterBlue {
  background: #96b7e4;
}

@media only screen and (min-width: 56.25em) {
  input[type='checkbox'] {
    width: 1vw;
    height: 1vw;
    cursor: pointer;
    background: lightgrey;
  }
}

.detailsForm {
  max-width: 90vw;
  background: #8d8c8a;
  padding: 1vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap');

/* font-family: 'Poppins', sans-serif; */

.formpage {
  background: #cc280c;
  height: 100vh;
  width: 100%;
}

.newform {
  width: 95vw;
  background: #f6f6f6;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2vh;
}

.newform h2 {
  font-family: 'Poppins', sans-serif;
  color: #363538;
  font-weight: 800;
}

.newform input {
  border-radius: 15px;
  padding: 2vh;
  background: #e0e0e0;
  border-width: 0;
  font-family: 'Poppins', sans-serif;
  color: #363538;
  font-weight: 600;
  margin-bottom: 1.5vh;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
}

.newform textarea {
  border-radius: 25px;
  padding: 2vh;
  background: #e0e0e0;
  border-width: 0;
  font-family: 'Poppins', sans-serif;
  color: #363538;
  font-weight: 600;
  margin-bottom: 1.5vh;
}

input[type='submit'i] {
  cursor: pointer;
  background: #ff734c;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0.3rem;
  color: #f6f6f6;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 1vh 2vh;
  /* width: auto; */
  /* margin: 0 auto; */
}

input[type='submit'i]:hover {
  background: #757083;
}

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

figure {
  margin: 0 5vh;
}

figcaption {
  font-size: 1.5em;
}

audio {
  background-color: #c6e2ff;
  padding: 1vh;
}


/* 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: 45vw;
    margin: 0 2vw;
  }

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


/* -------------
 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;
}

/* ///////////////////////////////////////////////////////////////////////////////////////////////
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) {
  .landing {
    background-attachment: initial;
  }

  .contact {
    background-attachment: initial;
  }

  .join {
    background-attachment: initial;
  }

}

/* ///////////////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////////////////////// */