/*Main Section*/

* 
{
  font-size: 1.2em;
}

/*Home*/
main .home
{
  display: grid;
  grid-row-gap: 15px;
}
main .home .phone
{
  margin-top:30px;
}
main .homeText
{
  display: grid;
  grid-row-gap: 15px;
  padding:0px 30px 0px 30px;
}
main .homeText h1
{
  font-weight: bold;
  font-size: 1.4em;
}
main .homeText p
{
  text-align: justify;
}

main .homeText ul
{
  height: 50%;
  display:flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
main .homeText ul li
{
  flex:0 1 153px;
}

@media only screen and (min-width: 600px) {
  main .home
  {
    display:grid;
    grid-template-columns: 2fr 1fr;
    padding-top: 40px;
  }
  main .home .phone
  {
    grid-column: 1;
    transform: translate(-26%, 0);
    z-index: -1;
  }
  main .homeText
  {
    grid-template-rows: auto auto 2fr;
    transform: translate(-40%, 0);
    grid-row-gap: 15px;
    margin-top: 25px;
  }
  main .homeText h1
  {
    grid-column: 2;
    font-size: 1.6em;
    text-align: left;
    align-self: end;
  }
  main .homeText p
  {
    grid-column: 2;
  }
  main .homeText ul
  {
    grid-column: 2;
    justify-content: space-around;
  }
}
/*End Home*/

/*Library*/
main .library
{
  display:grid;
  grid-template-columns: 10% auto 10%;
  grid-template-rows: 1fr;
  padding-bottom: 3%;
}

.library .newSongs
{
  grid-column: 2;
  display:grid;
}

.library h1
{
  font-size: 1.8em;
  font-weight: bold;
  text-align: center;
  padding:5%;
}

.library .libraryAlbumArtContainer
{
  display: flex;
  justify-content: space-between;
  align-items:flex-start;
}
.library .libraryAlbumArtContainer img
{
  width: 12%;
}

.library p
{
  justify-self: center;
  padding-top:4%;
  width:80%;
  text-align: center;
}

.library .request
{
  grid-column: 2;
  display:grid;
}

.library .request img
{
  justify-self: center;
  width:80%;
}

@media only screen and (max-width: 600px) {
  main .library
  {
    grid-template-columns: 8% auto 8%;
  }
  .library h1
  {
    font-size: 1.4em;
    padding:5% 0 5% 0;
  }
  .library p
  {
    width:100%;
    padding-top: 5%;
  }
  .library .request img
  {
    width: 100%;

  }
}

/*End Library*/

/*Courses*/
main .courses
{
  display:grid;
  grid-template-columns: 10% auto 10%;
  padding-bottom: 3%;
  padding-top: 3%;
}

.courses figure
{
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 35% 65%;
}

.courses figure img
{
  grid-column: 1 / span 3;
  grid-row: 1 / span 2;
}
.courses figure .imageCaption
{
  grid-column: 1 / span 3;
  grid-row: 1;
  text-align: center;
  align-self: end;
  color: #FFF;
  font-weight: bold;
  font-size: 1.8em;
}

.courses figure .imageText
{
  grid-column: 1 / span 3;
  grid-row:2;
  justify-self:center;
  align-self: start;
  color: #FFF;
  padding:1% 7% 0% 7%;
}

.courses .coursesContainer
{
  display:grid;
  grid-column: 2;
  grid-row-gap: 20px;
  margin-top: 10%;
}
.courses .coursesContainer ul
{
  justify-self: center;
  display:flex;
  flex-wrap:wrap;

}

.courses .coursesContainer ul li
{
  padding:.6em 1.1em .6em 1.1em;
  border-radius:20px;
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;
}

.courses .coursesContainer ul li:hover {
  cursor: pointer;
}

.externalLink {
  color: blue;
}

#mostPopularMenu
{
  background-color: #FF7900;
  color:#FFF;
}

#allInstruments,
#guitar,
#bass,
#keyboard,
#drums {
  display:none;
}

.courses article
{
  display: grid;
  grid-row-gap: 30px;
  margin-bottom: 100px;
}
.courses article .courseRow
{
  display: grid;
  grid-template-columns: 45% 55%;
  grid-template-rows: auto 30px auto;
  grid-column-gap: 1%;
  border-top:4px solid white;
  padding-top: 25px;
}

.courses article .courseRow:first-child
{
  margin-top:0;
}

.courses article .courseRow aside
{
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(25px, 1fr) 2fr;
  grid-column-gap: 5%;
}

/*.courses article .courseRow aside img.class_icon
{
  grid-column: 1;
  align-self: start;
  justify-self: center;
  height: 40px;
  margin-top:15%;
}*/

.courses article .courseRow aside img.class_cover
{
  grid-column: 1;
  align-self: start;
  justify-self: center;
  height: 100px;
}

.courses article .courseRow div.classInfo
{
  grid-column: 2;
  display:grid;
  grid-row-gap: 2%;
  grid-template-rows: 2fr auto;
  word-break: break-word;
}

.courses article .courseRow div.teacherLink
{
  grid-column: 1 / span 2;
  grid-row: 3;
  align-self: center;
  justify-self: center;
  white-space: nowrap;
}

.courses article .courseRow div h1
{
  font-size:1.4em;
  font-weight: bold;
  /*margin-bottom: 10px;*/
}

.courses article .courseRow p
{
  font-size:.9em;
}

.courses article .courseDescription p
{
  font-size:1em;
}

@media only screen and (max-width: 912px) {
  .courses figure
  {
    grid-template-rows: 30% auto;
  }
  .courses figure .imageCaption
  {
    font-size: 1.4em;
    place-self:center;
    align-self: center;
    justify-self:center;
  }
  .courses figure img
  {
    height:100%;
    width: 100%;
    grid-row:1;
  }
  .courses figure .imageText
  {
    text-align: center;
    grid-row: 3;
    font-size: .9em;
    padding: 5% 7% 0% 7%;
  }
  .courses figure .imageText
  {
    color:#343434;
  }
}

@media only screen and (max-width: 600px) {
  main .courses
  {
    grid-template-columns: 8% auto 8%;
  }
  .courses .coursesContainer
  {
    margin-top: 20%;
  }
  .courses .coursesContainer ul
  {
    flex-direction: column;
  }
  .courses .coursesContainer ul li
  {
    font-size: .95em;
  }
  .courses article .courseRow
  {
    grid-template-columns: 1fr;
    grid-row-gap:25px;
  }
  .courses article .courseRow aside
  {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: 1fr;
    grid-row-gap: 30px;
    
  }
  .courses article .courseRow aside img.class_cover
  {
    grid-column: 1;
    grid-row: 1;
  }
  .courses article .courseRow div.classInfo
  {
    grid-column: 1;
    grid-row: 2;
    grid-template-rows: auto 20px auto;
  }
  .courses article .courseRow div h1
  {
    align-self: center;
    justify-self: center;
  }
  .courses article .courseRow .courseDescription
  {
    grid-column: 1;
    grid-row: 2;
  }
  .courses article .courseRow div.teacherLink
  {
    grid-column: 1;
    grid-row: 3;
    white-space: initial;
    word-break:break-word
  }
  /*.courses article .courseRow aside img.class_icon
  {
    margin-top:5%;
    grid-row: 1;
  }*/
  .courses article .courseDescription p
  {
  }
}
/*End Courses*/

/*Support*/
main .support
{
  display:grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.support .support-message
{
  display: none;
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  text-align: center;
  margin:5%;
  background-color: #FFF;
  box-shadow: 0px 0px 8px 0px #FF7900;
  border-radius:30px;
  padding:10%;
}

.support h1
{
  grid-column: 2;
  grid-row: 1;
  font-size: 2em;
  font-weight: bold;
  justify-self:center;

}

.support .form-support
{
  justify-self:center;
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-row-gap: 5%;
  width:85%;
}
.support .form-support div
{
  display: grid;
}
/*End Support*/

.faq, .privacy, .terms, .forgot, .activation, .about
{
  padding:5%;
}
.forgot, .activation
{
  text-align: center;
}
.forgot h1, .activation h1, .team h1
{
  font-weight: bold;
  margin-bottom: 3%;
}

.team 
{
  padding: 3% 2% 3% 2%;
}
.team h1 
{
  text-align: center;
  font-size:2em;
  margin-bottom: 3%;
  background-color: #FF7900;
  color: #FFF;
  box-shadow: -80px 0px 0px -0px #FF7900,
  80px 0px 0px -0px #FF7900;
}
.teamContainer
{
  display:flex;
  justify-content: space-between;
}
.teamText
{
  display: flex;
  flex-direction: column;
}
.teamText span
{
  font-weight: bold;
}
.teamText p
{
  line-height: 26px;
}
.teamText p:first-of-type
{
  margin-top: 5%;
}

.contentBox
{
  background-color: transparent;
}

.missingPage
{
  display: grid;
  grid-template-columns: .5fr 1fr .5fr;
}
.missingPage .logo
{
  grid-column: 1;
  grid-row: 1;
}
.missingPage .banner_content
{
  grid-column: 2;
  grid-row: 1; 
}

@media only screen and (max-width: 600px) {
  .teamContainer
  {
    flex-direction: column;
    text-align: center;
  }
  .teamText p:last-of-type
  {
    margin-bottom: 5%;
  }
  .facebookLoginContainer
  {
    grid-column: 1 / span 3;
  }
  .missingPage .banner_content
  {
    grid-column: 2;
    grid-row: 1; 
  }
}

/*End of Main Section*/

/*LoginForm*/
.loginPage
{
  display: grid;
  grid-template-rows: .1fr 3fr .1fr;
  grid-template-columns: .5fr 1fr .5fr;
  width:100%;
  height: 100%;
}

.loginPage .loginForm
{
  grid-row: 2;
  grid-column: 2;
  background-color: white;
  min-height: 500px;
}

.loginPage .loginForm form
{
  width:100%;
  height: 100%;
  min-height: 500px;  
  display: grid;
  grid-template-rows: repeat(4, 1fr) 2fr;
  grid-template-columns: .1fr 1fr.1fr ;
}
  
.loginPage .loginForm form h1
{
  grid-row: 1;
  grid-column: 2;
  justify-self:center;
  align-self:end;
  font-weight: bold;
  font-size: 2em;
}

.loginPage .loginForm form .loginErrorHeader
{
  background-color: rgb(255, 153, 153, .6);
  padding:2% 0 2% 0;  
  font-size: .8em;
  font-weight: normal;
  border-radius: 5px;
  color:#800000;
  width:100%;
  text-align: center;
}

.loginPage .loginForm form .email
{
  grid-row: 2;
  grid-column: 2;
  justify-self:center;
  align-self:end;
}
.loginPage .loginForm form .password
{
  grid-row: 3;
  grid-column: 2;
  justify-self:center;
  align-self:end;
}
.loginPage .loginForm form .loginButton
{
  grid-row: 4;
  grid-column: 2;
  justify-self:center;
  align-self:end;
  /*Reset button style*/
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  /*End Reset button style*/
  font-weight: bold;
  border: 3px solid #FF7900;
  border-top-left-radius: 5% 50%;
  border-bottom-left-radius: 5% 50%;
  border-top-right-radius: 5% 50%;
  border-bottom-right-radius: 5% 50%;  
}

.loginPage .loginForm a
{
  grid-row: 5;
  grid-column: 2;
  justify-self: center;
  color: #FF7900;
  text-decoration: underline;
  margin: auto;
}

.loginPage .loginForm form p
{
  color:#666;
  transition: .5s;
  width:90%;
  height:20%;
  margin-bottom: 2%;
  transform: translateY(-190%);
}
/*When hovering on the paragraph, input text or focusing in the input text*/
/*.loginPage .loginForm form p:hover, .loginPage .loginForm form input:hover + p, .loginPage .loginForm form input:focus + p
{
  transform: translateY(-190%);
}*/
.loginPage .loginForm form input
{
  width:90%;
  height:40%;
}
.loginPage .loginForm form input[type="text"], .loginPage .loginForm form input[type="password"]
{
  border:none;
  border-bottom:2px solid #ccc;
}
.loginPage .loginForm form input[type="text"]:focus, .loginPage .loginForm form input[type="password"]:focus
{
  outline: none;
}
.loginPage .loginForm form .email:focus ~ div[class="email"], .loginPage .loginForm form .email:hover ~ div[class="email"]
{
  transform: scaleX(1);
  transform-origin: 0% 50%;
  background-color: #FF7900;
}
.loginPage .loginForm form .password:focus ~ div[class="password"], .loginPage .loginForm form .password:hover ~ div[class="password"]
{
  transform: scaleX(1);
  transform-origin: 0% 50%;
  background-color: #FF7900;
}

.loginPage .loginForm form div
{
  width:90%;
  height: 2px;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
  background-color: #FF7900;
  transform-origin: 0% 50%;
}





/*PasswordChangeForm*/
.passwordChangePage
{
  display: grid;
  grid-template-rows: .1fr 4fr .1fr;
  grid-template-columns: .5fr 1fr .5fr;
  width:100%;
  height: 100%;
  min-height: 660px;
}

.passwordChangePage .loginForm
{
  grid-row: 2;
  grid-column: 2;
  background-color: white;
  min-height: 500px;
}

.passwordChangePage .loginForm form
{
  width:100%;
  height: 100%;
  min-height: 500px;  
  display: grid;
  grid-template-rows: repeat(4, 1fr) 2fr;
  grid-template-columns: .1fr 1fr.1fr ;
}
  
.passwordChangePage .loginForm form h1
{
  grid-row: 1;
  grid-column: 2;
  justify-self:center;
  align-self:end;
  font-weight: bold;
  font-size: 2em;
}

.passwordChangePage .loginForm form .errorHeader
{
  background-color: rgb(255, 153, 153, .6);
  padding:2% 0 2% 0;  
  font-size: .8em;
  font-weight: normal;
  border-radius: 5px;
  color:#800000;
  width:100%;
  text-align: center;
}

.passwordChangePage .loginForm form .successHeader
{
  background-color: rgba(121, 212, 121, 0.6);
  padding:2% 0 2% 0;  
  font-size: .8em;
  font-weight: normal;
  border-radius: 5px;
  color:#023502;
  width:100%;
  text-align: center;
}

.passwordChangePage .loginForm form .password
{
  grid-row: 2;
  grid-column: 2;
  justify-self:center;
  align-self:end;
}
.passwordChangePage .loginForm form .newPassword
{
  grid-row: 3;
  grid-column: 2;
  justify-self:center;
  align-self:end;
}
.passwordChangePage .loginForm form .retypePassword
{
  grid-row: 4;
  grid-column: 2;
  justify-self:center;
  align-self:end;
}
.passwordChangePage .loginForm form .loginButton
{
  grid-row: 5;
  grid-column: 2;
  justify-self:center;
  align-self:center;
  /*Reset button style*/
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  /*End Reset button style*/
  font-weight: bold;
  border: 3px solid #FF7900;
  border-radius: 30px;
  height: 20%;
}
.passwordChangePage .showPassword {
  position: absolute; 
  right: 0; 
  top: 40px;
  cursor: pointer;
}

.passwordChangePage .loginForm a
{
  grid-row: 5;
  grid-column: 2;
  justify-self: center;
  color: #FF7900;
  text-decoration: underline;
  margin: auto;
}

.passwordChangePage .loginForm form p.password,
.passwordChangePage .loginForm form p.newPassword,
.passwordChangePage .loginForm form p.retypePassword
{
  color:#666;
  transition: .5s;
  width:90%;
  height:20%;
  margin-bottom: 2%;
  transform: translateY(-190%);
}
/*When hovering on the paragraph, input text or focusing in the input text*/
/*.passwordChangePage .loginForm form p:hover, .passwordChangePage .loginForm form input:hover + p, .passwordChangePage .loginForm form input:focus + p
{
  transform: translateY(-190%);
}*/
.passwordChangePage .loginForm form input
{
  width:90%;
  height:40%;
}

.passwordChangePage .loginForm form input[type="text"], 
.passwordChangePage .loginForm form input[type="password"]
{
  border:none;
  border-bottom:2px solid #ccc;
}

.passwordChangePage .loginForm form input[type="text"]:focus, 
.passwordChangePage .loginForm form input[type="password"]:focus
{
  outline: none;
}

.passwordChangePage .loginForm form .password:focus ~ div[class="password"], 
.passwordChangePage .loginForm form .password:hover ~ div[class="password"],
.passwordChangePage .loginForm form .newPassword:focus ~ div[class="newPassword"], 
.passwordChangePage .loginForm form .newPassword:hover ~ div[class="newPassword"],
.passwordChangePage .loginForm form .retypePassword:focus ~ div[class="retypePassword"], 
.passwordChangePage .loginForm form .retypePassword:hover ~ div[class="retypePassword"]
{
  transform: scaleX(1);
  transform-origin: 0% 50%;
  background-color: #FF7900;
}

.passwordChangePage .loginForm form div
{
  width:90%;
  height: 2px;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
  background-color: #FF7900;
  transform-origin: 0% 50%;
}




@media only screen and (max-width: 600px) {
  .loginPage .loginForm
  {
    grid-row: 1 / span 3;
    grid-column: 1 / span 3;
  }

  .passwordChangePage .loginForm
  {
    grid-row: 1 / span 3;
    grid-column: 1 / span 3;
  }

  .passwordChangePage .showPassword {
    top: 25px;
  }
}

.loginPage .loginForm form .passwordSuccessHeader
{
  background-color: rgb(50,205,50);
  padding:2% 0 2% 0;
  font-size: .8em;
  font-weight: normal;
  border-radius: 5px;
  color:green;
  width:100%;
  text-align: center;
}

.passwordChangePage .loginForm form .passwordSuccessHeader
{
  background-color: rgb(50,205,50);
  padding:2% 0 2% 0;
  font-size: .8em;
  font-weight: normal;
  border-radius: 5px;
  color:green;
  width:100%;
  text-align: center;
}

#passwordForm
{
  grid-template-rows: repeat(3, 1fr) 1fr;
}

#passwordSubmit
{
  grid-row: 3;
}