﻿/*-----------------------------------------------------*/
/* Desktop 1920                                     */
/*-----------------------------------------------------*/

@media screen and (max-width: 1920px) {

	/* galleries */

	.gallery.mixed .row .collection .paintings.left-align {
		margin: 1em 7% 6em;
	}

	/* painting details formats */

	.grid .painting {
		width: 46%;
	}

		.grid .painting img {
			width: 90%;
		}

	.grid.square .painting {
		padding: 0 4%;
		width: 41%;
	}

	.grid .painting-details {
		margin: 0 5% 0 0;
		width: 54%;
	}

	.grid.square .painting-details {
		width: 59%;
	}

	/* ctas - standard */

	.cta-outer.cta-me {
		background-image: url(/img/site/banners/full/w1920/banner-greece-water_w1920.webp);
	}

	.cta-outer.british-art-prize {
		background-image: url(/img/site/banners/full/w1920/oxo-tower_w1920.webp);
	}

	.cta-outer.british-art-prize-2025 {
		background-image: url(/img/site/banners/full/w1920/oxo-tower-2025_w1920.webp);
		background-position: 0 97px;
	}

	.cta-outer.cta-charities {
		background-image: url(/img/gallery/banners/full/w1920/gathering-storm_w1920.webp);
	}

	/* ctas - small */

	.cta-small-outer .cta-small {
		width: 80%;
	}

}

/*-----------------------------------------------------*/
/* Desktop 1800                                     */
/*-----------------------------------------------------*/

@media screen and (max-width: 1800px) {

	/* painting details formats */

	.grid .painting img {
		width: 100%;
	}
	
	/* ctas - standard */

	.cta-outer .cta {
		grid-template-columns: 25% auto;
		width: 74%;
	}

	/* ctas - small */

	.cta-small-outer .cta-small {
		width: 90%;
	}

	/* ctas - gallery info */

	.cta-gallery-info .cta-box-info .text {
		font-size: 1.1em;
	}

}

/*-----------------------------------------------------*/
/* Desktop 1650                                      */
/*-----------------------------------------------------*/

@media screen and (max-width: 1650px) {

	/* galleries */

	.gallery.simple .row .collection .collection_name {
		font-size: 1.5em;
	}

	.gallery.mixed .row .collection .paintings.left-align {
		margin: 1em 6% 6em;
	}

	/* painting details formats */

	.grid {
		margin: 4em 3em;
	}

		/* painting details formats */

		.grid .painting {
			width: 46%;
		}

		.grid.square .painting {
			padding: 0 4%;
			width: 42%;
		}

		.grid .painting-details {
			margin: 0 5% 0 0;
			width: 54%;
		}

		.grid.square .painting-details {
			width: 58%;
		}

		.grid .painting-details h1 {
			font-size: 3em;
		}

	.grid .painting.step img {
		height: 450px;
	}

		.grid .painting-details ul.formats li h2 {
			font-size: 1em;
			padding: 0.6em 0.2em;
		}

	.further-information .information {
		flex-basis: 70%;
	}

	/* ctas - standard */

	.cta-outer .cta {
		grid-template-columns: 25% auto;
		width: 86%;
	}

	/* ctas - small */

	.cta-small-outer .cta-small {
		width: 100%;
	}

	/* ctas - gallery */

	.cta-gallery .cta-box .text {
		font-size: 1.6em;
	}

	/* ctas - gallery info */

	.cta-gallery-info .cta-box-info .text {
		font-size: 1em;
	}

	/* footer */

	.footer {
		padding: 6em 15%;
	}

}

/*-----------------------------------------------------*/
/* Desktop 1536                                     */
/*-----------------------------------------------------*/

@media screen and (max-width: 1536px) {

	/* galleries */
	
	.gallery.mixed .row .collection .paintings .item .quick-note {
		font-size: 1.1em;
	}

	.gallery.mixed .row .collection .collection_name.js-square div {
		font-size: 1.2em;
	}

	/* ctas - standard */

	.cta-outer.cta-me {
		background-image: url(/img/site/banners/full/w1920/banner-greece-water_w1920.webp);
	}

	.cta-outer.british-art-prize {
		background-image: url(/img/site/banners/full/w1536/oxo-tower_w1536.webp);
	}

	.cta-outer.british-art-prize-2025 {
		background-image: url(/img/site/banners/full/w1536/oxo-tower-2025_w1536.webp);
	}

	.cta-outer.cta-charities {
		background-image: url(/img/gallery/banners/full/w1536/gathering-storm_w1536.webp);
	}

	/* ctas - small */

	.cta-small-outer {
		margin: 3% 6em 5%;
	}
	
	.cta-small-outer .cta-small {
		width: 100%;
	}

}


/*-----------------------------------------------------*/
/* Desktop 1366                                     */
/*-----------------------------------------------------*/

@media screen and (max-width: 1366px) {

	/* galleries */

	.gallery.mixed .row .collection .paintings .item .quick-note {
		font-size: 1em;
	}

	.gallery.mixed .row .collection .collection_name.js-square div {
		font-size: 1.1em;
	}

	.gallery.mixed .row .collection .paintings.left-align {
		margin: 1em 10% 6em;
	}

	/* filter */

	.filter {
		margin: 0 10%;
	}

		.filter a.item {
			font-size: 1.1em;
		}

	/* painting details formats */

	.grid .painting-details .formats-outer ul.formats li h2 {
		font-size: 1em;
	}

	.further-information .information {
		flex-basis: 80%;
	}

	/* ctas - standard */

	.cta-outer.cta-me {
		background-image: url(/img/site/banners/full/w1920/banner-greece-water_w1920.webp);
	}

	.cta-outer.british-art-prize {
		background-image: url(/img/site/banners/full/w1366/oxo-tower_w1366.webp);
	}

	.cta-outer.british-art-prize-2025 {
		background-image: url(/img/site/banners/full/w1366/oxo-tower-2025_w1366.webp);
		background-position: 0 -52px
	}

	.cta-outer.cta-charities {
		background-image: url(/img/gallery/banners/full/w1366/gathering-storm_w1366.webp);
	}

	/* ctas - small */

	.cta-small-outer .cta-small {
		width: 100%;
	}

	/* ctas - gallery */

	.cta-gallery {
		column-gap: 3%;
	}

		.cta-gallery .cta-box .text {
			font-size: 1.2em;
		}

	/* ctas - gallery info */

	.cta-gallery-info {
		justify-content: center;
		flex-wrap: wrap;
	}

	.cta-gallery-info {
		gap: 3em 3%;
	}

		.cta-gallery-info .cta-box-info {
			display: flex;
			flex-direction: column;
			flex: 0 1 auto;
			width: 20%;
		}

			.cta-gallery-info .cta-box-info .text {
				min-height: 4em;
			}

}

/*-----------------------------------------------------*/
/* Desktop 1024                                     */
/*-----------------------------------------------------*/

@media screen and (max-width: 1024px) {

	/* galleries */

	.gallery.mixed .row .collection .paintings {
		gap: 2em;
	}

	.gallery.mixed .row .collection .collection_name.js-square div {
		font-size: 1em;
	}

	.gallery.mixed .row .collection .paintings.left-align {
		margin: 1em 0 6em;
	}

	/* filter */

	.filter {
		margin: 0 5%;
	}

	/* painting details formats */

	.grid {
		margin: 4.5em 0;
	}

	.grid .painting {
		padding: 0 4%;
		width: 48%;
	}

		.grid.square .painting {
			padding: 0 4%;
			width: 45%;
		}

	.grid .painting-details {
		margin: 0 5% 0 0;
		width: 52%;
	}

		.grid.square .painting-details {
			width: 55%;
		}

		.grid .painting-details .formats-outer ul.formats li h2 {
			font-size: 1em;
			padding: 0.6em 0.2em;
		}

	.grid .painting-details .formats-outer ul.formats {
		margin: 3em 0;
	}

	.grid .painting-details .formats-outer .order {
		margin: 0;
	}

	.further-information .information {
		flex-basis: 90%;
	}

	/* ctas - standard */

	.cta-outer.cta-me {
		background-image: url(/img/site/banners/full/w2560/banner-greece-water_w2560.webp);
	}

	.cta-outer.british-art-prize {
		background-image: url(/img/site/banners/full/w1280/oxo-tower_w1280.webp);
	}

	.cta-outer.british-art-prize-2025 {
		background-image: url(/img/site/banners/full/w1280/oxo-tower-2025_w1280.webp);
		background-position: 0 -90px;
	}

	.cta-outer.cta-charities {
		background-image: url(/img/gallery/banners/full/w1280/gathering-storm_w1280.webp);
	}

	/* ctas - small */

	.cta-small-outer {
		margin: 3% 6em 6%;
	}
	
	.cta-small-outer .cta-small {
		width: 100%;
	}

	/* ctas - gallery */

	.cta-gallery {
		column-gap: 3%;
	}

	/* ctas - gallery info */

	.cta-gallery-info {
		gap: 2em 3%;
	}

	/* footer */

	.footer {
		padding: 6em 8%;
		font-size: 1.1em;
	}

}

/*-----------------------------------------------------*/
/* Desktop 832 (to fix header temp)                    */
/*-----------------------------------------------------*/

@media screen and (max-width: 832px) {

	/* header */

	header .menu {
		font-size: 0.9em;
	}

		header .menu ul li {
			margin: 0;
		}

		header .menu .logo {
			margin: 17px 0 0 0;
		}

		header .menu img {
			width: 80%;
			margin: 0 22%;
		}

		header .menu ul {
			column-gap: 2em;
		}

			header .menu ul li a {
				white-space: nowrap
			}

			header .menu ul.type {
				padding: 0px 26px 0 14px;
			}

			header .menu ul.info {
				padding: 0 16px 0 20px;
			}

			header .menu ul.divider:after {
				top: 2px;
			}

}
	
/*-----------------------------------------------------*/
/* Desktop 768                                     */
/*-----------------------------------------------------*/

@media screen and (max-width: 768px) {

	/* galleries */

	.gallery.simple .row .collection .collection_name {
		font-size: 1em;
	}

	.gallery.multi .row .collection .paintings .item {
		flex: 0 0 30%;
	}

	.gallery.mixed .row .collection .paintings.left-align {
		margin: 1em 0 6em;
	}

	/* filter */

	.filter a.item {
		font-size: 1em;
	}

		.filter a.item span {
			margin-bottom: 0.2em;
		}

	/* painting details formats */

	.grid {
		flex-wrap: wrap;
	}

		.grid .painting {
			padding: 0 6em;
			width: 100%;
		}

		.grid.square .painting {
			padding: 0 6em;
			width: 100%;
		}

		.grid .painting-details {
			margin: 0 5% 0 0;
			width: 92%;
			padding: 5% 4% 0;
		}

			.grid.square .painting-details {
				width: 92%;
			}

		.grid .painting-details ul.formats li h2 {
			font-size: 1em;
			padding: 0.6em 0.2em;
		}

		.grid .painting-details .formats-outer ul.formats {
			margin: 2em 0;
		}

		.grid .painting-details .formats-outer .order {
			margin: 0;
		}

	/* ctas - standard */

	.cta-outer.cta-me {
		background-image: url(/img/site/banners/full/w2266/banner-greece-water_w2266.webp);
	}

	.cta-outer.british-art-prize {
		background-image: url(/img/site/banners/full/w1280/oxo-tower_w1280.webp);
		background-position: -15em center;
	}

	.cta-outer.british-art-prize-2025 {
		background-image: url(/img/site/banners/full/w1280/oxo-tower-2025_w1280.webp);
		background-position: -15em center;
	}

	.cta-outer.cta-charities {
		background-image: url(/img/gallery/banners/full/w1280/gathering-storm_w1280.webp);
	}

	/* ctas - small */

	.cta-small-outer {
		margin: 3% 6em 7%;
	}

		.cta-small-outer .cta-small {
			width: 100%;
		}

			.cta-small-outer .cta-small .content {
				padding: 2em 6em 2em 3em;
			}

	/* ctas - gallery */

	.cta-gallery {
		justify-content: center;
		flex-wrap: wrap;
	}

	.cta-gallery {
		column-gap: 4%;
	}

		.cta-gallery .cta-box {
			display: flex;
			flex-direction: column;
			flex: 0 1 auto;
			width: 30%;
			margin: 1em 0;
		}

		.cta-gallery .cta-box {
			flex: 0 1 auto;
		}

	/* ctas - gallery info */

	.cta-gallery-info {
		gap: 1.5em 3%;
	}

		.cta-gallery-info .cta-box-info .text {
			height: 5em;
		}

	/* footer */

	.footer {
		font-size: 1em;
		column-gap: 8%;
	}

	/*-----------------------------------------------------*/
	/* Desktop 700                                     */
	/*-----------------------------------------------------*/

	@media screen and (max-width: 700px) {

	header .hamburger {
		display: block;
		position: absolute;
		left: 1em;
		top: 1em;
	}

		header {
		height: 52px;
	}

		header .logo {
			margin: 15px 0 0 0;
			order: 2;
		}

		header .menu {
			display: none;
			font-size: 1.2em;
			order: 1;
			flex-wrap: wrap;
			background: #ffffff;
			z-index: 200;
			position: absolute;
			width: 24em;
			left: 0;
			padding: 1em 0 1em;
			border: 2px solid #97dad8;
			border-top: 0;
		}

			header .menu ul {
				display: block;
			}

				header .menu ul li {
					margin: 0;
					padding: 1.5em 0;
				}

			header .menu .logo {
				margin: 0;
			}

			header .menu ul.mobile-header {
				display: block;
			}

				header .menu ul.mobile-header li {
					display: flex;
					align-items: center;
					column-gap: 1.8em;
					padding: 1em;
				}

					header .menu ul.mobile-header li a.close img {
						width: 70%;
						margin: 0 0 0 0.6em;
					}

					header .menu ul.mobile-header li a.logo img {
						width: 100%;
						margin: 0;
					}


			header .menu ul.type,
			header .menu ul.info {
				padding: 2em 0 0 6em;
				border-top: 2px solid #dddddd;
				margin: 1em 0;
			}

			header .menu ul li a {
				white-space: nowrap
			}

			header .menu ul.divider:after {
				display: none;
			}

		.hero-slider .flexslider .slides img {
			height: 40vh;
		}

		.hero-slider .flexslider {
			margin: 52px 0 0 0;
		}

		.hero-slider .outer {
			display: none;
		}

		/* galleries */

		.gallery {
			padding: 0;
		}

			.gallery .row {
				display: block;
				margin: 0;
			}

				.gallery .row .item {
					margin: 0 20px 25px;
					height: auto;
				}

		/* ctas - small */

		.cta-small-outer {
			margin: 1em 0 9em;
		}

			.cta-small-outer .cta-small {
				flex-wrap: wrap;
				position: relative;
			}

				.cta-small-outer .cta-small .content {
					padding: 2em;
					margin: 2em;
				}

			.cta-small-outer .image {
				position: absolute;
				bottom: -6em;
				right: 11%;
				z-index: 10;
				padding: 1.8em 2.8em;
				column-gap: 15%;
				justify-content: center;
			}

				.cta-small-outer .image img {
					width: 5em;
				}

		/* cta galleries */

		.cta-gallery {
			margin: 2% 5%;
			column-gap: 5%;
		}

			.cta-gallery .cta-box {
				margin: 0.7em 0;
			}

		/* ctas - standard */

		.cta-outer.photo {
			padding: 1em 0;
		}

			.cta-outer.photo .cta {
				padding: 0;
				width: calc(100% - 2em);
				background-color: rgba(0, 0, 0, 0.2);
			}

			.cta-outer.photo .image {
				float: none;
				padding: 1em;
				width: calc(100% - 2em);
			}

		.cta-outer .cta .content {
			position: relative;
		}

			.cta-outer .cta .content h2 {
				left: 0;
				top: -75px;
				z-index: 20;
				max-width: 70%;
				margin: 0;
				position: absolute;
				line-height: 1.2em;
			}

			.cta-outer .cta .content p {
				margin: 1.4em 1.5em 1.4em;
			}

			.cta-outer .cta .content h2.two-lines {
				top: -126px;
			}

		.cta-outer.cta-me {
			background-image: url(/img/site/banners/full/w1920/banner-greece-water_w1920.webp);
			background-attachment: scroll;
		}

		.cta-outer.british-art-prize {
			background-image: url(/img/site/banners/full/w1920/oxo-tower_w1920.webp);
			background-attachment: scroll;
		}

		.cta-outer.british-art-prize-2025 {
			background-image: url(/img/site/banners/full/w1920/oxo-tower-2025_w1920.webp);
			background-attachment: scroll;
		}

		.cta-outer.cta-charities {
			background-image: url(/img/gallery/banners/full/w1920/gathering-storm_w1920.webp);
			background-attachment: scroll;
			background-position: 14% center;
		}

		/* ctas - gallery info */

		.cta-gallery-info {
			gap: 1.2em 4%;
			margin: 6% 4%;
		}

			.cta-gallery-info .cta-box-info .text {
				height: 7em;
			}

			.cta-gallery-info .cta-box-info {
				width: 30%;
			}

		/* footer */

		.footer {
			justify-content: flex-start;
			column-gap: 0;
			padding: 2em 11%;
		}

			.footer > ul.main-links {
				border-bottom: 1px solid white;
				padding: 0 2em 1.5em 0;
				margin-bottom: 1.5em;
			}

			.footer > ul.category-links {
				border-bottom: 1px solid white;
				padding: 0 0 1.5em 2em;
				margin-bottom: 1.5em;
			}

			.footer > ul.information {
				padding: 0 3em 0 0;
			}

			.footer > ul.social {
				display: flex;
				justify-content: space-evenly;
				column-gap: 20%;
			}

				.footer > ul.social img {
					width: 3em;
					margin: 0 0.3em;
				}

			.footer .copyright {
				flex-basis: 100%;
				font-size: 1.1em;
				padding: 1em 0;
			}
		}
	}
