* {box-sizing: border-box}
.mySlides01,.mySlides00 {display: none}
.mySlides01,.mySlides00 {
  width: 100%;
  height: 80vh;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: relative;
  background-size: cover;
  border-radius: 6px;
  border: 3px solid #000;
  video,  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 6px;
    border: 3px solid #000;
  }
}
img {
  vertical-align: middle;
  height: auto;
}

hr{
  border: 0 none;
  border-bottom: 1pt dashed #999;
  margin: 10px auto;
  padding: 0;
  height: 0;
}

html, body {
  height: 100%;
}
html {
  font-size: 100%;
  line-height: 1.2;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-family: bodyFont;
  font-size: 2em;
  text-align: center;
  color: #fff;
  background: #333 url("imgs/gallery/lv01p08.jpg") no-repeat  fixed center;
  background-size: cover;
}
main {
  background: rgba(150, 150, 160, 0.7);
  background-image: url("imgs/pixel.png");
  color: #fff;
  position: relative;
  padding: 5vh 0 10vh;
  margin: 0;
}


@font-face {
  font-family: bodyFont;
  src: url(fonts/KOMTXTT_.ttf);
}
@font-face {
  font-family: titleFont;
  src: url(fonts/helsinki.ttf);
}



h1, h2, h3 {
  font-family: titleFont;
  font-weight: bold;
}
h2 {
  font-size: 200%;
  margin: 20px 0;
  line-height: 0.8;
  color: var(--yellow);
}
h1, h2, .shadow{
  text-shadow: 2px 0 black, 0 2px black, -2px 0 black, 0 -2px black, 6px 6px black;
}
h1{
  font-size: 3em;
  padding: 0 2% 20px;
  span{
    display: block;
    font-size: 60%;
    font-family: bodyFont;
  }
}
.black{color: #000;}
.white{color: #fff;}
.yellow{color: var(--yellow);}
.crossed {
  text-decoration: none;
  text-decoration: line-through;
}
.upper {
  text-transform: uppercase;
}
.centered {text-align: center;}
.lefted {text-align: left;}
.righted {text-align: right;}
p {
  font-weight: normal;
  margin: 12px 0;
}
p a{
  color: inherit;
  text-decoration: none;
  border-bottom: 2px dotted #999;
}
p a:hover{
  color: var(--yellow);
  border-bottom: 2px solid var(--yellow);
}
.parag {
  column-count: 2;
  h2 {
    column-span: all;
  }
}
#pageHeader {
  /*font-size: 0;*/
  text-align: center;
  color: #000;
  position: fixed;
  top: 0;
  width: 100%;
  height: 5%;
  transition: 0.2s;
  padding: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0);
}
:root {
  --big: 100%;
  --small: 0%;
  --marginTop: 5%;
  --yellow: #e36e00;
  --headerBG: rgba(0, 0, 0, 0);
  --headerBGdown: rgba(0, 0, 0, 0);
}
#logo{
  width: var(--big);
  transition: 0.2s;
}
.bigImg{
  width: 100%;
}

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 100%;
  width: 30%;
  margin: 0;
  color: #000;
  transition: 0.2s ease;
  user-select: none;
  text-decoration: none;
  text-align: center;
  border-radius: 6px;
  img {
    position: relative;
    top: 50%;
    margin-top: -50px;
    opacity: 0.5;
  }

}
.prev {
  left: 0;
  text-align: left;
}
/* Position the "next button" to the right */
.next {
  right: 0;
  text-align: right;
}

/* On hover, add a black background color with a little bit see-through*/
.prev:hover img {
  opacity: 1;
}
.next:hover img {
  opacity: 1;
}
.prev:hover {
  background-image: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.3));
}
.next:hover {
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.3));
}
.prev:active, .next:active {
  background-image: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.7));
    color: #fff;
}
 .next:active {
  background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.7));
}

/* Caption text */
.text {
  color: #fff;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  background-color: rgba(0,0,0,0.5);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #fff;
  text-align: center;
  font-size: 0.7em;
  padding: 8px 12px;
  position: absolute;
  top: 4px;
  left: 100px;
  background-color: rgba(0,0,0,0.7);
  border-radius: 8px;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 0.7s;
}

@keyframes fade {
  from {opacity: .5}
  to {opacity: 1}
}

.content,
.contentW {
  color: #fff;
  padding: 1rem 1rem 3rem;
  margin: 10px AUTO 100px;
  border: 4px solid #000;
  border-radius: 20px;
  background: rgba(2, 3, 10, 0.90);
}
.contentW {
  color: #000;
  background: rgba(255, 255, 230, 0.90);
  border-color: rgba(255, 255, 230, 1);
}

.btn{
  padding: 1rem;
  border: 4px dashed black;
  border-radius: 12px;
  background: var(--yellow);
  display: block;
  text-decoration: none;
  color: #fff;
  text-align: center;
  width: 100%;
  text-shadow: 2px 0 black, 0 2px black, -2px 0 black, 0 -2px black, 6px 6px black;
  span{
    font-family: titleFont;
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 120%;
  }
  b{
    font-family: titleFont;
    font-weight: bold;
    font-size: 120%;
  }
}
.btn:hover{
  background: rgba(0, 0, 255, 1);
  border: 4px solid black;
}

#orderForm input,
#orderForm .btnQtt,
#orderForm a
{
  font-size: 0.7em;
  line-height: 2;
  padding: 6px;
  border-radius: 6px;
  margin: 0 2px;
}
#orderForm input,
#orderForm textarea {
  border: 2px solid #000;
  font-size: 28px;
}
#orderForm label .big  {
  display: block;
  font-size: 130%;
  text-transform: uppercase;
  font-weight: bold;
}
#orderForm label  {
  padding: 6px 12px 0;
  display: block;
}
#orderForm .btnQtt{
  border: none;
  line-height: 1.4;
  padding: 12px 24px;
  border-radius: 6px;
  border: 2px solid var(--yellow);
  background-color: #000;
  cursor: pointer;
  color: var(--yellow);
  display: inline-block;
  font-size: 28px;
  font-weight: bold;
}
#orderForm button:hover{
  background: rgba(0, 0, 0, 1);
  color: #fff;
  border-color: #fff;
}
 .inputNumber{
  padding: 2px 3px;
  text-align: center;
  width: 30%;
}
#orderForm .row{
  padding: 20px 0;
}
#orderForm img{
  width: 50%;
  display: inline-block;
  margin: 10px auto;
}
.checkbox {
  width: 40px;
  height: 40px;
  display: inline-block;
  border: 2px solid var(--yellow);
  border-radius: 4px;
  float: left;
}


input[type="number"] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

#mce-EMAIL{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid #ffba00;
  border-radius: 4px;
}
input[type=button], input[type=submit], input[type=reset] {
  font-size: 1em;
  background-color: #ffba00;
  border: 2px solid #000;
  border-radius: 6px;
  color: #000;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

.brandingLogo {
  float: right;
  display:none;
}
.float {
  float: left;
}
.unfloat {
  clear: both;
  height: 0;
  font-size: 0;
}

h2 i,
.small {
  font-size: 80%;
  font-style: normal;
}
h3 i,
.smaller {
  font-size: 60%;
  font-style: normal;
}
h2 b,
.big {
  font-size: 110%;
}
.short {
  padding: 3px 0;
  margin: 0;
}
.topPush {
  padding: 20px 0 0 ;
  margin: 0;
}
.bigButton {
  cursor: pointer;
  font-size: 150%;
  font-style: normal;
  font-weight: bold;
  padding: 20px;
  display: block;
  width: 100%;
  font-family: titleFont;
  border-radius: 12px;
}



* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column{
  width: auto;
  padding: 0 20px;
}
.column25 {
  width: 23%;
}
.column33 {
  width: 31.33%;
}
.column40,
.column40page {
  width: 38%;
}
.column50 {
  width: 48%;
}
.column60,
.column60page {
  width: 58%;
}
.column66 {
  width: 64%;
}
.column75{
  width: 73%;
}
.column100{
  width: 98%;
}
.column,
.column25,
.column33,
.column40,
.column40page,
.column50,
.column60,
.column60page,
.column66,
.column75,
.column100 {
  padding: 1%;
  text-align: inherit;
  float: left;
  /*padding: 5px;*/
}
.w50{
  width: 60%;
  margin: 0 auto 50px;
  /*text-align: left;*/
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.pop{
  border: 3px dotted rgba(150, 150, 160, 0.3);
  border-radius: 12px;
  margin: 10px;
  background: rgba(150, 150, 160, 0.05);
  padding: 10px;
  b{
    text-transform: uppercase;
    display: block;
  }
}
.ship{
  letter-spacing: 4px;
  margin: 4px;
}



/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}


@media screen and (max-width: 1700px) {
  .column40page,
  .column60page
   {
    float: none;
    width: 80%;
    margin: 1% auto;
    text-align: center;
    padding: 0;
  }
  .bigImg{
    width: 50%;
    margin-bottom: -7%
  }
  .w50{
    width: 80%;
    /*margin: 0 auto 50px;
    text-align: left;*/
  }
  .content,
  .contentW {
    padding: 2%;
  }
}


@media screen and (max-width: 1200px) {
  .parag {
    column-count: 1;
  }
  .column25,
  .column33,
  .column40,
  .column50,
  .column60,
  .column66,
  .column75,
  .column100,
  .pop
   {
    float: none;
    width: 80%;
    margin: 1% auto;
    text-align: center;
    padding: 0;
  }
  .content,
  .contentW {
    padding: 2%;
  }
  .pushH{
    margin-top: 5%;
  }
  #orderForm .row{
    padding: 0;
  }
}

@media screen and (max-width: 1000px) {
  /* Create two equal columns that floats next to each other */
  .column25,
  .column33,
  .column40,
  .column50,
  .column60,
  .column66,
  .column75,
  .column100,
  .column40page,
  .column60page,
  .pop
   {
    float: none;
    width: 96%;
    margin: 1em 2%;
    text-align: center;
  }
  .bigImg{
    width: 50%;
    margin-bottom: -20%
  }
  .pushH{
    margin-top: 12%;
  }
  .content,
  .contentW {
    padding: 2%;
    margin: 60px AUTO 100px;
    border: 0 none;
    border-radius: 60px 60px 12px 12px;
  }
  #orderForm img{
    width: 30%;
    display: inline;
    vertical-align: top;
    margin-top: 60px;
  }
  #orderForm label .big {
    display: inline-block;
    font-size: 100%;
    text-transform: uppercase;
  }
}

@media screen and (max-width: 750px) {
  body {
    font-size: 2em;
  }
  .column25,
  .column33,
  .column40,
  .column50,
  .column60,
  .column66,
  .column75,
  .column100,
  .column40page,
  .column60page,
  .w50
   {
    width: 100%;
    margin: 1em auto;
    padding: 0;
  }
  h1 {
    font-size: 15vw;
  }
  h2 {
    font-size: 10vw;
    margin: 20px 0 0;
    line-height: 0.8;
  }
  .content,
  .contentW {
    padding: 5%;
    margin: 10px AUTO 60px;
  }
}