@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300&family=Open+Sans:wght@300;400&display=swap');

* {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  kerning: normal;
}

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

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

html {
	--primary: rgb(255, 200, 0);
	--secondary: rgb(40, 40, 30);
	--accent: rgb(255, 200, 0);
    --textpale: rgba(40, 40, 30, 0.1);
	--text: rgb(40, 40, 30);
	--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; }

a:link .hoffmann, a:visited .hoffmann {color: var(--accent); text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: 300; font-family: 'Merriweather', serif !important; }

a:hover .hoffmann  {color: var(--reverse); text-decoration: none;  transition: 0.5s ease; outline: 0;  font-weight: 300; font-family: 'Merriweather', serif !important; }

a:link .gastrock , a:visited .gastrock  {color: var(--reverse); text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: 300; font-family: 'Merriweather', serif !important; }
a:hover .gastrock  {color: var(--accent); text-decoration: none;  transition: 0.5s ease; outline: 0;  font-weight: 300; font-family: 'Merriweather', serif !important; }

.logo a:link, .logo a:visited {color: var(--accent); text-decoration: none;  transition: 1s ease; outline: 0;  font-weight: inherit; }
.logo a:hover{color: var(--reverse); 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;}


/* TYPOGRAPHY CSS */

p, ul > li, ol > li, i {
  font-family: 'Open Sans', sans-serif;
  font-size: calc(16px + 0.15vw);
  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.25vw);
  font-weight: 400;
}

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-family: 'Merriweather', serif;
	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;
	font-family: 'Merriweather', serif;
	color:var(--accent);
	}

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

.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); font-size: calc(16px + 0.1vw);}
.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-family: 'Merriweather', serif; 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;
}

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

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

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

h3 {
	font-size: calc(20px + .25vw);
	color: var(--text);
  padding-bottom: 10px;
}

.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 */

.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(20px + .5vw);
  font-family: 'Merriweather', serif !important;
}
.banner {min-height: calc(350px + 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/home.webp);   background-position:left top;}
.advancement {background-image: url(images/advancement.webp);}
.person {background-image: url(images/person.webp);}
.expertise {background-image: url(images/expertise.webp);}
.about {background-image: url(images/about.webp); background-position: center top;}
.work {background-image: url(images/work.webp);}
.imprint {background-image: url(images/imprintwebp.webp);    background-position:center top;}
.privacy {background-image: url(images/privacy.webp);}

.container-fluid {
	padding: calc(20px + 3vw) calc(20px + 3vw);
	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(71,71,71,.03);}




/* 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: 'Merriweather', serif !important;
  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: 'Merriweather', serif !important;

}
.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;}

.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) {
}


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

.zero {padding: 0 0 0 0;}

.portal {width:100%; height: calc(150px + 4vw); border-radius: 5px; margin: 15px 0;}
.portal + p { font-size: calc(16px + 0.125vw); padding: 0 15px;}
.vcenter h5  {text-transform:uppercase; text-align:center; color: #fff; font-size: calc(20px + 0.5vw);}
a:link .portal, a:visited .portal  {box-shadow:rgba(6, 15, 22, 0.65) 1000px 1000px 1000px 1000px inset; transition: 1s ease; }
a:hover .portal {box-shadow:rgba(6, 15, 22, 0) 1000px 1000px 1000px 1000px inset;transition: 2s ease;}


.map {border: 1px solid var(--accent); aspect-ratio: 4 / 3; padding: 0;}
.map img  {object-fit: contain; width:100%;}
.gastrock {color: var(--reverse); font-family: 'Merriweather', serif;}
img.footerlogo  { width: calc(30px + 2vw);}

/* 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;  }
}

.card {padding-left: calc(0px + 1.5vw); padding-right: calc(0px + 1.5vw); border:none;}
.card-title {padding-bottom: 10px; padding-top: 10px;}
.card-text { min-height:calc(100px + 1vw);}
.card-body {background-color: var(--textpale)!important;}
.btn {margin-top:20px; font-size: calc(16px + .15vw);}
.btn-primary {background-color: var(--text)!important; color: var(--accent)!important; border: none;}
.btn-primary:hover {background-color: var(--accent)!important; color: var(--text)!important; border: none;}