body {
background: white; 
/*background-image: url("img/fon.jpg") ;*/
/*background-size: 10%;*/
/*background-repeat: repeat;*/
}

header {
	display: flex;
	justify-content: space-around;
	text-align: center;
	padding: 20px;
	flex-direction: column;
}

#infoblock {
	margin-top: 10px;
}
header h3, header h5 {
	text-transform: uppercase;
	 margin: 5px;
	
}

#logo {
	width: 120px;
	height: 60px;
}
#tel_a {
	text-decoration: none;
	color: black;
	font-size: 25px;
}
#telegram {
	width: 30px;
	height: 30px;
}
#whatsup{
	width: 56px;
	height: 56px;
}
.modal-body #telegram, .modal-body #whatsup {
	width: 50px;
	height: 50px;
	}
nav{
	background: grey;
	
}

nav ul {
	display: flex;
	justify-content: space-around;
	margin: 0;
	padding: 0;

}

nav li {

	list-style-type: none;
	color: white;

}
nav a {
	
	text-decoration: none;
	font-size: 22px;
}
nav a:link, nav a:visited {
	color: white;
	display: block;
	padding: 10px 30px;
	
}
nav a:hover {
	background: white;
	color: grey;
}




* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: 0 auto;
  height: 70%;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 35px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


#nav-mini {
	width: 100%;
	background: grey;
}
#nav-mini img {
	width: 50px;
	margin-left:45%;
	margin-top: 10px;
	margin-bottom: 10px;
		
}
#nav-mini {
		visibility: hidden;
		display: none;
	}
	
	#content {
		padding: 0 30px;
		box-sizing: border-box;
		text-align: center;
	}
	
	#content p {
		text-align: justify;
		
	}
	#content b {
		background: orange;
			}
	#content img {
		width: 70%;
		
	}
	.block-product {
		width: 100%;
		height: 330px;
		border: 1px solid #C1C1C1;
		overflow-x: scroll;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		background: silver;
 	}
 	.product {
	 	width: 270px;
	 	margin: 10px;
	 	background: white;
	 	text-align: justify;
 	}
 	.product p {
	 	margin: 5px;
	 	
 	}
 	.product img {
	 	width: 100px;
	 	margin-left: 15%;
	 	
 	}
 	.product button {
	 	width: 100%;
	 	background: orange;
	 	padding: 5px ;
	 	margin: 0;
	 	margin-top: 5px;
 	}
 	
 	.product-info a {
	 	width: 100%;
	 	margin-left: 36px;
	 	margin-bottom: 10px;
	 	text-decoration: none;
	 	color: orange;
	 	
	 	
	 	}
 	
 	
 	.modal-content {
      -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
      box-shadow: 0 5px 15px rgba(0,0,0,.5);
  }
}
/* Стили заголовка окна */
.modal-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #eceeef;
}
.modal-title {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 1.25rem;
    font-weight: 500;
}
/* Стили кнопки "х" ("Закрыть")  */
.close {
    float: right;
    font-family: sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    text-decoration: none;
    }
/* Стили для закрывающей кнопки в фокусе или наведении */
.close:focus, .close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .75;
}
/* Стили блока основного содержимого окна */
.modal-body {
  position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 15px;
    overflow: auto;
    background: white;
}

.modal {
    position: fixed; /* фиксированное положение */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5); /* фон */
    z-index: 1050;
    opacity: 0; /* по умолчанию модальное окно прозрачно */
    -webkit-transition: opacity 200ms ease-in; 
    -moz-transition: opacity 200ms ease-in;
    transition: opacity 200ms ease-in; /* анимация перехода */
    pointer-events: none; /* элемент невидим для событий мыши */
    margin: 0;
    padding: 0;
}
/* При отображении модального окно */
.modal:target {
    opacity: 1; /* делаем окно видимым */
	  pointer-events: auto; /* элемент видим для событий мыши */
    overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */
}
/* ширина модального окна и его отступы от экрана */
.modal-dialog {
    position: relative;
    width: auto;
    margin: 30% 5%;
}

#content ul li {
	text-align: left;
	margin-left:0;
	padding-left:0;
}
 	
 .maps-img {
	 width: 100%;	
	 margin: 20px 0;
 	}
 	
 	
 	.opinion {
	margin-top: 20px;
}
 	
 	
 	#gall {
	 	margin: 20px;
  position: relative;
  padding-top: 50%;
  -moz-user-select: none; user-select: none;
}
#gall img {
	margin: 10px;
  position: absolute;
  top: 25%;
  left: 12.5%;
  max-width: 24.5%;
  max-height: 49.5%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: zoom-in;
  transition: .2s;
}
#gall img:nth-child(4n-2) {left: 37.5%;}
#gall img:nth-child(4n-1) {left: 62.5%;}
#gall img:nth-child(4n) {left: 87.5%;}
#gall img:nth-child(n+5) {top: 75%;}

#gall img:focus {
  position: absolute;
  top: 45%;
  left: 50%;
  z-index: 1;
  max-width: 80%;
  max-height: 140%;
  outline: none;
  pointer-events: none;
}
#gall img:focus ~ div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  cursor: zoom-out;
}

 	
 	
 	
 	
@media (min-width:900px){
    #base {
	width: 90%;
	margin: 0 auto;
	background: white;
}
	header {
		flex-direction: row;
	}
	#nav-menu {
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	
}
	.tel {
		font-size: 20px;
	}
		
	.maps-img {
	 width: 100%; 
	 margin: 20px auto;
 	}
 	 .footer {
	 	 width: 100%;
	 	 margin: 0 auto;
	 	 background: white;
	 	 display: flex;
	 	 justify-content: space-between;
	 	 padding-left: 2%;
	 	 box-sizing: border-box;
 	 }
 	 .footer img {
	 	 width: 90%;
	 	 margin: 30px 0;
	 	 padding: 0;
	 	 
 	 }
 	  .tel {
	 	 font-size: 60%; 
 	  }
 	  	#telegram, #vk {
	width: 50px;
	height: 50px;
	margin:5px;
}
}


@media screen and (min-width:300px) and (max-width:900px) {
		
	#base {
	width: 100%;
	margin: 0;
	background: white;
}
	
	
	header {
	flex-direction: column;
}	
		#telegram, #vk {
	width: 50px;
	height: 50px;
	margin:5px;
}
		#nav-mini {
		visibility: visible;
		display: block;
	}
	#nav-menu {
		display: none;	
	}
	#content img {
		width: 100%;
		
	}
	#content #telegram {
	    width: 50px;
	    height:50px;
	}
	.product img {
	 	
	 	margin-left: 0;
	 	
 	}
 	.footer {
	 	 width: 100%;
	 	 margin: 0 auto;
	 	 background: white;
	 	 flex-direction: column;
	 	
	 	 justify-content: space-between;
	 	 padding-left: 2%;
	 	 box-sizing: border-box;
 	 }
 	 .footer img {
	 	 width: 40%;
	 	 margin: 4%;
	 	 padding: 0;
	 	 
 	 }
.product {
	 	width: 200px;
	 	margin: 10px;
	
}