body {
    background: url("images/bg-small.jpg");
    background-position:center top;
    
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-size:13px;
}
#container {
	width:100%;
	max-width:970px;
	margin:auto;
}
#header {
	background: url("images/headerbg.png");
	/*background-size: contain;*/
	background-repeat:no-repeat;
	height:152px;
}
#contact {
	text-align:center;
	line-height:20px;
}
#icons {
	margin-top:3px;
	text-align:center;
}
#slideshow {
	border:1px solid #FF8000;
	height:100%;
}
#slideshow img { display: none; 
}
#slideshow img.first { display: block;
}

#progress { 
    position: absolute; 
    bottom: 0; height: 3px; 
    width: 0px; 
    background: black; 
    z-index: 500;
}
#pre-wrapper {
	margin-top:5px;
}
#list {
	margin-top:15px;
}
#wrapper {
	padding:10px;
	background-color: #FDEFD0;
	border:1px solid #FF8000;
	border-top:0px;
}
#wrapper-left {
	float:left;
	width:100%;
	max-width:316px;
	line-height:22px;
}
#wrapper-middle {
	float:left;
	width:100%;
	max-width:315px;
	line-height:22px;
}
#wrapper-right {
	float:left;
	width:100%;
	max-width:315px;

}
#featured-works {
	display:none;
}
#facebook {
	margin-top:5px;
}
/*#featured-works::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}*/
#featured-works::-webkit-scrollbar {
	width: 3px;
	background-color: #F5F5F5;
}
#featured-works::-webkit-scrollbar-thumb {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-left:3px;
    overflow: hidden;
    background-color: #FFBA75;
    border:1px solid #FF8000;
  
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 8px 37px;
    text-decoration: none;
    padding-bottom:9px;
   
    font-size: 16px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {color: white; }

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}


/* CLASSES */

.logo {
	width:100%;
	max-width:285px;
	
}
.sub {
	margin-top:5px;
}
.sub-2 {
	margin-top:2px;
}
.sub-3 {
	margin-top:10px;
}
.header {
	font-weight:bold;
	font-size:18px;
}
.picture {
	vertical-align:middle;
}
.text {
	font-size:15px;
    color:#333d52;
    font-weight:bold;
}
.clear {
	clear:both;
}
.wrapper-header {
	text-align:center;
	font-size:18px;
	padding-top:10px;
	padding-bottom:10px;
	font-weight:bold;
	background-color: #FFBA75;
    border:1px solid #FF8000;
}
.no-border {
	border:0px;
}
.footer {
	margin-top:10px;
	line-height:22px;
	font-size:11px;
}
.details {
	border:1px solid black;
	background-color:#F3F3F3;
	overflow:hidden;
}
.left-margin {
	margin-left:-15px;
	padding-right:5px;
}
.sample {
	margin-left:-40px;
	margin-top:3px;
	text-align:center;
}
.sample ul, .sample ol {
    list-style-type:none;
    width:294px;
    float:left;
    
}
.sample li {
    width:294px;
    padding:5px;
    margin:0px;
    
}
.pages {
	text-align:center;
}
.sample-2 {
	display:none;
}
.gray {
    background-color:#f5f5f5;
    border:1px solid black;
}



/* MEDIA QUERIES */

@media only screen and (max-width: 992px) {
	#header {
	background: none;
	text-align:center;
	

}
#featured-works {
	display:block;
	text-align:center;
	height:500px;
	overflow:scroll;
	overflow-x:hidden;
	margin-top:-12px;
	border:1px solid #FF8000;
	padding-top:7px;
	border-top:0px;
	

}
#wrapper {
	
}
#wrapper-left {
	float:none;
	width:100%;
	
}
#wrapper-middle {
	float:none;
	width:100%;
	margin-top:10px;
	
}
#wrapper-right {
	float:none;
	width:100%;
	margin-top:10px;
	
}
ul.topnav li a {
    padding: 8px 5px;
    padding-bottom:7px;
}
ul.topnav {
   
    padding-left:0px;
   
}
.sample {
	display:none;
}
.sample-2 {
	display:block;
	text-align:center;
	margin-top:10px;
	
}

}


@media screen and (max-width:992px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:992px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
    
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
 
    
  }
  #horiz_container_outer
{
	display:none;}
 #scrollbar, #track, #dragbar, #left_scroll, #right_scroll {
	display:none;
	
}
}