/*
 *  layout
 */
 body {
  width: 100%;
  margin: 0; }

.fill{
  width: 100%;
}
.full {
    width: 100%;
    float: left;
    margin: 0}

.clear {
  clear: both;
  display: inline-block; }

.brimage{
  margin-top: 10rem;
}

/* Small devices (portrait phones, 450px and down) */
@media only screen and (max-width: 1079px) {
  .s-full {
    width: 90%;
    margin: 0 auto;}
  .s-hide {
    display: none; }
 }

/* medium (lbetween phone and laptop 
@media only screen and (min-width: 500px) and (max-width:1079px) {
  .m-container{
    margin: 32px}
  .m-full {
    width: 100%;
    float: left;
    margin: 0 0 5px 0}
  .m-float {
    width: 456px;
    margin: 0 auto;
    display: flow-root;}
}
/* full (landscape tablets, 1080px iPad 10.2″ (2021) and up) */
@media only screen and (min-width: 1080px) {
  .l-col6 {
    width: 530px;
    margin-right: 5px; 
    margin-left: 5px; 
    float: left;}
  .l-col12 {
    width: 1080px;
    margin: 0 auto;
    display: block;
    position: relative; 
  }
}


/* top */
.toptitle{
  position: fixed;
  top: 0;
  right: 0;
  margin: 2.7rem 2rem;
  z-index: 102;
}
/* menu */
.burgercontainer{
  position: fixed;
  top: 0;
  left: 0;
  margin: 2rem;
  height: 2.5rem;
  display: inline-block;
  cursor: pointer;
  z-index: 102;
}

.bar1, .bar2, .bar3 {
  width: 2.5rem;
  height: 0.1rem;
  background-color: #333;
  margin: 0.7rem 0;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 0.8rem) rotate(-45deg);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
  transform: translate(0, -0.8rem) rotate(45deg);
}

.hidden{
  display: none;
}
.show{
  display: block;
}

.menu-container{
  clear: both;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  padding: 6rem 2rem;
  background-color: #ffffff;
  z-index: 101;
  }