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


body {
   margin: 0;
   padding: 0;
   min-width:100%;
   overflow-y:scroll;
   image-rendering: -webkit-optimize-contrast;
    }

@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:0.7vh;
	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;
   }
}
@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);  
   }
}

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

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

.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;
	width:100%;
	top:0;
	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;
   }
}
@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;
   }
}
@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%;
   }
}

.PageIntroductionContainer {
	margin-top:31.5vh;
	margin-bottom:0vh;
	padding-bottom:0vh;
}


@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .PageIntroductionContainer{
	margin-top:18vh;
	
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .PageIntroductionContainer {
	margin-top:15vh;
   }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   .PageIntroductionContainer {
	margin-top:15vh;
   }
}
@media only screen and (max-width : 1400px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .PageIntroductionContainer {
	margin-top:18vh;
   }
}


.ProjectInformation{
	position:static;
	width:30%;
	height:auto;
	margin-top:10vh;
	background-color:none;
	margin:auto;
	text-align:center;
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .ProjectInformation {
   	width:80%;
    }
}

@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .ProjectInformation {
	width:50%;
   }
}

@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Tablet view: 2 tiles */
   .ProjectInformation {
	width:40%;
   }
}

.ProjectInformationTitle {
	margin-top:0;
	margin-left:0%;
	margin-right:0%;
	margin-bottom:5vh;
}


ProjectTitle {
	font-family: 'Montserrat' , sans-serif;
	font-weight:700;
	font-size: 2.0vw; 
	line-height: 1.6vw;
	color:#252525;
	text-align:center;
}

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


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

@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;
    }
}

ProjectText {
	font-family: Calibri, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 1.05vw; 
	line-height: 1.3vw;
	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;
    }
}


.Grid {
   position:static;
   overflow: hidden;
   width: 72vw;
   margin: auto;
   margin-top:20vh;
   margin-bottom:40vh;
   background-color:none;
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .Grid {
	  width: 82vw;
   }
}

@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .Grid {
	  width: 72vw;
   }
}

.Box {
   float: left;
   position:relative;
   width: 33.3%;
   padding-bottom: 33.3%;
	-webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
    transition:         all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);	
	-webkit-filter: drop-shadow(1px 1px 2px #cdcdcd);
  	filter: drop-shadow(1px 1px 2px #cdcdcd);
}

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .Box {
      width: 100%;
      padding-bottom: 100%;
	  margin-top:0vw;
	  margin-bottom:4vw;
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .Box {
      width: 50%;
      padding-bottom: 50%;
   }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   .Box {
      width: 50%;
      padding-bottom: 50%;
   }
}
@media only screen and (max-width : 1400px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .Box {
      width: 33.3%;
      padding-bottom: 33.33%;
   }
}

.BoxInner {
   position: absolute;
   left: 0.5vw;
   right: 0.5vw;
   top: 1vw;
   bottom: 1vw;
   overflow:hidden;
   border-radius: 0px;
   box-shadow: 0vw 0vw 0vw 0vh #000000;
}


.ThumbnailImage {
   position: absolute;
   left: 1vw;
   right: 1vw;
   top: 1vw;
   bottom: 1vw;
   overflow: hidden;
}


.ThumbnailImage img {
  height:100%;
  left:50%;
  position: relative;
  transform: translateX(-50%);	 
}



.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%;
	margin-bottom:25px;
	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); 
    }
}