/* --------------------------------------------------------------------------work*/

.itemLabel{
  display:block;
  height:100%;
  width:100%;
  position:absolute;
  top:0px;
  left:0px;
  color:black;
  font-size:1.2rem;
  font-weight: 400;
  padding:1rem;
  font-family:var(--font-family);

  box-sizing: border-box;
  cursor:pointer;

  background-color:  rgba(255,255,255,1);
  color:black;
  opacity:0;
  transition: opacity 0.15s ease-out;
  -webkit-transition: opacity 0.15s ease-out;
  -moz-transition: opacity 0.15s ease-out;
  -o-transition: opacity 0.15s ease-out;

}
.itemLabel:hover {
  display:block;
  opacity:1;
  font-size:1.6rem;
  line-height: 2rem;
  /*background-color:  rgba(255,255,255,1); color:black;*/
  background-color:black;
  color:white;

  transition: opacity 0.15s ease-out;
  -webkit-transition: opacity 0.15s ease-out;
  -moz-transition: opacity 0.15s ease-out;
  -o-transition: opacity 0.15s ease-out;

}

.itemPhoto{
  position:relative;
  top:0px;
  width:100%;
  height:100%;
  display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;


}

.itemPhoto img{
  flex-shrink: 0;
    width: 100%;
    height: 100%;
   object-fit: cover;
}






/* ---- grid ---- */

.grid, .grid2 {
  /*background: #EEE; */
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}
.grid2:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-item, .grid-sizer {
  width:  calc((100% / 3) - var(--item-margin));)

  height: 200px;
  float: left;
  /* vertical gutter */
  margin-bottom: 20px;
  border: 1px solid black;
  }

  .grid-proportional, .grid-sizer2 {
    width:  calc((100% / 2) - var(--item-margin));
    height: auto;
    float: left;
    margin-bottom: 20px;
    border: 1px solid black;
    }

  		@media screen and (max-width: 768px) {

        .grid-item, .grid-sizer {
          width:  calc((100% / 1) - var(--item-margin));
          height:200px;}
        .grid-proportional, .grid-sizer2 {
          width:  calc((100% / 1) - var(--item-margin));
          height: auto;
        }
        .margin-sizer{ width: calc(50% - var(--item-margin)); }

        .mtitle, .ptitle{
          font-size:1.4rem;
          min-width:250px;
        }
        .bubbles{
          display:none;
        }
        .tinyB{
          display:none;
        }
        .aboutText{
          min-width:280px;
          font-size: 0.92rem;
        }
			}

      @keyframes none {

      }



			@media screen and (min-width: 769px) and (max-width: 899px) {

        .grid-item, .grid-sizer {
          width:  calc((100% / 3) - var(--item-margin));
        height:200px;}
        .grid-proportional, .grid-sizer2 {
          width:  calc((100% / 1) - var(--item-margin));
          height: auto;
        }
        .mtitle, .ptitle{
          font-size:1.8rem;
          min-width:400px;
        }
        .bubbles{
          height: 100px;
          width:  100px;
          font-size:0.9rem;
        }
        .tinyB{
          height: 80px;
          width:  80px;
          font-size:0.9rem;
        }
			}

      @media screen and (min-width: 900px) and (max-width: 1399px)  {
        .grid-proportional, .grid-sizer2 {
          width:  calc((100% / 2) - var(--item-margin));
          height: auto;
        }
        .mtitle, .ptitle{
          font-size:2.4rem;
          min-width:400px;
        }
        .flex-grid{
          display: flex;
          flex-wrap: wrap;
          position: relative;

        }
        #navbarCompress{
          display:none;
          position:relative;
          width: calc(100%);
          top: 0rem;
          z-index:5;
        }
        #navbarExtend{
          display:flex;
        }
        .bubbles{
          height: 120px;
          width:  120px;
          font-size:0.89rem;
        }
        .tinyB{
          height: 100px;
          width:  100px;
          font-size:0.89rem;
        }
      }
			@media screen and (min-width: 1400px) and (max-width: 1899px) {
        .grid-item, .grid-sizer {
          width:  calc((100% / 3) - var(--item-margin));
          height:200px;}
        .grid-proportional, .grid-sizer2 {
          width:  calc((100% / 2) - var(--item-margin));
          height: auto;
        }
        .mtitle, .ptitle{
          font-size:3.5rem;
          min-width:460px;

        }
        .bubbles{
          cursor:pointer;
          border: 2px solid black;
          font-family: var(--font-family);
          background-color: white;
          font-size:1.4rem;
          position:relative;

          display: flex;
          align-items: center;
          justify-content:center;
          font-weight: 400;

          animation: floating 30s infinite;

          right:-7rem;
          top:2rem;
          height:180px;
          width:180px;
          border-radius:180px;
          margin:1rem;
          margin-right:2rem;
        }
        .tinyB{
          right:2rem;
          top:5rem;
          margin-right:2rem;
          height:140px;
          width:140px;
          animation: floatingTiny 25s 0.4s infinite;
        }

			}
			@media screen and (min-width: 1900px) {
        .grid-item, .grid-sizer {
          width:  calc((100% / 3) - var(--item-margin));
        height:200px;}
        .grid-proportional, .grid-sizer2 {
          width:  calc((100% / 2) - var(--item-margin));
          height: auto;
        }
        .mtitle, .ptitle{
          font-size:3.5rem;
          min-width:460px;

        }
        .bubbles{
          cursor:pointer;
          border: 2px solid black;
          font-family: var(--font-family);
          background-color: white;
          font-size:1.4rem;
          position:relative;

          display: flex;
          align-items: center;
          justify-content:center;
          font-weight: 400;

          animation: floating 30s infinite;

          right:-7rem;
          top:2rem;
          height:180px;
          width:180px;
          border-radius:180px;
          margin:1rem;
          margin-right:2rem;
        }
        .tinyB{
          right:2rem;
          top:5rem;
          margin-right:2rem;
          height:140px;
          width:140px;
          animation: floatingTiny 25s 0.4s infinite;
        }
			}

.grid-ghost{
  visibility: hidden;
}

.grid-item--proportional {
  height: auto;
}

.grid-item--height2 { height: 400px; }
.grid-item--height3 { height: 300px; }

.grid-item:hover{
  animation: floatUpDown 2s infinite;
  animation-timing-function: ease-in-out;
}

/* .item.w2 { width:  40%; } */
/*----------------------------------------------------------------------------GRID*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
.col6{
  flex: 6;
  min-width:300px;
}
.flex-grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
}
.col {
   flex: 1;
}
.col2 {
  flex: 2;
}
.col3 {
  flex: 3;
}
.col4 {
  flex: 4;
}
.col8 {
  flex: 8;
}