.contact_int{
	width:100%;
	height:max-content;
	background-position:center;
	background-image:url(../images/contact.jpg);
	background-size:cover;
	background-attachment:fixed;
}
.contact_int h3{
	padding:200px;
	font-size:43px;
	line-height:50px;
	text-align:center;
	color:white;
	font-weight:bold;
}
@media (max-width: 1025px) {
	.contact_int h3{
		padding:50px;
		font-size:35px;
		padding-top:100px;
	}
	.form-box{
		width:75% !IMPORTANT;
	}
}

.contact {
  padding: 5rem 10px;
		background-image:url(../images/contact.jpg);
	background-attachment:fixed;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
  border:0px;
}

.form-box {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 2rem;
  background-color:rgba(0,0,0,0.5);
  border: 1px solid #253a47;
  box-shadow: 1px 1px 3px #253a47, 3px 3px 7px #253a47;
}

.contact h2 {
  text-transform: uppercase;
  margin-bottom: 0.7rem;
  font-size: 2rem;
  font-weight: 300;
  color:white;
  text-align:center;
  padding:50px;
}

.form-item {
  margin-bottom: 0.7rem;
}

.contact label,
input,
textarea {
  display: block;
  width: 100%;
  font-size: 1.2rem;
  line-height: 1.4;
  outline-color: black;
  color:white;
}

.contact label {
  margin-bottom: 3px;
}

.contact input,
textarea {
  padding: 3px;
  border: 1px solid white;
  background-color: transparent;
  resize:none;
}

.contact input[type=submit] {
  background-color: #253a47;
  padding: 7px;
  border: 0;
  color: snow;
  cursor: pointer;
  text-transform: uppercase;
}

.contact input[type=submit]:hover {
  animation-name: submit-hover;
  animation-duration: 0.7s;
}

.contact input[type=submit]:active {
  animation-name: submit-active;
  animation-duration: 0.3s;
}

@keyframes submit-hover {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes submit-active {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.98);
  }
}
.contact-info{
	    background: rgb(0,0,0);
    background: linear-gradient( 90deg , rgba(0,0,0,1) 0%, #253a47 100%, rgba(232,255,0,1) 100%);
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.card{
    position: relative;
    flex: 1;
    max-width: 300px;
    height: 140px;
	margin: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
	background-image:url(../images/contact.jpg);
	background-attachment:fixed;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}

.card i{
    font-size: 32px;
    color: white;
    transition: .3s linear;
}

.card:hover i{
    transform: scale(4);
    opacity: 0;
}

.card-content h3,
.card-content span{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    opacity: 0;
}

.card-content h3{
    top: 20px;
	bottom:30px;
    text-transform: uppercase;
    color: white;
}

.card-content span{
    bottom: 20px;
    color: #fff;
    font-weight: 500;
	text-align:center;
	top:80px;
}

.card:hover h3{
    opacity: 1;
    top: 46px;
    transition: .3s linear .3s;
}

.card:hover span{
    opacity: 1;
    bottom: 46px;
    transition: .3s linear .3s;
}


@media screen and (max-width:900px){
    .card{
        flex: 100%;
        max-width: 500px;
    }
}
.card a{
	text-decoration:none;
	color:white;
}
.contact h4{
	text-align:center;
	color:white;
	padding:10px;
	margin-top:20px;
}
.contact .success{
		background-color:green;
}
.contact .error{
		background-color:red;
}