/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
	div#main,
	.playlist,
	div.credits,
	#contact-adam	{
		width: 100%;
	}
	div#main {
		background-size: auto;
	}
	div#logo a {
		background-size: contain;
		width: 100%;
	}
	#tracksdemos {
		display: none;
	}
  #mobile-controller {
    background-image: url('../images/play.png');
    background-size: cover;
    cursor: pointer;
    display: block;
    height: 40px;
    width: 40px;

    &.now-playing {
    background-image: url('../images/pause.png');
    }
  }
  div.page-body {
    padding: 25px 0;
    width: 100%;
  }
}

/* Portrait */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	div#container {
		background: 0 none;
	}
	div#main {
		padding: 0 30px 20px;
	}
}

/* Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 640px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

  div.page-body {
    padding: 40px 0 0;
    width: 100%;
  }
}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
	div#header,
	div#logo,
	div#main,
	.playlist,
	div.credits,
	#contact-adam	{
		width: 100%;
	}
	div#main {
		background-size: auto;
	}
	div#logo a {
		background-size: contain;
		width: 100%;
	}
	#tracksdemos {
		display: none;
	}
  #mobile-controller {
    background-image: url('../images/play.png');
    background-size: cover;
    cursor: pointer;
    display: block;
    height: 40px;
    width: 40px;

    &.now-playing {
    background-image: url('../images/pause.png');
    }
  }
}

/* Portrait */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	div#container {
		background: 0 none;
	}
	div#main {
		padding: 0 30px 20px;
	}
}

/* Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
	div#header,
	div#logo,
	div#main,
	.playlist,
	div.credits,
	#contact-adam	{
		width: 100%;
	}
	div#main {
		background-size: auto;
	}
	div#logo a {
		background-size: auto;
		width: 100%;
	}
	#tracksdemos {
		display: none;
	}
  #mobile-controller {
    background-image: url('../images/play.png');
    background-size: cover;
    cursor: pointer;
    display: block;
    height: 40px;
    width: 40px;

    &.now-playing {
    background-image: url('../images/pause.png');
    }
  }
}

/* Portrait */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	div#container {
		background: 0 none;
	}
	div#main {
		padding: 0 30px;
	}
}

/* Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3) {
	div#header,
	div#logo,
	div#main,
	.playlist,
	div.credits,
	#contact-adam	{
		width: 100%;
	}
	div#main {
		background-size: auto;
	}
	div#logo a {
		background-size: auto;
		width: 100%;
	}
	#tracksdemos {
		display: none;
	}
  #mobile-controller {
    background-image: url('../images/play.png');
    background-size: cover;
    cursor: pointer;
    display: block;
    height: 40px;
    width: 40px;

    &.now-playing {
    background-image: url('../images/pause.png');
    }
  }
}

/* Portrait */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {
	div#container {
		background: 0 none;
	}
	div#main {
		padding: 0 30px;
	}
}

/* Landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
}


/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 1) {
	div#main {
		width: 85%
	}
}

/* Portrait */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 1) {
	div#main {
		width: 85%
	}
}

/* Portrait */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 2) {
	div#main {
		width: 85%
	}

  div.page-body {
    padding: 40px 0 0;
    width: 100%;
  }
}

/* Portrait */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) {

  div.page-body {
    padding: 40px 0 0;
    width: 100%;
  }
}