/*
This is the style for Menu
 */

.home-menu.navbar,
.home-menu#wrapperHeader{
    background-color: transparent;
    box-shadow: none!important;
    transition: background-color 0.5s ease;
}
.home-menu.navbar .link_menu_position .menu_item_link a
{
    color: #fff;
    text-decoration: none;
}
.home-menu.navbar .link_menu_position .menu_item_link a:hover{
 text-decoration: none;
}
.home-menu.navbar .link_menu_position .menu_item_header:hover{
    background-color: transparent!important;
}
.home-menu#wrapperHeader #burger-buttonv2 .i123-filter{
    color: white;
}

[is-scroll].navbar,#wrapperHeader[is-scroll]{
    background-color: #fff;
    transition: background-color 0.5s ease;
}
[is-scroll].navbar,
[is-scroll]#wrapperHeader{
    background-color: white;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1)!important;
    transition: background-color 0.5s ease;
}
[is-scroll].navbar .link_menu_position .menu_item_link a{
    color: #4c4c4c;
    text-decoration:none;
}
[is-scroll].navbar .link_menu_position .menu_item_header:hover{
    background-color: #f4f4f4!important;
}
[is-scroll]#wrapperHeader #burger-buttonv2 .i123-filter{
    color: #4c4c4c;
}

@media (max-width: 970px){
    .home-menu.navbar .link_menu_position .menu_item_link a{
        color: #4c4c4c!important;
    }
    .home-mennu#wrapperHeader .push-toggle{
        background: transparent!important;
    }
}

@media (min-width: 992px) {
    .data-collection-step {
        display: flex;
        align-items: center;
    }
}

@media (min-width: 971px) {
    .menu_login_cta {
        box-shadow: inset 0 0 0 1px #fff;
        color:#fff;
    }

    #wrapperHeader[is-scroll] .menu_login_cta {
        box-shadow: inset 0 0 0 1px #0372f2;
        color:#0372f2;
    }

    .menu_login_cta:hover {
        background-color: #068ff6;
        box-shadow: inset 0 0 0 1px #068ff6;
    }

    #wrapperHeader[is-scroll] .menu_login_cta:hover {
        color:#fff;
    }
}

.video-container video {
    border: 1px solid #f5f5f6;
    max-width: 100%;
}

/**
Banner Section with sider
*/
html,body{
    font-family: 'Roboto', sans-serif;
}

.banner{
    margin-top: -89px!important;
    position: relative;
    width: 100%;
    height: 520px;
    background-color: #000;
}

.banner .banner__inner,
.banner .banner__inner .item {
    height: 100%;
    width: 100%;
    background: url('/site/resources/other/homepage/order-form-banner-v2.jpg?v=2') no-repeat bottom center;
    background-size: cover;
}

.banner .carousel-caption{
    top:50px;
    text-shadow: none;
}

.banner .banner__inner {
    overflow: inherit;
}

.banner .carousel-caption h1 {
    font-size: 60px;
    color: #fff;
    line-height: 1.08;
    font-weight: 400;
    text-align: center;
    margin: 82px -100px 0;

}

.banner .carousel-caption a{
    display: inline-block;
    margin: 40px  auto 0 auto;
    background-color: #0372f2;
    border: 0;
    border-radius: 4px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    padding: 13px 90px;
    font-weight: 300;
    font-family: 'Roboto', sans-serif;
    transition: background-color .5s;
    cursor: pointer;
}
.banner .carousel-caption a:hover {
    background-color: #068ff6;
}
/*
* Build section, publish and accomplish sections
 */

.build {
    padding: 90px 0 0 0;
    background-color: #fff;
}

.publish {
    padding-top: 130px;
}

.accomplish {
    margin-top: 65px;
    padding: 3% 0 0 0;
}

.build-heading {
    font-size: 36px;
    line-height: 46px;
    color: #4c4c4c;
    text-align: center;
    font-weight: normal;
}

@media (min-width: 768px) {
    .build-heading {
        padding: 0 10%;
    }
}

.build-animation{
    padding-top: 0;
}

.feature-number {
    font-size: 60px;
    font-weight: 500;
    color: #4c4c4c;
    margin: 0;
    position: relative;
    line-height: 78px;
}

.build-text .feature-number {
    padding-left: 34px;
}

.powerful-fb {
    margin-top: 50px;
}

.feature-number span {
    height: 3px;
    position: absolute;
    width: 90px;
    bottom: 0;
}

.build-text .feature-number span {
    left: 41px;
    background-color: #01a063;
}

.entry-content .feature-title {
    font-size: 30px;
    line-height: 40px;
    font-weight: normal;
    color: #4c4c4c;
    margin: 0;
}

.build-text .feature-title {
    padding: 18px 0 0 96px;
}

.build-text p, .publish p, .accomplish p{
    font-size: 16px;
    line-height: 26px;
    color:#4c4c4c;
    margin: 8px 0 26px 0;
}
.build-text p{
    padding-left: 96px;
}

.publish .feature-number {
    padding-left: 36px;
}

.publish .feature-number span {
    background-color: #ff9c00;
    left: 36px;
}
.publish .feature-title {
    padding: 27px 0 0 96px;
}

.publish p{
    padding-left: 96px;
}
.publish .publish-text{
    padding-bottom: 145px;
}

.accomplish .feature-number {
    padding-left: 35px;
}

.accomplish .feature-number span {
    background-color: #0372f2;
    left: 38px;
}

.accomplish .feature-title {
    padding: 15px 0 0 97px;
}

.accomplish p{
    padding-left: 100px;
}
.accomplish p:last-child{
    padding-bottom: 10px;
}

.publish .publish-container{
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
}

/*
 Two Columns Section
*/

.two-columns {
    padding: 7% 0 0 0;
}
.two-columns h5{
    font-size: 24px;
    line-height: 34px;
    color: #4c4c4c;
    font-weight: 400;
    margin-bottom: 20px;
}
.two-columns p{
    color: #4c4c4c;
    font-size: 16px;
    line-height:26px;
}
.two-columns .automate img{
    width: 383px;
    max-width: 100%;
}
.two-columns .automate p{
    margin-top: 19px;
}
.two-columns .payments img{
    width: 458px;
    margin: 37px 0 0 0;
    max-width: 100%;
}
.two-columns .payments p{
    margin-top: 30px;
 }
.nopadding {
    padding: 0!important;
}



/*
Right/left picture section
*/

.right-picture-section,
.left-picture-section
{
    overflow: hidden;
    position: relative;
}
.right-picture-section .container-fluid,
.left-picture-section .container-fluid
{
    max-width: 1170px;
}



/*
Industries section
 */

.industries {
    margin: 50px auto 100px;
    max-width:1918px;
}

.industries-heading {
    text-align: center;
    color: #4c4c4c;
    font-size: 36px;
    line-height: 46px;
    margin-bottom: 85px;
    font-weight: 400;
}

.industries .container-fluid {
    padding-left: 0;
    padding-right: 0;
}
.industries-images{
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    -ms-flex-direction: row;
}
.industries-images .image-container.card-1,
.industries-images .image-container.card-3,
.industries-images .image-container.card-5{
    height: 395px;
    width:100%;
    margin-right:1px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.industries-images .image-container.card-2,
.industries-images .image-container.card-4{
    height: 197px;
    width:100%;
    margin-right:1px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.industries-images .image-container:last-child{
    margin-right:0;
}

.industries-images .image-container.card-2 .ih-item.square:first-child,
.industries-images .image-container.card-4 .ih-item.square:first-child{
    margin-bottom: 1px;
}
.industries-images .img {
    left: 0;
    position: absolute;
    width: 100%;
    height:100%;
}

.card-1 .img{
    background: url(/site/resources/other/homepage/human-resources.jpg) no-repeat center/385px;
}

.card-2 .img.first{
    background:url(/site/resources/other/homepage/marketing-sales.jpg) no-repeat center/386px;
}

.card-2 .img.second{
    background:url(/site/resources/other/homepage/education.jpg) no-repeat center/386px;
}

.card-3 .img{
    background: url(/site/resources/other/homepage/healthcare.jpg) no-repeat center/385px;
}

.card-4 .img.first{
    background: url(/site/resources/other/homepage/ecommerce.jpg) no-repeat center/386px;
}

.card-4 .img.second{
    background: url(/site/resources/other/homepage/finance.jpg) no-repeat  center/386px;
}
.card-5 .img{
    background: url(/site/resources/other/homepage/event-organization.jpg) no-repeat center/385px;
}

@media
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx)
{
    .card-1 .img{
        background: url(/site/resources/other/homepage/human-resources2x.jpg) no-repeat center/385px;
    }

    .card-2 .img.first{
        background:url(/site/resources/other/homepage/marketing-sales2x.jpg) no-repeat center/386px;
    }

    .card-2 .img.second{
        background:url(/site/resources/other/homepage/education2x.jpg) no-repeat center/386px;
    }

    .card-3 .img{
        background: url(/site/resources/other/homepage/healthcare2x.jpg) no-repeat left/385px;
    }

    .card-4 .img.first{
        background: url(/site/resources/other/homepage/ecommerce2x.jpg) no-repeat center/386px;
    }

    .card-4 .img.second{
        background: url(/site/resources/other/homepage/finance.jpg) no-repeat  center/386px;
    }
    .card-5 .img{
        background: url(/site/resources/other/homepage/event-organization2x.jpg) no-repeat center/385px;
    }
}

.industries-images .image-container .text{
    font-size: 18px;
    line-height: 1.44;
    color: #ffffff;
    position: absolute;
    z-index:1;
    font-weight: 300;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.35s ease-in-out;
    cursor:pointer;
    opacity:1;
    visibility: visible;
}

@media  (max-width: 991px) {
    .video-container {
        margin-top: 30px;
    }

    .industries-images .image-container .text {
        padding: 0 40px;
    }

    .industries-images .image-container.card-4 .text {
        padding: 0 20px;
    }
    .industries {
        margin: 40px auto;
    }

    .industries-heading {
        margin-bottom: 40px;
    }
}

@media (min-width: 768px) {
    .industries-images .image-container a:hover .text {
        opacity:0;
        visibility: hidden ;
    }
}
.industries-images .image-container .vertical-center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
}




/*
Testimonials
 */

.testimonials{
    margin: 100px 0;
}
#testimonial{
    overflow: hidden;
    min-height: 375px;
    position: relative;
}
#testimonial .carousel-inner{
    width: 80%;
    margin: 0 auto;
}

#testimonial .carousel-inner .item{
    overflow: hidden;
}

.testimonial-slide{
    padding: 20px 0;
    text-align: center;
}
.testimonial-slide img {
    margin: 0 auto;
    position: relative;
}

.testimonial-slide p {
    color: rgba(76, 76, 76, 0.98);
    font-size: 30px;
    margin: 30px 0;
    line-height: 40px;
}

.testimonial-slide .testimonial-author {
    display: block;
    font-size: 16px;
    color: rgba(76, 76, 76, 0.98);
    font-weight: 300;
}

.testimonial-slide .testimonial-title {
    display: block;
    color: rgba(76, 76, 76, 0.98);
    font-size: 16px;
    font-weight: bold;
}

.testimonials a{
    font-size: 16px;
    line-height: 1.5;
    color: #0372f2;
    display: inline-block;
    float: right;
    margin-top:39px;
}
.testimonials a:hover,
.testimonials a:active{
    text-decoration: none;
    color: #0372f2;
}

.testimonials a span{
    display: inline-block;
    color:#0372f2;
    vertical-align: bottom;
    margin-left: 10px;
}

/*
Submission and sign up
 */

.home-submissions{
    padding: 0;
    background-image: url('/site/resources/other/homepage/sign-up-graphics.png?v=2');
    background-position: 51% 100%;
    background-repeat:no-repeat;
    margin-bottom: 150px;

}
.submission-sign{
    border-radius: 3px;
    background-color: #ffffff;
    box-shadow: 0 3px 40px 0 #e6e7e7;
    padding: 68px 0 80px;
    color: #4c4c4c;
}
.submissions p:first-child{
    font-size: 60px;
    text-align: center;
    line-height:70px;
    margin:0;
    font-weight: 300;
    font-family: "Roboto", sans-serif;

}
.submissions p:nth-child(2){
    font-size: 30px;
    text-align: center;
    font-weight: 400;
    margin: 16px 0 0 0;
    line-height: 40px;
}

@media (max-width: 640px) {
    .submissions p span {
        display: block;
    }
}

.signup{
    padding: 46px 30px 0 30px;
    text-align:center;
}
.signup form{
    width: 100%;
    float: left;
}
.signup form input{
    height: 50px;
    border-radius: 4px 0 0 4px;
    background-color: #ffffff;
    border: solid 1px #aaaaaa;
    font-size: 18px;
    color: #aaaaaa;
    font-weight: 400;
    width: calc(60% - 1px);
    float: left;
    font-family: 'Roboto', sans-serif;
    text-indent: 20px;
    line-height: normal;
}
.signup form button{
    background-color: #0372f2;
    box-shadow: 0 3px 40px 0 #e6e7e7;
    height: 50px;
    color: #fff;
    font-size: 18px;
    text-align: center;
    border: none;
    font-weight: 300;
    cursor: pointer;
    width: 40%;
    border-radius: 0 4px 4px 0;
    font-family: 'Roboto', sans-serif;
    float: left;

}
.signup form button:hover,
.signup form button:active{
    background-color: #068ff6;
    transition: all 0.5s;
}
::-webkit-input-placeholder {
    color: #aaaaaa;
}
::-moz-placeholder {
    color: #aaaaaa;
}
:-ms-input-placeholder {
    color: #aaaaaa; }
:-moz-placeholder {
    color: #aaaaaa;
}
.signup p{
    color: #aaaaaa;
    font-size: 12px;
    margin-top: 28px;
    margin-bottom: 0;
    display: inline-block;
}

.industries > .container-fluid .image-container a:focus p {
    outline: 1px solid #0372f2;
    transition: none;
}


/*
Media Queries
 */
@media only screen and (max-width: 1440px){
    .industries-images{
        max-height: inherit;
        height:auto;
    }
}

@media only screen and (max-width: 1024px){
    .home-submissions {
        padding: 35px 0;
        margin: 115px 0;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .signup {
        padding-left: 35px;
        padding-right: 35px;
    }
}

@media only screen and (max-width: 1199px){
    .build {
        padding: 80px 0 0 0;
    }
    .build-animation {
        padding-top: 40px;
    }

    .powerful-fb {
        margin-top: 40px;
    }

    .build-text .feature-title {
        padding: 17px 0 0 84px;
    }

    .build-text p {
        padding-left: 87px;
    }
}
@media only screen and (max-width: 991px){
    .banner .carousel-caption h1 {
        font-size: 48px;
        margin: 82px 0 0;
        padding: 0 20%;
    }

    .banner .carousel-caption{
        left: 0;
        right: 0;
    }

    .accomplish {
        margin-top: 20px;
    }

    .build,
    .publish,
    .accomplish,
    .two-columns{
        text-align: center;
    }
    .build-animation {
         padding-top: 0;
    }

    .build-heading {
        font-size: 24px;
        line-height: 1.42;
    }

    .entry-content .feature-number {
        font-size: 48px;
        display: inline-block;
        padding-left: 0;
    }

    .entry-content .feature-number span {
        left: -27px;
    }

    .entry-content .feature-title {
        font-size: 20px;
        line-height: 1.13;
        padding: 17px 0 28px 0;
    }

    .build-text p, .publish p, .accomplish p{
        padding-left:0;
        margin: 0;
    }
    .two-columns .automate img,
    .two-columns .payments img{
        margin: 0 auto;
    }

    #testimonial .carousel-inner{
        width: 95%;
    }
    .two-columns .payments{
        margin-top: 12%;
    }

    .build-text,.publish .publish-text{
        padding-bottom: 0;
    }

    .publish {
        padding: 20px 0 0 0;
    }

    .publish .publish-container {
        display: inline-block;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 767px){
    .build {
        padding: 50px 0 0 0;
    }
    .banner{
        max-height: 862px;
    }
    .banner .carousel-caption h1 {
        font-size: 48px;
        padding: 0 7%;
    }
    .banner .item{
        /*background-size: contain;*/
    }

    .industries-images{
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .industries-images .image-container.card-1{
        order:1;
        margin-bottom: 1px;
    }
    .industries-images .image-container.card-2{
        order:2;
    }
    .industries-images .image-container.card-3{
        order:4;
    }
    .industries-images .image-container.card-4{
        order:3;
    }
    .industries-images .image-container.card-5{
        order:5;
        margin-top: 1px;

    }
    .card-1 .img,
    .card-2 .img,
    .card-3 .img,
    .card-4 .img,
    .card-5 .img{
        background-size: cover;
    }
    .industries-images .image-container.card-1,
    .industries-images .image-container.card-3,
    .industries-images .image-container.card-5,
    .industries-images .image-container.card-2,
    .industries-images .image-container.card-4{
        width: 50%;
        -webkit-box-flex: 1;
        -webkit-flex: 1 0 49%;
        -ms-flex: 1 0 49%;
        flex: 1 0 49%;
    }

    .card-5 .img{
        background-position: top center;
    }

    .ih-item.square{
        width: 100%;
    }

    .industries-images .image-container .text{
        font-size: 16px;
    }
    .ih-item.square.effect .info h3,
    .ih-item.square.effect.bottom_to_top .info p{
        font-size: 14px;
    }

    .ih-item.square.effect .info {
        display: none;
    }

    .home-submissions {
        padding: 0;
        margin: 0;
    }
    .submissions p:first-child{
        font-size: 48px;
        line-height: 58px;
    }
    .submissions p:nth-child(2){
        font-size: 24px;
        line-height: 34px;
    }
    .signup{
        padding:30px 0 0 0;
    }
    .signup form{
        padding: 0 15px;
    }
    .submission-sign{
        padding: 40px 0 50px ;
    }
    .submissions p:nth-child(2){
        padding: 0;
    }

    .signup form input,
    .signup form button{
        border-radius: 3px;
        width: 100%;
        display: block;
        font-size: 16px;
    }

    .signup form input{
        margin-bottom: 10px;
        text-align: center;
        text-indent: 5px;
    }
    .testimonials {
        margin: 100px 0;
    }
    .testimonial-slide p{
        font-size: 24px;
    }

}


@media only screen and (max-width: 480px) {
    .banner .carousel-caption h1 {
        font-size: 30px;
        margin-top: 85px;
    }
    .testimonials a {
        width: 100%;
        float: none;
        text-align: center;
    }
    .banner .carousel-caption a {
        margin: 20px auto 0 auto;
    }
}

@media (max-width: 360px){
    .banner .banner__inner .img-container {
        bottom: -90px;
    }
}

@media (min-width: 481px) and (max-width: 767px){
    .testimonial-slide{
        width: 98%;
        padding: 5px;
    }
}

@media only screen and (max-width: 480px){
    .publish .publish-container
    {
        display: none;
    }

    .testimonial-slide{
        width: 98%;
        padding: 5px;
    }
    .testimonial-slide p {
        font-size: 18px;
        line-height: 28px;
    }
}

.mac {
    position: absolute;
    z-index: 2;
    bottom: -60px;
    width: 92%;
    margin-left: 4%;
    text-align: center;
}

.mac img {
    max-width: 100%;
}

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

    .mac {
        position: absolute;
        z-index: 2;
        bottom: -60px;
        width: 92%;
        margin-left: 4%;
        text-align: center;
    }
}

@media (min-width: 580px) and (max-width: 768px) {
    .mac {
        bottom: -80px;
    }
}

@media (min-width: 481px) {
    .banner {
        height: 857px;
    }

    .banner .carousel-caption a {
        margin-top: 60px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .banner .carousel-caption a {
        margin-top: 75px;
    }
}

@media (min-width: 768px) {
    .mac {
        position: absolute;
        z-index: 2;
        bottom: -90px;
        width: 100%;
        margin-left: 0;
        text-align: center;
    }
}