/* Global CSS */ /** * CONTENTS * * BASE * Variables.............Custom CSS properties. * Document..............Box-sizing and document (e.g. , ) setup. * Media.................WP specific img aligns and iframe styling. * Typography............@fontfaces, base text and vertical rhythm setup. * * COMPONENTS * Wrappers..............Wrapping and constraining elements. * Grid System...........Bootstrap based grid. * Clearfix..............Properly clear floats. * * Objects * Icons.................Icon Elements. * Buttons...............Button elements. * Tables................Table Styles. * Forms.................Form Elements. * Pagination............Pagination. * */ /*------------------------------------*\ BASE \*------------------------------------*/ /** * Document */ * { box-sizing: border-box; } html { overflow-x: hidden; scroll-behavior: smooth; } body { margin: 0; padding: 0 0 50px; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 18px; color: #58605C; -webkit-font-smoothing: antialiased; } @media (min-width: 768px) { body { padding: 0 0; } } /** * Media * * These selectors are hard cast because they are only used * by wordpress wyswyg when adding images to content */ .wp-caption.alignright, .wp-caption.alignleft, .wp-caption.alignnone, .wp-caption.aligncenter { margin: 0; width: auto !important; } img.alignright, .wp-caption.alignright img, img.alignleft, .wp-caption.alignleft img, img.aligncenter img { height: auto; max-width: 100%; width: 100%; display: block; } img.alignnone, .wp-caption.alignnone img, img.aligncenter, .wp-caption.aligncenter img { height: auto; max-width: 100%; } img.alignnone, .wp-caption.alignnone, img.aligncenter, .wp-caption.aligncenter { margin: 0 0 22px 0; } img.alignright, .wp-caption.alignright { float: none; margin: 0 0 45px 0; } img.alignleft, .wp-caption.alignleft { float: none; margin: 20px 0; } img.aligncenter, .wp-caption.aligncenter img { display: block; margin-left: auto; margin-right: auto; } iframe, img { max-width: 100%; } /* Fade-in for lazyloaded images */ .will-lazyload { opacity: 0; transition: opacity .25 linear; } .will-lazyload.lazyloaded { opacity: 1; } @media (min-width: 768px) { img.alignright, .wp-caption.alignright { float: right; margin: 2px 0 10px 33px; height: auto; max-width: 48%; } img.alignleft, .wp-caption.alignleft { float: left; margin: 3px 22px 10px 0; height: auto; max-width: 47%; } } @media (min-width: 1200px) { img.alignleft, .wp-caption.alignleft { margin: 5px 22px 10px 0; max-width: 50%; } img.alignright, .wp-caption.alignright { float: right; margin: 10px 0 20px 40px; height: auto; max-width: 38%; } } /** * Typography */ @font-face { font-family: 'latoheavy'; src: url('https://salientprocess.com/wp-content/themes/salientprocess/assets/fonts/lato-heavy.woff2') format('woff2'), url('https://salientprocess.com/wp-content/themes/salientprocess/assets/fonts/lato-heavy.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'latomedium'; src: url('https://salientprocess.com/wp-content/themes/salientprocess/assets/fonts/lato-medium.woff2') format('woff2'), url('https://salientprocess.com/wp-content/themes/salientprocess/assets/fonts/lato-medium.woff') format('woff'); font-weight: normal; font-style: normal; } /* - Please set up line-heights in ems - Set up typography styling based on styles found in .xd file under Assets > Character Styles */ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin:0; padding: 0; font-family: 'Lato', sans-serif; font-weight: 700; } h1, .h1 { font-size: 30px; line-height: 1em; } h2, .h2 { font-size: 26px; line-height: 1.1em; padding-bottom: 20px; color: #044C84; } h4, .h4 { font-size: 16px; line-height: 1.1em; padding-bottom: 10px; color: #58605C; } h5, h5 { font-size: 18px; line-height: 1.35em; color: #0D88E8; position: relative; text-transform: uppercase; } p { margin:0; padding: 0 0 15px; font-size: 16px; line-height: 1.66em; font-weight: 300; } p:last-child { padding-bottom: 0; } blockquote { margin: 25px 0 20px; padding: 20px 22px; font-size: 16px; line-height: 1.5em; font-family: 'latomedium'; font-weight: normal; color: #044C84; text-align: center; position: relative; background: linear-gradient(to bottom, rgba(247,247,247,1) 0%,rgba(237,237,237,1) 100%); z-index: 9; } blockquote span { display: block; font-family: 'Lato', sans-serif; font-weight: 300; } blockquote:before { content: "\“"; position: absolute; left: 50%; top: -26px; transform: translate(-50% , 0); color: #0188E8; font-size: 125px; font-family: 'Libre Baskerville', serif; line-height: 1em; } @media (min-width: 768px) { h1, .h1 { font-size: 36px; line-height: 1.11em; } h2, .h2 { font-size: 32px; line-height: 1.31em; } h5, .h5 { font-size: 20px; } } @media (min-width: 1200px) { h1, .h1 { font-size: 40px; } h2, .h2 { font-size: 41px; } h4, .h4 { font-size: 18px; } h5, .h5 { font-size: 22px; } p { font-size: 18px; padding-bottom: 20px; } } .page-content ul, .page-content ol { width: auto; overflow: hidden; } ul, ol { padding: 0 0 5px 20px; margin: 0; list-style: none; } ul { padding-left: 0; } ul li { position: relative; padding: 0 0 0 34px; margin: 0 0 20px 0; font-size: 16px; line-height: 1.5em; font-weight: 300; } ol li { position: relative; padding: 0 0 0 34px; margin: 0 0 20px 0; font-size: 16px; line-height: 1.5em; font-weight: 300; list-style: decimal; } ul li::before, ul.list-type li::before { content: ""; position: absolute; left: 0; top: -2px; font-family: 'icomoon'; background: url(../img/bullet.png); width: 23px; height: 21px; background-size: 100%; background-position: left 0; background-repeat: no-repeat; } a { text-decoration: none; position: relative; transition: all ease-in-out 0.3s; font-family: 'latomedium'; font-weight: normal; color: #0188E8; word-break: break-word; border-bottom: 2px solid transparent; } @media (min-width: 1200px) { ul li { font-size: 18px; padding-left: 36px; } a:hover { border-color: #0188E8; } ul, ul.list-type { padding-left: 70px; padding-right: 70px; } } /*------------------------------------*\ COMPONENTS \*------------------------------------*/ /** * Wrappers */ .container, .container-fluid { margin-right: auto; margin-left: auto; padding-left: 22px; padding-right: 22px; } .container { max-width: 1354px; } @media (min-width: 768px) { .container, .container-fluid { padding-left: 52px; padding-right: 52px; } } @media (min-width: 1200px) { .container, .container-fluid { padding-left: 16px; padding-right: 16px; } } /** * Utility Margin/Padding Classes * /* Used on outer-most section container so section margins collapse */ .section-margins { margin-top: var(--section-margins); margin-bottom: var(--section-margins); } /* Used only for sections with colored backgrounds */ .section-padding { padding-top: var(--section-margins); padding-bottom: var(--section-margins); } /** * Grid System * * Bootstrap v3.3.1 (http://getbootstrap.com) * Copyright 2011-2014 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * -------------------------------------------------------------------------- * Base setup 20px gutters * * Phones - xxs - < 600px ** Default ** * Small Tablets - xs - >= 600px * Tablets - sm - >= 768px * Desktop - md - >= 1025px * Large Desktop - lg - >= 1200px * -------------------------------------------------------------------------- * Learn more here: http://getbootstrap.com/css/#grid * -------------------------------------------------------------------------- */ .row { margin-right: -16px; margin-left: -16px; } [class*="col-"] { position: relative; min-height: 1px; padding-left: 16px; padding-right: 16px; } /* Extra Extra small devices (devices, less than 600px) */ [class*="col-xxs-"] { float:left; } .col-xxs-12 { width: 100%; } .col-xxs-11 { width: 91.66666667%; } .col-xxs-10 { width: 83.33333333%; } .col-xxs-9 { width: 75%; } .col-xxs-8 { width: 66.66666667%; } .col-xxs-7 { width: 58.33333333%; } .col-xxs-6 { width: 50%; } .col-xxs-5 { width: 41.66666667%; } .col-xxs-4 { width: 33.33333333%; } .col-xxs-3 { width: 25%; } .col-xxs-2 { width: 16.66666667%; } .col-xxs-1 { width: 8.33333333%; } .col-xxs-pull-12 { right: 100%; } .col-xxs-pull-11 { right: 91.66666667%; } .col-xxs-pull-10 { right: 83.33333333%; } .col-xxs-pull-9 { right: 75%; } .col-xxs-pull-8 { right: 66.66666667%; } .col-xxs-pull-7 { right: 58.33333333%; } .col-xxs-pull-6 { right: 50%; } .col-xxs-pull-5 { right: 41.66666667%; } .col-xxs-pull-4 { right: 33.33333333%; } .col-xxs-pull-3 { right: 25%; } .col-xxs-pull-2 { right: 16.66666667%; } .col-xxs-pull-1 { right: 8.33333333%; } .col-xxs-pull-0 { right: auto; } .col-xxs-push-12 { left: 100%; } .col-xxs-push-11 { left: 91.66666667%; } .col-xxs-push-10 { left: 83.33333333%; } .col-xxs-push-9 { left: 75%; } .col-xxs-push-8 { left: 66.66666667%; } .col-xxs-push-7 { left: 58.33333333%; } .col-xxs-push-6 { left: 50%; } .col-xxs-push-5 { left: 41.66666667%; } .col-xxs-push-4 { left: 33.33333333%; } .col-xxs-push-3 { left: 25%; } .col-xxs-push-2 { left: 16.66666667%; } .col-xxs-push-1 { left: 8.33333333%; } .col-xxs-push-0 { left: auto; } .col-xxs-offset-12 { margin-left: 100%; } .col-xxs-offset-11 { margin-left: 91.66666667%; } .col-xxs-offset-10 { margin-left: 83.33333333%; } .col-xxs-offset-9 { margin-left: 75%; } .col-xxs-offset-8 { margin-left: 66.66666667%; } .col-xxs-offset-7 { margin-left: 58.33333333%; } .col-xxs-offset-6 { margin-left: 50%; } .col-xxs-offset-5 { margin-left: 41.66666667%; } .col-xxs-offset-4 { margin-left: 33.33333333%; } .col-xxs-offset-3 { margin-left: 25%; } .col-xxs-offset-2 { margin-left: 16.66666667%; } .col-xxs-offset-1 { margin-left: 8.33333333%; } .col-xxs-offset-0 { margin-left: 0; } /* Extra small devices (phones, 600px and up) */ @media (min-width: 600px) { [class*="col-xs-"] {float:left;} .col-xs-12 { width: 100%; } .col-xs-11 { width: 91.66666667%; } .col-xs-10 { width: 83.33333333%; } .col-xs-9 { width: 75%; } .col-xs-8 { width: 66.66666667%; } .col-xs-7 { width: 58.33333333%; } .col-xs-6 { width: 50%; } .col-xs-5 { width: 41.66666667%; } .col-xs-4 { width: 33.33333333%; } .col-xs-3 { width: 25%; } .col-xs-2 { width: 16.66666667%; } .col-xs-1 { width: 8.33333333%; } .col-xs-pull-12 { right: 100%; } .col-xs-pull-11 { right: 91.66666667%; } .col-xs-pull-10 { right: 83.33333333%; } .col-xs-pull-9 { right: 75%; } .col-xs-pull-8 { right: 66.66666667%; } .col-xs-pull-7 { right: 58.33333333%; } .col-xs-pull-6 { right: 50%; } .col-xs-pull-5 { right: 41.66666667%; } .col-xs-pull-4 { right: 33.33333333%; } .col-xs-pull-3 { right: 25%; } .col-xs-pull-2 { right: 16.66666667%; } .col-xs-pull-1 { right: 8.33333333%; } .col-xs-pull-0 { right: auto; } .col-xs-push-12 { left: 100%; } .col-xs-push-11 { left: 91.66666667%; } .col-xs-push-10 { left: 83.33333333%; } .col-xs-push-9 { left: 75%; } .col-xs-push-8 { left: 66.66666667%; } .col-xs-push-7 { left: 58.33333333%; } .col-xs-push-6 { left: 50%; } .col-xs-push-5 { left: 41.66666667%; } .col-xs-push-4 { left: 33.33333333%; } .col-xs-push-3 { left: 25%; } .col-xs-push-2 { left: 16.66666667%; } .col-xs-push-1 { left: 8.33333333%; } .col-xs-push-0 { left: auto; } .col-xs-offset-12 { margin-left: 100%; } .col-xs-offset-11 { margin-left: 91.66666667%; } .col-xs-offset-10 { margin-left: 83.33333333%; } .col-xs-offset-9 { margin-left: 75%; } .col-xs-offset-8 { margin-left: 66.66666667%; } .col-xs-offset-7 { margin-left: 58.33333333%; } .col-xs-offset-6 { margin-left: 50%; } .col-xs-offset-5 { margin-left: 41.66666667%; } .col-xs-offset-4 { margin-left: 33.33333333%; } .col-xs-offset-3 { margin-left: 25%; } .col-xs-offset-2 { margin-left: 16.66666667%; } .col-xs-offset-1 { margin-left: 8.33333333%; } .col-xs-offset-0 { margin-left: 0; } } /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { [class*="col-sm-"] {float:left;} .col-sm-12 { width: 100%; } .col-sm-11 { width: 91.66666667%; } .col-sm-10 { width: 83.33333333%; } .col-sm-9 { width: 75%; } .col-sm-8 { width: 66.66666667%; } .col-sm-7 { width: 58.33333333%; } .col-sm-6 { width: 50%; } .col-sm-5 { width: 41.66666667%; } .col-sm-4 { width: 33.33333333%; } .col-sm-3 { width: 25%; } .col-sm-2 { width: 16.66666667%; } .col-sm-1 { width: 8.33333333%; } .col-sm-pull-12 { right: 100%; } .col-sm-pull-11 { right: 91.66666667%; } .col-sm-pull-10 { right: 83.33333333%; } .col-sm-pull-9 { right: 75%; } .col-sm-pull-8 { right: 66.66666667%; } .col-sm-pull-7 { right: 58.33333333%; } .col-sm-pull-6 { right: 50%; } .col-sm-pull-5 { right: 41.66666667%; } .col-sm-pull-4 { right: 33.33333333%; } .col-sm-pull-3 { right: 25%; } .col-sm-pull-2 { right: 16.66666667%; } .col-sm-pull-1 { right: 8.33333333%; } .col-sm-pull-0 { right: auto; } .col-sm-push-12 { left: 100%; } .col-sm-push-11 { left: 91.66666667%; } .col-sm-push-10 { left: 83.33333333%; } .col-sm-push-9 { left: 75%; } .col-sm-push-8 { left: 66.66666667%; } .col-sm-push-7 { left: 58.33333333%; } .col-sm-push-6 { left: 50%; } .col-sm-push-5 { left: 41.66666667%; } .col-sm-push-4 { left: 33.33333333%; } .col-sm-push-3 { left: 25%; } .col-sm-push-2 { left: 16.66666667%; } .col-sm-push-1 { left: 8.33333333%; } .col-sm-push-0 { left: auto; } .col-sm-offset-12 { margin-left: 100%; } .col-sm-offset-11 { margin-left: 91.66666667%; } .col-sm-offset-10 { margin-left: 83.33333333%; } .col-sm-offset-9 { margin-left: 75%; } .col-sm-offset-8 { margin-left: 66.66666667%; } .col-sm-offset-7 { margin-left: 58.33333333%; } .col-sm-offset-6 { margin-left: 50%; } .col-sm-offset-5 { margin-left: 41.66666667%; } .col-sm-offset-4 { margin-left: 33.33333333%; } .col-sm-offset-3 { margin-left: 25%; } .col-sm-offset-2 { margin-left: 16.66666667%; } .col-sm-offset-1 { margin-left: 8.33333333%; } .col-sm-offset-0 { margin-left: 0; } } /* Medium devices (desktops, 1025px and up) */ @media (min-width: 1025px) { [class*="col-md-"] {float:left;} .col-md-12 { width: 100%; } .col-md-11 { width: 91.66666667%; } .col-md-10 { width: 83.33333333%; } .col-md-9 { width: 75%; } .col-md-8 { width: 66.66666667%; } .col-md-7 { width: 58.33333333%; } .col-md-6 { width: 50%; } .col-md-5 { width: 41.66666667%; } .col-md-4 { width: 33.33333333%; } .col-md-3 { width: 25%; } .col-md-2 { width: 16.66666667%; } .col-md-1 { width: 8.33333333%; } .col-md-pull-12 { right: 100%; } .col-md-pull-11 { right: 91.66666667%; } .col-md-pull-10 { right: 83.33333333%; } .col-md-pull-9 { right: 75%; } .col-md-pull-8 { right: 66.66666667%; } .col-md-pull-7 { right: 58.33333333%; } .col-md-pull-6 { right: 50%; } .col-md-pull-5 { right: 41.66666667%; } .col-md-pull-4 { right: 33.33333333%; } .col-md-pull-3 { right: 25%; } .col-md-pull-2 { right: 16.66666667%; } .col-md-pull-1 { right: 8.33333333%; } .col-md-pull-0 { right: auto; } .col-md-push-12 { left: 100%; } .col-md-push-11 { left: 91.66666667%; } .col-md-push-10 { left: 83.33333333%; } .col-md-push-9 { left: 75%; } .col-md-push-8 { left: 66.66666667%; } .col-md-push-7 { left: 58.33333333%; } .col-md-push-6 { left: 50%; } .col-md-push-5 { left: 41.66666667%; } .col-md-push-4 { left: 33.33333333%; } .col-md-push-3 { left: 25%; } .col-md-push-2 { left: 16.66666667%; } .col-md-push-1 { left: 8.33333333%; } .col-md-push-0 { left: auto; } .col-md-offset-12 { margin-left: 100%; } .col-md-offset-11 { margin-left: 91.66666667%; } .col-md-offset-10 { margin-left: 83.33333333%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-8 { margin-left: 66.66666667%; } .col-md-offset-7 { margin-left: 58.33333333%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-5 { margin-left: 41.66666667%; } .col-md-offset-4 { margin-left: 33.33333333%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-2 { margin-left: 16.66666667%; } .col-md-offset-1 { margin-left: 8.33333333%; } .col-md-offset-0 { margin-left: 0; } } /* Large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { [class*="col-lg-"] {float:left;} .col-lg-12 { width: 100%; } .col-lg-11 { width: 91.66666667%; } .col-lg-10 { width: 83.33333333%; } .col-lg-9 { width: 75%; } .col-lg-8 { width: 66.66666667%; } .col-lg-7 { width: 58.33333333%; } .col-lg-6 { width: 50%; } .col-lg-5 { width: 41.66666667%; } .col-lg-4 { width: 33.33333333%; } .col-lg-3 { width: 25%; } .col-lg-2 { width: 16.66666667%; } .col-lg-1 { width: 8.33333333%; } .col-lg-pull-12 { right: 100%; } .col-lg-pull-11 { right: 91.66666667%; } .col-lg-pull-10 { right: 83.33333333%; } .col-lg-pull-9 { right: 75%; } .col-lg-pull-8 { right: 66.66666667%; } .col-lg-pull-7 { right: 58.33333333%; } .col-lg-pull-6 { right: 50%; } .col-lg-pull-5 { right: 41.66666667%; } .col-lg-pull-4 { right: 33.33333333%; } .col-lg-pull-3 { right: 25%; } .col-lg-pull-2 { right: 16.66666667%; } .col-lg-pull-1 { right: 8.33333333%; } .col-lg-pull-0 { right: auto; } .col-lg-push-12 { left: 100%; } .col-lg-push-11 { left: 91.66666667%; } .col-lg-push-10 { left: 83.33333333%; } .col-lg-push-9 { left: 75%; } .col-lg-push-8 { left: 66.66666667%; } .col-lg-push-7 { left: 58.33333333%; } .col-lg-push-6 { left: 50%; } .col-lg-push-5 { left: 41.66666667%; } .col-lg-push-4 { left: 33.33333333%; } .col-lg-push-3 { left: 25%; } .col-lg-push-2 { left: 16.66666667%; } .col-lg-push-1 { left: 8.33333333%; } .col-lg-push-0 { left: auto; } .col-lg-offset-12 { margin-left: 100%; } .col-lg-offset-11 { margin-left: 91.66666667%; } .col-lg-offset-10 { margin-left: 83.33333333%; } .col-lg-offset-9 { margin-left: 75%; } .col-lg-offset-8 { margin-left: 66.66666667%; } .col-lg-offset-7 { margin-left: 58.33333333%; } .col-lg-offset-6 { margin-left: 50%; } .col-lg-offset-5 { margin-left: 41.66666667%; } .col-lg-offset-4 { margin-left: 33.33333333%; } .col-lg-offset-3 { margin-left: 25%; } .col-lg-offset-2 { margin-left: 16.66666667%; } .col-lg-offset-1 { margin-left: 8.33333333%; } .col-lg-offset-0 { margin-left: 0; } } /** * Clearfix * Apply clearing without adding additional markup */ .clearfix:before, .clearfix:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after { content: " "; display: table; } .clearfix:after, .container:after, .container-fluid:after, .row:after { clear: both; } /*--------------------------------------------------------------*\ OBJECTS Objects are independent generic stylibf classes or UI peices. All styles for objects should be self contained. e.g. an object shouldn't rely on trump helpers to apply padding etc. \*--------------------------------------------------------------*/ /** * Buttons */ .btn { font-size: 14px; display: inline-block; padding: 10px 31px 9px; line-height: 1.2em; border-radius: 26px; text-decoration: none; font-family: 'latoheavy'; border: 3px solid transparent; font-weight: normal; position: relative; transition: all .3s ease-in-out; vertical-align: middle; color: #0D88E8; text-align: center; background: transparent; text-transform: uppercase; } @media (max-width: 767px) { .btn { vertical-align: top; } } input.btn:focus { border: 3px solid transparent; } .btn-secondary { border-color: #0D88E8; } .btn-primary { background: #044C84; color: #fff; } .btn-tertiary { background: transparent; color: #0188E8; font-size: 16px; padding: 0 19px 0 0; border: none; } .btn-tertiary::before { content: "\e903"; font-family: 'icomoon'; position: absolute; right: 0; top: 0; font-size: 14px; } .btn-read-more { background: transparent; color: #0188E8; font-size: 16px; padding: 0 19px 0 0; border: none; } .btn-read-more::before { content: "\e902"; font-family: 'icomoon'; position: absolute; right: 0; top: 0; font-size: 14px; } .btn-block { display: block; width: 100%; } .btn + .btn { margin-left: 10px; } .cta-btns { display: flex; align-items: center; justify-content: center; flex-direction: column; padding-top: 10px; } .cta-btns .btn:first-child { margin-bottom: 20px; } .cta-btns .btn + .btn { margin-left: 0px; } @media( max-width : 400px ) { .cta-btns .btn + .btn, .btn + .btn { margin-top: 15px; margin-left: 10px; } } @media (min-width: 600px) { .cta-btns { flex-direction: row; } .cta-btns .btn:first-child { margin-bottom: 0; } .cta-btns .btn + .btn { margin-top: 0; margin-left: 30px; } } @media (min-width: 768px) { .btn { padding: 9px 18px 9px; } .btn.btn-tertiary, .btn.btn-read-more { padding: 0 19px 0 0; } .btn + .btn { margin-top: 0; margin-left: 20px; } } @media (min-width: 1200px) { .btn { padding: 9px 30px 9px; font-size: 18px; } .btn-tertiary, .btn-read-more { font-size: 16px; } .btn-secondary:hover { border-color: #044C84; color: #044C84; } .btn-primary:hover { border-color: transparent; background: #0188E8; color: #fff; } .btn-tertiary:hover { border: none; color: #044C84; } .btn-read-more:hover { border: none; color: #0188E8; } .btn-read-more:hover::before { content: "\e904"; } .btn + .btn { margin-top: 0; margin-left: 30px; } } @media( min-width : 1500px ) { .btn { padding: 9px 34px 9px; font-size: 18px; } } .load-more .btn-secondary { margin-top: 30px; } .load-more .btn-secondary:hover { background-color: var( --blue ); color: var( --white ); border: 3px solid transparent; } /** * Icons */ @font-face { font-family: 'icomoon'; src: url('../icons/icomoon.eot?gaoe8z'); src: url('../icons/icomoon.eot?gaoe8z#iefix') format('embedded-opentype'), url('../icons/icomoon.ttf?gaoe8z') format('truetype'), url('../icons/icomoon.woff?gaoe8z') format('woff'), url('../icons/icomoon.svg?gaoe8z#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-address-icon:before { content: "\e900"; } .icon-apple-podcast-icon:before { content: "\e901"; } .icon-arrow-down:before { content: "\e902"; } .icon-arrow-right:before { content: "\e903"; } .icon-arrow-up:before { content: "\e904"; } .icon-automation-alignment-icon:before { content: "\e905"; } .icon-automation-estimate-icon:before { content: "\e906"; } .icon-automation-workshop-icon:before { content: "\e907"; } .icon-capture-icon:before { content: "\e908"; } .icon-content-icon:before { content: "\e909"; } .icon-decisions-icon:before { content: "\e90a"; } .icon-email-icon:before { content: "\e90b"; } .icon-linkedin-icon:before { content: "\e90c"; } .icon-menu:before { content: "\e90e"; } .icon-modeling-icon:before { content: "\e90f"; } .icon-phone-icon:before { content: "\e910"; } .icon-podbean-icon:before { content: "\e911"; } .icon-quote-icon:before { content: "\e912"; } .icon-search-icon:before { content: "\e913"; } .icon-spotify-icon:before { content: "\e914"; } .icon-tasks-icon:before { content: "\e915"; } .icon-twitter-icon:before { content: "\e916"; } .icon-workflow-icon:before { content: "\e917"; } .icon-youTube-icon:before { content: "\e918"; } .icon-search:before { content: "\e986"; } .icon-plus:before { content: "\ea0a"; } .icon-minus:before { content: "\ea0b"; } /** * Forms */ .form-col { padding-bottom: 25px; } label { color: #58605C; font-size: 18px; font-family: 'latomedium'; display: block; padding-bottom: 10px; } label sup { color: #0188E8; } textarea { background-color: #fff; width: 100%; border: none; height: 136px; border-radius: 4px; border-left: 5px solid transparent; color: #58605C; font-size: 18px; font-weight: 300; padding: 10px; } input:not([type="radio"]):not([type="checkbox"]), button, textarea { -webkit-appearance: none; } input:active, textarea:active, select:active, input:focus, textarea:focus, select:focus { outline: none; border: 1px solid #ccc; } /* default text input style */ [type="text"], [type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="url"], [type="week"], [type="date"] { background-color: #fff; width: 100%; border: none; height: 40px; border-radius: 4px; border-left: 5px solid transparent; color: #58605C; font-size: 18px; font-weight: 300; padding: 0 10px; } /* Removes inconsistent padding from Firefox buttons */ button::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border: none; padding:0; } /* Hide reCaptcha badge */ .grecaptcha-badge { visibility: hidden; } [type="text"]:focus, [type="date"]:focus, [type="datetime"]:focus, [type="datetime-local"]:focus, [type="email"]:focus, [type="month"]:focus, [type="number"]:focus, [type="password"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="url"]:focus, [type="week"]:focus, [type="date"]:focus { border: none; border-left: 5px solid #044C84; box-shadow: 0 3px 6px rgba(0,0,0,0.16); } @media (min-width: 768px) { [type="text"], [type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="url"], [type="week"], [type="date"] { height: 53px; } } /** * Pagination */ .wp-pagenavi { margin-top: 50px; } .wp-pagenavi .pages { border: 0; margin-left: 0; padding-left: 0; } .wp-pagenavi span.current, .wp-pagenavi .page, .wp-pagenavi .nextpostslink, .wp-pagenavi .previouspostslink { border: 1px solid #ddd; display: inline-block; padding: 6px 11px; } .wp-pagenavi span.current { background-color: #ddd; border-color: #ddd; } @media (min-width: 1025px) { .wp-pagenavi { margin-top: 70px; } } /* Authors */ .author_bio_section{ background-color: #9fd2fa47; padding: 15px; border: 1px solid var( --blue-02 ); } .author_name{ font-size:16px; font-weight: bold; } .author_details img { border: 1px solid var( --navy-blue ); border-radius: 50%; float: left; margin: 0 10px 10px 0; } .calendly-inline-widget { height: 1000px; } @media( min-width : 768px ) { .calendly-inline-widget { height: 700px!important; } } h2.frmTitleContactForm { font-size: 28px; color: #FFFFFF; font-style: normal; font-weight: 600; } .resource-form { padding-top: 20px; } .contact-input { padding-top: 25px; } em.important { color: #52B3FF !important; } label.cf-label { font-weight: 700; } input.wpcf7-form-control.wpcf7-submit.has-spinner { color: #044C84; font-style: normal; font-weight: 700; font-size: 21px; padding: 14px 50px 14px 50px; border-style: none; } input.wpcf7-form-control.wpcf7-submit.has-spinner { color: #044C84; font-style: normal; font-weight: 700; font-size: 21px; padding: 14px 50px 14px 50px; border-style: none; border-color: rgba(25, 136, 214, 1.0); -webkit-border-top-left-radius: 40px; border-top-left-radius: 40px; -webkit-border-top-right-radius: 40px; border-top-right-radius: 40px; -webkit-border-bottom-right-radius: 40px; border-bottom-right-radius: 40px; -webkit-border-bottom-left-radius: 40px; border-bottom-left-radius: 40px; } .submit-form { text-align: center; padding-top: 50px; }