body {
    font-family: 'Helvetica', sans-serif;
    line-height: 1.8;
}

.spot {
    position: absolute;
    left: 0;
    max-width: 668px;
}

#logo {
    position: absolute;
    display: block;
    background: url('/img/logo-dark.png') 0 0 no-repeat;
    background-size: contain;
    width: 218px;
    height: 121px;
    left: 50%;
    margin-left: -8vw;
    z-index: 2;
}

#logo-en {
    position: absolute;
    display: block;
    background: url('/img/logo-dark-en.png') 0 0 no-repeat;
    background-size: contain;
    width: 218px;
    height: 121px;
    left: 50%;
    margin-left: -8vw;
    z-index: 2;
}

.about-container {
    margin: 0 auto;
    width: 960px;
    position: relative;
    /*border: red 1px dashed;*/

    /* One grid section, can be different in responsive scales */
    font-size: 80px;
}

.about-container p {
    font-size: 15px;
}

.about-container .text {
    color: #000000;
    margin: 30px 80px 40px 80px;
    /*border: green 1px dashed;*/
}

.about-container .space {
    margin-top: 20px;
    font-size: 0;
}

.about-container .margin-small {
    margin-top: 20px;
    margin-bottom: 20px;
}

.about-container .text p.center {
    text-align: center;
}

.about-container .text p.cities {
    font-size: 12px;
}

.about-container .text p.header {
    font-size: 18px;
    letter-spacing: 8px;
    padding-left: 25px;
    text-transform: uppercase;
}

.about-container .text .point {
    font-size: 6px;
    margin-left: 8px;
    margin-right: 8px;
    vertical-align: middle;
}

.about-container .text .grey {
    color: #585a5f;
}

.about-container .text strong {
    font-family: 'HelveticaBold', sans-serif;
}

.about-container .text .italic {
    font-style: italic;
}

.about-container .text a {
    font-style: normal;
    text-decoration: underline;
    color: #a3496a;
}

.about-container .text a:hover {
    text-decoration: none;
}

.about-container .photo {
    text-align: center;
    font-size: 0;
}

.about-container .copyright {
    text-align: center;
    font-size: 11px;
    color: #aaaaaa;
    margin: 5px 0 0 0;
}

.about-container .word {
    text-align: center;
    font-size: 0;
    margin-top: 40px;
    margin-bottom: 40px;
}

.about-container .word.space-bottom {
    margin-bottom: 70px;
}

.about-container .text-quote {
    margin-right: 0;
}

.about-container .text-quote div.quote {
    float: right;
    width: 240px;
    margin-left: 80px;
    text-align: center;
    line-height: 1.6;
}

.about-container .text-quote div.quote p:first-child {
    margin-top: 0;
}

.about-container .text-quote div.quote .point {
    font-size: 10px;
}

.about-container .text-photo img {
    display: block;
    float: left;
}

.about-container .text-photo img {
    width: 4em;
    height: auto;
}

.right {
    margin-left: 4em;
}

.about-container .text-photo h3 {
    font-family: 'HelveticaBold', sans-serif;
}

.about-container .text-photo h3,
.about-container .text-photo p {
    /*margin-left: 4em;*/
    font-size: 16px;
}

p.lead {
    font-size: 18px;
}

p.column {
    font-size: 18px;
    width: 20em;
    margin: 0 auto 20px;
    padding-left: 5em;
}

.verse {
    width: 26em;
    margin: 0 0 0 auto;
    font-size: 16px;
    font-style: italic;
}

.about-container .footer {
    margin-top: 70px;
    padding: 0;
    height: 190px;
    position: relative;
    border-top: 1px solid #d3d3d3;
    background: none;
    text-align: left;
}

.about-container .artpole {
    float: left;
    max-width: 226px;
}

.about-container .dev {
    margin-top: 40px;
    margin-left: 5em;
}

.about-container .dev p {
    margin-top: 0;
    margin-bottom: 7px;
    color: #757575;
    font-size: 14px;
}

.about-container .dev p a {
    color: #a3496a;
    font-family: 'HelveticaBold', sans-serif;
    font-style: normal;
    text-decoration: none;
}

.about-container .dev p a:hover {
    text-decoration: underline;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    body {
        background-image: url('/img/background_about@2x.jpg');
    }

    #logo {
        background-image: url('/img/logo-dark@2x.png');
    }
}

@media only screen and (min-width: 768px) and (max-width: 960px) {

    #logo {
        width: 17vw;
        height: 9.29vw;
        margin-left: -8vw;
    }

    .about-container {
        width: 700px;
        font-size: 58px;
    }

    .about-container .text {
        margin: 0 30px 20px 0;
    }

    .about-container .artpole {
        margin-top: 20px;
    }

    .about-container .dev {
        margin-top: 30px;
    }

    p.column {
        margin-top: 20px;
    }
}

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

    #logo {
        width: 17vw;
        height: 9.29vw;
        margin-left: -8vw;
    }

    .spot img {
        width: 306px;
        height: auto;
        margin-top: 130px;
    }

    .about-container {
        width: 440px;
        font-size: 30px;
        padding-top: 0px;
    }

    .about-container p {
        font-size: 12px;
    }

    .about-container .text p.cities {
        font-size: 11px;
    }

    .about-container .photo img {
        width: 440px;
        height: auto;
    }

    .about-container .photo iframe {
        max-width: 100%;
        width: 440px;
        height: 250px;
    }

    .about-container .photo iframe.sound {
        height: 165px;
    }

    .about-container .text {
        margin: 0 20px 20px 0;
    }

    .about-container .space {
        margin-top: 10px;
    }

    .about-container .word {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .about-container .word img {
        height: 50px;
        width: auto;
    }

    .about-container .text-photo p {
        font-size: 13px;
        margin: 0 25px;
        line-height: 1.7;
    }

    .about-container .text-photo img,
    .about-container .text-photo iframe {
        float: none;
        width: 7em;
        margin: 10px auto 0 auto;
    }

    .right {
        margin: 0 auto;
    }

    p.column {
        margin-top: 10px;
        font-size: 14px;
    }

    .about-container .text-photo .right h3 {
        font-size: 13px;
        text-align: center;
        margin-top: 0;
    }

    .verse {
        width: auto;
        font-size: 13px;
        margin: 0 10px 0 25px;
        line-height: 1.7;
    }

    .about-container .text-quote div.quote {
        margin-left: 10px;
    }

    .about-container .word.space-bottom {
        margin-bottom: 10px;
    }

    .about-container .footer {
        margin-top: 50px;
        height: 180px;
    }

    .about-container .artpole {
        float: none;
        margin: 20px auto 10px auto;
        max-width: 226px;
    }

    .about-container .artpole a img {
        width: 190px;
        height: auto;
    }

    .about-container .dev {
        margin: 0;
    }

    .about-container .dev p {
        font-size: 12px;
    }

}

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

    #logo {
        width: 28vw;
        height: 15.3vw;
        margin-left: -13vw;
        top: 2vw;
    }

    .spot img {
        width: 180px;
        height: auto;
        margin-top: 130px;
    }

    .about-container {
        width: 280px;
        font-size: 30px;
    }

    .about-container p {
        font-size: 11px;
        line-height: 1.6;
    }

    .about-container .text .point {
        margin-left: 4px;
        margin-right: 4px;
    }

    .about-container .text p.cities {
        font-size: 10px;
    }

    .about-container .photo img {
        width: 280px;
        height: auto;
    }

    .about-container .photo iframe {
        max-width: 100%;
        width: 280px;
        height: 158px;
    }

    .about-container .photo iframe.sound {
        height: 116px;
    }

    .about-container .text {
        margin: 0 10px 10px 0;
    }

    .about-container .space {
        margin-top: 0px;
        display: none;
    }

    .about-container .word {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .about-container .word img {
        height: 35px;
        width: auto;
    }

    .about-container .text-photo p {
        font-size: 12px;
        margin: 0 25px;
        line-height: 1.7;
    }

    .about-container .text-photo img {
        float: none;
        width: 6em;
        margin: 10px auto 0 auto;
    }

    .right {
        margin: 0 auto;
    }

    p.column {
        margin-top: 10px;
        font-size: 12px;
        padding-left: 4em;
    }

    .about-container .text-photo .right h3 {
        font-size: 13px;
        text-align: center;
        margin-top: 0;
    }

    .verse {
        width: auto;
        font-size: 12px;
        margin: 0 10px;
        line-height: 1.7;
    }

    .about-container .text-quote div.quote {
        float: none;
        width: 260px;
        margin: 10px auto 0 auto;
    }

    .about-container .word.space-bottom {
        margin-bottom: 10px;
    }

    .about-container .footer {
        margin-top: 35px;
        height: 150px;
    }

    .about-container .artpole {
        float: none;
        margin: 10px auto 0 auto;
        max-width: 226px;
    }

    .about-container .artpole a img {
        width: 140px;
        height: auto;
        margin: 0 42px;
    }

    .about-container .dev {
        margin: 0 10px;
    }

    .about-container .dev p {
        font-size: 11px;
    }

}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}