/* Contact page */
.wrapper {
	max-width: 1200px;
	margin: auto;
}

#contact {
	margin: 6rem auto;
	display: grid;
	grid-template-columns: auto auto;
	grid-column-gap: 4rem;
}
#contact form {
	max-width: 600px;
}
#contact .contact-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 2rem;
}
#contact .contact-item a {
	text-decoration: none;
}
#contact .contact-item img {
	width:  2rem;
	display: block;
	margin-right: 1rem;
}
#contact .contact-item:nth-child(2) img {
	width: 1.8rem;
}
@media(max-width: 600px) {
	#contact {
    margin: 0rem auto 4rem;
    grid-template-columns: auto;
    grid-gap: 4rem;
	}
	#contact .contact-item {
		text-align: left;
	}
}

#contact #success {
  width: 550px;
  height: 350px;
  text-align: center;
  position: fixed;
  box-shadow: 0 0 20px -10px #000;
  top: calc(50vh - 250px);
  left: calc(50vw - 250px);
  border-radius: 1rem;
  background: #ffffff;
  padding: 1rem;
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 2rem;
}
#contact #success.open {
	display: flex;
}
#contact #success img {
	margin: 0 0 2rem;
	max-width: 200px;
}
#contact #success .close {
	position: absolute;
	top:  1rem;
	right: 1.5rem;
}
#contact #success .close::before, #contact #success .close::after {
	content: '';
	width: 2px;
	height: 1rem;
	border-radius: 1rem;
	background: #cac9c9;
	display: block;
	position: absolute;
	top:  0;
	right: 0;
	transform: rotate(45deg);
}
#contact #success .close::after {
	transform: rotate(-45deg);
}
@media(max-width: 600px) {
	#contact #success {
    width: calc(100% - 2rem);
    left: 1rem;
    z-index: 10;
	}
}

#contact .msg {
	font-size: 1rem;
	margin:  1rem 0;
}