.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* General Styling */
body, html {
height:100%;
min-height:100%;
background-color:#000;
color:#fff;
}
.container {
display:table;
table-layout:fixed;
width:100%;
height:100%;
overflow:hidden;
position:relative;
}
.content {
display:table-cell;
vertical-align:middle;
padding:0 0 0 8%;
}
section {
height:845px;
min-width:960px;
opacity:0;
}
.loaded section {
opacity:1;
-webkit-transition:opacity 300ms ease-out;
-moz-transition:opacity 300ms ease-out;
transition:opacity 300ms ease-out;
}
/* Text and Paragraph Styling */
h1 {
text-indent:-9999px;
}
.content h2 {
font-size:30.5px;
line-height:28px;
}
.content h3 {
font-size:18px;
line-height:20px;
margin-bottom:8px;
}
p {
margin:16px 0;
line-height:1.4em;
}
p.intro {
width:400px;
padding:15px 15px;
background-color:rgba(0,0,0,0.5);
font-size:20px;
}
.indt {
text-indent:20px;
}
/* Navigation */
#slideNav {
display:none;
position:fixed;
left:0;
top:50%;
margin-top:-80px;
z-index:11;
}
#slideNav a {
display:block;
width:50px;
height:50px;
position:relative;
overflow:hidden;
text-decoration:none;
color:#fff;
}
#slideNav a.disabled {
cursor:default;
}
/* Parallax Scroll */
.loading {
background:url(../images/ico_loading.gif) no-repeat center center;
}
.bcg {
background-position:center center;
background-repeat:no-repeat;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
height:100%;
width:100%;
}
#slide-1 .bcg {
background-image:url(../images/pink-floyd-background-4.jpg);
}
#slide-1 .original {
background:url(../images/PinkFloyd1967.jpg) center no-repeat;
}
#slide-2 .bcg {
background-image:url(../images/piper.jpg);
}
#slide-2 .album {
background:url(../images/gate.jpg) center no-repeat;
}
#slide-3 .bcg {
background-image:url(../images/secrets.jpg);
}
#slide-3 .album {
background:url(../images/secrets.jpg) center no-repeat;
}
#slide-4 .bcg {
background-image:url(../images/group.jpg);
}
#slide-4 .album {
background:url(../images/moreST.jpg) center no-repeat;
}
#slide-5 .bcg {
background-image:url(../images/speakers.jpg);
}
#slide-5 .album {
background:url(../images/umma.jpg) center no-repeat;
}
#slide-6 .bcg {
background-image:url(../images/atomheartmother.jpg);
}
#slide-6 .album {
background:url(../images/atom.jpg) center no-repeat;
}
#slide-7 .bcg {
background-image:url(../images/meddlewallpaper.jpg);
}
#slide-7 .album {
background:url(../images/meddle.jpg) center no-repeat;
}
#slide-8 .bcg {
background-image:url(../images/cloudswallpaper.jpg);
}
#slide-8 .album {
background:url(../images/clouds.jpg) center no-repeat;
}
#slide-9 .bcg {
background-image:url(../images/prizm.png);
}
#slide-9 .album {
background:url(../images/darksidemoon.jpg) center no-repeat;
}
#slide-10 .bcg {
background-image:url(../images/machine.jpg);
}
#slide-10 .album {
background:url(../images/wwyh.jpg) center no-repeat;
}
#slide-11 .bcg {
background-image:url(../images/animals.jpg);
}
#slide-11 .album {
background:url(../images/animals.png) center no-repeat;
}
#slide-12 .bcg {
background-image:url(../images/pinkfloydwall.jpg);
}
#slide-12 .album {
background:url(../images/the-wall.jpg) center no-repeat;
}
#slide-13 .bcg {
background-image:url(../images/wall2.jpg);
}
#slide-13 .album {
background:url(../images/the-wall.jpg) center no-repeat;
}
#slide-14 .bcg {
background-image:url(../images/poppies.jpg);
}
#slide-14 .album {
background:url(../images/final-cut.jpg) center no-repeat;
}
#slide-15 .bcg {
background-image:url(../images/momentary-lapse.jpg);
}
#slide-15 .album {
background:url(../images/lapseofreason.jpg) center no-repeat;
}
#slide-16 .bcg {
background-image:url(../images/bellwalpaper.jpg);
}
#slide-16 .album {
background:url(../images/divisionbell.jpeg) center no-repeat;
}
#slide-17 .bcg {
background-image:url(../images/cloudsBG.jpg);
}
#slide-17 .album {
background:url(../images/endlessriver.jpg) center no-repeat;
}
/* List Styling */
.content ul {
margin-top:20%;
max-width:400px;
padding:15px 15px;
background-color:rgba(0,0,0,0.5);
}
.content li {
list-style:none;
font-size:16px;
width:auto;
margin:0 auto;
color:#fff;
}
#slideNav ul {
list-style:none;
color:#fff;
font-size:13px;
text-align:center;
}
#slideNav li {
width:50px;
height:50px;
line-height:50px;
background-color:rgba(0,0,0,0.5);
margin-bottom:1px;
}
#slideNav li {
background-color:rgba(0,0,0,0.5)
}
/*  Image Styling  */
.logo {
padding:0px 50px;
position:fixed;
width:70%;
max-width:540px;
z-index:1;
}
.album, .original {
height:100%;
width:100%;
z-index:1;
}
/*
.hidden {
display: none !important;
visibility: hidden;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
.invisible {
visibility: hidden;
}
.loaded section,
.no-js section {
opacity: 1;
-webkit-transition: opacity 300ms ease-out;
-moz-transition: opacity 300ms ease-out;
transition: opacity 300ms ease-out;
}
main {
overflow-x: hidden;
}
*/


/* Mobile Styling */
@media only screen and (max-width: 768px) {
body, html {
height: auto;
}
.bcg {
background-repeat:no-repeat;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
}
.container {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.content {
max-width: 700px;
position: absolute;
left: 20%;
top: 25%;
text-align: left;
padding: 0;
}
.content ul {
margin-top:40px;
}
section {
min-width:768px;
height:1024px;
}
/*
.album, .original {
display:none;
}
*/
}

@media only screen and (max-width: 480px) {
section {
min-width:480px;
height:800px;
}
p.intro, .content ul {
width:340px;
}
.content {
left:10%;
top:15%;
}
.content h2 {
font-size:26px;
}
#slideNav ul {
display:none;
}
}

@media only screen and (max-width: 414px) {
p.intro, .content ul {
width:300px;
}
section {
min-width:414px;
height:736px;
}
.content h2 {
font-size:23px;
}
.original, .album {
}
}

@media only screen and (max-width: 375px) {
p.intro, .content ul {
width:296px;
}
section {
min-width:375px;
height:667px;
}
.content {
left:6%;
}
p.intro {
font-size:16px;
}
.content h2 {
font-size:22px;
}
}

@media only screen and (max-width: 360px) {
p.intro, .content ul {
width:282px;
}
section {
min-width:360px;
height:640px;
}
p.intro {
font-size:16px;
}
.content h2 {
font-size:22px;
}
}

@media only screen and (max-width: 320px) {
p.intro, .content ul {
width:238px;
}
section {
min-width:320px;
height:480px;
}
p.intro {
font-size:16px;
}
.content h2 {
font-size:22px;
}
}