@import url("config.css");
@import url("menu.css");
@import url("footer.css");
@import url("external/owl.carousel.min.css");
@import url("external/owl.theme.default.min.css");
@import url("external/plyr.css");
@import url("external/aos.css");
@import url("external/notyf.min.css");
body {
    background: white;
}
header#home h1 > b {
    color: var(--c4);
}
header#home h1 {
    font-size: 2rem;
    font-family: 'f4';
    color: var(--c1);
    text-align: center;
}
header#home {
    position: relative;
    min-width: 100%;
    min-height: 100%;
    z-index: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-top: 6rem;
    padding-bottom: 2rem;
    
}
header#home .cont {
    display: flex;
    flex-direction: row;
    gap: 4rem;
}
header#home .cont .item {
    background: var(--c0);
    width: 15rem;
    height: 15rem;
    display: grid;
    grid-template-rows: 12rem auto;
    border-radius: 0.5rem;
    box-shadow: 1px 1px 6px gray;
}
header#home .cont .item u {
    transition: all 0.5s;
}
header#home .cont .item span {
    text-align: center;
    font-family: 'f2';
}
header#home .cont .item span p {
    color: var(--c1);
}
header#home .cont .item u {
    width: 5rem;
    height: 5rem;
}
header#home .cont .item:hover {
    background: var(--c1);
}
header#home .cont > div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
header#home .cont .item:hover figure u {
    transform: scale(1.2);
}
header#home .cont .item:hover span p {
    font-family: 'f4';
    color: white;
}
header#home .cont .item:hover u .cls-1 {
    fill: white !important;
}
header#home .cont .item[status="disable"] u .cls-1{
    fill: gray !important;
}
header#home .cont .item[status="disable"] span p{
    color: gray;
}
header#home .cont .item[status="disable"]:hover{
    background: gray;
}
header#home .cont .item[status="disable"]:hover u .cls-1{
    fill: white !important;
}
header#home .cont .item[status="disable"]:hover span p{
    color: white;
}
header#home > .title {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
header#home > .title > span {
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 1rem;
    font-family: 'f1';
    width: 100%;
}
header#home > .title > span > b {
    font-size: 1.1rem;
    font-family: 'f4';
}
header#home > .title > span > p b {
    font-size: 1rem;
    font-family: 'f4';
    color: var(--c1);
}
header#home .buttons a:hover {
    font-family: 'f4';
    text-decoration: underline;
}
header#home > .buttons a {
    font-size: 1rem;
    font-family: 'f1';
    color: var(--c1);
    padding: 0.5rem;
    min-height: 2.5rem;
    background: var(--c0);
    border-radius: 0.5rem;
}
.countdown .cont {
    background: var(--c1);
    color: white;
    padding: 0.5rem;
    border-radius: 0.5rem;
    height: 3rem;
    min-width: 15rem;
}
.countdown span p {
    font-family: 'f1';
}
.countdown span b {
    font-family: 'f4';
    color: var(--c4);
}
.countdown span {
    font-size: 1rem;
    font-family: 'f1';
    border-radius: 0.5rem;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}
.countdown span {
    display: flex;
    flex-direction: row;
}

.countdown {
    visibility: visible;
    opacity: 1;
    animation: countdown linear 1s;
    align-items: center;
    gap: 4rem;
}
.countdown[status="disable"]{
    display: flex;
}
.countdown[status="disable"] .cont{
    background: gray;
}
.countdown[status="disable"] .cont span{
    color: white;
    font-family: 'f4';
    font-size: .8rem;
}
@keyframes countdown {
    0% {
        visibility: 0;
        opacity: 0;
    }
    100% {
        visibility: visible;
        opacity: 1;
    }
}
@media only screen and (min-width: 1280px) {}
@media only screen and (max-width: 1279px) and (min-width: 1024px) {}
@media only screen and (max-width: 1023px) and (min-width: 768px) {}
@media only screen and (max-width: 767px) and (min-width: 480px) {
    header#home .cont {
        flex-direction: column;
        gap: 1rem;
    }
    header#home > .title > span {
        font-size: 1rem;
    }
    header#home > .title > span > b,
    header#home > .title > span > p b {
        font-size: 1rem;
    }
    header#home h1 {
        font-size: 2rem;
    }
}
@media only screen and (max-width: 479px) and (min-width: 360px) {
    header#home h1 {
        font-size: 2rem;
    }
    header#home .cont {
        flex-direction: column;
        gap: 1rem;
    }
    header#home > .title > span {
        font-size: 1rem;
    }
    header#home > .title > span > b,
    header#home > .title > span > p b {
        font-size: 1rem;
    }
}
@media only screen and (max-width: 359px) and (min-width: 10px) {
    header#home h1 {
        font-size: 1.5rem;
    }
    header#home .cont {
        flex-direction: column;
        gap: 1rem;
    }
    header#home > .title > span {
        font-size: 0.8rem;
    }
    header#home > .title > span > b,
    header#home > .title > span > p b {
        font-size: 0.8rem;
    }
}
@media only screen and (min-height: 1280px) {}
@media only screen and (max-height: 1279px) and (min-height: 1024px) {}
@media only screen and (max-height: 1023px) and (min-height: 768px) {}
@media only screen and (max-height: 767px) and (min-height: 480px) {}
@media only screen and (max-height: 479px) and (min-height: 360px) {}
@media only screen and (max-height: 359px) and (min-height: 10px) {}