/* ///////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////            IMPORTS            /////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////////////// */

  @import url("alerts.css");
  @import url("reset.css");
  @import url("support-classes.css");


  /* ///////////////////////////////////////////////////////////////////////////// */
  /* ///////////////////////////////////////////////////////////////////////////// */
  /* ///////////////////////              VARS             /////////////////////// */
  /* ///////////////////////////////////////////////////////////////////////////// */
  /* ///////////////////////////////////////////////////////////////////////////// */
  :root {

    --title-color: #fff;

    --base-color: #181818;

    --light-base-color: #eaeaea;

    --additional-color: #fec827;
    --additional-color-rgb: 254, 200, 39;

    --second-additional-color: #9b6506;

    --red-color: rgb(221, 51, 56);
    --green-color: rgb(29, 193, 81);

    --text-background: rgba(255,255,255,0.9);

  }

  /* ///////////////////////////////////////////////////////////////////////////// */
  /* ///////////////////////////////////////////////////////////////////////////// */
  /* ////////////////////////            TAGS            ///////////////////////// */
  /* ///////////////////////////////////////////////////////////////////////////// */
  /* ///////////////////////////////////////////////////////////////////////////// */

    a, a:link, a:visited, a:hover, a:active {
      text-decoration: none;
      color: var(--base-color);
    }

    body, html {
      background: white;
      height: 100%;
      width: 100%;
      overflow: hidden;
      -ms-overflow-style: none;
    }
    body h1 {
      color: var(--title-color);
      font-size: calc(15px + 1.5vmin);
      font-family: title_font;
    }
    body h2 {
      color: var(--base-color);
      font-size: calc(15px + 1.5vmin);
      font-family: title_font;
    }
    body h4 { /* Títulos para los menu-layers */
      color: var(--title-color);
      font-size: calc(15px + 1.5vmin);
      font-family: title_font;
      text-transform: uppercase;
    }
    body h5 { /* Títulos blancos en cursiva */
      color: var(--title-color);
      font-size: calc(15px + 2.5vmin);
      font-family: subtitle_italic_font;
      margin-bottom: 25px;
    }
    body p {
      color: var(--base-color);
      font-size: font-size: calc(5px + 1.6vmin);
      font-family: base_font;
    }

    bold_p {
      font-family: bold_paragraph;
    }

  /* ///////////////////////////////////////////////////////////////////////////// */
  /* ///////////////////////////////////////////////////////////////////////////// */
  /* /////////////////////////            IDS            ///////////////////////// */
  /* ///////////////////////////////////////////////////////////////////////////// */
  /* ///////////////////////////////////////////////////////////////////////////// */

  /* ///////////////////////////////////////////////////////////////////////////// */
  /* ///////////////////////////////////////////////////////////////////////////// */
  /* ///////////////////////            CLASSES            /////////////////////// */
  /* ///////////////////////////////////////////////////////////////////////////// */
  /* ///////////////////////////////////////////////////////////////////////////// */

    .diapositive {
      background: white;
      height: 100%;
      width: 100%;
      overflow: hidden;
      display: inline-block;
      float: left;
      position: relative;
      font-family: base_font;
      transition-property: left, opacity;
      transition-duration: 1s, 1s;
      transition-timing-function: ease-in-out, ease-in-out;
    }

    .backward {
      left: 100% !important;
      opacity: 0 !important;
      z-index: initial !important;
      transition-property: left, opacity;
      transition-duration: 1s, 1s;
      transition-delay: 0.8s;
      transition-timing-function: ease-ease-in-out;
    }

    .currentSlide {
      left: 0% !important;
      opacity: 1 !important;
      z-index: 1 !important;
    }

    .advanced {
      left: -100% !important;
      opacity: 0 !important;
      z-index: initial !important;
      transition-property: left, opacity;
      transition-duration: 1s, 1s;
      transition-delay: 0.8s;
      transition-timing-function: ease-ease-in-out;
    }

    #diapositive_1 {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 1;
    }

    .diapositive:not(:first-child) {
      position: absolute;
      left: 100%;
      top: 0;
      opacity: 0;
    }

    .diapositives_wrapper {
      background: white;
      height: 85%;
      overflow: hidden;
      position: relative;
    }

    .diapositive h1 { /* títulos de las portadas y subportadas y subsubportadas */
      color: var(--title-color);
      font-size: calc(10px + 2.5vmin);
      font-family: title_font;
      font-weight: bold;
      margin-bottom: 25px;
    }

    .diapositive h2 { /* Títulos de diapos, encabezados */
      color: var(--base-color);
      font-size: calc(15px + 1.5vmin);
      font-family: subtitle_font;
      margin-bottom: 25px;
      text-transform: uppercase;
    }

    .diapositive h3 {
      color: var(--additional-color);
      font-size: calc(18px + 1.6vmin);
      font-family: title_font;
      line-height: 1.1;
      margin-bottom: 25px;
    }

    .diapositive h4 { /* Títulos de los menu-layers */
      color: var(--title-color);
      /* color: var(--additional-color); */
      font-size: calc(15px + 1.5vmin);
      font-family: title_font;
      margin-bottom: 25px;
    }

    .diapositive h5 { /* Títulos blancos en cursiva */
      color: var(--title-color);
      font-size: calc(15px + 2.5vmin);
      font-family: subtitle_italic_font;
      font-weight: bold;
      margin-bottom: 25px;
    }

    .diapositive h6 {
      color: var(--h6-color);
      margin-bottom: 25px;
    }

    .diapositive p {
      color: var(--base-color);
      font-size: calc(5px + 1.6vmin);
      font-family: base_font;
      line-height: 1.4;
      text-align: left;
      padding-bottom: 20px;
    }

    .diapositive ul:not(.cd-slider) {
      color: var(--base-color);
      width: 90%;
      padding: 10px 30px 0 40px;
      font-family: base_font;
      font-size: calc(5px + 1.6vmin);
      text-align: justify;
      line-height: 1.4;
      margin: auto;
      margin-bottom: 25px;
    }

  /* ///////////////////////////////////////////////////////////////////////////////////////////
   /////////////////////////////////////////////////////////////////////////////////////////////
   ///////////////////////////            NAVIGATION ARROWS            /////////////////////////
   /////////////////////////////////////////////////////////////////////////////////////////////
   ///////////////////////////////////////////////////////////////////////////////////////////// */

    .course_slides_controller {
      background: var(--base-color);
      height: 85%;
      z-index: 1;
      padding: 0;
    }

    .course_navigation_arrows {
      position: absolute;
      color: white;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 5em;
      cursor: pointer;
      stroke: white;
      fill: white;
      width: 7vmin;
    }

    .course_navigation_arrows:hover {
      transform: translate(0%, -50%);
    }

    #left_course_arrow, #right_course_arrow {
      -webkit-transition: all 0.1s ease-in-out;
      -moz-transition: all 0.1s ease-in-out;
      -o-transition: all 0.1s ease-in-out;
      transition: all 0.1s ease-in-out;
    }

    #left_course_arrow:hover {
      transform: translate(-60%,-50%);
    }

    #right_course_arrow:hover {
      transform: translate(-40%,-50%);
    }

  /* /////////////////////////////////////////////////////////////////////////////////////////////
  / /////////////////////////////////////////////////////////////////////////////////////////////
  / /////////////////////////            END NAVIGATION ARROWS            ///////////////////////
  / /////////////////////////////////////////////////////////////////////////////////////////////
  / ///////////////////////////////////////////////////////////////////////////////////////////// */

  /* /////////////////////////////////////////////////////////////////////////////////////////////
  / /////////////////////////////////////////////////////////////////////////////////////////////
  / /////////////////////////            NOTIFICATION ICONS               ///////////////////////
  / /////////////////////////////////////////////////////////////////////////////////////////////
  / ///////////////////////////////////////////////////////////////////////////////////////////// */

    .pulsing_button {
      position: relative;
      color: #fff;
      font-size: calc(20px + 1.2vmin);
      margin: 20px auto;
      box-shadow: 0 0 0 0 rgba(164, 164, 164, 0.7);
      border-radius: 50%;
      background-color: var(--base-color);
      -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
      -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
      -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
      animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    }

    @-webkit-keyframes pulse {
      0% {transform: scale(.7); } 50% {transform: scale(.9); } 100% { transform: scale(.7); box-shadow: 0 0 5px 15px rgba(164,164,164,0);}
    }
    @-moz-keyframes pulse {
      0% {transform: scale(.7); } 50% {transform: scale(.9); } 100% { transform: scale(.7); box-shadow: 0 0 5px 15px rgba(164,164,164,0);}
    }
    @-ms-keyframes pulse {
      0% {transform: scale(.7); } 50% {transform: scale(.9); } 100% { transform: scale(.7); box-shadow: 0 0 5px 15px rgba(164,164,164,0);}
    }
    @keyframes pulse {
      0% {transform: scale(.7); } 50% {transform: scale(.9); } 100% { transform: scale(.7); box-shadow: 0 0 5px 15px rgba(164,164,164,0);}
    }

    .container_warnings {
      height: 40%;
    }

    .container_warnings > span > svg  {
      width: 40px;
      height: 30px;
    }

    .scroll_warning {
      position: absolute;
      bottom: 0;
      left: 46%;
      transform: translateX(-50%);
      margin-bottom: 0;
      z-index: 2;
      color: #000;
      padding: 5px;
      background: rgba(255,255,255,0.5);
      -webkit-animation: pulse 3s infinite cubic-bezier(0.66, 0, 0, 1);
      -moz-animation: pulse 3s infinite cubic-bezier(0.66, 0, 0, 1);
      -ms-animation: pulse 3s infinite cubic-bezier(0.66, 0, 0, 1);
      animation: pulse 3s infinite cubic-bezier(0.66, 0, 0, 1);
      cursor: default;
    }

    .scroll_line {
      width: 1px;
      height: 20px;
      position: absolute !important;
      bottom: -15px;
      background: var(--base-color);
    }

  /* /////////////////////////////////////////////////////////////////////////////////////////////
  / /////////////////////////////////////////////////////////////////////////////////////////////
  / /////////////////////////            END NOTIFICATION ICONS           ///////////////////////
  / /////////////////////////////////////////////////////////////////////////////////////////////
  / ///////////////////////////////////////////////////////////////////////////////////////////// */

  /* /////////////////////////////////////////////////////////////////////////////////////////////
  / /////////////////////////////////////////////////////////////////////////////////////////////
  / /////////////////////////                COLOR CLASSES           ///////////////////////////
  / /////////////////////////////////////////////////////////////////////////////////////////////
  / ///////////////////////////////////////////////////////////////////////////////////////////// */

    .additional_color {
      color: var(--additional-color);
    }

    .base_color {
      color: var(--base-color);
    }

    .background_base_color_important {
      background-color: var(--base-color) !important;
    }

    .background_light_base_color_important {
      background: var(--light-base-color) !important;
    }

    .light_base_color {
      color: var(--light-base-color);
    }

    .title_color {
      color: var(--title-color);
    }


  /* //////////////////////////////////////////////////////////////////////////////////////////////
  / //////////////////////////////////////////////////////////////////////////////////////////////
  / /////////////////////////            END COLORS CLASSES           ///////////////////////////
  / /////////////////////////////////////////////////////////////////////////////////////////////
  / //////////////////////////////////////////////////////////////////////////////////////////// */

    .menu_layer_z-index {
      z-index: initial !important;
    }

    #table {
      width: 100%;
      height: 100%;
      background-color: transparent;
    }

    .hidden {
      display: none;
    }

    .text_background {
      background-color: rgba(255,255,255,0.8);
      background-color: var(--text-background);
      padding: 5px;
    }
    .hyperlink {
      color: var(--additional-color) !important;
      font-weight: bold;
      font-style: italic;
      cursor: pointer;
      overflow-wrap: break-word;
      font-size: calc(5px + 1.3vmin);
    }
    .hyperlink_mirror {
      color: var(--light-base-color) !important;
      font-weight: bold;
      font-style: italic;
      cursor: pointer;
      overflow-wrap: break-word;
      font-size: calc(5px + 1.3vmin);
    }
    .image_link {
      color: var(--additional-color) !important;
      cursor: pointer;
    }
    .resalted_text {
      color: var(--additional-color) !important;
    }
    .lowercase{
     text-transform: lowercase !important;
    }
    .uppercase{
     text-transform: uppercase !important;
    }
    .overflow_hidden_auto {
     overflow-y: auto;
     overflow-x: hidden;
    }
    .overflow_hidden {
     overflow: hidden;
    }
    .active_module_indicator_block {
      background: var(--additional-color) !important;
    }
    .bar1, .bar2, .bar3 {
      width: 40px;
      height: 1px;
      background-color: var(--base-color);
      margin: 8px 0;
      transition: 0.4s;
    }
    .bar1_mobile, .bar2_mobile, .bar3_mobile {
      width: 30px;
      height: 1px;
      background-color: var(--base-color);
      margin: 8px 0;
      transition: 0.4s;
    }

    .change .bar1, .change .bar1_mobile {
      -webkit-transform: rotate(-45deg) translate(-6px, 7px);
      transform: rotate(-45deg) translate(-6px, 7px);
    }
    .change .bar2, .change .bar2_mobile {
      opacity: 0;
    }
    .change .bar3, .change .bar3_mobile {
      -webkit-transform: rotate(45deg) translate(-6px, -7px);
      transform: rotate(45deg) translate(-6px, -7px);
    }

    .cursor_pointer {
      cursor: pointer;
    }

    .diapositives_wrapper {
      background: white;
      height: 85%;
      overflow: hidden;
      position: relative;
    }

    .display_none {
      display: none;
    }

    .flex-container {
      display: table;        /* IE < 10, Opera *Presto* Desktop (Now dead) */
      display: -webkit-box;  /* Safari 3.1 - 6, Chrome < 21 (2009 Spec), UCBrowser Android */
      display: -moz-box;     /* Firefox 2 - 27 (2009 Spec), UCMini Android */
      display: -ms-flexbox;  /* IE10 (2012 Syntax) */
      display: -webkit-flex; /* Safari 6.1 - 8, Android < 4.4, BB < 10, Chrome 21 - 28 */
      display: flex;         /* Edge 12+, Firefox 28+, Blink, Safari 9+, Opera Mini 8+ */
    }
    .flex-container-important {
      display: table !important;        /* IE < 10, Opera *Presto* Desktop (Now dead) */
      display: -webkit-box !important;  /* Safari 3.1 - 6, Chrome < 21 (2009 Spec), UCBrowser Android */
      display: -moz-box !important;     /* Firefox 2 - 27 (2009 Spec), UCMini Android */
      display: -ms-flexbox !important;  /* IE10 (2012 Syntax) */
      display: -webkit-flex !important; /* Safari 6.1 - 8, Android < 4.4, BB < 10, Chrome 21 - 28 */
      display: flex !important;         /* Edge 12+, Firefox 28+, Blink, Safari 9+, Opera Mini 8+ */
    }
    .flex-direction-row {
      flex-direction: row;
      -ws-flex-direction: row;
    }
    .flex-direction-column {
      flex-direction: column;
      -ws-flex-direction: column;
    }
    .justify-content {
      justify-content: center;
      -ms-flex-pack: center;
    }
    .align-items {
      align: items;
      -ms-flex-align: center;
    }

    .footer {
      height: 15%;
      overflow: hidden;
      position: relative;
      width: 100%;
    }

    .footer h2 {
      font-size: 2vw;
      margin: 0;
    }

    .grey_veil {
      background: rgba(0, 0, 0, 0.6);
      width: 100%;
      height: 100%;
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 4;
    }

    .grey_veil_menu {
      background: rgba(0, 0, 0, 0.6);
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 4;
    }

    .logos_column img {
      -moz-transition: all 0.5s ease-in-out 0s;
      -webkit-transition: all 0.5s ease-in-out 0s;
      -o-transition: all 0.5s ease-in-out 0s;
      transition: all 0.5s ease-in-out 0s;
    }

    .logos_column img:hover {
      filter: grayscale(0%) !important;
    }

    .module_indicator_block {
    background: var(--additional-color);
    display: inline-block;
    height: 5px;
    margin: auto;
    margin-bottom: 4vh;
    }

    .module_indicator_block_width_several_modules_main {
      background: var(--additional-color);
      display: inline-block;
      height: 5px;
      margin: auto;
      margin-bottom: 4vh;
    }

    .module_indicator_block_width_several_modules_spares {
      background: var(--additional-color);
      display: inline-block;
      height: 5px;
      margin: auto;
      margin-bottom: 4vh;
    }
    .module_indicator_block_extension_modules {
      background: var(--additional-color);
      display: inline-block;
      height: 5px;
      margin: auto;
      margin-bottom: 4vh;
    }
    .module_indicator_block_extension_modules_mobile {
      background: var(--additional-color);
      display: inline-block;
      height: 5px;
      margin: auto;
      margin-bottom: 4vh;
    }
    .module_indicator_block_extension_modules_spares {
      background: var(--additional-color);
      display: inline-block;
      height: 5px;
      margin: auto;
      margin-bottom: 4vh;
    }
    .module_indicator_block_extension_modules_spares_mobile {
      background: var(--additional-color);
      display: inline-block;
      height: 5px;
      margin: auto;
      margin-bottom: 4vh;
    }
    .progress_bar {
      background: var(--base-color);
      position: relative;
      font-size: 1vw;
      margin-bottom: 4vh;
      height: 5px;
      float: left;
      z-index: 2;
      -webkit-transition: all 0.5s linear;
      transition: all 0.5s linear;
    }
    .input_this_text {
      -webkit-transition: all 0.5s linear;
      transition: all 0.5s linear;
    }

    .video_mac {
      padding-top: 70px;
    }

    video:-webkit-full-screen {
      transform: none;
    }

    /* ///////////////////////////////////////////////////////////////////////////// */
    /* ///////////////////////////////////////////////////////////////////////////// */
    /* ////////////////////            MEDIA QUERIES            //////////////////// */
    /* ///////////////////////////////////////////////////////////////////////////// */
    /* ///////////////////////////////////////////////////////////////////////////// */

    /* ---------- XS DEVICES ---------- */

    @media screen and (max-width: 576px) {

      .laptop_image_properties {
        top: 0 !important;
      }

      .header_logo_wrapper {
        padding: 5px;
        text-align: center;
      }

      .diapositives_wrapper {
        height: 70%;
      }

      .popup_wrapper {
        width: 90%;
      }

      .diapositive {
        overflow-y: auto;
      }

    }


    /* -------- CUSTOM WIDTHS --------- */


    @media screen and (max-width: 450px) {

      .diapositive p {
        font-size: 4.5vw;
      }
      .diapositive ul {
        font-size: 4.5vw;
      }

    }


  /* ///////////////////////////////////////////////////////////////////////////// */
  /* ///////////////////////////////////////////////////////////////////////////// */
  /* ////////////////////////            FONTS            //////////////////////// */
  /* ///////////////////////////////////////////////////////////////////////////// */
  /* ///////////////////////////////////////////////////////////////////////////// */

    @font-face {
      font-family: title_font;
      src: url('../fonts/BarlowCondensed-Medium.ttf') format('truetype');
    }

    @font-face {
      font-family: subtitle_font;
      src: url('../fonts/BarlowCondensed-Regular.ttf') format('truetype');
    }

    @font-face {
      font-family: subtitle_italic_font;
      src: url('../fonts/Raleway-BoldItalic.ttf') format('truetype');
    }

    @font-face {
      font-family: base_font;
      src: url('../fonts/Raleway-Regular.ttf') format('truetype');
    }

    @font-face {
      font-family: bold_paragraph;
      src: url('../fonts/Raleway-Bold.ttf') format('truetype');
    }

    @font-face {
      font-family: slender_font;
      src: url('../fonts/BarlowCondensed-Light.ttf') format('truetype');
    }

    @font-face {
      font-family: base_font_medium;
      src: url('../fonts/Raleway-Medium.ttf') format('truetype');
    }