/* HTML5 ✰ Boilerplate
 * ==|== normalize ==========================================================
 */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 100%; line-height: 1.231; background: #c7d4dd; }
body, button, input, select, textarea { font-family: Helvetica, Arial, sans-serif; color: #222; }

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

a { color: #00e; border:0 }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline:thin-dotted; }
a:hover, a:active { outline:none; }


abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; 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; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 1em 0; padding: 0 0 0 20px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure {margin:0;}

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
table button, table input { *overflow: auto; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
h1,h2,h3,h4,h5,h6 {
margin:0;
}


/* ==|== primary styles =====================================================
   Author: 
   ========================================================================== */

/* ==|== non-semantic helper classes ======================================== */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }



/* ==|== MEMORY FADES site styling ====================================================== */

/* //////// ACCESSIBILITY ACCESSIBILITY ACCESSIBILITY ////////// */
#skip 
{ 
position:absolute; 
left:0px; 
top:-500px; 
width:1px; 
height:1px; 
overflow:hidden;
border:0;
}


/* //////// LAYOUT LAYOUT LAYOUT ////////// */

body {background: #e6edf0; background-image:url('../img/body_bgTop_mobile.gif'); background-repeat:repeat-x;
}
#wrapper {
width:100%; margin: 0 auto; padding:0; display:table;
}
nav {
margin: 0 auto;
}
header {
margin: 0; height:auto; height:356px; width:100%;
}
#main {
background-color: none; /*background-color: #e2eaee;*/ padding:0; margin:0; border:none; float:none; clear:both; position:relative;
}
.main-content {
padding:0 3%; margin:0; float:none; position:relative;
}

#main div.portfolio h1 {margin-bottom:20px; display:inline-block;}
aside#sidebar {padding:0 3% 2px; margin:30px 0 0 0; clear:both; float:none;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#99afbe+0,eff8f9+14,eff8f9+17,99afbe+69 */
background: #99afbe; /* Old browsers */
background: -moz-linear-gradient(top,  #99afbe 0%, #eff8f9 14%, #eff8f9 17%, #99afbe 69%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #99afbe 0%,#eff8f9 14%,#eff8f9 17%,#99afbe 69%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #99afbe 0%,#eff8f9 14%,#eff8f9 17%,#99afbe 69%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99afbe', endColorstr='#99afbe',GradientType=0 ); /* IE6-9 */


}

aside#sideNotes, aside.sideNotesPort {
padding:0 3%; border:none; margin:30px 0 0 0;
}
#sideText {padding:10px; margin:0;}
aside#linkPanel {
background-color: #c9d6df; font-size: 90%; padding:2%; margin:0; clear:both;
}
footer {
margin:0; clear:both; background: #38596f; min-height:40px; border-top:0pt solid #af4553;
}
small {
width: 100%; text-align:center; clear: both; margin:0; line-height: 30px;
}



/* /////////// CONTENT CONTENT CONTENT ////////// */


/* 1. H HEADINGS //////////////////////////////////////**/
h2,h3,h4,h5,h6 {
font-weight: bold; clear: both; color: #333; margin:0;
}
h5 {
font-weight: bold; clear: both; color: #af4553; margin:10px 0 -5px 0; font-size:100%;
}

/* 2. HYPERLINKS //////////////////////////////////////**/
a:link, a:visited {
color:#38596f; text-decoration: none; border-bottom:1px dotted;
}
a:hover, a:active, a:focus {
color: #af4553; text-decoration: none; border-bottom:1px dotted;
}
header a:link, header a:visited, header a:hover, header a:active {
border:0;
}


/** 3. HEADER //////////////////////////////////////**/
header {margin: 0; padding:0; text-align:center; width:100%; background-color: #22537c; height:356px;
background: url('../img/banner_visual_small.jpg') no-repeat center top; position:relative; top:0;
background-size: auto; position:relative;
}
header#portfolioBanner {margin: 0; padding:0; text-align:center; width:100%; background-color: #22537c; height:356px;
background: url('../img/banner_portfolio_small.jpg') no-repeat center top; position:relative; top:0;
background-size: auto;
}
.menuButton a:link, .menuButton a:visited {
   color: #c6dcec;
   text-decoration: none;
   line-height:24px;
   margin-top:6px;
    border:0;
   }
.menuButton a:hover,.menuButton a:active, .menuButton a:focus {
   color: #fff;
   text-decoration: none;
   border:0;
   }
header img  {
margin-top:17px; width:260px; z-index:100;
}
header img.logoAnim {
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
			animation-delay: .5s;
			transition: transform 1s ease-in-out;
         }   
         @-webkit-keyframes fadeInDown {
            0% {opacity: 0; -webkit-transform: translateY(-50px);
            }
            100% {opacity: 1; -webkit-transform: translateY(0);
            }
         }  
         @keyframes fadeInDown {
            0% {opacity: 0; transform: translateY(-50px);
            }
            100% {opacity: 1; transform: translateY(0);
            }
         }
         .fadeInDown {-webkit-animation-name: fadeInDown; animation-name: fadeInDown;
         }
		 
header#portfolioBanner h1 {line-height: 2em; width:100%; margin:0 auto; text-align:center; color:#023056; font-size:1.3em; position:absolute; bottom: 140px; letter-spacing:0.6em; display:block; border:0pt solid green;
animation-duration: 5s;
animation-name: fadeAndScale;
animation-timing-function: cubic-bezier(.71,.55,.62,1.57);
}
header#portfolioBanner h1 span {padding-bottom:4px; font-size: 1.3em; font-weight:500;}
@keyframes fadeAndScale {
    from {
        opacity: 0;
        transform: scale(.9, .9);
    }
    to {
        opacity: 1;
        transform: scale(1, 1);
    }
}

header a  {
border:none;
}
header section#strapline {
width:100%; text-align:center; position:absolute; bottom:0; left:50%; margin-left:-50%; padding-bottom:5px;
}
section#strapline h2 {
margin:0 auto; padding:0; font-size: 115%; color:#fff4c7; text-align:center; width:100%;
}
section#strapline h2 span {
font-size:inherit;
}
header section#strapline h2 ul {
list-style-type: none; margin-left:-20px; display:inline;
}
#strapline h2 ul li {
margin:0; padding:0; display:inline;}


/** 4. NAV LIST //////////////////////////////////////**/
aside#mainNav {
padding:0; margin:20px 3%; width:94%; text-align:center; border:0;
}
aside#mainNav nav.menu {
font-size: 1.1em; font-weight:500; height:auto; letter-spacing:0.05em; padding:0; margin:0; background:none;
}
aside#mainNav nav.menu ul {
padding:0; list-style:none; margin:0; 
}
aside#mainNav nav.menu li {
padding-top: 16px; text-align:center;
line-height:1em; margin: 0; border-bottom:1pt solid #e2eaee;
background-color: #233a4a;
background: -webkit-gradient(linear, left top, left bottom, from(#38596f), to(#233a4a));
background: -moz-linear-gradient(top, #38596f 60%, #233a4a 100%);
background: -o-linear-gradient(top, #38596f 60%, #233a4a 100%);
	/* for IE 8*/
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#38596f', endColorStr='#233a4a');
/* for IE 5.5-7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#38596f', endColorStr='#233a4a');"
	padding:8px 0; height:30px;
	}
aside#mainNav nav.menu ul li.topLink {
-webkit-border-radius: 10px 10px 0px 0px; 
border-radius: 10px 10px 0px 0px;
}
aside#mainNav nav.menu ul li.botLink {
-webkit-border-radius: 0px 0px 10px 10px; 
border-radius: 0px 0px 10px 10px;
}

aside#mainNav nav.menu a:link, aside#mainNav .menu a:visited
{color:#fff4c7;/*color:#eab705*/ text-decoration: none; padding: 0; background: none /* url('../img/nav_icon2.gif') no-repeat 8px 4px;*/ width:100%;}

aside#mainNav nav.menu a:hover
{color:#eab705; text-decoration: none; background: url('../img/nav_upArrow1.png') no-repeat 48% 23px; padding-bottom: 15px; border:0;}

aside#mainNav nav.menu a:focus, aside#mainNav .menu a:active
{color:#fff4c7; text-decoration: none; width:100%; border:0; background: none /* url('../img/nav_icon2.gif') no-repeat 8px 4px;*/}
aside#mainNav .menu a
{padding-bottom: 15px; border:0;}
nav.menu li span {
font-style:italic; font-weight:normal;
}
aside#mainNav nav.menu a.thisPage
{background:  url('../img/nav_upArrow2.png') no-repeat 48% 40px; padding-top: 16px; padding-bottom: 15px;}



/** 5. MAIN CONTENT //////////////////////////////////////**/

.main-content h1 {
color:#af4553; margin:15px 0 0; font-size:200%; font-style:normal; letter-spacing:.04em; font-family:SteelfishRegular, Helvetica, Arial, sans-serif; padding:0;}
@font-face {
    font-family: 'SteelfishRegular';
    src: url('../fonts/SteelfishRgRegular/steelfish_rg-webfont.eot');
    src: url('../fonts/SteelfishRgRegular/steelfish_rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SteelfishRgRegular/steelfish_rg-webfont.woff') format('woff'),
         url('../fonts/SteelfishRgRegular/steelfish_rg-webfont.ttf') format('truetype'),
         url('../fonts/SteelfishRgRegular/steelfish_rg-webfont.svg#SteelfishBold') format('svg');
    font-weight: bold;
    font-style: normal;}
.main-content h2, #sidebar h2, #sideText h2 {
font-size: 180%; padding:0; margin:0 0 15px 0; letter-spacing:.04em; color:#023056; font-family:SteelfishRegular, Helvetica, Arial, sans-serif;}
.main-content p {font-size:95%; line-height:1.6em; padding:0;}
.main-content ul li {padding-left: 20px; line-height:1.4em; margin-bottom:4px;}
.main-content h4 {margin-top:10px; margin-bottom:-10px; display:inline-block;}
.main-content #rg-gallery img {border: none; -webkit-box-shadow: 0px 0px 0px #777; -moz-box-shadow: 0px 0px 0px #777;}
.alignleft, img.alignleft {display: inline; float: left; margin:0 0 10px 0;}
.alignright, img.alignright {display: inline; float: right; margin-left: 10px;}
.aligncenter, img.aligncenter {clear: both; display: block; margin-left: auto; margin-right: auto;}
.textShadow {text-shadow: 1px 1px 3px #262626; filter:progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#305052');}
#steveholmes, #aboutPhoto {width:106px; height:auto; margin:20px 14px 4px 0; border:0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.5);
box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.5);
}
#aboutPhoto {width:68px; margin:2px 14px 4px 0;}


.latestWork img #introPic {width:26%; margin:2% 3% 0 3%;border:3pt solid #af4553;}
hr.dotted-rule {border-bottom:2pt dotted #8aa3b5; height:20px; width:100%; margin-top:10px; border-style:none none dotted;}



/* QUOTE PANELS */
#quoteContainer {width:100%; margin:0 0 50px; padding-top:20px; border-top:2pt dotted #8aa3b5;}

.qTri-1 {height:30px; width:100%; background-image:url('../img/speech-left.png'); background-repeat:no-repeat; background-position:bottom center; position:absolute; bottom:-30px;}
.qTri-2 {height:30px; width:100%; background-image:url('../img/speech-right.png'); background-repeat:no-repeat; background-position:bottom center; position:absolute; bottom:-30px;}
#testimonial article.quote-left, #testimonial article.quote-right {position:relative;
    -webkit-border-radius: 20px;  
    -moz-border-radius: 20px;  
    border-radius: 20px;
	padding:0 0 10px 0;
	}
#testimonial article.quote-left {border:6px solid #af4553;}
#testimonial article.quote-right {border:6px solid #336dab;}
#testimonial article#q1, #testimonial article#q2 {margin-bottom: 30px;}
#q1 {background: url(../img/head-male.png) no-repeat center bottom #e9f2f5;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7f6ef+0,ffffff+51,f7f6ef+100 */
background: #f7f6ef; /* Old browsers */
background:url(../img/head-male.png) no-repeat center bottom, -moz-linear-gradient(top,  #f7f6ef 0%, #ffffff 51%, #f7f6ef 100%); /* FF3.6-15 */
background:url(../img/head-male.png) no-repeat center bottom, -webkit-linear-gradient(top,  #f7f6ef 0%,#ffffff 51%,#f7f6ef 100%); /* Chrome10-25,Safari5.1-6 */
background:url(../img/head-male.png) no-repeat center bottom, linear-gradient(to bottom,  #f7f6ef 0%,#ffffff 51%,#f7f6ef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f6ef', endColorstr='#f7f6ef',GradientType=0 ); /* IE6-9 */
background-size: contain;
}


#q2 {background: url('../img/head-female.png') no-repeat center 4px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7f6ef+0,ffffff+51,f7f6ef+100 */
background: #f7f6ef; /* Old browsers */
background:url(../img/head-female.png) no-repeat center bottom, -moz-linear-gradient(top,  #f7f6ef 0%, #ffffff 51%, #f7f6ef 100%); /* FF3.6-15 */
background:url(../img/head-female.png) no-repeat center bottom, -webkit-linear-gradient(top,  #f7f6ef 0%,#ffffff 51%,#f7f6ef 100%); /* Chrome10-25,Safari5.1-6 */
background:url(../img/head-female.png) no-repeat center bottom, linear-gradient(to bottom,  #f7f6ef 0%,#ffffff 51%,#f7f6ef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f6ef', endColorstr='#f7f6ef',GradientType=0 ); /* IE6-9 */
background-size: contain;
}

#testimonial article.quote-left p, #testimonial article.quote-right p {font-family: 'Merriweather', 'Palatino Linotype', 'Book Antiqua', Palatino, serif; padding:19px; letter-spacing:.01em; color:#236d86; color:#000001; font-size: 110%; line-height:1.5em; font-style:italic; margin:0 0 30px 0;
}
cite
{color:#236d86; font-size:75%; float:right; margin:10px 0 10px 0; font-style:normal; line-height:1.1em; text-align:right; font-family: 'Helvetic', 'Arial', serif;}
/* end of QUOTE PANELS */


/* QUOTE ACCORDIAN */


/* end of QUOTE ACCORDIAN */



.latestWork, .designFact {margin:0; padding:3%;}
.latestWork {margin:0; padding:0 2%;}


.designInfo {margin:20px 4% 30px 4%; padding:2%; background-color:#fff; border: 2pt solid #236d86;
    -webkit-border-radius: 10px;  
    -moz-border-radius: 10px;  
    border-radius: 10px;
	}
.designInfo:after {content:''; display:block; clear:both;}

.designFeature p, .designFact p {margin:0; padding:0;}
.designFeature h2, .designFact h2 {text-indent: 36px; font-size: 180%; letter-spacing:.04em;}
.designFeature h2, .designFact h2 {background: url('../img/exclaimation_mark.png') no-repeat 0px 4px;}
.designFeature {border-bottom:2pt dotted #8aa3b5; margin:0; padding:0 4px 8px 0; width:100%;}

.designFact {margin:0; padding:8px 0 0 0;}
.enquiryThanks {font:inherit; font-size:110%; text-align:center; margin:5%;}
#biog h2, #sideText h2 {border-bottom:dotted 2pt #bfad3c; line-height:1.5em; padding:0 0 3px 0;}
#biog {font-size:90%; border: 1pt solid #069; border:2pt solid #236d86; border:2pt solid #af4553; padding:12px 3% 0 3%; margin:20px 0 10px 0; background-color:#fff;
    -webkit-border-radius: 10px;  
    -moz-border-radius: 10px;  
    border-radius: 10px;
	opacity:1;
	box-shadow: 0 2px 5px rgba(227,234,237, 1),
				inset 0 0 120px rgba(227,234,237, 1);
	-webkit-box-shadow: 0 2px 5px rgba(227,234,237, 1),
				inset 0 0 120px rgba(227,234,237, 1);
}
#biog p.biogPara {line-height:1.4em;}


/* WHATS NEW */
section.whatsNew {
margin:40px 0 30px 0; padding:0 0 5px 0; background-color:#eff4f6; border:3px solid #af4553; clear:both;
    -webkit-border-radius: 8px;  
    -moz-border-radius: 8px;
    border-radius: 8px;  
}
.whatsNew {background-image:url('../img/white-star.png'); background-repeat:repeat-x; background-position:top; padding:0; overflow:hidden;}
.whatsNew h2.whatsNewHead {margin-bottom:20px; line-height:1.2em; font-size:180%; width:100%;
box-shadow:0 5px 10px 0 rgba(0,0,0,0.3); padding:6px 0 6px 11px;
}
.whatsNew article#caseStudy {margin:0; padding:0; border: 0pt solid #236d86; background-color: transparent;
    -webkit-border-radius: 5px;  
    -moz-border-radius: 5px;  
    border-radius: 5px;}
.whatsNew article#caseStudy {font-size:90%; padding:2% 3%;}
.whatsNew article#caseStudy p {margin:8px 0 4px 0; padding:0; line-height:1.4em;}
.whatsNew article#caseStudy img {margin:6px 3px 6px 0;
-webkit-border-radius: 2px;  
    -moz-border-radius: 2px;  
    border-radius: 2px;
	}
.whatsNew article#caseStudy figure {margin:0 0 30px 0; width:0 auto;}
.whatsNew article#caseStudy figure img {width:100%;}
.whatsNew article#caseStudy figcaption {text-align:center; font-size:80%; bottom-bottom:-5px; padding:0; margin:0;}
.whatsNew article#caseStudy figcaption img {width:auto;}
.whatsNew article#caseStudy h3 {margin:20px 0 0 0; font-size:140%; color:#af4553; text-align:center;}
.whatsNew article#caseStudy h4 {font-size:120%; margin:15px 0 0 0; color:#236d86;}
.whatsNew article#caseStudy figure {margin:0 0 15px 0;}
/* .whatsNew figure img.imageShadow {-webkit-box-shadow: rgba(0,0,0,.2) 0 2px 8px;
   -moz-box-shadow: rgba(0,0,0,.4) 0 2px 8px;
   box-shadow: rgba(0,0,0,.4) 0 2px 8px;
   } */
   
section.whatsNew .enLarge { transition: all .4s ease-in-out; }
section.whatsNew .enLarge a { border-bottom:0px dotted; }
section.whatsNew .enLarge:hover, section.whatsNew .enLarge:focus { transform: scale(1.05); }


/* //////////////////////////////// */
/* NEW as SHD... dropdown accordian */
/* //////////////////////////////// */
.read-more {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #000;
  overflow: hidden;
  border:0px solid green;
  padding:0;
}
.read-more .tab-content h4 {
	padding:0;
}
.read-more input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.read-more label {
  position: relative;
  display: block;
  padding:5px 0 5px 44px;
  background:#d8e2e6;
  font-weight: bold;
  line-height: 1.9em;
  cursor: pointer;
  margin:0;
  border-top-left-radius:1.5em;
  border-bottom-left-radius:1.5em;
  border-bottom-right-radius:.6em;
}
.read-more .tab-content {
  max-height: 0;
  overflow: hidden;
  background: transparent;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}
.read-more .tab-content p {
  margin: 1.1em; padding:0 10px; border:5px solid transparent; display:inline-block;
}
/* :checked */
input:checked ~ .tab-content {
  max-height: 20em;
}

/* Icon */
.read-more label::after {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
.read-more input[type=checkbox] + label::after {
  content: "+";
  background:#af4553; border-radius:100%;
  font-size:18pt; line-height:1.5em; color:#fff;
  font-family:arial, 'sans-serif'; font-weight:normal; padding-left:0;
}

/* input[type=checkbox]:checked + label::after {
  content: "x";
  font-family:arial, 'sans-serif'; font-weight:normal;
  line-height:1.4em;
} */
  
.read-more input[type=checkbox]:checked + label::after {
  transform: rotate(225deg);
  font-size:18pt; line-height:1.54em; color:#fff;

}

/* ///////////////////////////////////////// */
/* TESTIMONIALS re SHD... dropdown accordian */
/* ///////////////////////////////////////// */
/* dropdown accordian */
.quote-accordian-1 {
  position: relative;
  margin-bottom: 30px;
  width: auto;
  color: #000;
  overflow: hidden;
  border:0px solid green;
  padding:0;
  background:#ede2c8;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,aacbd7+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #aacbd7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#aacbd7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#aacbd7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#aacbd7',GradientType=0 ); /* IE6-9 */
  border-radius:8px;
  padding:12px;
}
.quote-accordian-1 .tab-content h4 {
	padding:0;
}
.quote-accordian-1 input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.quote-accordian-1 label {
  position: relative;
  display: block;
  padding:5px 0 5px 76px;
  font-weight: bold;
  line-height: 1.4em;
  min-height:20px;
  cursor: pointer;
  margin:0;
    background-image: url(../img/shd-quote-marks.png);
    background-repeat: no-repeat;
    background-position: top left 
}
.quote-accordian-1 label {margin:0;
  -webkit-transition: max-height .55s;
  -o-transition: max-height .55s;
  transition: max-height .55s;
  }
.quote-accordian-1 label h2 {margin:6px 0 0 0; line-height:1.1em;}


.quote-accordian-1 .tab-content {
  max-height: 0;
  overflow: hidden;
  padding:0;
  background-color:#eff4f6; padding:8px 0 0; border-radius:4px; display:block;
}
.quote-accordian-1 .tab-content div p {
  margin: 0; font-size:11pt;
}
.quote-accordian-1 .tab-content div cite {display:block; border:0 solid green; margin-right:8px; font-size:9pt;}

.quote-accordian-1 .tab-content div.quote-1 {border-top:8px solid transparent; padding-top:10px;}
.quote-accordian-1 .tab-content div.quote-2 {margin-top:8px;}
	
.quote-accordian-1 .tab-content div {
margin-top:-8px; display:block; max-height:230em;
padding:0 12px 50px 12px;}
/* :unchecked */
.quote-accordian-1 input:not(checked) ~ .tab-content {
  max-height:100em; display:none;
}
/* :checked */
.quote-accordian-1 input:checked ~ .tab-content {
  max-height:100em; display:block;
    -webkit-transition: all .8s ease-in-out;
  -o-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;
}


/* Icon */
.quote-accordian-1 label::after {
  position: absolute;
  left: 26px;
  top: 7px;
  display: block;
  width: 40px;
  height: 40px;
  text-align: center;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  border:0 solid red;
}
.quote-accordian-1 input[type=checkbox] + label::after {
  content: "+";
  font-size:18pt; line-height:40px; color:#fff;
  font-family:arial, 'sans-serif'; font-weight:normal; padding-left:0;
}

.quote-accordian-1 input[type=checkbox]:checked + label::after {
  transform: rotate(225deg);
  font-size:18pt; line-height:1.54em; color:#fff;
  position: absolute;
  left: 28px;
  top: 5px;
}


/* 6. ASIDE - SIDEBAR ////////////////////////////////////// */
#designservice h3 {
font-size: 250%; font-style:normal; font-family:SteelfishRegular, Helvetica, Arial, sans-serif; color:#236d86; padding:6px 0; margin:0; letter-spacing:.07em; border-bottom:2pt dotted #af4553;
}
#designservice p {
margin:0 0 15px 0; padding:0; font-size:90%;
}
aside#sidebar h3, aside#sidebar p {
clear:left; margin:0 0 10px 0;	
}
aside h2 span {color:#cccccc;}

section# {
clear:both;	
}
aside#sidebar #webPanel {
margin-top:10px;
}
aside#sidebar #webPanel p a:link, aside#sidebar #webPanel p a:visited {
color:#236d86;
}
#webPanel p a:hover, #webPanel p a:active, #webPanel p a:focus {
color: #af4553;
}
aside h4 {
font-size: 1.1em; margin:0; padding:0;
}
/* //// only H4 of sidebar is addressed below //// */
aside#sidebar h4 {
background-color: #dbb718;
background: -webkit-gradient(linear, left top, left bottom, from(#e8d777), to(#b1737b));
background: -moz-linear-gradient(top, #e8d777 0%, #b1737b 100%);
background: -o-linear-gradient(top, #e8d777 0%, #b1737b 100%);
/* for IE 8*/
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#e8d777', endColorStr='#b1737b');
/* for IE 5.5-7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#e8d777', endColorStr='#b1737b');"
border:0pt solid orange;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 10px 10px 0px 0px; 
border-radius: 10px 10px 10px 0px 0px;

margin-bottom:12px; padding:7px 0 7px 10px;
color:#233a4a;
}

aside#sidebar #freeQuote {
margin:0; padding:0; width:100%;
}
#freeQuote h5 {
background-color:#233a4a; padding:5px 5px 10px 5px; color:#FFF; font-size:82%; line-height:1.4em; margin:0 0 12px 0; background-image:url('../img/free_bg.gif'); background-repeat:no-repeat; background-position: bottom center; border-left:1pt solid #5b90a1; border-right:1pt solid #5b90a1; border-bottom:1pt solid #5b90a1; text-align:center;
border-bottom-right-radius:7px;
border-bottom-left-radius:7px;
}
aside#sidebar h5 span#free {
font-size:200%; font-style:normal; letter-spacing:.07em; color:#FFF; font-weight:bold; padding:0; line-height:1em; float:left; margin:0 0 5px 0; text-align:center; width:100%; font-family:SteelfishRegular, Arial, Helvetica, sans-serif;
}

/* PHONE BUTTON */

.phoneButton {
   border:2pt solid #af4553; /* #99afbe; */
   background: #ffffff;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#edf5f7+0,ffffff+40,ffffff+60,edf5f7+100 */
background: #edf5f7; /* Old browsers */
background: -moz-linear-gradient(top, #edf5f7 0%, #ffffff 40%, #ffffff 60%, #edf5f7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #edf5f7 0%,#ffffff 40%,#ffffff 60%,#edf5f7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #edf5f7 0%,#ffffff 40%,#ffffff 60%,#edf5f7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf5f7', endColorstr='#edf5f7',GradientType=0 ); /* IE6-9 */

padding: 9px 4px 8px 4px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   /*-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(6,2,6,1) 0 1px 0;
   box-shadow: rgba(0,5,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,1) 0 1px 0;*/
   color: #233a4a;
   font-size: 105%;
   font-family: Helvetica, Arial, Sans-Serif;
   vertical-align: middle;
   margin: 30px 5% 20px;
   line-height:2.4em;
   -webkit-box-shadow: rgba(0,0,0,.2) 0 2px 2px;
   -moz-box-shadow: rgba(0,0,0,.2) 0 2px 2px;
   box-shadow: rgba(0,0,0,.2) 0 2px 2px;
   }
.phoneButton h3 {text-align:center; line-height:2em; font-family:SteelfishRegular, Helvetica, Arial, sans-serif; font-size:30px;}
.phoneButton h3 a {color:#233a4a; border-bottom:2pt dotted #af4553;}
.phoneButton h3 a:link, .mobileOnly h3 a:visited, .mobileOnly h3 a:hover, .mobileOnly h3 a:active, .mobileOnly h3 a:focus {color:#233a4a;}
/* end of PHONE BUTTON */


#printPanel, #webPanel, #tutorPanel {
	border:2pt solid #236d86; padding:0; margin: 0 0 20px 0; background-color:#FFF;
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4),
				inset 0 0 45px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4),
				inset 0 0 45px rgba(0, 0, 0, 0.4);
	border-radius: 10px;
	
	/* for IE 8*/
-ms-filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#305052');"
/* for IE 5.5-7 */
filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#305052');"
}

section#printPanel p, section#webPanel p, section#tutorPanel p {
padding:0 4%; font-size:85%; clear:both; line-height:1.2em;
}
#printPanel p span, #webPanel p span {
color: #af4553;	font-size: .8em;}

aside.sideNotesPort {margin:0; padding:0; border:0pt solid green; display:block;}
aside#sideNotes p, aside.sideNotesPort p {
line-height:135%;
font-size:85%; padding:0;
}
aside.sideNotesPort p {margin:10px 0;}
aside.sideNotesPort ul {margin:0;}
aside#sideNotes li {font-size:85%; margin-bottom:10px;}
aside.sideNotesPort li {font-size:80%; margin-bottom:0;}
ul.bulletList {list-style: url('../img/gold_bullet.gif'); margin-top:5px; line-height:1.2em;}
ul.bulletList li {margin-top:8px;}
#sideText h3 {color:#38596f; padding:0;}
#sideText h3 span {color:#af4553; padding:0;}
aside.sideNotesPort h3 {margin:0 8px 0 0; width:auto;}
#sideText .portfolio-links {padding:8px 0 0 8px; margin:30px 0 0 0; border:1pt solid #d7e0e5; width:auto; border-radius: 5px; background-color: #ffffff;}
#sideText .portfolio-links h3 {background-color: #faf6e0; width:auto; border:2pt solid #faf6e0;}
#sideText h3.caseStudy {font-family:SteelfishRegular, Helvetica, Arial, sans-serif; font-size:160%; letter-spacing:.04em; color:#af4553; padding-left:3px;}
.portfolio-links ul {border-bottom:0pt dashed #118e8a; padding-bottom:8px;}
.portfolio-links ul.noBorder {border-bottom:none; margin-bottom:0;}
h5.listSubEntry {margin:14px 0 0 0; padding:0; display:inline-block; color:#af4553; line-height:.5em; border:0pt solid green;}


#sideText p {margin:5px 0;}

#sidebar .phoneButton a:hover, #sidebar .phoneButton a:hover
{color:#eab705; text-decoration: none; border-bottom:1px dotted;}

#sidebar .phoneButton a:focus, .phoneButton a:focus, #sidebar .phoneButton a:active, .phoneButton a:active, #sidebar.phoneButton a, #sidebar.phoneButton a
{color:#ffffff; text-decoration: none; border-bottom:1px dotted;
}
.detailsButton {
border:2pt solid #af4553;
   background: #e6f3ef;
   background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#d5eaf0));
   background: -webkit-linear-gradient(top, #fff, #d5eaf0);
   background: -moz-linear-gradient(top, #fff, #d5eaf0);
   background: -ms-linear-gradient(top, #fff, #d5eaf0);
   background: -o-linear-gradient(top, #fff, #d5eaf0);
   
   padding: 4px 6px 4px 0;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,.4) 0 1px 0;
   /*text-shadow: rgba(0,0,0,.4) 0 1px 0;*/
   color: #222;
   font-family: Helvetica, Arial;
   text-align:left;
   font-weight:bold;
   margin:0 auto;
   }
.detailsButton:hover {
   background: #113a26;
   background: #cdded9;
   background: -webkit-gradient(linear, left top, left bottom, from(#cdded9), to(#fff));
   background: -webkit-linear-gradient(top, #d5eaf0, #fff);
   background: -moz-linear-gradient(top, #d5eaf0, #fff);
   background: -ms-linear-gradient(top, #d5eaf0, #fff);
   background: -o-linear-gradient(top, #d5eaf0, #fff);
   
   }
.detailsButton {
   letter-spacing:0.01em; font-size:130%;
   }
.detailsButton a {
   letter-spacing:0.01em; font-size:100%;
   }
.detailsButton p {
   margin:0 0 0 56px; padding:3px 0;
   }
.detailsButton img {
   float:left; margin:7px 0 0 10px;
   }
   
/* 8. ASIDE - LOWER //////////////////////////////////////**/
.tabbody {background:transparent; border-top:2pt solid #233b4b; padding:0 2%; margin:0 auto;}
.tabs {margin:0; padding:0;}

/* 8. ASIDE - LOWER //////////////////////////////////////**/
div#pageTop {
line-height:20px; text-align:center; font-size:90%; border:0;
}
#pageTop a:link {
background-color:#FFFFFF; line-height:20px; text-align:center; font-size:90%; padding: 4px 8px;	border:0;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 10px 10px 0px 0px; 
border-radius: 10px 10px 0px 0px;

}
aside#linkPanel {
text-align:center; background-color: #e2eaee;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#e2eaee');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#e2eaee')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #ffffff, #e2eaee);
background-image: -ms-linear-gradient(top, #ffffff, #e2eaee);
background-image: -o-linear-gradient(top, #ffffff, #e2eaee);
background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#e2eaee));
background-image: -webkit-linear-gradient(top, #ffffff, #e2eaee);
background-image: linear-gradient(top, #ffffff, #e2eaee);
/*--IE9 DOES NOT SUPPORT GRADIENT BACKGROUNDS--*/
}

#linkPanel section {
color: #FFF; font-size: 90%; padding: 4px 0 4px 0; overflow: hidden; clear:both; margin:0 auto; display:block;
}
aside#linkPanel section nav {
margin: 0 auto;
}
nav#aside-navLeft, nav#aside-navMid, nav#aside-navRight {
width:90%; padding: 10px 0 4px 0;
}
/*#aside-navRight {
width:200px; border:1pt solid yellow; min-height: 50px;
}
nav#aside-navMid {
width:300px; border:0pt solid yellow; padding-bottom: 10px; clear:both;
}*/
aside nav h4 {
color: #af4553; font-size: 1.1em; line-height: 1em; margin:0 0 5px 0;
}
#linkPanel ul {
margin:6px 0; padding:0;
}
aside#sidebar a:link, aside#sidebar a:visited
{color:#38596f; text-decoration: none; border-bottom:1px dotted; }

aside#sidebar a:hover
{color:#af4553; text-decoration: none; border-bottom:1px dotted;}

aside#sidebar a:focus, aside#sidebar a:active, aside#sidebar a
{color:#af4553; text-decoration: none; border-bottom:1px dotted;
}

/* 9. FOOTER //////////////////////////////////////**/
.footer-container {background-color:#e2eaee;}
footer {
margin:0; text-align:center;
}
footer small {
font-size:.8em; color: #ffffff;
}
footer small a:link, footer small a:visited {
color:#ffffff; text-decoration: none; border-bottom:1px dotted;
}
footer small a:hover, footer small a:focus {
color: #eab705; text-decoration: none; border-bottom:1px dotted;
}
footer small a:active {
color: #ffffff; text-decoration: none; border-bottom:1px dotted;
}

/*  ///////////////////////////////////  */





/* ==|== print styles ======================================================= */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
  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: ""; } 
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  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; }
}