<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<video width="320" height="240" poster="https://www.w3schools.com/images/w3html5.gif" controls>
<source src="https://www.youtube.com/watch?v=g0CEBaNA4WA">
Your browser does not support the video tag.
</video>
<div id="video-container">
<!-- Video -->
<video id="video" width="640" height="365" poster="https://www.w3schools.com/images/w3html5.gif">
<source src="https://www.youtube.com/watch?v=g0CEBaNA4WA">
<p>
Your browser doesn't support HTML5 video.
<a href="videos/mikethefrog.mp4">Download</a> the video instead.
</p>
</video>
<!-- Video Controls -->
<div id="video-controls">
<button type="button" id="play-pause">Play</button>
<input type="range" id="seek-bar" value="0">
<button type="button" id="mute">Mute</button>
<input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">
<button type="button" id="full-screen">Full-Screen</button>
</div>
</div>
else {
video.setAttribute("controls","controls")
}
video::-webkit-media-controls-panel {
display: block;
height: 55px;
width: 532px;
bottom: 0;
top: 291px;
position: relative;
}
<script>
$(document).ready(function() {
$( document ).on( 'focus', ':input', function(){
$( this ).attr( 'autocomplete', 'off' );
});
$('body').on('keydown', 'input[name="firstname"]', function(e) {
var regex = /^[a-zA-Z]+$/;
if (regex.test(this.value) !== true)
this.value = this.value.replace(/[^a-zA-Z]$/, '');
});
$('body').on('keydown', 'input[name="lastname"]', function(e) {
var regex = /^[a-zA-Z]+$/;
if (regex.test(this.value) !== true)
this.value = this.value.replace(/[^a-zA-Z]$/, '');
});
$('body').on('change', 'input', function(e) {
canChangeColor();
});
function canChangeColor(){
var can = false;
var firstname = jQuery("input[name=firstname]").val();
var lastname = jQuery("input[name=lastname]").val();
var email = jQuery("input[name=email]").val();
var company = jQuery("input[name=company]").val();
var zip = jQuery("input[name=zip]").val();
var checkbox = jQuery("input[type=checkbox]").val();
if(firstname !== "" && lastname !== "" && email !== "" && company !== "" && zip !== "" && $('input[type=checkbox]').is(':checked')) {
//alert("true");
can = true;
}
else
{
can = false;
}
if(can){
//alert("tr");
$('.hs-button.primary.large').css({background:'#2b7f72'});
}else{
//alert("fl");
$('.hs-button.primary.large').css({background:'#c2c2c2'});
}
}
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
$('.video').parent().click(function () {
if($(this).children(".video").get(0).paused){
$(this).children(".video").get(0).play();
$(this).children(".playbtn").fadeOut();
$('.playbtn').css('opacity', '0');
$('.careertext').css('opacity', '0');
$('.video-overlay').css('opacity', '0');
$('.video').css('z-index','11');
}
else{
$(this).children(".video").get(0).pause();
/* $(this).children(".playbtn").fadeIn();
$('.playbtn').css('opacity', '1');
$('.careertext').css('opacity', '1');
$('.video-overlay').css('opacity', '1');
$('.video').css('z-index','1');*/
}
});
var video = document.getElementById("video");
var timeStarted = -1;
var timePlayed = 0;
var duration = 0;
function videoStoppedPlaying(event) {
if(timePlayed>=duration && event.type=="ended") {
console.log("complete");
$('.playbtn').css('opacity', '1');
$('.careertext').css('opacity', '1');
$('.video-overlay').css('opacity', '1');
$('.video').css('z-index','1');
}
else {
alert("2");
video.setAttribute("controls","controls");
}
}
video.addEventListener("ended", videoStoppedPlaying);
video.addEventListener("pause", videoStoppedPlaying);
//assign video element to variable vid
var vid = document.getElementById("video");
function videoTimeUpdate(e)
{
//set controls settings to controls,this make controls show everytime this event is triggered
vid.setAttribute("controls","controls");
}
//add event listener to video for timeupdate event
vid.addEventListener('timeupdate', videoTimeUpdate, false);
$(document).on('click', '.viewcases a', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 800);
});
});
/* $('body').on('click', '#formID input[type="submit"]', function(e) {
// Your validation Code Here
if (!formIsValid) {
e.preventDefault();
}
}*
//use .one to ensure this only happens once
/* $("#play-video").one(function(){
//as noted in addendum, check for querystring exitence
var symbol = $("#video1")[0].src.indexOf("?") > -1 ? "&" : "?";
//modify source to autoplay and start video
$("#video1")[0].src += symbol + "autoplay=1";
});*/
/* $('.link').click(function(event){
event.preventDefault();
var url =$(this).html("https://cdn2.hubspot.net/hubfs/3947994/Interbay/SampleVideo.mp4");
$("#videoDiv").html('<iframe width="400" height="400" src="'+url+'?wmode=transparent" frameborder="0" allowfullscreen></iframe>');
});
$('.playvideo').click(function(){
alert('2');
/* event.preventDefault();
var url ='https://cdn2.hubspot.net/hubfs/3947994/Interbay/SampleVideo.mp4';
$(".bannervideo").html('<iframe width="400" height="400" src="'+url+'?wmode=transparent" frameborder="0" allowfullscreen></iframe>');
});*/
</script>
<style>
@font-face {
font-family: 'GT-Walsheim-Regular';
src: url('https://cdn2.hubspot.net/hubfs/3947994/coballandingpage/GT-Walsheim-Regular.eot') format('eot'),
url('https://cdn2.hubspot.net/hubfs/3947994/coballandingpage/GT-Walsheim-Regular.woff') format('woff'),
url('https://cdn2.hubspot.net/hubfs/3947994/coballandingpage/GT-Walsheim-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'GT-Walsheim-Medium';
src: url('https://cdn2.hubspot.net/hubfs/3947994/coballandingpage/GT-Walsheim-Medium.eot') format('eot'),
url('https://cdn2.hubspot.net/hubfs/3947994/coballandingpage/GT-Walsheim-Medium.woff') format('woff'),
url('https://cdn2.hubspot.net/hubfs/3947994/coballandingpage/GT-Walsheim-Medium.ttf') format('truetype');
}
@font-face {
font-family: 'GT-Walsheim-Light';
src: url('https://cdn2.hubspot.net/hubfs/3947994/coballandingpage/GT-Walsheim-Light.eot') format('eot'),
url('https://cdn2.hubspot.net/hubfs/3947994/coballandingpage/GT-Walsheim-Light.woff') format('woff'),
url('https://cdn2.hubspot.net/hubfs/3947994/coballandingpage/GT-Walsheim-Light.ttf') format('truetype');
}
/*
video::-webkit-media-controls-enclosure {
display: flex !important;
opacity: 1 !important;
}
video::-webkit-media-controls-panel {
display: flex;
height: 55px;
width: 532px;
bottom: 0;
top: 291px;
background: #000;
position: relative;
-webkit-appearance: none;
}
video::-webkit-media-controls-panel {
display: flex !important;
opacity: 1 !important;
}
*/
.span12.widget-span.widget-type-cell.page-center.content-wrapper.resi_landing {
padding: 0px;
margin: 0 auto;
}
.hs_error_rollup ul.hs-error-msgs.inputs-list li label.hs-main-font-element {
display: block;
position: absolute;
margin: 55px 0 0 -40px;
float: left;
}
.hs_firstname.hs-firstname.hs-fieldtype-text.field.hs-form-field > .hs-error-msgs.inputs-list {
display: none !important;
}
.hs_lastname.hs-lastname.hs-fieldtype-text.field.hs-form-field > .hs-error-msgs.inputs-list {
display: none !important;
}
.hs_company.hs-company.hs-fieldtype-text.field.hs-form-field > .hs-error-msgs.inputs-list {
display: none !important;
}
.hs_email.hs-email.hs-fieldtype-text.field.hs-form-field > .hs-error-msgs.inputs-list {
display: none !important;
}
.hs_zip.hs-zip.hs-fieldtype-text.field.hs-form-field > .hs-error-msgs.inputs-list {
display: none !important;
}
.hs_check_box.hs-check_box.hs-fieldtype-booleancheckbox.field.hs-form-field > .hs-error-msgs.inputs-list {
display: none !important;
}
.custom-logo {
padding-left: 71px;
}
.background_content.image {
position: relative;
z-index: 5;
background-position: 100% 100%;
background-repeat: no-repeat;
transition: 0.4s all ease-in;
}
.hidden_source, .hide_block {
display: none;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: #702050;
opacity: 0.6;
left: 0;
top: 0;
z-index: 3;
transition: 0.4s all ease-in;
}
.content_desc {
position: relative;
z-index: 5;
}
.play-icon {
display: block;
font-size: 80px;
text-align: center;
color: #fff;
padding: 40px;
cursor: pointer;
background: url(/media/1148/shape.png) no-repeat 50% 100%;
}
.play-icon i {
display: none;
}
.video_player {
width: 100%;
opacity: 0;
transition: 0.1s all ease-in;
display: none;
}
.span8.widget-span.widget-type-cell.main-content {
width: 532px;
float: left;
display: block;
}
.interbaybanner {
width: 532px;
height: 100%;
display: block;
float: left;
}
.bannercontent {
display: block;
float: left;
width: 100%;
height: 345px;
}
.video-overlay {
background-image: url(/hubfs/3947994/Interbay/interbayDesktop.png);
display: block;
position: absolute;
height: 345px;
width: 532px;
background-repeat: no-repeat;
background-size: cover;
background-position: 0% 100%;
z-index: 10;
}
.video {
width: 532px;
min-height: 345px;
max-height: 345px;
position:absolute;
display: block;
background-size: cover;
background-position: center;
object-fit: fill;
}
.video-text {
position: relative;
}
.playbtn {
padding: 10px 25px;
background-color: #fff;
position: absolute;
top: 291px;
left: 7px;
z-index: 30;
height: 47px;
width: 125px;
}
.wrapper{
position:relative;
}
.playpause {
position: relative;
cursor: pointer;
background-image: url(../hubfs/3947994/Interbay/Triangle.png);
background-size: contain;
background-position: left;
background-repeat: no-repeat;
}
.playpause:hover {
position: relative;
cursor: pointer;
background-image: url(../hubfs/3947994/Interbay/Triangle%201.png);
background-size: contain;
background-position: left;
background-repeat: no-repeat;
}
span.playtext {
position: relative;
padding-left: 30px;
top: 2px;
font-size: 20px;
font-weight: 500;
line-height: normal;
letter-spacing: normal;
color: #000000;
font-family: "GT-Walsheim-Medium";
}
.careertext {
z-index: 20;
position: absolute;
padding: 105px 51px 50px 65px;
display: block;
float: left;
width: 532px;
}
.careertext h1 {
margin: 0;
font-size: 43px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: 1.16;
letter-spacing: normal;
color: #ffffff;
font-family: "GT-Walsheim-Medium";
}
.careertext p {
color: #fff;
line-height: 1.31;
font-size: 20px;
letter-spacing: 0.1px;
margin: 11px 0 0 0;
font-family: "GT-Walsheim-Medium";
}
.bannerbottonmdesc {
display: block;
float: left;
width: 100%;
}
.bannerbottonmdesc ul {
padding: 35px;
margin: 0;
}
.bannerbottonmdesc ul li {
font-size: 18px;
font-weight: normal;
line-height: 1.61;
letter-spacing: normal;
color: #414241;
font-family: 'GT-Walsheim-Regular';
}
.span4.widget-span.widget-type-cell.main-content {
width: 316px;
margin: 0 0 0 42px;
display: block;
float: right;
}
.span12.widget-span.widget-type-widget_container.q1bannerright {
max-width: 316px;
padding: 0;
}
.ibq2bannerheading p {
font-size: 16px;
font-weight: 500;
line-height: normal;
letter-spacing: normal;
color: #414241;
margin: 0 0 23px 0;
font-family: GT-Walsheim-Medium;
}
.span12.widget-span.widget-type-cell.page-center.content-wrapper.resi_landing .row-fluid-wrapper.row-depth-1.row-number-3 {
background-color: #f2f2f2;
padding: 70px 67px 67px 67px;
overflow: hidden;
display: block;
float: left;
height: 612px;
width: 100%;
}
.hs-input.invalid.error {
border-width: 1px;
border-color: #d0021b;
}
input.hs-button.primary.large {
width: 316px;
height: 45px;
background-color: #c2c2c2;
border-radius: 2px;
border: #2b7f72;
margin: 0 0 25px 0;
font-size: 18px;
font-weight: 500;
font-style: normal;
line-height: 1.39;
letter-spacing: normal;
color: #ffffff;
font-family: "GT-Walsheim-Medium";
}
input[type="text"], input[name="email"]{
width: 100%;
height: 45px;
margin: 0 0 18px 0;
padding: 10px 21px;
border-width: 1px;
border-color: #fff;
border-radius: 2px;
font-size: 14px !important;
font-weight: 500;
font-style: normal;
line-height: 1.56;
letter-spacing: normal;
color: #414241;
font-family: "GT-Walsheim-Regular";
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input::placeholder {
font-size: 14px;
font-weight: normal;
line-height: 1.79;
letter-spacing: normal;
color: #9a9a9a;
font-family: "GT-Walsheim-Regular";
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
::-webkit-input-placeholder {
font-size: 14px;
font-weight: normal;
line-height: 1.79;
letter-spacing: normal;
color: #9a9a9a;
font-family: "GT-Walsheim-Regular";
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
::-moz-placeholder {
font-size: 14px;
font-weight: normal;
line-height: 1.79;
letter-spacing: normal;
color: #9a9a9a;
font-family: "GT-Walsheim-Regular";
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
:-ms-input-placeholder {
font-size: 14px;
font-weight: normal;
line-height: 1.79;
letter-spacing: normal;
color: #9a9a9a;
font-family: "GT-Walsheim-Regular";
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
:-moz-placeholder {
font-size: 14px;
font-weight: normal;
line-height: 1.79;
letter-spacing: normal;
color: #9a9a9a;
font-family: "GT-Walsheim-Regular";
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type=text]:focus, input[type=email]:focus {
border: solid 1px #4a90e2 !important;
}
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {
position: absolute;
left: -9999px;
}
[type="checkbox"]:checked + span,
[type="checkbox"]:not(:checked) + span{
position: relative;
padding-left: 28px;
cursor: pointer;
display: inline-block;
margin: 2px 0 20px 0;
font-size: 14px;
line-height: normal;
text-transform:none;
font-family: "GT-Walsheim-Regular";
}
[type="checkbox"]:checked + span:before,
[type="checkbox"]:not(:checked) + span:before{
content: '';
position: absolute;
left: 0;
top: 7px;
width: 18px;
height: 18px;
background: #fff;
border: solid 1px #979797;
}
[type="checkbox"]:not(:checked) + span:after {
content: '';
width: 18px;
height: 18px;
background: #fff !important;
position: absolute;
top: 7px;
left: 0;
border: solid 1px #979797;
}
[type="checkbox"]:checked + span:after {
content: '';
width: 14px;
height: 14px;
position: absolute;
top: 8px;
left: 2px;
background: url(/hubfs/3947994/Interbay/checkmark.png) no-repeat;
background-size: contain;
background-repeat: no-repeat;
}
[type="checkbox"]:not(:checked) + span:after, [type="checkbox"]:checked + span:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
li.hs-form-booleancheckbox a {
text-decoration: none;
font-size: 14px;
font-weight: 500;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #4a90e2;
font-family: "GT-Walsheim-Regular";
}
li.hs-form-booleancheckbox a:hover {
text-decoration: underline;
}
.ibq2accordion {
padding: 70px 120px 130px 120px;
}
.accordiontitle {
width: 100%;
margin: 0;
padding: 0 0 40px 0;
font-size: 25px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: 0.84;
letter-spacing: normal;
color: #4a4a4a;
font-family: "GT-Walsheim-Medium";
}
.accordion {
cursor: pointer;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
font-weight: normal;
line-height: normal;
letter-spacing: normal;
color: #4a4a4a;
padding: 16px 30px;
height: 55px;
background-color: #efefef;
font-family: "GT-Walsheim-Regular";
}
.accordion:hover {
background-color: #efefef;
}
.accordion:after {
float: right;
background: url(/hubfs/3947994/Interbay/Shape%20arrow.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
content: "";
position: relative;
width: 10px;
height: 6px;
top: 8.5px;
display: block;
}
.accordion.active:after {
float: right;
background: url(/hubfs/3947994/Interbay/Shape%20arrow%20up.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
content: "";
position: relative;
width: 10px;
height: 6px;
top: 8.5px;
display: block;
}
.panel {
padding: 10px 30px 0 30px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
div.title {
font-family: "GT-Walsheim-Medium";
font-size: 18px;
font-weight: 500;
font-style: normal;
line-height: 1.17;
letter-spacing: normal;
color: #4a4a4a;
padding: 30px 0;
}
div.subtitle {
font-family: "GT-Walsheim-Medium";
font-size: 16px;
font-weight: 500;
line-height: 1.31;
letter-spacing: normal;
color: #4a4a4a;
padding-bottom: 15px;
}
.panel .content ul {
margin: 0;
padding: 0 0 20px 30px;
}
.panel .content ul li {
font-size: 16px;
font-weight: normal;
line-height: normal;
letter-spacing: normal;
color: #4a4a4a;
padding: 0 0 10px 0;
font-family: "GT-Walsheim-Regular";
}
div.subtitle a {
color: #4a90e2;
}
.subtitle:last-child {
padding-bottom: 40px;
display: block;
float: left;
width: 100%;
position: relative;
}
.custom-footer {
background: #292a31 !important;
padding-top: 0px !important;
}
.custom-footer-list ul {
margin: 0;
padding: 0 150px;
}
.custom-footer-list ul li {
float: left;
border-left: 0;
padding: 19px 15px;
font-size: 15px;
font-weight: normal;
line-height: normal;
letter-spacing: normal;
color: #ffffff;
}
.custom-footer-list ul li a {
padding: 0;
text-decoration: none;
cursor: pointer;
font-size: 15px;
font-weight: normal;
line-height: normal;
letter-spacing: normal;
color: #ffffff;
font-family: "GT-Walsheim-Regular";
}
.custom-footer-list ul li a:hover {
text-decoration: underline;
}
.ibthankyoumsg {
text-align: center;
padding: 50px 30px;
float: left;
width: 100%;
height: 270px;
position: relative;
}
.tickmark {
background: url(/hubfs/3947994/Interbay/shapetick.png);
background-repeat: no-repeat;
background-position: center;
}
.msg {
padding: 18px 0px 30px 0px;
font-size: 22px;
text-align: center;
font-weight: 500;
letter-spacing: normal;
line-height: normal;
color: #4a4a4a;
font-family: "GT-Walsheim-Medium";
}
.viewcases {
position: relative;
padding: 0px;
width: 206px;
margin: 0 auto;
display: block;
height: 45px;
}
.viewcases a {
padding: 10px 37px 10px 18px;
height: 45px;
width: 206px;
background-color: #53555f;
display: block;
float: left;
text-align: center;
font-size: 18px;
font-weight: 500;
line-height: 1.39;
letter-spacing: normal;
color: #fff;
text-decoration: none;
}
.whitearrowdown {
background: url(/hubfs/3947994/Interbay/whitearrowdown.png);
width: 10px;
height: 6px;
background-repeat: no-repeat;
display: block;
position: absolute;
float: right;
background-size: cover;
background-position: 100% 100%;
right: 17px;
top: 20px;
}
@media screen and (max-width: 767px) {
.container-fluid .row-fluid .page-center {
float: none;
max-width: 100%;
margin: 0 auto;
padding: 0;
}
.custom-logo {
text-align: center;
padding-bottom: 0px;
display: block !important;
width: 100% !important;
height: 100% !important;
float: left !important;
padding-left: 0px !important;
}
.span12.widget-span.widget-type-cell.custom-header.custom-nav {
padding: 16px 20px;
height: 70px;
}
.custom-logo img {
width: 139px;
height: auto;
float: left;
}
.span12.widget-span.widget-type-cell.page-center.content-wrapper.resi_landing .row-fluid-wrapper.row-depth-1.row-number-3 {
background-color: #fff;
padding: 0;
overflow: hidden;
display: block;
float: left;
height: auto;
}
.span8.widget-span.widget-type-cell.main-content {
width: 100%;
}
.interbaybanner {
width: 100%;
}
.bannercontent {
display: block;
float: left;
width: 100%;
height: 397px;
}
.video-overlay {
height: 397px;
width: 100%;
}
.video {
width: 100%;
min-height: 397px;
max-height: 397px;
}
.playbtn {
left: 40px;
padding: 10px 21px 10px 28px;
top: 275px;
}
.playpause {
height: 23px;
top: 2px;
}
span.playtext {
padding-left: 30px;
top: 0px;
}
/* video::-webkit-media-controls-panel {
display: flex;
height: 55px;
width: 532px;
bottom: 0;
top: 335px;
background: #000;
position: relative;
} */
.hs_error_rollup ul.hs-error-msgs.inputs-list li label.hs-main-font-element {
display: block;
position: relative;
margin: -25px 0 0 -40px;
float: left;
top: 80px;
}
.bannerbottonmdesc {
display: block;
float: left;
width: 100%;
padding: 35px 25px 25px 25px;
background-color: #f2f2f2;
}
.bannerbottonmdesc ul {
padding: 0px 0 0 20px;
margin: 0;
}
.bannerbottonmdesc ul li {
font-family: "GT-Walsheim-Regular";
line-height: 1.39;
padding: 0 0 10px 0;
}
.careertext {
position: absolute;
padding: 51px 40px 30px 40px;
display: block;
float: left;
width: 100%;
}
.careertext p {
font-size: 20px;
margin: 15px 0 0 0;
font-weight: 500;
line-height: normal;
letter-spacing: normal;
}
.span4.widget-span.widget-type-cell.main-content {
width: 100%;
margin: 0;
padding: 33px 25px 40px 25px;
display: block;
float: left;
}
.ibq2bannerheading p {
margin: 0 0 27px 0;
font-size: 18px;
font-weight: 500;
line-height: normal;
letter-spacing: normal;
color: #414241;
font-family: GT-Walsheim-Medium;
}
[type="checkbox"]:checked + span, [type="checkbox"]:not(:checked) + span {
margin: 2px 0 36px 0;
}
input.hs-button.primary.large {
width: 100%;
margin: 0;
height: 51px;
}
.span12.widget-span.widget-type-custom_widget.ibq2accordion {
display: block;
float: left;
width: 100%;
}
.span12.widget-span.widget-type-widget_container.q1bannerright {
max-width: 100%;
padding: 0;
}
.accordiontitle {
padding: 0 25px 30px 25px;
font-size: 20px;
font-weight: 500;
line-height: normal;
letter-spacing: normal;
}
.ibq2accordion {
padding: 0;
}
.accordion {
font-size: 20px;
color: #53555f;
padding: 13px 50px 13px 25px;
height: 75px;
font-family: "GT-Walsheim-Medium";
display: block;
flex-direction: column;
justify-content: center;
resize: vertical;
overflow: visible;
}
.accordion:after {
width: 12px;
height: 8px;
}
.accordion.active:after {
width: 12px;
height: 8px;
}
.Contentaccordion {
padding: 0 0 80px 0;
}
.accordion:after {
top: 0;
margin: 0 -20px 0 0;
}
.accordion.active:after {
top: 0;
display: block;
}
.panel {
padding: 5px 35px 0 35px;
}
div.title {
padding: 31px 0;
font-size: 20px;
font-weight: 300;
font-style: normal;
font-stretch: normal;
line-height: 1.25;
letter-spacing: normal;
color: #4a4a4a;
font-family: 'GT-Walsheim-Light';
}
div.subtitle {
font-size: 18px;
line-height: 1.33;
color: #4a4a4a;
padding-bottom: 16px;
}
.panel .content ul li {
font-size: 18px;
}
.custom-footer-list ul {
margin: 0;
padding: 21px 30px;
display: block;
height: 306px;
}
.custom-footer-list ul li {
float: left;
padding: 10px 0px;
font-size: 18px;
display: block;
width: 100%;
text-align: left;
}
}
@media screen and (max-width: 767px) and (orientation : landscape) {
.accordion {
flex-direction: row;
}
.accordion:after {
top: 8.5px;
}
.accordion.active:after {
top: 8.5px;
}
}
@media screen and (max-width: 992px) and (min-width: 768px) {
.span12.widget-span.widget-type-cell.page-center.content-wrapper.resi_landing .row-fluid-wrapper.row-depth-1.row-number-3 {
padding: 30px;
width: 100%;
}
.custom-logo {
padding-left: 30px;
}
.span4.widget-span.widget-type-cell.main-content {
width: 300px;
margin: 0 0 0 10px;
float: right;
}
input[name=firstname] {
width: 100% !important;
}
input[name=lastname] {
width: 100% !important;
}
input[name=email] {
min-width: 100% !important;
}
input[name=company] {
width: 100% !important;
}
input[name=zip] {
width: 100% !important;
}
input.hs-button.primary.large {
width: 100%;
}
.ibq2accordion {
padding: 70px 70px 130px 70px;
}
.container-fluid .row-fluid .page-center {
float: none;
max-width: 100%;
margin: 0 auto;
width: 100%;
padding: 0;
}
.custom-footer-list ul {
margin: 0 auto;
padding: 0 20px;
}
.custom-footer-list ul li {
padding: 19px 15px;
}
}
@media screen and (min-width: 768px) and (max-width: 850px) {
.span8.widget-span.widget-type-cell.main-content {
width: 380px;
}
.interbaybanner {
width: 380px;
}
.video-overlay {
width: 380px;
background-size: cover;
}
.video {
width: 380px;
}
.careertext {
padding: 50px;
width: 380px;
}
}
@media screen and (min-width: 851px) and (max-width: 992px) {
.span8.widget-span.widget-type-cell.main-content {
width: 450px;
}
.interbaybanner {
width: 450px;
}
.video-overlay {
width: 450px;
background-size: cover;
}
.video {
width: 450px;
}
.careertext {
padding: 50px;
width: 450px;
}
}
@media screen and (min-width: 993px) and (max-width: 1040px) {
.span12.widget-span.widget-type-cell.page-center.content-wrapper.resi_landing .row-fluid-wrapper.row-depth-1.row-number-3 {
padding: 70px 40px 67px 40px;
}
.custom-logo {
padding-left: 40px;
}
}
.span12 widget-span widget-type-custom_widget custom-footer-list
{
object-fit: contain;
background-color: #292a31;
}
.hs-error-msgs label {
color: #d0021b !important;
font-size: 14px;
font-weight: 500;
line-height: normal;
letter-spacing: normal;
font-family: GT-Walsheim-Medium;
}
.hs-input.invalid.error:focus {
border: 0;
}
/*.span12.widget-span.widget-type-cell.custom-header.custom-nav {
padding: 9px 0 !important;
}*/
.landinglogo {
padding: 6px 0;
}
.landinglogo img {
width: 202px;
height: 42px;
}
.landingcertificatelogo img {
width: 135px !important;
margin: 0 !important;
float: right;
height: 54px !important;
}
.custom-banner-image {
display: none;
}
.container-fluid .row-fluid .page-center {
float: none;
max-width: 1024px;
margin: 0 auto;
}
div#hs_cos_wrapper_widget_1525950897511 {
display: none;
}
.bdmcampbannerheading {
padding: 0 0 23px 0;
}
.bannercobalimage {
height: 576px;
max-width: 380px;
background-image: url(/hubfs/3947994/coballandingpage/cobalbannerimage.png);
background-position: 100% 100%;
background-size: contain;
position: relative;
opacity: 1;
background-repeat: no-repeat;
}
/*.bdmcampbannerheading h1 {
font-size: 50px !important;
font-weight: 500 !important;
font-style: normal !important;
font-stretch: normal;
line-height: 1.2 !important;
letter-spacing: normal;
color: #5a234a !important;
margin: 0 0 13px 0;
padding: 0;
text-indent: 0;
font-family: "GT-Walsheim-Medium";
}
*/
.bdmcampbannerheading ul {
display: block;
float: left;
width: 532px;
height: 87px;
padding-top: 35px;
padding-left: 67px;
margin: 0 0 17px 0;
}
.bdmcampbannerheading p {
width: 316px;
font-size: 16px !important;
font-weight: 500 !important;
font-style: normal !important;
font-stretch: normal;
line-height: 1.31;
letter-spacing: normal;
margin: 0;
color: #000000;
padding-top:55px
text-indent: 0;
font-family: "GT-Walsheim-Medium" !important;
}
/*div#hs_cos_wrapper_widget_1547137472797 {
height: 576px;
padding: 22px 0 0 0;
}
.span7.widget-span.widget-type-cell.main-content {
margin: 0;
max-width: 508px;
float: right;
} */
li.hs-form-booleancheckbox span.hs-form-required {
display: none;
}
span.hs-form-required {
display: none;
}
form#hsForm_a9baed16-d755-40a4-b41f-6dd21c5ef854_3714 {
max-width: 508px !important;
margin: 0;
}
.q1bannerright
{
padding-left:125px;
}
ul.inputs-list {
margin: 0;
list-style: none !important;
}
.BDMcampotherhead h2 {
margin: 50px 0 130px 0 !important;
font-size: 20px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #4a4a4a;
font-family: "GT-Walsheim-Medium" !important;
}
.BDMcampotherhead h2>a {
color: #4a90e2;
text-decoration: none;
cursor: pointer;
}
.BDMcampotherhead h2>a:hover {
text-decoration: underline;
}
.custom-linkedin {
height: 27px;
}
.custom-twitter {
height: 27px;
}
.custom-social ul li{
margin: 0 0 0 25px;
}
.custom-social ul li:last-child {
margin: 0 0 0 25px;
}
.custom-social ul {
margin-right: 0px;
}
@media screen and (max-width: 815px) and (min-width: 768px) {
.bannerdogimage {
height: 660px;
}
/*.span12.widget-span.widget-type-cell.moreq1info {
min-height: 350px;
padding: 0 10px !important;
}*/
}
@media screen and (max-width: 930px) and (min-width: 816px) {
.bannerdogimage {
height: 610px;
}
}
@media screen and (max-width: 945px) and (min-width: 768px) {
.bannercobalimage {
height: 600px;
}
}
@media screen and (max-width: 1024px) and (min-width: 993px) {
.span12.widget-span.widget-type-cell.moreq1info {
min-height: 350px;
padding: 0 18px;
}
}
@media screen and (max-width: 1147px) and (min-width: 1025px) {
.span12.widget-span.widget-type-cell.moreq1info {
min-height: 350px;
padding: 0 33px;
}
}
@media screen and (max-width: 992px) and (min-width: 768px) {
div#hs_cos_wrapper_widget_1547137472797 {
height: 650px;
padding: 252px 0 0 0;
position: relative;
}
.bdmcampbannerheading h1 {
font-size: 40px !important;
}
form.hs-form fieldset .hs-form-field {
padding: 0;
}
.row-fluid-wrapper.row-depth-1.row-number-7 {
padding: 0 25px;
}
.span12.widget-span.widget-type-cell.moreq1info {
min-height: 350px;
padding: 0 18px;
}
.otherbdmcamp.col-md-4 {
padding: 0;
display: inline-block;
max-width: 230px;
min-width: 230px;
min-height: 230px !important;
max-height: 230px;
}
}
@media screen and (max-width: 1024px) and (min-width: 768px) and (orientation : landscape) {
.row-fluid-wrapper.row-depth-1.row-number-7 {
padding: 0 15px;
}
.span12.widget-span.widget-type-cell.moreq1info {
min-height: 350px;
padding: 0 20px;
}
}
@media screen and (max-width: 767px) {
.landingcertificatelogo {
display: none;
}
.custom-logo.landinglogo {
float: left;
margin: 0;
padding: 0;
}
div#hs_cos_wrapper_widget_1547137472797 {
display: none;
}
.mobileview {
display: block !important;
padding: 0;
}
.bdmcampbannerheading {
display: none;
}
.mobilebdmcampbannerheading {
height: 100%;
background-color: #f2f2f2;
padding: 0 26px;
}
.mobilebdmcampbannerheading h1 {
font-size: 40px;
font-weight: 500;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
color: #5a234a;
margin: 0;
padding: 48px 0 30px 0;
font-family: "FS Me Web Regular" !important;
}
.mobilebdmcampbannerheading p {
font-size: 18px;
font-weight: 500;
line-height: normal;
letter-spacing: normal;
color: #5a234a;
margin: 0 0 30px 0;
}
.mobilebdmcampbannerheading ul {
margin: 0 0 33px 0;
}
.mobilebdmcampbannerheading ul li {
font-size: 18px;
font-weight: 500;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #5a234a;
font-family: "FS Me Web Regular" !important;
}
span.mobileq1bannerimg {
position: absolute;
}
.mobileq1bdmformhead h4 {
font-size: 18px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #5a234a;
padding: 40px 24px 20px 25px;
margin: 0;
}
.span12.widget-span.widget-type-custom_widget.mobileq1form {
padding: 35px 25px;
}
.hs_firstname.hs-firstname.hs-fieldtype-text.field.hs-form-field,
.hs_lastname.hs-lastname.hs-fieldtype-text.field.hs-form-field,
.hs_email.hs-email.hs-fieldtype-text.field.hs-form-field,
.hs_company.hs-company.hs-fieldtype-text.field.hs-form-field,
.hs_zip.hs-zip.hs-fieldtype-text.field.hs-form-field,
.hs_check_box.hs-check_box.hs-fieldtype-booleancheckbox.field.hs-form-field {
display: block;
width: 100%;
float: left;
padding: 0;
}
li.hs-form-booleancheckbox span {
margin: 0px 0 38px 32px;
}
input[name=firstname] {
width: 100% !important;
margin: 0 0 20px 0 !important;
border-color: #d1d1d1;
font-size: 16px !important;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: 1.56;
letter-spacing: normal;
color: #4a4a4a;
}
input[name=lastname] {
width: 100% !important;
margin: 0 0 20px 0 !important;
border-color: #d1d1d1;
font-size: 16px !important;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: 1.56;
letter-spacing: normal;
color: #4a4a4a;
}
input[name=email] {
min-width: 100% !important;
margin: 0 0 20px 0 !important;
border-color: #d1d1d1;
font-size: 16px !important;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: 1.56;
letter-spacing: normal;
color: #4a4a4a;
}
input[name=company] {
width: 100% !important;
margin: 0 0 20px 0 !important;
border-color: #d1d1d1;
font-size: 16px !important;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: 1.56;
letter-spacing: normal;
color: #4a4a4a;
}
input[name=zip] {
width: 100% !important;
margin: 0 0 36px 0 !important;
border-color: #d1d1d1;
font-size: 16px !important;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: 1.56;
letter-spacing: normal;
color: #4a4a4a;
}
input[type=checkbox]:before {
border: solid 1px #979797;
}
input::placeholder {
font-size: 16px;
line-height: 1.56;
}
::-webkit-input-placeholder {
font-size: 16px;
line-height: 1.56;
}
::-moz-placeholder {
font-size: 16px;
line-height: 1.56;
}
:-ms-input-placeholder {
font-size: 16px;
line-height: 1.56;
}
:-moz-placeholder {
font-size: 16px;
line-height: 1.56;
}
.BDMcampotherhead h2 {
margin: 5px 25px 80px 25px !important;
font-size: 18px !important;
}
.span12.widget-span.widget-type-cell.moreq1info {
min-height: auto;
padding: 0 15px;
}
.otherbdmcampdiv h1 {
margin: 0 0 21.8px 0;
font-size: 30px;
line-height: normal;
}
.otherbdmcampdiv p {
font-size: 18px !important;
opacity: 0.9;
}
.otherbdmcampdiv3 {
background-color: #5a2249;
padding: 55px 42px;
}
.otherbdmcamp.col-md-4 {
max-width: 100%;
min-width: 100%;
width: 100%;
min-height: auto !important;
max-height: none;
margin: 0 0 15px 0;
}
/*.custom-footer {
text-align: left;
font-family: HelveticaNeue;
font-size: 15px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #fff;
width: 1024px;
height: 55px;
padding-bottom: 19px;
padding-top:19px;
padding-left:173px;
text-align: left;
}*/
.span12.widget-span.widget-type-cell.custom-footer {
background:#fff;
}
.BDMcampotherhead h2>a {
color: #1782b1;
}
}
@media screen and (min-width: 768px) {
.mobileview {
display: none !important;
}
}
@-moz-document url-prefix() {
input[type=checkbox] {
margin: 6px 0 0 0;
}
.otherbdmcampdiv p {
min-height: 60px;
}
.otherbdmcampdiv.otherbdmcampdiv3.background_content.image p {
min-height: 60px;
}
}
/*
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
input[type=checkbox] {
margin: -1px 0 0 -1px;
}
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.hs-input.invalid.error {
border-width: 1px;
border-color: #d0021b;
}
}
@supports (-ms-ime-align:auto) {
.hs-input.invalid.error {
border-width: 1px;
border-color: #d0021b;
}
}*/
input#email-a9baed16-d755-40a4-b41f-6dd21c5ef854 {
width: 468px;
height: 25px;
padding: 10px 20px;
margin: 0 0 16px 0;
border-width: 0;
border-radius: 2px;
font-size: 16px;
font-weight: 500;
font-style: normal;
line-height: 1.56;
letter-spacing: normal;
color: #4a4a4a;
font-family: "FS Me Web Regular";
}
input#company-a9baed16-d755-40a4-b41f-6dd21c5ef854 {
width: 205px;
height: 25px;
padding: 10px 20px;
margin: 0 0 23px 0;
border-width: 0;
border-radius: 2px;
font-size: 16px;
font-weight: 500;
font-style: normal;
line-height: 1.56;
letter-spacing: normal;
color: #4a4a4a;
font-family: "FS Me Web Regular";
}
input#zip-a9baed16-d755-40a4-b41f-6dd21c5ef854 {
width: 205px;
height: 25px;
padding: 10px 20px;
border-width: 0;
border-radius: 2px;
font-size: 16px;
font-weight: 500;
font-style: normal;
line-height: 1.56;
letter-spacing: normal;
color: #4a4a4a;
font-family: "FS Me Web Regular";
}
fieldset.form-columns-1 {
max-width: 508px;
}
fieldset.form-columns-2 {
max-width: 508px;
}
li.hs-form-booleancheckbox {
display: block;
}
</style>
window.onload = function() {
// Video
var video = document.getElementById("video");
// Buttons
var playButton = document.getElementById("play-pause");
var muteButton = document.getElementById("mute");
var fullScreenButton = document.getElementById("full-screen");
// Sliders
var seekBar = document.getElementById("seek-bar");
var volumeBar = document.getElementById("volume-bar");
// Event listener for the play/pause button
playButton.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
// Update the button text to 'Pause'
playButton.innerHTML = "Pause";
} else {
// Pause the video
video.pause();
// Update the button text to 'Play'
playButton.innerHTML = "Play";
}
});
// Event listener for the mute button
muteButton.addEventListener("click", function() {
if (video.muted == false) {
// Mute the video
video.muted = true;
// Update the button text
muteButton.innerHTML = "Unmute";
} else {
// Unmute the video
video.muted = false;
// Update the button text
muteButton.innerHTML = "Mute";
}
});
// Event listener for the full-screen button
fullScreenButton.addEventListener("click", function() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
});
// Event listener for the seek bar
seekBar.addEventListener("change", function() {
// Calculate the new time
var time = video.duration * (seekBar.value / 100);
// Update the video time
video.currentTime = time;
});
// Update the seek bar as the video plays
video.addEventListener("timeupdate", function() {
// Calculate the slider value
var value = (100 / video.duration) * video.currentTime;
// Update the slider value
seekBar.value = value;
});
// Pause the video when the slider handle is being dragged
seekBar.addEventListener("mousedown", function() {
video.pause();
});
// Play the video when the slider handle is dropped
seekBar.addEventListener("mouseup", function() {
video.play();
});
// Event listener for the volume bar
volumeBar.addEventListener("change", function() {
// Update the video volume
video.volume = volumeBar.value;
});
}
