a:link {
	color: #84414A;
	text-decoration: underline;
	}
a:visited {
	color: #84414A;
	text-decoration: underline;
	}
a:hover {
	color: #666666;
	text-decoration: underline;
	}
a:active {
	color: #84414A;
	text-decoration: underline;
	}

@font-face {
  font-family: Frutiger;
  src: url("webfont/Frutiger_LT_55_Roman.ttf") format("truetype");
}

body {
  font-family: Frutiger;
	/* font-family: Palatino; */
	background: #f6f6f6;
  font-size: 12px;
  color:#000000;
  margin: 0;
  line-height:14px;
}

body:before {
	position: absolute;
	left: 0;
	top: 0;
	height: 10px;
	background: black;
	/* content: " "; */
	transition: all 1s ease
	width:1px;
	margin-left: 50vw;
}

body.splashing:before {
	/* content: " "; */
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 10px;
	background: black;
	margin-left: 0px;
}

body.splashing {
	height: 100vh;
  overflow: hidden;
	background: white;
}



.splashing #container {
	/* max-width: 100vw; */
}

@keyframes fadeIn{
  0% {
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

.home.splashing header {
	max-width: 100vw;
}

header {
	border-top: solid black 10px;
	/* margin-bottom: 2em; */
	text-indent: 20px;
	position: relative;
	z-index: 100;
	background: white;
	transition: .4s all;
}

header .links {
	float: right;
}

header .links h1 {
	display: inline-block;
}

.main-column, header, #container {
	max-width: 850px;
	margin: 0 auto;
}

@media(min-width: 1200px){
	header, .main-column, #container{
	max-width: 1330px;
	max-width: 1050px;
}
}



#container {
  margin: 0px 50px;
	/* overflow: hidden; */
	background-color: white;
	/* max-width: 1330px; */
	margin: 0 auto;
	margin-bottom: 50px;
	transition: .4s all;
}



@media(max-width: 1250px){
	#container {
		/* max-width: 850px; */
		margin-bottom: 50px;
		padding-bottom: 2em;
		margin-bottom: 5em;
	}
}

@media(max-width: 600px){
	.projects {

	}
}

@media(max-width: 967px){
	#container {
		/* max-width: 800px; */
	}
}

@media (max-width: 768px){
	#container {
	    max-width: 650px;
	}
	.projectz.main-column .project {
		margin: 30px 10px;
	}
	body #cv.open .popout {
		max-width: none;
	}
	header {
	  max-width: 650px;
	}
}

@keyframes fadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
}

.splash {
	position: absolute!important;
	top: 0;
	left: 0;
	width: 100vw;
	/* height: calc(100vh - 74px); */
	/* background: grey; */
	z-index: 10;
	transition: 2s all;
	transition: 1.3s opacity;
	background-color: white;
	/* transition-delay: 3s;  */
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	animation: fadeIn .4s;
}
.splash:before {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: white;
}




.splash.done {
 	opacity: 0;
	z-index: 0;
	/* height: 0px; */
	overflow: hidden;
}

.slideshow.splash.done .slick-dots {
	display: none;
}

.splash .myslide {
	background-size: cover;
	height: 100vh;
 	width: 100vw;
}

.slideshow {
  /* animation: fadeIn 1s linear; */
  /* transition: 1s all; */
  opacity: 1;
}

.transitioning {
  opacity: 0;
}

.slideshowz {
  height: 75vh;
  border: solid black 1px;
  /* pos

	ition: relative; */
}

.slideshow .slick-dots {
	position: absolute;
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: center;
	/* bottom: -25px; */
	top: calc(100% + 25px);
}

.splash.slideshow .slick-dots {
	display: none!important;
}

.slideshow .fitted {
	margin: 0 auto;
	box-sizing: border-box;
	height: 100%;
	max-width: 100%;
	position: relative;
}

/* .done.slideshow .fitted, .done.slideshow .myslide {
	display: none;
} */

.myslide {
	position: relative
	min-height: 65vh;
}
/* IPAD LANDSCAPE */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}

/* IPAD PORTRAIT */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }

@media(max-width: 768px){
	.slideshow .myslide {
		/* height: 40vh; */
		/* height: 50vh; */
	}
}
.myslide .caption-old {
	position: absolute;
  right: 40px;
  z-index: 100;
  top: calc(100% + 2em);
  max-width: 50%;
	max-width: calc(100% - 373px);
}

.myslide .caption {
	position: absolute;
  right: 1em;

  z-index: 100;
  bottom: 1em;
	text-align: left;
  max-width: 50%;
	max-width: calc(100% - 373px);
	color: white;
	background: black;
	max-width: 300px;
	padding: 1em;
	/* border: solid white 1px; */
}

.slideshow .slick-list {
	overflow: visible;
}

.slideshow-data{
  display: none;
}

.myslide {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 65vh;

  /* margin: 2.5vh 0; */
}

@media(max-width: 768px){
	.myslide {
		height: 53vh;
	}
	}



.slideshow.slick-dotted.slick-slider {
    margin-bottom: 40px;
		outline: none;
		z-index: 10;
}

.myslide p {
  margin: 0;
}

.myslide:focus {
	outline: none;
}

	.slideshow .myslide.current .caption {
  display: block;
}

#info {
  margin: 0 auto;
	margin-top: 20px;
	position: relative;
}

header .links {
	margin-right: 20px;
}

#main-title, header .links {
	/* display: none; */

}

#main-title, header .links h1 {
	font-size: 16px;
    line-height: 2.5em;
    display: inline-block;
    text-indent: 0px;
    /* margin-bottom: 1em; */
    /* background-color: white; */
}

#main-title a, header .links h1 a {
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 5px;
	letter-spacing: 4px;
  font-family: Frutiger;
  font-size: 13px;
  color: black;
}

header .links h1 a {
	text-transform: lowercase;
	letter-spacing: inherit;
}

body.home.splashing header .links h1.home-link {
	border-bottom: none;
}

body.home header .links h1.home-link {
	border-bottom: solid black 2px;
}

.home-link {
	background-image: url(grid_icon_vda.png);
  background-image: url(grid_icon_vda.svg);
  background-size: 55%;
  background-position: center;
  background-repeat: no-repeat;
	width: 45px;
	margin-right: 10px;
}
.home-link a, .info-link a {
	color: transparent!important;
}

.info-link {
	background-image: url(info_icon_vda.png);
  background-image: url(info_icon_vda.svg);
  background-size: 90%;
  background-position: center;
  background-repeat: no-repeat;
}

body.page-id-146 header .links h1.info-link {
	border-bottom: solid black 2px;
}

.projects {
	position: relative;
	margin-left: 40px;
	height: 230px;
	margin: 0 auto;
	/* max-width: 1010px; */
}
.projectz {
	text-align: center;
	padding	-top: 20px;
	margin-bottom: 50px;

	display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* height: 2000px; */
  justify-content: center;
	opacity: 1;
	transition: 1.5s all;
}

.splashing .projectz {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.projectz .project {
	width: 240px;
	height: 330px;
	margin: 20px;
	margin: 25px 35px;
	display: inline-block;
	position: relative;
	cursor: pointer;
	background-size: contain;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.projectz .project .title {
	position: absolute;
	bottom: -12px;
	bottom: 0;
	right: 0;
	background: black;
	transition: .2s all;
	color: white;
	opacity: 0;
	padding: 5px 0;
	/* transition: all .4s; */
	width: 100%;
}
.projectz .project:hover .title{
	opacity: 1;
}

.main-column {
	clear:both;
}

@media(max-width: 1000px){
	.main-column {
		/* width: 85%; */
		/* width: calc(100% - 52px); */
	}
}

@media(max-width: 768px){
	.main-column {
		/* width: 90%; */
	}
}

.project {
	cursor: pointer;
	position: relative;
}

.project:hover:before, .project.currentProject:before {
	content: ' ';
	position: absolute;
	left: -.75em;
	top: .25em;
	width: .5em;
	height: .5em;
	border-radius: 100%;
	transition: 1s all;
}

.slick-dots li button:before {
	transition: .4s all;
	/* background: green; */
	content: ' '!important;
	border-radius: 100%;
	background: white;
	border: solid black 1px;
	width: 4px;
	height: 4px;
	opacity: 1!important;
}

.slick-dots li.slick-active button:before {
	background: black;

}

.project.currentProject:before {
	background: black!important;
}

.project:hover:before {
	/* background: white; */
	/* border: solid black 1px; */
	/* box-sizing: border-box; */
}

.projects-container {
	max-width: 275px;
	padding-top: 4px;
	padding-left: 2em;
	display: inline-block;
}

.category.dwellings {
	float: left;
}

.category.commercial, .category.other {
	float: right;
	width: 130px;
}

.category.other {
	clear: right;
}

.projects .category{
	margin-bottom: 20px;
}

.description {
	padding: 20px;
	padding: 25px 35px 40px 35px;
}

	.description b {
		font-size: 1.1em;
	}
	.description div {
	    margin-top: 1em;
			font-family: Palatino;
	}
.next-project, .prev-project {
	margin: 0 22px;
	padding-bottom: 2em;
	display: none;
}

.next-project a, .prev-project a{
	color: black;
}

.next-project {
	float: right;
}

.prev-project {
	float: left;
}

.projects .description {
	position: absolute;
  font-family: Palatino;
  top: 0px;
  right: 22.5px;
  color: black;
  max-width: calc(100% - 370px);
  text-indent: 1em;
  font-size: 1.3em;
  line-height: 1.3em;
}

.description .fade {
	animation: fadeIn .5s linear;
}

.footer {
	display: none;
	padding: 0em 0 0 0;
  text-align: center;
  margin-top: 6em;
  padding-top: 9em;
  background: #f6f6f6;
  /* background: white; */
  /* margin: 0!important; */
}

@media(max-width: 600px){
	.footer {
		padding-top: 2em;
	}
	.projects.main-column .description {
		width: 100%;
  	max-width: calc(100% - 4em);
	  margin-left: 1em;
		position: static
	}
	.footer-text-box {

	}
	.projects {
		height: auto;
	}
	.projects-container {
    max-width: 275px;
    padding-top: 4px;
    padding-left: 2em;
    display: inline-block;
    margin: 0 auto;
    padding: 0;
    display: block;
    min-height: 230px;
	}

	.category.commercial, .category.other {
		float: right;
		width: 110px;
	}
}

#info{
	margin: 20px;
	font-family: Palatino;
}

.footer iframe {
	/* float: right; */
}

.footer-text-box p {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	margin: 0 10px;
	font-size: .8em;
}

.footer-text-box p:before {

	content: ' ';
	position: absolute;
	left: -14px;
	top: calc(50% - .25em);
	width: 4px;
  height: 4px;
	border-radius: 100%;
	transition: 1s all;
	border: solid 1px;
}

.footer-text-box p:nth-child(1):before {
	background: transparent;
	border: none;
	content: "";
}

#cv {
	padding-bottom: 2em;
}

#cv .cat-name {
	display:none;
}

.info-footer {
	text-align: center;
}

.info-footer img {
	width: 750px;
	max-width: 100%;
}

@media(max-width: 768px){
	.projects .descriptionz {
			top: 0px;
	    right: 0;
			display: block;
			position: static;
	    color: black;
	    max-width: none;
	    text-indent: 1em;
	    margin-bottom: 2em;
			transition: all .4s;
	}
	.projects .description {
		top: 0px;
    right: 2em;
    /* display: block; */
    /* position: static; */
    color: black;
    max-width: calc(100% - 343px);
    text-indent: 1em;
    margin-bottom: 2em;
    transition: all .4s;
    border-left: solid black 2px;
    padding-left: 1em;
	}
}

.slick-track {
	outline: none;
}

.slick-slide {
	outline: none;
}

.project.currentProject {
  /* font-weight: bold; */

}

.project.data {
  display: inline;
}

.cat-name {
	font-size: 13px;
  font-weight: bold;
	margin: 3px 0px;
}

.contact {
	margin-bottom: 2em;
	position: absolute;
	right: 0px;
	text-align: right;
}

.contact p {
	margin: 5px 0;
}

#cv {
}
@keyframes looper {
	0%{
		background-position-x: 0.0px;
	}
	100% {
		background-position-x: 754.0px;
	}
}
@keyframes looperMobile {
	0%{
		background-position-x: 0px;
	}
	100% {
		background-position-x: 527px;
	}
}

.cosmic {
	right: -22px;
	top: 170px;
	height: 500px;
	/* width: calc(120%); */
	background-image: url(cosmicmetropolisweb.jpg);
	background-size: auto 100%;
	background-position: 0px 0px;
	/* opacity: .1; */
	animation: looper 50s linear infinite;
	margin-bottom: 4em;
}

.cv-header {
	font-weight: bold;
	margin-top: 10px;
}

#cv .popout {
	max-height: 0px;
	transition: .4s all;
	overflow: hidden;
}
.popout .p1 {
	margin-top: 0px;
}


#cv .popout li {
	list-style: none;
}

#cv.open .popout {
	overflow: hidden;
	max-height: 2000px;
	max-width: 50%;
	max-width: calc(100% - 190px);
}


td.box4grey
{
	border-style: solid;
	background-color:#FFFFFF;
	border-top-width: 1px;
	border-top-color: #D5D5D5;
	border-right-width: 1px;
	border-right-color: #D5D5D5;
	border-left-width: 1px;
	border-left-color: #D5D5D5;
	border-bottom-width: 1px;
	border-bottom-color: #D5D5D5;
}

td.box4green
{
	border-style: solid;
	background-color:#D7E8A1;
	border-top-width: 1px;
	border-top-color: #B0D144;
	border-right-width: 1px;
	border-right-color: #B0D144;
	border-left-width: 1px;
	border-left-color: #B0D144;
	border-bottom-width: 1px;
	border-bottom-color: #B0D144;
}

td.boxBlack
{
	border-style: solid;
	background-color:#EEF7D0;
	border-top-width: 0px;
	border-top-color: #000000;
	border-right-width: 1px;
	border-right-color: #000000;
	border-left-width: 0px;
	border-left-color: #000000;
	border-bottom-width: 0px;
	border-bottom-color: #000000;
}

@media(max-width: 480px){
		.projects {
			height: auto;
		}
		.project {
			font-size: 14px;
			margin: 4px 0;
		}
		.project:before {
			/* content: "-"; */
			/* position: absolute; */
			/* left: -10px; */
		}
		.slideshow .slick-dots li button:before {
			width: 20px!important;
			height: 20px!important;
		}
		.projects-container {
		    max-width: 305px;
				min-height: 282px;
		}
		.category .cat-name {
			font-size: 15px;
		}
		#cv {
		    padding-bottom: 0em;
		}
		.footer .footer-text {
			    margin-bottom: 30px;
		}
		#container {
			width: calc(100% - 30px);
			margin-bottom: 15px;
		}
		.footer {

			padding-top: 0;
			padding-bottom: 2em;
		}
		.footer .footer-text {
			width: 300px;
			height: auto;
			border: none;
			margin-bottom: 2em;
			margin-top: 20px;
			margin-left: 0px;
			margin-right: 0px;
			text-align: left;

		}
		.slideshow .myslide {
			transition: all .4s;
		}
		.slideshow .myslide.used {
    	height: 50vh;
		}
		.footer-text-box {
		    width: 100%;
		    display: inline-block;
		    font-family: Palatino;
		    font-size: 15px;
				height: auto;
				position: static;
				margin-bottom: 1em;
		}
		.footer .footer-text p {
			margin: .25em;
			margin: 10px 0;
		}
		.slick-dots li {
			margin: 0px 7px 7px 0;
		}
		#main-title {
		    margin: 0;
		    line-height: initial;
		    font-size: 12px;
		    line-height: 1em;
		    margin-top: 10px;
		    padding-bottom: 0em;
		}


		.description {
		    padding: 20px;
		    padding: 50px 35px 50px 35px;
		}

		.splash.slideshow .myslide {
			height: 100vh;
		}
		#cv {
			cursor: pointer;
		}
		#cv .cat-name {
			display:block;
		}
		.cosmic {
			height: 350px;
			margin: 97px 0 29px 0;
			width: 100%;
			background-image: url(cosmicmetropolisweb.jpg);
			background-size: auto 100%;
			background-position: 0px 0px;
			animation: looperMobile 50s linear infinite;
			margin-top: 0px;
		}
		header .links {
		    width: 100%;
		    text-align: center;
				margin-right: 0;
		}
		#main-title {
			display: block;
			text-align: center;
			margin-top: 15px;
		}
		#main-title, header .links h1 {
			line-height: 1.5em;
		}
		.info-link {
			margin-right: 35px;
			background-size: 20px;
		}
		.home-link {
			background-size: 22px;
		}
		.contact {
			margin-bottom: 2em;
			position: static;
	    right: 0px;
	    text-align: left;
	    display: inline-block;
	    /* margin: 0 auto; */
		}
		#cv .cat-name {
			display: none;
		}
		#cv .popout li {
			margin: 10px 0;
			position: relative;
		}
		#cv .popout li:before {
			content: " ";
			position: absolute;
			top: 2px;
			left: -12px;
			width: 5px;
			height: 5px;
			border-radius: 50%;
			border: solid black 1px;
		}
		.splash.slideshow .myslide {
			 /* background-size: 100% auto; */
			 background-size: contain;
		}
		header {
			max-width: calc(100vw - 30px);
			height: 80px;
		}
		.projectz .project .title{
			opacity: 1;
			font-size: 12px;
		}
		.splash.slideshow {
			position: fixed !important;
		}
		body.home header .links h1.home-link {
			width: 31px;
			background-size: 20px;
		}

		body .project {
			pointer-events: none;
		}

		body .readyToGo .project {
			pointer-events: all;
		}
	}