/* TAC Custom CSS */

/****************/
/****************/
/**** BASICS ****/
/****************/
/****************/
.button.large {
	padding-left:2rem;
	padding-right:2rem;
}
.news-separator {
	clear:both;
	width:100%;
	margin:50px auto 40px;
	border:1px solid #EFEFEF;
}
.article-table {
	border:none;
	margin:0 auto 25px;
}
.article-table tbody td {
	padding:0;
}
.article-table tbody td small {
	display:block;
	font-size:12px;
	line-height:1.4;
	margin:10px auto 0;
}
.article-image {
	float:left;
	padding:10px;
	margin:0 10px 10px 0;
}
.article-image::after {
	clear:both;
	content:" ";
	display:table;
}

/*******************/
/*******************/
/**** HOME PAGE ****/
/*******************/
/*******************/
#home-banner {
	width:100%;
	color:#FFF;
	display:block;
	margin:0 auto;
	position:relative;
	padding:20px 40px;
	background:#2E91CE;
	display:none;
}
#home-banner h3 {
	color:inherit;
	font-size:15px;
	font-weight:600;
	letter-spacing:1px;
	margin:0 auto 15px;
	text-transform:uppercase;
}
#home-banner p {
	color:inherit;
	margin:0 auto;
	font-size:15px;
	line-height:1.3;
}
#home-banner p a {
	color:inherit;
}
#home-banner #close-btn {
	top:0;
	right:15px;
	font-size:25px;
	cursor:pointer;
	font-weight:600;
	position:absolute;
	text-transform:lowercase;
}

#home-sticker {
	top:40px;
	right:2px;
	z-index:2;
	width:125px;
	height:125px;
	border-radius:50%;
	position:absolute;
	transform: rotate(5deg);
	-o-transform: rotate(5deg);
	-ms-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-webkit-transform: rotate(5deg);
	background:url(https://www.county.org/TAC/media/TACMedia/Home/TAC-50th-anniversary-round-sticker.png);
	background-size:cover;
	background-repeat:no-repeat;
	transition:all .25s linear;
	-o-transition:all .25s linear;
	-ms-transition:all .25s linear;
	-moz-transition:all .25s linear;
	-webkit-transition:all .25s linear;
}

#home-sticker:hover {
	transform: rotate(10deg);
	-o-transform: rotate(10deg);
	-ms-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	-webkit-transform: rotate(10deg);
}

/***********************/
/***********************/
/**** EVENTS AGENDA ****/
/***********************/
/***********************/
.event-agenda {
	width:100%;
}
.event-agenda .event-day {
	color:#FFF;
	font-weight:600;
	background:#0069AA !important;
}
.event-agenda tr:nth-child(2n+1) {
	background:#EFEFEF;
}
.event-agenda tr:nth-child(2) td:first-child {
	width:225px;
}
.event-agenda .event-highlight {
	color:#FFF;
	background:#2E91CE !important;
}

/**************************/
/**************************/
/**** EVENTS COUNTDOWN ****/
/**************************/
/**************************/
.countdown-table {
	width:100%;
	border:none;
}
.count-one {
	width:225;
	padding:0;
}
.count-two {
	width:15px;
}
.count-three {
	padding:0;
}
.countdown-timer {
	display:block;
	margin:0 auto;
	text-align:right;
	/*display:none;*/
}
.countdown-timer ul {
	margin:0 auto 25px;
}
.countdown-timer li {
	color:#716258;
	font-size:15px;
	padding:0 10px;
	text-align:center;
	list-style-type:none;
	display:inline-block;
	text-transform:uppercase;
}
.countdown-timer li span {
	color:inherit;
	display:block;
	font-size:50px;
	font-family:"Libre Baskerville",serif;
}

/******************/
/******************/
/**** RMP SEAL ****/
/******************/
/******************/
.rmp-seal {
	right:15px;
	bottom:15px;
	width:60px;
	height:92px;
	position:absolute;
	border-radius:0%;
	background-image:url(https://www.county.org/TAC/media/TACMedia/General%20Images/2021/rms-fb-seal.png);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}

/******************/
/******************/
/**** HBS SEAL ****/
/******************/
/******************/
.hbs-seal {
	right:15px;
	bottom:15px;
	width:150px;
	height:150px;
	position:absolute;
	border-radius:50%;
	background-image:url(https://county.org/TAC/media/TACMedia/General%20Images/2020/covid-19-seal.png);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}

/**************************/
/**************************/
/**** RELATED ARTICLES ****/
/**************************/
/**************************/
.related-articles {
	width:100%;
}
.related-articles tr {
	border-bottom:1px solid #EFEFEF;
}
.related-articles tr:last-child {
	border:none;
}
.related-articles tr h3 {
	margin:0 auto;
}
.related-articles p {
	margin:0 auto;
}
.related-articles p:first-of-type {
	font-style:italic;
	margin:0 auto 10px;
}


/***************/
/***************/
/**** CIRA ****/
/***************/
/***************/
.cira-alert {
	color:#FFF;
	padding:40px;
	background:#AB0534;
	margin:-40px auto 50px;
}
.cira-alert h3 {
	color:inherit;
	font-size:25px;
	font-weight:600;
	margin:0 auto 10px;
	text-transform:uppercase;
}
.cira-alert p {
	color:inherit;
	margin:0 auto;
	font-size:18px;
}
.cira-alert a {
	color:#FFF;
}
.cira-alert-small {
	width:100%;
	padding:15px;
	display:block;
	margin:0 auto 25px;
	background:#AB0534;
}
.cira-alert-small p {
	color:#FFF;
	margin:0 auto;
}
.cira-alert-small a {
	color:#FFF;
}
.cira-video-playlist {
	width:100%;
	height:100%;
	max-width:365px;
	max-height:205px;
	margin:0 auto 10px;
	display:inline-block;
}
.cira-video-playlist iframe {
	width:100%;
	height:100%;
	max-width:365px;
	max-height:205px;
}

/****************************/
/****************************/
/**** RESPONSIVE QUERIES ****/
/****************************/
/****************************/
@media only screen and (max-width:1199px) {
	.cira-video-playlist {
		max-width:300px;
		max-height:170px;
	}
}

@media only screen and (max-width:1046px) {
	.cira-video-playlist {
		max-width:365px;
		max-height:205px;
	}
}

@media only screen and (max-width:866px) {
	.count-one {
		margin:0;
		width:100%;
		display:block;
	}
	.count-one p {
		font-size:1.125rem
	}
	.count-two {
		display:none;
	}
	.count-three {
		margin:0;
		width:100%;
		display:block;
		max-width:100%;
	}
	.countdown-timer {
		text-align:left;
	}
	.countdown-timer #day {
		padding:0 10px 0 0;
	}
	.countdown-timer li span {
		font-size:40px;
	}
}

@media only screen and (max-width:640px) {
	#home-sticker {
		top:10px;
		right:5px;
		width:90px;
		height:90px;
	}
}

/***********************/
/***********************/
/**** PRINT QUERIES ****/
/***********************/
/***********************/
@media print {
	.stickyHeader,
	.breadcrumb-container,
	.medium-6,
	.xlarge-4 {
		display:none;
	}
	.stickyHeader::after {
		content: "Please visit www.county.org for the latest version of this information.";
	}
	.stickyHeader+.main-content {
		margin:100px auto 0;
	}
	h1 {
		font-size:25px;
	}
	.grid-x>.medium-18,
	.medium-18,
	.xlarge-20 {
		width:100%;
	}
	.mobile-inset {
		padding:0;
	}
	.tabs-panel {
		padding:0;
	}
	.tabs-panel a {
		text-decoration:none;
	}
	.footer-container,
	.footer-bottom-container-links {
		display:none;
	}
	.footer-copyright {
		text-align:center;
		width:100% !important;
	}
}
	.responsive-youtube1 { 
		text-align: center;
		max-width: 650px;
		margin: 0 auto;
	}
		
	.responsive-youtube2 { 
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 30px;
		height: 0;
		overflow: hidden; }

	.responsive-youtube2 iframe, .responsive-youtube2 object, .responsive-youtube2 embed { 
		position: absolute;
		top: 0; left: 0;
		width: 100%;
		height: 100%; }
		
/**** TCD Video Stacking ****/

/* Create two equal columns that floats next to each other */
.column {
  box-sizing: border-box;
  float: left;
  width: 50%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}