body {
     font-family : 'Roboto Mono', monospace;
     font-size : 12px;
     width : 80%;
     margin: 100px auto;

   background: url(../images/bg3.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
	background-size: cover;
	/* background-blend-mode: overlay;
	background-color: #9ec0dd; */
}
 .name {
     color : #222222;
     font-size : 12px;
     position : relative;
     left : 0;
}
 .contact {
     color : #222222;
     font-size : 12px;
     font-style : italic;
     position : relative;
     left : 0;
     margin : 2px 0;
     padding : 2px 0;
}
 a:link {
     padding : 2px 5px;
     color : black;
     text-decoration : none;
     background-color : white;
     line-height: 2;
}
 a:visited {
     padding : 2px 5px;
     color : black;
     text-decoration : none;
     background-color : white;
}
 a:hover {
     padding : 2px 5px;
     color : white;
     text-decoration : none;
     background-color: #004166;/*background-color : black;*/
}


button {
	font-family : 'Roboto Mono', monospace;
	border: none;
	text-align: left;
	outline: none;
	color : #222222;
	font-size : 12px;
	position : relative;
	left : 0;
  background-color : white;
  margin: 4px 0px 0px 0px;
}
button:hover {
	color : white;
    height: auto;
    text-decoration : none;
    background-color: #004166;/*background-color : black;*/
}
.year {
	margin-left : 2px;
}
.year button {
	background-color: rgba(0,0,0,0.2);
	color: white;
}
.year button:hover {
	background-color: rgba(255,255,255,0.2);
	color: black;
}
 .project {
     width : auto;
     font-size : 12px;
     color : #000000;
     text-align : justify;
     position : relative;
     margin-left : 4px;
}
 .project_title {
     font-size : 12px;
     padding : 2px 0;
}
 .project_desc {
     font-size : 12px;
     padding : 2px 5px;
     margin-left : 2px;
     background-color : white;
     opacity : 0.7;
}
 .whitebg {
     padding : 2px 5px;
     background-color : white;
}


.blk {
	color: black;
}


.button {
  display: inline-block;
  border: none;
}

.button:hover {
  /*background-color: darkgray;*/
background-color: #004166;
}

.button:active,
.button.is-checked {
  /*background-color: rgba(0,0,0,0.8);*/
  background-color: #004166;
}

.button.is-checked {
  color: white;
}

.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

/* ---- button-group ---- */

.button-group {
  margin-bottom: 0px;
}

#sorts {
  margin-bottom: 20px;
}

input[type=text] {
   border: 0px;
   font-family : 'Roboto Mono', monospace;
     font-size : 12px;
     margin-top:2px;
     margin-bottom: 3px;
     border-radius: 0px;
     padding: 0px;
}
.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
}

/* ---- isotope ---- */

.grid {
	margin:-10px;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .element-item ---- */

.grid-sizer,
.element-item {
  width: 20%;
}
@media screen and (max-width: 1440px) {
	.grid-sizer,
	.element-item {
	    width: 25%;
	}
}

@media screen and (max-width: 1080px) {
	.grid-sizer,
	.element-item {
	    width: 33%;
	}
}

@media screen and (max-width: 720px) {
	.grid-sizer,
	.element-item {
	    width: 50%;
	}
}

@media screen and (max-width: 420px) {
	.grid-sizer,
	.element-item {
	    width: 100%;
	}
}


.element-item {
  float: left;
}

.element-div {
  padding: 0px;
  margin: 10px;
  margin-bottom: 15px;
  background: #2f586b;/*#4b7d7e;/*rgba(0,0,0,0.6);*/
  color: white;
	z-index: -2;

}

.element-item .elem-content > * {
  position: relative;
  margin: 4px;
  padding: 4px;
  text-transform: none;
  letter-spacing: 0;
  color: white;
}

.element-item .title {
	margin-top: -6px;
	margin-bottom: 2px;
	z-index: 100;
	position: relative;
}

.element-item .visuel {
	top:0px;
	left:0px;
	width:100%;
	margin: 0px;
	padding: 0px;
	filter: grayscale(1);
	transition: 0.4s;
}

.element-item .visuel:hover {
	filter: grayscale(0);
}

}

.element-item .year {
  font-size: 10px;
  font-weight: normal;
  font-style: italic;
}

.element-item .description {
  font-size: 12px;
  font-weight: normal;
}

.element-item .with {
  font-size: 10px;
  font-weight: normal;
}

.customToastr {
  background: rgba(0,0,0,0.6);
}
#toast-container {
  font-family : 'Roboto Mono', sans-serif;
}
#toast-container > div {
  border-radius: 0px;
}
#toast-container.toast-bottom-full-width > div {
  width: 100%;
  margin: 0px;
}

.icon, .name {
  font-size: 15px;
  display: inline;
}

.disappear {
  display: none
}

@media screen and (max-width: 800px) {
  .disappear {
    display: inline-block;
  }

  .icon, .name {
    display: block;
  }
}

@media screen and (max-width: 420px) {
  .name {
    font-size: 12px;
  }
  .element-item .with {
    font-size: 12px;
  }
}

.page-load-status {
  display: none; /* hidden by default */
  padding-top: 20px;
  /* border-top: 1px solid #DDD; */
  text-align: center;
  color: #777;
}

.loader-ellips {
  font-size: 10px; /* change size here */
  position: relative;
  width: 4em;
  height: 2em;
  margin: 10px auto;
}

.loader-ellips__dot {
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  background: #2f586b; /* change color here */
  position: absolute;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.loader-ellips__dot:nth-child(1),
.loader-ellips__dot:nth-child(2) {
  left: 0;
}
.loader-ellips__dot:nth-child(3) { left: 1.5em; }
.loader-ellips__dot:nth-child(4) { left: 3em; }

@keyframes reveal {
  from { transform: scale(0.001); }
  to { transform: scale(1); }
}

@keyframes slide {
  to { transform: translateX(1.5em) }
}

.loader-ellips__dot:nth-child(1) {
  animation-name: reveal;
}

.loader-ellips__dot:nth-child(2),
.loader-ellips__dot:nth-child(3) {
  animation-name: slide;
}

.loader-ellips__dot:nth-child(4) {
  animation-name: reveal;
  animation-direction: reverse;
}