/************************/
/*                      */
/*        Global        */
/*                      */
/************************/

html,
button,
input,
select,
textarea {
    color: #222;
}

a {
    text-decoration: underline;
}

a:hover {
    filter: alpha(opacity=90);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

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

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

body {
    font-family: 'IM Fell DW Pica', serif;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: 1px;
    background: #fff url(../img/bg-paper_texture.jpg);
    color: #232323;
    padding-bottom: 200px;
}

h1 {
    font-family: 'Fredericka the Great', cursive;
    font-size: 46px;
    font-size: 3.28571rem;
    margin: 30px 0 40px;
}

h2 {
    font-family: 'Fredericka the Great', cursive;
    font-size: 28px;
    font-size: 1.75rem;
    margin: 70px 0;
    text-align: center;
}

h3{
    font-family: 'Fredericka the Great', cursive;
    font-size: 22px;
    font-size: 1.5rem;
    margin: 0;
}

h4,
h5,
h6 {
    font-family: 'IM Fell DW Pica SC', serif;
    font-weight: 300;
}

strong {
    color: #000;
    text-decoration: underline;
}

.clear {
    clear: both;
}

.align-center {
    text-align: center;
}

.pad-top {
    padding-top: 10px;
}

.double-pad-top {
    padding-top: 20px;
}

.color-grey {
    color: #6f6f6f;
}

/************************/
/*                      */
/*         Grid         */
/*                      */
/************************/

.row
{
	clear: both;
	width: 100%;
}

.row:after
{
	content: " ";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}

.column,.whole,.wholes,.whole.one,.wholes.one,.half,.halves,.half.one,.halves.one,.half.two,.halves.two,.third,.thirds,.third.one,.thirds.one,.third.two,.thirds.two,.third.three,.thirds.three,.fourth,.fourths,.fourth.one,.fourths.one,.fourth.two,.fourths.two,.fourth.three,.fourths.three,.fourth.four,.fourths.four
{
	float: left;
	position: relative;
	min-height: 1px;
}

.whole,.wholes { width: 100%; }
.whole.one,.wholes.one { width: 100%; }
.half,.halves { width: 50%; }
.half.one,.halves.one { width: 50%; }
.half.two,.halves.two { width: 100%; }
.half.right-one,.halves.right-one { left: 50%; }
.half.left-one,.halves.left-one { right: 50%; }
.half.skip-one,.halves.skip-one { margin-left: 50%; }
.third,.thirds { width: 33.33333%; }
.third.one,.thirds.one { width: 33.33333%; }
.third.two,.thirds.two { width: 66.66667%; }
.third.three,.thirds.three { width: 100%; }
.third.right-one,.thirds.right-one { left: 33.33333%; }
.third.left-one,.thirds.left-one { right: 33.33333%; }
.third.skip-one,.thirds.skip-one { margin-left: 33.33333%; }
.third.right-two,.thirds.right-two { left: 66.66667%; }
.third.left-two,.thirds.left-two { right: 66.66667%; }
.third.skip-two,.thirds.skip-two { margin-left: 66.66667%; }
.fourth,.fourths { width: 25%; }
.fourth.one,.fourths.one { width: 25%; }
.fourth.two,.fourths.two { width: 50%; }
.fourth.three,.fourths.three { width: 75%; }
.fourth.four,.fourths.four { width: 100%; }
.fourth.right-one,.fourths.right-one { left: 25%; }
.fourth.left-one,.fourths.left-one { right: 25%; }
.fourth.skip-one,.fourths.skip-one { margin-left: 25%; }
.fourth.right-two,.fourths.right-two { left: 50%; }
.fourth.left-two,.fourths.left-two { right: 50%; }
.fourth.skip-two,.fourths.skip-two { margin-left: 50%; }
.fourth.right-three,.fourths.right-three { left: 75%; }
.fourth.left-three,.fourths.left-three { right: 75%; }
.fourth.skip-three,.fourths.skip-three { margin-left: 75%; }


/************************/
/*                      */
/*      Cody & Jen      */
/*                      */
/************************/

.container {
    position: relative;
    width: 746px;
    margin: 0 auto;
    box-sizing: border-box;
}

.container section {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding:90px 0 0 0;
}

.container section.separator {
    height: 200px;
}

.container section.separator > img {
    position: absolute;
}

.wrapper {
    position: relative;
}

    .wrapper > p {
        padding: 0 20px;
    }

    .wrapper .item {
        width: 400px;
        position: absolute;
        z-index: 2;
    }

    .wrapper .item.left {
        left: 10px;
    }

    .wrapper .item.right {
        left: 350px;
    }

        .wrapper .item h3 {
            text-align: center;
        }

        .wrapper .item p {
            text-align: left;
            padding: 0 10px;
        }

#gatekeeper {
    width: 440px;
    margin: 0 auto;
    padding: 70px 260px;
}

    #gatekeeper input[type="password"] {
        display: inline-block;
        width: 330px;
    }

    #gatekeeper input[type="submit"] {
        display: inline-block;
    }


#home, #uninvite {
    position: relative;
    height: 820px;
    z-index: 1;
}

    #home .image {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: 1;
    }

    #home h1 {
        position: absolute;
        top: 40px;
        left: 0;
        margin-top: 0;
        text-indent: -9999px;
        z-index: 2;
        background: url('../img/illustration/logo.png?nocache=11111') no-repeat;
        background-position: center center;
        height: 538px;
        width: 746px;
    }
   
    #home .date-countdown {
        position: absolute;
        top: 640px;
        width: 600px;
        left: 73px;
    }

        .date-countdown > div {
            float: left;
            text-align: center;
            width: 25%;
        }

        .date-countdown > div .simply-amount {
            font-size: 50px;
            line-height: 60px !important;
            text-transform: uppercase;
            font-family: 'Fredericka the Great', cursive;
            color: #010101;
        }
        
        .date-countdown > div .simply-word {
            display: block;
            font-family: 'Fredericka the Great', cursive;
            text-transform: uppercase;
            font-size: 16px;
            letter-spacing: .2em;
            color: #6f6f6f;
        }

h2.banner{
    background-image: url(../img/illustration/banners.png?nocache=111111);
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    height: 200px;
    width: 746px;
    margin: 10px auto 30px auto;
    text-indent: -10000px;
}

#poem {
    padding: 100px 0 75px 0;
}

    #poem .poem-frame {
        width: 820px;
        height: 590px;
        margin: 0 -35px;
        background-image: url(../img/illustration/frame-1.png);
        background-repeat: no-repeat;
        background-position: top center;    
    }

    #poem .poem {
        padding: 130px 0 0 0;
        color: #010101;
        line-height: 1.1;
        font-size: 28px;
        text-align: center;
    }


#our-story {
    position: relative;
}

#our-story .wrapper {
    height: 2550px;
}

    #our-story h2.banner {
        background-position: 0 0;
        height: 150px;
    }

    #our-story .polaroid {
        position: absolute;
        width: 283px;
        height: 428.5px;
        background-size: contain;
        background-repeat: no-repeat;
    }

    #our-story-polaroid-0 {
        top:300px;
        right:50px;
        background-image: url(../img/polaroids/polaroid-0.png);
    }

    #our-story-polaroid-1 {
        top:975px;
        left:50px;
        background-image: url(../img/polaroids/polaroid-1.png);
    }

    #our-story-polaroid-2 {
        top:1550px;
        right:50px;
        background-image: url(../img/polaroids/polaroid-2.png);
    }

    #our-story-polaroid-3 {
        top:2150px;
        left:50px;
        background-image: url(../img/polaroids/polaroid-3.png);
    }

    #our-story-2018 {
        top: 250px;
    }

    #our-story-2019 {
        top: 950px;
    }

    #our-story-jan-2020 {
        top: 1600px;
    }

    #our-story-oct-2020 {
        top: 2150px;
    }


#location {
    height: auto;
}

    #location h2.banner {
        background-position: 0 -150px;
    }

    #location .map {
        float: right;
        width: 420px;
        height: 420px;
        margin: 0 20px;
    }

#festivities {
    position: relative;
}

    #festivities h2.banner{
        background-position: 0 -550px;
    }

    #festivities .wrapper {
        height: 3950px;
    }

    #festivities .trail {
        background-image: url(../img/bg-trail.png);
        background-repeat: no-repeat;
        background-size: 100%;
        overflow: hidden;
        position: absolute;
        top: 560px;
        left: 130px;
        width: 558px;
        height: 3387px;
        z-index: 1;
    }

    #festivities .festivities-preamble {
        margin-top: -40px;
        text-align: center;
    }

    #festivities .festivities-banner{
        position: absolute;
        background-image: url(../img/illustration/banners-festivities.png);
        width: 664px;
        z-index: 2;
    }

    #festivities .festivities-illustration{
        position: absolute;
        background-image: url(../img/illustration/illustrations-festivities.png);        
        z-index: 2;
    }

    #festivities .festivities-event{
        position: absolute;
        font-family: 'IM Fell DW Pica SC', serif;
        font-size: 24px;
        text-align: center;
        z-index: 2;
    }

    #festivities-welcome {
        background-position: 0 0;
        height: 200px;
        top: 310px;
        left: 0px;
    }

    #festivities-friday {
        background-position: 0 -200px;
        height: 150px;
        top: 580px;
        left: 40px;
    }

    #festivities-leaf-peeping-illustration {
        background-position: 0 0;
        height: 353px;
        width: 273px;
        top: 740px;
        left: 180px;
    }

    #festivities-leaf-peeping-event {
        width: 100px;
        top: 910px;
        left: 600px;
    }

    #festivities-bonfire-dinner-illustration {
        background-position: -272px 0;
        height: 353px;
        width: 494px;
        top: 1050px;
        left: 250px;
    }

    #festivities-bonfire-dinner-event {
        width: 160px;
        top: 1060px;
        left: 0px;
    }

    #festivities-saturday {
        background-position: 0 -350px;
        height: 150px;
        top: 1480px;
        left: 50px;
    }

    #festivities-breakfast-illustration {
        background-position: -643px -700px;
        height: 250px;
        width: 350px;
        top: 1600px;
        left: 140px;
    }

    #festivities-breakfast-event {
        width: 180px;
        top: 1680px;
        left: 580px;
    }

    #festivities-yoga-illustration {
        background-position: 0 -350px;
        height: 240px;
        width: 300px;
        top: 1890px;
        left: 420px;
    }

    #festivities-yoga-event {
        width: 100px;
        top: 1980px;
        left: 230px;
    }

    #festivities-ceremony-illustration {
        background-position: -300px -353px;
        height: 325px;
        width: 420px;
        top: 2140px;
        left: 150px;
    }

    #festivities-ceremony-event {
        width: 160px;
        top: 2150px;
        left: 600px;
    }

    #festivities-feasting-illustration {
        background-position: 0 -700px;
        height: 320px;
        width: 315px;
        top: 2560px;
        left: 300px;
    }

    #festivities-feasting-event {
        width: 100px;
        top: 2560px;
        left: 50px;
    }

    #festivities-festivities-illustration {
        background-position: -312px -700px;
        height: 328px;
        width: 320px;
        top: 2810px;
        left: 25px;
    }

    #festivities-festivities-event {
        width: 150px;
        top: 2930px;
        left: 450px;
    }

    #festivities-sunday {
        background-position: 0 -500px;
        height: 250px;
        top: 3130px;
        left: -50px;

    }

    #festivities-brunch-illustration {
        background-position: -780px 0;
        height: 470px;
        width: 210px;
        top: 3280px;
        left: 525px;
    }

    #festivities-brunch-event {
        width: 150px;
        top: 3500px;
        left: 270px;
    }

    #festivities-farewell {
        background-position: 0 -750px;
        height: 200px;
        top: 3780px;
        left: 0;
    }


#travel {
    height: auto;
}

    #travel h2.banner{
        background-position: 0 -350px;
    }

    #travel .img {
        float: right;
        background-image: url(../img/illustration/holstein.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 375px;
        height: 273.5px;
    }

#accommodations {
    height: auto;
}

    #accommodations h2.banner {
        background-position: 0 -750px;
    }

    #accommodations .img {
        float: none;
        background-image: url(../img/illustration/grafton-inn.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 600px;
        height: 460px;
        margin: 0 auto;
    }

#registry {
    height: auto;
}

    #registry h2.banner {
        background-position: 0 -950px;
        height: 150px;
    }

    #registry .links {
        overflow: hidden;
        width: 600px;
        margin: 40px auto;
    }

    #registry .links div {
        float: left;
        width: 50%;
        text-align: center;
    }

    #registry .links a {
        display: inline-block;
        width: 128px;
        height: 128px;
        background-size: contain;
        background-repeat: no-repeat;
        text-indent: -10000px;
    }

    #registry .links a.zola{
        background-image: url(../img/zola.png);
    }

    #registry .links a.heath-ceramics{
        background-image: url(../img/heath-ceramics.png);
    }

#rsvp {
    height: auto;
}

    #rsvp h2.banner {
        background-position: 0 -1100px;
    }

    #rsvp div {
        font-size: 25px;
        line-height: 2;
    }

    #rsvp input, #rsvp select {
        font-size: 20px;
    }

    #rsvp input[type="text"],
    #rsvp input[type="email"] {
        background: transparent;
        border-color: #010101;
        border-style: solid;
        border-width: 0 0 1px 0;
        padding-left: 5px;
        padding-right: 5px; 
        text-align: center;
        width: 220px;
    }

    /* #rsvp input[type="text"]:invalid,
    #rsvp input[type="email"]:invalid,
    #rsvp select:invalid {
        border-color: #9b2121;
    } */

#navigation {
    position: absolute;
    top: 780px;
    width: 100%;
    height: 81px;
    line-height: 81px;
    background:rgba(76, 121, 153, 0.9);
    z-index: 3;
}

    #navigation ul {
        overflow: hidden;
        text-align: center;
        margin: 0 auto;
        padding: 0;
    }

        #navigation ul li {
            display: inline;
            margin-right: 30px;
        }

        #navigation ul li.last {
            margin: 0;
        }

    #navigation a {
        font-family: 'IM Fell DW Pica', serif;
        /* text-transform: uppercase; */
        text-decoration: none;
        color: #010101;
        font-size: 32px;
        letter-spacing: 1px;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
    }

    #navigation a:hover,
    #navigation li.active a  {
        color: #fff;
    }

#footer .img {
    width: 750px;
    height: 766px;
    background-image: url(../img/illustration/covered-bridge-footer.png);
    background-size: contain;
    background-repeat: no-repeat;
}

#page-not-found {
    text-indent: -10000px;
    margin: 80px auto;
    width: 750px;
    height: 506px;
    background-image: url(../img/polaroids/soiree-404.png);
    background-size: contain;
    background-repeat: no-repeat;
}

@media print {
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a,
    a:visited {
        text-decoration: underline;
    }
    a[href]:after {
        content: " (" attr(href) ")";
    }
    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }
    pre,
    blockquote {
        border: 1px solid #999999;
        page-break-inside: avoid;
    }
    thead {
        display: table-header-group;
    }
    tr,
    img {
        page-break-inside: avoid;
    }
    img {
        max-width: 100% !important;
    }
    @page {
        margin: 0.5cm;
    }
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }
    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* responsive */

/*
@media only screen and (max-width: 730px) {
    #home {

    }
}

@media screen and (max-width: 768px) {
  .date-countdown > div {
    width: 50%;
  }
}

@media screen and (max-width: 480px) {
  .date-countdown > div {
    width: 100%;
  }
}
*/