/*
Template Name: Wedding Invitation
Description: Web wedding invitation with intro, location, registry and RSVP blocks.
Author: virtuti-d
Author URI: virtuti.info
*/

/* ------------------------------------------------------------------------------------
--  RESET
------------------------------------------------------------------------------------ */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

@media only screen and (max-width: 480px) {
  
	.intro{
	padding:55px 0px 0px 0px;
	
	}
}

@media only screen and (max-width: 480px) {l
  
	.intro img{
	
	
	
	}
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* ------------------------------------------------------------------------------------
--  GENERAL 
------------------------------------------------------------------------------------ */
html, body{ 
	width:100%;
	height:100%;
	margin:0;
	padding:0;
    font-size:100%;
	overflow-x:hidden;
    font-family: 'Quattrocento', serif;
}
img{
	max-width:100%;
	height:auto;
}
::selection{
	color:#fafafa;
	background:#111111;
}
::-moz-selection{
	color:#fafafa;
	background:#111111;
}
a{
	text-decoration:none;
	-moz-transition: 500ms ease-in;
    -o-transition: 500ms ease-in;
    -webkit-transition: 500ms ease-in;
    -ms-transition: 500ms ease-in;
    transition: 500ms ease-in;
	color:#b2b2b2;
}
a:hover,
a:focus{
	color:#000;	
}
/* ------------------------------------------------------------------------------------
--  FIXED BACKGROUND 
------------------------------------------------------------------------------------ */
.wrapper{
	float:left;
	width:100%;
	height:100%;
	min-height:100%;
	background:url(images/bg.jpg) 0 -100px no-repeat;
	background-size:cover;
	border-top:40px solid #fafafa;
	border-bottom:40px solid #fafafa;
	border-left:none;
	border-right:none;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
#right-sideline{
	position:absolute;
	width:40px;
	height:100%;
	min-height:100%;
	top:0;
	right:0;
	background:#fafafa;
	z-index:20;
}
#left-sideline{
	position:absolute;
	width:40px;
	height:100%;
	min-height:100%;
	top:0;
	left:0;
	background:#fafafa;
	z-index:20;
}
@media screen and (max-width:480px){
#right-sideline,
#left-sideline{
	display:none;
}	
}
/* ------------------------------------------------------------------------------------
--  ARROWS 
------------------------------------------------------------------------------------ */
#rightButton,
#leftButton{
    position:absolute;
	width:50px;	
    height:100%;
    z-index:10;
}
@media screen and (max-width:799px){
#rightButton,
#leftButton{
	display:none;
}	
}
#rightButton span,
#leftButton span{
    position:absolute;
    top:50%;
    height:50px;
    width:50px;
    border-radius:50%;	
    background:rgba(241,128,84,0.5);
    box-shadow:0 1px 1px rgba(0,0,0,0.1);
}
#rightButton span:hover,
#leftButton span:hover{
    background:rgba(241,128,84,0.8);	
}
#rightButton a,
#leftButton a{
    float:left;
    margin:5px;
    display:block;
    height:40px;
    width:40px;
    border-radius:50%;
    background:#fa9f82;
	background:-webkit-linear-gradient(top, #fa9f82 0%, #f18054 100%);
    background: -moz-linear-gradient(top, #fa9f82 0%, #f18054  100%);
    background: -o-linear-gradient(top, #fa9f82 0%, #f18054  100%);
    background: -ms-linear-gradient(top, #fa9f82 0%, #f18054  100%);
    background: -khtml-linear-gradient(top, #fa9f82 0%, #f18054 100%);
    text-align:center;
    line-height:40px;
    color:#fff;
    font-size:16px;
	-moz-transition: 500ms ease-in;
    -o-transition: 500ms ease-in;
    -webkit-transition: 500ms ease-in;
    -ms-transition: 500ms ease-in;
    transition: 500ms ease-in;
	
}
#rightButton{
    right:60px;
}
#rightButton a{
    right:0;	
}
#leftButton{
    left:60px;
}
#leftButton a{
    left:0;
}
/* ------------------------------------------------------------------------------------
--  CONTENT GENERAL
------------------------------------------------------------------------------------ */
#ascensorBuilding{
	overflow:hidden;
}
section{
	overflow:auto;
}
.ascensorLink{
	cursor:pointer;
}
#ascensorFloor1{
	background: url(images/archana.jpg) 0 0;
	background-repeat:no-repeat;
	background-size:cover;	
  background-position: center;
  

  padding-top: 150px;
}
background-position:center;
}
#ascensorFloor2{
	background:transparent;
	position:relative;
}
/* ------------------------------------------------------------------------------------
--  SECTION 1
------------------------------------------------------------------------------------ */
/*.bg-intro{
	float:left;
	width:50%;
	height:100%;
	min-height:100%;
	background:#f5f5f5 url(images/floral.png) repeat;
	border-right:40px solid #f1f1f1;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}*/
@media screen and (max-width:480px){
.bg-intro{
    display:none;	
}
	
}
.bg-intro-deco{
	float:right;
	width:20px;
	height:100%;
	min-height:100%;
	background:#f0f0f0;	
	border-right:1px solid rgba(255,255,255,0.5);
	border-left:1px solid rgba(255,255,255,0.5);
	box-shadow:0 -10px 30px rgba(0,0,0,0.05);
}
.cover1{
	position:absolute;
	right:0;
	width:50%;
	height:260px;
	z-index:15;
}
@media screen and (max-width:300px){
.cover1{
	width:100%;	
}	
}


.intro{
	display:table;
	margin:0 auto;
	text-align:center;
}
.intro h1{
    font-family: 'Arizonia', cursive;
    font-size:9em;
    color:#fff;
    text-shadow:0 1px 1px rgba(0,0,0,0.05);
	line-height:0.8em;
}
@media screen and (max-width:1600px){
.intro h1{
    font-size:7em;	
}	
}
@media screen and (max-width:1366px){
.intro h1{
    font-size:6em;	
}	
}
@media screen and (max-width:799px){
.intro h1{
    font-size:4em;	
}		
}
.intro h2{
	text-transform:uppercase;
	letter-spacing:0.2em;
	font-weight:700;
	color:#fff;
	font-size:2em;
    text-shadow:0 1px 1px rgba(0,0,0,0.05);
    margin:14px 0 20px 0;
}
@media screen and (max-width:1600px){
.intro h2{
    font-size:1.6em;	
}	
}
@media screen and (max-width:1600px){
.intro h2{
    font-size:1.3em;	
}	
}
@media screen and (max-width:799px){
.intro h2{
    font-size:1em;	
}		
}
.intro span{
	display:table;
	margin:0 auto;
    height:80px;
    width:80px;
    border-radius:50%;	
   /* background:rgba(241,128,84,0.5);
    box-shadow:0 1px 1px rgba(0,0,0,0.1);*/
}
.intro a{
	float:left;
    display:block;
    height:75px;
    width:100px;
   
    border-radius:20%;

		margin-top:35px;
   /* background:#7A2100;
	background:-webkit-linear-gradient(top, #7A2100 0%, #7A2100 100%);
    background: -moz-linear-gradient(top, #7A2100 0%, #7A2100  100%);
    background: -o-linear-gradient(top, #7A2100 0%, #7A2100  100%);
    background: -ms-linear-gradient(top, #7A2100 0%, #7A2100  100%);
    background: -khtml-linear-gradient(top, #7A2100 0%, #7A2100 100%);*/
    text-align:center;
    color:#fff;
    font-size:0.7em;
    text-transform:uppercase;
    letter-spacing:0.2em;
    font-weight:700;
    text-shadow:0 1px 1px rgba(0,0,0,0.05);
	-moz-transition: 500ms ease-in;
    -o-transition: 500ms ease-in;
    -webkit-transition: 500ms ease-in;
    -ms-transition: 500ms ease-in;
    transition: 500ms ease-in;	
}

.intro a:hover{

}
/* ------------------------------------------------------------------------------------
--  SECTION 2
------------------------------------------------------------------------------------ */
#contentWrapper{
   position:absolute;
   overflow-y:scroll;
   overflow-x:hidden;
   width:100%;
}
.contentItem{
    position: absolute;
	width:100%;
	line-height:1.5em;
}
ul.navigation{
	float:left;
	width:100%;
	list-style:none;
}
.cover{
	position:absolute;
	width:80%;
	margin:0 10%;
	height:540px;
	z-index:15;
}
@media screen and (max-width:1280px) and (max-height:600px){
.cover{
	height:300px;	
}	
}

@media screen and (max-width:480px){
#ascensorFloor1{
	background: url(images/archana2.jpg) 0 0;	
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 150px;
}	
}

@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {
  #ascensorFloor1{
	background: url(images/archana1.jpg) 0 0;	
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 150px;
}

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

@media screen and (max-width:480px){
.cover{
	width:80%;	
	margin:0 20% 0 0;
}	
}
.cover-background{
	width:50%;
	padding:20px;
	margin:0 auto;
	display:table;
	background:#fafafa url(images/roses.jpg) -100px -10px no-repeat;
	box-shadow:0 1px 1px rgba(0,0,0,0.08);
	border:1px solid rgba(255,255,255,0.1);
}
@media screen and (max-width:1600px){
.cover-background{
	width:60%;	
}	
}
@media screen and (max-width:1366px){
.cover-background{
	width:70%;	
}	
}
@media screen and (max-width:800px){
.cover-background{
	width:80%;	
}	
}
@media screen and (max-width:799px){
.cover-background{
	width:92%;	
}	
}
@media screen and (max-width:480px){
.cover-background{
	width:100%;	
}	
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
.cover-background{
	background:#fafafa url(images/roses%402x.jpg) -10px -10px repeat-y;
	background-size:220px 750px;
}
}
.cover-box{
	float:left;
	width:100%;
	background:#fafafa;
	border:1px solid #fff;
	box-shadow:0 1px 1px rgba(0,0,0,0.09);
}
.cover-box-inner{
	float:left;
	width:100%;
	border:10px solid #fafafa;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
.box-inner{
	float:left;
	width:100%;
	min-height:700px;
    background:rgba(255,255,255,0.1);
	border:4px double rgba(0,0,0,0.08);
	border-width:4px;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
.home{
	min-height:0!important;	
}
.content{
	float:left;
	width:92%;
	padding:4%;
}
.icon{
    float:left;
    width:100%;
    margin:0 0 50px 0;
	border-bottom:4px double rgba(0,0,0,0.05);
	height:34px;
}
.icon figure{
	display:table;
	margin:0 auto;
	width:100px;
	padding:0 30px;
	background:#fafafa;
}
.icon img{
	display:block;
	width:100px;
}
.heading{
	float:left;
	width:100%;
	text-align:center;
	margin:0 0 20px 0;
}
p.heading-first{
	text-transform:uppercase;
	font-size:1.3em;
	color:#262626;
	letter-spacing:0.1em;
}
p.heading-second{
	text-transform:capitalize;
	font-size:1.2em;
	color:#505050;
}
p.heading-third{
	font-weight:700;
	margin-top:6px;
}
.icons{
    float:left;
    width:100%;
    margin:20px 0 0 0;
}
.icons ul.navigation{
	display:table;
	margin:0 auto;
	float:none!important;
	width:auto!important;	
}
.icons ul.navigation li{
	float:left;
}
.icons a{
	float:left;
	display:inline-block;
	width:22px;
	height:22px;
	padding:0 7px;
}
.icons a img{
	float:left;
}
.icons .cur{
	opacity:0.5;
}
.note{
	float:left;
	text-align:center;
	width:60%;
	margin:0 20% 20px 20%;	
}
@media screen and (max-width:800px){
.note{
	width:80%;
	margin:0 10% 20px 10%;	
}	
}
.link{
	float:left;
	width:100%;
	text-align:center;
	margin:20px 0 0 0;
}
.link a{
   font-size:1.1em;
   line-height:normal;
}
.empty{
	float:left;
	width:50%;
	margin:0 25%;
	border-bottom:4px double rgba(0,0,0,0.05);
}
/* ------------------------------------------------------------------------------------
--  1
------------------------------------------------------------------------------------ */
.names{
	float:left;
	width:100%;
	text-align:center;
    font-family: 'Arizonia', cursive;
    margin:10px 0 20px 0;
}
.name1{
	float:left;
	width:40%;
	margin-right:2%;
	border-top:4px double rgba(0,0,0,0.05);
	border-bottom:4px double rgba(0,0,0,0.05);
	padding:20px 0;
	font-size:2.5em;
}
@media screen and (max-width:480px){
.name1{
	width:100%;
	margin-right:0;
}	
}
.name2{
	float:left;
	width:16%;
	padding:20px 0;
	font-size:6em;
	text-shadow:4px 4px 0 #fff;
}
@media screen and (max-width:480px){
.name2{
	width:100%;
	margin-right:0;
}	
}
.name3{
	float:left;
	width:40%;
	margin-right:2%;
	border-top:4px double rgba(0,0,0,0.05);
	border-bottom:4px double rgba(0,0,0,0.05);
	padding:20px 0;
	font-size:2.5em;
}
@media screen and (max-width:480px){
.name3{
	width:100%;
	margin-right:0;
}	
}
/* ------------------------------------------------------------------------------------
--  2
------------------------------------------------------------------------------------ */
.map{
	float:left;
	width:100%;
	clear:both;
    margin:0 0 20px 0;
}
.map-wrap{
	float:left;
	width:100%;
	border:1px solid #fff;
	box-shadow:0 1px 1px rgba(0,0,0,0.08);
}
.map-wrap figure{
	float:left;
	width:100%;
	border-top:20px solid #fafafa;
	border-left:20px solid #fafafa;
	border-right:20px solid #fafafa;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
.map-wrap img{
	display:block;
	width:100%;
}
.maplink{
	display:table;
	margin:-22px auto 0 auto;
	position:relative;
	z-index:1;
}
.maplink-wrap{
	float:left;
	padding:4px;
    background:rgba(241,128,84,0.5);
    box-shadow:0 1px 1px rgba(0,0,0,0.08);
}
.maplink a{
	float:left;
	height:36px;
	line-height:36px;
	padding:0 1.7em;
	display:inline-block;
	text-align:center;
	color:#fff;
	text-transform:uppercase;
    font-size:0.75em;
	letter-spacing:0.1em;
	font-weight:700;
    background:#fa9f82;
	background:-webkit-linear-gradient(top, #fa9f82 0%, #f18054 100%);
    background: -moz-linear-gradient(top, #fa9f82 0%, #f18054  100%);
    background: -o-linear-gradient(top, #fa9f82 0%, #f18054  100%);
    background: -ms-linear-gradient(top, #fa9f82 0%, #f18054  100%);
    background: -khtml-linear-gradient(top, #fa9f82 0%, #f18054 100%);
}
/* ------------------------------------------------------------------------------------
--  3
------------------------------------------------------------------------------------ */
.notes{
	float:left;
	width:60%;
	margin:0 20% 20px 20%;	
}
@media screen and (max-width:800px){
.notes{
	width:80%;
	margin:0 10% 20px 10%;	
}	
}
/* ------------------------------------------------------------------------------------
--  4
------------------------------------------------------------------------------------ */
.logos{
	float:left;
	width:100%;
    margin:0 0 20px 0;
}
.logo{
	float:left;
	width:23.5%;	
	border-top:4px double rgba(0,0,0,0.05);
	border-bottom:4px double rgba(0,0,0,0.05);
	padding:14px 0;
}
@media screen and (max-width:800px){
.logo{
	width:100%;
}		
}
.logo1{
	margin:0 2% 0 0;
}
@media screen and (max-width:800px){
.logo1{
	margin:0;
}		
}
.logo2{
	margin:0 2% 0 0;
}
@media screen and (max-width:800px){
.logo2{
	margin:0;
}		
}
.logo3{
	margin:0 2% 0 0;
}
@media screen and (max-width:800px){
.logo3{
	margin:0;
}		
}
.logo4{
	margin:0;
}
.logos figure{
	display:table;
	margin:0 auto;
	width:120px;
	height:120px;
	border-radius:50%;
	background:#fafafa;
	box-shadow:0 1px 1px rgba(0,0,0,0.08);
}
.logos figure img{
	float:left;
	width:100px;
	height:100px;
	border-radius:50%;
	margin:10px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -khtml-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;	
}
.logos figure img:hover{
	-webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -khtml-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
}
.logos .storelink{
	display:table;
    margin:14px auto 0 auto;
}
/* ------------------------------------------------------------------------------------
--  5
------------------------------------------------------------------------------------ */
#countdown-wrap{
	float:left;
	width:100%;
    margin:0 0 20px 0;
    padding:20px 0 0 0;
	border-top:4px double rgba(0,0,0,0.05);
}
#countdown{
    margin:0 auto;
    display:table;	
    list-style:none;
}
.timeblockouter{
	float:left;
	width:100px;
	height:100px;
	border-radius:50%;
	background:#fafafa;
	box-shadow:0 1px 1px rgba(0,0,0,0.08);
	border:1px solid rgba(255,255,255,0.1);
	margin-right:1em;
}
.timeblockouter:last-child{
	margin-right:0;
}
@media screen and (max-width:800px){
.timeblockouter{
	float:none;	
	margin:0 0 20px 0;
	}
}
.timeblock{
	float:left;
	width:80px;
	height:80px;
	border-radius:50%;
	margin:10px;
	text-align:center;
    background:#fa9f82;
	background:-webkit-linear-gradient(top, #fa9f82 0%, #f18054 100%);
    background: -moz-linear-gradient(top, #fa9f82 0%, #f18054  100%);
    background: -o-linear-gradient(top, #fa9f82 0%, #f18054  100%);
    background: -ms-linear-gradient(top, #fa9f82 0%, #f18054  100%);
    background: -khtml-linear-gradient(top, #fa9f82 0%, #f18054 100%);
}
.number{
	display:block;
	line-height:26px;
	margin:20px 0 0 0;
	font-size:1.4em;
	color:#fff;
}
.title{
	display:block;
	line-height:14px;
	font-size:0.9em;
	color:#fff;
	font-weight:300;
}
form{
	float:left;
	width:100%;
    margin:0 0 20px 0;
}
.input-wrap{
	padding:10px 0 14px 0;
}
.leftside{
	float:left;
	width:48%;
	margin:0 2% 0 0;
	border-top:4px double rgba(0,0,0,0.05);
	border-bottom:4px double rgba(0,0,0,0.05);
}
@media screen and (max-width:799px){
.leftside{
	width:100%;
	margin: 0;
	}
}
.rightside{
	float:left;
	width:48%;
	margin:0 0 0 2%;
	border-top:4px double rgba(0,0,0,0.05);
	border-bottom:4px double rgba(0,0,0,0.05);
}
@media screen and (max-width:799px){
.rightside{
	width:100%;
	margin: 0;
	}
}
.full{
	float:left;
	width:100%;
	border-bottom:4px double rgba(0,0,0,0.05);
}
.input-wrap label{
	float:left;
	width:100%;
	text-transform:uppercase;
	font-size:0.8em;
	font-weight:700;
	letter-spacing:0.1em;
	border-bottom:4px;
	text-align:center;
}
.input-wrap input,
.input-wrap textarea{
	float:left;
	width:92%;
	padding:4%;
	background:#f0f0f0;
	border:1px solid #fff;
}
.mid{
	float:left;
	width:100%;
	margin:20px 0 0 0;
}
#submit-wrap{
	display:table;
	margin:0 auto;	
	padding:2px;
    background:rgba(241,128,84,0.5);
    box-shadow:0 1px 1px rgba(0,0,0,0.08);
}
#submit{
	padding:0.7em 1.5em;
	border-radius:0;
	cursor:pointer;
	-webkit-appearance:none;
    background:#fa9f82;
	background:-webkit-linear-gradient(top, #fa9f82 0%, #f18054 100%);
    background: -moz-linear-gradient(top, #fa9f82 0%, #f18054  100%);
    background: -o-linear-gradient(top, #fa9f82 0%, #f18054  100%);
    background: -ms-linear-gradient(top, #fa9f82 0%, #f18054  100%);
    background: -khtml-linear-gradient(top, #fa9f82 0%, #f18054 100%);
    border:1px solid rgba(255,255,255,0.1);
    text-align:center;
    font-family: 'Quattrocento', serif;
    color:#fff;
    text-transform:uppercase;
    font-weight:700;
    font-size:0.75em;
    letter-spacing:0.1em;
	-moz-transition: 500ms ease-in;
    -o-transition: 500ms ease-in;
    -webkit-transition: 500ms ease-in;
    -ms-transition: 500ms ease-in;
    transition: 500ms ease-in;
}