/*
* 1600
*/
@media screen and (max-width: 1440px) {

  .view-referenciak .view-content {
    column-count: 2;
  }

  .view-node-gallery .views-row{
    max-width: calc(100% / 2 - 15px);
    width: calc(100% / 2 - 15px);
  }

}

/*
* 1440
*/
@media screen and (max-width: 1440px) {

  #main-wrapper {
    padding: 50px 50px 30px 50px;
  }

  #slogan-section {
    height: 100px;
    margin-top: -50px;
  }

  .view-referenciak .view-content {
    column-gap: 25px;
  }  

  .view-referenciak .views-row {
    margin-bottom: 25px;
  }

  h1{
    font-size: 48px;
    line-height: 1.1;
  }


  h2{
    font-size: 42px;
    line-height: 1.1;
  }

  h3{
    font-size: 32px;
    line-height: 1.1; 
  }

  h4{
    font-size: 26px;
    line-height: 1.1;
  }  
  
}

/*
* 1200
*/
@media screen and (max-width: 1200px) {
  
  .layout-container{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  #header-wrapper{
    width: 100%;
    order: 1;
  }

  #main-menu {
    padding: 40px;
    height: unset;
  }

  #main-menu.stick {
    top: unset;
    position: relative;
  }

  .toolbar-horizontal #main-menu.stick {
    top: unset;
    height: unset;
  }

  #main-menu ul.menu {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
  }

  #main-menu ul.menu li{
    margin-right: 50px;
    position: relative;
  }

  #main-menu ul.menu li:after {
    position: absolute;
    content: "";
    display: inline-block;
    width: 10px;
    height: 2px;
    background-color: #aaa;
    top: 20px;
    right: -30px;
  }  

  #main-menu ul.menu li:last-child{
    margin-right: 0;
  }

  #main-menu ul.menu li:last-child:after{
    display: none;
  }

  #main-wrapper {
    padding: 100px 100px 30px 100px;
    order: 2;
  }

  #social-bar-wrapper{
    order: 3;
    width: calc(100% - 40px);
    padding: 20px;
    height: unset;
  }

  #social-bar {
    width: 100%;
    height: unset;
    flex-direction: row;
    position: relative;
  }

  .toolbar-horizontal #social-bar {
    height: unset;
  }

  #social-bar .social-icons {
    display: flex;
    flex-direction: row;
    margin: 0;
  }

  #social-bar .social-icon {
    padding: 10px;
  }  

  .social-icon svg {
    width: 30px;
    height: 30px;
  }  

  #menu-social{
    display: inline-block;
    width: 100%;
  }

  #menu-footer{
    display: none;
  }

  #menu-social a {
    line-height: 48px;
  }

  .view-referenciak .view-content {
    column-gap: 50px;
  }

  .view-referenciak .views-row {
    margin-bottom: 50px;
  }

  #menu-logo {
    max-width: 200px;
    margin: 0px auto 10px auto;
  }  

  .scrolltop {
    bottom: 20px;
    right: 20px;
  }

  .region-primary-menu{
    margin: 20px 0;
  }

  #slogan-section {
    height: 100px;
    margin-top: -100px;
  }  

}

/*
* 1100
*/
@media screen and (max-width: 1100px) {

  #main-wrapper {
    padding: 50px 50px 30px 50px;
  }

  #slogan-section {
    height: 100px;
    margin-top: -50px;
  }  

  .view-referenciak .view-content {
    column-gap: 25px;
  }  

  .view-referenciak .views-row {
    margin-bottom: 25px;
  }
 
  h1{
    font-size: 42px;
    line-height: 1.1;
  }

  h2{
    font-size: 32px;
    line-height: 1.1;
  }

  h3{
    font-size: 28px;
    line-height: 1.1; 
  }

  h4{
    font-size: 22px;
    line-height: 1.1;
  }  

}

/*
* 1000
*/
@media screen and (max-width: 1000px) {
  
}

/*
* 959
*/
@media screen and (max-width: 959px) {
  
}

/*
* 850
*/
@media screen and (max-width: 850px) {

  #main-menu ul.menu li{
    margin-right: 30px;
  }

  #main-menu ul.menu li:after {
    right: -20px;
  }  

}

/*
* 767
*/
@media screen and (max-width: 767px) {
 

  #main-wrapper {
    padding: 50px 50px 30px 50px;
  }

  .view-referenciak .view-content {
    column-count: 1;
    column-gap: 50px;
  }


  .view-referenciak .views-row {
    margin-bottom: 50px;
  }  

  .view-referenciak .views-row{
    aspect-ratio: 1 / 1!important;
  }

  .view-referenciak .views-row .bg-item{
    background-image: var(--bg-1-1)!important;
  }

  #main-menu ul.menu li{
    margin-right: 20px;
  }

  #main-menu ul.menu li:after {
    right: -12px;
    width: 6px;
  }  

  h1{
    font-size: 38px;
    line-height: 1.1;
  }

  h2{
    font-size: 28px;
    line-height: 1.1;
  }

  h3{
    font-size: 24px;
    line-height: 1.1; 
  }

  h4{
    font-size: 20px;
    line-height: 1.1;
  } 

}

/*
* 600
*/
@media screen and (max-width: 600px) {

  h1{
    font-size: 36px;
    line-height: 1.1;
  }

  h2{
    font-size: 28px;
    line-height: 1.1;
  }

  h3{
    font-size: 24px;
    line-height: 1.1; 
  }

  h4{
    font-size: 20px;
    line-height: 1.1;
  } 

  #mobile-menu-open{
    display: inline-block;
  }

  .region-primary-menu{
    display: none;
  }

  .view-node-gallery .views-row{
    max-width: calc(100%);
    width: calc(100%);
  } 

  #slogan-section h3 {
    line-height: 1.1em;
    height: 100px;
    display: flex;
    align-content: center;
    align-items: center;
    text-wrap: pretty;
  }

  #main-menu {
    padding: 20px;
    height: unset;
    width: calc(100% - 40px);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  #menu-logo {
    max-width: unset;
    width: 100%;
    margin: 0px auto 10px auto;
  }

  #mobile-menu-open {
    padding: 0 10px;
    text-align: center;
    line-height: 48px;
    width: 48px;
    height: 48px;    
  }

  #menu-social {
    width: unset;
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  #menu-logo a img{
    width: 150px;
  }

  #menu-logo a:hover img{
    transform: scale(1);
  }

  #menu-social a.social-icon {
    margin: 0;
  }

}

/*
* 480
*/
@media screen and (max-width: 480px) {

  .view-referenciak .view-content {
    column-gap: 25px;
  }

  .view-referenciak .views-row {
    margin-bottom: 25px;
  }  

  h1{
    font-size: 32px;
    line-height: 1.1;
  }

  h2{
    font-size: 28px;
    line-height: 1.1;
  }

  h3{
    font-size: 24px;
    line-height: 1.1; 
  }

  h4{
    font-size: 20px;
    line-height: 1.1;
  } 
  
}

/*
* 400
*/
@media screen and (max-width: 400px) {

  #mobile-overlay-branding {
    width: 180px;
  }

}
/*
* 320
*/
@media screen and (max-width: 320px) {

  #main-wrapper {
    padding: 25px;
  }

  
}