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

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

01. General Styles 
02. Preloader
03. Navigation
04. Header
05. Customers
06. Description
07. Summary
08. Details
09. Author
10. Statistics
11. Collection
12. Endorsement
13. Footer
14. Back To Top Button
15. 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;
}

.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: 44px;
	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: 15px;
	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);
	}
}


/**************************/
/*     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;
}
/* end of mobile menu toggle button */


/**********************/
/*     04. HEADER     */
/**********************/
header {
	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;
}

header .header-content {
	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;
}

header .carousel {
	width: 100%;
	margin-top: 25px;
	margin-bottom: 17px;
}

header .p-large {
	margin-bottom: 8px;
	color: #fff;
}

header h4 {
	margin-top: 0px;
	color: #fff;
}

header .carousel-indicators {
	bottom: -20px;
}

/* Magnific Popup Lightbox Form Content */
.lightbox-form-container {
	position: relative;
	max-width: 520px;
	margin: 40px auto;
	padding: 24px 25px 30px 25px;
	background-color: #2d323f;
	color: #fff;
	text-align: left;
}

.lightbox-form-container button.mfp-close.x-button {
	position: absolute;
	top: 10px;
	right: 13px;
	width: 10px;
	height: 10px;
	color: #fff;
	line-height: 0px;
}

.lightbox-form-container form {
	margin-top: 20px;
}

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

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

.lightbox-form-container .form-control-submit-button {
	margin-top: 30px;
}


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


/***************************/
/*     06. 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;
}


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

.details .details-text-pane-container {
	margin-right: 15px;
	margin-left: 15px;
	padding-top: 63px;
	padding-bottom: 60px;
	text-align: left;
}

.details h2 {
	text-align: center;
}

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

.details .panel {
	border: none;
	margin-top: 45px;
	margin-bottom: 14px;
	padding-bottom: 10px;
	background-color: transparent;
}

.details .panel-group .panel-heading {
    padding: 0;
	background-color: transparent;
}

.details .panel-group .panel-heading .panel-title {
	margin-top: 0px;
}

.details .panel-group .panel-title a {
	position: relative;
	display: block;
	padding: 0px 0px 0px 0px;
	border: 1px solid transparent;
	border-radius: 25px;
    background-color: transparent;
	color: #373f51;
	font-weight: bold;
	transition: all 0.3s ease;
}

.details .panel-group .panel-title a.collapsed {
	border: 1px solid transparent;
	background-color: transparent;
    color: #373f51;
}

.details .panel-group .panel-title a.collapsed:hover {
    background-color: transparent;
    color: #373f51;
}

.details .panel-group .panel-title a .circle-numbering {
	float: left;
	display: inline-block;
	width: 34px;
	height: 34px;
	padding-left: 0px;
	margin-right: 10px;
	border-radius: 50px;
	background-color: #079fdd;
	color: #fff;
	line-height: 1.9em;
	text-align: center;
	transition: background-color 0.3s ease;
}

.details .panel-group .panel-title a.collapsed .circle-numbering {
	background-color: #373f51;
	color: #fff;
}

.details .panel-group .panel-title:hover a.collapsed .circle-numbering {
	background-color: #079fdd;
}

.details .panel-group .panel-title a .panel-title-text {
	vertical-align: middle;
	line-height: 1.8em;
}

.details .panel-body {
	padding: 5px 0 0 0;
	background-color: transparent;
}

.details .panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top: 0px none;
}


/**********************/
/*     09. 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;
}


/**************************/
/*     10. 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;
}


/**************************/
/*     11. 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-right: 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 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;
}


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

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


/**********************/
/*     13. 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;
}


/**********************************/
/*     14. 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; 
}


/*****************************/
/*     15. MEDIA QUERIES     */
/*****************************/
/* Min-width width 768px */
@media (min-width: 768px) {
	.h1-header {
		font: 700 74px/1.1em "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 .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;
	}

	.lightbox-form-container {
		padding: 29px 35px 35px 35px;
	}
	
	.customers {
		padding-top: 40px;
		padding-bottom: 38px;
	}
	
	.description {
		padding-top: 75px;
		padding-bottom: 100px;
	}
	
	.summary {
		padding-top: 94px;
		padding-bottom: 100px;
	}

	.details .details-text-pane-container {
		margin-right: 80px;
		margin-left: 80px;
		padding-top: 53px;
	}

	.details .panel-group .panel-title a .circle-numbering {
		width: 44px;
		height: 44px;
		margin-right: 11px;
		padding-top: 11px;
		padding-left: 1px;
		line-height: 1.3em;
	}
	
	.details .panel-group .panel-title a .panel-title-text {
		display: inline-block;
		margin-top: 9px;
		line-height: 1.4em;
	}
	
	.details .panel-body {
		margin-top: -8px;
		padding: 0 0 0 56px;
	}
	
	.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 {
		position: relative;
		height: 100%;
	}
	
	header .header-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100vh;
		text-align: left;
	}

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

	header .carousel {
		width: 90%;
		margin-bottom: 0px;
	}

	header .carousel-indicators li {
		display: block;
		width: 10px;
		height: 10px;
		margin-bottom: 10px;
	}
	
	header .carousel-indicators .active {
		width: 12px;
		height: 12px;
		margin-bottom: 10px;
		background-color: #fff;
	}
	
	header .carousel-indicators {
		width: 0%;
		top: 29%;
		margin-left: 0;
		left: 103%;
	}

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

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

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

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

	.author .author-text-pane {
		width: 50%;
		float: left;
	}

	.details .panel-group {
		width: 98%;
		margin-bottom: 0px;
	}

	.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 .text-pane {
		margin-top: 75px;
		margin-left: 50px;
		margin-right: 20px;
	}

	.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;
	}

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

	.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;
	}
}