/*
	Website Name: A-List Legal Services
	Description: Bootstrap Custom CSS for A-ListLegalServices.com
	Author: PointDomain.com
	Version: 07/02/20
*/

/* FONTS ============================================================================== */

@import url('https://fonts.googleapis.com/css?family=Poller+One&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');

/* VARIABLES ========================================================================== */

:root {
	--font-header-1: 'Poller One';
	--font-header-2: 'Poller One';
	--font-header-3: 'Poller One';
	--font-navigation: 'Montserrat';
	--font-content: 'Montserrat';
	--font-content-header: 'Montserrat';
	--font-footer: 'Montserrat';
	--font-copyright: 'Montserrat';
	--background-color-header: #ffffff;
	--background-color-navigation: #ffffff;
	--background-color-content: #ffffff;
	--background-color-footer: #000000;
	--background-color-copyright: #000000;
	}

/* HEADER ============================================================================= */

.header {
	background-color: var(--background-color-header);
	background-image: url('images/bg-header.jpg');
	background-position: bottom;
	padding: 80px 0px 80px 0px;
	text-align: center;
	background-position: top;
	background-repeat: none;
    background-attachment: fixed;
	}

.header h1,
.header h1 a,
.header h1 a:visited {
	color: #000000;
	font-family: var(--font-header-1), sans-serif;
	font-size: 140%;
	font-weight: 800;
	letter-spacing: 4pt;
	text-decoration: none;
	text-transform: uppercase;
	}

.header h2 {
	color: #000000;
	font-family: var(--font-header-2), sans-serif;
	font-size: 120%;
	font-weight: 400;
	letter-spacing: 4pt;
	text-transform: uppercase;
	}

.header h3 {
	color: #000000;
	font-family: var(--font-header-3), sans-serif;
	font-size: 100%;
	font-weight: 400;
	letter-spacing: 4pt;
	text-transform: uppercase;
	}

@media (min-width: 768px) {

.header h1,
.header h1 a,
.header h1 a:visited {
	font-size: 160%;
	}

.header h2 {
	font-size: 140%;
	}

.header h3 {
	font-size: 120%;
	}

}/* @media */

/* NAVIGATION ========================================================================= */

.navigation {
	background-color: var(--background-color-navigation);
	font-family: var(--font-navigation), sans-serif;
	margin: 0;
	padding: 4px;
	}

@media (min-width: 768px) {

	.navigation {
		position: sticky;
		position: -webkit-sticky;
		top: 0px;
		z-index: 1;
		}

}/* @media */

.navigation ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	text-align: center;
	}

.navigation ul li {
	display: inline;
	}

.navigation ul li a {
	color: #333333;
	font-size: 120%;
	font-weight: 700;
	letter-spacing: 2pt;
	line-height: 2.5;
	margin: 4px;
	padding: 10px 12px 6px 12px;
	text-decoration: none;
	text-transform: uppercase;
	transition: 0.2s;
	}

.navigation ul li a:hover {
	color: #999999;
	}

@media (max-width: 768px) {

	.navigation ul li {
		display: list-item;
		}

	.navigation ul li a {
		font-size: 120%;
		padding: 8px 12px 4px 12px;
		}

}/* @media */

button {
	background-color: var(--background-color-navigation);
	border: 0;
	cursor: pointer;
	padding: 10px 12px 6px 12px;
	width: 100%;
	}

button a,
button a:visited {
	color: #999999;
	font-size: 200%;
	text-decoration: none;
	transition: 0.2s;
	}

button a:hover {
	color: #cccccc;
	text-decoration: none;
	}

@media (min-width: 768px) {

		button
		{
		display: none;
		}

}/* @media */

.js .nav-collapse {
	max-height: 0;
	overflow: hidden;
	}

.nav-collapse.opened {
	max-height: 9999px;
	}

@media screen and (min-width: 768px) {

	.js .nav-collapse.closed {
	max-height: none;
	}

}/* @media */

/* CONTENT ============================================================================ */

.content {
	background-color: var(--background-color-content);
	font-family: var(--font-content), sans-serif;
	padding: 20px 0px 10px 0px;
	}

.content p {
	color: #666666;
	}

.content h1 {
	color: #003366;
	font-family: var(--font-content-header), sans-serif;
	font-size: 200%;
	font-weight: 700;
	letter-spacing: 1pt;
	text-transform: uppercase;
	}

.content h2 {
	color: #336699;
	font-family: var(--font-content-header), sans-serif;
	font-size: 180%;
	font-weight: 700;
	letter-spacing: 1pt;
	text-transform: uppercase;
	}

.content h3 {
	color: #336699;
	font-family: var(--font-content-header), sans-serif;
	font-size: 160%;
	font-weight: 700;
	letter-spacing: 1pt;
	text-transform: uppercase;
	}

.content h4 {
	color: #336699;
	font-family: var(--font-content-header), sans-serif;
	font-size: 140%;
	font-weight: 700;
	letter-spacing: 1pt;
	text-transform: uppercase;
	}

.content h5 {
	color: #336699;
	font-family: var(--font-content-header), sans-serif;
	font-size: 120%;
	font-weight: 700;
	letter-spacing: 1pt;
	text-transform: uppercase;
	}

.content h6 {
	color: #336699;
	font-family: var(--font-content-header), sans-serif;
	font-size: 100%;
	font-weight: 700;
	letter-spacing: 1pt;
	text-align: center;
	text-transform: uppercase;
	}

.content li {
	color: #666666;
	padding: 0px 0px 10px 0px;
	}

.content ul {
	list-style: square;
	}

.content hr
	{
	background: #cccccc;
	border: none;
	height: 2px;
	}

/* BLOCKQUOTE ========================================================================= */

.blockquote p {
	color: #336699;
	}

.blockquote-footer {
	color: #6699cc;
	}

/* FOOTER ============================================================================= */

.footer {
	background-color: var(--background-color-footer);
	font-family: var(--font-footer), sans-serif;
	padding: 30px 0px 30px 0px;
	text-align: center;
	background-image: url('images/bg-footer.jpg');
	background-position: bottom;
    background-attachment: fixed;
	}

.footer h1 {
	color: #6699cc;
	font-size: 140%;
	letter-spacing: 4pt;
	text-transform: uppercase;
	}

.footer p {
	color: #cccccc;
	letter-spacing: 1pt;
	text-decoration: none;
	}

.footer a,
.footer a:visited {
	color: #cccccc;
	text-decoration: none;
	transition: 0.2s;
	}

.footer a:hover {
	color: #ffffff;
	text-decoration: none;
	}

.footer hr {
	background: #333333;
	}

/* COPYRIGHT ========================================================================== */

.copyright {
	background-color: var(--background-color-copyright);
	font-family: var(--font-copyright), sans-serif;
	padding: 10px 0px 50px 0px;
	text-align: center;
	}

@media (min-width: 768px) {

	.copyright {
		padding: 10px 0px 2px 0px;
		}

}/* @media */

.copyright p {
	color: #999999;
	font-size: 85%;
	text-decoration: none;
	}

.copyright a,
.copyright a:visited {
	color: #666666;
	text-decoration: none;
	transition: 0.2s;
	}

.copyright a:hover {
	color: #cccccc;
	text-decoration: none;
	}