/* All CSS written by Jeffrey B. Madden 2023. */

@media only screen and (max-width: 1200px) {
   #home { display:none; }
   #halfstack { margin-left:25px; }
   #nav_guitar { display:none; }
   #nav_a { top:25px; }
   #nav_b { top:25px; }
   #gallery { width:85%; }
}

@media only screen and (max-width: 1030px) {
   body {
      padding-top:90px;
      background-image:url('images/bg_medium_01.png');
      background-repeat:no-repeat;
      background-size:120% auto;
   }

   body * {
      text-size-adjust:none;
      -webkit-text-size-adjust:none;
      -moz-text-size-adjust:none;
   }

   h1 {
      line-height:40px;
      margin-top:0px;
      font-size:34px;
      letter-spacing:2px;
   }

   h2 {
      line-height:40px;
      margin-top:80px;
      font-size:34px;
      letter-spacing:2px;
   }

   h1::after {
      margin-right:-30px;
      transform:scale(0.7,0.7);
      -webkit-transform:scale(0.7,0.7);
      -moz-transform:scale(0.7,0.7);
      transform-origin:left 60%;
      -webkit-transform-origin:left 60%;
      -moz-transform-origin:left 60%;
   }

   /* Halfstack */

   #halfstack { margin:0px; }

   /* Amplifier */

   #amp {
      position:fixed;
      left:-100%;
      top:0px;
      width:100%;
      height:100%;
      margin:0px;
      border:0px;
      padding:0px;
      background-image:none;
      background-color:SlateGrey;
      box-sizing:border-box;
      transition:left 0.3s linear;
      -webkit-transition:left 0.3s linear;
      -moz-transition:left 0.3s linear;
      z-index:10;
   }

   #console {
      position:relative;
      left:initial;
      bottom:initial;
      width:100%;
      height:100%;
      margin:0px;
      border:0px;
      padding:50px 0px 0px 0px;
      box-sizing:border-box;
      overflow-y:scroll;
   }

   #amp.open { left:0px; }
   #amp.closed { left:-100%; }
   #amp .extras { display:block; }

   #amp div:not(#console):not(.logo):not(#nav_closer), #amp a {
      display:block;
      float:none;
      left:initial;
      height:56px;
      line-height:56px;
      width:100%;
      background-image:none;
      background-color:transparent;
      box-sizing:border-box;
   }

   #amp a {
      padding-left:40px;
      border-bottom:2px solid Black;
      font-size:40px;
      text-indent:0px;
      text-align:left;
      letter-spacing:2px;
      color:Black;
      box-sizing:border-box;
   }

   #menu_button { display:block; }
   #nav_closer { display:block; }
   #amp a:hover, #amp a:active { background-color:#94a0ac; }
   #amp a:first-of-type { border-top:2px solid Black; }
   #amp .extras a:first-of-type { border-top:0px; }
   #amp .extras a:last-child { margin-bottom:70px; }
   #amp a .knob { display:none; }
   #amp .logo { display:none; }
   #amp a .switch, #amp a .jack { display:none; }
   #nav_a, #nav_b { display:none; }

   iframe.hme {
      display:block;
      float:none;
      width:100%;
      height:auto;
      margin:0px auto 50px auto;
      border:0px;
   }

   form {
      overflow-y:visible;
   }

   /* Cabinets */

   .cabinet {
      left:initial;
      width:100%;
      height:auto;
      margin:0px;
      border-bottom:3px solid SlateGrey;
      padding:80px 25px 80px 25px;
      background-image:none;
      overflow:visible;
   }

   .cabinet::after {
      content:"";
      display:block;
      position:absolute;
      left:50%;
      bottom:-28px;
      width:56px;
      height:56px;
      margin:0px 0px 0px -28px;
      border:0px;
      padding:0px;
      background-image:url('images/cabinet_footer_22.png');
      background-repeat:no-repeat;
      background-size:contain;
   }

   .cabinet:last-child {
      border-bottom:0px;
   }

   .cabinet:last-child::after {
      display:none;
   }

   #first_cabinet {
      padding-top:0px;
   }

   .cabinet .title {
      margin-bottom:50px;
      text-align:center;
   }

   .cabinet .title img.header, .thankyou_message .title img.header {
      margin:0px -200px 10px -200px;
      transform:scale(0.8,0.8);
      -webkit-transform:scale(0.8,0.8);
      -moz-transform:scale(0.8,0.8);
      transform-origin:center center;
      -webkit-transform-origin:center center;
      -moz-transform-origin:center center;
   }

   .cabinet .title img.header.small {
      transform:scale(0.6,0.6);
      -webkit-transform:scale(0.6,0.6);
      -moz-transform:scale(0.6,0.6);
   }

   .cabinet p {
      line-height:22px;
      font-size:14px;
   }

   .cabinet .title p {
      line-height:26px;
      font-size:16px;
      text-align:left;
   }

   .cabinet .title.sub { text-align:center; }
   .cabinet .title.sub .left_box { width:100%; padding-right:0px; }
   .cabinet .title.sub .header { margin-left:-200px; align-self:center; }
   .cabinet .title.sub .left_box { padding-right:0px; }

   /* Select Pages */

   /* Students */

   .students .box {
      display:block;
      float:none;
      width:100%;
      text-align:center;
      margin-bottom:50px;
   }

   .students h2 {
      margin-top:0px;
   }

   .students iframe {
      width:100%;
      height:auto;
      margin-top:0px;
   }

   .students .box:last-child {
      margin-bottom:30px;
   }

   /* Teachers */

   .teachers .profile {
      width:100%;
      margin:30px 0px 60px 0px;
   }

   .hiring_ad {
      margin:30px 0px 30px 0px;
      padding:15px;
   }

   .hiring_ad p {
      line-height:24px;
      text-align:left;
   }

   .closer {
      width:30px;
      height:30px;
   }

   /* Contact */

   .contact .profile {
      display:block;
      position:relative;
      float:none;
      width:60vw;
      margin:70px auto 70px auto;
   }

   .contact h1 {
      margin-top:50px;
      text-align:center;
   }

   .contact h1::after {
      display:none;
   }

   .contact .info {
      display:block;
      position:relative;
      width:75vw;
      margin:0px auto 0px auto;
   }

   /* Testimonials */

   .testimonials .profile {
      display:block;
      float:none;
      width:100%;
      height:auto;
      margin:30px auto 50px auto;
      background-image:none;
   }

   .testimonials .profile img {
      display:block;
      position:relative;
      left:initial;
      top:initial;
      width:100%;
      margin:0px;
   }

   .testimonials h2 {
      font-size:34px;
      margin-top:0px;
   }

   .testimonials p {
      font-size:14px;
   }

   .testimonials .quote {
      line-height:24px;
      font-size:14px;
      margin-bottom:30px;
   }

   /* News & Tablature */

   .cabinet.pop {
      padding-bottom:80px;
   }

   .cabinet.pop .pop_wrap {
      width:100%;
      flex-grow:initial;
   }

   .pop h1 {
      margin-bottom:10px;
      padding-top:0px;
   }

   .pop h1::after {
      display:none;
   }

   #first_cabinet .pop_wrap img {
      height:auto;
   }

   .cabinet.pop .pop_wrap img {
      display:block;
      float:none;
      width:50vw;
      height:auto;
      margin:0px auto 50px auto;
   }

   .pop .date {
      margin:0px 0px 50px 0px;
      font-size:12px;
   }

   .cabinet.pop .pop_wrap p {
      line-height:24px;
      font-size:16px;
   }

   #pop_wrap .bg, #pop_wrap .clicker {
      opacity:1.0;
   }

   #pop_wrap .content_wrap {
      width:100%;
      margin:0px;
      border:0px;
      border-radius:0px;
      border-image:none;
      -webkit-border-image:none;
      -moz-border-image:none;
      padding:80px 25px 80px 25px;
      background-image:none;
      box-shadow:initial;
   }

   #pop_wrap .closer {
      position:absolute;
      top:10px;
      right:10px;
   }

   /* Sign Up */

   .form h2 {
      font-size:34px;
   }

   .form .divider {
      float:none;
      width:100%;
   }

   .form .inputs input, .form .questions textarea, .form .inputs span {
      display:block;
      position:relative;
      float:none;
      width:100%;
   }

   .form .inputs input {
      height:36px;
      text-indent:8px;
      font-size:16px;
   }

   .form .questions textarea {
      min-height:50px;
   }

   .form .inputs span {
      height:auto;
      margin-top:25px;
      margin-bottom:0px;
      text-align:center;
      font-size:18px;
   }

   .form .buttons {
      flex-direction:column;
   }

   .form .sub, .form .res {
      display:block;
      position:relative;
      width:100%;
      height:44px;
      line-height:44px;
      margin:20px 0px 0px 0px;
      font-size:36px;
      letter-spacing:3px;
   }

   .form .level {
      width:100%;
      border-width:1px;
      align-self:center;
   }

   .form .box {
      width:46%;
      border-width:1px;
      margin:1%;
   }

   .form .input_wrap {
      margin-bottom:30px;
   }

   .form .input_wrap i {
      display:block;
      width:100%;
      margin:0px auto 30px auto;
      text-align:center;
      font-size:12px;
   }

   /* Lessons */

   #nav_tree {
      line-height:24px;
      margin:0px 0px 30px 0px;
      font-size:14px;
   }

   #nav_tree span {
      padding:0px 3px 0px 3px;
      font-size:30px;
   }

   .lesson_meter { display:none; }
   p.nodata { font-size:14px; }

   .lesson_frame {
      display:block;
      float:none;
      width:100%;
      height:auto;
      margin:0px 0px 60px 0px;
      border:0px;
      padding:0px;
      background-image:none;
   }

   .lesson_frame iframe {
      top:initial;
      width:100%;
      height:auto;
   }

   .lessons .lesson_nav {
      display:flex;
      width:100%;
      height:auto;
      margin:0px 0px 30px 0px;
      flex-direction:column;
      justify-content:center;
   }

   .lessons .lesson_nav a {
      position:relative;
      align-self:center;
      margin-bottom:8px;
   }

   .lessons .lesson_nav .beginner { left:initial; top:initial; }
   .lessons .lesson_nav .intermediate { left:initial; top:initial; }
   .lessons .lesson_nav .advanced { left:initial; top:initial; }

   .lessons .lesson_nav .arrow {
      display:none;
   }

   /* Locations */

   #mainmap {
      display:block;
      float:none;
      width:100%;
      margin-bottom:60px;
   }

   #mainmap h1 {
      padding-top:80px;
      font-size:36px;
      text-align:center;
   }

   #mainmap h1::after { display:none; }

   #mapframe {
      width:100%;
      height:40vh;
      margin-top:20px;
   }

   #locations a {
      line-height:40px;
      font-size:26px;
   }

   #locations a:nth-child(2) { margin-top:30px; }

   /* Misc. */

   img.showcase {
      display:block;
      float:none;
      width:100%;
      max-width:initial;
      height:auto;
      margin:30px auto 50px auto;
   }

   /* Thank You */

   .thankyou_message p, .thankyou_message a {
      line-height:26px;
      font-size:16px;
      font-family:Arial;
      letter-spacing:1px;
   }

   .thankyou_message a {
      width:110px;
      height:50px;
      line-height:50px;
      font-size:20px;
   }

   /* Footer */

   #footer_title { display:none; }

   #footer_title_app {
      display:block;
      position:relative;
      top:1px;
      width:80%;
      margin:0px auto 0px auto;
      border:0px;
   }

   #footer_locations, #footer_lessons, #footer_tablature, #icon_wrap div:not(#omp), #footer_cables, #footer_background {
      display:none;
   }

   #footer_wrap {
      padding-top:70px;
   }

   #footer {
      width:100%;
      height:auto;
      margin:0px;
   }

   #footer_main, #footer_social, #footer_main_b, #footer_news {
      display:block;
      position:relative;
      left:initial;
      top:initial;
      float:none;
      width:100%;
      height:auto;
      margin:0px;
      padding:0px;
   }

   #footer_main p, #footer_social p, #footer_main_b p, #footer_news p {
      display:block;
      float:none;
      width:auto;
      height:auto;
   }

   #footer_main a, #footer_main_b a, #footer_news a {
      display:block;
      float:none;
      width:auto;
      height:36px;
      line-height:36px;
      padding-left:30px;
      font-size:20px;
      text-align:left;
      text-transform:uppercase;
      text-decoration:none;
      color:SlateGrey;
   }

   #footer_main_b a:nth-child(2) { display:none; }
   #footer_main h3, #footer_social h3, #footer_main_b h3, #footer_news h3  { display:none; }

   #footer .separate {
      display:block;
      float:none;
      width:100%;
   }

   #footer_social {
      position:absolute;
      top:0px;
      right:30px;
      width:50px;
      height:auto;
      margin:0px;
      text-align:right;
      z-index:1;
   }

   #footer_social a {
      display:block;
      width:50px;
      height:50px;
      margin:0px 0px 20px 0px;
      border:0px;
      padding:0px;
      color:transparent;
      background-size:contain;
      background-repeat:no-repeat;
   }

   #footer_social a:nth-child(2) { background-image:url('images/nav_social_fb_05.png'); }
   #footer_social a:nth-child(3) { background-image:url('images/nav_social_ylp_03.png'); }
   #footer_social a:nth-child(4) { background-image:url('images/nav_social_yt_05.png'); }
   #footer_social a:nth-child(5) { background-image:url('images/nav_social_tw_05.png'); }

   #icon_wrap {
      padding-top:40px;
   }

   #icon_wrap .cell {
      margin:0px;
   }

   #icon_wrap .cell a {
      margin-top:20px;
   }

   #omp a img {
      bottom:initial;
   }

   #copyright {
      display:block;
      position:relative;
      width:100%;
      max-width:100%;
      height:auto;
      line-height:20px;
      margin-top:50px;
      padding:0px;
      font-size:8px;
      box-sizing:border-box;
   }

   /* Gallery */

   #gallery {
      width:100%;
      margin-top:0px;
      border:0px;
      border-radius:0px;
      border-image:none;
      padding-top:0px;
      background-image:none;
      box-shadow:none;
   }

   #image_wrap .row {
      height:200px;
   }

   #gallery_left_button, #gallery_right_button { display:none; }
   #closer { width:50px; height:50px; right:10px; top:10px; }
   #downloader { width:50px; height:50px; left:10px; top:10px; }

   #gallery_pop_wrap .description {
      margin-top:-70px;
   }

   #gallery_pop_wrap .description p {
      line-height:18px;
      padding:6px;
      font-size:14px;
   }
}

/* Gallery Queries */

@media (orientation: landscape) {
   #gallery_pop_wrap .image_contain { height:90vh;}
   #gallery_pop_wrap .gallery_image { height:100%; }
}

@media (orientation: portrait) {
   #gallery_pop_wrap .image_contain { width:90vw; }
   #gallery_pop_wrap .gallery_image { width:100%; }
}