body {
    font-family: Arial, sans-serif;
    margin: 0px;
	
	
	
}
button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    user-select: none;
}
button:hover,
button:active {
    color: #FAF000;
}
button:active {
}

#ad {
    display: block;
    border: #000 1px solid;
    overflow: hidden;
    width: 298px;
    height: 598px;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
	margin:0 auto;
}
#banner {
	position:relative;
    display: block;
    width: 298px;
    height: 598px;
    background-color: #FFF;
    overflow: hidden;
	
	-webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000px;
	perspective: 1000px;}

#banner img {
	opacity:0;
	display:block;
	position: absolute;
}

.button {
	position: absolute;
	top: 0px;
	left:0px;
    width: 100%;
    height: 100%;
	z-index:11;
	padding:0;
	display:block;
}

#banner #cta{
	opacity:1; 
	z-index:9;
	position: absolute;
	bottom: 0px;
	right: 0px;
}
#banner #cta-over{
	opacity:0; 
	z-index:10;
	position: absolute;
	bottom: 0px;
	right: 0px;
}
#banner.over #cta-over{
	opacity:0; 
	z-index:10;
	-webkit-animation: fadein .3s 1 ease-out 0s; /* Chrome, Safari, Opera */
    animation: fadein .3s 1 ease-out 0s;
	
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}
#banner.out #cta-over{
	opacity:1; 
	z-index:10;
	-webkit-animation: fadeout .3s 1 ease-out 0s; /* Chrome, Safari, Opera */
    animation: fadeout .3s 1 ease-out 0s;
	
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}

#banner #brown{
z-index: 4;
}
#banner.animate #brown{

	-webkit-animation: slidedown 1s 1 ease-out 1s;
    animation: slidedown 1s 1 ease-out 1s;
		
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}


#banner #loveNOLA{
	z-index:5;
	left: 0;
    top: 148px;	
}
#banner.animate #loveNOLA{
	-webkit-animation: faderight 1s 1 ease-out 4.8s; /* Chrome, Safari, Opera */
    animation: faderight 1s 1 ease-out 4.8s;
	
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	}


#banner #txt1{
	z-index:7;
	left:27px;
	top:20px;
}
#banner.animate #txt1{
	
	-webkit-animation: fadedown 1s 1 ease-out 1s; /* Chrome, Safari, Opera */
    animation: fadedown 1s 1 ease-out 1s;
	
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}
#banner #txt2{
	z-index:6;
	left: 37px;
    top: 83px;
}
#banner.animate #txt2{
	-webkit-animation: fadein 1s 1 ease-out 2.0s; /* Chrome, Safari, Opera */
    animation: fadein 1s 1 ease-out 2.0s;
	
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}

#banner #logo{
	z-index:8;
	left:21px;
	top:543px;
}
#banner.animate #logo{
	-webkit-animation: fadein 1.2s 1 ease-out 2.4s; /* Chrome, Safari, Opera */
    animation: fadein 1.2s 1 ease-out 2.4s;
	
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}



#banner.animate #photo1 {
	z-index:1;
	
	-webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	perspective: 1000;
	
	width:300px;
	height:600px;
	top:0;
	left:0;
	
}
#banner.animate #photo1 {
	-webkit-animation: blurin 1.5s 1 ease-out .5s, blurout 1.5s 1 ease-out 3.5s; /* Chrome, Safari, Opera */
    animation: blurin 1.5s 1 ease-out .5s, blurout 1.5s 1 ease-out 3.5s;
	
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	
	-webkit-transform: translate3d(0px, 0px, 0px);
}

#banner #photo2 {
	z-index:2;
	
	-webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	perspective: 1000;
	
	width:300px;
	height:600px;
	top:0;
	left:0;
	
}
#banner.animate #photo2 {
	-webkit-animation: blurin 1.5s 1 ease-out 3.5s; /* Chrome, Safari, Opera */
    animation: blurin 1.5s 1 ease-out 3.5s;
	
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	
	-webkit-transform: translate3d(0px, 0px, 0px);
}



@keyframes fadein {
    0% {
		opacity: 0; 
	}
    100% {
		opacity: 1;
	}
}

@keyframes fadeout {
    0% {
		opacity: 1;
		}
    100% {
		opacity: 0;
	}
}

@keyframes blurin {
     0% {
		opacity: 0; 
		-webkit-filter: blur(5px);
		filter: blur(5px);
		
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-perspective: 1000;
		perspective: 1000;
	
	}
    100% {
		opacity: 1;
		-webkit-filter: blur(0px);
		filter: blur(0px);
		
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-perspective: 1000;
		perspective: 1000;
	}
}
@-webkit-keyframes blurin {
    0% {
		opacity: 0; 
		-webkit-filter: blur(5px);
		filter: blur(5px);
		
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-perspective: 1000;
		perspective: 1000;
	
	}
    100% {
		opacity: 1;
		-webkit-filter: blur(0px);
		filter: blur(0px);
		
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-perspective: 1000;
		perspective: 1000;
	}
}


@keyframes blurout {
    0% {
		opacity: 1;
		-webkit-filter: blur(0px);
		filter: blur(0px);
		
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-perspective: 1000;
		perspective: 1000;
	
		}
    100% {
		opacity: 0;
		-webkit-filter: blur(5px);
		filter: blur(5px);
		
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-perspective: 1000;
		perspective: 1000;
	}
}
@-webkit-keyframes blurout {
     0% {
		opacity: 1;
		-webkit-filter: blur(0px);
		filter: blur(0px);
		
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-perspective: 1000;
		perspective: 1000;
	
		}
    100% {
		opacity: 0;
		-webkit-filter: blur(5px);
		filter: blur(5px);
		
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-perspective: 1000;
		perspective: 1000;
	}
}

@keyframes fadeup {
    0% {
		opacity: 1;
		-webkit-transform: translate3d(0px, 0px, 0px);
		transform: translate3d(0px, 0px, 0px);
	}
	50% {
		opacity: 0;
	}
    100% {
		opacity: 0;
		-webkit-transform: translate3d(0px, -183px, 0px);
		transform: translate3d(0px, -183px, 0px);
	}
}

@keyframes fadedown {
    0% {
		opacity: 0;
		-webkit-transform: translate3d(0px, -183px, 0px);
		transform: translate3d(0px, -183px, 0px);
	}
    50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0px, 0px, 0px);
		transform: translate3d(0px, 0px, 0px);
	}
}

@keyframes faderight {
    0% {
		opacity: 0;
		-webkit-transform: translate3d(-60px, 0px, 0px);
		transform: translate3d(-60px, 0px, 0px);
	}
	90% {
		opacity: 1;
		-webkit-transform: translate3d(0px, 0px, 0px);
		transform: translate3d(0px, 0px, 0px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(-4px, 0px, 0px);
		transform: translate3d(-4px, 0px, 0px);
	}
}


@keyframes slideup {
    0% { 
		opacity: 1; 
		-webkit-transform: translate3d(0px, 0px, 0px);
		transform: translate3d(0px, 0px, 0px);
	}
    100% {
		opacity: 1; 
		-webkit-transform: translate3d(0px, -183px, 0px);
		transform: translate3d(0px, -183px, 0px);
	}
}
@-webkit-keyframes slideup {
    0% { 
		opacity: 1;  
		-webkit-transform: translate3d(0px, 0px, 0px);
		transform: translate3d(0px, 0px, 0px);
	}
    100% {
		opacity: 1; 
		-webkit-transform: translate3d(0px, -183px, 0px);
		transform: translate3d(0px, -183px, 0px);
	}
}


@keyframes slidedown {
	0% { 
		opacity: 1; 
		-webkit-transform: translate3d(0px, -183px, 0px);
		transform: translate3d(0px, -183px, 0px);
	}
    100% {
		opacity: 1; 
		-webkit-transform: translate3d(0px, 0px, 0px);
		transform: translate3d(0px, 0px, 0px);
	}
}
@-webkit-keyframes slidedown {
	 0% { 
		opacity: 1; 
		-webkit-transform: translate3d(0px, -183px, 0px);
		transform: translate3d(0px, -183px, 0px);
	}
    100% {
		opacity: 1; 
		-webkit-transform: translate3d(0px, 0px, 0px);
		transform: translate3d(0px, 0px, 0px);
	}
}