/************************************************************************** ██╗ ██╗ █████╗ ██████╗ ██╗ █████╗ ██████╗ ██╗ ███████╗███████╗ ██║ ██║██╔══██╗██╔══██╗██║██╔══██╗██╔══██╗██║ ██╔════╝██╔════╝ ██║ ██║███████║██████╔╝██║███████║██████╔╝██║ █████╗ ███████╗ ╚██╗ ██╔╝██╔══██║██╔══██╗██║██╔══██║██╔══██╗██║ ██╔══╝ ╚════██║ ╚████╔╝ ██║ ██║██║ ██║██║██║ ██║██████╔╝███████╗███████╗███████║ ╚═══╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝╚═╝ ╚═╝╚═════╝ ╚══════╝╚══════╝╚══════╝ **************************************************************************/ /* Default CSS variables for the grid rhythm and basic typography. */ :root, .small { --font-scale : 1.1; /* How the headings font size scales up. */ --root-font-size : 10px; /* The root element, ie HTML, font size. */ --base-font-size : 1.4rem; /* The body element base font size. */ --base-line-height : 1.5; /* The default line height of all elements. */ --text-line-height : 1.5; /* The line height of block text elements. */ --heading-line-height : 1.3; /* The line height of heading elements. */ --text-rhythm : 2rem; /* Vertical margins between text elements. */ --grid-gutter : 1rem; /* Paddings between columns, the grid gutters. */ --vertical-rhythm : 3rem; /* Vertical margins between major grid sections. */ --slider-height : 30rem; --panel-width : 1180px; /* The width of the panel element. */ --color-text : #646464; /* The colour of the text.*/ --color-text-selection : #fafafa; /* The colour of the selected text.*/ --color-text-selection-bg : #646464; /* The colour of the selected text background.*/ --color-sugar-white : #f4f3f1; --color-sugar-cream : #f8f6f1; --color-sugar-grey : #e9e8e4; --color-sugar-beige : #f3f0eb; --color-light-grey : #eae8e4; /* Color light grey for Lilly colors */ --color-grey : #d5d2ca; /* Color grey for Lilly colors */ /* --color-gold : #d3bf96; *//* Color gold for Lilly colors */ --color-gold : #d5d2ca; /* Color gold for Lilly colors */ --color-light-red : #e55958; /* Color light red for Lilly colors */ --color-red : #d52b1e; /* Color red for Lilly colors */ --color-white : #ffffff; /* White color for Lilly texts or backgrounds */ --color-brown : #82786f; /* Color for menu and footer background */ --color-dark-brown : #4f3f32; --color-dark-blue : #1f355e; /* Color dark blue after submit buttons */ --color-cream : #d3bf96; /* Color Cream */ --color-very-dark-brown : #4d3f32; --color-black : #000000; --color-message-green : #c9d6cd; --color-message-dark-green : #245e36; --color-message-red : #f3cac6; --color-message-dark-red : #da2220; --color-message-blue : #d7d8dd; --color-message-dark-blue : #5b637a; --font-thin : 'AvertaStd-Thin', sans-serif; --font-light : 'AvertaStd-Light', sans-serif; --font-regular : 'AvertaStd-Regular', sans-serif; --font-bold : 'AvertaStd-Bold', sans-serif; --font-semibold : 'AvertaStd-Semibold', sans-serif; } .tablet { --font-scale : 1.125; /* How the headings font size scales up. */ --base-font-size : 1.5rem; /* The body element base font size. */ --text-line-height : 1.6; /* The line height of block text elements. */ --heading-line-height : 1.25; /* The line height of heading elements. */ --text-rhythm : 3rem; /* Vertical margins between text elements. */ --grid-gutter : 1.5rem; /* Paddings between columns, the grid gutters. */ --vertical-rhythm : 4rem; /* Vertical margins between major grid sections. */ --slider-height : 50rem; } .laptop { --font-scale : 1.2; /* How the headings font size scales up. */ --base-font-size : 1.6rem; /* The body element base font size. */ --text-line-height : 1.7; /* The line height of block text elements. */ --heading-line-height : 1.2; /* The line height of heading elements. */ --text-rhythm : 4rem; /* Vertical margins between text elements. */ --grid-gutter : 2rem; /* Paddings between columns, the grid gutters. */ --vertical-rhythm : 5rem; /* Vertical margins between major grid sections. */ --slider-border-width : 2.5rem; --slider-height : 69rem; } /****************************************************************************************************** ██████╗ ██████╗ ██╗██████╗ ███████╗███████╗████████╗████████╗██╗███╗ ██╗ ██████╗ ███████╗ ██╔════╝ ██╔══██╗██║██╔══██╗ ██╔════╝██╔════╝╚══██╔══╝╚══██╔══╝██║████╗ ██║██╔════╝ ██╔════╝ ██║ ███╗██████╔╝██║██║ ██║ ███████╗█████╗ ██║ ██║ ██║██╔██╗ ██║██║ ███╗███████╗ ██║ ██║██╔══██╗██║██║ ██║ ╚════██║██╔══╝ ██║ ██║ ██║██║╚██╗██║██║ ██║╚════██║ ╚██████╔╝██║ ██║██║██████╔╝ ███████║███████╗ ██║ ██║ ██║██║ ╚████║╚██████╔╝███████║ ╚═════╝ ╚═╝ ╚═╝╚═╝╚═════╝ ╚══════╝╚══════╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═════╝ ╚══════╝ ******************************************************************************************************/ /* The panel that restrains contents to a maximum width. */ .panel { max-width: var(--panel-width); } .panel-full { max-width: 100%; margin-top: var(--vertical-rhythm); margin-bottom: var(--vertical-rhythm); } /* Rows inside full width panels already span full width. */ .panel-full .row { margin: 0; } .small-padding { padding: 0 calc(var(--grid-gutter)/2)!important; } /******************************************************************************************* ████████╗██╗ ██╗██████╗ ██████╗ ██████╗ ██████╗ █████╗ ██████╗ ██╗ ██╗██╗ ██╗ ╚══██╔══╝╚██╗ ██╔╝██╔══██╗██╔═══██╗██╔════╝ ██╔══██╗██╔══██╗██╔══██╗██║ ██║╚██╗ ██╔╝ ██║ ╚████╔╝ ██████╔╝██║ ██║██║ ███╗██████╔╝███████║██████╔╝███████║ ╚████╔╝ ██║ ╚██╔╝ ██╔═══╝ ██║ ██║██║ ██║██╔══██╗██╔══██║██╔═══╝ ██╔══██║ ╚██╔╝ ██║ ██║ ██║ ╚██████╔╝╚██████╔╝██║ ██║██║ ██║██║ ██║ ██║ ██║ ╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝ ╚═╝ ╚═╝ *******************************************************************************************/ /* Global base stylings. */ html { font-size: 10px; font-size: var(--root-font-size); } body { color: var(--color-text); font-family: 'Open Sans', Arial, sans-serif; font-display: block; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-bold); font-display: block; color: var(--color-black); } .small .text blockquote { font-size: 115%; } .tablet .text blockquote { font-size: 125%; } h3.black-heading { font-family: var(--font-bold); color: var(--color-black); } /* Input fields */ input, select, textarea { color: var(--color-text); } tbody tr:hover, tbody tr:hover { background: var(--color-light-grey); } /* Links, global and inside text. */ a { color: var(--color-text); } a.white { /* color: var(--color-white); */ color: var(--color-black); } .text a { border-bottom-width: 0.1rem; border-bottom-style: double; /* vertical-align: top;*/ } .text a:hover { border-bottom-width: 0.1rem; border-bottom-style: solid; } .single-therapeutic_area .text p:not(.text-center) a { display: inline; } .text .button, .text .button:hover, .text .gallery a, .text .gallery a:hover, .text .wp-caption a, .text .wp-caption a:hover { border-bottom-width: 0; } .text p { font-family: var(--font-light); font-size: 1.8rem; color: black; } /* Buttons. */ input, textarea, select, button, .button { border-radius: 2px; } button, .button, input[type="button"], input[type="submit"] { color: var(--color-text-selection); background: var(--color-text); } button:hover, .button:hover, input[type="button"]:hover, input[type="submit"]:hover { color: var(--color-text-selection); background: var(--color-text-selection-bg); } input:focus, textarea:focus, select:focus { box-shadow: 0 0 1rem -0.3rem currentColor; } .tablet .text .alignleft, .tablet .text .alignright, .tablet .text .wp-caption.alignleft, .tablet .text .wp-caption.alignright { max-width: 100%; margin-bottom: calc(0.3 * var(--text-rhythm)); /* WAS 0.5 */ } .text ul li, .text ol li, .text dl dd { padding-left: calc(var(--text-rhythm) / 4); padding-bottom: calc(var(--text-rhythm) / 4); list-style-type: inherit; font-family: var(--font-light); font-size: 1.8rem; color: black; } .uppercase { text-transform: uppercase; } em > strong { font-style: italic; } /************************************************************* ███████╗ ██████╗ ███╗ ██╗ ████████╗ ███████╗ ██╔════╝ ██╔═══██╗ ████╗ ██║ ╚══██╔══╝ ██╔════╝ █████╗ ██║ ██║ ██╔██╗ ██║ ██║ ███████╗ ██╔══╝ ██║ ██║ ██║╚██╗██║ ██║ ╚════██║ ██║ ╚██████╔╝ ██║ ╚████║ ██║ ███████║ ╚═╝ ╚═════╝ ╚═╝ ╚═══╝ ╚═╝ ╚══════╝ *************************************************************/ @font-face { font-family: 'AvertaStd-Bold'; src: url('../css/fonts/329193_3_0.eot'); src: url('../css/fonts/329193_3_0.eot?#iefix') format('embedded-opentype'), url('../css/fonts/329193_3_0.woff2') format('woff2'), url('../css/fonts/329193_3_0.woff') format('woff'), url('../css/fonts/329193_3_0.ttf') format('truetype'); font-display: block; } @font-face { font-family: 'AvertaStd-Semibold'; src: url('../css/fonts/329193_C_0.eot'); src: url('../css/fonts/329193_C_0.eot?#iefix') format('embedded-opentype'), url('../css/fonts/329193_C_0.woff2') format('woff2'), url('../css/fonts/329193_C_0.woff') format('woff'), url('../css/fonts/329193_C_0.ttf') format('truetype'); font-display: block; } @font-face { font-family: 'AvertaStd-Regular'; src: url('../css/fonts/329193_A_0.eot'); src: url('../css/fonts/329193_A_0.eot?#iefix') format('embedded-opentype'), url('../css/fonts/329193_A_0.woff2') format('woff2'), url('../css/fonts/329193_A_0.woff') format('woff'), url('../css/fonts/329193_A_0.ttf') format('truetype'); font-display: block; } @font-face { font-family: 'AvertaStd-Thin'; src: url('../css/fonts/329193_D_0.eot'); src: url('../css/fonts/329193_D_0.eot?#iefix') format('embedded-opentype'), url('../css/fonts/329193_D_0.woff2') format('woff2'), url('../css/fonts/329193_D_0.woff') format('woff'), url('../css/fonts/329193_D_0.ttf') format('truetype'); font-display: block; } @font-face { font-family: 'AvertaStd-Light'; src: url('../css/fonts/329193_8_0.eot'); src: url('../css/fonts/329193_8_0.eot?#iefix') format('embedded-opentype'), url('../css/fonts/329193_8_0.woff2') format('woff2'), url('../css/fonts/329193_8_0.woff') format('woff'), url('../fonts/329193_8_0.ttf') format('truetype'); font-display: block; }