index.css

*{padding:0;margin:0;border:0;list-style:none;font-family:"Lato";color:#fff}.act{color:#07c8c8}.wrap-content{height:100%;margin-left:auto;margin-right:auto}.top-bar{z-index:45;width:100%;height:100px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:rgba(16,16,29,.9);position:fixed}.logo{font-weight:600;font-size:30px;width:181px;position:absolute;margin-top:30px;padding-left:4%}.nav{font-size:15px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0;gap:60px;margin-right:60px;margin-top:40px}.activ{color:#07c8c8}header{width:100%;height:850px;left:0;top:0;background-image:url("glenn-carstens-peters-npxXWgQ33ZQ-unsplash 1.png")}.banner{max-width:780px;position:absolute;margin-top:203px;margin-left:4%;color:#2a2b30}.banner>h1{font-size:40px;text-transform:uppercase;color:#2a2b30}.banner>h3{margin-top:80px;font-size:20px;color:#2a2b30}.banner ul>li{color:#2a2b30;padding-top:10px}.buttons{margin-top:80px;float:left;width:183px;padding:15px 32px;text-align:center}.buttons.act{border:1px solid #fff;border-radius:4px;background-color:#07c8c8;color:#fff;margin-right:30px}.buttons.whi{border:1px solid #2a2b30;border-radius:4px;background-color:#fff;color:#2a2b30}@media screen and (max-width:1279px){.top-bar>.wrap-content{width:1024px;margin-left:auto;margin-right:auto}}@media screen and (max-width:768px){.nav{display:none}.top-bar>.wrap-content{width:100%;margin-left:auto;margin-right:auto}}@media screen and (max-width:1023px){.top-bar>.wrap-content{width:769px;margin-left:auto;margin-right:auto}}@media screen and (min-width:1280px){.wrap-content{width:1280px;margin-left:auto;margin-right:auto}}
form{display:grid;grid-template-columns:repeat(3,370px);grid-row-gap:30px;grid-column-gap:30px;padding-bottom:100px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}select{-moz-appearance:none;-webkit-appearance:none;appearance:none;width:370px;cursor:pointer;background:rgba(255,255,255,.85);border:0;border-radius:3px;font-weight:400;font-size:18px;line-height:22px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:13px 14px;outline:0;color:#272733}.select::-ms-expand{display:none}select:focus{background-color:rgba(61,64,80,.85);color:#fff}.option{padding:10px}.select-wrapper{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative}.select-wrapper::before{content:"";position:absolute;top:45%;right:15px;-webkit-transform:translate(-50%);transform:translate(-50%);display:block;width:9px;height:6px;background-image:url(arrowDn.png);pointer-events:none}input[type=text]{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}.text-field__input::-webkit-input-placeholder{color:#272733}.text-field__input::-moz-placeholder{color:#272733}.text-field__input:-ms-input-placeholder{color:#272733}.text-field__input::-ms-input-placeholder{color:#272733}.text-field__input::placeholder{color:#272733}.text-field__input:focus{color:#212529}.text-field__input:disabled,.text-field__input[readonly]{opacity:1}input{background:rgba(255,255,255,.85);outline:0;border-radius:3px;width:355px;height:48px;color:#272733;padding-left:15px}.slider{display:block;grid-column-start:1;grid-column-end:3}.slider>p{position:absolute}input[type=range]{width:98%}#volume{margin-left:98%}#percent,#volume{color:#bbb;font-style:italic}#fader{height:6px;background:rgba(255,255,255,.7);border:1px solid #fff;-webkit-appearance:none;outline:0;margin-top:20px}#fader::-webkit-slider-thumb{-webkit-appearance:none;width:25px;height:25px;border-radius:50%;background:#07c8c8;border:3px solid #14317b}.form-btm{grid-column-start:2;grid-column-end:3;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:370px;height:48px;font-size:18px;font-weight:400;background:#07c8c8;border:1px solid #fff;border-radius:4px}.input__file{display:none}.description,.input__file-btn,h2{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.input__file-btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:370px;height:48px;font-size:18px;font-weight:400;background:#fff;border:2px solid #07c8c8;color:#272733;border-radius:3px}.input__file-btn>svg{padding-right:10px}main{background-color:#272733;background-image:url(1.png)}p{color:#bbb}p.footer-item.whi{color:#fff}.description,h2{text-align:center}h2{color:#fff;padding-top:100px;font-size:32px}.description{padding-top:30px}.wrapper-tizer{margin:80px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.tiz-item>p{color:#fff;height:40px}.tizer{margin:0 auto 30px;width:90px;height:90px;border-radius:50%;background-color:#07c8c8;border:5px solid #14317b}.tizer>svg{width:30px;height:30px;padding:30px}.dots{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;margin-top:-122px;position:relative;margin-left:86%;width:107px}.dots-item{width:6px;height:6px;border-radius:50%;background:#c4c4c4}footer{width:100%;min-height:80px;background-color:#3d4050;color:#c3c3c3}.footer-item,footer>.wrap-content{display:-webkit-box;display:-ms-flexbox;display:flex}footer>.wrap-content{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.footer-item{gap:30px;margin-top:31px}.footer-item:not(:last-child){border-right-color:#c3c3c3;border-right-style:solid;border-right-width:2px;padding-right:60px}.footer-item:not(:first-child){padding-left:60px}.footer-item>li{display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px}.footer-item:last-child svg{padding-top:4px}@media screen and (max-width:1279px){form{grid-template-columns:repeat(2,370px)}.wrapper-tizer{-ms-flex-wrap:wrap;flex-wrap:wrap;margin:80px auto;width:768px;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}.tiz-item{width:198px}.dots{margin-left:79%;width:100px}.footer-item:not(:first-child){padding-left:30px}.footer-item:not(:last-child){padding-right:20px}.footer-item{gap:20px}}@media screen and (max-width:1199px){.dots{display:none}}@media screen and (max-width:1072px){.footer-item>li>svg{padding-top:10px}}@media screen and (max-width:800px){input[type=range]{width:95%}#volume{margin-left:96%;color:#bbb;font-style:italic}form{display:grid;grid-template-columns:repeat(1,370px);grid-row-gap:30px;padding-bottom:100px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.form-btm,.select-wrapper,.slider,.text-field__input{grid-column-start:1;grid-column-end:1}.wrapper-tizer{width:auto}}@media screen and (max-width:400px){form{display:grid;grid-template-columns:repeat(1,310px)}.form-btm,.input__file-btn,.text-field__input,select{width:290px;grid-column-start:1;grid-column-end:1}.slider>p{position:relative}input[type=range]{width:80%}#volume{margin-left:80%}.buttons{margin-top:20px}}@media screen and (max-width:1023px){footer>.wrap-content{-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}.footer-item>li>svg{padding-top:0}.footer-item:not(:last-child){border-right-color:#3d4050;margin:10px;padding-right:0}}@media screen and (max-width:1022px){.footer-item:last-child{margin-top:0}}