@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;600&display=swap');
ul.nostyle {
  list-style: none;
  margin-top: 0;
  padding-left: 0;
}
body.interactive-content-expanded header,
body.interactive-content-expanded nav,
body.interactive-content-expanded .interactive-ctrl {
  overflow: hidden;
  height: 0;
  opacity: 0;
  padding: 0;
}
body header,
body nav,
body .interactive-ctrl {
  transition: all .75s;
}
nav ul.nostyle li {
  vertical-align: middle;
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
nav ul.nostyle li .sep {
  margin: 0 0.5em;
  font-size: 14px;
}
nav ul.nostyle li:last-child:after {
  display: none;
}
nav ul.nostyle li:last-child i {
  display: none;
}
nav ul.nostyle li >a {
  text-decoration: none !important;
  font-size: 18px;
}
nav ul.nostyle.reactive li {
  display: none;
}
nav ul.nostyle.reactive li:last-child {
  display: inline-block;
  vertical-align: middle;
  *display: inline;
  *zoom: 1;
}
.stylecontent {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-size: contain;
}
.stylecontent .top,
.stylecontent .bottom {
  position: absolute;
  left: 0;
  right: 0;
}
.stylecontent .top:before,
.stylecontent .top:after,
.stylecontent .bottom:before,
.stylecontent .bottom:after {
  position: absolute;
  content: ' ';
  height: 100%;
  background-repeat: no-repeat;
  top: 0;
}
.stylecontent .top >.middle,
.stylecontent .bottom >.middle {
  background-repeat-x: repeat;
  position: absolute;
  top: 0;
  bottom: 0;
}
.stylecontent .top:before,
.stylecontent .bottom:before {
  left: 0;
}
.stylecontent .top:after,
.stylecontent .bottom:after {
  right: 0;
}
.stylecontent .top {
  height: 235px;
  top: 0;
}
.stylecontent .top:before {
  background-image: url('../img/penboard_7.png');
  width: 300px;
  background-position: left top;
}
.stylecontent .top:after {
  background-image: url('../img/penboard_9.png');
  width: 309px;
  background-position: right top;
}
.stylecontent .top >.middle {
  background-image: url('../img/penboard_8.png');
  left: 300px;
  right: 309px;
}
.stylecontent .centerpart {
  top: 235px;
  bottom: 50px;
  position: absolute;
  left: 0;
  right: 0;
}
.stylecontent .centerpart:before,
.stylecontent .centerpart:after {
  content: ' ';
  position: absolute;
  background-repeat-y: repeat;
  height: 100%;
}
.stylecontent .centerpart:before {
  background-image: url('../img/penboard_4.png');
  width: 300px;
  left: 0;
}
.stylecontent .centerpart:after {
  background-image: url('../img/penboard_6.png');
  width: 309px;
  right: 0;
}
.stylecontent .centerpart .middle {
  background-color: #6DA9F1;
  left: 300px;
  right: 300px;
  height: 100%;
  position: absolute;
  top: 0;
}
.stylecontent .bottom {
  height: 50px;
  bottom: 0;
}
.stylecontent .bottom:before {
  background-image: url('../img/penboard_1.png');
  width: 80px;
  background-position: left top;
}
.stylecontent .bottom:after {
  background-image: url('../img/penboard_3.png');
  width: 80px;
  background-position: right top;
}
.stylecontent .bottom >.middle {
  background-image: url('../img/penboard_2.png');
  left: 80px;
  right: 60px;
}
.stylecontent .editor {
  font-size: 22px;
  font-weight: bold;
  left: 5%;
  right: 5%;
  bottom: 10%;
  top: 10%;
}
.stylecontent >.editor {
  overflow-y: scroll;
  overflow-x: hidden;
}
.container {
  width: 100%;
  max-width: 1250px;
}
.container >.container-margin {
  margin: 0 1.5em;
}
[draggable] {
  touch-action: none;
  user-select: none;
  moz-user-select: none;
  webkit-user-select: none;
  ms-user-select: none;
}
.abs {
  position: absolute;
}
.abs._1,
.abs._2,
.abs._3,
.fix._1,
.fix._2,
.fix._3 {
  bottom: 0;
}
.abs._1,
.abs._4,
.abs._7,
.fix._1,
.fix._4,
.fix._7 {
  left: 0;
}
.abs._7,
.abs._8,
.abs._9,
.fix._7,
.fix._8,
.fix._9 {
  top: 0;
}
.abs._9,
.abs._3,
.abs._6,
.fix._9,
.fix._3,
.fix._6 {
  right: 0;
}
.inlineBlock {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
#popup {
  margin: 0px auto auto 5px;
  background: #fff;
  border-radius: 5px;
  width: 100%;
  position: absolute;
  transition: all 5s ease-in-out;
  z-index: 1000;
}
.popup {
  background-color: #fffffff2;
  padding: 20px 30px;
  width: 50%;
  border-radius: 15px;
  border: 1px solid;
}
.popup-container {
  height: 50vh;
}
.overlay-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  z-index: 1000;
  background: #000;
  background: rgba(0,0,0,0.75);
}
.popup > h2 {
  font-size: 1.6rem;
  margin-bottom: 10px;
}
.popup > p {
  font-size: 1.2rem;
  margin-bottom: 10px;
}