/* Reset */ @font-face { font-family: 'web-Arial'; src:url('/fonts/Arial.ttf.woff') format('woff'), url('/fonts/Arial.ttf.svg#Arial') format('svg'), url('/fonts/Arial.ttf.eot'), url('/fonts/Arial.ttf.eot?#iefix') format('embedded-opentype'); font-weight: normal; font-style: normal; } *, *:before, *:after { box-sizing: border-box } * { -webkit-overflow-scrolling: touch; } *:focus { outline: none; } html, body { margin: 0; padding: 0; } /* Reset to a manageable font size */ html { font-size: 0.625em; } /* Main elements */ body { font-family: web-Arial; font-size: 15px; font-weight: 200; overflow-x: hidden; display: flex; flex-flow: column nowrap; min-height: 100vh; } img { max-width: 100%; } svg { max-width: 100%; } /*Josh's Column System (Blame Him If Issues)*/ /* Columns/Rows */ .row { display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-start; } .r-btw { justify-content: space-between; } .r-nw, .r-nw-m { flex-wrap: nowrap; } .r-fs { justify-content: flex-start; } .r-ac { align-items: center; } .r-ac>.col { align-self: center; } .r-fe { align-items: flex-end; } .col { flex-basis: 100%; width: 100%; align-self: flex-start; } .col:not(:first-of-type) { margin-top: 3rem; } h3 { color: #F58220; font-size: 25px; font-weight: 100; line-height: 35px; } h4 { color: #58595B; font-size: 20px; } h5 { color: #F58220; font-size: 15px; text-decoration: underline; } h2 { color: #58595B; font-size: 20px; } h1 { color: #FFFFFF; font-size: 30px; font-weight: 100; font-family: 'Syncopate', sans-serif; text-transform: uppercase; } .asterisk { font-size: 24px; position: relative; top: 3px; } p { font-size: 15px; line-height: 24px; } a { text-decoration: none; color: #3C73AB; } .bigger-font { font-size: 20px; } a:hover { color: #1B5085; } a:visited { color: #6fa3d8; } input { /* input: */ width: 100%; background: #FFFFFF; border: 1px solid rgba(88, 89, 91, 0.60); border-radius: 5px; min-height: 45px; } textarea { width: 100%; border: 1px solid rgba(88, 89, 91, 0.60); border-radius: 5px; min-height: 90px; } ol { line-height: 2 } .center { text-align: center; margin: 0 auto; } .row .center-vertically { margin-top: auto; margin-bottom: auto; } .center-flex { display: flex; justify-content: center; align-items: center; } .start-left{ justify-content: flex-start; } .spacing-top { padding: 30px 0 0 0; } .inner { width: 100%; max-width: 98rem; margin: 0 auto; padding: 8rem 0; } .inner-header { padding: 2rem 0; } .inner-reasons { padding: 8rem 0 0 0; } .title-card { background-image: url('/images/sub-water-tile.png'); background-repeat: repeat-x; background-size: contain; } .title-card .inner { background-image: url('/images/sub-water.png'); background-repeat: no-repeat; } .title-card-index { min-height: 600px; background-image: url('/images/home-main-tile.png'); background-repeat: repeat-x; } .title-card-validation { background-image: linear-gradient(-180deg, #F58220 0%, rgba(245, 130, 32, 0.20) 100%); flex: 1; min-height: 800px; } .title-card h1 { margin: 1rem 0; } .close { height: 10px; width: 10px; margin-left: 20px; } .drop-box { /* content area: */ background: #FFFFFF; box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.30); border-radius: 10px; max-width: 600px; margin: 10px auto; } .drop-box form { padding: 30px; color: #58595B; } .select-box { border: 1px solid rgba(88, 89, 91, 0.60); border-radius: 5px; } .select-box::after{ content: url(/images/down-arrow.svg); margin: 0 5px; top: -1px; position: relative; } .select-box::before{ content: url(/images/world.svg); margin: 0 5px; } .header-drop { justify-content: flex-end; } .header-drop .select-box { border: 1px solid #FBB880; border-radius: 25px; margin-bottom: 10px; } .header-drop .select-box .truncated { display: flex; padding: 5px; } .header-logo { width: 100%; max-height: 22px; } select { width: 90%; background: #FFFFFF; font-size: 15px; border: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 17px 10px; } select::-ms-expand { display: none; } .truncated { margin: 0; } .checkbox { width: auto; margin-right: 1rem; } .submit-button { /* Rectangle Copy 2: */ background: #3C73AB; border-radius: 5px; /* Continue to Website: */ font-size: 15px; color: #FFFFFF; letter-spacing: 0; line-height: 3.2; min-width: 240px; min-height: 50px; margin: 2rem auto; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .submit-button:hover { /* Rectangle Copy 2: */ background: #1B5085; color: #FFFFFF; } .submit-button-full { /* Rectangle Copy 2: */ background: #3C73AB; border-radius: 5px; /* Continue to Website: */ font-family: Arial; font-size: 15px; color: #FFFFFF; letter-spacing: 0; line-height: 15px; min-width: 240px; min-height: 50px; display: block; margin: 0 auto; width: 100%; } .resource-link { background: rgba(245, 130, 32, 0.20); color: #3C73AB; line-height: 3.2; /* Rectangle Copy 2: */ border-radius: 5px; /* Continue to Website: */ font-size: 15px; letter-spacing: 0; line-height: 3.2; min-width: 240px; min-height: 50px; margin: 2rem auto; } .icon-left { margin-right: 10px; } .icon-right { margin-left: 10px; } .spacing-terms { margin-left: 6rem; } .top-spacing{ margin-top: 10px; } .circled-numbers { font-family: ArialMT; display: inline-flex; width: 35px; height: 35px; align-items: center; justify-content: center; /* Oval: */ border: 1px solid rgba(88, 89, 91, 0.50); /* Safari 3-4, iOS 1-3.2, Android 1.6- */ -webkit-border-radius: 50%; /* Firefox 1-3.6 */ -moz-border-radius: 50%; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */ border-radius: 50%; } /* Logos */ .box-logo { /* logo area: */ border: 1px solid #58595B; border-radius: 10px; min-height: 100px; margin: 20px; display: flex; align-items: center; justify-content: center; max-width: 195px; max-height: 120px; } .box-logo-white { border: 1px solid #FFFFFF; } .box-logo-color { border: 1px solid #FFFFFF; background: #FFFFFF; } .box-logo-center { margin-left: auto; margin-right: auto; } .box-logo-change { max-height: 165px; max-width: 95px; } .bar { height: 10px; background: round url("/images/bar.svg"); background-size: 2200px 10px; } .orange-divider { border: #F58220 1px solid; max-width: none; margin: 4rem 0; padding: 0 0; } .validation-logo { margin: 20px } /*Background Colors*/ .bg-beige { background-color: #FEF2E8; } .bg-white { background-color: #ffffff; } .bg-grey { background-color: #58595B; color: #ffffff; } .bg-orange { background-color: #EE510B; color: #ffffff; } .white{ color: #FFFFFF; } .white :visited{ color: #FFFFFF; } .bg-split { background: #FEF2E8; background: -moz-linear-gradient(left, #FEF2E8 0%, #FEF2E8 50%, #ffffff 50%, #ffffff 100%); background: -webkit-linear-gradient(left, #FEF2E8 0%, #FEF2E8 50%, #ffffff 50%, #ffffff 100%); background: linear-gradient(to right, #FEF2E8 0%, #FEF2E8 50%, #ffffff 50%, #ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FEF2E8', endColorstr=' #ffffff', GradientType=1); } .bg-index { background-image: url('/images/home-main-img.png'); background-repeat: no-repeat; background-position-x: 60%; min-height: 600px; color: #FFFFFF; } /* cookie-notification styles */ .cookies-notification { font-size: 15px; text-align: center; } /* Navbar Styles */ .nav { height: 50px; width: 100%; display: flex; justify-content: space-between; } .nav>.nav-links .selected { color: #F58220; border-bottom: 5px solid #F58220; } .nav>.nav-header { display: flex; } .nav>.nav-header>.nav-title { font-size: 22px; padding: 10px 10px 10px 10px; } .nav>.nav-btn { display: none; } .nav>.nav-links { display: flex; justify-content: flex-end; font-size: 18px; } .nav>.nav-links>a { padding: 13px 10px 13px 10px; text-decoration: none; color: #58595B; } .nav>.nav-links>a:hover { color: #3C73AB; } .nav>#nav-check { display: none; } /*Footer Styles*/ footer { font-size: 14px; font-weight: 100; } footer a { color: #98B8D8; } footer a:hover { color: #FFFFFF; } /*Tabs to dropdown css for inner items*/ .clinical-lit p a{ text-transform: capitalize; } .tabs { min-height: 25rem; } .tabs input[type=radio] { display: none; } .tabs label { transition: background 0.4s ease-in-out, height 0.2s linear; cursor: pointer; color: #58595B; width: 20%; height: 3em; border-top-left-radius: 3px; border-top-right-radius: 3px; text-align: center; line-height: 3em; padding: 5px 1rem; } .tabs label:last-of-type { border-bottom: none; } .tabs label:hover { color: #3C73AB; } #product-indications:checked+label, #videos:checked+label, #market-studies:checked+label, #clinical-literature:checked+label, #cardiothoracic:checked+label, #c-section:checked+label, #general:checked+label, #orthopedic:checked+label, #pharmacoeconomics:checked+label { color: #F58220; border-bottom: 5px solid #F58220; } .tab-content { position: absolute; top: -9999px; padding: 10px; background-color: #FFFFFF; } .tab-content-wrapper { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; border-top-right-radius: 3px; background-color: #FFFFFF; width: 100%; margin: 0 auto; } .clinical-lit { margin: 3rem 0; } @media screen and (max-width: 600px) { .tab-content-wrapper, .product-indications-content-wrapper { border: none; border-radius: 0; } } #product-indications:checked~.tab-content-wrapper #tab-content-1, #videos:checked~.tab-content-wrapper #tab-content-2, #market-studies:checked~.tab-content-wrapper #tab-content-3, #clinical-literature:checked~.tab-content-wrapper #tab-content-4, #cardiothoracic:checked~.tab-content-wrapper #tab-content-5, #c-section:checked~.tab-content-wrapper #tab-content-6, #general:checked~.tab-content-wrapper #tab-content-7, #orthopedic:checked~.tab-content-wrapper #tab-content-8, #pharmacoeconomics:checked~.tab-content-wrapper #tab-content-9 { position: relative; top: 0px; background-color: #FFFFFF; } .inner-labels { background-color: rgba(245, 130, 32, .2); } /* Helpers */ .hidden { display: none; } .first { margin-top: 0; } .last { margin-bottom: 0; } /*Media Queries*/ /* Tablet */ @media only screen and (min-width: 768px) { .r-nw-t { flex-wrap: nowrap; } .col[class*="col-t-"] { margin-top: 0; } [class*="col-t-1-2"]:first-of-type, [class*="col-t-1-3"]:first-of-type { margin-left: 0; } [class*="col-t-1-2"]:not(:nth-child(2n-1)) { margin-left: 5rem; } [class*="col-t-1-3"]:not(:nth-child(3n-2)) { margin-left: 5rem; } .col-t-1-2 { flex-basis: calc(50% - 2.5rem); width: calc(50% - 2.5rem); } .col-t-1-3 { flex-basis: calc((100% - 10rem) / 3); width: calc((100% - 10rem) / 3); } .col-t-2-3 { flex-basis: calc(2 * (100% - 5rem) / 3); width: calc(2 * (100% - 5rem) / 3); } .col-t-1-4 { flex-basis: calc(25% - 1.25rem); width: calc(25% - 1.25rem); } .col-t-3-4 { flex-basis: calc(75% - 3.75rem); width: calc(75% - 3.75rem); } .tabs label { width: 20%; } .row .center-vertically { margin-top: auto; margin-bottom: auto; } } @media only screen and (max-width:768px) { header { min-height: 175px; } .inner { padding: 3rem 2rem; } .title-card-index { background-image: url('/images/main-img-tablet.png'); height: 100%; height: 100%; background-repeat: no-repeat; } .bg-index { background-image: none; min-height: 600px; color: #FFFFFF; } #header-bar { margin-top: -15px; height: 15px; } .bar { height: 15px; } } /* header{ min-height: 175px; } .inner { padding: 3rem 2rem; } .title-card-index { background-image: url('/images/main-img-tablet.png'); height: 100%; height: 100%; background-repeat: no-repeat; } .bg-index { background-image: none; min-height: 600px; color: #FFFFFF; } #header-bar{ margin-top: -15px; height: 15px; } .bar{ height: 15px; } */ /* Desktop */ @media only screen and (min-width: 1200px) { .col[class*="col-d-"] { margin-top: 0; } [class*="col-d-"]:not(:first-of-type) { margin-left: 5rem; } .col-d-1-2 { flex-basis: calc(50% - 2.5rem); width: calc(50% - 2.5rem); } .col-d-1-3 { flex-basis: calc(33.333333% - 5rem); width: calc(33.333333% - 5rem); } .col-d-2-3 { flex-basis: calc(66.666666% - 5rem); width: calc(66.666666% - 5rem); } .col-d-1-4 { flex-basis: calc(25% - 5rem); width: calc(25% - 5rem); } .tabs label { width: 15%; } .nav .desk-hidden { display: none; } } /* Phone */ @media only screen and (max-width: 767px) { .inner { padding: 3rem 2rem; } .select-box-nav {} /*Columns*/ .m-hidden { display: none; } .mobile-top{ margin-top: 50px; } .bg-split { background: #FEF2E8; background: -moz-linear-gradient(left, #FEF2E8 0%, #FEF2E8 35%, #ffffff 35%, #ffffff 100%); background: -webkit-linear-gradient(left, #FEF2E8 0%, #FEF2E8 35%, #ffffff 35%, #ffffff 100%); background: linear-gradient(to bottom, #FEF2E8 0%, #FEF2E8 35%, #ffffff 35%, #ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FEF2E8', endColorstr=' #ffffff', GradientType=1); } .title-card-index { background-image: url('/images/main-img-mobile.png'); height: 100%; height: 100%; min-height: 800px; background-repeat: no-repeat; background-size: auto 100%; } .bg-index { background-image: none; min-height: 600px; color: #FFFFFF; } #header-bar { margin-top: -10px } .header-logo { width: 90%; } .pc-tab ul li label { float: left; padding: 0; border-bottom: 0; width: 25%; min-height: 50px; text-align: center; bottom: 0; } /*Navbar*/ .nav>.nav-btn { position: absolute; display: flex; top: 6rem; right: 1rem; } .nav>.nav-btn>label { width: 50px; height: 50px; padding: 13px; } .nav>.nav-btn>label:hover { color: #3C73AB; } .nav>.nav-btn>label>span { display: block; width: 25px; height: 5px; top: 6rem; background: #58595B; margin-bottom: 3px; } .nav>.nav-links { background-color: #FEF2E8; position: absolute; display: block; width: 100%; height: 0px; transition: all 0.3s ease-in; overflow-y: hidden; top: 0px; left: 0px; } .nav>.nav-links>a { display: block; width: 100%; border-bottom: #58595B solid 0.5px; } .nav>#nav-check:not(:checked)+.nav-links { height: 0px; } .nav>#nav-check:checked+.nav-links { height: calc(50vh); overflow-y: auto; } .tabs label { width: 100%; display: block; border-bottom: 2px solid #C7C6C4; border-radius: 0; } .tabs { margin: 0; } .reverse-col { flex-direction: column-reverse; } .mobile-hidden { display: none; } }