/*--------------------------------------------------------------------
	
	The Fan Museum
	Responsive CSS
	Updated: 19.10.2021
	
	Designed & Handcrafted by The Pixel Parlour
	
--------------------------------------------------------------------*/



/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/

/*	Desktop : 981+

/*------------------------------------------------------------------*/

@media screen and (min-width: 980px) {

/*------------------------------------------------------------------*/
/*	3.	Universal Elements
/*------------------------------------------------------------------*/

/* Header Tagline */
#logobar .tagline { padding: 22px 0 0 0; }
#logobar .tagline br { display: none; }

}

@media screen and (min-width: 961px) {

/*------------------------------------------------------------------*/
/*	3.	Universal Elements
/*------------------------------------------------------------------*/

/* Upper Footer */
.upperfooter .col .mobileicon { display: none; }

/*------------------------------------------------------------------*/
/*	8.	Homepage
/*------------------------------------------------------------------*/

/* Aircraft Alerts Banner */
.aircraftalertsbanner a.solidbtn { position: absolute; top: 50%; right: 20px; margin: -20px 0 0 0; }

}

@media screen and (min-width: 1920px) {

/*--- Page Top ---*/
.pagetop { max-height: 420px; }

.homeslider #sync1 .item { height: 720px; }

}


@media screen and (min-width: 1440px) and (max-width: 1919px) {

/*--- Page Top ---*/
.pagetop { max-height: 380px; }

.homeslider #sync1 .item { height: 620px; }

}


@media screen and (min-width: 1280px) and (max-width: 1439px) {

/*--- Page Top ---*/
.pagetop { max-height: 350px; }

}



/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/

/*	iPad Portrait Layout : 768-960

/*------------------------------------------------------------------*/

@media screen and (min-width: 768px) and (max-width: 960px) {

body { font-size: 14px; }

/*------------------------------------------------------------------*/
/*	3.	Universal Elements
/*------------------------------------------------------------------*/

/*--- Nav Bar ---*/

/* Header Nav */
#navbar ul li a { padding-left: 12px; padding-right: 12px; }

/*--- Footer ---*/

/* Action Footer */
.actionfooter .col.gettingthere,
.actionfooter .col.openingtimes,
.actionfooter .col.whatson { width: 25.2%; padding-right: 2%; background-position: 5% 0; }

/*------------------------------------------------------------------*/
/*	4.	Common Page Elements
/*------------------------------------------------------------------*/

/*--- Page Intro ---*/
.pageintro .block { width: 70% }

/*------------------------------------------------------------------*/
/*	7.	Exhibitions
/*------------------------------------------------------------------*/

.pastexhibition { width: 100%; margin-right: 0; }


/*------------------------------------------------------------------*/
/*	8.	Homepage
/*------------------------------------------------------------------*/

.hscontentblock { max-width: 50%; }
  
}



/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/

/*	All Mobile : 0-767

/*------------------------------------------------------------------*/

@media screen and (min-width: 600px) and (max-width: 767px) {

/* body { background-color: #999; } */

/*------------------------------------------------------------------*/
/*	3.	Universal Elements
/*------------------------------------------------------------------*/


/*------------------------------------------------------------------*/
/*	4.	Common Page Elements
/*------------------------------------------------------------------*/

/*--- Page Intro ---*/
.pageintro .block { width: 70% }



}



@media screen and (min-width: 0px) and (max-width: 767px) {

body { font-size: 14px; }

/*------------------------------------------------------------------*/
/*	3.	Universal Elements
/*------------------------------------------------------------------*/

/* Header Logo */
#logobar .logo { width: 100%; text-align: center; }

/* Header Tagline */
#logobar .tagline { width: 100%; text-align: center; padding: 9px 0 0 0; }
#logobar .tagline br { display: none; }

/*--- Nav Bar ---*/

/* Header Nav */
#navbar { text-align: center; }
#navbar .menu { display: none; }

#logobar a.opennav { display: inline-block; }

/*--- Footer ---*/

/* Action Footer */
.actionfooter .col { width: 94%; padding: 3%; margin: 0; border: none; border-bottom: 1px solid #B72340; }

.aftitle { margin: 0; }
/* .aftitle { padding: 0 0 0 10%; } */
.actionfooter .col.gettingthere,
.actionfooter .col.openingtimes,
.actionfooter .col.whatson { width: 80%; padding: 20px 10% 20px 10%; background-position: 3% 20px; }

/* Useful Links */
.ullabel { display: block; padding-right: 16px; background-image: none; }

/*------------------------------------------------------------------*/
/*	4.	Common Page Elements
/*------------------------------------------------------------------*/

/*--- Content Sections ---*/
.maincontent .container { padding: 0; }
.homemaincontent .container { padding: 0 16px; }

/*--- Page Intro ---*/
.pageintro { margin-top: -80px; margin-left: -2.2%; }
.pageintro .block { width: 56%; min-height: 120px; padding: 3% 3.1%; }

/* Side Block */
.sideblock .sbphoto { display: none; }

/*--- Explore Collection ---*/
.explorecollection .block2 { display: none; }
.explorecollection .block3 { width: 30%; }

/*------------------------------------------------------------------*/
/*	5.	Blog
/*------------------------------------------------------------------*/

/* Blog Common */
.blogpost { margin: 0 -2% 30px -2%; }

/*------------------------------------------------------------------*/
/*	8.	Homepage
/*------------------------------------------------------------------*/

.hscontentblock { max-width: 95%; padding: 2.5%; }
  
#sync2 { display: none; }

.hometimesntickets { display: none; }

.mobiletimesntickets { display: block; }
.mobiletimesntickets .tntwrap { float: left; width: 42%; padding: 4%; margin: 0; border: none; }

/*--- Static Location Map ---*/
.homelocation { height: 400px; }
.homelocation .infoblock { width: 40%; }
.homelocation .infoblock .photo { display: none; }
.homelocation .infoblock p.address br { display: none; }

}



@media screen and (min-width: 0px) and (max-width: 599px) {

/*------------------------------------------------------------------*/
/*	3.	Universal Elements
/*------------------------------------------------------------------*/

.sitewrapper.hasannouncement.moving { padding-top: 0; }

/* Quick Search */
form.quicksearch label { width: 100%; text-align: center; padding: 0; }
form.quicksearch input { width: 100%; margin: 0 0 6px 0; }
form.quicksearch input.submit { position: relative; top: inherit; right: inherit; width: 100%; margin: 0; }

/*--- Logo Bar ---*/

/* Header Logo */
#logobar .logo { max-width: 88%; text-align: left; }

/* Header Tagline */
#logobar .tagline { display: none; }

/*--- Announcement ---*/
.announcementbar.moving { position: relative; }

/*------------------------------------------------------------------*/
/*	4.	Common Page Elements
/*------------------------------------------------------------------*/

/*--- Page Intro ---*/
.pageintro { margin-top: -2.1%; margin-left: -2.1%; margin-right: -2.1%; }
.pageintro .block { width: 94%; padding: 3%; }

/* Site Links */
.slblock { width: 100%; padding-bottom: 0; margin: 0 0 10px 0; }
.slblock:last-child { margin: 0; }

/*--- Summary Blocks ---*/
.sblock { width: 100%; padding-bottom: 0; margin: 0 0 10px 0; }
.sblock:last-child { margin: 0; }
.sblock .photo { float: right; max-width: 40%; }
.sblock .tab { width: 100%; }

/*--- Full Width Quote ---*/
.fwquote p.quote { font-size: 1.4em; }

/*--- Full Width Features ---*/
/* .fwfeature .copy { width: 100%; padding: 0; }
.fwfeature .image { width: 100%; } */

/*--- Explore Collection ---*/
.explorecollection { height: 676px; }
.explorecollection .block1,
.explorecollection .block2,
.explorecollection .block3 { height: 50%; }
.explorecollection .block1 { width: 100%; }
.explorecollection .block2 { display: block; width: 40%; }
.explorecollection .block3 { width: 60%; height: 25%; }
.explorecollection .block3:nth-of-type(2n),
.explorecollection .block3:nth-of-type(4n) { display: none; }
.explorecollection .block1 span,
.explorecollection .block3 span { border-right: none; }

/*------------------------------------------------------------------*/
/*	5.	Blog
/*------------------------------------------------------------------*/

.blogpostfeed { width: 100%; padding-bottom: 0; margin: 0 0 10px 0; }
.blogpostfeed:last-child { margin: 0; }
.blogpostfeed img { float: right; max-width: 40%; margin: 0 0 0 10px; }

/*------------------------------------------------------------------*/
/*	7.	Exhibitions
/*------------------------------------------------------------------*/

.pastexhibition { width: 100%; margin-right: 0; }

/*------------------------------------------------------------------*/
/*	8.	Homepage
/*------------------------------------------------------------------*/

/* Header Search Bar */
.headersearchbar .colthird { text-align: center; width: 100%; }
.headersearchbar .coltwothirds { text-align: center; width: 100%; }
.headersearchbar h3 { line-height: inherit; margin: 0 0 10px 0; }


/*--- Home About Section ---*/
.aboutblocks .aboutblock { width: 100%; padding-bottom: 0; margin: 0 0 10px 0; }
.aboutblocks .aboutblock .wrap { padding: 20px; margin-bottom: 0; }
.aboutblocks .aboutblock:last-child { margin: 0; }
.aboutblocks .blogblock .wrap { overflow: hidden; padding-bottom: 0; }

/*--- Home Events List ---*/
.eventslist .eventblock { width: 100%; padding-bottom: 0; margin: 0 0 10px 0; }

/*--- Static Location Map ---*/
.homelocation { height: 540px; background: url(_images/common/location-map-mobile.jpg) no-repeat scroll center center; }
.homelocation .infoblock { top: 0; left: 0; right: 0; width: 100%; }
.homelocation .infoblock p.address br { display: none; }

}



@media screen and (min-width: 0px) and (max-width: 480px) {

/*------------------------------------------------------------------*/
/*	3.	Universal Elements
/*------------------------------------------------------------------*/

/*label { width: 100%; padding: 0 2.5%; }*/
input,
select,
textarea { width: 100%; }

input.submit,
input.wpcf7-submit { width: 100%; }

/* Search */
input.search { width: 40px; }

/* Header Logo */
#logobar .logo span.logoicon img { width: 62px; height: 52px; }
#logobar .logo span.logotext img { width: 183px; height: 52px; }

/*--- Nav Bar ---*/

/* Breadcrumbs */
.navbreadcrumbs { display: none; }

/*--- Footer ---*/

/* Action Footer */
/* .aftitle { padding: 0 0 0 14%; } */
.actionfooter .col.gettingthere,
.actionfooter .col.openingtimes,
.actionfooter .col.whatson { width: 76%; padding: 20px 10% 20px 14%; }

/* Useful Links */
.usefullinks nav#footernav ul li { display: block; margin: 0 0 8px 0; }
.usefullinks nav#footernav ul li:after { content: ''; padding: 0; }

/*------------------------------------------------------------------*/
/*	4.	Common Page Elements
/*------------------------------------------------------------------*/

/*--- Full Width Features ---*/
.fwfeature .copy { width: 100%; }
.fwfeature .image { width: 100%; }

/*--- Section Title ---*/
.sectiontitle span.subtitle { display: none; }

/*--- Bullet List - Thirds ---*/
ul.listthirds li { width: 100%; margin: 0; }

/*--- About ---*/
.teammember .photo { width: 100%; }
.teammember .biog { width: 100%; padding-left: 0; }

/*------------------------------------------------------------------*/
/*	7.	Exhibitions
/*------------------------------------------------------------------*/

.currentexhibition .poster { width: 100%; max-width: 100%; text-align: center; margin: 0 0 20px 0; }

/*------------------------------------------------------------------*/
/*	8.	Homepage
/*------------------------------------------------------------------*/

.mobiletimesntickets .tntwrap { width: 92%; border-bottom: 1px solid #D5D5DC; }

}