@charset "utf-8";
/* CSS Document */

:root {
  --brand-dark: #232D4B;
  --brand-light: #C9CBD2;
  --brand-highlight: #E57200;
  --brand-neutral: #F9DCBE;
}


/* OVERALL STRUCTURE */
body { 
	background-image: url("/images/tech-background-v2.jpg");
	padding:30px;
}

#wrapper {
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	border-radius:10px;
}

.mobile-show	{ display:none;}
.mobile-hide	{ display:block;}

img { max-width:100%; }

.col-center { text-align:center; }
.col-right { text-align: right; }

.btn,
.wpforms-submit { 
	font-weight:500;
	background-color: var(--brand-dark);
	color:#fff;
	padding:10px 40px;
	border-radius:5px;
	font-size:18px;
	text-transform: uppercase;
	transition: background-color .5s;
}

.btn:hover {
	background-color: var(--brand-highlight);
	color:#fff;
}

.mt-15 { margin-top:15px; }
.mt-30 { margin-top:30px; }
.mt-40 { margin-top:40px; }
.mt-50 { margin-top:50px; }


/* TYPOGRAPHY */

h1 {
	font-family: loretta, serif;
	font-weight: 400;
	font-style: normal;
	color:#fff;
	font-size:70px;
	line-height:70px;
	padding-bottom:20px;
}

h2 {
	font-family: loretta, serif;
	font-weight: 500;
	font-style: normal;
	font-size:40px;
	line-height: 44px;
    margin-bottom: 15px;
}

h3 {
	font-family: loretta, serif;
	font-weight: 400;
	font-style: normal;
	font-size:34px;
	color:#fff;
}

h4 {
	font-family: roc-grotesk, sans-serif;
	font-weight: 600;
	font-style: normal;
	color:var(--brand-dark);
	font-size:24px;
}

h5 {
	font-family: roc-grotesk, sans-serif;
	font-weight: 500;
	font-style: normal;
	letter-spacing:.05em;
	color:var(--brand-highlight);
	font-size:20px;
	text-transform: uppercase;
}

p {
	font-family: roc-grotesk, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 18px;
	color:#000;
}


/* HEADER */

header {
	padding:0;
	width:100%;
	height:120px;
		background: var(--brand-dark);
	background: -webkit-linear-gradient(left, #1c243c 0%, #232D4B 30%, #232D4B 70%, #1c243c 100%);
	background: -o-linear-gradient(left, #1c243c 0%, #232D4B 30%, #232D4B 70%, #1c243c 100%);
	background: linear-gradient(to right, #1c243c 0%, #232D4B 30%, #232D4B 70%, #1c243c 100%);

	border-top-left-radius: 10px;
	border-top-right-radius: 10px; 
	position: relative;
}

#logo { height:85px; width:auto; margin-top:17px; }

nav ul {
	margin:0;
	padding:0;
	list-style:none;
	text-align:right;
}

nav ul li {
	display:inline-block;
	list-style: none;
	margin-left:40px;
}

nav ul li a {
	color:#fff;
	text-decoration: none;
	font-family: roc-grotesk, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size:20px;
	line-height:120px;
	transition: color .5s;
}

nav ul li a:hover,
nav ul li a.selected {
	color:var(--brand-highlight);
	text-decoration: none;
}

nav ul li a.selected {
	font-weight:600;
}


nav ul li a.nav-btn {
	font-weight:600;
	background-color: var(--brand-highlight);
	padding:10px 20px;
	border-radius:5px;
	font-size:18px;
	text-transform: uppercase;
	transition: background-color .5s;
}

nav ul li a.nav-btn:hover {
	color:#fff;
	background-color: var(--brand-highlight);
}

.mobile-nav {
	width:100%;
	text-align:right;
}

.mobile-nav i {
	color: var(--brand-highlight);
	font-size:35px;
	margin:25px 0 0;
	cursor:pointer;
}

.mobile-nav-btn {
  transition: opacity 0.2s ease;
}

.mobile-nav-btn.is-open {
  opacity: 0.5;
}

#mobile-nav-wrap{
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease-out;
  position: absolute;
  right: 25px;
}

#mobile-nav-wrap.is-open{
  max-height: 320px;
}

#mobile-nav-area { 
  background-color: var(--brand-neutral);
  border-bottom: 20px solid #000;
  padding: 15px 30px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

#mobile-nav-area ul {
	text-align:center;
	width:100%;
	margin:0;
	padding:0;
}

#mobile-nav-area ul li {
	list-style:none;
	display:block;
	padding-bottom:5px;
}

#mobile-nav-area ul li a {
	color:#fff;
	text-decoration: none;
	font-family: roc-grotesk, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size:18px;
}

#mobile-nav-area ul li a.nav-btn {
	background-color: rgba(0,0,0,.7);
	padding:5px 10px;
	border-radius:5px;
	font-weight:500;
	font-size:15px;
	letter-spacing:.05em;
	margin-top:10px;
	display: block;
	text-transform: uppercase;
}

/* HOMEPAGE */

#homepage-banner {
	background-image: url("/images/restaurant-banner-bg-v2.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width:100%;
	height:510px;
	display: flex;
	align-items: center;
}

#homepage-banner p {
	color: var(--brand-highlight);
	font-family: roc-grotesk, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 26px;
}

#homepage-banner h1,
#homepage-banner p {
	text-shadow: 5px 5px 8px rgba(0,0,0,0.9);
}


#hero-headline,
#hero-subhead {
  visibility: hidden; /* prevents flash before GSAP runs */
}

#hero-headline .hero-line,
#hero-subhead {
  display: inline-block; /* needed for transforms */
  will-change: transform, opacity;
}


.even-col {
	
	display: flex;
	align-items: center;
}
#homepage-about {
	background-color:#fff;
	padding:50px 0 100px;
}

#homepage-about img {
	width:500px;
	border-radius:10px;
}

#homepage-services {
	background-color:#fff;
	padding:100px 0;
}


#homepage-solutions {
	padding:75px 0;
	background: var(--brand-dark);
	background: -webkit-linear-gradient(left, #1c243c 0%, #232D4B 30%, #232D4B 70%, #1c243c 100%);
	background: -o-linear-gradient(left, #1c243c 0%, #232D4B 30%, #232D4B 70%, #1c243c 100%);
	background: linear-gradient(to right, #1c243c 0%, #232D4B 30%, #232D4B 70%, #1c243c 100%);
}

.service-area {
	margin-top:40px;
}

.service-box { 
	background-color:rgba(201, 203, 210, .85);
	width:100%;
	margin-bottom:20px;
	padding:30px 15px;
	border-top:1px solid #ffffff;
	border-left:1px solid #ffffff;
	border-radius:6px;
	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.service-box p {
	color:var(--brand-dark);
	font-size:16px;
	line-height:20px;
}

.service-box p a.btn {
	font-size:16px;
	margin-top:15px;
}

.service-box i {
	font-size:45px;
	color:var(--brand-dark);
	margin-bottom:20px;
}


/* SUBPAGES */

#subpage-banner {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width:100%;
	height:510px;
	display: flex;
	align-items: center;
}

#subpage-banner p {
	color:#fff;
	font-family: roc-grotesk, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 24px;
}

#subpage-banner .btn {
	color:#fff;
	letter-spacing: .05em;
    margin-top: 10px;
    font-size: 20px;
	font-family: roc-grotesk, sans-serif;
	font-weight: 500;
	background-color: var(--brand-highlight);
	padding:10px 30px;
	border-radius:5px;
	text-transform: uppercase;
	transition: background-color .5s;
	
}

#subpage-banner .btn:hover {
	color:#fff;
	background-color: var(--brand-highlight);
}




#subpage-content {
	background-color:#fff;
	padding:75px 0;
}

#subpage-content img {
	width:500px;
	border-radius:10px;
}

#subpage-content h1 {
	font-family: loretta, serif;
	font-weight: 500;
	font-style: normal;
	color: #000;
	font-size:40px;
	line-height:40px;
}

#subpage-content h2 {
	font-family: roc-grotesk, sans-serif;
	font-weight: 600;
	font-style: normal;
	letter-spacing:.05em;
	color: var(--brand-highlight);
	font-size:24px;
}

#subpage-content h4 {
	color:#000;
	font-weight:500px;
	font-size:20px; 
}

#subpage-solutions {
	padding:75px 0;
	background: var(--brand-dark);
	background: -webkit-linear-gradient(left, #1c243c 0%, #232D4B 30%, #232D4B 70%, #1c243c 100%);
	background: -o-linear-gradient(left, #1c243c 0%, #232D4B 30%, #232D4B 70%, #1c243c 100%);
	background: linear-gradient(to right, #1c243c 0%, #232D4B 30%, #232D4B 70%, #1c243c 100%);
}

#subpage-solutions .btn{
	background-color:var(--brand-highlight);
	text-transform: uppercase;
	font-family: roc-grotesk, sans-serif;
	font-weight: 500;
}

.solution-list img {
	padding:0 40px 0;
}

.service-details { text-align: center; }


/* Standard syntax for most modern browsers */
#subpage-solutions input::placeholder,
#subpage-solutions textarea::placeholder{
  color:var(--brand-dark);
  opacity: .6; /* Corrects an opacity issue in Firefox */
}

/*  FOOTER */

#footer { 
	background-color:#000; 
	color:#fff; 
	border-bottom-left-radius: 10px; 
	border-bottom-right-radius: 10px; 
}

#footer p { 
	color: var(--brand-light);
	font-size:14px; 
	margin:20px 0; 
}

#footer a {
	color: var(--brand-light); 
}
#footer a:hover { color:#fff; }

.footer-nav { text-align:right; }