/* 

	Estilo Portifolio / Cases

*/





body .st-container {

	height: auto;

}



header{

	/*background-color: rgba(0,0,0,.12);

    border-bottom: 1px solid #cccccc;	

    */

    background-color: #333;

}

#main_header { position:fixed !important; }

#main_header h1{ margin:-30px -10px;}

section.cases{

	padding-top: 110px;

	background-color: #ffffff;

}



.cases article {	

	padding: 5% 0;

}









.cases article h2{

	color: #303030;

	font-family: 'Lato';

	font-size: 60px;

	margin-bottom: 1%;

}



.cases article p{

	color: rgba(47,47,47,.5);

	font-family: 'Lato';

	font-weight: 400;

	font-size: 16px;

	line-height: 1.6;

	max-width: 550px;

	margin: 0 auto;

}



.cases .row-item{

	width: 100%;

}



.cases .row-item .item{

	width: 33.3%;

	height: 380px;

	display: inline-block;

	float: left;

	position: relative;

	text-align: center; 

	background-position: top center;

	background-repeat: no-repeat;

	background-size: auto 100%;

	transition: all .35s;

}





.cases .row-item .item:nth-child(3n+2){

	width: 33.4%;

}



.cases .row-item .item a{

	display: block;

	width: 100%;

	height: 100%;

	position: absolute;

	top: 0;

	left: 0;

	z-index: 20;

}



.cases .row-item .item:hover:after{	

	opacity: 1;

	transform: scale(1);

}



.cases .row-item .item::after{

	content: "";

	width: 100%;

	height: 230px;

	display: block;

	background: linear-gradient(to top, rgba(0,0,0,1) -12%, rgba(0,0,0,0) 95%);

	opacity: .65;

	transition: opacity .35s, height .35s;

	position: absolute;

	bottom: 0;

	left: 0;

}

.cases .row-item .item:hover::after{

	opacity: .9;

	height: 380px;

}



.cases .row-item div {

	height: 380px;

	vertical-align: bottom;

	position: relative;

	z-index: 10;

}



.cases .row-item .item:hover {

	background-size: auto 110%;

}



.cases .row-item .item:hover h3{

	opacity: 1;

	transform: translate3d(0,-15px,0);

}



.cases .row-item .item:hover span{

	opacity: 1;

	transform: translate3d(0,-10px,0);

}







.grid {

	position: relative;

	clear: both;

	list-style: none;

	text-align: center;

}

				@media screen and (min-width: 1900px) {.grid {text-align: center;margin:  0 auto;}}



/* Common style */

.grid figure {

	position: relative;

	float: left;

	overflow: hidden;

	width: 33.3333%;

	height: auto;

	min-height:447px;

	background-color: #fff;

	text-align: center;

	cursor: pointer;

}

				@media screen and (min-width:1900px) {.grid figure {display: inline-block;max-width: 640px;width: 24.99%;}}



.grid figure img {

	display: block;

	width: 100%;

	position: absolute;

	z-index: 0;

	top: 0;

	left: 0;

	/*left: 50%;*/

	height: auto;

	margin-left: 0;

	/*margin-left: -321px;*/

}



.grid figure figcaption {

	padding: 2em;

	color: #FFFFFF;	

	font-size: 1.25em;

	-webkit-backface-visibility: hidden;

	backface-visibility: hidden;

}



.grid figure figcaption::before,

.grid figure figcaption::after {

	pointer-events: none;

}



.grid figure figcaption,

.grid figure figcaption > a {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

}


.grid figure figcaption > a {

	z-index: 80;

	text-indent: 200%;

	white-space: nowrap;

	font-size: 0;

	opacity: 0;

}



.grid figure h2 {

	font-size: 30px;

	text-transform: uppercase;

	font-family: 'Lato';

}



.grid figure h2 span {

	font-family: 'Lato';

}



.grid figure h2,

.grid figure p {

	margin: 0;

}



.grid figure p {

	font-family: 'Lato';

	font-size: 13px;

}
*/




/*---------------*/

/***** Effect *****/

/*---------------*/



figure.effect-sadie figcaption::before {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background:      -o-linear-gradient(rgba(72,76,97,0) 0%, rgba(0,0,0,0.75) 75%);

	background: -webkit-linear-gradient(rgba(72,76,97,0) 0%, rgba(0,0,0,0.75) 75%);

	background:         linear-gradient(rgba(72,76,97,0) 0%, rgba(0,0,0,0.75) 75%);

	content: '';

	opacity: 0.7;

			transform: translate3d(0,12%,0);

	-webkit-transform: translate3d(0,12%,0);

}



figure.effect-sadie figcaption::before,

figure.effect-sadie p {

	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

	transition: opacity 0.35s, transform 0.35s;

}



figure.effect-sadie:hover figcaption::before{

	opacity: 0.88;

	-webkit-transform: translate3d(0,0,0);

	transform: translate3d(0,0,0);

}

figure.effect-sadie:hover p {

	opacity: 1;

	-webkit-transform: translate3d(0,0,0);

	transform: translate3d(0,0,0);

}



figure.effect-sadie img {

	-webkit-transition: -webkit-transform 0.35s;

	transition: transform 0.35s;

}



figure.effect-sadie h2 {

	position: absolute;

    left: 0;

	/*bottom: 8%;*/

	width: 100%;

	color: #ffffff;

	text-shadow: 1px 1px 2px rgba(0,0,0,0.25);

	-webkit-transition: -webkit-transform 0.35s, color 0.35s;

	transition: transform 0.35s, color 0.35s;

	-webkit-transform: translate3d(0,-50%,0);

	transform: translate3d(0,-50%,0);

}



figure.effect-sadie p {

	position: absolute;

	bottom: 8px;

	left: 0;

	padding: 0 1em 2em;

	width: 100%;

	opacity: 0;

	-webkit-transform: translate3d(0,12px,0);

	transform: translate3d(0,12px,0);

}



figure.effect-sadie:hover h2 {

			transform: translate3d(0,-100%,0) translate3d(0,-8px,0);

	-webkit-transform: translate3d(0,-100%,0) translate3d(0,-8px,0);

}



figure.effect-sadie:hover img {	

 		    transform: scale3d(1.15,1.15,1);

	-webkit-transform: scale3d(1.15,1.15,1);

}






/* Media queries */



@media only screen and (max-width: 1024px) {

	.cases article h2 {

		font-size: 54px;

	}

	section.cases {

		padding-top: 60px;

	}

	.grid figure {

		height: 300px;

	}

	.grid figure h2 {

		padding: 0 10px;

		font-size: 26px;

	}

	.grid figure p {

		font-size: 12px;

	}

}



@media only screen and (max-width: 375px) {

.grid figure {



    height: 319px!important;

    min-height: 319px!important;

}

}

@media (min-width:376px) and (max-width: 410px) {

.grid figure {



   

    min-height: 425px!important;

}

}



@media (min-width:411px) and (max-width: 767px) {

.grid figure {

    min-height: 411px!important;

}

}

@media (min-width:768px) and (max-width: 900px) {

.grid figure {

    min-height: 381px!important;

}

}

@media (min-width:901px) and (max-width: 1024px) {

.grid figure {

    min-height: 340px!important;

}

}



@media only screen and (max-width: 800px) {

	.cases article h2 {

		font-size: 48px;

	}

	.grid figure {

		width: 50%;

	}

}



@media only screen and (max-width: 600px) {

	.grid figure {

		width: 100%;

		height: 380px;

		min-height: 380px;

	}

}



@media only screen and (max-width: 480px) {

	.cases article {

		padding: 40px 0;

	}

	.cases article h2 {

		font-size: 48px;

		margin-bottom: 10px;

	}

	.cases article p {

		padding: 0 10px;

		font-size: 14px;

		line-height: 1.6;

	}

}