html,
body {
    height: 100%;
    font-size: 14px;
}

h1, h2, h3, h4, h5, h6, p {
    font-family: 'robotolight';
}
body {
    font-family: 'robotoregular';
    font-size: 18px;
}
body.modal-open nav,
body.modal-open header,
body.modal-open section,
body.modal-open footer {
    -webkit-filter: blur(5px);
       -moz-filter: blur(5px);
         -o-filter: blur(5px);
        -ms-filter: blur(5px);
            filter: blur(5px);
}
a {
    color: #00afec;
}
a:hover, a:focus {
    color: #00afec;
}
.form-group {
    position: relative;
}
.svg-stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}
.svg-stroke.w1{
    stroke-width: 1;
}
.svg-stroke.w2{
    stroke-width: 2;
}
.svg-fill {
    fill: currentColor;
}
.dropdown-menu {
    border: none;
    min-width: 145px;
}
.nav-up {
    top: -51px;
}

/* NAV
-------------------------------------------------- */
.navbar-brand > img,
.top-nav-collapse .navbar-brand > img{
    height: 25px;
    -webkit-transition: width .5s ease-in-out,height .5s ease-in-out;
       -moz-transition: width .5s ease-in-out,height .5s ease-in-out;
         -o-transition: width .5s ease-in-out,height .5s ease-in-out;
            transition: width .5s ease-in-out,height .5s ease-in-out;
}
.navbar-brand > svg,
.top-nav-collapse .navbar-brand > svg{
    width: 151px;
    height: 30px;

    -webkit-transition: width .5s ease-in-out,height .5s ease-in-out;
       -moz-transition: width .5s ease-in-out,height .5s ease-in-out;
         -o-transition: width .5s ease-in-out,height .5s ease-in-out;
            transition: width .5s ease-in-out,height .5s ease-in-out;
}
.navbar-brand > svg {
    margin-top: -3px;
}
.top-nav-collapse .navbar-brand > svg{
    margin-top: -2px;
}
/*
.top-nav-collapse .navbar-brand > img {
    height: 25px;
}
.top-nav-collapse .navbar-brand > svg {
    width: 151px;
    height: 30px;
}*/
.navbar-brand {
    padding: 12px 15px;
    -webkit-transition: padding .5s ease-in-out;
       -moz-transition: padding .5s ease-in-out;
         -o-transition: padding .5s ease-in-out;
            transition: padding .5s ease-in-out;
}
.top-nav-collapse .navbar-brand {
    padding: 12px 15px;
}
/*.navbar-inverse .navbar-collapse{
    background-color: #20242e;
}*/
@media(min-width: 992px) {
    .navbar {
        padding: 35px 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out, top .5s ease-in-out;
           -moz-transition: background .5s ease-in-out,padding .5s ease-in-out, top .5s ease-in-out;
             -o-transition: background .5s ease-in-out,padding .5s ease-in-out, top .5s ease-in-out;
                transition: background .5s ease-in-out,padding .5s ease-in-out, top .5s ease-in-out;
    }
    .top-nav-collapse {
        padding: 0;
    }
    .navbar-brand > img {
        height: 34px;
    }
    .navbar-brand > svg{
        width: 205px;
        height: 41px;
    }
    .navbar-brand {
        padding: 8px 15px;
    }
    /*.navbar-inverse .navbar-collapse{
        background-color: transparent;
    }*/
    .navbar-right {
        margin-right: 0;
    }
}
.navbar-toggle {
    margin-right: 0px;
}
.navbar-inverse .navbar-toggle,
.navbar-inverse .navbar-toggle:hover, 
.navbar-inverse .navbar-toggle:focus {
    background-color: #1d2029;
    border-color: #1d2029;
}
.navbar-inverse .navbar-toggle.collapsed,
.navbar-inverse .navbar-toggle.collapsed:hover, 
.navbar-inverse .navbar-toggle.collapsed:focus {
    background-color: #20242e;
    border-color: #20242e;
}
    
.navbar .language {
    padding: 14px 15px;
}
.navbar .language.pull-right {
    margin-right: -15px;
}
.navbar-inverse {
    background-color: transparent;
    border-color: transparent;
}
.navbar-inverse.top-nav-collapse {
    background-color: #20242e;
}
.navbar-nav > li > a {
    padding: 15px 25px;
    text-transform: uppercase;
}
.navbar-nav > li > .dropdown-menu {
    border-radius: 4px;
}
.navbar-nav > li > .dropdown-menu > li > a {
    color: #979eb3;
    padding: 12px 20px;
}
.dropdown-menu > li > a .ico {
    margin-right: 15px;
}
.navbar-inverse .navbar-nav > li > a {
    color: #fff;
}
.navbar-inverse .navbar-nav > li > a:hover, 
.navbar-inverse .navbar-nav > li > a:focus {
    color: #73c145;
}
.navbar-inverse .navbar-nav > li > a.btn {
    padding: 3px 15px;
    margin: 11px 20px;
    border-radius: 35px;
    box-shadow: none;
}
.navbar-inverse .navbar-nav > li > a.btn-menu {
    background-color: transparent;
    border-color: #77797d;
}
.navbar-inverse .navbar-nav > li > a.btn-menu:hover, 
.navbar-inverse .navbar-nav > li > a.btn-menu:focus {
    background-color: #73c145;
    border-color: #73c145;
    color: #fff;
}
@media(max-width: 991px) {
    .navbar-inverse {
        background-color: #20242e;
    }
    .navbar-nav {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .navbar-inverse .navbar-nav > li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        text-align: center;
    }
    .navbar-inverse .navbar-nav > li > a.btn {
        width: 170px;
        margin: 11px auto;
    }
    .navbar-inverse .navbar-collapse,
    .navbar-inverse .navbar-form {
        border-color: rgba(0, 0, 0, 0.1);
    }
    .navbar-collapse{
        box-shadow: none;
    }
    
}
.ico {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -1px;
}
.navbar-inverse .navbar-nav > .open > a, 
.navbar-inverse .navbar-nav > .open > a:hover, 
.navbar-inverse .navbar-nav > .open > a:focus {
    background-color: transparent;
    color: #fff;
}
@media (max-width: 767px) { }
@media (min-width: 768px) and (max-width: 991px) { }
@media (min-width: 992px) and (max-width: 1259px) {
    .navbar-nav > li > a {
        padding: 15px 12px;
    }
    .navbar-nav > li > a.btn.btn-menu {
        margin: 11px 12px;
    }
    .navbar-nav > li.flag > a {
        padding: 14px 12px;
        
    }
}
@media (min-width: 1260px) { }

/* HEADER
-------------------------------------------------- */
header {
    background-attachment: scroll;
    background-image: url(../images/banner/header.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    color: #fff;
    min-height: 570px;
    height: 76%;
    width: 100%;
    display: table;
}
header.sales {
    background-image: url("../images/use-cases/header-sales.jpg");
    background-position: center center;
}
header.marketing {
    background-image: url("../images/use-cases/header-marketing.jpg");
    background-position: center center;
}
header.education {
    background-image: url("../images/use-cases/header-education.jpg");
    background-position: center center;
}
header.hr {
    background-image: url("../images/use-cases/header-hr.jpg");
    background-position: center center;
}
header.enterprise {
    background-image: url("../images/use-cases/header-enterprise.jpg");
    background-position: center center;
}
/*
header {
    background: url(../images/banner/1260x570p.png) no-repeat top center;
    min-height: 570px;
    height: 76%;
    width: 100%;
    display: table;
}*/
.intro-welcome {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    position: relative;    
}
.intro-welcome {
    padding-top: 105px;
    padding-bottom: 40px;
}
.intro-welcome h1 {
    font-family: 'robotothin';
    color: #fff;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.intro-welcome h1.tag {
    font-family: 'robotoregular';
    text-transform: uppercase;
    color: #6ebe3b;
    font-size: 14px;
    margin: 0px;
}
.intro-welcome h1.tag.sales {
    color: #fb4420;
}
.intro-welcome h1.tag.marketing {
    color: #ff9d1d;
}
.intro-welcome h1.tag.education {
    color: #6ebe3b;
}
.intro-welcome h1.tag.hr {
    color: #16bcf1;
}
.intro-welcome h1.tag.enterprise {
    color: #2661e6;
}
.intro-welcome h1.tag svg {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    max-width: 26px;
    height: 26px;
    top: -1px;
    margin-right: 10px;
}
.intro-welcome h2 {
    font-family: 'robotothin';
    color: #fff;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.intro-welcome form {
    margin: 35px auto;
    max-width: 300px;
    max-width: 445px;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.intro-welcome p.help-block {
    margin-top: 10px;
    color: #a8a8b0;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.intro-welcome p {
    color: #f9f9f9;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.intro-welcome .input-lg,
.intro-welcome .input-group-lg > .form-control {
    height: 50px;
    border-radius: 25px;
    border-color: #f0f0f0;
    border-width: 0 0 2px;
    padding: 11px 15px 9px 25px;
    color: #c8ccd8;
    -webkit-transition: padding .3s ease-in-out, height .3s ease-in-out;
       -moz-transition: padding .3s ease-in-out, height .3s ease-in-out;
         -o-transition: padding .3s ease-in-out, height .3s ease-in-out;
            transition: padding .3s ease-in-out, height .3s ease-in-out;
}
.intro-welcome .form-control::-moz-placeholder {
    text-transform: uppercase;
    color: #c8ccd8;
}
.intro-welcome .form-control:-ms-input-placeholder {
    text-transform: uppercase;
    color: #c8ccd8;
}
.intro-welcome .form-control::-webkit-input-placeholder {
    text-transform: uppercase;
    color: #c8ccd8;
}
.intro-welcome .input-group .btn-lg, 
.intro-welcome .btn-group-lg > .btn.btn-free {
    border-radius: 25px;
    border-width: 0 0 2px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    padding: 13px 35px 11px;
    height: 50px;
    -webkit-transition: padding .3s ease-in-out, height .3s ease-in-out;
       -moz-transition: padding .3s ease-in-out, height .3s ease-in-out;
         -o-transition: padding .3s ease-in-out, height .3s ease-in-out;
            transition: padding .3s ease-in-out, height .3s ease-in-out;
}
.btn-free {
    background-color: #85d04c;
    background-image: -webkit-linear-gradient(top, #85d04c 0%, #79c541 100%);
    background-image:      -o-linear-gradient(top, #85d04c 0%, #79c541 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#85d04c), to(#79c541));
    background-image:         linear-gradient(to bottom, #85d04c 0%, #79c541 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff85d04c', endColorstr='#ff79c541', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background-repeat: repeat-x;
    border-color: #66a537;
    text-transform: uppercase;
    color: #fff;
}
.btn-free:hover,
.btn-free:focus {
    background-color: #79c541;
    background-position: 0 -15px;
    color: #fff;
}
.intro-welcome .btn-play {
    background: url(../images/play-lg.png) no-repeat 29px center transparent;
    border-color: #f9f9f9;
    border-radius: 100%;
    margin: 10px 0;
    position: relative;
    width: 75px;
    height: 75px;
    text-indent: -9999px;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.intro-welcome .btn-play:hover,
.intro-welcome.large .btn-play:hover{
    background-color: rgba(255, 255, 255, 0.2);
}
.intro-welcome .scroll-down {
    background: url(../images/arrow-down.png) no-repeat center center;
    display: block;
    margin-left: -10px;
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 10px;
    left: 50%;
}
.intro-welcome .sliding-vertical {
    display: inline-block;
    position: relative;
    width: 110px;
    height: 28px;
}
.intro-welcome .sliding-vertical .stress {
    background: url(../images/green-stress-lg.png) no-repeat center center;
    position: absolute;
    right: 0px;
    bottom: -15px;
    height: 8px;
    width: 100%;
}
.intro-welcome .sliding-vertical span{
    animation: topToBottom 8s linear infinite 0s;
    -ms-animation: topToBottom 8s linear infinite 0s;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-family: 'robotoregular';
}
.intro-welcome .sliding-vertical span:nth-child(2){
    animation-delay: 2s;
    -ms-animation-delay: 2s;
    -webkit-animation-delay: 2s;
}
.intro-welcome .sliding-vertical span:nth-child(3){
    animation-delay: 4s;
    -ms-animation-delay: 4s;
    -webkit-animation-delay: 4s;
}
.intro-welcome .sliding-vertical span:nth-child(4){
    animation-delay: 6s;
    -ms-animation-delay: 6s;
    -webkit-animation-delay: 6s;
}
/*topToBottom Animation*/
@-moz-keyframes topToBottom{
    0% { opacity: 0; }
    5% { opacity: 0; -moz-transform: translateY(-50px); }
    10% { opacity: 1; -moz-transform: translateY(0px); }
    25% { opacity: 1; -moz-transform: translateY(0px); }
    30% { opacity: 0; -moz-transform: translateY(50px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
    0% { opacity: 0; }
    5% { opacity: 0; -webkit-transform: translateY(-50px); }
    10% { opacity: 1; -webkit-transform: translateY(0px); }
    25% { opacity: 1; -webkit-transform: translateY(0px); }
    30% { opacity: 0; -webkit-transform: translateY(50px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
    0% { opacity: 0; }
    5% { opacity: 0; -ms-transform: translateY(-50px); }
    10% { opacity: 1; -ms-transform: translateY(0px); }
    25% { opacity: 1; -ms-transform: translateY(0px); }
    30% { opacity: 0; -ms-transform: translateY(50px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@media (max-width: 767px) {    
    .intro-welcome h1 {
        font-size: 48px;
    }
    .intro-welcome h2 {
        font-size: 20px;
    }
    .intro-welcome h2.title {
        font-size: 45px;
    }
    .intro-welcome h2 .sliding-vertical {
        height: 19px;
        width: 77px;
    }
    .intro-welcome h2 .sliding-vertical .stress {
        background: url(../images/green-stress-sm.png) no-repeat center center;
    }
    .intro-welcome form {}
    .intro-welcome p.help-block {
        font-size: 11px;
    }
    .intro-welcome p {
        font-size: 12px;
    }
    .intro-welcome .btn-play {
        background: url(../images/play-md.png) no-repeat 23px center transparent;
        width: 60px;
        height: 60px;
    }
    
    .intro-welcome.large h1 {
        font-size: 75px;
    }
    .intro-welcome.large h2 {
        font-size: 25px;
    }
    .intro-welcome.large h2.title {
        font-size: 50px;
    }
    .intro-welcome.large h2 .sliding-vertical {
        height: 23px;
        width: 92px;
    }
    .intro-welcome.large h2 .sliding-vertical .stress {
        background: url(../images/green-stress-md.png) no-repeat center center;
    }
    .intro-welcome.large form {}
    .intro-welcome.large p.help-block {
        font-size: 12px;
    }
    .intro-welcome.large p {
        font-size: 14px;
    }
    .intro-welcome.large .btn-play {}
    .intro-welcome .input-lg,
    .intro-welcome .input-group-lg > .form-control {
        font-size: 14px;
        padding: 7px 10px 5px 20px;
        height: 42px;
    }
    .intro-welcome .input-group .btn-lg, 
    .intro-welcome .btn-group-lg > .btn.btn-free {
        font-size: 14px;
        padding: 12px 20px 8px;
        height: 42px;
    }
}
/*@media (min-width: 421px) and (max-width: 767px) { }*/
/*@media (min-width: 768px) and (max-width: 1259px) {}*/
/*@media (min-width: 1260px) {}*/

@media (min-width: 768px) {
    .intro-welcome h1 {
        font-size: 75px;
    }
    .intro-welcome h2 {
        font-size: 25px;
    }
    .intro-welcome h2.title {
        font-size: 50px;
    }
    .intro-welcome h2 .sliding-vertical {
        height: 23px;
        width: 92px;
    }
    .intro-welcome h2 .sliding-vertical .stress {
        background: url(../images/green-stress-md.png) no-repeat center center;
    }
    .intro-welcome form {}
    .intro-welcome p.help-block {
        font-size: 12px;
    }
    .intro-welcome p {
        font-size: 14px;
    }
    .intro-welcome .btn-play {
        background: url(../images/play-md.png) no-repeat 23px center transparent;
        width: 60px;
        height: 60px;
    }
    
    .intro-welcome.large h1 {
        font-size: 90px;
    }
    .intro-welcome.large h2 {
        font-size: 30px;
    }
    .intro-welcome.large h2.title {
        font-size: 55px;
    }
    .intro-welcome.large h2 .sliding-vertical {
        height: 28px;
        width: 110px;
    }
    .intro-welcome.large h2 .sliding-vertical .stress {
        background: url(../images/green-stress-lg.png) no-repeat center center;
    }
    .intro-welcome.large form {}
    .intro-welcome.large p.help-block {
        font-size: 12px;
    }
    .intro-welcome.large p {
        font-size: 18px;
    }
    .intro-welcome.large .btn-play {
        background: url(../images/play-lg.png) no-repeat 29px center transparent;
        width: 75px;
        height: 75px;
    }
}
/* SECTION company-logos
-------------------------------------------------- */
.company-list {
    padding: 0;
    margin: 0;
}
.company-list li {
    padding: 0px;
    list-style: none;
}
.company-list li a {
    display: block;
    text-align: center;
    text-indent:-9999px;
    height: 180px;
    -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out; 
}
.company-list li a:hover {
    -webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.07);
            box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.07);
}
.company-list li a.logo-1 {
    background: url(../images/company/fitliner.png) no-repeat center center;
}
.company-list li a.logo-1:hover {
    background: url(../images/company/fitliner-hover.png) no-repeat center center;
}
.company-list li a.logo-2 {
    background: url(../images/company/uber.png) no-repeat center center;
}
.company-list li a.logo-2:hover {
    background: url(../images/company/uber-hover.png) no-repeat center center;
}
.company-list li a.logo-3 {
    background: url(../images/company/apple.png) no-repeat center center;
}
.company-list li a.logo-3:hover {
    background: url(../images/company/apple-hover.png) no-repeat center center;
}
.company-list li a.logo-4 {
    background: url(../images/company/yamaha.png) no-repeat center center;
}
.company-list li a.logo-4:hover {
    background: url(../images/company/yamaha-hover.png) no-repeat center center;
}
.company-list li a.logo-5 {
    background: url(../images/company/siemens.png) no-repeat center center;
}
.company-list li a.logo-5:hover {
    background: url(../images/company/siemens-hover.png) no-repeat center center;
}
.company-list li a.logo-6 {
    background: url(../images/company/kaplan.png) no-repeat center center;
}
.company-list li a.logo-6:hover {
    background: url(../images/company/kaplan-hover.png) no-repeat center center;
}

/* SECTION features
-------------------------------------------------- */
section#features {
    background: url(../images/features/bg-features.jpg) repeat-x top center;
    overflow: hidden;
}
section#features .row:first-child {
    margin-bottom: 0px;
}
section#features .row {
    margin-bottom: 165px;
}
section#features h2 {
    margin-top: 80px; 
    font-size: 45px;
    font-size: 2.8125rem;
    color: #505b7c;
}
section#features h3 {
    margin-top: 35px;
    margin-bottom: 115px;
    font-size: 28px;
    font-size: 1.75rem;
    color: #979eb3; 
}
section#features h4 {
    margin-top: 50px;
    margin-bottom: 32px;
    font-size: 40px;
    font-size: 2.5rem;
    color: #505b7c;
}
section#features p {
    line-height: 1.5;
    font-size: 18px;
    font-size: 1.125rem;
    color: #979eb3;
}
section#features img.pull-left{
    /*margin-left: -66px;*/
}
.tile-group {
    display: block;
    padding: 0;
    border-right: 1px solid #eff0f3;
    border-bottom: 1px solid #eff0f3;
    margin: 30px 0px;
}
@media (max-width: 991px) {
    .tile-group {
        margin: 30px auto; 
    }
}
.tile-group.tile-size {
    width: 330px;    
}
.tile-group li {
    display: table;
    padding: 0;
    list-style: none;
    vertical-align: middle;
    border-left: 1px solid #eff0f3;
    border-top: 1px solid #eff0f3;
    height: 162px;
}
.tile-group li.footer{
    height: 40px;
}

.tile-group li a {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 16px;
    font-family: 'robotolight';
    /*position: absolute;
    width: 100%;
    height: 100%;
    left:0%;
    top:0%;
    z-index: 999;*/
}
.tile-group li a.tile {
    padding: 0px 15px;
    color: #979eb3;
    text-decoration: none;
    position: relative;
    /*-webkit-transition: background 300ms, box-shadow 500ms;
            t ransition: background 300ms, box-shadow 500ms;*/
    -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
    z-index: 1;
}
.tile-group li a.tile:hover {
    background: #6ebe3b;
    /*border: 5px solid #6ebe3b;*/
    color: #fff;
    -webkit-box-shadow: 0px 7px 29px 0px rgba(192, 192, 216, 0.64);
            box-shadow: 0px 7px 29px 0px rgba(192, 192, 216, 0.64);
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05);
    z-index: 1;
    /*width: 108%;
    height: 108%;
    left: -4%;
    top: -4%;*/
    /*outline: 10px solid #6ebe3b;*/
    /*border: 5px solid #6ebe3b;*/
}
.tile-group li a.tile svg {
    display: block;
    margin: 20px auto 5px;
    max-width: 100px;
    height: 40px;
    color: #6ebe3b;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.tile-group li a.tile:hover svg{
    color: #fff;
}
.tile-group li a.tile img {
    display: block;
    margin: 20px auto 5px;
}
.tile-group li a.tile span.title {
    display: table;
    width: 100%;
    height: 70px;
}
.tile-group li a.tile span.title span {
    display: table-cell;
    vertical-align: middle;
}
/* SECTION use-cases
-------------------------------------------------- */
section#use-cases {
    background-color: #f4f6fb;
    padding-bottom: 70px;
}
section#use-cases h2 {
    margin-top: 80px;
    font-size: 45px;
    font-size: 2.8125rem;
    color: #505b7c;
}

section#use-cases h3 {
    margin-top: 30px;
    font-size: 28px;
    font-size: 1.75rem;
    color: #979eb3;    
}
.use-case-group {
    margin-top: 40px;
    padding: 0;
}
.use-case-group li {
    padding: 0px;
    list-style: none;
}
.use-case-group li a {
    border: 1px solid transparent;
    display: block;
    padding: 32px 15px;
    text-align: center;
    min-height: 405px;
    text-decoration: none;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.use-case-group li a:hover {
    background: #fff;
    border-color: #f2f2f3;
    -webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.08);
            box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.08);
}
.use-case-group li a h4 {
    font-size: 28px;
    font-size: 1.75rem;
    color: #5f677f;
    margin: 27px 0px 21px;
}
.use-case-group li a:hover h4 {
    color: #505b7c;
}
.use-case-group li a p {
    font-size: 18px;
    font-size: 1.125rem;
    color: #979eb3;
    line-height: 1.5;
    margin: 0px 0px 5px;
}

.use-case-group li a .bg-circle {
    position: relative;
    width: 144px;
    height: 144px;
    margin: auto;
    overflow: hidden;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}
.use-case-group li a .bg-circle .curtain {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.use-case-group li a:hover .bg-circle .curtain {
    opacity: 0;
    filter: alpha(opacity=0);
}
.use-case-group li a .bg-circle.sales .curtain {
    background-color: #ff4a26;
    background-image: -webkit-linear-gradient(top, #ff4a26 0%, #f9411d 100%);
    background-image:      -o-linear-gradient(top, #ff4a26 0%, #f9411d 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ff4a26), to(#f9411d));
    background-image:         linear-gradient(to bottom, #ff4a26 0%, #f9411d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff4a26', endColorstr='#fff9411d', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background-repeat: repeat-x;
}
.use-case-group li a .bg-circle.sales {
    background: url(../images/business/sales.png) no-repeat center center;
}
.use-case-group li a .bg-circle.marketing .curtain {
    background-color: #ffa21d;
    background-image: -webkit-linear-gradient(top, #ffa21d 0%, #ff971d 100%);
    background-image:      -o-linear-gradient(top, #ffa21d 0%, #ff971d 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffa21d), to(#ff971d));
    background-image:         linear-gradient(to bottom, #ffa21d 0%, #ff971d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffa21d', endColorstr='#ffff971d', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background-repeat: repeat-x;
}
.use-case-group li a .bg-circle.marketing {
    background: url(../images/business/marketing.png) no-repeat center center;
}
.use-case-group li a .bg-circle.education .curtain {
    background-color: #74c640;
    background-image: -webkit-linear-gradient(top, #74c640 0%, #6ebe3b 100%);
    background-image:      -o-linear-gradient(top, #74c640 0%, #6ebe3b 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#74c640), to(#6ebe3b));
    background-image:         linear-gradient(to bottom, #74c640 0%, #6ebe3b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff74c640', endColorstr='#ff6ebe3b', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background-repeat: repeat-x;
}
.use-case-group li a .bg-circle.education {
    background: url(../images/business/education.png) no-repeat center center;
}
.use-case-group li a .bg-circle.hr .curtain {
    background-color: #18c1f7;
    background-image: -webkit-linear-gradient(top, #18c1f7 0%, #13b7ec 100%);
    background-image:      -o-linear-gradient(top, #18c1f7 0%, #13b7ec 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#18c1f7), to(#13b7ec));
    background-image:         linear-gradient(to bottom, #18c1f7 0%, #13b7ec 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff18c1f7', endColorstr='#ff13b7ec', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background-repeat: repeat-x;
}
.use-case-group li a .bg-circle.hr {
    background: url(../images/business/hr.png) no-repeat center center;
}
.use-case-group li a .bg-circle.enterprise .curtain {
    background-color: #2c67ed;
    background-image: -webkit-linear-gradient(top, #2c67ed 0%, #1f5ade 100%);
    background-image:      -o-linear-gradient(top, #2c67ed 0%, #1f5ade 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#2c67ed), to(#1f5ade));
    background-image:         linear-gradient(to bottom, #2c67ed 0%, #1f5ade 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2c67ed', endColorstr='#ff1f5ade', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background-repeat: repeat-x;
}
.use-case-group li a .bg-circle.enterprise {
    background: url(../images/business/enterprise.png) no-repeat center center;
}
.use-case-group li a .bg-circle svg,
.use-case-group li a .bg-circle i {
    position: absolute;
    display: block;
    width: 60px;
    height: 60px;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -30px;
    color: #fff;
}
.use-case-group li a .bg-circle i.icon-sales {
    background: url(../images/business/icon-sales.png) no-repeat center center;
}
.use-case-group li a .bg-circle i.icon-marketing {
    background: url(../images/business/icon-marketing.png) no-repeat center center;
}
.use-case-group li a .bg-circle i.icon-education {
    background: url(../images/business/icon-education.png) no-repeat center center;
}
.use-case-group li a .bg-circle i.icon-hr {
    background: url(../images/business/icon-hr.png) no-repeat center center;
}
.use-case-group li a .bg-circle i.icon-enterprise {
    background: url(../images/business/icon-enterprise.png) no-repeat center center;
}

/* SECTION integrations
-------------------------------------------------- */
section#integrations {
    background-color: #fbfcfe;
    /*background-attachment: scroll;
    background-image: url(../images/infographics/integrations-lg-bg5.png);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    color: #fff;
    min-height: 500px;
    height: 100%;*/
}
section#integrations .title {
    position: absolute;
    top: 0px;
    left: 20%;
    right: 20%;
    z-index: 10;
}
@media (max-width: 991px) {
    section#integrations .title {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
    }
}
section#integrations h2 {
    color: #505b7c;
    font-size: 45px;
    font-size: 2.8125rem;
    margin-top: 80px;
    margin-bottom: 0px;
}
section#integrations h3 {
    margin-top: 30px;
    font-size: 28px;
    font-size: 1.75rem;
    color: #979eb3;
}
.all-integrations {
    margin-top: 45px;
    font-size: 18px;
    font-size: 1.125rem;
}
/*
section#integrations {
    position: relative;
    height: 1102px;
}
section#integrations img{
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 1102px;
}*/
.infographics {
    position: relative;
    margin: 0px auto;
}
@media (max-width: 991px) {
    .infographics {
        height: 800px;
        margin-top: 40px;
        margin-bottom: 50px;
    }
}
.marker-big,
.marker {
    background-color: #fff;
    position: absolute;
    display: block;
    width: 100px;
    height: 100px;
    -webkit-box-shadow: 0px 0px 21px 0px rgba(49, 91, 132, 0.07);
            box-shadow: 0px 0px 21px 0px rgba(49, 91, 132, 0.07);
    -webkit-border-radius: 100%;
       -moz-border-radius: 100%;
            border-radius: 100%;
       -webkit-transition: all .3s ease-in-out;
               transition: all .3s ease-in-out;
}
.marker-big .logo,
.marker .logo {
    position: absolute;
    top: 50%;
    left: 50%;
}
/* clickmeeting */
.marker-big.clickmeeting{
    width: 200px;
    height: 200px;
    top: 45%;
    left: 50%;
    margin: 0px 0 0 -100px;
}
.marker-big.clickmeeting:hover {
    background-color: #6ebe3b;
}
.marker-big.clickmeeting .logo.logo-clickmeeting {
    background: url(../images/infographics/clickmeeting.png) no-repeat center center;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
}
.marker-big.clickmeeting:hover .logo.logo-clickmeeting {
    background: url(../images/infographics/clickmeeting-hover.png) no-repeat center center;
}

/* slack */
.marker.slack {
    top: 18%;
    left: 9%;
}
.marker.slack:hover {
    background-color: #78d4b6;
}
.marker.slack .logo.logo-slack {
    background: url(../images/infographics/slack.png) no-repeat center center;
    width: 74px;
    height: 22px;
    margin: -11px 0 0 -37px;
}
.marker.slack:hover .logo.logo-slack {
    background: url(../images/infographics/slack-hover.png) no-repeat center center;
}
/* twitter */
.marker.twitter {
    top: 45%;
    left: 17%;
}
.marker.twitter:hover {
    background-color: #55acee;
}
.marker.twitter .logo.logo-twitter {
    background: url(../images/infographics/twitter.png) no-repeat center center;
    width: 40px;
    height: 42px;
    margin: -21px 0 0 -20px;
}
.marker.twitter:hover .logo.logo-twitter {
    background: url(../images/infographics/twitter-hover.png) no-repeat center center;
}
/* linkedin */
.marker.linkedin {
    top: 63%;
    left: 1%;
}
.marker.linkedin:hover {
    background-color: #007cb4;
}
.marker.linkedin .logo.logo-linkedin {
    background: url(../images/infographics/linkedin.png) no-repeat center center;
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
}
.marker.linkedin:hover .logo.logo-linkedin {
    background: url(../images/infographics/linkedin-hover.png) no-repeat center center;
}
/* office */
.marker.office {
    top: 72%;
    left: 26%;
}
.marker.office:hover {
    background-color: #e8402e;
}
.marker.office .logo.logo-office {
    background: url(../images/infographics/office.png) no-repeat center center;
    width: 74px;
    height: 24px;
    margin: -12px 0 0 -37px;
}
.marker.office:hover .logo.logo-office {
    background: url(../images/infographics/office-hover.png) no-repeat center center;
}
/* getresponse */
.marker.getresponse {
    top: 77%;
    left: 46%;
}
.marker.getresponse:hover {
    background-color: #00afec;
}
.marker.getresponse .logo.logo-getresponse {
    background: url(../images/infographics/getresponse.png) no-repeat center center;
    width: 44px;
    height: 28px;
    margin: -14px 0 0 -22px;
}
.marker.getresponse:hover .logo.logo-getresponse {
    background: url(../images/infographics/getresponse-hover.png) no-repeat center center;
}
/* facebook */
.marker.facebook {
    top: 81%;
    right: 26%;
}
.marker.facebook:hover {
    background-color: #3e5c98;
}
.marker.facebook .logo.logo-facebook {
    background: url(../images/infographics/facebook.png) no-repeat center center;
    width: 20px;
    height: 38px;
    margin: -19px 0 0 -10px;
}
.marker.facebook:hover .logo.logo-facebook {
    background: url(../images/infographics/facebook-hover.png) no-repeat center center;
}
/* hubspot */
.marker.hubspot {
    top: 63%;
    right: 22%;
}
.marker.hubspot:hover {
    background-color: #f17631;
}
.marker.hubspot .logo.logo-hubspot {
    background: url(../images/infographics/hubspot.png) no-repeat center center;
    width: 70px;
    height: 20px;
    margin: -10px 0 0 -35px;
}
.marker.hubspot:hover .logo.logo-hubspot {
    background: url(../images/infographics/hubspot-hover.png) no-repeat center center;
}
/* dropbox */
.marker.dropbox {
    top: 54%;
    right: 1%;
}
.marker.dropbox:hover {
    background-color: #1480e1;
}
.marker.dropbox .logo.logo-dropbox {
    background: url(../images/infographics/dropbox.png) no-repeat center center;
    width: 46px;
    height: 44px;
    margin: -22px 0 0 -23px;
}
.marker.dropbox:hover .logo.logo-dropbox {
    background: url(../images/infographics/dropbox-hover.png) no-repeat center center;
}
/* youtube */
.marker.youtube {
    top: 36%;
    right: 17%;
}
.marker.youtube:hover {
    background-color: #dd3030;
}
.marker.youtube .logo.logo-youtube {
    background: url(../images/infographics/youtube.png) no-repeat center center;
    width: 70px;
    height: 30px;
    margin: -15px 0 0 -35px;
}
.marker.youtube:hover .logo.logo-youtube {
    background: url(../images/infographics/youtube-hover.png) no-repeat center center;
}
/* google */
.marker.google {
    top: 9%;
    right: 9%;
}
.marker.google:hover {
    background-color: #e9463d;
}
.marker.google .logo.logo-google {
    background: url(../images/infographics/google.png) no-repeat center center;
    width: 40px;
    height: 42px;
    margin: -21px 0 0 -20px;
}
.marker.google:hover .logo.logo-google {
    background: url(../images/infographics/google-hover.png) no-repeat center center;
}

@media (max-width: 499px) {
    .marker-big.clickmeeting {
        top: 0;
        left: 50%;
    }
    .marker.slack {
        top: 25%;
        left: 12%;
    }
    .marker.twitter {
        top: 40%;
        left: 12%;
    }
    .marker.linkedin {
        top: 55%;
        left: 12%;
    }
    .marker.office {
        top: 70%;
        left: 12%;
    }
    .marker.getresponse {
        top: 85%;
        left: 12% ;
     }
    .marker.facebook {
        top: 25%;
        right: 12%;
    }
    .marker.hubspot {
        top: 40%;
        right: 12%;
    }
    .marker.dropbox {
        top: 55%;
        right: 12%;
    }
    .marker.youtube {
        top: 70%;
        right: 12%;
    }
    .marker.google {
        top: 85%;
        right: 12%;
    }
}
@media (min-width: 500px) and (max-width: 767px) {
    .marker-big.clickmeeting {
        top: 0;
        left: 50%;
    }
    .marker.slack {
        top: 25%;
        left: 25%;
    }
    .marker.twitter {
        top: 40%;
        left: 25%;
    }
    .marker.linkedin {
        top: 55%;
        left: 25%;
    }
    .marker.office {
        top: 70%;
        left: 25%;
    }
    .marker.getresponse {
        top: 85%;
        left: 25% ;
     }
    .marker.facebook {
        top: 25%;
        right: 25%;
    }
    .marker.hubspot {
        top: 40%;
        right: 25%;
    }
    .marker.dropbox {
        top: 55%;
        right: 25%;
    }
    .marker.youtube {
        top: 70%;
        right: 25%;
    }
    .marker.google {
        top: 85%;
        right: 25%;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .marker-big.clickmeeting {
        top: 0;
        left: 50%;
    }
    .marker.slack {
        top: 25%;
        left: 30%;
    }
    .marker.twitter {
        top: 40%;
        left: 30%;
    }
    .marker.linkedin {
        top: 55%;
        left: 30%;
    }
    .marker.office {
        top: 70%;
        left: 30%;
    }
    .marker.getresponse {
        top: 85%;
        left: 30% ;
     }
    .marker.facebook {
        top: 25%;
        right: 30%;
    }
    .marker.hubspot {
        top: 40%;
        right: 30%;
    }
    .marker.dropbox {
        top: 55%;
        right: 30%;
    }
    .marker.youtube {
        top: 70%;
        right: 30%;
    }
    .marker.google {
        top: 85%;
        right: 30%;
    }
}
/*
@media (min-width: 768px) and (max-width: 991px) {
    .marker-big.clickmeeting{
        top: 40%;
        left: 50%;
    }
    .marker.slack {
        top: 18%;
        left: 9%;
    }
    .marker.twitter {
        top: 42.5%;
        left: 17%;
    }
    .marker.linkedin {
        top: 60%;
        left: 1%;
    }
    .marker.office {
        top: 72%;
        left: 21%;
    }
    .marker.getresponse {
        top: 80%;
        left: 43%;
     }
    .marker.facebook {
        top: 81%;
        right: 22%;
    }
    .marker.hubspot {
        top: 63%;
        right: 15%;
    }
    .marker.dropbox {
        top: 51%;
        right: 1%;
    }
    .marker.youtube {
        top: 35%;
        right: 17%;
    }
    .marker.google {
        top: 9%;
        right: 9%;
    }
}*/
@media (min-width: 992px) and (max-width: 1259px) {
    .marker-big.clickmeeting{
        top: 43%;
        left: 50%;
    }
    .marker.slack {
        top: 18%;
        left: 9%;
    }
    .marker.twitter {
        top: 44%;
        left: 17%;
    }
    .marker.linkedin {
        top: 62%;
        left: 1%;
    }
    .marker.office {
        top: 72%;
        left: 24%;
    }
    .marker.getresponse {
        top: 77%;
        left: 45.5%;
     }
    .marker.facebook {
        top: 81%;
        right: 24%;
    }
    .marker.hubspot {
        top: 63%;
        right: 18%;
    }
    .marker.dropbox {
        top: 53%;
        right: 1%;
    }
    .marker.youtube {
        top: 35%;
        right: 17%;
    }
    .marker.google {
        top: 9%;
        right: 9%;
    }
}
@media (min-width: 1260px) { }

/*
#integrations-mobile .marker-big.clickmeeting {
    border: 1px solid orange;
    position: relative;
    margin: 0;
    left: auto;
    top: auto;
}
#integrations-mobile .marker-big,
#integrations-mobile .marker {
    border: 1px solid orange;
    position: relative;
    margin: 0;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
}*/

/* SECTION why-clickmeeting
-------------------------------------------------- */
section#why-clickmeeting {
    background: url(../images/banner/why.jpg) no-repeat center top #22262f;
    padding-bottom: 82px;
    color: #fff;
}
section#why-clickmeeting h2 {
    margin-top: 75px;
    margin-bottom: 0px;
    font-size: 45px;
    font-size: 2.8125rem;
    color: #fff;
}
section#why-clickmeeting h3 {
    margin-top: 30px;
    font-size: 28px;
    font-size: 1.75rem;
    color: #959eb1;
}
section#why-clickmeeting h3 span {
    color: #fff;
}
section#why-clickmeeting h4 {
    margin: 10px 0px 80px;
    font-size: 28px;
    font-size: 1.75rem;
    color: #959eb1;
}
section#why-clickmeeting h4 a {
    display: inline-block;
}
section#why-clickmeeting h5 {
    font-size: 18px;
    font-size: 1.125rem;
}
section#why-clickmeeting blockquote {
    background: url(../images/quotation-mark.png) no-repeat 53px 4px;
    border: none;
    padding: 10px 20px 10px 85px;
}
section#why-clickmeeting blockquote p {
    line-height: 1.5;
    font-style: italic;
    font-size: 17px;
    font-size: 1.0625rem;
}
section#why-clickmeeting blockquote small::before {
    content: "";
}
section#why-clickmeeting blockquote small {
    margin-top: 45px;
    font-family: 'robotolight';
    font-size: 16px;
    font-size: 1rem;
    color: #fff;
}
section#why-clickmeeting blockquote small cite {
    color: #6ebe3b;
}
.block-circle-counter {
    margin: 40px 0px;
}
.circle-counter {
    background-color: rgba(34, 38, 47, 0.4);
    border: 1px solid #6ebe3b;
    padding: 15px;
    width: 304px;
    height: 304px;
    margin: 40px auto;
    -webkit-box-shadow: inset 0px 0px 0px 10px rgba(0, 0, 0, 0.1);
            box-shadow: inset 0px 0px 0px 10px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}
section#why-clickmeeting .circle-counter h4.counter {
    margin-top: 82px;
    margin-bottom: 10px;
    font-size: 50px;
    color: #6ebe3b;
    font-family: 'robotothin';
}
.circle-counter p.info {
    font-size: 18px;
    margin: 0px 15px;
}
.circle-counter p.info-more {
    margin: 0px 50px;
    font-size: 12px;
    color: #6a7486;
}
/* FOOTER
-------------------------------------------------- */
footer {
    background: #fcfdfe;
    padding: 80px 0px 0px;
}
footer h3 {
    font-family: 'robotoregular';
    font-size: 16px;
    color: #505b7c;
    margin-bottom: 25px;
}
footer .list-unstyled {
    font-family: 'robotolight';
    margin-bottom: 30px;
}
footer .list-unstyled > li {
    margin: 18px 0px;
}
footer .list-unstyled > li a {
    color: #979eb3; 
}
footer .list-unstyled > li a:hover,
footer .list-unstyled > li a:focus {
    text-decoration: none;
    color: #00afec;
}


@media (max-width: 767px) { }
@media (min-width: 768px) and (max-width: 991px) {
    .block-mobile,
    .block-social {
        position: relative;
        min-height: 1px;
        width: 50%;
        float: left;
    }
    .block-social {
        padding-left: 15px;
    }
}

.btn-circle {
    position: relative;
    height: 45px;
    width: 45px;
    border-radius: 100%;
}
.btn.btn-circle {
    box-shadow: none;
}
.btn-facebook {
    background-color: #3e5c98;
}
.btn-facebook:hover {
    background-color: #385389;
}
.btn-twitter {
    background-color: #55acee;
}
.btn-twitter:hover {
    background-color: #4c9ad6;
}
.btn-linkedin {
    background-color: #007cb4;
}
.btn-linkedin:hover {
    background-color: #006fa2;
}
.btn-google-plus {
    background-color: #dc4e41;
}
.btn-google-plus:hover {
    background-color: #c6463a;
}
.btn-youtube {
    background-color: #d12827;
}
.btn-youtube:hover {
    background-color: #bc2423;
}
.btn-circle svg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0px 0px -18px;
    color: #fff;
}
.btn-circle .social {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 26px;
    margin: -13px 0px 0px -11px;
}
.social.social-facebook {
    background: url(../images/social/facebook.png) no-repeat center center;
}
.social.social-twitter {
    background: url(../images/social/twitter.png) no-repeat center center;
}
.social.social-linkedin {
    background: url(../images/social/twitter.png) no-repeat center center;
}
.social.social-google-plus {
    background: url(../images/social/twitter.png) no-repeat center center;
}
.social.social-youtube {
    background: url(../images/social/youtube.png) no-repeat center center;
}
.btn.btn-mobile-app {
    background: #b8bcc8;
    text-align: left;
    font-size: 9px;
    padding: 8px 10px 8px 35px;
    line-height: 1.1;
    color: #fff;
    position: relative;
    margin: 5px 15px 5px 0;
    box-shadow: none;
    text-transform: uppercase;
    border-radius: 4px;
}
.btn.btn-mobile-app:hover {
    background-color: #a5a9b4;
    color: #fff;
}
.btn.btn-mobile-app b {
    display: block;
}


.btn-mobile-app .mobile {
    position: absolute;
    top: 50%;
    left: 7px;
    width: 20px;
    height: 22px;
    margin-top: -11px 
}
.mobile.mobile-app-store {
    background: url(../../images/apple.png) no-repeat center center;
}
.mobile.mobile-google-play {
    background: url(../../images/play.png) no-repeat center center;
}
.footer-copyright {
    padding: 73px 0px;
}
.logo-footer {
    float: left;
}
.logo-footer > a {
    padding: 12px 15px;
    margin-left: -15px;
    float: left;
    height: 50px;
    line-height: 20px;
}
.logo-footer > a > img {
    display: block;
}
.logo-footer > a > svg {
    width: 142px;
    height: 30px;
    margin-top: -1px;
}
.footer-copyright p {
    padding: 15px 0px;
    margin: 0px;
    color: #979eb3;
}
.lang-footer {
    padding: 8px 15px;
    margin-right: -15px;
    float: right;
}
.lang-footer .btn.btn-language {
    border: 1px solid #e1e4ea;
    border-radius: 35px;
    padding: 6px 15px;
    font-family: 'robotolight';
    color: #979eb3;
    box-shadow: none;
}
.lang-footer .btn.btn-language:hover,
.lang-footer .btn.btn-language:focus {
    border-color: #cacdd2;
}
.lang-footer .btn.btn-language .ico{
    margin: 0px 10px;
}
.dropdown-menu > li > a {
    padding: 12px 20px;
    color: #979eb3;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #979eb3;;
}
.sub-menu-footer a {
    margin: 0px 20px;
    color: #979eb3;
}

.sub-menu-footer a:hover,
.sub-menu-footer a:focus {
    text-decoration: none;
    color: #00afec;
}
@media (max-width: 991px) {
    .navbar-footer {
        float: left;
    }
    .sub-menu-footer a {
        margin: 0px 10px;
    }
    .sub-menu-footer a:first-child {
        margin-left: 0px;
    }
}
/* FEATURES
-------------------------------------------------- */
#use-case,
#all-features {
    padding: 90px 0px;
    overflow: hidden;
}
#use-case .chapter-case,
#all-features .chapter-feature {
    margin-bottom: 75px;
}
.chapter-feature .screens, 
.chapter-feature .panel-screen, 
.chapter-feature img {
     height: 100%;
}
.chapter-feature .screens,
.chapter-feature .panel-screen {
    width: 100%;
    height: 100% !important;
}
.chapter-feature-img {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height:100%;
    width: 100%;
}
.chapter-feature img,
.chapter-feature .sticky {
    max-height: 620px;
}
.chapter-feature .sticky {
    height: 100%;
    width: 100%;
}
#use-case .chapter-case.materials {
    background: url(../images/features/bg-features.jpg) repeat-x top center;
    padding-top: 80px;
}
#use-case .chapter-case.support {
    background-color: #222630;
    padding: 80px 0px;
}
#use-case .chapter-case.form {
    background-color: #f4f6fb;
    padding: 80px 0px;
    margin-bottom: 0px;
}
#use-case .main-point h1,
#all-features .main-point h1 {
    font-family: 'robotobold';
    font-size: 85px;
    font-size: 5.3125rem;
    color: #e7e8ed;
}
#use-case h4,
#all-features h4 {
    font-size: 45px;
    font-size: 2.8125rem;
    color: #505b7c;
    margin-bottom: 28px;
}
#use-case .chapter-case.support h4 {
    color: #fff;
}
#use-case .chapter-case.team img {
    margin: 60px auto 80px;
}
#use-case p,
#all-features p {
    line-height: 1.5;
    font-size: 18px;
    font-size: 1.125rem;
    color: #979eb3;
    margin-bottom: 30px;
}
#use-case p {
    font-size: 24px;
    font-size: 1.5rem;
}
#use-case .chapter-case.materials p {
    font-size: 18px;
    font-size: 1.125rem;
}

header.features {
    height: 550px;
    position: relative;
}
header.features .wrap-btn-browse {
    position: absolute;
    text-align: center;
    width: 300px;
    bottom: -28px;
    left: 50%;
    margin-left: -150px;
}
header.features .intro-btn {
    margin: 70px 0px;
}
header.features .intro-btn .btn {
    margin: 0px 10px 15px;
}
.flashcards {
    position: absolute;
    bottom: 0px;
    width: 500px;
}
.flashcards.left {
    left: -50px;
}
.flashcards.right {
    right: -50px;
}
@media (max-width: 767px) {
    .flashcards {
        display: none;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .flashcards.left {
        left: 50%;
        margin-left: -250px;
    }
    .flashcards.right {
        right: 50%;
        margin-right: -250px;
    }
}
#features .panel-flashcard,
#all-features .panel-flashcard {
    background: #6ebe3b;
    padding: 40px;
    color: #fff;
    -webkit-box-shadow: 0px 7px 29px 0px rgba(192, 192, 216, 0.64);
            box-shadow: 0px 7px 29px 0px rgba(192, 192, 216, 0.64);
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    /*-webkit-transition: all .5s ease-in-out;
       -moz-transition: all .5s ease-in-out;
         -o-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;*/
}
#features .panel-screen,
#all-features .panel-screen {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
#features .panel-flashcard h3,
#all-features .panel-flashcard h3 {
    font-size: 40px;
    color: #fff;
    margin-top: 0px;
    margin-bottom: 25px;
}
#features .panel-flashcard p,
#all-features .panel-flashcard p {
    color: #fff;
    margin-bottom: 0px;
    font-size: 18px;
}
@media(max-width: 1500px) {
    #features .panel-flashcard h3,
    #all-features .panel-flashcard h3 {
        font-size: 32px;
        margin-bottom: 14px;
    }
    #features .panel-flashcard p,
    #all-features .panel-flashcard p {
        font-size: 16px;
    }
}
@-webkit-keyframes AnimateFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes AnimateFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.animate-fadeIn {
  -webkit-animation-name: AnimateFadeIn;
  animation-name: AnimateFadeIn;
}
/*
@-webkit-keyframes AnimateZoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes AnimateZoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.animate-ZoomIn {
  -webkit-animation-name: AnimateZoomIn;
  animation-name: AnimateZoomIn;
}
*/

/* POPUP FEATURES
-------------------------------------------------- */
.modal-backdrop.in {
    /*background-color: rgba(110, 190, 59, 0.95);
    opacity: 1;*/
}
.modal-fluid {
    width: 100%;
}
.modal.features {
    background-color: rgba(110, 190, 59, 0.85);
    opacity: 1;
}
.modal.ues-cases {
    background-color: rgba(243, 246, 250, 0.95);
    opacity: 1;
}
.modal.features h1 {
    font-size: 55px;
    font-size: 3.4375rem;
    color: #fff;
}
.modal.ues-cases h1 {
    font-size: 55px;
    font-size: 3.4375rem;
    color: #505b7c;
}
.popup-body {
    position: relative;
    padding: 15px;
}
.panel-feature .main-point h1 {
    font-family: 'robotobold';
    font-size: 56px;
    color: #4a8e1f;
    opacity: 0.3;
    filter: alpha(opacity=50);
}
.panel-feature h3 {
    font-size: 35px;
    color: #fff;
}
.panel-feature svg{
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    max-width: 24px;
    height: 24px;
    top: 50%;
    left: 10px;
    margin-top: -12px;
}
.panel-feature ul li {
    margin: 15px 0px;
    padding: 0px 15px;
    position: relative;
    display: block;
    font-family: 'robotolight';
    font-size: 18px;
    font-size: 1.125rem;
}
.panel-feature ul li a {
    display: inline-block;
    position: relative;
    padding: 5px 10px 5px 45px;
    text-decoration: none;
    border-radius: 3px;
    color: #fff;
    -webkit-transition: all .2s ease-in-out;
       -moz-transition: all .2s ease-in-out;
         -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
}
.panel-feature ul li a:hover {
    background-color: rgba(43, 111, 0, 0.3);
}
.close-modal {
    display: block;
    margin-top: 20px;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 15px;
}
.close-modal svg {
    display: inline-block;
    height: 40px;
    max-width: 40px;
    position: relative;
    top: -1px;
    vertical-align: middle;
    color: #fff;
}
.modal.ues-cases .close-modal svg,
.modal.signup .close-modal svg{
    color: #505b7c;
}
/* TOOL
-------------------------------------------------- */
.tool {
    padding: 100px 0px;
}
.tool .tag {
    font-family: 'robotoregular';
    color: #6ebe3b;
    font-size: 14px;
    margin: 0px;
    text-transform: uppercase;
}
.tool .tag svg {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    max-width: 26px;
    height: 26px;
    top: -1px;
    margin-right: 10px;
    stroke-width: 1;
}
.tool h1,
.tool h2.title{
    font-size: 55px;
    font-size: 3.0375rem;
    color: #505a7d;
    margin-bottom: 1.25rem;
}
.tool h2 {
    font-size: 45px;
    font-size: 2.8125rem;
    color: #505a7d;
}
.tool p {
    font-size: 25px;
    font-size: 1.4625rem;
    color: #979eb4;
}
.tool img.center-block {
    margin: 70px auto;
    /*box-shadow: 0 0 24px 0 rgba(47, 90, 134, 0.13);*/
}
.tool .tool-benefits {
    padding: 70px 0px 0px;
}
.tool .tool-benefits h2 {
    font-size: 45px;
    font-size: 2.8125rem;
    color: #505a7d;
}

.tool-benefits .box {
    margin-top: 70px;
}
.tool-benefits .box .icon svg {
    display: block;
    margin: 20px auto 20px;
    max-width: 100px;
    height: 82px;
    color: #6ebe3b;
}
.tool-benefits .box h3 {
    color: #6ebe3b;
    font-size: 30px;
    font-size: 1.875rem;
    margin: 40px auto 20px;
}
.tool-benefits .box p {
    color: #979eb4;
    font-size: 24px;
    font-size: 1.5rem;
    font-family: 'robotolight';
}
@media(max-width: 1500px) {
    .tool-benefits .box .icon svg {
        height: 74px;
    }
}

.tool-benefits .box-inline {
    margin-top: 50px;
    position: relative;
}
.tool-benefits .box-inline .icon {
    position: absolute;
    top: 50%;
    margin-top: -36px;
}
.tool-benefits .box-inline .icon svg {
    display: block;
    max-width: 62px;
    height: 62px;
    color: #6ebe3b;
}
.tool-benefits .box-inline .box-body {
    padding: 15px 0px 15px 100px;
}
.tool-benefits .box-inline h3 {
    color: #6ebe3b;
    font-size: 30px;
    font-size: 1.875rem;
    margin: 40px auto 20px;
}
.tool-benefits .box-inline p {
    color: #979eb4;
    font-size: 24px;
    font-size: 1.5rem;
    font-family: 'robotolight';
}
@media(max-width: 1500px) {
    .tool-benefits .box-inline .icon {
        margin-top: -32px;
    }
    .tool-benefits .box-inline .icon svg {
        max-width: 54px;
        height: 54px;
    }
}

.section-bg-dark {
    background-color: #242833;
    padding: 100px 0px;
    color: #fff;
    position: relative;
}
.section-bg-dark h2 {
    font-size: 45px;
    font-size: 2.8125rem;
}
.section-bg-dark p {
    font-size: 28px;
    font-size: 1.75rem;
    color: #959eb1;
}
.section-bg-dark p span {
    color: #fff;
}
.section-bg-dark .wrap-btn-browse {
    position: absolute;
    text-align: center;
    width: 300px;
    top: -28px;
    left: 50%;
    margin-left: -150px;
}
.section-bg-dark .btn-panel {
    margin-top: 60px;
    margin-bottom: 10px;
}
.section-bg-dark .btn-panel .btn {
    margin: 0px 15px 10px;
    padding: 17px 25px;
    border-radius: 30px;
    width: 170px;
}

.section-bg-dark p.help-block {
    font-size: 12px;
    color: #a8a8b0;
}
.btn.btn-sales:hover,
.btn.btn-sales:focus {
    background-color: #fb4420;
    background-position: 0 -15px;
}
.btn.btn-marketing:hover,
.btn.btn-marketing:focus {
    background-color: #ff9d1d;
    background-position: 0 -15px;
}
.btn.btn-education:hover,
.btn.btn-education:focus {
    background-color: #6bc02f;
    background-position: 0 -15px;
}
.btn.btn-hr:hover,
.btn.btn-hr:focus {
    background-color: #16bcf1;
    background-position: 0 -15px;
}
.btn.btn-enterprise:hover,
.btn.btn-enterprise:focus {
    background-color: #2661e6;
    background-position: 0 -15px;
}
.btn.btn-fb:hover,
.btn.btn-fb:focus {
    background-color: #4867aa;
    background-position: 0 -15px;
}
.btn.btn-office365:hover,
.btn.btn-office365:focus {
    background-color: #eb3d01;
    background-position: 0 -15px;
}
.btn.btn-green:hover,
.btn.btn-green:focus {
    background-color: #6bc02f;
    background-position: 0 -15px;
}
.btn.btn-default .svg-fill,
.btn.btn-sales .svg-fill,
.btn.btn-marketing .svg-fill,
.btn.btn-education .svg-fill,
.btn.btn-hr .svg-fill,
.btn.btn-enterprise .svg-fill,
.btn.btn-green .svg-fill {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    max-width: 17px;
    height: 17px;
    top: -1px;
    margin-right: 10px;
}
.heading-middle-border:before {
    border-top: 1px solid #ededed;
    content: "";
    height: 0;
    left: auto;
    position: absolute;
    right: 0;
    top: 50%;
    width: 100%;
}
.heading-middle-border .wrap {
    border-left: 20px solid #fff;
    border-right: 20px solid #fff;
    display: inline-block;
    position: relative;
}
.how-does-it-work {
    background: #f5f6fb;
    padding: 100px 0px;
}
.how-does-it-work h1 {
    margin-top: 0px;
    font-size: 45px;
    font-size: 2.8125rem;
    color: #505a7d;
}
.how-does-it-work .block-step {
    padding: 20px 0px;
    margin: 40px 0px 20px;
}
.how-does-it-work .block-step .bg-circle {
    position: relative;
    width: 230px;
    height: 230px;
    margin: 0px auto;
    border-radius: 50%;
    -webkit-box-shadow: 0px 6px 24px 0px rgba(40, 45, 56, 0.1);
            box-shadow: 0px 6px 24px 0px rgba(40, 45, 56, 0.1);
}
.how-does-it-work .block-step .bg-circle .num{
    background: #6ebe3b;
    position: absolute;
    bottom: 25px;
    right: 5px;
    display: block;
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 18px;
    font-size: 1.125rem;
    font-weight: bold;
    text-align: center;
    border-radius: 50%;
    color: #fff;
}
.how-does-it-work .block-step p {
    margin: 20px 0px;
    font-size: 21px;
    color: #979eb4;
}
/* BTN OUTLINE
-------------------------------------------------- */
.btn-outline {
    color: inherit;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.btn-default.btn-outline {
    color: #fff;
    border: 1px solid #fff;
}
.btn-default.btn-outline:hover,
.btn-default.btn-outline:focus{
    background-color: #fff;
    color: #20242e;
}
.btn-green.btn-outline {
    color: #6ebe3b;
    border: 1px solid #6ebe3b; 
}
.btn-primary.btn-outline {
    color: #428bca;
}

.btn-success.btn-outline {
    color: #5cb85c;
}

.btn-info.btn-outline {
    color: #5bc0de;
}

.btn-warning.btn-outline {
    color: #f0ad4e;
}

.btn-danger.btn-outline {
    color: #d9534f;
}
.btn-sales.btn-outline {
    color: #fb4420;
    border: 1px solid #fb4420; 
}
.btn-marketing.btn-outline {
    color: #ff9d1d;
    border: 1px solid #ff9d1d; 
}
.btn-education.btn-outline {
    color: #6ebe3b;
    border: 1px solid #6ebe3b; 
}
.btn-hr.btn-outline {
    color: #16bcf1;
    border: 1px solid #16bcf1; 
}
.btn-enterprise.btn-outline {
    color: #2661e6;
    border: 1px solid #2661e6; 
}
.btn-green.btn-outline:hover,
.btn-green.btn-outline:focus,
.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover,
.btn-sales.btn-outline:hover,
.btn-sales.btn-outline:focus,
.btn-marketing.btn-outline:hover,
.btn-marketing.btn-outline:focus
.btn-education.btn-outline:hover,
.btn-education.btn-outline:focus,
.btn-hr.btn-outline:hover,
.btn-hr.btn-outline:focus,
.btn-enterprise.btn-outline:hover,
.btn-enterprise.btn-outline:focus {
    color: #fff;
}

/* ORDER FORM
-------------------------------------------------- */
.thank-you{
    background: #f4f6fb;
    padding: 100px 0;
}
.list-summary{
    background: #fff;
    padding: 65px 15px;
}
.list-summary-footer{
    background: url(../images/order-form/bg-curtain.png) repeat-x center center;
    height: 25px;
}
.list-summary img.check{
    margin-bottom: 20px;
}
.list-summary h1 {
    margin-top: 30px;
    font-size: 45px;
    font-size: 2.8125rem;
    color: #505b7c;
}
.list-summary h2 {
    margin-top: 60px;
    font-size: 35px;
    color: #505b7c;
}
.list-summary h3.order-id {
    margin-top: 60px;
    font-size: 28px;
    font-size: 1.75rem;
    color: #979eb3; 
}
.summary .table-responsive,
.list-summary .table-responsive {
    padding: 20px 0px;
    border-width: 1px 0px 2px 0px;
    border-style: solid;
    border-color: #e2e5ed;
    margin: 30px 0px;
}
.summary .table-responsive {
    margin: 20px 0px;
}
.summary .table-responsive > .table,
.list-summary .table-responsive > .table {
    margin-bottom: 0px;
}
.list-summary .table {
    text-align: left;
}
.summary .table > tbody > tr > td,
.list-summary .table > tbody > tr > td {
    font-family: 'robotolight';
    font-size: 16px;
    border: none;
    color: #505b7c;
}
.summary .table > tbody > tr > td.text-right,
.list-summary .table > tbody > tr > td.text-right {
    font-family: 'robotomedium';
}
.summary .table > tbody > tr > td.text-save,
.list-summary .table > tbody > tr > td.text-save {
    color: #6ebe3b;
}
.list-summary .price-block {
    margin-bottom: 45px;
}
.summary h1.price,
.list-summary .price-block h1 {
    font-size: 35px;
    color: #6ebe3b;
}
.summary h1.price {
    margin-top: 0px;
    margin-bottom: 5px;
}
.summary p.help-block,
.list-summary .price-block p {
    font-size: 12px;
    color: #bdc1cb;
}

.block-discount {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    -webkit-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.03);
            box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.03);
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
            border-radius: 2px;
}

.block-discount .arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    top: -6px;
    left: 25px;
    margin-left: -5px;
    border-width: 0 6px 6px;
    border-bottom-color: #fff;
}
.block-discount .form-group {
    margin-bottom: 0px;
}
.block-discount .info-discount {
    margin-top: 24px;
}
.block-discount .info-discount span {
    font-family: 'robotomedium';
    display: block;
    font-size: 16px;
}
.block-discount .info-discount span.text-save {
    color: #6ebe3b;
}

.thank-you .thank-you-more {
    background: url(../images/order-form/bg-addons.png) no-repeat center 70px;
    padding: 70px 0px 135px;
}
.thank-you .thank-you-more h2 {
    font-size: 28px;
    font-size: 1.75rem;
    color: #979eb3;
    margin-bottom: 40px;
}
.thank-you .thank-you-more .btn {
    font-size: 18px;
    font-size: 1.125rem;
    padding: 12px 35px;
    color: #00afec;
}
.thank-you .thank-you-more .btn.btn-default {
    border-color: #d2d3d8;
}
.thank-you .thank-you-more .btn.btn-default:hover {
    background-color: #fff;
}
.order-form {
    padding: 100px 0px;
    position: relative;
}
.order-form .bg-summary {
    background: #f4f6fb;
    height: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
}
@media (max-width: 991px) {
    .order-form .bg-summary {
        display: none;
    }
}
@media (min-width: 992px) and (max-width: 1259px) {
    .order-form .bg-summary {
        width: 40%;
    }
}
@media (min-width: 1260px) and (max-width: 1499px) {
    .order-form .bg-summary {
        width: 39%;
    }
}
@media (min-width: 1500px) and (max-width: 1599px) {
    .order-form .bg-summary {
        width: 40%;
    }
}
@media (min-width: 1600px) and (max-width: 1649px) {
    .order-form .bg-summary {
        width: 41%;
    }
}
@media (min-width: 1650px) { 
    .order-form .bg-summary {
        width: 42%;
    }
}

.order-form h1 {
    font-size: 35px;
    color: #505b7c;
}
.order-form .block-header {
    margin: 40px 0 20px;
    padding-bottom: 5px;
}
.order-form .block-header .pull-right {
    font-family: 'robotolight';
    margin-top: 10px;
}
.order-form .block-content {
    margin-bottom: 50px;
}
.radio.radio-icon label {
    font-family: 'robotolight';
    padding-left: 25px;
    font-size: 18px;
    font-size: 1.125rem;
}
.radio.radio-icon input[type="radio"] {
    top: 50%;
    left: 0px;
    margin-top: -7px;
    margin-left: 5px;
    opacity: 0;
    filter:alpha(opacity=0);
}
.radio.radio-icon label span.payment-logo {
    position: absolute;
    right: 15px;
    top: 50%
}
.radio.radio-icon label span.payment-logo.credit-cards {
    height: 28px;
    margin-top: -14px;
}
/*
.radio.radio-icon label span.payment-logo.credit-cards {
    position: relative;
    display: block;
    margin-top: 4px;
    margin-left: 10px;
}
*/
.radio.radio-icon label span.payment-logo.credit-cards .card{
    background: url("../images/credit-cards.png") no-repeat 0 0;
    display: block;
    float: right;
    height: 28px;
    width: 47px;
    margin-left: 8px;
}
.radio.radio-icon label span.payment-logo.credit-cards .card.visa {
    background-position: 0px 0px;
}
.radio.radio-icon label span.payment-logo.credit-cards .card.mastercard {
    background-position: -56px 0px;
}
.radio.radio-icon label span.payment-logo.credit-cards .card.discover {
    background-position: -111px 0px;
}
.radio.radio-icon label span.payment-logo.credit-cards .card.americanexpress {
    background-position: -167px 0px;
}
.radio.radio-icon label span.payment-logo.paypal{
    background: url("../images/paypal.png") no-repeat center right;
    width: 97px;
    height: 24px;
    margin-top: -12px;
}
.radio.radio-icon label span.payment-logo.payu{
    background: url("../images/payu.png") no-repeat center right;
    width: 70px;
    height: 36px;
    margin-top: -18px;
}
.radio.radio-icon label i.ico-radio {
    background: url("../images/radio.png") no-repeat -25px 0px;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 50%;
    font-size: 22px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
}
.radio.radio-icon label.check i.ico-radio {
   background: url("../images/radio.png") no-repeat 0px 0px; 
}
.panel.panel-pack,
.panel.panel-pack-annual {
    font-family: 'robotolight';
    border: 1px solid #e2e2e8;
    border-radius: 0px;
    box-shadow: none;
    color: #505b7c;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.panel.panel-pack:hover,
.panel.panel-pack-annual:hover{
    -webkit-box-shadow: 0px 6px 21px 0px rgba(152, 162, 177, 0.15);
            box-shadow: 0px 6px 21px 0px rgba(152, 162, 177, 0.15);
}
.panel.panel-pack > .panel-heading,
.panel.panel-pack-annual > .panel-heading{
    background: #fff;
    padding: 8px 15px;
    border-radius: 0px;
    border-bottom: 1px solid #f2f2f3;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.panel.panel-pack:hover > .panel-heading {
    background: #f1f1f1;
}
.panel.panel-pack-annual:hover > .panel-heading {
    background: #6ebe3b;
    color: #fff;
}
.panel.panel-pack-annual:hover {
    border-color: #6ebe3b;
}
.panel.panel-pack.select {
    -webkit-box-shadow: 0px 6px 21px 0px rgba(152, 162, 177, 0.15);
            box-shadow: 0px 6px 21px 0px rgba(152, 162, 177, 0.15);
}
.panel.panel-pack.select > .panel-heading {
    background-color: #f1f1f1;
}
.panel.panel-pack-annual.select {
    border-color: #6ebe3b;
    -webkit-box-shadow: 0px 6px 21px 0px rgba(152, 162, 177, 0.15);
            box-shadow: 0px 6px 21px 0px rgba(152, 162, 177, 0.15);
}
.panel.panel-pack-annual.select > .panel-heading {
    background-color: #6ebe3b;
    color: #fff;
}
.panel.panel-pack > .panel-heading .radio.radio-icon,
.panel.panel-pack-annual > .panel-heading .radio.radio-icon {
    text-align: center;
}
.panel.panel-pack > .panel-heading .radio.radio-icon label,
.panel.panel-pack-annual > .panel-heading .radio.radio-icon label {
    display: inline-block;
    position: relative;
}
.panel.panel-pack > .list-group,
.panel.panel-pack-annual > .list-group {
    padding: 12px 0px;
}
.panel.panel-pack > .list-group:last-child .list-group-item:last-child,
.panel.panel-pack-annual > .list-group:last-child .list-group-item:last-child{
    border: 0;
    border-radius: 0px;
}
.label-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
.label.right {
    margin: 0px 5px;
}
.label.right .label-arrow {
    top: 50%;
    left: -5px;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #ff4200;
}
.label.left {
    margin: 0px 5px;
}
.label.left .label-arrow {
    top: 50%;
    right: -5px;
    margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: #ff4200;
}
.label.label-save {
    background: #ff4200;
    display: inline-block;
    position: relative;
    font-size: 12px;
    padding: 5px 8px;
}
.label.label-save .label-arrow {
    border-right-color: #ff4200;
}

.accordion-payment {
    border: 1px solid #e2e2e8;
}
.panel.panel-payment {
    border-width: 0px 0px 1px;
    border-style: solid;
    border-color: #e2e2e8;
    border-radius: 0px;
    box-shadow: none;
}
.panel.panel-payment:last-child {
    border-bottom-width: 0px;
}
.panel-payment > .panel-heading {
    background-color: #f4f6fb;
    border-radius: 0px;
    padding: 0px;
}
.panel-payment > .panel-heading .radio.radio-icon {
    margin: 0px;
}
.panel-payment > .panel-heading .radio.radio-icon label {
    padding: 20px 15px 20px 40px;
    display: block;
    color: #505b7c;
}
.panel-payment > .panel-heading .radio.radio-icon label i.ico-radio {
    left: 15px;
}
.panel-payment > .panel-heading .radio.radio-icon label.check{
    background-color: #fff;
}
.panel-group .panel.panel-payment + .panel.panel-payment {
    margin-top: 0px;
}
.panel-group .panel.panel-payment > .panel-heading + .panel-collapse > .panel-body {
    border-top: 1px solid #e2e2e8;
}
#help_block_password.help-block {
    position: absolute;
    bottom: -5px;
    left: 0px;
    right: 0px;
    margin: 0px;
}
#help_block_password.help-block .progress {
    background: none;
    border-radius: 0px 0px 2px 2px;
    margin-bottom: 6px;
    height: 2px;
}
#help_block_password.help-block .progress .progress-bar {
    box-shadow: none;
}
.order-form .form-group label {
    font-size: 12px;
    color: #bdc1cb;
    
}
.order-form .form-group .form-control {
    font-family: 'robotolight';
    border-color: #e2e2e8;
    box-shadow: none;
    color: #505b7c;
}
.order-form .form-group .form-control:focus {
    border-color: #6ebe3b;
}
.signup .form-group .help-block,
.order-form .form-group .help-block {
    font-family: 'robotolight';
    font-size: 12px;
}
.order-form .form-group.has-error .form-control {
    border-color: #ff4200;
}
.order-form .form-group.has-success .form-control {
    border-color: #6ebe3b;
}
.order-form .form-group.has-error .help-block {
    color: #ff4200;
}
.order-form .form-group.has-success .help-block {
    color: #6ebe3b;
}
.order-form .form-group.has-error .form-control-feedback {
    color: #ff4200;
}
.order-form .form-group.has-success .form-control-feedback {
    color: #6ebe3b;
}
.order-form .alert {
    position: relative;
    border-radius: 0px;
    font-size: 18px;
    font-size: 1.125rem;
    padding-left: 60px;
}
.order-form .alert-danger {
    background-color: #ff4200;
    border-color: #ff4200;
    color: #fff;
}
.order-form .alert-danger .icon {
    background: url(../images/danger.png) no-repeat center center;
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 10px;
    top:50%;
    margin: -20px 0px 0px;
    
}

/* BUSINESS SOLUTIONS
-------------------------------------------------- */
.slide-section {
    background-attachment: scroll;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    height: 100%;
    width: 100%;
    display: table;
    padding: 100px 0px;
}
.slide-content-middle {
    display: table-cell;
    vertical-align: middle;
    position: relative; 
}
.slide-content-middle .modal-dialog {
    margin: 0px auto;
}
#business-solutions.slide-section {
    background-color: #f4f6fb;
}
#business-solutions h2 {
    font-size: 45px;
    font-size: 2.8125rem;
    color: #505b7c;
}
#business-solutions h3 {
    font-size: 28px;
    font-size: 1.75rem;
    color: #979eb3;
}
.slide-content-middle .use-case-group li a {
    min-height: inherit;
}
.slide-content-middle .use-case-group li a h4 {
    margin-bottom: 0px;
}
#sales.slide-section {
    background-image: url(../images/use-cases/bg-sales.jpg);
}
#marketing.slide-section {
    background-image: url(../images/use-cases/bg-marketing.jpg);
}
#education.slide-section {
    background-image: url(../images/use-cases/bg-education.jpg);
}
#hr.slide-section {
    background-image: url(../images/use-cases/bg-hr.jpg);
}
#enterprise.slide-section {
    background-image: url(../images/use-cases/bg-enterprise.jpg);
}
.slide-section .box {
    background-color: #fff;
    padding: 40px;
    position: relative;
    border-right: 5px solid #ccc;
    -webkit-box-shadow: 0px 3px 35px 0px rgba(0, 0, 0, 0.45);
            box-shadow: 0px 3px 35px 0px rgba(0, 0, 0, 0.45);
}
.slide-section .box.box-sales {
    border-right-color: #fb4420;
}
.slide-section .box.box-marketing {
    border-right-color: #ff9d1d;
}
.slide-section .box.box-education {
    border-right-color: #6ebe3b;
}
.slide-section .box.box-hr {
    border-right-color: #16bcf1;
}
.slide-section .box.box-enterprise {
    border-right-color: #2661e6;
}
.slide-section .box .curtain {
    background: #ccc;
    position: absolute;
    overflow: hidden;
    text-decoration: none;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 0%;
    z-index: 1;
    -webkit-transition: width .5s ease-in-out;
       -moz-transition: width .5s ease-in-out;
         -o-transition: width .5s ease-in-out;
            transition: width .5s ease-in-out;
}
.slide-section .box.box-sales .curtain {
    background-color: #fb4420;
}
.slide-section .box.box-marketing .curtain {
    background-color: #ff9d1d;
}
.slide-section .box.box-education .curtain {
    background-color: #6ebe3b;
}
.slide-section .box.box-hr .curtain {
    background-color: #16bcf1;
}
.slide-section .box.box-enterprise .curtain {
    background-color: #2661e6;
}
.slide-section .box:hover .curtain {
    width: 100%;
}
.slide-section .box .curtain .row-curtain {
    display: table;
    width: 100%;
    height: 100%;
}
.slide-section .box .curtain .row-curtain .col-curtain {
    display: table-cell;
    vertical-align: middle;
}
.slide-section .box .curtain .row-curtain .col-curtain svg {
    display: block;
    margin: 0px auto;
    color: #fff;
    height: 150px;
}
.slide-section .box .curtain .row-curtain .col-curtain h2 {
    font-size: 55px;
    font-size: 3.4375rem;
    color: #fff;
    margin-top: 30px;
    margin-bottom: 50px;
}
.slide-section .box .curtain .row-curtain .col-curtain p {
    color: #666;
}
.slide-section .box.box-sales .curtain .row-curtain .col-curtain p {
    color: #c92a0b;
}
.slide-section .box.box-marketing .curtain .row-curtain .col-curtain p {
    color: #bd710e;
}
.slide-section .box.box-education .curtain .row-curtain .col-curtain p {
    color: #418f10;
}
.slide-section .box.box-hr .curtain .row-curtain .col-curtain p {
    color: #0082ac;
}
.slide-section .box.box-enterprise .curtain .row-curtain .col-curtain p {
    color: #003abd;
}
.slide-section .box .box-heading {
    padding: 10px 15px;
}
.slide-section .box .box-heading h4 {
    margin-top: 0px;
    font-size: 40px;
    font-size: 2.5rem;
    color: #505b7c;
}
.slide-section .box .box-heading p {
    margin-bottom: 0px;
    font-size: 24px;
    font-size: 1.5rem;
    color: #5f677f;
}
.slide-section .box .box-body {
    padding: 15px;
}
.slide-section .box .box-body p {
    font-size: 18px;
    font-size: 1.125rem;
    color: #979eb3;
}
.slide-section .box .box-footer {
    padding: 10px 15px;
}
.slide-section .box .box-heading h4 svg {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    max-width: 40px;
    height: 40px;
    top: -1px;
    margin-right: 10px;
}
.slide-section .box.box-sales .box-heading h4 svg {
    color: #fb4420;
}
.slide-section .box.box-marketing .box-heading h4 svg {
    color: #ff9d1d;
}
.slide-section .box.box-education .box-heading h4 svg {
    color: #6ebe3b;
}
.slide-section .box.box-hr .box-heading h4 svg {
    color: #16bcf1;
}
.slide-section .box.box-enterprise .box-heading h4 svg {
    color: #2661e6;
}
/*
.btn.btn-sales {
    border-color: #fb4420;
    color: #fb4420;
}
.btn.btn-marketing {
    border-color: #ff9d1d;
    color: #ff9d1d;
}
.btn.btn-education {
    border-color: #6ebe3b;
    color: #6ebe3b;
}
.btn.btn-hr {
    border-color: #16bcf1;
    color: #16bcf1;
}
.btn.btn-enterprise {
    border-color: #2661e6;
    color: #2661e6;
}*/

.tile-wrap {
    display: table;
    margin: 20px auto;
    padding: 0px;
    font-size: 0;
}
.col-tile {
    height: 140px;
    width: 140px;
    box-sizing: border-box;
    border: 1px solid #eff0f3;
    display: inline-block;
    margin: -1px -1px 0px 0px;
    padding: 0px;
    position: relative;
}
.col-tile.col-flag {
    height: 160px;
    width: 160px;
}
.col-tile p.tile,
.col-tile a.tile {
    position: absolute;
    font-size: 20px;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    color: #979eb3;
    text-decoration: none;
    z-index: 1;
    padding: 0px 10px;
    margin: 0;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.col-tile.col-flag.active p.tile,
.col-tile p.tile:hover,
.col-tile a.tile:hover {
    background-color: #6ebe3b;
    color: #fff;
    top: -5px;
    bottom: -5px;
    left: -5px;
    right: -5px;
    z-index: 2;
    padding: 5px 15px;
    -webkit-box-shadow: 0px 7px 29px 0px rgba(192, 192, 216, 0.64);
            box-shadow: 0px 7px 29px 0px rgba(192, 192, 216, 0.64);
}
.col-tile.col-flag.active p.tile {
    z-index: 1;
}
.col-tile a.tile.sales:hover {
    background-color: #fb4420;
}
.col-tile a.tile.marketing:hover {
    background-color: #ff9d1d;
}
.col-tile a.tile.education:hover {
    background-color: #6ebe3b;
}
.col-tile a.tile.hr:hover {
    background-color: #16bcf1;
}
.col-tile a.tile.enterprise:hover {
    background-color: #3c76f9;
}
.col-tile p.tile svg,
.col-tile a.tile svg {
    display: block;
    margin: 20px auto 5px;
    max-width: 100px;
    height: 40px;
    color: #6ebe3b;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.col-tile p.tile .icon-flag,
.col-tile a.tile .icon-flag {
    background:  url(../../../../../homepage/web/views/images/flags/language_mailing_flag_48.png) no-repeat 0 0;
    display: block;
    margin: 40px auto 5px;
    max-width: 100px;
    height: 36px;
    width: 48px;
}
.col-tile p.tile .icon-flag.en,
.col-tile a.tile .icon-flag.en {
    background-position: 0 0;
}
.col-tile p.tile .icon-flag.pl,
.col-tile a.tile .icon-flag.pl {
    background-position: 0 -40px;
}
.col-tile p.tile .icon-flag.de,
.col-tile a.tile .icon-flag.de {
    background-position: 0 -80px;
}
.col-tile p.tile .icon-flag.es,
.col-tile a.tile .icon-flag.es {
    background-position: 0 -120px;
}
.col-tile p.tile .icon-flag.ru,
.col-tile a.tile .icon-flag.ru {
    background-position: 0 -160px;
}
.col-tile p.tile .icon-flag.fr,
.col-tile a.tile .icon-flag.fr {
    background-position: 0 -200px;
}
.col-tile p.tile .icon-flag.it,
.col-tile a.tile .icon-flag.it {
    background-position: 0 -240px;
}
.col-tile p.tile .icon-flag.br,
.col-tile a.tile .icon-flag.br {
    background-position: 0 -280px;
}

.col-tile a.tile.sales svg {
    color: #fb4420;
}
.col-tile a.tile.marketing svg {
    color: #ff9d1d;
}
.col-tile a.tile.education svg {
    color: #6ebe3b;
}
.col-tile a.tile.hr svg {
    color: #16bcf1;
}
.col-tile a.tile.enterprise svg {
    color: #3c76f9;
}
.col-tile p.tile:hover svg,
.col-tile a.tile:hover svg{
    color: #fff;
}
.col-tile p.tile img,
.col-tile a.tile img {
    display: block;
    height: 50px;
    margin: 15px auto 0px;
}
.col-tile p.tile span.title,
.col-tile a.tile span.title {
    display: table;
    width: 100%;
    height: 70px;
    font-size: 16px;
    font-family: 'robotolight';
}
.col-tile p.tile span.title span,
.col-tile a.tile span.title span {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.col-tile p.tile span.title span em,
.col-tile a.tile span.title span em {
    display: block;
    font-size: 12px;
    font-style: normal;
    color: #979eb3;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.col-tile a.tile.sales span.title span em {
    color: #fb4420;
}
.col-tile a.tile.marketing span.title span em {
    color: #ff9d1d;
}
.col-tile a.tile.education span.title span em {
    color: #6ebe3b;
}
.col-tile a.tile.hr span.title span em {
    color: #16bcf1;
}
.col-tile a.tile.enterprise span.title span em {
    color: #3c76f9;
}
.col-tile p.tile:hover span.title span em,
.col-tile a.tile:hover span.title span em{
    color: #fff;
}

.testimonial {
    background: #ccc;
    padding: 50px 40px 50px 100px;
    border: none;
}
#use-case .testimonial p {
    font-size: 24px;
    color: #fff;
}
.testimonial small::before {
    content: "";
}
.testimonial small {
    font-family: 'robotolight';
    font-size: 16px;
    color: #fff;
}
.testimonial small cite {
    opacity: 0.5;
}
.testimonial small.read a {
    font-size: 14px;
    color: #fff;
}
.testimonial.sales {
    background: #fb4420;
}
.testimonial.marketing {
    background: #ff9d1d;
}
.testimonial.education {
    background: #6ebe3b;
}
.testimonial.hr {
    background: #16bcf1;
}
.testimonial.enterprise {
    background: #3c76f9;
}
#use-case p.call {
    margin: 20px 0px 0px;
}
#use-case p.call b{
    position: relative;
    font-family: 'robotoregular';
    color: #505a7d;
    display: inline-block;
}
#use-case p.call b .stress {
    background: url(../images/call-stress.png) no-repeat center center;
    height: 10px;
    width: 100%;
    position: absolute;
    bottom: -11px;
    left: 0px;
}
#use-case p.available {
    margin: 20px 0px 0px;
    font-size: 18px;
    font-size: 1.125rem;
}
#use-case p.available small.label {
    background: url(../images/point.png) no-repeat 2px center;
    display: inline-block;
    vertical-align: 2px;
    margin-left: 10px;
    font-weight: normal;
    font-size: 12px;
    color: #6ebe3b;
    padding-left: 12px;
}
#use-case .tile-wrap {
    margin: 50px auto 90px;
}
#use-case .box .box-body {
    padding: 15px;
}
#use-case .box h4 {
    font-size: 23px;
    font-size: 1.4375rem;
}
#use-case .box p {
    font-size: 18px;
    font-size: 1.125rem;
    margin-bottom: 10px;
    min-height: 100px;
}
#use-case .box svg {
    display: block;
    margin: 20px auto 20px;
    max-width: 100px;
    height: 45px;
    color: #3c76f9;
}
.from-sales-team {
    margin: 50px 0px;
}
#use-case .chapter-case.form .form-control {
    background-color: transparent;
    border-color: #dfe1e8;
    box-shadow: none;
    font-family: 'robotolight';
    color: #505a7d;
    font-size: 16px;
}
#use-case .chapter-case.form .form-control:focus {
    border-color: #2d68eb;
}
#use-case .chapter-case.form .form-control::-moz-placeholder {
    font-family: 'robotolight';
    color: #979cb2;
}
#use-case .chapter-case.form .form-control:-ms-input-placeholder {
    font-family: 'robotolight';
    color: #979cb2;
}
#use-case .chapter-case.form .form-control::-webkit-input-placeholder {
    font-family: 'robotolight';
    color: #979cb2;
}
#use-case .chapter-case.form .form-group {
    position: relative;
    margin-bottom: 40px;
    padding-right: 15px;
}
#use-case .chapter-case.form .form-group label {
    font-family: 'robotolight';
    font-size: 12px;
    color: #2d68eb;
    position: absolute;
    top: -22px;
}
#use-case .chapter-case.form .form-group .star {
    display: inline-block;
    font-family: 'robotolight';
    color: #2d68eb;
    font-size: 18px;
    position: absolute;
    margin-top: -10px;
    top: 50%;
    right: 0px;
    height: 20px;
}
#use-case .chapter-case.form .form-group .star-info {
    display: inline-block;
    font-family: 'robotolight';
    color: #979cb2;
    font-size: 16px;
    position: absolute;
    margin-top: 10px;
    top: 0px;
    right: 15px;
    height: 20px;
}
#use-case .chapter-case.form .form-group .star-info i {
    color: #2d68eb;
    font-size: 18px;
    font-style: normal;
    vertical-align: middle;
}
#use-case .chapter-case.form .form-group p.click-here {
    font-size: 18px;
    font-size: 1.125rem;
    margin: 30px 0px 0px;
}
#use-case .chapter-case.webinars {
    background-attachment: scroll;
    background-image: url(../images/use-cases/bg-webinars.png);
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    height: 685px;
    width: 100%;
    display: table;
    padding: 80px 0px;
    margin-bottom: -90px;

}
#use-case .chapter-case.webinars h2 {
    font-family: 'robotothin';
    font-size: 60px;
    color: #6ebe3b;
    margin-bottom: 40px;
    margin-top: 30px;
}
#use-case .chapter-case.webinars .label {
    background: url(../images/use-cases/clickmeeting-label.png) no-repeat 15px 13px black;
    padding: 10px 15px 10px 130px;
    border-radius: 0px;
    font-family: 'robotolight';
    font-style: italic;
    font-size: 16px;
    color: #fff;
}
#use-case .chapter-case.webinars p {
    font-family: 'robotolight';
    font-size: 18px;
    font-size: 1.125rem;
    margin: 50px 0px;
    color: #282d38;
}
#use-case .chapter-case.webinars p b {
    font-family: 'robotoregular';
}
#use-case .chapter-case.webinars p .date {
    background: url(../images/clock.png) no-repeat center left;
    padding-left: 20px;
    font-family: 'robotomedium';
    color: #6ebe3b;
}
#use-case .chapter-case.webinars p span.separation{
    margin: 0px 10px;
    color: #e0e1da;
}
#use-case .chapter-case.webinars .btn {
    font-size: 18px;
    margin-right: 15px;
}
/* PRICING
-------------------------------------------------- */
#pricing {
    padding: 90px 0 20px;
}
#pricing h2 {
    font-size: 45px;
    font-size: 2.8125rem;
    color: #505a7d;
}
#pricing .pricing-block {
    margin: 50px 0px 20px;
}
.pricing-block .col-md-4 {
    padding: 0px;
    margin-left: 3px;
    margin-right: 3px;
}
.pricing-block .col-md-4 .panel {
    border-radius: 0;
    margin-top: 40px;
    margin-bottom: 0px;
    -webkit-box-shadow: 0 0 18px 0px rgba(39, 95, 222, 0.05);
            box-shadow: 0 0 18px 0px rgba(39, 95, 222, 0.05);
}
.pricing-block .col-md-4.active {
    margin-left: -6px;
    margin-right: -6px;
    z-index: 1;
}
.pricing-block .col-md-4.active .panel {
    -webkit-box-shadow: 0 0 18px 3px rgba(14, 47, 139, 0.13);
            box-shadow: 0 0 18px 3px rgba(14, 47, 139, 0.13);
}

@media (max-width: 991px) {
    #pricing .pricing-block {
        margin: 50px auto 20px;
        max-width: 330px;
    }
    .pricing-block .col-md-4 .panel {
        margin-top: 0px;
        margin-bottom: 0px;
    }
    .pricing-block .col-md-4.active .panel {
        margin-top: 40px;
    }
}
.panel-pricing {
    border-color: #eff0f3;
}
.panel-pricing .list-group-item {
    font-family: 'robotolight';
    font-size: 16px;
    padding: 15px 15px;
    border-color: #fafafa;
    color: #5b6583;
}
.panel-pricing .list-group-item a {
    color: #5b6583;
}
.panel-pricing .list-group-item a:hover {
    text-decoration: none;
    color: #00afec;
}
.pricing-block .col-md-4.active .panel-pricing {
    border-color: #e7e8ed;
}
.panel-pricing .panel-heading {
    background-color:  #fff;
    border-color: #f1f3f7;
    border-radius: 0;
    color: #333333;
    display: table;
    height: 170px;
    width: 100%;
}
.panel-pricing .panel-heading .cell{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.panel-pricing .panel-heading h3 {
    font-size: 32px;
    color: #505b7c;
    margin: 10px 0px 30px;
}
.panel-pricing .panel-heading p {
    font-size: 14px;
    color: #979eb3;
}
.panel-pricing .panel-body {
    display: table;
    width: 100%;
}
.panel-pricing .panel-body .cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 300px;
}
.panel-pricing .panel-body .value-box {
    position: relative;
    line-height: 45px;
    height: 50px;
}
.panel-pricing .panel-body .value-box p.range {
    margin: 0px;
    font-size: 25px;
    line-height: 48px;
    color: #6ebe3b;
}
.panel-pricing .panel-body .value-box p.range span.value {
    display: inline-block;
    position: relative;
    padding-left: 28px;
}
.panel-pricing .panel-body .value-box p.range span.value svg {
    position: absolute;
    top: 50%;
    left: 2px;
    max-width: 24px;
    height: 20px;
    margin-top: -10px;
}
.panel-pricing .panel-body .value-box .btn {
    font-family: 'robotolight';
    padding: 3px 50px;
    font-size: 25px;
}
.panel-pricing .panel-body .value-box .btn svg {
    position: absolute;
    top: 50%;
    left: 10px;
    max-width: 24px;
    height: 20px;
    margin-top: -10px;
}
.panel-pricing .panel-body .value-box .btn .caret{
    position: absolute;
    top: 50%;
    right: 15px;
}
.panel-pricing .panel-body .price-box {
    position: relative;
    padding: 5px 0px;
    margin-top: 5px;
}
#pricing .panel-pricing .panel-body .price-box h2 {
    font-size: 80px;
    font-family: 'robotothin';
    color: #505b7c;
}
#pricing .panel-pricing .panel-body .price-box p {
    color: #b7c1ca;
}
#pricing .panel-pricing .panel-body .price-box p.starts-form {
    position: absolute;
    top:0px;
    left: 0px;
    right: 0px;
}
.panel-pricing .panel-body .btn-box {
    margin-top: 10px;
    padding: 5px 0px;
}
.panel-pricing .panel-body .btn-box .btn {
    padding: 12px 30px
}
.panel-pricing .panel-footer {
    background-color: #fff;
    border-color: #f1f3f7;
    border-radius: 0;
}

.frame {
    position: relative;
}
.frame .frame-heading {
    background-color: #6ebe3b;
    position: absolute;
    top: -41px;
    left: -5px;
    right: -5px;
    height: 40px;
    line-height: 40px;
    color: #fff;
}
.frame .frame-right {
    background-color: #6ebe3b;
    position: absolute;
    top: -1px;
    right: -5px;
    bottom:0px;
    width: 4px;
}
.frame .frame-left {
    background-color: #6ebe3b;
    position: absolute;
    top: -1px;
    left: -5px;
    bottom:0px;
    width: 4px;
}
.frame .frame-footer {
    background-color: #6ebe3b;
    position: absolute;
    bottom: -5px;
    left: -5px;
    right: -5px;
    height: 4px;
    bottom: 0px;
}
.panel-pricing .tooltip {
    min-width: 250px;
}
.panel-pricing .tooltip .tooltip-inner {
    min-width: 250px;
    text-align: left;
    padding: 15px;
    -webkit-box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.15);
            box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.15);
}
#pricing .btn-options {
    border: 1px solid #6ebe3b;
    display: inline-block;
    position: relative;
    padding: 2px 3px;
    margin: 60px 0px 20px;
    -webkit-border-radius: 25px;
       -moz-border-radius: 25px;
            border-radius: 25px;
}
#pricing .btn-options .btn {
    font-size: 15px;
    padding: 5px 25px;
}
#pricing .btn-options .btn.btn-off {
    color: #6ebe3b;
    box-shadow: none;
}
#pricing .btn-options .btn.btn-off:hover {
    border: 1px solid #6ebe3b;
}
#pricing .label.label-save {
    position: absolute;
    left: -80px;
    top: 50%;
    margin-top: -12px;
    -webkit-box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.15);
            box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.15);
}
/* PRICING FEATURES
-------------------------------------------------- */
section#pricing-features {
    padding: 90px 0px;
}

section#pricing-features h2 {
    font-size: 45px;
    font-size: 2.8125rem;
    color: #505b7c;
}
section#pricing-features h3 {
    font-size: 35px;
    font-size: 2.1875rem;
    color: #505b7c;
    margin-top: 60px;
    margin-bottom: 30px;
}
section#pricing-features svg{
    position: absolute;
    max-width: 24px;
    height: 24px;
    top: 6px;
    left: 0;
    color: #6ebe3b;
}
section#pricing-features ul li {
    margin: 15px 0px;
    padding: 5px 0px 5px 34px;
    position: relative;
    display: block;
    font-family: 'robotolight';
    font-size: 18px;
    font-size: 1.125rem;
    color: #979eb3;
}
/* PRICING ADD-ONS
-------------------------------------------------- */
section#pricing-add-ons {
    background: #f4f6fb;
    padding: 90px 0px;
}
section#pricing-add-ons h2 {
    font-size: 45px;
    font-size: 2.8125rem;
    color: #505b7c;
}
section#pricing-add-ons p {
    font-size: 28px;
    font-size: 1.75rem;
    color: #979eb3;
}
section#pricing-add-ons .box {
    display: table;
    height: 250px;
    width: 100%;
}
section#pricing-add-ons .box .box-body {
    height: 100px;
}
section#pricing-add-ons .box .cell {
    display: table-cell;
    vertical-align: middle;
}
section#pricing-add-ons .box h4 {
    font-size: 23px;
    font-size: 1.4375rem;
    color: #505b7c;
}
section#pricing-add-ons .box p {
    font-size: 15px;
    color: #979eb3;
}
section#pricing-add-ons .box .icon svg{
    display: inline-block;
    position: relative;
    max-width: 80px;
    height: 80px;
    color: #6ebe3b;
}
/* PRICING ADD-ONS
-------------------------------------------------- */
section#pricing-clients {
    background: #21262f;
    padding: 90px 0px;
}
section#pricing-clients h2 {
    margin-bottom: 40px;
    font-size: 45px;
    font-size: 2.8125rem;
    color: #fff;
}
section#pricing-clients p {
    font-size: 28px;
    font-size: 1.75rem;
    color: #959eb1;
}
section#pricing-clients p span{
    color: #fff;
}
section#pricing-clients .btn-panel {
    margin: 80px 0px;
}
section#pricing-clients .btn-panel .btn {
    margin: 0px 15px;
}
section#pricing-clients hr {
    border-color: #363b44;
    margin-top: 80px;
    margin-bottom: 80px;
}
section#pricing-clients .logo-block {
    display: table;
    width: 100%;
    height: 150px;
}
section#pricing-clients .logo-block .cell {
    display: table-cell;
    vertical-align: middle;
    
}
.modal.signup {
    background-color: #fff;
}
.modal.signup h1 {
    font-size: 55px;
    font-size: 3.4375rem;
    color: #505b7c;  
}
.modal.signup h4.free-days {
    font-size: 28px;
    font-size: 1.75rem;
    color: #979eb3;
}
.modal.signup .clickmeeting-logo svg{
    height: 65px;
}
.vertical-center {
    height: 100%;
    width: 100%;
    display: table;
}
.vertical-center .cell {
    display: table-cell;
    vertical-align: middle;
    position: relative;
}
.modal.signup .signup-block {
    margin-top: 40px;
}
.modal.signup .signup-social {
    border-right: 1px solid #f5f5f7;
    padding: 32px 15px;
}
@media (max-width: 991px) {
    .modal.signup .signup-social {
        border-right: none;
    }
}
.modal.signup .signup-social p {
    font-size: 18px;
    font-size: 1.125rem;
    color: #505b7c;
}
.modal.signup .signup-social .btn {
    margin: 20px 10px;
    padding: 12px 60px
}
.signup-social .btn.btn-office365 .svg-fill,
.signup-social .btn.btn-fb .svg-fill {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    max-width: 17px;
    height: 17px;
    top: -1px;
}
.modal.signup .signup-form {
    padding: 0px 45px;
}
.signup-form .btn {
    padding: 12px 50px;
    margin: 20px 0px;
}
.signup-form p small {
    font-size: 12px;
    color: #c2c5cd;
}
.signup-form p.accountname {
    font-family: 'robotolight';
    color: #c1c4cc;
}
.signup-form a.info {
    background-color: #fff;
    font-family: 'robotobold';
    display: inline-block;
    border: 1px solid #00afec;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    text-align: center;
    font-size: 11px;
    line-height: 1.1;
    text-decoration: none;
    margin-top: 3px;
}
.signup-form a.info:hover {
    background-color: #00afec;
    border: 1px solid #00afec;
    color: #fff;
}
.signup-form .form-group {
    clear: both;
}
.signup-form .form-control {
    font-family: 'robotolight';
    border-color: #e2e2e8;
    box-shadow: none;
    color: #505b7c;
}
.signup-form .form-control:focus {
    border-color: #6ebe3b;
    box-shadow: none;
}
.signup-form .form-control::-moz-placeholder {
    color: #c1c4cc;
}
.signup-form .form-control:-ms-input-placeholder {
    color: #c1c4cc;
}
.signup-form .form-control::-webkit-input-placeholder {
    color: #c1c4cc;
}
.password-strength {
    position: relative;   
}
.signup-form .has-error .form-control {
    border-color: #ff4200;
}
.signup-form .has-error .help-block {
    color: #ff4200;
}
.signup-form .has-error .form-control-feedback {
    color: #ff4200;
}
.signup-form .has-success .form-control {
    border-color: #6ebe3b;
}
.signup-form .has-success .help-block {
    color: #6ebe3b;
}
.signup-form .has-success .form-control-feedback {
    color: #6ebe3b;
}
.form-control-feedback svg {
    position: absolute;
    display: block;
    width: 100%;
    height: 20px;
    top: 50%;
    left: 0;
    margin: -10px 0 0;
}
@media(max-width: 1500px) {
    html, body {
        font-size: 14px;
    } 
}
/* TIMEZONE CONVERTER
----------------------------------------------------*/
#time-zone-converter {
    padding: 90px 0 90px;
    background-color: #282d38;
    display: table;
    width: 100%;
    height: 100%;
}
#time-zone-converter .time-zone-converter-middle {
    display: table-cell;
    vertical-align: middle;
}
#time-zone-converter h3 {
    margin-bottom: 40px;
    font-size: 56px;
    color: #fff;
}
#time-zone-converter p {
    margin-bottom: 50px;
    font-size: 24px;
    color: #979cb2;
}
#time-zone-converter .logo-brand svg {
    width: 175px;
    height: 40px;
}
@media (min-width: 992px) {
    #time-zone-converter .converter {
        margin-right: 20px;
    }
}
#time-zone-converter .converter .description {
    margin-bottom: 15px;
}
#time-zone-converter .converter .description input[type="text"] {
    background: #fff;
    border: 1px solid #fff;
    padding: 12px 14px;
    cursor: text;
    font-size: 24px;
    color: #979cb2;
    text-transform: uppercase;
    width: 100%;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
}
#time-zone-converter .converter .description input[type="text"]::placeholder {
  color: #979cb2;
  opacity: 1;
}
#time-zone-converter .converter .description input[type="text"]:-ms-input-placeholder {
 color: #979cb2;
}
#time-zone-converter .converter .description input[type="text"]::-ms-input-placeholder {
 color: #979cb2;
}
#time-zone-converter .converter .description input:focus {
    outline: none;
}
#time-zone-converter .converter .map {
    margin-bottom: 35px;
}
#time-zone-converter .converter .map .hide {
    display: block!important;
}
#time-zone-converter .converter .map .timezone {
    margin: 0;
}
#time-zone-converter .converter .error {
    color: #e6363b;
    visibility: hidden;
}
#time-zone-converter .calendar {
    position: relative;
    overflow: hidden;
}
#time-zone-converter .calendar .eventDate {
    margin-left: 180px;
}
#time-zone-converter .calendar .eventDate h3 {
    font-size: 24px;
    margin: 12px auto 35px;
}
@media (max-width: 500px) {
    #time-zone-converter .calendar .eventDate h3 {
        margin: 12px auto 20px;
    }
}
@media (max-width: 992px) {

}
#time-zone-converter .calendar .eventDate p {
    margin-bottom: 10px;
    font-size: 18px;
    color: #fff;
}
#time-zone-converter .calendar .eventDate p em {
    background-color: #e6363b;
    padding: 1px 5px;
    font-family: 'robotomedium';
    font-style: normal;
    color: #fff;
}
#time-zone-converter .calendar .eventCalendar {
    float: left;
    position: relative;
    overflow: hidden;
    border: 3px solid #fff;
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
            border-radius: 2px;
}
#time-zone-converter .calendar .eventCalendar .month {
    background: #f55155;
    vertical-align: middle;
    text-align: -webkit-center;
    padding: 0;
    margin: 0;
}
#time-zone-converter .calendar .eventCalendar .month span {
    font-family: 'robotolight';
    font-size: 18px;
    color: #ffffff;
}
#time-zone-converter .calendar .eventCalendar .day {
    text-align: center;
    padding: 0;
    margin: 0;
}

#time-zone-converter .calendar .eventCalendar .day span {
    font-family: 'robotothin';
    font-size: 80px;
    line-height: 95px;
    color: #fff;
}
#time-zone-converter .col-center {
    float: none;
    margin: 0 auto;
}
#time-zone-converter .select2-container .select2-choice {
    margin-top: 55px;
    font-size: 24px;
    line-height: 50px;
    height: 50px;
    color: #979cb2;
    box-shadow: none;
}
.select2-search .select2-input {
    width: 100%;
    display: block;
    cursor: text;
    outline: none;
    background: #fff;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.13);
    transition: border .15s ease-in-out;
    color: #555;
    font-size: 14px;
    padding: 7px 10px;
}
.select2-search .select2-input:focus {
    border-color: #6ebe3b;
    outline-color: #6ebe3b;
}
.select2-search:after {
    display: none !important;
}
.select2-results {
    margin: 0 !important;
}
.select2-results .select2-result-with-children {
    color: #979cb2 !important;
}
.select2-results .select2-result-with-children .select2-highlighted {
    color: #fff !important;
}
.autocomplete-suggestions {
    border: 1px solid #999;
    background: #FFF;
    cursor: default;
    overflow: auto;
    -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
    -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
    box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
}

.autocomplete-suggestion {
    padding: 5px 5px;
    overflow: hidden;
}

.autocomplete-selected {
    background: #F0F0F0;
}

.autocomplete-suggestions strong {
    font-family: Helvetica, Arial, sans-serif;
}