/* :root { --blue-color: #0C369C; --dark-blue-color: #011F62; --button-color: #1814F3; --grey-highlight: #5E6787; } */ /* background-color: var(--blue-color); */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --blue-color: #0c369c; --dark-blue-color: #011f62; --button-color: #1814f3; --grey-highlight: #433E3F; } body { font-family: "Montserrat", sans-serif; position: relative; } /* Hero Section */ .bg-hero { /*height: 100vh;*/ height: calc(100vh - 47px); min-height: 820px; overflow: hidden; position: relative; } .bg-left { background-color: var(--blue-color); width: 50%; height: 100%; position: absolute; left: 0; } .register_step-1 { display: block; opacity: 1; animation: fade-in 500ms forwards; } .register_step-1.closing { opacity: 0; animation: fade-out 500ms forwards; } .register_step-1.hide { display: none; } .register_step-registered { display: none; } .register_step-error { display: none; } .register_step_error_ticket { display: none; } .register_step-created { display: none; animation: fade-in 500ms forwards; } .register_step-created.show, .register_step-registered.show, .register_step-error.show, .register_step_error_ticket.show { display: flex; flex-direction: column; gap: 2rem; } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } #user_email { color: #c4c4c4; } .hero_right_step_title { font-size: 2rem; color: var(--grey-highlight); font-weight: 700; } .hero_right_step_description_wrapper { padding-top: 23px; } .hero_right_step_description { color: #898989; font-size: 1.5rem; font-weight: 600; } .bg-right { background-color: #F0F3FF; width: 50%; height: 100%; position: absolute; right: 0; } .container { position: relative; height: 100%; margin: 0 auto; } .hero_section_container { height: 100%; display: flex; justify-content: center; } .hero_burguer_wrapper { display: none; } .hero_left_container { width: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100vh; padding-right: 51px; animation: fade-in 500ms forwards; } .hero_items_left_wrapper { position: fixed; } .hero_summitFecha_wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; } .date__image { width: 90px; } .date__text__image { width: 90px; } .hero_summitLogo_wrapper { max-width: 380px; margin: 0 auto; } .hero_summitLogo_wrapper img { width: 100%; } .hero_left_text_wrapper { max-width: 575px; } .hero_left_text { color: white; font-size: 1.25rem; font-weight: 500; text-align: center; text-transform: uppercase; } .hero_right_container { min-height: 63vh; width: 50%; display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; } .hero_right_title_wrapper { max-width: 459px; } .hero_right_title { color: var(--grey-highlight); font-size: 2.375rem; font-weight: 700; line-height: 118%; } .hero_separator_wrapper { max-width: 459px; } .hero_separator { background-color: var(--grey-highlight); height: 1px; width: 100%; max-width: 202px; margin: 0 auto; } .hero_items_wrapper { padding-top: 40px; max-width: 459px; } .hero_list { list-style-type: none; display: flex; row-gap: 25px; flex-direction: column; } .hero_item { display: flex; justify-content: center; flex-direction: row; column-gap: 11px; position: relative; } .hero_item_img_wrapper { width: 32px; } .hero_item_img_wrapper img { width: 100%; width: 32px; } .hero_item_text { font-size: 0.9375rem; font-weight: 400; color: var(--grey-highlight); line-height: 133%; } .hero_separator_small { background-color: var(--grey-highlight); height: 1px; width: 100%; max-width: 96px; margin: 0 auto; position: absolute; text-align: center; top: -5px; display: none; } .language_wrapper_wrapper { position: absolute; z-index: 1; right: 54px; top: 61px; display: flex; column-gap: 5px; transition: right 1s ease; animation: fade-in 500ms forwards; } .language_wrapper_wrapper.hide { right: -50%; } .language_wrapper_wrapper_mobile { display: none; } .language_text { color: #000; font-size: 0.9375rem; line-height: 133%; } .language_text.link { cursor: pointer; } .language_text.selected { font-weight: 600; color: #232233; } .hero_right_extra_wrapper { padding-top: 15px; } .hero_right_extra_wrapper p { color: #000; font-weight: 400; font-size: 0.9rem; line-height: 116%; } .hero_right_extra_wrapper p > span { color: var(--red-color); font-weight: 700; } /* Begin: Form */ .hero_form_wrapper { width: 100%; max-width: 463px; padding-top: 27px; padding-bottom: 40px; } .hero_form { display: flex; justify-content: center; flex-direction: column; } .hero_input:focus { box-shadow: 0 0 0 0.18rem rgba(13, 110, 253, 0.25); transition: all 0.5s ease-in-out; } .hero_input { font-size: 1.125rem; font-family: "Inter", sans-serif; color: var(--grey-highlight); background-color: #FAFBFF ; border: none; padding: 16px; padding-left: 50px; width: 100%; outline: none; box-shadow: 0px 4px 10px 0px #868DAA33; transition: all 0.5s ease-in-out; } .hero_input.error { border: 1px solid #f30000; } .hero_form input::placeholder { color: #2d31a633; } .hero_form_input_wrapper { position: relative; margin-bottom: 10px; width: 100%; } .hero_form_input_img { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); } .hero_form_button:focus { box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .hero_form_button { margin-top: 15px; font-size: 1.25rem; font-weight: 700; padding-top: 18px; padding-bottom: 18px; line-height: 120%; color: white; background-color: #FF7B1C; width: 100%; border: none; border-radius: 10px; cursor: pointer; transition: all 0.5s ease; outline: none; } .hero_form_button.disabled { background-color: #5e6787; pointer-events: none; } .hero_form_button:hover { background-color: #f1741a; transition: all 0.4s; } .hero_input_result { position: absolute; right: 0; top: 50%; transform: translateY(-50%); right: 10px; } .icon_ok, .icon_error, .icon_ok_conf, .icon_error_conf { opacity: 0; } .active { opacity: 1; } /*Begin: Footer */ footer { background-color: var(--dark-blue-color); padding-top: 15px; padding-bottom: 16px; position: relative; } .footer_text { color: white; text-align: center; font-size: 0.8125rem; animation: fade-in 500ms forwards; } /* Begin: Wsp */ .wsp_container { display: flex; justify-content: center; align-items: center; column-gap: 10px; animation: fade-in 500ms forwards; } .wsp_container_two { position: absolute; bottom: 71px; right: 52px; display: flex; justify-content: center; align-items: center; column-gap: 10px; animation: fade-in 500ms forwards; background: #F0F3FF; } .wsp_container > img { width: 48px; height: 48px; } .wsp_link { text-decoration: none; transition: transform 5s ease; } .wsp_link_hide { display: none; } .wsp_img, .wsp_text { transition: transform 0.5s ease, opacity 0.5s ease; } .wsp_link:hover .wsp_text { opacity: 0.8; } .wsp_link:hover .wsp_img { transform: scale(1.1); } .wsp_text { font-size: 1.125rem; color: var(--grey-highlight); font-weight: 700; text-align: center; } .join__button__container { padding-top: 2.5rem; display: flex; flex-direction: column; gap: 2px; display: none; } .join__button__container > a { text-decoration: none; border: none; background-color: #7b177d; border-radius: 5px; padding: 15px 26px; width: 240px; display: flex; justify-content: center; align-items: center; position: relative; color: white; font-family: "Montserrat", sans-serif; font-size: 1.1rem; font-weight: 600; line-height: 19.5px; text-align: center; cursor: pointer; } .join__button__container > a:focus { box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .join__button__container > a > img { position: absolute; top: 50%; left: 86%; transform: translate(-50%, -50%); } .join__button__container > p { font-family: "Montserrat", sans-serif; color: var(--grey-highlight); font-size: 14px; } @media (width > 499px) { .hero_summitFecha_wrapper { padding-top: 26px; padding-bottom: 24px; flex-direction: row; gap: 10px; } .date__image { width: 245px; } .date__text__image { width: 170px; } } @media (width > 768px) { .hero_right_extra_wrapper p { font-size: 1.25rem; line-height: 150%; } } @media (width > 1000px) { /* clase para centrar el contenido en el scroll del lado derecho en diferentes resoluciones*/ .right__center { position: absolute; width: 460px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .hero_right_container { height: 100%; } .hero_left_text { padding-top: 2rem; } .wsp_container { justify-content: flex-end; } .hero_summitFecha_wrapper { padding-top: 46px; padding-bottom: 44px; } } @media (width > 1350px) { .hero_left_container { padding-right: 0px; } } @media (width > 1600px) { .right__center { top: 52%; } } /* Media Queries */ @media screen and (max-width: 1400px) { .hero_left_container { padding-left: 51px; } .hero_items_left_wrapper { padding-left: 51px; padding-right: 51px; } } @media screen and (max-width: 1000px) { .bg-left { display: none; } .bg-right { display: none; } .bg-hero { /*height: 100vh;*/ height: auto; min-height: unset; } .hero_left_container { background-color: var(--blue-color); width: 100%; max-width: none; padding-top: 50px; height: 100%; padding-bottom: 50px; } .hero_items_left_wrapper { padding-left: 0; padding-right: 0; } .hero_items_left_wrapper { position: relative; } .hero_right_container { background-color: #F0F3FF; width: 100%; max-width: none; padding-top: 25px; padding-bottom: 84px; } .hero_section_container { flex-direction: column; } .hero_right_title_wrapper { margin: 0 auto; } .hero_form_wrapper { margin: 0 auto; } .hero_separator_wrapper { max-width: none; } .hero_separator_small { display: none; } .hero_items_wrapper { margin: 0 auto; } .language_wrapper_wrapper { display: none; } .language_wrapper_wrapper_mobile { z-index: 1; display: flex; margin-left: auto; column-gap: 5px; padding-top: 26px; padding-bottom: 26px; } .wsp_container, .wsp_container_two { position: relative; bottom: auto; right: auto; padding-bottom: 50px; } } @media screen and (max-width: 499px) { .navbar_mobile { display: flex; justify-content: space-between; align-items: center; width: 100%; } .hero_burguer_wrapper { cursor: pointer; } .hero_left_text_wrapper { overflow: hidden; padding-top: 0; max-height: 0px; transition: max-height 0.7s ease, padding-top 0.9s ease; } .hero_left_text_wrapper.show { padding-top: 25px; max-height: 300px; } .hero_summitLogo_wrapper { max-width: 124px; margin: inherit; } .hero_left_container { align-items: flex-start; padding: 25px 16px; } .hero_right_container { padding-top: 16px; padding-left: 16px; padding-right: 16px; } .hero_right_title { font-size: 1.25rem; } .hero_form_wrapper { padding-top: 24px; padding-bottom: 36px; } .hero_burguer_wrapper { display: block; } .hero_items_wrapper { padding-top: 36px; } .hero_form_button { margin-top: 22px; font-size: 1rem; } .hero_item_text { font-size: 0.75rem; } .register_step-ok, .register_step-error { padding-top: 36px; } .hero_right_step_title { font-size: 1.25rem; } .hero_right_step_description_wrapper { padding-top: 8px; } .hero_right_step_description { font-size: 1rem; } .wsp_container { padding-bottom: 36px; } .wsp_text { font-size: 0.875rem; } footer p { max-width: 257px; margin: 0 auto; } .hero_items_left_wrapper { display: flex; width: 100%; align-items: center; justify-content: space-between; } .hero_items_left_wrapper { display: flex; width: 100%; align-items: center; justify-content: space-between; } .hero_left_text_wrapper { display: none; } .hero_left_container { padding: 16px 10px; } .hero_summitLogo_wrapper > img { width: 180px; } } @media screen and (max-width: 400px) { .hero_summitLogo_wrapper > img { width: 170px; } } @media screen and (max-width: 320px) { .hero_summitLogo_wrapper > img { width: 120px; } }