/*!
 * Start Bootstrap - Full Width Pics (https://startbootstrap.com/template-overviews/full-width-pics)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-full-width-pics/blob/master/LICENSE)
 */
:root {
	--typed-font: "Sorts Mill Goudy";
    --font-family: "Sorts Mill Goudy";
    --green: #7f7d38;
}
@font-face {
    font-family: 'apothecary_serifregular';
    src: url('/fonts/apothecary-webfont.woff2') format('woff2'),
         url('/fonts/apothecary-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'rose';
    src: url('/fonts/RoseOrchardGardenBold.woff') format('woff2'),
         url('/fonts/RoseOrchardGardenBold.woff') format('woff');
}

@font-face {
    font-family: 'rose2';
    src: url('/fonts/RoseOrchardGarden.woff') format('woff2'),
         url('/fonts/RoseOrchardGarden.woff') format('woff');
}

.fontyboi {
    text-shadow: 2px 2px 2px #000000; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
}

.bg-image-full {
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.my-5 {
    margin-top: 3rem !important;
    margin-bottom: 0 !important;
}

.cursive {
    /*font-family: 'Herr Von Muellerhoff', cursive;
     */
font-family: 'rose';
font-size: 25pt;
font-weight: 300;
}

.cursive2 {
    /*font-family: 'Herr Von Muellerhoff', cursive;
     */
font-family: 'rose';
font-size: 25pt;
font-weight: bold;
}


.smollink {
    height: 1em;
}

.typed {
    font-family: var(--typed-font);
    /* text-transform: uppercase; */
}

.typed2 {
    font-family: var(--typed-font);
}

.lowercase {
    font-family: var(--typed-font);
    text-transform: lowercase;
}

.typed-small {
    font-family: var(--typed-font);
}

.navbar-brand,
.navbar-nav li a {
    padding-top: 0;
}

.nav-link {
    margin-top: 45px;
}
.page {
    transition: visibility 0s, opacity 0.75s linear;
}

#rsvp {
    display:block;
    margin: 0 auto;
}
.ff-form .ff-required {
    visibility: hidden;
}



#intro {
    background: url("/assets/lookback.jpg");
    width: 100%;
    height: 600px;
    background-repeat: no-repeat;
    background-position: 50% 70%;
    background-size: 100% auto;
    mask: linear-gradient(#000 0 0) 0% 0px / 100% calc(100% - 23px) add no-repeat, url("/assets/frame5.png") 0% calc(100%) / auto 24px repeat no-repeat;

}

#logo {
    background: url("/assets/w.png");
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: auto;
    background-position: center;
    height: 100%;
    width: 100%;
}


#logo2 {
    position: absolute;
    right: 9%;
    top: 2%;
    font-weight: 900;
    font-size: 30pt;
    text-align: right;
    text-shadow: 1px 1px rgba(255, 255, 255, 0.2);
}

body {
    /*background-color: antiquewhite;*/
    padding: 0px;
    margin: 0px;
    color: var(--green);
    font-family: var(--typed-font);
}

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

.middle {
    align-items: center;
}
.pad {
    padding: 24px;
}
.hpad {
    padding: 12px;
}


#date {
    font-size: 24pt;
}

.frame-up {
    background: url("/assets/frame2.png");
    width: 100%;
    height: 24px;
    background-size: contain;
}

.frame-down {
    background: url("/assets/frame2.png");
    width: 100%;
    height: 24px;
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    background-size: contain;
}

.pic {
    width: 100%;
    height: 300px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 40%;
}

#pic1 {
    background-image: url("/assets/pic1.jpg");
    background-position: 50% 39%;
        mask:  linear-gradient(#000 0 0) 0% 23px / 100% calc(100% - 46px) add no-repeat, url("/assets/frame5.png") 0% 100% / auto 24px repeat no-repeat,url("/assets/frame6.png") 0% 0% / auto 24px repeat no-repeat;

}

#pic2 {
    background-image: url("/assets/pic2.png");
       mask:  linear-gradient(#000 0 0) 0% 23px / 100% calc(100% - 46px) add no-repeat, url("/assets/frame5.png") 0% 100% / auto 24px repeat no-repeat,url("/assets/frame6.png") 0% 0% / auto 24px repeat no-repeat;

}

#pic3 {
    background-image: url("/assets/flower.jpg");
    height: 300px;
    background-position: 50% 47%;
    background-position: 50% 50%;
        mask:  linear-gradient(#000 0 0) 0% 23px / 100% calc(100% - 46px) add no-repeat, url("/assets/frame5.png") 0% 100% / auto 24px repeat no-repeat,url("/assets/frame6.png") 0% 0% / auto 24px repeat no-repeat;
}

#dateheading {
    background-image: url("/assets/terrain.jpg");
    background-position: 50% 63%;
    background-size: 100vw auto;
    height: 150px;
    mask:  linear-gradient(#000 0 0) 0% 23px / 100% calc(100% - 46px) add no-repeat, url("/assets/frame5.png") 0% 100% / auto 24px repeat no-repeat,url("/assets/frame6.png") 0% 0% / auto 24px repeat no-repeat;
}

#dateheading .cursive, #dateheading .cursive2 {
    font-size: 60pt;
    width: 1.2em;
}

.frame-left {
    background: url("/assets/frame1.png");
    height: 360px;
    width: 240px;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 0;
    margin-top: -120px;
}

.frame-right {
    background: url("/assets/frame1.png");
    height: 360px;
    width: 240px;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: 0;
    margin-top: -120px;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

#pfpholder {
    /*display: flex;*/
    /*margin-left: 10%;*/
    margin-top: 128px;
    margin-bottom: 32px;
}

#pfp {
    height: 300px;
    width: 250px;
    background-repeat: no-repeat;
    background-size: contain; 
    border-radius: 50%;
    object-fit: cover;
    margin-top: -60px;
}

#rose {
    height: 200px;
    width: auto;
}

#motif {
    width: 190px;
    height: auto;
}

.left {
    text-align: left;
}

.sixty {
    width: 60%;
    text-align: center;
}

.forty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40%;
    flex-wrap: wrap
}

.twenty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    flex-wrap: wrap
}


.frame-cut {
    background: url("/assets/frame3.png");
    width: 100%;
    height: 24px;
    margin-top: -24px;
    background-size: contain;
    background-blend-mode: multiply;
}

#map {
    width: 90%;
    height: auto;
}

.flex {
    display: flex;
    flex-wrap: wrap
}

.inset {
    max-width: 80%;
    margin: auto;
}

.break {
    height: 0;
    flex-basis: 100%;;
}

.seventy {
    width: 70%;
    text-align: center;
}

.thirty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30%;
    flex-wrap: wrap
}

.big {
    font-size: 18pt;
}

.bigger {
    font-size: 36pt;
}

.narrow {
    max-width: 60%;
    margin-left: 19%;
}

#background {
    background-image: url("/assets/background.jpeg");
    background-size: cover;
    position: fixed;
    left: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1000;
}

.hotel {
    width: 70%;
    height: auto;
}

.navlink {
    color: var(--green);
    text-decoration: none;
    font-size: 18pt;
    padding: 0 12px;
}

.navflex {
    justify-content: space-evenly;
}

.colon {
    font-size: 50pt;
}

.ind {
    font-size: 12pt;
    display: block;
}