/*-----------------------------------------------------------------

  CSS Illustration portfolio
  Copyright 2021 - W. Arts

-------------------------------------------------------------------*/

:root {
	
		--main-background: #000;
		--h-color: #fff; 										/* Heading color */
		--txt-color: #fff; 									/* Text color */
		--txt-color-lowcontrast: #999; 			/* Low contrast text color */
		--link-color: #ccc; 								/* Link color */
		--linkhover-color: #fff;						/* Linkhover color */
}

[data-theme="light"] {
	
		--main-background: #fff;
		--h-color: #000; 										/* Heading color */
		--txt-color: #000; 									/* Text color */
		--txt-color-lowcontrast: #999; 			/* Low contrast text color */
		--link-color: #ccc; 								/* Link color */
		--linkhover-color: #000;						/* Linkhover color */
		
}


/*-----------------------------------------------------------------

	Typography

-------------------------------------------------------------------*/

html {
		font-size: 100%;
	  height: 100%;	
}
    
body {
	  margin: 0;
    padding: 0;
	  background-color: var(--main-background);

    font-family: "Montserrat", "Arial", sans-serif;;
    font-size: 16px;
    line-height: 1.5;
    color: var(--txt-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
	  transition: background 0.5s;    
}

h1, .h1,
h2, .h2,
h3, .h3 {
    font-family: "Montserrat", "Arial", sans-serif;
    font-weight: bold;
    line-height: 1;
    text-transform:uppercase;
    color: var(--h-color);
    margin: 0;
}

h1, .h1 {
    font-size: 44px;
}

h2, .h2 {
    font-size: 34px;
}

h3, .h3 {
    font-size: 24px;
    margin: 0.2em 0 0 0;
}

p {
		display: block;
		margin: 1em 0 1em 0;
}

a {
    color: var(--link-color);
    transition: .2s all ease;
}

a:hover, a:focus {
    color: var(--linkhover-color);
}

.smallprint {
	color: var(--txt-color-lowcontrast);
	font-size: 11px;
	line-height: normal;
}

.wa-slidertitle h1 {
	opacity:0;	
	font-size: 22px;
	font-weight: bold;
	text-transform:uppercase;
  color: var(--h-color);
  animation: fadein 1.8s 1;
  animation-fill-mode: forwards;  		
}

.wa-slidersubtitle h2{
	opacity:0;
	font-size: 12px;
	font-weight: normal;
	text-transform: none;	
  color: var(--h-color);	
  animation: fadein 1.0s 1 500ms;
  animation-fill-mode: forwards;  		 	
}

/*-----------------------------------------------------------------

	Main lay-out

-------------------------------------------------------------------*/

/* .wa-layout { } */

/*-----------------------------------------------------------------

	Navigation

-------------------------------------------------------------------*/

.wa-nav {
	z-index: 999;
	position: fixed;
	top: 0px;
	right: 0px;
	width:100%;
	height: 80px;
	overflow: hidden;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.wa-logo {
	position: relative;
	margin: 10px 11px 0 11px;
	width: 60px;
	height: 60px;
	float: left;
}

svg .wa-logo-col {
	fill: var(--txt-color);
	 
}

.wa-site-title {
  opacity: 0;
	position: relative;
	width: 120px;
	height: 60px;
	float: left;
	font-size: 14px;
	line-height: 14px;
	padding-top: 27px;
  animation: fadein 0.9s 1 100ms;
  animation-fill-mode : forwards;
}

.wa-about-btn {
	position: relative;
	width: 50px;
	height: 50px;
	margin: 15px 5px 0 0;
	float: right;
	background: url('../images/b-about-sprite.png') 0px 0px;
	background-size: 50px 550px; 	
	cursor: pointer;
}


/*-----------------------------------------------------------------

	Masonry grid

-------------------------------------------------------------------*/

* { box-sizing: border-box; }

.grid {
	margin: 80px auto;
}

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

.grid-item {
	opacity: 0;
  float: left;
  width: 350px; height: 350px;
  background: #000000;
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: cover;
  cursor: pointer;
}

.grid-item-inner {
	width: 100%;
	height: 100%;
	box-shadow: inset 0 0 0px #ffcc22;
	transition: 0.5s ease;
}

.grid-item-inner:hover {
	box-shadow:inset 0px 0px 0px 10px #ffcc22;
	transition: 0.2s ease;
}

/* Appear effect for grid-items - Currently hardcoded for 22 items) */
.grid-item:nth-child(1) { animation: fadein 1.0s 1 200ms; animation-fill-mode : forwards; }
.grid-item:nth-child(2) { animation: fadein 1.0s 1 300ms; animation-fill-mode : forwards; }
.grid-item:nth-child(3) { animation: fadein 1.0s 1 400ms; animation-fill-mode : forwards; }
.grid-item:nth-child(4) { animation: fadein 1.0s 1 500ms; animation-fill-mode : forwards; }
.grid-item:nth-child(5) { animation: fadein 1.0s 1 600ms; animation-fill-mode : forwards; }
.grid-item:nth-child(6) { animation: fadein 1.0s 1 700ms; animation-fill-mode : forwards; }
.grid-item:nth-child(7) { animation: fadein 1.0s 1 800ms; animation-fill-mode : forwards; }
.grid-item:nth-child(8) { animation: fadein 1.0s 1 900ms; animation-fill-mode : forwards; }
.grid-item:nth-child(9) { animation: fadein 1.0s 1 1000ms; animation-fill-mode : forwards; }
.grid-item:nth-child(10) { animation: fadein 1.0s 1 1100ms; animation-fill-mode : forwards; }
.grid-item:nth-child(11) { animation: fadein 1.0s 1 1200ms; animation-fill-mode : forwards; }
.grid-item:nth-child(12) { animation: fadein 1.0s 1 1300ms; animation-fill-mode : forwards; }	
.grid-item:nth-child(13) { animation: fadein 1.0s 1 1400ms; animation-fill-mode : forwards; }
.grid-item:nth-child(14) { animation: fadein 1.0s 1 1500ms; animation-fill-mode : forwards; }	
.grid-item:nth-child(15) { animation: fadein 1.0s 1 1600ms; animation-fill-mode : forwards; }
.grid-item:nth-child(16) { animation: fadein 1.0s 1 1700ms; animation-fill-mode : forwards; }
.grid-item:nth-child(17) { animation: fadein 1.0s 1 1800ms; animation-fill-mode : forwards; }	
.grid-item:nth-child(18) { animation: fadein 1.0s 1 1900ms; animation-fill-mode : forwards; }
.grid-item:nth-child(19) { animation: fadein 1.0s 1 2000ms; animation-fill-mode : forwards; }	
.grid-item:nth-child(20) { animation: fadein 1.0s 1 2100ms; animation-fill-mode : forwards; }
.grid-item:nth-child(21) { animation: fadein 1.0s 1 2200ms; animation-fill-mode : forwards; }
.grid-item:nth-child(22) { animation: fadein 1.0s 1 2300ms; animation-fill-mode : forwards; }	
.grid-item:nth-child(23) { animation: fadein 1.0s 1 2400ms; animation-fill-mode : forwards; }	
.grid-item:nth-child(24) { animation: fadein 1.0s 1 2500ms; animation-fill-mode : forwards; }	

/*-----------------------------------------------------------------

	Main content

-------------------------------------------------------------------*/

.wa-main-content{
	display: block;
	margin: 80px 0 0px 0;
	width:100%;
}

.wa-footer{
	width: 100%;
	height: 50px;
	text-align: center;
	margin: 0 auto 0 auto;
}


/*-----------------------------------------------------------------

	Slider

-------------------------------------------------------------------*/

.wa-slidertitle {
	z-index: 11;
	display:block;
	position: fixed;
	bottom: 44px;
	left: 20px;		
	padding: 0;

}

.wa-slidersubtitle {
	z-index: 10;	
	display:block;
	position: fixed;
	bottom: 72px;
	left: 20px;		
	padding: 0;		
}

.wa-sliderindicator {
	opacity:0;	
	z-index: 10;	
	position: fixed;
	bottom:20px;
	left:17px;
	margin: 0;
	padding: 0;	
	font-weight: bold;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
  animation: fadein 1.0s 1 1000ms;
	animation-fill-mode : forwards;			            		
}

.wa-sliderindicator > ul {
	list-style-type: none;
	margin: 0;	
	padding: 0;		
}

.wa-sliderindicator > ul > li {
	  display: inline;
    cursor: pointer;
    margin: 0px 2px;
    text-align: left;
    font-size: 20px; 
}

.wa-sliderindicator span.active {
    color: #AFEE26;
    animation:blinking 1.5s infinite;
}
    
.wa-sliderA {
	z-index: 1;	
	display:block;
	position: fixed;
	top: 0px;
	right: 0px;	
	width: 100%;
	height: 100%;
}

.slideimg {
	opacity: 0;	
	z-index: 2;		
	display:block;
	position: fixed;
	top: 0px;
	right: 0px;	
	width: 100%;
	height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}  

.slideimg.on {
	opacity: 1;
  animation: fadein 0.6s 1;
  animation-fill-mode : forwards; 		
}

.slideimg.off {
	opacity: 1;
  animation: fadein 0.6s reverse 1;
  animation-fill-mode : forwards; 		
}


/*-----------------------------------------------------------------

	About box

-------------------------------------------------------------------*/

.wa-aboutbox {
	z-index: 99;
	position: fixed;
	top: 0px;
	right: 0px;
	width:50%;
	height: 100%;
	overflow: hidden;
	background-color:rgba(30,30,30,0.95);	
  	transform: translateX(200%);
	overflow: auto;
	max-height: 100vh;  
	vertical-align: top;
}

.wa-aboutbox-content {
	opacity: 0;
	width:75%;
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
  color: #ffffff !important;	
}

.wa-aboutbox-content h1{
	color: #ffffff !important;
}

.wa-aboutbox-content .imgright{
	float: right;    
	margin: 10px 0 0 0;
	width:40% !important;
}

.wa-aboutbox.slide-in {
	animation: slide-in 0.3s;
	animation-fill-mode : forwards;	
}

.wa-aboutbox.slide-out {
	animation: slide-out 0.5s;
	animation-fill-mode : forwards;	
}

.wa-aboutbox-content.fadein {
  animation: fadein 0.6s 1 400ms;
  animation-fill-mode : forwards;	
}

.wa-aboutbox-content.fadeout {
  animation: fadein 0.2s 1 reverse;
  animation-fill-mode : forwards;	
}


/*-----------------------------------------------------------------

	Animations

-------------------------------------------------------------------*/

@keyframes fadein {
	from {opacity: 0;}
	to {opacity: 1;}
}

@keyframes aboutanim{
	from{background-position-y:0px;}
	to{background-position-y:-500px;}
}

.aboutanimin {
	animation: aboutanim 0.2s steps(10) 1 forwards;
}

.aboutanimout {
	animation: aboutanim 0.2s steps(10) 1 reverse forwards;
}

@keyframes slide-in {
    100% { transform: translateX(0%); }
}
    
@keyframes slide-out {
    0% { transform: translateX(0%); }
    100% { transform: translateX(100%); }
}

@keyframes blinking{
0%{		color: #ffcc22;	}
50%{	color: #34470B;	}
100%{	color: #ffcc22;	}
}


/*-----------------------------------------------------------------

	Small screen tweaks

-------------------------------------------------------------------*/

@media (max-width: 800px) {	
	.wa-aboutbox {
		width:100%;
	}
}

@media (max-width: 600px) {	

	body{
    font-size: 15px;
  }
  
	h1, .h1 {
		font-size: 34px;
	}

	h2, .h2 {
		font-size: 24px;
	}

	h3, .h3 {
		font-size: 14px;
		margin: 0.2em 0 0 0;
	}

	.wa-aboutbox-content {
		margin-top: 120px;
	}
		    
}