.stopblock_container { width: 720px; height: 529px; overflow: hidden; } .stopblock_title { padding-top: 15px; font-weight: 700; font-size: 28px; line-height: 30px; max-width: 90%; margin: 0 auto; text-align: center; } .stopblock_desc, .stopblock_tabs { text-align: center; } .stopblock_desc { font-size: 18px; margin-top: 12px; margin-bottom: 15px; } .stopblock_links { display: inline-block; border-collapse: collapse; border-radius: 2px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } .stopblock_link { float: left; font-size: 15px; color: #009eff; padding: 5px 10px; border: 1px solid #2980b9; border-left: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; position: relative; outline: 0; -webkit-appearance: button; cursor: pointer; } .stopblock_link.active { background-color: #2980b9; color: #fff; cursor: default; } .stopblock_link:first-child { border-left: 1px solid #2980b9; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .stopblock_link:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .stopblock_link:hover { background: #3498db; color: #fff; } .stopblock_list { margin-top: 15px; } .stopblock_tab.active { display: table; width: 100%; } .stopblock_tab { display: none; text-align: left; table-layout: fixed; } .stopblock_browser { display: table-cell; background-image: url(../../images/stopblock/screen-browser.jpg); vertical-align: top; background-size: 396px 400px; background-position: 0 -25px; background-repeat: no-repeat; border-bottom-left-radius: 5px; overflow: hidden; } .stopblock_screen { position: relative; top: 37px; } .stopblock_steps { display: table-cell; padding-right: 0; padding-top: 33px; padding-left: 10px; vertical-align: top; width: 292px; } .stopblock_step { font-size: 18px; line-height: 22px; margin-top: 12px; position: relative; left: -38px; } .stopblock_inline { position: fixed; bottom: -80px; z-index: 99; 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; width: 100%; height: 80px; background-color: #c0392b; -webkit-transition: bottom 0.5s ease; transition: bottom 0.5s ease; } .stopblock_inline * { box-sizing: border-box; } .stopblock_inline_open { bottom: 0; } .stopblock_inline_container { width: 980px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .stopblock_inline_container-text-button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding: 0 10px 0 0; } .stopblock_inline_text { line-height: 1.42857; font-size: 16px; color: #fff; } .stopblock_inline_button { 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: 170px; height: 40px; font-size: 15px; font-weight: bold; line-height: 1.42857; color: #fff; text-transform: uppercase; text-decoration: none; border-radius: 2px; background-color: #e74c3c; } .stopblock_inline_button:hover { color: #CCC; } .stopblock_inline_close { font-size: 40px; line-height: 40px; color: #fff; cursor: pointer; } @media screen and (max-width: 800px) { .stopblock_container { width: 690px; } .stopblock_inline_container-text-button { padding: 0 10px; } .stopblock_inline_close { margin-right: 10px; } } @media screen and (max-width: 640px) { .stopblock_container { width: 520px; } .stopblock_steps { display: none; } .stopblock_inline_button { display: none; } } @media screen and (max-width: 495px) { .stopblock_container { width: 420px; } } @media screen and (max-width: 335px) { .stopblock_container { width: 270px; } .stopblock_screen { left: -90px; } .stopblock_title { font-size: 20px; } }