@import url('http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300');
@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,200,300,500,700');

/*--- GLOBAL OVERRIDES ----*/


		html, body {
			height: 100%;
			body:100%;
			font-family: 'Work Sans', sans-serif;
			background: url('http://hotpress.com/letstalkaboutsex/img/background.svg') no-repeat center center fixed; 
			  -webkit-background-size: cover;
			  -moz-background-size: cover;
			  -o-background-size: cover;
			  background-size: cover;
			background-attachment: fixed;
		}

		h1,h2,h3,h4,h5, strong {font-weight:700;}

		.bold {
			font-weight:700;
		}

		.subhead {
			border-bottom:1px solid #000;
			padding-bottom:3px;
			margin-bottom: 2%;

		}

		a { 
			color:#000;
			text-decoration: none;

		}

		a:hover{
			transition: all 0.4s ease-out;
			-moz-transition: all 0.4s ease-out;
			-o-transition: all 0.4s ease-out;
			-webkit-transition: all 0.4s ease-out;
		}

		small {font-family: 'Roboto Condensed', sans-serif;}

		.logged-in-text {
			color:#fff;
		}

		#body{
			

			}

			.subnav {
				padding-top: 40px;

			
			}


			.subnav a{ 
				font-weight: 300;
				font-size: 11px;
				line-height: 1.5;
				text-decoration: none;
				transition: all 0.4s ease-out;
			-moz-transition: all 0.4s ease-out;
			-o-transition: all 0.4s ease-out;
			-webkit-transition: all 0.4s ease-out;

		}
			
			.subnav a:hover{ 
				font-weight: 700;
				font-size: 12px;
				color:#000;
				transition: all 0.4s ease-out;
			-moz-transition: all 0.4s ease-out;
			-o-transition: all 0.4s ease-out;
			-webkit-transition: all 0.4s ease-out;

		}		

/*--- HEADER SECTION ----*/

		#header {

			background-color: #fff;
			width: 100%;

		}

		#logo {
			padding: 15% 0;
		}

		.adverts {

			padding:2% 0;
			float:right;
		}

		.leaderboard {
			padding-top:1%;
		}

		.festival-head {
			color:#e9361c;
			font-weight: bold;
		}

		.month {
			text-align: center;
			border-top:2px solid #e9361c;
			border-bottom:2px solid #e9361c;
			font-size: 55px;
			font-weight: bold;
			padding: 20px 0px;
			text-transform: uppercase;
			margin: 40px 0px;
			color:#e9361c;
		}

		

/*--- NAVIGATION SECTION ----*/

			.navigation {

				width: 100%;
				background:#222;
				padding:0.5% 0;
				font-weight: 300;
				font-size: 12px;
				font-family: 'helvetica', sans-serif;

				letter-spacing: 0.5px;
				
			}
			.nav-wrapper {

				color:#fff;
				text-align:center;
				min-width:65em;
				width: 100%;
				margin-left: auto;
				margin-right: auto;
				margin-top: 0;
				margin-bottom: 0;

			}


			.nav-wrapper ul{

				color:#fff;
				list-style-type: none;
				display: inline;
				width: 100%;
			}

			.nav-wrapper ul li{

				color:#fff;
				list-style-type: none;
				display: inline;
				padding: 0 0.5%;
			}

			.nav-wrapper ul li a{

				color:#fff;
				list-style-type: none;
				display: inline-block;
			}

			#menu ul{
				width: 100%;
			}

			#menu li a:hover{

				color:#ccc;
				transition: color 0.3 ease-out;
				-webkit-transition: color 0.3s ease-out;
				-moz-transition: color 0.3s ease-out;
				-o-transition: color 0.3s ease-out;
			}
			.slicknav_menu {
				display:none;
			}

			.details {font-style: italic;}

			.padding {
				padding:4% 0%;
			}

			.festival-nav {
				position: fixed;
				text-align: left;
				margin:9% 0 0 10%;
				font-size: 11px;

			}

			.details a {text-decoration: underline;}

/*-- MAIN CONTENT SECTION --*/
			.row {overflow:visible;}

			.main-content {


				padding:4%;
				font-family: 'Work Sans', sans-serif;
				font-weight: 300;
				font-size: 18px;
				color:#000;
				line-height: 26px;
				text-align: left;
/*
							  background: url('../img/header.png') no-repeat  ; 
			  -webkit-background-size: 100%;
			  -moz-background-size: 100%;
			  -o-background-size: 100%;
			  background-size: 100%;
*/
			}

			.main-image {
			width: 100%;
		}


			.main-text p{
				font-family: 'Work Sans', sans-serif; 
   				font-weight: 200;
   				font-size: 18px;
   				line-height: 26px;
			}
			.artist-content {
				padding-top:60%;
			}

			.index-content {
				padding-top:50%;
			}


			.artist-pic {
				padding-top:4%;
				width: 100%;
			}

			.page-title {

				color:#000;
				padding-bottom: 3px;
				font-family: 'Work Sans', sans-serif;
			}



			.islands {
				padding:2% 0;
			}





/*--- FOOTER ----*/

				#footer {

					background-color:#333;
					color:#fff;
					width: 100%;
					margin-top:2%;
					font-weight: 300;
				}

				.footer-list ul {
					padding:8% 0;
				}

				.footer-list ul li{

					list-style-type: none;
					font-weight: 300;
					font-size: 12px;
					

				}
				.footer-list ul li a{

					color:#fff;

				}

				.footer-list ul li a:hover {

					opacity:0.6;
					transition: opacity 0.3 ease-out;
					-webkit-transition: opacity 0.3s ease-out;
					-moz-transition: opacity 0.3s ease-out;
					-o-transition: opacity 0.3s ease-out;

				}

				.footer-title {

					
					padding-bottom: 3px;
					font-weight:700 !important;
					border-bottom: 1px solid #fff;

				}

				#footer-social {

					width:25px;
				margin-right:5%;
				}


				.mobile-ad {
					display: none;
				}

/*-- TYPOGRAPHY --*/

		.letterspacing {
			letter-spacing: -0.5px;
		}
 
		.intro h1{
			font-size: 40px;
			line-height: 56px;
			font-family: 'Work Sans', sans-serif;
      font-weight: 500;
		}

		.contact-details p {
			font-size: 24px;
			line-height: 32px;
			font-family: 'Work Sans', sans-serif;
      font-weight: 300;
		}

		.padding-top {
			padding-top: 4%;
		}

		.title {
			color: #f1cc00;
			font-size: 100px;
			line-height: 1;
		}
		

		.author {
			font-size: 12px !important;
		}

		.article {
			padding-top: 40px;
		}

		.article p {
			font-size: 18px;
			line-height: 1.5;
			font-weight: 300;
		}

    #hero-text h1{
      font-size: 100px;
      line-height: 1;
      color: #f1cc00;
      text-align: left;
      font-family: 'Work Sans', sans-serif;
      font-weight: 800;
    }
	    #hero-text p{
      font-size: 20px;
      line-height: 1.25;
      color: #fff;
      text-align: left;
      font-family: 'Work Sans', sans-serif;
      font-weight: 200;
    }

    .main-image {
      position: relative;
    }
	.hero {

		height: 450px;
		background: url('http://hotpress.com/letstalkaboutsex/img/hero.jpg') no-repeat top fixed; 
		 -webkit-background-size: cover;
		 -moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;

	}



/*-- HOVER --*/
.grid {
	padding-top:20px;
	max-width: 1300px;
	margin: 0 auto;
	list-style: none;
	text-align: left;
}

.grid li {
	display: inline-block;
	width: 319px;
	margin: 0;
	padding: 20px 20px 20px 0px;
	text-align: left;
	position: relative;
}

.grid figure {
	margin: 0;
	position: relative;
}

.grid figure img {
	max-width: 100%;
	display: block;
	position: relative;
}

.grid figcaption {
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px;
	background: #f1cc00;
	color: #fff;

	font-size: 11px;
}

.grid figcaption h3 {
	margin: 0;
	padding: 0;
	color: #fff;
	text-align: left;
	width: 90%;
	font-size: 20px;
	line-height: 25px;
}



.grid figcaption a {
	text-align: left;
	padding: 5px 0px;
	display: inline-block;
	color: #000;
	font-size: 14px;
}

/* Individual Caption Styles */

/* Caption Style 1 */
.cs-style-1 figcaption {
	height: 100%;
	width: 100%;
	opacity: 0;
	text-align: left;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}

.no-touch .cs-style-1 figure:hover figcaption,
.cs-style-1 figure.cs-hover figcaption {
	opacity: 1;
	-webkit-transform: translate(15px, 15px);
	-moz-transform: translate(15px, 15px);
	-ms-transform: translate(15px, 15px);
	transform: translate(15px, 15px);
}

.cs-style-1 figcaption h3 {
	margin-top: 30px;
}

.cs-style-1 figcaption span {
	display: block;
}

.cs-style-1 figcaption a {
	margin-top: 5px;
}



.grid img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

@media screen and (max-width: 31.5em) {
	.grid {
		padding: 10px 10px 100px 10px;
	}
	.grid li {
		width: 100%;
		min-width: 300px;
	}
}




/*--- ADDITIONAL MEDIA QUERIES ----*/

				.show-on-mobile-only {
					display:none;
				}

			@media only screen and (min-width: 40.063em) and (max-width: 64em) {

						#logo {
							width: 20%;

							padding:2% 0;
						}

						.adverts {

							display: none;
						}

						.ad-column {
							display: none;
						
						}
						.mobile-ad {
						display: none;
						}


			}

			@media screen and (max-width: 56em) {

						/* #menu is the original menu */
						.js #menu {
							display:none;
						}

						#hero-text {
							padding-top:15%;
							position: relative;
						}

						#hero-text h1{ 
								font-size: 36px !important;
							
								text-align: left;
								
							}
							.hero {
								height:auto;
								padding-bottom: 40px;
								background-color: #000;
								background-image: none;
							}

							.intro h1{
								font-size: 24px;
								line-height:36px;
							}
						
						.js .slicknav_menu {
							display:block;

							position: fixed;
							z-index: 333;
							width: 100%;
							-webkit-box-shadow: 0px 10px 13px 0px rgba(50, 50, 50, 0.46);
					-moz-box-shadow:    0px 10px 13px 0px rgba(50, 50, 50, 0.46);
					box-shadow:         0px 10px 13px 0px rgba(50, 50, 50, 0.46);
						}

						#logo {
							width: 40%;

							padding:5% 0;
						}

						.show-on-mobile-only {
							display:block;
						}
						.adverts {

							display: none;
						}

						.title {
							font-size: 40px;
						}

						.ad-column {
							display: none;
						
						}
						.hide-on-mobile {
							display:none;
						}

						

						#header {
							padding-top:15%;
						}


								.mobile-ad {
								display: block;
								width: 100%;
								padding:4%;
								margin-top:4%;
							}

							.mobile-ad img {

								width: 100%;

							}

					.sony-form-wrap input {
						font-size: 16px !important;
					}

					.sony-form-wrap textarea {
						font-size: 16px !important;
					}
					.sony-button-wrap {
						margin-top: 36% !important;
					}


			}


