/* ===================================
1. General
==================================== */

body {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6em;
	color: #656565;
	background-color: #000000;
}

@media (min-width: 1050px) {
	.navbar-container {
		margin-left: 300px;
	}	
}

.content-section-container {
	background-color: white;
	padding: 20px;
	border-radius: 20px;
	margin-bottom: 30px;
	color: black;
}

	.content-section-container img {
		max-width: 100%;
		height: auto;
	}

	.content-section-container a,
	.content-section-container a:hover {
		color: #6600CC
	}

		.content-section-container .btn-primary {
			color: #ffffff !important;
		}

.content-section-container-dark {
	background-color: black;
	color: white;
	/*padding: 20px;*/
	border-radius: 20px;
	margin-bottom: 30px;
}

	.content-section-container-dark img {
		max-width: 100%;
		height: auto;
	}

	.content-section-container-dark h2 {
		color: white;
		text-align: center;
		font-family: russo-one;
	}	

a:active {
	outline: 0;
}

.clear {
	clear:both;
}

h1,h2, h3, h4, h5, h6 {
	font-family: russo-one, 'Open Sans', Arial, sans-serif;
	font-weight:700;
	line-height:1.1em;
	color:#ffffff;
	margin-bottom: 20px;
}

.modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4, .modal-header h5, .modal-header h6 {
	font-family: 'Open Sans', Arial, sans-serif;
	font-weight: 700;
	line-height: 1.1em;
	color: #000000;
	margin-bottom: 0px;
}

.content-section-container h1,
.content-section-container h2,
.content-section-container h3,
.content-section-container h4,
.content-section-container h5,
.content-section-container h6 {
	color: #333;
}

p {
	color: black;
}

.card {
	background-color: #ffffff;
	border: none;
}

/* ===================================
2. layout
==================================== */

.container {
	padding:0 20px 0 20px;
	position:relative;
}

#wrapper{
	width:100%;
	margin:0;	
	padding:0;
}


.row,.row-fluid {
	margin-bottom:30px;
}

.row .row,.row-fluid .row-fluid{
	margin-bottom:30px;
}

.row.nomargin,.row-fluid.nomargin {
	margin-bottom:0;
}

/* ===================================
4. Header
==================================== */

/* --- header -- */
.header-logo {
	position: fixed;
	padding: 10px;
	z-index: 10;
	background-color: transparent;
	border-bottom-right-radius: 25px;
	left: 50px;
}

	.header-logo img {
		width: 250px;
	}

header .navbar {
	margin-bottom: 0;
	background-color: #111111;
}

.navbar-default {
	border: none;
	background-color: transparent;
}

	.navbar-default:has(.navbar-collapse.in) {
		background-color: #000000dd;
	}

header .navbar-collapse  ul.navbar-nav {
    margin-right: 0;	
}

header .nav li a:hover,
header .nav li a:focus,
header .nav li.active a,
header .nav li.active a:hover,
header .nav li a.dropdown-toggle:hover,
header .nav li a.dropdown-toggle:focus,
header .nav li.active ul.dropdown-menu li a:hover,
header .nav li.active ul.dropdown-menu li.active a {
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;	
}

header .navbar-default .navbar-nav > .open > a,
header .navbar-default .navbar-nav > .open > a:hover,
header .navbar-default .navbar-nav > .open > a:focus {
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}


header .navbar {
	min-height: 90px;
	border-radius: 0px;
	position: fixed;
	width: 100%;
	z-index: 5;
}

header .navbar-collapse.in {
	overflow-y: auto;
	z-index: 10;	
}

header .navbar-nav > li  {
    padding-top: 20px;
}

header  .navbar-nav > li > a {
    padding-bottom: 6px;
    padding-top: 5px;
    margin-left: 2px;
    line-height: 30px;
	font-weight: 700;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.squad-call-button {
	border-radius: 15px;
	margin-bottom: 10px;
}

.dropdown-menu li {
	background-color: #222222;
	border-bottom: 1px solid #444444 !important;
}

	.dropdown-menu li a {
		color: #fff !important;
	}

.dropdown-menu li a:hover {
	color: #000 !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  background-color: #fff;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  background-color:  #7B7B7B;
}	
	
.dropdown-menu  {
    box-shadow: none;
    border-radius: 0;
	border: none;
	padding-top: 20px !important;
	background-color: transparent;
}

.dropdown-menu li:last-child  {
	padding-bottom: 0 !important;
	margin-bottom: 0;
}

header .nav li .dropdown-menu  {
   padding: 0;
}

header .nav li .dropdown-menu li a {
   line-height: 28px;
   padding: 3px 12px;
}

/* --- menu --- */

header ul.nav li {
	border:none;
	margin:0;
}

header ul.nav li a {	
	font-size:16px;
	border:none;
	font-weight:700;
	text-transform:uppercase;
}

header ul.nav li ul li a {	
	font-size:16px;
	border:none;
	font-weight:300;
	text-transform:uppercase;
}

.navbar .nav > li > a {
	text-shadow: none;
	color: #fff;
}

.navbar .nav a:hover {
	background: none;	
}

.navbar .nav > .active > a, .navbar .nav > .active > a:hover {
	background: none;
	font-weight: 700;
}

	.navbar .nav > .active > a:active, .navbar .nav > .active > a:focus {
		background: none;
		outline: 0;
		font-weight: 700;
	}

.navbar .nav li .dropdown-menu {
	z-index: 2000;
}

header ul.nav li ul {
	margin-top: 1px;
}
header ul.nav li ul li ul {
	margin: 1px 0 0 1px;
}
.dropdown-menu .dropdown i {
	position: absolute;
	right: 0;
	margin-top: 3px;
	padding-left: 20px;
}

.navbar .nav > li > .dropdown-menu:before {
	display: inline-block;
	border-right: none;
	border-bottom: none;
	border-left: none;
	border-bottom-color: none;
	content: none;
}

ul.nav li.dropdown a {
	z-index: 1000;
	display: block;
}

@media (max-width: 640px) {	
	.sub-page-header-image-large-only {
		display: none;
	}

	.home-video-caption {
		font-size: 24px !important;
		top: 100px !important;
		padding: 20px;		
	}		
}

/* ===================================
8. Section: Content
==================================== */

#content {
	position:relative;
/*	background:#fff;*/
	/*padding:50px 0 40px 0;*/
}

#content img {
	max-width:100%;
	height:auto;
}

/* --- box --- */

.box {
	width: 100%;
}
.box-gray  {
	background: #f8f8f8;
	padding: 20px 20px 30px;
}
.box-gray  h4,.box-gray  i {
	margin-bottom: 20px;
}
.box-bottom {
	padding: 20px 0;
	text-align: center;
}
.box-bottom a {
	color: #fff;
	font-weight: 700;
}
.box-bottom a:hover {
	color: #eee;
	text-decoration: none;
}


/* --- list style --- */

ul.link-list{
	margin:0;
	padding:0;
	list-style:none;
}

ul.link-list li{
	margin:0;
	padding:2px 0 2px 0;
	list-style:none;
}

footer ul.link-list li a{
	color:#fff;
}
footer ul.link-list li a:hover {
	color:#eee;
}
/* --- Heading style --- */

.widgetheading {
	width:100%;
	padding: 0px 0px 10px 0px;
	font-size: 16px;
	font-family: russo-one;
}

#bottom .widgetheading {
	position: relative;
	border-bottom: #e6e6e6 1px solid;
	padding-bottom: 9px;
}

aside .widgetheading {
	position: relative;
	border-bottom: #e9e9e9 1px solid;
	padding-bottom: 9px;
}

footer .widgetheading {
	position: relative;
}

#bottom .widget .widgetheading span, aside .widget .widgetheading span, footer .widget .widgetheading span {	
	position: absolute;
	width: 60px;
	height: 1px;
	bottom: -1px;
	right:0;

}

/* ===============================
16. Footer
================================ */

footer{
	color:#f8f8f8;
}

footer a {
	color:#fff;
}

footer a:hover {
	color:#eee;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6{
	color:#fff;
}

footer address {
	line-height:1.6em;
}

footer h5 a:hover, footer a:hover {
	text-decoration:none;
}

#sub-footer{
	text-shadow:none;
	color:#f5f5f5;
	padding:0;
	padding-top:30px;
	margin:20px 0 0 0;
}

#sub-footer p{
	margin:0;
	padding:0;
}

#sub-footer span{
	color:#f5f5f5;
}

.copyright {
	text-align:left;
	font-size:16px;
}

.solidline {
	border-top:1px solid #f5f5f5;
	margin:0 0 30px;
}

/* =============================
18. Position & alignment
============================= */

.aligncenter{
	text-align:center;
}

.aligncenter span{
	margin-left:0;
}

.marginbot20{
	margin-bottom:20px;
}

/* =============================
21. Media queries 
============================= */
@media (max-width: 450px) {
	.splash-caption {
		font-size: 24px !important;
		margin-top: 20px;
	}

	.splash-text {
		font-size: 16px !important;
		margin-bottom: 30px;
	}

	.splash-description {
		padding-bottom: 45px !important;
		margin-left: auto;
		margin-right: auto;
		top: 10px !important;
		left: 0px !important;
		height: calc(100vh - 20px) !important;
	}

	.splash-navigation {
		position: relative !important;
		top: 0px !important;
		right: 0px !important;
		display: flex;
		gap: 20px;
		right: 0px !important;
		justify-content: center;
		width: 100%;
		margin-top: -60px;
	}

		.splash-navigation button {
			margin-bottom: 10px !important;
			margin-left: 10px;
			width: 30px !important;
			height: 30px !important;
		}

	.nav-button-label {
		display: none;
	}

	.header-logo {
		left: 0px !important;
	}

	.home-video-caption {
		left: 20px !important;
	}

	#home-scroll-instructions {
		right: 10px !important;
	}

	.home-video-header {
		font-size: 24px;
		line-height: 27px !important;
	}

	.home-video-subtitle {
		font-size: 18px !important;
		line-height: 21px !important;
	}

	.home-video-details {
		display: none;
	}
}

@media (max-height: 400px) {
	.home-video-header {
		display: none;
	}

	.home-video-details {
		display: none;
	}
}

@media (min-width: 451px) {
	.slide-mobile-navigation {
		display:none;
	}	
}

@media (max-width: 1050px) {
	body {
		padding-right: 0;
		padding-left: 0;
	}

	.header-logo img {
		width: 140px;		
	}

	header .navbar-nav > li {
		padding-bottom: 0;
		padding-top: 0;
	}

	.navbar-header {
		float: none;
	}

	.navbar-left, .navbar-right {
		float: none !important;
	}

	.navbar-toggle {
		display: block;
	}

	.navbar-collapse {
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.navbar-fixed-top {
		top: 0;
		border-width: 0 0 1px;
	}

	.navbar-collapse.collapse {
		display: none !important;
		border: none !important;
	}

	.navbar-collapse.collapsing {
		border: none;
		margin-top: 0px;
		background-color: #000000dd;
	}

	.navbar-nav {
		float: none !important;
		margin-top: 7.5px;
	}

		.navbar-nav > li {
			float: none;
		}

			.navbar-nav > li > a {
				padding-top: 0px;
				padding-bottom: 0px;
			}

	.collapse.in {
		display: block !important;
		max-height: unset !important;
	}

	.dropdown-menu {
		position: absolute;
		top: 0;
		left: 40px;
		z-index: 1000;
		display: none;
		float: left;
		min-width: 160px;
		padding: 5px 0;
		margin: 2px 0 0;
		font-size: 13px;
		list-style: none;
		background-color: #000000;
		background-clip: padding-box;
		border: 1px solid #f5f5f5;
		border: 1px solid rgba(0, 0, 0, .15);
		border-radius: 0;
		-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
		box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
	}

	/**********************/
	
	footer .col-lg-1, footer .col-lg-2, footer .col-lg-3, footer .col-lg-4, footer .col-lg-5, footer .col-lg-6,
	footer .col-lg-7, footer .col-lg-8, footer .col-lg-9, footer .col-lg-10, footer .col-lg-11, footer .col-lg-12 {
		margin-bottom: 20px;
	}

	[class*="span"] {
		margin-bottom: 20px;
	}

	.splash-description-close {
		position: absolute;
		top: 30px;
		right: 30px;
		background: transparent;
		border: none;
		font-size: 24px;
	}

	.sub-page-header-image {
		height: 280px !important;
	}

	.navbar-nav {
		background-color: #111111;
	}
} /* End max-width 1050 section */

/* Styles for iPad mini horizontal. */
@media (min-width: 993px) and (max-width: 1024px) {
	.dropdown-menu {
		padding-top: 5px !important;
	}
}

.splash-container {
	position: relative;
	overflow: hidden;
	background-color: black;
	padding-top: 100px;
	margin-bottom: -40px;
}

.splash-container .row {
	margin-bottom: 0px !important;
}

.splash-image {
	width: 100%;
	display: block;
	max-height: min(calc(100vw / 1920* 1280), 90vh);
	overflow: hidden;
	object-fit: cover;
	padding-bottom: 20px;
}

.splash-description {
	position: fixed;
	top: calc(50% - 45vh);
	left: calc(50% - (40vh / 4 * 3));
	color: white;
	width: calc(80vh / 4 * 3);
	height: 90vh;
	padding: 20px;
	padding-bottom: 25px;
	background: #000000ee;
	border-radius: 10px;
	line-height: 30px;
	z-index: 10;
	max-width: 100vw;
	max-height: 100vh;
}

.splash-description-close {
	position: absolute;
	top: 30px;
	right: 30px;
	background: transparent;
	border: none;
	font-size: 24px;
}

.splash-caption {
	font-size: 35px;
	font-weight: bold;
	margin-top: 20px;
}

.splash-text {
	font-size: 20px;
	margin-top: 10px;
	margin-bottom: 30px;
}

.splash-navigation {
	position:absolute;
	right: 40px;
	top: 0px;
}

	.splash-navigation button {
		margin-top: 20px;
		background: blue;
		color: white;
		border-radius: 20px;
		padding: 10px;
		width: 130px;
		border: none;
	}

		.splash-navigation button.active {
			background: #7b7b7b;
			color: white;
			font-weight: bold;
			border: solid lightgray 2px;
		}

.splash-more-details {
	float: right;
}

.sub-page-header-image {
	overflow: hidden;
	background-color: black;
	max-height: 320px;
	padding: 0px;
}

	.sub-page-header-image img {
		max-height: 500px;
		max-width: 100%;
	}

.sub-page-splash-text {
	position: absolute;
	top: 180px;
	left: 50%;
	color: white;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	background-color: #000000cc;
	padding: 20px;
	border-radius: 25px;
	line-height: 32px;
}

.squad-call-banner-image {
	max-height: 280px;
	overflow: hidden;
}

.video-sample-560 {
	width: 560px;
	border: 1px solid black;
	max-width: 100%;
}

/* Fading animation */
.slide-fade {
	-webkit-animation-name: slide-fade;
	-webkit-animation-duration: 2.0s;
	animation-name: slide-fade;
	animation-duration: 2.0s;
}

@-webkit-keyframes slide-fade {
	from {
		opacity: .4
	}

	to {
		opacity: 1
	}
}

@keyframes slide-fade {
	from {
		opacity: .4
	}

	to {
		opacity: 1
	}
}

.slideshow-container {
	background-color: black;
}

.icon-bar {
	background-color: #ddd !important;
}

.video-label {
	text-align: center;
	font-style: italic;
}

.slide-navigation-button {
	background-color: transparent;
	color: white;
	width: 40px;
	height: 40px;
	margin-right: 20px;
	border-radius: 10px;
	font-weight: bold;
}

.slide-navigation {
	position: absolute;
	left: 0px;
	bottom: 20px;
	width: calc(100% - 40px);
	margin-left: 20px;
}

.feature-image-container img {
	position: relative;
	border-radius: 50px;
}

.feature-image-container:hover {
	cursor: pointer;
}

.feature-caption {
	position: absolute;
	bottom: 20px;
	color: white;
	text-align: center;
	width: calc(100% - 60px);
	font-size: x-large;
	background-color: #00000088;
	border-radius: 25px;
	margin-left: 15px;
	padding: 10px;
	font-family: russo-one;
}

.feature-more-details {
	position: absolute;
	top: 10px;
	right: 10px;
}

.product-home-page-container {
	height: 380px;
}

.home-video-caption {
	position: absolute;
	left: 30px;
	top: 140px;
	font-size: 42px;
	font-family: russo-one;
	background-color: #000000bb;
	border-radius: 25px;
	z-index: 2;
	color: white;
	line-height: 45px;
	padding: 20px;
	text-shadow: 7px 7px 10px red;
	box-shadow: 15px 15px 20px;
}

	.home-video-caption div {
		padding: 15px 30px 15px 30px;
	}

	.home-video-caption div:first-child {
		padding-top:30px!important;
	}

	.home-video-caption div:last-child {
		padding-bottom: 30px !important;
	}

.home-video-header {
	border-bottom: 1px solid white;
	padding-bottom: 10px;
}

.home-video-subtitle {
	font-size: 24px;
	line-height: 30px;
	text-shadow: none;
}

.home-video-details {
	font-size: 18px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: none;
}

#home-scroll-instructions {
	position: absolute;
	bottom: 20px;
	right: 70px;
	color: white;
	background-color: #00000044;
	border-radius: 25px;
	z-index: 2;
	padding: 10px 20px 10px 20px;
}

.splash-video {
	width: 100%;
	height: 100%;
}

#splash-video-container {
	position: relative;
	width: 100vw;
	max-width: 100%;
	margin-bottom: -80px;
	height: 100vh;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.color-white {
	color: #ffffff;
}

.splash-description.short-landscape {
	margin-top: 10px;
	margin-left: calc(100vw - 270px);
	width: 270px;
	height: calc(100vh - 20px);
	border-radius: 0px;
	top: 0px !important;	
	left: 0px !important;
}

	.splash-description.short-landscape .splash-text {
		position: absolute;
		left: calc(-100vw + 270px);
		top: 0px;
		height: calc(100vh - 30px);
		width: calc(100vw - 270px);
		background-color: #000000;
		font-size: 20px;
		padding: 10px 10px 10px 20px;
	}

	.splash-description.short-landscape .splash-image {
		width: 230px;
	}

.social-links a {
	color: black;
}

.menu-icon {
	width: 40px;
}