/********************************************************************************************
 0. STYLES FOR MOBILE DEVICES - media screen max-width: 1024px (removes animation for mobile devices) (line 24)
 1. STYLES FOR MOBILE DEVICES - media screen max width: 400px (line 55)
 2. STYLES FOR MOBILE DEVICES - media screen min width: 400px / max width: 568px (line 295)
 3. STYLES FOR MOBILE DEVICES - media screen min width: 568px / max width: 600px (line 541)
 4. STYLES FOR MOBILE DEVICES - media screen min width: 600px / max width: 700px (line 809)
 5. STYLES FOR MOBILE DEVICES - media screen min width: 700px / max width: 768px (line 1118)
 6. STYLES FOR MOBILE DEVICES - media screen min width: 768px / max width: 900px (line 1423)
 7. STYLES FOR MOBILE DEVICES - media screen min width: 900px / max width: 1024px (line 1747)
 8. STYLES FOR MOBILE DEVICES - media screen min width: 1024px / max width: 1200px (line 2077)
 9. STYLES FOR MOBILE DEVICES - media screen min width: 1200px / max width: 1280px (line 2472)
 10. STYLES FOR MOBILE DEVICES - media screen min width: 1280px / max width: 1366px (line 2574)
 11. STYLES FOR MOBILE DEVICES - media screen min width: 1336px / max width: 1536px (line 2806) 
 12. STYLES FOR MOBILE DEVICES - media screen min width: 1536px / max width: 1680px (line 3141)
 13. STYLES FOR MOBILE DEVICES - media screen min width: 1680px / max width: 1900px (line 3471) 
 ---
 14. NAVIGATION MEDIA QUERIES (line 3801)
 15. FEATURES MEDIA QUERIES (line 3810)
 16. TIMELINE MEDIA QUERIES (line 3859)
*********************************************************************************************/

/*-- 0. Mobile menu --*/
@media screen and (max-width: 1199px) {
  /* hamburger menu */
  header#masthead .navbar-toggler {
    position: relative;
    border: none;
    width: 60px;
    height: calc(1.25rem*1.2 + 0.5rem*2);
  }

  header#masthead .navbar-toggler .navbar-icon-custom {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 3px;
    display: inline-block;
    border-radius: 20px;
    background-color: var(--white);
    transform: translate(-50%, -50%);
    transition: background-color 2s ease;
  }

  header#masthead .navbar-toggler.collapsed .navbar-icon-custom {
    background-color: var(--blue);
  }

  header#masthead .navbar-toggler .navbar-icon-custom.top,
  header#masthead .navbar-toggler .navbar-icon-custom.bottom {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 3px;
    display: inline-block;
    border-radius: 20px;
    background-color: var(--blue);
  }

  header#masthead .navbar-toggler.collapsed .navbar-icon-custom.top{transform: translate(-50%, -300%);}
  header#masthead .navbar-toggler.collapsed .navbar-icon-custom.bottom{transform: translate(-50%, 200%);}
  header#masthead .navbar-toggler .navbar-icon-custom.top{transform: translate(-50%, -50%) rotate(45deg);}
  header#masthead .navbar-toggler .navbar-icon-custom.bottom{transform: translate(-50%, -50%) rotate(-45deg);}

  header#masthead .navbar-reserve {height: calc(1.25rem*1.2 + 0.5rem*2);}
  header#masthead .navbar-reserve.left{width: 60px;}
  header#masthead .navbar-reserve.right{width: 30px;}

  header#masthead .navbar .web-section-title {
    padding: 0 1rem;
  }

  /* navbar */
  .navbar-toggler-container{flex-grow: 1;}
  header#masthead .navbar {
    z-index: 20;
    position: absolute;
    top: calc(65px + 2rem);
    left: 0;
    width: 100%;
  }

  header#masthead #main-nav {
    height: calc(100vh - (65px + 2rem));
    width: 100%;
    background: var(--white);
  }
  header#masthead #main-nav.collapsing {height: 0;}

  header#masthead #menu-main-menu,header#masthead #menu-main-menu-en {padding: 1rem 0;align-items: center;}
  header#masthead .navbar ul.navbar-nav li {flex-direction: column;}
  header#masthead .navbar ul.navbar-nav li::before{content: unset;}
  header#masthead .navbar ul.navbar-nav li.basic-link::after{content: unset;}
  header#masthead .navbar ul.navbar-nav li.menu-item-has-children {min-width: 22rem; padding-bottom: 1rem;}
  header#masthead .navbar ul.dropdown-menu{display: block;}
  header#masthead .navbar ul.dropdown-menu li{border: none;}
  header#masthead .navbar ul.navbar-nav > li a.dropdown-toggle {justify-content: center;border-bottom: 2px solid var(--blue);}
  header#masthead .navbar ul.navbar-nav > li a.dropdown-toggle .h5{margin: 0;}

  header#masthead .navbar ul.navbar-nav li.basic-link > a {justify-content: center;border-bottom: 2px solid var(--blue);}
  header#masthead .navbar ul.navbar-nav li.basic-link > a .h5{margin: 0;}

  /* navbar languages */
  header#masthead .navbar-language{margin: 1rem auto;}
  header#masthead .navbar ul.navbar-nav li .navbar-language li{flex-direction: row;align-items: center;}
  header#masthead .navbar ul.navbar-nav li .navbar-language li a{font-weight: bold;}

  /* header */
  header#masthead .navbar-brand, header#masthead .navbar-credits {width: 225px;}
  header#masthead .navbar-brand {white-space: normal;word-break: break-word;}
}

@media screen and (max-width: 768px) {
  p,.p{font-size: 1rem;}

  /* footer */
  footer#colophon .credit-container.click-container svg{height: auto;width: 238px;max-width: 70%;}
}

/*-- 1. STYLES FOR TABLET DEVICES - media screen max-width: 991px --*/
@media screen and (max-width: 991px) {
  /* Footer */
  footer#colophon .container-fluid .row {align-items: center;}

  footer#colophon .credit-container::after {
    content: unset;
  }

  footer#colophon .footer-column:nth-child(2n) .credit-container:after {
    content: '';
    position: absolute;
    width: 1px;
    top: 50%;
    left: 0;
    height: 90%;
    transform: translate(0, -50%);
    background-color: var(--black);
  }
}

/*-- 2. STYLES FOR MOBILE DEVICES - media screen max width: 400px --*/
@media only screen and (max-width: 400px) {
  html, body {font-size: 14px;}
  h1,.h1{font-size:2.5rem;}
  h2,.h2{font-size:2rem;}
  h3,.h3{font-size:1.65rem;}
  h4,.h4{font-size:1.5rem;}
  h5,.h5{font-size:1.25rem;}
  h6,.h6{font-size:1.15rem;}

  /* header */
  header#masthead .navbar {top: calc(50px + 2rem);}
  header#masthead #main-nav {height: calc(100vh - (50px + 2rem));}
  header#masthead .navbar-brand{margin: 0;}
  header#masthead .navbar-brand img{height: 50px;}
  header#masthead .navbar-brand span{display: none;}
  header#masthead .navbar-credits{margin: 0;padding: 0 1rem;}
  header#masthead .navbar-credits img{width: 100%;}
  header#masthead .navbar-brand, header#masthead .navbar-credits {width: 175px;}
  header#masthead .navbar-brand {white-space: normal;word-break: break-word;}
  header#masthead .navbar ul.dropdown-menu li a {white-space: normal;word-break: break-word;line-height: 1.2;}
  header#masthead .navbar ul.navbar-nav li.menu-item-has-children{width: 100%;min-width: unset;}

  /* footer */
  footer#colophon .footer-column {border-bottom: 2px solid var(--blue);}
  footer#colophon .footer-column:nth-child(2n) .credit-container:after {content: unset}
  footer#colophon .brand-column img{width: 75px;}
  footer#colophon .credit-container.epm-container img {height: 30px;}
  footer#colophon .credit-container.mineducacion-container img {height: 40px;}
  footer#colophon .credit-container.click-container svg {height: 45px;max-width: 100%;}
}

/*-- 3. STYLES FOR MOBILE DEVICES - media screen min width: 401px / max width: 575px --*/
@media screen and (min-width: 401px) and (max-width: 575px) {
  html, body {font-size: 14px;}
  h1,.h1{font-size:2.5rem;}
  h2,.h2{font-size:2rem;}
  h3,.h3{font-size:1.65rem;}
  h4,.h4{font-size:1.5rem;}
  h5,.h5{font-size:1.25rem;}
  h6,.h6{font-size:1.15rem;}

  /* header */
  header#masthead .navbar {top: calc(50px + 2rem);}
  header#masthead #main-nav {height: calc(100vh - (50px + 2rem));}
  header#masthead .navbar-brand{margin: 0;}
  header#masthead .navbar-brand span{display: none;}
  header#masthead .navbar-brand img{height: 50px;}
  header#masthead .navbar-credits img{width: 100%;}
  header#masthead .navbar-credits{margin: 0;padding: 0 1rem;}
  header#masthead .navbar ul.dropdown-menu li a {white-space: normal;word-break: break-word;line-height: 1.2;}

  /* footer */
  footer#colophon .footer-column {border-bottom: 2px solid var(--blue);}
  footer#colophon .footer-column:nth-child(2n) .credit-container:after {content: unset}
  footer#colophon .brand-column img{width: 100px;}
  footer#colophon .credit-container.epm-container img {height: 30px;}
  footer#colophon .credit-container.mineducacion-container img {height: 40px;}
  footer#colophon .credit-container.click-container img {height: 55px;max-width: 100%;}
}

/*-- 4. STYLES FOR MOBILE DEVICES - media screen min width: 576px / max width: 649px --*/
@media screen and (min-width: 576px) and (max-width: 649px) {
  html, body {font-size: 16px;}
  h1,.h1{font-size:2.5rem;}
  h2,.h2{font-size:2rem;}
  h3,.h3{font-size:1.65rem;}
  h4,.h4{font-size:1.5rem;}
  h5,.h5{font-size:1.25rem;}
  h6,.h6{font-size:1.15rem;}
  
  /* header */
  header#masthead .navbar {top: calc(50px + 2rem);}
  header#masthead #main-nav {height: calc(100vh - (50px + 2rem));}
  header#masthead .navbar-brand img{height: 50px;}
  header#masthead .navbar-credits img{width: 100%;}
  header#masthead .navbar-brand, header#masthead .navbar-credits {width: 175px;}
  header#masthead .navbar-brand {white-space: normal;word-break: break-word;}
  
  /* footer */
  footer#colophon .brand-column img{width: 85px;}
  footer#colophon .credit-container.epm-container img {height: 25px;}
  footer#colophon .credit-container.mineducacion-container img {height: 30px;}
  footer#colophon .credit-container.click-container img {height: 45px;}
}

/*-- 5. STYLES FOR MOBILE DEVICES - media screen min width: 650px / max width: 767px --*/
@media screen and (min-width: 650px) and (max-width: 767px) {
  html, body {font-size: 16px;}
  h1,.h1{font-size:2.5rem;}
  h2,.h2{font-size:2rem;}
  h3,.h3{font-size:1.65rem;}
  h4,.h4{font-size:1.5rem;}
  h5,.h5{font-size:1.25rem;}
  h6,.h6{font-size:1.15rem;}
  
  /* header */
  header#masthead .navbar {top: calc(50px + 2rem);}
  header#masthead #main-nav {height: calc(100vh - (50px + 2rem));}
  header#masthead .navbar-brand img{height: 50px;}
  header#masthead .navbar-credits img{width: 100%;}
  header#masthead .navbar-brand, header#masthead .navbar-credits {width: 175px;}
  header#masthead .navbar-brand {white-space: normal;word-break: break-word;}
  
  /* footer */
  footer#colophon .brand-column img{width: 100px;}
  footer#colophon .credit-container.epm-container img {height: 30px;}
  footer#colophon .credit-container.mineducacion-container img {height: 40px;}
  footer#colophon .credit-container.click-container img {height: 55px;}
}

/*-- 6. STYLES FOR MOBILE DEVICES - media screen min width: 768px / max width: 991px --*/
@media screen and (min-width: 768px) and (max-width: 991px) {
  html, body {font-size: 16px;}
  h1,.h1{font-size:2.5rem;}
  h2,.h2{font-size:2rem;}
  h3,.h3{font-size:1.65rem;}
  h4,.h4{font-size:1.5rem;}
  h5,.h5{font-size:1.25rem;}
  h6,.h6{font-size:1.15rem;}
  
  /* footer */
  footer#colophon .brand-column img{width: 125px;}
  footer#colophon .credit-container.epm-container img {height: 35px;}
  footer#colophon .credit-container.mineducacion-container img {height: 45px;}
  footer#colophon .credit-container.click-container svg {height: 55px;}
}

/*-- 7. STYLES FOR MOBILE DEVICES - media screen min width: 992px / max width: 1199px --*/
@media screen and (min-width: 992px) and (max-width: 1199px) {
  html, body {font-size: 16px;}
  h1,.h1{font-size:2.5rem;}
  h2,.h2{font-size:2rem;}
  h3,.h3{font-size:1.65rem;}
  h4,.h4{font-size:1.5rem;}
  h5,.h5{font-size:1.25rem;}
  h6,.h6{font-size:1.15rem;}

  /* footer */
  footer#colophon .brand-column img{width: 85px;}
  footer#colophon .credit-container.epm-container img {height: 25px;}
  footer#colophon .credit-container.mineducacion-container img {height: 30px;}
  footer#colophon .credit-container.click-container svg {height: 45px;}
}

/*-- 8. STYLES FOR MOBILE DEVICES - media screen min width: 1200px / max width: 1279px --*/
@media screen and (min-width: 1200px) and (max-width: 1279px) {
  html, body {font-size: 16px;}
  h1,.h1{font-size:2.5rem;}
  h2,.h2{font-size:2rem;}
  h3,.h3{font-size:1.65rem;}
  h4,.h4{font-size:1.5rem;}
  h5,.h5{font-size:1.25rem;}
  h6,.h6{font-size:1.15rem;}

  /* header */
  header#masthead .navbar-brand {white-space: normal;word-break: break-word;margin: 0 0 0 1rem;}
  header#masthead .navbar-brand span {width: 110px;}
  header#masthead .navbar ul.dropdown-menu li a {white-space: normal;word-break: break-word;line-height: 1.2;}
  header#masthead .navbar ul.dropdown-menu li a img, header#masthead .navbar ul.dropdown-menu li a svg{width: 18px;margin-right: 0.5rem;}
  header#masthead .navbar ul.navbar-nav li a,header#masthead .navbar ul.main-navbar li a{padding: 0.5rem 1rem;}
  header#masthead .navbar-credits{margin: 0 1rem;}
  header#masthead .navbar-credits img{width: 125px;}
  header#masthead .navbar-language{margin-right: 1rem;}

  /* footer */
  footer#colophon .brand-column img{width: 100px;}
  footer#colophon .credit-container.epm-container img {height: 30px;}
  footer#colophon .credit-container.mineducacion-container img {height: 40px;}
  footer#colophon .credit-container.click-container img {height: 55px;}
}

/*-- 9. STYLES FOR MOBILE DEVICES - media screen min width: 1280px / max width: 1365px --*/
@media screen and (min-width: 1280px) and (max-width: 1365px) {
  html, body {font-size: 16px;}
  h1,.h1{font-size:2.5rem;}
  h2,.h2{font-size:2rem;}
  h3,.h3{font-size:1.65rem;}
  h4,.h4{font-size:1.5rem;}
  h5,.h5{font-size:1.25rem;}
  h6,.h6{font-size:1.15rem;}

  /* header */
  header#masthead .navbar-brand {white-space: normal;word-break: break-word;margin: 0 0 0 1rem;}
  header#masthead .navbar ul.dropdown-menu li a {white-space: normal;word-break: break-word;line-height: 1.2;}
  header#masthead .navbar ul.dropdown-menu li a img, header#masthead .navbar ul.dropdown-menu li a svg{width: 18px;margin-right: 0.5rem;}
  header#masthead .navbar ul.navbar-nav li a,header#masthead .navbar ul.main-navbar li a{padding: 0.5rem 1rem;}
  header#masthead .navbar-credits{margin: 0 1rem;}
  header#masthead .navbar-credits img{width: 125px;}
  header#masthead .navbar-language{margin-right: 1rem;}

  /* footer */
  footer#colophon .brand-column img{width: 100px;}
  footer#colophon .credit-container.epm-container img {height: 30px;}
  footer#colophon .credit-container.mineducacion-container img {height: 40px;}
  footer#colophon .credit-container.click-container img {height: 55px;}
}

/*-- 10. STYLES FOR MOBILE DEVICES - media screen min width: 1366px / max width: 1535px --*/
@media screen and (min-width: 1366px) and (max-width: 1535px) {
  html, body {font-size: 16px;}
  h1,.h1{font-size:2.5rem;}
  h2,.h2{font-size:2rem;}
  h3,.h3{font-size:1.65rem;}
  h4,.h4{font-size:1.5rem;}
  h5,.h5{font-size:1.25rem;}
  h6,.h6{font-size:1.15rem;}

  /* header */
  header#masthead .navbar-brand {white-space: normal;word-break: break-word;}
  header#masthead .navbar ul.dropdown-menu li a {white-space: normal;word-break: break-word;line-height: 1.2;}
  header#masthead .navbar ul.dropdown-menu li a img, header#masthead .navbar ul.dropdown-menu li a svg{width: 18px;margin-right: 0.5rem;}
  header#masthead .navbar ul.navbar-nav li a,header#masthead .navbar ul.main-navbar li a{padding: 0.5rem 1.5rem;}
  header#masthead .navbar-credits{margin: 0 1rem;}
  header#masthead .navbar-credits img{width: 150px;}

  /* footer */
  footer#colophon .brand-column img{width: 125px;}
  footer#colophon .credit-container.epm-container img {height: 35px;}
  footer#colophon .credit-container.mineducacion-container img {height: 45px;}
  footer#colophon .credit-container.click-container img {height: 60px;}
}

/*-- 11. STYLES FOR MOBILE DEVICES - media screen min width: 1536px / max width: 1679px --*/
@media screen and (min-width: 1536px) and (max-width: 1679px) {
  html, body {font-size: 16px;}
}

/*-- 12. STYLES FOR MOBILE DEVICES - media screen min width: 1680px / max width: 1919px --*/
@media screen and (min-width: 1680px) and (max-width: 1919px) {}

/*-- 13. STYLES FOR MOBILE DEVICES - media screen min width: 1920 --*/
@media screen and (min-width: 1920px) {
  p, .p {font-size: 1.25rem;}
}