* {
    padding: 0;
    margin: 0;
    font-family: "Poppins", Sans-serif, "Helvetica Neue", Helvetica, Arial,
      sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

:root {
    --portal-blue-color: 233 100% 64%;
    --portal-alice-blue-color: 215 89% 96%;
    --portal-green-color: 123 37% 55%;
    --portal-yellow-color: 36 100% 91%;
    --portal-black-color: 240 3% 12%;
    --portal-black-light-color: 240 2% 44%;
    --portal-silver-color: 240 11% 96%;
    --pure-white-color: 0 0% 100%;

    --animation-015: all 0.15s ease-in-out;
    --animation-03: all 0.3s ease-in-out;

    --pure-white: #ffffff;
    --black: #1d1d1f;
    --black-light: #6e6e73;
    --blue: #455cff;
    --box-light-silver: #f5f5f7;
    --pastel-yellow: #ffecd0;
    --green: #63b767;
    --alice-blue: #edf4fe;
    
    --section-main-width-full: 80%;
    --section-main-width-800: 95%;
    --section-main-padding-full: 60px 5%;
    --section-main-padding-small: 40px 20px;
    --border-radius-box: 10px;
    --border-radius-small: 6px;
    --transition-hover-03: all 0.3s ease-in-out;
    --transition-hover-015: all 0.15s ease-in-out;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    -user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
  
.grafika-obal {
    position: relative;
    background: hsl(var(--pure-white-color));
    color: hsl(var(--portal-black-color));
}

/* typography start*/
.grafika-obal .typography-headline-section {
    font-size: 40px;
    line-height: 1.14286;
    font-weight: 600;
    letter-spacing: 0em;
    font-family: "Poppins", Sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.grafika-obal .typography-subline-section {
    font-style: normal;
    margin-top: 0.8em;
    font-size: 17px;
    line-height: 1.67059;
    font-weight: 400;
    letter-spacing: -0.022em;
    font-family: "Poppins", Sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.grafika-obal p {
    color: hsl(var(--portal-black-color));
    margin-top: 0.8em;
    font-size: 17px;
    line-height: 1.47059;
    font-weight: 400;
    letter-spacing: -0.022em;
}

.grafika-obal a{
    text-decoration: none;
    cursor: pointer;
}

/* Show more btn */
.grafika-obal .showMore-btn-main {                   
    display: inline-flex;
    padding: 0.5em 2em;
    justify-content: center;
    color: hsl(var(--pure-white-color));
    background-color: hsl(var(--portal-blue-color));
    font-size: 1rem;
    line-height: 2.25;
    font-weight: 500;
    white-space: break-spaces;
    align-items: center;
    text-align: left;
    border-radius: var(--border-radius-small);
    margin-top: 2.6em;
    -webkit-transition: var(--animation-015);
    transition: var(--animation-015);
    -moz-transition: var(--animation-015);
    -o-transition: var(--animation-015);
    cursor: pointer;
    box-sizing: border-box;
}

.grafika-obal a .as-tile-show-more{
    text-decoration: none;
    font-size: 17px;
    line-height: 1.47059;
    font-weight: 400;
    letter-spacing: -0.022em;
}

.grafika-obal a .as-tile-show-more:hover{
    text-decoration: underline;
}

.grafika-obal a .as-tile-show-more-icon::before{
    position: relative;
    display: inline;
    padding-inline-start: 0.3em;
    content: ' \003E';
    text-decoration: none;
}
/* typography end*/


/* Resize image desktop-mobile start */
.desktop-image-resize,
.mobile-image-resize {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 767px) {
  .desktop-image-resize {
    display: none;
  }
}
@media (min-width: 768px) {
  .mobile-image-resize {
    display: none;
  }
}
/* Resize image desktop-mobile end */


/* Animate when object is visible start */
@media(prefers-reduces-motion) {
    .grafika-obal .anim-scroll { transition: none;}
}
.grafika-obal .anim-scroll { opacity: 0;}
.grafika-obal .anim-scroll-show { opacity: 1;}
.anim-scroll.anim-scroll-up { transform: translate3d(0,50px,0);}
.anim-scroll.anim-scroll-bottom { transform: translate3d(0,-50px,0);}
.anim-scroll.anim-scroll-left  { transform: translate3d(50px,0,0);}
.anim-scroll.anim-scroll-right { transform: translate3d(-50px,0,0);}
.anim-scroll-show.anim-scroll-up,
.anim-scroll-show.anim-scroll-left,
.anim-scroll-show.anim-scroll-bottom,
.anim-scroll-show.anim-scroll-right { transform: translatey(0);}
/* Animate when object is visible end */


/* Load page spinner start*/
.spinner {
    position: fixed;
    z-index: 9999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
  
.spinner::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: -25;
    left: -25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 5px solid #1d1d1f3b;
    border-top-color: hsl(var(--portal-blue-color));
    animation: spin 1s ease-in-out infinite;
}
  
@keyframes spin {
    to { transform: rotate(360deg); }
}
/* Load page spinner end*/


/* Back to top arrow */
.grafika-obal .back-to-top {
    display: block;
    opacity: 0;
    z-index: 10000;
    position: fixed;
    right: 4rem;
    bottom: 4rem;
    cursor: pointer;
    transition: var(--animation-03);
    pointer-events: none;
}
.grafika-obal .back-to-top.back-to-top-absolute {
    position: absolute;
    bottom: 24px;
}
.grafika-obal .back-to-top #pe-arrow-up {
    width: 50px;
    height: 50px;
    opacity: 0.37;
    -webkit-transition: var(--animation-015);
    transition: var(--animation-015);
    -moz-transition: var(--animation-015);
    -o-transition: var(--animation-015);
}
.grafika-obal .back-to-top #pe-arrow-up:hover {
    opacity: 0.72;
    transform: translateY(-0.2rem);
}
/* Back to top arrow */
  
.gallery-header {
    position: absolute;
    top: 20px;
    right: 0;
    left: auto;
    box-sizing: border-box;
    padding: 0 30px !important;
    border: 0;
    line-height: 1.2;
    z-index: 3 !important;
    width: 30%;
    justify-content: flex-end;
}
  

  
  



@media only screen and (max-width: 1068px) {

}

@media only screen and (max-width: 734px) {

}

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

}
  
@media screen and (max-width: 530px) {

}

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

}