body{font-size:20px;line-height:30px;color:#fff;margin:0;padding:0;border:0;font-family: 'open sans', sans-serif;font-weight:400;background:url('fondpfos.jpg')no-repeat center center fixed;background-size: cover;width:auto;height:auto}
.site{width:100%;height:100%;position:absolute;    background: rgba(0,0,0,.6);}
.wrapper{width:320px;position: relative;margin-left:auto;margin-right:auto}
.log{width:278px;padding:28px 21px 21px}
.logo,.help{font-weight:300}
.logo{font-size:32px;margin-left:75px}
.logo:before{content:"";background:url('spirale.png')no-repeat;    height: 70px; width:70px; position: absolute;top: 28px; left:21px;}
.logo span{display:block;font-size:11px;padding:3px 0 0}
input{-webkit-appearance: none;display:block;border:0;font-size:13px;padding:21px;margin:14px 0 0;border-radius:3px;width:230px}
textarea{height:175px}
input[type=submit]{cursor:pointer;width:272px;padding:14px;font-size:21px;border-radius:3px;color:#fff;background:#fb9325}
input[type=submit]:hover{opacity: 1}

.help{text-align:center;font-size:15px;color:#dadada}
.help a {color:#fff;text-decoration:none}
.help span{display:block}

@media screen and (min-width:768px){
.wrapper{width:390px;height:475px;top: 50%;transform: translateY(-50%)}
.log{width:310px;height:370px;padding: 30px 40px 40px;background: rgba(0,0,0,.5)}
.logo{font-size:37px}
.logo:before{left:40px;}
.logo span{font-size:13px}
input{width:258px}
input[type=submit]{width:300px}
.help span{display:inline-block}
}

@media screen and (min-width:1024px){
input[type=submit]{opacity: 0.8;}
input[type=submit]:hover {background:#d57005;color:#fff}
}