/* whole page */
h2 {
    color: #b09e90;
    font-family: eb-garamond, serif;
    font-size: 20vw;
    font-style: normal;
    font-weight: 1000;
    letter-spacing: .5vw;
}

h3 {
    color: #495155;
    font-family: eb-garamond, serif;
    font-size: 4vw;
    font-style: normal;
    letter-spacing: .75vw;
}

main p {
    color: #748271;
    font-family: adobe-garamond-pro, serif;
    font-size: 2.4vw;
    font-style: normal;
    font-weight: 200;
    letter-spacing: .0125vw;
    line-height: 2.7vw;
}

/* end of whole page */

/* header */
header {
    background-color: #ab8e78;
    padding-bottom: 22vw;
    position: relative;
    z-index: -100;
}

.logo {
    display: block;
    margin: auto;
    padding: 3vw 0 1vw 0;
    width: 20vw;
}

.title {
    color: white;
    position: relative;
    text-align: right;
}

h1 {
    font-family: eb-garamond, serif;
    font-size: 5vw;
    font-weight: 300;
    letter-spacing: .5vw;
    position: relative;
    left: -52.5vw;
    top: 2vw;
    z-index: 10;
}

.of {
    display: block;
    margin: -3vw 0 -6vw 0;
    padding-left: 24.5vw;
    width: 35vw;
    z-index: 20;
}

.title p {
    bottom: -10vw;
    font-family: eb-garamond, serif;
    font-size: 2.5vw;
    font-style: italic;
    font-weight: 50;
    letter-spacing: .1vw;
    position: absolute;
    top: 35.25vw;
    text-align: center;
    left: 10vw;
    width: 80%;
}

.headerphoto {
    position: absolute;
    left: 47vw;
    top: 1px;
    width: 45vw;
    z-index: -10;
}

/* end of header */

/* principle one */
.one {
    position: relative;
    z-index: -100;
    padding-top: 8vw;
}

.img1 {
    margin-left: 10vw;
    position: relative;
    width: 40vw;
    z-index: -20;
}

.one h2 {
    left: 12vw;
    position: absolute;
    top: 0vw;
}

.one h3 {
    left: 43vw;
    position: absolute;
    top: 10vw;
    width: 50%;
}

.one p {
    left: 51vw;
    position: absolute;
    top: 16vw;
    width: 42vw;
}

/* quote */
.quote {
    position: relative;
    text-align: center;
    color: #b1bead;
    top: 5vw;
}

.quotation1 {
    position: absolute;
    margin-top: -8vw;
    z-index: -100;
    left: 10vw;
}

.quotation2 {
    position: absolute;
    left: 79vw;
    margin-top: -7vw;
    z-index: -100;
}

.quote h3 {
    color: #b8a99d;
    font-size: 2vw;
    position: relative;
    top: 1.5vw;
    left: 15vw;
    letter-spacing: 0.5vw;
}

.quote h4 {
    position: absolute;
    top: 2vw;
    font-size: 35vw;
}

.quote p {
    color: #495155;
    font-size: 3vw;
    width: 75%;
    position: relative;
    left: 15vw;
}

/* divider */
.dividerq {
    color: #b1bead;
    margin-top: 10vw;
    text-align: center;
}

.divider {
    color: #b1bead;
    margin-top: 2vw;
    text-align: center;
}

/* principle two */
.two {
    position: relative;
}

.img2 {
    margin-left: 52vw;
    margin-top: 16vw;
    width: 40vw;
    z-index: -20;
}

.two h2 {
    left: 28vw;
    position: absolute;
    top: 0vw;
}

.two h3 {
    left: 50vw;
    position: absolute;
    top: 10vw;
}

.two p {
    left: 9vw;
    position: absolute;
    top: 18vw;
    text-align: right;
    width: 41vw;
}

/* principle three */
.three {
    position: relative;
}

.img3 {
    margin-left: 31vw;
    margin-top: 4vw;
    width: 40vw;
    z-index: -20;
}

.three h2 {
    left: 18vw;
    position: absolute;
    top: -4vw;
}

.three h3 {
    left: 8vw;
    position: absolute;
    width: 50%;
    top: 18vw;
}

.three p {
    left: 63vw;
    position: absolute;
    top: 10.5vw;
    text-align: left;
    width: 30vw;
}

/* principle four */
.four {
    position: relative;
}

.img4 {
    margin-left: 50vw;
    margin-top: 4vw;
    width: 40vw;
    z-index: -20;
}

.four h2 {
    left: 73vw;
    position: absolute;
    top: -5vw;
}

.four h3 {
    left: 8vw;
    position: absolute;
    top: 5vw;
    letter-spacing: 0.4vw;
}

.four p {
    left: 11.5vw;
    position: absolute;
    top: 11vw;
    text-align: right;
    width: 47vw;
}

/* principle five */

.five {
    position: relative;
    z-index: -100;
    padding-top: 8vw;
}

.img5 {
    margin-left: 10vw;
    top: -3vw;
    position: relative;
    width: 40vw;
    z-index: -20;
}

.five h2 {
    left: 10vw;
    position: absolute;
    top: -5vw;
}

.five h3 {
    font-size: 4vw;
    letter-spacing: 0.2vw;
    left: 43vw;
    position: absolute;
    top: 6vw;
    width: 50%;
}

.five p {
    left: 51vw;
    position: absolute;
    top: 11vw;
    width: 42vw;
}

/* principle six */
.six {
    position: relative;
}

.img6 {
    margin-left: 48.5vw;
    margin-top: 4vw;
    width: 40vw;
    z-index: -20;
}

.six h2 {
    left: 25vw;
    position: absolute;
    top: -4vw;
}

.six h3 {
    left: 31vw;
    position: absolute;
    top: 0vw;
    letter-spacing: 0.4vw;
}

.six p {
    left: 6.5vw;
    position: absolute;
    top: 10.5vw;
    text-align: right;
    width: 40vw;
}

/* principle seven */
.seven {
    position: relative;
}

.img7 {
    margin-left: 22vw;
    margin-top: 4vw;
    width: 40vw;
    z-index: -20;
}

.seven h2 {
    left: 18vw;
    position: absolute;
    top: -4vw;
}

.seven h3 {
    left: 8vw;
    position: absolute;
    width: 50%;
    top: 15vw;
}

.seven p {
    left: 55vw;
    position: absolute;
    top: 7vw;
    text-align: left;
    width: 38vw;
}

/* principle eight */
.eight {
    position: relative;
}

.img8 {
    margin-left: 50vw;
    width: 40vw;
    z-index: -20;
}

.eight h2 {
    left: 73vw;
    position: absolute;
    top: -7vw;
}

.eight h3 {
    left: 26vw;
    position: absolute;
    top: 5vw;
    letter-spacing: 0.4vw;
}

.eight p {
    left: 6vw;
    position: absolute;
    top: 9.5vw;
    text-align: right;
    width: 60vw;
}


/* principle nine */

.nine {
    position: relative;
    z-index: -100;
    padding-top: 8vw;
}

.img9 {
    margin-left: 10vw;
    top: -3vw;
    position: relative;
    width: 40vw;
    z-index: -20;
}

.nine h2 {
    left: 13vw;
    position: absolute;
    top: -5vw;
}

.nine h3 {
    font-size: 4vw;
    letter-spacing: 0.2vw;
    left: 43vw;
    position: absolute;
    top: 6vw;
    width: 50%;
}

.nine p {
    left: 51vw;
    position: absolute;
    top: 11vw;
    width: 42vw;
}

/* principle ten */
.ten {
    position: relative;
}

.img10 {
    margin-left: 48.5vw;
    margin-top: 8vw;
    width: 40vw;
    z-index: -20;
}

.ten h2 {
    left: 25vw;
    position: absolute;
    top: 0vw;
}

.ten h3 {
    left: 40vw;
    position: absolute;
    top: 4vw;
    letter-spacing: 0.4vw;
}

.ten p {
    left: 7vw;
    position: absolute;
    top: 14vw;
    text-align: right;
    width: 40vw;
}

/* footer */
nav .mogi {
    position: absolute;
    left: 3vw;
    width: 10vw;
}
footer {
    background-color: #ab8e78;
    padding-bottom: 7.5vw;
    padding-top: 1.5vw;
    position: relative;
    margin-top: 6vw;
    z-index: -100;
}

/* tablet */

@media screen and (min-width: 600px) {
.dividerq {
    color: #b1bead;
    margin-top: 12vw;
    margin-bottom: 6vw;
    text-align: center;
}

.divider {
    color: #b1bead;
    margin-bottom: 8vw;
    margin-top: 8vw;
    text-align: center;
}
    
.six p {
    top: 9vw;
    left: 7vw;
    }
}

/* desktop */

@media screen and (min-width: 992px) {
    header {
    background-color: #ab8e78;
    padding-bottom: 14vw;
    position: relative;
    z-index: -100;
}

.logo {
    display: block;
    margin: auto;
    padding: .75vw 0 .25vw 0;
    width: 20vw;
}

.title {
    color: white;
    position: relative;
    text-align: right;
}

h1 {
    font-family: eb-garamond, serif;
    font-size: 5vw;
    font-weight: 300;
    letter-spacing: .5vw;
    position: relative;
    left: -52.5vw;
    top: -.5vw;
    z-index: 10;
}

.of {
    display: block;
    margin: -5vw 0 -3vw 0;
    padding-left: 24.5vw;
    width: 35vw;
    z-index: 20;
}

.title p {
    bottom: -10vw;
    font-family: eb-garamond, serif;
    font-size: 1.5vw;
    font-style: italic;
    font-weight: 50;
    letter-spacing: .1vw;
    position: absolute;
    top: 29.75vw;
    text-align: right;
    left: 6.5vw;
    width: 40%;
}

.headerphoto {
    position: absolute;
    left: 47vw;
    top: 1px;
    width: 51vw;
    z-index: -10;
}

}

/* FONT INFORMATION:

EB Garamond Regular

    font-family: eb-garamond, serif;
    font-weight: 400;
    font-style: normal;


EB Garamond Italic
    font-family: eb-garamond, serif;
    font-weight: 400;
    font-style: italic;


EB Garamond Medium
    font-family: eb-garamond, serif;
    font-weight: 500;
    font-style: normal;


EB Garamond SemiBold
    font-family: eb-garamond, serif;
    font-weight: 600;
    font-style: normal;


EB Garamond Bold
    font-family: eb-garamond, serif;
    font-weight: 700;
    font-style: normal;


EB Garamond Bold Italic
    font-family: eb-garamond, serif;
    font-weight: 700;
    font-style: italic;

Adobe Garamond Pro Bold
    font-family: adobe-garamond-pro, serif;
    font-weight: 700;
    font-style: normal;

Adobe Garamond Pro Bold Italic
    font-family: adobe-garamond-pro, serif;
    font-weight: 700;
    font-style: italic;

Adobe Garamond Pro Italic
    font-family: adobe-garamond-pro, serif;
    font-weight: 400;
    font-style: italic;

Adobe Garamond Pro Regular

    font-family: adobe-garamond-pro, serif;
    font-weight: 400;
    font-style: normal; 

*/