@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");
.img-bg > .shadow{
    background: var(--c1);
    opacity: .5;
}
.form .item input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
}
.form button[class="tower"]{
    background: var(--c5);
}
header {
    background: var(--c1);
    display: flex;
    flex-direction: column;
    padding-top: 6rem;
    padding-bottom: 2rem;
    gap: 2rem;
}
header > figure {
    opacity: 0.1;
}
header .container .cont-form .item-date {
    display: grid;
    grid-template-columns: auto 6rem;
    gap: 1rem;
}
header .container .cont-form .item-date > div:nth-child(2) {
    display: flex;
    flex-direction: column;
}
header .container .cont-form .item-date > div:nth-child(2) b {
    background: var(--c0);
    text-align: center;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    color: gray;
}
header .container .cont-form .item-sex > div > div > div b {
    font-size: 0.8rem;
    color: gray;
}
header .container .cont-form .item-sex > div > div > div {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
}
header .container .cont-form .item[status="active"] {
    display: none;
}

header .container .cont-form .title {
    display: flex;
    flex-direction: column;
}
header .container .cont-form .title b {
    font-size: 1rem;
    font-family: 'f4';
    color: var(--c1);
    text-align: center;
}
header .container .cont-form {
    display: flex;
    flex-direction: column;
}
header .container .cont-form .form {
    width: 30rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.7);
}
header .container .info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
header .container .info .title > H1 b {
    color: var(--c5);
    font-size: 3rem;
}
header .container .info .title > H1 {
    width: 100%;
    font-family: 'f4';
    font-size: 2rem;
    text-shadow: 2px 2px 4px black;
    color: white;
    line-height: 2.8rem;
}
header .container .info .cont > span b {
    font-family: 'f4';
    font-size: 1.1rem;
}
header .container .info .cont > span {
    width: 100%;
    padding: 1rem;
    background: var(--c5);
    border-radius: 0.5rem;
    color: white;
    font-size: 1rem;
    font-family: 'f1';
}
header .container .info .cont > span > ul{
    padding-left: 2rem;
}
header .container .info .cont > span > ul > li {
    list-style-type: circle;
}

header .container .info .cont {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
header .container .info .title {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
header .container .info .title b {
    font-family: 'f4';
    font-size: 1.5rem;
    color: white;
}
header .container .info .title strong {
    font-family: 'f2';
    background: var(--c1);
    color: white;
    width: 15rem;
    border-radius: 0.5rem;
    min-height: 2rem;
    font-size: 1rem;
}
header .container .info .title p {
    font-family: 'f1';
    color: white;
}
header .container .info .item {
    width: 100%;
    min-height: 6rem;
    display: grid;
    grid-template-columns: 6rem auto;
}
header .container .info .item figure {
    display: flex;
}
header .container .info .item figure u {
    display: flex;
    width: 5rem;
    height: 5rem;
    background: var(--c1);
    border-radius: 50%;
    padding: 1rem;
}
header .container .info .item figure u .cls-1 {
    fill: white !important;
}
header .container .info .item span {
    display: grid;
    grid-template-rows: 2rem auto;
    gap: 0;
    background: rgba(0, 0, 0, 0.3);
    padding: 1rem;
    border-radius: 0.5rem;
}
header .container .info .item span b {
    font-family: 'f4';
    color: var(--c5);
}
header .container .info .item span p {
    font-family: 'f1';
    color: white;
}
/* **********************************************************************ERROR */
#error{
    width: 100%;
    height: 100%;

}
#error .cont{
    background: var(--c0);
    padding: 1rem;
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#error .cont span{
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: .5rem;
}
#error .cont span a{
    font-family: 'f2';
    color: var(--c5);
    font-size: 1rem;
}
#error .cont>a:hover{
    background: var(--c1);
}
#error .cont>a{
    min-height: 2.5rem;
    background: var(--c5);
    font-family: 'f2';
    padding: .5rem;
    border-radius: .5rem;
    color: white;
}
#error .cont b{
    font-size: 1.5rem;
    font-family: 'f4';
    color: var(--c5);
}
#error .cont p{
    font-size: 1rem;
    font-family: 'f1';
}
/* ********************************************************************** */
.tmp-input-radio {
    display: grid;
    grid-template-columns: auto 4rem;
    gap: 1rem;
    align-items: center;
}
.tmp-input-radio > label > p:nth-child(1){
    color: white;

}
.tmp-input-radio > label > p:nth-child(2){

}
.tmp-input-radio > label > p {
    text-align: center;
    z-index: 20;
    font-size: 0.8rem;
    font-family: 'f2';
}
.tmp-input-radio > label > div {
    position: absolute;
    width: 2rem;
    height: 2rem;
    left: 0;
    top: 0;
    background: gray;
    z-index: 10;
    transition: all 0.2s;
}
.tmp-input-radio > label {
    position: relative;
    z-index: 0;
    width: 4rem;
    height: 2rem;
    background: var(--c0);
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    border-radius: 4px;
}
.tmp-input-radio > input[type="checkbox"]:checked + label {
    background: white;
}
.tmp-input-radio > input[type="checkbox"]:checked + label > p {
    font-family: 'f4';
    color: white;
}
.tmp-input-radio > input[type="checkbox"]:checked + label > div {
    left: 50%;
    background: var(--c5);
}
.tmp-input-radio > input[type="checkbox"]:checked + label > p:nth-child(2) {
    color: var(--c1);
    font-family: 'f1';
}
@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) {
    .tmp-banner .container {
        display: grid;
        grid-template-columns: auto;
        gap: 1rem;
    }
    header .container .cont-form .form{
        width: 80%;
    }
}
@media only screen and (max-width: 767px) and (min-width: 480px) {
    .tmp-banner .container {
        display: grid;
        grid-template-columns: auto;
        gap: 1rem;
    }
    header .container .cont-form .form {
        width: 90%;
    }
    header .container .info .item span {
        grid-template-rows: 3rem auto;
    }
    header .container .info {
        padding: 1rem;
    }
}
@media only screen and (max-width: 479px) and (min-width: 360px) {
    .tmp-banner .container {
        display: grid;
        grid-template-columns: auto;
        gap: 1rem;
    }
    header .container .cont-form .form {
        width: 95%;
    }
    header .container .info .item span {
        grid-template-rows: 3rem auto;
    }
    header .container .info {
        padding: 1rem;
    }
}
@media only screen and (max-width: 359px) and (min-width: 10px) {
    .tmp-banner .container {
        display: grid;
        grid-template-columns: auto;
        gap: 1rem;
    }
    header .container .cont-form .form {
        width: 100%;
    }
    header .container .info .item span {
        grid-template-rows: 4rem auto;
    }
    header .container .info {
        padding: 1rem;
    }
}
@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) {}