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

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');


/* 
---------------------------------------------------------------------
--  General document settings                                      --
---------------------------------------------------------------------
*/
html {
  font-size: 1rem;   /* 16px */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

body {
  font-family: "Roboto", sans-serif;
  font-size: 0.875;
  color: #000000; }

@media (min-width: 768px) {
  body {
    font-size: 1rem; } }
.cursorPointer {
  cursor: pointer; }


/* 
-----------------------------------------------------------------
--  Text styling                                             --
-----------------------------------------------------------------
*/
.bodyCopyText {
  font-size: 1rem;   /* 16px */
  line-height: 2;
  text-align: justify; }

.textBold {
  font-weight: bold; }




/* 
------------------------------------------------------------------
--  Header                                                      --
------------------------------------------------------------------
*/
header {
  background: url("../images/mainImage-mobile.png");
  background-repeat: no-repeat;
  background-size: 100%;
  margin-top: 0%;
  padding: 50% 0%;
  opacity: 100%;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  text-align: center; }

@media (min-width: 768px) {
  header {
    background: url("../images/mainImage-desktoplarge.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    margin-top: 0%;
    padding: 30% 0%; } }
@media (min-width: 992px) {
  header {
    background: url("../images/mainImage-desktoplarge.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    margin-top: 0%;
    padding: 20% 0%; } }
@media (min-width: 1200px) {
  header {
    background: url("../images/mainImage-desktoplarge.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    margin-top: 0%;
    padding: 20% 0%; } }


/* 
-----------------------------------------------------------------
--  Footer                                                     --
-----------------------------------------------------------------
*/
footer {
  background-color: #191919;
  margin-top: 2%;
  padding-top: 2%;
  padding-bottom: 1%;
  color: #FFFFFF;
  text-align: center; }


footer a {
  color: #FFFFFF;
  text-decoration: none; }

footer a:link {
  color: #FFFFFF;
  text-decoration: none; }

footer a:visited {
  color: #FFFFFF;
  text-decoration: none; }

footer ul {
  list-style-type: none;
  padding-left: 0px; }

.footerCompanyName {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: 1.5rem;   /* 24px */
  margin-top: 10%;
  padding-bottom: 1%; }

@media (min-width: 768px) {
  .footerCompanyName {
    margin-top: 0%; } }

.footerLogo {
  align-items: center;
  margin-top: 10%; }

@media (min-width: 768px) {
  .footerLogo {
    margin-top: 5%; } }

.copyright {
  padding-top: 10%;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 0.6875rem;
  font-style: normal;
  text-align: center; }

@media (min-width: 768px) {
  .copyright {
    font-size: 0.6875rem; } }
@media (min-width: 992px) {
  .copyright {
    font-size: 0.875rem; } }
@media (min-width: 1200px) {
  .copyright {
    padding-top: 5%; 
    font-size: 0.875rem; } }


.socialMedia {
	width: 20%;
	margin-top: 10%;
	padding: 2% 2%;
}

@media (min-width: 768px) {
  .socialMedia {
	width: 25%;
	padding: 2% 2%; } }
@media (min-width: 992px) {
  .socialMedia {
	width: 20%;
	padding-left: 2% 2%; } }
@media (min-width: 1200px) {
  .socialMedia {
	margin-top: 0%;
	padding-top: 5%;
	width: 13%;
	padding-left: 1% 1%; } }




/* 
---------------------------------------------------------------------
--  Navigation Bar                                                 --
---------------------------------------------------------------------
*/
.navbar {
  padding: 0% 0% 0% 5%;
  margin-bottom: 0%; }

@media (min-width: 768px) {
  .navbar {
    padding: 1% 1% 1% 2%; } }
@media (min-width: 992px) {
  .navbar {
    padding: 1% 0% 1% 2%; } }
@media (min-width: 1200px) {
  .navbar {
    padding: 1% 0% 1% 1%;  
	font-size: 1.375rem;  /* 22px */ } }


.navbar-nav {
  padding: 0% 0% 0% 5%;
  padding-top: 1%;
  padding-right: 0%; }

.navbar li a {
  color: #000000; }

.navbar-default {
  border: none;
  border-radius: 0;
  background-color: #191919; }

.navbar-toggle {
  border: none; }

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #FFFFFF;
  background-color: #FFFFFF;
  text-decoration: underline #0ba7b4; }


.navbar-default .navbar-text {
  color: #FFFFFF;
}
.navbar-default .navbar-nav > li > a {
  color: #FFFFFF;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #777;
  background-color: transparent;
}



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

.companyLogoHeader {
  position: absolute;
  top: 10px;
  left: 10px; }

.companyLogo {
  padding: 2% 10% 1% 0%; }

@media (min-width: 768px) {
  .companyLogo {
    padding: 1% 10% 1% 0%; } }
@media (min-width: 992px) {
  .companyLogo {
    padding: 1% 10% 1% 0%; } }
@media (min-width: 1200px) {
  .companyLogo {
    padding: 1% 50% 1% 0%; } }


.nav > li > a {
  position: relative;
  display: block;
  padding: 5px 15px 5px 5px;
}

@media (min-width: 768px) {
  .nav > li {
    padding: 5px 0px 0px 55px; } }
@media (min-width: 992px) {
  .nav > li {
    padding: 5px 55px 0px 55px; } }
@media (min-width: 1200px) {
  .nav > li {
    padding: 5px 55px 0px 55px; } }



/* 
-----------------------------------------------------------------
--  Creating spacing between sections.                         --
-----------------------------------------------------------------
*/
.spacerXSm {
  padding-top: 1%; }

.spacerSm {
  padding-top: 2%; }

.spacerMed {
  padding-top: 3%; }

.spacerLg {
  padding-top: 5%; }

.spacerXLg {
  padding-top: 8%; }

.spacerXXLg {
  padding-top: 15%; }

.spacerMobile {
  padding-top: 5%; }

@media (min-width: 768px) {
  .spacerMobile {
    padding-top: 0%; }

  .rightPadding {
    padding-right: 4%; }

  .leftPadding {
    padding-left: 4%; } }



/* 
---------------------------------------------------------------------
--  Main Page: Product Summary Cards                               --
---------------------------------------------------------------------
*/

#productSummaryCards {
	margin-top: -30%;
}

@media (min-width: 768px) {
  #productSummaryCards {
	margin-top: -15%; } }
@media (min-width: 992px) {
  #productSummaryCards {
	margin-top: -10%; } }
@media (min-width: 1200px) {
  #productSummaryCards {
	margin-top: -7%; } }


.serviceCard {
  background-color: #FFFFFF;
  box-shadow: 0 5px 25px rgba(50, 50, 93, 0.1), 0 0px 5px rgba(0, 0, 0, 0.07);
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 0.875rem;  /* 14px */
  margin-bottom: 10%;
  cursor: pointer; }


.serviceCardHeader {
  padding-top: 3%;
  padding-bottom: 2%; 
  font-size: 1.125rem;  /* 18px */
  font-weight: bold; }

.serviceCardSummary {
  padding: 5% 3% 5% 3%; }

@media (min-width: 768px) {
  .serviceCardSummary {
	padding: 5% 7% 5% 7%; } }
@media (min-width: 992px) {
  .serviceCardSummary {
	padding: 5% 10% 5% 10%; } }
@media (min-width: 1200px) {
  .serviceCardSummary {
	padding: 5% 7% 5% 7%; } }

.serviceCardImg {
  width: 100%; }






/* 
---------------------------------------------------------------------
--  team Summary Cards                                             --
---------------------------------------------------------------------
*/

#teamSummaryCards {
  margin-top: 2%;
  font-family: "Roboto", sans-serif;
}

.teamSummaryCardImg {
  padding-top: 7%;
  width: 80%; }

.teamEmployeeName {
  padding-top: 3%;
  padding-bottom: 0%; 
  font-size: 1.125rem;  /* 18px */
  font-weight: bold; }

.teamEmployeeTitle {
  margin-top: -3%;
  padding-top: 0%;
  padding-bottom: 2%; 
  font-size: 1rem;  /* 16px */ }

@media (min-width: 768px) {
  .teamEmployeeTitle {
	  margin-top: -3%; } }
@media (min-width: 992px) {
  .teamEmployeeTitle {
	  margin-top: -3%; } }
@media (min-width: 1200px) {
  .teamEmployeeTitle {
	  margin-top: -3%; } }


.employeeSummary {
  padding: 5% 5% 5% 5%; 
  text-align: left;
  font-size: 1rem;  /* 16px */
}

@media (min-width: 768px) {
  .employeeSummary {
	padding: 5% 5% 5% 5%; } }
@media (min-width: 992px) {
  .employeeSummary {
	padding: 5% 5% 5% 5%; } }
@media (min-width: 1200px) {
  .employeeSummary {
	padding: 5% 5% 5% 5%; } }






/* 
---------------------------------------------------------------------
--  Team Expanded Cards                                             --
---------------------------------------------------------------------
*/

iframe {
  border: 0;	
}


.teamExpandedCards {
  margin-top: 2%;
  font-family: "Roboto", sans-serif;
}


.expandedEmployeeCard {
  background-color: #FFFFFF;
  box-shadow: 0 5px 25px rgba(50, 50, 93, 0.1), 0 0px 5px rgba(0, 0, 0, 0.07);
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 0.875rem;  /* 14px */
  margin-bottom: 0%;
  cursor: pointer; }

@media (min-width: 992px) {
  .expandedEmployeeCard {
	  margin-top: -88%; } }
@media (min-width: 1200px) {
  .expandedEmployeeCard {
	  margin-top: -80%; } }


.teamExpandedCardImg {
  padding-top: 7%;
  width: 100%; }

.expandedCardEmployeeName {
  padding-top: 3%;
  padding-bottom: 0%; 
  font-size: 1.125rem;  /* 18px */
  font-weight: bold; 
  text-align: left; }

.expandedCardEmployeeSummary {
  padding: 0% 0%; 
  text-align: left;
  font-size: 1rem;  /* 16px */
}


.experienceList {
  text-align: left;
  font-size: 0.875rem;  /* 14px */	
  line-height: 2;
}


.closeExpandedView {
  text-align: left;
  font-size: 1rem;  /* 14px */
  font-weight: bold;
  color: #D18729;
}


/* -----------------------------------------------------
//  Contact Form
// ----------------------------------------------------- */

#contactForm
{
	padding: 2% 2%;
	box-shadow: 0 5px 35px rgba(50, 50, 93, 0.1), 0 0px 5px rgba(0, 0, 0, 0.07);
}

#contactForm label {
  display: block;
  margin: 0;
  font-size: 1rem;
  line-height: 2; }

#contactForm placeholder {
  display: block;
  margin: 0;
  font-size: 1rem;
  line-height: 1; }

#contactForm input {
  margin-bottom: 2%;
  width: 100%;
  color: #000000; }

#contactForm textarea {
  width: 100%;
  color: #000000; }

#contactForm select {
  width: 100%;
  color: #000000; }

#contactForm select option {
  width: 100%;
  color: #000000; }


.message-success
{
	padding: 3% 2%;
	margin-top: 0%;
	margin-bottom: 2%;
}

.message-error
{
	background: rgba(255 , 0, 0, 0.10);
	padding: 3% 2%;
	margin-top: 0%;
	margin-bottom: 2%;
}


.requiredField
{
	color: #FF0000;
	font: italic;
    font-size: 0.75rem;  /* 12px */
}


/* -----------------------------------------------------
//  Buttons
// ----------------------------------------------------- */

.actionBtn
{
	line-height: 1; 
	background-color: #D18729;
	border: 1px solid #D18729;
	border-radius: 5px;
	color: #FFFFFF;
	padding: 0.65rem 1rem;
	font-size: 1rem;
	text-align: center;
}

.actionBtn:hover
{
	background-color: #FFFFFF;
	color: #000000;
}

.actionBtn:focus
{
	background-color: #D18729;
	border: 1px solid #D18729;
	color: #FFFFFF;
	border-radius: 5px;
}



/* -----------------------------------------------------
//  Slide Show
// ----------------------------------------------------- */

* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: antiquewhite;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #D18729;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 7px;
  width: 7px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #D18729;
}

/* Fading animation */
.slideshowfade {
  animation-name: fade;
  animation-duration: 5s;
}

@keyframes fade {
  from {opacity: 0.6} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}