body {
	background-color: #fafafa;
	font-family: 'Roboto', sans-serif;
	font-weight: normal;
	font-size: 16px;


	 /* Light theme */
	 --color-background--on-light: #ffffff;

	--color-action-background-primary-default-on-light: #2E4BC8;
	--color-action-background-primary-hover-on-light: #131D4C;
	--color-action-background-secondary-default-on-light: #ffffff;
	--color-action-background-secondary-hover-on-light: #2E4BC8;
	--color-action-border-secondary-default-on-light: #2E4BC8;
	--color-action-border-secondary-hover-on-light: #2E4BC8;
	--color-action-primary-default-on-light: #ffffff;	

	--color-action-text-primary-default-on-light: #2E4BC8;
	--color-action-text-primary-hover-on-light: #22399E;

	/* Dark theme */
	--color-background-on-dark: #131D4C;

	--color-text-primary: #fff;
	--color-text-secondary: #A4B5FF;

	--color-action-background-primary-default-on-dark: #A4B5FF;
	--color-action-background-primary-hover-on-dark: #fff;
	--color-action-background-secondary-default-on-dark: #ffffff;
	--color-action-background-secondary-hover-on-dark: #A4B5FF;
	--color-action-primary-default-on-dark: #131D4C;	

	--color-text-highlight-on-dark: #A4B5FF;


	--color-action-text-primary-default-on-dark: #A4B5FF;
	--color-action-text-primary-hover-on-dark: #C2CEFF;
	

}

h1, h2, h3, h4, h5 {
	color: var(--secondary-color);
}

h4 {
	padding: 2rem 0;
}

a.light {
    color: var(--color-action-text-primary-default-on-light);
    text-decoration: underline;
}

a.light:hover {
	color: var(--color-action-text-primary-hover-on-light);
}

.list-group-item-action {
	color: #121c4f;
}

.list-group-item-action:active {
	color: #6B76F2;
}

.mobile-images {
	width: 80%;
	margin-bottom: 32px;
}

.bg-dark {
	background-color: var(--color-background-on-dark) !important;
}

.bg-light {
	background-color: #fff !important;
}



.home-card {
	margin-top: 2rem;
}


.case-study-header {
}


.case-study-header h1 {
	color: var(--color-text-primary);
	padding: 2rem 0
}

.case-study-header p {
	color: var(--color-text-primary);
	font-size: 1.375rem;
    line-height: 2rem;
    margin-bottom: 32px;
}


.case-study-subheader {
	color: #121c4f;
}

.case-study-subheader p {
	font-size: 1.125rem;
    line-height: 1.75rem;
    margin-bottom: 32px;
}

.case-study-subheader h2 {
	color: #121c4f;
	padding: 2rem 0
}

.caption {
	color: #000;
}

.dark-caption {
	color: var(--color-text-highlight-on-dark);

}


/* Button Styles */

.btn {
	border-radius: 32px;
	padding: 0.5rem rem;
}

.btn-primary-on-dark {
    background-color: var(--color-action-background-primary-default-on-dark);
    color: var(--color-action-primary-default-on-dark);
    font-weight: bold;
    text-decoration: none;
}

.btn-primary-on-dark:hover {
    background-color: var(--color-action-background-primary-hover-on-dark) !important;
    transition: background-color 0.2s ease;
}

.btn-primary-on-light {
    background-color: var(--color-action-background-primary-default-on-light);
    color: var(--color-action-primary-default-on-light);
    font-weight: bold;
    text-decoration: none;
}

.btn-primary-on-light:hover {
    background-color: var(--color-action-background-primary-hover-on-light)!important;
	color: var(--color-action-primary-default-on-light);
    transition: background-color 0.2s ease;
	text-decoration: none;
}

.btn-secondary-on-light {
    background-color: var(--color-action-background-secondary-default-on-light);
    color: var(--color-action-text-primary-default-on-light);
    font-weight: bold;
    text-decoration: none;
	border: 2px solid var(--color-action-border-secondary-default-on-light);
}

.btn-secondary-on-light:hover {
    background-color: var(--color-action-background-secondary-hover-on-light)!important;
	color: var(--color-action-primary-default-on-light);
    transition: background-color 0.2s ease;
	text-decoration: none;
}

.btn-secondary-on-dark {
    background-color: var(--color-action-background-secondary-default-on-dark);
    color: var(--color-action-text-primary-default-on-dark);
    font-weight: bold;
    text-decoration: none;
	border: 2px solid var(--color-action-border-secondary-default-on-dark);
}

.btn-secondary-on-dark:hover {
    background-color: var(--color-action-background-secondary-hover-on-dark)!important;
	color: var(--color-action-primary-default-on-dark);
    transition: background-color 0.2s ease;
	text-decoration: none;
}

.btn-back {
	margin-top: 16px;
	display: block;
	padding: 8px 0px;
	color: var(--color-action-text-primary-default-on-dark)!important;
}

.btn-back i {
	margin-right: 8px;
}

.btn-top i {
	margin-right: 8px;
}

.cta {
	margin: 16px;
}

/* Navbar Styles */




.nav-item {
	width: 100%;
    text-align: center;
	padding: 8px;
}

.navbar-dark .navbar-toggler {
    color: var(--color-action-text-primary-default-on-dark);
    text-transform: uppercase;
    font-size: 1.75rem;
    border: none;
}

.nav-bar-container {
	max-width: 1140px;;
}


.logo img{
		width: 64px;
		height: 64px;
}

a.logo {
	font-size: 22px;
	color: var(--color-text-secondary);
}


.navbar-dark .navbar-nav .nav-link {
	font-size: 18px;
	color: var(--color-action-primary-default-on-light);
	font-weight: bold;
}

.navbar-dark .navbar-nav .nav-link.active {
	font-size: 18px;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	border-bottom: 4px solid var(--color-action-background-primary-default-on-dark);
}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
	font-size: 18px;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	border-bottom: 4px solid #fff;
}









/* About & Contact */

/*.ben img {
	height: auto;
	width: 25%;
}*/

.intro p {
	font-family: 'Roboto Condensed', sans-serif;
	color: #fff;
	font-size: 2rem;
	font-weight: 200;
	text-align: left;
	line-height: 2.5rem;
}

.intro span {
	font-weight: 600;
	color: var(--color-text-highlight-on-dark);
}

.kudos {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.375rem;
	font-weight: 200;
	text-align: left;
	border-left: 4px solid #6B76F2;
}

.kudos .quote {
	font-style: italic;
}

.source {
	font-weight: 600;
}

.about {
	border: 7px solid #e9ecef;
}

#contactForm {
	width: 100%;
}


/* Media Queries */
 /* Navbar */


@media (min-width: 992px) {
	.navbar {
		height: 8rem;
		padding: .5rem 4rem;
	}
}



@media (min-width: 992px) { 
.mobile-nav {
	display: none;
}

}


 /*Logo*/

@media (max-width: 666px) { 

}

@media (max-width: 991px) { 

.mb-5, .my-5 {
	margin-top: .5rem !important;
	margin-bottom: 2rem !important;
}

.logo {
		width: 100%;
		text-align: center;
	}

.portfolio-thumb {
	margin-bottom: 16px;
}

.navbar-dark .navbar-toggler {
	display: none;
}

.mobile-nav {
	background: #fff;
	color: red;
/*	position: absolute;
	bottom: 0px;
	left: 0px;*/
	width: 100%;
	z-index: 5000;
	-webkit-box-shadow: 0px -5px 7px -6px rgba(0,0,0,0.21); 
	box-shadow: 0px -5px 7px -6px rgba(0,0,0,0.21);
}

footer {
	display: none;
}

.container-fluid {
	/* padding-bottom: 32px; */
}

.container {
	padding-bottom: 72px;
}

.mobile-nav li {
	padding: 0px;
	width: 100%;
	text-align: center;
}

.list-group-item.active {
    background-color: #fff;
    color: #6B76F2;
    border: none;
    border-bottom: 6px solid #6B76F2;
}

.list-group-horizontal .list-group-item:last-child {
	border-radius: 0px;
}

.mobile-nav li a {
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
}

.btn-back {
	width: 100%;
	padding: 1rem 2rem;
	width: 100%;
    text-align: center;
}


}



@media (max-width: 576px) { 

.intro p {
    font-size: 1.5rem;
    line-height: 2.0rem;
}
}

/* Footer Styles */

footer {
    padding: 25px 0;
    text-align: center;
    background-color: #fff;
}

footer span.copyright {
    font-size: 90%;
    line-height: 16px;
    text-transform: none;
}

ul.social-buttons {
    margin-bottom: 0;
}

ul.social-buttons li a {
    font-size: 20px;
    line-height: 50px;
    display: block;
    width: 50px;
    height: 50px;
    -webkit-transition: all .3s;
    transition: all .3s;
    color: #fff;
    border-radius: 100%;
    outline: 0;
    background-color: #212529;
}