/* ===== Responsive Styles =====================================================
   Author: Dan Mitchell / Creative Edge Design ltd
   ========================================================================== */

	
	/* ----------- */
	@media only screen 
	and (min-width: 0px) 
	and (max-width : 600px) {
		
		html {
		}
		
		.mobile {
			display: block;
		}
		
		.notformobile {
			display:none !important;
		}
		
		.wrapper {
			width: 94%;
			margin: 0 3%;
		}
		
		img {
			max-width: 100%;
		}
		
		.col,
		.cols {
			float: none;
			display:block;
			margin:0;
		}
		.one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten, .eleven, .twelve {
			margin:0;
			width:auto;
		}
		
		header .wrapper,
		header nav {
			display: none;
		}
		
		#middle h6 {
			font-size: 1.2em;
			margin: 0 0 2.5em 0;
		}
		
		.tiles {
			margin-left: -2%;
			margin-right: -2%;
		}
			.tiles a {
				float: left;
				width: 29.3333%;
				margin-left: 2%;
				margin-right: 2%;
				font-size: 1.1em;
				padding-top: 0.5em;
				padding-bottom: 0.5em;
			}
			.tiles a.blue.last {
				background-color: #54565b;
			}
			.tiles a.last,
			.tiles a:last-child {
				margin-right: 2%;
			}
		
		.tiles-text {
			font-size: 1.2em;
		}
		
		.panel {
			float: none;
			width: auto;
			margin-right: auto;
			height:auto;
		}
		.panel-calendar-mobile {
			display:none;
		}
		
		.justlinks {
			display:none;
		}
		
		.whatsontable {
			-webkit-box-shadow: none;
			box-shadow: none;
		}
			.whatsontable .inner {
				padding:0;
			}
			.whatsontable .head {
				font-size: 1em;
			}
			.whatsontable .date-now {
				display:block;
			}
			.whatsontable .tablebody {
				font-size: 0.8em;
			}
				.whatsontable .cell a {
					font-size: 1em;
				}
			.whatsontable .tablebody .cell:first-child {
				width: 45%;
			}
			.whatsontable .tablebody .cell:nth-child(3) {
				display:none;
			}
			.whatsontable .foot .cell a {
				font-size: 0.8em;
			}
		
		header .hero-panels {
			width:100%;
		}
			header .hero-panel {
				width:100%;
				bottom:0;
				left:0;
			}
				header .hero-panel p {
					display:none;
				}
				header .hero-panel .inner {
					padding: 0.5em 1em;
				}
				header .hero-panel h3 {
					font-size: 1.5em;
					line-height: 1.2;
				}
				header .hero-panel .meta br {
					display:none;
				}
				header .hero-panel .meta a {
					display:none;
				}
				header .hero-panel .meta strong {
					font-size: 1.5em;
				}
		
		header .hero-holder {
			display:none;
		}
		
		#middle h6:first-child {
			display:none;
		}
		
		.panel-calendar {
			display:none;
		}
		
		.blocks h4 {
			font-size: 1.5em;
		}
			.blocks h4 a {
				font-size: 1em;
				margin-top:0;
			}
		.block .info {
			float: none;
			width: auto;
			margin:0;
		}
		.block .more {
			display:none;
		}
		
		.contentbox h2 {
			font-size: 1.5em;
		}
		
		.midpanels {
			margin-top:1em;
		}
		
		.sidecolumn {
			display:none;
		}
		
		.gallery a.thumb {
			width: 48%;
		}
			.gallery a.thumb img {
				height: 15em;
			}
		
		.block-type-1 .left {
			float:none;
			width: auto;
			margin: 0 0 1em 0;
		}
		.block-type-1 .right {
			float:none;
			margin:0;
		}
		
		.contentbox h1 img {
			display:none;
		}
		
		.bottompanels {
			border-top: 1px solid #000;
			margin-top: 1em;
			padding-top: 1.5em;
		}
		
		iframe {
			width:100%;
			margin-top: 1em;
		}
		
		.crumbs {
			font-size: 1.5em;
		}
		
		.metainfo {
			margin-bottom:0;
		}
		
		footer {
			font-size: 1em;
		}
			footer h5 {
				font-size: 1.2em;
			}
			footer .r h5 {
				margin-top: 1em;
			}
		
		.archive_categories_landing {
			display: block;
		}
		
		.archivecategory__item {
			display: block;
		}
		
		.archivemore__items {
			display: block;
		}
		
		.exhibit__item--landscape {
			flex: 1 0 100%;
		}
		.exhibit__item--portrait {
			flex: 0 0 100%;
		}
		.exhibit__item--square {
			flex: 0 0 100%;
		}
		
		.exhibit-selector {
			position: relative;
			top: 0;
			right: auto;
			transform: none;
		}
		
	}

	/* ----------- */
	@media only screen 
	and (min-width: 0px) 
	and (max-width : 321px) {
		
		.tiles a {
			width: 46%;
			margin-left: 2%;
			margin-right: 2%;
		}
			.tiles a:nth-child(3) {
				background-color: #54565b;
			}
		
		.blocks h4 {
			font-size: 1.1em;
		}
		
		#middle h6 {
			font-size: 1em;
		}
		
		.gallery a.thumb img {
			height: 12em;
		}
		
	}

	/* ----------- */
	@media only screen 
	and (min-width: 601px) 
	and (max-width : 830px) {
		
		html {
			font-size: 50%;
		}
		
	}

	/* ----------- */
	@media only screen 
	and (min-width: 831px) 
	and (max-width : 983px) {
		
		html {
			font-size: 68.8%;
		}
		
	}