/* ==========================================================================
   Fonts
   ========================================================================== */
/**
Canelo
 */
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/canelo/icomoonddc5.eot?sn0469');
  src:  url('../fonts/canelo/icomoonddc5.eot?sn0469#iefix') format('embedded-opentype'),
  url('../fonts/canelo/icomoonddc5.ttf?sn0469') format('truetype'),
  url('../fonts/canelo/icomoonddc5.woff?sn0469') format('woff'),
  url('../fonts/canelo/icomoonddc5.svg?sn0469#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/**
Montserrat
 */
@font-face {
  font-family: "Monserrat-Light";
  src: url('../fonts/montserrat/Montserrat-Light.ttf');
}
@font-face {
  font-family: "Monserrat-Light";
  src: url("../fonts/montserrat/Montserrat-Bold.ttf");
  font-weight: bold;
}
@font-face {
  font-family: "Monserrat-Medium";
  src: url('../fonts/montserrat/Montserrat-Medium.ttf');
}
@font-face {
  font-family: "Monserrat-Medium";
  src: url('../fonts/montserrat/Montserrat-ExtraBold.ttf');
  font-weight: bold;
}
@font-face {
  font-family: "Monserrat";
  src: url('../fonts/montserrat/Montserrat-Regular.ttf');
}
@font-face {
  font-family: "Monserrat-Bold";
  src: url('../fonts/montserrat/Montserrat-Bold.ttf');
}
/**
Gotham
 */
@font-face {
  font-family: "Gotham-Medium";
  src: url('../fonts/gotham/GT-America-Condensed-Medium.otf');
}
@font-face {
  font-family: "Gotham-Condensed";
  src: url('../fonts/gotham/GT-America-Compressed-Regular.otf');
}
@font-face {
  font-family: "Gotham-Condensed";
  src: url('../fonts/gotham/GT-America-Compressed-Black.otf');
  font-weight: bold;
}
@font-face {
  font-family: "Gotham-Condensed-Black";
  src: url('../fonts/gotham/GT-America-Compressed-Black.otf');
  font-weight: bold;
}


/* ==========================================================================
   General
   ========================================================================== */

body{
  background-color: var(--dark-color);
  color: var(--white-color);
}

* {
  font-family: "Monserrat-Light", 'Montserrat', Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Backgrounds
   ========================================================================== */

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

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

/* ==========================================================================
   color
   ========================================================================== */
.color-primary {
  color: var(--primary-color);
}

.color-light {
  color: var(--primary-ligth-color);
}

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

/* ==========================================================================
   Anchor
   ========================================================================== */

.anchor {
  color: var(--white-color);
}
.anchor:hover {
  color: var(--primary-color);
}

/* ==========================================================================
   Inputs
   ========================================================================== */
input, textarea, select{
  outline: none;
}
input.form-control,
input.form-control:focus,
input.form-control:active,
input.form-control:-webkit-autofill,
input.form-control:-webkit-autofill:hover,
input.form-control:-webkit-autofill:focus,
select.form-control,
select.form-control:focus,
select.form-control:active,
select.form-control:-webkit-autofill,
select.form-control:-webkit-autofill:hover,
select.form-control:-webkit-autofill:focus,
textarea.form-control,
textarea.form-control:focus,
textarea.form-control:active,
textarea.form-control:-webkit-autofill,
textarea.form-control:-webkit-autofill:hover,
textarea.form-control:-webkit-autofill:focus
{
  background: transparent;
  border: none;
  color: white;
  border-radius: 0;
  -moz-appearance:none;
  -webkit-appearance:none;
  outline-color: transparent;
  border-bottom: solid 2px var(--primary-color);
}
.form-group {
  position: relative;
}
.form-group input~label, .form-group textarea~label {
  color:#999;
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
  top:5px;
}
.form-group input::placeholder, .form-group textarea::placeholder {
  color: transparent;
}
.form-group input:focus ~ label, .form-group input:not(:placeholder-shown) ~ label,
.form-group textarea:focus ~ label, .form-group textarea:not(:placeholder-shown) ~ label
{
  transition: 0.5s;
  font-size: 12px;
  margin-top:-20px;
  margin-left: 0;
}

.input-bordered {
  border: 1px solid var(--white-color) !important;
}

.input-solid {
  background: var(--white-color) !important;
  border: 1px solid var(--white-color) !important;
  color: var(--dark-color) !important;
}


/* ==========================================================================
   Button
   ========================================================================== */
.btn-primary {
  width: fit-content;
  color: var(--white-color);
  background-color: var(--primary-color);
  border-radius: 0!important;
}

.btn-primary-outlined, .btn-primary-outlined:hover {
  border-color: var(--primary-color);
  background-color: transparent !important;
  border-radius: 0;
  color: var(--white-color);
}

/* ==========================================================================
   Texts
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: "Gotham-Condensed-Black", 'Monserrat-Bold', Helvetica, Arial, sans-serif;
}
h1 {
  font-size: 3.0rem;
}
h2 {
  font-size: 2.5rem;
}

.title-starred {
  font-size: 3rem;
}
.title-starred:after {
  content: '';
  width: 200px;
  height: 25px;
  background-image: url(../img/group-of-stars.svg);
  background-repeat: no-repeat;
  background-position: left;
  background-size: 120px;
  display: block;
}

.title-highlighted {
  margin-bottom: 20px;
}
.title-highlighted:before {
  content: '\e901';
  width: 100%;
  height: 75px;
  font-family: 'icomoon' !important;
  font-size: 70px;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-align: center;
  line-height: 1.2;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*background-image: url("../img/isotype-stars.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80px 55px;*/
  display: block;
  position: relative;
  margin-bottom: 10px;
}

.starred-text:before, .starred-text:after  {
  content: '';
  width: 15px;
  height: 15px;
  background-image: url("../img/star.svg");
  background-repeat: no-repeat;
  background-size: 15px 15px;
  display: inline-block;
}
.starred-text:before {
  margin-right: 5px;
}
.starred-text:after {
  margin-left: 5px;
}


/* ==========================================================================
   Helpers
   ========================================================================== */

.hero-section {
  background-image: url("../img/plans/background-title-plans.png");
  background-size: cover;
  min-height: 200px;
}
.hero-section .heading {
  top: 100px;
  position: absolute;
  min-height: 100px;
}


/* ==========================================================================
   Helpers
   ========================================================================== */

.iso-canelo{
  width: 70px;
}



@media (min-width: 320px) {}
@media (min-width: 768px) {
  .hero-section {
    background-image: url("../img/plans/background-title-plans.png");
    background-size: cover;
    min-height: 400px;
  }
  .hero-section .heading {
    top: 17%;
  }
}
@media (min-width: 1024px) {
  .title-highlighted {
    margin-bottom: 40px;
    padding-left: 90px;
  }
  .title-highlighted:before {
    width: 75px;
    display: inline-block;
    position: absolute;
    margin-top: 0;
    margin-left: -90px;
    margin-bottom: 0;
  }
}
@media (min-width: 1280px) {}
@media (min-width: 1440px) {}