.page {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    padding: 2vh 5vw 25vh;
}
.page__do {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    width: 100%;
    /* background-color: #eeeeee; */
    border: 2px solid rgb(20,20,20,.1);
    box-shadow: 3px 3px 10px rgb(20,20,20,.05);
    height: 11vh;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 10px 4%;
    gap: 3%;
}

.page__do a {
    opacity: .9;
}
.page__do a:hover {
    opacity: 1;
}
.page__do a .microsoft {
    height: 4.3vh;
}
.page__do a .azure {
    height: 7vh;
}
.page__do a img {
    height: 5vh;
}

.page__header {
    display: flex;
    justify-content: start;
    align-items: center;

    width: 100%;
    gap: 10px;
}
.link {
    font-size: calc((1vw + 1vh) * 1);
    margin: 10px;
    font-weight: 600;
}
.link::after {
    display: block;
    content: '';
    width: 0;
    height: 3px;
    background-color: #f86624;
    border-radius: 10px;
    transition: all .3s linear;
}
.link:hover::after {
    width: 100%;
    opacity: 1;
}
.activate {
    color: #f86624;
    opacity: .8;
}
.activate:hover {
    opacity: 1;
}
.activate::after {
    width: 100%;
    opacity: .8;
}
.page__content {
    width: 100%;
}
.page__content h1 {
    font-weight: bold;
    margin-bottom: 2vh;
    margin-top: 2vh;
    /* font-size: calc((1vw + 1h) * 1.5); */
}

.page__content__events {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-wrap: wrap;
    gap: 3%;
    row-gap: 3%;
    padding-top: 3vh;

}
.page__content__events .event {
    width: 100%;
    max-width: 32%;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;

    border: 6px double rgb(20,20,20,.15);
    border-radius: 20px;
    padding: 10px;
    transition: all .3s linear;
}
.page__content__events .event:hover {
    border-color: #f86624;
    scale: 1.05;
}
.event__top {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}
.event__top img {
    width: 100%;
    height: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 10px;
    margin-top: -10%;
    border-top: 4px solid #f86624;
} 
.event__top__data {
    position: absolute;
    background-color: #f86624;
    padding: 10px;
    border-radius: 15px;
    font-weight: bold;
    font-size: calc((1vw + 1vh) *.8);
    max-width: 64%;
    top: 10%;
    right: -10% ;
}
.event__bottom a {
    font-weight: bold;
    color: rgb(20,20,20,.9);
}
.event__bottom a:hover {
    color: #f86624
}
.event__bottom {
    padding: 2% 0;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
}
.event__bottom__link {
    font-size: calc((1vw + 1vh) *1.2);
}
.learn__more {
    margin-top: 10%;
    text-decoration: underline;
    text-decoration-color: #f86624;
    font-size: calc((1vw + 1vh) *.8);
}

/* documents */
.page__doc {
    width: 100%;
    height: 80vh;
    border-radius: 20px;
    margin-bottom: 3vh;
}
.download {
    display: block;
    background-color: #202020;
    color: #fff;
    width: 100%;
    border-radius: 10px;
    padding: 2vh 4vw;
    text-align: center;
}
.download:hover {   
    background-color: transparent;
    box-shadow: 0 0 10px 1px rgb(20,20,20,.2);
    color: #202020;
}

table {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-collapse: collapse;
}
td {
    padding: 2vh 4vw;
    font-size: calc((1vw + 1vh) * 1);
    width: 50vw;
}
.call__schedule__left .down {
    width: 100%;
}


/* call schedule */
.call__schedule {
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-direction: row-reverse;
    width: 100%;
    gap: 10%
}
.call__schedule__left {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50%;
    gap: 10px;
}
.call__schedule__left__menu {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.call__schedule__left__menu span {
    font-size: calc((1vw + 1vh) * 1);
}
.call__schedule__right {
    width: 50%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
}
table {
    width: 100%;
    max-width: 500px;
}
.show__link {
    cursor: pointer;
}
.event__desc {
    width: 100%;
    display: grid;
    grid-template-columns: 30% 65%;
    gap: 4%;
}
.event__desc__right {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
}
.event__desc__right img {
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 3%;
    box-shadow: 3px 3px 10px rgb(20,20,20,.2);
}
.event__desc__date {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    background-color: #202020;
    border-radius: 10px;
    color: #fff;
    padding: 3% 5%;
    font-size: calc((1vw + 1vh) * 1);
    gap: 10px
}
.event__desc__date div {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 100%;
    gap: 10px;
}
.event__desc__left {
    width: 100%;
    font-size: calc((1vw + 1vh) * 1);
    
}
.metodic__recomendations {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 5%;
}
.metodic__recomendations__left {
    display: flex;
    flex-direction: column;
    width: 25%;
}
.metodic__recomendations__left form {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    margin: 10px;
}
.metodic__recomendations__left img {
    width: 20px;
    height: 20px;
    transition: all .3s linear;
    opacity: .4;
}
.metodic__recomendations__left input {
    background-color: transparent;
    border-bottom: 2px solid rgb(20,20,20, .4);
    width: 100%;
    padding: 6px ;
    font-size: 16px;
    transition: all .3s linear;
    cursor: pointer;
}
.metodic__recomendations__left input:hover {
    border-color: rgb(20, 20, 20, .7);
}

.metodic__recomendations__left input:focus {
    border-color: #202020;
}

.metodic__recomendations__left:hover img {
    opacity: .7;
}

.metodic__recomendations__left:focus  img {
    opacity: 1;
}
.metodic__recomendations__left a {
    cursor: pointer;
    display: block;
    width: 100%;
    font-size: calc((1vw+1vh) * 1.6);
}
.metodic__recomendations__left a:hover {
    
}
.metodic__recomendations__right {
    width: 75%;
    display: grid;
    grid-template-columns: 1fr 1fr  1fr;
    gap: 10px;
}
.methodic__category_document {
    border: 2px solid rgb(20,20,20,.3);
    padding: 20px ;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
    transition: all .3s linear;
    max-height: 140px;
    height: 100%;
}
.methodic__category_document img {
    height: 40px;
    width: 40px;
    margin-bottom: 20px;
    margin-top: 10px;
    transition: all .3s linear;
    opacity: .3;
    
}
.methodic__category_document span {
    color: rgb(20,20,20,.6);
    font-weight: 400;
    transition: all .3s linear;
    font-size: calc((1vw + 1vh) * .85);
}
.methodic__category_document:hover {
    border-color: #202020;
    box-shadow: 0  0 13px rgb(20,20,20,.1);
}
.methodic__category_document:hover span {
    color: #202020;
}
.methodic__category_document:hover img {
    opacity: 1;
}
.metodic__recomendations__left__categories {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    width: 100%;
}
@media screen and (max-width: 1100px) and (min-width: 600px) {
    .page {
        padding: 2vh 5vw 15vh;
    }
    .page__do {
        flex-wrap: wrap;
        height: 7vh;
        padding: 10px 14px;
        justify-content: flex-end;
    }   
    .page__do a img, .azure, .microsoft {
        height: 2.3vh;
    }
    .page__do a .azure {
        height: 3.6vh;
    }
    .page__do a .microsoft {
        height: 2.3vh;
    }
    .call__schedule {
        gap: 20px;
    }
    .page__header {
        flex-wrap: wrap;
    }
    .page__content__events .event {
        max-width: 48%;
    }
    .page__content h1 {
        padding: 0;
    }

    /*  event__desc */
    .event__desc {
        grid-template-columns: 1fr ;
        gap: 10px;
    }
    .event__desc__right img {
        height: 30vh;
    }
    .event__desc__right {
        object-fit: cover;
    }
    .event__desc h1 {
        max-width: 80vw;
    }
}

@media screen and (max-width: 600px) {
    .page {
        padding: 2vh 5vw 35vh;
    }
    .page__do {
        flex-wrap: wrap;
        height: 7vh;
        padding: 10px 10px;
        justify-content: space-between;
    }   
    .page__do a img, .azure, .microsoft {
        height: 2.3vh;
    }
    .page__do a .azure {
        height: 3.6vh;
    }
    .page__do a .microsoft {
        height: 2.3vh;
    }
    /* header */
    .page__header {
        /* overflow-x: auto; */
        align-items: end;
        flex-wrap: wrap;
    }
    .page__header .link {
        font-size: calc((1vw + 1vh) * 1.5);
        max-width: 100%;
        width: 100%;
    }
    .call__schedule {
        flex-wrap: wrap;
    }
    .call__schedule__left, .call__schedule__right {
        width: 100%;
    }
    .call__schedule__right {
        margin-top: 5%;
    }
    .call__schedule__left__menu {
        padding: 2% 0;
    }
    .call__schedule__left__menu .link {
        font-size: calc((1vw + 1vh) * 1.6);
    }
    td {
        font-size: calc((1vw + 1vh) * 1.8);
        padding: 2vh 8vw;
    }

    .page__doc {
        display: none;
    }

    /* event */
    .page__content__events .event {
        max-width: 100% ;
    }
    .event__top__data {
        font-size: calc((1vw + 1vh) * 1.6);
        max-width: 40vw
    }
    .event__bottom__link {
        font-size: calc((1vw + 1vh) *1.8);
    }
    .event__bottom {
        width: 100%;
    }
    .learn__more {
        font-size: calc((1vw + 1vh) * 1.6);
        background-color: #202020;
        text-decoration: none;
        color: white !important;
        width: 100%;
        min-width: 100%;
        border-radius: 10px;
        text-align: center;
        padding: 10px;
        width: 100%;
        max-width: 100%;
    }
    .learn__more:hover {
        background: #202020 !important;
    }
    .event__desc {
        grid-template-columns: 100%;
    }
    .event__desc__date {
        font-size: calc((1vw + 1vh) * 1.6);
    }
    .metodic__active {
        background-color: rgb(20, 20, 20, .1);
        box-shadow: 0 0  10px rgb(20,20, 20, .1);
        border-radius: 10px;
        padding: 6px 10px;
    }
    .metodic__recomendations {
        flex-direction: column;
        align-items: center;
    }
    .metodic__recomendations__left {
        width: 100%;
        align-items: center;
        justify-content: center;
    }
    .metodic__recomendations__left__categories {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
    }
    .metodic__recomendations__left form {
        min-width: 100%;
    }
    .metodic__recomendations__left a {
        font-size: calc((1vw + 1vh) * 1.4);
        min-width: 200px;
        text-align: center;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .metodic__recomendations__left a::after {
        display: none;
    }
    .metodic__recomendations__left a:hover::after {

    }
    .metodic__recomendations__right {
        width: 100%;
        grid-template-columns: 48% 48%;
        margin-top: 10px;
    }
    .methodic__category_document {
        padding: 10px;
    }
    .methodic__category_document span {
        font-size: calc((1vw + 1vh) * 1.4);
    }
    ::-webkit-scrollbar{
        height: 4px;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: rgb(20, 20, 20, .1);
        transition: all .3s linear;
        cursor: pointer;
    }
    ::-webkit-scrollbar-thumb:hover {
        background-color: #202020;
    }
}