@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 { font-family: 'TTNorms-Medium';}

span { color: #00594C; font-family: 'Nekst Light';}

figure img { -o-object-fit: contain;object-fit: contain; }

.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;}

/*@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 { width: 100%; height: 489px; top: -105px; left: 0;}

}

/*@media (min-width: 1024px)*/

@media (min-width: 1024px) {
	.section-two img { top: -335px; }
}

@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; height: auto; top: -110px; 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 { top: -150px; max-width: 626px; }

}