/* popup */

.popup-team-desc-02{
  width: 95%;
  height: 100%;
  display: none;

  position: absolute;
  top: 0;
  right: 2.5%;
  background: rgba(0,0,0,0);
  /* animation: 8s fadeIn;
  animation-fill-mode: forwards; */
  
}

#popup-article:target{
  display: flex;
}

/* .container-team-02 input[type=radio]:checked ~ #my_div_01 .popup-team-desc-02{ */
/*
.open-popup-main input:checked ~ .open-popup-1 {
	display: inline-block; background: #ff0000; color: #fff;
}
*/

.checkbox-02:checked ~ .popup-team-desc-02 {
	display: inline-block;
  /* -webkit-animation: open-animation .6s;
          animation: open-animation .6s; */
		  
}

.container-team-02 input:checked ~ .popup-team-desc-02:before{
  content: "";
  box-sizing: border-box;
  width: 100%;
  background-color: #fff;

  position: absolute;
  left: 0;
  top: 50%;
  will-change: height, top;
  -webkit-animation: open-animation .6s cubic-bezier(0.83, 0.04, 0, 1.16) .65s both;
          animation: open-animation .6s cubic-bezier(0.83, 0.04, 0, 1.16) .65s both;
}

/* [type=radio] */
.container-team-02 input:checked ~ .popup-team-desc-02:after{
  content: "";
  width: 0;
  height: 2px;
  background-color: #f0f0f0;

  will-change: width, opacity;
  -webkit-animation: line-animation .6s cubic-bezier(0.83, 0.04, 0, 1.16) both;
          animation: line-animation .6s cubic-bezier(0.83, 0.04, 0, 1.16) both;

  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -1px;
}
	
.popup-team-desc-02:before{
  content: "";
  box-sizing: border-box;
  width: 100%;
  background-color: rgba(0,0,0,0.5);

  position: absolute;
  left: 0;
  top: 50%;
  will-change: height, top;
  -webkit-animation: open-animation .6s cubic-bezier(0.83, 0.04, 0, 1.16) .65s both;
          animation: open-animation .6s cubic-bezier(0.83, 0.04, 0, 1.16) .65s both;
}

.popup-team-desc-02:after{
  content: "";
  width: 0;
  height: 2px;
  background-color: rgba(0,0,0,1.0);

  will-change: width, opacity;
  -webkit-animation: line-animation .6s cubic-bezier(0.83, 0.04, 0, 1.16) both;
          animation: line-animation .6s cubic-bezier(0.83, 0.04, 0, 1.16) both;

  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -1px;
}

@-webkit-keyframes line-animation{

  0%{
    width: 0;
    opacity: 1;
  }

  99%{
    width: 100%;
    opacity: 1;
  }

  100%{
    width: 100%;
    opacity: 0;
  }  
}

@keyframes line-animation{

  0%{
    width: 0;
    opacity: 1;
  }

  99%{
    width: 100%;
    opacity: 1;
  }

  100%{
    width: 100%;
    opacity: 0;
  }  
}

@-webkit-keyframes open-animation{

  0%{
    height: 0;
    top: 50%;
  }

  100%{
    height: 100vh;
    top: 0;
  }
}

@keyframes open-animation{

  0%{
    height: 0;
    top: 50%;
  }

  100%{
    height: 100vh;
    top: 0;
  }
}

/*
.popup-team-desc-02 .popup-team-desc-02-content{
  height: calc(100vh - 40px);
  padding: 5% 15%;
  box-sizing: border-box;
  position: relative;
  
  margin: auto;
  overflow: auto;
  -webkit-animation: fade 6.5s ease-out 16.3s both;
          animation: fade 6.5s ease-out 16.3s both;
}
*/
.popup-team-desc-02 .popup-team-desc-02-content{
  /* height: calc(100vh - 40px); */
  height: 100%;
  padding: 5% 5%;
  box-sizing: border-box;
  position: relative;

  margin: auto;
  overflow: auto;
  -webkit-animation: fade .5s ease-out 1.3s both;
          animation: fade .5s ease-out 1.3s both;
}

@-webkit-keyframes fade{

  0%{
    opacity: 0;
  }

  100%{
    opacity: 1;
  }
}

@keyframes fade{

  0%{
    opacity: 0;
  }

  100%{
    opacity: 1;
  }
}


.popup_close{
  width: 2vw;
  height: 2vw;
  
  color: #fff;
  position: absolute;
  top: 0;
  right: 0;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTE5IDYuNDFMMTcuNTkgNSAxMiAxMC41OSA2LjQxIDUgNSA2LjQxIDEwLjU5IDEyIDUgMTcuNTkgNi40MSAxOSAxMiAxMy40MSAxNy41OSAxOSAxOSAxNy41OSAxMy40MSAxMnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==);
}


@media (max-width: 899px) {
	
.popup-team-desc-02{
  width: 90%;
  height: 90%;
  max-height: 90%;
  display: none;

  position: fixed;
  top: 5%;
  right: 5%;
  background: rgba(0,0,0,0);
  
  /* animation: 8s fadeIn;
  animation-fill-mode: forwards; */
  overflow: hidden;
  z-index: 9999;
  
}


.popup-team-desc-02:before{
  background-color: rgba(0,0,0,0.75);
}


.popup-team-desc-02 .popup-team-desc-02-content{
  /* height: calc(100vh - 40px); */
  padding: 10% 5%;
 
}

}
/*
* demo page
*/



.open-popup{
  color: #000;
  text-transform: uppercase;
  padding: 1rem 2rem;
  border: 1px solid;
}


/*
=====
LinkedIn
=====
*/

/*
@keyframes fadeIn {
  1% {
    display: hidden;
  }
  100% {
    display: inline-block;
  }
}
*/
/* Keyframes for the fade-in */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/*
.popup-team-desc-02-content {
  opacity:0;
  -webkit-animation:fadeIn ease-in 5;
  -moz-animation:fadeIn ease-in 5;
  animation:fadeIn ease-in 5;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:5s;
  -moz-animation-duration:5s;
  animation-duration:5s;
}

.popup-team-desc-02-content {
  -webkit-animation-delay: 5.3s;
  -moz-animation-delay: 5.3s;
  animation-delay: 5.3s;
}
*/

/*
@keyframes delayedShow {
  to {
    visibility: visible;
  }
}

.delayedShow{
  visibility: hidden;
  animation: 0s linear 2.3s forwards delayedShow ;
}

<div class="delayedShow">
  Hey, I'm here!
</div>

*/