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

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

@font-face {
  font-family: MacklinSans_Extra_Light;
  src: url(../font/MacklinSans-ExtraLight.otf);
}

@font-face {
  font-family: MacklinSans_Extra_Light_It;
  src: url(../font/MacklinSans-ExtraLightIt.otf);
}

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

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

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

@font-face {
  font-family: MacklinSans_Extra_Bold;
  src: url(../font/MacklinSans-ExtraBold.otf);
}

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

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

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


.macklinSans_thin {
  font-family: MacklinSans_Thin;
}

.macklinSans_light {
  font-family: MacklinSans_Light;
}

.macklinSans_extra_light {
  font-family: MacklinSans_Extra_Light;
}

.macklinSans_extra_light_it {
  font-family: MacklinSans_Extra_Light_It;
}

.macklinSans_regular {
  font-family: MacklinSans_Regular;
}

.macklinSans_medium {
  font-family: MacklinSans_Medium;
}

.macklinSans_bold {
  font-family: MacklinSans_Bold;
}

.macklinSans_extra_bold {
  font-family: MacklinSans_Extra_Bold;
}

.macklinSans_black {
  font-family: MacklinSans_Black;
}

.macklinSlab_medium {
  font-family: MacklinSlab_Medium;
}

.macklinSlab_bold {
  font-family: MacklinSlab_Bold;
}

:root {
  --blue-light: #eef2f3;
  --blue-dark: #031d4f;
  
  --gray-dark: #29292E;
  --gray-medium: #797d7e;
  
  --black: #1E1E1E;
  --blue: #0B0350;

  --purple-light: #F5F5FF;
  --purple: #5E22F3;
  --pink: #BA38E3;
}

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

/* h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: MacklinSans_Medium;
  font-style: normal;
  } */

h1 {
  font-size: 80px;
  font-family: MacklinSans_Medium;
  font-style: normal;
}

h2 {
  font-size: 65px;
  font-family: MacklinSans_Medium;
  font-style: normal;
}

h3 {
  font-size: 40px;
  font-family: MacklinSans_Medium;
  font-style: normal;
}

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

/* TEXT COLORS*/
.text-black {
  color: var(--black);
}

.text-gray-dark {
  color: var(--gray-dark);
}

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

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

/* BACKGROUND COLORS*/

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

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

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

.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%);
}

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

.bg-highway {
  background-image: url('../img/bg-highway.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  height: 380px;
}

/* HTML GLOBAL */

html {
  scroll-behavior: smooth;
}

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

.btn-inscription-small {
  width: 216px;
  height: 50px;
  display: flex;
  justify-content:center;
  background-color: var(--pink);
  align-items: center;
  border-radius: 16px;
  padding-top: 4px;
  font-size: 16px;
  font-family: MacklinSans_Extra_Bold;
}


.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);
}

.phases-square-border {
  border: solid 1px var(--celeste-blue);
}

.benefits-square-border {
  border: solid 1px var(--blue);
}

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

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

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

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

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

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

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

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

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

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

.w-max-1080 {
  width: 100%;
  max-width: 1080px;
}

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

.line-box {
  width: 46px;
  height: 28px;
  border-right: 3px solid #5E22F3;
}

/* 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);
}

/* 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: 640px) {
  .checkbtn {
    margin-right: 16px !important;
  }

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

/* 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;
  }

  .img-testimony, .img-testimony-2 {
    width: 100%;
    max-width: 260px;
  }

  .box-step {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background-color: #031d4f;
    margin-right: 16px;
  }

  .box-step-interval {
    width: 6px;
    height: 30px;
    flex-shrink: 0;
    background-color: #031d4f;
    margin-left: 16px;
  }

  .line-height-18 {
    line-height: 18px;
  }

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

  ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: var(--purple);
    top: 96px;
    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: MacklinSans_Medium;
    color: var(--blue-dark);
  }

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

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


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

  .box-step {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background-color: #031d4f;
    margin-right: 16px;
  }

  .box-step-interval {
    width: 6px;
    height: 30px;
    flex-shrink: 0;
    background-color: #031d4f;
    margin-left: 15px;
  }

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

  ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: var(--purple);
    top: 96px;
    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: MacklinSans_Medium;
    color: var(--blue-dark);
  }

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

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

/* MD Desktop */
@media (min-width: 1024px) and (max-width: 1239px) {
  .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(--purple);
    top: 96px;
    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: MacklinSans_Medium;
    color: var(--blue-dark);
  }

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

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

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

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

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

  .bg-development-trail {
    background-image: url('../img/bg-development-trail.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 710px;
  }
}