body {
    width: 100%;
    height: 100%;
}

html {
    width: 100%;
    height: 100%;
}
		
.product-image{
	max-width: 100%;
}
		
iframe {
	max-width: 100%;
	max-height: 100%;
}
		

.navbar-transparent {
   background-color: white;
   background: white;
   border-color: transparent;
}

@media(min-width:767px) {
    .navbar {
        padding: 0px 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
    }
}

/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children 
of those sections to manage the look and feel of the site. */

#discovery {
    height: 100%;
    padding-top: 10px;
    text-align: center;
    background: #ffffff;
}

#pre_idea, #pre_virt, #ind_virt, #video, #contact {
    height: 100%;
    padding-top: 40px;
    text-align: center;
    background: #ffffff;
}	
		
.video-background-holder {
  position: relative;
  background-color: black;
  color: white;
  height: calc(100vh - 72px);
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

.video-background-holder video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.video-background-content {
  position: relative;
  z-index: 2;
}

.video-background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

@import url(https://fonts.googleapis.com/css?family=Merriweather);
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  background-color: white;
  background: white;
  font-family: 'Merriweather', sans-serif;
  margin: 0;
}
		
h1 {
  	text-transform: uppercase;
  	text-align: center;
	color:#fff;
	font-size:40px;
	font-weight:bold;
	line-height:49px;
  	text-shadow: 1px 1px 0 #222;
}
		
p.lead { 
	color:#fff;
	font-weight:bold;
	font-size:18px;
	line-height:24px;
}
		
h2 {
	text-transform: uppercase;
	font-weight: 900;
	color: #000;
	font-size:34px;
	line-height:41px;
}
		
#content h2 {
	font-weight: 550;
}
		
p { font-size:18px; line-height:28px; }
		
#contact_form label {
    font-weight: bold;
	font-size: 12px;
}	
		
form {
  max-width: 1000px;
  text-align: left;
  margin: 20px auto;
}

form label {
  margin: 0px;
}
		
form input {
  border: 0;
  outline: 0;
  padding: 0.5em;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  display: block;
  width: 100%;
  margin-top: 0.2em;
  font-family: 'Merriweather', sans-serif;
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  resize: none;
  background-color: #f8f8f8;
}
form input:focus, form textarea:focus {
  -moz-box-shadow: 0 0px 2px #e74c3c !important;
  -webkit-box-shadow: 0 0px 2px #e74c3c !important;
  box-shadow: 0 0px 2px #e74c3c !important;
}
form #input-submit {
  color: #f8f8f8;
  background: #316494;
  cursor: pointer;
}
form #input-submit:hover {
  -moz-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
  -webkit-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
  box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
}

footer {
	padding: 20px 10px 10px 10px;
	width: 100%;
    margin-top: 20px;
    text-align: center;
    background: #ffffff;
	border: 1px solid #f1f1f1;
}
		
footer p{
	font-weight: bold;
	font-size: 11px;
}

.half {
  float: left;
  width: 48%;
  margin-bottom: 1em;
}

.right {
  width: 50%;
}

.left {
  margin-right: 2%;
}
		
.d-flex.h-100.text-center.align-items-center {
	padding-top:25%;	
}

@media (max-width: 480px) {
  .half {
    width: 100%;
    float: none;
    margin-bottom: 0;
  }
}
/* Clearfix */
.cf:before,
.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.cf:after {
  clear: both;
}
.embed-container {
  --video--width: 1296;
  --video--height: 540;

  position: relative;
  padding-bottom: calc(var(--video--height) / var(--video--width) * 100%); /* 41.66666667% */
  overflow: hidden;
  max-width: 100%;
  background: black;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
		
.embed-container iframe,
.embed-container object,
.embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.row {margin:50px auto;}

header {
  position: relative;
  background-color: black;
  height: 75vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .container {
  position: relative;
  z-index: 2;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

/* Media Query for devices withi coarse pointers and no hover functionality */

/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */

@media (pointer: coarse) and (hover: none) {
  header {
    background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
  }

  header video {
    display: none;
  }
}

	#frmContact div label {
    margin-left: 5px;
    text-align: left;
    display: block;
}
	label { text-align:left;}
	
	form .btnAction {
    color: #f8f8f8;
    background: #316494;
    cursor: pointer;
}
form input.demoInputBox {
    border: 1px;
    outline: 0;
    padding: 0.5em;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    display: block;
    width: 100%;
    margin-top: 0.2em;
    font-family: 'Merriweather', sans-serif;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
    resize: none;
    background-color: #f8f8f8;
}
	.demoInputBox { width:100%;}
#frmContact {padding:10px;}
#frmContact div{margin-bottom: 15px}
#frmContact div label{margin-left: 5px}
.demoInputBox{padding:10px; background: #f8f8f8; border:#f8f8f8 1px solid; border-radius:4px;}
.error{background-color: #FF6600;border:#AA4502 1px solid;padding: 5px 10px;color: #FFFFFF;border-radius:4px;}
.success{background-color: #12CC1A;border:#0FA015 1px solid;padding: 5px 10px;color: #FFFFFF;border-radius:4px;}
.info{font-size:.8em;color: #FF6600;letter-spacing:2px;padding-left:5px;}
.btnAction{background-color:#316494;border:0;padding:10px 40px;color:#f8f8f8;border:#F0F0F0 1px solid; border-radius:4px;cursor: pointer; width:100%;}