@font-face {
  font-family: 'Custom';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/src/kumbhsans_light.ttf') format('truetype');
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  margin: 0 0 0 0;
  padding: 0;
  color: #444; fill: #444;
  font-size: 16px;
  font-family: "Custom", Arial;
  font-weight: 300;
  text-align: justify;
  overflow-y: scroll;
  background-image:
    linear-gradient(135deg, rgba(102, 153, 204, 0.1) 0%, rgba(255, 255, 255, 0.5) 60%),
    url('/src/noise_transparent.png');
  background-repeat:repeat; background-attachment: fixed;
}

body div, input, header, footer {
  box-sizing: border-box;
}

a, .a, a:visited { font-size: 1em; color: #444; text-decoration: none; }
a:hover, .a:hover { color: #444; text-decoration: underline; text-decoration-color: #6699cc; }

h1, h2, h3 { font-weight: 300; margin: 0 0 0.5em 0; padding: 0; display: block; }
h1 { font-size: 1.6em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

p { margin: 0; padding: 0 0 1em 0; line-height: 1.5em; }

ul { margin: 0; padding: 0 0 0 1em; display: inline-block; }
li { margin: 0; padding: 0 0 0.5em 0; line-height: 1.5em; text-align: left; }
/* table { width: 100%; } */
tbody { vertical-align: top; }
tr, td { padding: 0; margin: 0; border-spacing: 0; }
img { height: 100%; object-fit: contain; }


/* General */

.flexrow-lmr { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.flexrow-lmr > div:nth-of-type(1) { text-align: left; }
.flexrow-lmr > div:nth-of-type(2) { text-align: center; }
.flexrow-lmr > div:nth-of-type(3) { text-align: right; }

.flexrow { display: flex; flex-direction: row; flex-wrap: wrap; }
.flexcol { display: flex; flex-direction: column; }

.grid-a-b { width: 100%; display: grid; gap: 1em; align-items: flex-start; grid-template: "a b" auto / 1fr 1fr; }
.grid-a-b > div:nth-child(1) { grid-area: a; }
.grid-a-b > div:nth-child(2) { grid-area: b; }

.grid-a-b-c { width: 100%; display: grid; gap: 1em; align-items: flex-start; grid-template: "a b c" auto / 1fr 1fr 1fr; }
.grid-a-b-c > div:nth-child(1) { grid-area: a; }
.grid-a-b-c > div:nth-child(2) { grid-area: b; }
.grid-a-b-c > div:nth-child(3) { grid-area: c; }
.grid-a-b-c .img { width: 100%; height: 20vw; }
.grid-a-b-c .img img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .grid-a-b { grid-template: "a" auto "b" auto / 1fr; }
  .grid-a-b-c { grid-template: "a" auto "b" auto "c" auto / 1fr; gap: 3em; }
  .grid-a-b-c .img { width: 100%; height: 200px; }
}

.col45-0, .col50-0 { display: none; }
.col50-100, .col55-100, .col60-100, .col65-100 { flex: 100%; max-width: 100%; }

.flex-end { justify-content: end; }
.flex-center { justify-content: center; }

.zoom { transition: transform .2s; }
.zoom:hover { transform: scale(1.05); z-index: 10; }

.opacity0 { opacity: 0; }
.z0 { z-index: 0; }
.z1 { z-index: 1; }

.w100 { width: 100%; }
.rounded { border-radius: 100%; }

.relative { position: relative; }
.absolute { position: absolute; }

.rounded-corner { border-radius: 10px; }

.fade-in {
  -webkit-transition: opacity 1.0s ease-in;
     -moz-transition: opacity 1.0s ease-in;
       -o-transition: opacity 1.0s ease-in;
          transition: opacity 1.0s ease-in;
  opacity: 1;
}

iframe.youtube { width: 336px; height: 189px; }

.top-thumb-img { float: none; padding: 0; margin: 0 auto 1em auto; width: 265px; }
.top-thumb-img > img { width: 100%; height: 100%; border-radius: 10px; }
@media (min-width: 600px) {
  .top-thumb-img { float: left; padding: 0 0.5em 0.5em 0; }
}

/* image-text-box */

.image-text-box { width: 100%; display: grid; gap: 3em; align-items: flex-start; }
.image-text-box.left { grid-template: "a b" auto / 1fr 1fr; }
.image-text-box.right { grid-template: "b a" auto / 1fr 1fr; }
.image-text-box.ratio-55-45.left { grid-template: "a b" auto / 9fr 11fr; }
.image-text-box.ratio-55-45.right { grid-template: "b a" auto / 11fr 9fr; }
.image-text-box.ratio-60-40.left { grid-template: "a b" auto / 4fr 6fr; }
.image-text-box.ratio-60-40.right { grid-template: "b a" auto / 6fr 4fr; }
.image-text-box > * { flex: 1 }
.image-text-box .ga { padding: 0; }
.image-text-box img {
  width: 100%; border-radius: 10px; object-fit: contain;
}
@media (max-width: 900px) {
  .image-text-box { gap: 1em; }
  .image-text-box.left, .image-text-box.right,
  .image-text-box.ratio-55-45.left, .image-text-box.ratio-55-45.right,
  .image-text-box.ratio-60-40.left, .image-text-box.ratio-60-40.right
  {
    grid-template: "a" auto "b" auto / 1fr;
    /* gap: 3em; */
  }
}



/* Global */
.content { position: relative; width: 90vw; margin: auto; padding-left: 0; padding-right: 0; }

button, .button {
  display: inline-block; padding: 0.6em 1em 0.5em 1em; margin: 0;
  outline: none; border: none; font-size: 0.9em; font-family: "Custom", Arial; cursor: pointer;
  color: #FFF; background-color: #6699cc;
  border-radius: 2em; min-width: 1.5em; min-height: 1.5em; box-shadow: inset 0 -4px 0 -1px rgba(0,0,0,0.17);
  text-align: center;
}
button:hover, .button:hover {
  box-shadow: inset 0 -3px 0 -1px rgba(0,0,0,0.17); text-align: center;
  background-color: #75a0ca;
}

.separator {
  background-image: url('/src/logo.png'); background-repeat: no-repeat; background-position: center; background-size: contain;
  margin: 3em auto;
  height: 2em;
}

.contrast-box {
  color: #FFF; fill: #FFF;
  background-color: #6699cc;
  padding: 1em 0;
}
.contrast-box a, .contrast-box .a, .contrast-box a:visited {
  font-size: 1em; color: #FFF; text-decoration: none;
}
.contrast-box a:hover, .contrast-box .a:hover {
  color: #FFF; text-decoration: underline; text-decoration-color: #FFF;
}


/* Header */
header {
  position: fixed; top: 0; width: 100%; height: 50px; z-index: 50;
  border-bottom: 0.5px solid #AAA;
  background-color: rgba(255, 255, 255, 0.95);
  /* background-image: url('/src/bg.jpg'); background-repeat: no-repeat; background-attachment: fixed; */
}

header, header i { color: #444; fill: #444; }
header .content { position: relative; z-index: 1; height: 100%; }

header #top-menu { height: 50px; padding: 7px 0; }
header #top-menu .social { height: 1.6em; }
header #top-menu .logo { height: 100%; }
header #top-menu .lang img { height: 1.6em; vertical-align: middle; }

header #main-menu { height: 40px; background-color: rgba(100, 100, 100, 0.05); }
/* header #main-menu ul { padding-top: 6px; } */
/* header #main-menu li { margin: 0 20px; } */

header #main-menu > ul { height: 34px; display: flex; flex-direction: row; padding: 5.5px 0 0 0; justify-content: center; }
header #main-menu > ul li { position: relative; display: flex; height: 100%; align-items: center; list-style: none; margin: 0 8px; padding: 0; font-size: 0.9em; line-height: 26px; }
header #main-menu a, #mobile-main-menu a { position: relative; }
header #main-menu > ul li h1, #mobile-main-menu > ul li h1 { font-size: 1em; margin: 0; padding: 0; }

header #main-menu > ul > li.active > a,
header #main-menu > ul > a.active,
header #main-menu li a:hover,
header #main-menu a:hover,
#mobile-main-menu > ul > li.active > a,
#mobile-main-menu > ul > a.active,
#mobile-main-menu li a:hover,
#mobile-main-menu a:hover
  { color: #6699cc; }

header #main-menu > ul > li.active > a::after,
header #main-menu > ul > a.active::after,
header #main-menu li a:hover::after,
header #main-menu a:hover::after,
#mobile-main-menu > ul > li.active > a::after,
#mobile-main-menu > ul > a.active::after,
#mobile-main-menu li a:hover::after,
#mobile-main-menu a:hover::after
  { content: ''; position: absolute; left: 0; bottom: 0.2em; width: 20px; height: 0; border-bottom: 2px solid #6699cc; }

header #main-menu .main-menu-sub a:hover::after,
  #mobile-main-menu .main-menu-sub a:hover::after { left: 0.5em; }

header #main-menu a, header #main-menu a:visited,
#mobile-main-menu a, #mobile-main-menu a:visited { font-size: 1em; color: #444; text-decoration: none; }

header #main-menu > ul > li .main-menu-sub {
  position: absolute; top: 100%; left: 0; width: 210px; display: flex; flex-direction: column; padding: 0.5em 0 0 0; margin: 0;
  background-color: rgba(255, 255, 255, 1);
  border-top: 4px solid #6699cc;
}
header #main-menu > ul > li .main-menu-sub > ul { padding: 0 1em 0.5em 1em; }

header #main-menu > ul > li .main-menu-sub { display: none; }
header #main-menu > ul > li:hover .main-menu-sub { display: flex; }

header #main-menu { display: none; }
#toggle-mobile-menu { display: block; margin-top: 3px; }

#mobile-main-menu {
  background-color: rgba(255, 255, 255, 1); border-bottom: 0.5px solid #444;
  position: fixed; top: 50px; transition: 0.25s ease-in; right: -295px;
  width: 290px;
  box-shadow: -1px 1px 2px rgb(0 0 0 / 20%);
}
#mobile-main-menu.active { transition: 0.25s ease-out; right: 0; }
#mobile-main-menu > ul {
  display: flex; flex-direction: column; justify-content: left; margin-top: 1px; padding: 0.5em 0.5em 0.3em 0.5em;
}
#mobile-main-menu > ul li {
  position: relative; display: flex; flex-direction: column; align-items: left; list-style: none; margin: 1px 8px; padding: 0; font-size: 1em; line-height: 26px;
}


@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {

  header {
    background-color: rgba(255,255,255,0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

}


/* Pages */
article { margin-top: 65px; margin-bottom: 1em; }
.content_anchor { scroll-margin-top: 95px; }
#prices, #contact { padding-top: 30px; }


/* Home page */
#main-slideshow { position: relative; overflow-y: hidden; height: 59vw; padding: 0; }
#slideshow-image-a, #slideshow-image-b { height: 100%; width: 100%; position: absolute; left: 0; top: 0; }
#main-slideshow img { height: 100%; width: 100%; object-fit: cover; object-position: center; }

#main-home-img { width: 100%; height: 400px; margin-top: -15px; }
#main-home-img img { width: 100%; height: 100%; object-fit: cover; }


/* Gallery page */
#gallery .flexrow-wrap { display: flex; flex-flow: row wrap; justify-content: start; margin: 0 -2.5vw 0 -2.5vw; }
#gallery .flexrow-wrap-item { position: relative; flex: unset; width: calc(50% - 5vw); height: auto; margin: 0 2.5vw 5vw 2.5vw; }
/* #gallery .flexrow-wrap-item { width: 100%; height: auto; position: relative; margin: 0 0 5vw 0; } */
#gallery .flexrow-wrap-item::before { content: ''; float: left; padding-top: 120%; }

#gallery .flexrow-wrap-item .image { width: 100%; height: 100%; background-color: #444; }
#gallery .flexrow-wrap-item .title {
  position: absolute; left: 0; bottom: 0; min-height: 1em; width: 100%;
  text-align: center; background-color: rgba(255,255,255,0.8);
}
#gallery .flexrow-wrap-item .title p { padding: 0.4em 0.3em 0.3em 0.3em; text-shadow: 0 0 2px white; }
#gallery .flexrow-wrap-item img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

#gallery .gallery-image { cursor: pointer; background-size: cover; background-position: center; }

#photo-viewer { position: fixed; left: 0; top: 0; width: 0; height: 0; background-color: #444; z-index: 90; }
#photo-viewer.hidden, #photo-viewer.hidden * { visibility: hidden; }
#photo-viewer.full { transition: left 0.3s, top 0.3s, width 0.3s, height 0.3s; z-index: 100; }
#photo-viewer-img { width: 100%; height: 100%; background-size: cover; background-position: center; }
#photo-viewer #photo-viewer-bg { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: -1; background-color: #000; transition: opacity 0.3s; opacity: 0; }
#photo-viewer.full #photo-viewer-bg { width: 100%; height: 100%; opacity: 0.9; }
#photo-viewer-close { position: fixed; top: 0; right: 0; font-size: 2em; z-index: 1; color: white; cursor: pointer; background-color: #000; padding: 0.5em 0.3em 0.3em 0.3em; }
#photo-viewer-left, #photo-viewer-right { position: fixed; top: 0; width: 50vw; height: 100%; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -moz-tap-highlight-color: rgba(0, 0, 0, 0); }
#photo-viewer-left img, #photo-viewer-right img { position: fixed; top: calc(50% - 1em); width: 2em; height: 2em; }
#photo-viewer-left, #photo-viewer-left img { left: 0; }
#photo-viewer-right, #photo-viewer-right img { right: 0; }

/* Prices page */
.price-info { font-size: 0.95em; margin-bottom: 1em;}
.price-item { text-align: center; margin: 3em 0 3em 0; }
.price-item .title { position: relative; }
.price-item .title::after { content: ''; position: absolute; left: 0; bottom: 0.1em; width: 100%; height: 0; border-bottom: 1px solid #6699cc; }
.price-item .description { font-size: 0.95em; line-height: 1.5em; }
.price-item .price { font-size: 1.2em; margin-top: 1em; }

/* Contact page */
#contact .contact-item { width: 220px; padding-bottom: 2em; margin: 0 auto; text-align: left; }

/* Footer */
footer { background-color: #6699cc; }
.copyright { margin: 1em 0 0 0; text-align: center; color: #FFF; font-size: 0.8em; text-transform: uppercase; }
.copyright a { color: #FFF; }

@media all and (min-width: 360px) {
  header #top-menu .social > * { padding-right: 5px; }
  header #top-menu .social > *:last-child { padding-right: 0; }
}

@media all and (min-width: 900px) {
  body { font-size: 18px; }
  header { height: 100px; }
  header #top-menu { height: 60px; border-bottom: 0.5px solid #AAA; }
  header #main-menu { display: block; }

  #toggle-mobile-menu { display: none; }

  article { margin-top: 115px; }
  .content_anchor { scroll-margin-top: 170px; }

  #gallery .flexrow-wrap { margin: 0 -10px 0 -10px; }
  #gallery .flexrow-wrap-item { width: calc(33.33% - 20px); margin: 0 10px 20px 10px; }
  /* #gallery .flexrow-wrap-item { flex: unset; width: calc(50% - 30px); margin: 0 15px 30px 15px; } */

  .info-item .left-item { padding-right: 1em; }
  .info-item .right-item { padding-left: 1em; }
  #prices .info-item .left-item { width: 350px; padding-right: 1em; }
  #prices .info-item .right-item { width: 250px; padding-left: 1em; }

  #contact .contact-item { width: 380px; padding-left: 2em; }

  .col45-0 { display: block; flex: 45%; max-width: 45%; }
  .col50-0 { display: block; flex: 50%; max-width: 50%; }

  .col50-100 { flex: 50%; max-width: 50%; }
  .col55-100 { flex: 55%; max-width: 55%; }
  .col60-100 { flex: 60%; max-width: 60%; }
  .col65-100 { flex: 65%; max-width: 65%; }

  iframe.youtube { width: 560px; height: 315px; }
}

@media all and (min-width: 1300px) {
  .content { max-width: 1100px; margin: auto; padding-left: 20px; padding-right: 20px; }
  #main-slideshow { height: 720px; }

  #gallery .flexrow-wrap { margin: 0 -15px 0 -15px; }
  #gallery .flexrow-wrap-item { width: calc(33.33% - 30px); margin: 0 15px 30px 15px; }
  /* #gallery .flexrow-wrap-item { width: calc(33.33% - 30px); } */
}



/* Hamburger icon animation */
/* https://github.com/jonsuh/hamburgers/blob/master/dist/hamburgers.css */

.hamburger {
  display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible;
}
.hamburger:hover { opacity: 0.7; }
.hamburger.active:hover { opacity: 0.7; }
.hamburger.active .hamburger-inner,
.hamburger.active .hamburger-inner::before,
.hamburger.active .hamburger-inner::after { background-color: #6699cc; }

.hamburger-box { width: 36px; height: 26px; display: inline-block; position: relative; }

.hamburger-inner { display: block; top: 50%; margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  width: 36px; height: 5px; background-color: #6699cc; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; }
.hamburger-inner::before { top: -11px; }
.hamburger-inner::after { bottom: -11px; }

.hamburger--spin .hamburger-inner { transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spin .hamburger-inner::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
.hamburger--spin .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spin.active .hamburger-inner { transform: rotate(225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--spin.active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
.hamburger--spin.active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }



/* ////////////////////////////////////////////////// */
/* Modifiers */

.center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.tleft { text-align: left; }
.tcenter { text-align: center; }
.tright { text-align: right; }
.bold, .bold > * { font-weight: bold !important; }
.right0 { right: 0; }
.pointer { cursor: pointer; }
.right { float: right; }
.left { float: left; }

.inline { display: inline-block; }
.pointer { cursor: pointer; }
.invisible { visibility: hidden; }

.flex-no-shrink { flex-shrink: 0; }
.justify-center { justify-content: center; }
.justify-end { justify-content: end; }
.justify-around { justify-content: space-around; }
.justify-between { justify-content: space-between; }

.f1 { flex: 1; min-width: 0 }
.f2 { flex: 2; min-width: 0 }
.f3 { flex: 3; min-width: 0 }
.f4 { flex: 4; min-width: 0 }

.ga { grid-area: a; }
.gb { grid-area: b; }
.gc { grid-area: c; }
.gd { grid-area: d; }
.ge { grid-area: e; }
.gf { grid-area: f; }
.gg { grid-area: g; }
.gh { grid-area: h; }
.gi { grid-area: i; }

.w100 { width: 100%; }
.h100 { height: 100%; }
.wh_inherit { width: inherit; height: inherit; }
.w_inherit { width: inherit; }
.h_inherit { height: inherit; }
.clip { max-height: 100%; overflow: hidden; text-overflow: clip; }
.clip_1em { height: 1em; overflow: hidden; text-overflow: clip; }

.dense-letters { letter-spacing: -0.8px; }

.t_xs { font-size: 0.8em; }
.t_s { font-size: 0.9em; }

.gap_1 { gap: 1em; grid-gap: 1em; }
.gap_2 { gap: 2em; grid-gap: 2em; }
.gap_3 { gap: 3em; grid-gap: 3em; }

.mt_auto { margin-top: auto; }
.mr_auto { margin-right: auto; }
.ml_auto { margin-left: auto; }
.mh_auto { margin-left: auto; margin-right: auto; }

.m_0 { margin: 0; }

.mh_05 { margin-left: 0.5em; margin-right: 0.5em; }
.mh_1  { margin-left: 1em; margin-right: 1em; }
.mv_05 { margin-top: 0.5em; margin-bottom: 0.5em; }
.mv_1  { margin-top: 1em; margin-bottom: 1em; }
.m_05  { margin: 0.5em; }
.m_1   { margin: 1em; }

.mt_05 { margin-top: 0.5em; }
.mt_1  { margin-top: 1em; }
.mt_2  { margin-top: 2em; }
.mr_05 { margin-right: 0.5em; }
.mr_1  { margin-right: 1em; }
.mb_05 { margin-bottom: 0.5em; }
.mb_1  { margin-bottom: 1em; }
.mb_2  { margin-bottom: 2em; }
.ml_05 { margin-left: 0.5em; }
.ml_1  { margin-left: 1em; }

.ph_05 { padding-left: 0.5em; padding-right: 0.5em; }
.ph_1  { padding-left: 5px; padding-right: 5px; }
.pv_05 { padding-top: 0.5em; padding-bottom: 0.5em; }
.pv_1  { padding-top: 1em; padding-bottom: 1em; }
.p_05  { padding: 0.5em; }
.p_1   { padding: 1em; }

.pt_0  { padding-top: 0; }
.pt_05 { padding-top: 0.5em; }
.pt_1  { padding-top: 1em; }
.pt_2  { padding-top: 2em; }
.pr_05 { padding-right: 0.5em; }
.pr_1  { padding-right: 1em; }
.pb_0  { padding-bottom: 0; }
.pb_05 { padding-bottom: 0.5em; }
.pb_1  { padding-bottom: 1em; }
.pb_2  { padding-bottom: 2em; }
.pl_05 { padding-left: 0.5em; }
.pl_1  { padding-left: 1em; }