* {
	box-sizing: border-box;
}

body {
  font-size: 10pt;
  font-family: sans-serif;
  margin: 0px;
  height: 100vh;
}

.nav {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.5);
  font-size: 14px;
  font-weight: bold;
  color: yellow;
  width: 100%;
  text-transform: uppercase;
}

.logo {
  position: relative;
  width: 100%;
  padding: 20px 0 20px 170px;
}

.logo img {
  width: 60px;
}

.nav ul {
  width: 100%;
  padding: 20px 160px 20px 0;
  text-align: right;
}
.nav li {
  display: inline-flex;
  margin: 0 10px 0 10px;
}

.nav li a,
.nav li .nav-contact {
  text-decoration: none;
  color: yellow;
  padding-bottom: 7px;
}

.nav li a:hover,
.nav li .nav-contact:hover {
  color: white;
  padding-bottom: 5px;
  border-bottom: solid yellow 2px;
}

.head-container {
  background-image: url(../images/header-img.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
  height: 100%;
}

.opacity {
  background-color: rgba(0, 0, 0, 0.5);
  height: inherit;
}

.content {
  text-align: center;
  vertical-align: middle;
  position: relative;
  margin: 0 160px 0 160px;
  top: 20%;
  color: yellow;
}

.opacity .content h1 {
  margin: 0;
  font-size: 4vw;
  text-shadow: 0.3vw 0.3vw black;
}

.opacity .content p {
  margin: 8px 0;
  font-size: 1.5vw;
  font-weight: bold;
  text-shadow: 0.2vw 0.2vw black;
}

.opacity .content a.scroll-down {
  display: inline-block;
  margin: 130px 0;
  padding: 5px 20px;
  font-size: 1.2vw;
  color: yellow;
  font-weight: bold;
  text-decoration: none;
  border: solid 2px;
  border-radius: 30px;
  transition: padding 0.5s, color 1s;
  -webkit-transition: padding 0.5s, color 1s;
}

.opacity .content a.scroll-down:hover {
  color: #141414;
  background: rgba(255, 252, 0, 0.5);
  padding: 5px 25px;
  border-color: transparent;
}

.mid-container {
  text-align: center;
  background: yellow;
  margin: 0;
  padding: 30px 0 50px;
}

.mid-container h1 {
  padding: 20px 0;
}

.inner-mid-container {
  background: yellow;
  display: inline-flex;
  width: 100%;
}

.inner-mid-container .mid-1 {
  width: 100%;
  text-align: center;
  padding: 30px 60px 30px 160px;
}

.inner-mid-container .mid-2 {
  width: 100%;
  text-align: center;
  padding: 30px 0;
}

.inner-mid-container .mid-3 {
  width: 100%;
  text-align: center;
  padding: 30px 160px 30px 60px;
}

#portfolio {
  width: 100%;
  text-align: center;
  padding: 30px 0;
}

#portfolio h1 {
  padding: 20px 0;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}

.tabs > .input {
  position: absolute;
  opacity: 0;
}

.tabs > .label {
  width: auto;
	padding: 20px 30px;
	background: #e5e5e5;
	cursor: pointer;
	font-weight: bold;
	font-size: 18px;
	color: #7f7f7f;
  transition: background 0.1s, color 0.1s;
  border-radius: 50px;
  margin: auto;
}

.tabs > .label:hover {
  background: #d8d8d8;
  border-block-end: 4px solid #141414;
  transition: border 0.1s, background 0.1s;
}

.tabs > .label:active {
  background: #ccc;
}

.tabs > .input:focus + .label {
  box-shadow: inset 0px 0px 0px 3px #2aa1c0;
  z-index: 1;
}

.tabs > .input:checked + .label {
	background: #ff0;
  color: #141414;
  border-block-end: 4px solid #141414;
}

.tabs > .panel {
	display: none;
	padding: 20px 30px 30px;
  background: #fff;
  order: 99;
}

.tabs > .input:checked + .label + .panel {
  display: block;
  width: 100%;
}

.inner-portfolio {
  align-items: start;
  display: inline-flex;
  padding: 20px 0;
  width: 100%;
}

.inner-portfolio .col {
  width: 33.33%;
  text-align: center;
  /* padding: 0 10px 0 250px; */
  padding: 0 20px;
  font-size: 11pt;
  display: inline-block;
}

.inner-portfolio #laptop {
  width: 28vw;
}

.inner-portfolio #mobile {
  width: 17vw;
}

.inner-portfolio h2 {
  font-size: 18pt;
}

.inner-portfolio p {
  padding: 0 20px;
}

.inner-portfolio a {
  text-decoration: none;
  color: black;
  border: solid 2px;
  border-radius: 30px;
  padding: 3px 15px;
  margin-top: 10px;
  display: inline-flex;
  transition: padding 0.5s, color 0.5s;
  -webkit-transition: padding 0.5s, color 0.5s;
}

.inner-portfolio a:hover {
  color: yellow;
  background: black;
  padding: 3px 20px;
  border-color: transparent;
}

.footer {
  background: #141414;
  color: yellow;
  display: inline-block;
  padding: 50px 0;
  position: relative;
  font-size: 11pt;
}

.footer-1 {
  width: 100%;
  margin: auto;
  text-align: center;
  margin-top: 0px;
  display: inline-block;
}

.footer-1 img {
    border-radius: 50%;
    max-height: 90px;
    max-width: 90px;
}

.footer-1 p {
    padding: 10px 400px 30px;
}

.footer-2 {
  width: 100%;
  text-align: center;
}

.footer-2 ul {
  margin-top: 0px;
  padding: 0;
  display: inline-flex;
  text-align: center;
}

.footer-2 li {
  list-style: none;
  padding: 0 15px 0;
  min-width: 80px;
}

.footer-2 a {
  text-decoration: none;
  color: yellow;
  transition: color 0.5s;
  -webkit-transition: color 0.5s;
}

.footer-2 a:hover {
  text-decoration: none;
  color: white;
}

.footer-2 i {
  padding-right: 5px;
}

@media only screen and (max-width: 1200px) {
  .footer-1 p {
    padding: 10px 200px 30px;
}
}


@media only screen and (max-width: 768px) {
.logo {
  padding: 20px 0 20px 20px;
}

.nav ul {
  padding: 20px 10px 20px 0;
}

.head-container {
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

.content {
  margin: 0;
  top: 10%;
}

.opacity .content h1 {
  font-size: 8vw;
  text-shadow: 0.5vw 0.5vw black;
}

.opacity .content p {
  font-size: 4.5vw;
  text-shadow: 0.4vw 0.3vw black;
}

.opacity .content a.scroll-down {
  font-size: 3.5vw;
}

.inner-mid-container {
  display: inline-block;
}

.inner-mid-container .mid-1,
.inner-mid-container .mid-2,
.inner-mid-container .mid-3 {
  padding: 15px 0;
  text-align: center;
}

.inner-mid-container p {
  padding: 0 40px;
}

.tabs > .label {
  width: 18vh;
  font-size: inherit;
  padding: 10px;
}

.tabs > .panel {
	order: 99;
}

.inner-portfolio {
  display: inline-block;
  padding: 0;
}

.inner-portfolio #laptop,
.inner-portfolio #mobile {
  width: 70vw;
}

.inner-portfolio .col {
  text-align: center;
  padding: 20px 0;
  width: 100%;
}

.inner-portfolio p {
  padding: 0 40px;
}

.footer-1 p {
  padding: 10px 10px 30px;
}
}


@media only screen and (max-height: 414px) {
.head-container {
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
}

.content {
  top: 0;
}

.opacity .content h1 {
  font-size: 6vw;
}

.opacity .content p {
  font-size: 2.5vw;
}

.opacity .content a.scroll-down {
  font-size: 2vw;
  margin: 55px 0;
}
}

/* Overlay */
.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #141414;
    overflow-y: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    max-width: 500px;
    text-align: center;
    margin: 30px auto 0;
}

.overlay-content table {
  text-align: center;
  color: white;
  display: block;
  padding: 8px 11px;
  -webkit-padding-start: 19px;
  -webkit-padding-end: 19px;
}

.overlay-content tr {
  display: inline-block;
  text-align: center;
  text-align: -webkit-center;
  width: 100%;
}

.overlay-content td {
  /*padding: 10px 18px;*/
  padding: 10px 15px;
  width: 40%;
}

.overlay-content .c-id,
.overlay-content .c-message {
  border-radius: 10px;
  border: solid white 2px;
  background: transparent;
  padding: 0 10px;
  color: white;
  font-family: inherit;
}

.overlay-content .c-message {
  padding: 10px;
  resize: none;
  box-sizing: content-box;
  min-width: 83%;
  -webkit-min-logical-width: 80%;
}

.overlay-content .c-id:focus,
.overlay-content .c-message:focus {
  color: white;
}

.overlay-content .c-id {
  width: 100%;
  box-sizing: border-box;
  min-height: 30px;
}

.button {
  display: inline-block;
  padding: 5px 20px;
  margin-top: 10px;
  background: transparent;
  color: yellow;
  font-weight: bold;
  text-decoration: none;
  border: solid 2px;
  border-radius: 30px;
  transition: padding 0.5s, color 1s;
  -webkit-transition: padding 0.5s, color 1s;
}

.button:hover {
  color: #141414;
  background: yellow;
  padding: 5px 25px;
  border-color: transparent;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

@media only screen and (max-width: 768px) {
  .overlay-content {
    top: 10%;
    max-width: 400px;
  }

  .overlay-content table {
    padding: 8px 11px;
    -webkit-padding-start: 11px;
    -webkit-padding-end: 11px;
  }

  .overlay-content tbody {
    display: block;
  }

  .overlay-content tr {
    display: grid;
  }

  .overlay-content td {
    width: auto;
  }

  .overlay-content .c-id {
    min-width: 93%;
  }

  .overlay-content .c-message {
    min-width: 81%;
    -webkit-min-logical-width: 81%;
    resize: none;
  }
}

.body-success-page {
  background-color: #373737;
  background-size: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
  height: 100%;
}

.success-message {
  color: white;
  position: relative;
  top: 25%;
  text-align: center;
}