@import url(variables.css?version=1.0.1.2);
@import url(about.css?version=1.0.1.4);
@import url(wcce2024.css?version=1.0.1.1);
@import url(news.css?version=1.0.1.1);
@import url(contact.css?version=1.0.1.4);
@import url(organiser.css?version=1.0.1.1);
@import url(agenda.css?version=1.0.1.3);
@import url(speaker.css?version=1.0.1.6);
@import url(programme.css?version=1.0.1.12);


.social_media_links a svg {
      vertical-align: bottom;
}

*, *::after, *::before {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
}

@font-face {
      font-family: "BBRollerMonoProST-SemiLight";
      src: url("/wcce/fonts/BB_Roller/BBRollerMonoProST-SemiLight.ttf");
      font-weight: 350;
      font-style: normal;
      font-display: fallback;
}
@font-face {
      font-family: "BBRollerMonoProST-Regular";
      src: url("/wcce/fonts/BB_Roller/BBRollerMonoProST-Regular.ttf");
      font-weight: 400;
      font-style: normal;
      font-display: fallback;
}
@font-face {
      font-family: "BBRollerMonoProST-Medium";
      src: url("/wcce/fonts/BB_Roller/BBRollerMonoProST-Medium.ttf");
      font-weight: 500;
      font-style: normal;
      font-display: fallback;
}
@font-face {
      font-family: "BBRollerMonoProST-SemiBold";
      src: url("/wcce/fonts/BB_Roller/BBRollerMonoProST-SemiBold.ttf");
      font-weight: 600;
      font-style: normal;
      font-display: fallback;
}
@font-face {
      font-family: "GTEestiDisplayTrial-Light";
      src: url("/wcce/fonts/GT-Eesti/GT-Eesti-Text-Light-Trial.otf");
      font-weight: 300;
      font-style: normal;
      font-display: fallback;
}
@font-face {
      font-family: "GTEestiDisplayTrial-Regular";
      src: url("/wcce/fonts/GT-Eesti/GT-Eesti-Text-Regular-Trial.otf");
      font-weight: 400;
      font-style: normal;
      font-display: fallback;
}
@font-face {
      font-family: "GTEestiDisplayTrial-Medium";
      src: url("/wcce/fonts/GT-Eesti/GT-Eesti-Text-Medium-Trial.otf");
      font-weight: 500;
      font-style: normal;
      font-display: fallback;
}
@font-face {
      font-family: "GTEestiDisplayTrial-Bold";
      src: url("/wcce/fonts/GT-Eesti/GT-Eesti-Text-Bold-Trial.otf");
      font-weight: 700;
      font-style: normal;
      font-display: fallback;
}


body {
      height: 100vh;
      font-family: "BBRollerMonoProST-Regular";
      line-height: 1.6;
      overflow-x: hidden;
      color: var(--Black);
      overscroll-behavior: none;
}

.wrapper-section
{
      display: flex;
      background: linear-gradient(180deg, #d9d9d9 30%, #fac18a 100%);
      /*background: linear-gradient(180deg, #D9D9D9 33.94%, #FFFCB2 99.76%);*/
      box-shadow: -5px 0px 20px 0px rgba(0, 0, 0, 0.15);
      overflow: hidden;
}

.main {
      width: calc(100% - 80px);
      min-height: 100vh;
      transition: all 0.5s ease-in-out;
      transform: translateY(100%);
      overflow: hidden;
}

.main.animate
{
      transform: translateY(0);
}

#loading-spinner {
      width: 300px;
      height: 300px;
      margin-top: 200px;
      margin-left: auto;
      margin-right: auto;
}
.main .main-container{
      /*position: relative;*/
      height: 100vh;
      background-image: url("/wcce/images/back_img_en.svg");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 90%;
      /*z-index: 5;*/
}

.main .logo_wrapper
{
      position: absolute;
      left: 2rem;
      bottom: 3rem;
}

.main .logo_wrapper img
{
      width: 280px;
}

.main .conference_name
{
      color: #000;
      font-family: 'BBRollerMonoProST-SemiLight';
      font-size: 70px;
      font-weight: bold;
      line-height: 70px;
      letter-spacing: 7.44px;
}

.main .conference_detail
{
      color: #000;
      font-family: 'BBRollerMonoProST-Regular';
      font-size: 24px;
      font-style: normal;
      font-weight: 400;
      line-height: 30px;
      letter-spacing: 1.12px;
}

.reg_button_container
{
      position: absolute;
      top: 20%;
      right: -40%;
      animation-name: animation_for_reg_button;
      animation-delay: 11s;
      animation-duration: 1s;
      -webkit-animation-fill-mode:forwards;
      animation-fill-mode:forwards;
}

@keyframes animation_for_reg_button {
      from {
            right: -40%;
      }
      to {
            right: 10%;
      }
}

.main .reg_button_for_session
{
      font-family: "BBRollerMonoProST-Medium";
      border-radius: 20px;
      background-color: #fd5d52;
      color: #000;
      text-decoration: none;
      transition: all 0.5s ease;
}

.main .reg_button_for_session:hover
{
      background-color: #e34e43;
}

/*.right-aside {*/
/*      position: fixed;*/
/*      right: 0;*/
/*      width: 80px;*/
/*      min-height: 100vh;*/
/*      box-shadow: -5px 0px 20px 0px rgba(0, 0, 0, 0.15);*/
/*      display: flex;*/
/*      flex-direction: column;*/
/*      justify-content: space-between;*/
/*      background: linear-gradient(180deg, #D9D9D9 33.94%, #FFFCB2 99.76%);*/
/*      box-shadow: -5px 0px 20px 0px rgba(0, 0, 0, 0.15);*/
/*      z-index: 10;*/
/*      transition: all 0.4s ease;*/
/*}*/

.toggle-sidebar
{
      /*border: 2px solid #000;*/
      border-radius: 50%;
      line-height: 35px;
      width: 35px;
      height: 35px;
      transition: all .4s ease;
      margin: 0.5rem auto;
}

.toggle-sidebar.active
{
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      transform: rotate(180deg);
}


.right-aside {
      position: fixed;
      right: 0;
      width: 80px;
      min-height: 100vh;
      transition: all 0.5s ease;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: linear-gradient(180deg, #d9d9d9 30%, #fac18a 100%);
      box-shadow: -5px 0px 20px 0px rgba(0, 0, 0, 0.15);
      overflow-y: auto;
}
.right-aside-home {
      position: fixed;
      right: -80px;
      width: 80px;
      min-height: 100vh;
      transition: all 0.5s ease;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: none;
      box-shadow: none;
      animation-name: example;
      /*animation-delay: 110s;*/
      animation-duration: 0.5s;
      -webkit-animation-fill-mode:forwards;
      animation-fill-mode:forwards;
}

@keyframes example {
      from {
            right: -80px;
      }
      to {
            right: 0;
            background: linear-gradient(180deg, #d9d9d9 30%, #fac18a 100%);
            box-shadow: -5px 0px 20px 0px rgba(0, 0, 0, 0.15);
      }
}

.right-aside.menu_opened
{
      width: 100%;
      height: 100vh;
      padding: 30px;
}

.main:has( + .right-aside.hoverable:hover)
{
      filter: blur(102px);
}

.main:has( + .right-aside.menu_opened)
{
      display: none;
}

.right-aside.hoverable{
      /*transition: width 0.5s ease;*/
}

.right-aside.hoverable:hover
{
      width: 20%;
}

.right-aside.hoverable:hover .nav-link,
.right-aside.menu_opened .nav-link
{
      text-align: start;
}

.right-aside:hover .toggle-sidebar
{
      margin: 0.5rem 1rem;
}

.right-aside.hoverable:hover .nav_link_name,
.right-aside.menu_opened .nav_link_name
{
      display: inline-block;
}

.right-aside.hoverable:hover .nav .mobile_language_items {
      text-align: left;
}

.right-aside.hoverable:hover .nav .mobile_language_items .slash_sign
{
      display: inline-block !important;
}

.right-aside.hoverable:hover .nav .mobile_language_items a {
      display: inline-block !important;
      padding-right: 10px;
      padding-left: 10px;
}

.right-aside.menu_opened .nav .mobile_language_items
{
      text-align: left;
}

.right-aside.menu_opened .nav .mobile_language_items .slash_sign
{
      display: inline-block !important;
}

.right-aside.menu_opened .nav .mobile_language_items a
{
      display: inline-block !important;
      padding-right: 10px;
      padding-left: 10px;
}

.right-aside.hoverable:hover .social_links,
.right-aside.menu_opened .social_links
{
      display: block;
      margin-bottom: 100px;
}

.right-aside .nav_link_circle
{
      display: inline-block;
      width: 35px;
      height: 35px;
      border: 2px solid var(--Black);
      border-radius: 50%;
}
.right-aside.hoverable:hover .nav_link_circle,
.right-aside.menu_opened .nav_link_circle
{
      margin-right: 10px;
}

.right-aside .nav_link_name
{
      display: none;
      color: var(--Black);
      font-size: 21px;
      font-style: normal;
      font-weight: 400;
      line-height: 21px;
      letter-spacing: 0;
}

.right-aside .nav-link
{
      display: inline-block;
      vertical-align: middle;
      text-align: center;
}

.right-aside .nav-link:hover .nav_link_circle,
.right-aside .nav a.active .nav_link_circle
{
      background-color: var(--Red);
      border-color: var(--Red);
}

.right-aside .nav-link span
{
      vertical-align: middle;
}

.right-aside .social_links
{
      display: none;
}
.social_media_links a {
      display: inline-block;
      background: #000;
      border-radius: 50%;
      width: 35px;
      height: 35px;
      vertical-align: middle;
      text-align: center;
      margin-top: auto;
      margin-bottom: auto;
      color: antiquewhite;
      margin-right: 10px;
}

 .email a{
      color: var(--Black);
      text-decoration-line: underline;
}

.email a,
.organisers_block h3,
.partners_block h3
{
      font-size: 21px;
      font-style: normal;
      font-weight: 400;
      line-height: 32px;
      letter-spacing: 0;
}


.organisers_block a,
.partners_block a
{
      display: inline-block;
      margin: 10px;
      transition: all 0.5s ease;
}

.organisers_block img,
.partners_block img
{
      height: 55px;
}

/* Animation PopUp */
.animation_container{
      width: 100vw !important;
      height: 100vh !important;
}
.animation_container img
{
      /* display: none; */
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      /*width: 100vw !important;*/
      height: 100vh;
      z-index: 100;
}
/* Animation PopUp */

/*Pagination styles*/
.pagination1 {
      margin-top: 80px;
      text-align: center;
}

.pagination1 ul {
      padding: 0;
      margin: 0;
}

.pagination1 ul li {
      display: inline-block;
      vertical-align: middle;
      *vertical-align: auto;
      *zoom: 1;
      *display: inline;
      margin: 0 7px;
      font-size: 17px;
      list-style: none;
}

.pagination1 ul li::before {
      content: '';
}

.pagination1 ul li a {
      display: block;
      text-decoration: none;
      padding: 0 3px;
      border-bottom: 2px solid transparent;
      color: inherit;
}

.pagination1 ul li a:hover {
      text-decoration: none;
}

.pagination1 ul li.active a {
      border-color: #0C2b3E
}
/*Pagination styles*/

/*Pop up section*/

.modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      display: none;
      align-items: center;
      justify-content: center;
}

.modal .close_btn
{
      position: absolute;
      top: 0;
      right: 10px;
      color: #fe0606;
      font-size: 30px;
      text-decoration: none;
}

.content {
      width: 50%;
      height: 40vh;
      position: relative;
      background: white;
      padding: 1em 2em;
      border-radius: 4px;
      background-image: url("/wcce/images/popup_background.png");
      background-repeat: no-repeat;
      background-size: cover;
}

.content .reg_name
{
      font-family: "BBRollerMonoProST-SemiBold";
      position: absolute;
      font-size: 18px;
      top: 15px;
      left: 15px;
}

.content .reg_acdf_logo
{
      position: absolute;
      right: 40px;
      top: 15px;
}

.content .reg_acdf_logo img
{
      width: 100px;
}

.content .reg_location
{
      position: absolute;
      left: 15px;
      bottom: 15px;
      font-family: 'BBRollerMonoProST-SemiBold';
}

.content .reg_location h1
{
      margin: 0;
      font-size: 18px;
}

.content .reg_location p{
      margin: 0;
      font-size: 12px;
      line-height: 1;
}

.content .reg_button_wrapper
{
      position: absolute;
      right: 15px;
      bottom: 15px;
}

.content .reg_button_wrapper .reg_button_for_session
{
      font-size: 12px;
}

.reg_form_section_title
{
      font-family: "BBRollerMonoProST-Regular";
      font-weight: 400;
      font-size: 30px;
      color: var(--Black);
}


/*End Pop up section*/
/* CUSTOM WIDTHS */
.w-100, .w-xs-100 { width: 100%!important; }
.w-75, .w-xs-75 { width: 75%!important; }
.w-50, .w-xs-50 { width: 50%!important; }

.vh-100, .vh-xs-100 { height: 100vh !important; }
.vh-75, .vh-xs-75 { height: 75vh !important; }
.vh-80, .vh-xs-80 { height: 80vh !important; }
.vh-none {height: none !important;}

@media screen and (min-width: 2200px) {
      .main .main-container {
            background-size: 85%;
      }
}
/* CUSTOM WIDTHS */

@media screen and (max-width: 1600px) {
      .right-aside.hoverable:hover
      {
            width: 30%;
      }
}

@media screen and (max-width: 1400px) {
      .right-aside.hoverable:hover
      {
            width: 35%;
      }
}

@media screen and (max-width: 1200px) {
      .main .conference_name {
            font-size: 85px;
            line-height: 85px;
      }

      .main .conference_detail {
            font-size: 20px;
            line-height: 25px;
            letter-spacing: 2.12px;
        }

      .right-aside.hoverable:hover
      {
            width: 40%;
      }
}

@media screen and (max-width: 992px) {
      .main{
            width: 90%;
      }

      .main .conference_name {
            font-size: 75px;
            line-height: 75px;
            letter-spacing: 3.44px;
      }

      .main .conference_detail {
            font-size: 20px;
            line-height: 25px;
            letter-spacing: 2.12px;
        }

      .right-aside
      {
            width: 10%;
      }
      .agenda_right_arrow
      {
            display: none;
      }
      .new_title {
            font-size: 45px;
            line-height: 50px;
      }

}

@media screen and (max-width: 768px) {
      .animation_container img {
            /*content: url("/wcce/images/animations/compressed/WCCE_Teaser_9x19_5.gif");*/
      }
      #loading-spinner {
            width: 200px;
            height: 200px;
      }
      .main .main-container{
            /*height: 76%;*/
            background-image: url("/wcce/images/back_img_mobile.svg");
            background-size: 80%;
            background-position-x: center;
            background-position-y: 40px;
      }
      .right-aside.menu_opened {
            padding: 20px;
      }
      .menu_opened .toggle-sidebar
      {
            margin: 0.2rem !important;
      }
      .reg_button_container {
            top: 10%;
            right: -90%;
      }
      .page_title {
            font-size: 41px;
            line-height: 44px;
            letter-spacing: 4.92px;
            margin-top: 10px;
      }

      .page_description {
            font-size: 16px;
            line-height: 20px; /* 125% */
            letter-spacing: 1.92px;
      }

      .wcce_event_number span:first-child {
            width: 50px;
            height: 50px;
            font-size: 28px;
            line-height: 55px;
        }

      .wcce_event_year_location {
            font-size: 26px;
            line-height: 30px;
            letter-spacing: 3.12px;
      }

      .wcce_event_theme p:first-child {
            font-size: 14px;
            line-height: 20px;
            letter-spacing: 1.68px;
      }

      .wcce_event_theme p:nth-child(2) {
            font-size: 18px;
            line-height: 20px;
            letter-spacing: 2.16px;
      }

      .wcce_event_participants {
            font-size: 16px;
            line-height: 20px;
            letter-spacing: 1.92px;
      }

      .wcce_event_participants .red_circle {
            width: 15px;
            height: 15px;
            margin-right: 8px;
        }

      .inner_header p.wcce_event_date
      {
            font-size: 10px;
            line-height: 12px;
            letter-spacing: 1.2px;
      }

      .right-aside:hover
      {

      }

      .right-aside .nav_link_circle {
            width: 28px;
            height: 28px;
      }
      .right-aside .nav-link {
            padding: 0.5rem 0.5rem;
      }
      .right-aside .nav_link_name
      {
            font-size: 20px;
            line-height: normal;
            letter-spacing: 0.35px;
      }

      .email a {
            font-size: 20px;
            line-height: 24px;
            letter-spacing: 2.12px;
            text-decoration-line: none;
      }

      .organisers_wrapper h3
      {
            font-size: 20px;
            line-height: 24px;
            letter-spacing: 2.12px;
      }

      .organisers_block a,
      .partners_block a
      {
            margin: 5px;
      }

      .organisers_block img
      {
            height: 50px;
      }
      .partners_block img
      {
            height: 35px !important;
            height: 35px !important;
      }

      .organiser .organiser_name {
            font-size: 16px;
            line-height: 20px;
            letter-spacing: 1.92px;
      }

      .organiser .organiser_desc
      {
            font-size: 16px;
            line-height: 20px;
            letter-spacing: 1.92px;
      }

      .organiser .organiser_site
      {
            font-size: 15px;
            line-height: 16px;
            letter-spacing: 1.12px;
      }

      .organiser .org_body_toggle::after {
            top: 17px;
            left: 5px;
        }

      .main .conference_name {
            font-weight: bold;
            font-size: 32.5px;
            line-height: 34px;
            letter-spacing: 4.55px;
      }

      .main .conference_detail {
            font-size: 17px;
            line-height: 20px;
            letter-spacing: 2.04px;
        }

      .main .reg_button_for_session
      {
            font-size: 12px;
      }

      .sub_themes,
      .theme_title h4 {
            font-size: 26px;
            line-height: 32px;
            letter-spacing: 3.12px;
      }

      .theme_description {
            font-size: 16px;
            line-height: 20px;
            letter-spacing: 1.92px;
      }

      .agenda_body
      {
            width: 90%;
            height: 100%;
      }

      .agenda_status {
            font-size: 22px;
            line-height: 40px;
            letter-spacing: 2.64px;
        }

      .agenda_list ul li {
            font-size: 16px;
            line-height: 20px;
            letter-spacing: 1.92px;
      }

      .contact_info, .address_info {
            font-size: 16px;
            line-height: 20px;
            letter-spacing: 1.92px;
        }

        .follow_us,
        .newsletter_message {
            font-size: 16px;
            line-height: 20px;
            letter-spacing: 1.92px;
        }

        .contact-form input, .contact-form textarea {
            padding: 0.5rem 0.5rem;
            font-size: 1rem;
        }

        input[type="submit"],
        .btn_more{
            padding: 8px 24px !important;
            line-height: 24px !important;
        }
      .new_content {
            font-size: 22px;
            line-height: 28px;
            letter-spacing: 1.12px;
      }
      .contact_success_text p
      {
            font-size: 30px;
            line-height: 38px;
            letter-spacing: 3.12px;
      }

      .content
      {
            width: 90%;
            height: 65vh;
      }

      .content .reg_acdf_logo
      {
            display: none;
      }

      .content .reg_location
      {
            bottom: 50%;
      }

      .content .reg_button_wrapper
      {
            right: 40px;
            bottom: 40px;
      }

}

@media screen and (max-width: 576px) {
      .main{
            width: 85%;
      }

      .right-aside
      {
            width: 15%;
      }

      .page_title {
            font-size: 25px;
            line-height: 32px;
      }

      .organiser .organiser_logo
      {
            width: 200px;
      }
      .agenda_status {
            font-size: 22px;
            line-height: 24px;
            letter-spacing: 2.64px;
        }
      .new_title {
            font-size: 32px;
            line-height: 32px;
            letter-spacing: 0.52px;
      }
      .contact_success_text p
      {
            font-size: 24px;
            line-height: 28px;
            letter-spacing: 1.12px;
      }
}

@media screen and (max-width: 320px) {
      .page_title {
            font-size: 25px;
      }

      .main .conference_name {
            font-size: 25px;
            line-height: 25px;
            letter-spacing: 2.55px;
      }

      .main .conference_detail {
            font-size: 12px;
            line-height: 15px; /* 117.647% */
            letter-spacing: 1.04px;
        }

      .sub_themes, .theme_title h4 {
            font-size: 20px;
            line-height: 25px;
        }
      .agenda_status {
            font-size: 13px;
            line-height: 18px;
        }
}

/* BREAKPOINTS */

/* SM breakpoint */
@media (min-width: 576px) {
      .container {
            max-width: 100%;
      }

      .w-sm-100 { width: 100%!important; }
      .w-sm-75 { width: 75%!important; }
      .w-sm-50 { width: 50%!important; }

      .vh-sm-100 { height: 100vh !important; }
  }

  /* MD breakpoint*/
  @media (min-width: 768px) {
      .container {
            max-width: 100%;
        }

      .w-md-100 { width: 100%!important; }
      .w-md-75 { width: 75%!important; }
      .w-md-50 { width: 50%!important; }

      .vh-md-100 { height: 100vh !important; }
  }

  /* LG breakpoint */
  @media (min-width: 992px) {
      .container {
            max-width: 100%;
      }
      .w-lg-100 { width: 100%!important; }
      .w-lg-75 { width: 75%!important; }
      .w-lg-50 { width: 50%!important; }

      .vh-lg-100 { height: 100vh !important; }
  }

  @media (min-width: 1200px){
      .container {
            max-width: 100%;
      }

}