/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html, body {
  height: 100vh;
}
body {
  line-height: 1.5;
       -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  font-size: 1em;
}
#root, #__next {
  isolation: isolate;
}
li {
list-style: none;
}



@font-face {
    font-family: 'HKGrotesk';
    src: url('../fonts/HKGrotesk-Light.woff2') format('woff2'),
         url('../fonts/HKGrotesk-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}


@font-face {
    font-family: 'HKGrotesk';
    src: url('../fonts/HKGrotesk-Regular.woff2') format('woff2'),
         url('../fonts/HKGrotesk-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'HKGrotesk';
    src: url('../fonts/HKGrotesk-SemiBold.woff2') format('woff2'),
         url('../fonts/HKGrotesk-SemiBold.woff') 
         format('woff');
    font-weight: 600;
    font-style: normal;
}



html {
  font: normal 400 1rem/1.3rem 'HKGrotesk', sans-serif;
}

a {
  color: #000;
  text-decoration: none;
}

strong, b {
  font-weight: 600;
}

#bred-content a, footer p a, .textwrap a {
  border-bottom: 1px solid;
  padding-bottom: 0.05rem;
}

button, .button {
  display: inline-block;
    font-size: .9em;
    border: 0px solid #000;
    padding: 8px 10px;
    text-transform: uppercase;
    margin: 1rem 0;
    z-index: 680;
    background-color: #000;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}


/*----------Header----------*/

.wrap {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1400px;
}


.header {
  position: fixed;
  display: flex;
  justify-content: center;
  top: 0;
  left: 0;
  right: 0;
  z-index: 800;
  width: 100%;
  padding: .3rem 0;
}

.logo img {
  width: 13rem;
  z-index: 800;
  }
  
a.logo {
  border-bottom: 0 solid;
} 


#navi { display: none} 

.menu {
  display: flex;
  align-items: top;
  position: fixed;
  top: 0;
  padding-top: 9rem;
  width: 100%;
  height: 100vh;
  background: rgba(255, 255, 255, 0.90);
  z-index: 500;
}	

.menu-list {
  width: 100%;
  text-align: center;
  font-size: 2rem;
  font-weight: 300;
  padding: 0;
}

.menu-list li {
  padding: 1rem 0;
}

/*----------Hamburger----------*/

.visuallyHidden {
    position: absolute; 
    overflow: hidden; 
    clip: rect(0 0 0 0); 
    height: 1px; width: 1px; 
    margin: -1px; padding: 0; border: 0; 
}


.hamburger {
    margin-top: 2rem;
    right: 2rem;
    width: 25px;
    height: 25px;
    position: fixed;
    cursor: pointer;
    z-index: 2500
}

.hamburger .bar {
    padding: 0;
    width: 33px;
    height: 2px;
    background-color: black;
    display: block;
    border-radius: 0px;
    transition: all 0.4s ease-in-out;
    position: absolute; 
}

.bar1 {
    top: 0;
}

.bar2,
.bar3 {
    top: 11px;
}

.bar3 {
    right: 0;
}

.bar4 {
    bottom: 0;
}

.hamburger3 .bar1 {
    transform-origin: 5%;
}

.hamburger3 .bar4 {
    transform-origin: 5%;
}

.checkbox:checked + label > .hamburger3 > .bar1{
    transform: rotate(45deg);
    height: 2px;
    width: 30px;
}

.checkbox:checked + label > .hamburger3 > .bar3{
    transform: rotate(45deg);
    height: 2px;
    background-color: transparent;
}

.checkbox:checked + label > .hamburger3 > .bar2{
    transform: rotate(-45deg);
    height: 2px;
    background-color: transparent;
}

.checkbox:checked + label > .hamburger3 > .bar4{
    transform: rotate(-45deg);
    height: 2px;
    width: 42px;
}



/*----------Home----------*/


#bred-slider {
  position: fixed;
  top: 5.5rem;
  width: 100%;
  max-width: 1400px;
}

#bred-content {
  margin-top: calc(940px + 5.5rem);
  background-color: #fff;
  min-height: 95vh;
  position: relative;
  z-index: 100;
  display: block;
  padding-bottom: 5rem;
}

.bred-content-2 {
  margin-top: calc(800px + 5.5rem) !important;
}

@media all and (max-width: 1400px) {
  #bred-content {
      margin-top: calc(65vw + 5.5rem)
      }

.bred-content-2 {
  margin-top: calc(55vw + 5.5rem) !important;
}

  }


.contentwrap 	{
  margin: 0 auto;
  width: 80%;
}

.textwrap 	{
  margin: 20% auto 0;
  width: 60%;
}

.textwrap p {
  margin-bottom: 1rem;
}

@media all and (max-width: 650px) {
.textwrap 	{
  margin: 35% auto 0;
  width: 90%;
}
}

.starttext {
  padding: 2rem 0 0;
}

.starttext p {
  padding-top: .5rem;
  padding-right: 1rem;
}


.grid {
    margin: 3rem 0;	
    display: grid;
    grid-template-columns: 1fr 1fr;
  column-gap: 4rem;
}

.book-item {
  position: relative;
  margin-bottom: 2rem;
}

.book-img {
  position: relative;
}

.book-text {
  padding: .5rem 0;
  line-height: 1.4;
  text-align: center
}

.grid2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
    margin: 0 auto;	
    padding: 3rem 0 2rem;
}

.works.grid-item { 
  position: relative; 
  width: 21%;
  margin: 2%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: pointer
}

.works.grid-item img {
  position: absolute;
  top: 0;
    right: 0; 
     bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: contain;
  
}

@media all and (max-width: 900px) {
  

  
  .works.grid-item { 
  width: 29.33%;
  }
  }

@media all and (max-width: 450px) {
  
    .grid {
    grid-template-columns: 1fr;
    }
  .works.grid-item { 
  width: 96%;
  }
  }	

/*----------Books----------*/

.bookgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3rem 3% 0;
  column-gap: 4rem;
}

.booktext {
  position: relative;
  padding: 0 0 2rem 0;	
  line-height: 1.4;
}

a.trans {
  border: 0px solid !important;
  padding: 0px !important;
  cursor: pointer;
  text-transform: uppercase;
}

#txt1 {
  display: block;
}


#txt2 {
  display: none;
}

.bookdata {
  padding: 0 0 2rem 0;
}

.bookpress {
  width: 100%;
  float: left;
  padding: 2rem;	
}

.booktext p, .bookdata p {
  padding-bottom: 1rem
}

@media all and (max-width: 1200px) {
  .contentwrap  {
  width: 90%;	
  }
  }

@media all and (max-width: 800px) {
  .bookgrid {
  grid-template-columns: 1fr;
} 
}
  }

/*----------Slider----------*/

.carousel-frame {
  width: 100%;
}

.carousel {
  padding-bottom: 66.6%;
}

.carousel-cell {
  width: 100%; 
  height: 100%;
  display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-imagecell {
  position: relative;
  width: 100%; 
  height: 100%;
  display: block;
}



.carousel-cell-image.flickity-lazyloaded,
.carousel-cell-image.flickity-lazyerror {
  opacity: 1;
}

.carousel-cell img {
  position: absolute;
  top: 50%;
    left: 50%; 
    right: 0;
  width: auto;
  height: auto;
    display: block;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  max-height:100%;
  max-width: 100%;
  
}

.carousel .flickity-viewport {
  position: absolute;
  width: 100%;
}

.carousel.is-fullscreen .carousel-cell {
  height: 100%;
  }
  

footer {
  background-color: #fff;
  position: relative;
  width: 100vw;
  text-align: center;
  font-size: .85rem;
  padding-bottom: 2rem;
  display: block;
}

.footer img {
  width: 6rem;
  margin: 0 auto;
  display: block;
}

.footer .link {
  font-weight: 300;
}


.videoframe {
 position: fixed;
top: 5.5rem;
}

.video {
	width: 100%;
	margin: 0 auto;
	max-height: 50rem;
max-width: 1400px;
}