/* 
===========================================================================================
===============================	Global CSS ================================================
===========================================================================================
*/

* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: auto;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background-color: white;
}

h1, h2, h3, h4 {
  font-family: "Inter",sans-serif;
  font-style: normal;
  font-weight: 600;
  text-transform: capitalize;
  color:#3F515C;
}

h1 {
  font-size:2.25rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

.c-head {
  color:#F48120;
}


li {
  list-style-type: none;
}

a {
  font-family: oswald, sans-serif;
  font-style: normal;
  font-weight: 500;
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

em {
  width:0;
  height:0.25em;
  position: relative;
  display:block;
  background-color:#F48120;
  -webkit-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  box-sizing: border-box;
}

p {
  font-family: proxima-nova, sans-serif;
  font-size:1.1em;
  font-weight:400;
  line-height:2.2;
  font-style: normal;
  color:rgb(53, 53, 53);
}

a:focus, label:focus {
  background-color: transparent;
  outline: none;
  outline-width: 0;
  outline-style: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input[type='checkbox'] {
	width:100%;
	height:100%;
	position:absolute;
	display:none;
	top:0;
	right:0;
	clip:rect(0, 0, 0, 0);
	cursor:pointer;
}

button {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  color:white;
  font-family: proxima-nova, sans-serif;
  font-size: 1.1em;
  font-weight: 400;
  font-style: normal;
  outline: none;
  border-width: 0;
  border-color: unset;
  border-image: unset;
  background-color: unset;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer; 
  box-sizing: border-box;
}

button a {
  font-family: proxima-nova, sans-serif;
  font-size: 1.1em;
  font-weight: 400;
  line-height: 2.2;
  font-style: normal;
}

.icon-bg {
  width: auto;
  height: auto;
  position: relative;
  display: block;
  margin: 0 0.33rem 0 0;
  box-sizing: border-box;
}

.icon-bg svg {
  width: 1.25em;
  height: 1.25em;
  fill: #e3dfdf;
  
}

/*Section hide/show CSS*/

.hide {
  display: none !important;
}

.current {
  display:block;
}

.no-scroll {
  overflow:hidden;
}

/*-------- Scrollbar CSS ------*/

/* width */
::-webkit-scrollbar {
  width:0.5em;
}

/* Track */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background-color:#d9d9d9;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background-color:#b8b6b6;
}

:root{
  scrollbar-color: #d9d9d9 !important;
  scrollbar-width: thin !important;
}

/*
===========================================================================================
==================================	Shared CSS ===========================================
===========================================================================================
*/

main {
  width:100%;
  height:100%;
  position:relative;
  display:block;
  margin:10.705em 0 0;
  top:0;
  transform-origin:center center;
  -webkit-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);  
}

main section {
  width: 100%;
  height:auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  background-color:white;
  -webkit-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
}

main section:nth-of-type(odd) {
  background-color: #f2f2f2;
}

.cover {
  height:75vh;
  max-height: 40em;
}

.background {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
  z-index: 0;
}

.background-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.33);
  top: 0;
  left: 0;
  -webkit-transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
  z-index: 0;
}

.title {
    width: calc(100% - 2em);
    height: auto;
    display: flex;
    text-align: center;
    flex-direction: column;
    margin: 0 auto;
    z-index: 1;
}

.title h1 {
    font-size: 4.375em;
    font-weight: 600;
    letter-spacing: 0.0375em;
    color: white;
    z-index: 1;
}


.section-inner {
	width:calc(100% - 12.5em);
	height:auto;
	position: relative;
	display:flex;
  flex-wrap: wrap;
	margin:0 auto;
	padding:6.25em 0;
  box-sizing: border-box;
}

.section-inner.short {
  max-width:72em;
}

.short .section-body {
    flex-direction: column;
}

.section-title {
	width:100%;
	position:relative;
	margin:0 auto;
	text-align:center;
}

.section-title h2 {
  margin:0 auto 0.5em;
}

.section-title em {
	width:3.125em;
  height: 0.125em;
	display:block;
	margin:0 auto;
	background-color:#F48120;
}

.section-body {
	width:100%;
	position: relative;
	display:flex;
	flex-wrap:wrap;
	margin:1.5em auto 0;
	box-sizing:border-box;
}

.non-flex.section-body {
  display: block;
}

.section-body p {
  margin:0 0 1rem;
}

.section-body p strong {
  width: 100%;
  display: flex;
  font-style: italic;
}

main ul,
.section-body ul {
  display: flex;
  flex-wrap: wrap;
  align-self: flex-start;
  margin: 0 auto 1rem;
}

main ul li,
.section-body ul li {
  font-family:proxima-nova, sans-serif;
  font-size:1.1em;
  font-weight:400;
  line-height:1.6em;
  list-style-type:disc;
  box-sizing:border-box;
}

.section-inner .column {
  width: 50%;
  height: auto;
  position: relative;
  box-sizing: border-box;
}

.carousel-column,
.section-inner .carousel-column {
	width: calc(50% - 3.5rem);
	height: 33vw;
	float:right;
	margin:0 0 3.5rem 3.5rem;
}

.column .carousel {
  width: 100%;
  height: 100%;
}

.column h3,
.column h4 {
  margin:0 0 1rem;
}


.image-layer {
	width: 100%;
	height:100%;
	position: relative;
	display: block;
	float:right;
	box-sizing: border-box;
}

.image-layer figure {
	width:calc(100% - 4.5em);
	height:100%;
	position: relative;
	display: block;
	margin: 0 1.5em 0 3.5em;
	background-size: cover;
	background-repeat: no-repeat;
	background-position:center;
	box-sizing: border-box;
}

.image-layer img {
  width: 100%;
  height: auto;
  display: block;
}

.list-item, .img-list-item {
	width:auto;
	height:auto;
	position: relative;
  display:flex;
  flex-wrap:wrap;
	margin:1.5em;
	box-sizing:border-box;
}

.double .list-item {
  width: calc(100%/2 - 3.125rem);

}

.threes {
  max-width:108em;
}

.threes .list-item {
  width:calc(100%/3 - 3.125em);
}

.list-border {
  border-width:0.0125em;
	border-style:solid;
  border-color: #d9d9d9;
}

.list-item figure, .img-list-item figure {
	width:100%;
	height:calc(100vw/3 *(2/3) - 3em);
  max-height: 23.75em;
	position:relative;
	display:block;
	background-position:top left;
	background-size:cover;
	background-repeat:no-repeat;
}

.list-item svg {
  width:2em;
  height:2em;
  position: relative;
  display:block;
  padding:0.75em;
  border-radius: 0.5em;
  background-color:#F48120;
	fill:white;
}

.list-item .content {
	padding:1.5em;
}

.list-item h3 {
  width: auto;
}

.list-item p {
	margin:1.5em 0;
}

.list-item a {
	margin:1.5em 0 0;
	color:#F48120;
}

.list-item a i {
	position:relative;
  display:inline-block;
  padding:3px;
  margin:1.5px 7.5px;
  border-width: 0 2px 2px 0;
  border-color:#F48120;
  border-style: solid;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.list-heading {
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

.list-item .list-heading h3 {
  width:100%;
  margin:0 0 0 1em;
}

.list-item .list-heading a {
  margin:0;
  box-sizing: border-box;
}

.icon-list {
  width: 100%;
  list-style-type: none;
}

.section-body .icon-list {
  margin:1em auto 1em;
}

.icon-list li {
  width:calc(100%/2 - 1.5em);
  position: relative;
  display: flex;
  align-items: center;
  margin:0 1.5em 1.5em 0;
  box-sizing: border-box;
}

.icon-list li svg {
  width:2em;
  height:2em;
  position: relative;
  display: block;
  margin:0 1em 0 0;
  fill:#F48120;
  box-sizing: border-box;
}

.icon-list.odd li {
  width: 100%;
  margin:0 auto 1.5em;
}

.quick-links {
  display:flex;
  margin:0 auto;
  z-index:1;
}

.quick-links a, .btn {
  width:auto;
  display:flex;
  align-items:center;
  margin:0 1.5em 0 0;
  padding:0.75em 2em;
  border-radius:6.25em;
  font-family: oswald, sans-serif;
  font-style: normal;
  font-weight: 500;
  text-align:center;
  color:white;
  background-color:#F48120;
  cursor: pointer;
  box-sizing:border-box;
}

.quick-links a svg {
  width:1.5em;
  height:1.5em;
  display:block;
  margin:0 0.75em 0 0;
  fill:white;
}

.question-heading {
  width:100%;
  height: auto;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.question-heading svg {
  background-color:transparent;
}

.question-heading .plus-sign {
  width:1em;
  height:1em;
  position: relative;
  display: block;
  padding:0;
  box-sizing: border-box;
}

.question-heading .plus-sign line {
  fill: none;
  stroke: #F48120;
  stroke-width: 2.2094;
  stroke-miterlimit: 10;
  stroke-dasharray: 68;
  -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.answer {
  width: 100%;
  height:auto;
  position: relative;
  display: block;  
  font-size: 0;
  -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  box-sizing: border-box;
}

.answer p {
  width: auto;
  height: auto;
  position: relative;
  display: block;
  -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  box-sizing: border-box;
}

.visible .plus-sign .vertical {
  stroke-dashoffset:68;
}

.visible .answer {
  font-size:1em;
}

.link {
  font-family: proxima-nova, sans-serif;
  color: #F48120;
}



/* 
===========================================================================================
================================= Navigation Menu CSS  ====================================
===========================================================================================
*/

#hmbg {
  width:3.75em;
  height:3.75em;
  position:fixed;
  display:none;
  margin:0;
  -webkit-transition: all 0.85s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 0.85s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.85s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.85s cubic-bezier(0.645, 0.045, 0.355, 1);
  cursor: pointer;
  outline: none !important;
  z-index: 4;
}

#hmbg line {
  fill: none;
  stroke: #3a3c48;
  stroke-width: 5.2094;
  stroke-miterlimit: 10;
  stroke-dasharray: 68;
}

#hmbg .open, #hmbg .close {
  position: absolute;
  display:flex;
  flex-wrap:wrap;
  margin:1em;
  right:0;
}


#hmbg .open line {
  -webkit-transition: all 0.85s ease-in-out;
  transition: all 0.85s ease-in-out;
}

#hmbg .close line {
  stroke:#F48120;
  stroke-dashoffset:68;
  -webkit-transition: all 1.085s ease-in-out;
  transition: all 1.025s ease-in-out;
}

header {
  width: 100%; 
  height:auto;
  position:fixed;
  display:flex;
  flex-wrap:wrap;
  top:0;
  left:0;
  right:0;
  background-color:white;
  /*background-color: #2e383e;*/
  -ms-box-shadow:-12px 0 12px rgba(77, 77, 77, 0.5);
  -webkit-box-shadow:-12px 0 12px rgba(77, 77, 77, 0.5);
  -moz-box-shadow:-12px 0 12px rgba(77, 77, 77, 0.5);
  box-shadow:-12px 0px 12px rgb(77 77 77 / 50%);
  -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  z-index:4;
}

.header-inner {
  width:auto;
  height:auto;
  position: relative;
  display:flex;
  margin:0 auto 0 0;
  -webkit-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.logo {
  width: auto;
  height: auto;
  position:relative;
  display: block;
  margin:0.5em 1.5em;
  cursor: pointer;
  box-sizing: border-box;
}

.logo svg {
  width:16em;
  height: auto;
  position: relative;
  display: block;
  box-sizing: border-box;
}

.st0,
.st1,
.st2,
.st3,
.st4,
.st5,
.st6,
.st7,
.st8 {
  -webkit-transition:all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition:all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.st0{fill:url(#SVGID_1_);}
.st1{fill:url(#SVGID_2_);}
.st2{fill:url(#SVGID_3_);}
.st3{fill:url(#SVGID_4_);}
.st4{fill:url(#SVGID_5_);}
.st5{fill:#627989;}
.st6{fill:#F26F21;}
.st7{fill:#3F515C;}
.st8{fill:#F48120;}


.light-logo .st5 {
  fill: #a29b9b;
}

.light-logo .st7 {
  fill: #cccccc;
}


.contactLabel {
  width:1.5em;
  height:1.5em;
  position:fixed;
  display:flex; 
  align-items: center;
  padding:0.625em;
  margin:2.25em 3.125em 2.5em 1em;
  right:0;
  top:0;
  border-radius:50%;
  background-color:#F48120;
  -webkit-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  cursor: pointer;
  z-index:6;
}

.contactLabel svg {
  width:100%;
  height:100%;
  position: absolute;
  padding:0.625em;
  top:0;
  right:0;
  left:0;
  -webkit-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  fill:white;
  box-sizing:border-box;
}

.contactLabel .close {
  padding:0.75em;
}

.contactLabel .close line {
  stroke:white;
  stroke-width:7.2094;
  stroke-miterlimit: 10;
  stroke-dashoffset:68;
  stroke-dasharray: 68;
  -webkit-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
}

nav {
  width:100%;
  height:auto;
  position:relative;
  display:flex;
  top: 0;
  left: 0;
  margin:0 0 0 auto;
  background-color:#2e383e;
  -webkit-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  box-sizing: border-box;
  z-index:1;
}

nav ul {
  width:auto;
  height:auto;
  position: relative;
  display:flex;
  flex-wrap:wrap;
  margin:0 auto;
  box-sizing: border-box;
}

nav ul li {
  width:auto;
  height:auto;
  position: relative;
  display:flex;
  margin:0 1em;
  list-style-type: none;
  box-sizing: border-box;
}

.dropdown {
  width:100%;
  height:auto;
  position:relative;
  display: flex;
  font-family: oswald, sans-serif;
  font-style: normal;
  font-weight: 500;
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  box-sizing: border-box;
}

nav ul li:nth-child(1) {
  transition: transform 0.65s ease-in-out;
  -webkit-transition: transform 0.65s ease-in-out;
  -moz-transition: transform 0.65s ease-in-out;
  -o-transition: transform 0.65s ease-in-out;
}

nav ul li:nth-child(2) {
  transition: transform 0.75s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out;
  -webkit-transition: transform 0.75s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out;
  -moz-transition: transform 0.75s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out;
  -o-transition: transform 0.75s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out;
}

nav ul li:nth-child(3) {
  transition: transform 0.85s ease-in-out;
  -webkit-transition: transform 0.85s ease-in-out;
  -moz-transition: transform 0.85s ease-in-out;
  -o-transition: transform 0.85s ease-in-out;
}

nav ul li:nth-child(4) {
  transition: transform 0.95s ease-in-out;
  -webkit-transition: transform 0.95s ease-in-out;
  -moz-transition: transform 0.95s ease-in-out;
  -o-transition: transform 0.95s ease-in-out;
}

nav ul li:nth-child(5) {
  transition: transform 1.05s ease-in-out;
  -webkit-transition: transform 1.05s ease-in-out;
  -moz-transition: transform 1.05s ease-in-out;
  -o-transition: transform 1.05s ease-in-out;
}

nav ul li:nth-child(6) {
  transition: transform 1.15s ease-in-out;
  -webkit-transition: transform 1.15s ease-in-out;
  -moz-transition: transform 1.15s ease-in-out;
  -o-transition: transform 1.15s ease-in-out;
}

nav ul li a,
.nav-item {
  width: 100%;
  display:flex;
  align-items:center;
  padding:0.8em 1em;
  font-size: 1.1em;
  text-align: center;
  color:#bdbdbd;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

nav ul li a strong,
.nav-item strong {
  font-weight: normal;
  font-size:1.04em;
}

nav ul li a svg,
.nav-item svg {
  width:1.5em;
  height:1.5em;
  display:block;
  margin:0 0.5em 0 0;
  fill:#bdbdbd;
}

nav ul li em {
  width:0;
  position: absolute;
  display: none;
  bottom:0;
  left: 0;
}

nav ul li ul {  
  width:16em;
  height:auto;
  position: absolute;
  display: flex;
  top: 100%;
  left: 0;
  padding: 0;
  box-sizing: border-box;
}

nav ul li ul li {
  width: 100%;
  height:auto;
  position: relative;
  display: flex;
  margin: 0;
  background-color:#2e383e;
}

nav ul li ul li a {
  width: 100%;
  height:auto;
  position: relative;
  font-size: 0;
  color:white;
  box-sizing: border-box;
}

nav ul > li > ul > li > a > svg,
nav ul > li > ul > .nav-item > a > svg {
  fill: white;
}

nav ul > li > ul > li > em,
nav ul > li > ul > .nav-item > em {
  width:0.25em;
  height: 0;
  display: none;
  bottom: unset;
}

/* Menu Animation when Hamburger Icon Clicked  */
#nav-trigger:checked ~ header {
  align-items:flex-start;
}

#nav-trigger:checked ~ header .header-inner {
  background-color: #2e383e;
}

#nav-trigger:checked ~ header #hmbg {
  background-color:transparent;
  box-shadow:0 0 0 transparent;
  -webkit-box-shadow:0 0 0 transparent;
}

#nav-trigger:checked ~ header #hmbg .open line {
  stroke-dashoffset: 68;
}

#nav-trigger:checked ~ header #hmbg .close line {
  stroke-dashoffset: 0;
}

#nav-trigger:checked ~ header nav {
  -webkit-transform:translate(0, 0);
  -ms-transform:translate(0, 0);
  -moz-transform:translate(0, 0);
  transform:translate(0, 0);
}

#nav-trigger:checked ~ header nav ul li {
  -webkit-transform:translateY(0);
  -ms-transform:translateY(0);
  -moz-transform:translateY(0);
  transform: translateY(0);
}

#nav-trigger:checked ~ main {
  overflow:hidden;
}

#nav-trigger:checked ~ .overlay {
  -webkit-transform:translate(0, 0);
  -ms-transform:translate(0, 0);
  -moz-transform:translate(0, 0);
  transform:translate(0, 0);
  z-index:1;
}

/*Hover Effects for Navigation*/


nav ul li a:hover, 
nav ul li button:hover,
.nav-item:hover,
.highlight {
  color:#F48120;
}

nav ul li a:hover svg, 
nav ul li button:hover svg, 
.nav-item:hover svg,
.highlight svg {
  fill:#F48120;
}

nav ul > li:hover > em,
.nav-item:hover > em {
  width: 100%;
}

nav ul > li > ul > li:hover > em,
nav ul > li > ul > .nav-item:hover > em {
  width:0.25em;
  height:100%;
}

nav ul li:hover > ul li a {
  font-size: 1.1em;
}

.social {
  width:auto;
  display:flex;
  align-items:center;
  margin:0 0 0 auto;
}

.social ul {
  width:auto;
  display:flex;
  align-items:center;
  margin:0 0 0 auto;
}

.social ul li {
  width: auto;
  height: auto;
  position: relative;
  display: flex;
  margin: 0 1em 0 0;
}

.social ul li a,
.social ul li button {
  width:1.5em; 
  height:1.5em;
  position: relative;
  display:flex; 
  padding:0;
  box-sizing: border-box;
}

.social ul li a svg,
.social ul li button svg {
  width:1.5em;
  height:1.5em;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  fill:#bdbdbd;
  box-sizing: border-box;
}

nav .social {
  margin: 0 6.75em 0 0;
}

.overlay {
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  background-color:rgba(0,0,0,0.6);
  -webkit-transform:translate(0, -100%);
  -ms-transform:translate(0, -100%);
  -moz-transform:translate(0, -100%);
  transform:translate(0, -100%);
  -webkit-transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
  z-index: 4;
}

/*Expanding Arrow for Dropdown Menu*/

.dropdown-icon {
  width: auto;
  height: auto;
  display: flex;
  position: relative;
  top: 0;
  right: 0;
  margin:0 0 0 1em;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.carrot-top {
  width:0.75em;
  height: 0.75em;
  position:relative;
  display: inline-block;
  top:0;
  left:0;
  transition: 0.4s ease;
  margin:0.0125em 0;
  text-align: left;
  transform: rotate(0deg);
  float: right;
}
.carrot-top:before, 
.carrot-top:after {
  position: absolute;
  content: "";
  display: inline-block;
  width:0.75em;
  height:0.25em;
  background-color:#bdbdbd;
  transition:all 0.4s ease;
}
.carrot-top:after {
  position: absolute;
  transform: rotate(90deg);
  top: -0.3125em;
  left: 0.3125em;
}

.carrot-top:before, 
.carrot-top:after {
  background-color: transparent;
  width: 0.1875em;
  height: 0.625em;
  display: inline-block;
  position: absolute;
  border-width:0 0 0.75em;
  border-style:  solid;
  border-color: #bdbdbd;
  top: 0;
  left: 0;
  transform: rotate(0);
}
.carrot-top:before {
  transform: rotate(-135deg);
}
.carrot-top:after {
  transform: rotate(135deg);
}

/* Hover effect for dropdown carrot top*/

.olMenu:hover .dropdown svg {
  fill:#F48120;
}

.olMenu:hover .dropdown strong {
  color:#F48120;
}

.olMenu:hover .dropdown .carrot-top {
  transform: rotate(0);
  transform: translate(0, -0.375em);
}
.olMenu:hover .dropdown .carrot-top:before {
  transform: rotate(-45deg);
  border-color:#F48120;
}
.olMenu:hover .dropdown .carrot-top:after {
  transform: rotate(45deg);
  border-color:#F48120;
}


/*Expanding arrow for Mobile submenu*/

.expanding-arrow {
  width: 30px;
  height: 3px;
  position: relative;
  display: none;
  margin: 0 auto;
  top: 0;
  left: 0;
  cursor: pointer;
  background:#bdbdbd;
}
.expanding-arrow:before, .expanding-arrow:after {
  content: "";
  background:#bdbdbd;
  position: absolute;
  height: 3px;
  width: 15px;
}
.expanding-arrow:before {
  right: -3px;
  bottom: -4px;
  transform: rotate(-45deg);
}
.expanding-arrow:after {
  right: -3px;
  top: -4px;
  transform: rotate(45deg);
}

#expandSub + label > .expanding-arrow:before {
  animation: expanding-sub-before-reverse 1s ease 0s 1 alternate both;
}
#expandSub + label > .expanding-arrow:after {
  animation: expanding-sub-after-reverse 1s ease 0s 1 alternate both;
}
#expandSub:checked + label > .expanding-arrow:before {
  animation: expanding-sub-before 1s ease 0s 1 alternate both;
}
#expandSub:checked + label > .expanding-arrow:after {
  animation: expanding-sub-after 1s ease 0s 1 alternate both;
}

@keyframes expanding-sub-after {
  0% {
    right: -3px;
    top: -4px;
    transform: rotate(45deg);
  }
  50% {
    width: 3px;
    border-radius: 50%;
    top: -20px;
    left: 15px;
  }
  100% {
    left: -3px;
    bottom: -4px;
    transform: rotate(135deg);
    height: 3px;
    width: 15px;
    background: #bdbdbd;
  }
}

@keyframes expanding-sub-before {
  0% {
    right: -3px;
    bottom: -4px;
    transform: rotate(-45deg);
  }
  50% {
    width: 3px;
    border-radius: 50%;
    bottom: -20px;
    left: 15px;
  }
  100% {
    left: -3px;
    bottom: -4px;
    transform: rotate(-135deg);
    height: 3px;
    width: 15px;
    background:#bdbdbd;
  }
}

@keyframes expanding-sub-after-reverse {
  0% {
    left: -3px;
    bottom: -4px;
    transform: rotate(135deg);
    height: 3px;
    width: 15px;
    background: #bdbdbd;
  }
  50% {
    width: 3px;
    border-radius: 50%;
    top: -20px;
    left: 15px;
  }
  100% {
    right: -3px;
    top: -4px;
    transform: rotate(45deg);
  }
}

@keyframes expanding-sub-before-reverse {
  0% {
    left: -3px;
    bottom: -4px;
    transform: rotate(-135deg);
    height: 3px;
    width: 15px;
    background: #bdbdbd;
  }
  50% {
    width: 3px;
    border-radius: 50%;
    bottom: -20px;
    left: 15px;
  }
  100% {
    right: -3px;
    bottom: -4px;
    transform: rotate(-45deg);
  }
}





/* 
===========================================================================================
============================= Service Image Background CSS  ===============================
===========================================================================================
*/


.serviceBg .list-item {
	border-width:0.0125em 0.0125em 0.25em 0.0125em;
	border-color:#d9d9d9 #d9d9d9 #F48120 #d9d9d9;
	border-style:solid;
}

.serviceBg .list-heading {
	padding:1.5em;
}

.serviceBg .list-heading h3 {
	margin:0;
}

.serviceBg .list-item:first-child figure {
	background-image: url('../img/overlays/residential.jpg');
}

.serviceBg .list-item:nth-child(2) figure {
	background-image: url('../img/overlays/commercial.jpg');
}

.serviceBg .list-item:nth-child(3) figure {
	background-image: url('../img/overlays/lighting.jpg');
}

.serviceBg .list-item:nth-child(4) figure {
	background-image: url('../img/overlays/panels.png');
}

.serviceBg .list-item:nth-child(5) figure {
	background-image: url('../img/overlays/surge.jpg');
}

.serviceBg .list-item:nth-child(6) figure {
	background-image: url('../img/overlays/troubleshooting.jpg');
}

.cta.section {
  background-color: #3b4951;
}

.cta.section .section-title h2,
.cta.section .section-title h3 {
  color:#fff;
}

.cta.section .section-body {
  flex-direction: column;
  justify-content: center;
  color:#fff;
  text-align: center;
}

.cta.section .section-body p {
  color:#fff;
}

.cta.section .btn {
  align-self: flex-start;
  margin: 1rem auto;
}

/* 
===========================================================================================
====================================== Address CSS ========================================
===========================================================================================
*/

.address {
  width: auto;
  height: auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 1em 0;
  box-sizing: border-box;
}

.address ul {
  width:100%;
  height: auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  box-sizing: border-box;
}


.address ul li {
  width:100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  margin:0 0 1em;
  box-sizing: border-box;
}

.address ul li a,
.address ul li button {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  color:#3F515C;
  font-family: proxima-nova, sans-serif;
  font-size: 1.1em;
  font-weight: 400;
  font-style: normal;
  box-sizing: border-box;
}


.address ul li .icon-bg {
  display: flex;
  align-items: center;
  align-content: center;
  padding: 0.5rem;
  border-radius: 100%;
  background-color: #F48120;
  box-sizing: border-box;
}    

.address ul li .icon-label,
.address ul li button .icon-label {
  width:auto;
  justify-content: center;
  margin:0 0.33em 0 0;
  color:white;
}

.address ul li svg,
.address ul li .icon-bg svg {
  fill:#e3dfdf;
}

.box-style {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.box-style .address {
  width: 100%;
}

.box-style .address ul li {
  width:calc(100%/4 - 0em);
  flex-direction: column;
  flex-grow: 1;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  border-width: 0 0.0125em 0 0;
  border-style: solid;
  border-color:#F48120;

}

.box-style .address ul li:last-of-type {
  border-width: 0;
}

.box-style .address ul li a,
.box-style .address ul li button {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  padding: 2em;
}

.box-style .address ul li svg {
  width: 3em;
  height: 3em;
  margin:1em auto;
  fill:#F48120;
}

.box-style .address ul li .icon-bg {
  padding:0;
  border-radius:unset;
  background-color:unset;
  box-sizing: border-box;
}  

.box-style .address ul li .icon-label,
.box-style .address ul li button .icon-label {
  width:100%;
  justify-content: center;
  align-items: center;
  text-align: center;  
  margin: 0 0 1em;
  color:#F48120;
}

.box-style .address ul li a:hover,
.box-style .address ul li button:hover {
  background-color: #F48120;
}

.box-style .address ul li a:hover svg,
.box-style .address ul li button:hover svg {
  fill:white;
}

.box-style .address ul li a:hover .icon-label,
.box-style .address ul li button:hover .icon-label {
  color: white;
}


/* 
===========================================================================================
================================== Contact Widget CSS  ====================================
===========================================================================================
*/


#contactWidget {
  width:100%;
  height:100vh;
  position:fixed;
  display:flex;
  top:0;
  right:0;
  background-color:transparent;
  box-sizing:border-box;
  transform-origin: top right;
  -webkit-transform:translate(0, -100%);
  -ms-transform:translate(0, -100%);
  -moz-transform:translate(0, -100%);
  transform:translate(0, -100%);
  -webkit-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  overflow:auto;
  z-index:5;
}

.contact-box {
  width: auto;
  max-width: 1400px;
  height: auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  background-color: white;
  box-sizing: border-box;
}

.contact-box h2 {
  text-align: center;
}

.contact-box em {
  width: 3.125em;
  height: 0.125em;
  display: block;
  margin: 1em auto;
  background-color: #F48120;
}

.contact-box .section {
  width: calc(100%/3 - 0em);
}

.contact-box .sidebar {
  height: auto;
  position: relative;
  flex-wrap: wrap;
  padding:0;
  background-color:#2e383e;
  box-sizing: border-box;
  z-index: 0;
}

.contact-box .sidebar-inner {
  width:100%;
  height: auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding:2em;
  box-sizing: border-box;
}

.contact-box .sidebar h2,
.contact-box .sidebar h4 {
  font-weight: normal;
  color:white;
}

.contact-box .sidebar figure {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  background-size:cover;
  background-image:url('../img/slideshow/cover.jpg');
  background-position:center;
  background-repeat:no-repeat;
  box-sizing: border-box;
}
.contact-box .sidebar .social {
  margin:1em 0;
}

.contact-box .sidebar .social ul {
  margin:0;
}

.contact-box .sidebar .social a {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  align-content: center;
  padding: 0.5rem;
  border-radius: 100%;
  background-color: #F48120;
  box-sizing: border-box;
}

.contact-box .sidebar .social a svg { 
  width: 1.25em;
  height: 1.25em;
  fill: #e3dfdf;
}

.contact-box .sidebar .reviews {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 1em 0;
  box-sizing: border-box;
}

.reviews a img {
  width: 16em;
  height: auto;
  position: relative;
  display: block;
  margin:1em auto;
  box-sizing: border-box;
}

.contact-box .sidebar .address ul li a:hover .icon-label,
.contact-box .sidebar .address ul li button:hover .icon-label {
  color:#F48120;
}

.contact-box .sidebar .address ul li a:hover svg,
.contact-box .sidebar .address ul li button:hover svg,
.contact-box .sidebar .social a:hover svg {
  fill:white;
}

.message {
  padding:2em;
  position: relative;
  background-color: white;
  box-sizing: border-box;
  z-index: 0;
}

.message form {
  width: 100%;
  position: relative;
  display:flex;
  flex-wrap:wrap;
  box-sizing:border-box;
}

.message form .form-group label {
  width: 100%;
  position: relative;
  margin:0 0 0.5em;
  font-family: proxima-nova, sans-serif;
  font-style: normal;
  font-weight: 500;
}

.message form input, .message form textarea {
  width:100%;
  height:auto;
  position:relative;
  padding:1em;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(128,128,128, 0.3);
  border-radius:0.625em;
  background-color: transparent;
  font-family: proxima-nova, sans-serif;
  font-style: normal;
  font-weight: 500;
  box-sizing: border-box;
}

.message form textarea {
  height:8.75em;
  font-family: proxima-nova, sans-serif;
  font-style: normal;
  font-weight: 500;
  resize:none;
}

.form-group {
  width:100%;
  height: auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin:0 0 1em;
  box-sizing: border-box;
}

.error {
  height:1.25em;
  position: relative;
  display: block;
  padding:0.5em 0;
  font-family: proxima-nova, sans-serif;
  font-style: normal;
  font-weight: 500;
  color: #ff0000;
}

#submit {
  width:auto;
  position: relative;
  display: block;
  padding: 0.75em 1em;
  border-radius:0.5em;
  background-color:#F48120;
  color: #fff;
  white-space: nowrap;  
  border-width:0;
  border-style:solid;
  border-color:transparent;
  outline: none;
  cursor: pointer;
}

.contact-box .map {
  height:auto;
  position: relative;
  display: flex;
  box-sizing: border-box;
}

#contactBox:checked ~ .contactLabel .open {
  fill:transparent;
}

#contactBox:checked ~ .contactLabel .close line {
  stroke-dashoffset:0;
}

#contactBox:checked ~ #contactWidget {
  -webkit-transform:translate(0, 0);
  -ms-transform:translate(0, 0);
  -moz-transform:translate(0, 0);
  transform:translate(0, 0);
}

#contactBox:checked ~ .overlay {
  -webkit-transform:translate(0, 0);
  -ms-transform:translate(0, 0);
  -moz-transform:translate(0, 0);
  transform:translate(0, 0);
}

main #contact {
	background-color: #fff;
}

#contact .message {
	margin:0 auto;
}



/* 
===========================================================================================
=============================== Social Media Circle CSS  ==================================
===========================================================================================
*/

#connectLabel {
  width:1.5em;
  height:1.5em;
  position:fixed;
  display: none;
  justify-content:center;
  align-items:center;
  padding:0.625em;
  border-radius:100%;
  bottom:1em;
  left:1em;
  background-color: #dc143c;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition:all 0.86s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition:all 0.86s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.86s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.86s cubic-bezier(0.645, 0.045, 0.355, 1);
  cursor: pointer;
  z-index:1;
}

#connectLabel svg {
  width:1.5em;
  height:1.5em;
  position:relative;
  display:inline-block;
  fill: #fff;
}

.connections {
  width:auto;
  height:auto;
  position:fixed;
  display:flex;
  justify-content:center;
  align-items:center;
  bottom:0;
  left:0;
  -webkit-transform:scale(0.1);
  -ms-transform:scale(0.1);
  -moz-transform:scale(0.1);
  transform:scale(0.1);
  transform-origin: bottom left;
  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  overflow:hidden;
  z-index:2;
}

.cn-wrapper {
  width:16em;
  height:16em;
  position:relative;
  right:0;
  -webkit-transform:scale(0.1);
  -ms-transform:scale(0.1);
  -moz-transform:scale(0.1);
  transform: scale(0.1);
  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.cn-wrapper .cn-item {
  width:200%;
  height:200%;
  position:absolute;
  right:100%;
  bottom:0;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-transform:rotate(22.5deg) skew(67.5deg);
  -ms-transform:rotate(22.5deg) skew(67.5deg);
  -moz-transform:rotate(22.5deg) skew(67.5deg);
  transform:rotate(22.5deg) skew(67.5deg);
  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  overflow: hidden;
}

.cn-wrapper .cn-cell {
  width:100%;
  height:100%;
  position:absolute;
  display:flex;
  justify-content:center;
  bottom:-50%;
  right:-50%;
  border-radius:100%;
  background-color: #dc143c;
  -webkit-transform: skew(-67.5deg) rotate(-78.75deg) scale(0.1);
  -ms-transform: skew(-67.5deg) rotate(-78.75deg) scale(0.1);
  -moz-transform: skew(-67.5deg) rotate(-78.75deg) scale(0.1);
  transform: skew(-67.5deg) rotate(-78.75deg) scale(0.1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.cn-wrapper .cn-cell a {
  width: 1.5em;
  height:1.5em;
  position: relative;
  display: block;
  margin:1.5em 0;
  padding:0.625em;
  border-radius:1.5em;
  fill: #fff;
}

.cn-wrapper .cn-cell a svg {
  width:100%;
  height:100%;
  position: relative;
  display: block;
  fill: #fff;
}

.cn-wrapper .cn-item:first-child .cn-cell a {
  -webkit-transform: rotate(-11.25deg);
  -ms-transform: rotate(-11.25deg);
  -moz-transform: rotate(-11.25deg);
  transform: rotate(-11.25deg);
}

.cn-wrapper .cn-item:nth-child(2) .cn-cell a {
  -webkit-transform:rotate(-33.75deg);
  -ms-transform:rotate(-33.75deg);
  -moz-transform: rotate(-33.75deg);
  transform: rotate(-33.75deg);
}

.cn-wrapper .cn-item:nth-child(3) .cn-cell a {
  -webkit-transform:rotate(-56.25deg);
  -ms-transform:rotate(-56.25deg);
  -moz-transform: rotate(-56.25deg);
  transform: rotate(-56.25deg);
}

.cn-wrapper .cn-item:nth-child(4) .cn-cell a {
  -webkit-transform: rotate(-78.75deg);
  -ms-transform: rotate(-78.75deg);
  -moz-transform: rotate(-78.75deg);
  transform: rotate(-78.75deg);
}

/* Animation Circle CSS */
#connect:checked ~ #connectLabel {
  bottom:0;
  left:0;
  border-radius:100% 100% 100% 0%;
  background-color:#cb2027;
  -webkit-transform:scale(1);
  -ms-transform:scale(1);
  -moz-transform:scale(1);
  transform:scale(1);
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  z-index:3;
}

#connect:checked ~ .connections {
  -webkit-transform:scale(1);
  -ms-transform:scale(1);
  -moz-transform:scale(1);
  transform:scale(1);
}

#connect:checked ~ .connections .cn-wrapper {
  border-radius:0 100% 0 0;
  background-color:#dc143c;
  -webkit-transform:scale(1);
  -ms-transform:scale(1);
  -moz-transform:scale(1);
  transform:scale(1);
}

#connect:checked ~ .connections .cn-wrapper .cn-cell {
  -webkit-transform: skew(-67.5deg) rotate(-78.75deg) scale(1);
  -ms-transform: skew(-67.5deg) rotate(-78.75deg) scale(1);
  -moz-transform: skew(-67.5deg) rotate(-78.75deg) scale(1);
  transform:skew(-67.5deg) rotate(-78.75deg) scale(1);
}

#connect:checked ~ .connections .cn-wrapper .cn-item:first-child {
  -webkit-transform:rotate(90deg) skew(67.5deg);
  -ms-transform:rotate(90deg) skew(67.5deg);
  -moz-transform:rotate(90deg) skew(67.5deg);
  transform:rotate(90deg) skew(67.5deg);
}


#connect:checked ~ .connections .cn-wrapper .cn-item:nth-child(2) {
  -webkit-transform:rotate(112.5deg) skew(67.5deg);
  -ms-transform:rotate(112.5deg) skew(67.5deg);
  -moz-transform:rotate(112.5deg) skew(67.5deg);
  transform:rotate(112.5deg) skew(67.5deg);
}

#connect:checked ~ .connections .cn-wrapper .cn-item:nth-child(3) {
  -webkit-transform:rotate(135deg) skew(67.5deg);
  -ms-transform:rotate(135deg) skew(67.5deg);
  -moz-transform:rotate(135deg) skew(67.5deg);
  transform:rotate(135deg) skew(67.5deg);
}

#connect:checked ~ .connections .cn-wrapper .cn-item:nth-child(4) {
  -webkit-transform:rotate(157.5deg) skew(67.5deg);
  -ms-transform:rotate(157.5deg) skew(67.5deg);
  -moz-transform:rotate(157.5deg) skew(67.5deg);
  transform:rotate(157.5deg) skew(67.5deg);
}

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

footer {
  width:100%;
  height:auto;
  position:relative;
  display:block;
  background-color:#2e383e;
  color:#d9d9d9;
  overflow:hidden;
  box-sizing:border-box;
  z-index:2;
}

.map {
	width:100%;
	height:400px;
	position: relative;
	bottom:0;
}

.map iframe {
	width:100%;
	height:100%;
}

.footer-inner {
  width:calc(100% - 200px);
  height:auto;
  position: relative;
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  margin:0 auto;
  padding:2em 0;
}

.f-nav {
  width:auto;
  display:flex;
  align-items:center;
  margin:1em 0 2em;
}

.f-nav ul {
  width:auto;
  display:flex;
  margin:0 auto 0 0;
}

.f-nav ul li {
  margin:0 2em 0 0;
}

.f-nav ul li a {
  display:inline-block;
  padding:0.5em 0;
  font-size: 1.04em;
  color:#d9d9d9;
}

.copyright {
  width:100%;
  height:auto;
  position: relative;
  display:flex;
  padding:2em 0 0;
  border-width:0.5px 0 0;
  border-style:solid;
  border-color:#d9d9d9;
}

.copyright p {
  color:white;
  text-align:center;
}

.scrollTop {
  width: 2.5em;
  height: 2.5em;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0;
  bottom: 0;
  margin: 1.5em;
  border-radius: 0.25em;
  background-color:rgba(244, 129, 32, 0.8);
  -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  box-sizing: border-box;
  z-index:2;
}

.scrollTop a {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
  padding: 0.66em;
  box-sizing: border-box;
}

.scrollTop a svg {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
  fill: white;
}

.scrollTop:hover {
  background-color:rgba(244, 129, 32, 1);
}



/*
====================================================================================================
=====================================                ===============================================
=====================================  Media Queries ===============================================
=====================================                ===============================================
====================================================================================================
*/

@media all and (min-width:1301px) and (max-width: 1599px) {
  .cover {
    min-height: 33vh;
    max-height: 40em;
  }

  .section-inner {
    width:calc(100% - 6em);
  }
}

@media all and (min-width: 1023px) and (max-width: 1300px) {

  .cover {
    min-height: 33vh;
    max-height: 40em;
  }

  .section-inner {
    width:calc(100% - 4em);
  }

  .double .list-item,
  .threes .list-item {
    width: calc(100%/2 - 2em);
    margin:0 2em 2em 0em;
  }

  .double .list-item figure,
  .threes .list-item figure {
    height:33vw;
    max-height:unset;
  }
  
  .list-item figure, 
  .img-list-item figure {
    height: calc(100vw/3 *(2/3) - 0em);
  }

  .image-layer {
    height:50vw;
  }

  .image-layer figure {
    width: calc(100% - 1.5em);
    margin:0 0 0 1.5em;
  }

  .card {
    max-width:64em;
    min-height:unset;
    flex-wrap:wrap;
    margin:0 auto;
    padding:1em 3em;
  }

  .card .left, .card .right {
    width:100%;
    padding:0;
  }

  .card h4 {
    margin:1em 0 0;
  }

  .card figure {
    height:32em;
  }

  nav .social {
    display:none;
  }

/* 
===========================================================================================
================================== Contact Form CSS  ======================================
===========================================================================================
*/

  .contact-box {
    width:calc(100% - 2em);
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .contact-box .section {
    width: 100%;
    flex: 0 0 24em;
  }

  .message {
    padding: 1em;
  }

  .reviews a img {
    width: 100%;
  }

  .box-style .address ul li a, .box-style .address ul li button {
    word-break: break-all;
  }

}

@media all and (min-width: 765px) and (max-width: 1022px) {

/* 
===========================================================================================
===============================	Global CSS ================================================
===========================================================================================
*/


  h1,
  .title h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 1.65rem;
  }

  h3 {
    font-size: 1.33rem;
  }

  p,
  .section-body ul li {
    font-size: 1em;
  }

  .cover {
    min-height: 33vh;
    max-height: 26em;
  }

  main {
    margin:5.705em 0 0;
  }

  .section-inner {
    width:calc(100% - 4em);
  }

  .image-layer {
    width: 100%;
    height:66vw;
  }

  .image-layer figure {
    width: calc(100% - 1.5em);
    margin:0 0 1.5em;
  }

  .list-item, 
  .img-list-item {
    width:calc(100% - 0em);
		margin:1em 0;
  }

  .double .list-item,
  .threes .list-item {
    width: calc(100%/2 - 2em);
    margin:0 2em 2em 0em;
  }

  .double .list-item figure,
  .threes .list-item figure {
    height:33vw;
    max-height:18em ;
  }

  .list-item figure, 
  .img-list-item figure {
    background-position: 0% 25%;
  }
  
  .card {
    max-width:52em;
    min-height:unset;
    flex-wrap:wrap;
    margin:0 auto;
    padding:1em 3em;
  }

  .card .left, .card .right {
    width:100%;
    padding:0;
  }

  .card h4 {
    margin:1em 0 0;
  }

  .card figure {
    height:24em;
  }

  .carousel-column, 
  .section-inner .carousel-column {
    width: calc(50% - 2rem);
    margin:0 0 2rem 2rem;
  }

/* 
===========================================================================================
================================= Navigation Menu CSS  ====================================
===========================================================================================
*/

  nav {
    max-width: 22.5rem;
    left:0;
    right:unset;
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -moz-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
  }
 


/* 
===========================================================================================
================================== Contact Form CSS  ======================================
===========================================================================================
*/

  .contact-box {
    width:calc(100% - 2em);
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .contact-box .section {
    width: 100%;
    flex: 0 0 24em;
  }

  .message {
    padding: 1em;
  }

  .reviews a img {
    width: 100%;
  }

  .box-style .address ul li,
  .box-style .address ul li:last-of-type {
    width: calc(100%/2 - 1em);
    margin:0 0.5em 2em;
    border-width: 0.0125em;
  }


/* 
===========================================================================================
===================================== Footer CSS  =========================================
===========================================================================================
*/
  .footer-inner {
    width:calc(100% - 4em);
  }

  .f-nav {
    flex-direction:column-reverse;
  }

  .f-nav ul {
    flex-wrap:wrap;
    margin:1em auto 0;
  }

  .f-nav ul li {
    margin:0.5em 1em;
  }

  .f-nav ul li a {
    width:100%;
    text-align:center;
  }

  .copyright {
    flex-direction:column-reverse;
  }

  .social {
    margin:0 auto 2em;
  }

}

@media all and (max-width: 1022px) {
/* 
===========================================================================================
================================= Navigation Menu CSS  ====================================
===========================================================================================
*/

  #hmbg {
    display:flex;
    margin:0 auto 0 0;
  }

  header {
    display:flex;
  }

  .header-inner {
    width:100%;  
    align-items:center;
    z-index:2;
  }

  .logo {
    margin:1em auto;
    z-index: 1;
  }

  .logo svg {
    width:9.6em;
  }

  .contactLabel {
    margin:1.5em 1em;
  }

  nav {
    width:100%;
    height:100%;
    position:fixed;
    flex-wrap: wrap;
    left:0;
    margin: 0;
    border-radius:0 0 1em 1em;
    background-color:#2e383e;
    z-index:1;
    border-radius: 0;
    overflow-y:auto;
  }

  nav ul {
    width:100%;
    flex-direction: column;
    padding:2em 1em;
  }

  nav ul li {
    width:100%;
    flex-wrap: wrap;
    flex-direction: column;
    margin:0 0 1em;
  }

  nav ul li em {
    height:0;
    background-color:#F48120;
    -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  nav ul li ul {
    width:calc(100% - 2em);
    position: relative;
    top:0;
    margin:0 auto;
  }

  nav ul li ul li {
    background-color: transparent;
  }

  .olMenu {
    width: 100%;
    height:auto;
    position:relative;
    top: 0;
    left: 0;
    background-color: #2e383e;
    z-index: 1;
  }

  #nav-trigger:checked ~ header .header-inner .contact-links {
    top:calc(100% - 1em);
  }

  #nav-trigger:checked ~ header nav {
    padding:5.75em 0 0;
  }

  #nav-trigger:checked ~ header .header-inner .logo.main .st5 {
    fill: #a29b9b;
  }

  #nav-trigger:checked ~ header .header-inner .logo.main .st7 {
    fill: #cccccc;
  }

  #nav-trigger:checked ~ #connectLabel {
    bottom:1em;
    -webkit-transform:translate(0, 0);
    -ms-transform:translate(0, 0);
    -moz-transform:translate(0, 0);
    transform:translate(0, 0);
    z-index:5;
  }

  #dropdown:checked ~ li ul li a {
    font-size: 1.1em;
  }
  #dropdown:checked ~ .olMenu .nav-item {
    color: #F48120;
  }

  #dropdown:checked ~ .olMenu {
    position: relative;
    height: auto;
  }

  nav ul li a:hover, 
  .highlight a {
    background-color:transparent;
    color:#F48120;
  }

  nav ul li a:hover svg, 
  .highlight a svg {
    fill:#F48120;
  }

  nav ul li a:hover ~ em, 
  nav ul .highlight em {
    width:0.3125em;
    height: calc(100% - 1.6em);
    margin: 0.8em 0;
  }

  nav ul li:hover > ul li a {
    font-size:0;
  }

  .nav-item:hover {
    background-color: unset;
  }

  /*Social Medias*/

  nav .social {
    width: 100%;
    position: relative;
    flex-wrap: wrap;
    flex-direction: column;
    align-self: flex-end;
    margin:0;
  }

 nav .social ul {
      width: 100%;
      flex-wrap: wrap;
      flex-direction: unset;
      padding: 0;
  }

  nav .social ul li {
      width: calc(100%/4 - 0em);
      margin:0;
  }

  nav .social ul li a,
  nav .social ul li button {
      width: 100%;
      height: auto;
      justify-content: center;
      padding: 2.75em 1.75em;
  }

  nav .social ul li:nth-child(1) {
    background-color: #3074b4;
  } 

  nav .social ul li:nth-child(2) {
      background-color: #4b87bf;
  }

  nav .social ul li:nth-child(3) {
    background-color: #39579a;
  }

  nav .social ul li:nth-child(4) {
    background:linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
  }

  .cover {
    min-height:33vh;
    max-height:20em;
  }

  .overlay {
    -webkit-transition: all 084s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  /* Social Media Cirlce Animation */

  .connections {
    z-index:4;
  }

  #connectLabel {
    bottom:100%;
    -webkit-transform:translate(0, -100%);
    -ms-transform:translate(0, -100%);
    -moz-transform:translate(0, -100%);
    transform:translate(0, -100%);
  }

  #connect:checked ~ #connectLabel {
    bottom:0;
  }

}

@media all and (max-width: 764px) {
  nav {
    -webkit-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -moz-transform: translate(0, -100%);
    transform: translate(0, -100%);
  }

  .column,
  .section-inner .column {
    width: 100%;
    height: auto;
  }

  .section-inner .carousel-column {
		width: 100%;
    height: 100vw;
		max-height:20em;
		float: unset;
		margin:0 0 1.5em;
	}

  .section-body ul li {
    width:calc(100% - 2rem);
    margin:0 auto 1rem;
  }

  h1,
  h2,
  h3,
  h4,
  .section .title h2,
  .section .title h3,
  .section .title h4 {
    text-align: center;
  }


}

@media all and (min-width: 500px) and (max-width: 764px) {

/* 
===========================================================================================
===============================	Global CSS ================================================
===========================================================================================
*/


  h1,
  .title h1 {
    font-size: 2.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.33rem;
  }

  p,
  .section-body ul li {
    font-size: 1em;
  }

/* 
===========================================================================================
===============================	Shared CSS ================================================
===========================================================================================
*/

  main {
    margin:5.75em 0 0;
  }

  .section-inner {
		width:100%;
    padding:2em 1.5em;
	}

  .section-body ul,
  .icon-list {
    width:100%;
  }

  .icon-list li {
    width: 100%;
    margin:0 0 1.5em;
  }

	.list-item, 
  .img-list-item {
    width:calc(100% - 0em);
		margin:1em 0;
  }

  .double .list-item,
  .threes .list-item {
    width: calc(100% - 0em);
    max-width: 26em;
    margin:0 auto 1em;
  }

  .double .list-item figure,
  .threes .list-item figure {
    height: 50vw;
    max-height:18em ;
  }

  .list-item figure, 
  .img-list-item figure {
    height:12em;
    background-position: 0% 25%;
  }

  .list-item .head {
    padding:1em;
  }

  .list-item svg {
    width:1.75em;
    height: 1.75em;
    padding:0.5em;
  }

  .image-layer {
    width: 100%;
    height: 80vw;
    float: unset;
  }

  .image-layer figure {
    width: 100%;
    margin:0;
  }


  .serviceBg .list-heading {
    padding:1em;
  }
  
  .card {
    min-height:unset;
    flex-wrap:wrap;
    padding:1em;
  }

  .card .left, .card .right {
    width:100%;
    padding:0;
  }

  .card h4 {
    margin:1em 0 0;
  }

  .card figure {
    height:12em;
  }

  .card ul {
    width: calc(100% - 1.25em);
    margin: 0 1.25em;
  }

  .quick-links a {
    margin:0 auto;
    padding:0.5em 2em;
  }



  

/* 
===========================================================================================
================================== Contact Form CSS  ======================================
===========================================================================================
*/

  #contactWidget {
    width:100%;
    right:0;
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -moz-transform: translate(0, 100%);
    transform: translate(0, 100%);
    -webkit-transition: all 084s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
    overflow: auto;
  }

  .contact-box {
    width:calc(100% - 2em);
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .contact-box .section {
    width: 100%;
    flex: 0 0 24em;
  }

  .message {
    padding: 1em;
  }

  .reviews a img {
    width: 100%;
  }

  .box-style .address ul li,
  .box-style .address ul li:last-of-type {
    width: calc(100%/2 - 1em);
    margin:0 0.5em 2em;
    border-width: 0.0125em;
  }

  .box-style .address ul li a, .box-style .address ul li button {
    word-break: break-all;
  }

/* 
===========================================================================================
===================================== Footer CSS  =========================================
===========================================================================================
*/
  .footer-inner {
    width:calc(100% - 2em);
  }

  .f-nav {
    flex-direction:column-reverse;
  }

  .f-nav ul {
    flex-wrap:wrap;
    flex-direction:column;
    margin:1em auto 0;
  }

  .f-nav ul li {
    margin:0.5em 1em;
  }

  .f-nav ul li a {
    width:100%;
    text-align:center;
  }

  .copyright {
    flex-direction:column-reverse;
  }

  .social {
    margin:0 auto 2em;
  }

}

@media all and (max-width: 499px) {

/* 
===========================================================================================
===============================	Global CSS ================================================
===========================================================================================
*/


  h1,
  .title h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.33rem;
  }

  p,
  .section-body ul li {
    font-size: 1em;
  }

/* 
===========================================================================================
===============================	Shared CSS ================================================
===========================================================================================
*/

  main {
    margin:5.75em 0 0;
  }

  .section-inner {
		width:100%;
    padding:2em 1.5em;
	}

  .section-title {
    text-align: center;
  }

  .section-body ul,
  .icon-list {
    width:100%;
  }

  .icon-list li {
    width: 100%;
    margin:0 0 1.5em;
  }

	.list-item, 
  .img-list-item,
  .double .list-item,
  .threes .list-item {
    width:calc(100% - 0em);
		margin:0 auto 1em;
  }

  .list-item figure, 
  .img-list-item figure {
    height:50vw;
    background-position: 0% 25%;
  }

  .list-item .head {
    padding:1em;
  }

  .list-item svg {
    width:1.75em;
    height: 1.75em;
    padding:0.5em;
  }

  .image-layer {
    width: 100%;
    height: 80vw;
    float: unset;
  }

  .image-layer figure {
    width: 100%;
    margin:0;
  }

  .serviceBg .list-heading {
    padding:1em;
  }
  
  .card {
    min-height:unset;
    flex-wrap:wrap;
    padding:1em;
  }

  .card .left, .card .right {
    width:100%;
    padding:0;
  }

  .card h4 {
    margin:1em 0 0;
  }

  .card figure {
    height:12em;
  }

  .card ul {
    width: calc(100% - 1.25em);
    margin: 0 1.25em;
  }

  .quick-links a {
    margin:0 auto;
    padding:0.5em 2em;
  }


/* 
===========================================================================================
================================== Contact Form CSS  ======================================
===========================================================================================
*/

  #contactWidget {
    width:100%;
    right:0;
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -moz-transform: translate(0, 100%);
    transform: translate(0, 100%);
    -webkit-transition: all 084s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.84s cubic-bezier(0.645, 0.045, 0.355, 1);
    overflow: auto;
  }

  .contact-box {
    width:calc(100% - 2em);
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .contact-box .section {
    width: 100%;
    flex: 0 0 100%;
  }

  .message {
    padding: 1em;
  }

  .reviews a img {
    width: 100%;
  }

  .box-style .address ul li,
  .box-style .address ul li:last-of-type {
    width: calc(100%/1 - 0em);
    margin:0 0 2em;
    border-width: 0.0125em;
  }

/* 
===========================================================================================
===================================== Footer CSS  =========================================
===========================================================================================
*/
  .footer-inner {
    width:calc(100% - 2em);
  }

  .f-nav {
    flex-direction:column-reverse;
  }

  .f-nav ul {
    flex-wrap:wrap;
    flex-direction:column;
    margin:1em auto 0;
  }

  .f-nav ul li {
    margin:0.5em 1em;
  }

  .f-nav ul li a {
    width:100%;
    text-align:center;
  }

  .copyright {
    flex-direction:column-reverse;
  }

  .social {
    margin:0 auto 2em;
  }

}