@charset "utf-8";
/* CSS Document */


body {
   padding: 0;
   min-width:100%;
   overflow-y:scroll;
   image-rendering: -webkit-optimize-contrast;
   margin: 0 0 100px; /* bottom = footer height */
   padding-bottom: 25px;
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
 	::-webkit-scrollbar { 
    	display: right; 
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
	::-webkit-scrollbar { 
    	display: right; 
	}
}


.BackgroundColor {
	Background-color:white; 
	position:absolute;
}


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


.Logo {
	position:fixed;
	top:0;
	margin-left:2vw;
	margin-top:calc(0.5vw - 2px);
	width:calc(80px + 1vw);
	width:6vw;
	height:auto;
	z-index:99999;
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .Logo {
	position:absolute;
	margin-top:15px;
	margin-left:8vw;
	width: 80px;
	transform:none;
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
  .Logo {
    margin-left:0.5vw;
	margin-top:23px;
	width: calc(35px + 5vw);  
	transform:none;
   }
}

@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Tablet view: 2 tiles */
  .Logo {
    margin-left:1vw;
	margin-top:9px;
	width:85px; 
	transform:none;
   }
}

@media only screen and (max-width : 1400px) and (min-width : 1051px) {
   /* Tablet view: 2 tiles */
  .Logo {
    margin-left:2vw;
	margin-top:7px;
	width:90px;
	transform:none;
   }
}

.Logo img {
	position:relative;
	width:100%;
	height:auto;
}


.LogoTag {
	position:fixed;
	top:0;
	margin-left:2vw;
	margin-top:14vh;
	width:6vw;
	height:auto;
	z-index:9999;
	text-align:left;
	text-align: justify;
    text-justify: inter-word;
	   -moz-text-align-last: left; /* Code for Firefox */
    text-align-last: left;
	display:none;
}


@media only screen and (max-width : 1400px) and (min-width : 1051px) {
   /* Tablet view: 2 tiles */
  .LogoTag {
    margin-left:2vw;
	margin-top:15vh;
	width:90px;
   }
}


.LogoPosition {
	position:absolute;
	width:auto;
	height:2vh;;
}

@media only screen  and (min-width : 1051px) {
.LogoPosition:hover .Logo {
	 border-bottom:4px solid #70efe4;
	transition: border-bottom 300ms ease;
	}
}

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

.LogoPosition:hover .LogoTag {
	display:block;
	animation: showLogoTag 1000ms ease-in-out both;
}


logotag {
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	color:#919191;
	font-size: 0.7vw; 
	line-height: 70%;
}


@media only screen and (max-width : 1400px) and (min-width : 1051px) {
   /* Tablet view: 2 tiles */
  logotag {
    font-size: 10px; 
	line-height: 70%;
   }
}


.MenuBar {
	position:fixed;
	height:auto;
	top:0;
	width:100%;
	z-index:999;
	background-color:none
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
    .MenuBar{
	position:relative;
	min-height:80px;
   }
}


.MenuIcon {
	position:relative;
	width:2vw;
	height:2vw;
	float:right;
	margin-right:4.7vw;
	margin-top:24px;
	background-color:none;
	background-image: url('../ProjectsImages/Menu/Menu.png');
	 background-size: cover;
	z-index:9999;
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
    .MenuIcon{
	position:absolute;
	margin-top:19px;
	right:5vw;
    width:40px;
	height:40px;
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .MenuIcon{
    width:34px;
	height:34px;
	margin-top:26px;
	margin-right:3.8vw;
	}
}

@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Tablet view: 2 tiles */
   .MenuIcon{
    width:30px;
	height:30px; 
	margin-top:23px;
   }
}

@media only screen and (max-width : 1400px) and (min-width : 1051px) {
   /* Tablet view: 2 tiles */
  .MenuIcon{
    width:28px;
	height:28px;
	margin-right:4.7vw;
	margin-top:24px;
   }
}

.MenuIcon img {
	position:relative;
	width:100%;
	height:auto;
}

.MenuIconBox :hover {
	cursor:pointer;
}

.MenuIcon :active {
	cursor:pointer;	
}


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


.SiteMenu {
	position:absolute;
	width:100%;
	height:auto;
	right:0vw;
	padding-top: 22px;
	padding-bottom:18px;
	overflow:auto;
	padding-right:8vw;
	margin-left:2vw;
	text-align:right;
	background-color:white;
	text-decoration: none;
	display:none;
	animation: showSiteMenu 600ms ease-in-out both;
	z-index:999;
	-webkit-filter: drop-shadow(1px 1px 2px #f4f4f4);
  	filter: drop-shadow(1px 1px 2px #f4f4f4);
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .SiteMenu {
	position:static;
	padding-bottom:2vh;
	margin-left:0;
	padding-top:90px;
	width:100%;
	padding-right:0vw;
	Border-bottom:solid 2px #f4f4f4;
   }
}

@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
    .SiteMenu {
	text-align:center;
    padding-top: 22px;
	padding-bottom:18px;
	padding-right:0vw;
	border-bottom:solid 1px #f4f4f4;
	}
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   .SiteMenu {
    padding-top: 22px;
	padding-bottom:18px;
 	padding-right:11vw;
	border-bottom:solid 1px #f4f4f4;
   }
}
@media only screen and (max-width : 1400px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .SiteMenu {
	padding-top: 22px;
	padding-bottom:18px;
	padding-right:8vw;
   }
}


.SiteMenuBox {
	Display:inline-block;
	width:auto;
	height:auto;
    padding-left:0vw;
    margin-right:0vw;
	margin-bottom:0vw;
    padding-top:0vw;
	color:#cbcaca;
	background-color:none;
}

.SiteMenuBox:hover {
	cursor:pointer;
	color:black !important;
	
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .SiteMenuBox {
	display:block;
    margin:auto;
	padding-bottom:2vw;
    padding-top:0vw;
	text-align:center;
   }
}

@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
    .SiteMenuBox {
    padding-left:1.5vw;
    padding-right:1.5vw;
	padding-bottom:6px;
    padding-top:6px;
   }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   .SiteMenuBox {
    padding-left:1vw;
    padding-right:1vw;
	padding-bottom:0vw;
    padding-top:0vw;
   }
}
@media only screen and (max-width : 1400px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .SiteMenuBox {
	padding-left:0vw;
    padding-right:1vw;
	padding-bottom:0vw;
    padding-top:0vw;
   
   }
}


.SiteMenuInnerBox {
   position: relative;
   overflow: hidden;
   text-align: center;
   margin:auto;
   padding-bottom:0vw;
   padding-top:0vw;
   border-radius: 2px;
   background-color:none;
}


sitemenufont{
	font-family: 'Montserrat' , sans-serif;
	font-weight:300;
	font-size: 1.2vw; 
	line-height: 2vw;
	padding-left:1vw;
    padding-right:1vw;
    padding-bottom:0vw;
    padding-top:0vw;
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   sitemenufont {
   	font-size: 25px;
	line-height: 48px;
    padding-left:4vw;
    padding-right:4vw;
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   sitemenufont {
   	font-size: 18px;
	line-height: 167%;
   }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   sitemenufont {
   	font-size: 18px;
	line-height: 167%;
   }
}
@media only screen and (max-width : 1400px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   sitemenufont {
   	font-size: 18px;
	line-height: 167%;
   }
}


.ProjectContainer {
	margin-top:calc(140px + 22vh);
	margin-bottom:0vh;
	padding-bottom:0vh;
	height:auto;
	}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .ProjectContainer{
	margin-top: calc(80px + 5vh);
	
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .ProjectContainer {
	margin-top:calc(120px + 8vh);
   }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   .ProjectContainer {
	margin-top:calc(100px + 18vh)
   }
}
@media only screen and (max-width : 1400px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .ProjectContainer {
	margin-top:calc(100px + 22vh);
   }
}


.ProjectImages{
	float:left;
	width:32vw;
	margin-left:18vw;
	height:auto;
	margin-top:0vh;
	background-color:none;
	overflow: hidden;
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .ProjectImages {
   	position:relative;
	float:none;
	width:80vw;
	margin-left:15vw;
	margin-top:10vh;
	padding:0;
	margin-bottom:0vh;
    }
}

@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .ProjectImages {
   	position:relative;
	float:none;
	width:70%;
	margin-left:20vw;
	margin-top:10vh;
	padding:0;
	margin-bottom:0vh;
   }
}


.ImageSplitterLeft {
	position:relative;
	width:28%;
	float:left;
	margin-bottom:4%;

}

.ImageSplitterRight {
	position:relative;
	width:28%;
	margin-left:25%;
	margin-right:15%;
	float:right;
	margin-bottom:4%;

}


.ProjectImageBox {
	position:relative;
	margin:auto;
	width:100%;
	text-align:center;
}


.ProjectImage {
	position:relative;	 
}

.ProjectImageSmall {
	position:relative;	 
	width:80%;
	margin:auto;
}


.ProjectImage img {
	border-radius: 0px;
	margin-top:0%;
	margin-bottom:2%;
	width:90%;
	height:auto;
	-webkit-filter: drop-shadow(1px 2px 1px #cdcdcd);
  	filter: drop-shadow(1px 2px 1px #cdcdcd);
}

.ProjectImageSmall img {
	border-radius: 0px;
	margin-top:2%;
	margin-bottom:0%;
	width:90%;
	height:auto;
}
		

.ImageUnderscript {
	position:relative;
	width:80%;
	margin-top:1vh;
	text-align:left;
	margin-left:5%;
	margin-bottom:10vh;
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .ImageUnderscript{
   margin-left:0%;
   text-align:center;
    }
}

@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
  .ImageUnderscript{
	margin-left:0%;
   text-align:center;
   }
}
	
	

imageunderscript{
	font-family: 'Montserrat' , sans-serif;
	font-weight:300;
	font-size: 1vw; 
	line-height: 1vw;
	color:#919191;
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   imageunderscript{
   font-size: 11px; 
   line-height: 11px;
    }
}

@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
  imageunderscript{
   font-size: 11px; 
   line-height: 11px;
   }
}

@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Tablet view: 2 tiles */
   imageunderscript{
   font-size: 12px; 
   line-height: 12px;
   }
}

@media only screen and (max-width : 1400px) and (min-width : 1051px) {
   /* Tablet view: 2 tiles */
   imageunderscript{
   font-size: 14px; 
   line-height: 11px;
   }
}
	

.ProjectInformation{
	width:24vw;
	float:right;
	margin-right:14vw;
	height:auto;
	margin-top:0vh;
	background-color:none;
	margin-bottom:80vh;
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .ProjectInformation {
   	position:relative;
	display:block;
	float:none;
	width:80%;
	margin:auto;
    margin-top:10vh;
	padding:0;
	margin-bottom:10vh;
    }
}

@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .ProjectInformation {
   	position:relative;
	display:block;
	float:none;
	width:70%;
	margin:auto;
    margin-top:10vh;
	padding:0;
	margin-bottom:10vh;
    }
}

@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Tablet view: 2 tiles */
   .ProjectInformation {
	width:33.5vw;
	margin-right:11vw;
	margin-bottom:60vh;
   }
}

@media only screen and (max-width : 1400px) and (min-width : 1051px) {
   /* Tablet view: 2 tiles */
   .ProjectInformation {
	width:27vw;
	margin-right:12vw;
   }
}
	

.ProjectInformationTitle {
	margin-top:-0.5vh;
	margin-left:0%;
	margin-right:0%;
	margin-bottom:6vh;
}
@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .ProjectInformationTitle {
	margin-top:0%;
   	margin-left:0%;
	margin-right:0%;
	margin-bottom:8vh;
	text-align:center;
    }
}

@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .ProjectInformationTitle {
	margin-top:0%;
   	margin-left:0%;
	margin-right:0%;
	margin-bottom:8vh;
	text-align:center;
    }
}
	

projecttitle {
	font-family: 'Montserrat' , sans-serif;
	font-weight:700;
	font-size: 2.0vw; 
	line-height: 80%;
	color:#252525;
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   projecttitle  {
   font-size: 25px; 
   line-height: 15px;
    }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   projecttitle  {
   font-size: 22px; 
   line-height: 12px;
   }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
    projecttitle  {
   font-size: 25px; 
   line-height: 12px;
   }
}
@media only screen and (max-width : 1400px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   projecttitle  {
   font-size: 25px; 
   line-height: 12px;
   }
}
	

.ProjectKeywords {
	height:auto;
	margin-top:0vh;
	margin-left:0%;
	margin-right:0%;
	margin-bottom:2vh;
	text-align: justify;
    text-justify: inter-word;
	white-space: pre-line;
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .ProjectKeywords {
   	margin-left:0%;
	margin-right:0%;
	margin-bottom:4vh;
	text-align:center;
    }
}

@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .ProjectKeywords {
   	margin-left:0%;
	margin-right:0%;
	margin-bottom:4vh;
	text-align:center;
    }
}
	

keywords {
	font-family: 'Montserrat' , sans-serif;
	font-weight:300;
	font-size: 0.95vw; 
	line-height: 1.2vw;
	color:#919191;
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
  keywords {
   font-size: 12px; 
   line-height: 6px;
    }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
  keywords  {
   font-size: 12px; 
   line-height: 6px;
    }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
    keywords  {
   font-size: 14px; 
   line-height: 7px;
    }
}
@media only screen and (max-width : 1400px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   keywords  {
   font-size: calc(12px + 0.2vw); 
	line-height: 120%;
    }
}


.ProjectInformationText {
	height:auto;
	margin-top:0;
	margin-left:0%;
	margin-right:0%;
	margin-bottom:5vh;
	text-align: justify;
    text-justify: inter-word;
	white-space: pre-line;
	overflow: auto;
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .ProjectInformationText {
   	margin-left:0%;
	margin-right:0%;
	text-align:left;
	text-align: justify;
    text-justify: inter-word;
	   -moz-text-align-last: left; /* Code for Firefox */
    text-align-last: left;
    }
}

@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
  .ProjectInformationText {
   	margin-left:0%;
	margin-right:0%;
	text-align:left;
	text-align: justify;
    text-justify: inter-word;
	   -moz-text-align-last: left; /* Code for Firefox */
    text-align-last: left;
    }
}
	

projecttext {
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 1vw; 
	line-height: 1.5vw;
	color:#919191;
	
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
  projecttext  {
   font-size: 12px; 
   line-height: 6px;
    }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
  projecttext  {
   font-size: 12px; 
   line-height: 6px;
    }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
    projecttext  {
   font-size: 14px; 
   line-height: 7px;
    }
}
@media only screen and (max-width : 1400px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   projecttext  {
   font-size: 14px; 
   line-height: 7px;
    }
}


.CopyRight {

    clear:both;
	position:relative;
	bottom:0;
	margin:auto;
	width:auto;
	height:auto;
	text-align:center;
}
	

copyrighttext {
	font-family: 'Montserrat' , sans-serif;
	font-weight:300;
	font-size: 0.95vw; 
	line-height: 1.2vw;
	color:#919191;
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
  copyrighttext {
   font-size: 12px; 
   line-height: 6px;
    }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
  copyrighttext  {
   font-size: 12px; 
   line-height: 6px;
    }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
    copyrighttext  {
   font-size: 14px; 
   line-height: 7px;
    }
}
@media only screen and (max-width : 1400px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   copyrighttext {
   font-size: calc(12px + 0.2vw); 
	line-height: 120%;
    }
}

.ContactLink {
	color:#515151 !important;
	font-weight:400;
}

contacttext {
	font-family: 'Montserrat' , sans-serif;
	font-weight:300;
	font-size: 0.8vw; 
	line-height: 300%;
	color:#a0a0a0;
	display:block;
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
  contacttext  {
   font-size: 10px; 
    }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
  contacttext   {
   font-size: 10px; 
    }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
    contacttext   {
   font-size: 11px; 
    }
}
@media only screen and (max-width : 1400px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   contacttext  {
   font-size: calc(9px + 0.2vw); 
    }
}