/* ==================================================================================
//  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
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
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:var(--brand-main-color);
        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:#000066;
    --brand-pale-color:#cfcfff;
    --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: 5px;
}
.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: 5px;
}
.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 .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: 7.7em;
        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: 8em;
        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 0 30px;
}
footer img  {
    max-width:375px;
}
footer ul   {
    width:auto;
    padding:0 0 30px 0;
}
footer ul li    {
    display: inline;
    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: 0px;
        text-align: center;
    }
}
@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;
    }
    .features-grid ul li    {
        width:49% !important;
        margin:0 2% 2% 0 !important;
        background:var(--main-theme-color);
        border-radius:5px;
        border:1px solid var(--brand-border-color);
        padding:20px;
        font-family:'ca_slalombold';
    }
    .features-grid ul li > div  {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .features-grid ul li:nth-child(2n)  {
        margin: 0 0 2% 0 !important;
    }
    .features-grid ul li > div img  {
        width:30px;
        margin:0 0 10px 0;
    }
    .features-grid ul li span   {
        width:100%;
        text-align:center;
        font-size:0.8em;
    }
}
@media only screen and (min-width:768px)    {
    .features-grid ul li    {
        width:19% !important;
        margin:0 1.25% 1.25% 0 !important;
    }
    .features-grid ul li:nth-child(2n)  {
        width:19% !important;
        margin:0 1.25% 1.25% 0 !important;
    }
    .features-grid ul li:nth-child(5n)  {
        margin:0 0 1.25% 0 !important;
    }
}

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

/*------------------------------------------------
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;
    }
}

/*------------------------------------------------
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}
}