/*==================================================
Item: 
Author: http://themeforest.net/user/navigator
Only At: ThemeForest.net


	* * * CONTENTS * * *

	0. HTML5 RESET
	
	1. BACKGROUND STYLES
	
	2. GENERIC STYLES
	
	3. HEADER STYLES
        3.0 Main navigation
        3.1 Top Header Icons
	
	4. CONTENT STYLES
        4.0 Pages List
        4.1 Invitation
        4.2 Agenda
        4.3 Venue
        4.4 Local Accomodation
        4.5 Download, PayPall buttons
        4.6 RSVP
	
	5. FOOTER STYLES
	

==================================================*/


/*------------------------
    0. HTML5 RESET
------------------------*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,hgroup,
header,menu,nav,section,footer { 
	display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}


/*------------------------
    1. BACKGROUND STYLES
------------------------*/

body {
    background-color: #705080;
    font-family: 'Lora', serif;
    line-height: 24px;
    font-size: 16px;
}

.bg-pattern {background-image: url(images/bg-pattern.png);}

.bg-rsvp {background-color: #504848;}


/*------------------------
    2. GENERIC STYLES
------------------------*/

.wrap {
    position: relative;
    width: 940px;
    margin: 0px auto;
}

h1, h2 { 
    color: #fff; 
    font-family: 'Lora', serif;
    font-weight: bold;
    text-align: center;
}

h1 {line-height: 70px; font-size: 70px; text-shadow: 0px 1px 3px rgba(0,0,0,.2);}
h2 {line-height: 24px; font-size: 22px; text-shadow: 0px 1px 2px rgba(0,0,0,.1);}

h3 {
    color: #333;
    color: rgba(0,0,0,.4);
    line-height: 32px; 
    font-size: 30px;
    font-family: 'Fjalla One', 'Arial', sans-serif;
    text-align: center;
    font-weight: normal;
    text-transform: uppercase;
}

h4 {
    color: #aaa;
    color: rgba(255,255,255,.5);
    line-height: 28px; 
    font-size: 26px;
    font-family: 'Fjalla One', 'Arial', sans-serif;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
}

h5 {
    line-height: 30px; 
    font-size: 18px;
    font-family: 'Lora', serif;
    font-style: italic;
    font-weight: normal;
    text-align: center;
    text-shadow: 0px 1px 1px rgba(255,255,255,.2);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
        filter: alpha(opacity=60);
    -khtml-opacity: 0.6;
      -moz-opacity: 0.6;
           opacity: 0.6;
}

a {
    color: #fff;
    text-decoration: none;
}

a:hover {
    border-bottom: 1px dotted rgba(255,255,255,.7);
}

ul {list-style: none;}

.half, .third, .fourth, .fifth, .sixth {
    position: relative;
    float: left;
    margin-right: 4%;
}

.half {width: 48%;}
.third {width: 30.66%;}
.fourth {width: 22%;}
.fifth {width: 16.8%;}
.sixth {width: 13.33%;}

.last {margin-right: 0px; clear: right;}

p.single {
    margin: 25px auto;
    width: 65%;
    text-align: center;
    color: #222;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        filter: alpha(opacity=80);
    -khtml-opacity: 0.8;
      -moz-opacity: 0.8;
           opacity: 0.8;
}

.separator {
    padding: 0px;
    margin: 40px 0px;
    width: 100%;
    height: 11px;
    clear: both;
}

.separator.flourish-open { 
    background: url(images/flourish.png) no-repeat center top;
}
.separator.flourish-close {
    background: url(images/flourish.png) no-repeat center bottom;
}
.separator.flourish-or {
    height: 26px;
    background: url(images/flourish-or.png) no-repeat center bottom;
}
.separator.stars {
    height: 7px;
    background: url(images/stars.png) no-repeat center bottom;
}
.separator.empty {margin: 20px 0px;}

.clear {clear: both;}


/*------------------------
    3. HEADER STYLES
------------------------*/


/*  3.0 Main navigation
----------------------------------------*/

nav {
    display: none;
    position: fixed; 
    left: 0px; 
    top: 40px; 
    width: 100%;
    height: 56px;
    background-color: #f4f4f4;
    border-bottom: 4px solid #fff;
    box-shadow: 0px 2px 4px rgba(0,0,0,.3), 
                0px -1px 2px rgba(0,0,0,.2);
    z-index: 10000;
}

nav ul {
    height: 60px;
    border-left: 1px solid #fff;
    overflow: hidden;
}

nav ul li { 
    float: left; 
    width: 80px;
    text-align: center;
}

nav ul li:last-child {border-right: 1px solid #dedede;}

nav ul li a {
    display: block;
    padding: 25px 0px;
    color: #777;
    line-height: 13px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    text-shadow: 0px 1px 0px #fff;
    border-left: 1px solid #dedede;
    border-right: 1px solid #fff;
}

a.logo {
    position: absolute;
    top: 22px;
    right: 0px;
    color: #777;
    line-height: 16px;
    font-size: 16px;
    font-weight: bold;
    font-style: italic;
    text-shadow: 0px 1px 0px #fff;
}

nav ul li a:hover,
nav ul li a.active,
a.logo:hover  {color: #3c8eb4;}


/*  3.1 Top Header Icons
----------------------------------------*/

.nav-icons li {
    float: left;
    margin-left: 26px;
    width: 54px;
    height: 20px;
}

.nav-icons li a,
.social-icons li a {
    display: none;
    width: 30px;
    height: 20px;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        filter: alpha(opacity=50);
    -khtml-opacity: 0.5;
      -moz-opacity: 0.5;
           opacity: 0.5;
    -webkit-transition: opacity 0.2s ease;
       -moz-transition: opacity 0.2s ease;
         -o-transition: opacity 0.2s ease;
            transition: opacity 0.2s ease;
}

.nav-icons li a.selected {display: block;}

.nav-icons li a.the-day {background: url(images/nav-icons.png) no-repeat 0px 0px;}
.nav-icons li a.venue {background: url(images/nav-icons.png) no-repeat 0px -20px;}
.nav-icons li a.photos {background: url(images/nav-icons.png) no-repeat 0px -40px;}
.nav-icons li a.gifts {background: url(images/nav-icons.png) no-repeat 0px -60px;}
.nav-icons li a.rsvp {background: url(images/nav-icons.png) no-repeat 0px -80px;}

.nav-icons li a:hover,
.social-icons li a:hover {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
    -khtml-opacity: 1;
      -moz-opacity: 1;
           opacity: 1;
    border: none;
}

.social-icons {float: right;}
.social-icons li {float: left;}

.social-icons li a {
    display: block;
    width: 20px;
    margin-left: 7px;
}

.social-icons li a.twitter {background: url(images/social-icons.png) no-repeat 0px 0px;}
.social-icons li a.facebook {background: url(images/social-icons.png) no-repeat 0px -20px;}
.social-icons li a.google {background: url(images/social-icons.png) no-repeat 0px -40px;}
.social-icons li a.flickr {background: url(images/social-icons.png) no-repeat 0px -60px;}


/*------------------------
    4. CONTENT STYLES
------------------------*/


/*  4.0 Pages List
----------------------------------------*/

ul#pages li .top-header {
    padding: 10px 0px;
    width: 100%;
    height: 20px;
    background-color: #444;
    background-color: rgba(0,0,0,.2);
    z-index: 8888;
}

ul#pages li section {padding: 120px 0px 50px;}

ul#pages li#the-day .top-header {position: fixed;}
ul#pages li#the-day section {padding-top: 250px;}

h1.big {
    position: absolute;
    top: 130px;
}


/*  4.1 Invitation
----------------------------------------*/

ul.invite {overflow: hidden;}

ul.invite li {text-align: center;}

.frame {
    display: block;
    line-height: 0px;
    background: url(images/frame.png) no-repeat center center;
}

.frame img {border: 10px solid #fff;}


/*  4.2 Agenda
----------------------------------------*/

.agenda {
    margin: 90px 0px;
    padding: 50px 0px;
    background-color: #7d7d7d;
    background-color: rgba(255,255,255,.1);
    overflow: hidden;
    border-top: 2px solid rgba(0,0,0,.2);
    border-bottom: 2px solid rgba(0,0,0,.2);
}

.agenda ul li {
    color: #444;
    color: rgba(0,0,0,.4);
    text-align: center;
    line-height: 32px;
    font-size: 20px;
    font-family: 'Fjalla One', 'Arial', sans-serif;
    text-transform: uppercase;
}

.agenda ul li div {
    color: #fff;
    line-height: 24px;
    font-size: 16px;
    font-family: 'Lora', serif;
    font-weight: bold;
    border-bottom: 1px solid #707070;
    border-bottom: 1px solid rgba(0,0,0,.1);
}

.agenda ul li div span {font-size: 12px;}


/*  4.3 Venue
----------------------------------------*/

#venue-address {
    position: relative;
    margin: 60px 0px;
    background-color: #212121;
    width: 100%;
    height: 500px;
}

.venue-bg {
    position: absolute;
    width: 100%;
    height: 500px;
    background: url(images/venue.jpg) top center no-repeat;
    background-attachment: fixed!important;
    -webkit-background-size: cover!important;
            background-size: cover!important;
    box-shadow: inset 0px 0px 10px rgba(0,0,0,.9);
}

.address {
    display: block;
    padding-top: 115px;
    width: 470px;
    margin: 0px auto;
}

.address span {
    display: table-cell;
    vertical-align: middle;
    background-color: #333;
    background-color: rgba(0,0,0,.5);
    width: 470px;
    height: 270px;
    color: #fff;
    line-height: 34px;
    font-size: 24px;
    font-family: 'Lora', serif;
    font-weight: bold;
    text-align: center;
    text-shadow: 0px 1px 2px rgba(0,0,0,.4);
}


/*  4.4 Local Accomodation
----------------------------------------*/

.local-accomodation {
    padding-bottom: 10px;
    margin: 50px 0px;
}

.local-accomodation ul li {
    box-shadow: 0px 1px 2px rgba(0,0,0,.1);
    -webkit-transition: all .2s;
       -moz-transition: all .2s;
         -o-transition: all .2s;
            transition: all .2s;
}

.local-accomodation ul li:hover {
    box-shadow: 0px 1px 5px rgba(0,0,0,.3);
}

.local-accomodation ul li a {
    display: block;
    padding: 30px 0px;
    background-color: #777;
    background-color: rgba(255,255,255,.1);
    color: rgba(0,0,0,.8);
    text-align: center;
    text-shadow: 0px 1px 1px rgba(255,255,255,.1);
    -webkit-transition: all .2s;
       -moz-transition: all .2s;
         -o-transition: all .2s;
            transition: all .2s;
}

.local-accomodation ul li a:hover {
    background-color: #aaa;
    background-color: rgba(255,255,255,.3);
    border: none;
}


/*  4.5 Download, PayPall buttons
----------------------------------------*/

#photos-download {
    margin: 50px 0px 70px;
    padding: 20px 25px;
    background-color: #808080;
    background-color: rgba(255,255,255,.1);
    overflow: hidden;
}

#photos-download span {
    display: block;
    float: left;
    padding: 6px 0px;
    width: 75%;
    color: rgba(0,0,0,.8);
    text-shadow: 0px 1px 1px rgba(255,255,255,.1);
}

.btn-download,
.btn-paypall {
    display: inline-block;
    float: right;
    padding: 10px 12px;
    background-color: #24b4bd;
    background: -moz-linear-gradient(top, #24b4bd, #00a1ac); 
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#24b4bd), to(#00a1ac));
    color: #fff;
    line-height: 14px;
    font-size: 14px;
    font-family: 'Arial', 'Helvetica', sans-serif;
    font-weight: bold;
    text-shadow: 0px 1px 1px rgba(0,0,0,.3);
    -moz-border-radius: 4px;
         border-radius: 4px;
    border: 1px solid #005257;
    box-shadow: inset 0px 1px 1px rgba(255,255,255,.4), 
                      0px 1px 2px rgba(0,0,0,.2);
    width: auto;
    overflow: visible;
    cursor: pointer;
}

.btn-download:hover {
    background-color: #2bc0c9;
    background: -moz-linear-gradient(top, #2bc0c9, #06a5b0); 
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#2bc0c9), to(#06a5b0));
    border: 1px solid #005257;
}

.btn-paypall {
    display: block;
    float: none;
    padding: 6px 0px;
    margin: 25px auto;
    width: 117px;
    background-color: #404040;
    background: -moz-linear-gradient(top, #505050, #303030); 
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#505050), to(#303030));
    line-height: 11px;
    font-size: 11px;
    text-align: center;
    border: 1px solid #282828;
    box-shadow: inset 0px 1px 1px rgba(255,255,255,.2), 
                      0px 1px 2px rgba(0,0,0,.2);
}

.btn-paypall:hover {
    background-color: #444;
    background: -moz-linear-gradient(top, #545454, #343434); 
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#545454), to(#343434));
    border: 1px solid #282828;
}


/*  4.6 RSVP
----------------------------------------*/

#rsvp {text-align: center;}

#rsvp_form fieldset {
    display: block;
    margin: 30px 0px;
}

#rsvp_form label {
    display: block;
    margin-bottom: 7px;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        filter: alpha(opacity=70);
    -khtml-opacity: .7;
      -moz-opacity: .7;
           opacity: .7;
}

#rsvp_form input[type=text] {
    background-color: #353030;
    width: 470px;
    height: 40px;
    color: rgba(255,255,255,.3);
    line-height: 16px;
    font-size: 16px;
    font-family: 'Lora', serif;
    text-align: center;
    border: 2px solid rgba(0,0,0,.2);
    -moz-border-radius: 3px;
         border-radius: 3px;
    outline: none;
}

#rsvp_form input[type=text]:focus { 
    color: rgba(255,255,255,.4); 
}

#rsvp_form input[type=submit] {
    margin-top: 10px;
    background: none;
    color: rgba(255,255,255,.5);
    line-height: 24px;
    font-size: 18px;
    font-family: 'Lora', serif;
    border: none;
    -webkit-transition: all 0.2s;
       -moz-transition: all 0.2s;
         -o-transition: all 0.2s;
            transition: all 0.2s;
    cursor: pointer;
}

#rsvp_form input[type=submit]:hover {
    color: rgba(255,255,255,.8);
}

#rsvp_form #confirmation {padding: 21px 0px 1px;}
#rsvp_form #confirmation img {margin-top: 25px;}
#rsvp_form #confirmation h3 {
    color: rgba(0,0,0,.3);
    line-height: 26px;
    font-size: 24px;
}


/*------------------------
    5. FOOTER STYLES
------------------------*/

footer {
    padding: 15px 0px;
    background-color: #342f2f;
    border-top: 1px solid #252525;
    overflow: hidden;
}

.logo-footer {
    float: left;
    color: #070707;
    font-style: italic;
    font-weight: bold;
    text-shadow: 0px 1px 0px rgba(255,255,255,.08);
}

.logo-footer:hover {border: none;}

.text-footer {
    float: right;
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    text-shadow: 0px 1px 0px rgba(255,255,255,.08);
}

#rotate-phone {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: inherit;
    padding-top: 120px;
    text-align: center;
}

#rotate-phone img {margin-top: 30px;}