div#wrapper{float:left;width:100%;position: relative;top: 40px; } div#content1{margin: 0 10%;} div#content2{margin: 2% 10%;} div#content3{margin: 0 10%;} div#footer{clear:left; width:100%; height: 20%; margin: 30% 0 0 0;} /*body{font-family:ProximaNova,fantasy,arial;font-weight:400;font-size:14px;color:#757575;background:#f9f9f9 url("https://www.peptidesciences.com/skin/frontend/default/peptidelabs/images/peptide-bg.jpg") no-repeat scroll right top;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}*/ body{font-family:ProximaNova,fantasy,arial;font-weight:400;font-size:14px;color:#757575;background:#f9f9f9 url("/img/peptidebg.jpg") no-repeat scroll right top;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} form{font-family:fantasy;text-align:center;} /*form.ng-pristine.ng-invalid.ng-invalid-required.ng-valid-minlength.ng-valid-maxlength.ng-valid-integer legend.ng-binding{font-family:fantasy} form.ng-valid-maxlength.ng-valid-integer.ng-dirty.ng-valid-parse.ng-valid-required.ng-valid.ng-valid-minlength legend.ng-binding{font-family:fantasy} form.ng-invalid.ng-valid-maxlength.ng-valid-integer.ng-dirty.ng-valid-parse.ng-valid-required.ng-invalid-minlength legend.ng-binding{font-family:fantasy} form.ng-invalid.ng-valid-maxlength.ng-dirty.ng-valid-parse.ng-valid-required.ng-invalid-integer.ng-valid-minlength legend.ng-binding{font-family:fantasy} form.ng-invalid.ng-valid-maxlength.ng-dirty.ng-valid-parse.ng-valid-required.ng-invalid-integer.ng-invalid-minlength*/ legend.ng-binding{font-family:fantasy} fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em} h1,h2,h3,h4,h5,h6{font-weight:400} a{color:#757575;text-decoration:none} sub{bottom:-0.25em}@font-face{font-family:'ProximaNova';src:url("fonts/proximanova/proxima-nova-thin.woff") format("woff");font-weight:100;font-style:normal}@font-face{font-family:'ProximaNova';src:url("fonts/proximanova/proxima-nova-light.woff") format("woff");font-weight:300;font-style:normal}@font-face{font-family:'ProximaNova';src:url("fonts/proximanova/proxima-nova-regular.woff") format("woff");font-weight:400;font-style:normal}@font-face{font-family:'ProximaNova';src:url("fonts/proximanova/proxima-nova-semibold.woff") format("woff");font-weight:600;font-style:normal}@font-face{font-family:'ProximaNova';src:url("fonts/proximanova/proxima-nova-bold.woff") format("woff");font-weight:700;font-style:normal}@font-face{font-family:'ProximaNova';src:url("fonts/proximanova/proxima-nova-extrabold.woff") format("woff");font-weight:800;font-style:normal}@font-face{font-family:'ProximaNova';src:url("fonts/proximanova/proxima-nova-black.woff") format("woff");font-weight:900;font-style:normal} .btn{display:inline-block;width:158px;height:38px;line-height:38px;padding:0;margin:0;border-width:1px;border-style:outset;font-size:20px;text-align:center;cursor:pointer;-webkit-transition:all .2s;transition:all .2s;font-family: fantasy;} .btn:hover{text-decoration:none} .btn:focus{outline:0} .btn:active{-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.18);box-shadow:inset 0 2px 4px rgba(0,0,0,0.18)} .btn[disabled]{border-color:#e0e0e0 !important;background-color:#e0e0e0 !important;color:#b0b0b0 !important;cursor:default !important} .btn-small{width:118px;height:28px;line-height:28px;font-size:12px} .btn-large{width:178px;height:48px;line-height:48px} .btn-block{display:block;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:0;padding-right:0} input.btn,button.btn{width:100px;height:33px;border-radius: 5px;} input.btn-small,button.btn-small{width:120px;height:30px} input.btn-large,button.btn-large{width:180px;height:50px} .btn-black{background:#424242;border-color:#424242;color:#fff}.btn-black:hover{background-color:#212121;border-color:#212121;color:#fff}.btn-gray{background:#b0b0b0;border-color:#b0b0b0;color:#fff}.btn-gray:hover{background-color:#757575;border-color:#757575;color:#fff}.btn-white{background:#f5f5f5;border-color:#f5f5f5;color:#fff}.btn-white:hover{background-color:#eee;border-color:#eee;color:#fff}.btn-yellow{background:#ffd619;border-color:#ffd619;color:#fff}.btn-yellow:hover{background-color:#fec517;border-color:#fec517;color:#fff}.btn-gold{background:#ffab13;border-color:#ffab13;color:#fff}.btn-gold:hover{background-color:#ff920f;border-color:#ff920f;color:#fff}.btn-orange{background:#ff6700;border-color:#ff6700;color:#fff;line-height: 1;}.btn-orange:hover{background-color:#f95b07;border-color:#f95b07;color:#fff;line-height: 1;}.btn-red{background:#f23835;border-color:#f23835;color:#fff;line-height: 1;}.btn-red:hover{background-color:#e42a27;border-color:#e42a27;color:#fff;line-height: 1;}.btn-pink{background:#f93e7a;border-color:#f93e7a;color:#fff}.btn-pink:hover{background-color:#e9306c;border-color:#e9306c;color:#fff}.btn-purple{background:#a41daf;border-color:#a41daf;color:#fff}.btn-purple:hover{background-color:#9715a2;border-color:#9715a2;color:#fff}.btn-indigo{background:#545ad1;border-color:#545ad1;color:#fff}.btn-indigo:hover{background-color:#494fc5;border-color:#494fc5;color:#fff}.btn-blue{background:#2096f3;border-color:#2096f3;color:#fff}.btn-blue:hover{background-color:#0c80dc;border-color:#0c80dc;color:#fff}.btn-cyan{background:#00c0a5;border-color:#00c0a5;color:#fff}.btn-cyan:hover{background-color:#03b3ad;border-color:#03b3ad;color:#fff}.btn-green{background:#83c44e;border-color:#83c44e;color:#fff;line-height: 1;}.btn-green:hover{background-color:#71b639;border-color:#71b639;color: yellow;}.btn-wf-black{border-color:#424242;color:#424242}.btn-wf-black:hover{color:#fff;background-color:#212121;border-color:#212121}.btn-wf-gray{border-color:#b0b0b0;color:#b0b0b0}.btn-wf-gray:hover{color:#fff;background-color:#757575;border-color:#757575}.btn-wf-white{border-color:#f5f5f5;color:#f5f5f5}.btn-wf-white:hover{color:#fff;background-color:#eee;border-color:#eee}.btn-wf-yellow{border-color:#ffd619;color:#ffd619}.btn-wf-yellow:hover{color:#fff;background-color:#fec517;border-color:#fec517}.btn-wf-gold{border-color:#ffab13;color:#ffab13}.btn-wf-gold:hover{color:#fff;background-color:#ff920f;border-color:#ff920f}.btn-wf-orange{border-color:#ff6700;color:#ff6700}.btn-wf-orange:hover{color:#fff;background-color:#f95b07;border-color:#f95b07}.btn-wf-red{border-color:#f23835;color:#f23835}.btn-wf-red:hover{color:#fff;background-color:#e42a27;border-color:#e42a27}.btn-wf-pink{border-color:#f93e7a;color:#f93e7a}.btn-wf-pink:hover{color:#fff;background-color:#e9306c;border-color:#e9306c}.btn-wf-purple{border-color:#a41daf;color:#a41daf}.btn-wf-purple:hover{color:#fff;background-color:#9715a2;border-color:#9715a2}.btn-wf-indigo{border-color:#545ad1;color:#545ad1}.btn-wf-indigo:hover{color:#fff;background-color:#494fc5;border-color:#494fc5}.btn-wf-blue{border-color:#2096f3;color:#2096f3}.btn-wf-blue:hover{color:#fff;background-color:#0c80dc;border-color:#0c80dc}.btn-wf-cyan{border-color:#00c0a5;color:#00c0a5}.btn-wf-cyan:hover{color:#fff;background-color:#03b3ad;border-color:#03b3ad}.btn-wf-green{border-color:#83c44e;color:#83c44e}.btn-wf-green:hover{color:#fff;background-color:#71b639;border-color:#71b639} legend,h3{line-height:1.2;font-size:20px;margin:0;color: indigo;} fieldset{margin:0;padding:0;border:none} /* .input-field{position:relative;line-height:40px;margin-top:11px} .input-field img{vertical-align:top} .input-field .change-vcode{font-size:1.4em;vertical-align:middle} .input-field .captcha{white-space:nowrap} .input-field .msg{position:absolute;font-size:18px;left:320px;top:-42px;z-index:1;padding:0 6px;line-height:2;-webkit-box-shadow:0 3px 4px rgba(0,0,0,0.18);box-shadow:0 3px 4px rgba(0,0,0,0.18);white-space:nowrap;border: none; border-radius: 5px;} .input-field .msg:after{content:' ';position:absolute;top:23px;left:15px;width:0;height:0;border-width:6px 6px 0;border-color:transparent;border-style:none} .input-field .msg-error{background-color:#e42a27;color:#fff;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:all 0.2s;transition:all 0.2s;opacity:1} .input-field .msg-error:after{border-top-color:#e42a27} .input-field .msg-error.ng-hide{display:block !important;opacity:0;-webkit-transform:translate3d(0, 5px, 0);transform:translate3d(0, 5px, 0)} input[type="text"]{display:inline-block;height:48px;border:1px inset #eee;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:0px;outline:none;margin:0;text-align: center; font-size: 24px;width: 15%;color: white;border-radius: 6px;font-family: fantasy; background:lightblue;backgroundkhaki; text-shadow: 1px 1px 1px #000000;} input[type="text"]:focus{border-color:#ff6700; background:#E9E9E9; text-shadow: 1px 1px 1px #000000;} input[type="text"][name="security_code"], */ div.frame{position: relative;top: 20px;left:-10px;font-family: ProximaNova,"Microsoft Yahei","Hiragino Sans GB",Arial,sans-serif;font-size: 30px;background:lemonchiffon;border-radius:7px;border: 1px dotted threedlightshadow;} fieldset div.input-field{font-size:28px;} .ng-binding{color: darkslategrey;font-family: Georgia;} input[type="text"]:focus,input[type="text"]:focus{!important;color:#000!important} html.ng-scope body div#container div.mheader div#wrapper div#content3 div.imgcon center img{text-align:center; border:1px solid #FFFFFF; width:300px; margin: 10px; box-shadow: 0 0 10px #9b9b9b;border-radius: 8px;} @media (max-width:400px) { div.input-field .msg{left: -10%; right: -10%;font-size: 4vw;top:-33px;} input[type="text"]{width: 30%;} legend.ng-binding{font-size: 4vw;} } @media (max-width:540px) and (min-width: 400px){ div.input-field .msg{left:-10%; right: -10%;font-size: 4vw;} input[type="text"]{width: 30%;} legend.ng-binding{font-size: 4vw;} } @media (max-width:680px) and (min-width: 541px){ div.input-field .msg{left: 5%; right: 5%;} input[type="text"]{width: 25%;} } @media (max-width:800px) and (min-width: 681px){ div.input-field .msg{left: 10%; right: 10%;} input[type="text"]{width: 22%;} } @media (max-width:960px) and (min-width: 801px){ div.input-field .msg{left: 15%; right: 15%;} input[type="text"]{width: 18%;} } @media (max-width:1024px) and (min-width: 961px){ div.input-field .msg{left: 20%; right: 20%;} } @media (max-width:1280px) and (min-width: 1025px){ div.input-field .msg{left: 25%; right: 25%;} } @media (max-width:1440px) and (min-width: 1281px){ div.input-field .msg{left: 30%; right: 30%;} } @media (max-width:1366px) and (min-width: 1441px){ div.input-field .msg{left: 30%; right: 30%;} } @media (max-width:1600px) and (min-width: 1367px){ div.input-field .msg{left: 32%; right: 32%;} } @media (max-width:2000px) and (min-width: 1601px){ div.input-field .msg{left: 33%; right: 33%;} }