html{ font-size: 10px; }
body {
  font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.6rem;
  /*background-color: #000000;*/
  background-image: url("/img/HUB_Background.jpg");
  background-color: #fcd800 ;
  background-repeat: repeat-x;
  background-position: top;
  background-attachment: fixed;
}

h1{
  font-size: 3.6rem;
  font-weight: 700;
}
h2{
  font-size: 3.0rem;
  font-weight: 700;
}
h3{
  font-size: 2.4rem;
}
h4{
  font-size: 2.0rem;
}

a {
  color: #000000;;
  transition: 0.5s;
}

a:hover,
a:active,
a:focus {
  color: #0a98c0;
  outline: none;
  text-decoration: none;
}

p {
  margin: 0 0 10px 0;
  font-size: 16px;
}

.color-white{ color: #fff; }
.color-black{ color: #333; }
.color-sky{ color: #77a5d8; }
.color-light-gray{ color: rgb(181, 181, 181); }
.color-light-green{ color: #23aba5; }
.color-pink{ color: #da3e5c; }
.color-gray{ color: #6C6C6C; }
.color-orange{ color: #E49E48; }

.top-5{ margin-top: 5px !important; }
.top-13{ margin-top: 13px !important; }
.top-18{ margin-top: 18px !important; }

/*-----Font Size Classees-----*/
.font-12{ font-size: 1.2rem; line-height: 18px; }
.font-13{ font-size: 1.3rem; line-height: 20px; }
.font-14{ font-size: 1.4rem; line-height: 24px; }
.font-18{ font-size: 1.8rem; line-height: 18px; }
.font-20{ font-size: 2.0rem; line-height: 30px; }
.font-20 p{ font-size: 2.0rem; line-height: 30px; }
.font-24{ font-size: 2.4rem; }
.font-28{ font-size: 2.8rem; line-height: 28px; }
.font-30{ font-size: 3.0rem; line-height: 30px; }
.font-36{ font-size: 3.6rem; line-height: 42px; }
.font-48{ font-size: 4.8rem; line-height: 52px; }
.font-60{ font-size: 6.0rem; line-height: 60px; }
.font-72{ font-size: 7.2rem; line-height: 66px; }
.font-100{ font-size: 10.0rem; line-height: 100px; }

.font-28 p{ line-height: 28px; }
.font-30 p{ line-height: 36px; }

/*-----Font Weight Classees-----*/
.font-light{ font-weight: 300; }
.font-normal{ font-weight: 400; }
.font-medium{ font-weight: 500; }
.font-semi-bold{ font-weight: 600; }
.font-bold{ font-weight: 700; }
.font-extra-bold{ font-weight: 800; }

.font-italic{ font-style: italic; }

/*----Margin Classes----*/
.margin-0{ margin: 0px; }
.margin-none{ margin: 0px; }
.margin-bottom-0{ margin-bottom: 0px; }
.margin-bottom-5{ margin-bottom: 5px; }
.margin-bottom-10{ margin-bottom: 10px; }
.margin-bottom-15{ margin-bottom: 15px; }
.margin-bottom-20{ margin-bottom: 20px; }
.margin-bottom-25{ margin-bottom: 25px; }
.margin-bottom-30{ margin-bottom: 30px; }
.margin-bottom-35{ margin-bottom: 35px; }
.margin-bottom-40{ margin-bottom: 40px; }
.margin-bottom-50{ margin-bottom: 50px; }
.margin-bottom-minus-50{ margin-bottom: -50px; }
.margin-bottom-minus-75{ margin-bottom: -75px; }
.margin-bottom-minus-100{ margin-bottom: -100px; }

.margin-top-bottom-10{ margin-top: 10px; margin-bottom: 10px; }
.margin-top-bottom-15{ margin-top: 15px; margin-bottom: 15px; }
.margin-top-bottom-20{ margin-top: 20px; margin-bottom: 20px; }

/*----Padding Classes----*/
.padding-0{ padding: 0px; }
.padding-none{ padding: 0px; }
.padding-top-5{ padding-top: 5px; }
.padding-top-10{ padding-top: 10px; }
.padding-top-15{ padding-top: 15px; }
.padding-top-25{ padding-top: 25px; }
.padding-top-35{ padding-top: 35px; }
.padding-top-50{ padding-top: 50px; }
.padding-top-100{ padding-top: 100px; }
.padding-bottom-0{ padding-bottom: 0px !important; }
.padding-bottom-5{ padding-bottom: 5px !important; }
.padding-bottom-10{ padding-bottom: 10px; }
.padding-bottom-15{ padding-bottom: 15px; }
.padding-bottom-25{ padding-bottom: 25px; }
.padding-bottom-40{ padding-bottom: 40px; }
.padding-bottom-50{ padding-bottom: 50px; }
.padding-bottom-100{ padding-bottom: 100px; }
.padding-right-100{ padding-right: 100px; }

.padding-top-bottom-10{ padding-top: 10px; margin-bottom: 10px; }
.padding-top-bottom-15{ padding-top: 15px; padding-bottom: 15px; }
.padding-top-bottom-20{ padding-top: 20px; padding-bottom: 20px; }
.padding-top-bottom-25{ padding-top: 25px; padding-bottom: 25px; }
.padding-top-bottom-50{ padding-top: 50px; padding-bottom: 50px; }

.padding-left-right-30{ padding-left: 30px !important; padding-right: 30px !important; }

.padding-10{ padding: 10px; }
.padding-20{ padding: 20px; }
.padding-25{ padding: 25px; }
.padding-30{ padding: 30px !important; }
.padding-35{ padding: 35px; }
.padding-50{ padding: 50px; }

/*Border Color Classes*/
.border-transparent{ border-color: transparent; }
.border-bottom-5{ border-bottom: transparent solid 5px; }
.border-yellow{ border-color: #F4C914 !important; }
.border-pink{ border-color: #D50F89 !important; }
.border-green{ border-color: #9EE615 !important; }
.border-blue{ border-color: #4335E6 !important; }
.border-sky{ border-color: #37A9F0 !important; }

/*-----Background Classes-----*/
.bg-yellow{
  background: #fdd304;
}
.bg-green{
  background: #25a895;
}
.bg-light-green{
  background: #5ecbc9;
}
.bg-light-gray{
  background: #f8f8f8;
}
.bg-gray{
  background: #c1c2c0;
}
.bg-price-standard{
  background: #ed1f5f;
}
.bg-price-enterprise{
  background: #ee9a16;
}
.bg-black{
  background: #000;
}

/*------Overflow Classes-----*/
.hidden{ overflow: hidden; }
.visible{ overflow: visible; }

/*------Position Classes-----*/

#main-content .container{ padding-top: 15px; }
.page-body{ padding-top: 15px; padding-bottom: 15px; }

.height-100{ height: calc(100%); }
.height-100-5{ height: calc(100% - 5px); }

@media only screen and (min-width: 1024px) and (max-width: 1159px){
}

@media only screen and (min-width: 768px) and (max-width: 1023px){
  .custom-row{ display: flex; flex-wrap: wrap; margin-left: -2.5px; margin-right: -2.5px; }
  .width-50{ width: 100%; flex: 0 0 50%; max-width: 0 0 50%; padding-left: 2.5px; padding-right: 2.5px; }
  
  .width-641{ width: 100%; flex: 0 0 70%; max-width: 0 0 70%; padding-left: 15px; padding-right: 15px; }
  .width-288{ width: 100%; flex: 0 0 30%; max-width: 0 0 30%; padding-left: 15px; padding-right: 15px; }
  
  .width-320{ width: 100%; flex: 0 0 35%; max-width: 0 0 30%; padding-left: 15px; padding-right: 15px; }
  .width-609{ width: 100%; flex: 0 0 65%; max-width: 0 0 70%; padding-left: 15px; padding-right: 15px; }

  .width-573{ width: 100%; flex: 0 0 59.5%; max-width: 0 0 59.5%; padding-left: 15px; padding-right: 15px; }
  .width-375{ width: 100%; flex: 0 0 40.5%; max-width: 0 0 40.5%; padding-left: 15px; padding-right: 15px; }

  .width-295{ width: 100%; flex: 0 0 32.5%; max-width: 0 0 32.5%; padding-left: 15px; padding-right: 15px; }
  .width-655{ width: 100%; flex: 0 0 67.5%; max-width: 0 0 67.5%; padding-left: 15px; padding-right: 15px; }
}

@media (min-width: 700px) {
  img.img-fluid{ width: 100%; }
}

@media (min-width: 1024px) {
.container{ padding-left: 15px; padding-right: 15px; }

.custom-row{ display: flex; flex-wrap: wrap; margin-left: -2.5px; margin-right: -2.5px; }
.width-50{ width: 100%; flex: 0 0 50%; max-width: 0 0 50%; padding-left: 2.5px; padding-right: 2.5px; }

.width-641{ width: 100%; flex: 0 0 70%; max-width: 0 0 70%; padding-left: 15px; padding-right: 15px; }
.width-288{ width: 100%; flex: 0 0 30%; max-width: 0 0 30%; padding-left: 15px; padding-right: 15px; }

.width-320{ width: 100%; flex: 0 0 35%; max-width: 0 0 30%; padding-left: 15px; padding-right: 15px; }
.width-609{ width: 100%; flex: 0 0 65%; max-width: 0 0 70%; padding-left: 15px; padding-right: 15px; }

.width-573{ width: 100%; flex: 0 0 59.7%; max-width: 0 0 59.7%; padding-left: 15px; padding-right: 15px; }
  .width-375{ width: 100%; flex: 0 0 40%; max-width: 0 0 40%; padding-left: 15px; padding-right: 15px; }

  .width-295{ width: 100%; flex: 0 0 32.5%; max-width: 0 0 32.5%; padding-left: 15px; padding-right: 15px; }
  .width-655{ width: 100%; flex: 0 0 67.5%; max-width: 0 0 67.5%; padding-left: 15px; padding-right: 15px; }
}

@media (min-width: 1169px) {
  .container{ max-width: 1040px; padding-left: 15px; padding-right: 15px; }
  
  .custom-row{ display: flex; flex-wrap: wrap; margin-left: -2.5px; margin-right: -2.5px; }
  .width-50{ width: 100%; flex: 0 0 50%; max-width: 0 0 50%; padding-left: 2.5px; padding-right: 2.5px; }
  
  .width-641{ width: 100%; flex: 0 0 671px; max-width: 0 0 671px; padding-left: 15px; padding-right: 15px; }
  .width-420{ width: 100%; flex: 0 0 450px; max-width: 0 0 318px; padding-left: 15px; padding-right: 15px; }

  .width-573{ width: 100%; flex: 0 0 603px; max-width: 0 0 671px; padding-left: 15px; padding-right: 15px; }
  .width-375{ width: 100%; flex: 0 0 405px; max-width: 0 0 318px; padding-left: 15px; padding-right: 15px; }

  .width-288{ width: 100%; flex: 0 0 318px; max-width: 0 0 318px; padding-left: 15px; padding-right: 15px; }
  
  .width-320{ width: 100%; flex: 0 0 350px; max-width: 0 0 350px; padding-left: 15px; padding-right: 15px; }
  .width-609{ width: 100%; flex: 0 0 639px; max-width: 0 0 639px; padding-left: 15px; padding-right: 15px; }

  .width-295{ width: 100%; flex: 0 0 325px; max-width: 0 0 325px; padding-left: 15px; padding-right: 15px; }
  .width-655{ width: 100%; flex: 0 0 685px; max-width: 0 0 685px; padding-left: 15px; padding-right: 15px; }
}

@media (max-width: 1024px) {
  .container{ max-width: 100%; padding-left: 15px; padding-right: 15px; }
}

@media (max-width: 767px) {
  .custom-row{ display: flex; flex-wrap: wrap; margin-left: -2.5px; margin-right: -2.5px; }
  .width-50{ width: 100%; flex: 0 0 50%; max-width: 0 0 50%; padding-left: 2.5px; padding-right: 2.5px; }
  .width-573{ padding-left: 15px; padding-right: 15px; }
  .width-375{ width: 100%; padding: 15px; }
  .width-295{ width: 100%; padding: 15px; }
  .width-655{ width: 100%; padding-left: 15px; padding-right: 15px; }
}

@media (max-width: 1024px) {
  #main-content .container{ padding-left: 15px !important; padding-right: 15px !important; }
  .width-641, .width-288, .width-320, .width-609{ padding-left: 15px; padding-right: 15px; }
}

@media (max-width: 768px) {
  .width-641{ width: 100%; }
}

@media (max-width: 639px) {
  .width-641, .width-288, .width-320, .width-609{ width: 100%; padding-left: 15px; padding-right: 15px; }
  img.img-fluid{ width: 100%; }
}

@media (max-width: 540px) {
  .width-375{ padding: 15px; }
  .width-375 img.img-fluid{ width: 100%; }
  .width-295 img.img-fluid{ width: 100%; }
  .width-655 img.img-fluid{ width: 100%; }
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* preload video */
.video-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
  z-index: 999999;
  max-width: 100%;
}
.video-container video {
  /* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 100%; 
  background-color: #000000;
  z-index: -1;
  max-width: 100%;

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  /*width: auto;
  height: auto;
  */
  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}