/*All*/
body{
	color: gray;
}

a {
	color: rgb(255,130,150);  
}
a:hover, a:focus {
    color: rgb(255,110,130); 
}

button, .button {
	background-color: rgb(255,180,200);
}

button:hover, button:focus, .button:hover, .button:focus{
	background-color: rgb(255,150,170);
}

.first_greeting{
	font-size: 250%;
	line-height: 40px;
	padding: 10px;
	color: pink;
}

.greeting_content{
	padding: 10px;
}

.greeting{
	width: 100%;
	text-align: right;
	padding: 4px;
	font-size: 14px;
	color: gray;
}

.login_note{
	color: pink;
	font-size: 80%;
	margin: 18px 0 0 10px;
}

.error{
	color: red;
	font-size: 20px;
	margin: 10px 0;
}

.login_error{
	color: red;
	margin: -10px 0 10px 0;
}

.footer{
	padding: 50px;
	font-size: 12px;
	text-align: center;
}

/*Nav Bar*/
.fixed{
	opacity: 0.9;
	background: white;
	text-align:center;
}

.top-bar {
	height: 74px;
	background: white;
}

.top-bar .large-2{
	padding: 0px;
}
.top-bar .medium-2 {
	padding: 0px;
	min-width: 110px;
}

.title-area{
	padding:0px;
	margin:0px;
}
	
.top-bar-section ul,
.top-bar-section ul li.active > a,
.top-bar-section ul li.active > a:hover,
.top-bar-section li a:not(.button),
.top-bar-section li:not(.has-form) a:not(.button),
.top-bar-section li a:not(.button):hover {
    background-color: white; 
	color: gray;
	height: 74px;
	line-height: 74px;
	font-size: 14px;
	padding: 0;
}

.top-bar-section li a:hover {
    -webkit-transition: background-color 300ms ease-out;
    -moz-transition: background-color 300ms ease-out;
    transition: background-color 300ms ease-out; 
}
  
#logo{
	margin: 2px 0 0 6px;
	width: 140px;
}
  
.top-bar .name{
	height: 74px;
}

.toggle-topbar .menu-icon {
	height: 74px;
}
 
.top-bar .toggle-topbar.menu-icon a {
	color: gray;
}
 
.top-bar .toggle-topbar.menu-icon a span::after {
	box-shadow: 0 0px 0 1px gray, 0 7px 0 1px gray, 0 14px 0 1px gray;
}

.top-bar .toggle-topbar.menu-icon a span:hover:after {
	box-shadow: 0 0px 0 1px gray, 0 7px 0 1px gray, 0 14px 0 1px gray;
}

@media only screen and (min-width: 40.063em){
	.nav_linklg{width: 18%;}
	.nav_linkmd{width: 16%;}
	.nav_linksm{width: 12%;}
}

@media only screen and (max-width: 40em) {
.nav_linklg,
.nav_linkmd,
 .nav_linksm{
  width: 100%;
  float: left; }
}




/*HOME*/
#home-photo {
	/*background: url('../photos/eng1_2_8.jpg') no-repeat right fixed;
	background-size: cover;*/
	text-align: center;
	vertical-align: bottom;
	position: relative;
}

.home_title{
	font-family: 'Lovers Quarrel', cursive;
	font-size: 80px;
	color: rgb(90,90,90);
	text-align: center;
	line-height: 70px;
	position: absolute;
	bottom: 10px;
	width: 100%;
	z-index: 10;
}

#home_gradient{
	background: url('../img/gradient.png') no-repeat top;
	background-size: cover;
	opacity: .6;
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 180px;
	z-index: 9;
}

#home_title_date{
	font-size: 60px;
	line-height: 50px;
}


#main-photo {
	margin: 20px 0;
}

.tile_title {
	font-size: 24px;
	color: #666666;
	margin: 20px;
}

.main_tiles {
	text-align: center;
	margin-top: 40px;
	padding: 30px;
	color: gray;
}

.thanks_img1{
	height: 140px;
	vertical-align: middle;
}

.thanks_img2{
	height: 60px;
	vertical-align: middle;
}

.thanks_tiles{
	text-align: center;
	padding: 20px;
}


/*OUR STORY*/
.story_title{
	font-family: 'Lovers Quarrel', cursive;
	font-size: 70px;
}

.story_title2{
	font-family: 'Lovers Quarrel', cursive;
	font-size: 70px;
	padding-top: 20px;
}

.story_name{
	font-size: 26px;
	padding-top: 20px;
	margin-bottom: -16px;
}

.story_topblock{
	width: 100%;
	text-align: center;
}

#story_highlight{
	color: rgb(255,150,170);
}

.story_content{
	padding-top: 20px;
}

@media only screen and (min-width: 40.063em){
	.story_box{
		width: 900px;
		margin-left: auto;
		margin-right: auto;
	}

	.story_img{
		width: 700px;
	}

	.story_sections  {
		position: relative;
		background-position: top center;
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}

	#story_section1{
		background-image: url(../photos/story_bg2.jpg);
		height: 1750px;
	}
	 
	#story_section2{
		background-image: url(../photos/story_bg1.jpg);
		height: 1800px;
	}

	#story_section3{
		background-image: url(../photos/story_bg4.jpg);
		height: 2200px;
	}

	#story_section4{
		background-image: url(../photos/story_bg3.jpg);
		height: 1050px;
	}

	.story_spliter{
		height: 800px;
	}

	#story_finalspliter{
		height: 400px;
	}

	#story_block1{
		background-color: white;
		height: 950px;
	}

	#story_block2{
		background-color: white;
		height: 1000px;
	}

	#story_block3{
		background-color: white;
		height: 1400px;
	}

	#story_block4{
		background-color: white;
		height: 300px;
	}
}

/*ipad only*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
	.story_sections  {position: relative;background-position: ;background-repeat: ;background-size: ;background-attachment: relative;}
	#story_section1{background-image: ; height: 950px;}
	#story_section2{background-image: ; height: 1000px;}
	#story_section3{background-image: ; height: 1400px;}
	#story_section4{background-image: ; height: 300px;}
	.story_spliter{height: 0;}
	#story_finalspliter{height: 0;}
}


/*ipad with retina only */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
	.story_sections  {position: relative;background-position: ;background-repeat: ;background-size: ;background-attachment: relative;}
	#story_section1{background-image: ; height: 950px;}
	#story_section2{background-image: ; height: 1000px;}
	#story_section3{background-image: ; height: 1400px;}
	#story_section4{background-image: ; height: 300px;}
	.story_spliter{height: 0;}
	#story_finalspliter{height: 0;}
}

@media only screen and (max-width: 40em) {
	.story_box{
		width: 100%;
		padding: 10px;
	}

	.story_img{
		width: 100%;
	}
}


/*BRIDAL PARTY*/
.party_sections  {
    position: relative;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
	height: 100%;
}

#bridesmaid_section{
    background-image: url(../img/1.jpg);
}
 
#groomsman_section {
    background-image: url(../img/gray-bkgd.jpg);
}

#juniors_section {
    background-image: url(../img/2.jpg);
}

.party_content{
	background: white;
	max-width: 100%;
}

.party_header{
	font-family: 'Lovers Quarrel', cursive;
	text-align: center;
	padding-top: 30px;
	line-height: 100px;
	height: 150px;
}

@media only screen and (min-width: 40.063em){
	.party_header{font-size: 90px;}
}

@media only screen and (max-width: 40em) {
	.party_header{font-size: 60px;}
}

#groomsman_header{
	color: white;
}

#juniors_header{
	color: white;
}

.party_img {
	text-align: center;
	width: 180px;
	margin-bottom: 20px;
}

.party_name{
	font-family: 'Lovers Quarrel', cursive;
	font-size: 40px;
	margin-bottom: 10px;
	color: rgb(100,100,100);
}

.party_title {
	font-family: 'Lovers Quarrel', cursive;
	font-size: 60px;
	margin: -30px 0 30px 0;
	color: rgb(100,100,100);
}


/*EVENT DETAILS*/
.event_main{
	
}

.event_container {
	padding: 20px;
	background: fixed url('../img/koolau.jpg') no-repeat top;
	background-color: rgb(10,10,10);
 }

.event_subjects {
	font-size: 12px;
	line-height: 10px;
	font-weight: normal;
}

.event_contents {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: bold;
	color: rgb(100,100,100);
	margin-bottom: 16px;
}

.event_notes {
	font-size: 12px;
	line-height: 10px;
	font-weight: normal;
}

#event_data{
	width:100%;
	margin-bottom: 20px;
}

#event_left{
	width: 360px;
	opacity: 0.9;
	background: white;
	padding: 30px 30px 16px 30px;
}

#venue_note{
	margin-top: 4px;
}

#rsvp_note{
	margin: -16px 0 20px 0;
}

#koolau_img{
	position: relative; 
	width: 100%;
	text-align: right;
	margin-top: -80px;
}

@media only screen and (max-width: 40em) {
	#koolau_img{visibility: hidden;}
}

#google_map{
	padding-top: 30px;
	text-align: center;
}


/*GALLERY*/
#gallery_greeting{
	padding-top: 76px;
	margin-bottom: -26px;
}


/*RSVP*/
.rsvp_main{
	width: 460px;
}

.rsvp_title{
	font-size: 250%;
	font-weight: bold;
	line-height: 40px;
	padding: 10px;
	color: pink;
}

.rsvp_name{
	font-size: 160%;
	padding: 10px;
	line-height: 40px;
}

.seat_number{
	color: pink;
	font-size: 140%;
	font-weight: bold;
}

.rsvp_content{
	padding: 0 10px;
}

.rsvp_done_note{
	padding: 10px;
	font-size: 80%;
	color: gray;
}

#attending_dd{
	width: 60px;
}

#radio_attending{
	margin-left: 40px;
}

#acception_area{
	padding: 20px;
}

.rsvp_note{
	color: pink;
	font-size: 90%;
	margin-top: -18px;
	margin-left: 4px;
}

#rsvp_button{
	margin-top: 20px;
}

#rsvp_cancel{
	margin-right: 20px;
	margin-top: 20px;
}

#rsvp_canceltxt{
	width: 150px;
}

#rsvp_error{
	color: red;
}