/*videostuff*/
.h-max-w-5xl {
    max-width: 100rem;
  }
  .h-mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .h-my-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
  .h-pb-6 {
    padding-bottom: 1.5rem;
  }
    .h-hero {
        background: radial-gradient(113.72% 113.72% at 50% 50%, #9D1C85 0%, #7B1171 100%);
    }
/*videostuffend*/

video {
   margin: 0 auto;
   display: block;
   width: 100%;
   /* max-width: 560px; */
   /*height: 320px;*/
   background: #9A2384;
}


body {
    margin: 0;
    padding:0;
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
    width : 100%;
    height: 100%;
}

html {
   width : 100%;
   height: 100%;
 }


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 768px) {
    .hero {
        /* Sizing */
        width: 100vw;
        height: 100vh;
    
        /* Background styles */
        background-image: url(images/heromob.jpg);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    .second {
        position:relative;
        /* width: 100vw;
        height: 100vh; */
        background: radial-gradient(113.72% 113.72% at 50% 50%, #9D1C85 0%, #7B1171 100%);
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
        height:600px;
        }

    .naslov{
        font-style: normal;
        font-weight: 800;
        line-height: 40px;
        text-transform: uppercase;
        max-width: 892px;
        font-size:32px;
        color: #F9EC00;
        margin-left:24px;
        margin-right:24px;
      
        }

    .tekst{
        margin:0px;
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 28px;
        color:white;
        margin-left:24px;
        margin-right:24px;
        }

        .munja{
            position: relative;
            left: 20%;
            width: 15%;
         }
     
         .srce{
            position: relative;
            width: 12%;
         }

          /*SALAME*/

     .salame{
        position:relative;
        /* width: 100vw;
        height: 100vh; */
        background-color: #F9EC00;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
        padding-top:32px;
        padding-bottom:32px;
     }

     .left{
        padding-left:24px;
        padding-right:24px;
     }

     .salameslika{
       max-width: 85%;
       padding-top:16px;
     }

     .salamelead {
     font-weight: 800;
     font-size:32px;
     line-height: 40px;
     color:#9A2384;
     max-width: 300px;
    }

    .salametekst {
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
     
    }

    .munjasalama{
        position:absolute;
        top: 85%;
        left: 20%;
        max-width:24%;
     }
 
     .srcesalama{
        position:absolute;
        top: 5%;
        left: 70%;
        max-width: 12%;
     }
    
      /*TRAJNE*/

    .trajne{
        position:relative;
        /* width: 100vw;
        height: 100vh; */
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
        background-color: #9A2384;
        padding-top:32px;
        padding-bottom:32px;
     }

     .lijevoslika{
        max-width: 85%;
       padding-top:16px;
     }

     .right{
        padding-left: 24px;
        padding-right: 24px;
     }

     .trajnelead {
        font-weight: 800;
        font-size:32px;
        line-height: 40px;
        color:#F9EC00;
        width:300px;
       }

    .trajnetekst{
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 28px;
        color:white;
        /* padding-left:24px;
        padding-right:24px; */
    }

    .munjatrajna{
        position:absolute;
        top: 88%;
        left: 55%;
        max-width: 20%;
     }
 
     .srcetrajna{
        position:absolute;
        top: 5%;
        left: 70%;
        max-width: 13%;
     }

}

/* Small devices (portrait tablets and large phones, 600px and up) */
/* @media only screen and (min-width: 600px) {...} */



@media screen and (min-width: 768px) and (max-width: 1200px) { 
    .hero {
        /* Sizing */
        width: 100vw;
        height: 100vh;
    
        /* Background styles */
        background-image: url(images/herotab.jpg);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }


    .second {
        text-align: center;
        background: radial-gradient(113.72% 113.72% at 50% 50%, #9D1C85 0%, #7B1171 100%);
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
        height:400px;
        padding-top:24px;
        padding-bottom:24px;
        }

    .naslov{
        font-style: normal;
        font-weight: 800;
        line-height: 40px;
        text-transform: uppercase;
        max-width: 892px;
        font-size:32px;
        color: #F9EC00;
        margin-left:24px;
        margin-right:24px;
        max-width:668px;
        }

    .tekst{
        margin:0px;
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 28px;
        color:white;
        margin-left:24px;
        margin-right:24px;
        max-width:668px;
        }

        .munja{
         position: relative;
         left: 20%;
         width: 6%;
      }
  
      .srce{
         position: relative;
         width: 5%;
         padding-top:8px;
      }

          /*SALAME*/

     .salame{
        padding-top:32px;
        padding-bottom:32px;
        text-align: center;
        background-color: #F9EC00;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
     }

     .left{
        padding-left:24px;
        padding-right:24px;
        max-width:668px;
     }

     .salameslika{
        max-width:668px;
       padding-top:16px;
     }

     .salamelead {
     font-weight: 800;
     font-size:32px;
     line-height: 40px;
     color:#9A2384;
     max-width:668px;
    }

    .salametekst {
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    max-width:668px;
    }

    .munjasalama{
        position:absolute;
        top: 85%;
        left: 20%;
        max-width:24%;
        display:none;
     }
 
     .srcesalama{
        position:absolute;
        top: 5%;
        left: 70%;
        max-width: 12%;
        display:none;
     }
    
      /*TRAJNE*/

    .trajne{
      padding-top:32px;
      padding-bottom:32px;
        text-align: center;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content:center;
        background-color: #9A2384;
     }

     .lijevoslika{
        max-width:668px;
       padding-top:16px;
     }

     .right{
        padding-left: 24px;
        padding-right: 24px;
        max-width:668px;
     }

     .trajnelead {
        font-weight: 800;
        font-size:32px;
        line-height: 40px;
        color:#F9EC00;
        max-width:668px;
       }

    .trajnetekst{
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 28px;
        color:white;
        max-width:668px;
        /* padding-left:24px;
        padding-right:24px; */
    }

    .munjatrajna{
        position:absolute;
        top: 88%;
        left: 55%;
        max-width: 20%;
        display:none;
     }
 
     .srcetrajna{
        position:absolute;
        top: 5%;
        left: 70%;
        max-width: 13%;
        display:none;
     }
    
}

  
  /* Extra large devices (large laptops and desktops, 1200px and up) */
  @media only screen and (min-width: 1200px) {
    .hero {
        /* Sizing */
        width: 100vw;
        height: 100vh;
    
        /* Background styles */
        background-image: url(images/hero992.jpg);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }


    .second {
        position:relative;
        width: 100vw;
        height: 70vh;
        background: radial-gradient(113.72% 113.72% at 50% 50%, #9D1C85 0%, #7B1171 100%);
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        }

    .naslov{
        font-style: normal;
        font-weight: 800;
        font-size: 56px;
        line-height: 64px;
        text-transform: uppercase;
        max-width: 892px;
        font-size:56px;
        color: #F9EC00;
        }
        
    .tekst{
        max-width: 600px;
        margin:0px;
        font-style: normal;
        font-weight: 400;
        font-size: 24px;
        line-height: 32px;
        color:white;
    }

    .munja{
       position:absolute;
       top: 75%;
       left: 20%;
       width: 8%;
    }

    .srce{
      position: absolute;
      top: 4%;
      left: 70%;
      width: 5%;
    }

      /*Video*/


    .video{
        width: 100vw;
        height: 100vh;
        background: radial-gradient(113.72% 113.72% at 50% 50%, #9D1C85 0%, #7B1171 100%);
     }

     
     /*SALAME*/

     .salame{
        position:relative;
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0px;
        background-color: #F9EC00;
        /* padding-left:100px;
        padding-right:100px; */
     }

     .left{
        width:30%;
     }

     .salameslika{
        width:44%;
     }

     .salamelead {
     font-weight: 800;
     font-size: 48px;
     line-height: 52px;
     color:#9A2384;
    }

    .salametekst {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    }

    .munjasalama{
        position:absolute;
        top: 79%;
        left: 14%;
     }
 
     .srcesalama{
        position:absolute;
        top: 5%;
        left: 30%;
     }

    /*TRAJNE*/

    .trajne{
        position:relative;
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 0px;
        background-color: #9A2384;
        /* padding-left:100px;
        padding-right:100px; */
     }

     .lijevoslika{
        width:44%;
        order:1;
     }

     .right{
        width:30%;
        order:2;
     }

     .trajnelead {
        font-weight: 800;
        font-size: 48px;
        line-height: 52px;
        color:#F9EC00;
        width:400px;
       }

    .trajnetekst{
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 28px;
        color:white;
    }

    .munjatrajna{
        position:absolute;
        top: 79%;
        left: 55%;
     }
 
     .srcetrajna{
        position:absolute;
        top: 5%;
        left: 70%;
     }

  }