@charset "utf-8";
/* CSS Document */


.albumpic{
	height:250px; 
	width:250px; 
	border-color:#868686;
	z-index: 999;
}
.albumpic p{	
color: #868686;
    font-family: 'Roboto', sans-serif;
    font-size: 15pt;
    font-weight: 900;
    text-align: center;
    margin-top: 260px;
    /* text-shadow: 1px 1px 2px #000; */
    z-index: -1;
}

.pasportu:hover p{color: #E5E5E5;
	-webkit-transition: 0.3s all ease-out;
	-moz-transition: 0.3s all ease-out;
	transition: 0.3s all ease-out;
}

.pasportu {	
    height: 250px;
    width: 250px;
    padding: 15px 20px 75px 20px;
    /* background-color: #B8B8B8; */
    /* border-color: #494949; */
    /* box-shadow: 1px 1px 2px #000; */
    margin: 20px;
    /* -moz-border-radius: 8px 8px 8px 8px;*/
    /* -webkit-border-radius: 8px 8px 8px 8px; */
    /* border-radius: 8px 8px 8px 8px; */
    z-index: 0;
}
.portfolio .pasportu {	
    padding: 0;
}
#wedportfoliopic {background:url(../pic/wedportfoliopic.jpg); background-size:cover; background-position: center; }
.portfolio ul {
	padding: 0;
    list-style-type: none;
    margin: 0 auto;
    width: 90%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: flex-start;
}
.album {float: left;padding: 0; list-style-type: none;}
@media screen and (max-width: 750px) { /* настройки для экрана телефона*/
.album {width: 90% !important;}
	.pasportu {margin-left: auto; margin-right: auto; }
}


.stack { float: left; width: 22%; margin: 0 4% 4% 0; position: relative; z-index: 10; }

/* Image styles */
.stack div { max-width: 250px; height: 250px; vertical-align: bottom; border: 10px solid #fff; border-radius: 3px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.stack:last-of-type { margin-right: 0; }

/* Stacks creted by the use of generated content */
.stack:before, .stack:after { content: ""; border-radius: 3px; width: 250px; height: 250px; background-color: #000000; position: absolute; border: 10px solid #fff; left: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	-webkit-transition: 0.3s all ease-out;
	-moz-transition: 0.3s all ease-out;
	transition: 0.3s all ease-out;
}
.stack:before { top: 4px; z-index: -10; } /* 1st element in stack (behind image) */	
.stack:after { top: 8px; z-index: -20; } /* 2nd element in stack (behind image) */

/* Second stack example (rotated to the right from the bottom left) */

/* Third stack example (One stack element rotated in the opposite direction) */
.stack.twisted:before {
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	transform: rotate(4deg);
}	
.stack.twisted:after {
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	transform: rotate(-4deg);
}	

/* Fourth stack example (Similar to the second but rotated left) */

/* Reset all rotations on hover */
.stack:hover:before, .stack:hover:after {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
}