.edl-pages {
max-width: 105rem;
padding-left: 2.5rem;
padding-right: 2.5rem;
margin-left: auto;
margin-right: auto;
list-style: none;
}
.edl-pages li {
margin-bottom: 1rem;
}
@media screen and (min-width: 768px) {
.edl-pages li {
margin-bottom: 5.313rem;
}
}
.edl-pages li .underline {
width: 100%;
height: 2px;
background-color: #d5a079;
margin-left: auto;
margin-right: auto;
}
.edl-pages li .underline.transparent-line {
background-color: transparent;
}
.edl-pages li .group-pages {
height:12rem;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
margin-left: 0%;
margin-right: 0%;
display: block;
color: white;
text-decoration: none;
position: relative;
overflow: hidden;
}
@media screen and (min-width: 768px) {
.edl-pages li .group-pages {
height:41.625rem;
margin-left: 7%;
margin-right: 7%;
}
}
.edl-pages li .group-pages .slide-transition {
height: 100%;
width: 130%;
background-color: #d5a079;
opacity: 0.9;
position: absolute;
right: -130%;
top: 0;
z-index: 1;
}
.edl-pages li .group-pages .shadow-group {
height: 100%;
width: 100%;
background-color: transparent;
transition: 0.5s ease-in-out background-color;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
padding-left: 8%;
padding-right: 8%;
position: absolute;
z-index: 2;
}
.edl-pages li .group-pages:hover + .underline {
-moz-animation: lineee 1.5s ease-in-out;
-webkit-animation: lineee 1.5s ease-in-out;
animation: lineee 1.5s ease-in-out;
}
.edl-pages li .group-pages:hover .slide-transition {
width: 0;
transition: width 1.5s ease-in-out, opacity 1.5s ease-in-out;
right: -15%;
margin-left: auto;
transform: skewX(-11deg);
opacity: 0.3;
}
.edl-pages li .group-pages .shadow-group h2 {
margin: 0;
}
.edl-pages li .group-pages .shadow-group h2:first-of-type {
margin-top: 0;
}
@media screen and (min-width: 768px) {
.edl-pages li .group-pages .shadow-group h2:first-of-type {
margin-top: -90px;
}    
}
.edl-pages li .group-pages .shadow-group .under-title {
display: flex;
letter-spacing: 0.15rem;
font-style: italic;
font-size: 1rem;
}
@media screen and (min-width: 768px) {
.edl-pages li .group-pages .shadow-group .under-title {
font-size: 3.5rem;
letter-spacing: 0.28rem;
}
}
.edl-pages li .group-pages .shadow-group .under-title::before {
content: '';
display: block;
border-top: 1px solid white;
width: 1.5rem;
margin-top: 0.85rem;
margin-right: 1rem;
}
@media screen and (min-width: 768px) {
.edl-pages li .group-pages .shadow-group .under-title::before {
width: 10.313rem;
margin-top: 2.938rem;
}
}
@keyframes lineee {
0% {
opacity: 1;
}
10% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}