﻿/*----------------------------------------------------------
dark blue:       #002640
trial blue:      #232f3d
orange:          #FFA622
trial orange:    #ff9900
green (in logo): #00B050
blue (in logo):  #0079D3
menu highlight : #47779d;
----------------------------------------------------------*/

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

body
{
    margin-bottom: 80px;
    font-family: Poppins;
    background-color: #e6e6e6 !important;
}

body.x-dialog-in-iframe
{
    margin: 0;
    font-size: 100%;
}

textarea
{
    resize: none !important;
}

.light { font-weight:100 !important; }
.normal { font-weight:normal !important; }
.italic { font-style:italic !important; }
.bold { font-weight:bold !important; }
.larger { font-size: 1.2em !important; }
.smaller { font-size: .9em !important; }

.top { vertical-align:top !important;}
.left { text-align:left !important; }
.right { text-align:right !important; }
.center { text-align:center !important; }
.middle { vertical-align:middle !important; }
.bottom { vertical-align:bottom !important; }

.block { display:block !important; }
.inlineBlock { display:inline-block !important; }
.inline { display:inline !important; }
.relative { position:relative !important; }
.absolute { position:absolute; }
.wide { width:100%; }
.nowrap { white-space:nowrap; }
.transparent { background: transparent; }

.shadow 
{ 
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; 
}
.shadow-inset
{
    box-shadow: rgba(50, 50, 93, 1.0) 0px 30px 90px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

/* #region Navbar styles */
.navbar
{
    position: absolute;
    right: 0;
}
.navbar-header
{
    border-bottom: 1px solid rgba(255,255,255, 0.1);
}
/* #endregion */


/* #region Footer styles */
.footer
{
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 0.85em;
}
/* #endregion */

/* #region custom Kendo UI styles */
#configure
{
    /*display: none;*/
}

.k-panelbar .k-content
{
    padding: 20px;
}

p .k-button
{
    margin: 0 15px 0 0;
}

.k-state-active .label
{
    font-size: 1em;
}

/* #endregion */

/* #region page heading sections */
.heading-background
{
    height: 350px;
    position: relative;
    padding-left: 2%;
    background-size: cover;
    overflow: hidden;
}
.heading-background.home
{
    background-image: url(/Images/Home_banner.jpg);
    background-position-y: 18%;
}

.heading-background.benefits
{
    background-image: url(/Images/Benefits_banner.jpg);
    background-position-y: 54%;
}
.heading-background.features
{
    background-image: url(/Images/Features_banner.jpg);
    background-position-y: 37%;
}
.heading-background.pricing
{
    background-image: url(/Images/Pricing_banner.jpg);
    background-position-y: 57%;
}
.heading-background.subscribe
{
    background-image: url(/Images/Subscribe_banner.jpg);
    background-position-y: 21%;
}
.heading-background.about
{
    background-image: url(/Images/About_banner.jpg);
    background-position-y: 29%;
}
.heading-background .logo
{
    width: 44%;
    position: relative;
    top: 5%;
}
.heading-background .logo-only
{
    width: 26%;
    padding: 2px;
    position: relative;
    top: 5%;
}
.heading-background .tagline
{
    color: #fff;
    font-family: Poppins;
    font-style: italic;
    font-weight: 400;
    font-size: 2.5em;
    text-shadow: 0px 0px 4px rgba(0,0,0,0.6);
    padding-top: 5%;
}

.heading-background .buttons
{
    position: absolute;
    bottom: 6%;
}
.heading-background .buttons .k-button
{
    margin-right: .5em;
}

.k-button.demo, .k-button.subscribe
{
    color: #002640;
    font-size: 1.1em;
    font-weight: 500;
    padding: .3em 2em .3em;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.k-button.demo:hover, .k-button.subscribe:hover
{
    color: #fff;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    text-shadow: 0px 0px 3px rgba(0,0,0,1.0);
}
.k-button.demo
{
    background-color: #FFA622;
    border-color: #FFA622;
}

.k-button.subscribe
{
    background-color: #92d050;
    border-color: #92d050;
}

.heading-background .contact-info
{
    color: #fff;
    position: absolute;
    right: 1.3%;
    bottom: 1%;
}
.heading-background .contact-info a
{
    color: #fff;
}
.footer .contact-info
{
    font-size: 1.1em;
    padding-bottom: .2em;
    display: none;
}
/* #endregion */

/* #region content sections */
.content > div
{
    border-color: #c6c6c6;
    border-style: solid;
}
.content .intro
{
    background-color: #e2e0d6;
    border-width: 1px;
    padding: 1.5% 5% 1%;
}
.content .intro.home
{
    font-weight: 500;
    font-size: 1.05em;
}
.content .body
{
    background-color: #fff;
    border-width: 0 1px 1px 1px;
    padding: 1% 4%;
}
.content .body h3, h4, h5
{
    color: #fba422;
    color: #ff9900;
}

.content .body .panel
{
    padding: 1% 2% 1% 2%;
    background-color: #f7f7f3;
    margin-bottom: 4%;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}
.content .body .panel.naked
{
    background-color: transparent;
    box-shadow: none;
}
.content .body .panel.tight
{
    margin-bottom: 2%;
}
.content .body .panel.tighter
{
    margin-bottom: 1%;
}
.content .body .panel.full-width
{
    padding-left: 0;
    padding-right: 0;
}

.content .body .panel .heading 
{
    /*margin-bottom: 0.5rem;*/
}
.content .body .panel .heading .icon
{
    text-align: center;
    vertical-align: top;
    font-size: 2.5em;
    padding-right: 1rem;
    color: #002640;
}
.content .body .panel .heading .title
{
    vertical-align: middle;
    font-size: 1.9em;
    color: #ff9900;
}
.content .body .panel .heading .title.sub
{
    font-size: 1.5em;
    color: #002640;
    padding-bottom: 0;
}

.content .body .list
{
    padding-left: 1.2rem;
}
.content .body .list li:not(:last-child)
{
    padding-bottom: .9em;
}

.home.content .body
{
    padding-top: 2em;
}
.home.content .body .row
{
    padding-bottom: 1.5em;
}
.home.content .work-anywhere
{
    background-image: url(/Images/Home_inset_1.jpg);
    background-size: cover;
    background-position: 50% 50%;
    color: #fff;
    padding: 10em 4em;
}

/*.benefits.content .time
{
    background-image: url(/Images/time.jpg);
    background-size: cover;
    background-position: 50% 50%;
}*/

.features.content .inset-1
{
    background-color: #002640;
    color: #fff;
    padding: 1em 3em 2em;
}

.features.content .inset-2, .features.content .inset-3, .features.content .inset-4
{
    margin-bottom: 3%;
}
.features.content .inset-2 img, .features.content .inset-3 img, .features.content .inset-4 img
{
    width: 100%;
}
.features.content .inset-4 img
{
    border-bottom: solid 1px #c6c6c6;
}

.pricing.content .inset-1
{
    background-image: url(/Images/Pricing_inset_1.jpg);
    background-size: cover;
    background-position: 50% 87%;
    width: 100%;
    height: 100%;
}

.about.content .policy
{
    vertical-align: middle;
    text-align: right;
    padding: 0;
    width: 100%;
}
.about.content .policy a
{
    color: #002640;
}

/* #endregion */

.jumplist a
{
    color: #002640;
}
.jumplist h5
{
    padding-bottom: .5em;
}
.jumplist a > i
{
    width: 2em;
    text-align: center;
}

/* #region media button */
.media-button > div
{
    white-space: nowrap;
    font-size: .95em;
    text-align: center;
}
.media-button > .k-button
{
    position: relative;
    color: #fff;
    background-image: url(/Images/promo_thumbnail.jpg);
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 0;
    border-style: none;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.media-button > .k-button:hover
{
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.media-button > .k-button div:first-child
{
    font-size: 1.5em;
    padding: 1.2em 2.5em;
}
.media-button > .k-button:hover div:first-child
{
    color: #FFA622;
}
.media-button > .k-button div:last-child
{
    font-size: .7em;
    position: absolute;
    padding: .1em .3em;
    right: 4px;
    bottom: 4px;
    background-color: #000;
}
/* #endregion */

/*******************/
/* contact section */
/*******************/

.contact
{
    padding: 6% !important;
}

.contact table
{
    padding-left: 0;
}

.contact table td
{
    padding: 0 10px 10px 0;
    vertical-align: top;
}

/*******************/
/* MENU MANAGEMENT */
/*******************/

#Menu
{
    background: transparent; 
    border: none;
}
#Menu .k-menu-item
{
    border: none;
    text-shadow: 0px 0px 3px rgba(0,0,0,1.0);
    font-weight: bold;
}
#Menu .k-menu-item .k-link
{
    padding: .3em 1.0em .3em;
    color: #e6e6e6;
    border-style: none;
}
#Menu .k-menu-item.k-state-highlight
{
    background: transparent;
    border: none;
}
#Menu .k-menu-item.k-state-highlight .k-link
{
    color: #FFA622;
}
#Menu .k-menu-item.k-hover:not(.k-state-highlight),
#Menu .k-menu-item:hover:not(.k-state-highlight)
{
    background: none;
    background-image: none;
}
#Menu .k-menu-item.k-hover:not(.k-state-highlight) .k-link,
#Menu .k-menu-item:hover:not(.k-state-highlight) .k-link
{
    background: rgba(0, 0, 0, 0.24) !important;
    color: #FFF;
    border: none;
}

/************************************/
/* KENDO DIALOG and FORM            */
/************************************/

#demoDialog
{
    overflow: hidden;
}
#ProductInterestCode-form-label
{
    display: none;
}
#demoRequestPortal
{
    margin: 0;
    padding: 0;
    border: none;
    width: 100%;
    height: 100%;
}
.demo-section > div:first-child
{
    padding-bottom: 0.5em;
    font-size: 0.9em;
}
.k-form-fieldset
{
    margin: 0 0 24px;
}
.k-form-layout
{
    padding: 0 4px;
}
.k-form-legend
{
    margin-bottom: 8px;
    font-weight: bold;
}
.k-form-label
{
    margin: 0 0 !important;
    font-size: .9em;
}
.k-form-field
{
    margin-bottom: 0;
}

/*.wrap-element
{
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

.wrapped-iframe
{
    position: absolute;
    top: 2%;
    bottom: 2%;
    left: 2%; right: 2%;
    width: 100%;
    height: 100%;
    border: 0;
}*/
/************************************/
/* SCREEN SIZE SPECIFIC ADJUSTMENTS */
/************************************/
/* Extra Large (xl) */
@media only screen and (min-width: 1200px)
{
}

/* Large (lg) */
@media only screen and (max-width: 1199px) and (min-width: 992px)
{
    .heading-background
    {
        height: 293px;
    }
    .heading-background .logo
    {
        width: 35%;
    }
    .heading-background .tagline
    {
        font-size: 2.0em;
    }
}

/* Medium (md) */
@media only screen and (max-width: 991px) and (min-width: 768px)
{
    body
    {
        font-size: 0.8em;
    }
    body.x-dialog-in-iframe
    {
        font-size: 100%;
    }
    h1
    {
        font-size: 2.0rem !important;
    }
    h5
    {
        font-size: 1.1rem !important;
    }
    .heading-background
    {
        height: 217px;
    }
    .heading-background .logo
    {
        width: 29%;
    }
    .heading-background .tagline
    {
        font-size: 2.0rem;
    }
    .intro
    {
        padding: 2% 5% 1% !important;
    }
    .contact
    {
        padding: 4% !important;
    }
}

/* Small (sm) */
@media only screen and (max-width: 767px) and (min-width: 576px)
{
    body
    {
        font-size: 0.75em;
    }
    body.x-dialog-in-iframe
    {
        font-size: 100%;
    }
    h1
    {
        font-size: 1.6rem !important;
    }
    h5
    {
        font-size: 1.1rem !important;
    }
    .heading-background
    {
        height: 160px;
    }
    .heading-background .logo
    {
        width: 35%;
        top: 22%;
    }
    .heading-background .tagline
    {
        font-size: 1.8em;
        padding-top: 7%;
    }
    .heading-background .logo-only
    {
        width: 35%;
        top: 22%;
    }
    #Menu .k-menu-item
    {
        float: none;
        text-align: right;
    }
    #Menu .k-menu-item .k-link
    {
        padding: .4em 1em;
    }
    .heading-background .contact-info
    {
        display: none;
    }
    .footer .contact-info
    {
        display: block;
    }
    .intro
    {
        padding: 2% 5% 1% !important;
    }
    .contact
    {
        padding: 4% !important;
    }
}

/* Extra Small (xs) */
@media only screen and (max-width: 575px)
{
    body
    {
        font-size: 0.70em;
    }
    body.x-dialog-in-iframe
    {
        font-size: 70%;
    }
    h1
    {
        font-size: 1.6rem !important;
    }
    h5
    {
        font-size: 1.0rem !important;
    }
    .heading-background
    {
        height: 160px;
    }
    .heading-background .logo
    {
        width: 35%;
        top: 22%;
    }
    .heading-background .tagline
    {
        font-size: 1.8em;
        padding-top: 7%;
        padding-right: 22%;
    }
    .heading-background .logo-only
    {
        width: 36%;
        top: 22%;
    }
    #Menu .k-menu-item
    {
        float: none;
        text-align: right;
    }
    #Menu .k-menu-item .k-link
    {
        padding: .45em 1em;
    }
    .heading-background .contact-info
    {
        display: none;
    }
    .footer .contact-info
    {
        display: block;
    }
    .intro
    {
        padding: 2% 5% 1% !important;
    }
    .contact
    {
        padding: 4% !important;
    }
}
