@font-face {
    font-family: 'Nekst Light';
    src: url('/font/Nekst-Light.eot');
src: url('/font/Nekst-Light.eot#iefix') format('embedded-opentype'), url('/font/Nekst-Light.woff2') format('woff2'), url('/font/Nekst-Light.woff') format('woff'), url('/font/Nekst-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
        }
@font-face {
    font-family: 'Nekst SemiBold';
    src: url('/font/Nekst-SemiBold.eot');
src: url('/font/Nekst-SemiBold.eot#iefix') format('embedded-opentype'), url('/font/Nekst-SemiBold.woff2') format('woff2'), url('/font/Nekst-SemiBold.woff') format('woff'), url('/font/Nekst-SemiBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Nekst-Medium';
    src: url('/font/Nekst-Medium.woff2') format('woff2'), url('/font/Nekst-Medium.woff') format('woff'), url('/font/Nekst-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'TTNorms-Medium';
    src: url('/font/TTNorms-Medium.eot');
src: url('/font/TTNorms-Medium.eot#iefix') format('embedded-opentype'), url('/font/TTNorms-Medium.woff2') format('woff2'), url('/font/TTNorms-Medium.woff') format('woff'), url('/font/TTNorms-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
  --space-unit:  1em;
}

:root, * {
  --space-xxxxs: calc(0.125 * var(--space-unit)); 

  --component-padding: var(--space-sm);
}

@supports(--css: variables) {
  @include breakpoint(md) {
    :root {
      --space-unit:  1.25em;
    }
  }
}

html { height: 100%; min-width: 320px; max-width: 1920px; }

body {
	min-height: 100%;
	background-image: url('/img/algadetox.jpg');
	background-attachment: fixed;
	background-repeat: no-repeat;
}

h1, p { color: #00594C;}
h1, span {font-size:30px;}
h1 { font-family: 'Nekst SemiBold';}
p, li { font-family: 'TTNorms-Medium';}

span { color: #00594C; font-family: 'Nekst Light';}

figure img { -o-object-fit: contain;object-fit: contain; }

.btn--landing { font-family: 'Nekst SemiBold'; font-size: 14px; color: #00574a; border-radius: 0; text-transform: uppercase;letter-spacing: 0.05em; padding: 13px 35px; }

.btn--landing .arrow {
    width: 13px;
    height: 15px;
    margin-left: 15px;
    -webkit-transition: all 0.2s ease;   -o-transition: all 0.2s ease;   transition: all 0.2s ease;
	-webkit-transform: rotateZ(90deg);    -ms-transform: rotate(90deg);    transform: rotateZ(90deg);
    background-image: url("data:image/svg+xml,%3Csvg width='13' height='15' viewBox='0 0 13 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5 8.75L6.5 13.75M6.5 13.75L1.5 8.75M6.5 13.75L6.5 1.25' stroke='%2300594C' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E%0A");
}
.btn--landing:hover .arrow {
    transform: rotateZ(90deg) scale(1.1);
}

.section-one p { font-size:13px; }
.sub--h1 h1 { margin-bottom: 0;}

.section-two {  position: relative; background-image: url('/img/alga-txt-block-back.jpg'); background-size: cover; }
.section-two p { color: #FFFFFF; font-size: 13px; }
.section-two p:not(:last-child) { margin-bottom: 30px; }
.section-two p:last-child { margin-bottom: 0; }
.section-two figure {}
.section-two img { position: absolute; height: 225px; top: -106px; left: 20px;}

/* -------------------------------- 

File#: _1_3d-drawer
Title: 3D Drawer

-------------------------------- */
.td-drawer {
  position: fixed;
  z-index: var(--z-index-overlay);
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0);
  transition: background-color 0.3s, visibility 0s 0.3s;
  visibility: hidden;
}
.td-drawer:focus {
  outline: none;
}

.td-drawer--is-visible {
  visibility: visible;
  background-color: hsl(169.46deg 55.09% 28.43% / 69%);
  transition: background-color 0.3s, visibility 0s;
}

.td-drawer__content {
  position: absolute;
  top: 0;
  right: 0;
  width: 90%;
  max-width: 720px;
  height: 100%;
  background-color: var(--color-bg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s var(--ease-out);
}
.td-drawer--left .td-drawer__content {
  right: auto;
  left: 0;
  transform: translateX(-100%);
}
.td-drawer--bottom .td-drawer__content {
  width: 100%;
  max-width: none;
  height: 70%;
  max-height: 720px;
  transform: translateY(100%);
  top: auto;
  bottom: 0;
}
.td-drawer--is-visible .td-drawer__content {
  transform: translateX(0);
}
.td-drawer--is-visible.td-drawer--bottom .td-drawer__content {
  transform: translateY(0);
}

.td-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: var(--color-bg);
  border-bottom: 1px solid hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
}

.td-drawer__header h4 {
    color: #00594C;
    font-family: 'Nekst Light';
}

.td-drawer__close-btn {
  display: flex;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-bg-light);
  box-shadow: var(--inner-glow), var(--shadow-ring), var(--shadow-xs);
  transition: 0.2s;
  cursor: pointer;
}
.td-drawer__close-btn:hover {
  background-color: var(--color-bg-lighter);
  box-shadow: var(--inner-glow), var(--shadow-ring), var(--shadow-sm);
}
.td-drawer__close-btn .icon {
  --size: 16px;
  display: block;
  margin: auto;
  color: var(--color-contrast-higher);
}

.td-drawer__body {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.td-drawer__body p, .td-drawer__header p, .td-drawer__body li, .td-drawer__body span {
	font-size: 0.92em;
	color: var(--color-contrast-higher,hsl(204deg,28%,7%));
}

.td-drawer__body span, .header-phone {
	color: #00594C;
	font-family: 'TTNorms-Medium';
	font-weight:bold;
}

.td-drawer-main {
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
  transition: transform 0.3s var(--ease-out);
}

.td-drawer-main--drawer-is-visible {
  transform: scale(0.9);
  overflow: hidden;
}





/*@media (min-width: 375px)*/

@media (min-width: 375px) {
body {
	background-image: url('/img/algadetox-375.jpg');
}

}

/*@media (min-width: 768px)*/

@media (min-width: 768px) {
	
:root, * {
  --component-padding: var(--space-md);
}

body { height: auto; background-image: url('/img/algadetox-768.jpg'); }

.section-one p { font-size:16px; }
.section-two { background-image: url('/img/alga-txt-block-back-768.jpg'); }
.section-two p { font-size:16px; }
.section-two figure { position: relative; }
.section-two img { position: relative; width: 100%; height: auto; top: 0;left: 0;margin: 85px 0; padding-right: 29px; }

}

/*@media (min-width: 1024px)*/

@media (min-width: 1024px) {
.section-two img { position: absolute; top: -247px; width: 400px; height: auto; margin: 0; padding-right: 29px; }
}

@media (min-width: 1280px) {

    body { background-image: url('/img/algadetox-1920.jpg'); }
	figure img { max-width: 490px; }
	h1, span {font-size:40px;}
	.section-two { background-image: url('/img/alga-txt-block-back-1440.jpg'); }
	.section-two figure {  height: 340px; }
    .section-two img { margin: 0 auto; padding: 0; height: 110%; top: -60px; left: 0; right: 0;}
	.section-one p { font-size:18px; }
	.section-two p { font-size:16px; }
}

/*@media (min-width: 1440px)*/

@media (min-width: 1440px) {
}

/*@media (min-width: 1920px)*/

@media (min-width: 1920px) {
	:root, * {
    --component-padding: var(--space-xl);
}
	
	.section-one p { font-size:20px; padding-right: var(--space-xl); }
	.section-two p { font-size:20px; }
	.section-two { background-image: url('/img/alga-txt-block-back-1920.jpg'); }
	.section-two .article--block { padding-left: calc(38% - 2 * var(--component-padding)); }
	.section-two figure { height: 420px; }
	.section-two img { width: 100%; max-width: 626px; top: -80px;  }
	.td-drawer__body p, .td-drawer__body li, .td-drawer__body span { font-size: 1.15em; }
	.td-drawer__header h4 { font-size: 1.35em;}
	.td-drawer__content { max-width: 1024px; }

}