/*
Theme Name:   Hello Elementor Plataforma E-learning (viva!)
Theme URI:    https://www.vivaconversion.com/
Author:       Ivan
Author URI:   https://www.vivaconversion.com/
Template:     hello-elementor
Version:      1.0.0
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Description: A lightweight, plain-vanilla, best suited for building your site using Elementor website builder. Visit https://elementor.com/hello-theme/ to learn more.
Tags: accessibility-ready, flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready,
Text Domain:  hello-elementor-plataforma_e-learning
*/

/* ========================================
   CUSTOM FONTS
======================================== */
@font-face {
  font-family: 'Futura Std';
  src: url('../fonts/Futura-Std-Medium.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Futura Std';
  src: url('../fonts/FuturaStd-Light.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Times New Roman';
  src: url('../fonts/Times-New-Roman-Italic.woff') format('woff');
  font-weight: 100;
  font-style: italic;
}

/* ========================================
   CSS CUSTOM PROPERTIES (VARIABLES)
======================================== */
:root {
  /* Layout */
  --contain: 1080px;
  --border-radius: 5px;
  --transition-speed: 0.5s;
  --z-index-header: 999999;
  --z-index-popup: 99999999999;
  
  /* Colors */
  --background-1: #68686B;
  --background-2: #f7f6f6;
  --background-3: #1B1B1B;
  --color-1: #535353;
  --color-2: #434343;
  --color-3: #6d6e71;
  --white: #ffffff;
  --black: #000000;
  --success-color: #28a745;
  --error-color: #dc3545;
  --warning-color: #ffc107;
  
  /* Typography - Desktop defaults */
  --display-font: 46px;
  --display-line-height: 54px;
  --encabezado-font: 34px;
  --encabezado-line-height: 42px;
  --titulo-font: 22px;
  --titulo-line-height: 32px;
  --subencabezado-font: 16px;
  --subencabezado-line-height: 24px;
  --cuerpo-texto-font: 14px;
  --cuerpo-texto-line-height: 22px;
  --pie-foto-font: 12px;
  --pie-foto-line-height: 18px;
  
  /* Spacing */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 25px;
  --spacing-xl: 45px;
  
  /* Components */
  --button-padding: 5px 30px;
  --input-border-radius: 0px;
  
  /* LearnPress */
  --lp-primary-color: var(--color-1) !important;
  --lp-secondary-color: var(--background-2) !important;
}

/* ========================================
   GLOBAL STYLES
======================================== */
html,
body {
  margin: 0;
  padding: 0;
}

p {
  color: var(--color-1) !important;
}

::selection {
  background: var(--background-1) !important;
  color: var(--white) !important;
}

.display-none {
  display: none !important;
}

/* ========================================
   HEADER STYLES
======================================== */
header {
  margin: 0;
  padding: 0;
}

header.site-header {
  transition: var(--transition-speed);
  position: relative;
  z-index: var(--z-index-header);
  width: 100% !important;
}

header.site-header.movement {
  position: fixed;
  top: 0;
  left: 0;
  animation: headerFixed var(--transition-speed) linear forwards;
}

header.site-header .header-1 {
  background: var(--background-1);
  display: flex;
  height: 60px;
}

.header-1 > * {
  float: left;
  width: calc(100% / 3);
  margin: auto 0;
}

.header-1,
.header-2 {
  float: left;
  width: 100%;
}

.header-2 {
  border-bottom: 1px solid #b5b5b5;
  background: var(--white);
}

/* Header Components */
.header-language > #sidebar_wpml {
  padding-left: var(--spacing-md);
}

.header-icon > *:last-child {
  padding-right: var(--spacing-md);
}

.header-language ul > li > a,
.header-icon a {
  color: var(--white);
  padding: 0 !important;
}

.header-language ul > li > a {
  font-size: var(--pie-foto-font);
  line-height: var(--pie-foto-font);
}

.header-icon a {
  font-size: var(--cuerpo-texto-font);
  line-height: var(--cuerpo-texto-line-height);
}

.header-logo img {
  width: 275px;
  max-height: initial !important;
}

.header-logo aside,
.header-logo aside > a {
  display: flex;
  margin: 0 auto;
}

/* Navigation */
.gracias-acceder {
  font-size: var(--subencabezado-font) !important;
  line-height: var(--subencabezado-line-height) !important;
}

.iconos-header-right {
  width: max-content;
  float: right;
}

.header-language .wpml-ls-sidebars-sidebar_wpml {
  margin: 0 !important;
  padding: 0 !important;
}

.header-language .wpml-ls-sidebars-sidebar_wpml > ul {
  display: flex;
}

.header-language .wpml-ls-item:not(:last-child) {
  padding-right: var(--spacing-sm);
  margin-right: var(--spacing-sm);
  border-right: 1px solid var(--white);
}

.primary-menu {
  display: flex;
}

.primary-menu > * {
  display: flex;
  margin: 0 auto;
}

.primary-menu a {
  text-transform: uppercase;
  font-weight: lighter !important;
  font-size: var(--pie-foto-font);
  line-height: var(--pie-foto-font);
}

.header-2 .primary-menu .menu-item {
  margin: 0 7.5px;
  font-size: var(--cuerpo-texto-font);
  line-height: var(--cuerpo-texto-font);
  padding: 7px !important;
}

/* ========================================
   FOOTER STYLES
======================================== */
.site-footer > * {
  float: left;
  width: 100%;
}

.site-footer > .site-info {
  background: var(--background-3);
  padding-top: 70px;
  padding-bottom: var(--spacing-xl);
}

.site-footer > .footer-container-last {
  background: var(--black);
  padding: var(--spacing-md) 0;
}

.site-footer * {
  color: var(--white);
}

.site-info ul {
  margin: 0;
  list-style: none;
  text-align: left;
}

.site-info .widget-title {
  text-align: left;
  text-transform: uppercase;
  font-weight: bold;
  font-size: var(--titulo-font);
  line-height: var(--titulo-line-height);
  margin-bottom: var(--spacing-sm);
  color: var(--white) !important;
}

.widget-footer-5 p {
  margin-bottom: 0 !important;
}

/* ========================================
   COMPONENTS
======================================== */
.lp-modal-dialog .lp-modal-header {
  background: var(--background-1) !important;
}

.submit-quiz button.lp-button {
  background: var(--white) !important;
  font-size: var(--cuerpo-texto-font) !important;
  line-height: var(--cuerpo-texto-font) !important;
}

#popup-course #popup-sidebar .search-course button {
  box-shadow: none !important;
}

.course-summary-content * {
  color: var(--color-1) !important;
}

.lp-modal-body > .main-content {
  margin-top: var(--spacing-sm);
}

.quiz-status * {
  color: var(--white) !important;
}

div.quiz-status div.countdown * {
  color: var(--color-1) !important;
}

/* ========================================
   POST STYLES
======================================== */
.post-template-default .post .title {
  font-style: italic !important;
  color: var(--color-3) !important;
  font-size: var(--display-font);
  line-height: var(--display-line-height);
}

.post-template-default .post .post-image {
  display: flex;
  margin-top: 30px;
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--background-1);
}

.post-template-default .post .post-image img {
  margin: 0 auto;
  max-width: 100%;
}

.post-template-default .post .the-content {
  margin-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--background-1);
}

.post-template-default .post .the-content p {
  font-size: var(--cuerpo-texto-font);
  line-height: var(--cuerpo-texto-line-height);
  font-weight: lighter !important;
}

.single-post article.post {
  max-width: 800px;
  width: 100%;
  margin: 0 auto var(--spacing-lg) auto;
  padding-top: var(--spacing-lg);
}

.posts-relacionados .title-post-p {
  font-weight: lighter !important;
  font-size: var(--encabezado-font);
  line-height: var(--encabezado-line-height);
  text-align: center;
  text-transform: uppercase;
  margin-top: 20px !important;
  float: left;
  width: 100%;
}

/* ========================================
   UTILITY CLASSES
======================================== */
.otgs-development-site-front-end {
  display: none !important;
}

.menu-principal-responsive.active > span:before {
  content: "\f00d" !important;
}

/* Message states */
.mensajes-popup .success,
.message-default.success {
  color: var(--success-color) !important;
}

.mensajes-popup .error,
.message-default.error {
  color: var(--error-color) !important;
}

.mensajes-popup .checking,
.message-default.checking {
  color: var(--warning-color) !important;
}

/* ========================================
   FORM STYLES
======================================== */
form input::placeholder {
  color: rgba(128, 128, 128, 0.33) !important;
}

.form-fields .form-field .form-field-input > input,
.form-fields .form-field .form-field-input > textarea {
  border-radius: var(--input-border-radius) !important;
}

/* ========================================
   LEARNPRESS STYLES
======================================== */
.lp-archive-courses {
  float: left !important;
  width: 100% !important;
}

.course-summary-sidebar__inner {
  z-index: 9;
}

.course-time-row strong {
  line-height: 1;
}

.learn-press-tabs__tab.active label a,
#learn-press-profile #profile-nav .lp-profile-nav-tabs li.active > ul .active > a,
#learn-press-profile #profile-nav .lp-profile-nav-tabs li.active > ul .active > a i {
  color: var(--black) !important;
  font-weight: bold;
}

.learn-press-tabs__tab.active:before {
  background: var(--black) !important;
}

/* ========================================
   ANIMATION KEYFRAMES
======================================== */
@keyframes headerFixed {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

/* ========================================
   CONSOLIDATED MEDIA QUERIES
   
   All responsive breakpoints organized 
   for better maintainability.
======================================== */

/* Tablet - Medium devices */
@media (max-width: 1024px) {
  :root {
    --display-font: 32px;
    --display-line-height: 36px;
    --encabezado-font: 28px;
    --encabezado-line-height: 32px;
    --titulo-font: 20px;
    --titulo-line-height: 30px;
    --subencabezado-font: 16px;
    --subencabezado-line-height: 24px;
    --cuerpo-texto-font: 14px;
    --cuerpo-texto-line-height: 24px;
    --pie-foto-font: 12px;
    --pie-foto-line-height: 18px;
  }

  .display-none-tablet {
    display: none !important;
  }

  header.site-header.movement {
    top: 0;
  }

  .menu-principal-responsive {
    display: block;
    float: right;
    width: 50px;
    height: 60px;
    cursor: pointer;
    z-index: var(--z-index-popup);
  }

  .menu-principal-responsive > span {
    width: 25px;
    height: 25px;
    margin: auto;
    display: flex;
    color: var(--white);
    font-size: 25px;
  }

  #menu-responsive {
    position: fixed;
    background: var(--background-1);
    width: 75%;
    height: calc(100vh - 60px);
    top: 60px;
    left: -75%;
    transition: var(--transition-speed);
  }

  #menu-responsive.active {
    left: 0;
  }

  #menu-responsive ul {
    list-style: none;
    margin: 0;
    width: 100%;
  }

  #menu-responsive ul > li {
    border-bottom: 1px solid #a9a9a9;
    padding: var(--spacing-xs) 0;
  }

  #menu-responsive ul > li a {
    color: var(--white);
    padding: 0 var(--spacing-lg) !important;
  }

  .site-info > .container > * {
    margin-bottom: var(--spacing-lg);
  }

  .site-footer > .site-info {
    padding-bottom: 0 !important;
  }

  .section-course {
    width: 100%;
  }

  .recurso-section {
    width: 50%;
  }

  .section-resource {
    width: 50%;
  }
}

/* Mobile - Small devices */
@media (max-width: 768.5px) {
  .learn-press-nav-tabs.course-nav-tabs {
    padding: 0 !important;
    display: block !important;
  }

  .learn-press-nav-tabs.course-nav-tabs > li.course-nav {
    width: 100% !important;
    border: none !important;
    box-shadow: none !important;
  }

  .learn-press-nav-tabs.course-nav-tabs > li.course-nav:after {
    display: none !important;
  }

  .recurso-section {
    width: 100%;
  }

  .section-resource {
    width: 100%;
  }

  .form-field-select:after {
    top: 12px !important;
  }
}

/* Desktop - Large devices */
@media (min-width: 1024.5px) {
  :root {
    --display-font: 46px;
    --display-line-height: 54px;
    --encabezado-font: 34px;
    --encabezado-line-height: 42px;
    --titulo-font: 22px;
    --titulo-line-height: 32px;
    --subencabezado-font: 16px;
    --subencabezado-line-height: 24px;
    --cuerpo-texto-font: 14px;
    --cuerpo-texto-line-height: 22px;
    --pie-foto-font: 12px;
    --pie-foto-line-height: 18px;
  }

  .display-none-desktop {
    display: none !important;
  }

  .site-info > .container > * {
    width: calc(25% - var(--spacing-md));
    float: left;
    min-height: 1px;
    margin: 0 7.5px var(--spacing-xl) 7.5px;
  }

  .calendar-desktop {
    min-width: 328px !important;
  }
}

/* Extra large screens */
@media (min-width: 1550px) {
  div.tribe-events .tribe-events-calendar-month__day {
    max-height: 102px !important;
  }
}