style.css

/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */*{-webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style-type: none;}body{font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 400; background: #05263F; color: #fff;}button{cursor: pointer;}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance: none;}h1,h2,h3{text-align: center; padding: 30px 0 15px;}.wrapper{max-width: 1000px; margin: 0 auto;}.wrapper__search,.wrapper__button{display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}.wrapper__button{margin-top: 50px;}.wrapper__search .input{width: 200px; max-width: 250px; height: 50px; margin: 20px 5px; letter-spacing: 0.6px; position: relative;}.wrapper__search .input input{-webkit-appearance: none; border: 0; -webkit-box-sizing: border-box; box-sizing: border-box; height: 60px; line-height: 2.25rem; padding: 9px 18px; position: relative; -webkit-transition: border-radius .3s, width .3s; -o-transition: border-radius .3s, width .3s; transition: border-radius .3s, width .3s; -webkit-box-shadow: inset 0 0 0 2px transparent; box-shadow: inset 0 0 0 2px transparent; z-index: 1; width: 100%; border-radius: inherit; color: inherit; background-color: #1e3c53;}.wrapper__search .input input:focus~.label{top: -25px; left: 0; color: #00416A;}input{-webkit-box-shadow: 0 0 0 2px #ff6d00; box-shadow: 0 0 0 2px #ff6d00; outline: none; font-family: inherit;}.dropdown{width: 100%; position: relative; z-index: 2; background: #fff; color: #000; max-height: 300px; overflow-x: hidden;}.dropdown__city{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 5px 15px; cursor: pointer;}.dropdown__city:hover{color: #d84d00;}.button{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; width: 100%; max-width: 274px; min-height: 59px; font-size: 1.375rem; font-style: normal; line-height: 1.4; font-weight: 500; color: inherit; padding: 10px 20px; border: none; border-radius: 5px; -webkit-appearance: none; background-color: #f57c00; -webkit-box-shadow: 0 1px 0 0 #d84d00, 0 2px 6px 0 rgba(0, 0, 0, .15); box-shadow: 0 1px 0 0 #d84d00, 0 2px 6px 0 rgba(0, 0, 0, .15); -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s;}.button:hover{background-color: #ffa353; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s;}.button__search:after{content: ""; display: inline-block; width: 36px; height: 36px; background: 50% 50%/100% no-repeat url(img/plane.svg); margin-left: 2px;}.left-side,.right-side{padding: 20px; width: 100%;}.left-side{min-width: 270px; width: 270px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}.right-side{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-left: 1px solid black;}.button__buy{font-size: 16px; max-width: 166px; line-height: 1.25; padding-top: 5px; padding-bottom: 5px; width: 100%; font-weight: 600; font-family: inherit; text-decoration: none; margin-bottom: 15px;}.button__add{margin: 50px auto 0;}.ticket{width: 100%; max-width: 730px; margin: 30px auto; border-radius: 5px; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .15); box-shadow: 0 1px 5px rgba(0, 0, 0, .15); background-color: #1e3c53;}.ticket__wrapper{display: -webkit-box; display: -ms-flexbox; display: flex;}.agent{padding: 5px; text-align: center; border-bottom: 1px solid black;}.block-left,.block-right{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}.block-right{text-align: right;}.city__name{font-size: 18px; font-weight: 600;}.block__ticket{margin: 50px 0;}@media(max-width: 768px){.ticket__wrapper{-ms-flex-wrap: wrap; flex-wrap: wrap;}.left-side{width: 100%;}}@media(max-width: 550px){.right-side{-ms-flex-wrap: wrap; flex-wrap: wrap;}.left-side{min-width: 100%;}.block-right, .block-left{width: 100%;}.block-left{margin-bottom: 20px;}}