.container { overflow: hidden; } .row { width: 100%; } .row + .row { margin-top: 10px; } .modal_04{ background: #FFFFFF; } .form_header { background: #FFFFFF; text-align: center; position: absolute; width:100%; top:0; left:0; padding: 5px; border-bottom: solid 1px #000; } .container {padding-top:86px;} .form_header:after{ display: none; position: absolute; bottom: -17px; z-index: -1; left: 50%; margin-left: -204px; max-width: 100%; } .inp_caption { color: #545353; font-family: "Helvetica"; font-size: 19px; font-weight: 500; text-align: center; margin-bottom: 10px; } .inp_wr{ text-align: center; } .main_input{ border: 1px solid #A7A6AA; outline-style: none; max-width: 200px; height: 23px; background-color: #FFFFFF; padding-left: 6px; font-size: 19px; width: 100%; } .main_inpute{ border: 1px solid #A7A6AA; outline-style: none; max-width: 150px; height: 20px; background-color: #FFFFFF; padding-left: 6px; font-size: 15px; width: 20%; } .input_block_wr { overflow: hidden; } .input_block_wr + .input_block_wr { margin-top: 15px; } .btn_wr { text-align: center; margin-top: 18px; margin-bottom: 25px; } .login_btn { width: 123px; height: 44px; background-color: #AF000C; border: none; outline:none; color: #FFF; font-family: "Helvetica"; font-size: 19px; font-weight: 700; text-shadow: 0 -2px 1px rgba(0, 0, 2, 0.42); } .content{ padding: 15px 10px; background-color:#F0F0F0; border: 1px solid #D3D3D3; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } @media screen and (min-height:568px) and (max-height:736px) and (min-width:320px){ .main_input {height:54px; font-size:23px;} .login_btn {height:54px; width:180px; font-size:23px;} .btn_wr, .input_block_wr + .input_block_wr {margin-top:35px;} .inp_caption {margin-bottom:20px; font-size:23px;} } @media screen and (min-height:737px) and (min-width:320px){ .main_input {height:64px; font-size:23px; max-width:640px;} .login_btn {height:64px; width:230px; font-size:25px;} .inp_caption {font-size:25px;} } @media screen and (min-height:800px) and (min-width:320px){ .main_input {height:74px; font-size:25px;} .login_btn {height:74px; width:230px; font-size:29px;} .btn_wr, .input_block_wr + .input_block_wr {margin-top:40px;} .inp_caption {font-size:29px;} } @media screen and (min-height:568px) and (max-height:736px) and (min-width:320px){ .main_inpute {height:54px; font-size:23px;} .login_btn {height:54px; width:180px; font-size:23px;} .btn_wr, .input_block_wr + .input_block_wr {margin-top:35px;} .inp_caption {margin-bottom:20px; font-size:23px;} } @media screen and (min-height:737px) and (min-width:320px){ .main_inpute {height:64px; font-size:23px; max-width:640px;} .login_btn {height:64px; width:230px; font-size:25px;} .inp_caption {font-size:25px;} } @media screen and (min-height:800px) and (min-width:320px){ .main_inpute {height:74px; font-size:25px;} .login_btn {height:74px; width:230px; font-size:29px;} .btn_wr, .input_block_wr + .input_block_wr {margin-top:40px;} .inp_caption {font-size:29px;} } @media screen and (max-height: 360px){ .form_header { padding: 5px; height: 40px; margin-bottom: 0; } .container {padding-top:50px;} .inp_caption { font-size: 13px; margin-bottom: 3px; } .row + .row { margin-top: 10px; } .form_header:after { content: none; } .main_input{ height: 20px; font-size: 13px; } .main_inpute{ height: 20px; font-size: 13px; } .login_btn{ height: 25px; line-height: 19px; font-size: 15px; } .input_block_wr + .input_block_wr { margin-top: 5px; } .btn_wr { margin-top: 12px; margin-bottom: 5px; } } @media screen and (max-width: 200px) and (max-height: 240px) { .form_header { padding: 2px; height: 20px; } .container {padding-top:24px;} .content { padding: 0 3px; } .inp_caption { font-size: 10px; margin-bottom: 1px; } .row + .row{ margin-top: 2px; } .main_input{ height: 15px; font-size: 11px; } .main_inpute{ height: 15px; font-size: 11px; } .input_block_wr + .input_block_wr { margin-top: 3px; } .btn_wr{ margin-top: 4px; margin-bottom: 4px; } .login_btn{ font-size: 10px; height: 19px; line-height: 10px; width: 70px; } }