/* CSS Document for Screens */


@import url('http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600');
@font-face {
    font-family: Aachen;
    src: url(../fonts/Aachen.woff);
}
@font-face {
    font-family: AachenReg;
    src: url(../fonts/AachenReg.woff);
}


body { font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 400; color: #444; margin: 0; padding: 0; background-color: rgb(247,248,250); }

#page { max-width: 1200px; margin: 0 auto; position: relative; background-color: rgb(255,255,255); }

/* Text */

h1{ margin: 0 0 1em 0; font-size: 2.4em; font-weight: 700; }
h2{ margin: 0 0 0.5em 0; font-size: 1.6em; font-weight: 700; line-height: 1.1em; }
h3{ margin: 0 0 0.5em 0; font-size: 1.3em; font-weight: 700; }
h4{ margin: 0 0 1.5em 0; font-size: 1em; font-weight: 700; }
h5{ margin: 0 0 0 0; font-size: .8em; font-weight: 500; }

p { margin: 0 0 1em 0; }

a { color: #007eff; }
a:visited { color: #65b1ff;}


a.btn { font-size: 1.1em; text-decoration: none; color: #fff; border: 1px solid #fff; border-radius: 4px; padding: 4px 15px; transition: background-color 0.5s; }
a.btn:hover { background-color: rgba(0,0,0,.3); 1.1em; }


/*  header */

header { height: 430px; background: #007ac2 url(../images/banner_1200.jpg) no-repeat center bottom; position: relative;}
header.about { height: 280px;}
header.products { height: 350px;}
header.contact { height: 280px;}

header.hoofbalsam { background: #007ac2 url(../images/hoofbalsambanner_1200.jpg) no-repeat center bottom;}
header.hoofmaker { background: #006648 url(../images/hoofmakerbanner_1200.jpg) no-repeat center bottom;}
header.magvet { background: #fff url(../images/magvetbanner_1200.jpg) no-repeat center bottom;}
header.farrierforge { background: #000 url(../images/forgebanner_1200.jpg) no-repeat center bottom;}
header.products { background: #fff url(../images/productsbanner_1200.jpg) no-repeat center bottom;}
header.about { background: #fff url(../images/aboutbanner_1200.jpg) no-repeat center bottom;}
header.contact { background: #fff url(../images/contactbanner_1200.jpg) no-repeat center bottom;}



header a.logo { 
	z-index: 17;
	position: absolute; 
	display: block; width: 350px; height: 164px; 
/*	border-radius: 75px;  */
	background: url(../images/logo.svg) no-repeat 0 0; background-size: contain;  
	top: 6px; left 20px;
	margin-left: 20px;
	}
	
header.hoofmaker a.logo { 
	z-index: 17;
	position: absolute; 
	display: block; width: 350px; height: 164px; 
/*	border-radius: 75px;  */
	background: url(../images/logo-green.svg) no-repeat 0 0; background-size: contain;  
	top: 6px; left 20px;
	margin-left: 20px;
	}
header.magvet a.logo { 
	z-index: 17;
	position: absolute; 
	display: block; width: 350px; height: 164px; 
/*	border-radius: 75px;  */
	background: url(../images/logo-blue.svg) no-repeat 0 0; background-size: contain;  
	top: 6px; left 20px;
	margin-left: 20px;
	}
header.farrierforge a.logo { 
	z-index: 17;
	position: absolute; 
	display: block; width: 350px; height: 164px; 
/*	border-radius: 75px;  */
	background: url(../images/logo-black.svg) no-repeat 0 0; background-size: contain;  
	top: 6px; left 20px;
	margin-left: 20px;
	}
		
header a.logo span { display: none; }

header div.hero { z-index: 16; position: absolute; width: 38%; top: 130px; left: 62%; }
header div.hero h1 { font-family: Aachen, serif; line-height: 1em; margin: 0 0 15px 0; color: #007ac2;}
header div.hero a { color: #fff; background-color: rgba( 0,0,0,.20) }

header.about div.hero h1 { color: #fdb927;}
header.products div.hero h1 { font-size: 2.0em; color: #007ac2;}


header.farrierforge div.hero h1 { font-family: Aachen, serif; line-height: 1em;; margin: 0 15px 15px 0; color: #fff;}
header.farrierforge div.hero h3 { position: relative; color: #fff;  background-color: rgba( 0,0,0,.40); margin: 5px 5% 5px 0; padding: 4px 15px;}

header div.whitewash { 	z-index: 1; position: absolute; width: 41%; height: 100%; left: 59%; background-color: rgba(255,255,255,.5);}
header div.darkwash { 	z-index: 1; position: absolute; width: 41%; height: 100%; left: 59%; background-color: rgba(0,0,0,.2);}

/*  section-all  */

section { padding: 0 30px;}
section::after { content: ''; display: block; clear: both;}

/*  section-main  */

section.main { margin-top: 20px; margin-bottom: 10px; padding: 0; background-color: rgb(255,255,255); }
section.main aside{ width: 33%; float: left; text-align: center; }

section.main aside.productleft{ 
	display: inline-block;
	width: 50%; 
	float: left; 
	text-align: left; 
	}
section.main aside.productright{ 
	display: inline-block;
	width: 50%; 
	float: right; 
	text-align: left; 
	}
section.main aside.productleft div { min-height: 150px;}
section.main aside.productright div { min-height: 150px;}

section.main aside.productleft div.content.a { background: #fff url(../images/productPagebuttons-HoofBalsam.png) no-repeat center top; }
section.main aside.productright div.content.a {  background: #fff url(../images/productPagebuttons-MagVet.png) no-repeat center top; }
section.main aside.productleft div.content.b { background: #fff url(../images/productPagebuttons-Forge.png) no-repeat center top; }
section.main aside.productright div.content.b {  background: #fff url(../images/productPagebuttons-HoofMaker.png) no-repeat center top; }

section.main aside.productleft h3 a { color: #000; text-decoration: none; text-align: left;}
section.main aside.productleft h3 a:hover { text-decoration: underline; }
section.main aside.productleft p { color: #fff; margin-top: 10px; padding: 0 60px 0 220px; text-align: left;}
section.main aside.productleft .content img { display: block; float: left; margin: 5px 5px 5px 10px; max-width: 180px; height: auto; border-radius: 6px;}
section.main aside.productleft span { display: none; }

section.main aside.productright h3 a { color: #000; text-decoration: none; text-align: left;}
section.main aside.productright h3 a:hover { text-decoration: underline; }
section.main aside.productright p { color: #fff; margin-top: 10px; padding: 0 60px 0 220px; text-align: left;}
section.main aside.productright div.content.a p { color: #666;}
section.main aside.productright .content img { display: block; float: left; margin: 5px 5px 5px 10px; max-width: 180px; height: auto; border-radius: 6px;}
section.main aside.productright span { display: none; }

section.main aside.about h2 { color: #444; text-decoration: none; padding: 0 50px; font-family: Aachen, serif;}
section.main aside.about h4 { padding: 0 0 0 20px; margin: 0; }
section.main aside.about h4 span{ font-size: .85em; }
section.main aside.about p { margin-top: 3px; padding: 0 0 0 30px; /* font-size: 12px; */}
section.main aside.about p span{ font-size: .85em; color: #999;}
section.main aside.about p span.quote{ font-size: 1.5em; color: #999; font-style: italic; display: block; text-align: center; margin: 5px 0; width: 430px;}

section.main.hoofbalsam aside{ width: 85%; float: none; text-align: center; margin-left: 7.5%; margin-right: 7.5%;}

section.main.hoofmaker aside{ width: 85%; float: none; text-align: center; margin-left: 7.5%; margin-right: 7.5%;}

section.main.farrierforge aside{ width: 85%; float: none; text-align: center; margin-left: 7.5%; margin-right: 7.5%;}
section.main.farrierforge aside h3 { padding: 0 20px;}
section.main.farrierforge aside p { font-size: 16px; padding: 0 20px;}

section.main.magvet aside{ width: 85%; float: none; text-align: left; margin-left: 7.5%; margin-right: 7.5%;}
section.main.magvet aside div.content.magvet iframe.magvet { position: relative; display: inline-block; float: right;  margin: 10px 0 40px 20px;}

section.main .content { margin: 15px; background: no-repeat center top; background-size: 300px auto; padding-top: 0px; border: 3px solid #fff; border-radius: 5px; }
section.main .content img { display: block; margin: 0px auto; width: 300px; height: auto; border-radius: 6px;}

section.main aside h3 a { color: #000; text-decoration: none;}
section.main aside h3 a:hover { text-decoration: underline; }
section.main aside p { margin-top: 10px; padding: 0 60px;}


section.main.farrierforge aside div.content.farrierforge div.forgeimages img {position: relative; display: inline-block; width: 120px; margin-left: 2%; margin-right: 2%; color: #333; }
section.main.farrierforge aside div.content.farrierforge div.forgefeature { float: left; margin: 0 30px 20px 0;}
section.main.farrierforge aside div.content.farrierforge div.forgecopy { position: relative; display: block;  margin-top: 40px}
section.main.farrierforge aside div.content.farrierforge div.forgeimages { margin: 40px 0 20px 0;}



section.main aside.productright div.whitewash {z-index: 1; position: relative; float: left; width: 41%; height: 100%;  background-color: rgba(255,255,255,.5);}

section.main.about img { display: inline; margin: 45px 5px auto 10px; width: 400px; height: auto; border-radius: 6px;}
/* 
section.main div.content.about { 
	margin: 15px; 
	background: no-repeat center top; 
	background-size: 300px auto; 
	padding-top: 0px; 
	border: 3px solid #fff; 
	border-radius: 5px; 
	}
 */
section.main aside.about{ 
	display: inline-block;
	width: 50%;
	height: 100%; 
	float: left; 
	text-align: left; 
	}

/* 
section.main aside .content.hoofbalsam { background-image: url(../images/product2_HoofBalsam.jpg); }
 */
section.main aside .content.hoofbalsam span { display: none; }
/* 
section.main aside .content.hoofmaker { background-image: url(../images/product2_HoofMaker.jpg); }
 */
section.main aside .content.hoofmaker span { display: none; }
/* 
section.main aside .content.magvet { background-image: url(../images/product2_MagVet.jpg); }
 */
section.main aside .content.magvet span { display: none; }

section.main aside .content.farrierforge span { display: none; }

/*  section-highlight  */

section.highlight { background-color: #007ac2; padding-top: 30px; padding-bottom: 30px; color: #fff; border: 5px solid #fff;}
section.highlight h2{ font-family: AachenReg, serif; letter-spacing: .5px; }
section.highlight article { padding: 0 20px 0 550px; background: url(../images/photo_hooves.jpg) no-repeat 0 5px; min-height: 220px; }

section.highlight.hoofbalsam { background-color: #007ac2 /* rgba(110,180,245,.2) */; padding-top: 30px; padding-bottom: 30px; color: #fff; border: 5px solid #fff;}
section.highlight.hoofbalsam article { padding: 0 20px 0 12%; background: none; min-height: 180px; }
section.highlight.hoofbalsam article h2{ color: #fdb927; }

section.highlight.hoofmaker { background-color: #006648; padding-top: 30px; padding-bottom: 30px; color: #fff; border: 5px solid #fff;}
section.highlight.hoofmaker article { padding: 0 20px 0 12%; background: none; min-height: 180px; }
section.highlight.hoofmaker article h2{ color: #fdb927; }
section.highlight.hoofmaker article ul{ margin-left: 26px; }


section.highlight.magvet { background-color: #007ac2; padding-top: 30px; padding-bottom: 30px; color: #fff; border: 5px solid #fff;}
section.highlight.magvet article { padding: 0 20px 0 12%; background: none; min-height: 110px; }
section.highlight.magvet article h2{ color: #fdb927; }

section.highlight.farrierforge { background-color: #222; padding-top: 30px; padding-bottom: 30px; color: #fff; border: 5px solid #fff;}
section.highlight.farrierforge article { padding: 0 20px 0 12%; background: none; min-height: 180px; }
section.highlight.farrierforge article h2{ color: #fdb927; }
section.highlight.farrierforge article ul{ margin-left: 26px; }

section.highlight.about {relative; min-height: 320px; background-color: #007ac2; background: url(../images/Highlight-BG-About-01.jpg) no-repeat 0 5px; padding-top: 30px; padding-bottom: 30px; color: #444; border: 5px solid #fff;}
section.highlight.about article {  text-align: center; padding: 25px 130px ; background-color: #007ac2; background: none; no-repeat 0 5px; }
section.highlight.about article p.signature { text-align: right; padding-right: 60px ;}
section.highlight.about article p.signature span{ font-size: 16px; font-weight: 600;}

section.highlight.contact { background-color: #007ac2; background: url(../images/Googlemaps-Contact-tw.png) no-repeat 0 5px; padding-top: 30px; padding-bottom: 30px; color: #007ac2; border: 5px solid #fff;}
section.highlight.contact article { text-align: center; padding: 20px 20px ; background-color: #007ac2; background: url(none) no-repeat 0 5px; }
section.highlight.contact article div.contactinfo { position: relative; color: #444; text-align: left; display: inline; float: left; width: 35%; margin: 20px 0;}

section.highlight.contact article div.contactainer {
	min-width:400px;
	width:50%;
	margin:0 20px 40px 0;
	position:relative;
	float: right;
	background: rgba(255,255,255,.70);
	padding:12px;
	text-align: left;
}

/* 
section.highlight.contact article div.contactainer label.checkbox-inline{
	text-align: left;
}
 */

section.highlight.contact article h1{ color: #fdb927; margin-bottom: 5px;}
.input-field { 
/* 
	background: rgba(255,255,255,.8);
 */
	padding:4px 8px;
	}
.input-field label{ 
	}

/*  divider  */
div.divider.hoofbalsam { position: relative; display: block; background-color: #fdb927; width: 75%; height: 3px; margin: 20px 12.5% 10px 12.5%; }

div.distrib {  position: relative; display: block;
	padding:40px 0;
}
div.distrib h2 { font-family: Aachen, serif; line-height: 1em; margin: 0 0 5px 0; color: #007ac2;}
div.distrib p { font-size: .9em; font-style: italic; }

div.distrib iframe.distrib{  position: relative; display: block;
}

/*  section-multi-quote  */

section.multi-quote { background-color: #f0f0f0; position: relative; border: 5px solid #fff;}
section.multi-quote aside { width: 30%; float: left; margin-left: 2%; margin-right: 5px; color: #444; }
section.multi-quote aside .content { padding: 30px 30px 20px 0; } 
section.multi-quote aside .content img { display: block; margin-bottom: 15px; width: 100%; border-radius: 6px;}
section.multi-quote aside .content h4 { margin-bottom: 0; }
section.multi-quote aside .content p { margin-bottom: 0.5em; }
section.multi-quote aside .content a { display: inline-block; color: #fdb927; font-weight: 700; }
section.multi-quote aside .content h3 a { display: inline-block; color: #444; font-weight: 700; text-decoration: none;}
section.multi-quote aside .content h3 a:hover { text-decoration: underline;}

section.multi-quote aside { width: 33%; }
section.multi-quote aside .content.home img { display: block; margin-bottom: 15px; width: 100%; border-radius: 6px;}
section.multi-quote aside .content.hoofbalsam img { display: block; margin-bottom: 15px; width: 100%; border-radius: 6px;}
section.multi-quote aside .content.hoofmaker img { display: block; margin-bottom: 15px; width: 100%; border-radius: 6px;}
section.multi-quote aside .content.magvet2 img { display: block; margin-bottom: 15px; width: 100%; border-radius: 6px;}


section.multi-quote.productdash { display: inline-block; padding: 0 20px 0 80px; background-color: #fff; position: relative; border: 5px solid #fff;}
section.multi-quote.productdash aside { width: 28%; margin-left: 2%; margin-right: 2%; color: #333; }
section.multi-quote.productdash aside .content { padding: 10px 15px 20px 5px; border: 2px solid #fff; min-height: 220px;} 
section.multi-quote.productdash aside .content img { display: block; margin-bottom: 10px; margin-left: 15%; width: 70%; border-radius: 6px; border: 2px solid #333;}
section.multi-quote.productdash aside .content h3 { margin-bottom: 0; margin-left: 15%; }
section.multi-quote.productdash aside .content h3 a { margin-bottom: 0; margin-left: 0%; text-decoration: none;}
section.multi-quote.productdash aside .content h3 a:hover { text-decoration: underline; }
section.multi-quote.productdash h2 { margin: 10px 40px 25px 0; text-align: center; font-family: AachenReg, serif; letter-spacing: .5px; }
section.multi-quote.productdash aside .content p { margin-bottom: 1.5em; margin-left: 16%; }
section.multi-quote.productdash aside .content a { display: inline-block; color: #007ac2; font-weight: 700; width: 100%;}

section.multi-quote.magvet { display: block; padding: 10px 30px 10px 110px; background-color: rgba(64,165,220,1); position: relative; border: 5px solid #fff;}
section.multi-quote.magvet aside { width: 44%; margin-left: 1%; margin-right: 1%; color: #333; }
section.multi-quote.magvet aside .content { padding: 10px 0px 20px 0px; border: 2px solid none; min-height: 120px;} 
section.multi-quote.magvet aside .content img { display: block; margin-bottom: 10px; margin-left: 15%; width: 70%; border-radius: 6px; border: 2px solid #333;}
section.multi-quote.magvet aside .content h3 { margin-bottom: 0; margin-left: 15%; color: #fff;}
section.multi-quote.magvet aside .content h3 a { margin-bottom: 0; margin-left: 0%; text-decoration: none;}
section.multi-quote.magvet aside .content h3 a:hover { text-decoration: underline; }
section.multi-quote.magvet h2 { margin: 10px 40px 25px 0; text-align: center; font-family: AachenReg, serif; letter-spacing: .5px; }
section.multi-quote.magvet aside .content p { margin-bottom: 0.5em; margin-left: 16%; color: #fff; }
section.multi-quote.magvet aside .content a { display: inline-block; color: #fdb927; font-weight: 700; margin-left: 16%;}


/* section.multi-quote aside .content h3 { font-family: AachenReg, serif; letter-spacing: .5px; } */


section.multi-quote blockquote { 
	margin: 0;
	width: 50%;
	color: #444;
	background-color: #fff;
	position: absolute;	bottom: 0; right: 4%;
	border-radius: 10px 10px 0 0;
	
 }
section.multi-quote blockquote p { margin: 30px 30px 20px 50px; }
section.multi-quote blockquote p.quote { font-style: italic; font-size: 1.2em; }
section.multi-quote blockquote p.credit { 
	color: #777;
	font-size: .9em; margin-top: 0; padding-left: 20px; line-height: 1.3em; 
	position: relative;
 }

section.multi-quote blockquote::before { 
	content:'\201c'; color: #fdb927;
	position: absolute;
	top: 10px; left: 8px;
	font-size: 5em;
	font-family: serif;
}
section.multi-quote blockquote p.quote::after {
	content:'\201d';
	font-family: serif;
	}

section.multi-quote blockquote p.credit::before {
	content:'\2014';
	position: absolute;
	top: -1px; left: 0;
	}

/*  navigation  */

nav { background-color: #ffffff;
	z-index: 16;
	position: absolute;
	top: 0px; left: 0px; 
	padding: 60px 0 0 0;
	width: 100%;
}

nav::after { content:''; display: block; clear: both; }

nav ul { list-style: none;  padding: 0px; }

nav ul li:hover { background-color: rgba( 255,255,255,.00); }
nav ul li:hover > ul { transition: background-color 2s; display: block; }

nav ul li a {
	display: inline-block;
	color: #333;
	padding: 5px 20px;
	text-decoration: none;
	width: 125px;
	position: relative;
}

nav ul li a:visited { color: #333; }
nav ul li a:hover { transition: background-color .5s; background-color: #fdb927; }

nav ul ul { position: absolute; top: 100%; background-color: rgba( 255,255,255,.9); display: none; }

nav ul ul li { position: relative;  }

nav ul ul ul { left: 100%; top: 0px; }


/*  top-level  */

nav > ul { padding-left:60%; }
nav > ul > li { float: left; }
nav > ul > li > a { width: auto; padding: 10px 20px 15px 20px; }

nav a[aria-haspopup="true"]::after {
	content:'';
	display: block; width: 0px; height: 0px;
	position: absolute;
	top: 16px; right: 15px;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 4px solid #007ac2;
}

nav > ul >li > a[aria-haspopup="true"]::after {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid #007ac2;
	left: 20px; right: auto;
	bottom: 6px; top: auto;
}

/*  contact form  */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);

/* {
	margin:0;
	padding:0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	-o-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

/* 
body {
	font-family:"Open Sans", Helvetica, Arial, sans-serif;
	font-weight:300;
	font-size: 12px;
	line-height:30px;
	color:#777;
	background:#0CF;
}
 */

/* 
.container {
	max-width:600px;
	width:100%;
	margin:0 80px 40px 0;
	position:relative;
	float: right;
	background:#007ac2;
	padding:25px;
}
 */

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }

#contact {
	background:#007ac2;
	padding:25px;
	margin:10px 0;
}

#contact h3 {
	color: #fdb927;
	display: block;
	font-size: 30px;
	font-weight: 600;
}

#contact h4 {
	color: #cdcdcd;
	margin:5px 0 15px;
	display:block;
	font-size:13px;
}

 
fieldset {
	border: medium none !important;
	margin: 0 0 10px;
	min-width: 100%;
	padding: 0;
	width: 100%;
}


#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
	width:100%;
	border:1px solid #CCC;
	background:#FFF;
	margin:0 0 5px;
	padding:10px;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
	-webkit-transition:border-color 0.3s ease-in-out;
	-moz-transition:border-color 0.3s ease-in-out;
	transition:border-color 0.3s ease-in-out;
	border:1px solid #AAA;
}

#contact textarea {
	height:100px;
	max-width:100%;
  resize:none;
}

#contact button[type="submit"] {
	cursor:pointer;
	width:100%;
	border:none;
	background: rgba(64,165,220,1);
	color:#FFF;
	margin:0 0 5px;
	padding:10px;
	font-size:15px;
}

#contact button[type="submit"]:hover {
	background:#fdb927;
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#contact input:focus, #contact textarea:focus {
	outline:0;
	border:1px solid #999;
}
::-webkit-input-placeholder {
 color:#888;
}
:-moz-placeholder {
 color:#888;
}
::-moz-placeholder {
 color:#888;
}
:-ms-input-placeholder {
 color:#888;
}



/*  footer  */

footer { font-size: .8em; margin: 140px 20px 10px 40px; color: #999; padding-bottom: 15px; }
footer .content { display: inline; margin-bottom: 10px;}
footer a { margin-left: 30px; color: #777; }
footer a:visited { color: #777; }
footer a:hover { color: #000; }


/* social media */ 
footer div.footer-social-icons {  display: inline; float: right;  position: relative; bottom: 10px; right: 15px  }
footer div.footer-social-icons h4 { line-height: 32px; float: left; margin-right: 15px; }
footer div.footer-social-icons a.facebook-icon { 
	display: inline-block; 
	width: 32px; height: 32px;
	margin: 0px 7px; 
	background: url(../images/facebook_icon.png) no-repeat 0 0; 
	border-radius: 4px;
	}

footer div.footer-social-icons a.instagram-icon { 
	display: inline-block; 
	width: 32px; height: 32px; 
	margin: 0px 7px; 
	background: url(../images/instagram_icon.png) no-repeat 0 0; 
	background-size: contain; 
	border-radius: 4px;
	}

footer div.footer-social-icons a.youtube-icon { 
	display: inline-block; 
	width: 32px; height: 32px; 
	margin: 0px 7px; 
	background: url(../images/youtube_icon.png) no-repeat 0 0; 
	background-size: contain; 
	border-radius: 4px;
	}

header div.header-social-icons {z-index: 5; display: inline-block; float: right;  position: absolute; bottom: 5px; right: 15px  }
header div.header-social-icons h4 { line-height: 20px; float: left; margin-right: 15px; }
header.farrierforge div.header-social-icons h4 { color: #fff; }
header.about div.header-social-icons h4 { color: #fff; }

header div.header-social-icons a.facebook-icon { 
	display: inline-block; 
	width: 32px; height: 32px;
	margin: 0px 7px; 
	background: url(../images/facebook_icon.png) no-repeat 0 0; 
	border-radius: 4px;
	}

header div.header-social-icons a.instagram-icon { 
	display: inline-block; 
	width: 32px; height: 32px; 
	margin: 0px 7px; 
	background: url(../images/instagram_icon.png) no-repeat 0 0; 
	background-size: contain; 
	border-radius: 4px;
	}

header div.header-social-icons a.youtube-icon { 
	display: inline-block; 
	width: 32px; height: 32px; 
	margin: 0px 7px; 
	background: url(../images/youtube_icon.png) no-repeat 0 0; 
	background-size: contain; 
	border-radius: 4px;
	}


/*  media queries  */


@media screen and (max-width: 1000px) {
	
	h1 { font-size: 2.2em; }

	/* header */
	/* header div.hero { left: 56%; }
	header div.hero h1 { margin-bottom: 20px; } */

	/* section main */	
	section.main .content img { width: 240px; height: auto; }
	section.main.about .content img { width: 360px; height: auto; }
	section.main aside p { margin-top: 65px; padding: 0 10px; }
	section.main.hoofmaker aside p { margin-top: 10px; padding: 0 10px; }
	section.main.hoofbalsam aside p { margin-top: 10px; padding: 0 10px; }
	section.main.magvet aside p { margin-top: 10px; padding: 0 10px; }
	section.main.farrierforge aside p { margin-top: 10px; padding: 0 10px; }
	section.main aside.productleft div { min-height: 200px;}
	section.main aside.productleft .content img { max-width: 140px; height: auto; margin: 20px 5px 5px 10px;}
	section.main aside.productright div { min-height: 200px;}
	section.main aside.productright .content img { max-width: 140px; height: auto; margin: 20px 5px 5px 10px;}
	section.main aside.productleft p { padding: 0 40px 0 200px;}
	section.main aside.productright p { padding: 0 40px 0 200px;}


 	section.multi-quote.hoofmaker { min-height: 300px; }
 	section.multi-quote.hoofbalsam { min-height: 370px; }
	section.multi-quote.magvet2 { min-height: 300px; }

	/* section highlight */
	section.highlight article { padding-left: 400px; background-size: 375px auto; }
	section.highlight.about article {  padding: 25px 60px ; }
	section.highlight.about { background-size: cover; }

}


@media screen and (max-width: 900px) {

	h1 { font-size: 1.8em; }
	
	/* header */
	header a.logo { width: 200px; height: 93px; }
	header.hoofmaker a.logo { width: 200px; height: 93px; }
	header.magvet a.logo { width: 200px; height: 93px; }
	header.farrierforge a.logo { width: 200px; height: 93px; }
	header { height: 323px; background-image: url(../images/banner_900.jpg); }
	header.products { height: 323px; background-image: url(../images/productsbanner_900.jpg); }
	header.about { height: 323px; background-image: url(../images/aboutbanner_900.jpg); }
	header.contact { height: 323px; background-image: url(../images/contactbanner_900.jpg); }
	header.hoofbalsam { height: 323px; background-image: url(../images/hoofbalsambanner_900.jpg); }
	header.hoofmaker { height: 323px; background-image: url(../images/hoofmakerbanner_900.jpg); }
	header.magvet { height: 323px; background-image: url(../images/magvetbanner_900.jpg); }
	header.farrierforge { height: 323px; background-image: url(../images/forgebanner_900.jpg); }
	
	header.farrierforge h3 { font-size: 1em; }
	
	header div.hero { top: 160px left: 46%; }
	header div.hero h1{ padding: 20px 0 0 0; }
	header div.hero a.btn{ font-size: 1em; }
	
	/* section main */	
	section.main .content img { width: 190px; height: auto; }
	section.main aside p { margin-top: 35px; padding: 0 5px;}
	section.main.about .content img { width: 400px; height: auto; }
	section.main.about aside  { display: block; width: 100%; height: auto; text-align: center; float: none;}
	section.main.magvet aside div.content.magvet iframe.magvet {
    display: block;
    float: none;
    text-align: center;
    margin: 10px 0 20px 15%;
}			
	section.main aside.productleft { display: block; width: 100%; }
	section.main aside.productright { display: block; width: 100%;}
	section.main aside.productleft div { min-height: 200px;}
	section.main aside.productleft .content img { max-width: 200px; height: auto; margin: 20px 5px 5px 10px;}
	section.main aside.productleft div.content.a { background-size: cover;}
	section.main aside.productright div.content.a { background-size: cover;}
	section.main aside.productleft div.content.b { background-size: cover;}
	section.main aside.productright div.content.b { background-size: cover;}
	section.main aside.productright div { min-height: 200px;}
	section.main aside.productright .content img { max-width: 200px; height: auto; margin: 20px 5px 5px 10px;}
	section.main aside.productleft p { padding: 0 40px 0 260px;}
	section.main aside.productright p { padding: 0 40px 0 260px;}


	/* section highlight */
	section.highlight article { padding-left: 25px; background: none; background-size: 550px auto;  background-position: center; 
}	
	section.highlight.home { background: url(../images/photo_hooves_900.jpg)no-repeat 0 5px; background-size: cover;     background-position: center; 
}
	section.highlight.products { background: url(../images/photo_hooves_900.jpg)no-repeat 0 5px; background-size: cover;     background-position: center; 
}
	section.highlight.about article {  padding: 25px 0px ; }
	section.highlight.contact article div.contactinfo {
	text-align: center;	
	width:100%;
	float: none;
	display: block;
}
	section.highlight.contact article div.contactainer {
	min-width:400px;
	width:80%;
	margin-left: 10%;
	float: none;
	display: block;
}

	/* section multi-quote */
	section.multi-quote blockquote p.quote { font-size: 1.1em; line-height: 1.2em; }
 	section.multi-quote blockquote p.credit { font-size: .85em; line-height: 1.2em; }
 	section.multi-quote.hoofmaker { min-height: 260px; }
 	section.multi-quote.home { min-height: 320px; }
 	section.multi-quote aside .content { padding: 30px 10px 20px 0; } 
 	section.multi-quote.hoofbalsam { min-height: 260px; }


	/* section navigation */
	nav { padding-top: 85px; }
	nav > ul { padding-left: 50px; }
	
	/* Footer */
	footer div.content { background-size: 100%; background-color: #fff;}
	footer div.footer-social-icons { display: block; float: none; margin: 30px 0 0 25px;}
	footer { margin: 20px 20px 10px 40px; }

}


@media screen and (max-width: 730px) {

	h1 { font-size: 1.4em; }
	h2 { font-size: 1.2em; }
	h3 { font-size: 1em; }
	a.btn { font-size: 1em; }
	
	/* header */
	header a.logo { width: 200px; height: 93px; }
	header.hoofmaker a.logo { width: 200px; height: 93px; }
	header div.hero { top: 140px left: 48%; }
	header div.hero h1{ padding: 50px 0 0 0; }
	header div.hero a.btn{ font-size: .75em; }
	header.farrierforge h3 { font-size: .8em; }
	
	/* section main */		
	section.main { margin-top: 10px; margin-bottom: 10px; }
	section.main.home aside { width: 100%; }
	section.main.home  aside div.content { background-size: 100px auto; padding-top: 20px; display: inline-block; float: left;}
	section.main.home  aside div.content h3 { display: inline-block; float: left;}
	section.main.home  aside div.content p { display: inline-block; float: right; width: 60%; margin-top: 8px; text-align: left;}
	section.main.about .content img { width: 400px; height: auto; margin-top: 5px;}
	section.main aside p { margin-top: 20px; padding: 0;}
	section.main.magvet aside div.content.magvet iframe.magvet {
    display: block;
    float: none;
    text-align: center;
    margin: 10px 0 20px 0;
}


	/* section highlight */
	section.highlight.products { background-size: cover; }
	
	/* section multi-quote */
	section.multi-quote aside div.content img { width: 100%; }
 	section.multi-quote.hoofmaker { min-height: 360px; }
 	section.multi-quote.home { min-height: 360px; }
 	section.multi-quote.hoofbalsam { min-height: 400px; }
 	section.multi-quote.magvet2 { min-height: 370px; }
	section.multi-quote.productdash { padding: 0 20px; }
	section.multi-quote.productdash aside { width: 96%; text-align: center; }
	section.multi-quote.productdash h2 {margin: 10px 0 25px 0;}
	section.multi-quote.productdash aside .content img { width: 50%; margin-left: 25%;}
	section.multi-quote.productdash aside .content h3 {margin: 0;}
	section.multi-quote.productdash aside .content p {margin: 0;}
	
	
	/* section navigation */
	nav { padding-top: 85px; }
	nav > ul { padding-left: 50px; }

	
}

@media screen and (max-width: 580px) {

	h1 { font-size: 1em; }
	h2 { font-size: 1.2em; }
	h3 { margin-bottom: 0px; }
	a.btn { font-size: 0.9em; }
	
	/* header */
	header { height: 200px; background-image: url(../images/banner_580.jpg); background-position: left top; }
	header.products { height: 200px; background-image: url(../images/productsbanner_580.jpg); }
	header.about { height: 200px; background-image: url(../images/aboutbanner_580.jpg); }
	header.contact { height: 200px; background-image: url(../images/contactbanner_580.jpg); }
	header.hoofbalsam { height: 200px; background-image: url(../images/hoofbalsambanner_580.jpg); }
	header.hoofmaker { height: 200px; background-image: url(../images/hoofmakerbanner_580.jpg); }
	header.magvet { height: 200px; background-image: url(../images/magvetbanner_580.jpg); }
	header.farrierforge { height: 200px; background-image: url(../images/forgebanner_580.jpg); }
	
	
	header a.logo { 
		width: 100%; height: 90px;  
		background-image: url(../images/logo_small.svg);
		left: 0px; top: 0px;
		margin: 0px;
		background-color: rgba(255,255,255,.35);
		background-size: 145px 65px;
		background-position: 10px center;
	}
	
		header.hoofmaker a.logo { 
		width: 100%; height: 90px;  
		background-image: url(../images/logo-green_small.svg);
		left: 0px; top: 0px;
		margin: 0px;
		background-color: rgba(255,255,255,.35);
		background-size: 145px 65px;
		background-position: 10px center;
	}
		header.magvet a.logo { 
		width: 100%; height: 90px;  
		background-image: url(../images/logo-blue_small.svg);
		left: 0px; top: 0px;
		margin: 0px;
		background-color: rgba(255,255,255,.35);
		background-size: 145px 65px;
		background-position: 10px center;
	}
			header.farrierforge a.logo { 
		width: 100%; height: 90px;  
		background-image: url(../images/logo-black_small.svg);
		left: 0px; top: 0px;
		margin: 0px;
		background-color: rgba(255,255,255,.35);
		background-size: 145px 65px;
		background-position: 10px center;
	}
	
		
	header div.hero { z-index: 17; width: 180px; top: 15px; left: 55%; }
	header div.hero h1{ margin-bottom: 10px; padding: 15px 0 0 0; font-size: 1.2em;}
	header div.hero a.btn{ display: none; font-size: .75em; }
	header div.whitewash { background-color: rgba(255,255,255,0); width: 0; height: 0; left: 0;}
	header.about div.hero h1 { font-size: 0.8em; }
	header.products div.hero h1 { font-size: 1em; }

	header.farrierforge div.hero h1 { color: #fff; margin-bottom: 33px; font-size: 1.2em;}
	header.farrierforge div.hero h3 {  font-size: .7em;}
	header.about div.hero h1 { color: #fff; font-size: 1.2em;}
	header.contact div.hero h1 {  color: #fff; font-size: 1.2em;}

	header div.darkwash { width: 55%; left: 45%;}

		
	/* section main */		
	section.main aside { width: 100%; float: none; text-align: left; }
	section.main aside img { position: absolute; float: left; horizontal-align: middle; }
	section.main .content img { width: 220px; height: auto; }
	section.main .content p { min-height: 120px; }
	section.main.home aside div.content h3 { display: block; width: 96%; padding-left: 16%; float: none; min-height: 125px; text-align: center;}
	section.main.home aside div.content p { display: block; width: 96%; margin: 8px 0 8px 0; padding: 0 0 0 10px; float: none; min-height: 100%; }
	section.main aside div.content{ 
		margin: 8px 0 8px 0; 
		padding: 0; 
		background-size: 160px auto;
		background-position: 15px 20px;
		}
	section.main aside p { margin-left: 0px; margin-top: 0px;}
	section.main.hoofbalsam aside p { margin-left: 0px; margin-top: 0px; min-height: 100%;}
	section.main.hoofmaker aside p { margin-left: 0px; margin-top: 0px; min-height: 100%;}
	section.main aside.about p {margin: 2px; padding: 0; min-height: 100%; position: relative; float: none;}
	section.main aside.about h4 {position: relative; float: none;}
	section.main.about .content img {margin: 3px 9% 15px 9%; padding: 0; width: 80%; display: block; position: relative;}
	section.main.magvet aside div.content.magvet iframe.magvet {
    width: 338px;
    height: 240px;
    text-align: center;
    margin: 10px 0 20px 0;
}
	section.main aside.productleft .content img { background: rgba(255,255,255,.6); border-radius: 2px; }
	section.main aside.productright .content img { background: rgba(255,255,255,.6); border-radius: 2px; }
	section.main aside.productleft .content img { max-width: 150px; height: auto; margin: 20px 5px 5px 10px;}
	section.main aside.productright .content img { max-width: 150px; height: auto; margin: 20px 5px 5px 10px;}
	section.main aside.productleft p { padding: 0 40px 0 200px;}
	section.main aside.productright p { padding: 0 40px 0 200px;}
	
	section.main.farrierforge aside div.content.farrierforge div.forgefeature img { float: none; position: relative;}
	section.main.farrierforge aside div.content.farrierforge div.forgefeature  { float: none; margin-right: 0;}	
	section.main.farrierforge aside .forgeimages img  { float: none; margin-right: 0; position: relative;}	

	/* section highlight */

	section.highlight article { padding: 40px 20px 0px 0px; background-size: 300px auto; min-height: initial; }
	section.highlight.hoofmaker article { padding: 0;}
	section.highlight.farrierforge article { padding: 0;}
	section.highlight.contact {
	padding: 0;	

}
	section.highlight.contact article{
	padding: 0;	

}
	section.highlight.contact article div.contactinfo {
	text-align: center;	
	width:100%;
	float: none;
	display: block;
}
	section.highlight.contact article div.contactainer {
	min-width:300px;
	width:80%;
	margin: 0 0 0 8% ;
	float: none;
	display: block;
}
	
	/* section multi-quote */
	section.multi-quote aside { width: 100%; float: none; margin: 0px; position: relative; min-height: 80px;}
	section.multi-quote aside div.content { text-align: center; padding: 25px; }
	section.multi-quote aside div.content p { font-size: .9em;  }
	section.multi-quote aside div.content img { 
		display: inline-block;
		width: 125px;
		position: relative;
		top: 5px; left: 0px;		
		}
	section.multi-quote blockquote { 
		margin: 0 20px 0 40px;
		width: 90%;
		padding: 1px 0 20px 0;
		position: relative;		
		}
	section.multi-quote blockquote p.credit { margin-bottom: 0; }
	section.multi-quote.magvet { padding: 10px 30px;}
	section.multi-quote.magvet aside { margin: 0; width: 96%;}
	section.multi-quote.magvet aside .content {min-height: 100%;}
	section.multi-quote.magvet aside .content h3 {margin: 0; }
	section.multi-quote.magvet aside .content p {margin: 0; }
	section.multi-quote.productdash aside div.content { min-height: 100%; }
		
		
	/* section navigation */
	nav { position: static; width: auto; padding: 20px 15px; background-color: #cdcdcd; }
	
	nav ul, nav ul ul, nav ul ul ul { display: block; position: static; }
	
	nav > ul  { padding: 0; }
	nav >ul >li  { float: none; margin-top: 25px; }
	
	nav ul li:hover { background: none; }
	
	nav ul li a {
		width: auto;
		display: block;
		margin: 8px 10px;
		padding: 8px 15px;
		border: 1px solid rgba(255,255,255,.45);
	}
	nav ul li a:hover {
		background-color: rgba(255,255,255,.25):
	}
	nav ul ul {  background: none; }
	
	nav ul ul li a { margin-left: 30px; }
	nav ul ul ul li a { margin-left: 60px; }
	
	nav a[aria-haspopup="true"]::after { display: none; }
	
	/* Footer */
	footer div.content { display: block; margin-top: 15px;}
	footer div.content a { margin: 0 20px 0 0; }
}


@media screen and (max-width: 420px) {

	
	/* header */
	header { height: 160px; background-image: url(../images/banner_420.jpg); }
	header.products { height: 160px; background-image: url(../images/productsbanner_420.jpg); }
	header.about { height: 160px; background-image: url(../images/aboutbanner_420.jpg); }
	header.contact { height: 160px; background-image: url(../images/contactbanner_420.jpg); }
	header.hoofbalsam { height: 160px; background-image: url(../images/hoofbalsambanner_420.jpg); }
	header.hoofmaker { height: 160px; background-image: url(../images/hoofmakerbanner_420.jpg); }
	header.magvet { height: 160px; background-image: url(../images/magvetbanner_420.jpg); }
	header.farrierforge { height: 160px; background-image: url(../images/forgebanner_420.jpg); }
	
	header.products { height: 160px;  }
	header.about { height: 160px;  }
	header.contact { height: 160px;  }
	header a.logo { 
		width: 100%; height: 90px; 
		left: 0px; top: 0px;
		margin: 0px;
		background-color: rgba(255,255,255,.35);
		background-size: 126px 60px;
		background-position: 15% 40% ;
	}
	header.hoofmaker a.logo { 
		width: 100%; height: 90px; 
		left: 0px; top: 0px;
		margin: 0px;
		background-color: rgba(255,255,255,.35);
		background-size: 126px 60px;
		background-position: 15% 40% ;
	}
	header.magvet a.logo { 
		width: 100%; height: 90px; 
		left: 0px; top: 0px;
		margin: 0px;
		background-color: rgba(255,255,255,.35);
		background-size: 126px 60px;
		background-position: 15% 40% ;
	}
	header.farrierforge a.logo { 
		width: 100%; height: 90px; 
		left: 0px; top: 0px;
		margin: 0px;
		background-color: rgba(255,255,255,.35);
		background-size: 126px 60px;
		background-position: 15% 40% ;
	}	
	header div.hero { width: 100%; top: 100px; left: 0px; text-align: center; }
	header div.hero h1 { font-size: 1.1em; margin-bottom: 10px; padding: 0; color: #fdb927}
	header.products div.hero h1 { display: none;}

	header div.hero a.btn { padding: 2px 30px; font-size: .8em; }
	header div.hero a.btn span { display: none; }
	header div.hero h1 span { display: none; }
	header div.header-social-icons a.facebook-icon { background-size: 80%; background-position: bottom; }
	header div.header-social-icons a.instagram-icon { background-size: 80%; background-position: bottom; }
	header div.header-social-icons { right: 5%;}
	
	header div.whitewash { background-color: rgba(255,255,255,0); width: 0; height: 0; left: 0;}
	header div.darkwash { width: 100%; left: 0;}
	
	header.farrierforge div.hero h1 { color: #fff; letter-spacing: .05em;}
	header.farrierforge div.hero h3 { display: none;}
	
	
	/* section main */	
	section.main.home aside div.content h3 { padding-left: 14%; }
	
	section.main aside.productleft h3 a { text-align: center; }
	section.main aside.productright h3 a { text-align: center; }
	section.main aside.productleft .content img { float: none; position: relative; display: block; }
	section.main aside.productright .content img { float: none; position: relative; display: block; }
	section.main aside.productleft .content img {  margin: 20px 0 5px 23%;}
	section.main aside.productright .content img {  margin: 20px 0 5px 23%;}
	section.main aside.productleft p { text-align: center; padding: 0 20px; }
	section.main aside.productright p { text-align: center; padding: 0 20px; }
	section.main.magvet aside div.content.magvet iframe.magvet {
    width: 273px;
    height: 195px;
    text-align: center;
    margin: 10px 0 20px 0;
}
	section.main.magvet aside { width: 90%; margin-left: 4%; margin-right: 4%; }
	
	
	section.highlight.contact article div.contactainer {
	min-width:260px;
	width:80%;
	margin: 0 0 0 2% ;
	float: none;
	display: block;
}


	
	/* section highlight */
	section.highlight.hoofbalsam { padding: 30px 5px; }
	section.highlight.hoofmaker article ul { margin-left: 9px; }
	section.highlight.farrierforge article ul { margin-left: 7px; }
	
		
	/* section multi-quote */		

	section.multi-quote blockquote { width: 100%; margin: 5px 5px 0 5px; right: 2%;}
	section.multi-quote blockquote p.quote { margin-right: 15px;}
	

	/* Footer */
	
	footer::after { content:''; display: block; clear: both;}
	footer div.content a { 
		display: inline-block;
		margin: 0 0 10px 0; 
		float: left;
		clear: both;
		}
	footer div.content { height: 130px;}
	footer div.footer-social-icons { position: relative; }
	footer div.footer-social-icons h3 { margin-right: 0px; width: 100%;}
}