/* Theme Name: The Proclamation Project Theme URI: Author: Jackson Sky Web Design & Development Author URI: https://jacksonsky.com/ Description: This is a custom responsive theme designed and developed exclusively for The Proclamation Project - Christain Church (Disciples of Christ). Tags: one-column, two-columns, custom-menu, full-width-template Version: 1.0 */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1.0 Normalize 2.0 Accessibility 3.0 Alignments 4.0 Clearings 5.0 Typography 6.0 Forms 7.0 Formatting 8.0 Lists 9.0 Tables 10.0 Links 11.0 Navigation 12.0 Layout 12.1 Header 12.2 Regular Content 12.3 Content Layouts 12.4 Sidebar Content 12.5 Footer 12.6 Home Page 12.7 Interior Pages 12.8 Page Sections 12.9 Posts 12.10 MISC Universal Styles 13.0 Comments 14.0 Widgets 15.0 Media 15.1 Galleries 16.0 Media Queries 16.1 Query sm - Over 576px 16.2 Query md - Over 768px 16.3 Query lg - Over 992px 16.4 Query xl - Over 1200px 16.5 Query xxl - Over 1400px 17.0 Print --------------------------------------------------------------*/ /*-------------------------------------------------------------- 1.0 Normalize - See Stylesheet normalize.css --------------------------------------------------------------*/ /* But it is not enough now, below dont hide play button parent div */ *::-webkit-media-controls-panel { display: none!important; -webkit-appearance: none; } /* Old shadow dom for play button */ *::--webkit-media-controls-play-button { display: none!important; -webkit-appearance: none; } /* New shadow dom for play button */ /* This one works */ *::-webkit-media-controls-start-playback-button { display: none!important; -webkit-appearance: none; } /*-------------------------------------------------------------- 2.0 Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers. */ /* Hide visually and from screen readers */ .hidden {display: none !important;} /* * Hide only visually, but have it available for screen readers: * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ .visuallyhidden {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;} /** Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: * https://www.drupal.org/node/897638 */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;} /** Hide visually and from screen readers, but maintain layout */ .invisible {visibility: hidden;} /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus {background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */} /*-------------------------------------------------------------- 3.0 Alignments --------------------------------------------------------------*/ .alignleft {display: inline; float: left; margin-right: 1.5em;} .alignright {display: inline; float: right; margin-left: 1.5em;} .aligncenter {clear: both; display: block; margin-left: auto; margin-right: auto;} /*-------------------------------------------------------------- 4.0 Clearings --------------------------------------------------------------*/ /**** Clearfix update ****/ .group:before, .group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } * html .group { zoom: 1; } /* IE6 */ *:first-child+html .group { zoom: 1; } /* IE7 */ /*-------------------------------------------------------------- 5.0 Typography --------------------------------------------------------------*/ body, button, input, select, textarea { font-family: 'Poppins', Helvetica, Arial, sans-serif; font-size:16px; color:#000; font-weight: 400; font-style:normal; line-height:1.6; letter-spacing:.025em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .intro-large{font-family: 'Syne', Helvetica, Arial, sans-serif; color:#000; line-height:1.1; margin:0; padding:0; margin-bottom:.75em; letter-spacing: .025em; font-weight: 500;} h1, .intro-large{font-size: 30px; } h2{font-size:28px; text-transform: uppercase;} h3{ font-size:24px;} h4{ font-size:21px; margin-bottom:.5em; text-transform: uppercase;} h5{ font-size: 18px; margin-bottom: .4em;} h6{ font-size:16px; margin-bottom: .25em; text-transform: uppercase; font-weight: 600;} .intro-large{line-height: 1.1;} h2.title-front{font-weight: 500; text-transform: none; font-size: 24; color:#1c4d75;} h1.title-size-mid{font-size: 24px;} .intro-content-section{font-size: 1.25rem;} h2.callout{font-size:32px; } p {margin: 0 0 2em; padding: 0;} #main section p:last-of-type{margin-bottom: 0;} #content{font-size: 16px;} dfn, cite, em, i {font-style: italic;} blockquote {font-family: 'Syne', Helvetica, Arial, sans-serif; color: #1c4d75; font-size: 1.25rem; line-height: 1.35; overflow: hidden; margin-bottom:1.5em; font-weight: 500; } blockquote p:last-child{margin-bottom: 0;} blockquote cite { display: block; font-style: normal; font-weight: 600; margin-top: 0.5em; } address { margin: 0 0 1.5em;} pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } code, kbd, tt, var { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 15px; font-size: 0.9375rem; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #eee; text-decoration: none; } .big {font-size: 125%;} .light{ font-weight:300;} .normal{font-weight:400;} .semibold{font-weight:600;} .strong, strong{font-weight:700;} blockquote {quotes: "" "";} q {quotes: "“" "”" "‘" "’";} blockquote:before, blockquote:after {content: "";} :focus {outline: none;} .uppercase{text-transform: uppercase;} sup{ position: relative; top: 0; font-size: 50%; vertical-align: super; } /*-------------------------------------------------------{------- 6.0 Forms --------------------------------------------------------------*/ label { color: #676767; display: block; font-weight: 600; margin-bottom: 0.35em; } legend{color:#676767;} fieldset { margin-bottom: 1em; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea, select{ color: #000; background: #fff; background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)); border: 1px solid #bbb; display: block; padding: 0.5em; font-size:14px; width: 100%; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { color: #222; border-color: #333; } textarea { resize: vertical; } select { border: 1px solid #bbb; max-width: 100%; } input[type="radio"], input[type="checkbox"] { margin-right: 0.5em; } input[type="radio"] + label, input[type="checkbox"] + label { font-weight: 400; } /************* Buttons **********/ button,.button, .buttonAlt, a.button, .gform-footer .gform_button.button input[type="submit"], input[type="button"], input[type="submit"], #content div.ctct-form-embed form.ctct-form-custom button.ctct-form-button{ font-family: 'Poppins', Helvetica, Arial, sans-serif; text-transform:uppercase; background-color: #1c4d75; border: 0; color: #fff !important; cursor: pointer; display: inline-flex; align-items: center; font-size: 13px; font-weight: 500; letter-spacing: .05em; line-height: 1.2; padding: .5em 1.4em; text-shadow: none; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear; margin-right: 10px; margin-bottom: 7px; text-decoration: none !important; text-align: center; border-radius: 9999px ; } .button:after{font-family: 'Font Awesome 6 Pro'; content: '\f061'; padding-left: 8px; position: relative; font-size: 120%;} button:hover,.button:hover, .buttonAlt:hover, a.button:hover, input[type="button"]:hover, input[type="submit"]:hover{ color:#fff; background-color:#000 !important;} button.buttonAlt, .button.buttonAlt, .buttonAlt, a.buttonAlt, a.button.alt{background-color:#fff !important; color:#1c4d75 !important; border: 1px #1c4d75 solid;} button.buttonAlt:hover, .button.buttonAlt:hover, .buttonAlt:hover, a.buttonAlt:hover, a.button.alt:hover{ background: #f1f1f1!important; color:#1c4d75 !important; text-decoration: none !important;} button.buttonAlt:after, .button.buttonAlt:after, .buttonAlt:after, a.buttonAlt:after, a.button.alt:after{content:none;} #content button.ctct-form-button{width:inherit; display: inline-block;} .trans2{-o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} /********* Placeholders **********/ /* Placeholder text color -- selectors need to be separate to work. */ ::-webkit-input-placeholder { color: #9f9f9f; font-family: 'Poppins', Helvetica, Arial, sans-serif; } :-moz-placeholder { color: #9f9f9f; font-family: 'Poppins', Helvetica, Arial, sans-serif; } ::-moz-placeholder { color: #9f9f9f; font-family: 'Poppins', Helvetica, Arial, sans-serif; opacity: 1; /* Since FF19 lowers the opacity of the placeholder by default */ } :-ms-input-placeholder { color: #9f9f9f; font-family: 'Poppins', Helvetica, Arial, sans-serif; } /******* Gravity Forms *********/ #main .gform-body legend.gfield_label, #main .gform-body label.gfield_label{font-size: 16px;} #main section p.gform_description:last-of-type{margin-bottom: 2em;} #content .gform_wrapper.gravity-theme .gfield{padding:.75em;} .container .gform_wrapper.gravity-theme .gfield_label{margin-bottom: 0;} .container .gform_wrapper.gravity-theme .gfield_label{margin-bottom: 0;} .container .gform_wrapper.gravity-theme .ginput_complex label{padding-top: 0; font-weight: 300;} .container .gform_wrapper.gravity-theme .field_description_above .gfield_description{padding-bottom:0; } .gform_wrapper.gravity-theme #gform_2 .gfield_label{font-size: 140%;} .gform_wrapper.gravity-theme #gform_2 legend{font-weight: 300 !important; line-height: 1.4; margin-bottom: .5em !important;} #gform_2 .gfield_radio{margin-bottom: 1em;} #gform_2 .gfield--input-type-html{font-size: 1.25em;} #gform_2 ol.fancy-list li, #gform_2 ul.fancy-list li{font-size: 1em;} #gform_2 ul.fancy-list{margin-left: 0;} #gform_2 ul.fancy-list li{} #gform_2 ul.fancy-list li::before{font-size: 1.25em;} #gform_2 ul.fancy-list ol.fancy-list{padding-top: .75em; padding-left: 1em;} #gform_2 ul.fancy-list ol.fancy-list li{padding-left: .5em;} #gform_2 ul.fancy-list ol.fancy-list li::before{ font-size: .85em; } /************* Gravity Forms Buttons **********/ input[type="submit"].gform_button.button { font-family: 'Poppins', Helvetica, Arial, sans-serif !important; text-transform:uppercase !important; background-color: #1c4d75 !important; border: 0 !important; color: #fff !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: .05em !important; line-height: 1.2 !important; padding: .85em 1.6em !important; text-shadow: none !important; -o-transition: all .2s linear !important; -moz-transition: all .2s linear !important; -webkit-transition: all .2s linear !important; transition: all .2s linear !important; margin-right: 10px !important; margin-bottom: 7px !important; text-decoration: none !important; text-align: center; border-radius: 9999px !important; } .grecaptcha-badge { visibility: hidden; } /**** Donate Form *****/ #donate-form iframe{max-width: 100% !important;} input[type="submit"].gform_button.button:hover{ color:#fff; background-color:#000 !important;} #content ul.fancy-list{list-style: none; margin-left: .5em;} ul.fancy-list li{padding-left:1.5em; position: relative;} ul.fancy-list li::before{ content: "\f058"; /* FontAwesome Unicode */ font-family: 'Font Awesome 6 Pro'; display: inline-block; margin-left: -1.5em; width: 1.5em; position: absolute; font-size: 110%;} ol.fancy-list { margin: 0 0 2em .2em !important; counter-reset: li; list-style-type: none; } ol.fancy-list li { position: relative; padding-left: 2em ; font-weight: 400; line-height: 1.5; margin-bottom: 1em; } ol.fancy-list li:before { content: counter(li); counter-increment: li; height: 1.5em; width: 1.5em; border: 2px solid #1b2539; border-radius: 50%; text-align: center; position: absolute; left: 0; line-height: 1.4em; } /** SECTION 1 **/ /* Hide the OS/Browser checkboxes/radio buttons */ .fancy-list input[type=checkbox], .fancy-list input[type=radio] { visibility: hidden!important; margin: 0!important; width: 0!important; } /* Set Font Awesome font, size, & positioning for the checkboxes/radio buttons plus the cursor on hover */ .fancy-list input[type=checkbox] + label:before, .fancy-list input[type=checkbox] + span.woocommerce-terms-and-conditions-checkbox-text:before, .fancy-list input[type=radio] + label:before { visibility: visible; font-family: "FontAwesome"!important; font-size: 25px; position: relative; top: 5px; padding-right: 8px; } .fancy-list input[type=checkbox] + label:hover, .fancy-list input[type=checkbox] + span.woocommerce-terms-and-conditions-checkbox-text:hover, .fancy-list input[type=radio] + label:hover { cursor: pointer; } /** SECTION 2 **/ /** SECTION 1 **/ /* Hide the OS/Browser checkboxes/radio buttons */ .fancy-list input[type=checkbox], .fancy-list input[type=radio] { visibility: hidden!important; margin: 0!important; width: 0!important; display: none !important; } /* Set Font Awesome font, size, & positioning for the checkboxes/radio buttons plus the cursor on hover */ .fancy-list input[type=checkbox] + label:before, .fancy-list input[type=checkbox] + span:before, .fancy-list input[type=radio] + label:before { visibility: visible; font-family: "Font Awesome 6 Sharp"!important; font-size: 140%; position: relative; top: 0.1em; padding-right: 8px; } .fancy-list input[type=checkbox] + label:hover, .fancy-list input[type=checkbox] + span:hover, .fancy-list input[type=radio] + label:hover { cursor: pointer; } /** SECTION 2 **/ /* Set checkbox to FA icons: normal, hover, checked, & checked hover */ .fancy-list input[type=checkbox] + label:before, .fancy-list input[type=checkbox] + span:before { content: '\f096'!important; } .fancy-list input[type=checkbox] + label:hover:before, .fancy-list input[type=checkbox] + span:before { content: '\f046'; filter: alpha(opacity=20); opacity: 0.2; } .fancy-list input[type=checkbox]:checked + label:before, .fancy-list input[type=checkbox]:checked + span:before { content: '\f046'!important; } .fancy-list input[type=checkbox]:checked + label:hover:before, .fancy-list input[type=checkbox]:checked + span:hover:before, input[type=checkbox]:checked + label:before, .fancy-listinput[type=checkbox]:checked + span:before { filter: alpha(opacity=100); opacity: 1; } /* Set radio buttons FA icons: normal, hover, checked, & checked hover */ .fancy-list input[type=radio] + label:before { content: '\f10c'!important; color: #BBBBBB !important; } .fancy-list input[type=radio] + label:hover:before { content: '\f192'!important; color: #00944d !important; } .fancy-list input[type=radio]:checked + label:before { content: '\f192'!important; color: #1D9AD6 !important; } .fancy-list input[type=radio]:checked + label:hover:before { filter: alpha(opacity=100); opacity: 1; color: #00944d !important; } /*-------------------------------------------------------------- 7.0 Formatting --------------------------------------------------------------*/ hr { background-color:#f1f1f1; border: 0; height: 14px; margin-top: 2em; margin-bottom: 2em; opacity: 100%; } hr.short{ max-width: 27px; width: 25%; margin-left: 0; background-color:#de1430; height: 6px; } hr.short-blue{ max-width: 27px; width: 25%; margin-left: 0; background-color:#1c4d75; height: 6px; } hr.alt{background-color:#de1430;} ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } .inline-block{display: inline-block;} /*-------------------------------------------------------------- 8.0 Lists --------------------------------------------------------------*/ ul, ol { margin: 0 0 2em 2em; padding: 0;} ul {list-style: disc;} ol {list-style: decimal;} #content ul, #content ol{margin: .75em 0 2em 2em;} li{ padding-left:0; margin-bottom:.5em;} li > ul, li > ol {margin-bottom: 0; margin-left: 1.5em;} dt {font-weight: 700;} dd {margin: 0 1.5em 1.5em;} /*-------------------------------------------------------------- 9.0 Tables --------------------------------------------------------------*/ table { border-collapse: collapse; margin: 0 0 1.5em; width: 100%;} thead th { border-bottom: 2px solid #bbb; padding-bottom: 0.5em;} th { padding: 0.4em; text-align: left; } tr { border-bottom: 1px solid #eee;} td {padding: 0.4em;} th:first-child,td:first-child {padding-left: 0;} th:last-child,td:last-child {padding-right: 0;} .ml-responsive-table {padding-bottom: 30px !important;} .ml-responsive-table dd {margin-bottom: 0 !important;} .ml-table {padding: 0 10px 0 10px !important;} .ml-grid{padding:1em 2em .25em 0 !important;;} .ml-grid.ml-row-0{display: none;} .ml-value{padding-bottom: .75em !important;} /*** Pseudo Table Styles****/ .table{display:table;} .tableRow{display:table-row;} .tableCell{display:table-cell;} .tableMiddle{ vertical-align:middle;} .vert50{ height:50%;} /*-------------------------------------------------------------- 10.0 Links --------------------------------------------------------------*/ a{color:#de1430; text-decoration: underline;} a:hover, #content p a:hover{color:#1c4d75; text-decoration: underline;} #content p a{color:#de1430; font-weight: 500;} a.alt{color:#44697d; text-decoration: none; text-transform: uppercase; font-weight: 700; font-size: 90%;} a.alt:hover{color:#44697d; text-decoration: underline;} a:active, a:focus{outline:none;} a.alt:after{font-family: 'FontAwesome'; content: '\f0a9'; padding-left: 8px; position: relative; font-size: 120%;} #content h1 a, #content h2 a, #content h3 a, #content h4 a, #content h5 a, #content h6 a{text-decoration: none;} /*-------------------------------------------------------------- 11.0 Navigation --------------------------------------------------------------*/ /********* Main Navigation ********/ /*-------------------------------------------------------------- 12.0 Layout --------------------------------------------------------------*/ html, body { height: 100%; } html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } body { display: flex; flex-direction: column; background: #fff; background: rgba(255,255,255,1); } #content.site-content{flex: 1 0 auto; padding-top: 59px;} /*-------------------------------------------------------------- 12.1 Header --------------------------------------------------------------*/ /***** Main Header *****/ #site-header{position: fixed; background-color: #fff; width: 100%; z-index: 200; border-bottom: 1px solid #eaf2fa; border-top: #000 5px solid;} #site-header.shrink{border-bottom: 1px solid #eaf2fa;} #site-header .site-title{ } #site-header .site-title img{width: 100%; height: auto; max-height: 100%; max-width: 100%; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} #site-header.shrink .site-title img{/*width: 75%; height: auto; max-height: 100%; max-width: 100%;*/} #site-header h1.site-title{margin-bottom: 0; line-height:0;} #site-header .nav-con{-moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} #site-header.shrink .nav-con{/*margin-top: 10px !important;*/} #site-header .language .gt_selector{font-family: 'Poppins', Helvetica, Arial, sans-serif;} #site-header .mega-search input{font-family: 'Poppins', Helvetica, Arial, sans-serif;} #site-header #mega-menu-wrap-utility-menu #mega-menu-utility-menu li#mega-menu-item-259 .mega-search input[type=text]{padding-left: 1em;} .mobile-banner-image{background-repeat: no-repeat; background-position: center center; background-size: cover; height: 1px; padding-bottom: 50%;} /********* Placeholders **********/ /* Placeholder text color -- selectors need to be separate to work. */ #site-header ::-webkit-input-placeholder { color: #9f9f9f; font-family: 'Poppins', Helvetica, Arial, sans-serif; } #site-header :-moz-placeholder { color: #9f9f9f; font-family: 'Poppins', Helvetica, Arial, sans-serif; } #site-header ::-moz-placeholder { color: #9f9f9f; font-family: 'Poppins', Helvetica, Arial, sans-serif; opacity: 1; /* Since FF19 lowers the opacity of the placeholder by default */ } #site-header :-ms-input-placeholder { color: #9f9f9f; font-family: 'Poppins', Helvetica, Arial, sans-serif; } .intro-button a.button:hover{color: #1b2539;} /*** Mobile Navigation ****/ #mainNav button.mega-toggle-animated:hover{background-color: transparent !important;} /*-------------------------------------------------------------- 12.2 Regular Content --------------------------------------------------------------*/ /******** Page Header ********/ /*-------------------------------------------------------------- 12.3 Content Layouts --------------------------------------------------------------*/ /*-------------------------------------------------------------- 12.4 Sidebar Content --------------------------------------------------------------*/ /*-------------------------------------------------------------- 12.5 Footer --------------------------------------------------------------*/ footer.site-footer {font-size: 12px; line-height: 1.6; flex-shrink: 0; background-color: #000; color: #fff;} footer.site-footer a{text-decoration: none; color: #fff;} footer.site-footer a:hover{color:#de1430; text-decoration: underline;} footer.site-footer h4{font-size: 12px; color:#fff; margin-bottom: .2em; text-transform: uppercase; font-family:'Poppins', Helvetica, Arial, sans-serif; font-weight: 600;} footer.site-footer strong{text-transform: uppercase; font-weight: 600;} footer .footer-address p:last-of-type{margin-bottom: 0;} footer .footer-bottom-section{font-size: 12px; line-height: 1.4;} footer .footer-bottom-section a{text-decoration: underline;} footer ul.quicklinks{margin: 0; padding: 0; list-style: none;} footer ul.quicklinks a{font-size: 16px; font-weight: 500; font-family: 'Syne', Helvetica, Arial, sans-serif; color: #fff; text-decoration: none;} footer ul.quicklinks a:hover{color:#de1430; text-decoration: underline;} footer .footnote p{margin-bottom: .75em;} footer .language{background-color: #262626;} footer .language i{padding-left: 7px;} footer .language .gtranslate_wrapper{display: inline-block; padding-left: 0; width: 85%;} footer .language .gt_selector{background-color: transparent; color:#fff; border: none; text-transform: uppercase; font-size: 12px;} footer .language .gt_selector option{color:#000;} /*-------------------------------------------------------------- 12.6 Home Page --------------------------------------------------------------*/ .home #home-intro-section{} .home #home-intro-section .background{background-position: center center; background-repeat: no-repeat; background-size: cover;} .home #home-intro-section .intro-box{background-color:#fff; font-size: 12px;} .home #home-intro-section .intro-box a{font-weight: 600;} .home #home-intro-section .intro-content:last-of-type p{margin-bottom: 0;} .home .intro-title h1{font-size: 24px;} .home #page-intro-section{padding-top: 0;} .home #page-intro-section h1.page-title, .page-title h1{ font-weight: 500;} .home #resource-library{} .home #resource-library a.resource-link{text-decoration: none;} .home #resource-library a.resource-link:hover{text-decoration: none;} .home #resource-library a.resource-link .from-box{background-color: #fff; font-size: 14px; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} .home #resource-library a.resource-link:hover .from-box{background-color:#ddd;} .home #resource-library .title{font-size: 16px; font-weight: 600; color:#1c4d75;} .home #resource-library a.resource-link .type{text-transform: uppercase; font-size: 12px; color: #de1430; font-weight: 500;} .home #resource-library a.resource-link .description{color:#000;} .home #resource-library a.resource-link .description p:last-of-type{margin-bottom: 0;} .home #resource-library a.resource-link .resource-image{border-bottom: 5px solid #000; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} .home #resource-library a.resource-link:hover .resource-image{border-bottom: 5px solid #de1430;} .home #monthly-newsletter .nl-box{background-size: cover; background-repeat: no-repeat; background-position: center center; } .home #monthly-newsletter .small-title{text-transform: uppercase; font-size: 12px; font-weight: 500; font-family: 'Poppins', Helvetica, Arial, sans-serif; color: #767576;} .home #monthly-newsletter .nl-content{font-size: 14px;} .home #monthly-newsletter .nl-content p:last-of-type{margin-bottom: 0;} .home #monthly-newsletter .button{margin-bottom: 0; margin-top: 1.25em;} .home .pp-content{font-size: 14px;} .home ul.pp-links{margin: 0; padding: 0; list-style: none;} .home ul.pp-links a{text-decoration: none;} .home ul.pp-links a:hover{text-decoration: underline;} .home ul.pp-links li{font-size: 12px; text-transform: uppercase; font-weight: 500;} .home #content.site-content{padding-top: 0;} .home #home-intro-section{padding-top: 59px;} /*-------------------------------------------------------------- 12.7 Interior Pages --------------------------------------------------------------*/ /**** Padding Options****/ .v-margin-both{padding-top: 1em; padding-bottom: 1em;} .v-margin-top{padding-top: 1em; padding-bottom: 0;} .v-margin-bottom{padding-top: 0; padding-bottom: 1em;} .v-margin-none{padding-top: 0; padding-bottom: 0;} /******** Single Resource ********/ #resource-meta .resource-meta{font-size: 12px;} #resource-meta .resource-meta strong{font-weight: 600;} #resource-meta .search-links{font-size:14px;} #resource-meta .search-links a{font-weight: 600; text-transform: uppercase; text-decoration: none; } #resource-meta .search-links a:hover{text-decoration: underline; } #resource-meta .keywords{text-transform: capitalize;} /**** Bottom Browse Resource Library ****/ #browse-resource a.browse-link{text-decoration: none; color: #1b2539; text-transform: uppercase; font-size: 14px; line-height: 1.2;} #browse-resource a .browse-box{ background-color: #f1f1f1; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} #browse-resource a .browse-box:hover{ background-color: #ddd;} /***** Bottom From Resource Section ********/ #from-resource{background-color: #e8e8e8;} #from-resource a.from-link{text-decoration: none;} #from-resource a.from-link:hover{text-decoration: none;} #from-resource a.from-link .from-box{background-color: #fff; font-size: 14px; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} #from-resource a.from-link:hover .from-box{background-color:#ddd;} #from-resource .title{font-size: 14px; font-weight: 500; color:#1c4d75;} #from-resource a.from-link .type{text-transform: uppercase; font-size: 12px;} /******** Resource Overview ***********/ #featured-resource-picks{} #featured-resource-picks a.from-link{text-decoration: none;} #featured-resource-picks a.from-link:hover{text-decoration: none;} #featured-resource-picks a.from-link .from-box{background-color: #fff; font-size: 14px; border-bottom: 5px #f1f1f1 solid; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} #featured-resource-picks a.from-link:hover .from-box{background-color:#ddd; border-bottom: 5px solid #de1430;} #featured-resource-picks .title{font-size: 14px; font-weight: 500; color:#1c4d75;} #featured-resource-picks a.from-link .type{text-transform: uppercase; font-size: 12px; color: #de1430;} #featured-resource-picks a.from-link .description{color:#000;} .resource-info a{text-decoration: none;} .resource-info a .resource-card{background-color:#f4f4f4; font-size: 12px; color: #000; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} .resource-info a:hover .resource-card{background-color:#ddd; } .resource-info a .resource-card .type{color:#de1430; text-transform: uppercase;} .resource-info a .resource-card .resourceTitle {color:#1c4d75; font-size: 14px; font-weight: 600; line-height: 1.2;} .resource-info a .resource-card .description p{margin-bottom: 1em;} /***** Side Search *****/ .side-search-box{background-color:#f4f4f4; color: #000;} #content .side-search-box ul{margin-left: 0; margin-bottom: 0; margin-top: 0;} .side-search-box h4{text-transform: uppercase; font-weight: 600; color:#000; font-size: 16px; font-family: 'Syne', Helvetica, Arial, sans-serif;} .side-search-box label{font-size: 14px; padding-left: 0;} .side-search-box .searchandfilter li[data-sf-field-input-type=checkbox] label, .side-search-box .searchandfilter li[data-sf-field-input-type=radio] label, .side-search-box .searchandfilter li[data-sf-field-input-type=range-radio] label, .side-search-box .searchandfilter li[data-sf-field-input-type=range-checkbox] label{padding-left: 0;} .side-search-box li.sf-field-search{padding-top: 0;} .side-search-box li.sf-field-search label{width: 100%;} .side-search-box li.sf-field-search input{background-color:#e8e8e8; width: 100%; border: 0 none; font-size: 18px; color:#000;} .side-search-box li.sf-field-search input::placeholder { color: #000; opacity: 1; font-weight: 400; } .side-search-box li.sf-field-search input:-ms-input-placeholder {color: #000;} .side-search-box li.sf-field-search input::-ms-input-placeholder {color: #000;} .side-search-box .searchandfilter ul li li{padding: 0 0 .5em;} .side-search-box li.sf-field-taxonomy-resource-type, .side-search-box li.sf-field-taxonomy-resource-topic, .side-search-box li.sf-field-taxonomy-language{padding-left: .3em;} .side-search-box li.sf-field-taxonomy-resource-keyword label, .side-search-box li.sf-field-taxonomy-resource-author label, .side-search-box li.sf-field-sort_order label, .side-search-box li.sf-field-taxonomy-resource-source label{width: 100%; font-size: 16px;} .side-search-box li.sf-field-taxonomy-resource-keyword select, .side-search-box li.sf-field-taxonomy-resource-author select, .side-search-box li.sf-field-sort_order select, .side-search-box li.sf-field-taxonomy-resource-source select{width: 100%; border: 1px solid #bbb; font-size: 16px;} .side-search-box li.sf-field-post-meta-rl_date ul li{width:50%; display: inline-block;} .side-search-box li.sf-field-post-meta-rl_date ul li input{width: 98%;} .side-search-box li.sf-field-post-meta-rl_date ul li label{width: 98%;} /*** Sizing for mobile and other fun things ****/ .side-search-box .searchandfilter ul li{padding: 5px 0;} .side-search-box label{font-size: 13px; line-height: 1.2;} .side-search-box li.sf-field-taxonomy-language{width: 100%;} .side-search-box li.sf-field-taxonomy-keyword, .side-search-box li.sf-field-post-meta-author, .side-search-box li.sf-field-sort_order{width: 50%; display: inline-block;} .side-search-box li.sf-field-taxonomy-keyword label, .side-search-box li.sf-field-post-meta-author label, .side-search-box li.sf-field-sort_order label{width: 98%} .side-search-box li.sf-field-taxonomy-keyword option{text-transform: capitalize;} /** Checkboxes **/ .side-search-box li.sf-field-taxonomy-resource-topic, .side-search-box li.sf-field-taxonomy-resource-type, .side-search-box li.sf-field-taxonomy-language{width: 50%; display: inline-block; vertical-align: top; position: relative;} .side-search-box li.sf-field-taxonomy-language{width: 100%;} .side-search-box li.sf-field-taxonomy-resource-topic li, .side-search-box li.sf-field-taxonomy-resource-type li, .side-search-box li.sf-field-taxonomy-language li{position: relative;} .side-search-box li.sf-field-taxonomy-resource-topic label, .side-search-box li.sf-field-taxonomy-resource-type label, .side-search-box li.sf-field-taxonomy-language label{ position:relative; padding-left:22px !important; display:block;} .side-search-box li.sf-field-taxonomy-resource-topic input[type=checkbox], .side-search-box li.sf-field-taxonomy-resource-type input[type=checkbox], .side-search-box li.sf-field-taxonomy-language input[type=checkbox]{ position:absolute; top:2px; left:0px; } /** Select boxes **/ .side-search-box li.sf-field-taxonomy-resource-keyword, .side-search-box li.sf-field-taxonomy-resource-author, .side-search-box li.sf-field-sort_order, .side-search-box li.sf-field-taxonomy-resource-source{width: 50%; display: inline-block; vertical-align: top;} .side-search-box li.sf-field-taxonomy-resource-keyword label, .side-search-box li.sf-field-taxonomy-resource-author label, .side-search-box li.sf-field-sort_order label, .side-search-box li.sf-field-taxonomy-resource-source label{display: inline-block; font-size: 14px;} .side-search-box li.sf-field-taxonomy-resource-keyword select, .side-search-box li.sf-field-taxonomy-resource-author select, .side-search-box li.sf-field-sort_order select, .side-search-box li.sf-field-taxonomy-resource-source select{font-size: 14px;} .side-search-box li.sf-field-reset{font-weight: 600; font-size: 90%; text-transform: uppercase; margin-left: .3em;} /**** Make sticky code ****/ #side-search-holder.stick{position: sticky; top: 61px; width: 100%;} #side-search.makeStick{position: fixed; top:61px; left: 0; display: block; width: 100%; z-index: 10; overflow-y: auto;} .side-search-box{background-color:#f4f4f4;} #mapSelectionBar{background:#1C4D75; padding: .5em 1em; text-transform:uppercase;} #mapSelectionBar a{color: #fff;} #mapSelectionBox{display: none;} #mapSelectionButton{color:#fff; display: inline-block; float: left; padding: .25em .5em; cursor: pointer; font-weight: 400;} #mapSelectionButton:after{ font-family: "Font Awesome 5 Pro"; content: "\f13a"; font-weight: 900;} #mapSelectionBar.buttonOpen #mapSelectionButton:after{ font-family: "Font Awesome 5 Pro"; content: "\f139"; font-weight: 900;} #mapApply{display: none;} #mapSelectionBar.buttonOpen #mapApply{float: right; color:#1C4D75; background:#fff; display:inline-block; padding: .25em .5em; cursor: pointer; font-weight: 400; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} #mapSelectionBar.buttonOpen #mapApply:hover{background:#A2B6C4; color:#fff;} /**** 404 ****/ #searchform #s{max-width: 450px; width: 100%; margin-bottom: .8em;} /*** Search Results ***/ .search-results .smalltext p:last-of-type{margin-bottom: 0} /***** Embedded Form Pages *****/ #content div.ctct-form-embed div.ctct-form-defaults h2.ctct-form-header{font-family: 'Syne', Helvetica, Arial, sans-serif;} #content div.ctct-form-embed div.ctct-form-defaults p.ctct-form-text, #content div.ctct-form-embed div.ctct-form-defaults{font-family: 'Poppins', Helvetica, Arial, sans-serif !important;} #content div.ctct-form-embed form.ctct-form-custom label.ctct-form-label{font-family: 'Poppins', Helvetica, Arial, sans-serif !important; font-weight: 600;} #content p.ctct-form-text:last-of-type{margin-bottom:2em; } #content #gdpr_text{margin-bottom: 2em;} /*-------------------------------------------------------------- 12.8 Page Sections --------------------------------------------------------------*/ /***** Page Intro Section ****/ #page-intro-section .intro-background{background-color:#f1f1f1; } #page-intro-section .intro-background .header-image{padding-bottom: 45%;} #page-intro-section h1.page-title, .page-title h1{ font-weight: 600; color:#1c4d75; margin-bottom: 0; line-height: 1; text-transform: none; letter-spacing: .005em;} #page-intro-section .intro-content-section{font-size: 14px; line-height: 1.6; color:#000;} #page-intro-section .intro-section-title{text-transform: uppercase; font-size: 12px; font-weight: 500; font-family: 'Poppins', Helvetica, Arial, sans-serif; color: #767576;} #page-intro-section .intro-section-title a{color: #13413a; text-decoration: none;} #page-intro-section .intro-section-title a:hover{color: #13413a; text-decoration: underline;} #page-intro-section hr{height: 6px; background-color: #de1430; margin-top: .75em; margin-bottom: .75em;} #page-intro-section .header-image{background-size: cover; background-repeat: no-repeat; background-position: center center;} #page-intro-section .intro-button a{text-transform: uppercase; text-decoration: none; font-weight: 500;} #page-intro-section .intro-button a:hover{text-transform: uppercase; text-decoration: underline; font-weight: 500;} /***** Accordion Section ******/ .accordion-background {background-color:#fff; font-weight: 400;} .accordion-background.background-white{background-color: #fff;} .accordion-background.background-grey{background-color: #eaf2fa;} .accordion .card{border-radius: 0; border: 0 none; padding-bottom: 6px; background-color: transparent;} .accordion .card .card-header{padding: 0; border-bottom: 0 none; } .accordion .card h2 button.btn{font-family: 'Poppins', Helvetica, Arial, sans-serif !important;} .accordion .card button.btn{border-radius: 0; margin: 0; font-size: 16px; background-color:#1c4d75; color:#fff; font-weight: 400; padding: .75em 1.85em .75em .9em; text-transform: none; letter-spacing: .03em;} .accordion .card button.btn:hover{background-color:#0e3758 !important;} .accordion .card button.btn::after{content: '-'; position: absolute; right: .75em; top:.75em; font-weight: 700; background: none; width: auto; height: auto; transition: none;} .accordion .card button.btn.collapsed::after{content: '+';} .accordion .card .card-body{background-color: #fff; padding: 1.75rem 1.75rem;} .accordion-background.background-white .card .card-body{background-color: #F1F1F1;} #content .accordion .card .card-body p:last-of-type{margin-bottom: 0;} .accordion .btn:focus{box-shadow: none;} #content .accordion .card .card-body a.button{color:#fff;} /***** Callout - White *****/ .callout-white h2{text-transform: none;} /***** Callout - Full Width Background ******/ .callout-full-width .callout-box{background-color: #fff;} .callout-full-width .callout-box h2{text-transform: none;} .callout-full-width .background-image{background-repeat: no-repeat; background-size: cover; background-position: center center;} /**** Featured Areas *****/ .featured-box h2{text-transform:none;} .featured-box .button-area a{text-transform: uppercase; text-decoration: none; font-weight: 500;} .featured-box .button-area a:hover{text-transform: uppercase; text-decoration: underline;} /***** Callout *****/ .callout-section{font-size: 1.25rem;} .callout-section .callout-button a{text-decoration: none; font-weight: 600; font-size: 14px; text-transform: uppercase;} .callout-section h2, .callout-section h3{color:#1b2539;} /****** Light Blue Background *******/ .light-blue-background{background-color:#e8f0f8;} /***** ---- BACKGROUND OPTIONS *****/ /**** White Background *****/ .background-white{background-color:#fff;} .background-white h1, .background-white h2, .background-white h3, .background-white h4, .background-white h5, .background-white h6{;} /**** Gray Background *****/ .background-gray{background-color:#f1f1f1; } /**** Blue Background *****/ .background-blue{background-color:#1c4d75; color:#fff } .background-blue h2{color: #fff;} .background-blue a{color: #fff; text-decoration:underline;} .background-blue a:hover{color: #f1f1f1;} .background-blue hr.short{background-color: #000;} /**** Navy Background *****/ .background-navy{background-color:#1b2539; color:#fff;} .background-navy h1, .background-navy h2, .background-navy h3, .background-navy h4, .background-navy h5, .background-navy h6{color:#fff;} .background-navy a{color: #ffcb27;} .background-navy a:hover{color:#1b2539;} .background-navy a.button{color:#1b2539;} /****** Image Only Section *****/ .embed-image img{width: 100%; height: auto;} /****** Resource List Section *********/ #content .resource-list-item img{border: 1px solid #eaf2fa;} .resource-list-item h5{text-transform: none;} #content .resource-list-item h5 a{text-decoration: none; } #content .resource-list-item h5 a:hover{text-decoration: underline;} /****** People Bios *****/ .people-list .people_item:last-of-type hr.staff_hr{display: none;} .people-list .people_photo img{width: 100%; max-width: 400px;} .people-list .pio{font-size: 120%;} /***** People Grid ******/ .team .box{background:#e8e8e8;} .team .hs-box{font-size: 12px; line-height: 1.3; } .team .hs-name{font-size: 16px; font-weight: 700;} #content .team .hs-name a{text-decoration: none;} #content .team .hs-name a:hover{text-decoration: underline;} /*-------------------------------------------------------------- 12.9 Posts --------------------------------------------------------------*/ #post-list a{text-decoration: none !important;} #post-list .card-news{background-color:#eaf2fa; position: relative; padding-bottom: 25px !important; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} #post-list .card-news:hover{background-color: #cfdbe7;} #post-list .card-news img{} #post-list .card-news .post-content{} #post-list .card-news h4{font-size: 18px; text-transform: none;} #post-list .card-news h4 a{color:#5B57A6; font-weight: 700; } #post-list .card-news .post-info{font-weight: 600; color:#7f7f7f; font-size: 14px; text-transform: uppercase; position: absolute; bottom: 8px} .card-news .news-image-holder{padding-bottom: 66.666666667%; background-position: center center; background-repeat: no-repeat; background-size: cover;} .post-info{font-size: 80%; color: #a8acaf;} #postTitle h2 a{text-decoration: none;} #postTitle h2 a:hover{text-decoration: underline;} #content-post{font-size: 18px;} #paging-bottom{width:100%; display:block; clear:both;} #paging-bottom .alignleft, #paging-bottom .alignright{ display: block; width: 32%; } #paging-bottom .alignleft a, #paging-bottom .alignright a{ display: block; width: 100%; } #paging-bottom .alignleft { float: left; } #paging-bottom .alignright { float: right; } #paging-bottom .alignleft a, #paging-bottom .alignright a { background-color: #1c4d75; color: #fff; text-decoration: none; font-weight: 500; display: block; width: 100%; text-align: center; text-transform: uppercase; padding: 10px 0; font-size: 16px; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear; border-radius: 999px; } #paging-bottom .alignleft a:hover, #paging-bottom .alignright a:hover { background: #000000; } /******************* Blog Single ************************/ /********************* WordPress Styles *********************/ #postInfo {color:#9f9f9f; font-size:14px; margin:0 0 20px 0; clear: both; font-style:italic;} #paging { display: block; text-align: center; margin-top: 60px; padding-bottom: 60px; font-weight:bold; font-size:14px; text-transform:uppercase; } #paging a{text-decoration: none;} #paging a:hover{text-decoration: underline;} /*-------------------------------------------------------------- 12.10 MISC Universal Styles --------------------------------------------------------------*/ #content ul.fancy-list{list-style: none; margin-left: .5em;} ul.fancy-list li{padding-left:1.5em; position: relative;} ul.fancy-list li::before{ content: "\f058"; /* FontAwesome Unicode */ font-family: 'Font Awesome 6 Pro'; display: inline-block; margin-left: -1.5em; width: 1.5em; position: absolute;} #content ul.link-list{list-style: none; border-left: 10px solid #00944d; margin-left: 0; padding-left: 1.5em;} #content ul.link-list li{margin-bottom: .75em;} #content ul.link-list li a{text-transform: uppercase; font-weight: 600; text-decoration: none;} #content ul.link-list li a::after{ content: "\f0a9"; /* FontAwesome Unicode */ font-family: 'Font Awesome 6 Pro'; display: inline-block; margin-left: .5em; /* width: 1.5em; position: absolute;*/} ol.fancy-list { margin: 0 0 2em .2em !important; counter-reset: li; list-style-type: none; } ol.fancy-list li { position: relative; padding-left: 2em ; font-weight: 400; line-height: 1.5; margin-bottom: 1em; } ol.fancy-list li:before { content: counter(li); counter-increment: li; height: 1.5em; width: 1.5em; border: 2px solid #1b2539; border-radius: 50%; text-align: center; position: absolute; left: 0; line-height: 1.4em; } .text-enlarged{font-size: 115%;} .text-enlarged-133{font-size: 110%;} .center{text-align: center;} .bold{font-weight: 700;} .extrabold{font-weight: 800;} .credit{color: #2d2d2d; font-weight: 700; font-size: 12px;} .smalltext{font-size: 12px;} .grey{color:#6f727b;} .centerBtn{text-align:center; display:block; width:100%;} .noPad{padding: 0;} .moreLink{text-transform: uppercase; font-weight: 800;} hr.hr-small-center{width: 90px; margin-left: auto !important; margin-right: auto !important;} .trans-2{-o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} .circle-center{display: flex; border: 6px solid #94a545; border-radius: 50%; width:100%; justify-content: center; align-items: center;} .circle-center:before{content:""; float: left; padding-top: 100%;} .extra-large-text{} .word-wrap { /* These are technically the same, but use both */ overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; /* This is the dangerous one in WebKit, as it breaks things wherever */ word-break: break-all; /* Instead use this non-standard one: */ word-break: break-word; } /*-------------------------------------------------------------- 13 Comments --------------------------------------------------------------*/ /*-------------------------------------------------------------- 14 Widgets --------------------------------------------------------------*/ /*-------------------------------------------------------------- 15 Media --------------------------------------------------------------*/ img {vertical-align: middle; max-width:100%; height:auto;} img.size-full{width: 100%; height: auto;} img.alignleft {float:left; display:inline; margin:5px 20px 15px 0; max-width:50%; height:auto;} img.alignright {float:right; display:inline; margin:5px 0 15px 20px; max-width:50%; height:auto;} img.alignnone {margin: 0 0 10px 0; max-width:100%; height:auto;} img.aligncenter {clear: both; display: block; margin: 0 auto 10px; max-width:100%; height:auto;} .wp-caption.alignright{float:right; margin:5px 0 15px 5%; max-width:50%; height:auto;} .wp-caption.alignleft{float:left; margin:5px 5% 15px 0; max-width:50%; height:auto;} .alignright {float: right; margin: 0 0 5px 15px; display:inline;} .alignleft {float: left; margin: 0 15px 5px 0; display:inline;} .center{text-align:center;} .wp-caption.alignright img{ width:100%; height:auto;} p.wp-caption-text {margin:.5em 0 1.8em; font-size:12px; color:#767576;} .wp-caption img{margin:5px 15px 5px 0;} .wp-caption {margin-bottom:2em; font-size:12px; color:#767576; max-width: 100%;} .wp-caption p{margin-bottom:5px;} /******* Video ******/ .embed-container { position: relative; padding-bottom: 56.25%; overflow: hidden; max-width: 100%; height: auto; margin-bottom: 1.25em; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .embed-holder { position: relative; padding-bottom: 55.25%; overflow: hidden; max-width: 100%; height: auto; margin-bottom: 1.25em; } .embed-holder iframe, .embed-holder object, .embed-holder embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #content .epyt-gallery-title{font-size: 12px;} /*-------------------------------------------------------------- 15.1 Galleries --------------------------------------------------------------*/ /*-------------------------------------------------------------- 16 Media Queries --------------------------------------------------------------*/ /*-------------------------------------------------------------- 16.1 Query sm - Over 576px --------------------------------------------------------------*/ @media only screen and (min-width : 576px) { body, input, select, textarea{} button, .button, .buttonAlt, a.button, input[type="button"], input[type="submit"] {font-size:14px; padding: .75em 1.5em;} /************* Buttons **********/ button,.button, .buttonAlt, a.button, .gform-footer .gform_button.button input[type="submit"], input[type="button"], input[type="submit"], #content div.ctct-form-embed form.ctct-form-custom button.ctct-form-button{font-size: 14px;} /*----- Typography -------*/ h1{ font-size:36px;} h2{ font-size:30px;} h3{ font-size:26px;} h4{ font-size:21px;} h5{ font-size:21px;} h6{ font-size:17px;} h1.title-size-mid{font-size: 24px;} h2.callout{font-size:36px;} blockquote {font-size: 1.85rem;} .intro-content-section{font-size: 1.5rem;} hr{} /************* Buttons **********/ /*------ Header ---------*/ /*------ Sidebar Content --------*/ /*----- Footer -----*/ footer ul.quicklinks a{font-size: 18px;} /*------------ Home Page ---------*/ .home .intro-title h1{font-size: 30px;} .home #home-intro-section .intro-box{font-size: 13px;} .home #home-link-boxes hr{margin-left: auto; margin-right:auto;} /*----- Page Sections ------*/ /***** Intro Banner Section ****/ #intro-banner-section button, #intro-banner-section .button, #intro-banner-section .buttonAlt, #intro-banner-section a.button{font-size: 24px;} #page-intro-section .intro-content-section, .intro-content{} /***** Accordion *****/ .accordion .card button.btn{font-size: 17px;} /***** Callout *****/ .callout-section{font-size: 1.5rem;} /**** Bottom News Section ****/ a.page-news-link .page-news-box{min-height: 190px;} /*----- MISC ------*/ .smalltext{font-size: 14px;} .text-enlarged-133{font-size: 115%;} .text-enlarged{font-size:120%;} .extra-large-text{font-size: 50px;} #content .epyt-gallery-title{font-size: 14px;} img.alignleft {float:left; display:inline; margin:5px 20px 15px 0; max-width:60%; height:auto;} img.alignright {float:right; display:inline; margin:5px 0 15px 20px; max-width:60%; height:auto;} .wp-caption.alignright{float:right; margin:5px 0 15px 5%; max-width:60%; height:auto;} .wp-caption.alignleft{float:left; margin:5px 5% 15px 0; max-width:60%; height:auto;} } /*-------------------------------------------------------------- 16.2 Query md - Over 768px --------------------------------------------------------------*/ @media only screen and (min-width : 768px) { /*----- Typography -------*/ body, input, select, textarea{} h1{ font-size:36px;} h2{ font-size:30px;} h3{ font-size:26px;} h4{ font-size:21px;} h5{ font-size:21px;} h6{ font-size:17px;} h2.callout{font-size:48px;} h2.title-front{font-size: 26px;} h1.title-size-mid{font-size: 24px;} #content {} /************* Buttons **********/ button, .button, .buttonAlt, a.button, input[type="button"], input[type="submit"]{font-size: 14px; } /*------ Header ---------*/ /*------ Sidebar Content --------*/ /*----- Footer -----*/ footer ul.quicklinks a{font-size: 21px;} /*------------ Home Page ---------*/ .home .intro-title h1{font-size: 36px;} .home #home-intro-section .intro-box{font-size: 14px;} #page-intro-section .intro-background{height: 100%;} #page-intro-section .intro-background .header-image{padding-bottom: 0;} /*----- Interior Pages -------*/ /*----- Page Sections ------*/ #page-intro-section .intro-content-section, .intro-content{} /***** Accordion *****/ .accordion .card button.btn{font-size: 18px;} /***** Side Search *****/ .side-search-box{background-color:#f4f4f4; color: #000;} .side-search-box ul{margin-left: 0;} .side-search-box h4{text-transform: uppercase; font-weight: 600; color:#000; font-size: 16px; font-family: 'Syne', Helvetica, Arial, sans-serif;} .side-search-box label{font-size: 14px; padding-left: 0;} .side-search-box .searchandfilter li[data-sf-field-input-type=checkbox] label, .side-search-box .searchandfilter li[data-sf-field-input-type=radio] label, .side-search-box .searchandfilter li[data-sf-field-input-type=range-radio] label, .side-search-box .searchandfilter li[data-sf-field-input-type=range-checkbox] label{padding-left: 0;} .side-search-box li.sf-field-search{padding-top: 0;} .side-search-box .searchandfilter ul li{padding: 10px 0;} .side-search-box li.sf-field-search input{background-color:#e8e8e8; width: 100%; border: 0 none; font-size: 24px; color:#000;} .side-search-box li.sf-field-search input::placeholder { color: #000; opacity: 1; font-weight: 400; background-image:url("assets/images/common/search.png"); background-repeat: no-repeat; background-size: contain; background-position: left; } .side-search-box li.sf-field-search input:-ms-input-placeholder {color: #000;} .side-search-box li.sf-field-search input::-ms-input-placeholder {color: #000;} .side-search-box .searchandfilter ul li li{padding: 0 0 .5em; margin-left: .5em;} .side-search-box li.sf-field-taxonomy-resource-type, .side-search-box li.sf-field-taxonomy-resource-topic, .side-search-box li.sf-field-taxonomy-language{padding-left: .3em; display: block; width: 100%;} .side-search-box li.sf-field-taxonomy-keyword, .side-search-box li.sf-field-post-meta-author, .side-search-box li.sf-field-sort_order, .side-search-box li.sf-field-taxonomy-resource-source{width: 100%; display: block;} .side-search-box li.sf-field-taxonomy-keyword label, .side-search-box li.sf-field-post-meta-author label, .side-search-box li.sf-field-sort_order label, .side-search-box li.sf-field-taxonomy-resource-source label{width: 100%; font-size: 16px;} .side-search-box li.sf-field-taxonomy-keyword select, .side-search-box li.sf-field-post-meta-author select, .side-search-box li.sf-field-sort_order select, .side-search-box li.sf-field-taxonomy-resource-source select{width: 100%; border: 1px solid #bbb; font-size: 14px;} .side-search-box li.sf-field-post-meta-rl_date ul li{width:50%; display: inline-block; margin-left: 0;} .side-search-box li.sf-field-post-meta-rl_date ul li input{width: 98%;} .side-search-box li.sf-field-post-meta-rl_date ul li label{width: 98%;} /****** Resource Overview ******/ .resource-info a .resource-card .resourceTitle {font-size: 16px;} .side-search-box{background-color:#f4f4f4; color: #000;} #side-search.makeStick{position: inherit; top:inherit; overflow-y: visible; max-height: none !important;} #mapSelectionBar{display: none;} #mapSelectionBox{display: block;} #mapSelectionBox.screen{display: block !important;} .side-search-box li.sf-field-search input{font-size: 24px;} .side-search-box label{font-size: 14px; line-height: 1.2;} /*----- MISC ------*/ .extra-large-text{font-size: 60px;} .text-enlarged{font-size: 135%;} .text-enlarged-133{font-size: 133.333333%;} img.alignleft {float:left; display:inline; margin:5px 20px 15px 0; max-width:65%; height:auto;} img.alignright {float:right; display:inline; margin:5px 0 15px 20px; max-width:65%; height:auto;} .wp-caption.alignright{float:right; margin:5px 0 15px 3%; max-width:65%; height:auto;} .wp-caption.alignleft{float:left; margin:5px 3% 15px 0; max-width:65%; height:auto;} } /*-------------------------------------------------------------- 16.3 Query lg - Over 992px --------------------------------------------------------------*/ @media only screen and (min-width : 992px) { /*----- Typography -------*/ h1{ font-size:40px;} h2{ font-size:32px;} h3{ font-size:28px;} h4{ font-size:22px;} h5{ font-size:22px;} h6{ font-size:18px;} h2.callout{font-size:60px;} h2.title-front{font-size: 32px;} h1.title-size-mid{font-size: 26px;} /************* Buttons **********/ button, .button, .buttonAlt, a.button, input[type="button"], input[type="submit"]{font-size: 14px; padding: .75em 1.75em; } /*------ Header ---------*/ #site-header{border-bottom: 0 solid #fff;} /***** Navigation *******/ #site-header #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link{font-size: 12px; padding: 0 10px;} /*-------------------------------------------------------------- 12.2 Regular Content --------------------------------------------------------------*/ .min-sizer{min-height: 353px;} .background-test{background-color: aquamarine;} #content.site-content, .home #home-intro-section{padding-top: 124px;} .home #page-intro-section{padding-top:0; } /*------ Sidebar Content --------*/ /*----- Footer -----*/ /*------------ Home Page ---------*/ .home #page-intro-section .banner-con{min-height: 500px;} .home .intro-title h1{font-size: 42px;} .home #home-link-boxes h4{font-size: 32px;} .home #monthly-newsletter .title h3{font-size: 48px;} /*----- Interior Pages -------*/ /*----- Page Sections ------*/ #page-intro-section .intro-content-section, .intro-content{} .featured-stories h2{font-size: 40px;} /***** Callout - White *****/ .callout-white h2{font-size: 66px} /***** Callout - Full width Background *****/ .callout-full-width .callout-box h2, .featured-area .featured-box h2{font-size: 42px;} /******* Event Single *****/ #content .tribe-events-schedule h2{font-size: 36px;} /******** Misc ********/ .text-enlarged{font-size: 150%;} .extra-large-text{font-size: 72px;} } /*-------------------------------------------------------------- 16.4 Query xl - Over 1200px --------------------------------------------------------------*/ @media only screen and (min-width : 1200px) { #content.site-content, .home #home-intro-section{padding-top: 124px;} .home #page-intro-section{padding-top:0;} /*----- Typography -------*/ h1{ font-size:48px;} h2{ font-size:36px;} h3{ font-size:30px;} h4{ font-size:24px;} h5{ font-size:24px;} h6{ font-size:20px;} h1.title-size-mid{font-size: 30px;} h2.title-front{font-size: 36px;} /*------ Header ---------*/ /***** Navigation *******/ #site-header #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link{font-size: 13px; padding: 0 15px;} /*------ Sidebar Content --------*/ /*----- Footer -----*/ /*------------ Home Page ---------*/ .home .intro-title h1{font-size: 48px;} .home #home-link-boxes h4{font-size: 36px;} /*----- Interior Pages -------*/ /*----- Page Sections ------*/ #page-intro-section .intro-content-section, .intro-content{} /***** Callout - White *****/ .callout-white h2{font-size: 72px} /***** Callout - Full width Background *****/ .callout-full-width .callout-box h2, .featured-area .featured-box h2{font-size: 48px;} /******* Event Single *****/ #content .tribe-events-schedule h2{font-size: 28px;} } /*-------------------------------------------------------------- 16.4 Query xxl - Over 1400px --------------------------------------------------------------*/ @media only screen and (min-width : 1400px) { /*----- Typography -------*/ h1{} h2{} h3{} h4{} h5{} h6{} /*------ Header ---------*/ /***** Navigation *******/ #site-header #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link{font-size: 14px; padding: 0 15px;} /*------ Sidebar Content --------*/ /*----- Footer -----*/ /*------------ Home Page ---------*/ /*----- Interior Pages -------*/ /*----- Page Sections ------*/ } /*-------------------------------------------------------------- 17 Print --------------------------------------------------------------*/ /* ========================================================================== Print styles. Inlined to avoid the additional HTTP request: http://www.phpied.com/delay-loading-your-print-css/ ========================================================================== */ @media print { *, *:before, *:after, *:first-letter, *:first-line { background: transparent !important; color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links that are fragment identifiers, * or use the `javascript:` pseudo protocol */ a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } /* * Printing Tables: * http://css-discuss.incutio.com/wiki/Printing_Tables */ thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }