@charset "utf-8";
/* CSS Document */

*{border:0px;padding:0px;margin:0px;}
ul{list-style:none;}
.header{margin-bottom:100px;height:158px;background:#ddd;}
.menu{text-align:right;}
.menu ul{margin-top: 100px;}
.menu ul li{padding: 5px;display: inline-block;}
.menu ul li.active a{color:#ff0000;}
.heading{text-align:right;}
.items{margin-bottom:45px;cursor:default;text-align: center;position: relative;}
.items img{display:block;width:100%;border: 8px solid #bbb;position: relative;}
.items .mask{width: 100%;height: 90%;position: absolute;overflow: hidden;bottom: 0;left: 0;z-index: 100;display: none;background: rgba(184, 182, 182, 0.95);padding: 20px;color: #393939;
opacity: 0.5;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;}
.items .mask a{padding: 5px 7px;background: #000;color: #aeaeae;text-transform: uppercase;font-weight: bold;position: absolute;bottom: 10%;left: 35%;}
.items:hover .mask{display:block;}
.items .mask a:hover{background: #333;color: #fff;}
.items .mask:hover{opacity: 0.95;}


/* .items img {
	width: 100%;
	border: 9px solid #ccc;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.items .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(218, 211, 211, 1);
   border:1px solid #fff;
   position: absolute;
   bottom: 0;
   left: 0;
   width:100%;
   height:90%;
   padding:2px 5px;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.items h3 {
	background: rgba(102, 79, 10, 0.5);
	color:#fff;
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.items p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.items:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.items a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   padding: 5px 7px;background: #664F0A;color: #F5F1F1;text-transform: uppercase;font-weight: bold;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.items:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.items:hover h3,
.items:hover p,
.items:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.items:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.items:hover a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
 */





#myElement{display:none;}
.footer{background: #000;color: #393939;height: 50px;padding: 14px 20px; display: block;position: fixed;bottom: 0px;width:100%;z-index:101;}
.footer .left1{float:left;}
.footer .right1{float:right;}
.header .menu_icon{display:none;}
.listing{width:100% !important;background: rgba(255,255,255,0.5);padding: 10px 20px 100px;}
table{width:100%;border="0";}
table tr{border-bottom:1px solid #ccc;color:#525151;letter-spacing:1px;}
@media all and (max-width:1024px){
	#myElement{width:970px !important;display:none;}
}
@media all and (max-width:768px){
	#myElement{width:750px !important;display:none;}
	.footer{padding: 10px 20px;height:70px;}
	.footer .left1{float:none;}
	.footer .right1{float:none;}
}
@media all and (max-width:640px){
	#myElement{width:640px !important;display:none;}
	.menu ul{position: absolute;top: -135px;margin-top: 0px;right: 20px;}
	.menu ul li{display:block;padding:0px;}
	#myElement .menu ul {right: 20px !important;top: -140px;}
	.header{margin-bottom:25px;}
}

@media all and (max-width:480px){
	#myElement{width:480px !important;display:none;}
	#myElement .menu ul {right: 20px !important;}
}	
@media all and (max-width:360px){
	#myElement{width:360px !important; display:none;} 
	#myElement .menu ul {right: 0px !important;top: -5px;}
	.footer{font-size:10px;}
	.footer .left1{float:none;}
	.footer .right1{float:none;}
	.header{height:50px;}
	.header img{width:20%;}
	.header.header .menu ul{position: absolute;top: 0px;margin-top: 0px;right: 0px;z-index: 101;background: #000;width: 100%;padding-right: 20px;padding-bottom: 5px;}
	.header img.menu_icon{display:block;width: 25px;float: right;margin-top: 5px;}
	.header .menu{display:none;}
	#myElement img.menu_icon{display:block;width: 25px;float: right;margin-top: 5px;}
	#myElement .menu{display:none;}
	.header img.menu_icon:hover  #myElement{display:block;}
}
@media all and (max-width:320px){
	#myElement{width:320px !important; display:none;}
	#myElement .menu ul {top:-5px;}
	#myElement .menu ul li a{font-size:10px;}
	.footer{width:100%;padding: 5px 20px;height:70px;}
	.footer .left1{float:none;}
	.footer .right1{float:none;}
	.header .menu ul li a{font-size:10px;}
}