/*
Theme Name: Äänekosken Energia 2017
Theme URI: http://github.com/ZeelandFamily/zf-theme/
Author: Zeeland Family
Author URI: https://www.zeelandfamily.fi
Description: Custom theme, based on ZF starter theme https://github.com/ZeelandFamily/zf-theme
Version: 1.2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aanekosken-energia
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

ZF Theme is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/*
	Add your custom styles here. Note: this file is not loaded by default! You MUST uncomment this line
	in functions/scripts-and-styles.php:

			// wp_enqueue_style( 'zf-theme-custom-style', get_stylesheet_uri() );

 */


/*
* Styles for the Lähihyvä campaign
* - gallery in the landing page
* - banner in the front page
*/
 .gallery-wrap ul {
	max-width: none;
}

.gallery-wrap ul {
	margin: 0.5rem 0 1rem 0;
	padding: 0;
	display: flex;
	justify-content: center;
	width: 100%;
}

.gallery-wrap ul:before {
	display: none;
}

.gallery-wrap ul li {
	border: none;
	margin: 0;
	padding: 0;
}

.gallery-wrap ul > li > a:after {
	display: none !important;
}

@media screen and (max-width: 750px) {
	.gallery-wrap ul li:first-child, .gallery-wrap ul li:last-child {
		display: none;
	}
}

/*
* Banner styles
*/
.banner .container {
	padding: 0.3rem 6rem 0.3rem 6rem;
}

.lahihyva-banner {
	display: flex;
	justify-content: center;
	align-items: center;
}

.banner-img, .banner-btn {
	flex-grow: 1;
}

.lahihyva-banner img {
	max-width: 7rem;
}

.banner-text {
	text-align: center;
	padding: 0 1.5rem 0 1.5rem;
	flex-grow: 5;
}

.banner-text h2 {
	margin-bottom: 0.5rem;
	color: #00a188;
}

.banner-btn .button {
	min-width: 7rem;
}

@media screen and (max-width: 1000px) {
	.banner .container {
		padding: 0.3rem 2rem 0.3rem 2rem;
	}

	.lahihyva-banner img {
		max-width: 6rem;
	}

	.banner-btn .button {
		min-width: 6.5rem;
	}
}

@media screen and (max-width: 890px) {
	.banner .container {
		padding: 1rem 2rem 1rem 2rem;
	}
}

@media screen and (max-width: 760px) {
	.banner .container {
		padding: 0.5rem 4rem 0.5rem 4rem;
	}

	.lahihyva-banner {
		flex-direction: column;
	}

	.lahihyva-banner img {
		max-width: 10rem;
	}
}

@media screen and (max-width: 600px) {
	.banner .container {
		padding: 0.5rem 2rem 0.5rem 2rem;
	}
}

@media screen and (max-width: 480px) {
	.banner .container {
		padding: 0.5rem 0.5rem 0.5rem 0.5rem;
	}
}