* { box-sizing: border-box; }

body {
    font-family: neue-haas-grotesk-display, sans-serif; 
    font-weight: 500; /* 400, 500, 700 */
    font-style: normal; /* normal, italic */
    font-size: 15px;
    line-height: 23px;
    margin: 0px;
    padding: 0px;
}

#header .inner {
    max-width: 960px;
    margin: auto;
    padding: 40px 0px;
    display: flex; 
    justify-content: space-between;
}

.logo {
    background: url(/images/logo.png) 0 0 no-repeat;
    width: 90px;
    height: 60px;
    background-size: contain;
    text-indent: -9000px;
}



#header ul {
    list-style-type: none;
}

#header li {
    display: inline-block;
    margin-left: 50px;
}

a {
    color: #000;
    text-decoration: none;
}
a:hover {
    color: #000;
    text-decoration: underline;
}
a.whatsnew {
    border: 2px solid #CDFFEB;
    padding: 5px 10px;
}
a.whatsnew:hover {
    text-decoration: none;
}

h1 {
    font-size: 32px;
}

#main {
    max-width: 960px;
    margin: auto;
    margin: 0px auto 70px;
}

#main h1 {
    text-align: center;
}

.carousel {
    margin-bottom: 80px;
}

.carousel img {
    display: block;
    height: 600px;
    margin: 0px 10px;
}

.flickity-page-dots {  }
.flickity-page-dots .dot {  }
  
#footer {
    background-color: #efefef;
}

#footer ul {
    display: flex;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

#footer .inner {
    max-width: 960px;
    padding: 50px 0px;
    margin: auto;
}

#footer li {
    width: 25%;
    vertical-align: top;
    padding-top: 75px;
    color: #999;
}

#footer li:first-child {
    padding-top: 0px;
}

#footer p {
    color: #000;
}

.logo-white {
    background: url(/images/logo-white.png) 0 0 no-repeat;
    width: 90px;
    height: 60px;
    background-size: contain;
}

a.fb-icon {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 5px;
    cursor: pointer;
}

a.ig-icon {
    display: block;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
}

a.fb-icon:before,
a.ig-icon:before {
    width: 18px;
    height: 18px;
    background-color: #ccc;
    display: block;
    content: "";
    position: absolute;
    left: 0px;
    top: 2px;
    opacity: 0.4;
    
}

a.fb-icon:before {
    background: url(/images/facebook.svg);
    background-size: contain;
}
a.ig-icon:before {
    background: url(/images/instagram.svg);
    background-size: contain;
}

.cancel-button {
    display: none;
}


.popup {
    position: absolute;
    z-index: 1000;
    top: 150px;
    left: 0;
    right: 0;
    margin: auto;
    width: 420px;
    background-color: #CDFFEB;
    padding: 30px;
    display: none;
    height: 420px;
}

.popup h3 {
    margin: 0px;
    font-weight: 600;
    font-size: 16px;
}

.popup h2 {
    font-size: 48px;
    line-height: 54px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.popup .data {
    font-size: 32px;
    line-height: 40px;
}

.popup address {
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px solid #444;
    margin-bottom: 20px;
}

.popup a.bt-popup {
    display: block;
    color: #999;
    background-color: #FFF;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 1px;
    bottom: 30px;
    position: absolute;
    width: calc(100% - 60px);
    left: 30px;
}

.popup .icon-cancel {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: url(/images/cancel.svg) 0 0 no-repeat;
    background-size: contain;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1000;
    cursor: pointer;
}

.bc {
    font-weight: 600;
    font-size: 16px;
    margin: 10px 0px 40px;
}

.top-content picture {
    position: relative;
    float: left;
}

.top-content {
    height: 400px;
}

.top-content picture .data {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #CDFFEB;
    padding: 7px 13px;
    font-weight: 600;
    text-align: center;
}

span.month {
    display: block;
}

span.day {
    font-size: 32px;
}

.info {
    margin-left: 450px;
    height: 400px;
    position: relative;
    font-size: 16px;
    line-height: 26px;
}

h1.title {
    text-align: left !important;
    margin: 0px;
}

h3.birth-info {
    margin: 10px 0px 40px;
    font-weight: 500;
}

.address {
    position: absolute;
    bottom: 0px;
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
}

section.about-author {
    margin-top: 60px;
}


.pics {
    max-width: 1366px;
    margin: 0 auto 100px;
    display: flex;
}

.pics ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.pics li { width: 430px; }

.pics span {
    display: block;
    font-size: 14px;
    color: #999;
}


.pagination {
    max-width: 1366px;
    margin: 0px auto 40px;
}

.pagination a {
    display: block;
}

a.prev {
    float: left;
    position: relative;
    padding-left: 38px;
}

a.next {
    float: right;
    position: relative;
    padding-right: 38px;
}

.pagination:after {
    display: block;
    clear: both;
    content: "";
}

a.prev:before {
    content: "";
    width: 28px;
    height: 28px;
    display: block;
    background-color: #efefef;
    position: absolute;
    top: -3px;
    left: 0px;
    background: url(/images/left-arrow.svg) 0 0 no-repeat;
    background-size: contain;
}

a.next:after {
    content: "";
    width: 28px;
    height: 28px;
    display: block;
    background-color: #efefef;
    position: absolute;
    top: -3px;
    right: 0px;
    background: url(/images/right-arrow.svg) 0 0 no-repeat;
    background-size: contain;
}

.generic-page h1.title {
    line-height: 42px;
    font-size: 26px;
}

.generic-page {
    margin-bottom: 40px !important;
    margin-top: 10px !important;
    max-width: 960px;
    margin: auto;
}

picture.cda {
    margin: 0px auto 100px;
    display: block;
    width: 660px;
}

picture.main-img {
    margin: auto;
    max-width: 1366px;
    display: block;
}

p.w-960 {
    max-width: 960px;
    margin: 50px auto 60px;
}

.pics-events {
    max-width: 1366px;
    margin: 0 auto;
}

.pics-events ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.pics-events li {
    width: 660px;
}

.special-ideas {
    max-width: 360px;
    margin: 70px auto 100px;
    color: #666;
}

.special-ideas h2 {
    color: #000;
}

.gmap {
    max-width: 1366px;
    height: 600px;
    margin: 0 auto 40px;
}

.gmap iframe {
    width: 100%;
    height: 100%;
}

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

    h1 {
        font-size: 26px;
        margin-bottom: 50px;
    }

    .flickity-prev-next-button {
        display: none;
    }

    #header .inner {
        padding: 20px 20px;
    }

    .logo {
        height: 40px;
    }

    #header nav {
        display: none;
        background-color: rgba(0,0,0,0.5);
        width: 100%;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 100;
    }

    #header nav ul {    
        position: fixed;
        top: 0px;
        right: 0px;
        z-index: 100;
        background-color: #FFF;
        height: 100vh;
        width: 80vw;
        text-align: left;
        margin: 0px;
        padding: 60px 25px 0px;
    }

    #header nav ul li {
        margin: 15px 0px;
        display: block;
    }

    #header .icon-menu {
        content: "";
        display: block;
        width: 28px;
        height: 28px;
        background: url(/images/menu.svg) 0 0 no-repeat;
        background-size: contain;
        margin-top: 6px;
        position: absolute;
        right: 20px;
    }

    #header nav .icon-cancel {
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        background: url(/images/cancel.svg) 0 0 no-repeat;
        background-size: contain;
        position: absolute;
        top: 30px;
        right: 25px;
        z-index: 1000;
    }

    .carousel img {
        height: 400px;
    }

    .logo-white {
        height: 50px;
    }

    .popup {
        width: 90vw;
    }

    #footer .inner {
        padding: 50px 40px;
    }

    #footer ul {
        display: block;
        list-style-type: none;
        margin: 0px;
        padding: 0px;
    }

    #footer li {
        width: 100%;
        padding-top: 30px;
    }

    #footer p {
        margin-top: 10px;
        margin-bottom: 0px;
    }

    section.top-content {
        height: auto;
    }
    
    .top-content picture {
        float: none;
    }
    
    .info {
        margin: auto;
        height: auto;
        padding: 20px;
    }
    
    .pics {
        display: block !important;
        margin-bottom: 70px;
    }
    
    .pics ul {
        display: block;
    }

    .top-content picture .data {
        top: auto;
    }
    
    .top-content picture img {
        width: 100%;
    }

    .top-content picture .data {
        top: auto;
    }
    
    .top-content picture img {
        width: 100%;
    }
    
    #main {
        margin-bottom: 20px;
    }
    
    .address {
        position: relative;
        margin-top: 30px;
    }
    
    section.about-author {
        margin-top: 0px;
        padding: 20px;
    }
    
    .pics picture img {
        width: 100%;
    }
    
    .pics li {
        width: 100%;
        margin-bottom: 30px;
    }
    
    .pics span {
        padding-left: 20px;
    }
    
    .pagination {
        margin: 0px 20px 40px;
    }
    
    .bc {
        padding: 0px 20px;
        margin-bottom: 30px;
    }

    a.prev {
        padding-left: 25px;
    }
    a.next {
        padding-right: 25px;
    }

    a.prev:before {
        width: 18px;
        height: 18px;
        top: 3px;
    }
    a.next:after {
        width: 18px;
        height: 18px;
        top: 3px;
    }

    .cda img {
        width: 100%;
    }
    
    picture.cda {
        width: 100%;
        margin-bottom: 70px;
    }
    
    .main-img img {
        width: 100%;
    }
    
    .pics-events ul {
        display: block;
    }
    
    .pics-events li {
        width: 100%;
        margin-bottom: 30px;
    }
    
    .pics-events picture img {
        width: 100%;
    }

    section.generic-page {
        padding: 0px 20px;
        margin-bottom: 30px !important;
    }
    
    p.w-960 {
        padding: 0px 20px;
    }
    
    .special-ideas {
        padding: 0px 20px;
    }

    .gmap {
        max-width: 1366px;
        height: 60vh;
        margin: 0 auto 0px;
    }

    .contact-page .generic-page {
        margin-bottom: 20px !important;
    }
    
    .contact-page .special-ideas {
        margin-top: 30px;
    }
}