@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

* {
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
}

fieldset {
    width: 400px;
    margin: 0 auto;
    margin-top: 8px;
    margin-bottom: 2%;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;

}

/*PADDING TODOS OS LADOS DE 20PX*/
/*
h1{
  background:#004A3E;
  padding:20px 0; 
  font-size:140%;
  font-weight:300;
  text-align:center;
  color:#fff;
}
form{
  background:#f0f0f0;
  padding:6% 4%;
}
*/
input[type="password"] {
    width: 76%;
    height: 20px;
    margin-bottom: 4%;
    border: 1px solid #ccc;
    padding: 4% 4% 4% 4%;
    font-family: 'Open Sans', sans-serif;
    font-size: 95%;
    color: #555;
}

.iconPassword {
    width: 20px;
    height: 20px;
    background-color: #d4e2e9;
    float: left;
    padding: 4% 4% 4% 4%;
    margin-bottom: 4%;
    background-repeat: no-repeat;
    background-image: url(https://cdn4.iconfinder.com/data/icons/font-awesome-2/2048/f09c-32.png);
    background-position: center;
    border: 1px solid #ccc;
}

.iconUser {
    width: 20px;
    height: 20px;
    background-color: #d4e2e9;
    float: left;
    padding: 4% 4% 4% 4%;
    margin-bottom: 4%;
    background-repeat: no-repeat;
    background-image: url(https://cdn4.iconfinder.com/data/icons/font-awesome-2/2048/f007-32.png);
    background-position: center;
    border: 1px solid #ccc;
}

input[type="text"] {
    width: 76%;
    height: 20px;
    margin-bottom: 4%;
    border: 1px solid #ccc;
    padding: 4% 4% 4% 4%;
    font-family: 'Open Sans', sans-serif;
    font-size: 95%;
    color: #555;
}

input[type="submit"],
input[type="button"] {
    width: 99%;
    background: #d4e2e9;
    border: 0;
    padding: 4%;
    font-family: 'Open Sans', sans-serif;
    font-size: 100%;
    color: #333;
    cursor: pointer;
    transition: background .3s;
    -webkit-transition: background .3s;
}

input[type="submit"]:hover,
input[type="button"]:hover {
    background: #d5f2ff;
}

::-webkit-input-placeholder {}

.login-footer {
    text-align: center;
}

.login-footer p {
    margin: 0 0 4px 0;
    font-size: 12px;
}

.login-footer button {
    display: inline-block;
    cursor: pointer;
    width: 180px;
    color: #fff;
    font-size: 13px;
    line-height: 40px;
    border: none;
    border-radius: 100vh;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#dddddd+0,969696+100 */
    background: #dddddd;
    /* Old browsers */
    background: -moz-linear-gradient(top, #dddddd 0%, #969696 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #dddddd 0%, #969696 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #dddddd 0%, #969696 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#969696', GradientType=0);
    /* IE6-9 */
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.6);
}