@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.5;font-size: 1em;}
body {background:#edd4b7; text-align: center;display: flex;align-items: center;justify-content: center; }
html, body { height: 100%;}
.input {position: relative;font-size: 4em;background: #9c897c;padding: 2px;display: inline-block;border-radius: .4em;}
.input *:not(span) {background:#8c7c70;position: relative;display: inherit;border-radius: inherit;margin: 0;border: none;outline: none;padding: 0 0.325em;z-index: 1;}
.input *:not(span):focus + span {opacity: 1;transform: scale(1);}
.input span {background:#edcab2;transform: scale(0.903, 0.94);transition: transform 0.2s, opacity 0.25s;opacity: 0;position: absolute;z-index: 0;margin: 4px;left: 0;top: 0;right: 0;bottom: 0;border-radius: inherit;pointer-events: none;box-shadow: inset 0 0 0 3px #fff, 0 0 0 4px #fff, 3px -3px 30px #e3dad3, -3px 3px 30px #b39a88;}

.inputButton {position: relative;font-size: 3em;background: #9c897c;padding: 2px;display: inline-block;border-radius: .4em;margin: 35px;}
.inputButton *:not(span) {background:#8c7c70;position: relative;display: inherit;border-radius: inherit;margin: 0;border: none;outline: none;padding: 0 0.325em;z-index: 1;}
.inputButton *:not(span):focus + span {opacity: 1;transform: scale(1);}
.inputButton:hover {background:#edcab2;box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px #fff, 1px -1px 30px #e3dad3, -1px 1px 30px #b39a88;}

input {font-family: inherit;line-height: inherit; color: #fff;width:100%}
::-moz-placeholder {color: #cbd0d5;}
:-ms-input-placeholder { color: #cbd0d5;}
::placeholder {color: #cbd0d5;}
html::after {content: "";background: #fff;height: 3px;width: 100%; position: absolute;left: 0;top: 0;}


body {font-family: 'Lato', sans-serif;background: #353535;color: #FFF;}
.button-three{text-align: center;cursor: pointer;font-size:24px;margin: 0 0 0 100px;border-radius: .4em;position: relative; background-color: #edd4b7; border: none; padding: 20px; width: 200px; text-align: center; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; text-decoration: none; overflow: hidden;}
.button-three:hover{background:#fff;box-shadow: inset 0 0 0 3px #fff, 0 0 0 4px #fff, 3px -3px 30px #e3dad3, -3px 3px 30px #b39a88;}
.button-three:active:after { padding: 0; margin: 0; opacity: 1; transition: 0s}

.res {font-size: 3em;padding: 2px;display: inline-block;color: #FFF;}

/* Header Footer STYLING */
.box *:last-child {margin-bottom: 0;}
.box-4{box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);position: relative;width: 100%;margin: 0px 0px 0px 0px;}.box-content{background: #e8e3c8 repeat scroll 0 0 #e8e3c8;background-color: #e8e3c8;padding: 25px 55px 45px 55px;position: relative;z-index: 9999;}.box-4:after{box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5); border-radius: 0 0 50% 50% / 0 0 20px 20px;bottom: 0;content: "";height: 20px;left: 10px;position: absolute;right: 10px;}
.box-5{box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);    position: relative;width: 100%;margin: 0px 0px 0px 0px;}.box-5:after {box-shadow: 0 -15px 20px rgba(0, 0, 0, 0.5); border-radius: 70% 50% 0 0 / 20px 20px 0 0 ;bottom: 0;content: "";height: 85px;left: 10px;position: absolute;right: 10px;}
.footer1 {z-index: 9998;position: fixed;left: 0;bottom: 0;width: 100%;background-color: red;color: black;text-align: center;}
.header1 {z-index: 9999;position: fixed;left: 0;top: 0;width: 100%;background-color: red;color: black;text-align: center;}
h1 {font-weight: bold;font-size: 3em;color:#353535;}