html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figure, figcaption, hgroup, menu, footer, header, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; } body{ font-family: Roboto; } article, aside, canvas, figure, figure img, figcaption, hgroup, footer, header, nav, section, audio, video { display: block; } ul{list-style-type: none;} a{text-decoration: none;} .fix{overflow: hidden;} .floatleft{float: left;} .floatright{float: right;} .main_wrapper{ width: 100%; } .wrapper{ width: 509px; margin: 0 auto; } /*------------------------------------------------------*/ .header_bg{ background-color: #FFFFFF; border-bottom: 1px solid #B7B7B7; box-shadow: 0px 3px 8px -1px #B7B7B7; height: 64px; } .header{ padding: 0 23px; } .header .center{ margin-top: 18px; } .header .logo a{ background-color: #b3d4fc; color: #4f6df5; text-shadow: none; font-style: italic !important; font-weight: 600 !important; font-size: 24px !important; letter-spacing: normal !important; background-color: transparent; } .header .menu img{ width: 25px; height: 25px; cursor: pointer; } .header .menu a{ color: #4f6df5; font-size: 17px; display: inline-block; margin-top: 4px; } .menu .search{ margin: 0 15px; } /*------------------------------------------------------*/ .login_form_bg{ margin-top: 3rem; } .login_form{ text-align: center; border: 1px solid #E6E6E6; box-shadow: 0px 2px 2px -1px #B7B7B7; } .form .form_heading{ background-color: #4F6DF5; box-shadow: 0px 3px 8px 0px #B7B7B7; height: 4.5rem; margin-bottom: 1rem; } .form .form_heading h1{ color: #FFFFFF; font-size: 20px; text-align: left; padding: 20px 0 0 20px; } .form form{ padding: 0 15px; } .input_div{ display: grid; grid-template-columns: 8% 92%; height: 26px; border-bottom: 2px solid #eaeaea; position: relative; } .input_div.one{ margin-bottom: 5px; } .input_div.two{ margin-bottom: 5px; margin-top: 40px; } .input_div > div{ position: relative; width: 1250%; } .input_div > div > h3{ position: absolute; top: 50%; transform: translateY(-50%); color: #8a8a8a; transition: .3s; font-size: 16px; font-weight: 500; } .input_div.focus > div > h3{ top: -5px; font-size: 12px; color: #4F6DF5; } .input_div .input{ position: absolute; width: 100%; height: 100%; border: none; background: none; left: 0; font-size: 15px; color: #000; outline: none; } .input_div:after, .input_div:before{ content: ''; position: absolute; background-color: #4F6DF5; width: 0; bottom: -2px; height: 2px; transition: .5s; } .input_div:after{ left: 50%; } .input_div:before{ right: 50%; } .input_div.focus:after, .input_div.focus:before{ width: 50%; } .form form .submit input{ background-color: #4F6DF5; width: 185px; color: #FFFFFF; font-size: 16px; border: none; padding: 12px 0; border-radius: 2px; box-shadow: 0px 3px 8px -1px #B7B7B7; cursor: pointer; margin-top: 25px; transition: .3s all ease; } .form form .submit input:hover{ background-color: #647FF6; } .form form .form_footer{ padding: 24px 8px; margin-top: 38px; } .form form h6{ text-align: left; font-weight: 500; color: #464646; } .form form .form_footer{ margin-bottom: 1.5rem; } .form form .form_footer > div{ width: 33.3333333%; } .form form .form_footer .signup{ text-align: right; } .form form .form_footer .help{ text-align: right; } .form form .form_footer a{ color: #4F6DF7; } /*------------------------------------------------------*/ .footer_bg{ background-color: #F5F5F5; margin-top: 6rem; padding: 48px 0; } .footer_wrapper{ width: 960px; margin: 0 auto; text-align: center; } .footer .f_top{ padding: 16px 0; margin-bottom: 20px; display: grid; grid-template-columns: repeat(6, 1fr); } .footer .f_top a{ color: #4F6DF7; } .paragraph { margin: 25px; padding: 35px; font-size: 16px; } @media (min-width: 768px) { /* For tablets and larger screens */ .paragraph { margin: 35px; padding: 45px; font-size: 18px; } } @media (min-width: 992px) { /* For desktop screens */ .paragraph { margin: 45px; padding: 55px; font-size: 20px; } } @media (min-width: 1200px) { /* For large desktop screens */ .paragraph { margin: 55px; padding: 65px; font-size: 20px; } }