body{ 
color:#9B9B9B;
font-family:"Lucida Grande", Tahoma, Geneva, sans-serif;
font-size:14px;
background:#FFFFFF;
line-height:1.8em;
margin:0;
}

h1{ 
font-size:2.5em;
line-height:1em;
color:#5C82C1;
font-weight:normal;
margin-top:25px;
}

#services-page h1, #portfolio-page h1{ 
margin-top:0;
}

h2 { 
font-size:1.5em;
color:#FFFFFF;
line-height:1.2em;
margin:0;
padding:10px 0;
}

#middle-strip h2 { 
font-size:1.8em;
line-height:1.8em;
padding:15px 0;
font-weight:normal;
}

h3{ 
font-size:2em;
font-weight:normal;
color:#5C82C1;
margin-top:10px;
margin-bottom:15px;
}

h4{ 
font-size:1.5em;
line-height:1.5em;
color:#F78D41;
margin-top:30px;
margin-bottom:15px;
}

#services-page h4{ 
margin-top:10px;
color:#9B9B9B;
}

h5{ 
font-size:1.7em;
color:#5C82C1;
font-weight:normal;
margin-top:5px;
margin-bottom:15px;
text-align:left;
}

h6{ 
font-size:1.7em;
color:#5C82C1;
font-weight:normal;
margin-top:15px;
margin-bottom:15px;
text-align:right;
}

h7{ 
font-size:2em;
color:#F78D41;
margin-top:15px;
}

h8{ 
font-size:2em;
color:#5C82C1;
margin-top:15px;
margin-bottom:15px;
}

h9{ 
font-size:2.5em;
color:#5C82C1;
margin-top:15px;
margin-bottom:15px;
line-height:2em;
}

h10{ 
font-size:1.2em;
color:#5C82C1;
margin:0;
display:block;
}

#extrah10{
margin-top:5px;	
}

h11{ 
font-size:1.2em;
color:#5C82C1;
display:block;
padding-bottom:10px;
}

.wrapper{ 
min-width:300px;
max-width:1000px;
margin:0 auto;
padding:0 2%;
}

header{
background:#5578b0;
}

header ul{
margin:0;
padding:0;
}

#left{
display:inline-block;
width:60%;
list-style-type:none;
margin:30px 0 0 0;
padding:0;
vertical-align:top;
}

#fb{
width:30px;	
}

#fb img{
width:100%;
height:auto;	
}

#left a{
opacity:0.6;	
transition:opacity 0.5s ease;	
}

#left a:hover{
opacity:1;
transition:opacity 0.5s ease;	
}

#logo{
display:inline-block;
width:38%;
list-style-type:none;
margin:0;
padding:0;
}

#logo img{
border:0;
width:100%;
height:auto;
}

/* Navigation */
nav{
margin:0;
padding:0;
background:#f88c41;
transition:background 0.5s ease;	
}

nav:after{
content:"";
display:table;
clear:both;
}

nav ul{
float:left;
padding:0;
margin:0;
list-style:none;
position:relative;
z-index:99;
}

nav ul li{
margin:0;
display:inline-block;
float:left;
background:#f88c41;
transition:background 0.5s ease;	
}

nav a:link, nav a:visited {
color: #ffffff;
font-weight: normal;
text-decoration: none;
}

hav a:hover, nav a:active {
color: #ffffff;
}

.active-page{
background:#fba64c;
transition:background 0.5s ease;	
}

nav a{
display:block;
padding:0 20px;
color:#ffffff;
font-size:1.3em;
line-height:40px;
text-decoration:none;
background:#f88c41;
transition:background 0.5s ease;	
}

nav ul li ul li:hover{ 
background:#fba64c; 
transition:background 0.5s ease;	
}

nav a:hover{ 
background:#fba64c; 
transition:background 0.5s ease;	
}

nav ul ul{
display:none;
position:absolute;
top:40px;
}

nav ul li:hover > ul{ 
display:inherit; 
}

nav ul ul li{
width:210px;
float:none;
display:list-item;
position:relative;
}

nav ul ul ul li{
position:relative;
top:-50px;
left:350px;
}

li > a:after{ 
content:''; 
}

.toggle, [id^=drop]{
display:none;
}

li > a:only-child:after{ 
content:''; 
}

a:link, a:visited {
color: #5C82C1;
font-weight: bold;
text-decoration: none;
}

a:hover, a:active {
color: #F78D41;
}

#regular{
margin:0;
padding:0;
list-style-type:none;
}

#regular li{
display:inline-block;
width:43%;
margin-right:5%;
vertical-align:top;
}

#regular li img{
margin:15px 0 0;
}

#middle-strip{
background:#5578b0;
margin:20px 0;
}

#red{
color:#C50306;	
}

#red:hover{
color:#5578b0;	
}

.back{
background:#5578b0;
margin:10px 0;
}

.back p{
color:#ffffff;
text-align:right;	
}

.back a{
font-weight:normal;	
}

.back p a:hover{
color:#fba64c;
}

.back-mid, .back-narrow{
display:none;
}

.icons{
padding:25px 0 5px;	
}

#graphic-samples{
margin:0;
padding:0;
list-style-type:none;
}

#graphic-samples li{
font-size:1.2em;
line-height:1.8em;
color:#5578b0;
margin-top:10px;
margin-bottom:10px;
display:inline-block;
width:28%;
margin-right:5%;
vertical-align:top;
}

#jacqui img{
width:100%;
Height:auto;	
}

aside{
width:35%;
display:inline-block;	
vertical-align:top;
padding-top:30px;
}

article{
width:55%;
display:inline-block;	
vertical-align:top;
margin-right:40px;	
}

article img{
width:100%;
height:auto;	
}

/* Contact Form */
#contact{
width:80%;
margin:0 auto;
text-align:left;
}

.labelC, input, textarea{
width:94%;
display:block;
font-size:1.3em;
}

input, textarea{
padding:10px;
font-family:"Lucida Grande", Tahoma, Geneva, sans-serif;
font-size:1.1em;
opacity:0.6;
}

textarea{
height:120px;
border:#ccc solid 1px;
}

#send{
width:100px;	
color:#fff;
background-color:#7497d1;
cursor:pointer;
border:none;
border-radius:7px;
-moz-border-radius:7px;
font-family:"Lucida Grande", Tahoma, Geneva, sans-serif;
text-transform:uppercase;
opacity:1;
margin-top:20px;
}

#send:hover{
background-color:#5579b4;	
}

.retouch{
width:100%;
height:auto;
margin-bottom:20px;
}

.retouch img{
width:100%;
height:auto;
}

.retouch img.rollover:hover{
cursor:pointer;	
}

#circle-icons-touch{
display:none;
}

#circle-icons, #circle-icons-touch{
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}

#circle-icons li, #circle-icons-touch li{
display:inline-block;
width:220px;
margin:10px;
vertical-align:top;
}


.ih-item {
  position: relative;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item,
.ih-item * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.ih-item a {
  color: #333;
}
.ih-item a:hover, .ih-item a:focus, .ih-item a:active {
  text-decoration: none;
}
.ih-item img {
  width: 100%;
  height: 100%;
}

.ih-item.circle {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
}
.ih-item.circle .img {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
}
.ih-item.circle .img:before {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item.circle .img img {
  border-radius: 50%;
}
.ih-item.circle .info {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.ih-item.circle.effect6 .img {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect6.colored .info {
  background: #5C82C1;
}
.ih-item.circle.effect6 .info {
  background: #5C82C1;
  opacity: 0;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item.circle.effect6 .info h3 {
  color: #fff;
  text-transform: uppercase;
  position: relative;
  letter-spacing: 2px;
  font-size: 22px;
  margin: 0 30px;
  padding: 55px 0 0 0;
  height: 110px;
  text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ih-item.circle.effect6 .info p {
  color: #fff;
  padding: 10px 5px;
  font-style: italic;
  margin: 0 30px;
  font-size: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.ih-item.circle.effect6.scale_up .info {
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5);
}
.ih-item.circle.effect6.scale_up a:hover .img {
  opacity: 0;
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
}
.ih-item.circle.effect6.scale_up a:hover .info {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

footer{
background:#f88c41;
text-align:center;
margin-top:40px;
}

footer p{
color:#ffffff;
padding:10px 0;	
}

/*************** Break Point Responsive Code ***************/

@media screen and (min-width:0) and (max-width:1000px){
#left{
margin:25px 0 0 0;
}

aside{
padding-top:25px;
}

}

@media screen and (min-width:0) and (max-width:920px){
#left{
margin:20px 0 0 0;
width:55%;
}

#logo{
width:43%;
}

aside{
padding-top:10px;
}

}

@media screen and (min-width:0) and (max-width:860px){
aside{
width:40%;
padding-top:0;
}

article{
width:50%;
}

#contact{
width:100%;
}

h11{
font-size:1.1em;
padding-bottom:5px;
}

}

@media screen and (min-width:0) and (max-width:800px){
#graphic-samples li{
font-size:1em;
line-height:1.8em;
width:25%;
margin-right:2%;
}

}

@media screen and (min-width:0) and (max-width:790px){
#left{
width:50%;
}

#logo{
width:48%;
}

aside{
width:100%;
display:block;	
padding-top:0;
}

article{
width:80%;
display:block;	
margin-right:0;	
}

}

@media screen and (min-width:0) and (max-width:768px){
#circle-icons-touch{
display:block;
}

#circle-icons{
display:none;
}

}

@media screen and (min-width:0) and (max-width:720px){
#left{
width:45%;
margin:22px 0 0 0;
}

h2 { 
font-size:1.3em;
line-height:1.2em;
}

#logo{
width:53%;
}

}

@media screen and (min-width:0) and (max-width:680px){
#graphic-samples li{
display:block;
width:100%;
}

}

@media screen and (min-width:0) and (max-width:660px){
#left{
width:45%;
margin:15px 0 0 0;
}

#logo{
width:53%;
}

#regular li{
display:block;
width:100%;
margin-right:0;
}

}

@media screen and (min-width:0) and (max-width:640px){
.back-mid{
display:block;
background:#5578b0;
margin:10px 0;
}

.back-mid p{
color:#ffffff;
text-align:right;	
}

.back-mid a{
font-weight:normal;	
}

.back-mid p a:hover{
color:#fba64c;
}

nav a{
padding:0 10px;
}

h1{ 
font-size:2.2em;
line-height:1.2em;
margin-top:10px;
}

h2 { 
font-size: 1.2em;
line-height: 1em;
padding:0;
}

#middle-strip h2 { 
font-size:1.4em;
line-height:1.4em;
padding:10px 0;
}

h5{ 
font-size:1.4em;
}

h6{ 
font-size:1.4em;
}

#left{
width:100%;
margin:0;
padding-top:5px;
display:block;
}

#left a{
padding:0;
}

#logo{
width:200px;
display:block;
padding-left:0;
}

#fb{
width:20px;	
}

}

@media screen and (min-width:0) and (max-width:455px) {
nav a{
padding:0 8px;
}

@media screen and (min-width:0) and (max-width:435px) {
nav a{
padding:0 7px;
font-size:1.2em;
}

}

@media screen and (min-width:0) and (max-width:405px) {
nav a{
font-size:1.15em;
}

nav ul ul li{
width:165px;
}

.back-narrow{
display:block;
background:#5578b0;
margin:10px 0;
}

.back-narrow p{
color:#ffffff;
text-align:right;	
}

.back-narrow a{
font-weight:normal;	
}

.back-narrow p a:hover{
color:#fba64c;
}

footer p{
font-size:1.1em;
}

}

@media screen and (min-width:0) and (max-width:390px) {
nav a{
padding:0 5px;
}

h1{ 
font-size:2em;
}

h3{ 
font-size:1.7em;
}

}

@media screen and (min-width:0) and (max-width:375px) {
nav a{
font-size:1.1em;
padding:0 4px;
}

nav ul ul li{
width:140px;
}

}