#photos_innerbg {
	clear: both;
	width: 100%;
	float: left;
	position: relative;
	min-height: 150px;
	margin-bottom: 20px;
}
#photo_left {
	float: left;
	background: #0095d9;
	width: 25%;
	margin-top: 10px;
	border-radius: 4px;
	padding: 10px;
	box-sizing: border-box;
}
#photo_right {
	float: right;
	width: 74%;
	margin-right: 0px;
}
#photo_category_title {
	clear: both;
	width: 100%;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	line-height: 22px;
}
#photo_catmenu {
	clear: both;
	width: 100%;
	float: left;
	padding: 0px;
	margin: 0px;
	margin-top: 10px;
}
#photo_catmenu ul {
	margin: 0px;
	padding: 0px;
}
#photo_catmenu li {
	width: 100%;
	float: left;
	list-style: none;
}
#photo_catmenu li a {
	display: block;
	color: #fff !important;
	padding-top: 3px;
	padding-bottom: 3px;
	border-bottom: dotted 1px #fff;
	line-height: 20px;
	transition: all 0.3s;
}
#photo_catmenu li a:hover, #photo_catmenu li a.actv {
	text-decoration: none;
	padding-left: 5px;
	background: rgba(0,0,0,0.2)
}
.shadow1 {
	color: #FFF;
	left: 0;
	position: relative;
	top: 0px;
	display: block;
}
.text1 {
	left: -1px;
	position: relative;
	top: -17px;
	display: block;
}
#photo_viewheader {
	clear: both;
	padding: 15px 0;
	width: 100%;
	float: left;
	border-bottom: solid 1px #ccc;
	margin-bottom: 10px;
}
#photo_viewheader .photo_viewheader_left {
	float: left;
	width: 80%;
	font-size: 14px;
	font-weight: 700;
	color: #666;
}
#photo_viewheader .photo_viewheader_left span {
	color: #0095d9;
}
#photo_viewheader .photo_viewheader_right {
	float: right;
	width: 50px;
}
#photo_viewheader .photo_viewheader_right a {
	color: #8e8e8e;
	font-weight: 600;
}
#photo_content {
	clear: both;
	width: 100%;
	float: left;
}
.photo_box {
	float: left;
	border: solid 2px #ccc;
	background: #fff;
	width: 32%;
	height: 200px;
	margin: 8px 1% 8px 0px;
	position: relative;
	text-align: center;
	padding: 5px;
	box-sizing: border-box;
}
.photo_box:hover {
	border-color: #0095d9
}
.photo_box span.ph_thumb {
	box-sizing: border-box;
	width: 100%;
	height: 190px;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.photo_box span.ph_thumb span {
	display: inline-block;
	height: 100%;
	width: 0;
}
.photo_box span.ph_thumb img {
	max-height: 100%;
	max-width: 100%;
}
.photo_box * {
	vertical-align: middle;
}
.photo_code {
	position: absolute;
	background: rgba(0,0,0,0.7);
	height: 30px;
	width: 100%;
	bottom: 0;
	left: 0;
	text-align: center;
	color: #FFF;
	line-height: 30px;
	overflow: hidden;
	padding: 0px 5px;
	box-sizing: border-box;
}
#pagination {
	clear: both;
	float: left;
	padding-top: 10px;
	width: 100%;
	text-align: center;
}
#pagination a, #pagination span {
	background: #ddd;
	border-radius: 5px;
	color: #000 !important;
	padding: 3px 7px;
	margin: 3px 3px;
	line-height: 22px;
	text-align: center;
	display: inline-block;
}
#pagination a:hover, #pagination span {
	color: #FFF !important;
	background: #0095d9 !important;
	text-decoration: none;
}
#photo_category_title img {
	max-width: 20px;
}

@media (max-width: 1004px) {
.photo_box {
	height: 170px;
}
.photo_box span.ph_thumb {
	height: 160px;
}
#photo_left {
	width: 30%
}
#photo_right {
	width: 69%;
}
#cssmenu ul li a {
	padding: 10px 8px !important;
}
#cssmenu ul ul li a {
	padding: 3px 10px !important;
}
}

@media (max-width: 767px) {
#photo_left {
	width: 94%;
	margin-left: 3%;
	margin-right: 3%;
}
#photo_right {
	width: 94%;
	margin-left: 3%;
	margin-right: 3%;
}
.photo_box {
	width: 31%;
	margin-left: 1%;
	margin-right: 1%;
}
#photo_catmenu {
	display: none;
}
}

@media (max-width: 599px) {
.photo_box {
	width: 48%;
	margin-left: 1%;
	margin-right: 1%;
}
.photo_box {
	height: 150px;
}
.photo_box span.ph_thumb {
	height: 140px;
}
.photo_code {
	font-size: 13px;
}
}

@media (max-width: 479px) {
	
.photo_box {
	height: 140px;
}
.photo_box span.ph_thumb {
	height: 130px;
}
}

body {
   background-image: url("/images/bg.jpg");
   background-color: #fff;
}

/* Add a black background color to the top navigation */
.topnav {
  float: right;
    overflow: hidden;
	    margin-top: 50px;

}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 16px;
	font-family: "Roboto";
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #4CAF50;
    color: white;
}

/* Add an active class to highlight the current page */
.active {
    background-color: #4CAF50;
    color: #fff;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
	  background-color: #ffffff;
    color: #000;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: 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 (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
	  background-color: #b6d18c;
  }
}