html {
    height: 100%;
    position: relative;
    width: 100%;
}

body {
    color: #222;
    display: flex;
    flex-direction: column;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 300;
    height: 100%;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    width: 100%;
}

.scroll-container {
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    width: 100%;
}

.container {
    flex: 1 0 auto;
}

.header {
    overflow: hidden;
    position: relative;
    text-align: center;
}

.header-image-container {
    height: 400px;
    overflow: hidden;
    width: 100%;
}

img.header-image {
    display: inline-block;
    min-height: 400px;
    transform: translate3d(0, -60px, 0);
    min-width: 100%;
}

.with-transition {
    transition: all 1s ease-in;
}

.header-text {
    background: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #3f607c;
    font-family: 'Roboto', sans-serif;
    font-size: 128px;
    font-weight: 100;
    height: 200px;
    left: 50%;
    margin: -100px 0 0 -100px;
    padding-top: 0;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 200px;
}

h3 {
    color: #3f607c; // #6286a5;
    font-family: 'Slabo 27px', serif;
}

div.main {
    margin: 0 auto;
    max-width: 620px;
    text-align: center;
}

h2 {
    font-family: 'Slabo 27px', serif;
}

div.intro h2 {
    font-size: 56px;
    margin: 100px 0  40px 0;
}

div.intro p {
    margin: 40px 0  100px 0;
}

div.info-block {
    margin: 140px 0 120px 0;
    position: relative;
    text-align: left;
    vertical-align: top;
}

div.icon-container {
    color: #476D8D; // #3f607c;
    left: 0px;
    position: absolute;
    text-align: center;
    top: -46px;
}

div.icon-container [class^="flaticon-"]::before,
div.icon-container [class*="flaticon-"]::before,
div.icon-container [class^="flaticon-"]::after,
div.icon-container [class*="flaticon-"]::after {
    font-size: 82px;
    margin: 0;
}

div.info-block h2 {
    color: #3f607c;
    margin: 0 0 36px 120px;
}

div.info-block p {
    margin: 0;
}

div#map {
    height: 300px;
    margin: 24px 0 0 0;
    width: 600px;
}

div.info-block.birthday {
    color: #476D8D; // #6286a5;
    margin: 90px 0 140px 0;
    text-align: center;
    width: 100%;
}

div.info-block.birthday [class="flaticon-birthday"]::before,
div.info-block.birthday [class="flaticon-birthday"]::before,
div.info-block.birthday [class="flaticon-birthday"]::after,
div.info-block.birthday [class="flaticon-birthday"]::after {
    font-size: 64px;
    margin: 0;
}

div.interlude {
    height: 300px;
    margin: 40px 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}

div.interlude img {
    display: inline-block;
    min-height: 700px;
    transform: translate3d(0, -80px, 0);
    min-width: 100%;
    z-index: 0;
}

div.interlude-2 img {
    display: inline-block;
    max-height: 700px;
    min-height: 500px;
    transform: translate3d(0, -200px, 0);
    min-width: 100%;
    z-index: 0;
}

div.interlude::before {
    box-shadow: 0px 10px 15px rgba(0,0,0,0.4);
    content: " ";
    display: block;
    height: 10px;
    position: absolute;
    top: -10px;
    width: 100%;
    z-index: 1000;
}

div.interlude::after {
    box-shadow: 0px -10px 15px rgba(0,0,0,0.4);
    content: " ";
    display: block;
    height: 10px;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 1000;
}

div.out {
    opacity: 0;
    transform: translate3d(0, 160px, 0);
}

div.out p {
    opacity: 0;
    transform: translate3d(0, 100px, 0);
}

div.out.fade-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity .5s ease-in-out, transform 1s ease-out;
}

div.out.fade-in p {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: transform 1s ease-out;
}


div.footer {
    background: #6286a5;
    box-sizing: border-box;
    color: #f0f0f0;
    flex-shrink: 0;
    padding: 12px 0;
    text-align: center;
    width: 100%;
}

.disco {
    height: 50%;
    position: absolute;
    width: 50%;
    -webkit-animation: toggle 2s;
    animation: toggle 2s;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
    -webkit-animation-timing-function:steps(1, end);
    animation-timing-function:steps(1, end);
}

@-webkit-keyframes toggle {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    90% {
        opacity: 1;
    }
}

@keyframes toggle {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    90% {
        opacity: 1;
    }
}

@-webkit-keyframes toggle2 {
    0% {
        opacity: 0;
    }

    7% {
        opacity: 1;
    }

    18% {
        opacity: 0;
    }

    32% {
        opacity: 1;
    }

    40% {
        opacity: 0;
    }

    57% {
        opacity: 1;
    }

    72% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }
}

@keyframes toggle2 {
    0% {
        opacity: 0;
    }

    7% {
        opacity: 1;
    }

    18% {
        opacity: 0;
    }

    32% {
        opacity: 1;
    }

    40% {
        opacity: 0;
    }

    57% {
        opacity: 1;
    }

    72% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }
}

.disco-1 {
    background: #a9fd00;
    left: 0;
    top: 0;
}

.disco-2 {
    background: #ffba00;
    left: 50%;
    top: 0;
}

.disco-3 {
    background: #ff12e6;
    left: 0;
    top: 50%;
}

.disco-4 {
    background: #0ad4ff;
    left: 50%;
    top: 50%;
}

.disco-50 {
    background: #000;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 128px;
    font-weight: 100;
    height: 200px;
    left: 50%;
    margin: -100px 0 0 -100px;
    padding-top: 0;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 200px;
    -webkit-animation: toggle2 3s;
    animation: toggle2 3s;
    -webkit-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
    -webkit-animation-timing-function:steps(1, end);
    animation-timing-function:steps(1, end);
}

@media (max-width: 660px) {
    .scroll-container {
        overflow-x: scroll;
        overflow-y: scroll;
    }

    img.header-image {
        margin-left: -600px;
    }

    div.interlude img {
        margin-left: -260px;
    }

    div.interlude-2 img {
        margin-left: -700px;
    }

    div.main {
        margin: 0 10px;
    }

    div.footer span {
        display: block;
    }
}