* {
  --responsive: calc((var(--min-font) * 1px) + (var(--max-font) - var(--min-font)) * ((100vw - 420px) / (1200 - 420))); 
  /* Ranges from 421px to 1199px */
}

@font-face {
  font-family: Big Noodle;
  src: url('fonts/big_noodle_titling.ttf') format('truetype');
}

@font-face {
  font-family: Lemonberry;
  src: url('fonts/MRF Lemonberry Sans.otf');
}

@font-face {
  font-family: Throw My HandsUp;
  src: url('fonts/ThrowMyHandsUpintheAir.ttf');
}

@font-face {
  font-family: Canela;
  src: url('fonts/canela_light.otf');
}

@font-face {
  font-family: jann script;
  src: url('fonts/jannscript.otf');
}

html { font-size: 1vw; }

.text1 {  
  /* Set max and min font sizes */
  --max-font: 60;
  --min-font: 25;
  font-family: var(--main-font);
  font-size: var(--responsive);
  font-family: Lemonberry;
  margin-top: 30px;
  text-transform: uppercase
}

.text2 {  
 /* Set max and min font sizes */
 --max-font: 60;
 --min-font: 25;
 font-family: var(--main-font);
 font-size: var(--responsive);
 font-family: Lemonberry;
 margin-bottom: 30px;
 text-transform: uppercase
}

.podloga {
  background-color: rgb(144, 200, 101);
  background-image: url('../slike/zPodloga.png');
  background-repeat : no-repeat;
  background-position: bottom right 10%;  
  background-size: auto 50%;
  padding: 15px inherit;
}

.pros {
  letter-spacing: 8px;
  color: white;
   /* Set max and min font sizes */
  --max-font: 91;
  --min-font: 23;
  font-family: var(--main-font);
  font-size: var(--responsive);
  font-family: Big Noodle;
  margin-top: 20px;
}

.contact {
  font-family: Lemonberry; 
  font-size: 40px;
  background-color: rgb(144, 200, 101);
  text-align: center;
  padding-top: 70px;
  max-width: 100%;
  width: 100%
}

.forma {
  text-align:center;
  margin:20px;
  max-width: 100%;
}

.form-control {
  font-size: 1rem;
}

.adresa {
  --max-font: 30;
  --min-font: 23;
  font-family: var(--main-font);
  font-size: var(--responsive);
  font-family: Lemonberry;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 50px;
}

.naslov {
  --max-font: 30;
  --min-font: 23;
  font-family: var(--main-font);
  font-size: var(--responsive);
  font-family: Lemonberry;
  font-weight: 700;
}

.inputi {
  --max-font: 30;
  --min-font: 23;
  font-family: var(--main-font);
  font-size: var(--responsive);
  font-family: Lemonberry;
}

.uspjesno {
  width: 100%;
  font-size: 20px;
  width:300px;
  border-radius: 50px;
  margin: 10px;
}

.footer p{
  text-align: center;
  font-family: Big Noodle; 
  color:gray; 
  font-size: 28px;
  max-width: 100%;
  height: auto;
}

.footer img {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
  /*height: 120px;*/
  align-content: center;
  object-fit: scale-down;
  
}

.form-control {
  box-shadow: none;
}

.g-recaptcha {
  margin: 0 auto;
  width: 300px;
}
#kontakt {
  float: right;
}

.flag {
  height: 30px;
  width: 30px;
}


.klasa {
  position: absolute;
  display: inline-flex;
  right: 15px;
  top: 10;
  z-index: 10
}

#eng, #ger, #por, #cro {
  margin-top: 10px;
}

.head:focus {outline:0;}

#logo {
  max-width: 100%;
  margin-top: 30px;
  float: center;
}

#superslamka {
  margin:75px auto;
}

#tema {
  margin:100px auto 50px auto;
}

#manjiLogo {
  margin:30px 0px 70px 0px;
}

#prednosti {
  margin-top: 15rem;
  margin-bottom: 10rem;
}

#case {
  margin-top: 10rem;
  margin-bottom: 10rem;
}

#name, #email, #poruka {
  width: 100%;
  font-size: 25px;
  max-width: 420px;
}
#poruka {
  margin-bottom: 20px;
}

#foot{
  letter-spacing: 10px;
  color: white;
   /* Set max and min font sizes */
   --max-font: 60;
   --min-font: 22;
   font-family: var(--main-font);
   font-size: var(--responsive);
   font-family: Big Noodle;
   margin-bottom: 50px;
   display: flex;
  align-items: center;
  justify-content: center;
}

#powered {
  color: gray;
   /* Set max and min font sizes */
   --max-font: 35;
   --min-font: 25;
   font-family: var(--main-font);
   font-size: var(--responsive);
   font-family: Big Noodle;
   margin-top: 30px;
   letter-spacing: 2px;
}

#enquiryFormRecaptcha {
  margin: 0 auto 0 auto;
}

header {
  margin-top: 30px;
}

form {
  text-align: center;
}

textarea {
  resize: none;
}

img {
  max-width: 100%;  
  height: auto;
}

hr {
  border: 0.5px solid white;
  width: 150px;
  margin-bottom: 30px;
}

#click {
  background-color:  rgb(144, 200, 101);
  color: white;
  text-align: center;
  font-size: 30px;
  margin: 60px 20px 10px 20px;
  width:300px;
  border-radius: 50px;
  border: 2px solid white;
  outline: none;
}

#click:hover {
  transition: width 2s, height 4ss;
  background-color: white;
  color: rgb(144, 200, 101);
}

#click:focus {outline:0;}

h1 {
   /* Set max and min font sizes */
   --max-font: 90;
   --min-font: 25;
   font-family: var(--main-font);
   font-size: var(--responsive);
   font-family: Big Noodle;
   letter-spacing: 10px;
}


@media (min-width: 1200px) {
  .pros {
    font-size: calc(var(--max-font) * 1px);
  }
}

@media (max-width: 320px) {
  .pros {
    font-size: calc(var(--min-font) * 1px);
  }
}

@media(max-width:1200px) {
  .g-recaptcha {
    margin-left: auto;
    margin-right: auto;
  }
}