/* ================================= Responsive CSS ================================= */
@media(min-width:768px) {
    .timeline:before {
        left: 50%;
    }

    .timeline>li {
        margin-bottom: 100px;
        min-height: 100px;
    }

    .timeline>li .timeline-panel {
        float: left;
        width: 41%;
        padding: 0 20px 20px 30px;
        text-align: right;
    }

    .timeline>li .timeline-image {
        left: 50%;
        width: 100px;
        height: 100px;
        margin-left: -50px;
    }

    .timeline>li .timeline-image h4 {
        margin-top: 16px;
        font-size: 13px;
        line-height: 18px;
    }

    .timeline>li.timeline-inverted>.timeline-panel {
        float: right;
        padding: 0 30px 20px 20px;
        text-align: left;
    }
	
}

@media(min-width:992px) {
    .timeline>li {
        min-height: 150px;
    }

    .timeline>li .timeline-panel {
        padding: 0 20px 20px;
    }

    .timeline>li .timeline-image {
        width: 150px;
        height: 150px;
        margin-left: -75px;
    }

    .timeline>li .timeline-image h4 {
        margin-top: 30px;
        font-size: 18px;
        line-height: 26px;
    }

    .timeline>li.timeline-inverted>.timeline-panel {
        padding: 0 20px 20px;
    }
}

@media(min-width:1200px) {
    .timeline>li {
        min-height: 170px;
    }

    .timeline>li .timeline-panel {
        padding: 0 20px 20px 100px;
    }

    .timeline>li .timeline-image {
        width: 170px;
        height: 170px;
        margin-left: -85px;
    }

    .timeline>li .timeline-image h4 {
        margin-top: 40px;
    }

    .timeline>li.timeline-inverted>.timeline-panel {
        padding: 0 100px 20px 20px;
    }
}


/* ---------- MAX 1024px ---------- */
@media only screen and (max-width:1024px) {
	
	/* Blog */
	.blog .blog-box img, .blog .effects .img {
		float:none;
		width:100%;
	}
	.blog .blog-image{
		text-align:center;
	}
	
	/* Blog Grid */
	.blog-grid .blog-social i{
		margin:0 2px;
	}
	.blog-grid .blog-social{
		padding:10px 5px 0;
	}
	/* Blog Timeline */
	.blog-timeline-event-left:before{
		right:-42px;
	}
	.blog-timeline-event-right:before{
		left:-30px;
	}
}
/* ---------- MAX 991PX ---------- */
@media only screen and (max-width:991px){
	
	#short-code #top-section-sticky-wrapper{
		height:120px;
	}	
	
	.intro-text{
		padding-top:50px;
		padding-bottom:50px;
		text-align:center;
	}
	.subscribe .form-horizontal .form-group {
		margin-left: 0;
		margin-right: 0;
	}
	
	/* Blog Outer */
	.blog-outer .blog-inner-bottom .social-title, .blog-outer .blog-inner-bottom .blog-social,  .blog-outer .blog-title{
		text-align:center;
	}
	.blog-status img{
		width:100%;
	}	
	.blog-outer .blog-status ul{
		text-align:center;
	}
	/* Shortcodes */
	.shortcodes .testimonial .testimonial2-inner .testimonial-content img, .shortcodes .testimonial3-inner .item-img{
		float:none;
		text-align:center;
		margin:10px auto;
		display:block; 
	}
	.shortcodes .carousel .carousel-indicators{
		bottom:-15px;
	}
	.blog-timeline .blog-status .blog-title{
		border-left:0px;
	}	
	section#reviews .review-filtering .review .review-person{
		margin-top:-50px;
	}
	section#reviews .review-filtering .review .review-comment{
		padding:40px;
	}
}

/* ---------- MAX 800PX ---------- */
@media only screen and (max-width:800px){

	/* Blog Timeline */
	.blog-timeline-event-left:before{
		right:-38px;
	}
	.blog-timeline-event-right:before{
		left:-26px;
	}
	section#reviews .review-filtering .review .review-comment{
		padding:30px;
	}
	section#reviews .review-comment h3{
		font-size:25px;
	}
	.review-details, .review-comment{
		width:100%;
		display:inherit;
	}
}

/* ---------- MAX 768PX ---------- */
@media only screen and (max-width:768px){
	/* Menu Navbar */
	.nav > li > a{
		padding:10px;
	}
	section#reviews .review-comment h3{
		font-size:23px;
	}
	section#reviews .review-filtering .review .review-details{
		float:none;
		width:100%;
		text-align:center;
	}
	section#reviews .review-filtering .review .review-comment{
		float:none;
		width:100%;
		margin:0;
	}
	section#reviews .review-filtering .review .client-name h3{
		margin:0px;
		padding:10px 15px;
	}
	section#reviews .review-filtering .review .review-person{
		margin:0;
		padding:20px;
	}
	
}

/* ---------- MIN 767PX ---------- */
@media only screen and (min-width:767px) {
	header a.navbar-brand{
		padding: 0px 15px;
		line-height:65px;
	}
	header .navbar li.active a,
	header .navbar li a:hover,
	header .navbar li a:focus{
		color:#171717;
	}
}

/* ---------- MAX 767PX ---------- */
@media only screen and (max-width:767px) {		
	/* Navbar */		
	header .navbar {
        padding: 0;
		z-index:1001;
		background-color: rgba(0, 5, 8, 0.9);
	}	
	header .navbar-collapse.collapse.in{
		background-image:url(../images/pattern.png);
		background-color:rgba(0,0,0,.7);
	}
	.intro-text h1{
		padding-top:40px;
	}
	#services ul.left{    
		padding-left: 3%;
		border-right:0;
	}
	#services ul.left,
	#services ul.right{
		width:100%;
	}
	#services .left li {
		text-align: left;
	}
	#services .left li i {
		left:0;
		right:auto;
	}
	#services .left li h5,
	#services .left li p{
		margin-left:110px;
		margin-right:0px;
	}
	#services .left li .service-icon{
		left:0;
		right:0;
	}
	#services .left li i:after,
	#services .right li i:after{
		height:0;
	}
	header .navbar-nav > li > a{
		padding:0px 15px;
		line-height:45px;
	}
	header .dropdown-menu > li > a{
		padding:7px 15px 7px 25px
	}
	.welcome-section ul {
		margin-top: 10px;
	}
	/* Purchase Now Button*/
	.purchase-button h2{
		text-align:center;
	}
	.purchase-button .slide-btn{
		margin:0 auto;
	}

	/* Counting */
	.counting i, .counting .factor{
		padding-bottom:5%;
	}
	
	/* Copyright */
	.copyright h4, .copyright-social-icon{
		text-align:center;
		padding:10px 0px;
	}
	/* Portfolio */
	.five, .five-big{
		width: 50%;
	}
	/* Disable Animations */
	.animated {
		visibility: visible !important;
	  	-webkit-animation: none !important;
		-moz-animation: none !important;
		-o-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
	}
	/* Blog Grid Page */
	.blog-grid .grid-posts{
		width:100%;
	}
	/* Blog Timeline */
	.blog-timeline-event-left, .blog-timeline-event-right {
		padding:0px;
		margin-left:0;
		width:100%;
	}
	.blog-timeline-right{
		padding-top:0px;
	}
	.blog-timeline-event-left:before, .blog-timeline-event:after, .blog-timeline-event-right:before{
		display:none;
	}
	.blog-timeline-left{
		border:0px;
	}	
	.timeline > li .timeline-image h4{
		font-size:13px;
	}
	
	section#demo-video .demo-video iframe { width:100%;}

	
}
/* ---------- MAX 640PX ---------- */

/* ---------- MAX 580PX ---------- */
@media only screen and (max-width:580px) {
	.col-xs-6{
		width:100%;
	}
}


/* ---------- MAX 480PX ---------- */
@media only screen and (max-width:480px) {

	.benefits img{
		max-width:50%;
	}
	.title h2:before,
	.title:before{
		display:none;
	}
	
	/* About Us */
	.about-us i{
		float:none;
		text-align:center;
		display:block;
		margin:10px auto;
	}
	.download-now .btn {
		margin: 7px 5px;
	}
	.form-control-lg{
		font-size:14px;
	}
	.blog .blog-scroll-section .effects .img{
		margin:0px auto;
		left:0px;
		right:0px;
	}
	.unlist.bold li {
		width:100%;
	}
	section#our-skills .col-md-6{
		padding:60px 15px;
	}
	/* Why We Best */
	#why-we-best .title h2:after, 
	#features .title h2:after{
		top:37px;
	}
}

/* ---------- MAX 360PX ---------- */
@media only screen and (max-width:360px) {
	/* Feature */
	.container.features-inner{
		padding:60px 15px;
	}
	/* Global */
	.title{
		font-size:41px;
	}
	#mobileslider img{
		width:300px;
	}
	.welcome-section .pull-right{
		float:none !important;
	}
	.welcome-section i {
		margin-bottom:10px;
	}
	/* Why We Best */
	#why-we-best .title h2:after, 
	#features .title h2:after,
	#works .title h2:after,
	#subscribe .title h2:after{
		top:37px;
	}
}
/* ---------- MAX 320PX ---------- */
@media only screen and (max-width:320px) {					
	/* Blog Outer Sidebar */
	.sidebar-facebook .facebook-inner{
		padding:10px;
	}	
}