html,
body {
  position: relative;
  overflow-x: hidden;
  margin: 0;
  font-family: "Montserrat";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.2em;
  color: rgb(99, 99, 99);
  letter-spacing: .5px;
}


/* @font-face {
  font-family: 'Bebas Neue';
  src: url(BEBASNEUE-BOLD.OTF);
  font-weight: bold;
} */

/* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Bebas Neue", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.2em;
  color:rgb(38,38,38);  */

section {
  margin: 0;
  padding: 0;
}
/* code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
} */
ul {
  padding: 0;
}
li {
  list-style: none;
  padding-top: 15px;
}
span {
  color: #006bb6;
}
span :hover {
  cursor: pointer;
  color: #65bfff;
}
a {
  text-decoration: none;
	color:006bb7;
}

a:visited {
  color: #006bb7 ;
}

h1 {
  font-family: "Montserrat";
  font-weight: 400;
  color: #006bb7;
}

h2 {
  font-family: "Montserrat";
  font-weight: 200;
}

p {
    line-height: 35px !important;
}


@media screen and (max-width: 570px) {
	.responsiveHeader {
		font-size:35px !important ;
	}
	h2{
		font-size:30px !important;
	}
}

h3{
  font-family: "Montserrat";
  font-weight: 400;
}

h4{
  font-family: "Montserrat";
  font-weight: 200;
}

h5{
  font-family: "Montserrat";
  font-weight: 200;
}

p {
  font-family: "Montserrat";
  font-weight: 400;
  line-height: 30px;
}

hr {
 border-style: none;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, rgba(4, 104, 182, 0.1),rgba(4, 104, 182, 0.9), rgba(4, 104, 182, 0.1));
}

.hrHeading{
  border-style: none !important;
  width: 25% !important;
  height: 2px !important;
  background:  linear-gradient(to right, rgba(255, 255, 255, 0.1),rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); !important;
}

.hrHeadingSmall{
  border-style: none !important;
  width: 10% !important;
  height: 2px !important;
  background:  linear-gradient(to right, rgba(255, 255, 255, 0.1),rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); !important;
}


sup{
  color:black;
}

.wp-block{
	width:100% !important;
}

.wp-block-embed__wrapper iframe{
	width:800px;
	height:400px;
}

.wp-block-embed iframe{
	width:800px;
	height:400px;
}

.wp-block-columns{
  align-items: center !important;
  justify-content: center; 
  text-align:center !important;
}

#responsive-menu-container, #responsive-menu-container:before, #responsive-menu-container:after, #responsive-menu-container *, #responsive-menu-container *:before, #responsive-menu-container *:after {
    box-sizing: border-box;
    margin: 0;
    padding-top: 1% !important;
}
/* #region  Site Standard Styles (Colors, animations, etc) */
/* Color for links, highlights, etc */
.blue {
  color: #0898ff;
}
/* Color for links, highlights, etc on hover */
.blueHover:hover {
  color: #0898ff;
  cursor: pointer;
}

.drkBlue {
  color: #006bb7;
}
/* Grow animation for items */
.grow {
  transition: all 0.2s ease-in-out;
}
/* Gro on hover animation (USE THIS ONE) */
.grow:hover {
  transform: scale(1.1);
}
.fontWeight100 {
  font-weight: 100;
}

.pointer {
  cursor: pointer;
}

.dropShadow {
  text-shadow: 4px 4px 6px #000000;

}

.underline {
	text-decoration:underline;
}

.internalLink{
	color: #006bb7 !important;
	text-decoration: underline !important;
}

.verticalColumnBorder {
  color: white;
  height: 300px;
  border-width: 1.5px;
  border-style: solid;
  border-image: linear-gradient(
      to top,
      rgba(4, 104, 182, 0),
      rgba(4, 104, 182, 0.6)
    )
    1 100%;
}
.marginBox {
  margin-top: 200px;
  margin-bottom: 200px;
}

.marginSide7{
	margin:0% 7%;
}

.indent{
	padding-left:25px;
}

.noMargin{
	margin:0px !important;
}

.marRight5{
  margin-right:5%;
}

.marRight8{
  margin-right:8%;
}

.marLeft8{
  margin-left:8%;
}

.marLeft100 img{
  margin-left:100px;
}

.negMarginTop20 {
  margin-top:-20px !important;
}

.negMarginTop35 {
  margin-top:-35px !important;
}


.negMarginTop40 {
  margin-top:-40px !important;
}

.marginSide50{
	margin: 0px 50px!important;;
}

.wp-block-column:not(:first-child) {
    margin-left: 0em ;
}


.negMarginTop50 {
  margin-top:-50px !important;
}

.negMarginTop {
  margin-top: -90px !important;
}


.negMarginTop120 {
  margin-top:-110px !important;
}

.negMarginTop150 {
  margin-top: -150px !important;
}

.marginTopNeg25{
	margin-top:-25px !important;
}

.netMarginTop200 {
  margin-top: -200px !important;
}

.negMarginBottom {
  margin-bottom: 0px !important;
}
.marginTop20 {
  margin-top: 20px !important;
}

.marginTop60 {
  margin-top: 60px !important;
}

.marginTop90 {
  margin-top: 95px !important;
}

.marginTop120 {
  margin-top: 120px !important;
}


.marginTop150 {
  margin-top: 150px !important;
}

.marginTop180 {
  margin-top: 180px !important;
}

.padding10{
	padding:10px;
}

.textAlignLeft{
	text-align:left;
}

.width80pc{
	width:80%;
}

.margin0Auto{
	margin: 0 auto;
}

.marginTop150 {
  margin-top: 150px !important;
}

.marginBottom90{
	margin-bottom:90px;	
}
.marginBottom40{
	margin-bottom:40px;	
}

.negMarginBottom40{
	margin-bottom:-30px;	
}
.headerCaption {
  display: none;
  margin: 0px 20px 0px 20px;
  padding: 0px 10px 0px 10px;
  text-align: center;
}
.flexCenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.flexCenterContainer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0% 5%;
  padding: 0% 2%;
}
.inline {
  display: flex;
  flex-direction: row;
}

.internallink{
	color:black;
}

.width50{
  flex-basis: 100%;
}

.sidePadding{
  padding: 0px 200px 0px 200px;
}


.imageSize img{
  width:500px;
  height:auto;
}

.responsiveImageSmall > figure img{
	width:100% !important;
	height:100% !important;
}

.textAlginCenter{
	text-align:center !important;
}

.textAlignLeft{
	text-align: left !important;
}

.textAlignLeft h1{
  text-align: left ;
}
.textAlignLeft h2{
  text-align: left ;
}
.webAnchorTop{
	position:absolute;
	top:90%;
	opacity:0%;
}

/* #endregion */

/*Hubspot form styling*/
.hbspt-form{
	display: flex;
    flex-direction: row;
    justify-content: center;
}
	

/* #region  Icon sizing Styles & Letter spacing */
.md-18 {
  font-size: 18px;
}
.md-24 {
  font-size: 24px;
}
.md-36 {
  font-size: 36px;
}
.md-48 {
  font-size: 48px;
}
.md-60 {
  font-size: 60px;
}
.md-72 {
  font-size: 72px;
}
.md-84 {
  font-size: 84px;
}
.md-96 {
  font-size: 96px;
}
.md-108 {
  font-size: 108px;
}
.md-120 {
  font-size: 120px;
}
.md-132 {
  font-size: 132px;
}

.ls-1 {
  letter-spacing: 1px;
}
.ls-2 {
  letter-spacing: 2px;
}
.ls-3 {
  letter-spacing: 3px;
}
.ls-4 {
  letter-spacing: 4px;
}
/* #endregion */
/* #region  Icon colors Styles*/
.md-light {
  color: rgba(255, 255, 255, 1);
}

.md-dark {
  color: rgba(0, 0, 0, 0.54);
}

.md-blue {
  color: #0898ff;
}

.displayNone{
	display:none;
}

.lineHeight20{
	line-height:20px !important;
}

.flexColumn{
	display:flex !important;
	flex-direction:column !important;
	justify-content:center !important;
	align-items:center !important;
	width:100%;
}


.flexColumnForm{
	display:flex !important;
	flex-direction:column !important;
	justify-content:center !important;
	align-items:center !important;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output{
	display:none !important;	
}

.wpcf7-gated-content{
	width:30%;
}
.wpcf7-response-output{
	text-align:center;
	width:100%;
	border-style:none !important;
}
#wpcf7-download-wpcf7-f1577-p53-o1{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}

@media (min-width: 782px){
	.wp-block-column:not(:first-child) {
		margin-left: 2em;
	}
}
@media screen and (max-width: 601px) {
 
	.responsiveImage figure img{
		margin-left: -8% !important
	}
}

.responsiveImage figure img{
	width:100%;
	height:100%;
	margin-left: -8% !important
}
/* #endregion */
/* #region -----------------------------------------------------Nav Bar ----------------------------------------------------------------------- */
/* Nav styling */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 30px 0px 20px;
  background-color: white;
  z-index: 2;
  height:100px;
}
/* logo styling */
.logo {
  margin-top:0px;
  width: 380px;
  height: auto;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.navIcon {
  padding-right: 80px;
}

.navItemsTop{
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right:50px;
}
.navItemsTop a {
  margin:20px;
}

.topNav a{
	color:white;
}



/* #region  Overlay styles */
.overlay {
  height: 0;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.95);
  overflow-x: hidden;
  overflow-y: hidden;
  transition: 0.4s;
  color: #b6b6b6;
  z-index: 1;
}
/* #endregion */

/* #region  Overlay 'X' button styles */
.overlay a {
  text-decoration: none;
  color: #b6b6b6;
}

.closebtn {
  position: absolute;
  top: 1px;
  right: 51px;
  font-size: 65px;
}
/* #endregion */

/* #region  Main content container for overlay */
.sidenav-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  top: 20%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}
/* #endregion */

/* #region  Top container for context (menu links and locations) */
.sidenav-containerTop {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.sidenav-containerLeft {
  display: flex;
  justify-content: center;
  align-self: flex-start;
  font-size: 50px;
}

.sidenav-containerRight {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: left;
  font-size: 15px;
}
/* #endregion */

/* #region  Bottom container for content (social media imgs) */
.sidenav-containerBottom {
  width: 100%;
  display: flex;
  justify-content: center;
}

.social-icon-list {
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.socialText p{
  margin-bottom:-40px;
}

.social-icon-list img {
  width: 35px;
  height: auto;
  padding: 15px;
}
/* #endregion */

/* #region Media Queries  */
@media screen and (max-width: 1000px) {
  .sidenav-containerLeft {
    font-size: 40px;
  }
  .sidenav-containerRight {
    font-size: 15px;
  }
}
@media screen and (max-width: 850px) {
  .overlay {
    overflow-y: visible;
  }
  .sidenav-containerTop {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
  }
  .sidenav-container {
    margin-top: 0px;
  }
  .sidenav-containerLeft {
    font-size: 40px;
    align-self: center;
  }
  .sidenav-containerRight {
    font-size: 15px;
  }
  .social-icon-list {
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 600px) {
  .sidenav-containerLeft {
    font-size: 35px;
    margin: 30px;
  }
  .sidenav-containerRight {
    font-size: 13px;
    margin: 30px;
  }
}
@media screen and (max-width: 500px) {
  .sidenav-containerLeft {
    font-size: 35px;
    margin: 25px;
  }
  .logo {
    width: 300px;
    height: auto;
  }
  .navIcon {
    padding-right: 40px !important;
  }
}
@media screen and (max-width: 400px) {
  .sidenav-containerLeft {
    font-size: 25px;
    margin: 25px;
  }
  #responsive-menu-container #responsive-menu li.responsive-menu-item .responsive-menu-item-link{
     font-size: 25px !important;
  }	

}
@media screen and (max-width: 450px) {
  .overlay a {
    font-size: 20px;
  }
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
  .logo {
    width: 200px;
    height: auto;
  }
}
/* #endregion */
/* #endregion */
/* #region -----------------------------------------------------Header Image ------------------------------------------------------------------ */

.headerArrowButton figure img{
	position:absolute;
	top:70%;
	right:50%;
}

.headerImage{
  width:100% !important;
  height:60vh !important;
  margin-top:110px;
}


/* @media screen and (min-width: 1000px){
	
.headerImage{
  width:100% !important;
  height:56vw !important;
	}
} 

@media screen and (min-width: 1250px){
	
.headerImage{
  width:100% !important;
  height:46vw !important;
	}
} 


@media screen and (min-width: 1550px){
	
.headerImage{
  width:100% !important;
  height:38vw !important;
	}
} 

@media screen and (min-width: 1850px){
	
.headerImage{
  width:100% !important;
  height:32vw !important;
	}
} 
 */
/* @media screen and (min-height: 600px){
	
.headerImage{
  width:100% !important;
  height:20vw !important;
}
@media screen and (min-height: 1000px){
	
.headerImage{
  width:100% !important;
  height: inherit;
} */


 .headerImageTextContainerH1 {
    font-size: 55px;   
	 color:white !important;
}

.headerImageWrapper {
  position: relative;
  margin-bottom: 70px;
  text-align: center;
  z-index: -1;
  margin-top: 100px;
}
.headerImageTextContainer {
  position: absolute;
  top: 40%;
  color: white;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.headerImageTextContainer h1 {
  /* font-family: "roboto light"; */
  font-size: 50px;
  margin: 15px 0px 0px 0px;
  padding-bottom: 30px;
  position: relative;
  margin-bottom: 40px;
}

.headerImageTextContainer h1:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 1px;
  bottom: 0;
  left: 41%;
  border-bottom: 2px solid white;
}

.headerImageTextContainerApplications h1:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 1px;
  bottom: 0;
  left: 22%;
  border-bottom: 2px solid white;
}

.headerImageTextContainerSolutions h1:before {
  content: "";
  position: absolute;
  width: 200px;
  height: 1px;
  bottom: 0;
  left:13%;
  border-bottom: 2px solid white;
}

.headerImageTextContainer p {
  /* font-family: 'roboto light'; */
  font-size: 25px;
  width: 65%;
  margin: 0px 0px 10px 0px;
}

@media screen and (min-width: 1500px) {
  .headerImageTextContainerH1 {
    font-size: 55px;
  }

	
  .headerImageTextContainer h1:before {
    content: "";
    position: absolute;
    width: 200px;
    height: 1px;
    bottom: 0;
    left: 41%;
    border-bottom: 2px solid white;
  }
  .headerImageTextContainerApplications h1:before {
    content: "";
    position: absolute;
    width: 60%;
    height: 1px;
    bottom: 0;
    left: 22%;
    border-bottom: 2px solid white;
  }
  
  .headerImageTextContainerSolutions h1:before {
    content: "";
    position: absolute;
    width: 70%;
    height: 1px;
    bottom: 0;
    left: 16%;
    border-bottom: 2px solid white;
  }
 
}
@media screen and (max-width: 1499px) {
  .headerImageTextContainerH1 {
    font-size: 45px;
  }
	
  .headerImageTextContainer h1:before {
    content: "";
    position: absolute;
    width: 40%;
    height: 1px;
    bottom: 0;
    left: 30%;
    border-bottom: 2px solid white;
  }
  
  .headerImageTextContainerApplications h1:before {
    content: "";
    position: absolute;
    width: 60%;
    height: 1px;
    bottom: 0;
    left: 22%;
    border-bottom: 2px solid white;
  }
  

  
  .headerImageTextContainerSolutions h1:before {
    content: "";
    position: absolute;
    width: 70%;
    height: 1px;
    bottom: 0;
    left: 16%;
    border-bottom: 2px solid white;
  }
  .verticalColumnBorder {
    display: none;
  }
}
@media screen and (max-width: 1175px) {
  .headerImageTextContainerH1  {
    font-size: 35px;
    
  }
  .headerImageTextContainer h1:before {
    content: "";
    position: absolute;
    width: 40%;
    height: 1px;
    bottom: 0;
    left: 30%;
    border-bottom: 2px solid white;
  }
  .headerImageTextContainerApplications h1:before {
    content: "";
    position: absolute;
    width: 60%;
    height: 1px;
    bottom: 0;
    left: 22%;
    border-bottom: 2px solid white;
  }
  .headerImageTextContainerSolutions h1:before {
    content: "";
    position: absolute;
    width: 70%;
    height: 1px;
    bottom: 0;
    left: 16%;
    border-bottom: 2px solid white;
  }
}
@media screen and (max-width: 960px) {
  .headerImageTextContainerH1 {
    font-size: 30px;
    
  }
  sup{
    color:white;
  }
  .headerImageTextContainer h1:before {
    content: "";
    position: absolute;
    width: 40%;
    height: 1px;
    bottom: 0;
    left: 30%;
    border-bottom: 2px solid white;
  }
  .headerImageTextContainerApplications h1:before {
    content: "";
    position: absolute;
    width: 60%;
    height: 1px;
    bottom: 0;
    left: 22%;
    border-bottom: 2px solid white;
  }
  .headerImageTextContainerSolutions h1:before {
    content: "";
    position: absolute;
    width: 70%;
    height: 1px;
    bottom: 0;
    left: 16%;
    border-bottom: 2px solid white;
  }
 
}
@media screen and (max-width: 850px) {
  
.headerImage{
  margin-top:120px;
}
  .headerImageTextContainerApplications h1:before {
    content: "";
    position: absolute;
    width: 60%;
    height: 1px;
    bottom: 0;
    left: 22%;
    border-bottom: 2px solid white;
  }
 
  
  .headerImageTextContainerSolutions h1:before {
    content: "";
    position: absolute;
    width: 70%;
    height: 1px;
    bottom: 0;
    left: 16%;
    border-bottom: 2px solid white;
  }
  .headerImageTextContainer h1:before {
    content: "";
    position: absolute;
    width: 40%;
    height: 1px;
    bottom: 0;
    left: 30%;
    border-bottom: 2px solid white;
  }
}

@media screen and (max-width: 475px) {
  .headerImageWrapper {
    margin-bottom: 15px;
  }
  .headerImageTextContainer {
    width: 100%;
  
  }
  .headerImageTextContainerH1 {
   
    letter-spacing: 2px;
    
  }
  .headerImageTextContainer p {
    display: none;
  }
  .headerCaption {
    display: block;
    font-family: "roboto";
  }
  .headerCaption h1 {
    font-size: 22px;
    font-family: "poppins";
    letter-spacing: 1px;
    line-height: 28px;
    margin: 5px 0px 0px 0px;
    font-weight: 500px;
  }
  .headerCaption p {
    color: gray;
    font-size: 13px;
    font-family: "poppins";
    letter-spacing: 2px;
    line-height: 19px;
    text-align: center;
    margin-top: 10px;
  }
  .headerImageTextContainer h1:before {
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    bottom: 0;
    left: 25%;
    border-bottom: 2px solid white;
  }
  .headerImageTextContainerApplications h1:before {
    content: "";
    position: absolute;
    width: 60%;
    height: 1px;
    bottom: 0;
    left: 22%;
    border-bottom: 2px solid white;
  }
  .headerImageTextContainerSolutions h1:before {
    content: "";
    position: absolute;
    width: 70%;
    height: 1px;
    bottom: 0;
    left: 16%;
    border-bottom: 2px solid white;
  }
}
.headerCaptoinLineBreak {
  margin: 0 auto;
  width: 100%;
  border: 0;
  height: 2.5px;
  background: linear-gradient(
    to right,
    rgba(4, 104, 182, 0),
    rgba(4, 104, 182, 0.4),
    rgba(4, 104, 182, 0)
  );
  
}
@media screen and (max-width: 430px) {
  .headerImageTextContainerH1 {
   font-size: 23px;
  }  .headerImageTextContainerApplications h1:before {
    content: "";
    position: absolute;
    width: 60%;
    height: 1px;
    bottom: 0;
    left: 18%;
    border-bottom: 2px solid white;
  }
  .headerImageTextContainerSolutions h1:before {
    content: "";
    position: absolute;
    width: 70%;
    height: 1px;
    bottom: 0;
    left: 16%;
    border-bottom: 2px solid white;
  }
}
/* #endregion */
/* #region  ----------------------------------------------------Center Header------------------------------------------------------------------ */
.centerHeader {
  text-align: center;
  margin: 0px 0px 0px 0px;
  /* font-family: "roboto thin", serif; */
  /* font-weight: 200 !important; */
  color: #006bb7;
  font-size: 40px;
}
@media screen and (max-width: 1220px) {
  .centerHeader {
    font-size: 30px;
    margin-bottom: 5px;
    margin-top: 5px;
  }
}
@media screen and (max-width: 660px) {
  .centerHeader {
    font-size: 25px;
    margin: 20px 10px 20px 10px;
  }
}

}
/* #endregion */
/* #region  ----------------------------------------------------Three  Image Layout------------------------------------------------------------ */
.imageWithCaptionWrapper {
  display: flex;
  align-items: baseline;
  justify-content: center;
  justify-content: space-around;
  margin: 50px 40px 180px 40px;
}

.imageWithCaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  width: 33%;
}

.textCenter{
	text-align:center;
}

.imageWithCaption p {
  width: 80%;
  font-size: 18px;
  font-family: "poppins";
  letter-spacing: 2px;
  line-height: 19px;
  text-align: center;
  color: gray;
}

@media screen and (max-width: 1680px) {
  .imageWithCaption img {
    width: 400px;
    height: auto;
  }
}
@media screen and (max-width: 1450px) {
  .imageWithCaption img {
    width: 350px;
    height: auto;
  }
}
@media screen and (max-width: 1300px) {
  .imageWithCaption img {
    width: 300px;
    height: auto;
  }
}
@media screen and (max-width: 1150px) {
  .imageWithCaption img {
    width: 280px;
    height: auto;
  }
  .imageWithCaptionWrapper {
    margin-top: 10px;
  }
}
@media screen and (max-width: 1060px) {
  .imageWithCaption img {
    width: 250px;
    height: auto;
  }
}
@media screen and (max-width: 930px) {
  .imageWithCaptionWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .imageWithCaption {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 20px;
  }
  .imageWithCaption p {
    font-size: 20px;
  }
}
@media only screen and (max-width: 750px) {
  .imageWithCaptionWrapper {
    display: flex;
    align-items: baseline;
    align-items: center;
    justify-content: center;
    margin: 50px;
    flex-direction: column;
  }
  .imageWithCaption {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 20px 0px 20px 0px;
    text-align: center;
  }
  .imageWithCaption img {
    width: 400px;
    height: auto;
  }
}
@media screen and (max-width: 500px) {
  .imageWithCaptionWrapper{
    margin-bottom:30px;
  }
  .imageWithCaption {
    width: 100%;
   
  }
  .imageWithCaption p {
    font-size: 15;
    width: 100%;
    font-size: 13px;
    letter-spacing: 2px;
    line-height: 19px;
    text-align: center;
  }
  .imageWithCaption img {
    width: 250px;
    height: auto;
  }
}


@media screen and (min-width: 1680px) {
  .homePageImg > figure img {
    width: 400px;
    height: auto;
  }
}
@media screen and (max-width: 1450px) {
  .homePageImg > figure img {
    width: 250px;
    height: auto;
  }
}

@media screen and (max-width: 1150px) {
 .homePageImg > figure img {
    width: 200px;
    height: auto;
  }
}


@media screen and (max-width: 800px) {
  .homePageImg > figure img {
    width: 300px;
    height: auto;
  }
}


@media screen and (max-width: 550px) {
  .homePageImg > figure img {
    width: 250px;
    height: auto;
  }
}
@media screen and (max-width: 450px) {
  .homePageImg > figure img {
    width: 220px;
    height: auto;
  }
}

/* #endregion */
/* #region  ----------------------------------------------------Explainer Video --------------------------------------------------------------- */
.explainerVideoWrapper {
  margin: 100px 200px 150px 200px;
  padding: 5px;
  text-align: center; 
}
.explainerVideoWrapper h1 {
  font-size: 60px;
  /* font-family: "roboto thin"; */
}

.player{
width:92% !important;
height:92% !important;
margin:0 0 0 15%}


.player-wrapper {
  
  position: relative;
  padding-top: 56.25% /* Player ratio: 100 / (1280 / 720) */
}
.react-player {
  position: absolute;
  top: 0;
  left: 0;


@media screen and (max-width: 1200px) {
  .explainerVideoWrapper{
    margin: 100px 100px 150px 100px;
  }
  .explainerVideoWrapper h1 {
    font-size: 30px;
  }
}
@media screen and (max-width: 750px) {
  .explainerVideoWrapper {
    margin:65px 50px 150px 50px;
    padding: 5px;
    text-align: center;
  }
}
@media screen and (max-width: 475) {
  .explainerVideoWrapper h1 {
    font-size: 20px;
  }
  .explainerVideoWrapper{
    margin: 0px 25px 150px 25px;
  }
}
@media screen and (max-width: 660px) {
  .explainerVideoWrapper {
    margin-top:0px;
    padding: 5px;
    text-align: center;
  }
	
		.wistia_responsive_wrapper{
		width:81% !important;
		padding: 0 10% !important ;
	
	}
}
/* #endregion */
/* #region  ----------------------------------------------------Explainer Paragraphs ---------------------------------------------------------- */
.explainerParagraph {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  font-family: "poppins";
  letter-spacing: 2px;
}
.explainerParagraph p {
  width: 80%;
  text-align: center;
}
@media screen and (max-width: 1250px) {
  .explainerParagraph p {
    font-size: 20px;
  }
}

@media screen and (max-width: 750px) {
  .explainerParagraph {
    margin-top:30px !important;
  }
  .explainerParagraph p {
    text-align:left;
   
  }
}
@media screen and (max-width: 550px) {
  .explainerParagraph p {
    font-size: 15px;
    text-align:left;
   
  }
  .explainerParagraph {
    margin-top:20px;
  }
}

/* #endregion */
/* #region  ----------------------------------------------------Sticky Images------------------------------------------------------------------ */
.formWithImageWrapper {
  margin: 275px 0px 200px 0px;
}
.stickyImageLeft {
  position: absolute;
  left: -500px;
  margin-top: -300px;
  z-index: -2;
}
.stickyImageLeft img {
  width: 850px;
  height: auto;
}

.stickyImageRight img {
  width: 850px;
  height: auto;
}
@media screen and (max-width: 1000px) {
  .stickyImageLeft img {
    width: 650px;
    height: auto;
  }
  .stickyImageRight img {
    width: 650px;
    height: auto;
  }
  .stickyImageLeft {
    position: absolute;
    left: -400px;
    margin-top: -400px;
    z-index: -2;
  }
}
@media screen and (max-width: 680px) {
  .stickyImageLeft img {
    position: absolute;
    left: 120px;
    margin-top: 50px;
    width: 450px;
    height: auto;
  }
  .stickyImageRight img {
    position: absolute;
    right: 120px;
    margin-top: 220px;
    z-index: -1;
    width: 450px;
    height: auto;
  }
  
}
@media screen and (max-width: 420px) {
  .formWithImageWrapper {
    margin: 300px 0px 200px 0px;
  }

  .stickyImageLeft img {
    position: absolute;
    left: 170px;
    margin-top: 80px;
    width: 400px;
    height: auto;
  }

}
/* #endregion */

/* #region  ----------------------------------------------------Alternating Images and Text---------------------------------------------------- */
.alternatingWrapper { display: flex; flex-flow: column nowrap; margin-left: 0 !important; margin-right: 0 !important; }
    .alternatingWrapper > .wp-block-columns { margin-left: 8%; margin-right: 8%; }
        .alternatingWrapper > .wp-block-columns > .wp-block-column { margin: 0 10px; width: 100%; }
    .alternatingWrapper .wp-block-image img { width: 32vw !important; height: 100% !important; }
    .alternatingWrapper .wp-block-columns iframe { width: 32vw !important; }
    .alternatingWrapper .wp-block-image figure { width: 100% !important; height: 100% !important; }
    .alternatingWrapper .wp-block-columns:nth-of-type(even) { flex-flow: row-reverse nowrap }

@media screen and (max-width: 1024px) {
    .alternatingWrapper .wp-block-columns { flex-flow: column nowrap !important; }
        .alternatingWrapper .wp-block-columns iframe { width: 100% !important; }
    .alternatingWrapper .wp-block-image img { width: 100% !important; }
}
/* #endregion */
/* #region  ----------------------------------------------------Contact Form------------------------------------------------------------------- */

.contactFormWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0px 25px 100px 25px;
}
.contactForm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 25px;
  padding: 30px; 
  width:75%;
  max-width: 1000px;
  background-color: rgba(177, 177, 177, 0.2);
  border-radius: 15px;
  width:50%;
}

.contactForm label {
	font-size:20px;
	width:50%;
}

.contactForm h1 {
  color: rgb(44, 44, 44);
  /* font-family: "roboto thin"; */
  font-size: 50px;
}
.formInput{
	display:flex;
	flex-direction:row;
	justify-content:space-around;
	align-items:center;
	width:100%;
}

.marginLeft1{
	margin-left:15px !important;
}

.hs-form-7acf689e-6c30-4d17-8fdf-aaeac4305a83_9a9e2aeb-20b9-4bf4-9912-8c304d4987be fieldset.form-columns-1 .input {
	background-color:red;
}

.hbspt-form form input {
  font-family: "poppins";
  border-radius: 5px;
  margin: 5px 0px 15px 0px;
  padding: 8px;
  font-size: 18px;
  text-align: center;
  letter-spacing: 3px;
  cursor: pointer;
  width:50%;
}

.formInput input {
  font-family: "poppins";
  border-radius: 5px;
  margin: 5px 0px 15px 0px;
  padding: 8px;
  font-size: 18px;
  text-align: center;
  letter-spacing: 3px;
  cursor: pointer;
  width:50%;
}


textarea {
  width: 600px;
  height: 200px;
  border-radius: 5px;
  letter-spacing: 3px;
  font-size: 30px;
  font-family: "poppins";
}

.textAreaAlignLeft{
font-size: 20px;
font-family: "poppins";
text-align:left;
}

.formButton {
  font-family: "poppins";
  border-radius: 5px;
  background-color:  #0898ff;
  font-size:15px;
  padding: 10px;
  letter-spacing: 3px;
  cursor: pointer;
  border-width: 2px;
  border-style: solid rgb(0, 0, 0);
}
.formButton:hover {
  color: white;
}
@media screen and (max-width: 1080px) {
  textarea {
    width: 400px;
  }
  .contactForm h1 {
    font-size: 40px;
  }
	.mobileLogoImg figure img{
		width:150px;
		height:auto;
	}
}
@media screen and (max-width: 800px) {
  .contactForm {
    margin: 0px;
	width: 90%;
  }
  .contactForm input {
    margin: 30px 20px;
    
  }
  textarea {
    width: 300px;
  }
  .wp-block-image{
	display:flex !important;
	flex-direction:column !important;
	justify-content:center !important;
	align-items:center !important;
}
	
}
@media screen and (max-width: 780px) {

  textarea {
    width: 500px;
  }
	
}
@media screen and (max-width: 630px) {
  .contactForm {
    padding: 25px;
  }
  .contactForm h1 {
    font-size: 30px;
  }
  .contactForm input {
    font-size: 30px;
  }
  textarea {
    font-size: 20px;
  }
  .has-text-align-left{
	text-align:center;
  }
	 .mobileImages > figure img{
		width:587px !important;
		height:250px !important;
	}
}
@media screen and (max-width: 500px) {
	.wpcf7-list-item{
		display:flex !important;
		flex-direction:row;
		align-items:center;
	}
	
	.wpcf7-list-item input{
		margin:10px;
		padding: 0px ;
	}
	
	.wpcf7-list-item-label{
		width:100%;
		text-align:left;
	}

	.mobileLogoImg figure img{
		width:150px;
		height:auto;
	}
	
.formInput{
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	align-items:center;
	width:100%;
}
	.formInput input{
		width:80%;
	}
	
  .contactForm {
    padding: 10px;
  }
  .contactForm h1 {
    font-size: 25px;
  }
  .contactForm input {
    font-size: 15px;
  	
  }
  textarea {
    font-size: 15px;
    width: 90%;
  }
}
/* #endregion */
/* #region  ----------------------------------------------------Speech Privacy Wizard --------------------------------------------------------- */
.speechPrivacyWizard {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  margin: 55px 20px;
  padding: 70px 100px;
  width: 85%;
  background-color: white;
  border-radius: 15px;
  box-shadow: 8px 8px 8px rgba(177, 177, 177, 0.2);
  border: 1px solid rgba(177, 177, 177, 0.2);
}

.backgroundImage {
  background-image: url("./Components/System_Design_Tool/images/SM_form_option_1-06.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  background-position: right;

}

.speechPrivacyWizard h1 {
  font-size: 20px;
  color:black;
  /* font-family: "roboto light"; */
}

.speechPrivacyWizard p {
  font-size: 12px;
  color:black;
  /* font-family: "roboto light"; */
}

.speechPrivacyWizardInputWrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.speechPrivacyWizardInput h1 {
  margin-left: 20px;
  font-size: 50px;
  /* font-family: "roboto light"; */
  /* color: #087bffde; */
}

.speechPrivacyWizardInput {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 900px;
}

.speechPrivacyWizardInput p {
  margin-left: 20px;
  font-size: 17px;
  /* font-family: "roboto light"; */
}
.select {
  width: 360px;
  /* font-family: "roboto light"; */
  margin: 10px 20px;
  font-size: 15.5px;
  letter-spacing: 3.5px;
}

.totalAreaLabels {
  margin-top:20px;
  display: flex;
  flex-direction: row;
}

.totalAreaLabels {
  margin-left: 0px;
}

.speakerMsg {
  margin-left: 20px;
  margin-top: -10px;
}

.speakerMsgDisclaimer {
  margin-top: -15px;
  font-size: 15px !important;
}

.wizardContact {
  margin-top: 50px;
}



.inputs input {
  font-family: "poppins";
  width: 340px;
  margin: 20px;
  padding: 8px;
  font-size: 15px;
  text-align: left;
  letter-spacing: 3px;
  cursor: pointer;
  border-width: 2px;
  border-style: solid rgb(0, 0, 0);
}

.disclaimerMsg {
  margin-top: -30px;
  margin-left: 20px;
  font-size: 17px;
}

.speechPrivacyWizardButton input {
  font-family: "poppins";
  padding: 5px 15px;
  margin: 20px 20px 0px 20px;
  font-size: 15px;
  text-align: left;
  letter-spacing: 3px;
  cursor: pointer;
  border-radius: 5px;
  border-width: 3zspx;
  border-style: solid rgb(0, 0, 0);
}

.inputErrorMsg{
  color:red !important;
}

@media screen and (max-width: 1750px) {
  .speechPrivacyWizard {
    margin: 55px 500px;
    padding: 70px 50px;

  }
  
}
@media screen and (max-width: 1500px) {
    /* .inline{
      display:flex;
      flex-direction: column;
    } */
    .select{
      width:250px;
    }
    .inputs input{
      width:230px;
    }
}
@media screen and (max-width:1350px){
  .shadowBox{
    background: rgba(38, 38, 38, 0.6);
    border-radius: 5px;
    margin-top:20px;
    padding:15px;
  }
 
  sup{
    color:white;
  }

   .shadowBox p {color:white;}
}
@media screen and (max-width: 1220px) {
 
  .marginTop {
    margin-top: 150px !important;
  }
}
@media screen and (max-width: 1120px) {
  .speechPrivacyWizard h1 {
    font-size: 50px;
  }
}
@media screen and (max-width: 750px) {
  .speechPrivacyWizardInput{
    justify-content: center;
    align-items: center;
  }
  .inline{
    display: flex;
    flex-direction: column;
    text-align:center;
  }
  .speechPrivacyWizardInput h1{
    color:white;
    text-align: center;
  }
  .speechPrivacyWizardInput p{
    color:white;
  }
  .speechPrivacyWizardInputWrapper{
    padding-bottom:15px;
    background:rgba(38, 38, 38, 0.6);
    border-radius: 5px;
  }
  .wizardContact{
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .wizardContact p{
    text-align: center;
    margin-top:20px;
  }
  .shadowBox{
    background: rgba(38, 38, 38, 0.0);
    border-radius: 5px;
    margin-top:20px;
    padding:15px;
  }
}

@media screen and (min-width: 601px){
	.desktopView{
		display:block;
	}
	.mobileView{
		display:none;
	}
}
 
  @media screen and (max-width: 600px) {
	  .desktopView{
		  display:none !important;
	  }
	  .mobileView {
		  display: block;
	  }
	  
	  .marRight8{
		 margin:20px;
		
	  }

	  .marLeft8{
		 margin:20px;
		
	  }

    .imageTextRight img {
      height:275;
      width:auto;
      margin-right:-300px;
    }
    .imageTextLeft img {
      height:500px;
      width:auto;
      margin-left:-300px;
    }
  } */

@media screen and (max-width: 530px) {
  .speechPrivacyWizard{
    padding-right:10px;
    padding-left:10px;
    width:93%;
  }
  .speechPrivacyWizardInputWrapper{
    margin-left:-470px;
  }
  .disclaimerMsg{
    text-align: center;
  }
  .speechPrivacyWizardInput h1 {
    font-size: 30px;
    /* font-family: "roboto light"; */
  }
  .speechPrivacyWizardInput p {
    font-size: 15px;
    /* font-family: "roboto light"; */
  }
  .wizardContact{
    padding-right:5px;
  }
  .backgroundImage{
   padding-left:950px;
  }
}

/* #endregion */
/* #region  ----------------------------------------------------Footer------------------------------------------------------------------------- */
footer {
  background-color: rgba(31, 31, 31, 0.95) !important;
  color: white !important;
  padding: 100px !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  flex-direction: row !important;
}
footer a {
  text-decoration: none;
  color: white !important;
}
.footerNav{
  margin-top:-80px;
}
.footerNav h3{
  margin-bottom:-15px;
}


@media screen and (max-width: 1050px) {
  .socialText {
    margin-left:20px;
  }
  .socialText p{
    margin-left:15px;
  }
}
@media screen and (max-width: 930px) {
  .socialText p{
    margin-left:0px;
  }
  footer {
    padding:50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .footerNav{
    margin:25px 0px 25px 0px;

  }
}
/* #endregion */
/* #region  ----------------------------------------------------About Page -------------------------------------------------------------------- */
.aboutParagraphWrapper {
  display: flex;
  flex-direction: column;
  justify-items: center;
  justify-content: center;
  margin: 50px 150px;
}

.aboutParagraphWrapper img {
  width: 1000px;
  height: auto;
  margin-bottom: 50px;
}
/* #endregion */
/* #region  ----------------------------------------------------Image with text layout ----------------------------------------------------------- */
.imageTextRight {
  margin: 100px 0px 100px 0px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
}

.imageTextRightSolutions {
  margin: 100px 0px 100px 0px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: row;
}

.textArea {
  text-align: center;
  /* font-family: "Roboto light"; */
}

.textArea h1 {
  font-size: 60px;
  /* font-family: "Roboto light"; */
  color: #006bb7;
}

.textArea p {
  text-align: left;
  font-size: 20px;
}
.imageTextRight img {
  position: relative;
  right: 350px;
  margin: 0% 0% 0% 20%;
  padding: 0px;
  width: auto;
  height: 700px;
  transform: scaleX(-1);
}
.imageTextRightSolutions img {
  margin-right: 60px;
  padding: 0px;
  width: auto;
  height: 500px;
}

.imageTextLeft {
  margin: 100px 0px 100px 0px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
}

.imageTextLeftSolutions {
  margin: 150px 0px 100px 0px;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-direction: row;
 
}

.imageTextLeftSolutions .textArea{
  font-size: 25px;
}

.imageTextLeftSolutions .textArea h1{
  margin:0px;
}

.textArea {
  text-align: center;
	font-size: 27px;
    font-family: "roboto";
    font-weight: 300;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0px 10px;
}
.negMarginLeft{
  margin-left: -200px;
}

.negMarginRight{
  margin-right: -200px;
}

.noHeaderMargin h2{
 margin-top:0px !Important;
}

.imageTextLeft img {
  position: relative;
  margin: 0% 20% 0% 0%;
  left: 350px;
  padding: 0px;
  width: auto;
  height: 700px;
  transform: scaleX(-1);
}

.SMFamilyImg img{
  width: auto;
  height: 350px;
}

.imageTextLeftSolutions img {
  margin: 0px 50px 0px 0px;
  padding: 0px;
  width: 540px;
  height: auto;
}



@media screen and (max-width: 1725px) {

	
  .applicationsImage{
	height:auto;
    width:700px;
}

  .imageTextRightimg {
    height:500px;
    width:auto;
  }
  .imageTextLeft img {
    height:500px;
    width:auto;
  }
  .sidePadding {
    padding: 0px 100px;
  }
}
@media screen and (max-width: 1550px) {
  .imageTextLeftSolutions img{
    height: 275px;
    width: auto;
    margin-right:0px;
  }
}
@media screen and (max-width: 1385px) {
	
	
 
.textArea h1{
  font-size: 40px;
}
.textArea p{
  font-size: 15px;
}
.sidePadding {
  padding: 0px 20px;
}

}
@media screen and (max-width: 1450px) {
  .imageTextRight img {
    height:400px;
    width:auto;
  }
  .imageTextLeft img {
    height:400px;
    width:auto;
  }

}
@media screen and (max-width: 1300px) {
 h2{
   font-size:25px;
 }
 h5{
   font-size:25px;
 }
 h3{
   font-size:18px;
 }

 }

/* @media screen and (max-width: 1250px) {
  .negMarginLeft{
    margin-left:-300px;
  }
  .negMarginRight{
    margin-left:-100px;
  }
  .textArea h1{
    font-size: 30px;
  }
  .textArea p{
    font-size: 15px;
  }
  } */

  @media screen and (max-width: 1200px){
    .imageTextLeftSolutions{
      display:flex;
      flex-direction: column;
      align-items:center;
      justify-content: center;
    }
    .twoColumn{
      display:flex;
      flex-direction: column !important;
      justify-content: center;
      align-items: center;
      margin: 20px 50px 20px 50px !important;
    }
    .width50{
      width:100% !important;
    }
	  	
  }

  @media screen and (min-width: 1101px){
    .aboveImg{
      display:none;
    }
  }

  @media screen and (max-width: 1100px) {
    .aboutParagraphWrapper{
      display: flex;
      flex-direction: column;
      justify-content:center ;
      align-items: center;
      margin:0px;
    }

	  
    .textAlignLeft h1{
      text-align: center !important;
    }

    .belowImg{
      display: none;
    }
    .imageTextRight {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width:75%;
      margin: 25px 0px
    }
    .imageTextLeft {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      
      width:75%;
    }
    .negMarginLeft{
      margin-left:0px !important;
    }
    .negMarginRight{
      margin-right:0px;
      margin-left: 0px;
    }
    .imageTextRight img {
      height:500px;
      width:auto;
      margin-right:-400px;
    }
    .imageTextLeft img {
      height:500px;
      width:auto;
      margin-left:-400px;
    }
  }

  @media screen and (max-width: 1050px) {
	  .alternatingWrapperInstallation .wp-block-image img {
		width: 100% !important;
		height: 100% !important;
	}


  }
    
  @media screen and (max-width: 600px) {
	  .alternatingWrapperInstallation .wp-block-image img {
		width: 100% !important;
		height: 100% !important;
	}

    .imageTextRight img {
      height:275;
      width:auto;
      margin-right:-300px;
    }
    .imageTextLeft img {
      height:500px;
      width:auto;
      margin-left:-300px;
    }
	  	
  }
    
  @media screen and (max-width: 455px) {
	  
	  
    .imageTextLeftSolutions img{
      height: 200px;
      width: auto;
      margin-right:0px;
    }
  .imageTextRightSM img{
    width:35px !important;
    height:auto;
  }
    .imageTextRight img {
      height:300px;
      width:auto;
      margin-right:-500px;
    }
    .imageTextLeft img {
      height:300px;
      width:auto;
      margin-left:-500px;
    }
  }
/* #endregion */
/* #region  ----------------------------------------------------Image Text Right Small ---------------------------------------------------------- */
.imageTextRightSM {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: row;
  margin: 0px;

}

.imageTextRightSM img {
  width: 50px;
  height: auto;
  margin: 15px;
}

.twoColumn {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: flex-start;
  margin: 20px 200px 100px 200px;
  
}

/* #endregion */
/* #region  ----------------------------------------------------Glossary - FAQ ------------------------------------------------------------------- */


/* #endregion */
.glossaryTermMargin{
  margin: 100px 150px;
}



@media screen and (max-width:600px) {

  .glossaryTermMargin{
    margin: 50px 75px;
  }
}

@media screen and (max-width:400px) {

  .glossaryTermMargin{
    margin: 50px 20px;
  }
}