/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* a {
    text-decoration:none;
} */

/* UTILITY CLASSES */
.flex {
    display:flex;
}
.flex-space-between {
    justify-content:space-between;
}
.flex-align-center {
    align-items:center;
}
.strikethrough {
    text-decoration:line-through;
}
.text-center {
    text-align:center;
}
.flex-center {
    display:flex;
    justify-content:center;
    align-items:center;
}
.full-width {
    width:100%;
}

.gb-headline-c668fca2 strong, .gb-headline-4aaa17b3 strong {
    color:var(--yellow);
}

form#form_front-page-email-capture div.frm_fields_container {
    display:flex;
    gap:0;
  }

form#form_front-page-email-capture label.frm_primary_label {
    display:none;
  }

form#form_front-page-email-capture input {
    height:4rem;
    width:100%;
    border-radius:5px 0 0 5px;
    border:1px 0 1px 1px solid black;
    background:#FFFFFF;
}

form#form_front-page-email-capture button {
    height:4rem;
    border-radius:0 5px 5px 0;
    border: 1px solid black;
    border-left:none;
    font-weight:bold;
  }

form#form_front-page-email-capture div.frm_form_field.form-field.frm_top_container {
    flex-grow:4;
  }

  /***************** Sign in form styling *****************/
  div.login-username label, div.login-password label {
    display:none !important;
  }

  #user_login2, #user_pass2 {
    height:4rem;
    width:100%;
  }
  #user_login2::placeholder, #user_pass2::placeholder {
    color:#757575;
    font-size:17px;
  }

  #wp-submit2 {
    height:4rem;
    background:linear-gradient(
                  45deg
                  ,#990404 20%,#970404 40%,#990404 60%,#A52424 80%,#990404 100%
              );
    width:100%;
    border:1px solid black;
    box-shadow: none;
    font-weight:700;
    font-size:17px;
    line-height:1.5;
  }

  .gb-container-1f266dd6 {
    width:100% !important;
  }

  #rememberme2 {
    margin-right:7px;
    margin-bottom:5px;
    background:#9D9D9D;
  }

  div.login-remember .frm_checkbox label {
    font-size:17px !important;
    color:#FFF !important;
  }


  /***************** Slide in monitor animation in hero section *****************/
  .hero-monitor {
    animation: slideinLoad 1s;
    animation-fill-mode: forwards;
  }

  @keyframes slideinLoad {
    from {
      opacity: 80%;
      transform: translateX(10%) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
  }
  .nav-item-1 {
    animation: signinLoad .8s;
    animation-fill-mode: forwards;
  }
  .nav-item-2 {
    animation: signinLoad .8s;
    animation-delay: .2s;
    animation-fill-mode: forwards;
  }

    @keyframes signinLoad {
        from {
            opacity: 0;
            transform: translateY(-50%);
        }


        to {
            transform: translateX(0);
        }
    }

    .learn-anywhere-devices {
        animation: learnAnywhereLoad 1s;
        /* delay animation by 1 second */
        animation-delay: 1s;
        animation-fill-mode: forwards;
        opacity:0;
    }

    @keyframes learnAnywhereLoad {
        0% {
        opacity: 0;
        transform: translateX(-20%) scale(0.8) rotate(-10deg);
        }
        20% {
            opacity: 1;
        }
        100% {
            opacity: 1;
            transform: translateX(0) scale(1) rotate(0deg);
        }
    }

    /* make hero section button shimmer */
    @keyframes shimmer {
        0% {
            background-position: -1000px 0;

        }
        100% {
            background-position: 1000px 0;
        }
    }

    form#form_front-page-email-capture button {
        background:
            linear-gradient(
                45deg
                ,#990404 20%,#970404 40%,#990404 60%,#A52424 80%,#990404 100%
            );
        background-size: 1000px 100%;
        animation: shimmer 5s infinite;
    }

    /* make hero section h1 text fade in */
    @keyframes spiritDown {
        0% {
            opacity: 0;
            transform:translateY(-20px);
        }
        10% {
            opacity: 0.8;
        }
        100% {
            opacity: 1;
            transform:translateY(0);
        }
    }

    /* make navigation submenu on hover rounded corners */
    ul.sub-menu {
      border-radius:10px;
    }
    ul.sub-menu li:hover {
      border-radius:10px;
    }
    ul.sub-menu li a:hover {
      border-radius:10px;
    }

/*********** SHEET MUSIC CSS ***********/
/* div.sheet-music {
  height:59.5%;
} */
div.sheet-music img {
  width:auto;
  height:100%;
}


div.sheet-music {
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:flex-start;
  width:auto;
  height:59.5%;
  position:absolute;
  top:-1.9%;
}
div.sheet-music-page {
  display:flex;
  visibility:hidden;
  width:0%;
  height:100%;
  box-shadow: rgba(0, 0, 0, 0.25) 5px 0px 15px;
}
div.sheet-music-page.shown {
  visibility:visible;
  width:auto;
}
div.sheet-music img {
  object-fit:contain;
}

/* make sheet seem like it's turning */
div.sheet-music-page {
  transition: all 1s ease-in-out;
  cursor:pointer;
}

body.page-id-1314 {
  background-image:url('https://prodmembers1.wpengine.com/wp-content/uploads/2023/06/Sheet-Music-BG-P7v2.png');
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

.sheet-music-grid {
  display:flex;
  height:100%;
  width: 100%;
  max-width:100%;
  flex-wrap:wrap;
  column-gap:2rem;
  row-gap:2rem;
  margin-left:auto;
  margin-right:auto;
}

.sheet-music-post {
  display:flex;
  flex-direction:column;
  text-align:center;
  flex-basis:18%;
  background:#FFF;
  padding:1rem;
  border-radius:2rem;
  border: 2px solid var(--yellow);
  min-height:300px;
  height:450px;
  transition:all .3s ease-in-out;
}

.sheet-music-post:hover {
  transform:scale(1.05);
}

.sheet-music-post h3 {
  font-size:1.5rem;
}

/* h1 {
  text-align:center;
}

h2 {
  text-align:center;
} */

div.sheet-music-filter {
  display:flex;
  flex-direction:row;
  width:100%;
  flex-wrap:wrap;
  margin-left:auto;
  margin-right:auto;
}

form.sheet-music-filter-form {
  width:100%;
  max-width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content: stretch;
  column-gap:2rem;
  row-gap:1rem;
}

form.sheet-music-filter-form div {
  display:flex;
  flex-direction:column;
  /* flex-basis:20%; */
}

form.sheet-music-filter-form label {
  color:var(--white);
  font-weight:bold;
}

form.sheet-music-filter-form div.sheet-music-filter-form-search {
  display:flex;
  flex-basis:100%;
  flex-direction:row;
}

form.sheet-music-filter-form div.sheet-music-filter-form-search-box {
  flex-basis:100%;
}

form.sheet-music-filter-form div.sheet-music-filter-form-search-box label {
  display:none;
}

form.sheet-music-filter-form div.sheet-music-filter-submit-button {
  display:flex;
  flex-basis:140px;
}

form.sheet-music-filter-form div.sheet-music-filter-submit-button input {
  background-color:var(--yellow);
  color:var(--teal);
}

/* Don't underline links in the footer */
.inside-footer-widgets a {
  text-decoration:none;
}

/* .site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:999;
} */


.masthead-semicircle-feature {
  position:absolute;
  display:flex;
  justify-content: center;
  align-items: center;
  right:0;
  top:35%;
  width:140px;
  height:150px;
  color:var(--navy);
  padding:1rem;
  border-radius:70% 0 0 70%;
  background:var(--yellow);
}

.masthead-semicircle-feature p {
  margin-bottom:0;
}

/* Elipsis Loading Spinner */
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--navy);
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

.sheet-music-version-options-dropdown-buttons {
  background:var(--yellow);
  border-radius:1rem;
  padding:1rem;
  max-height:3.5rem;
  overflow:hidden;
}

.sheet-music-version-options-dropdown-buttons:hover {
  max-height:unset;
}

form input[type="text"], form input[type="email"], form input[type="password"] {
  border-radius:5px;
  width: 100%;
  margin-bottom: 1rem;
}

form input[type="submit"], form button {
  border:0;
  border-radius:5px;
  width: 100%;
}

form input[type="submit"].wp-block-search__button, form button.wp-block-search__button {
  width: 75px !important;
}

form label {
  font-size: .9rem;
    font-weight: 700;
}

button#change-password-button {
    background-color: var(--teal) !important;
    color: var(--white);
    border:0;
    border-radius:5px;
    font-size:1rem;
}

form#membership-signup-form input[type="text"], form#membership-signup-form input[type="email"], form#membership-signup-form input[type="password"], #card-element {
  border-radius:5px;
}

form#membership-signup-form #submit-button {
  background-color: var(--red) !important;
  color: var(--white);
  border:0;
  border-radius:5px;
  font-size:1.6rem;
}

form#membership-signup-form #submit-button:hover {
  background: #D02425 !important;
}


div.user_alert {
    position:absolute;
    right:-100%;
    top:4rem;
    width:300px;
    background-color:white;
    border: 2px solid #52C3C3;
    border-radius: 1rem;
    padding: .5rem 1rem .5rem 1rem;
    color:black;
    transition: all .5s ease-in-out;
    font-family: Nunito;
  }

div.user_alert.shown {
    transform:none;
    right:1rem !important;
  }

 div.user_alert span {
    color:#E92124;
    font-weight:bold;
  }

div.user_alert a {
    color:#52C3C3;
  }

/* Custom grey background for customer portal pages */
body.page-id-4227 {
    background: #F5F5F5;
}