/***************************general css***************************/

/*box sizing*/
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*clearfix*/

.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
 
.clearfix {  
    *zoom: 1;  
}

/*fonts*/
html,body{
	width: 100%; 
	font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B', sans-serif; 
	font-weight: 300; 
	font-style: normal;
	background-color: #309dd4;
	font-size: 16px;
}

.features h2
,section.blog h2
, .blog h3
, .blog h5
, .blog h6
, .app h3
, .app h2
,.artist h2{
	font-weight: 300;
	font-size: 2.7em;
	text-align: center; }

section.app h3{
	font-size: 1.5em;
}

.artist p{
	font-size: 1.4em;
}

section.blog,
section.press,
section.app{
	background-color: #fff;
}

.responsive-menu{
	display: none;
}
/***************************header***************************/

header{
	padding-right: 80px;
	padding-left:  95px;
	height: 60px;
	background-color: #309dd4;
	color: #ffffff;
}

img.gigicon, 
a.gigscouttext{
	float:left;
	text-decoration: none;
	vertical-align: middle;	
}

img.gigicon{
	width: 30px;
	height: 40px;
	margin-right: 5px;
	margin-top: 20px;
}

a.gigscouttext{
	color:#fff;
	font-size: 2em;
	width: 140px;
	height: 35px;
	vertical-align: middle;
	margin-top: 25px;
}

header nav{
	padding-top: 25px;
	vertical-align: middle;
	padding-bottom: 15px;
	float:right;
}

header nav ul li{
	display: inline-block;
	margin-right: 35px;	
	text-transform: uppercase;
	list-style: none;
}

nav ul li a{
	position: relative;
	top: 0;	
	text-decoration: none;
	font-size: 12px;
	color: #ffffff;
	padding: 20px 0;
	transition:all .3s linear;
    -o-transition:all .3s linear;
    -moz-transition:all .3s linear;
    -webkit-transition:all .3s linear;	
}

nav ul li:hover > a{
	top:-5px;	
}

nav ul li:last-child{
	padding-top: 5px;
	padding-bottom: 10px;
}

nav ul li:last-child a{
	border: solid #fff 2px;
	padding: 10px 15px;
	border-radius: 9px;
	vertical-align: middle;
}

nav ul li:last-child a:hover{
	background-color: #fff;
	position: static;
	top:0;
	color:#309dd4;
	 transition:all .3s linear;
    -o-transition:all .3s linear;
    -moz-transition:all .3s linear;
    -webkit-transition:all .3s linear; 
}
/***************************slider***************************/

.sliderwrapper{
	position: relative;
    width: 100%;
    height: auto;
    overflow: hidden; 
}

#slides .slide
{
    position: relative;
    float:left;
    top:0;
    width: 100%;
    height: 580px;
}

.sliderwrapper ul li.slide1 {
	width: 100%;
	background: url('../img/slide1.jpg') no-repeat center center;
	background-size: cover;
	height:auto;
}

.sliderwrapper ul li.slide2{
	width: 100%;
	background: url('../img/slide2.jpg') no-repeat center center;
	background-size: cover;
	height:auto;
}

.sliderwrapper ul li.slide3 {
	width: 100%;
	background: url('../img/slide3.jpg') no-repeat center center;
	background-size: cover;
	height:auto;
}

#slides .slide h1.caption{
	color: #fff;
	font-size: 4.5em;
	font-weight: 200;
	text-shadow: 1px 1px 1px #000;
	width:580px;
	height:180px;
	position: absolute;
	top:250px;
	left:70px;
	z-index: 2;
}

.sliderwrapper li.slide img.iphone{
	position: absolute; 
	width:275px;
	height:460px;
	bottom:0;
	right:20%;
	z-index: 2;
}

/***************************features***************************/

.containerfeatures{
	position:relative;
	width: 850px;
	height: 450px;
	margin:0 auto;
}

.features{
	color:#fff;
}

.features h2, 
.section.blog h2{
	margin-bottom: 5%;
}

.mapiphone{
	position: absolute;
	z-index: 2;
	width:275px;
	height:460px;
	left:20px;
	bottom:0;
}

.features ul{
	list-style: none;
	float: right;
	margin-bottom: 60px;
}

.features ul li h5{
	font-weight: 300;
}

.features ul li h5:hover{
	font-weight: 400;
}

.features ul li img{
	display: none;
}

/*img and p hover states*/
.features ul li.map{
	background-image: url('../img/map.png');
}

.features ul li:first-child:hover{
	background-image: url('../img/mapselected.png');
}

.features ul li.speaker{
	background-image: url('../img/speaker.png');
}

.features ul li.speaker:hover{
	background-image: url('../img/speakerselected.png');

}

.features ul li.tickets{
	background-image: url('../img/tickets.png');
}

.features ul li.tickets:hover{
	background-image: url('../img/ticketsselected.png');
}


.features ul li.car{
	background-image: url('../img/car.png');
}

.features ul li.car:hover{
	background-image: url('../img/carselected.png');

}

.features ul li{
	width: 500px;
	background: transparent no-repeat left top;
	background-size: 60px auto;
	background-position: 5%;
  	padding: 7% 0 3% 20%;
	border-bottom: solid 1px #fff;
	transition:all .4s linear;
    -o-transition:all .4s linear;
    -moz-transition:all .4s linear;
    -webkit-transition:all .4s linear;
}


.features ul li h5{
	padding-bottom: 3%;
}

.features ul li:last-child{
	border:none;
}

.features ul li p{
	display:none;
	line-height: 1.4em;
	font-size: 1em;
	margin-top: 1%;
	padding-bottom: 0;
}

.features li:hover p {
	display: block;	
}

/***************************blog***************************/


section.blog{
	height: 510px;
}

section.blog h2{
	margin-top: 50px;
	margin-bottom: 20px;
	text-align: center;
}

section.blog h3{
	font-size: 1.5em;
	text-align: center;
	margin-bottom: 40px;
}

section.blog article.musician1,
section.blog article.musician2,
section.blog article.musician3,
section.blog article.musician4,
section.blog article.musician5{
	position: relative;
	width:295px;
	height: 295px;
	overflow: hidden;
	}


section.blog article.musician1{
	background: url('../img/mavisstaples.jpg') no-repeat center center;
	background-size: cover;
}

section.blog article.musician2{
	background: url('../img/motioncity.jpg') no-repeat center center;
	background-size: cover;
}

section.blog article.musician3{
	background: url('../img/koffinkatz.jpg') no-repeat center center;
	background-size: cover;
}

section.blog article.musician4{
	background: url('../img/john.jpg') no-repeat center center;
	background-size: cover;
}

section.blog article.musician5{
	background: url('../img/string.jpg') no-repeat center center;
	background-size: cover;
}

section.blog article h5,
section.blog article h6{
	position: absolute;
	z-index: 3;
	font-size: .8em;
	color: #fff;
	width: 100%;
	text-align:center;
	overflow: hidden;
	left: 0;
}

section.blog article h5{
	top:75%;
	width: 100%;
	padding-bottom: 15%;
	padding-top: 10%;
	background: -webkit-linear-gradient(rgba(56,56,56, 0.1), rgba(0,0,0,1)); 
	background: -o-linear-gradient(rgba(56,56,56, 0.1), rgba(64,64,64,0)); 
	background: -moz-linear-gradient(rgba(56,56,56, 0.1), #303030, 0.5), rgba(64,64,64,1)); 
	background: linear-gradient(rgba(56,56,56, 0.1), rgba(0,0,0,1));
}

section.blog article h6{
	top:90%;
}

/***************************app***************************/


.containercta{
	width: 650px;
	margin:0 auto;
}

section.app{
	height: 580px;
	background: url('../img/band.jpg') no-repeat center center;
	background-size: cover;
	position:relative;
	overflow: hidden;
	text-align: center;
}

section.app img.giglogo{
	text-align: center;
	background-color: #242424;
	width: 85px;
	height: 70px;
	margin-top: 30px;
	border-radius: 15px;
	padding: 5px 12px;
}

section.app h2{
	margin-top: 5px;
	line-height: 1.5em;
}

section.app ul li{
	list-style: none;
	display:block;
	vertical-align: top;
}

section.app ul.iphoneapp li a:first-child img
,section.app ul.androidapp li a:first-child img{
	width: 175px;
	height:55px;
}

section.app ul.androidapp li:last-child{
	margin-top: 65px;
}

section.app ul.iphoneapp li:last-child{
	margin-top: 45px;
}

section.app ul.iphoneapp li:last-child img {
	width:250px;
}

section.app ul.iphoneapp {
	float: left;
	/*margin-left: 345px;*/
	margin-top: 55px;
}

section.app ul.androidapp {
	float: right;
	margin-top: 53px;
	/*margin-right: 345px;*/
}
/***************************artist sign up***************************/

.artist{
	height: 320px;
	padding-top: 77px;
	padding-bottom: 65px;
	text-align: center;
	background-color: #58595f;
	color:#fff;
}

.artist h2{
	font-size: 2.2em;
	line-height: 1.2em;
	padding-bottom: 15px;
}

.artist p{
	font-size: 1.2em;
	text-align: center;
	line-height: 1.2em;
	width:335px;
	margin: 0 auto;
	padding-bottom: 36px;
}

.artist a{
	text-decoration: none;
	text-transform: uppercase;
	font-size: .75em;
	padding: 10px 40px;
	color:#FBC02D;
	background-color: #58595f;
	border: solid #FBC02D 1px;
	border-radius: 9px;
}

.artist a:hover{
	color:#58595f;
	background-color: #fbc02d;
	 transition:all .2s linear;
    -o-transition:all .2s linear;
    -moz-transition:all .2s linear;
    -webkit-transition:all .2s linear;
}
/***************************press***************************/

section.press ul{
	list-style-type: none;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;
	width:100%;
}

section.press ul li {
	display: inline-block;
	vertical-align: middle;
	width: 33%;
}

section.press ul li img{
	max-width: 50%;
	height: auto;
}

/***************************footer***************************/
footer{
	color:#393939;
	background-color:#d3d3d3;
}

ul.socialmedia {
	padding-top: 30px;
	padding-bottom: 40px;
	list-style-type: none;
	text-align: center;
}

ul.socialmedia li{
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
}

ul.socialmedia li:hover{
	opacity: 0.3;
}

ul.socialmedia li img{
	width: 30px;
	height: 30px;
}

.footerlinks{
	list-style:none;
	width: 100%;
	text-align: center;
}

.footerlinks li{
	width:15%;
	display: inline-block;
	text-transform: uppercase;
	font-size: .7em;

}

.footerlinks li a{
	text-decoration: none;
	font-weight: 400;
}

.footerlinks li a:hover{
	color:#fff;
}

footer p{
	font-size: .5em;
	text-align: center;
	padding-top: 45px;
	padding-bottom: 25px;
}

/***************************media queries***************************/

@media screen and (max-width:1200px){
	section.app ul li:last-child{
		display: none;
	}

	section.app ul.androidapp,
		section.app ul.iphoneapp{
			float: none;
		}

	#slides .slide h1.caption{
		font-size: 3em;
	}	

	.sliderwrapper li.slide img.iphone{
		right:10%;
	}

	/*********app******/

	section.app ul.iphoneapp
	,section.app ul.androidapp{
		display: block;
		padding:0;
		margin:0;
	}

	section.app h2{
		margin-top: 50px;
		margin-bottom: 10px;
	}

	section.app h3{
		font-size: 1.3em;
		width: 100%;
		margin-bottom: 100px;
	}

	section.app ul li:first-child{
		display: block;
			padding:0;
			margin:0;
	}

	section.app ul.iphoneapp li a:first-child img
	,section.app ul.androidapp li a:first-child img{
		width: 200px;
		height: auto;
	}

	section.app ul.iphoneapp li:first-child img{
		margin-bottom: 30px;
	}

	section.app ul.googleplay li:first-child img{
		margin-bottom: 50px;
	}
}

@media screen and (max-width:1100px){

/********hidden items***********/

	img.mapiphone, 
	section.blog,
	section.press, 
	img.phone,
	.desktopnav,
	ul li.mobile-hidden,
	section.app ul li:last-child,
	section.app img.giglogo,
	.features h2{
	display: none;
	float:none;
	}

	/******removing float*****/ 

	.features ul,
	.features ul li,
	#slides .slide
	{
		float:none;
	}

	/*******responsive menu*****/

	.containerfeatures,
	.containercta{
	position:relative;
	width: 100%;
	height: auto;
	margin:0 auto;
}

	header{
		padding:0;
		margin:0;
		margin-bottom: 20px;
		margin-left: 15px;
		height: 50px;
	}

	img.gigicon, 
	a.gigscouttext{
		float:left;
		display: inline-block;
	}

	a.gigscouttext{
		margin-top: 25px;
	}

	img.gigicon{
		margin-bottom: 30px;
	}

	.menu-btn{
		position: absolute;
		top:25px;
		right:10px;
		margin:0;
	}

	.menu-btn span{
		display: block;
		width: 19px;
		height: 3px;
		margin: 4px 0;
		border-radius: 10px;
		background-color: #fff;
		z-index: 99999;
		cursor: pointer;
	}

	.mobile-nav{
		width: 100%;
		padding:0;
		margin:0;
	}

	.mobile-nav ul li{
		display: block;
		width: 100%;
		text-align: center;
	  	padding: 15px 20px;
		margin:0;
		}

	.mobile-nav ul li:last-child,
	.mobile-nav ul li a:last-child{
		border: none;
		margin-bottom: 5px;
		}

	.responsive-menu li:first-child{
		margin-top: -5px;
		padding: 5px;
	}

	.responsive-menu li a{
		font-size: 16px;
	}

	.sliderwrapper li.slide img.iphone{
		right:10%;
		width:250px;
		height:400px;
	}


	/*********features******/

	.features{
		margin:0;
		padding-left: 35px;
		padding-right: 35px;
		height: auto;
		text-align: center;
	}

	.features ul li h5{
		font-weight: 400;
		font-size: 1.3em;
		margin-bottom: 15px;
	}

	.features ul{
		display: inline-block;
	}

	.features ul li{
		border:none;
		background-image:none;
		margin-bottom: 60px;
		width: 100%;
		padding:0;
		display: block;
	}

	.features ul li.map
	,.features ul li.speaker
	,.features ul li.tickets
	,.features ul li.car{
		padding-left: 200px;
		padding-right:200px;
	}


	.features ul li img{
		margin: 25px auto;
		width: 60px;
		height: 60px;
	}

	.features ul li p{
		line-height: 1.2em;
	}

	/*img and p hover states*/
	.features ul li.map
	,.features ul li:first-child:hover
	,.features ul li.speaker
	,.features ul li.speaker:hover
	,.features ul li.tickets
	,.features ul li.tickets:hover
	,.features ul li.car
	,.features ul li.car:hover{
		background-image: none;
	}

	.features ul li img, 
	.features ul li h2, 
	.features ul li p{
		display: block;
	}

	/*********artist******/
	.artist a{
		color:#58595f;
		background-color: #fbc02d;
	}

	/************footer*******/

	footer ul{
		margin:0;
		padding:0;
	}

	footer ul.socialmedia{
		padding-top: 30px;
		padding-bottom: 20px;
	}

	ul.socialmedia li a img{
		width: 50px;
		height: 50px;
	}
}

/************************940 media query************************/

@media screen and (max-width:940px){

	#slides .slide h1.caption{
			width: 400px;
	}


.artist{
	padding-top: 50px;
	padding-bottom: 65px;
	width:100%;
	height:auto;
}

}

/************************880 media query************************/
@media screen and (max-width:880px){


	/*******hero*****/ 

	.sliderwrapper li.slide{
		width: 100%;
	}

	.sliderwrapper li.slide img.iphone{
			right:5%;
	}

	.features ul li h5{
		margin-bottom: 15px;
	}

	.features ul li p{
		line-height: 1.2em;
	}


	ul.footerlinks li {
		display: block;
		font-size:1em;
		width: 100%;
		text-align: center;
		margin:0;
		padding:15px; 
		border-bottom: solid #7E7E7E 1px;
	}

}

/************************750 media query************************/

@media screen and (max-width:750px){

	#slides .slide h1.caption{
			position: static;
			font-weight: 200;
			line-height: 1.2em;
			text-align: center;
			width: 400px;
			margin: 50px auto 0;
		}


	.sliderwrapper li.slide img.iphone{
		position: static;
		width: 250px;
		height: auto;
		margin:0 auto;
	}


/*for nav to sections*/

	span#artists
	,span#features
	,span#cta { 
	  margin-top: -50px;        
	  padding-bottom: 50px; 
	  display: block; 
	}

	section.features{
		padding-left:15px;
		padding-right:15px;
	}

	.features ul li.map 
	,.features ul li.speaker 
	,.features ul li.tickets 
	,.features ul li.car {
		padding-left: 5px;
		padding-right:5px;
		}
}

/************************480 media query************************/

@media screen and (max-width:480px){


	span#artists { 
	  margin-top: -100px;        
	  padding-bottom: 100px; 
	}

	span#features { 
	  margin-top: -80px;       
	  padding-bottom: 80px; 
	}

	span#cta { 
	  margin-top: -70px;       
	  padding-bottom: 70px; 
	}

	#slides .slide h1.caption{
	font-size: 2em;
	width: 305px;
	text-align: center;
		}

	.artist p{
		width: 100%;
	}
}

@media screen and (max-width:320px){

	span#artists { 
	  margin-top: -100px;       
	  padding-bottom: 100px; 
	}

	span#features { 
	  margin-top: -80px;       
	  padding-bottom: 80px; 
	}

	span#cta { 
	  margin-top: -90px;       
	  padding-bottom: 90px; 
	}

	.app h2{
		font-size: 2em;
	}
}