@import url('https://fonts.googleapis.com/css2?family=Judson:ital,wght@0,400;0,700;1,400&family=Junge&display=swap');



/* Light */
@font-face {
    font-family: 'Helvetica';
    src: url('fonts/HelveticaNeueLight.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Regular */
@font-face {
    font-family: 'Helvetica';
    src: url('fonts/HelveticaNeueRoman.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Medium */
@font-face {
    font-family: 'Helvetica';
    src: url('fonts/HelveticaNeueMedium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Bold */
@font-face {
    font-family: 'Helvetica';
    src: url('fonts/HelveticaNeueBold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Black */
@font-face {
    font-family: 'Helvetica';
    src: url('fonts/HelveticaNeueBlack.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cylburn';
    src: url('../static/fonts/Cylburn.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hoefler';
    src: url('../static/fonts/HoeflerTextRegular.ttf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Hoefler';
    src: url('../static/fonts/HoeflerTextItalic.ttf') format('truetype');
    font-weight: 400;
    font-style:italic;
    font-display: swap;
}


@font-face {
    font-family: 'Hoefler';
    src: url('../static/fonts/HoeflerTextBlack.ttf') format('truetype');
    font-weight: 700;
    font-style:normal;
    font-display: swap;
}




:root {
  --hel:'Helvetica';
  --hoe:'Hoefler';
    --cy:'Cylburn';
  

  --jud:   "Judson", serif;
    --jun:  "Junge", cursive;

  --primary:#000000;
  --siva:#FFFFFF17;
  --light:#878F57;
  --textwhite:#F6F8EB;
  --landing-width:84.17vw;
  --landing-width-mobile:86vw;
  --boxshadow:0px 0px 30px 0px #0000000F;


--d10:0.52vw;
   --d11:0.57vw;
 
   --d12:0.63vw;
   --d13:0.68vw;
    --d14:0.73vw;
    --d15:0.78vw;
    --d16:0.83vw;
    --d18:0.94vw;
       --d19:0.99vw;
    --d20:1.04vw;
    --d22:1.15vw;
    --d24:1.25vw;
    --d25:1.3vw;
    --d28:1.46vw;
    --d30:1.56vw;
    --d32:1.67vw;
    --d34:1.77vw;
    --d36:1.88vw;
    --d44:2.29vw;
    --d40:2.08vw;
    --d48:2.5vw;
    --d54:2.81vw;
    --d56:2.92vw;
    --d64:3.33vw;
    --d70:3.65vw;
       --d75:3.91vw;
    --d80:4.17vw;
    --d84:4.38vw;
    --d100:5.21vw;
    --d110:5.73vw;
    --d120:6.25vw;
    --d128:6.67vw;
    --d156:8.13vw;
    --d904:47.08vw;


      --m10:2.78vw;
    --m11:3.06vw;
    --m12:3.33vw;
    --m13:3.61vw;
    --m14:3.89vw;
    --m15:4.17vw;
    --m16:4.44vw;
    --m18:5vw;
    --m20:5.56vw;
    --m22:6.11vw;
    --m24:6.67vw;
    --m25:6.94vw;
    --m28:7.78vw;
    --m30:8.33vw;
    --m32:8.89vw;
    --m34:9.44vw;
    --m36:10vw;
    --m40:11.11vw;
    --m44:12.22vw;
    --m45:12.50vw;
    --m48:13.33vw;
    --m56:15.56vw;
    --m64:17.78vw;
    --m68:18.89vw;
    --m80:22.22vw;
    --mmt: 27.78vw;

  






 

}
/* width */
::-webkit-scrollbar {
    width: 10px;
   
    
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: white;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--primary);
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
  }
.pcshow{
  display: block;
}

.pchide{
  display: none;
}
body{
    margin: 0;
    padding: 0;
    font-family: var(--din);
    overflow-x: hidden;
    background-color: black;
}


.hero{
  background-image: url('./img/landing.svg');
  background-size: cover;
  width: 100vw;
  height: 56.25vw;
  position: relative;

}

.hero h1{
  color:#EFF3F4 ;
  font-family: var(--cy);
  font-weight: 400;
  font-size: 6.66vw;
  margin: 0;
  top: 31.98vw;
  left:50.05vw ;
  position: absolute;

}

.hero  img{
  width:47.14vw;
  margin: 0;
  top: 31.98vw;
  right:5.73vw ;
  position: absolute;

}


.hero h3{
  color:#BEBEBE ;
  font-family: var(--jud);
  font-weight: 400;
  font-size: var(--d80);
  margin: 0;
  top: 43.98vw;
  right:5.73vw ;
  position: absolute;

}

.main{
  background-image: url('./img/pozadina2.jpg');
  width: 100vw;
  background-size: cover;
  background-repeat: no-repeat;
}

.counter{
  width: 35.16vw;
  display: flex;
  justify-content: space-between;
  padding-top: var(--d84);
  padding-bottom: 0vw;
  margin: auto;
}

.counter h1{
  color: #EFF3F4;
  font-family: var(--jud);
  font-weight: 400;
  font-size: var(--d128);
  margin: 0;
  text-align: center;

}

.counter p{
  color:#EFF3F4;
  font-family: var(--hoe);
  font-size: var(--d32);
  margin: 0;
  margin-top: var(--d34);
  text-align: center;

}

.where{
  position: relative;
  display: flex;
 
}

.where p{
  position: absolute;
  top: 0;
  left: 6.99vw;
  z-index: 8;
  font-family: var(--cy);
  font-size: var(--d100);
  font-weight: 400;
  color:#EFF3F4;
  margin: 0;
}

.where .left img{
  margin-left: 7.86vw;
  width: 55.31vw;
  margin-top:4.2vw;

}

.where .right{
  margin-left: -7.46vw;
  padding-top:7.7vw;
}

.where .right h1{
  color: #EFF3F4;
  font-family: var(--cy);
  font-weight: 400;
  font-size: var(--d64);
  margin: 0;
  margin-left:-1vw;
}

.where .right h2{
  color: #FFFFFF;
  font-family: var(--hel);
  font-weight: 400;
  font-size: var(--d20);
  margin-top: 1vw;
  margin-bottom: 2vw;
  width: 29.74vw;

}

.where button{
  color:#000000 ;
  font-family: var(--hoe);
  font-weight: 400;
  font-size: var(--d30);
  padding: 0.22vw 0.94vw;
  background-color: #D9D9D9;
  border-radius: var(--d36);
  border: none;
  outline: none;
  cursor: pointer;
  margin: 0;

}
.where h3{
    font-family: var(--cy);
    font-size: var(--d100);
    font-weight: 400;
    color: #EFF3F4;
    margin-top: 3vw;
    margin-bottom: 0;
     margin-left:-1vw;
 
}

.where h4{

  color: #FFFFFF;
  font-family: var(--hel);
  font-weight: 400;
  font-size: var(--d25);
margin: 0;
margin-bottom: 0.42vw;



}


.pisma{
  position: relative;
  margin-top: 3vw;
  background: transparent;
  width: 100vw;
  height: 61vw;
}

.koverta{
  width:66.82vw ;
  right:  var(--d100);
  top: 0;
  z-index: 7;
  position: absolute;
}

.papir{
  position: absolute;
  z-index: 8;
  width: 33.39vw;
  height: 55.42vw;
  background-image: url('./img/papir.svg');
  background-size: cover;
  left: 11vw;
  top: 6.48vw;
}

form{
  width:14.74vw ;
  position: absolute;
  top: 11.28vw;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
}

form input{
  background: transparent;
  border: none;
  outline: none;
  text-align: center;
  font-family:var(--hoe) ;
  font-size: var(--d20);
  font-weight: 400;
  color: #a3a2a2;

}

form input::placeholder{
 font-family:var(--hoe) ;
  font-size: var(--d20);
  font-weight: 400;
  color: #a3a2a2;
}
.ispodinputa{
  background-image: url('./img/ispodinputa.svg');
  background-size: cover;
  width: 100%;
  height: var(--d10);
  margin-top: var(--d18);
  margin-bottom: var(--d14);
  
}

form label{

  font-family:var(--hoe) ;
  font-size: var(--d30);
  font-weight: 400;
  color: #676767;
  margin-top: var(--d20);

}

form h1{

  font-family:var(--hoe) ;
  font-size: var(--d20);
  font-weight: 400;
  color: #676767;

  font-style: italic;
  width: 10.73vw;
  margin: auto;
  margin-top: var(--d54);
  margin-bottom: var(--d84);
  line-height: 106%;

}

form h2{
  font-family: var(--hoe);
  font-size: var(--d40);
  color: #676767;
  font-weight: 400;
  margin: 0;
  font-style: normal;
}


strong {
  position: relative; 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0px; 
  font-weight: 700;
}
.rsvp-option {
    position: relative;
    display: inline-block;
}



body.rsvp-message-open::before {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 99998;
	pointer-events: none;
	opacity: 1;
}

.rsvp-option::before {
    content: "";
    position: absolute;
    top: 48%;
    left: 55%;
    transform: translate(-50%, -50%) scale(0.4) rotate(-8deg);
    width: var(--d64);
    height: var(--d34);
    background-image: url('./img/kruzic.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;

    opacity: 0;
    pointer-events: none;
}

.rsvp-option.confirmed::before {
    animation: kruzicPop 0.7s cubic-bezier(.2, .9, .25, 1.25) forwards;
}

@keyframes kruzicPop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.35) rotate(-16deg);
        filter: blur(2px);
    }

    55% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.12) rotate(3deg);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        filter: blur(0);
    }
}

form .dolazim{
  font-family: var(--hoe);
  font-size: var(--d30);
  font-weight: 400;
  color: #676767;
  margin-top: 0.75vw;
  margin-bottom: 0;
}


form button{
  color: #ececec;
  font-family: var(--hoe);
  font-weight: 400;
  font-size: var(--d20);
  background-color:#ABABAB ;
  padding:  0.22vw var(--d40);
  border: none;
  outline: none;
  border-radius: var(--d36);
  cursor: pointer;
  margin-top: var(--d20);
  margin-bottom: var(--d64);

}

form .poruka{

  font-family:var(--hoe) ;
  font-size: var(--d16);
  font-weight: 400;
  color: #676767;

  font-style: italic;
  width: 10.73vw;
  margin: auto;
 
  line-height: 106%;

}


.hvala{
  position: absolute;
  bottom: var(--d40);
  right: 13.91vw;
  width: 34.01vw;
}


footer{
  padding-top: var(--d128);
  padding-bottom: var(--d128);
  display: flex;
  
}

footer p{

  color: #f4f4f4;
  font-family: var(--cy);
  font-size: var(--d100);
  font-weight: 400;
  margin: 0;
    margin-left: 29.32vw;
    margin-right: 10.16vw;
}

footer a{
  text-decoration: none;
  font-family: var(--hoe);
  font-size: var(--d32);
  font-weight: 400;
  color: #e9e9e9;
      align-content: center;


}
.rsvp-choice {
    background: transparent;
    border: 0;
    font: inherit;
    cursor: pointer;
    opacity: 0.45;
}

.rsvp-choice.active {
    opacity: 1;
    font-weight: bold;
    text-decoration: underline;
}

.pratioci-box {
    margin-top: 20px;
}

.pratioci-box textarea {
    width: 100%;
    resize: vertical;
}


  @media screen and (max-width:900px){
      
      .hero img{
          display:none;
      }

    .main{

       background-image: url(./img/pozadinamobile.jpg);

    }

   .hero {
    background-image: url(./img/landingmobilna.svg);
    background-size: cover;
    width: 100vw;
    height: 215.74vw;
    position: relative;
}

.hero h1, .hero h2, .hero h3{
  display: none;
}


.counter h1 {
    color: #EFF3F4;
    font-family: var(--jun);
    font-weight: 400;
    font-size: 13.89vw;
    margin: 0;
    text-align: center;
}


.counter p {
    color: #EFF3F4;
    font-family: var(--hoe);
    font-size: 4.63vw;
    margin: 0;
    margin-top:0;
    text-align: center;
}

.counter{
  width: 64.81vw;
  margin-top: -51vw;
    position: relative;
}


.where {
    position: relative;
    display: block;
}


.where p{
  font-size: 12.73vw;
  left: 37.73vw;
  top: -7vw;
  line-height:65%;

}


.pcshow{
  display: none;
}

.pchide{
  display: block;
}
.where .left img{
  width: 68.06vw;
  margin-left: 15.97vw;
  margin-top: 38.73vw;
}

.where .right{
  padding: 0;
  margin: 0;
  width: 100vw;
  text-align: center;
}
.where .right h1{
  font-size: 14.81vw;
          margin: auto;
        width: fit-content;
        
        margin-top: -12.3vw;
}

.where .right h2{
  width: 68.06vw;
  margin: auto;
  font-size:3.94vw ;
  text-align: center;
  margin-top: 3vw;
}

.where button{
  font-size: 5.56vw;
  margin-top: 5vw;
  border-radius: 5vw;
  padding: 1vw 4vw;

}

.kada-mobile{
  background-image: url('./img/kadamobile5.svg');
  width: 100vw;
  height: 29.08vw;
  background-size: cover;
  margin-top: 14.3vw;
}

.pisma{
  height: 200vw;
  position: static;
}

.koverta{
  position: static;
  width: 59.72vw;
  margin: auto;
  margin-top: 9.35vw;
}

.papir{
  position: relative;
  width: 100vw;
      height: 158.42vw;
      top: -3vw;
      left: 0;
}

form{
  width: 54.40vw;
  margin-top: 20.78vw;
}

form input, form input::placeholder{
  font-size: 3.70vw;
}

.ispodinputa{
  width: 39.35vw;
  height:1.39vw;
  margin:auto;
  margin-top: 1.62vw;
  margin-bottom:2.78vw ;


}

form label{
  font-size: 5.56vw;
}
form h1{

  font-size: 3.70vw;
  width: 47.69vw;
  margin-top: 7.41vw;

}

form h2{
  font-size: 7.41vw;
}


form .dolazim{

    font-size: 4.63vw;

}

strong::before{

      width: 7.41vw;
    height:4.17vw;
        background-image: url(./img/kruzicmobile.svg);
        left: 58%;

}

form button{
  font-size: 3.70vw;
  border-radius: 5vw;

  padding: 1vw 4vw;
  margin-top: 4.25vw;

}

form .poruka{
  font-size:3.70vw ;
  width: 50.40vw;
  margin-top: 7vw;
  color: #ABABAB;
}

.hvala{
  position: static;
  width: 100vw;
  margin-top: 5vw;
}

    
footer{
  flex-direction: column;
  text-align: center;
  margin-top: 10vw;
  background-image:url('./img/footerbg.png');
  background-size:cover;
}

footer p{
  color:#5D5D5D;
  font-size: 12.73vw;
  margin: 0;
 margin-bottom: 3vw;
        margin-top: 13vw;

}
footer a{
  color: #7f7f7f;
  font-size:3.70vw;
  margin-top: -2vw;
}







    

    
  }