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

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

/***********************************************/
/* Other Rules
 * 1. Don't you dare use important! unless it is so absolutely necessary
 * 2. Sort CSS properties alphabetically, its a minor performance improvement
 * but also just makes it easier to find things as the file gets bigger
 * 3. Leave comments telling yourself why you've added something
 * this will help us all later.
 * 4. Use tabs NOT spaces
 * 
 * With great power, comes great responsibility. Use it wisely.
 * */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
/**
 * Mobile navigation styles 
 * 
 * */

/* 
 * This is for the Register button in the header. 
 * */
.header a.header__button,
.header a.header__button:before {
  background-color: #101029;
  background-image:none;
  color:white;
  min-width: auto;
  min-height: 2.6em;
  padding: .5em .95em;
}

.header a.header__button:hover,
.header a.header__button:hover::before {
  background-image: linear-gradient(90deg, rgb(81, 9, 127), rgb(143, 66, 152));
  color:white;
}

.header__menu-toggle svg {
  fill: #101029;
}

/*
 * Adds the gradient bar on hover
 * */
a.header__menu-link:hover:after,
a.header__menu-link--active-link:after {
    content: '';
    top: -24px;
    display: block;
    width: 100%;
    height: 6px;
    position: relative;
    background-image: -webkit-gradient(linear, left top, right top, from(#e61c55), to(#fbb31b));
    background-image: linear-gradient(90deg, #e61c55, #fbb31b);
}

.header__container {
  height: 106px;
}

/*
 * QID logo on left side of header
 * */
.header__logo img {
  height: unset;
  max-height: 51px;
  max-width: unset;
  width: auto;
}

/*
 * This is the button with the gradient outline/white background
 * We still need to confirm if all of these styles are necessary
 * */
a.button.primary, a.header__button, a.fn__button__one {
  align-items: center;
  appearance: none;
  background-attachment: scroll;
  background-clip: border-box;
  background-color: rgba(0, 0, 0, 0);
  background-image: linear-gradient(90deg, rgb(81, 9, 127), rgb(143, 66, 152));
  background-origin: padding-box;
  background-position-x: 0px;
  background-position-y: 0px;
  background-repeat: repeat;
  background-size: auto;
  border-bottom-color: rgb(16, 16, 41);
  border-bottom-left-radius: 22.5px;
  border-bottom-right-radius: 22.5px;
  border-bottom-style: none;
  border-bottom-width: 0px;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-image-slice: 100%;
  border-image-source: none;
  border-image-width: 1;
  border-left-color: rgb(16, 16, 41);
  border-left-style: none;
  border-left-width: 0px;
  border-right-color: rgb(16, 16, 41);
  border-right-style: none;
  border-right-width: 0px;
  border-top-color: rgb(16, 16, 41);
  border-top-left-radius: 22.5px;
  border-top-right-radius: 22.5px;
  border-top-style: none;
  border-top-width: 0px;
  box-sizing: border-box;
  color: rgb(16, 16, 41);
  cursor: pointer;
  display flex;
  fill: #fff;
  font-family: proxima-nova, sans-serif;
  font-size: 18px;
  font-weight: 700;
  height: 46.7969px;
  justify-content: center;
  letter-spacing: normal;
  line-height: normal;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  min-height: 46.8px;
  min-width: 126.9px;
  padding-block-end: 9px;
  padding-block-start: 9px;
  padding-bottom: 9px;
  padding-inline-end: 32.85px;
  padding-inline-start: 32.85px;
  padding-left: 32.85px;
  padding-right: 32.85px;
  padding-top: 9px;
  position: relative;
  transition: none !important;
  text-align: center;
  text-decoration-color: rgb(16, 16, 41);
  text-wrap: nowrap;
  word-spacing: 0px;
}


a.button.primary:before, a.header__button:before, a.fn__button__one:before {
  background-color: white;
  border-radius: inherit;
  box-sizing: border-box;
  content: "";
  cursor: pointer;
  display: block;
  font-family: proxima-nova, sans-serif;
  font-size: 18px;
  font-weight: 700;
  height: calc(100% - 4px);
  left: 2px;
  top: 2px;
  width: calc(100% - 4px);
  word-spacing: 0px;
  
  /* override theme styles which conflict */
  clip-path: unset;
  transition: none;
  
}

a.button.primary:hover, a.header__button:hover, a.fn__button__one:hover {
  color: white;
  transition: none;
}

a.button.primary:hover::before, a.header__button:hover::before,  a.fn__button__one:hover::before {
  color: transparent;
  background-color: transparent;
}

/**
 * This is the Navy Blue button
 * We still need to confirm if all of these styles are necessary
 * */
a.button.button--secondary {
  align-items: center;
  appearance: none;
  background-attachment: scroll;
  background-clip: border-box;
  background-color: #101029;
  background-image: none; /* This is necessary because of an instance on the homepage where fn__button__one & button--secondary are used together and fn__button__one sets a background image */
  background-origin: padding-box;
  background-position-x: 0px;
  background-position-y: 0px;
  background-repeat: repeat;
  background-size: auto;
  border-bottom-color: rgb(16, 16, 41);
  border-bottom-left-radius: 22.5px;
  border-bottom-right-radius: 22.5px;
  border-bottom-style: none;
  border-bottom-width: 2px;
  border-image-outset: 0;
  border-image-repeat: stretch;
  border-image-slice: 100%;
  border-image-source: none;
  border-image-width: 1;
  border-left-color: rgb(16, 16, 41);
  border-left-style: none;
  border-left-width: 2px;
  border-right-color: rgb(16, 16, 41);
  border-right-style: none;
  border-right-width: 2px;
  border-top-color: rgb(16, 16, 41);
  border-top-left-radius: 22.5px;
  border-top-right-radius: 22.5px;
  border-top-style: none;
  border-top-width: 2px;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  display flex;
  fill: #fff;
  font-family: proxima-nova, sans-serif;
  font-size: 18px;
  font-weight: 700;
  height: 46.7969px;
  justify-content: center;
  letter-spacing: normal;
  line-height: normal;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  min-height: 46.8px;
  min-width: 126.9px;
  padding-block-end: 9px;
  padding-block-start: 9px;
  padding-bottom: 9px;
  padding-inline-end: 32.85px;
  padding-inline-start: 32.85px;
  padding-left: 32.85px;
  padding-right: 32.85px;
  padding-top: 9px;
  position: relative;
  transition: none !important;
  text-align: center;
  text-decoration-color: rgb(16, 16, 41);
  text-wrap: nowrap;
  word-spacing: 0px;
}

a.button.button--secondary:before {
  background-color: #101029;
  border-radius: inherit;
  box-sizing: border-box;
  content: "";
  cursor: pointer;
  display: block;
  font-family: proxima-nova, sans-serif;
  font-size: 18px;
  font-weight: 700;
  height: calc(100% - 4px);
  left: 2px;
  top: 2px;
  width: calc(100% - 4px);
  word-spacing: 0px;
  
  /* override theme styles which conflict */
  clip-path: unset;
  transition: none;
  
}

a.button.button--secondary:hover, #hs_cos_wrapper_header-module-1 a.button.button--secondary:hover {
  background-image: linear-gradient(90deg, rgb(81, 9, 127), rgb(143, 66, 152));
  border-color: unset;
  color: white;
  transition: none;
}

a.button.button--secondary:hover::before {
  background-color: transparent;
  color: transparent;
}

/**
 * This styling is used to remove the outline from the homepage tables
 * Should rename from test, it works
 */
.test {
  box-shadow: none;
  margin-bottom: 0;
  margin-left: 40px;
  margin-right: 40px;
  width: auto;
  td {
    border: none;
    display: flex;
    justify-content: flex-start;
    padding: 0 8px;
  }
  
  tr {
    display: flex;
    flex-direction: row;
  }
  
  p {
    margin-block: auto;
  }
}

.row-fluid {
  display: flex;
}

/**
 * This is the very gross way I zero'd in on the h2 tags in the purple row 
 * of the homepage so that the h2 text would be white instead of black 
 **/
div.row-fluid-wrapper.row-depth-1.row-number-3 h2 {
  color: #FFF;
}

/*
 * This is styling added to style the info boxes with rounded edges, padding and a shadow
 * These styles came from the Wordpress Website
 * */
.widget-span .widget-type-cell .dnd-column {
  border-radius: 24px;
  box-shadow: 0 0 40px rgba(16, 16, 41, .2);
  padding: 1rem;
}

.oembed_custom-thumbnail {
  transition: none;
}

.oembed_custom-thumbnail:before {
  background-color: initial;
  transition: none;
}

h1.h1_hero, .hero__promo_content h1 {
  font-weight: 600;
}

h3 {
  font-weight: 600;
}

.contact-us svg {
  fill: #eb1e58;
}

li::marker {
  color: inherit; /* takes on the color of the li text */
  font-size: inherit;
}

/*
 * Sets the footer link text to white
 * */
#hs_cos_wrapper_footer-module-7 li.hs-menu-item a {
  color: white;
  &:hover {
    text-decoration: underline;
    transition: none;
  }
}

.footer a {
  transition: none;
  font-family: "Proxima Nova";
  font-weight: normal;
}

/* 
 * Test for footer button styling 
 * */

.footer a.fn__button__one, .footer a.fn__button__one:hover {
  font-weight: 700;
  text-decoration: none;
}

/* 
 * This is for the Register button in the footer 
 * */
.footer a.button.button,
.footer a.button.button:before {
  background-color: #101029;
  color: white;
  font-size: 20px;
}

.footer a.button.button:hover,
.footer a.button.button:hover::before {
  background-color: transparent;
  background-image: linear-gradient(90deg, rgb(81, 9, 127), rgb(143, 66, 152));
}

/* 
 * This is for the Sign in button in the footer. 
 * */
.footer a.button.button--secondary,
.footer a.button.button--secondary:before {
  background-color: white;
  color: #101029;
  font-size: 20px;
}

.footer a.button.button--secondary:hover,
.footer a.button.button--secondary:hover::before {
  background-color: #101029;
  background-image: none;
  color: white;
  border: none;
}


.footer a:hover {
  color: white;
  font-family: "Proxima Nova";
  font-weight: normal;
  text-decoration: underline;
}

.footer .social-follow {
  background: unset;
  margin-left: unset;
}

.header__menu-link--active-link {
  text-decoration: underline !important;
}

.header__search-col {
  display: none;
}

#hs_cos_wrapper_dnd_area-module-23 .blog-listing__post-content {
    padding: 32px;
}

.span4 .headline__h h2 {
  color: #FFF;
}

/* Media Query hell */
@media (max-width: 768px) {
  .row-fluid {
    width: 100%;
    flex-direction: column;
  }
  
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
    display: flex;
    
    .hs-menu-item {
      display: flex;
    }
  }

}