/* Template: Kobe - Ebook Landing Page Template
   Author: InovatikThemes
   Version: 1.0.0
   Created: Oct 2017
   Description: Master CSS file
*/

/****************************************
    TABLE OF CONTENTS

01. General Styles 
02. Preloader
03. Navigation
04. Header
05. Download Form 
06. Customers
07. Description
08. Summary
09. Reviews
10. Author
11. Statistics
12. Collection
13. Endorsement
14. Footer
15. Back To Top Button
16. Media Queries
*****************************************/

/*****************************************
Colors:
- Text, navbar bg and footer bg - Dark blue: #373f51 
- Primary color - Blue: #079fdd
- Light gray: #f3f3f3
******************************************/


/******************************/
/*     01. GENERAL STYLES     */
/******************************/
body {
	color: #373f51;
	font: 300 16px/1.5em "Nunito", sans-serif;
}

.h1-header {
	font: 700 46px/1.2em "Raleway", sans-serif;
}

h1 {
	font: 700 38px/1.1em "Raleway", sans-serif;
}

h2 {
	font: 700 30px/1.1em "Raleway", sans-serif;
}

h3 {
	font: 700 24px/1.3em "Raleway", sans-serif;
}

h4 {
	font: 700 20px/1.4em "Raleway", sans-serif;
}

h5 {
	font: 700 16px/1.4em "Raleway", sans-serif;
}

.p-largest {
	font: 300 22px/1.3em "Nunito", sans-serif;
}

.p-large {
	font: 300 19px/1.5em "Nunito", sans-serif;
}

.form-control {
	font: 300 16px/1.5em "Nunito", sans-serif;
}

a {
	color: #079fdd;
}

a:hover {
	color: #373f51;
	text-decoration: none;
}

a.inverse {
	color: #fff;
	opacity: 1;
}

a.inverse:hover {
	color: #079fdd;
}

.button-solid-white,
.button-solid-primary-color {
	display: inline-block;
	max-width: 250px;
	margin-top: 10px;
	padding: 11px 37px 11px 37px;
	border: 1px solid #fff;
	border-radius: 25px;
	background-color: #fff;
	color: #079fdd;
	font: 600 15px/16px "Raleway", sans-serif;
	text-decoration: none;
	transition: border .3s ease, background-color .3s ease, color .3s ease;
}

.button-solid-primary-color {
	border: 1px solid #079fdd;
	background-color: #079fdd;
	color: #fff;
}

.button-solid-white:hover {
	border: 1px solid #fff;
	background-color: transparent;
	color: #fff;
	cursor: grab;
}

.button-solid-primary-color:hover {
	border: 1px solid #079fdd;
	background-color: transparent;
	color: #079fdd;
}

.button-solid-large-white {
	display: inline-block;
	max-width: 250px;
	margin-top: 10px;
	margin-right: auto;
	margin-left: auto;
	padding: 14px 48px 14px 48px;
	border: 1px solid #fff;
	border-radius: 50px;
	background-color: #fff;
	color: #079fdd;
	font: 600 18px/20px "Raleway", sans-serif;
	text-decoration: none;
	transition: border .3s ease, background-color .3s ease, color .3s ease;
}

.button-solid-large-white:hover {
	border: 1px solid #fff;
	background-color: transparent;
	color: #fff;
}

.button-outline-white,
.button-outline-primary-color {
	display: inline-block;
	max-width: 250px;
	margin-top: 10px;
	padding: 11px 37px 11px 37px;
	border: 1px solid #fff;
	border-radius: 25px;
	background-color: transparent;
	color: #fff;
	font: 600 15px/16px "Raleway", sans-serif;
	text-decoration: none;
	transition: border .3s ease, background-color .3s ease, color .3s ease;
}

.button-outline-primary-color {
	border: 1px solid #079fdd;
	color: #079fdd;
}

.button-outline-white:hover {
	background-color: #fff;
	color: #079fdd;
}

.button-outline-primary-color:hover {
	background-color: #079fdd;
	color: #fff;
}

.underline-small-primary-color {
	width: 50px;
	height: 1px;
	margin-top: 6px;
	margin-left: 0px;
	border: none;
	background-color: #079fdd;
	text-align: left;
}

.underline-large-white {
	width: 80px;
	height: 1px;
	margin-top: 13px;
	margin-right: auto;
	margin-left: auto;
	border: none;
	background-color: #fff;
}

.underline-large-primary-color {
	width: 80px;
	height: 1px;
	margin-top: 13px;
	margin-right: auto;
	margin-left: auto;
	border: none;
	background-color: #079fdd;
}

.form-control-input {
	width: 100%;
	height: 45px;
	padding-left: 14px;
	border: 1px solid #52555f;
	border-radius: 1px;	
	background-color: #52555f;
	color: #fff;
	font: 300 15px/1.5em "Nunito", sans-serif;
	-webkit-appearance: none; /* removes inner shadow on form inputs on ios safari */
}

.form-control-submit-button {
	display: block;
	width: 100%;
	height: 46px;
	border: 1px solid #079fdd;
	border-radius: 25px;
	background-color: #079fdd;
	color: #fff;
	font: 600 15px/2.7em "Raleway", sans-serif;
	transition: background-color .3s ease, color .3s ease;
}

.form-control-submit-button:hover {
	background-color: transparent;
	color: #fff;
}

.form-control-input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #fff;
	opacity: 0.7;
}

.form-control-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   	color: #fff;
	opacity: 0.7;
}

.form-control-input::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: #fff;
	opacity: 0.7;
}

.form-control-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
   	color: #fff;
	opacity: 0.7;
}

/* Form Success And Error Message Formatting */
#msgSubmit.h3.text-center.tada.animated.text-success,
#cmsgSubmit.h3.text-center.tada.animated.text-success,
#msgSubmit.h3.text-center.text-danger,
#cmsgSubmit.h3.text-center.text-danger {
	margin-top: 0px;
	margin-bottom: 0px;
	color: #fff;
	font: 300 18px/1.3em "Nunito", sans-serif;
}

#cmsgSubmit.h3.text-center.tada.animated.text-success,
#cmsgSubmit.h3.text-center.text-danger {
	display: block;
}

.help-block.with-errors {
	margin-bottom: 0px;
	color: #ff3d39;
	font-size: 14px;
}

.help-block.with-errors ul {
	margin-bottom: 0px;
}

/* Form Success And Error Message Animation From Animate.css */
@-webkit-keyframes tada {
	from {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	10%, 20% {
		-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		-ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
	}

	30%, 50%, 70%, 90% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}

	40%, 60%, 80% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	}

	to {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes tada {
	from {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}

	10%, 20% {
		-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		-ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
	}

	30%, 50%, 70%, 90% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
	}

	40%, 60%, 80% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		-ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
	}

	to {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

.tada {
	-webkit-animation-name: tada;
	animation-name: tada;
}

.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
/* end of form success and error message animation from Animate.css */

/* Fade-move Animation For Collection Details Lightbox */
/* at start */
.my-mfp-slide-bottom .zoom-anim-dialog {
	opacity: 0;
	transition: all 0.2s ease-out;
	-webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	-ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
}

/* animate in */
.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
	opacity: 1;
	-webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	-ms-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
}

/* animate out */
.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
	opacity: 0;
	-webkit-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	-ms-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
}

/* Dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
	opacity: 0;
	transition: opacity 0.3s ease-out;
}

/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
	opacity: 0.8;
}

/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
	opacity: 0;
}
/* end of fade-move animation for collection details lightbox */

/* Fade Animation For Image Swiper */
@-webkit-keyframes fadeIn {
	from {
	  opacity: 0;
	}
	to {
	  opacity: 1;
	}
}
  
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.fadeIn {
	-webkit-animation: fadeIn 0.6s;
	animation: fadeIn 0.6s;
}

@-webkit-keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

.fadeOut {
	-webkit-animation: fadeOut 0.8s;
	animation: fadeOut 0.8s;
}
/* end of fade animation for image swiper */


/*************************/
/*     02. PRELOADER     */
/*************************/
.spinner-wrapper {
	position: fixed;
	z-index: 999999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(25, 25, 25, 1);
}

.spinner {
	position: absolute;
	top: 50%; /* centers the loading animation vertically one the screen */
	left: 50%; /* centers the loading animation horizontally one the screen */
	width: 60px;
	height: 20px;
	margin: -10px 0 0 -30px; /* is width and height divided by two */ 
	text-align: center;
}

.spinner > div {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 100%;
	background-color: #fff;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0); }
	40% { -webkit-transform: scale(1.0); }
}

@keyframes sk-bouncedelay {
	0%, 80%, 100% { 
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
	} 40% { 
		-webkit-transform: scale(1.0);
		-ms-transform: scale(1.0);
		transform: scale(1.0);
	}
}

/* Image Swiper Common Properties */
.swiper-container {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background-color: transparent;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.swiper-container img {	/* corrects image height error in IE */
	width: 100%;
	height: 100%;
}
/* end of image swiper common properties */


/**************************/
/*     03. NAVIGATION     */
/**************************/
.navbar {
	border-bottom: 1px solid #373f51;
	background-color: #373f51;
}

.navbar .nav.navbar-nav {
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.navbar .navbar-collapse {
	border-top: 1px solid #4f4f4f;
}

/* Logo */
.navbar .navbar-brand {
	margin-top: 4px;
	margin-bottom: 8px;
	padding-top: 11px;
}

.navbar .navbar-brand img {
	width: 131px;
	height: 33px;
}

/* Menu links */
.navbar .nav.navbar-nav li a {
	color: #fff;
	opacity: 0.8;
	font: 700 13px/1em "Nunito", sans-serif; 
}

.navbar .nav.navbar-nav li a:hover,
.navbar .nav.navbar-nav li.active a {
	background: transparent;
	color: #fff;
	opacity: 1;
}

/* Mobile menu toggle button - pressed */
.navbar .navbar-toggle,
.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:active,
.navbar .navbar-toggle.collapsed:active {
	margin-top: 16px;
	border: 1px solid #fff;
	background-color: #fff;
}

.navbar .navbar-toggle .icon-bar,
.navbar .navbar-toggle:hover .icon-bar,
.navbar .navbar-toggle:active .icon-bar,
.navbar .navbar-toggle.collapsed:active .icon-bar {
	background-color: #373f51;
} 
/* end of mobile menu toggle button - pressed */

/* Mobile menu toggle button */
.navbar .navbar-toggle.collapsed {
	border: 1px solid #373f51;
	background-color: transparent;
}

.navbar .navbar-toggle.collapsed .icon-bar {
	background-color: #fff;
}

#icon-text {
	font-size: 24px;
	color: white;
	font-weight: bold;
	margin-top: 10px;
}

/* end of mobile menu toggle button */


/**********************/
/*     04. HEADER     */
/**********************/
header {
	position: relative;
	width: 100%;
	min-height: 100%;
	background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("../images/header-background.jpg") center no-repeat;
	background-size: cover;
}

/* IE fix for vertical alignment in flex box */
header .flex-container-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%; 
}

header .header-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh; 
	padding-top: 140px;
	padding-bottom: 80px;
	text-align: center;
}

header .header-content img {
	margin-left: auto;
	margin-right: auto;
}

header .text-pane {
	margin-top: 30px;
}

.h1-header {
	color: #fff;
}

#js-rotating {
	background-color: #0585b8;
	padding-right: 5px;
	padding-left: 5px;
}

header .p-largest {
	margin-top: 21px;
	margin-bottom: 14px;
	color: #fff;
}

/****************************/
/*     5. DOWNLOAD FORM     */
/****************************/
.download-form {
	padding-top: 63px;
	padding-bottom: 63px;
	background-color: #373f51;
	color: #fff;
}

.download-form h3 {
	text-align: center;
}

.download-form p {
	text-align: center;
}

.download-form form {
	margin-top: 25px;
}

.download-form form p {
	margin-bottom: 7px;
}

.download-form .form-group {
	margin-bottom: 21px;
}

.download-form .form-control-submit-button {
	width: 100%;
}

/* Einrückung der Textfelder erzwingen */
#first-input {
	margin-left: 20%;
}

/*************************/
/*     06. CUSTOMERS     */
/*************************/
.customers {
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #f3f3f3;
}


/***************************/
/*     07. DESCRIPTION     */
/***************************/
.description {
	padding-top: 65px;
	padding-bottom: 90px;
	background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('../images/statistics-background.jpg') center no-repeat;
	background-size: cover; 
	color: #fff;
}

.description h2 {
	text-align: center;
}

.description h3 {
	margin-bottom: 0px;
}

.description h3:nth-of-type(2) {
	margin-top: 50px;
}

.numbered-list {
	padding-left: 0px;
	counter-reset: li;
	list-style-type: none;
	font: 700 16px/1.4em "Nunito", sans-serif;
}

.numbered-list .numbered-list-item {
	margin-top: 20px;
	position: relative;   
	padding: 5px 0 5px 50px;
}

.numbered-list .numbered-list-item::before {
	content: counter(li);
	counter-increment: li;
	position: absolute;      
	left: 0;
	top: 4px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #079fdd;
	color: #fff;
	line-height: 2.6em;
	text-align: center;
}

.numbered-list-item-text {
	color: #fff;
	font: 300 16px/1.5em "Nunito", sans-serif;
	font-weight: normal;
}

.description .swiper-container {
	max-width: 342px;
	margin-top: 40px;
}

.description .swiper-container .fa {
	color: #079fdd;
}

.description .swiper-container .swiper-button-prev {
	left: 15px;
	background-image: none;
}

.description .swiper-container .swiper-button-next {
	right: 30px;
	background-image: none;
}


/***********************/
/*     07. SUMMARY     */
/***********************/
.summary {
	padding-top: 84px;
	padding-bottom: 90px;
	background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("../images/header-background.jpg") center no-repeat;
	background-size: cover;
}

.summary h2 {
	margin-top: 0px;
	color: #fff;
}

.summary .summary-pane {
	margin: 50px 0px 0px 0px;
	padding: 50px 25px 40px 25px;
	border-radius: 10px;
	background-color: #058cc3;
	color: #fff;
	transition: .5s;
}

.summary .summary-pane:hover {
	background-color: #fff;
	color: #373f51;
}

.summary .icon-wrapper {
	display: table;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 30px;
	width: 164px;
	height: 164px;
	text-align: center;
}

.summary .fa {
	border-radius: 50%;
	color: #fff;
	font-size: 68px;
	line-height: 164px;
	text-align: center;
	vertical-align: middle;
	transition: .5s;
}

.summary .summary-pane:hover .fa {
	color: #058cc3;
}

.summary .circle-icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 3px solid #fff;
	border-radius: 50%;
	font-size: 80px;
	text-align: center;
	transition: .5s;
}

.summary .summary-pane:hover .circle-icon {
	border: 3px solid #058cc3;
}

.summary .summary-pane p {
	margin-top: 12px;
	margin-bottom: 0px;
}


/**********************/
/*     09. REVIEWS    */
/**********************/
.reviews .reviews-image-pane {
	height: 350px;
	margin: auto;
	background: url('../images/reviews-background.jpg') center no-repeat;
	background-size: cover;
}

.reviews .reviews-text-pane-container {
	margin-right: 15px;
	margin-left: 15px;
	padding-top: 63px;
	padding-bottom: 90px;
	text-align: center;
}

.reviews img {
	margin: 50px auto 30px auto;
}

.reviews .p-large {
	font-style: italic;
}

.reviews h5 {
	margin-top: 15px;
	margin-bottom: 4px;
}

.job-title {
	font: 300 12px/1.4em "Nunito", sans-serif;
}

.reviews .carousel-indicators {
	margin-bottom: -35px;
}

.reviews .carousel-indicators li {
	width: 12px;
	height: 12px;
	margin: 0px 2px 0px 2px;
	background: #b4b4b4;
	opacity: 0.5;
}

.reviews .carousel-indicators li.active {
	width: 12px;
	height: 12px;
	background: #b4b4b4;
	opacity: 1;
}


/**********************/
/*     10. AUTHOR     */
/**********************/
.author .author-text-pane-holder {
	padding-top: 64px;
	padding-bottom: 75px;
	margin-right: 15px;
	margin-left: 15px;
}

.author .author-text-pane-holder p:first-of-type {
	margin-top: 45px;
}

.author ul {
	padding-left: 6px;
}

.author .fa-li {
	margin-top: 0.08em;
	color: #079fdd;
}

.author .progress {
	height: 28px;
	margin-top: 15px; 
	margin-bottom: 16px;
	border-radius: 1px;
}

.author .progress-bar {
	padding-left: 20px;
	padding-top: 6px;
	background-color: #079fdd;
	color: #fff;
	font: 700 13px/1.4em "Nunito", sans-serif;
	text-align: left;
}

.author .author-image-pane {
	height: 350px;
	margin: auto;
	background: linear-gradient(rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.0)), url('../images/author-background.jpg') center no-repeat;
	background-size: cover;
}

#author h3 {
	margin-bottom: -30px;
}

/**************************/
/*     11. STATISTICS     */
/**************************/
.statistics {
	padding-top: 50px;
	padding-bottom: 74px;
	background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('../images/statistics-background.jpg') center no-repeat;
	background-size: cover; 
}

.statistics .number-container {
	display: inline-block;
	min-width: 210px;
	margin-top: 30px;
}

.statistics .counter {
	margin-top: 70px;
	margin-bottom: 0px;
	color: #fff;
	font: 700 80px/1em "Raleway", sans-serif;	
}

.statistics p {
	color: #09bfe8;
}


/**************************/
/*     12. COLLECTION     */
/**************************/
.collection {
	padding-top: 86px;
	padding-bottom: 90px;
	background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url("../images/header-background.jpg") center no-repeat;
	background-size: cover;
}

.collection h2 {
	margin-top: 0px;
	color: #fff;
}

.collection li i.fa {
	margin-right: 6px;
	color: #21baa3;
}

.collection li {
	margin-top: 4px;
}

.collection p:nth-of-type(2) {
	margin-bottom: 0px;
}

.collection .collection-container {
	max-width: 341px;
	margin-top: 60px;
	margin-left: auto;
	margin-right: auto;
}

.collection .collection-container.first {
	margin-top: 25px;
}

.collection .collection-container.middle {
	margin-top: 60px;
	margin-bottom: 50px;
}

.collection .collection-container .image-container img {
	margin-top: 25px;
}

/* Collection Images Hover Animation */
.collection .collection-container .image-container {
	overflow: hidden;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.collection .collection-container .image-container img {
	margin: 0px;
	transition: all 0.3s;
}

.collection .collection-container .image-container img:hover {
	-moz-transform: scale(1.15);
	-webkit-transform: scale(1.15);
	transform: scale(1.15);
} 
/* end of collection images hover animation */

.collection .collection-container .text-container {
	padding-top: 25px;
	padding-bottom: 35px;
	border: 2px solid #fff;
/*	border-bottom: 2px solid #fff;
	border-left: 2px solid #fff;*/
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	color: #fff;
}

.collection .collection-container h4 {
	margin-top: 0px;
	margin-bottom: 6px;
}

.collection .collection-container.middle h4 {
	font-size: 24px;
	text-decoration: underline;
}


.collection .collection-container p {
	margin-right: 15px;
	margin-left: 15px;
}

/* Magnific Popup Collection Details Content */
.collection-details-container {
	position: relative;
	max-width: 860px;
	margin: 40px auto;
	padding: 35px 20px 35px 20px;
	background-color: #373f51;
	color: #fff;
	text-align: left;
}

.collection-details-container img {
	margin-right: auto;
	margin-left: auto;
}

.collection-details-container h3 {
	margin-top: 20px;
	margin-bottom: 14px;
}

.collection-details-container hr {
	width: 40px;
	height: 1px;
	margin-top: 0px;
	margin-bottom: 14px;
	margin-left: 0;
	background-color: #76878f;
	border: 0;
	text-align: left;
}

.collection-details-container h4 {
	margin-bottom: 17px;
}

.collection-details-container table {
	margin-top: 18px;
	margin-bottom: 5px;
}

.collection-details-container table tr {
	line-height: 2em;
}

.collection-details-container table .icon-cell {
	width: 33px;
	margin-right: 16px;
	text-align: center;
}

.collection-details-container table .fa {
	color: #079fdd;
}

.collection-details-container table tr td:nth-of-type(2) {
	padding-left: 3px;
}

.collection-details-container .button-outline-white,
.collection-details-container .button-solid-primary-color {
	margin-top: 15px;
}

.collection-details-container .button-outline-white {
	margin-right: 3px;
}

.collection-details-container button.mfp-close.x-button {
	position: absolute;
	top: -7px;
	right: -8px;
	width: 44px;
	height: 44px;
	color: #fff;
}

.collection-details-container a.mfp-close.as-button {
	position: relative;
	width: auto;
	height: auto;
	opacity: 1;
	color: #fff;
}

.collection-details-container a.mfp-close.as-button:hover {
	color: #079fdd;
}


/***************************/
/*     13. ENDORSEMENT     */
/***************************/
.endorsement {
	padding-top: 83px;
	padding-bottom: 90px;
	background-color: #f4f4f4;
}

.endorsement .p-large {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}


/**********************/
/*     14. FOOTER     */
/**********************/
.footer {
	padding-top: 40px;
	padding-bottom: 30px;
	background-color: #373f51;
	color: #fff;
	text-align: center;
}

.footer .social-icons-container {
	margin-right: auto;
	margin-left: auto;
}

.footer .social-icons-container .fa-stack a .facebook.fa-stack-2x {
    color: #3b5998;
}

.footer .social-icons-container .fa-stack a .twitter.fa-stack-2x {
    color: #45b0e3;
}

.footer .social-icons-container .fa-stack a .google-plus.fa-stack-2x {
    color: #dd4b39;
}

.footer .social-icons-container .fa-stack a .instagram.fa-stack-2x {
    color: #d51a6f;
}

.footer .social-icons-container .fa-stack a .linkedin.fa-stack-2x {
    color: #0177b5;
}

.footer .social-icons-container .fa-stack a .dribbble.fa-stack-2x {
    color: #ea4c89;
}

.footer .social-icons-container .fa-stack a .pinterest.fa-stack-2x {
    color: #ca2026;
}

/* General Social Icons */
.footer .social-icons-container .fa-stack a .fa-stack-1x {
    color: #fff;
	transition: color .3s ease;
}

.footer .social-icons-container .fa-stack a .fa-stack-2x {
	color: #3b5998;
	transition: color .3s ease;
}

.footer .social-icons-container .fa-stack a:hover .fa-stack-1x {
	color: #3b5998;
}

.footer .social-icons-container .fa-stack a:hover .fa-stack-2x {
    color: #fff;
}
/* end of general social icons */

.footer .copyright {
	margin-top: 10px;
}

.footer .copyright span {
	color: #fff;
	opacity: 0.7;
	font: 400 14px/1.2em "Khula", sans-serif;
	text-align: center;
}

.footer .copyright a {
	margin-top: 0px;
	font: 400 14px/1.2em "Khula", sans-serif;
}


/**********************************/
/*     15. BACK TO TOP BUTTON     */
/**********************************/
a.back-to-top {
	position: fixed;
	z-index: 999;
	right: 12px;
	bottom: 12px;
	display: none;
	width: 42px;
	height: 42px;
	border-radius: 30px;
	background: #021720 url("../images/up-arrow.png") no-repeat center 47%;
	background-size: 18px 18px; 
	text-indent: -9999px;
}

a:hover.back-to-top {
	background-color: #079fdd; 
}


/*****************************/
/*     16. MEDIA QUERIES     */
/*****************************/
/* Min-width width 768px */
@media (min-width: 768px) {
	.h1-header {
		font: 700 74px/1.15em "Raleway", sans-serif;
	}

	h1 {
		font: 700 50px/1em "Raleway", sans-serif;
	}
	
	h2 {
		font: 700 42px/1.1em "Raleway", sans-serif;
	}

	.p-largest {
		font: 300 24px/1.3em "Nunito", sans-serif;
	}

	.navbar {
        padding: 20px 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0);
		background-color: transparent;
		transition: border-bottom .3s ease-in-out, background-color .3s ease-in-out,padding .3s ease-in-out;
		-webkit-backface-visibility: hidden;
    }
	
	.navbar .nav.navbar-nav {
		padding-top: 0px;
		padding-bottom: 0px;
	}
	
	.navbar .navbar-collapse {
		border: none;
	}

    .navbar.top-nav-collapse {
       	padding: 0;
		background-color: #373f51;
		-webkit-backface-visibility: hidden;
	}
	
	.navbar .navbar-brand {
		margin-right: 16px;
		margin-left: 0px;
	}
	
	.navbar .nav.navbar-nav li a,
	.navbar .nav.navbar-nav.navbar-right li a	{
		margin: 13px 12px 14px 12px;
		padding: 15px 1px 3px 1px;
		transition: all .2s ease-in-out;
	}

	.navbar.top-nav-collapse .nav.navbar-nav.navbar-right li a {
		padding-top: 13px;
		padding-bottom: 5px;
	}

	.navbar.top-nav-collapse .nav.navbar-nav.navbar-right li a.button-solid-primary-color {
		padding-right: 15px;
		padding-left: 15px;
	}
	
	.navbar .nav.navbar-nav li.active a,
	.navbar .nav.navbar-nav li a:hover	{
		background: transparent;
		color: #fff;
		opacity: 1;
	}

	header .header-content img {
		max-width: 350px;
	}

	.download-form {
		padding-top: 73px;
		padding-bottom: 79px;
	}

	.download-form p {
		width: 80%;
		margin-right: auto;
		margin-left: auto;
	}

	.customers {
		padding-top: 40px;
		padding-bottom: 38px;
	}
	
	.description {
		padding-top: 75px;
		padding-bottom: 75px;
	}
	
	.summary {
		padding-top: 94px;
		padding-bottom: 100px;
	}

	.reviews .reviews-text-pane-container {
		margin-right: 80px;
		margin-left: 80px;
		padding-top: 53px;
	}
	
	.reviews .carousel-indicators {
		margin-bottom: -50px;
	}
	
	.author .author-text-pane-holder {
		margin-right: 80px;
		margin-left: 80px;
		padding-top: 72px;
		padding-bottom: 83px;
	}
	
	.collection {
		padding-top: 93px;
		padding-bottom: 100px;
	}
	
	.collection .collection-container {
		margin-top: 50px;
	}
	
	.collection .collection-container.middle,
	.collection .collection-container.first	{
		margin-top: 50px;
		margin-bottom: 0px;
	}

	.collection-details-container {
		padding: 35px;
	}
	
	.endorsement {
		padding-top: 93px;
		padding-bottom: 100px;
	}

	a.back-to-top {
		right: 20px;
		bottom: 20px;
	}
}


/* Min-width width 992px */
@media (min-width: 992px) {
	header .header-content {
		text-align: left;
	}

	header .text-pane {
		margin-top: 70px;
	}

	header .button-solid-large-white {
		margin-left: 0px;
		text-align: center;
	}

	.download-form p {
		width: 60%;
	}

	.download-form .form-group {
		float: left;
		width: 18.68%;
		display: inline-block;
		margin-right: 12px;
	}

	.description .swiper-container {
		margin-top: 28px;
	}

	.reviews {
		padding-bottom: 0px;
	}
	
	.reviews .reviews-image-pane {
		float: left;
		width: 50%;
		height: 650px;
	}

	.reviews .reviews-text-pane {
		float: right;
		width: 50%;
	}
	
	.reviews .reviews-text-pane-container {
		width: 350px;
		margin-left: 70px;
		padding-top: 53px;
	}

	.reviews img {
		margin-top: 30px;
	}
	
	.author .author-text-pane {
		width: 50%;
		float: left;
	}

	.author .author-text-pane-holder {
		float: right;
		width: 410px;
		margin-right: 50px;
		padding-top: 52px;
		padding-bottom: 22px;
	}
	
	.author .author-image-pane {
		float: right;
		width: 50%;
		height: 650px;
	}

	.collection img {
		margin-top: 40px;
	}

	.collection-details-container {
		padding: 45px 50px 41px 40px;
	}
	
	.collection-details-container img {
		max-width: 400px;
	}
	
	.collection-details-container h3 {
		margin-top: 45px;
	}

	.endorsement .p-large {
		width: 70%;
		margin-right: auto;
		margin-left: auto;
	}
}


/* Min-width width 1200px */
@media (min-width: 1200px) {
	header .header-content {
		padding-top: 70px;
		padding-bottom: 10px;
	}
	
	header .header-content img {
		max-width: 406px;
		margin-left: 70px;
	}

	header .header-content .text-pane {
		margin-top: 105px;
		margin-left: 50px;
		margin-right: 20px;
	}

	.download-form .form-group {
		margin-right: 15px;
	}

	.description {
		padding-top: 100px;
	}

	.description .text-pane {
		margin-left: 50px;
	}

	.description .swiper-container {
		margin-top: 0px;
	}
	
	.summary .summary-pane {
		margin: 50px 8px 0px 8px;
	}

	.custom-icon {
		padding: 45px;
	}

	.reviews .reviews-text-pane-container {
		width: 450px;
		margin-left: 65px;
		padding-top: 73px;
	}

	.reviews img {
		margin-top: 50px;
	}
	
	.author .author-text-pane-holder {
		width: 500px;
		margin-right: 70px;
		padding-top: 72px;
		padding-bottom: 52px;
	}
	
	.collection .collection-container {
		width: 341px;
	}
	
	.collection .collection-container .image-container {
		width: 341px;
		height: 248px;
	}

	.collection .collection-container .image-container img {
		width: 341px;
		height: 248px;
	}

	.statistics .number-container {
		margin-right: 15px;
		margin-left: 15px;
	}
}