﻿/**************************************************************************************************
* Header
**************************************************************************************************/
@media only screen and (max-width: 980px) {
	header .topmenu .search {
		margin: 0 10px 0 0;
	}
}
@media screen and (max-width: 960px) {
  header {
    width: 700px;
  }
  .mainmenuContainer .mainmenu li, 
  .responsivemenu .mainmenu li {
    display: none;
  }
  .mainmenuContainer .mainmenu .current, 
  .responsivemenu .mainmenu .current {
    display: block;
    float: right;
  }
  .mainmenuContainer .mainmenu .current:after, 
  .responsivemenu .mainmenu .current:after {
    content: "";
    background: url(/img/SCiM/visitus/arrow-dropdown-down-white.png) 0 0 no-repeat;
    position: absolute;
    right: 0;
    top: 30%;
    width: 30px;
    height: 20px;
  }
  .mainmenuContainer .mainmenu li a, 
  .responsivemenu .mainmenu li a {
      margin: 0;
  }
  .mainmenuContainer .mainmenu .current a, 
  .responsivemenu .mainmenu .current a {
    width: 144px;
  }
  .mainmenuContainer .mainmenu .heading, 
  .responsivemenu .mainmenu .heading {
    display: block;
    font-size: 1.2em;
    color: $darkgrey;
    width: 195px;
    margin: 0 0 1px 0;
    padding-left: 5px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background: white url(../../img/SCiM/bg-mainmenu-dropdown.gif) top right no-repeat;
    border: 1px solid $midgrey;
  }
  .mainmenuContainer .menubutton, 
  .responsivemenu .menubutton {
    display: block;
  }
}
@media screen and (max-width: 720px) {
  header {
    width: 560px;
  }
  header .topmenu p.links {
    display: block;
    margin-right: 0;
    margin-bottom: 5px;
  }
  header .topmenu .hide {
    display: block;
    height: 1px;
  }
  header .topmenu .search {
    margin-top: 9px;
  }
  .mainmenuContainer .mainmenu, 
  .responsivemenu .mainmenu {
    z-index: 0;
  }
  .mainmenuContainer .menubutton, 
  .responsivemenu .menubutton {
    display: block;
    top: -10px;
  }
}
@media only screen and (max-width: 640px) {
    header .topmenu .search input[type=text] {
	    width: 120px;
    }
}
@media screen and (max-width: 580px) {
  header {
    width: auto;
    margin-left: 10px;
    margin-right: 10px;
  }
  header nav {
    height: 200px;
  }
  header .topmenu p.links {
    display: block;
    margin-right: 0;
    margin-bottom: 5px;
  }
  .mainmenuContainer, 
  .responsivemenu {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: auto;
    float: none;
    width: 100%;
  }
  .mainmenuContainer .mainmenu, 
  .responsivemenu .mainmenu {
    width: 100%;
  }
  .mainmenuContainer .mainmenu .current, 
  .responsivemenu .mainmenu .current {
    width: 100%;
    float: none;
  }
  .mainmenuContainer .mainmenu .current a, 
  .responsivemenu .mainmenu .current a {
    width: auto;
    font-size: 1.4em;
  }
  .mainmenuContainer .mainmenu .current .submenu, 
  .responsivemenu .mainmenu .current .submenu {
    width: 100%;
    right:auto;
  }
  .mainmenuContainer .mainmenu .current .submenu li, 
  .responsivemenu .mainmenu .current .submenu li {
    width: 100%;
  }
  .mainmenuContainer .mainmenu .current .submenu li a, 
  .responsivemenu .mainmenu .current .submenu li a {
    width: auto;
  }
  .mainmenuContainer .mainmenu .sectionnav, 
  .responsivemenu .mainmenu .sectionnav {
    float: right;
  }
  .mainmenuContainer .mainmenu .sectionnav li a, 
  .responsivemenu .mainmenu .sectionnav li a {
    left: auto;
  }
}

/**************************************************************************************************
* Page heading area
**************************************************************************************************/

@media screen and (max-width: 960px) {
  .sectionheading {
    width: 720px;
  }

  /*.sectionheading .bottombar .sectionnav .button .link {
    width: 130px;
  }*/
}
@media screen and (max-width: 720px) {
  .sectionheading {
    width: 580px;
  }
  .sectionheading .bottombar .sectionnav {
    width: 300px;
  }
  /*.sectionheading .bottombar .sectionnav .button .link {
    width: 104px;
  }*/
}
@media screen and (max-width: 580px) {
  .sectionheading {
    width: auto;
    margin-left: 10px;
    margin-right: 10px;
  }
  .sectionheading #breadcrumbs {
    width: 300px;
    text-align: left;
    position: relative;
    top: 0;
  }
  .sectionheading .topbar .sectionlabel {
    display: none;
  }
  .sectionheading .topbar .sectionmessage {
    float: none;
    clear: both;
    padding-left: 10px;
    padding-bottom: 10px;
  }
  .sectionheading .bottombar .sectionnav {
    width: auto;
  }
  .sectionheading .bottombar .sectionnav .button {
    float: none;
  }
  .sectionheading .bottombar .sectionnav .button a {
    padding-right: 10px;
  }
  .sectionheading .bottombar .sectionnav .button .link {
    width: auto;
  }
  .pageheading .resultoptions {
    position: relative;
  }
  .filters .filter {
    width: 300px;
  }
  .filters div.applybutton, 
  .filters div.showallbutton {
    float: right;
    clear: both;
    margin-right: -10px;
  }
  .filters div.showallbutton {
    margin-bottom: 40px;
  }
  .filters .sbHolder .sbSelector {
    width: 260px;
  }
  .filters div ul li {
    width: 300px;
  }
  .filters div ul li .selectall {
    width: 278px;
  }
}

/**************************************************************************************************
* Tertiary Nav
**************************************************************************************************/
@media screen and (max-width: 720px) {
    a.tertiaryMob {
        display: block;
        float: left;
        text-decoration:none;
        font-weight:bold;
        width: 100%;
        background-color: #f2f2f2;
        background-image: url(/img/SCiM/visitus/arrow-dropdown-down.png);
        background-position: center right;
        background-repeat: no-repeat;
        padding:16px 5% 11px;
    }
    ul.tertiaryNav{
        display:none;
    }
    .tertiaryNav li a {
        width: 100%;
        padding: 16px 5% 11px;
    }
}

/**************************************************************************************************
* Content area
**************************************************************************************************/

@media screen and (max-width: 960px) {
  .maincontent {
    width: 720px;
  }
  .maincontent .column.rightcol {
    /*width: 720px;*/
  }
  .maincontent .column.span3 {
    margin:0;
  }
}
@media screen and (max-width: 720px) {
  .maincontent {
    width: 580px;
  }
  .maincontent .column.span3 {
    width: 560px;
  }
  .maincontent .column.rightcol {
    width: 560px;
  }
  .maincontent .column.rightcol .standard {
    height: auto;
    margin:10px;
  }
}
@media screen and (max-width: 580px) {
  .maincontent {
    width: 320px;
  }
  .maincontent .column.span3 {
    width: 300px;
  }
  .maincontent .column.rightcol {
    width: 300px;
  }
  .maincontent .column.rightcol .standard {
    margin:10px 0;
}
}

/**************************************************************************************************
*	#Content - originally from events.css
**************************************************************************************************/

@media only screen and (min-width: 701px) and (max-width: 980px) {
	#content div.left {
		margin: 0 2.1276595745% 0 1.0638297872%; /* 20px / 940px - 10px / 940px */
		width: 47.8723404255%; /* 450px / 940px */ 
	}
	#content div.right {
		margin: 0 1.0638297872% 0 0; /* 10px / 940px */
		width: 47.8723404255%; /* 450px / 940px */ 
	}
}
@media only screen and (max-width: 700px) {
	#content div.left {
		margin: 0 1.4285714286% 0 1.4285714286%; /* 10px / 700px - 10px / 700px */ 
		width: 97.1428571429%; /* 680px / 700px */
	}
	#content div.right {
		clear: both;
		margin: 0 1.4285714286% 0 1.4285714286%; /* 10px / 700px - 10px / 700px */ 
		width: 97.1428571429%; /* 680px / 700px */
	}
}
@media only screen and (min-width: 701px) and (max-width: 925px) {
	#content #lineStatus {
		clear: both;
	}
	#content #lineStatus span {
		width: 32.6086956522%; /* 150px / 460px */ 
	}
}
@media only screen and (max-width: 980px) {
	#content h2.clear {
		margin: 0 0 0 1.0638297872%; /* 10px / 940px */
	}
}

/**************************************************************************************************
* Pods
**************************************************************************************************/

@media screen and (max-width: 960px) {
    .promopods {
        float: none;
        margin: 0 auto;
    }
    .promopods .pod:first-child {
        margin-left:10px;
    }
    .promopods .pod {
        margin: auto 10px 20px 10px;
    }
}

@media screen and (max-width: 720px) {
  .pod.crosssell, 
  .pod.relatedlinks {
    width: 270px;
  }
  .pod.relatedlinks {
    height: auto;
  }
  .pod.iconic {
    width: 120px;
  }
}
@media screen and (max-width: 580px) {
  .pod.crosssell, .pod.relatedlinks {
    width: 300px!important;
    float: none;
    clear: both;
  }
  .promopods .pod:first-child {
    margin-left:0;
  }
  .pod.iconic {
    width: 140px;
  }
}

/**************************************************************************************************
* Itinerary area
**************************************************************************************************/
@media screen and (min-width: 961px) {
  .planyourvisit #planyourvisitCTA h3 {
    margin: 0 0 5px 0;
    padding: 0;
    font-size: 1.7em;
    font-weight: normal;
    border: 0;
  }
  .planyourvisit #planyourvisitCTA h3 a {
    height: 55px;
    padding: 3px 10px 4px 15px;
    background: url(/img/SCiM/visitus/bg-clipped-cyan.png) -12px 0px no-repeat;
    color: white;
    display: block;
    text-decoration: none;
    font-family: 'SMDINBold', Arial, sans-serif;
  }
  .planyourvisit #planyourvisitCTA h3 a:hover {
    background-position: -12px 0px;
  }
}
@media screen and (max-width: 960px) {
  .myVisitMessage {
    width: 720px;
  }
}
@media screen and (max-width: 720px) {
  #planyourvisitCTA {
    width: 220px;
  }
  .myVisitMessage {
    width: 560px;
  }
}
@media screen and (max-width: 580px) {
  #planyourvisitCTA {
    position: relative;
    clear: both;
    padding-top: 10px;
    margin-left: 10px;
    margin-right: 0;
    width: auto;
    float: none;
    top:auto;
  }
  #planyourvisitCTA h3 {
    font-size: 1.1em;
  }
  #planyourvisitCTA.widgetopen {
    margin-top: 20px;
    padding-top: 0;
    width: 280px;
  }
  .pod.planyourvisitwidget {
    width: 280px;
  }
  .myVisitMessage {
    width: auto;
    margin: 0 10px;
  }
  #planyourvisitCTA .planyourvisitwidget {
    width:300px;
    top:35px;
  }
}

/**************************************************************************************************
* Visit Us landing page
**************************************************************************************************/

@media screen and (max-width: 960px) {
  .visitus .featurepods .suggestions {
    width: 460px;
  }
  .visitus .featurepods .primary {
    position: absolute;
    top: 0;
    right: 0;
  }
  .visitus .featurepods .secondary {
    position: absolute;
    top: 240px;
    right: 0;
    width: 220px;
  }
  .visitus .featurepods .secondary img {
    height: 100%;
  }
  .visitus .featurepods .tertiary {
    position: absolute;
    top: 480px;
    right: 0;
    width: 220px;
  }
  .visitus .featurepods .tertiary img {
    height: 100%;
  }
  .visitus .featurepods .generalinfo {
    width: 460px;
    padding-right: 0;
  }
  .visitus .featurepods .generalinfo img {
    display: none;
  }
}
@media screen and (max-width: 720px) {
  .visitus .featurepods .suggestions {
    width: 560px;
  }
  .visitus .featurepods .primary {
    position: relative;
    width: 270px;
    margin-right:20px;
  }
  .visitus .featurepods .secondary {
    position: relative;
    top: 0;
    width: 270px;
  }
  .visitus .featurepods .tertiary {
    position: relative;
    top: 0;
    width: 270px;
  }
  .visitus .featurepods .generalinfo {
    position: relative;
    top: 0;
    right: auto;
    left: 0;
    width: 270px;
    height: auto;
    padding-right: 0;
  }
  .visitus .coverflow {
    width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
  .visitus .promopods .pod {
    position: relative;
    top: 0;
    right: auto;
    left: 0;
    width: 270px;
  }
}
@media screen and (max-width: 580px) {
  .visitus .featurepods {
      width:300px;
  }
  .visitus .featurepods .suggestions {
    width: 300px;
    margin-right:0;
    z-index: 0;
  }
  .visitus .featurepods .primary {
    width: 300px;
    padding-right: 0;
  }
  .visitus .featurepods .secondary {
    width: 300px;
  }
  .visitus .featurepods .tertiary {
    width: 300px;
  }
  .visitus .featurepods .generalinfo {
    width: 300px;
    padding-right: 0;
    z-index: 100;
  }
  .visitus .coverflow {
    width: 244px;
    padding-top: 320px;
    height: 30px;
    margin-left: auto;
    margin-right: auto;
  }
  .visitus .coverflow .item3 {
    left: 37px;
  }
  .visitus .coverflow .item2, 
  .visitus .coverflow .item4 {
    display: none;
  }
  .visitus .coverflow .item1, 
  .visitus .coverflow .item5 {
    display: none;
  }
  .visitus .promopods .pod {
    width: 100%;
  }
}
/*************************************************************************************************
*   Visit us - Carousel
**************************************************************************************************/
@media only screen and (min-width: 721px) and (max-width: 960px) {
	.carousel,
	.pod.suggestions .carousel {
		width: 460px;
	}
	
	.carousel.exhibit {
		width: 700px;
	}
}
@media only screen and (min-width: 581px) and (max-width: 720px) {
	.carousel,
	.pod.suggestions .carousel {
		width: 560px;
	}
}

@media only screen and (min-width: 481px) and (max-width: 580px) {
	.carousel,
	.pod.suggestions .carousel {
		width: 300px;
	}
}

@media only screen and (min-width: 40px) and (max-width: 480px) {
	.carousel,
	.pod.suggestions .carousel {
		width: 300px;
	}
}
/**************************************************************************************************
* Event carousel area
**************************************************************************************************/

@media screen and (max-width: 580px) {
  .eventcarouselfilter ul li {
    padding-bottom: 10px;
  }
}

/**********************************************************************************************
*   Visit us - Image gallery, pod suggestions, plan your visit, iconic slider, events slider
**************************************************************************************************/
@media only screen and (min-width: 721px) and (max-width: 960px) {
	.imageGallery .expanded .container {
		height: 465px;
	}
	.imageGallery .carouselarrow {
		margin: 194px 6.2411347518% 0 0;
	}
	.imageGallery .carouselarrow.right {
		margin: 194px 0 0 6.2411347518%;
	}
}
@media only screen and (min-width: 581px) and (max-width: 720px) {
	.imageGallery .expanded .container {
		height: 375px;
	}
	.imageGallery .carouselarrow,
	.column.span3 .imageGallery .carouselarrow {
		margin: 150px 3.5211267606% 0 0;
	}
	.imageGallery .carouselarrow.right,
	.column.span3 .imageGallery .carouselarrow.right {
		margin: 150px 0 0 3.5211267606%;
	}
}
@media only screen and (max-width: 580px) {
	.imageGallery .expanded .container {
		height: 207px;
		background: #fff;
	}
	.imageGallery .carouselarrow,
	.column.span3 .imageGallery .carouselarrow {
		margin: 65px -9.5846645367% 0 0;
	}
	.imageGallery .carouselarrow.right,
	.column.span3 .imageGallery .carouselarrow.right {
		margin: 65px 0 0 -9.5846645367%;
	}
	.imageGallery .title,
	.imageGallery h2 {
		margin: 0;
	}
}

@media screen and (max-width: 960px) and (min-width: 721px) {
	.pod.suggestions .carousel ul li {
		width: 460px;
	}
}
@media screen and (max-width: 720px) and (min-width: 581px) {
	.pod.suggestions .carousel ul li {
		width: 560px;
	}
}
@media screen and (max-width: 580px) {
	.pod.suggestions .carousel ul li {
		width: 300px;
	}
}
@media screen and (max-width: 720px) {
	.planyourvisit .filmstrip {
		width: 560px; 	
	}
}
@media screen and (max-width: 580px) {
	.planyourvisit .filmstrip {
		width: 300px; 	
	}
}
@media only screen and (min-width: 721px) and (max-width: 960px) {
	#iconicSlider .sliderContainer {
		width: 480px;
	}
}
@media only screen and (min-width: 581px) and (max-width: 720px) {
	#iconicSlider .sliderContainer {
		width: 350px;
	}
	#iconicSlider .carouselarrow {
		margin-left: 19px;
		margin-right: 20px;
	}
}

@media only screen and (min-width: 40px) and (max-width: 580px) {
	#iconicSlider .sliderContainer {
		width: 120px;
	}
	#iconicSlider .carouselarrow.left {
		margin-left: 12px;
		margin-right: 10px;
	}
	#iconicSlider .carouselarrow.right {
		margin-left: 10px;
		margin-right: 0;
	}
}
@media screen and (max-width: 720px) {
	 #iconicSlider .sliderContainer .pod.iconic {
		width: 100px;
	}
}
@media only screen and (min-width: 585px) and (max-width: 740px) {
	#eventsSlider .sliderContainer {
		width: 393px;
	}
}
@media only screen and (max-width: 584px) {
	#eventsSlider .sliderContainer {
		width: 192px;
	}
}
@media only screen and (max-width: 580px) {
	#dateSelection #datePicker {
		width: 65px;
	}
}


/**************************************************************************************************
* Plan your visit page
**************************************************************************************************/
@media screen and (min-width: 961px) {
  .planyourvisit #planyourvisitCTA {
    bottom: -5px;
    /*
    h3 {
    
      a {
        height: 45px; 
      }
    }
    */
  }
}
@media screen and (max-width: 960px) {
  .planyourvisit .planyourvisitcolumn {
    width: 720px !important;
    padding-top: 40px;
  }
  .planyourvisit .planyourvisitcolumn .planyourvisitwidget {
    display: none;
  }
  .planyourvisit .planyourvisitcolumn .pod {
    float: left;
    width: 220px;
  }
}
@media screen and (max-width: 720px) {
  .planyourvisit .resultscolumn .results {
    width: 580px;
  }
  .planyourvisit .resultscolumn .results .pod {
    width: 270px;
  }
  .planyourvisit .planyourvisitcolumn {
    width: 560px !important;
  }
  .planyourvisit .planyourvisitcolumn .pod {
    width: 180px;
  }
  .planyourvisit .results .pod:nth-child(3n) {
    margin:20px 20px 0 0;
  }
  .planyourvisit .results .pod:nth-child(2n) {
    margin:20px 0 0 0;
  }
}
@media screen and (max-width: 580px) {
  .planyourvisit .intro {
    padding-top: 20px;
  }
  .planyourvisit .resultscolumn {
    width: 300px !important;
  }
  .planyourvisit .resultscolumn .results {
    width: 320px;
  }
  .planyourvisit .resultscolumn .results .pod {
    width: 300px;
  }
  .planyourvisit .results .pod {
    margin:20px 0 0 0;
  }
  .planyourvisit .planyourvisitcolumn {
    width: 280px!important;
  }
  #overlay #noDateWarning {
    width: 260px;
    margin-top: 50px;
  }
  #overlay #noDateWarning a {
    width: 126px;
  }
}

/**************************************************************************************************
* Destination hub page
**************************************************************************************************/

@media screen and (max-width: 960px) {
  .destinationhub .heroimage {
    width: 700px;
  }
  .destinationhub .intro .sponsors {
    margin-bottom: 20px;
    padding-left: 0;
    margin-left: 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .pod.quickinfo,
  .pod.shortdetails {
    margin-right:20px;
  }
  .intro .introtext.setWidth,
  .intro.threeCol .introtext.setWidth {
      max-width:566px;
  }
  .pod.w1.quickinfo:nth-child(4n),
  .crosssell-pods .pod:nth-child(4n) {
    margin:20px 20px 0 0;
  }
  .pod.w1.quickinfo:nth-child(3n),
  .crosssell-pods .pod:nth-child(3n) {
    margin:20px 0 0;
  }
  .destinationhub .pod.shortdetails {
    float: none;
    clear: both;
    width: 700px;
    margin: 20px 0 0;
  }
  .destinationhub .pod.video .intro p {
    height: auto;
  }
  .destinationhub .details, 
  .destinationhub .mobiledetails {
    /*width: 720px!important;*/
    clear: both;
  }
  .destinationhub .details .quickinfo, 
  .destinationhub .mobiledetails .quickinfo {
    float: left;
  }
  .destinationhub .details .furtherinfo, 
  .destinationhub .mobiledetails .furtherinfo {
    float: left;
    width: 460px;
    clear: none;
    margin-top: 20px;
  }
  .destinationhub .details .interactivetour .pod.next, 
  .destinationhub .mobiledetails .interactivetour .pod.next {
    margin-right: 10px;
  }
  .pod.quickinfo, .pod.shortdetails {
    height: auto;
  }
  .crosssell-pods .crosssell {
    margin:20px 20px 0 0;
  }
  .crosssell-pods .crosssell:nth-child(3n) {
    margin:20px 0 0 0;
  }
}
@media screen and (max-width: 720px) {
  .pod.w1.quickinfo:nth-child(3n),
  .crosssell-pods .pod:nth-child(3n) {
    margin:20px 20px 0 0;
  }
  .crosssell-pods .pod:nth-child(2n),
  .pod.w1.quickinfo:nth-child(2n) {
    margin:20px 0 0;
  }
  .destinationhub .heroimage {
    width: 560px;
  }
  .intro .introtext.setWidth,
  .intro.threeCol .introtext.setWidth {
      max-width:428px;
  }
  .destinationhub .intro .sponsors {
    float: none;
    width: auto;
    clear: both;
  }
  .destinationhub .intro .sponsors h3 {
    padding-top: 20px;
    border: 0;
  }
  .destinationhub .pod.shortdetails {
    width: 560px;
    height: auto;
    margin: 0;
  }
  .destinationhub .pod.video {
    width: 560px;
    height: auto;
  }
  .destinationhub .pod.video .intro {
    width: auto;
    height: auto;
  }
  .destinationhub .pod.video .intro p {
    width: auto;
  }
  .destinationhub .pod.video .videoplayer {
    float: none;
    height: 440px;
    width: 560px;
  }
  .destinationhub .pod.video .videoplayer iframe {
    height: 350px!important;
  }
  .destinationhub .pod.twitter {
    background: url(/img/SCiM/visitus/bg-blog-green-narrow.png) bottom left no-repeat;
    width: 173px;
    height: 300px;
  }
  .destinationhub .pod.tumblr {
    width: 173px;
    height: 300px;
  }
  .destinationhub .comingsoon .pod.w2 {
    width: 366px;
    height: 250px;
  }
  .destinationhub .comingsoon .pod.w1 {
    width: 173px;
    height: 250px;
  }
  .destinationhub .comingsoon .pod.w1 img {
    height: 100%;
  }
  .destinationhub .previousPods .pod.w2 {
    width: 366px;
    height: 250px;
  }
  .destinationhub .previousPods .pod.w1 {
    width: 173px;
    height: 250px;
  }
  .destinationhub .previousPods .pod.w1 img {
    height: 100%;
  }
  .destinationhub .details, 
  .destinationhub .mobiledetails {
    margin: 10px 0;
  }
  .destinationhub .details .quickinfo, 
  .destinationhub .mobiledetails .quickinfo {
    width: 270px;
  }
  .destinationhub .details .furtherinfo, 
  .destinationhub .mobiledetails .furtherinfo {
    width: 270px;
  }
  .destinationhub .details .interactivetour .pod, 
  .destinationhub .mobiledetails .interactivetour .pod {
    width: 125px;
  }
  .destinationhub .details .interactivetour .pod a, 
  .destinationhub .mobiledetails .interactivetour .pod a {
    background-position: 44px 26px;
  }
  .destinationhub .details .interactivetour .pod.next a, 
  .destinationhub .mobiledetails .interactivetour .pod.next a {
    background-position: -120px 26px;
  }
  .pod.quickinfo, .pod.shortdetails {
    width: 270px;
  }
  .crosssell-pods .crosssell:nth-child(3n) {
    margin:20px 20px 0 0;
  }
  .crosssell-pods .crosssell:nth-child(2n) {
    margin:20px 0 0 0;
  }
}
@media screen and (max-width: 580px) {
  .pod.w1:nth-child(3n),
  .pod.w1,
  .pod.w1.quickinfo,
  .crosssell-pods .pod {
    margin:20px 0;
  }
  .destinationhub .heroimage {
    width: 300px;
  }
  .destinationhub .heroimage .overlay {
    width: 240px;
    bottom: 10px;
    right: 10px;
    height: auto;
  }
  .intro .introtext.setWidth,
  .intro.threeCol .introtext.setWidth {
    max-width:94%;
  }
  .destinationhub .intro .destinationlogo {
    float: none;
    width: 94%;
  }
  .destinationhub .intro .introtext {
    float: none;
  }
  .destinationhub .intro .sponsors ul li {
    width: 140px;
  }
  .destinationhub .pod.shortdetails {
    width: 300px;
  }
  .destinationhub .pod.video {
    width: 300px;
  }
  .destinationhub .pod.video.hero {
    height: 220px;
  }
  .destinationhub .pod.video.hero .videoplayer {
    height: 220px;
  }
  .destinationhub .pod.video.hero .videoplayer iframe {
    height: 220px;
  }
  .destinationhub .pod.video .videoplayer {
    width: 300px;
    height: 200px;
    float: none;
    clear: both;
  }
  .destinationhub .pod.video .videoplayer iframe {
    height: 200px!important;
  }
  .destinationhub .pod.twitter {
    background: url(/img/SCiM/visitus/bg-blog-green-wide.png) bottom left no-repeat;
    width: 300px;
    height: 200px;
    margin:0;
    margin-top:10px;
  }
  .destinationhub .pod.tumblr {
    width: 300px;
    margin-right:0;
  }
  .destinationhub .pod.tumblr img {
    width: 300px;
    height: auto;
  }
  .destinationhub .comingsoon .pod.w2 {
    width: 300px;
    height: 210px;
  }
  .destinationhub .comingsoon .pod.w1 {
    width: 300px;
    height: 210px;
  }
  .destinationhub .previousPods .pod.w2 {
    width: 300px;
    height: 210px;
  }
  .destinationhub .previousPods .pod.w1 {
    width: 300px;
    height: 210px;
  }
  .destinationhub .details, 
  .destinationhub .mobiledetails {
    width: 300px!important;
  }
  .destinationhub .details .quickinfo, 
  .destinationhub .mobiledetails .quickinfo {
    width: 300px;
    margin-left: 0;
    margin-right: 0;
  }
  .destinationhub .details .furtherinfo, 
  .destinationhub .mobiledetails .furtherinfo {
    width: 300px;
    float: none;
    clear: both;
    margin-left: 0;
    margin-right: 0;
  }
  .pod.quickinfo, .pod.shortdetails {
    width: 300px;
  }
  .crosssell-pods .crosssell:nth-child(3n) {
    margin:20px 0 0 0;
  }
}

/**************************************************************************************************
* Accessibility pod
**************************************************************************************************/

@media screen and (max-width: 720px) {
  .accessibility {
    width: 560px!important;
  }
}
@media screen and (max-width: 580px) {
  .accessibility {
    width: 300px!important;
  }
}

/**************************************************************************************************
* Exhibit/events details pods
**************************************************************************************************/

@media screen and (max-width: 580px) {
  .calendarcontent {
    height: auto;
  }
  .calendarcontent .text .details {
    position: relative;
    bottom: auto;
    left: 0;
  }
}

/**************************************************************************************************
* Suggestions widget
**************************************************************************************************/

@media screen and (max-width: 580px) {
  .pod.suggestions {
    height: 440px;
  }
}

/**************************************************************************************************
* Search results
**************************************************************************************************/

@media screen and (max-width: 580px) {
  .searchresults .sectionheading .searchoptions .text {
    width: 270px;
    margin-bottom: 10px;
  }
  .content .maincontent img.rightalign {
    width: 300px;
    height: auto;
  }
  .content .maincontent img.leftalign {
    width: 300px;
    height: auto;
  }
}

/**************************************************************************************************
* Event carousel
**************************************************************************************************/

@media screen and (max-width: 960px) {
  .eventsCarouselContainer .separator, .eventsCarouselContainer .subtitle {
    width: 700px;
  }
}
@media screen and (max-width: 720px) {
  .eventsCarouselContainer .separator, .eventsCarouselContainer .subtitle {
    width: 580px;
  }
}
@media screen and (max-width: 580px) {
  .eventsCarouselContainer .separator, .eventsCarouselContainer .subtitle {
    width: 300px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1152px) {
	#eventsControls #prevDay,
	#eventsControls #nextDay {
		background-position: left bottom;
	}
}
@media only screen and (min-width: 1024px) and (max-width: 1100px) {
	#eventsControls #prevDay,
	#eventsControls #nextDay {
		margin: 0 3px;
	}
}
@media only screen and (min-width: 866px) and (max-width: 992px) {
	#eventsControls #prevDay,
	#eventsControls #nextDay {
		background-position: left bottom;
	}
}
@media only screen and (min-width: 866px) and (max-width: 940px) {
	#eventsControls #prevDay,
	#eventsControls #nextDay {
		margin: 0 3px;
	}
}
@media only screen and (min-width: 681px) and (max-width: 810px) {
	#eventsControls #prevDay,
	#eventsControls #nextDay {
		background-position: left bottom;
	}
}
@media only screen and (min-width: 681px) and (max-width: 740px) {
	#eventsControls #prevDay,
	#eventsControls #nextDay {
		margin: 0 3px;
	}
}
@media only screen and (min-width: 490px) and (max-width: 621px) {
	#eventsControls #prevDay,
	#eventsControls #nextDay {
		background-position: left bottom;
	}
}
@media only screen and (min-width: 490px) and (max-width: 550px) {
	#eventsControls #prevDay,
	#eventsControls #nextDay {
		margin: 0 3px;
	}
}
@media only screen and (max-width: 432px) {
	#eventsControls #prevDay,
	#eventsControls #nextDay {
		background-position: left bottom;
	}
}
@media only screen and (max-width: 358px) {
	#eventsControls #prevDay,
	#eventsControls #nextDay {
		margin: 0 3px;
	}
}
@media only screen and (min-width: 866px) and (max-width: 1023px) {
	#eventsWrapper {
		width: 758px;
	}
}
@media only screen and (min-width: 681px) and (max-width: 865px) {
	#eventsWrapper {
		width: 576px;
	}
}
@media only screen and (min-width: 490px) and (max-width: 680px) {
	#eventsWrapper {
		width: 387px;
	}
	#dateSelection {
		height: 87px;
		width: 335px;
	}
	#dateSelection p {
		float: none;
		margin: 0 auto;
		width: 100%;
	}
	#dateSelection div.right {
		clear: both;
		margin: 10px 0 0 0;
		width: 100%;
		text-align: center;
	}
}
@media only screen and (max-width: 489px) {
	#eventsWrapper {
		width: 198px;
	}
	#dateSelection {
		height: 146px;
		width: 160px;
	}
    #dateSelection input {
        margin:0;
    }
	#dateSelection p {
		float: none;
		margin: 0 auto;
		width: 100%;
	}
	#dateSelection p a {
		clear: both;
		width: 120px;
		text-align: center;
	}
	#dateSelection p a:first-child {
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		border-bottom-left-radius: 0;
	}
	#dateSelection p a:last-child {
		border-top-right-radius: 0;
		border-bottom-right-radius: 3px;
		border-bottom-left-radius: 3px;
	}
	#dateSelection div.right {
		margin: 10px 5px 0 0;
	}
	#dateSelection input {
		width: 75px;
	}
}

/**************************************************************************************************
* Footer
**************************************************************************************************/

@media screen and (max-width: 960px) {
  footer {
    width: 720px;
  }
  footer div {
    width: 320px;
  }
}
@media screen and (max-width: 720px) {
  footer {
    width: 580px;
  }
  footer div {
    width: 250px;
  }
}
@media screen and (max-width: 580px) {
  footer {
    width: auto;
  }
  footer div {
    margin: 20px 4% 0 4%;
    /* 20px / 500px - 20px / 500px */
    width: auto;
  }
  footer div.right {
    float: left!important;
  }
}
@media only screen and (max-width: 500px) {
	footer div {
		clear: both;
		width: 92%; /* 460px / 500px */
	}
}

/**************************************************************************************************
* Responsive menus
**************************************************************************************************/

@media screen and (max-width: 960px) {
  .responsivemenutop .mainmenu {
    width: 660px;
  }
  .responsivemenutop.drop {
    top: 60px;
  }
  .responsivemenubottom .sectionnav .button .link {
    width: 120px;
  }
}
@media screen and (max-width: 720px) {
  .responsivemenutop .mainmenu {
    width: 520px;
  }
  .responsivemenutop .mainmenu li {
    margin-bottom: 10px;
  }
  .responsivemenutop li {
    margin-bottom: 10px;
  }
  .responsivemenutop.drop {
    top: 40px;
  }
  .responsivemenubottom .sectionnav .button .link {
    width: 100px;
  }
}
@media screen and (max-width: 580px) {
  .responsivemenutop .mainmenu {
    width: 100%;
    margin-right: 0;
  }
  .responsivemenubottom .sectionnav .button {
    float: none;
  }
  .responsivemenubottom .sectionnav .button a {
    padding-right: 10px;
  }
  .responsivemenubottom .sectionnav .button .link {
    width: auto;
  }
  .responsivemenubottom {
    display: none;
  }
  .sectionheading .bottombar .sectionnav {
    display: none;
  }
  #emailFormOverlay .emailForm {
    width: 260px;
    margin-top: 50px;
  }
  #emailFormOverlay .emailForm input#recipientName {
    width: 150px;
  }
  #emailFormOverlay .emailForm input#recipientAddress {
    width: 250px;
  }
  #emailFormOverlay .emailForm button {
    width: 126px;
  }
}

/**************************************************************************************************
* E-mail My Visit pop-up
**************************************************************************************************/

@media screen and (max-width: 960px) {
  .videochapter .thumbnail a .play {
    width: 220px;
    height: 124px;
  }
}

@media screen and (max-width: 720px) {
  .videochapter .videoplayer iframe {
      width: 560px;
      height: 350px;
  }
    .videochapter .thumbnail:nth-child(3n),
    .videochapter .thumbnail {
        width: 270px;
        margin:0 20px 20px 0;
    }
    .videochapter .thumbnail:nth-child(2n) {
        margin: 0 0 20px;
    }
}
@media screen and (max-width: 580px) {
  #emailFormOverlay .emailForm {
      width: 260px;
      margin-top: 50px;
  }
  #emailFormOverlay .emailForm input#recipientName {
      width: 150px;
  }
  #emailFormOverlay .emailForm input#recipientAddress {
      width: 250px;
  }
  #emailFormOverlay .emailForm button {
      width: 126px;
  }
  .videochapter .thumbnail:nth-child(2n),
  .videochapter .thumbnail {
    width:100%;
    margin:10px 0 0 0;
  }
  .videochapter .videoplayer iframe {
      width: 300px;
      height: 200px;
  }
}
/**************************************************************************************************
* Search
**************************************************************************************************/

@media screen and (max-width: 580px) {
    .search-head {
        padding: 10px 30px 40px;
    }
}