/* Spark Edge - Media Queries */

/* Desktop only */
@media only screen and (min-width: 960px) {

	nav.no-subtitles a,
	nav.no-subtitles a:focus {
		padding-top: 34px;
	}
	.landing-page nav.no-subtitles a:not([href ^= '#']) {
		background-position: right 35px;
	}
	
}


/* Smaller than standard 960 (everything from mobiles to tablets) */
@media only screen and (max-width: 959px) {

	nav li a,
	nav li a:visited,
	nav li a:focus {
		padding: 34px 10px 0px 10px;
	}
	.compact-header nav li a,
	.compact-header nav li a:visited,
	.compact-header nav li a:focus {
		padding-top: 17px;
	}
	nav li a span {
		display: none;
	}
	.landing-page header nav a:not([href ^= '#']) {
		background-position: right 35px;
		padding-right: 19px;
	}
	.landing-page header.compact-header nav a:not([href ^= '#']) {
		background-position: right 18px;
	}
	
	.feature-box {
		margin-left: 0 !important; /* skeleton override */
		margin-right: 0 !important; /* skeleton override */
	}

}

/* Tablet Portrait size to standard 960 (tablets only) */
@media only screen and (min-width: 768px) and (max-width: 959px) {

	.tablets-only {
		display: block;
	}
	.hide-for-tablets {
		display: none;
	}

	.flexslider .slides .caption {
		right: -198px;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;    
		transition: all 0.3s ease;
	}
	.flexslider .slides .caption:hover,
	.flexslider .slides .caption.ios-hover-fix {
		right: 0;
	}
	
	/* If using the "fade" animation */
	.flexslider.animation-fade .slides > li {
		overflow: hidden;
	}

}

/* All Mobile Sizes */
@media only screen and (max-width: 767px) {

	/* Helper classes */
	.mobiles-only {
		display: block;
	}
	.hide-for-mobiles {
		display: none;
	}
	
	/* Header */
	header nav ul {
		float: left;
		height: 50px;
	}
	header nav li a,
	header nav li a:visited,
	header nav li a:focus {
		padding: 17px 7px 0px 7px;
	}
	.landing-page header nav li a:not([href ^= '#']) {
		background-position: right 18px;
		padding-right: 19px;
		margin-right: 5px;
	}
	header a.logo {
		display: block;
		text-align: center;
		float: none;
		width: auto;
	}
	header.compact-header .logo {
		display: none;
	}
	
	/* welcome-block */
	article.has-welcome-block {
		padding-top: 0px; /* compensated with the .welcome-block padding which has .dark (allows to avoid seeing a little white when scrolling back up too quickly) */
	}
	article.no-welcome-block { /* required class for the first <article> if you remove the welcome-block */
		padding-top: 140px; /* could actually be 80px to be more precise and not add extra padding */
	}
	.welcome-block {
		padding-top: 140px;
	}
	
	p:last-child { margin-bottom: 20px; }
	.inner-padding {
		padding-left: 0px;
		padding-right: 0px;
	}
	.inner-padding p, .inner-padding h2, .inner-padding h3, .inner-padding h4 {
		margin-left: 10px;
		margin-bottom: 10px;
	}
	
	/* tabs */
	ul.tabs li a {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	/* Slider's caption (going from right to bottom of the img) */
	.flexslider .slides .caption {
		position: static;
		width: auto;
		height: 210px; /* fixed height otherwise animation-slide isn't working properly */
		background: #303030;
		padding: 15px 20px 15px 20px;
	}
	
	/* add some space between the pricing-boxes */
	.pricing-box {
		margin-bottom: 10px;
	}
	.pricing-box:last-child {
		margin-bottom: 0;
	}
	
	.feature-box.blog-post:last-child {
		margin-bottom: 20px;
	}
	.column.feature-box,
	.columns.feature-box {
		padding-left: 0;
		padding-right: 0;
	}

}

/* Mobile Landscape Size to Tablet Portrait (mobiles and tablets-portrait) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

	.main-slider {
		height: 414px;
	}
	
}

/* Mobile Portrait Size to Mobile Landscape Size (mobiles only) */
@media only screen and (max-width: 479px) {

	/* Helper class */
	.hide-for-mobiles-portrait {
		display: none;
	}
	
	/* Header */
	header nav li a,
	header nav li a:visited,
	header nav li a:focus {
		padding: 17px 4px 0px 4px;
	}
	.landing-page header nav li a:not([href ^= '#']) {
		background-position: right 18px;
		padding-right: 19px;
		margin-right: 2px;
	}
	
	/* tabs */
	ul.tabs li a {
		padding-left: 5px;
		padding-right: 5px;
	}
	
	.main-slider {
		height: 365px;
	}
	
}