/* Theme Name: Communities for Recycling */ /*Reset*/ a,hr{padding:0}a,input[type=checkbox]{vertical-align:baseline}article,aside,figure,footer,header,hgroup,hr,img.aligncenter,nav,section{display:block}abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0;margin:0;padding:0}td,td img{vertical-align:top}embed,img,object{max-width:100%;height:auto;}html{overflow-y:scroll}ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}a{font-size:100%;background:0 0;margin:0}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}.alignleft,img.alignleft{float:left;margin:15px 15px 15px 0}alignright,img.alignright{float:right;margin:15px 0 15px 15px}.aligncenter,img.aligncenter{margin:15px auto}table{border-collapse:collapse;border-spacing:0;font:100%}th{vertical-align:bottom}td{font-weight:400}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}pre{white-space:pre-line;word-wrap:break-word}input,select,textarea{font:99% sans-serif}a:active,a:hover{outline:0}small{font-size:85%}strong,th{font-weight:700}sub,sup{font-size:75%;line-height:0;position:relative}sup{top:-.5em}sub{bottom:-.25em}code,kbd,pre,samp{font-family:monospace,sans-serif}.clickable,button,input[type=button],input[type=submit],label{cursor:pointer}button,input,select,textarea{margin:0}button{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.ie6 html{filter:expression(document.execCommand("BackgroundImageCache",false,true))}.clearfix:after,.clearfix:before{content:"\0020";display:block;height:0;overflow:hidden}.clearfix:after{clear:both}.clearfix{zoom:1}.ie6 input,input[type=radio]{vertical-align:text-bottom} @font-face { font-family: 'bebas_neueregular'; src: url('fonts/bebasneue-regular-webfont.woff2') format('woff2'), url('fonts/bebasneue-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'poppinsitalic'; src: url('fonts/poppins-italic-webfont.woff2') format('woff2'), url('fonts/poppins-italic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'poppinslight'; src: url('fonts/poppins-light-webfont.woff2') format('woff2'), url('fonts/poppins-light-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'poppinslight_italic'; src: url('fonts/poppins-lightitalic-webfont.woff2') format('woff2'), url('fonts/poppins-lightitalic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'poppinsmedium'; src: url('fonts/poppins-medium-webfont.woff2') format('woff2'), url('fonts/poppins-medium-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'poppinsmedium_italic'; src: url('fonts/poppins-mediumitalic-webfont.woff2') format('woff2'), url('fonts/poppins-mediumitalic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'poppinsregular'; src: url('fonts/poppins-regular-webfont.woff2') format('woff2'), url('fonts/poppins-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'poppinssemibold'; src: url('fonts/poppins-semibold-webfont.woff2') format('woff2'), url('fonts/poppins-semibold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'poppinssemibold_italic'; src: url('fonts/poppins-semibolditalic-webfont.woff2') format('woff2'), url('fonts/poppins-semibolditalic-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /*Styles*/ body{ -webkit-animation-delay: 0.1s; -webkit-animation-name: fontfix; -webkit-animation-duration: 0.1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear;} @-webkit-keyframes fontfix{ from { opacity: 1; } to { opacity: 1; }} body, select, input, textarea{ font-family: "poppinsregular", Helvetica, Arial, sans-serif;} a{ color: #85C09F; text-decoration: none;} a:hover, a:focus{ color: #107A4D;} .button, button{ -webkit-appearance: none; display: inline-block; font-family: bebas_neueregular, Helvetica, Arial, sans-serif; font-size: 30px; line-height: 30px; color: #fff; background-color: #003151; padding: 35px 80px; text-decoration: none; font-weight: 400;} .button-sm, .alm-load-more-btn, .search-submit{ display: inline-block; font-family: bebas_neueregular, Helvetica, Arial, sans-serif; font-size: 20px !important; line-height: 20px !important; padding: 15px 25px !important; color: #fff; background-color: #003151; text-decoration: none; border: none;} .button:hover, button:hover, .button:focus, button:focus, .button-sm:hover, .button-sm:focus, .search-submit:hover{ background-color: #85C09F; color: #fff;} .screen-reader{ position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;} h1, h2, h3, h4, h5, h6{ line-height: normal; font-family: bebas_neueregular, Helvetica, Arial, sans-serif; font-weight: normal;} h1{ font-size: 125px;} h2{ font-size: 72px;} h3{ font-size: 60px;} h4{ font-size: 30px; font-family: "poppinsregular", Helvetica, Arial, sans-serif;} h5{ font-size: 24px;} h6{ font-size: 21px;} .hero-basic{ padding: 30px 0 0;} .hero-basic h1{ font-size: 60px;} .page-wrap{} .wrapper{ width: 90%; max-width: 1400px; margin: 0 auto; position: relative;} .wrapper:after{ content: ""; display: table; clear: both;} nav ul{ list-style: none; position: relative; float:left; margin:0; padding:0;} nav ul a{ display: block; line-height: 32px; text-decoration: none;} nav ul li{ position: relative; float: left; margin: 0; padding: 0;} nav ul li.current-menu-item a, .nav ul li:hover > a{} nav ul ul{ display: none; position: absolute; top: 100%; left: 0; padding: 0; text-align: left;} nav ul ul li{ float: none; width: 200px;} nav ul ul a{ line-height: 120%;} nav ul ul ul{ top: 0; left: 100%;} nav ul li:hover > ul{ display: block;} .announcement{ background-color: #003151; color: #fff; text-transform: uppercase; font-size: 20px; line-height: 20px; text-align: center; padding: 22px 0; position: absolute; top: 0; left: 0; width: 100%;} .announcement .wrapper{ display: flex; align-items: center; justify-content: center; text-align: center; position: relative;} .announcement button{ padding: 0; margin: 0; background: none; border: none; color: #fff; font-family: "poppinsmedium"; display: inline-block; position: absolute; right: 2.5%;} .header{ padding: 75px 0 10px;} .header .wrapper{ display: flex; justify-content: space-between; align-items: center;} .header .logo{ float: left; max-width: 250px;} .header .nav{ float: right; display: flex; flex-flow: row-reverse wrap; align-items: center;} .header .nav li{ padding: 0 15px;} .header .nav a{ color: #003151; text-transform: uppercase; font-size: 20px; font-family: "poppinsmedium"; letter-spacing: .04em;} .header .nav li:hover > a{ color: #107A4D;} .header .nav .menu-primary-container{ float: right;} .header .nav li.pledge{ border-left: 2px solid #D6A78E; float: right; list-style: none; margin: 0 0 0 12px;} .header .nav li.search{ list-style: none; float: right; position: relative; padding: 0 15px;} .header .nav li.search .search-form{ visibility: none; opacity: 0; position: absolute; top: 52px; right: 5px; z-index: 9;} .header .nav li.search .search-form input{ width: 200px;} .header .nav li.search:hover .search-form{ visibility: visible; opacity: 1;} .header .nav li.search input{ padding: 10px; font-size: 14px; border: 1px solid #ccc;} .header .nav li.pledge a{ color: #107A4D;} .header .nav li.pledge a:hover{ color: #85C09F;} .header .nav li.menu-item-has-children a:after{ content: " +"} .header .nav li.menu-item-has-children ul li a:after{ content: ""} .header .nav .sub-menu{ background-color: #fff; padding: 0 0 8px 0; z-index: 999;} .header .nav .sub-menu li{ padding: 5px 15px;} .header .nav .sub-menu a{ font-size: 16px; font-family: "poppinslight";} .content{ font-size: 20px; color: #2b2b2b; font-family: "poppinslight";} .content p{ margin-top: 30px;} .content ul{ list-style: disc; margin: 15px 0 0 30px;} .content ol{ margin: 15px 0 0 30px;} .meta{} .sidebar{} .navigation{ padding: 0; text-align: center; margin-top: 45px;} .navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled{ color: #fff; text-decoration: none;} .navigation li{ display: inline;} .navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled{ border: 1px solid #A5D3ED; color: #003151; cursor: pointer; padding: 10px 15px; font-size: 14px; text-transform: uppercase; line-height: 14px;} .navigation li a:hover, .navigation li.active a{ background-color: #A5D3ED;} .search-content{ padding-bottom: 100px;} .search-content h1{ font-size: 60px; margin-top: 60px;} .search-content h2{ font-size: 36px;} .search-content .query{ margin: 0 0 30px;} .search-content article{ padding: 30px 0; border-top: 1px solid #ccc;} .search-content p{ margin-top: 5px !important; font-size: 16px; line-height: 24px;} .footer{ color: #fff; font-size: 14px; line-height: 24px; background-color: #003151; background-image: url(images/footer.png); background-position: center right; background-repeat: no-repeat; background-size: contain;} .footer-left, .footer-right{ box-sizing: border-box; padding: 90px 0 80px;} .footer-left{ width: 45%; float: left;} .footer-right{ width: 20%; float: right; min-width: 240px;} .footer li{ font-size: 18px;} .footer .button-sm{ background-color: #85C09F;} .footer .button-sm:hover{ background-color: #003151;} .footer .credits{ margin-top: 80px;} .footer .social{ margin-top: 80px} .footer .social li{ display: inline-block; margin-right: 10px;} .footer .social li a{ width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; background-color: #fff; color: #003151; border-radius: 100px;} .footer .social li a:hover{ background-color: #85C09F;} .footer .footer-nav{ font-family: bebas_neueregular, Helvetica, Arial, sans-serif; text-transform: uppercase; font-size: 18px; line-height: 18px; margin-top: 70px;} .footer .footer-nav li{ display: inline-block; padding: 0 10px; border-right: 1px solid #fff;} .footer .footer-nav li:nth-of-type(1){ padding-left: 0;} .footer .footer-nav li:nth-last-of-type(1){ padding-right: 0; border-right: none;} .footer .footer-nav li a{ color: #fff;} .footer .footer-nav li a:hover{ color: #85C09F;} .video-wrapper{ position: relative; padding-bottom: 56.25%; height: 0;} .video-wrapper iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .error .search-form{ margin-top: 60px;} .error #search-input{ padding: 14px; border: 1px solid #ccc;} .gfield_checkbox li, .gfield_radio li{ position: relative;} body .gform_wrapper .gfield_radio li label, body .gform_wrapper .gfield_checkbox li label{ margin: 2px 0 0 28px;} body .gform_wrapper ul li.gfield.optional .gfield_checkbox label::after, body .gform_wrapper ul li.gfield.optional .gfield_radio label::after{ content: ""; opacity: 1;} body .gform_wrapper .gfield_radio li input[type="radio"], body .gform_wrapper .gfield_checkbox li input[type="checkbox"]{ display: none;} ul.gfield_checkbox li[class^="gchoice"] label:before, ul.gfield_checkbox li[class^="gchoice"] label:after, ul.gfield_radio li[class^="gchoice"] label:before, ul.gfield_radio li[class^="gchoice"] label:after{ bottom: 0; content: ''; margin: auto; position: absolute; top: 0;} ul.gfield_checkbox li[class^="gchoice"] label:after, ul.gfield_radio li[class^="gchoice"] label:after{ content: ""; background-color: #fff; border: solid 1px #3c3c3c; border-radius: 50%; display: inline-block; height: 18px; left: 0; position: absolute; top: 0; transition: left .25s, background-color .13s; width: 18px;} ul.gfield_checkbox input[type="checkbox"]:checked + label:before, ul.gfield_radio input[type="radio"]:checked + label:before{ content: "●"; color: #00afd5; font-size: 24px; font-weight: 700; left: 1.75px; /*.75px*/ text-align: center; top: -4.25px; z-index: 9;} .lity-close{ position: absolute !important; top: -30px !important; right: -40px !important;} /* Homepage Impact Slider */ .slider{ width: 90%; height: 10px; margin: 30px auto; position: relative; height: 10px !important;} .daily, .monthly, .yearly, .h2o{ font-family: "poppinsmedium";} .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{ background: #39b54a; border: 1px solid #39b54a;} .ui-slider-tick-mark{ display: inline-block; width: 2px; background: #666666; height: 10px !important; position: absolute; top: 10px;} .tick-number{ position: absolute; top: 15px; left: -3px; font-size: 14px; line-height: 20px;} .impact-calculator .ui-slider-handle{ height: 20px !important; width: 20px !important; top: -.2em !important; margin-left: -.325em !important; background: none !important; background-color: #85C09F !important; border: none !important;} .impact-calculator{ max-width: 700px; margin: 0 auto;} .calculator-results{ text-align: center; width: 100%; margin: 80px auto 0;} .calculator-results:after{ clear: both; display: table; content: "";} .calculator-results .calculation{ width: 50%; float: left;} .calculation h3{ font-family: "poppinsmedium"; text-transform: uppercase; font-size: 21px;} .calculation .calc-number{ font-family: bebas_neueregular; font-size: 72px; line-height: 60px; margin: 10px auto 0} .calculation .units{ font-size: 16px; line-height: 24px; margin: 5px auto 0;} .calculator-label{ font-size: 18px; text-transform: uppercase;} .calculator-disclaimer{ font-size: 12px; line-height: 18px; margin-top: 30px !important;} /* Home Content */ .home .content{ color: #003151;} .page-section{ position: relative;} .bkg-green{ background-color: #85C09F;} .bkg-blue{ background-color: #003151; color: #fff;} @media all and (orientation: landscape) and (max-width: 850px) { .lity-iframe-container{padding: 0 !important;height: 100vh !important;} } @media all and (orientation: portrait) and (max-width: 767px) { .lity-iframe-container{padding: 0 !important;height: 100vh !important;} } @media only screen and (min-width: 1251px){ .hide-menu-desktop{ display: none; } } .hero, .fwimg{ height: 800px; background-size: cover; background-position: center center; position: relative; margin-bottom: 150px;} .hero .wrapper, .fwimg .wrapper{ position: absolute; left: 0; right: 0; margin: 0 auto; bottom: -85px;} .hero h1, .fwimg h2{ color: #fff; text-transform: uppercase;} .hero h1 span, .fwimg h2 span{ padding: 5px 25px; display: block; float: left; clear: both; width: auto; margin-bottom: 15px;} .cta-text{ font-family: 'poppinslight'; padding-bottom: 130px;} .cta-text .cta-intro, .cta-button .btn-intro{ width: 50%; float: left; font-size: 34px; line-height: 42px;} .cta-text .cta-intro p{ margin: 0;} .cta-text .cta-link, .cta-button .btn-link{ width: 48%; float: right; text-align: right; font-size: 28px; text-transform: uppercase; font-family: 'poppinsmedium'; border-top: 5px solid #A5D3ED; padding-top: 25px; margin-top: 24px;} .cta-text .cta-link a{ text-decoration: none; color: #003151;} .cta-text .cta-link a:hover, .cta-text .cta-link a span{ color: #85C09F;} .overlay{ background-size: cover; background-position: center center; text-align: center; color: #fff; font-size: 34px; line-height: 60px;} .home .overlay{ padding: 200px 0;} .overlay p{ max-width: 900px; margin: 30px auto 0;} .overlay h2 span, .impact-form h2 span, .posts h2 span{ background-color: #E0F0E5; color: #003151; padding: 5px 10px;} .overlay .overlay-container{ width: 100%; height: 100%; background: rgba(0,49,81,.75); padding: 200px 0; top: 0; left: 0;} .impact{ text-align: center; margin: -130px 0 90px;} .impact-stat{ width: 32%; float: left; background-color: #E0F0E5; padding: 30px 0; min-height: 260px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; flex-direction: column;} .impact-stat:nth-of-type(even){ margin: 0 2%;} .impact-stat .lead{ font-family: bebas_neueregular, Helvetica, Arial, sans-serif; font-size: 32px; color: #107A4D; text-transform: uppercase; font-weight: 400;} .impact-stat h3{ color: #003151; margin: 10px 0;} .impact-stat p{ margin: 0;} .impact-form{ text-align: center; font-size: 28px; line-height: 50px; margin-bottom: 150px;} .impact-form p{ max-width: 920px; margin: 15px auto 0;} .fwimg h2{ font-size: 125px;} .imgtext{ display: flex;} .imgtext-content, .imgtext-image{ width: 50%;} .imgtext-image{ background-size: cover; background-position: center center; position: relative;} .imgtext-image a{ display: block; position: absolute; width: 100%; height: 100%;} .imgtext-content{ box-sizing: border-box; padding: 110px 5%; font-size: 20px; line-height: 40px;} .imgtext-content h2{ font-size: 60px;} .imgtext-content.bkg-green{ background-color: #107A4D; color: #fff;} .imgtext-content.bkg-navy{ background-color: #003151; color: #fff;} .imgtext-content.bkg-navy .button{ background-color: #85C09F;} .imgtext-content .button{ margin-top: 30px;} .imgtext-content p{ margin-top: 0;} .posts{ padding: 110px 0 120px;} .posts h2{ text-align: center; text-transform: uppercase;} .posts .more{ text-align: center; display: block; margin-top: 90px;} .posts .more a{ text-transform: uppercase; font-family: 'poppinsregular'; font-size: 25px; color: #003151; letter-spacing: .04em; text-decoration: none;} .posts .more a:hover{ color: #85C09F;} .posts .posts-grid{ text-align: center; margin-top: 70px;} .posts .post{ width: 30%; display: inline-block; text-align: left; vertical-align: top;} .posts .post:nth-of-type(2){ margin: 0 1.5%;} .posts .post .post-image{ background-size: cover; background-position: center center; margin-bottom: 40px; position: relative;} .posts .post .post-image a{ position: absolute; height: 100%; width: 100%;} .posts .post .post-image:after{ display: block; content: ""; padding-bottom: 65%;} .posts .post h3{ font-size: 28px; font-family: "Poppins", Helvetica, Arial, sans-serif;} .posts .post h3 a{ color: #003151;} .posts .post:hover h3 a{ color: #85C09F;} .page-id-2 .posts .post p{ line-height: 26px;} .cta-button{ margin-bottom: 100px;} .cta-button .btn-link{ border: none; padding: 0;} .half-columns .column{ width: 48%; float: left;} .half-columns .column:nth-of-type(2){ float: right;} .intro p{ font-size: 20px; line-height: 40px; text-align: center; max-width: 1000px; margin: 120px auto 140px;} .flexible-content .cta-link{ color: #003151;} .flexible-content .cta-link a{ color: #85C09F;} .flexible-content .cta-link a:hover{ color: #003151;} .basic-content{ padding-bottom: 100px; line-height: 32px;} /* Single Post */ .featuredimg{ height: 650px; width: 100%; background-size: cover; background-position: center center; position: relative; margin-bottom: 80px;} .featuredimg .featured-overlay{ position: absolute; top: 0; left: 0; height: 650px; width: 100%; background: rgba(0,49,81,.5);} .featuredimg .featured-overlay.no-overlay{ background: rgba(0,49,81,0) !important;} .meta{ font-size: 18px; margin-bottom: 25px; color: #2B2B2B;} .meta p{ margin: 0;} .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6{ margin-top: 30px;} .entry-content h2{ font-size: 36px; text-transform: uppercase;} .entry-content h3{ font-size: 30px;} .entry-content h4{ font-size: 24px;} .single-post article{ max-width: 1000px; margin: 0 auto;} .single-post h1{ font-size: 72px; color: #fff; display: inline; padding: 5px 10px; background-color: #85C09F; box-shadow: 10px 0 0 #85C09F, 10px 0 0 #85C09F; box-decoration-break: clone;} .single-post .post-share{ clear: both; display: flex; align-items: center; margin-top: 30px;} .single-post .post-share span{ text-transform: uppercase; font-size: 14px;} .single-post .post-share ul{ display: inline-block; margin: 0 0 0 10px;} .single-post .post-share li, .single-post .post-signoff ul li{ display: inline-block;} .single-post .post-share li a, .single-post .post-signoff ul li a{ width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; background-color: #003151; color: #fff; border-radius: 100px;} .single-post .post-share li a:hover, .single-post .post-signoff ul li a:hover{ background-color: #85C09F;} .single-post .entry-content{ font-size: 18px; line-height: 32px; color: #2B2B2B; margin-top: 40px; padding-top: 15px; border-top: 3px solid #A5D3ED;} .single-post .post-signoff{ margin: 60px 0 100px; background-color: #E0F0E5;} .single-post .post-signoff .signoff-container{ padding: 55px 80px;} .single-post .post-signoff .signoff-container:after{ clear: both; display: table; content: "";} .single-post .post-signoff span{ font-size: 40px; line-height: 40px; font-family: bebas_neueregular, Helvetica, Arial, sans-serif; font-weight: 400; text-transform: uppercase; color: #003151; display: block; float: left;} .single-post .post-signoff ul{ margin: 4px 0 0; float: right;} .related{ background-color: #EEEEEE; padding: 150px 0; text-align: center;} .related .wrapper{ max-width: 1200px;} .related h2{ color: #003151; margin-bottom: 120px;} .related .related-post{ width: 30.333%; display: inline-block; background-size: cover; background-position: center center; position: relative;} .related .related-post:after{ display: block; padding-bottom: 56.25%; content: "";} .related .related-post:nth-of-type(2){ margin: 0 1.5%;} .related .related-post .related-overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5);} .related .related-post .related-overlay:hover{ background: rgba(0,0,0,.3);} .related h3{ font-size: 20px; position: absolute; bottom: 20px; margin: 0 50px;} .related a{ color: #fff; display: block; position: absolute; width: 100%; height: 100%;} .spacer{ height: 100px; width: 100%; display: block;} /* Blog */ .featured-article{ height: 800px; background-size: cover; background-position: center center; position: relative; color: #fff; margin-bottom: 100px;} .featured-article .featured-overlay{ position: absolute; height: 100%; width: 100%; background: rgba(0,46,81,.5);} .featured-article h1{ font-size: 72px; max-width: 75%; color: #fff;} .featured-article h1 span{ line-height: 100px; display: inline; padding: 10px 20px; background-color: #85C09F; box-shadow: 10px 0 0 #85C09F, 10px 0 0 #85C09F; box-decoration-break: clone;} .featured-article p.lead{ font-size: 22px; font-family: 'poppinsmedium'; text-transform: uppercase; letter-spacing: .25em; margin-bottom: 35px;} .featured-article p.more{ text-transform: uppercase; font-family: 'poppinsmedium'; font-size: 28px; letter-spacing: .025em; margin-top: 60px;} .featured-article p.more a{ color: #fff;} .featured-article p.more a:hover{ color: #85C09F;} .featured-article .wrapper{ display: flex; flex-direction: column; justify-content: center; height: 800px;} .blog article{ max-width: 1000px; margin: 0 auto 90px; display: flex; align-items: center;} .blog article:after{ clear: both; display: table; content: "";} .blog .article-image{ width: 33%; float: left; background-size: cover; background-position: center center; margin-right: 5%;} .blog .article-image:after{ display: block; content: ""; padding-bottom: 70%;} .blog .article-content{ width: 61%; float: right; font-size: 18px; line-height: 28px;} .blog .article-content h2{ font-size: 36px; line-height: 40px;} .blog .article-content h2 a{ color: #003151;} .blog .article-content h2 a:hover{ color: #85C09F;} .article-wrapper{ margin-bottom: 70px;} .category .article-wrapper{ padding-top: 60px;} .category .article-wrapper h1{ text-align: center; margin-bottom: 60px;} .alm-load-more-btn{ background-color: #85C09F !important; height: auto !important; border-radius: 0 !important;} .alm-load-more-btn:hover{ background-color: #003151 !important;} .alm-btn-wrap .alm-load-more-btn.done{ opacity: 1 !important;} /* Pledge */ .pledge .intro p{ font-size: 34px; line-height: 60px;} .form-embed{ width: 90%; max-width: 1000px; margin: 120px auto; color: #003151;} .form-embed .gform_description{ text-align: center; font-size: 20px line-height: 40px; font-family: 'poppinslight';} .form-embed .gform_body .ginput_container_text input, .form-embed .gform_body .ginput_container_email input, .form-embed .gform_body textarea{ background-color: #eee; padding: 15px !important; margin: 0 !important; border: none !important; font-size: 16px !important; -webkit-appearance: none;} .form-embed .gform_body select{ -webkit-appearance: none; background: none; border: none; background-color: #eee; font-size: 16px !important; padding: 15px !important;} .form-embed #field_1_6{ margin-top: 45px !important;} .form-embed .gfield_label, .form-embed .gchoice_select_all, .form-embed .gform_wrapper ul.gfield_checkbox li input[type="checkbox"]:checked + label, .form-embed .gform_wrapper ul.gfield_radio li input[type="radio"]:checked + label{ font-family: 'poppinsmedium';} .form-embed .gform_button{ display: inline-block; font-family: bebas_neueregular, Helvetica, Arial, sans-serif; font-size: 20px !important; line-height: 20px !important; padding: 15px 25px !important; color: #fff; background-color: #85C09F; text-decoration: none; border: none;} .form-embed .gform_button:hover{background-color: #003151;} /* Media queries */ @media (max-width: 1800px) { h1, .fwimg h2{ font-size: 100px;} .hero .wrapper, .fwimg .wrapper{ bottom: -80px;} .cta-text .cta-link, .cta-button .btn-link, .posts .more a{ font-size: 22px;} .btn-intro h3{ font-size: 50px;} } @media (max-width: 1400px) { .header .nav a{ font-size: 16px;} } @media (max-width: 1060px) { .announcement{ font-size: 16px; line-height: 16px; padding: 15px 0;} } @media (max-width: 900px) { h1, .fwimg h2, .featured-article h1{ font-size: 60px;} .button{ display: block; text-align: center;} .hero, .fwimg, .featured-article, .featured-article .wrapper{ height: 550px;} .hero .wrapper, .fwimg .wrapper{ bottom: -50px;} .cta-text .cta-intro, .cta-button .btn-intro, .cta-text .cta-link, .cta-button .btn-link{ width: 100%; float: none;} .cta-text .cta-intro, .cta-button .btn-intro{ margin-bottom: 30px;} .cta-text .cta-link, .cta-button .btn-link{ text-align: center;} .impact-stat{ width: 100%; float: none; margin: 0 auto 15px !important;} .imgtext{ display: block;} .imgtext-content, .imgtext-image{ width: 100%; box-sizing: border-box;} .imgtext-image:after{ display: block; content: ""; padding-bottom: 100%;} .posts .post{ width: 100%; display: block; margin: 0 auto 45px !important;} .posts .post .post-image{ margin-bottom: 15px;} .footer{ background-image: none; padding: 60px 0 90px; text-align: center;} .footer-left, .footer-right{ width: 100%; float: none; padding: 0;} .footer-left{ margin-bottom: 45px;} .footer .credits, .footer .social{ margin-top: 30px;} .featured-article h1{ max-width: 100%;} .blog article{ display: block;} .blog .article-image, .blog .article-content{ width: 100%; float: none;} .blog .article-image{ margin-bottom: 15px;} .single-post .post-signoff span, .single-post .post-signoff ul{ float: none; text-align: center;} .single-post .post-signoff ul{ margin-top: 15px;} .related .related-post{ width: 100%; display: block; margin: 0 auto 30px !important;} .header{ padding: 75px 0 15px;} .cta-text .cta-intro, .cta-button .btn-intro{ width: 100%; float: none; font-size: 24px; line-height: 30px;} .impact-form, .overlay{ font-size: 24px; line-height: 30px;} .intro p{ text-align: left;} @media (max-width: 600px) { /* .hero, .fwimg, .featured-article, .featured-article .wrapper{ height: 350px;} */ .featuredimg .featured-overlay{height: 350px;} } } .featuredimg .featured-overlay{height: 450px;} .video-container{position:relative;padding-bottom:56.25%;padding-top:25px;height:0}.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%}