/* @font-face {
    font-family: Quicksand-Bold;
    src: url(../fonts/Quicksand-Bold.otf);
    font-weight: bold;
}
@font-face {
    font-family: Quicksand-Book-Regular;
    src: url(../fonts/Quicksand_Book.otf);
}


@font-face {
    font-family: Avenir-Book;
    src: url(../fonts/Avenir-Book.ttf);
} */

html,
body {
    font-family: Montserrat, sans-serif;
    height: 100%;
    background: #f9fcff;
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -40px;
    padding: 0 0 60px;
}

.wrap > .container {
    padding: 78px 15px 20px;
}

.site-index {
    margin-top: 0;
}

.footer {
    height: 40px;
    background-color: rgb(220, 220, 220);
    /* border-top: 1px solid #ddd; */
    padding-top: 10px;
    color: #2c989a;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view td {
    white-space: nowrap;
}

.grid-view .filters input,
.grid-view .filters select {
    min-width: 50px;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.help-block {
    display: block !important;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav > li > form {

}

@media (max-width: 768px) {
    .nav li > form {
        padding: 3px;
    }
}

.nav > li > form > button:hover {
    text-decoration: none;
}

/* Cloud */
ul.main-cloud {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    overflow: hidden;
    margin-top: -30px;
}

.main-cloud li {
    border-radius: 50%;
    background: white;
}

.main-cloud li:nth-child(1) {
    width: 200px;
    height: 200px;
    margin: -100px 0 0 0px;
}

.main-cloud li:nth-child(2) {
    width: 300px;
    height: 300px;
    margin: -140px 0 0 -40px;
}

.main-cloud li:nth-child(3) {
    width: 130px;
    height: 130px;
    margin: 0px 0 0 -50px;
}

.main-cloud li:nth-child(4) {
    width: 360px;
    height: 360px;
    margin: -140px 0 0 -60px;
    text-align: center;
}

.main-cloud li:nth-child(5) {
    width: 280px;
    height: 280px;
    margin: -120px 0 0 -60px;
}

.main-cloud li:nth-child(6) {
    width: 130px;
    height: 130px;
    margin: -20px 0 0 -50px;
}

.main-cloud li:nth-child(7) {
    width: 260px;
    height: 260px;
    margin: -140px 0 0 -60px;
}

.backend-intro {
    background: #fff;
    color: #000;
    text-align: center;
    padding: 20px 0 0 0;
    margin-bottom: 0;
}

.main-cloud object.logo {
    margin-top: 160px;
    width: 80px;
    margin-bottom: 15px;
}

.main-cloud .wlcm {
    margin-top: 12px;
    color: #696969;
    text-transform: uppercase;
    line-height: 12px;
}

.main-cloud .lead-title {
    color: #696969;
    font-size: 22px;
    font-weight: bold;
}

.navbar.navbar-inverse {
    background: #40c1c4;
    margin: 0;
}

.navbar-brand img {
    width: 50px;
    padding: 0px 0 0px 13px;
}

.home .wrap {
    background: #57b6f0;
    overflow: hidden;
}

.account-activate {
    background: #f9fcff;
    overflow: hidden;
}

.panel.panel-primary > .panel-heading {
    background-color: #40c1c4;
}

.navbar.navbar-inverse .dropdown-menu .active > a {
    background-color: #f0576d;
}

.navbar.navbar-inverse .dropdown-menu .active > a:hover, .navbar.navbar-inverse .dropdown-menu .active > a:focus,
.navbar.navbar-inverse .dropdown-menu li > a:hover, .navbar.navbar-inverse .dropdown-menu li > a:focus {
    color: #f0576d;
}

#clouds {
    margin-top: -120px;
}

.cloud {
    width: 200px;
    height: 60px;
    background: #fff;

    border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;

    position: relative;
}

.cloud:before, .cloud:after {
    content: '';
    position: absolute;
    background: #fff;
    width: 100px;
    height: 80px;
    position: absolute;
    top: -15px;
    left: 10px;

    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;

    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    -moz-transform: rotate(30deg);
}

.cloud:after {
    width: 120px;
    height: 120px;
    top: -55px;
    left: auto;
    right: 15px;
}

span.white {
    width: 100px;
    height: 10px;
    background: #fff;
    display: inline-block;
    position: relative;
    margin: 0 50px;
}

div.street {
    display: inline-block;
    left: 1000px;
    overflow: hidden;
    width: 2220px;
}

.footer {
    overflow: hidden;
}

/*Time to animate*/
.x1 {
    left: 300px;
    top: 180px;
    -webkit-animation: moveclouds 15s linear infinite;
    -moz-animation: moveclouds 15s linear infinite;
    -o-animation: moveclouds 15s linear infinite;
}

/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
    left: 200px;
    top: 110px;

    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.6; /*opacity proportional to the size*/

    /*Speed will also be proportional to the size and opacity*/
    /*More the speed. Less the time in 's' = seconds*/
    -webkit-animation: moveclouds 30s linear infinite;
    -moz-animation: moveclouds 30s linear infinite;
    -o-animation: moveclouds 30s linear infinite;
}

.x3 {
    left: 270px;
    top: 80px;

    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0.7; /*opacity proportional to the size*/

    -webkit-animation: moveclouds 25s linear infinite;
    -moz-animation: moveclouds 25s linear infinite;
    -o-animation: moveclouds 22s linear infinite;
}

.x4 {
    left: 470px;
    top: 120px;

    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
    opacity: 0.75; /*opacity proportional to the size*/

    -webkit-animation: moveclouds 21s linear infinite;
    -moz-animation: moveclouds 21s linear infinite;
    -o-animation: moveclouds 21s linear infinite;
}

.x5 {
    left: 250px;
    top: 70px;

    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.8; /*opacity proportional to the size*/

    -webkit-animation: moveclouds 17s linear infinite;
    -moz-animation: moveclouds 17s linear infinite;
    -o-animation: moveclouds 17s linear infinite;
}

/*variable speed, opacity, and position of clouds for realistic effect*/
.x6 {
    left: 400px;
    top: 20px;

    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0.5; /*opacity proportional to the size*/

    /*Speed will also be proportional to the size and opacity*/
    /*More the speed. Less the time in 's' = seconds*/
    -webkit-animation: moveclouds 35s linear infinite;
    -moz-animation: moveclouds 35s linear infinite;
    -o-animation: moveclouds 35s linear infinite;
}
.btn.btn-primary{
    border:1px solid #ddd;
}
@-webkit-keyframes moveclouds {
    0% {
        margin-left: 1000px;
    }
    100% {
        margin-left: -1000px;
    }
}

@-moz-keyframes moveclouds {
    0% {
        margin-left: 1000px;
    }
    100% {
        margin-left: -1000px;
    }
}

@-o-keyframes moveclouds {
    0% {
        margin-left: 1000px;
    }
    100% {
        margin-left: -1000px;
    }
}

.nav-tabs li.active {
    background: #f0576d;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: #fff !important;
}

.nav-tabs li {
    background: #fff;
}

.nav-tabs > li > a, .nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
    color: #f0576d !important;
}
.cloud-4 > div {
    position: relative;
    top: 50%;
}
.alert.alert-success {
    margin: 0;
}
.col-center {
    float:none;
    display: block;
    margin: 0 auto;
}
.padding-top-20{
    padding-top: 20px;
}
.msg-box {
    text-align: center;
    padding:64px;
    background: #FFF;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 10px 2px rgba(116,137,158,0.5);
    -moz-box-shadow: 0 0 10px 2px rgba(116,137,158,0.5);
    box-shadow: 0 0 10px 2px rgba(116,137,158,0.5);
}
.msg-box img {
    margin: 0 auto;
}
.msg-box h3 {
    margin-top: 24px;
    color: #40c2c4;
    font-size: 20pt;
    font-family: Montserrat, sans-serif;
    font-weight: bold;
}
.msg-box h5 {
    margin-top: 16px;
    color: #f0576c;
    font-size: 16pt;
    font-family: Montserrat, sans-serif;
}

.reset-password-title {
    font-family: Montserrat, sans-serif;
    font-weight: bold;
}
@media (max-width: 767px) {
    .site-index{
        margin-top: 20px;
    }
    .cloud-4 {
        position: relative;
    }
    .cloud-4 > div {
        position: absolute;
        top: auto;
        bottom: 25px;
        width: 100%;
    }
    .wrap > .container {
        padding: 50px 15px 20px;
    }
    .main-cloud li:nth-child(4) {
        margin: 0;
        margin-top: -200px;
        width: 100%;
    }
    .navbar-toggle {
        display: none;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .site-index{
        margin-top: 0;
    }
    .cloud-4 {
        position: relative;
    }
    .cloud-4 > div {
        position: absolute;
        top: auto;
        bottom: 25px;
        width: 100%;
    }
    .wrap > .container {
        padding: 50px 15px 20px;
    }
    .main-cloud li:nth-child(4) {
        margin: 0;
        margin-top: -200px;
        width: 100%;
    }
    .navbar-toggle {
        display: none;
    }
}