body {font-family: 'Fira Sans', sans-serif;}

h1 {font-size: 45px;}
h2 {font-size: 35px;}
video { padding: 70px 32px 53px; background: url(/phone-background.png); background-size: cover; }

nav ul li { display: inline-block; padding : 0 20px; list-style: none; border-right: 1px solid blue; }
nav ul li.last{ border: none;}
header img { width: 100px; }
header img, header nav { display: inline-block; }
header nav { }

a { text-decoration: none; color: #209CFF; }
a:hover { color: black; }
#song-listing, .white-background { background-color: white;}
footer { text-align: center;  padding : 20px}
video { outline: none; }
@media only screen and (min-width: 768px) {
	
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
  .container{ width: 960px; margin: 0 auto; display: block; position: relative; }
	section img { float: right; }
	header nav { top: -58px; position: relative; }
	header nav ul { position: absolute; top: 10px; right: 0px;}
	
	.container div, article header {position: relative;}
	.right .welcome-video, .welcome-video { position: absolute; top: 40px; right: 20px; }
	.right h2, header h1 {padding-top: 175px;}
	.right .feature-list, header .feature-list { padding-bottom: 240px; }
	section .feature-list { padding-bottom: 240px; }
	#favourites, footer, article {background-color: aliceblue; }
	
	
	#songs-listing, .white-background{ background-color: white;}
	.left .welcome-video {left: 0px; right: none;}
	.left h2 { margin-left: 400px; padding-top :160px; }
	.left li { margin-left: 400px;}
	.left p { margin-left: 400px;}
}


