@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --rob:"Roboto", sans-serif;

  --primary:#111214;
  --crvena:#EF364D;
  --light:#878F57;
  --textwhite:#F6F8EB;
  --bijela80:#FFFFFFCC;
  --landing-width:79.17vw;
  --landing-width-mobile:86.67vw;
  --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;
    --d20:1.04vw;
    --d22:1.15vw;
    --d24:1.25vw;
    --d25:1.3vw;
    --d28:1.46vw;
    --d30:1.56vw;
    --d32:1.67vw;
    --d34:1.77vw;
    --d44:2.29vw;
    --d40:2.08vw;
    --d48:2.5vw;
    --d54:2.81vw;
    --d56:2.92vw;
    --d64:3.33vw;
    --d70:3.65vw;
    --d80:4.17vw;
    --d84:4.38vw;
    --d100:5.21vw;
    --d110:5.73vw;
    --d120:6.25vw;
    --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;
    --m32:8.89vw;
    --m34:9.44vw;
    --m36:10vw;
    --m40:11.11vw;
    --m44:12.22vw;
    --m48:13.33vw;
    --m56:15.56vw;
    --m64:17.78vw;
    --m68:18.89vw;
    --mmt: 27.78vw;


  






 

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

.pchide{
  display: none;
}

html{
  scroll-behavior: smooth;
}


.solo-h{
  font-family: var(--rob);
font-weight: 600;

font-size: var(--d48);

line-height: 100%;
color: white;
margin-top: var(--d100);
margin-bottom: var(--d64);


}

body{
  margin: 0;
  padding: 0;
  background: var(--primary);
  overflow-x: hidden;

}

header{
  box-shadow: 0px 4px 16.2px -3px #00000040;
  height: var(--d120);

}

.header-content{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: var(--landing-width);
  margin: auto;
  height: var(--d120);
}

.logo{
  width: 5vw;
}

.naruci{
  width: 8.07vw;

}

nav{
  display: flex;
  gap: var(--d56);
}

nav a{
  font-family: var(--rob);
font-weight: 500;

font-size: var(--d15);

line-height: 100%;
text-decoration: none;


color: #FFFFFFE5;

}

.naslovna{
  width: var(--landing-width);
  margin: auto;
  display: flex;
  margin-top: var(--d14);
}

.mufidmemija{
  width: 15.99vw;
  margin: auto;
  display: flex;
  margin-top: var(--d84);
}

.main-content{
  width: var(--landing-width);
  margin: auto;
  
}

.main-content .oknjizi{
  display: flex;
  justify-content: space-between;
  padding-top: var(--d100);
  padding-bottom: var(--d100);
  border-top: 1px solid #FFFFFF4D;
    border-bottom: 1px solid #FFFFFF4D;
    margin-top: var(--d100);
}

.oknjizi .left h2{
  font-family: var(--rob);
font-weight: 600;

font-size: var(--d32);

line-height: var(--d30);

color: white;
margin: 0;


}

.oknjizi .left p{
  width: 26.20vw;
  color:  #FFFFFFCC;
   font-family: var(--rob);
font-weight: 400;

font-size: var(--d16);

line-height: var(--d30);
margin-top: var(--d44);
margin-bottom: var(--d54);



}

.oknjizi .right img{
  width: 42.92vw;
}


.recenzije{
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  padding-top: var(--d100);
  padding-bottom: var(--d100);
   border-bottom: 1px solid #FFFFFF4D;
}

.recenzije .left{
  display: flex;
  flex-direction: column;
  gap: var(--d25);
}


.recenzije .left h1{

  color:  #FFFFFF;
   font-family: var(--rob);
font-weight: 600;

font-size: var(--d48);

line-height: 100%;
margin: 0;
margin-bottom: var(--d40);



}

.recenzija{
  width: 38.70vw;
border: 1px solid #FFFFFF33;
  border-radius: var(--d16);
  box-sizing: border-box;
  padding-top: var(--d44);
  padding-bottom: var(--d44);
  padding-left: var(--d56);


}

.recenzija h2{
  color:  #FFFFFF;
   font-family: var(--rob);
font-weight: 700;

font-size: var(--d24);

line-height: var(--d25);
margin: 0;

}
.recenzija h3{
  color:  #FFFFFF;
   font-family: var(--rob);
font-weight: 400;

font-size: var(--d16);

line-height: var(--d25);
margin: 0;

}

.recenzija p{
  color:  var(--bijela80);
   font-family: var(--rob);
font-weight: 400;

font-size: var(--d16);

line-height: var(--d25);
margin: 0;
width: 32.86vw;
margin-top: var(--d24);
margin-bottom: var(--d24);

}


.recenzija a{
  color:  #ffffff;
   font-family: var(--rob);
font-weight: 600;

font-size: var(--d16);

line-height:100%;
margin: 0;
text-decoration: underline;


}
.recenzije .right{
  width: 31.04vw;
}

.recenzije .right h1{

   color:  #FFFFFF;
   font-family: var(--rob);
font-weight: 600;

font-size: var(--d48);

line-height: 100%;
margin: 0;

}

.recenzije .right img{
  width: 31.04vw;
  margin-top: var(--d64);
}

.recenzije .right h2{
   color:  #FFFFFF;
   font-family: var(--rob);
font-weight: 600;

font-size: var(--d32);

line-height: 100%;
margin: 0;
margin-top: var(--d64);

}

.recenzije .right p{
  color:  var(--bijela80);
   font-family: var(--rob);
font-weight: 400;

font-size: var(--d16);

line-height: var(--d30);
margin: 0;
margin-top: var(--d40);

}

.govornici{
  padding-top: var(--d100);
  position: relative;
  overflow: hidden;
  width: 92.60vw;
  margin: auto;
}

.govornici h1{
  font-family: var(--rob);
font-weight: 600;

font-size:var(--d48);

line-height: 100%;
color:#ffffff;
text-align: center;
margin:0;
margin-bottom:var(--d64);



}
.govornici-lista{
  display: flex;
  justify-content: flex-start;

  width: var(--landing-width);
  margin: auto;
  height: 28.85vw;
  

  transition: transform 0.3s ease-in-out; /* Za laganu animaciju pomicanja */
      
 
}

.govornici-wrapper{
  width: var(--landing-width);
  overflow: hidden;
  margin: auto;
}

.govornik{
  border-radius: var(--d10);
  width:25.21vw !important;
  border: 1px solid #FFFFFF33;
   
    box-sizing: border-box;
    margin-left:var(--d10);
    margin-right: var(--d10);

}

.govornik img{
  width: 25.15vw;
  object-fit: cover;
  border-radius:  var(--d10) var(--d10) 0 0;
}

.govornik h2{
  font-family: var(--rob);
font-weight: 700;

font-size:var(--d24);

line-height: var(--d25);
color:#ffffff;
margin-top: var(--d34);
margin-left: var(--d34);
margin-bottom:0.31vw ;

}

.govornik h3{

    font-family: var(--rob);
font-weight: 400;

font-size:var(--d16);

line-height: var(--d25);
color:#FFFFFFCC;

margin-top: 0;
margin-left: var(--d34);
margin-bottom:var(--d24) ;

}


.govornik p{

    font-family: var(--rob);
font-weight: 400;

font-size:var(--d16);

line-height: var(--d25);
color:#FFFFFFCC;

margin-top: 0;
margin-left: var(--d34);
margin-bottom:var(--d34) ;
width: 21.67vw;

}

.lista-govornika{
  width:8.82vw ;
  display: flex;
  justify-content: center;
  justify-self: anchor-center;
  margin-top: var(--d64);
}

.left-arrow{
  position: absolute;
  left: 0;
  top:50%
}

.right-arrow{
  position: absolute;
 right: 0;
  top:50%
}

.footer{
  border-width: 1px 0px 1px 0px;

border-style: solid;

border-color: #FFFFFF1A;
margin-top: var(--d100);
background-color: #141518;



}

.footer-wrapper{
  width:var(--landing-width);
  margin: auto;
  margin-top: var(--d100);
  margin-bottom: var(--d100);
  display: flex;

}

.footer-wrapper .left{
  display: flex;
  flex-wrap: wrap;
  width: 38.23vw;
  gap: var(--d34);
    border-right: 1px solid #FFFFFF1A;
    padding-right: 6.35vw;
}

.footer-wrapper .left .form-group{


  width: 18.23vw;
  border: 1px solid #FFFFFF14;
  border-radius: var(--d10);
  height: var(--d80);
  box-sizing: border-box;
  padding:var(--d10) var(--d20);



}

.footer-wrapper .left .form-group label, .footer-wrapper .left .form-group-txt label{
  font-family: var(--rob);
font-weight: 500;

font-size: var(--d16);

line-height:var(--d30);
color: white;



}


.footer-wrapper .left .form-group input, .footer-wrapper .left .form-group input::placeholder{
  display: block;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--rob);
font-weight: 400;

font-size: var(--d14);

line-height: var(--d30);
color: #FFFFFFA6;




  
}

.footer-wrapper .left .form-group-txt{


  width: 38.23vw;
  border: 1px solid #FFFFFF14;
  border-radius: var(--d10);
  height: 12.60vw;
  box-sizing: border-box;
  padding:var(--d10) var(--d20);



}



.footer-wrapper .left .form-group-txt textarea, .footer-wrapper .left .form-group-txt textarea::placeholder{
  display: block;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--rob);
font-weight: 400;

font-size: var(--d14);

line-height: var(--d30);
color: #FFFFFFA6;
width: 100%;
height: 80%;




  
}

.footer-wrapper .right{
   padding-left: 6.35vw;
}

.right .sponsor-group:nth-child(1){
  margin-bottom: var(--d100);
}

.right .sponsor-group h2{
  margin-top: 0;
  font-family: var(--rob);
font-weight: 500;

font-size: var(--d24);

line-height:var(--d30);
color: #ffffff;
margin-bottom: var(--d56);


}

.right .sponsor-group .sponzors{
  gap: 3.13vw;
  display: flex;

}

.sponzors img{
  height:4.32vw ;
}
.copyright{
  width: 100vw;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding-left: 10.42vw;
  padding-right: 10.42vw;
  height: var(--d120);
  align-items: center;
}


.logocopy{
  cursor: pointer;
  width:5.00vw;
}

#btt{
  cursor: pointer;
  width: 2.66vw;
}


#posalji{
  width: 8.48vw;
  cursor: pointer;

}
.press{
  width: var(--landing-width);
  margin: auto;
  border-top: 1px solid #FFFFFF4D;
  margin-top: var(--d100);
  padding-top: var(--d100);

}

.press h1{
      font-family: var(--rob);
    font-weight: 600;
    font-size: var(--d48);
    line-height: 100%;
    color: #ffffff;
    text-align: center;
    margin: 0;
    margin-bottom: var(--d64);
}

.pressovi {
  display: flex;
  gap: var(--d34);
}
.press img{
  width: 25.21vw;
  border: 1px solid #FFFFFF33;
  border-radius: var(--d10);
  cursor: pointer;
}


.slikamob, .header-mob, .mobshow{
    display:none;
}

.govornici-lista-mob{
  display: none!important;
}

.mobhide{
  display: block;
}
.mobhideflex{
    display:flex;
}
 .presslide {
     display:none!important;
          
      }


      .footermail{
        font-family: var(--rob);
font-weight: 400;

font-size: var(--d16);

line-height: 100%;
color: #FFFFFFE5;
text-decoration: none;
margin-left: 0vw;
margin-top: 1vw;




      }




/* Osnovna CSS klasa za sakrivanje, koju koristi JavaScript */
.hidden {
    display: none !important;
}












  @media screen and (max-width:900px){

    .footermail{
      font-size: var(--m16);
    }
      
      .left-arrow, .right-arrow{
          width:var(--m36);
              height:var(--m36);
      }
        .left-arrow{
                top: 93.5%;
            
        }
        
        .right-arrow{
                top: 93.5%;
        }
     

    .mobshow{
      display: block;
    }

    .mobhide, .mobhideflex{
      display: none;
    }
      
     .main, header {
          display:none!important;
      }
      .slikamob{
          display:block;
          width:100vw;
      }
      .header-mob{
        display: block;
        background: #111214;

      }

      .header-mob .upper{
        display: flex;
        background: #111214;
        width: 100vw;
        box-sizing: border-box;
        height:30.56vw ;
        place-items: center;
        padding-left: var(--m24);
        padding-right: var(--m24);
        box-shadow: 0px 4px 16.2px -3px #00000040;
        justify-content: space-between;


      }

      .header-mob .logo{
        width: 27.22vw;
        cursor: pointer;
      }

      .header-mob .hamburger{
        cursor: pointer;
        width: 7.22vw;
      }


      .main-mob .landing-mobile{
        width: var(--landing-width-mobile);
        margin: auto;
        display: flex;
        margin-top: var(--m44);
      }

      
      .main-mob .naruci-mob{
        width: 41.39vw;
        margin: auto;
        display: flex;
        margin-top: var(--m56);
      }
    
    .nav-mob{
        position: fixed;
        left: -300px;
        top: 0;
        height: 100vh;
        background: #111214;
            transition: 0.8s ease;
            display: none;
        

    }
    .mob-overlay{
      width: 100vw;
      height: 100vh;
      background: #0F1011CC;
      position:fixed;
      top: 0;
      left: 0;
      display: none;


    }


.nav-mob .upper-nav{
   display: flex;
        background: #111214;
        width: 81.11vw;
        box-sizing: border-box;
        height:30.56vw ;
        place-items: center;
        padding-left: var(--m24);
        padding-right: var(--m24);
      

        justify-content: space-between;
}


.nav{
  margin-top: var(--m44);
  margin-left: var(--m24);

}


.nav a{
  display: block;
  font-family: var(--rob);
font-weight: 500;

font-size: var(--m15);

line-height: 140%;
color: #F6F8EBE5;
padding-bottom: var(--m22);
margin-bottom: var(--m22);
text-decoration: none;
width: 45.56vw;
border-bottom: 1px solid #FFFFFF33



}


.nav-mob.active {
    left: 0; /* ulazi */
    display: block;
}

.main-content{
  width: var(--landing-width-mobile);
}

.main-content .oknjizi {
    display: block;
    margin-top: var(--m68);
    padding-top: var(--m56);
    padding-bottom: var(--m64);

}



.oknjizi .left h2 {
  font-size: var(--m32);
}

.oknjizi .left p{
  font-size: var(--m15);
  line-height: var(--m28);
 width:  100%;
 margin-top: var(--m34);
 margin-bottom: var(--m44);
}
.oknjizi .right img {
    width: 100%;
}

.recenzije{
  flex-direction: column-reverse;
    padding-top: var(--m56);
    padding-bottom: var(--m64);
}

.recenzije .right h1 {

   font-size: var(--m32);
   width: 100%;

}

.recenzije .right , .recenzije .left{
  width: 100%;
}

.recenzije .right img {
  width: 100%;
  margin-top: var(--m44);
}

.recenzije .right h2 {
  font-size: var(--m24);
  margin-top: var(--m44);
}

.recenzije .right p {
  font-size: var(--m15);
  line-height: var(--m28);
  width: 100%;
  margin-top: var(--m34);
}


.recenzije .right p.lower{
  border-bottom: 1px solid #FFFFFF4D;
  padding-bottom: var(--m64);
}

.recenzije .left h1{
  font-size: var(--m32);
  width: 100%;
  margin-top: var(--m56);
  text-align: center;
  margin-bottom:var(--m44);
}

.recenzija{
  width: 100%;
  border: 1px solid #FFFFFF33;
  padding-top: var(--m34);
  padding-bottom: var(--m34);
  padding-left: var(--m24);
  border-radius: var(--m10);
  margin-bottom: var(--m24);
  padding-right: var(--m24);

}

.recenzija h2{
  font-size: var(--m20);
   line-height: var(--m25);
}
.recenzija h3{
  font-size: var(--m15);
   line-height: var(--m25);
}
.recenzija p{
  width: 73.33vw;
  font-size: var(--m15);
  line-height: var(--m25);
  margin-top: var(--m24);
    margin-bottom: var(--m24);
    
}

.recenzija a{
  font-size: var(--m16);
  margin-top: var(--m24);
}

.govornici{
  width: var(--landing-width-mobile);
  padding-top: var(--m56);
}

.govornici h1{
  margin-bottom: var(--m44);
  font-size: var(--m32);
}

.govornici-wrapper{
  width: var(--landing-width-mobile);
}

.govornici-lista{
  width: var(--landing-width-mobile);
  display: none!important;
  
}
.govornik{
  width: var(--landing-width-mobile)!important;
  margin: 0;

  border-radius: var(--m10);

    height: 127.78vw!important;

}

.govornik img{
  width: var(--landing-width-mobile);
    border-radius: var(--m10) var(--m10) 0 0;
}

.govornik h2{
  margin-top: var(--m24);
  margin-left: var(--m24);
  font-size: var(--m20);
  line-height: var(--m25);
 
}

.govornik h3{
  margin-left: var(--m24);
  margin-bottom: var(--m14);
  font-size: var(--m15);
  line-height: var(--m25);
  width: 73.33vw;
}
.govornik p{
  line-height: var(--m25);
  font-size: var(--m15);
  margin-left: var(--m24);
  margin-bottom: var(--m24);
  width:73vw;
}

.govornici-lista-mob{
  display: block!important;
  height: 152.78vw;
    width: var(--landing-width-mobile);
}

.govornici-lista-mob .slick-list .slick-track{
  width: 13000vw!important;
}

.lista-govornika{
  width:51.67vw ;
  margin-top: -15vw;
  display:block;
  margin-left:17.5vw;
  justify-self: unset;
}

.left-arrow-mob{
  position: absolute;
  bottom: 1.5%;
  width: var(--m36);
  left: 0;
}

.right-arrow-mob{
  position: absolute;
  bottom: 1.5%;
  width: var(--m36);
  right: 0;
}
.press{
  width: var(--landing-width-mobile);
  margin-top: var(--m64)      ;
  padding-top: var(--m56);
}

.press h1{
  font-size: var(--m32);
  margin-bottom: var(--m44);
}

.presslide {
  margin-bottom: 37.22vw;
  display:block!important;
}

.presslides img{
    width: var(--landing-width-mobile)!important;
}

.footer{
margin: 0;
}

.footer-wrapper{
  width: var(--landing-width-mobile);
  margin-top: var(--m64);
  margin-bottom: var(--m64);
  display: block;
}
.footer-wrapper .left{
  width: 100%;
  gap: var(--m24);
}

.footer-wrapper .left .form-group , .footer-wrapper .left .form-group-txt{
  width: 100%;
  padding: var(--m12) var(--m16);
  height: var(--m68);
  border-radius: var(--m10);
}


.footer-wrapper .left .form-group label, .footer-wrapper .left .form-group-txt label,
.footer-wrapper .left .form-group input, .footer-wrapper .left .form-group input::placeholder  {
  font-size: var(--m15);
 padding: 0;
 line-height: 140%;
}

.footer-wrapper .left .form-group-txt textarea, .footer-wrapper .left .form-group-txt textarea::placeholder {

  font-size: var(--m15);
 padding: 0;
 line-height: 140%;

}

 .footer-wrapper .left .form-group-txt {
      height:61.39vw ;
}


#posalji2{
  width: var(--landing-width-mobile);
}
.footer-wrapper .right {
  padding: 0;
}

.right .sponsor-group h2 {
 
  margin-top: var(--m64);
  font-size:var(--m20);
  margin-bottom: var(--m34);
  text-align: center;
  width: var(--landing-width-mobile);

}

.right .sponsor-group .sponzors {
  width: var(--landing-width-mobile);
  justify-content: center;
  gap: var(--m36);
}

.sponzors img{
  height: var(--m48);
}

.copyright{
  height:25.00vw ;
  justify-content: center;
}

#btt{
  width: 14.17vw;
  height: 14.17vw;
}


}