/* ==================================================================================
//  Terrace V2.0
//  Start date: 31/12/2023
//  style.css - main marketing site styling
//  Dependencies: doron.css
-------------------------------------------------------------------------------------    
================================================================================== */

/* =============================================
// ------------------ INDEX --------------------
0. Globals
    0.1. Core styling
    0.2. Variables
    0.3. Buttons
1. Components
    1.1. Log in form
    1.2. Sign up form
        1.2.1. Form and splash
        1.2.2. Success / Fail messaging
    1.3. Brand
    1.4. Header
    1.5. Hero
    1.6. Feature panel
    1.7. Pricing Panel
    1.8. CTA Panel
    1.9. Footer
    1.10. Cookies Modal
    1.11. Blurb Panel
    1.12. Reset Password Form
    1.13. Features Page section
    1.14. Articles
2. Element specific
    2.1. Packs Panel
    2.2. Pricing Panel
    2.3. Components Panel
    2.4. Create Your Own Panel
    2.5. Assets Library Panel
    2.6. Favourites Panel
    2.7. Text Highlighters
    2.8. Policy Documents
    2.9. Register your interest
    2.10. Video overlay
    2.11. Example layout panels
    2.12. Nation gating
    2.13. Subscripton confirmation
3. Animations
============================================= */

/*------------------------------------------------
0. Globals
--------------------------------------------------
0.1. Core styling
------------------------------------------------*/
::selection {
    background: var(--brand-main-color) !important;
    color:#fff;
}
@media only screen and (min-width:200px)    {
    body    {
        width:100%;
        max-width:initial;
        height:100%;
        font-size:11px;
        line-height: 21px;
        font-family: 'ca_slalomregular';
        color:var(--brand-text-color);
    }
}
@media only screen and (min-width:768px)    {
    body    {
        font-size:13px;
        line-height:23px
    }
}
body.log-in {
    background:var(--brand-main-color) url('images/net-pattern-purple.png') no-repeat center center;
    background-size:cover;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:0 30px;
}
@media only screen and (min-width:200px)    {
    body.sign-up {
        background:var(--brand-main-color) url('images/net-pattern-purple.png') no-repeat center center;
        background-size:cover;
        margin:0 0 100px 0;
    }
}
@media only screen and (min-width:768px)    {
    body.sign-up {
        margin:50px 0 100px 0;
    }
}

body.features   {
    margin:55px 0 0 0;
}

::selection {
    background:none;
}

@font-face {
    font-family: 'ca_slalombold';
    src: url('app/fonts/caslalom-bold-webfont.woff2') format('woff2'),
         url('app/fonts/caslalom-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ca_slalommedium';
    src: url('app/fonts/caslalom-medium-webfont.woff2') format('woff2'),
         url('app/fonts/caslalom-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ca_slalomregular';
    src: url('app/fonts/caslalom-regular-webfont.woff2') format('woff2'),
         url('app/fonts/caslalom-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

strong {
    font-family: 'ca_slalombold';
}

h1, h2, h3, h4, h5, h6  {
    font-family: 'ca_slalombold';
    margin-block-end: 0;
    margin-block-start: 0;
}
@media only screen and (min-width:200px)    {
    h1  {
        font-size: 3.2em;
        line-height: 0.75em;
        letter-spacing: 0;
        text-transform: capitalize;
        font-family: 'akira expanded';
        word-break: break-word;
    }
    h2  {
        font-size:1.7em;
    }
    h2.section-title    {
        font-size:2.3em;
        margin-bottom:20px;
    }
    h3  {
        font-size:1.7em;
    }

    p   {
        font-size:1.2em;
    }
}
@media only screen and (min-width:768px)    {
    h1  {
        font-size: 6.5em;
        line-height: 0.8em;
        letter-spacing: 0;
    }
    h2  {
        font-size:1.6em;
    }
    h3  {
        font-size:1.6em;
    }

    p   {
        font-size:1.2em;
    }
}
@media only screen and (min-width:1024px)    {
    h1  {
        font-size: 5.7em;
        line-height: 0.9em;
    }
    h2  {
        font-size:1.7em;
    }
    h3  {
        font-size:1.7em;
    }

    p   {
        font-size:1.2em;
    }
}

input   {
    border:1px solid var(--brand-border-color);
    border-radius:3px;
    padding:5px 10px;
}

.form-error {
    padding:0;
    margin: 0 0 10px 0;
    color: red;
    font-family: 'ca_slalomregular';
}
.field-error    {
    background: var(--main-theme-color);
    padding: 3px 0;
    margin: 0 0 10px 0;
    color: red;
    font-family: 'ca_slalomregular';
}

video   {
    border-radius: 10px;
    border: 3px solid var(--brand-main-color);
}

.spacer {
    height:10%;
}
@media only screen and (min-width:200px)    {
    .spacer-collapse    {
        height:0%;
    }
    .modal-title    {
        font-family: 'akira expanded';
        font-size: 1.6em;
        line-height: 1em;
        margin: 0 0 20px 0;
    }
}
@media only screen and (min-width:768px)    {
    .spacer-collapse    {
        height:10%;
    }
    .modal-title    {
        font-family:'akira expanded';
        font-size:2em;
        line-height:1em;
        margin:0 0 20px 0;
    }
}

/*------------------------------------------------
0.2. Variables
------------------------------------------------*/
:root   {
    /* ---------- Colours ---------- */
    --brand-main-color:#5E1BD4;
    --brand-pale-color:#E5DBFF;
    --brand-tertiary-color:#CFFF4B;

    --brand-text-color:#0C1216;

    --brand-grey-color:#F2F3F5;

    --brand-border-color:#f2f2f2;

    --brand-deletion-color:#E62323;

    --main-theme-color:#fff;
    --tab-background-color:#fff;
    
    --graphics-editor-navigation-background-color:#444;
    --graphics-editor-background-color:#ddd;

    --canvas-background-color:green;
    --canvas-border-color:#aaa;
    
    --tools-drawer-background-color:#444;
    --options-drawer-background-color:#fff;
    
    --open-tools-button-background-color:green;

    --input-placeholder-color:#BCBCBC;

    /* ---------- Element attributes ---------- */
    /* Graphics editor*/
    @media screen and (min-width:200px) {
        --header-height:60px;   
    } 

    @media screen and (min-width:768px) {
        --header-height:80px;   
    } 
    --canvas-scale:scale(1);
}

/*------------------------------------------------
0.3. Buttons
------------------------------------------------*/
.filled-button  {
    background: var(--brand-main-color);
    color: #fff;
    font-family: 'ca_slalombold';
    padding: 12px 30px;
    font-size: 1.3em;
    border-radius: 60px;
}
.linear-button  {
    border: 1px solid var(--brand-main-color);
    background:none;
    color: var(--brand-main-color);
    font-family: 'ca_slalombold';
    padding: 12px 30px;
    font-size: 1.1em;
    border-radius: 60px;
}
.button a  {
    text-decoration: none;
    color:inherit;
}
a.filled-button, a.linear-button  {
    text-decoration: none !important;
}
.button {
    display: flex;
    justify-content: center;
    align-items: center;
}
.button img    {
    width:20px;
    height:20px;
    margin:0 10px 0 0 !important;
}

/*------------------------------------------------
1. Components
--------------------------------------------------
1.1. Log in form
------------------------------------------------*/
.log-in-form    {
    width:360px;
    height:auto;
    background:var(--main-theme-color);
    padding:50px 25px 25px 25px;
    overflow:auto;
    border-radius:10px;
}
.log-in-form h1 {
    margin:0;
}
.log-in-form span   {
    font-family: 'ca_slalombold';
    margin:0 0 10px 0;
}
.log-in-form input[type="email"], .log-in-form input[type="password"]   {
    margin: 0 0 10px 0;
    padding: 15px;
    border: 1px solid var(--brand-main-color);
}
.log-in-splash  {
    width:calc(100% - 360px);
    height:100%;
    background:var(--brand-main-color);
}

/*------------------------------------------------
1.2. Sign up
--------------------------------------------------
1.2.1 Form and splash
------------------------------------------------*/
@media only screen and (min-width:200px)    {
    .splash-image   {
        width:100%;
        height:10%;
        background:url('images/hero-background.jpg') no-repeat center center;
        background-size:cover;
    }
    .sign-up-form   {
        width:100%;
        height:90%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding:40px;
        overflow: auto;
    }
}
@media only screen and (min-width:768px)    {
    .splash-image   {
        width:40%;
        height:100%;
    }
    .sign-up-form   {
        width:60%;
        height:100%;
        padding:40px;
    }
}
@media only screen and (min-width:1024px)    {
    .splash-image   {
        width:60%;
    }
    .sign-up-form   {
        width:40%;
        padding:40px;
    }
}

@media screen and (max-height:620px)    {
    .sign-up-form   {
        display: block;
    }
}

.sign-up-form .button   {
    /* font-size:1.4em; */
}

.sign-up-form .terms    {
    padding: 0 0 20px 0;
    display: flex;
    justify-content: left;
    align-items: center;
}
.sign-up-form .terms input[type='checkbox']    {
    width:20px;
    height:20px;
}
.sign-up-form .terms p  {
    width: calc(100% - 60px);
    font-size: 0.85em;
    padding: 0 0 0 10px;
    line-height: 1.3em;
}
.sign-up-form .terms a  {
    width:auto;
    display: contents;
    color:var(--brand-main-color);
}

.sign-up-cta    {
    margin:30px 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:0.7em;
}
.sign-up-cta p  {
    width:auto;
}
.sign-up-cta a  {
    color: var(--brand-main-color);
    margin: 0 0 0 3px;
    font-size: 1.2em;
    text-decoration: none;
}
.sign-up-form span   {
    margin: 0 0 5px 0;
    font-size: 1.2em;
}
.sign-up-form input[type="text"], .sign-up-form input[type="email"], .sign-up-form input[type="password"]   {
    margin: 0 0 15px 0;
    padding: 15px;
    border: 1px solid var(--brand-text-color);
}

.account-cta  {
    margin:30px 0 0 0;
    padding:20px 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top:1px solid var(--brand-pale-color);
}
.account-cta p  {
    width:auto;
}
.account-cta a  {
    color:var(--brand-main-color);
    margin:0 0 0 5px;
    font-size:1.2em;
}

/*------------------------------------------------
1.2.2. Success / Fail messaging
------------------------------------------------*/
@media only screen and (min-width:200px)    {
    .subscribe-options  {
        max-width: 300px;
        background: var(--main-theme-color);
        border-radius: 10px;
        display: block;
    }
    .subscribe-options .six-columns:first-child {
     
    }
}
@media only screen and (min-width:768px)    {
    .subscribe-options  {
        max-width: 720px;
        display:flex;
        justify-content: center;
        align-items: center;
    }
}

.subscribe-options .button  {
    font-size: 1em;
}

.subscribe-options .six-columns:last-child  {
    padding: 30px;
}
.error-message {
    border:1px solid red;
}
.error-message a {
    text-decoration: underline;
    display: contents;
    color:red;
    cursor:pointer;
}

.masthead   {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.upgrade-panel  {
    background: var(--main-theme-color);
    border-radius: 5px;
    padding: 0 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.upgrade-panel .inner {
    margin: 0 0 50px 0;
}
.upgrade-panel .pricing-matrix  {
    margin:20px 0;
    padding:0;
}
.upgrade-panel span.upgrade-blurb   {
    font-size: 0.9em;
    line-height: 1.4em;
}
.upgrade-panel .pricing-matrix .button  {
    display:none;
}

/*------------------------------------------------
1.3. Brand
------------------------------------------------*/
.brand  {
    margin:0 0 30px 0;
    display:flex;
    justify-content: center;
    align-items: center;
}
.brand img {
    width:120px;
}

/*------------------------------------------------
1.4. Header
------------------------------------------------*/
@media only screen and (min-width:200px)    {
    section.header  {
        position:fixed;
        height:var(--header-height);
        padding:15px;
        transition:all 0.2s ease;
        display:flex;
        align-items: center;
        border-bottom: 1px solid #f2f2f2;
        background: var(--main-theme-color);
        z-index:4;
    }
    section.header img  {
        width:95px;
    }
    section.header .button  {
        float: right;
        padding: 10px 16px;
        border: none;
        font-size: 1.3em;
        background: var(--brand-pale-color);
        display:none;
    }
    section.header.filled   {
        background:#fff;
        padding: 20px;
    }

    section.header .eight-columns   {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    section.header ul   {
        margin-block-end: 0;
        margin:5px 0 0 0;
        width:auto;
        display: none;
    }
    section.header ul li {
        list-style-type: none;
        margin:0 15px 0 0;
    }
    section.header ul li:last-child {
        margin:0;
    }
    section.header ul li a  {
        text-decoration: none;
        color:var(--brand-text-color);
        font-family: 'ca_slalombold';
        font-size:1.4em;
    }

    .mobile-menu-button {
        position: absolute;
        top: 10px;
        width: 30px;
        height: 40px;
        float: initial;
        right: 15px;
        cursor:pointer;
    }
    .mobile-menu-button div {
        position: absolute;
        background:var(--brand-main-color);
        width:30px;
        height:3px;
        transition:all 0.2s ease;
    }
    .mobile-menu-button div:first-child {
        top:13px;
    }
    .mobile-menu-button div:last-child {
        top:23px;
    }

    .mobile-menu-button:hover > div:first-child   {
        top:12px;
    }
    .mobile-menu-button:hover > div:last-child   {
        top:24px;
    }

    .mobile-menu-button.open    {
        padding:5px 0 0 0;
    }
    .mobile-menu-button.open > div:first-child  {
        top:18px;
        transform: rotate(-45deg);
    }
    .mobile-menu-button.open > div:last-child  {
        top:18px;
        transform: rotate(45deg);
    }

    section.mobile-menu {
        position:fixed;
        top:var(--header-height);
        left:0;
        width:100%;
        height:100%;
        background:var(--main-theme-color);
        padding:50px 35px;
        z-index:10;
        display:block;
    }
    section.mobile-menu ul li   {
        display: block;
        width:100%;
        margin:0 0 30px 0;
    }
    section.mobile-menu ul li a {
        text-decoration: none;
        color:var(--brand-text-color);
        font-family: 'ca_slalombold';
        font-size:2.1em;
    }
    section.mobile-menu ul:last-child   {
        margin:35px 0 0 0;
    }
    section.mobile-menu ul:last-child li    {
        margin:0 0 5px 0;
    }
    section.mobile-menu ul:last-child li a  {
        font-size:1em;
        font-family:'ca_slalomregular';
    }
    section.mobile-menu .filled-button  {
        width:100%;
    }

    .sub-menu   {
        position: fixed;
        top:var(--header-height);
        overflow-x: auto;
        background: var(--brand-pale-color);
        height:55px;
        padding:18px 20px;
        z-index:5;
    }
    .sub-menu ul    {
        margin-block-end: 0;
        width:680px;
    }
    .sub-menu ul li {
        list-style-type: none;
        font-family: 'ca_slalombold';
        font-size:1.2em;
        margin:0 20px 0 0;
    }
    .sub-menu ul li a   {
        color:var(--brand-main-color);
        text-decoration: none;
    }
}
@media only screen and (min-width:768px)    {
    section.header  {
        height:var(--header-height);
        padding:30px;
    }
    section.header img  {
        width:120px;
    }
    section.header.filled   {
        background:#fff;
        padding: 20px 30px;
    }
    .mobile-menu-button {
        top:20px;
        right:30px;
    }

    .sub-menu   {
        padding:15px 30px;
    }
}
@media only screen and (min-width:1024px)   {
    section.header ul   {
        display: block;
    }
    section.header .button   {
        display: block;
    }
    .mobile-menu-button {
        display: none;
    }

    section.mobile-menu {
        display:none;
    }
}

/*------------------------------------------------
1.5. Hero
------------------------------------------------*/
@media only screen and (min-width:200px)    {
    section.hero    {
        /* text-align: center; */
        height:calc(70% + var(--header-height));
    }
    section.hero .text   {
        padding:0 5%;
        text-align:center;
    }
    section.hero h1 {
        display: block;
        background: url('images/hero-gradient.svg') no-repeat center center;
        background-size:cover;
        background-clip: text;
        color: transparent;
        text-shadow: none;
    }
    section.hero h1 span    {
        width:100%;
        display: inline-block;
    }
    section.hero p  {
        font-size: 1.2em;
        line-height: 1.4em;
        margin: 20px 0 0 0;
        opacity: 0.7;
    }
    section.hero .hero-cta  {
        /* display: flex;
        justify-content: center;
        align-items: center; */
        /* padding: 25px 40px 40px 40px; */
        padding:25px 0 0 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    section.hero .blurb {
        /* padding:0 160px 40px 160px; */
    }
    section.hero .blurb p {
        font-size: 1.1em;
        line-height: 1.6em;
        margin: 30px 0 15px 0;
        opacity:0.6;
    }
}

@media only screen and (min-width:768px)    {
    section.hero    {
        /* text-align: center; */
        height:calc(80% + var(--header-height));
    }
    section.hero h1 {
        font-size:4em;
    }
    section.hero .text   {
        padding:0 10%;
        text-align:center;
    }
    section.hero .six-columns   {
        width:100%;
    }
    section.hero .six-columns:first-child   {
        padding:0;
    }
    section.hero p  {
        font-size: 1.2em;
        margin: 20px 0 0 0;
        line-height: 1.5em;
    }
    section.hero .hero-cta  {
        /* display: flex;
        justify-content: center;
        align-items: center; */
        /* padding: 25px 40px 40px 40px; */
        padding:25px 0 50px 0;
    }
    section.hero .blurb {
        padding:0 160px 40px 160px;
    }
    section.hero .blurb p {
        font-size: 1.1em;
        line-height: 1.6em;
        margin: 30px 0 0 0;
        opacity:0.6;
    }
}
@media only screen and (min-width:1024px)    {
    section.hero    {
        /* text-align: center; */
        /* justify-content: center;
        align-items: center; */
    }
    section.hero .text   {
        padding:0;
        text-align:center;
    }
    section.hero .six-columns:first-child   {
        padding:0;
    }
    section.hero h1 {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 6em;
        line-height: 0.8em;
        letter-spacing: -3px;
    }
    section.hero h1 span    {
        width:auto;
        display: flex;
    }
    section.hero p  {
        font-size: 1.4em;
        line-height: 1.4em;
        margin: 15px 0 0 0;
        padding: 0 20%;
    }
    section.hero .hero-cta  {
        /* display: flex;
        justify-content: center;
        align-items: center; */
        /* padding: 25px 40px 40px 40px; */
        padding:30px 0 50px 0;
    }
    section.hero .blurb {
        padding:0 80px 40px 80px;
    }
    section.hero .blurb p {
        font-size: 1.1em;
        line-height: 1.6em;
        margin: 30px 0 0 0;
        opacity:0.6;
    }
}
@media screen and (min-width:1276px)    {
    section.hero h1 {
        font-size: 6em;
        line-height: 0.75em;
    }
    section.hero p  {
        font-size:1.6em;
        line-height: 1.3em;
        margin:15px 0 0 0;
        padding:0 20%;
    }
}
@media screen and (min-width:1499px)    {
    section.hero h1 {
        padding:0 10%
    }
}
@media screen and (min-width:1844px)    {
    section.hero h1 {
        padding:0 15%
    }
}
@media screen and (min-width:2142px)    {
    section.hero h1 {
        padding:0 20%
    }
}
@media screen and (min-width:2499px)    {
    section.hero h1 {
        padding:0 25%
    }
}
.layout-quilt   {
    height:100%;
    background:var(--brand-text-color);
}
.layout-quilt .text {
    position: absolute;
    top:0;
    left:0;
    float: initial;
    width:100%;
    height:100%;
    text-align: center;
    color:#fff;
    font-family:'ca_slalombold';
    display: flex;
    justify-content: center;
    align-items: center;
    opacity:0;
    transition: all 0.3s ease;
    z-index:2;
}
.layout-quilt .text div {
    max-width:900px;
    padding: 0 5%;
}
@media screen and (min-width:200px) {
    .layout-quilt .text div p   {
        font-size: 2em;
        line-height: 0.9em;
        font-family: 'akira expanded';
    }
    .layout-quilt .text div span   {
        margin: 20px 0 0 0;
        font-size: 1.2em;
        line-height: 1.4em;
    }
}
@media screen and (min-width:768px) {
    .layout-quilt .text div p   {
        font-size: 3em;
        line-height: 0.9em;
    }
    .layout-quilt .text div span   {
        margin:20px 0 0 0;
        font-size:1.5em;
        line-height:1em;
    }
}
@media screen and (min-width:1024px) {
    .layout-quilt .text div p   {
        font-size: 3em;
        line-height: 0.9em;
    }
    .layout-quilt .text div span   {
        margin:20px 0 0 0;
        font-size:1.5em;
        line-height:1em;
    }
}
@media screen and (min-width:1280px) {
    .layout-quilt .text div p   {
        font-size: 4em;
        line-height: 0.9em;
    }
    .layout-quilt .text div span   {
        margin:20px 0 0 0;
        font-size:1.5em;
        line-height:1em;
    }
}
.layout-quilt .background   {
    position: absolute;
    top:0;
    left:0;
    float: initial;
    width:100%;
    height:100%;
    opacity:1;
    background:url('images/layout-quilt.jpg') no-repeat top center;
    background-size: cover;
    background-attachment: fixed;
    transition: all 0.3s ease;
    z-index:1;
}

.quilt-fade {
    opacity:0.3 !important;
}
.quilt-text-fade    {
    opacity:1 !important;
}


/*------------------------------------------------
1.6. Feature Panel
------------------------------------------------*/
@media only screen and (min-width:200px)    {
    section.feature-panel   {
        padding:0;
    }
    section.feature-panel p {
        font-size: 1.3em;
        margin: 10px 0 20px 0;
    }
    section.feature-panel.flex-panel    {
        display: flex;
        align-items: center;
    }
    section.feature-panel.no-padding    {
        padding:0;
    }
    section.feature-panel .video    {
        padding:20px 20px 0;
    }
    section.feature-panel.brand-panel    {
        background:var(--brand-main-color) url('images/net-pattern-purple.png') center center no-repeat !important;
        background-size: cover;
        color: #fff;
    }
    section.feature-panel.pale-panel    {
        background:var(--brand-pale-color);
    }
    section.feature-panel ul    {
        margin: 30px 0 0 0;
    }
    section.feature-panel ul li {
        display: block;
        width:100%;
        font-size:1.3em;
        margin:0 0 5px 0;
        text-align: center;
    }
    .image-text-wrapper   {
        display: block;
    }
    .image-text-wrapper img {
        border-radius: 0;
    }
    .image-text-wrapper .hero-cta   {
        margin:0;
        justify-content: center;
    }
}
@media only screen and (min-width:768px)    {
    section.feature-panel   {
        padding:60px;
    }
    section.feature-panel p {
        font-size: 1.2em;
        margin: 10px 0 0 0;
    }
    section.feature-panel.flex-panel    {
        display: flex;
        align-items: center;
    }
    section.feature-panel.no-padding    {
        padding:0;
    }
    section.feature-panel .video    {
        padding:20px 50px 0;
    }
    section.feature-panel.brand-panel    {
        background:var(--brand-main-color);
        color: #fff;
    }
    section.feature-panel.pale-panel    {
        background:var(--brand-pale-color);
    }
    section.feature-panel ul    {
        margin: 0;
    }
    section.feature-panel ul li {
        display: block;
        width:100%;
        font-size:1.3em;
        margin:0 0 5px 0;
        text-align: center;
    }
    .image-text-wrapper   {
        display: block;
    }
    .image-text-wrapper img {
        border-radius: 10px;
    }
    .image-text-wrapper .six-columns    {
        width: 100%;
    }
    .image-text-wrapper .hero-cta   {
        margin:20px 0 0 0;
    }
}
@media only screen and (min-width:1024px)    {
    section.feature-panel   {
        padding:160px 80px;
    }
    section.feature-panel p {
        font-size: 1.6em;
        line-height:1.4em;
        margin: 10px 0 0 0;
    }
    section.feature-panel.flex-panel    {
        display: flex;
        align-items: center;
    }
    section.feature-panel.no-padding    {
        padding:0;
    }
    section.feature-panel.brand-panel    {
        background:var(--brand-main-color);
        color: #fff;
    }
    section.feature-panel.pale-panel    {
        background:var(--brand-pale-color);
    }
    section.feature-panel ul    {
        margin: 30px 0 0 0;
    }
    section.feature-panel ul li {
        display: block;
        width:100%;
        font-size:1.3em;
        margin:0 0 5px 0;
        text-align: center;
    }
    .image-text-wrapper   {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .image-text-wrapper .hero-cta   {
        margin:20px 0 0 0;
        justify-content: left;
    }
}

/*------------------------------------------------
1.7. Pricing Panel
------------------------------------------------*/
@media only screen and (min-width:200px)    {
    section.pricing-panel   {
        padding:30px;
    }
    section.pricing-panel p {
        font-size: 1.3em;
        margin: 10px 0 0 0;
    }
}
@media only screen and (min-width:768px)    {
    section.pricing-panel   {
        padding:60px;
    }
    section.pricing-panel p {
        font-size: 1.2em;
        margin: 10px 0 0 0;
    }
}
@media only screen and (min-width:1024px)    {
    section.pricing-panel   {
        padding:100px 160px 100px 160px;
    }
    section.pricing-panel p {
        font-size: 1.6em;
        line-height:1.4em;
        margin: 10px 0 0 0;
    }
}

/*------------------------------------------------
1.8. CTA Panel
------------------------------------------------*/
@media only screen and (min-width:200px)    {
    section.cta-panel   {
        padding:80px 30px;
        text-align: center;
    }
    section.cta-panel h3    {
        font-size: 2.2em;
        line-height: 1em;
        letter-spacing: -1px;
    }
    section.cta-panel p {
        font-size:1.3em;
        margin:10px 0 0 0;
    }
    section.cta-panel .cta  {
        display: flex;
        justify-content: center;
        padding:25px 0 0 0;
    }
}
@media only screen and (min-width:768px)    {
    section.cta-panel   {
        padding:160px;
        text-align: center;
    }
    section.cta-panel h3    {
        font-size:2.5em;
    }
    section.cta-panel p {
        font-size: 1.4em;
        margin: 10px 0 0 0;
        line-height: 1.4em;
    }
    section.cta-panel .cta  {
        display: flex;
        justify-content: center;
        padding:25px 0 0 0;
    }
}

/*------------------------------------------------
1.9. Footer
------------------------------------------------*/
footer  {
    padding:30px 30px 30px 30px;
}
footer img  {
    max-width:375px;
}
footer p.title  {
    font-size:1em;
    font-family:"ca_slalombold";
    margin:0 0 10px 0;
}
footer ul   {
    width:auto;
    padding:0 0 30px 0;
}
footer ul li    {
    display: block;
    list-style-type: none;
    float: none;
}
@media only screen and (min-width:200px)    {
    footer ul li a  {
        color: inherit;
        text-decoration: none;
        width: 100%;
        padding:0 0 7px 0;
    }
}
@media only screen and (min-width:768px)    {
    footer ul li a  {
        color: inherit;
        text-decoration: none;
        width:auto;
        /* padding:10px; */
    }
}

/*------------------------------------------------
1.10. Cookies Modal
------------------------------------------------*/
.cookies-modal  {
    position: fixed;
    top:initial;
    bottom:0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:20px;
    z-index:99;
}
.cookies-modal > div    {
    background:#fff;
    border-radius:10px;
    padding:30px;
    max-width:800px;
    float:initial;
    border:1px solid var(--brand-pale-color);
}
.cookies-modal p:first-child    {
    font-family:'ca_slalombold';
    font-size:1.6em;
    margin:0 0 10px 0;
}
.cookies-modal p:nth-child(2)    {
    margin:0 0 10px 0;
}
.cookies-modal a    {
    font-size: inherit;
    display: contents;
    color:var(--brand-main-color);
}
.cookies-modal .button  {
    font-size:1em;
}

/*------------------------------------------------
1.11. Blurb Panel
------------------------------------------------*/
@media only screen and (min-width:200px) {   
    .blurb-panel    {
        text-align: center;
        padding:50px 20px;
    }
    .blurb-panel div    {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .blurb-panel p  {
        font-size: 1.4em;
        line-height: 1.4em;
        display: flex;
        max-width: 800px;
        margin: 0 0 20px 0;
        padding: 0 20px;
    }
    .blurb-panel span   {
        display: contents;
        background:Red;
    }
    .blurb-panel img    {
        border-radius:10px;
        border:3px solid var(--brand-main-color);
    }
}
@media only screen and (min-width:768px) {   
    .blurb-panel    {
        text-align: center;
        padding:100px 50px;
    }
    .blurb-panel div    {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .blurb-panel p  {
        font-size: 1.6em;
        line-height: 1.4em;
        display: flex;
        max-width:800px;
        margin: 0 0 50px 0;
        padding:0;
    }
    .blurb-panel span   {
        display: contents;
        background:Red;
    }
    .blurb-panel img    {
        border-radius:10px;
        border:3px solid var(--brand-main-color);
    }
}
@media only screen and (min-width:1024px) {   
    .blurb-panel    {
        text-align: center;
        padding:100px 50px;
    }
    .blurb-panel div    {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .blurb-panel p  {
        font-size: 1.6em;
        line-height: 1.4em;
        display: flex;
        max-width:800px;
        margin: 0 0 50px 0;
    }
    .blurb-panel span   {
        display: contents;
        background:Red;
    }
    .blurb-panel img    {
        border-radius:10px;
        border:3px solid var(--brand-main-color);
    }
}

/*------------------------------------------------
1.12. Reset Password Form
------------------------------------------------*/
.alert-banner   {
    background:red;
    color:#fff;
    position: fixed;
    text-align:center;
    padding:10px;
    z-index:2;
}
.identity-password-splash   {
    max-width: 500px;
    background: var(--main-theme-color);
    padding: 30px;
    border-radius: 20px;
}
.identity-password-splash img   {
    max-width:120px;
    margin:0 0 30px 0;
}
.identity-password-splash label {
    margin:10px 0 0 0;
    font-family:'ca_slalombold';
}
.identity-password-splash input   {
    border:1px solid black;
    padding:20px;
}
.identity-password-splash .button, .identity-password-splash button    {
    margin:20px 0 0 0;
}
.identity-password-splash button    {
    background: var(--brand-main-color);
    color: #fff;
    font-family: 'ca_slalombold';
    padding: 12px 30px;
    font-size: 1.3em;
    border-radius: 6px;
}

/*------------------------------------------------
1.13. Features Page section
------------------------------------------------*/
.features-page-section  {
    padding:60px 10% !important;
}
.features-page-section h2.section-title {
    text-align: center;
}
.features-page-section p    {
    margin:0 0 10px 0 !important;
    text-align: center;
}
.features-page-section ul   {
    margin:0 !important;
}
.features-page-section ul li    {
    text-align: left !important;
}

@media only screen and (min-width:200px)    {
    .features-grid   {
        padding:35px 0 0 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .features-grid div   {
        max-width:500px;
    }
    .features-grid .six-columns {
        display: block;
        width:100%;
    }
    .features-grid span   {
        width:100%;
        text-align:center;
        padding:10px 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .features-grid span p   {
        width:auto;
        height: 100%;
        font-size:1.2em;
        font-family:'ca_slalombold';
        margin:0 !important;
    }
    .features-grid img  {
        width:20px;
        height:20px;
        margin:0 10px 0 0;
    }
}
@media only screen and (min-width:768px)    {
    .features-grid .six-columns {
        display: block;
        width:50%;
        max-width:50%;
    }
    .features-grid span   {
        font-size:1.2em;
        padding:10px 20px;
    }
    .features-grid img  {
        width:25px;
        height:25px;
        margin:0 20px 0 0;
    }
}

.features-page-section .feature-image   {
    border-radius:10px;
    border:3px solid var(--brand-main-color);
    margin:35px 0 0 0;
}

/*------------------------------------------------
1.14. Articles
------------------------------------------------*/

.article    {
    display: flex;
    justify-content: center;
    margin:150px 0 0 0;
    padding:0 20px;
}
.article .meta  {
    display: flex;
    justify-content: left;
    align-items: center;
    padding:7px 14px 7px 7px;
    margin:20px 0;
    border:1px solid var(--brand-pale-color);
    border-radius:100px;
    width:auto;
}
.article .meta img  {
    width:30px;
    height:30px;
    border-radius:15px;
    margin:0 10px 0 0;
}
.article .meta span    {
    width:auto;
}
.article .meta a    {
    width:auto;
    margin:0 0 0 5px;
    text-decoration: none;
    font-family: 'ca_slalombold';
}
@media screen and (min-width:0) {
    .article .inner {
        max-width:900px;
    }
    .article .inner h1  {
        font-size:3em;
        line-height: 1em;
    }
    .article .inner p, .article .inner ul li   {
        font-size:1.3em;
    }
    .article .inner ul  {
        margin:10px 0 0 0;
    }
    .article .inner ul li   {
        margin:0 0 10px 0;
    }
}
@media screen and (min-width:1000px) {
    .article .inner h1  {
        font-size:3em;
        line-height: 1em;
    }
   .article .inner p, .article .inner ul li   {
        font-size:1.2em;
    }
}

.article .inner section.focus   {
    padding:30px;
    background:var(--brand-pale-color);
    border-radius: 20px;
    margin:30px 0 0 0;
}
.article .inner section.focus h2    {
    margin:20px 0;
}
.article .inner section.focus p.note {
    margin:10px 0 30px 0;
}
.article .inner section.focus ul    {
    margin:10px 0 30px 0;
    padding:0 0 0 30px;
}
.article .inner section.focus p.note:first-child    {
    margin:0 0 10px 0;
}
.article .inner section.focus img   {
    border-radius:20px;
}
.article .filled-button {
    font-size:0.97em;
    padding:10px 20px;
    margin:0 0 30px 0;
}

.article span.rank  {
    font-size:2em;
}

/*------------------------------------------------
2. Element Specific
--------------------------------------------------
2.1. Packs Panel
------------------------------------------------*/
@media only screen and (min-width:200px)    {
    .packs-panel    {
        padding:0 0 40px 0 !important;
    }
    .packs-panel img    {
        margin:0 0 40px 0;
    }
    .packs-panel p  {
        padding:0 30px;
    }
}
@media only screen and (min-width:768px)    {
    .packs-panel    {
        padding:0 0 80px 0 !important;
    }
    .packs-panel img    {
        margin:0 0 40px 0;
    }
    .packs-panel p  {
        padding:0 60px 40px 60px;
    }
}
@media only screen and (min-width:1024px)    {
    .packs-panel    {
        padding:0 0 60px 0 !important;
    }
    .packs-panel img    {
        margin:0 0 60px 0;
    }
    .packs-panel p  {
        padding:0 240px 20px 240px;
    }
}

/*------------------------------------------------
2.2. Pricing Panel
------------------------------------------------*/
@media only screen and (min-width:200px)    {
    .pricing-matrix {
        margin:25px 0 0 0;
        padding:0;
    }
    .mobile-pricing-table   {
        border:1px solid var(--brand-main-color);
        border-radius: 5px;
        font-size:1.1em;
        display:block;
    }
    .mobile-pricing-table .heading    {
        font-family: 'ca_slalombold';
        background:var(--brand-pale-color);
        padding:10px;
        border-radius:5px 5px 0 0;
    }
    .mobile-pricing-table .heading div:first-child, .mobile-pricing-table .heading div:nth-child(2) {
        width:20%;
    }
    .mobile-pricing-table .heading div:last-child   {
        width:60%;
    }
    .mobile-pricing-table .data .row div:first-child, .mobile-pricing-table .data .row div:nth-child(2) {
        width:20%;
        display: flex;
        justify-content:left;
        align-items: center;
    }
    .mobile-pricing-table .data .row div:last-child {
        width:60%;
    }
    .mobile-pricing-table .data .row    {
        padding:10px;
        border-bottom:1px solid var(--brand-pale-color);
    }
    .mobile-pricing-table .data .row img    {
        width:20px;
        height:20px;
    }
    .mobile-pricing-table .data .row.pricing    {
        font-family: 'ca_slalombold';
        font-size:1.2em;
    }
    .mobile-pricing-table .data .row.pricing span   {
        font-family: 'ca_slalomregular';
        font-size: 0.7em;
        height: 18px;
        padding: 0 0 0 2px;
    }
    .mobile-pricing-table .buttons  {
        padding:10px;
    }
    .mobile-pricing-table .buttons .button  {
        width:100%;
        text-align: center;
        font-size:1.2em;
    }
    .mobile-pricing-table .buttons .button:first-child  {
        margin:0 0 10px 0;
    }
    .pricing-table  {
        border:1px solid var(--brand-main-color);
        width:49%;
        margin:0 2% 0 0;
        border-radius: 5px;
        display:none;
    }
    .pricing-table:last-child   {
        margin:0;
    }
    .pricing-table div:first-child  {
        font-family: 'ca_slalombold';
        font-size:1.3em;
        padding:20px;
        background:var(--brand-pale-color);
        border-radius:5px 5px 0 0;
    }
    .pricing-table div  {
        font-size:1.3em;
        padding:10px 20px;
        border-bottom: 1px solid var(--brand-pale-color);
        display: flex;
        align-items: center;
    }
    .pricing-table .pricing {
        font-size:3em;
        font-family: 'ca_slalombold';
    }
    .pricing-table .pricing span {
        font-size: 0.5em;
        font-family: 'ca_slalomregular';
        height: 17px;
        padding: 0 0 0 5px;
        opacity: 0.6;
    }
    .pricing-table .y::before   {
        content: '';
        display: inline-block;
        background:url('images/icons/yes-icon.svg') center center no-repeat;
        background-size:20px 20px;
        width:20px;
        height:20px;
        margin:0 10px 0 0;
    }
    .pricing-table .n::before   {
        content: '';
        display: inline-block;
        background:url('images/icons/no-icon.svg') center center no-repeat;
        background-size:20px 20px;
        width:20px;
        height:20px;
        margin:0 10px 0 0;
    }
    .pricing-table div:last-child   {
        border-radius:0 0 5px 5px;
    }
    .pricing-table .button  {
        font-size:1em !important;
        width:100%;
        background:var(--brand-main-color) !important;
        color:#fff;
        text-align: center !important;
        border-radius:7px !important;
        display: block;
    }
    
    .mobile-most-popular-tag {
        background: yellow;
        border-radius: 3px;
        color: red;
        width: auto;
        padding: 0px 7px;
        font-family: 'ca_slalombold';
        z-index: 0;
        top: 65px;
        left: 15px;
        position: absolute;
        font-size: 0.7em;
        animation: animateTag 1s ease infinite;
    }

    .inline-plus-discount   {
        font-size: 0.7em !important;
        position: absolute;
        line-height: 1.5em;
        height: auto;
        width: 100% !important;
        right: -80px;
        background: var(--brand-main-color);
        border: 1px solid #fff !important;
        padding: 10px 13px !important;
        display: flex !important;
        justify-content: center;
        align-items: center !important;
        top: -60px;
        border-radius: 5px !important;
        color: #fff;
        font-family: 'ca_slalomregular';
        float: initial;
    }
}
@media only screen and (min-width:768px)    {
    .pricing-matrix {
        margin:50px 0 0 0;
        padding:0;
    }
    .mobile-pricing-table   {
        display:none;
    }
    .pricing-table  {
        border:1px solid var(--brand-main-color);
        width:49%;
        margin:0 2% 0 0;
        border-radius: 5px;
        display: block;
    }
    .pricing-table:last-child   {
        margin:0;
    }
    .pricing-table div:first-child  {
        font-family: 'ca_slalombold';
        font-size:1.3em;
        padding:20px;
        background:var(--brand-pale-color);
        border-radius:5px 5px 0 0;
    }
    .pricing-table div  {
        font-size:1.3em;
        padding:10px 20px;
        border-bottom: 1px solid var(--brand-pale-color);
        display: flex;
        align-items: center;
    }
    .pricing-table .pricing {
        font-size:3em;
        font-family: 'ca_slalombold';
        padding:20px;
    }
    .pricing-table .pricing span {
        font-size: 0.5em;
        font-family: 'ca_slalomregular';
        height: 17px;
        padding: 0 0 0 5px;
        opacity: 0.6;
    }
    .pricing-table .y::before   {
        content: '';
        display: inline-block;
        background:url('images/icons/yes-icon.svg') center center no-repeat;
        background-size:20px 20px;
        width:20px;
        height:20px;
        margin:0 10px 0 0;
    }
    .pricing-table .n::before   {
        content: '';
        display: inline-block;
        background:url('images/icons/no-icon.svg') center center no-repeat;
        background-size:20px 20px;
        width:20px;
        height:20px;
        margin:0 10px 0 0;
    }
    .pricing-table div:last-child   {
        border-radius:0 0 5px 5px;
    }
    .pricing-table .button  {
        font-size: 1em !important;
        width: 100%;
        background: var(--brand-main-color) !important;
        color: #fff;
        text-align: center !important;
        border-radius: 7px !important;
        display: block;
        padding: 15px;
        font-family: 'ca_slalombold';
        text-decoration: none;
    }
    .pricing-table .linear-button   {
        border:1px solid var(--brand-main-color);
        color:var(--brand-main-color);
        background:none !important;
    }
    .desktop-most-popular-tag {
        background: yellow !important;
        border-radius: 6px !important;
        color: red;
        width: auto;
        padding: 0px 7px !important;
        font-family: 'ca_slalombold' !important;
        z-index: 0;
        top: -13px;
        left: 20px;
        position: absolute;
        font-size: 0.7em !important;
        animation: animateDesktopTag 1s ease infinite;
    }

    .inline-plus-discount   {
        font-size: 0.3em !important;
        line-height: 1.5em;
        right: -20px;
        padding: 13px !important;
        top: -100px;
        width:60% !important;
    }
}
@media only screen and (min-width:1024px)    {
    .pricing-matrix {
        margin:50px 0 0 0;
        padding:0 20px;
    }
    .pricing-table  {
        border:1px solid var(--brand-main-color);
        width:49%;
        margin:0 2% 0 0;
        border-radius: 5px;
    }
    .pricing-table:last-child   {
        margin:0;
    }
    .pricing-table div:first-child  {
        font-family: 'ca_slalombold';
        font-size:1.3em;
        padding:20px;
        background:var(--brand-pale-color);
        border-radius:5px 5px 0 0;
    }
    .pricing-table div  {
        font-size:1.3em;
        padding:10px 20px;
        border-bottom: 1px solid var(--brand-pale-color);
        display: flex;
        align-items: center;
    }
    .pricing-table .pricing {
        font-size:3em;
        font-family: 'ca_slalombold';
    }
    .pricing-table .pricing span {
        font-size: 0.5em;
        font-family: 'ca_slalomregular';
        height: 17px;
        padding: 0 0 0 5px;
        opacity: 0.6;
    }
    .pricing-table .y::before   {
        content: '';
        display: inline-block;
        background:url('images/icons/yes-icon.svg') center center no-repeat;
        background-size:20px 20px;
        width:20px;
        height:20px;
        margin:0 10px 0 0;
    }
    .pricing-table .n::before   {
        content: '';
        display: inline-block;
        background:url('images/icons/no-icon.svg') center center no-repeat;
        background-size:20px 20px;
        width:20px;
        height:20px;
        margin:0 10px 0 0;
    }
    .pricing-table div:last-child   {
        border-radius:0 0 5px 5px;
    }
}

/*------------------------------------------------
2.3. Components Panel
------------------------------------------------*/
@media only screen and (min-width:200px)    {
    .components-panel    {
        padding-bottom:0 !important;
        padding-top:40px !important;
    }
    .components-panel .twelve-columns   {
        margin:0 0 0 0;
    }
    .components-panel .image-text-wrapper .six-columns:first-child {
        padding:0 30px 30px 30px;
        text-align:center;
    }
}
@media only screen and (min-width:768px)    {
    .components-panel    {
        padding-bottom:80px !important;
        padding-top:80px !important;
    }
    .components-panel .twelve-columns   {
        margin:0;
    }
    .components-panel .image-text-wrapper .six-columns:first-child {
        padding:0 0 40px 0;
        text-align:center;
    }
}
@media only screen and (min-width:1024px)    {
    .components-panel    {
        padding-bottom:80px !important;
        padding-top:80px !important;
    }
    .components-panel .twelve-columns   {
        margin:0 0 40px 0;
    }
    .components-panel .image-text-wrapper .six-columns:first-child {
        padding:0 60px 0 0;
        text-align:left;
    }
}

/*------------------------------------------------
2.4. Pull In Panel
------------------------------------------------*/
@media only screen and (min-width:200px)    {
    .pull-in-panel  {
        text-align: center;
        padding:30px !important;
    }
    .pull-in-panel img  {
        margin:0 0 0 0;
        border-radius:10px;
        border:3px solid var(--brand-main-color);
    }
}
@media only screen and (min-width:768px)    {
    .pull-in-panel  {
        text-align: center;
        padding:60px !important;
    }
    .pull-in-panel img  {
        margin:40px 0 0 0;
        border-radius:10px;
    }
}
@media only screen and (min-width:1024px)    {
    .pull-in-panel  {
        text-align: center;
        padding:120px 160px 100px 160px !important;
    }
    .pull-in-panel img  {
        margin:40px 0 0 0;
        border-radius:10px;
    }
}

/*------------------------------------------------
2.4. Create Your Own Panel
------------------------------------------------*/
@media only screen and (min-width:200px)    {
    .create-your-own-panel  {
        text-align: center;
        padding:30px !important;
    }
    .create-your-own-panel img  {
        margin:0;
        border-radius:10px;
        border:3px solid var(--brand-main-color);
    }
    .create-your-own-panel .hero-cta    {
        margin:20px 0 0 0;
        justify-content: center;
    }
}
@media only screen and (min-width:768px)    {
    .create-your-own-panel  {
        text-align: center;
        padding:0 60px 60px !important;
    }
    .create-your-own-panel img  {
        margin:40px 0 0 0;
        border-radius:10px;
    }
}
@media only screen and (min-width:1024px)    {
    .create-your-own-panel  {
        text-align: center;
        padding:0 160px 80px 160px !important;
    }
    .create-your-own-panel img  {
        margin:40px 0 0 0;
        border-radius:10px;
    }
    .create-your-own-panel .hero-cta    {
        margin:20px 0 0 0;
        justify-content: center;
    }
}

/*------------------------------------------------
2.5. Assets Library Panel
------------------------------------------------*/
@media only screen and (min-width:200px)    {
    .assets-library-panel   {
        padding:30px !important;
        text-align: center;
    }
    .assets-library-panel img  {
        margin:0;
        border-radius:10px;
        border:3px solid var(--brand-main-color);
    }
}
@media only screen and (min-width:768px)    {
    .assets-library-panel   {
        padding:60px !important;
        text-align: center;
    }
    .assets-library-panel img  {
        margin:40px 0 0 0;
        border-radius:10px;
    }
}
@media only screen and (min-width:1024px)    {
    .assets-library-panel   {
        padding:100px 160px 80px 160px !important;
        text-align: center;
    }
    .assets-library-panel img  {
        margin:40px 0 0 0;
        border-radius:10px;
    }
}

/*------------------------------------------------
2.6. Favourites Panel
------------------------------------------------*/
@media only screen and (min-width:200px)    {
    .favourites-panel   {
        padding-bottom:0 !important;
        padding-top:0 !important;
        padding:30px !important;
    }
    .favourites-panel .six-columns:last-child   {
        padding:30px 0 0 0px;
    }
    .favourites-panel img   {
        border-radius:10px;
    }
}
@media only screen and (min-width:768px)    {
    .favourites-panel   {
        padding-bottom:0 !important;
        padding-top:0 !important;
        padding:60px !important;
    }
    .favourites-panel .six-columns:last-child   {
        padding:30px 0 0 0;
    }
}
@media only screen and (min-width:1024px)    {
    .favourites-panel   {
        padding-bottom:80px !important;
        padding-top:80px !important;
    }
    .favourites-panel .six-columns:last-child   {
        padding:0 0 0 60px;
    }
    .favourites-panel img   {
        border-radius:10px;
    }
}

/*------------------------------------------------
2.7. Text Highlighters
------------------------------------------------*/
.highlighter    {
    /* background: url('images/highlighter-background.png') repeat;
    background-size:cover; */
    /* border-bottom: 3px dotted var(--brand-main-color); */
}

/*------------------------------------------------
2.8. Policy Documents
------------------------------------------------*/
@media only screen and (min-width:200px)    {
    body.policy-page {
        background: url('images/policy-background.png') no-repeat left top;
        background-size:auto;
        background-attachment: fixed;
    }
    .policy {
        margin:calc(var(--header-height) + 30px) 0 0 0;
        padding:0 20px;
    }
    .policy h1, .policy h2, .policy p, .policy ul  {
        margin:0 0 20px 0;
    }
    .policy ul li   {
        font-size:1.2em;
        margin:0 0 10px 20px;
        width:100%;
    }
    .policy a   {
        display: contents;
        color:var(--brand-main-color);
    }
}
@media only screen and (min-width:768px)    {
    body.policy-page {
        background: url('images/policy-background.png') no-repeat top center;
        background-size:cover;
        background-attachment: fixed;
    }
    .policy {
        margin:calc(var(--header-height) * 2) 0 0 0;
        padding:0 10% 0 10%;
    }
}
@media only screen and (min-width:1024px)   {
    .policy {
        margin:calc(var(--header-height) * 2) 0 0 0;
        padding:0 20% 0 20%;
    }
}

/*------------------------------------------------
2.9. Register your interest
------------------------------------------------*/
.register-your-interest {
    margin:20px 0;
}
.register-your-interest input[type="email" i]   {
    height:60px;
    padding:20px;
    border:2px solid var(--brand-main-color);
    border-radius:10px 0 0 10px;
    font-size:1.6em;
    width:70%;
}
.register-your-interest .button  {
    height:60px;
    width:30%;
    border:2px solid var(--brand-main-color);
    border-radius: 0 10px 10px 0;
}
.register-response  {
    background:var(--brand-pale-color);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding:30px;
    border-radius:10px;
}
.register-response p    {
    margin:0 !important;
}

/*------------------------------------------------
2.10. Video overlay
------------------------------------------------*/
.video-overlay  {
    position: fixed;
    top: 0;
    left: 0;
    float: initial;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    padding:0 10%;
    z-index: 5;
}
.video-overlay video    {
    z-index:1;
}
.video-overlay .close   {
    position: fixed;
    top:30px;
    right:30px;
    width:30px;
    height:30px;
    border-radius:15px;
    background:#fff url('app/images/icons/close-drawer-icon.svg') no-repeat center center;
    background-size: 15px 15px;
    z-index:2;
}

/*------------------------------------------------
2.11. Example layout panels
------------------------------------------------*/
.examples-panel {
    padding-top:0 !important;
}
.example-layouts    {
    overflow-x:auto;
}
.example-layouts .inner {

}
.example-layouts .inner img {
    width:25%;
}

/*------------------------------------------------
2.12. Nation gating
------------------------------------------------*/
.nation-gate .modal-title   {
    background: url(images/hero-gradient.svg) no-repeat center center;
    background-size: cover;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}
.nation-gate .modal-title, .nation-gate p    {
    text-align: center;
    margin-bottom:10px;
}
.nation-gate p  {
    margin:0 0 20px 0;
    line-height:1.2em;
}
.nation-gate .countries {
    padding: 0 10px;
}
.nation-gate .countries .country img    {
    width:50px;
}

@media screen and (min-width:200px) {
    .nation-gate    {
        padding: 30px 25px;
    }
    .nation-gate .countries .country span   {
        padding: 15px 0 0 0;
        font-size: 0.85em;
        line-height: 1.1em;
    }
    .nation-gate .countries .country    {
        width: 49%;
        padding: 15px;
        font-family: 'ca_slalombold';
        text-transform: uppercase;
        border-radius: 5px;
        margin: 0 2% 2% 0;
        background: var(--main-theme-color);
        box-shadow: 0 0 7px 0 #eee;
        cursor: pointer;
    }
    .nation-gate .countries .country:nth-child(2n)    {
        margin:0 0 1.333% 0;
    }
}
@media screen and (min-width:768px) {
    .nation-gate    {
        padding: 40px;
    }
    .nation-gate .countries .country span   {
        font-size: 1em;
        line-height: 1.1em;
    }
    .nation-gate .countries .country    {
        width: 32%;
        padding: 15px;
        margin: 0 1.333% 1.333% 0;
    }
    .nation-gate .countries .country:nth-child(2n)    {
        margin:0 1.333% 1.333% 0;
    }
    .nation-gate .countries .country:nth-child(3n)    {
        margin:0 0 1.333% 0;
    }
}

/*------------------------------------------------
2.13. Subscription confirmation
------------------------------------------------*/

.subscription-confirmation  {

}
.subscription-confirmation  {
    
}

/*------------------------------------------------
3. Animations
------------------------------------------------*/
@keyframes animateTag {
    0%      {top:65px;}
    50%     {top: 60px;}
    100%    {top:65px;}
}

@keyframes animateDesktopTag {
    0%      {top:-13px;}
    50%     {top: -8px;}
    100%    {top:-13px;}
}

@keyframes spinningLoaderAnimation    {
    0%      {margin-bottom:0; height:20px}
    50%     {margin-bottom: 70px; height:25px}
    100%    {margin-bottom:0; height:20px}
}