/* Theme Name: Bice Theme Description: Bice Theme Version: 1.0 */ /* CSS Document Reset browser default styles All Header Top menu Content block Sidebar Container Footer Media Queries */ @font-face {font-family: 'TeXGyreTermes';src: url('fonts/TeXGyreTermes-Regular.eot');src: url('fonts/TeXGyreTermes-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/TeXGyreTermes-Regular.woff2') format('woff2'), url('fonts/TeXGyreTermes-Regular.woff') format('woff'), url('fonts/TeXGyreTermes-Regular.ttf') format('truetype'), url('fonts/TeXGyreTermes-Regular.svg#TeXGyreTermes-Regular') format('svg');font-weight: normal;font-style: normal;font-display: swap;} @font-face {font-family: 'TeXGyreTermes';src: url('fonts/TeXGyreTermes-Bold.eot');src: url('fonts/TeXGyreTermes-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/TeXGyreTermes-Bold.woff2') format('woff2'), url('fonts/TeXGyreTermes-Bold.woff') format('woff'), url('fonts/TeXGyreTermes-Bold.ttf') format('truetype'), url('fonts/TeXGyreTermes-Bold.svg#TeXGyreTermes-Bold') format('svg');font-weight: 700;font-style: normal;font-display: swap;} /* Reset browser default styles */ html, body {min-height:100%;-webkit-text-size-adjust:100%;overflow-x:hidden;} body {font:18px 'Red Hat Display', sans-serif;color:#213c60;background:#deeff8;} div, html, body, p, ul, ol, li, a, form, img, table, td, h1, h2, h3, h4, h5, h6, blockquote, header, section, footer, aside, nav, article, figure, figcaption, dt, dd, dl {margin:0;padding:0;} header, section, footer, aside, nav, article, figure, figcaption {display:block;} table {border-collapse:collapse;} img {border:none;max-width:100%;height:auto;} iframe, object, embed {max-width:100%;} ul, li {list-style:none;} input {vertical-align:middle;} input:focus, textarea:focus {outline:none;} button, input[type="submit"] {cursor:pointer;-webkit-appearance:none;} a, a:visited {text-decoration:none;color:#213c60;transition:color ease-in-out .2s;} a:active, a:hover {outline:0;text-decoration:none;color:#ff9634;} /* All */ .wrapper {max-width:1100px;padding:0 30px;margin:0 auto;position:relative;box-sizing:border-box;} .alignfull {margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw;} .alignwide {margin-left:calc(25% - 25vw);margin-right:calc(25% - 25vw);max-width:100vw;} /* Posts navigation */ .posts_navigation {display:flex;flex-wrap:wrap;justify-content:space-between;} /* Typography */ h1 {font:700 72px/72px 'TeXGyreTermes';padding-bottom:40px;} h1 em {color:#ff9634;} h2 {font:700 41px 'Red Hat Display';text-transform:uppercase;padding-bottom:20px;} h3 {font:700 31px 'TeXGyreTermes';color:#ff9634;padding-bottom:5px;} h4 {font:21px 'TeXGyreTermes';} p {padding-bottom:30px;} /* Form */ input[type="text"], input[type="email"], input[type="tel"], select {background:#fff;font:24px 'Red Hat Display', sans-serif;color:#213c60;border:none;border-radius:10px;padding:0 27px;height:58px;width:100%;box-sizing:border-box;} input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="tel"]::placeholder {color:#213c60;opacity:1;} input[type="checkbox"] {display:none;} input[type="checkbox"] + label {cursor:pointer;padding:3px 0 3px 37px;font-size:20px;font-weight:700;background:url(images/icons/checkbox_unchecked.png) left center/27px auto no-repeat;display:inline-block;vertical-align:middle;} input[type="checkbox"]:checked + label, input[type="checkbox"] + label:active {background-image:url(images/icons/checkbox_checked.png);} .searchform > div {display:flex;flex-wrap:wrap;align-items:center;} .searchform label {display:block;min-width:100%;} .searchform input[type="text"] {flex:1;margin-right:20px;} .gform_ajax_spinner, .gform_wrapper .validation_error, .gform_validation_errors {display:none !important;} .gform_wrapper {max-width:900px;margin:0 auto 15px auto;} .gform_wrapper .gform_heading {padding-bottom:15px;font-size:20px;} .gform_wrapper .gform_body .gfield {position:relative;padding-bottom:10px;border:none;} .gform_wrapper .gform_body .gfield label.gfield_label {display:none;} .gform_wrapper .gform_body fieldset.gfield {padding:0;} .gform_wrapper .gform_body fieldset legend {display:none;} .gform_wrapper .gform_body fieldset .ginput_container_address span {display:block;padding-bottom:10px;} .gform_wrapper .gform_body fieldset .ginput_container_address span label {display:none;} .gform_wrapper .gform_body .gfield .ginput_container_checkbox .gfield_checkbox div {padding:25px 0 20px 0;} .gform_wrapper .gform_body .gfield .validation_message {position:absolute;left:0;bottom:auto;top:calc(100% - 10px);z-index:2;color:#F91B1C;font-size:12px;line-height:12px;} .gform_wrapper .gform_footer {padding-top:15px;} .gform_wrapper .gform_footer .button {height:58px;min-width:100%;width:100%;font:700 31px 'TeXGyreTermes';} .gform_confirmation_message {padding-bottom:30px;font-size:20px;} /* Buttons */ .wp-block-button {display:inline;} .button, .button:visited, .wp-block-button__link, .wp-block-button__link:visited, .searchform input[type="submit"] {color:#fff;background:#ff9634;padding:5px 10px;min-width:135px;height:54px;font:700 19px 'Red Hat Display';text-transform:uppercase;border:none;border-radius:12px;text-align:center;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;transition:all ease-in-out .2s;} .button:hover, .wp-block-button__link:hover, .searchform input[type="submit"]:hover {color:#fff;background:#213c60;} .is-style-outline .wp-block-button__link, .is-style-outline .wp-block-button__link:visited {color:#213c60;background:#fff;} .is-style-outline .wp-block-button__link:hover {color:#fff;background:#213c60;} /* Main Colors */ .has-primary-color-color {color:#ff9634;} .has-text-color-color {color:#213c60;} .has-primary-color-background-color {background-color:#ff9634;} .has-text-color-background-color {background-color:#213c60;} /* Header */ .header {padding:20px 0 30px 0;} .header .wrapper {display:flex;align-items:center;} /* Top menu */ .menu_trigger {width:63px;height:61px;background:#fdfefd;position:relative;top:-5px;z-index:9999;transform:rotate(0deg);transition:all ease-in-out 0.5s;cursor:pointer;border-radius:12px;text-align:center;} .menu_trigger:after {content:'MENU';font-size:10px;font-weight:700;display:inline-block;position:absolute;bottom:4px;left:50%;transform:translateX(-50%);} .menu_trigger span {display:block;position:absolute;height:5px;width:42px;background:#213c60;border-radius:4px;opacity:1;left:50%;transform:translateX(-50%);transition:all ease-in-out 0.25s;} .menu_trigger span:nth-child(1) {top:10px;} .menu_trigger span:nth-child(2), .menu_trigger span:nth-child(3) {top:22px;} .menu_trigger span:nth-child(4) {top:34px;} .menu_trigger.active span {background-color:#213c60;left:18%;} .menu_trigger.active span:nth-child(1), .menu_trigger.active span:nth-child(4) {transform:scale(0, 0);} .menu_trigger.active span:nth-child(2) {transform:rotate(45deg);} .menu_trigger.active span:nth-child(3) {transform:rotate(-45deg);} .header .menu-top-menu-container {flex:1;} .header .menu-top-menu-container ul {display:flex;justify-content:space-between;align-items:center;} .header .menu-top-menu-container ul li {font:700 30px 'TeXGyreTermes';padding:0 22px 10px 0;} .header .menu-top-menu-container ul li:nth-child(-n+3) {padding-right:6%;} .header .menu-top-menu-container ul li:nth-child(4) a {display:block;width:184px;height:91px;background:url(images/logo.png) center center/100% auto no-repeat;font-size:0;line-height:0;} .header .menu-top-menu-container ul li.button_style a, .header .menu-top-menu-container ul li.button_style a:visited {color:#fff;background:#ff9634;padding:5px 10px;min-width:155px;height:61px;font:700 22px 'Red Hat Display';text-transform:uppercase;border:none;border-radius:12px;text-align:center;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;transition:all ease-in-out .2s;} .header .menu-top-menu-container ul li.button_style a:hover {color:#fff;background:#213c60;} .header .menu-top-menu-container ul li.button_style.button_style2 a, .header .menu-top-menu-container ul li.button_style.button_style2 a {color:#213c60;background:#fff;} .header .menu-top-menu-container ul li.button_style.button_style2 a:hover {color:#fff;background:#213c60;} html.active {overflow:hidden;} .header nav {position:fixed;top:0;right:100%;width:100%;height:100%;overflow:auto;background:#ff9634;padding:120px 15px 20px 15px;z-index:999;box-sizing:border-box;transition:transform ease-in-out .3s;text-align:center;} .header nav.active {transform:translateX(100%);} .header nav.active ul li {padding:10px 0;font:700 40px 'Red Hat Display';text-transform:uppercase;} .header nav.active ul li a:hover {color:#fff;} .header nav.active ul li.button_style a, .header nav.active ul li.button_style a:visited {color:#213c60;background:#fff;padding:5px 10px;min-width:275px;height:75px;font:700 40px 'Red Hat Display';text-transform:uppercase;border:none;border-radius:12px;text-align:center;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;transition:all ease-in-out .2s;} .header nav.active ul li.button_style a:hover {color:#fff;background:#213c60;} .header nav.active ul li.button_style.button_style2 a, .header nav.active ul li.button_style.button_style2 a {color:#fff;background:#213c60;} .header nav.active ul li.button_style.button_style2 a:hover {color:#213c60;background:#fff;} /* Heading */ .heading {text-align:center;padding-bottom:20px;display:flex;flex-flow:column wrap;position:relative;} .heading span {font:46px/46px 'TeXGyreTermes';color:#ff9634;display:block;margin-bottom:-10px;} .heading strong {font:700 108px/109px 'TeXGyreTermes';color:#ff9634;display:block;} .heading h2 {padding:0 0 15px 0;} .heading.bottom h2 {order:3;padding-bottom:0;} .heading.left h2 {writing-mode:vertical-lr;text-orientation:upright;font-size:38px;letter-spacing:-16px;margin-top:-9px;position:absolute;top:50%;transform:translateY(-50%);left:calc(50% - 180px);} .page-about .heading {max-width:47%;} .page-about .wp-block-columns .wp-block-column:nth-child(2) {margin-top:-125px;} /* Content block */ .content_block {min-height:calc(100vh - 200px);} .content_block article > ul, .content_block article > ol {margin-bottom:20px;} .content_block article > ul li {list-style-position:inside;list-style-type:disc;} .content_block article > ol li {list-style-position:inside;list-style-type:decimal;} /* Gallery */ .content_block .wp-block-gallery.has-nested-images.columns-2 {display:grid;grid-template-columns:minmax(54%, 1fr) minmax(46%, 1fr);grid-gap:13px;} .content_block .wp-block-gallery.has-nested-images.columns-2 .wp-block-image:not(#individual-image) {margin:0;font-size:0;line-height:0;width:auto;height:180px;} .content_block .wp-block-gallery.has-nested-images.columns-2 .wp-block-image:not(#individual-image) img {margin:0;width:100%;height:100%;object-fit:cover;border-radius:15px;} .content_block .wp-block-gallery.has-nested-images.columns-2 .wp-block-image:not(#individual-image):nth-child(4n) {grid-column-end:span 2;height:235px;} .content_block .wp-block-gallery.has-nested-images.columns-2 .wp-block-image:not(#individual-image):nth-child(8n+2) {grid-row-end:span 2;height:373px;} .content_block .wp-block-gallery.has-nested-images.columns-2 .wp-block-image:not(#individual-image):nth-child(8n+5) {grid-row-end:span 2;height:323px;} .content_block .wp-block-gallery.has-nested-images.columns-2 .wp-block-image:not(#individual-image):nth-child(8n+6), .content_block .wp-block-gallery.has-nested-images.columns-2 .wp-block-image:not(#individual-image):nth-child(8n+7) {height:155px;} /* Posts list */ .posts_list {display:flex;flex-wrap:wrap;margin:0 -15px;} .posts_list > li {width:33.33%;padding:0 15px 30px 15px;box-sizing:border-box;text-align:center;} .posts_list > li figure > a img {width:100%;height:205px;border-radius:33px;object-fit:cover;margin-bottom:5px;} .posts_list > li figcaption p {padding-bottom:5px;font-size:17px;color:#ff9634;} .posts_list > li figcaption h4 {padding:0 10px 5px 10px;} .single_thumb {margin:0 auto 20px auto;max-width:100%;text-align:center;} .single_thumb img {border-radius:33px;object-fit:cover;} /* Issues list */ .issues_list > li {margin-bottom:10px;} .issues_list > li figure {display:flex;align-items:center;} .issues_list > li figure > a {display:block;width:340px;height:205px;margin-right:15px;} .issues_list > li figure > a img {width:100%;height:100%;object-fit:cover;border-radius:35px;} .issues_list > li figure figcaption {flex:1;} .issues_list > li figure figcaption h3 a {color:#ff9634;} .issues_list > li figure figcaption p {padding-bottom:0;} /* Columns */ .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:first-child) {margin-left:20px;} .wp-block-columns .wp-block-column .wp-block-image {margin:0 0 20px 0;} .wp-block-columns .wp-block-column .wp-block-image img {border-radius:65px;height:375px;width:100%;object-fit:cover;} .wp-block-image.is-style-rounded {margin:0 0 30px 0;} .wp-block-image.is-style-rounded img {border-radius:60px;} /* Page yard sign sign ups */ .page-yard-sign-sign-ups .heading {position:relative;max-width:900px;margin:0 auto;padding-bottom:150px;} .page-yard-sign-sign-ups .heading:before, .page-yard-sign-sign-ups .heading:after {content:'';display:block;width:10px;height:135px;background:#7e7f89;position:absolute;bottom:15px;left:0;} .page-yard-sign-sign-ups .heading:after {left:auto;right:0;} .page-yard-sign-sign-ups .heading h2 {background:#ff9634;color:#fff;padding-bottom:0;font:96px 'TeXGyreTermes';} .page-yard-sign-sign-ups .heading h2 strong {background:#213c60;font:800 192px/192px 'Open Sans';color:#fff;display:block;border-bottom:10px solid #fff;padding:15px;} .page-yard-sign-sign-ups .heading span, .page-yard-sign-sign-ups .heading span + strong {display:none;} .page-yard-sign-sign-ups .wp-block-columns {margin-left:-150px;margin-right:-150px;} .page-yard-sign-sign-ups .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:first-child) {margin-left:10px;} .page-yard-sign-sign-ups .wp-block-columns .wp-block-column .wp-block-image img {border-radius:50px;height:235px;} /* Donate block */ .donate_block {text-align:right;padding-bottom:30px;} .donate_block img {border-radius:145px;} .page-donate .heading {display:none;} .donate_block > div {background:#ff9634;color:#fff;text-align:center;border-radius:155px;max-width:795px;margin-top:-100px;position:relative;padding:90px 45px 0 45px;box-sizing:border-box;font:46px 'TeXGyreTermes';} .donate_block ul {display:flex;flex-wrap:wrap;padding:85px 0 70px 0;} .donate_block ul li {flex-basis:25%;padding:0 10px 27px 10px;box-sizing:border-box;font-size:35px;font-weight:700;} .donate_block ul li a, .donate_block ul li a:visited {display:block;color:#fff;background:#213c60;border-radius:25px;padding:25px 5px;} /* Home */ .home {background:url(images/demo/bice.png) calc(50% - 290px) bottom no-repeat, url(images/demo/home_bg.jpg) center center/cover no-repeat;} .home .heading {display:none;} .home .content_block {position:relative;} .home .content_block .wrapper {display:flex;justify-content:flex-end;} .home .content_block article {max-width:650px;} .home input[type="text"], .home input[type="email"], .home input[type="tel"], .home select {padding:0 13px;} .home .gform_wrapper {padding:0 0 100px 135px;} .home .gform_wrapper .gform_body .gform_fields {display:flex;flex-wrap:wrap;justify-content:space-between;} .home .gform_wrapper .gform_body .gfield {padding-bottom:27px;width:calc(55% - 12px);} .home .gform_wrapper .gform_body .gfield:nth-child(even) {width:calc(45% - 12px);} .home .gform_wrapper .gform_body fieldset.gfield {padding:0;} .home .gform_wrapper .gform_body fieldset .ginput_container_address span {padding-bottom:27px;} .home .gform_wrapper .gform_body .gfield .validation_message {top:calc(100% - 27px);} .home .gform_wrapper .gform_footer {padding-top:0;text-align:right;margin-top:-85px;} .home .gform_wrapper .gform_footer .button {width:calc(45% - 12px);min-width:calc(45% - 12px);} .home .gform_confirmation_message {text-align:right;padding-bottom:100px;} .menu-social-menu-container {position:absolute;top:120px;left:-80px;z-index:2;display:flex;align-items:center;transform:rotate(-90deg);} .menu-social-menu-container:before {content:'Follow';font:700 29px 'TeXGyreTermes';text-transform:uppercase;} .menu-social-menu-container ul {display:flex;font-size:0;line-height:0;} .menu-social-menu-container ul li {padding-left:5px;} .menu-social-menu-container ul li a {display:block;width:27px;height:24px;background:url(images/blank.gif) center center no-repeat;transform:rotate(90deg);} .menu-social-menu-container ul li a[href*="twitter"] {background-image:url(images/icons/twitter.png);} .menu-social-menu-container ul li a[href*="youtube"] {background-image:url(images/icons/youtube.png);} .menu-social-menu-container ul li a[href*="facebook"] {background-image:url(images/icons/facebook.png);} .home .footer {text-align:right;} /* Footer */ .footer {text-align:center;padding:20px 0 10px 0;} .footer p {border:1px solid #213c60;padding:3px 5px;display:inline-block;font-size:13px;} /* Media Queries */ /* Desktop */ @media only screen and (min-width: 960px) and (max-width: 1100px) { /* Header */ .header .menu-top-menu-container ul li:nth-child(-n+3) {padding-right:2%;} /* Page yard sign sign ups */ .page-yard-sign-sign-ups .wp-block-columns {margin-left:-20px;margin-right:-20px;} .page-yard-sign-sign-ups .wp-block-columns .wp-block-column .wp-block-image img {height:210px;} } /* Tablets and mobiles */ @media only screen and (max-width: 959px) { body {font-size:16px;} h2 {font-size:34px;} h3 {font-size:26px;} h4 {font:21px 'TeXGyreTermes';} /* Header */ .header {padding:10px 0 20px 0;} /* Top menu */ .menu_trigger {width:55px;height:54px;} .menu_trigger:after {font-size:9px;} .menu_trigger span {height:4px;width:36px;} .menu_trigger span:nth-child(2), .menu_trigger span:nth-child(3) {top:20px;} .menu_trigger span:nth-child(4) {top:30px;} .header .menu-top-menu-container ul li {font-size:22px;padding-right:15px;} .header .menu-top-menu-container ul li:nth-child(-n+3) {padding-right:3%;} .header .menu-top-menu-container ul li:nth-child(4) a {width:150px;height:74px;} .header .menu-top-menu-container ul li.button_style a, .header .menu-top-menu-container ul li.button_style a:visited {min-width:115px;height:54px;font-size:16px;} .header nav.active ul li {font-size:36px;} .header nav.active ul li.button_style a, .header nav.active ul li.button_style a:visited {font-size:36px;min-width:250px;height:65px;} /* Heading */ .heading span {font-size:40px;line-height:40px;} .heading strong {font-size:90px;line-height:90px;} .heading h2 {padding:0 0 15px 0;} .heading.left h2 {font-size:32px;letter-spacing:-13px;left:calc(50% - 155px);} .page-about .wp-block-columns .wp-block-column:nth-child(2) {margin-top:-110px;} /* Page yard sign sign ups */ .page-yard-sign-sign-ups .content_block .wp-block-columns {margin-left:-10px;margin-right:-20px;display:flex;} .page-yard-sign-sign-ups .content_block .wp-block-columns .wp-block-column {flex-basis:calc(25% - 10px) !important;} .page-yard-sign-sign-ups .content_block .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:first-child) {margin-left:10px !important;} .page-yard-sign-sign-ups .content_block .wp-block-columns .wp-block-column .wp-block-image img {height:210px;} } /* Mobile portrait and landscape modes */ @media only screen and (max-width: 767px) { .wrapper {padding:0 20px;} h1 {font-size:55px;line-height:55px;} /* Header */ /* Top menu */ .header .menu-top-menu-container ul li:nth-child(-n+3) {display:none;} .header .menu-top-menu-container ul li:nth-child(4) {flex:1;} /* Heading */ .page-about .heading {max-width:100%;} .page-about .wp-block-columns .wp-block-column:nth-child(2) {margin-top:0;} /* Content */ .content_block {min-height:1px;} /* Columns */ .wp-block-columns {margin-bottom:0;display:block;} .wp-block-columns .wp-block-column {margin-left:0 !important;} .wp-block-columns .wp-block-column .wp-block-image img {border-radius:45px;height:250px;} /* Posts list */ .posts_list > li {width:50%;} /* Issues list */ .issues_list > li figure {display:block;padding-bottom:30px;} .issues_list > li figure > a {margin:0 auto 10px auto;width:100%;max-width:340px;} /* Page yard sign sign ups */ .page-yard-sign-sign-ups .heading {padding-bottom:50px;} .page-yard-sign-sign-ups .heading:before, .page-yard-sign-sign-ups .heading:after {height:40px;bottom:10px;} .page-yard-sign-sign-ups .heading h2 {font-size:46px;line-height:56px;} .page-yard-sign-sign-ups .heading h2 strong {font-size:100px;line-height:100px;} /* Donate block */ .donate_block img {border-radius:70px;} .donate_block > div {border-radius:70px;margin-top:-60px;padding:50px 25px 0 25px;font-size:30px;line-height:38px;} .donate_block ul {padding:45px 0 40px 0;} .donate_block ul li {flex-basis:50%;padding:0 7px 20px 7px;font-size:30px;} .donate_block ul li a, .donate_block ul li a:visited {border-radius:20px;padding:20px 10px;} /* Home */ .home {background-size:340px auto, cover;background-position:left bottom, center center;} .home .content_block {position:relative;padding-bottom:200px;} .home .content_block .wrapper {display:block;} .home .content_block article {max-width:100%;padding-left:40px;box-sizing:border-box;} .home input[type="text"], .home input[type="email"], .home input[type="tel"], .home select, .home .gform_wrapper .gform_footer .button {font-size:20px;} .home .gform_wrapper {padding-left:0;} } @media only screen and (max-width: 530px) { /* Header */ /* Top menu */ .header .menu-top-menu-container ul li:nth-last-child(2), .header .menu-top-menu-container ul li:last-child {display:none;} } /* Mobile portrait mode */ @media only screen and (max-width: 479px) { .gform_wrapper .gform_footer .button {font-size:25px;} .posts_list {display:block;} .posts_list > li {width:100%;} }