@import url('https://fonts.googleapis.com/css?family=Poiret+One');

html {
    font-size: 16px;
}



/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

    body {
        text-size: 1em
    }
}



/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
    body {
        text-size: 1em
    }
}



/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {

    body {
        font-size: 1.5em;
    }
    #menu {
        width: 40vw !important;
    }
    #menuToggle span {
        width: 8vw !important;
        height: 1.2vw !important;
        margin-bottom: 1.2vw !important;
        border-radius: .5vw !important;
    }
    #menuToggle input {
        width: 9vw !important;
        height: 6vw !important;
        top: -1vw !important;
        left: -.3vw !important;
    }
}



/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    body {
        font-size: 1em;
    }
}



/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
    body {
        font-size: .9em;
    }
}



/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {

    html {
        font-size: 1.9em;
    }
    #menu {
        width: 40vw !important;
    }
    #menuToggle span {
        width: 10vw !important;
        height: 1.4vw !important;
        margin-bottom: 1.4vw !important;
        border-radius: .5vw !important;
    }
    #menuToggle input {
        width: 10.5vw !important;
        height: 8vw !important;
        top: -1vw !important;
        left: -.3vw !important;
    }
}


body {
    background: #2323;
    color: #cdcdcd;
    font-family: "Avenir Next", "Avenir", sans-serif;
    /* font-size: 1.5vmax; */
}

h1 {
    font-family: 'Poiret One', cursive;
    font-size: 3em;
    margin: 0 0 .67em 0;
}

.reviews {
    /* max-height: 60vh; */
    font-family: monospace;
    background-color: hsla(0, 0%, 90%, .6);
    color: #232323;
    border-radius: 4px;
    padding: 3% 2%;
    white-space: pre-wrap;
}

.box {
    position: absolute;
    width: 70vw;
    z-index: 1;
    text-align: center;
    padding: 5vh 5vw;
    background-color: hsla(0, 0%, 100%, .6);
    border-radius: 5px;
    color: #232323;
    margin: 5vh 10vw 15vh;
    max-height: 80vh;
}

.galleryThumb {
    width: 33.3%;
    height: 33.3%;
    max-height: 18vh;
    max-width: 18vh;
    width: calc(100vmin / 4.4 - 1.2%);
    height: calc(100vmin / 4.4 - 1.2%);
    padding: 0 .4%;
}

.container {
    display: flex;
}

.album {
    width: 30%;
    text-align: center;
    margin: 0 auto;
    vertical-align: text-top;
}

.album img {
    width: 20vw;
}

.fp-slidesNav li,
#fp-nav li {
    background-color: hsla(0, 0%, 20%, .6);
    border-radius: 100%;
    padding: 1%;
}

#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li a.active span,
.fp-slidesNav ul li:hover a.active span {
    height: 1.2vmin;
    width: 1.2vmin;
    margin: -.6vmin 0 0 -.6vmin;
}

.fp-slidesNav {
    width: 30vw;
    text-align: center;
}

.backgroundImg {
    object-fit: cover;
    height: 100%;
    top: 0;
    width: 100%;
    z-index: -1;
}

.clear {
    clear: both;
}

.photo-link {
    padding: 5px;
    margin: 5px;
    border: 1px solid #ccc;
    display: block;
    width: 200px;
    float: left;
}

.photo-link:hover {
    border-color: #999;
}

nav {
    z-index: 2;
    height: 0;
    width: 0;
    position: absolute;
}

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    background: #eee;
}

a {
    text-decoration: none;
    color: #232323;
    transition: color 0.3s ease;
}

a:hover {
    color: tomato;
}

#menuToggle {
    display: block;
    position: relative;
    top: 5vh;
    left: 5vw;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
}

#menuToggle input {
    display: block;
    width: 4vw;
    height: 3.2vw;
    position: absolute;
    top: -.7vw;
    left: -.5vw;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none;
}

#menuToggle span {
    display: block;
    width: 3.3vw;
    height: .4vw;
    margin-bottom: .5vw;
    position: relative;
    background: #cdcdcd;
    border-radius: .3vw;
    z-index: 1;
    transform-origin: .4vw 0vw;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
    opacity 0.55s ease;
}

#menuToggle span:first-child {
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

#menuToggle input:checked~span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
}

#menuToggle input:checked~span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked~span:nth-last-child(2) {
    opacity: 1;
    transform: rotate(-45deg) translate(0, -1px);
}

#menu {
    position: absolute;
    width: 25vw;
    margin: -10vw 0 0 -5vw;
    padding: 2vw;
    padding-top: 8vw;
    background: #ededed;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

#menu li {
    padding: 1vw 0;
    font-size: 1.5em;
    text-align: right;
}

#menu li.active a {
    color: tomato;
}

#menuToggle input:checked~ul {
    transform: scale(1.0, 1.0);
    opacity: 1;
}

#posts .post,
#events .post {
    padding: 2vh 2vw;
    background-color: hsla(0, 0%, 90%, .6);
    color: #232323;
    border-radius: 4px;
    /* vertical-align: middle; */
    /*   min-height:calc(100px + 4vh); */
    margin: 2vh 0vw;
    width: calc(100% - 4vw);
    display: inline-block;
}

#posts .post a,
#events .post a {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
}

#posts .post a p.txt {
    width: calc(100% - 16vw);
    text-align: right;
    float: right;
    /* height: 100px; */
    vertical-align: middle;
}

#events .post a p.txt {
    width: calc(100% - 16vw);
    text-align: left;
    float: left;
    /* height: 100px; */
    vertical-align: middle;
}

#posts .post a p.img,
#events .post a p.img {
    float: left;
    vertical-align: middle;
}

#posts .post a p.img img,
#events .post a p.img img {
    width: 16vw;
}

#posts,
#events {
    border-radius: 4px;
    padding: 5% 2%;
}

#postc {
    overflow-y: auto;
    max-height: 61vh;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

form>div>textarea,
input {
    vertical-align: middle;
}

.formitem {
    clear: both;
    text-align: right;
}

form label {
    text-align: right;
}

#formouter {
    display: inline-block;
}

.eventDate {
    font-family: monospace;
    font-size: 1.2em;
    white-space: pre-wrap;
}