/*@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,700");*/

body {
    width: 100%;
    height: 100%;
}

html {
    width: 100%;
    height: 100%;
}


h2 small {
    color: #313941;
    font-weight: 300;
}

p {
    font-size: 1.15em;
}

@media (min-width: 1200px) {
    .container {
        /*max-width: 970px;*/
    }
}

.navbar-inverse {
    background-color: #313941;
    border-color: #1b1f24;
}

.navbar-brand {
    padding: 10px 30px 13px 15px;
}

.navbar-right li {
    display: inline-block;
    margin-right: 1px;
}

.navbar-right li a {
    padding: 8px 15px;
}
.app-name {
    font-family: 'Kaushan Script', cursive;
    font-size: 24px;
    color: #fff;
}

.app-name:before {
    font-family: 'Glyphicons Regular';
    font-style: normal;
    font-weight: normal;
    vertical-align: -2px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\E151";
}

@media (min-width: 767px) {
    .navbar {
        padding: 20px 0;
        -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
        transition: background .5s ease-in-out, padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
    }

    .top-nav-collapse .navbar-brand {
        padding: 13px 30px 13px 15px;
    }
}

.btn {
    transition: all 0.3s ease 0s;
}

.btn:hover {
    background: #3071A9
}

/**
 * Browser mockup code
 * Contribute: https://gist.github.com/jarthod/8719db9fef8deb937f4f
 * Live example: https://updown.io
 */

.browser-mockup {
    border-top: 2em solid rgba(239, 243, 246, 0.6);
    box-shadow: 0 0.1em 1em 0 rgba(0, 0, 0, 0.4);
    position: relative;
    border-radius: 3px 3px 0 0
}

.browser-mockup:before {
    display: block;
    position: absolute;
    content: '';
    top: -1.25em;
    left: 1em;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background-color: #f44;
    box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
}

.browser-mockup.with-tab:after {
    display: block;
    position: absolute;
    content: '';
    top: -2em;
    left: 5.5em;
    width: 20%;
    height: 0em;
    border-bottom: 2em solid white;
    border-left: 0.8em solid transparent;
    border-right: 0.8em solid transparent;
}

.browser-mockup.with-url:after {
    display: block;
    position: absolute;
    content: '';
    top: -1.6em;
    left: 5.5em;
    width: calc(100% - 6em);
    height: 1.2em;
    border-radius: 2px;
    background-color: white;
}

.browser-mockup > * {
    display: block;
}

.browser-mockup img {
    width: 100%;
}

.container-fluid.no-gutter {
    padding: 0px;
}
.container-fluid.no-gutter .row [class*='col-']:not(:first-child),
.container-fluid.no-gutter .row [class*='col-']:not(:last-child)
{
    padding-right: 0;
    padding-left: 0;
}

.row {
    margin-left:0;
    margin-right:0;
}

.item {
    border: none;
}

/* Isotope Transitions
------------------------------- */
.isotope,
.isotope .item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}

.isotope .item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property:    -moz-transform, opacity;
    -ms-transition-property:     -ms-transform, opacity;
    -o-transition-property:         top, left, opacity;
    transition-property:         transform, opacity;
}

/**
 * Buttons
 */
.btn-rounded {
    padding: 16px 30px;
    border-radius: 30px;
    font-size: 17px;
}

/**
 * Thumbnails
 */
.img-responsive {
    margin: 0 auto;
}

/**
 * Footer
 */
.footer-middle {
    padding: 80px 0 100px 0;
    height: 100%;
    position: relative;
    overflow: hidden;
    color: #aaa;
    background: #313941;
}
.footer-middle .container {
    position: relative;
    z-index: 1;
}
.footer-middle .page-scroll {
    text-decoration: none;
}
.footer-middle .app-name {
    font-size: 36px;
}

.copyright {
    font-family: Raleway, sans-serif;
    margin-top: 20px;
}

/********************
 * Intro
 ********************/

.intro-section {
    min-height: 100%;
    padding-top: 175px;
    text-align: center;
    background-color: #313941;
    color: #FFFFFF;
}

.intro-section .mockup-1 {
    width: 60%;
    margin-left: 5%;
}

.intro-section .mockup-2 {
    width: 60%;
    margin-top: -25%;
    margin-left: 35%;
}

.intro-section p {
    color: #c9d2db;
}

@media (min-width: 767px) {
    .intro-section h1 {
        font-size: 46px;
        margin: 25px 0 0 0;
    }

    .intro-section p {
        font-size: 1.15em;
        margin-top: 25px;
    }

    .intro-section .btn {
        margin-top: 10px;
    }
}

/********************
 * About
 ********************/

.about-section {
    min-height: 100%;
    padding: 100px 0;
    text-align: center;
    background-color: #eff3f6;
}

.about-section h1, .about-section h2, .about-section .items {
    margin-bottom: 40px;
}

.about-section .btn {
    margin-bottom: 80px;
}

.about-section h2 {
    line-height: 0.875em;
    margin-top: 0;
}
.about-section .items h4 {
    margin-top: 15px;
    font-weight: bold;
}

.about-section .icon-wrapper {
    height: 140px;
    text-align: center;
    margin: 35px 0;
}

.about-section .icon {
    width: 140px;
    height: 140px;
    background-color: #009eda;
    font-size: 70px;
    line-height: 140px;
    text-align: center;
    color: #fff;
    border-radius: 100%;
    margin: 0 auto;
    border: 5px solid #009eda;
}

.about-section .glyphicon-thumbs-up {
    top: 5px;
}

.about-section .glyphicon-send {
    top: 1px;
    left: -5px;
}

.about-section .glyphicon-charts {
    top: 0px;
}

/********************
 * Features
 ********************/

.features-section {
    min-height: 100%;
    padding: 100px 0;
    text-align: center;
}

.feature {
    margin-top: 80px;
}

.feature h3 {
    margin-bottom: 15px;
    font-weight: bold;
}

.feature img {
    -webkit-box-shadow: 0 1px 2px rgba(146,161,173,0.5);
    box-shadow: 0 1px 2px rgba(146,161,173,0.5);
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .feature .to-left {
        text-align: left;
    }
    .feature .to-right {
        text-align: right;
    }
}

/****/

.core-features-section {
    min-height: 100%;
    padding: 100px 0;
    text-align: center;
    background-color: #eff3f6;
}

.core-features-section .items, .core-features-section .lists {
    margin-top: 80px;
    margin-bottom: 40px;
}

.core-features-section .items h4 {
    margin-top: 15px;
    font-weight: bold;
}

.core-features-section .items .item-wrap {
    height: 320px;
}

.core-features-section .items .item-wrap img {
    -webkit-box-shadow: 0 1px 2px rgba(146,161,173,0.5);
    box-shadow: 0 1px 2px rgba(146,161,173,0.5);
}

@media (max-width: 768px) {

    .core-features-section .items .item {
        width: 100%;
    }

}

.filter {
    text-align: center;
    color: #333;
    margin: 60px 0 60px;
}

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.filter li {
    position: relative;
    display: inline-block;
}

.filter li a {
    text-decoration: none;
    padding: 7px 14px;
}

.filter .active {
    color: #FFFFFF;
    background-color: #009eda;
    border-radius: 7px;
}

.core-features-section .lists {
    text-align: left;
}

.features-group {
    background-color: #F0F0F0;
    border-radius: 40px;
    padding: 10px 20px;
}

.features-group:before, .features-list li:before {
    font-family: "Glyphicons Regular";
    display: inline-block;
    margin-right: 8px;
}

.features-tech:before {
    content: "\e137";
}

/********************
 * Promo
 ********************/

.promo-section {
    min-height: 370px;
    padding-top: 80px;
    text-align: center;
    background-color: #313941;
    color: #FFFFFF;
}

.promo-section .btn {
    margin-top: 40px;
}

/********************
 * Examples
 ********************/

.examples-section {
    min-height: 100%;
    padding: 100px 0;
    text-align: center;
}

.examples-section .items {
    margin-top: 40px;
}

.examples-section h2 {
    margin-bottom: 40px;
}

.examples-section h4 a {
    color: #313941;
}

/********************
 * Add-ons
 ********************/

.addons-section {
    min-height: 100%;
    padding: 100px 0;
    text-align: center;
    background-color: #eff3f6;
}

.addons-section .glyphicon {
    font-size: 46px;
    margin-top: 40px;
}

.addons-section p {
    margin-top: 10px;
}

/********************
 * Support
 ********************/

.support-section {
    min-height: 100%;
    padding: 100px 0;
    text-align: center;
}

.support-section .glyphicon {
    font-size: 46px;
    margin-top: 40px;
}

.support-section p {
    margin-top: 10px;
}