@font-face {
    font-family: 'Suse';
    src: url('../fonts/SUSE-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Suse';
    src: url('../fonts/SUSE-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Suse';
    src: url('../fonts/SUSE-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Suse';
    src: url('../fonts/SUSE-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Suse';
    src: url('../fonts/SUSE-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Suse';
    src: url('../fonts/SUSE-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Suse';
    src: url('../fonts/SUSE-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Suse';
    src: url('../fonts/SUSE-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
  }
  
  
  
  @font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-BlackItalic.woff') format('woff');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Black.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
  }

@layer utilities {
    /* This class only exists for backwards compatibility, */
    /* The default is applied in tailwind.config.js since Hyvä 1.2.0 */
    .text-sans-serif {
        font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    }
}

html {
    @apply antialiased;

    font-size:16px;
    @screen 2xl{
        font-size:20px;
    }
}

body {
    width:100vw;
    overflow-x: hidden;
    @apply text-gray-darker leading-normal tracking-normal;
}

h1,h2{
  font-size: 2.25rem;
  line-height: 3rem;
  @apply font-medium py-5;
}


main#maincontent .container h1.product-title {
  font-size: 2.4rem;
  line-height: 3.4rem;
  padding: 0;
}

h4,main#maincontent #active-filtering-heading{
  font-size: 1rem;
  line-height: 1.25rem;
  @apply font-medium font-suse font-bold
}

main#maincontent #active-filtering-heading{
  @apply pb-3 ;
}

p{
  font-size: 1rem;
  line-height: 1.4rem;
}

.large{
  font-size: 1.4rem;
  line-height: 1.8rem;
}

main#maincontent div.columns h1,
main#maincontent div.columns h2,
main#maincontent div.columns h3{
  @apply text-4xl py-8;

}
.catalog-category-view main#maincontent div.columns h3{
  @apply text-2xl py-8;

}

.catalog-category-view p a:hover{
  @apply text-giftdesign;
}

ul.navCategory li.childCategory{
	@apply py-1;
}

ul.navCategory > li.childCategory > a {
  font-size: 0.8rem;
  font-weight: 600;
}

body.catalog-category-view .category-view .description-box h1,
body.catalog-category-view .category-view .description-box h2{
  line-height: 1.7rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.category-bottom-description p{
  font-size:0.8rem;
  line-height:1rem;
}

div.catalog-category-view main#maincontent .columns div.category-bottom-description h2{
  font-size:2rem;
}

.category-bottom-description a{
  @apply text-giftdesign;
}

.contact-details{
  font-size:0.9rem;
  @apply text-gray
}



main#maincontent div.columns .contact-details h3{
  font-size:1rem;
  @apply p-0
}


main#maincontent div.columns h2.block-title{
  @apply py-4;
}

main#maincontent div.columns div.description h2{
 padding-top:1rem;
 padding-bottom: 1rem;
 margin-top:0.5rem;
 margin-bottom:0.5rem;
}

main#maincontent div.columns div.description br{
 margin-top:0;
 margin-bottom:0;
}

.cms-index-index main#maincontent div.columns h1,
.cms-index-index main#maincontent div.columns h2,
.cms-index-index main#maincontent div.columns h3,
.contact h2,
.contact h1{
  @apply text-4xl flex pt-8 pb-12 justify-center content-center;
}


fle
main#maincontent div.columns .section_products h2,
main#maincontent div.columns .section_products h3{
  @apply text-2xl justify-start;

}

html.blog-page main#maincontent div.columns h1{
  @apply text-xl
}
html.blog-page main#maincontent div.columns h2{
  @apply text-lg
}
html.blog-page main#maincontent div.columns h3{
  @apply text-base
}


main#maincontent div.columns .post-title-wrap h1,
main#maincontent div.columns .post-title-wrap h2,
main#maincontent div.columns .post-title-wrap h3{
  @apply pb-4 pt-8;
}

 
main#maincontent div.columns h1.line::after,
main#maincontent div.columns h2.line::after,
main#maincontent div.columns h3.line::after{
  content:"";
  display:inline;
  position:relative;
  flex:1 1 auto;
  height:1px;
  margin:auto;
  margin-left: 1em;
  @apply bg-secondary;
}

main#maincontent div.columns h1.line::before,
main#maincontent div.columns h2.line::before,
main#maincontent div.columns h3.line::before{
  content:"";
  display:inline;
  position:relative;
  flex:1 1 auto;
  min-width: 10%;
  height:1px;
  margin: auto;
  margin-right: 1em;
  @apply bg-secondary;
}

main#maincontent div.columns h3.line-right,
h3.line-right{
  @apply text-2xl justify-start items-start content-start
}

main#maincontent div.columns h2.line-right,
h2.line-right
{
  @apply text-xl flex justify-start items-start content-start;
}

main#maincontent div.columns h1.line-right,
h1.line-right{
  @apply text-3xl justify-start content-start
}

main#maincontent div.columns h3.line-right::after,
main#maincontent div.columns h1.line-right::after,
main#maincontent div.columns h2.line-right::after,
.line-right::after{
  content:"";
  display:inline;
  position:relative;
  flex:1 1 auto;
  height:1px;
  margin:auto;
  margin-left: 1em;
  @apply bg-secondary;
}

body.blog-page-list main#maincontent div.columns h3.line-right{
  @apply pb-1 pt-3;
}

body.blog-page main ul{
  list-style: disc;
  padding-left:1em;
}

body.blog-page main ul>li{
  line-height: 40px;
  @apply text-gray
}

body.blog-page main ul>li:hover{
  @apply text-giftdesign
}

body.blog-page main ul>li::marker{
  @apply text-giftdesign text-base;
}

.block-content ol>li::marker{
  @apply text-gray
}


main#maincontent .price_container h2.price{
  padding-top:0;
  padding-bottom: 1rem;
}



main#maincontent div.cityContent h1{
  @apply pt-0 text-4xl;
}

main#maincontent div.cityContent a{
  @apply text-giftdesign
}

main#maincontent div.cityContent h2,
main#maincontent div.cityContent h3{
  font-size: 1.40rem;
  line-height: 1.75rem;
}


main#maincontent div.citySide>div h3{
  font-size:24px;
  @apply text-gray-darker pt-0 pb-4 border-b border-gray-200 font-medium mb-4 
}


main#maincontent div.citySide>div p{
  line-height: 2.4rem;
}

main#maincontent .slide h3.grant_total{
  @apply text-xl p-0;;
}

main#maincontent div.slide h2.summary{
  @apply text-2xl py-4;

  @screen xl{
    @apply text-3xl;
  }
}