body {
margin : 0;
padding : 0;
padding-top : 20px;
font-size : 110%;
font-family: 'roboto', sans-serif;
text-align : left;
line-height : 1.67em;
color : #222;
}

/**WRAP**/
.wrapper {
width : 90%;
max-width : 1020px;
padding : 0;
margin : 0;
margin-left : auto;
margin-right : auto;
}
.smallwrap  {
width : 55%;
margin-left : auto;
margin-right : auto;
}

/**SKIP**/
#skip A{
position: absolute;
top:-1000px;
left:10px;
width : 6em;
padding-top : 1em;
padding-bottom : 1.5em;
text-align : center;
background-color: #530c1c;
color : #fff;
text-decoration : none;
-webkit-transition: top 2s ease-out, background 1s linear;
transition: top 2s ease-out, background 1s linear;
z-index: 100;
}
#skip A:focus {
position:absolute;
left: 10px;
top:10px;
outline:0;	
-webkit-transition: top .1s ease-in, background .5s linear;
transition: top .1s ease-in, background .5s linear;
}


/**SEARCH**/
#searchcontainer {
width : 20%;
clear : both;
float : right;
margin: 0px;
margin-top : 10px;
padding : 0;
}
#search {
float : right;
width : 43%;
min-width: 20em;
height : 2em;
background-color : #fff;
}
#search label {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}

input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #530c1c url(../images/search.svg) no-repeat 8px center;
padding: 6px 10px;
width: 100px;

-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;

-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}

#search input[type=search] {
width: 15px;
height : 22px;
color: transparent;
cursor: pointer;
border : none;
float: right;
}

#search input[type=search]:hover, #search input[type=search]:focus {
width: 95px;
padding-left: 38px;
color: #fff;
background-color: #530c1c;
cursor: auto;
-webkit-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
-moz-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);
}
#searchlabel {
position : absolute;
top : -1000px;
width : 1px;
height : 1px;
overflow : hidden;
}
#search_inclusive {
border : solid 1px #530c1c;
padding : 0;
margin : 0;
}
#submit {
opacity: 0;
background-color : #530c1c;
color : #fff;
border : none;
font-size : .9em;
font-family: 'Roboto Slab', serif;
margin-right : 1em;
float : right
}
#submit:focus {
opacity: 1;}

/**BANNER**/
#top {
width : 90%;
max-width: 1300px;
padding : 0;
margin : 0;
margin-left : auto;
margin-right : auto;
}
#banner {
width : 45%;
float : left;
font-size : 1.2em;
font-family: 'Roboto Slab', serif;
font-weight: 400;
background-color : transparent;
color : #27242B;
line-height : 1.5em;
min-height: 65px;
padding : 0;
padding-left: 100px;
margin-bottom: 50px;
background-image: url("../images/inclusive-media.png");
background-repeat: no-repeat;
background-position : left top;
}
#topright {
width : 40%;
float : right;
margin : 0;
margin-top : 8px;
padding : 0;
background-color : transparent;
font-family: 'Roboto Slab', serif;
color : #27242B;
text-align: right;
}
address {
font-style : normal;
}

/*NAVIGATION*/
#primary-menu {
clear : both;
text-transform: lowercase;
font-family: 'roboto slab', sans-serif;
padding-top : 30px;
padding-bottom : 0px;
width : 90%;
max-width: 1300px;
margin-left : auto;
margin-right : auto;
}
#primary-menu ul {
margin : 0;
padding : 0;
line-height: 1em;
background-color : #fff;
width : 100%;
min-height: 1em;
}
#primary-menu li {
list-style-type: none;
float : left;
margin : 0;
margin-right : 8px;
margin-bottom: 1.5em;
padding : 0;
}
#primary-menu A:link, #primary-menu A:visited {
padding : 1px;
padding-left: 1em;
padding-right: 1em;
display : block;
background-color : #fff;
color : #530c1c;
text-decoration : none;
border : solid 1px transparent;
}
#primary-menu li A:hover, #primary-menu li A:focus, #primary-menu li A:active {
color : #530c1c;
border : solid 1px #530c1c;
background-color : #fff;
-webkit-box-shadow: 1px 3px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 3px 10px 0px rgba(0,0,0,0.75);
box-shadow: 1px 3px 10px 0px rgba(0,0,0,0.75);
outline-color: #000;
}

/*NAVIGATION BUTTON*/
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
	text-align :right;
	padding-right : 5%
}


/**HERO IMAGE**/
#heroimage, #heroimageindex {
    background-size: 100% auto;
background-repeat: no-repeat;
background-position: top;
  width: 100%;
  padding-top : .5%;
  padding-bottom: 50%;
margin-left : auto;
margin-right : auto;
}


/**CONTENT**/
#content {
clear : both;
}

/**FOOTER**/
#copy {
clear : both;
padding-top : 90px;
padding-bottom : 40px;
background-color : #fff;
color : #530c1c;
font-family: 'Roboto Slab', serif;
font-size : 95%;
text-align: center;
}

/**CLASSES**/
.invisible, .menu-hidden-description-parent {
position : absolute;
top : -1000px;
width : 1px;
height : 1px;
overflow : hidden;
}
.paddingright30 {
padding-right : 30px;
}
.paddingtop50 {
padding-top : 50px;
}
.uhoh {
background-color : red;
color : white;
}
.floatright {
float : right;
}
.floatleft {
float : left;
}
.clearboth {
clear : both;
}

/**COLUMNS**/
.leftcol {
float:left; 
width :45%; 
margin-right : 10%;
margin-bottom : 30px;
}
.rightcol {
float:left; 
width :40%; 
margin-bottom : 30px;
}


/**HTML**/
fieldset {
float : left;
border : none;
padding : 0;
margin : 0;
}
form {
float : left;
width : 90%;
margin-left : 10%;
border : none;
}
h1 {
font-family: 'Roboto Slab', serif;
font-weight: 400;
font-size : 2em;
line-height: 1.5em;
background-color : transparent;
color : #000;
clear : left;
}

h1 span { 
  background-color: rgba(255, 255, 255, 0.8);
  color: #000;
  display: inline;
  padding-left: 1rem;
  padding-right: 0.6rem;
  
  /* Needs prefixing */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
#heroimageteam h1 {
padding-bottom : 2em;
}

h2 {
clear : both;
font-family: 'Roboto Slab', serif;
font-size : 1.7em;
font-weight : normal;
line-height : 1.2em;
margin-bottom : .75em;
/*color : #843f14;
color : #7e3b4b;
color : #534e4a;*/
color : #530c1c;

background-color : transparent;
}
h3 {
font-family: 'Roboto Slab', serif;
font-size : 1.5em;
font-weight : normal;
color : #7e3b4b;
}
A:link, A:visited {
background-color : transparent;
color : #530c1c;
text-decoration : underline;
}
A:hover, A:focus, A:active {
background-color : #530c1c;
color : #fff;
text-decoration : none;
outline-color: #000;
}
hr {
clear : both;
border : none;
height : 3px;
background-color : #2E201F;
width : 100%;
}
blockquote {
text-indent: -.4em;
width : 100%;
margin-left : 1em;
}
blockquote p {
margin-bottom : 0;
}
cite {
text-indent: 0;
margin-right : 1em;
width : 80%;
float : right;
text-align : right;
padding-bottom : 1em;
}
time {
font-family: 'Roboto Slab', serif;
font-size : 1em;
margin-right : 1em;
color : #76645b;
}
img {
max-width: 100%;
}


/********INDIVIDUAL PAGES *************/
#news {
clear : both;
margin-top: 50px;
margin-bottom: 20px;
border : solid 3px #2E201F;
border-left: none;
border-right: none;
}
#drawings img {
margin : 20px;
}
#clients ul {
margin : 0;
padding : 0;
}
#charles {
clear : both;
padding-top : 50px;
}
/*NAVIGATION BUTTON big*/
.menu-toggle,
.main-navigation.toggled ul {
	display: none;
}

/* SMALL 850PX*/
@media screen and (max-width: 750px) {
body {
font-size : 1.1em;
margin-top : 10px;
}

#site-navigation {
clear : both;
background-image: url("../images/water.jpg");
border-bottom: solid 1px #000;
}
/*NAVIGATION BUTTON small*/
.menu-toggle,
.main-navigation.toggled ul {
	display: inline;
}

#banner {
float : left;
margin: 0;
margin-bottom : 20px;
padding-left: 85px;
padding-bottom: 0px;
background-image: url("../images/inclusive-media.png");
background-repeat: no-repeat;
background-position : left;
font-size: .9em;
}
#heroimageindex {
padding-bottom: 0%;
padding-top: 75%;
}
/**HERO IMAGE**/
#heroimage {
  margin-top: -3px;
 }

#topright {
float : right;
margin-top : 0;
margin-bottom : 2em;
font-size: 1em;
line-height: 1.7em;
}
#nav {
margin-top: 0px;
padding-top: 0px;
}
.smallwrap  {
width : 90%;
}
#heroimage h1 {
font-size : 1.7em;
}
.leftcol, .rightcol {
margin-right: 0%;
width: 100%;
}


.menu-toggle {
width : 100%;
background-color: #fff;
color : #000;
font-size: 1.1em;
font-weight : bold;
font-family: 'Roboto Slab', serif;
text-transform: uppercase;
border : none;
border-top: solid 1px #444;
border-bottom: solid 1px #000;
}
.menu-toggle:hover, .menu-toggle:focus {
background-color: #464842;
color : #fff;
}
#primary-menu {
display: none;
}
#primary-menu.open {
display: block;
width : 84%;
padding-top : 1em;
padding-bottom: 1em;
margin-bottom: 0;
}

#primary-menu.open li {
float : none;
width : 9em;
}
#primary-menu.open li A:link, #primary-menu.open li A:visited{
border : solid 1px #666;
color : #000;
}
#primary-menu.open li A:hover, #primary-menu.open li A:focus{
border : solid 1px #000;
color : #fff;
background-color: #464842;
outline-color: #000;
}
}

@media screen and (max-width: 500px) {
#topright {
width : 100%;
}
#banner {
width : 70%;
margin-top : 0em;
padding-top : 1em;
}
#primary-menu.open li A:hover, #primary-menu.open li A:focus{
border : solid 1px #000;
color : #000;
background-color: #fff;
outline-color: #000;
}
}