@media screen and (max-width: 768px) {
  .sponsor h1 {
    font-size: 1.5em;
  }
  
  .sponsor-blurb .line1 {
    font-size: 1.25em;
  }

  .terms h1 a {
    /* always show real leftlogic logo on mobile */
    background-position: bottom left;
  }
}

@media screen and (max-height: 16em) and (min-width: 40em) {
  html:before {
    display: inline;
    content: "Ohhh noes" !important;
  }
  
  header {
    margin-top: -2em;
  }
  
  .full-frontal {
    background: url(http://29.media.tumblr.com/tumblr_l5wjnzhwtq1qcjha6o1_400.jpg) no-repeat 50% -70px;
    -webkit-mask-box-image: url(images/ff2011-logo.png);    
  }
}

@-webkit-keyframes background {
	from {
		background-color: #D6CD7E;
	}
	25% {
		background-color: #FF242F;
	}
	50% {
		background-color: #D62782;
	}
	75% {
		background-color: #25D673;
	}
	to {
		background-color: #D6CD7E;
	}
}

@-webkit-keyframes invert-background {
	from {
    background-color: #000AD6;
		background-position: top left, top left, top left;
	}
	49.9% {
    background-color: #000AD6;
	}
	50% {
    background-color: #FF00A2;
	}
	74.9% {
    background-color: #FF00A2;
	}
	75% {
    background-color: #FF0016;
	}
	99.9% {
    background-color: #00FF12;
	}
	to {
    background-color: #000AD6;
		background-position: bottom right, bottom right, bottom right;
	}
}


@-webkit-keyframes foreground {
	from {
		color: #D6CD7E;
	}
	25% {
		color: #FF242F;
	}
	50% {
		color: #D62782;
	}
	75% {
		color: #25D673;
	}
	to {
		color: #D6CD7E;
	}
}

@media screen and (min-width: 88em) and (max-width: 88.124em) {
  html:before {
    display: inline;
    content: "Welcome to the speccy loading mode" !important;
  }
  
  header {
    margin-top: -2em;
  }
  
  .full-frontal {
    background: #D6CD7E fixed no-repeat 50% -70px;
    -webkit-mask-box-image: url(images/ff2011-logo.png);    
    -webkit-animation-name: background;
  	-webkit-animation-duration: 300ms;
  	-webkit-animation-iteration-count: infinite;
  	-webkit-animation-timing-function: linear;  	
  }
  
  .wrapper, header, h1, h2, a, p {
    -webkit-animation-name: foreground;
  	-webkit-animation-duration: 200ms;
  	-webkit-animation-iteration-count: infinite;
  	-webkit-animation-timing-function: linear;
  }
  
  html {
    background-position: bottom right, bottom right, bottom right;
    background-color: blue;
    background-image:
      -webkit-linear-gradient(transparent 25%, rgba(255,255,255,.5) 25%),
      -webkit-linear-gradient(transparent 50%, rgba(255,255,255,.7) 50%),
      -webkit-linear-gradient(transparent 75%, rgba(255,0,0,1) 75%);
    background-image:
      -moz-linear-gradient(transparent 25%, rgba(255,255,255,.5) 25%),
      -moz-linear-gradient(transparent 50%, rgba(255,255,255,.7) 50%),
      -moz-linear-gradient(transparent 75%, rgba(255,0,0,1) 75%);
    background-image:
      -o-linear-gradient(transparent 25%, rgba(255,255,255,.5) 25%),
      -o-linear-gradient(transparent 50%, rgba(255,255,255,.7) 50%),
      -o-linear-gradient(transparent 75%, rgba(255,0,0,1) 75%);
    background-size: 50px, 50px, 50px;
    background-repeat: repeat, repeat, repeat;
    -webkit-animation-name: invert-background;
  	-webkit-animation-duration: 0.8s;
  	-webkit-animation-iteration-count: infinite;
  	-webkit-animation-timing-function: linear;
  }

  blockquote {
    -webkit-mask-box-image: url(images/bubble.png);
  }
  
  blockquote, input {
    background-position: bottom right, bottom right, bottom right;
    background: #D6CD7E fixed no-repeat 50% -70px;
    background-image:
      -webkit-linear-gradient(0, transparent 25%, rgba(255,255,255,.5) 25%),
      -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.7) 50%),
      -webkit-linear-gradient(0, transparent 75%, rgba(255,0,0,1) 75%);
    background-image:
      -moz-linear-gradient(0, transparent 25%, rgba(255,255,255,.5) 25%),
      -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.7) 50%),
      -moz-linear-gradient(0, transparent 75%, rgba(255,0,0,1) 75%);
    background-image:
      -o-linear-gradient(0, transparent 25%, rgba(255,255,255,.5) 25%),
      -o-linear-gradient(0, transparent 50%, rgba(255,255,255,.7) 50%),
      -o-linear-gradient(0, transparent 75%, rgba(255,0,0,1) 75%);
    background-size: 50px, 50px, 50px;
    background-repeat: repeat, repeat, repeat;
    -webkit-animation-name: invert-background;
  	-webkit-animation-duration: 500ms;
  	-webkit-animation-iteration-count: infinite;
  	-webkit-animation-timing-function: linear;
  	-webkit-animation-fill-mode: both;
  	-webkit-animation-direction: alternate;   
  }
}

@media screen and (max-width: 73em) {
  .tweets div {
      width: 26%;
  }
}
@media screen and (min-width: 63em) {
  .wrapper {
    width: 94%;
  }
}
@media screen and (max-width: 63em) {
  .want-to {
    margin-bottom: 3.075em;
  }
  .tweets div {
      width: 34%;
  }
}
@media screen and (max-width: 56em) {  
  
  header .full-frontal {
    margin-bottom: 0.6em;
  }
  header .buy-tickets {
    position: relative;
    float: none;
    clear: both;
    font-size: 41px;
    line-height: 48px;
    overflow: hidden;
  }
  header .buy-tickets .tickets-wrapper {
    float: left;
    margin-right: 308px;
  }
  header .buy-tickets .type {
    margin-right: 0.2em;
  }
  header .buy-tickets .type,
  header .buy-tickets .price {
    float: left;
    font-size: 1em;
  }
  header .buy-tickets .buy-button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0 0.2em;
    margin-top: 0;
  }
  nav {
    margin-top: 0.8em;
  }
  
  .want-to section {
    width: 100%;
    float: none;
    margin-bottom: 1em;
  }
  .want-to section h1 {
   float: none;
   min-width: none;
   margin-left: 2.6em; 
  }
  .want-to section p {
    max-width: none;
    margin-left: 11em;
  }
}
/*@media screen and (max-width: 781px) {
  header .buy-tickets .buy-button {
    top: 24px;
  }
}
*/
@media screen and (max-width: 47em) {
  .want-to {
    margin-bottom: 2.075em;
  }
  .tweets div {
      width: 50%;
  }
}
@media screen and (max-width: 37em) {
  .want-to section {
    width: 100%;
    float: none;
    margin-bottom: 1em;
  }
  .want-to section h1 {
    float: right;
    min-width: 5em;
    margin-left: 0;
  }
  .want-to section p {
    max-width: 20em;
    margin-left: 0;
  }
}
@media screen and (max-width: 36em) {
  .wrapper {
    margin-top: 1em; 
  }
  .follow {
    font-size: 1.875em;
  }
  .terms h1 {
    float: none;
  }
}
@media screen and (max-width: 32em) {
  
  form {
    margin: 1.375em 0 1.375em 0;
  }
  
  .want-to {
    margin-bottom: 1.075em;
  }
  .tweets div {
      width: 100%;
  }
}
@media screen and (max-width: 25em) {
  .wrapper {
    min-width: 97%;
    width: 97%;
  }
  
  .terms {
    margin-bottom: 0.25em;
  }
  
  .terms h1 a {
    margin: 0 auto;
  }
  
  .want-to section {
    width: 100%;
    float: none;
    margin-bottom: 1em;
  }
  .want-to section h1 {
   float: none;
   min-width: none;
   margin-left: 0; 
  }
  .want-to section p {
    float: none;
  }
}

/* yeah, overkill - sorry :( --rs */
@media screen and (max-width: 896px) {
  html {
    background-position: center -71px;
  }
  
  header .workshops-only .price {
    font-size: 0.55em;
    line-height: 2em;
  }
}
@media screen and (max-width: 750px) {
  html {
    background-position: center -36px;
  }   
}
@media screen and (max-width: 731px) {
  html {
    background-position: center 9px;
  }   
}
@media screen and (max-width: 594px) {
  html {
    background-position: center 9px;
  }  
}
@media screen and (max-width: 594px) {
  html {
    background-position: center 10px;
  }  

  .schedule tr td:nth-child(2) {
    display: none;
  }

  .schedule tr td:nth-child(3) {
    padding-left: 10px;
  }
}
@media screen and (max-width: 576px) {
  html {
    background-position: center 6px;
  }  
}
@media screen and (max-width: 554px) {
  html {
    background-position: center 157px;
  }  
}
@media screen and (max-width: 544px) {
  html {
    background-position: center 202px;
  }  
}
@media screen and (max-width: 520px) {
  html {
    background-position: center 114px;
  }
}

@media screen and (max-width: 409px) {
  html { 
    background-position: center 150px;
  }
}

@media screen and (max-width: 360px) {
  html {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHklEQVQIW2P4//+/MBQzgDAICEMxXAAMYCoRIlCVANL6FYTYi5d+AAAAAElFTkSuQmCC), url('images/bg-pier-small.png'); 
     background-position: center 335px;
  }
}

@media screen and (max-width: 320px) {
  html {
    overflow-x: hidden;
    background-position: center 125px;
  }
  
  .sponsor-blurb p {
    display: none;
  }
  
  .sponsors a.large,
  .sponsors a.half,
  .sponsors a.small {
    width: 100%;
    height: auto;
    text-align: center;
  }
  
  .full-frontal {
    display: none;
  }

  .speakers-list li {
    font-size: 2em;
  }

  .fat-footer section {
    float: none;
  }
  
  .updates, .sponsors {
    width: auto;
  }
  
  .updates .follow {
    line-height: 1.75em;
    margin-right: 0;
    padding: 0.1em 0;
  }
  
  .updates p {
    padding-right: 0;
  }
  
  .full-frontal {
    background: url(images/ff2011-logo.png) no-repeat center;
    background-size: 100%;
    height: 77px; /*1.1em;*/
    width: 82px; /*1.1em;*/
  }
  
  .fat-footer {
    padding-bottom: 1em;
  }
  
/*  .sponsors a.small {
    width: 28%;
    line-height: 4em;
    height: 4em;
  }
*/  
  hgroup {
    display: inline;
  }
  
  header hgroup {
    background: url(images/ff2011-logo.png) no-repeat top left;
    background-size: 25%;
  }

  header h2,
  header .tickets {
    font-size: 2.71em;
  }

  header h2 {
    padding-left: 26%;
  }
  
  .speaker {
    width: 100%;
    margin-right: 0;
  }
  
  /* venue */
  #venue .details { 
    width: 100%;
  }
  
  #venue .details li > span {
    display: none;
  }
  
  #venue .venue img {
    width: 100%;
  }
  
  #venue #venue-map {
    display: none;
  }
  
  footer {
    margin-bottom: 2em;
  }

  .schedule tr td:nth-child(1) {
    border-bottom: 0;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: 10px;
    position: absolute;
    width: auto;
  }

  .schedule tr td:nth-child(3) {
    width: 90%;
    padding-left: 0;
  }

  .schedule tr td:nth-child(1),
  .schedule tr td .timeslot {
    font-size: 16px;
    line-height: 18px;
  }

  .schedule tr td .timeslot {
    display: inline;
  }

  .schedule tr td:nth-child(1) span {
    color: transparent;
  }

  .schedule tr td:nth-child(1) > span *:last-child {
    display: none;
  }

  .schedule tr td:nth-child(1) time:first-child {
    color: #93CFD6;
  }
}

@media screen and (max-width: 940px) {
  #venue .details {
    width: 60%;
  }

  #venue .venue img,
  #venue-map {
    width: 39%;
  }
}

@media screen and (max-width: 840px) {
  .image-cube {
    width: 40%;
  }
  
  .image-cube div {
    width: 50%;
  }
  
  .image-cube div:last-child,
  .image-cube div:nth-child(8),
  .image-cube div:nth-child(7) {
    display: none;
  }
  
  .speakers-list li {
    margin-bottom: 2%;
  }
}

@media screen and (max-width: 776px) {
  .image-cube div:nth-child(8),
  .image-cube div:nth-child(7) {
    display: block;
  }

  header .buy-tickets .buy-button {
    top: 0;
  }
}

@media screen and (max-width: 720px) {
  .sponsor-blurb h1 {
    display: none;
  }
  
  .sponsor-blurb p {
    width: 100%;
    float: none;    
  }
  
  .sponsor-full > a {
    float: none;
    display: block;
    width: 100%;
    padding-bottom: 0;
  }
  
  .sponsor-full > a img {
    width: 50%;
    margin: 0 auto;
    display: block;
  }
  
  .sponsor-full .blurb {
    border-left: 0;
  }
  
  .sponsor-small .sponsor-logo {
    width: auto;
  }

  .sponsor-half .sponsor-logo {
    width: auto;
    margin-right: 1%;
    margin-bottom: 1%;
  }
  
  #workshops .callout {
    float: none;
    width: 100%;
  }
  
  #workshops .headshot {
    display: none;
  }

  #workshops .details {
    float: none;
    width: 100%;
    margin-left: 0;
  }
  
  ul {
    padding-left: 0;
  }
  
}

@media screen and (max-width: 520px) {
  #venue .details {
    width: 100%;
  }

  #venue .venue img,
  #venue-map {
    display: none;
  }

  header .buy-tickets .buy-button {
    max-width: 100%;
    top: 0;
    position: relative;
  }  
  .tickets p span {
    display: block;
    float: none;
    width: 100%;
    margin-bottom: 14px;
  }
  
  .tickets {
    margin-bottom: 1em;
  }

  /* removed elements */
  header .buy-tickets .tickets-wrapper,
  .image-cube {
    display: none;
  }
  
  .speakers-list {
    width: 100%;
    float: none;
  }  
}

@media screen and (max-width: 442px) {
  .speakers-list li {
    font-size: 3em;
  }
}