header {height: 50px; background-image: linear-gradient(to right,#fd3c94,#ffba42); box-sizing: border-box}
.menu-icon {font-size: 300%; color: #ffffff; line-height: 45px; cursor: pointer}
.menu-wrap {display: flex; justify-content: space-between; padding: 0 15px 0 25px}
nav {position: absolute; background-image: linear-gradient(to right,rgba(253,60,148,0.95),rgba(255,186,66,0.95)); top: 50px; left: 0px; width: 100%; font: normal 1.2em 'Helvetica Neue', Roboto, sans-serif; z-index: 33000}
nav ul {list-style-type: none; max-height: 0; overflow: hidden; transition: all 0.5s; margin: 0 0 0 15px !important}
nav ul li a {display: inline-block; padding: 10px; color: #fff; text-decoration: none}
.menu-active-desktop {padding: 10px; color: #000; text-decoration: none}
.menu-active-mobile {color: #fff; text-decoration: none; font: normal 1.5em 'Helvetica Neue', Roboto, sans-serif; height: 50px; align-items: center}
nav ul li a:hover, nav ul li a:focus {color: #000}
#checkbox {display: none}
#checkbox:checked ~ nav ul {max-height: 500px; transition: all 0.5s}

.menu-active-desktop {line-height: 41px; padding: 0 10px; color: #000; background: #fff; font-weight: bold; cursor: default}
.menu-active-desktop a {padding: 0; color: #0065ba; cursor: pointer}
.menu-active-desktop a:hover {color: #f1966e; background: #fff; cursor: pointer}
.menu-active-mobile-add a {background-image: linear-gradient(to right,rgba(255,255,255,0.25),rgba(255,255,255,0)); padding: 7px; margin: 3px 0 3px 4px; width: 50%; color: #000}
.menu-active-mobile-add a:hover {color: #fff}

.logo-horizontal-small {width: 313px; height: 25px}
.logo-horizontal-big {position: absolute; width: 100%; text-align: center}
.logo-horizontal-big img {width: 68%}

@media (max-width: 599px) {
.logo-horizontal-small {width: 250px; height: auto}
/* .menu-active-mobile {font-size: 1.2em}	поправить для экранов меньше 599px */
}

@media (max-width: 899px) {		/* mobile */
.menu-active-desktop {display: none}
.menu-active-mobile {display: flex}
nav ul {padding: 0}
nav ul li:nth-child(1) {border-top: 1px solid #fff; padding-top: 10px}
nav ul li:nth-child(10) {padding-bottom: 10px}
nav ul li a {padding: 8px 10px}
h1 {font-size: 175% !important}
.first-h1 {display: none}
.logo-horizontal-big {display: none}
}

@media (min-width: 900px) {		/* desktop */
.menu-active-desktop {display: block}
.menu-active-mobile {display: none}
.menu-active-mobile-add {display: none}
.menu-wrap {justify-content: center; padding: 0}
.menu-icon {display: none !important}
nav {position: relative; top: 0; background-color: transparent}
nav ul {max-height: 41px; padding: 0; text-align: center}
nav ul li {display: inline-flex; padding: 0}
header {height: 41px; background-image: linear-gradient(to right,#fd3c94,#ffba42)}
nav ul li a {display: block; line-height: 41px; padding: 0 10px; text-decoration: none; color: #fff; cursor: pointer; border: none}
nav ul li a:hover {background: #0065ba; color: #fff}
.logo-horizontal-small {display: none}
}

@media (min-width: 900px) and (max-width: 989px) {
header {height: 33px}
nav {font-size: .9em}
nav ul li a, .menu-active-desktop {line-height: 32px}
nav ul li a {padding: 0 4px}
.logo-horizontal-big {top: 80px}
}

@media (min-width: 990px) and (max-width: 1135px) {
header {height: 35px}
nav {font-size: 1em}
nav ul li a, .menu-active-desktop {line-height: 34px}
nav ul li a {padding: 0 4px}
.logo-horizontal-big {top: 80px}
}

@media (min-width: 1136px) and (max-width: 1215px) {
header {height: 35px}
nav {font-size: 1.1em}
nav ul li a, .menu-active-desktop {line-height: 35px}
}

@media (min-width: 1125px) and (max-width: 1550px) {
.logo-horizontal-big {top: 100px}
}

@media (min-width: 1551px) {
.logo-horizontal-big {top: 120px}
}

h1 {font: 250% 'Helvetica Neue', Roboto, sans-serif; font-weight: 400; margin: 1em auto 1em; padding: 0 1em; text-align: center; max-width: 1000px}
h1 a {text-decoration: none; color: #000}
.first-h1 {margin-top: 1.5em}
h2 {font: 140% 'Helvetica Neue', Roboto, sans-serif; font-weight: bold; margin: 1em 10% .5em; text-align: center}
h3 {font: 140% 'Helvetica Neue', Roboto, sans-serif; font-weight: bold; margin: 1em 10% .2em; text-align: center}

#recording-studio h2 {margin-bottom: -.2em}
#studio h2 {margin-bottom: 0}

#rent h2 {font: 200% 'Helvetica Neue', Roboto, sans-serif; font-weight: 400; margin: 1.5em auto .5em; padding: 0 1em; text-align: center; max-width: 1000px}

.textbody, .contact-text {width: 100%; text-align: center; font-family: 'Helvetica Neue', Roboto, sans-serif}
.textbody p {max-width: 1000px; margin: 2em auto; padding: 0 1em; font-size: 140%}
.contact-text p {margin: 0 auto; padding: 0 1em; font-size: 140%}

.textbody a, #footer a, .contact-text a {color: #36c; border-bottom: 1px solid #d8e1f1; text-decoration: none}
.textbody a:hover, #footer a:hover, .contact-text a:hover {color: #002db2; border-bottom: 1px solid #c4ccf4}

.pano-zoom-text a, .pano-zoom-text a:visited {color: #36c; text-decoration: none}
.pano-zoom-text a:hover {color: #fd3c94}

.features-paragraph p {margin: .5em auto}

#studio p, #school p, #rent p {margin: .2em auto 1em}

#services .textbody p {font: 120% 'Helvetica Neue', Roboto, sans-serif; max-width: 900px; margin: .5em auto 2em}
#contacts .textbody p {margin: .5em auto 0}

#school, #studio, #prices, #students, #feedback, #photo-video, #team, #rent, #recording-studio, #equipment {text-align: center; max-width: 2500px; margin: 0 auto}

#studio ul {font-weight: bold}
#studio li {font-weight: normal}

#footer {margin: 30px auto; text-align: center; font: normal 80% 'Helvetica Neue', Helvetica, sans-serif; color: #000}

.h {display: none}

#warn {width: 100%; height: 70vh; text-align: center; display: grid; place-items: center}
#warn h1 {color: #a94357}
#warn p {font: 150% 'Helvetica Neue', Roboto, sans-serif}

#pano-preview {margin: 0 auto; width: 100%; height: 500px; max-width: 1000px; border-radius: 20px; position: relative}
.link-over-iframe {position: absolute; top: 0; right: 0; bottom: 0; left: 0}
.pano-preview-iframe {border-radius: 20px}
@media (max-width: 1000px) {.pano-preview-iframe {border-radius: 0}}
@media (max-width: 500px) { #pano-preview {height: 400px} }
.pano-zoom-text {text-align: center}
.pano-zoom-text p {margin: .5em auto 0; font: 130% 'Helvetica Neue', Roboto, sans-serif}

.wide-photo {margin: 1.3em auto -0.3em; width: 100%; max-width: 2500px}
.center-photo {margin: 0 auto; width: 100%; max-width: 1000px}
.wide-photo img, .center-photo img {margin: 0; width: 100%}
.round-corners img {border-radius: 20px}
@media (max-width: 1000px) {.round-corners img {border-radius: 0}}

.center-video {margin: 0 auto; width: 100%; max-width: 1000px}
.center-video iframe {width: 100%; height: 600px; border-radius: 20px}
@media (max-width: 1000px){ .center-video iframe {height: 500px; border-radius: 0} }

.top-photo {margin: 0 auto; width: 100%}
.top-photo img {margin: 0; width: 100%}

.fancybox-slide--iframe .fancybox-content {width : 100% !important; height: 100% !important; max-width: 3000px; margin: 0 !important}

.price-list {text-align: left; font: 1.3em 'Helvetica Neue', Roboto, sans-serif; margin: 0 auto; width: 100%; max-width: 900px}
.price-list td:nth-child(even) {text-align: right}
.price-list td {padding: .4em .8em; background: #e1eaf8; border-bottom: .2em solid #fff; min-width: 110px; vertical-align: middle}
.price-list a, .price-list a:hover {border: 0}
.price-list tr:first-child td:first-child {border-radius: 10px 0 0 0}
.price-list tr:first-child td:last-child {border-radius: 0 10px 0 0}
.price-list tr:last-child td:first-child {border-radius: 0 0 0 15px}
.price-list tr:last-child td:last-child {border-radius: 0 0 15px 0}

.map {border-radius: 20px; margin-top: 2em; width: 100%}

.lesson {list-style-type: none; list-style-position: inside; font: 140% 'Helvetica Neue', Roboto, sans-serif; max-width: 1000px; padding: 0 1em; margin: 0 auto}
.lesson li {margin: 0 auto .75em}

.three-photos {margin: 1.5em auto 2em; width: 100%; max-width: 1020px}
.three-photos .item {float: left; width: 32%}
.three-photos .item:nth-child(1) {margin: 0 .5% 0 1%}
.three-photos .item:nth-child(2) {margin: 0 .5% 0}
.three-photos .item:nth-child(3) {margin: 0 .5% 0 .5%}

.five-photos {margin: 1.5em auto 2em; width: 100%}
.five-photos .item {float: left; width: 18.8%}
.five-photos .item:nth-child(1) {margin: 0 .5% 0 1%}
.five-photos .item:nth-child(2),
.five-photos .item:nth-child(3),
.five-photos .item:nth-child(4) {margin: 0 .5% 0}
.five-photos .item:nth-child(5) {margin: 0 1% 0 .5%}

@media (max-width: 999px) {
.three-photos {margin: 1.5em auto 2em; width: 100%; max-width: 1020px}
.three-photos .item {width: 32.5%}
.three-photos .item:nth-child(1) {margin: 0 1.25% 0 0}
.three-photos .item:nth-child(2) {margin: 0}
.three-photos .item:nth-child(3) {margin: 0 0 0 1.25%}

.five-photos .item {width: 100%; margin: .5% 0 !important}
}

.three-photos .item img,
.five-photos .item img {width: 100%; height: auto; -moz-transition: all 0.25s ease-out 0s; -o-transition: all 0.25s ease-out 0s; -webkit-transition: all 0.25s ease-out 0s; transition: all 0.25s ease-out 0s}

.three-photos .item img:hover { -webkit-transform: scale(1.03); -moz-transform: scale(1.03); -o-transform: scale(1.03); transform: scale(1.03) }

@media (min-width: 1000px) {
.five-photos .item img:hover { -webkit-transform: scale(1.03); -moz-transform: scale(1.03); -o-transform: scale(1.03); transform: scale(1.03) }
.five-photos .item img, .three-photos .item img {border-radius: 10px}
}

/*
версия для 3 фотографий
@media (max-width: 768px) {
.team-photos {margin: 1.5em auto 2em; width: 100%; max-width: 2000px}
.team-photos .item {float: left; width: 70%}
.team-photos .item {margin: 5% 15% 0; clear: left}
}

@media (min-width: 769px) {
.team-photos {margin: 1.5em auto 2em; width: 100%; max-width: 2000px}
.team-photos .item {float: left; width: 23%}
.team-photos .item:nth-child(1) {margin: 0 3% 0 6%}
.team-photos .item:nth-child(2) {margin: 0 6% 0}
.team-photos .item:nth-child(3) {margin: 0 6% 0 3%}
}
*/

/* версия для 4 фотографий */
@media (max-width: 768px) {
.team-photos {margin: 1.5em auto 2em; width: 100%; max-width: 2000px}
.team-photos .item {float: left; width: 44%}
.team-photos .item:nth-child(1) {margin: 0 2% 0 4%}
.team-photos .item:nth-child(2) {margin: 0 2% 0}
.team-photos .item:nth-child(3) {margin: 5% 2% 0; clear: left}
.team-photos .item:nth-child(4) {margin: 5% 4% 0 2%}
}

@media (min-width: 769px) {
.team-photos {margin: 1.5em auto 2em; width: 100%; max-width: 2000px}
.team-photos .item {float: left; width: 20%}
.team-photos .item:nth-child(1) {margin: 0 2% 0 4%}
.team-photos .item:nth-child(2),
.team-photos .item:nth-child(3) {margin: 0 2% 0}
.team-photos .item:nth-child(4) {margin: 0 4% 0 1%}
}


.team-photos .item img {width: 100%; height: auto; -moz-transition: all 0.25s ease-out 0s; -o-transition: all 0.25s ease-out 0s; -webkit-transition: all 0.25s ease-out 0s; transition: all 0.25s ease-out 0s}

.team-photos .item img:hover { -webkit-transform: scale(1.03); -moz-transform: scale(1.03); -o-transform: scale(1.03); transform: scale(1.03) }

.team-photo-text p {margin: 4% auto 0; text-align: center; font: 120% 'Helvetica Neue', Roboto, sans-serif}
.team-h {font-size: 150% !important; font-weight: bold !important; margin: 7% auto 0 !important}
.team-photo-text a {text-decoration: none; color: #000}
@media (max-width: 1280px) {
.team-photo-text p {font-size: 100%}
.team-h {font-size: 120% !important}
}

.feedback-container {margin: 0 auto; width: 100%; height: 100%; max-width: 1798px}
#feedback-gallery img {-moz-transition: all 0.25s ease-out 0s; -o-transition: all 0.25s ease-out 0s; -webkit-transition: all 0.25s ease-out 0s; transition: all 0.25s ease-out 0s}
#feedback-gallery img:hover { -webkit-transform: scale(1.02); -moz-transform: scale(1.02); -o-transform: scale(1.02); transform: scale(1.02) }

.feedback-all {font-family: 'Helvetica Neue', Roboto, sans-serif; max-width: 2000px; margin: 0 auto}
.feedback-all img {float: left; height: 555px; width: 500px; margin: 1.5em 5% 0 !important; padding-bottom: 1em}
.feedback-all p {font-size: 1.4em; margin: 1em 2em}

.feedback-all a {color: #36c; border-bottom: 1px solid #d8e1f1; text-decoration: none}
.feedback-all a:hover {color: #002db2; border-bottom: 1px solid #c4ccf4}
.feedback-link {font-size: 1.1em !important; font-style: italic; padding-top: 0 !important; margin-left: 2.5em !important}

@media (max-width: 1024px) {
.feedback-all {margin: 0 auto; text-align: center}
.feedback-all img {float: none; margin: 0 5%}
.feedback-link {margin-bottom: 2em !important}  }
@media (max-width: 555px) { .feedback-all img {width: 90%; height: auto !important; margin: 5% 5% 0 !important }
@media (min-width: 1025px) { .feedback-first {margin-top: 2em !important} }

@media (max-width: 1024px) {
.textbody p, .contact-text p, .lesson {font-size: 120%}
h1 {font-size: 150%}
h2, h3 {font-size: 120%}
#rent h2 {font-size: 130%; font-weight: bold}
}