/* @font-face {
   font-family: 'Helvetica';
   src: url('fonts/helvetica.otf') format('opentype');
   font-weight: 400;
   font-style: normal;
} */

/* @font-face {
   font-family: 'Helvetica';
   src: url('fonts/helvetica-bold.otf') format('opentype');
   font-weight: 500;
   font-style: normal;
} */

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

@font-face {
   font-family: 'helveticarounded_bold';
   src: url('helvetica-bold-webfont.woff2') format('woff2'),
      url('helvetica-bold-webfont.woff') format('woff');
   font-weight: 300;
   font-style: normal;
}

:root {
   --color-main1: #363633;
   --color-main2: #3d5a80;
}

body {
   font-size: 14px;
   font-family: 'Helvetica';
   color: var(--color-main1);
}

.mysidebar {
   min-height: 100vh;
   border-right: 1px solid #cecece;
}

.namestrong {
   font-size: 1.1em;
   font-weight: bold;
   font-style: italic;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
   font-weight: bold;
}

a {
   color: var(--color-main1);
   text-decoration: none;
}

.menu1 {
   font-weight: 600;
   text-decoration: underline;
   font-style: italic;
}

.menu2 {
   font-style: italic;
}

a:hover,
a.active {
   text-decoration: line-through;
   color: var(--color-main2);
   font-weight: 600;
   font-style: italic;
}

a.superactive {
   text-decoration: underline line-through;
   color: var(--color-main2);
   font-weight: 600;
   font-style: italic;
}

.work-thumbnail {
   overflow: hidden;
}

.js .work-thumbnail {
   opacity: 0;
   transform: translateY(16px);
   transition: opacity .55s ease, transform .55s ease;
   will-change: opacity, transform;
}

.js .work-thumbnail.is-visible {
   opacity: 1;
   transform: translateY(0);
}

.work-thumbnail img {
   transition: transform .35s ease;
}

@media (hover: hover) {
   .work-thumbnail:hover img,
   .work-thumbnail:focus-visible img {
      transform: scale(1.05);
   }
}

@media (prefers-reduced-motion: reduce) {
   .js .work-thumbnail {
      transition: none;
   }

   .work-thumbnail img {
      transition: none;
   }
}

@media (max-width: 767px) {

   ol,
   ul {
      padding-left: 1rem;
   }

}

@media (min-width: 768px) {
   body {
      font-size: 16px;
   }
}

@media (min-width: 1400px) {
   body {
      font-size: 18px;
   }
}

@media (min-width: 1800px) {
   body {
      font-size: 20px;
   }
}

/* ########### START Mobile Menu ########### */
.hide-mymobilemenu-tg {
   position: absolute;
   top: 0;
   left: 0;
   font-size: 14px;
   padding: 0 5px 5px 0;
}

.main-nav {
   position: fixed;
   z-index: 100;
   top: 0;
   left: 0;
   width: 100%;
   background-color: white;
}

.main-nav-bottom {
   border-bottom: 1px solid #cecece;
}

.mymobilemenu {
   position: fixed;
   z-index: 101;
   top: 0;
   /* right: -100%; */
   right: -340px;
   height: 100vh;
   /* width: 100%; */
   width: 340px;
   background-color: white;
   font-size: 18px;
   overflow-y: scroll;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
   transition: .3s;
}

body.show-mobile-menu .mymobilemenu {
   right: 0;
}

body.show-mobile-menu .container-blur {
   filter: blur(4px);
   opacity: 0.5;
}

.myprofile {
   max-width: 130px;
   vertical-align: baseline;
}

@media (min-width: 1200px) {
   .myprofile {
      max-width: 180px;
   }
}

/* ########### END Mobile Menu ########### */
@media (max-width: 1199px) {
   body.no-page-slug .hide-no-page-slug {
      display: none !important;
   }

   body.has-page-slug .show-no-page-slug {
      display: none !important;
   }

   body.no-page-slug .show-no-page-slug {
      display: block !important;
   }

   body.no-page-slug .mysidebar {
      border-right: 0;
      font-size: 19px;
   }

   body.no-page-slug .mysidebar {
      padding-top: 5px !important;
   }

   body.no-page-slug .before-mysidebar {
      padding-top: 0px !important;
   }
}