/*




Authors: 
Cloud Computing Consultants - Blaine Swaney
Cloud Computing Consultants - Preston Muonio

Comments:
This file is organized into sections that map to the corresponding sections on the page, this is detailed in the table of contents. 
Mobile responsiveness is handled with media querys that are at the bottom of each section.
If you need to modify the way a particular element is responding, it will most likely be found in that sections media-query.
If you do not find a style rule in the relevant section then most likely it is in the GLOBAL STYLES section
Most of the colors are provided in the variable section.

Note:
If this file has the extension ".css" there is a corresponding file, with the extension ".scss" that generated this one.
*/
/*
>>>> TABLE OF CONTENTS >>>>
|| IMPORT
|| GLOBAL VARIABLES
|| GLOBAL STYLES
|| MAIN STYLES
|| HEADING STYLES
|| HERO IMAGE STYLES
|| HERO IMAGE TEXT STYLES
|| FEATURE SECTION STYLES
|| TESTIMONIAL SECTION STYLES
|| ABOUT SECTION STYLES
|| CALL TO ACTION SECTION STYLES
|| FOOTER STYLES
|| pop-up STYLES
*/
/*
|| IMPORT
*/
@font-face {
  font-family: "proximanova-regular", sans-serif;
  font-style: normal;
  font-weight: 400;
  src: url("//cdn2.hubspot.net/hubfs/4289644/Attigo/Fonts/proximanova-regular-webfont.woff") format("woff");
}
/*
|| GLOBAL VARIABLES
*/
/*
|| GLOBAL STYLES
*/
* {
  margin: 0;
  padding: 0;
  font-family: "Proxima Nova", sans-serif;
  font-weight: 400;
  box-sizing: border-box;
  text-decoration: none;
  color: #444444;
}

body {
  background-color: #e6e6e6;
}

header {
  background-color: white;
}

h1 {
  color: #01506f;
}

h2 {
  text-align: center;
  font-size: 1.6rem;
  color: #01506f;
  line-height: 130%;
}

h3 {
  text-align: left;
  font-size: 1.3rem;
  font-weight: 600;
  color: #01506f;
}

h4 {
  font-size: 1rem;
  margin-top: 10px;
  line-height: 150%;
}

p {
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 150%;
}

.button {
  background-color: #f7941d;
  color: #343434;
  padding: 12px 45px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
}
.button:hover {
  background-color: #f0aa55;
}

.icon {
  display: flex;
  flex: 1;
  align-items: center;
  flex-direction: column;
  margin: 10px;
  margin-bottom: 30px;
}
.icon img {
  width: 50px;
}
.icon p {
  text-align: center;
  width: 175px;
}

@media only screen and (max-width: 1000px) {
  .button {
    padding: 12px 35px;
    font-size: 0.9rem;
  }
}
@media only screen and (max-width: 600px) {
  h2 {
    font-size: 1.2rem;
  }
}
/*
|| MAIN STYLES
*/
.content-container {
  position: relative;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  background-color: white;
}

/*
|| HEADING STYLES
*/
.content-container__logo {
  display: block;
  color: #01506f;
  font-size: 1.8rem;
  padding: 30px 100px;
  font-weight: 400;
}
.content-container__logo sup {
  font-size: 1rem;
  color: #01506f;
}

/*
|| HERO IMAGE STYLES
*/
.mobile-hero-img {
  display: none;
}

.hero-img {
  width: 100%;
  height: auto;
  display: flex;
}

@media only screen and (max-width: 600px) {
  .content-container__logo {
    font-size: 1.5rem;
    padding: 20px 0px;
    text-align: center;
  }
  .mobile-hero-img {
    display: flex;
    width: 100%;
    height: auto;
  }
  .hero-img {
    display: none;
  }
}
/*
|| HERO IMAGE TEXT STYLES
*/
.hero-img-text {
  background-color: #01506f;
  position: absolute;
  padding: 25px;
  max-width: 280px;
  top: clamp(-45px, 18.3333333333vw, 225px);
  right: clamp(5px, 10%, 200px);
}
.hero-img-text h2 {
  color: white;
  text-align: left;
}
@media only screen and (max-width: 840px) {
  .hero-img-text {
    position: static;
    display: flex;
    justify-content: center;
    max-width: none;
  }
  .hero-img-text h2 {
    font-size: 1.3rem;
  }
}

/*
|| HERO TEXT STYLES
*/
.hero-text {
  display: flex;
  background-color: #fbfbfb;
  padding: 12%;
  padding-top: 40px;
  padding-bottom: 40px;
}
.hero-text .hero-text-left {
  flex: 1.3;
  margin-right: 40px;
}
.hero-text .hero-text-left h2 {
  text-align: left;
  font-weight: 540;
}
.hero-text .hero-text-right {
  display: flex;
  flex: 0.7;
  align-items: center;
}
.hero-text .hero-text-right h4 {
  width: 240px;
  margin: 0px;
}
.hero-text .hero-text-right .vertical-bar {
  background-color: #f7941d;
  margin-right: 15px;
  height: 90%;
  width: 4px;
}

@media only screen and (max-width: 1025px) {
  .hero-text {
    display: block;
    margin: 0px;
  }
  .hero-text .hero-text-left {
    margin: 0px;
    margin-bottom: 40px;
  }
  .hero-text .hero-text-left h2 {
    font-size: 1.3rem;
    font-weight: 500;
    text-align: left;
  }
  .hero-text .hero-text-right {
    margin: 0px;
    font-weight: 500;
  }
  .hero-text .hero-text-right h4 {
    text-align: left;
    width: -moz-fit-content;
    width: fit-content;
  }
  .hero-text .hero-text-right .vertical-bar {
    display: none;
  }
}
/*
|| FEATURE SECTION STYLES
*/
.feature-section {
  display: flex;
  align-items: center;
  padding: 18%;
  padding-top: 40px;
  padding-bottom: 40px;
}
.feature-section .login-card {
  flex: 1.5;
}
.feature-section .login-card h4 {
  margin: 25px;
  margin-left: 0;
}
.feature-section .login-card .button {
  margin-top: 20px;
}
.feature-section .infographic {
  display: flex;
  flex-direction: column;
}
.feature-section .infographic .row-1 {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.feature-section .infographic .row-2 {
  display: flex;
  flex-direction: row;
  align-content: center;
}

@media only screen and (max-width: 1000px) {
  .feature-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0px;
  }
  .feature-section .login-card {
    flex: 1.5;
  }
  .feature-section .login-card h4 {
    margin-top: 25px;
  }
  .feature-section .login-card .login-button {
    display: flex;
    justify-content: center;
  }
  .feature-section .login-card .login-button .button {
    margin-top: 20px;
  }
  .feature-section .infographic {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
  }
  .feature-section .infographic .icon img {
    width: 40px;
  }
  .feature-section .infographic .icon p {
    max-width: 140px;
  }
  .feature-section .infographic .row-1 {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .feature-section .infographic .row-2 {
    display: flex;
    flex-direction: row;
    align-content: center;
  }
}
/*
|| TESTIMONIAL SECTION STYLES
*/
.testimonial-section {
  display: flex;
}
.testimonial-section .tax-info {
  background-color: #eeeeee;
  display: flex;
  flex: 1;
  padding: 50px;
  padding-left: 70px;
  align-items: center;
}
.testimonial-section .tax-info h4 {
  margin: 0px;
}
.testimonial-section .tax-info .vertical-bar {
  background-color: #f7941d;
  margin-right: 15px;
  height: 50%;
  width: 10px;
}
.testimonial-section .testimonial-container {
  background-color: #fbfbfb;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px;
}
.testimonial-section .testimonial-container .testimonial {
  color: #01506f;
  text-align: center;
}
.testimonial-section .testimonial-container .author {
  margin-top: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

@media only screen and (max-width: 1000px) {
  .testimonial-section {
    margin: 0px;
    display: block;
  }
  .testimonial-section .tax-info h4 {
    margin: 0px;
  }
  .testimonial-section .tax-info .vertical-bar {
    height: auto;
  }
  .testimonial-section .testimonial-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .testimonial-section .testimonial-container .author {
    margin-top: 20px;
  }
}
/*
|| ABOUT SECTION STYLES
*/
.about-section {
  display: flex;
  padding: 18%;
  padding-top: 40px;
  padding-bottom: 40px;
}
.about-section .northstar-logo {
  display: flex;
  align-items: center;
  margin: 30px;
}
.about-section .northstar-logo img {
  width: 200px;
}
.about-section .about-text {
  flex: 1;
  margin-top: 20px;
}

@media only screen and (max-width: 1000px) {
  .about-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }
  .about-section .about-text {
    margin: 0px;
    font-weight: 500;
  }
}
/*
|| CALL TO ACTION SECTION STYLES
*/
.call-to-action-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #efe7dc;
}
.call-to-action-container h2 {
  width: 70%;
  margin: 40px 80px;
  font-size: 1.6rem;
  font-weight: 475;
  text-align: center;
  color: #444444;
}
.call-to-action-container .button {
  margin: 40px 80px;
  margin-top: 0px;
}

@media only screen and (max-width: 1000px) {
  .call-to-action-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin: 0px;
    padding: 10px;
  }
  .call-to-action-container h2 {
    font-size: 1.2rem;
    width: -moz-fit-content;
    width: fit-content;
  }
}
/*
|| FOOTER STYLES
*/
footer {
  background-color: #01506f;
  padding-top: 1px;
}
footer p {
  color: white;
  margin: 40px auto;
  width: -moz-fit-content;
  width: fit-content;
  display: block;
}
footer p a {
  font-weight: 600;
}
footer a {
  color: white;
}
footer div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #686868;
  height: 50px;
}
footer div a {
  font-size: 0.8rem;
}
footer div .footer__element {
  margin: 0 80px;
}

@media only screen and (max-width: 1000px) {
  footer div a {
    font-size: 0.7rem;
  }
  footer div .footer__element {
    margin: 0 40px;
  }
}
@media only screen and (max-width: 1000px) {
  footer p {
    margin: 30px auto;
    font-size: 0.8rem;
  }
  footer div {
    height: 50px;
  }
  footer div a {
    font-size: 0.5rem;
  }
  footer div .footer__element {
    margin: 0 10px;
  }
}
/*
|| pop-up STYLES
*/
.pop-up {
  display: none;
  align-items: center;
  justify-content: space-evenly;
  font-size: 1.5rem;
  position: fixed;
  padding: 10px;
  z-index: 1;
  height: 200px;
  width: 900px;
  background-color: #efe7dc;
  left: calc(50vw - 900px / 2);
  top: 10vh;
}
.pop-up p {
  font-weight: 600;
}
.pop-up div {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.pop-up__cancel {
  background-color: #efe7dc;
  border: 0.5px #b3b3b3 solid;
}
@media only screen and (max-width: 900px) {
  .pop-up {
    width: 600px;
    left: calc(50vw - 600px / 2);
    font-size: 1rem;
  }
}
@media only screen and (max-width: 600px) {
  .pop-up {
    width: 300px;
    left: calc(50vw - 300px / 2);
    font-size: 1rem;
    flex-direction: column;
    padding-top: 20px;
  }
}/*# sourceMappingURL=style.css.map */