/* - Footer CSS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#footer
{
	position: relative;
	z-index: 20;
}

#footer .element
{
	width: 100%;
}

#footer h2
{
	border-bottom: solid 2px;
	padding-bottom: 4px;
	width: 100%;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
}

#footer .item
{
	display: grid;
	align-content: start;
	grid-gap: 12px;

	width: 100%;
}

#footer p
{
	color: #fff;
	text-align: center;
    justify-self: center;
}

#footer a
{
    color: #fff;
	text-decoration: none;
	text-align: center;
    justify-self: center;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


#footer .workspace 
{
    padding: 42px 0 64px;
    grid-gap: 42px;
    overflow-x: visible;
}

@media (min-width: 992px) 
{
    #footer .workspace 
    {
        width: 90%;
    }
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


#footer .item
{
	/*grid-row: 1;*/
	justify-content: center;
	/*grid-gap: 24px;*/
}

#footer .item-inner
{
	display: grid;
	border: solid 2px var( --colour1 );
	justify-self: center;
	border-radius: 64px;
}

#footer .item i
{
	color: #222;
	background-color: var( --colour1 );
	padding: 16px;
	border-radius: 64px;
	justify-self: center;
	font-size: 24px;
	border: solid 4px #222;
}

.footer-social-container
{
	display: grid;
	justify-content : center;
	grid-gap : 16px;
}

.footer-social 
{
	grid-row: 1;
}

.footer-border-item
{
	border-bottom: solid 1px;
	padding-bottom: 8px;
}

#footer .item a
{
	display: grid;
	align-self: center;
}

#footer .item p
{
	align-self: center;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#footer .contact-details
{
	justify-content: center;
	
	width: 90%;
	justify-self: center;

	grid-row: 1;
	grid-column: 1;

	z-index: 2;
}

@media ( min-width: 992px )
{
	#footer .contact-details
	{
		grid-template-columns: repeat( 3, 1fr );
	}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.dashed-line
{
	display: none;
	grid-row: 1;
	grid-column: 1;
	width: 61%;
	height: 0px;
	align-self: start;
	justify-self: center;
	margin-top: 33px;
	border-bottom: dashed 1px var( --colour1 );
	opacity: 0.8;
}

@media ( min-width: 992px )
{
	.dashed-line
	{
		display: grid;
	}
}

.footer-nav
{
	align-content: center;
	justify-content: center;
	grid-gap: 8px;
}


@media ( min-width: 992px )
{
	.footer-nav
	{
		grid-gap: 16px;
	}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.footer-nav a
{
	grid-row: 1;
	border-right: solid #848484 1px;
	padding-right: 8px;
	color: #f4f4f4;
}

@media ( min-width: 992px )
{
	.footer-nav a
	{
		padding-right: 16px;
	}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.footer-nav a:last-of-type
{
	border: none;
	padding: 0;
}

#footer .socials
{
	justify-content: center;
	align-content: start;
	grid-column: 1 / span 3;
	background-color: #171717;
	padding: 16px 0;
}

#footer .socials a
{
	grid-row: 1;
}

#footer .socials i
{
	color: #222;
	background-color: #f9f9f9;
	border-radius: 64px;
	justify-self: center;
	font-size: 22px;
	width: 42px;
	height: 42px;
	display: grid;
	align-content: center;
	justify-content: center;
}

#footer .socials i
{
	justify-self: center;
	align-self: center;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#bottom-bar
{
	display: grid;
	grid-row: 3;
	grid-column: 1/span 3;
	background-color: #111;

	padding: 16px 0;

	justify-content: center;
}

#bottom-bar p
{
	font-size: 14px;
	margin: 0;
	padding: 0;
	border: none;
}

#bottom-bar a
{				
	text-decoration: none;
	color: rgb( 47, 138, 155);
}

@media ( max-width: 768px )
{
	#footer::after
	{
		background: var( --colour1 );
	}
    #footer {
        background-color: var( --colour1 );
    }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */