@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Regular.ttf");
}

* {
  box-sizing: border-box;
}

html {
  font-size: 14px;
  
  font-family: "Lato", sans-serif;

  line-height: 1.5;

  overflow-x: hidden;
  scroll-behavior: smooth;

  color: #000;
}

body {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
  
  max-width: 75em;
  min-height: 100vh;
  
  margin: 0em auto;
}

.wideStripe {
  position: relative;
}

.wideStripe::before {
  content: "";
  
  width: 100vw;
  height: 100%;
  
  position: absolute;
  top: 0em;
  left: calc((-100vw + 100%) / 2);
  
  z-index: -1;
}

.headerBanner {
  display: none;
}

a.box i.fa-solid {
  color: #f2b70d;
}

button {
  font-family: inherit;
  font-size: 100%;
  padding: 0em;
  margin: 0em;
  border-radius: 0.2rem;
  cursor: pointer;
  background: none;
}

#stickyStripe {
  max-width: 92em;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  position: relative;
  top: 0em;
  z-index: 1000;
}

img {
  max-width: 100%;
  border-radius: 0.2rem;
  display: block;
}

svg {
  display: block;
}

/*#################################################################################################### --- GENERAL*/

  main {
    position: relative;
    z-index: 10000;
  }

  main > section {
    padding: 1em;
  }
  
  input {
    min-width: 0em;
    font-family: inherit;
    font-size: inherit;
    border-radius: 0.2rem;
  }
  
  a {
    text-decoration: none;
    color: #4e6bcd;
    cursor: pointer;
  }
  
  ul, ol {
    list-style-type: none;
    margin: 0em;
    padding: 0em;
  }
  
  h1,h2,h3,h4 {
    
    margin-top: 0em;
  }
  
  p {
    margin: 0em;
  }
  
  .colored-box a.box {
    background-color: #f7f7f9;
  }
  
  .no-padding a.box {
     padding: 0em !important;
  }
  
  .redText {
    color: #ff2655;
  }
  
  .displayNone {
    display: none !important;
  }
  
  .generalSection {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    row-gap: 2em;
  }
  
  .displayInline {
    display: flex;
    flex-flow: column nowrap;
    gap: 0.5em;
  }
  
  #wapp {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    position: fixed;
    right: 2%;
    bottom: 4em;
    width: 160px;
    background-color: #57bb63;
    border: solid #3fa81d 2px;
    color: white;
    padding: 0.2em 0.2em 0.2em 1.2em;
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 15px;
    z-index: 9999999;
  }
  
  ul.collapsible-menu.short li:hover {
    border-bottom: 0.01em solid #1aa1e5;
    background-color: #e5e6ec;
  }
    
/*#################################################################################################### --- PRIMARY-BUTTON & SECONDARY-BUTTON*/

  .primaryButton {
    font-size: inherit;
    padding: 0.5em 1em;
    border: 0.05em solid #1aa1e5;
    color: #ffffff;
    background-color: #1aa1e5;
    text-decoration: none;
    justify-self: baseline;
    border-radius: 0.5em;
  }
  
  .linkButton {
    border-radius: 0.5em;
    padding: 0.2rem 1rem;
    
    text-decoration: none;
  }
  
  .secondaryButton {
    font-size: inherit;
    padding: 0.25em 0.5em;
    border: 0.05em solid #f7f7f9;
    color: #333333;
    background-color: #f7f7f9;
    text-decoration: none;
  }

/* #################################################################################################### --- SEARCH-FORM */

  .search-text {
    border: 0.01em solid #000000;
    padding: 0.5em 1em;
    background-color: #ffffff;
    flex: 1 1 auto;
    width: 100%;
  }
  
  .headerSection {
    display: grid;
    grid-template-columns: 1fr;
    padding: 1em;
    gap: 2em;
    align-items: flex-start;
  }
  
  .headerSection::before {
    background-color: #f7f7f9;
  }
  
  .headerFirstForm {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    gap: 0.5em;
  }
  
  .headerSection input,
  .headerSection button {
    padding: 0.5em 1em;
  }
  
  .headerSecondForm {
    display: none;
  }
  
/* ################################################################################################# --- SLIDESHOW */

  .slideshowBanner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1em;
    padding: 0.5em 1em 0em 1em;
  }
  
  .slider {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    padding-top: 66.25%;
  }
  
  .slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    transition: opacity 1.5s;
  }
  

  .slider .slide img {
    object-fit: cover;
    width: 100%;       /* E bën imazhin të marrë 100% të gjerësisë së kontejnerit */
    height: 100%;      /* Lartësia e imazhit përshtatet për të mbushur hapësirën */
    image-rendering: auto; /* Ruan cilësinë natyrale të imazhit */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Efekti i butë për kalimin e imazhit */
    object-position: center; /* Vendosja e imazhit në qendër */
}

.slider .slide:hover img {
    transform: scale(1.02); /* Zmadhohet imazhi paksa në kalim */
    opacity: 0.9; /* Shfaqje më e butë */
}

  
  .right a {
    display: none;
    justify-content: center;
  }
  
  .right a:nth-of-type(1) {
    display: initial;
  }
  
  .right {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
    height: 100%;
  }
  
  .slide.active {
    opacity: 1;
  }

/* ################################################################################################# --- REKLAMA*/

  .reklama {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    row-gap: 2em;
  }
  
  .reklama.wideStripe::before {
    background-color: #f7f7f9;
  }
  
  .reklama.oferta {
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  .box {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 0.25em;
    border-radius: 0.5rem;
    background-color: #ffffff;
    text-align: center;
  }
  
  .title {
    grid-column: 1 / -1;
    justify-self: center;
    align-self: center;
    
    font-weight: bold;
    text-align: center;
    background-color: #f7f7f9;
    border-radius: 0.5rem;
    
    width: 100%;
    margin: 0em;
    padding: 0.3em;
  }
  
  .title::before {
    background-color: #f7f7f9;
  }

/* ################################################################################################# --- STATISTICS */
  
  #statistics > div {
    display : flex;
    flex-flow: column nowrap;
    gap: 0.5em;
    align-items: center;
    
  }

  #statistics > div:nth-child(2) {
    color: #3D82E9;
  }

  #statistics > div:nth-child(3) {
    color: #FA9102;
  }
  
  #statistics > div:nth-child(4) {
    color: #D57776;
  }
  
  #statistics > div:nth-child(5) {
    color: #BD75AB;
  }
  
  #statistics > div:nth-child(6) {
    color: #0ACAC4;
  }
  
  #statistics > div:nth-child(7) {
    color: #25A93F;
  }
  
  #statistics h4 {
    margin: 0em;
  }
  
/* ################################################################################################# --- CAROUSEL*/

  #carousel {
    width: 100%;
  }
    
  .no-padding-bottom {
    padding-bottom: 0em;
  }
    
  #brandsList {
  
    margin: 0em;
    padding: 0.5em;
    
    height: 6em;
    
    overflow: hidden;
    position: relative;
  }
  
  #brandsList > li {
    width: 10em;
    position: absolute;
    top: 20%;
    left: 100%;
    
    padding: 0em;
    margin: 0em;
  }
  
  #brandsList > li > a.box {
    width: calc(45% + 5vw);
    padding: 0em;
  }
  
  
  #brandsList > li img {
    width: calc(50% + 5vw);
  }
  

  #brandsList > li {
    animation-duration: 28s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  #brandsList:hover > li {
    animation-play-state: paused;
  }

  
  #brandsList > li:nth-of-type(1){
    animation-name: logoMovement;
    animation-delay: 0s;
  }

  #brandsList > li:nth-of-type(2){
    animation-name: logoMovement;
    animation-delay: -4s;
  }
  
  #brandsList > li:nth-of-type(3){
    animation-name: logoMovement;
    animation-delay: -8s;
  }
  
  #brandsList > li:nth-of-type(4){
    animation-name: logoMovement;
    animation-delay: -12s;
  }
  
  #brandsList > li:nth-of-type(5){
    animation-name: logoMovement;
    animation-delay: -16s;
  }
  
  #brandsList > li:nth-of-type(6){
    animation-name: logoMovement;
    animation-delay: -20s;
  }
  
  #brandsList > li:nth-of-type(7){
    animation-name: logoMovement;
    animation-delay: -24s;
  }
  
  @keyframes logoMovement{
    0%   {left: 100%;}
    100% {left: -10em; animation-timing-function: steps(1);}
  }
  
/* ################################################################################################# --- BIZNES-BANNER-COUNTRY*/

  .biznes-banner-country {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    row-gap: 2em;
  }
  
  .biznes-banner-country::before {
    background-color: #f7f7f9;
    /*
    background: url(../images/sq-flag.webp);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    */
  }

/* ################################################################################################# --- BANNER-CATEGORY*/

  #biznes-banner-category {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    row-gap: 2em;
    align-items: flex-start;
  }

/* ################################################################################################# --- PACKAGES*/
    
  .packages {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 2em;
    justify-items: center;
    justify-content: center;
    align-items: center;
  }
  
  .packages::before {
    background-color: #f7f7f9;
  }

  .plan {
    box-sizing: border-box;
    width: 100%;
    max-width: 19em;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
    text-align: center;
    border-top-left-radius: 0.2rem;
    border-top-right-radius: 0.2rem;
    background-color: #ffffff;
  }
  
  .plan > h3 {
    font-size: 1.25rem;
    padding: 0.75rem 0rem;
    margin: 0em 0em 0em 0em;
    color: #ffffff;
    background-color: #1aa1e5;
  }
  
  .plan > ul {
    padding-top: 1em;
  }
  
  .plan > ul li {
    line-height: 2rem;
  }
  
  .plan > ul li span {
    font-weight: 700;
  }
  
  .plan > span {
    font-size: 1.5em;
    font-weight: 700;
    margin: 0em;
    padding: 0.5em 0em;
    color: #1aa1e5;
    display: block;
  }
  
  .plan > a {
    margin-bottom: 1em;
    align-self: center;
  }
  
  .button {
    font-weight: 700;
    padding: 0.3em 1em;
    cursor: pointer;
  }
  
  .filledButton {
    color: #ffffff;
    background-color: #4e66b1;
    border: 0.2em;
    min-width: 190px;
    border-radius: 0px 0px 10px 10px;
    padding: 7px;
  }
  
  #package::before {
    background-color: #f7f7f9;
  }
  
/* ################################################################################################# --- SPONSOR-BANNER*/

  #sponsor-banner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
  }
  
  #sponsor-banner a {
    display: none;
  }
  
  #sponsor-banner a:nth-of-type(1) {
    display: initial;
  }
  
/* ################################################################################################# --- REGISTER-FORM */

  .imageCont {
    display: none;
  }
  
  .register {
    padding: 2em;
  }

  .register::before {
    background-color: #f7f7f9;
  }

  .register {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
    align-items: center;
  }
  
  .register > div p {
    margin-bottom: 2em;
  }
  
  .register > div .joinUs {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    gap: 1em;
    justify-items: stretch;
    align-items: start;
  }
  
/*  .joinUs input {
    border: 0.05rem solid #dbdddd;
    padding: 0.25em 0.5em;
    background-color: #ffffff;
    width: 100%;
  }*/
  
/* ################################################################################################# --- BUSINESS-CATEGORY-LIST */

  .business-category-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 1em;
  }
  
  .business-category-list::before {
    background-color: #f7f7f9;
  }
  
  #businessSearch {
    background-color: #4E6BCD;
    position: sticky;
    top: 0em;
    z-index: 10000;
  }
  
/* ################################################################################################# --- BUSINESS-PROFILE-PAGE */

  .business-profile-section {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1em;
    padding: 1em;
    
    border-radius: 0.5rem;
  }

  
  .right-section {
    display: grid;
    grid-template-columns: 1fr;
  }
  
  nav#menu {
    z-index: 10000;
  }
  
  nav#menu ul {
    display: none;
  }
  
  #responsiveMenu {
    position: relative;
    display: flex;
  }
  
  nav#menu > menuButton + * {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start; 
    align-items: stretch; 
    list-style-type: none; 
    padding: 0em;
    margin: 0em;
  } 
  
  #menuButton .arrow {
    margin-right: 0.5em;
    transition: transform 0.3s;
  }

  #menuButton.expanded .arrow {
    transform: rotate(180deg);
  }
  
  #responsiveMenu {
    display: grid;
    grid-template-columns: 1fr auto;
  }
  
  #responsiveMenu a img {
    width: 9em;
  }
  
  #responsiveMenu .collapsible {
    
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5em;
    align-items: center;
  }
  
  #responsiveMenu .collapsible > button svg {
    width: 2em;
    height: 2em;
  }
  
  #responsiveMenu .collapsible > button svg line {
    stroke: #fff;
    stroke-width: 2.3;
  }
  
  nav#menu {
    position: sticky;
    top: 0em;
    background-color: #4E6BCD;
    padding: 1em 0.5em;
  }
  
  nav#menu.wideStripe::before {
    background-color: #4E6BCD;
  }
  
  .collapsible-menu {
    padding: 0em;
    margin: 0em;
    width: 100vw;
    text-align: center;
    background-color: #f7f7f9;
    
    position: absolute;
    top: 4em;
    left: -0.6em;
  }
  
  #menuButton span.bottom-arrow {
    position: relative;
  }
  
  #menuButton span.button-text {
    flex: 1;
    text-align: left;
  }
  
  .collapsible-menu li {
    border-bottom: 0.01em solid #dfdbdb;
    padding: 1em;
    text-align: left;
    z-index: 9999;
  }
  
  .collapsible-menu li a {
    color: #000;
    text-decoration: none;
  }
  
  aside {
    display: none;
  }
  
  aside .menu-left-position {
    width: 100%;
  }
  
  aside .menu-left-position > li {
    border-bottom: 0.01em solid #dfdbdb;
    padding: 0.5em 1em;
    text-align: left;
  }
  
  #logoQRCode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: center;
  }
  
  #logoQRCode > img {
    max-height: 60px;
    
  }
  #aboutUs {
    display: grid;
    gap: 1em;
    padding: 1em;
  }
  
  #aboutUs > button {
    align-self: end;
    width: max-content;
    justify-self: end;
  }
  
  .contactInformation {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
    padding: 0em 1em;
  }
    
  .contactInformation > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
  }
  
  
  #contactBusiness {
    display: grid;
    grid-template-columns: 7em 1fr;
    grid-template-rows: auto;
    gap: 1em;
  }
  
  .contact-list-data {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 0.5em;
  }
  
  .contact-list-data:first-child {
    text-align: start;
  }
  
  .contactInformation .icon-section {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    text-align: center;
  }
  
  .contactInformation .icon-section ul {
    display: flex;
    gap: 1em;
  }
  
  .contactInformation .icon-section > button {
    
    align-self: flex-end;
  }
  
  .contactInformation .icon-section li a img {
    max-width: 2em;
    max-height: 2em;
  }
  
  #map {
    padding-top: 0em;
  }
  
  #map > h2 {
    margin-bottom: 1em;
  }
  
  #map iframe {
    height: 50vh;
    width: 100%;
  }

  
/* ################################################################################################# ---  BUSINESS-EVENTS-PAGE */

  .business-category-events {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
  }
    
  .videoContainer{
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
  }
    
  #business-events.business-profile-section {
    grid-template-columns: 1fr;
  }
  
  #business-events.business-profile-section .business-category-events div#events {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
  }
  
  #business-events.business-profile-section .business-category-events.colored-box div#photo-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
  }
  
   #business-events h3 {
    margin: 1em 0em;
  }
  
  #photo-gallery img {
    cursor: pointer;
    object-fit: cover;
  }
  
  .modal {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 100;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .modal-content-wrapper {
    position: absolute;
    margin: 0 auto;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    max-width: 50em;
    padding: 2em;
    background-color: #ffffff;
  }

  .modal img {
    width: 100%;
  }
  
  .modal button#closeBtn {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    padding: 0.1em;
    border: none;
  }
  
  .modal button::before {
    font-size: 1.5em;
    background-color: #ffffff;
    color: #333333;
  }
  
  .collapsible > button {
    display: flex;
    
    width: 100%;
    padding: 0.5em;
    text-align: left;
    border: 0.01em solid #fff;
    border-radius: 0.5em;
  }
  
  #businessOffersProfile {
    margin-top: 1em;
  }
  
  #businessOffersProfile img {
    width: 100%;
  }
  
  .businessVideos {
    position: relative;
    padding-top: 56.25%;
  }
  
  .businessVideos iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .kartevizita {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.5em;
  }
  
  
/* ################################################################################################# ---  POP-UP */
  
  .all-images-container {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    justify-content: center;
    align-items: start;
  }
  
  .imageContainer {
    display: block;
    width: 12em;
    box-shadow: 0em 0.5em 1em -0.5em rgba(90, 90, 90, 1);
    cursor: pointer;
  }

  .popup {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
  }

  .popup > div {
    position: absolute;
    margin: 0 auto;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    max-width: 30em;
    padding: 2em;
    background-color: #FFF;
  }
  
  .popup img {
    width: 100%;
    cursor: pointer;
  }
  
  .popup button#closeBtn {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
  }
  
/* ################################################################################################# --- BUSINESS-OFFER */
 
  div#photo-gallery-offer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
  }
  
  .business-category-events div > p {
    max-width: 45em;
  }
  
  .business-category-events div > h3 {
    max-width: 40em;
  }
  
  .form-container {
    background-color: #fff;
    padding: 2em 1em;
    border-radius: 0.2rem;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
    max-width: 45em;
  }

  .form-container form .form-group {
    padding: 0.5em;
  }
  
  .form-container form {
    display: grid;
    gap: 1em;
    padding: 0em 1em;
  }
  
  .form-container form label {
    display: flex;
    flex-flow: column nowrap;
  }
  
  .form-container form > div.textField {
    display: flex;
    flex-flow: column nowrap;
    gap: 1em;
  }
  
  .form-container form #form-info span {
    display: block;
  }
  
  .form-container form #form-info  strong {
    margin: 0em 0.1em;
  }
  
  .form-container form button[type="submit"] {
    align-self: start;
  }
  
  div#form-info button {
    width: 44px;
    color: #1aa1e5;
    background-color: #fff;
  }
  
  div#form-info button:hover {
    color: #fff;
    background-color: #1aa1e5;
  }
  
  .business-category-events .form-container h2 {
    margin-bottom: 1em;
  }
  
  div#photo-gallery-offer img {
    width: 30em;
  }
  
  label {
    display: block;
  }
  
/* ################################################################################################# --- FOOTER */

  footer {
    padding: 2em 1em 2em 1em;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    gap: 1em;
    margin: 0em;
  }
  
  footer, footer::before {
    background-color: #333333;
  }

  footer > .footer-section {
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
  
  footer h3 {
    text-t3frransform: uppercase;
    color: #ffffff;
    margin: 0em;
  }
  
  footer a {
    color: #ffffff;
  }

  footer ul {
    display: flex;
    flex-flow: column nowrap;
    gap: 0.5em;
    
    font-size: 1em;
    list-style-type: none;
    margin: 0em;
    padding: 0em;
  }
  
  footer p {
    margin: 0;
  }

  footer li {
    color: #ffffff;
  }
  
  footer .icon-section li a {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
    gap: 1em;
  }
  
  footer .icon-section li a img {
    max-width: 1.5em;
    max-height: 1.2em;
  }
  
  footer .services  li {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.2em;
    align-items: end;
  }
  
  
  .formSubmit {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 0.5em;
  }
  
/* ################################################################################################# --- SUB-FOOTER */

  #subFooter::before {
    background-color: #000000;
  }

  #subFooter {
    grid-column: 1 / -1;
    
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    
    padding: 1em;
    font-size: 0.8em;
    color: #ffffff;
    background-color: #000000;
  }
  
  #subFooter span {
    color: #ffffff;
  }
  
  #subFooter a {
    color: #ffffff;
  }
  
  #poweredBy {
    display: flex;
    flex-flow: row wrap;
    column-gap: 0.5em;
  }
  
/* ##################################################################################################### ---  HEADER-BANNER-BUSINESS */

  .headerBannerBusiness {
    margin-top: 1.5em;
  }
  
/* #################################################################################################### --- MIN-WIDTH: 350 */
  @media screen and (min-width: 350px) {
    
    .joinUs div {
      grid-template-columns: 1fr auto;
    }
    
    footer .services  li {
      grid-template-columns: 3fr 1fr;
    }
  }
  
/* #################################################################################################### --- MIN-WIDTH: 500 */

  @media screen and (min-width: 500px) {
    
    .right a:nth-of-type(2) {
      display: flex;
    }
    
    .right {
      grid-template-columns: 1fr 1fr; 
    }
    
    .biznes-banner-country {
      grid-template-columns: 1fr 1fr;
    }
    
    .packages {
      grid-template-columns: 1fr 1fr;
    }
    
    .reklama {
      grid-template-columns: 1fr 1fr 1fr;
    }
    
    #sponsor-banner {
      grid-template-columns: 1fr 1fr;
    }
    
    #sponsor-banner a:nth-of-type(2) {
      display: initial;
    }
    
    .contactInformation button {
      align-self: flex-end;
      justify-self: flex-end;
    }
    
    footer {
      grid-template-columns: 1fr 1fr;
    }
    
    .register > div .joinUs {
      grid-template-columns: 1fr auto;
      gap: 0.5em;
      align-items: stretch;
    }
    
    div#photo-gallery-offer {
      grid-template-columns: repeat(4, 1fr);
    }
  
    
    #business-events.business-profile-section .business-category-events div#events {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1em;
    }
  
    .kartevizita {
      grid-template-columns: 1fr 1fr;
      gap: 1em;
    }
    
    .kartevizita img {
      max-width: 270px;
    }
  }
  
/* #################################################################################################### --- MIN-WIDTH: 600 */

  @media screen and (min-width: 600px) {
    
    .contactInformation > div {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1em;
    }
    
    #brandsList {
      height: 8em;
    }
    
    #brandsList li:nth-of-type(2),
    #brandsList li:nth-of-type(4),
    #brandsList li:nth-of-type(6),
    #brandsList li:nth-of-type(7) {
      display: block;
    }
    
    .videoContainer{
      grid-template-columns: 1fr 1fr;
    }
    
  }
  
/* #################################################################################################### --- MIN-WIDTH: 700 */

  @media screen and (min-width: 700px) {
    
    .displayInline {
      flex-flow: row nowrap;
      justify-content: space-between;
    }
    
    .form-container form button[type="submit"] {
      order: -1;
    }
    
    img.imageCont {
      display: block;
      margin: auto;
      max-height: 10rem;
    }
    
    .register > img {
      max-height: initial;
    }
    
    .register {
      grid-template-columns: 1fr 1fr;
    }
    
    #biznes-banner-category {
      grid-template-columns: 1fr 1fr 1fr;
    }
  
    .form-container form > div.textField {
      flex-flow: row nowrap;
    }
  
    .form-container form > div.textField > span {
      width:170px;
    }
    
    .form-container form > div.textField > strong.productTitle {
      width:400px;
    }
  
  }
  
/* #################################################################################################### --- MIN-WIDTH: 800 */

  @media screen and (min-width: 800px) {
      
    .headerSection {
      grid-template-columns: 1fr 1fr;
      align-content: space-between;
    }

    .headerSecondForm {
      display: flex;
      flex-flow: row nowrap;
      gap: 0.5em;
      margin-left: auto;
    }
    
    .headerSecondForm input {
      min-width: 15em;
    }
         
    #businessOffersProfile {
      grid-template-columns: 1fr 1fr;
    }
    
  }
  
/* #################################################################################################### --- MIN-WIDTH: 850 */
  
  @media screen and (min-width: 850px) {
   
    
    nav#menu ul.menu-left-position {
      display: block;
      background-color: #f7f7f9;
      width: 12em;
    }
    
    nav#menu ul.menu-left-position li {
      padding: 0.5em;
      border-bottom: 0.01em solid #dfdbdb;
    }
    
    nav#menu ul.menu-left-position li a {
      color: #000000;
    }
    
  #brandsList > li > a.box {
    width: calc(35% + 5vw);
    padding: 0em;
  }
  
  #brandsList > li img {
    width: calc(35% + 5vw);
  }
    
  
  }
    
/* #################################################################################################### --- MIN-WIDTH: 950 */

  @media screen and (min-width: 950px) {
    
    .biznes-banner-country {
      grid-template-columns: repeat(4, 1fr);
    }
    
    .business-category-list {
      grid-template-columns: repeat(4, 1fr);
    }
  
  }
  
/* #################################################################################################### --- MIN-WIDTH: 1050 */


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

    .generalSection {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
    
    .right a:nth-of-type(3) {
      display: flex;
    }
    
    .right {
      grid-template-columns: 1fr;
    }
    
    .slideshowBanner {
      grid-template-columns: 2fr 1fr;
    }
    
    .reklama,
    .reklama.oferta {
      grid-template-columns: repeat(6,1fr);
    }
    
    #biznes-banner-category {
      grid-template-columns: repeat(6, 1fr);
    }
    
    .packages {
      grid-template-columns: repeat(4, 1fr);
    }
    
    #sponsor-banner {
     /* grid-template-columns: repeat(3, 1fr);*/
      display: none;
    }
    
    /*#sponsor-banner a:nth-of-type(3) {
      display: initial;
    }*/
    
    nav#menu,
    #businessSearch {
      display: none;
    }
    
    nav#menu.offerListSearch {
      display: block;
    }
    
    nav.showInDesktop::before {
      
    }

    aside {
      display: flex;
      flex-flow: column nowrap;
      gap: 1em;
    }
    
    aside > div {
      display: flex;
      justify-content: center;
    }
    
    #logoQRCode {
      display: none;
    }
    
    #aboutUs {
      padding: 0em 1em;
      margin-top: 1em;
    }
    
    .right-section h2.wideStripe::before {
      display: none;
    }
    
    
    footer {
      grid-template-columns: repeat(3, 1fr);
    }
    
    #footerSectionBusiness {
      grid-template-columns: 1fr 1fr;
      gap: 8em;
    }
    
    #footerSectionBusiness form {
      margin-bottom: 1em;
    }
    
    #footerSectionBusiness div#twoColumn {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
      gap: 10em;
    }
    
    #contactBusiness {
      display: grid;
      grid-template-columns: 1fr 3fr;
      grid-template-rows: auto;
      gap: 1em;
    }
    
    #business-events.business-profile-section {
      grid-template-columns: 1fr 4fr;
    }
    
    .business-profile-section {
      grid-template-columns: 1fr auto;
    }
    
    #brandsList > li > a.box {
      width: calc(10% + 5vw);
      padding: 0em;
    }
    
    #brandsList > li img {
      width: calc(10% + 5vw);
    }

    ul.collapsible-menu.short {
      top: 4.2em;
      width: 100%;
    }
    
  }

/* #################################################################################################### --- MIN-WIDTH: 1070 */

@media screen and (min-width: 1070px) {
  
  .headerBanner {
    display: initial;
  }
}


/* #################################################################################################### --- MIN-WIDTH: 1110 */
@media screen and (min-width: 1100px) {
  
}