/*
    Wedding Colors:
    Navy: #000032
    Gold: #C8B44B
*/

@font-face {
    font-family: my_Lucida;
    src: url('/app-data/Lucida.ttf') format('truetype'),
         url('/app-data/Lucida.woff') format('woff');
}

@font-face {
    font-family: my_Agency;
    src: url('/app-data/Agency.ttf') format('truetype'),
         url('/app-data/Agency.woff') format('woff');
}

@font-face {
    font-family: my_Showcard;
    src: url('/app-data/Showcard.ttf') format('truetype'),
         url('/app-data/Showcard.woff') format('woff');
}

@font-face {
    font-family: my_LucidaSans;
    src: url('/app-data/LucidaSans.ttf') format('truetype'),
         url('/app-data/LucidaSans.woff') format('woff');
}

body {
    background-image: url('/images/backgroundimg.JPG');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    margin: 0px;
}

#content {
    float: right;
    width: 450px;
    margin-left: 45%;
    position: absolute;
    margin-top: 70px;
    text-align: center;
    font-size: 30px;
    font-family: 'Script MT';
    color: #000032;
}

p {
    display: inline;
}

#headtext1 {
    font-family: 'my_Agency';
    font-weight: bold;
    font-size: 36px;
    letter-spacing: .018em;
}

#invitetext {
    letter-spacing: -0.02em;
    font-family: my_Lucida;
}

#celebratetext {
    font-size: 50px;
    font-family: 'my_Showcard';
    color: #C8B44B;
    letter-spacing: .24em;
}

#goldtext {
    color: #C8B44B;
}

#datetext {
    color: white;
    letter-spacing: -0.08em;
    font-family: my_Lucida;
}

#maintext {
    font-family: 'my_Lucida';
    font-size: 24px;
    color: #000032;
    font-weight: bold;
}

h1 {
    display: inline;
    font-size: 30px;
}

h2 {
    display: inline;
    font-size: 30px;
}

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: left;
    color: white;
    font-family: 'my_LucidaSans';
    font-weight: bold;
    font-size: x-small;
}

#footer a {
    color: white;
    font-family: 'my_LucidaSans';
    font-weight: bold;
    font-size: x-small;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
    font-family: 'my_Lucida';
    font-size: 18px;
    font-weight: bold;
	color: white;
	background: #000032;
	text-align: center;
	padding: 8px;
	display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}

@media screen and (min-width:900px) {
    body {
        background-image: url('/images/backgroundimg.JPG');
    }
    
    #navigation {
        width: 900px;
        margin-right: auto;
        margin-left:auto;
    }

    #navigation ul {
        list-style-type: none;
        font-family: 'my_Lucida';
        font-size: small;
        padding: 0px;
        margin: 0 auto;
        text-align: center;
        font-weight: bold;
    }

    #navigation li {
        padding: 5px 13px 5px 13px;
        display: inline-block;
    }

    #navigation li a {
        color: #000032;
        text-decoration: none;
        font-weight: bold;
    }

    #navigation li a:hover {
        color: #C8B44B;
    }
}

@media screen and (max-width:900px) and (min-width:540px) {
    body {
        background-image: url('/images/backgroundimg.JPG') !important;
    }

    #navigation {
        width: 540px;
        margin-right: auto;
        margin-left:auto;
    }

    #navigation ul {
        font-family: 'my_Lucida';
        font-size: medium;
        padding: 0px;
        margin: 0 auto;
        text-align: center;
    }

    #navigation li {
        padding: 4px 18px 2px 18px;
        display: inline-block;
    }

    #navigation li a {
        color: #000032;
        text-decoration: none;
        font-weight: bold;
    }

    #navigation li a:hover {
        color: #C8B44B;
    }

    #content {
        float: right;
        width: 320px;
        margin-left: 40%;
        position: absolute;
        margin-top: 40px;
        text-align: justify;
        text-align-last: justify;
        text-justify: distribute;
        font-size: 20px;
        font-family: 'Script MT';
        color: #000032;
    }

    #headtext1 {
        font-family: 'my_Agency';
        font-weight: bold;
        font-size: 25px;
    }

    #celebratetext {
        font-size: 35px;
        font-family: 'my_Showcard';
        color: #C8B44B;
        letter-spacing: .25em;
    }
}

@media screen and (max-width:540px) {
    #navigation ul {
        font-family: 'my_Lucida';
        font-size: 18px;
        padding: 0px;
        margin: 0px;
        text-align: center;
        display: none;
        position: static;
    }

    #navigation li {
        display: block;
        background-color: grey;
        z-index: 2;
        position: relative;
    }

    #navigation li a {
        color: white;
        text-decoration: none;
        font-weight: bold;
        display: block;
        padding: 10px;
    }

    #navigation li a:hover {
        background-color: #C8B44B;
    }
    
    /*Display 'show menu' link*/
	.show-menu {
		display: block;
    }

    #mobilemenuicon {
        background-color: white;
        border-radius: 2px 2px 2px 2px;
        height: 3px;
        margin-top: 4px;
        width: 25px;
    }

    #mobilemenuiconwrapper {
        display: inline;
        float: left;
    }

    body {
        background-image: url('/images/backgroundimgmobile.JPG');
        height: 100%;
    }

    #content {
        width: 86%;
        /*float: right;
        width: 200px;
        margin-left: 45%;*/
        margin: 0px;
        padding: 4% 7% 0% 7%;
        position: fixed;
        top: 40px;
        text-align: justify;
        text-align-last: justify;
        text-justify: distribute;
        font-size: 24px;
        font-family: 'Script MT';
        color: #000032;
        z-index: 1;
    }

    #footer {
        color: black;
        position: relative;
        clear: both;
        text-align: center;
    }

    #footer a {
        color: black;
    }

    #headtext1 {
        font-family: 'my_Agency';
        font-weight: bold;
        font-size: 30px;
    }

    #celebratetext {
        font-size: 40px;
        font-family: 'my_Showcard';
        color: #C8B44B;
        letter-spacing: .14em;
    }
}

/*Targets mobile phones (Samsung Galaxy S6)*/
@media screen and (max-device-width:540px) and (-webkit-min-device-pixel-ratio:1.01) and (orientation:portrait){
    html {
        height: 100%;
    }

    body {
        background-image: url('/images/backgroundimgmobile.JPG');
        height: 100%;
        background-color: white;
    }

    #navigation {
        margin: 0px;
        width: 100%;
        background-color: yellow;
    }

    .show-menu {
        font-size: 50px;
        padding: 20px;
    }

    #mobilemenuicon {
        background-color: white;
        border-radius: 4px;
        height: 6px;
        margin-top: 8px;
        width: 50px;
    }

    #mobilemenuiconwrapper {
        display: inline;
        float: left;
        padding: 8px;
    }

    #navigation ul {
        font-family: 'my_Lucida';
        font-size: 50px;
        padding: 0px;
        margin: 0px;
        text-align: center;
        display: none;
        /*list-style-type: none;*/
        position: static;
        z-index: 2;
    }

    #navigation li {
        display: block;
        background-color: grey;
        z-index: 2;
        position: relative;
    }

    #navigation li a {
        color: white;
        text-decoration: none;
        font-weight: bold;
        display: block;
        padding: 20px;
    }

    /*Display 'show menu' link*/
	.show-menu {
		display:block;
	}

    #content {
        width: 86%;
        margin: 0px;
        padding: 4% 7% 0% 7%;
        position: fixed;
        top: 6%;
        z-index: 1;
        font-size: 50px;
        font-family: 'my_Lucida';
        color: #000032;
    }

    #headtext1 {
        font-family: 'my_Agency';
        font-weight: bold;
        font-size: 66px;
        letter-spacing: 0em;
    }

    #invitetext {
        letter-spacing: .06em;
        font-size: 48px;
    }
    
    #celebratetext {
        font-size: 96px;
        font-family: 'my_Showcard';
        color: #C8B44B;
        letter-spacing: .17em;
    }

    #datetext {
        color: white;
        font-size: 46px;
        letter-spacing: 0em;
    }

    #footer {
        color: black;
        position: relative;
        clear: both;
        font-size: 25px;
        text-align: center;
    }

    #footer a {
        font-size: 25px;
        color: black;
    }

/*    h1 {
        font-size: 30px !important;
    }*/

    .imageclass {
        border-radius: 15px;
        margin: 10px 0px;
        width: 700px;
    }
}

/*targets samsung galaxy s6 landscape*/
@media screen and (max-device-height:700px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:1.01) {
html {
    height: 100%;
}

body {
    background-image: url('/images/backgroundimg.JPG');
    height: 100%;
}

    #navigation {
        width: 900px;
        margin-right: auto;
        margin-left:auto;
    }

    #navigation ul {
        font-family: 'my_Lucida';
        font-size: 25px;
        padding: 0px;
        margin: 0 auto;
        text-align: center;
    }

    #navigation li {
        padding: 4px 16px 2px 16px;
        display: inline-block;
    }

    #navigation li a {
        color: #000032;
        text-decoration: none;
        font-weight: bold;
    }

    #content {
        float: right;
        width: 500px;
        margin-left: 40%;
        position: absolute;
        margin-top: 100px;
        text-align: center;
        font-size: 32px;
        font-family: 'my_Lucida';
        color: #000032;
    }

    #headtext1 {
        font-family: 'my_Agency';
        font-weight: bold;
        font-size: 37px;
    }

    #invitetext {
        letter-spacing: .01em;
    }
    
    #celebratetext {
        font-size: 60px;
        font-family: 'my_Showcard';
        color: #C8B44B;
        letter-spacing: .17em;
    }

    #datetext {
    color: white;
    font-size: 29px;
    letter-spacing: 0em;
    }

    #footer {
        font-size: 20px;
    }

    #footer a {
        font-size: 20px;
    }
}

/*Targets tablets*/
@media screen and (min-device-width:540px) and (max-device-width:900px) and (-webkit-min-device-pixel-ratio:1.01) {
    /*body {
        background-image: url('/images/backgroundimgmobile.JPG');
    }*/

    #navigation {
        width: 900px;
        margin-right: auto;
        margin-left:auto;
    }

    #navigation ul {
        font-family: 'my_Lucida';
        font-size: 26px;
        padding: 0px;
        margin: 0 auto;
        text-align: center;
    }

    #navigation li {
        padding: 4px 16px 2px 16px;
        display: inline-block;
    }

    #navigation li a {
        color: #000032;
        text-decoration: none;
        font-weight: bold;
    }

    #content {
        float: right;
        width: 500px;
        margin-left: 40%;
        position: absolute;
        margin-top: 120px;
        text-align: center;
        font-size: 30px;
        font-family: 'my_Lucida';
        color: #000032;
    }

    #headtext1 {
        font-family: 'my_Agency';
        font-weight: bold;
        font-size: 35px;
    }

    #invitetext {
        letter-spacing: .01em;
    }
    
    #celebratetext {
        font-size: 60px;
        font-family: 'my_Showcard';
        color: #C8B44B;
        letter-spacing: .13em;
    }

    #datetext {
        color: white;
        font-size: 28px;
        letter-spacing: 0em;
    }

    #footer {
        font-size: 20px;
    }

    #footer a {
        font-size: 20px;
    }
}

/*Targets Print Formatting for SEO*/
@media print {

}