File: /home/awaldron/_upmc/thyrointl.alanwaldron.com/css/base.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* media query 640px mobile, 1615 small desktop */
@font-face {
font-family: proxima-nova;
src: url(../fonts/af/efe4a5/00000000000000007735e609/30/l%EF%B9%96subset_id=2&fvd=n4&v=3)
format('woff2'),
url(../fonts/af/efe4a5/00000000000000007735e609/30/d%EF%B9%96subset_id=2&fvd=n4&v=3)
format('woff'),
url(../fonts/af/efe4a5/00000000000000007735e609/30/a%EF%B9%96subset_id=2&fvd=n4&v=3)
format('opentype');
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-display: auto;
}
@font-face {
font-family: proxima-nova;
src: url(../fonts/af/23e139/00000000000000007735e605/30/l%EF%B9%96subset_id=2&fvd=n5&v=3)
format('woff2'),
url(../fonts/af/23e139/00000000000000007735e605/30/d%EF%B9%96subset_id=2&fvd=n5&v=3)
format('woff'),
url(../fonts/af/23e139/00000000000000007735e605/30/a%EF%B9%96subset_id=2&fvd=n5&v=3)
format('opentype');
font-weight: 500;
font-style: normal;
font-stretch: normal;
font-display: auto;
}
@font-face {
font-family: proxima-nova;
src: url(../fonts/af/78aca8/00000000000000007735e60d/30/l%EF%B9%96subset_id=2&fvd=n6&v=3)
format('woff2'),
url(../fonts/af/78aca8/00000000000000007735e60d/30/d%EF%B9%96subset_id=2&fvd=n6&v=3)
format('woff'),
url(../fonts/af/78aca8/00000000000000007735e60d/30/a%EF%B9%96subset_id=2&fvd=n6&v=3)
format('opentype');
font-weight: 600;
font-style: normal;
font-stretch: normal;
font-display: auto;
}
@font-face {
font-family: proxima-nova;
src: url(../fonts/af/2555e1/00000000000000007735e603/30/l%EF%B9%96subset_id=2&fvd=n7&v=3)
format('woff2'),
url(../fonts/af/2555e1/00000000000000007735e603/30/d%EF%B9%96subset_id=2&fvd=n7&v=3)
format('woff'),
url(../fonts/af/2555e1/00000000000000007735e603/30/a%EF%B9%96subset_id=2&fvd=n7&v=3)
format('opentype');
font-weight: 700;
font-style: normal;
font-stretch: normal;
font-display: auto;
}
@font-face {
font-family: proxima-nova;
src: url(../fonts/af/11da74/00000000000000007758cf8f/30/l%EF%B9%96subset_id=2&fvd=i4&v=3)
format('woff2'),
url(../fonts/af/11da74/00000000000000007758cf8f/30/d%EF%B9%96subset_id=2&fvd=i4&v=3)
format('woff'),
url(../fonts/af/11da74/00000000000000007758cf8f/30/a%EF%B9%96subset_id=2&fvd=i4&v=3)
format('opentype');
font-weight: 400;
font-style: italic;
font-stretch: normal;
font-display: auto;
}
@font-face {
font-family: proxima-nova;
src: url(../fonts/af/bd0e3a/00000000000000007758cf8e/30/l%EF%B9%96subset_id=2&fvd=i6&v=3)
format('woff2'),
url(../fonts/af/bd0e3a/00000000000000007758cf8e/30/d%EF%B9%96subset_id=2&fvd=i6&v=3)
format('woff'),
url(../fonts/af/bd0e3a/00000000000000007758cf8e/30/a%EF%B9%96subset_id=2&fvd=i6&v=3)
format('opentype');
font-weight: 600;
font-style: italic;
font-stretch: normal;
font-display: auto;
}
@font-face {
font-family: proxima-nova;
src: url(../fonts/af/474f13/00000000000000007758cf7d/30/l%EF%B9%96subset_id=2&fvd=i7&v=3)
format('woff2'),
url(../fonts/af/474f13/00000000000000007758cf7d/30/d%EF%B9%96subset_id=2&fvd=i7&v=3)
format('woff'),
url(../fonts/af/474f13/00000000000000007758cf7d/30/a%EF%B9%96subset_id=2&fvd=i7&v=3)
format('opentype');
font-weight: 700;
font-style: italic;
font-stretch: normal;
font-display: auto;
}
@font-face {
font-family: adobe-garamond-pro;
src: url(../fonts/af/ae2c96/00000000000000007735d927/30/l%EF%B9%96subset_id=2&fvd=n4&v=3)
format('woff2'),
url(../fonts/af/ae2c96/00000000000000007735d927/30/d%EF%B9%96subset_id=2&fvd=n4&v=3)
format('woff'),
url(../fonts/af/ae2c96/00000000000000007735d927/30/a%EF%B9%96subset_id=2&fvd=n4&v=3)
format('opentype');
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-display: auto;
}
@font-face {
font-family: adobe-garamond-pro;
src: url(../fonts/af/e1c5c9/00000000000000007735d91e/30/l%EF%B9%96subset_id=2&fvd=n7&v=3)
format('woff2'),
url(../fonts/af/e1c5c9/00000000000000007735d91e/30/d%EF%B9%96subset_id=2&fvd=n7&v=3)
format('woff'),
url(../fonts/af/e1c5c9/00000000000000007735d91e/30/a%EF%B9%96subset_id=2&fvd=n7&v=3)
format('opentype');
font-weight: 700;
font-style: normal;
font-stretch: normal;
font-display: auto;
}
@font-face {
font-family: adobe-garamond-pro;
src: url(../fonts/af/28328c/00000000000000007735d924/30/l%EF%B9%96subset_id=2&fvd=i4&v=3)
format('woff2'),
url(../fonts/af/28328c/00000000000000007735d924/30/d%EF%B9%96subset_id=2&fvd=i4&v=3)
format('woff'),
url(../fonts/af/28328c/00000000000000007735d924/30/a%EF%B9%96subset_id=2&fvd=i4&v=3)
format('opentype');
font-weight: 400;
font-style: italic;
font-stretch: normal;
font-display: auto;
}
@font-face {
font-family: adobe-garamond-pro;
src: url(../fonts/af/6487c5/00000000000000007735d92d/30/l%EF%B9%96subset_id=2&fvd=i6&v=3)
format('woff2'),
url(../fonts/af/6487c5/00000000000000007735d92d/30/d%EF%B9%96subset_id=2&fvd=i6&v=3)
format('woff'),
url(../fonts/af/6487c5/00000000000000007735d92d/30/a%EF%B9%96subset_id=2&fvd=i6&v=3)
format('opentype');
font-weight: 600;
font-style: italic;
font-stretch: normal;
font-display: auto;
}
@font-face {
font-family: adobe-garamond-pro;
src: url(../fonts/af/095ec6/00000000000000007735d921/30/l%EF%B9%96subset_id=2&fvd=i7&v=3)
format('woff2'),
url(../use.typekit.net/af/095ec6/00000000000000007735d921/30/d%EF%B9%96subset_id=2&fvd=i7&v=3)
format('woff'),
url(../use.typekit.net/af/095ec6/00000000000000007735d921/30/a%EF%B9%96subset_id=2&fvd=i7&v=3)
format('opentype');
font-weight: 700;
font-style: italic;
font-stretch: normal;
font-display: auto;
}
a.button {
border-radius: 300px;
font-family: proxima-nova;
font-weight: 600;
font-size: 15.3px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
padding: 15.3px 38.3px;
background-color: #1090cb;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
line-height: 1em;
color: #fff;
border: none;
transition: background-color 0.1s 0s ease-in-out, color 0.1s 0s ease-in-out,
opacity 0.1s 0s ease-in-out;
&:hover {
cursor: pointer;
opacity: 0.8;
}
}
a.button.big {
font-size: 16px;
font-weight: 700;
letter-spacing: 2.4px;
padding: 21px 34px;
}
body {
background-color: rgb(56, 56, 56);
}
.body-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.15);
opacity: 0;
z-index: 1;
visibility: hidden;
transition: transform 0.2s ease-in-out, visibility 0.2s ease-in-out,
opacity 0.2s ease-in-out;
}
.body-overlay-open {
visibility: visible;
transform: translate3d(-260px, 0, 0);
cursor: e-resize;
opacity: 1;
}
.side-nav {
position: absolute;
right: 0px;
height: 100%;
width: 260px;
z-index: -1;
background-color: white;
> nav {
align-items: center;
padding: 24px 36px 0px;
> div {
padding: 14.25px 0px;
&:last-child {
margin-top: 20px;
}
}
}
}
.body-wrapper {
transition: transform 0.2s ease-in-out;
}
.body-wrapper-open {
transform: translate3d(-260px, 0, 0);
position: fixed;
}
.announcement {
background: rgb(255, 195, 0);
position: relative;
top: 0px;
left: 0px;
z-index: 9999;
text-align: center;
> a {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 2;
}
.announcement-text {
font-family: proxima-nova;
font-size: 25px;
font-weight: 400;
font-style: normal;
letter-spacing: 1.26px;
text-transform: none;
line-height: 1.2em;
color: rgb(0, 0, 0);
position: relative;
z-index: 1;
> p {
padding: 20px 75px;
> a {
color: rgb(0, 0, 0) !important;
}
}
}
> .escape {
cursor: pointer;
position: absolute;
top: 0;
right: 0;
width: 70px;
height: 69.5px;
background: rgba(0, 0, 0, 0.15);
color: #000;
z-index: 10001;
display: flex;
justify-content: center;
align-items: center;
font-size: 25px;
}
}
.header {
display: flex;
flex-direction: row;
padding: 20px;
align-items: center;
justify-content: space-between;
background-color: white;
> a {
> img {
height: auto;
max-height: 100px;
width: auto;
max-width: 100%;
}
}
.mobile-nav-toggle {
display: none;
}
> nav {
padding: 32px 40px;
> div {
display: inline-block;
> a {
padding: 0.75em 1em;
}
&:last-child {
margin-left: 20px;
}
}
}
}
.nav-option {
cursor: pointer;
font-family: proxima-nova;
font-weight: 600;
font-style: normal;
font-size: 19px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
line-height: 1em;
color: rgba(0, 0, 0, 0.9);
transition: color 0.2s ease;
&:hover {
color: #1090cb;
}
&.active {
color: #1090cb;
}
}
.nav-option-alt {
cursor: pointer;
background: white;
color: white;
border-radius: 300px;
border: 2px solid rgb(16, 144, 203);
padding: 0.75em 1em;
color: rgb(16, 144, 203);
transition: background-color 0.2s ease, color 0.2s ease;
&:hover {
background-color: rgb(16, 144, 203);
color: white;
}
}
@media (max-width: 1615px) {
.header {
> nav {
display: none;
}
.mobile-nav-toggle {
display: block;
cursor: pointer;
font-size: 30px;
color: rgb(0, 0, 0);
width: 22px;
height: 22px;
position: relative;
.bar {
height: 2px;
width: 22px;
background-color: rgba(0, 0, 0, 0.9);
position: absolute;
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out,
top 0.1s 0.1s;
}
.top-bar {
top: 0px;
}
.top-bar-rotated {
transform: rotate(45deg);
top: 7px;
}
.middle-bar {
top: 7px;
}
.bottom-bar {
top: 14px;
}
.bottom-bar-rotated {
transform: rotate(-45deg);
top: 7px;
}
}
}
}
.thumbnail-section {
width: 100%;
height: 739px;
position: relative;
> img {
width: 100%;
height: 100%;
object-fit: cover;
}
.color-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.21);
}
> div {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: end;
> div {
text-align: right;
margin-right: 160px;
margin-top: 95px;
padding: 32px;
> p {
margin: 20px 0px;
> strong {
font-family: proxima-nova;
font-weight: 700;
font-style: normal;
font-size: 62px;
text-transform: uppercase;
line-height: 1em;
color: #fff;
letter-spacing: 0.0645161em;
}
> i {
font-family: adobe-garamond-pro;
font-weight: 600;
font-size: 34px;
letter-spacing: 2.01px;
text-transform: none;
line-height: 1.5em;
color: #000;
margin: 20px auto;
}
> a {
margin: 10px 0px;
}
}
}
}
}
form {
display: flex;
flex-direction: column;
padding: 17px;
fieldset {
border: none;
padding: 0;
margin: 0;
}
* label {
font-size: 22px;
line-height: 1.6em;
font-family: adobe-garamond-pro;
font-style: normal;
letter-spacing: 0px;
color: #1a1a1a;
}
* label.small {
font-size: 12px;
font-family: adobe-garamond-pro;
font-weight: 400;
font-style: normal;
letter-spacing: 0px;
color: #1a1a1a;
margin-left: 5px;
}
* .required {
font-size: 12px;
opacity: 0.7;
font-family: adobe-garamond-pro;
font-weight: 400;
font-style: normal;
letter-spacing: 0px;
color: #1a1a1a;
margin-left: 5px;
}
*.field {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
*.field-row {
display: flex;
flex-direction: row;
gap: 10px;
.field {
flex: 1;
}
}
*.checkbox-field {
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
}
* input[type='text'],
input[type='email'],
input[type='tel'],
textarea,
select {
background-color: #fafafa;
border: 1px solid #a9a9a9;
padding: 10px;
font-size: 22px;
font-family: adobe-garamond-pro;
font-style: normal;
letter-spacing: 0px;
color: #1a1a1a;
}
select {
cursor: pointer;
}
button[type='submit'] {
background-color: rgb(209, 0, 0);
color: white;
border-radius: 300px;
border: none;
font-size: 22px;
font-family: proxima-nova;
font-weight: 500;
font-style: normal;
text-transform: uppercase;
letter-spacing: 3px;
padding: 22px 55px;
width: min-content;
cursor: pointer;
transition: background-color 0.2s 0s ease-in-out,
color 0.2s 0s ease-in-out, opacity 0.2s 0s ease-in-out;
&:hover {
cursor: pointer;
opacity: 0.8;
}
}
}
p.privacy-notice {
padding: 17px;
}
main {
background-color: white;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
* p,
strong,
li {
font-size: 22px;
line-height: 1.6em;
font-family: adobe-garamond-pro;
font-style: normal;
letter-spacing: 0px;
color: #1a1a1a;
> a {
color: rgb(16, 144, 203);
text-decoration: none;
cursor: pointer;
&:visited {
text-decoration: none !important;
}
}
}
* p {
font-weight: 400;
}
* .image-description {
font-size: 19.25px;
line-height: 24.0625px;
}
* ul,
ol {
padding-left: 40px;
}
> .content-section {
padding: 96px 32px;
max-width: 1054px;
> .divider {
padding: 17px;
height: 99px;
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
justify-content: center;
> div {
height: 1px;
background-color: rgba(26, 26, 26, 0.15);
width: 100%;
}
}
> .spacer {
margin: 22px 0px;
height: 35px;
}
> h1 {
font-family: adobe-garamond-pro;
font-weight: 400;
font-style: normal;
font-size: 32px;
letter-spacing: 0px;
text-transform: none;
line-height: 1.2em;
text-align: center;
color: rgba(26, 26, 26, 0.9);
padding: 0px 17px 17px;
}
* h2 {
font-family: proxima-nova;
font-weight: 600;
font-style: normal;
font-size: 24px;
letter-spacing: 0.05em;
text-transform: uppercase;
line-height: 1.2em;
color: rgb(74, 74, 74);
}
* div.section-title {
text-align: center;
padding: 17px;
}
div.quote-section {
padding: 17px;
text-align: center;
> .quote-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 32px 32px 0px;
}
.quote-mark {
line-height: 33px;
font-size: 80px;
font-family: adobe-garamond-pro;
font-weight: 400;
color: rgba(26, 26, 26, 0.9);
opacity: 0.3;
}
.quote {
font-family: adobe-garamond-pro;
font-weight: 400;
font-size: 20px !important;
letter-spacing: 0px;
line-height: 1.65em;
color: rgba(26, 26, 26, 0.9);
}
.author {
font-family: adobe-garamond-pro;
font-weight: 400;
font-size: 17.5px;
letter-spacing: 0px;
line-height: 1.65em;
color: rgba(26, 26, 26, 0.9);
opacity: 0.5;
padding-top: 17.5px;
}
}
}
}
footer {
background-color: rgb(86, 86, 86);
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
min-height: 495px;
> div {
padding: 96px 32px;
max-width: 1020px;
> nav {
text-decoration-line: line-through;
color: white;
text-align: center;
text-transform: uppercase;
font-family: proxima-nova;
font-weight: 400;
font-style: normal;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: line-through;
padding-bottom: 33px;
> div {
display: inline-block;
padding: 0.75em 1em;
&:hover {
cursor: pointer;
> a {
color: rgb(16, 144, 203);
}
}
> a {
text-decoration: none !important;
color: white;
transition: color 0.1s 0s ease-in-out;
}
> a.active {
color: rgb(16, 144, 203);
}
}
}
> div {
display: flex;
flex-direction: row;
.left {
width: 66%;
display: flex;
flex-direction: column;
gap: 30px;
> div {
> p {
color: rgba(255, 255, 255, 0.83);
font-family: adobe-garamond-pro;
font-weight: 400;
font-style: normal;
font-size: 22px;
letter-spacing: 0px;
line-height: 1.6em;
max-width: 500px;
}
> img {
object-fit: cover;
width: 100%;
height: 100%;
height: auto;
max-width: 213px;
}
}
}
.right {
width: 34%;
display: flex;
flex-direction: column;
> img {
display: block;
object-fit: cover;
width: 100%;
object-position: 50% 50%;
}
}
}
}
}
.cookie-banner {
background-color: rgb(0, 0, 0);
color: white;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 14px 20px;
z-index: 10000;
display: flex;
flex-direction: row;
justify-content: space-between;
> p {
font-family: adobe-garamond-pro;
font-weight: 400;
font-style: normal;
font-size: 12px;
letter-spacing: 0px;
line-height: 1.6em;
> a {
color: white;
text-decoration: underline;
cursor: pointer;
}
}
> button {
padding: 11px 15px;
font-size: 12px;
font-family: adobe-garamond-pro;
cursor: pointer;
border: none;
background-color: white;
}
}