/* USED FOR ALL BUTTON STYLES */
.icon-button {
	position:relative;
	cursor:pointer;
	}
.easing {
	transition: all .75s ease-in-out;
	-webkit-transition: all .75s ease-in-out;
	-moz-transition: all .75s ease-in-out;
	}
/* USED FOR HOVER BLACK AND HOVER TEXT */
.button-wrap {
	width:100%;
	position:relative;
	border:1px solid #ccc;
	}
.button-wrap:after {
	content:"";
	display:block;
	padding-bottom:100%;
	}
.button-wrap:hover {
	box-shadow: 0 2px 5px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 2px 5px 1px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 2px 5px 1px rgba(0,0,0,0.1); 	
	}
/* HOVER TEXT STYLES */
.iconbtn-link,
.hover-text h6 {font-family:benton-sans-condensed, sans-serif;}
.hover-text img {max-width:85%;}
.icon-button:hover .hover-text img {max-width:50%;}
.hover-text {
	text-align:center;
	width:calc(100% - 64px);
	height:calc(100% - 64px);
	position:absolute;
	top:32px;
	left:32px;
	padding:80px 0;
	display: flex;
	display: -webkit-flex;
	flex-direction:column;
	-webkit-flex-direction:column;
	justify-content:center;
	-webkit-justify-content:center;
	align-items:center;
	-webkit-align-items:center;
	}
.icon-divider {
	width:100%;
	height:1px;
	background:#cecece;
	margin:32px 0;
	}
.icon-button:hover .icon-divider {
	background:#000;
	margin:20px 0;
	}
.hover-text h6,
.hover-text p {margin:0 auto;}
.hover-text p {
	font-family:"Sentinel SSm A", "Sentinel SSm B", serif;
	color:#000;
	}
.hover-text h6 {
	font-size:20px;
	font-weight:300;
	}
.hover-text .iconbtn-text,
.icon-button:hover .hover-text h6 {display:none;}
.icon-button:hover .hover-text {
	text-align:left;
	justify-content:flex-start;
	-webkit-justify-content:flex-start;
	align-items:flex-start;
	-webkit-align-items:flex-start;
	padding:10px 0;
	}
.icon-button:hover .iconbtn-text {display:flex;}
.iconbtn-link {
	width:calc(100% - 64px);
	text-align:center;
	position:absolute;
	bottom:32px;
	left:32px;
	opacity:0;
	}
.iconbtn-link a {
	color:#006A96;
	text-transform:uppercase;
	font-weight:700;
	position:relative;
	}
.iconbtn-link a:after {
	content: "\f054";
	font-family: 'FontAwesome';
	font-size:14px;
	line-height:100%;
	font-weight:400;
	position:absolute;
	top:3px;
	right:-20px;
	}
.icon-button:hover .iconbtn-link {
	opacity:1;
	transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	}
/* HOVER BLACK STYLES */	
.hover-black {
	text-align:center;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	padding:32px;
	display: flex;
	display: -webkit-flex;
	flex-direction:column;
	-webkit-flex-direction:column;
	justify-content:center;
	-webkit-justify-content:center;
	align-items:center;
	-webkit-align-items:center;
	}
.hover-black:hover {
	background:#000;
	color:#fff;
	}
.circle-wrap {
	background:#000;
	width:90px;
	height:90px;
	margin:0 auto;
	position:relative;
	}
.circle-wrap,
.brand-color {border-radius:50%;}
.circle-icon,
.brand-color {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	}
.circle-icon {z-index:3;}
.brand-color {
	opacity:0;
	z-index:2;
	}
.hover-black:hover .brand-color {opacity:1;}
.hover-black h4,
.hover-black p {margin: 0 auto;} 
.hover-black h4 {
	font-weight:400;
	font-size:32px;
	}
.hover-black p {font-size:16px;}
.brand-color.red {background:#EC008C;}
.brand-color.yellow {background:#FFF200;}
.brand-color.blue {background:#00AEEF;}
/* ICON CORNER STYLES */
.corner-wrap {
	color:#fff;
	width:100%;
	height:100%;
	position:relative;
	z-index:1;
	padding:140px 0 70px 50px;
	display: flex;
	display: -webkit-flex;
	flex-direction:column;
	-webkit-flex-direction:column;
	justify-content:flex-start;
	-webkit-justify-content:flex-start;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex:1;
	}
.corner-wrap.without {padding-top:50px;}
/* EVERYTHING BUT THE TEXT IS ABSOLUTELY POSITIONED */
.line-accent.red {background:#EC008C;}
.line-accent.yellow {background:#FFF200;}
.line-accent.blue {background:#00AEEF;}
.corner-accent.red {background:#EC008C;}
.corner-accent.yellow {background:#FFF200;}
.corner-accent.blue {background:#00AEEF;}
.circle-accent.red {border:1px solid #EC008C;}
.circle-accent.yellow {border:1px solid #FFF200;}
.circle-accent.blue {border:1px solid #00AEEF;}
.corner-icon {
	width:100px;
	height:100px;
	position:absolute;
	top:30px;
	left:0;
	z-index:3;
	}
.circle-accent {
	position:absolute;
	top:142px;
	left:47px;
	width:5px;
	height:5px;
	border-radius:50%;
	}
.corner-wrap.without .circle-accent {top:50px;}
.corner-accent {
	position:absolute;
	height:20px;
	width:calc(100% - 50px);
	bottom:-20px;
	right:0;
	}
.line-accent {
	width:1px;
	height:calc(100% - 126px);
	background:#EC008C;
	position:absolute;
	left:49px;
	top:146px;
	}
.corner-wrap.without .line-accent {
	height:calc(100% - 54px);
	top:54px;
	} 
.corner-link {
	width:calc(100% - 50px);
	position:absolute;
	bottom:44px;
	right:0;
	text-align:center;
	}
.corner-link a {
	font-family: "Tungsten Cond A", "Tungsten Cond B";
	text-transform:uppercase;
	letter-spacing:1px;
	font-size:32px;
	line-height:100%;
	padding:9px 20px;
	color:#fff;
	background:#333;
	display:inline-block;
	}
.corner-link a:hover {}
.corner-link.red a {border:1px solid #EC008C;}
.corner-link.red a:hover {background:#EC008C;}
.corner-link.yellow a {border:1px solid #FFF200;}
.corner-link.yellow a:hover {
	background:#FFF200;
	color:#333;
	}
.corner-link.blue a {border:1px solid #00AEEF;}
.corner-link.blue a:hover {background:#00AEEF;}
/* THE TEXT */
.corner-text {
	position:relative;
	width:100%;
	padding-bottom:60px;
	}
.corner-text p,
.corner-text h4 {
	padding-left:24px;
	font-family: benton-sans-condensed, sans-serif;
	line-height:120%;
	}
.corner-text h4 {
	font-size:50px;
	}
.corner-text p {
	font-size:32px;
	font-weight:500;
	margin:0;
	}

@media screen and (max-width: 900px) {
	.corner-wrap {padding:40px 0 50px 50px;}
	.corner-wrap.without {
		padding-top:50px;
		}
	.corner-icon {
		width:70px;
		height:70px;
		}
	.corner-text {padding-bottom:40px;}
	.corner-text p {
		font-size:22px;
		padding-left:28px;
		}
	.corner-link {
		bottom:24px;
		}
	.corner-link a {
		font-size:25px;
		padding:10px;
		}
	.circle-accent {
		top:105px;
		left:37px;
		}
	.corner-wrap.without .circle-accent {top:50px;}
	.corner-accent {
		height:10px;
		width:calc(100% - 39px);
		bottom:-10px;
		}
	.line-accent {
		height:calc(100% - 100px);
		left:39px;
		top:110px;
		}
	.corner-wrap.without .line-accent {
		height:calc(100% - 54px);
		top:54px;
		} 
}

@media screen and (max-width: 840px) {
	.corner-icon {top:20px;}
	.corner-text {
		padding-top:15px;
		padding-bottom:0;
		}
	.corner-text p {max-width:250px;}
	.corner-text h4 {font-size:32px;}
	.corner-wrap {
		max-width:460px;
		float:right;
		margin-right:-20px;
		}
	.corner-link {bottom:-20px;}
}