@import url('https://fonts.googleapis.com/css?family=Patua+One|Roboto|Playfair+Display:400,400i,700,700i|Special+Elite&display=swap');

body {font-family: 'Playfair Display', serif; position: relative;}
html, body{
  height: 100%;
  position: relative;
}

.main-container {
 min-height: 100vh; /* will cover the 100% of viewport */
 overflow: hidden;
 display: block;
 position: relative;
 padding-bottom: 100px; /* height of your footer */
}

footer {
 position: absolute;
 bottom: 0;
 width: 100%;
 background: #333; color: #fff; padding: 2rem 0 1rem 0;
}

.container {padding: 0 1em;}
h1, h2, h3, h4, button {padding: 0; font-family: 'Patua One', sans-serif;}
h2 {font-size: 1.5rem; color: #666; margin-top: 1.5rem; margin-bottom: 1.5rem;}
h3 {font-size: 1.25rem; color: #666; margin-top: 1rem; margin-bottom: 0.75rem;}
h4 {font-size: 1rem; line-height: 1rem;}
p,li {margin-bottom: 2rem ; padding 0; color: #333; font-size: 1.2rem; line-height: 2rem;}
a {color: #333; text-decoration: none;}
a:hover {color: #666;}

.client_logo {max-height: 4rem; display: inline; margin-left: 2rem;}


#main-menu {background: #FFCC33; padding: 2rem 0 1rem 0;}

#aultcom-logo {height: 5rem; display: inline; margin: -1.75rem 1rem 0 0;}
h1 {font-family: 'Special Elite', sans-serif; font-size: 2.5rem; padding: 0; margin: 0; display: inline;}

.navbar-light .navbar-nav .nav-link {font-family: 'Patua One', sans-serif; padding: 0 1rem; color: #666;}
.navbar-toggler {padding: 0; border: none; }

ul.navbar-nav {margin: 1.5rem 0 0 0; padding: 0;}

.hero {height: 500px; width: 100%; position: relative; margin-bottom: 2rem; background-repeat: no-repeat; background-size: cover;}

#hero-home {background-image: url("../images/home-hero.jpg"); background-position: 75% 50%; }
#hero-team {background-image: url("../images/team-hero.jpg"); background-position: 6% 50%; }
#hero-projects {background-image: url("../images/projects-hero.jpg"); background-position: 85% 60%;}
#hero-contact {background-image: url("../images/contact-hero.jpg"); background-position: center;}
#hero-error {background-image: url("../images/error-hero.jpg"); background-position: 80% 80%;}

.hero-text {text-align:center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.hero-text h2 {font-family: 'Special Elite', sans-serif; color: #fff; font-size: 2.5rem; margin-bottom: 2.5rem;}
.button {font-family: 'Patua One', sans-serif; padding: 1em; background: #FFCC33; color: #333; text-align: center; margin: 0 auto; display: block; width: 12em; border: none;}
.button:hover {background:#666; color: white; text-decoration: none;}

.portrait {width: 50%; display: block; margin: 0 auto;}
.icon {width: 65%; display: block; margin: 0 auto;}
.bio {text-align: left;}
.left-column {padding-right: 2em;}
.right-column {padding-left: 2em;}
.linkedin {font-size: 3rem; margin-bottom: 3rem;}

.headline {background: #061629; margin-bottom: 2em; padding: 1em; color: #fff;}
.separator::before {font-family: 'Roboto', sans-serif; content:"\00a0\00a|\00a0\00a";}
.legal {font-size: 0.5rem; color: #a2a2a2;}
.modal-title {font-size: 1.2rem;}

.text-center {margin-left: auto; margin-right: auto;}
.shaded {background: #ebebeb;}
.address-block {border: 1px solid #ced4da; border-radius: 0.25rem; padding: 1rem; margin-bottom: 2rem;}
.address-block p, .address-block h3 {margin: 0; padding; 0;}

#contact-form {width: 100%; margin-bottom: 2rem;}

.slides {padding: 1em;}
.slides a {margin: 0.5em; border: 1px solid #aaa;}
.slides img {max-width: 100%;}     
.slick-next {right: -1px;}
.slick-prev {left: -1px;}
.slick-prev:before {
	color: #666!important;
}
.slick-next:before {
  color: #666!important;
}

#accordion {margin-bottom: 2em; margin-top: 1em;}
.card {background: #fff; border: 1px solid #a2a2a2; margin-bottom: 1em; }
.card-header {background: #FFCC33; color: #fff; padding: 0; }
.card-header .btn-link {color: #061629; width: 100%; text-align: left; margin-left: 0.5em; font-size:1.25rem;}
.btn-link:hover {text-decoration: none;}
.btn-link::before {font-family: 'Roboto', sans-serif; content:"+\00a0\00a0\00a0";}

.alert-success {color: #000; background-color: #ffcc33; border-color: #ced4da;}


@media (max-width: 1199px) {	
	h1 {font-size: 2rem;}
	#aultcom-logo {height: 4rem; margin-right: 0.5rem; margin-top: -1.25rem;}
	}

@media (max-width: 991px) {
	#main-menu {padding-top: 1.5rem;}
	h1 {font-size: 1.65rem;}
	h2 {font-size: 1.5rem;}
	.modal-title {font-size: 1rem; line-height: 1rem;}
	#aultcom-logo {height: 3.25rem; margin-right: 0.65rem; margin-top: -1.15rem;}
	.client_logo {max-height: 3rem; margin-left: 1em;}
	.navbar-light .navbar-nav .nav-link {font-size: 0.8rem; padding: 0 0.5rem;}
	ul.navbar-nav {margin-top: 2rem;}

}



@media (max-width: 767px) {
	#main-menu {padding-top: 1rem;}
	h1 {font-size: 1.25rem;}
	h2 {font-size: 1.25rem;}
	.hero-text h2 {font-size: 1.25rem;}
	.card-header .btn-link {font-size: 1rem;}
	.modal-title {font-size: 1rem;}
	#aultcom-logo {height: 2.5rem; margin-right: 0.5rem; margin-top: -0.875rem}
	.client_logo {max-height: 2.5rem; margin-left: 1em;}
	.bio {text-align: left;}
	.icon {width: 40%;}
    .left-column {padding-right: 1em;}
    .right-column {padding-left: 1em;}
    	.navbar-light .navbar-nav .nav-link {font-size: 1rem;}

}

@media (max-width: 575px) {
	.client_logo {max-height: 2rem; margin-left: 1em;}
	h1 {font-size: 1.25rem;}
	#main-menu {padding-top: 0.5rem; }
	#aultcom-logo {height: 2.5rem; margin-right: 0.25rem; margin-top: -0.7rem}
}

@media (max-width: 320px) {
	h2 {font-size: 1.25rem;}
	.card-header .btn-link {font-size: 0.9rem;}
	.modal-title {font-size: 0.75rem; line-height: 0.75rem;}
	.client_logo {max-height: 2rem; margin-left: 1em;}
	h1 {font-size: 1rem;}
	#aultcom-logo {height: 2rem; margin-right: 0.1rem; margin-top: -0.5rem}

}