.trillere1 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 100000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    visibility: hidden;
    opacity: 0;
}
.trillere1.active {
    visibility: visible;
    opacity: 1;
    background: #0000007a;
}

.trillere2 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 100000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    visibility: hidden;
    opacity: 0;
}
.trillere2.active {
    visibility: visible;
    opacity: 1;
    background: #0000007a;
}
.trillere3 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 100000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    visibility: hidden;
    opacity: 0;
}
.trillere3.active {
    visibility: visible;
    opacity: 1;
    background: #0000007a;
}

.trillere4 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 100000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    visibility: hidden;
    opacity: 0;
}
.trillere4.active {
    visibility: visible;
    opacity: 1;
    background: #0000007a;
}
.trillere5 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 100000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    visibility: hidden;
    opacity: 0;
}
.trillere5.active {
    visibility: visible;
    opacity: 1;
    background: #0000007a;
}
.trillere6 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 100000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    visibility: hidden;
    opacity: 0;
}
.trillere6.active {
    visibility: visible;
    opacity: 1;
    background: #0000007a;
}


.trillere7 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 100000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    visibility: hidden;
    opacity: 0;
}
.trillere7.active {
    visibility: visible;
    opacity: 1;
    background: #0000007a;
}
.trillere8 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 100000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    visibility: hidden;
    opacity: 0;
}
.trillere8.active {
    visibility: visible;
    opacity: 1;
    background: #0000007a;
}
.trillere9 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 100000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    visibility: hidden;
    opacity: 0;
}
.trillere9.active {
    visibility: visible;
    opacity: 1;
    background: #0000007a;
}
.trillere10 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 100000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    visibility: hidden;
    opacity: 0;
}
.trillere10.active {
    visibility: visible;
    opacity: 1;
    background: #0000007a;
}
.trillere11 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 100000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    visibility: hidden;
    opacity: 0;
}
.trillere11.active {
    visibility: visible;
    opacity: 1;
    background: #0000007a;
}
.trillere12 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 100000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    visibility: hidden;
    opacity: 0;
}
.trillere12.active {
    visibility: visible;
    opacity: 1;
    background: #0000007a;
}.trillere13 {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
     z-index: 100000;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     backdrop-filter: blur(20px);
     visibility: hidden;
     opacity: 0;
 }
.trillere13.active {
    visibility: visible;
    opacity: 1;
    background: #0000007a;
}
.trillere14 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 100000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    visibility: hidden;
    opacity: 0;
}
.trillere14.active {
    visibility: visible;
    opacity: 1;
    background: #0000007a;
}
.trillere15 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 100000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    visibility: hidden;
    opacity: 0;
}
.trillere15.active {
    visibility: visible;
    opacity: 1;
    background: #0000007a;
}

.trillere16 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 100000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    visibility: hidden;
    opacity: 0;
}
.trillere16.active {
    visibility: visible;
    opacity: 1;
    background: #0000007a;
}
.trillere17 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 100000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    visibility: hidden;
    opacity: 0;
}
.trillere17.active {
    visibility: visible;
    opacity: 1;
    background: #0000007a;
}
.trillere18 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 100000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
    visibility: hidden;
    opacity: 0;
}
.trillere18.active {
    visibility: visible;
    opacity: 1;
    background: #0000007a;
    transition: 1s;
}

.col_1 {
    background: #010103;
    margin: 20px;
    border-radius: 30px;
}