/*** Global reset ***/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
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;}
body {line-height: 1;}
ol, ul {list-style: none;}


/* Extended base styles (site specific)****/
html {}
body {
    background: #272727;
    overflow-x: hidden;
    line-height: 1.5;
    color: #e6e8e8;
    font-size: 14px;
    font-family: Arial,sans-serif;
}
h1 {color: #e7cf75;}
h2 {font: 42px 'SanRafael', serif; color:#e7cf75; position:relative; z-index:4;}
h3 {font: 36px 'SanRafael', serif; color:#e6e8e8;}
a, a:link,a:active,a:visited {
    -webkit-transition: color 0.25s ease-out;
    -moz-transition: color 0.25s ease-out;
    -o-transition: color 0.25s ease-out;
    transition: color 0.25s ease-out;
    color:#e6e8e8;
    outline: none;
    text-decoration:none;
}
a:hover {color:#e7cf75;}
img {display:block;}
p {margin:1em 0; font: 14px/18px 'BrandonGrotesque-Regular', serif;}
.clear {clear:both;}
.float-and {position:absolute; left:460px;}

/**GLOBAL CUSTOM STYLES**/
.info-box.small {
    height:352px;
    width:222px;
    position:absolute;
    text-align: center;
    top: 425px;
    background:url('../images/miles_sprite.png') no-repeat -431px 0 transparent;
}
.info-box.left {left:0;}
.info-box.right {right:0;}

.info-box.small .copy {padding:20px;}
.info-box.small .copy h2 {font: 42px/38px 'SanRafael', serif; color:#e7cf75; margin:35px 0 5px 0;}
.info-box.small .copy p {color:#e7cf75; font: 14px/18px 'BrandonGrotesque-Regular', serif; margin:0;}
.clear > .copy {width:710px; margin: auto; position:relative; z-index:25;}
.footer {width:405px; margin:auto; padding-bottom:35px; overflow:hidden;}
.footer li {float:left; padding-right:25px;}
.footer li a {text-decoration:none !important;}
.footer li a:hover{text-decoration:underline !important;}


/**BLOCKS THAT HIDE & REVEAL DOTS**/
.hrz_block_top {
    display: block;
    height:7px;
    width:150px;
    left:0;
    top:25px;
    background:#272727;
}
.vrt_block {
    display: block;
    height:483px;
    width:7px;
    left:0;
    top:36px;
    background:#272727;
}
.hrz_block_bottom {
    bottom:3px;
    display: block;
    height:7px;
    width:150px;
    left:0;
    background:#272727;
}

/**ICON AND DOT STYLES**/
.icon-block {height:545px; width:425px; position:relative;}
.jaymie-block {float:left;}
.miles-block {float:right;}

.icon {height:58px; width:58px; position:absolute; z-index:10;}
.icon-dots-wrapper span {position:absolute;}
.icon-block {margin-top:10px;}

.jaymie-icon {left:95px; background:url('../images/miles_sprite.png') no-repeat -56px -350px transparent;}
.miles-icon {left:0; background:url('../images/miles_sprite.png') no-repeat -123px -350px transparent;}

.jaymie-icon.gold {background-position:-188px -350px;}
.miles-icon.gold {background-position:-255px -350px;}

.dot-block {
    height:518px;
    width:150px;
    position: absolute;
}

.jaymie-dot-block1, .jaymie-dot-block3, .jaymie-dot-block5, .jaymie-dot-block9 {
    right:0;
    background:url('../images/sep-images/dotted_line.png') no-repeat -3px 20px transparent;
}
.miles-dot-block1, .miles-dot-block3, .miles-dot-block5, .miles-dot-block9 {
    left:0;
    background:url('../images/sep-images/dotted_line.png') no-repeat -36px 20px transparent;
}
.miles-dot-block1 .vrt_block, .miles-dot-block3 .vrt_block, .miles-dot-block5 .vrt_block, .miles-dot-block9 .vrt_block {left:auto; right:0;}


/**WINDOW FRAME AND IMAGES WITHIN**/
.window_frame {
    width:853px;
    height:581px;
    position:relative;
    overflow: hidden;
    margin-left:-426.5px;
    left:50%;
}
.window_frame img {position:absolute;}
.window_frame #frame {z-index:10;}

.lg-image {left:15px; width:824px;}



/*** PAGE STRUCTURE***/
#wrapper {position: relative; width:960px; margin:auto; padding-bottom:250px;}
#container {}

/**SITE NAVIGATION**/
.main-nav {margin-top:42px; position:fixed;}
.main-nav li {margin-bottom:4px;}
.main-nav .home-link {cursor:pointer;}
.main-nav li a, .main-nav .home-scroll {
    width:33px;
    height:36px;
    cursor:pointer;
    display:block;
    color:#272727;
    font:16px/36px 'arial', sans-serif;
    border-radius:0 5px 5px 0;
    text-indent:-147px;
    transition: width .5s, background-position .5s, text-indent .5s;
    -webkit-transition: width .5s, background-position .5s, text-indent .5s;
}

.main-nav li a:hover, .main-nav .home-scroll:hover {padding-left:15px; text-indent:0; background-color:#e7cf75; width:auto;}

.main-nav .home-scroll {background:url('../images/miles_sprite.png') no-repeat -821px -1309px #e6e8e8;}
.main-nav .home-scroll:hover {background-position:-755px -1309px; width:90px;}

.main-nav .home-link.non-scroll a {background:url('../images/miles_sprite.png') no-repeat -821px -1309px #e6e8e8;}
.main-nav .home-link.non-scroll a:hover {background-position:-755px -1309px; width:90px; background-color:#e7cf75;}

.main-nav .home-link2 a {background:url('../images/miles_sprite.png') no-repeat -821px -1187px #e6e8e8;}
.main-nav .home-link2 a:hover {background-position:-755px -1187px; width:90px;}

.main-nav .home-link3 a {background:url('../images/miles_sprite.png') no-repeat -821px -1128px #e6e8e8;}
.main-nav .home-link3 a:hover {background-position:-655px -1128px; width:200px;}

.main-nav .home-link4 a {background:url('../images/miles_sprite.png') no-repeat -821px -1065px #e6e8e8;}
.main-nav .home-link4 a:hover {background-position:-755px -1065px; width:90px;}

.main-nav .home-link5 a {background:url('../images/miles_sprite.png') no-repeat -821px -1247px #e6e8e8;}
.main-nav .home-link5 a:hover{background-position:-726px -1247px; width:120px;}

.main-nav .active a {background-color:#e7cf75; pointer-events:none; cursor:default;}


/**BRANDING SECTION**/
#branding {
    width: 755px;
    margin:42px auto auto;
    text-align: center;
}
#branding .logo {
    display:block;
    height:248px;
    width:248px;
    margin:auto;
    background:url('../images/miles_sprite.png') no-repeat -168px -4px transparent;
}
#branding h1 {font: 65px/69px 'SanRafael', serif; margin-top:15px;}
#branding h1:before {content:open-quote; font-size:90px; padding-right:5px;}
#branding h1:after {content:close-quote; font-size:90px; padding-left:5px;}


/**SECTION 1**/
.first_section {margin-top:50px; position:relative;}
.first_section .header-photo-block {width:310px; margin: 10px auto auto;}
.first_section .header-photo-block span {
    width:145px;
    height:251px;
    display: block;
    background:url('../images/miles_sprite.png') no-repeat 0 0 transparent;
}
.first_section .header-photo-block .baby-image {display:block; position:relative; z-index:-1; margin:21px 0 0 2px;}
.first_section .header-photo-block .miles-baby {float:left;}
.first_section .header-photo-block .miles-baby .baby-image {background:url('../images/sep-images/jaymie_baby.png') no-repeat 0 0 transparent;}
.first_section .header-photo-block .jaymie-baby {float:right;}
.first_section .header-photo-block .jaymie-baby .baby-image {background:url('../images/sep-images/miles_baby.png') no-repeat 0 0 transparent;}
.first_section .first_section_copy {width:280px; position:absolute; text-align: center; margin:265px 0 0 -140px; left:50%; z-index:10;}
.first_section .first_section_copy p span {font: 42px 'SanRafael', serif; color:#e6e8e8; position:relative; display: block;}


/**SECTION 2**/
.second_section {overflow:hidden; width:100%; padding-top:50px; text-align:center;}
.second_section .window_frame #image-2-1 {top:-835px;}
.second_section .window_frame #image-2-2 {left:0; bottom:20px; z-index:5;}
.second_section .window_frame #image-2-3 {right:0; bottom:16px; z-index:5;}
.second_section .window_frame #image-2-4 {bottom:16px; left:350px;}


/**SECTION 3**/
.third_section {position:relative;}
.third_section .info-box.small {top:160px;}


/**SECTION 4**/
.fourth_section {overflow:hidden; width:100%; padding-top:50px; text-align:center;}
.fourth_section .window_frame #image-4-1 {top:-835px;}
.fourth_section .window_frame #image-4-2 {left:0; bottom:60px;}
.fourth_section .window_frame #image-4-3 {right:0; bottom:0;}


/**SECTION 5**/
.fifth_section {position:relative;}
.fifth_section .info-box.small {top:170px;}


/**SECTION 6**/
.sixth_section {overflow:hidden; width:100%; padding-top:50px; text-align:center;}
.sixth_section .window_frame #image-6-1 {top:-300px;}
.sixth_section .window_frame #image-6-2 {bottom:-900px; z-index:1;}
.sixth_section .window_frame #image-6-3 {bottom:-500px; left:300px;}


/**SECTION 7**/
.seventh_section {overflow:hidden; width:100%; padding-top:50px; text-align:center;}
.seventh_section .window_frame {height:400px;}
.seventh_section .window_frame h2 {position:absolute; left:60px; top:50px; font-size:72px;}
.phone_block {display:block; height:276px; width:555px; top:40px; background:#272727; position:absolute; z-index: 5; right:298px; border-radius: 0 96px 96px 0;}
.sixth_section .window_frame #image-7-1 {}
.sixth_section .window_frame #image-7-2 {}


/**SECTION 8**/
.eighth_section {overflow:hidden; width:100%; padding-top:50px; text-align:center;}
.eighth_section .window_frame #image-8-1 {z-index:5; top:-349px;}
.eighth_section .window_frame #image-8-2 {left:300px; bottom:-505px;}



/**SECTION 9**/
.ninth_section {
    position:relative;
    height:275px;
    width:180px;
    margin: 25px auto auto;

}
.ninth_section h2 {position:absolute; left:67px; z-index: 3;}
.ninth_section .unity-icon {
    width:78px;
    height:79px;
    position:relative;
    left:50%;
    margin-left:-39px;
    z-index:2;
    background:url('../images/miles_sprite.png') no-repeat -331px -337px #272727;

}
.ninth_section .dot-vert {
    position:absolute;
    top:0;
    left:85px;
    height:200px;
    width:5px;
    background:url('../images/sep-images/dotted_line.png') no-repeat -5px -12px transparent;

}
.ninth_section .vert-block {
    display: block;
    height:200px;
    width:5px;
    top:0;
    left:85px;
    z-index:1;
    background-color:#272727;
}


/**SECTION 10**/
.tenth_section {overflow:hidden; width:100%; height:324px; text-align:center; position:relative; z-index:5;  background-color:#272727;}
.tenth_section .copy {position:relative; z-index:10;}
.tenth_section .window_frame {height:266px; margin-top:-85px;}
.tenth_section .window_frame #image-10-1 {z-index:5;}
.tenth_section .window_frame #image-10-2 {left:20px; top:-138px;}
.tenth_section .window_frame #image-10-3 {left:296px; bottom:-133px;}
.tenth_section .window_frame #image-10-4 {right:37px; top:-138px;}


/**SECTION 11**/
.eleventh_section {position:relative; height:670px; margin-top:-80px;}
.eleventh_section .unity-icon {
    width:78px;
    height:79px;
    top:0;
    position:relative;
    z-index: 2;
    left:50%;
    margin-left:-39px;
    background:url('../images/miles_sprite.png') no-repeat -331px -337px #272727;

}
.eleventh_section .vert-block {
    display: block;
    height:300px;
    width:5px;
    top:0;
    left:50%;
    margin-left:-2.5px;
    z-index:1;
    position: absolute;
    background-color:#272727;
}

.eleventh_section .dots {
    width:5px;
    height:280px;
    display:block;
    position:absolute;
    top:-4px;
    left:50%;
    margin:15px 0 0 -2.5px;
    background:url('../images/sep-images/dotted_line.png') no-repeat -5px -12px transparent;

}
.eleventh_section .info-box.small {
    top:230px;
    left:50%;
    margin-left:-111px;
    background-color:#272727;
    position: relative;
    z-index: 5;
}

/**SECTION 12**/
.twelfth_section {position:relative; text-align: center;}
.twelfth_section h2 {color:#fff; font-size:120px;}
.twelfth_section #image-12-3 {top:-400px;}

/**SECTION 13**/
.thirteenth_section {padding-top:150px; position:relative; text-align: center;}
.thirteenth_section .copy h2 {color:#fff;}
.thirteenth_section #image-13-1 {top:-600px;}
.cabo_title {font-size:120px; position:absolute; top:-125px; left:170px;}



/******CABO PAGE*******/
.cabo {}
.cabo h2 {font-size:82px; padding-bottom:35px;}
.cabo h3, .details h3 {line-height: 32px; padding-top:15px;}
.cabo p {margin:5px;}
.cabo .block a, .details .copy a, .registry .copy a, .footer li a {color:#e7cf75; text-decoration: underline;}
.cabo .block a:hover, .details .copy a:hover, .registry .copy a:hover, .footer li a:hover {text-decoration: none;}
.cabo .block span {color:#e7cf75;}

.cabo .block, .details .block {width:393px; text-align: center; min-height:410px;}
.cabo .block.left, .details .block.left {float:left;}
.cabo .block.right, .details .block.right {float:right;}
.cabo .block.last {clear:both; position: relative; left:50%; margin-left:-196.5px;}

.cabo .header {width:854px; margin:42px auto;}
.cabo .section1, .cabo .section2, .cabo .section3 {padding-bottom:50px; text-align: center;}


/******WEDDING DETAILS PAGE*******/
.details {text-align: center;}
.details .header {width:854px; margin:42px auto;}
.details .copy {width:533px; margin: auto auto 80px;}
.details .copy h2, .registry .copy h2 {color:#fff;}
.details h3 {font-size:28px;}

.details .copy ul {text-align:left; padding-top:30px;}
.details .copy ul  li{padding-left:200px; font: 14px/18px 'BrandonGrotesque-Regular', serif;}
.details .copy ul  li b {font-weight: bold; font:28px/28px 'SanRafael',serif; letter-spacing:1px; color:#E7CF75;}
.details .copy ul  .date{position:absolute; padding:0;}

.copy.hotels {width:835px; height:400px; overflow:hidden;}


/******REGISTRY PAGE*******/
.registry {text-align: center;}
.registry .header {width:854px; margin:42px auto;}
.registry .block {width:700px; margin:auto;}
.registry .copy {width:225px;}
.registry .copy.left {float:left;}
.registry .copy.right {float:right;}


/******RSVP PAGE*******/
.rsvp {text-align: center;}
.rsvp h2 {font-size: 142px; margin:42px auto;}

#form1 {width:800px !important; margin:auto;}
.wufoo li {text-align:left; width:100% !important; padding-bottom:30px;}
.rsvp #form1 li span {width:50%; text-align: left; margin:0;}
.rsvp #form1 li span input  {width:95%; padding:10px 5px; background-color:transparent; font: 14px/18px 'BrandonGrotesque-Regular', serif;}
.rsvp #form1 div input  {width:100%; padding:10px 5px; background-color:transparent; font: 14px/18px 'BrandonGrotesque-Regular', serif;}
input.checkbox, input.radio {width:auto !important;}

.rsvp #form1 li .desc {color:#e6e8e8; font:18px/22px 'BrandonGrotesque-Regular', serif; text-transform: uppercase;}
.rsvp #form1 li span label {color:#e6e8e8; font:16px/20px 'BrandonGrotesque-Regular', serif;}

#saveForm {
    cursor: pointer;
    background-color:#e6e8e7 !important;
    padding:5px 35px !important;
    border:none;
    display:block;
    width:auto!important;
    font:18px/20px 'BrandonGrotesque-Regular', serif;
    border-radius:3px;
    position:relative;
    left:50%;
    margin-left:-67px;
}
#saveForm:hover {background-color:#e7cf75 !important;}












/* @license
 * MyFonts Webfont Build ID 2613903, 2013-08-01T17:50:21-0400
 *
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are
 * explicitly restricted from using the Licensed Webfonts(s).
 *
 * You may obtain a valid license at the URLs below.
 *
 * Webfont: Brandon Grotesque Regular by HVD Fonts
 * URL: http://www.myfonts.com/fonts/hvdfonts/brandon-grotesque/regular/
 * Copyright: Copyright (c) 2009 by Hannes von Doehren. All rights reserved.
 *
 * Webfont: San Rafael by Tart Workshop
 * URL: http://www.myfonts.com/fonts/tart-workshop/san-rafael/regular/
 * Copyright: Copyright (c) 2012 by Font Diner - Designed by Crystal Kluge/Tart Workshop. All rights reserved.
 *
 *
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=2613903
 * Licensed pageviews: 10,000
 *
 * © 2013 MyFonts Inc
*/


/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/27e28f");


@font-face {font-family: 'BrandonGrotesque-Regular';src: url('../fonts/27E28F_0_0.eot');src: url('../fonts/27E28F_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/27E28F_0_0.woff') format('woff'),url('../fonts/27E28F_0_0.ttf') format('truetype');}


@font-face {font-family: 'SanRafael';src: url('../fonts/27E28F_1_0.eot');src: url('../fonts/27E28F_1_0.eot?#iefix') format('embedded-opentype'),url('../fonts/27E28F_1_0.woff') format('woff'),url('../fonts/27E28F_1_0.ttf') format('truetype');}