/* ---------------------------------------------------------------------------------------------------- */
/* IMAGES																								*/

/* ------------------------------------------------------------ */
/* IMAGES - FEATURES											*/

.img-features {
	margin: 0 -6px;
}

p+.img-features {
	margin-top: 1.5em;
}

.img-features img {
	max-width: 100%;
	display: block;
}

/* ------------------------------------------------------------ */
/* IMAGES - RESPONSIVE											*/

.img-responsive {
	position: relative;
}

.img-responsive img {
	max-width: 100%;
	border-radius: 3px;
	box-shadow: 0 20px 30px -15px rgba(0, 0, 0, 0.6);
	display: block;
}

.img-responsive .img-text {
	position: absolute;
	bottom: 10px;
	left: 10px;
	opacity: 0.5;
	color: #ffffff;
	font-size: 0.833em;
}

/* ---------------------------------------------------------------------------------------------------- */
/* VIDEO																								*/

.video-responsive {
	height: 0;
	box-shadow: 0 20px 30px -15px rgba(0, 0, 0, 0.6);
	margin: 0 auto 0 auto;
	padding-bottom: 56.2%;
	border-radius: 4px;
	position: relative;
	z-index: 10;
	overflow: hidden;
}

.video-responsive iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

/* ---------------------------------------------------------------------------------------------------- */
/* ICONS																								*/

.icon-xs {
	width: 20px;
	height: 20px;
	display: inline-block;
	vertical-align: middle;
	fill: none;
	stroke: #55bef2;
}

.icon-sm {
	width: 40px;
	height: 40px;
	display: inline-block;
	vertical-align: middle;
	fill: none;
	stroke: #b2b2b2;
}

.icon-sm.active {
	fill: none;
	stroke: #55bef2;
}

.icon-lg {
	width: 60px;
	height: 60px;
	display: inline-block;
	vertical-align: middle;
	fill: none;
	stroke: #55bef2;
}

/* ---------------------------------------------------------------------------------------------------- */
/* PRELOADER																							*/

.cm-preloader {
	display: inline-block;
	position: relative;
	vertical-align: super;
}

.cm-preloader-dark {
	width: 20px;
	height: 20px;
	background: url(../images/layout/preloader-dark.svg) center center no-repeat;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -10px 0 0 -10px;
	-webkit-animation: preloader-spin .20s linear infinite;
	animation: preloader-spin .20s linear infinite;
}

.cm-preloader-light {
	width: 20px;
	height: 20px;
	background: url(../images/layout/preloader-light.svg) center center no-repeat;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -10px 0 0 -10px;
	-webkit-animation: preloader-spin .20s linear infinite;
	animation: preloader-spin .20s linear infinite;
}

@keyframes preloader-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---------------------------------------------------------------------------------------------------- */
/* ANIMATIONS																							*/

/* ------------------------------------------------------------ */
/* ANIMATION - FADE IN											*/

.anim-fade-in {
	-webkit-animation-name: anim-fade-in;
	animation-name: anim-fade-in;
	animation-fill-mode: both;
	animation-duration: 2s;
}

@-webkit-keyframes anim-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes anim-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* ------------------------------------------------------------ */
/* ANIMATION - FADE OUT											*/

.anim-fade-out {
	-webkit-animation-name: anim-fade-out;
	animation-name: anim-fade-out;
	animation-fill-mode: both;
}

@-webkit-keyframes anim-fade-out {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes anim-fade-out {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/* ------------------------------------------------------------ */
/* ANIMATION - FADE IN UP										*/

.anim-fade-in-up {
	-webkit-animation-name: anim-fade-in-up;
	animation-name: anim-fade-in-up;
	animation-fill-mode: both;
	animation-duration: 0.6s;
}

@-webkit-keyframes anim-fade-in-up {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 30%, 0);
		transform: translate3d(0, 30%, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes anim-fade-in-up {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 30%, 0);
		transform: translate3d(0, 30%, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

/* ------------------------------------------------------------ */
/* ANIMATION - ZOOM IN											*/

.anim-zoom-in {
	-webkit-animation-name: anim-zoom-in;
	animation-name: anim-zoom-in;
	animation-fill-mode: both;
}

@-webkit-keyframes anim-zoom-in {
	from {
		opacity: 0;
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
		transform: scale3d(0.3, 0.3, 0.3);
	}

	50% {
		opacity: 1;
	}
}

@keyframes anim-zoom-in {
	from {
		opacity: 0;
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
		transform: scale3d(0.3, 0.3, 0.3);
	}

	50% {
		opacity: 1;
	}
}

/* ------------------------------------------------------------ */
/* ANIMATION - BOUNCE IN										*/

.anim-bounce-in {
	animation-name: anim-bounce-in;
	animation-duration: 0.8s;
	animation-timing-function: ease-in-out;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
}

@keyframes anim-bounce-in {
	0% {
		opacity: 0;
		-webkit-transform: scale(.3);
		transform: scale(.3);
	}

	50% {
		opacity: 1;
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}

	70% {
		opacity: 1;
		-webkit-transform: scale(0.98);
		transform: scale(0.98);
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@media only screen and (min-width: 768px) {}

@media only screen and (min-width: 1024px) {
	/* ---------------------------------------------------------------------------------------------------- */
	/* IMAGES																								*/

	/* ------------------------------------------------------------ */
	/* IMAGES - RESPONSIVE											*/

	.img-responsive img {
		box-shadow: 0 30px 40px -20px rgba(0, 0, 0, 0.6);
	}

	/* ---------------------------------------------------------------------------------------------------- */
	/* VIDEO																								*/

	.video-responsive {
		box-shadow: 0 30px 40px -20px rgba(0, 0, 0, 0.6);
	}
}

@media only screen and (min-width: 1440px) {}

@media only screen and (min-width: 1920px) {
	/* ---------------------------------------------------------------------------------------------------- */
	/* IMAGES																								*/

	/* ------------------------------------------------------------ */
	/* IMAGES - RESPONSIVE											*/

	.img-responsive img {
		box-shadow: 0 40px 60px -30px rgba(0, 0, 0, 0.6);
	}
}