/* 
==================================================
 GLOBAL STYLES
==================================================
*/

html,
body {
    min-height: 100vh!important;
    position: inherit!important;
}

body {
	display: flex;
    flex-direction: column;
    color: #5a5a5a;
}

a[href]:after {
    content: none;
}

a:focus {
    outline: none;
}

h1,
h2 {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
}

textarea {
	resize:vertical;
}

/* 
==================================================
 Text/Fonts
==================================================
*/

.serif {
    font-family: 'Roboto Slab', serif;
}


/* 
==================================================
Top Nav
==================================================
*/

#mobilenav,
.navbar-inverse,
.navbar-wrapper {
	background:#444;
	border:none;
}


.navbar-wrapper {
	z-index:999;
	height:50px;
}

/* remove the fixed container width so the top nav becomes fluid on mobile */
.navbar-wrapper .container {
    width: auto;
}

.navbar {
	position:relative;
	width:100%;
	margin:0;
}


/* Override the bootstrap style to float the navbar header left on device widths >= 768px */
.navbar-header {
    float: none !important;
}

/* remove btn-link padding and set the line height so items are vertically centered */
.navbar-header .btn-link {
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:0;
	line-height: 50px;
	padding: 0;
    color: #fff; 
    border:none;   
}

/* Add a right margin for direct child buttons so they have spacing in between */
.navbar-header > .btn-link {
	margin-right:15px;
}
/* 
	We remove the left padding because all the elements in the top nav have a right margin. 
	We also add top and. bottom padding to vertically center 
*/
.navbar-wrapper .search-wrap {
	margin-right:15px;
	padding:12px 0;
	width:120px;
}

.navbar-collapse {
    padding: 0 0 20px 0;
}

/* Begin top nav on tablets */
@media (min-width: 768px) {
    
    .navbar-wrapper .search-wrap {
		width:250px;
	}
	
}

/* Begin top nav on desktop */
@media (min-width: 1025px) {
    
    .navbar-wrapper .container {
        max-width: 1170px;
    }
    
    /* on desktop, the mobile nav menu button is removed and the top nav is reduced to 34px */
    .navbar-header .btn-link {
		line-height: 34px;
		padding: 0;
	    color: #fff;    
	}
	
	/* on desktop, if the top nav is set to tall mode, the line height needs to be adjusted to match the height */
	.nav-height-tall .navbar-header .btn-link {
		line-height: 50px; 
	}
	
	.navbar-wrapper .search-wrap {
		padding-bottom:4px;
		padding-top:4px;
	}
	
	.nav-height-tall .navbar-wrapper .search-wrap {
		padding-bottom:12px;
		padding-top:12px;
	}

}


/* 
==================================================
Event Banner
==================================================
*/

#main-banner {
	z-index:998;
}

#homebtn {
	display:block;
}

/* Begin event banner on tablets */
@media (min-width: 768px) {
    
    body.banner-fixed #main-banner {
        /*position: fixed;*/
        position: sticky;
        top: 50px;
        left: 0;
        width: 100%;
        margin: 0;
    }
    
    body.banner-detached.belowBanner #main-banner {
        position: relative;
    }
    
}

/* Begin event banner on desktop */
@media (min-width: 1025px) {
    
    body.banner-fixed.belowBanner .navbar-fixed-top {
        top: 140px;
    }
    body.banner-detached.belowBanner .navbar-fixed-top {
        top: 140px;
        position: absolute;
    }
}


/* 
==================================================
Top Nav and Event Banner combinations
==================================================
*/

/* 
	The nav include is first in the dom so if it is fixed 
	we just position it sticky with a top value of 0 since by 
	default it is the first element in the DOM
*/
body.nav-fixed .navbar-wrapper {
	position: -webkit-sticky;
	position: sticky;
	top:0;
}

body.banner-fixed #main-banner {
	position: -webkit-sticky;
	position: sticky;
	top:50px;
}

/* 
	If the banner is fixed and the nav is detached the banner 
	needs to stick to the top of the page
*/
body.banner-fixed.nav-detached #main-banner {
	top:0 !important;
}

@media (min-width:768px) {
	
	body.nav-fixed.banner-fixed.nav-below-banner .navbar-wrapper{
		top:89.7px;
	}

	/* 
	If the settings are configured to show the nav below the banner then we 
	use the flex-box order property to change the display. Default order is 
	0 so we will set this to -1 and the banner to -2
	*/
	body.nav-below-banner .navbar-wrapper {
		order:-1;
	}
	
	/*
	Because the nav include comes first, we set the flex-box 
	order to -2 (lowest value) so it appears before the nav 
	*/
	body.nav-below-banner #main-banner {
		order:-2
	}
	
	/* 
	If the nav is below the banner then we need the banner top 
	be at the top of the page
	*/
	body.banner-fixed.nav-below-banner #main-banner {
		top:0 !important;
	}

}

@media (min-width:992px) {
	body.nav-fixed.banner-fixed.nav-below-banner .navbar-wrapper{
		top:116px;
	}
}

/* >= 1024px we reduce the height of the awesome bar */
@media (min-width:1024px) {  
	
	.navbar,
	.navbar-wrapper {
		min-height:34px;
		height:34px;
	}
	
	body.banner-fixed #main-banner {
		top:34px;
	}
	
	body.banner-fixed.nav-height-tall #main-banner {
		top:50px;
	}


}

@media (min-width:1200px) {
	body.nav-fixed.banner-fixed.nav-below-banner .navbar-wrapper{
		top:140px;
	}
}


/* 
	The navbar-wrapper defaults to 50px tall on mobile but 
	will collapse to 34 px on desktop unless the setting to always 
	force the tall navigation is enabled 
*/
body.nav-height-tall .navbar-wrapper {
	height:50px;
}






/* 
==================================================
Site wrap
==================================================
*/

#sitewrap {
	position: relative;
	overflow-x: hidden;
    min-height: 400px;
    max-width:1170px !important;
    margin:0 auto !important;
    padding:15px;
    width:100%;
    padding-bottom: 70px; /* Allow space for back to top button below content */
    display:flex;
    flex:1;
}

#sitewrap:focus {
    outline: none;
}


/* 
==================================================
Left nav
==================================================
*/

#leftnav {
    display: none;
}

#leftnav .primary {
    color: #0088BB;
}

/* This was added to stop the agenda page from flashing when the carousel was present in the left nav */
#leftnav .carousel {
	z-index:1;
}

#left-banner-sponsor-ad {
	width:200px;
}

/* Begin event banner on desktop */
@media (min-width: 1025px) {

	#leftnav {
		border-right: 1px solid #eee;
        position: relative;
        display:block;
        padding: 0;
        width: 210px;
        flex-shrink:0;
    }
    	
}

/* 
==================================================
Content wrap
==================================================
*/

.content-wrap .container {
	width:100% !important;
	padding:0 !important;
	margin:0 !important;
}

.content-wrap,
.content-wrap.container {
	width:100%;
	position:relative;
	padding:0;
	transform:translate3d(0,0,0) /*Added this to correct a weird scolling/overflow issue on safari */
}

/* Begin event banner on desktop */
@media (min-width: 1025px) {

	.content-wrap,
	.content-wrap.container {
		padding-left: 15px;
		max-width:930px;
	}

}

/* 
==================================================
Sponsor Ads
==================================================
*/

.cadmium-sponsor-ad {
	display:block;
	margin:0 auto;
}

.cadmium-sponsor-ad img {
	max-width:100%;
	max-height:100%;
}

.cadmium-sponsor-ad-placeholder {
	background:rgba(0,0,0,.02);
	height:100%;
	width:100%;
}

.cadmium-sponsor-ad-placeholder:after {
    content: 'Loading Ads...';
    display: block;
    position: relative;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}


/* 
==================================================
Right side ad (index page)
==================================================
*/

.rightad {
	display:none;
	
}

.rightad img {
	max-width:100%;
}

/* Begin event banner on desktop */
@media (min-width: 1025px) {

	.rightad {
		margin:0 auto;
		width: 175px;
		display:block;
		flex-shrink:0;
		padding-left:15px;
	}
	
}

/* Mobile Right side ad */

.topad {
	text-align:center;
}

.topad img {
	max-width:100%;
}

.topad .panel-body {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}


.topad .app-qr,
.topad .app-bitly,
.topad form {
    display: none;
}

.topad #appwrapper {
    order: 1;
    margin-right: 10px;
    align-self: center;
}

.topad .apptext {
    order: 2;
    align-self: center;
}

/* Begin event banner on desktop */
@media (min-width: 1025px) {

	.topad {
		display:none;
	}
	
}



/* 
==================================================
Right side sponsor banner (index page)
==================================================
*/

#sponsorList {
	border:2px solid #D6D4D5;
	-webkit-border-radius:6px; 
	-moz-border-radius:6px; 
	border-radius:6px; 
	overflow:hidden;
	list-style:none;
	padding: 0;
}

#sponsorList li {
	padding:0 10px;
	padding-bottom:20px;
}

#sponsorList li.dayrow { 
	text-align: center;
	display:block;
	width: 100%;
	padding:0;
	margin-bottom:10px;
}

#sponsorList li a {
	display:block;
}

#sponsorList li img {
	display:block;
	margin:0 auto;
	max-width:100%;
	max-height:60px;
}

#sponsorList li a img:hover {
	opacity:.7;
}

#sponsorList small {
	text-align:center;
	display: block;
	margin:0 auto;
	padding:6px 0;
}

/* 
==================================================
Footer
==================================================
*/

/* The footer is detached by default */
footer {
	border-top: 1px solid #eee;
    background: #777777;
    text-align: center;
    font-size: 14px;
    padding: 2px 0;
    z-index: 1000;
    color: white;
    width: 100%;  
}

/* 
	The footer is always fixed. on the login page because the content is not tall enough 
	to avoid having white space at the bottom of the screen on some mobile devices
*/
.login-page footer {
	position:fixed;
	bottom:0;
	left:0; 
}

footer .pull-left,
footer .pull-right {
    float: none !important;
}

footer .copyrights {
    line-height: 22px;
    margin: 0;
    margin-top: 2px;
}

/* Begin footer on tablets */
@media (min-width: 768px) {
	
	/* Apply the styles so the footer is fixed to the bottom */
	.footer-fixed footer {
		position:fixed;
		bottom:0;
		left:0; 
	}
	
	footer {
        text-align: left;
        max-height: 60px;
    }
    
    footer .pull-left {
        float: left !important;
        margin-top: 5px;
    }
    
    footer .pull-right {
        float: right !important;
    }

}

/* 
==================================================
Popup
==================================================
*/

#popup,
#popup-overlay {
	display: none;
    position: fixed;
    z-index: 9999;
    height: 100%;
	width: 100%;
    left: 0;
    top: 0;
}

/* popup overlay */
#popup-overlay {
    background: #444;
    opacity: 0.5;    
}

/* popup container */
#popup {
	border-top: 10px solid #51A3E2;
    overflow: auto;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
	background: #fff;
	max-height: 100%;
	max-width: 100%; 
	z-index: 10000;  /* increase the z-index by one so it shows over the overlay */
}


/* popup content */
#popupContent {
    color: #444;
    font-size: 16px;
    padding-bottom: 0;
    max-width:100%;
    height: 100%;
    overflow-y: auto;
    padding:0;
}

#popupContent .go-back {
    cursor: pointer !important;
}

#popupContent p {
	margin: 0 0 5px;
}

/* popup header */
.popupheader {    
    position: absolute;
    padding:0 15px;
    color: #5a5a5a;
    z-index: 150;
    height: 50px;
    width: 100%;
    left: 0;
    top: 0;    
}

.popupheader-title {
	line-height: 50px;
    font-size: 20px;
}

.popupheader-title [aria-hidden] {
	vertical-align:-2px;
    font-size: 24px;
}

.popupheader > .fa,
.popupheader > .glyphicon {
	line-height: 50px;
    text-align:center;
    font-size: 32px;
    cursor: pointer;
    display: block;
    padding:0 5px;
    color:#FFFFFF;
    float:left;
}

.popupheader .glyphicon-remove,
.popupheader .glyphicon-chevron-left {
	position: absolute;
    line-height: 40px;
    font-size: 20px;
    cursor: pointer;
    display: block;
    z-index:201;
    height: 40px;
    padding: 0;
    top: 4px; 
}

.popupheader .glyphicon-chevron-left {
    left: 10px;
}

.popupheader .glyphicon-chevron-left:after {    
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    position: absolute;
    margin-left: 5px;
    content: "Back";
    top:1px;
}

.popupheader .glyphicon-remove {
	padding:0 10px;
    right: 0;
}

/* popup tools */
.popuptools {
    position: relative;
    z-index: 200;
    top: 7px;
    padding: 0;
    height: 50px;
    overflow: hidden;
}

/* The centered class was added to better align the content within the popuptools div on various screen sizes */
.popuptools.centered {
	text-align:center; 
	margin: 0 50px;
}

.popuptools.centered.gutter-sm {
	margin: 0 35px;
}

.popuptools.centered.gutter-xs {
	margin: 0 25px;
}

.popuptools ul {
    list-style: none;
    clear: both;
    overflow: hidden;
    height:inherit;
    padding: 0;
    margin:0;
}

.popuptools.centered ul {
	display:inline-block;
}

.popuptools li {
	float: left;
}

.popuptools li a {
    font-size: 34px;
    margin-right:15px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    position: relative;
}

/* in the fullscreen popup version the icons appear against a white background */
#sitewrap .popuptools li a {
    color: #444;
}

.popuptools li:last-child a {
    margin-right: 0;
}

.popuptools li a:hover {
    opacity: 0.8;
}

.popuptools li .icon-text,
.popuptools li .icon-text-text {
    font-size: 18px !important;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important;
    position:relative;
    display:none;
    top:-1px;
}

.popuptools .badge {
    position: absolute;
    left: 31px;
    top: 0;
    background: #F04E23;
}

/* Adjust font size of specific icons so they appear consistently sized */
.popuptools .fa-thumbs-up {
    font-size: 33px;
}

.popuptools .fa-star {
    font-size: 33px;
}

.popuptools .fa-envelope {
    font-size: 30px;
}

/* main popup content */
.main-popup-content {
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 0;
    padding: 15px 15px 25px 15px;
}

.main-popup-content.no-popuptools {
    margin-top: 50px;
}

#sitewrap .main-popup-content.no-popuptools {
    margin-top: 0;
}

.main-popup-content.full-width {
    padding-right:0;
    padding-left:0;
}

.main-popup-content.header-flush {
	padding-top:0;
}

/* popup content banner */
.popup-content-banner {
	background-color:<% =PlannerOption(543) %>; 
	text-align: center;
	position:relative;
	line-height: 26px;
	margin:0 -15px; 
	color: white; 
	height: 36px;  
	padding: 6px;
	margin-bottom: 10px;
	top:-15px;
}

/* popup gutter */
.popup-gutter {
    background: transparent;
    position: static;
    overflow: hidden;
    padding: 20px 15px;
    border: none;
    width: 100%;
    clear: both;
    bottom: 0;
    left: 0;
}

#sitewrap .popup-gutter {
    border: none;
}

/* apply changes to gutter styles in full screen popup mode */
.popup-gutter-fs {
	/* the top padding is to avoid badges being cut off by the overflow property on the .card element */
	padding-top:15px;
}

.popup-gutter-fs::after {
    display: block;
    content: "";
    clear: both;
}

.popup-gutter-fs .popup-extra-btns {
	margin-top:0;
}

/* tabbed popup */
.tabbed-popup {
	border-bottom:1px solid #CDCDCD;
	position:relative;
}

.tabbed-popup:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}


.tabbed-popup-menu-button {
	box-shadow: 0 0 7px #999;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	background:#FFFFFF;
	position:absolute;
	text-align:center;
	line-height:40px;
	display:block;
	border:none;
	cursor:pointer;
	z-index:20;
	height:40px;
	width:40px;
	right:10px;
	top:10px;
}

.tabbed-popup-menu-button:hover,
.tabbed-popup-menu-button:focus {
	background:#FEFEFE;
	outline:none;
}

.tabbed-popup-menu-button:before {
	font-family:'fontawesome';
	content:"\f0c9";
	font-size:20px;
	display:block;	
}

.tabbed-popup-tabs {
	position:absolute;
	background:#FFFFFF;
	display:none;
	height:100%;
	z-index:15;
	left:0;
	top:0;
}

.tabbed-popup-overlay {
	background:rgba(0,0,0,.3);
	position:absolute;
	-webkit-user-select: none; /* Chrome all / Safari all */
	-moz-user-select: none; /* Firefox all */
	-ms-user-select: none; /* IE 10+ */
	-o-user-select: none;
	user-select: none;
	display:none;
	z-index:12;
	bottom:0;
	right:0;
	left:0;
	top:0;
}

.tabbed-popup-tabs,
.tabbed-popup-overlay {
	-webkit-transition:all .5s;
	-moz-transition:all .5s;
	-ms-transition:all .5s;
	transition:all .5s;
}

.Mobile.tabbed-popup-menu-open .tabbed-popup-tabs,
.Mobile.tabbed-popup-menu-open .tabbed-popup-overlay {
	display:block;
}
	
.tabbed-popup-content {
	min-height: 400px;
	padding:20px 0;
	width:100%;
}

.tabbed-popup-content > * {
	display:none;
}

.tabbed-popup-content > .active {
	display:block;
}

.tabbed-popup-nav {
	border-right: 1px solid #EFEFEF;
	list-style-type:none;
	padding:0;
	margin:0;
	width:100%;
}

.tabbed-popup-nav-sponsor {
	text-align:center;
}

.tabbed-popup-nav-sponsor img {
	max-width:85%;
}

.tabbed-popup-tab {
	border-bottom: 1px solid #EFEFEF;
}

.tabbed-popup-button {
	-webkit-transition:all .5s;
	-moz-transition:all .5s;
	-ms-transition:all .5s;
	transition:all .5s;
	-webkit-appearance: none;
	background:transparent;
	display:inline-block;
	position:relative;
	padding:12px 8px;
	text-align:left;
	border:none;
	width:100%;
}

.tabbed-popup-button.active,
.tabbed-popup-button:hover {
	border-left: 5px solid #89ca77;
	color:#89ca77;
}

.tabbed-popup-button:focus {
	outline:none;
}

.tabbed-popup-button-icon {
	display:inline-block;
	position:absolute;
	height:85%;
	right:3px;
	top:50%;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	transform:translateY(-50%);
}



@media (min-width: 768px) {
	
	#popup {
        padding-bottom: 60px;
    }
    
	.popuptools.centered.gutter-xl {
		margin: 0 90px;
	}
	
	.popuptools.centered.gutter-lg {
		margin: 0 75px;
	}
	
	/* menu element is removed and tabs a static on the popup */
	.tabbed-popup {
		border-bottom:1px solid #EFEFEF;
		width:100%;
	}
	
	.tabbed-popup-menu-button {
		display:none;
	}

	.tabbed-popup-tabs,
	.tabbed-popup-content {
		
		position:static;
		display:block;
		width:280px;
		height:auto;
		float:left;
	}
	
	.tabbed-popup-content {
		width: -webkit-calc(100% - 282px);
		width: -moz-calc(100% - 282px);
		width: -ms-calc(100% - 282px);
		width: calc(100% - 282px);
		padding:20px 15px;
	}
}

@media (min-width: 1025px) {
    
    #popup {
	    -webkit-border-radius: 5px;
	    -moz-border-radius: 5px;
	    border-radius: 5px;
        max-height: 90%;
        width: auto;
        left: 50%;
        top: 50%;
        padding-bottom: 0;
        height: 650px;
        -webkit-transform:translate(-50%, -50%);
        -moz-transform:translate(-50%, -50%);
        -ms-transform:translate(-50%, -50%);
        transform:translate(-50%, -50%);
    }
    
    #popup .container {
        width: 960px;
    }
    
}


.btn-input{
	color: black;
	padding: 4px 3px;
	border: 2px solid gray;
	border-radius: 5px;
	font-size: 14px;
}

.form-btn{
	display: inline-block;
	font-size: 18px;
}


/* 
==================================================
Social media icons
==================================================
*/

.socialmedia {
	display:inline-block;
	text-align:left;
	font-size: 42px;
	line-height:1;
}

.socialmedia a {
	display:inline-block;
    margin-right: 5px;
    line-height:1;
}

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

/* Remove the right marging on the last icon */
.socialmedia a:last-child {
    margin-right: 0;
}

.socialmedia .socialicon-website {
	margin-left: -3px;
    top: -2px;
}

/*
	The website icon is actually two icons stacked on top of one another.  The base icon is just a colored 
	circle and the overlay is the link icon.  The link icon color needs to match the color of the background 
	behind the circle to make them appear as one icon where the link area is transparent
*/
.socialmedia .socialicon-website .fa-circle {
	font-size: 37px;
}

.socialmedia .socialicon-website .fa-link {
	color: #FFF; 
}

/* In the footer, the icons are centered on their own line in the footer */
footer .socialmedia {
	text-align: center;
    margin: 0 auto;
}

footer .socialmedia a {
	color: white;
}

footer .socialmedia a:hover {
	opacity: 0.7;
}

/* On tablet sized devices and up the icons move to be aligned against the right side of the footer */
@media (min-width: 768px) {

	footer .socialmedia {
	    margin-top: 5px;
	}

}

/*
	In the popup gutter we need to mimic the link color as though the link was a transparent part of the underlying circle icon
*/
.popup-gutter .socialmedia .socialicon-website .fa-link {
	color: #d2d2d2; 
}


/*
	Adjust the font sizes to be smaller in the left nav
*/
#leftnav .socialmedia {
    font-size: 35px;
}

#leftnav .socialmedia .socialicon-website .fa-circle {
	font-size:32px;
}


/* 
==================================================
Search container
==================================================
*/

/* search container */
.search-wrap {
    position: relative;
    overflow: hidden;
}

.globalSearch {
    text-indent: 0px !important;
    font-size: 13px;
    height: 26px;
}

/* search icon */
.search-wrap .fa-search {
    position: absolute;
    font-size: 14px;
    color: #9F9999;
    left: 25px;
    top: 10px;
    z-index:1;
}

/* 
	We had to add this because someone used the search wrap class on a bootstrap column.  
	Columns should be used as a layout class and not combined with other classes.  
	This caused the absolutely positioned icon to be different based on the situation 
*/
.search-wrap:not([class*="col-"]) .fa-search {
	left: 10px;
}

/* optional search input label */
.search-wrap label {
    font-weight: normal;
    max-width: none;
    display: block
}

/* search input */
.search-wrap .form-control {
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
    text-indent: 18px;
}

/* search cancel button */
.search-wrap .fa-times-circle {
    position: absolute;
    font-size: 24px;
    right: -26px;
    top: 5px;
    color: #B3B3B3;
    cursor: pointer;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.search-wrap .searchbtn {
    position: absolute;
    top: 50%;
    right: 3px;
    padding: 4px 12px;
    border-radius: 50px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.globalSearchbtn {
    height: 22px;
    line-height: initial;
}


/* 
==================================================
Alphbet nav
==================================================
*/

/* Jump to leetter in the alphabet */

.alphaList {
    padding: 0 10px;
}

/* on mobile we fit 10 letters on a line before breaking */
.alphaList li {
    display: inline-block;
    margin-bottom: 10px;
    text-align: center;
    list-style: none;
    font-size: 16px;
    float: left;
    width: 7.1428%;
}

.alphaList a {
    display: block;
    padding: 5px 0;
}

/* Add a background fill to the active character */
.alphaList a.active {
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
    background: #0086BF;
    color: white;
    
}

/* Begin alphabet bar on table size and up */
@media (min-width: 768px) {

	/* Adjust. the characters so they fit on 1 line (1/28 - 26 letters plus all and #)  */
    .alphaList li {
        width: 3.57%;
    }
    
}

/* 
==================================================
Back to top button
==================================================
*/

.backtotop {
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	border: 2px solid #5a5a5a;
	background:#FFFFFF;
	text-align: center;
    font-size: 16px;
    position: fixed;
    padding: 10px 15px;
    display: none;
    bottom: 80px;
    right: 15px;
    color: white !important;
    margin: 0;
    z-index: 1000;
}

.backtotop .container {
	width:100% !important;
	padding: 0 !important;
	margin:0 !important;
}

.backtotop a,
.backtotop a:hover,
.backtotop a:focus {
    color: #5a5a5a;
}

/* Begin back to top button on table size and up */
@media (min-width: 768px) {   
	
    .backtotop {
        font-size: 18px;
        bottom:65px
    }
    
}



/* 
==================================================
List View
==================================================
*/

.content-wrap.list-view-corrected {
	/* We use this class to correct a lot of compounded style issues we have on the list view for websites */
}

.content-wrap.list-view-corrected .list-group-item .row {
	margin-right: -7.5px;
	margin-left: -7.5px
}

.content-wrap.list-view-corrected .list-group-item .row [class^="col"] {
	padding-left: 7.5px; 
	padding-right: 7.5px;
}


/* List */
.list-view {
    list-style: none;
}

.list-view .heading {
    list-style: none;
}

.list-view .heading h2 {
    padding: 10px 15px;
    font-size: 24px;
    margin: 0;
}

.list-view .companylogo {
    margin-top: 10px;
}

/* List Bucket */

.list-view .list-group-item.bucket {
    min-height: 0;
    padding-right:35px;
}

.list-view .list-group-item.bucket .arrow {
    position: absolute;
    right: 7px;
    color: #BFBFBF;
    font-size: 28px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.list-view li.bucket[data-showhide="show"] .arrow {
    -webkit-transform: rotate(180deg) translateY(50%);
    -moz-transform: rotate(180deg) translateY(50%);
    -ms-transform: rotate(180deg) translateY(50%);
    transform: rotate(180deg) translateY(50%);
}

.list-view .list-group-item:hover,
.list-view li.bucket[data-showhide="show"] {
    text-decoration: none;
    background: rgba(0, 0, 0, 0.1);
}

.bucketwrapper {
    border-left: 4px solid #ddd;
}

/* List item */

.list-group-item {
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    overflow: hidden;
    padding: 10px 0;
    cursor: pointer;
    clear: both;
}

.list-view-corrected .list-group-item {
	padding:10px 15px;
}

.list-view-corrected .media-left {
	padding-right:15px;
}

.list-group-item.nopopup {
    cursor: default;
}

.list-group-item.nopopup a {
    cursor: default;
    color: #5a5a5a;
}

.list-group-item.nopopup a:hover {
    text-decoration: none;
}

.list-group-item .list-item-link {
    color: #5a5a5a;
    display: block;
    padding: 15px;
}

.list-view.with-photo .list-group-item .list-item-link {
    padding: 5px 15px             
}

#popupContent .list-group-item {
    padding: 10px;
}


/* List item photos */

.list-view.with-photo .photo-adjust {
    display: inline-block;
    margin: 3px 0 2px 0;
}

.list-view.with-photo .photo-adjust.no-second-line {
    margin-top: 20px;
}

.list-view.with-photo .nophotorow .photo-adjust.no-second-line {
    margin-top: 0;
}


/* List tools wrap AKA Icon wrapper for favorites and other actions */

.list-view.with-photo .list-group-item .list-tools-wrap {
    margin-top: 20px;
}

.list-view.with-photo .nophotorow .list-tools-wrap {
    margin-top: 0;
}

.list-tools-wrap span {
    font-size: 26px;
    color: #ABABAB;
    float: right;
    cursor: pointer;
    line-height: 1;
    margin-left: 9px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.list-tools-wrap span:hover {
    color: #847D7D;
}

.list-tools-wrap span.inactive {
    visibility: hidden;
}

@media (min-width: 768px) {

    .list-group-item .scheduleNotes .savenote {
        margin-top: 0;
    }

    .list-tools-wrap {
        margin: 0;
    }
    
    .content-wrap:not(.list-view-corrected) .list-tools-wrap {
		padding: 0 10px 0 0;
	}
	    
    
    .list-tools-wrap .fa-file-text {
        font-size: 21px;
        margin-top: 2px;
    }
    
    .list-tools-wrap .fa-volume-up {
        font-size: 27px;
        margin-top: -1px;
    }
    
    .list-tools-wrap .fa-video-camera {
        font-size: 24px;
    }
    
    .list-tools-wrap .glyphicon-film {
        font-size: 21px;
    }
    
    .list-tools-wrap .glyphicon-facetime-video {
        font-size: 23px;
    }
    
    .list-tools-wrap .fa-sticky-note {
        font-size: 24px;
    }
    
    .list-tools-wrap span.socialsymbol {
        font-size: 29px;
        margin-top: -2px;
    }

 
}

@media (min-width: 960px) {

    .list-group-item,
    #popupContent .list-group-item {
        padding: 15px;
    }
    
    .list-tools-wrap {
        margin: 0;
    }
    
    .content-wrap:not(.list-view-corrected) .list-view .list-tools-wrap {
        padding: 0;
    }
}

@media (min-width: 1025px) {

	.list-group-item {
        font-size: 16px;
    }
    
    /* list view with photo */
    .list-view.with-photo .photo-adjust {
        display: inline-block;
        margin: 9px 0 2px 0;
    }
    
    .list-view.with-photo .photo-adjust.no-second-line {
        margin-top: 30px;
    }
    
    .list-view.with-photo .nophotorow .photo-adjust.no-second-line {
        margin-top: 0;
    }

}

/* 
==================================================
Text Bubbles (Course name, track names, etc...)
==================================================
*/

.text-bubble {
	-webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    display: inline-block;
    padding: 2px 8px;
    margin-right:5px;
    font-size: 14px;
}
    
    
















.personalnote {
    background: #FFFFCD;
}

.scheduleNotes label {
    display: block;
    margin-left: 15px;
}

.scheduleNotes {
    display: none;
}

.scheduleNotes .savenote {
    margin-top: 5px;
}

.hasNotes {
    color: #009EC8 !important;
}

.dayrow {
    font-size: 15px;
    padding: 5px 10px;
    color: white;
    margin: 0;
    background: #505050;
}

.suppersession-div {
    font-size: 15px;
    padding: 5px 10px;
    color: white;
    margin: 0;
    background: #8493A1;
}


img.lazy {
    opacity: 1;
    transition: opacity 0.3s;
}

img.lazy[data-src] {
    opacity: 0;
}



.margin-top-xs {
    margin-top: 15px
}

.margin-top-sm {
    margin-top: 0;
}

.margin-top-md {
    margin-top: 0;
}

.disableTextSelect{
	 -webkit-user-select: none; /* Chrome all / Safari all */
	-moz-user-select: none; /* Firefox all */
	-ms-user-select: none; /* IE 10+ */
	-o-user-select: none;
	user-select: none;
}

.noletter {
    color: #ABABAB;
    cursor: default;
    text-decoration: none !important;
}

.noletter:hover {
    color: #ABABAB;
    text-decoration: none;
}


.btn-dissmis {
    background: #838384;
    color: white;
    border-color: #838384;
}

.btn-dissmis:hover {
    background: #777777;
    color: white;
}

.btn-dissmis:focus {
    background: #6b6b6d;
    color: white;
}

.img-btn {
	padding:0 !important;
	overflow:hidden;
}

.btn-group .btn-primary,
.btn-group .btn-primary:hover {
    border: 1px solid #0087BD;
}

.fa-spinner {
    margin-left: 5px;
}


/* for jQuery validate plugin */

.form-group label.error {
    font-weight: 400;
    color: #D9534F;
}

.wysihtml5-sandbox {
    min-height: 250px;
    overflow: scroll;
}



.main-title {
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #8C8C8C;
    font-size: 20px;
    margin: 10px 2px 20px;
}

.innertracks {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    padding: 2px 8px;
    margin: 10px 2px 2px 2px;
    display: inline-block;
    font-size:14px;
}


/* NAVIGATION TABS */

.nav-tabs.nav-justified {
/*
	table-layout: fixed;
	display: table;
	width:100%;
*/
	margin-bottom:-1px;
	white-space:nowrap;
	overflow-y:hidden;
	overflow-x:auto;
}  

.nav-tabs.nav-justified>li {
/*
	vertical-align: bottom;
    display: table-cell;
    width: 100%;
*/
	display:inline-block;
	margin-bottom:0;
	width:auto;
}
    
.nav-tabs.nav-justified>li>a {
    border: 1px solid #ddd;
    border-bottom: none;
    margin: 0 0 0 0;
    border-radius: 0;
    padding: 15px 10px;
/*
    float: left;
    width: 25%;
*/
}

.nav-tabs.nav-justified>li.active>a {
    background-color: #eee;
    border-bottom-color: #fff;
}

.pres-tidbit.pull-left {
    float: none;
}





/* BUCKET PAGE SEARCH RESULTS STYLES */

#search-results-text {
    font-size: 24px;
    margin: 0;
}

#search-results-counter {
    margin-top: 10px;
    font-size: 14px;
}




/* FILTER FORM OVERRIDE STYLES */

.filterForm .form-group {
    margin-bottom: 12px;
}

.filterForm .form-control {
    line-height: 25px;
    height: 25px;
    font-size: 13px;
    padding: 0;
    margin-bottom: 12px;
}

.filterForm label {
    margin-bottom: 0;
    font-weight: 400;
}

#ars-content {
    overflow: hidden;
}


.spLogo {
    margin-right: 8px;
}

.soldouttext {
    color: #c0341c;
}

#popup .soldouttext {
    margin: 15px 0;
}



.presBadges img {
    margin: 8px 5px 0 0;
}

.sortheader {
    padding-left: 25px;
}

.sortheader span {
    display: block;
    font-weight: bold;
    text-transform: uppercase;
}

.ratePosterStars {
    margin-top: -12px;
    margin-left: 6px;
    color: #FAA93D !important
}

.ratePosterStarsEmpty {
    margin-top: -12px;
    margin-left: 6px;
}

.ratePosterHeartPopup {
    border-style: none;
    font-size: 45px;
    padding: 6px;
    color: #FAA93D !important
}



/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */


/* Carousel base class */

.carousel {
    height: 500px;
    margin-bottom: 60px;
}




/* Since positioning the image, we need to help out the caption */

.carousel-caption {
    z-index: 10;
}

/* Declare heights because of positioning of img element */

.carousel .item {
    height: 500px;
    /*background-color: #777;*/
    overflow: hidden;
}

.carousel-inner .container:before {
    background: rgba(0, 0, 0, 0.50);
    /* 		content: "X"; */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.carousel-inner .imagewrap {
    width: 100%;
    height: 100%;
    background-size: cover;
}


/* 
	I had to override this because someone added generc 
	styles to all carousels which is causing a lot of 
	problems.  Always style classes or ids instead of 
	elements
*/
.carousel.normalize {
	margin-bottom:0px;
	height:auto;
}

.carousel.normalize .item {
	background-color:transparent;
	height:auto;
}

.carousel.fade {
     opacity: 1;
}

.carousel.fade .item {
    transition: opacity ease-out .7s;
    left: 0;
    opacity: 0; /* hide all slides */
    top: 0;
    position: absolute;
    width: 100%;
    display: block;
}
.carousel.fade .item:first-child {
    top: auto;
    opacity: 1; /* show first slide */
    position: relative;
}
.carousel.fade .item.active {
    opacity: 1;
}



/* CUSTOMIZE THE CONTENT
-------------------------------------------------- */


/* Center align the text within the three columns below the carousel */

.content-wrap .col-lg-3 {
    margin-bottom: 20px;
    text-align: center;
}

.content-wrap .col-lg-3 h2 {
    font-size: 20px;
}

.content-wrap h2 {
    font-weight: normal;
}

.content-wrap .col-lg-3 p {
    margin-right: 10px;
    margin-left: 10px;
}


.tags {
    display: inline-block;
    padding: 4px 10px;
    font-size: 14px;
    border-radius: 50px;
    margin: 0 6px 8px 0;
    background: #0087BD;
    color: #fff;
}

.tags:hover {
    text-decoration: none;
    color: #fff;
}

.SessionModerators {
    padding-top: 7px;
    font-size: 12px;
}


/* Featurettes
------------------------- */

.featurette {
    padding: 0;
    position: relative;
}


/* Thin out the content-wrap headings */

.featurette-heading {
    line-height: 1;
    letter-spacing: -1px;
}








.pushfor-detached-banner {
    z-index: 1;
}


.fa-stack {
    font-size: 0.49em;
    vertical-align: top;
}




.photo-wrapper-circle {
	position: relative;
	overflow: hidden;
	height: 65px;
	width: 65px;
	z-index: 1;  
}


.photo-wrapper,
.photo-wrapper-circle {
	border: 2px solid #a9a9a9;
    position: relative;
    overflow: hidden;
    height: 65px;
    width: 65px;
	z-index: 1; 
    /* for chrome bug in windows */
}

.photo-wrapper-circle {
	box-shadow: 0 0 5px 0 #999999;
	border: 4px solid #FFFFFF;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
}

.photo-wrapper.lg,
.photo-wrapper-circle.lg {
	height: 100px;
    width: 100px;
    
}

.photo-wrapper.full-size,
.photo-wrapper-circle.full-size {
	height: 150px;
    width: 150px;
    
}

.photo-wrapper.full-size .photo-init,
.photo-wrapper-circle.full-size .photo-init,
.photo-wrapper.full-size .presenterphoto-init {
    font-size: 25px;
}

.photo-wrapper img,
.photo-wrapper-circle img {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.photo-wrapper.no-photo {
    background: #a9a9a9;
    color: white;
}

.attendeeLocked {
    cursor: default !important;
}

.go-to-card .speaker-name {
    display: inline-block;
}

.speakers-wrap {
    margin: 20px 0;
    list-style: none;
    padding: 0;
}

.photo-wrap-holder {
    width: 150px;
}

.app-tile-img {
	border:1px solid #BBB;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
}

.speakerrow {
    margin-bottom: 10px;
    clear: both;
    overflow: hidden;
}

.speakerrow h4 {
    margin: 7px 0 5px 0;
    font-size: 16px;
}

.speakerrow .prof-text {
    font-size: 13px;
}

.speakerrow .speaker-name {
    font-size: 18px;
    font-weight: bold;
    margin: 9px 0 2px 0;
}

.speakerrow .speaker-name.no-prof-text {
    margin-top: 10px;
}

#popupContent h1 {
    font-size: 22px;
}

#popupContent .main-popup-content.light h1 {
    margin-bottom: 25px;
}

#popupContent .main-popup-content.light {
    color: #6f6f6f;
}

#popupContent .main-popup-content.light h4 {
    margin-top: 20px;
}

#popupContent .main-popup-content.light h4:first-child {
    margin-top: 10px;
}

.pres-tidbit {
    margin: 8px 20px 0 0;
    color: #494949;
}

.pres-tidbit i {
    font-size: 20px;
    margin-right: 3px;
}

.card {
	overflow-x:hidden;
	overflow-y:hidden;
    display: none;
    clear: both;
    z-index: 100;
}

.card,
.card:focus {
	outline:none;
}

body.singlepopup .card {
    margin-top: 0;
}

#sitewrap .card,
.card.current-card {
    display: block;
    height: inherit;
}

/* hide the popup header on our static pages */

#sitewrap .card .popupheader {
    display: none;
}

.popup-mode-line-item {
	margin-top:5px;
}

.popup-mode-line-item:first-child {
	margin-top:0;
}

.popup-mode-line-item,
.popupFullName,
.popupOrganization,
.presentersocialicons {
    text-align: center;
}

.popupmodeside .popup-mode-line-item,
.popupmodeside .popupFullName,
.popupmodeside .popupOrganization,
.popupmodeside .presentersocialicons,
.popupmodeside h1 {
    text-align: center;
}

.socialicons {
	margin-top:-10px;
	padding:0 8px;
}
.socialicons a,
.presentersocialicons a {
    font-size: 53px;
    margin-right: 3px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    line-height:1;
    margin-left:5px;  
}

.socialicons a:hover,
.presentersocialicons a:hover {
    text-decoration: none;
}

.presentersocialicons .fa-link {
    font-size: 29px;
    color: white;
    background: #51A3E2;
    border-radius: 50px;
    padding: 7px;
    margin: 0;
    line-height: 1;
    vertical-align: middle;
    margin-top: -19px;
}

.role-title {
    font-size: 18px;
    color: #5a5a5a;
}

#assets .btn span {
    margin-right: 5px;
}

#assets h2 {
    font-size: 20px;
}

.presenterphoto-init {
    left: 0;
    width: 100%;
    display: block;
}

.login-wrap {
    text-align: center;
}

.login-wrap h1 {
    padding: 0;
    margin: 0 0 10px 0;
    font-size: 25px;
}

body.login-page {
    background: #f1f1f1;
}

.login-wrap .panel {
    padding: 25px;
    margin: 0 0 10px 0;
}

.socia-logins {
    margin: 30px 0;
}

.btn-fb {
    background: #3B5897;
    color: white;
}

.btn-fb:hover {
    background: #3B5897;
    color: white;
    opacity: 0.8;
}

.btn-twitter {
    background: #5AAEEB;
    color: white;
}

.btn-twitter:hover {
    background: #5AAEEB;
    color: white;
    opacity: 0.8;
}

.btn-linkedin {
    background: #0177B5;
    color: white;
}

.btn-linkedin:hover {
    background: #0177B5;
    color: white;
    opacity: 0.8;
}

.line-or {
    position: relative;
}

.line-or:after {
    content: "OR";
    position: absolute;
    top: -10px;
    background: white;
    padding: 0 10px;
    margin-left: -20px;
    color: #999;
}

.popup-extra-btns {
	text-align: center;
    float: none !important;
}

.popup-extra-btns .btn {
    width: 100%;
    display: inline-block;
}

body.Mobile .popup-extra-btns .btn {
    margin-bottom: 5px;
}

.mobile-block-btn {
    width: 100%;
    display: block;
}

.btn.deadaccesslink {
    background: #C3C3C3;
    color: #696868;
    border: 1px solid #969696;
}

.btn.deadaccesslinkPoster {
    opacity: 0.5 !important;
}

.btn.deadaccesslinkPresentation {
    opacity: 0.5 !important;
}


/* ARS Full-width Popup
------------------------- */

#popup.ars-popup .card {
    padding:0;
}

#popup.ars-popup .main-popup-content {
    height: -webkit-calc(100% - 50px) !important;
    height: -moz-calc(100% - 50px) !important;
    height: -ms-calc(100% - 50px) !important;
    height: calc(100% - 50px) !important;
    overflow: hidden;
    padding: 0;
}

#ars-iframe {
    border: none;
    height: 100%;
    width: 100%;
}

.singlepopup #ars-iframe {
    min-height:600px;
}

@media (min-width: 1025px) {
    #popup.ars-popup .container {
        width: 800px;
    }
}


/* MESSAGE ALERT 
------------------------- */

#messege-alert {
    background-color: #000000;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    z-index: 9999999999;
    text-align: center;
    max-width: 450px;
    position: fixed;
    display: none;
    padding: 25px;
    color: #FFF;
    left: 50%;
    top: 35%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#messege-alert .messege-alert-icon span {
    font-size: 35px;
    margin-bottom: 15px;
}

#messege-alert .messege-alert-inner {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 10px;
}

#messege-alert .messege-alert-buttons a {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8e8e8e+0,757575+100 */
    background: #8e8e8e;
    /* Old browsers */
    background: -moz-linear-gradient(top, #8e8e8e 0%, #757575 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #8e8e8e 0%, #757575 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #8e8e8e 0%, #757575 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#8e8e8e', endColorstr='#757575', GradientType=0);
    /* IE6-9 */
    display: block;
    float: left;
    width: 100px;
    height: 30px;
    line-height: 30px;
    color: white;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 14px;
}

#messege-alert .messege-alert-buttons a:hover {
    text-decoration: none;
    opacity: 0.9;
}

#messege-alert .messege-alert-buttons a:first-child {
    margin-right: 5px;
}

#messege-alert .messege-alert-noBtn {
    margin-right: 5px;
}

#messege-alert .messege-alert-buttons {
    clear: both;
    overflow: hidden;
    margin: 0 auto;
    padding: 5px 0;
}

#messege-alert .messege-alert-buttons a.messege-alert-yesbtn {
    background: #5cb85c;
    border-color: #4cae4c;
}

#messege-alert .messege-alert-buttons a.messege-alert-yesbtn:hover {}

.legend {
    margin-top: 15px;
}

.legend-heading {
    font-weight: bold;
    color: #A2A2A2;
    font-size: 12px;
    margin: -10px 0 15px 20px;
}

.legend .row {
    margin: 10px 0 15px 0;
}

.legend .legend-icon {
    font-size: 25px;
}

.legend .legend-desc {
    font-size: 12px;
}

.appicon {
    border-radius: 10px;
    border: 1px solid #ddd;
}

/* CHAT */

.pull-left .chatInfo,
.chatBubble.pull-left {
    border-top-right-radius: 9px;
}

.pull-right .chatInfo,
.chatBubble.pull-right {
    border-top-left-radius: 9px;
}

#chatWrapper {
    padding-top: 10px;
    padding-bottom: 60px;
}

.chatInfo {
    background: #51A3E2 !important;
    color: white;
    padding: 6px;
    font-size: 12px;
}

.chatArea {
    clear: both;
    overflow: hidden;
    margin: 0 15px 10px 15px;
    padding-bottom: 7px;
}

.chatArea .photo-wrapper {
    width: 65px;
    height: 65px;
}

.chatBubble {
    background: rgb(229, 229, 229) !important;
    color: black;
    max-width: 400px;
    border-left: 1px solid rgb(154, 154, 154);
    border-right: 1px solid rgb(154, 154, 154);
    border-bottom: 1px solid rgb(154, 154, 154);
    padding: 0px;
    word-break: break-word;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.chatBubble.pull-left:before {
    content: "";
    position: absolute;
    top: 8px;
    left: -23px;
    border-width: 14px 16px 0px;
    border-style: solid;
    display: block;
    width: 0;
    border-color: #51A3E2 transparent;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.chatBubble.pull-right:before {
    content: "";
    position: absolute;
    top: 7px;
    right: -22px;
    border-width: 15px 16px 0px;
    border-style: solid;
    display: block;
    width: 0;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    border-color: #51A3E2 transparent;
}

.chatMsg {
    padding: 5px 13px 11px 13px;
    font-size: 16px;
    text-align: left;
    white-space: pre-line;
}





input[type="submit"]::placeholder {
    /* Firefox, Chrome, Opera */
    text-align: left;
    color: pink;
}

.numberCircle {
    border-radius: 50% !important;
    behavior: url(PIE.htc);
    width: 18px !important;
    height: 18px !important;
    background: red !important;
    border: 2px solid red !important;
    color: white !important;
    text-align: center !important;
    position: absolute !important;
    font-size: 12px !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    right: -7px;
    top: -3px;
    font-weight: bolder !important
}

.numberCircle.onNav {
    right: 30px;
    top: 2px;
}


#mobilenav .navmenu-nav {
    margin-top: 10px;
}

#mobilenav .dropdown-menu,
#leftnav.collapseMode .dropdown-menu {
    position: static;
    width: 100%;
    border: none;
    background: transparent;
    box-shadow: none;
    float: none;
    padding-left: 15px;
}

#mobilenav li a {
    padding: 15px 30px;
    position: relative;
}

#mobilenav .fa-chevron-right,
.has-submenu .fa-chevron-right,
#leftnav.collapseMode .fa-chevron-right {
    right: 16px;
    font-size: 12px;
    transition: transform 0.2s;
}

#mobilenav .openmenu .fa-chevron-right,
#leftnav.collapseMode .openmenu .fa-chevron-right {
    -webkit-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
}


/* 
	---------------------------------------------------------------------------------
	TABLETS 
	---------------------------------------------------------------------------------
*/

@media (min-width: 768px) {

    .margin-top-xs {
        margin-top: 0;
    }
    .margin-top-sm {
        margin-top: 15px;
    }
    .margin-top-md {
        margin-top: 0;
    }
    .main-title {
        font-size: 30px;
    }
    .pres-tidbit.pull-left {
        float: left;
    }

    .dropdown-menu>li>a {
        padding: 10px 20px;
    }

    body.banner-fixed.belowBanner.Tablet .navbar-fixed-top {
        top: 90px;
    }

    /* CUSTOMIZE THE CONTENT TABLETS
------------------------- */
    /* Bump up size of carousel content */
    .carousel-caption p {
        margin-bottom: 20px;
        font-size: 21px;
        line-height: 1.4;
    }
    .featurette-heading {
        font-size: 38px;
    }

    /* NAVIGATION TABS */
    .nav-tabs.nav-justified>li>a {
        border: none;
        border-bottom: 1px solid #DDD;
        border-radius: 4px 4px 0 0;
        width: auto;
        float: none;
    }
    .nav-tabs.nav-justified>li.active>a {
        background-color: transparent;
    }
    /* we only do this on tablets and up */
    .no-border-top {
        border-top: none !important;
    }

    /* 	POPUP TABLET */
    .card {
	    padding-bottom: 75px;
	}
	.popuptools {
		padding:0 15px;
	}
    .popuptools li a {
        display: block;
        text-align: center;
        font-size: 28px;
        margin-right:25px;
        text-decoration: none;
    }
    .popuptools li .fa {
        vertical-align: middle;
    }
    .popuptools li .icon-text,
    .popuptools li .icon-text-text {
        display:inline;
    }
    .icon-text:before {
        content: "" !important;
    }

    .popuptools li .icon-textExpo {
        font-size: 18px !important;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important;
        top:-1px;
    }
    .popuptools li .icon-textPresentations {
        font-size: 18px !important;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important;
        top:-1px;
    }
    .popuptools li .icon-textPresenter {
        font-size: 18px !important;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important;
        top:-1px;
    }
    .popuptools li .icon-textPoster {
        font-size: 18px !important;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important;
        top:-1px;
    }

    .popuptools .fa-envelope {
        font-size: 23px;
    }
    .popuptools .fa-thumbs-up {
        font-size: 26px;
    }
    .popuptools .fa-star {
        font-size: 27px;
    }
    .popuptools .fa-facebook-square,
    .popuptools .fa-twitter-square {
        font-size: 25px;
    }
    .fa-sticky-note {
        font-size: 23px;
    }
    .popup-gutter {
        position: absolute;
        border-top: 1px solid #eee;
        background: #cacaca;
        height: 76px;
        z-index: 1000;
        /*
		background: -moz-linear-gradient(top, #cacaca 0%, #a8a8a8 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cacaca), color-stop(100%,#a8a8a8));
		background: -webkit-linear-gradient(top, #cacaca 0%,#a8a8a8 100%);
		background: -o-linear-gradient(top, #cacaca 0%,#a8a8a8 100%);
		background: -ms-linear-gradient(top, #cacaca 0%,#a8a8a8 100%);
		background: linear-gradient(top, #cacaca 0%,#a8a8a8 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cacaca', endColorstr='#a8a8a8',GradientType=0 );
	*/
    }
    .popuptools .badge {
        left: 16px;
    }
    #sitewrap .popup-gutter {
        position: static;
        background: transparent;
        border-top: none;
        height: auto;
    }
    .popup-gutter .popup-gutter-metadata {
	    line-height: 44px;
        font-size: 20px;
        margin: 0 !important;
        padding: 0;
    }
    #sitewrap .popup-gutter .popup-gutter-metadata {
        font-size: 18px;
        color: #777;
        margin: 0;
    }
    .popup-extra-btns {
        float: right !important;
        margin-top: -4px;
    }
    
    .popup-extra-btns.pull-left {
        float: left !important;
    }
    
    .popup-extra-btns .btn {
	    display: inline-block;
	    margin-right:10px;
        width: auto;
    }
    
    .popup-extra-btns .btn:last-child {
	    margin-right:0;
    }
    
    .mobile-block-btn {
        width: auto;
        display: inline-block;
    }
    .question {
        font-size: 18px;
    }
    /* 	LOGIN */
    .login-wrap {
        max-width: 500px;
        margin: 0 auto;
    }
    .chatArea .photo-wrapper {
        width: 85px;
        height: 85px;
    }
 
}


/* LANDSCAPE TABLETS */

@media (min-width: 960px) {
    .margin-top-xs {
        margin-top: 0;
    }
    .margin-top-sm {
        margin-top: 0;
    }
    .margin-top-md {
        margin-top: 15px;
    }

    body.HasLeftNav.HasRightAd .content-wrap {
        width: 800px;
        float: left;
    }

    #appSideBanner {
        width: 160px;
        margin-bottom: 60px;
        border: 2px solid #D6D4D5;
        border-radius: 6px;
        padding: 10px;
        padding-top: 0;
        text-align: center;
    }
    #appSideBanner h3 {
        font-size: 13px;
        letter-spacing: 1px;
        text-align: center;
        margin: 10px 0;
    }
    #appSideBanner .apptext {
        font-size: 12px;
        line-height: 18px;
    }
    #appSideBanner #icon {
        margin: 15px auto;
        border: 1px solid #E4E4E4;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
    }
    #appSideBanner #sendSMS {
        margin: 15px 0;
    }
    #appSideBanner #sendSMS h4 {
        font-size: 12px;
    }
    #appSideBanner #sendSMS #PhoneNumber {
        width: 128px;
        margin: 5px 0 11px 0;
        font-size: 12px;
    }
}


@media (min-width: 992px) {
	
	body.banner-fixed.belowBanner.Tablet .navbar-fixed-top {
	    top: 116px;
	}
	
	.popupmodeside .popup-mode-line-item,
	.popupmodeside .popupFullName,
    .popupmodeside .popupOrganization,
    .popupmodeside .presentersocialicons,
    .popupmodeside h1 {
        text-align: left;
    }
	
}
	

/* DESKTOPS */

@media (min-width: 1025px) {
    
    .margin-top-xs {
        margin-top: 0;
    }
    .margin-top-sm {
        margin-top: 0;
    }
    .margin-top-md {
        margin-top: 15px;
    }

    /* CUSTOMIZE THE LEFT NAV DESKTOPS
------------------------- */

    #leftnav ul {
        width: 12em;
        /* fixed width only please - you can use the "subMenusMinWidth"/"subMenusMaxWidth" script options to override this if you like */
        z-index: 1050;
    }
    /* CUSTOMIZE THE CONTENT DESKTOPS
------------------------- */

    body.HasLeftNav .featurette .container {
        padding: 0 25px;
    }


    /* CUSTOMIZE THE POPUP DESKTOP
------------------------- */
    .photo-wrapper {
        width: 85px;
        height: 85px;
    }
    .photo-wrapper.full-size {
        width: 200px;
        height: 200px;
    }
    .photo-wrap-holder {
        width: 200px;
    }
    .photo-wrapper.full-size .presenterphoto-init {
        font-size: 25px;
    }
    #popupContent h1 {
        font-size: 30px;
    }
    .speakerrow h4 {
        margin: 15px 0 5px 0;
        font-size: 18px
    }
    .speakerrow .prof-text {
        font-size: 16px;
    }
    .speakerrow .speaker-name.no-prof-text {
        margin-top: 10px;
    }

    .chatArea .photo-wrapper {
        width: 100px;
        height: 100px;
    }
}



/* this stuff is for the top nav bar. we want it to collapse sooner  */

@media (min-width: 768px) and (max-width: 1024px) {

    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse,
    .navbar-toggle {
        display: block !important;
    }
    .navbar-header {
        float: none;
    }
    .navbar-header {
        float: none;
    }
    .navbar-left,
    .navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in {
        display: block !important;
    }
    .navbar-fixed-bottom .navbar-collapse,
    .navbar-fixed-top .navbar-collapse {
        max-height: none;
    }
    .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .navbar-nav.sm-collapsible .caret,
    .navbar-nav.sm-collapsible ul .caret {
        top: 10px;
    }
}


/* HELPER CLASSES
------------------------- */

input.form-control.hasValue,
select.form-control.hasValue,
textarea.form-control.hasValue {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 4px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 4px rgba(102, 175, 233, .6);
    border-color: #66afe9;
    outline: 0;
}

.no-margin {
    margin: 0;
}

.rounded {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.rounded-sm {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.rounded-lg {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

/* only for screen readers */

.offscreen {
    position: absolute;
    left: -9999999999px;
}

pre {
	background:transparent;
	font-family:inherit;
	line-height:inherit;
	font-size:inherit;
	color:inherit;
	border-radius:0;
	border:none;
	padding:0;
	margin:0;
	white-space:pre-line;
	word-break: break-word;
    word-wrap: break-word;
}
}
.relative {
    position: relative;
}

.clear {
    display: block;
    height: 1px;
    clear: both;
    overflow: hidden;
}

.no-style {
    list-style: none;
}

.hcenter {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.vcenter {
    text-align: center;
    margin: 0 auto;
}

.thin {
    font-weight: 300 !important;
}

.bold {
    font-weight: 800 !important;
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

.centered {
    margin: 0 auto;
    float: none;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.mar-no {
    margin: 0;
}

.mar-all {
    margin: 15px;
}

.mar-ver {
    margin-bottom: 15px;
    margin-top: 15px;
}

.mar-ver-sm {
    margin-bottom: 8px;
    margin-top: 8px;
}

.mar-hor {
    margin-right: 15px;
    margin-left: 15px;
}

.mar-top {
    margin-top: 15px;
}

.mar-btm {
    margin-bottom: 15px;
}

.mar-btm-no {
    margin-bottom: 0;
}

.mar-lft {
    margin-left: 15px;
}

.mar-lft-sm {
    margin-left: 8px;
}

.mar-lft-xs {
    margin-left: 4px;
}

.mar-rgt-no {
    margin-right: 0px;
}

.mar-rgt {
    margin-right: 15px;
}

.mar-rgt-sm {
    margin-right: 8px;
}

.mar-rgt-xs {
    margin-right: 4px;
}

.pad-no {
    padding: 0;
}

.pad-all {
    padding: 15px;
}

.pad-ver {
    padding-bottom: 15px;
    padding-top: 15px;
}

.pad-hor {
    padding-right: 15px;
    padding-left: 15px;
}

.pad-top {
    padding-top: 15px;
}

.pad-btm {
    padding-bottom: 15px;
}

.pad-left,
.pad-lft {
    padding-left: 15px;
}

.pad-left-sm,
.pad-lft-sm {
    padding-left: 8px !important;
}

.pad-lft-lg,
.pad-left-lg {
    padding-left: 25px !important;
}

.pad-right-no,
.pad-rgt-no {
    padding-right: 0px;
}

.pad-right,
.pad-rgt {
    padding-right: 15px;
}

.pad-rgt-lg,
.pad-right-lg {
    padding-right: 25px !important;
}

.pad-rgt-sm,
.pad-right-sm {
    padding-right: 8px !important;
}

.text-sm {
    font-size: .85em;
}

.text-md {
    font-size: 1em;
}

.text-lg {
    font-size: 1.2em;
}

.text-xl {
    font-size: 1.5em;
}

.text-2x {
    font-size: 2em;
}

.noSpaceString {
	white-space: pre-line;
	word-break: break-all;	
}

label.error {
    color: red;
    font-size: 12px;
    font-style: normal;
    border: none !important;
}

.spWrap {
    margin-top: 5px;
}

.spLogoWrap {
    margin-top: 5px;
}

#main-banner>.container-fluid {
    margin-right: auto !important;
    margin-left: auto !important;
    /*max-width: 1700px !important;*/
    padding-right: 0 !important;
    padding-left: 0 !important;
}

#main-banner>.container-fluid>.row {
    margin: auto !important;
}