/* main */
::selection {
    background: #00aeef;
    color: #FFF;
}
body {text-align: center; font-family:"Open Sans", Geneva, sans-serif; padding-top:15px; color:#364b53}
h1, h2, h3, h4, h5, h6{color:#434950; font-size:1.5em; text-align:center; font-weight:bold; font-family: "Open Sans"; text-align:left}
h3 {color:#434950; text-align:center}
.container{width: 92%; margin: 0 auto; background:#FFF; padding-bottom: 10px; }
#content {margin:40px 0} 
#logo {float:left}
p {margin:0 0 1.5em;}
.button {background: none repeat scroll 0 0 #364b53; width: 100%; padding: 15px; text-decoration: none; 
color: #FFF !important; font-weight: bold; margin-top: 15px; border-radius: 2px;}
.button:hover, .submit:hover {background:#263940 !important}
li .button {background: #00aeef  !important ; display:inline-block;}
.button a {color: #FFF !important}
#logo img {max-height:72px}
.logos { padding:25px}
.logos img{margin:auto 25px}
footer .grid_6 img {margin-bottom:10px}
.cc-color-override--519135188 .cc-link, .cc-color-override--519135188 .cc-link:active, .cc-color-override--519135188 .cc-link:visited, .cc-revoke, .cc-window, .cc-color-override--519135188 .cc-highlight .cc-btn:first-child {color:white !important; font-family: "Open Sans" !important;}

#collect input, #collect textarea, #collect select {
background: #ebeded !important ;
color: #434950 !important ;
border:1px solid #ebeded !important ;
}

.radio {
width:25px !important
}

/* links */
a {color:#000; text-decoration:none;}
a:hover {text-decoration:none;}

/* header */
header {padding:15px 0;}
#hero,
#page-header{
	background-image:url(../images/printer-cartridge-recycling-northampton.jpg);
	background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    background-attachment: fixed;
	padding:20px 0;
	font-size:1.1em;
	text-align:center
}
#hero  .grid_6 {margin: 0 auto;
float: none !important; background: rgba(255, 255, 255, 0.8); text-align:center; border-radius: 2px;}

#hero h1 {text-align:center; font-size:2em; margin-bottom:25px}

#hero .button {background:#00aeef; font-size:1.1em; text-transform:uppercase; border-radius: 2px;}

#hero .row {margin:0 !important}


/* scalable images */
img { max-width:100%; height:auto;}

/* header nav */
.menu-toggle{display:block; padding:10px; margin:20px 0 0; background:#666; color:#fff; cursor:pointer; text-transform:uppercase;font-size:20px; width:100%;; float:left; font-family: "Open Sans"; text-align:left}
.menu-toggle.toggled-on{background:#00aeef;}
.srt-menu{display:none;}	
.srt-menu.toggled-on{display:block; position:relative; z-index:10;}
.srt-menu{clear:both; margin-bottom:60px;}
.srt-menu li a {display:block; margin:1px 0; padding:10px 8px; text-decoration:none; font-size:0.9em; background:#DEDEDE; color:#000; text-align:left !important; text-transform:uppercase}
.srt-menu li a:hover{color:#00aeef;}
.srt-menu li li a {background:#e8e8e8; padding-left:40px;}
.srt-menu li li li a {background:#efefef; padding-left:80px;}

/* header nav - secondary */
#secondary-navigation {margin-bottom:60px;}
#secondary-navigation ul {margin:0; padding:0;}
#secondary-navigation ul li a {background:#E6E6E6; display:block; margin:5px 0; padding:10px; text-decoration:none;}
#secondary-navigation ul li a:hover, #secondary-navigation ul li.current a {background:#0099ff; color:#fff;}

/* grid layouts*/
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {margin-bottom:10px; position: relative; min-height: 1px; padding-left: 25px; padding: 15px 35px 15px 35px; text-align:left}
.grid_4 p, .grid_4 ul li, .grid_8 p, .grid_8 ul li, .grid_7 p, .grid_7 ul li, .grid_5 p, .grid_5 ul li, .grid_12 p {color:#434950; text-align:left}
.grid_3 ul {list-style: outside none none; color: #23408F; font-size: 0.6em; text-align:left; margin: 0px 0px 15px;
padding: 0px;}
.grid_3 h2 {font-size:0.9em}
.grid_12 div {text-align:left; padding: 10px;}
.grid_4 iframe {margin-top:15px}

/* floats*/ 
.clearfix:before, .clearfix:after, .row:before, .row:after {content: " "; display: table;}
.clearfix:after, .container:after, .row:after{clear: both;}

/* media query for larger mobiles */ 
@media only screen and (min-width: 481px) {
#banner{float:left; text-align:left; margin-bottom:-20px;/*this depends on the height of the logo*/}
.menu-toggle{/*make menu float right, instead of sitting under the logo*/ margin-top:10px; /*this depends on the height of the logo*/float:right; text-align:left}
#circle {display:none}
#ctitle {display:none}
} 
@media only screen and (max-width: 481px) {
#hero, #page-header {
  background-size: auto 650px!important
}
} 
@media only screen and (max-width: 920px) {
.button {display:block}
}

/* media query for tablets and small desktop resolutions */ 
@media only screen and (min-width: 920px) {
.container{margin: 0 auto;}

header{padding:0;}
#content {float:left; width:65%;}
#content.wide-content{float:none; width:100%;}
#hero{
	padding: 15% 0;
}


.menu-toggle{display:none;}
#menu-main-navigation{display:block; height:43px}
.srt-menu, .srt-menu * {margin: 0; padding:0; list-style: none;}
.srt-menu ul {position: absolute; display:none; width: 12em; /* left offset of submenus need to match (see below) */}
.srt-menu ul li {width: 100%;}
.srt-menu li:hover {visibility:		inherit; /* fixes IE7 'sticky bug' */}
.srt-menu li {float: left; position: relative; margin-left:1px;}
.srt-menu li li {margin-left:0px;}
.srt-menu a {display: block; position:relative; text-decoration:none}
.srt-menu li:hover ul,
.srt-menu li.sfHover ul {display:block; left: 0;top: 45px; /* match top ul list item height */ z-index: 99; -webkit-box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3); box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);}
ul.srt-menu li:hover li ul, ul.srt-menu li.sfHover li ul {top: -999em;}
ul.srt-menu li li:hover ul, ul.srt-menu li li.sfHover ul {left: 12em; /* match ul width */ top: 0;}
ul.srt-menu li li:hover li ul, ul.srt-menu li li.sfHover li ul {top: -999em;}
ul.srt-menu li li li:hover ul, ul.srt-menu li li li.sfHover ul {left: 10em; /* match ul width */ top: 0;}
#topnav, .srt-menu {float: right; margin-top: 8px;}
.srt-menu a {text-decoration:none;}
.srt-menu li a {color: #434950; margin: 0 2px 0 2px; padding: 10px; font-family: "Open Sans"; text-align:left; background:white}
.srt-menu li li a {background: #333; /*fallback for old IE*/ background:rgba(255,255,255,.9); color: #2d282a; padding-left:20px;height:auto;}
.srt-menu li li li a, .srt-menu li.current * li a{padding-left:20px; background:rgba(0,0,0,.6);}
.srt-menu li:hover > a, .srt-menu li.current a{color:black;}
.srt-menu li li:hover > a{color:#fff; background:#0099ff;}
.row{margin-left: -15px; margin-right: -15px;}
.grid_1 {width: 8.33333333%;}
.grid_2 {width: 20%;}
.grid_3 {width: 25%;}
.grid_4 {width: 33.33333333%;}
.grid_5 {width: 41.66666667%;}
.grid_6 {width: 50%;}
.grid_7 {width: 58.33333333%;}
.grid_8 {width: 66.66666667%;}
.grid_9 {width: 75%;}
.grid_10 {width: 83.33333333%;}
.grid_11 {width: 91.66666667%;}
.grid_12 {width: 100%;}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {display:block; float:left}
.rightfloat{float:right;}
}

/* media query for desktops */ 
*/
@media only screen and (min-width: 1030px) {

} 

/* media query for larger resolutions */ 
@media only screen and (min-width: 1240px) {

} 

/* media query for iPhone (4s) and iPad (2,3) */ 
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {
#circle {display:none}
.submit {font-size:1em}
#ctitle {display:none}
footer #footernav a.green{float: left; margin-top:25px}
} 

/* media query for iPhone 5 or iPod Touch 5th generation */ 
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { 
#circle {display:none}
.submit {font-size:1em}
#ctitle {display:none}
footer #footernav a.green{float: left; margin-top:25px}
}

/* print */ 
@media print {
  * {background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited {text-decoration: underline; }
  a[href]:after {content: " (" attr(href) ")"; }
  abbr[title]:after {content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

section .quote {padding: 25px 0 0 55px; background:url(../images/quote-left.png) no-repeat 0 25px; min-height:70px}

.grid_7 div {float: left; width:300px; font-size:0.9em; margin:10px 0}
.grid_7 div img {float:left; margin-right:15px}
.grid_7 div a {color:#FFF; font-weight:bold}

/* contact form */

label {display:block; background:#00aeef; text-align:left; color:#00aeef; font-size:1.1em; padding:7px;}
#columnsdemo h2, #columnsdemo a {color:#FFF}
select {font-family:"Open Sans", Geneva, sans-serif;}
input, textarea {width:566px; background: none repeat scroll 0 0 #00aeef; border: 1px solid #00aeef; color:#fff; font-family:"Open Sans", Geneva, sans-serif; padding:25px 15px}
#container .col ul li.sm {font-size: 0.7em;}
.submit {width:100%}
form p {font-size:1.2em !important}
.sm {font-size: 0.7em !important}
input, textarea, select {width:100%; padding:18px 12px; border:1px solid #00aeef; margin-bottom:15px; background:#00aeef; color:#fff} 
input:hover, textarea:hover {cursor:pointer}
#circle {position:absolute; left:-145px; top:800px; z-index:1000}
.callback {background:#2ebdf3; width:100%; color:#FFF; padding:2% 4% 2% 4%}
.callback .button {display:block}
.ink {background:#9ecc62; width:100%; color:#FFF; padding:2% 4% 2% 4%}
.ink h2, .ink h3, .ink p {color:#0b8052 !important;}


/* footer */

#seo {background:#ebeded; padding:3% 3% 1% 3%}
footer{clear:both; font-size:80%; padding:0; font-size: 1em; color: #434950; text-align: left; }
footer ul{margin:0; padding:0;}
footer #columnsdemo {width:100%;}
footer .grid_12 {margin:0; padding:15px; text-align:left}
footer .grid_12 div {text-align:center}
footer .grid_6 {font-size:0.8em}
footer #footernav a {text-decoration: none; color: #434950;}
footer #footernav a.green  {color: #7ba22f; position: relative; top: -11px;}
footer .grid_12 p {font-size:0.9em}