/* ------- LANDING -------- */

body.landing {
	overflow-y:scroll;
}


body.landing footer {
	position:relative;
	z-index:22;
}

div.landing {
	width:100%;
	height:90%;
	min-height:850px;
	margin:0 auto;
	position:relative;
	z-index:22;
	padding:60px 5%;
	color:#000000;
	text-align:center;


}

div.landing .logo {
	display:block;
	width:70%;
	max-width:300px;
	margin:0 auto 40px auto;	
}




ul.city {
	list-style:none;
	margin:0 auto 30px auto;
	padding:0 ;
	width:100%;
	max-width:800px;
	font-size:0px;
	text-align:left;
	border-top:#ffffff solid 4px;
	border-left:#ffffff solid 4px;
}

ul.city li {
	border-right:#ffffff solid 4px;
	border-bottom:#ffffff solid 4px;
	display:inline-block;
	
	width:50%;

}


ul.city li a {
	display:block;

	padding:25px 0 30px 0;
	text-align:center;
}

ul.city li a:hover {
	background-color:rgba(211, 100, 136, 0.5);
}


ul.city .locale {
	line-height:1;
	display:block;
	color:#ffffff;	
	font-size:50px;
	letter-spacing:2px;
	font-family:"boucherie-block", helvetica, arial, sans-serif;
	
}

ul.city .city {
	display:block;
	color:#ffffff;
	font-size:14px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom:10px;
}

ul.city .date {
	font-size:12px;
	display:block;	
	font-weight:bold;
	color:#ffffff;
	text-transform: uppercase;
	
}



.signUp {
	line-height:1.5;
	margin:50px auto;
}

.signUp h2 {
	margin:0;
	color:#ffffff;	
	font-size:30px;
	font-weight:bold;
	letter-spacing:2px;
	font-family:"boucherie-block", helvetica, arial, sans-serif;
}

.signUp a {
	display:inline-block;
	position:relative;
	color:#dddddd;
	
}

.signUp a:hover {

	color:#ffffff;
}

.signUp a span.fa {
	display:block;
	margin:0 auto 10px auto;
}


/* ----- LOADING PAGE ------ */
div.loadingMask {
	top:0;
	left:0;
	position:fixed;
	min-height:850px;
	width:100%;
	height:100%;
	z-index:99;	
	background: #9a4784; /* Old browsers */
	background: -moz-linear-gradient(top,  #9a4784 0%, #b08691 50%, #bba397 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #9a4784 0%,#b08691 50%,#bba397 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #9a4784 0%,#b08691 50%,#bba397 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9a4784', endColorstr='#bba397',GradientType=0 ); /* IE6-9 */

}

.landing div.loadingMask {
	z-index:0;
}

div.loadingMask .right {
	width:50%;
	height:100%;
	left:50%;
	position:absolute;
	background:url(../images/landing/landing-right.png) no-repeat left bottom;
	background-size:cover;
}


div.loadingMask .left {
	width:70%;
	height:100%;
	right:30%;
	position:absolute;
	background:url(../images/landing/landing-left.png) no-repeat right top;
	background-size:cover;

}

div.loading p {
	margin-bottom:5px;
}



.loaded .loading {
	display:none;
}



div.loading {
	position:fixed;
	width:150px;
	height:150px;
	top:50%;
	left:50%;
	margin-top:-75px;
	margin-left:-75px;
	z-index:21;
	font-family:"quatro-slab", helvetica, arial, sans-serif;
	font-size:16px;
	font-weight:700;
	letter-spacing:1px;
	text-align: center;
	color:#ffffff;	
}

div.loading img {
	display:block;
	width:100px;
	margin:0 auto;	
	-webkit-animation-name: loading; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-duration: 1.5s; 
    animation-name: loading; 
    animation-timing-function: linear; 
    animation-iteration-count: infinite; 
    animation-duration:  1.5s; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    transform-style: preserve-3d;
	
}

.loaded div.loading img {
	animation-play-state: paused !important;s
}




@-webkit-keyframes loading { 
    from 
    { 
        -webkit-transform: rotateY(0deg); 
    } 
    to { 
        -webkit-transform: rotateY(-360deg); 
    } 
} 
@keyframes loading { 
    from { 
        -moz-transform: rotateY(0deg); 
        -ms-transform: rotateY(0deg); 
        transform: rotateY(0deg); 
    } 
    to 
    { 
        -moz-transform: rotateY(-360deg); 
        -ms-transform: rotateY(-360deg); 
        transform: rotateY(-360deg); 
    
    } 
}












div.mask {
	position:fixed;
	z-index:20;
	height:11%;
	width:100%;
	background-color:#def1ed;

}

.loaded div.mask {
	width:0px;
}





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

	.signUp a {
		padding-left:35px;
	}
	
	
	.signUp a span.fa {
		font-size:20px;
		position:absolute;
		left:0px;
		top:0px;
	}

}




/* ------- BREAK POINT ------- */
@media screen and (min-width:700px) {
	
	ul.city li {	
	width:25%;
	}
	
	

	

}