/* ------------------------------------------------
   The Whisky Exchange
   Designed and Built by The Whisky Exchange
   All Rights Reserved

   TWE Box

   Content:
   Container
   Border
   Image
   Content
   Styles
   Fonts
   Types
   ------------------------------------------------ */
/* ------------------------------------------------
   Container
   ------------------------------------------------ */
.box {
	display: block;
	position: relative;
	overflow: hidden;
	text-align: left;
}

/* ------------------------------------------------
   Border
   ------------------------------------------------ */
.box-border {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border: 1px solid #ccc;
	z-index: 40;
}
.box-border:after {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 5px solid #fff;
	z-index: 39;
}
@media (min-width: 768px) {
	.box-border:after {
		border: 10px solid #fff;
	}
}

/* ------------------------------------------------
   Image
   ------------------------------------------------ */
.box-image {
	display: block;
	width: 100%;
	height: auto;
}

/* ------------------------------------------------
   Content
   ------------------------------------------------ */
/* Container */
.box-content {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 10px 11px 11px;
	background: #fff;
	font-size: 0.7em;
	color: #000;
	z-index: 38;
}
@media (min-width: 980px) {
	.box-content {
		font-size: 0.85em;
	}
}
@media (min-width: 1500px) and (min-height: 900px) {
	.box-content {
		font-size: 1em;
	}
}
/* Text */
.box-content .meta {
	display: block;
	font-family: 'Oswald','Lato',arial,sans-serif;
	font-size: 0.9em;
	letter-spacing: 1px;
	line-height: 1.1;
	text-transform: uppercase;
	color: #bbac78;
}
.box-content .title {
	margin-top: 0.15em;
	font-family: 'Cinzel',times,serif;
	font-size: 1.8em;
	font-weight: 400;
	letter-spacing: 2px;
	line-height: 1.1;
	text-transform: uppercase;
	color: #333333;
}
.box-content .description {
	display: block;
	font-size: 1.1em;
	color: #8b8b8b;	
}
.box-content .icon {
	height: 15px;
	width: 25px;
	background: #fff;
	font-size: 15px;
	line-height: 15px;
}
@media (min-width: 768px) {
	.box-content .icon {
		height: 23px;
		width: 30px;
		font-size: 23px;
		line-height: 23px;
	}
}
@media (min-width: 1500px) and (min-height: 900px) {
	.box-content .icon {
		height: 30px;
		width: 45px;
		font-size: 30px;
		line-height: 30px;
	}
}

/* ------------------------------------------------
   Styles
   ------------------------------------------------ */
/* Style 1 - Standard (light grey and white bordered box) */
.box-style1 .box-border {
	border: 1px solid #ccc;
}
.box-style1 .box-border:after {
	border: 5px solid #fff;
}
.box-style1 .box-content {
	background: #fff;	
	color: #000;
}
.box-style1 .box-content .title {
	color: #333;
}
.box-style1 .box-content .meta {
	color: #bbac78;
}
@media (min-width: 768px) {
	.box-style1 .box-border:after {
		border: 10px solid #fff;
	}
}

/* Style 2 - Black (black bordered box) */
.box-style2 .box-border {
	border: 1px solid #000;
}
.box-style2 .box-border:after {
	border: 5px solid #000;
}
.box-style2 .box-content {
	background: #000;	
	color: #fff;
}
.box-style2 .box-content .title {
	color: #fff;
}
.box-style2 .box-content .meta {
	color: #bbac78;
}
@media (min-width: 768px) {
	.box-style2 .box-border:after {
		border: 10px solid #000;
	}
}

/* Style 3 - Blog (light grey and white bordered box with orange meta) */
.box-style3 .box-border {
	border: 1px solid #ccc;
}
.box-style3 .box-border:after {
	border: 5px solid #fff;
}
.box-style3 .box-content {
	background: #fff;	
	color: #000;
}
.box-style3 .box-content .title {
	color: #333;
}
.box-style3 .box-content .meta {
	padding: 15px 5px 5px;
	background: #ff7010;
	color: #fff;
}
@media (min-width: 768px) {
	.box-style3 .box-border:after {
		border: 10px solid #fff;
	}
}

/* Style 4 - Grey (grey bordered box) */
.box-style4 .box-border {
	border: 1px solid #f2efe6;
}
.box-style4 .box-border:after {
	border: 5px solid #f2efe6;
}
.box-style4 .box-content {
	background: #f2efe6;	
	color: #000;
}
.box-style4 .box-content .title {
	color: #333;
}
.box-style4 .box-content .meta {
	color: #ff7010;
}
@media (min-width: 768px) {
	.box-style4 .box-border:after {
		border: 10px solid #f2efe6;
	}
}

/* Style 5 - Focus On (light grey and white bordered box with purple meta) */
.box-style5 .box-border {
	border: 1px solid #ccc;
}
.box-style5 .box-border:after {
	border: 5px solid #fff;
}
.box-style5 .box-content {
	background: #fff;	
	color: #000;
}
.box-style5 .box-content .title {
	color: #333;
}
.box-style5 .box-content .meta {
	padding: 15px 5px 5px;
	background: #6d004d;
	color: #fff;
}
@media (min-width: 768px) {
	.box-style5 .box-border:after {
		border: 10px solid #fff;
	}
}

/* Style 6 - Used for float box */
.box-style6 .box-border {
	border: 1px solid #ccc;
}
.box-style6 .box-border:after {
	border: 5px solid #fff;
}
.box-style6 .box-content {
	background: none;	
	color: #562345;
}
.box-style6 .box-content-outer {
	background: #fff;
}
.box-style6 .box-content .title {
	color: #562345;
}
.box-style6 .box-content .meta {
	color: #bbac78;
}
@media (min-width: 768px) {
	.box-style6 .box-border:after {
		border: 10px solid #fff;
	}
}


/* ------------------------------------------------
   Fonts
   ------------------------------------------------ */
/* Font 1 - Cinzel Title */
.box-font1 .box-content .title {
	font-family: 'Cinzel',times,serif;
	font-size: 1.8em;
	letter-spacing: 2px;
}

/* Font 2 - Oswald Title */
.box-font2 .box-content .title {
	font-family: 'Oswald','Lato',arial,sans-serif;
	font-size: 1.1em;
	letter-spacing: 1px;
}

/* Font 3 - Rouge Script Title */
.box-font3 .box-border:after {
	border-bottom-width: 6px;
}
.box-font3 .box-content {
	padding-bottom: 7px;
}
.box-font3 .box-content .title {
	margin: -0.08em 0 0 0.08em;
	font-family: 'Rouge Script', times, serif;
	font-size: 3.5em;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
}

/* Font 4 - Lato Meta + Cinzel Title */
.box-font4 .box-content .meta {
	font-family: 'Lato',arial,sans-serif;
	font-size: 1.1em;
}
.box-font4 .box-content .title {
	margin-top: 0.5em;
	font-family: 'Cinzel',times,serif;
	font-size: 1.8em;
	letter-spacing: 2px;
}
.box-font4 .box-content .description {
	margin-top: 0.3em;
}

/* Font 5 - Lato Title */
.box-font5 .box-content .title {
	margin: 0;
	font-family: 'Lato',arial,sans-serif;
	font-size: 1em;
	letter-spacing: 0.11em;
	line-height: 1.3;
}
/* ------------------------------------------------
   Types
   ------------------------------------------------ */
/* Split */
.box-split .box-content {
	bottom: 0;
	left: auto;
	right: 0;
	width: 50%;
	height: 100%;
	padding: 11px 11px 11px 10px;
}
.box-split.box-font1 .box-content .title {
	margin-top: 0.3em;
}
.box-split.box-font1 .box-content .description {
	display: none;
}
@media (min-width: 400px) {
	.box-split.box-font1 .box-content .description {
		display: block;
	}	
}

/* Inset */
.box-inset .box-content {
	bottom: 10px;
	left: auto;
	right: 10px;
	width: auto;
	max-width: 50%;
	max-width: calc(50% - 20px);
}
@media (min-width: 768px) {
	.box-inset .box-content {
		bottom: 20px;
		right: 20px;
	}
}

/* Float */
.box-float .box-content {
	bottom: 5px;
	padding: 0 5px;
	text-align: center;
}
@media (min-width: 768px) {
	.box-float .box-content {
		bottom: 10px;
		padding: 0 10px;
	}
}
@media (min-width: 960px) {
	.box-float .box-content {
		bottom: 20px;
	}
}
/*.box-float .box-content {
	bottom: 5px;
	left: 5px;
	right: 5px;
	width: auto;
	padding: 3px;
	text-align: center;
}
@media (min-width: 768px) {
	.box-float .box-content {
		bottom: 10px;
		left: 10px;
		right: 10px;
		padding: 5px;
	}
}
@media (min-width: 960px) {
	.box-float .box-content {
		padding: 10px;
	}
}*/
.box-float .box-content-outer {
	display: inline-block;
	max-width: 100%;
	min-width: 65%;
	padding: 3px;
}
@media (min-width: 768px) {
	.box-float .box-content-outer {
		padding: 5px;
	}
}
@media (min-width: 960px) {
	.box-float .box-content-outer {
		padding: 10px;
	}
}
.box-float .box-content-inner {
	padding: 5px;
	border: 1px solid #ccc;
	/*overflow: hidden;*/
}
@media (min-width: 768px) {
	.box-float .box-content-inner {
		padding: 10px;
	}
}
.box-float .box-content .meta,
.box-float .box-content .description {
	display: none;
}
.box-float .box-content .icon {
	margin: -6px auto 0;
}
@media (min-width: 768px) {
	.box-float .box-content .icon {
		margin: -11px auto 0.2em;
	}
}