@charset "utf-8";
/* CSS Document */
body {
	font-size: 0;
	margin-left: 150px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image:url("../im-img/img-portfolio/im-portfolio_bkg.jpg");
	background-attachment:fixed;
	background-position: 50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
}

a{
	text-decoration:none;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
	0%   {opacity: 0.1;}
	100% {opacity: 1.0;}
}

/* Standard syntax */
@keyframes example {
	0%   {opacity: 0.1;}
	100% {opacity: 1.0;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example2 {
	0%   {opacity: 0.1;}
	100% {opacity: 1.0;}
}

/* Standard syntax */
@keyframes example2 {
	0%   {opacity: 0.1;}
	100% {opacity: 1.0;}
}


.por{
	color:#fff;
}


  
.h3-proy{
	font-family: 'Hind', sans-serif; 
	font-size: 14px;
	font-weight: 700;
}

.h4-proy{
	font-family: 'Hind', sans-serif; 
	font-size: 14px;	
}

.porM-01{
	padding:10px;
	text-decoration:none;
	/*border:0.5px solid #fff;*/
	box-sizing: border-box;
	width:33.33333333%;
	height:200px; 
	font-size: 14px;
	display: inline-block;
	vertical-align: top;
	border:0.5px solid rgba(255,255,255,0.5);
	transition: all 1s ease;
}
.porM-01:hover{
	background-color:rgba(255,255,255,0.7);
	border:0.5px solid rgba(255,255,255,0.5);
}
.porM-01:hover a p.pm span{ 
	color:#000;
}
.porM-01:hover a p.pm span{ 
	display: none;
	text-decoration:none;
}
.porM-01:hover a p.pm:after{ 
	color:#000;
	vertical-align: bottom;
	line-height:14px;
	content: 'Iara Ricchie ver --->';
	font-family: 'Hind', sans-serif;
	font-weight:normal;
	text-decoration:none;
}

#porMid-01:hover:before { 
	border:0.5px solid rgba(255,255,255,0.5);
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background-image: url("../im-img/img-portfolio/img-iaraRichie/Iara_Richie-02.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:50% 50%;
	-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example;
	animation-duration: 1s;
	border:0.5px solid rgba(255,255,255,0.5);
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}

.porM-02{ 
	padding:10px;
	text-decoration:none;
	/*border:0.5px solid #fff;*/
	box-sizing: border-box;
	width:33.33333333%;
	height:200px; 
	font-size: 14px;
	display: inline-block;
	vertical-align: top;
	border:0.5px solid rgba(255,255,255,0.5);
	transition: all 1s ease;
}
.porM-02:hover{
	background-color:rgba(255,255,255,0.7);
	border:0.5px solid rgba(255,255,255,0.5);
}
.porM-02:hover a p.pm span{ 
	background-color:rgba(255,255,255,0.7);  
	color:#000;
	content: 'Proyecto 02:+';
}
.porM-02:hover a p.pm span{ 
	background-color:rgba(255,255,255,0.7);
	display: none;
	text-decoration:none;
}
.porM-02:hover a p.pm:after{
	color:#000;
	vertical-align: middle;
	line-height:14px;
	content: 'Proyecto: Adiabatic ver --->';
	font-family: 'Hind', sans-serif;
	font-weight:normal;
	text-decoration:none;
}

#porMid-02:hover:before { 
	border:0.5px solid rgba(255,255,255,0.5);
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background-image: url("../im-img/img-portfolio/img_adiabatic/Adiabatic-fnd.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:50% 50%;
	-webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example2;
	animation-duration: 1s;
}

.porM-03{ 
	padding:10px;
	text-decoration:none;
	/*border:0.5px solid #fff;*/
	box-sizing: border-box;
	width:33.33333333%;
	height:200px; 
	font-size: 14px;
	display: inline-block;
	vertical-align: top;
	border:0.5px solid rgba(255,255,255,0.5);
	transition: all 1s ease;
}
.porM-03:hover{ 
	background-color:rgba(255,255,255,0.7);
	border:0.5px solid rgba(255,255,255,0.5);
}
.porM-03:hover a p.pm span{ 
	color:#000;
	content: 'Proyecto:';
	-webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example2;
	animation-duration: 1s;
}
.porM-03:hover a p.pm span{ 
	display: none;
	text-decoration:none;
}
.porM-03:hover a p.pm:after{ 
	color:#000;
	vertical-align: middle;
	line-height:14px;
	content: 'Kurumi ver --->';
	text-decoration:none;
	font-family: 'Hind', sans-serif;
	font-weight:normal;
	text-decoration:none;
}

#porMid-03:hover:before { 
	background-image: url("../im-img/img-portfolio/img-kurumi/Kurumi-fnd.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:50% 50%;
	-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example;
	animation-duration: 1s;
	border:0.5px solid rgba(255,255,255,0.5);
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}

.porM-04{ 
	padding:10px;
	text-decoration:none;
	/*border:0.5px solid #fff;*/
	box-sizing: border-box;
	width:33.33333333%;
	height:200px; 
	font-size: 14px;
	display: inline-block;
	vertical-align: top;
	border:0.5px solid rgba(255,255,255,0.5);
	transition: all 1s ease;
}
.porM-04:hover{ 
	background-color:rgba(255,255,255,0.7);
	border:0.5px solid rgba(255,255,255,0.5);
}
.porM-04:hover a p.pm span{ 
	color:#000;
	content: 'Proyecto:';
	-webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example2;
	animation-duration: 1s;
}
.porM-04:hover a p.pm span{ 
	display: none;
	text-decoration:none;
}
.porM-04:hover a p.pm:after{
	color:#000;
	vertical-align: middle;
	line-height:14px;
	content: 'Genesis Copiers ver --->';
	text-decoration:none;
	font-family: 'Hind', sans-serif;
	font-weight:normal;
	text-decoration:none;
}

#porMid-04:hover:before { 
	background-image: url("../im-img/img-portfolio/img-genesis/Genesis-fnd.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:50% 50%;
	-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example;
	animation-duration: 1s;
	border:0.5px solid rgba(255,255,255,0.5);
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}

.porM-05{ 
	padding:10px;
	text-decoration:none;
	/*border:0.5px solid #fff;*/
	box-sizing: border-box;
	width:33.33333333%;
	height:200px; 
	font-size: 14px;
	display: inline-block;
	vertical-align: top;
	border:0.5px solid rgba(255,255,255,0.5);
	transition: all 1s ease;
}
.porM-05:hover{ 
	background-color:rgba(255,255,255,0.7);
	border:0.5px solid rgba(255,255,255,0.5);
}
.porM-05:hover a p.pm span{  
	color:#000;
	content: 'Proyecto:';
	-webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example2;
	animation-duration: 1s;
}
.porM-05:hover a p.pm span{ 
	display: none;
	text-decoration:none;
}
.porM-05:hover a p.pm:after{ 
	color:#000;
	vertical-align: middle;
	line-height:14px;
	content: 'Ab.ismo Arquitectura ver --->';
	text-decoration:none;
	font-family: 'Hind', sans-serif;
	font-weight:normal;
	text-decoration:none;
}

#porMid-05:hover:before { 
	background-image: url("../im-img/img-portfolio/img-abismo/Abismo-fnd.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:50% 50%;
	-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example;
	animation-duration: 1s;
	border:0.5px solid rgba(255,255,255,0.5);
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}

.porM-06{ 
	padding:10px;
	text-decoration:none;
	/*border:0.5px solid #fff;*/
	box-sizing: border-box;
	width:33.33333333%;
	height:200px; 
	font-size: 14px;
	display: inline-block;
	vertical-align: top;
	border:0.5px solid rgba(255,255,255,0.5);
	transition: all 1s ease;
}
.porM-06:hover{ 
	background-color:rgba(255,255,255,0.7);
	border:0.5px solid rgba(255,255,255,0.5);
}
.porM-06:hover a p.pm span{ 
	color:#000;
	content: 'Proyecto:';
	-webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example2;
	animation-duration: 1s;
}
.porM-06:hover a p.pm span{ 
	display: none;
	text-decoration:none;
}
.porM-06:hover a p.pm:after{ 
	color:#000;
	vertical-align: middle;
	line-height:14px;
	content: 'Mis Ladrillos Preescolar ver --->';
	text-decoration:none;
	font-family: 'Hind', sans-serif;
	font-weight:normal;
	text-decoration:none;
}

#porMid-06:hover:before { 
	background-image: url("../im-img/img-portfolio/img-ml/Mis_Ladrillos-fnd.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:50% 50%;
	-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example;
	animation-duration: 1s;
	border:0.5px solid rgba(255,255,255,0.5);
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}

.porM-07{ 
	padding:10px;
	text-decoration:none;
	/*border:0.5px solid #fff;*/
	box-sizing: border-box;
	width:33.33333333%;
	height:200px; 
	font-size: 14px;
	display: inline-block;
	vertical-align: top;
	border:0.5px solid rgba(255,255,255,0.5);
	transition: all 1s ease;
}
.porM-07:hover{ 
	background-color:rgba(255,255,255,0.7);
	border:0.5px solid rgba(255,255,255,0.5);
}
.porM-07:hover a p.pm span{  
	color:#000;
	content: 'Proyecto:';
	-webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example2;
	animation-duration: 1s;
}
.porM-07:hover a p.pm span{ 
	display: none;
	text-decoration:none;
}
.porM-07:hover a p.pm:after{
	color:#000;
	vertical-align: middle;
	line-height:14px;
	content: 'Kammer Film & Tv ver --->';
	text-decoration:none;
	font-family: 'Hind', sans-serif;
	font-weight:normal;
	text-decoration:none;
}

#porMid-07:hover:before { 
	background-image: url("../im-img/img-portfolio/img-kammer/Kammer-fnd.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:50% 50%;
	-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example;
	animation-duration: 1s;
	border:0.5px solid rgba(255,255,255,0.5);
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}

.porM-08{ 
	padding:10px;
	text-decoration:none;
	/*border:0.5px solid #fff;*/
	box-sizing: border-box;
	width:33.33333333%;
	height:200px; 
	font-size: 14px;
	display: inline-block;
	vertical-align: top;
	border:0.5px solid rgba(255,255,255,0.5);
	transition: all 1s ease;
}
.porM-08:hover{ 
	background-color:rgba(255,255,255,0.7);
	border:0.5px solid rgba(255,255,255,0.5);
}
.porM-08:hover a p.pm span{  
	color:#000;
	content: 'Proyecto:';
	-webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example2;
	animation-duration: 1s;
}
.porM-08:hover a p.pm span{ 
	display: none;
	text-decoration:none;
}
.porM-08:hover a p.pm:after{ 
	color:#000;
	vertical-align: middle;
	line-height:14px;
	content: 'Té de Damas ver --->';
	text-decoration:none;
	font-family: 'Hind', sans-serif;
	font-weight:normal;
	text-decoration:none;
}

#porMid-08:hover:before { 
	background-image: url("../im-img/img-portfolio/img-teDamas/Te_de_damas-fnd.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:50% 50%;
	-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example;
	animation-duration: 1s;
	border:0.5px solid rgba(255,255,255,0.5);
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}

.porM-09{ 
	padding:10px;
	text-decoration:none;
	/*border:0.5px solid #fff;*/
	box-sizing: border-box;
	width:33.33333333%;
	height:200px; 
	font-size: 14px;
	display: inline-block;
	vertical-align: top;
	border:0.5px solid rgba(255,255,255,0.5);
	transition: all 1s ease;
}
.porM-09:hover{ 
	background-color:rgba(255,255,255,0.7);
	border:0.5px solid rgba(255,255,255,0.5);
}
.porM-09:hover a p.pm span{  
	color:#000;
	content: 'Proyecto:';
	-webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example2;
	animation-duration: 1s;
}
.porM-09:hover a p.pm span{ 
	display: none;
	text-decoration:none;
}
.porM-09:hover a p.pm:after{ 
	color:#000;
	vertical-align: middle;
	line-height:14px;
	content: 'Alicia Olivan ver --->';
	text-decoration:none;
	font-family: 'Hind', sans-serif;
	font-weight:normal;
	text-decoration:none;
}

#porMid-09:hover:before { 
	background-image: url("../im-img/img-portfolio/img-olivan/Alicia_Olivan-fnd.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:50% 50%;
	-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
	animation-name: example;
	animation-duration: 1s;
	border:0.5px solid rgba(255,255,255,0.5);
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}


@media screen and (max-width: 640px) {
	
	body {
	margin-left: 100px;
	}
  
  .worksCont{
	  margin-top:-190px;
	  margin-bottom:100px;
	  margin-left:10px;
	  margin-right:10px;
  }
  .workClimg{
	   height:100vh; 
  }
  .porCl{
	   padding-right:10px;
  }
  
  .porM-01{	  
	  float: none;
	  width: 100%;
	  height:100px;
	  color:#fff;
	  vertical-align: bottom;
	  line-height:14px;
	  content: 'Proyecto: Iara Ricchie ver --->';
	  text-decoration:none;
/*	  background-image: url("../im-img/img-portfolio/img-iaraRichie/Iara_Richie-02.jpg");
	  background-repeat:no-repeat;
	  background-size:cover;
	  background-position:50% 50%;*/
  }
  .porM-01:hover{
	  float: none;
	  width: 100%;
	  height:100px;
	  background-color:rgba(255,255,255,0.7);
	  border:0.5px solid rgba(255,255,255,0.5);
  }
  .porM-01:not :hover a p.pm .span {
	  float: none;
	  width: 100%;
	  height:100px;
	  color:#fff;
	  vertical-align: bottom;
	  line-height:14px;
	  content: 'Proyecto: Iara Ricchie ver --->';
	  text-decoration:none;
	  background-image: url("../im-img/img-portfolio/img-iaraRichie/Iara_Richie-02.jpg");
	  background-repeat:no-repeat;
	  background-size:cover;
	  background-position:50% 50%;
  }
  .porM-01:hover a p.pm:after{ 
	  color:#333;
  }
  
  .porM-02{
	  float: none;
	  width: 100%;
	  height:100px;
	  color:#fff;
	  vertical-align: middle;
	  line-height:14px;
	  content: 'Proyecto: Adiabatic ver --->';
	  text-decoration:none;
/*	  background-image: url("../im-img/img-portfolio/img_adiabatic/Adiabatic-fnd.jpg");
	  background-repeat:no-repeat;
	  background-size:cover;
	  background-position:50% 50%;*/
  }
  .porM-02:hover{
	  float: none;
	  width: 100%;
	  height:100px; 
	  background-color:rgba(255,255,255,0.7);
	  border:0.5px solid rgba(255,255,255,0.5);
  }
  .porM-02:not :hover a p.pm .span{
	  float: none;
	  width: 100%;
	  height:100px;
	  color:#fff;
	  vertical-align: middle;
	  line-height:14px;
	  content: 'Proyecto: Adiabatic ver --->';
	  text-decoration:none;
  }
  .porM-02:hover a p.pm:after{ 
	  color:#333;
  }
  
  .porM-03{
	  float: none;
	  width: 100%;
	  height:100px;
	  color:#fff;
	  vertical-align: middle;
	  line-height:14px;
	  content: 'Proyecto: Kurumi ver --->';
	  text-decoration:none;
/*	  background-image: url("../im-img/img-portfolio/img-kurumi/Kurumi-fnd.jpg");
	  background-repeat:no-repeat;
	  background-size:cover;
	  background-position:50% 50%;*/
  }
  .porM-03:hover{ 
	  float: none;
	  width: 100%;
	  height:100px; 
	  background-color:rgba(255,255,255,0.7);
	  border:0.5px solid rgba(255,255,255,0.5);
  }
  .porM-03:not :hover a p.pm .span{
	  float: none;
	  width: 100%;
	  /* width:33.33333333%;*/
	  height:100px;
	  color:#fff;
	  vertical-align: middle;
	  line-height:14px;
	  content: 'Proyecto: Kurumi ver --->';
	  text-decoration:none;
  }  
  .porM-03:hover a p.pm:after{ 
	  color:#333;
  }
  
  .porM-04{
	  float: none;
	  width: 100%;
	  height:100px;
	  color:#fff;
	  vertical-align: middle;
	  line-height:14px;
	  content: 'Proyecto: Genesis Copiers ver --->';
	  text-decoration:none;
/*	  background-image: url("../im-img/img-portfolio/img-genesis/Genesis-fnd.jpg");
	  background-repeat:no-repeat;
	  background-size:cover;
	  background-position:50% 50%;*/
  }
  .porM-04:hover{ 
	  float: none;
	  width: 100%;
	  height:100px; 
	  background-color:rgba(255,255,255,0.7);
	  border:0.5px solid rgba(255,255,255,0.5);
  }
  .porM-04:not :hover a p.pm .span{
	  float: none;
	  width: 100%;
	  /* width:33.33333333%;*/
	  height:100px;
	  color:#fff;
	  vertical-align: middle;
	  line-height:14px;
	  content: 'Proyecto: Genesis Copiers ver --->';
	  text-decoration:none;
  }  
  .porM-04:hover a p.pm:after{ 
	  color:#333;
  }
  
  .porM-05{
	  float: none;
	  width: 100%;
	  height:100px;
	  color:#fff;
	  vertical-align: middle;
	  line-height:14px;
	  content: 'Proyecto: Ab.ismo Arquitectura ver --->';
	  text-decoration:none;
/*	  background-image: url("../im-img/img-portfolio/img-abismo/Abismo-fnd.jpg");
	  background-repeat:no-repeat;
	  background-size:cover;
	  background-position:50% 50%;*/
  }
  .porM-05:hover{ 
	  float: none;
	  width: 100%;
	  height:100px; 
	  background-color:rgba(255,255,255,0.7);
	  border:0.5px solid rgba(255,255,255,0.5);
  }
  .porM-05:not :hover a p.pm .span{
	  float: none;
	  width: 100%;
	  /* width:33.33333333%;*/
	  height:100px;
	  color:#fff;
	  vertical-align: middle;
	  line-height:14px;
	  content: 'Proyecto: Ab.ismo Arquitectura ver --->';
	  text-decoration:none;
  }  
  .porM-05:hover a p.pm:after{ 
	  color:#333;
  }
  
  .porM-06{
	  float: none;
	  width: 100%;
	  height:100px;
	  color:#fff;
	  vertical-align: middle;
	  line-height:14px;
	  content: 'Proyecto: Mis Ladrillos Preescolar ver --->';
	  text-decoration:none;
/*	  background-image: url("../im-img/img-portfolio/img-ml/Mis_ladrillos-fnd.jpg");
	  background-repeat:no-repeat;
	  background-size:cover;
	  background-position:50% 50%;*/
  }
  .porM-06:hover{ 
	  float: none;
	  width: 100%;
	  height:100px; 
	  background-color:rgba(255,255,255,0.7);
	  border:0.5px solid rgba(255,255,255,0.5);
  }
  .porM-06:not :hover a p.pm .span{
	  float: none;
	  width: 100%;
	  /* width:33.33333333%;*/
	  height:100px;
	  color:#fff;
	  vertical-align: middle;
	  line-height:14px;
	  content: 'Proyecto: Mis Ladrillos Preescolar ver --->';
	  text-decoration:none;
  }  
  .porM-06:hover a p.pm:after{ 
	  color:#333;
  }
  
  .porM-07{
	  float: none;
	  width: 100%;
	  height:100px;
	  color:#fff;
	  vertical-align: middle;
	  line-height:14px;
	  content: 'Proyecto: Kammer Film & Tv ver --->';
	  text-decoration:none;
/*	  background-image: url("../im-img/img-portfolio/img-kammer/Kammer-fnd.jpg");
	  background-repeat:no-repeat;
	  background-size:cover;
	  background-position:50% 50%;*/
  }
  .porM-07:hover{ 
	  float: none;
	  width: 100%;
	  height:100px; 
	  background-color:rgba(255,255,255,0.7);
	  border:0.5px solid rgba(255,255,255,0.5);
  }
  .porM-07:not :hover a p.pm .span{
	  float: none;
	  width: 100%;
	  /* width:33.33333333%;*/
	  height:100px;
	  color:#fff;
	  vertical-align: middle;
	  line-height:14px;
	  content: 'Proyecto:  Kammer Film & Tv ver --->';
	  text-decoration:none;
  }  
  .porM-07:hover a p.pm:after{ 
	  color:#333;
  }
  
  .porM-08{
	  float: none;
	  width: 100%;
	  height:100px;
	  color:#fff;
	  vertical-align: middle;
	  line-height:14px;
	  content: 'Proyecto: Té de Damas ver --->';
	  text-decoration:none;
/*	  background-image: url("../im-img/img-portfolio/img-teDamas/Te_de_damas-fnd.jpg");
	  background-repeat:no-repeat;
	  background-size:cover;
	  background-position:50% 50%;*/
  }
  .porM-08:hover{ 
	  float: none;
	  width: 100%;
	  height:100px; 
	  background-color:rgba(255,255,255,0.7);
	  border:0.5px solid rgba(255,255,255,0.5);
  }
  .porM-08:not :hover a p.pm .span{
	  float: none;
	  width: 100%;
	  /* width:33.33333333%;*/
	  height:100px;
	  color:#fff;
	  vertical-align: middle;
	  line-height:14px;
	  content: 'Proyecto: Té de Damas ver --->';
	  text-decoration:none;
  }  
  .porM-08:hover a p.pm:after{ 
	  color:#333;
  }
  
  .porM-09{
	  float: none;
	  width: 100%;
	  height:100px;
	  color:#fff;
	  vertical-align: middle;
	  line-height:14px;
	  content: 'Proyecto: Alicia Olivan ver --->';
	  text-decoration:none;
/*	  background-image: url("../im-img/img-portfolio/img-olivan/Alicia_Olivan-fnd.jpg");
	  background-repeat:no-repeat;
	  background-size:cover;
	  background-position:50% 50%;*/
  }
  .porM-09:hover{ 
	  float: none;
	  width: 100%;
	  height:100px; 
	  background-color:rgba(255,255,255,0.7);
	  border:0.5px solid rgba(255,255,255,0.5);
  }
  .porM-09:not :hover a p.pm .span{
	  float: none;
	  width: 100%;
	  /* width:33.33333333%;*/
	  height:100px;
	  color:#fff;
	  vertical-align: middle;
	  line-height:14px;
	  content: 'Proyecto: Alicia Olivan ver --->';
	  text-decoration:none;
  }  
  .porM-09:hover a p.pm:after{ 
	  color:#333;
  }
}

@media screen and (max-width: 480px) {
	
  body {
	  margin-left: 90px;
  }
  
/*  .pm { 
  background:rgba(0,0,0,0.6);
  line-height:17px;
  padding-left:5px;
  }  */
  #porMid-01:hover:before { 
	  background-image:none;
  }
  
  #porMid-02:hover:before { 
	  background-image:none;
  }
  
  #porMid-03:hover:before { 
	  background-image:none;
  }
  
  #porMid-04:hover:before { 
	  background-image:none;
  }
  
  #porMid-05:hover:before { 
	  background-image:none;
  }
  
  #porMid-06:hover:before { 
	  background-image:none;
  }
  
  #porMid-07:hover:before { 
	  background-image:none;
  }
  
  #porMid-08:hover:before { 
	   background-image:none;
  }
  
  #porMid-09:hover:before { 
	   background-image:none;
  }
}