/**************************************************************************
Name:			exhibitors.css
Description:	Styling for the exhibitors section on the show page.
Date Created: 	02.20.2020 Brynn Chivers
Modified:
**************************************************************************/

.exhibitorsContainer
{
	width: 100%;
	margin: 10px 0;
	margin-top: 20px;

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;

	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;

	-webkit-transition: height .3s;
	-o-transition: height .3s;
	transition: height .3s;
}

.exhibitorsContainer
{
	-webkit-transition: height .5s .3s;
	-o-transition: height .5s .3s;
	transition: height .5s .3s;
}

.exhibitorsContentContainer
{
	width: 100%;
	max-width: 1400px;

	overflow: hidden;
	height: 0;

	-webkit-transition: height .3s;
	-o-transition: height .3s;
	transition: height .3s;
}

.exhibitorsContainer.expanded .exhibitorsContentContainer
{
	height: 100%;
}

.exhibitorsContainer h3
{
	text-align: center;
	margin: 20px 25px;
}

/* PAGINATION STYLING */
	.exhibitorsButtonBar
	{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}

	.exhibitorsButtonBar .letter-tab
	{
		height: unset;
		width: unset;
		border-radius: 5px;
		background: #3895C5;
		padding: 10px 20px;

		color: #FFFFFF;
		font-size: 25px;
		line-height: 35px;

		display: -webkit-box;

		display: -ms-flexbox;

		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}

.setContainer
{
	opacity: 0;
	-webkit-transition: opacity .2s;
	-o-transition: opacity .2s;
	transition: opacity .2s;

	max-height: 200px;
}

.setContainer.swiper-slide-active
{
	opacity: 1;
}

.setWrapper
{
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: (25%)[4];
	grid-template-columns: repeat(4, 25%);
	grid-auto-flow: column;
}

.exhibitor
{
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	background: transparent;
	border: #007550 solid 1px;
	border-radius: 5px;
	padding: 10px 15px;
	margin: 10px;

	color: #000000;

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-transition: all .25s;
	-o-transition: all .25s;
	transition: all .25s;
}

.exhibitor:hover
{
	background: #007550;
	color: #FFFFFF;
	text-decoration: none;
}

.name
{
	-webkit-box-flex: 1;
	    -ms-flex: 1 0 75%;
	        flex: 1 0 75%;

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.name:hover
{
	text-decoration: none;
}

.name,
.booth
{
	font-family: aller;
	font-size: 20px;
	line-height: 25px;
	font-weight: initial;
}

.booth
{
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 20%;
	        flex: 1 1 20%;
	position: relative;

	color: #6C6C6C;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;

	-webkit-transition: all .25s;
	-o-transition: all .25s;
	transition: all .25s;
}

.boothIcon
{
	margin-left: 5px;
}
.boothIcon path
{
	fill: #6C6C6C;

	-webkit-transition: all .25s;
	-o-transition: all .25s;
	transition: all .25s;
}

.exhibitor:hover .booth,
.exhibitor:hover .boothIcon path
{
	color: #FFFFFF;
	fill: #FFFFFF;
}

.exhibitorsHeader
{
	color: #007550;
	font-size: 40px;
	line-height: 45px;
	font-weight: initial;

	cursor: pointer;
}

.exhibitorsHeader:hover
{
	text-decoration: none;
}

@media only screen and (max-width: 1200px)
{
	.setWrapper
	{
		-ms-grid-columns: (33%)[3];
		grid-template-columns: repeat(3, 33%);
	}
}

@media only screen and (max-width: 900px)
{
	.setWrapper
	{
		-ms-grid-columns: (50%)[2];
		grid-template-columns: repeat(2, 50%);
	}
}

@media only screen and (max-width: 640px)
{
	.setWrapper
	{
		-ms-grid-columns: (100%)[1];
		grid-template-columns: repeat(1, 100%);
	}
}