/* @import url('http://example.com/example_style.css'); */


/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/






.lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.lato-thin-italic {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.lato-light-italic {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.lato-black-italic {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: italic;
}


body {all:unset; color: #0C1222}

h1 {font-family: 'Lato'; font-size: 56px; color: white}
h2 {font-family:'Lato'; font-size: 46px;color: #0C1222}
h3 {font-family:'Lato'; font-size: 36px;color: #0C1222}
h4 {font-family:'Lato'; font-size: 26px;color: #0C1222}
h5 {font-family:'Lato'; font-size: 20px;color: #0C1222}
p {font-family: 'Lato'; font-size: 16px;color: #0C1222}
ul {font-family:'Lato'; font-size: 16px;color: #0C1222}
a:hover {cursor:pointer; font-family: 'Lato'}

.grey-bg {background: }
.page-center {max-width: 1140px; margin: 0 auto; padding: 20px}

/* NAV */
.nav {background: #C5C3C6}
.nav .logos {display: flex; }
.nav .logos img {width: 150px}
.nav .logos #company-logo {width: 120px; margin-right: 20px; padding-left: 100px; padding-right: 20px; border-right: 2px solid #0C1222 }

/* HERO */
.hero { width: 100%; display: table;  background:white;}
.bannerImage { background-size: cover; background-repeat: no-repeat; display: table-cell; position: relative; padding: 50px 0 0 0; background-color: ; width: 100vw; }
.bannerImage.quarter { height: calc(25vh - 50px); }
.bannerImage.third { height: calc(33.3vh - 50px); }
.bannerImage.half { height: calc(50vh - 50px); }
.bannerImage.twoThirds { height: calc(66.6vh - 50px); }
.bannerImage.full { height: calc(100vh - 50px); }
.bannerImage.blog { background-image:url('https://8046892.fs1.hubspotusercontent-na1.net/hubfs/8046892/DSC_3127+.jpg'); }
.bannerTextArea { position: relative; max-width: 630px; }
.bannerTextArea .header {margin-bottom: 0px; font-size:}
.bannerTextArea .subhead {font-family:'Lato';  padding-left: 20px; display: block }
.hero.blogHero { margin-bottom: 30px; }
.hero .sidebar { margin: 30px 0; padding: 20px; border-radius: 9px; background-color: rgba(0,0,0,.4); }
.hero .sidebar h2 { margin: 0; }
.styled-block {padding: 20px; background: ; border-left: 10px solid #EF7007; margin: 20px 0px; max-width: max-content}
.styled-block h3 {margin-top:0px}
/* .bannerImage .overlay { background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); position: absolute; top: 0; left: 0; right: 0; bottom: 0; } */
.cta-wrap {margin-top:35px}

.asset-art {margin: 0  auto; max-width: 500px}
/* button {padding: 10px 20px; color:white; font-family: 'Pluto-Web-Heavy'; background: black; border: none; text-transform: uppercase; margin: 5px 5px } */
.button:hover {cursor:pointer; background: #4C5C68}
.button {padding: 15px 25px; color:white; font-family: 'Lato'; background: #EF7007; border: none; border-radius: 7px;  margin: 5px 5px; text-decoration:none;  font-size: 13.33px }
.block {display:block}

/* end hero */

/* FORM */
.content-wrapper {position:relative}
.content-wrapper .copy {max-width: 600px}
.form-wrapper {border-radius: 8px;position:absolute; top:-200px; right: 0px; max-width: 350px; padding: 20px; }}
.form-wrapper h4 {text-align:center}
.form-wrapper {background: white;box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}
.form-wrapper form input[type="submit"] {width: max-content; margin: 0 auto;margin-top: 20px;padding: 15px 25px; color:white; font-family: 'Tahoma'; background: #EF7007; border: none; display:block; border-radius: 10px;     }
.form-wrapper form input[type="submit"]:hover {cursor:pointer;background: #4C5C68}
.form-wrapper form {font-family: 'Lato'}
.form-wrapper form ul {list-style:none; font-size: 11px; margin: 0px; padding: 0px}
.form-wrapper form p {font-size: 11px}
.form-wrapper form .hs-input[type="text"]:focus, .form-wrapper form .hs-input[type="tel"]:focus, .form-wrapper form .hs-input[type="textarea"], .form-wrapper form .hs-input[type="email"]:focus {border-left: 5px solid #4C5C68!important; outline:none}
.form-wrapper form .hs-input[type="text"], .form-wrapper form .hs-input[type="tel"], .form-wrapper form .hs-input[type="textarea"], .form-wrapper form .hs-input[type="email"]  {border-left: 5px solid #EF7007!important; width: 100%; border:none; background:#f3f3f3; height: 40px; padding: 5px 5px; margin: 10px 0px; box-sizing: border-box}
.form-wrapper form a {color: #EF7007!important; text-decoration:none}




/* Footer */
.footer {background: #4C5C68; font-family: 'Tahoma'}
.footer a {color: #EF7007!important; text-decoration:none}


@media (max-width: 567px) {
  .asset-art {max-width: 100%}
  .bannerTextArea .header {margin-bottom: 0px; font-size: 40px}
  .styled-block {padding: 20px; background: ; border-left: 10px solid rgba(238, 148, 56); margin: 20px 0px; display: flex; flex-direction:column}
}


@media (max-width: 679px) {
  .eBook {display:none}
}

@media (max-width: 1000px) {
  .content-wrapper .copy {max-width: 100%}
  .form-wrapper {position:relative; top:initial; right: initial; margin: 0 auto; max-width: 100%}
}