/*

  	Theme Name: Arts at ICC — Performing Arts Center (circa Summer 2016)
		Theme URI: https://icc.edu/arts or theartsaticc.com
		Description: Global CSS for the Arts at ICC — an update from the 3rd party web development, providing a fresh new look with an emphasis on event and fully responsive

		Author: ICC Web Services
		Version: 2.0
		
		
	 ››››››››››››››››››››››››››››››››››››››››  TABLE OF CONTENTS  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹
	 	all line numbers are estimates
		
		GLOBAL .................................................  
		 ANIMATIONS ............................................  
		HEADER .................................................  
		 MASTHEAD ..............................................  
		 MAIN ..................................................  
		 TINY ANIMATION ........................................  
		CONTENT ................................................  
		 HEADINGS ..............................................  
		 COLORS ................................................  
		 BACKDROP IMAGE ........................................  
		 EVENT NAV .............................................  
		COPY ...................................................  
		 BLOCKQUOTE (REGULAR and CALL-OUT) .....................  
		HOMEPAGE EVENT .........................................  
		THE EVENT CALENDAR OVERRIDE ............................  
		 MONTH DISPLAY OF EVENTS (MOBILE) ......................  
		 SINGLE EVENT ..........................................  
		 RELATED and NEXT/PREVIOUS EVENTS ......................  
		NEWS ...................................................  
		 NEWS EXCERPT ..........................................  
		 SINGLE NEWS ...........................................  
		GOOGLE SEARCH OVERRIDE .................................  
		FOOTER .................................................  
		 CALL-TO-ACTION BUTTONS ................................  
		 ICC IDENTITY ..........................................  
		
		PLUGIN OVERRIDES ......................................  
			VISUAL FORM BUILDER PRO ...........................  
		
		
			
*/

* {
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	word-wrap:break-word;
}

html {
	font-size:16px;
	height:100%;
	overflow-y:scroll;
	-moz-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	-o-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
}

body {
	background-color:#ffffff;
	font-family:"Open Sans",sans-serif;
	-webkit-font-smoothing:antialiased;
	font-size:0.875em;
	height:100%;
	line-height:1.5;
	margin:0 0 0 0;
}

#wpadminbar {
    position: fixed;
}

/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  GLOBAL  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */

nav ul {
	list-style:none;
	margin:0 0 0 0;
	padding:0 0 0 0;
}

nav ul a {
	text-decoration:none;
}

a {
	color:#21669c;
}
a:hover {
	color:#111111;
}

img {
	display:block;
	width:100%;
}

hr {
	border: none;
	border-top:5px solid #eeeeee;
	margin: 40px 0 40px 0;
}

.tribe-events-after-html {
	display:none;
}
 
.events-gridview .tribe-events-after-html {
	display:block;
}

.missing-page {
	text-align:center;
}

#global-alert {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100;
}

.logged-in #global-alert {
	top: 40px;
}

@media screen and (min-width:768px) {
	.logged-in #global-alert {
		top: 32px;
	}
}

/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  ANIMATIONS  

These animations create the movement of the event image on the homepage. The animation slides to show the right side of the image, fades to black, fades back in on the left side of the image and then comes to stop at it's original position. The animation is 10 seconds in total with the movement being 5 seconds then it holds for another 5 seconds before repeating.

The second set of animations is for the fade-in of the checkmark after an online form has been submitted.  */

@-moz-keyframes animatedBackground {
	0%		{opacity:1;}
	12.5%	{background-position:60% 0;opacity:1;}
	25%		{background-position:70% 0;opacity:1;}
	37.5%	{background-position:80% 0;opacity:0;}
	37.6%	{background-position:45% 0;opacity:0;}
	50%		{background-position:50% 0;opacity:1;}
	100%	{background-position:50% 0;opacity:1;}
}
@-webkit-keyframes animatedBackground {
	0%		{opacity:1;}
	12.5%	{background-position:60% 0;opacity:1;}
	25%		{background-position:70% 0;opacity:1;}
	37.5%	{background-position:80% 0;opacity:0;}
	37.6%	{background-position:45% 0;opacity:0;}
	50%		{background-position:50% 0;opacity:1;}
	100%	{background-position:50% 0;opacity:1;}
}
@keyframes animatedBackground {
	0%		{opacity:1;}
	12.5%	{background-position:60% 0;opacity:1;}
	25%		{background-position:70% 0;opacity:1;}
	37.5%	{background-position:80% 0;opacity:0;}
	37.6%	{background-position:45% 0;opacity:0;}
	50%		{background-position:50% 0;opacity:1;}
	100%	{background-position:50% 0;opacity:1;}
}

@keyframes fadein {
	from	{opacity:0;}
	to		{opacity:1;}
}
@-moz-keyframes fadein {
	from	{opacity:0;}
	to		{opacity:1;}
}
@-webkit-keyframes fadein {
	from	{opacity:0;}
	to		{opacity:1;}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  GLOBAL ALERT  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹

Our #global-alert goes across the top of every site displaying a critical alert that we can't afford for student, faculty or staff to miss.  */

/* red - alert */
#global-alert-red {
	background-color:#a93835;
}

/* yellow caution */
#global-alert {
	background-color:#ffd659;
}

#global-alert div,
#global-alert-red div {
	font-size:0.9em;
	margin:0 auto 0 auto;
	max-width:1280px;
	padding:10px 10px 10px 10px;
}

#global-alert div p,
#global-alert-red div p {
	color:#ffffff;
	margin:0 0 0 0;
}

/* for red alert */
#global-alert-red div p {
	color:#ffffff;
}

/* for yellow caution */
#global-alert div p {
	color:#252525;
}

/* for red alert */
#global-alert-red a {
	border-bottom:1px dotted;
	color:#ffd659;
}
#global-alert-red a:hover {
	color:#ffffff;
}

/* for yellow caution */
#global-alert a {
	border-bottom:1px dotted;
	color:#21669c;
}
#global-alert a:hover {
	color:#1B36B3;
}



/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  HEADER  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹

This header sticks to the top of everypage.  */

header {
	background-color:#ffffff;
	border-bottom:5px solid #000000;
	height:105px;
	top:0;
	width:100%;
	z-index:100;
}

#global-alert + header {
	margin-top: 55px;
}
.logged-in header {
	top:32px;
}
.logged-in #global-alert + header {
	top:45px;
}

header .layout-container {
	height:100px;
	padding:15px 0 15px 0;
}

#reflections {
	background-image:url(images/arts-header-bg.png);
	background-repeat:no-repeat;
	background-size: contain;
	height:100px;
	left:-100px;
	position:absolute;
	top:0;
	width:500px;
	z-index:-1;
}

header nav {
	height:100%;
}

header nav i:hover {
	color:#21669c;
	cursor:pointer;
}

@media screen and (min-width:768px) {
	#global-alert + header {
		margin-top: 40px;
	}
	.logged-in header {
		top:32px;
	}
	.logged-in #global-alert + header {
		top:32px;
	}
}

/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  MASTHEAD

In order to provide the animation of the masthead getting smaller once the user has scrolled down ~300px, there are two links for the masthead home button. They switch opacity to reveal one and hide the other.  */
#masthead {
	display:block;
	float:left;
	height:100%;
	margin:0 0 0 10px;
	position:relative;
	width:70%;
}

#masthead a {
	background-position:bottom left;
	background-repeat:no-repeat;
	background-size:contain;
	height:100%;
	left:0;
	position:absolute;
	top:0;
	width:100%;
}
#masthead a:first-of-type {
	background-image:url(images/arts-website-masthead-sm.png);
	opacity:0;
}
#masthead a:last-of-type {
	background-image:url(images/arts-website-masthead-lg.png);
	opacity:1;
}


@media screen and (min-width:768px) {
	header nav #masthead {
		width:40%;
	}
}


@media screen and (min-width:1024px) {
	header nav #masthead {
		width:25%;
	}
}

/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  Banner Image
Page is empty, we don't have any events to we added a banner image and text
	*/

	.arts-banner-image {
		padding: 0 20px 0 20px;
	}
	
	.arts-banner-image img {
		border-radius: 5px;
		margin: 0 auto;
		max-width: 100%;
		max-height: 400px;
		width: auto;
	}
	
	.arts-banner-image h2 {
		font-size: 2em;
		text-align: center;
	}
	
	.arts-banner-image p {
		color: #fff;
		font-size: 1.4rem !important;
		text-align: center;
	}
	

/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  MENU

The menu is rather long. After shrinking a single pixel after a typical laptop width (1024px), the menu goes to a mobile view.  */
#header-menu {
	height:100%;
	padding:50px 20px 0 80%;
}

#header-menu i {
	font-size: 1.3em;
}

#header-menu .fa-phone-square {
	color:#252525;
	opacity:1;
	position:absolute;
	top:25px;
	right:20px;
}

#header-menu .fa-bars {
	float:right;
}

#header-menu form input {
	border:1px solid #999999;
	-moz-border-radius:3px 3px 3px 3px;
	-webkit-border-radius:3px 3px 3px 3px;
	border-radius:3px 3px 3px 3px;
	height:23px;
	outline:none;
	padding:0 5px 0 5px;
	width:175px;
}

#header-menu ul {
	background-color:rgba(255,255,255,0.95);
	display:none;
	right:0;
	padding:0 10px 10px 10px;
	position:absolute;
	top:105px;
	width:100%;
}

header.tiny #header-menu ul {
	top: 55px;
}

#header-menu ul li a {
	border-bottom:2px solid rgba(0,0,0,0.1);
	color:#111111;
	display:block;
	font-size:85.7%;
	padding:10px 10px 7px 10px;
	text-align:center;
	text-transform:uppercase;
}
#header-menu ul li a:hover {
	color:#21669c;
}


@media screen and (min-width:768px) {
	#header-menu {
		padding-left:40%;
	}
	
	#header-menu .fa-phone-square {
		display:none;
	}
	
	#header-menu .fa-bars {
		margin:0 10px 0 0;
	}
	
	#header-menu ul {
		right:10px;
		width:40%;
	}

	
}


@media screen and (min-width:1024px) {
	#header-menu {
		padding:55px 0 0 30%;
	}
	
	#header-menu .fa-bars {
		display:none;
	}

	header.tiny #header-menu ul {
		top: 0;
	}
	
	#header-menu ul {
		display:block;
		float:right;
		position:relative;
		right:auto;
		top:auto;
		width:auto;
	}
	
	#header-menu ul li {
		float:left;
	}
	
	#header-menu ul li a {
		border:none;
		padding-bottom:0;
		padding-top:0;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  TINY ANIMATION  

After the user has scrolled ~300px, the sticky header at the top will strink down and take up less real estate. The header will return to it's orginial size once the user has scrolled back up to be within the top 300px.  */
header,
header .layout-container,
#reflections,
#masthead a,
#header-menu,
#header-menu .fa-phone-square,
#header-menu ul {
	transition:all 1s ease-in-out;
}

header.tiny {
	height:55px;
}

.tiny .layout-container {
	height:50px;
	padding:5px 0 5px 0;
}

.tiny #reflections {
	top:-50px;
}

#global-alert + .tiny #reflections {
	height: 50px;
	top: 0;
}

.tiny #masthead a:first-of-type {
	opacity:1;
}
/*
.tiny #masthead a:last-of-type {
	opacity:0;
}
*/

.tiny #header-menu {
	padding-top:12px;
}

.tiny #header-menu .fa-phone-square {
	margin-right: 50px;
	top: auto;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  CONTENT  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */
	
#content {
	overflow:auto;
	padding:50px 0 0 0;
	position:relative;
}
.home #content {
	background-color:#252525;
}

#content .layout-container {
	padding:120px 0 0 0;
}

.smaller {
	font-size:0.8em;
}

@media screen and (max-width:700px) {

	#global-alert ~ #content {
		padding:50px 0 0 0;
	}

	#content .layout-container {
		padding:100px 0 0 0;
	}
}



/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  HEADINGS  */
h1 {
	color:rgba(255, 255, 255, 0.8);
	font-size:3.5em;
	font-weight:400;
	text-shadow: rgb(53, 53, 53) 0px 0px 5px;
	line-height:1.2;
	margin:20px 0 20px 0;
	min-height:80px;
	text-align:right;
	width:100%;
}

h2,
.tribe-events-after-html h2,
h3 {
	color:#21669c;
	font-size:2em;
	font-weight:700;
	line-height:1.5;
	margin:30px 0 0 0;
}
h3 {
	color:#252525;
}

.home h2 {
	color:#ffffff;
	clear:both;
	font-size:1.1em;
	margin:0 0 0 0;
	padding:10px 10px 0 10px;
}

.home .arts-banner-image h2 {
	font-size: 2em;
}

h2.tribe-events-page-title {
	color:#111111;
	font-size:2.5em;
	font-weight:300;
	margin:0 0 20px 0;
}

blockquote h3 {
	margin-top:0;
}

.missing-page h3:before {
	color:#999999;
	content:"\f071";
	display:block;
	font-family:fontawesome;
	font-size:100px;
	/*margin:0 0 30px 0;*/
}

h4 {
	font-size: 1.5em;
	font-weight: 300;
	margin: 20px 0 0 0;
	text-transform: uppercase;
}

h6,
.tribe-events-after-html h6 {
	color:#666666;
	font-size:2em;
	font-weight:300;
	line-height:1.5;
	margin:10px 0 30px 0;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  COLORS  */
.blue {
	color:#21669c !important;
}

.yellow {
	color:#ffea1d !important;
}

.light-blue {
	color:#77b7e8 !important;
}

.dark-blue {
	color:#164569 !important;
}

.red {
	color:#a93835 !important;
}

.orange {
	color:#cf5217 !important;
}

.green {
	color:#1ba965 !important;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  BACKDROP IMAGE

Each Page's Featured Image becomes the backdrop-image for the page — excluding the homepage.  */
#backdrop-image {
	background-position:center top;
	background-repeat:no-repeat;
	background-size:cover;
	height:100%;
	max-height:850px;
	z-index:-1;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  EVENT NAV

The homepage's right-hand column of event types that are anchored down the page.  */
#event-menu {
	visibility:hidden;
}


@media screen and (min-width:700px) {
	#event-menu {
		background-color:#111111;
		-moz-border-radius:0 0 5px 5px;
		-ms-border-radius:0 0 5px 5px;
		-o-border-radius:0 0 5px 5px;
		-webkit-border-radius:0 0 5px 5px;
		border-radius:0 0 5px 5px;
		border-top:50px solid #000000;
		color:#ffffff;
		max-width:290px;
		min-height:480px;
		top:50px;
		visibility:visible;
		z-index:1;
	}

	#global-alert ~ #content #event-menu {
		top: 90px;
	}

	.logged-in #global-alert ~ #content #event-menu {
		top:150px;
	}
	
	#event-menu ul {
		list-style:none;
		margin:12px 0 12px 0;
		padding:0 0 0 0;
	}
	
	#event-menu ul li {
		border-bottom:1px solid #252525;
		border-bottom:1px solid rgba(255,255,255,0.1);
		line-height:1;
		margin:0 10px 0 10px;
		min-height:40px;
	}
	#event-menu ul li:last-of-type {
		border-bottom:none;
	}
	
	#event-menu ul li a {
		color:#ffffff;
		display:block;
		font-weight:600;
		min-height:40px;
		padding:13px 10px 13px 10px;
		text-decoration:none;
	}
	#event-menu ul li a:hover {
		color:#ffd659;
	}
}


@media screen and (min-width:700px) and (max-width:920px) {
	#event-menu ul li a {
		font-size:0.9em;
	}
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  COPY  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹

This creates the gradient white background for copy that goes over the backdrop-image.  */

#copy {
	background:#ffffff;
	background:-moz-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,1) 450px, rgba(255,255,255,1) 100%);
	background:-webkit-linear-gradient(top, rgba(255,255,255,0.8) 0%,rgba(255,255,255,1) 450px,rgba(255,255,255,1) 100%);
	background:linear-gradient(to bottom, rgba(255,255,255,0.8) 0%,rgba(255,255,255,1) 450px,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccffffff', endColorstr='#ffffff',GradientType=0 );
	-moz-border-radius:3px 3px 0 0;
	-webkit-border-radius:3px 3px 0 0;
	border-radius:3px 3px 0 0;
	font-size:1.1em;
	line-height:2;
	padding:10px 10px 10px 10px;
	
	min-height:450px;
}
.home #copy {
	background:none;
	color:#ffffff;
	padding-top:40px;
}


@media screen and (min-width:700px) {
	#copy {
		padding:20px 20px 40px 20px;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  BLOCKQUOTE (REGULAR and CALL-OUT and Notice)

Regular BLOCKQUOTE can be used anywhere to bring high emphasis to a portion of information. CALL-OUT should be mostly used for News posts. NOTICE is primarily for the end response of using an onine form.  */
#copy blockquote {
	border-bottom:1px solid #bbbbbb;
	border-top:1px solid #bbbbbb;
	font-weight:300;
	font-size:1.2em;
	line-height:2;
	margin:20px 0 20px 0;
	padding:25px 25px 25px 25px;
}

#copy blockquote p {
	margin:0 0 0 0;
}

#copy blockquote.call-out {
	border:none;
	font-size:1.2em;
	font-weight:600;
	margin:10px 20px 10px 20px;
	padding:5px 15px 0 35px;
	position:relative;
}

#copy blockquote.call-out:before,
#copy blockquote.call-out:after {
	color:#999999;
	font-family:FontAwesome;
	font-size:20px;
	position:absolute;
}
#copy blockquote.call-out:before {
	content:"\f10d";
	left:5px;
	top:0;
}
#copy blockquote.call-out:after {
	bottom:-2px;
	content:"\f10e";
	right:5px;
}

blockquote.notice {
	position:relative;
}

blockquote.notice h3,
blockquote.notice p {
	padding-left:100px;
}

blockquote.notice p:before {
	animation:fadein ease-in 1;
	-moz-animation:fadein ease-in 1;
	-webkit-animation:fadein ease-in 1;
	animation-duration:1.5s;
	-moz-animation-duration:1.5s;
	-webkit-animation-duration:1.5s;
	animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
	display:block;
	float:left;
	font-family:fontawesome;
	font-size:60px;
	left:30px;
	opacity:0;
	padding:0 0 0 5px;
	position:absolute;
	top:0;
}
blockquote.notice.checkmark p:before {
	color:#1ba965;
	content:"\f058";
}
blockquote.notice.exclamation p:before {
	color:#ffd659;
	content:"\f06a";
}


@media screen and (min-width:1024px) {
	#copy blockquote.call-out {
		float:left;
		width:25%;
	}
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  HOMEPAGE EVENT  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹

The display of upcoming events on the homepage.  */

.homepage-event {
	background-color:#111111;
	-moz-border-radius:5px 5px 5px 5px;
	-ms-border-radius:5px 5px 5px 5px;
	-o-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	height:375px;
	width: calc(100% - 20px) !important;
}

.homepage-event .background {
	background-position:50% 0;
    background-size: cover; /*noah*/
    background-repeat: no-repeat; /*noah*/
	-moz-border-radius:5px 5px 0px 0px;
	-ms-border-radius:5px 5px 0px 0px;
	-o-border-radius:5px 5px 0px 0px;
	-webkit-border-radius:5px 5px 0px 0px;
	border-radius:5px 5px 0px 0px;
/*	height:100%;*/
	height:200px; /*noah*/
	left:0;
	position:absolute;
	top:0;
	width:100%;
}

.homepage-event .background a {
	display:block;
	height:100%;
}

.homepage-event .event-details {
	background-color:rgba(17,17,17,0.8);
	-moz-border-radius:0 0 4px 4px;
	-ms-border-radius:0 0 4px 4px;
	-o-border-radius:0 0 4px 4px;
	-webkit-border-radius:0 0 4px 4px;
	border-radius:0 0 4px 4px;
	bottom:0;
	height: 100%;
	min-height:150px;
    max-height: 175px; /*noah*/
	padding-bottom:50px;
	position:absolute;
	width:100%;
}

.homepage-event .event-details .arts-event-title {
	font-size:171.4%;
	font-size:1.2em; /*noah*/
	font-weight:300;
	line-height:1.3;
}

.homepage-event .event-details .arts-event-title a {
	color:#ffffff;
	display:block;
	text-decoration:none;
}
.homepage-event .event-details .arts-event-title a:hover {
	color:#ffd659;
}

.homepage-event .event-details .arts-event-tickets {
	bottom:10px;
	font-size:0.6em;
	position: absolute;;
	text-transform:uppercase;
}

.homepage-event .event-details .arts-event-tickets span,
.homepage-event .event-details .arts-event-tickets a {
	float:left;
	margin:0 10px 5px 0;
	padding:2px 5px 2px 5px;
}
.homepage-event .event-details .arts-event-tickets span {
	border:1px solid #ffffff;
}
.homepage-event .event-details .arts-event-tickets a {
	border:1px solid #ffd659;
	color:#ffd659;
	text-decoration:none;
	transition:all 500ms linear;
}
.homepage-event .event-details .arts-event-tickets a:hover {
	border-color:#ffffff;
	color:#ffffff;
	transition:all 500ms linear;
}

@media screen and (min-width:700px) {

	.homepage-event {
		width: calc(50% - 20px) !important;
	}
/* 
	.homepage-event .event-details .arts-event-tickets { 
		position: absolute;
		bottom: 10px;
	} */

	.homepage-event .background {
		animation-name:animatedBackground;
		animation-duration:10s;
		animation-play-state:paused;
		animation-timing-function:linear;
		animation-iteration-count:infinite;
	}
	
	.homepage-event:hover .background {
		animation-play-state:running;
	}
}

@media screen and (min-width:800px) {
	.homepage-event {
		width: calc(33.333% - 20px) !important;
	}
}


@media screen and (min-width:700px) and (max-width:800px) {
	.homepage-event .event-details .arts-event-tickets {
		font-size:0.6em;
	}
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  THE EVENTS CALENDAR OVERRIDE  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */

.tribe-events-notices {
	background:none;
	background-color:#ffd659;
	border:none;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	color:#252525;
	line-height:1.2;
	margin:20px 0 20px 0;
	padding:8px 50px 8px 50px;
	text-align:center;
	text-shadow:none;
}

.tribe-events-month #tribe-events-header .tribe-events-sub-nav .tribe-events-nav-next a,
.tribe-events-month #tribe-events-header .tribe-events-sub-nav li {
   display: block;
}

.tribe-events-calendar thead th {
	background-color:#252525;
}

.tribe-events-calendar td div[id*=tribe-events-daynum-] {
	background-color:#eeeeee;
	color:#999999;
	height:22px;
	padding:4px 10px 4px 10px;
}

.tribe-events-calendar div[id*=tribe-events-daynum-] a {
	left:0;
	padding:4px 10px 4px 10px;
	position:absolute;
	top:0;
	width:100%;
}
.tribe-events-calendar div[id*=tribe-events-daynum-] a:hover {
	background-color:#252525;
	color:#ffd659;
}

.archive #tribe-events-footer .tribe-events-sub-nav {
	margin:0 0 40px 0;
	padding:0 10px 20px 10px;
}

.tribe-events-after-html ul {
	font-size:0.875em;
}

/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  MONTH DISPLAY OF EVENTS (MOBILE)  */
#copy h3.tribe-mobile-day-heading {
	border-bottom:5px solid #eeeeee;
	color:#999999;
	font-size:1.3em;
	padding:0 0 5px 0;
}

#tribe-mobile-container .type-tribe_events .tribe-event-date-start {
	font-size:0.9em;
}

#tribe-mobile-container .type-tribe_events .tribe-events-event-image {
	float:none;
	margin:0 0 0 0;
	width:100%;
}

.tribe-bar-filters,
#tribe-mobile-container .type-tribe_events .tribe-event-description,
#tribe-mobile-container .type-tribe_events .tribe-events-read-more {
	display:none;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  SINGLE EVENT  */
p#back-button {
	background-color:#eeeeee;
	-moz-border-radius:3px 3px 3px 3px;
	-webkit-border-radius:3px 3px 3px 3px;
	border-radius:3px 3px 3px 3px;
}

p#back-button a {
	display:block;
	font-size:0.8em;
	height:100%;
	padding:0 0 0 10px;
	text-transform:uppercase;
}
p#back-button a:hover {
	color:#252525;
}

p#back-button a i {
	padding:0 5px 0 0;
}

#event-title {
	font-size:2.35em;
	font-weight:700;
	line-height:1.2;
	text-align:right;
}

#event-date {
	color:#21669c;
	font-size:1.5em;
	font-weight:600;
	line-height:1.2;
	margin:10px 0 0 0;
	text-align:right;
}

#tickets-price {
	background-color:#252525;
	clear:both;
	color:#ffffff;
	font-size:0.9em;
	margin:20px 0 0 0;
	padding:10px 10px 10px 10px;
}

#tickets-price a {
	color:#ffd659;
	text-decoration:underline;
}
#tickets-price a:hover {
	color:#ffffff;
}

#tickets-price span {
	display:block;
}

#tickets-price i {
	padding:0 5px 0 0;
}

#copy #tribe-events .tribe-events-event-image img {
	width:100%;
}

#copy #tribe-events .tribe-events-cal-links {
	display:none;
}

.single-tribe_events .tribe-events-content {
	margin:20px 0 0 0;
	padding:0 10px 0 10px;
}

.single-tribe_events .tribe-events-event-meta {
	border:5px solid #eeeeee;
	margin:20px 0 0 0;
}

#copy #tribe-events .tribe-events-event-meta h3.tribe-events-single-section-title {
	margin:10px 0 0 0;
}


@media screen and (min-width:700px) {
	p#back-button {
		margin:5px 0 0 0;
	}
	
	#event-title,
	#event-date {
		padding:0 0 0 20%;
	}
	
	#tickets-price span {
		display:inline-block;
		padding:0 20px 0 0;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  RELATED and NEXT/PREVIOUS EVENTS  */
#copy #tribe-events h3.tribe-events-related-events-title {
	font-size:1.5em;
	margin-top:40px;
}

.tribe-events-single ul.tribe-related-events {
}

.tribe-events-single ul.tribe-related-events li {
	margin:0 0 10px 0;
	padding:0 0 0 0;
}

.tribe-events-single ul.tribe-related-events li .tribe-related-events-thumbnail {
	float:none;
	width:100%;
}

.tribe-events-single ul.tribe-related-events li .tribe-related-event-info {
	float:none;
	margin:5px 0 0 0;
	width:100%;
}

#copy #tribe-events h3.tribe-related-events-title {
	font-size:1.1em;
	font-weight:600;
	margin-top:0;
	width:100%;
}

#event-footer {
	border-top:5px solid #eeeeee;
	line-height:1.2;
	margin:20px 0 0 0;
	padding:20px 0 0 0;
}

#event-footer ul {
	list-style:none;
	margin:0 0 0 0;
	padding:0 0 0 0;
}

#event-footer ul li {
	margin:0 0 10px 0;
	width:100%;
}

#event-footer ul li a {
	background-color:#eeeeee;
	-moz-border-radius:3px 3px 3px 3px;
	-webkit-border-radius:3px 3px 3px 3px;
	border-radius:3px 3px 3px 3px;
	display:block;
	font-size:0.95em;
	font-weight:600;
	padding:10px 10px 10px 10px;
}


@media screen and (min-width:700px) {
	.tribe-events-single ul.tribe-related-events li {
		width:-webkit-calc(33.333% - 10px);
		width:calc(33.333% - 10px);
	}
	.tribe-events-single ul.tribe-related-events li:nth-of-type(2) {
		margin-left:10px;
		margin-right:10px;
	}
	
	#event-footer {
		padding-top:10px;
	}
	
	#event-footer ul li {
		float:left;
		width:50%;
	}
	#event-footer ul li:nth-of-type(2) {
		text-align:right;
	}
	
	#event-footer ul li a {
		background:none;
		border-radius:0 0 0 0;
		display:inline;
		padding-top:0;
	}
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  CONTACT  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */

.directory-listing {
	background:#ffffff;
	border:1px solid #dddddd;
	font-size:0.875em;
	line-height:1.5;
	margin:20px 0 20px 0;
	padding:4px 10px 4px 10px;
}

.directory-listing h2 {
	display:none;
}

.directory-listing div {
	position:relative;
	margin:0 0 0 0;
	padding:6px 0 6px 0;
}
.directory-listing div.office-name {
	margin:0 0 0 0;
	padding-bottom:0;
}

/*.directory-listing div.seat {
	font-style:italic;
	padding:0 0 12px 0;
}*/

.directory-listing .office-name {
	font-size:16px;
	font-weight:300;
}

.directory-listing p {
	font-size:12px;
	line-height:16px;
	margin:0 0 0 0;
	padding-left:20px;
}

/*.directory-listing .second-office {
	margin:10px 0 0 0;
}*/


/*  display email and webpage on same line  */
/*.directory-listing .email {
	float:left;
	margin-right:20px;
}
.directory-listing.board .email {
	float:none;
	margin-right:0;
}
.directory-listing .web-page {
	float:left;
}
.directory-listing .office,
.directory-listing .phone {
	clear:left;
}

.directory-listing .seasonal-hours {
	color:#cf5217;
}
.directory-listing.contact-info .seasonal-hours {
	color:#ffd659;
}*/


/* Icons */
.directory-listing div:before {
	color:#666666;
	font-family:fontawesome;
	position:absolute;
	top:5px;
}

.directory-listing .email:before {
	content:"\f0e0";
}
.directory-listing .office:before,
.directory-listing .location:before {
	content:"\f041";
	padding:0 0 0 2px;
}
.directory-listing .phone:before {
	content:"\f095";
	padding:0 0 0 1px;
}
.directory-listing .fax:before {
	content:"\f1ac";
}
.directory-listing .hours:before {
	content:"\f017";
}
.directory-listing .seasonal-hours:before {
	color:#cf5217;
	content:"\f06a";
}
.directory-listing.contact-info .seasonal-hours:before {
	color:#ffd659;
}


/*  Contact Information  */
/*.directory-listing.contact-info {
	border:1px solid #dddddd;
	clear:both;
	display:inline-block;
	margin:20px 0 0 0;
	padding:10px 10px 10px 10px;
	width:100%;
}*/


@media screen and (min-width:700px) {
	.directory-listing {
		width:40%;
	}
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  NEWS  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */

ul.display-posts-listing {
	list-style:none;
	margin:0 0 0 0;
	padding:0 0 0 0;
}

ul.display-posts-listing li.listing-item {
	border-bottom:5px solid #eeeeee;
	margin:0 0 10px 0;
	padding:0 0 20px 0;
}
ul.display-posts-listing li.listing-item:last-of-type {
	border:none;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  NEWS EXCERPT  */
ul.display-posts-listing li.listing-item img {
	width:100%;
}

ul.display-posts-listing li.listing-item a.title {
	display:block;
	font-size:1.3em;
	font-weight:600;
	line-height:1.2;
	padding:10px 0 10px 0;
	text-decoration:none;
}
ul.display-posts-listing li.listing-item a.title:hover {
	color:#111111;
}

ul.display-posts-listing li.listing-item .date {
	font-weight:300;
}

ul.display-posts-listing li.listing-item .excerpt a {
	border:1px solid #21669c;
	display:block;
	font-size:0.7em;
	font-weight:600;
	line-height:1;
	margin:10px 0 0 0;
	padding:8px 0 8px 0;
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
	width:100px;
}
ul.display-posts-listing li.listing-item .excerpt a:hover {
	border-color:#252525;
	color:#252525;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  SINGLE NEWS  */
.single-post #copy img.featured-image {
	width:100%;
}

.single-post #copy p:last-of-type {
	border-top:5px solid #eeeeee;
	margin-top:40px;
	padding:20px 0 0 0;
}
.single-post #copy blockquote p:last-of-type {
	border:none;
	margin-top:0;
	padding-top:0;
}

.single-post #copy p:last-of-type a {
	font-size:0.9em;
	font-weight:600;
	text-decoration:none;
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  GOOGLE SEARCH OVERRIDE  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */

.gsc-control-cse {
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
}

input.gsc-input {
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	padding:10px 10px 10px 10px !important;
}

input.gsc-search-button {
	-moz-appearance:none;
	-webkit-appearance:none;
	background-color:#21669c !important;
	border:none !important;
	-moz-border-radius:5px 5px 5px 5px !important;
	-webkit-border-radius:5px 5px 5px 5px !important;
	border-radius:5px 5px 5px 5px !important;
	height:40px !important;
	padding:10px 10px 10px 10px;
	text-transform:uppercase;
	width:100px;
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  VISUAL FORM BUILDER OVERRIDE  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */

.vgb-submit,
input[type="submit"].vfb-submit {
	background-color:#ffffff;
	border:1px solid #21669c;
	color:#21669c;
	cursor:pointer;
	font-size:0.875em;
	padding:10px 20px 10px 20px;
	text-transform:uppercase;
}
.vgb-submit:hover,
input[type="submit"].vfb-submit:hover {
	border-color:#111111;
	color:#111111;
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  FOOTER  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  */

footer {
	background-color:#ffffff;
	padding:10px 0 30px 0;
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  CALL-TO-ACTION BUTTONS

The five buttons at the bottom of the content which is the beginning of the footer.  */
#action-call div {
	background-color:#f7f7f7;
	-moz-border-radius:5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius:5px 5px 5px 5px;
	margin:10px 0 10px 0;
	padding:10px 10px 10px 10px;
}

#action-call a {
	color:#666666;
	display:block;
	height:100%;
	font-size:1.1em;
	font-weight:300;
	text-decoration:none;
	text-transform:uppercase;
}
#action-call a:hover {
	color:#21669c;
}

#action-call a i {
	font-size:1.5em;
	width:40px;
}
#action-call a:hover i {
	color:#21669c;
}


@media screen and (min-width:700px) {
	#action-call div {
		background:none;
		float:left;
		margin:0 5px 0 5px;
		text-align:center;
		width:-webkit-calc(20% - 10px);
		width:calc(20% - 10px);
	}
	
	#action-call a i {
		margin-bottom:5px;
		width:100%;
	}
}


@media screen and (min-width:701px) and (max-width:900px) {
	#action-call {
		width:100%;
	}
	
	#action-call a {
		font-size:0.9em;
	}
}


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  ICC IDENTITY  */
footer #footer-icc-identity {
	font-size:71.4%;
	padding:10px 0 0 0;
	text-align:center;
}

footer #footer-icc-identity a {
	color:#21669c;
	font-size:120%;
}

footer #footer-icc-identity #footer-logo {
	background-image:url(images/icc-footer-logo-aaaaaa.png);
	background-position:center top;
	background-repeat:no-repeat;
	background-size:contain;
	height:125px;
	margin-bottom:35px;
}

footer #footer-icc-identity h2 {
	color:#666666;
	font-size:1.85em;
	font-weight:300;
	line-height:1.3;
	margin:0 0 30px 0;
	text-align:center;
}

footer #footer-icc-identity h2 strong {
	font-size:1.2em;
	font-weight:600;
}


@media screen and (min-width:700px) {
	footer #footer-icc-identity {
		text-align:left;
	}
	
	footer #footer-icc-identity h2 {
		text-align:left;
	}
}




/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  PLUGIN OVERRIDES  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹  ‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹‹ */


/*  ››››››››››››››››››››››››››››››››››››››››
    ››››››››››››››››››››››››››››››››››››››››  VISUAL FORM BUILDER PRO

The plan is to, eventually, move all forms to have this look 'n feel but, for now, just calling out this form.  */

.vfbp-form {
	/*background: linear-gradient(#e0e0e0,#efefef);*/
	background-color: #21669c;
	border-radius: 5px 5px 5px 5px;
	padding: 20px 20px 20px 20px;
	color: #ffffff;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.vfbp-form > div {
	background-color: rgba(255,255,255,0.2);
	border-radius: 5px 5px 5px 5px;
	padding: 5px 5px 5px 5px;
}

.vfbp-form .vfb-required-asterisk {
	color: #ffd659;
}


@media screen and (min-width: 1024px) {
	.page-template-blank-slate .vfbp-form {
		width: 66.666%;
	}
}


/* ANNOYING THINGS THAT MUST BE HIDDEN BECAUSE VFB DOESN'T UNDERSTAND HTML5 AND CSS3 */
.vfb-clearfix,
.vfb-clearfix::after,
.vfb-clearfix::before,
div.vfb-form-group + .vfb-fieldType-heading,
.vfb-row::after,
.vfb-row::before {
	display: none;
}


/* HEADINGS */
.vfbp-form .vfb-form-group {
	margin: 0 0 0 0;
}
.vfbp-form > div.vfb-form-group {
	background: rgba(255,255,255,0);
	margin: 0 0 10px 0;
	width: 100%;
}


/* COLUMNS */
.vfbp-form > .vfb-col-1,
.vfbp-form > .vfb-col-2,
.vfbp-form > .vfb-col-3,
.vfbp-form > .vfb-col-4,
.vfbp-form > .vfb-col-5,
.vfbp-form > .vfb-col-6,
.vfbp-form > .vfb-col-7,
.vfbp-form > .vfb-col-8,
.vfbp-form > .vfb-col-9,
.vfbp-form > .vfb-col-10,
.vfbp-form > .vfb-col-11,
.vfbp-form > .vfb-col-12 {
	margin: 0 0 20px 0;
	width: 100%;
}

@media screen and (min-width: 1024px) {	
	.vfbp-form > .vfb-col-1,
	.vfbp-form > .vfb-col-2,
	.vfbp-form > .vfb-col-3 {
		width: calc(33.333% - 10px);
	}
	.vfbp-form > .vfb-col-4,
	.vfbp-form > .vfb-col-5,
	.vfbp-form > .vfb-col-6 {
		width: calc(50% - 10px);
	}
	.vfbp-form > .vfb-col-7,
	.vfbp-form > .vfb-col-8,
	.vfbp-form > .vfb-col-9 {
		width: calc(66.666% - 10px);		
	}
	.vfbp-form > .vfb-col-10,
	.vfbp-form > .vfb-col-11,
	.vfbp-form > .vfb-col-12 {
		width: 100%;
	}
}


/* ROW */
.vfb-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 0 0 0;
}

.vfb-row > div {
	padding: 0 0 0 0;
	width: 100%;
}

.vfb-row > div .vfb-checkbox,
.vfb-row > div .vfb-radio {
	margin: 5px 0 5px 0;
	width: 100%;
}

.vfb-row > div + div .vfb-checkbox:first-of-type,
.vfb-row > div + div .vfb-radio:first-of-type {
	margin-top: 0;
}

@media screen and (min-width: 768px) {
	/* very stupid that vfb thinks col-4 is 3 columns instead of col-3 */
	.vfb-row .vfb-col-4 {
		width: calc(33.333% - 10px);
	}
	
	.vfb-row .vfb-col-6 {
		width: calc(50% - 10px);
	}
	
	.vfb-row > div + div .vfb-checkbox:first-of-type,
	.vfb-row > div + div .vfb-radio:first-of-type {
		margin-top: 5px;
	}
}


/* LABEL */
.vfbp-form label {
	display: block;
	font-size: 0.875em;
	font-weight: 600;
	margin: 0 0 5px 5px;
}

.vfbp-form .vfb-fieldType-instructions label {
	margin-left: 0;
}

.vfbp-form .vfb-help-block {
	color: #eeeeee;
	font-size: 0.75em;
	font-style: italic;
	margin: 5px 0 0 5px;
}


/* INLINE RADIO/CHECKBOX GROUP

Primarly use with 'yes' or 'no' questions. While we allow it to wrap, try to avoid this. */
.vfb-inline-group {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.vfbp-form .vfb-inline-group .vfb-checkbox,
.vfbp-form .vfb-inline-group .vfb-radio {
	float: none;
	margin: 5px 0 5px 0;
	width: 100%;
}

/* override of current css and not needed when this goes global */
.vfbp-form .vfb-radio > label,
.vfbp-form .vfb-checkbox > label {
	font-weight: 400;
}

@media screen and (min-width: 768px) {
	.vfbp-form .vfb-inline-group .vfb-checkbox,
	.vfbp-form .vfb-inline-group .vfb-radio {
		width: fit-content;
		margin-right: 20px;
	}
}


/* SUBMIT BUTTON */
.vfbp-form > div.vfb-fieldType-submit {
	background: none;
	margin: 20px 0 0 0;
	padding: 0 0 0 0;
}

.vfbp-form .btn-primary {
}

.vfbp-form .btn {
	background-color: #ffffff;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0 0 5px rgba(0,0,0,0.25);
	color: #21669c;
	cursor: pointer;
	font-size: 0.875em;
	font-weight: 600;
	outline: none;
	padding: 8px 10px 8px 10px;
	text-transform: uppercase;
	transition: all 0.5s ease-in-out;
	width: 100%;
}
.vfbp-form .btn:hover {
	background-color: #ffd659;
	color: #252729;
	transition: all 0.5s ease-in-out;
}



@media screen and (min-width: 768px) {
	.vfbp-form .btn {
		width: calc(50% - 10px);
	}
}


@media screen and (min-width: 1024px) {
	#vfbp-form-2.vfbp-form .btn {
		width: calc(33.333% - 10px);
	}
}