/********************************** * * Lynx Pharmaceutical * ***********************************/ /* font size is 0.65%, what is ~10px so we use rem or em to get all sizes related to base font size */ html { font-size: 62.5%; } body { font-family: 'Open Sans', sans-serif; font-size: 1.6em; /* fix chrome bug with rem in */ line-height: 2.8rem; /* ~28px */ font-weight: normal; color: #444; } p { margin-bottom: 2.8rem; } a { color: #4fa1ff; text-decoration: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } a:hover { color: #4fa1ff; text-decoration: underline; } ul { margin-bottom: 2.8rem; } ul li { margin-bottom: 0; list-style: inside disc; color: #999; } .button, input[type="submit"] { display: inline-block; border: 0; height: 20px; line-height: 20px; background-color: #ffa256; color: #fff!important; text-decoration: none!important; font-size: 1.3rem; font-weight: bold; padding: 10px 20px; box-sizing: content-box; margin-bottom: 14px; text-shadow: -1px -1px rgba(0,0,0,0.1); } .button:hover, input[type="submit"]:hover { background-color: #e18f4c; } input[type="submit"] { min-width: 100px; } small { font-size: 1.3rem; } .clearfix:after { content:" "; display:block; clear:both; } /* headings */ h1, h2, h3, h4, h5, h6 { font-family: Roboto, sans-serif; font-weight: bold; margin-bottom: 2.8rem; line-height: 2.8rem; text-transform: uppercase; color: #333333; letter-spacing: 0.5px; } h1 { font-size: 2.7rem; } h2 { font-size: 2.3rem; } h3 { font-size: 1.9rem; } h4 { font-size: 1.6rem; } h5 { font-size: 1.3rem; line-height: 1.4rem; margin-bottom: 1.4rem; } h6 { font-size: 1.1rem; line-height: 1.4rem; margin-bottom: 1.4rem; } /* form */ input[type="text"], textarea { font-size: 1.6rem; color: #666; line-height: 1.25; border: 0; padding: 18px; border-radius: 0; background-color: #d8d8d8; margin-bottom: 2.8rem; } input[type="text"] { height: 56px; width: 40%; min-width: 220px; } textarea { width: 81.6%; min-width: 450px; height: 140px; } input[type="text"]:focus, textarea:focus { outline: none; border: 0; } /* Styles */ .header { position: relative; width: 100%; min-height: 100px; padding: 14px 0; background-color: rgba(26,26,26,0.85); z-index: 100; } .header-fixed { position: fixed; top: 0; left: 0; padding: 0; } .logo { float: left; padding: 0 100px 0 70px; height: 100%; line-height: 0; } .logo img { width: 100px; } .menu-wrap { overflow: hidden; height: auto; } .menu { margin: 0; padding-top: 30px; } .menu li { display: inline-block; margin: 0 5px 10px 0; list-style: none!important; } .menu li a { display: inline-block; font-size: 16px; line-height: 1.3em; letter-spacing: -1px; color: #b3b3b3; padding: 10px 15px; border-radius: 5px; font-weight: bold; text-decoration: none; text-shadow: -1px -1px rgba(0,0,0,0.2); } .menu li a:hover { background-color: #1c1c1c; color: #ccc; } .menu li.active a { color: #fff; background-color: #4fa1ff; cursor: default; } .mobile-menu { position: relative; display: none; line-height: 0; padding: 28px 0; text-align: center; background-color: rgba(26,26,26,0.9); z-index: 100; } .mobile-menu a { display: inline-block; width: 32px; height: 32px; font: 0/0 a; color: transparent; background: url(../images/controls.png) no-repeat 0 0; opacity: 0.7; } .mobile-menu.menu-open a { background-position: 0 -32px; } .mobile-menu a:hover { opacity: 1; } /* mobile */ @media only screen and (max-width: 768px) { .header { position: relative; text-align: center; background-color: #1c1c1c; } .logo { float: none; padding: 0; } .menu-wrap { margin: 0; padding: 0; height: 0; opacity: 0; } .menu { padding-top: 28px; } .menu li { display: block; } .mobile-menu { display: block; } } /* hi-res displays */ @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) { } /* Sections General */ .section { position: relative; min-height: 500px; padding: 28px 0 140px 0; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; box-sizing: border-box; } .section:last-child { margin-bottom: 0; } .background { color: #f2f2f2; padding-top: 112px; margin-bottom: 84px; } .background a { color: #bbb; text-decoration: underline; } .background a:hover { color: inherit; text-decoration: underline; } .background h2 { position: absolute; top: 0; left: 0; padding: 14px 20px; background: #fff; color: #999; } .background .bottom-shape { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; line-height: 0; z-index: 50; overflow: hidden; text-align: center; -webkit-transform: translate3d(0,0,0); } .background .bottom-shape img { width: 100%; } .background small { color: #eee; } /* Sections */ #intro { margin-top: -200px; padding-top: 312px; } #intro h1 { display: inline-block; color: #fff; margin-bottom: 56px; padding: 26px; border: 3px solid #fff; } .box { float: left; padding: 30px; background-color: rgba(255,255,255,0.5); border-radius: 5px; margin-bottom: 28px; } .box ul { float: left; margin: 0 20px 10px 0; } .box ul li { list-style: inside decimal; color: #444; padding: 0 10px; margin-bottom: 10px; font-weight: bold; } .box ul li.hidden{ height: 0; width: 0; padding: 0; line-height: 0; margin: 0; font: 0/0 a; } .box ul li:nth-child(odd) { background-color: rgba(255,255,255,0.5); } #intro { background-image: url(../images/intro.jpg); } #mission { background-image: url(../images/mission.jpg); } #products { background-image: url(../images/products.jpg); } #opportunities { background-image: url(../images/opportunities.jpg); } /* scroll top */ #scroll-top { display: none; position: fixed; bottom: 30px; right: 30px; width: 64px; height: 64px; background: rgba(255,255,255,0.5) url(../images/top.png) no-repeat 0 0; overflow: hidden; text-indent: -9999px; z-index: 100; opacity: 0.4; border-radius: 32px; -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } #scroll-top:hover { opacity: 1; } #scroll-top.sticky { position: absolute; right: 30px; bottom: 230px; } /* footer */ .footer { position: relative; padding-top: 70px; margin-top: -70px; overflow: hidden; } .footer .content { position: relative; background-color: #1a1a1a; z-index: 50; min-height: 112px; padding: 28px 0; background-color: #1a1a1a; font-size: 1.3rem; line-height: 1.6; } .logo-small { display: block; padding-top: 16px; opacity: 0.7; } .contacts { padding-top: 26px; letter-spacing: 0.5px; font-style: italic; color: #999; } .copyright { position: absolute; right: 30px; bottom: 30px; color: #555555; font-size: 1.1rem; } /* contact form */ .mailform { position: absolute; width: 100%; padding: 56px; left: 0; top: 65px; background-color: #262626; box-sizing: border-box; } .mailform-visible .mailform { position: relative; top: 0; } .mailform .toggle { position: absolute; right: 0; top: -56px; background-color: #262626; height: 40px; padding: 12px 30px 4px 30px; border-radius: 20px 0 0 0; } .mailform h4 { color: #444; line-height: 1.2; } .mailform p { color: #a5a5a5; font-size: 1.4rem; line-height: 1.6; } .mailform hr { border-color: #444; } .mailform .toggle a { color: #aaa; padding-left: 50px; background: url(../images/email.png) no-repeat 0 0; line-height: 40px; text-decoration: none!important; text-transform: uppercase; font-weight: bold; font-size: 1.6rem; display: block; } .mailform .toggle:hover a { color: #eee; } .mailform .fields input { float: left; overflow: hidden; margin-bottom: 10px; margin-right: 10px; } .mailform form .mailform-toggle { font-size: 1.3rem; color: #444; margin-left: 20px; white-space: nowrap; } .mailform .reply { position: relative; height: 0; } .mailform .form-reply { display: none; position: absolute; top: 0; left: 0; font-size: 1.3rem; color: #c52f2b; } /* mobile */ @media only screen and (max-width: 768px) { .sections {margin-top: -250px; } .section { padding-bottom: 84px; } #intro { padding-top: 335px; } .logo-small { display: none; } .contacts { padding-top: 10px; } .footer .columns, .footer .column { margin-left: 0; width: 100%; float: left; box-sizing: border-box; } .mailform input[type="text"], .mailform textarea { width: 100%; min-width: 0; } }