body,
html {
    margin: 0;
    padding: 0;
}

.clear {
    clear: both;
}

.overlay {
    z-index: 99;
    position: absolute;
    top: 13px;
    bottom: 13px;
    width: 100%;
    background: url('img/tile.svg') repeat;
    background-size: 26px 26px;
}

.left,
.right {
    position: relative;
    padding: 13px 0;
    width: 50%;
    height:100% !important;
}

.left {
    float: left;
    background: #F4EED9;
}

.right {
    float: right;
    background: #B8E7F1;
}

.logo {
    z-index: 102;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25%;
    min-width: 280px;
    cursor: pointer;
}

.logo img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.logo img.over {
    z-index: 101;
    opacity: 1;
}

.logo img.under {
    z-index: 100;
}

.logo:hover img.over {
    opacity: 0;
}

.logo:hover img.under {
    opacity: 1;
}

.hotel,
.harpoon {
    position: relative;
}

.borderLeft {
    z-index: 100;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 6px;
    background: url(img/tile-left.svg) repeat-y;
    background-repeat: round;
    background-size: 6px 26px;
}

.borderRight {
    z-index: 100;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 6px;
    background: url(img/tile-right.svg) repeat-y;
    background-repeat: round;
    background-size: 6px 26px;
}

.slide {
    position: absolute;
    width: 100%;
    height:100%;
    background-position: center center;
    background-size: cover;
}

@media only screen and (max-width:800px) {
    .logo {
        max-width: 150px;
        min-width: 150px;
    }
}

@media only screen and (max-width:660px) {
    .left,
    .right {
        width: 100%;
    }

    .logo {
        max-width: 150px;
        min-width: 150px;
    }
}