<section class="container">
			<form class="form-area" method="" action="">
				<input type="email" name="mail" class="input-mail" />
				<div class="send-container">
					<input type="submit" name="send" class="input-send" value="" />
					<input type="submit" name="sendclone" class="input-send-clone" value="" />
					<div class="legend-container">
						<p class="legend-send">Send it to me!</p>
					</div>
					<div class="input-content">
						<p class="input-text">codepen.io/twindev</p>
					</div>
					<div class="svg-container">
						<svg x="0px" y="0px" width="20px" height="20px" viewBox="0 0 448.8 448.8" class="svg-icon">
							<g id="check">
								<polygon points="142.8,323.85 35.7,216.75 0,252.45 142.8,395.25 448.8,89.25 413.1,53.55 		"/>
							</g>
						</svg>
					</div>

					<div class="svg-container-2">
						<svg x="0px" y="0px" width="20px" height="20px" viewBox="0 0 448.8 448.8" class="svg-icon-2">
							<g id="paperplane">
								<path id="send" d="M332.797,13.699c-1.489-1.306-3.608-1.609-5.404-0.776L2.893,163.695c-1.747,0.812-2.872,2.555-2.893,4.481
								s1.067,3.693,2.797,4.542l91.833,45.068c1.684,0.827,3.692,0.64,5.196-0.484l89.287-66.734l-70.094,72.1
								c-1,1.029-1.51,2.438-1.4,3.868l6.979,90.889c0.155,2.014,1.505,3.736,3.424,4.367c0.513,0.168,1.04,0.25,1.561,0.25
								c1.429,0,2.819-0.613,3.786-1.733l48.742-56.482l60.255,28.79c1.308,0.625,2.822,0.651,4.151,0.073
								c1.329-0.579,2.341-1.705,2.775-3.087L334.27,18.956C334.864,17.066,334.285,15.005,332.797,13.699z"/>
							</g>
						</svg>
					</div>
				</div>
			</form>
		</section>

<aside class="Signature">
  <p>Codevember #25 - Twindev</p>
  <p>Diana Marchal & Nathalie Marchal</p>
</aside>

html, body {
	margin: 0; 
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: Helvetica, Calibri, sans-serif; 
	overflow: hidden;
  background-color: beige;
}


@font-face{
    font-family : "Avenir Bold";
    src : url('http://twin-dev.net/experiments/codevember/maki/ressources/font/avenir-next-bold.woff') format('woff'),
          url('http://twin-dev.net/experiments/codevember/maki/ressources/font/avenir-next-bold.eot') format('eot'),
          url('http://twin-dev.net/experiments/codevember/maki/ressources/font/avenir-next-bold.ttf') format('truetype');
}

.container {
    width: 100%;
    height: 100%;
}

.form-area {
	width: 50%;
    height: 200px;
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: relative;
}

.input-mail {
	background-color: #DBDBDB;
    border: none;
    border-radius: 50px;
    padding: 34px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 340px;
}


.input-send, .input-send-clone  {
    border: none;
    border-radius: 50px;
    background-color: #F34949;
    height: 70px;
    position: absolute;
}

.input-send {
    width: 70px;
    left: 0px;
    transform: translateX(275px);
}

.input-send-clone {
    width: 340px;
    right: 5px;
    opacity: 0;
}

.send-container {
	width: 350px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: relative;
}

.svg-container {
    width: 70px;
    height: 70px;
    left: 5px;
    position: relative;
}

.svg-container-2 {
    position: absolute;
    width: 70px;
    height: 70px;
    right: 5px;
    top: 0px;
}

.svg-icon, .svg-icon-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


#check polygon, #paperplane path {
    fill: white;
}


#check, #paperplane {
    opacity: 0;
}

.legend-container, .input-content {
    width: 100%;
    position: absolute;
    left: 0px;
    padding: 10px 0px;
    opacity: 0;
}

.legend-container {
    text-align: center;
}

.input-content {
    text-align: left;
    padding-left: 25px;
}

.legend-send {
    color: white;
}

.legend-send, .input-text {
    text-transform: uppercase;
    font-family: "Avenir Bold", Arial bold, Helvetica bold;
}

.input-text {
    color: grey;
}

.Signature {
	position: absolute;
	z-index: 100;
	bottom: 20px;
	right: 20px;
	color: black;
	line-height: .2;
	font-size: .7em;
	font-family: Open Sans, sans-serif;
}

$(function() {

  function animButtonSend() {
    var tl = new TimelineMax();

    tl.to( ".input-send" , 0.8, {transformOrigin:"50% 50%", x: 5, backgroundColor: "#49E7B6", delay:0.5, ease:Power1.easeOut})
    .to( "#check" , 0.8, { opacity: 1, ease:Power1.easeOut})
    .to( ".input-send" , 0.5, { backgroundColor: "#F34949", ease:Power1.easeOut})
    .to( "#check" , 0.3, { opacity: 0, ease:Power1.easeOut})

    .to(".input-send", 0.8, {width:"340px",  ease:Elastic.easeOut})
    .to(".legend-container", 0.8, {opacity: 1, ease:Power1.easeOut})

    .to(".input-send-clone", 0.2, {opacity: 1, ease:Expo.easeOut})
    .to(".input-send", 0.2, {opacity: 0, ease:Expo.easeOut})

    .to(".legend-container", 0.3, {opacity: 0, ease:Expo.easeOut})
    .to(".input-send-clone", 0.8, {width:"70px", ease:Expo.easeOut})
    .to(".input-content", 0.8, {opacity: 1, ease:Power1.easeOut})
    .to("#paperplane", 0.5, {opacity: 1, ease:Power1.easeOut})

    .to(".svg-icon-2", 0.8, {y: -50, x:50,  ease:Power1.easeOut})
    .to(".input-content", 0.5, {opacity: 0,  ease:Power1.easeOut});

    return tl;

  }

  var master = new TimelineMax({
    repeat: -1
  });

  master.add(animButtonSend(), "animButtonSend");

});