﻿/* Card Menu Styles */
    #bylaw-Cardstack{margin-left:-5px; margin-right:-5px; margin-bottom:30px}
	#bylaw-Cardstack .col-xs-12, #bylaw-Cardstack .col-sm-6, #bylaw-Cardstack .col-md-3
	{
		padding: 5px;	
	}

	.bylaw-Card
	{
		border: 1px solid #dddddd;
		height: 350px !important;
		position: relative;
		overflow: hidden;
		/*margin-bottom: 10px;*/
	}
	
	.card-Info
	{
		padding: 5px;
	}

	.card-Info h3
	{
		margin-top: 0px !important;
		font-size: 1.2em;
	}
	
	.card-Menu
	{
		position: absolute;
		bottom: 100px;
		padding-bottom: 10px;
	}
	
	.card-Menu button
	{
		padding: 0 15px;
		color: #777777;
		transition: 0.2s ease;
		box-shadow: none !important;
		border: none !important;
		font-size: 1.3em;
		position: relative;
	}
	
	.card-Menu button:focus
	{
		outline: none !important;
	} 

	.card-Menu-Toggle:hover, .card-Menu-Toggle.active
	{
	    color: #0056AC;
	}

	.card-Menu-Toggle.active:after
	{
		content: '';
    	width: 10px;
    	height: 10px;
    	position: absolute;
		bottom: -17px;
		left: 18px;
		background-color: #f2f2f2;
		box-sizing: border-box;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
		border: 1px solid #eaeaea;
		border-right: none;
    	border-bottom: none;
    	z-index: 5;
	}	
		
	.card-Display
	{
		position: absolute;
		background-color: #f2f2f2;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 5px;
		height: 100px;
		border-left: 0.5px solid #f2f2f2;
		border-top: 1px solid #eaeaea;
		z-index: 2;
		overflow:auto;
	}

	.card-Display ul
	{
		list-style-type: none;
		padding: 0;
	}

	.card-Display li
	{
		width: calc(99%);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	@media screen and (max-width: 991px)
	{
		.bylaw-Card
		{
			height: 275px !important;
		}
	}

	@media screen and (max-width: 1199px)
	{
		.card-Display
		{
			height: 75px !important;
		}

		.card-Menu
		{
			bottom: 80px !important;
		}

		.card-Menu-Toggle.active:after
		{
			bottom: -20px !important;
		}
	}

	@media screen and (min-width: 1200px)
	{
		.card-Display
		{
			line-height: 1.45em;
		}
	}
	
/* Footer Styles */

	#contactSection
	{
		background-color: #f2f2f2;
		margin-bottom: -12px !important;
		padding-bottom: 15px;
	}
	
	#contactSection .col-xs-1, #contactSection .col-xs-11
	{
		padding: 0;
	}

	@media screen and (min-width: 1200px)
	{
		#contactSection
		{
			padding-left: calc((100% - 999px)/2);
			padding-right: calc((100% - 999px)/2);
			margin-left: -15px;
			margin-right: -15px;
		}
	}

	#contactSection ul
	{
		list-style-type: none;
		padding: 0;
	}
	
	#contactSection a.email
	{
		background-color: #000;
		color: #fff;
		border-radius: 50px;
		display: inline-block;
		text-align: center;
		width: 100%;
		height: 40px;
		padding: 8px;
		transition: 0.2s ease-in;
		text-decoration: none;
		margin: 4px 0px 12px 0px;
	}
	
	#contactSection a.email:hover
	{
		background-color: #bdbdbd;
		color: #000;
		text-decoration: none;
	}
	
/* Related Links - Web Part Styling */
    #relatedResources{
        padding-top:20px;
    	margin-bottom:30px;
    	overflow:hidden;
    }
	#relatedResources ul
	{
		list-style-type: none;
		padding: 0px;
		padding-bottom: 15px;
		margin-left: 5px !important;
	}

	#relatedResources ul li a
	{
		display:block;
		padding:5px;
	}

	#relatedResources ul li a:hover,
	#relatedResources ul li a:focus
	{
		background-color:#e9e9e9;
		text-decoration:none
	}

	#relatedResources .heading
	{
		padding: 0;
		margin: 0 0 15px 0 !important;
		font-size: 130%;
	}
	
	#relatedResources .relatedBylawSection .heading:before 
	{
		font-family: 'Font Awesome 5 Pro';
		content: "\f15c";
		margin: 0px 10px 0px 10px;
		float: left;
	}
	
	#relatedResources .relatedLinkSection .heading:before
	{
		font-family: 'Font Awesome 5 Pro';
		content: "\f0c1";
		margin: 0px 10px 0px 5px;
		float: left;
	}
	
	#relatedResources .relatedContactSection .heading:before
	{
		font-family: 'Font Awesome 5 Pro';
		content: "\f2b9";
		float: left;
		margin: 0px 10px 0px 5px;
	}
@media(min-width:768px){
	.relatedBylawSection.col-sm-6,
	.relatedBylawSection.col-sm-4,
	.relatedLinkSection.col-sm-4{border-right:1px solid #ccc;}
	.relatedBylawSection,
	.relatedLinkSection{
		padding-bottom:500px;
		margin-bottom:-500px
		}
}