html { height:100%; }
body { min-height:100%; position: relative; min-width: 300px;}

a { cursor: pointer}

input, button {font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; }

h2, h3, h4 {font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-weight: 300; letter-spacing: 0.0125em}

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

#content a:not(.button) { text-decoration: underline; }


.hidden { display: none}

.error, ul.errorlist { color:  #FF1744;}


.wrapper {
    padding-top: 30px;
    letter-spacing: 0.025em;
    padding-bottom: 9em;   /* set #footer height accordingly */
    min-height: 100%;

}
.wrapper .container {
    max-width: 1020px;

}

section {
    display: block;
}

img#site-logo { height: 52px; vertical-align: top;}

table.no-style, table.no-style tr, table.no-style td { margin:0; border:0; padding:0; vertical-align: top;}

.border-light { border: 1px solid #ddd;}

.alternate-backg-wrap:nth-child(even) { background-color: #eee;}

.jslghtbx { z-index: 9}


/*   Navigation   */
/*LAYOUT*/
.navigation {
    display: block;
    height: 50px;
    max-width: 100%;
    width: 100%;
    z-index: 1;
}

.navigation ul.navigation-list {
    list-style: none;
    margin: 0;
    display: inline-block;
}

.navigation .container {
    padding-bottom: 0;
    padding-top: 0;
    position: inherit;
}

ul#page-nav { }
ul#page-nav ul
{
    display:none;
    position:absolute;
    top: 86px;
    width:100%;
    left:0;
    background:#fff;
    margin:0;
    padding: 0;
    padding-top: 1.25em;
    padding-bottom: 1.5em;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    z-index: 9;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.sub-nav-marker {width: 16px; height: 16px; border-top: 1px solid #ddd; position: absolute; top: -9px;
    border-left: 1px solid #ddd; transform: translateX(-17px) rotate(45deg); z-index: 10; background: white; left: 50%; }

ul#page-nav li:hover > ul
{
    display:block;
    opacity: 0.96;

}

ul#page-nav li li { list-style: none; display: inline-block; padding: 0.5em 0; text-align: left; margin-bottom: 0;
    width: 360px;}
ul#page-nav li li a { }

ul#page-nav li .sub-nav { text-align: center;}
ul#page-nav li .sub-nav #sub-nav-inner-wrap { text-align: left; max-width: 750px; margin: 0 auto;}
ul#page-nav li .sub-nav .sub-nav-desc { font-size: 0.8em; }
.nav-item.nav-has-children:hover .sub-nav { display: block; position: relative}

.navigation li.nav-item  { display: inline-block; margin-top: 21px; padding-left: 30px; height: 35px; }
.navigation .nav-item a { color: #757575; font-size: 17px;}
.navigation .nav-item a:hover { color: #4527A0; }

ul#profile-nav { float: right; margin-bottom:0; margin-top:11px;}
ul#profile-nav li { list-style: none; display: inline-block}

.nav-chevron-down::before {
    border-style: solid;
    border-width: 2px 2px 0 0;
    content: '';
    display: inline-block;
    height: 9px;
    left: 5px;
    position: relative;
    transform: rotate(135deg);
    vertical-align: top;
    width: 9px;
    margin-top: 6px;
}


#profile-button-icon img {
    height: 42px;
    vertical-align: middle;
    padding-right: 12px;
    margin-top: -2px;
}
/* ------- */

#content { margin-top: 4em; margin-bottom: 1em; min-height: 14em;}


/*GENERAL*/

h1 { font-size: 36px; color: #4527A0; }
h2 { font-size: 28px; color: #4527A0; }
h3 { font-size: 22px; color: #4527A0; margin-bottom: 1em; }
h4 { font-size: 20px; color: #4527A0; margin-bottom: 0em; }

.button, button, input[type='button'], input[type='reset'], input[type='submit'] { line-height: 38px;}
.button-large {
    height: 4.5rem;
    line-height: 44px; }

input[type=text], input[type=password], input[type=email] { width: 400px; max-width: 100%}

form input[type=submit] { margin-top: 1.5rem}

form p { margin-bottom:0;}

ul.errorlist { list-style: none;}

#profile-button { text-transform: none;}

.messages { padding-top: 1em; margin-bottom: 1em; background-color: rgba(100,255,218,0.5);}
.messages-item {padding-bottom: 1em; }

section.alternate-color:nth-child(even) {
    background-color: #eee;

}
section.alternate-color {
    padding: 1em 0;
}
section.more-padding {
    padding: 2em 0;
}

.lightbox { cursor: pointer}


/* FOOTER */
#footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height:9em;    /* set .wrapper bottom padding accordingly */
    width:100%;
    background:#aaa;
    padding-top: 2em;

}

.footer-nav-item { display: block; margin-bottom: 0; text-align: left;}
#footer, #footer a, #footer h5, #footer button.lang-select-button { font-size: 14px; margin-bottom: 0; line-height: 22px; }

#footer h5 { color: #4527A0;}
#footer a, button.lang-select-button { color: #eee; }
#footer a:hover, button.lang-select-button:hover { color: rgb(100,255,218); }


#footer #footer-logo { width: 75%}
#footer-table, #footer-table ul, #footer-table form{ margin: 0;}
#footer-table td { width: 20%}

/*Language Menu */
#footer #nav-lang { float: right; width: 300px; text-align: right}
#footer button.lang-select-button { border: 0; font-size: inherit; text-transform: capitalize; background: inherit;
    padding: 0; margin: 0; height: auto; float: left; width: 85px; background-color: transparent;}
#footer #nav-lang form, #nav-lang button { margin: 0}
#footer #nav-lang .footer-nav-item { width: 100px; }
/*#footer-cr-note { clear: both; }*/

/*HOME*/
#call-for-action { margin-top: 2em; margin-bottom: 3em;}
.no-required-hint { font-size: 13px; color: #757575}

.call-for-action-button-wrap { display: inline-block; margin:0; }
.call-for-action-button-wrap a { margin-bottom: 2px; }

#call-for-action-quick-button { padding: 0 3em;}

#home-slogan, #call-for-action, #home-visual { text-align: center;}
#home-visual { margin-top: -1em; margin-bottom: 3em;     background-color: #fafafa;}
#home-visual img { max-width: 1050px; width: 100%; }

.home-screen-img { margin-right: 3% ; width: 22%; margin-bottom: 1em; height: auto}
.home-screen-img:last-of-type { margin-right: 0;}
#home-screenshots { text-align: center}

.screen-img-wrap { clear: both; margin-top: 1em; }
/* .screen-img-wrap .screen-img:first-child { padding-right: 40px;} */
/*.screen-img-wrap { padding-right: 40px;}*/
.screen-img-wrap .screen-img { vertical-align: top; margin-right: 20px; margin-bottom: 20px; height: auto; }


/*REGISTARTION FORM*/
#registration-form span.helptext { display: none }

/*FEATURES*/
.feature-wrap {padding: 1em 0;}
.feature-wrap:nth-child(even) { background-color: #eee;}
.feature-wrap h3 { color: #444; font-size: 24px;}


.feature-wrap .right-col {
    max-width: 45%;
    padding: 1em 0 1em 8em;
    align-items: center;
    display: flex;
}

.feature-modify-img, .feature-liga-img, .feature-random-img { height: 50px;}
.features-custom-template-img { height: 200px; ; background-color: white; }
.features-custom-template-img:first-child {  margin-right: 34px;}

.feature-modify-text, .feature-ligature-text { text-align: right;}
.feature-modify-img { height: 38px;}

#features-modify-rightcol , #features-ligature-rightcol { padding-top: 10px;}

#features-ligature-rightcol table, #features-ligature-rightcol td { margin:0; padding:0; border: 0;}
#features-ligature-table-space-td { width: 56px;}

    /*PRICING*/
#pricing-table td { vertical-align: top;}
#pricing-table tr td:first-child { font-weight: 700;}

.pricing-hint { color: #666; font-size: 80%; font-weight: normal}
/*LOGIN FORM*/

#login-form form p { margin-bottom: 0}


/* REGISTRATION */
#agree-tos-wrap { margin-bottom:1em; margin-top: 1em;}
#registration-form p {margin-bottom: 1em;}

/*CONTACT FORM*/

#contact-form-table {
    width: 800px;
}
#contact-form-table td {
    border-bottom: none;
    vertical-align: top;
}
#contact-form textarea { height: 200px; width: 800px; max-width: 100%}

/* FAQ */
section#faq a h3 { margin-bottom: 0.75em;}
section#faq a  { text-decoration: none !important;}
section#faq a:hover h3 { text-decoration: underline !important;}
.page-top-link { float: right; }
.faq-item { padding:1em 1em 1em 1em; margin-left:-1em; border-radius: 0.5em;}
.faq-item p:last-of-type { margin-bottom: 0}
.faq-item:target { animation: highlight-animation 4s; }
/*@keyframes highlight-animation { from { background: rgb(100,255,218); } to { background: rgb(255,255,255); }  }*/
@keyframes highlight-animation
{
    0%   {background: white;}
    10%   {background: white;}
    50%  {background: rgb(100,255,218);}
    60%  {background: rgb(100,255,218);}
    100%  {background: white;}
}


/*UPGRADE*/

#upgrade-checkout-button-wrap button.stripe-button-el,
#upgrade-checkout-button-wrap button.stripe-button-el span{
    background-image: none;
    background-color: #673AB7;
    text-shadow: none;
    box-shadow: none;
    padding: 0 1em;
    font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-size: 16px;
    font-weight: 400;
    height: 3.8rem;
    line-height: 38px;
}

#upgrade-period-table { width: auto; border: 0; margin:0; margin-bottom: 2em;}
#upgrade-period-table tr { border: 0; margin: 0;}
#upgrade-period-table td { text-align: center;  border: 0; border-radius: 3px; }
.upgrade-period-table-duration { font-size: 22px; font-weight: 700; color: #673AB7; margin-bottom: 4px;}

#upgrade-period-table td.period-selection-content-td { border: 1px solid #DDD; min-width: 140px; padding: 1.5em; cursor: pointer}
#upgrade-period-table td.checked-period { border-color: #673AB7;}
.upgrade-period-table-cost { font-size: 30px; line-height:30px; margin-bottom: 6px; }
.upgrade-period-table-cost .upgrade-period-table-currency{ font-size: 18px; vertical-align: text-top; margin-left:-10px; }
.upgrade-period-table-discount {margin-bottom: 15px; font-size: 14px;}
.upgrade-period-table-radio-button { margin:0;  width: 28px; height: 28px;} /* transform: scale(2); */
.period-selection-spacer { width: 2.5em;}

table#payment-icons { width: 260px;}
table#payment-icons td { padding-left: 2px;}

form#stripe-form { margin-bottom: 0 !important}
#receipt-address-data { max-width: 600px; height: 140px;}

/*PAGE OVERLAY*/
#page-overlay { opacity: 0.6; visibility: visible; transition: all 0.3s; position: fixed; width: 100%;
    height: 100%; top: 0; left: 0; z-index: 9; background-color: #444; }

#page-overlay-content { background-color: white; position: fixed; top: 50%; left: 50%; width: 800px;
    height: auto; z-index: 10; transform: translateX(-50%) translateY(-50%); max-height: 90%; overflow-x: hidden;
}

/*SHARING OVERLAY*/
#sharing-overlay-wrap { padding: 2em; text-align: center; }
/* REDIRECT MESSAGE */
#redirect-message-old-logo { height: 3em; max-width: 380px; vertical-align: middle; padding-right: 0.25em;}

.redirect-message-section { padding: 0 3.5em ; position: relative; }
.redirect-message-section-feature { height: 4.5em;}
.redirect-message-section-feature:nth-child(even) { background-color: #eee;}

.redirect-message-section-feature img { height: 3em; }

.redirect-message-section-feature img, .redirect-message-section-feature-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.redirect-message-section-feature-text { left: 8em; right: 3em;  }
.redirect-message-section-button { background-color: white !important; height: 3em; line-height: 3em; padding-top: 2.5em;
    padding-bottom: 6em;}

.redirect-message-section-top {padding-top: 3em; padding-bottom: 1em;}

/*Tutorial*/
.tut-number { font-weight: bold; font-size: 1.75rem; margin-left: -34px; display: inline-block; width: 30px; text-align: right}

/*Presskit*/
.presskit-image-wrap { margin-bottom: 4em;}
.presskit-image-wrap img { display: block}


/*FEATURELIST*/
.featurelist-short-item { display: table; margin-bottom: 0.75em; width: 100%}
.featurelist-short-item-icon img { height: 3.5em; }
.featurelist-short-item-text { display: table-cell; text-align: left; vertical-align: middle; padding-bottom: 5px; }
.featurelist-short-item-icon { width: 4.5em; display: table-cell; text-align: left; vertical-align: middle;}

#font-size-slider-wrap { display: table-cell; vertical-align: middle; height: 32px; float: right;
    margin-top: -1.5em;}
#font-size-slider-wrap label, #font-size-slider-wrap input { display: inline; vertical-align: middle;  }
#font-size-slider-wrap input { margin-bottom: 0; width: 300px; margin-left: 1em; }


/* tabs */
ul.tabs {
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
ul.tabs  li a{
    display: block;
    outline: none;
    text-decoration: none;
}
.tab-content {
    display: none;
}
.tab-content-active{
    display: block !important;
}


.shadowed { box-shadow: 0px 1px 5px 1px rgba(0,0,0,.15) }

/*SPINNER*/
.spinner {
    -webkit-animation: rotator 1.4s linear infinite;
    animation: rotator 1.4s linear infinite;
}

@-webkit-keyframes rotator {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}

@keyframes rotator {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}
.path {
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    -webkit-transform-origin: center;
    transform-origin: center;
    stroke: #673AB7;
    -webkit-animation: dash 1.4s infinite;
    animation: dash 1.4s infinite;
}

@-webkit-keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }
    50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }
    50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
    }
}

#login-form ul.errorlist  p {color: black; margin-bottom: 1em;}
#login-form h2 { font-size: 1.4em;}