/* Table of Contents I. Generic -------------------------------------- 01. Reset ------------------------------------ 02. Base ------------------------------------- Tablet Portrait -------------------------- 03. Fonts ------------------------------------ 04. Helpers ---------------------------------- Clear ------------------------------------ Notext ----------------------------------- Hidden ----------------------------------- Alignleft -------------------------------- Alignright ------------------------------- Disabled --------------------------------- Grid ------------------------------------- Tablet Portrait -------------------------- Responsive Helpers ----------------------- II. Regions -------------------------------------- 01. Container -------------------------------- 02. Content ---------------------------------- 03. Footer ----------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 04. Footer Marketing Landing ----------------- Mobile ----------------------------------- 05. Header ----------------------------------- Header Simple ---------------------------- Header Logged ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 06. Main ------------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 07. Shell ------------------------------------ Tablet Portrait -------------------------- 08. Sidebar ---------------------------------- 09. Wrapper ---------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- III. Modules -------------------------------------- 01. Accordion -------------------------------- Mobile ----------------------------------- 02. Accordion Simple ------------------------- Mobile ----------------------------------- 03. Accordion Specifications ----------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 04. Alert ------------------------------------ 05. Alert Info ------------------------------- 06. Article ---------------------------------- 07. Article Default -------------------------- Article Default Full --------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 08. Article Accordion ------------------------ Mobile ----------------------------------- 09. Article Event Details -------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 10. Article Popup ---------------------------- 11. Article Letter --------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 12. Banner ----------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 13. Breadcrumbs ------------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 14. Button ----------------------------------- Button Block ----------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 15. Card ------------------------------------- 16. Card Post -------------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- 17. Card Image Text -------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 18. Card Text -------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 19. Card Overview ---------------------------- 20. Card Process ----------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 21. Card Video ------------------------------- 22. Card Notification ------------------------ Mobile ----------------------------------- 23. Card Saved ------------------------------- Mobile Portrait -------------------------- 24. Card Contact ----------------------------- Mobile Portrait -------------------------- 25. Card White Paper ------------------------- 26. Card Solution ---------------------------- 27. CTA Block -------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 28. CTA Contact ------------------------------ Tablet Portrait -------------------------- Mobile Portrait -------------------------- 29. Direction Links -------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 30. Downloads -------------------------------- 31. Event List ------------------------------- Mobile ----------------------------------- 32. Event Details ---------------------------- Mobile ----------------------------------- 33. Event Join ------------------------------- Mobile ----------------------------------- 34. Event Meta ------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 35. Event Register --------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 36. Event Map -------------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 37. Filter ----------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 38. Form Elements ---------------------------- Checkbox Colored ------------------------- Checkbox with icon ----------------------- 39. Form ------------------------------------- 40. Form Newsletter -------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile Portrait -------------------------- 41. Form Filter ------------------------------ Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 42. Form Search ------------------------------ Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 43. Form Search Large ------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 44. Form Login ------------------------------- Mobile ----------------------------------- 45. Form Email Settings ---------------------- Mobile ----------------------------------- Mobile Portrait -------------------------- 46. Form Refine ------------------------------ 47. Form Download ---------------------------- Secondary -------------------------------- Mobile ----------------------------------- 48. Heading ---------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 49. Icons ------------------------------------ 50. List Items ------------------------------- Tablet Portrait -------------------------- 51. List Item -------------------------------- Mobile ----------------------------------- 52. List ------------------------------------- 53. List Post Cards -------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 54. List News -------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 55. List Cards Overview ---------------------- Tablet Portrait -------------------------- Mobile Portrait -------------------------- 56. List Process ----------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 57. List Utilities --------------------------- 58. List Filter ------------------------------ Small Desktop ---------------------------- Mobile ----------------------------------- 59. List Tags -------------------------------- 60. List Stats ------------------------------- Mobile ----------------------------------- 61. List Downloads --------------------------- 62. List Cards Process ----------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 63. List Video Cards ------------------------- Mobile ----------------------------------- 64. List Notification Cards ------------------ Tablet Portrait -------------------------- 65. List Saved ------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 66. List Checkboxes -------------------------- 67. List Color Circles ----------------------- 68. List Icons ------------------------------- Mobile ----------------------------------- 69. List News Listing ------------------------ 70. List Circles ----------------------------- 71. List White Papers ------------------------ 72. List Solution Cards ---------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 73. Logo ------------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 74. Map Interactive -------------------------- Legend ----------------------------------- Tooltip ---------------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile Portrait -------------------------- 75. Media Info ------------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 76. Nav -------------------------------------- Level 1 ---------------------------------- Level 2 -- Mega -------------------------- Level 2 -- Simple ------------------------ Tablet Portrait -------------------------- Level 2 -- Mega -------------------------- Level 2 -- Simple ------------------------ Mobile ----------------------------------- 77. Nav Utilities ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 78. Nav CTA ---------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 79. Nav Program ------------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 80. Nav Blocks ------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 81. News Item -------------------------------- Mobile ----------------------------------- 82. Notifications Dropdown ------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 83. Paging ----------------------------------- 84. Popup ------------------------------------ Mobile ----------------------------------- 85. Popup Interrupter Ajax ------------------- Mobile ----------------------------------- Mobile Portrait -------------------------- 86. Popup Article ---------------------------- 87. Product Program -------------------------- Mobile ----------------------------------- 88. Search ----------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 89. Search Results --------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 90. Search Result ---------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 91. Section ---------------------------------- 92. Section Nav CTA -------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 93. Section CTA Blocks ----------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 94. Section Updates -------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 95. Section Newsletter ----------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 96. Section Grid ----------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 97. Section Interior ------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile Portrait -------------------------- 98. Section Info ----------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 99. Section Overview ------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 100. Section Process ------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 101. Section Archive ------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 102. Section CTA Contact --------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 103. Section Program FAQ --------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 104. Section Program Products ---------------- Tablet Portrait -------------------------- 105. Section Event Default ------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile Portrait -------------------------- 106. Section Event Listing ------------------- Small Desktop ---------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 107. Section Event Details ------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 108. Section Login --------------------------- Mobile ----------------------------------- 109. Section Program Content ----------------- Tablet Portrait -------------------------- 110. Section Program Overview ---------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- 111. Section Program Library ----------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 112. Section Standard ------------------------ Tablet Portrait -------------------------- 113. Section Specifications ------------------ Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 114. Section Notifications ------------------- Tablet Portrait -------------------------- 115. Section Email Settings ------------------ 116. Section Saved --------------------------- Tablet Portrait -------------------------- 117. Section Search Results ------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 118. Section Data Tables --------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 119. Section Map ----------------------------- Tablet Portrait -------------------------- 120. Section News ---------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 121. Section White Papers -------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 122. Section Letters ------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 123. Section News Single --------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 124. Section White Paper --------------------- No Form ---------------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 125. Section Letters Single ------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 126. Section Marketing Landing --------------- Reduced ---------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Reduced ---------------------------------- 127. Section Testimonials -------------------- Mobile ----------------------------------- 128. Section List Items ---------------------- With Image ------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 129. Section Solutions ----------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 130. Share ----------------------------------- Mobile Portrait -------------------------- 131. Slider Testimonials --------------------- Mobile ----------------------------------- 132. Socials --------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 133. Table ----------------------------------- Mobile ----------------------------------- 134. Table Simple ---------------------------- Mobile ----------------------------------- 135. Table Sortable Data --------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 136. Tooltip --------------------------------- 137. Utilities ------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 138. Video Embed ----------------------------- Tablet Portrait -------------------------- 139. Widget ---------------------------------- 140. Widget Nav ------------------------------ 141. Widget Related -------------------------- 142. Widget Download ------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- IV. Themes --------------------------------------- 01. Theme Gravity ---------------------------- Mobile ----------------------------------- 02. Theme Magnific --------------------------- Magnific Image Type ---------------------- Mobile ----------------------------------- 03. Theme Selectric -------------------------- Opened ----------------------------------- */ /* ------------------------------------------------------------ *\ I. Generic \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Reset \* ------------------------------------------------------------ */ * { padding: 0; margin: 0; outline: 0; box-sizing: border-box; } *:before, *:after { box-sizing: inherit; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main { display: block; } template { display: none; } html { -webkit-tap-highlight-color: rgba(0,0,0,0); tap-highlight-color: rgba(0,0,0,0); } body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } img, iframe, video, audio, object { max-width: 100%; } img, iframe { border: 0 none; } img { height: auto; display: inline-block; vertical-align: middle; } b, strong { font-weight: bold; } address { font-style: normal; } svg:not(:root) { overflow: hidden; } a, button, input[type="submit"], input[type="button"], input[type="reset"], input[type="file"], input[type="image"], label[for] { cursor: pointer; } a[href^="tel"], button[disabled], input[disabled], textarea[disabled], select[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea, a[href^="tel"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } textarea { overflow: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } button, input, optgroup, select, textarea { font-family: inherit; font-size: inherit; color: inherit; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } button, select { text-transform: none; } table { width: 100%; border-collapse: collapse; border-spacing: 0; } nav ul, nav ol { list-style: none outside none; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; } /* Accessibility Focus */ a:focus, p a:focus, li a:focus, input:focus, select:focus, textarea:focus { outline: 0.1rem dashed #0099cc; outline-offset: 0.1rem; border-radius: 4px; } .footer a:focus, .nav--program ul a:focus, .nav--program .nav__inner > .btn--red:focus { outline: 0.1rem dashed #fff; } /* ------------------------------------------------------------ *\ Base \* ------------------------------------------------------------ */ body { min-width: 320px; background: #fff; font-family: 'Lato', sans-serif; font-size: 16px; line-height: 1.3; color: #54585a; } a { color: inherit; text-decoration: none; } p a { color: #0099cc; text-decoration: underline; } a:hover, a[href^="tel"] { text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-family: 'futura-pt', sans-serif; font-weight: 500; margin-bottom: 0.65em; } h1 { font-size: 46px; color: #262626; line-height: 1.1; } h2 { font-size: 30px; color: #333; } h3 { font-size: 26px; color: #4f758b; } h4 { font-size: 20px; color: #333; } h5 { font-size: 18px; } h6 { font-size: 16px; } p, ul, ol, dl, hr, table, blockquote { margin-bottom: 1.3em; } h1[class], h2[class], h3[class], h4[class], h5[class], h6[class], h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, ul:last-child, ol:last-child, dl:last-child, table:last-child, blockquote:last-child { margin-bottom: 0; } .has-tooltip { position: relative; } .has-tooltip:hover .tooltip, .has-tooltip:focus .tooltip { opacity: 1; visibility: visible; } /* Tablet Portrait */ @media (max-width: 1023px) { h2 { font-size: 28px; } h3 { font-size: 24px; } } /* ------------------------------------------------------------ *\ Fonts \* ------------------------------------------------------------ */ @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Light.woff2') format('woff2'), url('fonts/Montserrat-Light.woff') format('woff'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Regular.woff2') format('woff2'), url('fonts/Montserrat-Regular.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-SemiBold.woff2') format('woff2'), url('fonts/Montserrat-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Bold.woff2') format('woff2'), url('fonts/Montserrat-Bold.woff') format('woff'); font-weight: 700; font-style: normal; } @font-face { font-family: 'FontAwesome'; src: url('fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Material-Design-Iconic-Font'; src: url('fonts/Material-Design-Iconic-Font.eot?v=2.2.0'); src: url('fonts/Material-Design-Iconic-Font.eot?#iefix&v=2.2.0') format('embedded-opentype'), url('fonts/Material-Design-Iconic-Font.woff2?v=2.2.0') format('woff2'), url('fonts/Material-Design-Iconic-Font.woff?v=2.2.0') format('woff'), url('fonts/Material-Design-Iconic-Font.ttf?v=2.2.0') format('truetype'), url('fonts/Material-Design-Iconic-Font.svg?v=2.2.0#material-desidesigniconicfont') format('svg'); font-weight: normal; font-style: normal; } /* ------------------------------------------------------------ *\ Helpers \* ------------------------------------------------------------ */ /* Clear */ .clear { @util clearfix; } /* Notext */ .notext { @util text-hide; } /* Hidden */ [hidden], .hidden { display: none !important; } .hidden-accessible { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; } /* Alignleft */ .alignleft { float: left; } /* Alignright */ .alignright { float: right; } /* Disabled */ [disabled], .disabled { cursor: default; } /* Grid */ .cols { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; margin: 0 -15px; width: 100%; } .col { max-width: 100%; -ms-flex: 1; flex: 1; padding: 0 15px; } .col--1of2 { max-width: 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; } .col--1of4 { max-width: 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; } /* Tablet Portrait */ @media (max-width: 1023px) { .col--1of2 { max-width: 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; } .col--1of4 { max-width: 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; } } /* Conditional Colors */ .bg-gray { background: #f2f2f0; } .bg-gray ~ .semicircle, .bg-gray .semicircle { background: #f2f2f0; } .light-font {background-color: #11576F; padding: 7px;} /* Responsive Helpers */ .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display: none !important; } @media (max-width: 767px) { .hidden-xs { display: none !important; } .visible-xs-block { display: block !important; } .visible-xs-inline { display: inline !important; } .visible-xs-inline-block { display: inline-block !important; } } @media (min-width: 768px) and (max-width: 1023px) { .hidden-sm { display: none !important; } .visible-sm-block { display: block !important; } .visible-sm-inline { display: inline !important; } .visible-sm-inline-block { display: inline-block !important; } } @media (min-width: 1024px) and (max-width: 1169px) { .hidden-md { display: none !important; } .visible-md-block { display: block !important; } .visible-md-inline { display: inline !important; } .visible-md-inline-block { display: inline-block !important; } } @media (min-width: 1170px) { .hidden-lg { display: none !important; } .visible-lg-block { display: block !important; } .visible-lg-inline { display: inline !important; } .visible-lg-inline-block { display: inline-block !important; } } /* ------------------------------------------------------------ *\ II. Regions \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Container \* ------------------------------------------------------------ */ .container {} /* ------------------------------------------------------------ *\ Content \* ------------------------------------------------------------ */ .content {} /* ------------------------------------------------------------ *\ Footer \* ------------------------------------------------------------ */ /* a11y Homepage #222: Changed footer background color to #335266 */ .footer { background: #335266; border-top: 10px solid #496b80; color: #fff; padding: 44px 0 30px; position: relative; } .footer .copyright { font-size: 14px; opacity: 1; margin: 50px 0 0 -4px; } .footer .copyright a { text-decoration: underline; color: #fff; } .footer .footer__inner { display: -ms-flexbox; display: flex; } .footer .footer__logo { -ms-flex: 0 0 26%; flex: 0 0 26%; } .footer .footer__logo .logo { margin-left: 4px; margin-bottom: 24px; } .footer .footer__logo address { font-size: 14px; line-height: 1.57; opacity: 1; padding-left: 38px; } .footer .footer__content { -ms-flex: 0 0 48%; flex: 0 0 48%; padding-top: 16px; } .footer .footer__nav { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; list-style: none; margin: 0; padding: 0 0 20px; border-bottom: 2px solid rgba(255, 255, 255, .2); } .footer .footer__nav a { display: block; font-family: 'futura-pt', sans-serif; font-weight: 500; font-size: 18px; transition: color .2s ease; } .footer .footer__nav a:hover { text-decoration: underline; } .footer .footer__nav li ~ li { margin-left: 27px; } .footer .footer__nav .zmdi { font-weight: 400; font-size: 14px; opacity: .6; margin-left: 3px; } .footer .footer__nav ~ .footer__nav { margin-top: 20px; } .footer .footer__nav ~ .footer__nav li ~ li { margin-left: 33px; } .footer .footer__aside { -ms-flex: 0 0 26%; flex: 0 0 26%; max-width: 26%; text-align: right; padding-right: 5px; padding-top: 12px; } .footer #msecb-certification img { width: 90px; height: auto; margin-top: 1rem; } .footer #msecb-certification a:hover { opacity: .8; } /* Tablet Portrait */ @media (max-width: 1023px) { .footer { padding: 30px 0 169px; } .footer .footer__inner { position: relative; } .footer .footer__logo { -ms-flex: 0 0 38.5%; flex: 0 0 38.5%; } .footer .footer__logo .logo { margin-left: 7px; margin-bottom: 18px; } .footer .footer__logo address { padding-left: 34px; } .footer .footer__content { -ms-flex: 0 0 40%; flex: 0 0 40%; display: -ms-flexbox; display: flex; padding-top: 26px; } .footer .footer__nav { display: block; -ms-flex: 0 0 50%; flex: 0 0 50%; padding: 0; border: 0; } .footer .footer__nav li ~ li { margin-left: 0; margin-top: 14px; } .footer .footer__nav ~ .footer__nav { margin-top: 0; margin-left: 0; } .footer .footer__nav ~ .footer__nav li ~ li { margin-left: 0; margin-top: 14px; } .footer .footer__aside { -ms-flex: 0 0 21.5%; flex: 0 0 21.5%; max-width: 21.5%; padding-top: 15px; padding-left: 28px; } .footer .copyright { width: 100%; text-align: center; border-top: 1px solid rgba(255,255,255, .2); position: absolute; left: 0; top: 100%; margin-top: 52px; padding-top: 39px; } .footer--marketing-landing .copyright { position: static; padding: 0; } } /* Mobile */ @media (max-width: 767px) { .footer { padding: 30px 0 150px; } .footer .footer__inner { display: block; } .footer .footer__logo { text-align: center; margin-bottom: 20px; } .footer .footer__logo .logo { margin: 0; display: inline-block; } .footer .footer__logo .logo img { width: 140px; height: auto; } .footer .footer__logo address { display: none; } .footer .footer__content { max-width: 220px; padding-top: 15px; margin: 0 auto; } .footer .footer__nav { -ms-flex: 0 0 141px; flex: 0 0 141px; max-width: 141px; } .footer .footer__aside { max-width: 100%; padding: 35px 0 0 10px; } .footer .copyright { margin-top: 16px; padding-top: 32px; } .footer #msecb-certification { text-align: center; } .footer #msecb-certification img { margin-top: 0; } } /* ------------------------------------------------------------ *\ Footer Marketing Landing \* ------------------------------------------------------------ */ .footer--marketing-landing { padding: 39px 0 30px; background: #fff; border: 0; text-align: center; color: #54585a; } .footer--marketing-landing .footer__inner { display: block; } .footer--marketing-landing .copyright { margin: 0 0 21px; opacity: 1; font-size: 14px; } .footer--marketing-landing .copyright a { color: #54585a; text-decoration: underline; } .footer--marketing-landing .copyright a:hover { text-decoration: none; } .footer--marketing-landing address { font-size: 14px; line-height: 1.57; } /* Mobile */ @media (max-width: 767px) { .footer--marketing-landing { padding: 16px 0 30px; } .footer--marketing-landing .copyright { margin: 0 0 12px; } } /* ------------------------------------------------------------ *\ Header \* ------------------------------------------------------------ */ .header { background: #fff; padding: 10px 0 0; position: relative; z-index: 999; } .header:after { content: ''; width: 100%; height: 2000px; background: #000; left: 0; top: 100%; position: absolute; z-index: -1; opacity: 0; visibility: hidden; transition: opacity .4s ease-in-out, visibility .4s ease-in-out; } .header.nav--hovered:after { opacity: .6; visibility: visible; transition-delay: .25s; } .header .header__inner { position: relative; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; } .header .search { position: absolute; right: 0; top: 0; z-index: 1000; } .header .nav--utilities { margin: 12px 151px 20px 0; } /* Header Simple */ .header--simple { background: none; } .header--simple .logo img { width: 190px; height: 113px; -webkit-backface-visibility: hidden; } .header--simple .header__inner { -ms-flex-pack: center; justify-content: center; padding: 41px 0 29px; } /* Header Logged */ .header--logged .nav--utilities { margin: 12px 168px 20px 0; } .header--logged .nav--utilities > ul > li ~ li { margin-left: 29px; } .nav--utilities .ico-baloon, .header--logged .nav--utilities .ico-baloon { width: 17px; height: 14px; position: relative; top: 3px; left: -2px; } @media(max-height: 679px) and (min-width: 1025px) { .header .nav--utilities { margin: 12px 151px 10px 0; } .header .logo img { width: 150px; height: 89px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .header { width: 100%; padding: 8px 0; position: fixed; left: 0; top: 0; } .admin-bar .header { top: 32px; } .header .logo { margin-left: 40px; } .header .header__inner { -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; -ms-flex-pack: start; justify-content: flex-start; padding-left: 5px; } .header .search { top: 100%; margin-top: 8px; left: -25px; right: -25px; } .header .header__aside { width: 375px; background: #fff; border-top: 4px solid #0099cc; box-shadow: 0 0 8px rgba(84, 88, 90, .15); position: fixed; left: 0; top: 80px; bottom: 0; z-index: 999; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; } .header .header__aside.active { opacity: 1; visibility: visible; } .header .header__aside-inner { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: start; align-items: flex-start; } .header .nav--primary, .header .nav--utilities { -ms-flex: 0 0 100%; flex: 0 0 100%; } .header .nav--utilities, .header--logged .nav--utilities { margin: 0; } .header--logged .nav--utilities > ul > li ~ li { margin-left: 0; } .header--simple { padding: 0; background: #f2f2f0; } .header--simple .logo { margin-left: 0; } .header--simple .logo img { width: 110px; height: auto; } .header--simple .header__inner { padding: 25px 0; } .header.nav--hovered:after { display: none; } } /* Mobile Admin Bar Size */ @media (max-width: 780px) { .admin-bar .header { top: 46px; } } /* Mobile */ @media (max-width: 767px) { .header { padding: 0; } .header .header__inner { height: 70px; padding: 4px 0 4px 5px; } .header .logo { position: absolute; left: 50%; top: 50%; margin-left: -54px; margin-top: -31px; } .header .header__aside { top: 70px; } .header .search { margin-top: 0; } .header--simple .logo img { width: 90px; height: auto; } .header--marketing-landing .logo img { width: 108px; height: 63px; } } /* Mobile */ @media (max-width: 374px) { .header .header__aside { width: 100%; } } /* ------------------------------------------------------------ *\ Main \* ------------------------------------------------------------ */ .main { min-height: calc(100vh - 360px); } .main--with-nav { position: relative; } .main--with-nav > .nav--program { width: 100%; position: static; left: 0; top: 0; z-index: 998; transform: translateZ(0); } .main--with-nav > .nav--program.fixed { position: fixed; } /* Tablet Portrait */ @media (max-width: 1023px) { .main--with-nav { padding-top: 60px; } .main--with-nav > .nav--program { position: fixed; top: 80px; } .admin-bar .main--with-nav > .nav--program { top: 112px; } } /* Mobile */ @media (max-width: 767px) { .main--with-nav > .nav--program { top: 70px; } } /* ------------------------------------------------------------ *\ Shell \* ------------------------------------------------------------ */ .shell { max-width: 1200px; padding-left: 20px; padding-right: 20px; margin: auto; } .shell--fluid { max-width: none; } /* Tablet Portrait */ @media (max-width: 1023px) { .shell { padding-left: 25px; padding-right: 25px; } } /* ------------------------------------------------------------ *\ Sidebar \* ------------------------------------------------------------ */ .sidebar {} /* ------------------------------------------------------------ *\ Wrapper \* ------------------------------------------------------------ */ .wrapper { min-height: 100%; overflow: hidden; position: relative; /*box-shadow: 0 1px #4f758b, 0 1px #4f758b, 0 1px #4f758b;*/ } .wrapper--gray { background: #f2f2f0; } /* Tablet Portrait */ @media (max-width: 1023px) { .wrapper { padding-top: 80px; } .admin-bar .wrapper { padding-top: 120px; } .wrapper--gray { padding-top: 130px; } } /* Mobile */ @media (max-width: 767px) { .wrapper { padding-top: 70px; } .admin-bar .wrapper { padding-top: 120px; } } /* ------------------------------------------------------------ *\ III. Modules \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Accordion \* ------------------------------------------------------------ */ .accordion .accordion__section ~ .accordion__section { margin-top: 15px; } .accordion .accordion__head { background: #f2faff; border: 1px solid #dae1e6; border-radius: 4px; position: relative; cursor: pointer; transition: background .2s ease; } .accordion .accordion__head h3 { font-weight: 600; font-size: 22px; color: #333; line-height: 1.27; margin: 0; position: relative; padding: 15px 60px 14px 130px; transition: color .2s ease; } .accordion .accordion__head h3 span.date { font-family: 'Lato', sans-serif; font-weight: 400; font-size: 14px; color: #707372; position: absolute; left: 20px; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); transition: color .2s ease; } .accordion .accordion__head-btn { width: 36px; height: 36px; border: 1px solid #0099cc; background: #fff; position: absolute; right: 10px; top: 50%; margin-top: -18px; transition: background .2s ease; } .accordion .accordion__head-btn:before, .accordion .accordion__head-btn:after { content: ''; background: #0099cc; position: absolute; left: 50%; top: 50%; transition: color .2s ease, opacity .2s ease; } .accordion .accordion__head-btn:before { width: 12px; height: 2px; margin-left: -6px; margin-top: -1px; } .accordion .accordion__head-btn:after { width: 2px; height: 12px; margin-left: -1px; margin-top: -6px; } .accordion .accordion__head:hover { background: #0099cc; } .accordion .accordion__head:hover h3, .accordion .accordion__head:hover h3 span { color: #fff; } .accordion .accordion__head.active, .accordion .accordion__head.active:hover { background: #fff; border-radius: 4px 4px 0 0; } .accordion .accordion__head.active:hover h3 { color: #333; } .accordion .accordion__head.active:hover h3 span { color: #707372; } .accordion .accordion__head.active .accordion__head-btn { background: #f2faff; } .accordion .accordion__head.active .accordion__head-btn:after { opacity: 0; } .accordion .accordion__body { display: none; padding: 30px 50px 29px 130px; border: 1px solid #dce3e8; border-top: 0; background: #fff; border-radius: 0 0 4px 4px; } .accordion .accordion__toggle-wrapper { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: end; justify-content: flex-end; margin-bottom: 10px; } .accordion .accordion__toggle { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: end; justify-content: flex-end; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 11px; color: #333; text-transform: uppercase; white-space: nowrap; } .accordion .accordion__toggle .accordion__toggle-icon { -ms-flex: 0 0 20px; flex: 0 0 20px; height: 20px; border: 1px solid #0099cc; background: #f2faff; position: relative; margin-left: 5px; } .accordion .accordion__toggle .accordion__toggle-icon:before, .accordion .accordion__toggle .accordion__toggle-icon:after { content: ''; background: #0099cc; position: absolute; left: 50%; top: 50%; transition: opacity .2s ease; } .accordion .accordion__toggle .accordion__toggle-icon:before { width: 8px; height: 2px; margin-left: -4px; margin-top: -1px; } .accordion .accordion__toggle .accordion__toggle-icon:after { width: 2px; height: 8px; margin-left: -1px; margin-top: -4px; } .accordion .accordion__toggle.active .accordion__toggle-icon:after { opacity: 0; } /* Mobile */ @media (max-width: 767px) { .accordion .accordion__head h3 { padding: 15px 60px 14px 20px; font-size: 18px; } .accordion .accordion__head h3 span { display: block; position: static; -ms-transform: translateY(0); transform: translateY(0); } .accordion .accordion__body { padding: 30px 20px; } } /* ------------------------------------------------------------ *\ Accordion Simple \* ------------------------------------------------------------ */ .article--default .article__entry .accordion--simple .accordion__head h3 { padding: 5px 60px 5px 20px; margin: 14px 0; } .accordion--simple .accordion__body { padding: 20px 70px 24px 30px; } .accordion--simple .accordion__body p { line-height: 1.75; } /* Mobile */ @media (max-width: 767px) { .accordion--simple .accordion__body { padding: 20px 30px 24px 30px; } } /* ------------------------------------------------------------ *\ Accordion Specifications \* ------------------------------------------------------------ */ .accordion--specifications .accordion__head { background: #00a9e0; border: 0; border-radius: 0; } .accordion--specifications .accordion__head h3 { padding: 11px 60px 9px 20px; font-weight: 500; font-size: 24px; color: #fff; } .accordion--specifications .accordion__head-btn { right: 7px; } .accordion--specifications .accordion__toggle-wrapper { margin-bottom: 7px; } .accordion--specifications .accordion__body { border: 0; border-radius: 0; padding: 0; } .accordion--specifications .accordion__head:hover, .accordion--specifications .accordion__head.active, .accordion--specifications .accordion__head.active:hover { background: #0099cc; border-radius: 0; } .accordion--specifications .accordion__head:hover h3, .accordion--specifications .accordion__head.active h3, .accordion--specifications .accordion__head.active:hover h3 { color: #fff; } .accordion--specifications .table { margin: 0 0 42px; } .accordion--specifications .table td a:hover { text-decoration: underline; } .accordion--specifications .table th:nth-child(2), .accordion--specifications .table td:nth-child(2) { width: 160px; } .accordion--specifications .table th:nth-child(3), .accordion--specifications .table td:nth-child(3) { width: 130px; } .accordion--specifications.is-sorted .accordion__head { pointer-events: none; } .accordion--specifications.is-sorted .accordion__head-btn, .accordion--specifications.is-sorted .accordion__toggle-wrapper { display: none; } /* Tablet Portrait */ @media (max-width: 1023px) { .accordion--specifications .accordion__head h3 { font-size: 22px; padding: 13px 60px 11px 20px; } } /* Mobile */ @media (max-width: 767px) { .accordion--specifications .table th:nth-child(2), .accordion--specifications .table td:nth-child(2), .accordion--specifications .table th:nth-child(3), .accordion--specifications .table td:nth-child(3) { width: 100%; } .accordion--specifications .table td { padding: 15px 20px 15px 30%; min-height: 65px; } .accordion--specifications .table td:before { width: 30%; } .accordion--specifications .accordion__head h3 { font-size: 18px; } } /* ------------------------------------------------------------ *\ Alert \* ------------------------------------------------------------ */ .alert { border: 1px solid transparent; border-radius: 4px; padding: 15px 10px 14px 40px; position: relative; margin-bottom: 27px; } .alert > .zmdi { font-size: 18px; position: absolute; left: 15px; top: 15px; } .alert > p { margin: 0; } .alert > p a, .alert > li a, .alert > p a .zmdi { color: #0099cc; } .alert > p a .zmdi { font-size: 16px; } /* ------------------------------------------------------------ *\ Alert Info \* ------------------------------------------------------------ */ .alert--info { background-color: #f5f5e9; border: 1px solid #e0e0d5; } .alert--info > .zmdi { color: #ca0828; } /* ------------------------------------------------------------ *\ Article \* ------------------------------------------------------------ */ .article .article__entry img.alignleft, .section__body img.alignleft, .article .article__entry .wp-caption.alignleft { float: left; max-width: 45%; } .article .article__entry img.alignright, .section__body img.alignright, .article .article__entry .wp-caption.alignright { float: right; max-width: 45%; } .article .article__entry img.aligncenter, .section__body img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .article .article__share { border-top: 1px solid #dce3e8; border-bottom: 1px solid #dce3e8; margin: 31px 0; } .article .article__entry p img.alignright, .section__body p img.alignright { margin-right: -10%; } @media (max-width: 767px) { .article .article__entry img.alignleft, .article .article__entry .wp-caption.alignleft, .article .article__entry img.alignright, .article .article__entry .wp-caption.alignright { float: none; max-width: 100%; display: block; margin-left: auto; margin-right: auto; } .article .article__entry p img.alignright, .section__body p img.alignright { margin-right: 0; } } /* ------------------------------------------------------------ *\ Article Default \* ------------------------------------------------------------ */ .article--default .article__head { background: #4f758b; color: #fff; padding: 31px 0 35px; position: relative; } .article--default .article__head h1 { color: #fff; font-size: 48px; margin: 0 0 14px 3px; } .article--default .article__head p { font-size: 20px; margin: 0; line-height: 1.4; letter-spacing: .01em; } .article--default .article__head:before { content: ''; width: 9999px; height: 100%; background: #4f758b; position: absolute; left: -50vw; top: 0; z-index: -1; } .article--default .article__body { padding: 42px 0; position: relative; } .article--default .article__entry:after { content: ''; display: table; clear: both; } .article--default .article__entry h2 { text-transform: uppercase; padding-bottom: 19px; position: relative; margin: 0 0 21px; } .article--default .article__entry h2 ~ h2 { margin-top: 32px; } .article--default .article__entry h2:after { content: ''; width: 40px; height: 3px; background: #c8102e; position: absolute; left: 0; bottom: 0; } .article--default .article__entry h3 { margin: 20px 0 12px; } .article--default .article__entry p { max-width: 90%; line-height: 1.7; } .article--default .article__entry li a { color: #0099cc; text-decoration: underline; } .article--default .article__entry img { max-width: 100%; height: auto; margin-bottom: 30px; } .article--default .article__entry td img { margin-bottom: 0; } .article--default .article__entry .alignright, .section__body .alignright { margin-left: 40px; } .article--default .article__entry .alignleft, .section__body .alignleft { margin-right: 40px; } .article--default .article__entry .wp-caption { margin-bottom: 20px; max-width: 100%; width: auto !important; } .article--default .article__entry .wp-caption img { margin-bottom: 0; } .article--default .article__entry .wp-caption .wp-caption-text { padding: 10px 0 0; text-align: left; font-style: italic; font-size: 14px; color: #666; position: relative; background-color: #fff; z-index: 1; line-height: 1.5; max-width: 100%; } .article--default .article__entry .video { margin: 30px 100px 30px 0; } .article--default .article__entry blockquote { margin: 41px 0; padding: 1px 35px 10px; border-left: 4px solid #c8102e; } .article--default .article__entry blockquote p { font-weight: 300; font-style: italic; font-size: 20px; line-height: 1.6; color: #4a4a4a; margin-bottom: 15px; } .article--default .article__entry blockquote cite { display: block; font-size: 14px; line-height: 1.43; font-style: normal; padding-left: 5px; } .article--default .article__entry blockquote cite span { display: block; font-weight: 700; color: #262626; } .article--default .article__entry .has-tooltip { border-bottom: 1px dashed #c7c9c7; } .article--default .article__entry > ul, .article--default .article__entry > ol { margin: 30px 0; padding-left: 30px; line-height: 1.5; } .article--default .article__entry > ul ul, .article--default .article__entry > ul ol, .article--default .article__entry > ol ol, .article--default .article__entry > ol ul { padding-left: 30px; margin: 10px 0; font-size: 14px; } /* Article Default Full */ .article--default-full .article__head { padding: 36px 0 35px; } .article--default-full .article__body { padding: 42px 10.1333333% 42px; } .article--default-full .article__entry > p { margin-bottom: 20px; } .article--default-full .article__entry img.alignright { margin-left: 70px; } @media(max-width: 1439px) { .article--default .utilities { margin-left: 0; left: auto; right: 0; } .article--default .article__entry { padding-right: 8.5%; } } /* Tablet Portrait */ @media (max-width: 1023px) { .article--default .article__head { padding: 31px 0 30px; } .article--default .article__head h1 { font-size: 42px; margin: 0 0 6px 3px; } .article--default .article__head p { font-size: 18px; line-height: 1.56; padding: 0 8px; } .article--default .article__body { padding: 46px 5px; } .article--default .article__entry { padding-right: 0; } .article--default .article__entry img { max-width: 100%; margin-bottom: 20px; } .article--default .article__entry .wp-caption { margin-top: 20px; } .article--default .article__entry img.alignright { margin-right: -10px; margin-top: -4px; margin-left: 25px; } .article--default .article__entry h2 { font-size: 30px; } .article--default .article__entry h2 ~ h2 { margin-top: 45px; } .article--default .article__entry .video { margin: 30px 0; } } /* Mobile */ @media (max-width: 767px) { .article--default .article__head { padding: 40px 0 35px; } .article--default .article__head h1 { font-size: 34px; margin: 0 0 11px; } .article--default .article__head p { padding: 0 2px; } .article--default .article__body { padding: 41px 0; } .article--default .article__entry h2 { font-size: 28px; } .article--default .article__entry h2 ~ h2 { margin-top: 45px; } .article--default .article__entry img.alignright, .section__body img.alignright, .article--default .article__entry img.alignleft, .section__body img.alignleft { float: none; width: 100%; max-width: 100%; height: auto; margin: 0 0 20px; } .article--default .article__entry p { max-width: 100%; } .article--default .article__entry .video { margin: 30px 0 20px; } .article--default .article__entry blockquote p { font-size: 18px; } } /* ------------------------------------------------------------ *\ Article Accordion \* ------------------------------------------------------------ */ .accordion__head span.faq-title { font-weight: 600; line-height: 1.3; color: #4f758b; margin: 0; display: block; font-size: .9em; } .article--accordion h4 { font-weight: 600; line-height: 1.3; color: #4f758b; margin: 0 0 20px; } .article--accordion p { font-weight: 400; font-size: 15px; line-height: 1.87; margin-bottom: 21px; } .article--accordion .article__foot { border-top: 1px solid #dae1e6; padding-top: 20px; } /* Mobile */ @media (max-width: 767px) { .article--accordion h4 { font-size: 18px; } } /* ------------------------------------------------------------ *\ Article Event Details \* ------------------------------------------------------------ */ .article--event-details { -ms-flex: 0 0 88%; flex: 0 0 88%; padding-top: 10px; } .article--event-details h6 { color: #c8102e; text-transform: uppercase; margin: 0 0 14px; } .article--event-details img { max-width: 100%; height: auto; margin-bottom: 16px; } .article--event-details img.alignright { margin-right: 20px; margin-left: 40px; } .article--event-details p { line-height: 1.75; margin-bottom: 20px; } .article--event-details ul { list-style: none; margin: 20px -10px 48px 0; padding: 0 0 0 22px; } .article--event-details ul li { position: relative; padding-left: 31px; line-height: 1.75; } .article--event-details ul li:before { content: ''; font: normal normal normal 14px/1 'Material-Design-Iconic-Font'; font-size: 18px; color: #4f758b; position: absolute; left: 0; top: 5px; } .article--event-details ul li ~ li { margin-top: 20px; } .article--event-details .col { padding-left: 10px; padding-right: 10px; } .article--event-details .cols { margin: 40px -10px 36px; } .article--event-details .cols p { line-height: 1.63; margin-bottom: 10px; margin-right: -2px; } .article--event-details .cols p span { display: block; padding-top: 14px; } .article--event-details .cols p a { font-weight: 700; color: #4a4a4a; } .article--event-details .cols p > a { font-weight: 400; color: #0099cc; } .article--event-details .article__entry > h6 ~ h6 { margin-top: 41px; margin-bottom: 11px; } /* Tablet Portrait */ @media (max-width: 1023px) { .article--event-details { -ms-flex: 0 0 100%; flex: 0 0 100%; } } /* Mobile */ @media (max-width: 767px) { .article--event-details h6 { margin-bottom: 16px; } .article--event-details .article__entry > h6 ~ h6 { margin-top: 32px; } .article--event-details img { margin-bottom: 20px; } .article--event-details ul { margin: 10px -10px 28px 0; padding: 0 0 0 8px; } .article--event-details ul li { padding-left: 25px; } .article--event-details p + ul { margin-top: -9px; } .article--event-details img.alignright, .article--event-details img.alignleft { display: none; float: none; width: 100%; margin: 20px 0; } .article--event-details .cols { display: block; margin: 10px -10px 0; } .article--event-details .cols h6 { margin-bottom: 12px; } .article--event-details p + .cols { margin-top: 0; } .article--event-details .btn--link { height: 33px; line-height: 31px; } .article--event-details .col { margin-top: 30px; } } /* ------------------------------------------------------------ *\ Article Popup \* ------------------------------------------------------------ */ .article--popup .article__head { margin-bottom: 20px; padding-bottom: 20px; position: relative; } .article--popup .article__head:after { content: ''; width: 40px; height: 3px; background: #c8102e; position: absolute; left: 0; bottom: 0; } /* a11y #52: Replace h3 with .title */ .article--popup .article__head .title { margin: 0; font-size: 26px; font-family: 'futura-pt', sans-serif; font-weight: 500; color: #4f758b; } .article--popup .article__entry:after { content: ''; display: table; clear: both; } .article--popup .article__entry p { font-size: 14px; line-height: 1.6; margin: 0; } .article--popup .article__entry p ~ p { margin-top: 20px; } .article--popup .article__entry sup { font-size: 8px; } .article--popup .article__entry img { margin-top: -5px; } .article--popup .article__entry img.alignright { margin-left: 24px; } .article--popup .article__entry img.alignleft { margin-right: 24px; } .article--popup .article__foot { margin-top: 25px; padding-top: 25px; border-top: 1px solid rgba(206, 212, 217, .5); } .article--popup .article__foot p { font-size: 12px; line-height: 1.5; margin: 0; } .article--popup .article__foot p sup { font-size: 8px; } /* ------------------------------------------------------------ *\ Article Letter \* ------------------------------------------------------------ */ .article--letter .article__entry { padding: 46px 44px 20px; background: #fff; box-shadow: 0 0 8px rgba(84, 88, 90, .15); } .article--letter .article__entry h6 { font-family: 'Lato', sans-serif; font-weight: 400; font-size: 14px; color: #707372; text-transform: uppercase; position: relative; padding-bottom: 22px; margin-bottom: 15px; } .article--letter .article__entry h6:after { content: ''; width: 38px; height: 3px; background: #c8102e; position: absolute; left: 0; bottom: 0; } .article--letter .article__entry p { line-height: 1.75; margin-bottom: 20px; } .article--letter .article__entry p + p:last-child { margin-top: -20px; } .article--letter .article__entry ul a, .article--letter .article__entry ol a { text-decoration: underline; color: #0099cc; } .article--letter .article__entry ul a:hover, .article--letter .article__entry ol a:hover { text-decoration: none; } .article--letter .article__entry ul { list-style: none; margin: 21px 0 20px; padding: 0; } .article--letter .article__entry ul li { padding-left: 15px; position: relative; line-height: 1.75; } .article--letter .article__entry ul li:before { content: ''; width: 2px; height: 2px; background: #54585a; border-radius: 5px; position: absolute; left: 9px; top: 14px; } .article--letter .article__entry ul li ~ li { margin-top: 20px; } .article--letter .article__entry ol { list-style: none; margin: 19px 0; counter-reset: list; } .article--letter .article__entry ol li { position: relative; line-height: 1.75; padding-left: 17px; } .article--letter .article__entry ol li:before { content: counter(list) '.'; counter-increment: list; position: absolute; left: 0; top: 0; } .article--letter .article__entry ol li ~ li { margin-top: 19px; } .article--letter .article__entry img { max-width: 100%; height: auto; margin: 12px 0 8px; } .article--letter .article__share { border: 0; } .article--letter .share { padding: 10px 0 0; } /* Tablet Portrait */ @media (max-width: 1023px) { .article--letter .article__entry { padding: 30px; } } /* Mobile */ @media (max-width: 767px) { .article--letter .article__share { margin: 20px 0; padding-left: 25px; padding-right: 25px; } } /* ------------------------------------------------------------ *\ Banner \* ------------------------------------------------------------ */ .banner { height: 415px; position: relative; z-index: 1; } .banner .banner__image { width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; left: 0; top: 0; z-index: 1; } .banner .banner__content { width: 100%; padding: 20px 0 80px; text-align: center; position: absolute; left: 0; bottom: 0; z-index: 5; } .banner .banner__content:before { content: ''; width: 100%; height: 100%; opacity: .75; position: absolute; left: 0; top: 0; z-index: -1; background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 19%,rgba(255,255,255,1) 81%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); } .banner .banner__content p { margin: 0; font-weight: 400; font-size: 20px; line-height: 1.4; color: #262626; letter-spacing: .01em; } .banner .banner__content p strong { display: block; } /* Tablet Portrait */ @media (max-width: 1023px) { .banner { height: 400px; } .banner .banner__content { padding: 17px 0 94px; } .banner .banner__content p { font-size: 16px; line-height: 1.75; } } /* Mobile */ @media (max-width: 767px) { .banner { height: 280px; } .banner .banner__content { padding: 10px 0 25px; } .banner .banner__content p { font-size: 15px; line-height: 1.47; } .banner .banner__content p strong { display: inline; } } /* ------------------------------------------------------------ *\ Breadcrumbs \* ------------------------------------------------------------ */ .breadcrumbs { background: #496b80; border-bottom: 1px solid rgba(255, 255, 255, 0.2); color: #fff; padding: 19px 0; } .breadcrumbs ul { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; list-style: none; margin: 0; padding: 0 8px; flex-wrap: wrap; } .breadcrumbs li:after { content: '/'; margin-right: 5px; } .breadcrumbs a, .breadcrumbs li:after { font-family: 'futura-pt', sans-serif; font-weight: 300; font-size: 15px; } .breadcrumbs li:last-child:after { content: ''; display: none; } .breadcrumbs a:hover { text-decoration: underline; } .breadcrumbs .breadcrumb-cta { float: right; margin-top: -10px; } .breadcrumbs .breadcrumb-cta a { border-radius: 4px; border: 1px solid rgba(255, 255, 255, .7); font-weight: 500; font-size: 18px; padding: 0 15px; } .breadcrumbs .breadcrumb-cta a { text-decoration: none; } .breadcrumbs .breadcrumb-cta a.btn--outline { border-color: rgba(255,255,255,.5); color: #fff; } @media(max-height: 679px) and (min-width: 1025px) { .breadcrumbs { padding: 14px 0 15px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .breadcrumbs { padding: 14px 0; } .breadcrumbs ul { -ms-flex-flow: row wrap; flex-flow: row wrap; } .breadcrumbs a, .breadcrumbs li:after { font-size: 14px; } } /* Mobile */ @media (max-width: 767px) { .breadcrumbs { position: relative; padding: 0; border: 0; background-color: #4f758b; overflow: visible; z-index: 9; } .breadcrumbs .breadcrumbs__inner { display: none; } .breadcrumbs .breadcrumb-cta { float: none; margin-top: 0; padding: 8px 0 0; text-align: right; margin-bottom: -20px; } } /* ------------------------------------------------------------ *\ Button \* ------------------------------------------------------------ */ .btn { height: 39px; padding: 0 30px; display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; text-decoration: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: 'futura-pt', sans-serif; font-weight: 500; font-size: 18px; color: #fff; border: 0; border-radius: 100px; line-height: 37px; } /* Button Block */ .btn--block { display: block; padding-left: 0; padding-right: 0; } .btn--red, .btn--blue, .btn--grey { transition: background .2s ease; } /* ally State Quality Solutions #237 */ .btn--red { background: rgb(200,16,46); background: linear-gradient(to right, rgba(200,16,46,1) 0%, rgba(160,13,37,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8102e', endColorstr='#a00d25',GradientType=1 ); box-shadow: inset 0 0 0 #c8102e; transition: box-shadow .2s ease; } .btn--red:hover { box-shadow: inset 0 0 500px #c8102e; } /* a11y Education Training #239: Add contrast */ .btn--blue { background: rgb(0, 102, 153, 1); /* Darker blue for better contrast with white text */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0096e6', endColorstr='#007bae', GradientType=1 ); } /* a11y Education Training #239: Add contrast */ .btn--blue:hover { background: rgb(0, 92, 143); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007acc', endColorstr='#007acc',GradientType=1 ); } .btn--grey { background: rgb(102,150,179); background: linear-gradient(to right, rgba(102,150,179,1) 0%,rgba(79,117,139,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6696b3', endColorstr='#4f758b',GradientType=1 ); } .btn--grey:hover { background: rgb(102,150,179); background: linear-gradient(to right, rgba(102,150,179,1) 0%,rgba(102,150,179,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6696b3', endColorstr='#6696b3',GradientType=1 ); } .btn.btn--outline { color: #6696b3; border: 1px solid #6696b3; transition: background .2s ease, color .2s ease; } .btn.btn--outline:hover { background-color: #6696b3; color: #fff; } .btn.btn--outline .zmdi { margin-right: 5px; font-size: .9em; } .btn--link { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: #262626; text-transform: uppercase; transition: color .2s ease; padding: 0; } .btn--link .fa, .btn--link .zmdi { font-weight: 400; font-size: 16px; color: #0099cc; position: relative; top: 1px; margin-left: 10px; } .btn--link:hover { color: #0099cc; } .btn-toggle-search { width: 86px; height: 80px; background-color: transparent; font-size: 36px; color: #4f758b; text-align: center; line-height: 80px; position: absolute; right: -25px; top: -8px; transition: background .2s ease, color .2s ease; } .btn-toggle-search .zmdi-close { display: none; } .btn-toggle-search.active { background: #0099cc; color: #fff; } .btn-toggle-search.active .zmdi-close { display: inline-block; } .btn-toggle-search.active .zmdi-search { display: none; } /* Tablet Portrait */ @media (max-width: 1023px) { .btn--link { font-size: 13px; } } /* Mobile */ @media (max-width: 767px) { .btn-toggle-search { right: -30px; height: 78px; } .btn--link { font-size: 13px; } } /* ------------------------------------------------------------ *\ Card \* ------------------------------------------------------------ */ .card .card__delete { display: inline-block; font-family: 'futura-pt', sans-serif; font-weight: 300; font-size: 12px; color: #4f758b; text-transform: uppercase; transition: color .2s ease; } .card .card__delete:hover { color: #0099cc; } .card .card__delete .zmdi { font-weight: 400; font-size: 12px; color: #0099cc; position: relative; top: 1px; margin-right: 11px; } /* ------------------------------------------------------------ *\ Card Post \* ------------------------------------------------------------ */ .card--post { display: -ms-flexbox; display: flex; height: 100%; box-shadow: 0 0 8px rgba(84, 88, 90, .15); background: #fff; } .card--post a { text-decoration: none !important; color: inherit !important; width: 100%; } .card--post .card__image { padding-bottom: 55%; background-repeat: no-repeat; background-position: center; background-size: cover; } .card--post .card__content { padding: 20px 50px 28px 22px; } .card--post .card__date { display: flex; gap: 5px; align-items: center; } .card--post .card__content p { font-family: 'Lato', sans-serif; font-weight: 400; font-size: 12px; color: #707372; text-transform: uppercase; margin: 0; } .card--post .card__content h6 { margin: 0; line-height: 1.2; color: #262626; transition: color .2s ease; font-weight: 700; } .card--post .card__content h6 .zmdi { font-size: 16px; color: #0099cc; margin-left: 5px; } .card--post:hover .card__content h6 { color: #0099cc; } /* Small Desktop */ @media (max-width: 1169px) { .card--post .card__content { padding: 20px 30px 28px 22px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .card--post .card__image { padding-bottom: 59%; } .card--post .card__content { padding: 19px 20px 20px 15px; } .card--post .card__content p { margin-bottom: 4px; } } /* ------------------------------------------------------------ *\ Card Image Text \* ------------------------------------------------------------ */ .card--image-text { height: 100%; display: -ms-flexbox; display: flex; box-shadow: 0 0 8px rgba(84, 88, 90, .25); position: relative; } .card--image-text .card__image { -ms-flex: 0 0 47.2%; flex: 0 0 47.2%; max-width: 47.2%; background-repeat: no-repeat; background-position: center; background-size: cover; } .card--image-text .card__content { -ms-flex: 0 0 52.8%; flex: 0 0 52.8%; max-width: 52.8%; padding: 31px 30px 55px; background: #fff; } .card--image-text .card__content p { line-height: 1.4; } .card--image-text .card__content .btn { width: 47.2%; height: auto; padding: 0 30px; text-align: left; position: absolute; left: 0; bottom: 34px; letter-spacing: -.02em; line-height: 1.3; } .card--image-text .card__image + .card__content .btn { left: auto; right: 0; padding-left: 0; } /* Tablet Portrait */ @media (max-width: 1023px) { .card--image-text .card__content { padding: 30px 30px 59px; } .card--image-text .card__content .btn { width: 52.8%; bottom: 27px; padding-left: 109px; } .card--image-text .card__image + .card__content { padding: 33px 110px 79px 41px; } .card--image-text .card__image + .card__content .btn { padding-left: 46px; bottom: 48px; } } /* Menu Heading Styles */ .nav--primary .sub-menu h2 { font-size: 16px; margin: 0 0 0.5em; font-weight: 700; line-height: inherit; color: inherit; padding: 0; background-color: #f2f2f2; } .nav--primary .sub-menu h2 + ul { margin-top: 0; } /* Mobile */ @media (max-width: 767px) { .nav--primary .sub-menu h2 { font-size: 18px; margin-bottom: 10px; } } /* Preserve existing strong styles for backward compatibility */ .nav--primary .sub-menu strong { font-weight: 700; } /* Mobile */ @media (max-width: 767px) { .card--image-text { -ms-flex-flow: row wrap; flex-flow: row wrap; } .card--image-text .card__content:first-child { padding: 30px 43px 16px 30px; } .card--image-text .card__content:first-child p { margin-bottom: 15px; } .card--image-text .card__content:first-child .btn { width: auto; position: static; padding: 0; font-size: 12px; } .card--image-text .card__content + .card__image { height: 220px; } .card--image-text .card__image + .card__content { padding: 26px 8px 9px 21px; } .card--image-text .card__image + .card__content p { font-size: 13px; line-height: 1.4; } .card--image-text .card__image + .card__content .btn { width: auto; position: static; padding: 0; font-size: 12px; } } /* ------------------------------------------------------------ *\ Card Text \* ------------------------------------------------------------ */ .card--text { height: 100%; background: #fff; box-shadow: 0 0 8px rgba(84, 88, 90, .25); position: relative; padding: 31px 36px; } .card--text .card__head { margin-bottom: 10px; } .card--text .card__head h2 { font-weight: 700; font-size: 42px; line-height: 1.0; color: #262626; text-transform: uppercase; padding-bottom: 15px; margin: 0 0 21px; position: relative; } .card--text .card__head h2:after { content: ''; width: 53px; height: 5px; background: #c8102e; position: absolute; left: 0; bottom: 0; } .card--text .card__body p { margin: 0; line-height: 1.4; } .card--text .card__body p a, .card--image-text p a { text-decoration: none; font-weight: bold; } .card--text .card__body p a:hover, .card--image-text p a:hover { text-decoration: underline; } .card--text .card__body p strong { color: #0099cc; } /* Tablet Portrait */ @media (max-width: 1023px) { .card--text { padding: 30px 32px; } .card--text .card__body { width: 80%; } .card--text .card__body p { font-size: 18px; line-height: 1.33; } } /* Mobile */ @media (max-width: 767px) { .card--text { padding: 15px 15px 12px 15px; } .card--text .card__head { margin-bottom: 12px; } .card--text .card__head h2 { font-size: 22px; margin-bottom: 0; } .card--text .card__head h2:after { width: 25px; height: 3px; } .card--text .card__body { width: 100%; } .card--text .card__body p { font-size: 14px; } } /* ------------------------------------------------------------ *\ Card Overview \* ------------------------------------------------------------ */ .card--overview { display: block; height: 100%; background: #fff; box-shadow: 0 0 8px rgba(84, 88, 90, .15); border-radius: 4px; padding: 22px 20px 18px; transition: background .2s ease; } .card--overview h4, .card--overview p { transition: color .2s ease; } .card--overview h4 { color: #0099cc; line-height: 1.1; margin: 0 0 12px; padding-bottom: 13px; border-bottom: 1px solid #dce3e8; } .card--overview p { margin: 0; font-size: 14px; line-height: 1.45; } .card--overview:hover { background: #0099cc; } .card--overview:hover h3, .card--overview:hover p { color: #fff; } /* ------------------------------------------------------------ *\ Card Process \* ------------------------------------------------------------ */ .card--process { min-height: 240px; padding: 17px 14px 34px; background: #fff; border-radius: 4px; box-shadow: 0 0 8px rgba(84, 88, 90, .15); position: relative; margin: 0; transition: max-height .2s ease, margin .2s ease, background .2s ease; will-change: max-height, margin, background; z-index: 2; } .card--process p, .card--process li { font-size: 14px; line-height: 1.43; padding: 0 5px; transition: color .2s ease; } .card--process p { margin-bottom: 10px; } .card--process p a, .card--process li a { color: #54585a; text-decoration: none; transition: color .2s ease; } .card--process .card__body h4, .card--process .card__body h3 { font-size: 20px; line-height: 1.1; color: #333; position: relative; transition: color .2s ease, border-color .2s ease; } .card--process .card__number { width: 30px; height: 30px; background: #0099cc; border-radius: 50%; font-family: 'futura-pt', sans-serif; font-weight: 500; font-size: 20px; color: #fff; text-align: center; line-height: 28px; flex-shrink: 0; margin: 15px 0; } .card__header-wrapper { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; border-bottom: 1px solid #dce3e8; } /* a11y #231: add display: none to card__expandable */ .card--process .card__expandable { margin: 10px 0 20px; max-height: 0; overflow: hidden; transition: max-height .2s ease; display: none; } .card--process .card__actions { position: absolute; left: 20px; bottom: 20px; } .card--process .card__toggle { font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 600; font-size: 12px; color: #333; text-transform: uppercase; transition: color .2s ease; } .card--process .card__toggle:hover { color: #0099cc; } .card--process .card__toggle i { font-weight: 400; font-size: 16px; color: #0099cc; margin-left: 10px; position: relative; top: 1px; transition: color .2s ease; } .card--process .card__toggle .zmdi-close { display: none; } .card--process.active .card__toggle .zmdi-plus { display: none; } .card--process.active .card__toggle .zmdi-close { display: inline-block; } .card--process.active { max-height: 760px; height: auto !important; padding: 20px 17px 46px; margin: -17px -20px 0; background: #405f70; z-index: 10; } .card--process.active p, .card--process.active p a, .card--process.active li, .card--process.active li a { color: #fff; } .card--process.active .card__body h4, .card--process.active .card__body h3 { font-size: 24px; color: #fff; border-bottom-color: rgba(220, 227, 232, .3); } /* a11y #231: add display: block to card__expandable */ .card--process.active .card__expandable { max-height: 500px; display: block; } .card--process.active .card__toggle, .card--process.active .card__toggle i { color: #fff; margin-left: 7px; } .card--process.active .card__actions { position: relative; left: 0; bottom: 0; } /* Tablet Portrait */ @media (max-width: 1023px) { .card--process .card__body h4, .card--process .card__body h3 { font-size: 18px; } } /* Mobile */ @media (max-width: 767px) { .card--process .card__body h4, .card--process .card__body h3 { padding-bottom: 20px; } } /* ------------------------------------------------------------ *\ Card Video \* ------------------------------------------------------------ */ .card--video { height: 100%; background: #fff; box-shadow: 0 0 8px rgba(84, 88, 90, .15); border: 1px solid #dce3e8; border-radius: 4px; position: relative; cursor: pointer; overflow: hidden; } .card--video .card__media { padding-bottom: 56.725%; background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; border-radius: 4px; overflow: hidden; margin: -1px; } .card--video .card__media:before { content: ''; width: 100%; height: 100%; background: #0099cc; position: absolute; left: 0; top: 0; z-index: 5; } .card--video .card__media .zmdi { font-size: 60px; color: #fff; position: absolute; left: 50%; top: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 10; } .card--video .card__media:before, .card--video .card__media .zmdi { opacity: 0; transition: opacity .2s ease; } .card--video .card__progress { padding: 0 13px 0 8px; background: #fff; font-size: 12px; line-height: 20px; position: absolute; right: 0; bottom: 0; z-index: 5; } .card--video .card__progress .fa { font-size: 10px; color: #0099cc; margin-right: 5px; } .card--video .card__content { padding: 21px 20px 34px; } .card--video .card__content h4 { color: #333; line-height: 1.1; margin-bottom: 15px; transition: color .2s ease; } .card--video .card__content .meta { margin: 0; font-size: 14px; color: #707372; padding: 0 20px; position: absolute; left: 0; bottom: 13px; } .card--video:hover .card__media:before { opacity: .5; } .card--video:hover .card__media .zmdi { opacity: 1; } .card--video:hover .card__content h4 { color: #0099cc; } /* ------------------------------------------------------------ *\ Card Notification \* ------------------------------------------------------------ */ .card--notification { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; padding: 16px 20px 20px 26px; background: #fff; box-shadow: 0 2px 4px rgba(84, 88, 90, .15); border: 1px solid #dce3e8; } .card--notification .card__content p { padding-top: 3px; margin-bottom: 7px; color: #707372; } .card--notification .card__content > span { display: block; font-family: 'futura-pt', sans-serif; font-weight: 300; font-size: 14px; color: #9ea2a2; } .card--notification .card__content > span .zmdi { font-weight: 400; font-size: 13px; position: relative; top: 1px; margin-right: 3px; } .card--notification.unread { border: 1px solid #0099cc; border-left: 5px solid #4f758b; position: relative; border-left-color: #4f758b; } /* Mobile */ @media (max-width: 767px) { .card--notification .card__content { -ms-flex: 0 0 calc(100% - 80px); flex: 0 0 calc(100% - 80px); } } /* ------------------------------------------------------------ *\ Card Saved \* ------------------------------------------------------------ */ .card--saved { padding-right: 100px; position: relative; } .card--saved p { margin: 0; font-family: 'futura-pt', sans-serif; font-weight: 300; font-size: 14px; color: #9ea2a2; transition: opacity .2s ease; letter-spacing: .015em; } .card--saved p:hover { opacity: .6; } .card--saved .card__content a { text-decoration: none; color: #9ea2a2; } .card--saved .card__content a:hover p { opacity: .6; } .card--saved .card__content h6 { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 16px; margin: 0 0 3px; color: #0099cc; transition: color .2s ease; } .card--saved .card__content a:hover h6 { color: #4f758b; } .card--saved .card__actions { position: absolute; right: 17px; top: -3px; } /* Mobile Portrait */ @media (max-width: 374px) { .card--saved .card__actions { right: 0; } } /* ------------------------------------------------------------ *\ Card Contact \* ------------------------------------------------------------ */ .card--contact { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; height: 154px; background: #f2f2f0; } .card--contact .card__avatar { -ms-flex: 0 0 130px; flex: 0 0 130px; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; } .card--contact .card__content { -ms-flex: 0 0 calc(100% - 130px); flex: 0 0 calc(100% - 130px); max-width: calc(100% - 130px); padding-left: 32px; padding-top: 26px; } .card--contact .card__content h5 { font-family: 'Lato', sans-serif; font-weight: 700; color: #54585a; margin-bottom: 12px; position: relative; padding-bottom: 15px; } .card--contact .card__content h5:after { content: ''; width: 34px; height: 3px; background: #9ea2a2; position: absolute; left: 0; bottom: 0; } .card--contact .card__content .email { margin: 0 0 7px; } .card--contact .card__content .email a { font-size: 16px; color: #4f758b; text-decoration: none; } .card--contact .card__content .phone { margin: 0; } .card--contact .card__content .phone a { font-size: 16px; color: #54585a; } /* Mobile Portrait */ @media (max-width: 374px) { .card--contact .card__avatar { -ms-flex: 0 0 120px; flex: 0 0 120px; } .card--contact .card__content { -ms-flex: calc(100% - 120px); flex: calc(100% - 120px); max-width: calc(100% - 120px); padding: 20px; } } /* ------------------------------------------------------------ *\ Card White Paper \* ------------------------------------------------------------ */ .card--white-paper { padding: 30px 30px 16px; border: 1px solid #dce3e8; background: #fff; } .card--white-paper .card__meta { margin-bottom: 5px; } .card--white-paper .card__meta p { margin: 0; font-size: 14px; color: #707372; } .card--white-paper .card__meta p span { font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 13px; color: #c8102e; margin-right: 6px; text-transform: uppercase; } .card--white-paper .card__content h3 { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 24px; line-height: 1.17; margin: 0 0 4px; } .card--white-paper .card__content h3 a { display: block; color: #333; transition: color .2s ease; } .card--white-paper .card__content h3 a:hover { color: #0099cc; } .card--white-paper .card__content p { line-height: 1.38; margin-bottom: 14px; } .card--white-paper .card__content .btn { font-family: 'Open Sans', sans-serif; font-size: 13px; margin-left: 3px; } /* ------------------------------------------------------------ *\ Card Solution \* ------------------------------------------------------------ */ .card--solution { display: block; height: 100%; padding: 20px 25px 50px; background: #fff; box-shadow: 0 0 8px rgba(84, 88, 90, .15); border-radius: 4px; text-align: center; position: relative; transition: box-shadow .2s ease; text-decoration: none !important; } .card--solution:hover { box-shadow: 0 0 16px rgba(84, 88, 90, .35); } .card--solution h4 { font-size: 22px; line-height: 1.18; color: #333; margin: 0; } .card--solution p { width: 100%; padding: 0 25px; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 13px; color: #9ea2a2; text-transform: uppercase; position: absolute; position: absolute; left: 0; bottom: 10px; } /* ------------------------------------------------------------ *\ CTA Block \* ------------------------------------------------------------ */ .cta--block .cta__inner { height: 100%; display: -ms-flexbox; display: flex; padding: 20px 20px; border: 1px solid transparent; border-radius: 4px; position: relative; transition: border-color .2s ease; } .cta--block .cta__inner:hover { border-color: #dce3e8; } .cta--block .cta__inner:hover .cta__content .btn { color: #0099cc; } .cta--block .cta__icon { -ms-flex: 0 0 79px; flex: 0 0 79px; } .cta--block .cta__content { padding-bottom: 40px; } .cta--block .cta__content h5 { font-family: 'Lato', sans-serif; font-weight: 700; color: #262626; margin: 0 0 5px; } .cta--block .cta__content h5 sup { font-size: 12px; } .cta--block .cta__content p { font-size: 14px; margin: 0; } .cta--block .cta__content p ~ p { margin-top: 10px; } .cta--block .cta__content .btn { height: auto; text-align: left; position: absolute; left: 99px; right: 20px; bottom: 20px; line-height: 1.3; } /* Tablet Portrait */ @media (max-width: 1023px) { .cta--block a { display: block; padding: 50px 14px 31px; position: relative; } .cta--block .cta__icon { position: absolute; left: 14px; top: 0; } .cta--block .cta__icon img { width: 42px; height: auto; } .cta--block .cta__content .btn { right: 0; left: 12px; } } /* Mobile */ @media (max-width: 767px) { .cta--block a { padding: 50px 0 31px 14px; } .cta--block .cta__content .btn { letter-spacing: -.05em; } } /* ------------------------------------------------------------ *\ CTA Contact \* ------------------------------------------------------------ */ .cta--contact { display: -ms-flexbox; display: flex; width: 400px; -ms-flex-align: center; align-items: center; padding: 17px 30px 15px; background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 0 14px rgba(84, 88, 90, .35); border-radius: 8px; text-decoration: none; transition: background-color .2s ease; } .cta--contact:hover { background: #fff; } .cta--contact .cta__icon { -ms-flex: 0 0 100px; flex: 0 0 100px; height: 100px; position: relative; border-radius: 50%; background: rgb(255,25,64); background: linear-gradient(to right, rgba(255,25,64,1) 0%,rgba(200,16,46,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1940', endColorstr='#c8102e',GradientType=1 ); box-shadow: inset 0 0 0 #ff1940; transition: box-shadow .2s ease; } .cta--contact:hover .cta__icon { box-shadow: inset 0 0 500px #ff1940; } .cta--contact .cta__icon svg { fill: #fff; position: absolute; left: 50%; top: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .cta--contact .cta__body { padding-left: 20px; } .cta--contact .cta__body strong { display: block; font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 12px; text-transform: uppercase; color: #c8102e; margin: 0 0 5px; } /* a11y #56: Replace h3 and h5 with .title and .subtitle */ .cta--contact .cta__body .title { font-weight: 600; color: #333; margin: 0; font-size: 26px; font-family: 'futura-pt', sans-serif; } .cta--contact .cta__body .subtitle { font-weight: 300; margin: 0; color: #333; font-size: 18px; font-family: 'futura-pt', sans-serif; } /* Tablet Portrait */ @media (max-width: 1023px) { .cta--contact { width: 342px; padding: 17px 25px 17px; } .cta--contact .cta__icon { -ms-flex: 0 0 87px; flex: 0 0 87px; height: 87px; } .cta--contact .cta__icon svg { -ms-transform: translate(-50%, -50%) scale(.85); transform: translate(-50%, -50%) scale(.85); } .cta--contact .cta__body { padding-left: 16px; padding-top: 8px; } .cta--contact .cta__body strong { margin: 0; } } /* Mobile Portrait */ @media (max-width: 374px) { .cta--contact { width: 100%; padding: 15px; margin-left: auto; margin-right: auto; } .cta--contact .cta__body h3 { font-size: 21px; } } /* ------------------------------------------------------------ *\ Direction Links \* ------------------------------------------------------------ */ .direction-links { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; font-size: 12px; color: #4a4a4a; margin-top: 10px; } .direction-links ul { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; list-style: none; margin: 0 0 0 4px !important; padding: 0 !important; } .direction-links ul a { display: block; color: #0099cc; text-decoration: underline; line-height: 1; } .direction-links ul a:hover { text-decoration: none; } .direction-links ul li ~ li { margin-left: 5px; padding-left: 5px; border-left: 1px solid #4a4a4a; } .direction-links ul a i { font-size: 12px; color: #707372; margin-left: 5px; position: relative; top: 1px; } @media(max-width: 1279px) { .direction-links { display: block; } .direction-links span { display: block; padding-bottom: 5px; } } /* Small Desktop */ @media (max-width: 1169px) { .direction-links ul { margin: 0; } .direction-links ul a i { margin-left: 3px; } } /* Mobile */ @media (max-width: 767px) { .direction-links { white-space: nowrap; } .direction-links span { white-space: nowrap; margin-right: 5px; float: left; } .direction-links ul { -ms-flex-flow: row wrap; flex-flow: row wrap; } .direction-links ul li { margin-bottom: 5px; } } /* ------------------------------------------------------------ *\ Downloads \* ------------------------------------------------------------ */ .downloads { background: #f2f2f0; padding: 31px 30px 25px; margin-bottom: 75px; } .downloads .downloads__head { margin-bottom: 17px; } .downloads .downloads__head h4 { font-size: 20px; color: #333; text-transform: uppercase; margin: 0; } /* ------------------------------------------------------------ *\ Event List \* ------------------------------------------------------------ */ .event-list ~ .event-list { margin-top: 40px; } .event-list .event-list__head { background: #f2f2f0; padding: 10px 20px; margin-bottom: 30px; } .event-list .event-list__head h3 { font-weight: 500; font-size: 24px; color: #c8102e; margin: 0; } .event-list__item { position: relative; padding-left: 135px; padding-bottom: 20px; border-bottom: 1px solid rgba(79, 117, 139, .2); } .event-list__item ~ .event-list__item { margin-top: 30px; } .event-list__item .date { width: 80px; height: 80px; padding-top: 15px; border: 1px solid #dce3e8; box-shadow: 0 0 8px rgba(84, 88, 90, .15); text-align: center; position: absolute; left: 5px; top: 0; } .event-list__item .date h4 { font-weight: 300; color: #54585a; text-transform: uppercase; margin: 0; } .event-list__item .date h6 { font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 13px; color: #c8102e; margin: 0; text-transform: uppercase; } .event-list__item .meta { font-family: 'futura-pt', sans-serif; font-size: 14px; text-transform: uppercase; color: #707372; letter-spacing: .025em; line-height: 1; margin-bottom: 8px; } .event-list__item .meta strong { font-weight: 600; position: relative; } .event-list__item .meta strong:before { content: '·'; font-weight: 300; margin: 0 10px; } .event-list__item > h3 { font-size: 28px; color: #0099cc; margin-bottom: 9px; } .event-list__item > h3 a:hover { text-decoration: underline; } .event-list__item > p { min-height: 56px; line-height: 1.75; margin-bottom: 23px; } /* Mobile */ @media (max-width: 767px) { .event-list__item { padding-left: 72px; border-bottom: 2px solid rgba(79, 117, 139, .2); } .event-list__item > h3 { font-size: 24px; line-height: 1.17; margin-bottom: 5px; } .event-list__item > p { font-size: 16px; line-height: 1.63; } .event-list .event-list__head { margin-bottom: 33px; } .event-list .event-list__head h3 { font-size: 21px; } .event-list__item .date { left: -3px; width: 60px; height: 70px; padding-top: 13px; } .event-list__item .date h4 { font-size: 18px; } .event-list__item .date h6 { font-size: 12px; } } /* ------------------------------------------------------------ *\ Event Details \* ------------------------------------------------------------ */ .event-details { -ms-flex: 0 0 58%; flex: 0 0 58%; padding-top: 22px; } .event-details .date { -ms-flex: 0 0 80px; flex: 0 0 80px; height: 80px; padding-top: 15px; border: 1px solid #dce3e8; box-shadow: 0 0 8px rgba(84, 88, 90, .15); text-align: center; } .event-details .date h4 { font-weight: 300; color: #54585a; text-transform: uppercase; margin: 0; } .event-details .date h6 { font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 13px; color: #c8102e; margin: 0; text-transform: uppercase; } .event-details .title { padding-left: 20px; padding-bottom: 10px; } .event-details .title h6 { font-family: 'Lato', sans-serif; font-weight: 700; color: #4a4a4a; margin-bottom: 5px; } .event-details .title p { font-weight: 400; color: #707372; margin: 0; text-transform: uppercase; } .event-details .event-details__head { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; margin-bottom: 35px; } .event-details .event-details__content h6 { color: #c8102e; text-transform: uppercase; margin: 0 0 12px; } .event-details .event-details__content h6 ~ h6 { margin-top: 36px; } .event-details .event-details__content p { line-height: 1.75; margin-bottom: 20px; } .event-details .event-details__content p a { transition: opacity .2s ease; } .event-details .event-details__content p a:hover { opacity: .65; text-decoration: underline; } .event-details .event-details__content ul { list-style: none; margin: 20px 0; padding: 0 0 0 12px; } .event-details .event-details__content ul a { color: #0099cc; text-decoration: underline; transition: opacity .2s ease; } .event-details .event-details__content ul a:hover { opacity: .65; } .event-details .event-details__content ul li { padding-left: 24px; position: relative; } .event-details .event-details__content ul li:before { content: ''; width: 4px; height: 4px; background: #54585a; border-radius: 20px; position: absolute; left: 0; top: 8px; } .event-details .event-details__content ul li ~ li { margin-top: 14px; } .event-details .event-details__content ol.event-types { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; list-style: none; margin: 19px 0; padding: 0 0 0 3px; } .event-details .event-details__content ol.event-types li { font-family: 'futura-pt', sans-serif; font-weight: 300; font-size: 15px; } .event-details .event-details__content ol.event-types li ~ li { margin-left: 26px; } .event-details .event-details__content ol.event-types i { display: inline-block; vertical-align: middle; font-weight: 400; font-size: 18px; color: #9ea2a2; position: relative; top: -1px; margin-right: 7px; } /* Mobile */ @media (max-width: 767px) { .event-details { -ms-flex: 0 0 100%; flex: 0 0 100%; padding: 0; } } /* ------------------------------------------------------------ *\ Event Join \* ------------------------------------------------------------ */ .event-join { -ms-flex: 0 0 35.7%; flex: 0 0 35.7%; max-width: 35.7%; margin-left: 6.2%; margin-top: 30px; box-shadow: 0 0 8px rgba(84, 88, 90, .15); background-color: #f2faff; border: 1px solid #dce3e8; border-top: 4px solid #c8102e; padding: 17px 27px 30px; } .event-join .event-join__body h3 { font-weight: 600; font-size: 24px; color: #4f758b; margin-bottom: 21px; } .event-join .event-join__body h6 { color: #c8102e; text-transform: uppercase; margin-bottom: 10px; } .event-join .event-join__body ul { list-style: none; margin: 0; padding: 0 0 0 3px; } .event-join .event-join__body ul li { font-weight: 400; font-size: 14px; line-height: 1.7; } .event-join .event-join__body ul li ~ li { margin-top: 21px; } .event-join .event-join__body ul strong { display: block; margin-bottom: 3px; } .event-join .event-join__body ul small { display: block; font-size: 12px; } .event-join .event-join__body ul a:not([href^="tel:"]) { display: block; color: #0099cc; text-decoration: underline; word-break: break-all; padding-right: 13px; transition: opacity .2s ease; } .event-join .event-join__body ul a:not([href^="tel:"]) .zmdi { position: relative; top: 1px; margin-left: 5px; } .event-join .event-join__body ul a:not([href^="tel:"]):hover { opacity: .65; } .event-join .event-join__actions { margin-top: 18px; border-top: 1px solid rgba(79, 117, 139, .2); text-align: center; padding-top: 14px; } .event-join .event-join__actions a { display: inline-block; font-family: 'futura-pt', sans-serif; font-weight: 400; font-size: 15px; color: #4f758b; transition: opacity .2s ease; } .event-join .event-join__actions a i { font-size: 18px; color: #0099cc; margin-right: 8px; position: relative; top: 2px; } .event-join .event-join__actions a:hover { opacity: .75; } /* Mobile */ @media (max-width: 767px) { .event-join { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin: 20px 0 0; } } /* ------------------------------------------------------------ *\ Event Meta \* ------------------------------------------------------------ */ .event-meta { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex: 0 0 43%; flex: 0 0 43%; margin-top: 30px; } .event-meta .date { -ms-flex: 0 0 80px; flex: 0 0 80px; height: 80px; padding-top: 15px; border: 1px solid #dce3e8; box-shadow: 0 0 8px rgba(84, 88, 90, .15); text-align: center; } .event-meta .date h4 { font-weight: 300; color: #54585a; text-transform: uppercase; margin: 0; } .event-meta .date h6 { font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 13px; color: #c8102e; margin: 0; text-transform: uppercase; } .event-meta .title { -ms-flex: 0 0 calc(100% - 80px); flex: 0 0 calc(100% - 80px); max-width: calc(100% - 80px); padding-left: 30px; } .event-meta .title h6 { font-family: 'Lato', sans-serif; font-weight: 700; color: #4a4a4a; margin-bottom: 5px; } .event-meta .title p { font-weight: 400; color: #707372; margin: 0; } .event-meta .list { -ms-flex: 0 0 100%; flex: 0 0 100%; padding-top: 31px; padding-left: 3px; } /* Tablet Portrait */ @media (max-width: 1023px) { .event-meta { -ms-flex: 0 0 50%; flex: 0 0 50%; } } /* Mobile */ @media (max-width: 767px) { .event-meta { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin: 0; } .event-meta .title { padding-left: 18px; padding-top: 3px; } .event-meta .title h6 { margin: 0; } .event-meta .list { padding: 23px 0 0 3px; } } /* ------------------------------------------------------------ *\ Event Register \* ------------------------------------------------------------ */ .event-register { -ms-flex: 0 0 35.8%; flex: 0 0 35.8%; margin-left: 9.2%; box-shadow: 0 0 8px rgba(84, 88, 90, .15); background-color: #f2faff; border: 1px solid #dce3e8; border-top: 4px solid #c8102e; padding: 21px 27px 24px; text-align: center; margin-top: 30px; } .event-register .btn { width: 100%; height: 45px; font-size: 20px; line-height: 45px; margin-bottom: 15px; } .event-register p { font-size: 14px; color: #4a4a4a; margin: 0; } .event-register .event-register__actions { padding-top: 15px; border-top: 1px solid rgba(79, 117, 139, .2); margin-top: 15px; } .event-register .event-register__actions a { display: inline-block; font-family: 'futura-pt', sans-serif; font-weight: 400; font-size: 15px; color: #4f758b; transition: color .2s ease; } .event-register .event-register__actions a i { font-size: 18px; color: #0099cc; margin-right: 8px; position: relative; top: 2px; } .event-register .event-register__actions a:hover { color: #0099cc; } /* Tablet Portrait */ @media (max-width: 1023px) { .event-register { -ms-flex: 0 0 40%; flex: 0 0 40%; margin-left: 10%; } } /* Mobile */ @media (max-width: 767px) { .event-register { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-left: 0; margin-bottom: 20px; } } /* ------------------------------------------------------------ *\ Event Map \* ------------------------------------------------------------ */ .event-map { width: 88%; border: 1px solid #dce3e8; box-shadow: 0 0 8px rgba(84, 88, 90, .15); background: #fff; } .event-map #gmap { height: 300px; } .event-map address { font-size: 14px; line-height: 1.86; color: #4a4a4a; } .event-map .col ~ .col { padding-left: 26px; } .event-map .event-map__content { padding: 30px 30px 33px; } .event-map .event-map__content h6 { color: #c8102e; text-transform: uppercase; margin: 0 0 12px; } .event-map .event-map__content p { font-size: 14px; line-height: 1.86; margin: 0; } .event-map .event-map__content p ~ p { margin-top: 20px; } .event-map .event-map__content .add { display: inline-block; font-family: 'futura-pt', sans-serif; font-weight: 400; font-size: 15px; color: #4f758b; margin-top: 2px; } .event-map .event-map__content .add i { font-size: 18px; color: #0099cc; margin-right: 10px; position: relative; top: 2px; } .event-map .event-map__content .list-stats { margin: 20px 0 0; } .event-map .event-map__content .list-stats li ~ li { margin-left: 40px; } .event-map .event-map__map { width: 100%; height: 300px; } .event-map .event-map__actions { background-color: #f2faff; text-align: center; padding: 30px 20px 28px; } .event-map .event-map__actions p { margin: 0; font-size: 14px; color: #4a4a4a; } .event-map .event-map__actions .btn { min-width: 240px; height: 45px; font-size: 20px; line-height: 45px; margin-bottom: 10px; } /* Small Desktop */ @media (max-width: 1169px) { .event-map .col ~ .col { padding-left: 15px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .event-map { width: 100%; } .event-map .event-map__content .col--1of2 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } /* Mobile */ @media (max-width: 767px) { .event-map { width: auto; margin: 30px -5px 10px; } .event-map .event-map__content { padding: 30px 30px 33px 25px; } .event-map .event-map__content .add { margin-bottom: 3px; } .event-map .event-map__content .col--1of2 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .event-map .event-map__content .col ~ .col { margin-top: 32px; } .event-map #gmap, .event-map .event-map__map { height: 134px; } } /* ------------------------------------------------------------ *\ Filter \* ------------------------------------------------------------ */ .filter { padding: 10px 0 10px 8.5%; background: #f2f2f0; } .filter .filter__inner { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; } /* Tablet Portrait */ @media (max-width: 1023px) { .filter { padding: 11px 0; } .filter .filter__inner { -ms-flex-align: end; -ms-grid-row-align: flex-end; align-items: flex-end; } } /* Mobile */ @media (max-width: 767px) { .filter { padding: 0; } .filter .filter__inner { display: block; overflow: hidden; max-height: 0; transition: max-height .2s ease, padding .2s ease; background: #e6e6e3; margin: 0 -25px; padding: 0 25px; } .filter .filter__head { padding: 16px 0; } .filter .filter__head h5 { font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 14px; text-transform: uppercase; color: #333; margin: 0; position: relative; padding-left: 28px; } .filter .filter__head h5 .icon { position: absolute; left: 0; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } .filter .filter__head h5 i { font-size: 18px; color: #0099cc; } .filter .filter__head h5 .zmdi-close { display: none; } .filter .list-filter { display: -ms-flexbox !important; display: flex !important; } .filter .filter__aside { padding: 21px 0; border-top: 1px solid #c7c9c7; border-bottom: 1px solid #c7c9c7; margin: 20px 0 15px; } .filter.expanded .filter__head h5 .zmdi-close { display: block; } .filter.expanded .filter__head h5 .zmdi-filter-list { display: none; } .filter.expanded .filter__inner { max-height: 600px; padding-top: 15px; padding-bottom: 10px; } } /* ------------------------------------------------------------ *\ Form Elements \* ------------------------------------------------------------ */ input::-webkit-input-placeholder { color: inherit; opacity: 1; } input:-ms-input-placeholder { color: inherit; opacity: 1; } input::placeholder { color: inherit; opacity: 1; } textarea::-webkit-input-placeholder { color: inherit; opacity: 1; } textarea:-ms-input-placeholder { color: inherit; opacity: 1; } textarea::placeholder { color: inherit; opacity: 1; } input:-webkit-autofill { -webkit-text-fill-color: inherit; -webkit-box-shadow: 0 0 0 1000px #fff inset; } .field { display: block; width: 100%; height: 46px; border: 1px solid #aaa; border-radius: 4px; background: #fff; color: #54585a; line-height: 44px; padding: 0 16px; font-size: 14px; } .field::-webkit-input-placeholder { color: #9ea2a2; } .field::-moz-placeholder { color: #9ea2a2; } .field:-moz-placeholder { color: #9ea2a2; } .field:-ms-input-placeholder { color: #9ea2a2; } .radio { position: relative; } .radio input { width: 0; height: 0; opacity: 0; visibility: hidden; position: absolute; left: -9999px; top: 0; } .radio label { display: block; font-size: 16px; color: #54585a; position: relative; padding-left: 36px; line-height: 1.13; } .radio label:before { content: ''; width: 16px; height: 16px; border: 1px solid #979797; border-radius: 50%; position: absolute; left: 0; top: 2px; z-index: 1; transition: border-color .2s ease; } .radio label:after { content: ''; width: 10px; height: 10px; background: #0099cc; border-radius: 50%; position: absolute; left: 3px; top: 5px; z-index: 2; opacity: 0; transition: opacity .2s ease; } .radio input:checked ~ label:before { border-color: #0099cc; } .radio input:checked ~ label:after { opacity: 1; } .radio--small label { font-size: 15px; line-height: 1.2; } .checkbox { position: relative; } .checkbox input { width: 0; height: 0; opacity: 0; position: absolute; left: -9999px; top: 0; } .checkbox label { display: block; position: relative; font-size: 13px; color: #54585a; padding-left: 30px; transition: color .2s ease; } .checkbox label:before { content: ''; width: 16px; height: 16px; background: #fff; border: 1px solid #aaa; border-radius: 2px; position: absolute; left: 0; top: 0; transition: border-color .2s ease; } .checkbox label:after { content: ''; width: 10px; height: 10px; background: #0099cc; position: absolute; left: 3px; top: 3px; opacity: 0; transition: opacity .2s ease; } .checkbox:hover label, .checkbox input:checked ~ label { color: #0099cc; } .checkbox input:checked ~ label:before { border-color: #0099cc; } .checkbox input:checked ~ label:after { opacity: 1; } /* Allyant Education Training #256: add outline to checkbox label */ .checkbox:focus label:before { outline: 0.1rem dashed #0099cc; outline-offset: 0.1rem; border-radius: 4px; } .checkbox-a11y { position: relative; font-size: 13px; } .checkbox-a11y label { font-size: 13px; display: block; padding-left: 24px; position: relative; color: #54585a; } .checkbox-a11y input[type='checkbox'] { position: absolute; left: 0; top: 2px;} /* Checkbox Colored */ .checkbox--colored { position: relative; } .checkbox--colored:before { content: ''; width: 10px; height: 10px; border-radius: 8px; position: absolute; left: 25px; top: 5px; } .checkbox--colored label { padding-left: 42px; } .checkbox--colored label:before { top: 5px; } .checkbox--colored label:after { top: 8px; } .checkbox--cyan:before { background: #00a9e0; } .checkbox--green:before { background: #67823a; } .checkbox--orange:before { background: #eeaf30; } .checkbox--brown:before { background: #a39382; } .checkbox--red:before { background: #c8102e; } .checkbox--teal:before { background: #707372; } /* Checkbox with icon */ .checkbox--with-icon label { padding-left: 60px; } .checkbox--with-icon label:before { top: 50%; margin-top: -8px; } .checkbox--with-icon label:after { top: 50%; margin-top: -5px; } .checkbox--with-icon > img { position: absolute; left: 38px; top: 12px; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-height: 22px; width: auto; } .checkbox--with-icon > i, .checkbox--with-icon > svg { position: absolute; left: 38px; top: 12px; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .checkbox--with-icon > i { font-size: 26px; color: #4f758b; } /* ------------------------------------------------------------ *\ Form \* ------------------------------------------------------------ */ .form {} /* ------------------------------------------------------------ *\ Form Newsletter \* ------------------------------------------------------------ */ .form--newsletter { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; padding: 33px 35px 36px 10px; } .form--newsletter .form__head { -ms-flex: 0 0 26.3%; flex: 0 0 26.3%; max-width: 26.3%; } .form--newsletter .form__head h3 { font-weight: 600; font-size: 24px; text-transform: uppercase; color: #262626; margin: 0; } .form--newsletter .form__head p { margin: 0; font-family: 'futura-pt', sans-serif; font-weight: 300; font-size: 16px; color: #c8102e; } .form--newsletter .form__body { -ms-flex: 0 0 73.7%; flex: 0 0 73.7%; max-width: 73.7%; } .form--newsletter .form__body table td { background: none !important; } .form--newsletter .form__body .newsletter-header { display: none; } .form--newsletter .form__body .newsletter-inputs { display: -ms-flexbox; display: flex; -ms-flex-align: center; justify-content: space-between; } .form--newsletter .form__body .newsletter-inputs label { display: none; } .form--newsletter .form__body .email-field { width: 60%;} .form--newsletter .form__body .newsletter-inputs input[type="email"] { width: 100%; height: 50px; border: none; background: #fff; font-size: 16px; color: #727272; padding: 0 13px; } .form--newsletter .form__body .newsletter-inputs .btn { height: 50px; border-radius: 4px; padding: 0 21px; margin-left: -5px; } .form--newsletter .form__body table tr:last-child td:last-child { width: 111px; } /* a11y #114: add label and required asterisk */ .widget-newsletter .form--newsletter { background: #0099cc url('/wp-content/themes/ncqa-org/css/images/temp/blue-pattern.jpg'); padding: 24px 20px; border-radius: 4px; } .widget-newsletter .form__head h3 { color: #fff; font-size: 28px; margin-bottom: 5px; letter-spacing: .5px; } .widget-newsletter .form__head p { color: #fff; font-size: 18px; margin-bottom: 20px; } .newsletter-form-group { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; gap: 10px; margin-top: 10px; } .newsletter-form-group input[type="text"] { -ms-flex: 1; flex: 1; padding: 10px; border: none; border-radius: 4px; font-size: 16px; } .btn--red { background: #e31837; color: #fff; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; transition: background-color .2s ease; } .btn--red:hover { background: #c8102e; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* Tablet Portrait */ @media (max-width: 1023px) { .form--newsletter { padding: 33px 16px 36px 20px; } .form--newsletter .form__head { -ms-flex: 0 0 31.5%; flex: 0 0 31.5%; max-width: 31.5%; } .form--newsletter .form__body { -ms-flex: 0 0 68.5%; flex: 0 0 68.5%; max-width: 68.5%; } /* .form--newsletter .form__body .btn { background: rgb(135,173,191); background: linear-gradient(to right, rgba(135,173,191,1) 0%,rgba(79,117,139,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87adbf', endColorstr='#4f758b',GradientType=1 ); } */ } /* Mobile */ @media (max-width: 767px) { .form--newsletter { display: block; padding: 27px 16px 26px 20px; } .form--newsletter .form__head { max-width: 100%; padding-left: 15px; margin-bottom: 17px; } .form--newsletter .form__body { max-width: 100%; } .form--newsletter .form__body .btn { padding: 0 14px; font-size: 16px; background: rgb(255,25,64); background: linear-gradient(to right, rgba(255,25,64,1) 0%,rgba(200,16,46,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1940', endColorstr='#c8102e',GradientType=1 ); } .form--newsletter .form__body input[type="text"] { font-size: 16px; } .form--newsletter .form__body table tr:last-child td:last-child { width: 96px; } } /* Mobile Portrait */ @media (max-width: 374px) { .form--newsletter .form__body input[type="text"] { font-size: 12px; } } /* ------------------------------------------------------------ *\ Form Filter \* ------------------------------------------------------------ */ .form--filter form { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } .form--filter .form__label { font-family: 'futura-pt', sans-serif; font-weight: 300; font-size: 16px; padding-right: 14px; } .form--filter .form__label ~ .form__label { margin-left: 31px; } .form--filter .form__controls ~ .form__controls { min-width: 187px; } /* a11y #235: add position: relative; bottom: 10px; to daterange-label */ #daterange-label { position: relative; bottom: 10px; } /* FAQs */ @media (min-width: 767px) { .page-template-page-program-faqs .filter__content { flex: 1 calc(100% - 260px); } .page-template-page-program-faqs .filter__aside { flex: 1 250px; } .page-template-page-program-faqs .filter__aside .form--search { width: 250px; } .page-template-page-program-faqs .filter__aside input#field-search { font-size: 13px !important; height: 40px; } .page-template-page-program-faqs .filter__aside .form__btn { top: 8px; } .page-template-page-program-faqs .form__controls .selectric { min-width: 120px; } } /* Tablet Portrait */ @media (max-width: 979px) { .form--filter form { -ms-flex-flow: row wrap; flex-flow: row wrap; } .form--filter .form__label { -ms-flex: 0 0 180px; flex: 0 0 180px; -ms-flex-order: 1; order: 1; } .form--filter .form__label br { display: none; } .form--filter .form__label ~ .form__label { margin-left: 20px; -ms-flex-order: 2; order: 2; } .form--filter .form__controls { -ms-flex: 0 0 180px; flex: 0 0 180px; width: 180px; -ms-flex-order: 3; order: 3; } .form--filter .form__controls ~ .form__controls { -ms-flex-order: 4; order: 4; margin-left: 20px; } } /* Mobile */ @media (max-width: 767px) { .form--filter form { display: block; } .form--filter .form__label { display: block; padding: 0 0 5px; } .form--filter .form__label ~ .form__label { margin-left: 0; margin-top: 20px; } .form--filter .form__controls, .form--filter .form__controls ~ .form__controls { width: 100%;} .form--filter .form__controls ~ .form__controls { margin-left: 0; } .form--filter .form__controls input { margin-top: 10px; } /* a11y #235: add display: flex; flex-direction: column; to form__controls */ body > div.wrapper > div > div > div.section-events.section-events--alt > div > div.section__sidebar > div > div > div.filter__body > div > div:nth-child(5) > div.accordion__body > div > form > div.form__controls { display: flex; flex-direction: column; } } /* Small Desktop */ @media (min-width: 767px) and (max-width: 1169px) { .page-template-page-program-faqs .form--filter .form__label ~ .form__label { margin-left: 20px; padding-right: 10px; } .page-template-page-program-faqs .filter__content { flex: 1 calc(100% - 190px); } .page-template-page-program-faqs .filter__aside { flex: 1 180px; } .page-template-page-program-faqs .filter__aside .form--search { width: 180px; } } @media (min-width: 768px) and (max-width: 840px) { .page-template-page-program-faqs .form--filter .form__label { display: none; } .page-template-page-program-faqs .form--filter .form__controls, .form--filter .form__controls~.form__controls, .page-template-page-program-faqs .form--filter .form__label { -ms-flex: 0 0 118px; flex: 0 0 118px; width: 118px; } .page-template-page-program-faqs .filter__aside { flex: 1 176px; } .page-template-page-program-faqs .filter__aside .form--search { width: 176px; } } /* ------------------------------------------------------------ *\ Form Search \* ------------------------------------------------------------ */ .form--search { width: 270px; position: relative; } .form--search .field { width: 100%; padding-right: 40px; } .form--search .form__label { display: none; } .form--search .form__btn { background: none; border: 0; font-size: 18px; color: #4f758b; position: absolute; right: 18px; top: 13px; } /* Small Desktop */ @media (max-width: 1169px) { .form--search .field { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* Tablet Portrait */ @media (max-width: 1023px) { .form--search { width: 208px; } } /* Mobile */ @media (max-width: 767px) { .form--search { width: 100%; } } /* ------------------------------------------------------------ *\ Form Search Large \* ------------------------------------------------------------ */ .form--search-large { width: 100%; padding: 0 8.5%; } .form--search-large .field { height: 58px; font-size: 22px; color: #54585a; padding-right: 60px; padding-left: 20px; } .form--search-large .form__controls { position: relative; } .form--search-large .form__label { display: block; font-family: 'futura-pt', sans-serif; font-weight: 500; font-size: 42px; margin: 0 0 8px; } .form--search-large .form__btn { font-size: 31px; color: #0099cc; right: 20px; top: 12px; } .form--search-large p { margin: 10px 0 0; font-weight: 300; } .form--search-large p em { font-weight: 700; } .form--search-large .field::-webkit-input-placeholder { color: #9ea2a2; } .form--search-large .field::-moz-placeholder { color: #9ea2a2; } .form--search-large .field:-moz-placeholder { color: #9ea2a2; } .form--search-large .field:-ms-input-placeholder { color: #9ea2a2; } /* Tablet Portrait */ @media (max-width: 1023px) { .form--search-large { padding: 0; } } /* Mobile */ @media (max-width: 767px) { .form--search-large .form__label { font-size: 36px; margin-bottom: 17px; } } /* ------------------------------------------------------------ *\ Form Login \* ------------------------------------------------------------ */ .form--login { max-width: 560px; padding: 33px 49px 30px; background: #fff; border: 1px solid #dce3e8; box-shadow: 0 0 8px rgba(84, 88, 90, .15); margin: 0 auto; } .form--login .form__label { display: block; margin-bottom: 4px; font-weight: 700; } .form--login .form__row ~ .form__row { margin-top: 20px; } .form--login .form__head { margin-bottom: 23px; } .form--login .form__head h2 { font-size: 38px; color: #4f758b; margin: 0 0 13px; } .form--login .form__head p { font-size: 14px; line-height: 1.86; margin: 0; } .form--login .form__actions { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; padding-top: 20px; } .form--login .form__actions .btn:not(.btn--link) { min-width: 197px; height: 50px; line-height: 50px; font-size: 22px; } .form--login .form__actions .btn--link { height: auto; line-height: 1; font-family: 'Lato', sans-serif; font-weight: 400; font-size: 14px; text-transform: none; color: #0099cc; text-decoration: underline; } .form--login .form__actions .btn--link:hover { text-decoration: none; } .form--login .form__foot { margin-top: 35px; padding-top: 30px; text-align: center; border-top: 1px solid #dce3e8; } .form--login .form__foot h6 { font-family: 'Lato', sans-serif; font-weight: 700; line-height: 1.5; color: #707372; margin-bottom: 3px; } .form--login .form__foot a { font-weight: 400; color: #0099cc; text-decoration: underline; } .form--login .form__foot a:hover { text-decoration: none; } /* Mobile */ @media (max-width: 767px) { .form--login { padding: 25px; } .form--login .form__head h2 { font-size: 28px; } .form--login .form__actions .btn:not(.btn--link) { height: 40px; min-width: 150px; font-size: 20px; line-height: 40px; } } /* ------------------------------------------------------------ *\ Form Email Settings \* ------------------------------------------------------------ */ .form--email-settings { max-width: 770px; background: #fff; margin: 0 auto; padding: 30px 40px; } .form--email-settings .list-radios { margin: 18px 0 21px; padding-left: 42px; } .form--email-settings .list-radios li ~ li { margin-top: 11px; } .form--email-settings .email { padding-left: 42px; padding-bottom: 10px; } .form--email-settings .email strong { display: block; font-size: 15px; margin-bottom: 6px; } .form--email-settings .email p { margin: 0; font-size: 15px; color: #9ea2a2; } .form--email-settings .email p a { color: #54585a; } .form--email-settings .email p small { font-size: 14px; color: #54585a; padding-left: 15px; } .form--email-settings .form__group { padding: 16px 0; border-bottom: 1px solid #dce3e8; } .form--email-settings .form__group:first-child { padding-top: 0; } .form--email-settings .form__group-body { transition: opacity .2s ease; } .form--email-settings .form__group-body.disabled { opacity: .5; pointer-events: none; } .form--email-settings .form__actions { padding-left: 42px; padding-top: 26px; } .form--email-settings .form__actions .btn--red { min-width: 200px; height: 45px; line-height: 45px; font-size: 20px; } /* Mobile */ @media (max-width: 767px) { .form--email-settings { padding: 20px; } .form--email-settings .email p small { padding-left: 0; } } /* Mobile Portrait */ @media (max-width: 374px) { .form--email-settings .list-radios, .form--email-settings .email { padding-left: 20px; } } /* ------------------------------------------------------------ *\ Form Refine \* ------------------------------------------------------------ */ .form--refine { -ms-flex: 0 0 100%; flex: 0 0 100%; } .form--refine .form__head { margin-bottom: 15px; } .form--refine .form__head h5 { color: #4f758b; margin: 0; } .form--refine .form__group { border-top: 1px solid #adced9; padding: 10px 0 32px; transition: padding .2sease; } .form--refine .form__group:last-child { border-bottom: 1px solid #adced9; } /* a11y #225: Convert divs and H6 to fieldset and legend */ .form--refine .form__group fieldset { border: none; margin: 0; padding: 0; } .form--refine .form__group legend { width: 100%; font-size: 14px; color: #333; text-transform: uppercase; padding: 0 40px 11px 0; position: relative; cursor: pointer; margin: 0; float: none; } .form--refine .form__group legend:after, .form--refine .form__group legend:before { content: ''; background: #0099cc; position: absolute; transition: opacity .2s ease; } .form--refine .form__group legend:after { width: 12px; height: 2px; right: 3px; top: 7px; } .form--refine .form__group legend:before { width: 2px; height: 12px; right: 8px; top: 2px; opacity: 0; } .form--refine .form__group-body { padding-left: 2px; display: none; } .form--refine .form__group.collapsed { padding: 10px 0 0; } .form--refine .collapsed legend:before { opacity: 1; } .form--refine .form__group ~ .form__group { padding-top: 18px; } /* ------------------------------------------------------------ *\ Form Download \* ------------------------------------------------------------ */ body .form--download { position: relative; } body .form--download .gform_wrapper h3.gform_title { text-align: center; } body .form--download .gform_wrapper .gform_heading { position: relative; } body .form--download .gform_wrapper .gform_heading:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 18px 21px 0 21px; border-color: #0099cc transparent transparent transparent; position: absolute; left: 14px; bottom: -17px; } body .form--download .gform_wrapper .gform_heading .gform_required_legend, body .form--download .gform_wrapper .gform_heading .gfield_required { color: #fff; } body .form--download .gform_wrapper .gform_body { padding: 30px 30px 18px; } body .form--download div.ginput_container_name span { padding-right: 0; } body .form--download .top_label div.ginput_complex.ginput_container.gf_name_has_1, body .form--download .top_label div.ginput_complex.ginput_container.gf_name_has_2, body .form--download .top_label div.ginput_complex.ginput_container.gf_name_has_3 { width: calc(100% + 7px); } body .form--download .top_label div.ginput_complex.ginput_container.gf_name_has_2 { width: calc(100% + 20px); } body .form--download .selectric .label { height: 38px; line-height: 38px; color: #707372; margin-bottom: 0 !important; } body .form--download .gform_wrapper ul.gform_fields li.gfield:last-child { display: none; } body .form--download .gform_wrapper .gform_footer { padding: 9px 30px 65px; } body .form--download .gform_wrapper .gform_footer input.button, body .form--download .gform_wrapper .gform_footer input[type=submit], body .form--download .gform_wrapper .gform_page_footer input.button, body .form--download .gform_wrapper .gform_page_footer input[type=submit] { width: 100%; } body .form--download > small { width: 100%; padding: 0 30px; font-size: 12px; color: #4a4a4a; text-align: center; margin: 0; position: absolute; left: 0; bottom: 34px; } /* Secondary */ body .form--download.secondary .gform_wrapper ul.gform_fields li.gfield:last-child { display: block; } body .form--download.secondary .gform_wrapper .gform_footer { padding: 5px 30px 70px; } body .form--download.secondary > small { bottom: 39px; } /* Mobile */ @media (max-width: 767px) { body .form--download .gform_wrapper .gform_body { padding: 30px 30px 18px 27px; } body .form--download .gform_wrapper .gform_footer, body .form--download.secondary .gform_wrapper .gform_footer { padding: 5px 30px 54px; } body .form--download > small, body .form--download.secondary > small { bottom: 25px; } } /* ------------------------------------------------------------ *\ Heading \* ------------------------------------------------------------ */ /* a11y #42: Change #4f758b to #3a5a6c */ .heading { background: #3a5a6c; padding: 32px 0 36px; } .heading h1 { margin: 0 0 10px; color: #fff; } .heading h2 { color: #fff; } .heading h3 { color: #fff; } .heading h4 { color: #fff; } .heading h5 { color: #fff; } .heading h6 { font-family: 'Lato', sans-serif; font-weight: 300; color: #fff; margin: 1px 0 5px; text-transform: uppercase; } .heading p { margin: 0; font-weight: normal; font-size: 19px; color: rgba(255,255,255,.85); line-height: 1.5; } .heading .heading__inner { padding: 0 16% 0 0; } @media(max-height: 679px) and (min-width: 1025px) { .heading { padding: 26px 0 24px; } .heading h1 { font-size: 42px !important; margin-bottom: 10px !important; } .heading p { font-size: 18px !important; line-height: 1.56 !important; } } /* Tablet Portrait */ @media (max-width: 1023px) { .heading { padding: 29px 0 38px; } .heading h1 { font-size: 42px; margin-bottom: 16px; } .heading p { font-size: 18px; line-height: 1.56; padding: 0 2px; } .heading .heading__inner { padding: 0 5px; } } /* Mobile */ @media (max-width: 767px) { .heading { padding: 17px 0 28px; } .heading h1 { font-size: 34px; margin-bottom: 14px; } .heading .shell { padding-left: 20px; padding-right: 20px; } } /* ------------------------------------------------------------ *\ Icons \* ------------------------------------------------------------ */ .ico { display: inline-block; vertical-align: middle; } .ico-check { width: 22px; height: 17px; } .ico-map-usa { width: 32px; height: 20px; } .ico-process { width: 23px; height: 25px; } .ico-checklist { width: 18px; height: 15px; } .ico-dollar { width: 9px; height: 24px; } .ico-tv { width: 24px; height: 20px; } .ico-refresh { width: 24px; height: 18px; } .ico-contact { width: 39px; height: 37px; } .ico-baloon { width: 48px; height: 38px; } .ico-care-management-support { width: 20px; height: 16px; fill: #4f758b; } .ico-coaching-assistance { width: 17px; height: 15px; fill: #4f758b; } .ico-learning-collaborative { width: 30px; height: 30px; fill: #4f758b; } .ico-book-pages { width: 24px; height: 24px; } .ico-book-open { width: 25px; height: 22px; } .ico-file-download-common { width: 24px; height: 24px; } .ico-team-chat { width: 24px; height: 24px; } .ico-write-clipboard { width: 24px; height: 24px; } .ico-write-paper { width: 24px; height: 24px; } /* ------------------------------------------------------------ *\ List Items \* ------------------------------------------------------------ */ .list-items { width: 66%; margin: 0 auto; } /* Tablet Portrait */ @media (max-width: 1023px) { .list-items { width: 100%; } } /* ------------------------------------------------------------ *\ List Item \* ------------------------------------------------------------ */ .list-item { display: -ms-flexbox; display: flex; padding-bottom: 20px; border-bottom: 1px solid rgba(79, 117, 139, .2); } .list-item ~ .list-item { margin-top: 28px; } .list-item .list-item__image { -ms-flex: 0 0 200px; flex: 0 0 200px; height: 180px; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } .list-item .list-item__image a { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .list-item .list-item__image + .list-item__content { -ms-flex: 0 0 calc(100% - 200px); flex: 0 0 calc(100% - 200px); max-width: calc(100% - 200px); padding-left: 30px; } .list-item .list-item__content { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .list-item .list-item__content h2 { font-weight: 600; font-size: 32px; line-height: 1.28; margin: 0 0 10px; } .list-item .list-item__content h2 a { color: #0099cc; transition: color .2s ease; } .list-item .list-item__content h2 a:hover { color: #4f758b; } .list-item .list-item__content h2 a .zmdi { color: #9ea2a2; margin-left: 5px; font-size: 20px; position: relative; top: -2px } .list-item .list-item__content h2 span { font-weight: 400; } .list-item .list-item__content p { line-height: 1.75; margin-bottom: 21px; } /* Mobile */ @media (max-width: 767px) { .list-item { -ms-flex-flow: row wrap; flex-flow: row wrap; } .list-item .list-item__image { -ms-flex: 0 0 100%; flex: 0 0 100%; } .list-item .list-item__image + .list-item__content { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding: 20px 0 0; } .list-item .list-item__content h2 { font-size: 24px; line-height: 1.2; } } /* ------------------------------------------------------------ *\ List \* ------------------------------------------------------------ */ [class^="list-"] { list-style: none outside none; } /* ------------------------------------------------------------ *\ List Post Cards \* ------------------------------------------------------------ */ .list-post-cards { display: -ms-flexbox; display: flex; margin: 0 -15px; padding: 0; } .list-post-cards li { -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; max-width: 33.3333%; padding: 0 15px; } /* Tablet Portrait */ @media (max-width: 1023px) { .list-post-cards { margin: 0 -10px; } .list-post-cards li { padding: 0 10px; } } /* Mobile */ @media (max-width: 767px) { .list-post-cards { overflow-y: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -25px; padding-left: 15px; } .list-post-cards li { -ms-flex: 0 0 246px; flex: 0 0 246px; max-width: 246px; } .list-post-cards li:last-child { -ms-flex: 0 0 266px; flex: 0 0 266px; max-width: 266px; padding-right: 30px; } } /* ------------------------------------------------------------ *\ List News \* ------------------------------------------------------------ */ .list-news { margin: 0; padding: 24px 0 0; position: relative; } .list-news:before { content: ''; width: 38px; height: 3px; background: #c8102e; position: absolute; left: 0; top: 0; } .list-news li ~ li { padding-top: 20px; margin-top: 20px; border-top: 1px solid #dce3e8; } .list-news p { margin: 0 0 5px; font-size: 12px; color: #707372; text-transform: uppercase; } .list-news h6 { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 14px; color: #262626; margin: 0; transition: color .2s ease; } .list-news h6:hover { color: #0099cc; } .list-news h6 .zmdi { font-weight: 400; font-size: 16px; color: #0099cc; margin-left: 5px; position: relative; top: 1px; } .list-news li .news-date {color: #424242 !important;} /* Tablet Portrait */ @media (max-width: 1023px) { .list-news { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; padding: 0; margin: 0 -34px; } .list-news:before { display: none; } .list-news li { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding: 0 34px; } .list-news li a { display: block; padding-right: 20px; } .list-news li ~ li { margin: 0; padding: 0 34px; border: 0; } .list-news li:nth-child(n+3) a { margin-top: 20px; padding-top: 20px; border-top: 1px solid #c7c9c7; } } /* Mobile */ @media (max-width: 767px) { .list-news li { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .list-news li ~ li a { margin-top: 18px; padding-top: 19px; border-top: 1px solid #c7c9c7; } } /* ------------------------------------------------------------ *\ List Cards Overview \* ------------------------------------------------------------ */ .list-cards-overview { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; margin: 0 -10px; padding: 0; } .list-cards-overview li { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; padding: 0 10px; margin-bottom: 16px; } /* Desktop Only */ @media (min-width: 1024px) { .list-cards-overview { justify-content: center; } } /* Tablet Portrait */ @media (max-width: 1023px) { .list-cards-overview { -ms-flex-flow: row nowrap; flex-flow: row nowrap; overflow-y: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -35px; padding-left: 25px; position: relative; } .list-cards-overview li { -ms-flex: 0 0 298px; flex: 0 0 298px; max-width: 298px; } .list-cards-overview li:last-child { -ms-flex: 0 0 323px; flex: 0 0 323px; max-width: 323px; padding-right: 35px; } } /* Mobile Portrait */ @media (max-width: 374px) { .list-cards-overview li { -ms-flex: 0 0 258px; flex: 0 0 258px; max-width: 258px; } .list-cards-overview li:last-child { -ms-flex: 0 0 283px; flex: 0 0 283px; max-width: 283px; } } /* ------------------------------------------------------------ *\ List Process \* ------------------------------------------------------------ */ .list-process a, .list-process .list-process-content { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } .list-process .icon { -ms-flex: 0 0 56px; flex: 0 0 56px; height: 56px; background: #f2faff; border: 1px solid #0099cc; border-radius: 50%; position: relative; transition: background .2s ease; } .list-process .icon svg { position: absolute; left: 50%; top: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); fill: #0099cc; z-index: 2; transition: fill .2s ease; } .list-process .text { font-family: 'futura-pt', sans-serif; font-weight: 500; font-size: 20px; color: #333; padding-left: 20px; transition: color .2s ease; } .list-process li ~ li { margin-top: 18px; } .list-process a:hover .icon { background: #0099cc; } .list-process a:hover .icon svg { fill: #fff; } .list-process a:hover .text { color: #0099cc; } /* Tablet Portrait */ @media (max-width: 1023px) { .list-process li ~ li { margin-top: 6px; } .list-process .icon { -ms-flex: 0 0 46px; flex: 0 0 46px; height: 46px; } .list-process .text { font-size: 18px; padding-left: 15px; } } /* Mobile */ @media (max-width: 767px) { .list-process li ~ li { margin-top: 15px; } } /* ------------------------------------------------------------ *\ List Utilities \* ------------------------------------------------------------ */ .list-utilities { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; margin: 0; padding: 0; } .list-utilities li ~ li { margin-left: 30px; } .list-utilities a { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; font-weight: 400; font-size: 12px; color: #0099cc; transition: opacity .2s ease; } .list-utilities .icon { width: 36px; height: 36px; background: #0099cc; border-radius: 50%; font-size: 20px; color: #fff; text-align: center; line-height: 36px; margin-right: 10px; } .list-utilities a:hover { opacity: .75; } /* ------------------------------------------------------------ *\ List Filter \* ------------------------------------------------------------ */ .list-filter { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; margin: 20px 0; padding: 0; } .list-filter li > span { display: block; font-family: 'futura-pt', sans-serif; font-weight: 300; font-size: 16px; white-space: nowrap; } .list-filter li ~ li { margin-right: 9px; } .list-filter a { height: 36px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; padding: 0 16px 0 14px; font-family: 'futura-pt', sans-serif; font-weight: 500; font-size: 14px; color: #4f758b; line-height: 35px; border: 1px solid transparent; border-radius: 20px; transition: border-color .2s ease, color .2s ease; white-space: nowrap; } .list-filter i { font-size: 18px; margin-right: 10px; } .list-filter a:hover, .list-filter .current a { border-color: #0099cc; color: #0099cc; } /* Small Desktop */ @media (max-width: 1169px) { .list-filter { -ms-flex-flow: row wrap; flex-flow: row wrap; } .list-filter a { padding: 0 10px; } .list-filter i { margin-right: 7px; } } /* Mobile */ @media (max-width: 767px) { .list-filter { margin: 15px 0 20px; } .list-filter li:first-child { -ms-flex: 0 0 100%; flex: 0 0 100%; margin-bottom: 16px; } .list-filter li ~ li { margin-left: 0; } .list-filter li ~ li { margin-right: 10px; margin-bottom: 13px; } .list-filter a { min-width: 85px; border: 1px solid #0099cc; background: #fff; padding: 0 12px; -ms-flex-pack: center; justify-content: center; } .list-filter a i { margin-right: 11px; } } /* ------------------------------------------------------------ *\ List Tags \* ------------------------------------------------------------ */ .list-tags { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } .list-tags li { font-family: 'futura-pt', sans-serif; font-weight: 300; font-size: 15px; } .list-tags li i { display: inline-block; vertical-align: middle; font-weight: 400; font-size: 18px; color: #9ea2a2; position: relative; top: -1px; margin-right: 9px; } .list-tags li ~ li { margin-left: 26px; } /* ------------------------------------------------------------ *\ List Stats \* ------------------------------------------------------------ */ .list-stats { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; list-style: none; margin: 0; padding: 0; } .list-stats li { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; font-family: 'futura-pt', sans-serif; font-weight: 400; font-size: 15px; } .list-stats li ~ li { margin-left: 35px; } .list-stats li i { font-size: 18px; color: #9ea2a2; margin-right: 10px; } .list-stats li strong { font-weight: 600; margin-right: 5px; } /* Mobile */ @media (max-width: 767px) { .list-stats li ~ li { margin-left: 40px; } } /* ------------------------------------------------------------ *\ List Downloads \* ------------------------------------------------------------ */ .list-downloads a { display: block; padding: 8px 0 7px; font-family: 'futura-pt', sans-serif; font-weight: 300; font-size: 16px; color: #4f758b; position: relative; padding-left: 30px; transition: color .2s ease; } .list-downloads a:hover { color: #0099cc; } .list-downloads a i { font-weight: 400; font-size: 16px; color: #0099cc; position: absolute; left: 2px; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } .list-downloads li ~ li { border-top: 1px solid #dce3e8; } /* ------------------------------------------------------------ *\ List Cards Process \* ------------------------------------------------------------ */ .list-cards-process { display: -ms-flexbox; display: flex; margin: 0 -30px !important; padding: 0 !important; counter-reset: list; -ms-flex-flow: row wrap; flex-flow: row wrap; } .list-cards-process > li { max-width: 300px; padding: 0 15px; } @media(max-width: 1439px) { .list-cards-process > li { max-width: 33.3333%; } } /* Small Desktop */ @media (max-width: 1169px) { .list-cards-process { margin: 0 -15px; } } /* Mobile */ @media (max-width: 767px) { .list-cards-process { display: block; } .list-cards-process > li { max-width: 100%; } .list-cards-process > li ~ li { margin-top: 30px; } } /* ------------------------------------------------------------ *\ List Video Cards \* ------------------------------------------------------------ */ .list-video-cards { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; margin: 0 0 0 -33px; } .list-video-cards li { -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; max-width: 33.3333%; padding-left: 33px; margin-bottom: 40px; } /* Mobile */ @media (max-width: 767px) { .list-video-cards { display: block; margin: 0; } .list-video-cards li { max-width: 100%; margin-bottom: 30px; padding-left: 0; } } /* ------------------------------------------------------------ *\ List Notification Cards \* ------------------------------------------------------------ */ .list-notification-cards { padding: 0 17%; } .list-notification-cards li ~ li { margin-top: 10px; } /* Tablet Portrait */ @media (max-width: 1023px) { .list-notification-cards { padding: 0; } } /* ------------------------------------------------------------ *\ List Saved \* ------------------------------------------------------------ */ .list-saved { background: #fff; margin: 0 17%; padding: 35px 40px 20px; } .list-saved li ~ li { border-top: 1px solid #dce3e8; margin-top: 21px; padding-top: 15px; } /* Tablet Portrait */ @media (max-width: 1023px) { .list-saved { margin: 0; } } /* Mobile */ @media (max-width: 767px) { .list-saved { padding: 20px; } } /* ------------------------------------------------------------ *\ List Checkboxes \* ------------------------------------------------------------ */ .list-checkboxes li ~ li { margin-top: 15px; } /* ------------------------------------------------------------ *\ List Color Circles \* ------------------------------------------------------------ */ .list-color-circles { margin: 0; padding: 0; } .list-color-circles li { font-size: 13px; color: #54585a; padding-left: 14px; position: relative; } .list-color-circles li ~ li { margin-top: 18px; } .list-color-circles li:before { content: ''; width: 10px; height: 10px; border-radius: 10px; position: absolute; left: 0; top: 3px; } .list-color-circles li.blue:before { background: #00a9e0; } .list-color-circles li.teal:before { background: #707372; } .list-color-circles li.green:before { background: #67823a; } .list-color-circles li.orange:before { background: #eeaf30; } .list-color-circles li.brown:before { background: #a39382; } .list-color-circles li.red:before { background: #c8102e; } /* ------------------------------------------------------------ *\ List Icons \* ------------------------------------------------------------ */ .list-icons { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; } .list-icons li { margin-right: 6px; margin-bottom: 6px; position: relative; } .list-icons .icon { width: 34px; height: 34px; background: #f0f9ff; border-radius: 50%; position: relative; } .list-icons .icon-with-img { display: table-cell; vertical-align: middle; text-align: center; } .list-icons .icon img { max-height: 24px; width: auto; margin: 0 auto; } .list-icons .icon .zmdi { font-size: 26px; background: transparent; } .list-icons .icon svg { fill: #4f758b; } .list-icons .icon .img, .list-icons .icon .zmdi, .list-icons .icon svg { position: absolute; left: 50%; top: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (min-width: 1025px) { .list-icons li:hover .tooltip { opacity: 1; visibility: visible; } } /* Mobile */ @media (max-width: 767px) { .list-icons { max-width: 90px; } } /* ------------------------------------------------------------ *\ List News Listing \* ------------------------------------------------------------ */ .list-news-listing li ~ li { border-top: 2px solid #dce3e8; padding-top: 20px; margin-top: 27px; } /* ------------------------------------------------------------ *\ List Circles \* ------------------------------------------------------------ */ .list-circles { padding: 0 0 0 30px; margin: 0; } .list-circles li { position: relative; padding-left: 25px; } .list-circles li:before { content: ''; width: 6px; height: 6px; background: #54585a; border-radius: 10px; position: absolute; left: 0; top: 8px; } .list-circles li ~ li { margin-top: 16px; } /* ------------------------------------------------------------ *\ List White Papers \* ------------------------------------------------------------ */ .list-white-papers li ~ li { margin-top: 20px; } /* ------------------------------------------------------------ *\ List Solution Cards \* ------------------------------------------------------------ */ .list-solution-cards { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-pack: center; justify-content: center; margin: 0 -15px; } .list-solution-cards li { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; padding: 0 15px; margin-bottom: 30px; } /* Tablet Portrait */ @media (max-width: 1023px) { .list-solution-cards li { -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; max-width: 33.3333%; } } /* Mobile */ @media (max-width: 767px) { .list-solution-cards li { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } /* ------------------------------------------------------------ *\ Logo \* ------------------------------------------------------------ */ .logo { display: inline-block; } .logo img { width: 158px; height: 94px; -webkit-backface-visibility: hidden; } .logo--footer img { width: 176px; height: 104px; } /* Tablet Portrait */ @media (max-width: 1023px) { .logo img { width: 110px; height: 64px; } .logo--footer img { width: 140px; height: 83px; } } /* Mobile */ @media (max-width: 767px) { .logo img { width: 108px; height: auto; } } /* ------------------------------------------------------------ *\ Map Interactive \* ------------------------------------------------------------ */ .map--interactive { padding: 24px 0 16px; position: relative; } .map--interactive path:not(#frames), .map--interactive circle:not(#frames) { cursor: pointer; transition: fill .2s ease; } .map--interactive path:not(#frames):hover, .map--interactive circle:not(#frames):hover { fill: #c8102e; } /* Legend */ .map--interactive .map--interactive__legend { width: 232px; padding: 15px 15px 15px 21px; background: #fff; box-shadow: 0 0 8px rgba(84, 88, 90, .15); border: 1px solid #dce3e8; position: absolute; right: 98%; margin-right: 29px; top: 27px; } .map--interactive .map--interactive__legend h6 { color: #4f758b; line-height: 1.13; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 2px solid #dce3e8; } .map--interactive .map--interactive__legend ul { list-style: none; margin: 0; padding: 0; } .map--interactive .map--interactive__legend ul li { font-family: 'futura-pt', sans-serif; font-weight: 300; font-size: 14px; color: #4a4a4a; position: relative; padding-left: 26px; } .map--interactive .map--interactive__legend ul li ~ li { margin-top: 16px; } .map--interactive .map--interactive__legend ul .color { width: 15px; height: 15px; position: absolute; left: 0; top: 2px; } /* Tooltip */ .map--interactive__tooltip { width: 300px; padding: 15px 20px 24px; background: #fff; border: 1px solid #dce3e8; box-shadow: 0 0 8px rgba(84, 88, 90, .15); border-radius: 4px; position: absolute; z-index: 10; opacity: 1; visibility: visible; transition: opacity .2s ease, visibility .2s ease; -ms-transform: translate(-50%, -115%); transform: translate(-50%, -115%); } .map--interactive__tooltip.hide { opacity: 0; visibility: hidden; } .map--interactive__tooltip h5 { color: #4f758b; margin: 0 0 11px; } .map--interactive__tooltip h6 { font-family: 'Lato', sans-serif; font-weight: 400; font-size: 14px; color: #4a4a4a; padding-left: 2px; } .map--interactive__tooltip h6 .fa { color: #c8102e; margin-right: 13px; } .map--interactive__tooltip p { margin: 8px 0 0; padding: 10px 5px 0; border-top: 2px solid #dce3e8; font-size: 14px; color: #4a4a4a; line-height: 1.2; } .map--interactive__tooltip:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 10px 7px 0 7px; border-color: #dce3e8 transparent transparent transparent; position: absolute; left: 50%; margin-left: -6px; top: 100%; z-index: 97; } .map--interactive__tooltip:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 8px 6px 0 6px; border-color: #fff transparent transparent transparent; position: absolute; left: 50%; margin-left: -5px; top: 100%; z-index: 98; } .map--interactive__controls { text-align: center; padding: 20px 0 0; } @media(max-width: 1439px) { .map--interactive .map--interactive__legend { right: 92%; } .map--interactive .map--interactive__map > svg { width: 100%; height: 478px; } } /* Small Desktop */ @media (max-width: 1169px) { .map--interactive .map--interactive__legend { right: 96%; width: 200px; } .map--interactive .map--interactive__legend { margin-right: 0; } } /* Tablet Portrait */ @media (max-width: 1023px) { .map--interactive { padding: 24px 70px 16px; } .map--interactive .map--interactive__map > svg { height: 390px; } .map--interactive .map--interactive__legend { width: 320px; position: relative; right: auto; top: 0; margin: 0 auto; max-width: 100%; } } /* Mobile */ @media (max-width: 767px) { .map--interactive { padding: 25px 0 15px; } .map--interactive .map--interactive__map { height: 240px; overflow: hidden; margin-top: 20px; position: relative; } .map--interactive .map--interactive__map > svg { width: 959px; height: 593px; position: relative; left: 0; top: 0; -ms-transform: scale(.35); transform: scale(.35); -ms-transform-origin: left top; transform-origin: left top; } .map--interactive__tooltip.left-offset { -ms-transform: translate(-10%, -115%); transform: translate(-10%, -115%); } .map--interactive__tooltip.left-offset:before { left: 15px; margin-left: 0; } .map--interactive__tooltip.left-offset:after { left: 16px; margin-left: 0; } .map--interactive__tooltip.right-offset { -ms-transform: translate(-90%, -115%); transform: translate(-90%, -115%); } .map--interactive__tooltip.right-offset:before { right: 15px; left: auto; margin-left: 0; } .map--interactive__tooltip.right-offset:after { right: 16px; left: auto; margin-left: 0; } } /* Mobile Portrait */ @media (max-width: 374px) { .map--interactive__controls { margin-left: -10px; margin-right: -10px; } } /* ------------------------------------------------------------ *\ Media Info \* ------------------------------------------------------------ */ .media-info { margin: 50px 0 50px; } .media-info .media-info__head { margin-bottom: 23px; } .media-info .media-info__head h2 { color: #333; text-transform: uppercase; margin-bottom: 20px; padding-bottom: 22px; position: relative; } .media-info .media-info__head h2:after { content: ''; width: 38px; height: 3px; background: #c8102e; position: absolute; left: 0; bottom: 0; } .media-info .media-info__head p { margin: 0; line-height: 1.75; } .media-info .media-info__head p a { color: #333; } .media-info .media-info__content p { margin-bottom: 24px; } .media-info .media-info__content ul { margin-bottom: 38px; } .media-info .col ~ .col .card { margin-left: 18px; } /* Small Desktop */ @media (max-width: 1169px) { .media-info .col ~ .col .card { margin-left: 0; } } /* Mobile */ @media (max-width: 767px) { .media-info { margin-bottom: 0; } .media-info .media-info__head h2 { font-size: 24px; } .media-info .media-info__content ul { margin-bottom: 0; } } /* ------------------------------------------------------------ *\ Nav \* ------------------------------------------------------------ */ .nav--primary > ul { list-style: none; margin: 0 -20px 0 0; padding: 0; font-size: 0; } /* Level 1 */ .nav--primary > ul > li { display: inline-block; vertical-align: middle; } .nav--primary > ul > li.has-dd { position: relative; } .nav--primary > ul > li ~ li { margin-left: 6px; } .nav--primary > ul > li > a { height: 68px; display: block; padding: 0 14px; font-family: 'futura-pt', sans-serif; font-weight: 500; font-size: 19px; color: #262626; line-height: 61px; border-radius: 4px 4px 0 0; transition: background .2s ease, color .2s ease; } .nav--primary > ul > li > button { height: 68px; display: block; padding: 0 14px 15px 14px; font-family: 'futura-pt', sans-serif; font-weight: 500; font-size: 19px; color: #262626; line-height: 61px; border-radius: 4px 4px 0 0; transition: background .2s ease, color .2s ease; border: 0; background: none; } .menu-toggle.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .menu-toggle.visually-hidden:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; } @media(min-width: 1024px) { .nav--primary > ul > li:hover > a, .nav--primary > ul > li:focus > a, .nav--primary > ul > li:hover > button, .nav--primary > ul > li:focus > button { background: #0099cc; color: #fff; } .nav--primary > ul > li.has-mega:hover > ul, .nav--primary > ul > li.has-dd:hover > ul, .nav--primary > ul > li.has-mega:focus > ul, body .nav--primary > ul > li.has-dd:focus > ul { opacity: 1; visibility: visible; transition-delay: .25s; } } @media(min-width: 1024px) and (max-width: 1144px) { .nav--primary > ul > li ~ li { margin-left: 4px; } .nav--primary > ul > li > a { padding: 0 10px; font-size: 18px; } .nav--primary > ul > li > button { padding: 0 10px; font-size: 18px; } } @media(min-width: 1024px) and (max-width: 1060px) { .nav--primary > ul > li > a { padding: 0 8px; font-size: 16px; } .nav--primary > ul > li > button { padding: 0 8px; font-size: 16px; } } .nav--primary > ul > li:last-child > ul { left: auto; right: 0; } /* Level 2 -- Mega */ .nav--primary .has-mega > ul { width: 100%; display: -ms-flexbox; display: flex; padding: 25px 30px; border-top: 4px solid #0099cc; background: #fff; position: absolute; left: 0; top: 100%; z-index: 99; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; margin: 0; } .nav--primary .has-mega > ul .mega__back, .nav--primary .has-mega > ul .mega__title { display: none; } .nav--primary .has-mega > ul a, .nav--primary .has-mega > ul a strong, .nav--primary .has-mega > ul h2 strong { display: block; } .nav--primary .has-mega > ul a strong, .nav--primary .has-mega > ul h2 strong { font-family: 'futura-pt', sans-serif; font-weight: 600; font-size: 16px; color: #262626; text-transform: uppercase; } .nav--primary .has-mega > ul > li { width: 32.33333%; } .nav--primary .has-mega > ul > li:nth-child(2) { -ms-flex: 0 0 32.3333%; flex: 0 0 32.3333%; } .nav--primary .has-mega > ul > li:last-child { -ms-flex: 0 0 32.3333%; flex: 0 0 32.3333%; } .nav--primary .has-mega > ul > li ~ li { border-left: 1px solid rgba(79, 117, 139, 0.2); margin-left: 20px; padding-left: 32px; } .nav--primary .has-mega > ul ul { margin-top: 18px; } .nav--primary .has-mega > ul ul a { display: block; font-family: 'futura-pt', sans-serif; font-weight: 400; font-size: 18px; line-height: 1.25; color: #4f758b; transition: color .2s ease; } .nav--primary .has-mega > ul ul a:hover, .nav--primary .has-mega > ul ul a:focus { color: #0099cc; } .nav--primary .has-mega > ul ul li ~ li { margin-top: 19px; } /* Level 2 -- Simple */ .nav--primary .has-dd > ul { width: 280px; padding: 28px 40px; background: #fff; border-top: 4px solid #0099cc; box-shadow: 0 0 8px rgba(84, 88, 90, .15); position: absolute; left: 0; top: 100%; z-index: 99; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; } .nav--primary .has-dd > ul a { display: block; font-family: 'futura-pt', sans-serif; font-weight: 400; font-size: 18px; color: #4f758b; transition: color .2s ease; } .nav--primary .has-dd > ul a:hover, .nav--primary .has-dd > ul a:focus { color: #0099cc; } .nav--primary .has-dd > ul li { border-bottom: 2px solid rgba(79, 117, 139, .2); margin-bottom: 10px; padding-bottom: 10px; } .nav--primary .has-dd > ul li:last-child { border-bottom: 0; margin-bottom: 0; } .nav--primary .has-dd > ul a .zmdi { font-size: 14px; color: #9ea2a2; margin-left: 3px; } /* Desktop Only */ @media (min-width: 1024px) { .nav--primary .has-mega > ul a strong { padding: 6px 10px; background-color: #f2f2f0; margin-left: -5px; } .nav--primary .has-mega > ul li:not(.menu-item) { display: none; } } /* Tablet Portrait */ @media (max-width: 1023px) { .nav-btn { width: 30px; position: relative; border: none; background: none; } .nav-btn:before { content: ''; width: 86px; height: 80px; background: #fff; transition: background .2s ease; position: absolute; left: -30px; top: -30px; z-index: -1; } .nav-btn .bar { display: block; height: 3px; background: #4f758b; position: relative; top: 0; transition: all .2s ease; } .nav-btn .bar ~ .bar { margin-top: 6px; } .nav-btn.active:before { background: #0099cc; } .nav-btn.active .bar { background: #fff } .nav-btn.active .bar:nth-child(1) { -ms-transform: rotate(45deg); transform: rotate(45deg); top: 9px; } .nav-btn.active .bar:nth-child(2) { opacity: 0; } .nav-btn.active .bar:nth-child(3) { -ms-transform: rotate(-45deg); transform: rotate(-45deg); top: -9px; } .nav--primary { -ms-flex-order: -1; order: -1; padding: 0 18px 10px 21px; } .nav--primary > ul { margin: 0; } .nav--primary > ul > li { display: block; border-bottom: 1px solid rgba(79, 117, 139, .2); } .nav--primary > ul > li ~ li { margin-left: 0; } .nav--primary > ul > li > a { height: 56px; color: #4f758b; line-height: 56px; padding: 0 30px 0 0; position: relative; } .nav--primary > ul > li > button { height: 56px; color: #4f758b; line-height: 56px; padding: 0 30px 0 0; position: relative; } .nav--primary .has-mega > ul > li { width: 100%; } .nav--primary > ul > li.has-dd > a:after, .nav--primary > ul > li.has-mega > a:after { content: '\f2f9'; font: normal normal normal 14px/1 'Material-Design-Iconic-Font'; font-size: 24px; color: #4f758b; position: absolute; right: 5px; top: 50%; margin-top: -12px; z-index: 1; transition: all .2s ease; } .nav--primary > ul > li.has-dd > a:before, .nav--primary > ul > li.has-mega > a:before { content: ''; height: 100%; background: #4f758b; position: absolute; left: -21px; right: -18px; top: 0; z-index: -1; opacity: 0; transition: opacity .2s ease; } /* Level 2 -- Mega */ .nav--primary .has-mega > ul { display: block; width: auto; position: static; margin: 0 -18px 0 -21px; padding: 0 18px 0 21px; border: 0; background: #4f758b; opacity: 1; visibility: visible; overflow: hidden; max-height: 0; transition: max-height .2s ease; } .nav--primary .has-mega > ul a { display: block; color: #fff; padding: 14px 30px 13px 15px; position: relative; } .nav--primary .has-mega > ul li, .nav--primary .has-mega > ul li ~ li { padding-top: 0; border-top: 1px solid rgba(255, 255, 255, .2); margin: 0; } .nav--primary .has-mega > ul > li ~ li { border-left: 0; padding-left: 0; } .nav--primary .has-mega > ul > li > a { position: relative; } .nav--primary .has-mega > ul > li > a strong { font-size: 18px; font-weight: 300; color: #fff; text-transform: none; } .nav--primary .has-mega > ul > li > a:after { content: '\f2fb'; font: normal normal normal 14px/1 'Material-Design-Iconic-Font'; font-size: 24px; color: #fff; position: absolute; right: 5px; top: 50%; margin-top: -12px; z-index: 1; transition: all .2s ease; } .nav--primary .has-mega > ul > li > ul { width: 100%; margin: 0; background: #fff; position: absolute; left: 0; top: -4px; bottom: -10px; z-index: 999; -ms-transform: translateX(100%); transform: translateX(100%); transition: transform .2s ease; } .nav--primary .has-mega > ul > li > ul span { font-weight: 500; } .nav--primary .has-mega > ul > li > ul.slide-in { -ms-transform: translateX(0); transform: translateX(0); } .nav--primary .has-mega > ul > li > ul a { font-family: 'futura-pt', sans-serif; font-weight: 500; font-size: 16px; padding: 16px 30px 15px 30px; position: relative; } .nav--primary .has-mega > ul > li > ul a:after { content: ''; height: 1px; background: #4f758b; opacity: .2; position: absolute; left: 30px; bottom: 0; right: 30px; } .nav--primary .has-mega > ul > li > ul li { border-top: 0; } .nav--primary .has-mega > ul > li > ul li ~ li { margin-top: 0; } .nav--primary .has-mega > ul .mega__back, .nav--primary .has-mega > ul .mega__title { display: block; } .nav--primary .has-mega > ul .mega__back:after, .nav--primary .has-mega > ul .mega__title:after { display: none; } .nav--primary .has-mega > ul .mega__back { background: #4f758b; color: #fff; font-weight: 500; font-size: 18px; padding: 23px 30px 15px 26px; } .nav--primary .has-mega > ul .mega__back:before { display: inline-block; vertical-align: middle; content: '\f2fa'; font: normal normal normal 14px/1 'Material-Design-Iconic-Font'; font-weight: 400; font-size: 24px; color: #fff; margin-right: 15px; position: relative; top: -1px; } .nav--primary .has-mega > ul .mega__title { background-color: rgba(199, 201, 199, .3); font-weight: 300; font-size: 16px; text-transform: uppercase; color: #54585a; } .nav--primary .has-mega > ul .mega__title:hover { color: #54585a; } .nav--primary .expanded.has-mega > ul { max-height: 500px; padding: 0 18px 10px 21px; } /* Level 2 -- Simple */ .nav--primary .has-dd > ul { width: auto; position: static; margin: 0 -18px 0 -21px; padding: 0 18px 0 21px; border: 0; background: #4f758b; opacity: 1; visibility: visible; overflow: hidden; max-height: 0; transition: max-height .2s ease; } .nav--primary .has-dd > ul a { display: block; color: #fff; padding: 14px 30px 13px 15px; position: relative; } .nav--primary .has-dd > ul li, .nav--primary .has-dd > ul li ~ li { padding-bottom: 0; border-top: 1px solid rgba(255, 255, 255, .2); margin: 0; border-bottom: 0; } .nav--primary .expanded.has-dd > ul { max-height: 500px; } .nav--primary .expanded > a { color: #fff; border-radius: 0; } .nav--primary > ul > li:first-child > a { height: 60px; line-height: 58px; } .nav--primary > ul > li.has-dd.expanded > a:before, .nav--primary > ul > li.has-mega.expanded > a:before { opacity: 1; } .nav--primary > ul > li.has-dd.expanded > a:after, .nav--primary > ul > li.has-mega.expanded > a:after { color: #fff; opacity: .5; -ms-transform: rotate(180deg); transform: rotate(180deg); } } /* Mobile */ @media (max-width: 767px) { .nav-btn:before { height: 70px; top: -25px; } .nav-btn.active:before { height: 71px; } .nav--primary .has-mega > ul .mega__title { font-size: 14px; } .nav--primary .has-mega > ul > li > ul { position: fixed; top: 70px; bottom: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } } /* ------------------------------------------------------------ *\ Nav Utilities \* ------------------------------------------------------------ */ .nav--utilities { text-align: right; } .nav--utilities > ul { list-style: none; margin: 0; padding: 0; font-family: 'futura-pt', sans-serif; font-weight: 300; font-size: 0; } .nav--utilities > ul > li { display: inline-block; vertical-align: middle; position: relative; } .nav--utilities > ul > li ~ li { margin-left: 32px; } .nav--utilities > ul > li > a { display: block; font-weight: 400; font-size: 16px; color: #54585a; transition: color .2s ease; position: relative; } .nav--utilities > ul > li > a > span.notification { width: 15px; height: 15px; border: 1px solid #fff; background: #c8102e; border-radius: 50%; font-weight: 500; font-size: 9px; color: #fff; text-align: center; line-height: 12px; position: absolute; right: -5px; top: -2px; } .nav--utilities .zmdi { font-size: 16px; } .nav--utilities .zmdi-notifications { font-size: 18px; } .nav--utilities .zmdi-close { display: none; } .nav--utilities .fa { font-size: 14px; } .nav--utilities > ul > li.has-notification-dd > a { z-index: 999; } .nav--utilities .fa, .nav--utilities .zmdi { color: #9ea2a2; transition: color .2s ease; margin-right: 5px; } .nav--utilities svg { fill: #9ea2a2; transition: fill .2s ease; } /* a11y - Homepage #5: Change #0099cc to #006699 */ .nav--utilities > ul > li > a:hover, .nav--utilities > ul > li > a:hover .fa, .nav--utilities > ul > li > a:hover .zmdi { color: #006699; } .nav--utilities > ul > li > a:hover svg { fill: #006699; } .nav--utilities > ul > li:hover .notifications-dropdown { opacity: 1; visibility: visible; transition-delay: .25s; } /* Tablet Portrait */ @media (max-width: 1023px) { .nav--utilities { margin: 0; padding: 14px 10px 10px 25px; text-align: left; } .nav--utilities > ul > li { display: block; } .nav--utilities > ul > li ~ li { margin-left: 0; margin-top: 27px; } .nav--utilities > ul > li ~ li:last-child { margin-top: 22px; } .nav--utilities > ul > li.has-notification-dd > a { display: inline-block; position: relative; } .nav--utilities > ul > li.has-notification-dd > a:before { content: ''; width: 64px; height: 52px; background: #f0f9ff; box-shadow: 0 -2px 4px rgba(0, 0, 0, .25); position: absolute; left: 50%; top: 50%; margin-left: -36px; margin-top: -30px; z-index: -1; opacity: 0; transition: opacity .2s ease; } .nav--utilities > ul > li.has-notification-dd > a.active:before { opacity: 1; } } /* Mobile */ @media (max-width: 767px) { .nav--utilities { padding: 20px 10px 10px 25px; } .nav--utilities .active .zmdi-notifications { display: none; } .nav--utilities .active .zmdi-close { display: block; font-size: 24px; } .nav--utilities > ul > li > a.active > span { opacity: 0; } } /* ------------------------------------------------------------ *\ Nav CTA \* ------------------------------------------------------------ */ .nav--cta ul { display: -ms-flexbox; display: flex; list-style: none; margin: 0 !important; padding: 0 !important; background: #fff; box-shadow: 0 0 8px rgba(84, 88, 90, .18); } .nav--cta li { -ms-flex: 1 1 33.3333%; flex: 1 1 33.3333%; height: 120px; } .nav--cta a { display: -ms-flexbox; display: flex; height: 100%; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; text-align: center; position: relative; font-family: 'futura-pt', sans-serif; font-weight: 500; font-size: 24px; line-height: 1.4; color: #0099cc; transition: background .2s ease, color .2s ease; text-decoration: none !important; } .nav--cta a sup { font-size: 14px; position: relative; top: -4px; margin-right: 5px; } .nav--cta li ~ li a:before { content: ''; width: 1px; height: 64px; background: #4f758b; opacity: .25; position: absolute; left: 0; top: 50%; margin-top: -32px; z-index: 1; } .nav--cta a:hover, .nav--cta .current a { background: #0099cc !important; color: #fff !important; } /* Tablet Portrait */ @media (max-width: 1023px) { .nav--cta ul { -ms-flex-flow: row wrap; flex-flow: row wrap; } .nav--cta li { height: 112px; max-width: 33.3333%; } .nav--cta a { font-size: 20px; line-height: 1.3; padding: 0 10px; } } /* Mobile */ @media (max-width: 767px) { .nav--cta ul { display: block; } .nav--cta li { max-width: 100%; height: auto; } .nav--cta a { line-height: 1.3; padding: 26px 10px; } .nav--cta li ~ li a:before { width: auto; height: 1px; opacity: .2; top: 0; margin-top: 0; left: 10px; right: 10px; } } /* ------------------------------------------------------------ *\ Nav Program \* ------------------------------------------------------------ */ .nav--program { width: 100%; height: 60px; background: #0099cc; padding: 8px 0 10px; z-index: 98; } .nav--program .nav__btn { display: none; } .nav--program .nav__inner { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; } .nav--program .nav__title { margin-right: auto; font-weight: 600; color: #fff; margin-bottom: 0; line-height: 1.0; } .nav--program ul { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; list-style: none; margin: 0 30px 0 0; padding: 0; } .nav--program ul li ~ li { margin-left: 34px; } .nav--program ul a { display: block; font-family: 'futura-pt', sans-serif; font-weight: 500; font-size: 18px; color: #fff; transition: color .2s ease; } /* a11y #41: Change #E1F5FE to #FFF */ .nav--program ul a:hover, .nav--program ul .current > a, .nav--program ul .current-menu-item > a, .nav--program ul .current-menu-ancestor > a { color: #FFF; } .nav--program .nav__inner > .btn--red { height: 42px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .7); font-weight: 500; font-size: 18px; line-height: 42px; padding: 0 15px; } /* Desktop Small */ @media (min-width: 1061px) and (max-width: 1154px) { .nav--program ul li ~ li { margin-left: 20px; } .nav--program .nav__title { font-size: 18px; } .nav--program ul a { font-size: 17px; } } @media (min-width: 1024px) and (max-width: 1060px) { .nav--program ul li ~ li { margin-left: 16px; } .nav--program .nav__title { font-size: 16px; } .nav--program ul a { font-size: 16px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .nav--program { min-height: 60px; height: auto; padding: 10px 0 0; } .nav--program .shell { padding-left: 23px; padding-right: 28px; } .nav--program ul { display: block; -ms-flex: 0 0 100%; flex: 0 0 100%; margin: 0; border: 1px solid transparent; border-top: 0; border-radius: 0 0 4px 4px; max-height: 0; overflow: hidden; transition: max-height .2s ease, border-color .2s ease; } .nav--program ul.active { max-height: calc(100vh - 130px); border-color: #80cce5; border-top: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .nav--program div > ul.active { margin-bottom: 10px; } .nav--program ul a { font-weight: normal; font-size: 18px; padding: 10px 30px; } .nav--program ul li ~ li { margin-left: 0; border-top: 1px solid #80cce5; } .nav--program ul ul li { margin-left: 0; border-top: 0 !important; border-bottom: 0 !important; } .nav--program ul a:hover, .nav--program ul .current a { color: #fff; } .nav--program .nav__title { font-weight: 600; font-size: 18px; padding: 9px 90px 9px 15px; border: 1px solid #80cce5; border-radius: 4px; } .nav--program .nav__title.active { border-radius: 4px 4px 0 0; } .nav--program .nav__inner { display: block; position: relative; padding-right: 137px; } .nav--program.nav--interior .nav__inner { padding-right: 0; } .nav--program .nav__btn { display: block; width: 22px; position: absolute; right: 152px; top: 11px; } .nav--program.nav--interior .nav__btn { right: 16px; } .nav--program .nav__btn:before { content: 'Menu'; font-family: 'futura-pt', sans-serif; font-weight: 500; font-size: 14px; color: #fff; position: absolute; right: 100%; top: -1px; margin-right: 10px; text-transform: uppercase; } .nav--program .nav__btn .bar { display: block; height: 2px; background: #fff; position: relative; top: 0; opacity: 1; transition: all .2s ease; } .nav--program .nav__btn .bar ~ .bar { margin-top: 5px; } .nav--program .nav__btn.active .bar:nth-child(1) { -ms-transform: rotate(45deg); transform: rotate(45deg); top: 7px; } .nav--program .nav__btn.active .bar:nth-child(2) { opacity: 0; } .nav--program .nav__btn.active .bar:nth-child(3) { -ms-transform: rotate(-45deg); transform: rotate(-45deg); top: -7px; } .nav--program .nav__inner > .btn--red { position: absolute; right: 0; top: 0; } } /* Mobile */ @media (max-width: 767px) { .nav--program .shell { padding-left: 16px; padding-right: 16px; } .nav--program .nav__btn { right: 15px; } .nav--program .nav__inner { padding: 0; } .nav--program .nav__inner > .btn--red { display: none; } .nav--program ul a.btn--red { border-radius: 4px; font-weight: 500; font-size: 18px; margin: 14px 8px; padding: 0 30px; border: 1px solid rgba(255, 255, 255, .7); } } /* ------------------------------------------------------------ *\ Nav Blocks \* ------------------------------------------------------------ */ .nav--blocks { padding-top: 29px; } .nav--blocks ul { display: -ms-flexbox; display: flex; -ms-flex-pack: space-start; justify-content: space-start; padding: 0 17%; } .nav--blocks ul li ~ li { margin-left: 15px; } .nav--blocks ul li:last-child { margin-left: auto; } .nav--blocks a { display: block; padding: 0 18px; background: #fff; border-top: 2px solid transparent; line-height: 49px; font-family: 'futura-pt', sans-serif; font-weight: 300; font-size: 15px; color: #4f758b; transition: background .2s ease, color .2s ease, border-color .2s ease; } .nav--blocks a .zmdi { font-weight: 400; font-size: 18px; color: #0099cc; transition: color .2s ease; position: relative; top: 2px; margin-right: 8px; } .nav--blocks a:hover, .nav--blocks .current-menu-item a { background: #f2f2f0; color: #54585a; border-top-color: #c8102e; } .nav--blocks a:hover .zmdi, .nav--blocks .current-menu-item a .zmdi { color: #c8102e; } /* Tablet Portrait */ @media (max-width: 1023px) { .nav--blocks ul { padding: 0; } } /* Mobile */ @media (max-width: 767px) { .nav--blocks a { height: 100%; line-height: 1.2; padding: 32px 10px 10px 10px; position: relative; text-align: center; } .nav--blocks a .zmdi { position: absolute; left: 50%; top: 10px; -ms-transform: translateX(-50%); transform: translateX(-50%); } .nav--blocks ul li { -ms-flex: 0 0 33.333%; flex: 0 0 33.333%; max-width: 33.333%; } .nav--blocks ul li ~ li { margin-left: 0; } } /* ------------------------------------------------------------ *\ News Item \* ------------------------------------------------------------ */ .news-item { position: relative; padding-left: 106px; } .news-item .news-item__meta { font-weight: 400; font-size: 14px; color: #707372; position: absolute; left: 0; top: 3px; } .news-item .news-item__content h4 { font-family: 'Lato', sans-serif; font-weight: 700; margin: 0 0 10px; } .news-item .news-item__content h4 a { display: block; color: #0099cc; transition: color .2s ease; } .news-item .news-item__content h4 a:hover { color: #4f758b; } .news-item .news-item__content p { margin: 0; font-size: 16px; line-height: 1.25; } /* Mobile */ @media (max-width: 767px) { .news-item { padding: 0; } .news-item .news-item__meta { position: static; margin-bottom: 3px; } .news-item .news-item__content h4 { margin-bottom: 5px; } } /* ------------------------------------------------------------ *\ Notifications Dropdown \* ------------------------------------------------------------ */ .notifications-dropdown { width: 320px; text-align: left; background-color: #f0f9ff; border-radius: 4px 0 4px 4px; box-shadow: 0 0 8px rgba(0, 0, 0, .25); position: absolute; right: -16px; top: 100%; margin-top: 11px; z-index: 998; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; } .notifications-dropdown:before { content: ''; width: 76px; height: 53px; background: url(../css/images/temp/notification-bg.png) no-repeat center; position: absolute; right: -6px; bottom: 100%; z-index: 1; } .notifications-dropdown .notifications-dropdown__head { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; padding: 16px 18px 13px 24px; position: relative; } .notifications-dropdown .notifications-dropdown__head h6 { color: #4f758b; text-transform: uppercase; margin: 0; } .notifications-dropdown .notifications-dropdown__head i { font-size: 18px; color: #0099cc; transition: color .2s ease; } .notifications-dropdown .notifications-dropdown__head i:hover { color: #00bfff; } .notifications-dropdown .notifications-dropdown__body { background: #fff; } .notifications-dropdown .notifications-dropdown__actions { border-top: 1px solid #adced9; padding: 19px 32px 22px; } .notifications-dropdown .notifications-dropdown__actions .btn { width: 100%; } .notifications-dropdown ol { list-style: none; margin: 0; padding: 0; } .notifications-dropdown ol li { display: block; border-top: 1px solid #adced9; padding: 15px 25px 16px; } .notifications-dropdown ol p { font-family: 'Lato', sans-serif; font-weight: 400; font-size: 14px; color: #707372; margin: 0; } .notifications-dropdown ol p a { display: inline; color: #0099cc; text-decoration: underline; } .notifications-dropdown ol p a:hover { text-decoration: none; } .notifications-dropdown ol span { display: block; font-family: 'futura-pt', sans-serif; font-weight: 300; font-size: 14px; color: #9ea2a2; padding-top: 7px; } .notifications-dropdown ol span .zmdi { font-size: 13px; color: #9ea2a2; margin-right: 5px; } /* Tablet Portrait */ @media (max-width: 1023px) { .notifications-dropdown { width: auto; position: relative; right: auto; top: auto; opacity: 1; visibility: visible; margin: 0 -10px 0 -25px; max-height: 0; overflow: hidden; transition: max-height .2s ease; } .notifications-dropdown:before { width: 64px; right: auto; left: 0; } .notifications-dropdown.active { max-height: 300px; padding-top: 10px; } } /* Mobile */ @media (max-width: 767px) { .notifications-dropdown { margin-top: 8px; } } /* ------------------------------------------------------------ *\ Paging \* ------------------------------------------------------------ */ .paging { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; } .paging .paging__prev, .paging .paging__next { -ms-flex: 0 0 32px; flex: 0 0 32px; height: 32px; background: #fff; border: 1px solid #c7c9c7; border-radius: 50%; text-align: center; line-height: 30px; font-size: 16px; color: #0099cc; } .paging ul { list-style: none; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; margin: 0 14px; padding: 0; } .paging ul li ~ li { margin-left: 14px; } .paging a { display: block; width: 32px; height: 32px; font-weight: 700; font-size: 16px; color: #333; border-radius: 50%; transition: background .2s ease, color .2s ease; text-align: center; line-height: 30px; text-decoration: none !important; } .paging a:hover, .paging .current a { background: #0099cc !important; color: #fff !important; } /* ------------------------------------------------------------ *\ Popup \* ------------------------------------------------------------ */ .popup { max-width: 680px; background: #fff; margin: 0 auto; position: relative; padding: 50px 60px; } .popup .mfp-close { opacity: 1; color: #0099cc; } /* Mobile */ @media (max-width: 767px) { .popup { padding: 25px; } } /* ------------------------------------------------------------ *\ Popup Interrupter Ajax \* ------------------------------------------------------------ */ .popup--interrupter-ajax { text-align: center; } .popup--interrupter-ajax .popup__body { padding: 0 25px; } .popup--interrupter-ajax h1 { color: #4f758b; text-transform: uppercase; line-height: 1.05; margin: 0 0 20px; padding: 0 0 23px; position: relative; } .popup--interrupter-ajax h1:after { content: ''; width: 40px; height: 3px; background: #c8102e; position: absolute; left: 50%; bottom: 0; margin-left: -20px; } .popup--interrupter-ajax p { line-height: 1.75; margin: 0 0 40px; } .popup--interrupter-ajax .btn { min-width: 310px; height: 45px; font-weight: 500; font-size: 20px; line-height: 45px; } /* Mobile */ @media (max-width: 767px) { .popup--interrupter-ajax h1 { font-size: 28px; } .popup--interrupter-ajax p { margin-bottom: 20px; } .popup--interrupter-ajax .popup__body { padding: 0; } } /* Mobile Portrait */ @media (max-width: 374px) { .popup--interrupter-ajax .btn { min-width: 100%; } } .popup--link-img:focus { display: block; border: dotted 2px blue; } .mfp-close:focus { border: dotted 2px blue; } /* ------------------------------------------------------------ *\ Popup Article \* ------------------------------------------------------------ */ .popup--article { padding: 40px; } /* ------------------------------------------------------------ *\ Product Program \* ------------------------------------------------------------ */ .product--program { display: -ms-flexbox; display: flex; padding-bottom: 32px; border-bottom: 1px solid rgba(79, 117, 139, .2); } .product--program ~ .product--program { margin-top: 31px; } .product--program .product__image { -ms-flex: 0 0 250px; flex: 0 0 250px; height: 250px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; box-shadow: 0 0 8px rgba(84, 88, 90, .15); border: 1px solid #dce3e8; background: #fff; } .product--program .product__content { padding-left: 48px; } .product--program .product__content h2 { font-weight: 600; font-size: 32px; color: #0099cc; margin: 0 0 14px; } .product--program .product__content p { font-size: 14px; line-height: 1.7; margin: 0 0 14px; } .product--program .product__content h4 { font-family: 'Lato', sans-serif; font-weight: 700; color: #333; margin: 0 0 10px; } .product--program .product__content small { display: block; font-weight: 400; font-size: 13px; color: #707372; margin-bottom: 20px; } .product--program .product__content .btn { padding: 0 34px; } /* Mobile */ @media (max-width: 767px) { .product--program { display: block; padding-bottom: 22px; } .product--program ~ .product--program { margin-top: 25px; } .product--program .product__image { margin-bottom: 20px; } .product--program .product__content { padding: 0; } .product--program .product__content h2 { font-size: 24px; } } /* ------------------------------------------------------------ *\ Search \* ------------------------------------------------------------ */ .search { position: relative; } .search .search__field { width: 120px; height: 40px; padding: 0 35px 0 15px; border: 0; background: #d7d9d7; border-radius: 4px; font-family: 'futura-pt', sans-serif; font-weight: 300; font-size: 16px; color: #54585a; will-change: width; transition: width .2s ease; } .search .search__field:focus { width: 767px; background-color: #fff; border: 1px solid #DCE3E8;box-shadow: 0 0 8px 0 rgba(84,88,90,0.15); } .search .search__btn { border: 0; background: none; font-size: 18px; color: #54585a; position: absolute; right: 12px; top: 10px; } /* Tablet Portrait */ @media (max-width: 1023px) { .search { width: auto; background: #fff; padding: 30px 30px 40px; border-top: 4px solid #0099cc; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; } .search.active { opacity: 1; visibility: visible; } .search .search__field { height: 50px; font-size: 18px; line-height: 50px; } .search .search__field, .search .search__field:focus { width: 100%; } .search .search__btn { font-size: 22px; right: 48px; top: 40px; } } /* Mobile */ @media (max-width: 767px) { .search { padding: 30px; } } /* ------------------------------------------------------------ *\ Search Results \* ------------------------------------------------------------ */ .search-results .search-results__head { display: -ms-flexbox; display: flex; -ms-flex-align: end; align-items: flex-end; } .search-results .search-results__head h5 { margin: 0 21px 0 0; color: #4f758b; } .search-results .search-results__head ul { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; list-style: none; margin-bottom: 3px; } .search-results .search-results__head ul a { display: block; font-size: 13px; color: #0099cc; line-height: 1; transition: opacity .2s ease; text-decoration: none; } .search-results .search-results__head ul a:hover { text-decoration: underline; } .search-results .search-results__head ul li ~ li { margin-left: 5px; padding-left: 6px; border-left: 1px solid #9ea2a2; } .search-results .search-results__head ul .current-menu-item a { font-weight: 700; color: #707372; } .search-results .search-results__foot { padding-top: 38px; } .search-results .recommended { padding: 0 20px 8px 20px; background: #f2faff; box-shadow: 0 0 4px rgba(84, 88, 90, .25); border: 1px solid #dce3e8; margin: 39px 0 15px; position: relative; } .search-results .recommended:before { content: ''; width: 100%; height: 1px; background: #dce3e8; position: absolute; bottom: 100%; margin-bottom: 23px; } .search-results .recommended .search-result:first-child { border-top: 0; margin-top: 0; padding-top: 20px; } .search-results .recommended .search-result:last-child { border-bottom: 0; } .search-results .recommended + .search-result { border-top: 0; } .search-results .recommended .search-result { padding: 24px 0 20px; } .search-results .recommended .search-result h3 { margin-bottom: 4px; } .search-results .recommended .search-result .meta { right: 12px; top: 15px; } /* a11y #66: Use list for search results */ .search-results-list { list-style: none; margin: 0; padding: 0; } /* Small Desktop */ @media (max-width: 1169px) { .search-results .recommended .search-result h3 { padding-right: 130px; } } /* Mobile */ @media (max-width: 767px) { .search-results .recommended:before { left: 0; } .search-results .recommended .search-result { padding: 20px 0 65px; } .search-results .recommended .search-result h3 { padding: 0; } .search-results .recommended .search-result .meta { right: auto; top: auto; } } /* ------------------------------------------------------------ *\ Search Result \* ------------------------------------------------------------ */ .search-result { border-top: 1px solid #dce3e8; padding: 23px 0; position: relative; } .search-result h3 { font-size: 24px; color: #0099cc; line-height: 1.3; margin: -.5em 0 0; padding-right: 150px; } .search-result h3 a { transition: opacity .2s; } .search-result h3 a:hover { /*opacity: 0.6;*/ text-decoration: underline; } .search-result h3 span.has-tooltip .tooltip { text-align: center; width: 116px; padding-left: 5px; padding-right: 5px; } .search-result h3 span.has-tooltip .tooltip--top { margin-left: -62px; } .search-result h3 span.suggested-label { display: inline-block; background: #c8102e; border-radius: 11px; padding: 0 10px; line-height: 22px; font-family: 'futura-pt', sans-serif; font-weight: 500; font-size: 11px; color: #fff; text-transform: uppercase; position: relative; top: -3px; margin-left: 4px; } /* a11y #68: Increase color contrast of meta data */ .search-result .meta { font-family: 'futura-pt', sans-serif; font-weight: 300; font-size: 12px; color: #767676; position: absolute; right: 24px; top: 19px; } .search-result .meta span { font-weight: 500; font-size: 13px; } .search-result .url { display: inline-block; font-size: 14px; color: #4f758b; line-height: 1.43; } .search-result p { margin: 9px 0 0; font-size: 14px; color: #707372; line-height: 1.57; } .search-result:first-child { margin-top: 16px; } .search-result:last-child { border-bottom: 1px solid #dce3e8; } /* Small Desktop */ @media (max-width: 1169px) { .search-result h3 span.suggested-label { display: block; max-width: 78px; margin: 10px 0 0 0; } } /* Tablet Portrait */ @media (max-width: 1023px) { .search-result h3 { padding-right: 140px; line-height: 1.2; } .search-result h3 span.has-tooltip .tooltip { display: none !important; } } /* Mobile */ @media (max-width: 767px) { .search-result { padding: 20px 0 65px; margin-bottom: 6px; } .search-result h3 { padding: 0; } .search-result .meta { right: auto; left: 0; top: auto; bottom: 14px; } .search-result:first-child { margin-top: 21px; } } /* ------------------------------------------------------------ *\ Section \* ------------------------------------------------------------ */ .section .semicircle { width: 50px; height: 40px; background: #fff; border-radius: 50%; position: absolute; left: 50%; margin-left: -25px; bottom: -19px; } .section .bg-gray ~ .semicircle { background: #f2f2f0; } /* ------------------------------------------------------------ *\ Section Nav CTA \* ------------------------------------------------------------ */ .section--nav-cta { margin-top: -60px; position: relative; z-index: 5; } .section--nav-cta .section__body { padding: 0 40px; } /* Tablet Portrait */ @media (max-width: 1023px) { .section--nav-cta { margin-top: -74px; } .section--nav-cta .section__body { padding: 0; margin: 0 -5px; } } /* Mobile */ @media (max-width: 767px) { .section--nav-cta { margin-top: -15px; } } /* ------------------------------------------------------------ *\ Section CTA Blocks \* ------------------------------------------------------------ */ .section--cta-blocks { padding: 40px 0; } .section--cta-blocks .section__body { display: -ms-flexbox; display: flex; margin: 0 -5px; } .section--cta-blocks .cta { -ms-flex: 1 1 33.33333%; flex: 1 1 33.33333%; } /* Tablet Portrait */ @media (max-width: 1023px) { .section--cta-blocks { padding: 46px 0 48px; } .section--cta-blocks .section__body { margin: 0 -13px; } } /* Mobile */ @media (max-width: 767px) { .section--cta-blocks { padding: 43px 0 35px; position: relative; } .section--cta-blocks:after { content: ''; width: 50px; height: 100%; position: absolute; right: 0; top: 0; z-index: 10; pointer-events: none; background: linear-gradient(to right, rgba(244,244,244,0) 0%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f4f4f4', endColorstr='#ffffff',GradientType=1 ); } .section--cta-blocks .cta { -ms-flex: 0 0 230px; flex: 0 0 230px; } .section--cta-blocks .cta:last-child { -ms-flex: 0 0 260px; flex: 0 0 260px; padding-right: 30px; } .section--cta-blocks .section__body { margin: 0 -25px; padding-left: 27px; overflow-y: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ------------------------------------------------------------ *\ Section Updates \* ------------------------------------------------------------ */ .section--updates { background: #f2f2f0; padding: 50px 0 38px; } .section--updates .section__inner { display: -ms-flexbox; display: flex; } .section--updates .section__body { -ms-flex: 0 0 74.4%; flex: 0 0 74.4%; max-width: 74.4%; } .section--updates .section__aside { -ms-flex: 0 0 25.6%; flex: 0 0 25.6%; max-width: 25.6%; padding-left: 40px; position: relative; z-index: 11; } .section--updates h2 { font-weight: 500; text-transform: uppercase; margin: 0 0 20px; } /* Tablet Portrait */ @media (max-width: 1023px) { .section--updates { padding: 43px 0 93px; position: relative; } .section--updates:after { content: ''; width: 50px; height: 100%; position: absolute; right: 0; top: 0; z-index: 10; pointer-events: none; background: linear-gradient(to right, rgba(244,244,244,0) 0%,rgba(244,244,244,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f4f4f4', endColorstr='#f4f4f4',GradientType=1 ); } .section--updates h2 { margin-bottom: 21px; font-size: 30px; } .section--updates .section__inner { display: block; } .section--updates .section__body, .section--updates .section__aside { max-width: 100%; } .section--updates .section__aside { margin-top: 40px; padding: 0; } } /* Mobile */ @media (max-width: 767px) { .section--updates { padding: 39px 0 123px; } .section--updates h2 { margin-bottom: 25px; } } /* ------------------------------------------------------------ *\ Section Newsletter \* ------------------------------------------------------------ */ .section--newsletter { position: relative; z-index: 10; overflow: hidden; margin: -61px 0 -61px; } .section--newsletter .section__body { width: 74.4%; position: relative; } .section--newsletter .section__body:before { content: ''; width: 9999px; height: 100%; background: #fff; box-shadow: 0 0 8px rgba(84, 88, 90, .15); position: absolute; right: 0; top: 0; z-index: -1; } /* Tablet Portrait */ @media (max-width: 1023px) { .section--newsletter .section__body { width: 100%; background: #fff; box-shadow: 0 0 8px rgba(84, 88, 90, .15); } .section--newsletter .section__body:before { display: none; } } /* Mobile */ @media (max-width: 767px) { .section--newsletter { margin: -90px 0 -84px; } .section--newsletter .shell { padding-left: 10px; padding-right: 10px; } } /* ------------------------------------------------------------ *\ Section Grid \* ------------------------------------------------------------ */ .section--grid { padding: 111px 0 51px; background: url(../css/images/temp/blue-people-bg.jpg) no-repeat center; background-size: cover; } .section--grid .col { margin-bottom: 30px; } .section--grid .section__head { margin-bottom: 30px; padding: 0 5px; } .section--grid .section__head h2 { text-transform: uppercase; margin: 0; font-size: 32px; color: #fff; } .section--grid .section__foot { text-align: right; padding-top: 14px; padding-right: 6px; } .section--grid .section__foot p { margin: 0; font-family: Helvetica, Arial, sans-serif; font-style: italic; font-size: 13px; color: #fff; } /* Tablet Portrait */ @media (max-width: 1023px) { .section--grid { padding: 99px 0 42px; } .section--grid .section__head { text-align: center; margin-bottom: 22px; padding-left: 40px; } .section--grid .section__foot { padding: 0; } .section--grid .cols { margin-left: -20px; margin-right: -20px; } .section--grid .col { padding: 0 20px; } } /* Mobile */ @media (max-width: 767px) { .section--grid { padding: 111px 0 42px; } .section--grid .col { margin-bottom: 16px; padding-left: 8px; padding-right: 8px; } .section--grid .col:first-child { margin-bottom: 25px; } .section--grid .cols { margin: 0 -8px; } .section--grid .section__head { padding: 0; margin-bottom: 20px; } .section--grid .section__head h2 { font-size: 24px; } .section--grid .section__foot { padding-top: 6px; } .section--grid .section__foot p { font-size: 13px; } } /* ------------------------------------------------------------ *\ Section Interior \* ------------------------------------------------------------ */ .section--interior .section__inner { display: -ms-flexbox; display: flex; padding-bottom: 60px; } .section--interior .section__aside { margin-top: 40px; -ms-flex: 0 0 270px; flex: 0 0 270px; position: relative; z-index: 10; } .section--interior .section__body { padding-left: 65px; width: 100%; } .section--interior.full-width .section__body { padding-left: 97px; padding-bottom: 20px; } .section--interior.full-width .widget--related { float: right; width: 300px; margin: -42px 0 0 30px; } /* Tablet Portrait */ @media (max-width: 1023px) { .section--interior .section__inner { display: block; padding-bottom: 35px; } .section--interior .section__aside { display: none; } .section--interior .section__body, .section--interior.full-width .section__body { padding: 0; } .section--interior.full-width .widget--related { margin: -46px 0 0 30px; } } /* Mobile */ @media (max-width: 767px) { .section--interior .section__inner { padding-bottom: 40px; } .section--interior.full-width .widget--related { width: 100%; margin: 0 0 25px; float: none; } .section--interior.full-width .article--default .article__body { padding-top: 0; } } /* Mobile Portrait */ @media (max-width: 374px) { .section--interior .section__inner { padding: 0; } } /* ------------------------------------------------------------ *\ Section Info \* ------------------------------------------------------------ */ .section--info { padding: 25px 0 23px; position: relative; z-index: 10; } .section--info .section__inner { display: -ms-flexbox; display: flex; position: relative; } .section--info .utilities { top: 23px; } .section--info .section__image { -ms-flex: 0 0 34.2%; flex: 0 0 34.2%; } .section--info .section__image img { width: 100%; height: auto; } .section--info .section__body { -ms-flex: 0 0 65.8%; flex: 0 0 65.8%; max-width: 65.8%; padding-left: 67px; padding-top: 15px; } .section--info .section__body h2 { text-transform: uppercase; position: relative; margin: 0 0 20px; padding-bottom: 18px; position: relative; } .section--info .section__body h2:after { content: ''; width: 38px; height: 3px; background: #c8102e; position: absolute; left: 0; bottom: 0; } .section--info .section__body p { line-height: 1.75; margin: 0; } .section--info.no-image .section__body { -ms-flex: 0 0 80%; flex: 0 0 80%; max-width: 80%; margin: 0 auto; } @media(max-width: 1439px) { .section--info .utilities { margin-left: 0; left: auto; right: 0; } .section--info .section__body, .section--info.no-image .section__body { padding-right: 8.5%; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section--info { padding: 40px 0 49px; } .section--info .utilities { position: static; margin: 30px 0 0; } .section--info .shell { padding-left: 30px; padding-right: 30px; } .section--info .section__inner { display: block; } .section--info .section__image { display: none; } .section--info .section__body, .section--info.no-image .section__body { padding: 0; max-width: 100%; } .section--info .section__body p ~ p { margin-top: 20px; } } /* Mobile */ @media (max-width: 767px) { .section--info { padding: 30px 0 45px; z-index: 10; } .section--info .shell { padding-left: 25px; padding-right: 25px; } .section--info .section__body h2 { font-size: 30px; margin-bottom: 22px; } } /* ------------------------------------------------------------ *\ Section Overview \* ------------------------------------------------------------ */ .section--overview { background: #f2f2f0; padding: 50px 0; } .section--overview .section__head { margin-bottom: 30px; text-align: center; } .section--overview .section__head h6 { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 14px; text-transform: uppercase; color: #c8102e; } .section--overview .section__head h2 { margin: 0; font-size: 36px; text-transform: uppercase; color: #333; } .section--overview .section__body { margin-bottom: 26px; } .section--overview .section__actions { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; } .section--overview .section__actions ul { display: -ms-flexbox; display: flex; list-style: none; margin: 0; padding: 0; -ms-flex-pack: center; justify-content: center; background: #fff; border: 1px solid #0099cc; border-radius: 28px; } .section--overview .section__actions ul li ~ li { border-left: 1px solid #0099cc; } .section--overview .section__actions a { display: block; padding: 15px 36px 14px; font-family: 'futura-pt', sans-serif; font-weight: 600; font-size: 14px; color: #333; text-transform: uppercase; transition: color .2s ease; } .section--overview .section__actions a:hover { color: #0099cc; } .section--overview .section__actions svg { position: relative; top: 2px; margin-right: 10px; } /* Tablet Portrait */ @media (max-width: 1023px) { .section--overview { padding: 52px 0px 49px; position: relative; } .section--overview:after { content: ''; width: 50px; height: 100%; position: absolute; right: 0; top: 0; pointer-events: none; background: linear-gradient(to right, rgba(244,244,244,0) 0%,rgba(244,244,244,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f4f4f4', endColorstr='#f4f4f4',GradientType=1 ); } .section--overview .section__head h2 { font-size: 30px; } .section--overview .section__head h6 { font-size: 13px; margin-bottom: 8px; } .section--overview .section__body { padding: 0 5px; } .section--overview .section__actions a { padding: 15px 43px 14px; } } /* Mobile */ @media (max-width: 767px) { .section--overview { padding: 52px 0px 39px; } .section--overview .section__body { margin-bottom: 24px; } .section--overview .section__actions ul { display: block; border: 0; border-radius: 0; background: none; } .section--overview .section__actions ul li ~ li { border: 0; margin-top: 18px; } .section--overview .section__actions ul a { width: 300px; padding: 16px 43px 16px; border: 1px solid #0099cc; background: #fff; border-radius: 28px; } } /* ------------------------------------------------------------ *\ Section Process \* ------------------------------------------------------------ */ .section--process { position: relative; } .section--process .section__image { width: 44.7%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; left: 0; top: 0; z-index: 9; } .section--process .section__body { margin-left: 44.7%; padding: 80px 84px 106px; } .section--process .section__body h2 { text-transform: uppercase; font-size: 36px; color: #333; margin: 0 0 23px; padding-bottom: 16px; position: relative } .section--process .section__body h2:after { content: ''; width: 54px; height: 3px; background: #c8102e; position: absolute; left: 0; bottom: 0; } /* Tablet Portrait */ @media (max-width: 1023px) { .section--process .section__image { width: 40.5%; } .section--process .section__body { padding: 30px 20px 0; margin-left: 40.5%; } .section--process .section__body h2 { font-size: 28px; padding: 0; margin-bottom: 15px; } .section--process .section__body h2:after { display: none; } .section--process .section__body h6 { font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 13px; text-transform: uppercase; color: #c8102e; margin: 0 0 2px; } } /* Mobile */ @media (max-width: 767px) { .section--process .section__image { width: 100%; position: static; height: 313px; } .section--process .section__body { margin-left: 0; padding: 50px 0 0; } .section--process .section__body h2 { font-size: 26px; margin-bottom: 23px; } .section--process .section__body h6 { margin-bottom: 6px; } } /* ------------------------------------------------------------ *\ Section Archive \* ------------------------------------------------------------ */ .section--archive { padding: 60px 0 40px; position: relative; } .section--archive .section__body { width: 66%; margin: 0 auto; } .section--archive .section__body h2 { color: #333; margin: 0 0 20px; padding-bottom: 19px; position: relative; text-transform: uppercase; } .section--archive .section__body h2:after { content: ''; width: 40px; height: 3px; background: #c8102e; position: absolute; left: 0; bottom: 0; } .section--archive .section__body p { line-height: 1.75; margin: 0 0 20px; } .section--archive .section__body .btn--link { font-weight: 600; font-size: 14px; } /* Tablet Portrait */ @media (max-width: 1023px) { .section--archive { padding: 54px 0 50px; } .section--archive .section__body { width: 100%; padding: 0 5px; } .section--archive .section__body h2 { font-size: 26px; } .section--archive .section__body p { margin-bottom: 10px; } } /* Mobile */ @media (max-width: 767px) { .section--archive { padding: 45px 0 38px; } .section--archive .shell { padding-left: 20px; padding-right: 20px; } .section--archive .section__body h2 { font-size: 24px; } } /* ------------------------------------------------------------ *\ Section CTA Contact \* ------------------------------------------------------------ */ .section--cta-contact { background: url(../css/images/temp/blue-pattern.jpg) no-repeat center; background-size: cover; padding: 50px 0; } .section--cta-contact .cta { margin: 0 15px; } .section--cta-contact .section__head { text-align: center; color: #fff; margin-bottom: 31px; } /* a11y #54: Change color from #fff to #000 */ .section--cta-contact .section__head p { font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 14px; text-transform: uppercase; margin: 0 0 2px; color: #000; } .section--cta-contact .section__head h2 { font-size: 36px; color: #000; margin: 0; text-transform: uppercase; letter-spacing: -.01em; } .section--cta-contact .section__body { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-flow: row wrap; flex-flow: row wrap; } /* Tablet Portrait */ @media (max-width: 1023px) { .section--cta-contact { padding: 59px 0 64px; } .section--cta-contact .cta { margin: 0 12px; } .section--cta-contact .section__head { margin-bottom: 26px; } .section--cta-contact .section__body { margin: 0 -12px; } } /* Mobile */ @media (max-width: 767px) { .section--cta-contact { padding: 59px 0 43px; } .section--cta-contact .section__head { margin-bottom: 32px; } .section--cta-contact .section__head h2 { font-size: 28px; } .section--cta-contact .section__head p { margin-bottom: 10px; } .section--cta-contact .section__body { display: block; } .section--cta-contact .cta { margin: 0 auto; } .section--cta-contact .cta ~ .cta { margin-top: 26px; } } /* ------------------------------------------------------------ *\ Section Program FAQ \* ------------------------------------------------------------ */ .section--program-faq { position: relative; } .section--program-faq .utilities { top: 0; } .section--program-faq .section__head { background: #f2f2f0; margin-bottom: 30px; } .section--program-faq .section__body { padding: 0 8.5%; position: relative; } .section--program-faq .section__actions { padding: 60px 0 79px; } @media (max-width: 1439px) { .section--program-faq .utilities { margin-left: 0; left: auto; right: 0; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section--program-faq .section__body { padding: 0 0 80px; } .section--program-faq .utilities { width: 100%; position: absolute; margin: 20px 0 0; top: auto; bottom: 0; } } /* Mobile */ @media (max-width: 767px) { .section--program-faq .section__actions { padding: 20px 0 40px; } } /* ------------------------------------------------------------ *\ Section Program Products \* ------------------------------------------------------------ */ .section--program-products { position: relative; } .section--program-products .utilities { top: 46px; } .section--program-products .section__body { padding: 51px 14.5% 80px; position: relative; } @media(max-width: 1439px) { .section--program-products .utilities { margin-left: 0; left: auto; right: 0; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section--program-products .section__body { padding: 30px 0; } .section--program-products .utilities { top: 0; margin: 30px 0 0; } } /* ------------------------------------------------------------ *\ Section Event Default \* ------------------------------------------------------------ */ .section--event-default { position: relative; overflow: hidden; padding: 0 0 90px; } .section--event-default .section__inner { display: -ms-flexbox; display: flex; } .section--event-default .section__aside { margin-top: 40px; -ms-flex: 0 0 270px; flex: 0 0 270px; position: relative; z-index: 10; } .section--event-default .section__body { padding-left: 65px; } .section--event-default .section__content { position: relative; } .section--event-default .heading { position: relative; padding: 35px 0 33px; } .section--event-default .heading h1 { font-size: 48px; margin: 0 0 16px; } .section--event-default .heading:before { content: ''; width: 9999px; height: 100%; background: #4f758b; position: absolute; left: -50vw; bottom: 0; z-index: -1; } .section--event-default .heading .heading__inner { padding: 0; } .section--event-default .widget--nav .widget__head { background: #fff; border-bottom: 1px solid rgba(79, 117, 139, .2); } .section--event-default .widget--nav .widget__head h6 { color: #333; } .section--event-default .widget--nav .widget__body > ul > li > a { color: #54585a; } .section--event-default .paging { margin: 40px 0 0; } /* Tablet Portrait */ @media (max-width: 1023px) { .section--event-default { padding: 0 0 40px; } .section--event-default .section__aside { display: none; } .section--event-default .utilities { margin: 0; } .section--event-default .section__body { padding: 0; } .section--event-default .section__content { padding: 40px 0 0; } } /* Mobile */ @media (max-width: 767px) { .section--event-default .heading { padding: 39px 0 32px; } .section--event-default .heading h1 { font-size: 36px; line-height: 1.1; } .section--event-default .section__content { padding: 20px 0 0; } } /* Mobile Portrait */ @media (max-width: 374px) { .section--event-default .section__inner { display: block; } .section--event-default .section__body { -ms-flex: 0 0 100%; flex: 0 0 100%; } } /* ------------------------------------------------------------ *\ Section Event Listing \* ------------------------------------------------------------ */ .section--event-listing .filter { padding-left: 0; position: relative; z-index: 1; } .section--event-listing .filter:before { content: ''; width: 9999px; height: 100%; background: #f2f2f0; position: absolute; left: -50vw; bottom: 0; z-index: -1; } .section--event-listing .form--search { width: 208px; } .section--event-listing .form--filter .form__label ~ .form__label { margin-left: 26px; } .section--event-listing .list-filter { margin-bottom: 30px; } .section--event-listing .utilities { top: 10px; } @media(max-width: 1439px) { .section--event-listing .utilities { margin-left: 0; left: auto; right: 0; } } /* Small Desktop */ @media (max-width: 1169px) { .section--event-listing .utilities { top: 0; } .section--event-listing .form--search { width: 160px; } } /* Mobile */ @media (max-width: 767px) { .section--event-listing .form--search { width: 100%; } .section--event-listing .list-filter { margin-bottom: 10px; } .section--event-listing .form--filter .form__label ~ .form__label { margin-left: 0; margin-bottom: 5px; } } /* Mobile */ @media (max-width: 767px) { .section--event-listing .utilities { display: none; } } /* ------------------------------------------------------------ *\ Section Event Details \* ------------------------------------------------------------ */ .section--event-details { padding: 0 0 60px; } .section--event-details .heading { padding: 35px 0 31px; } .section--event-details .heading h1 { font-size: 46px; margin: 0 0 3px; line-height: 1.2; } .section--event-details .heading p { font-size: 20px; } .section--event-details .section__content { display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; -ms-flex-flow: row wrap; flex-flow: row wrap; } .section--event-details .utilities { top: 26px; } .section--event-details-full { padding: 0 0 79px; } .section--event-details-full .heading { padding: 35px 10px 3px 0; } .section--event-details-full .utilities { top: 53px; } @media(max-width: 1439px) { .section--event-default .section__content { padding-right: 8.5%; } .section--event-details .utilities { margin-left: 0; left: auto; right: 0; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section--event-details .heading h1 { font-size: 42px; } .section--event-details .utilities { top: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } .section--event-default .section__content { padding-right: 0; } } /* Mobile */ @media (max-width: 767px) { .section--event-details { padding: 0 0 100px; position: relative; } .section--event-details .section__content { position: static; } .section--event-details .heading h1 { font-size: 36px; line-height: 1.1; } .section--event-details .heading p { font-size: 18px; line-height: 1.56; } .section--event-details .utilities { position: absolute; top: auto; left: 0; bottom: 20px; } .section--event-details-full { padding: 0 0 90px; } .section--event-details-full .heading { padding: 39px 0 80px 0; } .section--event-details-full .heading h1 { margin-bottom: 19px; } .section--event-details-full .heading h6 { display: none; } .section--event-details-full .section__content { padding: 11px 0 0; } } /* ------------------------------------------------------------ *\ Section Login \* ------------------------------------------------------------ */ .section--login { padding: 0 0 118px; } /* Mobile */ @media (max-width: 767px) { .section--login { padding: 0; } .section--login .shell { padding: 0; } } /* ------------------------------------------------------------ *\ Section Program Content \* ------------------------------------------------------------ */ .section--program-content { position: relative; padding-bottom: 29px; } .section--program-content .utilities { top: 46px; } .section--program-content .heading { padding: 30px 0 36px; } .section--program-content .section__body-inner { position: relative; padding: 40px 17.095% 30px; } .section--program-content .section__body-inner > h2 { color: #333; text-transform: uppercase; padding-bottom: 18px; margin-bottom: 20px; position: relative; } .section--program-content .section__body-inner > h2:after { content: ''; width: 38px; height: 3px; background: #c8102e; position: absolute; left: 0; bottom: 0; } .section--program-content .section__body-inner > h3 { margin: 43px 0 20px; position: relative; z-index: 4; } .section--program-content .section__body-inner > p { line-height: 1.75; margin-bottom: 20px; } .section--program-content .section__body-inner > h3 + .video--embed { margin-top: -5px; } .section--program-content .section__body-inner > .video--embed + h3 { margin-top: 39px; margin-bottom: 17px; } .section--program-content .accordion { position: relative; z-index: 5; margin-top: -36px; margin-bottom: 50px; } .section--program-content .accordion .accordion__toggle-wrapper { margin-bottom: 15px; } .section--program-content .video--embed { padding-bottom: 56.25%; } @media(max-width: 1439px) { .section--program-content .utilities { margin-left: 0; left: auto; right: 0; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section--program-content .utilities { top: 0; margin-top: 30px; } .section--program-content .section__body-inner { padding: 40px 0 0; } } /* ------------------------------------------------------------ *\ Section Program Overview \* ------------------------------------------------------------ */ .section--program-overview { position: relative; } .section--program-overview .semicircle { background: #f2f2f0; z-index: 1; } .section--program-overview .section__body { background: #f2f2f0; padding-bottom: 14px; } .section--program-overview .section__body-inner { position: relative; } .section--program-overview .utilities { top: 45px; } .section--program-overview .section__group { display: -ms-flexbox; display: flex; padding: 47px 0; border-top: 1px solid #dce3e8; width: 100%; max-width: 1160px; } .section--program-overview .section__group:first-child { border-top: 0; } .section--program-overview .section__group-body { width: 100%; } .section--program-overview .section__group-head { -ms-flex: 0 0 270px; flex: 0 0 270px; margin-right: 45px; } .section--program-overview .section__group-head h2 { color: #333; text-transform: uppercase; margin: 0 0 5px; } .section--program-overview .section__group-head p { margin: 0; font-size: 14px; line-height: 1.86; } .section--program-overview .section__group ~ .section__group { margin-top: 3px; padding: 40px 0 37px; } @media (max-width: 1439px) { .section--program-overview .utilities { margin-left: 0; left: auto; right: 0; } .section--program-overview .section__body-inner { padding-right: 8.5%; } } /* Small Desktop */ @media (max-width: 1169px) { .section--program-overview .section__group { display: block; } .section--program-overview .section__group-head { margin: 0 0 30px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section--program-overview .section__body { padding-bottom: 30px; } .section--program-overview .section__body-inner { padding: 0; } .section--program-overview .utilities { top: 0; margin-top: 0; } } /* ------------------------------------------------------------ *\ Section Program Landing Ad \* ------------------------------------------------------------ */ .section--program-landing-ad { background: #fff url(images/temp/pcmh-whitepaper-ad-bg.jpg) no-repeat top center; background-size: 100% auto; } .section--program-landing-ad .program-landing-ad-content { padding: 50px 0; } .section--program-landing-ad .program-landing-ad-content h6 { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 14px; text-transform: uppercase; color: #c8102e; } .section--program-landing-ad .program-landing-ad-content h2 { font-size: 36px; } .section--program-landing-ad .program-landing-ad-content blockquote { font-size: 18px; color: #4F758B; line-height: 26px; } .section--program-landing-ad .program-landing-ad-content ul { margin-left: 30px; margin-top: -10px; } .section--program-landing-ad .program-landing-ad-content ul li { margin-bottom: 6px; } .section--program-landing-ad .program-landing-ad-graphic { display: none; } @media (min-width: 800px) { .section--program-landing-ad .shell { display: flex; flex-flow: row no-wrap; } .section--program-landing-ad .program-landing-ad-content { width: 70%; flex: 1 0 70%; } .section--program-landing-ad .program-landing-ad-content blockquote { font-size: 20px; } .section--program-landing-ad .program-landing-ad-content .btn { padding: 12px 40px; font-size: 20px; height: auto; } .section--program-landing-ad .program-landing-ad-graphic { display: block; width: 30%; flex: 1 0 30%; margin-top: auto; } } @media (min-width: 960px) { .section--program-landing-ad .program-landing-ad-content { width: 56%; flex: 1 0 56%; } .section--program-landing-ad .program-landing-ad-graphic { width: 44%; flex: 1 0 44%; } } /* ------------------------------------------------------------ *\ Section Program Library \* ------------------------------------------------------------ */ .section--program-library { position: relative; } .section--program-library .filter { padding-left: 8.5%; } .section--program-library .utilities { top: 18px; } .section--program-library .section__bar { background: #f2f2f0; } .section--program-library .section__video { background: #344249; } .section--program-library .section__video h2 { font-size: 32px; color: #fff; margin: 21px 0 2px; position: relative; } .section--program-library .section__video h2 span { float: right; font-family: 'Lato', sans-serif; font-weight: 400; font-size: 14px; opacity: .6; } .section--program-library .section__video .utilities { top: 89px; } .section--program-library .section__video-inner, .section--program-library .section__body-inner { padding: 38px 8.5% 40px; position: relative; } .section--program-library .section__video-inner > p { margin: 0; font-size: 16px; color: #fff; line-height: 1.5; } .section--program-library .section__video-inner li { font-size: 16px; color: #fff; line-height: 1.4; } .section--program-library .section__video-inner ul, .section--program-library .section__video-inner ol { margin: 20px 0 20px 30px; } @media(max-width: 1439px) { .section--program-library .section__video-inner .utilities, .section--program-library .section__body-inner .utilities { margin-left: 0; left: auto; right: 0; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section--program-library .filter { padding-left: 0; } .section--program-library .section__video-inner, .section--program-library .section__body-inner { padding: 38px 0 40px; } .section--program-library .section__video-inner .utilities { top: 0; margin: 30px 0 0; } .section--program-library .section__body-inner .utilities { top: 0; margin: 0 0 30px; } } /* Mobile */ @media (max-width: 767px) { .section--program-library .section__video h2 { font-size: 24px; } .section--program-library .section__video h2 span { display: block; float: none; margin: 5px 0 0; } } /* ------------------------------------------------------------ *\ Section Standard \* ------------------------------------------------------------ */ .section--standard { position: relative; } .section--standard .section__inner { display: -ms-flexbox; display: flex; } .section--standard .section__aside { -ms-flex: 0 0 270px; flex: 0 0 270px; margin-top: 40px; position: relative; z-index: 10; } .section--standard .section__body { padding-left: 65px; } .section--standard .section__content { padding: 30px 0; position: relative; } .section--standard .utilities { top: 35px; } .section--standard .filter, .section--standard .heading { position: relative; padding-left: 0; padding-right: 0; } .section--standard .heading .heading__inner { padding-left: 0; padding-right: 0; } .section--standard .filter:before, .section--standard .heading:before { content: ''; width: 9999px; height: 100%; position: absolute; left: -50vw; bottom: 0; z-index: -1; } .section--standard .heading:before { background: #4f758b; } .section--standard .filter:before { background: #f2f2f0; } .section--standard .widget--nav .widget__head { background: #fff; } .section--standard .widget--nav .widget__head h6 { color: #333; } @media(max-height: 679px) and (min-width: 1025px) { .section--standard .section__aside { margin-top: 25px; } } @media(max-width: 1439px) { .section--standard .utilities { margin-left: 0; left: auto; right: 0; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section--standard .section__inner { display: block; } .section--standard .section__aside { display: none; } .section--standard .section__body { padding: 0; } } /* ------------------------------------------------------------ *\ Section Specifications \* ------------------------------------------------------------ */ .section--specifications .heading { padding: 34px 0 36px; } .section--specifications .heading h1 { font-size: 48px; margin-bottom: 14px; } .section--specifications .heading p { font-size: 20px; line-height: 1.4; } .section--specifications .form--search { width: 210px; } .section--specifications .section__content { padding: 30px 0 35px; } @media(max-width: 1439px) { .section--specifications .section__content { padding-right: 8.5%; } } /* Small Desktop */ @media (max-width: 1169px) { .section--specifications .form--search { width: 140px; } .section--specifications .selectric { min-width: 140px; } .section--specifications .form--filter .form__controls, .section--specifications .form--filter .form__controls ~ .form__controls { width: 140px; min-width: 140px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section--specifications .heading { padding: 32px 0 30px; } .section--specifications .heading h1 { font-size: 42px; margin-bottom: 5px; padding: 0 5px; } .section--specifications .heading p { font-size: 18px; line-height: 1.56; padding: 0 7px; } .section--specifications .section__content { padding-left: 5px; padding-right: 5px; } .section--specifications .filter { padding-left: 5px; padding-right: 5px; } .section--specifications .form--search { width: 207px; } .section--specifications .utilities { top: 0; margin-top: 0; margin-bottom: 30px; } } /* Mobile */ @media (max-width: 767px) { .section--specifications .form--search { width: 100%; } .section--specifications .form--filter .form__controls, .section--specifications .form--filter .form__controls ~ .form__controls { width: 100%; max-width: 100%; } } /* ------------------------------------------------------------ *\ Section Notifications \* ------------------------------------------------------------ */ .section--notifications .heading { padding: 35px 0 34px; } .section--notifications .heading h1 { font-size: 49px; margin-bottom: 8px; } .section--notifications .heading p { font-size: 21px; letter-spacing: .014em; } .section--notifications .section__body { padding: 36px 0 60px; } .section--notifications .section__actions { padding: 0 0 80px; } .notification-setting-actions { max-width: 768px; margin: 0 auto 20px; text-align: right; } .notification-setting-actions .btn { font-size: 16px; } /* Tablet Portrait */ @media (max-width: 1023px) { .section--notifications .section__actions { padding: 0 0 50px; } } /* ------------------------------------------------------------ *\ Section Email Settings \* ------------------------------------------------------------ */ .section--email-settings .heading { padding: 35px 0 34px; } .section--email-settings .heading h1 { font-size: 49px; margin-bottom: 8px; } .section--email-settings .heading p { font-size: 21px; letter-spacing: .014em; } .section--email-settings .section__body { padding: 31px 0 65px; } /* ------------------------------------------------------------ *\ Section Saved \* ------------------------------------------------------------ */ .section--saved .heading { padding: 35px 0 36px; } .section--saved .heading h1 { font-size: 49px; margin-bottom: 8px; } .section--saved .heading p { font-size: 21px; } .section--saved .section__body { padding: 31px 0 32px; } .section--saved .section__actions { padding: 0 0 80px; } /* Tablet Portrait */ @media (max-width: 1023px) { .section--saved .section__actions { padding: 0 0 50px; } } /* ------------------------------------------------------------ *\ Section Search Results \* ------------------------------------------------------------ */ .section--search-results .filter { padding: 27px 0 0 0; } .section--search-results .alert { margin-top: 2px; margin-right: 6px; } .section--search-results .section__head { background: #4f758b; color: #fff; padding: 36px 0 39px; } .section--search-results .section__body { overflow: hidden; } .section--search-results .section__body-inner { display: -ms-flexbox; display: flex; position: relative; padding: 0 8.5%; } .section--search-results .section__aside { -ms-flex: 0 0 221px; flex: 0 0 221px; max-width: 221px; padding-right: 30px; position: relative; padding-bottom: 80px; } .section--search-results .section__aside:before { content: ''; width: 9999px; height: 100%; background: #f2f2f0; position: absolute; right: 0; top: 0; z-index: -1; } .section--search-results .section__content { -ms-flex: 0 0 calc(100% - 221px); flex: 0 0 calc(100% - 221px); max-width: calc(100% - 221px); padding: 28px 0 80px 44px; } /* Tablet Portrait */ @media (max-width: 1023px) { .section--search-results .section__body-inner { padding: 0; } } /* Mobile */ @media (max-width: 767px) { .section--search-results .section__head { padding: 36px 0 20px; } .section--search-results .section__body-inner { display: block; } .section--search-results .section__aside { max-width: 100%; padding: 0; } .section--search-results .section__aside:before { right: -25px; } .section--search-results .filter { padding: 0; } .section--search-results .section__content { max-width: 100%; padding: 20px 0 82px; } } /* ------------------------------------------------------------ *\ Section Data Tables \* ------------------------------------------------------------ */ .section--data-tables .filter { padding: 27px 0 0 0; } .section--data-tables .filter .filter__inner { display: block; } .section--data-tables .filter.expanded .filter__inner { max-height: 1200px; } .section--data-tables .utilities { top: 25px; } .section--data-tables .heading { padding: 35px 0 33px; } .section--data-tables .heading h1 { font-size: 48px; margin-bottom: 13px; } .section--data-tables .heading p { width: 73%; font-size: 20px; letter-spacing: .015em; } .section--data-tables .heading .heading__inner { padding: 0; } .section--data-tables .section__body { overflow: hidden; } .section--data-tables .section__body-inner { display: -ms-flexbox; display: flex; position: relative; } .section--data-tables .section__aside { -ms-flex: 0 0 230px; flex: 0 0 230px; max-width: 230px; padding-right: 52px; position: relative; padding-bottom: 80px; } .section--data-tables .section__aside:before { content: ''; width: 9999px; height: 100%; background: #f2f2f0; position: absolute; right: 0; top: 0; z-index: -1; } .section--data-tables .section__content { -ms-flex: 0 0 calc(100% - 230px); flex: 0 0 calc(100% - 230px); max-width: calc(100% - 230px); padding: 30px 0 37px 40px; } .section--data-tables .form--refine .form__head { margin-bottom: 17px; } .section--data-tables .form--refine .form__group { padding: 18px 0 22px; } .section--data-tables .checkbox:not(.checkbox--colored):not(.checkbox--with-icon) label { padding-left: 29px; } @media(max-width: 1439px) { .section--data-tables .utilities { left: auto; right: 0; margin-left: 0; } .section--data-tables .section__body-inner { padding-right: 8.5%; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section--data-tables .section__body-inner { padding-right: 0; -ms-flex-flow: row wrap; flex-flow: row wrap; } .section--data-tables .section__content { padding-bottom: 100px; } .section--data-tables .utilities { position: absolute; bottom: 40px; top: auto; left: 270px; right: auto; } } /* Mobile */ @media (max-width: 767px) { .section--data-tables .heading h1 { font-size: 36px; } .section--data-tables .heading p { width: 100%; font-size: 18px; line-height: 1.56; } .section--data-tables .section__body-inner { display: block; padding-bottom: 30px; } .section--data-tables .section__aside { max-width: 100%; padding: 0; } .section--data-tables .section__aside:before { right: -25px; } .section--data-tables .filter { padding: 0; } .section--data-tables .section__content { max-width: 100%; padding: 25px 0 0; } .section--data-tables .utilities { position: static; margin: 0; } } /* ------------------------------------------------------------ *\ Section Map \* ------------------------------------------------------------ */ .section--map { position: relative; } .section--map .utilities { top: 80px; } .section--map .section__body-inner { position: relative; padding: 0 2% 0 16%; } .section--map .article--default { padding: 20px 0 61px; } .section--map .article--default .article__entry p { max-width: 100%; } @media(max-width: 1439px) { .section--map .utilities { left: auto; right: 0; margin-left: 0; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section--map .section__body-inner { padding: 0 0 30px; } .section--map .article--default { padding: 20px 0 30px; } .section--map .utilities { margin: 0; top: 0; } } /* ------------------------------------------------------------ *\ Section News \* ------------------------------------------------------------ */ .section--news .widget--nav .widget__head { border-bottom: 1px solid rgba(0,0,0,.1); } .section--news .heading h1 { font-size: 48px; margin-bottom: 16px; } .section--news .heading p { width: 90%; font-size: 20px; line-height: 1.4; } .section--news .utilities { top: 40px; } .section--news .form--search { width: 208px; } .section--news .paging { margin-top: 65px; } .section--news .section__content { padding: 43px 0 30px; } @media(max-width: 1439px) { .section--news .section__content { padding-right: 8.5%; } } /* Small Desktop */ @media (max-width: 1169px) { .section--news .form--search { width: 160px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section--news .heading { padding: 32px 5px 28px; } .section--news .heading h1 { font-size: 42px; line-height: 1.2; margin-bottom: 10px; } .section--news .heading p { width: 100%; font-size: 18px; line-height: 1.56; } .section--news .utilities { display: none; } .section--news .form--search { width: 208px; } .section--news .filter .filter__inner { padding-left: 5px; padding-right: 5px; } .section--news .section__content { padding-right: 0; } .section--news .col--1of2 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } /* Mobile */ @media (max-width: 767px) { .section--news .heading { padding: 39px 0 42px; } .section--news .heading h1 { font-size: 34px; } .section--news .form--search { width: 100%; } .section--news .filter .filter__inner { padding-left: 25px; padding-right: 25px; } .section--news .col--1of2 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .section--news .col ~ .col, .section--news .cols ~ .cols { margin-top: 20px; } } /* ------------------------------------------------------------ *\ Section White Papers \* ------------------------------------------------------------ */ .section--white-papers .section__content { padding: 40px 0 80px; } .section--white-papers .paging { margin-top: 40px; } @media(max-height: 679px) and (min-width: 1025px) { .section--white-papers .section__content { padding: 30px 0 80px; } } @media(max-width: 1439px) { .section--white-papers .section__content { padding-right: 8.5%; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section--white-papers .section__content { padding-right: 0; } } /* Mobile */ @media (max-width: 767px) { .section--white-papers .section__content { padding: 40px 0; } } /* ------------------------------------------------------------ *\ Section Letters \* ------------------------------------------------------------ */ .section--letters .paging { margin-top: 58px; } .section--letters .utilities { top: 30px; } .section--letters .list-news-listing { padding-bottom: 24px; border-bottom: 2px solid #dce3e8; } .section--letters .list-news-listing li ~ li { min-height: 102px; margin-top: 23px; padding-top: 23px; } .section--letters .section__content { padding: 37px 0 80px; } @media(max-width: 1439px) { .section--letters .section__content { padding-right: 8.5%; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section--letters .utilities { display: none; } .section--letters .paging { margin-top: 67px; } .section--letters .section__content { padding: 32px 5px 61px; } } /* Mobile */ @media (max-width: 767px) { .section--letters .paging { margin-top: 40px; } .section--letters .section__content { padding: 39px 0 59px; } } /* ------------------------------------------------------------ *\ Section News Single \* ------------------------------------------------------------ */ .section--news-single .heading { padding: 32px 0 31px; } .section--news-single .heading h1 { font-size: 48px; line-height: 1.1; } .section--news-single .heading p { font-style: italic; font-size: 24px; } .section--news-single .utilities { top: 52px; } .section--news-single .section__content { padding: 46px 0 70px; } .section--news-single .article .article__entry { width: 86%; } .section--news-single .article .article__entry h6 { font-family: 'Lato', sans-serif; font-weight: 400; font-size: 14px; color: #707372; text-transform: uppercase; margin: 0 0 14px; padding-bottom: 23px; position: relative; } .section--news-single .article .article__entry h6:after { content: ''; width: 38px; height: 3px; background: #c8102e; position: absolute; left: 0; bottom: 0; } .section--news-single .article .article__entry p { font-size: 16px; line-height: 1.75; margin-bottom: 20px; } .section--news-single .media-info { margin: 29px 0 0; } .section--news-single .media-info .media-info__head h2 { padding-bottom: 18px; margin-bottom: 30px; } /* Tablet Portrait */ @media (max-width: 1023px) { .section--news-single .heading h1 { font-size: 42px; } .section--news-single .heading p { font-size: 18px; line-height: 1.56; } .section--news-single .section__content { padding: 40px 0; } .section--news-single .article .article__entry { width: 100%; } .section--news-single .utilities { position: static; margin-top: 35px; } .section--news-single .col--1of2 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } /* Mobile */ @media (max-width: 767px) { .section--news-single .heading h1 { font-size: 34px; } .section--news-single .col--1of2 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .section--news-single .col ~ .col { margin-top: 20px; } } /* ------------------------------------------------------------ *\ Section White Paper \* ------------------------------------------------------------ */ .section--white-paper { padding: 33px 0 100px; } .section--white-paper .utilities { top: 36px; } .section--white-paper .section__head { margin-bottom: 20px; padding-bottom: 22px; border-bottom: 1px solid #dce3e8; } .section--white-paper .section__head p { font-size: 14px; opacity: .6; margin-bottom: 1px; } .section--white-paper .section__head h1 { color: #333; line-height: 1.13; margin-bottom: 14px; } .section--white-paper .section__head h3 { font-family: 'Lato', sans-serif; font-weight: 300; font-style: italic; font-size: 24px; color: #54585a; line-height: 1.17; margin-bottom: 0; } .section--white-paper .section__body { display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; position: relative; } .section--white-paper .section__content { -ms-flex: 0 0 63.5%; flex: 0 0 63.5%; } .section--white-paper .section__aside { -ms-flex: 0 0 31.6%; flex: 0 0 31.6%; } .section--white-paper .section__aside img { max-width: 100%; height: auto; margin-bottom: 30px; margin-left: auto; margin-right: auto; } .section--white-paper .article .article__entry h6 { font-family: 'Lato', sans-serif; font-weight: 700; margin: 40px 0 0; } .section--white-paper .article .article__entry img { margin-top: -13px; } .section--white-paper .article .article__entry > ul, .section--white-paper .article .article__entry > ol { clear: none; margin: 18px 0 55px; } .section--white-paper .article .article__entry > ul li, .section--white-paper .article .article__entry > ol li { line-height: 1.75; } .section--white-paper .article .article__entry > ul li ~ li, .section--white-paper .article .article__entry > ol li ~ li { margin-top: 20px; } .section--white-paper .article .article__share { width: 158%; border-bottom: 0; margin: 13px 0 0; } .section--white-paper .share { padding: 30px 0 0; } /* No Form */ .section--white-paper.no-form { padding: 33px 0 143px; } .section--white-paper.no-form .utilities { top: 78px; } .section--white-paper.no-form .article .article__entry p { max-width: 100%; } .section--white-paper.no-form .article .article__entry img { margin-top: 17px; margin-bottom: 20px; } .section--white-paper.no-form .article .article__entry img.alignleft { margin-right: 30px; } .section--white-paper.no-form .article .article__entry > ul, .section--white-paper.no-form .article .article__entry > ol { overflow: hidden; } .section--white-paper.no-form .article .article__share { margin: 41px 0 0; } @media(max-width: 1439px) { .section--white-paper .section__body { padding-right: 8.5%; } .section--white-paper .utilities { margin-left: 0; right: 0; left: auto; } } /* Small Desktop */ @media (max-width: 1169px) { .section--white-paper .article .article__share { width: 172%; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section--white-paper { padding: 33px 0 30px; } .section--white-paper .utilities { position: static; margin-top: 35px; } .section--white-paper .section__body { padding-right: 0; } .section--white-paper .shell { padding-left: 30px; padding-right: 30px; } .section--white-paper .section__head { padding-bottom: 18px; margin-bottom: 33px; } .section--white-paper .section__head p { margin-bottom: 2px; } .section--white-paper .section__head h1 { font-size: 42px; line-height: 1.19; margin-bottom: 9px; } .section--white-paper .section__head h3 { font-size: 20px; line-height: 1.4; } .section--white-paper .section__body { -ms-flex-flow: row wrap; flex-flow: row wrap; } .section--white-paper .section__aside, .section--white-paper .section__content { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .section--white-paper.with-sidebar .section__aside { -ms-flex: 0 0 40%; flex: 0 0 40%; max-width: 40%; margin-top: 0; } .section--white-paper.with-sidebar .section__content { -ms-flex: 0 0 60%; flex: 0 0 60%; max-width: 60%; padding-right: 30px; } .section--white-paper.with-sidebar .article .article__entry img { float: none; width: 100%; margin: 20px 0; } .section--white-paper .section__aside { margin-top: 30px; } .section--white-paper .article .article__entry h6 { margin: 22px 0 0; } .section--white-paper.no-form { padding: 33px 0 80px; } .section--white-paper.no-form .section__content { -ms-flex: 0 0 56.9%; flex: 0 0 56.9%; max-width: 56.9%; padding-right: 50px; } .section--white-paper.no-form .section__aside { -ms-flex: 0 0 43.1%; flex: 0 0 43.1%; margin-top: -7px; } .section--white-paper.no-form .article .article__entry > ul, .section--white-paper.no-form .article .article__entry > ol { width: 200%; margin: 18px 0 20px; } .section--white-paper.no-form .article .article__entry > ul ~ p, .section--white-paper.no-form .article .article__entry > ol ~ p { max-width: none; width: 200%; } .section--white-paper.no-form .article .article__entry img { margin-top: 8px; } .section--white-paper.no-form .article .article__entry p { margin-bottom: 8px; } .section--white-paper.no-form .article .article__entry img.alignleft, .section--white-paper.no-form .article .article__entry img.alignright, .section--white-paper.no-form .article .article__entry img.aligncenter { display: block; float: none; } .section--white-paper .article .article__share { width: 100%; } .section--white-paper.no-form .article .article__share { width: 200%; margin: 26px 0 0; } } /* Mobile */ @media (max-width: 767px) { .section--white-paper, .section--white-paper.no-form { padding: 38px 0 60px; } .section--white-paper .shell { padding-left: 22px; padding-right: 22px; } .section--white-paper .section__head { margin-bottom: 38px; padding-left: 3px; padding-right: 3px; } .section--white-paper .section__head h1 { font-size: 34px; line-height: 1.18; } .section--white-paper .section__head p { margin-bottom: 8px; } .section--white-paper .article .article__entry h6 { margin-top: 25px; } .section--white-paper .section__aside, .section--white-paper.no-form .section__aside { -ms-flex-order: -1; order: -1; margin-bottom: 31px; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding: 0; margin-top: 0; } .section--white-paper .section__content, .section--white-paper.no-form .section__content { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding: 0; } .section--white-paper.no-form .article .article__entry p { margin-bottom: 20px; } .section--white-paper.no-form .article .article__entry img { width: 100%; height: auto; margin: 8px 0 16px; } .section--white-paper.no-form .article .article__entry > ul, .section--white-paper.no-form .article .article__entry > ol, .section--white-paper.no-form .article .article__entry > ul ~ p, .section--white-paper.no-form .article .article__entry > ol ~ p { width: 100%; } .section--white-paper.no-form .article .article__share { width: 100%; margin: 21px 0 0; } .section--white-paper.with-sidebar .section__aside, .section--white-paper.with-sidebar .section__content { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding: 0; } } /* ------------------------------------------------------------ *\ Section Letters Single \* ------------------------------------------------------------ */ .section--letters-single { overflow: hidden; } .section--letters-single .widget--nav .widget__head { border-bottom: 1px solid rgba(79, 117, 139, .2); } .section--letters-single .heading { padding: 31px 0 71px; } .section--letters-single .heading h1 { font-size: 44px; } .section--letters-single .heading p { font-style: italic; font-size: 20px; line-height: 1.4; } .section--letters-single .heading:after { content: ''; width: 100%; height: 2000px; background: #f2f2f0; position: absolute; left: -50vw; top: 100%; z-index: -1; } .section--letters-single .article { margin-left: -35px; margin-top: -33px; } .section--letters-single .section__content { padding: 0 0 48px; } .section--letters-single .utilities { top: 75px; } @media(max-width: 1439px) { .section--letters-single .section__content { padding-right: 8.5%; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section--letters-single .heading { padding: 31px 0 38px; } .section--letters-single .heading h1 { font-size: 42px; } .section--letters-single .heading p { font-size: 18px; line-height: 1.56; } .section--letters-single .utilities { position: static; margin: 20px 0; } .section--letters-single .section__content { padding-right: 0; margin: 0; padding-bottom: 10px; } .section--letters-single .article { margin: 30px 0 0; } } /* Mobile */ @media (max-width: 767px) { .section--letters-single .heading h1 { font-size: 34px; } .section--letters-single .article { margin: 0 -25px; } } /* ------------------------------------------------------------ *\ Section Marketing Landing \* ------------------------------------------------------------ */ .section--marketing-landing { padding: 46px 0 60px; } .section--marketing-landing .section__inner { position: relative; } .section--marketing-landing .section__image { max-width: 1400px; height: 474px; margin: 0 -115px; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; z-index: 1; } .section--marketing-landing .section__title { width: 58.2%; padding: 26px 10% 24px 115px; background: #fff; position: absolute; left: 0; bottom: 0; } .section--marketing-landing .section__title h6 { font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 14px; color: #c8102e; text-transform: uppercase; margin: 0 0 10px; } .section--marketing-landing .section__title h1 { font-size: 48px; line-height: 1; color: #333; margin: 0; } .section--marketing-landing .section__bar { width: 1400px; padding: 30px 30px 30px 115px; background: #f2f2f0; margin: 0 -115px; position: relative; z-index: 1; } .section--marketing-landing .section__bar p { width: 55.2%; margin: 0; font-weight: 400; font-size: 18px; line-height: 1.67; } .section--marketing-landing .section__aside { width: 31.7%; position: absolute; right: 0; top: -22px; z-index: 10; } .section--marketing-landing .section__body { width: 60%; padding: 30px 0; } .section--marketing-landing .section__body p { line-height: 1.75; margin-bottom: 18px; } .section--marketing-landing .section__body h3 { color: #4f758b; margin: 0 0 20px; } .section--marketing-landing .list-circles { padding: 0 0 0 12px; margin-bottom: 30px; } .section--marketing-landing .list-circles ul { margin-bottom: 0; margin-top: 12px; } .section--marketing-landing .list-circles li { line-height: 1.75; } .section--marketing-landing .list-circles li:before { top: 13px; } .section--marketing-landing .list-circles li ~ li { margin-top: 20px; } /* Reduced */ .section--marketing-landing.reduced { min-height: 920px; } .section--marketing-landing.reduced .section__title { width: 1400px; position: static; margin: 0 -115px; background: #f2f2f0; padding: 25px 116px; } .section--marketing-landing.reduced .section__title h1, .section--marketing-landing.reduced .section__title h6 { width: 50%; } .section--marketing-landing.reduced .section__body { padding: 20px 0; } .section--marketing-landing.reduced .section__body p { font-size: 18px; line-height: 1.67; margin-bottom: 24px; } /* Desktop Only */ @media (min-width: 1024px) { .section--marketing-landing .section__body { min-height: 820px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section--marketing-landing .section__title { width: 80%; } .section--marketing-landing .section__aside { width: 100%; margin: 20px 0; position: static; } .section--marketing-landing .section__body { width: 100%; min-height: 100vh; } .section--marketing-landing.reduced .section__bar { padding-top: 0; } } /* Mobile */ @media (max-width: 767px) { .section--marketing-landing { padding: 0; } .section--marketing-landing .section__image { margin: 0 -25px; height: auto; padding-top: 144px; background-position: center top; background-size: auto 200px; } .section--marketing-landing .section__title { width: 100%; position: static; padding: 29px 25px 25px; } .section--marketing-landing .section__title h1 { font-size: 34px; line-height: 1.24; } .section--marketing-landing .section__bar, .section--marketing-landing .section__bar p { width: auto; } .section--marketing-landing .section__bar { margin: 0 -25px; padding: 30px 26px 35px; } .section--marketing-landing .section__aside { width: auto; top: 0; margin: -15px -5px 0; position: relative; z-index: 5; } .section--marketing-landing .section__body { width: 100%; padding: 40px 0 112px; } .section--marketing-landing .section__body h3 { font-size: 22px; letter-spacing: -.01em; } .section--marketing-landing .section__body p + h3 { margin-top: 25px; } /* Reduced */ .section--marketing-landing.reduced .section__title { width: auto; } .section--marketing-landing.reduced .section__title h1, .section--marketing-landing.reduced .section__title h6 { width: 100%; } .section--marketing-landing.reduced .section__body { padding: 40px 0 112px; } } /* ------------------------------------------------------------ *\ Section Testimonials \* ------------------------------------------------------------ */ .section--testimonials { background: #4f758b; padding: 0; } .section--testimonials .slider { position: relative; top: -72px; margin-bottom: -44px; } /* Mobile */ @media (max-width: 767px) { .section--testimonials .slider { top: -68px; margin-bottom: -36px; } } /* ------------------------------------------------------------ *\ Section List Items \* ------------------------------------------------------------ */ .section--list-items .heading { padding: 35px 0 36px; } .section--list-items .heading h1 { font-size: 49px; margin: 0 0 15px; } .section--list-items .heading p { font-size: 21px; line-height: 1.4; } .section--list-items .utilities { top: -6px; } .section--list-items .section__body { padding: 40px 0 87px; } .section--list-items .section__body-inner { position: relative; } /* With Image */ .section--list-items.with-image .section__body { padding: 40px 0 76px; } .section--list-items.with-image .list-items { width: 71%; } .section--list-items.with-image .list-item { padding-bottom: 28px; } .section--list-items.with-image .list-item ~ .list-item { margin-top: 40px; } /* Tablet Portrait */ @media (max-width: 1023px) { .section--list-items .heading h1 { font-size: 42px; } .section--list-items .heading p { font-size: 18px; line-height: 1.56; } .section--list-items .utilities { display: none; } .section--list-items.with-image .list-items { width: 100%; } } /* Mobile */ @media (max-width: 767px) { .section--list-items .heading h1 { font-size: 34px; line-height: 1.24; } .section--list-items .section__body, .section--list-items.with-image .section__body { padding: 40px 0; } .section--list-items.with-image .list-item { padding-bottom: 15px; } } /* ------------------------------------------------------------ *\ Section Solutions \* ------------------------------------------------------------ */ .section--solutions .section__body { padding: 40px 0 50px; } .section--solutions .section__body-inner { position: relative; } .section--solutions .utilities { top: 23px; } .section--solutions .heading { padding: 32px 0 36px; } .section--solutions .heading p { font-size: 20px; line-height: 1.4; } .section--solutions .heading h1 { margin: 0 0 20px; } .section--solutions .heading .heading__inner { padding: 0 15% 0 0; } /* Tablet Portrait */ @media (max-width: 1023px) { .section--solutions .utilities { display: none; } } /* Mobile */ @media (max-width: 767px) { .section--solutions .section__body { padding: 40px 0 0; } .section--solutions .heading .heading__inner { padding-right: 0; } } /* ------------------------------------------------------------ *\ Share \* ------------------------------------------------------------ */ .share { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; padding: 16px 0; } .share > span { font-family: 'futura-pt', sans-serif; font-weight: 300; font-size: 16px; color: #707372; text-transform: uppercase; margin-right: 16px; } .share .at-share-btn.at-svc-compact { display: none; } .share .at-share-btn { width: 36px !important; height: 36px !important; padding: 0 !important; background: #0099cc !important; border-radius: 50% !important; margin: 0 !important; text-align: center; line-height: 36px; } .share .at-share-btn ~ .at-share-btn { margin-left: 16px !important; } .share .at-resp-share-element .at-share-btn .at-icon-wrapper { display: block !important; float: none; height: 36px !important; width: 36px !important; position: relative !important; } .share .at-resp-share-element .at-share-btn .at-icon-wrapper svg { width: 24px !important; height: 24px !important; position: absolute; left: 50%; top: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /* Mobile Portrait */ @media (max-width: 374px) { .share .at-share-btn ~ .at-share-btn { margin-left: 7px !important; } } /* ------------------------------------------------------------ *\ Slider Testimonials \* ------------------------------------------------------------ */ .slider--testimonials { text-align: center; color: #fff; } .slider--testimonials img { margin: 11px 0 30px; border-radius: 50%; border: 2px solid #c8102e; box-shadow: 0 0 0 11px #fff; } .slider--testimonials blockquote { width: 86%; margin: 0 auto 10px; } .slider--testimonials blockquote p { font-weight: 300; font-style: italic; font-size: 26px; line-height: 1.23; margin-bottom: 20px; } .slider--testimonials blockquote cite { display: block; width: 72%; margin: 0 auto; font-style: normal; font-weight: 300; font-size: 14px; line-height: 1.43; } .slider--testimonials blockquote cite strong { display: block; font-size: 16px; } .slider--testimonials .swiper-pagination { position: static; margin-top: 15px; } .slider--testimonials .swiper-pagination-bullet { width: 12px; height: 12px; background: #00a9e0; opacity: 1; transition: background .2s ease; } .slider--testimonials .swiper-pagination-bullet-active { background: #fff; } .slider--testimonials .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 9px; } /* Mobile */ @media (max-width: 767px) { .slider--testimonials img { width: 111px; height: 111px; } .slider--testimonials blockquote { width: 100%; margin: 16px 0 0; padding: 0 10px; } .slider--testimonials blockquote p { font-size: 20px; line-height: 1.3; } .slider--testimonials blockquote cite { width: 100%; } .slider--testimonials .swiper-pagination { margin-top: 12px; } } /* ------------------------------------------------------------ *\ Socials \* ------------------------------------------------------------ */ .socials ul { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: end; justify-content: flex-end; list-style: none; margin: 0; padding: 0; } .socials a { display: block; width: 36px; height: 36px; background: #fff; border-radius: 50%; text-align: center; line-height: 36px; transition: background .2s ease; border: 1px solid #fff; } .socials a:hover { text-decoration: none; box-shadow: 0 0 0 2px #4F758B inset; } .socials li ~ li { margin-left: 11px; } .socials a i { font-size: 18px; color: #4f758b; } /* Tablet Portrait */ @media (max-width: 1023px) { .socials ul { -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-pack: start; justify-content: flex-start; } .socials li { margin-right: 10px; margin-bottom: 15px; } .socials li ~ li { margin-right: 10px; margin-left: 0; } } /* Mobile */ @media (max-width: 767px) { .socials ul { -ms-flex-pack: center; justify-content: center; } } /* ------------------------------------------------------------ *\ Table \* ------------------------------------------------------------ */ .table { margin: 75px 0 50px; } .table h3 { margin-bottom: 14px; } .table th { background: #4f758b; font-family: 'futura-pt', sans-serif; font-weight: 600; font-size: 14px; color: #fff; text-transform: uppercase; text-align: left; padding: 8px 12px; } .table td { height: 40px; font-size: 14px; color: #4a4a4a; padding: 12px 20px; vertical-align: top; } .table td ~ td { border-left: 1px solid #dce3e8; } .table tbody tr:nth-child(odd) td { background: #ebf4fa; } /* Mobile */ @media (max-width: 767px) { .table:not(.table-swipe):not(.foo-table) th { display: none; } .table:not(.table-swipe):not(.foo-table) table, .table:not(.table-swipe):not(.foo-table) table tr, .table:not(.table-swipe):not(.foo-table) table td, .table:not(.table-swipe):not(.foo-table) table thead, .table:not(.table-swipe):not(.foo-table) table tbody { display: block; } .table:not(.table-swipe):not(.foo-table) td { height: auto; min-height: 48px; position: relative; padding: 15px 20px; } .table:not(.table-swipe):not(.foo-table) td:before { width: 100%; display: block; padding: 0 0 4px 0; content: attr(data-heading); font-family: 'futura-pt', sans-serif; font-weight: 700; font-size: 13px; color: #4f758b; text-transform: uppercase; } .table:not(.table-swipe):not(.foo-table) td ~ td { border: 0; } } /* Swipable */ @media (max-width: 767px) { .table-swipe { position: relative; } .table-swipe table { max-width: calc(100% - 10px) !important; } .table-swipe .wrap { width: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .table-swipe::before { display: block; z-index: 1; content: ''; position: absolute; right: 0; width: 12px; height: 100%; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */ background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ } .table-swipe td { padding: 12px; } .table-swipe td:before { display: none; } } /* ------------------------------------------------------------ *\ Table Simple \* ------------------------------------------------------------ */ .table--simple th { background: none; font-weight: 300; font-size: 13px; color: #4a4a4a; text-transform: uppercase; } .table--simple th ~ th { border-left: 1px solid #dce3e8; } .table--simple td a { font-weight: 700; transition: color .2s ease; } .table--simple td a:hover { color: #0099cc; } .table--simple tbody tr:nth-child(even) td { border-bottom: 1px solid #dce3e8; } /* Mobile */ @media (max-width: 767px) { .table--simple tbody tr:nth-child(even) td { border: 0; } } /* ------------------------------------------------------------ *\ Table Sortable Data \* ------------------------------------------------------------ */ .table--sortable-data { margin: 0 0 40px; border-bottom: 1px solid #dce3e8; clear: both; } .table--sortable-data .col-1 { width: 22%; } .table--sortable-data .col-2 { width: 20.5%; } .table--sortable-data .col-3 { width: 14.5%; } .table--sortable-data .col-4 { width: 43%; } .table--sortable-data th { font-weight: 500; font-size: 13px; text-transform: uppercase; padding: 13px 10px 11px 20px; } .table--sortable-data th .fa { font-size: 14px; margin-left: 5px; } .table tbody tr:nth-child(odd) { background: #ebf4fa; } .table tbody tr:nth-child(odd) td { background: none; } .table--sortable-data td { padding-top: 20px; padding-bottom: 20px; vertical-align: top; } .table--sortable-data td h6 { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 15px; color: #4a4a4a; margin: 0; } .table--sortable-data td > p { margin-bottom: 19px; } .table--sortable-data .contact { display: -ms-flexbox; display: flex; padding-left: 3px; } .table--sortable-data .contact h6 { margin: 0; font-family: 'Lato', sans-serif; font-size: 14px; color: #4a4a4a; margin-right: 21px; } .table--sortable-data .contact ul { list-style: none; margin: 0; padding: 0; } .table--sortable-data .contact li { font-size: 14px; color: #4a4a4a; } .table--sortable-data .contact li ~ li { margin-top: 10px; } .table--sortable-data .contact li span { display: block; } .table--sortable-data .contact li a { color: #4a4a4a; text-decoration: underline; } .table--sortable-data .contact li a:hover { text-decoration: none; } .table--sortable-data .list-color-circles { margin-left: -3px; margin-right: -8px; margin-top: 6px; } .table--sortable-data .tooltip { width: 179px; padding: 15px 21px; margin-left: -90px; } @media(max-width: 1439px) { .table--sortable-data .list-icons { margin-right: -10px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .table--sortable-data th { display: none; } .table--sortable-data table, .table--sortable-data table tr, .table--sortable-data table td, .table--sortable-data table thead, .table--sortable-data table tbody { display: block; } .table--sortable-data .col-1, .table--sortable-data .col-2, .table--sortable-data .col-3, .table--sortable-data .col-4 { width: 100%; } .table--sortable-data td { height: auto; position: relative; padding: 15px 20px 15px 50%; } .table--sortable-data td:before { width: 50%; padding: 18px 20px 15px; content: attr(data-heading); font-family: 'futura-pt', sans-serif; font-weight: 700; font-size: 13px; color: #4f758b; text-transform: uppercase; position: absolute; left: 0; top: 0; } .table--sortable-data td ~ td { border: 0; } .table--sortable-data .list-color-circles { margin: 0; } } /* Mobile */ @media (max-width: 767px) { .table--sortable-data:last-child { margin-bottom: 30px; } .table--sortable-data .contact { display: block; } .table--sortable-data .contact li a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } /* ------------------------------------------------------------ *\ Tooltip \* ------------------------------------------------------------ */ .tooltip { width: 169px; padding: 16px 17px; border: 1px solid #dce3e8; border-radius: 4px; box-shadow: 0 0 8px rgba(84, 88, 90, .15); background: #fff; position: absolute; z-index: 99; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; } .tooltip--visible { opacity: 1; visibility: visible; } .tooltip p, .tooltip span { display: block; margin: 0; font-weight: 400; font-size: 13px; color: #4a4a4a; line-height: 1.2; } .tooltip p ~ p, .tooltip span ~ span { margin-top: 9px; } .tooltip--left { top: 0; right: 100%; margin-right: 10px; } .tooltip--left:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 10px; border-color: transparent transparent transparent #dce3e8; position: absolute; left: 100%; top: 16px; z-index: 97; } .tooltip--left:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 8px; border-color: transparent transparent transparent #fff; position: absolute; left: 100%; top: 17px; z-index: 98; } .tooltip--top { bottom: 100%; left: 50%; margin-left: -85px; margin-bottom: 10px; } .tooltip--top:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 10px 6px 0 6px; border-color: #dce3e8 transparent transparent transparent; position: absolute; left: 50%; margin-left: -5px; top: 100%; z-index: 97; } .tooltip--top:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 8px 5px 0 5px; border-color: #fff transparent transparent transparent; position: absolute; left: 50%; margin-left: -4px; top: 100%; z-index: 98; } /* Mobile */ /* a11y #44: Add display: none to tooltip on mobile*/ @media (max-width: 767px) { .tooltip { display: none; } } /* ------------------------------------------------------------ *\ Utilities \* ------------------------------------------------------------ */ .utilities { position: absolute; left: 100%; top: 39px; margin-left: 75px; } .utilities ul { list-style: none; margin: 0 !important; padding: 0 !important; line-height: 1.0 !important; } .utilities li { position: relative; } .utilities li ~ li { margin-top: 10px; } .utilities a { display: block; width: 46px; height: 60px; border: 1px solid rgba(79, 117, 139, .2); border-radius: 3px; background: #fff; text-align: center; padding: 10px 2px; transition: background .2s ease; text-decoration: none !important; } .utilities a:hover { background: #f5f5f5; } .utilities a span { display: block; font-weight: 400; font-size: 12px; color: #4f758b; padding-top: 5px; } .utilities a i { font-size: 20px; color: #0099cc; } .utilities .at-share-btn { display: none !important; } .utilities .at-share-btn.at-svc-compact { display: inline-block !important; width: 46px !important; height: 60px !important; border: 1px solid rgba(79, 117, 139, .2) !important; border-radius: 3px !important; background-color: #fff !important; text-align: center !important; margin: 0 !important; } .utilities .at-share-btn.at-svc-compact .at-icon-wrapper { display: inline-block !important; float: none !important; width: auto !important; height: auto !important; } .utilities .at-share-btn.at-svc-compact .at-icon-wrapper svg { display: none !important; } .utilities .at-share-btn.at-svc-compact .at-icon-wrapper:before { content: '\f35b'; display: inline-block; font: normal normal normal 20px/1 'Material-Design-Iconic-Font'; color: #0099cc; } .utilities .at-share-btn.at-svc-compact .at-icon-wrapper:after { content: 'Share'; display: block; font-family: 'Lato', sans-serif; font-weight: 400; font-size: 12px; color: #4f758b; padding-top: 0; position: relative; top: -15px; } .utilities.is_stuck { margin-left: 0; } /* Tablet Portrait */ @media (max-width: 1023px) { .utilities { position: relative; left: auto; top: auto; margin: 52px 0 0; } .utilities ul { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } .utilities ul li ~ li { margin-left: 15px; margin-top: 0; } } /* Mobile */ @media (max-width: 767px) { .utilities { margin: 40px 0 0; } .utilities ul { -ms-flex-pack: center; justify-content: center; } } /* ------------------------------------------------------------ *\ Video Embed \* ------------------------------------------------------------ */ .video--embed { position: relative; overflow: hidden; padding-bottom: 49.5%; } .video--embed iframe { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } /* Tablet Portrait */ @media (max-width: 1023px) { .video--embed { padding-bottom: 56.25%; } } /* ------------------------------------------------------------ *\ Widget \* ------------------------------------------------------------ */ .widgets { list-style: none outside none; } /* ------------------------------------------------------------ *\ Widget Nav \* ------------------------------------------------------------ */ .widget--nav { background: #fff; box-shadow: 0 0 8px rgba(84, 88, 90, .15); } .widget--nav .widget__head { background: #0099cc; border-bottom: 1px solid rgba(0,0,0,.10); } .widget--nav .widget__head h6 { font-weight: 600; color: #fff; text-transform: uppercase; margin: 0; padding: 18px 29px; } .widget--nav .widget__body > ul { list-style: none; margin: 0; padding: 0; } .widget--nav .widget__body > ul > li > a { display: block; font-family: 'futura-pt', sans-serif; font-weight: 400; font-size: 19px; color: #262626; padding: 10px 29px 9px; transition: color .2s ease; } .widget--nav .widget__body > ul > li > a:hover { color: #0099cc; } .widget--nav .widget__body > ul > li .zmdi { font-size: 16px; color: #9ea2a2; margin-left: 4px; } .widget--nav .widget__body > ul > li.current > a { font-weight: 500; color: #54585a; } .widget--nav .widget__body > ul > li ~ li { border-top: 1px solid rgba(79, 117, 139, .2); } .widget--nav .widget__body ul ul { list-style: none; margin: 0; padding: 0; } .widget--nav .widget__body ul ul a { display: block; padding: 10px 20px 10px 40px; border-top: 1px solid rgba(79, 117, 139, .2); font-family: 'futura-pt', sans-serif; font-weight: 400; font-size: 16px; color: #54585a; transition: background .2s ease, color .2s ease; } .widget--nav .widget__body ul ul a:hover { color: #0099cc; } .widget--nav .widget__body ul ul .current a, .widget--nav .widget__body ul > li.current-menu-item > a, .widget--nav .widget__body ul > li.current-menu-item > a:hover { background: #0099cc; color: #fff; } /* ------------------------------------------------------------ *\ Widget Related \* ------------------------------------------------------------ */ .widget--related { background: #f2f2f0; padding: 20px 28px; position: relative; z-index: 10; } .widget--related .widget__head { margin-bottom: 15px; padding-bottom: 13px; position: relative; } .widget--related .widget__head:after { content: ''; width: 38px; height: 2px; background: #c8102e; position: absolute; left: 0; bottom: 0; } .widget--related .widget__head h6 { font-family: 'futura-pt', sans-serif; font-weight: 500; font-size: 14px; color: #c8102e; text-transform: uppercase; margin: 0; } .widget--related ul { list-style: none; margin: 0; padding: 0; } .widget--related a { display: block; padding-left: 30px; position: relative; font-size: 14px; color: #4f758b; line-height: 1.2; transition: opacity .2s ease; } .widget--related a:hover { opacity: .75; } .widget--related a i { font-size: 18px; color: #0099cc; position: absolute; left: 1px; top: 2px; } .widget--related li ~ li { margin-top: 14px; } /* ------------------------------------------------------------ *\ Widget Download \* ------------------------------------------------------------ */ .widget--download { margin-top: -5px; } .widget--download .widget__image { padding-left: 12px; text-align: center; z-index: 1; } .widget--download .widget__image img { display: inline-block; } .widget--download .widget__body { margin-top: -42px; padding: 30px; background-color: #f2faff; box-shadow: 0 0 8px rgba(84, 88, 90, .15); border: 1px solid #dce3e8; text-align: center; position: relative; z-index: 2; } .widget--download .widget__body h4 { font-weight: 600; font-size: 22px; color: #333; margin: 0 0 17px; } .widget--download .widget__body .btn { width: 100%; height: 45px; font-size: 20px; line-height: 45px; } /* Tablet Portrait */ @media (max-width: 1023px) { .widget--download .widget__image { padding: 0 30px 0 50px; } .widget--download .widget__body { padding: 15px 25px 23px 25px; margin-top: -61px; } .widget--download .widget__body h4 { font-weight: 600; font-size: 20px; margin-bottom: 12px; } .widget--download .widget__body .btn { height: 37px; font-size: 18px; line-height: 37px; } } /* Mobile */ @media (max-width: 767px) { .widget--download .widget__image { padding: 0 38px 0 60px; } .widget--download .widget__body { padding: 15px 25px 23px 25px; margin: -66px 9px 0 9px; } } /* ------------------------------------------------------------ *\ IV. Themes \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Theme Gravity \* ------------------------------------------------------------ */ body .gform_wrapper ul li.gfield { margin-top: 21px; } body .gform_wrapper ul li.gfield:first-child { margin-top: 0; } body .gform_wrapper .top_label div.ginput_container { margin-top: 4px; } body .gform_wrapper { margin: 0; box-shadow: 0 0 8px rgba(84, 88, 90, .15); background-color: #f2faff; border: 1px solid #dce3e8; } body .gform_wrapper .gform_heading { background: #0099cc; margin: 0; padding: 20px 29px 17px; } body .gform_wrapper .gform_body { padding: 18px 30px 0; } body .gform_wrapper span.gform_description { display: none; } body .gform_wrapper .gform_title { font-family: 'futura-pt', sans-serif; font-weight: 600; font-size: 22px; margin: 0; color: #fff; letter-spacing: .03em !important; } body .gform_wrapper label.gfield_label { font-size: 15px; color: #333; display: block; } body .gform_wrapper .gfield_required { color: #333; } body .gform_wrapper ul.gform_fields li.gfield { padding-right: 0; } div.ginput_container_name span { padding-right: 40px; } body .top_label div.ginput_complex.ginput_container.gf_name_has_1, body .top_label div.ginput_complex.ginput_container.gf_name_has_2, body .top_label div.ginput_complex.ginput_container.gf_name_has_3 { width: calc(100% + 40px); } body .section__body-inner div.ginput_complex.ginput_container.gf_name_has_2 { width: calc(100% + 15px); } body .gform_wrapper .field_sublabel_below .ginput_complex.ginput_container label, body .gform_wrapper .field_sublabel_below div[class*=gfield_time_].ginput_container label { font-size: 12px; text-transform: uppercase; margin: 3px 0 9px 1px; } body .gform_wrapper .top_label input.medium, .gform_wrapper .top_label select.medium { width: 100%; } body .gform_wrapper textarea { padding: 11px 15px 10px; font-size: 14px; color: #54585a; border: 1px solid #aaa; border-radius: 4px; background: #fff; margin-top: 3px; } body .gform_wrapper textarea.medium { height: 120px; } body .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) { height: 40px; padding: 11px 15px 10px; font-size: 14px; color: #54585a; border: 1px solid #aaa; border-radius: 4px; background: #fff; } body .gform_wrapper .gform_footer { margin-top: 3px; padding: 0 30px 30px; } body .gform_wrapper .gform_footer input.button, body .gform_wrapper .gform_footer input[type=submit], body .gform_wrapper .gform_page_footer input.button, body .gform_wrapper .gform_page_footer input[type=submit] { height: 45px; padding: 0 44px; display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; text-decoration: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: 'futura-pt', sans-serif; font-weight: 500; font-size: 20px; color: #fff; border: 0; border-radius: 100px; line-height: 43px; background: rgb(255,25,64); background: linear-gradient(to right, rgba(255,25,64,1) 0%,rgba(200,16,46,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1940', endColorstr='#c8102e',GradientType=1 ); box-shadow: inset 0 0 0 #ff1940; transition: all .2s ease; } body .gform_wrapper .gform_footer input.button:hover, body .gform_wrapper .gform_footer input[type=submit]:hover, body .gform_wrapper .gform_page_footer input.button:hover, body .gform_wrapper .gform_page_footer input[type=submit]:hover { box-shadow: inset 0 0 500px #ff1940; } body .gform_confirmation_message { color: #31708f; background-color: #d9edf7; border: 1px solid #bce8f1; padding: 20px; font-size: 20px; border-radius: 4px; } .gform_wrapper.gravity-theme .gform_footer, .gform_wrapper.gravity-theme .gform_page_footer { padding: 0 2rem 1rem !important; } .gform_required_legend { display: none; } /* GF 2.5 Updates */ body .gform_wrapper.gravity-theme .gform_fields { grid-column-gap: 0 } body .gform_wrapper.gravity-theme .gfield.gfield--width-eleven-twelfths { grid-column: span 12; } body .gform_wrapper.gravity-theme .gfield.gfield--width-five-sixths { grid-column: span 11; } body .gform_wrapper .gfield_required { padding-left: 0; margin-left: 2px; color: #c00; } body .gform_wrapper .gform_required_legend .gfield_required { margin-left: 0; } body .form--download .gform_wrapper .gform_heading .gform_required_legend { display: none; } /* Mobile */ @media (max-width: 767px) { body .gform_wrapper li.field_sublabel_below .ginput_complex { margin-top: 5px !important; } body div.ginput_container_name span { display: inline-block !important; width: 50%; margin-right: -4px; } body .gform_wrapper ul li.gfield { margin-top: 18px; } } /* ------------------------------------------------------------ *\ Theme Magnific \* ------------------------------------------------------------ */ .mfp-fade.mfp-bg { opacity: 0; transition: all .5s ease; } .mfp-fade.mfp-bg.mfp-ready { opacity: 0.7; } .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } .mfp-fade.mfp-wrap .mfp-content { opacity: 0; transition: all .5s ease; } .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; } .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; } /* Magnific Image Type */ .mfp-image-holder .mfp-close { width: 28px; height: auto; padding: 0; line-height: 28px; right: 5px; top: 5px; text-align: center; opacity: 1; cursor: pointer !important; } .mfp-image-holder img.mfp-img { padding-top: 0; } /* Mobile */ @media (max-width: 767px) { .mfp-container { padding: 8px; } } /* ------------------------------------------------------------ *\ Theme Selectric \* ------------------------------------------------------------ */ .selectric { min-width: 180px; border: 1px solid #aaa; background: #fff; border-radius: 4px; } .selectric .label { height: 44px; font-family: 'Lato', sans-serif; font-weight: 400; font-size: 14px; color: #54585a; line-height: 44px; margin: 0 48px 0 16px; } .selectric .button { width: 18px; height: 18px; background: none; font-size: 0; right: 15px; top: 12px; } .selectric .button:after { display: none; } .selectric .button:before { content: ''; font: normal normal normal 14px/1 'Material-Design-Iconic-Font'; font-size: 18px; color: #4f758b; } .selectric-items { border-color: #aaa; border-top: 0; border-radius: 0 0 4px 4px; background: #fff; } .selectric-items li { font-weight: 400; font-size: 14px; color: #4a4a4a; padding: 8px 16px; transition: background .2s ease, color .2s ease; } .selectric-items li.highlighted { background: none; color: #4a4a4a; } .selectric-items li:hover { background: #0099cc; color: #fff; } .selectric-items .disabled.selected { display: none; } .selectric-items .selectric-group li { padding: 8px 26px; } .selectric-items .selectric-group .selectric-group-label { font-size: 12px; color: #4a4a4a; padding: 8px 16px; } .selectric-items .selectric-group:first-of-type .selectric-group-label { padding-top: 0; } /* Opened */ .selectric-open .selectric { border-color: #aaa; border-radius: 4px 4px 0 0; border-bottom-color: #fff; } .selectric-open.selectric-above .selectric-items { top: 100%; bottom: auto; } /* ------------------------------------------------------------ *\ Print Styles \* ------------------------------------------------------------ */ @media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } @media print { *, *:before, *:after { background: transparent !important; color: #000 !important; /* Black prints faster */ -webkit-box-shadow: none !important; box-shadow: none !important; text-shadow: none !important; } pre { white-space: pre-wrap !important; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } /* * Printing Tables: * http://css-discuss.incutio.com/wiki/Printing_Tables */ thead { display: table-header-group; } tr, img { page-break-inside: avoid; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } /* Hide Elements */ .section--cta-contact, .footer .footer__nav, .footer .footer__aside, .btn-toggle-search, .nav-btn, .nav--program, .section--info .utilities, .accordion .accordion__toggle, .accordion .accordion__head-btn, .article--default .utilities, .utilities, .header .zmdi-search, .page-template-page-program-faqs .alert, .filter { display: none; } /* Reflow Elements */ .list-cards-overview { flex-flow: row wrap; overflow: auto; overflow-y: auto; } .footer { background-color: transparent; border: 0; color: #000; } } .widget-newsletter .form--newsletter { display: block; padding: 24px 20px; margin: 30px 0 20px; box-shadow: 0 0 8px rgba(0,0,0,.15); background: #0099cc url('/wp-content/themes/ncqa-org/css/images/temp/blue-pattern.jpg'); } .widget-newsletter .form--newsletter .form__head { max-width: 100%; flex: 1; margin: 0 0 16px; } .widget-newsletter .form--newsletter .form__head h3, .widget-newsletter .form--newsletter .form__head p { color: #fff; } .widget-newsletter .form--newsletter .form__body { max-width: 100%; flex: 1; } .widget-newsletter .form--newsletter .form__body table tr:last-child td:last-child { width: auto; } .widget-newsletter .form--newsletter .form__body .btn { padding: 0 12px; font-size: 16px; } .widget-newsletter .form--newsletter .form__body input[type="text"] { padding: 0 10px; font-size: 16px; color: #777; border: none; } .widget-newsletter .form--newsletter .form__body table td { width: 100%; } .popup--interrupter-ajax.popup--interrupter-newsletter .popup__body { padding-left: 0; padding-right: 0; } .popup--interrupter-ajax.popup--interrupter-newsletter .form--newsletter .form__head { max-width: 100%; } .popup--interrupter-ajax.popup--interrupter-newsletter .form--newsletter .form__body { max-width: 100%; } .popup--interrupter-ajax.popup--interrupter-newsletter { background: #0099cc url('/wp-content/themes/ncqa-org/css/images/temp/blue-pattern.jpg'); color: #fff; } .popup--interrupter-ajax.popup--interrupter-newsletter .form--newsletter { display: block; } .popup--interrupter-ajax.popup--interrupter-newsletter .form--newsletter .form__head h3 { color: #fff; text-transform: none; font-weight: normal; } .popup--interrupter-ajax.popup--interrupter-newsletter h1 { color: #fff; font-size: 42px; } .popup--interrupter-ajax.popup--interrupter-newsletter h1:after { background-color: #fff; } .popup--interrupter-ajax.popup--interrupter-newsletter .form--newsletter { padding: 0; } .popup--interrupter-ajax.popup--interrupter-newsletter .mfp-close { color: #fff; } .popup--interrupter-ajax.popup--interrupter-newsletter .btn { min-width: 0; } /* New Mobile Interrupter Styles */ @media (max-width: 767px) { .popup--responsive.popup--interrupter-ajax.popup--interrupter-newsletter h1 { font-size: 36px; } .popup--responsive.popup--interrupter-ajax.popup { height: 85vh; max-height: 600px; min-height: 300px; max-width: 475px; } .popup--responsive.popup--interrupter-ajax.popup .popup__wrap { position: relative; top: 50%; transform: translateY(-50%); overflow-y: auto; -webkit-overflow-scrolling: touch; } .popup--responsive.form--newsletter .form__head h3 { font-size: 22px; } } @media (max-width: 767px) and (min-height: 568px ) { .popup--responsive.popup--interrupter-ajax.popup .popup__wrap { position: relative; top: 50%; transform: translateY(-50%); overflow-y: auto; -webkit-overflow-scrolling: touch; } } /* 2020 Quality Matters Interrupter */ body .popup--interrupter-qm { background-color: #122D3D; color: #fff; padding: 30px 0 0; box-shadow: 0 0 24px rgba(0,0,0,.35); } body .popup--interrupter-qm .mfp-close { color: #fff; } body .popup--interrupter-qm .popup-qm__head h4 { font: 500 20px/1.0 'futura-pt', sans-serif; text-transform: uppercase; color: #C8102E; letter-spacing: 2px; text-align: center; position: relative; padding-bottom: 15px; margin-bottom: 10px; } body .popup--interrupter-qm .popup-qm__head h4:after { content: ''; width: 40px; height: 3px; background: #c8102e; position: absolute; left: 50%; bottom: 0; margin-left: -20px; display: block; } body .popup--interrupter-qm .popup-qm__head h1 { font: 400 36px/1.1 'futura-pt', sans-serif; text-transform: none; color: #fff; text-align: center; padding: 0 16px; } body .popup--interrupter-qm .popup-qm__head h1:after { display: none; } body .popup--interrupter-qm .popup-qm__body { background: url('images/temp/qm-interrupter-body-bg.svg') top center no-repeat; background-size: 100% auto; padding: 24px 30px 0; } body .popup--interrupter-qm .popup-qm__body .form { padding: 0 0 10px; } body .popup--interrupter-qm .popup-qm__body .form form { background-color: #fff; border: 4px solid #17394D; border-radius: 4px; padding: 2px; } body .popup--interrupter-qm .popup-qm__body .form form input[type=text] { background-color: #fff; color: #333; font-size: 20px; width: calc(100% - 128px); height: 54px; padding-left: 18px; padding-right: 16px; border: 0; } body .popup--interrupter-qm .popup-qm__body .form form input[type=submit] { max-width: 124px; width: 124px; min-width: auto; height: 50px; margin-top: -8px; border-radius: 4px; } .qm-count { font: 400 22px/1.0 'futura-pt', sans-serif; padding-bottom: 50px; color: #fff; } .qm-count em { display: inline-block; padding: 3px 4px; font-weight: 600; font-style: normal; background-color: #122D3D; border-radius: 4px; } body .popup--interrupter-qm .popup-qm__body .qm-sample .handheld-frame:after { content: ''; display: block; width: 48px; height: 2px; background-color: rgba(255,255,255,.30); position: absolute; top: 8px; left: 50%; margin-left: -25px; } body .popup--interrupter-qm .popup-qm__body .qm-sample .handheld-frame:before { content: ''; display: block; width: 3px; height: 2px; background-color: rgba(255,255,255,.30); position: absolute; top: 8px; left: 50%; margin-left: 30px; } body .popup--interrupter-qm .popup-qm__body .qm-sample .handheld-frame img { width: 100%; border-radius: 3px 3px 0 0; } body .popup--interrupter-qm .popup-qm__body .qm-sample .handheld-frame a { display: block; position: relative; } body .popup--interrupter-qm .popup-qm__body .qm-sample .handheld-frame a .sample-link-overlay { opacity: 0; background-color: rgba(7,110,146,.86); position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: .3s all; } body .popup--interrupter-qm .popup-qm__body .qm-sample .handheld-frame a .sample-link-overlay:hover { opacity: 1.0; } body .popup--interrupter-qm .popup-qm__body .qm-sample .handheld-frame a .sample-link-overlay .sample-link-overlay-content { position: relative; top: 50%; transform: translateY(-50%); font: 400 16px/1.0 'futura-pt',sans-serif; } body .popup--interrupter-qm .popup-qm__body .qm-content { text-align: left; padding: 10px 0 20px; flex-grow: 1; flex-basis: 0; } body .popup--interrupter-qm .popup-qm__body .qm-content h4 { font: 600 18px/1.0 'futura-pt', sans-serif; color: #fff; margin: 0 0 10px; padding-top: 0; } body .popup--interrupter-qm .popup-qm__body .qm-content ul { margin: 0 0 0 20px; padding: 0; } body .popup--interrupter-qm .popup-qm__body .qm-content ul li { margin: 0 2px 6px; } @media (max-width: 767px) { body .popup--interrupter-qm .popup-qm__head h4 { font-size: 16px; } body .popup--interrupter-qm .popup-qm__head h1 { font-size: 28px; margin-bottom: 0; padding-bottom: 0; } body .popup--interrupter-qm .popup-qm__body { background-size: 150% auto; padding: 16px 16px 0; margin-top: 10px; } body .popup--interrupter-qm .popup-qm__body .form form input[type=text] { font-size: 16px; height: 50px; width: calc(100% - 104px); padding-left: 10px; padding-right: 8px; } body .popup--interrupter-qm .popup-qm__body .form form input[type=submit] { margin-top: -4px; width: 100px; font-size: 18px; padding-left: 10px; padding-right: 10px; } body .popup--interrupter-qm .popup-qm__body .qm-count { padding-bottom: 30px; font-size: 18px; } body .popup--interrupter-qm .popup-qm__body .qm-sample { padding-right: 20px; max-width: 40%; flex-grow: 1; flex-basis: 0; } body .popup--interrupter-qm .popup-qm__body .qm-sample .handheld-frame { margin-top: -10px; } body .popup--interrupter-qm .popup-qm__body .qm-content { font-size: 15px; } body .popup--interrupter-qm .popup-qm__body .qm-content ul li { margin: 0 2px 2px; } body .popup--responsive.popup--interrupter-ajax.popup.popup--interrupter-qm { overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: 580px; } body .popup--responsive.popup--interrupter-ajax.popup.popup--interrupter-qm .popup__wrap { position: relative; top: auto; transform: none; } } /* ------------------------------------------------------------ *\ Section Newsletter \* ------------------------------------------------------------ */ #front-page-newsletter .gf_simple_horizontal { border: none; border-radius: 0; box-shadow: none; background-color: transparent; width: auto; max-width: 100%; margin: 0; } #front-page-newsletter .gform_wrapper { max-width: 90%; margin: 0; box-shadow: none; background-color: transparent; border: none; } #front-page-newsletter .gform_heading { display: none; } #front-page-newsletter .gform_body { max-width: 100%; width: 100%; } #front-page-newsletter .gfield--type-email { padding-right: 0; } #front-page-newsletter .gfield--type-email input { height: 44px; border: 2px solid #ffffff; } #front-page-newsletter .gfield { padding-right: 0 !important; } #front-page-newsletter .gform_footer { padding: 0 !important; } #front-page-newsletter input[type="submit"] { border-radius: 0 4px 4px 0; margin: 0; line-height: 40px; margin-left: -5px; border: solid 2px #fff; } #front-page-newsletter .gfield_description { font-size: 13px; padding-top: 4px; } #front-page-newsletter .qm-count { margin: 6px 0 0 4rem; padding-bottom: 0; } #front-page-newsletter .gfield_validation_message, #front-page-newsletter .validation_message { background: #fff9f9; border: 1px solid #c02b0a; border-radius: 4px; margin-block-start: 2px; padding: 4px 24px; } #front-page-newsletter .gform_validation_errors { background: #fff9f9; border-radius: 5px; border: 1.5px solid #c02b0a; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.11), 0 0 4px rgba(18, 25, 97, 0.0405344); margin-block-end: 4px; margin-block-start: 4px; padding-block: 2px; padding-inline-end: 12px; padding-inline-start: 24px; position: relative; width: 85%; margin-left: 2rem; } @media (min-width: 767px) { #front-page-newsletter .gf_simple_horizontal { max-width: 85%; margin: 0 0 0 4rem; } #front-page-newsletter .gform_validation_errors { margin-left: 4rem; } } .home .main.w-quality-matters .section--updates { padding-top: 100px; } .home .main.w-quality-matters .section--grid { padding-top: 50px; } .section--newsletter-qm .form--newsletter { padding: 0; background-color: #076A8C; height: 146px; } .section--newsletter-qm { margin: 30px 0; } .home .section--newsletter-qm { position: relative; z-index: 11; overflow: hidden; margin: -10px 0 -70px; } .section--newsletter-qm .section__body { position: relative; padding-left: 0 !important; } .home .section--newsletter-qm .section__body:before { content: ''; width: 9999px; height: 100%; background: #0F3F54; box-shadow: 0 0 8px rgba(84, 88, 90, .15); position: absolute; right: calc(100% - 300px); top: 0; z-index: -1; } .section--newsletter-qm .form--newsletter .form__head { background-color: #0F3F54; height: 146px; position: relative; width: 386px; max-width: 100%; flex: 0 0 386px; } .section--newsletter-qm .form--newsletter .form__head::before { content: ''; display: block; background-color: #0F3F54; width: 30px; height: 100%; border-radius: 0 50% 50% 0; position: absolute; right: -24px; top: 0; } .section--newsletter-qm .form--newsletter .form__head .qm-content-wrap { height: 146px; } .section--newsletter-qm .form--newsletter .form__head .qm-sample { position: absolute; bottom: 0; left: 0; padding-right: 0; max-width: 140px; width: 140px; } .section--newsletter-qm .form--newsletter .form__head .qm-sample .handheld-frame { display: inline-block; background-color: #0F2633; border-radius: 3px 3px 0 0; padding: 16px 6px 0; position: relative; } .section--newsletter-qm .form--newsletter .form__head .qm-sample .handheld-frame:after { content: ''; display: block; width: 48px; height: 2px; background-color: rgba(255,255,255,.30); position: absolute; top: 8px; left: 50%; margin-left: -25px; } .section--newsletter-qm .form--newsletter .form__head .qm-sample .handheld-frame:before { content: ''; display: block; width: 3px; height: 2px; background-color: rgba(255,255,255,.30); position: absolute; top: 8px; left: 50%; margin-left: 30px; } .section--newsletter-qm .form--newsletter .form__head .qm-sample .handheld-frame img { width: 100%; border-radius: 3px 3px 0 0; } .section--newsletter-qm .form--newsletter .form__head .qm-sample .handheld-frame a { display: block; position: relative; } .section--newsletter-qm .form--newsletter .form__head .qm-sample .handheld-frame a .sample-link-overlay { opacity: 0; background-color: rgba(7,110,146,.86); position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: .3s all; color: #fff; text-align: center; } .section--newsletter-qm .form--newsletter .form__head .qm-sample .handheld-frame a .sample-link-overlay:hover { opacity: 1.0 !important; } .section--newsletter-qm .form--newsletter .form__head .qm-sample .handheld-frame a .sample-link-overlay .sample-link-overlay-content { position: relative; top: 50%; transform: translateY(-50%); font: 400 16px/1.0 'futura-pt',sans-serif; } .section--newsletter-qm .form--newsletter .form__head .qm-content { text-align: left; padding: 30px 0 20px 170px; flex-grow: 1; flex-basis: 0; } .section--newsletter-qm .form--newsletter .form__head .qm-content h3 { font-weight: 600; font-size: 24px; text-transform: normal; color: #fff; margin: 0; text-transform: none; } .section--newsletter-qm .form--newsletter .form__head .qm-content p { margin: 0; font-family: 'futura-pt', sans-serif; font-weight: 400; font-size: 18px; line-height: 1.1; color: #fff; } .section--newsletter-qm .form--newsletter .form__body form { border: 2px solid #fff; border-radius: 4px; box-shadow: 0 0 16px rgba(0,0,0,.25); background-color: #fff; width: auto; max-width: 100%; margin: 1px 40px 0 60px; } .section--newsletter-qm .form--newsletter .form__body .btn { float: right; font-size: 20px; } /* Interior Pages */ .article--default .article__entry .section--newsletter-qm .form--newsletter .form__head img { margin: 0; } .article__body .section--newsletter-qm .shell { padding-left: 0; padding-right: 0; } .article__body .section--newsletter-qm .form--newsletter .form__head { width: 260px; max-width: 100%; flex: 0 0 260px; } .article__body .section--newsletter-qm .form--newsletter .form__head .qm-sample { left: 10px; bottom: auto; top: 20px; max-width: 100px; width: 100px; } .article__body .section--newsletter-qm .form--newsletter .form__head .qm-sample .handheld-frame { padding-bottom: 6px; } .article__body .section--newsletter-qm .form--newsletter .form__head .qm-content { padding: 20px 0 20px 120px; } .article__body .section--newsletter-qm .form--newsletter .form__head .qm-content h3 { font-size: 20px; } .article__body .section--newsletter-qm .form--newsletter .form__head .qm-content p { font-size: 16px; } .article__body .section--newsletter-qm .form--newsletter .form__body { width: calc(100% - 300px); max-width: 100%; flex: 0 0 calc(100% - 260px); } .article__body .section--newsletter-qm .form--newsletter .form__body form { margin: 1px 20px 0 40px; } /* Tablet Portrait */ @media (max-width: 959px) { .section--newsletter-qm .form--newsletter .form__head { width: 300px; max-width: 100%; flex: 0 0 300px; } .section--newsletter-qm .form--newsletter .form__head .qm-sample { position: absolute; bottom: 0; left: 0; padding-right: 0; max-width: 120px; width: 120px; } .article__body .section--newsletter-qm .form--newsletter .form__head .qm-sample { bottom: 0; top: auto; } .section--newsletter-qm .form--newsletter .form__head .qm-content { padding: 30px 0 20px 140px; } .section--newsletter-qm .form--newsletter .form__body { width: calc(100% - 300px); max-width: 100%; flex: 0 0 calc(100% - 300px); } } /* Mobile */ @media (max-width: 767px) { .home .main.w-quality-matters .section--updates { padding-bottom: 1px; } .section--newsletter-qm .form--newsletter { height: auto; } .section--newsletter-qm .form--newsletter .form__head, .article__body .section--newsletter-qm .form--newsletter .form__head { height: auto; width: 100%; max-width: 100%; flex: none; } .section--newsletter-qm .form--newsletter .form__head::before { display: none; } .section--newsletter-qm .form--newsletter .form__head .qm-content-wrap { height: auto; } .section--newsletter-qm .form--newsletter .form__head .qm-sample { left: 10px; max-width: 100px; width: 100px; } .section--newsletter-qm .form--newsletter .form__head .qm-content { padding: 30px 0 20px 120px; } .section--newsletter-qm .form--newsletter .form__body, .article__body .section--newsletter-qm .form--newsletter .form__body { width: 100%; max-width: 100%; flex: 0 0 calc(100% - 386px); padding: 10px 20px 30px; } .home .section--newsletter-qm .section__body:before { display: none; } } /* HELPERS */ .list-lower-alpha { list-style-type: lower-alpha !important; } .list-disc { list-style-type: disc !important; } .list-circle { list-style-type: circle !important; } .list-decimal { list-style-type: decimal !important; } .list-lower-alpha li, .list-disc li, .list-circle li, .list-decimal li { padding-left: 0 !important; margin-left: 1rem !important; } .list-lower-alpha li::before, .list-disc li::before, .list-circle li::before, .list-decimal li::before { display: none !important; }