﻿
.flush-all {
    margin: 0 !important;
    padding: 0 !important;
}

.flush-padding {
    padding: 0 !important;
}

@media screen and (max-width:1024px) {
    .ipad .mobileNavSpacer, .iphone .mobileNavSpacer {
        display: block;
    }

    #mobileNavigation {
        height: auto;
        z-index: 100;
        position: fixed;
        left: 0;
        right: 0;
        color: #fff;
        -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.3);
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.3);
        background: #00a1e0;
        background: -moz-linear-gradient(top,#00a1e0 0,#008bc9 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#00a1e0),color-stop(100%,#008bc9));
        background: -webkit-linear-gradient(top,#00a1e0 0,#008bc9 100%);
        background: -o-linear-gradient(top,#00a1e0 0,#008bc9 100%);
        background: -ms-linear-gradient(top,#00a1e0 0,#008bc9 100%);
        background: linear-gradient(to bottom,#00a1e0 0,#008bc9 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a1e0',endColorstr='#008bc9',GradientType=0);
    }

    #mobileNavigation .block {
        padding: .4em 1em .3em;
    }

    .nav-btn {
        display: block;
        width: 30px;
        height: 30px;
        padding: 0;
        border: 0;
        outline: 0;
        /*background-image: url('/common/assets/images/global-navigation/nav-icons.png');*/
        background-size: 120px;
        /*background-position: -60px 3px;*/
        white-space: nowrap;
        cursor: pointer;
        position: absolute;
        top: .3em;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }

    #nav-open-btn {
        text-indent: -999px;
    }

    #form-open-btn {
        background: 0;
        right: 2em;
        width: 60px;
        height: 23px;
        top: 1.4em;
        font-size: 12px;
        letter-spacing: 0;
    }

        #form-open-btn span {
            padding: 5px 8px;
        }

    .hide-free-trial-btn #form-open-btn {
        display: none;
    }
    .side-content {
        background-color: #FFF;
        z-index: 2;
        position: relative;
    }

    .side-drawer {
        position: fixed;
        top: 0;
        bottom: 0;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        -webkit-transition: width .3s ease;
        -moz-transition: width .3s ease;
        -ms-transition: width .3s ease;
        -o-transition: width .3s ease;
        transition: width .3s ease;
    }

    .side-drawers {
        font-family: SalesforceSansLight,Arial,sans-serif !important;
        position: fixed;
        top: 0;
        bottom: 0;
    }

    .side-drawer-left {
        width: 270px;
        left: 0;
        z-index: 1;
    }

    #left-drawer .nav ul * {
        line-height: 1em;
    }

    #left-drawer .nav ul {
        *zoom: 1;
        display: block;
    }

        #left-drawer .nav ul:before, #left-drawer .nav ul:after {
            content: "";
            display: table;
        }

        #left-drawer .nav ul:after {
            clear: both;
        }

    #left-drawer .drawer-heading, #left-drawer .nav li {
        font-size: 1em;
        display: block;
        border-bottom: 1px solid #7a8898;
        position: relative;
    }

        #left-drawer .drawer-heading, #left-drawer .nav li a {
            font-family: SalesforceSansLight,Arial,sans-serif !important;
            color: #FFF;
            padding: .7em;
            border-bottom: 1px solid #1a2530;
            text-align:left !important;
        }

        #left-drawer .drawer-heading, #left-drawer .nav li a, #left-drawer .section-header, #left-drawer .resources-header {
            display: block;
            color: #b1bfc3;
            outline: 0;
            text-align:left !important;
        }

    .nav .home .icon span, .nav .login .icon span {
        box-shadow: 0;
        border-radius: 0;
    }

    .nav .icon, .nav .title {
        display: table-cell;
        vertical-align: middle;
    }

    .nav .title {
        padding-left: 1em;
        font-size: 1.2em;
        letter-spacing: .02em;
    }

    .title span {
        display: block;
        font-size: .8em;
        color: #b7c8cf;
        padding-top: .3em;
    }

    .nav .icon span, .contact-header .icon span {
        width: 30px;
        height: 30px;
        display: block;
        background: url("../Images/Dataprise-Logo-slice.png") no-repeat left center;
        background-size: 30px;

    }

    #left-drawer .nav li.nav-ca-lang, #left-drawer .nav li a.ca-en, #left-drawer .nav li a.ca-fr {
        display: none;
    }

    body.CA #left-drawer .nav li.nav-ca-lang {
        display: block;
    }

    body.CA #left-drawer .nav li a.ca-fr {
        display: block;
    }

    body.fr.CA #left-drawer .nav li a.ca-en {
        display: block;
    }

    body.fr.CA #left-drawer .nav li a.ca-fr {
        display: none;
    }

    body.CA .nav-ca-lang .icon span {
        display: block;
        /*background-image: url('/common/assets/images/cacolor.png');
        background-position: 50%;*/
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .contact-header .icon, .drawer-heading .icon {
        float: right;
        -webkit-transition-duration: .8s;
        -moz-transition-duration: .8s;
        -o-transition-duration: .8s;
        transition-duration: .8s;
        -webkit-transition-property: -webkit-transform;
        -moz-transition-property: -moz-transform;
        -o-transition-property: -o-transform;
        transition-property: transform;
        overflow: hidden;
    }

    .contact-header.active .icon, .drawer-heading.active .icon {
        -webkit-transform: rotate(225deg);
        -moz-transform: rotate(225deg);
        -o-transform: rotate(225deg);
		-ms-transform: rotate(225deg);
		transform: rotate(225deg);
  }

    .contact-header .icon span, .drawer-heading .icon span {
        height: 15px;
        width: 15px;
    }
    .menuContainer {
        background-color: #334454;
        position: absolute;
        left: 0;
        right: 0;
    }

    
    #left-drawer .section-header, #left-drawer .resources-header {
        letter-spacing: 1px;
        background-image: linear-gradient(bottom,#41586d 0,#394d5e 100%);
        background-image: -o-linear-gradient(bottom,#41586d 0,#394d5e 100%);
        background-image: -moz-linear-gradient(bottom,#41586d 0,#394d5e 100%);
        background-image: -webkit-linear-gradient(bottom,#41586d 0,#394d5e 100%);
        background-image: -ms-linear-gradient(bottom,#41586d 0,#394d5e 100%);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#41586d),color-stop(1,#394d5e));
    }

    #left-drawer .section-header {
        padding: 1em;
        border-bottom: 1px solid #18232e;
    }

    .nav .resources-header, .nav .section-header {
        font-family: SalesforceSansLight,Arial,sans-serif !important;
        text-transform: uppercase;
        font-size: 13px;
    }

    .nav .drawer-heading {
        padding: 10px;
        border-bottom: 1px solid #18232e;
        cursor: pointer;
    }

    #left-drawer .section-header, #left-drawer .resources-header {
        font-size: 1em;
        display: block;
        border-bottom: 1px solid #7a8898;
        position: relative;
    }

    #form, #left-drawer .nav {
        font-size: 12px;
        line-height: 12px;
        display: block;
        position: absolute;
        top: 0;
    }

        #form .block, #left-drawer .nav .block {
            position: relative;
            padding: 0;
        }

        #left-drawer .nav li a {
            color: #FFF;
            padding: 1em;
            border-bottom: 1px solid #1a2530;
        }

    #left-drawer .nav, #form {
        height: 100%;
        width: 100%;
        background: #334454;
    }

    #form {
        right: -70%;
    }

    #inner-wrap {
        left: 0;
    }

    .js-nav #inner-wrap {
        left: 70%;
    }


    .left-menu-active #left-drawer, .right-menu-active #right-drawer {
        display: block;
    }

    #right-drawer {
        overflow-x: hidden;
        overflow-y: scroll;
    }    
   }

@media screen and (max-width:1024px) {

    #page, #mobileCallBtn, #mobileNavigation {
        margin: 0;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }
}

#page.left-menu-active, #page.right-menu-active {
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.noMobileNav #mobileNavigation, .noMobileNav .side-drawers {
    display: none;
}

.nav-active.left-menu-active #page, .nav-active.left-menu-active #mobileCallBtn, .nav-active.left-menu-active #mobileNavigation {
    -webkit-transform: translateX(270px);
    -moz-transform: translateX(270px);
    -ms-transform: translateX(270px);
    -o-transform: translateX(270px);
    transform: translateX(270px);
}

.side-drawers {
    display: none;
    visibility: visible;
}

#mobileNavigation {
    display: none;
}

.mobileNavSpacer {
    display: none;
}

@media screen and (max-width:767px) {
    .side-drawers {
        display: block;
    }

    #mobileNavigation {
        display: block;
    }

    #page {
        position: relative;
        background: #FFF;
    }

    .mobileNavSpacer {
        display: block;
    }
}

.noMobileNav #header {
    display: block;
}

.nav-active {
    overflow: hidden;
}

    .nav-active .side-drawers {
        display: block;
    }

.side-drawers > div {
    display: none;
}

.nav-active #page {
    overflow: hidden;
}


.fixfixed #mobileNavigation {
    position: absolute;
}

.iphone #mobileNavigation, .iphone .side-drawers, .iphone .side-drawer {
    position: absolute;
}



#page {
    margin: 0 auto;
}

#content-wrap, .row-wrap {
    min-height: 350px;
    zoom: 1;
}

.row-wrap {
    min-height: 0;
}

.content {
    clear: both;
}

.fullwidth, #content-wrap, .row-wrap {
    max-width: 320px;
    margin: 0 auto;
    min-width: 320px;
}

.full-100pct #content-wrap {
    max-width: 100%;
    min-width: 0;
}




/*=============================================================*/
/*--------------| Custom Hamburger Animation |-----------------*/
/*=============================================================*/
#hamburger
{
	display: block;
	width: 40px;
	height: 38px;
	margin: 0;
	position: relative;
	z-index: 2;
}
#hamburger:before,
#hamburger:after,
#hamburger span
{
	background:#fff;
    content: "";
    display: block;
    height: 6px;
    left: 6.5px;
    position: absolute;
    width: 35.5px;
}
/* Safari only */
#hamburger:before,
#hamburger:after,
#hamburger span:not(:root:root) {
	left:7.5px;
}
#hamburger:before
{
	top: 5px;
}
#hamburger:after
{
	bottom: 5px;
}
#hamburger span
{
	top: 50%;
	margin-top: -3px;
}

/* Hamburger animation */
#hamburger:before,
#hamburger:after,
#hamburger span
{
	-webkit-transition: none 0.5s ease 0.5s;
	-webkit-transition-property: transform, top, bottom, left, opacity;
	-moz-transition: none 0.5s ease 0.5s;
	-moz-transition-property: transform, top, bottom, left, opacity;
    transition: none 0.5s ease 0.5s;
	transition-property: transform, top, bottom, left, opacity;
}
.left-menu-active #hamburger span
{
	left: -50px;
	opacity: 0;
}
.left-menu-active #hamburger:before
{
    -webkit-transform:rotate( 45deg );
    -ms-transform:rotate( 45deg );
	transform: rotate( 45deg );
	top: 16px;
}
.left-menu-active #hamburger:after
{
    -webkit-transform:rotate( -45deg );
    -ms-transform:rotate( -45deg );
	transform: rotate( -45deg );
	bottom: 16px;
}