@font-face {
  font-family: Geograph-Light;
  src: url(../font/Geograph-Light.otf);
}

@font-face {
  font-family: Geograph-Regular;
  src: url(../font/Geograph-Regular.otf);
}

@font-face {
  font-family: Geograph-RegularItalic;
  src: url(../font/Geograph-RegularItalic.otf);
}

@font-face {
  font-family: Geograph-Medium;
  src: url(../font/Geograph-Medium.otf);
}

@font-face {
  font-family: Geograph-MediumItalic;
  src: url(../font/Geograph-MediumItalic.otf);
}

@font-face {
  font-family: Geograph-Bold;
  src: url(../font/Geograph-Bold.otf);
}

@font-face {
  font-family: Geograph-Black;
  src: url(../font/Geograph-Black.otf);
}

.geograph-light {
  font-family: Geograph-Light;
}

.geograph-regular {
  font-family: Geograph-Regular;
}

.geograph-regular-italic {
  font-family: Geograph-RegularItalic;
}

.geograph-medium {
  font-family: Geograph-Medium;
}

.geograph-medium-italic {
  font-family: Geograph-MediumItalic;
}

.geograph-bold {
  font-family: Geograph-Bold;
}

.geograph-black {
  font-family: Geograph-Black;
}

:root {
  --black: #000000;
  --dark: #231F20;
  --gray: #F4F4F4;
  --blue: #4200F9;
}

body {
  color: var(--black);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Geograph-Regular;
  }

p,
span {
  font-family: Geograph-Regular;
  font-style: normal;
}

/* TEXT COLORS*/

.text-blue {
  color: var(--blue);
}

/* BACKGROUND COLORS*/

.bg-black {
  background-color: var(--dark);
}

.bg-gray {
  background-color: var(--gray);
}

.bg-blue {
  background-color: var(--blue);
}

.bg-main-banner {
  background: linear-gradient(180deg, #fff 0%, #fff 60%, var(--blue-dark) 60%, var(--blue-dark) 100%);
}

/* HTML GLOBAL */

html {
  scroll-behavior: smooth;
}

.cursor-pointer {
  cursor: pointer;
}

.line {
  width: 100%;
  max-width: 544px;
  border: 2px solid;
  color: #7785a0;
  margin: auto;
}

.btn-before {
  width: 60px;
  margin-right: 32px;
}

.btn-after {
  width: 60px;
  margin-left: 32px;
}

.checkbtn {
  font-size: 30px;
  float: right;
  cursor: pointer;
  display: none;
}

#check {
  display: none;
}

nav ul li a {
  color: var(--gray-dark);
}

.max-950 {
  width: 100%;
  max-width: 950px;
}

.max-1512 {
  width: 100%;
  max-width: 1512px;
}

.bg-purpose-vision {
  background-image: url('../img/img-purpose-vision.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  width: 100%;
  max-width: 664px;
  height: 513px;
  margin-left: auto;
  margin-right: auto;
}

.line-box {
  width: 68px;
  height: 28px;
  border-right: 3px solid var(--blue);
}

/* ANIMATION */

[data-anime] {
  opacity: 0;
  transition: 0.5s;
}

[data-anime="top"] {
  transform: translate3d(0, -50px, 0);
  transition: 0.5s;
}

[data-anime="right"] {
  transform: translate3d(50px, 0, 0);
  transition: 0.5s;
}

[data-anime="left"] {
  transform: translate3d(-50px, 0, 0);
  transition: 0.5s;
}

[data-anime="bottom"] {
  transform: translate3d(0, 50px, 0);
  transition: 0.5s;
}

[data-anime="center"] {
  transform: translate3d(0, 0, 0);
  transition: 0.5s;
}

[data-anime].animate {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}

/* ACCORDION */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.5s ease;
}

.accordion-content.open {
  opacity: 1;
  /* max-height será definido dinamicamente via JavaScript */
}

.arrow {
  transition: transform 0.3s ease;
  transform: rotate(180deg);
}

.arrow.open {
  transform: rotate(0deg);
}
/* MEDIA QUERYS */

@media (min-width: 300px) {
  .movie{
    width: 100%;
    max-width: 290px;
    height: 100px;
    margin: auto;
  }
}

@media (min-width: 400px) {
  .movie{
    width: 100%;
    max-width: 382px;
    height: 300px;
    margin: auto;
  }
}

@media (min-width: 500px) { 
  .movie{
    width: 100%;
    max-width: 460px;
    height: 180px;
    margin: auto;
  }
}

/* XS Mobile */
@media (min-width: 0) and (max-width: 639px) {
  .checkbtn {
    margin-right: 16px !important;
  }

  .movie{
    width: 100%;
    max-width: 500px;
    height: 285px;
    margin: auto;
  }

  .bg-purpose-vision {
    max-width: 664px;
    height: 350px;
  }

  .bg-abstract {
    background-image: url('../img/abstract-mobile.png');
    background-repeat: no-repeat;
  }

  .max-110 {
    width: 100%;
    max-width: 110px;
  }

  .max-130 {
    width: 100%;
    max-width: 130px;
  }

  .max-260 {
    width: 100%;
    max-width: 260px;
  }

  .max-300 {
    width: 100%;
    max-width: 300px;
  }

  .max-330 {
    width: 100%;
    max-width: 330px;
  }

}

/* XS Mobile */
@media (min-width: 0) and (max-width: 767px) {
  .movie{
    width: 100%;
    max-width: 640px;
    height: 345px;
    margin: auto;
  }

  .btn-before {
    width: 30px;
    margin-right: 16px;
  }
  
  .btn-after {
    width: 30px;
    margin-left: 16px;
  }

  .checkbtn {
    display: block;
    margin-left: auto;
    margin-right: 16px;
  }

  ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: var(--dark);
    top: 92px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }

  nav ul li {
    display: block;
    margin: 20px 0;
    line-height: 30px;
  }

  nav ul li a {
    font-family: Geograph-Regular;
    color: var(--blue-dark);
  }

  #check:checked~ul {
    left: 0;
  }

  .bg-areas {
    background-image: url('../img/areas-mobile.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
    width: 100%;
    max-width: 432px;
    height: 700px;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-inscription {
    background-image: url('../img/inscription.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    width: 100%;
    max-width: 1512px;
    height: 360px;
    margin-left: auto;
    margin-right: auto;
  }

}


/* SM Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .movie{
    width: 100%;
    max-width: 740px;
    height: 420px;
    margin: auto;
  }

  .checkbtn {
    display: block;
    margin-left: auto;
    margin-right: 16px;
  }

  ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: var(--dark);
    top: 92px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }

  nav ul li {
    display: block;
    margin: 20px 0;
    line-height: 30px;
  }

  nav ul li a {
    font-family: Geograph-Regular;
    color: var(--blue-dark);
  }

  #check:checked~ul {
    left: 0;
  }

  .img-prerequisites {
    width: 100%;
    max-width: 400px;
  }

  .bg-purpose-vision {
    background-image: url('../img/img-purpose-vision.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    width: 100%;
    max-width: 664px;
    height: 513px;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-the-future {
    background-image: url('../img/about-program.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    width: 100%;
    max-width: 1512px;
    height:520px;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-pre-requisits {
    background-image: url('../img/pre-requisitos.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    width: 100%;
    max-width: 1512px;
    height: 629px;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-areas {
    background-image: url('../img/areas.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
    width: 100%;
    max-width: 1024px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-inscription {
    background-image: url('../img/inscription.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    width: 100%;
    max-width: 1512px;
    height: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* MD Desktop */
@media (min-width: 1024px) and (max-width: 1280px) {
  .movie{
    width: 100%;
    max-width: 840px;
    height: 475px;
    margin: auto;
  }

  .checkbtn {
    display: block;
    margin-left: auto;
    margin-right: 100px;
  }

  ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: var(--dark);
    top: 92px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }

  nav ul li {
    display: block;
    margin: 20px 0;
    line-height: 30px;
  }

  nav ul li a {
    font-family: Geograph-Regular;
    color: var(--blue-black);
  }

  #check:checked~ul {
    left: 0;
  }

  .img-prerequisites {
    width: 100%;
    max-width: 400px;
  }

  .bg-pre-requisits {
    background-image: url('../img/pre-requisitos.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    width: 100%;
    max-width: 1512px;
    height: 700px;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-purpose-vision {
    background-image: url('../img/img-purpose-vision.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    width: 100%;
    max-width: 664px;
    height: 513px;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-the-future {
    background-image: url('../img/about-program.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    width: 100%;
    max-width: 1512px;
    height: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-areas {
    background-image: url('../img/areas.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    width: 100%;
    max-width: 1512px;
    height: 642px;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-steps {
    background-image: url('../img/steps.jpg');
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: cover;
    width: 100%;
    max-width: 1512px;
    height: 1084px;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-inscription {
    background-image: url('../img/inscription.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    width: 100%;
    height: 824px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* LG Widescreen */
@media (min-width: 1280px) and (max-width: 1511px) {
  .movie{
    width: 100%;
    max-width: 940px;
    height: 530px;
    margin: auto;
  }

  .bg-pre-requisits {
    background-image: url('../img/pre-requisitos.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    width: 100%;
    max-width: 1512px;
    height: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-purpose-vision {
    background-image: url('../img/img-purpose-vision.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    width: 100%;
    max-width: 664px;
    height: 513px;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-the-future {
    background-image: url('../img/about-program.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    width: 100%;
    max-width: 1512px;
    height: 863px;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-areas {
    background-image: url('../img/areas.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    width: 100%;
    max-width: 1512px;
    height: 642px;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-steps {
    background-image: url('../img/steps.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: right;
    width: 100%;
    max-width: 1512px;
    height: 1084px;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-inscription {
    background-image: url('../img/inscription.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    width: 100%;
    max-width: 1512px;
    height: 1024px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1512px) {
  .movie{
    width: 100%;
    max-width: 940px;
    height: 530px;
    margin: auto;
  }

  .xl-mr-9 {
    margin-right: 16px;
  }

  .bg-pre-requisits {
    background-image: url('../img/pre-requisitos.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    width: 100%;
    max-width: 1512px;
    height: 928px;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-purpose-vision {
    background-image: url('../img/img-purpose-vision.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    width: 100%;
    max-width: 664px;
    height: 513px;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-the-future {
    background-image: url('../img/about-program.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    width: 100%;
    max-width: 1512px;
    height: 863px;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-areas {
    background-image: url('../img/areas.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    width: 100%;
    max-width: 1512px;
    height: 645px;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-steps {
    background-image: url('../img/steps.jpg');
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: cover;
    width: 100%;
    max-width: 1512px;
    height: 1084px;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-inscription {
    background-image: url('../img/inscription.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    width: 100%;
    max-width: 1512px;
    height: 1250px;
    margin-left: auto;
    margin-right: auto;
  }
}