/* RESET  ------------------------------------------------------ */  
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}

html {
font-size: 62.5%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
*,*:before,*:after {box-sizing: inherit;}

body {background:#fff;line-height:1;}
ol, ul {list-style:none;}
a:hover, a:active, a:focus {outline:0;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:'';content:none;}
table {border-collapse:collapse;border-spacing:0;}
b, strong, th, .bold {font-weight:bold;}
pre, code, kbd, samp {font-family:monospace, monospace;_font-family:'courier new', monospace;font-size:1em;}
pre {white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
small, .small {font-size:75%;}
sub, sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup {top:-0.5em;}
sub {bottom:-0.25em;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
abbr[title] {border-bottom:1px dotted;}
fieldset {margin:0 2px;padding:0.35em 0.625em 0.75em;}
button, input, select, textarea {font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;}
button, input {*overflow:visible;}
button, html input[type="button"], input[type="reset"], input[type="submit"] {cursor:pointer;-webkit-appearance:button;}
input[type="checkbox"], input[type="radio"] {box-sizing:border-box;}
textarea {overflow:auto;vertical-align:top;}


/* CLEARING ------------------------------------ */
.clearfix:before, .clearfix:after,
.innerwrap:before, .innerwrap:after,
.suppliers:before, .suppliers:after,
.silo:before, .silo:after {content:"";display:table;}
.clearfix:after,
.innerwrap:after,
.suppliers:after,
.silo:after {clear:both;}
.clearfix,
.innerwrap,
.suppliers,
silo {*zoom:1;}

/* LAYOUT
 ------------------------------------------------------ */
.wrapper {position:relative;}
.innerwrap {position:relative; max-width:1060px; margin:0 auto; padding:0 2%;}
.content {padding: 2em 0;}



/* Typographical Elements
----------------------------------------------------- */

body {background-color: #fffbf6; color: #000; font-family: 'Merriweather', serif; font-size: 18px; font-size: 1.8rem; font-weight: 400; line-height: 1.5; margin: 0;}

p, ul, ol, blockquote  {margin:0 0 1.5em; padding: 0;}
li {list-style-type: none;}
b, strong {font-weight: 700;}
blockquote, cite, em, i {font-style: italic;}
blockquote {position:relative; margin:1em 4em; padding:1.5em 4em; border-left: 2px solid #f1f1ff;}
hr {background-color:#eee; border:0; height:1px; margin-bottom:1.5em;}

.ta-center {text-align:center;}
.ta-right {text-align:right;}

a, .blue {color: #3e84c7; text-decoration: none;} /* blue */
a:hover, .green {color: #f48465;} /* orange */

embed, iframe, img, object, video {max-width: 100%;}
img {height: auto;}

.alignleft {float:left; margin:0 2em 2em 0;}
.alignright {float:right; margin:0 0 2em 2em;}

::-moz-selection {background-color: #369; color: #fff;}
::selection {background-color:#369; color: #fff;}

@media only screen and (max-width:600px) {
  body {font-size: 16px; font-size: 1.6rem;}
  p, ul, ol, blockquote {margin:0 0 1.1em;}
.alignleft, .alignright {float:none; display:block; margin:1em 0;}
}



/* Transitions
--------------------------------------------- */
a,
button,
input:focus,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus,
.button,
.gallery img,
.bigimage {-webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;}


/* Headings
--------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {font-weight: 700; line-height:1.2; margin:0 0 .5em;}

h1 {font-size:40px;font-size:4rem; margin-top:1em; -webkit-font-smoothing: antialiased;}
h2 {font-size:30px;font-size:3.0rem; font-weight: 300; -webkit-font-smoothing: antialiased;}
h3 {font-size:22px;font-size:2.2rem;}
h4 {font-size:18px;font-size:1.8rem;}
h5 {font-size:16px;font-size:1.6rem;}
h6 {font-size:14px;font-size:1.4rem;}

/* Forms
--------------------------------------------- */

input,
select,
textarea {background-color: #fffbf6; border: 1px solid #eae4d8; color: #000; font-size: 18px; font-weight: 300; padding: 16px; width: 100%; -webkit-border-radius:8px; -moz-border-radius:8x; border-radius:8px;}

input:focus,
textarea:focus,
button {outline: none;}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {width: auto;}

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {color: #ccc1bf; font-weight: 400; opacity: 1;}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button {background-color: #3e84c7;  color: #fff; border: none; cursor: pointer; font-size: 18px; font-weight: 500; padding: 13px 24px; width: auto; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}
.button {display: inline-block;}

button:hover,
input:hover[type="button"],
input:hover[type="reset"],
input:hover[type="submit"],
.button:hover {background-color: #f48465; color: #fff;} /* peach */

.button.white {background-color:transparent; color:#fff; border:1px solid #fff; display:inline-block;}
.button.white:hover {background: rgba(255,255,255,.2);}
.button.wide {padding: 9px 80px;}

/* 8 column Grid
------------------------------------------------------------- */
[class*='col-'] {float: left; margin-left: 2.564102564102564%;}

.col-1-2 {width:48.717948717948715%;}
.col-1-3 {width:31.623931623931625%;}
.col-2-3 {width:65.81196581196582%;}
.col-1-4 {width:23.076923076923077%;}
.col-3-4 {width:74.35897435897436%;}
.col-1-5 {width:17.94871794871795%;}
.col-2-5 {width:38.46153846153846%;}
.col-3-5 {width:58.97435897435897%;}
.col-4-5 {width:79.48717948717948%;}
.col-1-6 {width:14.52991452991453%;}
.col-5-6 {width:82.90598290598291%;}
.col-1-7 {width:12.08791208791209%;}
.col-2-7 {width:26.73992673992674%;}
.col-3-7 {width:41.39194139194139%;}
.col-4-7 {width:56.04395604395604%;}
.col-5-7 {width:70.69597069597069%;}
.col-6-7 {width:85.34798534798534%;}
.col-1-8 {width:10.25641025641026%;}
.col-3-8 {width:35.8974358974359%;}
.col-5-8 {width:61.53846153846154%;}
.col-7-8 {width:87.17948717948718%;}

[class*='col-'].first {clear:both; margin-left:0;}
.pushright {float:right;}

.silo {float:none; display:block; margin:0 auto;}

@media only screen and (max-width: 800px) {
	[class*='col-'] {float:none; display:block; margin:0; width:100%;}
}


/*  HEADER
------------------------------------------------------------- */
.header {position:fixed; top:0; z-index:200; width:100%; background: rgba(255,255,255,.9); -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, .3); -moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, .3); box-shadow: 0px 2px 3px rgba(0, 0, 0, .3);}
.header .innerwrap {padding:0;}
.logo {float:left;	width:50%; max-width:356px; padding: .2em 0; margin-left:2%; }
.logo img {width:100%; display:block;}

@media only screen and (max-width: 800px) {
  .logo {width:70%;}
}

/*  MAIN MENU
------------------------------------------------------------- */
.nav {float:right; margin-top:1.5em; margin-right:2%;}  /* margin-top:1em; (no sun) */
.nav ul {margin:0; display:inline; list-style: none;}
.nav li {float:left; position:relative; margin: 0 5px; margin: 0 .5rem;}
.nav li a {display: inline-block; width: 100%; font-size: 16px; font-size: 1.6rem; color: #000; padding: 16px; padding: 1.6rem;}
.nav li a:hover {color:#f48465;} /* peach */
.nav li.nav-butt a {background-color:#3e84c7; color:#fff; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px;}
.nav li.nav-butt a:hover {background-color:#f48465; color:#fff;} /* peach */
 
/*  Sub Menu dropdowns 
--------------------------------------------- */
.nav ul ul {background-color: #ffffff; position: absolute; top: 100%; left: -999em; z-index: 99999; -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px;}
.nav ul ul ul {left: -999em; top: 0;}
.nav ul ul li {border-top: 0;}
.nav ul ul li:hover {border-top: 0;}
.nav ul ul li:hover > ul {left: 100%;}
.nav ul ul a { width:200px; height:auto; padding:12px 16px; padding:1.2rem 1.6rem; font-size: 14px; font-size: 1.4rem;}
.nav ul ul a:hover, .nav ul ul a:active {border-top: 0; background: #f4f4f4;}
.nav ul ul .active {background: #f4f2ed;}
.nav .active ul a {background:none;}
.nav li:hover > ul {left: auto;}


/* Navigation toggles
--------------------------------------------- */
 .sub-menu-toggle,
.menu-toggle {display:none; visibility:hidden;}


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

/* Mobile Menu
--------------------------------------------- */
.menu-toggle,
.sub-menu-toggle {display: inline-block; color:#fff; overflow: hidden; line-height:0; visibility: visible; -webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0; -webkit-transition: 0;-moz-transition: 0;-ms-transition: 0;-o-transition: 0;transition: 0;}
.menu-toggle {float:right; background: transparent; color: #3e84c7; font-size: 40px; font-size: 4rem; padding: 18px 13px; padding: 1.8rem 1.3rem; margin: 35px 2% 0 0; margin: 3.5rem 2% 0 0; }
.menu-toggle.activated {color:#f48465;  padding: 18px 16px 18px 15px; padding: 1.8rem 1.6rem 1.8rem 1.5rem;}

.sub-menu-toggle {position: absolute; top: 5px; right: 12px; padding: 12px 8px 14px; padding: 1.2rem .8rem 1.4rem; margin: 0; font-size: 18px; font-size: 1.8rem;}
.sub-menu-toggle.activated {color:#fff; padding: 12px 10px 14px 10px; padding: 1.2rem 1rem 1.4rem 1rem;}

.menu-toggle:hover, .sub-menu-toggle:hover {background:transparent; color:#f48465;}

.menu-toggle:before {content: "\2630";}
.menu-toggle.activated:before {content: "X";}

.sub-menu-toggle:before {content: "+";}
.sub-menu-toggle.activated:before {content: "-";}

.nav {position: absolute; top: 100%; width: 100%; background: #fff; margin-top: 0; margin-right:0; display: none;}
.nav ul li {float:none; display:block; width:100%; margin:0; position:relative; border-bottom: 1px solid #eee;}
.nav ul li:last-child {border-bottom:none;}
.nav li.nav-butt a {background:none; color:#000; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0;}
.nav ul li a {width:100%; height:auto; color:#000; font-size:14px; font-size:1.4rem; padding:10px 0 10px 20px; padding:1rem 0 1rem 2rem; margin:0; text-align:left;}
.nav ul a:hover,
.nav li.nav-butt a:hover,
.nav ul .active > a,
.nav ul ul .active > a:hover {background:#eee; color:#000;}

.nav ul li:hover {position: relative;}
.nav ul ul {clear: both; display: none; opacity: 1; position: static; width: 100%;}
.nav ul ul a {border-left: 0; position: relative;}
.nav ul ul ul {margin: 0;}
.nav ul ul ul a {padding-left: 30px;}
.nav ul ul ul ul a {padding-left: 40px;}
}

@media only screen and (max-width: 500px) {
.menu-toggle {font-size: 30px; font-size: 3rem;}
}
@media only screen and (max-width: 350px) {
.menu-toggle {font-size: 24px; font-size: 2.4rem; margin-top:1em; }
}

/* TOP BG IMAGE
--------------------------------------------- */
.top-bg {
position: absolute;
width: 100%;
top:0;
left:0;
height:300px;
z-index:-1;
text-align: center;
background: #aac5de; /* BLUE    */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FhYzVkZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk4JSIgc3RvcC1jb2xvcj0iIzNhOGJjMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(left,  #aac5de 0%, #3a8bc2 98%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#aac5de), color-stop(98%,#3a8bc2));
background: -webkit-linear-gradient(left,  #aac5de 0%,#3a8bc2 98%);
background: -o-linear-gradient(left,  #aac5de 0%,#3a8bc2 98%);
background: -ms-linear-gradient(left,  #aac5de 0%,#3a8bc2 98%);
background: linear-gradient(to right,  #aac5de 0%,#3a8bc2 98%);
}

.ie8 .top-bg {filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aac5de', endColorstr='#3a8bc2',GradientType=1 );}
.home .top-bg {background: url(../images/heroimage.jpg) no-repeat center center #fff; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height:522px; border-bottom: 6px solid #3e84c7;}
.ie9 .home .top-bg {filter: none;}
.top-bg div {display: none;}
.home .top-bg div {
display: block;
position:absolute;
bottom:0;
left:0;
width:100%;
background: rgba(255,255,255,.6); 
font-family:Georgia, "Times New Roman", Times, serif; 
font-size: 30px; font-size: 3rem;
line-height:1;
text-align:center;
padding:15px 0;
}

@media only screen and (max-width: 1024px) {
.home .top-bg {height:400px;}
}
@media only screen and (max-width: 800px) {
.home .top-bg {height:350px;}
}
@media only screen and (max-width: 600px) {
.home .top-bg div {font-size: 24px; font-size: 2.4rem;}
}
@media only screen and (max-width: 350px) {
.top-bg {height:230px;}
.home .top-bg {height:250px;}
.home .top-bg div {font-size: 16px; font-size: 1.6rem; padding:10px 0;}
}


/* CONTENT 
------------------------------------------------------------- */
.content {margin-top:105px; margin-top:10.5rem;}
.content ul, .content ol {margin:15px 0 15px 20px; margin:1.5rem 0 1.5rem 2rem; list-style-position:outside;}
.content li {list-style:disc; line-height:1.4; padding-bottom:10px; padding-bottom:1rem;}
.supplier-page .content .innerwrap {border-bottom: 1px solid #eee; padding-bottom:30px; padding-bottom:3rem;}
.company-logo {display:block; max-height: 135px; margin-bottom:50px; margin-bottom:5rem;}

@media only screen and (max-width: 350px) {
.content {margin-top: 65px; margin-top: 6.5rem;}
.company-logo {margin-bottom:0; max-height:120px;}
.company-logo.xtrapad {margin-top:1em;}
}

/*  Helpers ------------------- */
.content .ntm {margin-top: 0;}

/* HOMEPAGE
------------------------------------------------------------- */
.home .content {padding:20px; padding:2rem; margin-top:520px; margin-top:52rem;}
.hometext {text-align: center;}
.hometext h2 div {color:#3e84c7; font-weight:bold; font-size: 36px; font-size: 3.6rem;}
.hometext p {margin-bottom: 1em;}
.intro {font-size: 26px; font-size: 2.6rem; line-height:1.2; margin-bottom:1em;}
.intro span {font-size: 36px; font-size: 3.6rem;}

@media only screen and (max-width: 1024px) {
.home .content {margin-top:400px; margin-top:40rem;}
}
@media only screen and (max-width: 800px) {
.home .content {margin-top:350px; margin-top:35rem;}
}
@media only screen and (max-width: 350px) {
.home .content {margin-top:240px; margin-top:24rem;}
}

/* SUPPLIER BLOCKS
------------------------------------------------------------- */
.supplier {position: relative; float:left; width: 23%; margin: 1%; background: #f7f1e8;}

@media only screen and (max-width: 1025px) {
.supplier {width: 31.3333%;}
}
@media only screen and (max-width: 770px) {
.supplier {width: 48%;}
}
@media only screen and (max-width: 500px) {
.supplier {width: 96%; margin: 2%;}
}

.supplier-logo {padding: 20px 20px 0; padding: 2rem 2rem 0;}
.supplier-logo img {width: 100%; height: auto;}
.supplier-description {font-size:13px; font-size:1.3rem; line-height:1.2; padding:0 20px; padding:0 2rem;}
.supplier-hover {position: absolute; top:0; left:0; width: 100%; height: 100%; opacity: 0; background: rgba(0,4,20,.3); -webkit-transition: all ease .5s; -moz-transition: all ease .5s; transition: all ease .5s;}
.supplier-hover:hover {opacity: 1;}
.supplier-hover-content {position: absolute; top: 42%; width: 100%; height: 20px; margin-top: -12px; text-align: center; font-size: 20px; color: #fff;}
.supplier-hover-content i {margin-top: -12px; background: rgba(255,255,255,.9); border-radius: 300px; color: #101010; padding: 12%; font-size: 20px; font-size: 2rem;}

/* testimonials 
------------------------------------------------------------- */
.testimonials {clear: both; background:url(../images/photo-testimonial.jpg) no-repeat center center fixed;  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.testimonials i {color: #ffffff; opacity:.5; position:absolute; top:15px; }
.quote {font-size: 24px; color: #ffffff; font-weight: 300; width:100%; height:250px; padding:36px 80px 0; padding:3.6rem 8rem 0;}
.quote .credit {font-size:12px; letter-spacing:1px; margin-top:15px; text-transform:uppercase;}
.pager {text-align:center; width:100%; z-index:500; top:10px; overflow:hidden;}
.pager span { font-size:30px; width:16px; height:16px; display:inline-block; color:#ddd;}
.pager span:hover {cursor:pointer;}
.pager span.cycle-pager-active {color:#888;}

@media only screen and (max-width: 770px) {
.quote {height:180px; font-size: 18px; font-size: 1.8rem;}
.quote .credit {font-size:10px;}
}
@media only screen and (max-width: 500px) {
.quote {font-size: 16px; font-size: 1.6remx; padding-bottom:10px; padding-bottom:1rem;}
.quote .credit {font-size:10px;}
}

/* contact
------------------------------------------------------------- */
.contact {padding:60px 0 90px; padding:6rem 0 9rem;}
.contact-form,
.contact-text {background:#f6f0e7; padding:15px; padding:1.5rem;}
.contact-form ul {margin:0;}
.form li {position:relative; text-align: right; list-style: none;}
.form li.username {display:none;}
.form input[type="text"], .form textarea {width:98%;}
label {display:block; margin-bottom:9px;}
.form .math input[type="text"] {width:60px;}
.contact-success {padding:5% 0; overflow:hidden; font-size:1em;}
.contact-error {color:#ec5b43; font-size:11px; font-size:1.1rem; text-transform:uppercase; font-weight:bold; position:absolute; top:16px; right:20px;}
.math .contact-error { right:70%;}

/* FOOTER 
------------------------------------------------------------- */
.footer {background:#002942; padding:30px 0; font-size:16px; font-size:1.6rem; color:#999f9f; line-height:2;}
.footer h5 {color:#f6f0e7; font-size:16px; font-size:1.6rem;}
.footer a {	color:#999f9f;}
.footer a:hover {color:#f6f0e7;}
.footer .signature {font-size:10px; font-size: 1rem; padding-top:105px; padding-top:10.5rem;}
.footer .totop {text-align:right; padding-top:60px; padding-top:6rem;}

@media only screen and (max-width: 500px) {
.footer, .footer .col-1-3, .footer .totop, .footer .signature {text-align:center;}
.footer .signature {padding-top:30px; padding-top:3rem;}
.footer .totop {padding-top:30px; padding-top:3rem;}
}