/* These styles are used in the backend editor AND in the Theme (frontend) */

/* Most themes nowadays provide an extra stylesheet of classes which WordPress itself then */
/* applies to the backend editor TinyMCE. However, custom CSS - set in Plugins, in the WP  */
/* Customizer or in Theme options, will normally not be reflected to TinyMCE. So better to */
/* put such styles all here, where they will apply to TinyMCE *and* the frontend.          */

/* The goal is not only to make the visual editor display look as much like the frontend as    */
/* possible, but also to make sure that all important CSS classes are available for convenient */
/* selection in TinyMCEs "Formats" dropdown - so do not forget to configure the TinyMCE styles */
/* dropdown with elements to match those here.                                                 */

/* If you do not need this file then upload an empty one (zero bytes) which will not be loaded at all. */

/* Suggested general non-tag-specific visual styles */

.list       { margin: 0.35rem 0; }
.topless    { margin-top: 0 !important; }
.bottomless { margin-bottom: 0 !important; }
.beforelist { margin-bottom: 0.5rem; }
.lastitemem { margin-bottom: 0; padding-bottom: 1.3rem; }

strong { font-weight: bold; }
/* Revert to normal text within strong */
.notstrong { font-weight: normal; }

.smaller { font-size: 0.95rem; line-height: 1.25; }
.small   { font-size: 0.89rem; line-height: 1.2; }

.screen-reader-text, .dispnone { display: none; }

/* Append your site-specific styles here */

/* Subheadings */
.subhead-green,
.subhead-grey,
.subhead-orange,
.subhead-blue {
    font-family: 'Prompt', Arial, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 20px;
}
.subhead-green strong,
.subhead-grey strong,
.subhead-orange strong,
.subhead-blue strong {
    font-weight: 700;
}
.subhead-green {
    color: #A9C23E;
}
.subhead-grey {
    color: #425563;
}
.subhead-orange {
    color: #E87722;
}
.subhead-blue {
    color: #0094B3;
}

/* Lists */
ul,
.list-blue,
.list-green,
.list-orange,
.list-paragraph {
    list-style: none;
    padding: 0;
    margin-left: 0;
    font-family: 'Prompt', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.5;

    &:where(:not(:last-child)) {
        margin-bottom: 35px;
    }

    & & {
        margin-top: 10px;
        margin-left: 35px;
    }

    & ol,
    & ul {
        list-style: none;
        margin-left: 35px;
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 0;
    }

    & li {
        /* background: transparent url('/images/bullet.png') no-repeat 0 12px / 5px 5px; */
        padding-left: 16px;
        position: relative;

        &::before {
            content: "";
            display: inline-block;
            position: absolute;
            top: 12px;
            left: 0;
            width: 5px;
            height: 5px;
            /*border-radius: 50%;*/
            background-color: currentColor;
        }

        &[style*="list-style-type: none;"] {
        	&::before {
        		display:none;
        	}
        }
    }
}

.list-blue li::before {
    background-color: #0094B3;
}

.list-green li::before {
    background-color: #A9C23E;
}

.list-orange li::before {
    background-color: #E87722;
}

.list-paragraph {

    & > li {

        &:not(:first-child) {
            margin-top: 35px;
        }
    }
}

/* Homepage Styles */
.bold-white-orange-period {
    display: block;
    font-family: 'Prompt', Arial, sans-serif;
    font-size: 60px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.25;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
@media(max-width: 900px){
    .bold-white-orange-period {
        font-size: 36px;
    }
}
@media(max-width: 600px){
    .bold-white-orange-period {
        font-size: 24px;
    }
}
.bold-white-orange-period::after {
    content: "";
    width: 9px;
    height: 9px;
    display: inline-block;
    background-color: #E87722;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    margin-left: 4px;
}
@media(max-width: 900px){
    .bold-white-orange-period::after {
        width: 6px;
        height: 6px;
    }
}
.orange-text {
    color: rgb(232,119,34);
    font-weight: 400;
    display: inline;
}