/*
TEMPLATE FOR MEDIA QUERIES
	@media screen and (min-width:1180px) {}                         --------> full layout
	@media screen and (min-width:880px) and (max-width:1179px) {}	--------> section fixed width
    @media screen and (max-width:879px) {}                          --------> section is fluid

INDEX
	- PAGE RESET                                                    [structure.css]
	- STRUCTURE                                                     [structure.css]
    - PLATFORM                                                      [structure.css]
    - TYPOGRAPHY                                                    [structure.css]
    - FLEX                                                          [structure.css]
	- FX_2                                                          [structure.css]
	- FX_3                                                          [structure.css]
	- FX_4                                                          [structure.css]
	- FX_5blog                                                      [structure.css]
    - CM_FORM                                                       [structure.css]
	- IMAGES                                                        [structure.css]
    - UL/OL                                                         [structure.css]
    - SECTION NAVIGATION                                            [structure.css]
	- UL.SECTION_NAVIGATION                                         [structure.css]
    - DEFAULT FORM                                                  [css/_forms.css]
    - DEFAULT FORM FX                                               [css/_forms.css]
	- DEFAULT FORM V2                                               [css/_forms.css]
	- RADIO/CHECKBOX                                                [css/_forms.css]
    - DEFAULT TABLE                                                 [css/_tables_footer.css]
    - FOOTER ADOM                                                   [css/_tables_footer.css]
    - SMART MENU                                                    [css/_navigation.css]
    - VMENUxx                                                       [css/_navigation.css]
    - VMENU01                                                       [css/_navigation.css]
    - HMENU01                                                       [css/_navigation.css]
    - SCROLL TO TOP                                                 [css/_navigation.css]
    - INFO BOX                                                      [css/_components.css]
    - VIDEO                                                         [css/_components.css]
    - MASS INTENTIONS                                               [css/_components.css]
    - TODAY'S READINGS                                              [css/_components.css]
    - OUR TEAM                                                      [css/_components.css]
		-OT MODEL 01                                                [css/_components.css]
	- COLLAPSE                                                      [css/_components.css]
	- STAGE                                                         [css/_components.css]
	- KNOWLEDGE BASE                                                [css/_components.css]
    - BUTTONS E-BLAST SCHEDULE                                      [css/_components.css]
	- SWIPER SLIDE                                                  [css/_components.css]
    - CLEAN FORM                                                    [css/_components.css]
    - FORM RESPONSE                                                 [css/_components.css]
    - PAGINATION                                                    [css/_components.css]
	- TOGGLE                                                        [css/_components.css]
	- SWIPER                                                        [css/_components.css]
	- RATING                                                        [css/_components.css]
	- FLOATING FORM                                                 [css/_email_payments.css]
	- EMAIL STATISTICS                                              [css/_email_payments.css]
	- GLOBAL_HIGHLIGHTS                                             [css/_email_payments.css]
	- OFFERINGS/PAYMENTS                                            [css/_email_payments.css]
    - NEW MASS INTENTIONS ADMIN                                     [css/_email_payments.css]
    - NEW MASS INTENTIONS                                           [css/_mass_intentions.css]
        - STEPS                                                     [css/_mass_intentions.css]
        - CONTAINER PRINCIPAL                                       [css/_mass_intentions.css]
        - FORM                                                      [css/_mass_intentions.css]
        - SELECT AREAS & INPUTS                                     [css/_mass_intentions.css]
        - BUTTONS                                                   [css/_mass_intentions.css]
        - MASS TIMES & CALENDAR                                     [css/_mass_intentions.css]
        - BOX INTENTION                                             [css/_mass_intentions.css]
        - ADDED INTENTIONS                                          [css/_mass_intentions.css]
        - ADD INTENTION                                             [css/_mass_intentions.css]
        - FORM OFFERING                                             [css/_mass_intentions.css]
        - MEDIA QUERIES                                             [css/_mass_intentions.css]
        - FORM CALENDAR                                             [css/_mass_intentions.css]
	- BUSINESS DIRECTORY                                            [css/_mass_intentions.css]
	- VSEPARATOR                                                    [css/_mass_intentions.css]
	- INTENTIONS CALENDAR                                           [css/_calendar.css]
	- CATEGORIES                                                    [css/_calendar.css]
	- MASS INTENTIONS REQUEST                                       [css/_calendar.css]
	- MINISTRY LISTING                                              [css/_calendar.css]
	- MINISTRIES LIST                                               [css/_calendar.css]
	- POWERED BY PM                                                 [css/_calendar.css]
	- SPAN CAL_COLOR                                                [css/_calendar.css]
    - BILINGUAL BUTTONS                                             [css/_calendar.css]
    - CALENDAR - PARISH ACTIVITIES                                  [css/_calendar.css]
	- HIDDEN LAYER / TAG                                            [css/_content.css]
	- ATTACHMENTS                                                   [css/_content.css]
    - TABS                                                          [css/_content.css]
    - MODAL                                                         [css/_content.css]
    - GETTEXTAREA MODAL                                             [css/_content.css]
	- MULTILINGUAL NEWS                                             [css/_multilingual.css]
        - ALL                                                       [css/_multilingual.css]
        - SECTION_25                                                [css/_multilingual.css]
        - SECTION_50                                                [css/_multilingual.css]
        - SECTION_75                                                [css/_multilingual.css]
        - Editor HTML                                               [css/_multilingual.css]
    - CROPPER                                                       [css/_media.css]
    - GOOGLE CALENDAR                                               [css/_media.css]
	- ZZ LAYER | LEFT x RIGHT                                       [css/_media.css]
    - INFOBOX                                                       [css/_media.css]
    - FEED INSTAGRAM                                                [css/_media.css]
    - CHIP EMAILS                                                   [css/_media.css]
	- TEXTBLOCK                                                     [css/_media.css]
    - BUSINESS DIRECTORY                                            [css/_media.css]
    - LOGGED ALERT                                                  [css/_media.css]
    - TOAST CONTAINER                                               [css/_media.css]
    - CATEGORY                                                      [css/_media.css]
    - FACEBOOK                                                      [css/_media.css]
    - BLOG                                                          [css/_blog.css]
    - SUN EDITOR                                                    [css/_admin.css]
    - OPENAI ML                                                     [css/_admin.css]
    - NEWSLETTERS APPROVAL                                          [css/_admin.css]
    - SCAN BULLETIN                                                 [css/_admin.css]
  - DASHBOARD                                                       [css/_admin.css]
  - SCAN READ AND POST                                              [css/_admin.css]

*/

/* test */

/*-----------------------------------------------------------  PAGE RESET   --------------------*/

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap");

/* ---- IMPORTS ------------------------------------------------------------- */
@import url("css/_forms.css");
@import url("css/_tables_footer.css");
@import url("css/_navigation.css");
@import url("css/_components.css");
@import url("css/_email_payments.css");
@import url("css/_mass_intentions.css");
@import url("css/_calendar.css");
@import url("css/_content.css");
@import url("css/_multilingual.css");
@import url("css/_media.css");
@import url("css/_blog.css");
@import url("css/_admin.css");


:root {
  --white: #fff;
  --green: #0a8f4a;
  --cblue: #5586be;
  --cred: #d45152;
  --cgreen: #8baf5e;
  --red: red;
  --blue: #305dca;
  --blue2: #003255;
  --buttonAdm: #005b96;
  --orange: orange;
  --yellow: #fbc72a;
  --gray0: #f4f4f4;
  --gray1: #f9f9f9;
  --gray2: #dddddd;
  --gray3: #bbbbbb;
  --gray4: #888888;
  --gray5: #444444;
  --black: #000;
}

.caution {
  color: orange;
}

body,
html {
  scroll-behavior: smooth;
}

html {
  box-sizing: border-box;
  height: 100%;
}

html.lg-EN .lg-SP,
html.lg-EN .lg-CA {
  display: none !important;
}
html.lg-SP .lg-EN,
html.lg-SP .lg-CA {
  display: none !important;
}
html.lg-CA .lg-EN,
html.lg-CA .lg-SP {
  display: none !important;
}

body {
  font-size: 16px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  padding: 0;
  margin: 0;
  border: 0;
  text-decoration: none;
}

u {
  text-decoration: underline;
}

.clear {
  clear: both;
}

.hide {
  display: none !important;
}

.show_eblast_only {
  display: none;
}

.floatR {
  float: right;
}
.floatL {
  float: left;
}
.floatC {
  margin-left: auto;
  margin-right: auto;
}

.txC {
  text-align: center !important;
}
.txR {
  text-align: right !important;
}
.txL {
  text-align: left !important;
}

.relative {
  position: relative;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  clear: both;
}
.breadcrumbs {
  margin-top: 30px;
}

.flexC {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  clear: both;
}

.max_500 {
  max-width: 500px !important;
}

.show_eblast_only {
  display: none;
}

input {
  -webkit-appearance: none;
}

input[type="radio"] {
  -webkit-appearance: radio !important;
  cursor: pointer !important;
}

input[type="checkbox"] {
  -webkit-appearance: checkbox;
}

@media screen and (min-width: 1180px) {
  .hide_full {
    display: none !important;
  }
}

@media screen and (min-width: 480px) {
  .hide_desktop {
    display: none !important;
  }
}

@media screen and (max-width: 1179px) {
  .hide_tablet {
    display: none !important;
  }
}

@media screen and (max-width: 479px) {
  .hide_mobile {
    display: none !important;
  }
}

.spanish {
  display: none;
}

.atimo_team .restricted_content {
  display: inherit;
}
.restricted_content {
  display: none;
}

#statistics {
  min-height: 800px;
}

.valignC {
  display: flex;
  align-items: center;
}

.flex.mg0 .fx_2,
.flex.mg0 .fx_3,
.flex.mg0 .fx_4 {
  margin: 0;
}

.bgCoverImg {
  background-size: cover;
  background-blend-mode: color;
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
}

a#sortByCutOffDate {
  float: none !important;
}
/*
PUT THIS LINE AS STYLE IN THE HTML CODE
style="background-image: url(ctm/.../projects/...); background-color: rgba(255, 255, 255, 0.94);"
suggested img size =  1920 X 710PX 
*/

/*-----------------------------------------------------------  STRUCTURE  ----------------------*/
@media screen and (min-width: 1180px) {
  section {
    width: 1150px;
    margin: 0 auto;
  }

  section.has_aside {
    display: flex;
  }
  section.has_aside aside,
  section.has_aside .content {
    flex-basis: auto;
  }

  section.has_aside aside {
    z-index: 100;
  }

  .content {
    padding: 0.8em 1.5em;
  }

  section.has_aside .content {
    width: 850px;
  }

  aside {
    width: 300px;
  }

  aside .fx_3 {
    width: 100% !important;
    margin: 0 0 32px 0 !important;
  }
}

@media screen and (min-width: 880px) and (max-width: 1179px) {
  section {
    width: 850px;
    margin: 0 auto;
  }

  .content {
    padding: 0.8em 1.5em;
  }

  aside {
    display: flex;
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 879px) {
  section {
    margin: 0 15px;
  }

  .content {
    padding: 0.8em 0;
  }
}

header section {
  position: relative;
}

.content {
  position: relative;
}

aside {
  position: relative;
  padding: 0.8em 1em;
}

#share_pg .content {
  padding-right: 0;
}

#share_pg .end_page {
  display: none;
}

#share_pg #st-1 {
  position: absolute;
  top: 17px;
}

a.share {
  float: right;
  color: var(--gray4) !important;
  font-size: 11px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gray2);
  padding: 2px 10px;
  display: block;
  text-align: center;
  margin-top: 20px;
  opacity: 0.8;
}

.share .st-center {
  margin: 20px 0;
}

.share img {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 20px;
  display: block;
}

.share img[src="ctm/"] {
  display: none;
}

a.share:hover {
  opacity: 1;
}

.share a.back {
  padding: 0 5px;
  color: var(--gray4);
  border-bottom: 1px solid var(--gray4);
  border-top: 1px solid var(--gray4);
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.7;
  position: absolute;
  top: -28px;
  right: 0;
}

.share a.back:hover {
  opacity: 1;
}

a#add_pg_layer {
  font-size: 24px;
  background: white;
  color: red;
  border: 1px solid red;
  text-align: center;
  width: 36px;
  height: 36px;
  padding-top: 2px;
  display: block;
  float: right;
  margin-right: 10px;
  position: relative;
  z-index: 2;
  margin-top: 10px;
  transition: all 0.2s linear;
}

a#add_pg_layer:hover {
  opacity: 0.9;
  transition: all 0.2s linear;
}

#upload_msg {
  color: red;
}

/*-------------------------------------------------------  ARTICLE | SHARE  --------------------*/
@media screen and (min-width: 880px) {
  article.share div.addthis_inline_share_toolbox {
    top: 0;
    right: 0;
  }
}

@media screen and (max-width: 879px) {
  article.share div.addthis_inline_share_toolbox {
    top: 0px;
    left: 0px;
  }
}

article.share div.addthis_inline_share_toolbox {
  position: absolute;
}

article.share
  div.addthis_inline_share_toolbox
  .at-style-responsive
  .at-share-btn {
  padding: 0;
}

/*-----------------------------------------------------------  PLATFORM   ----------------------*/
section#platform .content {
  max-width: 850px;
  margin: 0 auto;
}

section#platform .content.large {
  max-width: 1150px;
}

section#platform .content.oops {
  background: url(../../images/pages/oops.png) no-repeat right;
  background-size: contain;
}

.code {
  font-family: monospace;
  font-size: 12px !important;
  line-height: 21px !important;
  color: var(--blue);
}

.grecaptcha-badge {
  visibility: hidden;
}

div.table-area .edit-button {
  display: inline-block;
  text-align: center;
  padding: 0 1.5em;
  font-size: 0.9375em;
  line-height: 1.875em;
  height: 2em;
  cursor: pointer;
  border: 1px solid;
  background-color: var(--color_pd);
  color: white;
}
div.table-area .edit-button:hover {
  background-color: var(--color_p);
  color: white;
}

/*-----------------------------------------------------------  TYPOGRAPHY   --------------------*/
/*https://webdesign.tutsplus.com/articles/a-web-designers-typographic-boilerplate--webdesign-15234*/

@media screen and (min-width: 650px) {
  .text-column2 {
    column-count: 2;
    column-gap: 30px;
  }
}

.content h1 {
  font-size: 3em;
  margin-bottom: 0.3em;
}

.content h2 {
  font-size: 2em;
  margin-bottom: 0.5em;
}

.content h3 {
  font-size: 1.5em;
  margin-bottom: 0.3em;
}

.content h4 {
  font-size: 1.2em;
  margin-bottom: 0.3em;
}

.content h5 {
  font-size: 1em;
  margin-bottom: 0.8em;
}

.content h6 {
  font-size: 0.9em;
  margin-bottom: 0.3em;
}

.content p,
.content ol,
.content ul,
.content blockquote,
.content pre,
.content code {
  line-height: 1.5em;
  margin-bottom: 1.5em;
}

.phone,
.fax,
a.email,
a.web,
a.pdf,
p.email,
dd.email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  position: relative;
  padding-left: 1.25em;
}

a.web.nowrap,
a.email.nowrap,
a.pdf.nowrap {
  white-space: normal;
  overflow: visible;
  text-overflow: inherit;
}

.phone::before,
.email::before,
.fax::before,
.web::before,
.address::before,
.pdf::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  font-size: 0.85em;
  top: 0.3125em;
}

/*
REPLACED WITH THE CODE ABOVE ON 04/07/2020
.phone, .fax, a.email, a.web, a.pdf {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.phone:before, .email:before, .fax:before,
.web:before, .address:before, .pdf:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 0.3em;
}
*/
.phone:before {
  content: "\f095";
  margin-right: 5px;
}
.email:before {
  content: "\f0e0";
  margin-right: 5px;
}
.fax:before {
  content: "\f1ac";
  margin-right: 5px;
}
.web:before {
  content: "\f0c1";
  margin-right: 5px;
}
.address:before {
  content: "\f277";
  margin-right: 5px;
}
.pdf:before {
  content: "\f1c1";
  margin-right: 5px;
}

.fas.fa-toggle-off,
a.star_off {
  color: var(--gray2) !important;
  cursor: pointer;
}
a.star_on {
  color: var(--yellow) !important;
}
.fas.fa-toggle-on {
  color: var(--blue) !important;
}

.utc_conv {
  color: var(--blue);
}

.utc_conv::after {
  content: "\f017";
  font-family: "Font Awesome 5 Free";
  padding-left: 4px;
}

@media screen and (min-width: 600px) {
  .columns2 {
    column-count: 2;
  }
}
@media screen and (min-width: 900px) {
  .columns3 {
    column-count: 3;
  }
}
@media screen and (min-width: 900px) {
  .columns4 {
    column-count: 4;
  }
}

/*-----------------------------------------------------------  FX_2   --------------------------*/
@media screen and (min-width: 600px) {
  .fx_2:nth-child(1n) {
    width: calc(100% / 2 - 10px);
    margin: 0 10px 10px 0;
  }

  .fx_2:nth-child(2n) {
    width: calc(100% / 2 - 10px);
    margin: 0 0 10px 10px;
  }
}

@media screen and (max-width: 599px) {
  .fx_2 {
    width: 100%;
    margin: 0 0 10px 0;
  }
}

/*-----------------------------------------------------------  FX_3   --------------------------*/
/* Media queries testadas no aside da ACC em 16 de Fev de 2019*/
@media screen and (min-width: 880px) {
  .fx_3:nth-child(1),
  .fx_3:nth-child(3n + 1),
  .fx_3:nth-child(3n + 3) {
    width: calc(100% / 3 - 1.25em / 2);
    margin: 0 0 10px;
  }

  .fx_3:nth-child(3n + 2) {
    width: calc(100% / 3 - 1.25em / 2);
    margin: 0 10px 10px;
  }
}

@media screen and (min-width: 680px) and (max-width: 879px) {
  .fx_3:nth-child(1n) {
    width: calc(100% / 2 - 10px);
    margin: 0 10px 10px 0;
  }

  .fx_3:nth-child(2n) {
    margin: 0 10px 10px 0;
    margin: 0 0 10px 10px;
  }
}

@media screen and (max-width: 679px) {
  .fx_3 {
    width: 100%;
    margin: 0 0 10px 0;
  }
}

/*-----------------------------------------------------------  FX_4   -----------------*/
@media screen and (min-width: 800px) {
  #page_navigation a:nth-child(1n),
  #page_navigation a:nth-child(2n),
  #page_navigation a:nth-child(n),
  #section_navigation a:nth-child(1n),
  #section_navigation a:nth-child(2n),
  #section_navigation a:nth-child(n),
  .section_navigation a:nth-child(1n),
  .section_navigation a:nth-child(2n),
  .section_navigation a:nth-child(n),
  .fx_4:nth-child(1n),
  .fx_4:nth-child(2n),
  .fx_4:nth-child(3n) {
    width: calc(25% - 30px / 4);
    margin: 0 10px 10px 0;
  }
  #page_navigation a:nth-child(4n + 4),
  #section_navigation a:nth-child(4n + 4),
  .section_navigation a:nth-child(4n + 4),
  .fx_4:nth-child(4n) {
    width: calc(25% - 30px / 4);
    margin: 0 0 10px 0;
  }
}

@media screen and (min-width: 595px) and (max-width: 799px) {
  #page_navigation a:nth-child(1),
  #page_navigation a:nth-child(3n + 1),
  #page_navigation a:nth-child(3n + 3),
  #section_navigation a:nth-child(1),
  #section_navigation a:nth-child(3n + 1),
  #section_navigation a:nth-child(3n + 3),
  .section_navigation a:nth-child(1),
  .section_navigation a:nth-child(3n + 1),
  .section_navigation a:nth-child(3n + 3),
  .fx_4:nth-child(1),
  .fx_4:nth-child(3n + 1),
  .fx_4:nth-child(3n + 3) {
    width: calc(100% / 3 - 20px / 3);
    margin: 0 0 10px;
  }

  #page_navigation a:nth-child(3n + 2),
  #section_navigation a:nth-child(3n + 2),
  .section_navigation a:nth-child(3n + 2),
  .fx_4:nth-child(3n + 2) {
    width: calc(100% / 3 - 20px / 3);
    margin: 0 10px 10px;
  }
}

@media screen and (min-width: 395px) and (max-width: 594px) {
  #page_navigation a:nth-child(1n),
  #section_navigation a:nth-child(1n),
  .section_navigation a:nth-child(1n),
  .fx_4:nth-child(1n) {
    width: calc(100% / 2 - 10px);
    margin: 0 10px 10px 0;
  }

  #page_navigation a:nth-child(2n),
  #section_navigation a:nth-child(2n),
  .section_navigation a:nth-child(2n),
  .fx_4:nth-child(2n) {
    width: calc(100% / 2 - 10px);
    margin: 0 0 10px 10px;
  }
}

@media screen and (max-width: 394px) {
  #page_navigation a,
  #section_navigation a,
  .section_navigation a,
  .fx_4 {
    width: 100%;
    margin: 0 0 10px 0;
  }
}

/*-----------------------------------------------------------  FX_5   -----------------*/
@media screen and (min-width: 800px) {
  .fx_5:nth-child(1n),
  .fx_5:nth-child(2n),
  .fx_5:nth-child(3n),
  .fx_5:nth-child(4n) {
    width: calc(100% / 5 - 40px / 5);
    margin: 0 10px 10px 0;
  }

  .fx_5:nth-child(5n) {
    width: calc(100% / 5 - 40px / 5);
    margin: 0 0 10px;
  }
}

@media screen and (min-width: 595px) and (max-width: 799px) {
  .fx_5:nth-child(1n),
  .fx_5:nth-child(2n) {
    width: calc(100% / 3 - 20px / 3);
    margin: 0 10px 10px 0;
  }

  .fx_5:nth-child(3n) {
    margin: 0 10px 10px 0;
    margin: 0 0 10px;
  }
}

@media screen and (min-width: 395px) and (max-width: 594px) {
  .fx_5:nth-child(1n) {
    width: calc(100% / 2 - 10px / 2);
    margin: 0 10px 10px 0;
  }

  .fx_5:nth-child(2n) {
    width: calc(100% / 2 - 10px / 2);
    margin: 0 0 10px;
  }
}

@media screen and (max-width: 394px) {
  .fx_5 {
    width: 100%;
    margin: 0 0 10px 0;
  }
}

/*-----------------------------------------------------------  IMAGES   ------------------------*/
.imgC {
  max-width: 100%;
  margin: 0 auto 1em;
  display: block;
}

.imageCaption img {
  margin-bottom: 0 !important;
}

p.caption {
  background-color: var(--gray1);
  color: var(--gray4);
  padding: 5px 10px;
  max-height: 40px;
  overflow-y: auto;
  font-style: italic;
  font-size: 16px !important;
}

@media screen and (min-width: 500px) {
  .imgR {
    float: right;
    max-width: 50%;
    margin: 0 0 1em 1em;
  }

  .imageCaption {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .imageCaption:has(.imgC) p.caption {
    margin-bottom: 25px;
  }

  .imageCaption:has(.imgR) p.caption {
    margin: 0 0 10px 1em;
  }

  .imageCaption:has(.imgL) p.caption {
    margin: 0 1em 1em 0;
  }

  .imageCaption:has(.imgR) {
    float: right;
    max-width: 500px;
  }

  .imageCaption .imgR {
    float: right;
    margin: 0 0 10px 1em;
    max-width: 100% !important;
  }
  .imageCaption:has(.imgL) {
    float: left;
    max-width: 500px;
  }

  .imageCaption .imgL {
    float: left;
    margin: 0 1em 1em 0;
    max-width: 100% !important;
  }

  .imgL {
    float: left;
    max-width: 50%;
    margin: 0 1em 1em 0;
  }
}

@media screen and (max-width: 499px) {
  .imgR,
  .imgL {
    max-width: 100%;
    margin: 0 auto 1em auto;
    display: block;
  }
}

span.cm_altimg {
  position: relative;
}

span.cm_altimg span.js-edit_modal {
  position: absolute;
  top: 0;
  color: var(--gray4);
}

/*-----------------------------------------------------------  UL/OL   -------------------------*/
.content ul {
  margin-left: 10px;
}

.content ol {
  margin-left: 1.25em;
}

.content ol li {
  list-style-position: outside;
  padding: 0.1875em 0 0.1875em 0.95em;
  position: relative;
}

/*
Removed on April 8, 2020
See lines below (lower-alpha, etc...)
.content ol > li { list-style: decimal; }
.content ol > ol li { list-style: lower-roman; }
*/

.content ul li {
  list-style-type: none;
  list-style-position: inside;
  padding: 0.1875em 0 0.1875em 0.95em;
  position: relative;
}

.content ul li::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 3px;
}

ol.lower-alpha {
  list-style: lower-alpha !important;
}

ol.upper-alpha {
  list-style: upper-alpha !important;
}

ol.lower-roman {
  list-style: lower-roman !important;
}

ol.upper-roman {
  list-style: upper-roman !important;
}

/*-----------------------------------------------------------  SECTION NAVIGATION   ------------*/
#page_navigation,
#section_navigation,
.section_navigation {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1.25em;
  padding: 0.25em;
  list-style: none;
}

#page_navigation a,
#section_navigation a,
.section_navigation a {
  display: block;
  float: left;
  border: 1px solid;
  text-align: center;
  cursor: pointer;
  padding: 0.25em;
}

#section_navigation a.selected {
  color: var(--color3000);
}

/* CSS FOR THE COLLAPSED NAVIGATION ---------------*/
#section_div {
  position: relative;
  margin-bottom: 30px;
}

#section_div:before {
  content: "\f0a4";
  position: absolute;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900;
  font-size: 26px;
  top: 5px;
  color: var(--gray3);
}

#section_select {
  margin: 0 0 0 35px;
  padding: 10px;
  font-size: 16px;
  width: calc(100% - 35px);
}

/*-----------------------------------------------------------  UL.SECTION_NAVIGATION  -*/
@media screen and (min-width: 1180px) {
  ul.section_navigation li:nth-child(1n),
  ul.section_navigation li:nth-child(2n),
  ul.section_navigation li:nth-child(3n),
  ul.section_navigation li:nth-child(4n) {
    width: calc(20% - 50px / 5);
    margin: 0 10px 10px 0;
  }

  ul.section_navigation li:nth-child(5n) {
    width: calc(20% - 50px / 5);
    margin: 0 0 10px;
  }
}

@media screen and (min-width: 645px) and (max-width: 1189px) {
  ul.section_navigation li:nth-child(1n),
  ul.section_navigation li:nth-child(2n) {
    width: calc(100% / 3 - 20px / 2);
    margin: 0 10px 10px 0;
  }

  ul.section_navigation li:nth-child(3n) {
    width: calc(100% / 3 - 20px / 2);
    margin: 0 0 10px;
  }
}

@media screen and (min-width: 560px) and (max-width: 644px) {
  ul.section_navigation li:nth-child(1n) {
    width: calc(100% / 2 - 10px);
    margin: 0 10px 10px 0;
  }

  ul.section_navigation li:nth-child(2n) {
    width: calc(100% / 2 - 10px);
    margin: 0 0 10px;
  }
}

@media screen and (max-width: 559px) {
  ul.section_navigation li {
    width: 100%;
    margin: 0 0 10px 0;
  }
}

.menu-sn h1 {
  display: none;
}

ul.section_navigation {
  display: flex;
  justify-content: center;
}

ul.section_navigation li a {
  width: 100% !important;
}

ul.section_navigation li::before {
  display: none;
}