/**************************************/
/********** CSS FOR HOME.PHP **********/
/**************************************/


/************** GLOBAL ****************/
div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/************** SLIDER ****************/
.containerSlide {
    border: none;
    height: 100%;
    width: 75%;
    background: white;
    margin-left:auto;
    margin-right:auto;
}

/************** INFO ****************/
.containerSplit {
    font-family: 'Abel', sans-serif;
    font-size: 19px;
  font-display: auto;
    display: flex;
    width: 75%;
    margin-left:auto;
    margin-right:auto;
    opacity: 0.9;
}

.left-half {
    background-color: #75a09f;
    flex: 1;
    padding: 1rem;
    opacity: 0.95;
}

.logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.right-half {
    color: white;
    background-color: #2d313d;
    flex: 1;
    padding: 1rem;
}

.shortInfo {
    font-family: 'Abel', sans-serif;
    border: none;
    height: 100%;
    width: 75%;
    color: white;
    text-align: center;
    background: #383838;
    margin-left:auto;
    margin-right:auto;
    padding: 0px 0px 10px 0px;
font-display: auto;
}

.shortInfo h1 {
    font-size: 60px;
    padding-top: 40px;
    margin: 0px;
font-display: auto;
}

.shortInfo p {
    padding: 0px;
    margin: 0px;
}

/************** EVENTS ****************/
.containerEvents {
    /*border: none;*/
    /*height: 100%;*/
    width: 75%;
    color: white;
    background: #383838;
    padding-top: 25px;
    margin-left:auto;
    margin-right:auto;
    opacity: 0.9;
}

.containerEvents p {
    text-align: center;
    margin: 5px;
    font-size: 22px;
    font-family: 'Abel', sans-serif;
    width: 100%;
font-display: auto;
}

.containerEvents ul {
    list-style: none;
}

.containerEvents table {
    background: whitesmoke;
    border-collapse: collapse;
    width: 100%;
    color: #383838;
}

.containerEvents th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #383838;
    border-top: 1px solid #383838;
}

.containerEvents tr:hover {
    background-color:#75a09f;
    color: #383838;
}

.containerEvents table a {
    text-decoration: none;
    color: #75a09f;
}

/************** PAGINATION ****************/
.pages {
    width: 205px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.pagination {
    margin: 0px;
    padding: 0px;
}

.pagination a {
    float: left;
    display: inline-block;
    color: whitesmoke;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}
.pagination a:hover:not(.active) {background-color: #ddd; color: #383838;}