/* ==========================================================================
   General
   ========================================================================== */

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

body {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
}

a {
    color: #171980;
}

    a:hover {
        color: #454799;
        text-decoration: none;
    }

    a:focus {
        outline: none;
    }

img {
    max-width: 100%;
    height: auto;
}

ul,
li {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ==========================================================================
   Header styles
   ========================================================================== */



.main-header {
    background: url(../img/bg.jpg) center center no-repeat scroll;
    -webkit-background-size: cover;
    background-size: cover;
    padding: 3.2em 0;
    position: relative;
    overflow-x: hidden;
}

.logo,
.head-hero h1 {
    text-align: center;
}

.highlight {
    font-weight: 400;
}

.overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDA5OWNjIiBzdG9wLW9wYWNpdHk9IjAuNSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZjMTRkIiBzdG9wLW9wYWNpdHk9IjAuNSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(23, 25, 128,0.5)), color-stop(100%, rgba(249,151,51,0.5)));
    background: -webkit-linear-gradient(-45deg, rgba(23, 25, 128,0.5) 0%, rgba(249,151,51,0.5) 100%);
    background: -webkit-linear-gradient(315deg, rgba(23, 25, 128,0.5) 0%, rgba(249,151,51,0.5) 100%);
    background: linear-gradient(135deg, rgba(23, 25, 128,0.5) 0%, rgba(249,151,51,0.5) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#800099cc', endColorstr='#80ffc14d', GradientType=1 );
}

.logo {
    margin-bottom: 1.6em;
}

.head-hero h1 {
    font-size: 36.492px;
    color: #fff;
    line-height: 1.2;
    text-transform: none;
    font-weight: 200;
}

.button {
    color: #fff;
    background: #171980;
    border-radius: 5px;
    -webkit-transition: background .5s ease-in, border-color .5s ease-in;
    transition: background .5s ease-in, border-color .5s ease-in;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
}

    .button:hover {
        color: #fff;
        background: #454799;
        border-color: #454799;
    }

    .button i {
        padding-right: .5em;
    }

.form-control,
.btn {
    padding: 12.8px 12px;
}

/*Fix padding issue in ie 10 and above*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

    .form-control {
        padding: 1.01em 12px;
    }
}

.social li {
    display: inline;
    margin-right: 1em;
}

    .social li:last-child {
        margin-right: 0;
    }

.social a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    border-radius: 5px;
    -webkit-transition: background .5s ease-in;
    transition: background .5s ease-in;
}

.social a {
    color: #fff;
    background: #171980;
}

    .social a:hover {
        background: #454799;
    }

/* ==========================================================================
   Navigation
   ========================================================================== */



.main-nav {
    position: fixed;
    right: 2%;
    z-index: 10;
}

    .main-nav a {
        width: 14px;
        height: 14px;
        display: inline-block;
        border-radius: 50%;
        background: rgba(223, 223, 223, 0.89);
    }

    .main-nav .active a {
        background: #171980;
    }

.nav > li.active > a:hover,
.nav > li.active > a:focus {
    text-decoration: none;
    background-color: #454799;
}

/* ==========================================================================
   Subscription Form
   ========================================================================== */

.center-block {
    float: none;
}

.subscribe {
    margin: 3.2em 0 4.8em;
}

#mc-notification,
.contact-form .error {
    margin: 8px 0 0;
}

    #mc-notification .alert,
    #mc-notification .success {
        display: block;
        padding: .4em 0 .4em 1em;
        border-radius: 4px;
        color: #fff;
    }

    #mc-notification .alert,
    #form-messages.error {
        background: rgba(231, 76, 60, 0.7);
    }

    #mc-notification .success,
    #form-messages.success {
        background: rgba(39, 174, 96, 0.7);
    }

.alert i,
.success i {
    padding-right: .5em;
}

/* ==========================================================================
   Features
   ========================================================================== */

.section-spacing {
    padding: 1.8em 0;
}

.features h2,
.team h2,
.contact h2 {
    text-transform: uppercase;
    position: relative;
    margin-top: 0;
}

    .features h2:after,
    .team h2:after,
    .contact h2:after,
    .site-footer h2:after {
        content: '';
        height: 1px;
        background: #171980;
        position: absolute;
        width: 100px;
        bottom: -.5em;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

.features-slider {
    padding-top: 3.2em;
}

.app-features h4 {
    margin-top: 0;
}

.app-features {
    margin-bottom: 1.6em;
}

.slick-slider {
    margin-bottom: 1.6em;
}

.features p,
.site-footer small {
    color: #969696;
}

.features .slick-dots {
    bottom: -3.2em;
}

    .features .slick-dots li button:before {
        color: rgba(51, 181, 229, 0.3);
        opacity: 1;
    }

    .features .slick-dots li.slick-active button:before {
        opacity: 0.75;
        color: #171980;
    }

/* ==========================================================================
   team
   ========================================================================== */

.team,
.site-footer {
    background: #F1F1F1;
}

    .team h3 {
        color: #444;
    }

.team-slider {
    margin-top: 3.2em;
}

.team .slick-dots li button:before {
    color: #171980;
}

.team-details {
    position: relative;
    display: inline-block;
    margin-top: 1.6em;
}

    .team-details figcaption {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 1.6em 1em;
        background: rgba(51, 181, 229, 0.8);
        color: #fff;
        opacity: 0;
        -webkit-transition: opacity 0.35s ease-in;
        transition: opacity 0.35s ease-in;
        position: absolute;
    }

    .team-details:hover figcaption {
        opacity: 1;
    }

    .team-details figcaption p:first-child {
        font-size: 20px;
        margin-top: 12.5px;
        margin-bottom: 12.5px;
        font-weight: 600;
    }

        .team-details figcaption p:first-child:after {
            background: #fff;
            width: 50%;
            display: block;
            position: absolute;
            content: '';
            height: 1px;
            left: 0;
            right: 0;
            margin: 0 auto;
            margin-top: .4em;
        }

    .team-details img {
        width: 100%;
    }

    .team-details figcaption p {
        margin-top: 1.6em;
    }

.team .social {
    margin-top: 1.6em;
}

.team .slick-dots {
    bottom: -4em;
}

.team .slick-slider {
    margin-bottom: 3.2em;
}

/* ==========================================================================
   Form Validation
   ========================================================================== */

#form-messages.success,
#form-messages.error {
    color: white;
    padding: .8em;
    margin-bottom: 0.8em;
    border-radius: 4px;
}

/* ==========================================================================
   contact
   ========================================================================== */

.contact .form-control {
    border-color: #ddd;
}

.form-group {
    margin-bottom: 1.6em;
}

.contact h2 {
    margin-bottom: 89.6px;
}

.contact .btn {
    padding: 12.8px 1em;
    width: 100%;
}

/* ==========================================================================
   footer
   ========================================================================== */



.site-footer h3 {
    margin-top: 0;
}

.scroll-top {
    margin-bottom: 0;
}

.site-footer .social {
    margin: 1.6em 0;
}

/* ==========================================================================
   scroll top
   ========================================================================== */

.scroll-top {
    margin-bottom: 0;
}

    .scroll-top a {
        position: fixed;
        bottom: 2em;
        right: 2em;
        text-decoration: none;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.3);
        font-size: 12px;
        padding: .8em 1em;
        display: none;
        z-index: 200;
        border-radius: 5px;
        -webkit-transition: background .5s ease-in;
        transition: background .5s ease-in;
    }

        .scroll-top a:hover {
            background: #454799;
        }

/* ==========================================================================
   Small devices (tablets, 768px and up)
   ========================================================================== */

@media (min-width: 768px) {

    .main-nav {
        top: 30%;
    }

    .head-hero h1 {
        font-size: 64.761px;
    }

    .features-slider {
        padding-top: 4.8em;
    }

    .team .slick-slider {
        margin-bottom: 4em;
    }
}

/* ==========================================================================
   Medium devices (desktops, 992px and up) 
   ========================================================================== */

@media (min-width: 992px) {

    .main-nav {
        top: 40%;
    }

    .main-header {
        min-height: 100%;
        background: url(../img/slider2.jpg) center center no-repeat fixed;
        -webkit-background-size: cover;
        background-size: cover;
    }

    .logo,
    .head-hero h1 {
        text-align: left;
    }

    .logo {
        margin: 0.8em 0 3.2em;
    }

    .hero-img {
        margin-top: -3.2em;
        max-width: none;
    }

    .subscribe {
        margin: 3.2em 0 0;
    }

    .app-features {
        margin-bottom: 3.2em;
    }

        .app-features:last-child {
            margin-bottom: 0;
        }

    .features .slick-dots {
        bottom: -1.6em;
        text-align: right;
        right: 17.3%;
    }

    /* ==========================================================================
   animation
   ========================================================================== */


    .animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    @-webkit-keyframes slideInLeft {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-2000px);
            transform: translateX(-2000px);
        }

        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
    }

    @keyframes slideInLeft {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-2000px);
            -ms-transform: translateX(-2000px);
            transform: translateX(-2000px);
        }

        100% {
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }
    }

    .slideInLeft {
        -webkit-animation-name: slideInLeft;
        animation-name: slideInLeft;
    }

    @-webkit-keyframes slideInRight {
        0% {
            opacity: 0;
            -webkit-transform: translateX(2000px);
            transform: translateX(2000px);
        }

        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
    }

    @keyframes slideInRight {
        0% {
            opacity: 0;
            -webkit-transform: translateX(2000px);
            -ms-transform: translateX(2000px);
            transform: translateX(2000px);
        }

        100% {
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
        }
    }

    .slideInRight {
        -webkit-animation-name: slideInRight;
        animation-name: slideInRight;
    }

    @-webkit-keyframes slideInDown {
        0% {
            opacity: 0;
            -webkit-transform: translateY(-2000px);
            transform: translateY(-2000px);
        }

        100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
    }

    @keyframes slideInDown {
        0% {
            opacity: 0;
            -webkit-transform: translateY(-2000px);
            -ms-transform: translateY(-2000px);
            transform: translateY(-2000px);
        }

        100% {
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
        }
    }

    .slideInDown {
        -webkit-animation-name: slideInDown;
        animation-name: slideInDown;
    }
}

/* ==========================================================================
	 Note: Disable this media query if you will be using your own hero image [iphone.png].
   Fix for very Large devices (large desktops, 1410px and up) 
   ========================================================================== */

@media (min-width: 1410px) {

    .hero-img {
        display: none;
    }

    .over-hide:after {
        content: url(../img/iphone-large-screen.png);
        margin-bottom: 3.2em;
        display: block;
    }
}

.btn-default {   
    border-color: #454799;
}