/****************************************************************** Theme Name: Simpsons Creative Grid 2020 Description: A responsive theme for WordPress, developed by Simpsons Creative, allowing for development of responsive websites - through the use of a dynamic grid system. Author: Alex Wells Version: 3.0 Tags: fluid-layout, responsive-layout, accessibility-ready, translation-ready, microformats, rtl-language-support ******************************************************************/ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Roboto:wght@400;700&display=swap'); /* font-family: 'Lato', sans-serif; - BODY COPY font-family: 'Roboto', sans-serif; - HEADINGS */ /* Site Structure */ html { padding: 20px; } body { background-color: #fff146; font-family: 'Lato',Arial, Helvetica, sans-serif; font-size: calc(12px + 0.5vw); /* Responsive base font size */ } /* Website Maximum Width - Default: 1920px */ .site-width { max-width: 1920px; } /*Website Inner Width - Default: 1280px*/ .inner-width { max-width: 1280px; padding: 20px; } /*Post Maximum Width - Default: 960px*/ .single-post article.post { max-width: 960px; } /*Header*/ /*Footer*/ #footer {background-color: pink;} .inner-footer { background-color: purple; } .right { float: right; } /*==================== Standards ====================*/ /* 'Standards' contains all of the code that you're likely to change - font sizes, colors, buttons, etc. */ /*Text*/ h1, h2, h3, h4, h5, h6, p { margin: 0 0 5px 0; color: #000; } h1, h2, h3, h4, h5, h6 { color: #000; font-family: Lato, sans-serif; font-style: normal; } a { color: #4C74B9; text-decoration: none; word-break: break-word; } a:hover { text-decoration: none; opacity: 0.7; } a:visited { color: #4C74B9; } h1 { font-size: 1.912em; } h2 { font-size: 1.616em; padding-bottom: 0.8em; } h3 { font-size: 1.3em; padding-bottom: 0.8em; } h4 { font-size: 1.1em; } h5 { font-size: 1.243em; } h6 { font-size: 1.132em; } p, #content li { color: #000; font-family: 'Lato', sans-serif; font-size: 1em; line-height: 1.4em;padding-bottom: 1.5em; } #content { clear: both; } #content li { margin-left:20px; padding-bottom: 1.1em; } #content ul { margin-bottom: 1.5em; } /*Gallery Fix*/ #content .wp-block-gallery li { margin-left: unset; padding-bottom: unset; } /*Gallery Caption*/ .wp-caption-text, .gallery-caption { text-align: center; } .wp-block-gallery figcaption { line-height: normal; text-align: center; } /*Bullet Points/Numbered Lists*/ .entry-content ul > li { list-style-type: disc; color: #000; padding-bottom: 5px; } .entry-content ol > li { list-style-type: decimal; padding-bottom: 5px; } /*==================== Header ====================*/ .header { background-color: transparent; } .inner-header { background-color: #fff; overflow: unset; } .logo { width: 600px; max-width: 100%; float: left; line-height: 0; margin-bottom: 20px; } .header a.cta { display: none; } /*==================== Nav ====================*/ .nav { background-color: #000; } .nav ul { background: none; } .nav ul a { color: #fff; } .nav ul a:hover { color: #fff; text-decoration: none; opacity: 0.7; } /*.nav ul li:last-of-type a { padding-right: 0px; }*/ li#menu-item-91 { background-color: #FFED00; float: right; } li#menu-item-91 a { color: #000; } /* Current Menu Item */ .nav li.current-menu-item > a { color: #FFED00; font-weight: bold; } .nav li.current-menu-parent > a { color: #FFED00; font-weight: bold; } .nav li ul.sub-menu li.current-menu-item { background-color: #000; } .nav li ul.sub-menu li.current-menu-item a { color: #FFED00; font-weight: bold; } .nav li ul.sub-menu { background-color: #fff; } .nav li ul.sub-menu li a, .nav li ul.children li a { color: #000; padding-left: 10px; border-right: 0; display: block; width: 300px; border-bottom: 1px solid #ccc; } /* Responsive Menu */ button#responsive-menu-button { position: fixed; top: 40px; right: 40px; } /* Responsive Navigation */ #responsive-menu-container { background: rgba(0,0,0,0.9); } #responsive-menu-container #responsive-menu-wrapper, #responsive-menu-container #responsive-menu li.responsive-menu-item a { background: none; } /* All Menu Items */ #responsive-menu-container #responsive-menu li.responsive-menu-item .responsive-menu-item-link, #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item .responsive-menu-item-link { font-size: 15px; font-weight: 300; } /* Current Menu Item */ #responsive-menu-container #responsive-menu li.current-menu-parent > .responsive-menu-item-link { background: #FFED00; color: #000; font-weight: bold; } #responsive-menu-container #responsive-menu li.responsive-menu-current-item > .responsive-menu-item-link { background: #FFED00; color: #000; font-weight: bold; } /* Menu Item Hover */ #responsive-menu-container #responsive-menu li.responsive-menu-item a:hover, #responsive-menu-container #responsive-menu li.responsive-menu-current-item > .responsive-menu-item-link:hover { background: none; } /* Sub Menu Items */ #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a { background: none; } /* Current Sub Menu Item */ #responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-current-item > .responsive-menu-item-link { background: #FFED00; color: #000; font-weight: bold; } /* Current Sub Menu Item Subarrow */ #responsive-menu-container #responsive-menu li.current-menu-parent a .responsive-menu-subarrow, #responsive-menu-container #responsive-menu li.current-menu-item a .responsive-menu-subarrow { background-color: #FFED00; color: #000; } /*==================== Body ====================*/ .wp-block-image figcaption { color: #888888; margin-bottom: 30px; } .wp-block-image.size-full { margin-bottom: 30px; } .wp-block-image.size-full figcaption { text-align: center; color: #fff; margin-bottom: 10px; } .article-header img { padding-bottom: 1.5em; } .inner-content { background-color: #fff; display: flex; flex-wrap: wrap; } .page-template-default main#main, .blog main#main, .single main#main { padding-right: 40px; } h1.page-title { margin-bottom: 20px; } /*Buttons*/ a.button, #content a.button { background-color: #000; color: #fff; font-size: 20px; font-weight: 400; text-align: center; text-decoration: none; display: inline-block; padding: 10px 20px; } a.button:hover, #content a.button:hover { opacity: 0.7; } .entry-content a.button, #content .entry-content a.button { margin-bottom: 35px; } /*==================== Home Page ====================*/ .blog-grid { justify-content: space-between; } .blog-grid .d-1of3 { width: 30%; flex-basis: 30%; } .blog-grid h3 { font-size: 1.1em; line-height: 1.3em; padding-bottom: 0px; } .blog-grid p.post-date { padding-bottom: 5px; font-size: 0.8em; } .blog-grid p.post-excerpt { font-size: 0.8em; } .blackOverlay { background-color: rgba(0,0,0,0.5); width: 100%; height: 100%; display: block; position: absolute; top: 0px; z-index: 1; } /*==================== Sidebar ====================*/ /* Font Resizer */ .Zeno_FR_Widget { float: left; margin-bottom: 30px; } p.zeno_font_resizer { text-align: left !important; padding-bottom: 0px; margin-bottom: 0px; } p.zeno_font_resizer a { background-color: #000; color: #fff; line-height: 50px; text-align: center; height: 50px; width: 50px; float: left; border: 1px solid #fff; } /* Search Bar */ .widget_search { width: 100%; float: left; margin-bottom: 30px; } .widget_search label { display: none; } .widget_search input[type="text"] { background: #fff; color: #003F8E; width: 65%; float: left; padding: 10px; border: 1px solid #000; margin: 0; } .widget_search input[type="submit"] { background: #000; color: #fff; width: 35%; height: 37px; float: left; padding: 10px; border: 1px solid #000; margin: 0; } .widget_search input[type="submit"]:hover, .widget_search input[type="submit"]:active { opacity: 0.7; } /* Recent Posts */ .widget_recent_entries { width: 100%; float: left; } .widget_recent_entries ul > li { list-style-type: disc; color: #000; padding-bottom: 5px; } #content .widget_recent_entries li { line-height: normal; padding-bottom: 5px; } .widget_recent_entries ul li a { color: #000; font-size: 16px; line-height: normal; } /* CTA */ .widget_custom_html { width: 100%; float: left; } a.cta { background-color: #FFED00; color: #000; font-weight: bold; text-align: center; display: block; width: 100%; padding: 20px 5px; border: 1px solid #000; margin-bottom: 10px; } a.cta.facebook { background-color: #4267B2; color: #fff; } a.cta.twitter { background-color: #1DA1F2; color: #fff; } a.cta i { margin-right: 5px; } a.cta:hover { text-decoration: none; opacity: 0.7; } /*==================== News/Blog Page ====================*/ .all-news { justify-content: flex-start; margin-bottom: 0px; } .all-news .news-post { padding-right: 20px; margin-bottom: 40px; } .news-post img { margin-bottom: 20px; } .news-post h3.post-title, #content .news-post h3.post-title { font-size: 1em; font-weight: 700; text-align: left; padding-bottom: 0px; margin-bottom: 10px; } .news-post p.post-date, #content .news-post p.post-date { font-size: 0.8em; line-height: normal; margin-bottom: 10px; } .news-post p.post-excerpt, #content .news-post p.post-excerpt { font-size: 0.8em; } /* Flexbox Changes */ .latest-news { justify-content: flex-start; } .latest-news h1 { width: 100%; } .news-post { display: flex; } .news-post .post-wrap { display: flex; flex-direction: column; } .news-post .post-wrap p { flex: 1 0 auto; } .news-post a.button, #content .all-news .news-post a.button { width: fit-content; } /*==================== Pagination ====================*/ .pagination, #content .pagination { text-align: center; width: 100%; clear: both; padding: 20px 0px; } .pagination ul, #content .pagination ul { background-color: #FFED00; display: inline-block; white-space: nowrap; padding: 0; margin: 0; clear: both; border-radius: 3px; } .pagination li, #content .pagination li { padding: 0; margin: 0; float: left; display: inline; overflow: hidden; border-right: 1px solid #eaedf2; } .pagination a, .pagination span, #content .pagination a, #content .pagination span { margin: 0; text-decoration: none; padding: 0; line-height: 14px; font-size: 14px; font-weight: normal; padding: 0.75em; min-width: 1em; display: block; color: #000; } .pagination a:hover, .pagination a:focus, .pagination span:hover, .pagination span:focus { background-color: #000 !important; color: #fff !important; } .pagination .current, #content .pagination .current { cursor: default; color: #FFED00 !important; background-color: #000; } .pagination .current:hover, .pagination .current:focus { background-color: #000; color: #FFED00 !important; } /*==================== Footer ====================*/ #footer { background-color: transparent; padding: 0px; } .inner-footer { background-color: #fff; } #footer p, #footer a { color: #000; } /*==================== iframe ====================*/ .container { position: relative; overflow: hidden; width: 100%; /*padding-top: 100%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ height: 900px; margin-bottom:50px; } /* Then style the iframe to fit in the container div with full height and width */ .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } /*==================== Media Queries ====================*/ @media (max-width: 1280px) { /*Small Desktop*/ } @media (max-width: 1029px) { /*Tablet*/ } @media (max-width: 960px) { .blog-grid .d-1of3 { width: 50%; flex-basis: 49%; } } @media (max-width: 767px) { /*Mobile*/ .blog-grid .d-1of3 {width: 100%; flex-basis: 100%;} .page-template-default main#main, .blog main#main, .single main#main { padding-right: 0px; } body.logged-in.admin-bar button#responsive-menu-button { top: 86px !important; } body.logged-in.admin-bar #responsive-menu-container { top: 46px !important; } .logo { margin-top: 55px; } .header a.cta { display: block; margin-top: 20px; } .widget_search input[type="text"] { width: 80%; } .widget_search input[type="submit"] { width: 20%; } .page-id-99 #content .blocks-gallery-grid li.blocks-gallery-item { width: 100%; margin-right: 0px; } .ls-bottom-nav-wrapper { display: none; } /*=== Landing page - Home page===*/ .intro h1 { font-size: 3em; } } @media (max-width: 480px) { /*Small Mobile*/ /*=== Landing page - Home page===*/ .intro { padding: 200px 12%; } .intro p.seemore { font-size: 2em; } } /*==================== Animation Styles ====================*/ /* ScrollMagic Animation */ .scrollMagic { opacity: 0; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .scrollMagic.show { opacity: 1; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .fadeInTop { } .fadeInTop.show { -webkit-animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.25s both; animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.25s both; } /* Animista.net Generated */ /* ---------------------------------------------- * Generated by Animista on 2020-6-15 17:18:9 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation swing-in-top-fwd * ---------------------------------------- */ @-webkit-keyframes swing-in-top-fwd { 0% { -webkit-transform: rotateX(-100deg); transform: rotateX(-100deg); -webkit-transform-origin: top; transform-origin: top; opacity: 0; } 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform-origin: top; transform-origin: top; opacity: 1; } } @keyframes swing-in-top-fwd { 0% { -webkit-transform: rotateX(-100deg); transform: rotateX(-100deg); -webkit-transform-origin: top; transform-origin: top; opacity: 0; } 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform-origin: top; transform-origin: top; opacity: 1; } }