@import url("https://use.typekit.net/vnn6xsf.css");

html{
  padding:0;

}

body, button, p {
  font-family: roc-grotesk, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #0015CE;

}

body {
  margin:0;
    padding-right: 340px;
}

a {
  font-style: normal;
  text-decoration:none;
  color: #0015CE;
}

/* heading biggest*/
h1 {
  font-size: 54px;
  line-height: 54px;
  font-weight: 500;
  text-transform: uppercase;
  margin:0;
}

/* heading */
h2 {
  font-size:42px;
  font-weight: 500;
  margin:0;
  line-height:100%;
}

/* heading middle */
h3 {
  font-size:42px;
  font-weight:300;
}

header {
  width:100%;
  height:100vh;
  background-image: url(assets/blueplacehold.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  margin:0px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

#hamb {
  display: none;
}

/* header {
  margin-left:4rem;
  margin-right:6rem;
  display:flex;
  justify-content: space-between;
  align-items: center;

} */

header p {
  width:300px;
  padding-left:2rem;
}

.links.fix{
  margin-top:4rem;
  text-align: right;
}

header a {
  background-color: white;
  padding:.5rem 1rem;
  margin-left: 2rem;
  border: 1px solid #0015CE;
}

section {
  display: flex;
  overflow-x: scroll;
  margin-top:4rem;
  padding-left:5rem;

}

section img {
  width:500px;
  max-height:600px;
  margin-right:6rem;
}

section img:nth-of-type(2n){
  padding-top:4rem;
}

.secintro {
  margin-top:4rem;
  padding-left:8rem;
  padding-right:2rem;
  text-align: right;

}

.full {
  padding-left: 0px;
}

.full video, .full img{
  width:100vw;
  max-height: 100vh;
  margin:0;
}

.cred {
  display: block;
  max-width:200px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}




#sidebar {
  position: fixed;
  width:350px;
  height:100%;
  right: 0;
  top:0;

background: #FFFFFF;
/* TEXT */

border: 1px solid #0015CE;
box-sizing: border-box;
}

.dc, .dcold {


  position: inherit;
  width:380px;
  height:180px;
  padding:1rem;
  margin-left: auto;
  margin-right: auto;
  margin-top:2rem;

  text-align: center;
  background-color: #fff;
  border: 1px solid #0015CE;
  box-sizing: border-box;

  display: flex;
  align-items: center;
}

.dcold {
  position: absolute;
  width: 380px;
  height: 180px;
  right: 2rem;
  top: 2rem;
}

#comments {
  display: block;
  bottom:2rem;
  margin-top: 200px;
  padding:2rem;
  text-align: right;
  overflow-y: scroll;
  max-height: 30%;
}

.com p:nth-of-type(0n + 1){
  font-weight:300;
}

#mess {
  position: absolute;
  bottom: 0;
  padding:2rem;
}

input, textarea{
  border: 1px solid #0015CE;
  width:100%;
  height:150px;
  padding:0;
}

button{
  margin-top: 1rem;
  width:100%;
  background-color: #0015CE;
  color:white;
  border:none;
  padding:.75rem 0;
}

#visit {
  position: fixed;
  bottom: -3rem;
  left: -3rem;
}

#visit img {
  width:100%;
}


.pagecatalog .catalog, .pagestory .story, .pagecheck .check {
  display: block;
}

.catalog, .story, .check {
  display:none;
}

.storytile {
  display: block;
  width:40%;
  border: 1px solid blue;
  padding:2rem;
  margin-left: auto;
  margin-right: auto;
}

.right {
  justify-content: flex-end;
  padding-right:5rem;
}

.vert {
  writing-mode: vertical-rl;
text-orientation: mixed;
text-align: right;
}

.story p, .check p {
  padding:1rem;
  font-size: 150%;
  line-height: 150%;
  text-align: center;
}

.story p.small {
  font-size: 12px;
  padding: 1rem 0;
  text-align: left;
}

.storysec, .check {
  max-width:700px;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
}

.check section {
  min-height:80vh;
  flex-direction: column;
}

.check {
  max-width:90%;
  line-height: .8;
}


#creply, .comment-item div, .comment-item button, #comments-list .left, #comments-list h3{
  display: none;
}

li, ul {
  list-style-type: none;
}

.stretch { max-width:100vh; max-height:100vw; width:auto; height:auto; }

.mob {
  display: none;
}

#book{
  width:500px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width:768px) and (max-width:834px){


    .dcold, #visit {
      display: none;
    }

  header, .links {
    flex-direction: column;
  }


#comments {
  margin-top:0px;
  max-height:50%;
}

  .links {
    width:300px;
    line-height: 5;
  }

  .links.fix {
    width:200px;
  }

}

@media screen and (max-width:767px) {
.mob{
  display: contents;
}
  body{
    padding:0;
  }

  h1{
    font-size: 2.5rem
  }

  #hamb{
    top: 1rem;
  right: 1rem;
  position: fixed;
  display: block;
  z-index: 2;
    }

  .dc, .links {
    position: relative;
    width:80%;
    height:auto;
    padding:1rem;
    margin-left: auto;
    margin-right: auto;
    margin-top:2rem;
  }


  .links.fix {
    position: fixed;
    text-align: center;
    background-color: #fff;
    border: 1px solid #0015CE;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .links.fix *{
    margin-top:2rem;
    margin-left: 0px;
    width: 80%;
    margin-bottom:1rem;
  }

  .date{
    line-height:3rem;
    margin-top:0rem;
    white-space: nowrap;
  }

  #sidebar{
    display: none;
  }

  /* .mobileland{
    display: block;
    height:100vh;
    width:100vw;
    background-image: url(assets/blueplacehold.png);

  } */
  section{
    margin-top:4rem;
    padding-left:1rem;
    max-width: 100%;
    max-height:100%;
  }


  section img {
    max-height: 80vh;
  }

  .secintro {
    padding-left: 1rem;
  }

  header {
    width:100vw;
    height:100vh;
    background-image: url(assets/blueplacehold.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    margin:0px;
    flex-direction: row;
    align-items: auto;
  }



  header p {
    width:300px;
    padding-left:2rem;
  }

  #visit{
    padding-left: 1rem;
    padding-bottom: -.5rem;
    width:50%;
  }

  .stretch {
    max-width: 100%;
    max-height: 100%;
  }

}