@media (max-width: 768px) {
  body{
   padding: 0px 0px 10px 0px !important;
  }
}

@media (min-width: 992px) {
  .offset-left{
    margin: 0px 60px 0px -87px!important
  }
}

body {
  padding: 50px;

  /* font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto; */
  font: 14px "Work Sans", sans-serif;
  font-family: "Work Sans", sans-serif!important;
  background-image:  url(../images/noise-2.png);
  opacity: 1;
}

p {  
  padding-top: 15px;
  font-size: 15px;
}

h1{
  font-weight: 600!important;
}

h2{
  color: #000!important;
  border: solid #000;
  border-width: 0px 0px 0px 18px;
  padding: 0px 0px 0px 7px;
  margin-left: -0px;
  font-size: 25px !important;
  font-weight: 600 !important;
}

h3{
  border: solid #000;
  border-width: 0px 0px 0px 4px;
  padding: 0px 0px 0px 7px;
  margin-left: 0px;
  color: #000 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
}
iframe{
  margin: 0 auto;
  display: block;
  border: solid #000;
  border-width: 1px 1px;
}

.pattern-bg-1{
  background-image:  url(../images/pattern-2.png);
}

.title {
  color: #000;
  text-align: right;
  font-size: 40px;
  white-space: nowrap;
}

.title-2 {
  color: #000;
  text-align: left;
  font-size: 40px;
  white-space: nowrap;
}

a:hover{
  color: #00B7FF;
}

.navigation{
  list-style: none;
}

.left-panel{
  margin-top: 30px;
  padding-right: 12px!important;
  padding-left: 50px!important;
}

@media (min-width: 992px) {
  .sticky-navigation{
    position: sticky!important;
    top: 2rem;
  }
}

.navigation-link{
  text-align: right;
  border: solid #F0F0F0;
  border-width: 1px 2px;
  padding: 3px;
  background-color: #000;
  color:#000;
  margin-left: 100px;
}

.navigation-link b{
  font-weight: 600;
  letter-spacing: 0.5px;
  color:#F0F0F0;
}

.navigation-link b:hover{
  color:#F0F0F0;
}

.navigation-link-selected{
  list-style:square;
}

.navigation-link:hover{
 background-color: #333;
}

.content{
  border: solid #000;
  border-width: 0px 3px 0px 3px;
  margin-top: 30px;
  padding: 10px 20px 50px 20px;
}

.img-small{
  max-width: 55%;
  border-width: 1px;
  border: solid #000;
  border-width: 1px 1px;
  display: block;
  margin: 0 auto;
}

.img-game{
  display: block;
  margin: 0 auto;
  width: 85%;
  border-width: 1px;
  border: solid #000;
  border-width: 1px 1px;
}

.img-porting{
  width:220px;
  border: solid #000;
  border-width: 2px;
  display: block;
  margin: 0 auto;
}

.img-visual{
  width: 266px;
  border-width: 1px;
  border: solid #000;
  border-width: 1px 1px;
  display: block;
  margin: 14px auto;
}

.container-img-visual{
  display: block;
  margin: 12px auto!important;
  width: 84.5%;
}

.col-porting{
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: left;
  width: 220px;
  margin: 20px 8px;
  
}

.img-80{
  width:80%;
  border-width: 1px;
  border: solid #000;
  border-width: 1px 1px;
  display: block;
  margin: 0 auto;
}

.img-60{
  width: 60%;
  border-width: 1px;
  border: solid #000;
  border-width: 1px 1px;
  display: block;
  margin: 0 auto;
}

.vertical-thin{
  width:60px;
  height:200px;
}

.button{
  color: #000 !important;
  background-color: #fbfbfb;
  padding: 6px 50px;
  font-weight: 600;
  display: block;
  margin: 10px auto;
  border: solid #333;
  border-width: 2px;
}

button:hover{
  background-color: #fff;
}

.button-porting{
  padding: 1px 1px;
  width: 220px;
  margin-top: 2px;
  margin-bottom: 18px;
  font-weight: bold;
}

hr{
  border-top: 0px solid #000 !important;
  width: 6px;
  padding-bottom: 30px;
}

.contact-icon{
  height: 22px;
  width: 22px;
  padding:3px;
  background-color: #000;
  margin: 0px 10px 0px 2px;
  display: inline-block;
}

.contact-link{
  vertical-align: super;
  font-weight: bold;
  color: #000;
}

.contact-icon-layout-container{
  text-align: right;
  margin-right: -5px;
  margin-top: 10px;
}

.contact-icon-layout{
  height: 26px;
  width: 26px;
  padding: 3px 4px 3px 4px;
  background-color: #0000;
  fill:#888;
  margin: 1px 1px 1px 5px;
  display: inline-block;
}

.contact-icon-layout:hover{
  fill:#9a9a9a;
}

.sticky {
  position: sticky;
  top: 0;
}

.image-counter{
  color: #222;
  font-size: 12px;
  text-align: center;
}

@media (min-width: 992px) {
  .aligned-row {
    display: flex;
    flex-flow: row wrap;

    &::before {
        display: block;
    }
  }
}