/*
    Spark Responsive Design
*/

@media (max-width: 1024px) {
	.hero-section{
		height: 700px;
	}
	.tm-carousel .owl-controls{
		bottom: -10px;
	}
}

/* ---- Start of max-width 992px CSS ---- */
@media (max-width: 992px) {
   .navbar {
        height: 80px;
    }
    .navbar-header {
        padding: 18px 0;
    }
    ul.nav > li > a {
        font-size: 12px;
        line-height: 80px;
        padding: 0 10px;
    }
    .heading p br{
        display: none;
    }
    .hero-section {
        height: 550px;
    }
    .hero-caption h1 {
        font-size: 36px;
        line-height: 45px;
        margin: 0 0 25px;
    }
    .feature-content {
        margin-bottom: 30px;
    }
    .work-items li.work-item {
        width: 33.33%;
    }
    .team-list .list-item{
        overflow: hidden;
    }
    .member-thumb {
        width: 100%;
    }
    .left-item .member-thumb,
    .right-item .member-thumb{
        padding: 0;
    }
    .member-info{
        width: 100%;
    }
    .tm-carousel .owl-controls {
        bottom: 24%;
        left: 16%;
    }
    .tm-carousel .tm-item .tm-content {
        padding-top: 0;
    }
    .map-section {
        height: 280px;
    }

}
/* ---- End of max-width 992px CSS ---- */


/* ---- Start of min-width 480px and max-width 768px CSS ---- */
@media all and (min-width: 480px) and (max-width: 768px) {
	.hero-caption h1 br{
		display: none;
	}
    .feature-section .col-sm-6{
        width: 50%;
        float: left;
    }
	.team-list .col-sm-6{
		width: 50%;
		float: left;
	}
    .team-list .left-item,
	.team-list .right-item{
		padding: 15px;
	}
    .list-item .member-info{
		width: 100%;
    }
    .list-item .member-thumb{
		width: 100%;
	}
	.team-list .left-item .member-info{
		margin-bottom: 20px;
	}
	.team-list .right-item .member-info{
		margin-top: 20px;
	}
    .tm-carousel .tm-item .tm-thumb {
        margin: 0 5% 0 0;
        width: 25%;
    }
    .tm-carousel .tm-item .tm-content {
        width: 70%;
    }
    .tm-carousel .owl-controls {
          bottom: -30px;
          left: 0;
        width: 100%;
        display: block;
        text-align: center;
    }
    .tm-carousel .owl-controls .owl-dots .owl-dot {
        display: inline-block;
        margin: 0 5px;
        float: none;
    }
}
/* ---- End of min-width 480px and max-width 768px CSS ---- */


/* ---- Start of max-width 767px CSS ---- */
@media all and (max-width: 767px) {
   body, p{
	   font-size: 12px;
	   line-height: 22px;
   }
   h1{
	   font-size: 20px;
   }
   h2{
	   font-size: 16px;
   }
    .heading h1 span.head-border {
        margin-left: -100px;
        width: 200px;
    }
    .padding{
        padding: 60px 0;
    }
	.sticky.header{
		position: absolute;
	}
	.navbar{
		height: 60px;
	}
	.navbar-header{
		padding: 5px 0;
	}
    .header .navbar .navbar-collapse {
		background-color: #1aad59;
		border-top: medium none;
		box-shadow: none;
		margin: 0 -15px;
		overflow-x: visible;
		padding: 0;
	}
	ul.nav{
        margin: 0;
    }
	ul.nav > li > a{
        font-size: 16px;
		line-height: 60px;
		padding: 0 30px;
	}
	ul.nav > li > a:hover, 
	ul.nav > li > a:focus, 
	ul.nav > li > a:active,
	ul.nav > li.active > a{
		background-color: #2ecc71;
	}
    .hero-section {
        height: 420px;
    }
    .hero-caption h2 {
        font-size: 20px;
        margin: 0 0 15px;
    }
    .hero-caption h1 {
        font-size: 28px;
        line-height: 36px;
        margin: 0 0 20px;
    }
	.hero-caption h1 br{
		display: none;
	}
    .hero-caption p {
        display: none;
    }
	.feature-content h2{
		margin: 0 0 15px;
	}
    .spark-btn-lg {
        font-size: 16px;
        line-height: 45px;
        padding: 0 30px;
    }
    ul.timeline:before {
        left: 52px;
    }
    ul.timeline li .timeline-panel {
        width: calc(100% - 130px);
        width: -moz-calc(100% - 130px);
        width: -webkit-calc(100% - 130px);
    }
	.timeline li .timeline-panel h2{
		margin: 0 0 15px;
	}
    ul.timeline li .tl-circ {
        left: 22px;
        margin-left: 0;
        top: 0;
    }
    .timeline li:nth-child(2n+2) .tl-circ:before{
        right: -6px;
        left: auto;
    }
    ul.timeline > li > .timeline-panel {
        float: right;
        text-align: left;
    }
    .work-items li.work-item {
        width: 50%;
    }
	.filter-menu li{
		margin: 0 10px -1px 10px;
	}
    .skill-items > .skills-item div.skill-title,
    .skill-items > .skills-item div.progress{
        width: 100%;
    }
    .skill-items > .skills-item {
        height: 75px;
        margin-bottom: 20px;
    }
    .skill-items > .skills-item .skill-title{
        margin-bottom: 38px;
    }
    .skill-items > .skills-item div.progress{
        margin: 0;
    }
    .skill-title h3 {
        font-size: 16px;
        line-height: 30px;
        margin: 0 0 -20px;
    }
    .team-list {
        padding: 0;
    }
    .team-list::before{
        display: none;
    }
    .team-circle-top,
    .team-circle-bottom,
    .border-bottom{
        display: none;
    }
    .member-info{
		padding: 0;
		display: block;
		text-align: center;
    }
	.left-item .social-profiles {
		float: none;
		margin-right: 0;
		display: block;
		text-align: center;
	}
	.social-profiles li{
        margin-bottom: 30px;
        overflow: hidden;
    }
    .member-thumb{
        width: 37%;
    }
    .cta-section .cta-btn {
        margin-top: 15px;
    }
    .cta-section .cta-btn {
        font-size: 16px;
        line-height: 45px;
        margin-top: 20px;
        padding: 0 30px;
    }
    .contact-section div.col-sm-6{
        margin-bottom: 40px;
    }
    .scroll-to-top{
        display: none !important;
    }
	.footer{
		padding: 20px 0;
	}
	.footer-logo img{
		width: 60%;
	}
}
/* ---- End of max-width 767px CSS ---- */


/* ---- Start of max-width 480px CSS ---- */
@media all and (max-width: 480px) {
    .hero-caption h2 {
        font-size: 18px;
    }
    .hero-caption h1 {
		font-size: 24px;
    }
}
/* ---- End of max-width 480px CSS ---- */


/* ---- Start of max-width 420px CSS ---- */
@media all and (max-width: 420px) {
	.hero-section{
		height: 350px;
	}
	.hero-caption h2{
		font-size: 15px;
	}
	.hero-caption h1{
		font-size: 18px;
		line-height: 25px;
	}
	.hero-caption p{
		display: none;
	}
	.filter-menu li {
		margin: 0 5px -1px 5px;
	}
	.team-list .list-item {
		padding: 15px;
		border-bottom: 1px solid #ddd;
	}
	.team-list .list-item .member-info,
	.team-list .list-item .member-thumb{
		width: 100%;
		margin: 0;
	}
	.team-list .left-item .member-info{}
	.team-list .right-item .member-thumb{
		margin-bottom: 15px;
	}
	.social-profiles li{
		margin-bottom: 15px;
	}
	.tm-carousel .tm-item .tm-thumb {
		width: 100%;
		margin: 0 0 20px;
	}
	.tm-carousel .tm-item .tm-content{
		width: 100%;
		padding-bottom: 30px;
	}
	.tm-carousel .owl-controls {
		bottom: 0;
		left: 0;
		width: 100%;
		display: block;
		text-align: center;
	}
	.tm-carousel .owl-controls .owl-dots .owl-dot{
		float: none;
		display: inline-block;
	}
}
/* ---- End of max-width 420px CSS ---- */


/* ---- Start of max-width 380px CSS ---- */
@media all and (max-width: 380px) {
	.cta-section h1.cta-title{
		font-size: 18px;
	}
	.cta-section .cta-btn {
		font-size: 14px;
		line-height: 36px;
		padding: 0 20px;
	}
}
/* ---- End of max-width 380px CSS ---- */


/* ---- Start of max-height 420px CSS ---- */
@media screen and (max-height: 420px) {
    
}
/* ---- End of max-height 420px CSS ---- */