#showreel-container
{
	text-align:center;
}

.showreel-video-thumb
{
}

.primary-content .showreel-vid-caption
{
	font-family: "PT Sans Narrow", "helvetica neue", helvetica, arial, tahoma, verdana, sans-serif;
	color:#535353;
	margin:0.75em 0;
	padding:0 0.75em 0 0;
	font-size:1.15em;
	text-transform:uppercase;
	text-align:left;
	clear:both;
}

.primary-content .showreel-vid-caption a
{
	font-family: "PT Sans Narrow", "helvetica neue", helvetica, arial, tahoma, verdana, sans-serif;
	color:#535353;
	text-decoration:none;
	font-size:100%;
	font-weight:normal;
}

.primary-content .showreel-vid-caption a:hover
{
color:#AB2929;
}

.primary-content .showreel-vid-caption span
{
	font-size:75%;
	color:#898989;
}



.templatemo-project-box {
    background-size: cover;
    position: relative;
    overflow: hidden;
    cursor:pointer;
    height: 200px;
    width: 200px;
	text-align:center;
}

.templatemo-project-box img
{
	margin:0 auto;
}

.templatemo-project-box:hover .project-overlay {
    transition: all 0.3s ease-in-out 0s;
    visibility: visible;
    opacity: 1;
}

.project-overlay {
    background : rgba(0,0,0,.75);
    visibility: hidden;
    position: absolute;
    text-align:center;
    padding-top:40px;
    color: #ffffff;
    height: 100%;
    width: 100%;
    opacity: 0;
    right: 0;
    top: 0;
}

.project-overlay h5
{
	margin-bottom:1em;
}

.project-overlay h4
{
	font-size:1.5em;
}

.project-overlay i.play
{
	color:#000;
}



.templatemo-project-gallery
{
	width:690px;
	padding:0 15px;
	margin:0 auto;
}

.templatemo-project-gallery li {
    margin:15px 0;
	float:left;
	width:33%;
}




.templatemo-project-gallery li {     
    list-style:none;
    margin-bottom:25px;           
}

.templatemo-project-gallery li img {
  cursor: pointer;
}




/*----start-responsive-design----*/
@media only screen and (max-width:1440px) and (min-width:1366px){	
}
@media only screen and (max-width:1366px) and (min-width:1280px){	
}
@media only screen and (max-width:1280px) and (min-width:1024px){
}
@media only screen and (max-width:1024px) and (min-width:768px){
}
@media only screen and (max-width:768px) and (min-width:640px){
	.templatemo-project-box img
	{
	    height: auto;
	    width: 100%;
		display:block;
		margin:0 auto;
	}
	.templatemo-project-box {
	    height: auto;
	    width: 100%;
		display:block;
		margin:0 auto;
	}
	.templatemo-project-gallery
	{
		width:100%;
		padding:0 0;
	}

	.templatemo-project-gallery li {
	    margin:1em;
		float:none;
	}
	.project-overlay h5
	{
		font-size:3em;
		margin-bottom:1em;
	}

	.project-overlay h4
	{
		font-size:4.5em;
	}
	
	.project-overlay {
	    padding-top:8em;
	}
	.showreel-vid-caption
	{
		font-size:2em;
	}
	.showreel-video-thumb
	{
		margin-bottom:1em;
		border-bottom:1px dotted #c9c9c9;
	}
}
@media only screen and (max-width:640px) and (min-width:480px){
	.templatemo-project-box img
	{
	    height: auto;
	    width: 100%;
		display:block;
		margin:0 auto;
	}
	.templatemo-project-box {
	    height: auto;
	    width: 100%;
		display:block;
		margin:0 auto;
	}
	.templatemo-project-gallery
	{
		width:100%;
		padding:0 0;
	}

	.templatemo-project-gallery li {
	    margin:1em;
		float:none;
	}
	.project-overlay h5
	{
		font-size:2em;
		margin-bottom:1em;
	}

	.project-overlay h4
	{
		font-size:3.5em;
	}
	
	.project-overlay {
	    padding-top:4em;
	}
	.showreel-vid-caption
	{
		font-size:1.75em;
	}
	.showreel-video-thumb
	{
		margin-bottom:1em;
		border-bottom:1px dotted #c9c9c9;
	}
}
@media only screen and (max-width:480px) and (min-width:320px){
	.templatemo-project-box img
	{
	    height: auto;
	    width: 100%;
		display:block;
		margin:0 auto;
	}
	.templatemo-project-box {
	    height: auto;
	    width: 100%;
		display:block;
		margin:0 auto;
	}
	.templatemo-project-gallery
	{
		width:100%;
		padding:0 0;
	}

	.templatemo-project-gallery li {
	    margin:1em;
		float:none;
	}
	.project-overlay h5
	{
		font-size:1em;
		margin-bottom:0.5em;
	}

	.project-overlay h4
	{
		font-size:2em;
	}
	
	.project-overlay {
	    padding-top:3em;
	}
	.showreel-vid-caption
	{
		font-size:1.25em;
	}
	.showreel-video-thumb
	{
		margin-bottom:1em;
		border-bottom:1px dotted #c9c9c9;
	}
}
@media only screen and (max-width:320px) and (min-width:240px){
	.templatemo-project-box img
	{
	    height: auto;
	    width: 100%;
		display:block;
		margin:0 auto;
	}
	.templatemo-project-box {
	    height: auto;
	    width: 100%;
		display:block;
		margin:0 auto;
	}
	.templatemo-project-gallery
	{
		width:100%;
		padding:0 0;
	}

	.templatemo-project-gallery li {
	    margin:1em;
		float:none;
	}
	.project-overlay h5
	{
		font-size:1em;
		margin-bottom:0.5em;
	}

	.project-overlay h4
	{
		font-size:2.5em;
	}
	
	.project-overlay {
	    padding-top:2em;
	}
	.showreel-vid-caption
	{
		font-size:1em;
	}
	.showreel-video-thumb
	{
		margin-bottom:1em;
		border-bottom:1px dotted #c9c9c9;
	}
}