/*General */ html{ background:url('images/sun-2297961_1920.jpg') no-repeat; background-size: cover; height:100%; } body { font-family: 'Montserrat', Arial, Helvetica, sans-serif; } #feedback-page{ text-align:center; } #form-main{ width:100%; float:left; padding-top:0px; } #form-div { background-color:rgba(72,72,72,0.4); padding-left:35px; padding-right:35px; padding-top:35px; padding-bottom:50px; width: 450px; float: left; left: 50%; position: absolute; margin-top:30px; margin-left: -260px; border-radius: 7px; } .montform .feedback-input { color:#3c3c3c; font-family: Helvetica, Arial, sans-serif; font-weight:500; font-size: 18px; border-radius: 0; line-height: 22px; background-color: #fbfbfb; padding: 13px 13px 13px 54px; margin-bottom: 10px; width:100%; box-sizing: border-box; border: 3px solid rgba(0,0,0,0); } /*Inputs styles*/ .montform .feedback-input:focus{ background: #fff; border: 3px solid #3498db; color: #3498db; outline: none; padding: 13px 13px 13px 54px; } /* Icons ---------------------------------- */ .montform #name{ background-image: url(https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-address-book.svg); background-size: 30px 30px; background-position: 11px 8px; background-repeat: no-repeat; } .montform #name:focus{ background-image: url(https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-address-book.svg); background-size: 30px 30px; background-position: 8px 5px; background-position: 11px 8px; background-repeat: no-repeat; } .montform #email{ background-image: url(https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-mail.svg); background-size: 30px 30px; background-position: 11px 8px; background-repeat: no-repeat; } .montform #email:focus{ background-image: url(https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-mail.svg); background-size: 30px 30px; background-position: 11px 8px; background-repeat: no-repeat; } .montform #comment{ background-image: url(https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-pencil.svg); background-size: 30px 30px; background-position: 11px 8px; background-repeat: no-repeat; } .montform textarea { width: 100%; height: 150px; line-height: 150%; resize:vertical; } .montform input:hover, .montform textarea:hover, .montform input:focus, .montform textarea:focus { background-color:#e6e6e6; } .button-blue{ font-family: 'Montserrat', Arial, Helvetica, sans-serif; float:left; width: 100%; border: #fbfbfb solid 4px; cursor:pointer; background-color: #3498db; color:white; font-size:24px; padding-top:22px; padding-bottom:22px; transition: all 0.3s; margin-top:-4px; font-weight:700; } .button-blue:hover{ background-color: rgba(0,0,0,0); color: #0493bd; } .montform .submit:hover { color: #3498db; } .ease { width: 0px; height: 74px; background-color: #fbfbfb; transition: .3s ease; } .submit:hover .ease{ width:100%; background-color:white; } /*Styles for small screens*/ @media only screen and (max-width: 580px) { #form-div{ left: 3%; margin-right: 3%; width: 88%; margin-left: 0; padding-left: 3%; padding-right: 3%; } }