*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
a{
  color: white;
  text-decoration: none;
}
body{
  width: 100%;
  background: url('../images/background.jpg') no-repeat, #060C0E;
  background-size: 100% auto;
}
h1, h2, h3, h4{
  font-family: 'Poppins', sans-serif;
  font-size: 40px;
  font-weight: 800;
  text-transform: uppercase;
  color: #d6ff00;
  padding: 20px 0;
}
h2{
  font-size: 25px;
  font-weight: initial;
  padding: 10px 0;
  color: white;
  text-transform:initial;
  text-align: center;
}
h3, h4{
  font-size: 30px;
  font-weight: 400;
  padding: 10px 0;
  color: #d6ff00;
  text-transform:initial;
}
h4{
  font-size: 25px;
  color: white;
}
p, ul{
  font-family: 'Zilla Slab', serif;
  font-size: 20px;
  color: white;
  text-align: justify;
}
button{
  background-color:#d6ff00;
  color:#060C0E;
  padding: 20px 25px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 800;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5vh;
}
button:hover{
  cursor: pointer;
  border: 1px solid #d6ff00;
  color: #d6ff00;
  background-color:transparent;
}
.textLink{
  font-family: 'Poppins', sans-serif;
  font-size: 25px;
  font-weight: 600;
  text-transform: uppercase;
  color: white;
  padding: 25px 40px 25px 0;
  background: url('../images/smallArrow.svg') no-repeat, transparent;
  background-position: center right;
  background-size: auto auto;
}
.textLink:hover{
  color: #d6ff00;
  border: 1px solid transparent;
}
@media screen and (max-width:1000px){
  h1{
    font-size: 30px;
  }
  h2{
    font-size: 20px;
  }
  h3{
    font-size: 18px;
  }
  h4{
    font-size: 16px;
  }
  p, ul{
    font-size: 15px;
  }
  .textLink{
    font-size: 20px;
  }
  button{
    font-size: 14px;
  }
}
/*Horní menu - START*/
#navBar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  padding: 0 68px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  background: none;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  z-index: 2;
}
@media screen and (max-width:400px){
  #navBar{
    padding: 0 10px;
  }
}

.menu{
  display: flex;
  justify-content: space-between;
  width: 80%;
}

.menu a:hover{
  color: #d6ff00;
  border-bottom: 3px solid #d6ff00;
  padding-bottom: 6px;
  transition: 300ms ease-in-out;
}

.languages span:not(:last-child){
margin-right: 15px;
}

.burger{
  display: none;
  cursor: pointer;
}
.burger div{
  width: 30px;
  height: 4px;
  background-color: white;
  margin: 5px;
  transition: all 0.3s ease;
}
@media screen and (max-width:1130px){
  body{
    overflow-x: hidden;
  }
  .menu{
    position: absolute;
    right: 0px;
    height: 100vh;
    top: 0px;
    background: linear-gradient(209deg, #193F54 0%, #000000 100%) 0% 0% no-repeat;
    flex-direction: column;
    justify-content: flex-start;
    font-size: 30px;
    width: 0px;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .menu span{
    opacity: 0;
    transform: scaleX(0.0001);
    margin-left: 68px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .menu span:first-of-type{
    margin-top: 90px;
  }
  .menu span a{
    color: #d6ff00;
  }
  .burger{
    display: block;
  }
  .languages{
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .languages span{
    margin: 0px;
  }
  .languages span:first-of-type{
    margin-left: 68px;
  }
}
@media screen and (max-width:400px){
  .menu span{
    margin-left: 10px;
    }
  .languages span:first-of-type{
      margin-left: 10px;
    }
  .languages span:not(:last-child) {
      margin-right: 0;
  }
}
.nav_active{
  transform: translateX(0%);
  width: 100%;
}
@keyframes navLinkFade{
  from{
    opacity: 0;
    transform: translateX(50px) scaleX(0.1);
  }
  to{
    opacity: 1;
    transform: translateX(0px) scaleX(1);
  }
}
.toggle .line1{
  transform: rotate(-45deg)
  translate(-5.5px,6.5px);
}
.toggle .line2{
  opacity: 0;
}
.toggle .line3{
  transform: rotate(45deg)
  translate(-6px,-7px);
}
/*Horní menu - END*/

/*Patička - START*/
.footer{
  display: flex;
  flex-direction: column;
  z-index: 1;
  margin: 0 68px;
  border-top: 1px solid white;
  color: white;
  font-family: 'Poppins', sans-serif;
  align-items: center;
}
.footerMenu{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.footer div p{
  justify-content: center;
  font-size: 10px;
}
.links{
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 800;
  color: white;
  text-transform: uppercase;
  margin: 15px 0;
}
.links a{
  margin-left: 59px;
  padding: 9px 0;
} 
.links a:hover{
    color: #d6ff00;
    border-bottom: 3px solid #d6ff00;
    padding-bottom: 6px;
    transition: 300ms ease-in-out;
}
.up{
  background: url('../images/arrow.svg') no-repeat center, #d6ff00;
  background-size: 20px 18px;
  padding: 25px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 59px;
  margin-right: initial;
}
.up:hover{
  background: url('../images/arrowY.svg') no-repeat center, transparent;
  background-size: 20px 18px;
}

.logoTUV{
  width: 200px;
}

@media screen and (max-width:1040px){
  .footerMenu {
    flex-direction: column;
    justify-content: center;
  }
  .links{
    justify-content: space-between;
    width: 100%;
  }
  .links a {
    margin-left: 0;
  }
  .up{
    margin-left: 0;
  }
  .logoTUV{
    padding-top: 30px;
  }
}
@media screen and (max-width:400px){
  .footer{
    margin: 0 10px;
  }
}
@media screen and (max-width:500px){
  .footerMenu .links{
    font-size: 10px;
  }
}
/*Patička - END*/

/*Index - START*/
.heroImage{
  width: 100%;
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper-container {
  width: 100%;
  padding-top: 150px;
  padding-bottom: 90px;
}
.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
  background-color: #060C0E;
}
.news{
  width: 100%;
  padding: 68px 68px;
  margin-bottom: 50px;
  min-height: 300px;
  background-image: url('../images/line.svg'), url('../images/line.svg');
  background-position: left top, left bottom;
  background-repeat: repeat-x, repeat-x;
  background-size: 20px auto, 20px auto;
  display: flex;
}
.news div h2{
  text-align: justify;
}
.datum{
  width: 10vw;
  margin-right: 1.5vw;
}
.news div:nth-of-type(2){
  width: 39vw;
  margin-right: 1.5vw;
}
.news div:nth-of-type(3){
  display: flex;
  flex-direction: column;
  justify-content: right;
}
.news div:nth-of-type(3) img{
  width: 39vw;
  padding-top: 20px;
}
.news .textLink{
  margin-left: 0;
}
@media screen and (max-width:1250px){
  .datum{
    width: 15vw;
  }
}
@media screen and (max-width:880px){
  .news{
    flex-direction: column;
  }
  .datum, .news div:nth-of-type(2), .news div:nth-of-type(3){
    width: 100%;
  }
  .news div:nth-of-type(3) img{
    width: 100%;
  }
}
@media screen and (max-width:400px){
  .news{
    padding: 68px 10px;
  }
}
.indexWrapper{
  margin-bottom: 5%;
}
.indexWrapper h1, .indexWrapper h2{
  padding-top: 73px;
  padding-bottom: 46px;
}
.indexWrapper h2{
  padding: 20px 0;
}
.engineering, .locksmith, .special, .locksmithProducts, .handwheel, .other{
  padding: 0 68px;
  width: 100%;
  background: linear-gradient(to right, rgba(6, 12, 14, 1), rgba(6, 12, 14, 1) 5%, rgba(6, 12, 14, 0)), url('../images/engineering.jpg') no-repeat;
  background-position: top right +68px;
  background-size: 50% auto;
  margin-bottom: 3vh;
}
.locksmith, .locksmithProducts, .other{
  background: linear-gradient(to left, rgba(6, 12, 14, 1), rgba(6, 12, 14, 1) 65%, rgba(6, 12, 14, 0)), url('../images/locksmith.jpg') no-repeat;
  background-position: top left +68px;
  background-size: auto 100%;
}
.locksmithProducts{
  background: linear-gradient(to left, rgba(6, 12, 14, 1), rgba(6, 12, 14, 1) 15%, rgba(6, 12, 14, 0)), url('../images/locksmithProducts.jpg') no-repeat;
  background-position: top left +68px;
  background-size: 50% auto;
}
.other{
  background: linear-gradient(to left, rgba(6, 12, 14, 1), rgba(6, 12, 14, 1) 15%, rgba(6, 12, 14, 0)), url('../images/other.jpg') no-repeat;
  background-position: top left +68px;
  background-size: 50% auto;
}
.special, .handwheel{
  background: linear-gradient(to right, rgba(6, 12, 14, 1), rgba(6, 12, 14, 1) 65%, rgba(6, 12, 14, 0)), url('../images/special.jpg') no-repeat;
  background-position: top right +68px;
  background-size: auto 100%;
  margin-bottom: 5%;
}
.handwheel{
  background: linear-gradient(to right, rgba(6, 12, 14, 1), rgba(6, 12, 14, 1) 5%, rgba(6, 12, 14, 0)), url('../images/handwheel.jpg') no-repeat;
  background-position: top right +68px;
  background-size: 50% auto;
  margin-bottom: 0;
}
.engineering div, .locksmith div, .special div, .locksmithProducts div, .handwheel div, .other div{
  width: 40%;
  background: url('../images/sLet.svg') no-repeat;
  background-position: top left;
}
.locksmith div, .locksmithProducts div, .other div{
  background: url('../images/zLet.svg') no-repeat, #060C0E;
  margin-left: 50%;
}
.handwheel div{
  background: url('../images/hLet.svg') no-repeat;
}
.other div{
  background: url('../images/oLet.svg') no-repeat, #060C0E;
}
.callToAction{
  display: flex;
  justify-content: center;
  flex-direction: column;
}
@media screen and (max-width:1000px){
  .engineering, .special, .handwheel{
    background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)), url('../images/engineering.jpg') no-repeat;
    background-position: center;
    background-size:cover;
  }
  .locksmith, .locksmithProducts, .other{
    background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)), url('../images/locksmith.jpg') no-repeat;
    background-position: center;
    background-size:cover;
  }
  .locksmithProducts{
    background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)), url('../images/locksmithProducts.jpg') no-repeat;
    background-position: center;
    background-size:cover;
  }
  .other{
    background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)), url('../images/other.jpg') no-repeat;
    background-position: center;
    background-size:cover;
  }
  .special{
    background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)), url('../images/special.jpg') no-repeat;
    background-position: center;
    background-size:cover;
  }
  .handwheel{
    background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)), url('../images/handwheel.jpg') no-repeat;
    background-position: center;
    background-size:cover;
  }
  .engineering div, .special div{
    width: 100%;
    margin-bottom: 2vh;
  }
  .locksmith div, .locksmithProducts div, .handwheel div, .other div{
    width: 100%;
    margin-left: 0;
    margin-bottom: 2vh;
    background-color: transparent;
  }
}
@media screen and (max-width:400px){
  .engineering, .locksmith, .special, .locksmithProducts, .handwheel, .other{
    padding: 0 10px;
  }
}
/*Index - END*/

/*O nás - START*/
.about, .who{
  padding: 100px 68px 0 68px;
}
.who div h1{
  padding-top: 100px;
}
.about h2, .who h2 {
  text-align: left;
}
.whoCol h2{
  text-align: center;
}

.callToAction h2{
  text-align: center;
  padding: 4vh 0;
}
@media screen and (max-width:400px){
  .about, .who{
    padding: 100px 10px 0 10px;
  }
}
.about div:first-of-type, .about div:nth-of-type(3){
  margin-right: 50vw;
  margin-bottom: 5vh;
}
.about div:nth-of-type(2){
  margin-left: 50vw;
}
@media screen and (max-width:1000px){
  .about div:first-of-type, .about div:nth-of-type(3){
    margin-right: 0;
  }
  .about div:nth-of-type(2){
    margin-left: 0;
  }
}
.threeCol{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.twoCol, .twoColCer{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.whoCol{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.iconImg{
  padding: 0 25% 0 25%;
  margin-top: auto;
}

.whoCol h3{
  margin-bottom: auto;
}

.vertLine{
  background-color: #d6ff00;
  width: 2px;
  height: 25px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

.ilustrImg{
  margin-top: auto;
  border: 2px solid #d6ff00;
  border-radius: 5px;
  width: 70%;
}

ul.no-bullets {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.listVyroba{
  display: flex;
  flex-direction: column;
  width: 70%;
}
@media screen and (max-width:1290px){
  .threeCol{
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 200px;
  }
  .ilustrImg{
    width: 40%;
  }
}
@media screen and (max-width:1000px){
  .threeCol{
    grid-template-columns: 1fr;
    grid-row-gap: 50px;
  }
  .listVyroba{
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .ilustrImg{
    width: 70%;
  }
  .who div h1{
    text-align: center;
  }
}

/*O nás - END*/

/*Výrobky - START*/
.products{
  padding-top: 100px;
  background: #060C0E;
}
/*Výrobky - END*/

/*Stroje - START*/
.mach{
  padding: 0 68px;
  padding-top: 100px;
  width: 100%;
}
.mach .item div{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.item{
  display: flex;
  flex-direction: row;
  min-height: 330px;
}
@media screen and (max-width:850px){
  .mach .item{
    flex-direction: column;
    margin-bottom: 3vh;
  }
}
.mach .item div:nth-of-type(2) img{
  width: 50%;
}
@media screen and (min-width:1400px){
  .mach .item div:nth-of-type(2) img{
    width: 25%;
  }
}
.mach .item div div{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.mach .item div div img{
  margin: 30px 0;
  margin-right: 68px;
}
@media screen and (max-width:400px){
  .mach{
    padding: 100px 10px 0 10px;
  }
  .mach .item div div img{
    margin-right: 10px;
  }
}
#photoMachine img{
  width: 65%;
  object-fit: contain;
  object-position: left center;
}
.offsetLeft{
  padding-left: 152px;
}
.offsetLeft p{
  margin-top: 0px;
}
@media screen and (max-width:850px){
  .offsetLeft{
    padding-left: 0px;
  }
  #photoMachine img{
    width: 100%;
  }
}
/*Stroje - END*/

/*Kontakt - START*/
.kWrap{
  padding: 0 68px;
  padding-top: 100px;
  width: 100%;
}
section{
  width: 100%;
  height: 50vh;
}
@media screen and (max-width:400px){
  .kWrap{
    padding: 0 10px;
    padding-top: 100px;
  }
}
/*Kontakt - END*/

/*not found - START*/
.notFound{
  padding: 0 68px;
  padding-top: 100px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.notFound2{
  padding: 0 68px;
  padding-top: 100px;
  width: 100%;
}
.notFound img{
  width: 40%;
}
@media screen and (max-width:400px){
  .notFound{
    padding: 0 10px;
    padding-top: 100px;
  }
  .notFound2{
    padding: 0 10px;
    padding-top: 100px;
  }
  .notFound img{
    width: 80%;
  }
}
/*not found - END*/

/*Certifikaty - START*/
.pBlock{
  text-align: left;
  width: 70%;
}

.twoColCer{
  width: 100%;
  grid-gap: 80px;
  padding-bottom: 100px;
  align-items: center;
}

.twoColCol{
  width: 100%;
  display: flex;
}

.twoColCol:first-of-type {
  justify-content: end;
}

.tvu, .twoColCol h2{
  width: 70%;
}

@media screen and (max-width:1290px){
  .tvu, .twoColCol h2{
    width: 80%;
  }
}

@media screen and (max-width:1000px){
  .tvu, .twoColCol h2{
    width: 95%;
  }
}

@media screen and (max-width:550px){
  .tvu, .twoColCol h2{
    width: 100%;
  }
  
  .twoColCer{
    grid-template-columns: 1fr;
    grid-gap: 20px;
  }
}
/*Certifikaty - END*/