Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
\r\n//Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
\r\n//Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
\r\n//Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
\r\n//Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
\r\n//Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
\r\n//\r\n// Weight: -99\r\n//\r\n// Styleguide Typography.Headers\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\n.h1,\r\n.h2,\r\n.h3,\r\n.h4,\r\n.h5,\r\n.h6 {\r\n margin: 0 0 25px;\r\n font-family: $header-font;\r\n @include font-weight(400);\r\n line-height: 1.35;\r\n color: $header-color;\r\n transition: font-size $ts $te;\r\n\r\n a {\r\n text-decoration: none;\r\n }\r\n\r\n &.-line,\r\n &.-line-centered {\r\n @include htag-line;\r\n }\r\n\r\n &.-line-centered {\r\n text-align: center;\r\n\r\n &::before {\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n }\r\n\r\n &.-flush {\r\n margin-bottom: 5px;\r\n }\r\n\r\n &.-dark {\r\n color: $header-color;\r\n }\r\n}\r\n\r\nh1,\r\n.h1 {\r\n @include rem(font-size, 36px);\r\n @include font-weight(300);\r\n\r\n @include from(10) {\r\n @include rem(font-size, 45px);\r\n }\r\n}\r\n\r\nh2,\r\n.h2 {\r\n @include rem(font-size, 28px);\r\n color: primary-color(green);\r\n @include font-weight(300);\r\n\r\n @include from(10) {\r\n @include rem(font-size, 34px);\r\n }\r\n\r\n &.-small {\r\n @include rem(font-size, 30px);\r\n }\r\n\r\n &.-blue {\r\n color: primary-color(navy);\r\n }\r\n}\r\n\r\nh3,\r\n.h3 {\r\n @include rem(font-size, 20px);\r\n color: primary-color(gray, shade1);\r\n @include font-weight(400);\r\n\r\n @include from(10) {\r\n @include rem(font-size, 24px);\r\n }\r\n\r\n &.-promo-header {\r\n margin-bottom: 10px;\r\n color: primary-color(emerald);\r\n }\r\n\r\n &.-thick {\r\n @include font-weight(500);\r\n color: primary-color(gray);\r\n\r\n @include from(10) {\r\n @include rem(font-size, 26px);\r\n }\r\n }\r\n}\r\n\r\nh4,\r\n.h4 {\r\n @include rem(font-size, 17px);\r\n color: primary-color(gray, tint1);\r\n @include font-weight(700);\r\n\r\n @include from(10) {\r\n @include rem(font-size, 18px);\r\n }\r\n}\r\n\r\nh5,\r\n.h5 {\r\n text-transform: uppercase;\r\n}\r\n\r\nh5,\r\nh6,\r\n.h5,\r\n.h6 {\r\n @include rem(font-size, 16px);\r\n @include font-weight(700);\r\n color: primary-color(gray);\r\n}\r\n\r\nh6 {\r\n margin-bottom: 5px;\r\n}\r\n\r\n// Paragraphs\r\n//\r\n// Wrapper:\r\n// max-width: 700px;\r\n//\r\n// Markup:\r\n//Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
\r\n//Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Donec elementum ligula eu sapien consequat eleifend.
\r\n//Donec nec dolor erat, condimentum sagittis sem. Praesent porttitor porttitor risus, dapibus rutrum ipsum gravida et. Integer lectus nisi, facilisis sit amet eleifend nec, pharetra ut augue. Integer quam nunc, consequat nec egestas ac, volutpat ac nisi.
\r\n//\r\n// Weight: -98\r\n//\r\n// Styleguide Typography.Paragraphs\r\np {\r\n @include rem(font-size, 16px);\r\n line-height: 1.75;\r\n margin: 0 0 25px;\r\n color: primary-color(gray);\r\n\r\n &:last-child {\r\n margin-bottom: 0;\r\n }\r\n}\r\n\r\n\r\n// Unordered Lists\r\n//\r\n// Wrapper:\r\n// max-width: 700px;\r\n//\r\n// Markup:\r\n//Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
\r\n//Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
\r\n//Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
\r\n//\r\n// Those people who think they know everything are a great annoyance to those of us who do.\r\n// Isaac Asimov\r\n//\r\n//\r\n// Weight: -95\r\n//\r\n// Styleguide Typography.Blockquotes\r\nblockquote {\r\n padding: 8px 24px;\r\n border-left: 2px solid $hr-color;\r\n margin: 0 0 16px;\r\n\r\n cite {\r\n display: block;\r\n color: primary-color(gray, tint1);\r\n @include rem(font-size, 13px);\r\n padding-top: 8px;\r\n\r\n &::before {\r\n content: '— ';\r\n }\r\n }\r\n}\r\n\r\n.wysiwyg-content {\r\n // margin-bottom: 30px;\r\n overflow-wrap: break-word;\r\n word-wrap: break-word;\r\n\r\n p {\r\n\r\n &.-list-header {\r\n margin-bottom: 5px;\r\n }\r\n\r\n &.-small {\r\n @include rem(font-size, 13px);\r\n }\r\n }\r\n\r\n .img {\r\n margin: 40px auto;\r\n }\r\n\r\n .img-left,\r\n .img-right,\r\n .align-left,\r\n .align-right,\r\n .img-center,\r\n .align-center {\r\n margin: 0 0 20px;\r\n\r\n @include from(5) {\r\n float: left;\r\n width: 50%;\r\n margin: 0 30px 20px 0;\r\n }\r\n\r\n @include between(9, 10) {\r\n width: 100%;\r\n margin: 0 0 20px;\r\n }\r\n\r\n @include from(11) {\r\n width: auto;\r\n max-width: 385px;\r\n }\r\n\r\n @include from(13) {\r\n margin-right: 50px;\r\n }\r\n }\r\n\r\n .img-center {\r\n width: 100%;\r\n max-width: none;\r\n }\r\n\r\n .img-right,\r\n .align-right {\r\n\r\n @include from(5) {\r\n float: right;\r\n margin: 0 0 20px 30px;\r\n }\r\n\r\n @include from(13) {\r\n margin-left: 70px;\r\n }\r\n }\r\n\r\n .img-center,\r\n .align-center {\r\n margin-top: 40px;\r\n margin-bottom: 40px;\r\n\r\n @include from(5) {\r\n float: none;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n }\r\n\r\n strong {\r\n\r\n &.-green {\r\n color: primary-color(emerald);\r\n }\r\n }\r\n}\r\n\r\n.-new-win {\r\n @include icon(new-win, after) {\r\n margin-left: 5px;\r\n @include rem(font-size, 14px);\r\n };\r\n}\r\n\r\n.bold-caps {\r\n @include font-weight(600);\r\n text-transform: uppercase;\r\n}\r\n\r\n.-flag {\r\n display: inline-block;\r\n padding: 6px 8px;\r\n background-color: #127c68;\r\n @include rem(font-size, 13px);\r\n @include font-weight(500);\r\n color: primary-color(white);\r\n}\r\n\r\n.abbrev {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 26px;\r\n height: 26px;\r\n background-color: rgba(primary-color(blue, tint4), .35);\r\n border-radius: 50%;\r\n @include rem(font-size, 9px);\r\n @include font-weight(700);\r\n}\r\n\r\n.message-total-number,\r\n.cart-total-number {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 17px;\r\n height: 17px;\r\n background-color: primary-color(red, tint1);\r\n @include rem(font-size, 13px);\r\n border-radius: 50%;\r\n transition: background-color $ts $te;\r\n}\r\n\r\n// keyword search mark\r\nmark {\r\n background-color: lighten(primary-color(emerald), 10%);\r\n color: primary-color(white);\r\n}\r\n\r\nstrike {\r\n\r\n &.-yellow,\r\n &.-gray {\r\n background-color: primary-color(light-gray);\r\n }\r\n}\r\n\r\n.-alert,\r\n.red {\r\n color: primary-color(red, tint1);\r\n}\r\n\r\n.-highlight {\r\n font-weight: normal;\r\n background-color: primary-color(gold, tint1);\r\n}\r\n\r\n// small cap style for markup that needs to be: Make This Small Caps\r\n.-small-caps {\r\n text-transform: uppercase;\r\n font-variant: all-small-caps;\r\n @include rem(font-size, 14px);\r\n\r\n .practice-bulletin-disclaimer & {\r\n @include rem(font-size, 13px);\r\n }\r\n}\r\n","@mixin htag-line($center: null, $color: primary-color(gray, shade1), $line-color: primary-color(gold), $width: 55px) {\r\n @include font-weight(300);\r\n color: $color;\r\n\r\n @if $center {\r\n text-align: center;\r\n }\r\n\r\n &::before {\r\n content: '';\r\n display: block;\r\n width: $width;\r\n height: 3px;\r\n margin-bottom: 15px;\r\n @if $center {\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n background-color: $line-color;\r\n }\r\n}\r\n","$error-color: lighten(primary-color(red), 15%);\r\n\r\nfieldset {\r\n padding: 0;\r\n border: 0;\r\n margin: 0;\r\n\r\n legend {\r\n display: block;\r\n width: 100%;\r\n }\r\n}\r\n\r\nlabel {\r\n display: block;\r\n padding: 10px 0;\r\n @include rem(font-size, 16px);\r\n @include font-weight(500);\r\n color: primary-color(gray, shade1);\r\n\r\n &.-has-info {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n\r\n a {\r\n @include font-weight(400);\r\n color: primary-color(blue);\r\n @include rem(font-size, 13px);\r\n\r\n @include from(6) {\r\n @include rem(font-size, 16px);\r\n }\r\n }\r\n }\r\n}\r\n\r\n.error-message {\r\n color: $error-color;\r\n @include rem(font-size, 16px);\r\n @include font-weight(400);\r\n margin-top: -5px;\r\n margin-bottom: 15px;\r\n}\r\n\r\n.-ecommerce {\r\n .error-message {\r\n margin-top: 5px;\r\n margin-bottom: 10px;\r\n }\r\n}\r\n\r\n\r\n// Input Fields\r\n//\r\n// :focus - Focus state\r\n//\r\n// Markup:\r\n// \r\n// \r\n// \r\n// \r\n// \r\n// \r\n//\r\n// Weight: -99\r\n//\r\n// Styleguide Forms.Input Fields\r\ninput[type='text'],\r\ninput[type='email'],\r\ninput[type='password'],\r\ninput[type='search'],\r\ninput[type='tel'],\r\ninput[data-toggle='datepicker'],\r\nselect,\r\ntextarea,\r\n.acog-datepicker {\r\n display: block;\r\n width: 100%;\r\n color: primary-color(gray);\r\n font-size: 16px; // leave at mobile sizes to prevent iphone zoom\r\n padding: 12px 15px;\r\n background-color: primary-color(light-gray, tint2);\r\n border: 1px solid primary-color(gray, tint3);\r\n border-radius: $border-radius;\r\n box-shadow: none;\r\n margin: 0 0 15px;\r\n outline: 0;\r\n -webkit-appearance: none;\r\n transition: background-color $ts $te;\r\n\r\n @include from(6) {\r\n @include rem(font-size, 14px);\r\n }\r\n\r\n &::placeholder {\r\n color: #6e6e6e;\r\n }\r\n\r\n &:focus {\r\n background-color: darken(primary-color(light-gray, tint1), 3%);\r\n outline: 1px solid primary-color(green);\r\n border-color: primary-color(green);\r\n\r\n &::placeholder {\r\n color: primary-color(gray);\r\n opacity: .9;\r\n }\r\n }\r\n\r\n &.-invalid {\r\n color: $error-color;\r\n border: 1px solid $error-color;\r\n outline-color: $error-color;\r\n }\r\n}\r\n\r\ntextarea {\r\n min-height: 100px;\r\n resize: vertical;\r\n}\r\n\r\n// Select Elements\r\n//\r\n// :focus - Focus state\r\n//\r\n// Markup:\r\n// \r\n//\r\n// Weight: -98\r\n//\r\n// Styleguide Forms.Select Elements\r\nselect {\r\n display: block;\r\n background-color: primary-color(light-gray, tint1);\r\n background-image: url('../images/select-arrow-down.svg');\r\n background-repeat: no-repeat;\r\n background-position: right 15px center;\r\n text-decoration: none;\r\n appearance: none;\r\n padding: 12px 35px 12px 15px;\r\n\r\n &:hover {\r\n cursor: pointer;\r\n }\r\n\r\n &:-moz-focusring {\r\n color: transparent;\r\n text-shadow: 0 0 0 primary-color(gray, tint1);\r\n }\r\n\r\n // for IE 11\r\n &::-ms-expand {\r\n display: none;\r\n }\r\n\r\n &.-green {\r\n border: 0;\r\n background-color: #127c68;\r\n background-image: url('../images/select-arrow-down-white-green.svg');\r\n background-position: right;\r\n padding-right: 70px;\r\n color: primary-color(white);\r\n @include font-weight(700);\r\n }\r\n}\r\n\r\n// Checkboxes\r\n//\r\n// Markup:\r\n//
src/js/form-validation.js for more info or visit Hyperform's documentation here.\r\n//\r\n// Markup:\r\n// \r\n// \r\n// \r\n// \r\n// \r\n// \r\n// \r\n// \r\n// \r\n// \r\n// \r\n// \r\n// \r\n// \r\n// \r\n// \r\n// \r\n// \r\n// This is a standard link
![\"\"](\"/images/fpo/event-cards/dots.jpg\")
On Demand
\r\n//\r\n// $25 Junior Fellows in Training
$70 Fellows
$90 Non-members\r\n//
On Demand
\r\n//\r\n// $25 Junior Fellows in Training
$70 Fellows
$90 Non-members\r\n//
![\"\"](\"/images/fpo/event-cards/earth.jpg\")
On Demand
\r\n//\r\n// $25 Junior Fellows in Training
$70 Fellows
$90 Non-members\r\n//
![\"\"](\"/images/fpo/event-cards/green.jpg\")
On Demand
\r\n//\r\n// $25 Junior Fellows in Training
$70 Fellows
$90 Non-members\r\n//
![\"\"](\"/images/fpo/event-cards/leopards.jpg\")
On Demand
\r\n//\r\n// $25 Junior Fellows in Training
$70 Fellows
$90 Non-members\r\n//
![\"\"](\"/images/fpo/event-cards/trees.jpg\")
On Demand
\r\n//\r\n// $25 Junior Fellows in Training
$70 Fellows
$90 Non-members\r\n//
![\"\"](\"/images/fpo/event-cards/water.jpg\")
On Demand
\r\n//\r\n// $25 Junior Fellows in Training
$70 Fellows
$90 Non-members\r\n//
![\"\"](\"/images/fpo/event-cards/woods.jpg\")
On Demand
\r\n//\r\n// $25 Junior Fellows in Training
$70 Fellows
$90 Non-members\r\n//
On Demand
\r\n//\r\n// $25 Junior Fellows in Training
$70 Fellows
$90 Non-members\r\n//
![\"\"](\"/images/fpo/event-cards/turtle.jpg\")
On Demand
\r\n//![\"\"](\"/images/fpo/event-cards/chair.jpg\")
On Demand
\r\n//![\"\"](\"/images/fpo/event-cards/cow.jpg\")
On Demand
\r\n//![\"\"](\"/images/fpo/event-cards/dog.jpg\")
On Demand
\r\n//![\"Teaser\"](\"/images/fpo/teaser-1.jpg\")
\r\n// ![\"Teaser\"](\"/images/fpo/teaser-2.jpg\")
\r\n// ![\"Teaser\"](\"/images/fpo/teaser-3.jpg\")
\r\n// ![\"Teaser\"](\"/images/fpo/teaser-4.jpg\")
\r\n// ![\"Teaser\"](\"/images/fpo/teaser-5.jpg\")
\r\n// ![\"Teaser\"](\"/images/fpo/teaser-6.jpg\")
\r\n//