/**/
::-webkit-input-placeholder{color:#6d7774 !important}
:-moz-placeholder{color:#6d7774 !important}
::-moz-placeholder{color:#6d7774 !important}
:-ms-input-placeholder{color:#6d7774 !important}
/**/

.form-whats{
    width: 570px;
    float: right;
    background: rgba(91,210,135,0.65);
    background: -moz-linear-gradient(-45deg, rgba(91,210,135,0.65) 0%, rgba(67,166,187,0.65) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(91,210,135,0.65)), color-stop(100%, rgba(67,166,187,0.65)));
    background: -webkit-linear-gradient(-45deg, rgba(91,210,135,0.65) 0%, rgba(67,166,187,0.65) 100%);
    background: -o-linear-gradient(-45deg, rgba(91,210,135,0.65) 0%, rgba(67,166,187,0.65) 100%);
    background: -ms-linear-gradient(-45deg, rgba(91,210,135,0.65) 0%, rgba(67,166,187,0.65) 100%);
    background: linear-gradient(135deg, rgba(91,210,135,0.65) 0%, rgba(67,166,187,0.65) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5bd287', endColorstr='#43a6bb', GradientType=1 );
    padding: 35px 30px 30px 30px;
    position: relative;
    border-radius: 30px;
    text-align: center;
}

#form-whats.form-whats .loader{
    width: 52px;
    height: 52px;
    background-color: white;
    background-image: url(gif-enviando.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40px;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    bottom: 20px;
    margin: 0 0 0 -26px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    display: none;
}

#form-whats.form-whats .sucesso{color: #fff; font-weight: 700; font-size: 30px;}
#form-whats.form-whats .ops{color: #fff; font-weight: 600; font-size: 18px;}

#wrapper .form-whats img.icone-whats{
    height: 80px;
    margin: 0 0 20px 0;
}

#wrapper .form-whats h2{
    color: #fff;
    padding: 0 30px 0 30px;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 35px 0;
}

.form-whats div{padding: 0 10px;}

.form-whats input[type="text"], .form-whats input[type="tel"]{
    height: auto;
    margin: 0 0 25px 0;
    outline: none;
    padding: 13px 0 13px 10px;
    font-size: 20px;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    box-sizing: border-box;
    border-radius: 10px;
    border: 2px solid #dbeeea;
    background-color: #dbeeea;
    color: #6d7774;
}

.form-whats #nome{width: 100%;}
.form-whats #ddd-whats{width: 17%; float: left;}
.form-whats #telefone-whats{width: 81%; float: right;}

.form-whats label{display: none !important;}

.form-whats input[type="text"]:focus, .form-whats input[type="tel"]:focus{background-color: #fff; border: 2px solid #4caf50; box-shadow: 0 0 0 2px #fff;}

.form-whats input[type="submit"]{
    height: 52px;
    background: rgba(79,216,151,1);
    background: -moz-linear-gradient(top, rgba(79,216,151,1) 0%, rgba(50,219,89,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(79,216,151,1)), color-stop(100%, rgba(50,219,89,1)));
    background: -webkit-linear-gradient(top, rgba(79,216,151,1) 0%, rgba(50,219,89,1) 100%);
    background: -o-linear-gradient(top, rgba(79,216,151,1) 0%, rgba(50,219,89,1) 100%);
    background: -ms-linear-gradient(top, rgba(79,216,151,1) 0%, rgba(50,219,89,1) 100%);
    background: linear-gradient(to bottom, rgba(79,216,151,1) 0%, rgba(50,219,89,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4fd897', endColorstr='#32db59', GradientType=0 );
    font-weight: 700;
    border: none;
    padding: 0 80px 0 80px;
    color: #012a29;
    font-family: 'Quicksand', sans-serif;
    border-radius: 15px;
    margin: 20px auto 25px;
    display: block;
    font-size: 24px;
    outline: none;
}

.form-whats input[type="submit"]:hover{
    color: #fff;
    background: #fb9608;
    background: -moz-linear-gradient(top, #fb9608 0%, #f4670f 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #fb9608), color-stop(100%, #f4670f));
    background: -webkit-linear-gradient(top, #fb9608 0%, #f4670f 100%);
    background: -o-linear-gradient(top, #fb9608 0%, #f4670f 100%);
    background: -ms-linear-gradient(top, #fb9608 0%, #f4670f 100%);
    background: linear-gradient(to bottom, #fb9608 0%, #f4670f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb9608', endColorstr='#f4670f', GradientType=0 );
}

.form-whats input.error{border: 2px solid red !important;}
.form-whats input.valid{border: 2px solid #4caf50 !important;}

.form-whats h3{
    color: #fff;
    font-weight: 500;
    font-size: 20px;
    margin: 0;
    padding: 0 30px;
    line-height: 28px;
}

@media(max-width:1210px){
    .form-whats{width: 100%; padding: 25px 20px 20px 20px;}
    #wrapper .form-whats img.icone-whats{height: 60px; margin: 0 0 10px 0;}
    #wrapper .form-whats h2{margin: 0 0 20px 0;}
}

@media(max-width:950px){
    .form-whats{width: 95%; float: none; margin: 0 auto 30px; padding: 25px 5px 20px 5px;}
    #wrapper .form-whats img.icone-whats{height: 50px; margin: 0 0 10px 0;}
    #wrapper .form-whats h2{font-size: 18px;}
    .form-whats input[type="text"], .form-whats input[type="tel"]{margin: 0 0 15px 0; font-size: 18px;}
    .form-whats #ddd-whats{width: 25%;}
    .form-whats #telefone-whats{width: 73%;}
    .form-whats h3{font-size: 18px; line-height: 22px; padding: 0;}
}

@media(max-width:767px){}