@import url('https://fonts.googleapis.com/css?family=Righteous');
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
body{background-image: url("/fondos/fondo_10.jpeg");margin:0 ; justify-content: center}
.todo{margin:calc(50vh - 220px) auto;width:800px}
.formulario{width:340px;height:475px;background:#f7f7cd;border-radius:10px;box-shadow:0 0 40px -10px #000;
padding:20px 30px;box-sizing:border-box;
font-family:'Montserrat',sans-serif;position:relative;
animation: moverform 3s
}

h2{margin:10px 0;padding-bottom:10px;width:180px;color:#78788c;border-bottom:3px solid #78788c}

input{width:100%;padding:10px;box-sizing:border-box;background:none;outline:none;resize:none;border:0;
font-family:'Montserrat',sans-serif;transition:all .3s;border-bottom:2px solid #bebed2}

input:focus{border-bottom:2px solid #78788c}

p:before{content:attr(type);display:block;margin:28px 0 0;font-size:14px;color:#5a5a5a}

button{float:right;padding:8px 12px;margin:8px 0 0;font-family:'Montserrat',sans-serif;border:2px solid #78788c;
background:0;color:#5a5a6e;cursor:pointer;transition:all .3s}

button:hover{background:#78788c;color:#fff}

.row{background:#047d53;color:#fff;position:absolute;bottom:55px;font-family:'Montserrat',sans-serif}

.pie {
    content: 'Hi';
    position: absolute;
    bottom: 36px;
    right: -307px;
    background: #50505a;
    color: #fff;
    width: 320px;
    padding: 16px 4px 16px 0;
    border-radius: 6px;
    font-size: 13px;
    box-shadow: 10px 10px 40px -14px #000;
	animation: moverpie 3s
}
.map {
    
    border:1px solid;
    border-color:orange;
    position: absolute;
    bottom: 80px;
    right: -495px;
	background: #fff;
	border-radius: 6px;
	box-shadow: 10px 10px 40px -14px #000;
	animation: movermapa 3s
}


span{margin:0 5px 0 15px}
.fa-phone:before{
content: "\f095";
}

@keyframes moverform {
  from {left: -100px;}
  to {left: 0px;}
}

@keyframes moverpie {
  from {bottom: -100px;}
  to {bottom: 36px;}
}

@keyframes movermapa {
  from {right: -700px;}
  to {right: -495px;}
}