/* Fonts */

@font-face {
  font-family: "Ladoni-regular";
  src: url("../fonts/Ladoni/Ladoni-Book.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Ladoni-italic";
  src: url("../fonts/Ladoni/Ladoni-Italic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}



@font-face {
  font-family: "Pitch-medium";
  src: url("../fonts/Pitch Sans Test/PitchSansTest-Medium.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Pitch-medium-true";
  src: url("../fonts/Pitch Sans Licensed/pitch-sans-medium.woff2") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Pitch-regular";
  src: url("../fonts/Pitch Sans Test/PitchSansTest-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Pitch-light";
  src: url("../fonts/Pitch Sans Test/PitchSansTest-Light.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Pitch-light-true";
  src: url("../fonts/Pitch Sans Licensed/pitch-sans-web-light.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Comic Sans MS";
  src: url("../fonts/ComicSansMS.woff");
}

/* Main */

body {
  font-family: "Arial";
  text-transform: none;
  font-size: 18px;
  font-weight: 200;
  color: #0f0f0f;
  line-height: 25px;
  letter-spacing: 0.02em;
  background-color: #ffffff;
  max-width: 1250px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
}

a {
  color: currentColor;
  text-decoration: none;

}


a {
  cursor: pointer;
  user-select: none;
}

/* general list */

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 0;
  margin: 0;
  display: inline;
}


.header {
  font-family: Arial;
  font-style: italic; 
  text-decoration: none; 
  font-size: 17px;
  letter-spacing: 0.04em;		
}


.title {
  font-family: "Pitch-medium", "Pitch-medium-true", "Arial";  
  font-size: 21px; 
  font-weight: 200;
  letter-spacing: 0.0em;
		
}


.details {	
  font-family: Arial; 
  font-size: 18px; 
  letter-spacing: 0.04em;
			
}


.button {
  border:1.5px solid #333;
  background-color:white;
  border-radius:30px;
  padding-left:8px;
  padding-right:8px;
  padding-bottom:2px;
  line-height: 36px;	

}

html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
}


.squarebutton {
  border:1.5px solid #333;
  background-color:white;
  border-radius:0px;
  padding-left:8px;
  padding-right:8px;
  padding-bottom:2px;
  line-height: 36px;
	
}


.about {

}

.aboutmenu {
  box-shadow: none !important;
  font-family: "Helvetica";
}

@media (hover: hover) {
  .aboutmenu:hover {
    box-shadow: none !important;
  }
}

/* menu */
.menu {
  font-family: Arial;
  font-size: 18px;
  display: block;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.02em;
  user-select: none;
  color: #0f0f0f;
	
}
.menu.is-active {
  display: block;
}

.menu a {
	font-family: Arial;
	font-size: 18px;
	letter-spacing: 0.02em;
	font-weight: 400;

}

.menu a:hover {
	
	/*text-decoration: none;
	color: black;*/
} 

a[data-id="about"].is-active:hover {
  box-shadow: none !important;
}

body.--about li a:not(.is-active) {
  display: none;
}

.menu ul a span:last-child {
  display: none;
}

.menu ul li a.is-active span:last-child {
  display: inline;
}

.menu ul li a.is-active span:first-child {
  display: none;
}

.menu-inner {
  display: none;
  margin-top: 20px;
}
.menu-inner.is-active {
  display: block;
	
}

.menu-toggle {
  font-size: 23px;
  font-weight: 400;
  font-family: Helvetica;
  text-transform: none;
  cursor: pointer;
}

/* on about hide menu toggle */
.--about .menu-toggle {
  display: none;
}

/* add to .menu a in case you want to show buttons */
.btn {
  border: 2px solid #333;
  border-radius: 25px;
  padding: 0 10px 5px;
  font-size: 42px;
}

@media (hover: hover) {
.btn:hover {
  text-decoration: none;
  color: #999;
}
}
/* sub-menu */

.sub-menu {
  max-width: 1380px;
  border: none;
  padding-right: 30%;
}

.sub-menu > div {
  display: none;
}

.sub-menu > div.is-active {
  display: block;
}

.filter a {
	font-family: pitch-medium;
	font-weight: 400;	
	font-size: 18px;
	color: #0f0f0f;
}

.filter.--filter-active a,
.filter.--filter-hover a{
  color: gainsboro;
  border-color: gainsboro;
}


.filter a.is-active {
	color: #0f0f0f;
  border-color: #0f0f0f;
  text-decoration: none;
}

@media (hover: hover) {
  .filter a:hover {
    color: #0f0f0f;
  border-color: #0f0f0f;
   text-decoration: none;
    box-shadow: none;
  }
	
  a:hover {
    color: #EEEEEE;
    text-decoration: none;
    /* underline with box-shadow for control of underline height
    box-shadow: inset 0 -0.175em white, inset 0 -0.22em currentColor;
    /* text-shadow: -2px -2px white, -2px 2px white, 2px -2px white, 2px 2px white; */
  }
}

@media (hover: none) {
  a, a:hover {
    text-decoration: none !important;
  }
}

/* main */

.main {
  max-width: 1380px;
  border: none;
  padding-right: 20%;
}
@media (hover: hover) {
  .main a:hover {
    color: #EEEEEE;
    text-decoration: none;
    
  }
}

::-moz-selection { /* Code for Firefox */
  color: #EEEEEE;
  background: #336FFF;
}

::selection {
  color: #EEEEEE;
  background: #336FFF;
	border:1.5px solid #FFFFFF;
}


body.--about .main {
  display: none;
}

.works {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #0f0f0f;
}

.works.--works-hover li{
  color: gainsboro;
}
.works.--works-hover.--works-active li{
  color: #0f0f0f;
}
.works.--works-hover.--works-active li.is-hidden{
  color: gainsboro;
}
.works.--works-hover.--works-active li.is-hidden.is-hover{
  color: #0f0f0f;
}
.works.--works-hover li.is-hover{
  color: #0f0f0f;
}
.works li {
  padding: 0;
  margin: 0;
}

/* adjusting spaces between links */



.semicolon {
  margin-right: -5px;
}

.works li:last-child:after {
  content: "";
}

.works li.main {
  color: #000 !important;
}

.works li.main:after {
  content: "";
}

/* for gray */
.works li.is-hidden {
  color: gainsboro
}

/*this is for hover*/
.works li.is-hover,
.works li.is-hover a {
  color: #000;
   /*font-weight: 600;*/
}
.works .header{
  color: #000;
}

/* for hiding */

.works li.is-last:after {
  content: "";
}
/* .works li.is-hidden {
  display: none;
} */

.works li a {
  color: currentColor;
}

.last-update {
  display: block;
  font-size: 13.5px;
  padding: 0px 0 20px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #111;
  max-width: 400px;
  /* This is what caused the overflow problem */
  /* min-width: 300px; */
  /* padding-right: 60%; */
  font-family: Helvetica;
  text-transform: capitalize;

}

/* tooltip  styling*/
.tooltip {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: auto;
  padding: 10px;
  background: rgb(53, 53, 53);
  border-radius: 5px;
  pointer-events: none;
}

.tooltip img {
  width: 250px;
  height: auto;
  border-radius: 5px;
}

.tooltip span {
  width: 250px;
  height: auto;
  font-size: 14px;
  color: #FFFFFF;
  text-decoration: underline;
  overflow-wrap: break-word;
}

.navNewLine {
  display: none;
}

.mobileOnly {
  display: none;
}

/************************/
/****** Mobile CSS ******/
/************************/

@media only screen and (max-width: 700px) {
  /* mobile css */
  body {
	  

  }
	
	a {
	

		
	}
	
  .main {
    max-width: 100%;
    padding-right: 4%;
  }

  stacked menu for mobile .menu li {
    width: 100%;
    display: block;
  }

  .menu {
    padding-right: 5%;
  }
	
	.about {
	padding-right: 5%;
	}

  .mobileOnly {
    display: inline-block;
  }
	


  .sub-menu {
    max-width: 100%;
    padding-right: 4%;
  }

  .last-update {
    max-width: 100%;
  }

  .navNewLine {
    display: block;
  }


body.--about ul.menu-inner.is-active {
  margin-top: 0px;
}

}