@font-face {
  font-family: 'OpenSans';
  src: url('OpenSans.eot?#iefix') format('embedded-opentype'),  url('OpenSans.woff') format('woff'), url('OpenSans.ttf')  format('truetype'), url('OpenSans.svg#OpenSans') format('svg');
  font-weight: normal;
  font-style: normal;
}
html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

html {
	
	/*background-image: linear-gradient(#94B1C0, #4F6878);*/
	background-image: url('fond.jpg');
	background-repeat: no-repeat;
	background-position: right top;
	background-size: cover;
	background-attachment: fixed;
	text-align: center;
}

.header{
	width:100%;
	height:80px;
	position:fixed;
	top:0px;
	background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	z-index: 4;
}
#logo {
	margin: 0 auto;
	display: block;
	max-width: 143px;
	height: auto;
	padding-top: 8%;
	padding-bottom: 5%;
}

.catalogs-wrapper {
	margin: 0 auto;
	padding: 0;
	max-width: 1100px;	
}

.catalog {
	width: 260px;
	display: inline-block;
	height: 400px;
	vertical-align: top;
}

.catalog img {
	height: 300px;
	max-height: 240px;
	max-width: 240px;
	width: auto;
  	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	/*border: 1px solid white;*/
}

.catalogTitle{	
  position: relative;
  z-index: 2;
}
.catalogTitle p {
	font-family: OpenSans;
	color: #0E1C55;
	font-size: 1em;
	/*position: absolute;*/
	text-align: center;
	/*width:240px;*/
	margin:2px;
	/*border: 1px solid red;*/
}
.catalog:hover p{
	color:#fff;
}

.title p{
	font-family: OpenSans;
	color: #0256AF;
	font-size: 1.5em;
}
#coverShadow{	
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";

    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";

	-webkit-filter: blur(15px); 
	filter: blur(15px);

	margin-top: -10px;
}


@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
 #coverShadow { 
 	display: none; 
 }
 .catalog { 
  	margin-top: 50px;
 }
 	
.catalogTitle p {
	margin-top: -5px;
}
#logo {
	margin: 0 auto;
	display: block;
	max-width: 90px;
	height: auto;
	padding-top: 25%;
	padding-bottom: 2%;
}

}
@media only screen and (min-device-width : 480px) and (max-device-width : 850px) {
 
#logo {
	margin: 0 auto;
	display: block;
	max-width: 90px;
	height: auto;
	padding-top: 12%;
	padding-bottom: 2%;
}

}