@font-face {
    font-family: 'myriad_pro';
    src: url('/fonts/myriadpro-light-webfont.woff2') format('woff2'),
        url('/fonts/myriadpro-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;

}

@font-face {
    font-family: 'myriad_pro';
    src: url('/fonts/myriadpro-regular-webfont.woff2') format('woff2'),
        url('/fonts/myriadpro-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;

}

@font-face {
    font-family: 'myriad_pro';
    src: url('/fonts/myriadpro-semibold-webfont.woff2') format('woff2'),
        url('/fonts/myriadpro-semibold-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;

}

@font-face {
    font-family: 'myriad_pro';
    src: url('/fonts/myriadpro-bold-webfont.woff2') format('woff2'),
        url('/fonts/myriadpro-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;

}


:root {
    /* --color-primary: #e41f35; */
    --color-primary:#0b5345;
    --color-body:#333;
    --color-bg:#f7f7f7;
    --color-border:#ccc;
    --border-radius:8px;
    --color-dark:#1a1a1a;

}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}




body{ 
    font-family: myriad_pro, Arial, Helvetica, sans-serif;
    color:var(--color-body);
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.3;
}

h1, h2, h3 {
    margin: 0;
}

h1 {

    font-size: 2.8rem;
    font-weight: 300;
    line-height: 3.3rem;
}

h2 {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 2.8rem;
}

h3 {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 2.6rem;
}

p {
    padding: 0.5rem 0;
    margin: 1rem 0;

}

strong {
    font-weight: 600;
   }

@media screen and (min-width:990px) {
    h1 {
        font-size: 3.5rem;
        line-height: 4.2rem;
    }
    
}


/* link */

.link {
    color: var(--color-primary);
    text-decoration: underline;
}

.link:hover {
    cursor: pointer;
}

.link-arrow {
    font-size: 1.4rem;
    color: var(--color-primary);
    margin-bottom: 1.2rem;
    text-decoration: none;

    
}

.link-arrow.link-arrow--dark {
    color: inherit;
    font-weight: 600;
}

.link-arrow:hover {
    cursor: pointer;
}

.link-arrow:hover span {
    text-decoration: underline;
}

.link-arrow::after {
    content: " »";
    color: var(--color-body);
}

.link-arrow.link-arrow--dark::after{
    color: var(--color-primary);
}


/* Lists*/

.list {
    list-style: none;
    padding-left:0;
    margin: 1rem 0;
    font-size: 1.6rem;
    
}

.list__item {
    line-height: 2.3rem;
    padding : 1rem 0 0.7rem 0
}

.list--bullet {
    list-style: disc;
    padding-left: 2rem;
    font-size: 1.4rem;
}
.list--large {
    font-size: 1.6rem;
}

.list--bullet .list__item {
    margin-bottom: .5rem;
    line-height: 2rem;
    padding: unset
}

@media screen and (min-width:990px) {
    .list {
        font-size: 1.5rem;
    }
    .list--bullet {
        font-size: 1.5rem;   
    }

    .list--large {
        font-size: 1.6rem;
    }
}

/* btn */


.btn {
    border-radius: 5px;
    border: 0;
    font-size: 1.4rem;
    line-height: 2rem;
    font-weight: 400;
    margin: 1rem 0;
    outline: 0;
    padding: 1rem 2rem;
    text-align: center;
    text-decoration: none;
    margin: 10px;
    margin-top: 10px;
}

.btn:hover {
    cursor: pointer;
}

.btn--primary {
    background: var(--color-primary);
    color: #fff;
}

.btn--white {
    background:white;
    color: var(--color-primary);
}

.btn--small {
    padding: 0.7rem 2rem;
}

/* icons */

.icon {
    width: 20px;
    height: 20px;
}

/* Inputs */

.input {
    padding: 1.2rem;
    outline: 0;
    color: #67768b;
    font-size: 1.6rem;
    line-height: 1;
    background-color: #ebebeb;
    border-radius: 2px;
    
}

::placeholder {
    color: #67768b;
}

.input-group {
    
    border-radius: 2px;
    display: flex;
    background-color: #ebebeb;
}

.input-group .input {
    border: 0;
    flex-grow: 1;
    padding: 1rem 1.2rem;
    
}

.input-group .btn {
    flex-shrink: 0;
    margin: 0; 
    border-radius: 2px;
}

/* card */

.card {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: #efefef;
    padding: 2.1rem;
}

.card__header{
    text-align: center;
    margin-bottom: 1rem;
}

.card__header .icon {
    width: 10rem;
    height: 10rem;
    margin-bottom: 1rem;

}

.card__header h3 {
    text-align: left;
}

.card__body .list {
    margin-bottom: 1rem;
}


/* facts  */


.fact {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
}

.fact .icon {
    width: 10rem;
    height: 10rem;
    margin-bottom: 2rem;
}

.fact__heading {
    font-weight: 700;
    font-size: 3.6rem;
    padding: 0;

}

.fact__description {
    font-size: 2.1rem;
    font-weight: 300;
    margin-top: 1rem;
    padding: 0;
}


/* media  */


.media__image {
    border-radius: 5px;
    overflow: hidden;
    height: 13vw;
    width: 28vw;
    object-fit: cover;
    max-height: 17rem;
    max-width: 36rem;
    
}

.media__header  {
    display: flex;
    gap:   1.8rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.media__heading {
    font-weight: 300;
    font-size: 2rem;
}

.media__description {
    font-weight: 400;
    font-size: 1.4rem;
    margin: 0;
    padding: 0;
    margin-bottom: 1rem;
}

.media {
    border-bottom: 1px solid var(--color-border);
    padding:  1rem 0;
}

@media screen and (min-width:768px) {
    .media__header{
        display: block;
    }

    .media__heading {
        font-weight: 600;
        font-size: 2rem;   
    }

    .media__description {
            
        font-size: 1.6rem;
    }

    .media {
        border-bottom: 0;
        padding: 1rem 0;   
    }

    .media__image {
        margin-bottom: 1rem;
    }
}


/* post */

.post {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    padding: 1rem 0;
    align-items: center;
}

.post__image {
    border-radius: 5px;
    overflow: hidden;
    height: 13vw;
    width: 28vw;
    object-fit: cover;
    max-height: 17rem;

}

.post__header {
    display: flex;
    gap: 1.8rem;
    align-items: center;
    margin-bottom: 1.5rem;
    color: inherit;
    text-decoration: none;
}

.post__heading {
    font-weight: 300;
    font-size: 2rem;
    transition: all 0.3s ease-out;
}


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

.post__description {
    font-weight: 400;
    font-size: 1.4rem;
    margin: 0;
    padding: 0;
    margin-bottom: 1rem;
}

.post .icon {
    padding: 2rem;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    color: var(--color-primary);

}

@media screen and (min-width:768px) {
    .post__header {
        display: block;
    }

    .post__heading {
        font-weight: 600;
        font-size: 2rem;
    }

    .post__description {

        font-size: 1.6rem;
    }

    .post {
        border-bottom: 0;
        padding: 1rem 0;
        display: block;
    }

    .post .icon {
        display: none;
    }

    .post__image {
        margin-bottom: 1rem;
        width: 100%;
    }
}


/* call out */

.call-out {
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
    
}

.call-out--primary {
    background: var(--color-primary);
}



.call-out__tag {
    font-size: 2rem;
    font-weight: 300;
    max-width: 850px;
    margin: 0 0 ;
    padding: 0;
    margin-bottom: 1rem;
    display: none;
}

.call-out--primary .call-out__tag {
    display: block;
    color: #fff;

}

.call-out__heading {
    font-size: 3.4rem;
    font-weight: 700;
    max-width: 850px;
    margin: 0;
    padding: 0;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.call-out--primary .call-out__heading {
    color: #fff;
    font-weight: 400;
}

.call-out__description {

    font-size: 2rem;
    font-weight: 300;
    max-width: 850px;
    margin: 0 0;
    padding: 0;
    margin-bottom: 1rem;

}

.call-out--primary .call-out__description {
    display: none;
}

.call-out--primary .btn {
    background: #fff;
    text-decoration: none;
    color: var(--color-primary);
}



/* author */

.author {
    display: flex;
    padding: 2rem;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    align-items: center;
}

.author__image {
    width: 10rem;
    height: 10rem;
    border-radius: 100%;
    border: 5px solid #EEE;
    margin-right: 1.5rem;
}

.author__name {
    font-weight: 300;
}

@media screen and (max-width:470px) {
    .author {
        padding: 1.5rem;
    }
    .author__image {
        width: 8rem;
        height: 8rem;
        margin-right: 1rem;
    }

    .author__name {
        font-size: 80%;  
     }
}


/* toc(table of content) */

.toc__header {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-body);
}

.toc__heading {
    font-weight: 300;
    line-height: 1.3;
}

.toc .list  .link-arrow {
    font-size: 1.9rem;
    font-weight: 300;
    transition: all 0.3s linear;
}

.toc .list .link-arrow:hover {
    color: var(--color-primary);
}


/* product card  */

.product-card {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    padding: 1rem 0;
    align-items: center;
}

a.product-card {
    text-decoration: none;
    color: inherit;
}

.product-card .icon {
    padding: 2rem;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    color: var(--color-primary);
}

.product-card__image {

    border-radius: 5px;
    overflow: hidden;
    height: 13vw;
    width: 28vw;
    object-fit: cover;
    max-height: 17rem;

}

.product-card__heading {
    font-weight: 300;


}

.product-card__container {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap:1rem;
    align-items: start;
}

.product-card__description {
    grid-column: 1 / -1;
    padding: 0;
    margin: 0;
}

@media screen and (min-width:540px) {
    .product-card__container picture {
       grid-row: 1 / span 2;
       align-self:self-start;
           
        }

    .product-card__heading {
        grid-column: 2;
        grid-row: 1;
        }
    
    .product-card__description {
        grid-column: 2;
        grid-row: 2;   
        }

}

@media screen and (min-width:767px) {
    .product-card {
        display: block;
        border: 1px solid var(--color-border);
        border-radius: 5px;
        padding-top: 0;
        padding-bottom: 2.5rem;
        background: #efefef;
    }


    .product-card .icon {
        display: none;
    }
    .product-card__container {
        display: block;
    }

    .product-card__image {
        width: 100%;
        height: 20rem;
        margin-bottom: 2rem;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;

  }

  .product-card__heading {
      font-size: 3rem;
      margin-bottom: 1.5rem;
      padding: 0 2rem;

  }

  .product-card__description {
    padding: 0 2rem;
  }
}


/* breadcrumb */

.breadcrumb {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    background: #fff;
    padding: .7rem 1.2rem;
    margin: 1rem 0;
    font-size: 1.4rem;
    font-weight: 400;
    color: #000;
    border-radius: var(--border-radius);
}

.breadcrumb__link a {
    color: #000;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb__link a:hover {
    color: var(--color-primary);
}

.breadcrumb__separator {
    margin: 0 0.7rem;
    user-select: none;
    font-weight: 400;
}

.breadcrumb__link:last-of-type a,
.breadcrumb__link a[aria-current="page"] {
    color: var(--color-primary);
    font-weight: 600; 
}

/* Grids */

.grid {
    display: grid;
}

@media screen and (min-width:768px) {
    .grid--1x2 {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (min-width:768px) {
    .grid--1x3 {
        grid-template-columns: 1fr 1fr 1fr;
    } }


/* collapsible */

.collapsible__header {
    display: flex;
    justify-content: space-between;
}

.collapsible__heading {
    margin-top: 0;
    font-size: 3rem;
}

.collapsible__chevron {
    transform: rotate(-90deg);
    transition: transform 0.3s;
}

.collapsible__content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s;
}

.collapsible--expanded .collapsible__chevron {
    transform: rotate(0);
}

.collapsible--expanded .collapsible__content {
    max-height: 100vh;
    opacity: 1; }


.collapsible--expanded + .collapsible__content {
    max-height: 100vh;
    opacity:1; 
}


/* faq */

.faq__header {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.faq__header .icon {
    display: inline-block;
    color: var(--color-primary);
    width: 3rem;
    height: 3rem;
    stroke-width: 0.5;
    flex-shrink: 0;
}

.faq__heading {
    font-weight: 400;
    font-size: 1.8rem;
    
}

.faq__header:hover {
    color: var(--color-primary);
    cursor: pointer;
}

.faq__content {
    padding-left: 3.25rem;
    font-weight: 300;
    
}

.faq__content > p {
    margin: 0;
    padding-top: 1.5rem;
    

}

.faq .icon--expanded {
    display:  none;
}

.faq.collapsible--expanded .icon--expanded {
    display: block;
    color: var(--color-body);
}

.faq.collapsible--expanded .icon--collapsed {
    display: none;
}


/* page */

.page-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    box-shadow: 1px 6px 20px rgba(0, 0, 0, 0.1),
        -1px 6px 20px rgba(0, 0, 0, 0.1);
}



/* block */

.block {
    padding-top: 4rem;
    padding-left: 70px;
    padding-right: 70px;
    
}

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

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

.block--blue {
    background: #a2d9ce;
    /* background: #E1BEE7; */
}

.block__content {
    padding-bottom: 4rem;
}

.block__header {
    margin-bottom:1.5rem;
}

.block__separator {
    border-bottom: 1px solid var(--color-border);
}

@media screen and (max-width:1280px)  {
    .block {
        padding-left: 5.5vw;
        padding-right: 5.5vw;
    }
}

/* feature */

.block--feature .grid {
    gap: 2rem;
}


@media screen and (min-width:768px) {
    .block--feature .grid {
            gap: 1.5rem;   }
}

@media screen and (min-width:900px) {
    .block--feature .grid {
        gap: 3rem;
    }
}

/* faq block */


.block--faq .block__header {
    margin-bottom: 2.5rem;
}

.block--faq .grid {
    column-gap: 3rem;
    row-gap: 1.5rem;
    
}

.block--faq__column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* info block */

.block--info .grid {
    gap: 2rem;
}


/* footer */
.footer-list__header{
    display: flex;
    align-items: center;
    cursor: pointer;
}

.footer-list__header .icon {
    color: #999;
    width: 4rem;
    height: 4rem;
    margin-right: 1rem;
}
.footer-list__heading {
    font-size: 2.4rem;
    font-weight: 300;
    color: #999;
}

.footer-list .icon--expanded {
    display: none;
}

.footer-list.collapsible--expanded .icon--expanded {
    display: block;
}

.footer-list.collapsible--expanded .icon--collapsed {
    display: none;
}

.footer-list {
    border-top: 1px solid #999;
    padding: 1rem 0;
}

.footer-list--last {
    border-bottom: 1px solid #999; 
}

.footer-list .list {
    margin-left: 5rem;
}

.footer-list .list__item, .footer-list .list__item >a {
    font-weight: 400;
    color: #999;
    text-decoration: none;
    
}

.footer-list .list__item:hover,
.footer-list .list__item>a:hover{
    color: #eee;
}

.footer__brand {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.footer__brand > img {
    width: 100%;
    max-width: 25rem;
}

.footer__copyright {
    color: #888;
    font-size: 1.2rem;
    text-align: center;
}


@media screen and (min-width:1024px) {

   .footer .block__content {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 3rem;
   }

   .footer-list .icon--expanded,
   .footer-list .icon--collapsed {
       display: none !important;
   }

   .footer-list .list {
       margin-left: 0;
   }

   .footer-list {
       
       padding: 0 ;
       border-top: 0;
   }

   .footer-list__heading {
    border-bottom: 1px solid #eee;
    width: 100%;
    padding-bottom: 2rem;
    color: #eee;
   }

   .footer-list--last {
       border-bottom: 0;
   }

   .footer__brand {
    order: -1;
    margin-top: 0;
   }

   .footer__copyright {
    margin-top: 2rem;
   }

   .footer .collapsible__content {
    max-height: 100vh;
    opacity: 1;

   }

}



/* hero */



.hero {
    position: relative;
    overflow: hidden;

}

.hero.block {
    padding-top: 0;
}

.hero__img {
    right: 0;
    position: absolute;
    height: 72vw;
    vertical-align: middle; 
}

.hero .block__header{
    margin-top: 77vw;
}

.hero__tagline {
    font-weight: 700;
    font-size: 1.7rem;
    padding: 0;
    margin-bottom: 2rem;
}

.hero__description {
    margin:0;
    padding: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: 300;
}

.hero .btn {
    margin: 0;
}

@media screen and (min-width:540px) {

    .hero__img {
        height: 40vw;
        z-index: 1;
    }

    .hero .block__header {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        margin-top: 0;
        max-width: 65vw;
        margin-top: 2rem;
        margin-left: 5.5vw;
    }

    .hero .block__content {
        margin-top: 42vw;
    }
}

@media screen and (min-width:768px) {
    .hero {
        height: 415px;
    }

    .hero .block__header{
        margin-left: 0;
    }
    
    .hero .block__header,
    .hero .block__content {
        position: relative;
        z-index: 2;
       max-width: 540px;
    }

    .hero .block__header{
        max-width: 640px;

    }
    .hero .block__content {
        margin-top: 0;
        
    }
    .hero__img {
        position: absolute;
        height: 100%;
        right: 0;
        top: 0;
    
        z-index: 1;
     
    }

    .hero .block__heading {

        font-size: 4rem;
        line-height: 1.3;
    }

    .hero .hero__tagline {
        font-size: 1.9rem;
    }
    
}

@media screen and (min-width:868px) {
    .hero .block__heading {
    
            font-size: 4.7rem;
            
        }

}


/* nav */

.block--nav {
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
   
}

.nav__list {
    width: 100%;
}


.block--nav .btn {
    margin:0;
}

.block--nav .link-arrow {
    font-size: 1.9rem;
    font-weight: 400;
}

.nav__menu {
    width: 4rem;
    height: 4rem;
    cursor: pointer;
}

.nav__login {
    width: 100%;
    margin-top: 1rem;
}

.nav__login--btn {
    display: none;
}



@media screen and (max-width:400px) {
    .nav__logo img {
        width: 68.7vw;
    }

    .nav__menu {
        width: 10vw;
        height: 10vw;
    }
}


@media screen and (min-width:768px) {
    .nav__menu {
        display: none;
    }

    .nav__login {
        width: auto;
        margin-top: 0;
    }

    .block--nav .collapsible__content {
        opacity: 1;
        max-height: 100vh;
    }

    .nav__list {
        display: flex;
        justify-content: space-between;
    }

    .nav__login--btn {
        display: inline-block;
    }

    .nav__login--link {
        display: none;
    }

   
}



/* article-header */

.block--article_header{
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* article topic  */

.block--article_topic .block__heading {

    font-size: 2.8rem;
    font-weight: 300;
}

.block--article_topic .block__content p {
    font-weight: 300;
}



@media screen and (min-width:768px) {
    .block--article_topic .block__heading{
        font-size: 4.2rem;
    }
    .block--article_topic .block__content p {
        font-size: 2rem;
    }
}


/* article  */

.article__container {
    display: flex;
    margin-bottom: 2rem;
    gap: 2rem;
}

.article .toc {
    flex: 1;
    display: none;
    position: sticky;
    top: 2rem;
    align-self: flex-start;
    max-height: 100vh;    
    overflow-y: auto;
}

.article__image {
    width: 100%;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.article .article__content {
    flex: 3;
    
}

.article__content .list--large {
    margin-bottom: 2rem;
}

.article__content > article {
    margin-bottom: 2rem;
}



@media screen and (min-width:768px) {
    .article .toc {
        display: block;
       
    }

    .article__image {
        max-width: 90%;
    }
}

@media screen and (min-width:920px) {
    .article__image {
        max-width: 70%;
    }
}


/* table  */ 

table {
    border-collapse: separate;
    border: solid var(--color-border) 1px;
    border-radius: 5px;
    width: 100%;
    text-align: center;
    background: #efefef;
    font-size: 1.7rem;
}

td,
th {
    border-left: solid var(--color-border) 1px;
    border-top: solid var(--color-border) 1px;
    padding: 5px;
}

th {
    /* background-color: blue; */
    border-top: none;
}

td:first-child,
th:first-child {
    border-left: none;
}


/* question block  */

.block--question .block__content {
    padding-bottom: 0;
}

.block__img {
    width: 100%;
    object-fit: cover;
}

@media screen and (min-width:1040px) {
    .block--question__1x2 {
        display: flex;
        gap: 3rem;
    }

    .block--question__text {
        flex: 5;
    }

    .block--question__img {
            flex: 2;
        }


    
}

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


/* price table  */



@media screen and (min-width:1040px) {

    .price_table tr {
            text-align: left;
        }
    
        .price_table th {
            text-align: center;   }
}



@media screen and (max-width:520px) {
    .sm_hide_column {
        display: none;
    }
}