html,
body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 16px;
}

body {
	font-family:'Whitney SSm A','Whitney SSm B',Arial,sans-serif;
	font-size: 16px;
}

html.no-picture picture{
	display: none; /* Hide image and fallback when it's not loading picture */
}

html.picture .badge-region {
/*	background: none !important; */ /* Hide background image when picture tag is supported */
}

.badge-region {
	display: block;
	width: 100%;
	height: 100%;	
	text-decoration: none;
	position: relative;
	
	overflow: hidden;
}

.badge-bg {
	width: 100%;
	height: 100%;
	
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	
	position: absolute;	
	
	-webkit-transition: -webkit-transform 0.5s ease; /* Safari and Chrome */
    -moz-transition: transform 0.5s ease; /* Firefox */
    -o-transition: transform 0.5s ease; /* IE 9 */
    -ms-transition: transform 0.5s ease; /* Opera */
    transition: transform 0.5s ease;
}

.badge-region:hover .badge-bg{
	-webkit-transform:scale(1.2); /* Safari and Chrome */
    -moz-transform:scale(1.2); /* Firefox */
    -ms-transform:scale(1.2); /* IE 9 */
    -o-transform:scale(1.2); /* Opera */
    transform:scale(1.2);	
    
    -webkit-transition: -webkit-transform 5s ease; /* Safari and Chrome */
    -moz-transition: transform 5s ease; /* Firefox */
    -o-transition: transform 5s ease; /* IE 9 */
    -ms-transition: transform 5s ease; /* Opera */
    transition: transform 5s ease;
		
}
.badge-text {
	color: #FFFFFF;
	position: absolute;
	
	bottom: 0;
	left: 0;
	
	margin: 0 30px 20px 20px;
}

.badge-heading {
	border: 1px solid #FFFFFF;
	border-width: 0 0 1px 0;
	display: inline;	
	text-transform: uppercase;
	font-style: italic;
	font-size: 0.9375em; /* 15px */
}

.badge-title {
	margin-top: 20px; 
	font-size: 1.875em; /* 30px */
	font-weight: 600;
	line-height: 1.1333333em; /* 34px */
	letter-spacing: 1px;
	text-transform: uppercase;
}

.badge-description {
	font-size: 0.9375em; /* 15px */
	line-height: 1.6em; /* 24px */
	margin-top: 0.666667em; /* 10px */
	margin-bottom: 28px; /* -2px from read more */
}

.badge-read-more {
	border-top: 1px solid #FFFFFF;
	display: inline;
	font-size: 0.9375em; /* 15px */
	padding-top: 2px;	
}
.badge-read-more:hover {
	text-decoration: none;	
}

.gradient {
	height: 100%;
	z-index: 1000;
	position: relative;
}
.gradient.black {
	background: -moz-linear-gradient(transparent, #222);
	background: -webkit-linear-gradient(transparent, #222);
	background: -o-linear-gradient(transparent, #222);
	background: linear-gradient(transparent, #222);
}

@media (max-width: 300px), (max-height: 300px) {
		
	.badge-heading,
	.badge-read-more,
	.badge-description {
		font-size: 0.8125em; /* 13px */
	}
	.badge-description {
		line-height: 1.53846154em;	/* 20px */
	}
	
	.badge-title {
		font-size: 1.25em; /* 20px */
		line-height: 1.2em; /* 24px */
	}
}

@media (max-width: 240px) and (max-height: 300px),
		 (max-height: 240px) and (max-width: 300px),
		 (max-height: 160px) {
	.badge-region {
		background-color: #FFFFFF;
		border: 1px solid #002145;	
		box-sizing: border-box;
		transition: background-color 0.5s ease;
	}
	
	.badge-region .gradient {
		background: none;	
	}
	
	.badge-bg {
		background-image: none !important;	
	}
	
	.badge-region:hover {
		background-color: #F6F6F6;
	}
	
	.badge-text {
		overflow-y: scroll;
		height: 90%;
		width: 90%;
		margin: 0;
		padding: 5%;
	}
	
	.badge-text,
	.badge-heading,
	.badge-read-more,
	.badge-description {
		color: #002145;
		border-color: #002145;	
	}
}