/*--------------------------orientation:landscape------------------------------*/
/*--------------------------orientation:landscape------------------------------*/
/*--------------------------orientation:landscape------------------------------*/

@media all and (orientation:landscape) {

body{
	padding:0;
	margin:0;
	
}

div h1 h2 h3 h4 h6 p{
	padding:0;
	margin:0;
}

a{
	text-decoration:none;
	z-index:10000;
}

/*-------------------------------ANIMATIONS--------------------------------*/


@keyframes slideInLeft {
	
	0%{opacity:0; left:-100px;}
	100%{opacity:1; left:10px;}
	
}

@keyframes swingIn {
	
	0%{opacity:0.0; left:-50px;}
	100%{opacity:1; left:0px;}
	
}

@keyframes blink {
	
	0%{opacity:0.25;}
	50%{opacity:1;}
	100%{opacity:0.25;}
	
}

@keyframes blinkBounce {
	
	0%{transform:translateY(5px);}
	50%{transform:translateY(-5px);}
	100%{transform:translateY(5px);}
	
}

@keyframes bounce {
	
	0%{transform:translateY(8px);}
	50%{transform:translateY(-8px);}
	100%{transform:translateY(8px);}
	
}

@keyframes fadeIn {
	
	0%{opacity:0.0;}
	100%{opacity:1;}
	
}

@keyframes fadeUp {
	
	0%{opacity:0.0; top:40px;}
	100%{opacity:1; top:20px;}
	
}

@keyframes fadeUpGeneric {
	
	0%{opacity:0; transform:translateY(20px);}
	100%{opacity:1; transform:translateY(0px);}
	
}

@keyframes fadeUp2 {
	
	0%{opacity:0.0; top:80px;}
	100%{opacity:1; top:20px;}
	
}

@keyframes fadeUp3 {
	
	0%{opacity:0.0; top:340px;}
	100%{opacity:1; top:300px;}
	
}

@keyframes fadeUp4 {
	
	0%{opacity:0.0; top:240px;}
	100%{opacity:1; top:200px;}
	
}

@keyframes fadeUp5 {
	
	0%{opacity:0.0; top:280px;}
	100%{opacity:1; top:240px;}
	
}

@keyframes fadeUp6 {
	
	0%{opacity:0.0; top:400px;}
	100%{opacity:1; top:340px;}
	
}

@keyframes fadeUp7 {
	
	0%{opacity:0.0; top:400px;}
	100%{opacity:1; top:360px;}
	
}

@keyframes fadeUp8 {
	
	0%{opacity:0.0; top:150px;}
	100%{opacity:1; top:110px;}
	
}

@keyframes fadeUp9 {
	
	0%{opacity:0.0; top:40px;}
	100%{opacity:1; top:20px;}
	
}

@keyframes fadeUp10 {
	
	0%{opacity:0.0; top:280px;}
	100%{opacity:1; top:260px;}
	
}

@keyframes fadeUp11 {
	
	0%{opacity:0.0; top:40px;}
	100%{opacity:1; top:10px;}
	
}

@keyframes fadeUp12 {
	
	0%{opacity:0.0; top:180px;}
	100%{opacity:1; top:140px;}
	
}


/*-----SIGNATUREKEYFRAMES---------------*/


		@-webkit-keyframes dash {
		from{stroke-dashoffset: 1000;}
		to {stroke-dashoffset: 0;}
		}
		@-moz-keyframes dash {
		from{stroke-dashoffset: 1000;}
		to {stroke-dashoffset: 0;}
		}
		@keyframes dash {
		from{stroke-dashoffset: 1000;}
		to {stroke-dashoffset: 0;}
		}
	
	
	
		@-webkit-keyframes dash2 {
		from{stroke-dashoffset: 1000;}
		to {stroke-dashoffset: 0;}
		}
		@-moz-keyframes dash2 {
		from{stroke-dashoffset: 1000;}
		to {stroke-dashoffset: 0;}
		}
		@keyframes dash2 {
		from{stroke-dashoffset: 1000;}
		to {stroke-dashoffset: 0;}
		}

/*-------------------------------BODYCSS--------------------------------*/

/*----------------rrBlock-----------------*/ 
#rrContainer{
	position:relative;
	width:100vw;
	height:100vh;
	background-color:rgb(244,228,185);
}

#rrTextBlock{
	position:absolute;
	width:400px;
	height:260px; 
	left:40px;
	bottom:20px;
 	background-color:rgba(0,0,0,0.0);
 	opacity:0;
 	animation: slideInLeft 0.5s cubic-bezier(.17,.5,.4,.91) 0s 1 forwards;
}

#rrTitle{
	font-family: "futura-pt";
	font-size:44px;
	line-height:36px;
	margin:0;
	color:rgb(10,43,50);
}

.rrSubtitle{
	font-family: "ff-spinoza-web-pro";
	font-size:7px;
	line-height:10px;
	letter-spacing:2px;
	margin:0;
	color:rgb(10,43,50);
}

#rrDate{
	font-family: "futura-pt";
	font-size:16px;
	line-height:1em;
	margin:5px 0;
	color:rgb(10,43,50);
}

#rrTime{
	font-family: "futura-pt";
	font-size:24px;
	line-height:1em;
	margin:5px 0;
	color:rgb(10,43,50);
}

#rrList{
	font-family: "futura-pt";
	font-size:18px;
	line-height:1em;
	margin:5px 0;
	color:rgb(10,43,50);
}

#scrollBox{
	position:absolute;
	width:85px;
	height:45px;
	right:20px;
	bottom:70px;
	z-index:2;
	background-color:rgba(255,255,255,0.0);
	opacity:0;
	animation: fadeUpGeneric 0.5s cubic-bezier(.17,.5,.4,.91) 0s 1 forwards;
}

.scrollText{
	font-family:"futura-pt";
	font-size:14px;
	letter-spacing:3px;
	margin:0 0 0 5px;
	text-align:center;
	color:#EB4126;
	animation: blinkBounce 1.5s cubic-bezier(.17,.5,.4,.91) 0s infinite;
}

#scrollArrow{
	position:absolute;
	width:25px;
	height:25px;
	left:0;
	right:0;
	margin:0 auto;
	border-right-width:2px;
	border-right-color:#EB4126;
	border-right-style:solid;
	border-bottom-width:2px;
	border-bottom-color:#EB4126;
	border-bottom-style:solid;
	transform:rotate(45deg);
}

#scrollArrowWrapper{
	animation: bounce 1.5s cubic-bezier(.17,.5,.4,.91) 0s infinite;
}


/*----------------hpBlock-----------------*/ 
#hpContainer{
	position:relative;
	width:100vw;
	height:100vh;
	background-color:rgb(10,43,50);
}

#hpTextBlock{
	position:absolute;
	width:560px;
	height:260px; 
	left:40px;
	bottom:20px;
 	background-color:rgba(0,0,0,0.0);
}

#hpTitle{
	font-family: "futura-pt";
	font-size:44px;
	line-height:36px;
	margin:0;
	color:rgb(244,228,185);
}

.hpSubtitle{
	font-family: "ff-spinoza-web-pro";
	font-size:7px;
	line-height:10px;
	letter-spacing:2px;
	margin:0;
	color:rgb(244,228,185);
}

#hpDate{
	font-family: "futura-pt";
	font-size:16px;
	line-height:1em;
	margin:5px 0;
	color:rgb(244,228,185);
}

#hpTime{
	font-family: "futura-pt";
	font-size:24px;
	line-height:1em;
	margin:5px 0;
	color:rgb(244,228,185);
}

#hpList{
	font-family: "futura-pt";
	font-size:18px;
	line-height:1em;
	margin:5px 0;
	color:rgb(244,228,185);
}

#rsvpButton{
	position:absolute;
	top:180px;
	right:22%;
	font-family: "ff-spinoza-web-pro";
	font-size:14px;
	letter-spacing:4px;
	text-decoration:none;
	text-align:center;
	padding:20px 80px;
	color:#EB4126;
	border:1px solid #EB4126;
	transition:0.12s;
	animation: blink 1.5s cubic-bezier(.17,.5,.4,.91) 0s infinite;
}

#rsvpButton:hover{
	color:rgb(10,43,50);
	background-color:#EB4126;
	animation: blink 1.5s cubic-bezier(.17,.5,.4,.91) 0s 1;
}

/*----------------Images-----------------*/ 

.siteImage{
	position:absolute;
	margin:0;
	z-index:1;
}

#rrMonogram{
	width:60px;
	height:auto;
	top:10px;
	opacity:0;
	animation: slideInLeft 0.5s cubic-bezier(.17,.5,.4,.91) 0.2s 1 forwards;
}


#chefNeptune{
	width:auto;
	height:200px;
	right:10px;
	opacity:0;
	animation: fadeUp 0.5s cubic-bezier(.17,.5,.4,.91) 0.88s 1 forwards;
}

#basketball{
	width:auto;
	height:60px;
	left:200px;
	opacity:0;
	animation: fadeUp2 0.5s cubic-bezier(.17,.5,.4,.91) 0.66s 1 forwards;
}

#rrCursive{
	width:130px;
	height:auto;
	right:5px;
	opacity:0;
	animation: fadeUp3 0.5s cubic-bezier(.17,.5,.4,.91) 1s 1 forwards;
}

#fourSquare{
	width:80px;
	height:auto;
	right:150px;
	left:0;
	margin:auto;
	opacity:0;
	animation: fadeUp5 0.5s cubic-bezier(.17,.5,.4,.91) 1s 1 forwards;
}

#goodDog{
	width:auto;
	height:300px;
	right:200px;
	opacity:0;
	animation: fadeUp4 0.5s cubic-bezier(.17,.5,.4,.91) 1.1s 1 forwards;
}

#cartwheeler{
	width:auto;
	height:120px;
	left:0;
	right:0;
	margin:auto;
	opacity:0;
	animation: fadeUp8 0.5s cubic-bezier(.17,.5,.4,.91) 1.2s 1 forwards;
}

#drank{
	width:60px;
	height:auto;
	right:100px;
	left:0;
	margin:auto;
	opacity:0;
	animation: fadeUp6 0.5s cubic-bezier(.17,.5,.4,.91) 1.2s 1 forwards;
}

#footSteps{
	width:180px;
	height:auto;
	left:250px;
	opacity:0;
	animation: fadeUp10 0.5s cubic-bezier(.17,.5,.4,.91) 0.33s 1 forwards;
}

#dancingNeptune{
	width:120px;
	height:auto;
	right:20px;
	opacity:0;
	animation: fadeUp9 0.5s cubic-bezier(.17,.5,.4,.91) 1s 1 forwards;
}

#deana{
	width:60px;
	height:auto;
	right:30px;
	margin:auto;
	opacity:0;
	animation: fadeUp12 0.5s cubic-bezier(.17,.5,.4,.91) 0.66s 1 forwards;
}

#turntables{
	width:120px;
	height:auto;
	left:30px;
	opacity:0;
	animation: fadeUp11 0.5s cubic-bezier(.17,.5,.4,.91) 0.33s 1 forwards;
}
/*----------------CREDITBOX-----------------*/ 


#siteByBlock{
	position:absolute;
	width:125px;
	height:65px;
	right:20px;
	bottom:10px;
	background-color:rgba(0,0,0,0.0);
	z-index:100000;
}

#siteByBlock:hover .siteByText{
	opacity:0.66;
}

.st1 {

	fill:none;
	stroke:#AA812E;
	stroke-width:1px;
	stroke-miterlimit:10;


	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: dash 1.5s forwards;
	}
	

#siteByBlock:hover .st1 {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: dash2 1.5s forwards;
}	  
	  

#siteByAnchor{
	position:absolute;
	width:120px;
	height:120px;
	text-decoration:none;
	background-color:rgba(0,0,0,0.19);
}

.siteByText{
	font-family: "ff-spinoza-web-pro";
	font-size:7px;
	margin:-10px 0px;
	letter-spacing:4px;
	text-decoration:none;
	color:#AA812E;
	transition:0.12s;
}

#svgSigWrapper{
	position:relative;
}

#logoBlock{
	position:relative;
	width:100%;
	height:70px;
	background-color:rgb(10,43,50);
}

.logo{
	position:relative;
	width:40px;
	height:auto;
	margin:20px 7px;
	display:inline-block;
}

}

/*--------------------------orientation:portrait------------------------------*/
/*--------------------------orientation:portrait------------------------------*/
/*--------------------------orientation:portrait------------------------------*/

@media all and (orientation:portrait) {

body{
	padding:0;
	margin:0;
	
}

div h1 h2 h3 h4 h6 p{
	padding:0;
	margin:0;
}

a{
	text-decoration:none;
	z-index:10000;
}

/*-------------------------------ANIMATIONS--------------------------------*/


@keyframes slideInLeft {
	
	0%{opacity:0; left:-100px;}
	100%{opacity:1; left:10px;}
	
}

@keyframes swingIn {
	
	0%{opacity:0.0; left:-50px;}
	100%{opacity:1; left:0px;}
	
}

@keyframes blink {
	
	0%{opacity:0.25;}
	50%{opacity:1;}
	100%{opacity:0.25;}
	
}

@keyframes blinkBounce {
	
	0%{transform:translateY(5px);}
	50%{transform:translateY(-5px);}
	100%{transform:translateY(5px);}
	
}

@keyframes bounce {
	
	0%{transform:translateY(8px);}
	50%{transform:translateY(-8px);}
	100%{transform:translateY(8px);}
	
}

@keyframes fadeIn {
	
	0%{opacity:0.0;}
	100%{opacity:1;}
	
}

@keyframes fadeUp {
	
	0%{opacity:0.0; top:40px;}
	100%{opacity:1; top:20px;}
	
}

@keyframes fadeUpGeneric {
	
	0%{opacity:0; transform:translateY(20px);}
	100%{opacity:1; transform:translateY(0px);}
	
}

@keyframes fadeUp2 {
	
	0%{opacity:0.0; top:200px;}
	100%{opacity:1; top:160px;}
	
}

@keyframes fadeUp3 {
	
	0%{opacity:0.0; top:340px;}
	100%{opacity:1; top:300px;}
	
}

@keyframes fadeUp4 {
	
	0%{opacity:0.0; top:300px;}
	100%{opacity:1; top:260px;}
	
}

@keyframes fadeUp5 {
	
	0%{opacity:0.0; top:320px;}
	100%{opacity:1; top:280px;}
	
}

@keyframes fadeUp6 {
	
	0%{opacity:0.0; top:620px;}
	100%{opacity:1; top:580px;}
	
}

@keyframes fadeUp7 {
	
	0%{opacity:0.0; top:400px;}
	100%{opacity:1; top:360px;}
	
}

@keyframes fadeUp8 {
	
	0%{opacity:0.0; top:260px;}
	100%{opacity:1; top:220px;}
	
}

@keyframes fadeUp9 {
	
	0%{opacity:0.0; top:80px;}
	100%{opacity:1; top:60px;}
	
}

@keyframes fadeUp10 {
	
	0%{opacity:0.0; top:280px;}
	100%{opacity:1; top:240px;}
	
}

@keyframes fadeUp11 {
	
	0%{opacity:0.0; top:140px;}
	100%{opacity:1; top:100px;}
	
}

/*-----SIGNATUREKEYFRAMES---------------*/


		@-webkit-keyframes dash {
		from{stroke-dashoffset: 1000;}
		to {stroke-dashoffset: 0;}
		}
		@-moz-keyframes dash {
		from{stroke-dashoffset: 1000;}
		to {stroke-dashoffset: 0;}
		}
		@keyframes dash {
		from{stroke-dashoffset: 1000;}
		to {stroke-dashoffset: 0;}
		}
	
	
	
		@-webkit-keyframes dash2 {
		from{stroke-dashoffset: 1000;}
		to {stroke-dashoffset: 0;}
		}
		@-moz-keyframes dash2 {
		from{stroke-dashoffset: 1000;}
		to {stroke-dashoffset: 0;}
		}
		@keyframes dash2 {
		from{stroke-dashoffset: 1000;}
		to {stroke-dashoffset: 0;}
		}

/*-------------------------------BODYCSS--------------------------------*/

/*----------------rrBlock-----------------*/ 
#rrContainer{
	position:relative;
	width:100vw;
	height:100vh;
	background-color:rgb(244,228,185);
}

#rrTextBlock{
	position:absolute;
	width:360px;
	height:260px; 
	left:40px;
	bottom:20px;
 	background-color:rgba(0,0,0,0.0);
 	opacity:0;
 	animation: slideInLeft 0.5s cubic-bezier(.17,.5,.4,.91) 0s 1 forwards;
}

#rrTitle{
	font-family: "futura-pt";
	font-size:44px;
	line-height:36px;
	margin:0;
	color:rgb(10,43,50);
}

.rrSubtitle{
	font-family: "ff-spinoza-web-pro";
	font-size:7px;
	line-height:10px;
	letter-spacing:2px;
	margin:0;
	color:rgb(10,43,50);
}

#rrDate{
	font-family: "futura-pt";
	font-size:16px;
	line-height:1em;
	margin:5px 0;
	color:rgb(10,43,50);
}

#rrTime{
	font-family: "futura-pt";
	font-size:24px;
	line-height:1em;
	margin:5px 0;
	color:rgb(10,43,50);
}

#rrList{
	font-family: "futura-pt";
	font-size:18px;
	line-height:1em;
	margin:5px 0;
	color:rgb(10,43,50);
}

#scrollBox{
	position:absolute;
	width:85px;
	height:45px;
	right:80px;
	bottom:90px;
	z-index:2;
	background-color:rgba(255,255,255,0.0);
	opacity:0;
	animation: fadeUpGeneric 0.5s cubic-bezier(.17,.5,.4,.91) 0s 1 forwards;
}

.scrollText{
	font-family:"futura-pt";
	font-size:14px;
	letter-spacing:3px;
	margin:0 0 0 5px;
	text-align:center;
	color:#EB4126;
	animation: blinkBounce 1.5s cubic-bezier(.17,.5,.4,.91) 0s infinite;
}

#scrollArrow{
	position:absolute;
	width:25px;
	height:25px;
	left:0;
	right:0;
	margin:0 auto;
	border-right-width:2px;
	border-right-color:#EB4126;
	border-right-style:solid;
	border-bottom-width:2px;
	border-bottom-color:#EB4126;
	border-bottom-style:solid;
	transform:rotate(45deg);
}

#scrollArrowWrapper{
	animation: bounce 1.5s cubic-bezier(.17,.5,.4,.91) 0s infinite;
}


/*----------------hpBlock-----------------*/ 
#hpContainer{
	position:relative;
	width:100vw;
	height:100vh;
	background-color:rgb(10,43,50);
	overflow:hidden;
}

#hpTextBlock{
	position:absolute;
	width:560px;
	height:260px; 
	left:40px;
	bottom:0px;
 	background-color:rgba(0,0,0,0.0);
}

#hpTitle{
	font-family: "futura-pt";
	font-size:44px;
	line-height:36px;
	margin:0;
	color:rgb(244,228,185);
}

.hpSubtitle{
	font-family: "ff-spinoza-web-pro";
	font-size:7px;
	line-height:10px;
	letter-spacing:2px;
	margin:0;
	color:rgb(244,228,185);
}

#hpDate{
	font-family: "futura-pt";
	font-size:16px;
	line-height:1em;
	margin:5px 0;
	color:rgb(244,228,185);
}

#hpTime{
	font-family: "futura-pt";
	font-size:24px;
	line-height:1em;
	margin:5px 0;
	color:rgb(244,228,185);
}

#hpList{
	font-family: "futura-pt";
	font-size:18px;
	line-height:1em;
	margin:5px 0;
	color:rgb(244,228,185);
}

#rsvpButton{
	position:absolute;
	top:180px;
	left:22%;
	font-family: "ff-spinoza-web-pro";
	font-size:14px;
	letter-spacing:4px;
	text-decoration:none;
	text-align:center;
	padding:20px 80px;
	color:#EB4126;
	border:1px solid #EB4126;
	transition:0.12s;
	animation: blink 1.5s cubic-bezier(.17,.5,.4,.91) 0s infinite;
}

#rsvpButton:hover{
	color:rgb(10,43,50);
	background-color:#EB4126;
	animation: blink 1.5s cubic-bezier(.17,.5,.4,.91) 0s 1;
}

/*----------------Images-----------------*/ 

.siteImage{
	position:absolute;
	margin:0;
	z-index:1;
}

#rrMonogram{
	width:80px;
	height:auto;
	top:10px;
	opacity:0;
	animation: slideInLeft 0.5s cubic-bezier(.17,.5,.4,.91) 0.2s 1 forwards;
}


#chefNeptune{
	width:auto;
	height:200px;
	right:10px;
	opacity:0;
	animation: fadeUp 0.5s cubic-bezier(.17,.5,.4,.91) 0.88s 1 forwards;
}

#basketball{
	width:auto;
	height:60px;
	left:20px;
	opacity:0;
	animation: fadeUp2 0.5s cubic-bezier(.17,.5,.4,.91) 0.66s 1 forwards;
}

#rrCursive{
	width:130px;
	height:auto;
	right:5px;
	opacity:0;
	animation: fadeUp3 0.5s cubic-bezier(.17,.5,.4,.91) 1s 1 forwards;
}

#fourSquare{
	width:80px;
	height:auto;
	right:0;
	left:50px;
	margin:auto;
	opacity:0;
	animation: fadeUp5 0.5s cubic-bezier(.17,.5,.4,.91) 1s 1 forwards;
}

#goodDog{
	width:auto;
	height:260px;
	right:20px;
	opacity:0;
	animation: fadeUp4 0.5s cubic-bezier(.17,.5,.4,.91) 1.1s 1 forwards;
}

#cartwheeler{
	width:auto;
	height:120px;
	left:20px;
	opacity:0;
	animation: fadeUp8 0.5s cubic-bezier(.17,.5,.4,.91) 1.2s 1 forwards;
}

#drank{
	width:60px;
	height:auto;
	right:0;
	left:0;
	margin:auto;
	opacity:0;
	animation: fadeUp6 0.5s cubic-bezier(.17,.5,.4,.91) 1.2s 1 forwards;
}

#footSteps{
	width:180px;
	height:auto;
	left:10px;
	opacity:0;
	animation: fadeUp10 0.5s cubic-bezier(.17,.5,.4,.91) 0.33s 1 forwards;
}

#dancingNeptune{
	width:120px;
	height:auto;
	right:20px;
	opacity:0;
	animation: fadeUp9 0.5s cubic-bezier(.17,.5,.4,.91) 1s 1 forwards;
}

#deana{
	width:70px;
	height:auto;
	right:30px;
	margin:auto;
	opacity:0;
	animation: fadeUp10 0.5s cubic-bezier(.17,.5,.4,.91) 0.66s 1 forwards;
}

#turntables{
	width:120px;
	height:auto;
	left:30px;
	opacity:0;
	animation: fadeUp11 0.5s cubic-bezier(.17,.5,.4,.91) 0.33s 1 forwards;
}
/*----------------CREDITBOX-----------------*/ 


#logoBlock{
	position:relative;
	width:100%;
	height:70px;
	background-color:rgb(10,43,50);
}

.logo{
	position:relative;
	width:40px;
	height:auto;
	margin:20px 7px;
	display:inline-block;
}

#siteByBlock{
	position:absolute;
	width:125px;
	height:65px;
	right:20px;
	bottom:10px;
	background-color:rgba(0,0,0,0.0);
	z-index:100000;
}

#siteByBlock:hover .siteByText{
	opacity:0.66;
}

.st1 {

	fill:none;
	stroke:#AA812E;
	stroke-width:1px;
	stroke-miterlimit:10;


	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: dash 1.5s forwards;
	}
	

#siteByBlock:hover .st1 {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: dash2 1.5s forwards;
}	  
	  

#siteByAnchor{
	position:absolute;
	width:120px;
	height:120px;
	text-decoration:none;
	background-color:rgba(0,0,0,0.19);
}

.siteByText{
	font-family: "ff-spinoza-web-pro";
	font-size:7px;
	margin:-10px 0px;
	letter-spacing:4px;
	text-decoration:none;
	color:#AA812E;
	transition:0.12s;
}

#svgSigWrapper{
	position:relative;
}

}