#portfolio {
  position: relative;
  color: #FFFFFF;
}
#portfolio .wrapper{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
  -ms-flex-line-pack: center;
      align-content: center;
  width: 100vw;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  overflow-y: auto;
  height: calc(290px * 18 + 100px);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 580px) {
  #portfolio .wrapper {
    height: calc(290px * 9 + 100px);
  }
}
@media screen and (min-width: 870px) {
  #portfolio .wrapper {
    height: calc(290px * 6 + 100px);
  }
}
@media screen and (min-width: 1160px) {
  #portfolio .wrapper {
    height: calc(290px * 5 + 100px);
  }
}
@media screen and (min-width: 1450px) {
  #portfolio .wrapper {
    height: calc(290px * 4 + 100px);
  }
}
@media screen and (min-width: 1740px) {
  #portfolio .wrapper {
    height: calc(290px * 3 + 100px);
  }
}
#portfolio .item{
  margin: 20px;
}
#portfolio .circle {
  background: #000;
  border-radius: 50%;
  height: 250px;
  width: 250px;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
#portfolio p {
  text-align: center;
}
#portfolio .circle p {
  background-color: rgba(105, 110, 255, 0.7);
  border-radius: 50%;
  height: 250px;
  width: 250px;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 22px;;
}
#portfolio .circle:hover {
  border-radius:0;
}
#portfolio .circle p:hover {
  border-radius:0;
  opacity: 0;
  cursor: pointer;
}
#portfolio p.text {
  display: none;
  opacity: 0;
  -webkit-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
  padding: 15px 0 0;
}
#portfolio .item:hover p.text{
  display: block;
  opacity: 1;
}
#portfolio p.text a {
  text-decoration: underline;
  font-style: italic;
}
#portfolio p.text span {
  font-size: 17px;
  font-weight: 700;
  line-height: 25px;
}
#portfolio p.text i {
  font-size: 12px;
  line-height: 24px;
}
#portfolio .lightbox {
	display: none;
	position: fixed;
	z-index: 99999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background-color: #000;
}
#portfolio .lightbox img {
  max-width: calc(100% - 50px);
  max-height: calc(100% - 138px);
  margin: 0 25px;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
#portfolio .lightbox:target {
	outline: none;
	display: block;
}
#portfolio .circle.studioproduct {
  background: url(../img/portfolio/studio-product.webp) #000;
}
#portfolio .circle.ferrandis {
  background: url(../img/portfolio/philippeferrandis.webp) #000;
}
#portfolio .circle.astrochic {
  background: url(../img/portfolio/collier-astrochic.gif) #000;
}
#portfolio .circle.bumapi {
  background: url(../img/portfolio/bumapi.webp) #000;
}
#portfolio .circle.sap {
  background: url(../img/portfolio/sap.webp) #000;
}
#portfolio .circle.sss {
  background: url(../img/portfolio/sss.webp) #000;
}
#portfolio .circle.alaphabetes {
  background: url(../img/portfolio/alphabetes.webp) #000;
}
#portfolio .circle.ailyan {
  background: url(../img/portfolio/ailyan.webp) #000;
}
#portfolio .circle.drink {
  background: url(../img/portfolio/drink.webp) #000;
}
#portfolio .circle.techrush {
  background: url(../img/portfolio/techrush.webp) #000;
}
#portfolio .circle.villes-invisibles {
  background: url(../img/portfolio/les-villes-invisibles.webp) #000;
}
#portfolio .circle.dro {
  background: url(../img/portfolio/dro.webp) #000;
}
#portfolio .circle.street-roots {
  background: url(../img/portfolio/street-roots.webp) #000;
}
#portfolio .circle.pb-recrute {
  background: url(../img/portfolio/pb-recrute.webp) #000;
}
#portfolio .circle.cyrillus {
  background: url(../img/portfolio/cyrillus.webp) #000;
}
#portfolio .circle.trucmuche {
  background: url(../img/portfolio/trucmuche.webp) #000;
}
#portfolio .circle.isotoner {
  background: url(../img/portfolio/isotoner.webp) #000;
}
#portfolio .circle.leroy {
  background: url(../img/portfolio/leroy.webp) #000;
}
#portfolio .circle.celio {
  background: url(../img/portfolio/celio.webp) #000;
}
#portfolio .circle.devianne {
  background: url(../img/portfolio/devianne.webp) #000;
}
#portfolio .circle.lacroix {
  background: url(../img/portfolio/lacroix.webp) #000;
}