.clearfix:before,.clearfix:after{content:' ';display:table}.clearfix:after{clear:both}.hide,.hidden{display:none}@media only screen and (max-width: 768px){.tablet--hide{display:none !important}}@media only screen and (min-width: 769px){.tablet--show{display:none !important}}@-webkit-keyframes float{0%{-webkit-transform:translate3d(0, -9px, 0)}100%{-webkit-transform:translate3d(0, 9px, 0)}}@-moz-keyframes float{0%{-moz-transform:translateY(-9px)}100%{-moz-transform:translateY(9px)}}@-o-keyframes float{0%{-o-transform:translateY(-9px)}100%{-o-transform:translateY(9px)}}@-ms-keyframes float{0%{-ms-transform:translateY(-9px)}100%{-ms-transform:translateY(9px)}}@keyframes float{0%{transform:translateY(-9px)}100%{transform:translateY(9px)}}@-webkit-keyframes inverse-float{0%{-webkit-transform:translate3d(0, 9px, 0)}100%{-webkit-transform:translate3d(0, -9px, 0)}}@-moz-keyframes inverse-float{0%{-moz-transform:translateY(9px)}100%{-moz-transform:translateY(-9px)}}@-o-keyframes inverse-float{0%{-o-transform:translateY(9px)}100%{-o-transform:translateY(-9px)}}@-ms-keyframes inverse-float{0%{-ms-transform:translateY(9px)}100%{-ms-transform:translateY(-9px)}}@keyframes inverse-float{0%{transform:translateY(9px)}100%{transform:translateY(-9px)}}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}body{line-height:1;color:black;background:white}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0}caption,th,td{text-align:left;font-weight:normal}blockquote:before,blockquote:after,q:before,q:after{content:''}blockquote,q{quotes:"" ""}input::-moz-focus-inner{border:0}body,body input,body button,body td{font-family:arial, sans-serif;font-size:13px;-webkit-tap-highlight-color:transparent}iframe{border:0}strong,b{color:#000;font-weight:bold}em{font-style:italic}div.mobile{width:320px}/*!
 * Bootstrap v2.2.2
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */



.clearfix {
    *zoom: 1
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
    line-height: 0
}
.clearfix:after {
    clear: both
}
.hide-text {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0
}
.input-block-level {
    display: block;
    width: 100%;
    min-height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000000
}
.modal-backdrop.fade {
    opacity: 0
}
.modal-backdrop,
.modal-backdrop.fade.in {
    opacity: 0.8;
    filter: alpha(opacity=80)
}
.modal {
    position: fixed;
    top: 10%;
    left: 50%;
    z-index: 1050;
    width: 560px;
    margin-left: -280px;
    background-color: #ffffff;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, 0.3);
    *border: 1px solid #999;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    outline: none
}
.modal.fade {
    -webkit-transition: opacity .3s linear, top .3s ease-out;
    -moz-transition: opacity .3s linear, top .3s ease-out;
    -o-transition: opacity .3s linear, top .3s ease-out;
    transition: opacity .3s linear, top .3s ease-out;
    top: -25%
}
.modal.fade.in {
    top: 10%
}
.modal-header {
    padding: 9px 15px;
    border-bottom: 1px solid #eee
}
.modal-header .close {
    margin-top: 2px
}
.modal-header h3 {
    margin: 0;
    line-height: 30px
}
.modal-body {
    position: relative;
    overflow-y: auto;
    max-height: 400px;
    padding: 15px
}
.modal-form {
    margin-bottom: 0
}
.modal-footer {
    padding: 14px 15px 15px;
    margin-bottom: 0;
    text-align: right;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
    -webkit-box-shadow: inset 0 1px 0 #ffffff;
    -moz-box-shadow: inset 0 1px 0 #ffffff;
    box-shadow: inset 0 1px 0 #ffffff;
    *zoom: 1
}
.modal-footer:before,
.modal-footer:after {
    display: table;
    content: "";
    line-height: 0
}
.modal-footer:after {
    clear: both
}
.modal-footer .btn+.btn {
    margin-left: 5px;
    margin-bottom: 0
}
.modal-footer .btn-group .btn+.btn {
    margin-left: -1px
}
.modal-footer .btn-block+.btn-block {
    margin-left: 0
}
.carousel {
    position: relative;
    margin-bottom: 20px;
    line-height: 1
}
.carousel-inner {
    overflow: hidden;
    width: 100%;
    position: relative
}
.carousel-inner>.item {
    display: none;
    position: relative;
    -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
    -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left
}
.carousel-inner>.item>img {
    display: block;
    line-height: 1
}
.carousel-inner>.active,
.carousel-inner>.next,
.carousel-inner>.prev {
    display: block
}
.carousel-inner>.active {
    left: 0
}
.carousel-inner>.next,
.carousel-inner>.prev {
    position: absolute;
    top: 0;
    width: 100%
}
.carousel-inner>.next {
    left: 100%
}
.carousel-inner>.prev {
    left: -100%
}
.carousel-inner>.next.left,
.carousel-inner>.prev.right {
    left: 0
}
.carousel-inner>.active.left {
    left: -100%
}
.carousel-inner>.active.right {
    left: 100%
}
.carousel-control {
    position: absolute;
    top: 40%;
    left: 15px;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    font-size: 60px;
    font-weight: 100;
    line-height: 30px;
    color: #ffffff;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center center;
    border: 3px solid #ffffff;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
    filter: alpha(opacity=50)
}
.carousel-control.right {
    left: auto;
    right: 15px
}
.carousel-control:hover {
    color: #ffffff;
    text-decoration: none
}
.carousel-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px;
    background: #333333;
    background: rgba(0, 0, 0, 0.75)
}
.carousel-caption h4,
.carousel-caption p {
    color: #ffffff;
    line-height: 20px
}
.carousel-caption h4 {
    margin: 0 0 5px
}
.carousel-caption p {
    margin-bottom: 0
}
.fade {
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    -moz-transition: opacity 0.15s linear;
    -o-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear
}
.fade.in {
    opacity: 1
}
.collapse {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height 0.35s ease;
    -moz-transition: height 0.35s ease;
    -o-transition: height 0.35s ease;
    transition: height 0.35s ease
}
.collapse.in {
    height: auto
}
.tooltip {
    position: absolute;
    z-index: 1030;
    display: block;
    visibility: visible;
    font-size: 11px;
    line-height: 1.4;
    opacity: 0;
    filter: alpha(opacity=0)
}
.tooltip.in {
    opacity: 0.8;
    filter: alpha(opacity=80)
}
.tooltip.top {
    margin-top: -3px;
    padding: 5px 0
}
.tooltip.right {
    margin-left: 3px;
    padding: 0 5px
}
.tooltip.bottom {
    margin-top: 3px;
    padding: 5px 0
}
.tooltip.left {
    margin-left: -3px;
    padding: 0 5px
}
.tooltip-inner {
    max-width: 200px;
    padding: 8px;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    background-color: #000000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px
}
.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid
}
.tooltip.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000000
}
.tooltip.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #000000
}
.tooltip.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: #000000
}
.tooltip.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000000
}
.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1010;
    display: none;
    max-width: 276px;
    padding: 1px;
    text-align: left;
    background-color: #ffffff;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    white-space: normal
}
.popover.top {
    margin-top: -10px
}
.popover.right {
    margin-left: 10px
}
.popover.bottom {
    margin-top: 10px
}
.popover.left {
    margin-left: -10px
}
.popover-title {
    margin: 0;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: normal;
    line-height: 18px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0
}
.popover-title:empty {
    display: none
}
.popover-content {
    padding: 9px 14px
}
.popover .arrow,
.popover .arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid
}
.popover .arrow {
    border-width: 11px
}
.popover .arrow:after {
    border-width: 10px;
    content: ""
}
.popover.top .arrow {
    left: 50%;
    margin-left: -11px;
    border-bottom-width: 0;
    border-top-color: #999;
    border-top-color: rgba(0, 0, 0, 0.25);
    bottom: -11px
}
.popover.top .arrow:after {
    bottom: 1px;
    margin-left: -10px;
    border-bottom-width: 0;
    border-top-color: #ffffff
}
.popover.right .arrow {
    top: 50%;
    left: -11px;
    margin-top: -11px;
    border-left-width: 0;
    border-right-color: #999;
    border-right-color: rgba(0, 0, 0, 0.25)
}
.popover.right .arrow:after {
    left: 1px;
    bottom: -10px;
    border-left-width: 0;
    border-right-color: #ffffff
}
.popover.bottom .arrow {
    left: 50%;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: #999;
    border-bottom-color: rgba(0, 0, 0, 0.25);
    top: -11px
}
.popover.bottom .arrow:after {
    top: 1px;
    margin-left: -10px;
    border-top-width: 0;
    border-bottom-color: #ffffff
}
.popover.left .arrow {
    top: 50%;
    right: -11px;
    margin-top: -11px;
    border-right-width: 0;
    border-left-color: #999;
    border-left-color: rgba(0, 0, 0, 0.25)
}
.popover.left .arrow:after {
    right: 1px;
    border-right-width: 0;
    border-left-color: #ffffff;
    bottom: -10px
}
@media (max-width: 480px) {
    .carousel-control {
        top: auto;
        bottom: 0
    }
}
html {
    background-color: #efefef;
    -webkit-font-smoothing: antialiased
}
button {
    -webkit-font-smoothing: antialiased
}
body {
    width: 100%;
    -webkit-text-size-adjust: 100%;
    color: #444;
    font-family: Arial, sans-serif
}
h1,
h2,
h3,
h4,
h5 {
    font: normal 16px/24px'Open Sans', Arial, sans-serif
}
h1,
h2,
h3 {
    color: #444;
    line-height: 1.3;
    font-weight: 300
}
h2 {
    font-size: 40px;
    text-align: center;
    line-height: 50px;
    margin-bottom: 40px;
    padding-top: 60px
}
h1 {
    font-size: 32px;
    font-weight: 100;
    line-height: 1.375
}
p {
    margin: 0 0 1em;
    font-size: 13px;
    line-height: 1.54
}
blockquote p {
    margin-bottom: 0
}
blockquote footer {
    margin: 0 0 10px
}
cite {
    font-style: italic;
    text-align: right
}
cite:before {
    content: '—'
}
li {
    line-height: 17px
}
a {
    text-decoration: none;
    color: #15c;
    cursor: pointer
}
a:hover {
    text-decoration: underline
}
a:active {
    color: #d14836
}
a.secondary {
    color: #2d9ae3
}
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='search'],
input[type='number'],
textarea {
    background-color: #fff;
    line-height: 27px;
    padding-left: 8px;
    color: #444;
    border: 1px solid #ebebeb;
    border-top-color: #dcdcdc;
    display: inline-block;
    vertical-align: top;
    border-radius: 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
input[type='text']:hover,
input[type='text']:focus,
input[type='email']:hover,
input[type='email']:focus,
input[type='tel']:hover,
input[type='tel']:focus,
input[type='search']:hover,
input[type='search']:focus,
input[type='number']:hover,
input[type='number']:focus,
textarea:hover,
textarea:focus {
    outline: 0;
    border: 1px solid #b9b9b9;
    border-top-color: #a0a0a0;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1)
}
input[type='text']:focus,
input[type='email']:focus,
input[type='tel']:focus,
input[type='search']:focus,
input[type='number']:focus,
textarea:focus {
    border-color: #4d90fe;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3)
}
input[type='text'].form-error,
.code-form .form-error input[type='text'],
input[type='email'].form-error,
.code-form .form-error input[type='email'],
input[type='tel'].form-error,
.code-form .form-error input[type='tel'],
input[type='search'].form-error,
.code-form .form-error input[type='search'],
input[type='number'].form-error,
.code-form .form-error input[type='number'],
textarea.form-error {
    border-color: #dd4b39
}
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='search'],
input[type='number'] {
    height: 29px
}
textarea {
    font-size: 13px
}
.form-error-message,
.required {
    color: #dd4b39
}
.form-error-message {
    margin: 5px 0 0;
    display: none
}
.yt-video.yt-video--is-hidden {
    left: -9999px;
    position: absolute
}
html,
.iframe-container {
    height: 100%
}
.iframe-container {
    overflow: hidden
}
.iframe-container #iframe {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    position: relative
}
.container,
nav {
    margin: 0 auto
}
.container:before,
nav:before,
.container:after,
nav:after {
    content: '';
    display: table
}
.container:after,
nav:after {
    clear: both
}
.container:before,
nav:before,
.container:after,
nav:after {
    content: '';
    display: table
}
.container:after,
nav:after {
    clear: both
}
.company-name {
    white-space: nowrap
}
.tooltip-pointer,
.sales-box .pointer,
.promo-wrapper .pointer {
    outline: none;
    position: absolute;
    top: -11px;
    margin: 0 0 0 -5px;
    background-image: url("http://nextsolution.net/googleapps/images/css/bubble_point_white.png");
    width: 17px;
    height: 11px;
    display: inline-block
}
.banner {
    position: fixed;
    width: 100%;
    z-index: 9000;
    top: 0
}
.banner .btn-sales {
    font-size: 12px;
    margin: 0
}
.google-logo {
    margin-right: 10px
}
.masthead-cloud .google-logo {
    vertical-align: baseline
}
.masthead-cloud .google-logo+span {
    position: relative;
    left: 0;
    bottom: 11px
}
.banner .logo {
    font-size: 32px;
    font-weight: 300;
    line-height: 1.375;
    color: #efefef
}
.banner img {
    vertical-align: middle
}
.banner .container {
    min-height: 44px;
    position: relative
}
.banner .container .btn-panel {
    float: right
}
.banner .container .btn-panel:before,
.banner .container .btn-panel:after {
    content: '';
    display: table
}
.banner .container .btn-panel:after {
    clear: both
}
.banner .container .btn-panel a.btn-trial,
.banner .container .btn-panel a.btn-sign-in {
    color: #444
}
.banner .container .btn-panel .cta {
    display: inline-block;
    font-size: 12px;
    margin-left: 10px;
    vertical-align: top
}
.btn-panel--cloud {
    margin-top: 10px
}
.contactForm-modal {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    left: auto;
    margin-top: 25px;
    max-width: 100%;
    width: 700px;
    padding: 50px 35px;
    position: absolute;
    right: 10px;
    top: 25px
}
.contactForm-modal:before {
    content: "";
    position: absolute;
    right: 60px;
    top: -11px;
    display: block;
    width: 17px;
    height: 11px;
    background-image: url("http://nextsolution.net/googleapps/images/css/bubble_point_white.png")
}
.contactForm-modal .modal-header,
.contactForm-modal .modal-body,
.contactForm-modal .modal-footer {
    padding: 0
}
.contactForm-modal.contactForm--with-image .rep-info,
.contactForm-modal.contactForm--with-image .modal-header,
.contactForm-modal.contactForm--with-image .contact-options,
.contactForm-modal.contactForm--with-image .contact-form,
.contactForm-modal.contactForm--with-image .feedback {
    margin-left: 100px
}
.contactForm-modal .rep__avatar {
    border-radius: 40px;
    position: absolute;
    left: 35px;
    top: 50px
}
.contactForm-modal .rep__data {
    color: #000
}
.contactForm-modal .rep__description {
    color: #444;
    margin-bottom: 18px
}
.contactForm-modal .rep__data,
.contactForm-modal .contact-options {
    margin-bottom: 20px
}
.contactForm-modal .feedback,
.contactForm-modal .contact-form {
    padding: 20px;
    background-color: #F5F5F5
}
.contactForm-modal .form-optional {
    color: #91959c
}
.contactForm-modal .form-optional {
    font-style: italic
}
.contactForm-modal .form-row {
    margin-bottom: 20px
}
.contactForm-modal .form-row:last-child {
    margin-bottom: 0
}
.contactForm-modal .modal-footer {
    box-shadow: none;
    background-color: transparent
}
.contactForm-modal .modal-header h3 {
    margin-bottom: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: #444;
    font-weight: bold;
    font-size: 16px;
    z-index: 10
}
.contactForm-modal .modal-body {
    margin-bottom: 20px;
    color: #444
}
.contactForm-modal label {
    display: block;
    margin-bottom: 5px;
    line-height: 1.5
}
.contactForm-modal input,
.contactForm-modal textarea {
    width: 100%;
    margin: 0;
    position: relative
}
.contactForm-modal textarea {
    resize: none
}
.contactForm-modal .feedback {
    display: none
}
.contactForm--hangout .btn-callback {
    line-height: 30px;
    height: 30px;
    padding: 0 12px;
    font-size: 12px
}
.contactForm--hangout .btn-callback+div {
    vertical-align: top !important;
    margin-left: 15px !important
}
.contactForm--hangout .contact-form {
    max-height: 0;
    overflow: hidden;
    padding: 0
}
.contactForm--hangout .contact-form.opened {
    max-height: 500px;
    padding: 20px;
    overflow: visible
}
@media (max-width: 767px) {
    .contactForm--hangout .contact-form {
        max-height: 500px;
        padding: 20px;
        overflow: visible
    }
}
.contactForm--hangout .feedback,
.contactForm--hangout .contact-form {
    position: relative
}
.contactForm--hangout .feedback:after,
.contactForm--hangout .contact-form:after {
    bottom: 100%;
    left: 55px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(245, 245, 245, 0);
    border-bottom-color: #F5F5F5;
    border-width: 15px
}
.contactForm--hangout .feedback .modal-body,
.contactForm--hangout .feedback p {
    margin: 0
}
.banner .sales-cta {
    position: relative;
    color: #444
}
.sales-box {
    width: 300px;
    position: absolute;
    right: 0;
    top: 32px;
    display: none
}
.sales-box h4 {
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: bold
}
.sales-box .sales-box-inner {
    position: relative;
    background: #fff;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin-top: 10px;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
}
.sales-box .pointer {
    right: 40px
}
.sales-box .profile-image {
    float: left;
    width: 100px;
    margin-right: 10px
}
.sales-box .profile-image img {
    width: 100px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px
}
.sales-box br {
    clear: both
}
.sales-box .profile-message {
    clear: both;
    margin-top: 20px;
    border-top: 1px solid #e0e0e0;
    padding-top: 10px
}
.sales-box .profile-info {
    overflow: hidden;
    text-align: left;
    -ms-word-break: break-all;
    word-break: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto
}
.sales-box .profile-info li {
    margin-bottom: 10px
}
.sales-box .profile-info a {
    color: #999
}
.sales-box .profile-info-rep-name {
    display: block
}
.sales-box .close {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 30px;
    height: 30px;
    background: url("https://nextsolution.net/gsuite/images/css/x.png") no-repeat center center;
    opacity: 0.6
}
.sales-box .close:hover {
    opacity: 1
}
.client-name--with-logo .client-name-prefix {
    margin-right: 5px;
    vertical-align: middle;
    display: inline-block
}
.client-logo {
    max-width: 140px;
    max-height: 65px
}
.banner .client-name-wrap {
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-backface-visibility: hidden;
    color: #999;
    font-weight: 300;
    font-size: 16px;
    text-shadow: 0 1px 1px #fff;
    white-space: nowrap;
    font-family: 'Open Sans', arial, sans-serif;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis
}
.banner .client-name-wrap:hover {
    text-decoration: none
}
.banner .cloud-platform__logo,
.banner .cloud-platform__logo+span {
    display: inline-block;
    vertical-align: middle
}
.client-abbr-name {
    display: none
}
.client-name-wrap.show-client-abbr-name .client-name {
    display: none
}
.client-name-wrap.show-client-abbr-name .client-abbr-name {
    display: inline
}
.masthead {
    background: #f5f5f5;
    background-image: -moz-linear-gradient(top, #fafafa, #f5f5f5);
    background-image: -o-linear-gradient(top, #fafafa, #f5f5f5);
    background-image: -webkit-linear-gradient(top, #fafafa, #f5f5f5);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, #f5f5f5));
    background-image: linear-gradient(top, #fafafa, #f5f5f5);
    border-bottom: 1px solid #ebebeb;
    color: #91959c;
    padding: 12px 0 8px
}
.header__button__wrapper {
    display: inline-block;
    margin-left: 10px;
    position: relative;
    vertical-align: top
}
.header__button {
    position: relative;
    width: 30px;
    height: 30px;
    background-color: #f5f5f5;
    background-repeat: no-repeat;
    border: 1px solid #dcdcdc;
    float: left;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px
}
.header__button:hover {
    border: 1px solid rgba(0, 0, 0, 0.1)
}
.new .header__button {
    border: 1px solid #e6bb68;
    background-color: #f0c677
}
.new .header__button:hover {
    background-color: #f0c36d
}
.promo-wrapper .promo-box {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 100;
    position: absolute;
    right: 0;
    top: 42px;
    width: 250px;
    background: #fff;
    border: 1px solid #ccc;
    border-bottom: 0;
    padding: 20px;
    -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2)
}
.promo-wrapper .promo-box img {
    max-width: 100%
}
.promo-wrapper .promo-box ul,
.promo-wrapper .promo-box ol {
    margin: 13px 0;
    padding: 0 0 0 20px
}
.promo-wrapper .promo-box ul {
    list-style-type: disc;
    list-style-position: inside
}
.promo-wrapper .promo-box ol {
    list-style-type: decimal;
    list-style-position: inside
}
.promo-wrapper .promo-box ul ul,
.promo-wrapper .promo-box ol ul {
    list-style-type: circle;
    list-style-position: inside;
    margin-left: 15px
}
.promo-wrapper .promo-box ol ol,
.promo-wrapper .promo-box ul ol {
    list-style-type: lower-latin;
    list-style-position: inside;
    margin-left: 15px
}
.promo-wrapper .promo-box h1,
.promo-wrapper .promo-box h2,
.promo-wrapper .promo-box h3,
.promo-wrapper .promo-box h4 {
    font-family: inherit
}
.promo-wrapper.new .promo-box {
    background: #f9edbe;
    border: 1px solid #f0c36d
}
.promo-wrapper h3 {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px
}
.promo-wrapper p {
    color: #444
}
.promo-wrapper p:last-of-type {
    margin-bottom: 0
}
.promo-wrapper a {
    color: #444;
    font-weight: bold;
    font-size: 13px
}
.promo-wrapper .pointer {
    right: 6px
}
.promo-wrapper.new .pointer {
    background-image: url("https://nextsolution.net/gsuite/images/css/bubble_point_yellow.png")
}
.promo-wrapper.new .promo-toggle,
.promo-wrapper .promo-toggle {
    background-position: center 8px
}
.promo-wrapper .promo-toggle {
    background-image: url("https://nextsolution.net/gsuite/images/css/announcement-icon-grey.png")
}
.header__button__wrapper .locked-button {
    background-image: url("https://nextsolution.net/gsuite/images/css/lock-icon.png");
    background-position: center 8px
}
.promo-wrapper.new .promo-toggle {
    background-image: url("https://nextsolution.net/gsuite/images/css/announcement-icon.png")
}
.promo-wrapper.new .promo-toggle:hover {
    background-image: url("https://nextsolution.net/gsuite/images/css/announcement-icon.png")
}
.promo-wrapper .close {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    background: url("https://nextsolution.net/gsuite/images/css/x.png") no-repeat center center;
    opacity: 0.6
}
.promo-wrapper .close:hover {
    opacity: 1
}
.old-ie-warning {
    padding: 10px 40px 10px 40px;
    margin: 0 5px 20px 5px;
    border: 1px solid red
}
.old-ie-warning>h3 {
    color: red
}
.primary-nav li,
.secondary-nav li {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    float: left;
    margin-right: 32px;
    display: inline-block
}
.primary-nav a,
.secondary-nav a {
    padding-bottom: 11px;
    display: inline-block;
    font-family: 'Open Sans', Arial, sans-serif
}
.primary-nav {
    padding: 6px 0;
    background-color: #fff;
    z-index: 1;
    border-bottom: 1px solid #f1f1f1
}
.primary-nav a {
    color: #333;
    padding: 6px 0
}
.primary-nav a:hover {
    text-decoration: underline
}
.primary-nav li.active a {
    font-weight: bold
}
.primary-nav li.active a:hover {
    text-decoration: none
}
.mobile-menu-toggle {
    display: none;
    cursor: pointer
}
.menu-open {
    overflow: hidden
}
section {
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 60px;
    position: relative
}
section:first-of-type {
    padding-top: 130px
}
section.why {
    padding-bottom: 0
}
section.resources {
    padding-bottom: 0
}
section .section-divider {
    background-color: #fff;
    background: linear-gradient(top, #f5f5f5 0%, #fff 60%);
    position: absolute;
    top: 0;
    height: 40px;
    width: 100%;
    display: none
}
section h2 {
    letter-spacing: -0.03em;
    font-size: 40px;
    font-weight: 300;
    margin-bottom: 10px;
    margin-left: 40px;
    margin-right: 40px;
    padding-top: 30px
}
section .tagline {
    margin: 10px 0 50px;
    text-align: center
}
section footer {
    background: none;
    border-top: none;
    margin-top: 20px;
    margin-bottom: 20px;
    position: relative;
    clear: both
}
section footer .jump-top {
    height: 54px;
    width: 54px;
    position: absolute;
    right: 20px;
    bottom: -10px;
    display: block;
    text-indent: -99999px;
    background: transparent url("https://nextsolution.net/gsuite/images/css/back-to-top.png") no-repeat center center
}
footer {
    border-top: 1px solid #eee;
    font-size: 11px;
    line-height: 2.19;
    list-style: none;
    padding: 10px 15px;
    background: whitesmoke
}
footer li {
    display: inline
}
footer li+li:before {
    content: '·';
    padding: 0 3px
}
#maia-signature {
    clear: both;
    margin: 120px auto 0;
    max-width: 978px;
    min-height: 4px
}
#maia-signature:before,
#maia-signature:after {
    content: '';
    float: right;
    height: 4px
}
#maia-signature:before {
    border-left: 35px solid #ffa900;
    border-right: 34px solid #00a753
}
#maia-signature:after {
    border-left: 34px solid #0089fa;
    border-right: 35px solid #ff002b
}
@media (min-width: 980px) {
    .mobile-menu-toggle {
        display: none
    }
    .container,
    nav {
        width: 978px;
        padding: 0 10px
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .container,
    nav {
        margin: 0 10px
    }
    header {
        background-position: bottom center
    }
    header .content-panel {
        display: inline;
        float: left;
        width: 96.875%;
        margin: 80px 1.5625% 0
    }
}
@media (max-width: 767px) {
    .mobile-menu-toggle {
        display: block;
        background: url("https://nextsolution.net/gsuite/images/css/mobile_nav_button.png") no-repeat -10px center;
        height: 29px;
        width: 32px
    }
    .primary-nav nav ol {
        display: none;
        margin-top: 10px
    }
    .primary-nav nav li {
        display: block;
        float: none;
        padding: 12px 0;
        margin: 0;
        border-top: 1px solid #eee
    }
    .primary-nav nav li a {
        margin-bottom: 0;
        padding: 0
    }
    section h2 {
        font-size: 24px
    }
    .banner .client-name-wrap>span,
    .banner .container .btn-panel .btn-trial {
        display: none
    }
    .banner .container .btn-panel .contactForm-modal {
        left: 0;
        right: auto
    }
    .banner .container .btn-panel {
        left: 40px;
        top: 56px
    }
    .container,
    nav {
        margin: 0 10px
    }
    header {
        background-position: bottom center
    }
    header .promo-img,
    header .content-panel {
        display: inline;
        float: left;
        width: 96.875%;
        margin: 0 1.5625%;
        margin-top: 80px
    }
    .cloud-platform__logo {
        width: 190px;
        overflow: hidden
    }
    .cloud-platform__logo+span {
        display: none
    }
}
.banner .container .btn-panel .contactForm-modal .btn-callback+div,
.is-mobile .banner .container .btn-panel .contactForm-modal .btn-callback+div {
    display: none !important
}
@media (min-width: 980px) {
    .banner .container .btn-panel .contactForm-modal .btn-callback+div {
        display: inline-block !important
    }
}
@media (max-width: 480px) {
    .banner .client-name-wrap span,
    .banner .client-name-wrap .client-logo,
    .banner .container .btn-panel .btn-trial {
        display: none
    }
    .promo-wrapper.new {
        background-position: 145px top
    }
    .promo-wrapper .promo-box {
        left: 50%;
        margin-left: -100px;
        width: 200px
    }
    .promo-wrapper .promo-box .pointer {
        left: 50%;
        margin-left: -8px;
        right: auto
    }
    .banner .sales-cta .sales-box {
        width: 240px
    }
    .promo-wrapper .promo-box,
    .banner .sales-cta .sales-box,
    .banner .container .btn-panel .contactForm-modal {
        position: fixed;
        top: 120px;
        left: 10px;
        right: 10px;
        margin: 0;
        width: auto
    }
    .promo-wrapper .promo-box .pointer,
    .banner .sales-cta .sales-box .pointer,
    .banner .container .btn-panel .contactForm-modal .pointer {
        display: none
    }
    section {
        padding-bottom: 20px
    }
    section h2 {
        font-size: 24px;
        padding-top: 40px;
        line-height: 1.2
    }
    .sales-contact-name {
        display: none
    }
    footer {
        font-size: 13px
    }
    footer li {
        padding: 5px 0;
        display: block
    }
    footer li+li:before {
        content: '';
        padding: 0;
        margin-left: -5px
    }
    #maia-signature {
        margin-top: 60px
    }
    section footer {
        height: 40px;
        padding: 0;
        margin: 10px 0
    }
    section footer a.jump-top {
        right: 0;
        bottom: 0;
        width: 40px;
        height: 40px
    }
    .banner .container .btn-panel .contactForm-modal {
        max-width: inherit;
        max-height: 85vh;
        overflow: scroll;
        top: 60px;
        padding: 25px
    }
    .banner .container .btn-panel .contactForm-modal:before {
        display: none
    }
    .banner .container .btn-panel .contactForm-modal .rep__avatar {
        left: 50%;
        top: 30px;
        margin-left: -40px
    }
    .banner .container .btn-panel .contactForm-modal .contact-options,
    .banner .container .btn-panel .contactForm-modal .modal-header,
    .banner .container .btn-panel .contactForm-modal .rep-info {
        text-align: center
    }
}
@media (max-width: 480px) and (max-width: 767px) {
    .banner .container .btn-panel .contactForm-modal .contact-options {
        display: none
    }
}
@media (max-width: 480px) {
    .banner .container .btn-panel .contactForm-modal.contactForm--with-image {
        padding-top: 125px
    }
    .banner .container .btn-panel .contactForm-modal.contactForm--with-image .rep-info,
    .banner .container .btn-panel .contactForm-modal.contactForm--with-image .modal-header,
    .banner .container .btn-panel .contactForm-modal.contactForm--with-image .contact-options,
    .banner .container .btn-panel .contactForm-modal.contactForm--with-image .contact-form,
    .banner .container .btn-panel .contactForm-modal.contactForm--with-image .feedback {
        margin-left: 0
    }
    .banner .container .btn-panel .contactForm-modal .btn-callback {
        display: block;
        margin: 0 auto 20px
    }
    .banner .container .btn-panel .contactForm-modal .contact-form:after {
        display: none
    }
}
@media (min-width: 321px) and (max-width: 480px),
(min-width: 321px) and (max-width: 568px) {
    .primary-nav nav ol {
        overflow: scroll;
        height: 100px
    }
}
@media (max-height: 710px) {
    .contact-opened {
        overflow: auto
    }
    .banner .container .btn-panel .contactForm-modal {
        max-height: 85vh;
        overflow-y: scroll
    }
}
@media (max-width: 280px) {
    body,
    .banner {
        width: 280px
    }
    .banner {
        position: absolute
    }
}
.carousel-control {
    display: block;
    margin-top: 0;
    font-size: 25px;
    font-weight: 500;
    line-height: 33px;
    color: #333;
    background-color: transparent;
    border: none;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4)
}
.carousel-control:hover {
    color: #333
}
.carousel-control.left {
    background-image: url("https://nextsolution.net/gsuite/images/css/left-arrow.png")
}
.carousel-control.right {
    background-image: url("https://nextsolution.net/gsuite/images/css/right-arrow.png")
}
.spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 90000;
    background-color: #fff
}
@media (max-width: 767px) {
    .carousel .item>img {
        display: none
    }
}
.sprite--laptop-google,
.code-form .google-apps__laptop,
.sprite--google-apps-floating,
.code-form .google-apps__laptop--floating,
.sprite--gmail,
.code-form .google-apps__gmail,
.sprite--calendar,
.code-form .google-apps__calendar,
.sprite--slides,
.code-form .google-apps__slides,
.sprite--drive,
.code-form .google-apps__drive,
.sprite--sheets,
.code-form .google-apps__sheets,
.sprite--docs,
.code-form .google-apps__docs,
.sprite--vault,
.code-form .google-apps__vault {
    background-image: url(https://nextsolution.net/gsuite/images/css/microsite/_access-code-sprite.png);
    background-repeat: no-repeat
}
.sprite--laptop-google,
.code-form .google-apps__laptop {
    background-position: 0px 0px;
    width: 383px;
    height: 78px
}
.sprite--google-apps-floating,
.code-form .google-apps__laptop--floating {
    background-position: 0px -78px;
    width: 300px;
    height: 198px
}
.sprite--gmail,
.code-form .google-apps__gmail {
    background-position: -300px -78px;
    width: 71px;
    height: 51px
}
.sprite--calendar,
.code-form .google-apps__calendar {
    background-position: -300px -129px;
    width: 66px;
    height: 59px
}
.sprite--slides,
.code-form .google-apps__slides {
    background-position: -300px -188px;
    width: 50px;
    height: 62px
}
.sprite--drive,
.code-form .google-apps__drive {
    background-position: 0px -276px;
    width: 59px;
    height: 50px
}
.sprite--sheets,
.code-form .google-apps__sheets {
    background-position: 0px -326px;
    width: 44px;
    height: 54px
}
.sprite--docs,
.code-form .google-apps__docs {
    background-position: -44px -326px;
    width: 44px;
    height: 54px
}
.sprite--vault,
.code-form .google-apps__vault {
    background-position: -59px -276px;
    width: 53px;
    height: 48px
}
.btn {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    border: 0;
    margin: 0;
    cursor: pointer;
    display: inline-block;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.54;
    padding: 7px 12px;
    text-align: center;
    outline: none
}
.btn:hover,
.btn:focus {
    text-decoration: none
}
.btn:active {
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.24);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.24)
}
.btn+.btn {
    margin-left: 10px
}
.btn-primary {
    background-color: #4173c9;
    background: #5e8ee4;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5e8ee4), color-stop(100%, #4173c9));
    background: -webkit-linear-gradient(top, #5e8ee4 0%, #4173c9 100%);
    background: -o-linear-gradient(top, #5e8ee4 0%, #4173c9 100%);
    background: linear-gradient(to bottom, #5e8ee4 0%, #4173c9 100%);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.08)
}
.btn-primary:hover,
.btn-primary:focus {
    border: none;
    text-decoration: none;
    background: #5587d7;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5587d7), color-stop(100%, #396bbc));
    background: -webkit-linear-gradient(top, #5587d7 0%, #396bbc 100%);
    background: -o-linear-gradient(top, #5587d7 0%, #396bbc 100%);
    background: linear-gradient(to bottom, #5587d7 0%, #396bbc 100%)
}
.btn-primary.btn-disabled,
.btn-primary[disabled] {
    background-color: #a4b9e3;
    background: linear-gradient(top, #b0c7f0, #a4b9e3);
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    cursor: default !important
}
a.btn-primary {
    color: #fff;
    text-decoration: none
}
.btn-share {
    background-color: #51A83E;
    color: white
}
.btn-share:hover {
    background-color: #4b9c39
}
.start-hangout {
    padding-left: 40px;
    position: relative
}
.start-hangout:before {
    content: '';
    position: absolute;
    left: 12px;
    top: 10px;
    display: block;
    width: 20px;
    height: 13px;
    background-image: url("https://nextsolution.net/gsuite/images/css/video.png")
}
.btn-secondary {
    background-color: #f5f5f5;
    background: linear-gradient(bottom, #f9f9f9 0, #f5f5f5);
    border: 1px solid #e5e5e5;
    padding: 6px 11px;
    color: #444;
    text-shadow: 0 1px 0 #fff
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #f1f1f1;
    background: linear-gradient(bottom, #f5f5f5 0, #f1f1f1);
    border-color: #e1e1e1
}
.play-button {
    width: 100px;
    height: 100px;
    background-image: url("https://nextsolution.net/gsuite/images/css/play-icon.png")
}
.modal__close,
.modal .close,
.tour-skipbutton {
    position: absolute;
    display: block;
    text-indent: -9999px;
    border: none;
    right: 0px;
    top: 0px;
    width: 30px;
    height: 30px;
    background: url("https://nextsolution.net/gsuite/images/css/x.png") no-repeat center center;
    cursor: pointer;
    opacity: 0.6
}
.modal__close:hover,
.modal .close:hover,
.tour-skipbutton:hover {
    opacity: 1
}
.modal__backdrop {
    position: fixed;
    display: block;
    z-index: 9100;
    background-color: #000;
    opacity: 0.4;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
}
.modal--access-code {
    z-index: 9999;
    width: 660px;
    top: 70px;
    border: none
}
.modal--access-code .modal-inner-wrapper {
    position: relative;
    padding: 50px;
    background: #FFF
}
.modal--access-code .modal-inner-wrapper .modal-arrow {
    width: 0;
    height: 0;
    position: absolute;
    top: -20px;
    right: 174px;
    border-style: solid;
    border-width: 0 20px 20px 20px;
    border-color: transparent transparent #FFFFFF transparent;
    -webkit-transform: rotate(360deg)
}
.modal--access-code .modal-header h3 {
    font-size: 40px
}
.modal--access-code .modal-body {
    font-family: "Open Sans";
    margin-top: 20px
}
.modal--access-code .modal-body p {
    font-size: 16px
}
.modal--access-code .text-holder,
.modal--access-code .icon-svg {
    display: inline-block;
    vertical-align: top
}
.modal--access-code .btn {
    margin-right: 15px;
    font-size: 13px
}
.modal--access-code .text-holder {
    font-size: 12px;
    width: 430px
}
.modal--access-code .continue-link {
    margin-left: 15px;
    color: #909090;
    text-decoration: underline
}
.modal--access-code .continue-link:hover {
    text-decoration: none
}
.modal--access-code .icon-svg {
    width: 71px;
    height: 71px;
    margin-right: 30px
}
.modal--access-code .icon-svg ellipse,
.modal--access-code .icon-svg path {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out
}
.modal--access-code .icon-svg path {
    -webkit-transition: stroke-dashoffset 0.5s ease-in;
    -webkit-transition-delay: 0.3s;
    -moz-transition: stroke-dashoffset 0.5s ease-in 0.3s;
    -o-transition: stroke-dashoffset 0.5s ease-in 0.3s;
    transition: stroke-dashoffset 0.5s ease-in 0.3s
}
.modal--access-code .icon-svg.locked ellipse,
.modal--access-code .icon-svg.locked path {
    stroke: #f0c677
}
.modal--access-code .icon-svg.locked #lock-body {
    fill: #f0c677
}
.modal--access-code .icon-svg.unlocked ellipse,
.modal--access-code .icon-svg.unlocked path {
    stroke: #449f37
}
.modal--access-code .icon-svg.unlocked #lock-body {
    fill: #449f37
}
.modal--access-code .icon-svg.error ellipse,
.modal--access-code .icon-svg.error path {
    stroke: #d14836
}
.modal--access-code .icon-svg.error #lock-body {
    fill: #d14836
}
@media (max-width: 767px) {
    .modal--access-code {
        width: 96.875% !important;
        margin: 0 !important;
        left: 50% !important;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%)
    }
    .modal--access-code .modal-inner-wrapper {
        padding: 15px
    }
    .modal--access-code .modal-header h3 {
        font-size: 30px
    }
    .modal--access-code .text-holder {
        width: 74%
    }
}
@media (max-width: 480px) {
    .modal--access-code .icon-svg {
        display: none
    }
    .modal--access-code .text-holder {
        width: auto
    }
}
.modal {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    -webkit-background-clip: padding;
    -moz-background-clip: padding;
    background-clip: padding-box
}
.modal h2 {
    padding-top: 40px;
    margin-bottom: 20px
}
.modal-body {
    padding: 10px;
    overflow: hidden
}
.modal-header {
    padding: 10px 10px 0;
    border-bottom: none
}
.modal-header h3 {
    line-height: 1.3;
    font-size: 23px;
    color: #444
}
.modal-footer {
    background: #fff;
    border: none;
    text-align: left
}
.modal-footer .btn+.btn {
    margin-left: 10px
}
.modal.header-modal {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: inline;
    float: left;
    width: 96.875%;
    margin: 0 1.5625%;
    float: none;
    width: 100%;
    margin: 0;
    position: absolute;
    left: 0;
    top: 18px;
    border: none
}
.modal.header-modal.hide {
    display: none
}
.modal.header-modal .modal-header {
    padding: 0
}
.modal.header-modal .modal-body {
    padding-top: 0
}
.modal-backdrop {
    display: none
}
.modal,
.modal.fade {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none
}
.carousel-modal {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    max-width: 840px;
    width: 100%;
    text-align: center;
    margin: 0;
    position: absolute;
    left: 80px;
    top: 0;
    border: none
}
.carousel-modal.hide {
    display: none
}
.carousel-modal .modal-header h3 {
    text-align: center;
    margin-bottom: 10px
}
.carousel-modal .close {
    right: 105px
}
@media (max-width: 767px) {
    .modal.header-modal {
        width: 728px;
        top: 20px;
        left: 0
    }
    .modal.header-modal iframe {
        max-width: 100%
    }
    .modal.header-modal h2 {
        padding: 10px 0
    }
    .modal.header-modal .close {
        right: 10px
    }
}
@media (max-width: 480px) {
    .modal {
        display: inline;
        float: left;
        width: 96.875%;
        margin: 0 1.5625%;
        position: absolute;
        left: 0
    }
    .modal h3 {
        font-size: 16px
    }
    .modal iframe {
        max-width: 100%
    }
    .modal.hide {
        display: none
    }
    .modal.header-modal {
        margin: 0;
        width: 300px;
        top: 20px
    }
    .modal.header-modal h2 {
        padding: 10px 0;
        font-size: 14px
    }
    .modal.header-modal .close {
        top: 0;
        right: 5px
    }
    .contactForm-modal,
    .contactForm-modal input[type='text'] {
        max-width: 200px
    }
}
.yt-video {
    max-width: 100%
}
.asset-preview {
    background-color: #fff
}
.asset-preview>section {
    min-height: 370px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 0 !important
}
.asset-preview>section:before,
.asset-preview>section:after {
    margin-top: 0;
    margin-bottom: 0;
    height: auto
}
.asset-preview .carousel {
    margin-bottom: 0 !important
}
.benefit {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    text-align: center;
    width: 25%
}
.benefit .chart-canvas {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.15;
    height: 100% !important;
    width: 100% !important
}
.benefit.active .chart-canvas,
.benefit.active .headline,
.benefit:hover .chart-canvas,
.benefit:hover .headline {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1
}
.benefit.active .read-more {
    opacity: 0
}
.benefit .headline {
    -webkit-transition: all 0.2s ease-out;
    -webkit-transition-delay: 0.1s;
    -moz-transition: all 0.2s ease-out 0.1s;
    -o-transition: all 0.2s ease-out 0.1s;
    transition: all 0.2s ease-out 0.1s;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.15;
    -webkit-font-smoothing: antialiased;
    display: block;
    height: 60%;
    left: 50%;
    margin-left: -30%;
    margin-top: -25%;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 60%;
    z-index: 400
}
.benefit .headline span {
    margin: 5px 0;
    display: block
}
.benefit .read-more {
    -webkit-transition: opacity 0.2s ease-out;
    -moz-transition: opacity 0.2s ease-out;
    -o-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out
}
.benefit h3 {
    color: #444
}
.benefit h3 .figure {
    color: #333;
    font-size: 28px;
    font-weight: 500;
    white-space: nowrap
}
@media only screen and (max-width: 768px) {
    .benefit h3 .figure {
        font-size: 16px
    }
}
.benefit h3 .sub {
    font-size: 14px
}
@media only screen and (max-width: 768px) {
    .benefit h3 .sub {
        font-size: 13px;
        font-family: arial, sans-serif
    }
}
.benefits .footnotes {
    display: inline;
    float: left;
    margin: 0 2%;
    margin-left: 10%;
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: left;
    width: 80%
}
.benefits .benefit-overview {
    margin-bottom: 20px
}
.benefits .benefit-arrow {
    background: url("https://nextsolution.net/gsuite/images/css/tabs-selected-arrow.png") no-repeat;
    background: url("https://nextsolution.net/gsuite/images/css/tab-arrow-new.png") no-repeat;
    position: absolute;
    top: -11px;
    height: 12px;
    width: 40px;
    z-index: 1;
    visibility: hidden;
    left: 55px
}
.benefits .carousel {
    text-align: center
}
.benefits .carousel-inner .item {
    margin: 0px 40px
}
.benefits .carousel-indicators {
    margin: 0;
    list-style: none;
    position: relative;
    margin: 0 auto;
    text-align: center;
    display: block;
    margin-top: 20px
}
.benefits .carousel-indicators li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 2px;
    text-indent: -999px;
    background-color: #d8d8d8;
    border-radius: 5px;
    cursor: pointer
}
.benefits .carousel-indicators .active {
    background-color: #666
}
.more-benefits {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background: #fff;
    border: 1px solid #efefef;
    border-top: none;
    border-bottom: none;
    clear: left;
    display: none;
    float: left;
    height: 250px;
    margin: 0 2% 10px;
    padding: 20px;
    position: relative;
    width: 65%
}
.more-benefits.active {
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    display: block
}
.more-benefits.active .benefit-arrow {
    visibility: visible
}
.more-benefits h4 {
    font-size: 16px;
    font-weight: bold;
    margin: 0 2% 20px
}
.more-benefits p {
    display: inline-block;
    margin: 0 2%;
    vertical-align: top;
    width: 46%
}
.more-benefits p.intro {
    margin-bottom: 20px
}
.more-benefits p.disclaimer {
    color: #666;
    font-size: 11px;
    margin-top: 20px
}
.more-benefits p.disclaimer a {
    color: #666
}
.more-benefits.more-benefits-1,
.more-benefits.more-benefits-5 {
    margin-left: 2%
}
.more-benefits.more-benefits-1 .benefit-arrow,
.more-benefits.more-benefits-5 .benefit-arrow {
    left: 75px
}
.more-benefits.more-benefits-2,
.more-benefits.more-benefits-6 {
    margin-left: 10%
}
.more-benefits.more-benefits-2 .benefit-arrow,
.more-benefits.more-benefits-6 .benefit-arrow {
    left: 230px
}
.more-benefits.more-benefits-3 {
    margin-left: 20%
}
.more-benefits.more-benefits-3 .benefit-arrow {
    right: 228px;
    left: auto
}
.more-benefits.more-benefits-4 {
    margin-left: 25%;
    float: right
}
.more-benefits.more-benefits-4 .benefit-arrow {
    right: 75px;
    left: auto
}
@media (max-width: 480px) {
    .benefits .carousel-inner {
        width: 100%
    }
    .benefits .carousel-control {
        display: none
    }
    .benefits img {
        max-width: 100%
    }
    .benefits h2 {
        padding-top: 20px
    }
    .benefits h3 {
        font-size: 12px
    }
    .benefits .headline {
        position: static;
        left: 0;
        font-size: 14px;
        width: auto
    }
    .benefits .headline span {
        font-size: 12px
    }
    .benefits .benefits-overview {
        margin-bottom: 0
    }
    .benefits .more-benefits {
        clear: both;
        margin-top: 20px;
        float: none;
        width: auto;
        height: auto;
        margin-left: 0;
        margin-right: 0
    }
    .benefits .more-benefits h4 {
        font-size: 14px;
        margin-bottom: 10px
    }
    .benefits .more-benefits p {
        width: auto;
        display: block;
        float: none;
        margin-bottom: 20px
    }
    .benefits .more-benefits.more-benefits .benefit-arrow {
        display: none
    }
}
.products .carousel {
    margin-bottom: 132px
}
.products .promo {
    display: inline;
    float: left;
    width: 46.875%;
    margin: 0 9% 0 1.5625%;
    position: relative
}
.products img {
    /*width: 100%;
    display: block*/
}
.products .icon {
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    width: 64px;
    height: 64px
}
.products .content-panel {
    display: inline;
    float: left;
    width: 30.208333333333332%;
    margin: 0 1.5625% 0 9%;
    padding-top: 20px
}
.products .content-panel h3 {
    font-size: 24px;
    margin-bottom: 10px
}
.products .carousel .carousel-inner {
    min-height: 300px
}
.products .carousel .carousel-inner.expanded {
    min-height: 370px
}
.products .carousel-modal .close {
    right: 15px
}
.products .modal {
    left: auto !important;
    width: 100%
}
.product-list {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    position: absolute;
    text-align: center;
    bottom: -132px;
    left: 0;
    width: 100%
}
.product-list:before,
.product-list:after {
    content: '';
    display: table
}
.product-list:after {
    clear: both
}
.product-list ul {
    margin: 0 auto;
    position: relative;
    margin-bottom: 40px
}
.product-list ul:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 22px;
    width: 100%;
    height: 1px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAABCAQAAABJCSfIAAAAEklEQVR4AWNwsQZDPhcGMOQDABy6Au5PESTUAAAAAElFTkSuQmCC") repeat-x left top
}
.product-list li {
    float: left;
    text-align: center
}
.product-list i {
    display: block;
    position: relative;
    margin: 0 auto;
    padding: 8px 10px;
    width: 32px;
    height: 32px;
    background: #fff center center no-repeat;
    background-size: 32px;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in
}
.product-list span {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    position: relative;
    min-width: 52px;
    padding: 0 0 10px;
    margin: 0 auto;
    color: #444;
    cursor: pointer
}
.product-list span:hover i {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    -o-transform: translateY(-8px);
    transform: translateY(-8px)
}
.product-list .active span:before {
    content: '';
    display: block;
    position: absolute;
    margin-left: -6px;
    bottom: -4px;
    left: 50%;
    border: 6px solid transparent;
    border-bottom-color: #333
}
.product-list .active span:hover i {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
}
.product-video-thumb .play-button {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -50px;
    margin-left: -50px
}
.product-video-thumb img {
    z-index: -1
}
@media (max-width: 767px) {
    .products .carousel {
        margin-bottom: 20px
    }
    /*.products .content-panel {
        display: inline;
        float: left;
        width: 80.20833333333334%;
        margin: 0 1.5625%
    }*/

    .products .content-panel {
        display: inline;
        float: left;
        width: 95%;
        margin: 0 10px;
        text-align: center;
    }


    .products .content-panel a {
        display: inline-block;
        /*margin-bottom: 20px*/
    }
    .products .content-panel h3 {
        margin-bottom: 20px
    }
    .products .promo {
        width: 100%;
        text-align: center;
        margin: 0 1.5625%;
        padding-top: 30px;
    }
    /*.products .promo img {
        width: 60%
    }*/

    .products .promo img {
        max-width: 100%;
        max-height: 100%;

    }

    .products p {
        margin-bottom: 20px
    }
    .products .carousel-control {
        top: auto;
        bottom: 40%
    }
    .product-list {
        display: none
    }
}
@media (max-width: 480px) {
    /*.products .content-panel {
        display: inline-block;
        float: none;
        width: 300px;
        margin: 0 9%
    }*/
    .products .content-panel a {
        display: inline-block;
        margin-bottom: 20px;
        margin-top: 20px;
    }
    .products .content-panel h3 {
        margin-bottom: 20px
    }
    .products .carousel-control {
        top: 220px
    }
    .products .carousel-control.right {
        right: 0
    }
    .products .carousel-control.left {
        left: 0
    }
    .products .carousel-inner {
        min-height: 420px
    }
    .products .product-list {
        display: none
    }
}
.resources .carousel {
    color: #fff;
    font-weight: bold;
    margin-bottom: 0;
    background: #444
}
.resources .carousel h2 {
    color: #fff;
    padding-top: 10px
}
.resources .carousel .tagline {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 300
}
.resources .carousel-indicators {
    list-style: none;
    position: absolute;
    bottom: 20px;
    margin: 0 auto;
    display: block;
    width: 100%;
    text-align: center
}
.resources .carousel-indicators li {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 2px;
    text-indent: -999px;
    background-color: #666;
    cursor: pointer
}
.resources .carousel-indicators .active {
    background-color: #fff
}
.resources .carousel-control {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    width: 60px;
    height: 60px;
    background-color: rgba(34, 34, 34, 0.5)
}
.resources .carousel-control:hover {
    background-color: #222
}
.resources .carousel-control.left {
    background-image: url("https://nextsolution.net/gsuite/images/css/left-arrow-white.png");
    left: 0
}
.resources .carousel-control.right {
    background-image: url("https://nextsolution.net/gsuite/images/css/right-arrow-white.png");
    right: 0
}
.resources .modal h2 {
    color: #444;
    padding-top: 0;
    font-size: 18px;
    margin-bottom: 0
}
.resources .item-content {
    text-align: center;
    height: 460px;
    position: relative
}
.resources .item-header {
    padding-top: 320px
}
.resources .item {
    height: 460px
}
.resources .item:before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url("https://nextsolution.net/gsuite/images/css/banner-mask.png") repeat-x left bottom
}
.resources .text-box {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.2);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    text-align: left;
    left: 0;
    width: 420px;
    max-width: 100%;
    padding: 20px;
    top: 40px;
    background: #fff;
    color: #444
}
.resources .text-box h3 {
    font-weight: bold;
    margin-bottom: 20px
}
.resources .text-box p {
    font-weight: normal;
    font-size: 12px
}
.resources .text-box .notes {
    font-size: 11px;
    color: #999;
    line-height: 1.2;
    display: none
}
.resources .text-box a {
    color: #444;
    font-weight: bold;
    padding-right: 20px
}
.resources .text-box .blog-link {
    background: url("https://nextsolution.net/gsuite/images/css/link-icon.png") no-repeat right center
}
.resources .text-box .file-link {
    background: url("https://nextsolution.net/gsuite/images/css/download-icon.png") no-repeat right center
}
.resources .text-box .video-link {
    background: url("https://nextsolution.net/gsuite/images/css/video-icon.png") no-repeat right center
}
@media (max-width: 480px) {
    .resources .text-box {
        width: 100%;
        top: 50%;
        -ms-transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%)
    }
    .resources h2,
    .resources .tagline {
        display: none
    }
    .resources .modal h2 {
        padding-top: 10px;
        display: block
    }
}
.testimonial-carousel {
    margin-bottom: 80px;
    min-height: 400px
}
.testimonial-carousel .tagline {
    margin-bottom: 40px
}
.testimonial-carousel .carousel-inner {
    min-height: 450px
}
.testimonial-carousel .item-header {
    margin-bottom: 60px
}
.testimonial-carousel .item-header .company-name {
    text-align: center;
    font-size: 24px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 300;
    margin-bottom: 5px
}
.testimonial-carousel .item-header .company-industry {
    text-align: center;
    font-size: 12px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 300
}
.testimonial-carousel .item-header .company-logo {
    margin: 0 auto;
    display: block;
    margin-bottom: 10px
}
.testimonial-carousel .quote-container {
    display: inline;
    float: left;
    width: 55.208333333333336%;
    margin: 0 1.5625%;
    margin-left: 9.895833333333332%;
    padding-top: 60px;
    background: url("https://nextsolution.net/gsuite/images/css/quote-mark.png") no-repeat center top;
    text-align: center
}
.testimonial-carousel .quote-container .quote-text {
    font-size: 20px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 300;
    color: #666;
    line-height: 1.5;
    text-align: left;
    margin-bottom: 10px
}
.testimonial-carousel .quote-container .quote-source {
    text-align: left
}
.testimonial-carousel .quote-container .quote-source a {
    color: #444;
    font-weight: bold;
    padding-right: 20px
}
.testimonial-carousel .quote-container .quote-source .blog-link {
    background: url("https://nextsolution.net/gsuite/images/css/link-icon.png") no-repeat right center
}
.testimonial-carousel .quote-container .quote-source .file-link {
    background: url("https://nextsolution.net/gsuite/images/css/download-icon.png") no-repeat right center
}
.testimonial-carousel .quote-container .quote-source .video-link {
    background: url("https://nextsolution.net/gsuite/images/css/video-icon.png") no-repeat right center
}
.testimonial-carousel .imagery-container {
    display: inline;
    float: left;
    width: 21.875%;
    margin: 0 1.5625%;
    text-align: center
}
.testimonial-carousel .imagery-container .customer-image {
    margin: 0 auto
}
.testimonial-carousel .imagery-container .customer-image img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
    padding: 8px;
    border: 1px solid #f3f3f3;
    margin-bottom: 20px;
    width: 168px;
    height: 168px
}
.testimonial-carousel .imagery-container .customer-image .video-link {
    display: block;
    position: relative
}
.testimonial-carousel .imagery-container .customer-image .video-link:after {
    content: '';
    display: block;
    position: absolute;
    background: url("https://nextsolution.net/gsuite/images/css/video-play-icon.png") no-repeat center center;
    width: 150px;
    height: 150px;
    left: 30px;
    top: 15px;
    opacity: 0.5
}
.testimonial-carousel .imagery-container .customer-info p {
    margin: 0;
    color: #666;
    text-align: center;
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 300;
    font-size: 14px
}
.testimonial-carousel .imagery-container .customer-info .title {
    font-size: 12px
}
.testimonial-carousel .carousel-indicators {
    list-style: none;
    position: relative;
    margin: 20px auto 0;
    text-align: center;
    display: block
}
.testimonial-carousel .carousel-indicators li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 2px;
    text-indent: -99999px;
    background-color: #d8d8d8;
    border-radius: 5px;
    cursor: pointer
}
.testimonial-carousel .carousel-indicators .active {
    background-color: #666
}
@media (max-width: 767px) {
    .testimonial-carousel .modal {
        left: 0px;
        padding: 0;
       /* width: 768px*/
    }
    .testimonial-carousel .modal .close {
        right: 10px
    }
}
@media (max-width: 480px) {
    .testimonial-carousel .quote-container {
        display: inline;
        float: left;
        width: 63.541666666666664%;
        margin: 0 1.5625% 0 18.229166666666664%
    }
    .testimonial-carousel .quote-container .quote-text {
        font-size: 13px
    }
    .testimonial-carousel .imagery-container {
        display: inline;
        float: left;
        width: 96.875%;
        margin: 0 1.5625%
    }
    .testimonial-carousel .imagery-container .customer-image .video-link:after {
        left: 68px
    }
    .testimonial-carousel .modal {
       /* width: 300px;
        height: 180px;*/
        left: 0
    }
    .testimonial-carousel .modal .modal-header h3 {
        font-size: 14px
    }
    .testimonial-carousel .modal .close {
        right: 10px
    }
}
.try header {
    background: #fbfbfb;
    border-bottom: none;
    padding-bottom: 0;
    min-height: 0
}
.try header ul:before,
.try header ul:after {
    content: '';
    display: table
}
.try header ul:after {
    clear: both
}
.try header li {
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    float: left;
    width: 25%
}
.try header a {
    background-color: #f6f6f6;
    background: linear-gradient(top, #f8f8f8 0, #fbfbfb 72%, #f2f2f2 97%, #f6f6f6 100%);
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    position: relative;
    border: 1px solid;
    border-color: lightGrey lightGrey #eee;
    display: block;
    font: 600 1.1em/1.5'Open Sans', Arial, sans-serif;
    padding: 15px;
    width: auto;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: center
}
.try header a:hover {
    background-color: #f6f6f6;
    background: linear-gradient(top, #f8f8f8 0, #fbfbfb 51%, #f2f2f2 88%, #f6f6f6 100%)
}
.active .try header a {
    background-color: #fff;
    background: linear-gradient(top, #f8f8f8 0, #fbfbfb 56%, #fff 100%);
    -webkit-box-shadow: -2px -3px 7px rgba(50, 50, 50, 0.15);
    -moz-box-shadow: -2px -3px 7px rgba(50, 50, 50, 0.15);
    box-shadow: -2px -3px 7px rgba(50, 50, 50, 0.15)
}
.try .banner {
    position: relative
}
.try h1 {
    display: inline;
    float: left;
    width: 96.875%;
    margin: 20px 1.5625%
}
.try iframe {
    position: relative;
    width: 100%;
    height: 600px;
    padding-bottom: 60px;
    border-bottom: 1px solid #ebebeb
}
@media (max-width: 480px) {
    .try header li a {
        padding: 10px;
        width: auto
    }
    .try header .active a {
        padding: 10px;
        width: auto
    }
    .try .icon {
        position: static;
        display: block
    }
    .try .active .icon {
        position: static
    }
}
.why .carousel {
    font-weight: bold;
    color: #fff
}
.why .carousel h2 {
    color: #fff;
    padding-top: 10px
}
.why .carousel .tagline {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 300
}
.why .item-content {
    text-align: center;
    height: 460px;
    position: relative
}
.why .item {
    height: 460px;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat
}
.why .item:before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url("https://nextsolution.net/gsuite/images/css/banner-mask.png") repeat-x left bottom
}
.why .video-thumb {
    margin: 0 auto;
    display: block;
    width: 200px
}
.why .video-thumb img.main {
    position: relative;
    top: 0;
    left: 0;
    padding-top: 80px
}
.why .video-thumb img.spinner {
    position: absolute;
    top: 161px;
    left: 87px;
    display: block
}
.why .carousel {
    margin-bottom: 0;
    background: #444
}
.why .modal {
    width: 100%;
    max-width: 978px
}
.why .modal h2 {
    color: #444;
    font-size: 18px;
    margin: 0
}
.why .carousel-indicators {
    list-style: none;
    position: absolute;
    bottom: 20px;
    margin: 0 auto;
    display: block;
    width: 100%;
    text-align: center
}
.why .carousel-indicators li {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 2px;
    text-indent: -99999px;
    background-color: #666;
    cursor: pointer
}
.why .carousel-indicators .active {
    background-color: #fff
}
.why .carousel-control {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    width: 60px;
    height: 60px;
    background-color: rgba(34, 34, 34, 0.5)
}
.why .carousel-control.left {
    background-image: url("https://nextsolution.net/gsuite/images/css/left-arrow-white.png");
    left: 0
}
.why .carousel-control.right {
    background-image: url("https://nextsolution.net/gsuite/images/css/right-arrow-white.png");
    right: 0
}
.why .carousel-control:hover {
    background-color: #222
}
section .tagline {
    margin: 10px 10px 50px
}
@media (max-width: 480px) {
    .why .video-thumb img.main {
        padding-top: 20px
    }
    .why .video-thumb img.spinner {
        top: 101px
    }
    .why .modal h2 {
        margin: 0 40px
    }
}
.code-form {
    padding-top: 135px;
    border-bottom: none;
    text-align: center;
    color: #444;
    font-size: 14px
}
.code-form h2 {
    padding: 0;
    font-weight: 300;
    color: #666
}
.code-form .tagline {
    margin: 15px 0 20px
}
.code-form .controls input[type='number'] {
    display: block;
    height: 45px;
    margin: 0 auto 20px;
    text-align: center;
    font-size: 24px;
    line-height: normal;
    -moz-appearance: textfield
}
.code-form .controls input[type='number']::-webkit-inner-spin-button,
.code-form .controls input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}
.code-form .controls input[type='number'],
.code-form .google-updates--wrapper {
    width: 100%;
    max-width: 365px
}
.code-form .google-updates--wrapper {
    color: #999;
    font-size: 13px;
    display: block;
    margin: 0 auto
}
.code-form .google-updates--checkbox,
.code-form .google-updates--label {
    display: inline-block;
    vertical-align: top
}
.code-form .google-updates--checkbox {
    width: 20px;
    margin-top: -3px
}
.code-form .google-updates--label {
    text-align: left;
    width: 345px
}
.code-form .form-actions {
    margin-top: 20px
}
.code-form .btn-primary {
    font-size: 18px;
    width: 225px;
    height: 48px
}
.code-form .google-apps {
    position: relative;
    margin-top: 20px;
    height: 290px
}
.code-form .google-apps__icon,
.code-form .google-apps__laptop {
    position: absolute
}
.code-form .google-apps__laptop {
    left: 50%;
    margin-left: -191px;
    bottom: 0;
    z-index: 0
}
.code-form .google-apps__icon {
    z-index: 20;
    -webkit-animation: float 4s ease-in-out infinite alternate both;
    -moz-animation: float 4s ease-in-out infinite alternate both;
    -ms-animation: float 4s ease-in-out infinite alternate both;
    animation: float 4s ease-in-out infinite alternate both
}
.code-form .google-apps__icon--inverse {
    -webkit-animation: inverse-float 4s ease-in-out infinite alternate both;
    -moz-animation: inverse-float 4s ease-in-out infinite alternate both;
    -ms-animation: inverse-float 4s ease-in-out infinite alternate both;
    animation: inverse-float 4s ease-in-out infinite alternate both
}
.code-form .google-apps__icon--delayed {
    -webkit-animation-delay: 0.4s !important;
    -moz-animation-delay: 0.4s !important;
    -o-animation-delay: 0.4s !important;
    animation-delay: 0.4s !important
}
.code-form .google-apps__icon--delayed-2 {
    -webkit-animation-delay: 0.8s !important;
    -moz-animation-delay: 0.8s !important;
    -o-animation-delay: 0.8s !important;
    animation-delay: 0.8s !important
}
.code-form .google-apps__gmail {
    bottom: 65px;
    left: 50%;
    margin-left: -104px
}
.code-form .google-apps__calendar {
    bottom: 94px;
    left: 50%;
    margin-left: 91px
}
.code-form .google-apps__drive {
    bottom: 102px;
    left: 50%;
    margin-left: 9px
}
.code-form .google-apps__sheets {
    bottom: 103px;
    left: 50%;
    margin-left: -139px
}
.code-form .google-apps__slides {
    bottom: 155px;
    left: 50%;
    margin-left: -72px
}
.code-form .google-apps__vault {
    bottom: 194px;
    left: 50%;
    margin-left: 28px
}
.code-form .google-apps__docs {
    bottom: 199px;
    left: 50%;
    margin-left: -100px
}
.code-form .google-apps__laptop--floating {
    display: none;
    margin: 0 auto
}
.code-form .form-error-message {
    display: block;
    margin: 0 0 10px
}
@media (max-width: 480px) {
    .code-form {
        padding-top: 80px !important
    }
    .code-form .google-updates--label {
        width: 245px
    }
    .code-form .google-apps ul,
    .code-form .google-apps .google-apps__laptop {
        display: none
    }
    .code-form .google-apps .google-apps__laptop--floating {
        display: block
    }
}
.introjs-overlay {
    position: absolute;
    z-index: 999999;
    background-color: #000;
    opacity: 0;
    background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(100%, rgba(0, 0, 0, 0.9)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.9) 100%);
    background: radial-gradient(ellipse cover at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.9) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#66000000', endColorstr='#e6000000', GradientType=1);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out
}
.introjs-fixParent {
    z-index: auto !important;
    opacity: 1.0 !important;
    position: relative !important
}
.introjs-showElement {
    z-index: 9999999 !important
}
.introjs-relativePosition {
    position: relative
}
.introjs-helperLayer {
    position: absolute;
    z-index: 9999998
}
.introjs-helperNumberLayer {
    position: absolute;
    top: -16px;
    left: -16px;
    z-index: 9999999999 !important;
    padding: 2px;
    font-family: Arial, verdana, tahoma;
    font-size: 13px;
    font-weight: bold;
    color: white;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    background: #ff3019;
    background: -webkit-linear-gradient(top, #ff3019 0%, #cf0404 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff3019), color-stop(100%, #cf0404));
    background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
    background: -ms-linear-gradient(top, #ff3019 0%, #cf0404 100%);
    background: -o-linear-gradient(top, #ff3019 0%, #cf0404 100%);
    background: linear-gradient(to bottom, #ff3019 0%, #cf0404 100%);
    width: 20px;
    height: 20px;
    line-height: 20px;
    border: 3px solid white;
    border-radius: 50%;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0);
    filter: progid: DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4)
}
.introjs-arrow {
    border: 5px solid white;
    content: '';
    position: absolute
}
.introjs-arrow.top {
    top: -10px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: white;
    border-left-color: transparent
}
.introjs-arrow.right {
    right: -10px;
    top: 10px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: white
}
.introjs-arrow.bottom {
    bottom: -10px;
    border-top-color: white;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent
}
.introjs-arrow.left {
    left: -10px;
    top: 10px;
    border-top-color: transparent;
    border-right-color: white;
    border-bottom-color: transparent;
    border-left-color: transparent
}
.tour-tooltip {
    position: absolute;
    padding: 10px;
    background-color: white;
    min-width: 200px;
    max-width: 300px;
    border-radius: 3px;
    -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    -webkit-transition: opacity 0.218s ease-out;
    -moz-transition: opacity 0.218s ease-out;
    -ms-transition: opacity 0.218s ease-out;
    -o-transition: opacity 0.218s ease-out;
    transition: opacity 0.218s ease-out;
    font-size: 13px;
    line-height: 18px
}
.tour-buttons {
    margin: 10px 0 20px;
    text-align: right
}
.tour-button {
    color: #444;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
    line-height: 27px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    height: 27px;
    margin: 0px;
    min-width: 54px;
    *min-width: 70px;
    padding: 0 8px;
    position: relative;
    vertical-align: baseline;
    border: 1px solid #DCDCDC;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    outline: 0;
    background-clip: border-box;
    background-color: #f5f5f5;
    background-image: linear-gradient(top, #f5f5f5, #f1f1f1);
    background-origin: padding-box;
    background-attachment: scroll;
    -webkit-transition: all 0.218s;
    -webkit-transition-delay: 0s;
    -moz-transition: all 0.218s 0s;
    -o-transition: all 0.218s 0s;
    transition: all 0.218s 0s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: default
}
.tour-button.active,
.tour-button:active {
    background-color: #f6f6f6;
    background-image: linear-gradient(top, #f6f6f6, #f1f1f1);
    -webkit-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.1)
}
.tour-button:hover {
    background-color: #f8f8f8;
    background-image: linear-gradient(top, #f8f8f8, #f1f1f1);
    border: 1px solid #C6C6C6;
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
    color: #222;
    -webkit-transition: all 0s;
    -webkit-transition-delay: 0s;
    -moz-transition: all 0s 0s;
    -o-transition: all 0s 0s;
    transition: all 0s 0s
}
.tour-button:hover {
    text-decoration: none
}
.tour-button:visited {
    color: #222222
}
.tour-counter {
    position: absolute;
    font-size: 11px;
    right: 12px;
    bottom: 10px
}
.tour-tooltiptext {
    padding: 15px 0
}
.tour-button.nextbutton {
    -moz-border-radius-topleft: 0px;
    -webkit-border-top-left-radius: 0px;
    border-top-left-radius: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-bottom-left-radius: 0px;
    border-bottom-left-radius: 0px
}
.tour-button.prevbutton {
    -moz-border-radius-topright: 0px;
    -webkit-border-top-right-radius: 0px;
    border-top-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    -webkit-border-bottom-right-radius: 0px;
    border-bottom-right-radius: 0px
}
.tour-button-disabled {
    background: none;
    color: #b8b8b8;
    border: 1px solid #f3f3f3;
    border: 1px solid rgba(0, 0, 0, 0.05);
    cursor: default
}
.tour-button-disabled:hover {
    background: none;
    color: #b8b8b8;
    border: 1px solid #f3f3f3;
    border: 1px solid rgba(0, 0, 0, 0.05);
    cursor: default
}
.how ul {
    margin-top: 40px;
    margin-bottom: 40px
}
.how ul:before,
.how ul:after {
    content: '';
    display: table
}
.how ul:after {
    clear: both
}
.how ul:before,
.how ul:after {
    content: '';
    display: table
}
.how ul:after {
    clear: both
}
.how li {
    display: inline;
    float: left;
    width: 30.208333333333332%;
    margin: 0 1.5625%
}
.how a {
    color: #444;
    font-weight: bold
}
.how h3 {
    margin-bottom: 20px
}
@media (max-width: 480px) {
    .how li {
        float: none;
        display: block;
        width: auto;
        margin-bottom: 20px
    }
}















@media (max-width: 480px) and (min-width: 321px), (max-width: 568px) and (min-width: 321px) {
	.primary-nav nav ol {
		overflow: hidden;
		height: 100%;
	}
}

@media only screen and (min-width: 768px) {
	.primary-nav nav ol {
		display: block !important;
	}
}

@media only screen and (max-height: 384px) {
    .primary-nav nav ol {
        overflow: scroll;
        height: 270px;
    }
}

@media only screen and (max-height: 360px) {
    .primary-nav nav ol {        
        height: 250px;
    }
}


@media only screen and (max-height: 320px) {
    .primary-nav nav ol {        
        height: 200px;
    }
}   


/*SERVICIOS*/

.services .services-container {
	margin-top: 50px;
}
.services .services-col {
	width: 25%;
	float: left;
	text-align: center;
	font-size: 14px;
	font-family: 'Open Sans', Arial, sans-serif;
	font-weight: 300;
	color: #666;
	line-height: 1.5;
	/*padding: 0px 15px;*/

}

.services-col .list-service {
	margin-top: 20px;
	list-style: initial;
	padding-left: 40px;
}

.services-col .list-service li {
	margin-bottom: 10px;
	line-height: 1.5;
	margin-right: 10px;
}

.services-col .title {
	color: #8E999C;
	font-weight: 600;
	font-size: 20px;
	margin-top: 20px;
}

.services-col .icon1 {
	height: 120px;
	width: 120px;
	display: inline-block;
	background: #F3F3F3;
	border: 10px solid #EBEBEB;
	border-radius: 480px;
	-webkit-border-radius: 480px;
	-moz-border-radius: 480px;
	-o-border-radius: 480px;
	-ms-border-radius: 480px;
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
}

.services-col .icon1 img {
	margin-top: 35px;
}

.services-col:hover .icon1{
	border-color: #3366FF;
}

.services-col .icon2 {
	height: 120px;
	width: 120px;
	display: inline-block;
	background: #F3F3F3;
	border: 10px solid #EBEBEB;
	border-radius: 480px;
	-webkit-border-radius: 480px;
	-moz-border-radius: 480px;
	-o-border-radius: 480px;
	-ms-border-radius: 480px;
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
}

.services-col .icon2 img {
	margin-top: 35px;
}

.services-col:hover .icon2{
	border-color: #FF0000;
}

.services-col .icon3 {
	height: 120px;
	width: 120px;
	display: inline-block;
	background: #F3F3F3;
	border: 10px solid #EBEBEB;
	border-radius: 480px;
	-webkit-border-radius: 480px;
	-moz-border-radius: 480px;
	-o-border-radius: 480px;
	-ms-border-radius: 480px;
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
}

.services-col .icon3 img {
	margin-top: 35px;
}

.services-col:hover .icon3{
	border-color: #FFCC00;
}

.services-col .icon4 {
	height: 120px;
	width: 120px;
	display: inline-block;
	background: #F3F3F3;
	border: 10px solid #EBEBEB;
	border-radius: 480px;
	-webkit-border-radius: 480px;
	-moz-border-radius: 480px;
	-o-border-radius: 480px;
	-ms-border-radius: 480px;
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
}

.services-col .icon4 img {
	margin-top: 35px;
}

.services-col:hover .icon4{
	border-color: #009933;
}

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

	.services .services-container {
		margin-top: 0px;
	}


	.services .services-col {
		width: 50%;
		margin-top: 20px;
        height: 350px;
	}


}


@media only screen and (max-width: 600px) { 
    .services .services-col {
        height: 400px;
    }
}

@media only screen and (max-width: 480px) {
	.services .services-col {
		width: 100%;  
        height: 100%;       
	}
}


/*CONTACTO*/


.contact .contact-container {
	margin-top: 50px;
	margin-bottom: 20px;
}

.contact .contact-col {
	width: 45%;
	float: left;
	font-size: 16px;
	font-family: 'Open Sans', Arial, sans-serif;
	font-weight: 300;
	color: #666;
	line-height: 1.5;
	margin-bottom: 20px;
	padding: 0px 10px;
}

.contact-col p {
	font-size: 16px;
}

.contact-col .img-contact{
	max-width: 100%;
	max-height: 100%;
}

.contact-col .title {
	font-size: 20px;
}

.contact-col .control-group {
	margin-bottom: 10px;
}

.contact input,.contact textarea {
	font-family: 'Open Sans', Arial, sans-serif;
}

.contact input.inputerror, .contact textarea.inputerror {
	border-color: #de2d0f;
}

.contact .btn {
	font-family: 'Open Sans', Arial, sans-serif;
}

.contact .ajax-loader-confirm {
	display: inline;	
	font-size: 14px;	
	padding-left: 25px;
	background: url(images/ajax-loader.gif) no-repeat left center;	
	margin-left:0px;
}


.contact .alert {
	background-color: #f04124;
	border-color: #de2d0f;
	color: #fff;
	padding: 10px;
	font-size: 14px;	
	margin-bottom: 20px;
}

.contact .alert .errors-msg {
	margin-top: -15px;
}

.contact .alert .close {
	color: #FFF;
	cursor: pointer;
	text-align: right;
	font-size: 20px;
	margin-top: -15px;
}

.contact .success {
	background-color: #43ac6a;
	border-color: #3a945b;
	color: #fff;
	padding: 10px;
	font-size: 14px;
	width: 100%;
	margin-bottom: 20px;	
}

@media only screen and (max-width: 480px) {
	.contact .contact-col {
		width: 95%;		
	}

	.contact-col p {
		text-align: center;
	}

	.contact .alert, .contact .success {
		width: 95%;
	}

	.contact-col.form-contact {
		margin-top: 30px;
	}
}