<header class="page-header">
  <figure class="page-logo">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 220 110" style="enable-background:new 0 0 220 110;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#107CB8;}
	.st1{fill:#A6B3BF;stroke:#A6B3BF;stroke-width:0.2268;stroke-miterlimit:10;}
	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#A7B3BF;}
	.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#107CB8;}
	.st4{fill:#107CB8;stroke:#107CB8;stroke-width:3.9685;stroke-miterlimit:10;}
</style>
<g id="XMLID_23_">
	<path id="XMLID_21_" class="st0" d="M163,14.1c3.5,2.7,6.1,6.7,6.8,12l0.1,0.9l-0.9,0l-8.6,0.3l-0.7,0l-0.1-0.7
		c-0.5-2.3-1.9-3.9-3.7-5.1c-2.2-1.4-5.1-2-7.7-2c-2.1,0-4.2,0.4-6.2,1.2c-1.6,0.7-3.1,1.7-4.1,3c-0.5,0.7-0.9,1.4-1.1,2.2
		c-0.2,0.9-0.3,1.8-0.2,2.8v0c0.2,2.7,1.8,4.2,4.1,5.2c2.5,1,5.7,1.3,8.8,1.6h0c4.2,0.5,8.9,1.3,12.9,3.3c4.1,2,7.4,5.1,8.6,10.2
		l0,0c0.1,0.7,0.2,1.4,0.3,2.1c0.1,0.7,0.1,1.4,0.1,2c0,5.7-2.6,10.3-6.6,13.5c-4.5,3.7-10.6,5.6-16.6,5.6c-5.2,0-11-1.7-15.4-5
		c-3.8-2.8-6.5-6.8-7.1-12l0,0l-0.1-1.6l0-0.9l0.9,0c3.2-0.1,6.4-0.2,9.6-0.2l0.1,0.8l0,0.4l0.1,0.5c0.2,2.3,1.7,4.1,3.6,5.4
		c2.4,1.6,5.6,2.4,8.5,2.4c3.3,0,6.7-1,9.2-2.8c2.1-1.5,3.5-3.6,3.5-6.2c0-0.5-0.1-1.2-0.2-1.9l0,0c-0.4-1.9-2-3.1-4.2-3.8
		c-2.3-0.8-5.3-1.1-8.3-1.4c-4.5-0.4-9.3-1.1-13.3-3.1l-0.8-0.4c-4.2-2.3-7.4-6.1-7.9-12.7l0,0c-0.2-2.2,0-4.3,0.6-6.4
		c0.6-2,1.5-3.9,2.8-5.6c2-2.7,4.8-4.7,8-6.1c3.4-1.5,7.1-2.2,10.8-2.2C153.7,9.5,159,11,163,14.1L163,14.1z"/>
	<polygon id="XMLID_20_" class="st0" points="41.8,52.6 27.6,31.5 27.6,71.1 27.6,71.9 26.7,71.9 18.1,71.9 17.2,71.9 17.2,71.1 
		17.2,11 17.2,10.1 18.1,10.1 25.1,10.1 25.5,10.1 25.8,10.5 45,38.7 64.1,10.5 64.4,10.1 64.8,10.1 71.7,10.1 72.5,10.1 72.5,11 
		72.5,71.1 72.5,71.9 71.7,71.9 63.1,71.9 62.3,71.9 62.3,71.1 62.3,31.5 48.1,52.6 47.8,52.9 47.4,52.9 42.5,52.9 42,52.9 	"/>
	<path id="XMLID_31_" class="st1" d="M30.1,87.3c0-0.5-0.2-0.9-0.5-1.4c-0.3-0.5-0.7-0.9-1.2-1.2c-0.5-0.4-1.1-0.7-1.8-0.9
		c-0.7-0.2-1.5-0.3-2.3-0.3c-0.9,0-1.7,0.1-2.4,0.4c-0.8,0.3-1.4,0.7-2,1.2c-0.6,0.5-1,1.1-1.4,1.9c-0.3,0.8-0.5,1.6-0.5,2.6
		c0,0.9,0.2,1.6,0.5,2.3c0.3,0.7,0.7,1.3,1.3,1.9c0.6,0.5,1.2,0.9,2,1.2c0.8,0.3,1.6,0.4,2.5,0.4c1.5,0,2.8-0.4,3.8-1.1
		c1.1-0.7,1.8-1.8,2-3.2h-1c-0.2,1.1-0.8,1.9-1.7,2.5c-0.9,0.6-2,0.9-3.2,0.9c-0.9,0-1.8-0.2-2.5-0.5c-0.7-0.3-1.2-0.7-1.6-1.3
		c-0.4-0.5-0.7-1-0.9-1.6c-0.2-0.6-0.3-1.1-0.3-1.6c0-0.7,0.1-1.3,0.3-1.9c0.2-0.6,0.6-1.2,1-1.7c0.4-0.5,1-0.9,1.7-1.1
		c0.7-0.3,1.4-0.4,2.3-0.4c0.7,0,1.3,0.1,1.8,0.3c0.6,0.2,1.1,0.4,1.5,0.7c0.4,0.3,0.8,0.6,1,1c0.2,0.4,0.4,0.7,0.4,1.1H30.1z
		 M32.4,89.4c0-0.7,0.1-1.3,0.3-1.9c0.2-0.6,0.6-1.1,1-1.6c0.5-0.5,1-0.9,1.7-1.1c0.7-0.3,1.4-0.4,2.3-0.4c0.9,0,1.6,0.1,2.3,0.4
		c0.7,0.3,1.2,0.7,1.7,1.1s0.8,1,1,1.6c0.2,0.6,0.3,1.2,0.3,1.9s-0.1,1.3-0.3,1.9c-0.2,0.6-0.6,1.1-1,1.6c-0.4,0.5-1,0.9-1.7,1.1
		c-0.7,0.3-1.4,0.4-2.3,0.4c-0.8,0-1.6-0.1-2.3-0.4c-0.7-0.3-1.2-0.7-1.7-1.1c-0.5-0.5-0.8-1-1-1.6C32.5,90.7,32.4,90,32.4,89.4
		L32.4,89.4z M31.4,89.4c0,0.8,0.1,1.5,0.4,2.3s0.7,1.4,1.2,1.9c0.5,0.5,1.2,1,2,1.3c0.8,0.3,1.7,0.5,2.6,0.5c1,0,1.8-0.2,2.6-0.5
		s1.4-0.7,2-1.3c0.5-0.6,1-1.2,1.2-1.9c0.3-0.7,0.4-1.5,0.4-2.3c0-0.8-0.1-1.5-0.4-2.3c-0.3-0.7-0.7-1.4-1.2-1.9
		c-0.5-0.6-1.2-1-2-1.3c-0.8-0.3-1.7-0.5-2.6-0.5c-1,0-1.8,0.2-2.6,0.5c-0.8,0.3-1.5,0.7-2,1.3c-0.5,0.5-0.9,1.2-1.2,1.9
		C31.5,87.8,31.4,88.6,31.4,89.4L31.4,89.4z M45.8,95h1v-6.5c0-0.5,0.1-1,0.3-1.5c0.2-0.5,0.5-0.9,0.9-1.3c0.4-0.4,0.9-0.7,1.5-0.9
		c0.6-0.2,1.3-0.3,2.1-0.3c0.8,0,1.5,0.1,2,0.3c0.5,0.2,1,0.4,1.3,0.8c0.3,0.3,0.5,0.7,0.7,1.2c0.1,0.5,0.2,1,0.2,1.6V95h1v-6.9
		c0-0.5,0-1-0.1-1.5c-0.1-0.5-0.3-0.9-0.6-1.4c-0.3-0.5-0.8-0.9-1.6-1.2c-0.7-0.3-1.7-0.5-2.9-0.5c-1.2,0-2.2,0.2-2.9,0.7
		c-0.8,0.5-1.4,1.1-1.8,1.8h0v-2.2h-1V95z M68.7,87.1c0-0.5-0.1-0.9-0.3-1.4c-0.2-0.4-0.5-0.8-0.8-1.1c-0.4-0.3-0.9-0.6-1.6-0.8
		c-0.7-0.2-1.5-0.3-2.5-0.3c-0.9,0-1.7,0.1-2.3,0.3c-0.6,0.2-1.1,0.5-1.5,0.8c-0.3,0.3-0.6,0.7-0.7,1c-0.1,0.4-0.2,0.7-0.2,1.1
		c0,0.5,0.1,0.9,0.3,1.2c0.2,0.4,0.4,0.6,0.7,0.8c0.3,0.2,0.6,0.4,1,0.5c0.4,0.1,0.7,0.2,1.1,0.2l3.9,0.5c0.7,0.1,1.2,0.3,1.6,0.6
		c0.4,0.3,0.6,0.8,0.6,1.4c0,0.8-0.3,1.4-1,1.8s-1.7,0.6-3.1,0.6c-1,0-1.8-0.1-2.5-0.3s-1.1-0.4-1.4-0.7c-0.3-0.3-0.5-0.6-0.6-0.9
		c-0.1-0.3-0.2-0.7-0.2-1.1h-1c0.1,1.3,0.6,2.3,1.6,2.9c1,0.6,2.3,0.9,3.9,0.9c0.6,0,1.2,0,1.8-0.1c0.6-0.1,1.2-0.2,1.7-0.5
		c0.5-0.2,1-0.6,1.3-1c0.3-0.4,0.5-1,0.5-1.7c0-0.9-0.3-1.6-0.9-2.1c-0.6-0.5-1.5-0.8-2.6-0.9L62,88.4c-0.7-0.1-1.3-0.3-1.6-0.6
		c-0.4-0.3-0.6-0.7-0.6-1.3c0-0.7,0.3-1.2,0.9-1.6c0.6-0.4,1.5-0.6,2.8-0.6c1.4,0,2.5,0.2,3.1,0.7c0.7,0.4,1,1.1,1.1,2.1H68.7z
		 M81.6,83.8h-1v6.5c0,0.5-0.1,1-0.3,1.5c-0.2,0.5-0.5,0.9-0.9,1.3c-0.4,0.4-0.9,0.7-1.5,0.9c-0.6,0.2-1.3,0.3-2.1,0.3
		c-0.8,0-1.5-0.1-2-0.3s-1-0.4-1.3-0.8c-0.3-0.3-0.5-0.7-0.7-1.2c-0.1-0.5-0.2-1-0.2-1.6v-6.8h-1v6.9c0,0.5,0,1,0.1,1.5
		c0.1,0.5,0.3,0.9,0.6,1.4c0.3,0.5,0.8,0.9,1.6,1.2c0.7,0.3,1.7,0.5,2.9,0.5c1.2,0,2.2-0.2,3-0.7c0.8-0.5,1.4-1.1,1.8-1.8h0V95h1
		V83.8z M84.2,95h1V79.4h-1V95z M88.8,83.8h-2.5v0.9h2.5v7.5c0,1.1,0.2,1.9,0.5,2.3c0.3,0.4,1.1,0.7,2.2,0.7c0.7,0,1.3,0,1.7-0.1
		v-0.9c-0.2,0-0.3,0-0.5,0c-0.4,0.1-0.7,0.1-0.9,0.1c-0.7,0-1.2-0.1-1.5-0.3c-0.3-0.2-0.5-0.6-0.5-1.3v-8h3.3v-0.9h-3.3V80h-1V83.8z
		 M94.6,95h1V83.8h-1V95z M94.6,81.7h1v-2.3h-1V81.7z M98.2,95h1v-6.5c0-0.5,0.1-1,0.3-1.5c0.2-0.5,0.5-0.9,0.9-1.3
		c0.4-0.4,0.9-0.7,1.5-0.9c0.6-0.2,1.3-0.3,2.1-0.3c0.8,0,1.5,0.1,2,0.3c0.5,0.2,1,0.4,1.3,0.8c0.3,0.3,0.5,0.7,0.7,1.2
		c0.1,0.5,0.2,1,0.2,1.6V95h1v-6.9c0-0.5,0-1-0.1-1.5c-0.1-0.5-0.3-0.9-0.6-1.4c-0.3-0.5-0.8-0.9-1.6-1.2c-0.7-0.3-1.7-0.5-2.9-0.5
		c-1.2,0-2.2,0.2-2.9,0.7c-0.8,0.5-1.4,1.1-1.8,1.8h0v-2.2h-1V95z M116.9,84.3c1.6,0,2.9,0.4,3.9,1.2c0.9,0.8,1.4,2,1.4,3.4
		c0,1.6-0.5,2.8-1.4,3.7c-1,0.8-2.2,1.3-3.7,1.3c-1.6,0-2.9-0.4-3.8-1.3c-0.9-0.8-1.4-2.1-1.4-3.7c0-0.8,0.1-1.5,0.4-2.1
		c0.3-0.6,0.6-1.1,1.1-1.5c0.5-0.4,1-0.7,1.6-0.9C115.6,84.4,116.2,84.3,116.9,84.3L116.9,84.3z M122.2,86.1L122.2,86.1
		c-0.3-0.5-0.6-0.9-1-1.3c-0.4-0.3-0.8-0.6-1.3-0.8c-0.8-0.3-1.8-0.5-3-0.5c-1,0-1.9,0.2-2.7,0.5c-0.8,0.3-1.4,0.7-1.9,1.2
		c-0.5,0.5-0.9,1.1-1.1,1.8c-0.2,0.7-0.4,1.4-0.4,2.1c0,0.8,0.1,1.5,0.3,2.2c0.2,0.7,0.6,1.3,1.1,1.8c0.5,0.5,1.1,1,1.9,1.3
		c0.8,0.3,1.7,0.5,2.7,0.5c1.2,0,2.3-0.2,3.2-0.7c0.9-0.4,1.6-1.1,2.1-2h0v2.3c0,0.6-0.1,1.1-0.2,1.6c-0.1,0.5-0.4,1-0.8,1.4
		c-0.4,0.4-0.9,0.8-1.6,1c-0.7,0.2-1.5,0.4-2.6,0.4c-1.6,0-2.7-0.2-3.5-0.7c-0.7-0.5-1.2-1.2-1.3-2.1h-1c0.2,1.3,0.7,2.3,1.7,2.9
		c0.9,0.6,2.3,0.9,4.1,0.9c1.2,0,2.3-0.1,3.1-0.4c0.8-0.3,1.4-0.7,1.9-1.2c0.4-0.5,0.7-1.1,0.9-1.7c0.2-0.6,0.3-1.3,0.3-2V83.8h-1
		V86.1z"/>
	<path id="XMLID_6_" class="st2" d="M139.1,96.1l-5-0.6c-1.1-0.2-3.1-0.6-4-0.6l4.7,1.7c5.1,1.7,11.5,2.9,16.8,3.4
		c11.2,1,19.3,0.6,28.1-3.2c5.2-2.3,11.5-5.9,14.2-10.7c0.9-1.5,2.1-4.9,1.4-6.9c-3.2,3.6-6.7,5.6-11,7.9
		C171.9,93.6,153.8,97.5,139.1,96.1L139.1,96.1z"/>
	<path id="XMLID_5_" class="st3" d="M156.1,90.4l-4.9,1.4c-1,0.3-3.1,0.6-3.9,1l5-0.3c5.4-0.5,11.7-1.7,16.8-3.4
		c10.7-3.4,18.1-6.9,24.7-13.9c3.9-4.1,8.3-9.9,8.9-15.4c0.2-1.7,0-5.3-1.4-6.9c-1.5,4.6-4,7.7-7.1,11.5
		C185.4,75.4,170.2,86,156.1,90.4L156.1,90.4z"/>
	<path id="XMLID_4_" class="st2" d="M166.7,79.5l-4.1,2.9c-0.9,0.6-2.7,1.6-3.4,2.2l4.6-1.9c4.9-2.2,10.5-5.5,14.8-8.7
		c9-6.7,14.8-12.5,18.8-21.2c2.3-5.1,4.6-12.1,3.4-17.5c-0.4-1.7-1.7-5-3.6-6c0,4.8-1.2,8.6-2.9,13.2
		C189.5,55.8,178.6,70.7,166.7,79.5L166.7,79.5z"/>
	<path id="XMLID_24_" class="st4" d="M79.3,71.1V10.9h21.6c4.4,0,7.9,0.6,10.6,1.8c2.7,1.2,4.7,3.1,6.2,5.6c1.5,2.5,2.3,5.2,2.3,7.9
		c0,2.6-0.7,5-2,7.3c-1.3,2.3-3.3,4.1-6,5.5c3.5,1.1,6.2,2.9,8,5.5c1.9,2.6,2.8,5.6,2.8,9.1c0,2.8-0.6,5.5-1.7,7.9
		c-1.1,2.4-2.5,4.3-4.2,5.6c-1.7,1.3-3.8,2.3-6.3,3c-2.5,0.7-5.6,1-9.3,1H79.3z M86.9,36.2h12.5c3.4,0,5.8-0.2,7.3-0.7
		c1.9-0.6,3.4-1.6,4.4-3c1-1.4,1.5-3.2,1.5-5.3c0-2-0.5-3.8-1.4-5.3c-0.9-1.5-2.2-2.6-3.9-3.1c-1.7-0.6-4.6-0.8-8.8-0.8H86.9V36.2z
		 M86.9,64.1h14.3c2.5,0,4.2-0.1,5.2-0.3c1.7-0.3,3.2-0.9,4.4-1.6c1.2-0.8,2.1-1.9,2.9-3.4c0.8-1.5,1.1-3.2,1.1-5.1
		c0-2.3-0.6-4.2-1.7-5.9c-1.1-1.7-2.6-2.8-4.6-3.5c-1.9-0.7-4.8-1-8.4-1H86.9V64.1z"/>
</g>
</svg>
  </figure>
  <h1 class="page-title reveal">
    <span class="reveal-text">SUPORTE</span>
    <div class="reveal-block"></div>
  </h1>
</header>
<main class="page-content">
  <div class="support-form form">
    <div class="form-fields">
      <div class="field --inline">
        <label class="label">Cliente</label>
        <div class="control">
          <input name="cliente" class="input" type="text" placeholder="Qual é o nome da sua empresa?">
        </div>
      </div>
      <div class="field --inline">
        <label class="label">Requisitante</label>
        <div class="control">
          <input name="requisitante" class="input" type="text" placeholder="Qual o seu nome?">
        </div>
      </div>
      <div class="field --inline">
        <label class="label">E-mail</label>
        <div class="control">
          <input name="email" class="input" type="text" placeholder="Qual o seu e-mail?">
        </div>
      </div>
      <div class="field --inline">
        <label class="label">Telefone</label>
        <div class="control">
          <input name="telefone" class="input" type="text" placeholder="Qual número podemos ligar para você?">
        </div>
      </div>
      <div class="field --inline">
        <label class="label">Processo</label>
        <div class="control">
          <input name="processo" class="input" type="text" placeholder="Qual é o nome do processo?">
        </div>
      </div>
      <div class="field --inline">
        <label class="label">Número</label>
        <div class="control">
          <input name="numero" class="input" type="text" placeholder="Existe um case/instância relacionado?">
        </div>
      </div>
      <div class="field --textarea">
        <label class="label">Descrição</label>
        <div class="control">
          <textarea name="descricao" class="textarea --grow" placeholder="Descreva o seu problema detalhadamente, assim podemos agilizar o seu atendimento!"></textarea>
        </div>
      </div>
      <div class="field">
        <label class="label">Anexo</label>
        <div class="control">
          
        </div>
      </div>
    </div>
    <div class="form-actions">
      <button class="btn --primary --cta a-pulse js-start-form">Precisa de Ajuda?</button>
    </div>
  </div>
</main>
<footer class="page-footer">
  <div class="contact-info">
    <div class="row">
      <div class="col-12">
        <svg class="icon --small lnr lnr-phone-handset"><use xlink:href="#lnr-phone-handset"></use></svg>
        <span>(51) 3407 1008 / 3407 1009</span>
      </div>
      <div class="col-12">
        <svg class="icon --small lnr lnr-envelope"><use xlink:href="#lnr-envelope"></use></svg>
        <span>suporte@mbsconsulting.com.br</span>
      </div>
      <div class="col-12">
        <svg class="icon --small lnr lnr-map-marker"><use xlink:href="#lnr-map-marker"></use></svg>
        <adress>
          Rua Padre Chagas, 147<br>
          Sala 1501 - Moinhos de Vento<br>
          Porto Alegre - RS
        </adress>
      </div>
      <div class="col-12">
        <svg class="icon --small lnr lnr-earth"><use xlink:href="#lnr-earth"></use></svg>
        <a href="http://www.mbsconsulting.com.br/" target="_blank">mbsconsulting.com.br</a>
      </div>
    </div>
  </div>
  <div class="footer-bg"></div>
</footer>
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400');

@mixin center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

$form-height: 480px;
$form-width: 420px;
$blue: #3c80fb;

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  font-family: 'Open Sans', sans-serif;
  background-color: #f5f5f5;
}

.page-header {
  @include center-flex;
  flex-direction: column;
  padding-top: 30px;
  
  h1 {
    font-size: 48px;
    color: #a7b3bf;
  }
}

.reveal {
  position: relative;
}

.reveal-text {
  opacity: 0;
  animation: appear 1s linear .3s;
}

.reveal-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #107cb8;
  transform: scale3d(0, 1, 1);
  animation: reveal 1s ease-in-out .3s;
}

.page-logo {
  display: block;
  width: 220px;
  height: 100px;
  margin-bottom: 50px;
}

.page-content {
  @include center-flex;
  flex: 1;
  padding: 30px 0;
}

.page-footer {
  @include center-flex;
  flex-direction: column;
  padding: 30px 0 0;
}

.footer-bg {
  position: relative;
  height: 80px;
  width: 100%;
  
  &:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: $blue;
    background: linear-gradient(to right, #3c80fb 0%,#107cb8 100%);
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  }
}

.btn {
  appearance: none;
  align-items: center;
  border: 1px solid transparent;
  box-shadow: none;
  display: inline-flex;
  font-size: 15px;
  height: 34px;
  justify-content: flex-start;
  line-height: 1.5;
  padding: 5px 14px;
  position: relative;
  vertical-align: top;
  user-select: none;
  background-color: white;
  border-color: #dbdbdb;
  color: #363636;
  cursor: pointer;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

.btn.--grow {
  flex-grow: 1;
  transition: all .3s cubic-bezier(.25,.8,.25,1);
}

.btn.--primary {
  color: #fff;
  background-color: $blue;
  background: linear-gradient(to right, #3c80fb 0%,#107cb8 100%);;
}

.btn.--cta {
  font-family: 'Roboto Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: .25px;
  font-size: 13px;
  height: 40px;
}

.form {
  display: flex;
  flex-direction: column;
}

.form-fields {
  padding: 0 10px;
}

.field {
  display: flex;
  flex-direction: column;
  
  &:not(:last-child) {
    margin-bottom: 10px;
  }
}

.label {
  font-weight: bold;
  font-size: 13px;
  padding: 5px 0;
  margin-bottom: 8px;
}

.control {
  display: flex;
  flex: 1;
}

.input {
  font-family: 'Open Sans', sans-serif;
  height: 35px;
  border: 0;
}

.textarea {
  font-family: 'Open Sans', sans-serif;
  padding: 8px;
  resize: vertical;
  
  &.--grow { width: 100%; }
}

.field.--textarea {
  padding: 10px;
}

.field.--inline {
  position: relative;
  
  .input, .textarea {
    width: 100%;
  }
  
  .label {
    left: 10px;
    position: absolute;
    top: 50%;
    transform: translatey(-50%);
  }
  
  .label.--textarea {
    top: 10px;
    transform: none;
  }
}

.form-actions {
  display: flex;
  justify-content: center;
}

.support-form {
  position: relative;
  min-width: $form-width;
  min-height: 100px;
  overflow: hidden;
  transition: all .4s ease-in-out;
  transition-delay: .3s;
  
  .input {
    padding-left: 110px;
  }
  
  .form-fields {
    transition: transform .4s ease-in-out,
                opacity .4s ease-in-out;
    transition-delay: .3s;
    opacity: 0;
    position: absolute;
    width: $form-width - 40px;
    left: 50%;
    transform: translate(-50%, 120%);
  }
  
  .form-actions {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translatey(-50%);
    transition: all .4s ease-in-out;
    transition-delay: .3s;
  }
}

.support-form.is-active {
  min-height: $form-height;
  background-color: #fff;
  box-shadow: 0 0 5px 4px rgba(0, 0, 0, .045), 0 0 1px 0 rgba(0, 0, 0, .05);
  
  .form-fields {
    top: 15px;
    transform: translate(-50%, 0);
    opacity: 1;
  }
  .form-actions {
    transform: translatey($form-height / 2 - 40px);
  }
}

.icon {
  width: 35px;
  height: 35px;
}

.icon.--small {
  width: 15px;
  height: 15px;
}

.contact-info {
  font-size: 11px;
}

.a-pulse {
  padding-left: 25px;
  padding-right: 25px;
  border-radius: 24px;
  box-shadow: 0 0 0 0 rgba(#5a99d4, .25);
  animation: pulse 1.8s infinite;
  transition: transform .3s ease-in-out,
              box-shadow .3s ease;
  outline: 0;
  border: 0;
  
  &:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 50%;
    transform: translatey(-50%);
    border-radius: 24px;
    transition: transform .3s ease-in-out,
                box-shadow .3s ease;
  }
  
  &:hover {
    animation-play-state: paused;
    transform: translateY(-5px);
    box-shadow: 0 0 0 0 rgba(#5a99d4, .0),
                0 0 6px rgba(0,0,0, .05),
					      0 6px 12px rgba(0,0,0, .1);
    
    &:after {
      transform: translateY(-50% -5px);
      box-shadow: 0 0 6px rgba(0,0,0, .05),
					        0 6px 12px rgba(0,0,0, .1);
    }
  }
}

@keyframes pulse {
  80% {
    box-shadow: 0 0 0 20px rgba(#5a99d4, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(#5a99d4, 0);
  }
}

@keyframes reveal {
  0% {
    transform: scale3d(0, 1, 1);
    transform-origin: 0% 100%;
  }
  25% {
    transform: scale3d(1, 1, 1);
    transform-origin: 0% 100%;
  }
  50% {
    transform: scale3d(1, 1, 1);
    transform-origin: 100% 0%;
  }
  100% {
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 0%;
  }
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.contact-info {
  width: 190px;
  color: #45484a;
  
  .icon {
    margin-right: 8px;
    fill: #606971;
  }
}

.row {
  display: flex;
  flex-flow: row wrap;
}

.col-12 {
  width: 100%;
  display: flex;
  //justify-content: center;
  align-items: center;
    
  &:not(:last-child) {
    margin-bottom: 10px;
  }
}

adress {
  line-height: 1.5;
}

a {
  color: $blue;
  text-decoration: none;
}

textarea {
  border: 1px solid #eee;
}
View Compiled
$(() => {
  
  const $formTrigger = $('.js-start-form')
  
  const Form = {
    init() {
      this.$btn = $('.js-start-form')
      this.$form = $('.support-form')
      
      Form.setTrigger()
    },
    setTrigger() {
      Form.$btn.click(Form.open)
    },
    open() {
      Form.$form.addClass('is-active')
      Form.$btn.addClass('--grow js-send-form')
               .removeClass('a-pulse')
               .text('Enviar Solicitação')
      
      Form.$send = $('.js-send-form')
    }
  }
  Form.init()
  
  setTimeout(() => {
    $('.reveal-text').css('opacity', 1)
  }, 600)
  
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.linearicons.com/free/1.0.0/svgembedder.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js