/***************************************************************************************************************
    Dear Dev Pros,

    Only add non-renderable SASS in this file (no CSS selectors), otherwise any CSS will be rendered
    into any file that includes this one (spoiler alert: most files include this file)
****************************************************************************************************************/
body { font-family: aaux-next, sans-serif; font-style: normal; }

h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.5; }

h1, h2, h3 { padding-top: 20px; padding-bottom: 10px; }

h4, h5, h6 { padding-top: 10px; padding-bottom: 10px; }

h1 { font-family: Georgia, serif; font-size: 51px; }

h2 { font-family: cinque-donne, serif; font-weight: 700; font-size: 75px; line-height: 1; }

h3 { font-family: Georgia, serif; font-size: 38px; }

h4 { font-family: cinque-donne, serif; font-weight: 700; font-size: 38px; line-height: 1; }

h4.larger { font-size: 50px; }

h5 { font-family: aaux-next, sans-serif; font-style: normal; font-weight: 700; font-size: 18px; text-transform: uppercase; }

p { font-family: aaux-next, sans-serif; font-style: normal; line-height: 1.4; font-size: 18px; letter-spacing: 0.6px; }

a { color: #00b683; }

a:hover { color: #00b683; text-decoration: none; }

/*p {
    line-height: 1.8;
}*/
/* Content */
.content img { display: block; max-width: 100%; height: auto; margin-top: 1em; margin-bottom: 1em; float: none; }

.content img.leftAlone { margin-right: 1em; float: left; }

.content img.center { margin-right: auto; margin-left: auto; }

.content img.left { margin-top: 0; margin-right: 1em; float: left; }

.content img.right { margin-top: 0; margin-left: 1em; float: right; }

/***************************************************************************************************************
    Dear Dev Pros,

    Only add non-renderable SASS in this file (no CSS selectors), otherwise any CSS will be rendered
    into any file that includes this one (spoiler alert: most files include this file)
****************************************************************************************************************/
.color-white { color: #fff !important; }

.color-white-hover:hover { color: #fff !important; }

.border-color-white { border-color: #fff !important; }

.bg-white { background: #fff !important; }

.bg-white-hover:hover { background: #fff !important; }

.color-dark { color: #4a4a4a !important; }

.color-dark-hover:hover { color: #4a4a4a !important; }

.border-color-dark { border-color: #4a4a4a !important; }

.bg-dark { background: #4a4a4a !important; }

.bg-dark-hover:hover { background: #4a4a4a !important; }

.color-grey { color: #f9f9f9 !important; }

.color-grey-hover:hover { color: #f9f9f9 !important; }

.border-color-grey { border-color: #f9f9f9 !important; }

.bg-grey { background: #f9f9f9 !important; }

.bg-grey-hover:hover { background: #f9f9f9 !important; }

.color-dark-grey { color: #6d6e71 !important; }

.color-dark-grey-hover:hover { color: #6d6e71 !important; }

.border-color-dark-grey { border-color: #6d6e71 !important; }

.bg-dark-grey { background: #6d6e71 !important; }

.bg-dark-grey-hover:hover { background: #6d6e71 !important; }

.color-black { color: #000 !important; }

.color-black-hover:hover { color: #000 !important; }

.border-color-black { border-color: #000 !important; }

.bg-black { background: #000 !important; }

.bg-black-hover:hover { background: #000 !important; }

.color-primary { color: #00b683 !important; }

.color-primary-hover:hover { color: #00b683 !important; }

.border-color-primary { border-color: #00b683 !important; }

.bg-primary { background: #00b683 !important; }

.bg-primary-hover:hover { background: #00b683 !important; }

.color-primary-darkened { color: #009269 !important; }

.color-primary-darkened-hover:hover { color: #009269 !important; }

.border-color-primary-darkened { border-color: #009269 !important; }

.bg-primary-darkened { background: #009269 !important; }

.bg-primary-darkened-hover:hover { background: #009269 !important; }

.color-accent { color: #00b683 !important; }

.color-accent-hover:hover { color: #00b683 !important; }

.border-color-accent { border-color: #00b683 !important; }

.bg-accent { background: #00b683 !important; }

.bg-accent-hover:hover { background: #00b683 !important; }

.color-blue { color: #1a8fce !important; }

.color-blue-hover:hover { color: #1a8fce !important; }

.border-color-blue { border-color: #1a8fce !important; }

.bg-blue { background: #1a8fce !important; }

.bg-blue-hover:hover { background: #1a8fce !important; }

.color-marine { color: #093856 !important; }

.color-marine-hover:hover { color: #093856 !important; }

.border-color-marine { border-color: #093856 !important; }

.bg-marine { background: #093856 !important; }

.bg-marine-hover:hover { background: #093856 !important; }

.color-dark-aqua { color: #085767 !important; }

.color-dark-aqua-hover:hover { color: #085767 !important; }

.border-color-dark-aqua { border-color: #085767 !important; }

.bg-dark-aqua { background: #085767 !important; }

.bg-dark-aqua-hover:hover { background: #085767 !important; }

.h-cursor-pointer:hover { cursor: pointer; }

.no-underline { text-decoration: none; }

.no-underline:hover { text-decoration: none; }

.transition-short { -webkit-transition: all 0.15s; -o-transition: all 0.15s; transition: all 0.15s; }

.italic { font-style: italic; }

.content-break { margin-top: 25px; margin-bottom: 25px; }

.overlay { position: relative; height: 100%; pointer-events: none; }

.overlay::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: 1s; -o-transition: 1s; transition: 1s; background: url("../images/overlay-pattern.svg") rgba(0, 0, 0, 0.39) repeat; background-size: 14px 14px; content: ""; }

.g-recaptcha { margin: 0 0 30px 30px; }

.circle { display: block; border-radius: 500px; text-align: center; }

.circle.small { width: 40px; height: 40px; line-height: 40px; font-size: 20px; }

.circle.small .fa { position: relative; right: -1px; }

.circle.large { width: 49px; height: 49px; line-height: 49px; font-size: 22px; }

.site-notice { border-radius: 0; z-index: 0; }

.site-notice .close { top: 10px; }

@media (min-width: 768px) { .container { width: 100%; }
  .line-spacing { margin-bottom: 26px; } }

@media (min-width: 992px) { .content-break { margin-bottom: 50px; }
  .line-spacing { margin-bottom: 0; }
  .container { width: 970px; }
  .max-container-width { width: 970px; margin: 0 auto; }
  .flex-row { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; }
  .flex-item { -ms-flex-preferred-size: 50%; flex-basis: 50%; }
  .flex-item-image-right { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } }

/***************************************************************************************************************
    Dear Dev Pros,

    Only add non-renderable SASS in this file (no CSS selectors), otherwise any CSS will be rendered
    into any file that includes this one (spoiler alert: most files include this file)
****************************************************************************************************************/
header { position: relative; }

header .logo { height: 115px; }

header .logo img { height: 115px; width: auto; display: block; }

.header-banner { z-index: -1; position: relative; background-size: cover; background-position: center; height: 100vh; max-height: 500px; }

@media (min-width: 992px) { .header-banner { max-height: 600px; } }

.header-banner .overlay.no-image { min-height: 400px; background: #00b683; }

.header-banner .overlay.no-image::after { background: rgba(0, 0, 0, 0.1); }

.logo-container { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 0; left: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; z-index: 2; }

@media (min-width: 768px) { .logo-container { display: block; top: 0; } }

@media (min-width: 768px) { header::before { background: url("../images/branch-curve-down-right.png") top left no-repeat; background-size: contain; position: absolute; width: 30%; min-width: 300px; height: 100%; max-width: 500px; z-index: 1; content: ' '; }
  header .logo { height: 168px; margin: 25px 0; }
  header .logo img { height: 138px; }
  header .page-title { position: absolute; top: 0; width: 100%; height: 100%; padding-top: 168px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: 1.5px; }
  header .page-title h1 { text-transform: uppercase; } }

/***************************************************************************************************************
    Dear Dev Pros,

    Only add non-renderable SASS in this file (no CSS selectors), otherwise any CSS will be rendered
    into any file that includes this one (spoiler alert: most files include this file)
****************************************************************************************************************/
.button-and-menu-container { top: 1.5rem; left: 0; z-index: 3; font-size: 21px; }

.button-and-menu-container .btn { font-size: 21px; }

.menu-trigger-container.open { background: #093856; background: -webkit-gradient(linear, left top, left bottom, from(#093856), color-stop(75%, #093856), to(rgba(9, 56, 86, 0))); background: -webkit-linear-gradient(top, #093856 0%, #093856 75%, rgba(9, 56, 86, 0) 100%); background: -o-linear-gradient(top, #093856 0%, #093856 75%, rgba(9, 56, 86, 0) 100%); background: linear-gradient(180deg, #093856 0%, #093856 75%, rgba(9, 56, 86, 0) 100%); width: 100%; height: 90px; position: fixed; top: 0; right: 0; z-index: 11; }

@media (min-width: 768px) { .menu-trigger-container.open { background: transparent; } }

.menu-trigger { font-family: Georgia, serif; text-transform: uppercase; line-height: 49px; font-size: 21px; background: transparent; border: 0; position: absolute; top: 1.5rem; right: 1.5rem; z-index: 3; }

.menu-trigger .circle { background: #00b683; color: #fff; -webkit-transition: background-color 0.15s, color 0.15s; -o-transition: background-color 0.15s, color 0.15s; transition: background-color 0.15s, color 0.15s; }

.menu-trigger:hover .circle { background: #009269; }

.menu-trigger .menu-trigger-icon-open { display: inline; }

.menu-trigger .menu-trigger-icon-close { display: none; }

.menu-trigger.open { z-index: 11; }

.menu-trigger.open .menu-trigger-icon-open { display: none; }

.menu-trigger.open .menu-trigger-icon-close { display: inline; }

#nav-menu { height: 0; }

#nav-menu.open { height: auto; }

#nav-menu.open .nav-container { height: 100vh; opacity: 1; padding: 1.5rem 0; }

.nav-main { padding-bottom: 3rem; }

.nav-main-top-link { color: #00b683; border-bottom: solid 1px #085767; -webkit-transition: color 0.15s, border-bottom-color 0.15s; -o-transition: color 0.15s, border-bottom-color 0.15s; transition: color 0.15s, border-bottom-color 0.15s; }

.nav-main-top-link:hover { color: #fff; border-bottom: solid 1px #00b683; }

.nav-main-sub-menu { display: none; }

.nav-main-sub-menu.nav-main-sub-menu-open { display: block; }

.nav-main-sub-menu-link { color: #fff; }

.nav-main-sub-menu-trigger { position: absolute; top: 1.1rem; right: 0; border: 0; background: transparent; color: #00b683; }

.nav-main-sub-menu-trigger .fa-plus { display: inline; }

.nav-main-sub-menu-trigger .fa-minus { display: none; }

.nav-main-sub-menu-trigger[aria-expanded='true'] .fa-plus { display: none; }

.nav-main-sub-menu-trigger[aria-expanded='true'] .fa-minus { display: inline; }

.nav-container { position: fixed; top: 0; left: 0; opacity: 0; height: 0; background-color: #093856; z-index: 10; overflow-y: auto; -webkit-transition: ease right 0.5s, ease opacity 0.3s; -o-transition: ease right 0.5s, ease opacity 0.3s; transition: ease right 0.5s, ease opacity 0.3s; }

.nav-container a { font-family: aaux-next, sans-serif; font-style: normal; font-weight: 700; font-size: 18px; letter-spacing: 1.1px; text-transform: uppercase; }

.nav-container .nav-close { position: absolute; top: 0; right: 0; display: none; }

.nav-container ul li { width: 100%; margin: 5px 0; }

.open .nav-container .nav-close { display: block; }

.menu-logo { height: 138px; width: auto; display: block; margin-top: 1px; }

/***************************************************************************************************************
    Dear Dev Pros,

    Only add non-renderable SASS in this file (no CSS selectors), otherwise any CSS will be rendered
    into any file that includes this one (spoiler alert: most files include this file)
****************************************************************************************************************/
/******************************************************************************
* Breadcrumbs
******************************************************************************/
.breadcrumbs { font-family: Georgia, serif; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; height: 50px; background-color: #00b683; color: #fff; font-size: 18px; }

.breadcrumbs i { margin: 0 5px; font-size: 4px; vertical-align: middle; }

.breadcrumbs a { font-family: aaux-next, sans-serif; font-style: normal; font-weight: 700; color: #fff; text-transform: uppercase; }

/***************************************************************************************************************
    Dear Dev Pros,

    Only add non-renderable SASS in this file (no CSS selectors), otherwise any CSS will be rendered
    into any file that includes this one (spoiler alert: most files include this file)
****************************************************************************************************************/
.footer-main { font-family: Georgia, serif; padding-top: 60px; padding-bottom: 50px; background: url("../images/branch-curve-left-down.png") 30% 100% no-repeat #093856; border-top: solid 4px #00b683; letter-spacing: 1.1px; }

.footer-main .heading { margin: 0 0 20px; }

@media (min-width: 1200px) { .footer-main .heading { font-size: 18px; } }

.footer-main p { font-family: Georgia, serif; }

.footer-main a { color: #fff; font-size: 18px; }

.footer-main a:focus, .footer-main a:active, .footer-main a:hover { color: #fff; }

.footer-main .social-icon { color: #fff; font-size: 17px; }

.footer-main .center-listing { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 300px; margin-bottom: 60px; }

@media (min-width: 768px) { .footer-main .center-listing { max-width: inherit; } }

@media (min-width: 1200px) { .footer-main .center-listing { padding: 0; } }

.footer-main .ruler { margin-top: 30px; margin-bottom: 30px; border: 1px solid #00b683; }

@media (min-width: 1200px) { .footer-main .ruler { margin: 0; width: 1px; } }

@media (min-width: 1400px) { .footer-main .ruler { margin: 0 30px; } }

.footer-main .circle { width: 40px; height: 40px; -webkit-box-flex: 0; -ms-flex: 0 0 40px; flex: 0 0 40px; }

@media (min-width: 768px) { .footer-main .center-holder { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 30px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; } }

.footer-main .footer-widths { max-width: none; }

@media (min-width: 768px) { .footer-main .footer-widths { max-width: 690px; } }

@media (min-width: 1200px) { .footer-main .footer-widths { width: 100%; max-width: 1400px; } }

.footer-main .footer-grid { display: grid; grid-auto-columns: 1fr; grid-gap: 30px; }

@media (min-width: 768px) { .footer-main .footer-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto 61px auto; }
  .footer-main .footer-grid .logo-holder { grid-area: 1 / 1 / 2 / 2; }
  .footer-main .footer-grid .hours-holder { grid-area: 1 / 2 / 2 / 3; }
  .footer-main .footer-grid .ruler { grid-area: 2 / 1 / 3 / 3; }
  .footer-main .footer-grid .center-holder { grid-area: 3 / 1 / 4 / 3; } }

@media (min-width: 1200px) { .footer-main .footer-grid { grid-template-columns: 1.3fr 0.7fr 1px 2fr; grid-template-rows: auto; grid-gap: 30px; }
  .footer-main .footer-grid .logo-holder { grid-area: 1 / 1 / 2 / 2; }
  .footer-main .footer-grid .hours-holder { grid-area: 1 / 2 / 2 / 3; }
  .footer-main .footer-grid .ruler { grid-area: 1 / 3 / 2 / 4; }
  .footer-main .footer-grid .center-holder { grid-area: 1 / 4 / 2 / 5; } }

@media (min-width: 1400px) { .footer-main .footer-grid { grid-template-columns: 1.3fr 0.7fr 61px 2fr; } }

@media (min-width: 768px) { footer { padding-bottom: 60px; }
  footer .heading { font-size: 16px; }
  footer h5 { font-size: 18px; }
  footer .social-icon { font-size: 26px; } }

/***************************************************************************************************************
    Dear Dev Pros,

    Only add non-renderable SASS in this file (no CSS selectors), otherwise any CSS will be rendered
    into any file that includes this one (spoiler alert: most files include this file)
****************************************************************************************************************/
.content img { max-width: 100%; height: auto; }

.content img.leftAlone { display: block; margin-right: 1em; float: none; clear: both; }

.content img.center { display: block; margin-right: auto; margin-left: auto; }

.content img.left { display: block; margin-top: 0; margin-right: 1em; float: left; }

.content img.right { display: block; margin-top: 0; margin-left: 1em; float: right; }

.content .page-title { position: relative; display: block; padding-top: 60px; padding-bottom: 30px; }

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { text-align: center; color: #4a4a4a; }

.content li { font-size: 18px; }

.personal-profile-content p { font-size: 16px; }

.page-title { display: none; }

.icon-stack-icon { width: 80px; height: 80px; border-radius: 200px; border: solid 2px #00b683; background: #f8f9fa; }

.icon-stack-icon svg { width: 32px; height: auto; }

.icon-stack-icon path { fill: #00b683; stroke: none; }

.icon-stack-icon-container h5 { color: #00b683; }

.bg-light .icon-stack-icon { background: transparent; }

.bg-light .icon-stack-icon path { fill: #093856; }

.bg-marine, .bg-dark, .bg-dark-aqua { color: #fff; }

.bg-marine .content *, .bg-dark .content *, .bg-dark-aqua .content * { color: #fff; }

.bg-marine .icon-stack-icon, .bg-dark .icon-stack-icon, .bg-dark-aqua .icon-stack-icon { background: transparent; }

.bg-marine .icon-stack-icon path, .bg-dark .icon-stack-icon path, .bg-dark-aqua .icon-stack-icon path { fill: #fff; }

.bg-marine .icon-stack h5, .bg-dark .icon-stack h5, .bg-dark-aqua .icon-stack h5 { color: #fff; }

@media (min-width: 768px) { .content { padding: 0 10px; } }

@media (min-width: 1680px) { .element-container { position: relative; overflow: hidden; }
  .element-container::after { background: url("../images/branch-curve-down-right.png") bottom right no-repeat; background-size: contain; position: absolute; bottom: 30px; right: -208px; width: 680px; height: 462px; -webkit-transform: rotate(-180deg) scale(0.75); -ms-transform: rotate(-180deg) scale(0.75); transform: rotate(-180deg) scale(0.75); z-index: 0; content: ' '; }
  .element-container.daily-activity-element-container::after { right: -348px; }
  .element-container#home-element-container::after { display: none; } }

/***************************************************************************************************************
    Dear Dev Pros,

    Only add non-renderable SASS in this file (no CSS selectors), otherwise any CSS will be rendered
    into any file that includes this one (spoiler alert: most files include this file)
****************************************************************************************************************/
form { background-color: #f9f9f9; margin-top: 65px; margin-bottom: 48px; padding: 1px; }

.element-user-defined-form form { margin: 0; padding: 2rem; }

label.left { display: none; }

input[type='text'], input[type='email'], input[type='number'], input[type='phone'], textarea, select { width: 100%; margin-top: 10px; margin-bottom: 10px; padding: 15px; border: 1px solid #979797; border-radius: 3px; background-color: #fff; }

input[type='text']:focus, input[type='email']:focus, input[type='number']:focus, input[type='phone']:focus, textarea:focus, select:focus { outline: none !important; border: 1px solid rgba(151, 151, 151, 0.5); -webkit-box-shadow: inset 0 0 5px rgba(151, 151, 151, 0.4); box-shadow: inset 0 0 5px rgba(151, 151, 151, 0.4); }

.checkbox .middleColumn { display: inline-block; position: relative; margin: 0; vertical-align: middle; }

.checkbox .middleColumn input { position: relative; margin-top: 0; margin-left: 0; }

.checkbox .right-title { display: inline-block; margin-left: 15px; vertical-align: middle; }

select:focus { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }

span.error { font-size: 11px; position: absolute; top: -9px; left: 15px; }

[type="checkbox"] { width: auto; position: relative; }

legend { margin-bottom: 0; border: 0; color: #4a4a4a; font-size: 16px; text-align: left; }

#ForgotPassword { font-size: 1rem; }

.userformsgroup { padding: 15px !important; border: 0 !important; }

fieldset.checkboxset, fieldset.optionset { width: 100%; margin: 40px 0 20px 15px; }

fieldset.checkboxset legend, fieldset.optionset legend { margin-left: 0; font-weight: 400 !important; }

fieldset.checkboxset label, fieldset.optionset label { margin-left: 1rem; }

fieldset.checkboxset .middleColumn, fieldset.optionset .middleColumn { margin-left: 25px; display: block; }

.dropdown label { display: block; }

.form-header { margin: 50px 0; color: #4a4a4a; }

.form-header h1, .form-header h2, .form-header h3, .form-header h4, .form-header h5, .form-header h6 { width: 100%; text-align: center; color: #4a4a4a; }

@media (min-width: 768px) { .middleColumn { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; }
  div.half-field { -ms-flex-preferred-size: 50%; flex-basis: 50%; padding: 0 15px; }
  div.full-field { -ms-flex-preferred-size: 100%; flex-basis: 100%; padding: 0 15px; }
  legend { margin-left: 15px; }
  .jvFloat .placeHolder, .jvFloat .placeHolder.required { top: 1px; } }

@media (min-width: 992px) { [type="submit"] { margin-bottom: 10px; } }

/***************************************************************************************************************
    Dear Dev Pros,

    Only add non-renderable SASS in this file (no CSS selectors), otherwise any CSS will be rendered
    into any file that includes this one (spoiler alert: most files include this file)
****************************************************************************************************************/
.flex-container { width: 100%; }

.element .content { padding: 0 30px; }

.element .content h1, .element .content h2, .element .content h3, .element .content h4, .element .content h5, .element .content h6 { line-height: 1.4; text-align: left; }

.element-heading h1, .element-heading h2, .element-heading h3, .element-heading h4, .element-heading h5, .element-heading h6 { padding-top: 50px; padding-bottom: 30px; margin: 0; }

.element-break { padding-bottom: 50px; }

.element-break-small { padding-bottom: 25px; }

.standard { background-color: #fff; }

.inverse { background-color: #00b683; }

.inverse h1, .inverse h2, .inverse h3, .inverse h4, .inverse h5, .inverse h6 { color: #fff; }

.inverse a { color: #fff; text-decoration: none; }

.inverse a:hover { text-decoration: none; }

.grey-background { background-color: #f9f9f9; }

.grey-background h1, .grey-background h2, .grey-background h3, .grey-background h4, .grey-background h5, .grey-background h6 { color: #00b683; }

.minor-heading { margin-top: 27px; margin-bottom: 0; }

@media (min-width: 768px) { .element .content { padding: 0 50px; }
  .element-break { margin-bottom: 60px; } }

@media (min-width: 992px) { .element-break-small { padding-bottom: 0; }
  .element-break { margin-bottom: 60px; } }

/***************************************************************************************************************
    Dear Dev Pros,

    Only add non-renderable SASS in this file (no CSS selectors), otherwise any CSS will be rendered
    into any file that includes this one (spoiler alert: most files include this file)
****************************************************************************************************************/
.gallery-index-item { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; margin: 0 auto; min-height: 320px; max-width: 330px; color: #fff; position: relative; background-color: #00b683; overflow: hidden; }

.gallery-index-item::before { position: absolute; width: 100%; height: 100%; content: ' '; background: rgba(0, 0, 0, 0); top: 0; left: 0; -webkit-transition: background-color 0.3s; -o-transition: background-color 0.3s; transition: background-color 0.3s; z-index: 1; }

.gallery-index-item::after { position: absolute; width: 436px; height: 234px; content: ' '; background: url("../images/branch-25.png") no-repeat; top: 0; left: 0; z-index: 0; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }

.gallery-index-item:hover::before { background: rgba(0, 0, 0, 0.2); }

.gallery-index-item:hover::after { -webkit-filter: blur(2px); filter: blur(2px); }

.gallery-index-item h4 { position: relative; z-index: 2; }

.gallery-index-items > :nth-child(1) { background-color: #A5D27E; }

.gallery-index-items > :nth-child(1)::after { -webkit-transform: rotate(-60deg); -ms-transform: rotate(-60deg); transform: rotate(-60deg); left: -120px; bottom: 30px; top: inherit; }

.gallery-index-items > :nth-child(1):hover::after { -webkit-transform: rotate(-60deg); -ms-transform: rotate(-60deg); transform: rotate(-60deg); }

.gallery-index-items > :nth-child(2) { background-color: #81CE7B; }

.gallery-index-items > :nth-child(2)::after { -webkit-transform: rotate(-40deg); -ms-transform: rotate(-40deg); transform: rotate(-40deg); right: -200px; left: inherit; bottom: -134px; top: inherit; }

.gallery-index-items > :nth-child(3) { background-color: #07B683; }

.gallery-index-items > :nth-child(3)::after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); top: -100px; left: -20px; }

.gallery-index-items > :nth-child(4) { background-color: #0C8C81; }

.gallery-index-items > :nth-child(4)::after { -webkit-transform: scale(-1, 1) rotate(-60deg); -ms-transform: scale(-1, 1) rotate(-60deg); transform: scale(-1, 1) rotate(-60deg); top: inherit; bottom: -100px; left: -200px; }

.gallery-index-items > :nth-child(5) { background-color: #095767; }

.gallery-index-items > :nth-child(5)::after { -webkit-transform: scale(-0.7, 0.7) rotate(-110deg); -ms-transform: scale(-0.7, 0.7) rotate(-110deg); transform: scale(-0.7, 0.7) rotate(-110deg); top: 47px; left: 0; }

.gallery-index-items > :nth-child(6) { background-color: #093856; }

.gallery-index-items > :nth-child(6)::after { -webkit-transform: scale(-1, 1) rotate(-110deg); -ms-transform: scale(-1, 1) rotate(-110deg); transform: scale(-1, 1) rotate(-110deg); top: inherit; bottom: -158px; left: -220px; }

@media (min-width: 576px) { .gallery-index-item { -webkit-box-flex: 0; -ms-flex: 0 0 48%; flex: 0 0 48%; margin: 0; } }

@media (min-width: 992px) { .gallery-index-item { -webkit-box-flex: 0; -ms-flex: 0 0 30%; flex: 0 0 30%; min-height: 320px; } }

/***************************************************************************************************************
    Dear Dev Pros,

    Only add non-renderable SASS in this file (no CSS selectors), otherwise any CSS will be rendered
    into any file that includes this one (spoiler alert: most files include this file)
****************************************************************************************************************/
.gallery-page-photo { width: 100%; height: auto; max-width: 340px; }

.gallery-panel-inner { padding-top: 3rem; padding-bottom: 3rem; }

.ElementContent + .GalleryElement .gallery-panel-inner { padding-top: 0rem; }

@media (min-width: 576px) { .gallery-page-items > :nth-child(odd) { border-right: solid 1px #e7e7e7; }
  .gallery-page-items > :last-child { border-right: 0; } }

@media (min-width: 768px) { .gallery-page-items > :nth-child(odd) { border-right: inherit; }
  .gallery-page-items > :nth-child(3n + 1), .gallery-page-items > :nth-child(3n + 2) { border-right: solid 1px #e7e7e7; }
  .gallery-page-items > :last-child { border-right: 0; } }
/*# sourceMappingURL=main.css.map */