/*==================================================
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
	

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


@font-face{ 
    font-family: 'Mathlete';
    src: url('font/Mathlete-Skinny-webfont.eot');
    src: url('font/Mathlete-Skinny-webfont.eot?iefix') format('eot'),
         url('font/Mathlete-Skinny-webfont.woff') format('woff'),
         url('font/Mathlete-Skinny-webfont.ttf') format('truetype'),
         url('font/Mathlete-Skinny-webfont.svg#webfont') format('svg');
}

/*------------------------
    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;
    background: url(../images/view-behind-lyndhurst.jpg) center center no-repeat;
}

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: #222;
    /*font-family: 'Lora', serif;*/
    font-family: Arial, sans-serif;
    line-height: 24px;
    font-size: 14px;
    letter-spacing: 0.05em;
    padding-bottom:20px;
}

.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: 'Mathlete', sans-serif;
    font-weight: normal;
    text-align: center;
}

h1 {line-height: 110px; font-size: 70px; text-shadow: 0px 1px 3px rgba(0,0,0,.2);}
h2 {line-height: 53px; font-size: 48px; text-shadow: 0px 1px 2px rgba(0,0,0,.1);padding-bottom:20px;}

h3 {
    color: #333;
    color: rgba(0,0,0,.4);
    line-height: 32px; 
    font-size: 30px;
    font-family: 'Mathlete', '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: 'Mathlete', 'Arial', sans-serif;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
}

h5 {
    line-height: 30px; 
    font-size: 18px;
    font-family: 'Mathlete', 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: underline;
}

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: 70%;
    text-align: left;
    color: #333;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        filter: alpha(opacity=80);
    -khtml-opacity: 0.8;
      -moz-opacity: 0.8;
           opacity: 0.8;
}
p.single.center {
    text-align:center;
}

.separator {
    display: block;
    padding: 0px;
    margin: 30px 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
----------------------------------------*/
#mobile-nav {
    display:none;
    cursor:pointer;
    color:#111111;
    font-size: 28px;
    padding:10px;
}

nav {
    position: absolute; 
    left: 0px; 
    top: 20px;
    width: 100%;
    min-height: 56px;
    z-index: 10000;
}
nav a {
    text-decoration: none;
}
nav .wrap {
    overflow:hidden;
    width:800px;
}

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

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: 28px 10px;
    color: #777;
    line-height: 13px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    /*text-shadow: 0px 1px 0px #000;*/
    /*border-left: 1px solid #dedede;
    border-right: 1px solid #fff;*/
}

a.logo {
    /*position: absolute;
    top: 22px;
    right: 0px;*/
    
    float:right;
    margin:22px 12px;


    color: #777;
    line-height: 16px;
    font-family: 'Mathlete', sans-serif;
    font-size: 32px;
    /*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;}

a.title-jump {
    display:block;
    margin:0 auto;
    text-align:center;
    font-size: 12px;
    font-weight:lighter;
    text-decoration: underline;
}

/*  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: 180px;}

h1.big {
    /*position: absolute;
    top: 90px;*/
}


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

#home {
    position: relative;
    margin: 0px;
    width: 100%;
    /*height: 600px;*/
}

.home-bg {
    position: absolute;
    width: 100%;
    min-height: 900px;
    background: url(../images/Lyndhurst,_Tarrytown,_NY_-_park.jpg) bottom center no-repeat;
    background: url(../images/view-behind-lyndhurst.jpg) center center no-repeat;
    /*background: url('../images/photos/us/photo-4.jpg') center center no-repeat;*/
    background-attachment: fixed!important;
            background-size: cover !important;
    box-shadow: inset 0px 0px 10px rgba(0,0,0,.9);
}

.home {
    width:800px;
    padding-top: 120px;
}
.home-image {
    display:block;
    margin:40px;
    border:3px solid #fff; 
    text-align:center
}
.invite {
    display: table-cell;
    vertical-align: middle;
    background-color: #333;
    background-color: rgba(0,0,0,.6);
    width: 800px;
    /*height: 340px;*/
    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);*/
}
.invite h3, .invite p {
    color:#fff;
}
.invite h2 {
    /*font-size: 36px;*/
}
.invite .title-gray {
    color:#ccc;
}
.invite .title-large {
    line-height: 52px;
    font-size: 48px;
}

.home .invite h2.title-large {
    line-height: 48px;
    font-size:48px;
}
.home .invite h2 {
    line-height: 36px;
    font-size:36px;
}
.home-text {
    margin-top:40px;
}

span.circle {
    border-radius:30px;
    background-color:#309090;
    padding:10px;
    line-height:60px;
}

.invite {overflow: hidden;}

.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;}

.countdown.flip-clock-wrapper {
    margin:50px auto;
    width: 530px;
    transform: scale(0.7);
}
.countdown.flip-clock-wrapper .flip-clock-label {
    font-size: 16px;
    color:#fff;
}

.book-room {
    display: inline-block;
    padding: 3px 7px;
    background: #7EA650;
    border-radius: 5px;
    color: #FFF;
    text-decoration: none;
}

/*  4.2 About Us
----------------------------------------*/
#about {
    position: relative;
    margin: 0px;
    width: 100%;
}
#about .wrap {
    
}
.wrap.about {
    width:100%;
    max-width:800px;
    padding-top: 120px;
}

.about-bg {
    position: absolute;
    width: 100%;
    height: 500px;
    background: url(../images/view-behind-lyndhurst.jpg) center center no-repeat;
    background: url(../images/Lyndhurst,_Tarrytown,_NY_-_park.jpg) bottom 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);
}

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

.agenda {
    margin: 10px 0px 30px;
    padding: 30px 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 {
    width:600px;
    margin:0 auto;
}

.agenda ul li {
    color: #eee;
    color: rgba(250,250,250,.8);
    text-align: center;
    line-height: 32px;
    font-size: 28px;
    font-family: 'Mathlete', sans-serif;
    text-transform: uppercase;
}

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

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


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

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

.venue-bg {
    position: absolute;
    width: 100%;
    height: 500px;
    background: url(../images/view-behind-lyndhurst.jpg) center 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: 85px;
    width: 800px;
    margin: 0px auto;
}

.address article {
    display: table-cell;
    vertical-align: middle;
    background-color: #333;
    background-color: rgba(0,0,0,.5);
    width: 800px;
    height: 350px;
    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);*/
}
.address article h3, .address article p {
    color:#fff;
}


/*  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;
}



/*------------------------
    Ceremony
------------------------*/
.ceremony img,
.about img {
    display:block;
    width:70%;
    margin:10px auto;
}


/*------------------------
    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;}