/* 31/07/17 */
/*-----The overall page styling-----*/

@font-face		{
	font-family: Gill Light SSi Light;
	src: url('gill_light_ssi_light.ttf'),url('gill_light_ssi_light.eot'); /* IE9 */
	}

html,body,div,p {
	font-family: Gill Light SSi Light , arial narrow , century gothic , arial , sans-serif;
	font-size: 100%;
	letter-spacing: 4px;
	color: #000000;
	}
		
html {
	width: 100%;
	height: 100%;
//	margin: 0;
	background-color: #ffffff;
	}

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #ffffff;
	}
	
img	{
	image-rendering: -webkit-optimize-contrast;
	}

/*------Styling for the three main content blocks------*/

.head_block	{
	width: 100%;
	margin: 0%;
	padding: 1% 0%;
	background-color: white;
	transition: height 1s ease-in-out;
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	display: block;
	}

.title_block	{
	}



.social	{
	position: absolute;
	top: 4px;
	right: 70px;
	width: 2.2em;
	text-align: center;
	margin: 0px 0px;
	line-height: 80%;
	transition: width 1s ease-in-out;
		}



img.icon	{
	padding: 0px 5px;

	height: 25x;
	width: 25px;
	}


#nav_block		{
	position: fixed;
	bottom: 0px;
	height: 0px;
	width: 100%;
	margin: 0px;
	padding: 0px;
	border-style: solid;
	border-width: 1px 0px 0px 0px;
	background-color: #ffffff;
	transition: 1s;
}

.content_block	{
	width: 100%;
//	margin: 0px;
	padding: 0.5em 0em 1em 0em;
	background-color: white;
	transition: padding 1s ease-in-out;
}
.bar	{
/*	position: fixed;
	top: 62px;
	width: 100%;
	height: 1px;
	margin: 0;
	padding: 0;
	border-top: 1px solid black;
	transition: top, left, 1s ease-in-out;
*/
	}

.proj_table,td	{
	height:150px;
	border: 1px solid black;
	margin: 0px;
	padding: 20px 0px 0px 0px;
	vertical-align: top;
	border-collapse: collapse;
	}

.proj_table		{

	width: 95%;
	max-width: 1200px;
	margin: 0px auto;
	background-color: #ff00ff;
	vertical-align: top;
	}

/*------Navigation bar styling------*/

ul.nav {
		width:100%; 
		margin: 0px 0px 0px 0px;
		padding: 0px;
		background-color: #ffffff;
		list-style-type: none;
		text-align: center;

	}

ul.nav li a	{

		color: #000;
		padding: 0px 5px 0px 5px;
		font-size: 1.1em;
		text-decoration: none;
		text-align: center;
		border: 0px solid #ffffff;
		}
		
ul.nav li a.active	{
		background-color: #eeeeee;
		color: #000000;
		border: 0px solid #808080;
		}
		
ul.nav li a:hover:not(.active) {
		background-color: #808080;
		color: #ffffff;
		border: 0px solid #808080;
		transition: background .5s ease-in-out, color .5s ease-in-out, border .5s ease-in-out;
		-moz-transition: background .5s ease-in-out, color .5s ease-in-out, border .5s ease-in-out;
		-webkit-transition: background .5s ease-in-out, color .5s ease-in-out, border .5s ease-in-out;
		}

ul		{
		/* background-color: #00ffff; test for list gallery*/
		width:100%; 
		margin: 0px 0px 0px 0px;
		padding: 0px;
		list-style-type: none;
		/*text-align: center;*/
}
li		{
		display: block;
		
}


.nav_block .closebtn {
	position: absolute;
	top: 0px;
	right: 0px;
	border: 0px;
	font-size: 36px;
	}


#mynav	{
	background-color: #ffffff;
	}

	
a:link, a:visited, a:hover, a:active {
	text-decoration: none;
	color: black;
}
	
/*------Coloumn styling------*/

.gallery-wrap {
	width: 95%;
	max-width: 1220px;
	margin: 0px auto;
	padding: 0px 0px 50px 0px;
	}

.gallery {
	-webkit-column-count: 1; /* Chrome, Safari, Opera */
	-moz-column-count: 1; /* Firefox */
	column-count: 1;
	
	-webkit-column-gap: 10px; /* Chrome, Safari, Opera */
	-moz-column-gap: 10px; /* Firefox */
	column-gap: 10px;

	-webkit-transition: coloumn-count 2s; /* Safari */
	transition: coloumn-count 2s;
	}

	
.idx-gallery {
	-webkit-column-count: 1; /* Chrome, Safari, Opera */
	-moz-column-count: 1; /* Firefox */
	column-count: 1;
	
	-webkit-column-gap: 10px; /* Chrome, Safari, Opera */
	-moz-column-gap: 10px; /* Firefox */
	column-gap: 10px;

	-webkit-transition: coloumn-count 2s; /* Safari */
	transition: coloumn-count 2s;
	}

.idx-gallery img {
	padding: 5px 0px;
	width: 100%;
	max-width: 400px;
	}
	
.idx-gallery a {
        pointer-events: none;
}

.gallery img {
	padding: 5px 0px;
	width: 100%;
	max-width: 400px;
	}



/*------General styling------*/

.content	{
	margin: 0px;
	padding: 0px 20px 0px 0px;
	border: 0;
	text-align: center;
	}




.title_1		{
	font-size: 2.5em;
	padding: 0px 0px 0px 2.5%;
	}

.title_2		{
	padding: 0px 0px 0px 2.5%;
	}

.small			{
		font-size: 0.5em;
		}

#copy			{
		display: inline;
		font-size: 0.5em;
		line-height: 0em;
		margin: 0 0 0 5px;
		}

.menu		{
	width: 40px;
	height: 40px;
	font-size: 30px;
	text-align: center;

	position: fixed;
	top: 4px; left: 85%;		//for older browsers we set the position to the left 85% this will scale the position acording to the view-port size
	top: 4px; left: -moz-calc(100% - 50px);		//Newer browsers will implement the old code then implement the new code that places the buton at a specific position relative to the viewport
	top: 4px; left: -webkit-calc(100% - 50px);
	top: 4px; left: calc(100% - 50px);
	border: 0px;
	
	background-color: transparent;
	cursor: pointer;
	}

#close		{
	width: 40px;
	height: 40px;
	/*position: relative;*/
	position: fixed;
	top: 4px; left: 85%;		//for older browsers we set the position to the left 85% this will scale the position acording to the view-port size
	top: 4px; left: -moz-calc(100% - 50px);		//Newer browsers will implement the old code then implement the new code that places the buton at a specific position relative to the viewport
	top: 4px; left: -webkit-calc(100% - 50px);
	top: 4px; left: calc(100% - 50px);
	border: 0px;
	display: none;
	}
	
#imagelightbox
{
    position: fixed;
    z-index: 9999;
 
    -ms-touch-action: none;
    touch-action: none;
}


/*------MEDIA QUERIES------*/

@media screen and (min-width: 450px) {
	.idx-gallery {
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
	-moz-column-count: 2; /* Firefox */
	column-count: 2;
	}
	.idx-gallery a {
	pointer-events: auto;
	}
	
	.gallery {
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
	-moz-column-count: 2; /* Firefox */
	column-count: 2;
	}
	
	}


@media screen and (min-width: 420px) {
	li	{
	display: inline-block;
	}
	}


@media screen and (min-width: 720px) {
	.social {
	width: 4.5em;
	}
	
	.gallery {
	-webkit-column-count: 4; /* Chrome, Safari, Opera */
	-moz-column-count: 4; /* Firefox */
	column-count: 4;
	}
	
	.idx-gallery {
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
	-moz-column-count: 3; /* Firefox */
	column-count: 3;
	}
	}






















	
@media screen and (min-width: 840px) { /*------Styling for screens > 840px------*/
/*
		.head_block		{
			height: 128px;
		}

		.title_block	{
			height: 100px;
		}
		
		.nav_block		{
			top: 100px;
			width: 100%;
		}
		
		.content_block	{
			padding: 130px 0px 0px 0px;
		}
		
		.title_1		{
			font-size: 4em;
	}
	
		.title_2		{
			position: absolute;
			top: 3.5em;
			left: .3em;
			font-size: 1.2em;
}

		.bar	{
			top: 128px;
		}
*/





}