body{ margin:0; padding:0; font-family:"Inter", sans-serif; font-size:1rem; color:#333; background: #000;  overflow: hidden; line-height: 1.3rem; }
h1, h2, h3, h4, h5, p{ margin:0 0 10px 0; padding:0; font-weight:400;}
h1{ font-size:3rem;}
h2{ font-size:3.5rem;}
h3{ font-size:2.5rem;}
p{line-height:1.2rem; font-size: 1rem; margin-bottom: 25px; }
ul{ margin:0 0 10px 0; list-style:none; padding:0;}
a{  color:#EBA10D; text-decoration: none; }
table{ border-collapse:collapse; padding:5px; border:none;}
table td{ padding:5px; border-bottom:1px solid #ccc;}
img{height:auto;  max-width: 100%; _max-width:inherit; _height:100%;}
iframe {max-width: 100%;}
a img{ border:none;}
a:hover, a:focus, h3:focus{ outline:none; color: #f0ee39}
.BrownTxt{ color: #908B85; }
.ThinTxt{ font-weight: 200; }
.LibreFont{ font-family:"Libre Caslon Display", sans-serif!important;  font-style: italic; font-size: 1.2rem; }
.marg10{ margin-top: 10px; }

/*Main Banner*/
#Pollen .BannerMain img{object-fit:cover; width: 100%; height: 100vh; }
#Pollen .BannerMain .item{position: relative;}
#Pollen .BannerMain .ProjectName{ position: absolute; bottom: 10%; left: 10%; }
#Pollen .BannerMain .ProjectName h2, #Pollen .BannerMain .ProjectName h3{ color: #908B85; font-weight: 200; text-align: left; margin-bottom: 0; line-height: 2.4rem; }
#Pollen .BannerMain .ProjectName h3 { margin-top: -20px; font-size: 1.5rem;}


/*Navigation*/
#Navigation.hidden {display: none;}
#Navigation {background: url(../images/black-back-op.png) repeat; position: absolute; width: 280px; z-index: 1000; left: 0; top: 0; height: 100vh; transition: transform 0.3s ease;}

  #Pollen #Navigation ul{ padding: 20px 20px 0 20px; margin-top: 80%;}
  #Pollen #Navigation ul li{ margin-bottom: 30px; }
  #Pollen #Navigation ul li a{ /*color: #EBA10D;*/ color: #f0ee39; font-size: 1.2rem; text-transform: uppercase; font-weight: 600; letter-spacing: 0.12rem; }
  #Pollen #Navigation ul li a:hover, #Pollen #Navigation ul li a:focus{ color: #ccc; }

  #menu-button {cursor: pointer; display: inline-block; position: relative; width: 30px; height: 30px;}
  #menu-button span {display: block; background: #f0ee39; height: 4px; margin: 8px 0; transition: transform 0.3s, background 0.3s;}
  #menu-button span:first-child{ margin-top: 0!important;}
  #menu-button.menu-open span:nth-child(1) {transform: rotate(45deg) translateY(16px);}
  #menu-button.menu-open span:nth-child(2) {opacity: 0;}
  #menu-button.menu-open span:nth-child(3) {transform: rotate(-45deg) translateY(-16px);}

/*Logo*/
#Pollen .Logo{position: fixed; top:  20px; left: 6px; z-index: 100000; border-radius:0; background:none; width: 95.5%; margin: 0 2%; }
#Pollen .Logo #menu-button{background: none; border-radius: 0; float: left; outline: none; border:none; appearance: none; width: 40px; height: 40px; padding: 0;}
#Pollen .Logo .PollenLogoIn, #Pollen .Logo .PollenLogo{ display: block; padding: 0 0 0 15px; max-width: 180px; float: right; }

#Pollen .WhiteHam{ display: block; }
#Pollen .ColorHam{ display: none; }


/*----------Projects--------*/
#Pollen .Projects {display: flex; width: 100%; height: 100vh; overflow-x: scroll;}
#Pollen .Projects::-webkit-scrollbar {display: none; }

#Pollen .Projects .ProSection {min-width: 110vw;  height: 100vh;  background: #1c1b19; overflow:hidden; color: #e3e3e3 }/*Horizontal size of one view screen*/
#Pollen .Projects .ProSection .IndiProject{ width: 21%; float: left; margin:0 2% 0 2%; vertical-align: top;}

#Pollen .Projects .ProSection  .Intro{ margin-top: 2%!important; }
#Pollen .Projects .ProSection  .IndiProject h1{ font-size: 2rem; font-weight: 700; text-transform: uppercase; }
#Pollen .Projects .ProSection  .IndiProject h2{ font-size: 1rem; margin-bottom: 30px; line-height: 1.35rem;}
#Pollen .Projects .ProSection  .IndiProject h5{ color: #908B85; font-size: 1.1rem; font-weight: 600; text-align: center; margin-top: 10px; font-weight: 200; margin-bottom: 0; }
#Pollen .Projects .ProSection  .IndiProject p.ProName{ text-align: center; color:#d8d4ce; font-family:"Libre Caslon Display", sans-serif; font-style: italic;  font-size: 1.2rem; }
#Pollen .Projects .ProSection  .IndiProject img{ max-width: 90%; display: block; margin: auto; }

@-webkit-keyframes scale-up-center {
  0% {-webkit-transform: scale(1); transform: scale(1);}
  50% {-webkit-transform: scale(.9); transform: scale(.9);}
  100% {-webkit-transform: scale(1); transform: scale(1);}
}
@keyframes scale-up-center {
  0% {-webkit-transform: scale(1); transform: scale(1);}
  50% { -webkit-transform: scale(.9); transform: scale(.9);}
  100% { -webkit-transform: scale(1); transform: scale(1);}
}
#Pollen .Projects a:hover .IndiProject img, #Pollen .Projects a:focus .IndiProject img{   -webkit-animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}
#Pollen .Projects a:hover .IndiProject h5, #Pollen .Projects a:hover .IndiProject p, #Pollen .Projects a:focus .IndiProject h5, #Pollen .Projects a:focus .IndiProject p{ color:#e8bb5e;  }



@-webkit-keyframes reveal {
  0% {opacity: 0; -webkit-transform: translateY(40%); transform: translateY(40%);}
  100% { -webkit-transform: translateY(30%);  transform: translateY(30%); opacity: 1;}
}
@keyframes reveal {
  0% { -webkit-transform: translateY(40%); transform: translateY(40%); opacity: 0;}
  100% { -webkit-transform: translateY(30%); transform: translateY(30%); opacity: 1;}
}
@-webkit-keyframes slide-bot {
  0% { -webkit-transform: translateY(-35%); transform: translateY(-35%); opacity: 0;}
  100% {  -webkit-transform: translateY(15%); transform: translateY(15%); opacity:1;}
}
@keyframes slide-bot {
  0% { -webkit-transform: translateY(-35%); transform: translateY(-35%); opacity: 0;}
  100% { -webkit-transform: translateY(15%); transform: translateY(15%); opacity: 1;}
}
#Pollen .Projects .ProSection .reveal{-webkit-animation: reveal 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: reveal 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
#Pollen .Projects .ProSection .slide-bot{ -webkit-animation: slide-bot 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-bot 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}



/*-------------- inner project---------*/
.puff-in-center {
  -webkit-animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
          animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}

@-webkit-keyframes puff-in-center {
  0% {-webkit-transform: scale(2); transform: scale(2);  -webkit-filter: blur(4px); filter: blur(4px); opacity: 0;}
  100% {-webkit-transform: scale(1); transform: scale(1); -webkit-filter: blur(0px); filter: blur(0px);opacity: 1;}
}
@keyframes puff-in-center {
  0% {-webkit-transform: scale(2); transform: scale(2); -webkit-filter: blur(4px); filter: blur(4px); opacity: 0;}
  100% { -webkit-transform: scale(1); transform: scale(1); -webkit-filter: blur(0px); filter: blur(0px); opacity: 1;}
}

.puff-expand {
  -webkit-animation: puff-expand 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
          animation: puff-expand 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}

@-webkit-keyframes puff-expand {
   0% {-webkit-transform: scale(2); transform: scale(1); -webkit-filter: blur(4px); filter: blur(4px);}
  50% { -webkit-transform: scale(1); transform: scale(1.2); -webkit-filter: blur(0px); filter: blur(0px); }
   100% {-webkit-transform: scale(2); transform: scale(1); -webkit-filter: blur(4px); filter: blur(0);}
}
@keyframes puff-expand {
  0% {-webkit-transform: scale(2); transform: scale(1); -webkit-filter: blur(4px); filter: blur(4px);}
  50% { -webkit-transform: scale(1); transform: scale(1.2); -webkit-filter: blur(0px); filter: blur(0px); }
   100% {-webkit-transform: scale(2); transform: scale(1); -webkit-filter: blur(4px); filter: blur(0); }
}

#Pollen .tracking-in-expand { -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;  animation-delay: 1s;}
@-webkit-keyframes tracking-in-expand {
  0% { letter-spacing: -0.5em; opacity: 0;}
  40% { opacity: 0.6;}
  100% { opacity: 1;}
}
@keyframes tracking-in-expand {
  0% { letter-spacing: -0.5em;  opacity: 0;}
  40% { opacity: 0.6;}
  100% { opacity: 1;}
}
#Pollen .revealup{position: relative; transform: translateY(50px); opacity: 0; transition: 1s all ease;}
#Pollen .revealup.active{transform: translateY(0);opacity: 1;}


#Pollen .ProjectsInner{background: #1c1b19; height: 100vh; overflow: hidden; color: #e3e3e3; }
.vw97{width: 97vw; }
.vw93{width: 93vw; }
#Pollen .vw100{width:100vw; }
#Pollen .ProjectsInner .MainProImg{ width: 65%; float: left; }
#Pollen .ProjectsInner .MainProImg img{object-fit:cover; width: 100%; height: 100vh; }
#Pollen .ProjectsInner .ProjectDesc{ width: 28%; margin: 0 3%; float: left; text-align: justify;  color: #ccc;}
  #Pollen .ProjectsInner .ProjectDesc h1{ font-size: 2rem; margin-top: 30%; line-height: 2rem!important; text-align: left; }
  #Pollen .ProjectsInner .ProjectDesc .ProjectDetails { margin-top: 30px; }
  #Pollen .ProjectsInner .ProjectDesc .ProjectDetails li{ margin-bottom: 20px; }
  #Pollen .ProjectsInner .ProjectDesc .ProjectDetails li h3{ font-size: 1rem; text-transform: uppercase; font-weight: 600; width: 30%; float: left; }
  #Pollen .ProjectsInner .ProjectDesc .ProjectDetails li p{ width: 100%; margin-left: 5%; }

 #Pollen .Projects .Team .IndiProject h2{ font-size: 2rem;}
 #Pollen .Projects .Team .IndiProject { margin-top: 6%; }
 #Pollen .Projects .Team .IndiProject img{ max-width: 100%!important; }


/*gallery*/
#Pollen .gallery {margin: 0 auto; column-count: 4; padding-top: 100px;}
#Pollen .gallery-item { break-inside: avoid; margin: 1%;}
#Pollen .gallery-item {width: 100%; height: auto; cursor: pointer; transition: opacity 0.3s; transform: scale(1);}
#Pollen .gallery-item:hover{ cursor: pointer;    -webkit-animation: puff-expand 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both; animation: puff-expand 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;}
#Pollen .lightbox {position: fixed; top: 0;left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; z-index: 100000;}
#Pollen .hidden {display: none;}
#Pollen #lightbox-image {max-width: 90%; max-height: 90%;}
#Pollen .close {position: absolute; top: 20px; right: 20px; font-size: 24px; color: #EBA10D; cursor: pointer;}
#Pollen .arrow {position: absolute; top: 50%; transform: translateY(-50%); font-size: 48px; color: #fff; cursor: pointer; user-select: none; z-index: 1001;}
#Pollen .left-arrow { background: url(../images/left-arrow.svg) no-repeat; width: 20px; height: 46px; background-size:20px 46px; display: block; left: 20px;}
#Pollen .right-arrow {background: url(../images/right-arrow.svg) no-repeat; width: 20px; height: 46px; display: block; background-size:20px 46px; right: 20px;}
#Pollen .arrow:hover {color: #ddd;}

/*quote*/
#Pollen .quote {position: relative; padding:20px 0 0 50px; margin: 0px; font-size: 1.2rem;}
#Pollen .quote::before {content: "“"; color: #908B85; position: absolute; top: 0; left: 0; font-size: 4em; line-height: 1; font-weight: 700; font-family:Arial, sans-serif; }
#Pollen .quote footer {font-size: 0.9rem; font-style: italic; color: #666; margin-bottom: 20px; }
#Pollen .quote p{ margin-bottom: 5px; }

#Pollen .HighlightTxt{font-family:"Libre Caslon Display", sans-serif; font-style: italic; font-size: .9rem; }
#Pollen .HighlightBk{ background: #393631; }
#Pollen .SpUnderline{ border-bottom: 1px solid #393631; }

#Pollen .Back{ position: absolute; margin: 0; left:0; bottom: 0; background: rgba(0, 0, 0, .6); padding: 5px 20px; border-radius: 0 30px 0 0; z-index: 3000; }
#Pollen .Profile img{ margin-bottom: 20px!important; }

.copyright{position: absolute; width: 100%; bottom: 0; padding: 5px; font-size: .6rem; background: rgba(28, 27, 25, .6); color: #908B85; margin-bottom: 0; text-align: center; z-index: 1500;}
.copyright a{ color:#908B85;  }
.copyright a:hover, #Pollen .copyright a:focus{ color:#EBA10D;  }


@media (max-width: 1080px) {
#Pollen .Projects .ProSection {min-width: 300vw; }
  #Pollen .Projects .ProSection .IndiProject{ width: 20%; }


    @-webkit-keyframes reveal {
  0% {opacity: 0; -webkit-transform: translateY(40%); transform: translateY(40%);}
  100% { -webkit-transform: translateY(40%);  transform: translateY(40%); opacity: 1;}
}
@keyframes reveal {
  0% { -webkit-transform: translateY(40%); transform: translateY(40%); opacity: 0;}
  100% { -webkit-transform: translateY(40%); transform: translateY(40%); opacity: 1;}
}

@-webkit-keyframes slide-bot {
  0% { -webkit-transform: translateY(-35%); transform: translateY(-35%); opacity: 0;}
  100% {  -webkit-transform: translateY(20%); transform: translateY(20%); opacity:1;}
}
@keyframes slide-bot {
  0% { -webkit-transform: translateY(-35%); transform: translateY(-35%); opacity: 0;}
  100% { -webkit-transform: translateY(20%); transform: translateY(20%); opacity: 1;}
}

}

@media (max-width: 780px) {
#Pollen .Projects .ProSection {min-width: 350vw; }/*Horizontal size of one view screen*/
#Pollen .Projects .ProSection .IndiProject{ width: 23%; }
#Pollen .Projects .ProSection .IndiProject img{ width: 80%; }
#Pollen .Projects .ProSection .IndiProject{ margin: 3% 1% 0 1%; }

#Pollen .ProjectsInner{ width: 180vw}
#Pollen .ProjectsInner .MainProImg{ width: 50%;}
#Pollen .ProjectsInner .ProjectDesc{ width: 41%; margin: 0 3%; float: left; }

#Pollen .GalleryMob{ width: 300vw }
#Pollen .arrow{ display: none; }
 #Pollen .Projects .Team .IndiProject { margin-top: 8%; }

}

@media (max-width: 480px) {

#Pollen .BannerMain .ProjectName h2{ font-size: 2.4rem; }
#Pollen .Logo .PollenLogoIn, #Pollen .Logo .PollenLogo{ max-width: 150px; margin-right: 10px;  }

  @-webkit-keyframes reveal {
  0% {opacity: 0; -webkit-transform: translateY(40%); transform: translateY(40%);}
  100% { -webkit-transform: translateY(20%);  transform: translateY(20%); opacity: 1;}
}
@keyframes reveal {
  0% { -webkit-transform: translateY(40%); transform: translateY(40%); opacity: 0;}
  100% { -webkit-transform: translateY(20%); transform: translateY(20%); opacity: 1;}
}


@-webkit-keyframes slide-bot {
  0% { -webkit-transform: translateY(-35%); transform: translateY(-35%); opacity: 0;}
  100% {  -webkit-transform: translateY(15%); transform: translateY(15%); opacity:1;}
}
@keyframes slide-bot {
  0% { -webkit-transform: translateY(-35%); transform: translateY(-35%); opacity: 0;}
  100% { -webkit-transform: translateY(15%); transform: translateY(15%); opacity: 1;}
}

#Pollen .WhiteHam{ display: none; }
#Pollen .ColorHam{ display: block; }

#Pollen .Projects .ProSection .IndiProject img{ width: 100%; }






#Pollen .gallery2{column-count:2;}

}



.VertScroll{ height: 500px; overflow-y: auto; overflow-x:hidden; box-sizing: border-box; padding:0 10px 10px 0;}
.VertScrollSmll{ height: 250px; overflow-y: auto; overflow-x:hidden; box-sizing: border-box; padding:0 10px 10px 0; } 
.VertScroll::-webkit-scrollbar, .VertScrollSmll::-webkit-scrollbar {
    width: 3px;
}

.VertScroll::-webkit-scrollbar-track, .VertScrollSmll::-webkit-scrollbar-track {
    background: #47403a;
}

.VertScroll::-webkit-scrollbar-thumb,.VertScrollSmll::-webkit-scrollbar-thumb {
    background: #aa7044;
    border-radius: 4px;
}



@media(max-width: 780px){
  .VertScrollSmll{ height: 300px;}
}

@media(max-width: 3600px){
  .VertScrollSmll{ height: 250px;}
}