*{padding:0;margin:0;}

 /* GLOBAL STYLES */
:root {
	--pad1:1.5em;
    --acc1: #a12020;
    --acc2: #a9f0d3;
    
}
h1,h2,h3,h4,h5,h6 {
    font-family: 'Poppins',sans-serif;
    font-weight: 400;
    padding-bottom: 1em;
    line-height: 1.2em;
}
.pad0{padding-bottom:0}
.pad1{padding-bottom: 1em;}
.f0{font-size: 2.2em!important;}
.f1{font-size: 1.6em!important;}
.f2{font-size: 1.2em!important;}
.c1{background-color: #f4cd19!important; color:#000!important;border: 1px solid #c3a414}
.c2{
	background-color: #273b65!important;
	color: #fff!important;
}
.c3{
	background-color: #ECE4AE!important;
}
.c4 {
	background-color: #2d58b6!important;
	color: #FFF;
}

p,.spacer li {
	padding-bottom: 1em;
	line-height: 1.5em;
}
article p:last-of-type,article li:last-of-type {
    padding-bottom:0;
}
article ol,article ul{padding:0em 3em var(--pad1) 3em;}
article:after {
    content:"";
    display:block;
    clear:both;
   }
ul.check,ul.cross {
    list-style: none;
    padding-left: 1.2em;
    position: relative;
    margin-left: 2em;
}
ul.check li:not(:last-child), ul.cross li:not(:last-child) {
    margin-bottom: 0.5em;
}
ul.check li:before,ul.cross li:before {
	font-family: "icomain";
    display: inline-block;
    font-size: 1.5em;
    position: absolute;
    margin-left:-36px;
    margin-top:2px;
}
ul.check li:before {
    content: '\e010';
    color: rgb(51, 153, 119);
}
ul.cross li:before {
    content: '\e011';
    color: rgb(160, 29, 35);
}
article li {
    line-height: var(--pad1);
}
article img {
    max-width: 100%;
    height: auto;
    padding-bottom: var(--pad1);
}

article .img-left {
    float: left;
    padding-right: 1em;
    padding-bottom: 1em;
}
article .img-right {
    float: right;
    padding-left: 1em;
    padding-bottom: 1em;
}
article .img-def {
    display: block;
    margin:0 auto;
}
article .img-main {
    display: block;
    margin:0 auto;
}
.right{text-align:right}
.center{text-align:center}
/* GLOBAL STYLES - END */



/* HEADER NAVIGATION */
.logo-wrap {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap:10px;
    background-color: var(--acc1);
    padding-left: 10px;
    max-width: 1000px;
    margin:0 auto;
}
.logo {
	width: 70%;
	max-width: 250px;
	background-image: url(../img/logo-dark.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}
footer .logo {
	opacity: 0.7;
}

header input,footer input{display:none;}
header input[type=checkbox]:checked + nav, footer input[type=checkbox]:checked + nav{
	max-height: 50em;
}
label.burger::before {
	font-family: "icomain";
	content: "\e001";
	color: #fff;
	font-size: 2em;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}
nav {
    background-color:#681c1c;
    max-height:0;
    width: 100%;
    overflow:hidden;
    transition: all 0.5s ease-in-out;
    font-family: 'Poppins';
    font-weight: 400;
}
#subheader-nav,#subheader-nav2 {
	position: relative;
}
#subheader-nav + ul,#subheader-nav2 + ul {
	max-height: 0em;
	overflow: auto;
	transition: all 0.5s;
	z-index: 99;
}
#subheader-nav:checked + ul,#subheader-nav2:checked + ul {
	max-height: 30em;
}
nav ul{list-style:none;}
nav ul li{border-top:1px solid var(--acc1)}
nav ul li label,nav ul li a {
	text-decoration: none;
	color: var(--acc2);
	display: block;
	padding: 15px;
}
nav ul ul li {
	text-decoration: none;
	color: var(--acc2);
	display: block;
	padding: 5px;
}
#subheader-nav+ul,#subheader-nav2+ul{
	background-color: #772020;
	overflow: hidden;
}
nav ul ul li{padding-left:30px}
nav ul li label{cursor:pointer}
nav ul li label:after {
    font-family: icomain;
    content: '\e005';
    font-size: 15px;
    display: inline-block;
    padding-left: 10px;
}
/* HEADER NAVIGATION - END */



/* MAIN SECTIONS */
body,html{height:100%}
body {display: flex; flex-direction: column;font-size: 19px;font-family:system-ui,sans-serif;}
main { flex: 1 0 auto;}
article {max-width: 1000px; margin: 0 auto;padding:30px;}
.hgroup ul {
	list-style: none;
	text-align: left;
	padding-bottom: 1em;
	padding-right: 1em;
	padding-left: 1em;
}
.hgroup ul li {
	line-height: 1em;
	display: flex;
	align-items: center;
	padding-bottom: 0.5em;
}
.hgroup ul li:before {
    content: '\e008';
    font-family: icomain;
    font-size: 1.2em;
    color: rgb(31, 160, 132);
    padding-right: 8px;
}

/* CONTENT */
main h1{font-size:1.2em;padding-bottom:.6em;}
main h2{font-size:1.1em;}
main h3{font-size:0.9em;}
section {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 1em;
    max-width: 1000px;
    margin:0 auto;
    text-align: center;
}
.section-3col>div>img{
	width: 200px;
	height: auto;
	border: 3px solid #FFF;
	border-radius:50%;
}
.section-3col>div>h2{
	margin-top: 1em;
	font-weight: bold;
}
section h1,section h2,section h3,section h4,section p {
    line-height: 1.1em;
}
.hero-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hero-box img    {
	max-width: 100%;
	height: auto;
	padding-bottom: 1em;
	cursor: pointer;
}
.wrap-testimonials {
    padding: 1em;
    max-width: 1000px;
    margin:0 auto;
    display: flex;
    flex-direction: column;
    gap:1em;
}
.box-testimonials {
    background-color: #fff;
    border-radius: 10px;
    padding: 1.5em;
    color: #000;
}
.box-testimonials img {
    border-radius: 50%;
    display: block;
    margin: 0 auto 1.5em auto;
    width: 180px;
    height: auto;
}
.cred {
    text-align: right;
}
.cred h4 {
    padding-bottom: 0;
    font-size: 1.2em;
    font-weight: 700;
}
.wrap-ingredients {
    margin:1em auto;
}
.box-ingredients img {
    display: block;
    margin:0 auto;
}
.box-ingredients h4 {
    text-align: center;
}
.box-ingredients p {
    font-size: 0.9em;
    line-height: 1.3em;
}
.box-ingredients ul {
    list-style: none;
    padding: 0;
    margin-top: 1em;
}
.box-ingredients ul li {
    display: flex;
    align-items: flex-start;
    line-height: 1.1em;
    margin-bottom: 1em;
}
.box-ingredients ul li:before {
    content: '\e010';
    font-family: icomain;
    font-size: 1.1em;
    padding-right: 8px;
}
a.cta {
    background-color: var(--acc1);
    color: #fff;
    font-size: 0.9em;
    text-decoration: none;
    padding: 1em 2em;
    border-radius: 3px;
    line-height: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
	transition:all .2s ease-in;
}
a.cta:hover {
    opacity:.8 !important;
}
a.wide {
    display: flex;
}
a.icon:before {
    content: '\e006';
    font-family: "icomain";
    font-size: 1.2em;
    display: inline-block;
    padding-right: 8px;
}
/* CONTENT - END */
/* MAIN SECTIONS - END */




/* FOOTER */
footer { 
    margin-top: 20px;
    flex-shrink: 0;
    position: relative;
}
footer nav {
    position: absolute;
    bottom: 100%;
}
.copy {
	max-width: 1000px;
	font-size: 14px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 15px;
	color: #999;
}
/* FOOTER - END */


@media only screen and (min-width: 768px) {
/* NAVIGATION*/
.logo-wrap {
    background-color: transparent;
    padding: 10px;
}
.logo {
	width: 70%;
	max-width: 400px;
	background-image: url(../img/logo.png);
	min-height: 47px;
}
label {
    display: none;
}
nav {
    max-height:unset;
    background-color: var(--acc1);
}  
nav ul {
    display: flex;
    max-width: 1040px;
    margin:0 auto;
}
nav ul + li {
    position: relative;
}

nav ul li label,nav ul li a {
	color: #fff;
	padding: 10px 20px;
	text-transform: uppercase;
	font-size: 17px;
}
nav ul ul li {
	padding: 0px;
	padding-left: 0px;
}
footer nav ul li a,nav ul li label {
	font-size: 15px;
}
nav ul ul li, nav ul ul li a {
	color: #FFF;
}
nav ul ul li a {
	padding-left:30px;
}
nav ul li ul li a:hover {
	opacity: 0.8;
	background-color: #BF7D7D;
	}
nav ul li label:after {
    padding-left: 5px;
    color: #d87575;
}
#subheader-nav + ul,#subheader-nav2 + ul {
	background-color: #b36666;
}
nav ul ul {
	display: block;
	position: absolute;
	width: 300px;
	bottom: 139px;
}
nav ul li {
    border: none;
}
/* NAVIGATION - END */   



/* CONTENT */
section {
    flex-direction: row;
    align-items: center;
    text-align: left;
}
section>div:nth-of-type(1){flex:5;}
section>div:nth-of-type(2){flex:3;text-align: right;}
.section-3col>div {
	flex: 1 !important;
	text-align: unset !important;
}
.hero-box {
    flex-direction: row;
    gap:4em;
}
.hero-box img{width:45%; padding-bottom:0em;}
.hero-box .hgroup{width:55%}
.hgroup ul {
	padding-right: 3em;
	padding-left: 3em;
}
.hgroup ul li {
    font-size: 1.1em;
	padding-bottom: 1em;
}
article h1 {font-size: 1.8em; padding-bottom: 1em;}
article h2 {font-size: 1.3em;}
article h3 {font-size: 1.1em;}
article .img-def {
    float: left;
    padding-right: 1em; padding-bottom: 1em;
    max-width: 450px;
    height: auto;
}
.wrap-testimonials {
    padding: 1em;
    max-width: 1000px;
    margin:0 auto;
    flex-direction: row;
    flex-wrap: wrap;
}
.box-testimonials {
    flex: 1 1 300px;
}
.wrap-testimonials img {
    float:left;
    margin-right: 1em;
}
.wrap-ingredients {
    display: flex;
    flex-wrap: wrap;
    gap:1em;
}
.box-ingredients {
    flex: 1 1 300px;
}
.box-ingredients img {
    max-width: 240px;
}
.wrap-pros {
    display: flex;
    gap:1em;
}
.box-pros {
    flex: 1;
}
/* CONTENT - END */

/* FOOTER */
footer nav {
    position: initial;
}
/* FOOTER-END */
}