/************************************************ Circle Healthcare Styles ************************************************/ /* font size is 0.65%, what is ~10px so we use rem or em to get all sizes related to base font size */ body { font-family: 'Open Sans', sans-serif; font-size: 1.6em; /* fix chrome bug with rem in */ line-height: 2.6rem; /* ~26px */ font-weight: normal; color: #555555; } p { margin-bottom: 2.6rem; font-weight: 300; } a { text-decoration: none; color: #d26161; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } a:hover { text-decoration: underline; color: #444444; } /* Based on 16px & 12px X 1.618 */ h1,h2,h3,h4,h5,h6 { font-family: 'Secular One', serif; font-weight: 400; font-style: normal; color: #6a6a6a; text-transform: uppercase; margin-bottom: 2.6rem; } h1 { font-size: 4.1rem; line-height: 5.2rem; } h2 { font-size: 3.1rem; line-height: 3.9rem; } h3 { font-size: 2.5rem; line-height: 3rem; margin-bottom: 2.2rem; } h4 { font-size: 1.9rem; line-height: 2.6rem; } h5 { font-size: 1.6rem; line-height: 2.6rem; padding-top: 1.3rem; margin-bottom: 1.3rem; } h6 { font-size: 1.2rem; line-height: 2.6rem; margin-bottom: 0; } ul { margin-bottom: 2.6rem; list-style: inside square; } ul li { margin-bottom: 0; } ul.check { list-style: none; } ul.check li { padding-left: 24px; background: url(../images/checkmark.png) no-repeat 0 center; background-size: 12px 12px; } .accent { display: block; color: #969696; font-weight: bold; font-style: italic; padding: 1.3rem 0; padding-left: 2.6rem; margin-bottom: 2.6rem; border-left: 0.5rem solid #d26161; } .light { color: #bbb; } form { margin-bottom: 2.6rem; } label, input, select { margin-bottom: 0; } label > span { display: block; margin: 1.3rem 0; } input[type="text"], textarea, select { border: 1px solid #eee; background-color: #f5f5f5; width: 100%; color: #969696; } input[type="text"]:focus, input[type="text"]:active, textarea:focus, textarea:active { border-color: #d26161; } input[type="text"] { padding: 1.3rem; height: 5.2rem; line-height: 2.6rem; } textarea { height: 18.2rem; } select { height: 3.9rem; } form .form-reply { display: none; color: #d26161; font-style: italic; margin-left: 15px; } button[type="submit"] { margin-bottom: 0; height: 5.2rem;; color: #fff; text-align: center; font-size: 1.4rem; line-height: 2.6rem; text-transform: uppercase; text-decoration: none; white-space: nowrap; background-color: #d26161; border: none; } /** Sidebar */ .sidebar { float: left; position: fixed; left: 0; top: 0; min-height: 100%; max-width: 320px; width: 80%; background-color: #f5f5f5; -webkit-transform: translate3d(0,0,0); z-index: 100; } /** Logo */ .logo { position: relative; padding: 3rem 0 5rem; text-align: center; overflow: hidden; margin-bottom: 8rem; } .logo img { height: 13rem; } .logo .company { width: 90%; margin: 0 auto; font-weight: 600; color: #3e3e3e; } .logo .company span { display: block; text-transform: uppercase; font-weight: normal; font-size: 75%; line-height: 1.1em; letter-spacing: -0.5px; color: #808080; } .logo::after { content: ""; position: absolute; top: -200%; left: -100%; width: 300%; height: 300%; border-radius: 150%; background-color: #eaeaea; z-index: -1; } /** Primary Menu */ .primary-menu { min-height: 416px; margin-bottom: 104px; font-family: "Secular One", sans-serif; } .primary-menu ul { list-style: none!important; margin-bottom: 0; } .primary-menu ul li { margin-bottom: 0; } .primary-menu ul a { display: block; font-size: 1.6rem; line-height: 3.25em; /* ~52px */ height: 3.25em; border-left: 15px solid #e1e1e1; padding-left: 3.125em; color: #4c4c4c; text-decoration: none; text-transform: uppercase; letter-spacing: 0.2px; } .primary-menu ul a:hover { background-color: #eee; } .primary-menu ul .current a { background-color: #d26161; border-left-color: #8f4242; color: #fff; } /** Footer */ .footer { position: relative; padding: 52px 45px; color: #efefef; background-color: #3f3e43; } .footer h5 { color: inherit; } .footer p { font-size: 1.4rem; } .footer .copyright { position: relative; font-size: 1.2rem; top: -65px; margin-top: -2.6rem; color: #969696; text-align: right; } .footer .contacts { color: #d2d2d2; font-weight: 600; font-size: 1.3rem; line-height: 2rem; margin-bottom: 1.8rem; word-wrap: break-word; } .footer a { color: inherit; text-decoration: underline; } .footer a:hover { color: #999; text-decoration: none; } .footer .social { color: #a9a9a9; font-style: italic; overflow: hidden; } .footer .social p { font-size: 1.2rem; margin-bottom: 0; padding: 1.3rem 0; } /** Social Links */ .social-links { overflow: hidden; list-style: none!important; margin-bottom: 2rem; } .social-links li { float: left; margin: 0 10px 0 0; } .social-links li a { position: relative; display: block; width: 32px; height: 32px; background-size: 32px 32px!important; text-indent: 100%; white-space: nowrap; overflow: hidden; } .social-links .twitter a { background: url(../images/social/01_twitter.png) no-repeat; } .social-links .facebook a { background: url(../images/social/02_facebook.png) no-repeat; } .social-links .youtube a { background: url(../images/social/03_youtube.png) no-repeat; } .social-links .linkedin a { background: url(../images/social/07_linkedin.png) no-repeat; } .social-links .vimeo a { background: url(../images/social/09_vimeo.png) no-repeat; } .social-links li a:hover { -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); } /** Page/Content */ .page { position: relative; width: 100%; padding-left: 320px; box-sizing: border-box; padding-bottom: 5.2rem; } .photo-header { position: relative; background: #222; overflow: hidden; -webkit-transform: translate3d(0,0,0); } .photo-header img { width: 100%; max-width: 100%; vertical-align: top; opacity: 0.8; } .photo-header .caption { position: absolute; width: 50rem; max-width: 70%; right: 10%; bottom: 20%; text-transform: uppercase; font-weight: 600; padding-bottom: 10px; border-bottom: 0.5rem solid #d26161; color: #e8e8e8; font-size: 2.3rem; /* fallback */ font-size: 1.8vw; line-height: 1.1; /* 26px */ } .photo-header::after { content: ""; height: 100%; position: absolute; left: 0; top: 0; width: 230px; background: url(../images/shadow.png) repeat-y 0 0; } .content { width: 100%; padding-top: 5.2rem; background-color: #fff; box-sizing: border-box; } /* Mobile Stuff */ .mobile-copyright { display: none; border-top: 1px solid #eee; padding-top: 2.6rem; margin: 0 10% 0 18%; margin-bottom: 2.6rem; font-size: 1.2rem; color: #aaaaaa; } #mobile-open, #mobile-close { display: none; position: fixed; width: 32px; height: 32px; padding: 16px; top: 10px; left: 2%; z-index: 50; } #mobile-open span, #mobile-close span { display: block; width: 100%; height: 100%; text-indent: 100%; white-space: nowrap; overflow: hidden; } #mobile-open span { background: url(../images/controls.png) no-repeat 0 0; } #mobile-open.dark span { background-position: 0 -32px; } #mobile-close { display: block; visibility: hidden; opacity: 0; left: auto; right: 2%; -webkit-transition: visibility 0s, 0.5s opacity 0.2s; -moz-transition: visibility 0s, 0.5s opacity 0.2s; -o-transition: visibility 0s, 0.5s opacity 0.2s; transition: visibility 0s, 0.5s opacity 0.2s; } #mobile-close span { background: url(../images/controls.png) no-repeat -32px 0; } #mobile-close.dark span { background-position: -32px -32px; } /** Media Queries */ /* Large Devices, Wide Screens */ @media only screen and (max-width : 1200px) { } /* Medium Devices, Desktops */ @media only screen and (max-width : 979px) { } /* Small Devices, Tablets */ @media only screen and (max-width : 767px) { body { font-size: 1.5rem; } .page { padding-left: 0; padding-bottom: 2.6rem; } .photo-header .caption { font-size: 1.8rem; } .content { padding: 0 7% 0 20%; padding-top: 3.9rem!important; } .content .columns { width: 100%; margin: 0; } #mobile-open, .mobile-copyright, .mobile-menu .sidebar { display: block; } .mobile-menu .mobile-copyright { display: none; } .mobile-menu .sidebar { position: relative; box-shadow: 0 0 40px 0px rgba(0,0,0,0.5); } .mobile-menu #mobile-close { visibility: visible; opacity: 1; -webkit-transition-delay: 0; -moz-transition-delay: 0; -o-transition-delay: 0; transition-delay: 0; } .photo-header::after { display: none; } /* sidebar slide-out animation */ .sidebar { -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); -moz-transition: -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); transition: -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(-500px, 0, 0)!important; -moz-transform: translate3d(-500px, 0, 0)!important; -o-transform: translate3d(-500px, 0, 0)!important; transform: translate3d(-500px, 0, 0)!important; } .mobile-menu .sidebar { -webkit-transform: translate3d(0, 0, 0)!important; -moz-transform: translate3d(0, 0, 0)!important; -o-transform: translate3d(0, 0, 0)!important; transform: translate3d(0, 0, 0)!important; } } /* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) { } /* Custom, Phones */ @media only screen and (max-width : 320px) { }