* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
body, html { height: 100% !important; width: 100%; min-width: 320px; font-family: "open sans", sans-serif; -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); font-size: 1em; margin-top: 0px !important; }
.articleR { margin-top: 0px; min-height: 600px; }
.fullPageBG { top: 0; left: 0; height: 100%; width: 100%; position: fixed; background-size: cover; background-position: right; z-index: -1; }
.innerContainer { max-width: 1200px; margin: 0px auto; position: relative; }
.section { padding-top: 0px; }
p { line-height: 2em; font-size: 1.05em; }
h1, h2, h3, h4, h5, h6 { font-family: "open sans", sans-serif; padding-bottom: 0.25em; }
h1 { font-size: 3.5em; }
hr { border-top: 1px dotted #B0B0B0; }
.credits { border-top: 1px dotted; }
a, a:visited { color: currentColor; text-decoration: none; }
.button { background-color: #000000; padding: 20px 30px; text-transform: uppercase; color: #FFFFFF; font-weight: 600; border-radius: 30px; border: 0px !important; clear: left; margin: 20px 0; display: inline-block; width: auto !important; }
.button:hover, .button:visited { color: #FFFFFF; }
#modalBG.desktop { display: none; }
#modalBG.responsive { content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.693); z-index: 1; }
.Slide { padding: 130px 0 180px; }
.Slide p { max-width: 600px; font-size: 20px; font-weight: 100; }
h2, h3, h4, h5 { font-weight: 100; }
.babyProducts h1 { font-size: 5.2em; letter-spacing: -6px; line-height: 0.9em; padding-top: 20px; }
.babyProducts h2 { font-size: 3em; letter-spacing: -3px; line-height: 0.9em; }
h4 { font-size: 2.4em; line-height: 1em; color: #5B5B5B; }
.button, .NarrowFeedbackForm a.dnnPrimaryAction { background-image: none; -webkit-box-shadow: none; box-shadow: none; text-shadow: none; }
/*NAV*/
.headerDiv { width: 100%; text-align: center; background-color: #FFFFFF; height: 103px; }
.header { max-width: 1200px; width: 100%; margin: 0px auto; }
.header .logo { float: left; max-width: 150px; margin-top: 5px; }
ul.topnav { list-style-type: none; margin: 20px; padding: 0; overflow: hidden; background-color: #FFFFFF; float: right; z-index: 10; }
ul.topnav li { float: left; }
ul.topnav li a { display: inline-block; color: #000000; text-align: center; padding: 14px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; }
ul.topnav li.icon { display: none; }
.homePage .Slide { background-color: #FFFFFF; text-align: center !important; }
.headerSlide { background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; border: 1px solid #FFFFFF; height: 70vh; min-height: 726px; }
.headerSlide .innerContainer { min-height: 100%; }
/*CONTACT US*/
.contactForm { max-width: 600px; margin: 30px auto; padding: 30px; min-height: 80vh; }
.NarrowFeedbackForm { background-color: rgba(255, 255, 255, 0.865); padding: 30px; border-radius: 30px; max-width: 520px; margin: 30px auto; }
.NarrowFeedbackForm * { text-align: left !important; }
.NarrowFeedbackForm label { display: block; text-transform: uppercase; padding: 10px 0; }
.NarrowFeedbackForm input:not(.button), .NarrowFeedbackForm textarea, .NarrowFeedbackForm select { padding: 12px; margin-bottom: 20px; font-size: 17px; width: 100%; border: 1px dashed #9E9E9E !important; }
.NarrowFeedbackForm select { width: auto !important; }
.NarrowFeedbackForm .button { background-color: #81CEC9; border: 0px !important; width: auto !important; -webkit-appearance: none; }
.NarrowFeedbackForm textarea { height: 150px; }
p.disclaimer { font-size: 11px; padding-top: 0px; clear: left; font-style: italic; }
.contactForm.Thanks .innerContainer { padding: 30px; min-height: 0; text-align: center; }
.contactForm.Thanks .innerContainer h1 { color: #81CEC9; padding: 0px; }
.NarrowFeedbackForm .required { color: #44B1AA; font-weight: 400; }
.contactForm.Thanks p { color: #FFFFFF; }
/*OUR STORY*/
.ourStory { float: left; width: 100%; }
.ourStory .innerContainer { padding: 30px; }
.ourStory .innerContainer h1 { max-width: 700px; }
.ourStory .innerContainer h2, .ourStory .innerContainer p { max-width: 500px; }
/*PRODUCTS*/
.products { width: 100%; max-width: 1200px; position: relative; margin: 0px auto; }
.products.HP { border-top: 1px dotted #CCCCCC; padding-top: 50px; text-align: center; }
.products.HP h2 { text-align: center; font-weight: 100; font-size: 2em; padding: 30px 30px 10px 30px; }
.products .productIntro { display: block; padding: 1% 10% 0 5%; float: left; margin: 80px auto 0px; }
.products .productIntro p { padding: 0px; }
.products .productIntro img { float: left; margin: 0px 30px 0px; }
.product { text-align: center; width: 32%; margin-right: 1%; min-width: 200px; height: auto; display: inline-block; vertical-align: top; position: relative; }
.product p { font-size: 1em; }
.product .col { min-height: auto; border: 0px; }
.product img { width: 100%; margin-bottom: 15px; float: left; padding: 5% 5% 0% 5%; }
.product p:after { margin: 5px auto; display: block; width: 100px; font-size: 11px; padding: 5px 10px; font-weight: 600; text-transform: uppercase; background-color: rgba(255, 255, 255, 0.812); border: 1px dotted; }
.homePage .product p:after { content: 'view the range'; }
.productList .product p:after { content: 'more info'; margin-top: 20px; }
.product p, .product h4 { padding: 10px 10%; line-height: 1.5em; }
.product h4 { font-size: 1.5em; font-weight: 400; line-height: 1.2em; }
.ingredientMoreInfo { padding: 0px !important; margin: 0px !important; }
.ingredientImage { height: 30%; min-height: 350px; background: center / cover no-repeat; width: 100%; margin-bottom: 30px; }
.productMoreInfo .productImage { position: relative; float: left; left: 0; top: 0; }
.productMoreInfo .productImage img { width: 100%; max-width: 500px; }
.productMoreInfo h4 { font-weight: 100; font-size: 2em; }
/*--PRODUCT MORE INFO*/
.productMoreInfo { max-width: 1200px; margin: 20px auto 0px; }
.productMoreInfo .col { width: 50%; float: right; border: 0px !important; }
.productMoreInfo .col .info { width: 100%; font-size: 0.9em; position: relative; padding: 5px 0px; min-height: 0px; }
.productMoreInfo .ingredients img { border-radius: 50%; width: 15%; margin: 25px 20px; float: right; clear: right; }
.productMoreInfo .ingredients p, .productMoreInfo .ingredients h4 { width: 85%; }
.productMoreInfo .col .info.ingredients h5 { font-weight: 100; font-size: 0.95em; letter-spacing: 0.05em; }
.productMoreInfo .col .info.ingredients h5, .testimonials p, .info.promise p { border-top: 1px dotted #B0B0B0; margin-top: 10px; padding-top: 20px; padding-bottom: 5px; }
.testimonials p { line-height: 1.8em; font-style: italic; padding-left: 40px; border-left: 3px solid #999999; padding-top: 20px !important; margin: 20px auto 60px !important; quotes: "\201C" "\201D"; }
.testimonials p span { margin-right: 10px; font-weight: 100; font-size: 22px; }
.testimonials p:before { color: #CCC; content: open-quote; font-size: 5em; font-family: Georgia, serif; line-height: 0.1em; margin-right: 0.105em; margin-left: -15px; vertical-align: -0.4em; }
/*.productMoreInfo .productImage { (*width: 50%;*) min-height: 80%; max-height: 500px; top: 10%; left: 180px; }*/
.productMoreInfo ul li { padding: 10px; font-size: 1.05em; line-height: 1.7em; }
/*----- FOOTER*/
.footerNav { text-align: center; position: relative; bottom: 0px; font-size: 10px; background-color: #FFFFFF; width: 100%; color: #6A6A6A; float: left; clear: left; padding: 10px; }
.footerDiv * { display: inline-block; }
.dnnLogin { height: 100vh; width: 100%; text-align: center; position: relative; }
.dnnLogin .LoginPanel { position: absolute; top: 50%; transform: translate(50%, -50%); }
.LoginPanel .dnnLoginActions { display: none; }
.footerNav .backToTop { position: absolute; right: 20px; top: 40px; }
.footerNav li { list-style: none; display: inline-block; padding: 0px 20px 20px; }
.footerNav li img { max-width: 250px; }
.footerNav p.copyrightCopy { width: 100%; display: block; clear: left; }
/*----RESPONSIVE*/
@media only screen and (max-width: 1200px) {
.col { width: 100% !important; height: auto !important; min-height: auto; text-align: center; }
.ingredient { width: 32%; }
.col .info, .ingredients .col .info { width: 80% !important; text-align: left; height: auto; max-width: 600px; left: auto !important; margin: 30px auto; right: auto !important; bottom: auto; padding-bottom: 80px; position: relative; float: none; min-height: 0; }
.ingredient img { width: 75%; }
.product { width: 48%; }
.productMoreInfo .productImage { position: relative; height: auto; width: 100%; max-height: none; left: auto; }
.productMoreInfo .productImage img { width: 100%; max-width: 500px; }
.productMoreInfo .productImage .info p { width: 100%; padding: 0px; text-align: left; font-size: 1em; line-height: normal; float: none; position: relative; float: left; }
.products .productIntro { padding: 0px 5%; float: none; text-align: center; margin: 30px auto 0px; }
.products .productIntro img { float: none; margin: 10px 0px 0px; }
.homePage .organicallyGrownAloe { float: none; margin: 0px auto; max-width: 250px; }
.ourStory .innerContainer { background-color: rgba(255, 255, 255, 0.8); border-radius: 30px; margin: 30px auto; text-align: center; max-width: 600px; }
.ourStory .innerContainer p { margin: 0px auto; max-width: 500px; }
h1, h2, h3, h4, h5, .Slide p { max-width: 600px; margin-left: auto; margin-right: auto; text-align: center; }
.Slide { padding: 100px 0 180px; text-align: center !important; display: block; margin: 0px auto; }
}
@media only screen and (max-width: 840px) {
.ourStory, .ourStory .fullPageBG, .contactForm .fullPageBG { background: none; }
.ourStory .innerContainer, .contactForm .innerContainer { padding: 0px; margin: 0px auto; border-radius: 0px; border: 1px solid rgba(255, 255, 255, 0); }
h1, h2, h3, h4 { padding-left: 20px; padding-right: 20px; }
p { font-size: 1.2em; padding-bottom: 1em; padding-left: 10px; padding-right: 10px; }
.ourStory h1 { font-size: 3.5em; }
.ourStory h2 { font-size: 2.5em; }
.contactForm { max-width: 600px; margin: 0; padding: 0px 30px; min-height: 80vh; }
}
@media only screen and (max-width: 680px) {
p, h4 { text-align: center; }
.footerNav li { float: left; clear: left; }
.footerNav .backToTop { position: relative; right: 0; top: 0; }
.header .logo { float: none; }
ul.topnav li { display: none; }
ul.topnav li.icon { float: left; display: inline-block; width: 70px; }
ul.topnav li.icon img { width: 100%; max-width: 35px; }
ul.topnav.responsive { background-color: rgba(0, 0, 0, 0.9); /*z-index: 100;*/ width: 200px; height: 300px; /*position: fixed;*/ }
ul.topnav.responsive li.icon { position: absolute; left: 15px; top: 15px; }
ul.topnav { position: absolute; top: -15px; left: -15px; padding-left: 15px; padding-top: 15px; z-index: 100; border-radius: 15px; margin: 0px; }
ul.topnav.responsive li { float: none; display: inline; min-width: 300px; }
ul.topnav.responsive li a { display: block; text-align: left; color: rgba(255, 255, 255, 0.800); font-weight: 700; }
ul.topnav.responsive li:first-of-type a { margin-top: 68px; }
.contactForm h2 { text-align: center !important; }
.testimonials p { padding-left: 20px; text-align: left; }
.col .info, .ingredients .col .info { width: 90% !important; max-width: none; margin: 5% auto 25px auto; right: auto !important; bottom: auto; padding: 20px 20px 30px 20px; position: relative; float: none; }
.ingredient img { width: 85%; }
.ingredient { width: 48%; height: auto; padding-bottom: 5%; display: inline-block; vertical-align: top; }
.product { text-align: center; width: 100%; margin-right: 0; padding-bottom: 5%; border-bottom: 1px solid #EAEAEA; }
.product img { width: 100%; margin: 0px auto; float: none; }
.productMoreInfo { margin-top: 40px; }
.productMoreInfo .ingredients { text-align: center; }
.productMoreInfo .ingredients img { width: 45%; margin: 15px auto 0; float: none; }
.productMoreInfo .ingredients p, .productMoreInfo .ingredients h4 { width: 100%; border-bottom: 1px dotted #B0B0B0; padding-bottom: 20px; }
.productMoreInfo .col .info.ingredients h5 { font-size: 1.2em; border: 0px; margin: 0px; padding: 20px 0 10px 0; }
.homePage .headerSlide { display: none; }
.Slide { padding: 25px 0 70px; }
.homePage .headerM { display: block !important; width: 100%; }
h4 { font-size: 1.9em; }
}