/*Сетка превью на главной*/
.clear {
  clear:both;
} 
.portfolio {
    position: relative;
    width: 100%;
    height: auto; 
    background-color: #000;
}
.portfolio_block {
    position: relative;
    float: left;
    display: inline;
    cursor: pointer;
    overflow: hidden;
}
.portfolio_block img {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}
.portfolio_block a {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 10;
}
.portfolio_info {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;  
}
.portfolio_info h2, .portfolio_info h3 {
    width: 90%;
    margin: 0 auto;
    margin-top: 38%; 
    text-align: center;   
    font: normal 160% 'myOpensans';
    font-weight: 400; 
    color: #000;
}
.portfolio_info h3 {
    margin: 0 auto;    
    font: normal 85% 'myOpensans';
    text-transform: none;
}
.portfolio_info .date {
    position: absolute;
    width: 100%;
    bottom: 4%;   
    font: normal 85% 'myOpensans';
    text-align: center;
    text-transform: lowercase; 
    color: #000;
    display: inline-block;
}
@media screen and (max-width: 900px) {
.portfolio_info h2, .portfolio_info h3 {
    margin-top: 33%;  
    font: normal 150% 'myOpensans';
}
.portfolio_info h3 { 
    margin: 0 auto;  
    font: normal 75% 'myOpensans';
}
.portfolio_info .date {   
    bottom: 4%;   
    font: normal 65% 'myOpensans';
}
}
@media screen and (max-width: 600px) {
.portfolio_info h2, .portfolio_info h3 {
    margin-top: 28%;  
    font: normal 100% 'myOpensans';
}
.portfolio_info h3 { 
    margin: 0 auto;
    font: normal 65% 'myOpensans';
}
.portfolio_info .date {   
    bottom: 4%;   
    font: normal 65% 'myOpensans';
}
.portfolio_block a {
    height:400px;  
}
}
.portfolio_block img { 
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
/*Появляющийся блок*/
.portfolio_block .portfolio_info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(255,255,255, 0.8);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.portfolio_block h2 { 
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.portfolio_block .date{
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.portfolio_block:hover img { 
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
} 
.portfolio_block:hover .portfolio_info { 
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.portfolio_block:hover h2,
.portfolio_block:hover .date {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   /*-webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);*/
}
.portfolio_block:hover h2 {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.portfolio_block:hover .date {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
/*////////////////////////////////////*/
@media screen and (max-width: 450px) {
	.portfolio_block {	
    /*position: static;
	float: inherit;
	min-width:100%;*/
}
.portfolio_block a {
/*  position: absolute;
  width:500px;
  height:500px;
  display: compact;  */
}
.portfolio_block img { 
   width: 100%;
   height: auto;
} 
.portfolio_block:hover img { 
   -webkit-transform: scale(0.9,0.9);
   -moz-transform: scale(0.9,0.9);
   -o-transform: scale(0.9,0.9);
   -ms-transform: scale(0.9,0.9);
   transform: scale(0.9,0.9);
} 
.portfolio_info h2, .portfolio_info h3 {
    width: 90%;
    margin: 0 auto;
    margin-top: 38%; 
    text-align: center;   
    font: normal 150% 'myOpensans';
    font-weight: 400; 
    color: #000;
}
.portfolio_info h3 {
    margin: 0 auto;    
    font: normal 85% 'myOpensans';
    text-transform: none;
}
.portfolio_info .date {
    position: absolute;
    width: 100%;
    bottom: 4%;   
    font: normal 85% 'myOpensans';
    text-align: center;
    text-transform: lowercase; 
    color: #000;
    display: inline-block;
}
.portfolio_info {
   display: none; 
}
}