*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:inherit;
}


/*Section used for centering process*/

.accordion-container{
    position:relative;
    height:20vh;
    width:60%;
    max-width:100vw;
    margin:0 auto;
    padding: 0 1.5rem;
}

.accordion{
    position:relative;
    height:100%;
    width:60%;
    max-width:100vw;
    margin-left: auto;
    margin-right: auto;
    margin-top:5%;
   
}

.faq{
    position:relative;
    background-color:transparent;
    border-radius: 0.4rem;
    margin-bottom: 1rem;
    
    box-shadow: .5rem 2px .5rem rgba(0,0,0,.1);
}

.question{
    position:relative;
    font-size:1.5vw;
    font-weight: bold;
    color:black;
    text-decoration: none;
    background-color: rgba(192, 186, 186, 0.351);
    width:100%;
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    cursor:pointer;
}


.question ion-icon{
    color:black;
    padding: .5rem;

}

.question .ion-icon-remove{
    display:none;
}



.answer{
    max-height:0;
    overflow: hidden;
    position:relative;
    background-color:#F1F1F1;
    transition: max-height 1.4s ease;
}

.answer::before{
    content:"";
    position:absolute;
    width:.6rem;
    height:90%;
    background-color:#8fC460; /*barva čárky*/
    top:50%;
    left:0;
    transform: translateY(-50%);

}

.answer p{
    color:black;
    font-size:1.3vw;
    padding:2rem;
}

/*.accordion-item:target .answer{
max-height:20rem;

}


.accordion-item:target .accordion-link .ion-icon-add{
   display:none; 
}

.accordion-item:target .accordion-link .ion-icon-remove{
    display:block; 
 }*/

 .faq.active .answer{
    max-height:20rem;
    animation:fade 1s ease-in-out;
 }

 .faq.active svg{
    transform:rotate(180deg)

}

svg{
    transition: transform 0.5s ease-in;

}

@keyframes fade{
    from{
        opacity: 0;
        transform: translateY(-10px);
    }
    to{
        opacity:1;
        transform:translateY(0px);
    }
}

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

    .accordion{
        width:80%;
        margin-bottom:20%;
    }
    
 
    .question{
        position:relative;
        font-size:3.5vw;
        font-weight: bold;
        color:black;
        text-decoration: none;
        background-color: rgba(192, 186, 186, 0.351);
        width:100%;
        display:flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 2rem;
        cursor:pointer;
    }
    
    
    .question ion-icon{
        color:black;
        padding: .5rem;
        width:2vw;
    
    }
    
    .question .ion-icon-remove{
        display:none;
    }
    
    
    
    .answer{
        max-height:0;
        overflow: hidden;
        position:relative;
        background-color:#F1F1F1;
        transition: max-height 1.4s ease;
    }
    
    .answer::before{
        content:"";
        position:absolute;
        width:.6rem;
        height:90%;
        background-color:#8fC460; /*barva čárky*/
        top:50%;
        left:0;
        transform: translateY(-50%);
    
    }
    
    .answer p{
        color:black;
        font-size:3.5vw;
        padding:2rem;
    }

    svg{
        width:5%;
        margin-left:5%;
    }




}