@font-face {
    font-family: 'hk_groteskitalic';
    src: url('font/hkgrotesk-italic-webfont.woff2') format('woff2'),
         url('font/hkgrotesk-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'hk_groteskbold';
    src: url('font/hkgrotesk-bold-webfont.woff2') format('woff2'),
         url('font/hkgrotesk-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'hk_grotesklight';
    src: url('font/hkgrotesk-light-webfont.woff2') format('woff2'),
         url('font/hkgrotesk-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'hk_groteskmedium';
    src: url('font/hkgrotesk-medium-webfont.woff2') format('woff2'),
         url('font/hkgrotesk-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'hk_groteskregular';
    src: url('font/hkgrotesk-regular-webfont.woff2') format('woff2'),
         url('font/hkgrotesk-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'hk_grotesksemibold';
    src: url('font/hkgrotesk-semibold-webfont.woff2') format('woff2'),
         url('font/hkgrotesk-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* OLD FONT

@font-face {
    font-family: 'vera_roman';
    src: url('../font/VeraMono-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'vera_bold';
    src: url('../font/VeraMono-Bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {

    font-family: 'vera_bold_italic';
    src: url('../font/VeraMono-Bold-Italic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {

    font-family: 'vera_italic';
    src: url('../font/VeraMono-Italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;

}*/



body {
    font-family: "hk_groteskregular", helvetica, arial;
    /*background: url("bg2.gif") #292c2f;*/
    /*background: #00037d;*/
    /*color: #afacd4;*/
    background: url("img/papertile.jpg");
    color: #595a6a;
}

strong {
    font-family: "hk_groteskbold", helvetica, arial;
}

em {
    font-family: "hk_groteskitalic", helvetica, arial;
}

p, ul {
    font-size: 14px;
    font-kerning: auto;
    letter-spacing: 0.1px;
    line-height: 17px;
}

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

    p {
        font-size: 14px;
        font-kerning: auto;
        letter-spacing: 0.2px;
        line-height: 18px;
    }
}

p.bold {
    font-size: 12px;
    font-weight: bold;
}

ol {
    font-size: 12px;
    font-kerning: auto;
    letter-spacing: 0.6px;
    line-height: 17px;
}

h1 {
    margin-top: 40px;
    font-size: 40px;
    margin-top: 40px;
    position: relative;
    line-height: 40px;
    text-transform: uppercase;
    letter-spacing: 2px;
    /*color: #FFF;*/
}

h2 {
    font-size: 24px;
    margin-top: 40px;
    position: relative;
    line-height: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    /*color: #FFF;*/
}

h3 {
    font-size: 20px;
}

.teaser {
    font-size: 20px;
    font-style: italic;
    margin-top: 40px;
    position: relative;
    line-height: 20px;
}

blockquote {
    font-size: 12px;
    font-kerning: auto;
    letter-spacing: 0.6px;
    line-height: 17px;
    font-style: italic;
    border-left: 1px solid;
    margin-left: 0px;
    padding-left: 10px;
}

a {
    color: #ee4502;
}

img {
    width: 600px;
    max-width: 100%
}

@media screen and (min-width: 1281px) {
    img {
        width: 700px;
    }
}

@media screen and (max-width: 600px) {
    img {
        width: 320px;
    }
}

img.divider {
    margin-top: 20px
}

.content {
    margin: 0 auto;
    width: 600px;
}

@media screen and (min-width: 1281px) {

    .content {
        margin: 0 auto;
        width: 700px;
    }

}

@media screen and (max-width: 600px) {
    .content {
        margin: 0 auto;
        width: 320px;
    }
}

.khead {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 30vh;
    padding-top:18vh;
    text-align: center;
}


@media screen and (max-width: 600px) {
    .khead {
    height: 20vh;
    padding-top:15vh;
    }
    .responsive-img {
  max-width: 100px;
  height: auto;
}
}

.khead p {
    color: #00017d;
    width: 300px;
    margin: 4px auto;
    padding: 6px;
    font-size: 16px;
    background: #ee4502;
}


.responsive-img {
  max-width: 200px;
  height: auto;
}

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

#inout {
    background: url("/kurodama/img/intimatebg.jpg") repeat-x center center #10219d;;
    
}

.archive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
  /*grid-auto-flow: dense;*/
}