@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'gloria_hallelujahregular';
    src: url('fonts/gloriahallelujah-regular-webfont.woff2') format('woff2'),
         url('fonts/gloriahallelujah-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir LT Std';
    src: url('fonts/AvenirLTStd-Book.woff2') format('woff2'),
        url('fonts/AvenirLTStd-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir LT Std';
    src: url('fonts/AvenirLTStd-Black.woff2') format('woff2'),
        url('fonts/AvenirLTStd-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

body{ 
	color: #727272;
    font-family: 'Avenir LT Std';
	font-weight: normal;
    font-style: normal;
	font-size: 16px;
	background: #ffffff;
	line-height: 2em;
	text-align: center;
	letter-spacing: 0.05em;
	margin: 0;
	padding: 0;
}

p{
	padding: 10px 0;
}

img{
	border: none;
}

a{
	color: inherit; 
	text-decoration: none;
	font-weight: bold;
	opacity: 1;
	transition: opacity 0.5s ease;
}

a:hover{
	color: #8a6018; 
	opacity: 0.8;
	transition: opacity 0.5s ease;
}

#back-to-top a {
	color: inherit; 
	text-decoration: none;
	font-weight: normal;
	opacity: 1;
	transition: opacity 0.5s ease;
}

#back-to-top a:hover{
	color: #8a6018; 
	opacity: 0.8;
	transition: opacity 0.5s ease;
}

#back-to-top p {
	font-size: 24px;
}

h1{
	color: #222222;
    font-family: 'gloria_hallelujahregular';
	font-weight: normal;
	font-size: 48px;
}

h1#home{
	color: #222222;
    font-family: 'gloria_hallelujahregular';
	font-weight: normal;
	font-size: 60px;
	text-align: center;
}

h2{
	color: #727272;
	font-weight: normal;
	font-size: 36px;
	padding: 10px 0;
}

h2#home2:hover{
	color: #c4cab5;
}

h3{
	color: #727272;
	font-weight: normal;
	font-size: 22px;
	padding: 10px 0 0;
}

h3#home3{
	color: #ffffff;
    font-family: 'local_brewerysans';
	font-weight: normal;
	font-size: 18px;
}

h3#home3:hover{
	color: #c4cab5;
}

ul{
	padding: 0;
	margin: 0;
	list-style: none;
}

ul li{
	margin: 0;
}

ul.music-samples{
	padding: 0;
	margin: 0;
	list-style: none;
}

ul.music-samples li{
	margin: 0;
	display: inline-block;
}

.container{ 
	min-width:300px;
	max-width:1200px;
	margin:0 auto;
	padding:40px 25%;
	text-align: left;
	clear: both;
}

.container-coloured{ 
	margin:0 auto;
	padding:40px 0;
	text-align: center;
	clear: both;
	background: url("images/bennsong-background-clouds-coloured.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.container-coloured h2{
	color: #fff;
}

.container-coloured p{
	color: #fff;
	padding: 0;
}

.image-full-desktop {
	width: 100%;
	margin: 0 auto;
	display: block;
}

.image-full-desktop img {
	width: 100%;
	height: auto;
}

.image-full-mobile {
	display: none;
}

header {
	margin: 0;
	padding: 0 2% 40px;
	background: url("images/bennsong-background-clouds-coloured.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/* Navigation */
nav{
	margin: 20px 0;
	padding: 0;
	text-align: left;
	width: 30%;
	display: inline-block;
	vertical-align: top;
}

nav:after{
	content:"";
	display: table;
	clear: both;
}

nav ul{
	padding: 0;
	margin: 0;
	list-style: none;
	z-index: 99;
}

nav ul li{
	margin: 0;
	display: inline-block;
}

nav a{
	display: block;
	padding: 50px 15px 0 0;
	color: #222222;
	line-height: 40px;
	text-decoration: none;
	text-transform: uppercase;
}

#active-page{
	color: #8a6018;
}

nav a:hover{ 
	color: #8a6018; 
}

nav ul li:hover > ul{ 
	display: inherit; 
}

li > a:after{ 
	content:''; 
}

.toggle, [id^=drop]{
	display: none;
}

li > a:only-child:after{ 
	content:''; 
}
/* END Navigation */

#logo-home{
	display: inline-block;
	width: 30%;
	text-align: center;
}

#header-right{
	display:inline-block;
	width: 30%;
	text-align: right;
}

#header-right a{
	opacity: 1;
	transition: opacity 0.5s ease;
	font-weight: normal;
}

#header-right a:hover{
	opacity: 0.8;
	transition: opacity 0.5s ease;
	font-weight: normal;
}

.social-media{
	display: inline-block;
	margin: 65px 0 0 0;
	width: 30px;
}

#videos-mobile {
	display: none;
}

.hytPlayerWrap {
	position: relative;
	padding-bottom: 38.25%;
	padding-top: 0;
	height: 0; 
	width: 70%;
	margin:auto;
	margin-top: 10px;
	margin-bottom: 0;
}

.hytPlayerWrap iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.image-strip {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
}

.image-strip-mobile {
	display: none;
}

.image-strip-mobile-2 {
	display: none;
}

.image-strip-mobile-3 {
	display: none;
}

.images-in-strip {
	position: relative;
	margin: 0;
	padding: 0;
	display: inline-block;
	width: 20%;
	display: flex;
}

.images-in-strip img {
	width: 100%;
	height: auto;
}

#melbourne-nights {
	background: url("images/strip/benn-manie-melbourne-nights.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#crowd {
	background: url("images/strip/crowd-goes-wild-for-bennsong.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#field {
	background: url("images/strip/bennsong-in-the-field.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#cafe {
	background: url("images/strip/bennsong-cafe-music.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#guitar1, #guitar2 {
	background: url("images/strip/benn-manie-guitar.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#guitar3, #guitar4 {
	background: url("images/strip/benn-manie-guitar2.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

footer {
	margin: 0;
	padding: 10px 2% 80px;
	background: url("images/bennsong-background.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

footer p{
	color: #fff;
	font-size: 0.8em;
}

footer a:hover{
	color: #eeeeee; 
	opacity: 0.8;
	transition: opacity 0.5s ease;
}



/*************** Break Point Responsive Code ***************/

@media screen and (min-width:0) and (max-width:1130px){
nav{
	margin: 0;
	text-align: center;
	width: 100%;
	display: block;
}

nav a{
	padding: 30px 8px 0 8px;
}

#logo-home{
	display: block;
	width: 100%;
}

h1#home{
	line-height: 0.5em;
	margin: 40px 0 0;
	padding: 0;
}

#header-right{
	display:block;
	width: 100%;
	text-align: center;
}

.social-media{
	margin: 70px 0 0 0;
}

.container{ 
	padding:40px 15%;
}

}

@media screen and (min-width:0) and (max-width:1000px){
.image-strip, #videos-main {
	display: none;
}

#videos-mobile {
	display: block;
}

.image-strip-mobile {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
}

}

@media screen and (min-width:0) and (max-width:750px){
.image-strip-mobile {
	display: none;
}

.image-strip-mobile-2 {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
}

.images-in-strip {
	position: relative;
	margin: 0;
	padding: 0;
	display: inline-block;
	width: 50%;
	display: flex;
}
	
.image-full-desktop {
	display: none;
}

.image-full-mobile {
	width: 100%;
	margin: 0 auto;
	display: block;
}

.image-full-mobile img {
	width: 100%;
	height: auto;
}

}

@media screen and (min-width:0) and (max-width:700px){
.hytPlayerWrap {
	position: relative;
	padding-bottom: 50.25%;
	padding-top: 0;
	height: 0; 
	width: 92%;
	margin:auto;
	margin-top: 20px;
	margin-bottom: 0;
}

}

@media screen and (min-width:0) and (max-width:450px){
.image-strip-mobile-2 {
	display: none;
}

.image-strip-mobile-3 {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
}

.images-in-strip {
	position: relative;
	margin: 0;
	padding: 0;
	display: inline-block;
	width: 100%;
	display: flex;
}
	
h1#home{
	font-size: 48px;
}

#image-strip-mobile {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
}

#image-strip-mobile li {
	display: block;
	width: 100%;
	margin-top: -9px;
}
	
#image-strip-mobile li img {
	width: 100%;
	height: auto;
}
	
.container{ 
	padding:40px 5%;
}

}

@media screen and (min-width:0) and (max-width:350px){
h1#home{
	font-size: 36px;
}

}