@charset "utf-8";
/* CSS Document */


@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500&display=swap');
/* To use:
  font-family: 'Raleway', sans-serif;
*/


/* CSS Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img{
  box-sizing: unset;
}

/* /CSS Reset */


/* --- CSS Vars --- */
:root {
  --bhGreen: #98F96C;
}




body{
  font-family: 'Raleway', sans-serif;
  margin: 0px;
}


.container{
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-template-rows: auto 0.1fr;
  
  grid-template-areas:
    "leftNav contentWrap"
    "footer footer"
  ;
  
  grid-gap: 0px;
  height: 100vh;
  
} /* /container */



#webQuote {
  color: #fff;
  font-size: 1.5rem;
  padding: 2rem;
  line-height: 1.5em;
  position: absolute;
  left: calc(290px + 30px);
}










#leftNav {
  background: rgb(53,112,190);
  background-image: url("/images/background_leftNav.png");
  background-position: top left;
  background-repeat: no-repeat;
  color: #fff;
  grid-area: leftNav;
  padding: 0px 1em;
  min-width: 220px;
}


#leftNav img {
  margin: 0px auto;
  display: block;
  padding: 12px 0px;
}


h1, h2, h3, h4{
  font-weight: normal;
  margin: 0px;
}

#leftNav hr {
  width: 85%;
  margin: 25px auto;
  opacity: 0.4;
}


#leftNav h1 {
  font-size: 1.5rem;
  text-align: center;
  padding: 0px 0px .1em 0px;
}

#leftNav h2{
  font-size: 1.0rem;
  text-align: center;
}

#leftNav ul {
  margin: 0px auto;
  padding: 0px 0px 0px 8px;
  width: 100%;
}


#leftNav ul li{
  list-style: none;
}

#leftNav li a:link, #leftNav li a:visited {
  color: var(--bhGreen);
  text-decoration: none;
  font-size: 1rem;
  padding: .5rem 1rem;
  display: block;
  border: 2px solid transparent;
}





/* Style the active page links along with hover style. */
.page-id-home #leftNav .home_link,
.page-id-websites #leftNav .websites_link,
.page-id-animations #leftNav .animations_link,
.page-id-automation #leftNav .automation_link
#leftNav ul li  a:hover {
  color: #fff;
  border: 2px solid #fff;
  background-color: rgba(255,255,255,.1);
}



.page-id-animations #contentWrap{
  background-color: #153764;
  grid-area: contentWrap;
}

#contentWrap{
  background-color: #fff;
}


a img.videoPoster {
  display: block;
  max-width: 960px;
  margin: 2vw auto;
  cursor: pointer;
}


#contentWrap img {
  padding: 40px;
 
}


.contentImage{
  width: 74.95vw;
  height: auto;
  filter: drop-shadow(0px 12px 12px #ccc);
}




p.contentQuoteUpper {
  font-size: 1.5rem;
  font-weight: 500;
  color: #6d6d6d;
  background-color: #c9e0b47a;
  padding: 50px;
  position: absolute;
  width: 436px;
  top: 2vw;
  box-sizing: border-box;
}

.contentQuoteLower {
  font-size: 1.5rem;
  position: relative; /* Required to allow links to be above transparent images. */
  right: 0px;
  /* bottom: 7vw; */
  width: 741px;
  padding: 20px 100px 50px 12px;
  background-color: #f3f3f3;
  margin-top: -160px;
  float: right;
}

.contentQuoteLower img.downArrow {
  padding: 0px!important;
  float: left;
  margin-left: -80px;
  opacity: 0.75;
}

.contentQuoteLower p {
  padding: 0px 20px;
}

.contentQuoteLower a {
  text-align: right;
  display: block;
  padding-top: 10px;
  font-size: 1.3rem;
  color: #343b46;
}






#footer {
  background-color: #000;
  color: #fff;
  grid-area: footer;
  font-size: 1.3rem;
  text-align: center;
  padding: 1.2vw 0px;
  max-height: 100px;
  align-self: end;
}

#footer a:link, #footer a:visited{
  color: #fff;
  text-decoration: none;
}

#footer a:hover{
  text-decoration: underline;
  color: var(--bhGreen);
}