* {
	margin: 0 auto;
	padding: 0;

}
a {
	text-decoration: none;
	color:black;
}
a:hover {
	color:red;
	transition: 0.3s;
}
body {
	font-family: roboto;
		font-size: 22px;

}
.container {
	width: 1000px;
	
	text-align: center;

}
.header {
	font-size: 22px;
	margin-top: 30px;
	display: flex;
	align-items: center;

}
.header img {
	width: 30px;
	height: auto;

}

.title {
	color:#2578a2;
	font-size: 30px;
	margin-top: 50px;
	
}

.gallery {
	font-size: 22px;

}
.recent-works {
	font-size: 30px;
	color:#2578a2;
	margin-bottom: 15px;
}
.price-title {
	color:#2578a2;
	margin: 15px 0;
	font-weight: bold;
}

.price-nav {
	top:25%;
	right: 1%;
	
	position: fixed;
    background: #ededed;
    border: 3px solid #579aad;
    padding: 5px 5px;
    transition: opacity 0.3s linear, visibility 0.6s linear;
    visibility: hidden;
    opacity: 0;
}

.nav-item a:hover {
    color:red;
}
.pricebtn {
    top:20%;
    right: 2%;
    text-align: center;
    color:#2578a2;
    font-size: 26px;
    position: fixed;
    display: block;
}
.nav-item {
  border: 1px solid #2b5c6a;
  border-radius: 2px;
  margin: 3px 0;
  background: #beddec;
  padding: 2px 5px;
 
  display: block;
}
.show {
  visibility: visible;
  opacity: 1;
  right: 1%;
}
td {
	border: 1px solid #579aad;
	padding: 3px 15px;
}
tr {
	background: #ededed;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    text-align: left;
}
.img-btn {
    width: 30px;
    height: 30px;
}
.slider2 {
    max-width: 1200px;
    margin: auto;
    position: relative;
    height: auto;
    margin-bottom: 15px;
    margin-top: 20px;
    
}
.slider2 .itemPopUp  img {
    object-fit: contain;
    width: 100%;
    height: auto;
   max-height: 800px

}
.slider{
    max-width: 600px;
    position: relative;
    margin: auto;
    height: auto;
    margin-bottom: 15px;
}
/* Картинка мастабируется по отношению к родительскому элементу */
.slider .item  img {
    object-fit: contain;
    width: 100%;
    height: 300px;
    border: none !important;
    box-shadow: none !important;
}
/* Кнопки вперед и назад */
.slider .prev, .slider .next  {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
   margin-top: -110px;
    padding: 100px 20px ;
    color: #579aad;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
}
.slider2 .prev, .slider2 .next {
    cursor: pointer;
    position: absolute;
    
    top: 20%;
    width: auto;
    margin-top: -22px;
    padding: 20% 30px;
    color: #579aad;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
}

.slider .next, .slider2 .next  {
    right: 0;
    border-radius: 3px 0 0 3px;
}
.slider .prev, .slider2 .prev {
    left: 0;
    border-radius: 3px 0 0 3px;
}
/* При наведении на кнопки добавляем фон кнопок */
.slider .prev:hover,
.slider .next:hover,
.slider2 .prev:hover,
.slider2 .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
/* Заголовок слайда */
/* Кружочки */
.slider-dots {
    text-align: center;
}
.slider-dots_item{
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 2px;
    background-color: #ddd;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.slider-dots_item2{
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 2px;
    background-color: #ddd;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.active,
.slider-dots_item:hover {
    background-color: #aaa;
}
/* Анимация слайдов */
.slider .item .itemPopUp .slider2{
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}
.popUp {
    width: 100%;
    height: 100%;

    visibility: hidden;
    opacity: 0;
    z-index: 2;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgb(0, 0, 0, .8);
}
.open {
    visibility: visible;
    opacity: 1;
}
.itemPopUp { 
    position: relative;
    align-items: center;
    width: 100%;
    height: auto;
}
@-webkit-keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}
@keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}

@media only screen and (max-device-width : 1440px) {
    .container {
        width: 80%;
    }
}

@media only screen and (max-device-width : 700px) {
    .title {
        margin-top: 20px;
    }
     .slider2 .prev, .slider2 .next {
        padding: 20% 20px;
}
}
@media only screen and (max-device-width : 470px) {
    .slider .prev, .slider .next  {
        margin-top: -70px;
        padding: 50px 20px;
    }
    }
@media only screen and (max-device-width : 500px) {
    table {
        font-size: 15px;
    }
    .slider2 {
        margin-top: 100px;
    }

}
@media only screen and (max-device-width : 425px) {
    .title {
        font-size: 20px;
    }
    .recent-works {
        font-size: 20px;
    }
    .header {
        display: block;
        margin-top: 10px;
    }
    .experience-project, .experience {
        margin-bottom: 10px;
    }
    .recent-works {
        margin-bottom: 10px;
    }
}
@media only screen and (max-device-width : 370px) {
    .price-list {
        overflow: auto;
    }
    td {
        padding: 1px 5px;
    }
}
@media only screen and (max-device-height :800px) {
    .slider2 .itemPopUp  img {
        max-height: 600px;
    } 
}
    @media only screen and (max-device-height :670px) {
    .slider2 .itemPopUp  img {
        max-height: 500px;
    }
    .slider2 .prev, .slider2 .next {
        top:10%;
    }
}
    @media only screen and (max-device-height :570px) {
    .slider2 .itemPopUp  img {
        max-height: 400px;
    }
    .slider2 .prev, .slider2 .next {
        padding: 15% 30px;
    }
}
    @media only screen and (max-device-height :470px) {
    .slider2 .itemPopUp  img {
        max-height: 300px;
    }
    .pricebtn {
    top: 5%;
    }
    .price-nav {
    top: 12%;
    }
}
    @media only screen and (max-device-height :370px) {
    .slider2 .itemPopUp  img {
        max-height: 250px;
    }
    .price-nav {
        height: 250px;
        overflow: auto;
    }
}
@media only screen and (max-device-height :330px) {
    .slider2 .prev, .slider2 .next {
        padding: 10% 30px;
    }
}