#intro {
margin-top: 80px;
padding: 0;
height: calc(57.5% - 80px);
}
#intro .content {
height: 100%;
}
#intro-logo {
margin-top: 80px;
padding: 0;
}
#intro-logo .logo {
width: 60%;
left: 50%;
transform: translateX(-50%);
margin: 15% 0
}
#intro-logo .logo img {
position: relative;
float: left;
width: 100%;
}
#comunication .banner {
width: 80%;
padding: 2.5%;
max-width: 600px;
border: 2px solid var(--brand-color);
text-align: center;
left: 50%;
transform: translate(-50%);
}
#comunication .banner .text {
font-size: 1.2em;
width: 100%;
}
#events .title {
width: 100%;
padding-bottom: 10px;
text-align: center;
color: #ffffff;
}
#events .title:after {
content: '';
position: absolute;
background: var(--brand-color);
width: 80%;
max-width: 300px;
height: 3px;
bottom: 0;
left: 50%;
transform: translate(-50%);
}
#events .list-event {
width: 100%;
margin-top: 40px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#events .event {
width: 100%;
border-radius: 5px;
overflow: hidden;
color: #000000;
background: #ffffff;
box-shadow: rgba(60, 66, 87, 0.12) 0px 7px 14px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px;
}
#events .event .image {
width: 100%;
padding-top: 100%;
border-radius: 5px;
overflow: hidden;
background: #000;
}
#events .event .image .bg-img{
background-color: #000;
}
#events .event .image .btn {
position: absolute;
right: 10px;
top: 10px;
background: rgba(255,255,255,.9);
border: 2px solid #ffffff;
}
#events .event .image .btn:hover {
background: rgba(255,255,255,1);
}
#events .event .text {
width: calc(100% - 15px);
padding: 15px;
}
#events .event .text .event-row {
width: 100%;
line-height: 1em;
}
#events .event .text .event-date {
font-weight: 300;
font-size: .8em;
}
#events .event .text .event-name {
font-weight: 500;
margin-top: 2px;
}
#events .event .text .event-age,
#events .event .text .event-description {
font-size: .9em;
margin-top: 10px;
}
#faq {
max-width: 800px;
left: 50%;
transform: translateX(-50%);
}
#faq .title {
width: 100%;
padding-bottom: 10px;
text-align: center;
color: #ffffff;
}
#faq .title:after {
content: '';
position: absolute;
background: var(--brand-color);
width: 80%;
max-width: 300px;
height: 3px;
bottom: 0;
left: 50%;
transform: translate(-50%);
}
#faq .list-faq {
width: 100%;
margin-top: 2.5%;
}
#faq .list-faq .faq {
width: 95%;
padding: 2.5%;
border-bottom: 2px solid var(--brand-color);
backdrop-filter: blur(7.5px) saturate(200%);
-webkit-backdrop-filter: blur(7.5px) saturate(200%);
background-color: rgba(0, 0, 0, .2);
border-radius: 5px 5px 0 0;
box-shadow: rgba(60, 66, 87, 0.12) 0px 7px 14px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px;
margin-bottom: 2.5%;
transition: .3s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#faq .list-faq .faq .faq-title {
width: 100%;
font-size: 1.4em;
color: var(--brand-color);
}
#faq .list-faq a {
color: var(--brand-color)
}
#faq .list-faq .faq .faq-title svg {
position: relative;
float: right;
fill: var(--brand-color);
rotate: -0deg;
transition: .3s;
}
#faq .list-faq .faq.show .faq-title svg {
rotate: -180deg;
}
#faq .list-faq .faq .faq-text {
width: 100%;
margin-top: 0%;
max-height: 0px;
transition: .3s;
overflow: hidden;
}
#faq .list-faq .faq.show {
border-radius: 5px;
border: none;
}
#faq .list-faq .faq.show .faq-text {
margin-top: 1.5%;
max-height: 200px;
}
@media (max-width: 768px) {
#intro-logo .logo {
width: 60%;
left: 50%;
transform: translateX(-50%);
margin: 25% 0
}
#comunication {
margin: 10% 0;
}
#comunication .banner .text {
font-size: 1em;
width: 100%;
}
#events .list-event {
width: 100%;
grid-template-columns: repeat(1, 1fr);
}
#faq .list-faq {
margin-top: 5%;
}
#faq .list-faq .faq {
width: 90%;
padding: 5%;
margin-bottom: 5%;
transition: .3s;
}
#faq .list-faq .faq .faq-title {
width: 100%;
font-size: 1.1em;
color: var(--brand-color);
}
}