/********************** Typo ************************* *
 *  1. Small (tablet portrait) > 640px
 *  2. Medium (tablet landscape) > 960px
 *  3. Large (laptop) > 1200px
 *  4. XLarge (desktop) > 1600px
 *  5. XXLarge (mac) > 2000px
*****************************************************/

/******** 1. Small (tablet portrait) > 640px ********/

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

  /* General */
  .uk-container {
    padding-left: 40px;
    padding-right: 40px;
  }

  .roboto-text, 
  .roboto_small, 
  .roboto_small p, 
  .roboto_small h1, 
  .roboto_small h3, 
  .roboto-text p {
    font-size: 15px;
    line-height: 20px; /* 133.333% */
  }  

  .roboto_small ul li {
    line-height: normal;
  }

  .helixa_small,
  .helixa_small p {
    font-size: 20px;
    line-height: 120.5%; /* 24.1px */
  }

  .helixa_large, 
  .helixa_large p {
    font-size: 50px;
    line-height: 111.5%; /* 55.75px */    
  }    

  .round-btn {
    font-size: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  hr {
    margin-top: 30px;
    margin-bottom: 30px;
  }  

  /* Header */
  header {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  header .menu-header-menu-container {
    width: 100%;
  }

  html body .logo-content {
    font-size: 15px;
  }

  header .menu {
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 0;
    margin: 0;
    width: 100%;
    column-gap: 70px;
    list-style: none;
  }

  header .menu li:not(:last-child) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  header .menu a {
    color: #0D0D0D;
    text-align: right;
    font-family: "Roboto Mono";
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;    
  }

  header .menu .current-menu-item a {
    text-decoration: underline;
  }

  body.dark header .menu a {
    color: #fff;
  }

  header .menu li:last-child a {
    width: 101px;
    display: inline-block;
    border: 2px solid #0D0D0D;
    border-radius: 50%;
    padding: 7px 0;
    color: #0D0D0D;
    text-align: center;
    font-family: "Roboto Mono";
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    position: static;   
    transition: 0.1s ease-in-out;
  }

  header .menu li:last-child a:hover,
  header .menu li:last-child a:focus {
    background-color: #0D0D0D;
    color: #fff;
    text-decoration: none;
  }

  body.dark header .menu li:last-child a {
    background-color: transparent;
    color: #fff;
    border-color: #fff;    
  } 

  body.dark header .menu li:last-child a:hover,
  body.dark header .menu li:last-child a:focus {
    background-color: #fff;
    color: #0D0D0D;    
  }

  /* Hero */
  #hero {
    gap: 120px;
  }

  .home #hero {
    margin-bottom: 163px;
  }

  body:not(.home) #hero {
    margin-bottom: 170px;
  }

  #hero > img {
    max-width: 600px;
  }

  #hero .hero-logo-wrapper img {
    max-width: 50px;
  }  

  /* Posts grid */
  .posts-grid .roboto_small h1 {
    max-width: 320px;
  }

  .posts-grid .uk-card-media-top {
    height: 24vw;
  }

  .posts-grid .uk-card-bottom > * {
    font-size: 20px;
  }

  .posts-grid .uk-card-bottom {
    padding-top: 10px;
  }

  .posts-grid .uk-card-bottom > h3 .the-title {
    margin-left: -22px;  
    transition: all 0.5s ease;
  }

  .posts-grid .posts-grid-wrapper .uk-card-bottom svg {
    margin-right: 7px;
    transition: all 0.5s ease;
    display: block;
  }

  .posts-grid .posts-grid-wrapper a:hover .uk-card-bottom svg {
    opacity: 1;
    visibility: visible;
  }

  .posts-grid .posts-grid-wrapper a:hover .uk-card-bottom .the-title {
    margin-left: 0;
  }

  .posts-grid .cta-btn-wrapper {
    margin-top: 100px;
    margin-bottom: 170px;
  }

  body:not(.home) .posts-grid .cta-btn-wrapper {
    margin-bottom: 200px;
  } 

  /* Content grid */
  .content-grid .helixa_large > p {
    margin-bottom: 40px;
  }  

  .content-grid .roboto_small > ul {
    margin-bottom: 100px;
  }  

  .content-grid img {
    max-width: 94px;
  }

  .single .content-grid {
    padding-bottom: 100px;
  }

}

/******* 2. Medium (tablet landscape) > 960px *******/

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

  /* Hero */
  #hero h1,
  #hero h2 {
    font-size: 100px;
  }

  .single-post #hero h1,
  .single-post #hero h2 {
    font-size: 50px;
    font-style: normal;
    font-weight: 900;
    line-height: 106.4%; /* 53.2px */      
  }

  #hero > img {
    max-width: 1217px;
  }

  #hero .hero-logo-wrapper img {
    max-width: 75px;
  }

  /* Posts grid */
  .posts-grid .uk-card-media-top {
    height: 17vw;
  }

  /* Content grid */
  .content-grid {
    padding-bottom: 200px;
  }

  .content-grid.padding-right-col .uk-grid > div:last-child {
    padding-top: 60px;
  }

  .content-grid-wrapper {
    height: auto !important;
  }
  
  .content-grid .roboto_small > h1,
  .content-grid .roboto_small > h3 {
    margin-bottom: 35px;
  }

  .content-grid .set_to_stretch > div > * {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }  

  .content-grid .set_to_bottom > div > *:only-child {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: end;
  }  

  .content-grid.has-image .uk-grid > div:last-child {
    margin-top: 0;
  }

  /* Logo grid */
  .logo-grid {
    padding-bottom: 170px;
  }

  .logo-grid > .uk-container {
    padding-left: 40px;
    padding-right: 40px;
  }

  /* News grid */
  .news-grid {
    margin-bottom: 0;
  }

  .news-grid > .uk-grid > div {
    transition: all .2s;
  }

  .news-grid > .uk-grid > div:hover {
    background-color: #fff;
  }

  .news-grid > .uk-grid > div .roboto_small,
  .news-grid > .uk-grid > div .helixa_small,
  .news-grid > .uk-grid > div .helixa_small a {
    transition: all .2s;
  }

  .news-grid > .uk-grid > div:hover .roboto_small,
  .news-grid > .uk-grid > div:hover .helixa_small,
  .news-grid > .uk-grid > div:hover .helixa_small a {
    color: #000;
  }

  .news-grid > div {
    margin-bottom: 100px;
  }

  .news-grid .news-subgrid {
    padding-left: 20px;
    padding-right: 120px;
  }

  .news-grid .news-subgrid .news-title {
    padding-top: 0;
    padding-bottom: 0;
  }

  .news-grid .news-subgrid > div:first-child {
    flex: none;
  }

  .news-grid .news-subgrid .helixa_small {
    font-size: 20px;
    line-height: 106.4%; /* 21.28px */    
  }  

  .news-grid .cta-btn-wrapper .round-btn {
    margin-bottom: 200px;
  }

  /* Gallery */
  .gallery {
    margin-bottom: 170px;
    pointer-events: none;
  }

  .gallery .uk-slider-items > div:first-child {
    max-width: 100%;
  }
  
  .gallery .uk-grid-medium > *, 
  .gallery .uk-grid-column-medium > * {
    padding-left: 30px;
  }  

  /* Featured content */
  .featured-content .meta-content > div {
    margin-bottom: 30px;
  }

  .featured-content .uk-grid > div {
    flex-direction: column;
  }

  .featured-content .ft-img {
    margin-bottom: 100px;
  }

  /** Image content grid **/
  .image-content-grid {
    margin-bottom: 100px;
  }

  .image-content-grid .grid-text {
    max-width: 214px;
  }  

  /** Single **/
  .single-post .more-content > a {
    margin-top: 100px;
    margin-bottom: 200px;
  }

  .single-work .more-content > a {
    margin-bottom: 200px;
  }

  /** 404 **/
  .error404 .cta-btn-wrapper {
    margin-bottom: 200px;
  }

  /** Footer **/
  .footer {
    padding-top: 62px;
    padding-bottom: 62px;
  }

  footer ul:not(.policy-list-wrapper) a {
    font-size: 50px;
    line-height: 106.4%; /* 53.2px */    
  }

  footer .footer-overlay-wrapper {
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 300px;
    height: 300px;
    border-radius: 50%;
    z-index: 10;
    pointer-events: none;
    display: none;
  }

  footer .footer-overlay-wrapper img {
    height: 100%;
    object-fit: cover;
  }

  footer .uk-grid .footer-policy-wrapper {
    margin-top: 0;
  }

  footer ul.policy-list-wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 80px;
    display: flex;
  }

  footer ul.policy-list-wrapper li {
    display: inline-block;
    margin-right: 0;
    margin-bottom: 20px;
  }

  footer .contact-address {
    padding-bottom: 5px;
  }

  footer .contact-address p {
    margin-bottom: 20px;
  }

  footer ul.policy-list-wrapper li:last-child {
    margin-right: 0;
  }

  footer .footer-bottom-logo {
    margin-top: 345px;
    z-index: 15;
    position: relative;
  }

}

/*********** 3. Large (laptop) > 1200px *************/

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

  /* Hero */
  #hero h1,
  #hero h2 {
    font-size: 150px;
    font-style: normal;
    font-weight: 900;
    line-height: 106.4%; /* 159.6px */    
  }

  #hero .hero-logo-wrapper img {
    max-width: 93px;
  }

  /* Posts grid */
  .posts-grid .uk-card-media-top {
    height: 257px;
  }  

}

/*********** 4. XLarge (desktop) > 1600px ***********/

@media only screen and (min-width: 1600px) {}

/*********** 5. XXLarge (mac) > 2000px ***********/

@media only screen and (min-width: 2000px) {}