/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

:root {
  --font-primary: Edenred, 'Arial', sans-serif;
  --base-weight:  normal;
  --base-style: Black;
  --base-font-size:  18px;
  --base-mobile-font-size:  16px;
  --base-line-height:  1.8;
  --base-mobile-line-height: 1.7;
  --primary-2: #F9F5FF;
  --secondary: #F9F5FF;
  --body-text: #636363;
  --body-bg: #fff;
  --btn-hover-bg: linear-gradient(90deg,  0%,  100%);
  --btn-text: #fff;
  --btn-hover-text:#fff;
  --btn-font-family:   Edenred,  ;
  --btn-trasform: normal;
  --btn-bg: linear-gradient(to bottom right, rgba(131, 74, 239, 1), rgba(190, 111, 250, 1));
  --neutral-1: #000000;
  --neutral-2:  #363636;
  --neutral-3:  #636363;
  --neutral-4:  #aaaaaa;
  --neutral-5:  #e9e9e9;
  --footer-color: #ffffff;
  --tag-bg: 
  --heading-color: #111A20
  --article-date: #aaaaaa;
  --article-heading-color-huge: #000000;
 --article-heading-color-small: #000000;
 --article-description-color: #565656;
  --link-color: #111A20;
 --link-hover-color: #111A20;
  --text-field-bg: #fff;
 --text-field-placeholder: #808080;
 --text-field-color: #000;
 --text-field-border: #fff;
 --text-field-description: #fff;
  --card-outline: #d9d9d9;
 --divider: #e9e9e9;
  --tag-outline: #D9D9D9;
  --previous-next-outline: #DDDDDD;
 --search-bg: #864cf0;
 --search-color: #fff;
 --search-border:  #fff;
 --search-placeholder: #fff;
  
  
  --pagination-color: #111a20;
 --pagination-color-disabled: #888d90;
 --pagination-link-disactive: #aaa;
  --breadcrumbs-link-color: #636363;
  
  --tag-text-color: #000;
 
  
}
/*****************************************/
/* Start your style declarations here    */
/*****************************************/

.display-1 {
  font-weight: 900; font-family: Edenred;
 font-size: 40px;
 
 line-height: 48px;
 letter-spacing: 0em;
 

}




.h1,
h1 {
  font-weight: 700; font-family: Edenred;
 font-size: 36px;
 
 
}

.h2,
h2 {
  font-weight: 500; font-family: Edenred;
 font-size: 32px;
 
}

.h3,
h3 {
   font-weight: 900; font-family: Edenred;
 font-size: 28px;
 
 

}

.h4,
h4 {
font-weight: 700; font-family: Edenred;
 font-size: 26px;
 
 
 
}

.h5,
h5 {
 font-weight: 400; font-family: Edenred;
 font-size: 22px;
 
 
}

.h6,
h6 {
 font-weight: 700; font-family: Edenred;
 font-size: 18px;
 
}


.body-l {
  font-family: Ubuntu, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
 font-size: 18px;
 
 
 
}

.body-m {
  font-family: Ubuntu, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
 font-family: Ubuntu, 'Arial', sans-serif;
 font-weight: normal;
 font-style: normal;
 font-size: 16px;
 
 
   
}


.body-s {
 font-family: Ubuntu, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
 font-size: 14px;
 
 
  
}



.body-xs {
 font-family: Ubuntu, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
 font-size: 12px;
 
}



.body-xs-bold {
  font-family: Ubuntu, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
 font-size: 12px;
 
}




.detail {
  font-family: Ubuntu, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
 color: #636363;
 
 
   
}

.detail h1 {
  font-weight: 700; font-family: Edenred;
 font-size: 60px;
 
}

.detail h2 {
  font-weight: 400; font-family: Edenred;
 font-size: 60px;
 
}

.detail h3 {
 font-weight: 900; font-family: Edenred;
 font-size: 60px;
 
 
}

.detail h4 {
 font-weight: 500; font-family: Edenred;
 font-size: 60px;
 
 

}

.detail h5 {
 font-weight: 500; font-family: Edenred;
 font-size: 60px;
 
}

.detail h6 {
 font-weight: 700; font-family: Edenred;
 font-size: 60px;
 
}

.detail blockquote {
  font-weight: 400; font-family: Edenred;
 background: #F3ECFF;
 color: #864CF0;
 font-size: 60px;
 
 
}


.detail a {
 color: #2886DE;
  font-family: Ubuntu, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
 font-size: 16px;
 
}

.detail a:hover {
  color: #111A20;
}




.btn--outline {
   border: 1px solid #864cf0;
   padding: 10px 47px;
   color: {color=#864cf0, opacity=100, rgba=rgba(134, 76, 240, 1), rgb=rgb(134, 76, 240), hex=#864cf0, css=#864cf0};
   background: {color=#864cf0, opacity=100, rgba=rgba(134, 76, 240, 1), rgb=rgb(134, 76, 240), hex=#864cf0, css=#864cf0};
   position: relative;
   overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 24px;
     height: 46px;
    border-radius: 50px;
    border-width: 1px;
}

.btn--outline:after {
      content: '';
     position: absolute;
     top: 0;
     right: 0;
     height: 100%;
     border-radius: 50px;
     background: linear-gradient(to bottom right, rgba(105, 59, 191, 1), rgba(150, 88, 200, 1));
     border: 1px solid {color=#ffffff, opacity=0, rgba=rgba(255, 255, 255, 0), rgb=rgb(255, 255, 255), hex=#ffffff, css=rgba(255, 255, 255, 0%)}
     z-index: -1;
     width: 0;
     transition-property: width;
     transition-duration: var(--transition-duration);
     transition-timing-function: var(--transition-timing-function);
}

.btn--outline:after {
   color: {color=#ffffff, opacity=100, rgba=rgba(255, 255, 255, 1), rgb=rgb(255, 255, 255), hex=#ffffff, css=#ffffff};
}

.btn-outline:hover:after {
  width: 100%;
  left: 0;
  right: auto;
}


.detail h1,
.detail h2,
.detail h3,
.detail h4,
.detail h5,
.detail h6 {
 color: #636363;
}

.detail h1 a,
.detail h2 a,
.detail h3 a,
.detail h4 a,
.detail h5 a,
.detail h6 a,
.detail blockquote a,
.detail li a {
 font-size: inherit !important;
}

.detail ol:not([class]) li:after,
.detail ul:not([class]) li:after {
color: #2886DE;
}

.testimonial {
 background: #f8f8f8
}


.btn--primary {
   display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 24px;
     height: 46px;
    border-radius: 50px;
    border-width: 0px;
}

.btn--arrow .icon {
  margin-left: 9px;
  
}


.subscription__form form input{
  border-radius: 50px;
}

.subscription__form form .btn {
   border-radius: 0 50px 50px 0;
}

.topic__item a {
  border-radius: px;
}


.banner .select a:after,
.banner .select a{
   border-radius: 50px;
}

.banner .select {
  border-radius: 50px;
}

.featured__img {
  border-radius: 0px;
}

.latest__img {
    border-radius: 0px;
}

.banner__img img {
   border-radius: 0px;
}

.badge{
  border-radius: 50px;
}

.tag {
   border-radius: 50px;
  
}

.link a {
   border-radius: 10px;
}

.tag__title {
  color: {color=#fff, opacity=null, rgba=rgba(255, 255, 255, 1), rgb=rgb(255, 255, 255), hex=#fff, css=#fff};
  
  
}


@media(min-width: 1024px) {
     
     .display-1 {
      font-size: 50px;
     
       line-height: 72px;
     
     }
  
   .h1,
     h1 {
         font-size: 48px;
       
     }
  
  .h2,
  h2 {
     font-size: 36px;
     
  }
  
  .h3,
  h3 {
     font-size: 32px;
     
  }
  
  .h4,
  h4 {
    font-size: 28px;
     
  }
  
  .h5,
  h5 {
     font-size: 24px;
     
  }
  
  .h6,
  h6  {
    
     font-size: 16px;
     
  }
  
  .body-l {
  font-size: 20px;
     
}
  
  .body-m {
 font-size: 18px;
     
}
  
  .body-s {
   font-size: 16px;
     
}
  
  .body-xs {
  font-size: 14px;
     
}
  
  
.body-xs-bold {
   font-size: 14px;
     
}
  
  .detail {
  font-size: 18px;
     
    }
  
  .detail h1 {
     font-size: px;
     
  }
  
  .detail h2 {
     font-size: 36px;
     
  }
  
  .detail h3 {
     font-size: 32px;
     
  }
  
  .detail h4 {
    font-size: 28px;
     
  }
  
  .detail h5 {
     font-size: 24px;
     
  }
  
  
  .detail h6 {
     font-size: 18px;
     
  }
  
  .detail blockquote {
    font-size: 20px;
     
  }
  
  .detail a {
    font-size: 18px;
     
  }
  
  .btn--outline {
   height: 56px;
      padding: 0 24px;
       border-radius: 50px;
       border-width: 1px;
}
  
  
  .btn--primary {
     height: 56px;
      padding: 0 24px;
       border-radius: 50px;
       border-width: 0px;
  }
  
  .btn--arrow .icon {
  margin-left: 9px;
}
  
  .tag {
  border-radius: 50px;
}

.link a {
  border-radius: 10px;
}


}