/*!
Theme Name: St. Florence Academy
Theme URI: https://attentiontrading.com
Author: Attention Trading
Author URI: https://attentiontrading.com
Version: 2023.05.01
Tested up to: 5.4
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: st_florence_academy
*/
*,:after,:before {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility
}

html {
    font-size: 62.5%
}

.clear:after,.clear:before {
    content: ' ';
    display: table
}

.clear:after {
    clear: both
}

img {
    max-width: 100%;
    vertical-align: bottom
}

a {
    text-decoration: none
}

a:focus {
    outline: 0
}

a:active,a:hover {
    outline: 0
}

input:focus {
    outline: 0;
    border: 1px solid #04a4cc
}




.stf-image-container {
  position: relative;
}

.stf-image-container img {
  display: block;
  width: 100%;
  transition: opacity 0.3s ease, filter 0.3s ease; /* Smooth transitions */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(1, 143, 255, 0.5); /* Dark overlay with 20% opacity */
  opacity: 0;
  transition: opacity 0.3s ease; /* Smooth transition */
}

.zoom-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  transform: translate(-50%, -50%); /* Center icon */
  opacity: 0;
  transition: opacity 0.3s ease; /* Smooth transition */
  z-index: 10; /* Ensure zoom icon stays on top */
  filter: none; /* Prevent blur on zoom icon */
}

.stf-image-container:hover .overlay,
.stf-image-container:hover .zoom-icon {
  opacity: 1;
}

.stf-image-container:hover .blur-filter{
  filter: blur(0.5px); /* Add slight blur on hover */
}

.zoom-icon .cta-bubble {
    position: absolute;
    height: 70px;
    width: 70px;
    border: 0px solid #018fff;
    background-color: #f7f9f7;
    border-radius: 100%;
    -webkit-transition: background-color .3s ease 0s;
    -moz-transition: background-color .3s ease 0s;
    -o-background-size: background-color .3s ease 0s;
    transition: background-color .3s ease 0s
}

.zoom-icon .cta-bubble svg {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 14px;
    width: 14px
}

.zoom-icon .cta-bubble svg * {
    stroke: #018fff;
    -webkit-transition: stroke .3s ease 0s;
    -moz-transition: stroke .3s ease 0s;
    -o-background-size: stroke .3s ease 0s;
    transition: stroke .3s ease 0s
}

.zoom-icon:hover .cta-bubble {
    background-color: #1fc16c;
}

.zoom-icon:hover .cta-bubble svg * {
    stroke: #f7f9f7;
}

.padding-top-20{
    margin-top: 20px;
}

.padding-top-dskt{
    margin-top: 20px;
}

.padding-top-50{
    margin-top: 50px;
}

.padding-top-dskt-50{
    margin-top: 50px;
}

/* Mobile scroll activation (media query for smaller screens) */
@media only screen and (max-width: 768px) {

.overlay {
display: none;
}

.zoom-icon {
display: none;
}
    
.padding-top-dskt{
margin-top: 0px;
} 

.padding-top-dskt-50{
    margin-top: 25px;
}
    
}




.wrapper {
    max-width: 1280px;
    width: 95%;
    margin: 0 auto;
    position: relative
}

.alignnone {
    margin: 5px 20px 20px 0
}

.aligncenter,div.aligncenter {
    display: block;
    margin: 5px auto 5px auto
}

.alignright {
    float: right;
    margin: 5px 0 20px 20px
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px
}

a img.alignnone {
    margin: 5px 20px 20px 0
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%;
    padding: 5px 3px 10px;
    text-align: center
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto
}

.gallery-caption,.wp-caption .wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px
}

@media print {
    * {
        background: 0 0!important;
        color: #000!important;
        box-shadow: none!important;
        text-shadow: none!important
    }

    a,a:visited {
        text-decoration: underline
    }

    a[href]:after {
        content: " (" attr(href) ")"
    }

    abbr[title]:after {
        content: " (" attr(title) ")"
    }

    .ir a:after,a[href^="#"]:after,a[href^="javascript:"]:after {
        content: ""
    }

    blockquote,pre {
        border: 1px solid #999;
        page-break-inside: avoid
    }

    thead {
        display: table-header-group
    }

    img,tr {
        page-break-inside: avoid
    }

    img {
        max-width: 100%!important
    }

    @page {
        margin: .5cm
    }

    h2,h3,p {
        orphans: 3;
        widows: 3
    }

    h2,h3 {
        page-break-after: avoid
    }
}

@font-face {
    font-family: PPNeueMontreal-Medium;
    src: url(webfonts/PPNeueMontreal-Medium.woff2) format('woff2'),url(webfonts/PPNeueMontreal-Medium.woff) format('woff'),url(webfonts/PPNeueMontreal-Medium.ttf) format('truetype');
    font-weight: 530;
    font-style: normal
}

@font-face {
    font-family: PPNeueMontreal-Book;
    src: url(webfonts/PPNeueMontreal-Book.woff2) format('woff2'),url(webfonts/PPNeueMontreal-Book.woff) format('woff'),url(webfonts/PPNeueMontreal-Book.ttf) format('truetype');
    font-weight: 400;
    font-style: normal
}

body {
    font-family: 'DM Sans';
    letter-spacing: -0.02rem;
    min-width: 320px;
    font-size: 18px;
    color: #000e1a;
    line-height: 1.4em;
    font-weight: 400;
    overscroll-behavior: none
}

body ::-moz-selection {
    background-color: #6ab335;
    color: #fff!important
}

body ::-webkit-selection {
    background-color: #6ab335;
    color: #fff!important
}

body ::selection {
    background-color: #6ab335;
    color: #fff!important
}

body .main-btn {
    font-family: 'DM Sans';
    letter-spacing: -0.05rem;
    color: rgb(153,214,255,0.7);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4em;
    font-style: normal;
    cursor: pointer;
    display: inline-block;
    padding: 23px 15px 23px 0;
    margin-right: 70px;
    position: relative;
    z-index: 1;
    text-decoration: none;
    white-space: nowrap;
    outline: 0;
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-background-size: all .3s ease 0s;
    transition: all .3s ease 0s
}

body .main-btn::after {
    content: '';
    display: block;
    background-color: #fe7101;
    background-image: url(img/icons/icon-arrow-angle-up-right-white.svg);
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    right: 0;
    top: 50%;
    height: 70px;
    width: 70px;
    border-radius: 100%;
    z-index: -1;
    transform: translate(100%,-50%);
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-background-size: all .3s ease 0s;
    transition: all .3s ease 0s
}

body .main-btn:hover {
    color: rgb(141,209,255,1);
}

body .main-btn:hover::after {
    background-color: #1fc16c;
    height: 84px;
    width: 84px
}


@media (max-width: 767px) {
    body .main-btn {
        font-size:16px
    }
}

body .main-btn.yellow {
    font-family: 'DM Sans';
    letter-spacing: -0.05rem;
    color: #195d36;
    font-weight: 530;
    font-size: 18px;
    line-height: 1.4em;
    font-style: normal;
    cursor: pointer;
    display: inline-block;
    padding: 23px 27px 23px 0;
    margin-right: 70px;
    position: relative;
    z-index: 1;
    text-decoration: none;
    white-space: nowrap;
    outline: 0;
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-background-size: all .3s ease 0s;
    transition: all .3s ease 0s
}

body .main-btn.yellow::after {
    content: '';
    display: block;
    background-color: #eedc10;
    background-image: url(img/icons/icon-arrow-angle-up-right-white.svg);
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    right: 0;
    top: 50%;
    height: 70px;
    width: 70px;
    border-radius: 100%;
    z-index: -1;
    transform: translate(100%,-50%);
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-background-size: all .3s ease 0s;
    transition: all .3s ease 0s
}

body .main-btn.yellow:hover {
    color: #195d36
}

body .main-btn.yellow:hover::after {
    background-color: #195d36;
    height: 84px;
    width: 84px
}

body .main-btn.yellow::after {
    background-image: url(img/icons/icon-arrow-angle-up-right-dark-green.svg);
    transform: translate(100%,-50%) rotate(45deg)
}

body .main-btn.yellow:hover::after {
    background-image: url(img/icons/icon-arrow-angle-up-right-white.svg);
    height: 70px;
    width: 70px
}

@media (max-width: 767px) {
    body .main-btn.yellow {
        font-size:16px
    }
}

body .main-btn.large {
    font-family: 'DM Sans';
    letter-spacing: -0.05rem;
    color: rgb(153,214,255,0.7);
    font-weight: 530;
    font-size: 18px;
    line-height: 1.4em;
    font-style: normal;
    cursor: pointer;
    display: inline-block;
    padding: 23px 27px 23px 0;
    margin-right: 70px;
    position: relative;
    z-index: 1;
    text-decoration: none;
    white-space: nowrap;
    outline: 0;
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-background-size: all .3s ease 0s;
    transition: all .3s ease 0s;
    padding: 57px 27px 57px 0;
    margin-right: 140px
}

body .main-btn.large::after {
    content: '';
    display: block;
    background-color: #fe7101;
    background-image: url(img/icons/icon-arrow-angle-up-right-white.svg);
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    right: 0;
    top: 50%;
    height: 70px;
    width: 70px;
    border-radius: 100%;
    z-index: -1;
    transform: translate(100%,-50%);
    -webkit-transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
    -o-background-size: all .3s ease 0s;
    transition: all .3s ease 0s
}

body .main-btn.large:hover {
    color: rgb(141,209,255,1);
}

body .main-btn.large:hover::after {
    background-color: #1fc16c;
    height: 84px;
    width: 84px
}

body .main-btn.large::after {
    height: 140px;
    width: 140px
}

body .main-btn.large:hover::after {
    height: 154px;
    width: 154px
}

@media (max-width: 767px) {
    body .main-btn.large {
        font-size:16px
    }
}

body .main-btn-text {
    color: #fff;
    font-weight: 530;
    font-size: 18px;
    letter-spacing: -0.02em;
    line-height: 1.4em;
    font-family: 'DM Sans';
    font-style: normal;
    cursor: pointer;
    display: inline-block;
    padding: 10px 40px 10px 10px;
    position: relative;
    z-index: 1;
    text-decoration: none;
    white-space: nowrap;
    outline: 0;
    -webkit-transition: color .3s ease 0s;
    -moz-transition: color .3s ease 0s;
    -o-background-size: color .3s ease 0s;
    transition: color .3s ease 0s
}

body .main-btn-text svg {
    position: absolute;
    height: 14px;
    width: 14px;
    right: 0;
    top: 50%;
    transform: translate(0,-50%) rotate(0)
}

body .main-btn-text svg,body .main-btn-text svg * {
    stroke: #fff;
    -webkit-transition: stroke .3s ease 0s,transform .3s ease 0s;
    -moz-transition: stroke .3s ease 0s,transform .3s ease 0s;
    -o-background-size: stroke .3s ease 0s,transform .3s ease 0s;
    transition: stroke .3s ease 0s,transform .3s ease 0s
}

body .main-btn-text:hover {
    color: #eedc10
}

body .main-btn-text:hover svg,body .main-btn-text:hover svg * {
    stroke: #eedc10
}

body .main-btn-text svg {
    transform: translate(0,-50%) rotate(90deg)
}

@media (max-width: 767px) {
    body .main-btn-text {
        font-size:16px
    }
}

body .main-btn-text.dark-green-black-down-right {
    color: #000e1a;
    font-weight: 530;
    font-size: 18px;
    letter-spacing: .02em;
    line-height: 1.4em;
    font-family: 'DM Sans';
    font-style: normal;
    cursor: pointer;
    display: inline-block;
    padding: 10px 40px 10px 10px;
    position: relative;
    z-index: 1;
    text-decoration: none;
    white-space: nowrap;
    outline: 0;
    -webkit-transition: color .3s ease 0s;
    -moz-transition: color .3s ease 0s;
    -o-background-size: color .3s ease 0s;
    transition: color .3s ease 0s
}

body .main-btn-text.dark-green-black-down-right svg {
    position: absolute;
    height: 14px;
    width: 14px;
    right: 0;
    top: 50%;
    transform: translate(0,-50%) rotate(0)
}

body .main-btn-text.dark-green-black-down-right svg,body .main-btn-text.dark-green-black-down-right svg * {
    stroke: #000e1a;
    -webkit-transition: stroke .3s ease 0s,transform .3s ease 0s;
    -moz-transition: stroke .3s ease 0s,transform .3s ease 0s;
    -o-background-size: stroke .3s ease 0s,transform .3s ease 0s;
    transition: stroke .3s ease 0s,transform .3s ease 0s
}

body .main-btn-text.dark-green-black-down-right:hover {
    color: #000
}

body .main-btn-text.dark-green-black-down-right:hover svg,body .main-btn-text.dark-green-black-down-right:hover svg * {
    stroke: #000
}

body .main-btn-text.dark-green-black-down-right svg {
    transform: translate(0,-50%) rotate(90deg)
}

@media (max-width: 767px) {
    body .main-btn-text.dark-green-black-down-right {
        font-size:16px
    }
}

body .main-btn-text.white-white-down-right {
    color: #fff;
    font-weight: 530;
    font-size: 18px;
    letter-spacing: .02em;
    line-height: 1.4em;
    font-family: 'DM Sans';
    font-style: normal;
    cursor: pointer;
    display: inline-block;
    padding: 10px 40px 10px 10px;
    position: relative;
    z-index: 1;
    text-decoration: none;
    white-space: nowrap;
    outline: 0;
    -webkit-transition: color .3s ease 0s;
    -moz-transition: color .3s ease 0s;
    -o-background-size: color .3s ease 0s;
    transition: color .3s ease 0s
}

body .main-btn-text.white-white-down-right svg {
    position: absolute;
    height: 14px;
    width: 14px;
    right: 0;
    top: 50%;
    transform: translate(0,-50%) rotate(0)
}

body .main-btn-text.white-white-down-right svg,body .main-btn-text.white-white-down-right svg * {
    stroke: #fff;
    -webkit-transition: stroke .3s ease 0s,transform .3s ease 0s;
    -moz-transition: stroke .3s ease 0s,transform .3s ease 0s;
    -o-background-size: stroke .3s ease 0s,transform .3s ease 0s;
    transition: stroke .3s ease 0s,transform .3s ease 0s
}

body .main-btn-text.white-white-down-right:hover {
    color: #fff
}

body .main-btn-text.white-white-down-right:hover svg,body .main-btn-text.white-white-down-right:hover svg * {
    stroke: #fff
}

body .main-btn-text.white-white-down-right svg {
    transform: translate(0,-50%) rotate(90deg)
}

@media (max-width: 767px) {
    body .main-btn-text.white-white-down-right {
        font-size:16px
    }
}

body .color-dark-green {
    color: #188c4c!important
}

body .color-green {
    color: #1fc16c!important
}

body .color-white {
    color: #f7f9f7!important
}

body .color-gray {
    color: #b2b2b2!important
}

body .color-yellow {
    color: #eedd0f!important
}

body .color-dark-blue {
    color: #0052ad!important
}

body .color-blue {
    color: #018fff!important
}

body .bg-green-dots {
    background-image: url(img/patterns/bg-pattern-dot-green.svg);
    background-size: 28px 28px;
    background-repeat: repeat;
    background-position: top left
}

body .underlined-green {
    color: #195d36;
    background-image: linear-gradient(to right,#195d36 0,#195d36 100%);
    background-repeat: repeat-x;
    background-position: 0 1.05em;
    background-size: 100% 1px
}

body .montreal-medium {
    font-family: 'DM Sans';
    font-weight: 530
}

body .montreal-book {
    font-family: PPNeueMontreal-Book,san-serif;
    font-weight: 400
}

body .omit-last-item-margin :not(.ignore-omit):last-child {
    margin-bottom: 0!important
}

@media (max-width: 1439px) {
    body .no-padding-md-down {
        padding-left:0!important;
        padding-right: 0!important
    }
}

@media (max-width: 991px) {
    body .no-padding-sm-down {
        padding-left:0!important;
        padding-right: 0!important
    }
}

@media (max-width: 767px) {
    body .no-padding-xs-down {
        padding-left:0!important;
        padding-right: 0!important
    }
}

body sup {
    top: -.3em;
    line-height: 1em
}

body p {
    margin-bottom: 1.5rem
}

body p.smaller {
    font-weight: 400;
    font-size: 15px;
    letter-spacing: .02em;
    line-height: 1.4em;
    font-style: normal
}

body .indented {
    text-indent: 0em;
}

body .preheading {
    text-indent: 0;
    position: absolute!important;
    top: 4px;
    left: 0
}

body .h1,body h1 {
    font-size: 115px; 
    letter-spacing: -0.5rem;
    line-height: .9em;
    font-family: 'DM Sans';
    font-weight: 530;
    font-style: normal;
    margin-bottom: 1.5rem;
    position: relative
}

body .h2,body h2 {
    font-weight: 400;
    font-size: 62px;
    letter-spacing: -0.25rem;
    line-height: 1em;
    font-style: normal;
    margin-bottom: 1.5rem;
    position: relative
}

body .h2.indented,body h2.indented {
    text-indent: 0em;
}

body .h3,body h3 {
    font-weight: 400;
    font-size: 174px;
    letter-spacing: 0;
    line-height: 1em;
    text-transform: uppercase;
    font-style: normal;
    margin-bottom: 1.5rem;
    position: relative
}

body .h4,body h4 {
    font-size: 18px;
    letter-spacing: -0.01em;
    line-height: 1.4em;
    font-family: 'DM Sans';
    font-weight: 530;
    font-style: normal;
    margin-bottom: 1.5rem;
    position: relative
}

body .h5,body h5 {
    font-family: 'DM Sans';
    font-weight: 400;
    font-size: 26px;
    letter-spacing: -0.08rem;
    line-height: 1.15em;
    font-style: normal;
    margin-bottom: 1.5rem;
    position: relative
}

body .h6,body h6 {
    font-family: 'DM Sans';
    letter-spacing: -0.05rem;
    font-size: 44px;
    line-height: 1em;
    font-weight: 530;
    font-style: normal;
    margin-bottom: 1.5rem;
    position: relative
}

body .h7 {
    font-family: 'DM Sans';
    letter-spacing: -0.05rem;
    font-weight: 400;
    font-size: 30px;
    line-height: 1em;
    font-style: normal;
    margin-bottom: 1.5rem;
    position: relative
}

body .underlined {
    text-decoration: none;
    color: #018fff;
    background-image: linear-gradient(to right,#018fff 0,#018fff 100%);
    background-repeat: repeat-x;
    background-position: 0 1.1em;
    background-size: 100% 1px
}

body .h1 a:not(.main-btn):not(.logo),body .h2 a:not(.main-btn):not(.logo),body .h3 a:not(.main-btn):not(.logo),body .h4 a:not(.main-btn):not(.logo),body .h5 a:not(.main-btn):not(.logo),body .h6 a:not(.main-btn):not(.logo),body .h7 a:not(.main-btn):not(.logo),body h1 a:not(.main-btn):not(.logo),body h2 a:not(.main-btn):not(.logo),body h3 a:not(.main-btn):not(.logo),body h4 a:not(.main-btn):not(.logo),body h5 a:not(.main-btn):not(.logo),body h6 a:not(.main-btn):not(.logo),body p a:not(.main-btn):not(.logo) {
    text-decoration: none;
    color: #000e1a;
    background-image: linear-gradient(to right,#000e1a 0,#000e1a 100%);
    background-repeat: repeat-x;
    background-position: 0 1.1em;
    background-size: 100% 0px;
}

body .h1 a:not(.main-btn):not(.logo):hover,body .h2 a:not(.main-btn):not(.logo):hover,body .h3 a:not(.main-btn):not(.logo):hover,body .h4 a:not(.main-btn):not(.logo):hover,body .h5 a:not(.main-btn):not(.logo):hover,body .h6 a:not(.main-btn):not(.logo):hover,body .h7 a:not(.main-btn):not(.logo):hover,body h1 a:not(.main-btn):not(.logo):hover,body h2 a:not(.main-btn):not(.logo):hover,body h3 a:not(.main-btn):not(.logo):hover,body h4 a:not(.main-btn):not(.logo):hover,body h5 a:not(.main-btn):not(.logo):hover,body h6 a:not(.main-btn):not(.logo):hover,body p a:not(.main-btn):not(.logo):hover {
    text-decoration: none;
    color: #018fff;
    background-image: linear-gradient(to right,rgba(1,143,255,0) 0,rgba(1,143,255,1) 100%);
    background-position: 0 2em
}

@media (max-width: 1400px) {
    body .indented {
        text-indent:3.5em
    }
}

@media (max-width: 1200px) {
    body .indented {
        text-indent:3.25em
    }

    body .h1,body h1 {
        font-size: 93px
    }

    body .h2,body h2 {
        font-size: 50px
    }

    body .h3,body h3 {
        font-size: 144px
    }

    body .h5,body h5 {
        font-size: 24px
    }

    body .h6,body h6 {
        font-size: 38px
    }

    body .h7 {
        font-size: 30px
    }
}

@media (max-width: 991px) {
    body {
        font-size:17px
    }

    body .indented {
        text-indent: 0em;
    }

    body .h1,body h1 {
        font-size: 70px
    }

    body .h2,body h2 {
        font-size: 40px
    }

    body .h3,body h3 {
        font-size: 112px
    }

    body .h4,body h4 {
        font-size: 17px
    }

    body .h5,body h5 {
        font-size: 22px
    }

    body .h6,body h6 {
        font-size: 32px
    }

    body .h7 {
        font-size: 26px
    }
}

@media (max-width: 767px) {
    body {
        font-size:16px
    }

    body .indented {
        text-indent: 0em;
        overflow-wrap: normal;
        word-wrap: normal;
        -ms-word-break: normal;
        word-break: keep-all;
        -ms-hyphens: none;
        -moz-hyphens: none;
        -webkit-hyphens: none;
        hyphens: none;
    }

    body .preheading {
        top: -1px;
    }

    body p.smaller {
        font-size: 13px
    }

    body .h1,body h1 {
        font-size: 48px;
        letter-spacing: -0.32rem;
    }

    .hero-image-video-wrapper .hero-content h1.indented {
    text-indent: 0em;
    }

    .hero-image-video-wrapper .hero-content h1 {
    width: 100%;
    }

    body .h2,body h2 {
        font-size: 32px;
        letter-spacing: -0.1rem;
        line-height: 1.04em;
    }

    body .h2.indented,body h2.indented {
        text-indent: 0em;
    }

    body .h3,body h3 {
        font-size: 77px
    }

    body .h4,body h4 {
        font-size: 16px
    }

    body .h5,body h5 {
        font-size: 20px
    }

    body .h6,body h6 {
        font-size: 26px
    }

    body .h7 {
        font-size: 22px
    }
}

body#tinymce .color-white {
    color: #000!important
}

body#tinymce .color-white::before {
    content: "Notification: WYSIWYG's will display white text as black, but correctly on the front-end.";
    font-size: 11px;
    line-height: 1.2em;
    display: block;
    width: 100%;
    font-weight: 400!important
}