/* Imports, primarily the icons for the connect module, and the main site fonts. */
@import url('//fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
@font-face {
  font-family: 'IcoMoon';
  src: url('//cdn2.hubspot.net/hubfs/2973842/Bing%20Bang%20April%202017/Fonts/icomoon.eot');
  src: url('//cdn2.hubspot.net/hubfs/2973842/Bing%20Bang%20April%202017/Fonts/icomoon.woff') format('woff'),
       url('//cdn2.hubspot.net/hubfs/2973842/Bing%20Bang%20April%202017/Fonts/icomoon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  /* Font seems "wrong" on Safari. The following lines are my attempt to fix this. */
  speak: none;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

/* Whole Site Properties */
h1, h2, h3, h4, h5, h6 {
    color: #fff;
    font-family: 'Lato', sans-serif;
}

body {
    color: #aaa9a9;
    font-family: 'Lato' sans-serif;
    font-weight: 300;
    letter-spacing: 0px;
    background-color: #25292b;
    font-size: 15px;
    line-height: 2;
    min-height: 100%;
}

a { 
    color: #fff;
    o-transition: 0.2s;
    -ms-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

a:hover, a:focus {
    color: #aaaaaa;
}

/* Header Properties */
/* Whole header */
.manual-header {
    background-color: rgba(0,0,0,0.85);
    position: fixed;
    left: 0;
    top: 0;
    width: 100% !important;
    z-index: 100;
    justify-content: center;
    align-content: center;
}

/* Logo on the header */
.header-logo img{
    float: left; 
    max-height: 35px;
    max-width: 250px;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 30px;
}

/* Menu portion of the header */
/* Whole menu */
.header-menu {
    float: right;
    padding-right: 30px;
    text-transform: uppercase;
    line-height: 45px;
    font-family: Lato, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
    margin: auto;
    -webkit-font-smoothing: subpixel-antialiased;
    -o-transition: 0.2s;
    -ms-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    transition: 0.2s; 
}

/* Remove the bullets and float the menu right. */
.header-menu ul {
    list-style-type: none;
    float: right;
}

/* Each child item of the menu */
.header-menu ul > li {
    float: left;
    position:relative;
    text-align: center;
    padding-right: 21px;
    padding-left: 21px;
}

/* Hyper Text of each menu item */
.header-menu ul > li a {
    color: #ffffff;
    text-decoration: none;
    line-height: 70px;
}

/* This is how we add the underline effect on hover */
.header-menu ul > li > a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 30%;
    left: 0;
    background-color: #fff;
    color: #fff;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;    
}

/* This sets the color of the hovered hyperlinks. */
.header-menu ul > li > a:hover {
    border-color: #9a9a9a;
    color: #9a9a9a;
}

/* This is where we set the width of the underline effect on hover*/
.header-menu ul > li > a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(0.8);
    transform: scaleX(0.8);
}










/* ==========================================================================
   Custom Menu Primary
   ========================================================================== */


 /* Set ul background color */
 /* Set li background Color */
 /* Set link Color */
 /* Set link Hover Color */

/* Parent List */
.custom-menu-primary .hs-menu-wrapper > ul{ 
  background:;
}
.custom-menu-primary .hs-menu-wrapper > ul > li{
  background:;
}
.custom-menu-primary .hs-menu-wrapper > ul > li > a{
  color:;
}
.custom-menu-primary .hs-menu-wrapper > ul > li > a:hover{
  color:;
}

/* Child List */
.custom-menu-primary .hs-menu-wrapper > ul ul{}
.custom-menu-primary .hs-menu-wrapper > ul ul li{
  background:;
}
.custom-menu-primary .hs-menu-wrapper > ul ul li a{
  color:;
}
.custom-menu-primary .hs-menu-wrapper > ul ul li a:hover{
  color:;
}

/* Override max width on menu links */
.custom-menu-primary .hs-menu-wrapper > ul li a, 
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
  overflow: visible !important;
  max-width: none !important;
  width: auto !important;
}

/* Fix menu disappearing on desktop after toggling mobile menu */
@media screen and (min-width:1301px) {
      .custom-menu-primary .hs-menu-wrapper { 
          display:block !important;
      }
  }




/* ==========================================================================
   Mobile Menu - Hubspot Standard Toggle Menu
   ========================================================================== */


/**
 * Special Note
 *
 * When the menu is open, a class of .mobile-open is applied to the body. You can 
 * use this for custom styling on any element when the menu is in the open position.                     
 */

.mobile-trigger, .child-trigger{
    display: none; /* Hide button on Desktop */
}


/* Fix menu disappearing on desktop after toggling mobile menu */
@media screen and (min-width:1301px) {
      .custom-menu-primary .hs-menu-wrapper { 
          display:block !important;
      }
  }




/* ==========================================================================
   Mobile Menu - Hubspot Standard Toggle Menu
   ========================================================================== */


/**
 * Special Note
 *
 * When the menu is open, a class of .mobile-open is applied to the body. You can 
 * use this for custom styling on any element when the menu is in the open position.                     
 */

.mobile-trigger, .child-trigger{
    display: none; /* Hide button on Desktop */
}

@media (max-width: 1300px){


  /* Variables
     ========================================================================== */

     /* Set Mobile Menu Background Color */
        /* Set Link Color */
   /* Set Link Hover Color */

  /* 
    * Menu Reset
    *
    * Remove styling from desktop version of custom-menu-primary. Place any 
    * additional CSS you want removed from the mobile menu in this reset 
    */

  .custom-menu-primary,
  .custom-menu-primary .hs-menu-wrapper > ul,
  .custom-menu-primary .hs-menu-wrapper > ul li,
  .custom-menu-primary .hs-menu-wrapper > ul li a{
    display: block;
    float: none;
    position: static;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    padding: 0px;
    margin: 0px;
    background-image: none;
    background-color: transparent;
    border: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow:    none;
    box-shadow:         none; 
    max-width: none;
    width: 100%; 
    height: auto;
    line-height: 1;  
    font-weight: normal;
    text-decoration: none;
    text-indent: 0px;
    text-align: left;
    color:#999999;
  }


  /* Toggle Button
     ========================================================================== */

  .mobile-trigger{
    display: inline-block !important; /* Show button on mobile */
    cursor: pointer; /* Mouse pointer type on hover */
    position: absolute; /*******************************************/
    top: 0px;          /* Position Button at right of screen  */
    right: 10px;        /*******************************************/
    width: auto; /* Button width */
    height: auto; /* Button height */      
    padding: 7px 10px 8px 10px;
    background: #000000; /* Background color */
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    text-transform: uppercase;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #ffffff; 
    line-height: 35px;
  }
  .mobile-trigger:hover{
    text-decoration: none; /* Removes link text underline on button */
    color:#ffffff;
    background-color: black; 
    border-color: transparent;
  }

  /* Change button when menu is open */
  .mobile-open .mobile-trigger{
    color:#ffffff;
    background-color: black; 
    border-color: transparent;
  }


  /* Toggle Button Icon
     ========================================================================== */

  .mobile-trigger i{
    display: inline;
    position: relative;
    top: -4px;
  }
  .mobile-trigger i:before, .mobile-trigger i:after{
    position: absolute;
    content: '';
  }
  .mobile-trigger i, .mobile-trigger i:before, .mobile-trigger i:after{
    width: 22px; /* Icon line width */
    height: 2px; /* Icon line height */
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    background-color: #999999; /* Icon color */
    display: inline-block;
  }
  .mobile-trigger i:before{
    top: -6px; /* Position top line */
  }
  .mobile-trigger i:after{
    top: 6px; /* Position bottom line */
  }
  
  .mobile-trigger:hover i, .mobile-trigger:hover i:before, .mobile-trigger:hover i:after,  
  .mobile-open .mobile-trigger i, .mobile-open .mobile-trigger i:before, .mobile-open .mobile-trigger i:after{
      background-color: #ffffff; /* Icon color */
  }


  /* Child Toggle Button
     ========================================================================== */

  .child-trigger{
    display: block !important; /* Hide button on Desktop */
    cursor: pointer; /* Mouse pointer type on hover */
    position: absolute;
    top: 0px;
    right: 0px;
    width: 55px !important; /* Button width */
    min-width: 55px !important;
    height: 45px !important; /* Button height */  
    padding: 0 !important;
    border-left: 1px dotted rgba(255, 255, 255, .20);
  }
  .child-trigger:hover{
    text-decoration: none;
  }
  .child-trigger i{
    position: relative;
    top: 50%; /* Centers icon inside button */
    margin: 0 auto !important;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .child-trigger i:after{
    position: absolute;
    content: '';
  }
  .child-trigger i, .child-trigger i:after{
    width: 10px; /* Icon line width */
    height: 1px; /* Icon line height */
    background-color:#999999; /* Icon color */
    display: block;

  }
  .child-trigger i:after{
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  .child-trigger.child-open i:after{
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }
  .child-trigger.child-open i{
  }

    
  /* Menu Styles on Mobile Devices
     ========================================================================== */  
     
   .custom-menu-primary.js-enabled{
       position: relative;
       margin: 10px 0 10px 0;
   }

  /* Hide menu on mobile */
  .custom-menu-primary.js-enabled .hs-menu-wrapper,
  .custom-menu-primary.js-enabled .hs-menu-children-wrapper{
    display: none;
  }  

  /* Make child lists appear below parent items */
  .custom-menu-primary ul.hs-menu-children-wrapper{
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    display: none;
  }

  /* Mobile Menu Styles */ 
  .custom-menu-primary.js-enabled .hs-menu-wrapper{
    position: absolute; /**************************************************************/
    top: 60px;             /* Positions the menu to drop from the very top of the screen */
    left: 0;          /**************************************************************/
    padding: 0;
    width:100% !important;
  }
  .custom-menu-primary .hs-menu-wrapper{
    background-color:black; /* Menu background color set off global menuColorMobile variable */
    width: 100% !important; /* Full screen width */
  }

   /* Level 1 Menu List Styles */
  .custom-menu-primary .hs-menu-wrapper > ul > li{
    position: relative;
  }
  .custom-menu-primary .hs-menu-wrapper > ul > li a{
    font-size: 22px; /* Font size of top level list items */
    line-height: 45px;
    overflow: visible;
  }

  /* Level 1 and Higher Menu List Styles */
  .custom-menu-primary .hs-menu-wrapper > ul li{
    border-top: 1px dotted rgba(255, 255, 255, .35); /* Adds transparent dark highlights to top of top level list items */
  }
  .custom-menu-primary .hs-menu-wrapper >  ul li a{
    padding: 0 10px;
    color:#999999; /* link color set by global mobile-aColor variable */
  }
  .custom-menu-primary .hs-menu-wrapper > ul li a:hover{
    color:#ffffff; /* link hover color set by global mobile-aColorHover variable */
  }
  
}

/* Footer Section */
/* Top Footer */
.top-footer{
    width: 100%;
    background-color: #1e2123;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
}

/* Sets the font for the address and phone sections */
.top-footer p{
    color: #999999;
    font-size: 15px;
}

/* Connect Module, with special font for the icons. */
.footer-connect .footer-connect-icon {
    margin-top: 0px;
    margin-right: 3.5px;
    margin-bottom: 10px;
    margin-left: 0px;
    border: 1px solid #bebdbd;
    padding: 6px;
    text-decoration: none;
    font-size: 14px;
    min-width: 28px;
    min-height: 28px;
    color: #bebdbd;
    font-family: 'IcoMoon';
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The icon darkens on hover */
.footer-connect .footer-connect-icon:hover {
    opacity:0.8;
}

/*This sets the actual seen image of each icon element */
.footer-connect-icon-facebook:before {
    color: inherit;
    content: "\f09a";
}

.footer-connect-icon-facebook {
    padding-left: 9px!important;
    padding-right: 9px!important;
}

.footer-connect-icon-twitter:before {
    color: inherit;
    content: "\f099";
}

.footer-connect-icon-twitter {
    padding-right: 7px;
}
 .footer-connect-icon-instagram:before {
    color: inherit;
    content: '\e901';
}

.footer-connect-icon-instagram {
    padding-right: 7px;
}

.footer-connect-icon-linkedin {
    padding-right:7px;
}

.footer-connect-icon-linkedin:before {
    color: inherit;
    content: "\f0e1";
}


/* Bottom Footer */
.bottom-footer{
    width: 100%;
    background-color: #191c1e;
    text-align: center;
}

/* Copyright */
.footer-copyright p {
    color: #999999;
    font-size: 14px;
}

/* Back to Top */
.footer-back-to-top #toTop {
    display: block;
    background-color: #333;
    border-radius: 4px 4px 0 0;
    bottom: 0;
    color: #FFF;
    display: none;
    height: 35px;
    /* Sticky... Lets user see it at all times */
    position: fixed;
    right: 30px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 48px;
    opacity: .9;
    z-index: 100;
    transition: all .2s ease-in-out 0s;
}

/* Hover on "back to top" */
.footer-back-to-top #toTop:hover {
    background-color: #aaaaaa;
}

/* Uses a font for the icon */
.footer-back-to-top #toTop:before {
    color: #fff;
    line-height: 35px;
    content: '\f106';
    -webkit-font-smoothing: antialiased;
    font-size: 22px;
    font-family: 'IcoMoon';
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

/* The rest of this will be specific to the blog listing page. Above can be used side wite, since it only applies to global groups. The body class for this template is "bloglist". Therefore everything with .bloglist in front of it will only affect the blog listing page. */
/* Handles the water cooler image, and keeps things aligned. */
.bloglist .banner {
    background-size: cover;
    display: flex; 
    background-attachment: fixed;
    min-height: 550px !important;
    background-position: top;
    position:relative;
    background-image: url('https://cdn2.hubspot.net/hubfs/2973842/BingBang%20Blog/WaterCooler.jpg');
    align-items: center;
    justify-content: center;
    width=100% !important;
    padding-top: 65px;
}

/* THE BING BANG WATER COOLER */
.bloglist .banner-text h1{
    font-size: 48px;
}

/* Did we tell you about the time... */
.bloglist .banner-text p{
    font-size: 20px;
    color: #ffffff;
}

/* This is the div that contains all of the actual main content between the banner image and the footer */
.bloglist .main-content{
    width=100% !important;
    text-align: center;
    align-content: center;
    justify-content: center;
}

/* I made a mobile-friendly version of the blog posting that is a simple link with the publish date and author, and tags. I only wanted it to show up on mobile
devices, so this css hides it. Later in my media inquiries it is shown based on the viewport size of the user, as required by the practicum. */
.mobile-friendly {
    display: none !important;
}

/* This css handles the hover effects of the image previews. Even after the client has migrated their blog to hubspot, this CSS will still handle the styling 
of each of the image previews, though all of the custom html modules will be converted into custom HUBL modules, so that the content shown is actually dynamic 
based on the 6 most recent articles. */
.bloglist .preview-image-container {
    position: relative;
    overflow: hidden;
    min-width: 700px;
    width=100%;
    margin-left: 15px !important;
    margin-right: 0 !important;
    margin-top: 15px !important;
    margin-bottom: 0 !important;
}

.bloglist .preview-image {
  width: 100%;
  height: 100%;
}

.bloglist h3{
    color: #999999;
}

.bloglist p{
    color: #999999;
}

.bloglist .preview-image:hover ~ .hover {
  transform: translateX(0);
}

.bloglist .preview-image:hover ~ .preview-overlay {
    transform: translateX(200%);
}

.bloglist .hover:hover ~ .preview-overlay {
    transform: translateX(200%);
}

.bloglist .preview-overlay{
   position: absolute; 
   top: 10%; 
   left: 5%; 
   width: 70%; 
   background-color: rgba(30,30,30, 0.7);
   transition: transform .4s ease-out;
}

.bloglist .preview-overlay h1{
    color: white;
    padding-left:3%;
}

.bloglist .hover p {
    padding-left: 5px;
    padding-right: 5px;
}

.bloglist .hover:hover {
  transform: translateX(0);
}

.bloglist .hover img{
    float: left;
    max-width: 40%;
    max-height: 40%;
    padding-left:3%;
    padding-right:10%;
}

.bloglist .hover a {
    text-decoration: none;
}

.bloglist .preview-centered-text{
    text-align: center;
}

.bloglist .hover p{
    padding-left: 3%;
}

.bloglist preview-image:focus {
  pointer-events: none;
}

.bloglist .preview-image:focus ~ .hover {
  transform: translateX(0);
  transition: none;
}

.bloglist .hover {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  padding-top: 0;
  transform: translateX(-100%);
  transition: transform .4s ease-out;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.7);;
  z-index: 10;
  
}

/* Don't let the CTA cover the contact form. */
.bloglist .blog-cta img{
    max-width: 100%;
    height: 40%;
}

/* Don't let the contact form break responsiveness on smaller screens */
.hs-form select {max-width:50%;}
.hs-form select:focus {max-width:50%;}

/* This styles the button on the form, as required by the practicum */
/* The button must be styled, according to the practicum requirements */
body .hs-button.primary,
body input[type="submit"],
body input[type="button"] {
    background-color: rgba(150,150,150,1);
}

/* Media Queries are here, and are kept minimal... The idea is that if I utilize best practices, most of the stie should be automatically responsive. */
/* This one is only here because it is required for the practicum. You will see that it is actually redundant based on later code. */
@media (max-width: 480px) {
    .bloglist .banner {
        min-height: 300px!important;
    }
    .mobile-unfriendly{
        display: none !important;
    }
    .mobile-friendly{
        display:block !important;
    }
}
/* This media query renders the previous one redundant, but is the correct one. This makes it so that if the user screen isn't large enough to accomodate the minimum required width
of a preview container (custom html module), it switches to the mobile version and hides my custom html */
@media (max-width: 760px) {
    .bloglist .banner {
        min-height: 300px !important;
    }
    .bloglist .banner h1{
        font-size: 20px;
    }
    .mobile-unfriendly{
        display: none !important;
    }
    .mobile-friendly{
        display:block !important;
    }
}