body {
	font-family: 'OpenSans', sans-serif;
	margin: 0;
	padding: 0;
	background: #F7F7F7;
}

@font-face {
  font-weight: 400;
  font-family: OpenSans;
  src: url("fonts/OpenSans-Regular.ttf");
}

@font-face {
  font-weight: 600;
  font-family: OpenSans;
  src: url("fonts/OpenSans-SemiBold.ttf");
}

@font-face {
  font-weight: 700;
  font-family: OpenSans;
  src: url("fonts/OpenSans-Bold.ttf");
}

@font-face {
  font-weight: 800;
  font-family: OpenSans;
  src: url("fonts/OpenSans-ExtraBold.ttf");
}

@font-face {
  font-weight: 800;
  font-family: PlayfairDisplay;
  src: url("fonts/PlayfairDisplay-ExtraBold.ttf");
}

@font-face {
  font-weight: 700;
  font-family: PlayfairDisplay;
  src: url("fonts/PlayfairDisplay-Bold.ttf");
}

* {
	box-sizing: border-box;
}

h1, h2, h3, h4, h5 {
	padding: 0;
	margin: 0;
}

h1 {
	font-weight: 800;
	font-size: 80px;
}

h2 {
	font-weight: 700;
}

h3 {
}

h4 {
	font-weight: 700;
}

p {
	padding: 0;
	margin: 0;
	font-weight: 400;
	font-size: 15px;
}

a {
	text-decoration: none;
}

ul, ol, li {
  padding: 0;
  margin: 0;
	list-style: none;
	text-decoration: none;
}

button {
	padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  outline: none;
  cursor: pointer
}

button:focus, input:focus {
	outline: none;
}

span {
	display: block;
}

.container {
	width: 1170px;
	margin: 0 auto;
}
/*-------------------------------------------Header-------------------------------------------*/

.header {
	padding: 18px 0px;
	background: url(../img/bghead.png) no-repeat center 40% / cover;
}

/*---------------------------------------- HEADER END --------------------------------------*/
/*---------------------------------------- BREADCRUMBS START --------------------------------------*/
	
.breadcrumbs {
	padding-top: 52px;
	padding-bottom: 82px;
}

.breadcrumbs-container {
	display: flex;
	align-items: center;
}

.line {
	margin: 0 25px;
}

.sterlitamakskiy {
	font-weight: 400;
	font-size: 15px;
	color: rgba(79, 79, 79, 1);
}

/*---------------------------------------- BREADCRUMBS END --------------------------------------*/
/*---------------------------------------- CERTIFICATES START --------------------------------------*/
.certificates {
	padding-bottom: 80px;
}

.certificates-title {
	font-weight: 700;
	font-size: 50px;
	margin-bottom: 50px;
}

.certificates-wrapper {
	display: flex;
	justify-content: space-between;
}

.image__wrapper {
	padding: 15px;
	background: #fff;
	border-radius: 15px;
	margin-bottom: 30px;
}

/* картинка на странице */
.minimized {
  width: 240px;
  height: 370px;
  cursor: pointer;
  border: 2px solid #FFF;
  border-radius: 15px;
}
.minimized:hover {
  border: 2px solid #492E1D;
}
/* увеличенная картинка */
#magnify {
  display: none;
  position: fixed;
  top: 8%;
  margin:auto;
		left:0;
		right:0;
  width: 600px;
  height: 700px;
  z-index: 9999;
}
#magnify img {
  width: 100%;
}

#overlay {
  display: none;
  background: #000;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.5;
  z-index: 9990;
}

/*---------------------------------------- CERTIFICATES END --------------------------------------*/
/*------------------------------------------------  Responsive  -----------------------------------------------*/

/*------------------------------------------------- Large: 992px - 1199px -------------------------------*/
@media (max-width: 1199px) {
	.container {
		width: 960px;
	}

	.certificates-wrapper {
		flex-wrap: wrap;
	}

}

/*------------------------------------- Medium: 768px - 991px --------------------------------*/
@media (max-width: 991px) {
	.container {
		width: 720px;
	}

	#magnify {
    width: 540px;
  	height: 600px;
	}
}

/* ----------------------------------------------------Small: 576px - 767px------------------------------ */
@media (max-width: 767px) {
	.container {
		width: 540px;
	}

	#magnify {
    width: 500px;
    height: 550px;
	}

.minimized {
  width: 200px;
  height: 300px;
}

.image__wrapper {
	padding: 10px;
}


}

/*-------------------------------------------------- Extra small: 0px (320px) - 575px --------------------------------------*/
@media (max-width: 575px) {
	.container {
		padding: 0 15px;
		max-width: 100%;
	}

	.line {
    margin: 0 7px;
	}

	.certificates-title {
		font-size: 30px;
	}

	#magnify {
    width: 300px;
    height: 350px;
	}

	.certificates-wrapper {
	justify-content: center;
	}

	.image__wrapper {
	padding: 5px;
	margin-bottom: 15px;
	margin-right: 10px;
	}

	.minimized {
  width: 200px;
  height: 300px;
	}

	}