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


.grid {
	position: relative;
	margin: 0 auto;
	padding: 1em 0 4em;
	max-width: 75em;
	list-style: none;
	text-align: center;
}



/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	/*margin: 10px 1%;*/
	margin:1%;
	min-width: /*250px;*/25%;
	max-width: /*375px;*/31.333%;
	max-height: 255px;
	/*max-width:500px;
	max-height:480px;*/
	/*width: 48%;*/
	height:auto;
	/*background: #3085a3;*/
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	/*opacity: 0.8;*/
}

.grid figure figcaption {
	padding: 1em 2em 2em 2em;
	color: #fff;
	text-transform: uppercase;
	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%;
	color:#fff;
	text-decoration:none;
	font-size:1.25em;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	/*word-spacing: -0.15em;*/
	font-weight: 300;
	color:white!important;
	/*text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.3);*/
	font-family:'Roboto';
	
	font-size:100%;
	
}

.grid figure h2 span {
	font-weight: 300!important;
	color:white!important;
	/*text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.3);*/
}

.grid figure h2,
.grid figure p {
	margin: 0!important;
	padding:0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

.grid figure figcaption {
	padding-left:0;
}

.grid figure figcaption h2{
	padding-left:.85em;
	/*text-shadow:2px 3px 5px #000*/
	text-shadow: 1px 1px 7px #000
}

.grid figure h2.gradient-h2{background:#A9C85A; width:100%; background: linear-gradient(to left, rgba(169,200,90,0), rgba(169,200,90,50)); /* Standard syntax (must be last) */ }
.grid figure h2.solid-h2{background:#A9C85A; /* Standard syntax (must be last) */ }

.grid figure h2.width-55{width:55%}
.grid figure h2.width-75{width:60%}
.grid figure h2.width-85{width:85%}
.grid figure h2.width-40{width:40%}

/* Individual effects */


/*-----------------*/
/***** Goliath *****/
/*-----------------*/

.grid figure.effect-goliath{
	min-width:75px;
	max-width:200px
}

figure.effect-goliath {
	background: transparent;
}

figure.effect-goliath img,
figure.effect-goliath h2 {-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-goliath img {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	/*opacity: 0.5;
    filter: alpha(opacity=50); *//* For IE8 and earlier */
}

figure.effect-goliath h2,
figure.effect-goliath p {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 5px 0;
	background: #0092D1;
	text-align:center;
	max-width:200px;
	min-width:100px;
	width:100%;
	padding-left:0!important;
}

figure.effect-goliath p {
	text-transform: none;
	font-size: 90%;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,50px,0);
	transform: translate3d(0,50px,0);
}

figure.effect-goliath:hover img {
	-webkit-transform: translate3d(0,-15px,0);
	transform: translate3d(0,-15px,0);
	
	
}

figure.effect-goliath:hover h2 {
	/*-webkit-transform: translate3d(0,-100px,0);
	transform: translate3d(0,-100px,0);*/
}

figure.effect-goliath:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.grid figure.effect-goliath figcaption {
	padding: 0;
	width:100%;
	color: #fff;
	text-transform: uppercase;
	font-size: .85em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background:transparent
}


/*-----------------*/
/*****   *****/
/*-----------------*/
.grid figure.effect-winston{
	/*width:100%*/
}

figure.effect-winston {
	background: #3498db;
	text-align: left;
	/*box-shadow:3px 6px #B3C50E;*/ 
}

figure.effect-winston img {
	-webkit-transition: opacity 0.45s;
	transition: opacity 0.45s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-winston figcaption::before {
	box-sizing: border-box;
	position: absolute;
	top: -35pt;
	left: -30pt;
	width: 100%;
	height: 100%;
	background: url('http://www.ivc.edu/IVCBase/img/layout/18/triangle256.svg') no-repeat center center;
	background-size: 100% 100%;
	content: '';
	-webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
	transition: opacity 0.45s, transform 0.45s;
	-webkit-transform: rotate3d(0,0,1,45deg);
	transform: rotate3d(0,0,1,45deg);
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
	
}

.grid figure.effect-winston figcaption,
.grid figure.effect-winston figcaption > a {
	position: absolute;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;
	color:#fff;
	text-decoration:none;
	font-size:1.1em;
}


figure.effect-winston h2 {
	-webkit-transition: -webkit-transform 0.35s;	transition: transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
	text-align: left;
	font-size:146%;
	font-family:'Roboto';
	padding-top:0;

	}

figure.effect-winston p {
	position: absolute;
	right: 3%;
	bottom: 24%;
	padding: 0 1.5em 3% 0;
}

figure.effect-winston a {
	margin: 0 10px 0 0;
	color: #5d504f;
	font-size: 170%;
}

figure.effect-winston a:hover,
figure.effect-winston a:focus {
	color: #cc6055;
}

figure.effect-winston p a i {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,50px,0);
	transform: translate3d(0,50px,0);
}

figure.effect-winston:hover img {
	opacity: 0.6;
}

figure.effect-winston:hover h2 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-winston:hover figcaption::before {
	opacity: 0.7;
	-webkit-transform: rotate3d(0,0,1,20deg);
	transform: rotate3d(0,0,1,20deg);
}

span.custom-winston { 	font-weight: 100;
	color:white!important;
	text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.3);
	font-family:'Roboto';
	text-transform:capitalize;
	font-size:50%;
}

figure.effect-winston:hover p i {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-winston:hover p a:nth-child(3) i {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-winston:hover p a:nth-child(2) i {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-winston:hover p a:first-child i {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

.grid figure.effect img {
	position: relative;
	display: inline-block;
	min-height: 100%;
	max-width: 100%;
	/*opacity: 0.8;*/
}

.grid figure.effect-winston figcaption{
	/*padding:.85em 2em 5em 2em;*/
	padding:0 2em 5em 0em;
}

/*--Social Media Font Awesome Overide for WINSTON--*/
/*.fa-twitter-square:before {	content: "\f081"; padding-bottom:2em}
.fa-twitter:before {	content: "\f099"; padding-bottom:2em}
.fa-facebook-square:before {content: "\f082"}
.fa-instagram:before {	content: "\f16d"}
*/
/*
.fa-fw {*/
	/*width: 1.28571429em;*/
	/*width:1.5em;
	text-align: center
}

.fa {
	display: inline-block;
	font: normal normal 22pt/1em FontAwesome!important;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}
.fa-lg {
	font-size: 1.33333333em;
	line-height: .75em;
	vertical-align: -15%
}
*/

/*-----------------*/
/***** Apollo *****/
/*-----------------*/

figure.effect-apollo {
	background: #3498db;
	/*box-shadow:3px 6px #B3C50E;*/
}

figure.effect-apollo img {
	opacity: 0.95;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1.05,1.05,1);
	transform: scale3d(1.05,1.05,1);
}

figure.effect-apollo figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.5);
	content: '';
	-webkit-transition: -webkit-transform 0.6s;
	transition: transform 0.6s;
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}

.grid figure.effect-apollo figcaption,
.grid figure.effect-apollo figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 95%;
	height: 80%;
	color:#fff;
	text-decoration:none;
	font-size:1.1em;
}


figure.effect-apollo p {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 1em!important;
	/*padding: 0 1em;*/
	padding:0 1em!important;
	/*line-height:1.8em;*/
	line-height:2.25em;
	max-width: 350px;
	border-right: 4px solid #fff;
	
	text-align: right;
	opacity: 0;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
	font-size:1.1em;
	/*Added to adjust block format in P*/
	display:block;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start:0;
	-webkit-margin-end:0;
	
}

figure.effect-apollo h2 {
	text-align: left;
	font-size:150%;
	padding-top:0;
}

figure.effect-apollo:hover img {
	opacity: 0.6;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
	
	filter: grayscale(100%);
    -webkit-filter: grayscale(20%);
    -moz-filter:    grayscale(20%);
    -ms-filter:     grayscale(20%);
    -o-filter:      grayscale(20%);
}

figure.effect-apollo:hover figcaption::before {
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
}

figure.effect-apollo:hover p {
	opacity: 1;
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

span.custom-apollo { 	font-weight: 100;
	color:white!important;
	text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.3);
	font-family:'Roboto';
	text-transform:capitalize;
	font-size:80%;
}

figure.effect-apollo a {color:white!important;}



@media screen and (min-device-width: 10em) and (max-width: 50em) {
	.content {
		padding: 0 10px;
		text-align: center;
	}
	.grid {
		padding:0;
	}
	.grid figure {
		display: inline-block;
		float: none;
		margin: 10px auto;
		width: 100%;
		min-width: 150px!important;
		max-width: 250px!important;
		max-height: 180px;
	}
	
	figure.effect-apollo h2, figure.effect-winston h2 {font-size:130%}
	
	
	.grid figure.effect-apollo, .grid figure.effect-winston{width:320px}
	
	figure.effect-winston p {position: absolute; right: 3%; bottom: 29%; padding: 0 1em 3% 0; }

	
	.grid figure.effect-goliath{width:175px;}
	
	.grid figure h2.width-55, .grid figure h2.width-75, .grid figure h2.width-85, .grid figure h2.width-40{width:100%}
	
	#button

}


@media screen and (max-width: 75em) {
/*.grid figure.effect-apollo, .grid figure.effect-winston{max-width:250px;}*/
.grid figure h2.width-85{width:99%}
.grid figure h2 {font-size: 120%}

}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  {
.grid figure.effect-apollo, .grid figure.effect-winston{max-width: none;}

}