html { scroll-behavior: smooth; }
a { color: black; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 20pt; text-decoration:none; }
#page { padding:0; margin:0 35px 0 35px; }



header { height:22vw; overflow:hidden; margin-bottom:25px; background-color:white; z-index:10;}
/* header a { color: black; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 20pt; } */
header #wrapper { position: relative; text-align: center; display:block; width:100%; height:100%; }
header #wrapper #logo { position:absolute; bottom:0; left:25px; display: block; height: 100%;}
header #wrapper #logo a img {  height: 100%;}
header #wrapper ul#menu { position:absolute; bottom:5px; right:40px; list-style:none; display:inline-block; padding:0; margin:0 }
header #wrapper ul#menu li { float:left; padding:0; margin:0 0 0 5vw;}
header #wrapper ul#menu li a { color: black; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size:5vw; text-decoration:none; }
header #wrapper ul#menu li a:hover { color: #777; }

header.up { 
  position: fixed; left:0; right:0; top:0px; height:8vw; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
  opacity:0.0;

  -webkit-transition: 0.2s ease-out;
  -moz-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
 }
header.up  #wrapper #logo { left:32px; }
header.up #wrapper ul#menu { top:50%; transform:translateY(-50%); }
header.up #wrapper ul#menu li a { font-size:3vw; }

body.up header.up { transform:translateY(0); opacity:1.0;  }






ul#projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  grid-gap: 1rem;
  list-style:none;
  padding:0;
}

ul#projects li {
  height:400px;
  /* width:400px; */
  /* margin-bottom:0px; */
  border-radius:3px;
  overflow:hidden;
  text-align:center;
  border:1px solid lightgray;
}

@media (min-width: 320px) and (max-width: 480px) {
  ul#projects { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  ul#projects li { height:250px; }
}

ul#projects li .block { position: relative; text-align: center; display:block; width:100%; height:100%; }
ul#projects li .image { display: block; width:100%; height:100%; background-size:cover; background-position: center center;}

ul#projects li .block {
  -webkit-transition: 0.2s cubic-bezier(0.0, 1, 0, 1);
  -moz-transition: 0.2s cubic-bezier(0.0, 1, 0, 1);
  -o-transition: 0.2s cubic-bezier(0.0, 1, 0, 1);
  transition: 0.2s cubic-bezier(0.0, 1, 0, 1);
 }

ul#projects li .overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border:0px solid black; padding: 20px; border-radius:3px;
  opacity:0.0; background:rgba(0,0,0,0.75); width:100%; height:100%;}
ul#projects li .overlay .title { margin-top:35%;  background:none; font-size:20px; font-weight: normal; color:white; font-family:'Open Sans', 'Helvetica Neue', Arial, sans-serif; display:block; transform:translate(0,10px);}
ul#projects li .overlay hr { width: 20%; margin-top:10px; margin-bottom:8px; color:white; }
ul#projects li .overlay span.tag { background:rgba(1255,255,255,1); color:black; border-radius:5px; font-size:10px; padding:5px; display:inline-block; transform:translateY(-10px); font-weight:normal;}

ul#projects li .overlay,
ul#projects li .overlay .title,
ul#projects li .overlay hr,
ul#projects li .overlay span.tag {
  -webkit-transition: 1.0s cubic-bezier(0.0, 1, 0, 1);
  -moz-transition: 1.0s cubic-bezier(0.0, 1, 0, 1);
  -o-transition: 1.0s cubic-bezier(0.0, 1, 0, 1);
  transition: 1.0s cubic-bezier(0.0, 1, 0, 1);
 }

ul#projects li:hover .overlay,
ul#projects li:active .overlay { opacity:1.0; }

ul#projects li:hover .overlay hr,
ul#projects li:active .overlay hr { transform:scaleX(1.5);}

ul#projects li:hover .overlay span.tag,
ul#projects li:active .overlay span.tag{ transform:translateY(0px); }

ul#projects li:hover .overlay .title,
ul#projects li:active .overlay .title { transform: translate(0,0); }






#page.homepage #about { display:block; width:100%; margin:300px 0 250px 0; padding-top:100px; }
#page.homepage #about a { font-size: 6vw; /*color:blue;*/ text-decoration:underline;}
#page.homepage p { font-size:5vw; }

#page #contact { display:inline-block; float:left; width:35%; font-size:60pt; }
#page.about #twitter-feed { position:absolute; right:0; display:inline-block; width:540px; float:right; }

body.gif { background:url('/assets/img/white.gif'); }
/* body.gif p { background-color: white; } */




article#project { display: block; width: 100%; margin-top:10vw; }
article#project p { font-size: 3vw; }
article#project a { font-size: 3vw; }
article#project h1 { font-size: 7vw; }
article#project img { display: block; width:100%; margin:3vw 0; }
article#project .halfsize { display: inline-block; width:45%; margin:3vw 0; }
article#project iframe.vimeo,
article#project iframe.youtube { display: block; width:100%; height: 50vw; margin:3vw 0; }