html,
body {
	font-family: 'montserratregular';
	font-weight:400;
	color:#6f6f6f;
	background-color: #fff;
	overflow-x:hidden;
	-webkit-font-smoothing: antialiased;
}

body {
	font-size:13px;
	line-height: 1.428571429;
}

:root {
	--bs-link-color: #337ab7;
	--bs-link-color-rgb: 51, 122, 183;
	--bs-link-hover-color: #3D7C8F;
	--bs-link-hover-color-rgb: 61, 124, 143;

	/* The brand blue only passes contrast on dark backgrounds; on white, and behind white text, the darker shade
	   of the same hue is used (4.7:1 against white), and darker again for hover */
	--atm-blue: #55A0B7;
	--atm-blue-dark: #3D7C8F;
	--atm-blue-darker: #316373;
}

.container,
.row {
	--bs-gutter-x: 30px;
}

@media (min-width: 576px) { .container { max-width: none; } }
@media (min-width: 768px) { .container { max-width: 750px; } }
@media (min-width: 992px) { .container { max-width: 970px; } }
@media (min-width: 1200px) { .container { max-width: 1170px; } }

.list-inline {
	margin-left: -5px;
}

.list-inline > li {
	display: inline-block;
	padding-left: 5px;
	padding-right: 5px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'montserratbold';
	font-weight:normal;
	letter-spacing:1.5px;
	line-height: 1.1;
	margin-bottom: 10px;
}

h1, h2, h3 { margin-top: 20px; }
h4, h5, h6 { margin-top: 10px; }
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

p {
	margin-bottom: 10px;
}

ul {
	margin:0;
	padding:0;
    list-style:none;
}

a:hover {
	color: var(--atm-blue-dark);
}

a,
a:hover,
a:active,
a:focus {
	text-decoration: none !important;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.navbar-toggler:focus-visible,
.form-control:focus {
	outline: 2px solid #fff;
	outline-offset: 0;
	box-shadow: 0 0 0 4px #1d4f60;
}

.form-control:focus {
	border-color: #1d4f60;
}

/* The page's content area takes the focus from the skip link, and from a click on a blank part of the page (it has
   tabindex="-1"). It is not a control, so it gets no focus ring: a key pressed after such a click, F5 among them, drew
   the browser's ring around the whole page */
#main:focus {
	outline: 0;
}

.image-bg {
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	position: relative;
	z-index: 1;
}

.overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.54);
	z-index: -1;
}

.btn.btn-primary {
	color: #fff;
	font-size:14px;
	border: none;
	border-radius: 0;
	padding: 15px 45px;
    background-color: var(--atm-blue-dark);
    text-transform: uppercase;
    position: relative;
    font-family: 'montserratsemi_bold';
	--bs-btn-active-bg: #fff;
	--bs-btn-active-color: var(--atm-blue-dark);
}

.btn.btn-primary i {
	position: absolute;
	right: 0;
	top: 0;
	width: 60px;
	height: 100%;
	line-height: 60px;
	color: #000;
	background-color: #fff;
}

.btn.btn-primary:hover {
	background-color:#fff;
	color: var(--atm-blue-dark);
}

.btn.btn-primary:hover i {
	color: #fff;
	background-color: var(--atm-blue-dark);
}

.section-padding {
	padding-top: 75px;
	padding-bottom: 100px;
}

.section-title {
	margin-bottom: 80px;
}

.section-title h1,
.section-title .section-kicker {
	font-size: 20px;
	text-transform: uppercase;
	color: var(--atm-blue-dark);
	letter-spacing:2px;
}

/* A small label above a section heading; styled like the h1 it replaced so pages keep one h1 */
.section-title .section-kicker {
	font-family: 'montserratbold';
	line-height: 1.1;
	margin: 20px 0 10px;
}

.section-title h2 {
	margin-top: 0;
	letter-spacing:2px;
	text-transform: uppercase;
	font-family: 'montserratbold';
}

.navbar-default .navbar-toggler {
    border-color: #283949;
    padding: 9px 10px;
}

.navbar-default .navbar-toggler,
.navbar-default .navbar-toggler:hover,
.navbar-default .navbar-toggler:focus {
	background-color:#283949;
}

.navbar-default .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

a,
a:after,
a:before,
.btn.btn-primary i {
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

/* ==========================================================================
 	Header
 ========================================================================== */

.top-bar {
	background-color: #000;
	padding: 10px 0;
	font-size:15px;
	color:#ddd;
	border-top: 1px solid var(--atm-blue);
}

.info-box {
	display: inline-block;
	margin-right:25px;
	font-size:14px;
}

.top-bar a {
	color: #ddd;
}

.top-bar a:hover,
.top-bar a:hover .info-box i {
	color: var(--atm-blue);
}

.info-box i {
	margin-right:20px;
	margin-top: 7px;
	text-align: center;
	color: var(--atm-blue);
	float: left;
	font-size: 36px;
}

.info-text {
	overflow: hidden;
	font-weight: 300;
	display: inline-block;
}

.info-text .info-label {
	display: block;
	font-family: 'montserratbold';
	font-size: 14px;
	letter-spacing: 1.5px;
	line-height: 1.1;
	margin-top: 10px;
}

.top-social li {
	margin: 0 5px;
}

.top-social li a {
	font-size: 18px;
	line-height: 50px
}

/* main Menu */

.navbar-default {
	background-color: #fff;
	border: none;
	border-top: 1px solid var(--atm-blue);
	margin-bottom:0;
	border-radius:0;
	position:relative;
	padding: 0;
	--bs-navbar-nav-link-padding-x: 15px;
}

/* When the menu doesn't fit beside the logo, drop it to its own line */
.navbar-default > .container {
	flex-wrap: wrap;
}

.navbar-default .navbar-nav {
	--bs-nav-link-padding-x: 15px;
	--bs-nav-link-padding-y: 15px;
}

.navbar-default li {
	margin-left:15px;
	z-index: 22;
}

.navbar-default li:first-child {
	margin-left:0;
}

.navbar-default .navbar-nav {
	float:none;
}

.navbar-default .navbar-nav>li>a {
	color: #34404e;
	display:block;
	font-size: 15px;
	line-height: 75px;
	letter-spacing:1px;
	position: relative;
	z-index: 1;
	text-transform: uppercase;
	font-family: 'montserratregular';
}

.navbar-default .navbar-nav .nav-link.active,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
	color: var(--atm-blue-dark);
	background-color:transparent;
}

.navbar-brand {
	padding:0;
}

/* home */

.home-section {
	background-image: url(../images/bg/2.jpg);
	background-image: image-set(url(../images/bg/2.webp) type("image/webp"), url(../images/bg/2.jpg) type("image/jpeg"));
}

.home-content {
	color: #fff;
	padding-top: 155px;
	height:800px;
}

.home-content h1 {
	font-size: 30px;
	text-transform: uppercase;
	font-family: 'montserratbold';
}

.home-content h2 {
	font-size: 48px;
	margin-bottom: 20px;
	text-transform: uppercase;
	font-family: 'montserratextra_bold';
	letter-spacing:7px;
	max-width: 870px
}

.home-content h2 span {
	color: var(--atm-blue);
}

/* Services */

.services {
	margin-top: 150px;
}

.services .service {
	padding:15px 24px;
	font-size: 13px;
	font-family: 'montserratregular';
	min-height:165px;
}

.service-tile {
	position: relative;
}

.services .overlay {
	background-color: var(--atm-blue-dark);
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

.service:hover .overlay {
	background-color: var(--atm-blue-darker);
}

.box-title {
	overflow: hidden;
}

.box-title h3 {
	font-size: 18px;
	text-transform: uppercase;
	color: #fff;
	margin-top: 15px;
	margin-bottom: 35px;
	position: relative;
}

.image-box {
 	float: left;
 	margin-top: 20px;
 	margin-right: 20px;
 	min-height: 100px;
 	position: relative;
}

/* The home page tiles whose icon sits tight to the corner */
.image-box.image-box-flush {
	margin: 0;
}

.image-box-flush img {
	margin-right: 15px;
}

.tile-more {
	color: #fff;
	text-align: center;
	padding-top: 20px;
}

/*=========Carousel animation==========*/

#home-slider .carousel-item h1,
#home-slider .carousel-item h2,
#home-slider .carousel-item h2 span,
#home-slider .carousel-item .btn-primary {
	opacity:0;
	-moz-transform: scale(0.5);
	-webkit-transform: scale(0.5);
	-o-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
}

#home-slider .carousel-item.active h1,
#home-slider .carousel-item.active h2,
#home-slider .carousel-item.active h2 span,
#home-slider .carousel-item.active .btn-primary {
	opacity:1;
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

#home-slider h2 span {
	font-size: larger;
}

#home-slider .carousel-item h1 {
	-webkit-transition: all 0.5s ease-in-out 0.15s;
	-moz-transition: all 0.5s ease-in-out 0.15s;
	-ms-transition: all 0.5s ease-in-out 0.15s;
	-o-transition: all 0.5s ease-in-out 0.15s;
	transition: all 0.5s ease-in-out 0.15s;
}

#home-slider .carousel-item h2 {
	-webkit-transition: all 0.5s ease-in-out 0.30s;
	-moz-transition: all 0.5s ease-in-out 0.30s;
	-ms-transition: all 0.5s ease-in-out 0.30s;
	-o-transition: all 0.5s ease-in-out 0.30s;
	transition: all 0.5s ease-in-out 0.30s;
}

#home-slider .carousel-item h2 span {
	-webkit-transition: all 0.5s ease-in-out 0.45s;
	-moz-transition: all 0.5s ease-in-out 0.45s;
	-ms-transition: all 0.5s ease-in-out 0.45s;
	-o-transition: all 0.5s ease-in-out 0.45s;
	transition: all 0.5s ease-in-out 0.45s;
}

#home-slider .carousel-item .btn-primary {
	-webkit-transition: all 0.5s ease-in-out 0.65s;
	-moz-transition: all 0.5s ease-in-out 0.65s;
	-ms-transition: all 0.5s ease-in-out 0.65s;
	-o-transition: all 0.5s ease-in-out 0.65s;
	transition: all 0.5s ease-in-out 0.65s;
}

/* Slider controls: grouped at the bottom right, level with the Contact Now button and clear of the left-aligned
   headings. Where the margins are wide enough the arrows move out into them, shown on hover, as the template had them. */
.carousel-left,
.carousel-pause,
.carousel-right {
	position: absolute;
	bottom: 0;
	z-index: 2;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 0;
	border-radius: 5px;
	font-size: 32px;
	line-height: 50px;
	text-align: center;
	color: #fff;
	background-color: rgba(0,0,0,0.25);
	transition: all 0.4s ease-in-out;
}

.carousel-pause {
	right: 60px;
	font-size: 18px;
}

.carousel-left {
	right: 120px;
}

.carousel-right {
	right: 0;
}

.carousel-left:hover,
.carousel-pause:hover,
.carousel-right:hover {
	background-color: var(--atm-blue-darker);
}

@media (min-width: 1400px) {
	.carousel-left,
	.carousel-right {
		top: 50%;
		bottom: auto;
		margin-top: -25px;
	}

	.carousel-left {
		left: -100px;
		right: auto;
	}

	.carousel-right {
		right: -100px;
	}

	.carousel-pause {
		right: 0;
	}
}

@media (min-width: 1400px) and (hover: hover) {
	.carousel-left,
	.carousel-pause,
	.carousel-right {
		opacity: 0;
	}

	.home-section:hover .carousel-left,
	.home-section:hover .carousel-pause,
	.home-section:hover .carousel-right,
	#home-slider:focus-within .carousel-left,
	#home-slider:focus-within .carousel-pause,
	#home-slider:focus-within .carousel-right {
		opacity: 1;
	}
}

/* Bootstrap 5's .carousel-fade handles the text slider; these are the home background slides from custom.js */
.bg-slide {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 750ms;
}

.bg-slide.active {
	opacity: 1;
}

/* Work Process */

.work-process {
	background-image: url(../images/bg/3.jpg);
	background-image: image-set(url(../images/bg/3.webp) type("image/webp"), url(../images/bg/3.jpg) type("image/jpeg"));
}

.work-process .overlay {
	background-color:rgba(36, 38, 39, 0.9);
}

.work-process .section-title {
    color:#fff;
}

.work-process .section-title .section-kicker {
	font-size: xx-large;
	color: var(--atm-blue);		/* on the dark Values background */
}

.work-proces {
	padding: 0 35px;
}

.process-icon {
	float: left;
	margin-right: 30px;
	margin-top:35px;
}

.left-content .process-icon {
	float: right;
	margin-right: 0;
	margin-left: 35px;
}

.work-process .process-info {
	color: #fff;
	padding-top: 20px;
	padding-bottom: 15px;
	overflow: hidden;
}

.process-info h3 {
	font-family: 'montserratsemi_bold';
	font-size: 18px;
	margin-top: 10px;
}

/* Service Section  */

.service-section {
	background-image: url(../images/services/services.jpg);
	background-image: image-set(url(../images/services/services.webp) type("image/webp"), url(../images/services/services.jpg) type("image/jpeg"));
	background-position: center;
}

.service-section.section-padding {
	padding-bottom: 80px;
}

.service-section .services {
	margin-top: 0;
}

.service-section .service {
	margin-bottom: 30px;
	background-color: #707070;		/* 4.95:1 with white; it was 'grey', 3.95:1 */
	flex: 1;
}

/* Each tile fills its column, so tiles in a row match the tallest */
.service-section .services .row > div {
	display: flex;
	flex-direction: column;
}

@media (min-width: 992px) {
	.service-section .box-title h3 {
		min-height: 2.2em;
	}
}

.service-section .section-title h2,
.service-section .bullet-list li {
	color: #fff;
}

.service-section .services .overlay {
	background-color: var(--atm-blue-dark);
}

.service-section .service,
.service-section .service h3,
.service-section .service:hover .overlay {
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.service-section .service h3 {
	color: #fff;
}

.service-section .service:hover .overlay {
	color: #fff;
	background-color: var(--atm-blue-dark);
}

.service-section .service:hover h3 {
	color: #fff;
}

/* Call to Action */

.cta-section {
	background-image: url(../images/bg/get_quote.jpg);
	background-image: image-set(url(../images/bg/get_quote.webp) type("image/webp"), url(../images/bg/get_quote.jpg) type("image/jpeg"));
}

.call-to-action {
	font-size: 14px;
	color: #fff;
    padding-top: 35px;
    padding-bottom: 10px;	
	background-color: rgba(229, 229, 229, 0.97);
}

.call-to-action h3 {
	color:#6f6f6f;
	text-transform: uppercase;
	font-family: 'montserratbold';
	font-size: 26px;
	margin-bottom: 45px;
	float: left;
}

.call-to-action .btn.btn-primary {
	margin-top: 8px;
	float: right;
}

/* ==========================================================================
 	Footer
 ========================================================================== */

.contact-section {
	background-color: #000;
	padding: 50px 0;
	color: #999;
}

.contact-section h3 {
	color: #fff;
	margin-bottom: 15px;
}

.footer-social li+li {
	margin-left: 15px;
}

.footer-logo {
	padding-right: 40px;
}

.quick-links {
	overflow: hidden;
}

.contact-widget ul {
	float: left;
	width: 48%;
}

.contact-widget li {
	margin-bottom:10px;
}

.contact-widget a {
	color: #999;
}

.contact-widget .footer-social li {
	margin: 0;
	margin-right: 10px;
}

.footer-social a {
	font-size: 20px;
	color: #999;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.footer-social a:hover,
.contact-widget a:hover,
.contact-widget span {
	color: var(--atm-blue);
}

.contact-widget span {
	font-family: 'montserratsemi_bold';
}

.contact-widget address ul,
.contact-widget ul.footer-social {
	float: none;
	width: 100%;
}

.contact-widget address {
	margin-bottom: 5px;
}

.contact-widget address span {
	color: #999;
	font-weight: bold;
}

/* ==========================================================================
 	Inner Pages
 ========================================================================== */

.breadcrumb-section {
	background-image: url(../images/bg/1.jpg);
	background-image: image-set(url(../images/bg/1.webp) type("image/webp"), url(../images/bg/1.jpg) type("image/jpeg"));
	background-position:center center;
	padding-top: 30px;
	padding-bottom: 10px;
	margin: 0;
	border-radius: 0;
}

.breadcrumb-section .overlay {
	background-color:rgba(0,0,0,0.80);
}

.breadcrumb-content {
	color: #fff;
	font-size: 15px;
}

.breadcrumb-content h1 {
	margin-top: 0;
	text-transform: uppercase;
	font-family: 'montserratsemi_bold';
	letter-spacing:2px;
	float: left;
}

.breadcrumb {
	background-color: transparent;
	float: right;
	--bs-breadcrumb-padding-x: 15px;
	--bs-breadcrumb-padding-y: 8px;
	--bs-breadcrumb-margin-bottom: 20px;
	--bs-breadcrumb-item-padding-x: 5px;
	--bs-breadcrumb-divider-color: #ccc;
	--bs-breadcrumb-item-active-color: #aaa;
}

.breadcrumb a {
	color: #fff;
}

.breadcrumb a:hover {
	color: var(--atm-blue);
}

.about-section-content {
	line-height: 24px;
}

.about-section-content h2 {
	margin-bottom: 25px;
}

.about-section-content p {
	margin-bottom: 20px;
}

.about-us-image {
	margin-top: 78px;
}

/* Bulleted lists in page content (the global ul rule removes bullets) */
.bullet-list {
	list-style-position: outside;
	padding-left: 15px;
	list-style-type: unset;
}

.bullet-list-lg li {
	font-size: larger;
}

/* Services page */
.service-row {
	margin-bottom: 25px;
}

.service-catalog .about-us-image {
	margin-top: 25px;
}

/* Careers page */
.about-section-content .positions-title {
	margin-top: 25px;
	margin-bottom: 10px;
}

.positions-list {
	padding-left: 20px;
}

.positions-apply {
	margin-top: 25px;
}

/* ==========================================================================
 	Login Form
 ========================================================================== */

.login-intro {
	margin-bottom: 30px;
}

.login-message {
	margin-bottom: 15px;
}

.login-field {
	margin-bottom: 10px;
}

.login-field-last {
	margin-bottom: 25px;
}

.form-control {
	height: 55px;
	border-radius: 0;
	font-size: 15px;
	border: 1px solid #dddddd;
	margin-bottom: 20px;
	box-shadow: none;
}

/* ==========================================================================
 	Fonts
 ========================================================================== */

@font-face {
    font-family: 'montserratregular';
    font-display: swap;
    src: url('../fonts/montserrat-regular-webfont.woff2') format('woff2'),
         url('../fonts/montserrat-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratsemi_bold';
    font-display: swap;
    src: url('../fonts/montserrat-semibold-webfont.woff2') format('woff2'),
         url('../fonts/montserrat-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratbold';
    font-display: swap;
    src: url('../fonts/montserrat-bold-webfont.woff2') format('woff2'),
         url('../fonts/montserrat-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratextra_bold';
    font-display: swap;
    src: url('../fonts/montserrat-extrabold-webfont.woff2') format('woff2'),
         url('../fonts/montserrat-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}