/*My god, it's full of stars...

       __                          __          __  
      / /___ _____  __  _______   / /   ____ _/ /_ 
 __  / / __ `/ __ \/ / / / ___/  / /   / __ `/ __ \
/ /_/ / /_/ / / / / /_/ (__  )  / /___/ /_/ / /_/ /
\____/\__,_/_/ /_/\__,_/____/  /_____/\__,_/_.___/


*/

/*color_ref-----------------------------------------------------------
primary/orange-pink  #ff1f50
primary/dark_grey    #5a5a5a
primary/light_grey   #878787
primary/bg_grey      #161616
primary/off-white    #cacaca

nav/off                     #939393
nav/JVDL-00 - SPOTLIGHT     #10cb9b
nav/JVDL-01 - BRANDING      #ff464d
nav/JVDL-02 - WEB/UI        #c2e44d
nav/JVDL-03 - PRINT         #26d1d0
nav/JVDL-04 - APPAREL       #ff6d2d
nav/JVDL-05 - PRODUCTION    #d35886
---------------------------------------------------------------------*/


#logo {
 padding-bottom:calc(43px + 0.5vw);
}

#logo img {
  position:absolute;
  background-color:#161616;
  height:auto;
  width:calc(220px + 3vw);
  -webkit-transition: opacity .2s ease-out;
  -moz-transition: opacity .2s ease-out;
  -o-transition: opacity .2s ease-out;
  transition: opacity .2s ease-out;
}

#logo img.logo_top:hover {
  background-color:#161616;
  opacity:0;
}

#title {
  font-family:'dinproregular', Helvetica, Arial, sans-serif;
  font-size:calc(15px + 2vw);
  color:#13cb8e;
  display:inline-block;
}

#navtext {
  font-family:'dinproregular', Helvetica, Arial, sans-serif;
  color:#848484;
  margin-top:5px;
  font-size:calc(12px + .5vw);
}

#navspotlight {
  font-family:'dinproregular', Helvetica, Arial, sans-serif;
  color:#848484;
  margin-top:5px;
  font-size:calc(12px + .5vw);
}

@media (hover: hover) and (pointer: fine) {
#navspotlight:hover {
  font-family:'dinproregular', Helvetica, Arial, sans-serif;
  color:#10cb9b;
  margin-top:5px;
  font-size:calc(12px + .5vw);
  animation:navspotlight .2s ease-out;
  -webkit-animation:navspotlight .2s ease-out;
}

@keyframes navspotlight
{
0%   {color: #848484;}
100% {color: #10cb9b;}
}

@-webkit-keyframes navspotlight
{
0%   {color: #848484;}
100% {color: #10cb9b;}
}
}

#navbranding {
  font-family:'dinproregular', Helvetica, Arial, sans-serif;
  color:#848484;
  margin-top:5px;
  font-size:calc(12px + .5vw);
}

@media (hover: hover) and (pointer: fine) {
#navbranding:hover {
  font-family:'dinproregular', Helvetica, Arial, sans-serif;
  color:#ff464d;
  margin-top:5px;
  font-size:calc(12px + .5vw);
  animation:navbranding .2s ease-out;
  -webkit-animation:navbranding .2s ease-out;
}

@keyframes navbranding
{
0%   {color: #848484;}
100% {color: #ff464d;}
}

@-webkit-keyframes navbranding
{
0%   {color: #848484;}
100% {color: #ff464d;}
}
}

#navweb {
  font-family:'dinproregular', Helvetica, Arial, sans-serif;
  color:#848484;
  margin-top:5px;
  font-size:calc(12px + .5vw);
}

@media (hover: hover) and (pointer: fine) {
#navweb:hover {
  font-family:'dinproregular', Helvetica, Arial, sans-serif;
  color:#c2e44d;
  margin-top:5px;
  font-size:calc(12px + .5vw);
  animation:navweb .2s ease-out;
  -webkit-animation:navweb .2s ease-out;
}

@keyframes navweb
{
0%   {color: #848484;}
100% {color: #c2e44d;}
}

@-webkit-keyframes navweb
{
0%   {color: #848484;}
100% {color: #c2e44d;}
}
}

#navprint {
  font-family:'dinproregular', Helvetica, Arial, sans-serif;
  color:#848484;
  margin-top:5px;
  font-size:calc(12px + .5vw);
}

@media (hover: hover) and (pointer: fine) {
#navprint:hover {
  font-family:'dinproregular', Helvetica, Arial, sans-serif;
  color:#26d1d0;
  margin-top:5px;
  font-size:calc(12px + .5vw);
  animation:navprint .2s ease-out;
  -webkit-animation:navprint .2s ease-out;
}

@keyframes navprint
{
0%   {color: #848484;}
100% {color: #26d1d0;}
}

@-webkit-keyframes navprint
{
0%   {color: #848484;}
100% {color: #26d1d0;}
}
}

#navapparel {
  font-family:'dinproregular', Helvetica, Arial, sans-serif;
  color:#848484;
  margin-top:5px;
  font-size:calc(12px + .5vw);
}

@media (hover: hover) and (pointer: fine) {
#navapparel:hover {
  font-family:'dinproregular', Helvetica, Arial, sans-serif;
  color:#ff6d2d;
  margin-top:5px;
  font-size:calc(12px + .5vw);
  animation:navapparel .2s ease-out;
  -webkit-animation:navapparel .2s ease-out;
}

@keyframes navapparel
{
0%   {color: #848484;}
100% {color: #ff6d2d;}
}

@-webkit-keyframes navapparel
{
0%   {color: #848484;}
100% {color: #ff6d2d;}
}
}

#navproduction {
  font-family:'dinproregular', Helvetica, Arial, sans-serif;
  color:#848484;
  margin-top:5px;
  font-size:calc(12px + .5vw);
}

@media (hover: hover) and (pointer: fine) {
#navproduction:hover {
  font-family:'dinproregular', Helvetica, Arial, sans-serif;
  color:#d35886;
  margin-top:5px;
  font-size:calc(12px + .5vw);
  animation:navproduction .2s ease-out;
  -webkit-animation:navproduction .2s ease-out;
}

@keyframes navproduction
{
0%   {color: #848484;}
100% {color: #d35886;}
}

@-webkit-keyframes navproduction
{
0%   {color: #848484;}
100% {color: #d35886;}
}
}

#navphotography {
  font-family:'dinproregular', Helvetica, Arial, sans-serif;
  color:#848484;
  margin-top:5px;
  font-size:calc(12px + .5vw);
}


@media (hover: hover) and (pointer: fine){
#navphotography:hover {
  font-family:'dinproregular', Helvetica, Arial, sans-serif;
  color:#8c87ff;
  margin-top:5px;
  font-size:calc(12px + .5vw);
  animation:navphotography .2s ease-out;
  -webkit-animation:navphotography .2s ease-out;
}

@keyframes navphotography
{
0%   {color: #848484;}
100% {color: #8c87ff;}
}

@-webkit-keyframes navphotography
{
0%   {color: #848484;}
100% {color: #8c87ff;}
}
}

#desctext {
  font-family:Arial, Helvetica, sans-serif;
  color:#a9a9a9;
  margin-top:0px;
  font-size:calc(11px + .05vw);
}

#emailtext {
  font-family:Arial, Helvetica, sans-serif;
  font-style:italic;
  color:#9a9a9a;
  margin-top:15px;
  font-size:calc(10px + .05vw);
}

#texty {
  font-size:calc(14px + .25vw);
  font-family:'dinproregular', Helvetica, Arial, sans-serif;
  color:#26d1d0;
  margin-top:20px;
}

.typed-cursor {
  opacity:0;
}

 #texty:after {
  font-size:calc(14px + .25vw);
  color:#26d1d0;
  content: '_';
  font-family:'dinproregular', Helvetica, Arial, sans-serif;
  -webkit-animation:flash 1s linear, background 1s linear;
  -webkit-animation-iteration-count:infinite;
  -moz-animation:flash 1s linear, background 1s linear;
  -moz-animation-iteration-count:infinite;
  -o-animation:flash 1s linear, background 1s linear;
  -o-animation-iteration-count:infinite;
  animation:flash 1s linear, background 1s linear;
  animation-iteration-count:infinite;
}

@keyframes flash
{
0%   {opacity:0;}
10%   {opacity:0;}
20%   {opacity:0;}
30%   {opacity:0;}
40%   {opacity:0;}
50%   {opacity:1;}
60%   {opacity:1;}
70%   {opacity:1;}
80%  {opacity:1;}
90%  {opacity:1;}
100%  {opacity:1;}
}

@-webkit-keyframes flash
{
0%   {opacity:0;}
10%   {opacity:0;}
20%   {opacity:0;}
30%   {opacity:0;}
40%   {opacity:0;}
50%   {opacity:1;}
60%   {opacity:1;}
70%   {opacity:1;}
80%  {opacity:1;}
90%  {opacity:1;}
100%  {opacity:1;}
}



#photos {
  margin-top:15px;
  line-height:70px;
 
   
  -webkit-column-count: 10;
  -webkit-column-gap:   30px;
  -moz-column-count:    10;
  -moz-column-gap:      30px;
  column-count:         10;
  column-gap:           30px;  
}


#photos img {
  background-color:#2c2c2c;
  width: 100% !important;
  height: auto !important;
}

#module {
  position:absolute;
  left:46px;
  top:83px;
}


#nav_up {
  position:fixed;
  bottom:10px;
  right:25px;
  z-index:100;
  display:none;
}

#nav_up img { 
  height:auto;
  width:calc(50px + 1vw);
  color:#13cb8e;
  transition: all 0.5s ease;
}

@media (hover: hover) and (pointer: fine) {
    #nav_up img:hover {
  -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   filter: grayscale(100%) opacity(30%);
}
}