/*
    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;
}
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;
    text-align: center;
}
.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
*=============================*/
.slider-bg {
    background-image: url(assets/img/slider-bg-1.jpg)
}
.author-photo {
    background-image: url(assets/img/about-bg.jpg)
}
.footer-bg {
    background-image: url(assets/img/footer-bg-1.jpg)
}


/*---
* 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;
}


/*---
* 4. Header area Css
*=============================*/
.header-area {
    height: 100%;
    position: relative;
    z-index: 9;
}


/*---
* 5. Header top area Css
*=============================*/
.header-top-area {
    background-color: #3a7cec;
    color: #f4f4f4;
    padding: 2px 0;
    font-size: 13px;
}
.header-top-left p {
    display: inline-block;
    margin: 0 25px 0 0;
}
.header-top-social a i.fa {
    color: #f4f4f4;
    margin-left: 10px;
    transition: .35s;
}
.header-top-social a:hover i.fa {
    color: #000;
    opacity: 0.5;
}


/*---
* 6. Main menu area Css
*=============================*/
.mainmenu-area {
    background: #fff none repeat scroll 0 0;
    z-index: 999;
    width: 100%;
}
.is-sticky .mainmenu-area {
    background: #f8f8f8 none repeat scroll 0 0;
    box-shadow: 0 5px 5px -5px #000;
}
.mainmenu-area .navbar-header a {
    color: #3a7cec;
    height: auto;
}
.mainmenu-area .navbar-header .navbar-brand {
	border: 3px solid #3a7cec;
	display: inline-block;
	font-size: 20px;
	font-weight: 700;
	line-height: 22px;
	margin: 13px 0;
	padding: 5px 15px;
	text-transform: uppercase;
}
.mainmenu-area ul.nav.navbar-nav li {
    margin-left: 45px;
}
.mainmenu-area ul.nav.navbar-nav li a {
    color: #222;
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 22px 0;
    position: relative;
    text-transform: uppercase;
    text-decoration: none;
    transition: .35s;
}
.mainmenu-area ul.nav.navbar-nav li a:hover, .mainmenu-area ul.nav.navbar-nav li a:focus {
    color: #3a7cec;
    background: none;
}
.mainmenu-area ul.nav.navbar-nav li.active a {
    color: #3a7cec;
}
.mainmenu-area ul.nav.navbar-nav li a::after {
    background: #3a7cec none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 2px;
    left: 50%;
    margin-left: -5px;
    opacity: 0;
    position: absolute;
    transition: .55s;
    width: 10px;
}
.mainmenu-area ul.nav.navbar-nav li a:hover::after {
    left: 0;
    margin-left: 0px;
    opacity: 1;
    width: 100%;    
}
.mainmenu-area ul.nav.navbar-nav li.active a::after {
    left: 0;
    margin-left: 0px;
    opacity: 1;
    width: 100%;    
}


/*---
* 7. Slider area Css
*=============================*/
.slider-area {
    background-color: #ddd;
    background-position: center center;
    background-size: cover;
    color: #fff;
    height: 640px;
}
.slider-overly {
    background-color: rgba(0, 0, 0, 0.65);
    display: block;
    height: 100%;
    width: 100%;
}
.slider-table {
    display: table;
    height: 100%;
    width: 100%;
}
.slider-tablecell {
    display: table-cell;
    vertical-align: middle;
}
.slider-area h3 {
    color: #ddd;
    font-size: 25px;
    margin: 0 0 20px;
}
.slider-area h2 {
    color: #3a7cec;
    font-size: 35px;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0 0 20px;
}
.slider-area h1 {
    font-size: 55px;
    font-weight: 700;
    margin: 0 0 50px;
}
.neon-btn.slider-btn-1 {
    margin-right: 20px;
}
.neon-btn.slider-btn-2 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-color: #fff;
}
.neon-btn.slider-btn-2:hover {
    background: #444 none repeat scroll 0 0;
    border: 1px solid #444;
}


/*---
* 8. About area Css
*=============================*/
.about-content .neon-btn {
    margin-top: 30px;
}
.about-photo {
    text-align: center;
}
.about-photo-bg {
    background-color: #ddd;
    background-position: center center;
    background-size: cover;
    border: 5px solid #666;
    border-radius: 100%;
    display: inline-block;
    height: 170px;
    width: 170px;
    transition: .35s;
}
.about-photo:hover .about-photo-bg {
    border: 5px solid #3A7CEC;
}
.about-photo h3 {
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
}
.about-photo p {
    color: #666;
    font-weight: 700;
    text-transform: uppercase;
}


/*---
* 9. Skill area Css
*=============================*/
.single-skill {
    color: #333;
    margin-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 16px;
}
.single-skill .progress {
    background: #ccc none repeat scroll 0 0;
    border-radius: 0;
    box-shadow: 0 0 0;
    height: 10px;
    overflow: visible;
    position: relative;
}
.skill-value {
    color: #333;
    font-size: 16px;
    position: absolute;
    right: 0;
    top: -28px;
}
.single-skill p {
    margin: 0 0 5px;
}
.single-skill .progress-bar {
    background: #3A7CEC none repeat scroll 0 0;
}


/*---
* 10. Work process area Css
*=============================*/
.work-process-area {
    padding-top: 90px;
}
.work-process-content p {
    margin-bottom: 80px;
}
.single-work-process {
    color: #fff;
    padding: 45px 0;
}
.process-bg-1 {
    background-color: #135ad1;
}
.process-bg-2 {
    background-color: #276adb;
}
.process-bg-3 {
    background-color: #3a7cec;
}
.process-bg-4 {
    background-color: #498bfc;
}
.single-work-process p {
    line-height: 15px;
    margin: 0;
    text-transform: uppercase;
}
.single-work-process i.fa {
    font-size: 40px;
    margin-bottom: 20px;
}


/*---
* 11. Service area Css
*=============================*/
.single-service {
    border: 1px solid #f2f2f2;
    padding: 25px 15px;
    text-align: center;
    transition: .5s;
    margin-bottom: 30px;
}
.single-service i.fa {
    color: #555;
    font-size: 40px;
    transition: .35s;
}
.single-service h3 {
    margin: 15px 0 10px;
    text-transform: capitalize;
}
.single-service p {
    color: #777;
    line-height: 24px;
    margin: 0;
    font-size: 14px;
}
.single-service:hover {
    box-shadow: 0px 6px 6px #ddd;
}
.single-service:hover.single-service i.fa{
    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
*=============================*/
.cta-area {
    background-color: #333;
    padding: 35px 0;
}
.cta-area h1 {
    color: #fff;
    font-size: 30px;
    margin: 17px 0;
}
.cta-area a.neon-btn {
    margin: 10px 0;    
}


/*---
* 14. Testimonial area Css
*=============================*/
.testimonial-author-phpto {
    display: inline-block;
    height: 100px;
    width: 100px;
}
.testimonial-author-phpto img {
    border: 2px solid #bbb;
    border-radius: 50%;
    height: 100%;
    width: 100%;
}
.total-testimonial {
}
.single-testimonial {
    text-align: center;
}
.single-testimonial i.fa {
    color: #3A7CEC;
    display: block;
    font-size: 150%;
    margin: 40px 0 15px;
}
.single-testimonial p {
    color: #444;
    font-style: italic;
    margin-bottom: 35px;
}
.single-testimonial h4 {
    font-size: 16px;
    margin: 0 0 10px;
    text-transform: capitalize;
}
.single-testimonial h5 {
    color: #444;
    font-size: 14px;
    margin: 0;
    text-transform: capitalize;
}
.total-testimonial .owl-nav div {
    background: #fff;
    border: 2px solid #3a7cec;
    border-radius: 5px;
    color: #3a7cec;
    font-size: 22px;
    height: 35px;
    left: 0;
    line-height: 32px;
    margin-top: -20px;
    opacity: 0.65;
    position: absolute;
    text-align: center;
    top: 50%;
    transition: all 0.35s ease 0s;
    width: 35px;
}
.total-testimonial .owl-nav div.owl-next {
    left: auto;
    right: 0;
}
.total-testimonial .owl-nav div:hover {
    opacity: 1;
}


/*---
* 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%;
}
.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;
}