/* ================================================================================================ Table of Content ================================================================================================ 1.0 - Typography 2.0 - Background 3.0 - Header 4.0 - Navigation 5.0 - Navigation (Social) 6.0 - Navigation (WordPress Highlight) 7.0 - Navigation (Toggle), breakpoint for responsive menu 8.0 - Slider 9.0 - Content (Single Post) 10.0 - Content (Posts and Custom post types) 11.0 - Content (Category and archive rows) 12.0 - Content (Archives and search rows) 13.0 - Content (Events) 14.0 - Sidebar 15.0 - Footer 16.0 - Buttons (Test colors) 17.0 - Tables 18.0 - Pagination 19.0 - Breadcrumbs 20.0 - Media Queries (Tablet Large 64em (1024px)) 21.0 - Media Queries (Mobile Large 37.50em (600px)) 22.0 - Media Queries (Mobile Small 30em (480px)) 23.0 - Media Queries (Mobile Small 20em (320px)) 24.0 - Miscelleanous (clearfix, figure, no-padding) 25.0 - Miscelleanous (Test and hacks colors) 26.0 - Miscelleanous (Test and hacks sizes) 27.0 - Miscelleanous (Comments thread) 28.0 - Miscelleanous (WordPress gallery and image alignment) ================================================================================================ */ /* ================================================================================================ 1.0 - Typography ================================================================================================ */ a { color: #8cb700; line-height: inherit; text-decoration: none; } a:hover, a:focus { color: #020d16; } .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6 { line-height: 1; margin-bottom: 0.625rem; font-family: "Playfair Display", "Georgia", sans-serif; color: #8cb700; font-weight: normal; white-space: wrap; overflow: hidden; text-overflow: ellipsis; } @font-face { font-family: 'Montserrat'; src: url("../fonts/Montserrat-Light.otf"); font-weight: 300; } @font-face { font-family: 'Montserrat'; src: url("../fonts/Montserrat-Regular.ttf"); } @font-face { font-family: 'Montserrat'; src: url("../fonts/Montserrat-Bold.ttf"); font-weight: bold; } /* ================================================================================================ 2.0 - Background ================================================================================================ */ body { background-image: url("../img/gray-pattern.png"); background-position: left top; background-repeat: repeat; background-attachment: scroll; } #boxed-wrapper { background: #fff; display: block; margin: 0 auto; -webkit-box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.1); max-width: 1100px; width: 100%; margin-bottom: 40px; } /* ================================================================================================ 3.0 - Header ================================================================================================ */ header { display: block; position: relative; background-repeat: no-repeat; background-position: center bottom; /* Create the parallax scrolling effect */ background-attachment: fixed; background-size: cover; } section.fixed-header { /* position:fixed;*/ z-index: 100; width: 100%; padding: 5px 20px 0px 20px; } header div.logo { padding: 0px; z-index: 100; } header div.logo img { max-height: 90px; width: auto; } header div.slogan a { color: #FFF; } header div.slogan a:hover { color: #020d16; } .single-cover .overlay { background: rgba(140, 183, 0, 0.85); height: 100%; width: 100%; top: 0; left: 0; } .single-cover .title.center span.vcard { border: none; } .single-cover .title.center { text-align: center; font-family: "Playfair Display", "Georgia", sans-serif; padding: 1.6em 0px; display: block; font-weight: 300; color: #FFF; } header .site-title { font-family: "Playfair Display", "Georgia", sans-serif; font-size: 4.5em; padding: 0; margin: 0; line-height: 1.020em; } header .banner-top img { max-height: 90px; width: auto; } header .banner-top .widget-title { display: none; } header .search-form input { border: none; border-bottom: solid 1px #8cb700; box-shadow: none; margin: 0; } header .search-form .button, header .search-form button { background-color: transparent; color: #8cb700; padding: 5px; font-size: 1.15rem; margin: 0; } header .search-form button:hover, header .search-form button:focus, header .search-form .button:hover, header .search-form .button:focus { color: #8cb700; background-color: transparent; } header .search-form .small-2 { width: 10%; } header .search-form .small-10 { width: 90%; } /* ================================================================================================ 4.0 - Navigation ================================================================================================ */ .top-bar { background: #333333; height: 2.8125rem; line-height: 2.8125rem; margin-bottom: 0; overflow: hidden; position: relative; } .top-bar { background: none; z-index: 99; } .top-bar.expanded { overflow: visible; min-height: 100%; } .top-bar-section li:not(.has-form) a:not(.button) { font-size: 0.80em; font-weight: 300; } .top-bar-section ul li:hover:not(.has-form) > a { background-color: #8cb700; } .top-bar-section li:not(.has-form) a:not(.button) { line-height: 2.8125rem; padding: 1px 1.1rem; } .top-bar-section .has-dropdown > a::after { font-family: 'FontAwesome'; color: #8cb700; content: '\f078'; line-height: 1px; font-size: 0.7em; } .top-bar-section .has-dropdown > a:hover::after { font-family: 'FontAwesome'; color: #FFF; content: '\f078'; line-height: 1px; font-size: 0.7em; } .main-nav { float: right !important; } .top-bar .toggle-topbar.menu-icon { margin-top: 0px; top: 0px; } .top-bar-section ul li > a { color: #6f6f6e; } .top-bar-section li a:hover { color: #020d16; background: #020d16; } .nav-wrapper nav { /*! overflow: hidden; */ } .top-bar .toggle-topbar.menu-icon { top: 0%; } .main-nav li:first-child { border-left: none; } .top-bar ul li { background: #FFF; } .top-bar .toggle-topbar.menu-icon { border-bottom: none; } .top-bar .toggle-topbar.menu-icon { border-bottom: none; } .top-bar .toggle-topbar.menu-icon a { color: #8cb700; padding: 0; position: relative; font-family: "Playfair Display", "Georgia", sans-serif; } .top-bar .toggle-topbar.menu-icon a span::after { /*box-shadow: 0 0 0 1px $link-color, 0 7px 0 1px $link-color, 0 14px 0 1px $link-color;*/ box-shadow: none; font-family: 'FontAwesome'; content: '\f0c9'; color: #8cb700; font-size: 1.8em; } .top-bar-section ul li { background: none; } .nav-wrapper nav ul li a { font-family: "Roboto"; text-transform: uppercase; } .nav-wrapper nav #home-link i { font-size: 1.8em; } .top-bar-section .dropdown li a { font-size: 0.7em; } .top-bar-section .dropdown { display: block; height: auto; margin: 0; padding: 0; width: 100%; } /* ================================================================================================ 5.0 - Navigation (Social) ================================================================================================ */ .socials ul { margin: 0; padding: 0; } .socials ul li { text-align: center; float: left; list-style: none; margin-left: 25px; } .socials ul li a { color: #FFF; font-size: 20px; width: 36px; height: 36px; -moz-border-radius: 18px; -webkit-border-radius: 18px; border-radius: 18px; border: solid 1px #FFF; display: block; } footer .socials ul li a:hover { color: #020d16; font-size: 20px; text-align: center; border: solid 1px #020d16; } header .socials ul li a { color: #8cb700; font-size: 15px; width: 36px; height: 36px; -moz-border-radius: 18px; -webkit-border-radius: 18px; border-radius: 18px; border: solid 1px #8cb700; display: block; } header .socials ul li a:hover { color: #020d16; text-align: center; border: solid 1px #020d16; } header .nav-wrapper, header .socials { /*margin-top:15px;*/ } .socials ul li { text-align: center; float: left; list-style: none; margin-left: 8px; } header .socials { padding: 0; } .socials li a::before { content: '\f408'; display: inline-block; padding: 4px; font-family: 'FontAwesome'; font-size: 18px; vertical-align: top; -webkit-font-smoothing: antialiased; } .socials ul li .screen-reader-text { display: none; } .socials li a[href*="wordpress.com"]::before { content: '\f205'; } .socials li a[href*="facebook.com"]::before { content: '\f09a'; } .socials li a[href*="twitter.com"]::before { content: '\f099'; } .socials li a[href*="dribbble.com"]::before { content: '\f17d'; } .socials li a[href*="plus.google.com"]::before { content: '\f0d5'; } .socials li a[href*="pinterest.com"]::before { content: '\f231'; } .socials li a[href*="github.com"]::before { content: '\f09b'; } .socials li a[href*="tumblr.com"]::before { content: '\f174'; } .socials li a[href*="youtube.com"]::before { content: '\f16a'; } .socials li a[href*="flickr.com"]::before { content: '\f16e'; } .socials li a[href*="vimeo.com"]::before { content: '\f27d'; } .socials li a[href*="instagram.com"]::before { content: '\f16d'; } .socials li a[href*="codepen.io"]::before { content: '\f1cb'; } .socials li a[href*="linkedin.com"]::before { content: '\f0e1'; } /* ================================================================================================ 6.0 - Navigation (WordPress Highlight) ================================================================================================ */ .nav-wrapper nav.top-bar li.current-menu-item, .nav-wrapper nav.top-bar li.current-menu-ancestor, .nav-wrapper nav.top-bar li.current-menu-parent { /* border-bottom:solid 1px $link-color; */ } .nav-wrapper nav.top-bar li.current-menu-item a, .nav-wrapper nav.top-bar li.current-menu-ancestor a, .nav-wrapper nav.top-bar li.current-menu-parent a { color: #8cb700; font-weight: bold; } .nav-wrapper nav.top-bar li.current-menu-item a:hover, .nav-wrapper nav.top-bar li.current-menu-ancestor a:hover, .nav-wrapper nav.top-bar li.current-menu-parent a:hover { color: #8cb700; } .top-bar-section .current-menu-item.has-dropdown > a::after, .top-bar-section .current-menu-ancestor.has-dropdown > a::after, .top-bar-section .current-menu-parent.has-dropdown > a::after { color: #8cb700; content: '\f078'; line-height: 1px; font-size: 0.7em; } .top-bar-section .current-menu-item.has-dropdown > a:hover::after, .top-bar-section .current-menu-ancestor.has-dropdown > a:hover::after, .top-bar-section .current-menu-parent.has-dropdown > a:hover::after { color: #8cb700; } /* ================================================================================================ 7.0 - Navigation (Toggle), breakpoint for responsive menu ================================================================================================ */ meta.foundation-mq-topbar { width: 65em; } .top-bar .toggle-topbar.menu-icon a span::after { margin-top: 0px; top: 0%; right: 0.9375rem; } @media only screen and (max-width: 65em) { .top-bar-section li:not(.has-form) a:not(.button) { font-size: 0.9em; } .top-bar-section li:not(.has-form) a:not(.button) { line-height: 2rem; padding: 2px 0.5rem; } } @media only screen and (min-width: 65em) { .top-bar { background: #FFF; overflow: visible; height: 100%; } .top-bar:before, .top-bar:after { content: " "; display: table; } .top-bar:after { clear: both; } .top-bar .toggle-topbar { display: none; } .top-bar .title-area { float: left; } .top-bar .name h1 a, .top-bar .name h2 a, .top-bar .name h3 a, .top-bar .name h4 a, .top-bar .name h5 a, .top-bar .name h6 a { width: auto; } .top-bar input, .top-bar select, .top-bar .button, .top-bar button { font-size: 0.875rem; height: 1.75rem; position: relative; top: 0.53125rem; } .top-bar .has-form > .button, .top-bar .has-form > button { font-size: 0.875rem; height: 1.75rem; position: relative; top: 0.53125rem; } .top-bar.expanded { background: #333333; } .contain-to-grid .top-bar { margin: 0 auto; margin-bottom: 0; max-width: 62.5rem; } .top-bar-section { transition: none 0 0; left: 0 !important; } .top-bar-section ul { display: inline; height: auto !important; width: auto; } .top-bar-section ul li { float: left; } .top-bar-section ul li .js-generated { display: none; } .top-bar-section li.hover > a:not(.button) { background-color: #555555; background: #222222; color: #FFFFFF; } .top-bar-section li a:hover { background: #000; } .top-bar-section li:not(.has-form) a:not(.button) { line-height: 2.8125rem; padding: 0px 0.98rem; } .top-bar-section li:not(.has-form) a:not(.button):hover { /*! background-color: #555555; */ /*! background: #222222; */ } .top-bar-section li.active:not(.has-form) a:not(.button) { background: #008CBA; color: #FFFFFF; line-height: 2.8125rem; padding: 0 0.9375rem; } .top-bar-section li.active:not(.has-form) a:not(.button):hover { background: #0078a0; color: #FFFFFF; } .top-bar-section .has-dropdown > a { padding-right: 2.1875rem !important; } .top-bar-section .has-dropdown > a:after { border: none; /*content: "";*/ display: block; height: 0; width: 0; border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent; border-top-style: solid; margin-top: -2.5px; top: 1.40625rem; } .top-bar-section .has-dropdown.moved { position: relative; } .top-bar-section .has-dropdown.moved > .dropdown { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; display: block; } .top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown { position: static !important; height: auto; width: auto; overflow: visible; clip: auto; display: block; position: absolute !important; } .top-bar-section .has-dropdown > a:focus + .dropdown { position: static !important; height: auto; width: auto; overflow: visible; clip: auto; display: block; position: absolute !important; } .top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after { border: none; content: "\00bb"; top: 0.1875rem; right: 5px; } .top-bar-section .dropdown { left: 0; background: transparent; min-width: 100%; top: auto; } .top-bar-section .dropdown li a { background: #333333; color: #FFFFFF; line-height: 2.8125rem; padding: 12px 0.9375rem; white-space: nowrap; } .top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) { background: #333333; color: #FFFFFF; } .top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button) { background-color: #555555; color: #FFFFFF; background: #222222; } .top-bar-section .dropdown li label { background: #333333; white-space: nowrap; } .top-bar-section .dropdown li .dropdown { left: 100%; top: 0; } .top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] { border-right: solid 1px #4e4e4e; border-bottom: none; border-top: none; clear: none; height: 2.8125rem; width: 0; } .top-bar-section .has-form { background: #333333; height: 2.8125rem; padding: 0 0.9375rem; } .top-bar-section .right li .dropdown { left: auto; right: 0; } .top-bar-section .right li .dropdown li .dropdown { right: 100%; } .top-bar-section .left li .dropdown { right: auto; left: 0; } .top-bar-section .left li .dropdown li .dropdown { left: 100%; } .no-js .top-bar-section ul li:hover > a { background-color: #555555; background: #222222; color: #FFFFFF; } .no-js .top-bar-section ul li:active > a { background: #008CBA; color: #FFFFFF; } .no-js .top-bar-section .has-dropdown:hover > .dropdown { position: static !important; height: auto; width: auto; overflow: visible; clip: auto; display: block; position: absolute !important; } .no-js .top-bar-section .has-dropdown > a:focus + .dropdown { position: static !important; height: auto; width: auto; overflow: visible; clip: auto; display: block; position: absolute !important; } } .top-bar-section .dropdown li.title.back a::before { font-family: "FontAwesome"; content: '\f053'; font-size: 0.8em; border: none; color: #8cb700; padding-right: 10px; } .top-bar-section .dropdown li.title.back a { color: #8cb700; } .top-bar-section .dropdown li.title h5 a, .top-bar-section .dropdown li.parent-link a { color: #8cb700; display: block; } /* ================================================================================================ 8.0 - Slider ================================================================================================ */ @media only screen and (max-width: 65em) { .slider-wrapper, .slider-wrapper .post-item > img { min-height: 320px !important; max-height: 320px; overflow: hidden; } } @media only screen and (max-width: 35em) { .slider-wrapper, .slider-wrapper .post-item > img { min-height: 210px; max-height: 210px; overflow: hidden; } } @media only screen and (max-width: 25em) { .slider-wrapper, .slider-wrapper .post-item > img { min-height: 140px; max-height: 140px; overflow: hidden; } } @media only screen and (max-width: 20em) { .slider-wrapper, .slider-wrapper .post-item > img { min-height: 120px; max-height: 120px; overflow: hidden; } } #slider { position: relative; width: 100%; } .slider-wrapper { min-height: 450px; max-height: 450px; overflow: hidden; background: #000; } .slider-wrapper .post-item { position: relative; } .slider-wrapper .post-item > img { margin: 0; padding: 0; display: block; width: 100%; border: 0; opacity: .5; min-height: 450px; object-fit: cover; } .slider-wrapper .slider-caption .label.category { background-color: #8cb700; margin-bottom: 40px; color: #8cb700; padding: 4px 18px; } .slider-wrapper .slider-caption .post-item-date { font-size: 0.75em; font-family: "Playfair Display", "Georgia", sans-serif; color: #FFF; } .slider-wrapper .slider-caption { position: absolute; padding: 20px; top: 20px; } .slider-wrapper .panel { border: none; background: none; background-color: none; } .slider-wrapper .panel p { font-size: 0.9rem; font-weight: normal; line-height: 1.3; margin-bottom: 0.6rem; } .slider-wrapper .slider-caption .panel .post-item-title { font-weight: 300; line-height: 1.2; font-family: "Playfair Display", "Georgia", sans-serif; } .slider-wrapper .slider-caption .panel .post-item-title a { color: #FFF; } .slider-wrapper .slider-caption .panel .post-item-title a:hover { color: #8cb700; } #slider .slider-controllers { position: absolute; width: 100%; bottom: 0px; } .slider-controllers .slick-track { display: flex; flex-direction: row; height: 90px; overflow: hidden; } .slider-controllers .controller-title { padding: 8px 20px; border-top: 1px solid rgba(255, 255, 255, 0.3); margin-right: 15px; flex: 1; } .slider-controllers .controller-title a { color: #FFF; font-weight: bold; font-family: "Playfair Display", "Georgia", sans-serif; } .slider-controllers .slick-current, .slider-controllers .controller-title:hover { background: rgba(140, 183, 0, 0.3); border-bottom: solid 3px #8cb700; } .slider-controllers .slick-current a, .slider-controllers .controller-title a:hover { color: #FFF; } .slick-prev, .slick-next { background: transparent; border: 1px solid #8cb700; border-radius: 30px; background: transparent; } .slick-prev::before, .slick-next::before { color: #8cb700; } /* ================================================================================================ 9.0 - Content (Single Post) ================================================================================================ */ .single-row { padding: 0px; margin-bottom: 30px; } .single-row article .panel { padding-top: 15px; padding-bottom: 15px; } .single-row article .panel, .archive-row article .panel { border: none; margin: 0; padding: 15px; background: none; } .single-row article .panel .post-item-date { text-align: center; } .single-row article .panel .post-item-date p { clear: right; text-transform: uppercase; font-size: 1em; margin-bottom: 0.4em; } .single-row article .panel .post-item-date .post-item-day { color: #000; font-weight: bold; } .single-row article .panel .post-item-category { padding-top: 5px; border-top: solid 1px; } .single-row .post-categories, .single-row .post-tags { margin-right: 20px; margin-bottom: 20px; } .single-row article.post-item iframe { min-width: 100%; } .single-row article.post-item { padding: 15px; /* background: rgba(245, 245, 245, 0.8) !important; */ line-height: 1.3em; font-size: 17px; width: 100%; background: #FFF; /* padding-top:50px; */ text-align: justify; margin-bottom: 1.2rem; -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); } .single-row article .post-item-image { position: relative; } article .post-item-image .colorful-line { height: 2px; background: #8cb700; width: 80px; position: absolute; top: 30px; left: 30px; } .single-row article.post-item .wp-caption { background: #efefef; color: #000; font-style: italic; } .single-row article.post-item .wp-caption-text { padding: 5px; text-align: center; font-size: 0.7em; } .single-row article.post-item ul, .single-row article.post-item ul { list-style: none; } .single-row article.post-item ol { list-style: none; counter-reset: li; } .single-row article.post-item .post-content ol li:before { content: counter(li) "."; color: #8cb700; display: inline-block; width: 1em; font-weight: bold; padding-right: 25px; } .single-row article.post-item ol li { counter-increment: li; } .single-row article.post-item .post-content ul li:before { font-family: "FontAwesome"; content: '\f054'; color: #8cb700; padding-right: 1em; font-size: 0.7em; height: 10px; line-height: 10px; position: relative; bottom: 3px; } .single-row article.post-item blockquote { background: #efefef; border-left: 5px solid #8cb700; padding: 5px 10px 5px 20px; margin-bottom: 10px; } article .post-item-date { color: gray; text-align: center; font-size: 0.7rem; text-transform: uppercase; padding: 5px 0px; } .single-row article.post-item blockquote p { margin: 7px 0; } .single-row article.post-item blockquote blockquote { background: #fff; } .single-row article.post-item .post-item-author { padding: 20px 10px; background: #1d1d1b; } .single-row .post-item-author p, .single-row .post-item-author { color: white; font-size: 0.9em; } .single-row .post-item-author img { height: 120px; width: 120px; max-width: 100%; height: auto; border-radius: 60px; -moz-border-radius: 60px; -webkit-border-radius: 60px; } /* .single-row article.post-item img { background:#FFF;padding:6px;border:solid 1px #d9d9d9; } */ .single-row article button:hover, .single-row article .panel .button:focus, .single-row article .panel .button:hover, .single-row article .panel .button:focus, .single-row .widget .button:hover { background-color: #000; color: #FFFFFF; } .single-row article.post-item .bottom-line { border-bottom: 10px solid #8cb700; margin-bottom: 10px; } .single-row article.post-item .post-item-title { font-family: "Playfair Display", "Georgia", sans-serif, Helvetica, Roboto, Arial, sans-serif; line-height: 2.5rem; padding-bottom: 5px; text-align: left; } /* ================================================================================================ 10.0 - Content (Posts and Custom post types) ================================================================================================ */ .main-column { padding: 0px; } .single-row .main-column { padding-left: 15px; } article button:hover, article .panel .button:focus, article .panel .button:hover, article .panel .button:focus, .widget .button:hover { background-color: #020d16; color: #FFFFFF; } article.post-item .post-item-title { font-family: "Playfair Display", "Georgia", sans-serif, Helvetica, Roboto, Arial, sans-serif; font-weight: 300; } article.post-item .post-item-title a { color: #8cb700; } article.post-item .post-item-title a:hover { color: #8cb700; } article .post-item-date span { display: block; } article .post-item-date .day { font-weight: bold; font-size: 2.5em; } article .post-item-date .month-year { font-size: 0.7em; } article .panel { border: none; margin-bottom: 1.25rem; padding: 1.25rem; padding-bottom: 0px; position: relative; } /* ================================================================================================ 11.0 - Content (Category and archive rows) ================================================================================================ */ .main-row { padding: 5px 15px; margin-top: 20px; } .category-row .category-header .columns { padding: 0; } .category-row .post-list { /* margin-top:30px; */ margin-bottom: 20px; min-height: 100%; display: flex; flex-wrap: wrap; } .category-row .post-list article { padding-bottom: 0px; margin-bottom: 0.5rem; flex-grow: 1; } .row .category-header { margin-bottom: 10px; border-bottom: solid 1px #c9c9c9; text-transform: uppercase; } .category-header .post-item-button { line-height: 1.5em; font-size: 0.75em; padding-top: 10px; } .category-title { font-family: "Roboto"; color: #8cb700; text-transform: uppercase; padding: 0px; font-weight: 500; border-bottom: solid 1px #8cb700; display: inline-block; margin-bottom: -1px; } article.columns + article.columns:last-child { float: left; } .main-row .category-row article { margin-bottom: 0; } .bloc-3.main-row .category-row article { margin-bottom: 20px; } .category-row .post-list:child(n+1) { padding-left: 20px; } .category-row .post-item-caption { border: none; margin-bottom: 0; } .category-row.category-mix .post-item-caption .post-item-image { background: #000; } .category-row.category-mix .post-item-caption .post-item-image img { opacity: .6; } .category-row.category-mix .post-item-caption .panel { position: absolute; bottom: 20px; padding: 20px; } .category-row.category-mix .no-thumb .post-item-caption .panel { position: relative; bottom: 0px; padding: 0px; } .category-row .post-item-caption .panel { border: none; margin-top: 10px; position: relative; padding: 0; float: none; margin-bottom: 0; background: transparent; } .category-row.category-mix .panel .post-item-title { font-weight: 300; line-height: 1.2; font-family: "Playfair Display", "Georgia", sans-serif; } .category-row.category-mix .panel .post-item-title, .category-row.category-mix .panel p, .category-row.category-mix .panel .post-item-date { color: #FFF; } .category-row.category-mix .no-thumb .panel .post-item-title, .category-row.category-mix .no-thumb .panel p, .category-row.category-mix .no-thumb .panel .post-item-date { color: #000; } .category-row.category-mix .mix-small article:first-child { margin-bottom: 20px; } .category-row.category-mix .panel .post-item-title a, .category-row.category-mix .panel .label { color: #8cb700; } .category-row.category-mix .panel .post-item-title a:hover { color: #FFF; } .category-row article .panel p { font-family: inherit; font-weight: normal; line-height: 1.3; font-size: 0.9rem; } .category-row .category-link-wrapper { display: block; } /* ================================================================================================ 12.0 - Content (Archives and search rows) ================================================================================================ */ .category-row.archive-row .category-title, .category-row.archive-row .category-title-line, .not-found, .single-row .category-title, .single-row .category-title-line { text-align: left; } .post-list.not-found ul { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } /* ================================================================================================ 13.0 - Content (Events) ================================================================================================ */ .category-row .event-widget { padding: 20px; } .event-widget .event-item { padding: 12px 5px; border-bottom: solid 1px #ededed; } .category-row .event-widget .event-item { padding: 18px 0px; } .event-widget .event-item:last-of-type { border-bottom: 0px; } .event-widget .day, .event-widget .full-day, .event-widget .month { font-family: "Playfair Display", "Georgia", sans-serif; line-height: 0.6em; } .event-widget .day { color: #8cb700; line-height: 0.8; letter-spacing: -4px; text-align: center; } .category-row .event-widget .day { text-align: left; } .event-widget .month { color: #c9c9c9; } .event-widget .full-day { color: #8cb700; font-weight: 300; } .event-widget p.description { margin-bottom: 0; } .event-widget .description a { font-size: 0.8em; font-weight: 300; color: #020d16; } .event-widget .link { line-height: 2.45rem; font-size: 1rem; } .event-widget .description a:hover { color: #8cb700; } /* ================================================================================================ 14.0 - Sidebar ================================================================================================ */ aside .widget { max-width: 100%; margin-bottom: 15px; -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2); } aside .widget ul, .widget ol { padding: 15px 10px; } aside .row.widget { margin-bottom: 20px; border: solid 1px #d8d8d8; } aside .widget-title { color: #FFF; font-family: "Playfair Display", "Georgia", sans-serif; text-transform: uppercase; display: block; margin-bottom: 15px; background: #8cb700; } aside .widget_search .widget-title { padding: 0px; margin-bottom: 0px; margin-top: 0px; background: none; } aside .widget_search { background: #8cb700; padding: 5px 10px 0px 15px; border: solid 1px #8cb700; } aside .widget_search button { font-size: 1.4em; } aside .widget .button.small { padding: 0.6rem 0.5rem 0.7rem 0.5rem; font-size: 0.8125rem; } aside .widget-title { padding: 5px 10px 0px 15px; margin-bottom: 0px; margin-top: 0px; } aside .widget-title .fa { font-size: 0.85em; height: 22px; line-height: 22px; padding-right: 10px; display: block; float: left; } aside .twitter-feed .widget-title { background: #35a0d8; } aside .widget.twitter-feed { max-height: 300px; overflow: hidden; } aside .facebook-box .widget-title { background: #3e5e97; } aside .facebook-box iframe { width: 100%; } aside .recent-posts-box ul { padding: 0; margin: 0; padding: 15px; } aside .widget ul li { list-style: none; padding-bottom: 10px; margin-bottom: 5px; border-bottom: dashed 1px #ededed; } aside .widget ul li:last-child { border-bottom: none; } aside .recent-posts-box ul li:last-child { border-bottom: none; } .widget .button.small { padding: 0.64rem; font-size: 0.8125rem; width: 100%; } .widget ul { list-style: none; margin: 0; padding: 0; } .widget ul li a:before { font-family: "FontAwesome"; content: '\f054'; color: #8cb700; padding-right: 10px; } .widget ul li a { font-size: 0.9em; color: #020d16; } footer .widget ul li a { font-size: 0.9em; color: #FFF; } aside .recent-posts-box ul li a { font-size: 0.8em; } .widget ul li a:hover { color: #8cb700; } /* ================================================================================================ 15.0 - Footer ================================================================================================ */ footer#footer { background: #8cb700; } footer#footer { /* padding: 35px 20px 25px 20px; */ color: #FFF; } footer .copyright { clear: both; font-size: 0.9em; margin-bottom: 10px; padding: 5px 20px; } footer#footer .copyright a { color: #020d16; } footer#footer .copyright a:hover { color: #FFF; } footer#footer .footer-bar { margin-bottom: 25px; padding-top: 20px; padding-bottom: 60px; margin-top: 20px; background-attachment: fixed; padding-left: 20px; padding-right: 20px; } footer#footer .footer-bar form { max-width: 100%; overflow: hidden; } footer#footer button.search-submit.button.small { padding: 0.50rem 1.2rem; height: 2.4rem; overflow: hidden; } footer#footer button.search-submit i { font-size: 1.4em; } footer#footer .widget .button.small { padding-left: 5px; padding-right: 5px; width: 100%; font-size: 1em; padding: 0.55em; } footer#footer .footer-bar .widget-title { color: #FFF; } footer#footer .footer-bar { margin-top: 20px; background-color: #1b1a1a; } footer#footer .footer-bar .widget-title { font-family: "Roboto"; text-transform: uppercase; border-bottom: solid 1px rgba(255, 255, 255, 0.3); padding-bottom: 20px; display: block; margin-bottom: 15px; } footer#footer .back-to-top-wrapper { position: relative; } footer#footer a.back-to-top { width: 60px; height: 60px; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; color: #FFF; background: #8cb700; position: fixed; text-align: center; line-height: 60px; right: 4%; bottom: 30%; font-size: 2em; } footer#footer a.back-to-top:hover { color: #8cb700; background: #fff; border: solid 1px #8cb700; } footer#footer a#back-to-top { opacity: 1; z-index: 999; } /* ================================================================================================ 16.0 - Buttons ================================================================================================ */ .button, button { background-color: #8cb700; font-family: "Roboto"; } button.small, .button.small { padding: 0.65rem 1.5rem 0.65rem 1.5rem; font-size: 0.8125rem; } button:hover, button:focus, .button:hover, .button:focus { background-color: #8cb700; } article .panel .button { border-radius: 5px; border-style: solid; border-width: 0; cursor: pointer; font-family: "Roboto"; font-weight: normal; line-height: normal; margin: 0 0 0.8rem; position: relative; text-align: center; text-decoration: none; display: inline-block; padding: 0.5rem 1.4rem; font-size: 0.8rem; border-color: #ededed; color: #FFFFFF; text-transform: uppercase; transition: background-color 300ms ease-out; } .button.rounded { border-radius: 5px; } .button.green { background: #8ab81e; border-color: #84bd1f; } .button.navy { background: #022f4b; border-color: #033a5b; } .button.blue { background: #039cfd; border-color: #2baffd; } .button.red { background: #da0513; border-color: #f50625; } .call-to-action .button.small { text-transform: uppercase; font-size: 0.7rem; } .main-column .call-to-action .button.small { background: #8cb700; margin-left: 20px; margin-top: 10px; } .main-column .call-to-action .button.small:hover { background: #8cb700; } /* ================================================================================================ 17.0 - Tables ================================================================================================ */ table, th, td { border: 1px solid #ededed; } table { width: 100%; } table thead tr th { background-color: #8cb700; color: white; text-transform: uppercase; font-family: "Playfair Display", "Georgia", sans-serif; } /* ================================================================================================ 18.0 - Pagination ================================================================================================ */ .nav-links div { display: inline; } .nav-links .nav-next { float: right; } .nav-links .nav-prev { float: left; } .page-numbers, .nav-links div { font-family: "Playfair Display", "Georgia", sans-serif; display: inline-block; padding: 5px 10px; margin: 0 2px 0 0; border: 1px solid #8cb700; line-height: 1; text-decoration: none; border-radius: 2px; font-weight: 600; font-size: 1em; } .page-numbers.current, a.page-numbers:hover { background: #8cb700; color: #FFF; } span.page-numbers.dots { color: #8cb700; } .pagination-wrapper { margin: 15px 0px; } ul.pagination li.current a, ul.pagination li.current button { background: #8cb700; } ul.pagination li a, ul.pagination li { font-size: 1em; font-family: "Playfair Display", "Georgia", sans-serif; } ul.pagination li.current a:hover, ul.pagination li.current a:focus, ul.pagination li.current button:hover, ul.pagination li.current button:focus { background: #020d16; } /* ================================================================================================ 19.0 - Breadcrumbs ================================================================================================ */ footer .breadcrumbs { display: block; list-style: none; margin-left: 0; overflow: hidden; padding: 0.5625rem 0.875rem 0.5625rem; background-color: transparent; border: none; } footer .breadcrumbs li a, footer .breadcrumbs li { color: #FFF; } footer .breadcrumbs li a:hover { color: #000; } footer .breadcrumbs > *::before { color: #000; } .breadcrumbs { display: block; list-style: none; margin-left: 0; overflow: hidden; padding: 0.6em 1.3rem; background-color: transparent; border: none; } .single-row .breadcrumbs { margin-bottom: 15px; } .single-row .post-item .breadcrumbs { font-weight: bold; font-size: 0.9em; padding: 0; } .breadcrumbs > * { color: #000; font-size: 0.7em; line-height: 1.2rem; } .breadcrumbs a { color: #8cb700; } .breadcrumbs a:hover { color: #8cb700; } /* ================================================================================================ 20.0 - Media Queries (Tablet Large 64em (1024px)) ================================================================================================ */ @media only screen and (max-width: 64em) { .category-row .mix-small { display: none; } header .banner-top, header .clear-banner, .search-wrapper { display: none; } header div.logo img { max-height: 70px; width: auto; } header div.logo { padding-bottom: 10px; } header .nav-wrapper { line-height: 40px; } .top-bar .toggle-topbar.menu-icon { top: 15px; } .main-row.slider-controllers { display: none; } .slider-caption .post-item-title { font-size: 2em; } .nav-wrapper ul.right, .nav-wrapper ul.left, .top-bar-section .dropdown { float: none !important; background: #1b1a1a; } .top-bar .toggle-topbar.menu-icon a { font-size: 1.2em; } slider-wrapper .slider-caption .label.category { margin-bottom: 30px; } .slick-prev, .slick-next { bottom: 20%; } .slider-wrapper .panel p, .slider-wrapper .post-item-date { display: none; } .slider-wrapper .slider-caption .panel .post-item-title a { font-size: 0.8em; } .slider-wrapper .slider-caption .panel .post-item-title a:hover { color: #8cb700; } .main-nav > li { border-left: none; } .main-nav { float: left !important; } } /* ================================================================================================ 21.0 - Media Queries (Mobile Large 37.50em (600px)) ================================================================================================ */ @media only screen and (max-width: 37.5em) { .slider-wrapper .post-item-caption { display: none; } .main-row { padding: 5px 5px; margin-top: 0px; } .slick-prev, .slick-next { top: 25%; } .top-bar .toggle-topbar.menu-icon { top: 0px; } section.fixed-header { position: relative; z-index: 100; width: auto; } header div.slogan .title { padding-top: 20px; font-size: 3.8em; } header div.logo { margin-top: 20px; margin: 0 auto; float: none; } header div.logo { margin-bottom: -55px !important; } .top-bar-section ul li:hover:not(.has-form) > a { color: #8cb700; } .nav-wrapper nav { border: none; } .top-bar ul.title-area li { /* background: #000; */ } .top-bar ul li { /* background: #FFF;*/ /* border-bottom: dotted 1px $link-color;*/ } .main-nav > li { border-left: none; } .top-bar-section .has-dropdown > a::after { font-family: "FontAwesome"; content: '\f054'; font-size: 0.8em; border: none; padding-right: 10px; height: 1em; line-height: 1em; } .top-bar-section .has-dropdown > a:hover::after { font-family: "FontAwesome"; content: '\f054'; font-size: 0.8em; border: none; padding-right: 10px; height: 1em; line-height: 1em; } .top-bar-section ul li:hover:not(.has-form) > a { color: #000; } .top-bar-section ul li > a { padding-top: 5px; padding-bottom: 5px; font-size: 0.7em; } nav ul.languages li.oblique-border { display: none; } .category-row .post-list, .archive-row { padding: 15px; } .category-row article, .sy-controls li a:after { top: 50%; } p { font-size: 0.9rem; line-height: 1.4; margin-bottom: 1.25rem; text-rendering: optimizeLegibility; } .category-row article .post-item-image img { width: 100%; max-width: 100%; height: auto; } .category-row article .post-item-image { max-height: 200px; } .category-row article .panel p { font-family: inherit; font-size: 0.9rem; font-weight: normal; line-height: 1.3; margin-top: 0.6rem; margin-bottom: 0.6rem; text-rendering: optimizeLegibility; } .columns.nav-wrapper { width: 100%; padding-left: 0px; padding-right: 0px; } .top-bar-section ul li > a { color: #8cb700; } .top-bar .toggle-topbar.menu-icon a span::after { font-size: 1.5em; } } /* ================================================================================================ 22.0 - Media Queries (Mobile Small 30em (480px)) ================================================================================================ */ /* ================================================================================================ 23.0 - Media Queries (Mobile Small 20em (320px)) ================================================================================================ */ @media only screen and (max-width: 20em) { header div.logo { margin-bottom: -35px !important; } .slider-controllers .post-item-title { font-size: 1em; } } /* ================================================================================================ 24.0 - Miscelleanous (clearfix, figure, no-padding) ================================================================================================ */ .clearfix { clear: both; } figure { margin: 0; min-width: 100%; margin-top: 20px; margin-bottom: 20px; } article.comment-wrapper { margin-top: 20px; } .no-padding-top { padding-top: 0; } .no-padding-bottom { padding-bottom: 0; } .no-padding-right { padding-right: 0; } .no-padding-left { padding-left: 0; } .no-padding { padding: 0; } .no-margin-top { margin-top: 0; } .no-margin-bottom { margin-bottom: 0; } .no-margin-right { margin-right: 0; } .no-margin-left { margin-left: 0; } .no-margin { margin: 0; } /* ================================================================================================ 25.0 - Miscelleanous (Test and hacks colors) ================================================================================================ */ .background-indigo { background: indigo; } .background-purple { background: #76207d; } .background-blue { background: #0f9cd3; } .background-green { background: #a4c20d; } .background-green-forest { background: #0c8700; } .background-safran { background: #ffca00; } .background-orange { background: #f95915; } .background-lightgrey { background: #f2f4f4; } .background-grey { background: #5a5c5f; } .background-darkgrey { background: #292929; } .background-red { background: #e8351a; } .background-white { z-index: 1; background: white; content: ""; } /* ================================================================================================ 26.0 - Miscelleanous (Test and hacks sizes) ================================================================================================ */ .height-10 { min-height: 10px; } .height-15 { min-height: 15px; } .height-20 { min-height: 20px; } .height-30 { min-height: 30px; } .height-100 { min-height: 100px; } .height-120 { min-height: 120px; } .height-50 { min-height: 50px; } .height-200 { min-height: 200px; } .height-300 { min-height: 300px; } .height-150 { min-height: 150px; } .height-400 { min-height: 400px; } .height-450 { min-height: 450px; } .height-500 { min-height: 500px; } /* ================================================================================================ 27.0 - Miscelleanous (Comments thread) ================================================================================================ */ .comment-list { list-style: none; counter-increment: none; } .comment-content .widget input[type=submit] { max-width: 120px; } .comment-list, .comment-list .vcard .fn, .comment-content, .comment-content p { font-size: 0.85rem; } .comment-list .vcard { margin: 0 0 0.5rem; width: 100%; } #comments label { display: inline; } #comments span.required { color: crimson; } ul.comment-list { list-style: none; } .comment-list > li.comment { -moz-border-radius: 3px; border-radius: 3px; margin: 0 0 0.5em; position: relative; } /* ================================================================================================ 28.0 - Miscelleanous (WordPress gallery and image alignment) ================================================================================================ */ .aligncenter, div.aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignleft { float: left; } .alignright { float: right; } img.alignleft { margin: 3px 20px 10px 0; } img.alignright { margin: 3px 0 10px 20px; } .post-content .gallery:after { content: ""; display: table; clear: both; } img.aligncenter, div.aligncenter, figure.aligncenter { display: block; margin: 1em auto; } img.alignright, div.alignright, figure.alignright { float: right; margin: 1em 0 1em 2em; } img.alignleft, div.alignleft, figure.alignleft, img.wp-post-image.attachment-thumb { float: left; margin: 1em 1em 2em 0; } figure { max-width: 100%; height: auto; margin: 1em 0; } p img.alignright, p img.alignleft { margin-top: 0; } .gallery figure img { max-width: 100%; height: auto; margin: 0 auto; display: block; } .gallery figure { float: left; margin: 0 2% 1em 0; } .gallery.gallery-columns-1 figure { width: 100%; margin: 0 0 1em 0; float: none; } .post-content .gallery.gallery-columns-3 figure { width: 32%; } .gallery.gallery-columns-3 figure:nth-of-type(3n+3) { margin-right: 0; } .gallery.gallery-columns-3 figure:nth-of-type(3n+4) { clear: left; } .gallery.gallery-columns-2 figure { width: 49%; } .gallery.gallery-columns-2 figure:nth-of-type(even) { margin-right: 0; } .gallery.gallery-columns-2 figure:nth-of-type(odd) { clear: left; } .gallery.gallery-columns-4 figure { width: 23.25%; } .gallery.gallery-columns-4 figure:nth-of-type(4n+4) { margin-right: 0; } .gallery.gallery-columns-4 figure:nth-of-type(4n+5) { clear: left; } .gallery.gallery-columns-5 figure { width: 18%; } .gallery.gallery-columns-5 figure:nth-of-type(5n+5) { margin-right: 0; } .gallery.gallery-columns-5 figure:nth-of-type(5n+6) { clear: left; } .gallery.gallery-columns-6 figure { width: 14.2%; } .gallery.gallery-columns-6 figure:nth-of-type(6n+6) { margin-right: 0; } .gallery.gallery-columns-6 figure:nth-of-type(6n+7) { clear: left; } .gallery.gallery-columns-7 figure { width: 12%; } .gallery.gallery-columns-7 figure:nth-of-type(7n+7) { margin-right: 0; } .gallery.gallery-columns-7 figure:nth-of-type(7n+8) { clear: left; } .gallery.gallery-columns-8 figure { width: 10.2%; } .gallery.gallery-columns-8 figure:nth-of-type(8n+8) { margin-right: 0; } .gallery.gallery-columns-8 figure:nth-of-type(8n+9) { clear: left; } .gallery.gallery-columns-9 figure { width: 8.85%; } .gallery.gallery-columns-9 figure:nth-of-type(9n+9) { margin-right: 0; } .gallery.gallery-columns-9 figure:nth-of-type(9n+10) { clear: left; } @media (max-width: 767px) { img.alignright, div.alignright, figure.alignright, img.alignleft, div.alignleft, figure.alignleft, img.wp-post-image.attachment-thumb { display: block; margin: 1em auto; float: none; } .gallery.gallery-columns-4 figure, .gallery.gallery-columns-5 figure, .gallery.gallery-columns-6 figure, .gallery.gallery-columns-7 figure, .gallery.gallery-columns-8 figure, .gallery.gallery-columns-9 figure { width: 100%; margin: 0 0 1em 0; float: none; } } .slider-wrapper .slider-caption .panel .post-item-title a { color: #8cb700; } .nav-wrapper nav.top-bar li.current-menu-item a:hover, .nav-wrapper nav.top-bar li.current-menu-ancestor a:hover, .nav-wrapper nav.top-bar li.current-menu-parent a:hover { color: #FFF; } .slider-wrapper .slider-caption .label.category { background-color: #8cb700; color: #FFF; } aside .widget-title { background: #8cb700; } .main-column .call-to-action .button.small { background: #8cb700; } .main-column .call-to-action .button.small:hover { background: #8cb700; } .button:hover { background: #020d16; } /*# sourceMappingURL=style-green.css.map */