html, body { height: 100%; }


body { 
font-family: "Open Sans", Arial, sans-serif; 
font-size:1em; 
letter-spacing:0px;
    margin: 0;
    padding: 0;
    position: relative;
    cursor: auto;
    text-align:left;
}
h1, h2  { font-family:"Fjalla One"; color: #44619b; text-transform:uppercase; font-weight:700; }
h3 { font-family:"Fjalla One"; color: #44619b; text-transform:uppercase; font-weight:400;}
h4, h5, h6 { font-family: "Open Sans", Arial, sans-serif; }





/* HOME PAGE */
.hoopla-banner {
width:100%;
height:378px;
background:url("https://assets.socialstrata.com/images/hoopla-site/blurry-crowd.jpg");
background-repeat:no-repeat;
background-color:#000000;
padding-top:70px;
}
.hoopla-banner-small {
width:100%;
height:378px;
background:url("https://assets.socialstrata.com/images/hoopla-site/blurry-crowd.jpg");
background-repeat:no-repeat;
background-color:#000000;
padding-top:75px;
}
h1.home-banner { font-size:3.0rem; color:#000000;line-height:5.0rem;}
.rotating-section { color: #ffffff;background-color:#333333; padding:7px; margin:10px;}



/* NAV BAR */

.top-bar { height: 55px; }
.top-bar-ubb { height:60px; }


nav ul.title-area img { padding-top:10px; }
.top-bar-section ul li > a {   font-family: "Roboto Condensed", Arial, sans-serif; font-size:1.1rem; text-transform:uppercase;  }
.off-canvas-wrap,.inner-wrap{
    height:100%;   
}

.top-bar-section li.active:not(.has-form) a:not(.button), .top-bar-section li:not(.has-form) a:not(.button) { height:55px; }

.section-box {
	padding-top:40px;
	padding-bottom:40px; 
	
}

.section-description {
font-size:1em;
padding-top:15px;
padding-bottom:15px;
letter-spacing:0px;
line-height:1.5em;
font-family: "Open Sans", Arial, sans-serif;
text-align:left;
}

	



/* legacy css */
img.img-bottom { vertical-align:bottom; }
.big-link { font-size:1.3em; font-weight:600; }
.white { color:#ffffff; }
.banner { font-weight: 800; }
.light-grey-bg { background-color:#f8f8f8; width:100%; margin:0; padding-top:25px; padding-bottom:25px; }
.white-bg { background-color:#ffffff; width:100%; margin:0; padding-top:25px; padding-bottom:25px; }
.margin-bottom-20px { margin-bottom:20px; }
.margin-top-20px { margin-top:20px; }
.margin-bottom-25px { margin-bottom:25px; }
.margin-top-25px { margin-top:25px; }
.tiny-font { font-size: 0.80rem; }
.small-font { font-size: 0.90rem; }
.bold { font-weight: 600; }




.module-box-contents { font-size:0.9em; padding-bottom:10px; padding-top:10px; text-align:left; }
.module-box-top { text-align:left; font-size:1.1em; color: #1a6082; padding-bottom:10px; border-bottom:1px solid #dfdfdf; text-transform:uppercase; }

.tab-bar .menu-icon {
  color:white;
  display:block;
  height:2.5rem;
  padding:0;
  position:relative;
  text-indent:1.94444rem;
  transform:translate3d(0px, 0px, 0px);
  width:2.5rem;
}

.button {
font-family: "Open Sans", Arial, sans-serif; 
font-size: 1.2em;
}

.blue-text { color: #0b4891;  }


footer#bottom_footer {
background:url("https://assets.socialstrata.com/images/backgrounds/seamless-dark-noise-3.png");
background-repeat:repeat;
background-color:#000000;
margin-top:0;
color:#ffffff;
padding-top:25px;
padding-bottom:20px;
font-family:"Open Sans", Arial, sans-serif;
font-size:0.9em;
}

.footer-column-section-head { font-family:"Open Sans", Arial, sans-serif; text-transform:uppercase; font-size:1em; letter-spacing:0px;font-weight:100; color: #f67c7c;padding-bottom:7px; }
footer a { color:#ffffff; text-decoration:none; font-family:"Open Sans", Arial, sans-serif; letter-spacing:0px; }
footer a:hover { color: #dce7f7;text-decoration:underline; } 
.footer-center { text-align:center; padding-bottom:15px; }



footer#blog_footer {
	border-top:12px solid #2b2b2b;
	background-color:#4c4c4c;
margin-top:40px;
padding-top:40px;
padding-bottom:40px;
font-family:"Open Sans", Arial, sans-serif;
font-size:0.9em;
font-color:#ffffff;
}
footer#blog_footer h3 { color: #ffffff; }
.hoopla-footer-reference { color:#FFFFFF; }

img.image-border { border:1px solid #dfdfdf; }

.line-item { padding-bottom:7px; }
i.grey-icon-left { margin-right:5px; color: #cccccc; }

.dropdown-header { font-size: 1.0rem; font-weight:600; }



/* pricing page */
.plan-bullets {
	text-align:center;
	font-size:1.2rem;
	font-weight:600;
	padding-top:25px;
	padding-bottom:12px;
	
}
h3.plan-step-header {
font-size:1.6rem;
color: 	#d65e2a;

}
h4.plan-support-name {
	
	font-size:1.2rem;
	font-weight:600;
}
.comparison-notes {
	background-color:#f0f0f0;
	padding:10px;
	border:1px solid #dfdfdf;
}