*{
    box-sizing: border-box;
}

body{
    font-family: 'Gotham', 'Lucida', sans-serif;
    font-size:16px;
    margin:0 auto;
    padding:0;
}

.img-fluid{
    width:100%;
    max-width:100%;
    height:auto;
    display:inline-block;
}

.container{
    width:100%;
    max-width:600px;
    padding:0px 15px;
    margin: 0 auto;
}

header{
    background-color: #FAFDF9;
    padding:20px 15px;
    margin-bottom:25px;
}

h1{
    font-size:25px;
    font-weight:normal;
}

h2{
    font-size:20px;
    line-height: normal;
    margin:0 0 20px 0;
}

.box{
    border-radius:16px;
    padding:25px 15px;
    margin-bottom:25px;
    line-height: 21px;
    position: relative;
}

.upute, .prijava{
    background-color: #CFE9DB;
}

.vise, .kartica{
   background-color: #EEF5F1; 
}

ol, ul{
    background-color: #FAFDF9;
    border-radius:16px;
    padding:20px 30px;
    line-height:24px;
    /* margin-bottom:20px; */
}


 .karticaSample{
    max-width:90%;
    margin:0 auto;
    display:flex;
    justify-content: center;
}

.moreContent{
    transition: 0.2s all ease-in-out;
    opacity:0;
    position:absolute;
    opacity:0;
    visibility:0;
    height:0px;
    overflow:hidden;
}

.moreContent.show{
    transition: 0.4s all ease-in-out;
    position:static;
    opacity: 1;
    visibility:1;
    height:auto;
    padding-bottom:20px;
}

.toggleMore img{
    transition: 0.4s all ease-in-out;
}

.toggleMore.arrowRotate img{
    transform: rotate(180deg);
    transition: 0.4s all ease-in-out;
}