/* 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 \*------------------------------------*/ .cefaly-blog-template h1, .cefaly-blog-template .h1, .cefaly-blog-template h2, .cefaly-blog-template .h2, .cefaly-blog-template h3, .cefaly-blog-template .h3 { margin: 0; padding: 0 0 20px 0; font-family: 'Lato', sans-serif; font-weight: 700; color: #4B4741; } .cefaly-blog-template h4, .cefaly-blog-template .h4 { margin: 0; padding: 0 0 10px 0; font-weight: 700; font-family: 'Lato', sans-serif; } .cefaly-blog-template h1, .cefaly-blog-template .h1 { font-size: 45px; line-height: 1.222em; } .cefaly-blog-template h2, .cefaly-blog-template .h2 { font-size: 30px; line-height: 1.222em; } .cefaly-blog-template h3, .cefaly-blog-template .h3 { font-size: 25px; line-height: 1.48em; } .cefaly-blog-template h4, .cefaly-blog-template .h4 { font-size: 20px; line-height: 1.5em; } @media (min-width: 768px) {} @media (min-width: 1025px) { .cefaly-blog-template h1, .cefaly-blog-template .h1 { font-size: 36px; } .cefaly-blog-template h2, .cefaly-blog-template .h2 { font-size: 32px; padding-bottom: 20px; } .cefaly-blog-template h3, .cefaly-blog-template .h3 { font-size: 30px; } .cefaly-blog-template h4, .cefaly-blog-template .h4 { font-size: 20px; } } /** * 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.aligncenter { display: table; } .wp-caption.alignright, .wp-caption.alignleft, .wp-caption.alignnone, .wp-caption.aligncenter { margin: 0; width: auto !important; /* to overwrite inline widths */ } img.alignright, .wp-caption.alignright, img.alignleft, .wp-caption.alignleft { height: auto; max-width: 100%; } 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: 8px 0 0 0; } img.alignright, .wp-caption.alignright, img.alignleft, .wp-caption.alignleft { margin: 8px 0 15px 0; } img.aligncenter, .wp-caption.aligncenter img { display: block; margin-left: auto; margin-right: auto; border-radius: 16px; } .wp-caption.aligncenter { margin-left: auto; margin-right: auto; } .wp-caption-text { caption-side: bottom; display: table-caption; } @media (min-width: 768px) { img.alignright, .wp-caption.alignright, img.alignleft, .wp-caption.alignleft { height: auto; max-width: 50%; } img.alignright, .wp-caption.alignright { float: right; margin: 0 0 0 22px; } img.alignleft, .wp-caption.alignleft { float: left; margin: 0px 22px 0 0; } } /* Fade-in for lazyloaded images */ .will-lazyload { opacity: 0; transition: opacity .25 linear; } .will-lazyload.lazyloaded { opacity: 1; } /** * Typography */ /* - Please set up line-heights in ems - Set up typography styling based on styles found in .xd file under Assets > Character Styles */ .cefaly-blog-template p, ul, ol { margin: 0; padding: 0 0 25px 0; line-height: 31px; font-size: 18px; list-style: none; font-family: 'Lato', sans-serif; } .cefaly-blog-template .page-content ul, .cefaly-blog-template .page-content ol { /* fix for bulleted lists not wrapping around images correctly in Wordpress */ width: auto; overflow: hidden; margin-left: 30px; list-style: none; } .cefaly-blog-template .page-content ul li { padding-left: 25px; margin-bottom: 15px; } .cefaly-blog-template .page-content ul li:before { content: ">"; position: absolute; left: 0; top: 1px; font-size: 18px; font-weight: 500; color: #73321e; } .cefaly-blog-template .page-content ul li { position: relative; padding-left: 18px; color: #4B4741 !important; } .cefaly-blog-template .page-content a { color: #73321e !important; text-decoration: none; } @media (min-width: 768px) { .cefaly-blog-template p, ul, ol { font-size: 16px; } } @media (min-width: 1025px) { .cefaly-blog-template p, ul, ol { font-size: 18px; } .cefaly-blog-template ul li:before { width: 8px; height: 8px; } } blockquote { margin: 0 0 25px; padding: 15px; font-size: 22px; line-height: 32px; font-weight: bold; position: relative; border-left: 5px solid #6B99CA; background: #FFFFFF; } blockquote p { font-size: 18px; line-height: 26px; font-weight: bold; padding-bottom: 0; } @media (min-width: 768px) { blockquote { padding: 25px; font-size: 16px; } } @media (min-width: 1025px) { blockquote { padding: 20px 55px; font-size: 18px; } blockquote p { font-size: 22px; line-height: 32px; } } /*------------------------------------*\ COMPONENTS \*------------------------------------*/ /** * Wrappers */ .container, .container-fluid { margin-right: auto; margin-left: auto; padding-left: 22px; padding-right: 22px; } .container { max-width: 1356px; } @media (min-width: 768px) { .container, .container-fluid { padding-left: 16px; padding-right: 16px; } } /** * 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-left: -16px; /* TODO: Default grid. Update if different in prototypes. */ margin-right: -16px; } [class*="col-"] { position: relative; min-height: 1px; padding-left: 16px; /* TODO: Default grid. Update if different in prototypes. */ 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; } } /*--------------------------------------------------------------*\ 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 */ .cefaly-blog-template .btn-buy a, .cefaly-blog-template .btn { font-size: 16px; display: inline-block; padding: 14px 25px 14px 25px; line-height: 1.2em; border-radius: 5px; text-decoration: none; font-family: 'Lato', sans-serif; border: none; font-weight: 600; position: relative; transition: all .3s ease-in-out; vertical-align: middle; background: #6B99CA; color: #ffffff; text-transform: none; border-radius: 16px; } .cefaly-blog-template .btn-buy a:hover, .cefaly-blog-template .btn:hover { transition: all .3s ease-in-out; vertical-align: middle; background: #531314; border-color: #531314; } .cefaly-blog-template .btn-buy a { color: #fff !important; } .cefaly-blog-template .btn-buy a:hover { background-color: #2D3956; } .cefaly-blog-template .btn-primary { background: #e0ac83; color: #73321E !important; border: 1px solid transparent; } .brown .btn, .brown .btn-primary, .brown .btn:hover, .brown .btn-primary:hover { color: #fff; } .btn-secondary { background: #2D3956; color: #fff; } .btn-secondary:hover { background: #F2EDED; border-color: #531314; color: #531314; } .brown .btn-secondary { color: #BB2E31; } .brown .btn-secondary:hover { color: #531314; } .btn-tertiary { background: transparent; border: none; color: #260405; /* padding: 3px 42px 5px 5px; */ padding: 3px 20px 5px 5px; border-radius: 2px; } .btn-tertiary span { border-bottom: 2px solid #BB2E31; } .btn-tertiary:after { /* content: '\e903'; */ content: '\e90d'; font-family: "icomoon"; position: absolute; top: 4px; right: 5px; /* font-size: 27px; color: #BB2E31; */ color: #2D3956; font-weight: normal; font-size: 15px; transition: all 0.4s ease 0s; } .btn-tertiary:hover { /* background-color: #BB2E31; color: #fff;*/ background: transparent; color: #2D3956; } .btn-tertiary:hover::after { /* color: #fff; right: 7px;*/ right: 0; color: #2D3956; } .btn-block { display: block; width: 100%; } .btn+.btn { margin-top: 20px; /* Add margin-top when 2 buttons are next to each other */ } @media (min-width: 600px) { .btn+.btn { margin-top: 0; margin-left: 22px; } } /** * Icons */ /* add icon code here */ @font-face { font-family: 'icomoon'; src: url('/wp-content/themes/cefaly/assets/fonts/icomoon.eot?buhylw'); src: url('/wp-content/themes/cefaly/assets/fonts/icomoon.eot?buhylw#iefix') format('embedded-opentype'), url('/wp-content/themes/cefaly/assets/fonts/icomoon.ttf?buhylw') format('truetype'), url('/wp-content/themes/cefaly/assets/fonts/icomoon.woff?buhylw') format('woff'), url('/wp-content/themes/cefaly/assets/fonts/icomoon.svg?buhylw#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-minus:before { content: "\e912"; } .icon-plus:before { content: "\e913"; } .icon-close:before { content: "\e910"; } .icon-error:before { content: "\e911"; } .icon-email:before { content: "\e900"; } .icon-facebook:before { content: "\e901"; } .icon-hamburger-menu:before { content: "\e902"; } .icon-link-arrow:before { content: "\e903"; } .icon-linked-in:before { content: "\e904"; } .icon-location-pin:before { content: "\e905"; } .icon-menu-down-arrow:before { content: "\e906"; } .icon-phone:before { content: "\e907"; } .icon-play-button:before { content: "\e908"; } .icon-search:before { content: "\e909"; } .icon-slider-filled-circle:before { content: "\e90a"; } .icon-slider-hollow-circle:before { content: "\e90b"; } .icon-slider-left-arrow:before { content: "\e90c"; } .icon-slider-right-arrow:before { content: "\e90d"; } .icon-top-arrow:before { content: "\e90e"; } .icon-twitter:before { content: "\e90f"; } /** * Forms */ .cefaly-blog-template textarea { border: 1px solid #fff; border-left: 10px solid #fff; border-radius: 10px; width: 100%; color: #646464; font-size: 15px; padding: 30px 17px 5px 17px; box-shadow: none; font-family: 'Lato', sans-serif; box-shadow: 0 0 20px rgba(38, 4, 5, 0.1); resize: none; height: 165px; } /* Removes default webkit form styling */ 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; /* Removes blue border on focus */ border: 1px solid #260405; border-left: 10px solid #260405; } input.active, textarea.active { outline: none; /* Removes blue border on focus */ border: 1px solid #fff; border-left: 10px solid #260405; } /* 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"] { border: 1px solid #fff; border-left: 10px solid #fff; border-radius: 10px; width: 100%; color: #646464; font-size: 15px; padding: 30px 17px 5px 17px; box-shadow: none; font-family: 'Lato', sans-serif; box-shadow: 0 0 20px rgba(38, 4, 5, 0.1); } /* 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; } /** * 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; } } .blog-listing-container { position: relative; } .blog-listing__pagination {} .blog-listing__pagination .load-more__progress, .blog-listing__pagination .load-more__counter { display: none; } .blog-listing__pagination .load-more__counter { position: absolute; display: block; top: -40px; font-size: 20px; right: 0; text-align: center; width: 100%; } .blog-listing__pagination .load-more__counter span { font-weight: bold; } .blog-listing__pagination .load-more__btn { margin: 20px auto; } @media (min-width: 768px) { .blog-listing__pagination .load-more__counter { position: absolute; display: block; top: -60px; font-size: 20px; right: 15px; text-align: right; } } /** * Sticky Sidebar */ @media(min-width: 1025px) { .sticky-sidebar { position: -webkit-sticky; position: sticky; top: 125px; /* TODO: update to match how far down page when sidebar should stick */ } } /* Reource page */ .page-id-11143 .resouces__blog-grid { max-width: 1140px; margin-inline: auto; margin-top: 2rem; gap: 28px; } .page-id-11143 .resouces__blog-grid .w-grid-list { margin: 0 !important; gap: 28px; } .page-id-11143 .w-post-elm.post_taxonomy.usg_post_taxonomy_1.style_simple { display: none; } .page-id-11143 .w-grid-item-h { display: grid; grid-auto-flow: dense; } .page-id-11143 .w-post-elm.post_image.stretched img { width: 206px; height: 103px; margin-inline: auto; margin-bottom: 1rem; object-fit: cover; } .page-id-11143 .w-post-elm.post_date { font: normal normal bold 18px/27px Georgia; letter-spacing: 0px; color: #444444; text-align: center; margin-bottom: 1rem; } .page-id-11143 .w-post-elm.post_image { display: block; grid-row: 1 / 2; } .page-id-11143 .w-grid .post_title { display: none; } .page-id-11143 .w-post-elm.post_date:after { content: ""; display: block; position: relative; width: 45px; height: 3px; background: #3A94D1; margin-inline: auto; } .page-id-11143 .w-grid-item { background: #FFFFFF; box-shadow: 0px 1px 50px #0000001F; border-radius: 4px; margin-bottom: 28px; max-width: 360px; } .page-id-11143 .w-post-elm.post_content { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .post-content a { color: #0693e3; } .post-content .btn-primary { color: #fff; } /* Download Link Container */ .download-link-container { display: flex; gap: 10px; } .download-link-container img { width: 100%; max-width: 200px; }