

ul#gallery-list li { float:left;	display:block; margin:0px; padding:0px 0px 5px 8px;	}

	
ul#gallery-list li .content_block img{ clear:both; display:block; margin:0px; border:none; 	width:309px; height:208px; background:#FFF;   }
ul#gallery-list li .content_block img:hover {  opacity:0.8; }



/****** Portfolio *****/

#gallery_menu{ display:block; float:left; margin: 10px 0; padding:0 0; background:#EDEDED; width:100%; box-shadow:0 0 2px #333333 inset;}
#gallery_menu ul { margin:0 10px; }
#gallery_menu ul li{ color:#900;  margin:0 10px; }
#gallery_menu li a{margin:0px; line-height:50px; padding:0 5px; font-size:16px;  }	
#gallery_menu li a:hover { color:#900; }



.port-title{ width:100%; height:auto; float:left; }
.port-title a{ float:left; width:100%; line-height:40px; background:#A80604; color:#FFF; font-size:16px; text-align:center; text-transform:lowercase !important; } 
.port-title a:hover { background:#000; }

ul#gallery-list li { float: left;
    display: block;
    width: 317px;
    height: 250px;
    margin: 6px;
    border: 1px solid #a80604;
    padding: 5px; }


.overbox p { font-size:22px; color:#FFF; }
.overbox a { font-size:25px; color:#FFF; padding:0px; }
.overbox a:hover { color:#000; }

.port-box {
  cursor: pointer;
    height: 210px;
    position: relative;
    overflow: hidden;
    width: 317px;
    float: left !important;
}
.port-box img { width:100%; height:auto; }
.port-box img {
  position: absolute;
  left: 0;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}

.port-box .overbox {
 
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 0;
  width: 290px;
  height: 170px;
  padding: 20px 20px;
}

.port-box:hover .overbox { opacity: 0.9; background:#A80604; }

.port-box .overtext {
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  transform: translateY(40px);
  -webkit-transform: translateY(40px);
}

.port-box .title {
  font-size:20px;
  text-transform: uppercase;
  opacity: 0;
  transition-delay: 0.1s;
  transition-duration: 0.2s;
  color:#FFF !important;
}
.port-box .title a {color:#FFF !important; }
.port-box:hover .title,
.box:focus .title {
  opacity: 1;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

.port-box .tagline {
  font-size: 14px;
  opacity: 0;
  transition-delay: 0.2s;
  transition-duration: 0.2s;
  line-height:22px;
  margin:10px 0;
}

.port-box:hover .tagline,
.port-box:focus .tagline {
  opacity: 1;
  transform: translateX(0px);
  -webkit-transform: translateX(0px);
}


/****** Portfolio *****/

/* Portrait tablet to landscape and desktop */
@media only screen and ( min-width:768px) and ( max-width:980px ) {
	
	
ul#gallery-list li { float:left; display:block;	width:331px; height:250px; margin:10px 25px; }


}


/* Landscape phone to portrait tablet */
@media only screen and ( min-width: 600px) and ( max-width: 767px ) {



#gallery_menu{ display:block; float:left; margin: 10px 0; padding:0 0; background:#EDEDED; width:100%; box-shadow:0 0 2px #333333 inset;}
#gallery_menu ul { list-style:square; margin:0 10px; }
#gallery_menu ul li{ color:#900;  margin:0 10px; }
#gallery_menu li a{margin:0px; line-height:50px; padding:0 5px; font-size:16px;  }	
#gallery_menu li a:hover { color:#900; }


.port-title{ width:100%; height:auto; float:left; }
.port-title a{ float:left; width:100%; line-height:40px; background:#A80604; color:#FFF; font-size:16px; text-align:center; } 
.port-title a:hover { background:#000; }

ul#gallery-list li { float:left; display:block;	width:280px; height:231px; margin:1%; }


.overbox p { font-size:22px; color:#FFF; }
.overbox a { font-size:25px; color:#FFF; padding:0px; }
.overbox a:hover { color:#000; }

.port-box {
  cursor: pointer;
  height: 190px;
  position: relative;
  overflow: hidden;
  width: 280px;
  float:left !important;
}
.port-box img { width:100%; height:auto; }
.port-box img {
  position: absolute;
  left: 0;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}

.port-box .overbox {
 
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 0;
  width: 240px;
  height: 150px;
  padding: 20px 20px;
}


ul#gallery-list li .content_block img { width:278px !important; height:180px; }
ul#gallery-list li .content_block img:hover {  width:300px; height:180px; }


	
}

/* Mobile landscape (480x320) */
@media only screen and ( min-width:480px) and ( max-width:599px ) { 


ul#gallery-list { width:93% !important; float:left; margin:0px 10px; }

#gallery_menu{ display:block; float:left; margin: 10px 0; padding:0 0; background:#EDEDED; width:100%; box-shadow:0 0 2px #333333 inset;}
#gallery_menu ul { list-style:square; margin:0 10px; }
#gallery_menu ul li{ color:#900;  margin:0 10px; }
#gallery_menu li a{margin:0px; line-height:50px; padding:0 5px; font-size:16px;  }	
#gallery_menu li a:hover { color:#900; }


.port-title{ width:100%; height:auto; float:left; }
.port-title a{ float:left; width:100%; line-height:40px; background:#A80604; color:#FFF; font-size:16px; text-align:center; } 
.port-title a:hover { background:#000; }

ul#gallery-list li { float:left; display:block;	width:300px; height:210px; margin:10px 18%; }


.overbox p { font-size:22px; color:#FFF; }
.overbox a { font-size:25px; color:#FFF; padding:0px; }
.overbox a:hover { color:#000; }

.port-box {
  cursor: pointer;
  height: 170px;
  position: relative;
  overflow: hidden;
  width: 300px;
  float:left !important;
}
.port-box img { width:100%; height:auto; }
.port-box img {
  position: absolute;
  left: 0;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}

.port-box .overbox {
 
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 0;
  width: 260px;
  height: 130px;
  padding: 20px 20px;
}
ul#gallery-list li .content_block img { width:300px; height:180px; }
ul#gallery-list li .content_block img:hover {  width:300px; height:180px; }



}


@media only screen and ( min-width: 320px) and ( max-width: 480px ) {


#gallery_menu{ display:block; float:left; margin: 10px 0; padding:0 0; background:#EDEDED; width:100%; box-shadow:0 0 2px #333333 inset;}
#gallery_menu ul { list-style:square; margin:0 10px; }
#gallery_menu ul li{ color:#900;  margin:0 10px; }
#gallery_menu li a{margin:0px; line-height:50px; padding:0 5px; font-size:16px;  }	
#gallery_menu li a:hover { color:#900; }


.port-title{ width:100%; height:auto; float:left; }
.port-title a{ float:left; width:100%; line-height:40px; background:#A80604; color:#FFF; font-size:16px; text-align:center; } 
.port-title a:hover { background:#000; }


ul#gallery-list { width:93% !important; height:100%; float:left; margin:0px 10px; }
ul#gallery-list li { float:left; display:block;	width:100%; height:210px; margin:10px 0px; }


ul#gallery-list li .content_block img { width:300px; height:180px; }
ul#gallery-list li .content_block img:hover {  width:300px; height:180px; }


.overbox p { font-size:22px; color:#FFF; }
.overbox a { font-size:25px; color:#FFF; padding:0px; }
.overbox a:hover { color:#000; }

.port-box {
  cursor: pointer;
  height: 170px;
  position: relative;
  overflow: hidden;
  width: 300px;
  float:left !important;
}
.port-box img { width:100%; height:auto; }
.port-box img {
  position: absolute;
  left: 0;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
}

.port-box .overbox {
 
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  z-index: 100;
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  opacity: 0;
  width: 260px;
  height: 130px;
  padding: 20px 20px;
}
ul#gallery-list li .content_block img { width:300px; height:180px; }
ul#gallery-list li .content_block img:hover {  width:300px; height:180px; }


}