.events-title {
    font-size: 300%;
    margin: 2% 15% 0 15%;
    border-bottom: 3px dotted;
}

.events-caption {
    margin: 2% 0 50px 0;
}

.flexitems_position {
    position: relative;
    top: 17px;
    height: 55px;
}

.events-flexitems:hover {
    opacity: 0.6;
}

.events-flexcontainer a {
    text-decoration: none;
    color: black;
}
.events-itemL:hover,
.events-itemR:hover {
    opacity: 0.7;
  }



@media screen and (max-width: 700px) {
    .events-flexcontainer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 5% 5% 15% 5%;
    }

    .events-flexitems {
        border-radius: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
        border: 5px solid;
    }

    .events-button2 {
        margin: 0 5% 50px 5%;
    }

    .events-itemL {
        background-image: linear-gradient(45deg, #ffffff, #111111);
        text-align: left;
        height: 100px;
        padding: 0 0 0 5%;
        font-size: 150%;
        color: #ffffff;
        margin: 10px 12% 0 0;
        box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
        border-radius: 3px;
        transform: skew(358deg, 359deg);

    }

    .events-itemR {
        text-align: right;
        height: 100px;
        padding: 0 5% 0 0;
        font-size: 150%;
        color: #ffffff;
        margin: 10px 0 0 12%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
        border-radius: 3px;
        transform: skew(358deg, 359deg);
    }

    .events-name {
        font-size: 100%;
        position: relative;
        top: 10px;
    }

    .events-eng {
        font-size: 70%;
        position: relative;
        top: 10px;
    }

    .events-name_ex {
        font-size: 100%;
        position: relative;
        top: 1px;
    }

    .events-eng_ex {
        font-size: 70%;
        position: relative;
        top: 1px;
    }
}

@media screen and (min-width: 700px) {
    .events-flexcontainer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        margin: 5% 10% 15% 10%;
    }

    .events-flexitems {
        border-radius: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
        border: 5px solid;
    }

    .events-button2 {
        margin: 0 20% 50px 20%;
    }

    .events-itemL {
        background-image: linear-gradient(45deg, #ffffff, #111111);
        text-align: left;
        height: 100px;
        padding: 0 0 0 5%;
        font-size: 150%;
        color: #ffffff;
        margin: 10px 12% 0 0;
        box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
        border-radius: 3px;
        transform: skew(358deg, 359deg);

    }

    .events-itemR {
        text-align: right;
        height: 100px;
        padding: 0 5% 0 0;
        font-size: 150%;
        color: #ffffff;
        margin: 10px 0 0 12%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
        border-radius: 3px;
        transform: skew(358deg, 359deg);
    }

    .events-name {
        font-size: 100%;
        position: relative;
        top: 10px;
    }

    .events-eng {
        font-size: 70%;
        position: relative;
        top: 10px;
    }

    .events-name_ex {
        font-size: 100%;
        position: relative;
        top: 1px;
    }

    .events-eng_ex {
        font-size: 70%;
        position: relative;
        top: 1px;
    }

}


@media screen and (min-width: 900px) {
    .events-flexcontainer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin: 5% 15% 15% 15%;
    }

    .events-flexitems {
        border-radius: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
        border: 5px solid;
    }

    .events-button2 {
        margin: 0 25% 50px 25%;
    }

    .events-itemL {
        background-image: linear-gradient(45deg, #ffffff, #111111);
        text-align: left;
        height: 100px;
        padding: 0 0 0 5%;
        font-size: 150%;
        color: #ffffff;
        margin: 10px 12% 0 0;
        box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
        border-radius: 3px;
        transform: skew(358deg, 359deg);

    }

    .events-itemR {
        text-align: right;
        height: 100px;
        padding: 0 5% 0 0;
        font-size: 150%;
        color: #ffffff;
        margin: 10px 0 0 12%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
        border-radius: 3px;
        transform: skew(358deg, 359deg);
    }

    .events-name {
        font-size: 100%;
        position: relative;
        top: 10px;
    }

    .events-eng {
        font-size: 70%;
        position: relative;
        top: 10px;
    }

    .events-name_ex {
        font-size: 100%;
        position: relative;
        top: 1px;
    }

    .events-eng_ex {
        font-size: 70%;
        position: relative;
        top: 1px;
    }
}