html{
    width: 100%;
    height:100vh;
    /* overflow: hidden; */
    margin: 0;
}
body{
    width: 100%;
    height: 100vh;
    background:#000000;
    color: white;
    font-family: 'KoHo', sans-serif;
    margin: 0;
}
.box {
  position: relative;
  margin: 25px auto;
  width:100%;
  height: 57.402vw;
  /* border: #fff solid 1px; */
}
.info{
    position: absolute;
    top: 1%;
    width: 31%;
    height: 7em;
    left: 66%;
    z-index:8;

}
.info .projects-link{
    font-size: .8em;
}
.info .projects-link img{
    width:16px;
    height:auto;
    margin-bottom: -.3em;
}
.vp-screenshot{
  width: 100%;
  padding-top: 48.303%;
  background-image: url(assets/images/videopulse.png);
  background-size: contain;
}
.alt-info{
    display: default;
}
.alt-info,.info{
  /* position: absolute; */
  border: solid 1px #0000aa;
  font-family: 'KoHo', sans-serif;
  font-size: 1.5em;
  color: #fff;
  padding-left:.5em;
  padding-right:.5em;

}
.alt-info h1,.info h1{
font-size: 1em;
  margin-top: .1em;
  margin-bottom: .1em;
}
.alt-info h2,.info h2{
  margin-top: .1em;
  margin-bottom: .1em;
}

.alt-info p,.info p{
  margin-top: .1em;
  margin-bottom: .1em;
}
.alt-info p a,.info p a{
  color: #fff;
  text-decoration: none;
}
.alt-info p a img,.info p a img{
    width:32px;
    padding:2px;
}
.dude {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(0,0,0);
  background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,5,85,1) 93%, rgba(0,8,149,1) 100%);
  background-size: cover;
	-webkit-clip-path: polygon(37.532% 79.186%, 37.273% 77.602%, 37.403% 75.113%, 37.662% 71.719%, 39.091% 63.801%, 39.481% 61.538%, 40.390% 59.050%, 40.519% 56.561%, 41.039% 55.656%, 41.818% 52.489%, 42.597% 50.679%, 44.026% 50.000%, 44.935% 49.095%, 47.922% 47.511%, 49.091% 46.833%, 50.000% 44.570%, 50.000% 43.665%, 49.610% 43.213%, 49.221% 42.534%, 48.961% 40.724%, 48.961% 38.462%, 48.701% 36.878%, 48.831% 35.294%, 49.091% 33.484%, 50.000% 31.222%, 51.299% 29.412%, 52.727% 28.507%, 54.805% 28.733%, 56.494% 29.864%, 57.662% 32.127%, 57.662% 33.710%, 57.143% 35.068%, 57.403% 37.557%, 57.403% 38.688%, 57.273% 39.819%, 57.403% 41.403%, 57.143% 43.891%, 56.623% 45.475%, 56.623% 46.833%, 56.494% 48.643%, 57.662% 49.774%, 60.390% 52.262%, 61.429% 54.299%, 63.247% 61.312%, 61.429% 74.661%, 57.922% 67.873%, 56.234% 76.923%, 57.273% 76.697%, 58.312% 78.054%, 59.351% 79.864%, 58.961% 80.995%, 58.312% 79.412%, 57.013% 78.733%, 58.182% 80.543%, 59.351% 82.805%, 58.961% 83.258%, 58.312% 83.484%, 58.182% 84.163%, 57.792% 84.389%, 57.273% 83.937%, 56.494% 82.805%, 54.286% 81.674%, 52.857% 82.579%, 51.429% 82.579%, 43.117% 80.995%, 42.597% 81.674%, 38.831% 80.995%, 37.922% 80.317%);
  clip-path: polygon(37.532% 79.186%, 37.273% 77.602%, 37.403% 75.113%, 37.662% 71.719%, 39.091% 63.801%, 39.481% 61.538%, 40.390% 59.050%, 40.519% 56.561%, 41.039% 55.656%, 41.818% 52.489%, 42.597% 50.679%, 44.026% 50.000%, 44.935% 49.095%, 47.922% 47.511%, 49.091% 46.833%, 50.000% 44.570%, 50.000% 43.665%, 49.610% 43.213%, 49.221% 42.534%, 48.961% 40.724%, 48.961% 38.462%, 48.701% 36.878%, 48.831% 35.294%, 49.091% 33.484%, 50.000% 31.222%, 51.299% 29.412%, 52.727% 28.507%, 54.805% 28.733%, 56.494% 29.864%, 57.662% 32.127%, 57.662% 33.710%, 57.143% 35.068%, 57.403% 37.557%, 57.403% 38.688%, 57.273% 39.819%, 57.403% 41.403%, 57.143% 43.891%, 56.623% 45.475%, 56.623% 46.833%, 56.494% 48.643%, 57.662% 49.774%, 60.390% 52.262%, 61.429% 54.299%, 63.247% 61.312%, 61.429% 74.661%, 57.922% 67.873%, 56.234% 76.923%, 57.273% 76.697%, 58.312% 78.054%, 59.351% 79.864%, 58.961% 80.995%, 58.312% 79.412%, 57.013% 78.733%, 58.182% 80.543%, 59.351% 82.805%, 58.961% 83.258%, 58.312% 83.484%, 58.182% 84.163%, 57.792% 84.389%, 57.273% 83.937%, 56.494% 82.805%, 54.286% 81.674%, 52.857% 82.579%, 51.429% 82.579%, 43.117% 80.995%, 42.597% 81.674%, 38.831% 80.995%, 37.922% 80.317%);
}

.monitor {
  position: relative;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%;

  background: rgb(0,4,108);
background: linear-gradient(4deg, rgba(0,4,108,1) 40%, rgba(0,0,0,1) 79%);
	-webkit-clip-path: polygon(75.325% 78.281%,  59.610% 82.353%,  59.351% 82.353%,  58.961% 81.900%,  58.831% 81.222%,  58.961% 79.864%,  64.935% 42.760%,  65.325% 41.629%,  65.844% 41.176%,  86.364% 42.760%,  86.753% 43.213%,  86.883% 44.118%,  80.779% 76.018%,  80.390% 76.697%,  80.130% 76.923%);
  clip-path: polygon(75.325% 78.281%,  59.610% 82.353%,  59.351% 82.353%,  58.961% 81.900%,  58.831% 81.222%,  58.961% 79.864%,  64.935% 42.760%,  65.325% 41.629%,  65.844% 41.176%,  86.364% 42.760%,  86.753% 43.213%,  86.883% 44.118%,  80.779% 76.018%,  80.390% 76.697%,  80.130% 76.923%);
  border: #fff solid 1px;
}

.hilite{
  position: absolute;
  top:0px;
  left:5px;
  width: 100%;
  height: 100%;
  z-index:4;
  background: rgb(255,255,255);
  background: linear-gradient(176deg, rgba(105,105,105,1) 0%, rgba(22,25,100,1) 93%, rgba(6,6,90,1) 100%);
  -webkit-clip-path: polygon(65.455% 40.950%, 64.805% 41.403%, 64.545% 42.081%, 58.442% 80.543%, 58.571% 81.448%, 58.831% 82.353%, 59.351% 82.353%, 58.961% 81.900%, 58.831% 80.995%, 64.935% 42.081%, 65.195% 41.629%);
  clip-path: polygon(65.455% 40.950%, 64.805% 41.403%, 64.545% 42.081%, 58.442% 80.543%, 58.571% 81.448%, 58.831% 82.353%, 59.351% 82.353%, 58.961% 81.900%, 58.831% 80.995%, 64.935% 42.081%, 65.195% 41.629%);
}
.lampshade{
  position: absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%;
  z-index:5;
  background: rgb(2,0,135);
  background: linear-gradient(56deg, rgba(2,0,135,1) 35%, rgba(0,2,74,1) 40%, rgba(0,1,48,1) 47%);
  -webkit-clip-path: polygon(35.325% 36.199%, 34.026% 33.484%, 33.377% 32.805%, 32.597% 32.579%, 29.351% 31.900%, 29.091% 31.674%, 28.182% 29.412%, 27.922% 29.412%, 27.013% 29.864%, 26.494% 30.317%, 25.455% 31.900%, 25.455% 32.579%, 26.104% 34.842%, 26.104% 35.520%, 26.104% 36.425%, 25.195% 41.403%, 25.065% 42.760%, 25.195% 43.665%, 26.104% 47.059%, 26.364% 46.154%, 27.143% 44.796%, 28.831% 42.308%, 32.208% 38.462%, 33.896% 36.878%);
  clip-path: polygon(35.325% 36.199%, 34.026% 33.484%, 33.377% 32.805%, 32.597% 32.579%, 29.351% 31.900%, 29.091% 31.674%, 28.182% 29.412%, 27.922% 29.412%, 27.013% 29.864%, 26.494% 30.317%, 25.455% 31.900%, 25.455% 32.579%, 26.104% 34.842%, 26.104% 35.520%, 26.104% 36.425%, 25.195% 41.403%, 25.065% 42.760%, 25.195% 43.665%, 26.104% 47.059%, 26.364% 46.154%, 27.143% 44.796%, 28.831% 42.308%, 32.208% 38.462%, 33.896% 36.878%);
}
.lamplight{
  position: absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%;
  z-index:5;
  background: rgb(2,0,155);
  background: linear-gradient(56deg, rgba(6,10,155,1) 35%, rgba(9,12,84,1) 40%, rgba(81,101,58,1) 47%);
  -webkit-clip-path: polygon(26.104% 46.833%, 26.364% 45.928%, 27.403% 44.118%, 28.701% 42.081%, 30.909% 39.593%, 32.468% 38.009%, 33.896% 36.878%, 35.455% 35.973%, 35.714% 36.199%, 35.844% 37.104%, 35.195% 38.688%, 33.636% 40.950%, 31.818% 43.213%, 29.740% 45.701%, 27.403% 47.285%, 26.364% 47.964%, 26.104% 47.738%);
  clip-path: polygon(26.104% 46.833%, 26.364% 45.928%, 27.403% 44.118%, 28.701% 42.081%, 30.909% 39.593%, 32.468% 38.009%, 33.896% 36.878%, 35.455% 35.973%, 35.714% 36.199%, 35.844% 37.104%, 35.195% 38.688%, 33.636% 40.950%, 31.818% 43.213%, 29.740% 45.701%, 27.403% 47.285%, 26.364% 47.964%, 26.104% 47.738%);
}
.ballast{
  position: absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%;
  z-index:5;
  
  background: rgb(27,24,212);
  background: linear-gradient(50deg, rgba(27,24,212,1) 13%, rgba(1,3,87,1) 35%, rgba(0,0,0,1) 44%);
  
  -webkit-clip-path: polygon(28.312% 29.412%, 27.792% 29.638%, 27.013% 30.090%, 26.104% 31.222%, 25.455% 32.353%, 25.325% 33.032%, 24.545% 33.710%, 24.156% 32.805%, 25.065% 31.674%, 25.065% 30.769%, 24.156% 28.281%, 24.545% 27.149%, 24.416% 26.018%, 24.935% 25.566%, 25.325% 26.018%, 26.234% 25.792%, 27.662% 28.281%, 28.052% 28.281%, 28.312% 28.733%, 28.312% 29.186%);
  clip-path: polygon(28.312% 29.412%, 27.792% 29.638%, 27.013% 30.090%, 26.104% 31.222%, 25.455% 32.353%, 25.325% 33.032%, 24.545% 33.710%, 24.156% 32.805%, 25.065% 31.674%, 25.065% 30.769%, 24.156% 28.281%, 24.545% 27.149%, 24.416% 26.018%, 24.935% 25.566%, 25.325% 26.018%, 26.234% 25.792%, 27.662% 28.281%, 28.052% 28.281%, 28.312% 28.733%, 28.312% 29.186%);
}
.boom{
  position: absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%;
  z-index:6;

  background: rgb(27,24,212);
  background: linear-gradient(151deg, rgba(0,0,0,1) 27%, rgba(27,24,212,1) 28%, rgba(1,3,87,1) 29%, rgba(0,0,0,1) 30%);
  
  -webkit-clip-path: polygon(4.935% 51.131%, 22.338% 34.389%, 22.338% 34.163%, 23.896% 32.579%, 24.416% 32.805%, 24.675% 33.710%, 24.545% 34.615%, 22.987% 35.973%, 22.727% 35.973%, 5.325% 52.941%);
  clip-path: polygon(4.935% 51.131%, 22.338% 34.389%, 22.338% 34.163%, 23.896% 32.579%, 24.416% 32.805%, 24.675% 33.710%, 24.545% 34.615%, 22.987% 35.973%, 22.727% 35.973%, 5.325% 52.941%);
}
.stand{
  position: absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%;
  z-index:6;
  background: rgb(2,0,135);
  background: linear-gradient(180deg, rgba(2,0,135,1) 16%, rgba(0,1,36,1) 69%, rgba(0,0,0,1) 100%);
  -webkit-clip-path: polygon(11.299% 47.964%, 11.688% 47.285%, 11.688% 46.380%, 11.558% 45.249%, 11.039% 44.344%, 10.390% 44.344%, 9.740% 44.796%, 9.351% 45.928%, 9.481% 47.285%, 9.870% 48.190%, 10.130% 48.190%, 9.610% 100.452%, 11.299% 100.452%);
  clip-path: polygon(11.299% 47.964%, 11.688% 47.285%, 11.688% 46.380%, 11.558% 45.249%, 11.039% 44.344%, 10.390% 44.344%, 9.740% 44.796%, 9.351% 45.928%, 9.481% 47.285%, 9.870% 48.190%, 10.130% 48.190%, 10.130% 100.452%, 11.299% 100.452%);
}
.mugbody{
  position: absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%;
  z-index:6;
  background: rgb(27,24,212);
  background: linear-gradient(180deg, rgba(27,24,212,1) 16%, rgba(1,3,87,1) 69%, rgba(0,0,0,1) 100%);
  -webkit-clip-path: polygon(28.442% 87.783%, 28.442% 77.376%, 28.442% 77.149%, 29.091% 77.149%, 30.909% 76.923%, 32.208% 76.923%, 33.247% 77.149%, 33.506% 77.376%, 33.377% 87.783%, 32.987% 88.235%, 32.078% 88.688%, 31.169% 88.914%, 30.000% 88.914%, 28.961% 88.462%);
  clip-path: polygon(28.442% 87.783%, 28.442% 77.376%, 28.442% 77.149%, 29.091% 77.149%, 30.909% 76.923%, 32.208% 76.923%, 33.247% 77.149%, 33.506% 77.376%, 33.377% 87.783%, 32.987% 88.235%, 32.078% 88.688%, 31.169% 88.914%, 30.000% 88.914%, 28.961% 88.462%);
}
.mughandle{
  position: absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%;
  z-index:6;
  background: rgb(27,24,212);
  background: linear-gradient(180deg, rgba(27,24,212,1) 16%, rgba(1,3,87,1) 69%, rgba(0,0,0,1) 100%);
  -webkit-clip-path: polygon(33.506% 78.733%, 34.286% 78.507%, 34.805% 78.733%, 35.325% 79.864%, 35.714% 80.995%, 35.714% 82.805%, 35.584% 84.615%, 35.065% 85.973%, 34.416% 86.425%, 33.506% 86.425%, 33.506% 84.389%, 33.896% 85.294%, 34.156% 85.294%, 34.805% 85.294%, 35.325% 84.163%, 35.325% 82.805%, 35.325% 80.995%, 34.805% 79.864%, 34.416% 79.412%, 34.026% 79.412%, 33.506% 80.090%);
  clip-path: polygon(33.506% 78.733%, 34.286% 78.507%, 34.805% 78.733%, 35.325% 79.864%, 35.714% 80.995%, 35.714% 82.805%, 35.584% 84.615%, 35.065% 85.973%, 34.416% 86.425%, 33.506% 86.425%, 33.506% 84.389%, 33.896% 85.294%, 34.156% 85.294%, 34.805% 85.294%, 35.325% 84.163%, 35.325% 82.805%, 35.325% 80.995%, 34.805% 79.864%, 34.416% 79.412%, 34.026% 79.412%, 33.506% 80.090%);
}
.pane1{
  position: absolute;
  top:0px;
  left:0px;
  width: 10.390%;
  height: 27.149%;
  z-index:0;
  background: rgb(2,0,155);
}
.pane2{
  position: absolute;
  top:0%;
  left:11%;
  width: 10.390%;
  height: 27.149%;
  z-index:0;
  background: rgb(2,0,155);
}
.pane3{
  position: absolute;
  top:0%;
  left:22%;
  width: 10.390%;
  height: 27.149%;
  z-index:0;
  background: rgb(2,0,155);
}
.pane4{
  position: absolute;
  top:0%;
  left:33%;
  width: 10.390%;
  height: 27.149%;
  z-index:0;
  background: rgb(2,0,155);
}
.pane5{
  position: absolute;
  top:0%;
  left:44%;
  width: 10.390%;
  height: 27.149%;
  z-index:0;
  background: rgb(2,0,155);
}
.pane6{
  position: absolute;
  top:0%;
  left:55%;
  width: 10.390%;
  height: 27.149%;
  z-index:0;
  background: rgb(2,0,155);
}
.pane7{
  position: absolute;
  top:28%;
  left:0px;
  width: 10.390%;
  height: 57%;
  z-index:0;
  background: rgb(2,0,155);
}
.pane8{
  position: absolute;
  top:28%;
  left:11%;
  width: 10.390%;
  height: 57%;
  z-index:0;
  background: rgb(2,0,155);
}
.pane9{
  position: absolute;
  top:28%;
  left:22%;
  width: 10.390%;
  height: 57%;
  z-index:0;
  background: rgb(2,0,155);
}
.pane10{
  position: absolute;
  top:28%;
  left:33%;
  width: 10.390%;
  height: 57%;
  z-index:0;
  background: rgb(2,0,155);
}
.pane11{
  position: absolute;
  top:28%;
  left:44%;
  width: 10.390%;
  height: 57%;
  z-index:0;
  background: rgb(2,0,155);
}
.pane12{
  position: absolute;
  top:28%;
  left:55%;
  width: 10.390%;
  height: 57%;
  z-index:0;
  background: rgb(2,0,155);
}
.table{
  position: absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%;
  z-index:0;
  background: rgb(0,0,0);

  -webkit-clip-path: polygon(32.597% 79.412%, 23.377% 95.023%, 99.870% 95.023%, 99.870% 93.439%, 83.766% 79.412%);
  clip-path: polygon(32.597% 79.412%, 23.377% 95.023%, 99.870% 95.023%, 99.870% 93.439%, 83.766% 79.412%);
}
.cat{
  position: absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%;
  z-index:0;
  background: rgb(0,0,0);
  -webkit-clip-path: polygon(17.662% 62.670%, 17.403% 63.122%, 17.273% 64.480%, 17.403% 66.290%, 17.273% 67.421%, 17.273% 69.910%, 17.013% 71.041%, 16.364% 73.303%, 16.234% 75.566%, 15.714% 76.697%, 15.455% 77.828%, 15.325% 79.186%, 15.195% 83.032%, 15.325% 84.163%, 15.325% 84.842%, 15.065% 85.294%, 14.935% 86.652%, 15.065% 88.009%, 15.844% 90.498%, 15.584% 90.498%, 15.325% 90.950%, 15.195% 91.629%, 15.455% 91.855%, 17.662% 92.081%, 19.740% 91.855%, 22.338% 92.081%, 25.065% 92.308%, 27.403% 91.403%, 28.571% 89.819%, 28.961% 88.235%, 29.091% 85.973%, 28.831% 85.747%, 28.701% 85.973%, 28.571% 86.425%, 28.312% 88.009%, 27.662% 88.914%, 26.753% 89.593%, 24.545% 89.819%, 22.078% 89.140%, 22.727% 87.104%, 22.727% 85.747%, 22.597% 84.389%, 21.948% 83.032%, 21.688% 80.543%, 21.039% 77.376%, 20.779% 76.018%, 20.779% 74.434%, 20.519% 72.851%, 20.390% 72.172%, 20.390% 71.041%, 20.909% 70.136%, 21.169% 69.005%, 21.169% 67.195%, 21.558% 65.611%, 21.558% 64.480%, 21.429% 64.253%, 21.039% 64.253%, 20.260% 65.385%, 19.610% 65.158%, 18.831% 65.158%, 18.182% 63.122%, 17.922% 62.670%);  
  clip-path: polygon(17.662% 62.670%, 17.403% 63.122%, 17.273% 64.480%, 17.403% 66.290%, 17.273% 67.421%, 17.273% 69.910%, 17.013% 71.041%, 16.364% 73.303%, 16.234% 75.566%, 15.714% 76.697%, 15.455% 77.828%, 15.325% 79.186%, 15.195% 83.032%, 15.325% 84.163%, 15.325% 84.842%, 15.065% 85.294%, 14.935% 86.652%, 15.065% 88.009%, 15.844% 90.498%, 15.584% 90.498%, 15.325% 90.950%, 15.195% 91.629%, 15.455% 91.855%, 17.662% 92.081%, 19.740% 91.855%, 22.338% 92.081%, 25.065% 92.308%, 27.403% 91.403%, 28.571% 89.819%, 28.961% 88.235%, 29.091% 85.973%, 28.831% 85.747%, 28.701% 85.973%, 28.571% 86.425%, 28.312% 88.009%, 27.662% 88.914%, 26.753% 89.593%, 24.545% 89.819%, 22.078% 89.140%, 22.727% 87.104%, 22.727% 85.747%, 22.597% 84.389%, 21.948% 83.032%, 21.688% 80.543%, 21.039% 77.376%, 20.779% 76.018%, 20.779% 74.434%, 20.519% 72.851%, 20.390% 72.172%, 20.390% 71.041%, 20.909% 70.136%, 21.169% 69.005%, 21.169% 67.195%, 21.558% 65.611%, 21.558% 64.480%, 21.429% 64.253%, 21.039% 64.253%, 20.260% 65.385%, 19.610% 65.158%, 18.831% 65.158%, 18.182% 63.122%, 17.922% 62.670%);
}

.project-container{
        flex: 1 1 100%;
        /* width: 33%; */
        /* border: white 1px solid;  */

        background-color: darkblue;
        color: white;
        padding: 1em;
        margin: 1em;
    }
    .project-text{
      position: relative;
      top: 250px;
      color:#000000;
      font-weight: 600;
      background: rgb(0,0,0);
      background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,139,1) 35%, rgba(0,0,139,1) 100%);
    }
    .project-desc{
        /* height: 6em; */
        background-image: url(assets/images/violine1.png); 
        background-size: contain;
        z-index: 1;
        overflow: hidden;
      overflow: auto;
    }
    .project-desc a{
        text-decoration: none;
        color: rgb(122, 195, 255);
    }
    .project-desc a:hover{
        text-decoration: none;
        color: white;
        font-weight: bold;
    }

    .project-overlay-h{
        z-index: 1;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        position: absolute;
        /* background: rgb(0,0,0);
        background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); */
    }
    .project-overlay{
        z-index: 10;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        position: absolute;
        background: rgb(0,0,0);
        background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    }
    .project-desc-h{
        overflow: auto;
        z-index: 10;
        height:100%;
        transition: 400ms;
        overflow: hidden;
    }
.project-container  img{
        height: 20px;
        /* width: 20px; */
        padding-left: 2px;
        padding-right: 2px;
        margin-top: -1px;
    }
.projects-container{
  display: flex;
  flex-direction: row;
}

@media only screen
and (min-width : 1300px)
and (max-width : 1470px) 
{
    .info{
        height: 7em;
    }
    .info .projects-link{
        font-size: 0.8em;
        margin-top:-1;
        margin-bottom: 0;
      
    }
    .project-container{
      flex: 0 1 33%;
    }
}
@media only screen
and (min-width : 1190px)
and (max-width : 1300px) 
{
    .info{
        height: 7em;
        
    }
    .project-container{
      flex: 0 1 33%;
    }
    .info .projects-link{
        font-size: 0.8em;
        margin-top:-1em;
        margin-bottom:0;
      
    }
    .info .projects-link img{
        width:8px;
        height:auto;
        margin-bottom: -.3em;
    }

}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 1190px) 
/* and (min-width : 800px) */
{
/* Styles */
    .info{
        height:7.5em;
        font-size: 1em;
    }
    .info p{
        margin-top: .1em;
        margin-bottom: .1em;
    }
    .info h1{
        margin-top: .1em;
        margin-bottom: .1em;
    }
    .info h2{
        margin-top: .1em;
        margin-bottom: .1em;
    }
    .info p a{
        color: #fff;
        text-decoration: none;
    }
    .info p a img{
        width:32px;
        padding:2px;
    }
    .alt-info{
        width: 100vw;
    }
    .project-container{
      flex: 0 1 50%;
    }
    .projects-container{
      display: flex;
      flex-direction: column;
    }
    
    

}
@media only screen
/* and (max-width : 1080px) */
and (min-width : 800px){
    .project-container{
      flex: 0 1 100%;
    }
    .alt-info{
        display: none;
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 250px)
and (max-width : 800px) {
    .project-container{
        flex: 0 1 100%;
        /* border: white 1px solid;  */
        position: relative;
        background-color: darkblue;
        color: white;
        padding: 1em;;
    }

    .info{
        display: none;
    }
    .alt-info{
        display: default;
    }
    .side-spacer {
      width: 70px;
    }

}
.leaflet-screenshot {
  display: flex;
  justify-content: space-between;
  /* width: 100%; */
  /* height: 200px; */
  text-align: center;
}

.leaflet-screenshot img {
  /* flex-grow: 1; */
  /* height: auto; */
}
.screenshot-container {
  flex-basis: auto;
  flex-grow: 1;
}
.img-nav {
  align-self: center;
  font-size: 3.3rem;
  flex-grow: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.img-nav:hover {
  background-color: #0000007f;
}
.site-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.main-content {
  flex-grow: 1;
  overflow-y:auto;
  overflow-x: hidden;
}
.footer {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-content: space-around;
  flex-shrink: 0;
  flex-grow: 0;
  padding: 6px;
  background-color: #0000aa;
}
.footer a {
  color: #ffffff;
  text-decoration: none;
}
.side-spacer {
  width: 160px;
}