#navigation {
  background-color: rgba(40, 60, 110, 255);
  border: 0 none;
  margin: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
}

.team-member {
  padding: 8px;
}

.member-thumb {
  border: 1px solid #283c6e;
  overflow: hidden;            /* clip the excess when child gets bigger than parent */
}
.member-thumb img {
  display: block;
  transition: transform .4s;   /* smoother zoom */
}
.team-member:hover img {
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1); 
}

figcaption.mask {
    background-color: rgba(14,180,147,.5);
    bottom: -206px;
    color: #fff;
    padding: 25px;
    position: absolute;
    width: 100%;
    text-align: left;
    
	-webkit-transition: all 0.4s ease 0s;
       -moz-transition: all 0.4s ease 0s;
        -ms-transition: all 0.4s ease 0s;
         -o-transition: all 0.4s ease 0s;
            transition: all 0.4s ease 0s;
}

.team-member:hover figcaption.mask {
    bottom: 0;
}

figcaption.mask h3 {
    margin: 0;
    color: #fff;
}

#proj {
	padding-bottom: 20px;
}


@keyframes bounce {
	0% {
		transform: translateY(0); 
	}
	30% {
		transform: translateY(-20px); 
	}
	50% {
		transform: translateY(5px);
	}
	70% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(0); 
	}
}

#gridmap {
  display:none;
}


.pbox {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.ppin {
  transition: all 0.3s ease-in-out;  
}

/* Apply animation on hover */
.pbox:hover + .ppin > path {
  animation: bounce 0.5s ease-in-out;
  fill: tomato;
  stroke: tomato;
}

.pbox:hover + .ppin > circle {
  animation: bounce 0.5s ease-in-out;
  fill: white;
}

.pbox:hover {
  transform: translateX(3px);
  filter: drop-shadow(2px 3px 5px rgba(0, 0, 0, 0.2));
}

body:has(.pbox:hover) .proj-info_box {
  width:auto; 
  height:auto;
}


.center-box {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 100%;
  height:auto;
  margin: 0 auto;
	
}

#proj-info {
  text-align: left;
  font-weight: 600;
  
  color:#203864;	
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1.5rem, 2.3vw, 2.5rem);
}

.proj-main {

}

.proj-container {
  margin: 0 auto;
  padding: 0 10px;
  height:auto;
  align-items: center;
  font-family: 'Open Sans', sans-serif;
  color:#203864;	
	
}

.box1 {
  
  margin: 0 auto;
  z-index: 1;
}

.box2 {
  position: absolute;
  left:22%;
  top:6%;
  z-index: 2;	
}



.proj-info_box {
  border-radius:8px;
  -webkit-border-radius: 8px; padding: 10px;
  box-sizing: border-box; color: #2D2926; 
	border:1px solid silver;
	overflow: hidden;
	background-color: rgba(255, 255, 255, .8); 
	transition: all .5s ease-in-out;
}
	
#info1, #info2, #info3, #info4, #info5, #info6, #info7, #info8, #info9,#info10  {
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  opacity:0;
  color: #2D2926;
 
  font-size: clamp(1.0rem, 1.6vw, 1.8rem);
  line-height: clamp(1.4rem, 2.3vw, 2.5rem);
  
}

#info1.opaque, #info2.opaque, #info3.opaque,#info4.opaque,#info5.opaque,#info6.opaque
  , #info7.opaque,#info8.opaque,#info9.opaque,#info10.opaque , #pix_discalimer.opaque {
    display: block;
	opacity:1;
	font-weight: 300;
	
}
	
div.contents {
  display: flex;
  align-items: top;
  box-sizing: border-box;
}

.floatl {float: left;}
.floatr {float: right;}
.full {height: 100%}