/* mobile styles first */

body {font-size: 0.95em; 
      line-height: 1.5; 
      font-family: 'Open Sans', Helvetica, 'Helvetica Neue', sans-serif, ebrima, 'lucida sans unicode'; 
      color: #333;
      background-color: #fff;
	  font-weight: normal;}
.no-top-margin {margin-top: 0px; padding-top: 0px;}


h1, h2, h3 {clear: both; 
            color: #111;
            font-family: Helvetica, 'Tilt Warp', Helvetica;
            font-weight: normal; margin: 0px;}
h1 {font-size: 350%; letter-spacing: 0px; word-spacing: -2px; line-height: 1.25;}
    h1.overimage {	font-size: 250%;
					color: #fff; 
					font-weight: bold;
					margin-bottom: 50px;}
	h1.supplement-name {	font-size: 180%;
							margin: 0px 0px 20px -2px;}
	
h2 {font-size: 190%; line-height: 1.5; margin-top: 35px;}
	h2.overimage {	font-size: 130%;
					color: #fff; 
					font-weight: bold;}
	h2.subtitle { font-size: 150%; margin-top: 0px; padding-bottom: 40px;}
	h2.subsection {	font-size: 160%; line-height: 1.5; margin-top: 40px; margin-bottom:30px; 
							border-bottom-color: #e0e0e0; border-bottom-style: solid; border-bottom-width: 1px;}
							
.footer-squares h2 {color: #fff; font-size: 140%;}
	
	
h3 {font-size: 120%; margin: 0px; padding: 0px 0px 10px 0px;}
    

/*content squares*/
div.content-squares-container {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center;}
div.content-square {position: relative; background: #ccc; width: 90vw; max-width: 400px; height: 200px; margin: 20px 5vw 20px 5vw; padding: 20px 20px 40px 20px; cursor: pointer;}
div.content-square h1 {font-size: 155%; letter-spacing: 0px;}
div.content-square p {font-size: 100%}
div.content-square a.read-more {position: absolute; bottom: 10px; right: 30px;}


/*contact form styles (not the sendinblue forms however - those are styled by them*/
.contact-form {width: 100%; max-width: 600px; margin: 30px 0px 80px 0px;}
p.form-headings {}
input, textarea {border-radius: 2px; padding: 8px 0px 8px 8px; font-family: 'Open Sans'; color: #111; font-size: 100%; border: 1px solid #ccc; margin-top: 30px; width: 100%;}
input:focus{outline: none; border-color: #e0fc9f;}
.submit {background-color: #1f90e6; margin: auto; color: #fff; cursor: pointer; border: 0px; margin-top: 0px;}
input::placeholder {text-align: left; font-family: 'Open Sans'; color: #111; font-size: 100%;}
input.error::placeholder {color: #e6004c; font-weight: bold;}
textarea::placeholder {text-align: left; font-family: 'Open Sans'; color: #111; font-size: 100%;}
span.error {display: block; color: green; font-weight: bold; font-size: 100%; font-style: italic;}


/*for over a full-width image */
.image-content-holder {width: 90vw; margin-left: 5vw; padding-top: 30px;}
.image-content-holder h1 {color: #fff;}
.image-content-holder h2 {color: #fff;}
.image-content-holder p {color: #fff;}






a {color: #111; font-weight: bold; text-decoration: underline; text-decoration-color: #bbb;}
a:visited {color: #111; text-decoration-color: #bbb;}
a:hover {color: #333; text-decoration: underline; text-decoration-color: #111;}
	
.footer-squares a {color: #fff; text-decoration: none;}
.footer-squares a:visited {color: #fff; text-decoration: none;}
.footer-squares a:hover {color: #e0fc9f; text-decoration: none;}

.footer-dark-text {color: #222;}
.footer-dark-text a {color: #222; text-decoration: none;}
.footer-dark-text a:visited {color: #222; text-decoration: none;}
.footer-dark-text a:hover {color: #b0cc6f; text-decoration: none;}
	
a.listing-title {
    color: #222; 
    font-family: 'Open Sans'; 
    font-size: 120%; font-weight: 800;
    text-decoration: none;  
    margin-bottom: 0px;
}
.listing-sub-title {
    display: block;
    clear: left;
    font-size: 75%;
}

a.featured {
    background: #3366ff; color: #fff; margin-top: 200px; padding: 3px 7px 3px 7px; border-radius: 5px;
    text-decoration: none;
}
a.featured-title {
    background: transparent; 
	text-decoration: none;
    display: block; margin-top: 15px;
    font-family: 'Open Sans'; font-size: 150%; color: #fff;}
a.featured-by {
    display: block; margin-top: 15px;
    font-family: 'Open Sans'; font-size: 85%; color: #fff; font-weight: bold; text-decoration: none;}
a.teasers {
	font-weight: normal;
    display: block;
    text-decoration: none;
    line-height: 1.7;
    color: #555;
    padding: 6px 0px 7px 0px; 
    margin-bottom: 25px; 
    border-bottom: 1px solid #f9f9f9;}
a.enquire {color: #fff; background: #3366ff; padding: 6px; text-decoration: none;
	border-style: solid; border-width: 1px; border-color: #ddd;}
	a.enquire:hover {background: #4477ff;}

p {font-size: 100%; line-height: 1.8;}
p.overimage {font-size: 120%; color: #fff; font-weight: bold; width: 80vw;}
p.by-line {font-size: 85%; color: #555;}
p.footnote {font-size: 80%; margin-top: 60px; width: 90%; color: #555;}
p.leaders {font-size: 120%;}
p.large {font-size: 120%;}
p.testimonial {width: 90vw; margin: auto; padding-top: 50px; padding-bottom: 50px;}

p.article-comment-byline {font-size: 80%; color: #555; margin-bottom: 0px;}
p.article-comment-content {width: 60%; color: #333; border-bottom-color: #f0f0f0; border-bottom-style: solid; border-bottom-width: 1px; margin-top: 0px; margin-bottom: 15; padding-bottom: 25px;}

ul.content-ul li {padding: 0px 0px 15px 0px;}

ol.numbered-list {margin: 40px 0px 60px 0px;}
ol.numbered-list li {padding: 0px 0px 15px 0px;}




p.photo-caption {width: 90%; font-size: 88%; font-weight: 300; margin: 0px 0px 30px 5px; padding-top: 0px;}


				


/* menu styles */
label {
    display: block;
    padding-right: 4vw; width: 50px;
    font-size: 220%;
	color: #1f90e6;
	cursor: pointer;
}
label:active {background: transparent;}


p.topmenu {
	font-size: 100%;
    z-index: 1000;
    display: none;
    width: 100%;
    position: absolute; top: 0; right: 0;
    margin: 0px 0px 0px 0px;
    padding: 0px; /* by default a browser puts padding-left on a ul */
	background: #ddd;
}

.topmenu a{    
    line-height: 35px;
    display: block;
    white-space: nowrap;
    text-decoration: none;
    font-weight: normal;
    color: #444;
    vertical-align: baseline;
    padding-left:15px; padding-right:10px;
}
.topmenu a:visited {color:#444;}
.topmenu a:hover {color: #e0fc9f; background-color: #ccc;}

















/* styles for larger screens */
@media only screen and (min-width: 830px) {
	

/*content squares*/
div.content-square {width: 400px; margin: 20px;}
div.content-square:hover {background: #ddd;}


/*for over a full-width image */
.image-content-holder {width: 60vw;}
.image-content-holder h1 {}
.image-content-holder h2 {}
.image-content-holder p {color: #fff; font-size: 126%;}


/*menu styles*/
p.topmenu {max-width: 400px;}






p {font-size: 100%; line-height: 1.8;}
p.large {font-size: 200%;}
p.overimage {font-size: 125%; color: #fff; font-weight: bold; width: 35vw;}
p.testimonial {width: 60vw; margin: auto; padding-top: 80px; padding-bottom: 80px;}

h1 {font-size: 4.8vw;}
	h1.overimage {font-size: 5vw;}

h2 {font-size: 160%; margin-top: 35px;}
	h2.overimage {	font-size: 4vw;
					margin: 0px;
				}
	h2.subtitle { font-size: 150%; margin-top: 0px; padding-bottom: 40px;}




    


/* footer styles */
.footer h2 {margin-top: 0px;}


}/* close media query */