@font-face {
  font-family: 'Amazon-medium';
  src: url('fonts/OfficinaSanITCTT_Medium/OfficinaSanMdITCTTMedium.woff2') format('woff2'),
      url('fonts/OfficinaSanITCTT_Medium/OfficinaSanMdITCTTMedium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Amazon';
  src: url('fonts/transfonter.org-20201231-020448/OfficinaSanBlkITCTTBlack.woff2') format('woff2'),
      url('fonts/transfonter.org-20201231-020448/OfficinaSanBlkITCTTBlack.woff') format('woff');
  font-weight: 900; font-style: normal; font-display: swap;
}

#logo { position: relative; width: 100px; height: 70px; }

html, body { margin: 0px; padding: 0px; }

#search { display: none; }

@media screen and (max-width: 1000px) {
  
  .desktop-only { display: none; } /* Gets rid of things I want just on the desktop */

  /* Header */        
      #header { margin: 0%; position: absolute; background-color: #131921; width: 110%; height: 95px; top: 0px; }
      
      #logo { position: absolute; margin: 0%; top: 8px; left: 33%; height: 85px; width: 25%; }

      .contactbutton { background: none!important; border: none; padding: 0!important; font-family: "Amazon-medium";
          text-decoration: none; cursor: pointer; }
  
  /* top of screen / social bar */ 
  
      #social-bar { position: absolute; background-color: #232f3e; top: 95px; width: 100%; height: 45px; padding-top: 10px; padding-left: 8px; }

      .social { height: 30px; width: 30px; background-color: #232f3e; margin-left: 3%; border: 3px white; margin-right: 3%; }
  
  /* Midsection of page / All info in between header bars & footer */
      #middle { position: relative; top: 150px; margin: 0; padding: 0; }

      #directory { position: relative; top: 25px; left: 7.5%; font-family: "Amazon-medium"; margin: 5px; font-size: 15px; color: #878989; }
      
      #pic-area { position: absolute; top: 45px; left: 20%; }

      #headshot { position: relative; top: 20px; height: 220px; width: 220px; }
      
      #mobile-warning { position: relative; font-size: 15px; margin: 0px 0px 10px 0px; color: #31a9d8; }

      #product-info { position: relative; left: 10%; width: 80%; margin: 0; margin-left: 5px; padding-bottom: 100px; top: 36vh; font-family: "Amazon-medium"; float: left; }

      #name { position: relative; top: 0px; margin: 0px; padding: 0px; font-size: 22px; }

      #manufacturer { position: relative; font-size: 14px; top: 5px; color:#007185; margin: 0; }

      #five-star { position: relative; top: 8px; width: 70px; height: 25px; }

      #ratings { position: relative; margin: 0; left: 80px; top: -17px; font-size: 14px; color: #007185}

      hr { background-color: #ededed; position: relative; margin-top: 10;}
      
      #line-price { position: relative; margin: 0; top: -10px; font-size: 20px; }
      
      #intro-paragraph { position: relative; margin: 0; top: 2px; font-size: 16px; line-height: 28px; text-decoration: none; }

      #specifications { position: relative; margin: 0; top: 30px;  }

      #spec-list { position: relative; margin: 0; top: 40px; line-height: 25px; font-size: 15px; }

      #qualifications { position: relative; margin: 0; top: 58px; }

      #qualification-list { position: relative; margin: 0; top: 70px; line-height: 25px; font-size: 15px; }

  /* Modal styling, modal is accessible via many buttons / links on the site */
      .modal { width: 100%; height: 174%; position: absolute; top: 0; background-color: rgba(0, 0, 0, 0.7); z-index: 8; justify-content: center; display: none; }

      .modal-content { position: relative; top: 300px; width: 80%; height: 250px; background-color: #eaeded; border-radius: 4px; }
      
      #modal-contact { position: absolute; top: 0px; left: 35%;  font-size: 30px; font-family: "Amazon-medium"; }

      #contact-info { position: absolute; top: 70px; left: 25%; font-size: 16px; font-family: "Amazon-medium"; line-height: 30px; }

      .close { position: absolute; top: 10px; right: 40px; font-size: 35px; color: #333; transform: rotate(45deg); cursor: pointer; }
}


@media screen and (min-width: 1001px) {

  .mobile-only { display: none; }

  /* top of screen / header bar */ 
      #header { margin: 0%; position: absolute; background-color: #131921; width: 100%; height: 60px; top: 0px; }
      
      #logo { position: absolute; margin: 0%; top: 7px; left: 10px; height: 45px; width: 97px; }
      
      #search { position: absolute; width: 60%; left: 20%; top: 10px; height: 40px;  background-color: white; border-radius: 4px; display: block;}

      .search-text { position: absolute; left: 9px; width: 90%; font-size: 16.5px; font-weight: bold; top: -5px; font-family: "Amazon-medium"; }

      #search-button { position: absolute; right: 0px; width: 45px; margin: 0px; height: 40px; background-color:#febd69; border-radius: 4px; }

      #magnifying-glass { position: absolute; height: 30px; width: 35px; top: 4px; left: 5px; }

      .cart { position: absolute; right: 2.5%; width: 68px; height: 35px; top: 9px; }

      #cart1 { display: none; }

      .contactbutton { background: none!important; border: none; padding: 0!important; font-family: "Amazon-medium";
          text-decoration: none; cursor: pointer; }
  
  /* top of screen / social bar */ 
  
      #social-bar { position: absolute; background-color: #232f3e; top: 60px; width: 100%; height: 40px; }

      .social { height: 30px; width: 30px; background-color: #232f3e; margin: 5px; margin-left: 25px; border: 3px white; margin-right: 25px; }
  
  /* Midsection of page / All info in between header bars & footer */
      #middle { position: relative; top: 79px; height: 1750px; margin: 0; padding: 0; }

      #directory { position: absolute; top: 45px; left: 15%; font-family: "Amazon-medium"; margin: 5px; font-size: 14px; color: #878989; }
      
  /* Middle left (picture) */
      #pic-area { position: absolute; height: 1035px; top: 95px; left: 17%; }

      #headshot { position: -webkit-sticky; position: sticky; top: 20px; bottom: 1035px; height: 24vw; width: 24vw; min-width: 200px; min-height: 200px; }
      
  /* Middle middle (information) */
      #product-info { position: relative; left: 45%; width: 25%; margin: 0; margin-left: 5px; top: 90px; font-family: "Amazon-medium"; float: left; }

      #name { position: relative; top: 5px; margin: 0px; padding: 0px; font-size: 30px; }

      #manufacturer { position: relative; top: 5px; color:#007185; margin: 0; }

      #five-star { position: relative; top: 8px; width: 80px; height: 20px; }

      #ratings { position: relative; margin: 0; left: 105px; top: -17px; font-size: 15px; color: #007185}

      hr { background-color: #ededed; position: relative; margin-top: 0;}
      
      #line-price { position: relative; margin: 0; top: -10px; }
      
      #intro-paragraph { position: relative; margin: 0; top: 2px; font-size: 15px; line-height: 22px; text-decoration: none; }

      #specifications { position: relative; margin: 0; top: 30px;  }

      #spec-list { position: relative; margin: 0; top: 40px; line-height: 28px; font-size: 15px; }

      #qualifications { position: relative; margin: 0; top: 58px; }

      #qualification-list { position: relative; margin: 0; top: 70px; line-height: 28px; font-size: 15px; }
      
  /* Middle right (price / shipping / add to cart stuff) */
      #purchase-info { position: absolute; left: 75%; top: 95px; width: 250px; height: 475px; margin: 0; background-color: white; 
          border: 1px #D5D9D9 solid; border-radius: 8px; font-family: "Amazon-medium"; }
      
      #price-details { position: relative; top: 20px; left: 20px; margin: 0px; width: 90%; padding: 0; line-height: 22px; }

      #max { position: relative; height: 23px; top: 33px; left: 20px; font-family: "Amazon-medium"; font-size: 12px;
          border: 1px #d9dcdc solid; border-radius: 8px; line-height: 19px;}

      .purchase-button { position: relative; left: 20px; top: 55px; width: 210px; cursor: pointer;}

      #secure-transaction { position: relative; left: 20px; top: 60px; }

      #small-shipping-info { position: relative; left: 20px; top: 50px; font-size: 13px; }

      #return { position: relative; left: 18px; top: 55px; font-family: "Amazon-medium"; font-size: 16px; }

      .returns { position: relative; top: 45px; left: 20px; font-size: 14px; color: #31a9d8; }

  /* Middle bottom (videos section) + CAROUSEL STYLING */

      #line-break { position: relative; margin: 0; bottom: -12%; left: 10%; width: 80%; }

      #project-tagline { position: relative; margin: 0; color: #cc6600; font-family: "Amazon-medium"; font-size: 19px; left: 10vw; bottom: -260px; width: 400px; z-index: 3;}
      
      #video-section { position: relative; width: 80%; padding: 0; margin: 0; height: 370px; left: 15%; top: 230px; }

      .video-panel { position: relative; height: 370px; left: 0px; background-color: white;}

      .video { position: absolute; width: 430px; padding: 62.5px 15px 62.5px 30px; margin: 0px;  }

      .captions { position: relative; padding-top: 62px; margin: 0; left: 525px; width: 40%; }

      .caption-head { font-size: 18px; font-family: "Amazon"; margin: 0; }

      .caption { font-size: 15px; font-family: "Amazon-medium"; margin: 0; margin-top: 25px; line-height: 25px; }
      
      #button-column { position: relative; margin-left: 50px; left: 92.5%; width: 3%; height: 80px; top: -200px; }

      #previous-project-button { position: relative; left: 10%; top: 0px; height: 39px; width: 37px; cursor: pointer; transform: scaleX(-1); }
      
      #next-project-button { position: relative; left: 86%; top: 0px; height: 39px; width: 37px; cursor: pointer; }

      #panel1 { display: none; } #panel2 { display: none; } #panel3 { display: none; } #panel4 { display: none; }

  /* Footer styling */
      footer { position: relative; bottom: -14%; width: 100%;  background-color: #131921; font-family: "Amazon-medium"; z-index: 9;}
      
      #navFooterBackToTop { position: relative; bottom: 0; width: 100%; height: 40px; background-color: #37475a; text-align: center;}

      #navBackToTop { position: relative; color: white; text-decoration: none; top: 10px; }

      #closer { position: relative; left: 3.5%; top: 0px; height: 60px; width: 91.5%; color: #babdc1; font-size: 14px; line-height: 20px; }

  /* Modal styling, modal is accessible via many buttons / links on the site */
      .modal { width: 100%; height: 174%; position: absolute; top: 0; background-color: rgba(0, 0, 0, 0.7); z-index: 8; justify-content: center; display: none; }

      .modal-content { position: relative; top: 200px; width: 560px; height: 300px; background-color: #eaeded; border-radius: 4px; }
      
      #modal-contact { position: absolute; top: 0px; left: 252px;  font-size: 26px; font-family: "Amazon-medium"; }

      #contact-info { position: absolute; top: 60px; left: 40px; font-size: 16px; font-family: "Amazon-medium"; line-height: 33px; }

      #paragraph-info { position: absolute; top: 65px; left: 220px; width: 300px; font-size: 15px; font-family: "Amazon-medium"; line-height: 27px; }

      #linkedin-icon { position: relative; top: 30px; left: 40px; height: 33px; width: 33px; text-decoration: none; }
      
      #linkprofile-text { position: relative; top: 20px; left: 45px; text-decoration: none; font-size: 16px; color: #31a9d8; }

      #resume2 { position: relative; top: 10px; left: -10px; height: 33px; width: 33px; }
      
      #resume-check { position: relative; top: 226px; left: 300px; text-decoration: none; color:#31a9d8; text-decoration: none; font-size: 16px; font-family: "Amazon-medium";}

      .close { position: absolute; top: 0; right: 10px; font-size: 42px; color: #333; transform: rotate(45deg); cursor: pointer; }

}