body > header {
}
body > header #header-top {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  color:var(--primary-text-color);
  background-color:var(--primary-color);
  z-index:10;
}
body.single_portfolio > header #header-top:nth-of-type(1) {
  z-index:11;
}
body.single_portfolio > header #header-top:nth-of-type(1) a {
  font-size:1rem;
}
body > header #header-top.fixed {
  width:100%;
  left:0rem;
  top:0rem;
}
body > header #header-top.fixed + * {
  margin-top:3rem;
}
body > header #header-top #logo {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:5rem;
  aspect-ratio:1;
  font-size:1rem;
  background-color:var(--additional-secondary-color);
  background-color:var(--secondary-color);
  background-color:var(--accent-color);
}
body > header #header-top #logo ul li:nth-of-type(1),
body > header #header-top #logo ul li:nth-of-type(2) {
  left:20%;
  margin-bottom:0rem;
  font-family:'Roboto', sans-serif;
  font-weight:400;
  color:var(--secondary-color);
  z-index:2;
}
body > header #header-top #logo ul li:nth-of-type(3) {
  margin-bottom:0rem;
  font-family:'Roboto', sans-serif;
  font-weight:400;
  color:var(--secondary-color);
  z-index:2;
}
body > header #header-top #logo .overlay {
  display:flex;
  justify-content:center;
}
body > header #header-top #logo .overlay span {
  margin-top:0.35rem;
  left:3%;
  font-family:'Roboto', sans-serif;
  font-weight:400;
  color:var(--primary-color);
}
body > header #header-top #logo figure {
  height:100%;
}
body > header #header-top #logo img {
  object-fit:cover;
  object-position:center;
  aspect-ratio:1;
}
body > header #header-top #logo i {
  color:var(--accent-color);
}
#header-top input[type="checkbox"] {
  display:none;
}
body > header #header-top nav:not(:nth-of-type(1)) {
  display:flex;
  align-items:center;
}
body > header #header-top nav:nth-of-type(1) {
}
body.single_portfolio > header #header-top:nth-of-type(1) a {
  color:#eeeeee;
}
body > header #header-top nav:nth-of-type(2) {
  position:absolute;
  top:0%;
  left:50%;
  scale:150% 150%;
  translate:25% 25%;
  translate:-25% 25%;
}
body.single_portfolio > header #header-top nav:nth-of-type(2) {
  display:none;
}
body > header #header-top nav:nth-of-type(3) {
  margin-left:auto;
}
body.single_portfolio > header #header-top nav:nth-of-type(3),
body.single_portfolio > header #header-top label[for="search-icon"] {
  display:none;
}
body > header #header-top nav:not(:nth-of-type(2)) ul {
  display:flex;
  column-gap:1rem;
}
@media (max-width:768px) {
  body > header #header-top nav:nth-of-type(1) ul {
    display:initial;
    column-gap:1rem;
  }
}
label[for="search-icon"]:before {
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  display:inline-block;
  font-style:normal;
  font-variant:normal;
  text-rendering:auto;
  -webkit-font-smoothing:antialiased;
}
input[type="checkbox"]:not(:checked) + label[for="search-icon"]:before {
  font-family:"Font Awesome 6 Free";
  content:"\f002";
}
input[type="checkbox"]:checked + label[for="search-icon"]:before {
  font-family:"Font Awesome 6 Free";
  content:"\f00d";
}
body > header #header-top label[for="search-icon"] {
  margin-left:2rem;
}
label[for="search-submit"]:before {
  font-family:"Font Awesome 6 Free";
  content:"\f002";
}
input[type="submit"]#search-submit {
  display:none;
}
body > header #header-top nav a {
  transition:color 0.3s ease;
}

@media (min-width: 769px) and (max-width: 1024px){
 body > header #header-top nav a {
  font-size: 1rem;
} 
}

body > header #header-top nav:not(:nth-of-type(2)) a:hover {
  color:var(--accent-color);
}
body.single_portfolio > header #header-top:nth-of-type(1) a:hover {
  color:var(--accent-color);
}
body > header #header-top input[type="checkbox"]:not(:checked) + label + section#search-box {
  display:none;
}
body > header #header-top input[type="checkbox"]:checked + label + section#search-box {
  width:100%;
  height:250px;
}
#search-box {
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background-color:var(--additional-primary-color);
  order:10;
}
#search-box input {
  width:200px;
  padding:5px;
  border:none;
  border-radius:3px;
  margin-right:5px;
}
@media (max-width:768px) {
  figure#hamburger-menu-icon {
    color:var(--secondary-color);
    z-index:10;
  }
  figure#hamburger-menu-icon,
  figure#hamburger-menu-icon + input[type="checkbox"] {
    margin-left:2rem;
    width:3rem;
    height:3rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
  }
  body.single_portfolio figure#hamburger-menu-icon,
  body.single_portfolio figure#hamburger-menu-icon + input[type="checkbox"] {
    padding:3rem 0rem;
  }
  figure#hamburger-menu-icon + input[type="checkbox"] {
    opacity:0;
    z-index:11;
    left:-1rem;
  }
  figure#hamburger-menu-icon + input[type="checkbox"] {
    left:calc(-5rem);
  }
  body > header #header-top nav:nth-of-type(3) {
    height:5rem;
  }
  input[type="checkbox"]:not(:checked) + nav {
    background-color:red;
    left:-100vw;
    display:none;
  }
  input[type="checkbox"]:checked + nav {
    width:100%;
    background-color:var(--secondary-color);
    margin-top:3rem;
  }
  body.single_portfolio input[type="checkbox"]:checked + nav {
    margin-top:0rem;
  }
  body > header #header-top nav:nth-of-type(2) {
    z-index:3;
  }
  body > header #header-top nav:nth-of-type(3) {
    width:calc(100% - 6rem);
    width:calc(100% - 0rem);
    padding-left:2rem;
    order:3;
    z-index:2;
  }
  label[for="search-icon"] {
    order:4;
    margin-right:2rem;
  }
  body.single_portfolio > header > #header-top nav:nth-of-type(1) ul {
    margin:0rem;
  }
  body > header > #header-top nav:nth-of-type(1) ul li {
  }
  body > header > #header-top nav:nth-of-type(1) ul li {
    border-top-style:solid;
    border-width:thin;
  }
  body.single_portfolio > header > #header-top:nth-of-type(2) nav:nth-of-type(1) ul li {
    border-top-style:none;
  }
  body > header > #header-top nav:nth-of-type(1) ul li a {
    display:block;
    width:100%;
    padding-top:1rem;
    padding-bottom:1rem;
    padding-left:2rem;
  }
}
@media (max-width:425px) {
  #header-top {
  }
  body > header #header-top nav:nth-of-type(2) {
  }
  body > header #header-top nav:nth-of-type(2) #logo i {
  }
}
@media (min-width:426px) and (max-width:768px) {
  #header-top {
  }
  body > header #header-top nav:nth-of-type(2) {
  }
  body > header #header-top nav:nth-of-type(2) #logo i {
  }
}
@media (min-width:769px) {
  body > header #header-top {
    padding:0rem 1.5rem;
  }
  figure#hamburger-menu-icon,
  figure#hamburger-menu-icon + input[type="checkbox"] {
    display:none;
  }
  body > header #header-top nav:nth-of-type(1) {
    display:flex;
    align-items:center;
  }
  body > header #header-top nav:not(:nth-of-type(2)) {
    height:3rem;
  }
  body > header > #header-top nav ul {
    column-gap:1rem;
  }
  body > header > #header-top nav:nth-of-type(1) ul {
    display:flex;
    margin:0rem;
  }
}
@media (min-width:769px) and (max-width:1024px) {
  #header-top {
  }
}
@media (min-width:1025px) and (max-width:1440px) {
  #header-top {
  }
}
@media (min-width:1441px) {
  #header-top {
  }
}
body > header > section#header-bottom.header_portfolio {
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
}
body > header > section#header-bottom.header_portfolio #header-bottom {
  margin-bottom:0rem;
}
body > header > section#header-bottom.header_portfolio #header-bottom {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
}
body > header > section#header-bottom.header_portfolio > .overlay {
  z-index:1;
}
body > header > section#header-bottom.header_portfolio .overlay section.top {
  height:40%;
  background-color:var(--primary-color);
}
body > header > section#header-bottom.header_portfolio .overlay section.bottom {
  height:60%;
  background-color:var(--secondary-color);
}
body > header > section#header-bottom.header_portfolio figure {
  display:flex;
  flex-direction:column;
  width:85%;
  aspect-ratio:16/8;
  margin:0rem auto;
}
body > header > section#header-bottom.header_portfolio figure {
  z-index:3;
}
body > header > section#header-bottom.header_portfolio figure img {
  height:100%;
  object-fit:cover;
  object-position:center;
}
body > header > section#header-bottom.header_portfolio figure .overlay {
  width:auto;
  width:40%;
  height:auto;
  top:50%;
  bottom:initial;
  left:30%;
  right:0%;
  translate:0% -50%;
  background-color:yellow;
  z-index:3;
}
@media (min-width:769px) and (max-width:1024px) {
  body > header > section#header-bottom.header_portfolio figure .overlay {
    width:40%;
    height:auto;
    top:50%;
    left:30%;
  }
}
body > header > section#header-bottom.header_portfolio figure .overlay header {
  background-color:var(--primary-color);
  padding:6rem;
  z-index:3;
}
@media (min-width:769px) and (max-width:1024px) {
  body > header > section#header-bottom.header_portfolio figure .overlay header {
    padding:6rem 2rem;
  }
}
body > header > section#header-bottom.header_portfolio figure .overlay h1 {
  text-transform:capitalize;
  margin-bottom:0rem;
}
body > header > section#header-bottom.header_portfolio figure .overlay h3 {
  text-transform:uppercase;
}
body > header > section#header-bottom.header_portfolio p {
}
body > header > section#header-bottom.header_portfolio figure .overlay .area:nth-of-type(1) {
  position:absolute;
  top:0%;
  left:0%;
  width:100%;
  height:100%;
  background-color:var(--accent-color);
  translate:10% -20%;
  z-index:2;
}
body > header > section#header-bottom.header_portfolio figure .overlay .area:nth-of-type(2) {
  position:absolute;
  bottom:0%;
  left:0%;
  width:60%;
  height:100%;
  background-color:var(--secondary-color);
  translate:-10% +20%;
  z-index:2;
}
@media (max-width:425px) {
  #header-bottom {
  }
  body > header > section#header-bottom.header_portfolio figure {
    aspect-ratio:8/16;
  }
  body > header > section#header-bottom.header_portfolio figure .overlay {
    width:100%;
    height:auto;
    top:50%;
    bottom:initial;
    left:0%;
    right:0%;
    translate:0% -50%;
    background-color:yellow;
    z-index:3;
  }
}
@media (min-width:426px) and (max-width:768px) {
  #header-bottom {
  }
  body > header > section#header-bottom.header_portfolio figure {
    aspect-ratio:12/16;
  }
  body > header > section#header-bottom.header_portfolio figure .overlay {
    width:100%;
    height:auto;
    top:50%;
    bottom:initial;
    left:0%;
    right:0%;
    translate:0% -50%;
    background-color:yellow;
    z-index:3;
  }
}
@media (min-width:769px) and (max-width:1024px) {
  #header-bottom {
  }
  body > header > section#header-bottom.header_portfolio figure {
    aspect-ratio:1;
  }
}
@media (min-width:1025px) and (max-width:1440px) {
  body > header #header-bottom {
  }
  body > header > section#header-bottom.header_portfolio figure {
    aspect-ratio:16/10;
  }
  body > header #header-bottom img {
  }
}
@media (min-width:1441px) {
  body > header #header-bottom {
  }
  body > header #header-bottom img {
  }
}