/* === FONTS === */
@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto/Roboto-Regular.ttf) format("truetype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto/Roboto-Bold.ttf) format("truetype");
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto/Roboto-Black.ttf) format("truetype");
    font-style: normal;
    font-weight: 900;
}

@font-face {
    font-family: 'Oswald';
    src: url(../fonts/Oswald/Oswald-Light.ttf) format("truetype");
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: 'Oswald';
    src: url(../fonts/Oswald/Oswald-Medium.ttf) format("truetype");
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: 'Oswald';
    src: url(../fonts/Oswald/Oswald-Bold.ttf) format("truetype");
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: 'OpenSans';
    src: url(../fonts/OpenSans/OpenSans-Regular.ttf) format("truetype");
    font-style: normal;
    font-weight: normal;
}
/* === //FONTS === */

/* === GENERAL STYLE === */
html {
    font-size: 16px;
}

body {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: normal;
    font-size: 1rem;
    color: #234868;
}

:active,
:hover,
:focus {
	outline: none;
	outline-offset: 0;
}

button.close:focus {
    outline: none;
}

a:hover {
	text-decoration: none;
}

label {
    margin-bottom: 0;
}
/* === //GENERAL STYLE === */

/* === top background === */
.top-bg {
    width: 100%;
    padding-bottom: 20%;
    position: absolute;
    background: url(../img/top-bg-4k.jpg) center top no-repeat;
    background-size: cover;
    border-bottom: 11px solid #A6CC0F;
    z-index: -1;
}
/* === //top background === */

/* === HEADER === */
.header__top {
    padding-top: 50px;
}

.nav {
    justify-content: center;
    line-height: 19px;
    text-decoration-line: underline;
    text-transform: uppercase;
}

.nav a {
    margin-right: 20px;
    color: #fff;
}

.nav a:hover {
    color: #8CCBFF;
}

.header__contacts {
    margin-top: 15px;
    text-align: right;
}

.mobail-menu .header__contacts {
    text-align: left;
}

.mobail-menu {
    position: relative;
    display: none;
}

/* fixed menu */
.fixed-menu {
    display: none;
}

.fixed-menu__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 220px;
}

.fixed-menu__logo {
    padding: 7px 10px 7px 10px;
    min-height: 40px;
    background: #5793C9;
    border-radius: 0px 0px 0 3px;
}

.fixed-menu__contacts {
    background: #5793C9;
    border-radius: 0px 0px 3px 0;
}

.fixed-menu__booking .booking{
    border-radius: 0px 0px 3px 3px;
}
/* //fixed menu */

/* gamburger */
.toggle-menu,
.toggle-menu__fixed {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    width: 43px;
    height: 43px;
    background-color: #5793C9;
    border: none;
    z-index: 100;
    cursor: pointer;
}

.toggle-menu__fixed {
    position: relative;
    right: 5px;
    display: none;
    justify-self: end;
}

.toggle-menu:focus,
.toggle-menu__fixed:focus {
    outline: none;
}

.toggle-menu span,
.toggle-menu__fixed span {
    display: block;
}

.sandwich,
.sandwich__fixed {
    width: 25px;
    height: 23px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
}

.toggle-menu__fixed .sandwich__fixed {
    position: static;
}

.sw-topper,
.sw-bottom,
.sw-footer {
    position: relative;
    width: 25px;
    height: 4px;
    background: #fff;
    border: none;
    border-radius: 4px 4px 4px 4px;
}

.sw-topper {
    top: 0;
    transition: transform 0.5s, top 0.2s;
}

.sw-bottom {
    top: 5px;
    transition: transform 0.5s, top 0.2s;
    transition-delay: 0.2s, 0s;
}

.sw-footer {
    top: 10px;
    transition: all 0.5s;
    transition-delay: 0.1s;
}

/* gamburger animation */
.sandwich.active .sw-topper,
.sandwich__fixed.active .sw-topper {
    top: 9px;
    transform: rotate(140deg);
}

.sandwich.active .sw-bottom,
.sandwich__fixed.active .sw-bottom {
    top: 5px;
    transform: rotate(-140deg);
}

.sandwich.active .sw-footer,
.sandwich__fixed.active .sw-footer {
    opacity: 0;
    top: 0;
    transform: rotate(180deg);
}
/* //gamburger */
.nav-mobail__outer,
.nav-fixed__outer {
    display: none;
    padding: 20px;
    min-width: 250px;
    position: absolute;
    top: 43px;
    right: 0;
    background: #5793C9;
}

.nav-mobail__outer {
    z-index: 2;
}

.nav-mobail {
    justify-content: start;
    padding-bottom: 22px;
    border-bottom: 2px solid rgba(140, 203, 255, 0.3);
}

.nav-mobail ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.nav-mobail ul li a {
    margin: 0;
    font-weight: bold;
    color: #fff;
    line-height: 30px;
    text-decoration-line: underline;
}

.nav-mobail__outer .header__contacts button,
.nav-fixed__outer .header__contacts button {
    display: block;
}

.nav-mobail__outer .phone-modal,
.nav-fixed__outer .phone-modal p {
    margin: 0;
}

.mobail-phone {
    line-height: 25px;
    text-align-last: left;
}

.mobail-phone span {
    display: block;
    margin-top: 10px;
    color: #fff;
}
.mobail-phone p {
    margin: 0;
    font-weight: bold;
    color: #fff;
}

.phone-modal {
    padding: 8px 30px 8px 15px;
    position: relative;
    background: #5793C9;
    border-radius: 3px;
    font-weight: bold;
    border: none;
}

.phone-modal::after {
    content: "";
    display: block;
    position: absolute;
    top: 15px;
    right: 8px;
    width: 13px;
    height: 8px;
    background-image: url(../img/arrow-icon.svg);
}

.phone-modal:hover {
    background: #5793C9;
}

.phone-modal:focus,
.phone-modal:active {
    border: none;
    box-shadow: none;
    background-color: #5793C9;
}

.phone-modal span {
    font-weight: normal;
}

.booking {
    margin-left: 10px;
    padding: 8px 0 8px 0;
    min-width: 210px;
    background: #A6CC0F;
    border-radius: 3px;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    border: none;
}

.booking:hover {
    background: #A6CC0F;
}

.booking:focus,
.booking:active {
    border: none;
    box-shadow: none;
    background-color: #A6CC0F;
}

.header__middle {
    margin-top: 135px;
    max-width: 380px;
    font-family: 'Oswald';
    font-weight: bold;
    font-size: 36px;
    line-height: 53px;
    color: #fff;
    text-transform: uppercase;
}

.h1 {
    font-weight: 300;
    font-size: 24px;
    line-height: 36px;
}

.header__middle span {
    padding: 0 8px 0 8px;
    background: #FF6C01;
    border-radius: 2px;
}

.alarm {
    display: flex;
    margin-top: 160px;
    background: #FFFFFF;
    border: 1px solid #234868;
    border-radius: 3px;
}

.alarm img {
    display: block;
    padding: 10px;
    background: #FF6C01;
    border-radius: 3px 0px 0px 3px;
}

.alarm p {
    margin: 0;
    padding: 12px 10px 12px 15px;
}

.alarm p span {
    font-weight: bold;
}

.mail-form {
    margin-top: 5px;
    margin-bottom: 40px;
    padding: 18px 18px 2px 18px;
    background: #EAEAEF;
    /* border: 1px solid #234868; */
    border-radius: 3px;
}

.modal .mail-form {
    border: none;
}

.mail-form input,
.mail-form select {
    height: 40px;
}

.mail-form .booking {
    margin-top: 24px;
    margin-left: 0;
}

/* Chekbox */
.form-check-label {
	cursor: pointer;
}

.form-check {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.form-check.form-check__date {
    position: absolute;
    bottom: -25px;
    right: 5px;
    z-index: 2;
}

.form-check input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.checkmark {
	position: absolute;
	top: 5px;
	left: 0;
	height: 12px;
	width: 12px;
    background: #fff;
}

.form-check__date .checkmark {
	top: 6px;
}

.checkmark:after {
	content: "";
	position: absolute;
    display: none;
    background: #008CFF;
}

.form-check input:checked~.checkmark:after {
	display: block;
}

.form-check .checkmark:after {
	left: 2px;
	top: 2px;
	width: 8px;
	height: 8px;
}
/* //Chekbox */

/* Calendar */
.calendar-outer {
	position: relative;
}

.calendar__icon {
	display: block;
	width: 17px;
	height: 20px;
	position: absolute;
	top: 9px;
	right: 10px;
	background-image: url(../img/calendar-icon.svg);
	background-position: center center;
	pointer-events: none;
}
/* //Calendar */
/* === //HEADER === */

/* === SECTION#1 === */
.company {
    padding: 80px 0 30px 0;
}

.h3 {
    font-family: 'Oswald';
    font-weight: 500;
    font-size: 36px;
    line-height: 53px;
    text-transform: uppercase;
}

.h3::after {
    content: "";
    display: block;
    margin-top: 7px;
    width: 63px;
    height: 3px;
    background-color: #008CFF;
}

.company__text {
    margin-top: 70px;
}

.company__text p {
    margin: 0 0 40px 0;
    font-family: 'OpenSans';
    font-weight: normal;
}

.company__img {
    position: relative;
}

.company__img img {
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    top: -55px;
    left: 0;
    border-bottom: 10px solid #EAEAEF;
    z-index: 2;
}
/* === //SECTION#1 === */


/* === SECTION#2 === */
.park {
    padding: 80px 0 0 0;
    position: relative;
    background-color: #2E659D;
    border-bottom: 11px solid #A6CC0F;
}

.park .h3 {
    margin-bottom: 33px;
    color: #FFFFFF;
}

.park .h3::after {
    background-color: #FF6C01;
}

.park__list,
.park__text {
    color: #fff;
    line-height: 29px;
}

.park__text {
    margin-top: 35px;
}

.park__text p {
    margin: 0;
}

.park__list {
    margin-left: 35px;
    padding: 37px 20px 37px 60px;
    column-count: 2;
    background: #5793C9;
    border-radius: 3px;
    list-style-type: none;
}

.park__list li {
    position: relative;
}

.park__list li::before {
    content: "";
    display: block;
    position: absolute;
    width: 6px;
    height: 9px;
    top: 10px;
    left: -20px;
    background-image: url(../img/marker.png);
}

.slider-wrap {
    position: relative;
    top: 60px;
}

.park__item {
    margin: 0 auto;
    padding: 0 25px;
}

.park__item img {
    display: block;
    width: 100%;
    height: auto;
}

.slider-wrap .container {
    position: relative;
}

.arrows-outer {
    position: absolute;
    right: 0;
}

.arrow__prew,
.arrow__next {
    padding: 15px 19px;
    border: none;
    background-color: #A6CC0F;
}

.arrow__prew:focus,
.arrow__next:focus {
    outline: none;
}

.arrow__next {
    margin-left: 3px;
    transform: rotate(180deg);
}
/* === //SECTION#2 === */

/* === SECTION#3 === */
.rates {
    padding-top: 150px;
}

.rates .table {
    table-layout: fixed;
}

/* Tabs */
.tabs {
	max-width: 100%;
	padding: 0px;
	margin: 45px auto 0 auto;
}

/* Стили секций с содержанием */
.tabs>div {
	display: none;
}

.tabs>div>.tab-content {
	/* анимация */
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Прячем чекбоксы */
.tabs>input {
	display: none;
	position: absolute;
}

/* Стили переключателей вкладок (табов) */
.tabs>label {
	display: inline-block;
	margin: 0;
	padding: 10px 40px 25px 0;
	font-size: 16px;
	font-weight: normal;
	text-align: center;
    color: #008CFF;
    text-transform: uppercase;
	text-decoration-line: underline;
}

/* Изменения стиля переключателей вкладок при наведении */
.tabs>label:hover {
	color: #8CCBFF;
	cursor: pointer;
}

/* Стили для активной вкладки */
.tabs>input:checked+label {
	color: #FF6C01;
    text-decoration-line: underline;
    text-transform: uppercase;
}

/* Активация секций с помощью псевдокласса :checked */
#tab1:checked~#content-tab1,
#tab2:checked~#content-tab2,
#tab3:checked~#content-tab3,
#tab4:checked~#content-tab4,
#tab5:checked~#content-tab5, 
#tab6:checked~#content-tab6, 
#tab7:checked~#content-tab7 {
	display: block;
}

/* содержание табов */
.tab-content .table thead {
    background-color: #EAEAEF;
    border: 1px solid #EAEAEF;
}

.tab-content .table thead tr th {
	color: #234868;
	font-weight: bold;
}

.tab-content .table th,
.tab-content .table td {
	padding: 8px;
}

.table thead th {
	vertical-align: middle;
}

.tab-content .table thead th {
	border-bottom: none;
}

.tab-content .table th,
.tab-content .table td {
	padding-left: 12px;
	color: #234868;
}

.tab-content .table td,
.tab-content .table th {
    position: relative;
	font-weight: bold;
}

.tab-content .table tbody td,
.tab-content .table tbody th {
    border: 1px solid #EAEAEF;
}

.tab-content .table-striped tbody tr:nth-of-type(odd) {
	background-color: #fff;
}
/* //Tabs */

.table-booking {
    padding-right: 12px;
    position: absolute;
    right: 0;
    text-decoration-line: underline;
    text-transform: uppercase;
    color: #209AFF;
    background-color: transparent;
    border: none;
}

.table-booking:hover {
    color: #FF6C01;
}

.table-booking:focus {
    outline: none;
}
/* === //SECTION#3 === */

/* === FOOTER === */
.footer {
    padding-top: 60px;
    background: url(../img/footer-bg.jpg) center center no-repeat;
    background-size: cover;
}

.footer .h3:after {
    background-color: #FF6C01;
}

.footer__text {
    margin: 80px 0 70px 0;
}

.footer__text p {
    margin-bottom: 40px;
    font-family: 'OpenSans';
    line-height: 29px;
}

.footer__contacts {
    padding: 40px 40px 40px 40px;
    background-color: #2E659D;
    color: #fff;
    border-bottom: 11px solid #A6CC0F;
}

.footer__contacts p {
    margin: 0;
}

.footer__contacts span {
    display: block;
}

.footer__address {
    margin-bottom: 20px;
    grid-area: a;
}

.footer__phone {
    grid-area: b;
    line-height: 30px;
}

.footer__phone p,
.footer__social p {
    font-weight: bold;
}

.footer__social {
    grid-area: c;
    line-height: 30px;
}

.footer-outer {
    margin: 30px 0 80px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    grid-template-rows: auto;
    grid-template-areas:
        'a a'
        'b c'
}

.social-inner {
    margin: 10px 0;
}

.social-inner button,
.modal__inner button,
.mobail-phone button {
    padding: 0;
    text-decoration-line: underline;
    color: #8CCBFF;
    background-color: transparent;
    border: none;
}

.modal__inner button {
    display: block;
}

.social-inner button:hover,
.modal__inner button:hover {
    color: #FF6C01;
}

.social-inner button:focus,
.modal__inner button:focus {
    outline: none;
}

.copyright a {
    color: #fff;
}
/* === //FOOTER === */

/* === Modal === */
.modal__contacts .modal-dialog {
    max-width: 450px;
}

.modal__contacts .modal-content {
    font-weight: bold;
    color: #234868;
    background: #EAEAEF;
    border-radius: 3px;
}

.modal__contacts .modal-header {
    padding: 25px 30px 30px 30px;
    position: relative;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: none;
}

.modal__contacts .modal-header .close span::before {
    content: "";
    display: block;
    position: absolute;
    top: 25px;
    right: 20px;
    width: 14px;
    height: 14px;
    background-image: url(../img/close-icon.svg);
}

.modal__contacts .close {
    opacity: 1;
}

.modal__contacts .modal-body {
    padding: 0 30px 30px 30px;
    line-height: 28px;
}

.modal__contacts .modal-body .modal__inner span {
    font-weight: normal;
}

.modal__contacts .modal-body .modal__inner p {
    margin: 0;
}

.modal__contacts .modal-body .modal__inner a {
    margin-bottom: 20px;
    display: block;
    text-decoration-line: underline;
    color: #86CCFF;
}

.modal__contacts .modal-body .modal__inner a:hover {
    color: #FF6C01;
}

.modal__form .modal-dialog {
    max-width: 1140px;
}

.modal__form .modal-header {
    padding: 20px 18px 0 18px;
    position: relative;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: none;
    background: #EAEAEF;
}

.modal__form .close {
    opacity: 1;
}

.modal__form .modal-header .close span::before {
    content: "";
    display: block;
    position: absolute;
    top: 20px;
    right: 18px;
    width: 14px;
    height: 14px;
    background-image: url(../img/close-icon.svg);
}

.modal__form .modal-body {
    padding: 0;
}

.modal__form .mail-form {
    margin: 0;
}

.modal__form.modal__call .modal-dialog,
.modal__form.modal__write .modal-dialog {
    max-width: 475px;
}

.modal__form.modal__call .mail-form,
.modal__form.modal__write .mail-form {
    padding-top: 23px;
    padding-bottom: 25px;
}

.modal__form.modal__call .booking,
.modal__form.modal__write .booking {
    margin-top: 8px;
}

.modal__form.modal__write textarea {
    resize: none;
}
/* === //Modal === */

/* === Call Me Button === */
.callback-bt {
    background: #0fd831;
    border: 2px solid #0fd831;
    border-radius: 50%;
    box-shadow: 0 8px 10px rgba(15,216,49,0.3);
    cursor: pointer;
    height: 68px;
    text-align: center;
    width: 68px;
    position: fixed;
    left: 3%;
    bottom: 4%;
    z-index: 999;
    transition: .3s;
    -webkit-animation: hoverWave linear 1s infinite;
    animation: hoverWave linear 1s infinite;
}

.callback-bt .text-call{
    height: 68px;
    width: 68px;        
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.callback-bt .text-call span {
    text-align: center;
    color: #0fd831;
    opacity: 0;
    font-size: 0;
    position: absolute;
    right: 7px;
    top: 26px;
    line-height: 14px;
    font-weight: 600;
    text-transform: uppercase;
    transition: opacity .3s linear;
    font-family: 'montserrat', Arial, Helvetica, sans-serif;
}

.callback-bt .text-call:hover span {
    opacity: 1;
    font-size: 9px;
}

.callback-bt:hover img {
    display:none;
}

.callback-bt:hover {
    z-index: 5;
    background: #fff;
    color: transparent;
    transition: .3s;
}

.callback-bt:hover img {
    transition: .3s;
}

.callback-bt:hover {
    z-index: 5;
    background: #fff;
    color: transparent;
    transition: .3s;
}

.callback-bt:hover img {
    transition: .3s;
}

.callback-bt img {
    width: 30px;
    position: relative;
    top: 15px;
    left: -2px;
    transition: .3s;
    transition: .5s ease-in-out;
}

.callback-bt img {
    animation: 1200ms ease 0s normal none 1 running shake;
    animation-iteration-count: infinite;
    -webkit-animation: 1200ms ease 0s normal none 1 running shake;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes hoverWave {
    0% {
    box-shadow:0 8px 10px rgba(15,216,49,0.3),0 0 0 0 rgba(15,216,49,0.2),0 0 0 0 rgba(15,216,49,0.2)
}
40% {
    box-shadow:0 8px 10px rgba(15,216,49,0.3),0 0 0 15px rgba(15,216,49,0.2),0 0 0 0 rgba(15,216,49,0.2)
}
80% {
    box-shadow:0 8px 10px rgba(15,216,49,0.3),0 0 0 30px rgba(15,216,49,0),0 0 0 26.7px rgba(15,216,49,0.067)
}
100% {
    box-shadow:0 8px 10px rgba(15,216,49,0.3),0 0 0 30px rgba(15,216,49,0),0 0 0 40px rgba(15,216,49,0.0)
}
}@keyframes hoverWave {
    0% {
    box-shadow:0 8px 10px rgba(15,216,49,0.3),0 0 0 0 rgba(15,216,49,0.2),0 0 0 0 rgba(15,216,49,0.2)
}
40% {
    box-shadow:0 8px 10px rgba(15,216,49,0.3),0 0 0 15px rgba(15,216,49,0.2),0 0 0 0 rgba(15,216,49,0.2)
}
80% {
    box-shadow:0 8px 10px rgba(15,216,49,0.3),0 0 0 30px rgba(15,216,49,0),0 0 0 26.7px rgba(15,216,49,0.067)
}
100% {
    box-shadow:0 8px 10px rgba(15,216,49,0.3),0 0 0 30px rgba(15,216,49,0),0 0 0 40px rgba(15,216,49,0.0)
}
}

@keyframes shake {
    0% {
        transform: rotateZ(0deg);
            -ms-transform: rotateZ(0deg);
            -webkit-transform: rotateZ(0deg);
    }
    10% {
        transform: rotateZ(-30deg);
            -ms-transform: rotateZ(-30deg);
            -webkit-transform: rotateZ(-30deg);
    }
    20% {
        transform: rotateZ(15deg);
            -ms-transform: rotateZ(15deg);
            -webkit-transform: rotateZ(15deg);
    }
    30% {
        transform: rotateZ(-10deg);
            -ms-transform: rotateZ(-10deg);
            -webkit-transform: rotateZ(-10deg);
    }
    40% {
        transform: rotateZ(7.5deg);
            -ms-transform: rotateZ(7.5deg);
            -webkit-transform: rotateZ(7.5deg);
    }
    50% {
        transform: rotateZ(-6deg);
            -ms-transform: rotateZ(-6deg);
            -webkit-transform: rotateZ(-6deg);
    }
    60% {
        transform: rotateZ(5deg);
            -ms-transform: rotateZ(5deg);
            -webkit-transform: rotateZ(5deg);
    }
    70% {
        transform: rotateZ(-4.28571deg);
            -ms-transform: rotateZ(-4.28571deg);
            -webkit-transform: rotateZ(-4.28571deg);
    }
    80% {
        transform: rotateZ(3.75deg);
            -ms-transform: rotateZ(3.75deg);
            -webkit-transform: rotateZ(3.75deg);
    }
    90% {
        transform: rotateZ(-3.33333deg);
            -ms-transform: rotateZ(-3.33333deg);
            -webkit-transform: rotateZ(-3.33333deg);
    }
    100% {
        transform: rotateZ(0deg);
            -ms-transform: rotateZ(0deg);
            -webkit-transform: rotateZ(0deg);
    }
    }
    
    @-webkit-keyframes shake {
    0% {
        transform: rotateZ(0deg);
            -ms-transform: rotateZ(0deg);
            -webkit-transform: rotateZ(0deg);
    }
    10% {
        transform: rotateZ(-30deg);
            -ms-transform: rotateZ(-30deg);
            -webkit-transform: rotateZ(-30deg);
    }
    20% {
        transform: rotateZ(15deg);
            -ms-transform: rotateZ(15deg);
            -webkit-transform: rotateZ(15deg);
    }
    30% {
        transform: rotateZ(-10deg);
            -ms-transform: rotateZ(-10deg);
            -webkit-transform: rotateZ(-10deg);
    }
    40% {
        transform: rotateZ(7.5deg);
            -ms-transform: rotateZ(7.5deg);
            -webkit-transform: rotateZ(7.5deg);
    }
    50% {
        transform: rotateZ(-6deg);
            -ms-transform: rotateZ(-6deg);
            -webkit-transform: rotateZ(-6deg);
    }
    60% {
        transform: rotateZ(5deg);
            -ms-transform: rotateZ(5deg);
            -webkit-transform: rotateZ(5deg);
    }
    70% {
        transform: rotateZ(-4.28571deg);
            -ms-transform: rotateZ(-4.28571deg);
            -webkit-transform: rotateZ(-4.28571deg);
    }
    80% {
        transform: rotateZ(3.75deg);
            -ms-transform: rotateZ(3.75deg);
            -webkit-transform: rotateZ(3.75deg);
    }
    90% {
        transform: rotateZ(-3.33333deg);
            -ms-transform: rotateZ(-3.33333deg);
            -webkit-transform: rotateZ(-3.33333deg);
    }
    100% {
        transform: rotateZ(0deg);
            -ms-transform: rotateZ(0deg);
            -webkit-transform: rotateZ(0deg);
    }
}
/* === /Call Me Button === */
/* === 0-2500px === */
@media only screen and (max-width : 2500px) {
    .top-bg {
        padding-bottom: 43%;
        background: url(../img/top-bg-1920.jpg) center top no-repeat;
        background-size: cover;
    }
}

/* === 0-1999px === */
@media only screen and (max-width : 1199px) {
    .top-bg {
        padding-bottom: 75%;
    }

    .booking {
        min-width: 170px;
    }

    .nav-mobail__outer .booking,
    .nav-fixed__outer .booking {
        margin-top: 20px;
        margin-left: 0;
        width: 100%;
    }

    .modal__form .modal-dialog {
        max-width: 930px;
    }

    .fixed-menu__contacts,
    .fixed-menu__booking {
        display: none;
    }

    .fixed-menu__inner {
        grid-template-columns: 1fr 1fr;
        background-color: #5793C9;
    }

    .toggle-menu__fixed {
        display: block;
    }
}

/* === 0-991px === */
@media only screen and (max-width : 991px) {
    .decktop-menu {
        display: none;
    }

    .mobail-menu {
        display: block;
    }

    .header__top {
        padding-top: 35px;
    }

    .header__middle {
        margin-top: 90px;
    }

    .alarm {
        margin-top: 100px;
    }

    .mail-form .booking {
        width: 100%;
    }

    .park__list {
        margin-top: 40px;
        margin-left: 0;
    }
}

/* === 0-767px === */
@media only screen and (max-width : 767px) {
    .top-bg {
        padding-bottom: 65%;
        background: url(../img/top-bg-768.jpg) center top no-repeat;
        background-size: cover;
    }

    .mail-form {
        padding: 18px 18px 20px 18px;
    }
    
    .mail-form .booking {
        margin-top: 5px;
    }

    .company {
        padding: 40px 0 30px 0;
    }

    .company__text {
        margin-top: 40px;
    }

    .company__text p {
        margin: 0 0 20px 0;
    }

    .company__img {
        display: none;
    }

    .park {
        padding: 40px 0 0 0;
    }

    .park__text {
        margin-top: 15px;
    }

    .tabs>label {
        padding: 10px 20px 25px 0;
    }

    .tabs .table {
        font-size: 14px;
    }

    .rates__price {
        width: 210px;
    }

    .footer {
        padding-top: 40px;
    }

    .footer__text {
        margin: 40px 0 50px 0;
    }

    .footer__text p {
        margin-bottom: 20px;
    }

    .footer-outer {
        margin: 30px 0 40px 0;
    }

/* === 0-575px === */
@media only screen and (max-width : 575px) {
    .top-bg {
        padding-bottom: 116%;
        background: url(../img/top-bg-575.jpg) center top no-repeat;
        background-size: cover;
    }

    .table-price {
        display: block;
    }

    .rates__price {
        width: auto;
    }

    .table-booking {
        padding: 0;
        position: static;
    }
}

/* === 0-479px === */
@media only screen and (max-width : 479px) {
    .park__list {
        column-count: 1;
    }

    .slider-wrap {
        display: none;
    }

    .rates {
        padding-top: 40px;
    }

    .footer__contacts {
        padding: 20px;
    }
}

/* === 0-390px === */
@media only screen and (max-width : 390px) {
    .top-bg {
        padding-bottom: 150%;
        background: url(../img/top-bg-320.jpg) center top no-repeat;
        background-size: cover;
    }

    .footer-outer {
        grid-template-areas:
        'a a'
        'b b'
        'c c'
    }

    .footer__phone,
    .footer__social {
        line-height: 25px;
    }
}

/* === 0-320px === */
@media only screen and (max-width : 320px) {
    .tab-content .table th,
    .tab-content .table td {
        padding: 5px;
    }
}