/* Media Queries */


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


	
}


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

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

	.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;
	}
	
	.spark-project-thumb {
		margin: 0px 14px 20px 15px;
	}

}

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

	/* Helper classes */
	.mobiles-only {
		display: block;
	}
	.hide-for-mobiles {
		display: none !important;
	}
	
	/* Header */
	nav.spark-main-menu > ul {
		float: left;
		height: 50px;
	}
	
	nav.spark-main-menu > ul > li > a,
	nav.spark-main-menu > ul > li > a:visited,
	nav.spark-main-menu > ul > li > a:focus {
		padding: 17px 7px 0px 7px;
	}
	
	nav.spark-main-menu > ul > li.spark-has-submenu > a {
		margin-right: 6px;
	}
	nav.spark-main-menu > ul > li.spark-has-submenu > a:after {
		margin-left: -8px;
		top: 61%;
	}
	
	/*
	.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 a.logo {
		display: none;
	}
	
	/* Main Slider */
	.main-slider-container {
		padding-top: 140px;
	}
	#main > article:first-of-type,
	article.no-main-slider { 
		padding-top: 140px; /* could actually be 80px to be more precise and not add extra padding */
	}
	#main > article.has-main-slider {
		padding-top: 0px; /* compensated with the .main-slider-container padding which has .dark (allows to avoid seeing a little white when scrolling back up too quickly) */
	}
	
	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;
	}
	
	.spark-project-thumb {
		margin: 0px auto 20px auto;
		float: none;
	}
	.spark-project-content-text {
		padding: 10px;
	}
}

/* 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 !important;
	}
	
	/* Header */
	nav.spark-main-menu > ul > li > a,
	nav.spark-main-menu > ul > li > a:visited,
	nav.spark-main-menu > ul > li > a:focus {
		padding-left: 4px;
		padding-right: 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; */
	}
	
}