body {
margin: 0 auto;
padding: 0;
width: 100%;
font-family: Arial, Verdana, Helvetica, sans-serif;  
font-size:62.5%; /* 1em = 10px*/
line-height: 120%;
line-height: 100%;
color:#455272;
background-color: #D0CCB1;
background: #D0CCB1 url(../images/synergicwebs_fig1.jpg) repeat-x 0 0; 
}
h1, h2 ,h3,h4{
margin: 0;
padding:0;
font-family: Georgia, "Times New Roman", Times, serif;	 
text-align:center;
font-weight: normal;
line-height:1.2em;
color:#455272;
}

h1 {
	font-size: 2.5em;	 
    border-bottom: 2px solid #D0CCB1;
	padding-bottom:1em;
	margin-bottom:1em;
    border-radius: 0.2em;
    box-shadow:0.2em 0.2em 0.2em  #72634D;
}
 
h2 {
	font-size: 2.0em;
 }

h3 {
	font-size: 1.5em;	 
}

img{
border:0px solid #ffffff;
outline:none;
width: 100%
}

img, a {outline: none;}
 
ul,ol {
	margin: 0;
	padding:0;
	line-height: 1.4;
	list-style:none;	 
}
ul.read {
font-family:Verdana,Geneva,sans-serif;
text-align: justify;
padding:0;
margin:0;
font-size:1.3em;
line-height:140%;
/* list-style-image: url('../images/button_navy.png'); */
list-style-position:inside;
}

 a.hidden {
visibility:hidden;}

a:link, a:visited{
	text-decoration:none;
	color: #D0CCB1;
	outline:none;
} 
a:hover, a:focus, a:active {
text-decoration:underline;
font-weight:bold;
}
 
span.strong{
font-weight:bold;
}
span.italic{
font-style:italic;}
span.small_caption
 {
 font-size:0.8em;
 font-size:1em;
 font-style:italic;
}

span.error_js, span_message_js {
padding-top: 1px;
  margin-top: -1.4em;
  margin-bottom: 1.4em;
  display: block;
  padding-left: 20px;
  color: #242424;
  background-image: url("../img/icon-warning.png");
  background-position: left 3px;
  background-repeat: no-repeat;}
}
p.read {
font-family:Verdana,Geneva,sans-serif;
text-indent:3em;	
}


p.note,p.success_form,p.error_form{
font-size: 1em;
font-style:italic;
max-width:28em;
text-align:center;
margin-left:auto;
margin-right:auto;
}

p.error_form_js {
padding-left: 1.5em;
background-image: url("../images/icons/icon-warning.png");
background-position: left top;
background-repeat: no-repeat;

font-size: 1em;
font-style:italic;
max-width:28em;
margin-left:0;
margin-right:0;

}


p.note {
color:	#CC7A00;
}
p.success_form{
color: #336600;
} 
p.error_form{
color:	#B95349;
}
 
label {
display:block;
color:	#CC7A00;
padding:0.5em 0  0.2em 0;
font-size: 1.3em;
color:#455272;
}
label.form_error {
color:	#B95349;
font-weight:bold; 
}

input[type=text], input[type=password], input[type=submit],input[type=email],textarea  {
padding:0.5em 1em;
font-size: 1.5em;
color:#455272;
border: 0.3em solid #455272;
-moz-box-sizing: border-box;
box-sizing: border-box;
width:100%;
background-color: #FFF;
font-family: Arial, Verdana, Helvetica, sans-serif;
border: 0.3em solid #455272;
box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.1) inset;

transition-duration: 0.3s;
}

input:hover,textarea:hover, input:focus,textarea:focus  {
border: 0.4em solid #CC7A00;
}
input[type=submit]  {
width: 10em;
border-radius: 0.5em;
}
input[type=submit]:hover , input[type=submit]:focus  {
border: 0.4em solid #455272;
outline:none;
color:#CC7A00;
border: 0.4em solid #CC7A00;
}

form {
display:block;
overflow: hidden;
text-align:left;}

form img{
display:inline;
width:auto;
margin-bottom: 0.5em;
 }

#form_container {
display:block;
position:relative;
overflow: hidden;
margin:0 20%;
}
form#login_form {
position: relative;
margin:0 auto;
max-width:30em;
}

li.mid_name {
display:none;}

.group {
clear:both;
margin:0;
padding:0;
display:block;
position:relative;
overflow:hidden;
}
.col{
float:left;
margin:0 0 0 1.6%;
display:block;
}
.col:nth-of-type(2n+1){
margin-left:0;}
.col:nth-of-type(2n){
margin-left:0;} 
.span_1_1, .span_1_3, .span_2_3, .span_3_8, .span_5_8, .span_1_6 , .span_4_6, .span_1_2{
width:100%;
display:block;}
#content  {
display:block;
 overflow:hidden;
margin:0 1em 0 1em; 
position:relative;
background-color: #F1F0E8;
}
 
#content li {
 margin-bottom: 1em;}
#portfolio_teaser{
position:relative;
float:right;
display:inline;
height:35em;
width:34em;
margin:1em 1em 1em 2em;
} 
.js_slide_show { 
position:relative;
display:block;
}
 

#content .widget p {
font-size: 1.2em;
font-weight: normal;
font-style:italic; 
line-height:140%;
text-align:center;
padding:0.5em 0px;
color: #336600;
color: #CC7A00;
} 

.js_slide_show div { 
position:absolute;
display:block;
top:0;
left:0;
z-index:18;
margin:0;
} 
.js_slide_show div.js_current  {
 z-index:20;
}
.js_slide_show div.js_current_prev { 
 z-index:19;
}

.js_slide_show  div.link {
position:relative;
}

.js_slide_show_manager{
position:absolute;
right:8%;
top:15%;
padding-top:0.4em;
z-index:30;
margin-right:0.1em;
}

.js_slide_show_manager #slide_button{
border: 0px solid #F1F0E8;
background-color: #F1F0E8;
font: inherit;
font-size:1em;
font-weight:bold;
color: #CC7A00;
cursor: pointer;border-radius:5px;
}
.js_slide_show_manager #slide_button:hover{
background-color: #CC7A00;
color:#455272 ;
border: 0.1em solid #D0CCB1;
box-shadow:0.2em 0.2em 0.2em 0.2em  #72634D;
}

#wrapper { 
margin:2.8em auto;
padding: 0;
height:auto; 
background-color: #F1F0E8;
border: 6px solid #D0CCB1;
border-radius: 2em; 
}
div.contacts1 {
overflow:visible;
height: 2.5em;
background-color: #D0CCB1;   		 
} 

div.contacts1 ul.right {
float:right;
}
div.contacts1 ul.left{
float: left;
}
div.contacts1 li {
float: left;
position:relative;
}
div.contacts1 ul.right  li  a{
padding: 0.2em 2.3em 0.4em 0 ;
width: auto;
display:block;
line-height: 100%;
text-align: right;
font-weight: bold;
font-size: 1.4em;
color:#455272;
background-color: #D0CCB1;} 
 
div.contacts1 .date{
display:none;
width:auto;
font-size: 1.2em;
font-style:italic;
font-weight:normal;
padding: 0 0 0.5em 0;
}
div.contacts1  a.logo{
display:none;
}
#menu  .col ul {
 padding-left:25%;
  padding-left:0;
 }
#masthead  {
height: 15em;
position: relative;
background: #455272 url(../images/synergicwebs_fig2.jpg) repeat  0 -2em;
color:#D0CCB1;
}

#masthead .col {
height:100%;
}
#masthead .col.fluid {
display:none;}

#masthead .col.fluid.info0 { 
display:block;
position:absolute;
top:0;
left:0;
z-index:10;
}
#info1, #info0 {
height:100%;
display:block;
position:relative;
}
#info0 a.logo{
display:block;
width:auto;
height:auto;
position:absolute;
right:0;
bottom: 0;
}
#info0 img{
width:auto;}
#info0{
z-index: 10;}
#info1{
z-index:11;}
#info2 {
background: url(/images/synergicwebs_logo1.png) no-repeat right top;
z-index:12;}
#info1 img{
min-width:30em;
max-width:50em;
width:100%;
display:block;
margin:auto;
border:0px none;
} 
#info2 #quote1 {
position:relative;
float:right;
margin-top:10%;
}
#info2 #quote1 a {
font-weight:bold;
font-size:1.5em;
line-height:1.5em;
padding:2em 0;
text-align:left;
max-width:100%;
}
#info2 #quote1 a:hover {
font-style:italic;
}
/* Menu */
#menu {
	position:relative;
	height:6em;
	height:4.6em;
	overflow:visible;
 } 
#menu ul {
list-style:none;}
 
#menu  ul {
position:relative;
height:3em;
background-color:#455272;
padding-left:0;
margin:-3em 0 0 0;
}

#menu ul  li > ul 
{
display:none;}

 #menu ul.menu  li {
position:relative;
float:left;
z-index:20;
 }
#menu ul li:hover > ul, #menu ul li.current > ul  {
display:block;
position:absolute;
width:38em;
height:4em;
top:6em;
left:-16.3em;
padding:0.5em 0 0.4em 0;
color:#455272;
background-color:  #F1F0E8;
}
#menu a:link, #menu  a:visited {
display: block; 
position:relative;
width:auto;
padding: 0.5em  1em  ;
font-weight:bold;
font-size:1.5em;
line-height:1;
text-decoration:none;
text-align:center;
color: #D0CCB1;
white-space:nowrap;}
#menu  a:hover, #menu  a:focus, #menu  a:active{
text-decoration:underline;
border-left: 2px solid #455272;
border-left: 0;
color: #CC7A00;
}
#menu  a:active {
color: #B93C20;
 }
#menu ul li:hover > ul a:link, #menu ul li.current > ul a:link, #menu ul li:hover > ul a:visited, #menu ul li.current > ul a:visited {
padding: 0.5em  0.4em;
}
#menu ul li > ul  a:hover, #menu  ul li > ul a:focus{
text-decoration:underline;
background-color:#F1F0E8;
color:#455272;
border-left: 0;
} 
#menu li.current a:link, #menu li.current a:visited{ 
color:#CC7A00;
background-color:  #F1F0E8;
text-decoration:none;
border-left: 0;
border-radius:0.5em 0.5em 0 0 ;
}
 
#menu ul li.current  > ul  a , #menu ul li.current:hover > ul  a {
color:#455272;
color:#CC7A00;
}
 
#menu ul li:hover > ul  a {
color:#455272;
}
 #menu ul li:hover > ul  a:hover {
text-decoration:underline;
}
 #menu ul li.current  > ul  a , #menu ul li.current:hover > ul  a {
color:#455272;
color:#CC7A00;
}

/* Content */
 
#content p{
line-height: 140%;
line-height: 150%;
text-align:justify;
font-size: 1.3em;
	
}
#content p.first_special{
text-indent: 3em;	
}

.listing_services p.read span.special_1{
font-weight: bold;
letter-spacing: 0.2em;
}
.listing_services p.read {
text-indent:0;}
 
#content  a:link, #content  a:visited{
font-weight: bold;
color:#CC7A00;
}
#content  a:hover {
text-decoration:underline;
}
 
.synopsis  {
margin:2em 0 ;
text-align:center;
}
.synopsis a  img{
background: #D0CCB1 url(../images/synergicwebs_fig1.jpg) no-repeat -800px -130px;
border:1px solid #D0CCB1;
border-radius: 5px;
box-shadow:5px 5px 5px 5px  #D0CCB1 inset ;
width: auto;
}
.synopsis a:hover img{
background: #D0CCB1 url(../images/synergicwebs_fig1.jpg) no-repeat -200px -50px;
background: #D0CCB1 url(../images//synergicwebs_fig2.jpg) no-repeat -800px -130px; 
border:1px solid #CC7A00;
box-shadow:5px 5px 5px 5px  #CC7A00 inset;
}

 #js_portfolio{
 display:none;}
 #portfolio_list {
 display:block;
 position:relative;}

#portfolio_list  ul  li {
display:block;
position:relative;
margin-left:auto;
margin-right:auto;
max-width:35em;
}  


.portfolio_det ul.read li{
margin:0 0 0 1.5em;
}

h2.portfolio_det {
text-align:left;
font-size:1.5em;
letter-spacing:0.2em;
padding: 0.5em 0 0 0;}
.portfolio_det p.read {
text-indent:0;}
.figure  {
text-align:center;
max-width:35em;
margin-left:auto;
margin-right:auto;
}
 .figure div#port_nav  {
 position:relative; 
 display:block; 
 overflow:hidden;
 float:none;
 } 
#portfolio_det  div#port_nav a:link, .portfolio div#port_nav a:visited {
display:inline;
width:25%;
padding-left:  1em;
font-weight:bold;
font-size:1.3em; 
line-height:140%;
color: #CC7A00;
}

#portfolio_det  div#port_nav  a:hover {
text-decoration:underline;
}
div#wrapper_img {
 position:relative;
 display:inline-block;
 max-width:28em;
 height: auto;
 float:left;
 margin: 0.5em;
}
div#wrapper_img div.img{
display:inline-block;
overflow:hidden;
padding:0;
margin:0.5em;
border: none;
background-color: #D0CCB1;
border-radius: 28px;
text-align:center;
}
div#wrapper_img .caption {
 position:relative;
 display:inline-block;
 max-width:25em;
 height: auto;
 float:left;
 margin: 0.3em 0.5em 0.5em 0.5em;
}

div.img{
display:block;
overflow:hidden;
padding:1em;
margin:1em;
border: 3px solid #CC7A00;
background-color: #D0CCB1;
border-radius: 25px;
text-align:center;
}


div.img:hover{
border: 6px solid #CC7A00; 
}
div#wrapper_img div.img:hover {
border: 1px solid #000000; }

div.img div.link {  
height: 2em;
}
 
div.img div.link a{
display:block;
padding:0.5em 0 1em 0;
text-align:center;
font-size:1.2em;
font-style: italic;
font-weight: bold;
color:#CC7A00;
}
div.link a:hover{	 	
background-color: #455272;
display:block;
text-align:center;
}
div.img img {
width:100%;
}
#content_bottom {
display:block;
 margin-top:2em;
clear:both;
width:100%;
}
#content_bottom p {
  padding-top:2em;
  padding-bottom:1em;
  font-size: 1.1em;
  text-align:center;
  font-weight:bold;
}
#content_bottom  a.content_bottom1{
 color: #CC7A00;
} 
/* Footer */
#footer {
position:relative;
overflow:hidden;
border-top: 6px solid #455272;
background: #333333 url(../images/synergicwebs_fig2.jpg) repeat-x -100px;
padding-top:1em;
padding-bottom:1em; 	
}
 
#footer p {
font-size: 1.1em;
font-weight: bold;	
text-align: center;
color: #d0ccb1;
}
#footer a{
margin:0;
padding:0;
color: #d0ccb1;
font-weight: bold;
}
 /* media query */
@media only screen and   (max-width: 400px){
#masthead #info0, #masthead #info2{
 display:none;}
#masthead {
height:8.5em;} 
#info1 img{
max-width:100%;
min-width:0;
display:block;
margin:auto;
border:0px none;
} 
h1{
display:none;}

input[type=text], input[type=password], input[type=submit],input[type=email],textarea  {
font-size: 2.5em;
}


div.contacts1  a.logo{
display:block;
position:absolute;
top:0.3em;
left:0;
top:-1.3em;
left:-0.4em;
z-index:100;
height:45px;
width:44px;
overflow:visible;
}
#menu{
display:block;
height:auto;}
 
#menu  ul  {
display:block;
clear:both;
height:auto;
height:18em;
margin-top:0;
margin:0 0 1.5em 0;
padding:1em 0 2em 0;
background-color: #B93C20;
background-image: linear-gradient(to right,#B93C20,#D0CCB1);
overflow:visible;
} 

#menu ul li:hover > ul,#menu ul li.current > ul {
display:block;
position:absolute;
width:15em;
height:25em;
height:auto;
top:0;
left:auto;
right:0;
padding:0; 
color:#455272; 
 z-index:1;
} 

#menu ul.menu  li {
 width:100%;
z-index:auto;
background-color: #B93C20;
 }
#menu a:link, #menu  a:visited {
font-size:2em;
border-radius:0;
box-shadow:5px 5px 5px #455272;
border-bottom: 2px solid #455272;
background-image: linear-gradient(to bottom,#D0CCB1, #455272);
margin-left:0;
text-align:left;
 }

#menu  a:hover, #menu  a:focus, #menu  a:active{
 color: #455272;
}
#menu li.current a:link, #menu li.current a:visited{ 
background-image:none;
background-color: #455272;
background-image: linear-gradient(to bottom, #B93C20,#455272);
color: #E0AF66;
 }

 #menu ul  li:hover > ul  a, #menu ul  li:focus > ul  a{
 font-size:1.5em;
 }
  
#menu ul li:hover > ul a:link,#menu ul li:hover > ul a:visited{
color:#D0CCB1;
font-size:1.5em;
text-align:center;}
#menu ul li.current  > ul a:link, #menu ul li.current:hover  > ul a:visited {
font-size:1.5em;
color: #E0AF66;
text-align:center;}

#menu ul li:hover > ul a:hover, #menu ul li:hover > ul a:focus{

color:#D0CCB1;}

 #content {
 margin:0;}
 #content p, #content h2, #content ul.read, #content form{
 margin:0 1em 1em 1em;}
#portfolio_teaser{
position:relative;
float:none;
display:block;
height:35em;
width:100%;
margin:1em 0 1em 0;
}
#form_container {
margin:0 5%;
} 
#footer {
width:100%;
background-image: linear-gradient(to bottom, #B93C20,#455272);
}
}
@media   screen and (min-width: 850px) { 
body{
width:95%;
background: #D0CCB1 url(../images/synergicwebs_fig1.jpg) repeat-x 0 0;}
.span_1_1 {
margin-left:0;
width:100%;}
.span_1_3 {
width:32.26%}
.span_2_3{
width:66.13%}
.span_3_8 {
width:36.9%;}
.span_5_8  {
width:61.5%;}
.span_1_6  {
width:16.13%;}
.span_4_6 {
width:64.52%;}
.span_1_2 {
width: 49.2%;}
 .col:nth-of-type(2n){
margin-left:1.6%;}

.listing_services .span_1_2 {
width:48.1%;}
.listing_services .col:nth-of-type(2n+1) {
margin-left:1.6%;
}
div.contacts1 .date{
display:block;
}
  
#masthead{
background: #455272 url(../images/synergicwebs_fig1.jpg) repeat  0 -2em;
}
#footer{
background: #333333  url(../images/synergicwebs_fig1.jpg) repeat-x 0 -150px;
}
#masthead  .col.fluid {
display:block;
position:relative;}

#masthead .col.fluid.info0 {
display:block;
position:relative;}

#info0, #info1, #info2{
display:block;
height:100%;
position:relative;
}

#menu  .col ul {
 padding-left:25%;
 }

#menu ul li:hover > ul, #menu ul li.current > ul  {
width:50em;
}
#menu ul li:hover > ul a:link, #menu ul li.current > ul a:link  {
padding: 0.5em  0.7em;
}
#portfolio_list {
display:none;
}
#form_container {
margin:0 5%;
}

/*  roundabout */
 #js_portfolio   {
position:relative;
display:block;
margin:-40px auto 10px auto;
overflow:visible;;
}
#portfolio_list, #js_portfolio {
margin-bottom:3em;
 }
#js_portfolio ul.roundabout {
display:block;
position:relative;
list-style-type: none;
padding: 0;
margin: -50px auto 50px auto;
height:350px;
width:350px;
}

#js_portfolio ul.roundabout div.img {
float:left;
padding:1em;
margin-bottom:1.5em;
margin-left:0;
border: 3px solid #CC7A00;
background-color: #D0CCB1;
border-radius: 25px;
}
#js_portfolio ul.roundabout div.img:hover {
border: 6px solid #CC7A00; 
}

#js_portfolio  ul.roundabout li.round_child {
padding:15px;
margin-top: -40px; 
}
 #js_portfolio  ul.roundabout li.round_child.roundabout-moveable-item {
min-height: 212px;
min-width: 300px;
cursor: pointer;	 
}
#js_portfolio  ul.roundabout li.round_child.roundabout-moveable-item div.img {
margin-left:-80px;
padding:15px;
}
#js_portfolio  ul.roundabout li.round_child.roundabout-moveable-item div.img:hover {
	   border-color: #CC7A00;
 }
#js_portfolio  ul.roundabout li.round_child.roundabout-in-focus  div.img{
cursor: auto;
background-color: #D0CCB1; 
border: 6px solid #D0CCB1;
border: 6px solid #CC7A00;
border-radius:25px;
box-shadow:5px 5px 3px  #D0CCB1;
box-shadow:15px 15px 15px #72634D;
height:250px;
width:300px; 
padding:15px;	  
}
#js_portfolio  ul.roundabout li.round_child.roundabout-in-focus  div.img:hover {
border: 8px solid #CC7A00;
}	
#js_portfolio  ul.roundabout li.round_child.roundabout-moveable-item  .link  {
display:none; 
}
	 
#js_portfolio  ul.roundabout li.round_child.roundabout-in-focus  .link{	 
display: block; 	
background-color: #455272;
}
#js_portfolio  ul.roundabout li.round_child.roundabout-in-focus  div.link a{	 	
background-color: #455272;
display:block;
text-align:center;
padding:5px 0 10px 0;
}	 
/*  end roundabout */
}