/* small size  DEFAULT VALUES  */

body {
padding:0;
margin: 0;
background:#eff0eb;
color:#2b3328;
font-family: Source Serif;
-webkit-font-smoothing: antialiased; 
}

.bckgrd1 {background:#eff0eb;}
.bckgrd2 {background:#d8d7d2;}
.bckgrd3 {background:#cbcbc3;}
.bckgrd4 {background:#2b3328;}
.bckgrd5 {background:#8b957d;}

#wrap {
width:100%;
margin:auto;
}

#nav {
margin:auto;
margin-top:40px;
text-align:center;
font-size:1em;
}

#nav ul {
list-style-type:none;
margin:0px;
padding:0px;
display:inline;
}

#nav ul li {
margin:0px 0px;
padding:0px;
display:block;
width:100%;
}

.row {
margin:0px;
padding:70px 20px;
line-height:1.5em;
font-size:1.1em;
}

h1.title {
font-family:Lato;
font-weight:300;
padding:0px;
margin:0px;
font-size:4em;
text-align:center;
line-height:1em;
}

h1.subtitle {
font-size:.85em;
font-weight:300;
text-align:center;
margin:0px;
padding:0px;
line-height:1em;
}

h2 {
padding:0px;
margin:0px;
}

.button {
border:1px solid #777777;
border-radius: 4px;
padding:8px 20px;
text-decoration: none;
display: block;
font-family:lato;
font-size:.8em;
font-weight:400;
text-align:center;
}

.invert {color:#eff0eb;}

.invert a:link {color:#eff0eb;}
.invert a:hover {color:#8b957d;}
.invert a:visited {color:#eff0eb;}

.leftside {width:100%;}

.rightside {width:100%;}

.small {font-size:.85em;line-height:1.2em;}
.genre {font-size:.7em;color:#888888;}

ul.music {
list-style-type:none;
padding:0px 0px 0px 20px;
margin:0px;
}

a.button:link {color:#777777;border:1px solid #777777;text-decoration:none;}
a.button:hover {color:#8b957d;border:1px solid #8b957d;text-decoration:none;}
a.button:visited {color:#777777;border:1px solid #777777;text-decoration:none;}

a:link {color:#2b3328;text-decoration:underline;}
a:hover {color:#8b957d;text-decoration:underline;}
a:visited {color:#2b3328;text-decoration:underline;}

#twitbox {
font-family:Source Serif;
}

/* MEDIUM SIZE */
@media screen and (min-width:500px) {

.row {
margin:0px;
padding:60px 40px;
line-height:1.5em;
font-size:1.1em;
}

}

/* MINOR BREAK SIZE */
@media screen and (min-width:600px) { 

#nav ul {
list-style-type:none;
margin:0px;
padding:0px;
display:inline;
}

#nav ul li {
margin:0px 5px;
padding:0px;
display:inline;
}

.row {
margin:0px;
padding:70px 40px;
line-height:1.5em;
font-size:1.1em;
}

.button {
border:1px solid #777777;
border-radius: 4px;
padding:8px 20px;
text-decoration: none;
display: inline-block;
font-family:lato;
font-size:.8em;
font-weight:400;
text-align:center;
}

.leftside {
float:left;
width:55%;
}

.rightside {
float:right;
width:40%;
}

}

/* MINOR BREAK POINT */ 
@media screen and (min-width:700px) {

#nav ul {
list-style-type:none;
margin:0px;
padding:0px;
display:inline;
}

#nav ul li {
margin:0px 6px;
padding:0px;
display:inline;
}

.row {
margin:0px;
padding:70px 40px;
line-height:1.5em;
font-size:1.1em;
}

.leftside {
float:left;
width:55%;
}

.rightside {
float:right;
width:40%;
}

}

/* LARGE SIZE */
@media screen and (min-width:800px) { 

#nav {
margin:auto;
margin-top:40px;
text-align:center;
font-size:1em;
}

#nav ul {
list-style-type:none;
margin:0px;
padding:0px;
display:inline;
}

#nav ul li {
margin:0px 15px;
padding:0px;
display:inline;
}

.row {
margin:0px;
padding:150px 90px;
line-height:1.5em;
font-size:1.1em;
}

h1.title {
font-family:Lato;
font-weight:300;
padding:0px;
margin:0px;
font-size:5em;
text-align:center;
line-height:1em;
}

h1.subtitle {
font-size:1em;
font-weight:300;
text-align:center;
margin:0px;
padding:0px;
line-height:1em;
}

.button {
border:1px solid #777777;
border-radius: 4px;
padding:2px 14px;
text-decoration: none;
display: inline-block;
font-family:lato;
font-size:.8em;
font-weight:400;
}

.leftside {
float:left;
width:50%;
}

.rightside {
float:right;
width:35%;
min-width:250px;
}

.small {font-size:.85em;line-height:1.2em;}
.genre {font-size:.7em;color:#888888;}

}

/* LARGE SIZE */
@media screen and (min-width:1100px) { 

#nav {
margin:auto;
margin-top:50px;
text-align:center;
font-size:.9em;
}

#nav ul {
list-style-type:none;
margin:0px;
padding:0px;
display:inline;
}

#nav ul li {
margin:0px 15px;
padding:0px;
display:inline;
}

.row {
margin:0px;
padding:120px 110px;
line-height:1.5;
font-size:1.3em;
}

h1.title {
font-family:Lato;
font-weight:300;
padding:0px;
margin:0px;
font-size:6em;
text-align:center;
line-height:1em;
}

h1.subtitle {
font-size:1.2em;
font-weight:300;
text-align:center;
margin:0px;
padding:0px;
line-height:1em;
}

.button {
border:1px solid #777777;
border-radius: 4px;
padding:5px 18px;
text-decoration: none;
display: inline-block;
font-family:lato;
font-size:1em;
font-weight:400;
}

.leftside {
float:left;
width:55%;
}

.rightside {
float:right;
width:35%;
min-width:250px;
}

.small {font-size:.9em;line-height:1.2em;}
.genre {font-size:.7em;color:#888888;}

#twitbox {
font-family:Source Serif;
font-size:1.3em;
}

}