@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400');
 /* @import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light'); */
 @import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Lato:wght@300&display=swap');
 ::selection {
	 color: #fff;
	 background: #9fbe5a;
}
 body {
	 width: 100vw;
	 height: 100%;
	 padding-bottom: 50px;
	 overflow-x: hidden;
	 display: flex;
	 align-items: center;
	 justify-content: center;
     position: relative;
	 background: linear-gradient(to bottom, #16a085, #f4d03f) center / cover no-repeat;
}
 h1 {
	 margin-bottom: 35px;
	 padding: 0 20vw;
	 font: 400 56px 'Roboto Slab', serif;
	 font-size: 56px;
	 text-align: center;
	 color: #fff;
}
 .form__contact {
	 max-width: 600px;
     /* height: 533px; */
     max-height: 530px;
	 margin: 0 auto;
	 border-left: 30px solid white;
	 border-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI0MS44NnB4IiBoZWlnaHQ9IjUyLjMyNnB4IiB2aWV3Qm94PSIwIDAgNDEuODYgNTIuMzI2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA0MS44NiA1Mi4zMjYiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDB2MjUuMTYzaDcuMDk3YzAuNTAxLTQuOTg5LDQuNzEyLTguODg0LDkuODMzLTguODg0YzUuNDU4LDAsOS44ODQsNC40MjUsOS44ODQsOS44ODRzLTQuNDI1LDkuODg0LTkuODg0LDkuODg0Yy01LjEyMSwwLTkuMzMyLTMuODk1LTkuODMzLTguODg0SDB2MjUuMTYzaDQxLjg2VjBIMHoiLz48L3N2Zz4=) 5% 100% repeat;
	 border-image-width: 0px 0px 0px 30px;
	 transform: translateY(100%);
     perspective: 1000px;
	 animation: init 1s ease-in-out forwards;
}
 .form__contact fieldset {
	 position: relative;
	 margin: 0;
	 max-height: 450px;
	 padding: 45px 30px 40px 80px;
	 border: none;
	 border-radius: 0 20px 20px 0;
	 font: 24px 'Shadows Into Light', cursive;
	 background: #fff linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 0) 0 20px / 100% 40px;
}
 /* .form__contact fieldset:after {
	 position: relative;
	 top: 0;
	 left: 50px;
	 content: '';
	 height: 100%;
	 width: 1px;
	 border-left: double #e08183;
} */
 .form__contact p {
	 margin: 0 0 40px 0;
	 line-height: 40px;
     font-size: larger;
	 color: #333;
}
 .form__contact span {
    /* text-decoration-line: line-through; */
	 position: relative;
	 line-height: 40px;
}
 .form__contact button {
	 /* margin-top: 40px; */
	 float: right;
	 border: none;
     font-size: larger;
	 font-family: 'Shadows Into Light', cursive;
	 color: #e08183;
	 background: transparent;
	 cursor: pointer;
	 transition: transform 0.25s ease;
}
 .form__contact button:hover {
	 transform: translateX(10px);
}
 .form__field {
	 display: inline;
	 color: #7db665;
	 outline: none;
}
 .form__field:empty {
	 display: inline-block;
	 color: #ddd;
}
 .form__field:empty:before, .form__field:empty:focus:before {
	 content: attr(data-placeholder);
}
 svg {
	 display: none;
}
 @keyframes init {
	 75% {
		 transform: translateY(-20px);
	}
	 100% {
		 transform: translateY(0);
	}
}
 @keyframes do-blur {
	 0% {
		 filter: url(#blur4);
	}
	 25% {
		 filter: url(#blur3);
	}
	 50% {
		 filter: url(#blur2);
	}
	 75% {
		 filter: url(#blur1);
	}
	 100% {
		 filter: url(#blur0);
	}
}

.front{
    position: absolute;
	bottom:5px;
    z-index: 3;
    /* top: -1000px; */
}

.back {
    position: relative;
    z-index: 1;
    top: -540px;
    /* display: block; */
    /* visibility: hidden; */
}

.back fieldset::after {
    display: block;
    visibility: hidden;
}

 .flipp{
    animation: 2s ease-in-out  fliper;
 }

 @keyframes fliper {
    0%{
        position: relative;
        top: 0px;
        /* transform: rotateY(0deg); */
    }
    /* 50%{
        position: absolute;
        right: 420px;
     }  */
    100%{
        position: relative;
        top: 3000px;
        /* transform: rotateY(-180deg); */
    }
 }

 span{
    position: relative;
    left: 20px; 
 }

 .flexer{
    display: flex;
    flex-direction: row;
 }

 .texty{
    text-decoration-line: line-through;
 }

 .gayab{
	display: none;
 }