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

@font-face { font-family: 'Charter'; src: url('https://20785604.fs1.hubspotusercontent-na1.net/hubfs/20785604/charter_bold-webfont.eot') format('eot'), url('https://20785604.fs1.hubspotusercontent-na1.net/hubfs/20785604/charter_bold-webfont.woff') format('woff'), url('https://20785604.fs1.hubspotusercontent-na1.net/hubfs/20785604/charter_bold-webfont.ttf') format('truetype');}
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/





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

.black {background:black}
.brown {background:#A97C50}
body {font-family: 'Source Sans Pro', sans-serif; color;}
a {color:  }
.nav { background:black;width:100%;box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.05);}
.nav .page-center {display: flex; flex-direction:row;align-items:center}
.nav svg {width:200px}
.spacing {margin-top:50px!important; margin-bottom:50px!important}
h1 {font-size:3.5em; font-weight: 300; font-family:'Charter'; }
h2 {font-size:2em; font-weight: 600; font-family:'Charter'}
h3 {font-size:1.5em; font-weight: 500; font-family:'Charter'}
h4 {font-size:1.2em; font-weight: 500; font-family:'Charter';margin:5px}
ul {color:white}
p {font-family: 'Open Sans', sans-serif; }
ul li {font-weight:normal!important; }
.quote {margin-bottom:0px; margin-top:0px}
.quote svg {fill:rgb(255, 204, 51,0.7)}
.attribution {margin:5px; font-weight:300; font-family:'Open Sans', sans-serif; font-size:14px}
.microsoft-logo {width:300px;}
.lp-body img {position: absolute; top: initial; right:-50px}
.container-fluid .row-fluid .page-center { float: none; max-width: 1140px; margin: 0 auto;  padding: 20px; width: 100%; box-sizing: border-box; }
.green { background-attachment:fixed;background-image: url('https://3788941.fs1.hubspotusercontent-na1.net/hubfs/3788941/Untitled-3-2.png');background-size:cover;background-position: left;}
.hero-bg {position:relative;width:100%;padding: 190px 0px;background-size:cover;background-repeat:no-repeat;background-position: center left}
.hero-bg svg {position:absolute; width:600px;}
.hero-bg.fixed {background-attachment:fixed}
.hero-bg .logo-img {margin: 30px 30px}
.hero-bg h1 {max-width:50%;font-family:'Charter'};
.asset-art {margin: 0  auto; max-width: 500px}
.hero { width: 100%; display: table; }
.bannerImage { background-size: cover; background-repeat: no-repeat; display: table-cell; vertical-align:middle; 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 h1 {color: white; font-size: 45px;color:#faeeca}
.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; }
.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; }
.overlay {top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;position:absolute;z-index:0}
.overlay.black {background-color: rgba(0,0,0,.65); width:100%; height:100%}
.form-wrapper {align-items:center}
.page-center form {box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.05); background:black;border: 2px solid #faeeca;padding:50px;;position: absolute;width:400px;top: -180px; right: 0px;}
.page-center form input {width:98%; padding:10px 5px;border:1px solid white;margin:5px 0px 15px 0px;}
.page-center form  label {font-family:'Open Sans', sans-serif; color:#faeeca;}
.page-center form ul {list-style:none; margin:0;padding:0;color:#faeeca}
.page-center form ul input {width:10%;}
.page-center form ul p {font-weight:normal;color:#faeeca}
.page-center form a { color: white}
.page-center form input[type="submit"] {;background:#faeeca; color:black; font-weight:bold;border:3px solid #faeeca;padding:10px;-webkit-border-radius:0px;-webkit-appearance: none}
.page-center form input[type="checkbox"] {color: black}
.page-center form input[type="submit"]:hover {cursor:pointer;background:black;color:#faeeca}
.page-center form h3 {margin:0 0 20px 0; text-align:center;color:#faeeca}
.page-center form textarea {width:100%; border: 1px solid white}

.footer {background: #161414}
.footer .legal {display: flex; flex-direction: column}
.footer h4 {color: #faeeca}
.footer .footer-wrap {display: flex; flex-direction: row; justify-content: space-around}
.footer .follow svg {width:30px;}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 0;}
form {  -webkit-appearance: none;}
input:{-webkit-appearance: none;}
.cta:after{ content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(1);
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: #faeeca;
  transform-origin: bottom right;
  transition: all 0.25s ease-out;}
.cta:hover:after { transform: scaleX(0);
  transform-origin: bottom left;}
.cta:hover {color: #b6bbc2;border: 0.5px solid #FFCC33}
.cta {background:transparent;font-family:'Open Sans',sans-serif; color:#FFCC33;border-radius:0px;padding:10px; text-decoration:none; transition: all .4s ease;position:relative;margin: 25px 0px}

.cta-wrap {margin: 30px 0px 15px 0px!important}

.article {display:flex;width:50%;margin:auto;background:#A97C50;padding:20px;margin-top:40px; margin-bottom:40px}
.article-box {margin: 20px 0px;display:flex; flex-direction:row;}
.article-box h3 {margin-top:0px}
.article-box .left {}
.article-box .right {padding: 0px 20px;}
  

@media (max-device-width: 1250px) {
  .page-center form {box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.05); padding:50px;position: absolute;width:300px;top: -300px; right: 25px;}

}

@media (max-device-width: 900px){
  .page-center form {box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.05); padding:50px;position: relative;width:auto;top:initial; right: initial;}
  .article {background:none;width:auto;}
.article-box {;display:flex; flex-direction:column;}
  .article-box .right {padding: 0px 20px; width:auto; text-align:center}
  .article-box img {margin:auto; margin-bottom:20px}
}

@media (max-device-width: 1200px) {.page-center form {margin:0 0 0 0}}
@media (min-device-width: 770px) and (max-device-width: 899px){
.page-center form input[type="submit"] {width:100%;font-weight:bold;border:none;padding:10px}
.microsoft {width:400px;position:absolute; right:100px;top:30px }
}
@media (max-device-width: 769px) {
 .hero-bg h1 {font-size:2.3em; font-weight: 600; color:white; max-width:95%;}
  .page-center form input[type="submit"] {width:50%;font-weight:bold;border:none;padding:10px}
.microsoft {width:300px;position:relative; right:initial;top:initial }
  .hero-bg {position:relative;width:100%;padding: 80px 0px; ;background-size:cover;background-repeat:no-repeat;}
  .ebook {display:none}
  h2 {font-size:1.5em}
}


@media (max-device-width: 500px){
   .article {background:none;width:auto;padding:0px; margin-top:0px; margin-bottom:0px}
  .page-center form {margin: 40px 0 0 0;}
 .large-white {font-size:2.5em; font-weight: 600; color:white; max-width:100%}
  .page-center form input[type="submit"] { width:100%;font-weight:bold;border:none;padding:10px}
.asset-art { max-width: 100%}
input, select { font-size: 100%; }
  .hero-bg {position:relative;width:100%;padding: 180px 0px;background-size:cover;background-repeat:no-repeat;background-position: center}
.green { background-attachment:fixed;background-image:none;background-size:cover;background-position:left;}
   .nav-logo-left {width:150px}
.nav-logo-right {width:200px; float:right;margin-top:-10px;margin-left:20px}
    .footer .footer-wrap {display: flex; flex-direction: column; justify-content: space-around}
}