/*
Client: 		Triad Equipment
Client URI: 	http://triadequipment.ca
Author: 		Dynasoft Communications Inc.
Author URI: 	http://dynasoft2000.com
*/

* {
	margin: 0;
	padding: 0;
}

html {
	width: 100%;
}

body {
	width: 100%;
	min-width: 360px;
	background: #181a1c;
	color: #30303a;
	font: 400 15px 'Source Sans Pro', sans-serif;
	text-align: center;
}

a {
	color: #ffb424;
	text-decoration: none !important;
	transition: all 0.3s ease 0s;
}

a:hover, a:active {
	color: #ff9e24;
}

dl {
	list-style-position: inside;
	margin: 21px 0;
	text-align: left;
}

dd {
	line-height: 1.3;
	margin: 9px 0;
}

dt {
	font-weight: 600;
	line-height: 1.3;
	margin: 9px 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Cabin', sans-serif;
	font-weight: 500;
	text-align: left;
}

h1 {
	font-size: 30px;
}

h2 {
	font-size: 24px;
}

h3 {
	font-size: 21px;
}

h4 {
	font-size: 21px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 18px;
}

img {
	max-width: 100%;
	height: auto;
	border: none;
}

li {
	line-height: 1.3;
	margin: 9px 0;
}

ol, ul {
	list-style-position: inside;
	margin: 21px 0;
	text-align: left;
}

p {
	line-height: 1.3;
	margin: 21px 0;
	text-align: left;
}

table {
	width: 100%;
	border-collapse: collapse;
}

#pre-header {
	width: 100%;
	background: #ffb424;
	margin: 0 auto;
	text-align: center;
}

#pre-header .logo {
	width: 51px;
	height: 51px;
	background: transparent url('../images/icon-triad-black.png') no-repeat center center / 51px 45px;
	display: block;
	float: left;
	padding: 3px 0;
	transition: background 0.45s;
}

#pre-header .logo:hover {
	background-image: url('../images/icon-triad.png');
}

#pre-header .links {
	float: right;
	font-size: 0;
	margin-right: -15px;
}

#pre-header .links .icon {
	max-width: 100%;
	height: 51px;
	color: #050a0d;
	display: inline-block;
	font-size: 18px;
	line-height: 45px;
	margin: 0 auto;
	padding: 3px 15px;
	position: relative;
	text-align: center;
	transition: background-color 0.3s ease-in-out 0s, color 0.2s ease-in-out 0s;
	vertical-align: middle;
}

#pre-header .links .icon .label {
	font-size: 15px;
	font-weight: 600;
	margin-left: 6px;
}

#pre-header .links .icon:hover {
	color: #fff;
}

#pre-header .links .icon.email:hover {
	background: #2275ae;
}

#pre-header .links .icon.phone:hover {
	background: #bd3437;
}

#header {
	width: 100%;
	background: #181a1c url('../images/background.png') left top repeat;
	border-top: 1px solid #050a0d;
	color: #fff;
	margin: 0 auto;
	padding: 45px 0;
	position: relative;
}

#header .logo:hover img {
	animation: zoom .75s ease-out .75;
	animation-fill-mode: forwards;
}

#navigation {
	width: 100%;
	background: #181a1c;
	border-bottom: 1px solid #050a0d;
	border-top: 1px solid #050a0d;
	color: #ffb424;
	margin: 0 auto;
	position: relative;
}

#nav {
	font-size: 15px;
	font-weight: 700;
	margin: 0 auto;
	text-transform: uppercase;
}

#nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#nav > ul {
	display: inline-block;
	vertical-align: top;
}

#nav ul li {
	float: left;
	margin: 0;
	padding: 0;
	position: relative;
}

#nav ul li a {
	color: #ffb424;
	display: block;
	padding: 18px;
	text-align: center;
}

#nav ul li a:hover, #nav ul li a:active {
	color: #fff;
}

#nav ul li:hover > a {
	background: #333;
}

#nav ul ul {
	background: #fff;
	border: 1px solid #050a0d;
	border-bottom: none;
	border-top: 9px solid #333;
	display: none;
	float: left;
	left: 0;
	position: absolute;
	top: 100%;
	z-index: 9;
}

#nav ul ul li {
	border-bottom: 1px solid #050a0d;
}

#nav ul ul li a {
	width: 204px;
	color: #181a1c;
	padding: 12px 18px;
	text-align: left;
}

#nav ul ul li a:hover, #nav ul ul li a:active {
	background: #fff;
	color: #758088;
}

#nav ul ul li:hover > a {
	background: #fff;
}

#nav ul ul ul {
	border-top: 1px solid #050a0d;
	left: 100%;
	margin-top: -1px;
	top: 0;
}

#nav ul li:hover > ul {
	display: block;
}

#nav ul ul ul ul {
	display: none !important;
}

#mobile-nav {
	display: none;
}

#footer {
	width: 100%;
	background: linear-gradient(to bottom, rgba(5, 10, 13, 0) 0%, rgba(5, 10, 13, .33) 60%, rgba(5, 10, 13, .66) 100%), url('../images/background.png') left top repeat;
	border-top: 1px solid #050a0d;
	color: #fff;
	margin: 0 auto;
	padding: 24px 0;
	position: relative;
}

#footer .links .icon {
	width: 216px;
	height: 18px;
	color: #ffb424;
	display: inline-block;
	font-size: 15px;
	font-weight: 700;
	line-height: 18px;
	margin: 0 auto;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	vertical-align: middle;
}

#footer .links .icon .label {
	font-size: 14px;
	margin-left: 6px;
	text-transform: uppercase;
}

#footer .links .icon:hover {
	color: #fff;
}

#footer p {
	color: #758088;
	font-size: 15px;
}

#footer p a {
	color: #fff;
}

#footer p a:hover {
	color: #ffb424;
}

#footer p.copyright {
	float: left;
}

#footer p.credits {
	float: right;
}

.section {
	width: 100%;
	margin: 0 auto;
	position: relative;
}

.heading {
	background: #f3f3f3;
	padding: 60px 0 51px 0;
}

.heading h1 {
	color: #050a0d;
	font-size: 30px;
	letter-spacing: .45px;
	margin: 0 0 21px 0;
	position: relative;
	text-align: center;
	text-transform: uppercase;
}

.heading h1:after {
	width: 75px;
	border-bottom: 3px solid #ffb424;
	content: '';
	display: block;
	margin: 0 auto;
	padding-top: 21px;
}

.heading .tagline {
	max-width: 720px;
	color: #666;
	font-size: 18px;
	margin: 0 auto;
}

.generic {
	background: #fff;
	font-size: 18px;
	padding: 60px 0;
}

.generic ul li {
	list-style: none inside none;
}

.generic ul li:before {
	color: #ffb424;
	content: '\f0a9';
	font-family: 'FontAwesome';
	font-size: 18px;
	line-height: 21px;
	margin-right: 9px;
}

.generic ol li {
	list-style: decimal inside none;
}

.generic a.button {
	background: #ffb424;
	color: #050a0d;
	display: inline-block;
	float: left;
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	margin: 21px 0;
	padding: 12px 12px 12px 24px;
	position: relative;
	text-transform: uppercase;
}

.generic a.button:after {
	border-color: transparent transparent transparent #ffb424;
	border-style: solid;
	border-width: 24px 0 24px 24px;
	bottom: 0;
	content: '';
	position: absolute;
	right: -24px;
	top: 0;
	transition: all 0.3s ease 0s;
}

.generic a.button:hover {
	background: #050a0d;
	color: #fff;
}
	
.generic a.button:hover:after {
	border-color: transparent transparent transparent #050a0d;
}

.container {
	max-width: 1140px;
	min-width: 360px;
	margin: 0 auto;
}

.container-fluid {
	min-width: 360px;
	margin: 0 auto;
}

.clear {
	clear: both;
}

.clearfix:after {
	clear: both;
	content: '';
	display: block;
	height: 0;	
	visibility: hidden;
}

@keyframes zoom {
	0% {
		transform: scale(1, 1);
	}
	100% {
		transform: scale(1.1, 1.1);
	}
}

/* Home */

#slider {
	background: #181a1c;
}

#slider .container-fluid {
	overflow: hidden;
	padding: 0;
}

#slider .carousel {
	margin: 0 auto;
	overflow: hidden;
}

#slider .carousel .slide-image {
	width: 100vw;
	height: calc(100vw * (1/3));
	min-height: 450px;
	background: #181a1c url('../images/home/slide.jpg') center center/cover no-repeat fixed;
	margin: 0 auto;
	position: relative;
}

#slider .carousel .slide-overlay {
	width: 100%;
	left: 50%;
	padding: 15px;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 9;
}

#slider .carousel .slide-overlay .slide-caption {
	max-width: 840px;
	background: rgba(5, 10, 13, .84);
	border: 6px solid #ffb424;
	margin: 0 auto 30px auto;
	padding: 21px;
}

#slider .carousel .slide-overlay .slide-caption h1 {
	color: #fff;
	font-size: 45px;
	text-align: center;
	text-shadow: 0 2px 5px rgba(5, 10, 13, .99);
}

#slider .carousel .slide-overlay .slide-caption p {
	color: #fff;
	font-size: 21px;
	margin: 15px 0 0 0;
	text-align: center;
	text-shadow: 0 2px 5px rgba(5, 10, 13, .99);
}

#slider .carousel .slide-overlay a.button {
	background: #ffb424;
	box-shadow: inset 0 -2px 2px rgba(5, 10, 13, .3);
	color: #fff;
	display: inline-block;
	font-size: 21px;
	font-weight: 600;
	margin: 0 24px;
	padding: 12px 24px;
	text-transform: uppercase;
}

#slider .carousel .slide-overlay a.button:hover {
	background: rgba(5, 10, 13, .84);
	color: #fff;
}

#available {
	background: #181a1c url('../images/background-alt.png') left top repeat;
	border-bottom: 1px solid #050a0d;
	border-top: 1px solid #050a0d;
	padding: 75px 0 60px 0;
}

#available h1 {
	color: #fff;
	font-size: 36px;
	letter-spacing: .45px;
	margin: 0 0 60px 0;
	padding-top: 36px;
	position: relative;
	text-align: center;
	text-shadow: 0 2px 5px rgba(5, 10, 13, .99);
	text-transform: uppercase;
}

#available h1:before {
	width: 75px;
	height: 21px;
	border: 6px solid #ffb424;
	border-bottom-width: 0;
	content: '';
	display: inline-block;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
}

#available h1:after {
	width: 75px;
	border-bottom: 6px solid #ffb424;
	content: '';
	display: block;
	margin: 0 auto;
	padding-top: 21px;
}

#available figure {
	box-shadow: 3px 3px 1px #0e1214;
	display: block;
	margin: 0 0 30px 0;
	position: relative;
}

#available figure img {
	width: 100%;
	height: auto;
}

#available figure figcaption {
	width: 100%;
	display: table;
}

#available figure figcaption h2 {
	background: #fff;
	color: #050a0d;
	display: table-cell;
	font: 700 18px 'Source Sans Pro', sans-serif;
	padding: 18px;
	text-align: left;
	text-transform: capitalize;
	vertical-align: middle;
}

#available figure figcaption .icon {
	width: 63px;
	background: #ffb424;
	color: #050a0d;
	display: table-cell;
	font-size: 21px;
	padding: 18px;
	text-align: center;
	transition: all 0.3s ease 0s;
	vertical-align: middle;
}

#available figure:hover figcaption .icon {
	color: #fff;
}

#selling {
	background: #181a1c url('../images/home/sell.jpg') center center/cover no-repeat fixed;
	padding: 180px 0 201px 0;
}

#selling .triangle {
	margin: 0 auto;
	position: relative;
}

#selling .triangle img {
	width: 100%;
	height: auto;
}

#selling .triangle .link {
	display: block;
	left: 50%;
	margin-top: 45px;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 9;
}

#selling .triangle h1 {
	color: #fff;
	font-size: 36px;
	letter-spacing: .45px;
	line-height: 54px;
	margin-bottom: 21px;
	text-align: center;
	text-shadow: 0 2px 5px rgba(5, 10, 13, .99);
	text-transform: uppercase;
	word-spacing: 540px;
}

#selling .triangle .button {
	background: #ffb424;
	box-shadow: inset 0 -2px 2px rgba(5, 10, 13, .3);
	color: #fff;
	display: inline-block;
	font-size: 21px;
	font-weight: 600;
	padding: 12px 24px;
	text-transform: uppercase;
}

/* Contact */

#contact p {
	margin: 15px 0 21px 0;
}

#contact a {
	color: #2275ae;
}

#contact .social-media {
	margin: 15px 0 21px 0;
	text-align: left;
}

#contact .social-media .icon {
	width: 51px;
	height: 51px;
	background: #2275ae;
	color: #fff;
	display: inline-block;
	font-size: 21px;
	line-height: 51px;
	margin-right: 12px;
	position: relative;
	text-align: center;
	vertical-align: middle;
}

#contact .social-media .icon.linkedin {
	background: #007bb5;
}

#contact .social-media .icon.facebook {
	background: #3b5998;
}

#contact .social-media .icon.instagram {
	background: #c32aa3;
}

#google-map {
	width: 100%;
	height: 321px;
	background: #f3f3f3;
	margin: 0 auto;
}

#google-map .gm-style-iw {
	color: #30303a;
}

#google-map .gm-style-iw a {
	color: #2275ae;
}

#subscribe-form .container {
	max-width: 960px;
}

/* Media Queries */

@media only screen and (max-width: 414px) {
	#pre-header {
		display: none;
	}
}

@media only screen and (max-width: 575px) {
	#pre-header .logo {
		display: none;
	}
	#pre-header .links {
		float: left;
		margin: 0 0 0 -15px;
	}
	#footer .links {
		margin-bottom: 21px;
	}
	#footer .links .icon {
		display: block;
	}
	#footer p {
		float: none !important;
		margin: 6px 0;
		text-align: center;
	}
	#slider .carousel .slide-overlay .slide-caption h1 {
		font-size: 33px;
	}
	#slider .carousel .slide-overlay a.button {
		display: block;
		margin: 15px 0 0 0;
	}
	#available h1 {
		font-size: 30px;
	}
	#selling .triangle .link {
		margin-top: 21px;
	}
	#selling .triangle h1 {
		font-size: 24px;
		line-height: 48px;
		margin-bottom: 9px;
	}
	#selling .triangle .button {
		font-size: 12px;
		padding: 6px 12px;
	}
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
	#footer .links .icon {
		width: auto;
		margin: 0 6px;
	}
	#footer .links .icon .label {
		text-transform: none;
	}
	#slider .carousel .slide-overlay a.button {
		display: block;
		margin: 15px 0 0 0;
	}
}

@media only screen and (max-width: 767px) {
	#slider .carousel .slide-image {
		background-attachment: scroll;
	}
	#selling {
		background-attachment: scroll;
	}
	#selling .triangle {
		margin-bottom: 30px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	#selling .triangle .link {
		margin-top: 30px;
	}
	#selling .triangle h1 {
		font-size: 24px;
		line-height: 42px;
		margin-bottom: 9px;
	}
	#selling .triangle .button {
		font-size: 18px;
		padding: 9px 18px;
	}
}

@media only screen and (max-width: 991px) {

}

@media only screen and (min-width: 992px) and (max-width: 1199px) {

}

@media only screen and (max-width: 1199px) {
	
}

@media only screen and (max-width: 1200px) {
	#nav {
		display: none;
	}
	#mobile-nav {
		display: block;
		margin: 0 -15px;
	}
	#mobile-nav ul {
		background: #181a1c;
		border-top: 1px solid #050a0d;
		list-style: none;
		margin: 0;
		overflow: hidden;
		text-align: center;
	}
	#mobile-nav ul li {
		border-bottom: 1px solid #050a0d;
		margin: 0;
	}
	#mobile-nav ul li:hover {
		border-bottom: 1px solid #000;
	}
	#mobile-nav ul li a {
		color: #ffb424;
		display: block;
		font-size: 15px;
		font-weight: 700;
		letter-spacing: .045em;
		padding: 9px 15px;
		text-transform: uppercase;
	}
	#mobile-nav li a:hover, #mobile-nav .button:hover {
		color: #fff;
	}
	#mobile-nav ul li.parent-menu-item {
		border-bottom: none;
	}
	#mobile-nav li.parent-menu-item:hover > ul {
		border-top: 1px solid #000;
	}
	#mobile-nav li.parent-menu-item ul:hover {
		border-top: 1px solid #050a0d;
	}
	#mobile-nav ul.child-menu li a {
	}
	#mobile-nav .menu {
		height: 0;
		clear: both;
		transform: scaleY(0);		
		transform-origin: top;
		transition: transform 0.24s ease;
	}
	#mobile-nav .icon {
		cursor: pointer;
		display: inline-block;
		float: right;
		margin: 15px 15px 15px 0;
		padding: 15px 0;
		position: relative;
		user-select: none;
	}
	#mobile-nav .icon .hamburger {
		width: 30px;
		height: 3px;
		background: #fff;
		display: block;
		position: relative;
		transition: background 0.18s ease-out;
	}
	#mobile-nav .icon .hamburger:before, #mobile-nav .icon .hamburger:after {
		width: 100%;
		height: 100%;
		background: #fff;
		content: '';
		display: block;
		position: absolute;
		transition: all 0.24s ease-out;
	}
	#mobile-nav .icon .hamburger:before {
		top: 9px;
	}
	#mobile-nav .icon .hamburger:after {
		top: -9px;
	}
	#mobile-nav .button {
		display: none;
	}
	#mobile-nav .button:checked ~ .menu {
		height: auto;
		transform: scaleY(1);
	}
	#mobile-nav .button:checked ~ .icon .hamburger {
		background: transparent;
	}
	#mobile-nav .button:checked ~ .icon .hamburger:before {
		transform: rotate(-45deg);
	}
	#mobile-nav .button:checked ~ .icon .hamburger:after {
		transform: rotate(45deg);
	}
	#mobile-nav .button:checked ~ .icon:not(.steps) .hamburger:before,
	#mobile-nav .button:checked ~ .icon:not(.steps) .hamburger:after {
		top: 0;
	}
}

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

}