.slider {
overflow: hidden;
z-index: 1;
position: relative;
}
.slider figure {
position: relative;
width: 500%;
height: 100vh;
margin: 0;
left: 0;
animation: 20s slider infinite;
animation-timing-function: cubic-bezier(0.57, 0.02, 0.3, 0.99);
}
.slider figure img {
width: 20%;
height: 100vh;
object-fit: cover;
float: left;
}
.show-me-please {
display: block;
}
@keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
.slider .overlay {
z-index: 999;
background: rgba(255, 255, 255, .7);
position: absolute;
top: 25%;
width: 600px;
height: 170px;
padding: 18px;
color: black;
}
.slider .overlay h1 {
font-size: 50px;
font-weight: 600;
user-select: none;
-webkit-user-select: none;
}
.sec-new-member {
width: 100%;
align-items: center;
justify-content: center;
text-align: center;
box-shadow: 0 8px 10px silver inset;
padding-top: 30px;
padding-bottom: 30px;
}
.sec-new-member .swh-banner {
max-width: 100%;
margin: 20px auto;
}
.sec-new-member .swh-banner img {
width: 80%;
max-width: 1600px;
}
.sec-new-member .small-screen {
display: none;
}
.sec-new-member .button-go {
display: grid;
padding: 0;
margin: 0;
justify-content: center;
align-items: center;
text-align: center;
width: 450px;
min-height: 60px;
border-radius: 12px;
background-color: #F23038;
color: white;
text-decoration: none;
font-weight: 400;
font-size: 24px;
align-self: start;
justify-self: center;
transition: 0.2s;
box-shadow: 0 0 0 3px rgba(242, 48, 56, 0.2);
}
.sec-new-member .button-go p {
padding: 0;
margin: 0;
text-align: center;
}
.sec-new-member .button-go:hover {
background-color: #c7282e;
}
.about-us {
box-shadow: 0 8px 10px silver inset;
padding: 50px;
}
.about-us h1 {
font-weight: 800;
font-size: 40px;
}
.divider {
height: 420px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 -8px 10px silver;
}
.timeline {
padding: 50px;
}
.timeline h1 {
font-weight: 800;
font-size: 40px;
}
.overlay-front p {
margin-bottom: 10px;
}
.latest-article {
box-shadow: 0 -8px 10px silver;
padding-top: 50px;
padding-bottom: 70px;
}
.content-holder {
width: 80%;
max-width: 1600px;
margin: 0 auto 0 auto;
}
.latest-article h1 {
}
@media only screen and (max-device-width: 700px) {
.sec-new-member .button-go {
width: 94%;
height: 90%;
font-size: 55px;
box-shadow: 0 0 0 9px rgba(242, 48, 56, 0.2);
border-radius: 18px;
}
.sec-new-member {
box-shadow: 0 20px 20px silver inset;
justify-content: inherit;
}
.sec-new-member .swh-banner img {
width: 95%;
}
.sec-new-member h1 {
font-size: 85px;
padding-bottom: 50px;
}
.sec-new-member .small-screen {
display: block;
}
.sec-new-member .big-screen {
display: none;
}
.slider .overlay {
width: 80%;
height: 220px;
}
.slider .overlay h1 {
font-size: 70px;
}
.about-us {
box-shadow: 0 20px 20px silver inset;
}
.about-us h1 {
font-size: 60px;
}
.about-us p {
font-size: 35px;
}
.divider {
background-attachment: unset;
}
.content-holder {
width: 95%;
}
.content-holder h1 {
font-size: 60px;
}
.show-me-please {
display: block;
}
}