:root {

  --m_h1: 13vw;
  --m_h2: 0.8em;
  --m_p: 0.8em;
  --m_h1_desc: 2.2rem;
  --m_h2_desc: 1.5rem;
  --m_burget_item_fontsize: 0.75em;
  --m_navBar_height: 50px;
  --m_footerHeight: 4%;
  --m_footerLogoSize: 50%;
  --m_contentHeight:75vh;
  --m_burgerSize:10vw;

}
@media only screen and (max-resolution: 96dpi) {
  /* Styles for standard displays */
  .nav{
    /* background-color: aliceblue;  */
  }

}

/* Retina displays (2x) */
@media only screen and (min-resolution: 192dpi) and (max-resolution: 287dpi),
       only screen and (min-resolution: 2dppx) and (max-resolution: 2.99dppx) {
  /* Styles for high-DPI displays */
  .nav{
    /* background-color: rgb(0, 255, 183);  */
  }

}

/* Ultra HD displays (3x) */
@media only screen and (min-resolution: 288dpi) and (max-resolution: 383dpi),
       only screen and (min-resolution: 3dppx) and (max-resolution: 3.99dppx) {
  /* Styles for ultra high-DPI displays */
  .nav{
    /* background-color: rgb(179, 255, 0); */
  }

} 

/* Ultra HD displays (4x and above) */
@media only screen and (min-resolution: 384dpi),
       only screen and (min-resolution: 4dppx) {
  /* Styles for ultra-high-DPI displays */
  .nav{
    /* background-color: rgb(255, 187, 0); */
  }

}

/* ----------- iPhone X ----------- */
/*-------------[      USED      ]-------------*/
/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 858px) and (-webkit-min-device-pixel-ratio: 3) {
  div.page {
    /* background-color: pink!important; */
    height: calc(var(--m_contentHeight) * 0.75 );
}


}

/* Portrait and Landscape */
@media only screen and (max-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3) {
  div.page {
    /* background-color: red!important; */
    height: var(--m_contentHeight);
}
}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */
/*-------------[      USED      ]-------------*/
/* Portrait and Landscape */
@media only screen and (max-width: 1211px)
/*  and (-webkit-min-device-pixel-ratio: 2)*/
  {
    div.page{
      height:var(--m_contentHeight);
    }
  .nav>div:nth-of-type(1)>h2 {
    display: none;
  }

  div.desc>h1 {
    font-size: var(--m_h1_desc);
  }

  div.desc>h2 {
    font-size: var(--m_h2_desc);
  }
  div.media>div.card:hover>a>h2{
    font-size: var(--m_h2_desc);
    line-height: var(--m_h2_desc);

  }
  .nav {
    /* height: var(--m_navBar_height) !important; */
    min-height: auto;
  }

  div.burger>div.icon {
    /* width: var(--m_navBar_height);
    height: calc(var(--m_navBar_height) - var(--burgerStackTop)); */
    transform: scale(0.5) translateY(-40px) translateX(20px);  
    height: 60px;
    width: 75px;
  }
  div.burger>div.icon>div{
    transform: scale(0.8) translateY(5px);
  }

  div.burger[data-state="open"]>div:not(:first-of-type) {
    transform: translateY(-30px)translateX(-10px);
    width: fit-content;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
  }

  div.burger>div:not(:first-of-type)>a>p {
    font-size: var(--m_burget_item_fontsize);
  }

  div.content>div>div.desc {
    /* background-color: pink; */ 
    width: auto !important;
    margin-bottom: 2%;
    border-right: none;
  overflow-y: hidden;
  }

  div.content>div>div.media {
   /* background-color: orange;  */
    width: 100% !important;
    height: fit-content !important;
  }

  div.content>div.main1>div.media {
    /* background-color: orange;   */
    width: 100% !important;
    height:85%!important;
  } 

  div.media>.pdf {
    width: 100% !important;
    height: 75vh !important;
  }

  div.media>.youtube {
    height: 50vh !important;
  }

  div.main1by1,
  div.main1by1f,
  div.main1by2,
  div.main1by2f {
    /* background-color: lime; */
    flex-direction: column;
    display: block;
    overflow-y: auto;
  }

  div.media>div.link {
    margin-top: 5%;
    margin-bottom: 5%;
  }

  div.media>video.portrait {
    width: 100%;
    height: auto;

  }
  div.media>img.portrait{
    width: 100%;
    height: auto;
  }
  div.footer {
    /* background-color: pink; */
    /* flex-direction: column; */
    flex-wrap: wrap;
    height: var(--m_footerHeight);

  }

  div.footer>div.desc {
    max-width: 100%;

  }

  div.footer>div:not(.desc) {
    height: var(--m_footerLogoSize);
  }

  div.footer>div:not(.desc):nth-last-of-type(1) {
    height: calc(var(--m_footerLogoSize) - 10%);
  }

  div.slideshow>div>img {
    width: 100%;
    height: auto;
  }

  div.slideshow>div.UI {
    /* background-color: red; */
    z-index: 3;
    position: sticky;
    bottom: 20%;
    margin: auto;
    width: 22vw;
    height: 3vh;
  }

  div.slideshow>div>video {
    width: 100%;
    height: auto;
  }
  div.burger{
    width: var(--m_navBar_height);
    height: var(--m_navBar_height); 
    margin-top: 10px;
    margin-right: 10px;
    /* transition: all 0.5s;
    transition-timing-function: var(--timingFunction); */
    /* border-radius: var(--borderradius); */
    /* overflow: hidden; */
  
  }
}

@media only screen and (max-width: 600px)
/*  and (-webkit-min-device-pixel-ratio: 2)*/
  {
  div.timeline {
    /* background-color: yellow; */
    width: 75px;
  }

  div.segment {
    overflow: unsetl;
  }

  div.segment.active {
    transform: scale(1);
  }

  .nav>div:nth-of-type(1)>h1 {
    font-size:  clamp(var(--m_h1), 12vw, var(--m_h1_desc));

  }

  div.media>div.link {
    font-size: 1.5em;
  }

  div.desc>p {
    overflow: hidden;
    font-size: var(--m_p);
    text-align: left;
  }

  div.media>.pdf {
    width: 100% !important;
    height: 25vh !important;
  }

  div.media>.youtube {
    height: auto !important;
  }

  div.footer>div.desc>p {
    /* padding-bottom: 5%; */
    margin-left: 0!important;
  }

  div.footer>div:not(.desc) {
    height: calc(var(--m_footerLogoSize) - 5%);
  }

  div.footer>div:not(.desc):nth-last-of-type(1) {
    height: calc(var(--m_footerLogoSize) - 15%);
  }
}
@media only screen and (max-height: 600px)
{
div.page{
  height: calc(var(--m_contentHeight) * 0.85);
}
}