/* template.css overwrites -- use only when absolutely necessary
================================*/
.banner-img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 450px;
	background: url(../imgs/hero.jpg)no-repeat 0 0;
	background-size: 189.72%;
}


/* Button Module - Global
================================*/
.btns {
	display: inline-block;
	position: relative;
	margin: 0;
	padding: 0.6em 1em;
	outline: none;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 0.3em;
	border: 1px solid #ADADAD;
	background: #fff;
	color: #4d4d4d;
	font: bold 1.2em/1 'Arial Narrow','Helvetica Narrow', arial, helvetica, sans-serif;
	font-stretch: condensed; /* for rendering Arial Narrow in FF properly */ 
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	text-transform: uppercase;
}
.btn-mini {
	padding: 0.5em 0.7em;
	outline: none;
	border: 1px solid #ADADAD;
	font-size: 0.875em;
}
.btns:hover, 
.btns:active, 
.btns-mini:hover, 
.btns-mini:active {
	color: #0066ff;
}
.btns-wide { width: 100%; }
.btns:disabled,
.btns:disabled:hover {
	background: #E4E4E4;
	border-color: #DDDDDD;
	color: #B8B8B8;
	cursor: not-allowed;
	pointer-events: none;
}

/* Button Hierarchy Styles */
.btn-primary, 
.btn-secondary, 
.btn-alt { text-transform: uppercase; }

.btn-primarys {
	border-color: #E68626;
	background-color: #FFC010;
	background: linear-gradient(to bottom, #FFC010, #F9A21B);
	color: #552F00;
}
.btn-primarys:hover, 
.btn-primarys:active {
	border-color: #E68626;
	background-color: #F9A21B;
	background: linear-gradient(to bottom, #F9A21B, #FFC010);
	color: #552F00;
}

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


/* custom CSS on a per project basis
================================*/

.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.row > [class^="col-"] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.fixed-top {position: fixed; top: 0; right: 0; left: 0; z-index: 1030; width: 100%;}
.section-wide {width: 100%;}
.section-inner {font-family: 'Open Sans', sans-serif;}
.section-wide.pitch {padding: 3% 12%; box-sizing: border-box; font: 300 2.25em/1.25em 'Open Sans', sans-serif; background-color: #002d6a; color: #FFF; text-align: center;}
.tab-container {margin: 2%; padding: 2%;}
.item {margin: 2% 0; height: 100%; border-bottom: 1px solid #CCC; padding: 5% 0;}

ul.nav.nav-tabs.nav-justified li a {border-radius: 0;}
ul.nav.nav-tabs.nav-justified li {background-color: #FFF;}
ul.nav.nav-tabs.nav-justified li.active {border-top: 4px solid #FCA631;}
ul.nav li a h4 {font-weight: 700; font-size: 1.125em;}


.prodimg {max-width: 48%; float: right; margin-left: 5%;}

h5.category {font-size: 2.5em; font-weight: 700; color: #FCA631;}
h6.item-title {font-size: 1.125em; line-height: 1.25em; font-weight: 700; padding-right: 2%; width: 100%; padding-top: 4%;}
.page-btn {width: auto;}
.intro {max-width: 55%; margin-top: 3%;}

a.more {display: block; margin: 3% 0 0 0; color: #2d2d2c; font-weight: 700; text-decoration: underline; font-size: .9em;}

ul.bullets {list-style: disc; display: block; margin: 0 0 4% 4%;}

.section-wide#hero {background-color: #e5e5e5;}

a.modal-link {float: right; display: block; clear: right; font-size: 2em; color: rgba(179,5,8,1.00); cursor: pointer; margin-right: 15%;}
a.modal-link-info {float: right; display: block; font-size: 2em; color: rgba(179,5,8,1.00); cursor: pointer; margin-right: 20px;}
a.modal-link:hover {color: rgba(220,16,19,1.00);}
a.modal-link-info:hover {color: rgba(220,16,19,1.00);}
.modal-header {border-bottom: 0;}
#myModal-video, #myModal-video-msi .modal-content {background-color: #000;}
#myModal-video, #myModal-video-msi .modal-content .close {color: #FFF; opacity: .7;}

a:hover {text-decoration: none;}

.modal-link {font-weight: 700;}

/* responsive CSS on a per project basis
================================*/

@media only screen and (max-width: 768px) {
	/* insert responsive CSS for screens below 1024px */
	.prodimg {max-width: 80%; margin: 3% auto; display: block; float: none;}
	a.modal-link {float: none; display: inline; font-size: 2em; color: rgba(179,5,8,1.00); cursor: pointer; text-align: center; margin-right: 3%;}
	a.modal-link-info {float: none; display: inline; font-size: 2em; color: rgba(179,5,8,1.00); cursor: pointer; text-align: center;}
	p.intro {max-width: 90%;}
	.section-wide.pitch {font-size: 1.75em;}	
}


@media only screen and (min-width: 375px) {
	/* insert responsive CSS for screens above 375px */
}
@media only screen and (min-width: 481px) {
	/* insert responsive CSS for screens above 481px */
}
@media only screen and (min-width: 641px) {
	/* insert responsive CSS for screens above 641px */
	.banner-img {
		background-position: 0 100%;
		background-size: 100%;
	}	
}
@media only screen and (min-width: 769px) {
	/* insert responsive CSS for screens above 769px */
}
@media only screen and (min-width: 1025px) {
	/* insert responsive CSS for screens above 1025px */
}