/*
Theme Name: Event Template
Author: Emanuel Alderete & IDE Comunicación Digital
Theme URI: //ideconsultora.com.ar/
Description: Plantilla personalizada para eventos, desarrollada casi en su totalidad desde el código para un mayor control sobre cada componente de la web.
Version: 1.0
Template: twentytwenty
*/
/* Reset básico */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Paleta de colores del sitio */
/* #PLACEHOLDER_TEMPLATE */
:root {
--dark-color: #333333;
--dark-gray-color: #555555;
--gray-color: #aaaaaa;
--light-gray-color: #e7e7e7;
--light-color: #ffffff;
--primary-color: #ec7a22;
--secondary-color: #138dc0;
--terciary-color: #f0e41e;
--light-shadow: #00000038;
--transition: 250ms;
--bold-font: 800;
--thin-font: 300;
--font-family-primary: 'Montserrat';
--header-bg: #ffffff;
}
/* Declaraciones Generales */
html {
font-family: var(--font-family-primary);
font-optical-sizing: auto;
font-size: 14px;
color: var(--dark-color);
}
body {
width: 100% !important;
font-family: var(--font-family-primary);
margin: 0 !important;
padding: 0 !important;
max-width: 100% !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
span,
a,
button {
font-family: var(--font-family-primary);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
}
h1 {
font-size: 2.7em;
}
h2 {
font-size: 2.2em;
}
h3 {
font-size: 1.8em;
}
h4 {
font-size: 1.5em;
}
h5 {
font-size: 1.2em;
}
h6 {
font-size: 1em;
}
.title,
.home-title {
font-weight: var(--bold-font);
color: var(--primary-color);
}
.home-title {
font-size: 2.5em;
}
/* Módulos reutilizables */
.buttons-center,
.buttons-left,
.buttons-right {
display: flex;
align-items: center;
margin: 1rem 0;
flex-wrap: wrap;
}
.buttons-left {
justify-content: flex-start;
}
.buttons-right {
justify-content: flex-end;
}
.buttons-center {
justify-content: center;
}
.buttons,
.buttons-primary,
.buttons-light,
.buttons-secondary,
.buttons-terciary {
padding: 0.5rem 2rem;
border-radius: 99px;
font-weight: var(--bold-font);
transition: var(--transition);
text-decoration: none;
}
.buttons-primary {
background-color: var(--primary-color);
color: var(--light-color);
border: 2px solid var(--primary-color);
&:hover {
background-color: var(--light-color);
color: var(--primary-color);
box-shadow: 0 0 10px var(--primary-color);
}
}
.buttons-light {
background-color: var(--light-color);
color: var(--dark-color);
border: 2px solid var(--light-color);
&:hover {
background-color: transparent;
color: var(--light-color);
box-shadow: 0 0 10px var(--light-color);
}
}
.buttons-secondary {
background-color: var(--secondary-color);
color: var(--light-color);
border: 2px solid var(--secondary-color);
&:hover {
background-color: transparent;
color: var(--secondary-color);
box-shadow: 0 0 10px var(--secondary-color);
}
}
.buttons-terciary {
background-color: var(--terciary-color);
color: var(--light-color);
border: 2px solid var(--terciary-color);
&:hover {
background-color: transparent;
color: var(--terciary-color);
box-shadow: 0 0 10px var(--terciary-color);
}
}
.light-separator,
.primary-separator,
.dark-separator {
margin: 2rem auto;
width: 100%;
max-width: 1200px;
height: 2px;
}
.light-separator {
background-color: var(--light-color);
}
.dark-separator {
background-color: var(--dark-color);
}
.primary-separator {
background-color: var(--primary-color);
}
/* Efectos */
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
.primary-text {
color: var(--primary-color);
}
.secondary-text {
color: var(--secondary-color);
}
.dark-gray-text {
color: var(--dark-gray-color);
}
.light-gray-text {
color: color-mix(in srgb, var(--light-gray-color) 70%, var(--dark-gray-color) 30%);
}
.disabled {
color: color-mix(in srgb, var(--light-gray-color) 70%, var(--dark-gray-color) 30%) !important;
pointer-events: none;
cursor: not-allowed;
}
.width-restriction-400,
.width-restriction-600 {
margin: auto;
width: 100%;
}
.width-restriction-400 {
max-width: 400px;
}
.width-restriction-600 {
max-width: 600px;
}
/* Header */
#header {
position: fixed;
transition: var(--transition);
z-index: 10;
top: 0;
left: 0;
width: 100%;
background-color: transparent;
box-shadow: 0 3px 10px var(--light-shadow);
background-color: var(--header-bg);
.header__content {
width: 100%;
padding: 0.75rem 2rem;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
}
.header__brand {
width: 100%;
max-width: 120px;
.header__logo {
width: 100%;
height: 100%;
object-fit: contain;
}
}
@media (max-width: 1101px), (min-width: 1300px) {
.header__brand .header__logo {
width: 150%;
}
}
.main-menu {
list-style: none;
display: flex;
align-items: stretch;
justify-content: space-between;
li {
a,
button {
color: contrast-color(var(--header-bg));
text-decoration: none;
text-transform: uppercase;
border: none;
font-weight: 700;
background-color: transparent;
}
}
.menu-item {
margin: 0 0.6rem;
}
.menu-item::after {
content: '';
display: block;
width: 0;
height: 3px;
margin: 0 auto;
background-color: var(--primary-color);
transition: var(--transition);
}
.menu-item:hover::after {
width: 100%;
}
.main-menu__submenu {
position: relative;
ul {
padding: 0;
margin: 0;
list-style: none;
position: absolute;
transition: var(--transition);
opacity: 0;
pointer-events: none;
background-color: var(--light-color);
border: 1px solid var(--light-gray-color);
box-shadow: 2px 2px 10px var(--light-shadow);
border-radius: 15px;
width: max-content;
overflow: hidden;
.submenu-item {
a {
color: var(--dark-color);
padding: 0.4rem 0.5rem;
display: block;
text-decoration: none;
text-transform: uppercase;
border: none;
background-color: transparent;
}
&:hover {
background-color: var(--primary-color);
a {
color: var(--light-color);
}
}
}
}
&:hover {
ul {
opacity: 1;
pointer-events: all;
}
}
&:hover .menu-item::after {
width: 100%;
}
}
}
.header__highlight-button {
padding: 2rem;
a {
color: var(--light-color);
font-weight: 600;
width: 100%;
padding: 0.7rem 2.1rem;
background-color: var(--primary-color);
border: 2px solid var(--primary-color);
transition: var(--transition);
text-decoration: none;
display: block;
text-align: center;
&:hover {
background-color: var(--light-color);
color: var(--terciary-color);
box-shadow: 0 0 10px var(--light-color);
}
}
}
.header__highlight-button.desk {
a {
color: var(--light-color);
font-weight: 600;
padding: 0.7rem 2.1rem;
background-color: var(--primary-color);
border: 2px solid var(--primary-color);
transition: var(--transition);
text-decoration: none;
&:hover {
background-color: var(--light-color);
color: var(--terciary-color);
box-shadow: 0 0 10px var(--light-color);
}
}
}
.header__mobile-button {
display: none;
button {
background-color: transparent;
color: var(--secondary-color);
font-size: 1.8em;
border: none;
padding: 1.5rem;
}
}
.mobile-menu {
font-family: var(--font-family-primary);
.offcanvas-header {
.mobile-menu__brand {
width: 100%;
max-width: 170px;
.mobile-menu__logo {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
.offcanvas-body {
.mobile-nav {
width: 100%;
list-style: none;
.mobile-menu__submenu {
.accordion-button {
font-family: var(--font-family-primary);
font-weight: 400;
font-size: 1.5em;
color: var(--dark-color);
}
.accordion-button::before {
content: '';
display: inline-block;
width: 0;
height: 3px;
background-color: var(--primary-color);
transition: var(--transition);
}
.accordion-button:hover::before {
width: 1.5rem;
margin: 0 0.7rem 0 0;
}
.accordion-button:not(.collapsed)::before {
width: 1.5rem;
margin: 0 0.7rem 0 0;
}
.accordion-button:not(.collapsed) {
background-color: transparent;
color: var(--dark-color);
}
.accordion-body {
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
a {
text-decoration: none;
color: var(--dark-color);
font-size: 1em;
padding: 0.5rem 1rem;
display: inline-block;
width: 100%;
display: flex;
align-items: center;
&:hover {
background-color: var(--primary-color);
color: var(--light-color);
}
}
a::before {
content: '';
display: inline-block;
width: 1.5rem;
height: 3px;
background-color: var(--primary-color);
margin-right: 1rem;
}
a:hover::before {
background-color: var(--light-color);
}
}
}
.mobile-menu__item {
padding: 1rem 1.25rem;
font-size: 1.5em;
display: flex;
align-items: center;
a {
text-decoration: none;
color: var(--dark-color);
}
}
.mobile-menu__item::before {
content: '';
display: inline-block;
width: 0;
height: 3px;
background-color: var(--primary-color);
transition: var(--transition);
}
.mobile-menu__item:hover::before {
width: 1.5rem;
margin: 0 0.7rem 0 0;
}
}
}
}
/* Header [Scroll] */
.header--scroll {
background-color: var(--dark-gray-color) !important;
box-shadow: 0 3px 10px var(--light-shadow);
}
.main-menu--scroll {
li {
a,
button {
color: var(--light-color);
}
}
}
/* Redes sociales: Fixed */
.c-social-media {
width: max-content;
position: fixed;
top: 50%;
right: 3.5rem;
transform: translateY(-50%) rotateZ(-90deg);
transform-origin: top right;
z-index: 8;
background-color: var(--light-color);
border-radius: 99px;
padding: 0.3rem;
.c-social-media__content {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.c-social-media__item {
color: var(--primary-color);
font-size: 1.4em;
display: inline-block;
margin: 0.1rem 0;
transform: rotateZ(90deg);
width: 30px;
height: 30px;
border-radius: 99px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
text-align: center;
}
span {
color: var(--primary-color);
width: max-content;
white-space: nowrap;
font-weight: 600;
&::after {
content: '';
width: 20px;
height: 2px;
display: inline-block;
background-color: var(--primary-color);
border-radius: 2px;
margin: 3px 5px 3px 10px;
}
}
}
}
/* Main */
#main {
width: 100%;
}
/* Sección: Hero */
#hero {
width: 100%;
.hero__content {
width: 100%;
}
}
/* Sección: Contador del evento */
#countdown {
width: 100%;
margin: 9rem 0 7rem;
padding: 0 2rem;
.countdown__content {
width: 100%;
max-width: 1200px;
margin: 0 auto;
border: 4px solid var(--primary-color);
border-radius: 30px;
padding: 1rem;
a {
color: var(--primary-color);
text-decoration: none;
}
.hurrytimer-campaign.hurrytimer-campaign-14 {
transform: translateY(-4rem);
height: 3rem;
.hurrytimer-timer {
.hurrytimer-timer-block {
background-color: var(--light-color);
margin: 0;
.hurrytimer-timer-digit {
font-weight: 900;
color: var(--dark-gray-color);
}
.hurrytimer-timer-label {
color: var(--dark-gray-color);
}
}
.hurrytimer-timer-block:first-child {
padding-left: 2rem;
}
.hurrytimer-timer-block:last-child {
padding-right: 2rem;
}
.hurrytimer-timer-sep {
padding: 0 1.5rem;
color: var(--dark-gray-color);
background-color: var(--light-color);
}
}
}
}
}
/* Sección: Postevento */
.postevent {
width: 100%;
margin: 4rem 0;
.postevent__content {
width: 100%;
padding: 0 2rem;
max-width: 1200px;
margin: 0 auto;
.postevent__inner {
width: 100%;
display: flex;
align-content: center;
justify-content: space-evenly;
gap: 15px;
.postevent__item {
width: 100%;
max-width: 200px;
border: 1px solid rgb(from var(--light-gray-color) r g b / 70%);
transition: var(--transition);
border-radius: 15px;
padding: 0.5rem;
&:hover {
transform: scale(1.05);
box-shadow: 10px 10px 10px var(--light-shadow);
}
.postevent__icon {
width: 100%;
max-width: 90px;
margin: 0 auto 1rem;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
}
}
}
/* Sección alternable: congreso */
.congreso__content {
border: none;
}
.congreso__content .active {
border: none;
}
.congreso__button {
width: 50%;
border-radius: 0;
border: none;
padding-top: 1rem;
padding-bottom: 1rem;
}
.congreso__button.active {
border: none;
}
.congreso__button:hover {
border: none;
color: var(--light-color);
}
#nav-buttonOne-tab {
background-color: var(--primary-color);
color: var(--light-color);
}
#nav-buttonTwo-tab {
background-color: var(--secondary-color);
color: var(--dark-color);
}
#nav-buttonThree-tab {
background-color: var(--terciary-color);
color: var(--dark-color);
}
#nav-buttonOne {
.congreso__overlay {
background-color: rgb(from var(--primary-color) r g b / 60%);
color: var(--light-color);
}
}
#nav-buttonTwo {
.congreso__overlay {
background-color: rgb(from var(--secondary-color) r g b / 60%);
color: var(--dark-color);
}
}
#nav-buttonThree {
.congreso__overlay {
background-color: rgb(from var(--terciary-color) r g b / 60%);
color: var(--dark-color);
}
}
.congreso__pane {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
outline: none;
}
.congreso__overlay {
padding: 4rem 2rem;
width: 100%;
height: 100%;
backdrop-filter: blur(4px);
.congreso__desc {
width: 100%;
max-width: 920px;
margin: 0 auto;
}
}
.congreso__h2 {
margin-bottom: 1rem;
margin-top: 0;
text-align: center;
}
.congreso__subtitle {
margin-bottom: 2rem;
}
.congreso__subtitle {
font-weight: var(--bold-font);
display: block;
}
.congreso__a {
background-color: var(--light-color);
color: var(--dark-color);
}
.congreso__a:hover {
transform: scale(1.08);
box-shadow: 25px 25px 10px var(--light-shadows);
background-color: var(--dark-color);
color: var(--light-color);
}
.congreso__loop {
margin-top: 2rem;
}
.congreso-card {
width: 100%;
max-width: 920px;
border-radius: 15px;
overflow: hidden;
display: flex;
align-items: stretch;
justify-content: center;
background-color: var(--light-color);
margin: 1.5rem auto;
color: var(--dark-color);
transition: var(--transition);
&:hover {
transform: scale(1.05);
box-shadow: 10px 10px 10px var(--light-shadow);
}
.congreso-card__thumbnail {
width: 35%;
height: 240px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.congreso-card__info {
width: 65%;
padding: 1rem 1rem 1rem 1.5rem;
position: relative;
h4 {
color: var(--primary-color);
margin-top: 0;
margin-bottom: 1.5rem;
}
p {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: clip;
line-clamp: 4;
}
.button-left {
margin-top: 2.5rem;
position: absolute;
bottom: 1.5rem;
left: 1.5rem;
}
}
}
.icon-set {
width: 100%;
max-width: 1200px;
margin: 3rem auto;
padding: 0 2rem;
display: flex;
align-items: stretch;
justify-content: space-evenly;
flex-wrap: wrap;
.icon-set__icon {
width: 170px;
.icon {
width: 60%;
margin: 0 auto 1.5rem;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
}
/* Redes sociales */
.congress-social-media {
width: 100%;
margin: 2rem 0;
.congress-social-media__content {
background-color: rgb(from var(--light-color) r g b / 50%);
border-radius: 25px;
width: 100%;
max-width: 992px;
margin: 0 auto;
padding: 2rem;
.congress-social-media__buttons {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
a {
margin: 1rem;
background-color: var(--secondary-color);
border: 2px solid var(--secondary-color);
color: var(--dark-color);
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
border-radius: 999px;
text-decoration: none;
transition: var(--transition);
&:hover {
box-shadow: 0 0 10px var(--secondary-color);
background-color: var(--light-color);
color: var(--secondary-color);
}
}
}
}
}
/* Disertantes en home */
.disertantes {
width: 100%;
.disertantes__content {
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
flex-wrap: wrap;
}
}
.disertantes-item {
width: 270px;
height: 455px;
margin: 1rem;
position: relative;
transition: var(--transition);
.disertantes-item__thumbnail {
position: absolute;
top: 1rem;
left: 50%;
transform: translateX(-50%);
width: 170px;
height: 170px;
border-radius: 99px;
overflow: hidden;
border: 5px solid var(--terciary-color);
z-index: 1;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.disertantes-item__flag {
position: absolute;
top: 1rem;
right: 1rem;
width: 40px;
height: 25px;
border-radius: 5px;
overflow: hidden;
z-index: 2;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.disertantes-item__info {
width: 100%;
height: 100%;
border-radius: 20px;
padding: 0.7rem;
backdrop-filter: blur(10px);
padding-top: 200px;
background-color: var(--light-color);
.disertantes-item__inner {
width: 100%;
height: fit-content;
h4 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: clip;
line-clamp: 2;
margin: 0 0 1rem 0;
color: var(--dark-gray-color);
}
p {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: clip;
line-clamp: 4;
color: var(--dark-gray-color);
}
.buttons-center {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
}
}
}
/* Sección Posters del home */
.home-posters {
width: 100%;
margin: 9rem 0;
background-color: var(--light-color);
.home-posters__content {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
}
.home-posters__inner {
width: 50%;
padding: 2rem 1rem;
}
.home-posters__inner:last-child {
border-radius: 25px 0 0 25px;
background-color: color-mix(in srgb, var(--primary-color), transparent 90%);
}
.posters-loop {
width: 100%;
display: flex;
align-items: stretch;
justify-content: space-evenly;
}
.hp-item {
width: 100%;
max-width: 250px;
height: 320px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 15px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--secondary-color), #ffffff 70%);
}
.hp-item__overlay {
width: 100%;
height: 100%;
background: #499D32;
background: linear-gradient(332deg, rgba(73, 157, 50, 0.55) 9%, rgba(227, 0, 53, 0.33) 100%);
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
/* Beneficios */
#beneficios {
width: 100%;
background-color: var(--secondary-color);
.beneficios__content {
width: 100%;
padding: 3rem 2rem 0;
h2 {
color: var(--light-color);
text-align: center;
margin-top: 0;
}
.beneficios__group {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding-top: 2.5rem;
}
}
.beneficios__footer {
width: 100%;
margin-top: 3rem;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
.beneficios-item {
width: 350px;
border-radius: 15px;
background-color: var(--light-color);
box-shadow: 0 3px 10px var(--light-shadow);
overflow: hidden;
.beneficios-item__thumbnail {
width: 100%;
aspect-ratio: 1.5 / 1;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.beneficios-item__info {
padding: 0.5rem 1.5rem;
h4 {
color: var(--primary-color);
text-align: center;
}
}
}
.beneficios-item:first-child {
.beneficios-item__info {
padding-right: 3.4rem;
}
}
.beneficios-item:nth-child(2) {
transform: scale(1.15);
}
.beneficios-item:last-child {
.beneficios-item__info {
padding-left: 3.4rem;
}
}
/* Sponsors */
.supports {
width: 100%;
background-color: var(--primary-color);
margin: 7rem 0 1rem;
.supports__content {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 5rem 2rem;
.supports__main-logo {
width: 100%;
max-width: 450px;
margin: 0 auto 2rem;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.supports__box {
margin: 2rem 0;
.supports__slider {
width: 85%;
margin: 0 auto;
box-shadow: 3px 3px 5px var(--light-shadow);
height: 15rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px 0 15px 0;
background-color: var(--secondary-color);
border: 1px solid var(--secondary-color);
box-shadow: 7px 7px 5px var(--light-shadow);
}
.supports__slider.ss-2 {
background-color: var(--light-color);
border: 1px solid var(--light-color);
}
}
}
}
/* Noticias */
.news {
width: 100%;
.news__content {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
.news__loop {
width: 100%;
display: flex;
align-items: stretch;
flex-wrap: wrap;
justify-content: space-around;
}
}
}
.news-item {
width: 300px;
margin: 0.5rem;
perspective: 1000px;
.news-item__content {
border: 2px solid var(--primary-color);
border-radius: 25px;
transition: var(--transition);
width: 100%;
overflow: hidden;
position: relative;
&:hover {
box-shadow: 15px 15px 10px var(--light-shadow);
}
.news-item__image {
width: 100%;
outline: 2px solid var(--primary-color);
height: 16rem;
border-radius: 25px;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.news-item__date {
p {
margin: 0;
color: var(--gray-color);
}
}
.news-item__info {
width: 100%;
padding: 1rem;
.news-item__title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: clip;
height: 54px;
line-clamp: 2;
}
p:not(.news-item__date p) {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: clip;
line-clamp: 3;
height: 67px;
}
}
.news-item__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
background-color: var(--light-color);
.button-left {
width: calc(60% - 7.5px);
}
.news-item__share {
width: calc(40% - 7.5px);
display: flex;
align-items: center;
justify-content: flex-end;
.share-icon {
width: 35px;
height: 35px;
margin: 0 5px;
font-size: 1.2em;
display: flex;
align-items: center;
justify-content: center;
border-radius: 99px;
transition: var(--transition);
}
.share-icon.facebook {
background-color: var(--primary-color);
color: var(--light-color);
&:hover {
background-color: #3b5998;
box-shadow: 0 0 10px #3b5998;
}
}
.share-icon.whatsapp {
background-color: var(--primary-color);
color: var(--light-color);
&:hover {
background-color: #25d366;
box-shadow: 0 0 10px #25d366;
}
}
}
}
}
}
/* Donde encontrarnos */
.where {
width: 100%;
padding: 3rem 2rem;
background-color: rgb(from var(--light-gray-color) r g b / 40%);
.where__content {
width: 100%;
max-width: 1200px;
margin: 0 auto;
.where__map {
width: 100%;
height: 270px;
border-radius: 150px;
border: 2px solid var(--primary-color);
position: relative;
overflow: hidden;
.ornament__location-pin {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
max-width: 263px;
height: 100%;
max-height: 300px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10em;
color: var(--secondary-color);
background-color: var(--light-color);
border-radius: 150px;
outline: 2px solid var(--primary-color);
z-index: 2;
img {
width: 85%;
height: 85%;
object-fit: contain;
}
}
iframe {
width: 100%;
height: 100%;
}
}
}
}
/* Footer */
#footer {
width: 100%;
background-color: color-mix(in srgb, var(--secondary-color), #ffffff 60%);
padding: 3rem 2rem;
.footer__content {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: stretch;
justify-content: center;
flex-wrap: wrap-reverse;
gap: 15px;
.footer__inner {
width: calc(50% - 12.5px);
}
.footer__inner:first-child {
.footer__brand {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
img {
width: 100%;
max-width: 368px;
}
}
.footer__info {
list-style: none;
padding: 0;
width: 100%;
max-width: 400px;
margin: 0 auto;
color: var(--dark-color);
li {
margin: 0.5rem 0;
}
}
}
.footer__inner:last-child {
.contact {
width: 100%;
max-width: 440px;
margin: 0 auto;
background-color: var(--light-color);
padding: 1rem;
border-radius: 15px;
font-weight: 700;
p {
margin: 0;
}
.cf7-input,
.cf7-textarea {
padding: 0.7rem 0.5rem 0.7rem 1rem;
border: none;
border-bottom: 1px solid var(--primary-color);
width: 100%;
margin: 0.5rem 0;
&:focus {
outline: 4px solid rgb(from var(--primary-color) r g b / 30%);
}
}
.cf7-textarea {
height: 6rem;
}
.cf7-submit {
padding: 0.5rem 2rem;
border-radius: 15px;
background-color: var(--primary-color);
color: var(--light-color);
border: 2px solid var(--primary-color);
transition: var(--transition);
margin: 1rem 0;
&:hover {
background-color: var(--light-color);
color: var(--primary-color);
box-shadow: 0 0 10px var(--primary-color);
}
;
}
}
}
}
}
.footer__ide {
width: 100%;
background-color: var(--dark-color);
padding: 0.5rem 1rem;
a {
text-decoration: none;
display: flex;
max-width: 300px;
width: 100%;
margin: 0 auto;
align-items: center;
justify-content: center;
img {
width: 27px;
margin-right: 0.5rem;
}
color: var(--light-color);
}
}
/*
###################################################################################
DEFINICIONES DE PÁGINAS, CATEGORÍAS Y ENTRADAS
###################################################################################
*/
.entry {
width: 100%;
padding: 2rem;
background-color: var(--light-gray-color);
color: var(--dark-gray-color);
.breadcrumbs {
font-weight: 700;
margin: 0;
a {
color: var(--primary-color);
text-decoration: none;
}
.breadcrumb_last {
color: var(--dark-gray-color);
}
}
.entry__content {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: stretch;
justify-content: center;
flex-wrap: wrap;
background-color: var(--light-color);
box-shadow: 10px 10px 10px var(--light-shadow);
padding: 2rem;
.entry__box:first-child {
width: 65%;
padding: 0 0.5rem;
.entry__header {
width: 100%;
.entry__att-image {
width: 100%;
height: calc((1200px - (1200px * 0.4)) / 1.5);
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.entry__date {
margin-bottom: 2rem;
}
.entry__title {
color: var(--primary-color);
margin-bottom: 0;
margin-top: 2rem;
}
}
.entry__excerpt {
p {
width: 100%;
padding: 1.5rem;
border: 3px dashed var(--primary-color);
font-size: 1.5em;
border-radius: 25px 25px 25px 5px;
margin: 2rem 0;
}
}
.entry__body {
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--primary-color);
margin: 2rem 0 0.7rem 0;
}
}
.entry-tags {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
.entry-tags__title {
margin-right: 1rem;
color: var(--primary-color);
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
li {
margin: 0.3rem;
a {
display: block;
color: var(--primary-color);
text-decoration: none;
border: 1px solid var(--primary-color);
background-color: transparent;
padding: 0.3rem 0.5rem;
border-radius: 99px;
font-size: 0.8em;
&:hover {
background-color: var(--primary-color);
color: var(--light-color);
}
}
}
}
}
}
.entry__box:last-child {
width: 35%;
padding: 0 0.5rem;
.entry-box__content {
.entry-search {
position: relative;
width: 100%;
.entry-search__form {
display: flex;
align-items: center;
justify-content: flex-start;
.entry-search__field {
padding: 0.5rem 1rem;
border: 1px solid var(--light-gray-color);
width: 100%;
&:focus {
outline: 4px solid rgb(from var(--primary-color) r g b / 30%);
}
}
.entry-search__submit {
width: 3rem;
height: 2.7rem;
font-size: 1.2em;
border: 2px solid var(--primary-color);
background-color: var(--primary-color);
color: var(--light-color);
}
}
}
.entry-related {
width: 100%;
margin: 1rem 0;
.entry-related__title {
color: var(--primary-color);
margin-bottom: 1rem;
}
.entry-related__body {
li {
a {
color: var(--primary-color);
text-decoration: none;
display: block;
padding: 0.4rem;
border-bottom: 1px dashed var(--primary-color);
&:hover {
background-color: var(--primary-color);
color: var(--light-color);
}
}
}
}
}
}
.entry-follow {
width: 100%;
.entry-follow__content {
width: 100%;
.entry-follow__title {
color: var(--primary-color);
}
.entry-follow__list {
display: flex;
align-items: center;
justify-content: flex-start;
list-style: none;
margin: 0;
padding: 0;
.entry-follow__item {
margin: 0 0.3rem;
a {
text-decoration: none;
color: var(--light-color);
display: flex;
background-color: var(--primary-color);
border-radius: 99px;
width: 3.5rem;
height: 3.5rem;
font-size: 1.6em;
justify-content: center;
align-items: center;
border: 2px solid var(--primary-color);
transition: var(--transition);
&:hover {
background-color: var(--light-color);
color: var(--primary-color);
box-shadow: 0 0 10px var(--primary-color);
}
}
}
}
}
}
}
}
}
.entry-activity {
width: 100%;
padding: 2rem 2rem 5rem;
color: var(--dark-gray-color);
background-color: color-mix(in srgb, var(--light-gray-color), #ffffff 50%);
.entry-activity__content {
width: 100%;
max-width: 1440px;
margin: 0 auto;
}
}
.entry-activity__header {
width: 100%;
}
.entry-activity__title {
width: 100%;
margin-bottom: 1.5rem;
h1 {
color: var(--primary-color);
}
.breadcrumbs {
color: var(--dark-gray-color);
font-weight: 600;
a {
color: var(--primary-color);
text-decoration: none;
}
}
.entry-activity__info {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 720px;
flex-wrap: wrap;
}
}
.entry-activity__info-item {
width: 33.333%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 1rem;
h5 {
margin: 0;
}
}
.entry-activity__info-item:not(:last-child) {
border-right: 1px solid var(--light-gray-color);
}
.entry-activity__metainfo {
background-color: var(--light-color);
border-radius: 20px;
border: 1px solid var(--light-gray-color);
box-shadow: 3px 3px 5px var(--light-shadow);
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 1rem;
overflow: hidden;
}
.entry-activity__metainfo--row {
display: flex;
align-items: stretch;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 3rem;
}
.entry-activity__metainfo--row:last-child {
margin-bottom: 0;
}
.entry-time {
background-color: color-mix(in srgb, var(--secondary-color), #ffffff 70%);
width: 220px;
/* height: 260px; */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-wrap: wrap;
border-radius: 15px;
}
.entry-time__digits {
span {
text-align: center;
display: block;
font-size: 2.5em;
font-weight: 300;
}
p {
margin: 0;
text-align: center;
color: var(--primary-color);
font-size: 1.1em;
font-weight: 600;
&::after {
content: '';
display: block;
width: 35%;
height: 3px;
background-color: var(--primary-color);
margin: 0.5rem auto 0;
}
}
}
.entry-speakers {
padding: 0 0 0 1rem;
}
.entry-speakers__title {
margin-top: 0;
&::after {
content: '';
display: block;
width: 3rem;
height: 3px;
background-color: var(--primary-color);
margin: 0.5rem auto 0 0;
}
}
.entry-speakers__group {
display: flex;
align-items: stretch;
justify-content: flex-start;
gap: 3rem;
flex-wrap: wrap;
}
.entry-speakers__item {
width: 150px;
.entry-speakers__thumbnail {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
border-radius: 99px;
border: 4px solid var(--primary-color);
overflow: hidden;
img {
width: 100%;
height: auto;
object-fit: cover;
}
}
.entry-speakers__name {
text-align: center;
h6 {
color: var(--dark-gray-color);
}
}
}
.entry-excerpt {
padding: 0 0 0 1.5rem;
display: flex;
flex-direction: column;
.entry-excerpt__title {
margin-top: 0;
&::after {
content: '';
display: block;
width: 3rem;
height: 3px;
background-color: var(--primary-color);
margin: 0.5rem auto 0 0;
}
}
.entry-excerpt__content {
overflow-y: auto;
flex: 1;
min-height: 0;
}
}
.entry-activity__presidents,
.entry-activity__coordinators {
h4 {
color: var(--dark-gray-color);
&::after {
content: '';
display: block;
width: 3rem;
height: 3px;
background-color: var(--primary-color);
margin: 0.5rem auto 0 0;
}
}
}
.entry-activity__body {
background-color: var(--light-color);
border-radius: 20px;
border: 1px solid var(--light-gray-color);
box-shadow: 3px 3px 5px var(--light-shadow);
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 1rem;
overflow: hidden;
margin-top: 2rem;
}
/* Categorías */
.categories {
width: 100%;
padding: 2rem;
.categories__content {
width: 100%;
max-width: 1200px;
margin: 0 auto;
.categories__header {
width: 100%;
.categories__title {
color: var(--primary-color);
margin-bottom: 1rem;
}
.categories__description {
color: var(--dark-gray-color);
margin-bottom: 2rem;
width: 100%;
}
}
.categories__body {
width: 100%;
.categories__loop {
width: 100%;
display: flex;
align-items: stretch;
justify-content: space-evenly;
flex-wrap: wrap;
}
}
}
}
.entry-speaker-flag {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.entry-speaker-flag__content {
width: 100%;
border-radius: 15px;
overflow: hidden;
img {
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
}
}
}
/* Disertante: listado de actividades */
.speaker-activities__title {
color: var(--primary-color);
margin-bottom: 1rem;
&::after {
content: '';
display: block;
width: 3rem;
height: 3px;
background-color: var(--primary-color);
margin: 0.5rem 0 0;
}
}
.speaker-activities__list {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin: 1rem 0;
}
.speaker-activity-card {
display: flex;
align-items: center;
text-decoration: none;
color: var(--dark-color);
background-color: var(--light-color);
border: 1px solid var(--light-gray-color);
border-radius: 12px;
padding: 0.75rem 1rem;
gap: 1rem;
transition: var(--transition);
&:hover {
border-color: var(--primary-color);
box-shadow: 0 4px 12px var(--light-shadow);
transform: translateX(4px);
color: var(--dark-color);
}
.speaker-activity-card__date {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--primary-color);
color: contrast-color(var(--primary-color));
border-radius: 8px;
padding: 0.5rem 0.75rem;
min-width: 60px;
text-align: center;
flex-shrink: 0;
.speaker-activity-card__day {
font-size: 1.6em;
font-weight: 800;
line-height: 1;
}
.speaker-activity-card__month {
font-size: 0.75em;
text-transform: uppercase;
font-weight: 600;
}
.speaker-activity-card__time {
font-size: 0.7em;
margin-top: 0.25rem;
color: contrast-color(var(--primary-color));
}
}
.speaker-activity-card__info {
flex: 1;
min-width: 0;
.speaker-activity-card__title {
margin: 0 0 0.3rem;
color: var(--dark-color);
font-size: 0.95em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: clip;
}
.speaker-activity-card__type {
font-size: 0.78em;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.15rem 0.6rem;
border-radius: 99px;
&.videoconference {
background-color: color-mix(in srgb, var(--secondary-color), #ffffff 80%);
color: var(--secondary-color);
}
&.presencial {
background-color: color-mix(in srgb, var(--terciary-color), #ffffff 50%);
color: var(--dark-color);
}
}
}
.speaker-activity-card__arrow {
color: var(--gray-color);
flex-shrink: 0;
transition: var(--transition);
}
&:hover .speaker-activity-card__arrow {
color: var(--primary-color);
transform: translateX(3px);
}
}
/* Estilos específicos para categorías de disertantes */
.category-entry-speakers {
.news-item {
min-height: 425px;
.news-item__content {
height: 100%;
display: flex;
flex-direction: column;
.news-item__info {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.news-item__footer {
margin-top: auto;
}
}
}
}
/* Categoría: Actividades */
.activities {
width: 100%;
.activities__content {
width: 100%;
padding: 1rem 1.5rem;
}
}
.activities__group {
margin: 0;
padding: 0;
list-style: none;
border-left: 3px dashed var(--light-gray-color);
padding-left: 4rem;
}
.activity-item {
width: 100%;
margin: 5rem 0;
position: relative;
.activity-item__box {
width: 100%;
padding: 1rem 2rem;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--light-gray-color), #ffffff 50%);
box-shadow: 2px 2px 3px var(--light-shadow);
transition: var(--transition);
h3 {
color: var(--dark-gray-color);
transition: var(--transition);
}
}
}
.activity-item:hover .activity-item__box {
transform: translateX(1rem);
h3 {
color: var(--primary-color);
}
}
.activity-item__header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 15px;
}
.activity-item__header > a.text-decoration-none {
flex: 1 1 auto;
min-width: 0;
}
.activity-item__button {
color: var(--dark-gray-color);
flex: 0 0 auto;
white-space: nowrap;
}
.activity-item:hover .activity-item__time {
background-color: var(--terciary-color);
color: var(--dark-color);
left: -9.1rem;
.activity-item__button {
color: var(--primary-color);
}
}
.activity-item__time {
position: absolute;
left: -7.1rem;
top: 50%;
transform: translateY(-50%);
background-color: var(--primary-color);
color: var(--light-color);
width: 6rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
border-radius: 99px;
clip-path: polygon(0 0, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
transition: var(--transition);
}
.activity-item__footer {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1rem;
}
.activity-item__inner:first-child {
width: 75%;
display: flex;
align-items: center;
justify-content: flex-start;
span {
font-weight: 700;
margin-right: 1rem;
color: var(--dark-gray-color);
font-style: italic;
letter-spacing: 0.04em;
font-size: 1.15em;
}
}
.activity-item__inner:last-child {
width: 25%;
display: flex;
align-items: center;
justify-content: flex-end;
min-width: 127px;
}
.activity-item__speakers {
display: flex;
align-items: center;
justify-content: flex-start;
}
.activity-item__speaker-thumbnail {
width: 38px;
height: 38px;
border-radius: 99px;
overflow: hidden;
border: 2px solid var(--light-color);
position: relative;
background-color: #ffffff;
img {
width: 100%;
height: auto;
object-fit: cover;
}
}
.activity-item__speaker-thumbnail:not(:first-child) {
margin-left: -10px;
}
.videoconference-label {
background-color: var(--secondary-color);
color: contrast-color(var(--secondary-color));
font-size: 0.75em;
padding: 0.2rem 0.5rem;
border-radius: 99px;
}
.categories__footer {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
div {
width: 33.333%;
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
a {
text-decoration: none;
font-weight: 700;
color: var(--dark-gray-color);
transition: var(--transition);
&:hover {
color: var(--primary-color);
}
}
}
.categories__current {
border-left: 1px solid var(--light-gray-color);
border-right: 1px solid var(--light-gray-color);
a {
font-size: 1.3em;
}
}
}
/* Pages */
.page {
width: 100%;
background-color: var(--light-gray-color);
.page__content {
width: 100%;
.page-header {
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
align-items: flex-end;
justify-content: flex-start;
flex-wrap: wrap;
width: 100%;
height: 100%;
position: relative;
.page-header__overlay {
position: absolute;
z-index: 2;
padding: 2rem;
top: 0;
height: 0;
width: 100%;
height: 100%;
background: transparent;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 11%, rgba(0, 0, 0, 0.6194852941176471) 77%);
}
.page-header__content {
position: relative;
z-index: 3;
width: 100%;
max-width: 1200px;
padding: 2rem;
margin: 0 auto;
.page__title {
color: var(--dark-color);
}
#breadcrumbs {
font-weight: 700;
a {
color: var(--primary-color);
text-decoration: none;
}
.breadcrumb_last {
color: var(--light-color);
}
}
#breadcrumbs.primary-color-last .breadcrumb_last {
color: var(--dark-color);
}
}
}
.page__body {
width: 100%;
margin-bottom: 5rem;
.page__content {
background-color: var(--light-color);
box-shadow: 2px 2px 5px var(--light-shadow);
border: 1px solid var(--light-gray-color);
border-radius: 25px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--primary-color);
}
}
}
}
}
.not-found {
width: 100%;
.not-found__content {
width: 100%;
max-width: 1200px;
padding: 2rem;
margin: 0 auto;
color: var(--dark-gray-color);
.not-found__inner {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
.not-found__box {
width: calc(50% - 10px);
}
.not-found__box:first-child {
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
}
}
.wp-pagenavi {
margin: 2rem auto 0;
width: max-content;
transform: scale(1.02);
.pages,
.current,
.page,
.nextpostslink,
.previouspostslink {
border: 2px solid var(--primary-color);
color: var(--primary-color);
}
.pages {
border-radius: 10px 0 0 10px;
}
.current {
background-color: var(--primary-color);
color: var(--light-color);
border-color: var(--primary-color) !important;
}
.page {
background-color: transparent;
}
}
.wp-pagenavi> :last-child {
border-radius: 0 10px 10px 0;
}
/* Estilos de entradas de la categoría "Posters" */
.entry-posters {
width: 100%;
padding: 3.5rem 0;
background-color: color-mix(in srgb, var(--light-gray-color) 80%, white 20%);
}
.entry-posters__content {
width: 100%;
max-width: 1300px;
margin: 0 auto;
border: 1px solid color-mix(in srgb, var(--light-gray-color) 95%, black 5%);
box-shadow: 0 0 10px var(--light-shadow);
background-color: var(--light-color);
}
.posters {
width: 100%;
display: flex;
align-items: stretch;
justify-content: center;
flex-wrap: wrap-reverse;
.posters__h1 {
color: var(--primary-color);
text-transform: uppercase;
padding-left: 1rem;
border-left: 6px solid var(--primary-color);
}
.posters__box {
padding: 1.5rem;
}
.posters__box:first-child {
width: 50%;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.posters__box:last-child {
width: 50%;
}
}
/*
###################################################################################
DEFINICIONES VARIAS
###################################################################################
*/
/* Form Presentación de Posters */
/* Contenedor general del formulario */
.form__posters.wpcf7-form {
margin-top: 15px;
background-color: #ececec;
padding: 30px;
border-radius: 8px;
}
/* Filas de dos columnas */
.form__content-col {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 24px;
}
.form__content-col > .col-sm-6 {
flex: 1 1 calc(50% - 12px);
min-width: 250px;
}
/* Filas de una sola columna */
.form__posters .col-sm-12 {
margin-bottom: 24px;
}
/* Labels */
.form__posters label,
.form__posters .form__content,
.form__posters .form__content-trabajos {
display: block;
font-weight: 700;
color: #4a5568;
margin-bottom: 8px;
font-size: 1rem;
}
/* Inputs, selects, textarea */
.form__posters input[type="text"],
.form__posters input[type="tel"],
.form__posters input[type="email"],
.form__posters select,
.form__posters textarea {
width: 100%;
background-color: #ffffff;
border: none;
border-radius: 6px;
padding: 14px 16px;
font-size: 0.95rem;
color: #333333;
box-sizing: border-box;
}
.form__posters textarea {
min-height: 100px;
resize: vertical;
}
/* Select con flecha personalizada */
.form__posters select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
}
/* Focus */
.form__posters input:focus,
.form__posters select:focus,
.form__posters textarea:focus {
outline: 2px solid var(--terciary-color);
outline-offset: -2px;
}
/* Botón Enviar */
.form__posters input[type="submit"],
.form__posters .wpcf7-submit {
width: 100%;
background-color: var(--terciary-color);
color: #fff;
border: none;
border-radius: 6px;
padding: 14px 28px;
font-weight: 700;
cursor: pointer;
transition: background-color 0.6s ease;
}
.form__posters input[type="submit"]:hover,
.form__posters .wpcf7-submit:hover {
background-color: var(--primary-color);
}
/* Botón Upload */
.form__posters .wpcf7-form-control-wrap input[type="button"].button,
.form__posters #mfcf7_zl_add_file {
width: 100%;
background-color: var(--terciary-color);
color: #ffffff;
border: none;
border-radius: 6px;
padding: 14px 24px;
font-weight: 700;
font-size: 0.95rem;
cursor: pointer;
box-shadow: none;
text-shadow: none;
transition: background-color 0.6s ease;
}
.form__posters .wpcf7-form-control-wrap input[type="button"].button:hover,
.form__posters #mfcf7_zl_add_file:hover {
background-color: var(--primary-color);
}
/*
###################################################################################
DEFINICIONES DE OPTIMIZACIÓN Y ADAPTABILIDAD DEL SITIO EN DIFERENTES PANTALLAS
###################################################################################
*/
@media (width < 1441px) {
.entry {
.entry__content {
max-width: 1024px;
.entry__box:first-child {
.entry__header {
.entry__att-image {
height: calc((1024px - (1024px * 0.4)) / 1.5);
}
}
}
}
}
}
@media (width < 1200px) {
.where {
.where__content {
.where__map {
max-width: 94vw;
max-height: 21.5vw;
.ornament__location-pin {
font-size: 13vw;
max-width: 21vw;
max-height: 22vw;
}
}
}
}
}
@media (max-width: 1099px) {
.main-menu {
display: none;
}
.header__highlight-button.desk {
display: none;
}
.header__mobile-button {
display: block;
}
.entry {
.entry__content {
.entry__box:first-child {
.entry__header {
.entry__att-image {
height: 37vw;
}
}
}
}
}
#beneficios {
.beneficios__content {
.beneficios__group {
justify-content: space-evenly;
}
}
}
.beneficios-item {
margin: 0.5rem;
}
.beneficios-item:first-child {
.beneficios-item__info {
padding-right: 1.5rem;
}
}
.beneficios-item:nth-child(2) {
transform: scale(1);
}
.beneficios-item:last-child {
.beneficios-item__info {
padding-left: 1.5rem;
}
}
.entry-time {
display: none;
}
.entry-speakers {
width: 100% !important;
padding: 0;
margin-bottom: 2rem !important;
}
.entry-excerpt {
width: 100% !important;
padding: 0;
}
}
@media (width < 992px) {}
@media (width < 900px) {
.entry {
.entry__content {
.entry__box:first-child {
width: 100%;
.entry__header {
.entry__att-image {
height: 53vw;
}
}
}
.entry__box:last-child {
width: 100%;
padding-top: 3rem;
border-top: 3px dashed var(--primary-color);
}
}
}
}
@media (width < 768px) {
.congreso-card {
.congreso-card__thumbnail {
display: none;
}
.congreso-card__info {
width: 100%;
padding-bottom: 5rem;
}
}
.activities {
.activities__content {
padding: 1rem 0.5rem;
}
}
.activity-item__time {
left: -6.3rem;
}
.activity-item:hover .activity-item__time {
left: -6.9rem;
}
.activity-item:hover .activity-item__box {
transform: translateX(0.4rem);
}
.activity-item {
.activity-item__box {
h3 {
font-size: 1.3em;
}
}
}
.activity-item__inner:first-child {
span {
font-size: 0.9em;
}
}
}
@media (width < 720px) {
/*
#supports {
.supports__cat {
.supports__title,
.supports__slider {
width: 100%;
margin: 0.5rem;
}
.supports__title {
height: auto;
padding: 1rem;
border-radius: 15px 15px 0 0;
}
.supports__slider {
border-radius: 0 0 15px 15px;
}
}
}*/
.posters {
.posters__box {
width: 100% !important;
}
}
}
@media (width < 620px) {
#countdown {
.countdown__content {
.hurrytimer-campaign.hurrytimer-campaign-14 {
height: 8rem;
}
}
}
.services-menu {
.services-submenu__nav {
.nav {
.nav-link {
width: calc(50% - 1rem);
}
}
}
}
.service-item {
.service-item__image {
width: 200px;
}
.service-item__info {
width: calc(100% - 100px);
p {
-webkit-line-clamp: 3;
line-clamp: 3;
}
}
}
#footer {
.footer__content {
gap: 0;
.footer__inner {
width: 100%;
margin: 1rem 0;
}
}
}
.entry-activity__presidents,
.entry-activity__coordinators {
width: 100% !important;
}
.entry-activity__info-item {
width: 100% !important;
border: none !important;
padding: 0.5rem 0 !important;
display: flex;
align-items: center;
justify-content: flex-start;
h5 {
font-size: 1em;
}
}
}
@media (width < 576px) {
#countdown {
.countdown__content {
.hurrytimer-campaign.hurrytimer-campaign-14 {
height: 10rem;
}
}
}
.congreso__button {
width: 100%;
}
.c-social-media {
display: none;
}
}
@media (width < 512px) {
.activity-item {
.activity-item__box {
h3 {
font-size: 1.15em;
}
}
}
.activity-item__inner:first-child {
span {
font-size: 0.8em;
letter-spacing: auto;
}
}
.activity-item__time {
font-weight: 400;
font-size: 0.9em;
width: 5rem;
height: 2rem;
left: -3.3rem;
transform: rotateZ(270deg);
transform-origin: top;
clip-path: none;
}
.activities__group {
padding-left: 0;
}
.activity-item:hover .activity-item__time {
left: -3.3rem;
}
.activity-item:hover .activity-item__box {
transform: translateX(0);
}
.categories {
padding: 2rem 0.6rem;
}
}
@media (width < 480px) {
.services-menu {
.services-submenu__nav,
.services-menu__nav {
.nav {
.nav-link {
width: calc(100% - 1rem);
}
}
}
}
.service-item {
.service-item__image {
width: 0;
}
.service-item__info {
width: 100%;
}
}
.entry {
padding: 0;
.entry__content {
width: 100%;
max-width: none;
margin: 0;
padding: 1rem;
}
}
.activity-item__button {
display: none;
}
.activity-item__inner:last-child {
display: none;
}
}
@media (width < 400px) {
#countdown {
.countdown__content {
.hurrytimer-campaign.hurrytimer-campaign-14 {
height: 10rem;
}
}
}
}