header {
  background-color: #f07c0e;
  color: white;
  text-align: center;
  height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  top: 0;
}

header .col {
  z-index: 1;
}

header img {
  box-shadow: 0 0 50px rgb(0 0 0 / 30%),
  inset 0 0 50px rgb(0 0 0 / 30%);
  display: none;
}

header .logo-col {
	  order: 2;
	z-index: 2;
}

header .title-col {
	order: 1;
	margin: 10% auto;
	z-index: 2;
}

header .title-col h1 {
	font-size: 5em;
}


.circle-div {
  border: 50px solid #fff;
  border-radius: 50%;
  width: 500px;
  height: 500px;
  text-align: center;
  margin: 18vh auto;
  overflow: hidden;
  box-shadow: 0 0 50px rgb(0 0 0 / 30%),
  inset 0 0 50px rgb(0 0 0 / 30%);
  background: url('../images/guitar.png') no-repeat center center;
  background-size: cover;
}

.circle {
  background-color:#dedede;
  height: 1200px;
  /*width: 1200px;
  right: -400px;*/
  width: 100%;
  display: block;
  border-radius: 50%;
  position: absolute;
  top: -250px;
  z-index: 0;
  box-shadow: 0 0 70px rgb(0 0 0 / 25%);

}


@media (max-width: 768px) {
  .circle {
	  height: 100vh;
	  top: -40%;
	  z-index: 1;
	  width: 200%;
	  left: -50%;
  }

	.circle-div {
		margin: 11vh auto 0;
	}

  header .title-col {
	  order: 2;
	  margin: -10% auto !important;
	  position: absolute;
  }

  header .logo-col {
	  order: 1;
	  z-index: 2;
	  padding-top: 10vh;
  }

}

@media (max-width: 700px){
	.circle-div {
		max-width: 100%;
		max-height: 70%;
		border-width: 20px;
		margin: 3vh auto;
	}

	header .title-col {
		bottom: 0;
		position: relative;
		z-index:5;
	}


	header h3, header h6 {
		display: none;
	}
}


@media (max-width: 700px and portrait) {
  header .logo-col {
	  max-height: 60vh;
  }

	header .row .title-col {
		bottom: 0;
		margin: 50% auto;
		position: absolute;
	}
}

@media (min-width: 992px) {
  .circle {
	  right: -50%;
  }

  header .title-col {
	  margin: 15% auto;
  }
}