/* these are for specific style changed between mobile and desktop */
@media only screen and (max-width: 799px) {
  .reg { display: none }

  .cta { height: 350px; background-image: none }
  .xtra-pd { padding: 0 }
  .ways-top { margin-bottom: 0 }
  .wp-block-media-text__content { padding-left: 0; padding-right: 0; padding-top: 30px }
  .surface{ color: var(--purple) }
}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 800px) {
  .mobile { display: none }

  .prog-header h1 { font-size: 42px }
  .abt-header figure { bottom: -43px; right: -26px; width: 525px; }
  .xtra-pd { padding: 0 7%; }
  .cta { height: 480px }
  .surface { color: var(--white) }
}





/* these are for much more specific screen size changes*/

@media only screen and (max-width: 767px) {
  html { font-size: 11px }
  #main-content { width: 550px }


  h1 { font-size: 30px; }
  h2 { font-size: 27px }
  h4 { font-size: 32px; }
  h6 { font-size: 15px }
  p { font-size: 16px }
  .wp-block-button__link { font-size: 12px }
  .menubar a, .footerbar a { font-size: 12px }

  .inv-header h1:nth-of-type(1) { font-size: 50px }
  .inv-header h1:nth-of-type(2) { font-size: 65px }
  .ways-top .wp-block-column, .ways-bot .wp-block-column { margin-bottom: 40px }
  .ways-top h2, .ways-bot h2 { font-size: 34px }

  .prog-header h1 { font-size: 40px }
  .prog-header .surface { font-size: 33px }
  .abt-header figure { bottom: 50px; right: 0; left: 0; width: 100% }
}

@media only screen and (max-width: 600px) {
  html { font-size: 10px }
  #main-content { width: 380px }

  h1 { font-size: 27px; }
  h2 { font-size: 20px }
  h4 { font-size: 36px; }
  h6 { font-size: 16px }
  p { font-size: 16px }
  .wp-block-button__link { font-size: 13px }
  .menubar a, .footerbar a { font-size: 12px }

  .inv-header h1:nth-of-type(1) { font-size: 45px }
  .inv-header h1:nth-of-type(2) { font-size: 45px }
  .ways-top .wp-block-column, .ways-bot .wp-block-column { margin-bottom: 40px }
  .ways-top h2, .ways-bot h2 { font-size: 34px }

  .prog-header h1 { font-size: 28px }
  .prog-header .surface { font-size: 22px }
  .abt-header figure { bottom: -20px; right: 0; left: 0; width: 100% }

  .wp-block-column .wp-block-buttons { position: relative; display: block; text-align: left; margin-top: 20px; }
  .wp-block-column .wp-block-button { margin-left: 0 !important }
  .wp-block-column .wp-block-button:first-of-type { margin-right: 20px !important }
}

@media only screen and (max-width: 425px) {
  html { font-size: 10px }
  #main-content { width: 290px }

  h1 { font-size: 21px; }
  h2 { font-size: 20px }
  h4 { font-size: 26px; }
  h6 { font-size: 15px }
  p { font-size: 16px }
  .wp-block-button__link { font-size: 13px }
  .menubar a, .footerbar a { font-size: 12px }

  .inv-header h1:nth-of-type(1) { font-size: 40px }
  .inv-header h1:nth-of-type(2) { font-size: 40px }
  .ways-top .wp-block-column, .ways-bot .wp-block-column { margin-bottom: 40px }
  .ways-top h2, .ways-bot h2 { font-size: 34px }

  .prog-header h1 { font-size: 20px }
  .prog-header .surface { font-size: 16px }
  .abt-header figure { bottom: 50px; right: 0; left: 0; width: 100% }
}





/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  html { font-size: 12px }
  #main-content { width: 680px }

  h1 { font-size: 29px; }
  h2 { font-size: 22px }
  h4 { font-size: 39px; }
  h6 { font-size: 15px }
  p { font-size: 16px }
  .wp-block-button__link { font-size: 10px }
  .menubar a, .footerbar a { font-size: 12px }

  .inv-header h1:nth-of-type(1) { font-size: 48px }
  .inv-header h1:nth-of-type(2) { font-size: 80px }
  .end::after, .end::before { top: 50%; left: -7px; width: 105%; }
  .end::before { transform: rotate(-18.4deg) }
  .end::after{ transform: rotate(18.4deg) }

  .prog-header h1 { font-size: 42px }
  .abt-header figure { bottom: -43px; right: -26px; width: 525px; }
  .xtra-pd { padding: 0 7%; }
  .cta { height: 480px }
  .surface { color: var(--white) }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 1000px) {
  html { font-size: 13px }
  #main-content { width: 862px }

  h1 { font-size: 37px; }
  h2 { font-size: 25px }
  h4 { font-size: 49px; }
  h6 { font-size: 16px }
  p { font-size: 20px }
  .wp-block-button__link { font-size: 14px }
  .menubar a, .footerbar a { font-size: 15px }

  .inv-header h1:nth-of-type(1) { font-size: 62px }
  .inv-header h1:nth-of-type(2) { font-size: 104px }
  .end::after, .end::before { top: 50%; left: -11px; width: 106%; }
  .end::before { transform: rotate(-18.3deg) }
  .end::after{ transform: rotate(18.3deg) }

  .prog-header h1 { font-size: 54px }
  .abt-header figure { bottom: -30px; right: -10px; width: 649px }
}

 /* Extra large devices */
@media only screen and (min-width: 1200px) {
  html { font-size: 14px }
  #main-content { width: 1050px }

  h1 { font-size: 45px }
  h2 { font-size: 32px }
  h4 { font-size: 60px }
  h6 { font-size: 18px }
  p { font-size: 21px }
  .wp-block-button__link { font-size: 16px }
  .menubar a, .footerbar a { font-size: 16px }

  .inv-header h1:nth-of-type(1) { font-size: 75px }
  .inv-header h1:nth-of-type(2) { font-size: 125px }
  .end::after, .end::before { top: 50%; left: -13px; width: 105.5%; }
  .end::before { transform: rotate(-18deg) }
  .end::after{ transform: rotate(18deg) }

  .prog-header h1 { font-size: 66px }
  .abt-header figure { bottom: -60px; right: -40px; width: 780px }
}

/* Extra EXTRA Large devices */
@media only screen and (min-width: 1640px) {
  html { font-size: 16px }
  #main-content { width: 1320px }

  h1 { font-size: 50px }
  h2 { font-size: 35px }
  h4 { font-size: 65px }
  h6 { font-size: 22px }
  p { font-size: 25px }
  .wp-block-button__link { font-size: 19px }
  .menubar a, .footerbar a { font-size: 18px }

  .inv-header h1:nth-of-type(1) { font-size: 85px }
  .inv-header h1:nth-of-type(2) { font-size: 125px }
  .end::after, .end::before { top: 50%; left: -13px; width: 105%; }
  .end::before { transform: rotate(-17.5deg) }
  .end::after{ transform: rotate(17.5deg) }

  .prog-header h1 { font-size: 84px }
  .abt-header figure { bottom: -30px; right: -10px; width: 780px }
}