/* main.css v1.0 | @richrrd | Updated: 2017.09.12 */

/* TYPOGRAPHY */
body {  }
p { font: 24px 'Source Sans Pro', sans-serif; font-weight: 300; line-height: 30px; margin: 0 0 25px 0; text-decoration: none; }
h1 { letter-spacing: 8px; text-transform: uppercase; text-align: center; }
h1 { font-size: 30px; line-height: 32px; font-weight: normal; font-style: normal; color: #fff; margin: 30px 0 50px; }
h2 { margin: 30px 0 50px 0; font-size: 26px; font-weight: normal; font-style: normal; border-bottom: 1px solid #ebebeb; padding-bottom: 15px; text-align: center; font: 30px/38px 'Source Sans Pro', sans-serif; font-weight: 300;
}
h3 { font: 24px/26px 'Source Sans Pro', sans-serif; font-weight: 300; text-align: center; margin-bottom: 5px; }
h4 { font: 24px/16px 'Source Sans Pro', sans-serif; font-weight: 300; text-align: center; margin-bottom: 50px; }
blockquote { text-align: center; font-style: italic; font-size: 20px; margin-bottom: 30px; }
.top-link { font: 15px 'EB Garamond', serif; text-transform: uppercase; }
.centred { text-align: center; }
.vertical { padding-top: 45px; }
/* Links */
a, a:visited { text-decoration: none; margin: 0; color: #199fda; text-decoration: none; -webkit-transition: color 1s ease; -moz-transition: color 1s ease; -ms-transition: color 1s ease; -o-transition: color 1s ease; transition: color 1s ease; }
a:hover { text-decoration: none; margin: 0; color: #158abd; text-decoration: none; -webkit-transition: color 1s ease; -moz-transition: color 1s ease; -ms-transition: color 1s ease; -o-transition: color 1s ease; transition: color 1s ease; }




/* CONTAINERS */
header { max-width: 900px; padding: 40px 0 0; margin: 75px auto 30px; background: url('../images/site/mnir-logo.png') no-repeat left top; background-size: 90px auto; height: 120px; }


section { max-width: 900px; padding: 0 20px; margin: 0 auto 100px; }


#me {  }
.work { font-family: 'Source Sans Pro', sans-serif; border-bottom: 1px solid #ebebeb; padding-bottom: 50px; }
.work:last-of-type { border-bottom: none; }
.work-words { font-weight: 300; font-size: 17px; line-height: 22px; max-width: 600px; margin: 0 auto 25px; }
.roles {  font-weight: 400; font-size: 12px; margin: 0; text-align: center; color: #999;  letter-spacing: 1px; text-transform: uppercase; }
.blue-bullet { color: #199fda; font-size: 18px; }




/* Footer */
footer { width: 100%; min-width: 100%; background-color: #f6f6f6; min-height: 95px; margin: 0; padding: 50px 0; }

#social { max-width: 900px; padding: 0 20px; margin: 0 auto 100px; }
#social ul li:last-of-type { margin-right: 0; }
#social ul { overflow: hidden; margin: 0; padding: 0; }
#social ul li { list-style: none; float: left; text-align: center; width: 25%; /* fallback for non-calc() browsers */ width: calc(100% / 4); box-sizing: border-box; font-family: 'Open Sans', sans-serif; }
#social a, #social a:visited { text-decoration: none; margin: 0; color: rgba(180, 176, 171, 0.75); text-decoration: none; -webkit-transition: color 1s ease; -moz-transition: color 1s ease; -ms-transition: color 1s ease; -o-transition: color 1s ease; transition: color 1s ease; padding: 1px; }
#social a:hover { text-decoration: none; margin: 0; color: rgb(180, 176, 171); text-decoration: none; -webkit-transition: color 1s ease; -moz-transition: color 1s ease; -ms-transition: color 1s ease; -o-transition: color 1s ease; transition: color 1s ease; }
.big-icon { font-size: 25px; }



#legals { max-width: 900px; padding: 30px 20px 0; margin: 0 auto 60px; border-top: 1px solid #ebebeb; }
#copyright { font-family: 'Source Sans Pro', sans-serif; font-weight: 300; font-size: 14px; line-height: 20px; margin: 0 0 35px 0; text-align: left; color: #8f8f8f; max-width: 400px; }
#smallprint { font-family: 'Source Sans Pro', sans-serif; font-weight: 300; font-size: 11px; line-height: 14px; margin: 0; text-align: left; color: #8f8f8f; padding: 0; margin: 0; max-width: 400px; }


/* Images */
/* Images */
.projects-wide { max-width: 100%; min-width: 100%; margin-bottom: 50px; }


/*  Queries */
@media (max-width : 639px) {
nav ul li { float: none; border-bottom: 1px solid #060504; border-top: 1px solid #060504; border-left: none; border-right: none; width: 100%; /* fallback for non-calc() browsers */ width: calc(100% / 1); margin-bottom: 0; }
.new-record { font-size: 75px; line-height: 75px;  margin: 30px 0 15px; }
.new-single { width: 280px; }
.track-container { background-color: #fff; margin: 0 auto; 25px; float: none; display: inline-block; }
.band-wrapper p { max-width: 100%; }
.band-pic img { width: 100%; height: auto; float: none; padding: 0; }
#elsewhere ul li { width: 50%; /* fallback for non-calc() browsers */ width: calc(100% / 2); margin-bottom: 25px; }
}