.statNavContainer { position: fixed; left: 20px; top: 20px; min-width: 30px; margin-right: 20px; z-index: 30; }
.statNavContainer .loenzEye:hover { cursor: pointer; }
.statNavContainer #statNav { background-color: white; border: 2px solid black; border-radius: 15px; min-height: 26px; line-height: 30px; margin-right: 20px; transition: 700ms; position: fixed; top: 20px; }
.statNavContainer #statNav nav { justify-content: flex-start; }
.statNavContainer #statNav nav a { margin: 0px 10px; }
.statNavContainer .clicked { left: 70px; opacity: 1; }
.statNavContainer .unClicked { left: -1000px; opacity: 0; }

html { width: 100%; }
html ::-webkit-scrollbar { display: none; }

body { margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6, p, a { font-family: "Quicksand", sans-serif; color: #666666; text-align: center; }

h2, h3 { margin: 40px 0px; font-size: 2em; }

h3 { color: white; font-weight: bold; }

p, span { font-size: 1.25em; }

nav { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
nav a { margin: 10px; color: #666666; }
nav a:hover { color: #8A2BE2; }

a { color: #08960d; font-weight: bolder; text-transform: uppercase; }
a:hover { color: #8A2BE2; text-decoration: none; }

section { padding: 10vh 0; }

.padding10px { padding: 10px; }

.zoom { transition: 300ms; }
.zoom:hover { transform: scale(1.07); transition: 300ms; cursor: zoom-in; }

#footerTopImg { min-height: 250px; background: url(../img/LOENZ-footer-top-image.jpg) center center; background-size: cover; }

#footernav { background-color: black; }
#footernav a { color: white; }
#footernav a:hover { color: #08960d; }

#contactForm { background-color: black; }
#contactForm h3 { text-transform: uppercase; margin-top: -5vh; }
#contactForm h3 svg { height: 1em; }
#contactForm .padding10px { padding-top: 0px; padding-bottom: 0px; }
#contactForm .contactFormCard { padding: 0px 20px; display: flex; flex-direction: column; }
#contactForm .contactFormCard .nameEmail, #contactForm .contactFormCard .message { float: left; }
#contactForm .contactFormCard textarea, #contactForm .contactFormCard input { width: 100%; box-sizing: border-box; border: 2px solid white; border-radius: 10px; background-color: black; margin: 10px 0; color: #08960d; }
#contactForm .contactFormCard textarea { height: 160px; padding: 9px 10px; resize: vertical; }
#contactForm .contactFormCard textarea:focus { background-color: white; border: 2px solid white; outline: 0; color: black; }
#contactForm .contactFormCard input { height: 40px; padding: 0 10px; }
#contactForm .contactFormCard input:focus { background-color: white; border: 2px solid white; outline: 0; color: black; }
#contactForm .contactFormCard ::-webkit-input-placeholder { color: white; }
#contactForm .contactFormCard :-moz-placeholder { color: white; }
#contactForm .contactFormCard ::-moz-placeholder { color: white; }
#contactForm .contactFormCard :-ms-input-placeholder { color: white; }
#contactForm .sendButtonContainer [type="submit"] { background-color: black; border: 2px solid #08960d; color: white; text-align: left; }
#contactForm .sendButtonContainer [type="submit"]:hover { border: 2px solid white; color: #08960d; }

#copyright { background-color: black; }
#copyright p { color: #666666; }

#landing { background-image: url(../img/LOENZ-home-page-header-background.jpg); background-position: center; background-size: cover; padding-top: 12vh; min-height: 98vh; }
#landing #landinglogo { width: 60vw; max-width: 400px; margin: 5% auto; background-color: rgba(255, 255, 255, 0.3); padding: 1%; box-shadow: 0 0 20px rgba(255, 255, 255, 0.7); border-radius: 3px; }
#landing #landinglogo svg { filter: drop-shadow(0px 0px 14px white); }
#landing .goggle { margin: 3%; }
#landing .goggle .fadeCard { display: flex; flex-direction: column; width: 100%; background-color: rgba(255, 255, 255, 0); flex-grow: grow; }
#landing .goggle .fadeCard:hover { cursor: pointer; background-color: rgba(255, 255, 255, 0.9); transition: 200ms; }
#landing .goggle .fadeCard:hover .cardInfo { opacity: 1; transition: 300ms; }
#landing .goggle .fadeCard:hover .cardTitle { background-color: black; }
#landing .goggle .fadeCard .cardInfo { justify-content: center; margin-bottom: 0; opacity: 0; padding: 15% 20px; box-shadow: 0 0 10px white; flex-grow: 1; }
#landing .goggle .fadeCard .cardInfo h3 { margin: 0 auto; }
#landing .goggle .fadeCard .cardTitle { background-color: rgba(0, 0, 0, 0.3); padding: 2px; box-shadow: 0 0 10px black; z-index: 2; }
#landing .goggle .fadeCard h2 { text-align: center; color: white; text-transform: uppercase; }

#cbpd { height: 90vh; background: url(../img/LOENZ-cbpd-header-background.jpg); background-size: cover; display: flex; flex-direction: column; justify-content: flex-end; }
#cbpd #cbpdLogo { width: 60vw; max-width: 400px; margin: 0 auto 40vh auto; }
#cbpd #cbpdLogo p { text-align: right; color: #08960d; }
#cbpd h3 { font-weight: bolder; text-transform: uppercase; }

#loenzCBPD h2 svg { height: 1.3em; }

#whatCanLoenzTellMe { background: url(../img/LOENZ-demographic-section-background.jpg) center center; background-size: cover; }
#whatCanLoenzTellMe .demoCard { background-color: white; margin: 0 auto; padding: 10px; max-width: 350px; border-radius: 10px; }
#whatCanLoenzTellMe .demoCard .demoIcon { text-align: center; border-bottom: 3px solid #666666; }
#whatCanLoenzTellMe .demoCard p { text-align: center; }

#howDoesItWork .videoSizeContainer { max-width: 600px; margin: 0 auto; }
#howDoesItWork .videoSizeContainer .embed-responsive { overflow: hidden; }
#howDoesItWork .videoSizeContainer .embed-responsive .embed-responsive-item { position: absolute; top: -2px; left: -2px; height: 101.5%; width: 101.5%; }

#whyUseCloud { background: url(../img/LOENZ-cloud-section-background.jpg) center center; background-size: cover; }
#whyUseCloud .cloudCard { background-color: white; margin: 0 auto; padding: 10px; max-width: 350px; border-radius: 10px; }
#whyUseCloud .cloudCard .cloudIcon { text-align: center; border-bottom: 3px solid #666666; padding-bottom: 3px; }
#whyUseCloud .cloudCard p { text-align: center; }

#whatYouCanDo h2 { color: #666666; }
#whatYouCanDo p { color: #666666; text-align: center; }
#whatYouCanDo .graphCard { margin: 0 auto; padding: 10px; max-width: 450px; }
#whatYouCanDo .graphCard .graph { position: relative; }
#whatYouCanDo .graphCard .graph .infoIcon { border: 5px solid #666666; border-radius: 100%; height: 50px; width: 50px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); box-shadow: 0px 0px 10px #666666; opacity: 1; background-color: rgba(255, 255, 255, 0.9); transition: 8s; transition-delay: 10s; }
#whatYouCanDo .graphCard .graph .infoIcon p { color: #666666; font-size: 25px; font-weight: bolder; line-height: 40px; }
#whatYouCanDo .graphCard .graphInfo { max-height: 0px; background-color: white; overflow: hidden; transition: 1.5s; }
#whatYouCanDo .graphCard .graphInfo p { color: #666666; padding: 10px; }
#whatYouCanDo .graphCard:hover .graphInfo { max-height: 5000px; transition: 3s; }
#whatYouCanDo .graphCard:hover .graph .infoIcon { opacity: 0; transition: 1s; }

#quote { background: url(../img/LOENZ-quote-section-background.jpg) center center; background-size: cover; }
#quote h3 { text-shadow: 0 0 5px black; }
#quote p { color: white; font-style: italic; text-shadow: 0 0 5px black; }

#privacy { text-align: center; }
#privacy .privacyIconsContainer { margin: 20px auto; max-width: 500px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-around; }
#privacy .privacyIconsContainer .privacyIcon { width: 100px; height: 100px; }

#contact { margin-top: -15vh; background-color: black; }
#contact h3 { text-transform: uppercase; }
#contact h4 { text-align: left; color: white; }
#contact h4 i { margin: 10px 20px 10px 10px; }
#contact .contactCard { overflow: hidden; padding: 0 20px; }
#contact .contactCard #map { height: inherit; min-height: 160px; border-radius: 10px; }

#theTeamHeader { background-image: url(../img/LOENZ-the-team-background.jpg); background-size: cover; height: 90vh; }
#theTeamHeader h3 { margin-top: 30vh; background-color: rgba(0, 0, 0, 0.5); padding: 10px; }

#introToTeam .introCard { text-align: center; display: flex; flex-direction: column; }
#introToTeam .introCard img { margin-bottom: 20px; display: block; max-height: 200px; width: auto; height: auto; margin: 0 auto; }
#introToTeam .introCard p { text-align: left; padding: 10px; }
#introToTeam .introCard .gif { justify-content: flex-end; margin-top: auto; }
#introToTeam .introCard .gif img { display: block; max-width: 50%; max-height: 50%; width: auto; height: auto; margin: 10px auto 20px auto; }