/*
Theme Name: AliceAyel 2025 (Sketch Child)
Theme URI: https://wordpress.com/themes/sketch/
Description: A clean, responsive portfolio theme with options for a custom site logo, a featured content slider, and lots of room to share your work.
Version: 2.0.0
Author: benbois
Author URI: https://wordpress.com/themes/
Template: sketch
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aliceayel
Tags: featured-images, full-width-template, one-column, photography, portfolio, right-sidebar, rtl-language-support, theme-options, translation-ready, two-columns
*/

/* Prevent any object from being highlighted upon touch event - for APP only */
* { -webkit-tap-highlight-color: #f2481a30; }

/*
fonts
*/
@font-face {
  font-family: dashicons;
  src: url("fonts/dashicons.ttf") format("truetype");
}

@font-face {
  font-family: opendyslexic;
  src: url("fonts/OpenDyslexic-Regular.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "opendyslexic_italic";
  src: url("fonts/OpenDyslexic-Italic.otf") format("opentype");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "opendyslexic_bold";
  src: url("fonts/OpenDyslexic-Bold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "opendyslexic_italicbold";
  src: url("fonts/OpenDyslexic-BoldItalic.otf") format("opentype");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "arial_narrow";
  src: url("fonts/arial-narrow.ttf") format("truetype");
}

@font-face {
    font-family: SulphurPoint;
    src: url('fonts/SulphurPoint-Light.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: SulphurPoint;
    src: url('fonts/SulphurPoint-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: SulphurPoint;
    src: url('fonts/SulphurPoint-Bold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}


@font-face {
    font-family: Lato;
    src: url('fonts/Lato-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: Lato;
    src: url('fonts/Lato-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: Lato;
    src: url('fonts/Lato-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: Lato;
    src: url('fonts/Lato-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: Lato;
    src: url('fonts/Lato-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: Lato;
    src: url('fonts/Lato-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: Lato;
    src: url('fonts/Lato-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: Lato;
    src: url('fonts/Lato-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
  font-family: 'aa_font';
  src:  url('fonts/aa_font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

#page {
    min-height: 100vh;
    padding: 0;
    padding-bottom: 27px;
}

body,
button,
input,
select,
textarea {
  color: #202020;
}

body {
    background-color: #fff;
    overflow:initial !important; 
}

/* remove ffx clipper */
a, a:focus, a:hover {
    outline:none;
    transition: none !important;
}

::-moz-focus-inner {
    border:0;
}

input[type="range"]::-moz-focus-outer {
    border: 0;
}

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"] {
    font-family: Lato, Helvetica, Arial, sans-serif;
}

blockquote {
    color: #777;
    font-style: italic;
    margin: 0 0 24px;
    text-align : justify;
    border: none;
    padding: 10px;
    font-size: 1.25em;
    line-height: 1.35em;
}

.current_page_item a,
.current-menu-item a {
  color: #999 !important;
}
.current_page_item > a,
.current-menu-item > a {
  color: #f68060!important;
}

.main-navigation li:not([class^="swpm-menu-sm"]) {
    padding-left: 10px;
}

.main-navigation li li:hover > a {
  color: #f68060 !important;
}

.justify {
    text-align: justify;
}

.bold {
    font-weight: 600;
}

.dyslexic {
    font-family: opendyslexic, sans-serif;
    color: #AD5D1D;
}

.standard {
    color: #D14E2C;
}

.relative {
    position: relative;
}

.books .relative  {
    margin-top: 35px;
}

.center {
    text-align: center;
}

.fixed {
    position: fixed !important;
}

.clearboth {
    float: none;
    clear: both;
}

.circled {
    border: 1px solid blue;
    border-radius: 48% 50%;
    padding: 3px 3px 5px;
}

.sulphur-me {
    font-family: 'SulphurPoint', 'Lato', sans-serif;
}

.highlight-green,
.highlight-lightgreen,
.highlight-darkgreen,
.highlight-yellow,
.highlight-orange
{
    padding: 0 5px;
}

.highlight-green {
    background-color: lime;
}

.highlight-lightgreen {
    background-color: #d4ea6b;
}

.highlight-darkgreen {
    background-color: #069a2e;
}

.highlight-yellow {
    background-color: yellow;
}

.highlight-orange {
    background-color: orange;
}

.menu * {
    margin-bottom: 0;
}

details {
    margin-bottom: 50px;
    background: #f4f0f0;
    border-radius: 0 0 6px 6px;
}

summary {
    font-style: italic;
    line-height: 1.1em;
    margin-bottom: 20px;
    color: rgb(242 72 26 / 100%);
    background: #fff;
}

summary:hover {
    cursor: pointer;
    border-right: 10px solid rgb(242 72 26 / 100%);
    
}

[open] summary {
    border-bottom: 1px solid rgb(242 72 26 / 100%);
}

summary::marker {
    font-style: normal;
    font-size: 1.1em;
    content: "❓\00a0\00a0";
}

[open] summary::marker {
    font-size: 1.1em;
    content: "❌\00a0\00a0";
}

summary::after {
    content: " afficher la solution…";
}

[open] summary::after {
    content: " cacher la solution…";
}

@keyframes open {
    0% {opacity: 0; margin-top: -20px}
    100% {opacity: 1; margin-top: 0}
}

details[open] summary ~ * {
    animation: open .7s ease-in-out;
}

/* Header */
.site-header {
    border-bottom: none;
    box-shadow: 0 7px 8px -9px black;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 50 !important;
    margin: 0 !important;
    padding: 10px 0 0;
    min-height: 120px;
    text-align: center;
}

.site-header .main-navigation {
    text-align: left;
}

.site-title {
    line-height: 1.5;
    margin-top: -30px;
    padding-left: 60px;
    color: #333;
}

.site-description {
    display: block;
    font-family: Lato, Helvetica, Arial, sans-serif;
    padding-left: 0;
    color: #f2481a;
    text-transform: uppercase;
    font-size: .7em;
    letter-spacing: 4px;
    line-height: 1em;
    margin:2px 0 0 3px !important;
    text-align: center;
    font-weight: bold;
}

.site-description em {
    font-style: normal;
    letter-spacing: 3.5px;
    color: #a0a0a0;
    font-weight: 600;
}

.site {
    margin: 27px auto 0;
    margin-top: 0;
}

/* resources */
.resources blockquote {
    font-style: normal;
}

.resources blockquote, .resources blockquote p {
    color: #454545;
}

.resource-table-audio {
    width:100%;
    vertical-align: bottom;
    margin-bottom: 10px;
    height: 31px;
    margin-top: 10px;
}

.resource-col-audio {
    float: left;
    text-align: center;
    width: 100%;
    margin-bottom: 5px;
}

.resource-col-docs {
    display: none;
}

.icon-PDF, .icon-ODT, .icon-DOC, .icon-MP3, .icon-MP4{
    width: 52px;
    height: 52px;
    display:inline-block;
    margin: 0 1px 1px;
    border-radius: 5px;
    background-size: 52px 52px;
}

.aa-res-buttons .resource-table-audio .icon-PDF, .aa-res-buttons .resource-table-audio .icon-MP3 {
    margin: 0 10px;
    opacity: .9;
}

.pfph3{
        margin-bottom: 10px;
        text-transform: none;
}

.pfpNav {
        display:none;
}

.nouveaute {
    background: 0 0 url("images/nouveaute.png") no-repeat;
    width: 67px;
    height: 63px;
    position: absolute;
    bottom: 80px;
    right:calc( 50% - 67px/2 - 80px );
}

/* books page */
.books {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 450px));
  justify-content: center;
  gap: 25px;
  padding: 10px;
}

.books .column {
    padding: 20px;
    text-align: center;
    border-radius: 8px;
    background: rgb(200 200 200 / 10%);
    border: 1px solid #f3f3f3;
    float: none;
    min-height: 310px;
    position: relative;
}
.books .asp_product_name.tooltip-wrapper {
    cursor: help;
}
.books .column .asp_product_name::before {
    content: '?';
    padding: 0 5px;
    margin-right: 10px;
    border: 2px solid #f2481a;
    color: #fff;
    background: #f2481a;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 15px;
    display: none;
}
.books .column::before {
    content: '?';
    padding: 3px 5px;
    margin-right: 10px;
    color: #fff;
    background: #f2481a;
    border-radius: 50%;
    display: inline-block;
    width: 34px;
    height: 34px;
    font-size: 15px;
    position: absolute;
    right: -15px;
    top: -8px;
    font-weight: 900;
    font-size: 1.2em;
}
.books .column .asp_product_name {
    color: #888;
    line-height: 1em;
    font-size: .9em;
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
    display: block;
    width: 100%;
}

.books .column .asp_product_item_thumbnail {
    width: 100%;
    text-align: center;
}

.books .column .asp_product_item_thumbnail img {
    height: 140px;
    width: auto;
    float: unset;
}

.books .column .asp_product_description {
    line-height: 1.1em;
    font-size: .8em;
    text-align: justify;
    overflow: hidden;
    overflow-y: scroll;
    overflow-wrap: normal;
    height: 180px;
    border: none;
}

.books .column .asp_product_description:hover, .books .column:active::before {
    box-shadow: inset 0 -6px 4px -4px rgb(0 0 0 / 10%);
}

.books .column .asp_price_container {
    color: #666;
    font-weight: 300;    
}

.books .column .asp_price_container span {
    font-weight: 600;
    font-size: .8em;
}

.books .asp_product_buy_btn.blue {
    background: #fff;
    border: 2px solid #d2d2d2;
    box-shadow: none;
    color: #999 !important;
    text-shadow: none;
    font-size: .8em;
    font-weight: normal;
    font-family: inherit;
    height: auto;
    padding: 8px 14px 10px;
    text-transform: uppercase;
    border-radius: 2px;
    display: inline-block;
}

.books .asp_product_buy_btn.blue:hover {
    background: white; 
    border-color: #f68060;
    text-shadow: none;
    box-shadow: none;
    color: #f68060 !important;
}

.swpm-partial-protection {
    position: absolute;
    top: -3000px;
    display: none;
}

/* pdt tooltip */
.tooltip-wrapper {
    cursor: default;
    position: relative;
    width: 100%;
}

.tooltip-wrapper .tooltip {
    z-index:9999;
    text-align: justify;
    color: #222;
    display: block;
    opacity: 0;
    padding: 15px;
    pointer-events: none;
    cursor: default;
    position: absolute;
    transition: all .25s ease-out;
    font-weight:300;
    background: linear-gradient(to bottom, #fafafa, #fefefe);
    margin-left: -21px;
    width: calc( 100% + 42px );
    font-size: .95em;
    line-height: 1.2em;
    border: 1px solid #f3f3f3;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 15px 12px -10px rgb(0 0 0 / 20%);
}

.tooltip-wrapper .tooltip.top {
    left:0;
    bottom: 100%;
    margin-bottom: 15px;
    transform: translateY(20px);
}

.tooltip-wrapper .tooltip.bottom {
    left:0;
    top: 100%;
    margin-top: 15px;
    transform: translateY(-20px);
}

.tooltip-wrapper .tooltip.right {
    top:0;
    left: 100%;
    margin-left: 15px;
    transform: translateX(-20px);
}

.tooltip-wrapper .tooltip.left {
    top:0;
    left: -100%;
    margin-left: -15px;
    transform: translateX(20px);
}

.tooltip-wrapper .tooltip p {
    margin: 0 0 5px;
}

.tooltip-wrapper .tooltip::before {
    content: " ";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;

}

.tooltip-wrapper .tooltip.top::before {
    bottom: -20px;
}

.tooltip-wrapper .tooltip.bottom::before {
    top: -20px;
}

.tooltip-wrapper .tooltip.right::before {
    left: -20px;
}

.tooltip-wrapper .tooltip.left::before {
    right: 20px;
}

.tooltip-wrapper .tooltip::after {
    content: " ";
    height: 0;
    position: absolute;
    width: 0;
}

.tooltip-wrapper .tooltip.top::after {
    border-left: solid transparent 10px;
    border-right: solid transparent 10px;
    border-top: solid 10px rgb(240 242 243 / 100%);
    bottom: -10px;
    left: 50%;
    margin-left: -13px;
}

.tooltip-wrapper .tooltip.bottom::after {
    border-left: solid transparent 10px;
    border-right: solid transparent 10px;
    border-bottom: solid 10px rgb(240 242 243 / 100%);
    top: -10px;
    left: 50%;
    margin-left: -13px;
}

.tooltip-wrapper .tooltip.right::after {
    border-top: solid transparent 10px;
    border-bottom: solid transparent 10px;
    border-right: solid 10px rgb(240 242 243 / 100%);
    left: -10px;
    top: 50%;
    margin-top: -13px;
}

.tooltip-wrapper .tooltip.left::after {
    border-top: solid transparent 10px;
    border-bottom: solid transparent 10px;
    border-left: solid 10px rgb(240 242 243 / 100%);
    right: -10px;
    top: 50%;
    margin-top: -13px;
}

.tooltip-wrapper .asp_product_name:hover .tooltip , .tooltip-wrapper:active .tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.tooltip-wrapper:hover .lcursor {
    cursor: pointer;
}

.site-main .post-navigation, .site-main .paging-navigation {
    margin: 0 0 5px; 
    padding: 6px 0;
    border: none;
}

.nav-previous:hover, .nav-next:hover {
    font-weight: 600;
}

.nav-previous a::before, .nav-next a::after {
    font-family: dashicons, sans-serif;
    vertical-align: -2px;
}

.nav-previous a::before {
    content: "\f341"; /* < */
}

.nav-next a::after{
    content: "\f345"; /* > */
}

.read-link{
    font-weight: normal;
    font-size: .8em;
    color: #FF8500;
    padding: 0 15px;
    border-bottom: 0 !important;
    float: right;
}

.read-link:hover {
    font-weight: normal;
    color: #888;
    padding: 0 15px;
    border-bottom: 0 !important;
}

.other-resources{
    color: #86A612;
}

.more-resources {
    background: linear-gradient(13deg, #fff 90%, rgb(196 242 27 / 70%));
    border-top-right-radius: 20px;
    border-top: 1px solid rgb(196 242 27 / 70%);
    padding-right: 5px;
    margin-top: 15px;
    min-height: 230px;
}

.more-resources blockquote {
    font-size: .9em;
    margin-bottom: 10px;
}

.more-resources h3 {
    margin: 10px 0;
}

.more-resources h3 a {
color: #777;
}

.more-resources h3 a:hover {
color: #f68060;
}

.more-resources h3::before {
    content: "\f546";
    font-family: dashicons, sans-serif;
    font-size:.9em;
    padding-right: 5px;     
    color: #f68060;
}

.more_resource_info {
    font-size: 1.15em;
    line-height: 1.25em;
}



.tagcloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* centrage horizontal */
    gap: .3rem;
    align-items: center;
    line-height: 1.35em;
}
.tagcloud a {
    border: 1px solid #ccc;
    letter-spacing: 1px;
    margin: 0 !important;
    padding: 0 3px;
    line-height:1.5em;
    color: #bbb;
    font-weight: 400;
    border-radius: 4px 0 0 4px;
    display: inline-block;
    opacity: calc((15 - (9 - var(--w))) / 15);
    position:relative;
}
.tagcloud a.weight-1 {
    font-size: 8px !important;
    opacity: 0.6;
}
.tagcloud a.weight-2 {
      font-size: 10px !important;
    opacity: 0.7;
}
.tagcloud a.weight-3 {
    font-size: 12px !important;
    opacity: 0.8;
}
.tagcloud a.weight-4 {
    font-size: 14px !important;
    opacity: 0.9;
}
.tagcloud a.weight-5, .tagcloud a[class*="weight-"]:not(.weight-1):not(.weight-2):not(.weight-3):not(.weight-4) {
    font-size: 16px !important;
    opacity: 1;
}

.tagcloud a:hover, .tagcloud a:focus {
    color: #777;
    border-color: #ccc;
    opacity: 1;
}
.tagcloud a.weight-9plus {
    --w: 9;
}
.tagcloud a span {
    position: absolute;
    top: -1px;
    left: 100%;
    z-index: 2;
    overflow: hidden;
    opacity:0;
    max-width: 0;
    color: white;
    background: #aaa;
    border: 1px solid #ccc;
    border-radius: 0 4px 4px 0;
    transition: 0.3s ease-out;
    transition-property: padding, max-width, opacity;
    display: inline-block;
    letter-spacing: 0;
}
.tagcloud a:hover span {
    padding: 0 7px 0 6px;
    max-width: 40px;
    opacity:1;
    box-shadow: 10px 0 6px 4px #fff;
}

.resources-label a::before, .resources-label span::before {
    content: "\f546";
    font-family: dashicons, sans-serif;
    font-size:1.1em;
    padding-right: 5px;
    color: #86A612;
}

.resources-label {
    text-align: right;
}

.resources-label a, .resources-label span{
    display: inline-block;
    clear: both;
    background: linear-gradient(13deg, #fff 40%, rgb(196 242 27 / 70%));
    color: #86A612;
    padding: 0 10px;
    font-size: .8em;
    font-weight: 400;
    letter-spacing: .15em;
    border-top-right-radius: 20px;
    border-right: 1px solid rgb(196 242 27 / 70%);
    border-top: 1px solid rgb(196 242 27 / 70%);
}

.es_textbox input{
    border: 0;
    border-bottom: 1px solid gray;
    padding: 3px;
}

.es_lablebox {
    display: inline;
    float: left;
    width: 50px;
}

.es_submit_button, #email-subscribers-2 .es_button {
    text-align:center;
}

.emaillist:has(.es_subscription_message.success) {
    line-height: 1em;
    font-family: Lato,sans-serif;
    font-weight: 400;
}
.es_subscription_message.success:before {
    content: '✅';
    font-size: 1.2em;
    margin-right: .15em;
}

.aa-res-buttons .resource-table-audio {
        display: block;
        text-align: right;
        margin-bottom: 20px;
}

.comment {
    padding-top: 10px;
    margin-top: 10px;
}

.comment-content p {
    line-height: 1.1rem;
    font-size: .92em;
    margin-left: 74px;
}

.comment-content p, p.logged-in-as, p.comment-form-comment, .comment-form-comment textarea, p.form-submit,
p.akismet_comment_form_privacy_notice, .comment-meta .comment-metadata {
    margin-bottom: 10px;
}

.comment-form .submit {
    float: right;
    margin-top: 10px;
}
.wp-editor-tools .insert-media {
    color: #999 !important;
    background: white!important;
    border-color: rgb(238, 238, 238)!important;
    border-width: 2.45px!important;
    margin-bottom: 10px!important;
}
.wp-editor-tools .insert-media:hover {
    border-color: #f68060!important;
    color: #f68060!important;
}
.wp-media-buttons {
    float: right!important;
}

#wp-link-wrap, .media-modal-content {
    box-shadow: none!important;
    border: 2px solid #ccc!important;
}

#wp-comment-wrap {
    border: none!important;
}

.comment-meta {
    text-transform: none;
}

.comment-meta .comment-metadata {
    line-height:1.1em;
}

.comment-meta .comment-author img {
    border-radius: 30px;
}

/* search in nav-menu */
.searchform-top {
    display: none;
}
.toggled .searchform-top {
    display: inline-block;
    margin: 10px 0 -10px 20px;
    width: calc( 100% - 40px);
}
.searchform-bottom {
    display: none;
}

.nav-menu .search-results h2.entry-title {
    font-size: 1.1rem;
}

/* WP membership */
.aa-profile {
    margin: 30px 0 0;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 3px solid #ededed;
    color: #5285bb;
    text-transform: none;
}

.entry-header h1.entry-title {
    border-bottom: 1px solid #eee;
    color: #777;
    font-size: 1.25em;
    line-height: 1.36em;
    letter-spacing: 2px;
    margin: 0;
    padding-bottom: 13px;
    margin-bottom: 15px;
}

.swpm-login-widget-logged, .swpm-edit-profile-form, .swpm-login-form-inner, .swpm-pw-reset-widget-inside, .swpm-post-not-logged-in-msg {
    color: #777;
    font-size: .9em;
}

.swpm-rememberme-label {
    width: calc( 50% + 37px ) !important;
    text-align: right;
    margin-right: 10px !important;
}

.swpm-remember-checkbox input[type="checkbox"] {
    vertical-align: -2px;
}

.swpm-edit-profile-form input:not([type="submit"]), .swpm-login-form-inner input:not([type="submit"]), .swpm-pw-reset-widget-inside input:not([type="submit"]), .swpm-edit-profile-form select {
    font-family: Lato, sans-serif;
    font-size: .9em;
    border-bottom: 1px solid gray;
    padding: 3px;
}

.swpm-login-submit {
    margin-top: 15px;
    text-align :center;
}

.swpm-edit-profile-form select {
    color: #777;
    background: #efefef;
    border: 1px solid #eee;
    border-bottom: 1px solid gray;
}

.swpm-edit-profile-form tr:hover {
    background-color: #f9f9f9;
}

.swpm-edit-profile-form td {
    padding: 2px 3px;
    display: block;
    border: none;
}

.swpm-edit-profile-form label {
    font-weight: 300;
    font-style: italic;
    font-size: 1em!important;
}

.swpm-logged-label, .swpm-login-form-inner label, .swpm-pw-reset-email {
    width: 40%;
    float: left;
    font-weight: 400;
    margin-bottom: 2px;
    text-align: right;
    padding-right: 10px;
    font-size:1.22em;
}

.swpm-login-form-inner .swpm-rememberme-label {
    text-align: right;
    margin-right: 10px;
}

.swpm-password-input, .swpm-username-input {
    position: relative;
    display: inline-block;
}

.swpm-password-field, .swpm-username-field {
    padding-right: 26px !important;
}

.swpm-password-toggle-checkbox-label {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute;
    top: 8px;
    right: 2px;
}

.swpm-password-toggle-checkbox-label input[type="checkbox"] {
    position: absolute;
    visibility: hidden;
    width: 24px;
    height: 24px;
    top: 0;
    right: 0;
}

.swpm-password-toggle-checkbox-label input[type="checkbox"] + span::after {
    font-family: dashicons, sans-serif;
    content: '\f177';
    top: -6px;
    right: 0;
    background-color: transparent;
    display: block;
    position: absolute;
    height: 32px;
    width: 24px;
    font-style: normal;
    cursor: pointer;
}

.swpm-password-toggle-checkbox-label input[type="checkbox"] + span::after {
    color:#aaa;
}
.swpm-password-toggle-checkbox-label input[type="checkbox"]:checked + span::after {
    content: "\f530";
    color:#f68060;
}

.swpm-pw-reset-email{
    text-align: left;
    padding-right: 10px;
}

}
.swpm-pw-reset-email, .swpm-pw-reset-email-input {
    font-size: 1.25em;
    width: 100%;
}

.swpm-pw-reset-email.swpm-margin-top-10 {
    margin-top: 0;
}

.swpm-logged-label {
    background-color: #f9f9f9;
}

.swpm-logged-label, .swpm-logged-value {
    padding-left: 5px;
}

.swpm-logged-value {
    width: 60%;
    float: right;
}

.swpm-reset-pw-success-box{
    text-align: center;
    border: 1px solid #eacac0;
    padding-left: 5px;
    box-shadow: inset 0 0 26px -12px rgb(234 202 192 / 100%);
    background-color: #fff;
    color: #f68060;
}

.swpm-login-form-inner label, .swpm-login-form-inner input[type="text"], .swpm-login-form-inner input[type="password"], .swpm-password-input, .swpm-username-input {
    width: 99%;
    text-align: left;
    padding-right: 0;
}

.swpm-edit-profile-form {
    font-size: 1.1em;
}

.swpm-edit-profile-form table {
    border-spacing: 0 15px;
}


.error {
    text-align: right;
}

.error ul li{
    font-size: .8em;
}

.swpm-reset-pw-error, .swpm-profile-update-error, .swpm-login-widget-action-msg:not(:empty) {
    text-align: center;
    background-color: #fae8de;
    border-radius: 5px;
    color: #f55;
    font-weight: 400;
    font-size:.9em;
    display:inline;
    padding: 2px 12px;
}

.swpm-reset-pw-error::before, .swpm-login-widget-action-msg:not(:empty)::before {
    font-family: dashicons, sans-serif;
    vertical-align: -3px;
    content: "\f534\00a0";
}

.swpm-pw-reset-submit {
    margin-top: 15px;
}

.swpm-logged-value{
    color: #444;
    margin-bottom: 1px;
    border-bottom: 1px solid #f5f5f5;
}

.swpm-edit-profile-link, .swpm-forgot-pass-link, .swpm-renew-profile-link {
    float:left;
}

.swpm-logged-logout-link, .swpm-join-us-link {
    float:right;
}

.swpm-edit-profile-link, .swpm-logged-logout-link, .swpm-forgot-pass-link, .swpm-join-us-link, .swpm-renew-profile-link {
    margin-top: 30px;
    width: 33%;
    text-align: center;     
}

.swpm-edit-profile-link, .swpm-logged-logout-link, .swpm-renew-profile-link {
    width: 33%;
}

.swpm-forgot-pass-link, .swpm-join-us-link {
    width: 50%;
}

.swpm-edit-profile-link a:hover, .swpm-logged-logout-link a:hover, .swpm-forgot-pass-link a:hover,
.swpm-join-us-link a:hover, .swpm-post-not-logged-in-msg a:hover, .swpm-renew-profile-link a:hover {
    padding: 4px 6px;
    font-weight: 400;
}

/* Social Media */
[class^="swpm-menu-sm"] {
    font-family: "aa_font", sans-serif;
    font-size:1.5em;
    display: inline-block!important;
    margin: 30px 0 40px;
    padding-left: 25px;
}

[class^="swpm-menu-sm"] > a {
    border: none!important;
    color: #bbb!important;
    padding:0!important;
}

[class^="swpm-menu-sm"] > a:hover {
    color: #888!important;
}

.related-resources .tag-resource img {
    width: 200px;
    margin-left: 14px;
    margin-top: 0;
}

.related-resources .tag-resource p {
    margin-bottom: 14px;
    line-height: 18px;
    color: #777;
}

.more-resources img {
    width: 100px;
    margin-left: 14px;
    margin-top: 0;
}

.swpm-post-not-logged-in-msg {
    font-size: .9em;
    width: 50%;
    float: left;
    text-align: center;
    padding: .5em 0 1em;
}

.swpm-row-form {
    width: 100%;
    clear: both;
}

.active {
    color:#f68060 !important;
}

.asp_post_thumbnail img {
    width: 50% !important;
    border: none !important;
}

.asp-stripe-form, .asp_post_thumbnail, .asp_product_buy_btn_container, .asp_price_container {
    width:100% !important;
    text-align: center;
}

.entry-meta {
    display: none !important;
}

.asp_product_link {
    font-size: 15px;
    text-align: center;
    line-height: 18px;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.asp_product_link em {
    font-size: .8em;
}

/* Search Form */
.searchform::before, .searchform::after{
    content:"";
    display:table;
}

.searchform::after{
    clear:both;
}

.searchform{
    padding-left:2px;
}

.searchform input[type="text"] {
    padding: 9px 5px;
    border-top-right-radius:0;
    border-bottom-right-radius:0;
    font-family: Lato, Helvetica, Arial, sans-serif;
    width: calc( 100% - 80px );
    border-right:none;
}

.searchform input[type="text"]:focus {
    outline: 0;
    background: #fff;
    box-shadow: none;
    border-color: #f68060;
}

.searchform input::placeholder {
    color: #bbb;
    font-weight: normal;
}
.searchform input:focus::placeholder {
    color: #ddd;
}

.searchform button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    width: 80px;
    font: bold 15px/38px Lato, Helvetica, Arial, sans-serif;
    color: #fff;
    text-transform: uppercase;
    background: #ccc;
    border-radius: 0 3px 3px 0;
    transition-property: none !important;
    border: 1px solid #ccc;
    border-left: none;
}  

.searchform button:hover {    
    background: #bbb;
}  

.searchform button:active,.searchform button:focus{  
    background: #aaa;
    outline: 0;  
}

.searchform:has(input:focus) button {
    border-color: #f68060;
}

.searchform button::before {
    content: '';
    position: absolute;
    border-width: 10px 10px 10px 0;
    border-style: solid solid solid none;
    border-color: transparent #ccc;
    top: 11px;
    left: -7px;
}

.searchform button:hover::before{
    border-right-color: #bbb;
}

.searchform button:focus::before,
.searchform button:active::before{
        border-right-color: #aaa;
}     

.searchform button::-moz-focus-inner {
    border: 0;
    padding: 0;
}   

/* cancellation */
.cancellation-note, .ccupdate-note {
    background-color: #FFF4F2;
    border: solid 2px #f68060;
    color: #555;
    line-height: 1.8em;
    overflow: hidden;
    padding: 20px;
    margin: 20px 0 0;
    font-size: .9em;
    border-radius: 6px;
    display: inline-block;
}

.ccupdate-note {
    background-color: #EAFFE9;
    border-color: #62BF5E;
}

.cancellation-note h3 {
    margin: 0 0 20px;
    text-align: center;
    font-weight: 600;
}

.cancellation-note span::before, .cancellation-note button[type="submit"] {
    font-family: dashicons, sans-serif;
    font-size: 18px;
    vertical-align: bottom;
    content: "\f534";
    padding-right: 5px;
}

.cancellation-note em {
    font-weight: 400;
}

.cancellation-note strong {
    color: red;
}

.cancellation-note span {
    color: #21759b;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: inline-block;
    margin-bottom: 5px;
    padding: 0;
}

.swpm-account-delete-button, .swpm-account-renew-button, .swpm-account-ccupdate-button {
    border: 3px solid #eee;
    box-sizing: border-box;
    border-radius: 3px;
    margin: 20px auto;
    padding: 5px 10px;
    color: #777 !important;
    transition: all 0.3s ease-in-out;
    font-family: Lato, Helvetica, Arial, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
}

.swpm-account-renew-button {
    width: 215px;
}

.swpm-account-delete-button::before {
    font-family: dashicons, sans-serif;
    color: #f68060;
    font-size: 18px;
    vertical-align: bottom;
    content: "\f534";
    padding-right: 5px;
}

.swpm-account-ccupdate-button::before, .swpm-account-renew-button::before {
    font-family: dashicons, sans-serif;
    color: #269B21;
    font-size: 18px;
    vertical-align: bottom;
    content: "\f463";
    padding-right: 5px;
}

.swpm-account-ccupdate-button::before {
    content: "\f18e";
}

.swpm-edit-profile-submit {
    border-color: #888 !important;
}

.swpm-edit-profile-submit:hover {
    border-color: #21759b !important;
    color: #21759b !important;
}

.swpm-account-delete-button, .cancellation-note button[type="submit"] {
    width: 300px;
    background-color: #fff;
    border-color: #888;
    color: #777;
}

.swpm-account-ccupdate-button {
    width: 300px;
    background-color: #fff;
    border-color: #888;
}

.swpm-account-delete-button:hover, .cancellation-note button[type="submit"]:hover {
    border-color: #f68060;
    color: #f68060 !important;
}

.swpm-account-renew-button:hover, .swpm-account-ccupdate-button:hover {
    border-color: #269B21;
    color: #269B21 !important;
}

.swpm-account-ccupdate-button:hover {
    box-shadow: 0 0 8px 0 rgb(38 155 33 / 80%);
}

.akismet_comment_form_privacy_notice, .swpm-login-to-comment-msg, .logged-in-as {
    display: none !important;
}

.file_input_textbox {
    border: 0 !important;
    border-bottom: 1px solid #ededed !important;
    min-width: 300px !important;
    font-size: 16px !important;
    padding: 12px 0  !important;
    font-style: italic !important;
}

hr.res {
    margin-top: 15px;
    border-color: #D5F65B;
}

.resources .wp-post-image, .shadowme {
/*
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    border-radius: 5px;
*/
    border-radius: 6px;
}

.aavid-container {
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    position: relative;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

hr.aavid {
    margin-top:15px;
    border: 0;
    border-top: 1px solid #eee;
    margin-bottom: 15px;
}

.aavid-inner {
    position: absolute;
    inset: 0;
}

.aavid-inner video, .aavid-inner .mejs__video, .aavid-inner .mejs__overlay.mejs__layer.mejs__overlay-play, .aavid-inner .mejs__overlay.mejs__layer {
    width: 100% !important;
    height: 100% !important;
}

.mejs__container-fullscreen .mejs__captions-layer {
    font-size: 1.4em !important;
}

.mejs__captions-text * {
    background: none !important;
    box-shadow: none !important;
}

.mejs__captions-text {
    background: rgb(0 0 0 / 75%) !important;
    box-shadow: none !important;
    font-size: 1.1em;
    padding: 0 5px !important;
    font-family: Lato, Helvetica, Arial, sans-serif;
    font-weight: bold;
}

.mejs__container-fullscreen .mejs__captions-layer {
        font-size: 1.2em !important;
    }

@media screen and (max-width: 56.875em) { /* ~875px */
    .mejs__container-fullscreen .mejs__captions-layer, .mejs__captions-layer {
        font-size: .9em !important;
    }
}

.mejs__captions-button button[title="Captions/Subtitles"] {
        background-position: -120px 0;
}

.mejs__captions-button.mejs__captions-enabled button[title="Captions/Subtitles"] {
        background-position: -140px 0;
}

.audiobook_item {
    padding-top: 10px;
    padding-bottom: 25px;
    border-bottom: 1px solid #eee;
}

.stagesBlock {
    width: 100%;
    display: block;
    margin: 0 auto 27px;
}

.stagesBtn {
    display:inline-block;
    cursor:pointer;
    font-size: 12px;
    font-weight: bold;
    padding: 0 13px;
    width: 80px;
    height: 80px;
    text-decoration:none;
    margin: 7px;
    text-align: center;
    line-height: 1.1em;
    text-transform: uppercase;
    border: solid 1px rgb(232 150 64 / 100%);
    border-radius: 5px;
    background: linear-gradient(0deg, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 100%) 65%, rgb(204 124 39 / 100%) 66%, rgb(232 150 64 / 100%) 66%, rgb(232 150 64 / 100%) 100%);
    color: #fff !important;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 15%);
}

.stagesBtn:hover {
    position:relative;
    top:3px;
    background: linear-gradient(0deg, rgb(248 248 248 / 100%) 0%, rgb(248 248 248 / 100%) 65%, rgb(207 149 87 / 100%) 66%, rgb(245 121 0 / 100%) 66%, rgb(245 121 0 / 100%) 100%);
    color: #fff !important;
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 20%);
    border-color: rgb(245 121 0 / 100%);
}

.stagesBtn:hover::after {
    content: attr(info);
    display: block;
    z-index: 100;
    background: #3A9ADF;
    left: -20px;
    margin: 10px;
    width: 160px;
    position: absolute;
    top: calc(100% - 5px);
    text-decoration: none;
    text-transform: initial;
    color: #FFF;
    font-weight: bold;
    font-size: 13px;
    text-align: justify;
    border-radius: 3px;
    padding: 5px;
    box-shadow: 0 3px 3px 0 rgb(0 0 0 / 20%);
}

.stagesBtn:hover::before {
    border: solid;
    border-color: #3A9ADF transparent;
    border-width: 0 24px 12px 0;
    bottom: -5px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

.stagesBtn span {
    padding-top: 20px;
    clear:both;
    font-size: 35px;
    display: block;
    color: #D77C28;
    position:relative;
}

.stagesBtn span.stage-freemium::before,
.stagesBtn span.not-stage-freemium::before{
    position: absolute;
    z-index: 10;
    font-weight: 600;
    color: #fff;
    letter-spacing: 1px;
    box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
    font-family: dashicons, sans-serif;
    font-size: .55em;
    padding: .25em .1em;
    top: -32px;
    left: -23px;
    border-radius: 4px;
}

.stagesBtn span.stage-freemium::before {
    content: '\f528';
    background-color: rgb(78 154 0 / 80%);
}

.stagesBtn span.not-stage-freemium::before {
    content: '\f160';
    background-color: rgb(154 78 0 / 80%);
}

.stagesBtn img.checked-step {
    position:absolute;
    top: -26px;
    right: -22px;
}

.stagesBtn img.checked-step-current {
    position:absolute;
    top: -32px;
    right: -27px;
}

.stagesBtn span.left::before,
.stagesBtn span.right::after {
    font-size: 0.8em;
    padding-bottom: 3px;
    position:absolute;
}

.stagesBtn span.left::before {
    content: '❮';
    left: -50px;
    width: 40px;
}

.stagesBtn span.right::after {
    content: '❯';
    right: -50px;
    width: 40px;
}

.stagesBtn.disabled span.right::after {
    right: 0;
}

.stagesBtn:hover span {
    color: #FF6200 !important;
}

.stagesBtn.disabled, .stagesBtn.disabled-pack {
    pointer-events: none;
    background: linear-gradient(0deg, rgb(248 248 248 / 70%) 0%, rgb(248 248 248 / 70%) 65%, rgb(207 149 87 / 70%) 66%, rgb(230 177 123 / 70%) 66%, rgb(230 177 123 / 70%) 100%);
    box-shadow: none;
    border-color: rgb(230 177 123 / 70%);
}

.stagesBtn.disabled span, .stagesBtn.disabled-pack span {
    color: rgb(230 177 123 / 70%);
    position: relative;
}

.stagesBtn.disabled span::after, .stagesBtn.disabled-pack span::after {
    display: inline-block;
    position: absolute;
    color: rgb(245 121 0 / 100%);
    font-size: 16px;
    letter-spacing: 2px;
    transform: rotate(-10deg);
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0 0 2px rgb(254 254 254 / 100%);
}

.stagesBtn.disabled span::after {
    content: 'Coming soon';
    top: calc( 50% - 38px );
    left:calc( 50% - 38px );
    letter-spacing: 2px;
}

.stagesBtn.disabled-pack span::after {
    content: 'Not included';
    top: calc( 50% - 38px );
    left:calc( 50% - 42px );
    letter-spacing: 0;
    line-height: 1.1em;
}

.stagesBtn.current {
    position:relative;
    top:3px;
    background: linear-gradient(0deg, rgb(238 238 238 / 100%) 0%, rgb(238 238 238 / 100%) 65%, rgb(207 149 87 / 100%) 66%, rgb(245 121 0 / 100%) 66%, rgb(245 121 0 / 100%) 100%);
    color: #fff !important;
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 20%);
    border-color: rgb(245 121 0 / 100%);
}

.stagesBtn.current span {
    color: #FF6200;
    position: relative;
    text-decoration: underline dotted;
}

.stagesBtnTitle {
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top: 2px solid rgb(196 242 27 / 70%);
    padding-right: 5px;
    margin-top: 15px;
    text-align: center;
}

.hide-me {
    display: none;
}

.metauser-note {
    text-align: center;
    color: #999;
    font-size: 0.7em;
    font-weight: normal;
    letter-spacing: 1px;
    line-height: 1em;
    margin-top: 10px;
}

.vid-ko {
    font-size: .75em;
    margin-left: 10px;
    letter-spacing: .1em;
    color: #C17D11;
    font-weight: bold;
}

.vid-ko::before {
    font-family: dashicons, sans-serif;
    vertical-align: -2px;
    margin-right: 3px;
    content: "\f530";
    font-weight: normal;
}

.formError .formErrorContent {
    min-width: 250px !important;
    line-height: 1.4em;
    border: none !important;
}

.formError .formErrorArrow div {
    border: none !important;
}

.qtip-content {
    font-size: 17px;
    color: #555;
    padding: 6px 9px 9px;
    line-height: 18px;
    font-weight: 600;
    font-family: "arial_narrow", sans-serif;
    text-align: justify;
}

.tooltipsall {
    font-weight: 400;
    cursor: help;
    border-bottom: 1px dashed #9BC111 !important;
    white-space: nowrap;
}

.wikdef {
    font-size: 0.9em;
    font-weight: 200;
    font-style: italic;
    text-align: justify;
}

/* disabling for chat */
ul#sac-messages li span.tooltipsall {
    font-family: inherit;
    font-style: normal;
    font-weight: 200;
    border-bottom: none !important;
    cursor: auto;
}

.qtip {
    background-color: #F8FEE3;
    border-color: #CDE08E;
    color: #474A39;
}

/* change id */
.post-1729 header {
    display: none;
}

.post-1729 h2:first-child {
    margin-top:0;
}

.trustpilot-logo {
    font-family: arial, sans-serif;
    color: #585858;
    font-weight: 600;
    letter-spacing: -0.03125em;
    font-size: .95em;
}
.trustpilot-logo:before {
    content: 'O';
    font-family: aa_font, sans-serif;
    color: #00b67a;
    padding-right: 0.1em;
    font-size: 1.25em;
}

.trustpilot-stars {
    font-family: aa_font, sans-serif;
    font-size:1.1em;
    color: #fff;
}
.trustpilot-stars .star {
    display: inline-block;
    margin-right: 0.15em;
    width: 1.1em;
    height: 1.1em;
    line-height: 1.1em;
    padding-left: .05em;
}
.trustpilot-stars .star:nth-child(1), .star1 { background: #f44336!important; }
.trustpilot-stars .star:nth-child(2), .star2 { background: #ff9800!important; }
.trustpilot-stars .star:nth-child(3), .star3 { background: #ffeb3b!important; }
.trustpilot-stars .star:nth-child(4), .star4 { background: #8bc34a!important; }
.trustpilot-stars .star:nth-child(5), .star5 { background: #4caf50!important; }

/* Trustpilot reviews */
h2.ttp-reviews {
    text-align: center;
    text-transform: none;
    font-size: 1.2em;
}

h2.ttp-reviews a{
    color: #333 !important;
}

h2.ttp-reviews img {
    vertical-align: bottom;
    padding: 0 4px 3px 0;
}

.trustpilot-review .wpmslider-pager {
    display: none !important;
}

.trustpilot-review .wpmslider-controls {
    padding: 0!important;
    height:1px!important;
}

.trustpilot-review .wpmslider-viewport {
    border-radius: 8px;
    cursor: ew-resize;
}

.trustpilot-review .wpmtst-testimonial-inner {
    border-radius: 20px 0;
    border-left: 2px solid rgb(60 173 255 / 25%);
    margin: 2px 4px;
    height: calc(100% - 8px) !important;
    width: calc(100% - 10px) !important;
    display: flex!important;
    flex-direction: column!important;
    justify-content: space-between!important;
}

.trustpilot-review .wpmtst-testimonial-heading {
  background-position: left top!important;
}

.trustpilot-review .wpmtst-testimonial-heading a {
    color: #333;
}

.trustpilot-review .testimonial-content {
    flex-grow: 1!important;
    text-align: justify!important;
    font-size: 1em!important;
    line-height: 1.3em!important;
}

.trustpilot-review .wpmtst-testimonial-field.name-review {
    margin-top: auto!important;
    margin-bottom: 0!important;
    font-weight: bold;
    color: #666;
}

.trustpilot-review .wpmtst-testimonial-field.date-review {
    font-size: .8em;
    line-height: .6em;
}

.trustpilot-review .wpmtst-testimonial-field.rate-review {
    margin-top: 4px!important;
    text-align: center!important;
    line-height: 1.1em;
}

.trustpilot-review .strong-rating-wrapper {
    line-height: inherit;
}
.trustpilot-review .strong-rating-wrapper .strong-rating span {
    width: 1.1em;
    height: 1.1em;
    font-size: 1.1em;
    background: #00b67a;
    margin: 0 .05em;
    font-family: aa_font, sans-serif;
    color:#fff;
}
.trustpilot-review .strong-rating-wrapper .strong-rating span:before {
    content:'O';
}

.trustpilot-review .strong-rating-wrapper .star:has(> svg.star_regular) {
    opacity: .25;
    filter: grayscale(100%);
}

.trustpilot-review .strong-rating-wrapper .star svg {
    display: none!important;
}

.choose-way-intro {
    width: 100%;
    margin: 10px 0;
}

.choose-way-intro-col {
    float: left;
    padding: 0 10px 23px;
    text-align: justify;
    border-radius: 0;
    width: 100%;
    margin: 15px 0 25px;
    padding: 10px 20px;
}

div[class*="asp-attach-product"] {
    cursor: pointer;
}

.choose-way-intro-full {
    width:100%!important;
    margin-left:0;
}

.choose-way-intro-half {
    float: left;
    padding: 30px 10px 10px;
    text-align: center;
    background: #fcfeff;
    border-radius: 8px;
    border: 1px solid rgb(60 173 255 / 25%);
}

.choose-way-intro-half:hover {
    border-color: rgb(60 173 255 / 50%);
    background: rgb(60 173 255 / 5%);
}

.choose-way-intro-half h1 {
    color: #666;
    font-size: 1.2em;
    line-height: 1.26em;
    letter-spacing: 1px;
    margin: 0;
    margin-bottom: 0;
    padding-bottom: 13px;
    text-transform: initial;
}

.choose-way-intro-half h1 span {
    font-weight: 600;
}

.choose-way-intro-half h1 span strong {
    font-size: 1.1em;
}

.choose-way-intro-half h2 {
    text-align: center;
    color: #444;
    font-size: 1.1em;
    line-height: 1.16em;
    letter-spacing: 0;
    margin: 0;
    margin: 13px 0;
    padding-bottom: 0;
    text-transform: initial;
}

.choose-way-intro-half h3 {
    color: #999;
    font-weight: 400;
    display: inline-block;
    border: 2px solid #d2d2d2;
    padding: 8px 14px 10px;
    margin:27px 0!important;
    border-radius: 2px;
    background: #fff;
}

.choose-way-intro-half h3:hover {
    color: #f68060;
    border-color: #f68060;
}
.choose-way-intro-half span.price {
    color: #f24a20;
    font-weight: 400;
    font-size: .8em;
}

.choose-way-intro-half .price strong {
    font-size: 3.1em;
    line-height: 1em;
}

.choose-way-intro-half .price em {
    font-style: normal;
    font-size: 2em;
    line-height: 1em;
    display: inline;
    font-weight: 600;
}

.choose-way-intro-half h2 em {
    font-size: .8em;
    display: block;
}

.choose-way-intro-half hr {
    border: 0;
    height: 1px;
    background: #FF6702;
    background-image: none;
    background-image: linear-gradient(to right, #f5f5f5, #f24a20, #f5f5f5);
    background-image: linear-gradient(to right, #f5f5f5, #f24a20, #f5f5f5);
    background-image: linear-gradient(to right, #f5f5f5, #f24a20, #f5f5f5);
    background-image: linear-gradient(to right, #f5f5f5, #f24a20, #f5f5f5);
    margin: 0;
    clear: both;
    display: block;
}

.info-payment {
    font-weight: 400;
    letter-spacing: .2px;
    font-size: .7em;    
    text-align: center;
    margin-top: 25px;
    line-height: 1.25em;
    color: #888;
}

.stripe-color {
    color: #7069fe;
}

.abis-color {
    color: #1559b9;
}

.home-bullet, .choose-way-intro-col {
    list-style: none;
    padding-left: 0;
    text-align: left;
}

.choose-way-intro-col h3 {
    margin: 10px 0;
}

.choose-way-intro-col h4 {
    margin: 15px 0 0;
}

.choose-way-intro-col p {
    line-height: 1.2em;
    margin-bottom: 0;
}

.choose-way-intro-col .home-bullet li p {
    line-height: 1.5em;
}

.home-bullet li,
.choose-way-intro-col li {
    position: relative;
    padding-left: 20px;
}

.home-bullet li::before,
.choose-way-intro-col li::before {
    font-family: dashicons, sans-serif;
    position: absolute;
    width: 10px;
    height: 10px;
}

.home-bullet.plus li::before{
    content: "\f537";
    transform: rotate(-25deg);
    left: -9px;
    top: 6px;
    font-size: 1em;
    color: #235091;
}

.home-bullet.suggestions li::before {
    left: -6px;
    top: 3px;
    content: "\f488";
    color: #777;
}

.home-bullet.tick li::before,
.choose-way-intro-col.tick li::before {
    content: "\f147";
    left: -12px;
    top: 0;
    font-size: 1.5em;
    color: #32842B;
}

.home-h4 {
    text-align: justify;
    margin-top: 45px;
    border-left: 4px solid #235091;
    padding-left: 15px;
}

/* footer */
.site-footer {
    padding: 24px 0 0;
}

.site-footer a {
    display: block;
    text-transform: none;
}

.site-footer a.active, .site-footer a.strong {
    font-weight: bold;
}

.swpm-profile-Expiry-date-row td.expiry-date {
    color: #A63617;
}

/* footnotes */
.footnote-identifier-link, .footnote-back-link {
    font-size: .75em;
    font-weight: 900;
    background-color: #F8EEEA;
    padding: 0 4px;
    border-radius: 50%;
    text-decoration: none;
    font-family: sans-serif, sans-serif;
}

.footnote-identifier-link:hover, .footnote-back-link:hover {
    color: #F8EEEA;
    background-color: #f68060;
}

.footnotes {
    margin-top: 2em;
}

.footnotes::before {
    content: "Le vocabulaire";
    font-weight: 600;
    margin-left: -20px;
}

.footnote:first-of-type {
  margin-top: .7em;  
}

ol.footnotes li {
    font-size: 90% !important;
}

.footnote i::before {
    content: " - ";
}

.footnote-back-link {
    vertical-align: top;
}

.ui-tooltip.footnote.footnote-tooltip {
    box-shadow: 1px 1px 3px 1px rgb(0 0 0 / 15%);
    border-radius: 5px;
    background-color: #F8FEE3;
    border-color: #CDE08E;
    color: #474A39;
    font-size: 17px;
    padding: 6px 9px 9px;
    line-height: 18px;
    font-weight: 600;
    font-family: "arial_narrow", sans-serif;
    overflow-wrap: break-word;
}

.ui-tooltip.footnote.footnote-tooltip i {
    font-size: 0.9em;
    font-weight: 200;
    font-style: italic;
    text-align: justify;
    display: block;
}

.ui-tooltip.footnote.footnote-tooltip  i::before {
    content: "";
}

.single-resources strong {
    font-weight: 400;
}

.resource-lnk, .resource-lnk:visited {
    font-family: "arial_narrow",arial,sans-serif;
    color: #86A612;
    vertical-align: middle;
}

.resource-lnk:hover {
    color: #86A612;
}

.resource-lnk:hover::before {
    background-color: #86A612; 
    color: #fff;
    border-radius: 4px;
}

.resource-lnk::before {
    vertical-align: middle;
    content: "\f546";
    font-family: dashicons, sans-serif;
    padding: 2px 5px 0 3px;
    margin-right: 3px;
    color: #86A612; 
}

.rt-reading-time {
    font-size: .75em;
    text-align: right;
    font-weight: 400;
    padding-bottom: 20px;
}

/* progress bar */
.meter-column {
    float: left;
    padding: 10px;
    min-height: 40px;
}

.meter-c1 {
    width: 88px;
}

.meter-c2 {
    width: calc( 100% - 88px );
    padding-top: 18px;
}

.meter-c2b {
    width: calc( 100% - 88px );
    line-height: 1.2em;
}

/* Clear floats after the columns */
.meter-row::after {
      content: "";
      display: table;
      clear: both;
}

.progess-stage {
    margin-bottom: 30px;
}

.progess-stage br {
    display: block;
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 20px;
}
.progress-text-full {
    color: rgb(255 255 255 / 75%);
    text-shadow: 1px 1px 0 rgb(0 0 0 / 20%);
}
.progress-text-mini {
    color: rgb(223 141 69 / 100%);
    text-shadow: 0 1px 2px rgb(255 255 255 / 100%);
}
.progress-text-null {
    color: rgb(150 150 100 / 70%);
    text-shadow: 0 1px 2px rgb(255 255 255 / 100%);
}

.progress-icon {
    width: calc( 130px / 2);
    height: auto;
}

.meter { 
    height: 20px;
    line-height: 20px;
    position: relative;
    background: #f3efe6;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: inset 2px 0 5px rgb(0 0 0 / 10%);
}

.meter span {
    display: block;
    height: 100%;
}

.progress::before {
    content: attr(data-pourcentage);
    position: absolute;
    font-weight: 600;
}

.progress::after {
    content: "completed";
    position: absolute;
    font-weight: 600;
    font-size: .75em;
}

.progress { 
    animation: progressBar 3s ease-in-out;
    animation-fill-mode:both; 
    border-radius: 10px;
}

@keyframes progressBar {
    0% { width: 0; }
    100% { width: 100%; }
}

@keyframes progressBar {
    0% { width: 0; }
    100% { width: 100%; }
}

.media-duration {
    color: #666;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 1em;
    text-align: center;
}

.video-duration::before, .audio-duration::before, .media-duration .hours::before {
    font-family: dashicons, sans-serif;
    vertical-align: -5px;
    margin-right: 0;
    color: #f68060;
    font-size: 1.5em;
}

.duration-separator::before {
    content: "\2012";
    font-weight: 300;
    margin: 0 10px;
    color: #999;
    display: none;
}

.video-duration::before {
    content: "\f236";
    font-weight: 300;
}

.audio-duration::before {
    content: "\f521";
    font-weight: 300;
}

.media-duration .hours {
    margin-left: 3px;
}

.media-duration .hours, .media-duration .minutes {
    font-weight: 600;
    font-size: 1.2em;
}

.media-duration .hours::before {
    content: "\f139";
    font-weight: 300;
    color: #999;
    font-size: 1.1em;
    display: none;
}

.audio-duration {
    margin-top: 7px;
}
.audio-duration, .video-duration {
    display: block;
}

/* top resource buttons */
.aa-res-buttons {
    border-bottom: 1px dashed #FDCEC1;
    border-right: 1px solid rgba(196,242,27,.7);
    padding-bottom: 20px;
    padding-right: 20px;
    margin: 0 auto 20px;
    background: none;
    border-top: none;
    border-top-right-radius: 0;
    display: none;
}

.aa-res-buttons::before {
    content: "\f546";
    font-family: dashicons, sans-serif;
    font-size: 1.8em;
    padding-right: 5px;
    color: #86A612;
    position: absolute;
    left: 0;
    top: 5px;
    display: none;
}

.aa-res-button {
    padding: .7rem 0;
    height: 2.5rem;
}

.res-mark-switch {
    position: relative;
}

.mark-res-label {
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
    vertical-align: top;
    line-height: 20px;
    font-weight: 450;
    color: #666;
}

.mark-res-label:hover {
    color: #3A7700;
}

.mark-res-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.mark-res {
    position: absolute;
    top: -3px;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 4px;
}

.mark-res-label:hover input ~ .mark-res {
    background-color: #D0E6BA;
    box-shadow: inset 2px 0 5px rgb(0 0 0 / 10%);
}

.mark-res-label input:checked ~ .mark-res {
    background-color: #ddd;
}

.mark-res::after {
    content: "";
    position: absolute;
    display: none;
}

.mark-res-label input:checked ~ .mark-res::after {
    display: block;
}

.mark-res-label .mark-res::after {
    left: 10px;
    top: -14px;
    width: 17px;
    height: 34px;
    border: solid #4E9A06;
    border-width: 0 6px 7px 0;
    transform: rotate(45deg);
    border-bottom-right-radius: 2px;
}

.mark-green {
    position: relative;
    display: inline-block;
}

/* start dyslexic switch */
.dyslexic-on {
    font-family: opendyslexic, sans-serif;
    text-align: left;
    color: #00005B !important;
    background-color: #FFF7F0;
    line-height: 1.5em;
}

.dyslexic-on br {
    margin-bottom: 1rem;
}

.dyslecix-switch {
    position: relative;
}

.dyslexic-lbl{
    vertical-align: top;
    line-height: 20px;
    font-family: opendyslexic, sans-serif;
    cursor: pointer;
    padding-left: 10px;
    font-size: 14px;
    color: #00005B;
}

.dyslexic-lbl:hover {
    color: #0092FF;
}

.onoffswitch {
    margin-top: 4px;
    position: relative;
    width: 28px;
    user-select: none;
    float:left;
    height: 20px;
}

.onoffswitch-checkbox {
    display: none;
}

.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border-radius: 11px;
}

.onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.1s ease-in 0s;
}

.onoffswitch-inner::before, .onoffswitch-inner::after {
    display: block;
    float: left;
    width: 50%;
    height: 13px;
    padding: 0;
    line-height: 13px;
    box-sizing: border-box;
}

.onoffswitch-inner::before {
    content: "";
    padding-left: 5px;
    background-color: #B7DDF9;
}

.onoffswitch-inner::after {
    content: "";
    padding-right: 5px;
    background-color: #aaa;
    text-align: right;
}

.onoffswitch-switch {
    display: block;
    width: 18px;
    height: 18px;
    margin: -2.5px;
    background: #FFF;
    box-shadow: 0 1px 2px #888;
    position: absolute; top: 0; bottom: 0;
    right: 15px;
    border-radius: 11px;
    transition: all 0.1s ease-in 0s; 
}

.onoffswitch-switch:hover {
    box-shadow: 0 1px 2px #3CADFF, 0 0 0 12px rgb(60 173 255 / 20%);
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch:hover {
    box-shadow: 0 1px 2px #888;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0; 
    background: #0092FF;
}

/* start audiosync switch */
.audiosync-switch {
    position: relative;
}

.audiosync-switch:hover::after, .dyslecix-switch:hover::after, .res-mark-switch:hover::after {
    content: attr(info);
    z-index: 100;
    background: rgb(240 240 240 / 95%);
    left: -20px;
    margin: 10px;
    width: 160px;
    position: absolute;
    top: calc(100% - 3px);
    text-decoration: none;
    text-transform: initial;
    color: #404050;
    font-weight: bold;
    font-size: 13px;
    border-radius: 3px;
    padding: 5px;
    line-height: 15px;
    display: none;
    padding: 12px;
    font-family: Lato, sans-serif;
}

.audiosync-switch:hover::before, .dyslecix-switch:hover::before,.res-mark-switch:hover::before {
    border: solid;
    border-color: rgb(240 240 240 / 95%) transparent;
    border-width: 0 30px 10px 0;
    bottom: -7px;
    content: "";
    left: 18px;
    position: absolute;
    z-index: 101;
    display: none;
}

.audiosync-lbl{
    font-family: "arial_narrow",arial,sans-serif;
    vertical-align: top;
    line-height: 20px;
    cursor: pointer;
    padding-left: 10px;
    font-size: 16px;
    color: #7F4739;
    font-weight: 450;
}

.audiosync-lbl:hover {
    color: #E93E14;
}

.audiosyncswitch {
    margin-top: 4px;
    position: relative; width: 28px; user-select: none;
    float:left;
    height: 20px;
}

.audiosyncswitch-checkbox {
    display: none;
}

.audiosyncswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border-radius: 11px;
}

.audiosyncswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.1s ease-in 0s;
}

.audiosyncswitch-inner::before, .audiosyncswitch-inner::after {
    display: block; float: left; width: 50%; height: 13px; padding: 0; line-height: 13px;
    box-sizing: border-box;
}

.audiosyncswitch-inner::before {
    content: "";
    padding-left: 5px;
    background-color: #FFB5A2;
}

.audiosyncswitch-inner::after {
    content: "";
    padding-right: 5px;
    background-color: #aaa;
    text-align: right;
}

.audiosyncswitch-switch {
    display: block; width: 18px; height: 18px; margin: -2.5px;
    background: #FFF;
    box-shadow: 0 1px 2px #888;
    position: absolute; top: 0; bottom: 0;
    right: 15px;
    border-radius: 11px;
    transition: all 0.1s ease-in 0s; 
}

.audiosyncswitch-switch:hover {
    box-shadow: 0 1px 2px #E93E14, 0 0 0 12px rgb(233 62 20 / 20%);
}

.audiosyncswitch-checkbox:checked + .audiosyncswitch-label .audiosyncswitch-inner {
    margin-left: 0;
}

.audiosyncswitch-checkbox:checked + .audiosyncswitch-label .audiosyncswitch-switch {
    right: 0; 
    background: #A2361B;
}

.audiosyncswitch-checkbox:checked + .audiosyncswitch-label .audiosyncswitch-switch:hover {
    box-shadow: 0 1px 2px #888;
}

/* start mark switch */
.mark-green::before {
    content: '';
    position: absolute;
    width: 21px;
    height: 21px;
    background: #eee;
    right: -24px;
    border-radius: 4px;
    transform: scale(0.7);
    top: 3px;
}

.mark-green::after {
    content: '';
    position: absolute;
    right: -25px;
    width: 15px;
    height: 26px;
    border: solid #4E9A06;
    border-width: 0 5px 5px 0;
    transform: rotate(45deg);
    border-bottom-right-radius: 2px;
    transform: scale(0.7) rotate(45deg);
    top: -4px;
}

.more-resources h3.marked {
    position: relative;
    margin-left: 32px;
}

.more-resources h3.marked::before {
    content: '';
    position: absolute;
    width: 21px;
    height: 21px;
    background: #eee;
    left: -32px;
    border-radius: 4px;
    padding-right: 5px;
    transform: scale(0.7);
    top: 3px;
}

.more-resources h3.marked::after {
    content: '';
    position: absolute;
    left: -27px;
    width: 15px;
    height: 26px;
    border: solid #4E9A06;
    border-width: 0 5px 5px 0;
    transform: rotate(45deg);
    border-bottom-right-radius: 2px;
    transform: scale(0.7) rotate(45deg);
    top: -4px;
}

#notes-paper {
    font-family: "Courier 10 Pitch", Courier, monospace;
    position: relative;
    margin: 20px auto;
    padding-top: 40px;
    padding-bottom: 40px;
    background: rgb(252 252 252);
    background: linear-gradient(30deg, rgb(252 252 252 / 100%) 0%, rgb(255 255 255 / 100%) 24%, rgb(255 255 255 / 100%) 67%, rgb(252 252 252 / 100%) 87%, rgb(242 242 242 / 100%) 100%);
    box-shadow: 0 1px 5px 0 rgb(0 0 0 / 15%);
}

#notes-paper::before {
    content: '';
    width: 4px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 40px;
    border-right: 2px solid rgb(246 128 96 / 70%);
    border-left: 1px solid rgb(246 128 96 / 70%);
}

#notes-paper::after {
    content:"Keywords Chat";
    position:absolute;
    top:0;
    right: 0;
    padding: 0 10px;
    background-color: rgb(246 128 96 / 70%);
    color: white;
    font-weight: normal;
}

#notes-pattern {
    height: 100%;
    background-image: repeating-linear-gradient(rgb(255 255 255 / 0%) 0, rgb(255 255 255 / 0%) 24px, lightskyblue 25px);
}

#notes-content {
    line-height: 25px;
    padding-left: 56px;
    padding-right: 16px;
    padding-top: 8px;
    font-size: 16px;
    word-spacing: -2px;
}

.footer-payment {
    text-align: center;
    text-transform: none;
    color: #666;
}

.footer-payment a {
    display: inline-block;
}

.footer-payment img {
    vertical-align: text-bottom;
    margin-right: 2px;
    margin-left: 2px;
}

.footer-payment .stripe {
    color: #7069fe;
    font-weight: bold;
    font-size:1.08em;
    line-height: 1.3em;
    letter-spacing: 0;
}

.footer-payment .stripe::before {
    content: "\f160";
    font-family: dashicons, sans-serif;
    font-size:1.25em;
    vertical-align: text-bottom;
}

.footer-payment .abis {
    color: #165ABA;
    font-weight: bold;
    letter-spacing: 0;
}

.wpcf7-form-control.wpcf7-select {
    padding: 12px;
    background-color: white;
    border-radius: 4px;
    border: 1px solid #eee;
    font-family: Lato, sans-serif;
    font-size: 1em;
    color: #666;
}

.cancel-warning {
    text-transform: uppercase;
    background: linear-gradient(90deg, rgb(255 255 0 / 0%) 0%, rgb(255 255 0 / 50%) 15%, rgb(255 255 0 / 50%) 85%, rgb(255 255 0 / 0%) 100%);
    font-style: normal;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    font-weight: 900;
    letter-spacing: .5px;
    padding: 5px 0;
    font-size: .8em;
}

body#warning {
    background: #fff;
    color: #000;
    font-size: 1.1em;
    text-align: center;
    padding: 30px 10px;
    font-family: sans-serif;
    letter-spacing: 0;
    font-weight: 400;
}

body#warning a {
    background-color: #0078e7;
    color: #fff;
    font-family: inherit;
    font-size: 100%;
    padding: .5em 1em;
    border: none transparent;
    text-decoration: none;
    border-radius: 2px;
}

body#warning a:hover {
    background-color: #3898F2;
}

body#warning a:active, body#warning a:focus {
    cursor: wait;
    background-color: #A7C6E3;
}

body#warning div.warn-c {
    width: 100vw;
      min-height: 70vh;
    display: table-cell;
    vertical-align: middle;
}

html.no-scroll,
body.no-scroll {
    position: relative !important;
}

/* fix resource top buttons */
#resource-options {
    display: none;
}


#resource-options:checked ~ .aa-res-buttons {
    display: flex;
    flex-flow: column wrap;
    align-items: flex-end;
}

#resource-options:checked ~ .aa-res-buttons div.aa-res-button {
    width: 200px;
}

#resource-options ~ label {
    font-family: "arial_narrow",arial,sans-serif;
    font-weight: 600;
    font-size: .9em;
    display: block;
    width: 100%;
    cursor: pointer;
    text-align: right;
    color: #86A612;
    background: linear-gradient(13deg, #fff 85%, rgb(196 242 27 / 70%));
    border-top-right-radius: 20px;
    border-right: 1px solid rgb(196 242 27 / 70%);
    border-top: 1px solid rgb(196 242 27 / 70%);
    padding: 5px 20px;
}

#resource-options:checked ~ label {
    color: #F24719;
    margin-bottom: -10px;
}

#resource-options ~ label::before, #resource-options:checked ~ label::before, #resource-options ~ label::after, #resource-options:checked ~ label::after {
    font-family: dashicons, sans-serif;
}

#resource-options ~ label::before, #resource-options:checked ~ label::before {
    font-weight: 300;
    font-size: 2em;
    vertical-align: middle;
    float: left;
}

#resource-options ~ label::before {
    margin-right: 5px;
    color: #86A612;
    content: "\f546";
}

#resource-options:checked ~ label::before {
    color: #86A612;
}

#resource-options ~ label::after, #resource-options:checked ~ label::after {
    font-weight: 600;
    font-size: 1.2em;
    vertical-align: top;
    padding-left: 5px;
}

#resource-options ~ label::after {
    content: "\f502";
    color: #F24719;
}

#resource-options:checked ~ label::after {
    content: "\f153";
}


:root {
    --border-home: 8px;
    --thumb-size: 8em;
    --stage-size: 6em;
    --story-size: 6.6em;
    --thumb-size-mob: 44.9%;
    --stage-size-mob: 28%;
}

.uhand {
    background-image: url('data:image/svg+xml;charset=utf8,<svg id="Squiggle-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" viewBox="0 0 20 4" version="1.1"><path fill="none" stroke="%238a4" stroke-width="2" class="st0" d="M 20,1.8135444 C 18.402559,1.8363888 16.811031,2.0210364 15.211817,1.916715 11.979133,1.9348772 8.7539539,1.5939066 5.5192212,1.6675536 3.7756745,1.6298292 2.0171029,1.7125149 0.28615531,1.7528207 c -1.0843285,0.7968861 1.22655629,0.386892 1.72945039,0.3617904 1.1762267,0.011977 2.3530582,0.014748 3.5326556,0.088757 1.1664646,-0.025376 2.3375296,-0.1411662 3.4972796,0.029127 1.0965741,-0.093789 2.1790401,0.1264471 3.2690701,0.086826 1.762098,-0.2534838 3.546586,0.2626888 5.297038,-0.1293988 C 18.396937,2.0469315 19.302585,2.2707523 20,1.8135444 Z" /></svg>');
    background-position: 0 bottom;
    background-size: auto 3px;
    background-repeat: repeat-x;
    padding-bottom: 3px;
    text-decoration: none;
    font-weight: 400;
}

.home-spacer {
    border: 0;
    height: 1px;
    background: #3CADFF;
    background-image: linear-gradient(to right, #fff, #3CADFF, #fff);
    margin: 1.5em 0;
    clear: both;
    display: block;
}
.ttp-container hr {
    border: 0;
    height: 1px;
    background: #3CADFF;
    background-image: linear-gradient(to right, #fff, #eeeeee, #fff);
    margin: 10px 0;
    clear: both;
    display: block;
}

.spacerlight {
    border: 0;
    height: 1px;
    background: transparent;
    margin: .5em 0;
    clear: both;
    display: block;
}

.stories-container.stages {
    text-align: center;
}

.stories-container:not(.stages)::after {
    content: '';
    display: block;
    clear: both;
}

.stories-container.stories.story-one {
    display: inline-block;
    transform: translateX(25%);
}

.stories-cell {
    margin: .45em;
    float: left;
    width: var(--thumb-size-mob);
    height: var(--thumb-size-mob);
    aspect-ratio: 1/1;
    position: relative;
    border-radius: 5px;
    background: #222;
    transition: all .6s ease;
    overflow: hidden;
}

.stories-container.stages .stories-cell {
    float: none;
    display: inline-block;
}

.stories-container.stages .stories-cell.current {
    cursor: grab;
}

.stories-container.stages .stories-cell {
    width: var(--stage-size-mob);
    height: var(--stage-size-mob);
}

.stories-container.stories .stories-cell {
    width: var(--thumb-size-mob);
    height: var(--thumb-size-mob);
}

.stories-cell.res-freemium::before, .stories-cell.not-res-freemium::before {
    position: absolute;
    z-index: 10;
    font-weight: 600;
    color: #fff;
    letter-spacing: 1px;
    font-family: dashicons, sans-serif;
    font-size: 1.4em;
    padding: 0 .1em;
    top: 4px;
    left: 4px;
    border-radius: 4px;
}

.stories-cell.res-freemium::before {
    content: '\f528';
    background-color: rgb(78 154 0 / 80%);
}

.stories-cell.not-res-freemium::before {
    content: '\f160';
    background-color: rgb(154 78 0 / 80%);
}

.stories-cell.mark-green::after {
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 5px;
    font-family: dashicons, sans-serif;
    content: "\f147";
    font-size: 30px;
    border: none;
    color: #4E9A06;
    transform: rotate(0deg);
    width: 30px;
    height: 30px;
    background-color: rgb(255 255 255 / 90%);
    line-height: 30px;
}

.stories-cell img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    opacity: .9;
    transition: all .3s ease;
    filter: blur(0);
}

.stories-container.stages .stories-cell img {
    filter: contrast(.8) brightness(.8);
}

.stories-container.stages .stories-cell.current img {
    filter: contrast(.2) brightness(1.5);
}

.stories-cell .not-res-freemium {
    width: 100%;
    content: '';
}

.stories-cell .desc, .stories-cell .desc-story, .stories-cell .desc-stage {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 3px 0;
    text-align: center;
    color: white;
    transition: 0.3s;
    line-height: 1.1em;
}

.stories-cell .desc {
    background: rgb(255 255 255 / 95%);    
    color: #f68060;
    font-weight: 400;
    font-size: .9em;
}

.stories-cell .desc-story, .stories-cell .desc-stage {
    font-weight: 600;
    font-size: .7em;
}

.stories-cell .desc-story {
    background: rgb(253 253 223 / 95%);
    color: #566A0F;
}

.stories-cell .desc-stage {
    background: rgb(255 255 255 / 95%);
    color: #C97D36;
}

.stories-cell .date {
    position: absolute;
    top: 0;
    right: 0;
    transition: 0.3s;
    font-size: .7em;
    color: #888;
    background: rgb(255 255 255 / 90%);
    padding: 0 5px;
    line-height: 1.5em;
    font-weight: 400;
    border-radius: 0 0 0 6px;
}

.stories-cell .stage, .stories-cell .story {
    transition: 0.3s;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.2em;
    letter-spacing: 1px;
}

.stories-cell .stage {
    background: rgb(232 150 64 / 95%);
    font-size: .7em;
    padding: 5px 0;
    font-weight: 600;
}

.stories-cell .story {
    background: rgb(86 106 15 / 80%);
    font-size: .7em;
    padding: 3px 0;
    font-weight: 600;
}

.stories-container.stages .stories-cell .stage {
    padding-left: 25px;
}

.stories-container.stages .stories-cell.current .stage {
    background-color: rgb(132 51 0 / 70%);
}

.stories-cell .nb {
    transition: 0.3s;
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 2em;
    color: #fff;
    padding-top: 3px;
    letter-spacing: -2px;
    font-weight: 400;
    min-width: 1em;
    text-align: center;
}

.stories-container.stages .stories-cell .nb {
    top: auto;
    bottom: .2em;
    right: 0;
    width: 100%;
    text-align: center;
    font-weight: 900;
    font-size: 3em;
}

.stories-container.stages .stories-cell.current .nb {
    color: rgb(132 51 0 / 80%);
}

.stories-container.stages .stories-cell .nb {
    color: #fff;
}

.stories-container.stages .stories-cell.previous:hover .nb, .stories-container.stages .stories-cell.next:not(.disabled):hover .nb {
    color: #FF6200;
}

.stories-container.stages .stories-cell.previous .nb::before, .stories-container.stages .stories-cell.next:not(.disabled) .nb::after {
    font-size: .6em;
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    transition: 0.3s;
}

.stories-container.stages .stories-cell.previous .nb::before {
    content: '❮';
    left: 10px;
    opacity: 1;
}

.stories-container.stages .stories-cell.next:not(.disabled) .nb::after {
    content: '❯';
    left: 81%;
    opacity: 1;
}

.stories-cell.disabled {
    opacity: .7;
    cursor: no-drop;
    position:relative;
}

.stories-cell.disabled .desc {
    opacity: 0;    
}

.stories-cell.disabled .stage, .stories-cell.disabled .nb {
    opacity: 0.8;    
}

.stories-cell.disabled img {
    filter: blur(1px) saturate(.75) brightness(1.1);
    transform: scale(1.01);
}

.stories-cell.disabled::after {
    position: absolute;
    top: 35px;
    text-align: center;
    content: 'COMING SOON';
    background: rgb(255 255 255 / 90%);
    font-weight: 600;
    color: rgb(232 150 64);
    box-shadow: none;
    padding: 0 15px;
    font-size: .7em;
    width: 100%;
    left: 0;
    line-height: 1.2em;
}

.header-stories {
    text-align: center;
    color: #444;
}

.header-stories span {
    font-weight: 900;
    font-size: 1.2em;
}

/* disable FAQ on Comment editor */
#wp-comment-editor-container #mceu_13, #wp-comment-editor-container #mceu_14 {
    display: none !important;
}

.mce-top-part::before {
    box-shadow: none!important;
}
.mce-toolbar .mce-ico {
    color: #858585!important;
}
.mce-toolbar .mce-btn-group .mce-btn:hover, .mce-toolbar .mce-btn-group .mce-btn:focus, .qt-dfw:hover, .qt-dfw:focus {
    box-shadow: 0 0 0 2px #f68060!important;
}
.mce-toolbar .mce-btn-group .mce-btn.mce-active:hover, .mce-toolbar .mce-btn-group .mce-btn.mce-active:focus, .mce-toolbar .mce-btn-group .mce-btn.mce-active, .mce-toolbar .mce-btn-group .mce-btn:active, .qt-dfw.active {
    border-color: #d6d6d6!important;
}
.mce-toolbar .mce-btn-group .mce-btn.mce-primary {
    box-shadow: 0 0 0 2px #dfdfdf !important;
    border-color: #f6f7f7 !important;
    background-color: #f6f7f7!important;
}
.mce-toolbar .mce-btn-group .mce-btn.mce-primary:hover, .mce-toolbar .mce-btn-group .mce-btn.mce-primary:focus {
    box-shadow: 0 0 0 2px #f68060 !important;
}
.media-menu .media-menu-item:focus, .media-router .media-menu-item:focus {
    box-shadow: 0 0 0 2px transparent !important;
}
.wp-core-ui .button {
    color: #999!important;
    border-color: #eee!important;
}
.wp-core-ui .button-primary {
    color: #f6f7f7!important;
    border-color: #f6f7f7!important;
    background:#f68060!important;
}
#wp-link-backdrop, .media-modal-backdrop{
    background: #fff5!important;
    backdrop-filter: blur(3px);
    opacity: 1!important;
}
.media-menu .media-menu-item {
    color: #858585!important;
}
.media-modal-close:hover, .media-modal-close:active, .media-modal-close:focus {
    border:none!important;
    color: #f68060!important;
    box-shadow: none !important;
}
.media-menu .active, .media-menu .active:hover {
    color: #f68060!important;
}
.media-router .media-menu-item:hover, .media-router .media-menu-item:active {
    color: #858585!important;
}
.wp-core-ui .button.focus, .wp-core-ui .button:focus, .wp-core-ui .button-secondary:focus {
    box-shadow: none !important;
}

/* stages badge */
.badge-one {
    font-family: "aa_font", sans-serif;
    color: #f68060;
    font-size: .7em;
}

.badge-one strong, .all-badges strong {
    font-weight: normal;
    vertical-align: middle;
    position: relative;
    top: -2px;
    font-size: 1.5em;
}

.all-badges {
    display: block;
    text-align: center;
}

.badge-all {
    display: inline-block;
    font-family: "aa_font", sans-serif;
    margin: 0 10px -5px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 80%;
    transition: all .1s ease-in-out;
    user-select: none;
}

.badge-all:hover {
    transform: scale(1.2);
    border-bottom: 3px solid #f68060;
}

.info-bubble {
    position: relative;
    transition: all .25s ease !important;
}
.info-bubble::before {
    position: absolute;
    left: 50%;
    top: 0;
    width: max-content;
    max-width: 200px;
    font-family: Lato, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    content: attr(aria-label);
    line-height: 1.25em;
    text-align: center;
    color: #777;
    background: rgb(255 255 255 / 90%);
    padding: 6px;
    opacity: 0;
    pointer-events: none;
    border-radius: 6px;
    transform: translate3d(-50%,-50%,0) scale3d(.2, .2, .2);
    transition: all .25s ease;
    box-shadow: 0 2px 3px rgb(0 0 0 / 25%);
    display: none;
}
.info-bubble:hover::before, .info-bubble:active::before {
    opacity: 1;
    z-index:1000;
    transform: translate3d(-50%,calc(-100% - 12px),0) scale3d(1, 1, 1);
}


.es-field-wrap label br {
    display: none;
}

.es-field-wrap {
    margin-bottom: .7em;
}

.es-field-wrap input {
    width: 50%;
}

.box-container {
    display: grid;
    gap: 2rem;
    margin-top: 10px;
    margin-bottom: 30px;
    border: 1px solid #eee;
    border-radius: var(--border-home);
    background: #F8F8F9;
    grid-template-columns: 1fr;
    min-height: auto;
    text-align: center;
}

.box-column {
    display: flex;
    padding: 20px;
}

.box-text {
    flex-direction: column;
    gap: 1rem;
    justify-content: flex-start;
    text-align: center;
}

.box-image {
    justify-content: center;
    align-items: center;
} 

.box-container.trans-bg {
    border-radius:0;
    border: none;
    background: transparent;
}

.box-container h2 {
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.box-container h {
    margin: 0;
}

.box-container p {
    margin: 5px 0;
}

.bigger {
    font-size: 1.4em;
    line-height: 1.8em;
}

.box-container .bigger li {
    padding-left: 34px;
}

.box-container .smaller {
    font-size: 1em;
    line-height: 1.1em;
}

.box-container .es-field-wrap input {
    width: 90%;
}

.box-container img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.ttp-container { 
    position:relative;
    height:auto;
    width:90%;
    margin:0 5%;
}

.ttp-title {
    margin:0 0 5px;
    text-align:center;
    letter-spacing:2px; 
}

.ttp-title-img { 
    max-width:100px;
    margin:5px 0;
}

.ttp-desc {
    text-align:center;
    font-size:.8em;
    line-height:1.5em;
    margin-bottom:10px;
    font-weight: 400;
}

.ttp-link {
    text-align:center;
    font-size:1.35em;
    line-height:1.15em;
    font-weight:400;
}

.ttp-link-img {
    height:32px;
    opacity:.75;
    transition:all 0.2s ease-in-out;
}

.ttp-link a:hover .ttp-link-img { 
    opacity:1; 
}

.ttp-link-small a:hover .ttp-link-small-img {
    opacity:1;
}

.ttp-link-small {
    text-align:center;
    font-size:1em;
    line-height:24px;
    font-weight:400;
}

.ttp-link-small-img {
    height:20px;
    opacity:.65;
    transition:all 0.2s ease-in-out;
    vertical-align:text-bottom;
}

.site-logo {
    text-align: center;
    padding: 0;
    background: transparent;
    margin: 0;
    max-height: none;
    position:relative;
}
.site-logo-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
    z-index: 10;
    cursor: pointer;
}

.site-logo-symbol {
    font-family: 'aa_font', sans-serif;
    font-size: 2rem;
    color: #e94e1b;
    line-height: 1;
}
.site-logo-text h1 {
    font-family: 'SulphurPoint', sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    color: #444;
    margin: .15em 0 0;
    line-height: 1.1em;
    text-transform: initial;
}
.site-logo-sub {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8em;
}
.site-logo-sub .name {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #444;
    text-transform: uppercase;
    line-height: 1.1em;
    font-size: .7em;
}
.site-logo-sub .line {
    content: "";
    flex: 1;
    max-width: 20%;
    height: 2px;
    background: #e94e1b;
}

.menu-toggle {
    transition-property: none !important;
    border-radius: 0;
    border: none;
    position: absolute;
    top: 80px;
    right: 10px;
    z-index: 101;
    padding: 0;
    background: transparent;
}

.menu-toggle::before {
    margin:0;
    padding: 6px 10px;
    font-size: 1.5em;
    content: "𝄙";
    font-family: sans-serif;
    font-weight: 900;
}

.main-navigation {
    text-transform: none;
    letter-spacing: 1px;
    overflow-y: scroll;
    overscroll-behavior: contain;
    -ms-scroll-chaining: none;
    text-transform: none;
    letter-spacing: .05em;
    font-size: 1em;
    width: calc( 100% + 27px );
    margin: 0 -17px 0;
    padding: 0 10px;
}

.main-navigation ul {
    margin: 0 10px 0 20px;
}

.main-navigation ul ul {
    opacity: 1;
    visibility: visible;
}

.main-navigation.toggled {
    background: white !important;
    height: calc( 100vh - 110px);
    border-bottom: 1px solid #eee;
    overscroll-behavior: contain !important;
    overflow-x: hidden;
    margin-top: 10px;
}

.site-content {
  padding: 10px 10px 0;
}

.alignright {
    margin: 5px auto 10px;
    display: block;
    float: none;
    width: calc( 100% - 20px );
}

div.subline {
    clear: both;
    height: 3.4em ;
}


.sap-ajax-loader {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background-color: #f9f9f9;
    border: none;
    border-radius: 6px;
    font-family: SulphurPoint, sans-serif;
    color: #888;
    font-size: 1em;
    margin: 50px auto 0;
    font-weight:400;
    letter-spacing:1px;
    position:relative;
    min-width: 150px;
}
.sap-ajax-loader::after {
  content: "∙∙∙";
  animation: dots .8s steps(4, end) infinite;
  letter-spacing:1px;
}
@keyframes dots {
  0%   { content: ""; }
  25%  { content: "∙"; }
  50%  { content: "∙∙"; }
  75%  { content: "∙∙∙"; }
  100% { content: ""; }
}


/* Small devices (phones) */
@media (min-width: 36em) { /* ~576px */
    blockquote {
        border-left: 3px solid #eee;
        padding: 10px 0 5px 12px;
        font-size: 1em;
        line-height: 1.15em;
    }

    #page {
        padding: 27px;
    }

    .site-header {
        padding: 0;
        margin:0;
        text-align: center;
        box-shadow: none;
        position: static;
        min-height: 120px;
    }

    .meter-c2 {
        width: 100%;
    }

    .meter-c2b {
        margin-top: -10px;
        min-height: 100px;
    }

    /* Resources */
    .resource-table-audio {
        margin-top: 20px;
    }
    .aa-res-buttons {
        border-bottom: none;
        padding-bottom: .75em;
    }
    .aa-res-buttons .resource-table-audio {
        display: none;
    }
    .resource-col-audio {
        width: calc( 100% - 120px);
    }
    .resource-col-docs {
        float: right; 
        text-align: center;
        display: inline;
    }
    .alignright {
        display: inline;
        float: right;
        margin: 14px 0 14px 27px;
        width: auto;
    }

    .audiosync-switch:hover::after, .dyslecix-switch:hover::after, .audiosync-switch:hover::before, .dyslecix-switch:hover::before, .res-mark-switch:hover::after, .res-mark-switch:hover::before {
        display: block;
    }

    #resource-options ~ label {
        display: none;
    }

    .aa-res-buttons {
        max-width: 1200px;
        margin: 0 auto 1.25em;
        display: grid;
        grid-gap: 0rem;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        justify-items: center;
        padding-bottom: .75em;
        padding-left: 20px;
        padding-right: 5px;
        background: linear-gradient(13deg, #fff 85%, rgba(196,242,27,.7));
        border-top-right-radius: 20px;
        border-top: 1px solid rgba(196,242,27,.7);
        position: relative;
    }
    .aa-res-buttons::before {
        display: block;
    }

    .badge-one {
        font-size: .8em;
    }

    .all-badges {
        display: inline-block;
    }
}

/* Large devices (tablets, landscape / small laptops) */
@media (min-width: 48em) { /* 768px */
    #page {
        padding-top: 27px;
    }
    
    .site-main {
        margin: 0;
    }

    .main-navigation {
        margin: 0 0 0 -27px;
        width: calc( 100% + 54px);
    }

    .comments-area h2, .comment-respond h3 {
        margin: 10px 0;        
    }

    .stories-container.stories.story-one {
        padding-left: 100%;
        transform: translateX(-50%);
    }

    .stories-cell {
        margin: .5em;
        width: var(--thumb-size);
        height: var(--thumb-size);
    }

    .stories-container.stages .stories-cell {
        width: var(--stage-size);
        height: var(--stage-size);
    }

    .stories-container.stories .stories-cell {
        width: var(--story-size);
        height: var(--story-size);
    }

    .stories-cell.res-freemium:hover::before {
        background-color: rgb(133 217 46 / 90%);
    }

    .stories-cell.not-res-freemium:hover::before {
        background-color: rgb(217 133 54 / 90%);
    }

    .stories-cell img {
        opacity: 1;
    }

    .stories-cell:hover:not(.current, .disabled) img {
        opacity: 0.7;
        filter: blur(1px);
        transform: scale(1.2) rotateZ(-10deg);
    }

    .stories-container.stories .stories-cell:not(.disabled):hover img {
        opacity: 0.7;
        filter: blur(1px);
        transform: scale(1.2) rotateZ(-15deg) translate(0, 12px);
    }

    .stories-cell .desc {
        bottom: 0;
        background: rgb(255 255 255 / 90%);
    }

    .stories-cell:hover .desc {
        visibility: visible;
        opacity: 1;
        max-width: 100%;
        width: 100%;
        bottom: 0;
        z-index: 10;
    }

    .stories-cell .date {
        top: 0;
    }

    .stories-cell:hover .date {
        top: 0;
    }

    .stories-cell:hover:not(.current, .disabled) .stage {
        background: rgb(232 150 64 / 50%);
    }

    .stories-cell:hover:not(.disabled) .nb {
        font-weight: 900;
    }

    .stories-container.stages .stories-cell .nb {
        bottom: .35em;
    }

    .stories-container.stages .stories-cell.previous .nb::before {
        content: '❮';
        left: 40%;
        opacity: 0;
    }

    .stories-container.stages .stories-cell.previous:hover .nb,
    .stories-container.stages .stories-cell.next:hover:not(.disabled) .nb,
    .stories-container.stages .stories-cell.previous:hover .nb::before,
    .stories-container.stages .stories-cell.next:hover:not(.disabled) .nb::after {
        color: #fff;
        text-shadow: none;        
    }

    .stories-container.stages .stories-cell.previous:hover .nb::before {
        left: 3%;
        opacity: 1;
    }

    .stories-container.stages .stories-cell.next:not(.disabled) .nb::after {
        content: '❯';
        left: 55%;
        opacity: 0;
    }

    .stories-container.stages .stories-cell.next:hover:not(.disabled) .nb::after {
        left: 81%;
        opacity: 1;
    }

    .stories-cell.disabled::after {
        transform: rotateZ(-40deg);
        width: 120%;
        left: -35px;
        top: 15px;
        line-height: .95em;
    }

    .choose-way-intro {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .choose-way-intro-col {
        width: 350px;
        margin: 0 20px;
    }

    .box-container {
        grid-template-columns: 1fr 1fr;
    }

    .ttp-container { 
        position:relative;
        width:50%;
        margin:0 25%;
    }

    .books .column {
/*
        width: 42%;
        margin: 20px 25px;
*/
    }

    .swpm-pw-reset-email {
        text-align: right;
        width: 30%;
    }

    .cancel-warning {
        letter-spacing: 1px;
        padding: 5px 10px;
        font-size: 1em;
    }

    .audio-duration, .video-duration , .duration-separator::before {
        display: inline;
        margin-top: 0;
    }
    .media-duration .hours::before {
        display: inline;
    }

    .mark-green::before, .more-resources h3.marked::before {
        transform: scale(1);
        top: 8px;
    }
    .mark-green::after, .more-resources h3.marked::after {
        transform: scale(1) rotate(45deg);
        top: 0;
    }

    .info-bubble::before {
        display: block;
    }
    .books .column::before {
        padding: 0 5px;
    }

    .swpm-login-form-inner label, .swpm-login-form-inner input {
        font-size:1em;
    }

    .swpm-login-form-inner label {
        width: 40%;
        text-align: right;
        padding-right: 10px;
    }

    /*.swpm-login-form-inner input[type="text"], */
    .swpm-username-input, .swpm-password-input {
        width: 40%;
    }

    .swpm-password-toggle-checkbox-label input[type="checkbox"] + span::after {
        right: 7px;
    }
    .swpm-post-not-logged-in-msg {
        width: 100%;
        float: none;
    }
    .swpm-edit-profile-form {
        font-size: 1em;
    }
    .swpm-edit-profile-form table {
        border-spacing: 0;
    }
    .swpm-edit-profile-form td {
        display: table-cell;
    }
}

/* Extra large devices (desktops) */
@media (min-width: 62em) { /* 992px */
    #page {
        padding:27px 54px;
    }

    .site-logo-symbol {
        font-size: 3rem;
    }
    .site-logo-text h1 {
        font-size: 1.4rem;
    }
    .site-logo-sub .line {
        max-width: 25%;
    }

    .swpm-pw-reset-email-input {
        width: 70%;
    }

    .swpm-pw-reset-email, .swpm-pw-reset-email-input {
        font-size: 1em;
    }

    .swpm-pw-reset-submit-button {
        text-align: center;
        clear: both;
        padding-top: 20px;
    }

    .site-footer a {
        display: inline;
    }

    .site-footer a:not(:last-child)::after {
        content: "⋅";
        padding: 0 5px;
        font-weight: bold;
        color: #999;
    }
    
    .footer-payment br {
        display:none;
    }
    
    .stories-container.stages .stories-cell.disabled::after {
        line-height: .95em;
    }
}

/* XXL devices (large desktops / wide screens) */
@media (min-width: 75em) { /* 1200px */
    .site {
        margin: 27px auto 0;
        padding: 0 54px 54px;
    }

    .site-header {
        text-align: left;
    }

    .site-logo-symbol {
        font-size: 4rem;
    }
    .site-logo-text h1 {
        font-size: 1.6rem;
    }

    .site-header .main-navigation {
        text-align: right;
    }

    .menu-toggle {
        display: none;
    }

    [class^="swpm-menu-sm"] {
        margin: 0;
        margin-right: 3px;
        vertical-align:middle;
        padding: 0;
    }

    .main-navigation ul {
        margin: 0;
    }
    .swpm-menu-smY {
        margin-left: 24px;
    }
    .swpm-menu-smX {
        margin-right:0;
    }

    .toggled .searchform-top, .searchform-top { 
        display: none;
    }
    .searchform-bottom { 
        display: inline-block;
        min-width: 400px;
        margin-top: 10px;
    }

    .menu-topmenu-in-container + form.searchform input {
        max-width: 285px;
    }

    .main-navigation {
        clear: none;
        float: right;
        text-align: right;
        margin-top: -85px;
        max-width: none;
        overflow: visible;
        line-height: 2.09231em;
    }

    .hasbadge .main-navigation {
        margin-top: -115px;
    }
    
    .main-navigation ul ul {
        opacity: 0;
        visibility: hidden;
        border: 1px solid #ccc;
        border-top: 2px solid #f68060;
    }
    
    .main-navigation ul:first-child {
        display: block;
    }
    
    .main-navigation ul li {
        display: inline-block;
    }

    .nav-menu , #menu-topmenu {
        max-width: none;
    }

    .es_button {
        text-align: center;
    }

    .es_caption{
        font-style: italic;
        font-size: 1.1em;
        font-weight: bold;
        text-align: center;
    }

    .main-navigation ul ul {
        padding: 0 7px;
        position: absolute;
        top: 100%;
        left: 0;
        text-align: left;
        z-index: 99999;
        background-color: #fff;
    }

    .main-navigation ul a {
        border-bottom: 0;
        padding: 5px 0 5px 14px;
    }
    
    .main-navigation ul ul li {
        border-bottom: 1px solid #eee;
        padding: 5px 5px 4px;
      }
    
    .main-navigation ul ul li a {
        line-height: 1.5;
        padding: 5px;
        width: 180px;
    }

    .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {
        opacity: 1;
        visibility: visible;
    }

    .main-navigation ul ul {
        box-shadow: 0 0 0 8px #fff;
        transform: translateY(-.6rem);
        display: block;
    }

    .main-navigation ul ul, .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {
        transition: all .2s ease;
    }

    .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {
        transform: translateY(0);
    }

    .books .column {
/*
        width: 45%;
        margin: 20px 25px;
*/
    }

    .books .column .asp_product_name::before {
        display: inline-block;
    }
    .books .column::before {
        display: none;
    }
    
    .tooltip-wrapper:active .tooltip {
        opacity: 0;
        pointer-events: none;
        transform: translateY(10px);
    }

}