/*colors*/
/*853E33 - red*/
/*D9B449 - yellow*/
/*49CCD9 blue*/
/*#6BC24B - green*/
/*#6d90a3 - lightgreen*/
/*7950CF - purple*/

body {
    font-size: 16px;
    font-family: 'Microsoft YaHei UI';
    font-weight: 300;
    height: 100%;
    min-height: 100%;
    background-color: #333;
}

.big-picture {
    position: relative;
}

.big-picture > img {
    width: 100%;
}

.big-picture-caption {
    background-color: black;
    opacity: 0.7;
    position: absolute;
    right: 0px;
    left: 0px;
    bottom: 20px;
    padding-right: 30px;
}

@media (max-width: 767px) {
    .big-picture-caption > h2, p {
        text-align: left !important;
    }
}

@media (max-width: 600px) {
    .big-picture-caption {
        bottom: 5px;
        font-weight: bold;
    }

    .big-picture-caption > h2 {
        font-weight: bold;
    }
}

.circle {
    color: white;
    background: #fff;
    text-align: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
}

.circle-sm {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    text-align: center;
    padding: 0px;
}

.circle-sm > i {
    line-height: 86px;
}

@media (min-width: 992px) {
    .circle {
        width: 150px;
        height: 150px;
    }

    .circle > i {
        line-height: 150px;
    }
}

@media (max-width: 992px) {
    .circle {
        width: 120px;
        height: 120px;
    }

    .circle > i {
        line-height: 120px;
    }
}

.yellow {
    background: #F1C243;
}

.blue {
    background: #27b8d1;
}

.green {
    background: #91c46c;
}

footer {
    background-color: #333;
    /*background: #234019;-darkgreen*/
    color: #777;
    padding: 48px 0;
}

html {
    height: 100%;
    min-height: 100%;
}

.page-host {
    background-color: #fff;
    padding-top: 50px;
}

.flexbox {
    display: flex;
}

.flexbox-center {
    justify-content: center;
}

.flexbox-center > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flexbox-reverse-even :nth-of-type(even) > div {
    flex-direction: row-reverse;
}

.flexbox-reverse-even :nth-of-type(even) > h2 {
    text-align: right;
}

.flexbox-column {
    display: flex;
    flex-direction: column;
}

.flexbox-align-center {
    align-items: center;
}

.flex-grow {
    flex-grow: 2;
}

.flexbox-wrap {
    flex-wrap: wrap;
}

.align-start {
    align-self: flex-start;
}

.map-overlay {
    background:transparent; 
    position:relative; 
    width:100%;
    height:360px; /* your iframe height */
    top:360px;  /* your iframe height */
    margin-top:-360px;  /* your iframe height */
}

.map-wrapper {
    pointer-events: auto;
}

.mb64 {
    margin-bottom: 64px;
}

.navbar {
    border-bottom-color: #6d90a3;
    border-bottom-width: 5px;
    border-bottom-style: solid;
}

.navbar-brand > i {
    color: #6d90a3;
}

.package {
    padding: 0 20px;
}

.package-price {
    color: #D9B449;
    font-weight: 500;
    padding: 8px 0;
}

.paddingtop16 {
    padding-top: 16px;
}

.rolesbar {
    list-style-type: none;
}

@media (min-width: 580px) {
    .rolesbar > li {
        display: inline-block;
        padding-left: 5px;
        padding-right: 5px;
    }
}

@media (max-width: 580px) {
    .rolesbar > li {
        display: block;
        padding-left: 5px;
        padding-right: 5px;
    }
}

.rolesbar > .active > a {
    font-weight: bold;
}

.row-main-feature {
    background-color: #fff;
    padding: 40px 0;
}

.row-message {
    color: #F2F2F2;
    background-color: #7950CF;
    padding: 40px 0;
}

.row-packages {
    background-color: #6d90a3;
    padding: 20px 0;
}

.row-partners {
    background-color: #3e3e3e;
    padding: 20px 0;
}

.row-register {
    background-color: #6d90a3;
    padding: 40px 0;    
}

.row-solutions {
    background-color: #fff;
    padding: 16px 0;
}

.row-title {
    padding-top: 16px;
}

.section-divider {
    margin: 24px 0;
}

@media (min-width: 992px) {
    .service-image {
        max-width: 400px;
    }
}

@media (max-width: 992px) {
    .service-image {
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    .service-image {
        max-width: 200px;
    }
}

.site-content {
    min-height: 240px;
}

.site-heading {
    padding-top: 16px;
}

.solutions > .flexbox {
    justify-content: center;
    align-items: center;
}

.text-bm {
    position: absolute;
    bottom: 0px;
    right: 50%;
}

.text-muted + h3 {
    font-weight: 100 !important;
}

.text-partner {
    font-weight: 200 !important;
    color: azure;
}

.bluecolor {
    color: #27b8d1;
}

.whitecolor {
    color: #fff;
}

.whitebgcolor{
    background-color: #fff !important;
}

/*video { 
  -webkit-transform: scaleX(2); 
  -moz-transform: scaleX(2);
}*/

.video-wrapper{
    height: 540px;
}

#promovideo {
    width: 100%;
}

/*Bootstrap modifications*/
.btn-primary {
    color: #fff;
    background-color: #22A2B7;
    border-color: #1B8091;
}

.btn-primary:hover {
    color: #fff;
    background-color: #1B8091;
    border-color: #0F4851;
}

.focus.btn-primary, .btn-primary:focus {
    color: #fff;
    background-color: #0F4851;
    border-color: #0C383F;
}

.btn-primary:active,
.btn.btn-primary.active {
    color: #fff;
    background-color: #0F4851;
    border-color: #0C383F;
}

.btn-primary:active:hover,
.btn-primary.active:hover {
    color: #fff;
    background-color: #0F4851;
    border-color: #0C383F;
}

.carousel .item {
    background-color: #777;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
}

.navbar-brand {
    font-size: 26px;
    padding: 20px;
    height: 60px;
}

.navbar-brand > span {
    font-weight: lighter;
    font-size: xx-large;
}

.navbar-nav > li > a {
    padding-top: 20px;
    padding-bottom: 20px;
}

.navbar-nav > li > i {
    padding-top: 20px;
    padding-bottom: 20px;
}

.navbar-nav :last-child {
    float: right;
}

/*animations*/