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

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: 50px;   /* see footer height */
    min-height: 100%;
}
.wrapper .container {
    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;}
/*   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 2em; text-align: left; margin-bottom: 0; }
ul#page-nav li li a { }

ul#page-nav li .sub-nav { text-align: center;}
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: 36px; 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: 30px;
    margin-top: -2px;
}
/* ------- */

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

#footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height:50px;    /* see wrapper bottom padding */
    line-height:50px;
    width:100%;
    background:#bdbdbd;
}
#footer-nav-ul { list-style: none; display: inline-block; float:left; margin-bottom: 0;}
#footer-nav-ul .footer-nav-item { display: inline-block; padding-right: 2em; margin-bottom: 0}
#footer, #footer a { color: white; }
#footer a:hover { color: #4527A0; }
#footer-cr-note { float: right; }

.row .column:nth-child(2) {
    padding-left: 3em; max-width: 50%;
}

#footer-social { float: left; line-height: 50px; vertical-align: middle; margin-left: 8em;}
#footer-social a { margin-right: 0.25em; left: 50px;}
#footer-social a svg { height: 32px; stroke: #fff; fill: #fff; vertical-align: middle}
#footer-social a:hover svg { stroke: #4527A0; fill: #4527A0; }
#footer-social #fb-link svg { height:28px;}
/*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;}

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

.screen-img-wrap { clear: both; margin-top: 1em; }
.screen-img-wrap .screen-img:first-child { padding-right: 40px;}
.screen-img-wrap .screen-img { vertical-align: top; }

.lightbox { cursor: pointer}

/*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-screenshots { background-color: #E0E0E0; padding: 1em 0; margin-bottom: -2em;}

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

#home-screen-img-1, #home-screen-img-2 { margin-right: 50px;}
#home-screenshots { text-align: center}

/*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; margin-right: 40px;}

.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 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;}

/* 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 {
    /*text-align: center;*/
}
#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-form.left-col { padding-right: 2em;}

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

/* QUICKTEST */
#quicktest-result-preview {
    font-family: "PreviewFont", "adobe_notdefregular";
    border: 1px solid #ccc;
    padding: 10px;
    color: #000;
    outline:0;
    clear: both;
    text-align: center;
    font-kerning: normal;
    font-variant-ligatures: contextual common-ligatures;
    -moz-font-feature-settings: "kern", "calt", "liga";
    -ms-font-feature-settings: "kern", "calt", "liga";
    -webkit-font-feature-settings: "kern", "calt", "liga";
    font-feature-settings: "kern", "calt", "liga";

}
#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; }

#quick-test-result-realthing { background-color: #eee; margin-bottom: -2em;}
#quicktest-result-preview-hint { color: #888; padding-top: 4px; font-size: 90%}

#quick-test-result h3 { margin-bottom: 0.5em;}

#quicktest-share-wrap { float: right;}
#quicktest-share-button-wrap a.button { padding: 0; margin-left: 0.25em; height: 34px; width:34px; line-height: 34px}
#quicktest-share-button-wrap a.button:first-child { margin-left:0; }
#quicktest-share-button-wrap a svg { height: 30px; stroke: white; fill: white;}
#quicktest-share-hint { color: #888; font-size: 90%; margin-top: -0.75em; margin-bottom: 0.5em;}
#quicktest-share-min-char-count-hint, #quicktest-share-error-hint { visibility: hidden;}

#quick-test-polling-content { text-align: center}



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