@font-face {
    font-family: SpeakPro;
    src: url(../fonts/SpeakPro-Light.eot) format('embedded-opentype'), url(../fonts/SpeakPro-Light.eot) format('embedded-opentype'), url(../fonts/SpeakPro-Light.woff2) format('woff2'), url(../fonts/SpeakPro-Light.woff) format('woff'), url(../fonts/SpeakPro-Light.ttf) format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap
  }

  @font-face {
    font-family: SpeakPro;
    src: url(../fonts/SpeakPro-LightItalic.eot) format('embedded-opentype'), url(../fonts/SpeakPro-LightItalic.eot) format('embedded-opentype'), url(../fonts/SpeakPro-LightItalic.woff2) format('woff2'), url(../fonts/SpeakPro-LightItalic.woff) format('woff'), url(../fonts/SpeakPro-LightItalic.ttf) format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap
  }

  @font-face {
    font-family: SpeakPro;
    src: url(../fonts/SpeakPro.eot) format('embedded-opentype'), url(../fonts/SpeakPro.eot) format('embedded-opentype'), url(../fonts/SpeakPro.woff2) format('woff2'), url(../fonts/SpeakPro.woff) format('woff'), url(../fonts/SpeakPro.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap
  }

  @font-face {
    font-family: SpeakPro;
    src: url(../fonts/SpeakPro-Italic.eot) format('embedded-opentype'), url(../fonts/SpeakPro-Italic.eot) format('embedded-opentype'), url(../fonts/SpeakPro-Italic.woff2) format('woff2'), url(../fonts/SpeakPro-Italic.woff) format('woff'), url(../fonts/SpeakPro-Italic.ttf) format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap
  }

  @font-face {
    font-family: SpeakPro;
    src: url(../fonts/SpeakPro-Bold.eot) format('embedded-opentype'), url(../fonts/SpeakPro-Bold.eot) format('embedded-opentype'), url(../fonts/SpeakPro-Bold.woff2) format('woff2'), url(../fonts/SpeakPro-Bold.woff) format('woff'), url(../fonts/SpeakPro-Bold.ttf) format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap
  }

  @font-face {
    font-family: SpeakPro;
    src: url(../fonts/SpeakPro-BoldItalic.eot) format('embedded-opentype'), url(../fonts/SpeakPro-BoldItalic.eot) format('embedded-opentype'), url(../fonts/SpeakPro-BoldItalic.woff2) format('woff2'), url(../fonts/SpeakPro-BoldItalic.woff) format('woff'), url(../fonts/SpeakPro-BoldItalic.ttf) format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap
  }

  @font-face {
    font-family: SpeakPro;
    src: url(../fonts/SpeakPro-Heavy.eot) format('embedded-opentype'), url(../fonts/SpeakPro-Heavy.eot) format('embedded-opentype'), url(../fonts/SpeakPro-Heavy.woff2) format('woff2'), url(../fonts/SpeakPro-Heavy.woff) format('woff'), url(../fonts/SpeakPro-Heavy.ttf) format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap
  }

  @font-face {
    font-family: SpeakPro;
    src: url(../fonts/SpeakPro-HeavyItalic.eot) format('embedded-opentype'), url(../fonts/SpeakPro-HeavyItalic.eot) format('embedded-opentype'), url(../fonts/SpeakPro-HeavyItalic.woff2) format('woff2'), url(../fonts/SpeakPro-HeavyItalic.woff) format('woff'), url(../fonts/SpeakPro-HeavyItalic.ttf) format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap
  }

  @media screen {
    * {
      font-family: SpeakPro
    }
  }

  * {
    margin: 0;
    padding: 0;
    /*box-sizing: border-box;*/
  }

  /*html,*/
  body {
    /*background-color: #0D3E66;*/
    background-color: Black;
    /*background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;*/
    background-image: url(../img/Horizontal/inicio.png);
    background-position: center right;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: auto;
    margin: 0;
    padding: 0;
    top: 0%;
    font-family: SpeakPro;
    font-weight: bold;
  }

  #outer {
    position: relative;
    width: 100%;
    height: 100%;
    background: transparent;
  }

  #outer #container {
    background-color: transparent;
    color: #663399;
    padding: 15px 25px;
    width: 100%;
    max-width: 300px;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
  }

  /* If the screen size is smaller than 1200px, set the font-size to 80px 
  @media (max-width: 1023.98px) {
    .responsive-font-text {
      font-size: 16px;
    }
  }*/


  @media screen and (orientation: portrait) {
    body {
      background-image: url(../img/Vertical/inicio.png);
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;

      background-position-y: top;
      -webkit-background-size: contain;
      -moz-background-size: contain;
      -o-background-size: contain;
      background-size: contain;
    }

  }

  @media screen and (orientation: landscape) {
    body {
      background-image: url(../img/Horizontal/inicio.png);
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;

      background-position-y: top;
      -webkit-background-size: contain;
      -moz-background-size: contain;
      -o-background-size: contain;
      background-size: contain;
    }

  }

  @media screen and (orientation: portrait) and (max-width: 720px) {

    .responsive-font-text {
      font-size: 24px;
      font-weight: 900;
    }

  }

  @media only screen and (orientation: portrait) and (min-width: 900px) {

    .responsive-font-text {
      font-size: 18px;
      font-weight: 900;
    }

    .navbar {
      margin-top: 20px;
    }

  }

  @media only screen and (max-width: 1080px) and (orientation: portrait) {

    .responsive-font-text {
      color: #004D68;
      font-size: 12px;
      /*font-weight: 900;*/
    }

  }

  .logo {
    vertical-align: top;
    align-items: center;
    width: 5vh;
  }

  /* Pantallas Horizontal*/

  @media only screen and (max-width: 1000px) and (orientation: landscape) {

    /*125%*/
    .responsive-font-text {
      color: #004D68;
      /*color: darkorange;*/
      font-size: calc(7px+3vh);
      /*font-weight: 700;*/
      /*margin-top: 1px;*/
      margin-right: 10px;
    }

  }

  @media only screen and (max-width: 1280px) and (orientation: landscape) {
    /*100%*/

    .responsive-font-text {
      color: #004D68;
      /*color: yellow;*/
      font-size: 18px;
      /*calc(12px + 2vh);*/
      /*font-weight: 900;*/
      /*margin-top: 7vh;*/
      /*margin-top: -8px;*/
      margin-right: 10px;
    }


  }

  @media only screen and (min-width: 1280px) and (orientation: landscape) {

    .responsive-font-text {
      color: #004D68;
      /*color: magenta;*/
      font-size: calc(10px + 3vh);
      /*font-weight: 900;*/
      /*margin-top: 9vh;*/
      /*margin-right: 2vh;*/
    }


  }

  @media only screen and (min-width: 1280.01px) and (max-width: 1919px) and (orientation: landscape) {

    /* 67% 80% 90%*/
    .responsive-font-text {
      color: #004D68;
      /*color: green;*/
      font-size: calc(2px + 3vh);
      /*font-weight: 900;*/
      /*margin-top: 7vh;
      margin-right: 1vv;*/
    }

  }


  @media only screen and (min-width: 1920.01px) and (orientation: landscape) {
    /*50%*/

    .responsive-font-text {
      color: #004D68;
      /*color: yellow;*/
      font-size: calc(1px + 3vh);
      /*calc(4px + 2vw);*/
      /*font-weight: 900;*/
      /*margin-top: 7vh;*/

    }







  }

  .img-thumbnail {
    background-color: transparent;
    border: 0px;
  }


  .navbar .navbar-nav .nav-item .nav-link {
    display: block !important;
    padding: 0 0.5em;
  }

  /* Estilos estandarizados para el navbar */
  .custom-navbar {
    margin-top: 6vh;
    margin-right: 15vw; /* Margen estandarizado relativo al ancho para pantallas grandes */
  }

  /* Tablets (Landscape y Portrait grandes) */
  @media screen and (max-width: 1024px) {
    .custom-navbar {
      margin-right: 5vw;
      margin-top: 4vh;
    }
  }

  /* Smartphones (Portrait) */
  @media screen and (max-width: 768px) and (orientation: portrait) {
    .custom-navbar {
      margin-right: 0; /* Sin margen en móviles para aprovechar todo el ancho */
      margin-top: 2vh;
      padding-left: 15px;
      padding-right: 15px;
    }
  }