/* Core CSS - v1 */

body
{
	font-family: 'Quicksand', sans-serif;
	background-color: #fff;
}

/* - */

h1, h2, h3, h4, h5
{
	color: hsl( 128, 1%, 45% );
	font-weight: 100;
}

p
{
	margin: 0 0 16px;
}

.cap-256
{
	max-width: 256px;
}

a
{
	color: hsl( 128, 1%, 45% );
	text-decoration: none;
}

.testimonial
{
    border-bottom: solid 4px hsl( 128, 1%, 45% );
    margin-bottom: 32px;
}

.fa
{
    color: hsl( 128, 1%, 45% );
}

.heading
{
    justify-self: left;
	display: grid;
}

.header .workspace
{
	padding: 0;
}

@media ( min-width: 768px )
{
	.header .workspace
	{
		grid-template-columns: auto auto auto;
	}
}

@media ( min-width: 1200px )
{
	.header .workspace
	{
		
	}
}

/* - */

.heading:after
{
	content: "";
    border-bottom: 4px solid hsl( 128, 1%, 45% );
    width: 25%;
    padding-top: 16px;
}

/* - */

.page-link
{
	display: grid;
}

.page-link a
{
	border: 1px dashed;
    padding: 12px 16px;
    text-decoration: none;
	color: hsl( 128, 1%, 45% );
	font-size: 14px;
	transition: color ease .2s;
	justify-self: left;
}

.page-link:hover a
{
	cursor:pointer;
	color: #F1D8B6;
	border-color: #F1D8B6;
}







/* - Topbar - */

.topbar .workspace
{
	padding: 0;
    grid-template-columns: auto;
}

@media ( min-width: 768px )
{
	.topbar .workspace
	{
		grid-template-columns: max-content auto max-content;
	}	
}

.topbar
{
	background-color: #222;
	padding: 16px;
}

@media ( min-width:768px ){
	
	.topbar
	{
		padding: 0px;
	}
}

.topbar p, .topbar a
{
	color: #F0F0F0;
    font-size: 14px;
    text-decoration: none;
	margin: 8px 0px;
}

@media( min-width:768px ){
	
	.topbar p, .topbar a
	{
		margin: 12px 0px;
		align-self: center;
	}
}

@media( min-width:768px ){
	
	.topbar .block
	{
		grid-template-columns: max-content auto max-content;
	}	
}

/* - */

.topbar-details
{
	grid-template-columns: auto;
	display: grid;
}

@media( min-width:768px ){
	
	.topbar-details
	{
		grid-column: 3;
		grid-template-columns: auto auto;
		grid-column-gap: 32px;
	}
}

/* - */



/* - Header - */

.header 
{
	background-image: url(../img/sketch-header.png); 
    background-size: auto 100%;
    z-index: 10;
}

@media ( min-width:768px )
{
	.header 
	{
		height: 100px;
		margin-bottom: -8px;
	}

	
	.header > .block
	{
		display: grid;
		grid-template-columns: max-content auto max-content;
	}
	
	.fixed-header
	{
		position: fixed;
		width: 100%;
		top: 0px;
		left: 0;
	}
}

#main-logo
{
	justify-self:center;
	padding: 64px 0 32px 0;
}

#main-logo img
{
	max-width: 75vw;
}


@media ( min-width:768px )
{
	#main-logo
	{
		padding: 0;
	}
	
	#main-logo img
	{
		height: 75px;
		margin-top: 0px;
	}
}

#nav
{
	display: grid;
}

@media ( min-width:768px )
{
	#nav
	{
		grid-column: 3;
		height: 80px;
	}
}

#mobile-menu-btn
{
	justify-self: center;
	margin-bottom: 32px;
}


@media ( min-width:768px )
{
	#mobile-menu-btn
	{
		display: none;
	}
}

.btn
{
	border-bottom: 1px dashed #b3b3b3;
    padding: 12px 16px;
    margin: 0;
    color: #505050;
    letter-spacing: 7px;
	font-weight: 100;
	transition: .5s color;
}

.btn:hover
{
	cursor: pointer;
	color:#fff;
}



#nav-list
{
	display: grid;
    list-style: none;
    grid-row-gap: 16px;
    padding: 16px 16px;
	margin: 0 4px 32px 4px;
}


@media ( min-width:768px )
{
	#nav-list
	{
		grid-template-columns: repeat(5, max-content);
		justify-self: center;
		border: none;
		grid-column-gap: 16px;
		padding: 0;
		margin: 0;
	}
}

@media ( min-width:1200px )
{
	#nav-list
	{
		/* grid-template-columns: repeat(8, max-content); */
	}
}


.nav-item a
{
	text-decoration: none;
    color: #666;
    font-weight: bold;
    letter-spacing: 1px;
}

.nav-item
{
	justify-self: center;
	border-bottom: 1px dashed #b3b3b3;
    padding: 12px 16px;
    margin: 0;    
    letter-spacing: 2px;
	font-weight: 100;
}

.nav-item:hover 
{
	cursor: pointer;
	/* border-bottom: 1px dashed #c13f28; */
}

.nav-item:hover a
{
	color: hsl( 128, 1%, 45% );
}

@media ( min-width:768px )
{
	.nav-item
	{
		letter-spacing: 0;
		padding: 0;
		border: none;
		/*font-family: 'Podkova', serif;*/
		font-size: 15px;
		align-self: center;
	}
}

.current-page
{
	border-bottom: 1px dashed hsl( 128, 1%, 45% );
}

.current-page a
{
	color: hsl( 128, 1%, 45% );	
}



@media ( max-width:767px )
{
	.mobile-hidden
	{
		display: none!important;
	}
}








/* - */

.footer
{
	padding: 64px 32px 32px;
    background-image: url(../img/footer-bg.jpg);
	
	
}

@media ( min-width:768px )
{	
	.footer .workspace
	{
		grid-template-columns: max-content max-content max-content max-content max-content;
		grid-column-gap: 4px;
	}
}

.footer-item
{
	color:#fff;
    padding-bottom: 8px;
    margin-bottom: 8px;
	display: grid;
    grid-template-rows: max-content max-content max-content;
}


@media ( min-width:768px )
{	
	.footer-item
	{	
		padding-bottom: 0;
		margin-bottom: 0;
	}
}

.footer-item a
{
	color:#fff;
	text-decoration: none;
}

.footer-item p
{
	margin:6px 0;
	font-size: 14px;
}

.footer-icon
{
	font-size: 28px!important;
	color: #222;
	margin:0;
}

svg
{
	color: hsl( 128, 1%, 45% );
    padding: 3px;
    margin: 0px 2px -4px 0px;
}

.footer-header
{
	color: hsl( 128, 1%, 45% );
	margin-top: 8px;
	padding: 0px 8px 8px 0px;
    justify-self: left;
    border-bottom: 1px dashed;
	font-size: 18px!important;
}

.footer-divider
{
	display: grid;
}

.footer-divider .bar
{
	border-bottom: dashed 1px #525252;
    margin-bottom: 16px;
}

@media ( min-width:768px )
{
	.footer-divider
	{
		display: grid;
		padding: 0 16px;
	}
	
	.footer-divider .bar
	{
		border-left: dashed 1px #525252;
		align-self: center;
		height: 70%;
	}
}
	

.bottom-bar
{
	background-color: #000;
	display: grid;
}

.footer-link
{
	padding: 12px;
    color: #afafaf;
    text-decoration: none;
    justify-self: center;
}








.call-to-action
{
	background: linear-gradient( 141deg, #546067 0%, #7f8e90 51%, #737373 75% );
	padding: 16px;
}

.call-to-action p
{
	color: #fff;
	font-size: 16px;
	text-align: center;
}

@media ( min-width: 768px )
{	
	.call-to-action p
	{
		color: #fff;
		font-size: 22px;
		text-align: center;
	}
}

.call-to-action .block
{
	padding: 16px;
}

@media ( min-width:1200px )
{
	.call-to-action .block
	{
		padding: 16px 128px;
	}
}



.call-to-action .page-link
{
	border: 1px dashed #F9F6F3;
    color: #fff;
    justify-self: center;
    padding: 16px 24px;
    font-size: 20px;
    line-height: 20px;
	text-decoration: none;
}

.call-to-action-txt
{
	margin-top: 12px;
}

.call-to-action-link
{
    display: grid;
    margin: 0;
}



.subpage-top
{
	background-image: url(../img/slide-1.jpg);
	background-position: center;
	background-size: cover;
	display: grid;
	
	width:100%;	
}

.subpage-top .block
{
	grid-template-rows: max-content max-content;
}

.page-title
{
	color: #ffffff;
    padding: 12px 32px;
    letter-spacing: 2px;
    justify-self: center;
    align-self: center;
    font-size: 40px;
}

@media ( min-width:768px )
{
	.page-title
	{
		margin: 64px 0;
	}
}

.breadcrumbs
{
	color: hsl( 128, 1%, 45% );
    justify-self: left;
    padding: 8px 16px;
	margin-left: 16px;
	margin-top: 32px;
}

@media ( min-width:768px )
{
	.breadcrumbs
	{
		margin-left: 0;
	}
}

.breadcrumbs a
{
	color: #777!important;
    text-decoration: none;
}

.home-notice-txt
{
	align-self: center;
    justify-self: center;
    padding: 16px 32px;
    background-color: #fff;
    box-shadow: 0 0 16px #e0801e;
}

.home-notice-txt h1 
{
	margin:0;
}

.alt-colour
{
	background-color: #3d5561;
}

.alt-colour h2, .alt-colour a, .alt-colour p, .alt-colour li
{
	color:#fff;
}

.call-to-action-txt a {
    color: #fff;
    text-decoration: none;
}

.decoration-btm
{
	margin-top:-40px;
	z-index: 2;
	height:40px;
	width:100%;
	/* background-image: url(../img/sketch.png); */
	background-size: auto 100%;
}

/* - */



.list-services
{
	display: grid;
    grid-template-columns: auto;
    padding: 16px;
    grid-gap: 16px;
}

/* - */

.list-services-cols
{
	display: grid;
    grid-template-columns: auto;
    padding: 16px;
    grid-gap: 16px;
}


@media ( min-width: 768px )
{
	.list-services-cols
	{
		display: grid;
		grid-template-columns: auto auto;
		padding: 32px;
		grid-gap: 16px;
		
		margin-bottom: 32px;
	}
}

@media ( min-width: 992px )
{
	.list-services-cols
	{
		display: grid;
		grid-template-columns: auto auto auto;
		padding: 32px;
		grid-gap: 16px;
	}
}

@media ( min-width: 1200px )
{
	.list-services-cols
	{
		display: grid;
		    grid-template-columns: repeat( 3, auto);
		padding: 0 32px;
		grid-gap: 16px;		
	}
}

/* - */

.list-services li
{
	color: hsl( 128, 1%, 45% );	
}

.list-services p, .list-services-cols p
{
	color: #000;
    border-left: hsl( 128, 1%, 45% ) solid 4px;
    padding-left: 12px;	
}

.alt-colour .list-services p, .alt-colour .list-services-cols p
{
	color: #fff;
}

/* - */

#cred-container
{
	display: grid;
    grid-template-columns: auto;
    width: 100%;
    grid-gap: 16px;
    margin-bottom: 64px;
	margin-top: 32px;
}

@media ( min-width: 768px )
{
	#cred-container
	{
		display: grid;
		grid-template-columns: auto auto auto;
	}
}

@media ( min-width: 992px )
{
	#cred-container
	{
		display: grid;
		grid-template-columns: auto auto auto auto auto;
	}
}

#cred-container img
{
	width: 85%;
    align-self: center;
    justify-self: center;
}

.footer-top
{
    margin-bottom:-40px;
    z-index: 2;
    height:40px;
    width:100%;
    background-image: url(img/sketch-header.png);
    background-size: auto 100%;
}

.footer-top-alt
{
    margin-bottom:-40px;
    z-index: 2;
    height:40px;
    width:100%;
    background-image: url(img/sketch-header-bg.png);
    background-size: auto 100%;
}

.footer-img
{
	width: 75%;
}