/* ============================================================
   05-boxes.css — Box minimal, box creative, box CTA
   ============================================================ */

/* Box Minimal */
.box-minimal {
	display: flex;
	margin-left: -15px;
	text-align: left;
}
.box-minimal > * { margin-left: 15px; }
.box-minimal-title { font-weight: 500; }
.box-minimal-icon {
	position: relative;
	top: 4px;
	min-width: 26px;
	font-size: 24px;
	line-height: 1;
	color: #354879;
}
* + .box-minimal { margin-top: 30px; }
* + .box-minimal-title { margin-top: 10px; }

@media (max-width: 575.98px) {
	.box-minimal { max-width: 360px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 768px) {
	.box-minimal { padding-right: 15px; margin-left: -30px; }
	.box-minimal > * { margin-left: 30px; }
}
@media (min-width: 1200px) {
	.box-minimal-icon { top: 0; font-size: 36px; }
}

/* Box Creative */
.box-creative {
	max-width: 330px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	cursor: default;
}
.box-creative:hover .box-creative-icon { color: #fff; }
.box-creative:hover .box-creative-icon::after {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 0);
}
.box-creative-icon {
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.8em;
	height: 2.8em;
	border: 2px solid #d3d5db;
	border-radius: 50%;
	font-size: 24px;
	line-height: 1;
	color: #354879;
}
.box-creative-icon::before { position: relative; z-index: 2; }
.box-creative-icon::after {
	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: -1;
	border-radius: inherit;
	background: #354879;
	border-color: #354879;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: .15s ease-in;
	transform: scale3d(1.05, 1.05, 1.05);
}
* + .box-creative-title { margin-top: 10px; }

@media (min-width: 768px) {
	.box-creative-icon { font-size: 30px; }
	* + .box-creative-title { margin-top: 15px; }
}
@media (min-width: 1200px) {
	.box-creative-icon { width: 2.4em; height: 2.4em; font-size: 40px; }
	* + .box-creative-title { margin-top: 24px; }
}

/* Box CTA Thin */
div.box-cta-thin {
	display: inline-table;
	text-align: center;
	vertical-align: middle;
	margin-bottom: -25px;
	margin-left: -50px;
}
div.box-cta-thin:empty { margin-bottom: 0; margin-left: 0; }
div.box-cta-thin > * { display: inline-block; margin: 0 0 25px 50px; vertical-align: middle; }
div.box-cta-thin .title { font-weight: 500; }
