/* Font Setup */

@font-face {
	font-family: 'Raleway';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/Raleway-VariableFont_wght.woff2') format('woff2');
}

/* Base */

html {
	overflow-y: scroll;
}

body,
h1, h2, h3, h4, h5, h6,
small {
	font-family: 'Raleway', sans-serif;
}

body {
	font-size: 16px;
}

::selection,
::-moz-selection {
	background: #333;
}

/* Typography */

h2 {
	font-size: 20px;
	font-weight: 700;
	color: #414141;
	margin: 0 0 30px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

h3 {
	font-size: 24px;
	margin: 0 0 32px;
}

/* Theme Color */

a,
a:focus:not(.btn),
section.dark a,
h1 > span, h2 > span, h3 > span,
h4 > span, h5 > span, h6 > span,
.pagination > li > a,
.pagination > li > a:hover,
.pagination > li > span,
ul.list-links > li > a:hover,
.menu-list ul li a:hover,
.menu-list ul li.active a,
section .theme-color,
section span.theme-color,
section em.theme-color,
section i.theme-color,
section b.theme-color,
section div.theme-color,
section p.theme-color,
a.href-reset:hover,
a.href-reset.active,
.href-reset a.active,
.href-reset a:hover,
.price-clean-popular h4,
.box-icon.box-icon-color i,
section.dark .nav-tabs.nav-clean > li.active > a {
	color: #CC3333;
}

.btn-primary,
.pagination > .active > a,
.alert.alert-primary,
.alert.alert-theme-color,
.callout-theme-color,
.progress-bar-primary,
.toast-primary,
.ribbon-inner,
.info-bar.info-bar-color,
#page-menu,
#page-menu ul,
#progressBar #bar,
.sky-form .button,
.sky-form .toggle i:before,
.swiper-pagination-bullet-active {
	background-color: #CC3333;
}

.btn-primary,
.pagination > .active > a,
a.thumbnail.active,
a.thumbnail:hover {
	border-color: #CC3333;
}

/* Navigation */

#topNav .navbar-collapse {
	float: right;
}

.navbar-collapse {
	padding-left: 0;
	padding-right: 0;
}

#topNav a.logo {
	display: inline-block;
	height: 96px;
	line-height: 96px;
	overflow: hidden;
}

#topMain > li > a {
	height: 96px;
	line-height: 76px;
}

#topMain.nav-pills > li > a {
	color: #151515;
	font-weight: 700;
	background-color: transparent;
}

#topMain.nav-pills > li.active > a {
	color: #CC3333;
}

#topMain.nav-pills > li:hover > a,
#topMain.nav-pills > li:focus > a {
	color: #CC3333 !important;
	background-color: transparent !important;
}

#topMain.nav-pills > li > a.dropdown-toggle {
	padding-right: 25px;
	border-radius: 0;
}

#topMain.nav-pills > li > a.dropdown-toggle::after {
	content: "\f107";
	position: absolute;
	top: 50%;
	right: 10px;
	display: block;
	margin-top: -5px;
	font-family: FontAwesome;
	font-size: 12px;
	line-height: 1;
	opacity: 0.3;
	transition: transform 0.2s ease-in;
}

#header.bottom.dropup #topMain.nav-pills > li > a.dropdown-toggle::after {
	content: "\f106";
}

#topNav ul.dropdown-menu {
	border-top-color: #CC3333;
	border-color: #CC3333 #fff #fff;
}

#topNav div.submenu-dark ul.dropdown-menu,
#topNav div.submenu-color ul.dropdown-menu {
	border-color: #CC3333 #3F3F3F #3F3F3F;
}

#topNav div.submenu-color ul.dropdown-menu {
	background-color: #CC3333;
}

#topNav div.submenu-color ul.dropdown-menu li a {
	color: #fff;
}

#topNav div.submenu-color ul.dropdown-menu li:hover > a {
	background-color: rgba(0,0,0,0.15);
}

#topNav div.submenu-color ul.dropdown-menu li.divider {
	background-color: rgba(255,255,255,0.3);
}

#topMain li.search .search-box {
	border-top: #CC3333 2px solid;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover {
	color: #111;
	background-color: rgba(0,0,0,0.1);
}

/* Slider */

#slider .kicker {
	font-size: 64px;
	font-weight: 600;
	margin-bottom: 5px;
}

#slider h1 {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.4;
	text-transform: uppercase;
	margin-bottom: 0;
}

/* Page Header */

section.page-header .kicker {
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
}

section.page-header h1 {
	font-size: 16px;
	font-weight: 400;
	color: rgba(255,255,255,0.6);
	margin-bottom: 0;
}

/* Sections */

section.theme-color {
	background-color: #CC3333;
	color: #fff;
}

section.theme-color a {
	color: #fff;
}

section.theme-color a:hover {
	color: #111;
}

/* Pricing Box */

.price-clean {
	color: #959595;
	background-color: #151515;
	padding: 30px 15px;
	max-width: 470px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	border: none;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}

.price-clean h3 {
	font-size: 50px;
	font-weight: 400;
	line-height: 50px;
	margin: 0;
	color: rgba(255,255,255,0.6);
}

.price-clean h3 sup {
	font-size: 20px;
	line-height: 1.5;
	top: 3px;
	position: relative;
	vertical-align: top;
}

.price-clean h3 em {
	font-size: 20px;
	font-style: normal;
}

.price-clean h4 {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #fff;
	margin: 0;
}

.price-clean h4 small,
.price-clean p {
	color: rgba(255,255,255,0.6);
}

/* Alerts */

.alert.alert-theme-color,
.alert.alert-dark {
	background-color: #151515;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}

.alert.alert-theme-color p,
.alert.alert-dark p {
	color: rgba(255,255,255,0.6);
}

/* Portfolio */

#portfolio div.col-md-2 .item-box > h3 {
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	font-size: 18px;
	line-height: 20px;
	margin: 0;
	padding-top: 5px;
}

#portfolio div.col-md-2 .item-box > h3 small {
	font-size: 75%;
	text-transform: none;
}

/* Layout */

.btn-toolbar {
	text-align: center;
}

.heading-title {
	margin-bottom: 30px;
}

.heading-title.heading-line-single:before {
	border-top: #ccc 1px solid !important;
}

.bottom-flush {
	margin-bottom: -60px;
}

.fourfifty {
	max-width: 450px;
	margin: 0 auto;
}

/* Images */

.item-box > figure > img,
.item-box > figure > span {
	max-width: 200px;
	margin: 0 auto;
}

.testimonial-content > img {
	margin: 0 auto 30px;
}

#footer img {
	float: left;
	width: 85px;
	height: 85px;
	margin-right: 20px;
}

/* Buttons / UI */

pre, .alert, .panel, .navbar-toggle, .btn,
.form-control, .social-icon, .nav-pills > li > a,
#toTop {
	border-radius: 0 !important;
}

.btn.active,
.btn:active {
	box-shadow: none;
	background-image: none;
	outline: 0;
}

.footer-btn {
	color: #fff;
	background-color: #555;
	border-color: #444;
}

.footer-btn:hover,
.footer-btn:focus {
	color: #fff;
	background-color: #666;
	border-color: #555;
}

/* Icons / Highlights */

p > span,
label > span {
	color: #cc3333;
	font-weight: 900;
}

.fa-star {
	color: #cc3333;
}

/* Tabs / Forms / Components */

.navbar-primary {
	background-color: #CC3333 !important;
	border-color: #CC3333 !important;
}

.nav-tabs > li.active > a {
	color: #CC3333 !important;
}

.nav-tabs.nav-top-border > li.active > a {
	border-top-color: #CC3333 !important;
}

.nav-tabs.nav-bottom-border > li.active > a {
	border-bottom-color: #CC3333 !important;
}

section.dark .btn-default:hover,
.sky-form .checkbox input:checked + i:after,
.sky-form .rating input:checked ~ label {
	color: #CC3333;
}

section.dark .pagination > li.active > a,
.process-wizard-primary > .process-wizard-step > .process-wizard-dot,
.process-wizard-primary > .process-wizard-step > .progress > .progress-bar,
i.ico-hover:hover,
section.dark i.ico-hover:hover {
	background-color: #CC3333;
	border-color: #CC3333;
}

/* Responsive */

@media only screen and (max-width: 1215px) {
	#topMain.nav-pills > li > a {
		font-size: 14px;
	}
}

@media only screen and (max-width: 992px) {
	#header {
		height: 60px !important;
	}

	#header #topNav a.logo {
		height: 60px !important;
		line-height: 50px !important;
	}

	#header #topNav a.logo > img {
		max-height: 60px !important;
	}

	#topMain {
		padding-top: 10px;
		padding-bottom: 15px;
	}

	#header #topNav #topMain > li > a {
		height: 40px !important;
		line-height: 40px !important;
		padding-top: 0;
	}

	#topMain > li > a {
		font-size: 16px !important;
	}

	#header li.search .search-box {
		position: fixed;
		top: 60px !important;
		left: 0;
		right: 0;
		width: 100%;
		margin: 0 !important;
		background-color: #fff;
		border-top: 1px solid rgba(0,0,0,0.1);
	}
}

@media only screen and (max-width: 768px) {
	#slider .kicker {
		font-size: 32px;
		margin-bottom: 20px;
	}

	#slider h1 {
		font-size: 16px;
	}

	section div.row > div,
	#footer .row > div {
		margin-bottom: 0;
	}
}

@media only screen and (max-width: 550px) {
	section .nav-pills {
		background-color: transparent;
	}

	.nav-pills > li + li {
		margin-left: 0;
	}
}

@media only screen and (min-width: 768px) {
	.lead {
		font-size: 20px;
	}
}