* {
  box-sizing: border-box;
font-family: "interstate", sans-serif;
  font-weight: 300;
  font-style: normal;
}


:root {--animate-delay: 0.5s;}

html {
	--primary: rgb(150, 150, 0);
	--secondary: rgb(77 77, 0);
	--accent: rgb(150, 150, 0);
  --accent2: 150, 150, 0;
	--text: rgb(25, 25, 0);
	--reverse: rgb(255, 255, 255);
	--animate-duration: 2s;
}

/* LINKS CSS */
a,
a:visited,
a:hover,
a:active,
a:focus {
  color: inherit;
  text-decoration: none;
  outline: 0;
  transition: 1s ease;
}

a:hover
 {
  cursor:pointer !important;
    transition: 0.5s ease;
}

p, li {}

p a:link, p a:visited {color: var(--accent); text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: inherit; }
p a:hover {color:  var(--accent); text-decoration: underline;  transition: 0.5s ease; outline: 0;  font-weight: inherit; }


.logo a:link, .logo a:visited {color: var(--reverse); text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: inherit; }
.logo a:hover{color: var(--accent); text-decoration: none;  transition: 0.5s ease; outline: 0;  font-weight: inherit; }

h3 a:link, h3 a:visited {color: var(--accent); text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: inherit; }
h3 a:hover{color: var(--text); text-decoration: none;  transition: 0.5s ease; outline: 0;  font-weight: inherit; }

h5 a:link, h5 a:visited {color: var(--accent); text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: inherit; }
h5 a:hover{color: var(--text); text-decoration: none;  transition: 0.5s ease; outline: 0;  font-weight: inherit; }

a:link .portal h5, a:visited .portal h5 {color: var(--accent) ; text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: 800; }
a:hover .portal h5{color: var(--reverse); text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: 800; text-shadow: 0 0 8px #000;}

.footer a:link, .footer a:visited {color:var(--accent); transition: 1s ease; outline: 0; font-weight: inherit; text-decoration: none; }
.footer a:hover, .footer a:active {color:var(--reverse);  transition: 0.5s ease; text-decoration: underline; outline: 0; font-weight: inherit; }

h2 a:link, h2 a:visited {font-weight: inherit; color: var(--accent); text-decoration: none;  transition: 1s ease; outline: 0;}
h2 a:hover, h2 a:active {font-weight: inherit; color: var(--text); text-decoration: none;  transition: 1s ease; outline: 0;}

.blue h2 a:link, .blue h2 a:visited {font-weight: inherit; color: var(--accent); text-decoration: none;  transition: 1s ease; outline: 0;}
.blue h2 a:hover, .blue h2 a:active {font-weight: inherit; color: var(--text); text-decoration: none;  transition: 1s ease; outline: 0;}

.green {color:var(--accent);}

.btn-primary a:link, .btn-primary a:visited {background-color: var(--text); color: var(--reverse) !important; text-decoration: none;}
.btn-primary a:hover, .btn-primary:hover {background-color: var(--accent); color: var(--text); text-decoration: none;}


/* TYPOGRAPHY CSS */



strong {
  color: var(--accent);
  font-weight: inherit;
}


p, ul > li, ol > li, i {
  font-family: "interstate", sans-serif;
  font-size: calc(16px + 0.3vw);
  font-weight: 300;
  margin: 0 0 calc(10px + 0.5vw) 0;
  color: var(--text);
  padding:0;
  line-height:135%;
}

p.lead {
  font-size: calc(18px + 0.35vw);
  font-weight: 400;
}

p.attribution {color:var(--accent) !important; font-style:normal !important;}

main ul {
  margin-left: 0;
  padding-left: 0;
}

main li {
  font-weight: 400;
  list-style-type: none;
  margin-left:0;
  padding-left: 40px;
  padding-top: 0;
  margin-top: 0;
  background-image: url(images/HG-Bullet@3x.png);
  background-repeat: no-repeat;
  background-size: 15px;
  background-position: left calc(4px + .15vw) !important;
}

ul.advantage > li {  margin-bottom : 0 !important; margin-top: 0;}

.contact p {
	margin-bottom: 0;
	line-height:100%;
}

blockquote p {
	color: var(--accent);
	font-weight:300;
	font-style: italic;
	font-size: calc(18px + .25vw);
	width:100%;
	max-width: 700px;
	text-align: center;
	margin: auto;
	padding: 20px 0;
}

ul, ol {margin-top:30px;}

p:last-of-type {
	margin-bottom: 0;
}

p.text-stats {
	text-align: center;
	padding: 0 10px;
	color:var(--accent);
	}
.card-body p {color:var(--reverse);}

.blue p {
	color: var(--reverse);
}

.carousel-item p {font-style:italic;}

.background-image p {
  font-size: calc(20px + 0.25vw);
  margin: 0 0 15px 0;
  color: var(--reverse);
  padding:0;
}

.valuecopy p { font-size: calc(14px + .25vw); transition: all 3s ease;}
.valuecopy:hover > p{color:var(--accent);transition: all 1s ease;}


.footer p {color:var(--reverse);}
.footer ul{padding: 0;margin: 0;}
.footer li{
	list-style-type: none;
	padding: 0;
	margin: 0;
	font-size: large;
}

h1, h2, h3, h4, h5 { font-weight:300; font-style: normal; color: var(--accent); line-height: 135%; }

h1 {
	font-size: calc(30px + .25vw);
	text-align: left;
	margin-bottom: 20px;
	line-height:120%;
}

.banner h1 {
	font-size: calc(24px + 1.25vw);
	font-style: normal;
	color: var(--reverse);
	margin-bottom: 30px;
	margin-top: 20px;
	line-height:120%;
  text-align: center;
  display: inline-block;


  
}

h2 {
	font-size: calc(20px + .5vw);
  margin-bottom: calc(20px + .5vw);
}

h1 ~ h3:first-of-type {margin-top:-20px;}

.blue h2 {color: var(--reverse);}

h3 {
  font-size: calc(18px + .5vw);
margin-bottom: calc(20px + .5vw);
}

.footer h3 {color:var(--accent); padding-bottom: 15px;}


h4 {
	font-size: calc(18px + 0.25vw);
	padding-top:20px;
	line-height: 125%;
 }

.expert {
	padding-top: 30px;
}

h5 {
	font-size: calc(18px + .25vw);
	transition: all 1s ease;
	text-transform: capitalize;
}

 h5.accordion-header:hover {
	color: var(--text);
	transition: all 0.5s ease;
}

/* CONTAINERS CSS */

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}


.logo {
  position: absolute;
  top: 40px;
  left: 40px;
  z-index: 100;
  height: 55px;
  width: auto;
  line-height: calc(37px + .25vw);
  color: #fff;
  font-weight: 300;
  font-size: calc(32px + .25vw);
}
.banner {min-height: calc(450px + 15vw); background-color:var(--text); padding-top:100px;}

.background-image, .portal {
  background-repeat: no-repeat;
  background-size: cover;

}

.none {box-shadow:none;}

.home {background-image: url(images/workAnd-home.jpg);   background-position:center top;}
.elliot {background-image: url(images/elliot-daly.jpg);   background-position:center center;}
.services {background-image: url(images/services.jpg);   background-position:center center;}
.privacy {background-image: url(images/privacy.jpg);   background-position:center center;}

.container-fluid {
	padding: calc(20px + 2vw);
	margin:0;
}

.wrapper {
  width:100%;
  max-width:  calc(1400px + 3vw);
  margin: 0 auto;
}

.footer {
	background-color:var(--text);
	color:var(--reverse) !important;
	padding: calc(15px + 2.5vw) 30px;
	/* border-bottom: 3px solid var(--accent); */
	}

.linkedin {padding:30px; padding-bottom:0;}
.links {padding-right: 50px;}

.columns {
  		margin-top: 40px;
  		margin-bottom: 40px;
  	  -moz-columns: 300px 3;
    	   columns: 300px 3;
   -moz-column-gap: 50px;
        column-gap: 50px;
    padding: 0;
}

.blue {background-color: #225780; color:var(--reverse);}
.grey {background-color: #252933;}
.palegrey, .card-body {background-color: rgba(230,230,235,.75);}
.pale {background-color: rgba(var(--accent2),.1);}
.carousel-item {background-color: var(--text;)}
.card {background-image: url(images/workAnd-home.jpg); background-position: center 35%;   }
.card-body {background-color: rgba(0, 0, 0, 0) !important;}


/* OUTER MENU */


.outer-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 1;
  box-sizing: border-box;
  	  transition: all 2s ease;
}
.outer-menu .checkbox-toggle {
  position: absolute;
  top: 30px;
  right: calc(15px + 1vw);
  z-index: 2;
  cursor: pointer;
  width: 60px;
  height: 60px;
  opacity: 0;
}

.outer-menu .checkbox-toggle:checked + .hamburger > div {
  transform: rotate(135deg);
}

.outer-menu .checkbox-toggle:hover + .hamburger > div {
	background-color:var(--reverse); /* Hamburger hover color */
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:before,
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
  top: 0;
  transform: rotate(90deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
  opacity: 0;
}
.outer-menu .checkbox-toggle:checked ~ .menu {
  pointer-events: auto;
  visibility: visible;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div {
  transform: scale(1);
  transition-duration: 0.5s;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div > div {
  opacity: 1;
  transition: opacity 0.5s ease 0.5s;
}
.outer-menu .checkbox-toggle:hover + .hamburger {
  box-shadow: inset 0 0 0 50px rgba(30,30,40, 0);
}
.outer-menu .checkbox-toggle:checked:hover + .hamburger > div {
  transform: rotate(225deg);
}
.outer-menu .hamburger {
  position: absolute;
  top: 30px;
  right: calc(15px + 1vw);
  z-index: 1;
  width: 60px;
  height: 60px;
  padding: 0.5em 1em;
  background: transparent;
  border: 1px solid var(--reverse);
  cursor: pointer;
  transition: box-shadow 0.5s ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .hamburger > div {
  position: relative;
  flex: none;
  width: 100%;
  height: 2px;
  background: var(--accent);  /* Hamburger main color */
  transition: all 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outer-menu .hamburger > div:before,
.outer-menu .hamburger > div:after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -12.5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: inherit;
  transition: all 0.5s ease;
}
.outer-menu .hamburger > div:after {
  top: 12.5px;
}

/*
.outer-menu {
	  transition: opacity 2s ease;
}
*/

.outer-menu .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  visibility: hidden;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  outline: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .menu > div {
  width: 400vw;
  height: 400vw;
  color: #fff;
  background: rgba(40,40,30, 0.95);
  border-radius: 50%;
  transition: all 1.25s ease-in-out;
  flex: none;
  transform: scale(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .menu > div > div {
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 2s ease;
  overflow-y: auto;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outer-menu .menu > div > div > ul {
  list-style: none;
  padding: 0 1em;
  margin: 0;
  display: block;
  max-height: 100vh;
}
.outer-menu .menu > div > div > ul > li {
  padding: 0;
  margin: 0.5em;
  font-size: calc(20px + 0.4vw);
font-family: "interstate", sans-serif;
  font-weight: 300 !important;
  display: block;
  color:var(--reverse);
}
.outer-menu .menu > div > div > ul > li > a {
  position: relative;
  display: inline;
  cursor: pointer;
  transition: color 1s ease;
font-family: "interstate", sans-serif;
}
.outer-menu .menu > div > div > ul > li > a:hover {
  color: var(--accent);
}
.outer-menu .menu > div > div > ul > li > a:hover:after {
  width: 100%;
}
.outer-menu .menu > div > div > ul > li > a:after {
  content: '';
  position: absolute;
  z-index: 1;
  bottom: -0.15em;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--reverse);
  transition: width 1s ease;
}


/* GLOBAL CSS */

.check {border:1px solid pink;}
.zero {padding: 0 0 0 0;}


.copyright {
	width:100%;
	margin-top: 60px;
	border-top:1px solid #fff;
	padding-top: 20px;
	text-align: left;
    padding-left:0;
}

.copyright p {font-size: 90%;}

.contacts img {width:100%; max-width: calc(200px + 3vw); margin-bottom: 30px;}

hr, hr.top {
	border-top: 2px solid var(--accent);
	margin-bottom: 60px;
	width:60px;
	}

hr.bottom {
	border-top: 2px solid var(--accent);
	margin-top: 50px;
	width:60px;
	}

#accordion-container hr.long  {
	height: 0;
	margin-top: 2em;
	margin-bottom: 1em;
	border: 0;
	border-top: 2px solid var(--text);
	width:100%;
}

label {display: none !important;}
a {outline: none;}

/* MEDIA QUERIES CSS */


@media only screen and (max-width: 1200px) {
}

@media only screen and (min-width: 1200px) {
}





/* When the browser is at least 600px and above */
@media screen and (min-width: 768px) {
 .desktop {display: inline-block;}
 .mobile {display: none; }
}

/* When the browser is at least 599px and below */
@media screen and (max-width: 767px) {
.desktop {display: none;}
.mobile {display: inline-block;  }
}

  .btn {  font-size: calc(16px + 0.3vw);
    font-weight: 300;}
.btn-primary {background-color: var(--text); border: 1px solid var(--accent); padding:10px 20px; margin-top:20px;}