html, body {
	/* if you want an image to be the full background use this 
    background-image: url(https://s3.amazonaws.com/assets.manwardpress.com/promo/MWL/rich/html/img/patbg1.jpg); 
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	Comment the image if you want a basic background */
    width: 100%;
    height: 100%;
	margin: 0;
	padding: 0;
}


/* Universal Styles */

        h1 {
		display: block;
        font-family: 'Merriweather', serif;
        color: #000;
        font-size: 3.6em;
        font-weight: 700;
				 transition: all 0.2s;
        }
        h2 {
        font-family: 'Merriweather', serif;
        color: #000;
        font-size: 3em;
        font-weight: 700;
				 transition: all 0.2s;
        }
        h3 {
        font-family: 'Merriweather', serif;
        color: #000;
        font-size: 2.4em;
        font-weight: 700;
				 transition: all 0.2s;
        }
        h4 {
        font-family: 'Merriweather', serif;
        color: #000;
        font-size: 1.5em;
        font-weight: 900;
				 transition: all 0.2s;
        }

		
        p {
		font-family: 'Open Sans', sans-serif;
		font-size: 1.25em;
		line-height: 1.5em;
        margin-bottom: 1em;
        color: #000;
		font-weight: 400;
        }
		a {
			color: rgba(216,0,16,1);
		}
		strong {
			font-weight: 700;
			color: rgba(57,62,153,1);
		}
		mark {
			font-family: 'Open Sans', sans-serif;
		font-size: 1.5em;
		line-height: 1.5em;
        margin-bottom: 1em;
		font-weight: 800;
		}
		/* set base drop cap styles */
		p.first-line::first-letter {
			font-family: 'Merriweather', serif;
			float: left;
			font-size: 5em;
			margin:.35em .1em .25em 0;
			color: #5b5546;
									transition: all 0.2s;
		}
		@media screen and (max-width: 980px) {
			p.first-line::first-letter {
				font-size: 3em;
				margin:.3em .2em .1em 0;
			}
		}

		
/* Main Flex Container */
		
		.flex {
				background-color: rgba(209,207,201,1);
		  display: flex;
		  flex-direction:column;
		  justify-content:center;
		  align-content: center;
		  min-height:100%;
	    }
		.center {
			text-align: center;
		}


/* Header Styles */
		
		header {
			flex-shrink: 0;
			
		}



		.navbar {
			overflow: hidden;
			background-color: rgba(255,255,255,.75); /* adds an overlay or color bar on the header section */
			font-family: 'Open Sans', sans-serif;
		    display: flex;
		    justify-content: space-between;
		    padding: 20px;
			flex-wrap:wrap;
									transition: all 0.2s;
		}
		.navbar a {
			color:black;
			font-size:.9em;
			font-weight:700;
			text-decoration:none;
								   transition: all 0.2s;
		}
		.navbar a:active {
									transform: scale(.95);
		}
		
		
/* Makes all header sections Flex to take up the whole width */
				
		.siteHeader__section {
		    /**
		     * Lay out the children of this container with
		     * flexbox.
		     */
		    display: flex;
			

		    /**
		     * Align the children in the center, along
		     * the main axis. By default the children will
		     * align along their top edges.
		     */
		    align-items: center;
									transition: all 0.2s;
		  }

		    .siteHeader__item {
		      padding: 5px 15px;
		    }

		    .siteHeader__item + .siteHeader__item {
		      margin-left: 5px;
		    }

		    .siteHeaderLogo{
				background-image: url(https://s3.amazonaws.com/cdn.nicaclinic.org/media/1119-clinic/img/nica-logo.png);
				background-size:contain;
				background-repeat: no-repeat;
				width:300px;
				height:50px;
				margin:0;
				padding: 5px 15px;
		    }
			.logo {
				position: absolute;
				left: -999em;
			}

/* Header Icon and Link Styles */
												
			i {color: rgba(4,160,216,1) !important}

		    a.siteHeaderButton {
	   		 background-color: rgba(251,176,59,1);
	   		 display: inline-block;
	   		 padding:0.5em 1.2em;
	   		 margin:0 0.1em 0.1em 0;
	   		 border-radius:2em;
	   		 box-sizing: border-box;
	   		 text-decoration:none;
	   		 font-weight:700;
	   		 font-size: 1.2em;
	   		 color:white;
	   		 text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
	   		 text-align:center;
	   		 							transition: all 0.2s;
	   		}
	   		a.siteHeaderButton:hover {
	   									transform: scale(.95);
	   			background-color: rgba(249,151,22,1);
	   	    }
	   		a.siteHeaderButton:active {
	   									transform: scale(.9);
	   			background-color: rgba(216,0,16,1);
	   	    }
			
			@media screen and (max-width: 1200px) {
				span.social {display:none;}
			}
			
			
			
/* Eyebrow Styles */
						
			.eyebrow {
				width:100%;
				padding: 0;
				background-color: rgba(4,160,216,1);
				text-align:center;
			}
			.eyebrow h3 {
				font-family: 'Open Sans', sans-serif;
				color: white;
				font-size: 1.2em;
				font-weight:600;
				margin:.5em;
				text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
				   		 				transition: all 0.2s;
				
			}

/* This styles ALL buttons consitently */

		.button {
			margin: 2em auto;
			text-align: center;
		}

	    a.subscribeButton {
		 font-family: 'Open Sans', sans-serif;
   		 background-color: rgba(251,176,59,1);
   		 display: inline-block;
   		 padding:0.5em 1.2em;
   		 margin:0 0.1em 0.1em 0;
   		 border-radius:2em;
   		 box-sizing: border-box;
   		 text-decoration:none;
   		 font-weight:700;
   		 font-size: 1.7em;
   		 color:white;
   		 text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
   		 text-align:center;
   		 							transition: all 0.2s;
   		}
   		a.subscribeButton:hover {
   									transform: scale(.95);
   			background-color: rgba(249,151,22,1);
   	    }
   		a.subscribeButton:active {
   									transform: scale(.9);
   			background-color: rgba(216,0,16,1);
   	    }


/* This is the main article styles */
		
		article {
			background-color: rgba(255,255,255,1);
			align-self: center;
			max-width: 1000px;
			flex: 1 0 auto;
			text-align:left;
		}
		
		
		.first {
			padding: 2em 10% 1em 10%;
		}
		
		h1.title {
			width:100%;
			padding: 0;
			margin: 0 auto .1em auto;
			font-size:2.7em;
			line-height:1.2em;
			text-align:center;
		    						transition: all 0.2s;
		}
		h1.title strong {
			font-weight:900;
			color: rgba(216,0,16,1)
		}

		h2.subhead {
			margin: 0 auto 1em auto;
			text-align:center;
			font-size:2.3em;
		  							transition: all 0.2s;
		}
	
		
		
		
		.second {
			margin-top:2em;
			padding: 3em 10% 2em 10%;
			border-top: 1em solid rgba(4,160,216,1);
			
		}
		.second h2 {
			padding: 0 10%;
			margin: .25em auto .5em auto;
			text-align:center;
		}
		.second h3 {
			padding: 0;
			font-size:2em;
			margin: .25em auto 1em auto;
			text-align:center;
		}
		.third {
			margin-top:1em;
			padding: 2em 10%;
			border-top: .5em dotted rgba(4,160,216,1);
		}
	


/* Quote Styles. This can be completely re-written given the style */
		
		blockquote {
		   font-family: 'Merriweather', serif;
	        color: #000;
	        font-size: 1.6em;
			line-height:1.6em;
	        font-weight:800;
					 				transition: all 0.1s;
			position: relative;
			margin: 1em 2em;
			padding: 1em 2em;
			border-left: 3px solid rgba(57,62,153,1);
		}
		blockquote::before {
		    content:"";
		    position: absolute;
		    top: 50%;
		    left: -4px;
		    height: 2em;
		    background-color: #fff;
		    width: 5px;
		    margin-top: -1em;
									transition: all 0.1s;
		}
		blockquote::after {
            font-family: 'Arial', serif;
			color: rgba(4,160,216,1);
			font-size:3em;
			font-weight:700;
            content: "\201C";
            display: block;
            position: absolute;
		    z-index: 1;
		    top: 50%;
		     left: -20px;
			   text-indent: -4px;
		    margin-top: -0.55em;
		    line-height: 1.5em;

									transition: all 0.1s;
		}
		 @media screen and (max-width: 980px) {
			 blockquote::after {
				 left: -15px;
			 }
		 }
		 /* If quotes have bylines change these styles */
		.byline {
		 	font-family: 'Open Sans', sans-serif;
			font-weight:600;
			font-size: 1em;
			line-height: 1.5em;
			color: rgba(27,20,100,1)
		 }
		 
		 
/* All the List Syles, Universal but also specific to each brand*/
		
		ul{
			padding: 0 0 0 2em;
			margin: 1.5em 0;
			  list-style-type: none;
		}
		li {
			font-family: 'Open Sans', sans-serif;
			font-weight:500;
			font-size: 1.35em;
			line-height: 1.5em;
			display:block;
			position:relative;
			padding-left: 2em;
			margin-bottom: .5em;
									transition: all 0.2s;
			
		}
		li::before {
            position:absolute;
			content:'';
			top:5px;
			left:0;
			  transform: rotate(45deg);
			  height: 12px;
			  width: 7px;
			  border-bottom: 5px solid rgba(57,62,153,1);;
			  border-right: 5px solid rgba(57,62,153,1);;
			  						transition: all 0.2s;
		}

/* Nested List style */
		ul.side {
			margin:.5em 0 1.5em 0;
		}
		li.smol {
			font-family: 'Open Sans', sans-serif;
			font-weight:500;
			font-size: 1em;
			line-height: 1.5em;
			display:block;
			position:relative;
			padding-left: 2em;
			margin-bottom: .5em;
									transition: all 0.2s;
			
		}
		li.smol::before {
            position:absolute;
			content:'';
			top:5px;
			left:0;
			  transform: rotate(45deg);
			  height: 12px;
			  width: 5px;
			  border-bottom: 5px solid rgba(34,181,115,1);
			  border-right: 5px solid rgba(34,181,115,1);
			  						transition: all 0.2s;
		}
		


/*  Ordered List Style with COOL numbers */
		ol {
		  display: block;
		  list-style: none;
		    counter-reset: my-awesome-counter;
		padding: 0 0 0 2em;
		margin: 1.5em 0;
	  }
	  ol li {counter-increment: my-awesome-counter;}
	ol li::before {
      	position:absolute;
		content: counter(my-awesome-counter);
		top:0;
		left:0;	
		font-weight: 800;
		 font-size: 1.5em;
		 color: rgba(27,20,100,1);
	  transform: rotate(0deg);
	  height: 12px;
	  width: 5px;
	  border-bottom: 0px solid;
	  border-right: 0px solid;
	  						transition: all 0.2s;
	}


/* Image Styles */
		
	figure {
		margin:2em auto;
		max-width:80%;
								transition: all 0.2s;
	}
	img {
		max-width:100%;
	}
	figcaption {
		display:block;
        text-align: center;
        font: .97em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
		line-height:1.3em;
		color:#777;
		margin-top:.75em;
	}
	
	figure.banner {
		max-width:100%;
		margin:1em 0;
	}
	
	.small-image {
		max-width:40%;
		float:right;
		padding: 0 0 0 1.5em;
								transition: all 0.2s;
	}
	.medium-image {
		max-width:50%;
		float:right;
		clear:both;
		padding: 0 0 0 2em;
								transition: all 0.2s;
	}
	figure.side {margin:.5em 0;}
	


/* Content that needs to be Flex Wrapped depending on number of colunns */
	
		.flex-wrap {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
		}
		.two-column {width:50%; transition: all 0.2s;}
		.three-column {width:33%; transition: all 0.2s;}
	

	
/* Aside Content, used as special boxes meant to flush right */

		 .side-flex {
			display: flex;
			flex-direction: row;
			justify-content:center;
			align-items:center;
			flex-wrap: wrap;
 			border: solid 2px rgba(251,176,59,1);
 			 box-shadow: 15px 15px 0 0 rgba(251,176,59,1);
			 padding: 1em 2em;
			 margin:2em auto 3em auto;
			 width:70%;
			
		}
		 .side-quote {
 			width:60%;
  			margin: 0 0 0 5%;
  			
									transition: all 0.1s;

		 }
		 .side-quote p {
    		font-family: 'Open Sans', sans-serif;
			font-size: 1.2em;
  			line-height:1.4em;
  	        font-weight:600;
			color: rgba(0,0,0,.6);
		}
		.side-content {
			width:30%;
									transition: all 0.1s;
		}



/* Specific Object Styles */

		blockquote.callout {
		   font-family: 'Open Sans', sans-serif;
	        color: rgba(0,0,0,.6);
	        font-size: 1.4em;
			line-height:1.6em;
	        font-weight:700;
			position: relative;
			margin: 2em auto 3em auto;
			width:70%;
			padding: 1em 2em;
			text-align:center;
			border: solid 2px rgba(251,176,59,1);
			  box-shadow: 15px 15px 0 0 rgba(251,176,59,1);
									transition: all 0.1s;
			
		}
		blockquote.callout::before {
		    display:none;
									transition: all 0.1s;
		}
		blockquote.callout::after {
            display:none;

									transition: all 0.1s;
		}


/* Content, usually testimonials, that need an image flushed right */
	 .testimonial {
		 display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items:center;
	}
	
	 .testimonial-image {
		 width:150px;
		 height:100%;
									transition: all 0.2s;
		}



		
		
/* Footer Styles */
		
		footer {
			flex-shrink: 0; /* Forces this section to always live in the bottom */
			background-color: rgba(0,0,0,0.5); /* Creates an overlay*/
			width:100%;
		}

        .legal {
	      	padding: 2em 10%;
  		  	margin:0 auto;
  		  	max-width: 900px;
        }

        .legal p {
            text-align: justify;
            font: .9em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
            color: rgba(255,255,255,.75);
					 transition: all 0.2s;
        }




/* ALL THE MEDIA QUERIES */


        @media screen and (max-width: 980px) {
            h1 {font-size: 2.6em;}
			h2 {font-size: 2.3em;}
            h3 {font-size: 1.9em;}
			h4 {font-size: 1.6em;}

			p {font-size: 1.2em;}
			li {font-size: 1.2em;}
			
			.eyebrow h3 {font-size:1.1em;}
			
			.first {padding:2em 5%;}
			h1.title {font-size:2.3em;}
			h2.subhead {font-size:2.1em;}

			.second {
				margin-top: 2em;
				padding:2em 5%;
			}
			.second h2 {
				padding: 0;
				width:100%;
				margin: .25em 0 .25em 0;
		}
			.second h3 {font-size:1.8em;}
			
			
			blockquote {
				font-size: 1.5em;
				font-weight:600;
				margin: 1em;
			}
			
			.side-quote {font-size:.9em;}
			
			figure.side {
				float:none;
				display: block;
				  margin-left: auto;
				  margin-right: auto;
				max-width:60%;
				padding: 0;
			
			}
			
			.small-image {
				float:none;
				display: block;
				  margin-left: auto;
				  margin-right: auto;
				max-width:50%;
				padding: 0;
			}
			.medium-image {
				float:none;
				display: block;
				  margin-left: auto;
				  margin-right: auto;
				max-width:60%;
				padding: 0;
			}
			

			.button {margin: 1em auto;}
			a.subscribeButton {
				display:block;
				margin:1em auto;
			    font-size: 1.3em;
			}
		}
			
			
			
			
        @media screen and (max-width: 720px) {
            h1 {font-size: 2.4em;}
			h2 {font-size: 1.6em;}
            h3 {font-size: 1.5em;}
			h4 {font-size: 1.4em;}

			p {font-size: 1.1em;}
			ul {padding-left:0;}
			ul.side {padding-left:0;}
			li {font-size: 1.1em;}
			li.smol {font-size: .9em;}
			ol {padding-left:0;}
			
			.navbar {justify-content: center;}
			.siteHeaderLogo {
				width:250px;
				height:60x;
				margin-bottom:5px;}


			.eyebrow h3 {font-size:.7em;}
			
			.first {padding:2em 10% .5em 10%;}
			h1.title {font-size: 2.1em;}
			h2.subhead {font-size:1.3em;}

			
			.second {
				padding:2em 10% .5em 10%;;
				margin-top: ..25em;
				border-top: .75em solid rgba(4,160,216,1);
			}
			.second h3 {font-size:1.5em;}
			
			.third {
				padding:2em 10% .5em 10%;;
				margin-top: .25em;
			}
			
			
			blockquote {
				font-size: 1.2em;
				margin: 1em 0 1em 1em;
			}
			blockquote.callout {
				font-size: 1.2em;
				margin: 1em auto 2em auto;
				width:80%;
				padding: 1em 1em;
				box-shadow: 5px 5px 0 0 rgba(251,176,59,1);
			}
			
			.side-flex {
				width:80%;
				margin-bottom:2em;
				padding: 1em;
				box-shadow: 5px 5px 0 0 rgba(251,176,59,1);
			}
			.side-content {width:100%;}
			.side-quote {width:100%; font-size: .8em;}
			

			.testimonial {flex-wrap:wrap;}
			.testimonial-image {
				width:50%; 
				margin:0 auto 2em auto;
			}
			
			.two-column {width:100%}
			.three-column {width:100%; margin:.2em 0;}
			.tall {width:50%;}
			
			figure {max-width:100%; margin:2em auto;}
			
			figure.side {
				max-width:100%;
				padding: 0;
				margin:1em auto;
			}
			.small-image {
				max-width:100%;
				padding: 0;
				margin:1em auto;
			}
			.medium-image {
				max-width:100%;
				padding: 0;
				margin:1em auto;
			}
			
			.legal p {font-size:.8em;}

        }