/*
    Template Name:      NEON - Personal Portfolio HTML5 Template
    Description:        NEON is personal Portfolio/vCard/CV/Resume template designed for creative
                        designers, developers, freelancers and any professions around the world.
    Author Name:        Naieemur Rahman
    Author Profile:     https://themeforest.net/user/naieemur
    Author's e-mail:    naieemur@gmail.com
    Version:            1.0
*/


/*
    CSS INDEX
    ===================
    1. Default Css
    2. Backgrounds Css
    3. Preloader Css
    4. Header area Css
    5. Header top area Css
    6. Main menu area Css
    7. Slider area Css
    8. About area Css
    9. Skill area Css
    10. Work process area Css
    11. Service area Css
    12. Portfolio area Css
    13. Cta area Css
    14. Testimonial area Css
    15. footer top area Css
    16. Footer copyright area Css


*/


/*---
* 1. Default Css
*=============================*/

@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700');
body {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 28px;
    font-family: 'Roboto', sans-serif;
}

h2 {
    color: #333;
    font-size: 26px;
    font-weight: 700;
}

h3 {
    color: #333;
    font-size: 18px;
    font-weight: 500;
}

.no-padding {
    padding-left: 0;
    padding-right: 0;
}

.neon-content-block {
    padding: 90px 0;
}

.neon-btn {
    background-color: #3a7cec;
    border: 1px solid #3a7cec;
    border-radius: 5px;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    padding: 11px 30px;
    text-decoration: none;
    text-transform: uppercase;
    transition: .35s;
}

.neon-btn:hover {
    background: #444 none repeat scroll 0 0;
    border: 1px solid #444;
    color: #fff;
    text-decoration: none;
}

.neon-section-title {
    margin-bottom: 90px;
}

.neon-section-title h2 {
    margin: 0 0 5px;
    text-transform: uppercase;
}

.section-underline {
    background-color: #3a7cec;
    height: 3px;
    left: 50%;
    margin-left: -8px;
    position: absolute;
    top: 50px;
    width: 16px;
}

.section-underline::after {
    background: #999 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 2px;
    left: -30px;
    position: absolute;
    width: 25px;
}

.section-underline::before {
    background: #999 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 2px;
    position: absolute;
    right: -30px;
    width: 25px;
}

.section-gray {
    background-color: #f4f4f4;
}


/*---
* 2. Backgrounds Css
*=============================*/
 


/*---
* 3. Preloader Css
*=============================*/

.spinner {
    margin: 100px auto;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;
}

.spinner > div {
    background-color: #333;
    height: 100%;
    width: 6px;
    display: inline-block;
    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
    0%,
    40%,
    100% {
        -webkit-transform: scaleY(0.4)
    }
    20% {
        -webkit-transform: scaleY(1.0)
    }
}

@keyframes sk-stretchdelay {
    0%,
    40%,
    100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }
    20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}

.neon-site-preloader-wrap {
    background: #f4f4f4 none repeat scroll 0 0;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 999999;
}

.neon-site-preloader-wrap .spinner {
    left: 50%;
    margin: -20px 0 0 -25px;
    position: absolute;
    top: 50%;
}

.neon-site-preloader-wrap .spinner .rect1,
.neon-site-preloader-wrap .spinner .rect2,
.neon-site-preloader-wrap .spinner .rect3,
.neon-site-preloader-wrap .spinner .rect4,
.neon-site-preloader-wrap .spinner .rect5 {
    background-color: #3A7CEC;
}


/*---
* 12. Portfolio area Css
*=============================*/

.portfolio-menu {
    margin-bottom: 20px;
    text-align: center;
}

.portfolio-menu button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    cursor: pointer;
    display: inline-block;
    font-weight: 500;
    margin-right: 20px;
    outline: none;
    padding-left: 25px;
    padding-right: 5px;
    position: relative;
    text-transform: uppercase;
}

.portfolio-menu button::before {
    color: #888;
    content: "/";
    left: 0;
    position: absolute;
    top: 0;
}

.portfolio-menu button:last-child {
    margin-right: 0;
    padding-right: 0;
}

.portfolio-menu button:first-child {
    padding-left: 0;
}

.portfolio-area button:first-child::before {
    display: none;
}

.portfolio-menu button.active {
    color: #3a7cec;
}

.grid-item {
    padding-top: 15px;
    padding-bottom: 15px;
}

.single-portfolio {
    position: relative;
    overflow: hidden;
}

.single-portfolio img {
    width: 100%;
    transform: scale(1);
    transition: .45s;
}

.single-portfolio:hover img {
    transform: scale(1.12);
}

.sin-portfolio-overlay {
    background: #000 none repeat scroll 0 0;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    transition: .35s;
}

.sin-portfolio-icon {
    left: 0;
    opacity: 0;
    position: absolute;
    text-align: center;
    top: 25%;
    width: 100%;
    transition: .35s;
}

.sin-portfolio-icon a i.fa {
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
    height: 38px;
    line-height: 35px;
    width: 38px;
    transition: .35s;
}

.sin-portfolio-icon a:hover i.fa {
    color: #fff;
    background-color: #3A7CEC;
    border: 2px solid #3A7CEC;
}

.sin-portfolio-title {
    background: #000 none repeat scroll 0 0;
    bottom: -50px;
    color: #fff;
    left: 0;
    opacity: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    transition: .35s;
}

.sin-portfolio-title h4 {
    font-size: 15px;
    font-weight: 700;
    margin: 10px 0 2px;
    text-transform: uppercase;
}

.sin-portfolio-title p {
    color: #bbb;
    font-size: 13px;
    margin-bottom: 5px;
    text-transform: capitalize;
}

.single-portfolio:hover .sin-portfolio-overlay {
    opacity: .35;
}

.single-portfolio:hover .sin-portfolio-icon {
    opacity: 1;
    top: 30%;
}

.single-portfolio:hover .sin-portfolio-title {
    opacity: .70;
    bottom: 0;
}

.portfolio-btn {
    margin-top: 35px;
    text-align: center;
}

.portfolio-btn a.neon-btn {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 2px solid #3a7cec;
    color: #3a7cec;
}

.portfolio-btn a.neon-btn:hover {
    background: #444 none repeat scroll 0 0;
    border: 2px solid #444;
    color: #fff;
}


/*---
* 13. Cta area Css
*=============================*/


/**/


/*---
* 15. footer top area Css
*=============================*/

.footer-top-area {
    background-attachment: fixed;
    background-color: #ddd;
    background-position: center center;
    background-size: cover;
    border-top: 1px solid #ddd;
    color: #ddd;
}

.footer-top-overly {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
}

.footer-top-area .neon-section-title h2 {
    color: #fff;
}

.single-contact-block {
    border-bottom: 1px dashed #444;
    margin-bottom: 15px;
    padding-bottom: 15px;
    padding-left: 55px;
    position: relative;
    transition: .35s;
}

.single-contact-block:hover {
    opacity: .75;
}

.single-contact-block i.fa {
    color: #3a7cec;
    font-size: 35px;
    left: 0;
    position: absolute;
    top: 8px;
}

.contact-social i.fa {
    background-color: #3a7cec;
    border-radius: 5px;
    color: #fff;
    font-size: 18px;
    height: 30px;
    line-height: 30px;
    margin-right: 10px;
    margin-top: 15px;
    text-align: center;
    width: 30px;
    transition: .35s;
}

.contact-social i.fa:hover {
    background: #444 none repeat scroll 0 0;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    background: rgba(0, 0, 0, .15);
    border: 1px solid #777;
    margin-bottom: 20px;
    padding: 7px;
    width: 100%;
    color: white;
}

.contact-form textarea {
    height: 132px;
}

.contact-form input[type="submit"] {
    background-color: #3a7cec;
    border: medium none;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 11px 30px;
    text-transform: uppercase;
    transition: .35s;
}

.contact-form input[type="submit"] {
    border-bottom: 3px solid #154493;
    border-radius: 5px;
}

.contact-form input[type="submit"]:hover {
    background-color: #444;
    border-bottom: 3px solid #222;
}


/*---
* 16. Footer copyright area Css
*=============================*/

.footer-copyright-area {
    background-color: #090909;
    color: #bbb;
    font-size: 14px;
    padding: 20px 0;
}

.footer-copyright-area a {
    color: #3a7cec;
    font-weight: 500;
    text-decoration: none;
}
.affix {
      top: 0;
      width: 100%;
      z-index: 9999 !important;
  }
  .affix + .container-fluid {
      padding-top: 70px;
  }