/* Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

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, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;}
:focus {outline:0;}
body {background: #fff;line-height:1;}
ol, ul {list-style:none;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {font-weight:normal;text-align: left;}
blockquote:before, blockquote:after,
q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:0;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display:block;}

html {height:100%;}
body {height:100%;background:#999 url('../images/bg.png') center center fixed no-repeat;background-size:cover;font-family:'Quattrocento Sans',sans-serif;overflow-x:hidden;}

.clearme {clear:both;}

#slides .slide p,
#menu ul,
#slides .slide h3
{ 
	transition:all .2s linear; 
	-o-transition:all .2s linear; 
	-moz-transition:all .2s linear; 
	-webkit-transition:all .2s linear;
}

#bgcolor {position:fixed;top:0;left:0;width:100%;height:100%;background:url('../images/bg-color.jpg') center center no-repeat;background-size:cover;z-index:10;}
#bgcolor2 {display:none;}

#title {color:#fff;position:absolute;right:25px;top:25px;text-align:right;width:270px;z-index:21;text-shadow:0 0 3px rgba(0,0,0,.6);}
#title h1 {font-family:'Alex Brush',cursive;font-size:70px;display:block;line-height:.6em;}
#title h1 .and {color:#f6b811;}
#title h1 .wedding {display:block;margin:4px 0 0;font-size:70%;color:#f6b811;}
#title h2 {display:block;margin:10px 0 0;font-size:16px;letter-spacing:.08em;text-transform:uppercase;}

.credit {opacity:.8;display:inline-block;text-align:right;white-space:nowrap;position:fixed;bottom:0;right:0;padding:0 6px 6px 0;text-shadow:0 0 3px rgba(0,0,0,.6);color:#fff;font-size:11px;letter-spacing:.08em;text-transform:uppercase;}
.credit span {display:block;padding:0 4px;}
.credit a {color:#fff;text-decoration:none;padding:4px !important;}

#menu {background:rgba(248,185,0,.8) url('../images/menu-bg.png') top right no-repeat;background-size:173px 194px;width:20%;height:100%;position:fixed;left:5%;top:0;z-index:20;}
#menu ul {display:block;margin:0;text-align:right;font-size:20px;position:absolute;bottom:10%;right:0;width:100%;}
#menu li {display:block;margin:0;position:relative;}
#menu a {display:block;color:#fff;text-decoration:none;line-height:40px;padding:0 15px;}
#menu a:hover,
#menu a.active {background:#1f3c87 url('../images/menu-bg-nav.png') 0 0 repeat;/* box-shadow:0 1px 4px rgba(0,0,0,.4); */}
#menu i {display:block;width:50px;height:40px;position:absolute;top:0;right:-50px;overflow:hidden;}
#menu i span {display:block;position:absolute;width:40px;height:40px;background:url('../images/menu-icons-lt@2x.png') 0 0 no-repeat;background-size:40px 240px;left:-40px;}
#menu .us i span {background-position:0 0;}
#menu .proposal i span {background-position:0 -40px;}
#menu .ceremony i span {background-position:0 -80px;}
#menu .party i span {background-position:0 -120px;}
#menu .travel i span {background-position:0 -160px;}
#menu .registry i span {background-position:0 -200px;}

#slides {position:absolute;margin-top:10%;height:80%;width:100%;}
#slides .slide {/* background:green */;position:absolute;}
#slides .slide-wrap {position:relative;/* background:rgba(38,71,138,.8); */margin:6% 19% 8% 32%;}
#slides .slide h3 {font-family:'Alex Brush',cursive;font-size:70px;color:#26478a;text-transform:lowercase;margin:0 0 .4em -.4em;}
#slides .slide p {color:#000;line-height:1.7em;font-size:16px;font-family:'Domine',sans;margin:0 0 1em;}
#slides .slide a {color:#26478a;}

/* how we met */

#slides .slide-us .darrenandrea2 {width:35%;float:right;background:#fff;padding:1%;margin:0 0 4% 4%;
-moz-box-shadow:0 2px 4px rgba(0,0,0,.4);-webkit-box-shadow:0 2px 4px rgba(0,0,0,.4);box-shadow:0 2px 4px rgba(0,0,0,.4);
-moz-transform:rotate(9deg);-webkit-transform:rotate(9deg);-ms-transform:rotate(9deg);transform:rotate(9deg);}
@-moz-keyframes picDarDrea2 { from {transform:rotate(30deg);} to {transform:rotate(9deg);} }
@-webkit-keyframes picDarDrea2 { from {transform:rotate(30deg);} to {transform:rotate(9deg);} }
@-o-keyframes picDarDrea2 { from {transform:rotate(30deg);} to {transform:rotate(9deg);} }
@keyframes picDarDrea2 { from {transform:rotate(30deg);} to {transform:rotate(9deg);} }
.active-slide .darrenandrea2 {animation:picDarDrea2 2s;-moz-animation:picDarDrea2 2s;-webkit-animation:picDarDrea2 2s;-o-animation:picDarDrea2 2s;}

#slides .slide-us .darrenandrea4 {width:35%;float:left;background:#fff;padding:1%;margin:0 4% 4% 0;
-moz-box-shadow:0 2px 4px rgba(0,0,0,.4);-webkit-box-shadow:0 2px 4px rgba(0,0,0,.4);box-shadow:0 2px 4px rgba(0,0,0,.4);
-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg);}

/* the proposal */

#slides .slide-proposal .darrenandrea3 {width:35%;float:right;background:#fff;padding:1%;margin:0 0 4% 4%;
-moz-box-shadow:0 2px 4px rgba(0,0,0,.4);-webkit-box-shadow:0 2px 4px rgba(0,0,0,.4);box-shadow:0 2px 4px rgba(0,0,0,.4);
-moz-transform:rotate(9deg);-webkit-transform:rotate(9deg);-ms-transform:rotate(9deg);transform:rotate(9deg);}
@-moz-keyframes picDarDrea3 { from {transform:rotate(30deg);} to {transform:rotate(9deg);} }
@-webkit-keyframes picDarDrea3 { from {transform:rotate(30deg);} to {transform:rotate(9deg);} }
@-o-keyframes picDarDrea3 { from {transform:rotate(30deg);} to {transform:rotate(9deg);} }
@keyframes picDarDrea3 { from {transform:rotate(30deg);} to {transform:rotate(9deg);} }
.active-slide .darrenandrea3 {animation:picDarDrea3 2s;-moz-animation:picDarDrea3 2s;-webkit-animation:picDarDrea3 2s;-o-animation:picDarDrea3 2s;}

#slides .slide-proposal .darrenandrea1 {width:35%;float:left;background:#fff;padding:1%;margin:2% 4% 4% 0;
-moz-box-shadow:0 2px 4px rgba(0,0,0,.4);-webkit-box-shadow:0 2px 4px rgba(0,0,0,.4);box-shadow:0 2px 4px rgba(0,0,0,.4);
-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg);}


/* wedding party */

#slides .slide-party .slide-wrap {margin-right:4%;}
.slide-party ul {display:block;clear:both;}
.slide-party li {display:inline;float:left;width:12%;margin:0 2% 3% 2%;}
.slide-party li img {width:100%;padding:3%;background:#fff;margin-bottom:8%;
-moz-box-shadow:0 2px 4px rgba(0,0,0,.4);-webkit-box-shadow:0 2px 4px rgba(0,0,0,.4);box-shadow:0 2px 4px rgba(0,0,0,.4);
}
.slide-party .bridesmaids li:nth-child(1) img {-moz-transform:rotate(-2deg);-webkit-transform:rotate(-2deg);transform:rotate(-2deg);}
.slide-party .bridesmaids li:nth-child(2) img {-moz-transform:rotate(1deg);-webkit-transform:rotate(1deg);transform:rotate(1deg);}
.slide-party .bridesmaids li:nth-child(3) img {-moz-transform:rotate(3deg);-webkit-transform:rotate(3deg);transform:rotate(3deg);}
.slide-party .bridesmaids li:nth-child(4) img {-moz-transform:rotate(-2deg);-webkit-transform:rotate(-2deg);transform:rotate(-2deg);}
.slide-party .bridesmaids li:nth-child(5) img {-moz-transform:rotate(-4deg);-webkit-transform:rotate(-4deg);transform:rotate(-4deg);}
.slide-party .groomsmen li:nth-child(1) img {-moz-transform:rotate(2deg);-webkit-transform:rotate(2deg);transform:rotate(2deg);}
.slide-party .groomsmen li:nth-child(2) img {-moz-transform:rotate(-1.5deg);-webkit-transform:rotate(-1.5deg);transform:rotate(-1.5deg);}
.slide-party .groomsmen li:nth-child(3) img {-moz-transform:rotate(2.5deg);-webkit-transform:rotate(2.5deg);transform:rotate(2.5deg);}
.slide-party .groomsmen li:nth-child(4) img {-moz-transform:rotate(-3deg);-webkit-transform:rotate(-3deg);transform:rotate(-3deg);}
.slide-party .groomsmen li:nth-child(5) img {-moz-transform:rotate(1deg);-webkit-transform:rotate(1deg);transform:rotate(1deg);}
.slide-party .groomsmen li:nth-child(6) img {-moz-transform:rotate(3deg);-webkit-transform:rotate(3deg);transform:rotate(3deg);}
.slide-party .kids li:nth-child(1) img {-moz-transform:rotate(-2.5deg);-webkit-transform:rotate(-2.5deg);transform:rotate(-2.5deg);}
.slide-party .kids li:nth-child(2) img {-moz-transform:rotate(3deg);-webkit-transform:rotate(3deg);transform:rotate(3deg);}
.slide-party .kids li:nth-child(3) img {-moz-transform:rotate(-1.5deg);-webkit-transform:rotate(-1.5deg);transform:rotate(-1.5deg);}
.slide-party li {color:#26478a;font-size:1em;text-shadow:0 1px rgba(255,255,255,.4);}
.slide-party li em {display:block;margin-top:3%;color:#444;font-size:.6em;letter-spacing:.15em;text-transform:uppercase;font-family:'Domine',sans;}

/* ceremony */
.slide-ceremony {height:70%;}
.slide-ceremony .slide-wrap {height:100%;}
.slide-ceremony h4 {display:inline-block;padding:1% 2%;font-size:2em;background:rgba(255,255,255,.9);color:#F6B811;margin:2% 0 2% -2%;}
.slide-ceremony .theater {background:url('../images/mahaffey.jpg') center center no-repeat;background-size:cover;position:relative;height:100%;}
.slide-ceremony .text {position:absolute;bottom:2%;right:-2%;}
#slides .slide-ceremony .address {position:relative;display:inline-block;float:right;text-align:right;color:#fff;margin:1em 0 0;background:rgba(38,71,138,.7);padding:2% 120px 2% 5%;line-height:1.3em;font-size:1.3em;}
#slides .slide-ceremony .address img {position:absolute;display:inline;top:0;right:0;height:100%;}
#slides .slide-ceremony .link {display:inline-block;float:right;clear:right;margin-bottom:5%;}
#slides .slide-ceremony .link a {display:block;padding:6% 9%;font-size:1.2em;background:#d49b00;color:#fff;text-decoration:none;}
#slides .slide-ceremony .link a:hover {background:#b98700;}
#slides .slide-ceremony em {display:inline-block;float:right;clear:right;text-align:right;color:#fff;font-style:italic;font-size:.8em;margin-right:5%;}

/* registry */
#slides .slide-registry .slide-wrap {margin-bottom:2%;}
#slides .slide-registry ul {display:block;}
#slides .slide-registry li {display:block;}
#slides .slide-registry a {display:block;text-align:center;padding:6%;transition:all .2s linear;-o-transition:all .2s linear;-moz-transition:all .2s linear;-webkit-transition:all .2s linear;}
#slides .slide-registry a:hover {background:rgba(255,255,255,.6);transition:all .2s linear;-o-transition:all .2s linear;-moz-transition:all .2s linear;-webkit-transition:all .2s linear;}
#slides .slide-registry img {width:80%;}

/* travel */
#slides .slide-travel .slide-wrap {margin-right:8%;}
#slides .slide-travel .intro {width:80%;}
#slides .slide-travel .hotel {display:inline;float:left;width:30%;margin-right:3%;background:rgba(255,255,255,.6);}
#slides .slide-travel .hotel h4 {display:block;padding:4% 7%;margin:-3% 3% 0 -3%;color:#fff;font-size:1.2em;background:rgba(38,71,138,.8);}
#slides .slide-travel .hotel .address {padding:8%;line-height:1.2em;}
#slides .slide-travel .hotel .link a {display:block;padding:6% 9%;font-size:1em;background:#d49b00;color:#fff;text-decoration:none;}
#slides .slide-travel .hotel .link a:hover {background:#b98700;}
#slides .slide-travel .hotel .map {display:block;width:100%;}
#slides .slide-travel .hotel .map img {width:100%;}
#slides .slide-travel .reserve {line-height:1.4em;display:inline;float:left;width:30%;}
#slides .slide-travel .reserve p {font-size:.9em;line-height:1.1em;}
#slides .slide-travel .reserve .name {display:block;font-size:1.4em;}
#slides .slide-travel .reserve .company {display:block;font-size:1.4em;margin-bottom:.4em;}
#slides .slide-travel .reserve .phone {display:inline-block;background:url('../images/icon-phone.png') left no-repeat;padding:2% 0 2% 24px;}
#slides .slide-travel .reserve .email {display:inline-block;background:url('../images/icon-email.png') left no-repeat;padding:2% 0 2% 24px;text-decoration:none;}
#slides .slide-travel .reserve .email:hover {color:#d49b00;}
#slides .slide-travel .travel-air {clear:both;padding:5% 0 0;}
#slides .slide-travel .travel-air h3 {font-family:'Alex Brush',cursive;font-size:3em;display:block;text-transform:lowercase;color:#26478a;}
#slides .slide-travel .travel-air .directions {display:inline;float:left;width:100%;height:400px;background:url('../images/travel-air-map.jpg') center center no-repeat;background-size:cover;}
#slides .slide-travel .travel-air .directions h4 {display:inline-block;background:rgba(255,255,255,.8);font-size:1.2em;padding:2% 3%;margin:20px 0 0 -2%;}
#slides .slide-travel .travel-air .directions a {display:inline-block;float:right;clear:both;padding:2% 3%;margin-right:-2%;font-size:1em;background:rgba(212,156,0,.9);color:#fff;text-decoration:none;}
#slides .slide-travel .travel-air .directions a:hover {background:#b98700;}
#slides .slide-travel .travel-air .directions a span {font-family:'Domine',sans;font-size:.8em;letter-spacing:.1em;text-transform:uppercase;}
#slides .slide-travel .travel-air .directions a.vinoy {margin-top:230px;margin-bottom:10px;}
#slides .slide-travel .travel-car {clear:both;padding:5% 0 5%;}
#slides .slide-travel .travel-car h3 {font-family:'Alex Brush',cursive;font-size:3em;display:block;text-transform:lowercase;color:#26478a;}
#slides .slide-travel .travel-car .direction {display:inline;float:left;width:30%;margin-right:3%;}
#slides .slide-travel .travel-car .direction h4 {font-size:1.3em;padding:4% 7%;margin-bottom:1em;background:rgba(255,255,255,.6);border-bottom:1px solid #d49b00;}
#slides .slide-travel .travel-car .direction ol {list-style:decimal;margin:0 0 0 20px;font-family:'Domine',sans;font-size:.9em;line-height:1.3em;}
#slides .slide-travel .travel-car .direction li {margin-bottom:.8em;}

@media screen and (max-width:1060px) {
#menu ul {font-size:16px;}
.slide-party li {font-size:.8em;}
}

@media screen and (max-width:900px) {
#title h1 {font-size:50px;}
#title h2 {font-size:14px;}
#menu {left:0;width:25%;}
#menu ul {font-size:14px;}
#slides .slide p {font-size:12px;}
#slides .slide h3 {font-size:30px;}
.slide-party li {font-size:.7em;}
#slides .slide-travel .hotel {clear:both;width:100%;}
}

@media screen and (max-width:600px) {
#title {text-align:center;width:100%;right:auto;top:180px;background:rgba(0,0,0,.3);height:80px;}
#title h1 {font-size:30px;display:block;margin:18px 0 7px;}
#title h1 .wedding {display:inline;}
#title h2 {display:inline-block;font-size:14px;margin:0 4px;}

#menu {position:static;width:100%;height:auto;margin-top:260px;margin-bottom:0;margin-right:0;}
#menu ul {position:static;display:block;width:auto;background:#1f3c87;text-align:center;height:46px;padding:0 !important;}
#menu ul li {display:inline-block;float:none;margin:0;width:15%;height:46px;text-indent:-9999px;}
#menu ul li span {display:none !important;}
#menu ul li i {display:none;}
#menu ul li a {display:block;height:46px;}
#menu ul li a,
#menu ul li a:hover,
#menu ul li a.active {padding:0;background-size:30px 30px;background-repeat:no-repeat;background-position:center;margin-right:0 !important;padding-right:0 !important;padding-left:0 !important;}
#menu ul li a.active {background-color:#112e78;}
#menu ul li.us a {background-image:url('../images/icon-us.png');}
#menu ul li.proposal a {background-image:url('../images/icon-proposal.png');}
#menu ul li.ceremony a {background-image:url('../images/icon-ceremony.png');}
#menu ul li.party a {background-image:url('../images/icon-party.png');}
#menu ul li.travel a {background-image:url('../images/icon-travel.png');}
#menu ul li.registry a {background-image:url('../images/icon-registry.png');}

#bgcolor {display:none;}
#bgcolor2 {display:block;height:260px;position:absolute;top:0;left:0;width:100%;background:url('../images/bg-color.png') top right no-repeat;background-size:cover;}

#slides {position:static;height:auto;width:auto;margin-top:0;}
#slides .slide-wrap {margin:0;padding:14px;}

#slides .slide h3 {margin:0 0 12px;text-align:center;font-size:40px;}

.slide-ceremony h4 {margin:0;text-align:center;display:block;padding:6px 4px;font-size:24px;}
.slide-ceremony .text {right:0;width:100%;}
#slides .slide-ceremony .theater {height:340px;margin-bottom:20px;}
#slides .slide-ceremony .address {margin:200px 6px 0;font-size:16px;float:none;display:block;padding:6px 86px 6px 6px;}
#slides .slide-ceremony .address img {width:72px;height:auto;}
#slides .slide-ceremony .address a {color:#fff;}
#slides .slide-ceremony .link {display:block;float:none;margin-bottom:0;}
#slides .slide-ceremony .link a {padding:12px;text-align:center;margin:0 6px;}
#slides .slide-ceremony em {display:block;margin:0;text-align:center;float:none;padding:10px;margin-bottom:-47px;color:#333;}

#slides .slide-party .slide-wrap {margin-right:0;}
#slides .slide-party {text-align:center;}
#slides .slide-party li {margin:0 0 8px;width:32%;display:inline-block;float:none;font-size:.8em;margin-bottom:8px;}
#slides .slide-party li img {width:80%;height:auto;padding:3px;}

#slides .slide-travel .slide-wrap {margin-right:0;}
#slides .slide-travel .hotel h4 {margin:0;}
#slides .slide-travel .hotel {margin:0 0 10px;}
#slides .slide-travel .reserve {margin:0 0 10px;width:auto;}

#slides .slide-travel .travel-air .directions h4 {margin:0;display:block;float:none;text-align:center;}
#slides .slide-travel .travel-air .directions a {float:none;margin-right:12px;margin-left:12px;display:block;text-align:center;}

#slides .slide-travel .travel-car .direction {float:none;display:block;width:auto;}

.credit {position:static;display:block;text-align:center;margin-top:160px;}
.credit span {display:inline;}
.credit span a {display:inline;}
}

@media screen and (min-width:1200px) {
#slides .slide p {font-size:1em;}
#slides {margin-top:2%;}
.slide-party li {font-size:1.1em;}
}