@import url('https://fonts.googleapis.com/css?family=Titillium+Web:400,400i,700&subset=latin-ext');

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*, *:before, *:after {
  box-sizing: inherit;
}

:root {
  --backgroundDark: #303841;
  --backgroundLight: white;
  --foregroundDark: #333;
  --foregroundLight: white;
  --linkColor: crimson;
}

html {
  font-size: 16px;
}

body {
  font-family: "Titillium Web", sans-serif;
  font-size: 100%;
}

.flexColumn {
  display: flex;
  flex-flow: column nowrap;
}

.flexRow {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  position: relative;
}

.contentBlock {
  display: flex;
  flex-flow: row wrap;
  max-width: 93vw;
  justify-content: space-between;
  align-content: space-between;
  align-items: center;
  padding: 0px;
  margin: 0px;
}

.shadow {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.tile {
  position: relative;
}

.blockLight {
  background-color: white;
  background: var(--backgroundLight);
  color: black;
  color: var(--foregroundDark);
}

.blockDark {
  background-color: #303841;
  background: var(--backgroundDark);
  color: white;
  color: var(--foregroundLight);
}

.textBlock {
  padding: 30px;
}

/* Flex Flexible Tiles */
.tile40 {
  /* as flex item */
  flex: 1 1 40%;
}

.tile100px {
  /* as flex item */
  flex: 0 1 100px;
}

.tileBit {
  flex: 1 1 40%;
}

.tileMeta {
  margin-top: 30px;
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  overflow-x: hidden;
  align-content: space-between;
  align-items: center;
  justify-content: center;
  padding: 0px;
}

.tileMeta li {
  list-style-type: none;
  padding: 0px 5px;
}

#header {
  background-repeat: repeat-x;
  background-position: bottom;
}

#footer {
  background-color: #303841;
  background-color: var(--backgroundDark);
  color: white;
  color: var(--foregroundLight);
  padding: 40px 30px;
  width: 100%;
}

#content {
  min-height: 90vh;
  align-content: start;
  align-items: flex-start;
  justify-content: center;
  margin: 0px;
  position: relative;
  z-index: 1000;
  background-image: url("img/patterns/graphy.png");
  background-repeat: repeat;
}

.coverTitle {
  position: absolute;
  bottom: 0;
  margin: 0;
  background-image: linear-gradient(transparent, black);
  width: 100%;
  color: white;
  color: var(--foregroundLight);
  font-size: 2.5rem;
  text-align: center;
  padding: 15px 0 25px 0;
}

#topMenu {
  position: fixed;
  top: 0;
  width: 100%;
  color: white;
  color: var(--foregroundLight);
}

#cover {
  position: relative;
  z-index: 1;
  overflow-x: hidden;
}

.home #cover, .document #cover {
  background-image: url("../data/cover.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.home #cover {
  min-height: 75vh;
  height: auto;
}

.document #cover {
  height: 260px;
}

.homeTitle {
  display: none;
  text-align: right;
  background-color: white;
  background-color: rgba(255, 255, 255, 0.92);
  color: black;
  color: var(--foregroundDark);
  padding: 20px;
  margin: 0px;
}

@media screen and (min-width: 575px) {
  .homeTitle {
    position: absolute;
    max-width: 700px;
    width: 90vw;
    bottom: 30px;
    left: 0px;
  }
}

.home .homeTitle, .document .homeTitle {
  display: block;
}

.document .homeTitle .homeDesc {
  display: none;
}

.homeDesc a, .homeDesc a:visited, .homeDesc a:hover {
  color: crimson;
  color: var(--linkColor);
}

/** NAVIGATION (TOPMENU) **/
/* Add a black background color to the top navigation */
.topnav {
  background-color: #303841;
  background: var(--backgroundDark);
  overflow: hidden;
  z-index: 10000;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
  color: var(--foregroundDark);
}

/* Add an active class to highlight the current page */
.active {
  background-color: #4CAF50;
  color: white;
  color: var(--foregroundLight);
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

.footerTile {
  width: 100%;
  color: white;
  color: var(--foregroundLight);
  text-align: center;
}

.fitImg img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.partners img {
  width: 10vw;
  height: 10vw;
  margin: 0 0.5vw;
}

#footer .partners {
  justify-content: center;
}

#footer .title {
  color: white;
  color: var(--foregroundLight);
  margin: 20px;
}

.ctaBtn {
  padding: 10px 40px;
  margin: 20px 0px;
  background-color: crimson;
  color: var(--linkColor);
  color: white;
  color: var(--foregroundLight);
  text-decoration: none;
  text-align: center;
}

.ctaBtn {
  border: 1px solid saddlebrown;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 1px solid;
  outline-color: rgba(205, 92, 92, .5);
  outline-offset: 0px;
  text-shadow: none;
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

.ctaBtn:hover {
  border: 1px solid;
  box-shadow: inset 0 0 20px rgba(205, 92, 92, .5), 0 0 20px rgba(205, 92, 92, .2);
  outline-color: rgba(205, 92, 92, 0);
  outline-offset: 15px;
  cursor: pointer;
}

.hideBtn {
  align-self: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

.linkBtn {
  color: var(--linkColor);
  color: crimson;
  text-decoration: underline;
  cursor: pointer;
}

.filterBtn {
  margin: 5px 0;
}

#backBtn {
  background-image: url("img/piktogramy.png");
  background-position: -0px 64px;
  padding: 10px;
  position: absolute;
  height: 64px;
  width: 64px;
  left: 10px;
  bottom: 10px;
}

#topBtn {
  position: fixed;
  bottom: 20px;
  right: 0px;
  height: 64px;
  width: 64px;
  background-image: url("img/piktogramy.png");
  background-position: -64px 64px;
  z-index: 1500;
}

/** TITLES **/
.title {
  text-align: center;
  text-decoration: none;
  color: #303841;
  color: var(--backgroundDark);
}

.blockDark .title, .darkBackground {
  color: white;
  color: var(--foregroundLight);
}

h1.title {
  text-align: right;
  font-size: 2.0em;
}

h2.title {
  font-size: 1.5em;
}

h3.title {
  font-size: 1.2em;
}

h2.title, h3.title {
  margin: 20px 0px 0px 0px;
}

.metaDetail {
  color: #333;
  height: 32px;
  width: auto;
  background-color: white;
  background: var(--backgroundLight);
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 6px;
}

.projects {
  padding: 60px 0;
  margin: 0px;
}

.projectCover {
  position: relative;
  text-align: center;
  color: white;
  color: var(--foregroundLight);
  width: 100%;
  overflow: hidden;
}

.projectCover .frontImg {
  top: 0;
}

.projectCover .backImg {
  position: absolute;
  top: 0;
  left: 100%;
  transition: left 1s;
}

.projectPreview:hover .projectCover .backImg {
  left: 0;
  transition: left 1s;
}

.projects .projectTitle {
  background-color: white;
  background: var(--backgroundLight);
  opacity: 0.95;
  font-size: 1.5rem;
  background-blend-mode: luminosity;
  margin: 0px;
  padding: 0;
  position: absolute;
  bottom: 5%;
  width: 50%;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 1s, color 1s;
  right: -10px;
}

.projectPage {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  width: 100%;
}

.projectPage .gallery {
  padding: 30px 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.projectPage .gallery img {
  flex: 1 1 auto;
  width: 15vw;
  height: 15vw;
  object-fit: cover;
  filter: none;
  transform: none;
  transition: filter 0.5s, transform 0.5s;
}

.projectPage .gallery img:hover {
  filter: brightness(1.5) grayscale(1);
  transform: scale(1.1);
}

.projectPreview {
  margin: 10px;
}

.eventsList {
  background-color: black;
}

.event {
  margin: 10px;
}

.full.event {
  padding-bottom: 30px;
  background-color: white;
  background: var(--backgroundLight);
}

.event, .projectPreview {
  max-width: 851px;
}

.event img, .projectPreview img {}

.documentPage {
  align-items: stretch;
}

.documentPage img {
  object-fit: cover;
}

.hamburger-bars {
  display: block;
  height: 32px;
  width: 32px;
  margin: 10px;
  background: url("img/piktogramy.png");
  background-size: auto 96px;
  background-position: -64px 32px;
}

.businessInfo {
  background-color: black;
  width: 100%;
}

.foldable {
  display: none;
  overflow: hidden;
}

.foldable .contentBlock {
  margin: auto;
}

.explanation {
  font-size: 0.8rem;
  color: #222;
  border: 1px dotted #222;
  padding: 5px;
}

.error, .success {
  color: white;
  color: var(--foregroundLight);
  padding: 10px;
}

.error {
  background-color: crimson;
}

.success {
  background-color: #4AA44A;
}

/* Kontaktný formulár */
input[type=text], input[type=email], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

textarea {
  height: 200px;
}

input[type=submit] {
  background-color: crimson;
  color: var(--linkColor);
  color: white;
  color: var(--foregroundLight);
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: crimson;
  color: var(--linkColor);
}

input[type=submit]:disabled, input[type=submit]:disabled:hover {
  background-color: darkgray;
  border: 0 solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 1px solid;
  outline-color: rgba(205, 92, 92, .5);
  outline-offset: 0px;
  text-shadow: none;
}

.container {
  background-color: #303841;
  background-color: var(--backgroundDark);
  padding: 20px;
}

.container, .container .title {
  color: white;
}

.container .title {
  border-bottom: white 2px dashed;
  margin: 10px 10px 20px 10px;
}

.error {}

/* Formulár na registráciu */
.eventForm.modal {
  max-width: 90vw;
  width: 500px;
}

/* Odkazy, linky etc. */
.title a, .title a:hover, .title a:visited {
  text-decoration: none;
  color: crimson;
  color: var(--linkColor);
}

a {
  color: crimson;
  color: var(--linkColor);
}

a:visited {
  color: inherit;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 575px) {
  .topnav a

  /*:not(:first-child)*/
    {
    display: none;
  }

  .topnav {
    background: none;
  }

  .topnav div.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 575px) {
  .topnav.responsive {
    position: relative;
    background-color: #303841;
    background: var(--backgroundDark);
  }

  .topnav.responsive div.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

.kingDiv {
  display: none;
}

@media screen and (max-width: 575px) {
  .equalColumn {
    width: 95%;
  }

  #rc-imageselect, .g-recaptcha {
    transform: scale(0.77);
    -webkit-transform: scale(0.77);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
  }

  .projectPage .gallery img {
    flex: 1 1 20%;
    width: 30vw;
    height: 30vw;
  }

  .partners img {
    min-width: 10vw;
    width: 10vw
  }

  .tile40 {
    /* as flex item */
    flex: 0 1 95%;
    max-width: 100%;
  }

  .textBlock {
    padding: 15px;
  }
}

/* Products */
.productCover {
  width: 90%;
  height: 100%;
  padding: 5px;
  position: relative;
}

.productDesc {
  width: 90%;
  padding: 5px;
}

.productPreview .title {
  text-align: left;
}

.productPreview {
  margin: 10px;
  justify-content: space-between;
  align-items: center;
}

.productPart {
  padding: 1.3em;
}

.product .coverImg {
  max-height: 300px;
  overflow: hidden;
}

.product .coverImg img {
  width: 100%;
}

.productInfo {
  max-width: 570px;
}

.productPreview .productInfo {
  margin-right: 70px;
}

.productPage .productInfo {
  margin-left: 70px;
  flex-flow: column-reverse;
  max-width: 90vw;
}

/* Filter products */
.filterArea {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  z-index: 1500;
}

.filterArea .categoriesFilter {
  width: 100%;
}

.filterMenu {
  width: auto;
  display: flex;
  padding: 10px;
  flex-flow: row wrap;
  justify-content: center;
}

.filterMenu a, .filterMenu a:visited {
  text-decoration: none;
  color: #333;
  color: var(--foregroundDark);
}

#emblems {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

.emblemsFilter {
  justify-content: center;
  display: none;
}

.categoryItem {
  height: 64px;
  display: flex;
  align-items: center;
  margin: 0px 10px;
}

.categoryItem .categoryName {
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  width: 120px;
  text-decoration: none;
  font-size: 1.5em;
}

.emblemsFilter fieldset {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

label {
  display: flex;
  align-items: center;
}

input[type=radio], input[type=checkbox] {
  flex: none;
  margin: 0px 4px 0px 20px;
}

@media screen and (min-width: 575px) {
  .filterArea.positionFixed {
    position: fixed;
    top: 52px;
    background-color: white;
  }

  .positionFixed .filterMenu {
    padding: 3px;
  }

  .categoryItem .categoryName {
    display: flex;
  }
}

/* Category Pictogram and Product Emblems */
.productCategory {
  width: 64px;
  display: flex;
  flex-flow: column;
  position: absolute;
  top: 0px;
}

.productPreview .productCategory {
  right: 0px;
  justify-content: flex-end;
  height: 100%;
}

.productPage .productCategory {
  left: 0px;
  justify-content: flex-start;
  height: 100%;
}

.categoryPictogram {
  width: 64px;
  height: 64px;
  background: url("img/piktogramy.png");
}

.brašne .category {
  background-color: #ff9999;
}

.brašne .categoryPictogram {
  background-position: 0px 0px;
}

.odevy .category {
  background-color: #b899ff;
}

.odevy .categoryPictogram {
  background-position: -64px 0px;
}

.rukavice .category {
  background-color: #feff99;
}

.rukavice .categoryPictogram {
  background-position: -128px 0px;
}

.zvárači .category {
  background-color: #ff6f26;
}

.zvárači .categoryPictogram {
  background-position: -192px 0px;
}

.držiaky .category {
  background-color: #99ffa9;
}

.držiaky .categoryPictogram {
  background-position: -256px 0px;
}

.emblems {
  display: flex;
  justify-content: space-evenly;
  flex-flow: wrap;
  margin: 15px 0px;
}

.productPreview .emblems {
  flex-flow: wrap-reverse;
}

.emblemItem {
  width: 24px;
  height: 24px;
  background: url("img/piktogramy.png");
  background-size: auto 72px;
  position: relative;
}

.emblemItem.reinforced {
  background-position: 0px 48px;
}

.emblemItem.rivets {
  background-position: -24px 48px;
}

.emblemItem.leather {
  background-position: -48px 48px;
}

.emblemItem.tools {
  background-position: -72px 48px;
}

.emblemItem.strap {
  background-position: -96px 48px;
}

.emblemItem.waterproof {
  background-position: -120px 48px;
}

.emblemItem.welding {
  background-position: -144px 48px;
}

.emblemItem.kevlar {
  background-position: -168px 48px;
}

.tooltip {
  display: none;
  position: absolute;
  left: 30px;
  top: 15px;
  padding: 8px;
  width: 200px;
  height: auto;
  background-color: #303841;
  background: var(--backgroundDark);
  color: white;
}

.productPreview .tooltip {
  right: 30px;
  left: auto;
}

.emblemItem:hover .tooltip {
  display: block;
}

.galleryThumbs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.galleryPhoto {
  width: 100%;
  height: 350px;
  object-fit: contain;
}

.product .gallery .thumb {
  height: 60px;
  width: 100px;
  object-fit: contain;
}

.product .gallery .thumb:hover {
  cursor: pointer;
}

.attrTitle {
  font-weight: bold;
}

@media screen and (min-width: 575px) {
  .productInfo {
    height: 100%;
  }

  .productPage .productInfo {
    flex-flow: row;
  }

  .productCover {
    width: 30%;
    max-width: 30%;
  }

  .productDesc {
    width: 50%;
    min-width: 300px;
  }

  .gallery {
    width: 35%;
    min-width: 150px;
    max-width: 400px;
    padding: 15px;
  }

  .productPreview {
    min-width: 600px;
    max-width: 615px;
    width: 97vw;
    height: 280px;
  }
}

.anchorPoint {
  position: absolute;
  top: -160px;
}

.grecaptcha-badge {
  z-index: 1500;
  box-shadow: none !important;
  margin: auto;
}

@media print{
#topMenu{
display: none;
}
  .homeDesc{
display: none;
}
}